/* Accesibilidad (WCAG 2.1 AA) y piezas de las pantallas transversales.
   La carga `accesibilidad.py` en toda página, después de style.css. */

/* 2.4.1 — Saltar al contenido: primer elemento enfocable, visible con foco. */
.ax-salto {
  position: absolute; left: var(--e3); top: -4rem; z-index: 1000;
  background: #fff; color: var(--marca-oscuro); padding: var(--e2) var(--e4);
  border: 2px solid var(--marca-oscuro); border-radius: var(--radio-chico);
  font-weight: 600; text-decoration: none;
}
.ax-salto:focus { top: var(--e2); }
main:focus { outline: none; }

/* 1.4.4 — Tamaño del texto. */
.ax-texto {
  position: fixed; right: var(--e2); bottom: var(--e2); z-index: 900;
  display: flex; gap: 2px; background: var(--superficie);
  border: 1px solid var(--borde-fuerte); border-radius: var(--radio);
  padding: 2px; box-shadow: var(--sombra);
}
.ax-texto button {
  background: transparent; color: var(--marca-oscuro); border: 0;
  min-width: 2.25rem; min-height: 2.25rem; padding: 0 var(--e2);
  font-weight: 700; margin: 0; border-radius: var(--radio-chico);
}
.ax-texto button:hover { background: var(--marca-tenue); color: var(--marca-oscuro); }

/* 2.4.7 — Foco visible en todo lo que se puede operar. */
a:focus-visible, button:focus-visible, .boton:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--marca-vivo, #0b5fa5); outline-offset: 2px;
}
/* En la barra, el color de su texto: blanco sobre la barra índigo de la base, tinta
   sobre la barra blanca de la marca (🩸 13-nov-2026: era #fff fijo, invisible ahí). */
.topbar a:focus-visible, .topbar summary:focus-visible {
  outline-color: var(--barra-texto, #fff);
}

/* 1.4.1 — Un enlace dentro de un texto no se distingue sólo por el color. */
main p a:not(.boton), main li a:not(.boton), main dd a, main td a:not(.boton),
.flash a, .ayuda a:not(.boton) { text-decoration: underline; }
/* gestion.css se carga después (en el cuerpo) y le quita el subrayado. */
nav.gx-miga a { text-decoration: underline !important; }

/* La celda de encabezado de fila es un dato, no una cabecera de columna. */
tbody th[scope="row"] {
  background: transparent; text-transform: none; letter-spacing: 0;
  font-size: inherit; color: inherit; text-align: left;
}

/* Sólo para lectores de pantalla. */
.ax-oculto {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* — Ingreso en dos pasos ———————————————————————————————————————— */
.ax-ingreso { max-width: 34rem; margin: var(--e6) auto; }
.ax-paso {
  margin: 0 0 var(--e2); color: var(--tinta-2); font-size: 0.85rem;
  text-transform: uppercase; letter-spacing: .06em; font-weight: 600;
}
.ax-codigo {
  font-size: 1.6rem; letter-spacing: .3em; text-align: center;
  font-variant-numeric: tabular-nums; max-width: 14rem;
}
.ax-pasos { padding-left: 1.2rem; }
.ax-pasos > li { margin-bottom: var(--e4); }
.ax-qr {
  background: #fff; border: 1px solid var(--borde); border-radius: var(--radio);
  padding: var(--e3); width: max-content; max-width: 100%; margin: var(--e3) 0;
}
.ax-qr svg { display: block; width: 220px; height: 220px; max-width: 100%; }
.ax-clave { font-size: 1.05rem; letter-spacing: .08em; word-break: break-all; }
.ax-respaldo {
  list-style: none; padding: 0; display: grid; gap: var(--e2);
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
}

/* — Tablas y listas de las pantallas transversales ————————————————— */
.ax-reglas { margin: 0; }
.ax-reglas > div {
  display: grid; grid-template-columns: minmax(9rem, 14rem) 1fr; gap: var(--e3);
  padding: var(--e2) 0; border-top: 1px solid var(--borde);
}
.ax-reglas > div:first-child { border-top: 0; }
.ax-reglas dt { font-weight: 600; }
.ax-reglas dd { margin: 0; color: var(--tinta-2); }
.ax-lista { list-style: none; padding: 0; margin: 0; }
.ax-lista li { padding: var(--e2) 0; border-top: 1px solid var(--borde); }
.ax-lista li:first-child { border-top: 0; }
.ax-acciones summary { cursor: pointer; color: var(--marca); font-weight: 600; }
.ax-acciones form { margin: var(--e2) 0 0; }
.ax-deshabilitar { display: flex; gap: var(--e2); align-items: end; flex-wrap: wrap; }
.ax-deshabilitar label { margin: 0; flex: 1 1 10rem; }
.ax-anual .ax-mes { text-align: center; width: 2.4rem; padding-left: 2px; padding-right: 2px; }
.ax-anual td.ax-en { background: var(--marca); }
.ax-anual abbr { text-decoration: none; }

@media (max-width: 640px) {
  .ax-reglas > div { grid-template-columns: 1fr; gap: 0; }
}
@media print {
  .ax-salto, .ax-texto { display: none !important; }
}

/* 🩸 En la app de las familias el control de tamaño de letra quedaba encima de
   la última sección de la barra inferior («Certificados») y la tapaba en el
   teléfono (hoja de contacto del 13-nov-2026). Va sobre la barra, como en el
   portal del estudiante (estudiantes.css). */
body:has(.fam-nav) .ax-texto { bottom: calc(4.6rem + env(safe-area-inset-bottom)); }
/* Y con el aviso «Instala la app» a la vista, sube otro tramo: quedaba encima del
   botón «Instalar» (ensayo de la demo, 13-nov-2026). */
body.fam-con-instalar:has(.fam-nav) .ax-texto { bottom: calc(9.6rem + env(safe-area-inset-bottom)); }