/*
 * Accesibilidad — indicador de foco del backoffice (WCAG 2.2 AA)
 * SC 2.4.7 (Foco visible) + SC 1.4.11 (Contraste de elementos no textuales, >= 3:1).
 *
 * Motivo: AdminLTE 3 / Bootstrap 4 anulan el indicador de foco del tema:
 *   .form-control:focus -> border-color:#80bdff (~1,97:1); outline:0; box-shadow:none
 *   .btn:focus          -> outline:0; box-shadow:none  (sin indicador alguno)
 * Queda por debajo del 3:1 exigido. Es global del tema, no de un campo concreto.
 *
 * Solución: anillo de foco de alto contraste (>= 3:1) con :focus-visible
 * (no molesta en clic de ratón) y fallback :focus. Solo refuerza el foco; no
 * cambia el layout ni el orden de tabulación. Capa a medida del proyecto,
 * cargada tras adminlte.min.css; no se toca vendor/ (M3).
 *
 * Contraste de los anillos (calculado):
 *   #0b57d0 sobre blanco  ~ 7:1   (formularios, tarjetas, contenido)
 *   #ffc107 sobre #343a40 ~ 8,9:1 (sidebar/topbar oscuros de AdminLTE)
 */

/* Base — superficies claras (formularios, contenido, botones, enlaces) */
:focus-visible {
    outline: 3px solid #0b57d0 !important;
    outline-offset: 2px !important;
}

/* Fallback :focus para navegadores sin soporte de :focus-visible */
a:focus,
button:focus,
.btn:focus,
.form-control:focus,
.custom-select:focus,
textarea:focus,
select:focus,
[tabindex]:focus {
    outline: 3px solid #0b57d0 !important;
    outline-offset: 2px !important;
}

/* Donde SÍ hay :focus-visible, no dupliques el anillo en clic de ratón */
@supports selector(:focus-visible) {
    a:focus:not(:focus-visible),
    button:focus:not(:focus-visible),
    .btn:focus:not(:focus-visible),
    .form-control:focus:not(:focus-visible),
    .custom-select:focus:not(:focus-visible),
    textarea:focus:not(:focus-visible),
    select:focus:not(:focus-visible),
    [tabindex]:focus:not(:focus-visible) {
        outline: none !important;
    }
}

/* Sidebar y topbar oscuros de AdminLTE (#343a40): anillo ámbar hacia dentro
   (outline-offset negativo) para conservar >= 3:1 y no recortarse. */
.main-sidebar a:focus-visible,
.main-sidebar .nav-link:focus-visible,
.main-header .navbar-nav .nav-link:focus-visible,
.main-sidebar a:focus,
.main-sidebar .nav-link:focus,
.main-header .navbar-nav .nav-link:focus {
    outline: 3px solid #ffc107 !important;
    outline-offset: -3px !important;
}

/* Checkboxes / radios: la caja visible es un pseudo-elemento del label,
   el input real está oculto. Marcamos el foco sobre esa caja.
   Cubre Bootstrap custom-control e iCheck (icheck-bootstrap). */
.custom-control-input:focus-visible ~ .custom-control-label::before,
.custom-control-input:focus ~ .custom-control-label::before,
[class*="icheck-"] > input:focus-visible + label::before,
[class*="icheck-"] > input:focus + label::before {
    outline: 3px solid #0b57d0 !important;
    outline-offset: 2px !important;
}