/**
 * Accessible Chile v3.0
 * Desarrollado por Gloomer.cl
 * WCAG 2.2 Nivel AA
 *
 * BUGS CORREGIDOS:
 * - Eliminado "all: revert" que destruía posicionamiento y estilos del panel
 * - Filtros (contraste, inversión, escala de grises) ahora usan backdrop-filter
 *   en html::after, lo que aísla el toolbar automáticamente sin hacks
 * - Agregada variable --ac-gray-500 faltante
 * - Eliminado "body * { background-color: transparent }" que rompía todo el sitio
 * - Dark/Light/Blue mode usan selectores específicos, no selectores universales
 * - Aislamiento del toolbar con propiedades explícitas (sin all:revert)
 */

/* ============================================================
   VARIABLES Y RESET
   ============================================================ */
:root {
    --ac-icon:        #1a365d;
    --ac-bg:          #ffffff;
    --ac-gray-50:     #f8fafc;
    --ac-gray-100:    #f1f5f9;
    --ac-gray-200:    #e2e8f0;
    --ac-gray-300:    #cbd5e1;
    --ac-gray-400:    #94a3b8;
    --ac-gray-500:    #64748b;   /* ← VARIABLE FALTANTE CORREGIDA */
    --ac-gray-600:    #475569;
    --ac-gray-700:    #334155;
    --ac-gray-800:    #1e293b;
    --ac-shadow-sm:   0 1px 2px rgba(0,0,0,.05);
    --ac-shadow-md:   0 4px 6px -1px rgba(0,0,0,.1);
    --ac-shadow-lg:   0 10px 15px -3px rgba(0,0,0,.1);
    --ac-shadow-xl:   0 20px 25px -5px rgba(0,0,0,.1);
}

/* ============================================================
   CONTENEDOR RAÍZ
   ============================================================ */
#ac-root {
    position: fixed !important;
    inset: 0 !important;
    pointer-events: none !important;
    z-index: 999999 !important;
    /* isolation: isolate evita que este contenedor herede filtros de ancestros */
    isolation: isolate !important;
}

/* ============================================================
   TOOLBAR — NUNCA se mueve ni cambia de apariencia
   ============================================================ */
.ac-toolbar {
    position: fixed !important;
    bottom: 24px !important;
    right: 24px !important;
    z-index: 999999 !important;
    pointer-events: auto !important;
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
    /* Forzar nuevo contexto de renderizado para aislar de filtros externos */
    transform: translateZ(0) !important;
    will-change: transform !important;
}

.ac-toolbar.ac-bottom-left {
    right: auto !important;
    left: 24px !important;
}

/* ============================================================
   BOTÓN TOGGLE
   ============================================================ */
.ac-toggle {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 20px !important;
    background: var(--ac-bg) !important;
    color: var(--ac-icon) !important;
    border: 1px solid var(--ac-gray-200) !important;
    border-radius: 60px !important;
    cursor: pointer !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    box-shadow: var(--ac-shadow-lg) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    line-height: normal !important;
    letter-spacing: normal !important;
    word-spacing: normal !important;
    text-decoration: none !important;
}

.ac-toggle:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--ac-shadow-xl) !important;
}

.ac-toggle:focus-visible {
    outline: 3px solid var(--ac-icon) !important;
    outline-offset: 2px !important;
}

.ac-toggle svg {
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
}

/* ============================================================
   PANEL PRINCIPAL
   ============================================================ */
.ac-panel {
    position: absolute !important;
    bottom: calc(100% + 12px) !important;
    right: 0 !important;
    width: 380px !important;
    background: var(--ac-bg) !important;
    border-radius: 20px !important;
    box-shadow: var(--ac-shadow-xl), 0 0 0 1px var(--ac-gray-200) !important;
    overflow: hidden !important;
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 14px !important;
    line-height: normal !important;
    color: var(--ac-gray-800) !important;
}

.ac-toolbar.ac-bottom-left .ac-panel {
    right: auto !important;
    left: 0 !important;
}

.ac-panel[hidden] {
    display: none !important;
}

/* ============================================================
   CABECERA DEL PANEL
   ============================================================ */
