/* ============================================================
   FIXES: Contraste Alto, Z-Index, Filtros del Directorio
   Agregar DESPUÉS de anhportal.css y accessibility-buttons.css
   ============================================================ */

/* ──────────────────────────────────────────────────────────────
   1. SIDEBAR DE ACCESIBILIDAD — Visible en modo alto contraste
   ──────────────────────────────────────────────────────────────
   Problema: .accesibilidad-contraste pone background: #000 en
   casi todos los divs, lo que hace que la sidebar (que ya tiene
   fondo oscuro var(--color-steel-blue)) se pierda por completo.
   ────────────────────────────────────────────────────────────── */

/* Excluir la sidebar del reset general de contraste */
.accesibilidad-contraste .accessibility-sidebar {
    background-color: #1a1a2e !important;
    border: 2px solid #ffffff !important;
    border-right: none !important;
    border-radius: 8px 0 0 8px !important;
    box-shadow: -2px 0 10px rgba(255, 255, 255, 0.15) !important;
}

.accesibilidad-contraste .accessibility-sidebar .btn_contraste,
.accesibilidad-contraste .accessibility-sidebar .btn_aumentar,
.accesibilidad-contraste .accessibility-sidebar .btn_restablecer,
.accesibilidad-contraste .accessibility-sidebar .btn_disminuir {
    background-color: #000000 !important;
    border: 2px solid #ffffff !important;
    border-radius: 4px !important;
    filter: none !important;
    opacity: 1 !important;
}

.accesibilidad-contraste .accessibility-sidebar .btn_contraste:hover,
.accesibilidad-contraste .accessibility-sidebar .btn_contraste:focus,
.accesibilidad-contraste .accessibility-sidebar .btn_aumentar:hover,
.accesibilidad-contraste .accessibility-sidebar .btn_aumentar:focus,
.accesibilidad-contraste .accessibility-sidebar .btn_restablecer:hover,
.accesibilidad-contraste .accessibility-sidebar .btn_restablecer:focus,
.accesibilidad-contraste .accessibility-sidebar .btn_disminuir:hover,
.accesibilidad-contraste .accessibility-sidebar .btn_disminuir:focus {
    background-color: #ffff00 !important;
    border-color: #ffff00 !important;
    outline: 3px solid #ffffff !important;
    outline-offset: 2px !important;
    filter: none !important;
}

/* Botón de volver arriba */
.accesibilidad-contraste .btn-back-to-top {
    background-color: #000000 !important;
    border: 2px solid #ffffff !important;
}

.accesibilidad-contraste .btn-back-to-top span {
    background: #ffffff !important;
    color: #000000 !important;
}

.accesibilidad-contraste .btn-back-to-top:hover,
.accesibilidad-contraste .btn-back-to-top:focus {
    background-color: #ffff00 !important;
    border-color: #ffff00 !important;
}

/* ──────────────────────────────────────────────────────────────
   2. Z-INDEX — Wagtail Userbar vs Agente Virtual
   ──────────────────────────────────────────────────────────────
   Problema: El agente virtual (#panelPrincipalAgenti) y el
   botón de WhatsApp (.imagenWhatsappAg) tapan el menú de
   Wagtail y a veces la sidebar de accesibilidad.
   
   Jerarquía deseada:
     Wagtail userbar:      99999
     Accessibility sidebar: 9999 (ya definido)
     Back to top:           9998 (ya definido)
     Agente Virtual:        9000
     WhatsApp:              8999
   ────────────────────────────────────────────────────────────── */

/* Wagtail userbar: siempre encima de todo */
.wagtail-userbar,
.wagtail-userbar-nav,
.wagtail-userbar-items,
.wagtail-userbar-trigger {
    z-index: 99999 !important;
}

.wagtail-userbar-trigger{
    width: 2.5em !important;
    height: 2.5em !important;
}

.wagtail-userbar{
    padding-right: 16px !important;
}

/* Agente Virtual — bajar z-index */
#panelPrincipalAgenti {
    z-index: 9000 !important;
}

/* Selectores genéricos por si el script inyecta otros elementos */
[id*="agenti"],
[class*="agenti"],
[id*="Agenti"],
[class*="Agenti"] {
    z-index: 9000 !important;
}

iframe[src*="agenti"] {
    z-index: 9000 !important;
}

/* Botón WhatsApp */
.imagenWhatsappAg {
    z-index: 8999 !important;
}

