/* ==========================================================================
   UROK.CSS — Main Stylesheet
   ==========================================================================
   INDEX:
   1.  Variables Light
   2.  Variables Dark
   3.  Reset & Base
   4.  Typography
   5.  Lesson Header
   6.  Shared Sections Styles
   7.  Theory
   8.  Tables
   9.  Phrases
   10. Highlights & States
   11. Footer
   12. Nav Mobile
   13. Nav Desktop
   14. Nav Modal
   15. Exercises
   16. Test
   17. Test Perfect Modal
   18. Reading
   19. Dialogue
   20. Audio
   21. Help Panel
   22. Modal Content
   23. Keyboard & Guide
   24. Text Utilities
   25. Theme Toggle
   26. Animations
   27. Accessibility & Touch
   28. Review & Motivation
   29. Modal Block
   30. Modal Payment
   31. Progress Bar
   32. Shpora
   33. Slovar
   34. Urok 50 - Examen
   35. Dark Mode
   36. Dashboard
   37. Pronunciación móvil
   ========================================================================== */

/* ==========================================================================
   1. VARIABLES LIGHT
   ========================================================================== */

:root {
    /* --- Colores Base --------------------------------------------------- */
    
    /* Crema / Теория */
    --cream-50: #fdfbf7;
    --cream-100: #f9f6f0;
    --cream-200: #f5f0e6;
    --cream-300: #ebe4d4;
    --cream-text: #5a503f;
    --cream-text-deep: #43392a;
    --cream-alpha-15: rgba(122, 108, 85, 0.15);

     /* Frases */
    --phrases-bg: #f5ebe0;
    --phrases-header: #eeddca;

    
    /* Verdes */
    --green-50: #E8F5E9;
    --green-100: #c8e6c9;
    --green-200: #a5d6a7;
    --green-300: #81c784;
    --green-400: #66bb6a;
    --green-500: #4caf50;
    --green-600: #43a047;
    --green-700: #2e7d32;
    --green-800: #1b5e20;
    
    /* Rosas/Magenta */
    --pink-50: #fce4ec;
    --pink-100: #ffe8ec;
    --pink-200: #ffe8e8;
    --pink-300: #fddfdf;
    --pink-400: #ffd7d7;
    --pink-500: #ffcdd2;
    --pink-600: #ffc9c9;
    --pink-700: #ffe0e0;
    --pink-800: #fff5f5;
    --pink-900: #880e4f;
    
    /* Rojos */
    --red-50: #fff5f5;
    --red-100: #ffcdd2;
    --red-200: #f8d7da;
    --red-300: #ef9a9a;
    --red-400: #e57373;
    --red-450: #F97316;
    --red-600: #f02a41;
    --red-700: #721c24;
    
    /* Amarillos */
    --yellow-50: #fffde7;
    --yellow-100: #fff9c4;
    --yellow-150: #fff3a0;
    --yellow-200: #fef9c3;
    --yellow-300: #ffe082;
    --yellow-400: #FF9800;
    --yellow-500: #a16207;
    
    /* Azules */
    --blue-50: #f0f9ff;
    --blue-100: #e0f2fe;
    --blue-200: #f0f7ff;
    --blue-250: #e5efff;
    --blue-300: #dbe8ff;
    --blue-400: #2196F3;
    --blue-700: #0369a1;
    
    /* Neutros */
    --neutral-white: #ffffff;
    --neutral-50: #fafafa;
    --neutral-100: #f8f9fa;
    --neutral-150: #f5f5f5;
    --neutral-200: #f3f4f6;
    --neutral-300: #f0f0f0;
    --neutral-400: #e0e0e0;
    --neutral-450: #eeeeee;
    --neutral-500: #dddddd;
    --neutral-550: #cccccc;
    --neutral-600: #999;
    --neutral-650: #888;
    --neutral-700: #7f8c8d;
    --neutral-750: #777;
    --neutral-800: #555555;
    --neutral-850: #444;
    --neutral-900: #1b1814;
    
    /* --- Colores Semánticos --------------------------------------------- */
    
    --color-text: var(--neutral-900);
    --color-bg: var(--neutral-100);
    --color-white: var(--neutral-white);
    --color-gray: var(--neutral-800);
    --color-red: var(--red-600);
    
    --color-success: var(--green-500);
    --color-success-light: var(--green-50);
    --color-success-dark: var(--green-700);
    --color-error: var(--red-600);
    --color-error-light: var(--red-200);
    --color-error-dark: var(--red-700);
    --color-warning: var(--yellow-300);
    --color-warning-light: var(--yellow-100);
    --color-info: var(--blue-400);
    --color-info-light: var(--blue-100);
    
    --color-test: var(--pink-900);
    --color-test-light: var(--pink-800);
    --color-test-bg: var(--pink-200);
    
    /* --- Gradientes ----------------------------------------------------- */
    
    --secondary: linear-gradient(135deg, var(--green-300) 0%, var(--cream-300) 100%);
    --section: linear-gradient(90deg, var(--green-300) 0%, var(--cream-300) 100%);
    --exercise: var(--green-50);
    --test: linear-gradient(135deg, var(--yellow-100) 0%, var(--yellow-300) 100%);
    --feature: var(--test);
    --gradient-green-light: var(--green-100);
    --gradient-green-primary: linear-gradient(135deg, var(--green-400) 0%, var(--green-500) 100%);
    --gradient-green-medium: linear-gradient(135deg, var(--green-300) 0%, var(--green-400) 100%);
    --gradient-green-dark: linear-gradient(135deg, var(--green-500) 0%, var(--green-600) 100%);
    --gradient-red-primary: linear-gradient(135deg, var(--red-300) 0%, var(--red-400) 100%);
    --gradient-red-light: linear-gradient(135deg, var(--red-100) 0%, var(--red-300) 100%);
    --red-350: #ef5350;
    --red-500: #e53935;
    --red-550: #d32f2f;
    --gradient-red-strong: linear-gradient(135deg, var(--red-500) 0%, var(--red-550) 100%);
    --gradient-red-strong-hover: linear-gradient(135deg, var(--red-350) 0%, var(--red-500) 100%);
    --gradient-white-green: linear-gradient(135deg, var(--neutral-white) 0%, var(--green-50) 100%);
    
    /* --- Espaciados ----------------------------------------------------- */
    
    --spacing-xs: 0.375rem;
    --spacing-sm: 0.75rem;
    --spacing-md: 1.125rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2.25rem;
    --spacing-xxl: 3rem;
    
    /* --- Border Radius -------------------------------------------------- */
    
    --radius-sm: 0.375rem;
    --radius-base: 0.5rem;
    --radius-md: 0.625rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-circle: 50%;
    --radius-float: 0.45rem;
    
    /* --- Sombras -------------------------------------------------------- */
    
    --shadow-sm: 0 0.125rem 0.5rem rgba(0,0,0,0.08);
    --shadow-md: 0 0.25rem 1rem rgba(0,0,0,0.12);
    --shadow-lg: 0 0.375rem 1.5rem rgba(0,0,0,0.16);
    --shadow-xl: 0 0.5rem 2rem rgba(0,0,0,0.2);
    --shadow-sm-color: rgba(0,0,0,0.1);
    --shadow-md-color: rgba(0,0,0,0.15);
    --shadow-lg-color: rgba(0,0,0,0.2);
    --shadow-xl-color: rgba(0,0,0,0.3);
    
    /* --- Transiciones --------------------------------------------------- */
    
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
    
    /* --- Z-index -------------------------------------------------------- */
    
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 500;
    --z-overlay: 999;
    --z-modal: 1000;
    --z-tooltip: 1100;
    --z-bar: 9998;
    --z-bar-top: 9999;
    --z-menu-mobile: 10000;
    --z-payment: 10001;
    
    /* --- Tipografía ----------------------------------------------------- */
    
    --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-size-base: 0.9375rem;
    --line-height-base: 2.0;
    --font-h1: clamp(1.1875rem, 0.9018rem + 1.4286vw, 2.3125rem);
    --font-h3: clamp(1.14rem, 0.96rem + 0.9vw, 1.5rem);
    --font-h4: clamp(1.0235rem, 0.88rem + 0.7188vw, 1.3225rem);
                
    /* --- Opacidades y Overlays ------------------------------------------ */
    
    --opacity-70: 0.7;
    
    --overlay-light: rgba(0,0,0,0.5);
    --overlay-modal: rgba(0,0,0,0.7);
    
    --surface-ghost: rgba(255,255,255,0.1);
    --surface-frosted: rgba(255,255,255,0.2);
    --surface-light: rgba(255,255,255,0.3);
    --surface-medium: rgba(255,255,255,0.5);
    --surface-bright: rgba(255,255,255,0.9);
    
    /* --- Colores con Opacidad ------------------------------------------- */
    
    --text-alpha-70: rgba(27,24,20,0.7);
    --text-alpha-40: rgba(27,24,20,0.4);
    --text-alpha-30: rgba(27,24,20,0.3);
    --text-alpha-10: rgba(27,24,20,0.1);
    --green-alpha-15: rgba(76,175,80,0.15);
    --green-alpha-20: rgba(76,175,80,0.2);
    --green-alpha-30: rgba(76,175,80,0.3);
    --green-alpha-40: rgba(76,175,80,0.4);
    --green-input-alpha: rgba(129,199,132,0.2);
    --green-light-alpha-30: rgba(165,214,167,0.3);
    --red-alpha-30: rgba(239,154,154,0.3);
    --pink-alpha-30: rgba(255,201,201,0.3);
    --green-50-alpha-90: rgba(232,245,233,0.9);
    --pink-200-alpha-90: rgba(255,232,232,0.9);
    --hover-green-tint: #e8f8f0;
    --green-200-alpha-50: rgba(165, 214, 167, 0.5);
    --green-500-alpha-70: rgba(76, 175, 80, 0.7);
    --pink-900-alpha-70: rgba(136, 14, 79, 0.7);
    --white-alpha-60: rgba(255, 255, 255, 0.6);
    --result-item-bg: rgba(255, 250, 250, 0.7);
    --scrollbar-green-track: rgba(232, 245, 233, 0.3);
    --scrollbar-red-track: rgba(255, 215, 215, 0.3);
    --green-400-alpha-40: rgba(102, 187, 106, 0.4);
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. VARIABLES DARK
   ═══════════════════════════════════════════════════════════════════════════ */

[data-theme="dark"] {
    --phrases-bg: #1e1c18;
    --phrases-header: #2a2620;
    --cream-50: #1e1c18;
    --cream-100: #1e1c18;
    --cream-200: #2a2620;
    --cream-300: #35302a;
    --cream-400: #554a3a;
    --cream-hover: #d4c8aa;
    --cream-btn-text: #1b1814;
    --cream-text: #c4b89a;
    --cream-alpha-15: rgba(196, 184, 154, 0.15);
    --dark-base: #121212;
    --color-bg: var(--dark-base);
    --color-white: #1e1e1e;
    --color-lavender: #252532;
    --result-item-bg: rgba(30, 30, 30, 0.7);
    --scrollbar-green-track: rgba(37, 53, 37, 0.3);
    --scrollbar-red-track: rgba(53, 37, 37, 0.3);
    --color-text: #e8e8e8;
    --color-gray: #bbb;
    --neutral-50: #1e1e1e;
    --neutral-100: #252525;
    --neutral-150: #2a2a2a;
    --neutral-300: #333;
    --neutral-400: #444;
    --neutral-450: #555;
    --neutral-500: #666;
    --neutral-600: #888;
    --neutral-650: #aaa;
    --neutral-700: #bbb;
    --neutral-800: #ddd;
    --neutral-900: #e8e8e8;
    --green-50: #1a2a1a;
    --green-100: #253525;
    --green-200: #354535;
    --green-400: #66bb6a;
    --green-500: #81c784;
    --green-700: #a5d6a7;
    --blue-50: #1a1a2a;
    --blue-100: #252535;
    --blue-400: #64b5f6;
    --blue-700: #90caf9;
    --pink-50: #2a1a1a;
    --pink-100: #352525;
    --pink-200: #453535;
    --pink-300: #553a3a;
    --pink-500: #504040;
    --pink-600: #604848;
    --pink-700: #705050;
    --pink-800: #352525;
    --pink-900: #ff8a80;
    --red-50: #2a1a1a;
    --red-200: #453535;
    --red-600: #ff6b6b;
    --color-red: #ff6b6b;
    --yellow-50: #2a2a1a;
    --yellow-100: #353525;
    --yellow-200: #454535;
    --yellow-300: #ffd54f;
    --color-success: #81c784;
    --color-success-light: #253525;
    --color-success-dark: #a5d6a7;
    --color-error: #ff6b6b;
    --color-error-light: #453535;
    --color-test: #ff8a80;
    --color-test-light: #352525;
    --shadow-sm: 0 0.125rem 0.5rem rgba(0,0,0,0.4);
    --shadow-md: 0 0.25rem 1rem rgba(0,0,0,0.5);
    --shadow-lg: 0 0.375rem 1.5rem rgba(0,0,0,0.6);
    --shadow-xl: 0 0.5rem 2rem rgba(0,0,0,0.7);
}

/* ==========================================================================
   3. RESET & BASE
   ========================================================================== */

/* --- Reset -------------------------------------------------------------- */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    overflow-x: hidden;
    overscroll-behavior-x: none;
}

*:focus-visible {
    outline: 0.1875rem solid var(--green-alpha-30);
    outline-offset: 0.125rem;
}

/* --- Body @ Móvil ------------------------------------------------------- */

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--color-text);
    background: var(--color-bg);
    padding: 0.625rem 0.9375rem 4.375rem;
    max-width: 87.5rem;
    margin: 0 auto;
}

/* --- Body @ Desktop ----------------------------------------------------- */

@media (min-width: 769px) {
    body {
        padding: var(--spacing-lg) 1.375rem 0.3125rem;
    }
}

/* ==========================================================================
   4. TYPOGRAPHY
   ========================================================================== */

/* --- Párrafos @ Móvil --------------------------------------------------- */

p {
    margin-bottom: var(--spacing-md);
    font-weight: 400;
    font-size: clamp(0.9375rem, 0.7946rem + 0.7143vw, 1.1875rem);
    line-height: 1.8;
}

strong {
    font-weight: 700;
}

.teoria {
    background: var(--color-white);
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
    border-left: 0.25rem solid var(--cream-text);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--spacing-xl);
}

.teoria h3 {
    margin-top: 0;
}

.teoria p:last-child {
    margin-bottom: 0;
}

/* --- Párrafos @ Desktop ------------------------------------------------- */

@media (min-width: 769px) {
    p {
        line-height: 2.0;
    }
}

/* Título de la página: Tema de la lección (dentro header-card) */
h1 {
    font-size: clamp(1rem, 0.7143rem + 1.4286vw, 1.5rem);
    font-weight: 700;
    text-transform: none;
    margin: 0 0 0.25rem;
    letter-spacing: 0;
    line-height: 1.3;
    color: var(--color-text);
}

/* h2 — Título de sección principal (Teoría, Constructor, Diálogo, Ejercicios, Test) */
h2 {
    font-size: clamp(1rem, 0.8rem + 1vw, 1.3rem);
    font-weight: 700;
    margin: var(--spacing-xl) 0 var(--spacing-lg);
    color: var(--color-text);
    line-height: 1.3;
    text-align: center;
}

h3 {
    font-size: var(--font-h3);
    font-weight: 700;
    margin: 0.25rem 0 var(--spacing-md);
    color: var(--color-text);
    line-height: 1.4;
    text-align: left;
    display: inline-block;
    position: relative;
    padding: 0 0 0.5rem 0;
    background: none;
    border: none;
}

h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 3%;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, var(--cream-300) 18%, var(--cream-300) 82%, transparent 100%);
}

@media (max-width: 768px) {
    .theory-section h3 {
        text-align: left;
        padding-left: 0.75rem;
    }
}

h4 {
    font-size: var(--font-h4);
    font-weight: 700;
    margin: var(--spacing-xs) 0 var(--spacing-md);
    color: var(--color-text);
    line-height: 1.4;
    text-align: center;
}

/* --- Encabezados @ Desktop ---------------------------------------------- */

@media (min-width: 769px) {
    h2 {
        text-align: left;
    }

    h3 {
        text-align: left;
        padding-left: 1.2rem;
    }

    h4 {
        text-align: left;
        padding-left: 1.2rem;
    }

    .feature-box h4,
    .classification h4,
    .rule-card h4,
    .tema-group h4 {
        padding-left: 0;
    }
}

/* ==========================================================================
   5. LESSON HEADER
   ========================================================================== */

/* --- Logo - BASE (móvil) ----------------------------------------- */
.course-logo {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 10;
}

.course-logo img {
    display: none;
}

/* --- Header Card @ Móvil ------------------------------------------------ */

.header-card {
    background: linear-gradient(180deg, var(--cream-200) 0%, var(--cream-50) 80%);
    padding: 1.25rem 1rem;
    border-radius: var(--radius-xl);
    text-align: center;
    box-shadow: var(--shadow-sm);   
    position: relative;
    margin-top: 0;
    margin-bottom: var(--spacing-xs);
    border: none;
}

/* --- Header Card @ Desktop ---------------------------------------------- */

@media (min-width: 769px) {
    .header-card {
        padding: 2.25rem 2.5rem;
    }
}

/* --- Info Icon @ Móvil -------------------------------------------------- */

.info-icon {
    position: absolute;
    top: 0.625rem;
    right: 0.625rem;
    width: 0.875rem;
    height: 0.875rem;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: transform var(--transition-fast);
    padding: 0;
}

.info-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.info-icon-svg circle:first-child,
.info-icon-svg line {
    stroke: var(--cream-text);
    stroke-width: 5;
    stroke-linecap: round;
}

.info-icon-svg circle:last-child {
    fill: var(--cream-text);
}

.info-icon:hover {
    transform: scale(1.1);
}

/* --- Info Icon @ Desktop ------------------------------------------------ */

@media (min-width: 769px) {
    .info-icon {
        width: 1.375rem;
        height: 1.375rem;
        top: 1rem;
        right: calc(var(--spacing-lg) + 0.25rem + 0.625rem);
    }
}

/* --- Method Tooltip ----------------------------------------------------- */

.method-tooltip {
    display: none;
    position: absolute;
    top: 2rem;
    right: 2rem;
    margin-top: 1rem;
    background: var(--color-white);
    padding: 1.25rem 1rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    text-align: left;
    font-size: 0.75rem;
    line-height: 1.6;
    color: var(--neutral-800);
    width: clamp(18rem, 90vw, 34rem);
    z-index: var(--z-tooltip);
}

.method-tooltip.show {
    display: block;
}

.method-tooltip::before {
    content: '';
    position: absolute;
    top: -0.5rem;
    right: 0.625rem;
    border-left: 0.5rem solid transparent;
    border-right: 0.5rem solid transparent;
    border-bottom: 0.5rem solid var(--color-white);
}

/* Título */
.method-tooltip > strong {
    display: block;
    text-align: center;
    color: var(--color-text);
    margin-bottom: 0.15rem;
}

/* Cita */
.method-tooltip > .gray-italic {
    display: block;
    text-align: center;
    color: var(--neutral-650);
}

/* Divider */
.method-tooltip-divider {
    height: 0.0625rem;
    background: linear-gradient(90deg, transparent, var(--cream-300), transparent);
    margin: 0.5rem 0;
}

/* Párrafos con • */
.method-tooltip p {
    margin: 0.5rem 0 0;
    font-size: 0.75rem;
    line-height: 1.6;
    color: var(--color-text);
    padding-left: 1.4em;
    position: relative;
}

.method-tooltip p::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--color-text);
    font-weight: normal;
}

/* --- Desktop --- */
@media (min-width: 769px) {
    .method-tooltip {
        width: clamp(30rem, 60vw, 44rem);
        padding: 1.75rem 1.5rem;
        font-size: 0.9375rem;
    }

    .method-tooltip p {
        font-size: 0.9375rem;
        margin-top: 0.65rem;
    }

    .method-tooltip > strong {
        font-size: 1.0625rem;
    }

    .method-tooltip > .gray-italic {
        font-size: 0.9375rem;
    }
}

/* --- Móvil --- */
@media (max-width: 768px) {
    .method-tooltip {
        top: 2.5rem;
        right: 0.5rem;
        transform: none;
        z-index: calc(var(--z-menu-mobile) + 1);
    }

    .method-tooltip::before {
        right: calc(50% - 0.5rem);
    }
}

/* --- Course Info -------------------------------------------------------- */

.course-info {
    margin-bottom: var(--spacing-md);
}

.course-title {
    font-size: clamp(1rem, 0.7143rem + 1.4286vw, 1.5rem);
    font-weight: 700;
    margin-bottom: 0.25rem;
    letter-spacing: 0.019rem;
    color: var(--color-text);
}

.course-level {
    font-size: clamp(0.875rem, 0.6964rem + 0.8929vw, 1.125rem);
    font-weight: 600;
    color: var(--neutral-800);
}

/* --- Header Separator --------------------------------------------------- */

.header-card .separator {
    height: 0.0625rem;
    background: linear-gradient(90deg, transparent, var(--cream-300), transparent);
    margin: 0 auto var(--spacing-md);
    width: 90%;
}

.lesson-info .urok {
    font-size: clamp(0.875rem, 0.6518rem + 1.1161vw, 1.1875rem);
    font-weight: 600;
    color: var(--neutral-800);
    line-height: 1.3;
}

.lesson-info.urok-first {
    display: flex;
    flex-direction: column;
}

.lesson-info.urok-first .urok {
    order: -1;
    font-size: clamp(1rem, 0.7143rem + 1.4286vw, 1.5rem);
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 0.25rem;
}

.lesson-info.urok-first h1.tema {
    font-size: clamp(0.875rem, 0.6518rem + 1.1161vw, 1.1875rem);
    font-weight: 600;
    color: var(--neutral-800);
    margin: 0;
}

.lesson-info .divider {
    display: none;
    color: var(--neutral-600);
    margin: 0 0.5rem;
    font-weight: 400;
}

.lesson-info .spanish {
    display: none;
    color: var(--neutral-650);
    font-weight: 500;
    font-style: italic;
}

/* --- Lesson Info @ Desktop ---------------------------------------------- */

@media (min-width: 769px) {
    .lesson-info .divider,
    .lesson-info .spanish {
        display: inline;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   6. SHARED SECTION STYLES
   ═══════════════════════════════════════════════════════════════════════════ */

/* Estilos comunes para todas las secciones principales del curso.
   Cada sección solo necesita añadir su background, color y box-shadow propio. */

/* --- Contenedores de sección -------------------------------------------- */

.theory-section,
.exercise-section,
.test-section,
.reading-section,
.dialogue-section,
.phrases-section {
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    margin: var(--spacing-md) 0;
}

/* --- Cabeceras de sección (h2 de cada bloque) --------------------------- */

.theory-section > h2:first-child,
.exercise-section > h2:first-child,
.test-section h2,
.reading-section h2,
.dialogue-section h2,
.phrases-header {
    margin: 0 0 2rem 0;
    padding: 0.75rem;
    font-weight: 700;
    text-align: left;
    border-radius: var(--radius-xl);
    line-height: 1.4;
}

/* --- Números de ejercicio/test ------------------------------------------ */

.exercise-number,
.test-number {
    display: inline-block;
    font-weight: 700;
    font-size: clamp(1rem, 0.7143rem + 1.4286vw, 1.5rem);
    border-radius: var(--radius-sm);
    margin-right: var(--spacing-sm);
    width: 2.5rem;
    text-align: center;
}

/* --- Desktop ------------------------------------------------------------ */

@media (min-width: 769px) {
    .theory-section > h2:first-child,
    .exercise-section > h2:first-child,
    .test-section h2,
    .reading-section h2,
    .dialogue-section h2,
    .phrases-header {
        text-align: left;
        padding: 1.375rem 1.5rem;
        margin-bottom: 2.5rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   7. THEORY
   ═══════════════════════════════════════════════════════════════════════════ */

   /* --- Sección teórica (envolvente) --------------------------------------- */

.theory-section {
    background: linear-gradient(180deg, var(--cream-50) 0%, var(--cream-100) 100%);
    padding: 2.2rem 0.9375rem 1.2rem;
}

.theory-section > h2:first-child {
    background: linear-gradient(135deg, var(--cream-200) 0%, var(--cream-300) 100%);
    color: var(--cream-text);
    box-shadow: 0 0.125rem 0.375rem var(--cream-alpha-15);
}

/* Desktop */
@media (min-width: 769px) {
    .theory-section {
        padding: var(--spacing-xxl) calc(var(--spacing-lg) + 0.25rem) 1.5rem;
    }

    .theory-section > h2:first-child {
        margin-left: 0;
        margin-right: 0;
    }

     .theory-section > p {
        padding-left: 1.2rem;
    }

    /* Constructor sections */
    .constructor-section {
    scroll-margin-top: 2rem;
    }

    #constructorPosesivos > p {
        padding-left: 1.2rem;
    }
}

/* --- Feature Box -------------------------------------------------------- */

.feature-box {
    background: var(--color-white);
    padding: var(--spacing-sm) var(--spacing-md) calc(var(--spacing-sm) + 1rem) var(--spacing-md);
    border-radius: var(--radius-xl);
    margin: var(--spacing-xl) 0 var(--spacing-md) 0;
    border-left: 0.25rem solid var(--cream-300);
    box-shadow: var(--shadow-sm);
    font-size: clamp(0.9375rem, 0.7946rem + 0.7143vw, 1.1875rem);
}

.cream-divider {
    height: 0.0625rem;
    background: linear-gradient(90deg, transparent, var(--cream-300), transparent);
    border: none;
    margin: var(--spacing-md) 0;
}

.feature-box h4 {
    margin-top: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    text-align: center;
    font-size: clamp(0.95rem, 0.82rem + 0.65vw, 1.22rem);
    line-height: 1.3;
}

.feature-box p {
    font-size: clamp(1rem, 0.9318rem + 0.3409vw, 1.1875rem);
    line-height: 1.8;
    margin: 0.2rem 0;
}

.feature-box p small {
    color: var(--neutral-650);
}

.feature-box ul {
    margin-left: 1.5rem;
    line-height: 1.9;
}

.feature-box ul li {
    margin-bottom: var(--spacing-sm);
}

.feature-box hr + p {
    margin-top: 0.9375rem;
}

.feature-box .audio-word {
    font-size: clamp(1rem, 0.9318rem + 0.3409vw, 1.1875rem);
}

.feature-box:has(.guide-footer) {
    padding-bottom: 0;
    overflow: hidden;
}

.feature-box .guide-footer {
    margin-top: var(--spacing-md);
    margin-left: calc(-1 * var(--spacing-md));
    margin-right: calc(-1 * var(--spacing-md));
    border-radius: 0;
}

@media (min-width: 769px) {
    .feature-box .guide-footer {
        margin-left: calc(-1 * var(--spacing-xl));
    }
}

/* Desktop */
@media (min-width: 769px) {
    .feature-box {
        padding: calc(var(--spacing-sm) + 1rem) var(--spacing-md);
        padding-left: var(--spacing-xl);
    }
    
    .feature-box h4 {
        margin-top: 0;
        text-align: left;
        line-height: 1.4;
    }
}

/* --- Feature Grids ------------------------------------------------------ */

.feature-grid-u2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
    margin: var(--spacing-md) 0;
}

.feature-grid-u2 .feature-box,
.feature-grid-u2 .classification {
    margin: 0;
}

/* Desktop */
@media (min-width: 769px) {
    .feature-grid-u2 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .feature-grid-u2 .feature-box {
        padding-left: 1.5rem;
    }
}

/* --- Example Grid y Cards ----------------------------------------------- */

.example-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
    margin: var(--spacing-sm) 0 var(--spacing-md);
}

@media (max-width: 768px) {
    .example-grid.grid-long-mobile {
        grid-template-columns: 1fr;
    }
}

.example-card {
    position: relative;
    overflow: hidden;
    background: var(--color-white);
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    text-align: center;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    width: 100%;
    min-width: 0;
    margin: 0;
    word-wrap: break-word;
}

.example-card:hover {
    transform: translateY(-0.25rem);
    box-shadow: var(--shadow-md);
}

.example-card .spanish {
    font-size: clamp(1rem, 0.9318rem + 0.3409vw, 1.1875rem);
    margin-bottom: 0.5rem;
}

.example-card .transcription {
    color: var(--color-red);
    margin-bottom: 0.5rem;
    font-size: clamp(1rem, 0.9318rem + 0.3409vw, 1.1875rem);
}

.example-card .russian {
    font-size: clamp(1rem, 0.9318rem + 0.3409vw, 1.1875rem);
}

/* Desktop */
@media (min-width: 769px) {
    .example-grid {
        grid-template-columns: repeat(auto-fit, minmax(16.25rem, 1fr));
        gap: var(--spacing-lg);
        margin: var(--spacing-md) 0;
    }
}

/* --- Example Grid Wide (frases largas — máx 2 col desktop, 1 col móvil) -- */

.example-grid-wide {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
    margin: var(--spacing-xs) 0 var(--spacing-lg);
}

@media (min-width: 769px) {
    .example-grid-wide {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-lg);
        margin: var(--spacing-xs) 0 var(--spacing-lg);
    }
}

.header-card + h2 {
    margin-top: var(--spacing-lg);
}

/* --- Ritmo vertical de teoría (corregido: hueco fijo, ya no depende
   del margin-bottom variable del h3/h4 anterior) --- */

h3:has(+ p) {
    margin-bottom: 0;
}

h4:has(+ p) {
    margin-bottom: 0;
}

h3 + p {
    margin-top: var(--spacing-xs);
}

h4 + p {
    margin-top: 0;
}

