/**
 * 2007-2025 PrestaForge
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License (AFL 3.0)
 * that is bundled with this package in the file LICENSE.txt.
 * It is also available through the world-wide-web at this URL:
 * https://www.prestaforge.com/license/afl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to hello@prestaforge.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade this module to newer
 * versions in the future. If you wish to customize this module for your
 * needs please refer to https://www.prestaforge.com for more information.
 *
 * @author    PrestaForge <hello@prestaforge.com>
 * @copyright 2007-2025 PrestaForge
 * @license   https://www.prestaforge.com/license/afl-3.0.php Academic Free License (AFL 3.0)
 * International Registered Trademark & Property of PrestaForge
 */

/* Modo daltónico */
.colorblind-mode * {
    filter: contrast(120%) brightness(110%);
}

/* Modo alto contraste */
.high-contrast, .high-contrast * {
    background-color: #000  !important;
    color: #fff !important;
}

.high-contrast #accessibility-menu button.selected {
    border: 2px solid var(--psp-secondary);
}

/* Estilo general del widget de accesibilidad */
#accessibility-widget {
    position: fixed;
    z-index: 9999;
    width: auto;
    height: auto;
    display: block;
    pointer-events: auto;
    overflow: visible;
    text-align: center;
    transform: scale(0.9);
    font-size: 0.9rem;
    bottom: 20px;
    right: 20px;
}

/* Posiciones por defecto (derecha y abajo) */
#accessibility-widget {
    right: 20px;
    bottom: 20px;
}

/* Posiciones horizontales */
#accessibility-widget.pos-left {
    left: 20px;
    right: auto;
}

#accessibility-widget.pos-right {
    right: 20px;
    left: auto;
}

/* Posiciones verticales */
#accessibility-widget.pos-top {
    top: 20px;
    bottom: auto;
}

#accessibility-widget.pos-center {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%) scale(0.9);
}

#accessibility-widget.pos-bottom {
    bottom: 20px;
    top: auto;
}

/* Estilo del botón de acceso */
#accessibility-toggle {
    background: transparent;
    border: none;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Estilo del icono dentro del botón */
#accessibility-toggle i {
    font-size: 24px;
    color: var(--psp-primary);
}

/* Estilo del menú de accesibilidad */
#accessibility-menu {
    position: absolute;
    bottom: 70px;
    right: 0;
    background: rgb(255 255 255 / 83%);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    padding: 15px;
    display: none;
    z-index: 9999;
    width: 220px;
}

/* Cuando el widget está en posición superior */
#accessibility-widget.pos-top #accessibility-menu {
    bottom: auto;
    top: 70px;
}

/* Ajuste del menú según posición horizontal */
#accessibility-widget.pos-left #accessibility-menu {
    right: auto;
    left: 0;
}

/* Estilo de los botones del menú */
#accessibility-menu button {
    display: block;
    margin: 10px auto;
    padding: 8px 10px;
    width: 85%;
    background-color: var(--psp-auxiliar);
    color: var(--psp-text);
    border: none;
    border-radius: 1px;
    cursor: pointer;
    text-align: center;
    font-size: 0.9rem;
}

#accessibility-menu button:hover {
    background: var(--psp-secondary);
}

/* Slider de colores */
#colorblind-menu {
    margin-top: 10px;
    display: none;
    text-align: center;
}

#color-slider {
    width: 90%;
    margin: 10px auto;
    height: 8px;
    border-radius: 5px;
    outline: none;
    background: linear-gradient(to right, red, yellow, green, cyan, blue, magenta, red);
    cursor: pointer;
}

#color-slider::-webkit-slider-thumb {
    appearance: none;
    width: 20px;
    height: 20px;
    background: var(--psp-text);
    border: 2px solid var(--psp-primary);
    border-radius: 50%;
    cursor: grab;
}

/* Botón de resetear colores */
#reset-colorblind {
    margin-top: 10px;
    padding: 10px 12px;
    border: none;
    border-radius: 5px;
    color: var(--psp-text);
    cursor: pointer;
    width: 90%;
}

/* Ajustes para el menú de cursor */
#toggle-cursor {
    padding: 10px 12px;
    background: var(--psp-primary);
    color: var(--psp-text);
    cursor: pointer;
    width: 90%;
    text-align: center;
    transition: background-color 0.3s ease;
}

#toggle-cursor:hover {
    background: var(--psp-secondary);
}

#cursor-menu {
    display: none;
    text-align: center;
}

#cursor-size-slider,
#cursor-color-slider {
    width: 100%;
    margin: 10px 0;
    height: 8px;
    border-radius: 5px;
    outline: none;
    cursor: pointer;
}

#cursor-size-slider::-webkit-slider-thumb,
#cursor-size-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: var(--psp-primary);
    border: 2px solid white;
    border-radius: 50%;
    cursor: grab;
}

#cursor-color-slider {
    height: 40px;
    background: transparent;
}

/* Botón de resetear cursor */
#reset-cursor {
    margin-top: 10px;
    padding: 10px 12px;
    width: 90%;
    border: none;
    border-radius: 5px;
    color: var(--psp-text);
    cursor: pointer;
    text-align: center;
    transition: background-color 0.3s ease;
}

/* Ajuste para el menú de lectura */
#speech-menu {
    margin-top: 10px;
    padding: 15px;
    display: none;
    text-align: center;
    position: relative;
}

