/* ─────────────────────────────────────────────────────────────────────────────
 * A11Y-3 · foco de teclado visible en TODO el frontend (11-sep-2026)
 *
 * Hoja mínima y sin dependencias visuales: no declara tipografías, ni colores en
 * reposo, ni tamaños, ni nada de layout. Solo el anillo de foco.
 *
 * Por qué existe aparte de shared.css: `/launch/`, `/partners/` y
 * `/cert-contacto/` las pinta Elementor y el tema, y NO cargan ninguna hoja
 * nuestra. A11Y-2 no podía alcanzarlas. Esta se encola en todo el frontend, sin
 * filtrar por plantilla ni por slug.
 *
 * CASCADA. Gana al `*:focus{outline:none}` del tema por ESPECIFICIDAD, no por
 * orden: `a:focus-visible` es (0,1,1) y `*:focus` es (0,1,0). Y es
 * deliberadamente modesta, de modo que PIERDE contra cualquier indicador propio
 * más específico que ya sea accesible —`.b:focus-visible` (0,2,0), los campos de
 * formulario, los anillos de Elementor— y por tanto no los pisa ni crea un
 * segundo anillo. Solo se declara `outline`: nada de `box-shadow`, que
 * sustituiría la sombra propia de tarjetas y botones.
 *
 * Sin `!important`: no hace falta, la cascada se resuelve con especificidad.
 *
 * `:focus-visible` y no `:focus`: con el ratón no se pinta nada.
 *
 * `outline` no participa en el diseño, así que no cambia tamaños ni puede
 * provocar CLS.
 *
 * COLOR. No se usa `--t500`: medido, en las páginas de Elementor existe OTRO
 * `--t500` (el tema define el suyo, casi blanco), así que el valor de reserva no
 * llegaba a aplicarse nunca y el anillo salía blanco sobre blanco. Se declara una
 * variable propia con nombre que no puede colisionar, `--astart-foco`, y se le da
 * valor en `:root` dentro de esta misma hoja para que exista allí donde la hoja
 * cargue.
 * ───────────────────────────────────────────────────────────────────────────── */

:root{ --astart-foco:#13967E; }

a:focus-visible,
button:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
[role="link"]:focus-visible,
[role="tab"]:focus-visible,
[role="menuitem"]:focus-visible,
[contenteditable="true"]:focus-visible,
[tabindex]:not([tabindex^="-"]):focus-visible{
  outline:2px solid var(--astart-foco,#13967E);
  outline-offset:2px;
}

/* Campos de formulario: sin desplazamiento, para no montarse sobre el borde. */
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:2px solid var(--astart-foco,#13967E);
  outline-offset:0;
}

/* Nunca sobre lo que no es alcanzable ni operable. */
[hidden]:focus-visible,
[disabled]:focus-visible,
[aria-disabled="true"]:focus-visible{
  outline:none;
}

/* ── Superficies donde el anillo teal no llegaría a 3:1 ──────────────────────
 * Medido, no supuesto. Sobre 195 controles de las cinco páginas que no rinde
 * una plantilla nuestra, el anillo `--t500` da ≥3:1 en 193 y falla en 2; el
 * oscuro falla en 6. Ningún color de un solo tono cubre las tres superficies
 * (blanco, casi negro y teal) a la vez: el hueco entre lo que contrasta con el
 * blanco y lo que contrasta con el negro no contrasta con el teal.
 *
 * Los casos son dos, y los dos tienen contenedor propio:
 *   · `rgb(7,7,7)`  · bandas del tema: `.uicore-page-title` y `.uicore-copyrights`
 *   · `--t500`      · la franja de CTA de partners, `.ap-cta-section`
 *
 * Sobre esas superficies el anillo pasa a blanco: 19,8:1 sobre el casi negro y
 * 3,69:1 sobre el teal. Solo cambia `outline-color`; el grosor, el
 * desplazamiento y todo lo demás siguen igual.
 *
 * Limitación declarada: es una lista de contenedores medidos, no una regla
 * universal. Si aparece una banda oscura nueva, no queda cubierta. La solución
 * general sería un anillo de dos tonos (outline + halo con `box-shadow`), que
 * no se pone porque sustituiría la sombra propia de tarjetas y botones.
 * ─────────────────────────────────────────────────────────────────────────── */
.uicore-page-title a:focus-visible,
.uicore-page-title button:focus-visible,
.uicore-copyrights a:focus-visible,
.uicore-copyrights button:focus-visible,
.ap-cta-section a:focus-visible,
.ap-cta-section button:focus-visible{
  outline-color:#fff;
}