h3 + .example-grid,
h3 + .example-grid-wide,
h3 + .plural-rules-grid,
h3 + .feature-grid-u2,
h3 + .invariables-wrapper,
h3 + .feature-box,
h3 + .keyboard-guide,
h3 + .vocab-rules-grid,
h3 + .table-wrapper,
h4 + .example-grid,
h4 + .example-grid-wide,
h4 + .plural-rules-grid,
h4 + .feature-grid-u2,
h4 + .invariables-wrapper,
h4 + .feature-box,
h4 + .keyboard-guide,
h4 + .vocab-rules-grid,
h4 + .table-wrapper {
    margin-top: var(--spacing-xs);
}

p + .example-grid,
p + .example-grid-wide,
p + .plural-rules-grid,
p + .feature-grid-u2,
p + .invariables-wrapper,
p + .feature-box,
p + .keyboard-guide,
p + .vocab-rules-grid,
p + .table-wrapper {
    margin-top: var(--spacing-xs);
}

.example-grid + h3,
.example-grid-wide + h3,
.plural-rules-grid + h3,
.feature-grid-u2 + h3,
.invariables-wrapper + h3,
.feature-box + h3,
.keyboard-guide + h3,
.vocab-rules-grid + h3,
.table-wrapper + h3 {
    margin-top: var(--spacing-md);
}

.example-grid + h4,
.example-grid-wide + h4,
.plural-rules-grid + h4,
.feature-grid-u2 + h4,
.invariables-wrapper + h4,
.feature-box + h4,
.keyboard-guide + h4,
.vocab-rules-grid + h4,
.table-wrapper + h4 {
    margin-top: 1.6rem;
}

/* --- Wrappers con llaves de agrupación ---------------------------------- */

.invariables-wrapper {
    margin: var(--spacing-md) 0;
}

/* --- Zone Offset Title (cabecera con pequeño desplazamiento a la derecha) -- */

.zone-offset-title {
    padding-left: 2.5rem;
}

.invariables-labels {
    display: none;
}

/* Desktop */
@media (min-width: 769px) {
    .invariables-labels {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-lg);
        margin-bottom: 3rem;
    }
    
    .invariables-labels.labels-3 {
        grid-template-columns: 1fr 2fr 1fr;
    }
    
    .invariables-labels.labels-3 .invariables-label:nth-child(1),
    .invariables-labels.labels-3 .invariables-label:nth-child(3) {
        visibility: hidden;
    }
    
    .invariables-labels.labels-3 .invariables-label:nth-child(1)::before {
        left: 50%;
        right: -50%;
        border-right: none;
        border-radius: 1rem 0 0 0;
        visibility: visible;
    }
    
    .invariables-labels.labels-3 .invariables-label:nth-child(3)::before {
        left: -50%;
        right: 50%;
        border-left: none;
        border-radius: 0 1rem 0 0;
        visibility: visible;
    }
    
    .invariables-labels.labels-3 .invariables-label:nth-child(2)::before {
        left: -25%;
        right: -25%;
        border-left: none;
        border-right: none;
        border-radius: 0;
        visibility: visible;
    }
    
    .invariables-labels.labels-3 .invariables-label:nth-child(1)::after,
    .invariables-labels.labels-3 .invariables-label:nth-child(3)::after {
        display: none;
    }
    
    .invariables-wrapper .invariables-labels.labels-3 + .example-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .invariables-labels.labels-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .invariables-wrapper .invariables-labels.labels-2 + .example-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .invariables-label {
        font-size: clamp(0.9rem, 0.75rem + 0.75vw, 1.1rem);
        font-weight: 700;
        color: var(--color-text);
        text-align: center;
        padding: var(--spacing-xs) var(--spacing-sm);
        position: relative;
    }
    
    .invariables-label::before {
        content: '';
        position: absolute;
        top: 100%;
        left: 5%;
        right: 5%;
        height: 1.5rem;
        border-left: 0.1875rem solid var(--neutral-500);
        border-right: 0.1875rem solid var(--neutral-500);
        border-top: 0.1875rem solid var(--neutral-500);
        border-radius: 1rem 1rem 0 0;
    }
    
    .invariables-label::after {
        content: '';
        position: absolute;
        top: calc(100% + 1.5rem);
        left: 50%;
        transform: translateX(-50%);
        width: 0.1875rem;
        height: 0.75rem;
        background: var(--neutral-500);
    }
    
    .invariables-wrapper .example-grid {
        grid-template-columns: repeat(4, 1fr);
        margin-top: 0;
    }
}

/* Mobile — verbos polisémicos (labels-3) apilados en 1 columna */
@media (max-width: 768px) {
    .invariables-wrapper .invariables-labels.labels-3 + .example-grid {
        grid-template-columns: 1fr;
    }
    
    .invariables-wrapper .invariables-labels.labels-3 {
        display: block;
        text-align: center;
        margin-bottom: var(--spacing-md);
    }
    
    .invariables-wrapper .invariables-labels.labels-3 .invariables-label:nth-child(1),
    .invariables-wrapper .invariables-labels.labels-3 .invariables-label:nth-child(3) {
        display: none;
    }
    
    .invariables-wrapper .invariables-labels.labels-3 .invariables-label:nth-child(2) {
        font-size: 1rem;
        font-weight: 700;
        color: var(--color-text);
    }

    /* Mobile — separar tarjetas por grupo */
    .invariables-wrapper.mobile-split-2,
    .invariables-wrapper.mobile-split-2-alt,
    .invariables-wrapper.mobile-split-3,
    .invariables-wrapper.mobile-split-4 {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
        align-items: start;
    }

    .invariables-wrapper.mobile-split-2 .invariables-labels,
    .invariables-wrapper.mobile-split-2-alt .invariables-labels,
    .invariables-wrapper.mobile-split-3 .invariables-labels,
    .invariables-wrapper.mobile-split-4 .invariables-labels,
    .invariables-wrapper.mobile-split-2 .example-grid,
    .invariables-wrapper.mobile-split-2-alt .example-grid,
    .invariables-wrapper.mobile-split-3 .example-grid,
    .invariables-wrapper.mobile-split-4 .example-grid {
        display: contents;
    }

    .invariables-wrapper.mobile-split-2 .invariables-label,
    .invariables-wrapper.mobile-split-2-alt .invariables-label,
    .invariables-wrapper.mobile-split-3 .invariables-label,
    .invariables-wrapper.mobile-split-4 .invariables-label {
        display: block;
        grid-column: 1 / -1;
        font-size: 1rem;
        font-weight: 700;
        color: var(--color-text);
        text-align: center;
        margin: 0;
        padding: 0.25rem 0;
    }

    .invariables-wrapper.mobile-split-2 .invariables-label:nth-child(1),
    .invariables-wrapper.mobile-split-2-alt .invariables-label:nth-child(1),
    .invariables-wrapper.mobile-split-3 .invariables-label:nth-child(1),
    .invariables-wrapper.mobile-split-4 .invariables-label:nth-child(1) { order: 1; }

    .invariables-wrapper.mobile-split-2 .invariables-label:nth-child(2),
    .invariables-wrapper.mobile-split-2-alt .invariables-label:nth-child(2),
    .invariables-wrapper.mobile-split-3 .invariables-label:nth-child(2),
    .invariables-wrapper.mobile-split-4 .invariables-label:nth-child(2) {
        order: 3;
        margin-top: var(--spacing-md);
    }

    .invariables-wrapper.mobile-split-2 .example-card:nth-child(-n+2) { order: 2; }
    .invariables-wrapper.mobile-split-2 .example-card:nth-child(n+3)  { order: 4; }

    .invariables-wrapper.mobile-split-2-alt .example-card:nth-child(odd)  { order: 2; }
    .invariables-wrapper.mobile-split-2-alt .example-card:nth-child(even) { order: 4; }

    .invariables-wrapper.mobile-split-3 .example-card:nth-child(-n+3) { order: 2; }
    .invariables-wrapper.mobile-split-3 .example-card:nth-child(n+4)  { order: 4; }

    .invariables-wrapper.mobile-split-4 .example-card:nth-child(4n+1),
    .invariables-wrapper.mobile-split-4 .example-card:nth-child(4n+2) { order: 2; }
    .invariables-wrapper.mobile-split-4 .example-card:nth-child(4n+3),
    .invariables-wrapper.mobile-split-4 .example-card:nth-child(4n)   { order: 4; }
}

/* --- Classification ----------------------------------------------------- */

.classification {
    background: var(--color-white);
    padding: var(--spacing-md);
    border-radius: var(--radius-xl);
    margin: var(--spacing-md) 0;
    box-shadow: var(--shadow-sm);
    border-left: 4px solid var(--cream-300);
}

.classification h4 {
    font-size: clamp(1rem, 0.9318rem + 0.3409vw, 1.1875rem);
    margin-bottom: var(--spacing-lg);
    padding: 0 var(--spacing-md);
}

.classification h4 .es {
    font-weight: 700;
}

.classification h4 .ru {
    color: var(--color-gray);
    font-weight: 600;
    font-style: italic;
}

.classification p {
    font-size: clamp(1rem, 0.9318rem + 0.3409vw, 1.1875rem);
    line-height: 1.8;
    padding: 0 var(--spacing-md);
}

.classification .vowels-display,
.classification .consonants-display {
    font-size: clamp(1rem, 0.9318rem + 0.3409vw, 1.1875rem);
    color: var(--color-text);
}

.classification.text-center,
.classification.text-center h4,
.classification.text-center h5,
.classification.text-center p {
    text-align: center;
}

/* --- Classification Centered (variante centrada) ------------------------ */

.classification-center,
.classification-center:has(.guide-footer) {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr;
    text-align: center;
    padding-top: 1.8rem;
    padding-bottom: 1.1rem;
}

.classification-center:has(.guide-footer) {
    padding-bottom: 0;
}

.classification-center > * {
    grid-column: 1 / 4;
    text-align: center;
    justify-self: stretch;
}

.classification-center h4 {
    margin-top: 0;
    margin-bottom: 0.6rem;
}

.classification-center p {
    margin-top: 0.6rem;
    margin-bottom: 0.8rem;
}

.classification-center hr {
    margin-top: 0.6rem;
    margin-bottom: 0.6rem;
}

.classification-center p:has(.audio-word-card),
.classification-center hr ~ p:not(.guide-footer) {
    grid-column: 2;
    text-align: left;
    justify-self: start;
    width: auto;
    margin-left: 0;
    margin-right: 0;
}

/* Guide-footer внутри classification */
.classification:has(.guide-footer) {
    padding-bottom: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.classification .guide-footer {
    margin-top: auto;
    margin-left: calc(-1 * var(--spacing-md));
    margin-right: calc(-1 * var(--spacing-md));
    border-radius: 0;
}

/* Desktop */
@media (min-width: 769px) {
    .feature-grid-u2 .classification {
        margin-top: 0;
    }
}

/* --- Plural Rules Grid -------------------------------------------------- */

.plural-rules-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
    margin: var(--spacing-xs) 0 var(--spacing-lg);
}

.rule-card {
    background: var(--color-white);
    padding: var(--spacing-lg) var(--spacing-md);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
    text-align: center;
    border-top: 0.25rem solid;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    height: 100%;
}

.rule-card:hover {
    transform: translateY(-0.5rem);
    box-shadow: var(--shadow-md);
}

.rule-z {
    border-top-color: var(--red-200);
}

.rule-ser {
    border-top-color: var(--cream-300);
}

.rule-title {
    font-size: clamp(1rem, 0.9318rem + 0.3409vw, 1.1875rem);
    font-weight: 700;
    margin: 0 0 var(--spacing-sm) 0;
    line-height: 1.3;
    text-align: center;
    grid-column: 1 / -1;
}

.rule-divider {
    width: 3.125rem;
    height: 0.1875rem;
    margin: 0 auto var(--spacing-md) auto;
    border-radius: var(--radius-sm);
    grid-column: 1 / -1;
}

.rule-z .rule-divider {
    background: var(--red-200);
}

.rule-ser .rule-divider {
    background: var(--cream-300);
}

/* Guide-footer en rule-card */
.rule-card:has(.guide-footer) {
    padding-bottom: 0;
    overflow: hidden;
}

.rule-card .guide-footer {
    grid-column: 1 / -1;
    margin-top: auto;
    align-self: end;
    margin-left: calc(-1 * var(--spacing-lg));
    margin-right: calc(-1 * var(--spacing-lg));
    border-radius: 0;
}

@media (min-width: 769px) {
    .rule-card .guide-footer {
        margin-left: calc(-1 * var(--spacing-xl));
        margin-right: calc(-1 * var(--spacing-xl));
    }
}

.rule-content {
    font-size: clamp(1rem, 0.9318rem + 0.3409vw, 1.1875rem);
    line-height: 1.8;
    margin: 0 0 var(--spacing-sm) 0;
}

/* Texto / explicación (sin audio): todo el ancho, centrado */
.rule-card > p.rule-content:not(:has(.audio-word)):not(:has(.audio-word-card)) {
    grid-column: 1 / -1;
    text-align: center;
}

/* Solo filas con audio: bloque centrado + alineado a la izquierda */
.rule-card > p.rule-content:has(.audio-word),
.rule-card > p.rule-content:has(.audio-word-card) {
    grid-column: 2;
    text-align: left;
}

/* Si la tarjeta tiene транскрипцию: 100% CENTRADO para todo (español, транскрипция y ruso) */
.rule-card:has(.transcription) > p.rule-content,
.rule-card:has(.transcription) > p.transcription,
.rule-card:has(.transcription) > .transcription {
    grid-column: 1 / -1;
    text-align: center;
}

.rule-card .audio-word {
    font-size: clamp(1rem, 0.9318rem + 0.3409vw, 1.1875rem);
    font-weight: 700;
    font-style: normal;
    color: var(--color-text);
    vertical-align: middle;
}

/* Desktop */
@media (min-width: 769px) {
    .plural-rules-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-lg);
    }
    
    .rule-card {
        padding: var(--spacing-xl) var(--spacing-lg);
    }
}

/* --- Vocabulario nuevo -------------------------------------------------- */

.vocab-rules-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
    margin: var(--spacing-md) 0;
    align-items: stretch;
}

.vocab-card {
    background: var(--color-white);
    padding: var(--spacing-lg);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
    text-align: center;
    border-top: 0.25rem solid;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.vocab-card:hover {
    transform: translateY(-0.5rem);
    box-shadow: var(--shadow-md);
}

.vocab-nouns { 
    border-top-color: var(--cream-300); 
}

.vocab-entry {
    padding: 0;
    line-height: 1.6;
    text-align: left;
    margin-left: 15%;
}

.vocab-entry,
.vocab-entry .transcription {
    font-size: clamp(1rem, 0.9318rem + 0.3409vw, 1.1875rem);
}

.vocab-entry .audio-word {
    font-size: clamp(1rem, 0.9318rem + 0.3409vw, 1.1875rem);
    font-weight: 700;
}

.vocab-card .rule-title {
    margin-bottom: var(--spacing-lg);
}

.vocab-card:has(.guide-footer) {
    padding-bottom: 0;
    overflow: hidden;
}

.vocab-card .guide-footer {
    margin-top: auto;
    margin-left: calc(-1 * var(--spacing-lg));
    margin-right: calc(-1 * var(--spacing-lg));
    border-radius: 0;
}

@media (min-width: 769px) {
    .vocab-card {
        padding: var(--spacing-xl) 0.5rem;
    }

    .vocab-card .guide-footer {
        margin-left: -0.5rem;
        margin-right: -0.5rem;
    }

    .vocab-entry {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        padding-left: 1.5rem;
        padding-right: 0.5rem;
        box-sizing: border-box;
        text-align: left;
    }
}

@media (max-width: 768px) {
    .vocab-rules-grid {
        grid-template-columns: 1fr;
    }

    .vocab-card .rule-title .divider,
    .vocab-card .rule-title .spanish-subtitle {
        display: none;
    }

    .vocab-card {
        text-align: left;
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .vocab-card .rule-title {
        text-align: center;
    }

    .vocab-card {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .vocab-entry {
        width: 100%;
        max-width: 18rem;
        margin-left: auto;
        margin-right: auto;
        text-align: left;
        box-sizing: border-box;
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }
    
    .vocab-entry .transcription {
        display: none;
    }
    
    .vocab-entry .transcription + span {
        display: inline;
    }
}

/* --- Reloj visual  ------------------------------------ */

.clock-row {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    margin: var(--spacing-lg) 0 var(--spacing-xl) 0;
    padding: 0 var(--spacing-md);
}

.clock-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
}

.clock-svg {
    width: 7.5rem;
    height: 7.5rem;
    display: block;
}

.clock-face {
    fill: var(--color-white);
    stroke: var(--cream-text);
    stroke-width: 3;
}

.clock-hour-mark {
    stroke: var(--cream-text);
    stroke-width: 2;
    stroke-linecap: round;
}

.clock-number {
    fill: var(--cream-text);
    font-size: 0.75rem;
    font-weight: 700;
    text-anchor: middle;
    dominant-baseline: middle;
    font-family: Arial, sans-serif;
}

.clock-hand-hour {
    stroke: var(--cream-text);
    stroke-width: 3.5;
    stroke-linecap: round;
}

.clock-hand-minute {
    stroke: var(--cream-text);
    stroke-width: 2.5;
    stroke-linecap: round;
}

.clock-center {
    fill: var(--cream-text);
}

.clock-time-digital {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-text);
    margin-top: var(--spacing-xs);
}

/* Desktop */
@media (min-width: 769px) {
    .clock-row {
        justify-content: space-around;
        gap: var(--spacing-xl);
        padding: 0 var(--spacing-xl);
    }

    .clock-svg {
        width: 10rem;
        height: 10rem;
    }

    .clock-number {
        font-size: 0.9375rem;
    }

    .clock-time-digital {
        font-size: 1.125rem;
    }
}

/* --- Two-column split (feature-box, keyboard-guide) --------------------- */

.split-two {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
    margin-top: var(--spacing-sm);
}

.split-two > div {
    padding: 0;
}

/* Desktop */
@media (min-width: 769px) {
    .split-two {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-xl);
    }

    .split-two > div:first-child {
        border-right: 0.0625rem solid var(--cream-alpha-15);
        padding-right: var(--spacing-xl);
    }
}

/* Modificador — centrar el contenido dentro de cada columna */
.split-two.split-two-center > div {
    text-align: center;
}

/* Alinear texto a la izquierda dentro de columna centrada */
.split-two-center .align-left-inline {
    display: inline-block;
    text-align: left;
}

.split-two-center .align-left-inline p {
    margin: 0.6rem 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   8. TABLES
   ═══════════════════════════════════════════════════════════════════════════ */

/* --- Table Wrapper y Scroll Hint ---------------------------------------- */

.table-wrapper {
    overflow-x: auto;
    overflow-y: visible;
    margin-top: var(--spacing-lg);
    margin-bottom: 1.25rem;
    padding: 0.25rem;
}

.scroll-hint-bar {
    height: 0.25rem;
    background: var(--neutral-400);
    border-radius: 0.125rem;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    position: relative;
    overflow: hidden;
}

.scroll-hint-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 30%;
    height: 100%;
    background: linear-gradient(90deg, var(--color-text), var(--cream-text));
    border-radius: 0.125rem;
    animation: scrollHint 2s ease-in-out infinite;
}

.scroll-hint-bar + table {
    margin-top: 1.5rem;
}

/* Desktop */
@media (min-width: 769px) {
    .scroll-hint-bar {
        display: none;
    }
}

/* --- Tabla base --------------------------------------------------------- */

table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 0.05rem 0.3rem var(--shadow-sm-color);
    margin: var(--spacing-xl) 0 var(--spacing-md) 0;
    font-size: clamp(0.75rem, 0.5909rem + 0.7955vw, 1.1875rem);
    min-width: 17.5rem;
    table-layout: fixed;
}

.table-wrapper table {
    margin-top: 0;
    margin-bottom: 0;
}

table.tabla-scroll {
    table-layout: auto;
    min-width: 37.5rem;
}

table.tabla-scroll th:nth-child(1),
table.tabla-scroll td:nth-child(1) {
    min-width: 5rem;
}

table.tabla-scroll th:nth-child(2),
table.tabla-scroll td:nth-child(2) {
    min-width: 6rem;
}
table.tabla-scroll-wide {
    table-layout: auto;
    min-width: 65rem;
}

table.tabla-scroll td,
table.tabla-scroll-wide td {
    white-space: nowrap;
}

table.tabla-scroll-wide th:nth-child(2),
table.tabla-scroll-wide td:nth-child(2) {
    min-width: 6rem;
}

table.tabla-scroll-wide th:nth-child(4),
table.tabla-scroll-wide td:nth-child(4) {
    min-width: 12rem;
}

table.tabla-scroll-wide th:nth-child(5),
table.tabla-scroll-wide td:nth-child(5) {
    min-width: 8rem;
}

th {
    background: linear-gradient(135deg, var(--cream-200) 0%, var(--cream-300) 100%);
    color: var(--color-text);
    padding: var(--spacing-sm) var(--spacing-xs);
    text-align: center;
    text-transform: none;
    font-size: clamp(0.875rem, 0.6964rem + 0.8929vw, 1.1875rem);
    font-weight: 700;
    white-space: normal;
    line-height: 1.2;
}

td {
    padding: var(--spacing-sm) var(--spacing-xs);
    text-align: center;
    border-bottom: 0.0625rem solid var(--neutral-450);
    font-size: clamp(1rem, 0.9318rem + 0.3409vw, 1.1875rem);
    line-height: 1.8;
    word-wrap: break-word;
}

tr {
    transition: background var(--transition-fast);
}

tr:hover {
    background: var(--color-bg);
}

tr:last-child td {
    border-bottom: none;
}

/* Desktop */
@media (min-width: 769px) {
    table {
        min-width: auto;
        table-layout: auto;
    }
    
    th {
        padding: 1.2rem var(--spacing-md);
        white-space: nowrap;
        line-height: 1.4;
    }
    
    td {
        padding: var(--spacing-sm);
        line-height: 1.6;
    }
}

/* --- Guide-footer después de tabla -------------------------------------- */

