/* --- Boton y desplegable de accesibilidad --- */
.btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid #2a90d0;
    background-color: transparent;
    color: #2a90d0;
    cursor: pointer;
    transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
    padding: 0;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    -webkit-appearance: none;
    user-select: none;
    -webkit-user-select: none;
}

    .btn-icon:hover {
        background-color: #f0f8ff;
        transform: scale(1.05);
    }

    /* Estado abierto: rotación + fondo azul */
    .btn-icon.open {
        transform: rotate(90deg);
        background-color: #2a90d0;
        color: #fff;
        border-color: #2a90d0;
    }

        .btn-icon.open:hover {
            transform: rotate(90deg) scale(1.05);
            background-color: #1a6fa8;
        }

    /* Ocultar/mostrar iconos según estado */
    .btn-icon .icon-access-svg {
        display: block;
        transition: opacity 0.2s ease;
    }

    .btn-icon .icon-close-svg-access {
        display: none;
        transition: opacity 0.2s ease;
    }

    .btn-icon.open .icon-access-svg {
        display: none;
    }

    .btn-icon.open .icon-close-svg-access {
        display: block;
    }

    .btn-icon:focus-visible {
        outline: 2px solid #2a90d0;
        outline-offset: 2px;
    }

.access-dropdown {
    position: absolute;
    right: 0;
    top: 56px;
    background: #fff;
    border: 2px solid #1a6fa8;
    padding: 16px;
    z-index: 10000;
    width: 290px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.10);
    border-radius: 12px;
    animation: accessSlideDown 0.2s ease;
}

.access-title {
    margin: 0 0 14px;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #1a6fa8;
    text-align: center;
    padding-bottom: 12px;
    border-bottom: 1px solid #eef1f5;
}

.access-section {
    margin-bottom: 14px;
}

.access-section-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: #000;
    margin-bottom: 7px;
    padding-left: 2px;
}

.access-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

    .access-grid > .accesibility-option:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

.access-dropdown .accesibility-option {
    padding: 9px 6px;
    background: #f7f9fc;
    border: 1px solid #e3e8ee;
    border-radius: 7px;
    cursor: pointer;
    font-size: 12px;
    color: #444;
    text-align: center;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    line-height: 1.35;
    width: 100%;
}

    .access-dropdown .accesibility-option:hover {
        background: #e8f4fd;
        border-color: #2a90d0;
        color: #1a6fa8;
    }

    .access-dropdown .accesibility-option.is-active {
        background: #ddf0ff;
        border: 3px solid #2a90d0;
        color: #1a6fa8;
        font-weight: 600;
    }

.access-hr {
    border: none;
    border-top: 1px solid #eef1f5;
    margin: 4px 0 12px;
}

.access-dropdown .accesibility-restart {
    width: 100%;
    padding: 9px;
    background: #fff;
    border: 1px solid #f0b8b8;
    border-radius: 7px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    color: #c0392b;
    text-align: center;
    transition: background 0.15s, border-color 0.15s;
}

    .access-dropdown .accesibility-restart:hover {
        background: #fff5f5;
        border-color: #e22626;
    }

@media (max-width: 480px) {
    .access-container {
        position: static !important;
    }

    .access-dropdown {
        position: absolute;
        top: 100%;
        left: 16px;
        right: 16px;
        width: auto;
        max-height: calc(100vh - 91px);
        overflow-y: auto;
        margin-top: 4px;
    }

    .access-grid {
        grid-template-columns: 1fr;
    }

        .access-grid > .accesibility-option:last-child:nth-child(odd) {
            grid-column: auto;
        }

    #utilities-section {
        display: none;
    }
}


@keyframes accessSlideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Filtros de accesibilidad --- */

body.inverted #page-wrapper {
    filter: invert(1);
    background-color: #000 !important;
}

body.inverted .floating-ai-icon,
body.inverted #whatsappFloating,
body.inverted .mobile-menu-window {
    filter: invert(1);
}

body.grayscale #page-wrapper {
    filter: grayscale(100%);
}

body.grayscale .floating-ai-icon,
body.grayscale #whatsappFloating,
body.grayscale .mobile-menu-window {
    filter: grayscale(100%);
}

body.large-text {
    font-size: 125% !important;
}

body.highlight-links a {
    outline: 2px solid #ff0000 !important;
    background-color: yellow !important;
    color: black !important;
}

body.stop-animations * {
    animation: none !important;
    transition: none !important;
}

#reading-guide {
    position: fixed;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: red;
    z-index: 99999;
    pointer-events: none;
    display: none;
}