.ac-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 16px 20px !important;
    background: var(--ac-icon) !important;
    color: #ffffff !important;
    line-height: normal !important;
}

.ac-header h3 {
    margin: 0 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    font-family: inherit !important;
    line-height: normal !important;
}

.ac-close {
    width: 32px !important;
    height: 32px !important;
    background: rgba(255,255,255,.15) !important;
    border: none !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    color: #ffffff !important;
    font-size: 18px !important;
    font-family: inherit !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.2s !important;
    flex-shrink: 0 !important;
}

.ac-close:hover {
    background: rgba(255,255,255,.25) !important;
}

.ac-close:focus-visible {
    outline: 2px solid rgba(255,255,255,.8) !important;
    outline-offset: 2px !important;
}

/* ============================================================
   CUERPO DEL PANEL
   ============================================================ */
.ac-body {
    padding: 20px !important;
    max-height: 480px !important;
    overflow-y: auto !important;
    background: var(--ac-bg) !important;
}

.ac-body::-webkit-scrollbar       { width: 6px; }
.ac-body::-webkit-scrollbar-track { background: var(--ac-gray-100); border-radius: 3px; }
.ac-body::-webkit-scrollbar-thumb { background: var(--ac-gray-300); border-radius: 3px; }

/* ============================================================
   SECCIONES
   ============================================================ */
.ac-section {
    margin-bottom: 24px !important;
}

.ac-section:last-child {
    margin-bottom: 0 !important;
}

.ac-section-title {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    color: var(--ac-gray-500) !important;
    margin-bottom: 10px !important;
    font-family: inherit !important;
    line-height: normal !important;
}

/* ============================================================
   CONTROLES DE FUENTE
   ============================================================ */
.ac-font-controls {
    display: flex !important;
    gap: 8px !important;
}

.ac-btn {
    flex: 1 !important;
    padding: 10px !important;
    background: var(--ac-gray-50) !important;
    border: 1px solid var(--ac-gray-200) !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    color: var(--ac-gray-700) !important;
    transition: background 0.2s, border-color 0.2s !important;
    line-height: normal !important;
    letter-spacing: normal !important;
    word-spacing: normal !important;
    text-decoration: none !important;
}

.ac-btn:hover {
    background: var(--ac-gray-100) !important;
    border-color: var(--ac-gray-300) !important;
}

.ac-btn:focus-visible {
    outline: 2px solid var(--ac-icon) !important;
    outline-offset: 2px !important;
}

.ac-btn-primary {
    background: var(--ac-icon) !important;
    color: #ffffff !important;
    border-color: var(--ac-icon) !important;
}

.ac-btn-primary:hover {
    filter: brightness(.9) !important;
}

/* ============================================================
   GRID DE TEMAS
   ============================================================ */
.ac-themes {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
}

.ac-theme {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 10px 8px !important;
    background: var(--ac-gray-50) !important;
    border: 1px solid var(--ac-gray-200) !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    font-family: inherit !important;
    color: var(--ac-gray-700) !important;
    transition: background 0.2s, transform 0.15s !important;
    text-decoration: none !important;
    line-height: normal !important;
    letter-spacing: normal !important;
    word-spacing: normal !important;
}

.ac-theme:hover {
    background: var(--ac-gray-100) !important;
    transform: translateY(-1px) !important;
}

.ac-theme:focus-visible {
    outline: 2px solid var(--ac-icon) !important;
    outline-offset: 2px !important;
}

.ac-theme.active {
    background: var(--ac-icon) !important;
    color: #ffffff !important;
    border-color: var(--ac-icon) !important;
}

/* ============================================================
   GRID DE CARACTERÍSTICAS
   ============================================================ */
.ac-features {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
}

.ac-feature {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 10px 8px !important;
    background: var(--ac-gray-50) !important;
    border: 1px solid var(--ac-gray-200) !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    font-family: inherit !important;
    color: var(--ac-gray-700) !important;
    transition: background 0.2s, transform 0.15s !important;
    text-decoration: none !important;
    line-height: normal !important;
    letter-spacing: normal !important;
    word-spacing: normal !important;
}

.ac-feature:hover {
    background: var(--ac-gray-100) !important;
    transform: translateY(-1px) !important;
}