.table-wrapper:has(+ .guide-footer) {
    margin-bottom: 0;
    padding: 0;
    box-shadow: 0 0.05rem 0.3rem var(--shadow-sm-color);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.table-wrapper:has(+ .guide-footer) table {
    margin-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.table-wrapper:has(+ .guide-footer) tr:last-child td {
    border-bottom: 0.0625rem solid var(--neutral-450);
}

.table-wrapper + .guide-footer {
    margin-top: 0;
    margin-bottom: var(--spacing-xl);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    box-shadow: 0 0.05rem 0.3rem var(--shadow-sm-color);
}

/* Mobile — ocultar columna transcripción en tablas */
@media (max-width: 768px) {
    .table-wrapper table td.transcription,
    .table-wrapper table th.transcription,
    .table-wrapper table th.transcription-header {
        display: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   9. PHRASES
   ═══════════════════════════════════════════════════════════════════════════ */

/* --- Sección ------------------------------------------------------------ */

.phrases-section {
    background: var(--phrases-bg);
    padding: 2.2rem 0.9375rem;
}

/* --- Cabecera principal ------------------------------------------------- */

.phrases-header {
    background: var(--phrases-header);
    color: var(--cream-text);
    box-shadow: 0 0.125rem 0.375rem rgba(90, 80, 63, 0.3);
    text-transform: none;
}

/* --- Grid temas --------------------------------------------------------- */

.phrases-grid {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* --- Cada tema ---------------------------------------------------------- */

.phrases-theme {
    display: flex;
    flex-direction: column;
}

/* --- Cabecera secundaria (tema) ----------------------------------------- */

.phrases-theme-header {
    background: var(--phrases-header);
    color: var(--cream-text);
    width: 80%;
    margin: 0 auto 1rem auto;
    padding: 0.5rem 0.75rem;
    font-size: clamp(1rem, 0.8214rem + 0.8929vw, 1.25rem);
    font-weight: 700;
    text-align: center;
    border-radius: var(--radius-xl);
    box-shadow: 0 0.125rem 0.375rem rgba(90, 80, 63, 0.3);
    line-height: 1.4;
}

/* --- Tarjetas ----------------------------------------------------------- */

.phrases-cards {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0 0.450rem;
}

.phrases-card {
    background: var(--color-white);
    padding: 0.75rem;
    text-align: center;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.phrases-card-es {
    font-weight: 700;
    margin-bottom: var(--spacing-xs);
}

.phrases-card-es .audio-word {
    font-size: clamp(1rem, 0.9318rem + 0.3409vw, 1.1875rem);
}

.phrases-card-tr,
.phrases-card-ru {
    font-size: clamp(1rem, 0.9318rem + 0.3409vw, 1.1875rem);
}

.phrases-card-tr {
    font-style: italic;
    color: var(--color-red);
    margin-bottom: var(--spacing-xs);
}

/* --- Ocultar en móvil --------------------------------------------------- */

@media (max-width: 768px) {
    .phrases-header .divider,
    .phrases-header .spanish-subtitle,
    .phrases-theme-header span.divider {
        display: none;
    }
}

/* --- Desktop ------------------------------------------------------------ */

@media (min-width: 769px) {
    .phrases-section {
        padding: var(--spacing-xxl) var(--spacing-lg) 3.1rem;
    }

    .phrases-header {
        margin-left: 0.575rem;
        margin-right: 0.575rem;
    }
}

@media (min-width: 1025px) {
    .phrases-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-lg);
        row-gap: 2.5rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   10. HIGHLIGHTS & STATES
   ═══════════════════════════════════════════════════════════════════════════ */

/* --- Highlights --------------------------------------------------------- */

.highlight {
    color: var(--color-red);
    font-weight: bold;
}

.highlight-green {
    color: var(--green-500);
    font-weight: bold;
}

.transcription,
.transcription-red {
    color: var(--color-red);
}

/* --- Iconos de sección -------------------------------------------------- */

.section-icon {
    width: 1.5em;
    height: 1.5em;
    vertical-align: -0.3em;
    margin-right: 0.5rem;
    color: var(--green-500);
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.section-icon.icon-teoria {
    color: var(--color-text);
}

.section-icon.icon-dialogue {
    color: var(--blue-700);
}

.section-icon.icon-reading {
    color: var(--yellow-500);
}

.section-icon.icon-test {
    color: var(--color-test);
}

.section-icon.icon-green-dark {
    color: var(--green-700);
}

.section-icon.icon-text {
    color: var(--cream-text);
}

.section-icon.icon-star {
    color: var(--yellow-400);
}

.section-icon.icon-exceptions {
    color: var(--red-450);
}

.section-icon.icon-cross {
    color: var(--color-red);
}

/* --- Estados universales ------------------------------------------------ */

.is-correct,
.word-clickable.correct,
.answer-input.show-correct,
.answer-input-long.show-correct,
.exercise-input.show-correct {
    background-color: var(--color-success-light);
    border-color: var(--green-800);
}

.is-incorrect,
.word-clickable.incorrect,
.answer-input.show-incorrect,
.answer-input-long.show-incorrect,
.exercise-input.show-error {
    background-color: var(--red-200);
    border-color: var(--color-red);
}

.word-clickable.correct {
    color: var(--color-success-dark);
}

.word-clickable.incorrect {
    color: var(--red-700);
}

/* ═══════════════════════════════════════════════════════════════════════════
   11. FOOTER
   ═══════════════════════════════════════════════════════════════════════════ */

/* --- Footer Legal ------------------------------------------------------- */

.footer-legal {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-align: center;
    margin: 2.5rem 0 1.25rem 0;
    padding: 0.625rem 0.3125rem;
}

.footer-links {
    display: flex;
    align-items: center;
    gap: 0;
    flex-wrap: wrap;
    justify-content: center;
}

.footer-legal a {
    display: inline-flex;
    align-items: center;
    color: var(--neutral-650);
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 400;
    transition: color var(--transition-fast);
}

.footer-legal a:hover {
    color: var(--green-500);
}

.footer-legal a.footer-social + a.footer-social {
    margin-left: 0.65rem;
}

.footer-legal svg {
    display: block;
}

.footer-separator {
    color: var(--neutral-650);
    opacity: 0.5;
    margin: 0 0.75rem;
    font-size: 0.8rem;
    line-height: 1;
}

.footer-copyright {
    font-size: 0.75rem;
    color: var(--neutral-650);
    opacity: 0.7;
    font-weight: 400;
}

/* Desktop */
@media (min-width: 769px) {
    .footer-legal {
        padding: 0;
    }
}

/* Margen inferior (uroks, u50 y progreso) */
.footer-legal {
    margin-top: 3.5rem;
    padding-bottom: 2rem;
}

/* Móvil */
@media (max-width: 768px) {
    .footer-legal {
        margin-top: 2rem;
        padding-bottom: 1.5rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   12. NAV MOBILE
   ═══════════════════════════════════════════════════════════════════════════ */

/* --- Barra inferior ----------------------------------------------------- */

.barra-movil {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3.5rem;
    background: var(--cream-100);
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    gap: 0;
    box-shadow: 0 -0.125rem 0.625rem var(--shadow-sm-color);
    z-index: calc(var(--z-menu-mobile) + 1);
    border-top: 0.0625rem solid var(--cream-300);
}

.btn-barra {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: var(--spacing-xs) 0.15rem;
    cursor: pointer;
    color: var(--color-text);
    min-width: 0;
}

.btn-barra svg {
    width: 1.25rem;
    height: 1.25rem;
    margin-bottom: 0.125rem;
}

.btn-barra span {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: -0.0125rem;
}

.btn-barra:active {
    opacity: 0.7;
}

a.btn-barra {
    text-decoration: none;
    line-height: 1;
    box-sizing: border-box;
    vertical-align: middle;
}

a.btn-barra svg {
    margin-bottom: 0.125rem;
}

/* Desktop */
@media (min-width: 769px) {
    .barra-movil {
        display: none;
    }
}

/* --- Menús móvil base --------------------------------------------------- */

.menu-mobile-help,
.menu-mobile-search {
    display: none;
    position: fixed;
    bottom: 3.75rem;
    background: var(--cream-100);
    border-radius: var(--radius-md);
    box-shadow: 0 0.25rem 1.25rem var(--shadow-md-color);
    z-index: var(--z-menu-mobile);
}

.menu-mobile-more {
    display: none;
    position: fixed;
    bottom: 3.75rem;
    z-index: var(--z-menu-mobile);
}

.menu-mobile-help.activo,
.menu-mobile-search.activo,
.menu-mobile-more.activo {
    display: block;
}

/* --- Menú ayuda --------------------------------------------------------- */

.menu-mobile-help {
    left: 50%;
    top: 46%;
    bottom: auto;
    transform: translate(-50%, -50%);
    max-height: 78vh;
    height: auto;
    width: 90%;
    overflow-y: auto;
    padding: 1rem 1.25rem;
    border-radius: var(--radius-md);
}

/* --- Menú búsqueda ------------------------------------------------------ */

.menu-mobile-search {
    top: 11.25rem;
    left: 0.9375rem;
    right: 0.9375rem;
    padding: 1.5625rem 1.25rem;
    max-height: 60vh;
    overflow-y: auto;
    bottom: auto;
    box-shadow: 0 0.5rem 1.875rem var(--shadow-xl-color);
    border-radius: var(--radius-md);
}

.search-note-mobile {
    font-size: 0.85rem;
    text-align: center;
    color: var(--cream-text);
    font-style: italic;
    margin: 0 0 var(--spacing-md);
    line-height: 1.4;
}

.menu-mobile-search input {
    width: 100%;
    padding: var(--spacing-sm);
    border: 0.125rem solid var(--neutral-400);
    border-radius: var(--radius-base);
    font-size: 0.875rem;
    margin-bottom: var(--spacing-sm);
    font-family: inherit;
}

.search-results-movil {
    max-height: 15.625rem;
    overflow-y: auto;
}

.search-results-movil .search-result-item {
    padding: var(--spacing-sm);
    border-bottom: 0.0625rem solid var(--cream-300);
    font-size: 1.0625rem;
    cursor: pointer;
    line-height: 1.5;
}

.search-results-movil .search-result-item:hover {
    background: var(--cream-100);
}

/* --- Menú más opciones -------------------------------------------------- */

.menu-mobile-more {
    right: var(--spacing-sm);
    left: auto;
    min-width: 8.75rem;
    bottom: 5rem;
}

.ancla-movil {
    display: block;
    padding: 0.2rem 0.4rem;
    width: 60%;
    margin-left: auto;
    margin-right: 0.5rem;
    text-decoration: none;
    font-size: 0.7rem;
    font-weight: 700;
    text-align: center;
    border-radius: 0.4rem;
    border: 0.0625rem solid var(--text-alpha-10);
    margin-bottom: var(--spacing-sm);
    transition: all var(--transition-normal);
    transform: translateY(-0.625rem);
}

.ancla-movil:last-child {
    margin-bottom: 0;
}

/* Colores específicos para anclas móviles */
.ancla-movil.constructor-ancla {
    background: var(--cream-200);
    color: var(--cream-text);
}

@media (hover: hover) {
    .ancla-movil:hover {
        transform: translateX(-0.3125rem);
    }
}

/* --- Overlay ------------------------------------------------------------ */

.overlay-movil {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 3.5rem;
    background: var(--overlay-light);
    backdrop-filter: blur(0.1875rem);
    z-index: var(--z-bar);
    transition: opacity var(--transition-normal);
    opacity: 0;
}

.overlay-movil.activo {
    display: block;
    opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════
   13. NAV DESKTOP
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Ocultar en móvil ───────────────────────────────────────────────────── */

.float-menu,
.scroll-anchor,
.menu-overlay,
.side-panel,
.panel-overlay {
    display: none;
}

/* ─── Highlight búsqueda (global) ────────────────────────────────────────── */

.search-highlight {
    background-color: var(--yellow-100);
    transition: background-color var(--transition-normal);
}

@media (max-width: 768px) {
    .panel-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--overlay-light);
        z-index: var(--z-menu-mobile);
    }

    .panel-overlay.active {
        display: block;
    }
}

/* ─── Desktop ────────────────────────────────────────────────────────────── */

@media (min-width: 769px) {

    /* --- Ocultar menús móvil --- */
    .menu-mobile-help,
    .menu-mobile-search,
    .menu-mobile-more,
    .overlay-movil {
        display: none;
    }

    .float-menu,
    .menu-overlay,
    .side-panel,
    .panel-overlay {
        display: block;
    }

    .scroll-anchor.visible {
        display: flex;
    }

    /* Ocultar anclas al girar móvil a horizontal */
    @media (orientation: landscape) and (max-height: 500px) {
        .scroll-anchor,
        .scroll-anchor.visible {
            display: none;
        }
    }

    /* --- Menú flotante izquierda --- */
    .float-menu {
        position: fixed;
        bottom: 1.875rem;
        left: 1.25rem;
        z-index: var(--z-bar-top);
    }

    .float-menu-btn {
        width: 2.15rem;
        height: 2.15rem;
        border-radius: var(--radius-circle);
        background: var(--cream-50);
        border: 0.0625rem solid var(--text-alpha-10);
        box-shadow: var(--shadow-sm);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all var(--transition-normal);
        color: var(--color-text);
        font-size: 1.375rem;
        font-weight: 700;
        position: relative;
        overflow: hidden;
    }

    .float-menu-btn:hover {
        transform: translateY(-0.125rem);
        box-shadow: var(--shadow-md);
        background: var(--neutral-300);
    }

    .float-menu-btn svg {
        width: 1.05rem;
        height: 1.05rem;
        transition: opacity var(--transition-normal);
        opacity: 1;
    }

    .float-menu-btn.active svg {
        opacity: 0;
    }

    .float-menu-btn::after {
        content: '✕';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        opacity: 0;
        font-size: 1rem;
        color: currentColor;
        transition: opacity var(--transition-normal);
    }

    .float-menu-btn.active::after {
        opacity: 1;
    }

    .float-menu-items {
        position: absolute;
        bottom: 2.8rem;
        left: 0;
        display: none;
        flex-direction: column;
        gap: var(--spacing-xs);
    }

    .float-menu-items.active {
        display: flex;
    }

    .float-menu-item {
        background: var(--cream-50);
        border-radius: var(--radius-float);
        padding: 0.3rem var(--spacing-sm);
        line-height: 1.4;
        box-shadow: var(--shadow-sm);
        white-space: nowrap;
        cursor: pointer;
        transition: all var(--transition-normal);
        color: var(--color-text);
        font-size: 0.7rem;
        font-weight: 700;
        text-decoration: none;
        border: 0.0625rem solid var(--text-alpha-10);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.3125rem;
        min-width: 5.25rem;
        text-align: center;
        margin-bottom: 0.4rem;
    }

    .float-menu-item:hover {
        transform: translateX(0.3125rem);
        box-shadow: var(--shadow-md);
        background: var(--neutral-300);
    }

    /* --- Scroll ancla derecha --- */
    .scroll-anchor {
        position: fixed;
        right: 1.25rem;
        top: 35%;
        transform: translateY(-35%);
        flex-direction: column;
        gap: 0.875rem;
        z-index: var(--z-bar);
    }

    .scroll-anchor-item {
        padding: 0.3rem 0.45rem;
        font-size: 0.66rem;
        line-height: 1.4;
        font-weight: 700;
        color: var(--text-alpha-70);
        cursor: pointer;
        transition: all var(--transition-normal);
        text-decoration: none;
        text-align: center;
        background: var(--surface-medium);
        backdrop-filter: blur(0.5rem);
        border-radius: var(--radius-float);
        border: 0.0625rem solid var(--text-alpha-10);
        min-width: auto;
    }

    .scroll-anchor-item:hover {
        color: var(--color-text);
        background: var(--surface-bright);
        transform: translateX(-0.3125rem);
        border-color: var(--green-alpha-30);
    }

    /* --- Overlays --- */
    .menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: calc(var(--z-bar) - 1);
        display: none;
    }

    .menu-overlay.active {
        display: block;
    }

    .panel-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--overlay-light);
        z-index: 998;
        display: none;
    }

    .panel-overlay.active {
        display: block;
    }

    /* --- Paneles laterales --- */
    .side-panel {
        position: fixed;
        left: -20rem;
        top: 45%;
        transform: translateY(-50%);
        width: 18.75rem;
        max-height: 80vh;
        background: var(--cream-100);
        border-radius: var(--radius-xl);
        padding: var(--spacing-lg);
        box-shadow: var(--shadow-xl);
        z-index: var(--z-overlay);
        transition: left var(--transition-normal);
        overflow-y: auto;
        will-change: left;
        display: block;
    }

    #helpPanel {
        left: -20rem;
    }

    #helpPanel.active {
        left: 3.125rem;
        right: auto;
    }

    .side-panel.active,
    #searchPanel.active {
        left: 5rem;
    }

    #searchPanel {
        width: 28rem;
        max-width: 90vw;
        left: -32rem;
        background: var(--cream-100);
        max-height: 85vh;
        min-height: auto;
        display: flex;
        flex-direction: column;
    }

    .side-panel h3 {
        color: var(--color-white);
        text-align: center;
        margin-bottom: var(--spacing-lg);
        font-size: 1.1875rem;
        font-weight: 700;
        text-shadow: 0.125rem 0.125rem 0.25rem var(--shadow-md-color);
    }

    .side-panel::-webkit-scrollbar {
        width: 0.5rem;
    }

    .side-panel::-webkit-scrollbar-track {
        background: var(--surface-ghost);
        border-radius: var(--radius-lg);
    }

    .side-panel::-webkit-scrollbar-thumb {
        background: var(--surface-light);
        border-radius: var(--radius-lg);
    }

    .side-panel::-webkit-scrollbar-thumb:hover {
        background: var(--surface-medium);
    }

    /* --- Panel búsqueda --- */
    .search-note {
        font-size: 0.8125rem;
        text-align: center;
        margin-bottom: 0.9375rem;
        font-style: italic;
        color: var(--cream-text);
    }

    .search-input {
        width: 100%;
        padding: var(--spacing-sm);
        border: 0.125rem solid var(--neutral-400);
        border-radius: var(--radius-base);
        font-size: 0.875rem;
        margin-bottom: var(--spacing-sm);
        font-family: inherit;
    }

    .search-button {
        width: 100%;
        padding: var(--spacing-sm);
        background: var(--green-500);
        color: var(--color-white);
        border: none;
        border-radius: var(--radius-base);
        font-weight: 600;
        cursor: pointer;
        font-size: 0.875rem;
        transition: all var(--transition-fast);
    }

    .search-button:hover {
        background: var(--green-600);
        transform: translateY(-0.125rem);
        box-shadow: 0 0.25rem 0.75rem var(--shadow-md-color);
    }

    .search-results {
        margin-top: 0.9375rem;
        max-height: 25rem;
        overflow-y: auto;
    }

    .search-result-item {
        background: var(--surface-frosted);
        padding: var(--spacing-sm);
        margin: 0.3125rem 0;
        border-radius: var(--radius-sm);
        color: var(--color-text);
        font-size: 0.8125rem;
        line-height: 1.6;
    }

    .search-result-item.clickable {
        cursor: pointer;
        padding: 0.875rem 1rem;
        margin-bottom: var(--spacing-sm);
        border-radius: var(--radius-md);
        font-size: 0.875rem;
        font-weight: 500;
        border-left: 0.1875rem solid transparent;
        transition: all var(--transition-fast);
    }

    .search-result-item.clickable:hover {
        background: var(--surface-light);
        border-left-color: var(--green-500);
        transform: translateX(0.3125rem);
    }

    .search-input-wrapper {
        position: relative;
    }

    .search-suggestions {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--color-white);
        border-radius: 0 0 var(--radius-base) var(--radius-base);
        box-shadow: 0 0.25rem 0.75rem var(--shadow-md-color);
        max-height: 31.25rem;
        overflow-y: auto;
        z-index: 1001;
        display: none;
    }

    .search-suggestions.active {
        display: block;
    }

    /* --- Navegación en panel --- */
    .nav-section {
        margin-bottom: var(--spacing-lg);
    }

} 

/* ═══════════════════════════════════════════════════════════════════════════
   14. NAV MODAL
   ═══════════════════════════════════════════════════════════════════════════ */

/* --- Tema Group --------------------------------------------------------- */

.tema-group {
    margin-bottom: 1.5625rem;
    padding-bottom: 0.9375rem;
    border-bottom: 0.0625rem solid var(--cream-300);
}

.tema-group:last-child {
    border-bottom: none;
}

.tema-group h4 {
    color: var(--color-text);
    margin-bottom: 0.625rem;
    font-size: 0.8125rem;
    font-weight: 700;
    padding: 0.75rem;
    background: linear-gradient(135deg, var(--cream-200) 0%, var(--cream-300) 100%);
    border-radius: var(--radius-base);
    box-shadow: 0 0.125rem 0.375rem var(--cream-alpha-15);
    transition: background var(--transition-normal),
                box-shadow var(--transition-normal);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.tema-group h4:hover {
    background: linear-gradient(135deg, var(--cream-300) 0%, var(--cream-200) 100%);
    box-shadow: 0 0.25rem 0.625rem var(--cream-alpha-15);
}

.tema-number,
.tema-group h4 .header-ru {
    display: block;
    width: 100%;
    font-size: 1rem;
    font-weight: bold;
}

.tema-number::after,
.tema-group h4 .header-ru::after {
    content: none;
}

.tema-group h4 .header-es {
    display: block;
    width: 100%;
    font-size: 0.8125rem;
    font-style: italic;
    color: var(--neutral-650);
}

/* --- Lesson Link -------------------------------------------------------- */

.lesson-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0.5rem 0.9375rem;
    margin: 0.3125rem 0;
    background: var(--cream-100);
    color: var(--color-text);
    text-decoration: none;
    border-radius: var(--radius-base);
    font-size: 1rem;
    transition: background var(--transition-normal),
                transform var(--transition-normal),
                box-shadow var(--transition-normal);
}

.lesson-link:hover {
    background: linear-gradient(135deg, var(--cream-200) 0%, var(--cream-300) 100%);
    color: var(--color-text);
    transform: translateX(0.3125rem);
}

.lesson-link .lesson-number,
.lesson-link .header-ru {
    display: block;
    width: 100%;
    font-size: 1rem;
    font-weight: 700;
}

.lesson-link .lesson-number::after,
.lesson-link .header-ru::after {
    content: none;
}

.lesson-link .header-es {
    display: block;
    width: 100%;
    font-style: italic;
    color: var(--neutral-650);
    font-size: 0.8125rem;
}

/* Desktop */
@media (min-width: 769px) {
    .tema-group h4 {
        font-size: 1.3125rem;
        display: block;
        text-align: left;
    }

    .tema-number,
    .tema-group h4 .header-ru {
        display: inline;
        font-size: 1.25rem;
    }

    .tema-number::after {
        content: ': ';
    }

    .tema-group h4 .header-ru::after {
        content: ' | ';
    }

    .tema-group h4 .header-es {
        display: inline;
        font-size: 1.0625rem;
    }

    .lesson-link {
        display: block;
        text-align: left;
        font-size: 1.1875rem;
    }

    .lesson-link .lesson-number,
    .lesson-link .header-ru {
        display: inline;
        font-size: 1.125rem;
        font-weight: 500;
    }

    .lesson-link .lesson-number::after {
        content: ': ';
    }

    .lesson-link .header-ru::after {
        content: ' | ';
    }

    .lesson-link .header-es {
        display: inline;
        font-size: 1.0625rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   15. EXERCISES
   ═══════════════════════════════════════════════════════════════════════════ */

/* --- Sección y encabezado ----------------------------------------------- */

.exercise-section,
.test-section {
    padding: 2.2rem 0.9375rem;
}

.exercise-section {
    background: var(--green-50);
}

.exercise-section > h2:first-child,
.test-section h2 {
    margin-top: 0;
    margin-left: 0.175rem;
    margin-right: 0.175rem;
    margin-bottom: 0.5rem;
    text-transform: none;
}

.exercise-section > h2:first-child {
    background: var(--gradient-green-light);
    color: var(--color-success-dark);
    box-shadow: 0 0.125rem 0.375rem rgba(46, 125, 50, 0.4);
}

.test-section h2 {
    background: var(--pink-300);
    color: var(--color-test);
    box-shadow: 0 0.125rem 0.375rem rgba(136, 14, 79, 0.2);
}

.exercise-number {
    background: var(--gradient-green-light);
    color: var(--color-success-dark);
    padding: 0.1875rem 0;
    box-shadow: 0 0.125rem 0.375rem var(--green-light-alpha-30);
}

.test-number {
    background: linear-gradient(135deg, var(--pink-700) 0%, var(--pink-600) 100%);
    color: var(--color-test);
    padding: 0;
    box-shadow: 0 0.125rem 0.375rem var(--pink-alpha-30);
}

/* --- Exercise item ------------------------------------------------------ */

.exercise-item {
    background: var(--color-white);
    padding: 1.75rem 1.25rem 2rem;
    border-radius: var(--radius-lg);
    margin: var(--spacing-lg) 0.175rem;
    box-shadow: var(--shadow-sm);
}

.exercise-item strong {
    display: block;
    margin-bottom: var(--spacing-sm);
    font-size: clamp(0.875rem, 0.6518rem + 1.1161vw, 1.1875rem);
    color: var(--color-success-dark);
    line-height: 1.6;
}

.dictation-btn-wrapper {
    position: relative;
}

.exercise-translation {
    display: none;
}

.exercise-translation.is-visible {
    display: block;
    position: absolute;
    bottom: 100%;
    left: -0.9375rem;
    width: 78%;
    margin-bottom: 1.5625rem;
    text-align: center;
    color: var(--color-success-dark);
    font-weight: 700;
    font-size: clamp(0.875rem, 0.6518rem + 1.1161vw, 1.1875rem);
}

@media (max-width: 768px) {
    .exercise-translation.is-visible {
        position: static;
        width: 100%;
        margin: 0;
        line-height: 1.4;
    }
}

.exercise-hint {
    display: block;
    font-style: italic;
    font-size: clamp(0.725rem, 0.7rem + 0.2vw, 0.825rem);
    color: var(--color-success-dark);
    line-height: 1.6;
    margin-top: -1rem;
    padding-left: 1.8rem;
}

@media (max-width: 768px) {
    .exercise-hint {
        padding-left: 0;
        margin-left: -0.35rem;
        margin-top: -0.75rem;
        font-size: 0.68rem;
        white-space: nowrap;
    }

    .exercise-hint .section-icon {
        margin-right: 0.25rem;
    }
}

/* Desktop */
@media (min-width: 769px) {
    .exercise-section {
        padding: 3.5rem var(--spacing-lg) 4rem;
        margin-top: var(--spacing-md);
    }

    .exercise-section > h2:first-child {
        margin-bottom: 1.75rem;
    }

    .exercise-number {
        padding: 0.25rem 0;
    }

    .exercise-item {
        padding: 2.5rem 2rem 2.75rem;
        margin: 1.5rem 0.175rem;
    }

    .exercise-item strong {
        margin-bottom: 1rem;
    }
}

/* --- Feedback ----------------------------------------------------------- */

.feedback-text,
.feedback-center {
    margin-top: 0.9375rem;
    font-size: 0.8125rem;
    font-style: normal;
    text-align: center;
}

.feedback-text.success,
.feedback-center.success {
    color: var(--color-success-dark);
    transform: translateX(-4cm);
}

.feedback-text.error,
.feedback-center.error {
    color: var(--color-error);
    transform: translateX(-4cm);
}

.exercise-card-wrapper .feedback-text,
.exercise-card-wrapper .feedback-center {
    text-align: center;
}

/* --- Input compartido --------------------------------------------------- */

.exercise-input {
    border: 0.125rem solid var(--green-200);
    border-radius: var(--radius-md);
    font-family: inherit;
    transition: all var(--transition-fast);
    color: var(--green-700);
    font-weight: 600;
}

.exercise-input::placeholder,
.answer-input::placeholder {
    color: var(--neutral-600);
    font-weight: 400;
    font-size: 0.875rem;
    font-style: italic;
}

.exercise-input:focus {
    outline: none;
    border-color: var(--green-400);
    box-shadow: 0 0 0 0.1875rem var(--green-input-alpha);
}

/* --- Click en palabras -------------------------------------------------- */

.words-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1.25rem 0;
}

.word-clickable {
    height: clamp(1.75rem, 1.5rem + 1.25vw, 2.25rem);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--color-white);
    border: 0.125rem solid var(--green-200);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: clamp(1rem, 0.8214rem + 0.8929vw, 1.25rem);
    color: var(--green-700);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    font-family: inherit;
    line-height: 1.2;
}

.word-clickable:hover:not(.used) {
    background: var(--green-50);
    border-color: var(--green-400);
}

.word-clickable.used {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

.answer-input,
.answer-input-long {
    width: 100%;
    height: clamp(2.125rem, 1.7679rem + 1.7857vw, 2.625rem);
    padding: var(--spacing-sm);
    border: 0.125rem solid var(--green-200);
    border-radius: var(--radius-md);
    font-size: clamp(0.875rem, 0.6518rem + 1.1161vw, 1.1875rem);
    margin: 1.25rem 0;
    font-family: inherit;
    background: var(--color-white);
}

.answer-input {
    pointer-events: none;
    color: var(--green-700);
    font-weight: 600;
}

.answer-input-long {
    display: flex;
    align-items: center;
    gap: 0.125rem;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    cursor: default;
}

.audio-exercise-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin: 1.25rem 0 1.5625rem 0;
    justify-content: center;
    align-items: center;
}

/* Desktop */
@media (min-width: 769px) {
    .words-container {
        gap: var(--spacing-sm);
        margin: 1.5rem 0;
    }

    .word-clickable {
        height: 2.25rem;
        padding: var(--spacing-xs) var(--spacing-md);
    }

    .answer-input {
        padding: 0 0.875rem;
        margin: 1.25rem 0 0.75rem;
    }

    .answer-input-long {
        margin: 1.25rem 0 0.75rem;
    }

    .audio-exercise-group {
        gap: var(--spacing-md);
        flex-wrap: wrap;
        justify-content: flex-end;
        margin: 0.75rem 0 0.5rem;
    }
}

/* --- Escucha y ordena --------------------------------------------------- */

.answer-input:empty::before,
.answer-input-long:empty::before {
    content: attr(data-placeholder);
    color: var(--neutral-600);
    font-weight: 400;
    font-size: 0.875rem;
    font-style: italic;
}

.word-in-answer {
    display: inline-block;
    font-size: clamp(0.875rem, 0.6518rem + 1.1161vw, 1.1875rem);
    font-weight: 500;
    padding: 0 0.125rem;
    line-height: 1;
    color: var(--green-700);
    cursor: pointer;
}

/* Desktop */
@media (min-width: 769px) {
    .answer-input-long {
        padding: var(--spacing-sm) 0.875rem;
        gap: 0.5rem;
    }
}

/* --- Bottom controls ---------------------------------------------------- */

.bottom-controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-sm);
    margin: 1.25rem 0 1.5625rem 0;
}

.bottom-controls .audio-btn-letter {
    order: 1;
}

.bottom-controls::after {
    content: '';
    flex-basis: 100%;
    height: 0;
    order: 5;
}

@media (max-width: 768px) {
    .bottom-controls {
        flex-wrap: nowrap;
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
    }
}

.audio-btn-letter,
.listen-btn {
    background: var(--green-50);
    border: 0.125rem solid var(--green-200);
    border-radius: var(--radius-base);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-normal);
    box-shadow: 0 0.125rem 0.5rem var(--shadow-sm-color);
    flex-shrink: 0;
}

.audio-btn-letter {
    width: clamp(2.25rem, 1.625rem + 3.125vw, 3.125rem);
    height: clamp(2rem, 1.6429rem + 1.7857vw, 2.5rem);
    position: relative;
    margin: 0 0.375rem;
}

.audio-btn-letter svg,
.listen-btn svg {
    width: clamp(1.125rem, 0.8571rem + 1.3393vw, 1.5rem);
    height: clamp(1.125rem, 0.8571rem + 1.3393vw, 1.5rem);
    fill: var(--green-700);
}

.audio-btn-letter:hover:not(.blocked),
.listen-btn:hover:not(:disabled) {
    background: var(--green-100);
    border-color: var(--green-400);
    transform: translateY(-0.125rem);
    box-shadow: 0 0.25rem 0.75rem var(--green-alpha-30);
}

.audio-btn-letter.blocked,
.listen-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.word-tooltip {
    position: absolute;
    top: 100%;
    margin-top: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--green-50);
    color: var(--green-700);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-size: 1.0625rem;
    font-weight: 600;
    white-space: nowrap;
    z-index: var(--z-dropdown);
    animation: fadeInOut 2s ease forwards;
    pointer-events: none;
    box-shadow: 0 0.25rem 0.75rem var(--green-alpha-40);
}

/* Desktop */
@media (min-width: 769px) {
    .bottom-controls {
        gap: var(--spacing-md);
        justify-content: flex-start;
        flex-wrap: nowrap;
        margin: 1rem 0 0.5rem;
    }

    .bottom-controls .audio-btn-letter {
        order: 0;
        margin-right: var(--spacing-lg);
    }

    .bottom-controls .audio-btn-letter:last-of-type {
        margin-right: 0;
    }

    .bottom-controls::after {
        display: none;
    }
}

/* --- Escucha y escribe -------------------------------------------------- */

.audio-exercise-group .listen-btn {
    width: clamp(2.25rem, 1.625rem + 3.125vw, 3.125rem);
    height: clamp(2rem, 1.6429rem + 1.7857vw, 2.5rem);
    flex: 0 0 auto;
    align-self: center;
    margin-bottom: 0.9375rem;
    order: -2;
}

.audio-exercise-group .exercise-input {
    width: 100%;
    font-size: clamp(0.875rem, 0.6518rem + 1.1161vw, 1.1875rem);
    height: clamp(2.125rem, 1.7679rem + 1.7857vw, 2.625rem);
    padding: var(--spacing-xs) var(--spacing-sm);
    flex: 0 0 100%;
    margin-bottom: 0.9375rem;
}

/* Desktop */
@media (min-width: 769px) {
    .audio-exercise-group .listen-btn {
        order: 0;
        margin-right: auto;
        margin-bottom: 0;
    }

    .audio-exercise-group .exercise-input {
        flex: 0 0 100%;
        width: 100%;
        padding: 0 0.875rem;
        margin-bottom: 0.75rem;
        order: -1;
    }
}

/* --- Sistema de tarjetas ------------------------------------------------ */

.exercise-card-wrapper .exercise-item {
    display: none;
}

.exercise-card-wrapper .exercise-item.active {
    display: block;
    animation: exerciseCardIn 0.3s ease;
}

@keyframes exerciseCardIn {
    from { opacity: 0; transform: translateX(1.875rem); }
    to   { opacity: 1; transform: translateX(0); }
}

/* --- Barra de progreso ejercicios --------------------------------------- */

.exercise-progress {
    margin-bottom: var(--spacing-lg);
    padding: 0 0.175rem;
}

.exercise-progress-text {
    font-weight: 700;
    font-size: clamp(0.9375rem, 0.7946rem + 0.7143vw, 1.1875rem);
    display: block;
    text-align: center;
    margin-bottom: var(--spacing-sm);
    color: var(--color-success-dark);
}

.exercise-progress-bar {
    height: 0.375rem;
    background: var(--green-100);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.exercise-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--green-500), var(--green-300));
    transition: width 0.4s ease;
    width: 0%;
}

/* Desktop */
@media (min-width: 769px) {
    .exercise-progress {
        margin-bottom: 1.75rem;
    }

    .exercise-progress-text {
        margin-bottom: var(--spacing-md);
    }
}

/* --- Botón acción (Проверить / Повторить) ------------------------------- */

.action-btn {
    font-size: clamp(0.875rem, 0.7857rem + 0.4464vw, 1rem);
    padding: var(--spacing-sm) var(--spacing-md);
    height: clamp(1.875rem, 1.6071rem + 1.3393vw, 2.25rem);
    min-width: 7rem;
    border: none;
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition-normal),
                transform var(--transition-normal),
                box-shadow var(--transition-normal);
    box-shadow: 0 0.125rem 0.5rem var(--shadow-sm-color);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.action-btn.state-check {
    background: var(--gradient-green-primary);
    color: var(--color-white);
}

.action-btn.state-check:hover:not(:disabled) {
    background: var(--gradient-green-light);
    transform: translateY(-0.125rem);
    box-shadow: 0 0.25rem 0.75rem var(--green-alpha-30);
}

.action-btn.state-retry {
    background: var(--gradient-red-strong);
    color: var(--color-white);
}

@media (hover: hover) and (pointer: fine) {
    .action-btn.state-retry:hover {
        background: var(--gradient-red-strong-hover);
        transform: translateY(-0.125rem);
        box-shadow: 0 0.25rem 0.75rem var(--red-alpha-30);
    }
}

.action-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

@media (max-width: 768px) {
    .action-btn.state-retry,
    .action-btn.state-retry:disabled {
        opacity: 1;
        cursor: pointer;
        pointer-events: auto;
    }
}

/* --- Wrapper botones acción --------------------------------------------- */

.action-btn-wrapper {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin: 1.25rem 0 0.5rem 0;
}

.action-btn-wrapper .exercise-next-btn {
    flex: 0 0 78%;
    margin-top: 0;
}

.action-btn-wrapper .action-btn {
    flex: 1;
}

/* Desktop */
@media (min-width: 769px) {
    .action-btn-wrapper {
        margin: 1.5rem 0 0.75rem 0;
        gap: var(--spacing-lg);
    }
}

/* --- Botón siguiente ejercicio ------------------------------------------ */

.exercise-next-btn {
    display: none;
    height: clamp(1.875rem, 1.6071rem + 1.3393vw, 2.25rem);
    border: none;
    border-radius: var(--radius-md);
    background: var(--green-100);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: clamp(0.875rem, 0.7857rem + 0.4464vw, 1rem);
    font-weight: 600;
    color: var(--green-700);
    transition: all var(--transition-normal);
    box-shadow: 0 0.125rem 0.5rem var(--shadow-sm-color);
}

