/* Paquete acceso — corrección del frontend 13-sep-2026 (docs/auditoria/frontend-vistas-2026-09-13.md). */

/* ── «← Volver…» siempre en su propia línea (ACC-16) ─────────────────────────
   Era inline-flex justo después de la marca (otro elemento en línea). Medido a
   1440px: en /login y /register la marca (260px) y el enlace (104px) cabían en
   los 380px de la columna, así que el enlace flotaba a la derecha de la marca
   (x=304); en /request-password-reset el texto es más largo, no cabía y bajaba
   de línea (x=40). El mismo componente se veía distinto según su texto. */
.academy-auth__form-inner .academy-auth__back {
  display: flex;
  width: fit-content;
}

/* ── «Mantener sesión» en línea con su casilla (ACC-16) ──────────────────────
   Medido en /login: la casilla (18px) quedaba ENCIMA de su texto, porque la
   regla genérica de etiquetas del formulario (display:block, mayúsculas
   espaciadas) alcanzaba también a la etiqueta del checkbox. */
.academy-auth__form-options {
  align-items: center;
  flex-wrap: wrap;
  row-gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.academy-auth__form-options .checkbox,
.academy-auth__form-options .form-check {
  margin: 0;
  padding: 0;
}

/* ── «Recuperar acceso» a la altura de «Mantener sesión» (ronda 3, DIS-AA-R2) ─
   Medido a 1440px: el texto de la casilla en y≈571 y el enlace en y≈580. La
   etiqueta mide 44px en todos los tamaños (área táctil) y el enlace solo bajo
   992px, así que en escritorio las dos cajas no medían lo mismo. Misma caja
   en todos los tamaños: centradas entre sí sin depender del ancho.
   Y la causa del escalón que quedaba (medido con las dos cajas ya a 44px): el
   .form-group de la casilla conservaba margin-bottom:17.6px de la regla
   genérica de campos, que gana en especificidad al `margin: 0` de
   academia.css; flex centraba una caja de 61.6px contra otra de 44px. */
.academy-auth__form-inner .academy-auth__form-options .form-group {
  margin: 0;
}

.academy-auth__form-options > a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.academy-auth__form-inner .academy-auth__form-options .checkbox label {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  /* 44px, no 24px: la etiqueta es el área táctil de una casilla de 18px (DIS-AA-05). */
  min-height: 44px;
  font-size: 0.88rem;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ac-texto-suave);
}

.academy-auth__form-options .checkbox input[type="checkbox"] {
  position: static;
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  opacity: 1;
  accent-color: var(--ac-lima);
}

.academy-auth__form-options .help-block-error:empty {
  display: none;
}

.acceso-recordar__pista {
  margin: 0 0 1.25rem;
  font-size: 0.8rem;
  color: var(--ac-texto-tenue);
}

/* ── Captcha con botón de recarga (ACC-08) ─────────────────────────────────── */
.acceso-captcha__imagen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}

.academy-auth__form-inner .acceso-captcha__imagen img {
  margin-bottom: 0;
  max-width: 100%;
}

.acceso-captcha__otro {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--ac-borde);
  border-radius: var(--ac-radio-chico);
  background: transparent;
  color: var(--ac-lima);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.acceso-captcha__otro:hover {
  border-color: var(--ac-lima);
}

.acceso-captcha__otro:focus-visible {
  outline: 3px solid rgba(148, 193, 31, 0.45);
  outline-offset: 2px;
}

.acceso-captcha__icono {
  font-size: 1rem;
  line-height: 1;
}

.academy-auth__form-inner .help-block small a {
  color: var(--ac-lima);
  font-weight: 600;
}

/* ── Aviso de invitación en el registro (ACC-13) ──────────────────────────── */
.acceso-invitacion {
  margin: -0.75rem 0 1.5rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--ac-borde);
  border-left: 3px solid var(--ac-lima);
  border-radius: var(--ac-radio-chico);
  background: var(--ac-fondo-elevado);
  font-size: 0.9rem;
  color: var(--ac-texto-suave);
}

.acceso-invitacion strong {
  color: var(--ac-texto);
}

/* ── Pantallas de una columna: error, suspendida, mantenimiento, novedades ──
   (ACC-07, ACC-15). Mismo shell que el login, sin el panel de marca: la página
   de error no debe depender de las cifras de la base de datos. */
.academy-auth--sola {
  grid-template-columns: minmax(0, 1fr);
}

.academy-auth--sola .academy-auth__form {
  min-height: 100vh;
}

.academy-auth--sola .academy-auth__form-inner {
  max-width: 460px;
}

.acceso-estado__detalle {
  margin: 0 0 1.5rem;
  color: var(--ac-texto-suave);
  overflow-wrap: anywhere;
}

/* Mensaje propio de la aplicación en la página de error: sustituye a la
   explicación genérica, así que conserva el tamaño y el color del texto
   principal. Solo se corta si trae una palabra larga (un token, una URL). */
.acceso-estado__mensaje {
  overflow-wrap: anywhere;
}

.acceso-estado__detalle a {
  color: var(--ac-lima);
  font-weight: 600;
}

.acceso-estado__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.acceso-estado__acciones .academy-button {
  flex: 1 1 10rem;
}

