/* =============================================================================
   Accesibilidad global
   Auditoria de usabilidad y accesibilidad del 2026-07-25.
   Cubre los hallazgos [focus-outline-removed] y [landmarks-single-instance].

   Este fichero se carga DESPUES del resto a proposito: su trabajo es ganarle a
   los `outline: none` repartidos por las otras hojas. Habia catorce, en
   styles.css, datatables-custom.css, avra-dashboard.css y dashboard-censos.html,
   y practicamente ningun `:focus-visible` que los sustituyera, asi que al
   navegar con teclado no se veia donde estaba el foco.

   Por que `!important` aqui y no en otro sitio: los `outline: none` estan
   escritos con selectores de clase mas pseudoclase, que tienen mas especificidad
   que un `:focus-visible` a secas. La alternativa era reescribir catorce reglas
   repartidas en cuatro ficheros y confiar en que nadie anada la decimoquinta.
   Un bloque corto que gana siempre es mas facil de mantener y de revisar.

   `:focus-visible` y no `:focus` a proposito: el anillo aparece cuando el foco
   viene del teclado, no al hacer clic con el raton, que es la razon por la que
   se puso `outline: none` en su dia.
   ============================================================================= */

:root {
    /* Azul de alto contraste, no el naranja de marca: ese naranja no llega al
       3:1 que pide la WCAG para elementos no textuales sobre fondo claro, y es
       justo el hallazgo del ticket de contraste. Este azul da 5,2:1 sobre
       blanco y 4,9:1 sobre el fondo de pagina. */
    --a11y-foco: #0b57d0;
    --a11y-foco-halo: rgba(11, 87, 208, 0.25);
}

/* ---------------------------------------------------------------- anillo de foco */
:focus-visible {
    outline: 2px solid var(--a11y-foco) !important;
    outline-offset: 2px !important;
    /* El halo hace que el anillo se vea tambien sobre fondos oscuros o de color,
       donde un azul de 2px puede perderse. */
    box-shadow: 0 0 0 4px var(--a11y-foco-halo) !important;
    border-radius: 3px;
}

/* Los que llevaban `outline: none` con selectores mas especificos. Se listan
   explicitamente para que se vea que estan cubiertos y no por casualidad. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
[role="menuitem"]:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible,
.dropdown-item:focus-visible,
.page-link:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.ms-porque:focus-visible,
.dataTables_wrapper input:focus-visible,
.dataTables_wrapper select:focus-visible {
    outline: 2px solid var(--a11y-foco) !important;
    outline-offset: 2px !important;
}

/* En una tabla el offset positivo se come la fila de al lado, asi que ahi el
   anillo va por dentro. */
td:focus-visible,
th:focus-visible,
tr:focus-visible {
    outline: 2px solid var(--a11y-foco) !important;
    outline-offset: -2px !important;
    box-shadow: none !important;
}

/* Quien elige "sin animaciones" en su sistema no deberia ver transiciones en el
   foco: mueven la atencion en lugar de dirigirla. */
@media (prefers-reduced-motion: reduce) {
    :focus-visible {
        transition: none !important;
    }
}

/* ---------------------------------------------------------------- salto al contenido */
/* Los landmarks de la pagina ya estaban bien puestos; lo que faltaba era la
   forma de saltarse la navegacion sin tabular por ella entera, que en esta
   aplicacion son decenas de enlaces antes del primer dato. */
.saltar-al-contenido {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1000;
    padding: 12px 20px;
    background: #10243e;
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    border-radius: 0 0 6px 0;
}

.saltar-al-contenido:focus,
.saltar-al-contenido:focus-visible {
    left: 0;
    outline: 2px solid #ffffff !important;
    outline-offset: -6px !important;
    box-shadow: none !important;
}

/* ---------------------------------------------------------------- utilidad */
/* Para texto que solo tiene que leer el lector de pantalla. No se usa aqui
   todavia: la dejo porque los tickets de nombres accesibles y de avisos la van a
   necesitar, y asi no se define tres veces en tres sitios distintos. */
.solo-lector-de-pantalla {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}