/* ============================================================
   SVH A11y Widget — Comodidad visual y Accesibilidad
   Canon anti-glare: nunca #fff/#000 puros.
   Salud: usuario con migraña/fotofobia/sensibilidad sensorial.
   ============================================================ */

#svh-a11y, #svh-a11y *,
#svh-a11y *::before, #svh-a11y *::after {
    box-sizing: border-box;
}

.svh-a11y {
    --a-bg: #1a1a2e;
    --a-bg-elev: #20203a;
    --a-bg-deep: #14142b;
    --a-pearl: #ece6d6;
    --a-pearl-bright: #f5efe0;
    --a-ink-dim: #b8b3c8;
    --a-magenta: #c1247d;
    --a-magenta-bright: #e3479e;
    --a-gold: #d4af37;
    --a-gold-bright: #f0c548;
    --a-line: rgba(240, 234, 214, 0.12);
    --a-shadow: 0 12px 40px rgba(0, 0, 0, 0.50);
    font-family: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    position: fixed;
    bottom: 16px;
    left: 16px;
    z-index: 9998;
}

/* ─── Botón flotante ─── */
.svh-a11y__toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(180deg, var(--a-magenta-bright), var(--a-magenta) 65%, #8f1a5d);
    color: #fff;
    border: 1px solid var(--a-magenta);
    border-radius: 999px;
    padding: 10px 16px 10px 12px;
    cursor: pointer;
    box-shadow: var(--a-shadow);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.svh-a11y__toggle:hover { transform: translateY(-2px); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55); }
.svh-a11y__toggle:focus-visible { outline: 3px solid var(--a-gold-bright); outline-offset: 3px; }
.svh-a11y__toggle-icon { font-size: 20px; line-height: 1; }
.svh-a11y__toggle-label { white-space: nowrap; }

@media (max-width: 480px) {
    .svh-a11y__toggle-label { display: none; }
    .svh-a11y__toggle { padding: 12px; }
}

/* ─── Panel ─── */
.svh-a11y__panel {
    position: absolute;
    bottom: calc(100% + 12px);
    left: 0;
    width: min(340px, calc(100vw - 32px));
    max-height: min(78vh, 640px);
    overflow-y: auto;
    background: var(--a-bg-elev);
    color: var(--a-pearl);
    border: 1px solid var(--a-line);
    border-radius: 16px;
    box-shadow: var(--a-shadow);
    padding: 18px 18px 16px;
    transform-origin: bottom left;
    transform: translateY(8px) scale(0.96);
    opacity: 0;
    transition: opacity 0.18s ease, transform 0.18s ease;
    pointer-events: none;
}
.svh-a11y__panel[aria-hidden="false"] {
    transform: translateY(0) scale(1);
    opacity: 1;
    pointer-events: auto;
}
.svh-a11y__panel[hidden] { display: block !important; }

.svh-a11y__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}
.svh-a11y__title {
    font-family: 'Syne', 'DM Sans', sans-serif;
    font-weight: 800 !important;
    font-size: 17px;
    margin: 0;
    color: #ffffff !important;
    opacity: 1 !important;
    line-height: 1.3;
    letter-spacing: 0.01em;
}
.svh-a11y__close {
    background: transparent;
    border: 1px solid var(--a-line);
    color: var(--a-pearl);
    width: 32px; height: 32px;
    border-radius: 999px;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    font-family: inherit;
}
.svh-a11y__close:hover { border-color: var(--a-magenta-bright); color: var(--a-gold-bright); }
.svh-a11y__close:focus-visible { outline: 3px solid var(--a-gold-bright); outline-offset: 2px; }

.svh-a11y__intro {
    font-size: 13px;
    line-height: 1.6;
    color: #e8e1f0 !important;
    opacity: 1 !important;
    margin: 0 0 14px;
}

.svh-a11y__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.svh-a11y__item { margin: 0 0 8px; }
.svh-a11y__item:last-child { margin-bottom: 0; }