.ac-feature:focus-visible {
    outline: 2px solid var(--ac-icon) !important;
    outline-offset: 2px !important;
}

.ac-feature.active {
    background: var(--ac-icon) !important;
    color: #ffffff !important;
    border-color: var(--ac-icon) !important;
}

/* ============================================================
   PIE DEL PANEL
   ============================================================ */
.ac-footer {
    padding: 16px 20px !important;
    background: var(--ac-gray-50) !important;
    border-top: 1px solid var(--ac-gray-200) !important;
}

.ac-reset-btn {
    width: 100% !important;
    padding: 12px !important;
    background: #dc2626 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    margin-bottom: 12px !important;
    transition: background 0.2s !important;
    line-height: normal !important;
    text-decoration: none !important;
}

.ac-reset-btn:hover { background: #b91c1c !important; }

.ac-reset-btn:focus-visible {
    outline: 2px solid #dc2626 !important;
    outline-offset: 2px !important;
}

.ac-credits {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-size: 11px !important;
    color: var(--ac-gray-500) !important;
    font-family: inherit !important;
    line-height: normal !important;
}

.ac-wcag {
    background: #10b981 !important;
    color: #ffffff !important;
    padding: 3px 8px !important;
    border-radius: 20px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 480px) {
    .ac-toolbar {
        bottom: 16px !important;
        right: 16px !important;
    }

    .ac-toolbar.ac-bottom-left {
        left: 16px !important;
        right: auto !important;
    }

    .ac-panel {
        width: calc(100vw - 32px) !important;
        max-width: 380px !important;
    }

    .ac-themes,
    .ac-features {
        grid-template-columns: 1fr !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ac-toggle,
    .ac-theme,
    .ac-feature,
    .ac-btn,
    .ac-reset-btn {
        transition: none !important;
    }
}


/* ============================================================
   TEMAS — FILTROS VISUALES
   Técnica: backdrop-filter en html::after
   -------------------------------------------------------
   Por qué esta técnica:
   Cuando filter se aplica al elemento html o body, crea un
   stacking context del que los hijos NO pueden escapar (ni
   con filter:none). La solución es crear un pseudo-elemento
   ::after con position:fixed que cubra todo el viewport y
   aplicar el filtro como backdrop-filter.
   El toolbar (#ac-root z-index:999999) queda ENCIMA de este
   overlay (z-index:99998), por lo que NO es filtrado.
   ============================================================ */

/* Configuración base del overlay de filtro */
html.ac-theme-high-contrast::after,
html.ac-theme-invert::after,
html.ac-theme-grayscale::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 99998;   /* Por debajo del toolbar (999999) */
}

/* Alto contraste */
html.ac-theme-high-contrast::after {
    backdrop-filter: contrast(160%) saturate(1.2);
    -webkit-backdrop-filter: contrast(160%) saturate(1.2);
}

/* Inversión de colores */
html.ac-theme-invert::after {
    backdrop-filter: invert(100%) hue-rotate(180deg);
    -webkit-backdrop-filter: invert(100%) hue-rotate(180deg);
}

/* Escala de grises */
html.ac-theme-grayscale::after {
    backdrop-filter: grayscale(100%);
    -webkit-backdrop-filter: grayscale(100%);
}


/* ============================================================
   TEMAS — CAMBIOS DE COLOR (sin filtros)
   Estos temas modifican colores de fondo/texto.
   No requieren backdrop-filter porque no crean stacking
   contexts problemáticos para el toolbar.
   ============================================================ */

/* Modo Oscuro */
html.ac-theme-dark {
    color-scheme: dark;
}

html.ac-theme-dark body {
    background-color: #121212 !important;
    color: #e0e0e0 !important;
}

html.ac-theme-dark a {
    color: #90caf9 !important;
}

html.ac-theme-dark input,
html.ac-theme-dark textarea,
html.ac-theme-dark select {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
    border-color: #444 !important;
}

html.ac-theme-dark img {
    filter: brightness(0.85);
}

/* Modo Claro */
html.ac-theme-light body {
    background-color: #ffffff !important;
    color: #111111 !important;
}

html.ac-theme-light a {
    color: #1a365d !important;
}

/* Filtro Azul — reduce luz azul, ayuda a lectura */
html.ac-theme-blue body {
    background-color: #fef9f0 !important;
    color: #2d1a0e !important;
}

html.ac-theme-blue img {
    filter: sepia(15%);
}


/* ============================================================
   CARACTERÍSTICAS
   ============================================================ */

/* Resaltado de foco para teclado */
html.ac-focusOutline :focus {
    outline: 3px solid #ff4500 !important;
    outline-offset: 4px !important;
}

/* Fuente legible (dislexia) */
html.ac-readableFont,
html.ac-readableFont body,
html.ac-readableFont p,
html.ac-readableFont li,
html.ac-readableFont span,
html.ac-readableFont div,
html.ac-readableFont h1,
html.ac-readableFont h2,
html.ac-readableFont h3,
html.ac-readableFont h4,
html.ac-readableFont h5,
html.ac-readableFont h6 {
    font-family: 'OpenDyslexic', 'Comic Sans MS', 'Comic Neue', 'Helvetica Neue', Arial, sans-serif !important;
}

/* Subrayar enlaces */
html.ac-showLinks a {
    text-decoration: underline !important;
    text-decoration-thickness: 2px !important;
    text-underline-offset: 3px !important;
}

/* Pausar animaciones */
html.ac-pauseAnimations *,
html.ac-pauseAnimations *::before,
html.ac-pauseAnimations *::after {
    animation-duration:        0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration:       0.001ms !important;
    scroll-behavior:           auto !important;
}

/* Interlineado alto */
html.ac-lineHeight body,
html.ac-lineHeight p,
html.ac-lineHeight li,
html.ac-lineHeight span {
    line-height: 1.8 !important;
}

html.ac-lineHeight h1, html.ac-lineHeight h2,
html.ac-lineHeight h3, html.ac-lineHeight h4 {
    line-height: 1.4 !important;
}

/* Espaciado de texto */
html.ac-wordSpacing body,
html.ac-wordSpacing p,
html.ac-wordSpacing li,
html.ac-wordSpacing span {
    word-spacing:   0.16em !important;
    letter-spacing: 0.12em !important;
}

/* Ocultar imágenes */
html.ac-hideImages img,
html.ac-hideImages video,
html.ac-hideImages svg:not(.ac-toggle svg) {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Guía de lectura */
html.ac-readingGuide::before {
    content: '';
    position: fixed;
    top: 50%;
    left: 0;
    right: 0;
    height: 56px;
    background: rgba(255, 235, 59, 0.25);
    border-top: 2px solid rgba(255, 200, 0, 0.8);
    border-bottom: 2px solid rgba(255, 200, 0, 0.8);
    pointer-events: none;
    z-index: 99997;   /* Bajo el toolbar pero visible */
    transform: translateY(-50%);
}


/* ============================================================
   AISLAMIENTO DEL TOOLBAR DE TEMAS QUE CAMBIAN COLORES
   (dark, light, blue, readableFont, lineHeight, wordSpacing)
   
   TÉCNICA: en lugar de "all: revert" (que borraba TODO el
   CSS y rompía el panel), se usan declaraciones explícitas
   sólo de las propiedades que los temas modifican.
   ============================================================ */

/* Propiedades de texto */
html.ac-readableFont .ac-toolbar,
html.ac-readableFont .ac-panel,
html.ac-readableFont .ac-toggle,
html.ac-readableFont .ac-close,
html.ac-readableFont .ac-section-title,
html.ac-readableFont .ac-btn,
html.ac-readableFont .ac-theme,
html.ac-readableFont .ac-feature,
html.ac-readableFont .ac-reset-btn,
html.ac-readableFont .ac-credits {
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
}

/* Interlineado */
html.ac-lineHeight .ac-toolbar,
html.ac-lineHeight .ac-panel,
html.ac-lineHeight .ac-header,
html.ac-lineHeight .ac-body,
html.ac-lineHeight .ac-footer,
html.ac-lineHeight .ac-section-title,
html.ac-lineHeight .ac-btn,
html.ac-lineHeight .ac-theme,
html.ac-lineHeight .ac-feature,
html.ac-lineHeight .ac-reset-btn,
html.ac-lineHeight .ac-credits {
    line-height: normal !important;
}

/* Espaciado de letras */
html.ac-wordSpacing .ac-toolbar,
html.ac-wordSpacing .ac-panel,
html.ac-wordSpacing .ac-btn,
html.ac-wordSpacing .ac-theme,
html.ac-wordSpacing .ac-feature,
html.ac-wordSpacing .ac-reset-btn {
    word-spacing:   normal !important;
    letter-spacing: normal !important;
}

/* Modo oscuro — restaurar colores del toolbar */
html.ac-theme-dark .ac-toolbar,
html.ac-theme-dark .ac-panel {
    background: var(--ac-bg) !important;
    color: var(--ac-gray-800) !important;
}

html.ac-theme-dark .ac-toggle {
    background: var(--ac-bg) !important;
    color: var(--ac-icon) !important;
    border-color: var(--ac-gray-200) !important;
}

html.ac-theme-dark .ac-header {
    background: var(--ac-icon) !important;
    color: #ffffff !important;
}

html.ac-theme-dark .ac-header h3,
html.ac-theme-dark .ac-close {
    color: #ffffff !important;
}

html.ac-theme-dark .ac-body,
html.ac-theme-dark .ac-footer {
    background: var(--ac-bg) !important;
    color: var(--ac-gray-800) !important;
}

html.ac-theme-dark .ac-btn,
html.ac-theme-dark .ac-theme,
html.ac-theme-dark .ac-feature {
    background: var(--ac-gray-50) !important;
    color: var(--ac-gray-700) !important;
    border-color: var(--ac-gray-200) !important;
}

html.ac-theme-dark .ac-btn-primary,
html.ac-theme-dark .ac-theme.active,
html.ac-theme-dark .ac-feature.active {
    background: var(--ac-icon) !important;
    color: #ffffff !important;
    border-color: var(--ac-icon) !important;
}

html.ac-theme-dark .ac-reset-btn {
    background: #dc2626 !important;
    color: #ffffff !important;
}

html.ac-theme-dark .ac-section-title,
html.ac-theme-dark .ac-credits {
    color: var(--ac-gray-500) !important;
}

html.ac-theme-dark img {
    filter: none; /* las imágenes del toolbar no se oscurecen */
}

html.ac-theme-dark .ac-toggle img,
html.ac-theme-dark .ac-panel img {
    filter: none !important;
}

/* Modo claro — restaurar colores del toolbar */
html.ac-theme-light .ac-toggle {
    background: var(--ac-bg) !important;
    color: var(--ac-icon) !important;
}

/* Filtro azul — restaurar colores del toolbar */
html.ac-theme-blue .ac-toggle,
html.ac-theme-blue .ac-panel,
html.ac-theme-blue .ac-body {
    background: var(--ac-bg) !important;
    color: var(--ac-gray-800) !important;
}

html.ac-theme-blue img {
    filter: none;
}

html.ac-theme-blue .ac-toggle img,
html.ac-theme-blue .ac-panel img {
    filter: none !important;
}

/* Subrayado de enlaces — no afectar botones del toolbar */
html.ac-showLinks .ac-toggle,
html.ac-showLinks .ac-btn,
html.ac-showLinks .ac-theme,
html.ac-showLinks .ac-feature,
html.ac-showLinks .ac-reset-btn {
    text-decoration: none !important;
}

/* Foco — el ac-close ya tiene su propio estilo de foco */
html.ac-focusOutline .ac-close:focus,
html.ac-focusOutline .ac-toggle:focus,
html.ac-focusOutline .ac-btn:focus,
html.ac-focusOutline .ac-theme:focus,
html.ac-focusOutline .ac-feature:focus,
html.ac-focusOutline .ac-reset-btn:focus {
    outline: 3px solid #ff4500 !important;
    outline-offset: 2px !important;
}

/* Imágenes — proteger íconos SVG del toolbar */
html.ac-hideImages .ac-toolbar img,
html.ac-hideImages .ac-toolbar svg,
html.ac-hideImages .ac-panel img,
html.ac-hideImages .ac-panel svg {
    opacity: 1 !important;
    pointer-events: auto !important;
}