/* Modal del directorio — debe estar por encima del agente */
.sd-modal-overlay {
    z-index: 9500 !important;
}

.sd-modal {
    z-index: 9501 !important;
}

/* ──────────────────────────────────────────────────────────────
   3. FILTROS DEL DIRECTORIO — Alto contraste
   ──────────────────────────────────────────────────────────────
   Problema: .accesibilidad-contraste aplica background: #000
   y color: #FFF a casi todo via selectores muy amplios, pero
   los filtros .sd-* usan sus propias variables y quedan
   ilegibles (fondo negro, texto oscuro, bordes invisibles).
   ────────────────────────────────────────────────────────────── */

/* --- Contenedor de filtros --- */
.accesibilidad-contraste .sd-box {
    background: #000000 !important;
    border: 1px solid #ffffff !important;
}

/* --- Input de búsqueda --- */
.accesibilidad-contraste .sd-filters__search input {
    background: #000000 !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
    caret-color: #ffffff !important;
}

.accesibilidad-contraste .sd-filters__search input::placeholder {
    color: #bbbbbb !important;
    opacity: 1 !important;
}

/* Icono de lupa */
.accesibilidad-contraste .sd-filters__search-icon,
.accesibilidad-contraste .sd-filters__search-icon circle,
.accesibilidad-contraste .sd-filters__search-icon path {
    stroke: #ffffff !important;
}

/* --- Botones select (Dependencia / Denominación) --- */
.accesibilidad-contraste .sd-filters__select-btn {
    background: #000000 !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
}

.accesibilidad-contraste .sd-filters__select-btn span {
    color: #ffffff !important;
}

.accesibilidad-contraste .sd-filters__select-btn svg,
.accesibilidad-contraste .sd-filters__select-btn svg path {
    stroke: #ffffff !important;
}

/* --- Dropdown de opciones --- */
.accesibilidad-contraste .sd-filters__dropdown {
    background: #111111 !important;
    border: 2px solid #ffffff !important;
}

.accesibilidad-contraste .sd-filters__option {
    color: #ffffff !important;
    background: transparent !important;
}

.accesibilidad-contraste .sd-filters__option span {
    color: #ffffff !important;
}

.accesibilidad-contraste .sd-filters__option:hover {
    background: #ffff00 !important;
    color: #000000 !important;
}

.accesibilidad-contraste .sd-filters__option:hover span {
    color: #000000 !important;
}

.accesibilidad-contraste .sd-filters__option input[type="checkbox"] {
    accent-color: #ffff00 !important;
    outline: 1px solid #ffffff;
    background: #000000 !important;
}

/* --- Botón "Limpiar filtros" --- */
.accesibilidad-contraste .sd-filters__clear {
    background: #ffff00 !important;
    color: #000000 !important;
    border: 2px solid #ffff00 !important;
    font-weight: 700 !important;
}

.accesibilidad-contraste .sd-filters__clear:hover,
.accesibilidad-contraste .sd-filters__clear:focus {
    background: #ffffff !important;
    color: #000000 !important;
    outline: 3px solid #ffff00 !important;
}

/* --- Tags activos --- */
.accesibilidad-contraste .sd-tag {
    background: #000000 !important;
    color: #ffff00 !important;
    border: 1px solid #ffff00 !important;
}

.accesibilidad-contraste .sd-tag__remove {
    color: #ffff00 !important;
}

.accesibilidad-contraste .sd-tag__remove svg path {
    stroke: #ffff00 !important;
}

.accesibilidad-contraste .sd-tag__remove:hover {
    background: #ffff00 !important;
    color: #000000 !important;
}

.accesibilidad-contraste .sd-tag__remove:hover svg path {
    stroke: #000000 !important;
}

/* --- Toolbar (Mostrando X de Y / Ordenar) --- */
.accesibilidad-contraste .sd-toolbar {
    color: #ffffff !important;
}

.accesibilidad-contraste .sd-toolbar__count,
.accesibilidad-contraste .sd-toolbar__count strong {
    color: #ffffff !important;
}

.accesibilidad-contraste .sd-toolbar__sort-label {
    color: #cccccc !important;
}

.accesibilidad-contraste .sd-toolbar__sort-btn,
.accesibilidad-contraste .sd-toolbar__sort-btn strong {
    color: #ffffff !important;
}

.accesibilidad-contraste .sd-toolbar__sort-btn svg path {
    stroke: #ffffff !important;
}