.exercise-next-btn.visible {
    display: flex;
}

.exercise-next-btn:hover {
    background: var(--green-200);
    transform: translateY(-0.125rem);
    box-shadow: 0 0.25rem 0.75rem var(--green-alpha-30);
}

.exercise-next-btn svg {
    width: 1.25rem;
    height: 1.25rem;
    fill: none;
    stroke: var(--green-700);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.exercise-item.answered-correct .exercise-next-btn {
    background: var(--gradient-green-primary);
    color: var(--color-white);
}

.exercise-item.answered-correct .exercise-next-btn svg {
    stroke: var(--color-white);
}

.exercise-item.answered-correct .exercise-next-btn:hover {
    background: var(--gradient-green-light);
}

.exercise-item.answered-wrong .exercise-next-btn {
    background: var(--green-50);
    color: var(--green-700);
    border: 1.5px solid var(--green-300);
}

.exercise-item.answered-wrong .exercise-next-btn svg {
    stroke: var(--green-700);
}

.exercise-item.answered-wrong .exercise-next-btn:hover {
    background: var(--green-100);
    border-color: var(--green-400);
}

/* --- Pantalla de resultados --------------------------------------------- */

.exercise-results {
    display: none;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    margin: 0 0.175rem;
    box-shadow: var(--shadow-sm);
    text-align: center;
    animation: exerciseCardIn 0.3s ease;
}

.exercise-results.visible {
    display: block;
}

.exercise-results-title {
    font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
    font-weight: 700;
    color: var(--color-success-dark);
    margin-bottom: var(--spacing-lg);
}


.exercise-empty {
    text-align: center;
    color: #999;
    padding: 20px 10px;
}

.result-item.retry {
    border-left-color: var(--yellow-400);
}

.retry-mark {
    display: block;
    margin-top: 0.125rem;
    color: var(--green-700);
    font-weight: 700;
    font-size: clamp(0.75rem, 0.6607rem + 0.4464vw, 0.8438rem);
}

.exercise-results-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    max-height: 22.5rem;
    overflow-y: auto;
    padding-right: 0.5rem;
}

.exercise-results .test-results-column.incorrect h4 {
    background: var(--red-50);
    color: var(--red-600);
}

.exercise-restart-btn {
    font-size: 1rem;
    padding: 0.625rem 2rem;
    font-weight: 700;
    background: var(--gradient-green-primary);
    color: var(--color-white);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    box-shadow: 0 0.125rem 0.5rem var(--green-alpha-30);
    transition: all var(--transition-normal);
}

.exercise-restart-btn:hover {
    background: var(--gradient-green-light);
    transform: translateY(-0.125rem);
    box-shadow: 0 0.25rem 0.75rem var(--green-alpha-40);
}

/* Desktop */
@media (min-width: 769px) {
    .exercise-results {
        padding: 2rem var(--spacing-xl);
        margin: 1.5rem 0.175rem 0;
    }

    .exercise-results-title {
        margin-bottom: 1.5rem;
    }

}

/* --- Móvil: pantalla de resultados compacta ----------------------------- */

@media (max-width: 768px) {
    .exercise-results {
        padding: var(--spacing-md);
    }

    .exercise-results-title {
        display: none;
    }

    .exercise-results .test-results-grid {
        gap: var(--spacing-sm);
        margin-bottom: var(--spacing-md);
    }

    .exercise-empty {
        padding: var(--spacing-xs) 0;
        font-size: 0.8125rem;
    }
}

/* --- Desktop ajustes generales ------------------------------------------ */

@media (min-width: 769px) {
    .action-btn {
        font-size: 1rem;
        padding: var(--spacing-sm) var(--spacing-lg);
        height: 2.25rem;
    }

    .feedback-text,
    .feedback-center {
        margin-top: 1.25rem;
    }

    .exercise-hint {
        margin-top: -0.5rem;
        margin-bottom: 0.5rem;
    }
}

@media (max-width: 768px) {
    .exercise-number {
        display: none;
    }

    .word-tooltip {
        font-size: clamp(0.875rem, 0.6518rem + 1.1161vw, 1.1875rem);
    }

    .word-clickable {
        font-size: clamp(0.875rem, 0.6518rem + 1.1161vw, 1.1875rem);
    }

    .exercise-input {
        padding-top: 0;
        padding-bottom: 0;
    }

    .answer-input,
    .answer-input-long,
    .word-in-answer,
    .audio-exercise-group .exercise-input {
        font-size: 0.8rem;
    }

    .answer-input:empty::before,
    .answer-input-long:empty::before,
    .exercise-input::placeholder {
        font-size: 0.55rem;
    }

    div.answer-input {
        display: flex;
        align-items: center;
        height: auto;
        min-height: clamp(2.125rem, 1.7679rem + 1.7857vw, 2.625rem);
        padding-top: 0.4rem;
        padding-bottom: 0.4rem;
        line-height: 1.3;
    }

    .answer-input-long {
        flex-wrap: wrap;
        white-space: normal;
        overflow: visible;
        height: auto;
        min-height: clamp(2.125rem, 1.7679rem + 1.7857vw, 2.625rem);
        padding-top: 0.4rem;
        padding-bottom: 0.4rem;
    }

    .action-btn-wrapper {
        flex-direction: column;
        align-items: center;
    }

    .action-btn-wrapper .exercise-next-btn {
        flex: 0 0 auto;
        width: 85%;
        order: 1;
    }

    .action-btn-wrapper .action-btn {
        flex: 0 0 auto;
        order: 2;
        margin-top: 1.5rem;
    }

    .feedback-text.success,
    .feedback-center.success,
    .feedback-text.error,
    .feedback-center.error,
    .feedback-text.warning,
    .feedback-center.warning {
        transform: none;
        text-align: center;
        width: 100%;
    }
}

/* --- Exercise Info Icon + Abbrev Tooltip (Desktop + Mobile) --- */

.exercise-item {
    position: relative;
}

.exercise-info-icon {
    display: block;
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 1.375rem;
    height: 1.375rem;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: transform var(--transition-fast);
    padding: 0;
    z-index: 2;
}

.exercise-info-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.exercise-info-icon-svg circle:first-child,
.exercise-info-icon-svg line {
    stroke: var(--green-700);
    stroke-width: 1.5;
    stroke-linecap: round;
}

.exercise-info-icon-svg circle:last-child {
    fill: var(--green-700);
}

.exercise-info-icon:hover {
    transform: scale(1.1);
}

.exercise-abbrev-tooltip {
    display: none;
    position: absolute;
    top: 2.5rem;
    right: 0.75rem;
    margin-top: 0.5rem;
    background: var(--color-white);
    padding: 1.5rem 1.75rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    border-top: 3px solid var(--green-500);
    text-align: left;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--neutral-800);
    width: clamp(36rem, 60vw, 46rem);
    z-index: var(--z-tooltip);
}

.exercise-abbrev-tooltip.show {
    display: block;
}

.exercise-abbrev-tooltip::before {
    content: '';
    position: absolute;
    top: -0.5rem;
    right: 1rem;
    border-left: 0.5rem solid transparent;
    border-right: 0.5rem solid transparent;
    border-bottom: 0.5rem solid var(--green-500);
}

.exercise-abbrev-tooltip > strong {
    display: block;
    text-align: center;
    color: var(--green-800);
    font-size: 1.0625rem;
    margin-bottom: 0.15rem;
}

.exercise-abbrev-tooltip > .gray-italic {
    display: block;
    text-align: center;
    color: var(--neutral-650);
    font-size: 0.875rem;
}

.exercise-abbrev-tooltip-divider {
    height: 0.0625rem;
    background: linear-gradient(90deg, transparent, var(--green-300), transparent);
    margin: 0.6rem 0 0.75rem;
}

.exercise-abbrev-tooltip-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1.75rem;
    row-gap: 0.35rem;
}

.exercise-abbrev-tooltip-grid p {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--color-text);
}

.exercise-abbrev-tooltip-grid p b {
    color: var(--green-700);
    font-weight: 600;
}

@media (max-width: 768px) {
    .exercise-info-icon {
        top: 0.55rem;
        right: 0.55rem;
        width: 1.02rem;
        height: 1.02rem;
    }

    .exercise-info-icon-svg circle:first-child,
    .exercise-info-icon-svg line {
        stroke-width: 2.1;
    }

    .exercise-abbrev-tooltip {
        top: 1.5rem;
        left: 0.5rem;
        right: 0.5rem;
        width: auto;
        padding: 1rem 1.15rem;
        z-index: calc(var(--z-menu-mobile) + 1);
    }

    .exercise-abbrev-tooltip::before {
        right: 0.65rem;
    }

    .exercise-abbrev-tooltip-grid {
        grid-template-columns: 1fr;
        row-gap: 0.25rem;
    }

    .exercise-abbrev-tooltip-grid p {
        font-size: 0.8125rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   16. TEST
   ═══════════════════════════════════════════════════════════════════════════ */

/* --- Sección y encabezado ----------------------------------------------- */

.test-section {
    background: linear-gradient(135deg, var(--red-50) 0%, var(--pink-200) 100%);
    position: relative;
}

/* Desktop */
@media (min-width: 769px) {
    .test-section {
        padding: var(--spacing-xxl) var(--spacing-lg);
    }
}

/* --- Preguntas ---------------------------------------------------------- */

.test-question {
    background: var(--color-white);
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-left: 0.175rem;
    margin-right: 0.175rem;
    display: none;
}

.test-question.active {
    display: block;
}

.test-question strong {
    display: block;
    margin-bottom: var(--spacing-md);
    font-size: clamp(1rem, 0.9318rem + 0.3409vw, 1.1875rem);
    color: var(--color-test);
}

.test-options {
    max-width: 100%;
}

.test-option {
    background: var(--neutral-50);
    padding: var(--spacing-sm) var(--spacing-md);
    margin: 0.5rem 0;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color var(--transition-normal),
                border-color var(--transition-normal);
    border: 0.125rem solid transparent;
    font-size: clamp(1rem, 0.8214rem + 0.8929vw, 1.25rem);
    line-height: 1.6;
    color: var(--color-test);
}

.test-option:hover {
    background: var(--yellow-50);
    border-color: var(--yellow-300);
}

.test-correct {
    background: var(--green-100);
    border-color: var(--green-500);
    animation: scaleUp 0.3s;
}

.test-incorrect {
    background: var(--pink-500);
    border-color: var(--color-red);
    animation: shake 0.5s;
}

/* Desktop */
@media (min-width: 769px) {
    .test-question {
        padding: var(--spacing-xl);
    }
    
    .test-question strong {
        margin-bottom: var(--spacing-lg);
    }
}

/* Móvil */
@media (max-width: 768px) {
    .test-number {
        display: none;
    }

    .test-question strong,
    .test-option {
        font-size: clamp(0.875rem, 0.6518rem + 1.1161vw, 1.1875rem);
    }
}

/* --- Progreso ----------------------------------------------------------- */

.test-progress {
    margin-bottom: var(--spacing-lg);
}

.test-progress-text {
    font-weight: 700;
    font-size: clamp(0.9375rem, 0.7946rem + 0.7143vw, 1.1875rem);
    display: block;
    text-align: center;
    margin-bottom: var(--spacing-sm);
    color: var(--color-test);
}

.test-progress-bar {
    height: 0.375rem;
    background: var(--pink-100);
    border-radius: 0.25rem;
    overflow: hidden;
}

.test-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--green-500), var(--green-300));
    transition: width 0.4s ease;
}

/* --- Resultados --------------------------------------------------------- */

.test-results {
    display: none;
    flex-direction: column;
    padding: 1.25rem 0 0 0;
}

.test-results h3 {
    font-size: clamp(1rem, 0.7143rem + 1.4286vw, 1.5rem);
    font-weight: 700;
    margin: 0 0 1.25rem 0;
    text-align: center;
    background: linear-gradient(135deg, var(--pink-200) 0%, var(--pink-300) 100%);
    color: var(--color-test);
    padding: var(--spacing-md);
    border-radius: var(--radius-xl);
    position: relative;
}

.test-results-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    flex: 1;
}

.test-results-column {
    display: flex;
    flex-direction: column;
}

.test-results-column h4 {
    font-size: clamp(0.9375rem, 0.7946rem + 0.7143vw, 1.1875rem);
    text-align: center;
    padding: var(--spacing-sm);
    border-radius: var(--radius-sm);
    margin-bottom: var(--spacing-sm);
    flex-shrink: 0;
}

.test-results-column.correct h4 {
    background: var(--green-50);
    color: var(--green-700);
}

.test-results-column.incorrect h4 {
    background: var(--pink-400);
    color: var(--color-red);
}

#correctList,
#incorrectList {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    flex: 1;
    overflow-y: auto;
    max-height: 22.5rem;
    padding-right: 0.5rem;
}

.result-item {
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--result-item-bg);
    border-radius: var(--radius-sm);
    border-left: 0.25rem solid;
    font-size: clamp(0.75rem, 0.6607rem + 0.4464vw, 0.8438rem);
    text-align: left;
    line-height: 1.3;
    color: var(--color-test);
}

.result-item.correct {
    border-left-color: var(--green-500);
}

.result-item.incorrect {
    border-left-color: var(--color-red);
}

.result-item strong {
    display: block;
    margin-bottom: 0.125rem;
    color: var(--color-test);
}

.result-item .correct-answer {
    color: var(--green-700);
    font-weight: 600;
    display: block;
    margin-top: 0.125rem;
}

/* Desktop */
@media (min-width: 769px) {
    .test-results-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-lg);
    }
}

/* --- Botón reiniciar ---------------------------------------------------- */

.test-restart-btn {
    font-size: clamp(0.8125rem, 0.7054rem + 0.5357vw, 1rem);
    padding: 0.5rem var(--spacing-md);
    margin-top: 1rem;
    margin-bottom: var(--spacing-sm);
    width: 100%;
    display: block;
    font-weight: 700;
    background: var(--gradient-red-primary);
    color: var(--color-white);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    box-shadow: 0 0.125rem 0.5rem var(--red-alpha-30);
    transition: all var(--transition-normal);
}

.test-restart-btn:hover {
    background: var(--gradient-green-medium);
    transform: translateY(-0.125rem);
    box-shadow: 0 0.375rem 1.25rem var(--green-alpha-40);
}

/* Desktop */
@media (min-width: 769px) {
    .test-restart-btn {
        height: 2.25rem;
        position: absolute;
        right: 2.5rem;
        top: 35%;
        transform: translateY(-15%);
        width: auto;
        margin-top: 0;
        margin-bottom: 0;
        display: inline-block;
    }
}

/* --- Scrollbars resultados ---------------------------------------------- */

#correctList::-webkit-scrollbar,
#incorrectList::-webkit-scrollbar {
    width: 0.5rem;
}

#correctList::-webkit-scrollbar-track {
    background: var(--scrollbar-green-track);
    border-radius: 0.25rem;
    margin: 0.25rem 0;
}

#correctList::-webkit-scrollbar-thumb {
    background: var(--gradient-green-light);
    border-radius: 0.25rem;
    border: 0.125rem solid transparent;
    background-clip: padding-box;
    min-height: 2.5rem;
}

#incorrectList::-webkit-scrollbar-track {
    background: var(--scrollbar-red-track);
    border-radius: 0.25rem;
    margin: 0.25rem 0;
}

#incorrectList::-webkit-scrollbar-thumb {
    background: var(--gradient-red-light);
    border-radius: 0.25rem;
    border: 0.125rem solid transparent;
    background-clip: padding-box;
    min-height: 2.5rem;
}

#incorrectList::-webkit-scrollbar-thumb:hover {
    background: var(--gradient-red-primary);
}

/* ═══════════════════════════════════════════════════════════════════════════
   17. TEST PERFECT MODAL
   ═══════════════════════════════════════════════════════════════════════════ */

.perfect-test-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.perfect-test-modal.show {
    opacity: 1;
}

.perfect-test-modal.hiding {
    opacity: 0;
    transition: opacity 0.6s ease;
}

.perfect-test-content {
    background: linear-gradient(135deg, var(--green-50) 0%, var(--green-100) 100%);
    border: 2px solid var(--green-400);
    border-radius: var(--radius-xl);
    padding: 3rem 2.5rem;
    max-width: 600px;
    text-align: center;
    box-shadow: var(--shadow-xl);
    transform: scale(0.9);
    transition: all 0.3s ease;
}

.perfect-test-modal.show .perfect-test-content {
    transform: scale(1);
}

.perfect-test-content.shrinking {
    transform: scale(0.3);
    opacity: 0;
    transition: all 0.6s ease;
}

.perfect-test-content h3 {
    font-size: clamp(1.5rem, 4vw, 2rem);
    color: var(--green-700);
    margin-bottom: 1rem;
    font-weight: 700;
    text-align: center;
}

.perfect-test-content p {
    font-size: clamp(1rem, 3vw, 1.25rem);
    color: var(--color-text);
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 600px) {
    .perfect-test-content {
        padding: 2rem 1.5rem;
        margin: 0 1rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   18. READING
   ═══════════════════════════════════════════════════════════════════════════ */

/* --- Sección y encabezado ----------------------------------------------- */

.reading-section {
    background: var(--yellow-50);
    padding: 2.8rem 0.9375rem 2.2rem;
}

.reading-section h2 {
    background: var(--yellow-100);
    color: var(--yellow-500);
    box-shadow: 0 0.125rem 0.375rem rgba(161, 98, 7, 0.25);
}

/* Desktop */
@media (min-width: 769px) {
    .reading-section {
        margin: var(--spacing-md) 0;
        padding-top: 3.1rem;
    }
    
    .reading-section h2 {
        margin-left: 1rem;
        margin-right: 1rem;
    }
}

/* --- Reading Card (tarjeta única) --------------------------------------- */

.reading-card {
    background: var(--color-white);
    border-radius: var(--radius-md);
    box-shadow: 0 0.25rem 0.75rem var(--shadow-sm-color);
    padding: var(--spacing-lg);
    padding-top: 2.5rem;
    position: relative;
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.reading-card:hover {
    transform: translateY(-0.125rem);
    box-shadow: 0 0.5rem 1.25rem var(--shadow-md-color);
}

.reading-spanish {
    font-size: clamp(1rem, 0.9318rem + 0.3409vw, 1.1875rem);
    line-height: 1.9;
    margin: 0;
}

.reading-transcript {
    color: var(--color-red);
    font-weight: 400;
    font-size: clamp(1rem, 0.9318rem + 0.3409vw, 1.1875rem);
    margin: 0.5rem 0 0 0;
    padding-bottom: 0.75rem;
    line-height: 1.7;
    display: none;
}

.reading-transcript.show {
    display: block;
}

.reading-card .transcript-toggle {
    position: absolute;
    top: 0.5rem;
    left: 0.625rem;
    right: auto;
}

/* --- Móvil: ocultar transcript en lectura ------------------------------- */

@media (max-width: 768px) {
    .reading-card .transcript-toggle {
        display: none;
    }
    
    .reading-transcript {
        display: none;
    }
}

.reading-card .audio-bar {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--neutral-300);
    margin-bottom: 1rem;
}

.reading-translation {
    color: var(--neutral-650);
    font-style: italic;
    font-size: clamp(1rem, 0.9318rem + 0.3409vw, 1.1875rem);
    line-height: 1.8;
    padding-top: 1rem;
    border-top: 1px solid var(--neutral-300);
    margin: 0;
}

/* --- Desktop: márgenes -------------------------------------------------- */

@media (min-width: 769px) {
    .reading-card {
        width: calc(100% - 2rem);
        margin-left: 1rem;
        margin-right: 1rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   19. DIALOGUE
   ═══════════════════════════════════════════════════════════════════════════ */

/* --- Sección y encabezado ----------------------------------------------- */

.dialogue-section {
    background: var(--blue-200);
    padding: 2.5rem 0.9375rem 1.9rem;
    border-radius: var(--radius-lg);
}

.dialogue-section h2 {
    background: var(--blue-250);
    color: var(--blue-700);
    box-shadow: 0 0.125rem 0.375rem rgba(3, 105, 161, 0.2);
}

.dialogue-section .dialogue-box {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

/* Desktop */
@media (min-width: 769px) {
    .dialogue-section h2 {
        margin-left: 1rem;
        margin-right: 1rem;
    }
    
    .dialogue-section .dialogue-box {
        width: calc(100% - 2rem);
        margin-left: 1rem;
        margin-right: 1rem;
    }
}

/* --- Dialogue Box ------------------------------------------------------- */

.dialogue-box {
    background: var(--color-white);
    padding: var(--spacing-lg);
    border-radius: var(--radius-md);
    box-shadow: 0 0.25rem 0.75rem var(--shadow-sm-color);
    margin-bottom: var(--spacing-md);
    position: relative;
    padding-bottom: 1.5625rem;
}

.dialogue-line {
    margin: var(--spacing-sm) 0;
    font-size: clamp(1rem, 0.9318rem + 0.3409vw, 1.1875rem);
    line-height: 1.8;
}

.speaker-a {
    color: var(--color-text);
    font-weight: 600;
}

.speaker-b {
    color: var(--green-700);
    font-weight: 600;
}

/* --- Dialogue Grid (tarjeta única) -------------------------------------- */

.dialogue-card {
    background: var(--color-white);
    border-radius: var(--radius-md);
    box-shadow: 0 0.25rem 0.75rem var(--shadow-sm-color);
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-lg);
    padding-top: 2.5rem;
    position: relative;
}

.dialogue-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.dialogue-col-es {
    padding-right: 1rem;
    border-right: 1px solid var(--neutral-300);
}

.dialogue-col-ru {
    padding-left: 0.5rem;
    color: var(--neutral-650);
    font-style: italic;
}

.dialogue-col-ru .dialogue-line .speaker-a,
.dialogue-col-ru .dialogue-line .speaker-b {
    font-style: normal;
}

/* --- Transcript inline -------------------------------------------------- */

.dialogue-transcript {
    color: var(--color-red);
    font-weight: 500;
    font-size: clamp(0.8125rem, 0.76rem + 0.26vw, 0.9375rem);
    margin: -0.80rem 0 0 1.25rem;
    padding-bottom: 0;
    line-height: 1.3;
    display: none;
}

.dialogue-transcript.show {
    display: block;
}

/* --- Botón transcript --------------------------------------------------- */

.transcript-toggle {
    position: absolute;
    top: 0.5rem;
    right: calc(50% + 1.5rem);
    padding: 0.3rem 0.5rem 0.25rem;
    background: transparent;
    border: 1.5px solid var(--color-red);
    border-radius: var(--radius-sm);
    color: var(--color-red);
    font-family: var(--font-family);
    font-size: 0.625rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 2;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (min-width: 769px) {
    .transcript-toggle {
        left: 0.625rem;
        right: auto;
    }
}

.transcript-toggle:hover {
    background: var(--color-red);
    color: var(--color-white);
}

.transcript-toggle.active {
    background: var(--color-red);
    color: var(--color-white);
}

/* --- Audio bar en tarjeta única ----------------------------------------- */

.dialogue-card .audio-bar {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--neutral-300);
}

/* --- Móvil diálogo ------------------------------------------------------ */

@media (max-width: 768px) {
    .transcript-toggle {
        right: 0.375rem;
        left: auto;
    }

    .dialogue-card {
        padding-top: var(--spacing-lg);
        display: flex;
        flex-direction: column;
    }

    .dialogue-columns {
        display: contents;
    }

    .dialogue-col-es {
        order: 0;
        padding-right: 0;
        border-right: none;
        padding-bottom: 0;
        border-bottom: none;
    }

    .dialogue-card .audio-bar {
        order: 1;
        margin-top: 0;
        padding-top: 1rem;
        border-top: 1px solid var(--neutral-300);
        margin-bottom: 1rem;
    }

    .dialogue-col-ru {
        order: 2;
        padding-left: 0;
        padding-top: 1rem;
        border-top: 1px solid var(--neutral-300);
    }
}

/* --- Desktop: márgenes sección ------------------------------------------ */

@media (min-width: 769px) {
    .dialogue-section .dialogue-card {
        width: calc(100% - 2rem);
        margin-left: 1rem;
        margin-right: 1rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   20. AUDIO
   ═══════════════════════════════════════════════════════════════════════════ */

/* --- Audio Word --------------------------------------------------------- */

.audio-word {
    background-color: var(--green-100);
    padding: 0.0625rem var(--spacing-xs);
    border-radius: var(--radius-base);
    cursor: pointer;
    transition: all var(--transition-fast);
    display: inline;
    font-weight: 700;
    font-size: 0.875rem;
}

.audio-word-card {
    background-color: var(--green-100);
    padding: 0.0625rem var(--spacing-xs);
    border-radius: var(--radius-base);
    cursor: pointer;
    transition: all var(--transition-fast);
    display: inline;
    font-weight: 700;
    font-size: clamp(1rem, 0.9318rem + 0.3409vw, 1.1875rem);
}

/* Móvil: más alto el destacado */
@media (max-width: 768px) {
    .audio-word,
    .audio-word-card {
        padding-top: 0.2rem;
        padding-bottom: 0.2rem;
    }
}

.audio-word-card:hover {
    background-color: var(--green-200);
}

.audio-word-card.playing {
    background-color: var(--green-400);
    color: var(--color-white);
}

.audio-word.audio-marked:not(.playing),
.audio-word-card.audio-marked:not(.playing) {
    background-color: color-mix(in srgb, var(--yellow-400) 40%, var(--color-bg));
}

table .audio-word {
    font-size: clamp(1rem, 0.9318rem + 0.3409vw, 1.1875rem);
}

.example-card .spanish .audio-word {
    font-size: clamp(1rem, 0.9318rem + 0.3409vw, 1.1875rem);
}

@media (min-width: 901px) {
    .slovar-panel-palabras .example-card .spanish .audio-word {
        font-size: clamp(0.95rem, 0.85rem + 0.5vw, 1.1rem);
    }

    .slovar-frases-grid .phrases-card-es .audio-word {
        font-size: clamp(0.95rem, 0.85rem + 0.5vw, 1.1rem);
    }
}

.audio-word:hover {
    background-color: var(--green-200);
}

.audio-word.playing,
.audio-word.playing * {
    background-color: var(--green-400);
    color: var(--color-white);
}

/* --- Control velocidad -------------------------------------------------- */

.audio-speed-control {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
}

.audio-speed-control input[type="range"] {
    flex: 1;
    height: 0.375rem;
    border-radius: 0.1875rem;
    background: var(--neutral-400);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.audio-speed-control input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 1rem;
    height: 1rem;
    border-radius: var(--radius-circle);
    background: var(--color-text);
    cursor: pointer;
    box-shadow: 0 0.125rem 0.375rem var(--shadow-lg-color);
}

.audio-speed-control input[type="range"]::-moz-range-thumb {
    width: 1rem;
    height: 1rem;
    border-radius: var(--radius-circle);
    background: var(--color-text);
    cursor: pointer;
    border: none;
    box-shadow: 0 0.125rem 0.375rem var(--shadow-lg-color);
}

#audioSpeedValueDesktop,
#speedValueMovil {
    font-weight: 700;
    color: var(--color-text);
    min-width: 2.8125rem;
    text-align: right;
    font-size: 0.875rem;
    margin-right: 0.5rem;
}

/* --- Barra audio -------------------------------------------------------- */

.audio-bar {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    max-width: 100%;
    margin-top: var(--spacing-sm);
    border-radius: 3.125rem;
}

.audio-bar-btn {
    width: clamp(2rem, 1.7143rem + 1.4286vw, 2.5rem);
    height: clamp(2rem, 1.7143rem + 1.4286vw, 2.5rem);
    border-radius: var(--radius-circle);
    border: none;
    background: var(--gradient-green-primary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-normal);
    flex-shrink: 0;
    padding: 0;
    line-height: 1;
    box-shadow: 0 0.125rem 0.5rem var(--green-alpha-30);
    position: relative;
}

.audio-bar-btn:hover {
    background: var(--gradient-green-medium);
    transform: translateY(-0.125rem);
    box-shadow: 0 0.25rem 0.75rem var(--green-alpha-30);
}

.audio-bar-btn svg {
    width: clamp(1.125rem, 0.8571rem + 1.3393vw, 1.5rem);
    height: clamp(1.125rem, 0.8571rem + 1.3393vw, 1.5rem);
    fill: var(--color-text);
    display: block;
    transition: opacity var(--transition-fast);
}

.audio-bar-btn .play-icon {
    display: block;
}

.audio-bar-btn .pause-icon {
    display: none;
}

.audio-bar-btn.playing .play-icon {
    display: none;
}

.audio-bar-btn.playing .pause-icon {
    display: block;
}

/* --- Variantes botón audio por contexto --------------------------------- */

.dialogue-box .audio-bar-btn {
    background: var(--blue-100);
}

.dialogue-box .audio-bar-btn:hover {
    background: var(--blue-200);
}

.reading-box .audio-bar-btn {
    background: var(--yellow-200);
}

.reading-box .audio-bar-btn:hover {
    background: var(--yellow-50);
}

/* --- Barra progreso ----------------------------------------------------- */

.audio-bar-progress {
    flex: 1;
    height: 0.375rem;
    background: var(--neutral-400);
    border-radius: 0.25rem;
    position: relative;
    cursor: pointer;
    overflow: visible;
}

.audio-bar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--green-500), var(--green-300));
    background-size: 200% 100%;
    border-radius: 0.25rem;
    position: relative;
    transition: width 0.3s linear;
}

.audio-bar.playing .audio-bar-fill {
    animation: shimmer 1.5s infinite linear;
}

.audio-bar-fill::after {
    content: '';
    position: absolute;
    right: -0.375rem;
    top: 50%;
    transform: translateY(-50%);
    width: 0.75rem;
    height: 0.75rem;
    background: var(--color-text);
    border-radius: var(--radius-circle);
    box-shadow: 0 0.125rem 0.375rem var(--text-alpha-30);
}

.audio-bar-time {
    font-size: clamp(0.75rem, 0.5909rem + 0.7955vw, 1.1875rem);
    color: var(--color-text);
    font-weight: 600;
    white-space: nowrap;
    min-width: 3.75rem;
    text-align: right;
}

/* Desktop */
@media (min-width: 769px) {
    .audio-bar {
        padding: 0.9375rem var(--spacing-lg);
    }
}

/* --- Karaoke ------------------------------------------------------------ */

.karaoke-word {
    display: inline;
    transition: background-color var(--transition-normal), color var(--transition-normal);
    padding: 0.125rem 0.0625rem;
    border-radius: 0.1875rem;
}

.karaoke-word.active {
    background-color: var(--yellow-100);
    font-weight: 600;
}

.dialogue-line.active-line {
    background-color: var(--blue-200);
    padding: 0.5rem;
    border-radius: var(--radius-sm);
    border-left: 0.25rem solid var(--color-red);
}

/* ═══════════════════════════════════════════════════════════════════════════
   21. HELP PANEL
   ═══════════════════════════════════════════════════════════════════════════ */

/* --- Contenido ayuda ---------------------------------------------------- */

.help-text {
    font-size: 0.875rem;
    color: var(--color-text);
    margin: 0 0 0.375rem 0;
    line-height: 1.4;
    display: inline-block;
}

.help-text .audio-word {
    display: inline;
}

.help-subtitle {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-text);
    margin: var(--spacing-xs) 0 0.5rem 0;
    text-align: left;
    font-style: normal;
}

.help-important {
    color: var(--color-red);
    font-weight: 700;
}

.help-section {
    padding: 0.15rem 0.25rem;
    border-radius: var(--radius-base);
    margin-bottom: 0.25rem;
}

.help-section li,
.diamond-list li {
    font-size: 0.875rem;
    color: var(--color-text);
    margin: 0.25rem 0;
    line-height: 1.4;
}

.help-section ul,
.diamond-list {
    list-style: none;
    margin: 0.3125rem 0 0.5rem 0;
    padding: 0;
}

.help-section ul li,
.diamond-list li {
    padding-left: 0;
    text-indent: 0;
}

.help-divider {
    height: 0.0625rem;
    background: var(--neutral-400);
    margin: 0.35rem 0;
}

.help-text.help-warning {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 0.0625rem solid var(--neutral-400);
    color: var(--color-red);
    text-align: center;
    font-weight: 700;
    font-style: italic;
}

.help-centered {
    text-align: center;
}

.help-section .audio-speed-control {
    margin-top: 0;
    margin-bottom: 0;
}

/* --- Teclado demo en ayuda ---------------------------------------------- */

#helpPanel .help-keyboard-demo {
    margin: 0.5rem 0;
}