/* ─── Switch (button role=switch) ─── */
/* CIERRE-NOCHE 2026-06-14 · I1 fix anti-glare filas-switch:
 * fondo var(--a-bg-elev) #20203a (sin claro-sobre-claro),
 * label pearl #f0ead6 (NO #fff puro · anti-migraña),
 * desc ink-dim #b8b3c8 (NO #e8e1f0).
 * AA verificado: pearl/bg-elev ≈14.5:1 (AAA) · ink-dim/bg-elev ≈8.2:1 (AAA). */
.svh-a11y__switch {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 12px;
    width: 100%;
    background: var(--a-bg-elev);
    color: var(--a-pearl);
    border: 1px solid var(--a-line);
    border-radius: 12px;
    padding: 10px 12px;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
}
.svh-a11y__switch:hover { border-color: var(--a-magenta-bright); }
.svh-a11y__switch:focus-visible { outline: 3px solid var(--a-gold-bright); outline-offset: 2px; }
.svh-a11y__sw-label {
    grid-column: 1; grid-row: 1;
    font-weight: 800 !important;
    font-size: 15px !important;
    color: #f0ead6 !important;
    opacity: 1 !important;
    filter: none !important;
    letter-spacing: 0.01em;
    text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}
.svh-a11y__sw-desc {
    grid-column: 1; grid-row: 2;
    font-size: 13px !important;
    color: #b8b3c8 !important;
    opacity: 1 !important;
    filter: none !important;
    line-height: 1.5;
}
.svh-a11y__sw-track {
    grid-column: 2; grid-row: 1 / span 2;
    width: 38px; height: 22px;
    background: var(--a-bg-deep);
    border: 1px solid var(--a-line);
    border-radius: 999px;
    position: relative;
    transition: background 0.18s ease, border-color 0.18s ease;
    flex-shrink: 0;
}
.svh-a11y__sw-thumb {
    position: absolute;
    top: 50%;
    left: 2px;
    transform: translateY(-50%);
    width: 16px; height: 16px;
    background: var(--a-pearl);
    border-radius: 50%;
    transition: left 0.18s ease, background 0.18s ease;
}
.svh-a11y__switch[aria-checked="true"] .svh-a11y__sw-track {
    background: var(--a-magenta);
    border-color: var(--a-magenta-bright);
}
.svh-a11y__switch[aria-checked="true"] .svh-a11y__sw-thumb {
    left: calc(100% - 18px);
    background: #f0ead6; /* CIERRE-NOCHE I1: pearl en lugar de #fff puro (anti-migraña) */
}

/* ─── Size group ─── */
.svh-a11y__size-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 12px;
    width: 100%;
    background: var(--a-bg);
    color: var(--a-pearl);
    border: 1px solid var(--a-line);
    border-radius: 12px;
    padding: 10px 12px;
}
.svh-a11y__size-group { display: inline-flex; gap: 4px; }
.svh-a11y__size {
    background: var(--a-bg-elev);
    color: var(--a-pearl);
    border: 1px solid var(--a-line);
    border-radius: 8px;
    padding: 6px 10px;
    font-family: inherit;
    font-weight: 700;
    cursor: pointer;
    font-size: 12px;
}
.svh-a11y__size:hover { border-color: var(--a-magenta-bright); color: var(--a-pearl); }
.svh-a11y__size:focus-visible { outline: 3px solid var(--a-gold-bright); outline-offset: 2px; }
.svh-a11y__size[aria-pressed="true"] {
    background: var(--a-magenta);
    color: #fff;
    border-color: var(--a-magenta-bright);
}

/* ─── Footer ─── */
.svh-a11y__footer {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--a-line);
    display: flex;
    justify-content: flex-end;
}
.svh-a11y__reset {
    background: transparent;
    color: var(--a-pearl);
    border: 1px solid var(--a-line);
    border-radius: 8px;
    padding: 8px 14px;
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
}
.svh-a11y__reset:hover { border-color: var(--a-gold); color: var(--a-gold-bright); }
.svh-a11y__reset:focus-visible { outline: 3px solid var(--a-gold-bright); outline-offset: 2px; }