.accesibilidad-contraste .sd-toolbar__sort-dropdown {
    background: #111111 !important;
    border: 1px solid #ffffff !important;
}

.accesibilidad-contraste .sd-toolbar__sort-option {
    color: #ffffff !important;
    background: transparent !important;
}

.accesibilidad-contraste .sd-toolbar__sort-option:hover {
    background: #ffff00 !important;
    color: #000000 !important;
}

.accesibilidad-contraste .sd-toolbar__sort-option.active {
    color: #ffff00 !important;
}

/* --- Listado de personas --- */
.accesibilidad-contraste .sd-list {
    border-top-color: #555555 !important;
}

.accesibilidad-contraste .sd-person {
    border-bottom-color: #444444 !important;
    background: transparent !important;
}

.accesibilidad-contraste .sd-person:hover {
    background: #111111 !important;
}

.accesibilidad-contraste .sd-person__name a {
    color: #5599ff !important;
}

.accesibilidad-contraste .sd-person__name a:hover {
    color: #ffff00 !important;
}

.accesibilidad-contraste .sd-person__sep {
    color: #888888 !important;
}

.accesibilidad-contraste .sd-person__employment,
.accesibilidad-contraste .sd-person__unit {
    color: #cccccc !important;
}

.accesibilidad-contraste .sd-person__email,
.accesibilidad-contraste .sd-person__phone {
    color: #aaaaaa !important;
}

.accesibilidad-contraste .sd-person__email svg,
.accesibilidad-contraste .sd-person__phone svg {
    stroke: #aaaaaa !important;
}

.accesibilidad-contraste .sd-person__email a {
    color: #5599ff !important;
}

.accesibilidad-contraste .sd-person__email a:hover {
    color: #ffff00 !important;
}

.accesibilidad-contraste .sd-person__more-btn {
    color: #5599ff !important;
    background: transparent !important;
}

.accesibilidad-contraste .sd-person__more-btn:hover {
    color: #ffff00 !important;
}

/* Detalle expandido */
.accesibilidad-contraste .sd-person__detail {
    border-top-color: #555555 !important;
}

.accesibilidad-contraste .sd-person__extra p {
    color: #cccccc !important;
}

.accesibilidad-contraste .sd-person__extra strong {
    color: #ffffff !important;
}

.accesibilidad-contraste .sd-person__bio {
    color: #bbbbbb !important;
}

.accesibilidad-contraste .sd-person__photo img {
    border-color: #555555 !important;
    filter: none !important;
}

/* --- Estado vacío --- */
.accesibilidad-contraste .sd-empty {
    color: #cccccc !important;
}

/* --- Paginación --- */
.accesibilidad-contraste .sd-pagination {
    border-top-color: #555555 !important;
}

.accesibilidad-contraste .sd-pagination__info {
    color: #cccccc !important;
}

.accesibilidad-contraste .sd-pagination__info strong {
    color: #ffffff !important;
}

.accesibilidad-contraste .sd-pagination__page,
.accesibilidad-contraste .sd-pagination__arrow {
    color: #ffffff !important;
    background: transparent !important;
}

.accesibilidad-contraste .sd-pagination__page:hover,
.accesibilidad-contraste .sd-pagination__arrow:hover {
    background: #ffff00 !important;
    color: #000000 !important;
}

.accesibilidad-contraste .sd-pagination__arrow svg path {
    stroke: #ffffff !important;
}

.accesibilidad-contraste .sd-pagination__arrow:hover svg path {
    stroke: #000000 !important;
}

.accesibilidad-contraste .sd-pagination__page--current {
    background: #ffff00 !important;
    color: #000000 !important;
}

.accesibilidad-contraste .sd-pagination__ellipsis {
    color: #888888 !important;
}

/* --- Título y subtítulo --- */
.accesibilidad-contraste .sd-header__title {
    color: #ffffff !important;
}

.accesibilidad-contraste .sd-header__subtitle,
.accesibilidad-contraste .sd-header__subtitle p {
    color: #cccccc !important;
}

/* ──────────────────────────────────────────────────────────────
   4. MODAL MÓVIL DEL DIRECTORIO — Alto contraste
   ────────────────────────────────────────────────────────────── */

.accesibilidad-contraste .sd-modal {
    background: #111111 !important;
    border: 2px solid #ffffff !important;
}

.accesibilidad-contraste .sd-modal__header {
    border-bottom-color: #555555 !important;
}

.accesibilidad-contraste .sd-modal__title {
    color: #ffffff !important;
}