#helpPanel .help-keyboard-demo input {
    width: 100%;
    padding: 0.5rem;
    border: 0.125rem solid var(--neutral-400);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    text-align: center;
    font-family: inherit;
}

#helpPanel .audio-speed-control input[type="range"]::-webkit-slider-thumb {
    width: 0.75rem;
    height: 0.75rem;
}

#helpPanel .audio-speed-control input[type="range"]::-moz-range-thumb {
    width: 0.75rem;
    height: 0.75rem;
}

/* Desktop */
@media (min-width: 769px) {
    #helpPanel {
        top: 45%;
        transform: translateY(-50%);
        max-height: 94vh;
        width: 20rem;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        border-radius: var(--radius-xl);
        clip-path: inset(0 round var(--radius-xl));
        background: var(--cream-100);
        padding: 0.85rem 1.15rem;
    }
    #helpPanel > * {
        flex-shrink: 0;
    }
    #helpPanel .help-subtitle {
        font-size: 0.8125rem;
        margin: 0.35rem 0 0.2rem;
    }
    #helpPanel .help-text {
        font-size: 0.8125rem;
        line-height: 1.35;
    }
    #helpPanel ul.diamond-list li {
        font-size: 0.8125rem;
        line-height: 1.3;
        margin-bottom: 0.15rem;
    }
    #helpPanel .help-divider {
        margin: 0.4rem 0;
    }
    #helpPanel .help-text.help-warning {
        margin-bottom: 0.35rem;
        font-size: 0.75rem;
    }
}

@media (min-width: 769px) and (max-width: 1430px) {
    #helpPanel {
        max-height: 88vh;
    }
}

/* --- Ayuda: jerarquía única (escritorio y móvil) ------------------------ */

#helpPanel .help-audio .help-subtitle,
#helpPanel .theme-toggle-label,
#menuHelpMobile .help-audio .help-subtitle,
#menuHelpMobile .theme-toggle-label {
    font-size: 0.875rem;
    font-weight: 700;
    padding-left: 0;
    text-align: left;
}


#helpPanel .help-rules .help-subtitle,
#menuHelpMobile .help-rules .help-subtitle,
#helpPanel .help-text,
#menuHelpMobile .help-text,
#helpPanel ul.diamond-list li,
#menuHelpMobile ul.diamond-list li {
    font-size: 0.875rem;
}

/* --- Colores anclas navegación ------------------------------------------ */

.constructor-ancla {
    background: var(--cream-50);
    color: var(--cream-text);
}

.dialogo-ancla {
    background: var(--cream-50);
    color: var(--blue-700);
}

.constructor-ancla:hover {
    background: var(--cream-100);
}

.dialogo-ancla:hover {
    background: var(--blue-100);
}

/* Estilo para barra de scroll visible e integrada en Help Panel */
#helpPanel {
    overflow-y: auto;
    overflow-x: hidden;
}

#helpPanel::-webkit-scrollbar {
    width: 0.375rem;
}

#helpPanel::-webkit-scrollbar-track {
    background: transparent;
}

#helpPanel::-webkit-scrollbar-thumb {
    background: var(--neutral-400);
    border-radius: var(--radius-sm);
}

#helpPanel::-webkit-scrollbar-corner {
    background: transparent;
}

/* Fondo sólido para botones laterales (evita transparencias/grises) */
.shpora-float-btn a,
.slovar-float-btn a,
[class*="-ancla"] {
    background-color: var(--cream-50);
    opacity: 1;
}

.lectura-ancla {
    background: var(--cream-50);
    color: var(--yellow-500);
}

.lectura-ancla:hover {
    background: var(--yellow-100);
}

.exercises-anchor {
    background: var(--cream-50);
    color: var(--green-700);
}

.exercises-anchor:hover {
    background: var(--green-100);
}

.test-ancla {
    background: var(--cream-50);
    color: var(--color-test);
}

.test-ancla:hover {
    background: var(--pink-100);
}

.frases-ancla {
    background: var(--cream-50);
    color: var(--color-text);
}

.frases-ancla:hover {
    background: var(--cream-300);
}

/* ═══════════════════════════════════════════════════════════════════════════
   22. MODAL CONTENT
   ═══════════════════════════════════════════════════════════════════════════ */

/* --- Overlay y container ------------------------------------------------ */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--overlay-modal);
    z-index: var(--z-overlay);
    display: none;
    align-items: center;
    justify-content: center;
}

.modal-overlay.active {
    display: flex;
}

.modal-container {
    background: var(--cream-50);
    border-radius: var(--radius-md);
    max-width: 56.25rem;
    width: 90%;
    overflow: hidden;
    box-shadow: 0 0.625rem 2.5rem var(--shadow-xl-color);
    margin-top: 0;
}

.modal-header {
    background: var(--cream-200);
    padding: var(--spacing-md) var(--spacing-lg);
    text-align: center;
    border-bottom: 1px solid var(--cream-300);
}

.modal-header h3::after {
    display: none;
}

.modal-header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
    text-align: center;
}

.modal-body {
    height: 60vh;
    overflow-y: auto;
    padding: var(--spacing-lg) var(--spacing-xl);
}

/* Desktop */
@media (min-width: 769px) {
    .modal-container {
        max-height: 85vh;
        border-radius: 0.9375rem;
    }

    .modal-header h3 {
        font-size: 1.125rem;
    }

    .modal-body {
        height: 31.25rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   23. KEYBOARD & GUIDE
   ═══════════════════════════════════════════════════════════════════════════ */

/* --- Error Guide (keyboard-guide) -------------------------------------- */

.keyboard-guide {
    border: 0.125rem solid var(--red-600);
    border-radius: var(--radius-base);
    margin: 1.25rem 0;
    overflow: hidden;
    box-shadow: 0 0.25rem 0.5rem var(--shadow-sm-color);
}

.guide-header {
    background-color: var(--red-600);
    color: var(--color-white);
    padding: 0.4rem var(--spacing-lg) 0.4rem var(--spacing-xl);
    font-weight: bold;
    font-size: clamp(1rem, 0.9318rem + 0.3409vw, 1.1875rem);
}

.guide-header .icon-exceptions {
    color: var(--color-white);
    stroke: var(--color-white);
    margin-right: 0.5rem;
    vertical-align: middle;
}

/* Divisor vertical entre dos errores dentro de guide-content */
.guide-content.two-errors {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
}

.guide-content.two-errors > div:nth-child(2n+1) {
    border-right: 0.0625rem solid var(--neutral-400);
    padding-right: var(--spacing-lg);
}

@media (max-width: 768px) {
    .guide-content.two-errors {
        grid-template-columns: 1fr;
    }
    
    .guide-content.two-errors > div:first-child {
        border-right: none;
        border-bottom: 0.0625rem solid var(--neutral-400);
        padding-right: 0;
        padding-bottom: var(--spacing-md);
    }
}

.guide-content {
    background-color: var(--color-white);
    padding: 0.875rem var(--spacing-lg);
}

.guide-content p {
    margin: 0.5rem 0;
    padding-left: var(--spacing-sm);
    font-size: clamp(1rem, 0.9318rem + 0.3409vw, 1.1875rem);
}

.guide-footer {
    background: var(--yellow-50);
    padding: 0.08rem var(--spacing-lg);
    font-size: 0.8125rem;
    font-style: italic;
    color: var(--neutral-700);
    text-align: center;
}

/* --- Teclado virtual ---------------------------------------------------- */

.virtual-keyboard {
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    background: var(--color-white);
    border: 0.125rem solid var(--color-red);
    border-radius: var(--radius-lg);
    padding: var(--spacing-sm);
    box-shadow: 0 0.5rem 1.5rem var(--shadow-md-color);
    z-index: var(--z-tooltip);
    display: block;
    opacity: 0;
    transform: scale(0.1) rotate(180deg);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    pointer-events: none;
}

.virtual-keyboard.show {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    pointer-events: auto;
}

.keyboard-symbols {
    display: flex;
    gap: 0.5rem;
}

.symbol-btn {
    width: 2.25rem;
    height: 2.25rem;
    border: 0.125rem solid var(--neutral-400);
    border-radius: var(--radius-base);
    background: var(--color-white);
    color: var(--color-text);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}

.symbol-btn:hover {
    background: var(--blue-50);
    border-color: var(--color-text);
    transform: translateY(-0.125rem);
    box-shadow: 0 0.25rem 0.75rem var(--text-alpha-30);
}

.symbol-btn:active {
    transform: translateY(0);
}

@media (max-width: 768px) {
    .virtual-keyboard,
    .virtual-keyboard.show {
        display: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   24. TEXT UTILITIES
   ═══════════════════════════════════════════════════════════════════════════ */

   /* --- Notas y textos especiales ------------------------------------------ */

.gray-italic {
    color: var(--neutral-650);
    font-style: italic;
}

/* --- Español en títulos ------------------------------------------------- */

.spanish-subtitle {
    display: none;
    color: var(--neutral-650);
    font-style: italic;
    font-weight: 500;
}

h3 .divider,
h4 .divider,
h5 .divider {
    display: none;
}

/* Desktop */
@media (min-width: 769px) {
    .spanish-subtitle {
        display: inline;
    }
    
    h3 .divider,
    h4 .divider,
    h5 .divider {
        display: inline;
        color: var(--neutral-650);
        margin: 0 0.5rem;
        font-weight: 500;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   25. THEME TOGGLE
   ═══════════════════════════════════════════════════════════════════════════ */

.theme-toggle {
    position: static;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding-bottom: 0.35rem;
    margin-bottom: 0.35rem;
    border-bottom: 0.0625rem solid var(--neutral-400);
}

.marks-label-btn {
    cursor: pointer;
    text-decoration: underline dotted var(--yellow-400);
    text-underline-offset: 0.25rem;
}

.marks-info-box {
    display: none;
    flex-basis: 100%;
    padding-top: 0.4rem;
    margin-top: 0.35rem;
    border-top: 0.0625rem solid var(--neutral-400);
}

.marks-info-box.open {
    display: block;
}

.theme-half {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.theme-half-marks {
    margin-left: 0.75rem;
    padding-left: 0.75rem;
    border-left: 0.0625rem solid var(--neutral-400);
}

.marks-reset {
    width: 2rem;
    height: 2rem;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--color-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.marks-reset svg {
    width: 1.1rem;
    height: 1.1rem;
    transition: transform var(--transition-fast);
}

.marks-reset:hover svg {
    transform: rotate(15deg) scale(1.1);
}

.theme-toggle .theme-toggle-label {
    margin: 0;
}

body > .theme-toggle {
    display: none;
}

.theme-switch {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--transition-fast), box-shadow var(--transition-fast);
}

.theme-switch:hover {
    background: transparent;
    box-shadow: none;
}

[data-theme="dark"] .theme-switch:hover {
    background: transparent;
    box-shadow: none;
}

.theme-switch-track,
.theme-switch-thumb {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: none !important;
}

.theme-switch svg {
    width: 1.1rem;
    height: 1.1rem;
    transition: transform var(--transition-fast);
}

.theme-switch:hover svg {
    transform: rotate(15deg) scale(1.1);
}

.theme-switch .icon-sun {
    color: var(--color-text);
}

.theme-switch .icon-moon {
    color: var(--color-text);
    display: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   26. ANIMATIONS
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes scrollHint {
    0%, 100% { left: 0; }
    50% { left: 70%; }
}

@keyframes scaleUp {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-0.625rem); }
    75% { transform: translateX(0.625rem); }
}

@keyframes fadeInOut {
    0% { opacity: 0; transform: translateX(-50%) translateY(0.3125rem); }
    20% { opacity: 1; transform: translateX(-50%) translateY(0); }
    80% { opacity: 1; transform: translateX(-50%) translateY(0); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-0.3125rem); }
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@keyframes scrollGlow {
    0%, 100% {
        opacity: 0.5;
        box-shadow: 0 0 0.25rem var(--green-alpha-20);
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 0.625rem var(--green-alpha-30);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   27. ACCESSIBILITY & TOUCH
   ═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .scroll-progress-fill {
        transition: none;
    }

    .scroll-progress-fill::after {
        animation: none;
        opacity: var(--opacity-70);
    }
}

@media (hover: none) and (pointer: coarse) {
    .test-option {
        transition: none;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    .test-option:hover {
        background: var(--neutral-50);
        border-color: transparent;
        transform: none;
    }

    .test-option:active {
        background: var(--yellow-50);
        border-color: var(--yellow-300);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   28. REVIEW & MOTIVATION
   ═══════════════════════════════════════════════════════════════════════════ */

/* --- Motivational con botón --------------------------------------------- */

.motivational-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    text-align: center;
    padding: 0.625rem var(--spacing-lg);
    margin: 1.25rem 0 var(--spacing-lg);
}

.motivational-message p {
    font-size: clamp(0.875rem, 0.6518rem + 1.1161vw, 1.1875rem);
    font-weight: 600;
    color: var(--color-test);
    margin: 0;
    font-style: italic;
    line-height: 1.5;
}

.test-section .motivational-message {
    display: none;
    margin: 1.25rem 0 1.25rem 0;
    padding-bottom: 0;
}

.motivational-btn {
    display: inline-block;
    padding: 0.5rem var(--spacing-lg);
    background: var(--gradient-green-primary);
    color: var(--neutral-white);
    text-decoration: none;
    border: none;
    border-radius: var(--radius-lg);
    font-size: clamp(0.875rem, 0.7857rem + 0.4464vw, 1rem);
    font-weight: 600;
    transition: all var(--transition-normal);
    white-space: nowrap;
    box-shadow: 0 0.125rem 0.5rem var(--green-alpha-30);
}

.motivational-btn:hover {
    background: var(--gradient-green-dark);
    transform: translateY(-0.125rem);
    box-shadow: 0 0.25rem 0.75rem var(--green-alpha-30);
}

@media (max-width: 768px) {
    .test-section .motivational-message {
        position: relative;
        margin: -1.25rem 0 0.75rem 0;
        padding-top: 1.25rem;
    }

    .test-section .motivational-message::before {
        content: "";
        position: absolute;
        top: 0;
        left: 5%;
        width: 90%;
        height: 0.0625rem;
        background: linear-gradient(90deg, transparent, var(--color-test), transparent);
        opacity: 0.35;
    }

    .motivational-btn {
        font-weight: 700;
    }

    .demo-review-banner .review-input-group {
        margin-top: 1.25rem;
    }

    .demo-review-banner .motivational-btn {
        margin-top: 1.5rem;
    }

    .review-consent-desktop {
        display: none;
    }
}

/* --- Banner reseñas ------------------------------------------------------- */

.demo-review-banner {
    padding: var(--spacing-sm) 0;
    margin: var(--spacing-sm) 0 var(--spacing-lg);
    text-align: center;
}

.demo-review-label {
    font-size: clamp(0.9375rem, 0.8693rem + 0.3409vw, 1.125rem);
    font-weight: 600;
    color: var(--green-700);
    margin: 0 0 var(--spacing-sm);
    padding-left: 0.8rem;
}

.review-stars-select {
    display: flex;
    justify-content: center;
    gap: 0.375rem;
    margin-bottom: 0;
}

.review-star-btn {
    width: clamp(1.75rem, 1.5rem + 1vw, 2.5rem);
    height: clamp(1.75rem, 1.5rem + 1vw, 2.5rem);
    fill: var(--neutral-400);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.review-star-btn:hover,
.review-star-btn.hovered {
    fill: var(--yellow-300);
    transform: scale(1.15);
}

.review-star-btn.selected {
    fill: var(--yellow-400);
}

/* --- Formulario --------------------------------------------------------- */

.review-form-body {
    min-height: 0;
    transition: all var(--transition-normal);
}

.review-input-group {
    margin-top: var(--spacing-sm);
    max-width: 37.5rem;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.review-input-wrapper {
    position: relative;
    display: flex;
    align-items: stretch;
    border: 0.0625rem solid var(--green-300);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: box-shadow var(--transition-fast);
}

.review-input-wrapper:focus-within {
    border-color: var(--green-400);
    box-shadow: 0 0 0 0.1875rem var(--green-alpha-15);
}

.review-textarea {
    flex: 1;
    height: 4.5rem;
    padding: 1.15rem var(--spacing-sm);
    border: none;
    font-family: inherit;
    font-size: clamp(0.8125rem, 0.7443rem + 0.3409vw, 0.9375rem);
    line-height: 1.4;
    resize: none;
    color: var(--color-text);
    background: var(--color-white);
    overflow-y: hidden;
}

.review-textarea:focus {
    outline: none;
}

body.is-exam-finished .demo-review-banner.review-exam {
    display: block;
}

@media (min-width: 769px) {
    body.is-exam-finished .demo-review-banner.review-exam {
        display: flex;
    }
}

.demo-review-banner.review-exam {
    display: none;
    --green-300: var(--cream-text);
    --green-400: var(--cream-text);
    --green-500: var(--cream-text);
    --green-700: var(--cream-text);
    --green-alpha-15: var(--cream-alpha-15);
}

.review-meta {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    margin-top: 0.25rem;
}

.review-consent {
    margin: 0;
    font-size: clamp(0.5625rem, 0.4943rem + 0.3409vw, 0.6875rem);
    color: var(--green-700);
    text-align: left;
    padding-left: 0.7rem;
}

.review-textarea::placeholder {
    font-style: italic;
    color: var(--neutral-600);
    font-size: clamp(0.6875rem, 0.6193rem + 0.3409vw, 0.8125rem);
}

.review-send-btn {
    flex-shrink: 0;
    width: 2.75rem;
    background: var(--green-400);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.review-send-btn:hover {
    background: var(--green-500);
}

.review-send-btn svg {
    width: 1.125rem;
    height: 1.125rem;
    fill: var(--neutral-white);
}

/* --- Contador ----------------------------------------------------------- */

.review-char-count {
    position: absolute;
    right: 3.25rem;
    bottom: 0.25rem;
    margin: 0;
    font-size: clamp(0.5625rem, 0.4943rem + 0.3409vw, 0.6875rem);
    color: var(--green-700);
    pointer-events: none;
}

/* --- Mensaje gracias ---------------------------------------------------- */

.review-thank-text {
    font-size: clamp(0.8125rem, 0.7443rem + 0.3409vw, 1rem);
    color: var(--green-700);
    margin: var(--spacing-sm) 0 0;
    font-weight: 500;
}

/* --- Desktop ------------------------------------------------------------ */

@media (min-width: 769px) {
    .motivational-message {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: var(--spacing-xl);
        padding: var(--spacing-lg);
        margin: 1.875rem 0 var(--spacing-xxl) 0;
    }

    .motivational-message p {
        flex: 1;
        text-align: center;
    }

    .motivational-message.has-button p {
        padding-left: 15rem;
    }

    .motivational-btn {
        flex-shrink: 0;
    }

    .test-section .motivational-message {
        margin: 1.875rem 0 0 0;
        padding-bottom: 0;
    }

    .demo-review-banner {
        display: flex;
        align-items: center;
        gap: var(--spacing-lg);
        text-align: left;
        padding: var(--spacing-sm);
        flex-wrap: wrap;
    }

    .demo-review-banner .motivational-btn {
        margin-left: auto;
        padding: 0.8rem 2.2rem;
        margin-top: -0.6rem;
    }

    .demo-review-banner:not(.review-exam):not(:has(.review-input-group)) .motivational-btn {
        margin-top: 0.4rem;
    }

    .demo-review-label {
        margin: 0;
        white-space: nowrap;
    }

    .review-stars-select {
        justify-content: flex-start;
    }

    .review-form-body {
        flex: 1;
        min-width: 0;
        display: flex;
        align-items: center;
    }

    .review-input-group {
        margin-top: 0;
        max-width: none;
        width: 100%;
        padding-top: 1.4rem;
    }

    .review-consent {
        white-space: nowrap;
    }

    .review-textarea {
        height: 3.5rem;
    }

    .review-thank-text {
        margin: 0;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   29. MODAL BLOCK
   ═══════════════════════════════════════════════════════════════════════════ */

/* --- Overlay + container base ------------------------------------------ */

.index-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--overlay-modal);
    z-index: var(--z-modal);
    display: none;
    align-items: center;
    justify-content: center;
}

.index-modal-overlay.active {
    display: flex;
}

.index-modal-container {
    background: var(--cream-50);
    border-radius: var(--radius-xl);
    max-width: 56.25rem;
    width: 95%;
    max-height: 85vh;
    overflow: hidden;
    box-shadow: 0 0.625rem 2.5rem var(--shadow-xl-color);
}

/* --- blockModal --------------------------------------------------------- */

#blockModal .index-modal-container {
    max-width: 26rem;
    border: 1px solid var(--cream-300);
    box-shadow: 0 1rem 3rem rgba(0,0,0,0.2);
}

#paymentModal {
    visibility: visible;
}

#blockModal .index-modal-body {
    padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-xl);
    position: relative;
}

.block-modal-hero {
    text-align: center;
    padding: 0 0 var(--spacing-md);
}

.block-modal-alert {
    background: rgba(240,42,65,0.08);
    color: var(--color-red);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.6rem 1.2rem;
    border-radius: var(--radius-md);
    margin: 0 auto var(--spacing-lg);
    max-width: 100%;
    line-height: 1.4;
}

.block-modal-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-text);
    margin: var(--spacing-md) 0 var(--spacing-sm);
    text-align: center;
}

.block-modal-subtitle {
    color: var(--cream-text);
    font-size: 0.95rem;
    margin: 0 0 var(--spacing-lg);
}

.block-modal-price-row {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-lg);
    margin-bottom: 0.3rem;
}

.block-modal-price {
    font-size: 2.75rem;
    font-weight: 800;
    color: var(--green-500);
    line-height: 1;
}

.block-modal-iva {
    font-size: 0.85rem;
    color: var(--cream-text);
}

.block-modal-note {
    font-size: 0.8rem;
    color: var(--cream-text);
    margin: 0.3rem 0 0;
}

/* --- Botones blockModal ------------------------------------------------- */

.index-button-group {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 0.3rem;
}

.index-card-button {
    display: inline-block;
    padding: 0.5rem var(--spacing-lg);
    min-width: 16rem;
    text-align: center;
    color: var(--neutral-white);
    text-decoration: none;
    border: none;
    border-radius: var(--radius-lg);
    font-size: clamp(0.875rem, 0.7857rem + 0.4464vw, 1rem);
    font-weight: 600;
    transition: all var(--transition-normal);
    white-space: nowrap;
    box-shadow: 0 0.125rem 0.5rem var(--green-alpha-30);
    background: var(--gradient-green-primary);
    cursor: pointer;
}

.index-card-button:hover {
    background: var(--gradient-green-dark);
    transform: translateY(-0.125rem);
    box-shadow: 0 0.25rem 0.75rem var(--green-alpha-30);
}

/* ═══════════════════════════════════════════════════════════════════════════
   30. MODAL PAYMENT
   ═══════════════════════════════════════════════════════════════════════════ */

.payment-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--overlay-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-payment);
    padding: 1rem;
}

.payment-modal-container {
    background: var(--color-white);
    border-radius: 1.5rem;
    padding: 1.5rem 1.75rem 1.25rem;
    max-width: 22rem;
    width: 100%;
    position: relative;
    text-align: center;
    box-shadow: 0 1.5rem 4rem var(--shadow-xl-color);
}

.payment-modal-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: var(--neutral-200);
    border: none;
    font-size: 1.1rem;
    cursor: pointer;
    color: var(--neutral-600);
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-circle);
    transition: all var(--transition-fast);
}

.payment-modal-close:hover {
    background: var(--neutral-400);
    color: var(--color-text);
}

.payment-header {
    margin-bottom: 1rem;
}

.payment-header h2 {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
    text-transform: none;
    background: none;
    padding: 0;
    box-shadow: none;
    text-align: center;
}

.payment-product-card {
    background: linear-gradient(135deg, var(--green-50) 0%, var(--green-100) 100%);
    border: 0.125rem solid var(--green-300);
    border-radius: 1rem;
    padding: 1rem;
    margin-bottom: 1.25rem;
}

.payment-product-name {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 0.35rem;
}

.payment-price-row {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.5rem;
}

.payment-product-price {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--green-600);
    margin: 0;
    line-height: 1;
}

.payment-product-iva {
    font-size: 0.85rem;
    color: var(--neutral-600);
}

.payment-methods {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.payment-eu-note {
    font-size: 0.78rem;
    color: var(--neutral-600);
    font-style: italic;
    margin: 0.15rem 0 0;
}

.payment-eu-note a {
    color: inherit;
    text-decoration: underline;
}

.payment-status-msg {
    font-size: 0.8rem;
    color: var(--color-red);
    font-weight: 600;
    margin: 0.25rem 0 0;
}

.payment-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    width: 100%;
    padding: 0.875rem 1.25rem;
    border-radius: var(--radius-lg);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    border: 0.125rem solid transparent;
}

.payment-btn-primary {
    background: var(--gradient-green-primary);
    color: var(--color-white);
    box-shadow: 0 0.25rem 1rem var(--green-alpha-30);
}

.payment-btn-primary:hover {
    transform: translateY(-0.125rem);
    box-shadow: 0 0.5rem 1.5rem var(--green-alpha-30);
}

.payment-icon {
    width: 1.5rem;
    height: 1.5rem;
}

.payment-accepted {
    padding-top: 0.875rem;
    border-top: 0.0625rem solid var(--neutral-400);
    position: relative;
}

.payment-accepted-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    position: relative;
}

.payment-accepted-icons {
    display: flex;
    gap: 0.5rem;
}

.accepted-icon-large {
    width: 3.5rem;
    height: 2.2rem;
    border-radius: var(--radius-sm);
    box-shadow: 0 0.0625rem 0.1875rem var(--shadow-sm-color);
}

.payment-info-btn {
    position: absolute;
    right: 0;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--green-500);
    transition: all var(--transition-fast);
}

.payment-info-btn:hover {
    color: var(--green-700);
    transform: scale(1.1);
}

.payment-info-btn svg {
    width: 100%;
    height: 100%;
}

.payment-accepted-text {
    font-size: 0.7rem;
    color: var(--neutral-600);
    margin: 0;
    font-weight: 500;
}

.payment-info-dropdown {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-0.5rem);
    background: var(--color-white);
    border: 0.0625rem solid var(--neutral-400);
    border-radius: var(--radius-lg);
    padding: 1rem;
    box-shadow: 0 0.5rem 2rem var(--shadow-md-color);
    min-width: 14rem;
    text-align: left;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-fast);
    z-index: 10;
}

.payment-info-dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-0.75rem);
}

.payment-info-title {
    font-size: 0.85rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
    text-align: center;
}

.payment-info-list {
    list-style: disc;
    padding: 0 0 0 1.2rem;
    margin: 0 0 0.75rem;
}

.payment-info-list li {
    font-size: 0.8rem;
    color: var(--color-text);
    padding: 0.15rem 0;
}

.payment-info-note {
    font-size: 0.7rem;
    color: var(--color-red);
    margin: 0;
    padding-top: 0.5rem;
    border-top: 0.0625rem solid var(--neutral-400);
    font-weight: 500;
    text-align: center;
}

