/* --- styles/style-theme.css --- */

:root {
    --scroll-behavior: smooth !important;
    --transition-speed: 0.5s;
    --animation-speed: 0.3s;
    --opacity: 0.3;

    --border-radius: 12px;
    --sm-border-radius: 6px;
    --border-width-focus: 4px;
    --border-width-no-focus: 2px;
    --scrollbar-gap: 8px;

    --zoom-focus-major: 0.2;
    --zoom-focus-minnor: 0.02;

    /* 🟢 Variables para Sombras Dinámicas (derivadas o fijas) */
    --shadow-spread-sm: 10px;
    --shadow-spread-md: 15px;
    --shadow-spread-lg: 25px;

    /* 📐 VARIABLES ESTRUCTURALES BASE */
    --card-gap: 1.5vmin;
    --card-padding: 1vmin;
    --mobile-card-padding: 0.5vmin;

    --nav-desktop-height: 100%; 
    --nav-carousel-top-offset: 2vmin;
    --app-container-min-height: calc(100dvh 
                                    - var(--header-height-real, 50px) 
                                    - var(--footer-height-real));

    --font-dyslexic: 'OpenDyslexic', 'Lexend', system-ui, sans-serif !important; 
    --font-serif: 'Georgia', 'Times New Roman', serif;
    --font-atkinson: 'Atkinson Hyperlegible', system-ui, sans-serif !important;

    /* Tipografía Dinámica */
    --font-family-base: var(--font-atkinson); 
    
    --font-scale: 1;
    --line-height-base: 1.5;
    --paragraph-spacing: 1.5em;

    --letter-spacing-base: 0em;
    --word-spacing-base: 0em;

    /* 🟢 1. TALLA MAESTRA AAA PARA TODOS LOS ICONOS (Header y Footer) */
    /* Como el 'rem' ya escala con el html, usamos rem puro. Mínimo 44px, ideal 2.5rem, máximo 80px */
    --ui-icon-size: clamp(44px, 6vmin, 55px);
    --ui-icon-size-mobile: clamp(44px, 8vmin, 50px);
    --menu-gap: 4px;

    /* 65% del icono, luego reducido al 75% para mejor legibilidad */
    --menu-lang-font-size: clamp(16px, 3vmin, 27px); 

    /* 📐 HEADER (Valores por defecto / Desktop) */
    --header-height: max(1rem, 
                        calc((1rem + 1vmin) * var(--font-scale)));
    --header-gap: 4px;
    --mobile-header-gap: 2px;

    --header-title-size: max(1rem, calc((1rem + 1vmin) * var(--font-scale)));
    --header-logo-size: var(--ui-icon-size);
    --header-icon-size: var(--ui-icon-size);
    --header-obras-size: calc(var(--ui-icon-size) * 0.85);
    --header-lang-font-size: max(0.9rem, calc(1.5vmin * var(--font-scale)));
    
    --header-line-clamp: unset;
    --mobile-header-line-clamp: 2;
    --sm-header-line-clamp: 1;

    /* 📐 FOOTER (Valores por defecto / Desktop) */
    --footer-min-height: 16px;
    --footer-max-height: 32px;

    --footer-font-size: max(0.8rem, calc(1.5vmin * var(--font-scale)));
    --footer-padding: clamp(2px, 1vmin, 5px);
    --footer-small-gap: clamp(5px, 2vw, 15px);

    /* 📐 VARIABLES DE TARJETAS (CARDS) */
    --card-title-font-size: max(0.9rem, calc(1rem * var(--font-scale)));
    --card-desc-font-size: max(0.8rem, calc(0.9rem * var(--font-scale)));
    --card-line-clamp: 4;
    --mobile-card-line-clamp: 3;
    --card-icon-size: 1.5rem;
    --mobile-card-icon: 1.2em;

    /* Nivel Actual */
    --card-nivel-actual-line-clamp: 4;
    --card-nivel-actual-font-size: max(0.9rem, calc(0.8rem * var(--font-scale)));
    
    /* Breadcrumb Vertical */
    --card-breadcrump-line-clamp: 5;

    --card-breadcrump-vertical-font-size: max(1rem, calc(0.9rem * var(--font-scale)));
    --card-breadcrump-vertical-line-clamp: 2;
    --card-breadcrump-vertical-margin-bottom: clamp(1px, 3.5vmin, 10px);

    /* Botón Volver Fijo */
    --card-volver-fija-font-size: max(1rem, calc(0.8rem * var(--font-scale))); 

    /* Info Adicional */
    --info-adicional-summary-font-size: max(0.9rem, calc(0.8rem * var(--font-scale))); 
    --info-adicional-details-small-font-size: max(0.85rem, calc(0.75rem * var(--font-scale)));

    /* 📐 A11Y Modal */
    --a11y-title-font-size: max(1.1rem, calc((1rem + 1vmin) * var(--font-scale)));
    --a11y-section-font-size: max(0.9rem, calc((0.8rem + 0.5vmin) * var(--font-scale)));

    --a11y-range-icon-small-font: max(0.8rem, calc(0.8rem * var(--font-scale)));
    --a11y-range-icon-large-font: max(1.2rem, calc(1.2rem * var(--font-scale)));
    --a11y-range-value-font-size: max(0.9rem, calc(0.9rem * var(--font-scale)));

    --a11y-option-btn-font-size: max(0.8rem, calc((0.75rem + 0.5vmin) * var(--font-scale)));

    --a11y-close-btn-font-size: max(1.2rem, calc((1rem + 1vmin) * var(--font-scale)));
    --a11y-close-btn-size: max(44px, calc(5vmin * var(--font-scale)));

    --a11y-gap: 20px;
    --a11y-padding: 25px;                       /* Padding interno del modal */

    /* Margen bajo el título */
    --a11y-header-margin: calc(20px * (var(--paragraph-spacing) / 1.5em));
    /* Margen entre secciones */
    --a11y-section-margin: calc(25px * (var(--paragraph-spacing) / 1.5em));

    --a11y-controls-gap: 10px;                  /* Hueco entre botones */
    --a11y-btn-padding: 10px;                   /* Relleno botones opciones */
    --a11y-slider-height: 6px;                  /* Grosor línea slider */

    /* 📐 VISTA DE DETALLES */
    --details-text-fragment-font-size: max(0.8rem, calc(0.9rem * var(--font-scale)));
    --details-title-slide-font-size: max(1rem, calc(1.1rem * var(--font-scale)));

    --detail-vertical-spacing: calc(0.5rem * var(--line-height-base, 1.5));

    --details-action-btn-font-size: max(0.75rem, calc(0.9rem * var(--font-scale))); 
    --details-action-text-font-size: max(0.75rem, calc(0.9rem * var(--font-scale)));
    --details-volver-btn-font-size: max(0.8rem, calc(1rem * var(--font-scale)));
}

/* Aplicación de las variables al documento */
html {
    /* Esto escala todo el rem de la aplicación */
    font-size: calc(100% * var(--font-scale)); 
    font-weight: 450;
}

body {
    font-family: var(--font-family-base);
    line-height: var(--line-height-base);
}

/* --- styles/style-theme.css --- */