/* ==========================================================================
   Accessibility Widget - panel de accesibilidad reutilizable
   - Tema base con fallbacks; en BellaDona toma los tokens --bd-* del sitio.
   - El disparador puede ser flotante (por defecto) o integrado en cabecera
     dentro de .a11y-widget-wrapper.
   - Los filtros de color se aplican a los hijos de <body>, nunca al panel,
     para no romper position: fixed ni la propia interfaz del panel.
   ========================================================================== */

:root {
    --aw-text-size: 100%;
    --aw-line-height: 1.6;
    --aw-letter-spacing: 0px;
    --aw-word-spacing: 0px;
    --aw-page-filter: none;

    /* Tokens de tema. Si el sitio define --bd-*, se reutilizan. */
    --aw-primary-color: var(--bd-gold-strong, #7a5e2e);
    --aw-on-primary: var(--bd-cream, #f7f4ef);
    --aw-primary-dark: var(--bd-ink, #0e0e0d);
    --aw-secondary-color: var(--bd-ink-soft, #374151);
    --aw-on-secondary: #ffffff;
    --aw-text-color: var(--bd-ink, #0e0e0d);
    --aw-text-light: var(--bd-body, #4b5563);
    --aw-bg-color: var(--bd-cream-soft, #fdfcf9);
    --aw-bg-alt: var(--bd-cream, #f7f4ef);
    --aw-border-color: var(--bd-border, #e4decd);
    --aw-success-color: var(--bd-gold-strong, #7a5e2e);
    --aw-on-success: var(--bd-cream, #f7f4ef);
    --aw-error-color: #8a1c1c;
    --aw-on-error: #ffffff;
    --aw-focus-color: var(--bd-ink, #0e0e0d);
}

/* --------------------------------------------------------------------------
   Ajustes de lectura aplicados al documento
   -------------------------------------------------------------------------- */

html {
    font-size: var(--aw-text-size);
}

body {
    line-height: var(--aw-line-height);
    letter-spacing: var(--aw-letter-spacing);
    word-spacing: var(--aw-word-spacing);
}

/* La tipografía alternativa debe ganar a las fuentes concretas del sitio,
   pero nunca debe cambiar la interfaz del propio panel. */
body[data-aw-alternative-font="true"] *:not(#aw-accessibility-panel):not(#aw-accessibility-panel *) {
    font-family: Verdana, Geneva, Tahoma, sans-serif !important;
}

/* Resaltado de foco opcional (siempre visible, no solo :focus-visible) */
body[data-aw-focus-highlight="true"] *:focus {
    outline: 4px solid #ff0000 !important;
    outline-offset: 2px !important;
}

/* --------------------------------------------------------------------------
   Filtros de página
   Se aplican a los hijos de body (y a los hijos de main) para que fixed
   siga funcionando en elementos como .sticky-call-btn.
   -------------------------------------------------------------------------- */

body[data-aw-grayscale="true"] {
    --aw-page-filter: grayscale(100%);
}

body[data-aw-color-vision="protanopia"] {
    --aw-page-filter: url(#aw-protanopia-filter);
}

body[data-aw-color-vision="deuteranopia"] {
    --aw-page-filter: url(#aw-deuteranopia-filter);
}

body[data-aw-color-vision="tritanopia"] {
    --aw-page-filter: url(#aw-tritanopia-filter);
}

body[data-aw-color-vision="achromatopsia"] {
    --aw-page-filter: url(#aw-achromatopsia-filter);
}

body > *:not(main):not(#aw-accessibility-panel):not(#aw-color-vision-filters),
body > main > * {
    filter: var(--aw-page-filter, none);
}

/* --------------------------------------------------------------------------
   Alto contraste del panel y del sitio
   El sitio cambia sus tokens --bd-* con body[data-aw-high-contrast="true"]
   en css/main.css; aquí se ajusta la interfaz del widget.
   -------------------------------------------------------------------------- */

body[data-aw-high-contrast="true"] {
    --aw-primary-color: #ffd700;
    --aw-on-primary: #000000;
    --aw-primary-dark: #000000;
    --aw-secondary-color: #000000;
    --aw-on-secondary: #ffffff;
    --aw-text-color: #000000;
    --aw-text-light: #000000;
    --aw-bg-color: #ffffff;
    --aw-bg-alt: #f2f2f2;
    --aw-border-color: #000000;
    --aw-success-color: #ffd700;
    --aw-on-success: #000000;
    --aw-error-color: #000000;
    --aw-on-error: #ffffff;
    --aw-focus-color: #000000;
}

/* --------------------------------------------------------------------------
   Utilidades
   -------------------------------------------------------------------------- */

.aw-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.aw-hidden {
    display: none !important;
}

/* --------------------------------------------------------------------------
   Disparador flotante (integración por defecto del widget)
   En BellaDona se integra en la cabecera y se sobreescribe más abajo.
   -------------------------------------------------------------------------- */

#aw-accessibility-toggle {
    position: fixed;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 10000;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    min-width: 44px;
    min-height: 44px;
    padding: 0.5rem 0.875rem;
    border: 2px solid var(--aw-primary-color);
    border-radius: 8px;
    background: var(--aw-primary-color);
    color: var(--aw-on-primary);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

#aw-accessibility-toggle:hover,
#aw-accessibility-toggle:focus-visible {
    background: var(--aw-primary-dark);
    border-color: var(--aw-primary-dark);
    color: var(--aw-on-primary);
    outline: 3px solid var(--aw-focus-color);
    outline-offset: 2px;
}

#aw-accessibility-toggle[aria-expanded="true"] {
    background: var(--aw-primary-dark);
    border-color: var(--aw-primary-dark);
    color: var(--aw-on-primary);
}

/* Integración en cabecera: mismo lenguaje visual que .a11y-trigger */
.a11y-widget-wrapper {
    display: inline-flex;
    align-items: center;
}

.a11y-widget-wrapper #aw-accessibility-toggle {
    position: static;
    inset: auto;
    z-index: auto;
    min-width: 44px;
    min-height: 44px;
    padding: 0.25rem 0.5rem;
    border: 2px solid var(--bd-gold-strong, var(--aw-primary-color));
    border-radius: var(--bd-radius-sm, 6px);
    background: transparent;
    color: var(--bd-ink, var(--aw-text-color));
    font-size: var(--bd-text-xs, 0.75rem);
    font-weight: 600;
    letter-spacing: 0.12em;
    line-height: 1.2;
    text-transform: uppercase;
}

.a11y-widget-wrapper #aw-accessibility-toggle:hover,
.a11y-widget-wrapper #aw-accessibility-toggle:focus-visible {
    background: var(--bd-gold-strong, var(--aw-primary-color));
    border-color: var(--bd-gold-strong, var(--aw-primary-color));
    color: var(--bd-cream, var(--aw-on-primary));
    outline: 3px solid var(--bd-ink, var(--aw-focus-color));
    outline-offset: 2px;
}

.a11y-widget-wrapper #aw-accessibility-toggle[aria-expanded="true"] {
    background: var(--bd-ink, var(--aw-primary-dark));
    border-color: var(--bd-ink, var(--aw-primary-dark));
    color: var(--bd-cream, var(--aw-on-primary));
}

/* --------------------------------------------------------------------------
   Panel
   -------------------------------------------------------------------------- */

#aw-accessibility-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10001;
    box-sizing: border-box;
    width: min(420px, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1.5rem;
    background: var(--aw-bg-color);
    color: var(--aw-text-color);
    border: 3px solid var(--aw-primary-color);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
    font-family: var(--bd-font-sans, system-ui, -apple-system, "Segoe UI", sans-serif);
}

#aw-accessibility-panel.aw-hidden {
    display: none !important;
}

#aw-accessibility-panel h2 {
    margin: 0 2.75rem 1rem 0;
    color: var(--aw-text-color);
    font-family: var(--bd-font-serif, Georgia, "Times New Roman", serif);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: normal;
}

#aw-close-panel {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 2px solid var(--aw-text-color);
    border-radius: 50%;
    background: transparent;
    color: var(--aw-text-color);
    font-family: inherit;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

#aw-close-panel:hover,
#aw-close-panel:focus-visible {
    background: var(--aw-error-color);
    border-color: var(--aw-error-color);
    color: var(--aw-on-error);
    outline: 3px solid var(--aw-focus-color);
    outline-offset: 2px;
}

.aw-control-group {
    margin-bottom: 1.25rem;
}

.aw-control-label,
.aw-control-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--aw-text-color);
    font-weight: 600;
    line-height: 1.4;
}

.aw-control-buttons {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.aw-control-buttons button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0.25rem 0.75rem;
    border: 2px solid var(--aw-text-color);
    border-radius: 6px;
    background: var(--aw-bg-alt);
    color: var(--aw-text-color);
    font-family: inherit;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.aw-control-buttons button:hover,
.aw-control-buttons button:focus-visible {
    border-color: var(--aw-primary-color);
    background: var(--aw-primary-color);
    color: var(--aw-on-primary);
    outline: 3px solid var(--aw-focus-color);
    outline-offset: 2px;
}

.aw-control-value {
    min-width: 4rem;
    text-align: center;
    color: var(--aw-text-color);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.aw-toggle-button,
.aw-vision-button {
    width: 100%;
    min-height: 44px;
    margin-bottom: 0.5rem;
    padding: 0.625rem 1rem;
    border: 2px solid var(--aw-text-color);
    border-radius: 6px;
    background: transparent;
    color: var(--aw-text-color);
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.3;
    text-align: center;
    cursor: pointer;
}

.aw-toggle-button:hover,
.aw-toggle-button:focus-visible,
.aw-vision-button:hover,
.aw-vision-button:focus-visible {
    background: var(--aw-bg-alt);
    outline: 3px solid var(--aw-focus-color);
    outline-offset: 2px;
}

.aw-toggle-button[aria-pressed="true"],
.aw-vision-button[aria-pressed="true"] {
    border-color: var(--aw-primary-color);
    background: var(--aw-primary-color);
    color: var(--aw-on-primary);
    font-weight: 700;
}

/* Indicador no cromático del estado activo */
.aw-toggle-button[aria-pressed="true"]::after,
.aw-vision-button[aria-pressed="true"]::after {
    content: " ✓";
    font-weight: 700;
}

#aw-accessibility-panel fieldset {
    margin: 0 0 1.25rem;
    padding: 1rem;
    border: 2px solid var(--aw-border-color);
    border-radius: 8px;
}

#aw-accessibility-panel fieldset legend {
    padding: 0 0.5rem;
    color: var(--aw-text-color);
    font-weight: 600;
}

.aw-note {
    margin-bottom: 0.75rem;
    color: var(--aw-text-light);
    font-size: 0.875rem;
    font-style: italic;
    line-height: 1.45;
}

.aw-color-vision-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.5rem;
}

#aw-reset-all {
    width: 100%;
    min-height: 44px;
    margin-top: 0.5rem;
    padding: 0.75rem 1rem;
    border: 2px solid var(--aw-error-color);
    border-radius: 6px;
    background: var(--aw-error-color);
    color: var(--aw-on-error);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
}

#aw-reset-all:hover,
#aw-reset-all:focus-visible {
    outline: 3px solid var(--aw-focus-color);
    outline-offset: 2px;
    filter: brightness(1.12);
}

/* Foco visible coherente dentro del panel */
#aw-accessibility-panel :focus-visible {
    outline: 3px solid var(--aw-focus-color);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   SVG de filtros
   -------------------------------------------------------------------------- */

#aw-color-vision-filters {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   Movimiento reducido e impresión
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    #aw-accessibility-toggle,
    #aw-close-panel,
    .aw-toggle-button,
    .aw-vision-button,
    .aw-control-buttons button,
    #aw-reset-all {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media print {
    #aw-accessibility-toggle,
    #aw-accessibility-panel,
    #aw-color-vision-filters,
    .a11y-widget-wrapper {
        display: none !important;
    }
}

@media (max-width: 420px) {
    #aw-accessibility-panel {
        width: calc(100vw - 1.5rem);
        padding: 1.25rem;
    }
}