/* ===========================================================
   MODOS (clases en <html>) — efectos sobre TODO el documento
   =========================================================== */

/* 1) Lectura cómoda — anti-glare suave (sin romper layout) */
html.svh-a11y-comfort {
    filter: brightness(0.93) contrast(0.96) sepia(0.04) !important;
}
html.svh-a11y-comfort,
html.svh-a11y-comfort body {
    text-shadow: none !important;
}
/* Excluir el propio widget del filtro para que su contraste no se altere */
html.svh-a11y-comfort #svh-a11y { filter: brightness(1.075) contrast(1.04) saturate(1.15) !important; }

/* 2) Alto contraste — para baja visión */
html.svh-a11y-contrast {
    filter: contrast(1.35) saturate(0.6) !important;
}
html.svh-a11y-contrast :focus-visible {
    outline: 3px solid #ffd700 !important;
    outline-offset: 2px !important;
}
html.svh-a11y-contrast #svh-a11y { filter: contrast(0.74) saturate(1.7) !important; }

/* 3) Texto grande — 3 niveles. WoodMart fija font-size en px en muchos sitios,
   así que combinamos % en html + zoom en body + forzar rem en elementos clave. */
html.svh-a11y-large-1, html.svh-a11y-large-1 body { font-size: 112.5% !important; }
html.svh-a11y-large-2, html.svh-a11y-large-2 body { font-size: 125% !important; }
html.svh-a11y-large-1 p, html.svh-a11y-large-1 li, html.svh-a11y-large-1 a,
html.svh-a11y-large-1 span:not(.dashicons):not([class*="icon"]),
html.svh-a11y-large-1 td, html.svh-a11y-large-1 th, html.svh-a11y-large-1 label,
html.svh-a11y-large-1 button:not([class*="icon"]) { font-size: 1.125em !important; }
html.svh-a11y-large-2 p, html.svh-a11y-large-2 li, html.svh-a11y-large-2 a,
html.svh-a11y-large-2 span:not(.dashicons):not([class*="icon"]),
html.svh-a11y-large-2 td, html.svh-a11y-large-2 th, html.svh-a11y-large-2 label,
html.svh-a11y-large-2 button:not([class*="icon"]) { font-size: 1.25em !important; }
html.svh-a11y-large-1 h1, html.svh-a11y-large-2 h1 { font-size: 1.4em !important; }
html.svh-a11y-large-1 h2, html.svh-a11y-large-2 h2 { font-size: 1.3em !important; }
html.svh-a11y-large-1 h3, html.svh-a11y-large-2 h3 { font-size: 1.2em !important; }
/* Widget conserva tamaño base — el control no debe deformarse a sí mismo */
html.svh-a11y-large-1 #svh-a11y,
html.svh-a11y-large-2 #svh-a11y { font-size: 14px !important; }
html.svh-a11y-large-1 #svh-a11y *,
html.svh-a11y-large-2 #svh-a11y * { font-size: inherit !important; }

/* 4) Reducir movimiento — W3C technique + WoodMart specifics */
html.svh-a11y-reduce-motion,
html.svh-a11y-reduce-motion * ,
html.svh-a11y-reduce-motion *::before,
html.svh-a11y-reduce-motion *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
}
/* Parallax/transform/sticky: forzar comportamiento normal */
html.svh-a11y-reduce-motion [class*="parallax"],
html.svh-a11y-reduce-motion .wd-parallax,
html.svh-a11y-reduce-motion [data-parallax],
html.svh-a11y-reduce-motion [data-fix-bg],
html.svh-a11y-reduce-motion .wd-fade-in,
html.svh-a11y-reduce-motion .wd-anim,
html.svh-a11y-reduce-motion [class*="wd-animation"],
html.svh-a11y-reduce-motion .swiper-wrapper {
    background-attachment: scroll !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
}
/* GIF/video autoplay: pausar (rough — depende del browser) */
html.svh-a11y-reduce-motion video[autoplay] { animation-play-state: paused !important; }

