/*
 * Accesibilidad del panel (WCAG 2.2 AA, ADR-0004). Hoja propia cargada en todas las páginas
 * como plugin de AdminLTE (config/adminlte.php). El vendor no se toca, pero su adminlte.min.css
 * se carga DESPUÉS de los plugins: por eso cada selector empieza por «body» (más especificidad).
 */

/* 1.4.3 Contraste: texto blanco sobre los colores de Bootstrap no llegaba a 4,5:1
   (#007bff 3,98:1; #28a745 3,13:1). Ahora 5,8:1 y 5,1:1; al pasar el ratón, más oscuro. */
body .btn-primary,
body .btn-primary:disabled,
body .btn-primary.disabled {
    background-color: #0062cc;
    border-color: #0062cc;
    color: #fff;
}
body .btn-primary:hover,
body .btn-primary:focus,
body .btn-primary:not(:disabled):not(.disabled):active {
    background-color: #0056b3;
    border-color: #0056b3;
    color: #fff;
}
body .btn-success,
body .btn-success:disabled,
body .btn-success.disabled,
body .alert-success {
    background-color: #1e7e34;
    border-color: #1e7e34;
    color: #fff;
}
body .btn-success:hover,
body .btn-success:focus,
body .btn-success:not(:disabled):not(.disabled):active {
    background-color: #19692c;
    border-color: #19692c;
    color: #fff;
}

/* 2.4.7 Foco visible y 1.4.11 contraste no textual: el foco solo cambiaba el borde a #80bdff
   (~2:1) y en campos con error no cambiaba nada. Contorno #1a4f8b (8,3:1 sobre blanco) con un
   anillo blanco por dentro para que también se vea sobre fondos oscuros (barra lateral). */
body .form-control:focus,
body .form-control.is-invalid:focus,
body .custom-select:focus,
body a:focus-visible,
body input[type="checkbox"]:focus,
body input[type="radio"]:focus,
body input[type="file"]:focus {
    outline: 3px solid #1a4f8b;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px #fff;
}

/* Foco en botones: el mismo indicador. Dos causas por las que el anillo blanco no se veía:
   Bootstrap anima box-shadow en .btn (0,15 s desde «none», que empieza en 0 0 0 0 transparente)
   y las variantes pulsadas (.btn-primary:not(:disabled):not(.disabled):active:focus, 0,5,0) lo
   pisan. Se quita box-shadow de la transición y los selectores llegan a (0,5,1). */
body .btn {
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}
body .btn:focus,
body .btn.focus,
body .btn:not(:disabled):not(.disabled):active:focus,
body .btn:not(:disabled):not(.disabled).active:focus {
    outline: 3px solid #1a4f8b;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px #fff;
}

/* Foco en select2 (Rol, Edificios, Curso, filtros del listado): select2 pone outline:0 con
   .select2-container--default.select2-container--focus .select2-selection--multiple (0,3,0) y
   el campo de búsqueda interno también lo quita. El indicador va en la caja (.select2-selection)
   mientras el control tiene el foco o está abierto (en el simple, la propia caja es la que recibe
   el foco y esta regla sustituye el contorno por defecto); el campo de búsqueda del múltiple, sin
   contorno propio, para que no haya dos. Selectores de (0,3,1) o más; el CSS de select2 no se toca. */
body .select2-container.select2-container--focus .select2-selection,
body .select2-container.select2-container--open .select2-selection {
    outline: 3px solid #1a4f8b;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px #fff;
}
body .select2-container .select2-search__field:focus {
    outline: none;
}

/* Cabeceras ordenables de DataTables (th con tabindex=0): tenían el contorno por defecto del
   navegador. Contorno hacia dentro (offset negativo) para que no lo recorte la tabla; fondo blanco.
   thead > tr > th llega a (0,2,5): la hoja de DataTables se carga después y trae (0,2,4). */
body table.dataTable thead > tr > th:focus,
body table.dataTable thead > tr > th:focus-visible {
    outline: 3px solid #1a4f8b;
    outline-offset: -3px;
}

/* 2.5.8 Tamaño del objetivo: casillas de al menos 24×24 px, con su etiqueta al lado */
body .casilla {
    display: flex;
    align-items: center;
    gap: .5rem;
}
body .casilla input[type="checkbox"] {
    width: 1.5rem;
    height: 1.5rem;
    margin: 0;
    flex-shrink: 0;
}
body .casilla label {
    margin-bottom: 0;
}
body .casilla-dia {
    width: 1.5rem;
    height: 1.5rem;
}

