/* ========================================================================= */
/* WIDGET DE ACCESIBILIDAD PINTAMAX                                          */
/* ========================================================================= */

#a11y-widget-root { position: static; }

.a11y-trigger-btn {
    position: fixed !important;
    bottom: 96px !important;
    right: 25px !important;
    left: auto !important;
    z-index: 999990 !important;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background-color: #004FA8;
    color: #ffffff;
    border: 2px solid #ffffff;
    box-shadow: 0 4px 18px rgba(0, 79, 168, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s ease;
}

.a11y-trigger-btn:hover {
    transform: scale(1.08);
    background-color: #073a72;
}

.a11y-trigger-btn svg { width: 28px; height: 28px; fill: currentColor; }

.a11y-panel-overlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    z-index: 999995 !important;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.a11y-panel-overlay.active { opacity: 1; visibility: visible; }

.a11y-panel {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100%;
    max-width: 440px;
    height: 100vh !important;
    background: #f1f5f9;
    z-index: 999999 !important;
    box-shadow: 10px 0 35px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    font-family: 'Roboto', sans-serif !important;
}

.a11y-panel.active { transform: translateX(0); }

.a11y-header {
    background-color: #004FA8;
    color: #ffffff;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.a11y-header-title { font-size: 13pt; font-weight: 700; display: flex; align-items: center; gap: 8px; }

.a11y-close-btn { background: transparent; border: none; color: #ffffff; font-size: 20px; cursor: pointer; line-height: 1; padding: 4px; border-radius: 6px; transition: background 0.2s; }
.a11y-close-btn:hover { background: rgba(255, 255, 255, 0.2); }

.a11y-body { flex: 1; overflow-y: auto; padding: 16px 18px 24px; display: flex; flex-direction: column; gap: 16px; }

.a11y-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 420px) { .a11y-grid { grid-template-columns: repeat(2, 1fr); } }

.a11y-card {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px 8px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; cursor: pointer; min-height: 96px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: all 0.2s ease; user-select: none; position: relative;
}

.a11y-card:hover { border-color: #004FA8; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0, 79, 168, 0.1); }
.a11y-card.active { border-color: #004FA8; background-color: #f0f7ff; box-shadow: 0 0 0 2px #004FA8; }
.a11y-card i { font-size: 22px; color: #1e293b; margin-bottom: 6px; transition: color 0.2s; }
.a11y-card.active i { color: #004FA8; }
.a11y-card span { font-size: 11px; font-weight: 600; color: #334155; line-height: 1.25; }

.a11y-card .badge-state {
    position: absolute; top: 6px; right: 6px; font-size: 9px; background: #004FA8; color: #ffffff;
    padding: 2px 5px; border-radius: 99px; font-weight: 700; display: none;
}
.a11y-card.active .badge-state { display: block; }

.a11y-reset-btn {
    background-color: #004FA8; color: #ffffff; border: none; border-radius: 10px; padding: 12px 16px;
    font-size: 12pt; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 8px; transition: background-color 0.2s;
}
.a11y-reset-btn:hover { background-color: #073a72; }

/* FILTROS APLICADOS SIN ROMPER EL POSICIONAMIENTO FIJO */
body.a11y-desaturate > :not(#a11y-widget-root):not(.wa-float):not(#product-modal) { filter: grayscale(100%) !important; }
body.a11y-saturate-high > :not(#a11y-widget-root):not(.wa-float):not(#product-modal) { filter: saturate(200%) !important; }
body.a11y-invert-mode > :not(#a11y-widget-root):not(.wa-float):not(#product-modal) { filter: invert(100%) hue-rotate(180deg) !important; }
body.a11y-invert-mode img, body.a11y-invert-mode video { filter: invert(100%) hue-rotate(180deg) !important; }
body.a11y-desaturate.a11y-invert-mode > :not(#a11y-widget-root):not(.wa-float):not(#product-modal) { filter: grayscale(100%) invert(100%) hue-rotate(180deg) !important; }

body.a11y-contrast-dark { background-color: #121212 !important; color: #ffffff !important; }
body.a11y-contrast-dark header, body.a11y-contrast-dark footer, body.a11y-contrast-dark section, body.a11y-contrast-dark .bg-white, body.a11y-contrast-dark .bg-slate-50, body.a11y-contrast-dark .bg-slate-100 { background-color: #1a1a1a !important; color: #f1f5f9 !important; }
body.a11y-contrast-dark h1, body.a11y-contrast-dark h2, body.a11y-contrast-dark h3, body.a11y-contrast-dark p, body.a11y-contrast-dark span { color: #ffffff !important; }

body.a11y-stop-animations *, body.a11y-stop-animations *::before, body.a11y-stop-animations *::after { animation: none !important; transition: none !important; }
body.a11y-highlight-links a { background-color: #fef08a !important; color: #000000 !important; text-decoration: underline !important; font-weight: 700 !important; outline: 2px solid #ca8a04 !important; }
body.a11y-font-size-1 { font-size: 15pt !important; }
body.a11y-font-size-2 { font-size: 17pt !important; }
body.a11y-font-size-3 { font-size: 19pt !important; }
body.a11y-text-spacing { letter-spacing: 0.12em !important; word-spacing: 0.18em !important; }
body.a11y-hide-images img, body.a11y-hide-images [style*="background-image"] { opacity: 0 !important; visibility: hidden !important; }
body.a11y-dyslexic * { font-family: 'Comic Sans MS', 'Arial', sans-serif !important; letter-spacing: 0.05em !important; }
body.a11y-line-height { line-height: 2 !important; }
body.a11y-align-left * { text-align: left !important; }
body.a11y-big-cursor, body.a11y-big-cursor * { cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 24 24' fill='%23004FA8' stroke='white' stroke-width='2'><path d='M3 3l7 18 3-7 7-3L3 3z'/></svg>"), auto !important; }
.a11y-reading-guide { position: fixed !important; left: 0 !important; width: 100vw !important; height: 8px; background: rgba(0, 79, 168, 0.7); box-shadow: 0 0 12px rgba(0, 79, 168, 0.8); pointer-events: none; z-index: 9999999 !important; display: none; }
.a11y-reading-guide.active { display: block; }