.payment-code-section {
    margin-top: 0.875rem;
    padding-top: 0.75rem;
    border-top: 0.0625rem solid var(--neutral-400);
}

.payment-code-toggle {
    width: 100%;
    padding: 0.45rem 0.75rem;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--color-text);
    background: var(--neutral-200);
    border: 0.0625rem solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.payment-code-toggle:hover {
    border-color: color-mix(in srgb, var(--neutral-400), var(--color-text) 22%);
    transform: translateY(-1px);
}

.payment-code-form {
    margin-top: 0.5rem;
}

.payment-code-row {
    display: flex;
    gap: 0.4rem;
}

.payment-code-input {
    flex: 1;
    min-width: 0;
    padding: 0.55rem 0.75rem;
    font-size: 0.88rem;
    font-family: monospace;
    letter-spacing: 0.05em;
    border: 0.0625rem solid var(--neutral-400);
    border-radius: var(--radius-md);
    background: var(--neutral-150);
    color: var(--color-text);
    text-align: center;
}

.payment-code-input::placeholder {
    color: var(--color-text);
    opacity: 0.65;
}

.payment-code-input:focus {
    outline: none;
    border-color: var(--green-500);
}

.payment-code-submit {
    padding: 0.55rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    border: none;
    border-radius: var(--radius-md);
    background: var(--gradient-green-primary);
    color: var(--color-white);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.payment-code-submit:hover {
    background: var(--gradient-green-dark);
}

.payment-code-msg {
    font-size: 0.78rem;
    color: var(--color-red);
    font-weight: 600;
    margin: 0.4rem 0 0;
}

@media (max-width: 480px) {
    .payment-modal-container {
        padding: 1.25rem 1.25rem 1rem;
        max-width: 20rem;
    }
    
    .payment-header h2 {
        font-size: 1.1rem;
    }
    
    .payment-product-price {
        font-size: 2rem;
    }
    
    .payment-btn {
        padding: 0.75rem 1rem;
        font-size: 0.95rem;
    }
    
    .accepted-icon-large {
        width: 3rem;
        height: 1.9rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   31. PROGRESS BAR
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── MÓVIL: Indicador Урок X en barra inferior ─────────────────────────── */

.urok-indicator {
    position: fixed;
    bottom: calc(3.5rem - 0.0625rem);
    left: 50%;
    transform: translateX(-50%);
    background: var(--cream-100);
    border: none;
    border-radius: 0.5rem 0.5rem 0 0;
    padding: 0.30rem 1rem 0.125rem;
    z-index: calc(var(--z-menu-mobile) + 2);
    pointer-events: none;
    line-height: 1;
}

.urok-indicator-text {
    font-family: var(--font-family);
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--color-text);
    letter-spacing: 0.02rem;
    white-space: nowrap;
    line-height: 1.3;
}

@media (min-width: 769px) {
    .urok-indicator {
        display: none;
    }
}

/* ─── DESKTOP: Barra scroll lección (vertical izquierda) ─────────────────── */

.scroll-progress {
    position: fixed;
    left: 0.625rem;
    top: 40%;
    transform: translateY(-40%);
    display: none;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
    z-index: var(--z-sticky);
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.5s ease;
}

.scroll-progress.hidden {
    opacity: 0;
}

.scroll-progress-percent {
    font-family: var(--font-family);
    font-size: 0.5625rem;
    font-weight: 700;
    color: var(--green-500);
    letter-spacing: 0.03rem;
    opacity: 0.9;
}

.scroll-progress-track {
    width: 0.625rem;
    height: 36vh;
    background: var(--text-alpha-10);
    border-radius: var(--radius-xl);
    position: relative;
    overflow: hidden;
}

.scroll-progress-fill {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0%;
    border-radius: var(--radius-xl);
    background: linear-gradient(
        to top,
        var(--green-500) 0%,
        var(--green-400) 30%,
        var(--green-300) 60%,
        var(--green-200) 100%
    );
    transition: height 0.12s ease-out;
    box-shadow: 0 0 var(--spacing-xs) var(--green-alpha-20);
}

.scroll-progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0.875rem;
    height: 0.875rem;
    border-radius: var(--radius-circle);
    background: radial-gradient(
        circle,
        var(--green-alpha-40) 0%,
        var(--green-alpha-15) 50%,
        transparent 70%
    );
    animation: scrollGlow 2s ease-in-out infinite;
}

.scroll-progress-lesson {
    font-family: var(--font-family);
    font-size: 0.5rem;
    font-weight: 600;
    color: var(--neutral-650);
    letter-spacing: 0.02rem;
    white-space: nowrap;
    text-align: center;
    line-height: 1.2;
}

.scroll-progress-lesson-num {
    display: inline;
    font-weight: 600;
    color: var(--green-600);
    font-size: 0.5rem;
}

@media (min-width: 769px) {
    .scroll-progress {
        display: flex;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   32. SHPORA
   ═══════════════════════════════════════════════════════════════════════════ */

.shpora-body {
    padding-top: 1rem;
    padding-bottom: 5rem;
    background: var(--cream-100);
}
.shpora-search { display: none; }

/* --- Navegación desktop (Shpora) ---------------------------------------- */

.shpora-nav { display: none; }

/* 2 columnas a la Izquierda + 2 columnas a la Derecha (Pantallas 1300px a 1649px, Laptops 14" y 15") */
@media (min-width: 1300px) and (min-height: 600px) {
    .shpora-nav {
        display: block;
    }

    .shpora-nav-left,
    .shpora-nav-right {
        position: fixed;
        top: 1.83rem;
        z-index: 20;
        display: grid;
        grid-template-columns: repeat(2, 7rem);
        gap: 0.75rem 0.5rem;
    }

    .shpora-nav-left {
        left: 1.5rem;
    }

    .shpora-nav-right {
        right: 1.5rem;
    }

    .shpora-nav-link {
        display: block;
        width: 7rem;
        padding: 0.45rem 0.4rem;
        border-radius: var(--radius-md);
        border: 1px solid var(--cream-300);
        font-weight: 600;
        font-size: 0.85rem;
        color: var(--color-text);
        text-decoration: none;
        box-shadow: var(--shadow-sm);
        text-align: center;
        background: var(--color-white);
        box-sizing: border-box;
        transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
    }

    .shpora-nav-link:hover {
        transform: translateY(-0.125rem);
        box-shadow: var(--shadow-md);
        background: var(--cream-100);
    }

    .shpora-nav-link.active {
        background: var(--green-100);
        border-color: var(--green-400);
        color: var(--green-800);
    }

    .shpora-content { max-width: 36rem; }
}

/* 4 columnas a la Izquierda + 4 columnas a la Derecha (Pantallas grandes ≥ 1650px) */
@media (min-width: 1650px) and (min-height: 600px) {
    .shpora-nav-left,
    .shpora-nav-right {
        grid-template-columns: repeat(4, 7rem);
    }

    .shpora-content { max-width: 50rem; }
}

/* --- Secciones ---------------------------------------------------------- */

.shpora-content {
    max-width: 50rem;
    margin: 0 auto;
    padding: 0 1rem 6rem;
}

.shpora-section {
    --sc: var(--cream-300);
    --sd: var(--color-text);
    margin-bottom: 2rem;
    padding: 1.25rem;
    border-left: 0.3rem solid var(--sc);
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    position: relative;
    text-align: center;
    scroll-margin-top: 6rem;
}

@media (min-width: 1650px) {
    .shpora-section {
        min-height: 60vh;
    }
}

@media (min-width: 769px) {
    .shpora-section {
        padding: 2rem 1.25rem;
    }

    .shpora-grid {
        margin-top: auto;
        margin-bottom: auto;
    }

    .shpora-title {
        margin-bottom: auto;
    }
}

.shpora-section.hidden { display: none; }

.shpora-title {
    font-size: clamp(1.08rem, 0.97rem + 0.55vw, 1.375rem);
    font-weight: 700;
    margin: 0 0 1.25rem;
    color: var(--sd);
    text-align: center;
}

.shpora-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

.shpora-block {
    display: flex;
    flex-direction: column;
    padding: 1.25rem;
    line-height: 2.2;
    font-size: 0.9375rem;
    border-bottom: 0.0625rem solid var(--neutral-300);
    border-right: 0.0625rem solid var(--neutral-300);
}

.shpora-block-top {
    flex: 1 1 auto;
    margin-bottom: 0.75rem;
}

.shpora-block:nth-child(2n) {
    border-right: none;
}

.shpora-block:nth-child(n+3) {
    border-bottom: none;
}

@media (max-width: 600px) {
    .shpora-grid {
        grid-template-columns: 1fr;
    }

    .shpora-block {
        border-right: none;
    }

    .shpora-block:nth-child(n+3) {
        border-bottom: 0.0625rem solid var(--neutral-300);
    }

    .shpora-block:last-child {
        border-bottom: none;
    }
}

.shpora-block strong {
    font-weight: 600;
    font-size: 0.9375rem;
    letter-spacing: 0.02em;
    display: inline-block;
    margin-bottom: 0.25rem;
    color: var(--sd);
}

.shpora-block b {
    font-weight: 700;
    color: var(--sd);
}

.shpora-block .ejemplo {
    display: block;
    margin-top: auto;
    padding-top: 0.75rem;
    border-top: 0.0625rem dashed var(--neutral-400);
    line-height: 1.4;
}

.shpora-block .ejemplo strong {
    display: inline;
    margin: 0;
}

.shpora-block-top strong,
.shpora-block-top b {
    line-height: 1;
}

/* --- Barra fija inferior (shpora.html) ---------------------------------- */

.shpora-mobile-bar,
.slovar-desktop-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3.5rem;
    background: var(--color-white);
    border-top: 0.0625rem solid var(--neutral-400);
    padding: 0.5rem 0.75rem;
    gap: 0.5rem;
    align-items: center;
    z-index: 999;
    box-shadow: 0 -0.125rem 0.625rem var(--shadow-sm-color);
}

.shpora-back-desktop { display: none; }

/* Shpora desktop medio (13–15") — barra compacta */
@media (min-width: 769px) and (max-width: 1599px) {
    .shpora-mobile-bar,
    .slovar-desktop-bar {
        padding: 0.4rem 1.5rem;
        gap: 0.5rem;
        justify-content: center;
        height: auto;
        min-height: 3rem;
    }

    .shpora-mobile-bar .shpora-btn-small:first-child,
    .slovar-desktop-bar .shpora-btn-small:first-child { display: none; }
    .shpora-mobile-bar .shpora-btn-small,
    .slovar-desktop-bar .shpora-btn-small { width: 2rem; height: 2rem; }
    .shpora-mobile-bar .shpora-btn-small svg,
    .slovar-desktop-bar .shpora-btn-small svg { width: 1rem; height: 1rem; }

    .shpora-mobile-bar .shpora-input-mobile,
    .slovar-desktop-bar .shpora-input-mobile {
        font-size: 0.85rem;
        padding: 0.25rem 0.75rem;
        border-radius: var(--radius-lg);
        width: 26rem;
        max-width: 100%;
        height: 2rem;
    }

    .shpora-back-desktop {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 0.75rem;
        height: 2rem;
        min-width: 5.5rem;
        border-radius: var(--radius-md);
        border: 1px solid var(--cream-300);
        background: var(--cream-50);
        color: var(--color-text);
        font-size: 0.8rem;
        font-weight: 600;
        font-family: var(--font-family);
        text-decoration: none;
        white-space: nowrap;
        flex-shrink: 0;
        margin-left: 0.5rem;
        cursor: pointer;
    }

    .shpora-back-desktop:hover { background: var(--cream-200); }

    .shpora-content { padding-top: 1rem; }
}

/* Shpora pantalla grande (≥ 1600px) — barra grande */
@media (min-width: 1600px) {
    .shpora-mobile-bar,
    .slovar-desktop-bar {
        padding: 0.4rem 2rem;
        gap: 0.6rem;
        justify-content: center;
        height: auto;
        min-height: 2.8rem;
    }

    .shpora-mobile-bar .shpora-btn-small:first-child,
    .slovar-desktop-bar .shpora-btn-small:first-child { display: none; }
    .shpora-mobile-bar .shpora-btn-small,
    .slovar-desktop-bar .shpora-btn-small { width: 2rem; height: 2rem; }
    .shpora-mobile-bar .shpora-btn-small svg,
    .slovar-desktop-bar .shpora-btn-small svg { width: 1rem; height: 1rem; }

    .shpora-mobile-bar .shpora-input-mobile,
    .slovar-desktop-bar .shpora-input-mobile {
        font-size: 0.85rem;
        padding: 0.3rem 0.8rem;
        border-radius: var(--radius-lg);
        width: 32rem;
        max-width: 100%;
        height: 2rem;
    }

    .shpora-back-desktop {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 0.8rem;
        height: 2rem;
        min-width: 4.8rem;
        border-radius: var(--radius-md);
        border: 1px solid var(--cream-300);
        background: var(--cream-50);
        color: var(--color-text);
        font-size: 0.8rem;
        font-weight: 600;
        font-family: var(--font-family);
        text-decoration: none;
        white-space: nowrap;
        flex-shrink: 0;
        margin-left: 0.5rem;
        cursor: pointer;
    }

    .shpora-back-desktop:hover { background: var(--cream-200); }

    .shpora-content { padding-top: 1rem; }
}

.shpora-btn-small {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-circle);
    border: none;
    background: transparent;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--color-text);
    transition: opacity var(--transition-fast);
}

.shpora-btn-small:hover { opacity: 0.7; }
.shpora-btn-small svg { width: 1.375rem; height: 1.375rem; stroke: var(--color-text); color: var(--color-text); }

.shpora-input-mobile {
    flex: 1;
    padding: 0.625rem 1rem;
    border: 0.125rem solid var(--cream-300);
    border-radius: var(--radius-lg);
    font-size: 0.9375rem;
    font-family: var(--font-family);
    background: var(--color-white);
    color: var(--color-text);
}

.shpora-search-wrapper {
    flex: 1;
    position: relative;
}

.shpora-search-wrapper .shpora-input-mobile {
    width: 100%;
}

.shpora-suggestions {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    margin-bottom: 0.5rem;
    background: var(--color-white);
    border: 1px solid var(--cream-300);
    border-radius: var(--radius-md);
    box-shadow: 0 -0.25rem 0.75rem var(--shadow-md-color);
    max-height: 15rem;
    overflow-y: auto;
    z-index: 1000;
}

.shpora-suggestions.activo { display: block; }

.shpora-suggestion-item {
    padding: 0.6rem 0.9rem;
    font-size: 0.85rem;
    color: var(--color-text);
    cursor: pointer;
    border-bottom: 1px solid var(--neutral-300);
}

.shpora-suggestion-item:last-child { border-bottom: none; }
.shpora-suggestion-item:hover { background: var(--cream-100); }

.shpora-btn-small.active-search {
    background: var(--green-200);
    color: var(--green-800);
    border-radius: 50%;
    aspect-ratio: 1;
}

.shpora-btn-small.active-search svg {
    stroke: var(--green-800);
    color: var(--green-800);
}

.shpora-input-mobile:focus {
    outline: none;
    border-color: var(--green-500);
    box-shadow: 0 0 0 0.1875rem var(--green-alpha-30);
}

/* --- Botones flotantes desktop (Shpora + Slovar en páginas Urok) -------- */

.shpora-float-btn,
.slovar-float-btn {
    position: fixed;
    right: 1.25rem;
    z-index: var(--z-bar-top);
    display: none;
}

.shpora-float-btn { bottom: 10rem; }
.slovar-float-btn { bottom: 13rem; }
.progreso-float-btn { bottom: 16rem; }

/* Solo Nest Hub / pantallas bajas. No toca móvil ni desktop alto */
@media (min-width: 769px) and (max-height: 650px) {
    .shpora-float-btn { bottom: 7.5rem; }
    .slovar-float-btn { bottom: 10rem; }
    .progreso-float-btn { bottom: 12.5rem; }
}

.shpora-float-btn a,
.slovar-float-btn a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.3rem 0.45rem;
    min-width: 4.85rem;
    line-height: 1.4;
    border-radius: var(--radius-float);
    border: 0.0625rem solid var(--text-alpha-10);
    box-shadow: var(--shadow-sm);
    font-size: 0.66rem;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    background: var(--cream-50);
    color: var(--color-text);
}

.shpora-float-btn a:hover,
.slovar-float-btn a:hover {
    transform: translateX(-0.3125rem);
    box-shadow: var(--shadow-md);
    background: var(--neutral-300);
}

@media (min-width: 769px) {
    .shpora-float-btn,
    .slovar-float-btn { display: block; }
}

/* --- Glow efecto al fallar ejercicio --- */

@keyframes shpora-glow {
    0%, 100% {
        box-shadow: 0 0 0.5rem var(--yellow-400);
    }
    50% {
        box-shadow: 0 0 1.5rem var(--yellow-400), 0 0 2rem var(--yellow-300);
    }
}

.shpora-float-btn.glow a,
.btn-barra.glow {
    animation: shpora-glow 1s ease-in-out 12;
}

.shpora-float-btn.glow a {
    border-color: var(--yellow-400);
    background: var(--yellow-50);
}

.btn-barra.glow {
    color: var(--yellow-400);
    background: transparent;
    box-shadow: none;
    animation: none;
}

.btn-barra.glow span {
    text-shadow: 0 0 0.3rem var(--yellow-400);
    animation: shpora-text-glow 1s ease-in-out 8;
}

.btn-barra.glow svg {
    stroke: var(--yellow-400);
    filter: drop-shadow(0 0 0.25rem var(--yellow-400));
    animation: shpora-text-glow 1s ease-in-out 8;
}

@keyframes shpora-text-glow {
    0%, 100% {
        opacity: 0.6;
    }
    50% {
        opacity: 1;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   33. SLOVAR
   ═══════════════════════════════════════════════════════════════════════════ */

body:has(.slovar-header) {
    padding: 0;
    margin: 0;
    max-width: none;
}

/* --- Header ------------------------------------------------------------- */
.slovar-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-sticky);
    display: flex;
    align-items: center;
    padding: 1rem 2rem;
    background: var(--cream-100);
    border-bottom: 1px solid var(--neutral-400);
    box-shadow: 0 1px 0 0 var(--color-bg);
}

.slovar-header-msg {
    flex: 1;
    text-align: center;
    font-size: clamp(0.75rem, 0.65rem + 0.4vw, 0.9rem);
    font-weight: 500;
    color: var(--color-text);
    font-style: italic;
    letter-spacing: 0.01em;
    padding: 0 3rem;
    line-height: 1.4;
}

/* --- Controles ---------------------------------------------------------- */
.slovar-controls {
    position: fixed;
    top: 3.2rem;
    left: 0;
    right: 0;
    z-index: calc(var(--z-sticky) - 1);
    display: grid;
    grid-template-columns: auto 1px 1fr;
    gap: 0 1.25rem;
    padding: 0.75rem 1.25rem;
    background: var(--cream-100);
    border-bottom: 1px solid var(--neutral-400);
    align-items: start;
}

.slovar-controls-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 0.6rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.slovar-controls-title strong {
    font-weight: 700;
    color: var(--green-700);
    margin-left: 0;
}

.slovar-title-palabras {
    text-transform: none;
}

.slovar-title-frases-col {
    text-transform: none;
}

.slovar-title-frases-col strong {
    color: var(--green-700);
}

.slovar-frases-col:first-child .slovar-title-frases-col {
    transform: none;
}

.slovar-controls-divider {
    width: 1px;
    align-self: stretch;
    background: var(--neutral-400);
}

/* --- Frases columns in controls ----------------------------------------- */
.slovar-frases-columns {
    display: grid;
    grid-template-columns: auto 1px auto 1px 1fr;
    gap: 0 1.5rem;
    align-items: start;
    position: relative;
}

.slovar-frases-col {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.slovar-frases-col-divider {
    width: 1px;
    align-self: stretch;
    background: var(--neutral-300);
    margin: 0;
}

/* --- Alphabet ----------------------------------------------------------- */
.slovar-alphabet {
    display: grid;
    grid-template-columns: repeat(9, 2.1rem);
    gap: 0.25rem;
    justify-content: center;
    width: max-content;
    max-width: 100%;
    margin: 0 auto 0.4rem;
    flex-shrink: 0;
}

.slovar-letra-btn {
    width: 2.1rem;
    height: 1.8rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--cream-300);
    background: var(--color-white);
    font-size: 0.85rem;
    font-weight: 600;
    font-family: var(--font-family);
    cursor: pointer;
    color: var(--color-text);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
}

.slovar-letra-btn:hover:not(:disabled) { background: var(--cream-100); }
.slovar-letra-btn.active  { background: var(--cream-300); border-color: var(--cream-300); color: var(--color-text); font-weight: 700; }
.slovar-letra-btn:disabled { opacity: 0.3; cursor: default; }

/* --- Temas buttons ------------------------------------------------------ */
.slovar-temas {
    display: grid;
    grid-template-columns: repeat(4, 8rem);
    gap: 0.35rem 0.3rem;
    margin: 0 auto;
    min-width: 0;
}

.slovar-temas-fijas {
    grid-template-columns: repeat(2, 8rem);
    gap: 0.35rem 0.3rem;
}

.slovar-temas-single {
    display: grid;
    grid-template-columns: 8rem;
    gap: 0.35rem;
    margin: 0 auto;
}

.slovar-tema-btn {
    padding: 0.45rem 0.4rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--cream-300);
    background: var(--color-white);
    font-size: 0.8rem;
    font-weight: 600;
    font-family: var(--font-family);
    cursor: pointer;
    color: var(--color-text);
    box-shadow: var(--shadow-sm);
}

.slovar-tema-btn:hover  { background: var(--cream-100); }
.slovar-tema-btn.active { background: var(--cream-300); border-color: var(--cream-300); font-weight: 700; }

@media (min-width: 1400px) {
    .slovar-frases-col .slovar-tema-btn {
        width: 100%;
        max-width: 10rem;
        min-height: 2.2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
}

/* --- Dashboard ---------------------------------------------------------- */
.slovar-dashboard {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem 2rem 5rem;
    min-height: 100vh;
    background: var(--cream-100);
}

.slovar-dashboard + .footer-legal {
    margin: 0;
    padding: 0 0.3125rem 5rem;
    background: var(--cream-100);
}

/* Búsqueda desktop: palabras izq / frases der */
@media (min-width: 1400px) {
    .slovar-dashboard.search-split {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 1.5rem;
        align-items: start;
    }

    .slovar-dashboard.search-split .slovar-panel-palabras,
    .slovar-dashboard.search-split .slovar-panel-frases {
        width: 100%;
    }

    .slovar-dashboard.search-split .example-grid.slovar-palabras-grid,
    .slovar-dashboard.search-split .slovar-frases-grid.phrases-cards {
        max-width: 100%;
        margin: 0;
    }

    .slovar-dashboard.search-split .example-grid.slovar-palabras-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .slovar-dashboard.search-split .slovar-frases-grid.phrases-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

.slovar-divider {
    display: none;
}

.slovar-panel {
    overflow-y: auto;
    width: 100%;
}

@media (max-width: 1250px) {
    .slovar-panel-frases {
        display: none;
    }
}

/* --- Grids -------------------------------------------------------------- */
.example-grid.slovar-palabras-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin: 0 auto;
    max-width: 1100px;
    padding: 1.5rem 0.5rem 0.5rem;
}

.slovar-frases-grid.phrases-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin: 0 auto;
    max-width: 1100px;
    padding: 1.5rem 0.5rem 0.5rem;
}

/* --- Pantallas grandes (≥ 1600px / ~53cm) ------------------------------- */
@media (min-width: 1600px) {
    .example-grid.slovar-palabras-grid {
        grid-template-columns: repeat(6, 1fr);
        max-width: 1650px;
    }

    .slovar-frases-grid.phrases-cards {
        grid-template-columns: repeat(3, 1fr);
        max-width: 1650px;
    }
}

/* --- Cards -------------------------------------------------------------- */
.slovar-panel-palabras .example-card {
    padding: 1rem 0.75rem;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    min-height: 6rem;
}

.slovar-frases-grid .phrases-card {
    padding: 1rem 0.75rem;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    min-height: 6rem;
    background: var(--color-white);
    border: 1px solid var(--neutral-300);
    border-radius: var(--radius-md);
    word-break: break-word;
}

.slovar-panel-palabras .example-card .spanish,
.slovar-frases-grid .phrases-card-es {
    font-size: 1rem;
    margin-bottom: 0.2rem;
    text-align: center;
    word-break: break-word;
}

.slovar-panel-palabras .example-card .transcription,
.slovar-frases-grid .phrases-card-tr {
    font-size: 0.9rem;
    margin-bottom: 0.2rem;
    text-align: center;
}

.slovar-panel-palabras .example-card .russian,
.slovar-frases-grid .phrases-card-ru {
    font-size: 0.88rem;
    text-align: center;
}

/* --- Frases toggle móvil ------------------------------------------------ */
.slovar-frases-toggle { display: none; }

/* --- Menú desplegable móvil (☰) ---------------------------------------- */
.slovar-menu-overlay,
.slovar-menu-popup { display: none; }

@media (max-width: 1399px) {
    .slovar-menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--overlay-light);
        backdrop-filter: blur(0.1875rem);
        z-index: 998;
    }

    .slovar-menu-overlay.activo { display: block; }

    .slovar-menu-popup {
        position: fixed;
        top: 3rem;
        left: 50%;
        transform: translateX(-50%);
        background: transparent;
        z-index: 999;
        width: auto;
    }

    .slovar-menu-popup.activo { display: block; }

    .slovar-menu-content {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        align-items: center;
    }

    .slovar-menu-letras {
        display: grid;
        grid-template-columns: repeat(3, 3.45rem);
        gap: 0.8rem 2.5rem;
    }

    .slovar-menu-grupos {
        display: grid;
        grid-template-columns: repeat(2, 9.66rem);
        gap: 1rem 2.5rem;
    }

    .slovar-menu-sep {
        width: 9.66rem;
        height: 1px;
        background: var(--neutral-400);
        margin: 0.75rem auto;
    }

    .slovar-menu-letras .slovar-letra-btn {
        width: 3.45rem;
        height: 2.3rem;
        font-size: 0.95rem;
        border-radius: var(--radius-sm);
        text-transform: uppercase;
    }

    .slovar-menu-grupos .slovar-tema-btn {
        min-height: 2.3rem;
        padding: 0.52rem;
        font-size: 0.95rem;
        border-radius: var(--radius-lg);
        text-transform: none;
    }

    button.slovar-menu-toggle-btn.slovar-menu-switch-btn {
        background: var(--cream-300);
        border-color: var(--cream-300);
        color: var(--color-text);
    }

    .slovar-menu-toggle-btn {
        display: block;
        width: 9.66rem;
        margin: 0 auto;
        padding: 0.52rem;
        border-radius: var(--radius-lg);
        border: 1px solid var(--neutral-400);
        background: var(--color-white);
        color: var(--color-text);
        font-size: 0.95rem;
        font-weight: 600;
        font-family: var(--font-family);
        cursor: pointer;
        text-align: center;
    }
}

/* --- Barra inferior móvil ----------------------------------------------- */
.slovar-mobile-bar { display: none; }

/* Pantalla grande (≥ 1600px / ~53cm) */
@media (min-width: 1600px) {
    .slovar-controls {
        gap: 0 2rem;
        padding: 0.75rem 2rem;
    }

    .slovar-frases-columns {
        gap: 0 3.5rem;
        justify-content: center;
    }

    .slovar-temas {
        grid-template-columns: repeat(4, 9rem);
        gap: 0.35rem 0.5rem;
    }

    .slovar-temas-fijas {
        grid-template-columns: repeat(2, 9rem);
        gap: 0.35rem 0.5rem;
    }

    .slovar-temas-single {
        grid-template-columns: 9rem;
    }
}

/* --- Responsive ≤ 1399px ------------------------------------------------ */
@media (max-width: 1399px) {
    .slovar-header { display: none; }

    .slovar-controls         { display: none; }
    .slovar-controls-title   { display: none; }
    .slovar-controls-divider { display: none; }
    .slovar-controls-frases  { display: none; }
    .slovar-frases-columns   { display: none; }
    .slovar-frases-toggle    { display: none; }

    .slovar-dashboard {
        grid-template-columns: 1fr;
        padding: 0.5rem 1rem 5rem;
        gap: 1rem;
    }

    .slovar-divider      { display: none; }
    .slovar-panel-frases { display: none; }

    .slovar-dashboard.search-split {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .slovar-dashboard.search-split .slovar-panel-palabras,
    .slovar-dashboard.search-split .slovar-panel-frases {
        display: block;
        width: 100%;
    }

    .example-grid.slovar-palabras-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 0.25rem 0;
        gap: 0.5rem;
        max-width: 100%;
        width: 100%;
    }

    .slovar-frases-grid.phrases-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 0.25rem 0;
        gap: 0.5rem;
        max-width: 100%;
        width: 100%;
    }

    .slovar-mobile-bar {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 3.5rem;
        background: var(--cream-100);
        border-top: 0.0625rem solid var(--cream-300);
        padding: 0.5rem 0.75rem;
        gap: 0.5rem;
        align-items: center;
        z-index: 999;
        box-shadow: 0 -0.125rem 0.625rem var(--shadow-sm-color);
    }
}

