/**
 * auth.css — páginas de acceso (login, recuperación de contraseña e invitación).
 *
 * Complementa a nueva.css; NO la reemplaza. Se carga después.
 *
 * Todo lo que ya existía se reutiliza tal cual: .container, .site-header,
 * .site-footer, .field, .btn, .msg, .sr-only, .skip-link y las variables de
 * :root. Acá solo está el armazón que la portada no necesitaba: una página
 * centrada verticalmente con la tarjeta de acceso al medio.
 *
 * Vive aparte de nueva.css a propósito. DHT-18 dejó la portada nueva aislada
 * para que tocarla no pudiera romper nada en producción; si el login empezara
 * a editar nueva.css esa garantía se pierde en las dos direcciones.
 */

/*--------------------------------------------------------------
# Armazón de página
--------------------------------------------------------------*/

/* Pie abajo aunque el contenido sea corto, y tarjeta centrada en el resto. */
.auth-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.auth-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: clamp(2rem, 6vw, 4rem);
}

/* La cabecera es sticky en la portada, donde hay scroll. Acá no lo hay y
   quedarse pegada solo estorba en pantallas bajas. */
.auth-page .site-header { position: static; }

/*--------------------------------------------------------------
# Tarjeta
--------------------------------------------------------------*/
/* El margen automático es lo que la centra. .auth-main centra al .container,
   que mide hasta --container y llega mucho más allá de estos 420 px; sin este
   margen la tarjeta se apoya en el borde izquierdo de ese contenedor y la
   página se ve descuadrada. DHT-146 */
.auth-card {
  width: 100%;
  max-width: 420px;
  margin-inline: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 4vw, 2.25rem);
  box-shadow: var(--shadow-sm);
}

.auth-card h1 {
  font-size: var(--step-2);
  margin-bottom: 0.35rem;
}

.auth-card .auth-intro {
  font-size: var(--step--1);
  color: var(--ink-500);
  margin-bottom: 1.75rem;
}

/* Quién invita y desde qué institución, sobre el título de invite.php. Va como
   línea de contexto y no como banda de color: la franja azul que hacía este
   trabajo era la del tema borrado, y además dejaba el saludo y los errores
   indistinguibles. DHT-148 */
.auth-from {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--ink-500);
  margin: 0 0 0.45rem;
}
.auth-from b { color: var(--ink-900); font-weight: 600; }

/* nueva.css pone margin-bottom: 0 al último .field, que allá es correcto
   porque el botón va en un .dialog-foot con su propio borde. Acá el botón
   viene justo después, así que hay que devolverle el aire. */
.auth-form .field:last-of-type { margin-bottom: 1.1rem; }

.auth-form .btn--block { margin-top: 0.5rem; }

/* El estado de término de solicitud.php no es un formulario, así que la regla
   de arriba no lo alcanza y el botón queda pegado al aviso. DHT-146 */
.auth-done .btn--block { margin-top: 1.1rem; }

/*--------------------------------------------------------------
# Recuperación de contraseña
--------------------------------------------------------------*/

/* <details> y no un modal: se abre y se envía sin una línea de JavaScript.
   El modal anterior dependía de Bootstrap, que ya no se carga. */
.auth-recover {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

.auth-recover > summary {
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--primary);
  cursor: pointer;
  list-style: none;
  text-align: center;
}
.auth-recover > summary::-webkit-details-marker { display: none; }
.auth-recover > summary:hover { color: var(--primary-dark); }

.auth-recover > summary:focus-visible {
  outline: 3px solid var(--brand-magenta);
  outline-offset: 3px;
  border-radius: 4px;
}

.auth-recover[open] > summary { margin-bottom: 1.25rem; }

.auth-recover .recover-hint {
  font-size: 0.8125rem;
  color: var(--ink-500);
  margin-bottom: 1rem;
}

/*--------------------------------------------------------------
# Pie reducido
--------------------------------------------------------------*/

/* El pie de la portada reparte texto y redes a los extremos. En una página
   angosta se ve descolgado; acá va todo centrado. */
.auth-page .site-footer .container { justify-content: center; text-align: center; }

@media (max-width: 520px) {
  .auth-card { border: 0; box-shadow: none; padding-inline: 0; }
}

/*--------------------------------------------------------------
# Campos de contraseña — ojito y aviso de Bloq Mayús
--------------------------------------------------------------*/
/* Lo pinta assets/js/clave.js; sin JavaScript nada de esto llega al HTML y el
   campo se ve exactamente como cualquier otro .field. DHT-168 */

.campo-clave { position: relative; }

/* El espacio para el botón se le da acá y no en .field input, que nueva.css
   comparte con todos los formularios de la portada. */
.campo-clave input { padding-right: 2.9rem; }

.ver-clave {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-400);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: color 0.15s ease;
}
.ver-clave:hover { color: var(--ink-700); }
.ver-clave svg { width: 20px; height: 20px; }

/* El mismo foco visible que el resto de los controles de estas páginas. Hacia
   adentro, porque el botón se apoya en el borde derecho del campo. */
.ver-clave:focus-visible {
  outline: 3px solid var(--brand-magenta);
  outline-offset: -3px;
}

/* Naranja y no rojo: tener Bloq Mayús puesto es un aviso, no un error. */
.aviso-mayus {
  margin: 0.45rem 0 0;
  padding: 0.4rem 0.6rem;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--ink-900);
  background: var(--accent-soft);
  border-left: 3px solid var(--accent-ink);
  border-radius: var(--radius-xs);
}

/* Vacío mientras no haga falta, igual que .msg en nueva.css. */
.aviso-mayus:empty { display: none; }

/* ---------- Activación de un pack de licencias. DHT-292 ---------- */

/* El nombre del pack, sobre el título: dice de dónde viene el enlace. */
.pack-etiqueta {
  margin: 0 0 0.35rem;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--primary);
}

/* El aviso de plazo y de que las licencias son limitadas. */
.pack-aviso {
  margin: 0 0 1.25rem;
  padding: 0.6rem 0.9rem;
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
  color: var(--primary-dark);
  font-size: var(--step--1);
  font-weight: 600;
  text-align: center;
}

.pack-pestanas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  margin-bottom: 1.25rem;
  border: 1px solid var(--line);
  border-radius: 999px;
}

.pack-pestanas button {
  appearance: none;
  border: 0;
  background: none;
  padding: 0.5rem 0.75rem;
  border-radius: 999px;
  font: inherit;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink-500);
  cursor: pointer;
}

.pack-pestanas button[aria-selected="true"] {
  background: var(--primary);
  color: #fff;
}

.pack-nota {
  font-size: var(--step--1);
  color: var(--ink-500);
  margin-bottom: 1rem;
}

/* El recuadro del captcha. Reserva su alto para que el formulario no salte
   cuando Cloudflare termina de dibujarlo. */
.pack-captcha {
  margin: 0.25rem 0 1rem;
  min-height: 65px;
}