.accesibilidad-contraste .sd-modal__close {
    color: #ffffff !important;
    background: transparent !important;
}

.accesibilidad-contraste .sd-modal__close svg path {
    stroke: #ffffff !important;
}

.accesibilidad-contraste .sd-modal__close:hover {
    background: #333333 !important;
}

.accesibilidad-contraste .sd-modal__select-btn {
    background: #000000 !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
}

.accesibilidad-contraste .sd-modal__select-btn span {
    color: #ffffff !important;
}

.accesibilidad-contraste .sd-modal__select-btn svg path {
    stroke: #ffffff !important;
}

.accesibilidad-contraste .sd-modal__dropdown {
    background: #111111 !important;
    border: 2px solid #ffffff !important;
}

.accesibilidad-contraste .sd-modal__footer {
    border-top-color: #555555 !important;
}

.accesibilidad-contraste .sd-modal__apply-btn {
    background: #ffff00 !important;
    color: #000000 !important;
    border: 2px solid #ffff00 !important;
    font-weight: 700 !important;
}

.accesibilidad-contraste .sd-modal__apply-btn:hover,
.accesibilidad-contraste .sd-modal__apply-btn:focus {
    background: #ffffff !important;
    color: #000000 !important;
}

.accesibilidad-contraste .sd-modal__clear-btn {
    background: #000000 !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
}

.accesibilidad-contraste .sd-modal__clear-btn:hover,
.accesibilidad-contraste .sd-modal__clear-btn:focus {
    background: #333333 !important;
}

/* Botón de filtros móvil */
.accesibilidad-contraste .sd-filters__mobile-btn {
    background: #ffff00 !important;
    border: 2px solid #ffff00 !important;
}

.accesibilidad-contraste .sd-filters__mobile-btn svg {
    stroke: #000000 !important;
}

.accesibilidad-contraste .sd-filters__mobile-btn:hover,
.accesibilidad-contraste .sd-filters__mobile-btn:focus {
    background: #ffffff !important;
    outline: 3px solid #ffff00 !important;
}

/* ──────────────────────────────────────────────────────────────
   5. SIDEBAR LATERAL (categorías) — Alto contraste
   ────────────────────────────────────────────────────────────── */

.accesibilidad-contraste .org-side-nav .card {
    background: #000000 !important;
    border-color: #ffffff !important;
}

.accesibilidad-contraste .org-side-nav .card-header {
    background: #111111 !important;
    color: #ffffff !important;
    border-bottom-color: #555555 !important;
    filter: none !important;
}

.accesibilidad-contraste .org-side-nav .card-header strong {
    color: #ffffff !important;
}

.accesibilidad-contraste .org-side-nav .list-group-item {
    background: #000000 !important;
    color: #cccccc !important;
    border-color: #444444 !important;
}

.accesibilidad-contraste .org-side-nav .list-group-item a {
    color: #5599ff !important;
}

.accesibilidad-contraste .org-side-nav .list-group-item a:hover {
    color: #ffff00 !important;
}

/* ──────────────────────────────────────────────────────────────
   6. FORCED COLORS (Windows High Contrast)
   ────────────────────────────────────────────────────────────── */

@media (forced-colors: active) {
    .accessibility-sidebar {
        background: Canvas !important;
        border: 2px solid ButtonText !important;
    }

    .accessibility-sidebar button {
        border: 2px solid ButtonText !important;
        background: ButtonFace !important;
        forced-color-adjust: none;
    }

    .accessibility-sidebar button:hover,
    .accessibility-sidebar button:focus {
        background: Highlight !important;
        color: HighlightText !important;
    }

    .sd-filters__search input,
    .sd-filters__select-btn,
    .sd-filters__clear,
    .sd-filters__dropdown,
    .sd-modal__select-btn,
    .sd-modal__dropdown {
        forced-color-adjust: none;
        background: Canvas !important;
        color: CanvasText !important;
        border: 1px solid ButtonText !important;
    }

    .sd-filters__search input::placeholder {
        color: GrayText !important;
    }

    .sd-filters__option:hover {
        background: Highlight !important;
        color: HighlightText !important;
    }

    .sd-tag {
        border: 1px solid ButtonText !important;
        background: Canvas !important;
        color: CanvasText !important;
    }

    .sd-person__name a {
        color: LinkText !important;
    }

    .sd-pagination__page--current {
        background: Highlight !important;
        color: HighlightText !important;
    }
}