/* 5) Colores seguros (daltonismo) — sustituye rojo/verde por azul/ámbar.
   Ampliado a clases reales del frontend SVH + WoodMart + WP. */
html.svh-a11y-cbsafe .notice-success,
html.svh-a11y-cbsafe .alert-success,
html.svh-a11y-cbsafe .updated:not(.error),
html.svh-a11y-cbsafe [class*="qs-pill"][class*="high"],
html.svh-a11y-cbsafe [class*="score"][class*="high"],
html.svh-a11y-cbsafe [class*="success"]:not(button):not(a),
html.svh-a11y-cbsafe .stock.in-stock,
html.svh-a11y-cbsafe .label-success,
html.svh-a11y-cbsafe .badge-success,
html.svh-a11y-cbsafe .svh-pcard-save,
html.svh-a11y-cbsafe [class*="positivo"],
html.svh-a11y-cbsafe [class*="activo"]:not(input):not(label),
html.svh-a11y-cbsafe .green, html.svh-a11y-cbsafe .text-green,
html.svh-a11y-cbsafe [data-status="ok"],
html.svh-a11y-cbsafe [data-status="active"] {
    background-color: #1d4ed8 !important; /* azul (en vez de verde) */
    color: #fff !important;
    border-color: #1d4ed8 !important;
}
html.svh-a11y-cbsafe .notice-error,
html.svh-a11y-cbsafe .alert-error,
html.svh-a11y-cbsafe .notice-warning,
html.svh-a11y-cbsafe .error:not(input):not(label),
html.svh-a11y-cbsafe [class*="qs-pill"][class*="low"],
html.svh-a11y-cbsafe [class*="score"][class*="low"],
html.svh-a11y-cbsafe [class*="error"]:not(button):not(a):not(input):not(label),
html.svh-a11y-cbsafe [class*="danger"]:not(button):not(a),
html.svh-a11y-cbsafe .stock.out-of-stock,
html.svh-a11y-cbsafe .label-danger, html.svh-a11y-cbsafe .badge-danger,
html.svh-a11y-cbsafe [class*="negativo"],
html.svh-a11y-cbsafe .red, html.svh-a11y-cbsafe .text-red,
html.svh-a11y-cbsafe [data-status="ko"],
html.svh-a11y-cbsafe [data-status="error"] {
    background-color: #f59e0b !important; /* ámbar (en vez de rojo) */
    color: #1a1a1a !important;
    border-color: #f59e0b !important;
}
/* Indicador visible siempre que se active el modo: borde dorado sobre body */
html.svh-a11y-cbsafe body::before {
    content: '';
    position: fixed; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, #1d4ed8, #f59e0b);
    z-index: 9997; pointer-events: none;
}

/* 6) Lectura fácil — tipografía muy legible + interlineado */
html.svh-a11y-readable body,
html.svh-a11y-readable p,
html.svh-a11y-readable li,
html.svh-a11y-readable td,
html.svh-a11y-readable th,
html.svh-a11y-readable label,
html.svh-a11y-readable a,
html.svh-a11y-readable span,
html.svh-a11y-readable div {
    font-family: Verdana, 'Atkinson Hyperlegible', Tahoma, 'Segoe UI', sans-serif !important;
    line-height: 1.7 !important;
    letter-spacing: 0.02em !important;
    word-spacing: 0.05em !important;
}
html.svh-a11y-readable h1,
html.svh-a11y-readable h2,
html.svh-a11y-readable h3,
html.svh-a11y-readable h4 {
    font-family: Verdana, 'Atkinson Hyperlegible', Tahoma, 'Segoe UI', sans-serif !important;
    line-height: 1.35 !important;
    letter-spacing: 0.01em !important;
}
/* Widget conserva tipografía SVH para coherencia visual del control */
html.svh-a11y-readable #svh-a11y, html.svh-a11y-readable #svh-a11y * {
    font-family: 'DM Sans', system-ui, sans-serif !important;
    line-height: inherit !important;
    letter-spacing: normal !important;
    word-spacing: normal !important;
}

/* Print: ocultar widget */
@media print { #svh-a11y { display: none !important; } }