/* [FOCO] Dónde está parado el teclado.
 *
 * MEDIDO EL 2026-08-22 sobre las ocho puertas: **nueve reglas en cinco pantallas apagan el
 * contorno del foco** en los campos de texto, los desplegables y las áreas de texto, y lo
 * reemplazan únicamente por un cambio de color del borde de 1px.
 *
 *     panel.html          input · textarea · select
 *     index.html          .ask-form input · #company-select
 *     partner.html        input:focus,select:focus · .n2-dictamen textarea:focus
 *     cambiar-clave.html  .form-group input
 *     login.html          .form-group input
 *
 * Las dos últimas son las pantallas donde alguien escribe su contraseña.
 *
 * POR QUE SE APAGO, y no fue un descuido: con `:focus` a secas, el contorno salía también al
 * hacer clic con el ratón, y ahí se ve como un defecto. El repositorio ya conoce la respuesta
 * —`:focus-visible`—: los botones de la navegación, las tarjetas de rol y los resúmenes
 * desplegables la usan con su anillo. Lo que faltó fue aplicársela a los campos.
 *
 * UN MATIZ QUE HAY QUE DECIR BIEN, Y SE COMPROBO EN EL NAVEGADOR: en un campo de texto,
 * `:focus-visible` coincide TAMBIEN con el clic del ratón. No es un defecto de la
 * implementación: es lo que dice la especificación, porque un campo que recibe el foco va a
 * recibir tecleo, y quien está por escribir necesita ver dónde. Es exactamente lo que hace el
 * navegador sin que nadie le pida nada.
 *
 * Así que en los campos el anillo se ve con teclado y con ratón, y en los botones y desplegables
 * sólo con teclado. Ese es el trato, y es el correcto: un anillo de 2px sobre un campo que
 * acabás de apretar no es un defecto; no saber dónde está parado el teclado sí lo es.
 *
 * UN CAMBIO DE COLOR DE BORDE NO ES UN INDICADOR DE FOCO. Es 1px, es el único cambio, y para
 * distinguirlo hay que acordarse de qué color tenía el borde hace un segundo. Quien navega con
 * teclado necesita saber DÓNDE ESTÁ PARADO sin compararlo con nada.
 *
 * ── LOS SELECTORES SON LOS MISMOS NUEVE, Y ESO NO ES CASUAL ──────────────────────────────
 *
 * EL PRIMER INTENTO USO `:where(a, button, input, …):focus-visible`, un piso de especificidad
 * cero, con la idea de «pintar sólo donde no hay nada». En el banco de pruebas no pintó nada en
 * ningún lado, y el motivo es obvio una vez visto: **especificidad cero también significa que no
 * le puede ganar a la regla que apaga el contorno.** `.form-group input:focus{outline:none}` es
 * 0-2-1; el piso era 0-1-0. Ganaba el apagado, siempre. La regla existía entera, con su
 * explicación, y no cambiaba un solo píxel.
 *
 * Lo que hay ahora es cada uno de los nueve selectores medidos, escrito con `:focus-visible` en
 * vez de `:focus`. Empata en especificidad con el que apaga, y esta hoja se enlaza DESPUES de
 * los `<style>` de cada puerta: en un empate manda el orden. Un selector que en una puerta no
 * corresponde a nada no cuesta nada.
 *
 * Y NO TOCA NINGUN ANILLO YA DECIDIDO: los `:focus-visible` que ya existen están sobre botones,
 * tarjetas y resúmenes, y ninguno de estos nueve selectores llega hasta ellos.
 *
 * `currentColor` — NINGÚN TOKEN. Cinco puertas con cinco paletas distintas. `currentColor` es la
 * tinta del propio elemento: oscura sobre un campo claro, clara sobre un botón granate.
 * Contrasta con su fondo por construcción, sin que nadie declare nada — y sin una reserva que
 * tape un token que falte.
 *
 * ── COMPROBADO CON TECLADO REAL EL 23-08-2026 ───────────────────────────────────────────
 *
 * Recorriendo `index.html` con Tab —el de verdad, no una llamada a `focus()`— las once
 * paradas visibles tienen anillo:
 *
 *     boton de sesion            3px
 *     pestañas, acciones, chips  1px  (el anillo por omision del navegador)
 *     campo de pregunta          2px  (esta hoja)
 *
 * NO HAY NINGUN CONTROL SIN INDICADOR. La sospecha inicial —que los botones se hubieran
 * quedado sin foco al no estar en los nueve selectores de aqui— era infundada: esta hoja
 * arregla los campos, que eran los que tenian el contorno APAGADO a mano, y los botones nunca
 * lo tuvieron apagado, asi que conservan el del navegador.
 *
 * ── POR QUE NO SE PUEDE MEDIR ESTO CON `focus({focusVisible: true})` ─────────────────────
 *
 * Se intento, y da un resultado FALSO: Chrome no implementa esa opcion, asi que el elemento
 * recibe el foco pero NO coincide con `:focus-visible`, y la medicion informa «sin anillo»
 * sobre controles que con Tab lo tienen. Sobre `index.html` daba 24 de 29 sin foco — todos
 * falsos.
 *
 * `:focus-visible` es una decision del navegador sobre COMO llego el foco. La unica forma de
 * observarla es que llegue como llega de verdad.
 *
 * Marca buscable: foco_visible
 */

/* panel.html */
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
/* index.html */
.ask-form input:focus-visible,
#company-select:focus-visible,
/* partner.html */
.n2-dictamen textarea:focus-visible,
/* cambiar-clave.html · login.html */
.form-group input:focus-visible {
  outline: 2px solid currentColor;
  /* El desplazamiento deja ver el borde propio del campo debajo del anillo: los dos juntos se
     leen mejor que el anillo pegado, que sobre un borde del mismo grosor parece uno solo. */
  outline-offset: 1px;
}