/* Oksigenia Access Core Styles */

#oks-access-wrapper {
    position: fixed;
    z-index: 9999999;
    line-height: 1;
}

.oks-access-btn {
    width: var(--oks-btn-size);
    height: var(--oks-btn-size);
    border-radius: 50%;
    background: var(--oks-bg);
    color: var(--oks-icon);
    border: 2px solid #fff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.2s;
    padding: 0;
}

.oks-access-btn:hover {
    background: var(--oks-h-bg);
    color: var(--oks-h-icon);
    transform: scale(1.1);
}

.oks-access-btn svg {
    fill: currentColor;
    display: block;
    margin: 0 auto;
}

.oks-active-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 20px;
    height: 20px;
    background: #25D366;
    border-radius: 50%;
    border: 2px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    opacity: 0;
    pointer-events: none;
}

.oks-access-wrapper.has-active .oks-active-badge {
    opacity: 1;
}

/* PANEL */
.oks-access-panel {
    position: fixed;
    width: 340px;
    max-height: 90vh;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    z-index: 9999999;
    display: flex;
    flex-direction: column;
    opacity: 0;
    pointer-events: none;
    transition: 0.2s;
    border: 1px solid rgba(0,0,0,0.1);
}

.oks-access-panel.is-open {
    opacity: 1;
    pointer-events: all;
}