@media (max-width: 600px) {
    .example-grid.slovar-palabras-grid,
    .slovar-frases-grid.phrases-cards {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   34. UROK 50 — EXAMEN FINAL
   ========================================================================== */

/* --- 1. Cabecera de pagina ---------------------------------------------- */
.header-card-exam {
    padding: 1.75rem var(--spacing-lg);
    min-height: auto;
}

.header-card-exam .lesson-info {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.header-card-exam .tema {
    width: 100%;
    font-size: clamp(0.9rem, 0.75rem + 0.75vw, 1.25rem);
    color: var(--cream-text);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    margin: 0;
}

.header-card-exam .tema::before,
.header-card-exam .tema::after {
    content: '';
    flex: 1;
    max-width: 20rem;
    height: 0.125rem;
}

.header-card-exam .tema::before {
    background: linear-gradient(90deg, transparent 0%, var(--cream-text) 100%);
}

.header-card-exam .tema::after {
    background: linear-gradient(90deg, var(--cream-text) 0%, transparent 100%);
}

.header-card-exam .exam-subhead {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cream-text);
    opacity: 0.8;
    margin-top: 0.25rem;
}

/* --- 2. Contenedor y bloques ocultos ------------------------------------- */
.exam-wrapper {
    --exam-btn-h: 2.25rem;
    background: linear-gradient(180deg, var(--cream-50) 0%, var(--cream-100) 100%);
    padding: 2.25rem 1.5rem 2.5rem;
    margin-top: 1.25rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.is-exam-finished .exam-wrapper {
    margin-top: 0;
}

.exam-level-block,
.exam-wrapper .test-section,
.exam-wrapper .level-victory-card,
.exam-wrapper .global-summary-card,
.exam-wrapper .final-story-section,
.exam-wrapper .reading-transcript {
    display: none;
}

.exam-wrapper .exercise-progress-fill,
.exam-wrapper .test-progress-fill {
    width: 33.3%;
    background: var(--cream-text);
}

.exam-wrapper .exercise-section,
.exam-wrapper .test-section {
    background: transparent;
    padding: 0;
    margin: 0;
    box-shadow: none;
}

.exam-wrapper .exercise-card-wrapper,
.exam-wrapper .test-card-wrapper {
    min-height: 18.5rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin: 0;
}

.exam-wrapper .exercise-item,
.exam-wrapper .test-question {
    margin-bottom: 0;
}

.exam-wrapper .exercise-hint {
    margin-top: 0.5rem;
}

/* --- 3. Franja de seccion ------------------------------------------------ */
.exam-wrapper .exercise-section > h2:first-child,
.exam-wrapper .test-section > h2:first-child,
.exam-wrapper .exam-intro-header {
    background: linear-gradient(135deg, var(--cream-200) 0%, var(--cream-300) 100%);
    color: var(--cream-text);
    box-shadow: 0 0.125rem 0.375rem var(--cream-alpha-15);
    border-radius: var(--radius-md);
    padding: 0.625rem 1rem;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: clamp(1rem, 0.8rem + 1vw, 1.25rem);
    font-weight: 700;
    margin: 0 0 1.5rem 0;
}

.exam-wrapper .exercise-section > h2 svg,
.exam-wrapper .test-section > h2 svg,
.exam-wrapper .exam-intro-header svg {
    stroke: var(--cream-text);
    fill: none;
}

/* --- 4. Intro ------------------------------------------------------------ */
.exam-wrapper .exam-intro-card {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    display: block;
    margin-bottom: -1rem;
}

.exam-wrapper .exam-intro-head {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 1.5rem;
}

.exam-wrapper .exam-intro-icon {
    width: 2.1rem;
    height: 2.1rem;
    stroke: var(--cream-text);
    fill: none;
    flex-shrink: 0;
}

.exam-wrapper .exam-intro-lead-bold {
    font-size: var(--font-h3);
    font-weight: 700;
    line-height: var(--line-height-heading);
    color: var(--cream-text);
    margin: 0;
}

.exam-wrapper .exam-intro-section {
    margin-bottom: 1.35rem;
}

.exam-wrapper .exam-intro-heading {
    font-size: clamp(0.9375rem, 0.7946rem + 0.7143vw, 1.1875rem);
    font-weight: 700;
    color: var(--cream-text);
    margin: 0 0 0.5rem 0;
}

.exam-wrapper .exam-levels {
    list-style: none;
    padding: 0;
    margin: 0;
}

.exam-wrapper .exam-level {
    --from: 0;
    --span: 23;
    --tone: 0.4;
    display: grid;
    grid-template-columns: 2.85rem 8.5rem 1fr;
    align-items: center;
    padding: 0.95rem 0;
    border-top: 0.0625rem solid var(--cream-300);
}

.exam-wrapper .exam-level:last-child {
    border-bottom: 0.0625rem solid var(--cream-300);
}

.exam-wrapper .exam-level--2 { --from: 23; --span: 16; --tone: 0.7; }
.exam-wrapper .exam-level--3 { --from: 39; --span: 9;  --tone: 1; }

.exam-wrapper .exam-level-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--cream-200);
    border: 0.0625rem solid var(--cream-300);
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--cream-text);
}

.exam-wrapper .exam-level-name {
    font-size: var(--font-normal);
    font-weight: 700;
    color: var(--cream-text);
}

.exam-wrapper .exam-level-track {
    position: relative;
    height: 0.5rem;
    border-radius: var(--radius-lg);
    background: var(--cream-200);
    overflow: hidden;
}

.exam-wrapper .exam-level-track i {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--from) / 48 * 100%);
    width: calc(var(--span) / 48 * 100%);
    border-radius: var(--radius-lg);
    background: var(--cream-text);
    opacity: var(--tone);
}

.exam-wrapper .exam-intro-note {
    font-size: var(--font-small);
    font-style: italic;
    line-height: var(--line-height-body);
    color: var(--cream-text);
    margin: 1.1rem 0 0 0;
    padding: 0 1.5rem 0 2.85rem;
}

.exam-wrapper .exam-intro-rules {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-sm);
    margin: 1.75rem 0 2.75rem;
    padding: 1rem 1.25rem;
    background: var(--cream-200);
    border: 0.0625rem solid var(--cream-300);
    border-radius: var(--radius-md);
}

.exam-wrapper .exam-rule-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--cream-text);
}

.exam-wrapper .exam-rule-item svg {
    width: 1.25rem;
    height: 1.25rem;
    min-width: 1.25rem;
    stroke: var(--cream-text);
    flex-shrink: 0;
}

#btnStartExam {    display: flex;
    margin: 2rem auto 2.5rem;
    width: 25rem;
    max-width: 90%;
}

.exam-wrapper .exam-timer {
    text-align: right;
    font-size: 0.875rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--cream-text);
    margin: -1rem 0 0.75rem;
}

.summary-meta {
    margin: 0.5rem 0 0;
    font-size: 0.875rem;
    color: var(--cream-text);
}

/* --- 5. Ejercicios y tests ----------------------------------------------- */
.exam-wrapper .exercise-progress-text,
.exam-wrapper .test-progress-text {
    color: var(--cream-text);
}

.exam-wrapper .exercise-progress { margin-bottom: 0.45rem; }
.exam-wrapper .test-progress { margin-bottom: 2.25rem; }

.exam-wrapper .exercise-progress-bar,
.exam-wrapper .test-progress-bar {
    background: var(--cream-100);
}

.exam-wrapper .exercise-item strong,
.exam-wrapper .test-question strong {
    color: var(--cream-text);
}

.exam-wrapper .exercise-number,
.exam-wrapper .test-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
    min-height: 2rem;
    border-radius: 50%;
    background: var(--cream-200);
    color: var(--cream-text);
    font-weight: 700;
    margin-right: 0.65rem;
    vertical-align: middle;
}

.exam-wrapper .word-clickable {
    border-color: var(--cream-300);
    color: var(--cream-text);
    background: var(--color-white);
}

.exam-wrapper .word-clickable:hover {
    border-color: var(--cream-text);
    background: var(--cream-100);
}

.exam-wrapper .answer-input,
.exam-wrapper .answer-input-long,
.exam-wrapper .exercise-input {
    border-color: var(--cream-300);
    color: var(--cream-text);
    font-weight: 700;
}

.exam-wrapper .answer-input:empty::before,
.exam-wrapper .answer-input-long:empty::before,
.exam-wrapper .exercise-input::placeholder {
    font-weight: 400;
}

.exam-wrapper .exercise-input:focus,
.exam-wrapper .answer-input:focus {
    border-color: var(--cream-text);
    box-shadow: 0 0 0 0.1875rem var(--cream-alpha-15);
}

.exam-wrapper .test-option:hover {
    background: var(--cream-100);
    border-color: var(--cream-300);
}

.exam-wrapper .test-option.test-correct,
.exam-wrapper .test-option.test-incorrect {
    background: var(--cream-200);
    border-color: var(--cream-text);
    color: var(--cream-text);
}

.exam-wrapper .audio-exercise-group {
    border: none;
    background: transparent;
    padding: 0;
    box-shadow: none;
}

.exam-wrapper .audio-btn-letter,
.exam-wrapper .listen-btn {
    background: var(--color-white);
    border: 0.125rem solid var(--cream-300);
    box-shadow: var(--shadow-sm);
}

.exam-wrapper .audio-btn-letter svg path,
.exam-wrapper .listen-btn svg path {
    fill: var(--cream-text);
}

.exam-wrapper .audio-btn-letter:hover,
.exam-wrapper .listen-btn:hover {
    background: var(--cream-100);
    border-color: var(--cream-text);
}

.exam-wrapper .word-tooltip {
    background: var(--cream-200);
    color: var(--cream-text);
    border-color: var(--cream-400);
    box-shadow: 0 2px 6px rgba(101, 74, 57, 0.25);
}

.exam-wrapper .word-tooltip::after {
    border-top-color: var(--cream-200);
}

.exam-wrapper .audio-btn-letter.used {
    opacity: 0.4;
    border-color: var(--cream-300);
    background: var(--cream-200);
    cursor: not-allowed;
}

/* --- 6. Botones (altura uniforme --exam-btn-h, hover y micro-movimiento) --- */
.exam-wrapper .action-btn,
.exam-wrapper .action-btn.state-check,
.exam-wrapper .exam-btn-continue,
.exam-wrapper .exam-btn-retry {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--exam-btn-h);
    background: var(--cream-text);
    color: var(--cream-50);
    border: none;
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.exam-wrapper .exam-btn-continue,
.exam-wrapper .exam-btn-retry {
    padding: 0 var(--spacing-xl);
}

.exam-wrapper .action-btn:hover,
.exam-wrapper .action-btn.state-check:hover,
.exam-wrapper .exam-btn-continue:hover,
.exam-wrapper .exam-btn-retry:hover {
    opacity: 0.85;
    transform: translateY(-2px);
}

.exam-wrapper .action-btn:active,
.exam-wrapper .action-btn.state-check:active,
.exam-wrapper .exam-btn-continue:active,
.exam-wrapper .exam-btn-retry:active {
    transform: translateY(0);
}

.exam-wrapper .action-btn-wrapper button.action-btn,
.exam-wrapper .action-btn-wrapper button.action-btn.state-check,
.exam-wrapper .action-btn-wrapper button.action-btn:disabled {
    background: var(--cream-text);
    color: var(--cream-50);
}

.exam-wrapper .action-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
}

/* --- 7. Fin de nivel ---------------------------------------------------- */
.victory-panel {
    min-height: 26.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    padding: 1.5rem 2.25rem;
    background: var(--color-white);
    border: 0.0625rem solid var(--cream-300);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    color: var(--cream-text);
}

.victory-table { width: 100%; }
.res-table { text-align: center; color: var(--cream-text); }

.res-row {
    display: grid;
    align-items: center;
    border-top: 0.0625rem solid var(--cream-300);
}

.res-head { border-top: 0; font-weight: 700; }

.res-vh {
    position: absolute;
    width: 0.0625rem;
    height: 0.0625rem;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.res-bar,
.res-meter {
    position: relative;
    height: 0.5rem;
    border-radius: 62.4375rem;
    background: var(--cream-300);
}

.res-bar { overflow: hidden; }

.res-bar i,
.res-meter i {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: inherit;
    background: var(--cream-text);
    transform-origin: left center;
    animation: res-grow 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.res-meter { margin-top: 1.5rem; }

.res-meter b {
    position: absolute;
    top: -0.3125rem;
    bottom: -0.3125rem;
    left: 70%;
    width: 0.1875rem;
    margin-left: -0.09375rem;
    border-radius: 62.4375rem;
    background: var(--cream-text);
    box-shadow: 0 0 0 0.125rem var(--color-white);
}

.res-meter-label {
    position: absolute;
    left: 70%;
    bottom: calc(100% + 0.5rem);
    transform: translateX(-50%);
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1;
}

@keyframes res-grow {
    from { transform: scaleX(0); }
}

.victory-table .res-row {
    grid-template-columns: 10rem 1fr 7rem 7rem;
    gap: 0 1.5rem;
    padding: 1rem 0;
    font-size: clamp(0.9375rem, 0.88rem + 0.25vw, 1.0625rem);
}

.victory-table .res-head { padding: 0 0 0.75rem; }
.victory-table .res-label { font-weight: 700; }
.victory-table [role="cell"] { font-variant-numeric: tabular-nums; }
.victory-table .res-total-score {
    grid-column: span 2;
    font-size: 1.25rem;
    font-weight: 700;
}

/* --- 8. Resumen final --------------------------------------------------- */
.summary-panel {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.5rem 2.25rem;
    background: var(--color-white);
    border: 0.0625rem solid var(--cream-300);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    color: var(--cream-text);
}

.summary-top {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

.summary-percent {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin: 0;
}

.summary-percent b {
    font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem);
    line-height: 1;
    letter-spacing: -0.02em;
}

.summary-verdict {
    margin: 0.875rem 0 0;
    font-size: 0.9375rem;
}

.verdict-trophy-icon,
.exam-wrapper .exam-intro-header .verdict-trophy-icon {
    width: 1.85rem;
    height: 1.85rem;
    min-width: 1.85rem;
    min-height: 1.85rem;
    stroke: var(--cream-text);
    fill: none;
    stroke-width: 2;
    flex-shrink: 0;
}

.summary-breakdown {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.summary-level-row {
    display: grid;
    grid-template-columns: 6.5rem 1fr 5rem;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9375rem;
    text-align: center;
}

.sl-val { font-weight: 700; }

.summary-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-top: 1.25rem;
    border-top: 0.0625rem solid var(--cream-300);
}

.summary-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.summary-tab,
.summary-filter {
    display: inline-flex;
    align-items: center;
    min-height: var(--exam-btn-h);
    padding: 0 1rem;
    border: 0.0625rem solid var(--cream-300);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--cream-text);
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.summary-tab:hover,
.summary-filter:hover {
    background: var(--cream-100);
}

.summary-tab[aria-selected="true"],
.summary-filter[aria-pressed="true"] {
    background: var(--cream-text);
    border-color: var(--cream-text);
    color: var(--cream-50);
}

.summary-tab span {
    margin-left: 0.5rem;
    font-weight: 400;
}

.summary-table-wrap {
    max-height: 26rem;
    overflow: auto;
    border: 0.0625rem solid var(--cream-300);
    border-radius: var(--radius-md);
}

.summary-table .res-row {
    grid-template-columns: 3.5rem 1.4fr 1fr 1fr;
    gap: 0 1rem;
    padding: 0.75rem 1rem;
    font-size: 0.9375rem;
}

.summary-table .res-head {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 0.625rem 1rem;
    background: var(--cream-200);
    font-size: 0.875rem;
}

.summary-table .st-task { text-align: left; padding-left: 0; }
.summary-table .st-user,
.summary-table .st-correct { text-align: left; padding-left: 3rem; }

.st-row.is-wrong { background: var(--cream-100); }
.st-row.is-wrong .st-correct { font-weight: 700; }
.summary-table .st-empty { grid-template-columns: 1fr; padding: 1.5rem 1rem; }

.summary-table .st-divider {
    grid-template-columns: 1fr;
    padding: 0.35rem 1rem;
    line-height: 1.4;
    background: var(--cream-text);
    color: var(--cream-50);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-align: left;
    text-transform: uppercase;
}

.st-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border: 0.125rem solid var(--cream-text);
    border-radius: 50%;
    color: var(--cream-text);
}

.st-badge--ok { background: var(--cream-text); color: var(--cream-50); }
.st-badge svg {
    width: 0.8rem;
    height: 0.8rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.summary-panel .exam-btn-retry { align-self: center; }

/* --- 9. Cierre narrativo ------------------------------------------------- */
.exam-wrapper .final-story-section {
    background: transparent;
    box-shadow: none;
    padding: 0;
    margin: 3rem 0 0;
    border-radius: 0;
}

.exam-wrapper .final-story-section .reading-card {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

.exam-wrapper .final-story-section h3 {
    display: block;
    text-align: center;
    background: linear-gradient(135deg, var(--cream-200) 0%, var(--cream-300) 100%);
    color: var(--cream-text);
    box-shadow: 0 0.125rem 0.375rem var(--cream-alpha-15);
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
    margin: 0 0 var(--spacing-md);
    font-size: var(--font-h3);
}

.exam-wrapper .final-story-section h3::after {
    content: none;
}

/* --- 10. Menu flotante ---------------------------------------------------- */
.float-menu-exam .float-menu-btn {
    background: var(--cream-200);
    color: var(--cream-text);
    border: 0.0625rem solid var(--cream-300);
}

.float-menu-exam .float-menu-btn:hover {
    background: var(--cream-300);
}

.float-menu-exam .float-menu-item {
    background: var(--cream-100);
    color: var(--cream-text);
    border: 0.0625rem solid var(--cream-300);
}

.float-menu-exam .float-menu-item:hover {
    background: var(--cream-200);
    border-color: var(--cream-text);
    color: var(--cream-text);
}

/* --- 11. Media queries ---------------------------------------------------- */
@media (min-width: 769px) {
    .exam-wrapper {
        padding: 2.5rem calc(var(--spacing-lg) + 0.5rem) 2.75rem;
    }

    .summary-top {
        grid-template-columns: 1fr 1.4fr;
        gap: 2.5rem;
        align-items: center;
    }
}

@media (max-width: 768px) {
    .exam-wrapper {
        padding: 1.5rem 0.65rem 2rem;
    }

    .victory-panel,
    .summary-panel {
        padding: 1.25rem 0.75rem;
    }

    .exam-wrapper .exercise-number,
    .exam-wrapper .test-number {
        display: none;
    }

    .exam-wrapper .exercise-item strong,
    .exam-wrapper .test-question strong {
        display: block;
        line-height: 1.45;
        font-size: 0.95rem;
    }

    .exam-wrapper .exam-q-task {
        display: block;
        margin-top: 0.25rem;
    }

    .exam-wrapper .exam-intro-note {
        padding-left: 0;
        padding-right: 0;
        text-align: center;
    }

    .exam-wrapper .exam-intro-rules {
        grid-template-columns: 1fr;
        gap: 0.75rem;
        padding: 0.85rem 1rem;
    }

    .verdict-trophy-icon,
    .exam-wrapper .exam-intro-header .verdict-trophy-icon {
        width: 1.5rem;
        height: 1.5rem;
        min-width: 1.5rem;
        min-height: 1.5rem;
    }

    .victory-table .res-row {
        grid-template-columns: 5.75rem 1fr 3.25rem 3.75rem;
        gap: 0 0.35rem;
    }

    .victory-table .res-head {
        font-size: 0.75rem;
        align-items: flex-end; 
    }

    .summary-verdict,
    .summary-toolbar,
    .summary-table-wrap {
        display: none;
    }

    .summary-panel::after {
        content: "Полный отчёт по заданиям доступен на ПК";
        display: block;
        text-align: center;
        font-size: 0.8125rem;
        font-style: italic;
        color: var(--neutral-600);
        margin-top: 0.25rem;
    }

    .exam-wrapper .action-btn,
    .exam-wrapper .action-btn-wrapper,
    .exam-wrapper .exam-btn-continue,
    .exam-wrapper .exam-btn-retry {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

}

@media (prefers-reduced-motion: reduce) {
    .res-bar i,
    .res-meter i {
        animation: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   35. DARK MODE
   ═══════════════════════════════════════════════════════════════════════════ */

/* --- Theory & Feature --------------------------------------------------- */

[data-theme="dark"] .theory-section {
    background: linear-gradient(180deg, var(--cream-50) 0%, var(--dark-base) 100%);
}

[data-theme="dark"] .feature-box {
    background: linear-gradient(135deg, var(--red-50) 0%, var(--pink-200) 100%);
    border-left-color: var(--color-red);
}

/* --- Tables / Phrases headers ------------------------------------------- */

[data-theme="dark"] th,
[data-theme="dark"] .phrases-header,
[data-theme="dark"] .phrases-theme-header {
    background: linear-gradient(135deg, var(--cream-200) 0%, var(--cream-300) 100%);
    color: var(--color-text);
}

[data-theme="dark"] .phrases-header svg,
[data-theme="dark"] .phrases-theme-header svg {
    color: var(--color-text);
    stroke: var(--color-text);
}

[data-theme="dark"] .phrases-header .spanish-subtitle {
    color: var(--neutral-650);
}

/* --- Footer ------------------------------------------------------------- */

[data-theme="dark"] .footer-legal a,
[data-theme="dark"] .footer-separator,
[data-theme="dark"] .footer-copyright {
    color: var(--neutral-650);
}

[data-theme="dark"] .footer-legal a:hover {
    color: var(--green-500);
}

/* --- Modal de bloqueo --------------------------------------------------- */

[data-theme="dark"] .block-modal-note a {
    color: var(--yellow-400);
}

/* --- Navigation Mobile -------------------------------------------------- */

[data-theme="dark"] .barra-movil {
    background: var(--neutral-100);
    border-top-color: var(--neutral-400);
}

[data-theme="dark"] .btn-barra {
    color: var(--color-text);
}

[data-theme="dark"] .menu-mobile-help,
[data-theme="dark"] .menu-mobile-search {
    background: var(--cream-100);
}

[data-theme="dark"] .menu-mobile-more {
    background: transparent;
}

[data-theme="dark"] .ancla-movil {
    background: var(--neutral-150);
    border-color: var(--neutral-400);
    color: var(--color-text);
}

/* --- Navigation Desktop ------------------------------------------------- */

@media (min-width: 769px) {
    [data-theme="dark"] .scroll-anchor-item {
        background: var(--neutral-150);
        color: var(--neutral-650);
        border-color: var(--neutral-400);
    }

    [data-theme="dark"] .scroll-anchor-item:hover {
        background: var(--neutral-300);
        color: var(--color-text);
        border-color: var(--neutral-500);
        transform: translateX(-0.3125rem);
    }

    [data-theme="dark"] .dialogo-ancla,
    [data-theme="dark"] .lectura-ancla,
    [data-theme="dark"] .exercises-anchor,
    [data-theme="dark"] .test-ancla,
    [data-theme="dark"] .frases-ancla,
    [data-theme="dark"] .constructor-ancla {
        background: var(--neutral-150);
        color: var(--color-text);
    }

    [data-theme="dark"] .float-menu-btn,
    [data-theme="dark"] .float-menu-item {
        background: var(--neutral-300);
        color: var(--color-text);
        border-color: var(--neutral-400);
    }

    [data-theme="dark"] .float-menu-btn:hover,
    [data-theme="dark"] .float-menu-item:hover {
        background: var(--neutral-400);
    }

    [data-theme="dark"] .side-panel,
    [data-theme="dark"] #searchPanel {
        background: var(--cream-100);
    }

    [data-theme="dark"] .search-button {
        background: var(--green-400);
        color: var(--dark-base);
    }

    [data-theme="dark"] .search-button:hover {
        background: var(--green-500);
    }
}

/* --- Navigation Modal --------------------------------------------------- */

[data-theme="dark"] .tema-group {
    background: var(--neutral-100);
    border-color: var(--neutral-400);
}

[data-theme="dark"] .tema-group h4 {
    background: var(--neutral-150);
    color: var(--color-text);
}

[data-theme="dark"] .tema-group ul,
[data-theme="dark"] .tema-group li {
    color: var(--neutral-700);
}

/* --- Exercises ---------------------------------------------------------- */

[data-theme="dark"] .exercise-section > h2:first-child,
[data-theme="dark"] .exercise-number {
    background: linear-gradient(135deg, var(--green-100) 0%, var(--green-200) 100%);
    color: var(--green-500);
}

[data-theme="dark"] .exercise-input,
[data-theme="dark"] .answer-input,
[data-theme="dark"] .answer-input-long,
[data-theme="dark"] .help-keyboard-demo input,
[data-theme="dark"] .search-input,
[data-theme="dark"] .menu-mobile-search input,
[data-theme="dark"] .shpora-input-mobile {
    background: var(--neutral-150);
    border-color: var(--green-200);
    color: var(--color-text);
}

[data-theme="dark"] .exercise-input:focus,
[data-theme="dark"] .answer-input:focus,
[data-theme="dark"] .answer-input-long:focus {
    background: var(--neutral-100);
    border-color: var(--green-400);
}

[data-theme="dark"] .exercise-input::placeholder,
[data-theme="dark"] .answer-input::placeholder,
[data-theme="dark"] .help-keyboard-demo input::placeholder,
[data-theme="dark"] .search-input::placeholder,
[data-theme="dark"] .menu-mobile-search input::placeholder {
    color: var(--neutral-600);
}

[data-theme="dark"] .word-clickable {
    background: var(--neutral-150);
    border-color: var(--green-200);
    color: var(--green-500);
}

[data-theme="dark"] .word-clickable:hover:not(.used) {
    background: var(--green-50);
    border-color: var(--green-400);
}

/* --- Test --------------------------------------------------------------- */

[data-theme="dark"] .test-section {
    background: linear-gradient(135deg, var(--pink-50) 0%, var(--pink-100) 100%);
}

[data-theme="dark"] .test-section h2,
[data-theme="dark"] .test-results h3 {
    background: linear-gradient(135deg, var(--pink-100) 0%, var(--pink-200) 100%);
    color: var(--color-test);
}

[data-theme="dark"] .test-number {
    background: linear-gradient(135deg, var(--pink-200) 0%, var(--pink-300) 100%);
    color: var(--color-test);
}

[data-theme="dark"] .test-question {
    background: var(--neutral-100);
}

[data-theme="dark"] .test-question strong,
[data-theme="dark"] .test-progress-text {
    color: var(--color-test);
}

[data-theme="dark"] .test-option {
    background: var(--neutral-150);
    color: var(--color-text);
}

[data-theme="dark"] .test-option:hover {
    background: var(--yellow-50);
    border-color: var(--yellow-300);
}

[data-theme="dark"] .test-correct,
[data-theme="dark"] .test-results-column.correct h4 {
    background: var(--green-100);
    color: var(--green-500);
    border-color: var(--green-500);
}

[data-theme="dark"] .test-incorrect,
[data-theme="dark"] .test-results-column.incorrect h4 {
    background: var(--pink-200);
    color: var(--color-test);
    border-color: var(--color-red);
}

[data-theme="dark"] .test-progress-bar {
    background: var(--pink-100);
}

[data-theme="dark"] .result-item,
[data-theme="dark"] .result-item strong {
    background: var(--neutral-150);
    color: var(--color-text);
}

[data-theme="dark"] .result-item .correct-answer {
    color: var(--green-500);
}

/* --- Reading / Dialogue ------------------------------------------------- */

[data-theme="dark"] .reading-section {
    background: var(--yellow-50);
}

[data-theme="dark"] .dialogue-section {
    background: var(--blue-50);
}

[data-theme="dark"] .dialogue-section h2 {
    background: var(--blue-100);
}

[data-theme="dark"] .dialogue-line.active-line {
    background-color: var(--blue-100);
    border-left-color: var(--green-500);
}

/* --- Audio (badges palabras/frases) ------------------------------------- */

[data-theme="dark"] .audio-word {
    background-color: var(--green-200);
    color: var(--color-text);
}

[data-theme="dark"] .audio-word:hover {
    background-color: var(--green-500);
}

[data-theme="dark"] .dialogue-box .audio-word,
[data-theme="dark"] .reading-box .audio-word,
[data-theme="dark"] .dialogue-box .audio-word:hover,
[data-theme="dark"] .reading-box .audio-word:hover {
    background-color: var(--cream-300);
}

/* --- Karaoke / Playing (destacado amarillo) ----------------------------- */

[data-theme="dark"] .audio-word.playing,
[data-theme="dark"] .dialogue-box .audio-word.playing,
[data-theme="dark"] .reading-box .audio-word.playing,
[data-theme="dark"] .karaoke-word.active {
    background-color: var(--yellow-300);
    color: var(--dark-base);
}

/* --- Audio bar ---------------------------------------------------------- */

[data-theme="dark"] .reading-box .audio-bar-fill {
    background: linear-gradient(90deg, var(--green-300) 0%, var(--green-500) 50%, var(--green-300) 100%);
    background-size: 200% 100%;
}

[data-theme="dark"] .dialogue-box .audio-bar-btn {
    background: var(--neutral-300);
}

[data-theme="dark"] .dialogue-box .audio-bar-btn:hover {
    background: var(--neutral-400);
}

[data-theme="dark"] .dialogue-box .audio-bar-btn svg {
    fill: var(--color-text);
}

/* --- Modals ------------------------------------------------------------- */

[data-theme="dark"] .modal-container,
[data-theme="dark"] .index-modal-container,
[data-theme="dark"] .payment-modal-container,
[data-theme="dark"] .payment-info-dropdown {
    background: var(--neutral-100);
}

[data-theme="dark"] .index-modal-header {
    background: var(--neutral-150);
}

[data-theme="dark"] .index-card-button {
    background: var(--green-400);
    color: var(--dark-base);
}

[data-theme="dark"] .index-card-button:hover {
    background: var(--green-500);
}

[data-theme="dark"] .payment-modal-close {
    background: var(--neutral-300);
    color: var(--neutral-700);
}

[data-theme="dark"] .payment-modal-close:hover {
    background: var(--neutral-400);
}

[data-theme="dark"] .payment-product-card {
    border-color: var(--green-400);
}

[data-theme="dark"] .payment-accepted,
[data-theme="dark"] .payment-info-dropdown {
    border-color: var(--neutral-400);
}

[data-theme="dark"] .payment-info-list li {
    color: var(--neutral-white);
}

/* --- Keyboard ----------------------------------------------------------- */

[data-theme="dark"] .keyboard-guide {
    border-color: var(--color-red);
}

[data-theme="dark"] .guide-header {
    background-color: var(--color-red);
    color: var(--dark-base);
}

/* --- Theme Toggle ------------------------------------------------------- */


[data-theme="dark"] .theme-switch .icon-sun {
    display: none;
}

[data-theme="dark"] .theme-switch .icon-moon {
    display: block;
    color: var(--color-text);
}

/* --- Review & Motivation ------------------------------------------------ */

[data-theme="dark"] .motivational-message p {
    color: var(--color-test);
}

[data-theme="dark"] .motivational-btn {
    background: var(--gradient-green-primary);
    color: var(--dark-base);
}

[data-theme="dark"] .motivational-btn:hover {
    background: var(--gradient-green-dark);
    color: var(--dark-base);
}

[data-theme="dark"] .review-input-wrapper {
    border-color: var(--green-400);
}

[data-theme="dark"] .review-textarea,
[data-theme="dark"] .demo-review-label,
[data-theme="dark"] .review-thank-text {
    background: var(--color-bg);
    color: var(--color-text);
}

[data-theme="dark"] .review-star-btn { fill: var(--neutral-500); }
[data-theme="dark"] .review-star-btn.selected { fill: var(--yellow-300); }
[data-theme="dark"] .review-char-count { color: var(--neutral-650); }

[data-theme="dark"] .review-send-btn svg {
    fill: var(--color-bg);
}

/* --- Progress Bar ------------------------------------------------------- */

[data-theme="dark"] .urok-indicator {
    background: var(--neutral-100);
}

[data-theme="dark"] .scroll-progress-track {
    background: var(--surface-ghost);
}

[data-theme="dark"] .scroll-progress-fill {
    background: linear-gradient(
        to top,
        var(--green-400) 0%,
        var(--green-500) 40%,
        var(--green-500) 100%
    );
}

[data-theme="dark"] .scroll-progress-percent,
[data-theme="dark"] .scroll-progress-lesson-num {
    color: var(--green-400);
}

[data-theme="dark"] .scroll-progress-lesson {
    color: var(--neutral-600);
}

/* --- Shpora + Slovar (barras y botones) --------------------------------- */

[data-theme="dark"] .shpora-section {
    background: var(--neutral-100);
}

[data-theme="dark"] .shpora-block b,
[data-theme="dark"] .shpora-num,
[data-theme="dark"] .shpora-nav-link,
[data-theme="dark"] .shpora-btn-small {
    background: var(--neutral-300);
    color: var(--color-text);
}

[data-theme="dark"] .shpora-float-btn a,
[data-theme="dark"] .slovar-float-btn a,
[data-theme="dark"] .shpora-back-desktop {
    background: var(--neutral-300);
    color: var(--color-text);
    border-color: var(--neutral-400);
}

[data-theme="dark"] .shpora-btn-small:hover,
[data-theme="dark"] .shpora-float-btn a:hover,
[data-theme="dark"] .slovar-float-btn a:hover,
[data-theme="dark"] .shpora-back-desktop:hover {
    background: var(--neutral-400);
}

[data-theme="dark"] .shpora-mobile-bar,
[data-theme="dark"] .slovar-mobile-bar,
[data-theme="dark"] .slovar-desktop-bar {
    background: var(--neutral-100);
    border-top-color: var(--neutral-400);
}

[data-theme="dark"] .slovar-header,
[data-theme="dark"] .slovar-controls {
    background: var(--color-bg);
    border-color: var(--neutral-400);
}

[data-theme="dark"] .course-logo img {
    filter: brightness(0) invert(1);
    opacity: 0.9;
}

/* --- Slovar botones ----------------------------------------------------- */

[data-theme="dark"] .slovar-letra-btn,
[data-theme="dark"] .slovar-tema-btn {
    background: var(--neutral-150);
    border-color: var(--neutral-400);
    color: var(--color-text);
}

[data-theme="dark"] .slovar-letra-btn.active,
[data-theme="dark"] .slovar-tema-btn.active {
    background: var(--neutral-300);
    border-color: var(--green-400);
    color: var(--green-400);
}

[data-theme="dark"] .slovar-frases-toggle {
    background: var(--neutral-300);
    border-color: var(--neutral-400);
    color: var(--color-text);
}

[data-theme="dark"] .slovar-frases-toggle.active {
    background: var(--neutral-400);
    border-color: var(--neutral-500);
}

[data-theme="dark"] button.slovar-menu-toggle-btn.slovar-menu-switch-btn {
    background: var(--green-200);
    border-color: var(--green-700);
    color: var(--green-500);
}

[data-theme="dark"] .slovar-divider,
[data-theme="dark"] .slovar-controls-divider {
    background: var(--neutral-400);
}

/* --- Examen Final ----------------------------------------------------- */

[data-theme="dark"] .header-card-exam .tema {
    color: var(--cream-text);
}

[data-theme="dark"] .header-card-exam .tema::before {
    background: linear-gradient(90deg, transparent 0%, var(--cream-text) 100%);
}

[data-theme="dark"] .header-card-exam .tema::after {
    background: linear-gradient(90deg, var(--cream-text) 0%, transparent 100%);
}

[data-theme="dark"] .header-card-exam .exam-subhead {
    color: var(--cream-text);
}

[data-theme="dark"] .exam-wrapper .exercise-section > h2:first-child,
[data-theme="dark"] .exam-wrapper .test-section > h2:first-child,
[data-theme="dark"] .exam-wrapper .exam-intro-header {
    background: linear-gradient(135deg, var(--cream-200) 0%, var(--cream-300) 100%);
    color: var(--cream-text);
    box-shadow: var(--shadow-sm);
}

[data-theme="dark"] .exam-wrapper .exercise-section > h2 svg,
[data-theme="dark"] .exam-wrapper .test-section > h2 svg,
[data-theme="dark"] .exam-wrapper .exam-intro-header svg {
    stroke: var(--cream-text);
}

[data-theme="dark"] .exam-wrapper .exercise-number,
[data-theme="dark"] .exam-wrapper .test-number {
    background: var(--cream-200);
    color: var(--cream-text);
}

[data-theme="dark"] .exam-wrapper .word-clickable {
    background: var(--color-white);
    border-color: var(--cream-300);
    color: var(--cream-text);
}

[data-theme="dark"] .exam-wrapper .word-clickable:hover {
    background: var(--cream-200);
    border-color: var(--cream-text);
}

[data-theme="dark"] .exam-wrapper .answer-input,
[data-theme="dark"] .exam-wrapper .answer-input-long,
[data-theme="dark"] .exam-wrapper .exercise-input {
    background: var(--color-white);
    border-color: var(--cream-300);
    color: var(--cream-text);
}

[data-theme="dark"] .exam-wrapper .exercise-input:focus,
[data-theme="dark"] .exam-wrapper .answer-input:focus {
    border-color: var(--cream-text);
    box-shadow: 0 0 0 0.1875rem var(--cream-alpha-15);
}

[data-theme="dark"] .exam-wrapper .exercise-progress-bar,
[data-theme="dark"] .exam-wrapper .test-progress-bar {
    background: var(--cream-200);
}

[data-theme="dark"] .exam-wrapper .exercise-progress-fill,
[data-theme="dark"] .exam-wrapper .test-progress-fill {
    background: var(--cream-text);
}

[data-theme="dark"] .exam-wrapper .test-progress-text,
[data-theme="dark"] .exam-wrapper .test-question strong {
    color: var(--cream-text);
}

[data-theme="dark"] .exam-wrapper .test-option {
    color: var(--cream-text);
}

[data-theme="dark"] .exam-wrapper .test-option:hover {
    border-color: var(--cream-400);
    background: var(--cream-200);
}

[data-theme="dark"] .exam-wrapper .action-btn,
[data-theme="dark"] .exam-wrapper .action-btn.state-check,
[data-theme="dark"] .exam-wrapper .action-btn.state-retry {
    background: var(--cream-text);
    color: var(--cream-btn-text);
    border: none;
    box-shadow: none;
}

[data-theme="dark"] .exam-wrapper .action-btn:hover,
[data-theme="dark"] .exam-wrapper .action-btn.state-check:hover,
[data-theme="dark"] .exam-wrapper .action-btn.state-retry:hover {
    background: var(--cream-hover);
    color: var(--cream-btn-text);
    box-shadow: 0 0.125rem 0.5rem var(--cream-alpha-15);
}

[data-theme="dark"] .float-menu-exam .float-menu-btn {
    background: var(--cream-200);
    color: var(--cream-text);
    border: 0.0625rem solid var(--cream-300);
}

[data-theme="dark"] .float-menu-exam .float-menu-btn:hover {
    background: var(--cream-300);
}

[data-theme="dark"] .float-menu-exam .float-menu-item {
    background: var(--cream-50);
    color: var(--cream-text);
    border: 0.0625rem solid var(--cream-300);
}

[data-theme="dark"] .float-menu-exam .float-menu-item:hover {
    background: var(--cream-200);
    border-color: var(--cream-text);
    color: var(--cream-text);
}

/* ═══════════════════════════════════════════════════════════════════════════
   36. DASHBOARD (progreso.html)
   ═══════════════════════════════════════════════════════════════════════════ */

.dash-wrap {
    margin: 0 auto;
    padding: 1rem 1.5rem 3rem;
}

.dash-wrap + .footer-legal {
    margin-top: 0;
}

.dash-cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.dash-card {
    position: relative;
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-sm);
    min-width: 0;
}

.dash-card.is-single { margin-bottom: var(--spacing-md); }

.dash-card.is-audio {
    display: flex;
    flex-direction: column;
}

.dash-card.is-audio .dash-rings {
    flex: 1;
    align-content: center;
}

.dash-card h2 {
    font-size: var(--font-h4);
    color: var(--color-text);
    margin: 0 0 var(--spacing-md);
    line-height: 1.3;
}

/* Botón info (i) */

.dash-info-btn {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    width: 1.25rem;
    height: 1.25rem;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
}

.dash-info-btn svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: var(--yellow-400);
    stroke-width: 3.2;
    stroke-linecap: round;
}

.dash-info-btn:hover { transform: scale(1.1); }

/* Barra global */

.dash-bar {
    height: 0.625rem;
    background: var(--cream-300);
    border-radius: 0.5rem;
    overflow: hidden;
}

.dash-bar > i {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--green-500), var(--green-300));
    transition: width 0.6s ease;
}

.dash-bar-text {
    display: flex;
    justify-content: space-between;
    font-size: 0.875rem;
    color: var(--cream-text);
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

/* Cuadrículas de uroks */

.dash-grid {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 0.35rem;
    margin-top: var(--spacing-md);
}

.dash-cell {
    width: 100%;
    max-width: 2.25rem;
    aspect-ratio: 1;
    justify-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 0.75rem;
    font-family: var(--font-family);
    cursor: pointer;
    background: var(--cream-200);
    color: var(--cream-text);
    border: 0.0625rem solid var(--cream-300);
    transition: transform var(--transition-fast);
}

.dash-cell:hover { transform: translateY(-0.125rem); }
.dash-cell.is-done { background: var(--green-200); color: var(--green-800); border-color: var(--green-300); }
.dash-cell.is-progress { background: var(--yellow-100); color: var(--yellow-500); border-color: var(--yellow-300); }
.dash-cell.is-locked { opacity: 0.45; }
.dash-cell.is-selected { outline: 0.125rem solid var(--green-500); outline-offset: 0.0625rem; }

.dash-legend {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    margin-top: var(--spacing-md);
    font-size: 0.8125rem;
    color: var(--cream-text);
}

.dash-legend i {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 0.2rem;
    margin-right: 0.35rem;
    vertical-align: -0.1rem;
}

/* Valoración global */

.dash-score {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 0.0625rem solid var(--cream-300);
}

.dash-score-block {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    min-width: 0;
}

.dash-score-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--cream-text);
    padding-bottom: 0.35rem;
    border-bottom: 0.125rem solid var(--green-200);
}