#volume-slider,
#rate-slider {
    width: 100%;
    margin: 10px 0;
    height: 8px;
    border-radius: 5px;
    outline: none;
    cursor: pointer;
    background: linear-gradient(to right, var(--psp-primary), var(--psp-secondary));
}

#toggle-speech {
    padding: 10px 12px;
    background: var(--psp-primary);
    color: var(--psp-text);
    cursor: pointer;
    width: 90%;
    text-align: center;
    transition: background-color 0.3s ease;
}

#toggle-speech:hover {
    background: var(--psp-secondary);
}

#voice-select {
    width: 100%;
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #ccc;
    background: white;
    cursor: pointer;
}

/* Switch de lector de pantalla */
#speech-switch {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#speech-switch label {
    font-size: 14px;
    color: #333;
    margin-bottom: 8px;
}

#speech-switch input[type="checkbox"] {
    width: 50px;
    height: 25px;
    appearance: none;
    background-color: #ddd;
    border-radius: 50px;
    position: relative;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-bottom: 10px;
}

#speech-switch input[type="checkbox"]:checked {
    background-color: var(--psp-primary);
}

#speech-switch input[type="checkbox"]:before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 21px;
    height: 21px;
    background-color: white;
    border-radius: 50%;
    transition: left 0.3s ease;
}

#speech-switch input[type="checkbox"]:checked:before {
    left: 27px;
}

/* Ajuste de los botones generales */
#accessibility-menu button,
#toggle-cursor,
#reset-cursor,
#reset-colorblind,
#toggle-speech {
    font-size: 0.9rem;
    padding: 8px 10px;
    width: 85%;
}

/* Estilo para la clase "selected" */
#accessibility-menu button.selected {
    background-color: var(--psp-secondary);
    color: var(--psp-text);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

#accessibility-menu button.selected:hover {
    background-color: var(--psp-secondary);
}

/* Ajuste del contenedor de fuente */
#accessibility-menu .font-slider-container {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Asegura distribución equilibrada */
    gap: 5px;
    flex-wrap: nowrap; /* Evita que los elementos se vayan a otra línea */
}

/* Ajuste del slider */
#font-slider {
    flex-grow: 1; 
    min-width: 50px; /* Evita que se encoja demasiado */
    max-width: 120px; /* Controla el crecimiento */
}

#accessibility-menu #decrease-font,
#accessibility-menu #increase-font
{
    background-color: var(--psp-secondary);
}

/* Ajuste de los botones */
#accessibility-menu .font-slider-container button {
    flex-shrink: 0; /* Evita que los botones se reduzcan */
    width: 30px; /* Tamaño fijo para evitar desbordes */
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

#accessibility-menu .reset-btn {
    background-color: var(--psp-secondary);
}

.cursor-color-buttons {
    display: flex;
    justify-content: center;
    gap: 10px; /* Espacio entre botones */
    margin: 10px 0;
}

.cursor-color-buttons button {
    flex: 1; /* Hace que los botones ocupen el espacio disponible */
    min-width: 0; /* Permite que los botones se ajusten correctamente */
    padding: 8px 5px; /* Ajusta el padding para pantallas pequeñas */
    white-space: nowrap; /* Evita que el texto se divida en varias líneas */
}

.cursor-color-btn {
    font-size: 0.8rem; /* Reduce ligeramente el tamaño de fuente */
    padding: 5px 8px; /* Padding más ajustado */
}

/* Cursor normal para todo el body */
.cursor-custom-white {
    cursor: url('/modules/pspaccesibility/views/img/psp_accesibility_cursor_white.cur'), auto !important;
}

.cursor-custom-black {
    cursor: url('/modules/pspaccesibility/views/img/psp_accesibility_cursor_black.cur'), auto !important;
}

/* Cursor especial para elementos interactivos */
.cursor-custom-white a,
.cursor-custom-white button,
.cursor-custom-white input[type="button"],
.cursor-custom-white input[type="submit"],
.cursor-custom-white [role="button"],
.cursor-custom-white [onclick],
.cursor-custom-white [tabindex="0"],
.cursor-custom-white label[for] {
    cursor: url('/modules/pspaccesibility/views/img/psp_accesibility_hand_white.cur'), pointer !important;
}

.cursor-custom-black a,
.cursor-custom-black button,
.cursor-custom-black input[type="button"],
.cursor-custom-black input[type="submit"],
.cursor-custom-black [role="button"],
.cursor-custom-black [onclick],
.cursor-custom-black [tabindex="0"],
.cursor-custom-black label[for] {
    cursor: url('/modules/pspaccesibility/views/img/psp_accesibility_hand_black.cur'), pointer !important;
}

/* Ajustes para pantallas pequeñas */
@media (max-width: 768px) {
    #accessibility-widget {
        margin: 10px;
    }
    
    /* Posición izquierda en móvil */
    #accessibility-widget.pos-left {
        left: 10px;
        right: auto;
    }
    
    /* Posición derecha en móvil */
    #accessibility-widget.pos-right {
        right: 10px;
        left: auto;
    }
    
    /* Ajuste del menú para posición izquierda */
    #accessibility-widget.pos-left #accessibility-menu {
        left: 0;
        right: auto;
        width: calc(100vw - 20px);
    }
    
    /* Ajuste del menú para posición derecha */
    #accessibility-widget.pos-right #accessibility-menu {
        right: 0;
        left: auto;
        width: calc(100vw - 20px);
    }
}