.oks-access-header {
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.oks-access-header h3 {
    margin: 0;
    font-size: 18px;
    color: #000;
}

.oks-access-close { 
    background: #f0f0f0 !important; 
    color: #333 !important; 
    border: 1px solid #ddd !important; 
    width: 44px; 
    height: 44px; 
    border-radius: 50%; 
    cursor: pointer; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    transition: 0.2s;
    padding: 0;
}
.oks-access-close:hover { background: #e0e0e0 !important; border-color: #ccc !important; }
.oks-access-close svg { width: 24px; height: 24px; stroke-width: 2.5px; }

.oks-access-content {
    padding: 0 20px 20px;
    overflow-y: auto;
}

.oks-access-title {
    margin: 10px 0 5px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    color: #888;
}

.oks-access-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

/* Profile presets row (4 buttons across) — see oksigenia-access.php $i_*. */
.oks-access-presets {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}
.oks-preset {
    background: #f0f4f8 !important;
    border: 2px solid transparent !important;
    border-radius: 8px;
    padding: 8px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    color: #333 !important;
    min-width: 0;
    transition: 0.15s;
}
.oks-preset:hover { background: #000 !important; color: #fff !important; }
.oks-preset:focus-visible { outline: 2px solid #000; outline-offset: 2px; }
.oks-preset.is-flashing {
    background: #000 !important;
    color: #fff !important;
    transform: scale(0.96);
}
.oks-preset .oks-icon { font-size: 22px; margin-bottom: 4px; }
.oks-preset .oks-icon svg { width: 20px; height: 20px; }
.oks-preset .oks-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.15;
    overflow-wrap: anywhere;
    word-break: break-word;
    min-height: 2.3em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.oks-access-opt {
    background: #f9f9f9 !important;
    border: 2px solid #eee !important;
    border-radius: 10px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    min-height: 70px;
    color: #333 !important;
    transition: 0.2s;
}

/* Full-width: spans both grid columns */
.oks-access-opt.full-width {
    grid-column: span 2;
}

.oks-access-opt.is-active {
    border-color: #000 !important;
    background: #fff !important;
    box-shadow: 0 0 0 1px #000 !important;
}

.oks-access-opt:hover {
    background: #000 !important;
    color: #fff !important;
    border-color: #000 !important;
}

.oks-icon {
    font-size: 28px;
    margin-bottom: 3px;
    display: block;
    color: inherit !important;
    line-height: 1;
}

.oks-icon svg {
    width: 24px;
    height: 24px;
    fill: currentColor !important;
}

.oks-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: inherit !important;
    text-align: center;
    line-height: 1.2;
}

.oks-levels {
    display: flex;
    gap: 3px;
    height: 5px;
    width: 50%;
    margin-top: 5px;
}

.oks-levels span {
    flex: 1;
    background: #ddd;
    border-radius: 3px;
}

.oks-access-opt[data-level="1"] .oks-levels span:nth-child(1),
.oks-access-opt[data-level="2"] .oks-levels span:nth-child(-n+2),
.oks-access-opt[data-level="3"] .oks-levels span:nth-child(-n+3),
.oks-access-opt[data-level="4"] .oks-levels span:nth-child(-n+4) {
    background: #000 !important;
}

.oks-access-opt:hover .oks-levels span {
    background: #555 !important;
}

.oks-access-footer {
    padding: 12px 20px;
    border-top: 1px solid #eee;
    text-align: center;
}

.oks-access-reset {
    width: 100%;
    padding: 8px;
    border: 2px solid #000 !important;
    color: #000 !important;
    background: transparent !important;
    font-weight: 700;
    cursor: pointer;
    border-radius: 6px;
    font-size: 12px;
}

.oks-access-reset:hover {
    background: #000 !important;
    color: #fff !important;
}

.oks-access-branding {
    margin-top: 12px;
    font-size: 12px;
    color: #000;
    font-weight: 700;
}
.oks-access-branding a { color: #000; text-decoration: none; border-bottom: 1px dotted #000; }

/* Accessibility modes */

/* Text-size levels.
   Uses CSS `zoom` on body, which scales everything proportionally — like
   the browser's own Ctrl+= zoom. Single rule, no compounding, no font-size
   chain to fight. Works on themes that hardcode `body { font-size: 16px }`
   AND descendants in px (where the previous html-font-size approach failed
   because the theme's per-element px declarations isolated them from any
   root scaling).

   Earlier attempts:
   - Pre-17.1: `body.oks-zoom-N * { font-size: NNem !important }` — compounded
     to 1.20³ = 1.73× at 3 nesting levels, layout reventado.
   - 17.1: `html:has(body.oks-zoom-N) { font-size: NN% !important }` — only
     scales rem-based elements; px-only themes saw nothing move.
   - 17.2: added `body { font-size: 1rem !important }` — still only scales
     descendants that inherit from body; explicit-px descendants stayed put.

   `zoom` browser support: Chrome/Edge/Safari forever, Firefox 126+ (May 2024).
   Native in 2026 — safe across modern browsers. Side effect: the plugin's own
   floating button and panel scale too (they are body descendants), which is
   the expected behaviour of a global text-zoom and matches what users get
   from native browser zoom. */
body.oks-zoom-1 { zoom: 1.10 !important; }
body.oks-zoom-2 { zoom: 1.20 !important; }
body.oks-zoom-3 { zoom: 1.35 !important; }
body.oks-zoom-4 { zoom: 1.50 !important; }

/* Counter-zoom the plugin's own surfaces so the panel + trigger + overlays
   keep their natural size while the rest of the page scales. Otherwise the
   panel grows so much that Reset and the bottom buttons spill below the
   viewport. Each level cancels the body zoom with calc(1 / level). */
body.oks-zoom-1 :is(#oks-access-wrapper, #oks-access-panel, #oks-overlay-gray, #oks-reading-guide, #oks-reading-mask) { zoom: calc(1 / 1.10) !important; }
body.oks-zoom-2 :is(#oks-access-wrapper, #oks-access-panel, #oks-overlay-gray, #oks-reading-guide, #oks-reading-mask) { zoom: calc(1 / 1.20) !important; }
body.oks-zoom-3 :is(#oks-access-wrapper, #oks-access-panel, #oks-overlay-gray, #oks-reading-guide, #oks-reading-mask) { zoom: calc(1 / 1.35) !important; }
body.oks-zoom-4 :is(#oks-access-wrapper, #oks-access-panel, #oks-overlay-gray, #oks-reading-guide, #oks-reading-mask) { zoom: calc(1 / 1.50) !important; }

body.oks-lh-1 *:not(.oks-access-panel *) { line-height: 1.6 !important; }
body.oks-lh-2 *:not(.oks-access-panel *) { line-height: 1.9 !important; }
body.oks-lh-3 *:not(.oks-access-panel *) { line-height: 2.2 !important; }

body.oks-a11y-font { font-family: Arial, sans-serif !important; }

/* Dyslexia font mode */
body.oks-dyslexia * { 
    font-family: 'Comic Sans MS', 'Verdana', sans-serif !important; 
    letter-spacing: 0.05em !important; 
    word-spacing: 0.1em !important; 
    line-height: 1.6 !important;
}

body.oks-a11y-hide img { opacity: 0 !important; visibility: hidden !important; }
body.oks-a11y-links a { text-decoration: underline !important; background: #ff0 !important; color: #000 !important; }

body.oks-align-1 *:not(.oks-access-panel *) { text-align: left !important; }
body.oks-align-2 *:not(.oks-access-panel *) { text-align: center !important; }
body.oks-align-3 *:not(.oks-access-panel *) { text-align: right !important; }

body.oks-a11y-pause * { animation: none !important; transition: none !important; }

/* Letter spacing */
body.oks-ls-1 *:not(.oks-access-panel *) { letter-spacing: 0.05em !important; }
body.oks-ls-2 *:not(.oks-access-panel *) { letter-spacing: 0.10em !important; }
body.oks-ls-3 *:not(.oks-access-panel *) { letter-spacing: 0.16em !important; }


/* Focus indicators — dashed hint shows active elements even without keyboard */
body.oks-a11y-focus a:not(.oks-access-opt):not(.oks-access-branding a),
body.oks-a11y-focus button:not(.oks-access-opt):not(.oks-access-close):not(.oks-access-reset):not(.oks-access-btn),
body.oks-a11y-focus input,
body.oks-a11y-focus select,
body.oks-a11y-focus textarea {
    outline: 2px dashed rgba(0, 95, 204, 0.45) !important;
    outline-offset: 2px !important;
}
body.oks-a11y-focus *:focus {
    outline: 3px solid #005fcc !important;
    outline-offset: 3px !important;
}
body.oks-a11y-focus *:focus-visible {
    outline: 3px solid #005fcc !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 6px rgba(0, 95, 204, 0.25) !important;
}
body.oks-a11y-contrast.oks-a11y-focus *:focus,
body.oks-a11y-contrast.oks-a11y-focus *:focus-visible {
    outline-color: #0ff !important;
    box-shadow: 0 0 0 6px rgba(0, 255, 255, 0.3) !important;
}
/* iOS Safari: reemplaza el flash azul nativo por el color del modo foco */
body.oks-a11y-focus a,
body.oks-a11y-focus button {
    -webkit-tap-highlight-color: rgba(0, 95, 204, 0.25);
}

/* Honour reduced-motion for the panel's own UI (transitions + hover transforms).
   Body-level effects (zoom, contrast, …) are intentionally left untouched. */
@media (prefers-reduced-motion: reduce) {
    .oks-access-btn, .oks-access-panel, .oks-access-close,
    .oks-preset, .oks-access-opt, .oks-access-reset { transition: none !important; }
    .oks-access-btn:hover { transform: scale(1) !important; }
    .oks-preset.is-flashing { transform: none !important; }
}

/* Cursor Grande — solo en dispositivos con ratón (no táctil) */
@media (pointer: fine) {
    body.oks-big-cursor, body.oks-big-cursor a, body.oks-big-cursor button {
        cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M4 2L4 18L8 14L11 21L14 19.5L11 13L15.5 13Z' stroke='white' stroke-width='4' stroke-linejoin='round' fill='white'/%3E%3Cpath d='M4 2L4 18L8 14L11 21L14 19.5L11 13L15.5 13Z' fill='black'/%3E%3C/svg%3E") 8 4, auto !important;
    }
}
/* Mobile panel: accessibility improvements for touch screens */
@media (max-width: 768px) {
    /* Hide cursor option — irrelevant on touch devices */
    [data-class="oks-big-cursor"] { display: none !important; }

    /* Orientation section has 3 buttons after cursor is hidden (odd count).
       Make the last one full-width to fill the gap. */
    [data-class="oks-a11y-focus"] { grid-column: span 2; }

    /* Larger touch targets (WCAG 2.5.5: minimum 44×44 px) */
    .oks-access-opt {
        min-height: 88px !important;
        padding: 14px 8px !important;
    }

    /* Larger icons and labels for readability on small screens */
    .oks-icon svg {
        width: 30px !important;
        height: 30px !important;
    }
    .oks-label {
        font-size: 12px !important;
        line-height: 1.3 !important;
    }

    /* More breathing room between buttons */
    .oks-access-grid { gap: 10px !important; }
    .oks-access-content { padding: 0 16px 24px !important; }

    /* Section titles more readable */
    .oks-access-title { font-size: 12px !important; margin: 14px 0 6px !important; }

    /* Reset button larger touch target */
    .oks-access-reset { padding: 14px !important; font-size: 14px !important; }
}

/* High contrast mode */
body.oks-a11y-contrast, body.oks-a11y-contrast *:not(.oks-access-panel):not(.oks-access-panel *) { 
    background-color: #000 !important; 
    color: #ff0 !important; 
    border-color: #ff0 !important; 
    text-shadow: none !important; 
    box-shadow: none !important; 
}
body.oks-a11y-contrast .oks-access-btn { background: #000 !important; border-color: #ff0 !important; }
body.oks-a11y-contrast .oks-access-btn svg { fill: #ff0 !important; }
body.oks-a11y-contrast #oks-reading-guide { background-color: transparent !important; border-top: 4px solid #f00 !important; border-bottom: 4px solid #f00 !important; }
body.oks-a11y-contrast img { filter: grayscale(100%) contrast(120%) !important; }
body.oks-a11y-contrast a:not(.oks-access-opt) { color: #0ff !important; text-decoration: underline !important; }

.oks-overlay-effect { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 999990; display: none; }
.oks-overlay-effect.is-active { display: block; backdrop-filter: grayscale(100%); }
.oks-reading-guide { position: fixed; left: 0; width: 100%; height: 50px; background: rgba(255, 255, 0, 0.2); border-top: 3px solid red; border-bottom: 3px solid red; pointer-events: none; z-index: 2147483647; display: none; transform: translateY(-50%); }
body.oks-a11y-guide .oks-reading-guide { display: block; }
#oks-overlay-gray.is-active ~ #oks-reading-guide { background: rgba(0, 0, 0, 0.07); border-top-color: #111; border-bottom-color: #111; }

/* Reading mask: dark overlay with a 180px-tall lit band tracking the cursor.
   --oks-mask-y is updated from JS (script.js mousemove handler). */
.oks-reading-mask {
    position: fixed; top: 0; left: 0;
    width: 100vw; height: 100vh;
    pointer-events: none;
    z-index: 2147483646;
    background: rgba(0, 0, 0, 0.75);
    display: none;
    clip-path: polygon(
        0 0, 100% 0,
        100% calc(var(--oks-mask-y, 50vh) - 90px),
        0    calc(var(--oks-mask-y, 50vh) - 90px),
        0    calc(var(--oks-mask-y, 50vh) + 90px),
        100% calc(var(--oks-mask-y, 50vh) + 90px),
        100% 100%, 0 100%
    );
}
body.oks-a11y-mask .oks-reading-mask { display: block; }
body.oks-a11y-contrast .oks-reading-mask { background-color: rgba(0, 0, 0, 0.85) !important; }

/* Big targets: bump interactive hit-areas to WCAG 2.5.5 (44x44 minimum).
   Only adjusts padding + min-* (never display), so layouts that rely on
   inline flow or grid placement survive. Exempts our own panel. */
body.oks-a11y-bigtargets a:not(.oks-access-opt):not(.oks-access-branding a):not(.oks-preset),
body.oks-a11y-bigtargets button:not(.oks-access-opt):not(.oks-access-close):not(.oks-access-reset):not(.oks-access-btn):not(.oks-preset),
body.oks-a11y-bigtargets [role="button"]:not(.oks-access-opt):not(.oks-preset),
body.oks-a11y-bigtargets input[type="checkbox"],
body.oks-a11y-bigtargets input[type="radio"],
body.oks-a11y-bigtargets summary {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 8px 12px !important;
    box-sizing: border-box !important;
}