/* Botones de icono en tablas (btn-xs mide 21×24): al menos 24×24 px */
body .boton-tabla {
    min-width: 1.5rem;
    min-height: 1.5rem;
}

/* 2.4.3 / 2.4.11 Menú lateral oculto fuera de pantalla: AdminLTE 3.0.5 lo aparta con
   margin-left:-250px pero sus enlaces seguían en el orden de tabulación. visibility:hidden los
   saca del Tab y del lector. Se oculta en los mismos casos que AdminLTE:
   - < 768 px sin .sidebar-open (móvil o zoom 200 %);
   - 768–991 px sin .sidebar-open: ahí PushMenu (autoCollapseSize 992) pliega el menú y, al
     desplegarlo, siempre añade .sidebar-open; no hay iconos de sidebar-mini. Pero el plegado
     automático llega en el evento load: hasta entonces el menú se pintaba desplegado y
     enfocable y luego salía deslizándose (parpadeo). Por eso aquí se le da también el
     margin-left:-250px de AdminLTE, para que nazca oculto y quieto;
   - cualquier ancho con .sidebar-collapse sin sidebar-mini (hoy no aplica: sidebar_mini = true).
   Se oculta también a TODOS los descendientes (.main-sidebar *), porque OverlayScrollbars pone
   `.os-content { visibility: visible }` y los enlaces del menú lo heredaban. Por debajo de 992 px
   ninguna otra regla de visibilidad del vendor gana a (0,2,1); al abrir el menú la regla deja de
   aplicarse y cada elemento vuelve a la suya.
   En escritorio con sidebar-mini (iconos a 4.6rem desde 992 px) no cambia nada.
   Transición: al ocultar, visibility espera a que acabe el deslizamiento (0,3 s); al mostrar, es
   inmediata, así que el menú se ve entrar y el foco puede pasar a él en cuanto se abre. */
body .main-sidebar {
    transition: margin-left .3s ease-in-out, width .3s ease-in-out, visibility 0s linear 0s;
}
@media (max-width: 767.98px) {
    body:not(.sidebar-open) .main-sidebar,
    body:not(.sidebar-open) .main-sidebar * {
        visibility: hidden;
    }
    body:not(.sidebar-open) .main-sidebar {
        transition: margin-left .3s ease-in-out, width .3s ease-in-out, visibility 0s linear .3s;
    }
    body:not(.sidebar-open) .main-sidebar * {
        transition: visibility 0s linear .3s;
    }
}
@media (min-width: 768px) and (max-width: 991.98px) {
    body:not(.sidebar-open) .main-sidebar,
    body:not(.sidebar-open) .main-sidebar * {
        visibility: hidden;
    }
    body:not(.sidebar-open) .main-sidebar,
    body:not(.sidebar-open) .main-sidebar::before {
        margin-left: -250px;
    }
    body:not(.sidebar-open) .main-sidebar {
        transition: margin-left .3s ease-in-out, width .3s ease-in-out, visibility 0s linear .3s;
    }
    body:not(.sidebar-open) .main-sidebar * {
        transition: visibility 0s linear .3s;
    }
}
body.sidebar-collapse:not(.sidebar-mini):not(.sidebar-mini-md) .main-sidebar,
body.sidebar-collapse:not(.sidebar-mini):not(.sidebar-mini-md) .main-sidebar * {
    visibility: hidden;
}
body.sidebar-collapse:not(.sidebar-mini):not(.sidebar-mini-md) .main-sidebar {
    transition: margin-left .3s ease-in-out, width .3s ease-in-out, visibility 0s linear .3s;
}
body.sidebar-collapse:not(.sidebar-mini):not(.sidebar-mini-md) .main-sidebar * {
    transition: visibility 0s linear .3s;
}
@media (prefers-reduced-motion: reduce) {
    body .main-sidebar,
    body:not(.sidebar-open) .main-sidebar,
    body:not(.sidebar-open) .main-sidebar *,
    body.sidebar-collapse .main-sidebar,
    body.sidebar-collapse .main-sidebar *,
    body.sidebar-collapse:not(.sidebar-mini):not(.sidebar-mini-md) .main-sidebar,
    body.sidebar-collapse:not(.sidebar-mini):not(.sidebar-mini-md) .main-sidebar * {
        transition: none;
    }
}