.dash-score-title .dash-info-btn {
    position: static;
    flex: 0 0 auto;
}

.dash-score-top {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-sm);
}

.dash-score-top b {
    font-size: 2.25rem;
    line-height: 1.1;
    color: var(--green-700);
}

.dash-score-top span {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-text);
}

.dash-score-row {
    display: flex;
    justify-content: space-between;
    gap: var(--spacing-sm);
    font-size: 0.875rem;
    color: var(--color-text);
}

.dash-score-row b {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--cream-text);
    white-space: nowrap;
}

.dash-last {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    margin: 2.4rem 0 0;
}

.dash-last-date {
    font-size: 0.875rem;
    color: var(--cream-text);
}

/* Anillos de audio */

.dash-rings {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-lg) var(--spacing-sm);
}

.dash-ring-item { text-align: center; }

.dash-ring {
    position: relative;
    width: 100%;
    max-width: 9rem;
    margin: 0 auto;
    aspect-ratio: 1;
}

.dash-ring svg { width: 100%; height: 100%; display: block; }

.dash-ring .bg { fill: none; stroke: var(--cream-300); stroke-width: 9; }

.dash-ring .fg {
    fill: none;
    stroke-width: 9;
    stroke-linecap: round;
    transition: stroke-dasharray 0.8s ease;
}

.dash-ring.is-w .fg { stroke: var(--green-500); }
.dash-ring.is-f .fg { stroke: var(--blue-400); }
.dash-ring.is-c .fg { stroke: var(--yellow-400); }
.dash-ring.is-u .fg { stroke: var(--blue-700); }

.dash-ring b {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--color-text);
}

.dash-ring-item strong {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.8125rem;
    line-height: 1.3;
    color: var(--color-text);
}

.dash-ring-item small {
    display: block;
    font-size: 0.75rem;
    color: var(--cream-text);
}

/* Tiras diálogo / lectura */

.dash-strip { margin-top: var(--spacing-md); }

.dash-strip-head {
    display: flex;
    justify-content: space-between;
    font-size: 0.875rem;
    color: var(--color-text);
    margin-bottom: 0.35rem;
}

.dash-strip-head b { font-size: 0.8125rem; color: var(--cream-text); }

.dash-strip-cells {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 0.125rem;
}

.dash-seg {
    height: 0.75rem;
    border-radius: 0.1875rem;
    background: var(--cream-300);
}

.dash-seg.is-on { background: var(--green-500); }

/* Detalle por urok */

.dash-detail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    margin-bottom: var(--spacing-md);
}

.dash-detail-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.dash-detail-title h2 { margin: 0; }

.dash-detail-cols {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--spacing-lg);
}

.dash-sub {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--cream-text);
    padding-bottom: 0.4rem;
    margin-bottom: var(--spacing-sm);
    border-bottom: 0.125rem solid var(--green-200);
    line-height: 1.4;
}

.dash-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}

.dash-chip.is-ok { background: var(--green-50); color: var(--green-700); }
.dash-chip.is-warn { background: var(--yellow-100); color: var(--yellow-500); }
.dash-chip.is-no { background: var(--cream-200); color: var(--cream-text); }

.dash-chip .dash-check { width: 0.8rem; height: 0.8rem; margin: 0; }

.dash-mini-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-sm);
}

.dash-mini {
    border-radius: var(--radius-md);
    padding: 0.4rem var(--spacing-xs);
    text-align: center;
}

.dash-mini b { display: block; font-size: 1.25rem; line-height: 1.1; }
.dash-mini span { display: block; font-size: 0.6875rem; line-height: 1.25; margin-top: 0.15rem; }

.dash-mini.is-ok { background: var(--green-50); color: var(--green-700); }
.dash-mini.is-retry { background: var(--yellow-100); color: var(--yellow-500); }
.dash-mini.is-bad { background: var(--red-50); color: var(--red-600); }

.dash-errors {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    max-height: 18rem;
    overflow-y: auto;
    padding-right: 0.25rem;
}

.dash-error {
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--result-item-bg);
    border-left: 0.25rem solid var(--color-red);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--color-text);
}

.dash-error.is-fixed { border-left-color: var(--green-500); }

.dash-error em {
    display: block;
    font-style: normal;
    color: var(--green-700);
    font-weight: 600;
}

.dash-error small { display: block; color: var(--cream-text); }
.dash-error.is-fixed small { color: var(--green-700); }

.dash-check {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: var(--green-700);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -0.15rem;
    margin-right: 0.3rem;
}

.dash-empty { color: var(--cream-text); font-size: 0.9375rem; margin: 0; }

.dash-abar {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr) 6.5rem;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 0.875rem;
    margin-bottom: 0.6rem;
    color: var(--color-text);
}

.dash-abar b { text-align: right; font-size: 0.8125rem; color: var(--cream-text); }

/* Botones y accesos */

.dash-btn {
    display: inline-block;
    padding: 0.4rem 1.1rem;
    border: none;
    border-radius: var(--radius-base);
    background: var(--gradient-green-primary);
    color: #fff;
    font-weight: 700;
    font-size: 0.875rem;
    line-height: 1.4;
    font-family: var(--font-family);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: all var(--transition-normal);
}

.dash-btn:hover {
    transform: translateY(-0.0625rem);
    box-shadow: 0 0.25rem 0.75rem var(--green-alpha-40);
}

.dash-links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
}

.dash-tile {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--cream-100);
    border: 0.0625rem solid var(--cream-300);
    border-radius: var(--radius-lg);
    color: var(--color-text);
    text-decoration: none;
    font-family: var(--font-family);
    text-align: left;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.dash-tile:hover {
    border-color: var(--green-300);
    background: var(--green-50);
    transform: translateY(-0.125rem);
}

.dash-tile svg {
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
    fill: none;
    stroke: var(--green-700);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dash-tile strong { display: block; font-size: 0.9375rem; line-height: 1.3; }
.dash-tile span { display: block; font-size: 0.8125rem; color: var(--cream-text); line-height: 1.3; }

.dash-note {
    font-size: 0.8125rem;
    color: var(--cream-text);
    text-align: center;
    line-height: 1.5;
    margin: var(--spacing-md) 0 0;
}

/* Ventana de ayuda «Как работает прогресс» */

.dash-overlay {
    position: fixed;
    inset: 0;
    background: var(--overlay-modal);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal);
    padding: 1rem;
}

.dash-overlay.active { display: flex; }

.dash-overlay-box {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--spacing-lg);
    width: 100%;
    max-width: 72rem;
    max-height: 95vh;
    overflow-y: auto;
    box-shadow: var(--shadow-xl);
    border-top: 0.1875rem solid var(--green-500);
}

.dash-overlay-box h3 { margin: 0 0 var(--spacing-sm); color: var(--green-800); font-size: var(--font-h4); }

.dash-overlay-box li { margin-bottom: 0.5rem; }

.dash-detail-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.dash-info-link {
    padding: 0;
    background: none;
    border: none;
    font-family: var(--font-family);
    font-size: 0.8125rem;
    color: var(--green-700);
    text-decoration: underline;
    cursor: pointer;
}

.dash-hint {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--cream-text);
    background: var(--cream-100);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm);
    margin: var(--spacing-sm) 0 0;
}

.dash-hint.is-done { background: var(--green-50); color: var(--green-700); }
.dash-hint strong { display: block; margin-bottom: 0.25rem; color: var(--color-text); }
.dash-hint ul { margin: 0; padding-left: 1.1rem; }

.dash-info-divider {
    border: none;
    border-top: 0.125rem solid var(--cream-300);
    margin: var(--spacing-lg) 0;
}

.dash-info-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.dash-info-head h3 { margin: 0; }

.dash-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--spacing-lg);
}

.dash-info-col h4 {
    margin: 0 0 var(--spacing-sm);
    padding-bottom: 0.35rem;
    font-size: 0.9375rem;
    color: var(--green-800);
    border-bottom: 0.125rem solid var(--green-200);
}

.dash-info-col p {
    margin: 0 0 var(--spacing-xs);
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-text);
}

.dash-info-col ul {
    margin: 0;
    padding-left: 1.1rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-text);
}

/* Responsive */

@media (max-width: 1100px) {
    .dash-detail-cols { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
    .dash-cols { grid-template-columns: 1fr; }
    .dash-links { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .dash-wrap { padding: 0.75rem 0.75rem 3rem; }
    .dash-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .dash-score { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   37. PRONUNCIACIÓN MÓVIL
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .hablar-dock {
        position: fixed;
        left: 0;
        right: 0;
        bottom: calc(3.5rem - 0.0625rem);
        display: flex;
        justify-content: center;
        z-index: calc(var(--z-menu-mobile) + 2);
        pointer-events: none;
    }

    .hablar-dock.is-open {
        bottom: 0;
        top: 0;
        align-items: flex-end;
    }

    .hablar-tab,
    .hablar-sheet,
    .hablar-overlay {
        pointer-events: auto;
    }

    .hablar-ico {
        width: 1.25rem;
        height: 1.25rem;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
        flex-shrink: 0;
    }

    .hablar-mic {
        width: 1.925rem;
        height: 1.925rem;
        border-radius: var(--radius-circle);
        background: var(--gradient-green-primary);
        color: var(--color-white);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .hablar-mic .hablar-ico {
        width: 1.05rem;
        height: 1.05rem;
    }

    .hablar-tab {
        position: fixed;
        left: 1rem;
        bottom: calc(3.5rem + 1rem);
        display: flex;
        align-items: center;
        justify-content: center;
        width: 1.925rem;
        height: 1.925rem;
        padding: 0;
        background: var(--gradient-green-primary);
        color: var(--color-white);
        border: none;
        border-radius: var(--radius-circle);
        box-shadow: var(--shadow-md);
        cursor: pointer;
    }

    .hablar-tab .hablar-ico {
        width: 1.05rem;
        height: 1.05rem;
    }

    .hablar-dock.is-open .hablar-tab {
        display: none;
    }

    .hablar-overlay {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--overlay-light);
    }

    .hablar-dock.is-open .hablar-overlay {
        display: block;
    }

    .hablar-sheet {
        display: none;
        position: relative;
        box-sizing: border-box;
        width: 100%;
        max-height: 85vh;
        overflow-y: auto;
        padding: var(--spacing-xs) var(--spacing-md) var(--spacing-lg);
        background: var(--cream-100);
        color: var(--color-text);
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        box-shadow: var(--shadow-xl);
        font-family: var(--font-family);
    }

    .hablar-dock.is-open .hablar-sheet {
        display: block;
    }

    .hablar-handle {
        width: 2.5rem;
        height: 0.25rem;
        margin: var(--spacing-xs) auto var(--spacing-sm);
        border-radius: var(--radius-sm);
        background: var(--green-200);
    }

    .hablar-head {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        margin-bottom: var(--spacing-sm);
    }

    .hablar-title {
        flex: 1;
        min-width: 0;
        font-size: clamp(1rem, 0.9318rem + 0.3409vw, 1.1875rem);
        font-weight: 700;
    }

    .hablar-info-btn,
    .hablar-close {
        width: 2.25rem;
        height: 2.25rem;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        background: none;
        border: none;
        border-radius: var(--radius-circle);
        color: var(--green-700);
        cursor: pointer;
        flex-shrink: 0;
    }

    .hablar-info-btn {
        color: var(--cream-text);
    }

    /* --- Pantalla A: instrucciones (solo con .is-info) --- */

    .hablar-info {
        display: none;
        font-size: 0.875rem;
        line-height: 1.4;
    }

    .hablar-dock.is-info .hablar-info {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .hablar-dock.is-info .hablar-list {
        display: none;
    }

    .hablar-info p {
        margin: 0;
        font-size: 0.875rem;
        line-height: 1.25;
    }

    .hablar-info-warn {
        padding: var(--spacing-sm);
        background: var(--color-error-light);
        border-left: 0.25rem solid var(--color-error);
        border-radius: var(--radius-sm);
        color: var(--color-error);
        font-weight: 600;
    }

    .hablar-note-head {
        font-weight: 700;
    }

    .hablar-leg {
        position: relative;
        padding-left: 1.25rem;
    }

    .hablar-leg::before {
        content: "";
        position: absolute;
        left: 0.25rem;
        top: 0.45em;
        width: 0.5rem;
        height: 0.5rem;
        border-radius: var(--radius-circle);
    }

    .hablar-leg-ok::before {
        background: var(--green-700);
    }

    .hablar-leg-bad::before {
        background: var(--color-error);
    }

    .hablar-info-note {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-xs);
        padding: var(--spacing-md);
        background: var(--green-50);
        border: 0.0625rem solid var(--green-200);
        border-radius: var(--radius-md);
    }

    .hablar-understood {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 2.25rem;
        background: var(--gradient-green-primary);
        color: var(--color-white);
        border: none;
        border-radius: var(--radius-md);
        font-family: inherit;
        font-size: 0.875rem;
        font-weight: 600;
        cursor: pointer;
    }

    /* --- Recordatorio 1-4 (solo en práctica) --- */

    .hablar-remind {
        display: none;
        margin-bottom: var(--spacing-sm);
        padding: var(--spacing-xs) var(--spacing-sm);
        background: var(--green-50);
        border: 0.0625rem solid var(--green-200);
        border-radius: var(--radius-md);
        font-size: 0.875rem;
        line-height: 1.3;
    }

    .hablar-dock.is-practice:not(.is-info) .hablar-remind {
        display: block;
    }

    .hablar-remind-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0;
        font-weight: 700;
        list-style: none;
        cursor: pointer;
    }

    .hablar-remind-title::-webkit-details-marker {
        display: none;
    }

    .hablar-remind-title .hablar-ico {
        color: var(--green-700);
        transition: transform var(--transition-fast);
    }

    .hablar-remind details[open] .hablar-remind-title .hablar-ico {
        transform: rotate(180deg);
    }

    .hablar-remind details[open] .hablar-remind-title {
        margin-bottom: 0.125rem;
    }

    .hablar-remind-list {
        margin: 0;
        padding-left: 1.25rem;
    }

    /* --- Pantalla B: lista de frases --- */

    .hablar-list {
        display: block;
    }

    .hablar-dock.is-practice .hablar-list {
        display: none;
    }

    .hablar-row {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        padding: var(--spacing-xs) 0;
        border-bottom: 0.0625rem solid var(--green-200);
    }

    .hablar-play,
    .hablar-play-main {
        width: 1.925rem;
        height: 1.925rem;
        border-radius: var(--radius-circle);
    }

    .hablar-play svg,
    .hablar-play-main svg {
        width: 1.05rem;
        height: 1.05rem;
    }

    .hablar-go {
        flex: 1;
        min-width: 0;
        display: flex;
        align-items: center;
        gap: var(--spacing-xs);
        padding: var(--spacing-xs) 0;
        background: none;
        border: none;
        color: var(--color-text);
        font-family: inherit;
        text-align: left;
        cursor: pointer;
    }

    .hablar-go-text {
        flex: 1;
        min-width: 0;
        font-size: clamp(0.875rem, 0.6518rem + 1.1161vw, 1.1875rem);
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .hablar-go .hablar-ico {
        color: var(--green-700);
    }

    /* --- Práctica --- */

    .hablar-practice {
        display: none;
    }

    .hablar-dock.is-practice .hablar-practice {
        display: block;
    }

    .hablar-dock.is-info .hablar-practice {
        display: none;
    }

    .hablar-nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: var(--spacing-sm);
    }

    .hablar-back {
        display: flex;
        align-items: center;
        gap: var(--spacing-xs);
        padding: var(--spacing-xs) 0;
        background: none;
        border: none;
        color: var(--green-700);
        font-family: inherit;
        font-size: 0.875rem;
        font-weight: 600;
        cursor: pointer;
    }

    .hablar-count {
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--green-700);
    }

    .hablar-phrase {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        margin-bottom: var(--spacing-md);
    }

    .hablar-texts {
        flex: 1;
        min-width: 0;
    }

    .hablar-es {
        font-size: clamp(0.875rem, 0.6518rem + 1.1161vw, 1.1875rem);
        font-weight: 600;
        line-height: 1.3;
    }

    .hablar-ru {
        margin-top: var(--spacing-xs);
        font-size: 0.875rem;
        opacity: 0.8;
    }

    .hablar-field {
        position: relative;
    }

    .hablar-input {
        display: block;
        width: 100%;
        box-sizing: border-box;
        height: clamp(2.125rem, 1.7679rem + 1.7857vw, 2.625rem);
        padding: 0 2.5rem 0 var(--spacing-sm);
        font-size: clamp(0.875rem, 0.6518rem + 1.1161vw, 1.1875rem);
        background: var(--color-white);
    }

    .hablar-clear {
        position: absolute;
        top: 50%;
        right: 0.25rem;
        transform: translateY(-50%);
        width: 2rem;
        height: 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        background: none;
        border: none;
        border-radius: var(--radius-circle);
        color: var(--green-700);
        cursor: pointer;
    }

    .hablar-check,
    .hablar-next {
        width: 100%;
        height: 2.25rem;
        font-size: 0.875rem;
        margin-top: var(--spacing-sm);
    }

    .hablar-next {
        display: none;
        margin-bottom: var(--spacing-sm);
    }

    .hablar-dock.is-checked .hablar-next {
        display: flex;
    }

    .hablar-result {
        margin-top: var(--spacing-sm);
        display: flex;
        flex-wrap: wrap;
        gap: var(--spacing-xs);
        font-size: clamp(0.875rem, 0.6518rem + 1.1161vw, 1.1875rem);
        font-weight: 600;
    }

    .hablar-w {
        padding: 0.125rem var(--spacing-xs);
        border-radius: var(--radius-sm);
    }

    .hablar-ok {
        background: var(--green-50);
        color: var(--green-700);
    }

    .hablar-bad {
        background: var(--color-error-light);
        color: var(--color-error);
    }
}

body {
    -webkit-user-select: none;
    user-select: none;
}

input,
textarea {
    -webkit-user-select: text;
    user-select: text;
}

@media print {
    body:not(#fnd-print) > * {
        display: none;
    }

    body::after {
        content: "© 2026 Fornewday";
        display: block;
        padding: 4rem 1rem;
        text-align: center;
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--color-text);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FIN DE UROK.CSS
   ═══════════════════════════════════════════════════════════════════════════ */