/* Con sesión, el error vive dentro del layout normal. */
.acceso-estado--panel {
  max-width: 640px;
  margin: 2rem auto;
}

.acceso-estado--panel h1 {
  margin: 0 0 0.5rem;
  font-size: 1.6rem;
}

.acceso-estado--panel .academy-auth__form-lead {
  margin-bottom: 1.25rem;
  color: var(--ac-texto-suave);
}

/* Novedades: texto largo, columna más ancha. */
.acceso-documento .academy-auth__form-inner {
  max-width: 720px;
}

.acceso-documento__cuerpo {
  max-width: 72ch;
}

.acceso-documento__cuerpo h2 {
  margin-top: 1.75rem;
  font-size: 1.25rem;
}

.acceso-documento__cuerpo ul {
  padding-left: 1.2rem;
}

.acceso-documento__cuerpo li {
  margin-bottom: 0.6rem;
}

.acceso-documento--panel {
  max-width: 820px;
  margin: 1.5rem auto;
}

@media (max-width: 575.98px) {
  .academy-auth--sola .academy-auth__form {
    min-height: auto;
    padding-block: 2rem;
  }
}

/* ── Avisos de sesión (DIS-AA-01) ──────────────────────────────────────────────
   En línea (_avisos.php, layout auth) y como globo (Noti, layout principal).
   Antes: texto blanco sobre #FF9E0F, 2.07:1, y botón de cierre de 11x13px.
   Ahora texto --ac-txt sobre el fondo de tarjeta con el tinte del tipo; el
   fondo base es opaco para que el globo se lea sobre cualquier contenido.
   Especificidad .alert.X.alert-tipo (0,3,0) para ganar a material-dashboard
   (.alert.alert-warning, 0,2,0). */
.acceso-avisos {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0 0 1.25rem;
}

.acceso-avisos--sueltos {
  max-width: 460px;
  margin: 1rem auto 0;
  padding-inline: 1rem;
}

.alert.acceso-aviso,
.alert.acceso-notify {
  color: var(--ac-txt);
  background-color: var(--ac-nivel-2);
  border: 1px solid var(--ac-linea);
  border-left-width: 4px;
  border-radius: var(--ac-r-sm);
  font-size: 0.9rem;
  line-height: 1.5;
}

.alert.acceso-aviso {
  display: block;
  margin: 0;
  padding: 0.75rem 0.9rem;
  box-shadow: none;
}

.alert.acceso-aviso.alert-warning,
.alert.acceso-notify.alert-warning {
  border-left-color: var(--ac-aviso);
  background-image: linear-gradient(var(--ac-aviso-suave), var(--ac-aviso-suave));
}

.alert.acceso-aviso.alert-danger,
.alert.acceso-notify.alert-danger {
  border-left-color: var(--ac-error);
  background-image: linear-gradient(var(--ac-error-suave), var(--ac-error-suave));
}

.alert.acceso-aviso.alert-info,
.alert.acceso-notify.alert-info {
  border-left-color: var(--ac-info);
  background-image: linear-gradient(var(--ac-info-suave), var(--ac-info-suave));
}

.alert.acceso-aviso.alert-success,
.alert.acceso-notify.alert-success {
  border-left-color: var(--ac-exito);
  background-image: linear-gradient(var(--ac-exito-suave), var(--ac-exito-suave));
}

.alert.acceso-aviso a,
.alert.acceso-notify a,
.alert.acceso-notify .alert-link {
  color: var(--ac-txt);
  font-weight: 600;
  text-decoration: underline;
}

.alert.acceso-aviso small {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.82rem;
}

.alert.acceso-notify {
  padding-right: 3.5rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

.alert.acceso-notify [data-notify="icon"] {
  color: var(--ac-txt);
}

.alert.acceso-notify .close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--ac-r-sm);
  background: transparent;
  opacity: 1;
  line-height: 1;
  text-shadow: none;
}

.alert.acceso-notify .close i {
  color: var(--ac-txt);
  font-size: 20px;
}

.alert.acceso-notify .close:focus-visible {
  outline: 2px solid var(--ac-txt);
  outline-offset: -2px;
}

/* ── Pie legal de las pantallas de acceso (DIS-AA-03) ───────────────────────── */
.acceso-legales {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 0.6rem;
  margin-top: 1.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--ac-borde);
  font-size: 0.82rem;
  color: var(--ac-texto-tenue);
}

.acceso-legales a {
  color: var(--ac-texto-suave);
}

/* ── Áreas táctiles y scroll único en pantalla táctil (DIS-AA-05, DIS-AA-06) ──
   Medido a 390px: «Recuperar acceso» 107x20, «Crear perfil de operador» 149x17,
   «← Volver al inicio» 104x24. Y en /register el body y la columna del
   formulario tenían cada uno su scroll (875/844 y 1157/844): academia.css le da
   a esa columna overflow-y:auto + max-height:100vh, pensado para dos columnas.
   Con una sola columna manda el documento. */
@media (max-width: 991.98px) {
  .academy-auth__form-options a,
  .academy-auth__note a,
  .academy-auth__register a,
  .acceso-legales a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .academy-auth__form-inner .academy-auth__back {
    min-height: 44px;
  }

  .academy-auth--signup .academy-auth__form {
    overflow: visible;
    max-height: none;
  }
}