/* ═══════════════════════════════════════════════════════════════════════════════════════
   §auditoria-visual-b2 2026-09-04 — INDICADOR DE FOCO DE TECLADO (hallazgo §M2)
   ═══════════════════════════════════════════════════════════════════════════════════════
   Quien navega con Tab tiene que ver DÓNDE está parado. Medido con Playwright, dándole foco
   real a cada control enfocable y comparando su estilo antes y después (outline, sombra,
   borde, fondo y color): en 14 pantallas había controles que no cambiaban NADA al recibir
   foco. El peor caso, Cola de sospechosas, con 4 de 5.

   POR QUÉ UNA HOJA COMPARTIDA Y NO UNA REGLA POR PANTALLA
   Es el mismo defecto repetido y con la misma causa: casi siempre un <input> o <select> cuya
   hoja le redibuja el borde y de paso escribe `outline:none`, con lo que pierde el anillo que
   el navegador ponía solo. Aparece en CSS copiado entre pantallas, así que arreglarlo pantalla
   por pantalla dejaría el agujero abierto para la próxima que copie el mismo bloque.

   `:focus-visible` Y NO `:focus`
   Así el anillo aparece al navegar con teclado y no al hacer clic con el mouse. Ese anillo al
   clic es justamente lo que molesta y lo que lleva a que alguien "arregle" el problema
   borrando el outline — que es como llegamos acá.

   `!important` — no es pereza
   Varias pantallas declaran `outline:none` en sus propios controles y esta hoja se carga ANTES
   que sus <style>, así que con la misma especificidad les gana el orden. Es el caso en el que
   hay que empatarles con la misma arma.

   UN SOLO COLOR PARA LOS DOS TEMAS
   No lleva variante clara/oscura a propósito. Las pantallas no comparten convención de tema
   (en la mayoría claro = `body.light` y oscuro = sin clase, pero en cheques es al revés:
   oscuro = `body.dark`), así que cualquier regla por tema acertaría en unas y erraría en
   otras. En vez de eso se eligió un azul que cumple el mínimo de 3:1 que WCAG pide para un
   indicador de foco (1.4.11 / 2.4.11) contra TODOS los fondos que hay debajo, medido:
       blanco 4,11 · gris claro #eef2f7 3,66 · navy #0d1820 4,37 ·
       panel oscuro #112030 4,01 · fila oscura #1e293b 3,56
   ═══════════════════════════════════════════════════════════════════════════════════════ */

:focus-visible {
  outline: 3px solid #2f7fd4 !important;
  outline-offset: 2px !important;
}