body { font-family: Arial; display: flex; justify-content: center; align-items: center; height: 100vh; background: #f4f4f4; margin: 0; }
/*form { background: white; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.1); }*/
form {
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    width: 266px; /* 250px + 8px + 8px para que el total visual quede igual */
    }
input,
button {
display: block;
width: 100%;
padding: 8px;
box-sizing: border-box;
}
input { margin-bottom: 10px; }
button {
background: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
.form-version{
display:block;
margin-top:8px;
text-align:right;
font-style:italic;
font-size:12px;         /* más pequeño que el texto normal */
color:#9aa3af;          /* gris suave */
}
.note { margin-bottom: 10px; font-size: 14px; color: #555; }
.ok { color: #0a7a2e; }
.err { color: #b00020; }

.auth{ overflow:hidden; }

/* Reseteos suaves */
*{box-sizing:border-box}
html,body{height:100%; margin:0; padding:0}
body{background:#f4f4f4; font-family:Arial, system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color:#111;}

/* Contenedor que centra todo */
.auth{
  /* Safari iOS friendly centering */
  min-height:100svh;             /* usa svh (small viewport) en iOS */
  min-height:100dvh;             /* fallback moderno */
  display:grid;
  place-items:center;
  overflow-x:hidden;             /* evita desplazamiento lateral */
  padding:env(safe-area-inset-top) 16px env(safe-area-inset-bottom);
}

/* Tarjeta del login (más grande) */
.auth-card{
  width: 420px;                  /* desktop amplio */
  max-width: 92vw;               /* no desbordar en móvil */
  background:#fff;
  padding:24px 26px;
  border-radius:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.12);
}

/* Título */
.auth-card h2{
  margin:0 0 14px;
  font-size:28px;
  text-align:center;
}

/* Inputs y botón del mismo ancho */
.auth-card input,
.auth-card button{
  display:block;
  width:100%;
  padding:12px 12px;             /* más alto */
  font-size:16px;                /* legible en móvil */
  border-radius:8px;
}

/* Inputs */
.auth-card input{
  margin-bottom:12px;
  border:1px solid #ccc;
  outline:none;
}
.auth-card input:focus{
  border-color:#3b82f6;
  box-shadow:0 0 0 3px rgba(59,130,246,.2);
}

/* Botón */
.auth-card button{
  border:0;
  background:#b91c1c;
  color:#fff;
  cursor:pointer;
  font-weight:600;
}
.auth-card button:hover{ filter:brightness(.95) }
.auth-card button:active{ transform:translateY(1px) }

/* Mensajes */
.note{ margin-bottom:10px; font-size:14px }
.ok{ color:#0a7a2e }
.err{ color:#b00020 }

/* Versión */
.form-version{
  display:block;
  margin-top:8px;
  text-align:right;
  font-style:italic;
  font-size:12px;
  color:#9aa3af;
}

/* Responsive fino para iPhone */
@media (max-width: 480px){
  .auth-card{
    padding:20px;
    border-radius:12px;
  }
  .auth-card h2{ font-size:24px }
  .auth-card input,
  .auth-card button{ padding:12px; font-size:16px }
}

    /* Ajustes mínimos para el bloque "Olvidé mi contraseña" */
    .forgot-box { margin-top:8px; padding:10px; border:1px solid #e6e8eb; border-radius:10px; background:#fafafb; }
    .forgot-row{
    display:flex;
    gap:10px;
    align-items:stretch;           /* estira ambos a la misma altura */
    }
    .forgot-row input,
    .forgot-row button{
    height:44px;                   /* mismo alto */
    box-sizing:border-box;
    border-radius:10px;
    font-size:16px;
    }
    .forgot-row input{
    flex:1 1 auto;
    min-width:0;
    padding:0 12px;                /* vertical 0 porque definimos height */
    border:1px solid #ddd;
    background:#fff;
    }
    .forgot-row button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 16px;                /* solo horizontal */
    border:1px solid #d14b3b;
    background:#d14b3b;
    color:#fff;
    font-weight:700;
    cursor:pointer;
    }

    /* Responsive: apilar en móviles */
    @media (max-width: 480px){
    .forgot-row{ flex-direction:column; }
    .forgot-row button{ width:100%; }
    }

    .note.ok, .note.err { text-align:center; margin:.5rem 0; }
    .note.ok { color:#0a7a2e; }
    .note.err { color:#b00020; }
    .form-version { display:block; text-align:center; margin-top:10px; color:#667085; }

    /* Botón "¿Olvidaste tu contraseña?" más discreto */
    #forgotToggle {
      display: inline-block;
      width: 100%;
      margin: 6px 0 10px;
      padding: .4rem 1rem;
      background: transparent;          /* sin fondo */
      border: 0;                        /* sin borde */
      color: #555;                      /* gris medio */
      font-weight: 500;
      font-size: 15px;
      text-decoration: underline;       /* estilo típico de enlace */
      cursor: pointer;
      transition: color .2s ease;
    }

    #forgotToggle:hover {
      color: #0b6bcb;                   /* azul suave al pasar el mouse */
      text-decoration: none;
    }

    #forgotToggle:focus-visible {
      outline: 2px solid #0b6bcb;
      outline-offset: 2px;
    }

    

    /* Botón Ingresar (por si el tema le da otro alto/padding) */
    .auth-card button[type="submit"]{
    width:100%;
    padding:.9rem 1rem;
    border-radius:10px;
    }

    /* Centrar el bloque de reCAPTCHA en el formulario */
    .g-recaptcha {
      display: flex;
      justify-content: center;
      margin: 12px auto;
      transform: scale(1.05); /* opcional: agranda un poquito */
      transform-origin: center;
    }