/* Clase de Contraste Blanco */
body.white-contrast {
    background-color: #ffffff !important;
    color: #000000 !important;
}

    body.white-contrast *:not(.btn-icon):not(.access-dropdown):not(.floating-whatsapp-container):not(.floating-whatsapp-container *)
    :not(.sidebar-overlay):not(.range-fill):not(.navicon) {
        background-color: #ffffff !important;
        color: #000000 !important;
        border-color: #000000 !important;
        box-shadow: none !important;
        accent-color: #000;
    }

    body.white-contrast .range-fill {
        background: #000;
    }

    body.white-contrast .mobile-menu-window {
        border-color: #000;
    }

    body.white-contrast #scrollToTopBtn,
    body.white-contrast .custom-range-bar{
        border: 1px solid #000000 !important;
    }

    body.white-contrast .btn-icon {
        border-color: #000000;
    }
        body.white-contrast .btn-icon:hover {
            background: #fff;
        }
        body.white-contrast .btn-icon.open,
        body.white-contrast .btn-icon.open .icon-close-svg-access {
            background: #fff;
            stroke: currentColor;
        }

    body.white-contrast .icon-close-svg-access

    body.white-contrast a {
        color: #0000ff !important;
        text-decoration: underline !important;
    }

    body.white-contrast .floating-whatsapp-icon {
        background-color: #25d366 !important;
        border: 2px solid #000 !important;
    }

        body.white-contrast .floating-whatsapp-icon svg {
            fill: #ffffff !important;
            stroke: #ffffff !important;
        }

    body.white-contrast .whatsapp-card {
        background-color: #ffffff !important;
        color: #000000 !important;
        border: 1px solid #000000 !important;
        margin-bottom: 5px;
    }

    body.white-contrast .floating-whatsapp-icon,
    body.white-contrast .icon-whatsapp,
    body.white-contrast .whatsapp-dropdown,
    body.white-contrast .whatsapp-card {
        background-color: #ffffff !important;
        background: #ffffff !important;
        color: #000000 !important;
        border-color: #000;
    }

        body.white-contrast .floating-whatsapp-icon svg,
        body.white-contrast .whatsapp-card svg,
        body.white-contrast .icon-whatsapp-svg,
        body.white-contrast .icon-close-svg {
            fill: #000000 !important;
            stroke: #000000 !important;
        }

    body.white-contrast .whatsapp-text strong,
    body.white-contrast .whatsapp-text span {
        color: #000000 !important;
    }

/* --- Cursores de accesibilidad --- */

body.cursor-dark,
body.cursor-dark a,
body.cursor-dark input,
body.cursor-dark select,
body.cursor-dark textarea,
body.cursor-dark .btn {
    cursor: url("data:image/svg+xml,%3Csvg fill='%23000000' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' stroke='%23ffffff' stroke-width='1.25' width='64' height='64'%3E%3Cpath d='M10.86 11.995l2.525 6.08L11.17 19l-2.525-6.05L5 16.625V1.1l10.946 10.888-5.086.006z' /%3E%3C/svg%3E") 12 3, auto !important;
}

    body.cursor-dark a,
    body.cursor-dark button,
    body.cursor-dark input[type="button"],
    body.cursor-dark input[type="submit"],
    body.cursor-dark .btn,
    body.cursor-dark .btn-icon,
    body.cursor-dark select {
        cursor: url("data:image/svg+xml,%3Csvg viewBox='0 0 194.17831 262.51724' width='64' height='64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill:%23000000;stroke:%23ffffff;stroke-width:18;stroke-dasharray:none;' d='M 69.075322,271.7506 H 166.98577 L 195.51381,159.8303 A 26.28975,26.28975 62.513783 0 0 179.34324,128.74866 L 92.122078,95.742497 V 32.547311 c 0,-10.969399 -10.122879,-15.848965 -18.156468,-15.848965 -8.033589,0 -18.156468,4.844035 -18.156468,15.848965 V 148.88211 L 16.484703,124.62293 a 4.5016344,4.5016344 150.84413 0 0 -6.8651347,3.82986 l -0.00429,13.73569 a 59.367377,59.367377 76.350331 0 0 6.6206869,27.2632 z' /%3E%3C/svg%3E") 28 5, pointer !important;
    }

body.cursor-white,
body.cursor-white a,
body.cursor-white input,
body.cursor-white select,
body.cursor-white textarea,
body.cursor-white .btn {
    cursor: url("data:image/svg+xml,%3Csvg fill='%23ffffff' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' stroke='%23000000' stroke-width='1.25' width='64' height='64'%3E%3Cpath d='M10.86 11.995l2.525 6.08L11.17 19l-2.525-6.05L5 16.625V1.1l10.946 10.888-5.086.006z' /%3E%3C/svg%3E") 12 3, auto !important;
}

    body.cursor-white a,
    body.cursor-white button,
    body.cursor-white input[type="button"],
    body.cursor-white input[type="submit"],
    body.cursor-white .btn,
    body.cursor-white .btn-icon,
    body.cursor-white select {
        cursor: url("data:image/svg+xml,%3Csvg viewBox='0 0 194.17831 262.51724' width='64' height='64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill:%23ffffff;stroke:%23000000;stroke-width:18;stroke-dasharray:none;' d='M 69.075322,271.7506 H 166.98577 L 195.51381,159.8303 A 26.28975,26.28975 62.513783 0 0 179.34324,128.74866 L 92.122078,95.742497 V 32.547311 c 0,-10.969399 -10.122879,-15.848965 -18.156468,-15.848965 -8.033589,0 -18.156468,4.844035 -18.156468,15.848965 V 148.88211 L 16.484703,124.62293 a 4.5016344,4.5016344 150.84413 0 0 -6.8651347,3.82986 l -0.00429,13.73569 a 59.367377,59.367377 76.350331 0 0 6.6206869,27.2632 z' /%3E%3C/svg%3E") 28 5, pointer !important;
    }
