/**
 * accessibility-ux.css
 *
 * Estilos para los controles de accesibilidad y sus efectos.
 * Incluye corrección de solapamiento con la barra de acciones móvil.
 * Estilos desligados de clases de utilidad de Bootstrap para el contenedor principal.
 * Panel posicionado a la izquierda.
 * ACTUALIZADO: Añadidos dos niveles más de tamaño de texto (xxl, xxxl).
 *
 * @version 1.1.0
 * @date 2025-06-05
 * @author Baxahaun
 * // PEV_REF: TAREA_A11yMoreTextSizes
 */

/* --- Contenedor de los Botones Individuales de Accesibilidad --- */
#accessibility-controls-container {
    /* Posicionamiento y Dimensiones - Ahora controlados aquí y por JS */
    position: fixed;
    left: 15px; /* Cambiado de right a left */
    /* 'bottom' es gestionado dinámicamente por JS */
    width: auto; /* Para que se ajuste al contenido */
    height: auto; /* Para que se ajuste al contenido */
    z-index: 1040;

    /* Layout Interno */
    display: flex;
    flex-direction: column;
    gap: 0.5rem;

    /* Apariencia */
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;

    /* Comportamiento de Puntero */
    pointer-events: none;

    /* Transiciones */
    transition: bottom 0.3s ease-in-out;
}

/* Estilos para los botones DENTRO del panel de accesibilidad */
body #accessibility-controls-container .btn-a11y-control {
    /* Apariencia y Dimensiones */
    width: var(--mobile-action-button-size, 38px) !important;
    height: var(--mobile-action-button-size, 38px) !important;
    padding: 0 !important;
    border-radius: 50% !important;

    /* Estilos por defecto (antes del hover/focus) */
    border: 2px solid var(--bs-secondary) !important;
    background-color: var(--bs-body-bg) !important;
    color: var(--bs-secondary) !important;
    box-shadow: var(--bs-box-shadow-sm) !important;

    /* Flexbox y Alineación */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    /* Comportamiento y Texto */
    line-height: 1 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    pointer-events: auto !important;

    /* Transiciones */
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, transform 0.15s ease-out, box-shadow 0.2s ease-in-out !important;

    position: relative !important;
    overflow: hidden !important;
    z-index: 1 !important;
}

body #accessibility-controls-container .btn-a11y-control .material-symbols-filled { /* Actualizado selector */
    font-size: var(--mobile-action-button-icon-size, 1rem) !important;
    line-height: 1 !important;
    vertical-align: baseline !important;
    color: inherit !important;
    position: relative !important;
    z-index: 2 !important;
    display: inline-flex; /* Para centrar el icono de fuente */
    align-items: center;
    justify-content: center;
}

/* Efecto hover con pseudo-elemento ::before para el fondo */
body #accessibility-controls-container .btn-a11y-control::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 0 !important;
    height: 100% !important;
    background-color: var(--bs-secondary) !important;
    transition: width var(--btn-hover-duration, 0.4s) ease-out !important;
    z-index: -1 !important;
    border-radius: inherit !important;
}

body #accessibility-controls-container .btn-a11y-control:hover,
body #accessibility-controls-container .btn-a11y-control:focus,
body #accessibility-controls-container .btn-a11y-control.active {
    color: var(--bs-white) !important;
    border-color: var(--bs-secondary) !important;
    transform: scale(1.05) !important;
    box-shadow: var(--bs-box-shadow) !important;
}

body #accessibility-controls-container .btn-a11y-control:hover::before,
body #accessibility-controls-container .btn-a11y-control:focus::before,
body #accessibility-controls-container .btn-a11y-control.active::before {
    width: 100% !important;
}

body #accessibility-controls-container .btn-a11y-control:focus-visible {
    outline: 2px solid rgba(var(--bs-secondary-rgb), 0.5) !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
    transform: none !important;
}

body #accessibility-controls-container .btn-a11y-control:disabled,
body #accessibility-controls-container .btn-a11y-control.disabled {
    color: var(--bs-secondary-color) !important;
    border-color: var(--bs-secondary-color) !important;
    background-color: var(--bs-tertiary-bg) !important;
    opacity: 0.65 !important;
    pointer-events: none !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}
body #accessibility-controls-container .btn-a11y-control:disabled::before,
body #accessibility-controls-container .btn-a11y-control.disabled::before {
    width: 0 !important;
}


/* --- Clases de Efectos de Accesibilidad (aplicadas al body) --- */

/* Clases de Tamaño de Texto */
body.text-size-lg {
    --bs-body-font-size: var(--a11y-font-size-lg, 1.15rem);
    --bs-body-line-height: var(--a11y-line-height-lg, 1.7);
    font-size: var(--bs-body-font-size) !important;
    line-height: var(--bs-body-line-height) !important;
}

body.text-size-xl {
    --bs-body-font-size: var(--a11y-font-size-xl, 1.3rem);
    --bs-body-line-height: var(--a11y-line-height-xl, 1.8);
    font-size: var(--bs-body-font-size) !important;
    line-height: var(--bs-body-line-height) !important;
}

/* NUEVOS TAMAÑOS DE TEXTO */
body.text-size-xxl {
    --bs-body-font-size: var(--a11y-font-size-xxl, 1.45rem);
    --bs-body-line-height: var(--a11y-line-height-xxl, 1.85);
    font-size: var(--bs-body-font-size) !important;
    line-height: var(--bs-body-line-height) !important;
}

body.text-size-xxxl {
    --bs-body-font-size: var(--a11y-font-size-xxxl, 1.6rem);
    --bs-body-line-height: var(--a11y-line-height-xxxl, 1.9);
    font-size: var(--bs-body-font-size) !important;
    line-height: var(--bs-body-line-height) !important;
}

/* Ajustes específicos para elementos cuando el tamaño de texto aumenta */
/* Aplicar a todos los niveles de aumento */
body.text-size-lg h1, body.text-size-xl h1, body.text-size-xxl h1, body.text-size-xxxl h1,
body.text-size-lg .h1, body.text-size-xl .h1, body.text-size-xxl .h1, body.text-size-xxxl .h1 {
    font-size: calc(var(--bs-body-font-size) * 1.6) !important;
    line-height: 1.2;
}
body.text-size-lg h2, body.text-size-xl h2, body.text-size-xxl h2, body.text-size-xxxl h2,
body.text-size-lg .h2, body.text-size-xl .h2, body.text-size-xxl .h2, body.text-size-xxxl .h2 {
    font-size: calc(var(--bs-body-font-size) * 1.4) !important;
    line-height: 1.25;
}
body.text-size-lg h3, body.text-size-xl h3, body.text-size-xxl h3, body.text-size-xxxl h3,
body.text-size-lg .h3, body.text-size-xl .h3, body.text-size-xxl .h3, body.text-size-xxxl .h3 {
    font-size: calc(var(--bs-body-font-size) * 1.25) !important;
    line-height: 1.3;
}