/*
 * OposAs — Sistema de Diseño
 * oposas-brand.css
 *
 * Uso: <link rel="stylesheet" href="/css/oposas-brand.css">
 *      (ajusta la ruta según la profundidad del archivo que lo incluya)
 *
 * Secciones:
 *   1. Variables CSS (:root)
 *   2. Reset y base
 *   3. Tipografía — escala de tamaños (letra0–letra8) y familias
 *   4. Utilidades generales
 *   5. Navbar / botón fijo Entrar
 *   6. Hero
 *   7. Badges de confianza
 *   8. Botones CTA
 *   9. Stats bar
 *  10. Features / tarjetas de funcionalidades
 *  11. Formulario Demo (card-formulario-demo)
 *  12. Cards Demo vs Pro
 *  13. YouTube cards
 *  14. Breadcrumb
 *  15. Banner de categoría
 *  16. Enlace convocatoria oficial
 *  17. FAQ
 *  18. Sección features (landing principal)
 *  19. Tabla de oposiciones
 *  20. Footer
 *  21. Botón volver arriba
 *  22. Utilidades de imagen / fondo
 *  23. Responsive tweaks
 */


/* ============================================================
   1. VARIABLES CSS
   ============================================================ */
:root {
    /* Paleta de marca */
    --verde-primario:   #a8e6cf;
    --verde-secundario: #5dbea3;
    --verde-terciario:  #347474;
    --verde-dark:       #1a5c4f;
    --verde-darker:     #134a3f;

    /* Fondo */
    --bg-base:          #f7faf9;
    --bg-blanco:        #ffffff;
    --bg-footer:        #f0f9f5;
    --bg-hero-start:    #f5fdfb;
    --bg-hero-end:      #eaf7f1;

    /* Texto */
    --text-body:        var(--verde-terciario);
    --text-muted:       #6b7280;
    --text-dark:        #374151;
    --text-slate:       #4b5563;
    --text-gray-light:  #9ca3af;

    /* Bordes / separadores */
    --border-verde-light:  rgba(168, 230, 207, 0.45);
    --border-verde-subtle: rgba(168, 230, 207, 0.50);
    --border-dark-subtle:  rgba(26, 92, 79, 0.12);
    --border-dark-soft:    rgba(26, 92, 79, 0.15);
    --border-dark-medium:  rgba(26, 92, 79, 0.22);

    /* Estados semanticos */
    --estado-correcto-bg:              #f0faf6;
    --estado-correcto-soft-bg:         rgba(38, 164, 125, 0.10);
    --estado-correcto-border:          rgba(38, 164, 125, 0.16);
    --estado-correcto-border-strong:   #22c55e;
    --estado-correcto-chip-bg:         #dcfce7;
    --estado-correcto-text:            #15803d;

    --estado-incorrecto-bg:            #fff5f5;
    --estado-incorrecto-soft-bg:       rgba(187, 84, 84, 0.07);
    --estado-incorrecto-soft-bg-alt:   rgba(187, 84, 84, 0.06);
    --estado-incorrecto-border:        rgba(187, 84, 84, 0.16);
    --estado-incorrecto-border-soft:   rgba(187, 84, 84, 0.18);
    --estado-incorrecto-border-strong: #ef4444;
    --estado-incorrecto-text:          #b91c1c;
    --estado-incorrecto-text-soft:     #8f4343;
    --estado-incorrecto-text-strong:   #7b3636;
    --estado-incorrecto-cta:           #dc2626;

    /* Sombras reutilizables */
    --shadow-xs:   0 2px 8px  rgba(26, 92, 79, 0.08);
    --shadow-sm:   0 2px 8px  rgba(26, 92, 79, 0.10);
    --shadow-md:   0 4px 16px rgba(26, 92, 79, 0.12);
    --shadow-lg:   0 4px 20px rgba(26, 92, 79, 0.10);
    --shadow-xl:   0 8px 24px rgba(26, 92, 79, 0.12);
    --shadow-form: 0 20px 40px rgba(0, 0, 0, 0.08);

    /* Radios */
    --radius-sm:  8px;
    --radius-md:  12px;
    --radius-lg:  16px;
    --radius-pill: 50px;
    --radius-circle: 50%;

    /* Transiciones */
    --transition-fast:   0.2s ease;
    --transition-normal: 0.25s ease;
    --transition-slow:   0.3s ease;
}


/* ============================================================
   2. RESET Y BASE
   ============================================================ */
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    color: var(--verde-terciario);
    background-color: var(--bg-base);
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

a {
    text-decoration: none;
}


/* ============================================================
   3. TIPOGRAFÍA — escala de tamaños y familias
   ============================================================ */

/* Escala numérica (letter scale) */
.letra8  { font-size:  8px; }
.letra7  { font-size: 10px; }
.letra6  { font-size: 12px; }
.letra5  { font-size: 14px; }
.letra4  { font-size: 16px; }
.letra3  { font-size: 18px; }
.letra2  { font-size: 20px; }
.letra1  { font-size: 24px; }
.letra0  { font-size: 30px; }
.letra00 { font-size: 40px; }
.letra000{ font-size: 50px; }

/* Utilidad de peso */
.negrita { font-weight: bold; }

/*
 * Familias tipográficas — se completan en cada plantilla con
 * las variables PHP ($fuenteParaLetra1 … $fuenteParaLetra5)
 * que inyectan la declaración font-family correspondiente.
 * Aquí se definen las clases receptoras para que funcionen
 * sin PHP cuando el CSS se enlace de forma estática.
 *
 * Ejemplo de uso en <body>: class="tipoLetra1"
 */
.tipoLetra1 { /* font-family inyectada por $fuenteParaLetra1 */ }
.tipoLetra2 { /* font-family inyectada por $fuenteParaLetra2 */ }
.tipoLetra3 { /* font-family inyectada por $fuenteParaLetra3 */ }
.tipoLetra4 { /* font-family inyectada por $fuenteParaLetra4 */ }
.tipoLetra5 { /* font-family inyectada por $fuenteParaLetra5 */ }


/* ============================================================
   4. UTILIDADES GENERALES
   ============================================================ */
.puntero { cursor: pointer; }

.ir-arriba-anchor,
.ir-arriba-link {
    cursor: pointer;
    position: fixed;
    bottom: 100px;
    right: 20px;
    z-index: 3;
}

.classVerImagen {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

/* Espaciado de formularios */
.input-group-text {
    border-radius: 0.375rem 0 0 0.375rem;
}

.form-select {
    border-radius: 0 0.375rem 0.375rem 0;
}

/* Utilidad de emoji inline */
.emoji {
    font-size: 1.5rem;
    vertical-align: middle;
}


/* ============================================================
   5. NAVBAR / BOTÓN FIJO "ENTRAR"
   ============================================================ */

/* Marca de navbar */
.navbar-brand {
    font-size: 1.75rem;
}

.navbar-brand img {
    height: 40px;
    margin-right: 10px;
}

/* Botón flotante fijo (esquina superior izquierda) */
.posicionaEstoGuay {
    cursor: pointer;
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 99;
}

/* Botón "Entrar en OposAs" */
.btn-entrar {
    background-color: var(--verde-dark);
    color: #ffffff !important;
    border-radius: var(--radius-sm);
    box-shadow: 0 2px 8px rgba(26, 92, 79, 0.25);
    text-decoration: none;
    display: inline-block;
    transition: background-color var(--transition-normal),
                box-shadow var(--transition-normal);
}

.btn-entrar:hover {
    background-color: var(--verde-darker);
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(26, 92, 79, 0.38);
}


/* ============================================================
   6. HERO
   ============================================================ */
.hero-section {
    background: linear-gradient(160deg, var(--bg-hero-start) 0%, var(--bg-hero-end) 100%);
    padding: 2rem 0;
}

/* Variante con más padding (páginas de categoría) */
.hero-section--category {
    padding: 3rem 0;
}

/* Badge de categoría dentro del hero */
.hero-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.88);
    color: var(--verde-terciario);
    border-radius: var(--radius-pill);
    padding: 0.4rem 1rem;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(26, 92, 79, 0.10);
}

/* Nota personal / quote */
.personal-note {
    background: var(--bg-blanco);
    border-radius: var(--radius-md);
    box-shadow: 0 2px 8px rgba(88, 175, 138, 0.08);
    padding: 2rem;
    margin-top: 3rem;
    margin-bottom: 2rem;
    max-width: 700px;
}

.personal-note h3 {
    color: var(--verde-secundario);
    font-weight: bold;
}


/* ============================================================
   7. BADGES DE CONFIANZA
   ============================================================ */
.badge-trust {
    display: inline-flex;
    align-items: center;
    background: rgba(26, 92, 79, 0.08);
    color: var(--verde-dark);
    border: 1px solid var(--border-dark-medium);
    border-radius: var(--radius-pill);
    padding: 0.35rem 0.9rem;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}


/* ============================================================
   8. BOTONES CTA
   ============================================================ */

/* Botón principal — registro / demo gratis */
.btn-registro {
    background-color: var(--verde-dark);
    border: none;
    font-weight: bold;
    letter-spacing: 0.03em;
    transition: background-color var(--transition-slow),
                transform var(--transition-fast),
                box-shadow var(--transition-fast);
    box-shadow: 0 4px 6px  rgba(26, 92, 79, 0.30),
                0 8px 20px rgba(26, 92, 79, 0.18);
}

.btn-registro:hover {
    background-color: var(--verde-darker);
    transform: translateY(-2px);
    box-shadow: 0 6px 10px rgba(26, 92, 79, 0.35),
                0 14px 28px rgba(26, 92, 79, 0.22);
}

/* Botón secundario — outline (versión landing principal) */
.btn-secundario-hero {
    border: 2px solid var(--verde-dark);
    color: var(--verde-dark);
    background: transparent;
    font-weight: 600;
    transition: background-color var(--transition-normal),
                color var(--transition-normal),
                transform var(--transition-fast);
}

.btn-secundario-hero:hover {
    background-color: var(--verde-dark);
    color: #ffffff;
    transform: translateY(-2px);
}

/* Botón secundario — versión páginas de categoría */
.btn-secundario {
    border: 2px solid var(--verde-dark);
    color: var(--verde-dark);
    background: transparent;
    font-weight: 600;
    transition: background-color var(--transition-normal),
                color var(--transition-normal),
                transform var(--transition-fast);
}

.btn-secundario:hover {
    background-color: var(--verde-dark);
    color: #ffffff;
    transform: translateY(-2px);
}


/* ============================================================
   9. STATS BAR
   ============================================================ */
.stats-bar {
    background: var(--bg-blanco);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 1.5rem 2rem;
}

.stat-item {
    text-align: center;
}

.stat-number {
    font-size: clamp(1.6rem, 3.5vw, 2.2rem);
    font-weight: 800;
    color: var(--verde-dark);
    line-height: 1.1;
}

.stat-label {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 0.2rem;
}


/* ============================================================
   10. FEATURES / TARJETAS DE FUNCIONALIDADES
   ============================================================ */

/* Sección features — landing principal */
.features {
    background-color: var(--bg-blanco);
    border-top: 1px solid var(--border-verde-light);
}

/* Sección features — páginas de categoría */
.features-section {
    background-color: var(--bg-blanco);
    border-top: 1px solid var(--border-verde-light);
}

/* Icono grande de funcionalidad */
.feature-icon {
    font-size: 2.5rem;
    color: var(--verde-secundario);
}

/* Item de funcionalidad (hover lift) */
.feature-item {
    transition: transform var(--transition-slow);
}

.feature-item:hover {
    transform: translateY(-5px);
}

/* Tarjeta de funcionalidad con borde y hover (páginas de categoría) */
.feature-card {
    background: var(--bg-base);
    border-radius: 14px;
    padding: 1.75rem 1.25rem;
    height: 100%;
    border: 1px solid var(--border-verde-subtle);
    transition: box-shadow var(--transition-normal),
                transform var(--transition-normal);
}

.feature-card:hover {
    box-shadow: var(--shadow-xl);
    transform: translateY(-4px);
}


/* ============================================================
   11. FORMULARIO DEMO (card-formulario-demo / card-form-demo)
   ============================================================ */

/* Versión landing principal — sin ancho máximo fijo */
.card-formulario-demo {
    background: var(--bg-blanco);
    border-radius: var(--radius-lg);
    border-top: 4px solid var(--verde-dark);
    box-shadow: var(--shadow-form);
    padding: 2rem 2.5rem;
    max-width: 100%;
    margin: 0 auto;
}

/* Variante con ancho máximo (páginas de categoría) */
.card-formulario-demo--narrow {
    max-width: 640px;
}

/* Variante compacta (600 px) */
.card-form-demo {
    background: var(--bg-blanco);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-form);
    padding: 2rem 2.5rem;
    max-width: 600px;
    margin: 0 auto;
}

.card-form-demo h4 {
    margin-bottom: 1rem;
}

.card-form-demo .feature-icon {
    font-size: 2rem;
}

/* Tabla dentro del hero */
.table-success > tbody > tr > td,
.table-success > thead > tr > th {
    background-color: #e8f7f0 !important;
}


/* ============================================================
   12. CARDS DEMO VS PRO
   ============================================================ */
.card-pro-header {
    background-color: var(--verde-dark);
    color: #ffffff;
}

.card-pro-check {
    color: var(--verde-dark);
}


/* ============================================================
   13. YOUTUBE CARDS
   ============================================================ */
.card-youtube {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    background: var(--verde-dark);
    color: #ffffff;
    border-radius: var(--radius-md);
    padding: 1rem 1.5rem;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: background-color var(--transition-normal),
                transform var(--transition-fast),
                box-shadow var(--transition-fast);
    box-shadow: 0 4px 12px rgba(26, 92, 79, 0.20);
}

.card-youtube:hover {
    background: var(--verde-darker);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(26, 92, 79, 0.32);
}

.card-youtube .yt-icon {
    font-size: 1.9rem;
    color: #ff3b3b;
    flex-shrink: 0;
}


/* ============================================================
   14. BREADCRUMB
   ============================================================ */
.breadcrumb-oposas {
    background: transparent;
    padding: 0;
    margin: 0;
    font-size: 13px;
}

.breadcrumb-oposas .breadcrumb-item a {
    color: var(--verde-terciario);
}

.breadcrumb-oposas .breadcrumb-item.active {
    color: var(--verde-dark);
    font-weight: 600;
}


/* ============================================================
   15. BANNER DE CATEGORÍA
   ============================================================ */
.cat-banner {
    background: var(--verde-dark);
    color: #ffffff;
    border-radius: var(--radius-lg);
    padding: 1.25rem 2rem;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1rem;
    font-weight: 700;
    box-shadow: 0 4px 16px rgba(26, 92, 79, 0.25);
}


/* ============================================================
   16. ENLACE CONVOCATORIA OFICIAL
   ============================================================ */
.convocatoria-link {
    background: var(--bg-blanco);
    border-radius: var(--radius-md);
    padding: 1.25rem 1.75rem;
    border: 1px solid var(--border-dark-soft);
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 600;
    color: var(--verde-dark);
    transition: box-shadow var(--transition-fast),
                transform var(--transition-fast);
    box-shadow: var(--shadow-xs);
}

.convocatoria-link:hover {
    box-shadow: 0 6px 18px rgba(26, 92, 79, 0.18);
    transform: translateY(-2px);
    color: var(--verde-darker);
}


/* ============================================================
   17. FAQ
   ============================================================ */
.faq-section {
    background: linear-gradient(160deg, var(--bg-hero-start) 0%, var(--bg-hero-end) 100%);
}

.faq-item {
    background: var(--bg-blanco);
    border-radius: var(--radius-md);
    padding: 1.5rem 1.75rem;
    border-left: 4px solid var(--verde-secundario);
    box-shadow: 0 2px 8px rgba(26, 92, 79, 0.06);
    transition: box-shadow var(--transition-fast);
}

.faq-item:hover {
    box-shadow: 0 4px 16px rgba(26, 92, 79, 0.12);
}

.faq-item h5 {
    color: var(--verde-dark);
    font-weight: 700;
    margin-bottom: 0.6rem;
}

.faq-item p {
    color: #4b5563;
    font-size: 16px;
    margin: 0;
    line-height: 1.6;
}


/* ============================================================
   18. SECCIÓN FEATURES — LANDING PRINCIPAL
      (ya definida en sección 10; este bloque recoge
       variantes de hero-section usadas como fondo de sección)
   ============================================================ */

/* Frase de marketing / CTA final */
.section-frase {
    background-color: var(--bg-blanco);
    border-top: 1px solid var(--border-verde-light);
}


/* ============================================================
   19. TABLA DE OPOSICIONES
   ============================================================ */
.tabla-oposiciones {
    background: #ffffff;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}


/* ============================================================
   20. FOOTER
   ============================================================ */
footer,
.footer-oposas {
    background-color: var(--bg-footer);
    border-top: 2px solid var(--border-dark-subtle);
    padding: 2rem 0;
}

.footer-link {
    color: var(--verde-dark);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: color var(--transition-fast);
}

.footer-link:hover {
    color: var(--verde-darker);
    text-decoration: underline;
}


/* ============================================================
   21. BOTÓN VOLVER ARRIBA
   ============================================================ */
.ir-arriba {
    cursor: pointer;
    position: fixed !important;
    bottom: 80px !important;
    right: 20px !important;
    z-index: 99 !important;
    background: var(--verde-dark) !important;
    color: #fff !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    border: none !important;
    display: none;
    text-align: center;
    line-height: 48px !important;
    box-shadow: 0 4px 16px rgba(26, 92, 79, 0.35) !important;
    transition: background 0.18s, box-shadow 0.18s;
    text-decoration: none !important;
}
.ir-arriba i {
    font-size: 22px !important;
    line-height: 48px !important;
    vertical-align: middle;
}

.ir-arriba:hover {
    background: var(--verde-darker) !important;
    box-shadow: 0 6px 20px rgba(26, 92, 79, 0.45) !important;
    color: #fff !important;
}

/* Variante landing principal (z-index 3, bottom 100px) */
.ir-arriba--landing {
    bottom: 100px;
    z-index: 3;
}


/* ============================================================
   22. UTILIDADES DE IMAGEN / FONDO
   ============================================================ */
.classVerImagen {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}


/* ============================================================
   23. RESPONSIVE TWEAKS
   ============================================================ */
@media (max-width: 575px) {
    .card-formulario-demo  { padding: 1.5rem 1rem; }
    .card-form-demo        { padding: 1.5rem 1rem; }
    .stats-bar             { padding: 1.25rem 1rem; }
    .cat-banner            { padding: 1rem 1.25rem; font-size: 0.9rem; }
    .card-youtube          { padding: 0.85rem 1.25rem; }
}


/* ============================================================
   24. APP PRIVADA — Área de usuario logueado
   ============================================================ */

/* --- Body background --- */
body {
    background-color: var(--bg-base);
}

/* --- Navbar privada --- */
.app-navbar-private {
    background: var(--bg-blanco) !important;
    border-bottom: 3px solid var(--verde-primario) !important;
    box-shadow: var(--shadow-sm) !important;
    border-radius: 0 !important;
}

.app-navbar-private.app-navbar-private--demo {
    background: linear-gradient(180deg, #4ca38f 0%, #3a8d7a 48%, #2f7868 100%) !important;
    border-bottom-color: #bfe8dc !important;
    box-shadow: 0 14px 30px rgba(33, 99, 84, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}

.app-navbar-private.app-navbar-private--demo .navbar-brand {
    display: inline-flex;
    align-items: center;
    filter: drop-shadow(0 2px 12px rgba(22, 73, 62, 0.18));
}

.app-navbar-private.app-navbar-private--demo .app-private-brand-shell {
    gap: 8px;
    padding: 0 2px 0 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.app-navbar-private.app-navbar-private--demo .app-private-brand-logo-wrap {
    width: auto;
    height: auto;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

.app-navbar-private.app-navbar-private--demo .app-private-brand-logo-wrap .app-private-brand-image {
    height: 44px !important;
    padding: 0;
}

.app-navbar-private.app-navbar-private--demo .app-private-brand-copy {
    justify-content: center;
}

.app-navbar-private.app-navbar-private--demo .app-private-brand-kicker {
    color: #ecfff8;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-shadow: 0 1px 8px rgba(22, 73, 62, 0.16);
}

.app-navbar-private .navbar-brand {
    padding: 0;
    margin-right: 12px;
}

.app-navbar-private .navbar-brand .app-private-brand-image {
    display: block;
    width: auto;
    height: 42px;
    margin-right: 0;
}

.app-private-brand-shell {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 12px 7px 7px;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #eef9f5 100%);
    border: 1px solid rgba(255, 255, 255, 0.58);
    box-shadow: 0 14px 28px rgba(22, 73, 62, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

.app-private-brand-logo-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 66px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #f5fdf9 100%);
    border: 1px solid rgba(42, 109, 95, 0.12);
    box-shadow: 0 8px 18px rgba(29, 88, 75, 0.10);
    overflow: hidden;
}

.app-private-brand-logo-wrap .app-private-brand-image {
    height: 100% !important;
    padding: 4px 6px;
    object-fit: contain;
}

.app-private-brand-copy {
    min-width: 0;
    line-height: 1.05;
}

.app-private-brand-kicker {
    display: block;
    color: #6c9a8f;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.app-private-brand-title {
    display: block;
    margin-top: 3px;
    color: #1f6558;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

.app-private-brand-title strong {
    color: #12483f;
}

.app-navbar-private.app-navbar-private--demo .botonesOpcionesPrincipales.w3-btn {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.24) !important;
    color: #f4fffb !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

.app-navbar-private.app-navbar-private--demo .botonesOpcionesPrincipales.w3-btn:hover,
.app-navbar-private.app-navbar-private--demo .botonesOpcionesPrincipales.w3-btn:focus,
.app-navbar-private.app-navbar-private--demo .botonesOpcionesPrincipales.w3-btn:active {
    background: rgba(255, 255, 255, 0.24) !important;
    border-color: rgba(255, 255, 255, 0.36) !important;
    color: #ffffff !important;
}

.app-navbar-private.app-navbar-private--demo .botonesOpcionesPrincipales.w3-btn.w3-bottombar.w3-border-black {
    background: linear-gradient(180deg, #f5fffb 0%, #d7f5eb 100%) !important;
    color: #2b6d5f !important;
    border-color: rgba(255, 255, 255, 0.52) !important;
    box-shadow: 0 10px 20px rgba(22, 73, 62, 0.14);
}

.app-navbar-private.app-navbar-private--demo .app-private-menu-toggle {
    background: rgba(255, 255, 255, 0.18) !important;
    border-color: rgba(255, 255, 255, 0.26) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.app-navbar-private.app-navbar-private--demo .app-private-menu-toggle i {
    color: #ffffff;
}

.app-private-menu-toggle {
    width: 54px;
    height: 54px;
    padding: 0 !important;
    border: 1px solid rgba(26, 92, 79, 0.18) !important;
    border-radius: 14px !important;
    background: linear-gradient(180deg, #ffffff 0%, #f4fbf8 100%) !important;
    box-shadow: 0 8px 20px rgba(26, 92, 79, 0.10);
}

.app-private-menu-toggle i {
    font-size: 34px !important;
    color: var(--verde-dark);
}

/* Botones de navegación — estado base */
.botonesOpcionesPrincipales.w3-btn {
    background: transparent;
    border: 1px solid rgba(168, 230, 207, 0.6) !important;
    color: var(--verde-terciario) !important;
    border-radius: var(--radius-sm) !important;
    font-weight: 500;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

/* Botones de navegación — hover */
.botonesOpcionesPrincipales.w3-btn:hover {
    background: var(--verde-dark) !important;
    color: #fff !important;
    border-color: var(--verde-dark) !important;
}

/* Botones de navegación — activo/focus (sustituye el negro de w3.css) */
.botonesOpcionesPrincipales.w3-btn:focus,
.botonesOpcionesPrincipales.w3-btn:active {
    background: var(--verde-dark) !important;
    color: #fff !important;
    border-color: var(--verde-dark) !important;
    outline: none;
}

/* Botones de navegación — activo persistente por módulo */
.botonesOpcionesPrincipales.w3-btn.w3-bottombar.w3-border-black {
    background: var(--verde-dark) !important;
    color: #fff !important;
    border-color: var(--verde-dark) !important;
    box-shadow: 0 10px 22px rgba(14, 92, 78, 0.18);
}

.app-private-desktop-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    margin-right: 8px;
    color: currentColor;
    font-size: 0.95em;
    vertical-align: middle;
}

.app-private-mobile-panel-head,
.app-private-mobile-btn-main,
.app-private-mobile-btn-arrow,
.app-private-mobile-exit-text {
    display: none;
}

@media (max-width: 991px) {
    body.app-private-mobile-menu-open {
        overflow: hidden;
    }

    .app-navbar-private .container-fluid {
        align-items: center;
    }

    .app-navbar-private .navbar-brand,
    .app-private-menu-toggle {
        position: relative;
        z-index: 1202;
    }

    .app-navbar-private.app-private-menu-open {
        background: var(--verde-dark) !important;
        border-bottom-color: rgba(255,255,255,0.10) !important;
        box-shadow: none !important;
    }

    .app-navbar-private.app-navbar-private--demo.app-private-menu-open {
        background: linear-gradient(180deg, #4aa18d 0%, #3a8b79 54%, #2f7868 100%) !important;
        border-bottom-color: rgba(230, 249, 242, 0.48) !important;
        box-shadow: none !important;
    }

    .app-navbar-private.app-private-menu-open .navbar-brand {
        opacity: 0;
        pointer-events: none;
    }

    .app-navbar-private.app-private-menu-open .app-private-menu-toggle {
        background: rgba(255,255,255,0.08) !important;
        border-color: rgba(255,255,255,0.16) !important;
        box-shadow: none;
    }

    .app-navbar-private.app-navbar-private--demo.app-private-menu-open .app-private-menu-toggle {
        background: rgba(255,255,255,0.18) !important;
        border-color: rgba(255,255,255,0.28) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
    }

    .app-navbar-private.app-private-menu-open .app-private-menu-toggle i {
        color: #ffffff;
    }

    .app-private-mobile-collapse {
        position: fixed;
        inset: 0;
        z-index: 1200;
        width: 100vw;
        height: 100vh;
        margin: 0;
        padding: 86px 16px 20px;
        border: 0;
        border-radius: 0;
        background: var(--verde-dark) !important;
        background-image: none !important;
        box-shadow: none;
        overflow-y: auto;
        overflow-x: hidden;
        opacity: 1 !important;
        visibility: visible !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        transition: none !important;
    }

    .app-navbar-private.app-navbar-private--demo .app-private-mobile-collapse {
        background: linear-gradient(180deg, #4aa18d 0%, #3a8b79 44%, #2f7868 100%) !important;
    }

    .app-private-mobile-collapse.show,
    .app-private-mobile-collapse.collapsing {
        display: flex !important;
        flex-direction: column;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .app-private-mobile-collapse.collapsing {
        height: 100vh !important;
        transition: none !important;
    }

    .app-private-mobile-collapse::before {
        content: "";
        position: fixed;
        inset: 0;
        background: var(--verde-dark);
        z-index: -1;
        opacity: 1;
    }

    .app-navbar-private.app-navbar-private--demo .app-private-mobile-collapse::before {
        background: linear-gradient(180deg, #4aa18d 0%, #3a8b79 44%, #2f7868 100%);
    }

    .app-private-mobile-panel-head {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 0 2px 16px;
    }

    .app-navbar-private > .container-fluid {
        position: relative;
    }

    .app-private-mobile-brand {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        padding: 4px 0 2px;
    }

    .app-private-mobile-demo-top {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 64px;
        padding: 4px 12px;
        border-radius: 999px;
        background: rgba(255,255,255,0.10);
        border: 1px solid rgba(255,255,255,0.18);
        color: rgba(255,255,255,0.88);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        line-height: 1;
        pointer-events: none;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
    }

    .app-private-mobile-brand-logo {
        width: 52px;
        height: 52px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 16px;
        background: rgba(255,255,255,0.10);
        border: 1px solid rgba(255,255,255,0.14);
        flex-shrink: 0;
        overflow: hidden;
    }

    .app-private-mobile-brand-logo img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        padding: 8px;
        filter: saturate(1.02) brightness(1.01);
    }

    .app-navbar-private.app-navbar-private--demo .app-private-mobile-brand-logo {
        background: linear-gradient(180deg, rgba(255,255,255,0.24) 0%, rgba(255,255,255,0.14) 100%);
        border-color: rgba(255,255,255,0.22);
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 10px 18px rgba(19, 74, 63, 0.18);
    }

    .app-navbar-private.app-navbar-private--demo .app-private-mobile-brand-logo img {
        padding: 5px;
        filter: saturate(1.04) contrast(1.02);
    }

    .app-private-mobile-brand-copy {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

    .app-private-mobile-panel-kicker {
        color: rgba(255,255,255,0.62);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .app-private-mobile-panel-title {
        color: #ffffff;
        font-size: 19px;
        font-weight: 700;
        line-height: 1.1;
    }

    .app-private-mobile-nav,
    .app-private-mobile-account {
        width: 100%;
        gap: 8px;
    }

    .app-private-mobile-account {
        margin-top: auto;
        padding-top: 14px;
        border-top: 1px solid rgba(255,255,255,0.10);
    }

    .app-private-mobile-nav .nav-item,
    .app-private-mobile-account .nav-item {
        width: 100%;
        padding: 0 !important;
        margin: 0 !important;
    }

    .app-private-mobile-btn {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        width: 100% !important;
        min-height: 58px;
        padding: 11px 13px !important;
        border: 1px solid rgba(255,255,255,0.10) !important;
        border-radius: 18px !important;
        background: #2c6a5f !important;
        color: #ffffff !important;
        box-shadow: none;
        text-align: left;
        opacity: 1 !important;
        filter: none !important;
    }

    .app-navbar-private.app-navbar-private--demo .app-private-mobile-btn {
        background: rgba(255,255,255,0.12) !important;
        border-color: rgba(255,255,255,0.20) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
    }

    .app-navbar-private.app-navbar-private--demo .botonesOpcionesPrincipales.w3-btn.app-private-mobile-btn.w3-bottombar.w3-border-black {
        background: linear-gradient(180deg, #1e5f54 0%, #17483f 100%) !important;
        border-color: rgba(205, 247, 232, 0.52) !important;
        color: #ffffff !important;
        box-shadow: 0 14px 26px rgba(10, 46, 39, 0.28), inset 0 1px 0 rgba(255,255,255,0.10);
    }

    .app-navbar-private.app-navbar-private--demo .botonesOpcionesPrincipales.w3-btn.app-private-mobile-btn.w3-bottombar.w3-border-black .app-private-mobile-btn-text,
    .app-navbar-private.app-navbar-private--demo .botonesOpcionesPrincipales.w3-btn.app-private-mobile-btn.w3-bottombar.w3-border-black .app-private-mobile-btn-arrow,
    .app-navbar-private.app-navbar-private--demo .botonesOpcionesPrincipales.w3-btn.app-private-mobile-btn.w3-bottombar.w3-border-black .app-private-mobile-btn-icon {
        color: #ffffff !important;
    }

    .app-navbar-private.app-navbar-private--demo .botonesOpcionesPrincipales.w3-btn.app-private-mobile-btn.w3-bottombar.w3-border-black .app-private-mobile-btn-icon,
    .app-navbar-private.app-navbar-private--demo .botonesOpcionesPrincipales.w3-btn.app-private-mobile-btn.w3-bottombar.w3-border-black .app-private-mobile-btn-arrow {
        background: rgba(255,255,255,0.14) !important;
    }

    .app-private-mobile-btn-main {
        display: flex;
        align-items: center;
        gap: 12px;
        min-width: 0;
    }

    .app-private-mobile-btn-icon {
        width: 40px;
        height: 40px;
        border-radius: 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(255,255,255,0.12);
        color: #ffffff;
        font-size: 18px;
        flex-shrink: 0;
    }

    .app-private-mobile-btn-text {
        font-size: 20px;
        font-weight: 600;
        line-height: 1.15;
        color: #ffffff;
    }

    .app-private-mobile-btn-arrow {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 26px;
        height: 26px;
        border-radius: 999px;
        background: rgba(255,255,255,0.12);
        color: rgba(255,255,255,0.92);
        font-size: 20px;
        flex-shrink: 0;
    }

    .app-private-mobile-btn:hover,
    .app-private-mobile-btn:focus,
    .app-private-mobile-btn:active {
        background: #356f65 !important;
        color: #ffffff !important;
        border-color: rgba(255,255,255,0.22) !important;
        box-shadow: none;
    }

    .app-navbar-private.app-navbar-private--demo .app-private-mobile-btn:hover,
    .app-navbar-private.app-navbar-private--demo .app-private-mobile-btn:focus,
    .app-navbar-private.app-navbar-private--demo .app-private-mobile-btn:active {
        background: rgba(255,255,255,0.19) !important;
        border-color: rgba(255,255,255,0.32) !important;
        box-shadow: none;
    }

    .app-private-mobile-btn--user .app-private-mobile-btn-icon {
        background: rgba(255,255,255,0.14);
    }

    .app-private-mobile-btn--exit {
        margin-top: 4px;
        background: #214f47 !important;
        border-color: rgba(255,255,255,0.18) !important;
    }

    .app-navbar-private.app-navbar-private--demo .app-private-mobile-btn--exit {
        background: rgba(20, 82, 68, 0.34) !important;
        border-color: rgba(255,255,255,0.20) !important;
    }

    .app-private-mobile-btn--exit .app-private-mobile-btn-icon {
        background: rgba(255,255,255,0.16);
    }

    .app-private-mobile-btn[disabled] {
        opacity: 0.82 !important;
    }

    .app-private-mobile-exit {
        width: 100%;
        margin-top: 0;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        height: auto !important;
    }

    .app-private-mobile-exit-text {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
        min-height: 56px;
        border-radius: 16px;
        background: rgba(0,0,0,0.20);
        border: 1px solid rgba(255,255,255,0.12);
        color: #ffffff;
        font-size: 18px;
        font-weight: 800;
        letter-spacing: 0.16em;
        box-shadow: none;
    }

    .app-private-mobile-exit:hover .app-private-mobile-exit-text,
    .app-private-mobile-exit:focus .app-private-mobile-exit-text {
        background: rgba(255,255,255,0.08);
    }
}

/* --- Footer radio --- */
body.app-private-layout {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

body.app-private-layout > #divCuerpoOpcionesMenu {
    flex: 1 0 auto;
    width: 100%;
}

body.app-private-layout > #pieOpostic {
    margin-top: auto;
    width: 100%;
}

.app-private-footer {
    margin-top: 24px;
    padding: 0 10px 18px;
    background: transparent;
}

.app-private-footer__shell {
    width: min(1240px, 100%);
    margin: 0 auto;
    border: 1px solid var(--border-verde-light);
    border-radius: 22px;
    background:
        radial-gradient(circle at top left, rgba(167, 220, 204, 0.34), transparent 34%),
        linear-gradient(180deg, #fbfefd 0%, #eff8f4 100%);
    box-shadow: 0 18px 40px rgba(26, 92, 79, 0.10);
    overflow: hidden;
}

.app-private-footer__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 22px 14px;
    border-bottom: 1px solid rgba(26, 92, 79, 0.10);
}

.app-private-footer__brand {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.app-private-footer__logo {
    width: 84px;
    height: auto;
    flex-shrink: 0;
    filter: drop-shadow(0 8px 18px rgba(26, 92, 79, 0.12));
}

.app-private-footer__brand-copy {
    min-width: 0;
}

.app-private-footer__brand-kicker {
    margin: 0;
    color: #5b857a;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.app-private-footer__brand-title {
    margin: 4px 0 0;
    color: var(--verde-dark);
    font-size: 27px;
    font-weight: 800;
    line-height: 1;
}

.app-private-footer__brand-text {
    margin: 6px 0 0;
    color: #49625b;
    font-size: 13px;
    line-height: 1.35;
}

.app-private-footer__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.app-private-footer__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    min-height: 42px;
    padding: 10px;
    border-radius: 14px;
    border: 1px solid rgba(26, 92, 79, 0.12);
    background: rgba(255, 255, 255, 0.92);
    color: var(--verde-dark);
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 10px 22px rgba(26, 92, 79, 0.08);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.app-private-footer__action:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 26px rgba(26, 92, 79, 0.12);
    border-color: rgba(26, 92, 79, 0.22);
}

.app-private-footer__action i {
    font-size: 17px;
}

.app-private-footer__action .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.app-private-footer__action--instagram {
    color: #a53874;
}

.app-private-footer__bottom {
    padding: 14px 22px 20px;
}

.app-private-footer__bottom-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 16px;
    margin-bottom: 12px;
}

.app-private-footer__bottom-kicker {
    margin: 0;
    color: var(--verde-dark);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.app-private-footer__bottom-text {
    margin: 0;
    color: #5f746d;
    font-size: 12px;
}

.app-private-footer__radios {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.app-private-footer__radio-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 15px;
    border: 1px solid rgba(26, 92, 79, 0.12);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 10px 22px rgba(26, 92, 79, 0.08);
}

.app-private-footer__radio-main {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.app-private-footer__radio-thumb {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 8px 16px rgba(26, 92, 79, 0.10);
}

.app-private-footer__radio-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.app-private-footer__radio-copy {
    min-width: 0;
}

.app-private-footer__radio-name {
    margin: 0;
    color: var(--verde-dark);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.1;
}

.app-private-footer__radio-desc {
    margin: 5px 0 0;
    color: #61746e;
    font-size: 12px;
    line-height: 1.4;
}

.app-private-footer__radio-link {
    display: inline-flex;
    margin-top: 7px;
    color: #2a7265;
    font-size: 12px;
    font-weight: 700;
}

.app-private-footer__radio-link:hover {
    color: var(--verde-dark);
}

.app-private-footer__radio-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.app-private-footer__radio-play {
    width: 48px;
    height: 48px;
    border: 1px solid rgba(26, 92, 79, 0.14);
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #edf8f4 100%);
    color: var(--verde-dark);
    box-shadow: 0 10px 18px rgba(26, 92, 79, 0.10);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.app-private-footer__radio-play:hover {
    transform: translateY(-1px);
    background: linear-gradient(180deg, #ffffff 0%, #e4f4ee 100%);
    box-shadow: 0 12px 22px rgba(26, 92, 79, 0.14);
}

.app-private-footer__radio-play .fa {
    font-size: 24px;
}

@media (max-width: 991px) {
    .app-private-footer__top {
        flex-direction: column;
        align-items: flex-start;
    }

    .app-private-footer__radios {
        grid-template-columns: 1fr;
    }

    .app-private-footer__actions {
        width: 100%;
    }

    .app-private-footer__actions {
        justify-content: flex-start;
    }
}

@media (max-width: 767px) {
    .app-private-footer {
        padding: 0 8px 14px;
    }

    .app-private-footer__top,
    .app-private-footer__bottom {
        padding-left: 14px;
        padding-right: 14px;
    }

    .app-private-footer__brand {
        gap: 10px;
    }

    .app-private-footer__logo {
        width: 64px;
    }

    .app-private-footer__brand-title {
        font-size: 19px;
    }

    .app-private-footer__actions {
        gap: 8px;
    }

    .app-private-footer__action {
        min-height: 38px;
        min-width: 38px;
        padding: 8px;
    }

    .app-private-footer__radio-card {
        padding: 10px 12px;
    }

    .app-private-footer__radio-thumb {
        width: 46px;
        height: 46px;
        border-radius: 12px;
    }

    .app-private-footer__radio-name {
        font-size: 14px;
    }

    .app-private-footer__radio-play {
        width: 42px;
        height: 42px;
        border-radius: 12px;
    }

    .app-private-footer__radio-play .fa {
        font-size: 20px;
    }

    .app-home-infografias__top {
        align-items: flex-start;
        flex-direction: column;
    }

    .app-home-infografias__stage {
        padding: 10px 10px 0 10px;
    }

    .app-home-infografias__nav {
        top: 18px;
        right: 18px;
    }

    .app-home-infografias__arrow,
    .app-home-infografias__modal-close,
    .app-home-infografias__modal-arrow {
        width: 38px;
        height: 38px;
        border-radius: 12px;
    }

    .app-home-infografias__card {
        grid-template-columns: 1fr;
    }

    .app-home-infografias__media {
        min-height: 210px;
    }

    .app-home-infografias__copy {
        padding: 14px 12px;
    }

    .app-home-infografias__title {
        font-size: 18px;
    }

    .app-home-infografias__modal {
        padding: 8px;
    }

    .app-home-infografias__modal-dialog {
        width: calc(100vw - 16px);
        max-width: calc(100vw - 16px);
        border-radius: 18px;
        max-height: calc(100vh - 16px);
    }

    .app-home-infografias__modal-top {
        padding: 12px 12px 8px 12px;
    }

    .app-home-infografias__modal-stage {
        padding: 10px;
    }

    .app-home-infografias__modal-stage img {
        max-height: calc(100vh - 118px);
    }

    .app-home-infografias__modal-arrow.js-app-home-infografias-modal-prev {
        left: 8px;
    }

    .app-home-infografias__modal-arrow.js-app-home-infografias-modal-next {
        right: 8px;
    }

    .app-home-infografias__modal-arrow {
        width: 48px;
        height: 48px;
        border-radius: 16px;
        font-size: 20px;
    }
}

/* --- Cajas de contenido home --- */
.app-box-accent {
    background: rgba(168, 230, 207, 0.12) !important;
    border: 1px solid var(--verde-dark) !important;
    border-radius: var(--radius-md) !important;
}

.app-box-feedback {
    background: var(--bg-footer) !important;
    border: 1px solid var(--verde-dark) !important;
    border-radius: var(--radius-md) !important;
}

/* --- Botones grilla menú home --- */
.app-home-btn {
    background: rgba(168, 230, 207, 0.2) !important;
    border: 1px solid rgba(168, 230, 207, 0.6) !important;
    color: var(--verde-dark) !important;
    border-radius: var(--radius-sm) !important;
    font-weight: 600;
    transition: background 0.2s, color 0.2s;
}

.app-home-btn:hover {
    background: var(--verde-dark) !important;
    color: #fff !important;
    border-color: var(--verde-dark) !important;
}

/* ============================================================
   24b. APP PRIVADA — Fase 2: Pregúntame, Temas, Estadísticas
   ============================================================ */

/* --- Barra de tema activo (Pregúntame) --- */
.w3-pale-yellow {
    background-color: rgba(168, 230, 207, 0.18) !important;
    color: var(--verde-dark) !important;
}

/* --- Botones respuesta A/B/C/D --- */
.botonClassRespuestaPregunta {
    border: 2px solid rgba(168, 230, 207, 0.7) !important;
    border-radius: var(--radius-sm) !important;
    font-weight: 500;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.botonClassRespuestaPregunta:hover {
    background: rgba(168, 230, 207, 0.25) !important;
    border-color: var(--verde-secundario) !important;
}

#divCuerpoPreguntaRespuestas {
    width: 100%;
    max-width: none;
    margin: 0 !important;
    padding: clamp(10px, 1.8vw, 18px) !important;
    background: linear-gradient(180deg, #ffffff 0%, #f7fbfa 100%);
    border: 1px solid rgba(14, 92, 78, 0.18);
    border-radius: 20px;
    box-shadow: 0 16px 34px rgba(17, 61, 53, 0.08);
}

#divCuerpoPreguntaRespuestas > .container-fluid:first-child .row {
    background: #edf7f4 !important;
    border: 1px solid rgba(14, 92, 78, 0.12);
    border-radius: 14px !important;
}

#columnaDondeEstaLaPregunta {
    margin-top: 10px !important;
    padding: clamp(14px, 2vw, 22px) !important;
    background: #ffffff;
    border: 1px solid rgba(14, 92, 78, 0.16);
    border-left: 5px solid var(--verde-dark);
    border-radius: 16px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.95);
    line-height: 1.5;
}

#divCuerpoPreguntaRespuestas [id^="divTablaEntericaDeLaRespuesta"] {
    margin-top: 14px !important;
    border: 1px solid rgba(14, 92, 78, 0.16);
    border-radius: 16px !important;
    background: #ffffff;
    box-shadow: 0 8px 20px rgba(17, 61, 53, 0.05);
    overflow: hidden;
}

#divCuerpoPreguntaRespuestas [id^="divTablaEntericaDeLaRespuesta"] table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

#divCuerpoPreguntaRespuestas [id^="divTablaEntericaDeLaRespuesta"] tr {
    transition: background 0.14s ease;
}

#divCuerpoPreguntaRespuestas [id^="divTablaEntericaDeLaRespuesta"] tr:hover {
    background: rgba(14, 92, 78, 0.035);
}

#divCuerpoPreguntaRespuestas td[id^="columnaLetraRespuestaPregunta"] {
    width: 76px !important;
    padding: 12px 10px !important;
    background: #f2faf7;
    border-right: 1px solid rgba(14, 92, 78, 0.12);
}

#divCuerpoPreguntaRespuestas td[id^="columnaRespuestaPregunta"] {
    padding: 14px 16px !important;
    color: #173d37;
    line-height: 1.45;
}

#divCuerpoPreguntaRespuestas .botonClassRespuestaPregunta {
    min-width: 50px !important;
    min-height: 50px !important;
    background: linear-gradient(180deg, #137764 0%, #0d5147 100%) !important;
    color: #ffffff !important;
    border: 2px solid rgba(7, 70, 61, 0.9) !important;
    border-radius: 16px !important;
    box-shadow: 0 9px 18px rgba(13, 81, 71, 0.22), inset 0 1px 0 rgba(255,255,255,0.24) !important;
}

#divCuerpoPreguntaRespuestas .botonClassRespuestaPregunta:hover {
    background: linear-gradient(180deg, #178d77 0%, #0f5f52 100%) !important;
    border-color: rgba(7, 70, 61, 1) !important;
    transform: translateY(-1px);
}

#divCuerpoPreguntaRespuestas .botonClassRespuestaPregunta:disabled {
    opacity: 0.48;
    box-shadow: none !important;
    transform: none;
}

#divCuerpoPreguntaRespuestas .botonClassRespuestaPregunta span {
    color: #ffffff !important;
    text-shadow: 0 1px 0 rgba(0,0,0,0.18);
    line-height: 1;
}

@media (max-width: 576px) {
    #divCuerpoPreguntaRespuestas {
        padding: 8px !important;
        border-radius: 16px;
    }

    #columnaDondeEstaLaPregunta {
        margin-top: 8px !important;
        padding: 13px 12px !important;
        border-left-width: 4px;
    }

    #divCuerpoPreguntaRespuestas [id^="divTablaEntericaDeLaRespuesta"] {
        margin-top: 12px !important;
        border-radius: 14px !important;
    }

    #divCuerpoPreguntaRespuestas td[id^="columnaLetraRespuestaPregunta"] {
        width: 62px !important;
        padding: 10px 6px !important;
    }

    #divCuerpoPreguntaRespuestas td[id^="columnaRespuestaPregunta"] {
        padding: 12px 10px !important;
        line-height: 1.4;
    }

    #divCuerpoPreguntaRespuestas .botonClassRespuestaPregunta {
        min-width: 46px !important;
        min-height: 46px !important;
        border-radius: 14px !important;
    }
}

/* --- Botones tipo tema T/C/E (Temas) --- */
.classBotonesOpcionTemaTipoTema {
    border-color: rgba(168, 230, 207, 0.7) !important;
    color: var(--verde-terciario) !important;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.classBotonesOpcionTemaTipoTema:hover,
.classBotonesOpcionTemaTipoTema.w3-black {
    background: var(--verde-dark) !important;
    color: #fff !important;
    border-color: var(--verde-dark) !important;
}

/* --- Botones "Por Rondas / Por Temas" en Estadísticas --- */
button[name="botonVerRondasOpcionEstadisticas"],
button[name="botonVerTemasOpcionEstadisticas"] {
    background: var(--verde-dark) !important;
    color: #fff !important;
    border-color: var(--verde-dark) !important;
    border-radius: var(--radius-sm) !important;
}
button[name="botonVerRondasOpcionEstadisticas"]:hover,
button[name="botonVerTemasOpcionEstadisticas"]:hover {
    background: var(--verde-darker) !important;
    border-color: var(--verde-darker) !important;
}

/* --- Barra de puntuación final en Estadísticas --- */
td.letra0.w3-black {
    background-color: var(--verde-dark) !important;
    color: #fff !important;
}

/* --- Separador columna en tabla de estadísticas --- */
.w3-border-right.w3-border-blue {
    border-right-color: var(--verde-secundario) !important;
}

/* --- Botón volver arriba (ya cubierto por Section 21) --- */

/* ============================================================
   24c. APP PRIVADA — Fase 3: Glosario, banner DEMO, barras, botones
   ============================================================ */

/* --- Glosario: cabeceras de tabla (w3-teal → verde-dark) --- */
tr.w3-teal,
th.w3-teal {
    background-color: var(--verde-dark) !important;
    color: #fff !important;
}

/* --- Banner modo DEMO: fondo tenue brand en lugar de w3-pale-green genérico --- */
div.w3-pale-green.w3-round-large {
    background-color: rgba(168, 230, 207, 0.18) !important;
}
/* Texto DEMO dentro del banner (w3-text-teal → verde-terciario) */
div.w3-pale-green .w3-text-teal {
    color: var(--verde-terciario) !important;
}

/* --- Barra decorativa superior de sección (w3-border-green → verde-primario) --- */
.w3-topbar.w3-border-green {
    border-top-color: var(--verde-primario) !important;
    border-top-width: 3px !important;
}

/* --- Botones genéricos con w3-border-black / w3-hover-black (Examen, Mi Usuario) --- */
button.w3-border-black {
    border-color: rgba(168, 230, 207, 0.7) !important;
}
button.w3-hover-black:hover {
    background-color: var(--verde-dark) !important;
    color: #fff !important;
    border-color: var(--verde-dark) !important;
}

/* ============================================================
   25. APP HOME — Dashboard de opositor (v2 PRO)
   ============================================================ */

#divEspacioAlturaCuerpoWeb {
    width: 100%;
    height: 54px;
    min-height: 0;
}

/* --- Contenedor max-width centrado en desktop --- */
.app-home-wrap {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 2px;
}

.app-home-wrap > .app-dashboard-card,
.app-home-wrap > .app-home-infografias,
.app-home-wrap > #cuerpecilloFormularioSugerencias,
.app-home-wrap > .app-box-accent,
.app-home-wrap > .w3-center {
    margin-top: 14px !important;
}

/* --- Hero personalizado --- */
.app-home-hero {
    background: linear-gradient(135deg, var(--bg-blanco) 0%, rgba(168, 230, 207, 0.20) 100%);
    border: 1px solid var(--verde-dark);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 18px 20px;
    margin-top: 4px;
}
.app-home-hero > .d-flex > div:first-child {
    flex: 1 1 100%;
    min-width: 0;
}
.app-hero-greeting {
    font-size: 22px;
    font-weight: 700;
    color: var(--verde-dark);
    margin: 0;
    line-height: 1.3;
}
.app-hero-subtitle {
    font-size: 14px;
    font-weight: 500;
    color: var(--verde-terciario);
    margin: 5px 0 0;
    letter-spacing: 0.01em;
}

.app-pwa-install-card {
    display: none;
    align-items: center;
    gap: 12px;
    margin: 12px 0 0;
    padding: 12px;
    border: 1px solid rgba(31, 108, 94, 0.18);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(16, 48, 42, 0.08);
}

.app-pwa-install-card.is-ready {
    display: flex;
}

.app-pwa-install-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(31, 108, 94, 0.10);
    color: var(--verde-dark);
    font-size: 24px;
}

.app-pwa-install-card__copy {
    flex: 1 1 auto;
    min-width: 0;
}

.app-pwa-install-card__kicker {
    display: block;
    margin: 0 0 2px;
    color: #b57910;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
}

.app-pwa-install-card__title {
    margin: 0;
    color: var(--verde-dark);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.25;
}

.app-pwa-install-card__text {
    margin: 3px 0 0;
    color: #4b625c;
    font-size: 13px;
    line-height: 1.35;
}

.app-pwa-install-card__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.app-pwa-install-card__button,
.app-pwa-install-card__dismiss {
    border: 0;
    font-weight: 800;
    line-height: 1;
}

.app-pwa-install-card__button {
    min-height: 38px;
    padding: 0 14px;
    border-radius: 10px;
    background: var(--verde-dark);
    color: #fff;
    font-size: 13px;
}

.app-pwa-install-card__button:hover {
    background: var(--verde-secundario);
}

.app-pwa-install-card__dismiss {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #eef7f4;
    color: #55716a;
}

.app-pwa-install-modal__dialog {
    max-width: 560px;
}

.app-pwa-install-modal__content {
    border: 0;
    border-radius: 18px;
    overflow: hidden;
    background: #f7fbf9;
    color: #18352f;
    box-shadow: 0 24px 70px rgba(16, 48, 42, 0.24);
}

.app-pwa-install-modal__header {
    align-items: flex-start;
    border: 0;
    padding: 22px 22px 12px;
}

.app-pwa-install-modal__kicker {
    margin: 0 0 6px;
    color: #b57910;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.app-pwa-install-modal__title {
    margin: 0;
    color: var(--verde-dark);
    font-size: 24px;
    font-weight: 800;
    line-height: 1.18;
}

.app-pwa-install-modal__body {
    padding: 4px 22px 24px;
}

.app-pwa-install-modal__lead {
    margin: 0 0 16px;
    color: #314f47;
    font-size: 15px;
    line-height: 1.55;
}

.app-pwa-install-modal__steps {
    display: grid;
    gap: 10px;
    margin: 0;
    padding-left: 24px;
    color: #203f37;
    font-size: 15px;
    line-height: 1.45;
}

.app-pwa-install-modal__steps li::marker {
    color: var(--verde-dark);
    font-weight: 800;
}

.app-pwa-install-modal__note {
    margin: 18px 0 0;
    padding: 12px 14px;
    border-radius: 12px;
    background: #fff;
    color: #5c726c;
    font-size: 13px;
    line-height: 1.45;
}

@media (min-width: 1181px) {
    .app-pwa-install-card.is-ready {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .app-pwa-install-card {
        align-items: flex-start;
        gap: 10px;
        padding: 11px;
    }

    .app-pwa-install-card__icon {
        flex-basis: 38px;
        width: 38px;
        height: 38px;
        font-size: 22px;
    }

    .app-pwa-install-card__actions {
        flex-direction: column-reverse;
        gap: 6px;
    }

    .app-pwa-install-card__button {
        min-height: 36px;
        padding: 0 12px;
        white-space: nowrap;
    }

    .app-pwa-install-modal__header {
        padding: 20px 18px 10px;
    }

    .app-pwa-install-modal__body {
        padding: 2px 18px 22px;
    }
}

.app-hero-demo-upgrade {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 18px;
}

.app-hero-demo-upgrade-cta {
    display: flex;
    flex: 1 1 100%;
    width: 100%;
}

.app-hero-demo-upgrade-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    min-width: 0;
    min-height: 84px;
    padding: 14px 18px;
    border: 1px solid rgba(201, 149, 38, 0.34);
    border-radius: 22px;
    background: linear-gradient(180deg, #d39a1f 0%, #bf8311 100%);
    color: #ffffff;
    box-shadow: 0 16px 32px rgba(159, 108, 12, 0.24);
    transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}

.app-hero-demo-upgrade-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.03);
    box-shadow: 0 20px 38px rgba(159, 108, 12, 0.28);
}

.app-hero-demo-upgrade-btn-kicker {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.82);
    text-align: center;
}

.app-hero-demo-upgrade-btn-label {
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.01em;
    text-align: center;
}

.app-hero-demo-upgrade-copy {
    display: flex;
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
}

.app-hero-demo-upgrade-title {
    margin: 0;
    color: var(--verde-dark);
    line-height: 1.24;
}

.app-hero-demo-upgrade-text {
    margin: 0;
    color: #275f53;
    font-weight: 500;
    line-height: 1.45;
}

.app-home-upgrade-modal__dialog {
    max-width: min(1040px, calc(100vw - 24px));
}

.app-home-upgrade-modal__content {
    border: 1px solid rgba(26, 92, 79, 0.12);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 22px 60px rgba(8, 28, 24, 0.24);
}

.app-home-upgrade-modal__header {
    padding: 16px 18px 12px;
    border-bottom: 1px solid rgba(26, 92, 79, 0.10);
    background: linear-gradient(180deg, rgba(248,252,250,0.98) 0%, rgba(241,248,245,0.98) 100%);
}

.app-home-upgrade-modal__kicker {
    margin: 0 0 6px;
    color: #9a6b17;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
}

.app-home-upgrade-modal__title {
    margin: 0;
    color: var(--verde-dark);
}

.app-home-upgrade-modal__close {
    box-shadow: none !important;
}

.app-home-upgrade-modal__body {
    padding: 0;
    background: linear-gradient(180deg, #ffffff 0%, #f7fbf9 100%);
}

.app-home-upgrade-modal__body .app-upgrade-section {
    max-width: none;
    padding: 18px 18px 22px;
}

.app-home-upgrade-modal__body .app-upgrade-card {
    border-radius: 0;
    border: none;
    box-shadow: none;
    background: transparent;
    padding: 0;
}

.app-home-upgrade-modal__loading,
.app-home-upgrade-modal__error {
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 28px 20px;
    text-align: center;
    color: var(--verde-dark);
}

.app-home-upgrade-modal__loading .spinner-border {
    width: 1.25rem;
    height: 1.25rem;
}

.app-home-upgrade-modal__error-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
}

.app-home-upgrade-modal__error-text {
    margin: 0;
    color: #55726b;
}

.app-home-upgrade-modal__retry {
    min-height: 44px;
    padding: 10px 16px;
    border: 1px solid rgba(26, 92, 79, 0.14);
    border-radius: 14px;
    background: linear-gradient(180deg, #2f7868 0%, #245c50 100%);
    color: #ffffff;
    font-weight: 700;
}

/* --- Dashboard card wrapper --- */
.app-dashboard-card {
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-sm) !important;
    border: 1px solid var(--verde-dark) !important;
}

/* --- Título de sección --- */
.app-section-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--verde-dark);
    margin: 0;
    letter-spacing: 0.01em;
}

/* --- Barra de progreso --- */
.app-progress-bar-bg {
    width: 100%;
    height: 10px;
    background: rgba(168, 230, 207, 0.25);
    border-radius: 999px;
    overflow: hidden;
}
.app-progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--verde-secundario), var(--verde-dark));
    border-radius: 999px;
    transition: width 0.8s cubic-bezier(.4,0,.2,1);
    min-width: 6px;
}
.app-progress-label {
    font-size: 13px;
    color: var(--text-muted);
}
.app-progress-count {
    font-size: 13px;
    font-weight: 600;
    color: var(--verde-dark);
}

/* --- Badge % de acierto --- */
.app-pct-acierto {
    display: inline-block;
    background: rgba(168, 230, 207, 0.35);
    color: var(--verde-dark);
    border-radius: var(--radius-pill);
    padding: 5px 20px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.02em;
    border: 1px solid var(--border-verde-light);
}

/* --- KPI cards --- */
.app-kpi-card {
    background: var(--bg-blanco);
    border: 1px solid var(--border-verde-light);
    border-top-width: 3px;
    border-radius: var(--radius-sm);
    padding: 12px 6px 10px;
    min-height: 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    box-shadow: var(--shadow-xs);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    cursor: pointer;
}
.app-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.app-kpi-total    { border-top-color: var(--verde-secundario) !important; }
.app-kpi-aciertos { border-top-color: #27ae60 !important; }
.app-kpi-fallos   { border-top-color: #e74c3c !important; }

/* --- Slider infografias home privada --- */
.app-home-infografias {
    position: relative;
    background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(239,248,244,0.98) 100%);
    border: 1px solid var(--verde-dark);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.app-home-infografias__top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 14px 0 14px;
}

.app-home-infografias__kicker {
    display: inline-block;
    color: var(--verde-terciario);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.app-home-infografias__lead {
    color: var(--text-muted);
    line-height: 1.4;
}

.app-home-infografias__count {
    color: var(--verde-dark);
    font-weight: 700;
    white-space: nowrap;
}

.app-home-infografias__stage {
    position: relative;
    padding: 12px 14px 0 14px;
}

.app-home-infografias__nav {
    position: absolute;
    top: 24px;
    right: 24px;
    z-index: 2;
    display: flex;
    gap: 8px;
}

.app-home-infografias__arrow,
.app-home-infografias__modal-close,
.app-home-infografias__modal-arrow {
    width: 42px;
    height: 42px;
    border: 1px solid rgba(26, 92, 79, 0.15);
    border-radius: 14px;
    background: rgba(255,255,255,0.96);
    color: var(--verde-dark);
    box-shadow: 0 10px 22px rgba(26, 92, 79, 0.10);
}

.app-home-infografias__arrow[disabled],
.app-home-infografias__modal-arrow[disabled] {
    opacity: 0.42;
    cursor: not-allowed;
}

.app-home-infografias__card {
    width: 100%;
    border: 1px solid rgba(26, 92, 79, 0.12);
    border-radius: 22px;
    background: #ffffff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-align: left;
    box-shadow: 0 16px 34px rgba(26, 92, 79, 0.08);
}

.app-home-infografias__media {
    min-height: 180px;
    background: linear-gradient(180deg, rgba(168,230,207,0.22) 0%, rgba(239,248,244,0.95) 100%);
}

.app-home-infografias__media img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

.app-home-infografias__copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    padding: 14px 16px;
}

.app-home-infografias__pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.app-home-infografias__pill {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(168, 230, 207, 0.28);
    border: 1px solid rgba(26, 92, 79, 0.10);
    color: var(--verde-dark);
    font-size: 12px;
    font-weight: 700;
}

.app-home-infografias__title {
    color: var(--verde-dark);
    font-size: 20px;
    line-height: 1.28;
    font-weight: 700;
}

.app-home-infografias__text {
    color: var(--text-muted);
    line-height: 1.5;
}

.app-home-infografias__cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--verde-dark);
    font-weight: 700;
}

@media (min-width: 1024px) {
    .app-home-infografias__card {
        display: grid;
        grid-template-columns: minmax(0, 1.08fr) minmax(250px, 0.92fr);
    }
    .app-home-infografias__media {
        min-height: 240px;
    }
    .app-home-infografias__media img {
        height: 100%;
        object-fit: cover;
    }
    .app-home-infografias__copy {
        gap: 12px;
        padding: 18px 16px;
    }
    .app-home-infografias__title {
        font-size: 20px;
        line-height: 1.28;
    }
}
.app-home-infografias__modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 12px;
    background: rgba(8, 28, 24, 0.78);
    backdrop-filter: blur(5px);
    z-index: 9999;
}

.app-home-infografias__modal.is-open {
    display: flex;
}

.app-home-infografias__modal-dialog {
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
    background: #f7fbf9;
    border: 1px solid rgba(168,230,207,0.18);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 28px 70px rgba(0,0,0,0.32);
}

.app-home-infografias__modal-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 14px 10px 14px;
    border-bottom: 1px solid rgba(26, 92, 79, 0.08);
}

.app-home-infografias__modal-kicker {
    display: inline-block;
    color: var(--verde-terciario);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.app-home-infografias__modal-title {
    color: var(--verde-dark);
    line-height: 1.28;
}

.app-home-infografias__modal-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    background: linear-gradient(180deg, rgba(236,246,241,0.9) 0%, rgba(247,251,249,0.98) 100%);
}

.app-home-infografias__modal-stage img {
    max-width: 100%;
    max-height: calc(100vh - 126px);
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(26, 92, 79, 0.14);
    background: #ffffff;
}

.app-home-infografias__modal-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    border-radius: 18px;
    border: 2px solid rgba(255,255,255,0.86);
    background: rgba(20, 73, 63, 0.92);
    color: #ffffff;
    box-shadow: 0 18px 34px rgba(8, 30, 25, 0.28);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    opacity: 0.98;
}

.app-home-infografias__modal-arrow:hover:not([disabled]) {
    background: rgba(16, 58, 49, 0.98);
    border-color: #ffffff;
}

.app-home-infografias__modal-arrow[disabled] {
    opacity: 0.35;
}

.app-home-infografias__modal-arrow.js-app-home-infografias-modal-prev {
    left: 18px;
}

.app-home-infografias__modal-arrow.js-app-home-infografias-modal-next {
    right: 18px;
}

.app-kpi-label {
    font-size: 10px !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted) !important;
    display: block;
    margin: 0 0 2px !important;
    padding: 0 !important;
}

/* Override botón interno en KPI card → solo número grande */
.app-kpi-num-wrap .w3-btn,
.app-kpi-num-wrap button {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: 100% !important;
    height: auto !important;
    min-width: unset !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
}
.app-kpi-num-wrap .w3-btn span,
.app-kpi-num-wrap button span {
    font-size: 32px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    color: var(--verde-dark) !important;
    display: block;
}
.app-kpi-total .app-kpi-num-wrap button span    { color: var(--verde-dark) !important; }
.app-kpi-aciertos .app-kpi-num-wrap button span { color: #27ae60 !important; }
.app-kpi-fallos .app-kpi-num-wrap button span   { color: #e74c3c !important; }
.app-kpi-num-wrap .w3-pale-green,
.app-kpi-num-wrap .w3-pale-red                  { background: transparent !important; }

/* --- Fila última ronda compacta --- */
.app-ronda-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--border-verde-light);
    padding-top: 10px;
}
.app-ronda-label {
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    flex-shrink: 0;
}
.app-ronda-pills {
    display: flex;
    gap: 6px;
    align-items: center;
}
.app-ronda-pills .w3-btn,
.app-ronda-pills button {
    width: 48px !important;
    height: 28px !important;
    min-width: unset !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 14px !important;
    box-shadow: none !important;
    font-size: 13px !important;
}
.app-ronda-pills .w3-btn span,
.app-ronda-pills button span { font-size: 13px !important; font-weight: 600 !important; }

/* --- Acciones rápidas mobile grid --- */
.app-quick-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

/* --- Links VIP --- */
.app-vip-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.app-vip-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--bg-blanco);
    border: 1px solid var(--verde-dark);
    border-radius: var(--radius-sm);
    text-decoration: none !important;
    color: var(--verde-dark) !important;
    box-shadow: var(--shadow-xs);
    transition: background 0.15s, transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.app-vip-card:hover {
    background: rgba(168, 230, 207, 0.15);
    border-color: var(--verde-secundario);
    color: var(--verde-darker) !important;
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}
.app-vip-icon {
    font-size: 22px;
    flex-shrink: 0;
}

/* --- Telegram compacto --- */
.app-telegram-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-footer);
    border: 1px solid var(--verde-dark);
    border-radius: var(--radius-sm);
    text-decoration: none !important;
    color: var(--verde-dark) !important;
    box-shadow: var(--shadow-xs);
    transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
}
.app-telegram-bar:hover {
    background: rgba(168, 230, 207, 0.22);
    color: var(--verde-darker) !important;
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}
.app-telegram-arrow {
    margin-left: auto;
    font-size: 22px;
    color: var(--verde-secundario);
    flex-shrink: 0;
}

/* --- Acordeón sugerencias --- */
.app-feedback-toggle {
    width: 100% !important;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px !important;
    background: transparent !important;
    color: var(--verde-dark) !important;
    border: none !important;
    font-weight: 600;
    font-size: 15px;
    text-align: left;
    letter-spacing: 0.01em;
}
.app-feedback-toggle:hover {
    background: rgba(168, 230, 207, 0.12) !important;
}
.app-feedback-toggle-icon {
    font-size: 20px;
    font-weight: 300;
    flex-shrink: 0;
}

.app-feedback-demo-card {
    padding: 16px;
    background: linear-gradient(135deg, #f7fffc 0%, #dff6ee 100%);
    border: 1px solid var(--verde-dark);
    border-radius: 22px;
    box-shadow: 0 16px 30px rgba(21, 82, 69, 0.12);
}

.app-feedback-demo-copy {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}

.app-feedback-demo-kicker {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 32px;
    padding: 7px 12px;
    border-radius: 999px;
    background: #1f5d50;
    color: #f5fffb;
    box-shadow: 0 8px 18px rgba(20, 76, 65, 0.18);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.app-feedback-demo-title {
    margin: 0;
    color: #184f44;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.16;
}

.app-feedback-demo-text {
    margin: 0;
    color: #356f64;
    font-size: 15px;
    line-height: 1.55;
}

.app-feedback-demo-card .app-feedback-toggle {
    padding: 14px 18px !important;
    background: linear-gradient(180deg, #2f7868 0%, #245c50 100%) !important;
    color: #ffffff !important;
    border-radius: 18px !important;
    box-shadow: 0 12px 24px rgba(22, 73, 62, 0.18);
    font-size: 16px;
    font-weight: 700;
}

.app-feedback-demo-cta-main {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.app-feedback-demo-cta-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.96);
}

.app-feedback-demo-cta-badge svg {
    width: 38px;
    height: 38px;
    display: block;
}

.app-feedback-demo-card .app-feedback-toggle:hover {
    background: linear-gradient(180deg, #378672 0%, #2a695a 100%) !important;
}

.app-feedback-demo-card .app-feedback-toggle.is-disabled,
.app-feedback-demo-card .app-feedback-toggle:disabled {
    opacity: 1 !important;
    background: linear-gradient(180deg, #b7d9cf 0%, #9fc7bc 100%) !important;
    color: rgba(18, 69, 58, 0.78) !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
}

.app-feedback-demo-card .app-feedback-toggle-icon {
    font-size: 24px;
    font-weight: 500;
}

.app-feedback-demo-card .btn-registro {
    min-width: 168px;
    min-height: 46px;
    padding: 11px 18px;
    border-radius: 14px;
}

.app-feedback-demo-card .btn-registro:disabled,
.app-feedback-demo-card .btn-registro[disabled] {
    opacity: 1 !important;
    background: linear-gradient(180deg, #edf8f4 0%, #d8efe7 100%) !important;
    color: #5b8077 !important;
    border: 1px solid rgba(43, 109, 95, 0.20) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.88), 0 8px 18px rgba(22, 73, 62, 0.10);
    cursor: not-allowed;
}

.app-feedback-demo-card .btn-registro:not(:disabled) {
    color: #ffffff !important;
}

.app-feedback-demo-status {
    margin: 16px 0 0 0;
    padding: 16px 18px;
    border-radius: 16px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
    border: 1px solid rgba(26, 92, 79, 0.14);
    background: rgba(255,255,255,0.82);
    color: #1f4f45;
    box-shadow: 0 10px 24px rgba(21, 82, 69, 0.10);
}

.app-feedback-demo-status--ok {
    border-color: rgba(21,128,61,0.18);
    background: linear-gradient(180deg,#eefbf4 0%, #e3f7ec 100%);
    color: #166534;
}

.app-feedback-demo-status--wait {
    border-color: rgba(210,134,22,0.20);
    background: linear-gradient(180deg,#fff8ea 0%, #fff2d9 100%);
    color: #9a6700;
}

.app-feedback-demo-status--error {
    border-color: rgba(193,56,56,0.18);
    background: linear-gradient(180deg,#fff6f6 0%, #ffeaea 100%);
    color: #b42318;
}

.app-feedback-demo-card .collapse.show,
.app-feedback-demo-card .collapsing {
    margin-top: 12px;
}

.app-feedback-demo-status b {
    font-weight: 800;
}

@media (max-width: 576px) {
    .app-home-btn {
        min-height: 40px !important;
        padding: 5px 10px !important;
    }
    .app-home-btn .letra1 {
        font-size: 15px !important;
    }
    .app-home-infografias {
        margin-top: 14px;
        margin-bottom: 14px;
    }
    .app-feedback-demo-status {
        padding: 14px 16px;
        font-size: 16px;
        line-height: 1.45;
    }
    .app-section-title {
        font-size: 15px;
    }
    .app-feedback-demo-card {
        padding: 14px;
        border-radius: 18px;
    }
    .app-feedback-demo-title {
        font-size: 18px;
    }
    .app-feedback-demo-text {
        font-size: 13px;
    }
    .app-feedback-demo-card .app-feedback-toggle {
        padding: 10px 14px !important;
        font-size: 14px;
    }
}

/* ============================================================
   26. TEMAS — Cabecera de sección y lista de temas
   ============================================================ */

/* --- Sección wrapper --- */
.app-temas-section {
    background: var(--bg-base);
}

/* --- Cabecera principal --- */
.app-temas-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 10px;
    padding: 6px 12px !important;
    min-height: 54px;
    background: linear-gradient(135deg, var(--bg-blanco) 0%, rgba(168, 230, 207, 0.18) 100%);
    border-bottom: 1px solid var(--border-verde-light);
    box-shadow: var(--shadow-xs);
    position: relative;
    top: auto;
    z-index: 2;
}

/* --- Lado izquierdo: icono + título --- */
.app-temas-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
}

.app-temas-info-btn {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    background: rgba(168, 230, 207, 0.25);
    border: 1px solid var(--border-verde-light);
    color: var(--verde-dark);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s;
}
.app-temas-info-btn:hover {
    background: rgba(168, 230, 207, 0.5);
}
.app-temas-info-btn .fa {
    font-size: 16px;
}

.app-temas-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--verde-dark);
    margin: 0;
    line-height: 1.2;
}
.app-temas-subtitle {
    font-size: 11px;
    color: var(--text-muted);
    margin: 0;
}
.app-demo-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(168, 230, 207, 0.3);
    color: var(--verde-terciario);
    border: 1px solid var(--border-verde-light);
    border-radius: 20px;
    padding: 2px 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1;
    white-space: nowrap;
    flex-shrink: 0;
}
.app-module-boost-line {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-height: 46px;
    padding: 10px 16px;
    color: var(--verde-dark);
    background: linear-gradient(90deg, rgba(240,250,246,0.98) 0%, rgba(255,255,255,0.98) 100%);
    border-top: 1px solid var(--border-verde-light);
    border-bottom: 1px solid var(--border-verde-light);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}
.app-module-boost-line::before {
    content: none;
}
.app-module-boost-text {
    display: block;
    width: 100%;
    text-align: right;
}

/* --- Filtros T / C / E --- */
.app-temas-filtros {
    display: flex;
    gap: 6px;
    align-items: center;
    flex: 0 0 auto;
    margin-left: auto;
}

.app-filtro-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    height: 48px;
    padding: 4px 10px !important;
    background: var(--bg-blanco) !important;
    border: 1px solid var(--border-verde-light) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--verde-terciario) !important;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
    box-shadow: var(--shadow-xs);
    gap: 1px;
}
.app-filtro-btn:hover {
    background: rgba(168, 230, 207, 0.25) !important;
    border-color: var(--verde-secundario) !important;
    color: var(--verde-dark) !important;
    transform: translateY(-1px);
}
.app-filtro-btn.w3-black,
.app-filtro-btn:active {
    background: var(--verde-dark) !important;
    border-color: var(--verde-dark) !important;
    color: #fff !important;
}
.app-filtro-letra {
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
}
.app-filtro-etiqueta {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.8;
}

/* --- Título del listado (TODOS LOS TEMAS, etc.) --- */
.app-temas-lista-titulo {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--verde-terciario);
    padding: 10px 16px 6px !important;
}

/* --- Filas de tema --- */
.app-tema-row {
    border-top: 6px solid rgba(34, 111, 94, 0.34) !important;
    border-right: none !important;
    border-left: none !important;
    background: var(--bg-blanco) !important;
    transition: background 0.12s;
}
.app-tema-row:hover {
    background: rgba(168, 230, 207, 0.08) !important;
}
.app-tema-titulo-row {
    border-right: none !important;
    border-left: none !important;
    background: var(--bg-blanco) !important;
}
.app-tema-titulo-row:hover {
    background: rgba(168, 230, 207, 0.08) !important;
}
.app-tema-titulo-td {
    color: var(--text-dark) !important;
    line-height: 1.4;
}

.app-tema-progress-row-tr {
    border-bottom: 3px solid rgba(34, 111, 94, 0.24) !important;
    background: linear-gradient(180deg, rgba(246, 252, 249, 0.96) 0%, rgba(255, 255, 255, 0.98) 100%) !important;
}

.app-tema-progress-row-td {
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    padding: 2px 8px 8px !important;
}

/* --- Número del tema --- */
.app-tema-num {
    background: var(--verde-dark) !important;
    color: #fff !important;
    border-radius: var(--radius-sm) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    min-width: 36px;
}

/* --- Override borde marrón legacy --- */
.w3-border-brown,
tr.w3-border-brown,
td.w3-border-brown {
    border-color: var(--border-verde-light) !important;
}

/* --- Barra progreso por tema --- */
.app-progress-bar-tema {
    background: linear-gradient(90deg, var(--verde-secundario), var(--verde-dark)) !important;
}

.app-tema-progress-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 20px;
    padding: 2px 0 0;
}

.app-tema-progress-count {
    flex: 0 0 auto;
    min-width: 86px;
    color: var(--verde-dark);
    font-weight: 800;
    line-height: 1.05;
    text-align: left;
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.app-tema-progress-total {
    color: var(--verde-dark);
}

.app-tema-progress-end {
    flex: 0 0 auto;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    text-align: right;
}

.app-tema-progress-score {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
}

.app-tema-progress-score-ok {
    color: #1f8b4c;
}

.app-tema-progress-score-sep {
    color: #5f6b68;
}

.app-tema-progress-score-ko {
    color: #c23a3a;
}

.app-tema-progress-track {
    flex: 1 1 auto;
    min-width: 0;
}

.app-tema-progress-bar-shell {
    height: 15px !important;
    border: 1px solid rgba(34, 111, 94, 0.12) !important;
    background: rgba(224, 232, 236, 0.72) !important;
}

/* --- Botones acción (documentos, preguntas, video) en fila tema --- */
.botonClassVerContenidoTema,
.botonClassOpcionTemasVerPreguntasTema,
.botonClassVerRecursoMultimediaTema,
.botonClassVerVideoTema,
.botonClassVerContenidoTemaExt {
    border-radius: var(--radius-sm) !important;
    border: 1px solid var(--border-verde-light) !important;
    background: var(--bg-blanco) !important;
    color: var(--verde-dark) !important;
    box-shadow: var(--shadow-xs) !important;
    transition: transform 0.12s, box-shadow 0.12s, background 0.12s !important;
}
.botonClassVerContenidoTema:hover,
.botonClassOpcionTemasVerPreguntasTema:hover,
.botonClassVerRecursoMultimediaTema:hover,
.botonClassVerVideoTema:hover,
.botonClassVerContenidoTemaExt:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-sm) !important;
    background: rgba(168, 230, 207, 0.15) !important;
    border-color: var(--verde-secundario) !important;
}

.app-temas-version-legend-wrap {
    border-bottom: 1px solid var(--border-verde-light);
    background: rgba(255,255,255,0.9);
    padding-top: 6px !important;
    padding-bottom: 8px !important;
}

.app-temas-version-legend-label {
    margin-bottom: 6px;
    color: #60756e !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700 !important;
    font-size: 11px !important;
}

.app-temas-version-legend {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    align-items: stretch;
}

.app-temas-version-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border: 1px solid var(--border-verde-light);
    border-radius: var(--radius-md);
    background: var(--bg-blanco);
    box-shadow: var(--shadow-xs);
    min-width: 0;
}

.app-temas-version-item--esencial {
    background: linear-gradient(135deg, #ffffff 0%, rgba(168,230,207,0.16) 100%);
}

.app-temas-version-item--ampliada {
    background: linear-gradient(135deg, #ffffff 0%, rgba(27,105,90,0.08) 100%);
}

.app-temas-version-item--preguntas {
    background: linear-gradient(135deg, #ffffff 0%, rgba(227,242,253,0.55) 100%);
}

.app-temas-version-item--video {
    background: linear-gradient(135deg, #ffffff 0%, rgba(248,232,239,0.58) 100%);
}

.app-temas-version-item--infografia {
    background: linear-gradient(135deg, #ffffff 0%, rgba(255,243,205,0.72) 100%);
}

.app-temas-version-item--pdf {
    background: linear-gradient(135deg, #ffffff 0%, rgba(255,228,230,0.72) 100%);
}

.app-temas-version-item.is-demo-locked {
    opacity: 0.72;
}

.app-temas-version-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    color: var(--verde-dark);
    border: 1px solid var(--border-verde-light);
    background: #fff;
    flex-shrink: 0;
}

.app-temas-version-icon .fa {
    font-size: 16px;
}

.app-temas-version-badge {
    position: absolute;
    right: -6px;
    top: -6px;
    min-width: 18px;
    height: 18px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    background: var(--verde-dark);
    box-shadow: var(--shadow-xs);
}

.app-temas-version-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 1px;
}

.app-temas-version-title {
    font-weight: 700 !important;
    color: var(--verde-dark) !important;
    line-height: 1.1;
    font-size: 15px !important;
}

.app-temas-version-desc {
    color: #5d6e68 !important;
    line-height: 1.2;
    font-size: 12px !important;
}

.app-tema-action-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.app-tema-action-icon--esencial {
    color: var(--verde-dark);
}

.app-tema-action-icon--ampliada {
    color: #2d7467;
}

.app-tema-actions-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.app-tema-actions-cell {
    width: auto !important;
    min-width: max-content;
}

@media (max-width: 767px), (pointer: coarse) and (max-width: 920px) {
    .app-tema-actions-wrap {
        gap: 4px;
        flex-wrap: nowrap;
        justify-content: flex-start;
        max-width: none;
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .app-tema-actions-wrap::-webkit-scrollbar {
        display: none;
    }

    .app-tema-actions-cell {
        min-width: 0;
        width: 100% !important;
        display: block;
        padding-top: 4px !important;
        text-align: left !important;
    }

    .app-tema-mobile-head-table,
    .app-tema-mobile-head-table tbody,
    .app-tema-mobile-head-row,
    .app-tema-mobile-head-row > td {
        display: block;
        width: 100% !important;
    }

    .app-tema-mobile-head-row {
        position: relative;
        padding-left: 45px;
    }

    .app-tema-mobile-head-row > .app-tema-num {
        position: absolute;
        left: 0;
        top: 2px;
        width: 38px !important;
        min-width: 38px !important;
        height: 34px !important;
        line-height: 28px;
    }

    .app-tema-kind-cell {
        min-height: 34px;
        padding: 4px 0 2px !important;
        text-align: left !important;
        color: var(--verde-dark);
        font-size: 12px !important;
        line-height: 1.1;
        text-transform: uppercase;
        letter-spacing: 0.06em;
    }

    .app-tema-spacer-cell {
        display: none !important;
    }
}

.botonClassVerInfografiaTema {
    color: #946200 !important;
}

.botonClassVerPresentacionPdfTema {
    color: #a1263d !important;
}

.app-tema-action-badge {
    position: absolute;
    right: 3px;
    top: 2px;
    min-width: 16px;
    height: 16px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    background: var(--verde-dark);
    line-height: 1;
}

.botonClassVerContenidoTema .app-tema-action-badge {
    background: #37786d;
}

.app-tema-action-badge--pro {
    min-width: 24px;
    padding: 0 4px;
    font-size: 9px;
}

.botonClassVerContenidoTemaExt .app-tema-action-badge {
    background: #1f5f55;
}

#contenidoTemaModal .modal-content {
    border: 1px solid rgba(26, 92, 79, 0.14);
    border-radius: 28px;
    overflow: hidden;
    background: #f7fcfa;
    box-shadow: 0 24px 56px rgba(17, 61, 53, 0.18);
}

#elTemaModal .app-admin-multimedia__frame-wrap,
#elTemaModal .app-admin-multimedia__image-wrap,
#elTemaModal .app-admin-multimedia__fallback {
    position: relative;
    width: 100%;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(26,92,79,0.10);
    background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(239,248,244,0.98) 100%);
    box-shadow: 0 18px 34px rgba(17,61,53,0.10);
}

#elTemaModal .app-admin-multimedia__frame-wrap {
    min-height: 74vh;
    padding: 14px;
}

#elTemaModal .app-admin-multimedia__frame-wrap--video {
    min-height: 0;
}

#elTemaModal .app-admin-multimedia__frame {
    width: 100%;
    height: calc(74vh - 28px);
    min-height: 640px;
    border: 0;
    border-radius: 18px;
    background: #f5fbf8;
}

#elTemaModal .app-admin-multimedia__video {
    width: 100%;
    height: auto;
    max-height: 72vh;
    border-radius: 18px;
    background: #102a26;
}

#elTemaModal .app-admin-multimedia__image-wrap {
    padding: 14px;
}

#elTemaModal .app-admin-multimedia__image {
    display: block;
    width: 100%;
    height: auto;
    max-height: 78vh;
    object-fit: contain;
    border-radius: 18px;
    background: #f5fbf8;
}

#elTemaModal .app-tema-protected-media {
    -webkit-user-select: none;
    user-select: none;
}

#elTemaModal .app-tema-protected-viewer {
    width: 100%;
    max-width: none;
    margin: 0 auto;
    display: grid;
    gap: 12px;
    align-content: start;
}

#elTemaModal .app-tema-protected-viewer--audio {
    min-height: clamp(18rem, calc(100dvh - 255px), 34rem);
    padding: clamp(14px, 2vw, 22px);
    border: 1px solid rgba(26,92,79,0.10);
    border-radius: 28px;
    background:
        radial-gradient(circle at top left, rgba(181, 231, 220, 0.34), transparent 30%),
        radial-gradient(circle at bottom right, rgba(210, 237, 229, 0.42), transparent 34%),
        linear-gradient(180deg, rgba(252,255,254,0.98) 0%, rgba(240,248,244,0.98) 100%);
    box-shadow: 0 20px 42px rgba(17,61,53,0.10);
    align-items: center;
}

#elTemaModal .app-tema-protected-viewer--audio .app-tema-protected-viewer__meta {
    justify-content: center;
}

#elTemaModal .app-tema-protected-viewer--audio .app-admin-multimedia__frame-wrap--audio {
    width: min(760px, 100%);
    min-height: clamp(11rem, 24vh, 14rem);
    margin: 0 auto;
    padding: 22px 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-radius: 24px;
    border: 1px solid rgba(26,92,79,0.10);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(247,252,249,0.98) 100%);
    box-shadow: 0 18px 34px rgba(17,61,53,0.08);
}

#elTemaModal .app-tema-protected-viewer--audio .app-admin-multimedia__audio {
    width: 100%;
    max-width: 680px;
    min-height: 54px;
}

#elTemaModal .app-tema-audio-player {
    width: min(620px, 100%);
    display: block;
}

#elTemaModal .app-tema-audio-element {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 44px;
    opacity: 0;
    pointer-events: none;
}

#elTemaModal .app-tema-audio-shell {
    display: grid;
    gap: 16px;
    padding: 18px;
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(246,252,249,0.98) 100%);
    border: 1px solid rgba(15, 78, 66, 0.10);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.72),
        0 18px 36px rgba(17,61,53,0.08);
}

#elTemaModal .app-tema-audio-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

#elTemaModal .app-tema-audio-title-block {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
}

#elTemaModal .app-tema-audio-title-block .app-tema-recurso-nav {
    position: static;
    width: 38px;
    height: 38px;
    min-width: 38px;
    transform: none;
    box-shadow: 0 8px 18px rgba(17,61,53,0.12);
}

#elTemaModal .app-tema-audio-title-block .app-tema-recurso-nav i {
    font-size: 24px;
}

#elTemaModal .app-tema-audio-kicker,
#elTemaModal .app-tema-audio-state-text {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

#elTemaModal .app-tema-audio-kicker {
    background: rgba(15, 78, 66, 0.10);
    color: #145348;
    border: 1px solid rgba(15, 78, 66, 0.10);
}

#elTemaModal .app-tema-audio-state-text {
    background: rgba(255,255,255,0.92);
    color: #1f4942;
    border: 1px solid rgba(18, 84, 72, 0.10);
}

#elTemaModal .app-tema-audio-main {
    display: grid;
    grid-template-columns: 96px 1fr;
    align-items: stretch;
    gap: 20px;
}

#elTemaModal .app-tema-audio-transport {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 24px;
    background:
        radial-gradient(circle at top left, rgba(173, 230, 216, 0.42), transparent 44%),
        linear-gradient(180deg, rgba(239,249,245,0.96) 0%, rgba(225,243,237,0.96) 100%);
    border: 1px solid rgba(15, 78, 66, 0.10);
}

#elTemaModal .app-tema-audio-play {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 78px;
    height: 78px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(180deg, #176153 0%, #0f4e43 100%);
    color: #ffffff;
    box-shadow: 0 18px 36px rgba(17,61,53,0.20);
    font-size: 32px;
}

#elTemaModal .app-tema-audio-play i {
    line-height: 1;
}

#elTemaModal .app-tema-audio-play.is-playing {
    background: linear-gradient(180deg, #144f44 0%, #0c3d35 100%);
}

#elTemaModal .app-tema-audio-progress-wrap {
    min-width: 0;
    display: grid;
    gap: 12px;
    align-content: center;
}

#elTemaModal .app-tema-audio-times {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #204640;
    font-size: 0.92rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

#elTemaModal .app-tema-audio-progress {
    width: 100%;
    accent-color: #0f5d52;
}

#elTemaModal .app-tema-audio-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    flex-wrap: wrap;
}

#elTemaModal .app-tema-audio-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    opacity: 0.82;
}

#elTemaModal .app-tema-audio-stat {
    display: grid;
    gap: 4px;
    min-height: 64px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(255,255,255,0.72);
    border: 1px solid rgba(18, 84, 72, 0.10);
}

#elTemaModal .app-tema-audio-stat--wide {
    grid-column: span 3;
}

#elTemaModal .app-tema-audio-stat-label {
    color: #5b7b75;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

#elTemaModal .app-tema-audio-stat-value {
    color: #173d37;
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1.25;
}

#elTemaModal .app-tema-audio-chip {
    min-height: 42px;
    padding: 9px 15px;
    border: 1px solid rgba(18, 84, 72, 0.14);
    border-radius: 999px;
    background: rgba(255,255,255,0.96);
    color: #145348;
    font-size: 0.92rem;
    font-weight: 800;
    box-shadow: 0 10px 20px rgba(17,61,53,0.08);
}

#elTemaModal .app-tema-audio-mute {
    min-width: 48px;
    padding-left: 14px;
    padding-right: 14px;
}

#elTemaModal .app-tema-audio-mute.is-muted {
    color: #7c3c20;
}

#elTemaModal .app-tema-audio-playlist-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 14px;
    border: 1px solid rgba(18, 84, 72, 0.18);
    border-radius: 999px;
    background: rgba(255,255,255,0.96);
    color: #145348;
    font-size: 0.86rem;
    font-weight: 900;
    box-shadow: 0 10px 20px rgba(17,61,53,0.08);
    white-space: nowrap;
}

#elTemaModal .app-tema-audio-playlist-toggle.is-active {
    background: linear-gradient(180deg, #176153 0%, #0f4e43 100%);
    color: #ffffff;
    border-color: rgba(15, 78, 66, 0.20);
}

#elTemaModal .app-tema-audio-playlist-toggle:disabled {
    cursor: default;
    background: rgba(236,242,240,0.92);
    color: #708c86;
    border-color: rgba(18, 84, 72, 0.10);
    box-shadow: none;
}

#elTemaModal .app-tema-protected-viewer__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

#elTemaModal .app-tema-protected-chip {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

#elTemaModal .app-tema-protected-chip--brand,
#elTemaModal .app-tema-protected-chip--secure {
    background: rgba(15, 78, 66, 0.9);
    color: #ffffff;
    box-shadow: 0 10px 22px rgba(17,61,53,0.14);
}

#elTemaModal .app-tema-protected-chip--gesture {
    background: rgba(15, 78, 66, 0.08);
    color: #16574b;
    border: 1px solid rgba(15, 78, 66, 0.10);
}

#elTemaModal .app-tema-zoom-stage {
    position: relative;
    width: 100%;
    height: clamp(19rem, calc(100dvh - 235px), 46rem);
    min-height: 19rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 24px;
    border: 1px solid rgba(26,92,79,0.10);
    background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(239,248,244,0.98) 100%);
    box-shadow: 0 18px 34px rgba(17,61,53,0.10);
}

#elTemaModal .app-tema-recurso-nav {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(15, 78, 66, 0.18);
    border-radius: 999px;
    background: rgba(255,255,255,0.94);
    color: #0f5d52;
    box-shadow: 0 12px 28px rgba(17,61,53,0.16);
    transform: translateY(-50%);
}

#elTemaModal .app-tema-recurso-nav i {
    font-size: 32px;
    line-height: 1;
}

#elTemaModal .app-tema-recurso-nav--prev {
    left: 12px;
}

#elTemaModal .app-tema-recurso-nav--next {
    right: 12px;
}

#elTemaModal .app-tema-recurso-nav:hover,
#elTemaModal .app-tema-recurso-nav:focus {
    background: #f2faf7;
    color: #0f5d52;
}

#elTemaModal .app-tema-recurso-nav.is-disabled,
#elTemaModal .app-tema-recurso-nav:disabled {
    opacity: 0.34;
    cursor: default;
    box-shadow: none;
}

#elTemaModal .app-tema-zoom-stage--pdf {
    height: clamp(16rem, calc(100dvh - 290px), 42rem);
    min-height: 16rem;
}

#elTemaModal .app-tema-zoom-target {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    margin: 0 auto;
    transform-origin: center center;
    will-change: transform;
    transition: transform 0.08s linear;
}

#elTemaModal .app-tema-zoom-stage.is-zoomed .app-tema-zoom-target {
    transition: none;
}

#elTemaModal .app-tema-protected-viewer__toolbar,
#elTemaModal .app-tema-pdf-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

#elTemaModal .app-tema-toolbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid rgba(15, 78, 66, 0.12);
    border-radius: 14px;
    background: #ffffff;
    color: #12483f;
    font-size: 0.92rem;
    font-weight: 800;
    box-shadow: 0 8px 18px rgba(17,61,53,0.08);
}

#elTemaModal .app-tema-toolbar-btn:hover,
#elTemaModal .app-tema-toolbar-btn:focus {
    background: #eff8f4;
    color: #12483f;
}

#elTemaModal .app-tema-pdf-counter,
#elTemaModal .app-tema-protected-viewer__helper {
    color: #365c54;
    font-size: 0.93rem;
    line-height: 1.4;
}

#elTemaModal .app-tema-pdf-page-strip {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
}

#elTemaModal .app-tema-pdf-page-btn {
    flex: 0 0 auto;
    min-width: 58px;
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid rgba(15, 78, 66, 0.10);
    border-radius: 999px;
    background: rgba(255,255,255,0.92);
    color: #1f584d;
    font-size: 0.84rem;
    font-weight: 800;
    white-space: nowrap;
    box-shadow: 0 8px 18px rgba(17,61,53,0.06);
}

#elTemaModal .app-tema-pdf-page-btn.is-active {
    background: #0f5d52;
    color: #ffffff;
    border-color: #0f5d52;
}

#elTemaModal .app-tema-protected-image,
#elTemaModal .app-admin-multimedia__pdf-page {
    -webkit-user-drag: none;
}

#elTemaModal .app-tema-protected-image {
    pointer-events: auto;
    touch-action: none;
    cursor: grab;
}

#elTemaModal .app-tema-protected-hint {
    position: absolute;
    right: 18px;
    top: 16px;
    z-index: 2;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(15, 78, 66, 0.88);
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    box-shadow: 0 12px 24px rgba(17,61,53,0.16);
}

#elTemaModal .app-admin-multimedia__pdf-pages {
    position: relative;
    width: 100%;
    padding: 14px;
    min-height: 74vh;
    display: flex;
    flex-direction: column;
    gap: 16px;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(26,92,79,0.10);
    background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(239,248,244,0.98) 100%);
    box-shadow: 0 18px 34px rgba(17,61,53,0.10);
}

#elTemaModal .app-admin-multimedia__pdf-page {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(17,61,53,0.08);
    transition: opacity 0.22s ease, filter 0.22s ease;
}

#elTemaModal .app-tema-zoom-stage--pdf.is-page-switching .app-admin-multimedia__pdf-page {
    opacity: 0;
    filter: blur(6px);
}

#elTemaModal .app-admin-multimedia .app-admin-multimedia__preview-seal {
    display: none !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

#elTemaModal .app-admin-multimedia__fallback {
    padding: 24px;
}

#elTemaModal .app-admin-multimedia__preview-title {
    margin: 0 0 10px;
    color: #153c35;
    font-size: 1.05rem;
    font-weight: 800;
}

.app-tema-modal-header {
    gap: 10px;
    padding: 8px 12px !important;
    background:
        radial-gradient(circle at top right, rgba(168, 230, 207, 0.32), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(236, 247, 243, 0.98) 100%) !important;
    border-bottom: 1px solid rgba(26, 92, 79, 0.12);
}

.app-tema-modal-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
    min-height: 52px;
    min-width: 188px;
    max-width: min(820px, calc(100vw - 180px));
    padding: 10px 14px 10px 16px !important;
    border: 1px solid rgba(26, 92, 79, 0.14) !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    color: #163a34 !important;
    box-shadow: 0 10px 26px rgba(26, 92, 79, 0.08) !important;
    text-align: left;
}

.app-tema-modal-toggle:hover,
.app-tema-modal-toggle:focus {
    background: #f6fbf8 !important;
    color: #163a34 !important;
}

.app-tema-modal-close {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px;
    padding: 0 !important;
    border: 1px solid rgba(26, 92, 79, 0.14) !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    color: #0f5d52 !important;
    box-shadow: 0 8px 22px rgba(26, 92, 79, 0.08) !important;
}

.app-tema-modal-close:hover,
.app-tema-modal-close:focus {
    background: #eef8f4 !important;
    color: #0f5d52 !important;
}

.app-tema-modal-close i {
    font-size: 28px !important;
    line-height: 1;
}

.app-tema-modal-body {
    padding: 0.6rem 0.7rem 1rem !important;
    background:
        linear-gradient(180deg, rgba(244, 250, 247, 0.96) 0%, rgba(238, 247, 243, 0.92) 100%);
}

.app-tema-modal-title-wrap {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.08rem;
}

.app-tema-modal-title-main {
    color: #133d37;
    line-height: 1.1;
    font-size: clamp(1.06rem, 1.6vw, 1.22rem);
}

.app-tema-modal-title-sub {
    color: #0f5d52;
    line-height: 1.2;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.app-tema-modal-toggle__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 999px;
    background: rgba(26, 92, 79, 0.1);
    color: #0f5d52;
    font-size: 1rem;
}

#elTemaModal .modal-content {
    border: 1px solid rgba(26, 92, 79, 0.14);
    border-radius: 28px;
    overflow: hidden;
    background: #f7fcfa;
    box-shadow: 0 24px 56px rgba(17, 61, 53, 0.18);
    height: 100dvh;
}

#elTemaModal .modal-header {
    gap: 14px;
    padding: 14px 16px !important;
    background:
        radial-gradient(circle at top right, rgba(168, 230, 207, 0.3), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(236, 247, 243, 0.98) 100%) !important;
    border-bottom: 1px solid rgba(26, 92, 79, 0.12);
    align-items: center;
}

#elTemaModal.is-tema-multimedia-modal .modal-header {
    gap: 12px;
    padding: 10px 14px !important;
}

#tituloElTemaModal {
    margin: 0;
    width: 100%;
    color: #133d37;
    font-size: clamp(1.05rem, 1.8vw, 1.4rem);
    font-weight: 800;
    line-height: 1.08;
    text-align: left !important;
}

#cierraElTemaModal {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 54px !important;
    height: 54px !important;
    min-width: 54px;
    padding: 0 !important;
    border: 1px solid rgba(26, 92, 79, 0.14) !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    color: #0f5d52 !important;
    box-shadow: 0 8px 22px rgba(26, 92, 79, 0.08) !important;
}

#cierraElTemaModal:hover,
#cierraElTemaModal:focus {
    background: #eef8f4 !important;
    color: #0f5d52 !important;
}

#cierraElTemaModal i {
    font-size: 28px !important;
    line-height: 1;
}

#cuerpoElTemaModal {
    padding: 1rem 1rem 1.2rem !important;
    text-align: left !important;
    background:
        linear-gradient(180deg, rgba(244, 250, 247, 0.96) 0%, rgba(238, 247, 243, 0.92) 100%);
    overflow: auto;
    max-height: calc(100dvh - 88px);
    -webkit-overflow-scrolling: touch;
}

#elTemaModal.is-tema-multimedia-modal #cuerpoElTemaModal {
    padding: 0.6rem 0.35rem 0.85rem !important;
}

#cuerpoElTemaModal > * {
    text-align: left;
}

.app-tema-preguntas-panel {
    width: min(1340px, 100%);
    margin: 0 auto;
    display: grid;
    gap: 16px;
}

.app-tema-preguntas-hero {
    padding: 18px 20px;
    border: 1px solid rgba(15, 93, 82, 0.1);
    border-radius: 24px;
    background:
        radial-gradient(circle at top right, rgba(196, 238, 228, 0.22), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(238, 247, 243, 0.98) 100%);
    box-shadow: 0 14px 34px rgba(19, 61, 56, 0.06);
}

.app-tema-preguntas-kicker {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(15, 93, 82, 0.09);
    color: #0f5d52;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.app-tema-preguntas-topic {
    margin: 14px 0 0;
    color: #173b35;
    font-size: clamp(1rem, 1.7vw, 1.22rem);
    font-weight: 800;
    line-height: 1.5;
}

.app-tema-preguntas-help {
    margin: 10px 0 0;
    color: #5a716a;
    font-size: 0.95rem;
    line-height: 1.55;
}

.app-tema-preguntas-list {
    display: grid;
    gap: 12px;
}

.app-tema-pregunta-card {
    border: 1px solid rgba(15, 93, 82, 0.12);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 12px 30px rgba(19, 61, 56, 0.06);
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.app-tema-pregunta-card:hover {
    border-color: rgba(15, 93, 82, 0.18);
    box-shadow: 0 18px 36px rgba(19, 61, 56, 0.08);
    transform: translateY(-1px);
}

.app-tema-pregunta-card.app-tema-pregunta-card--seen {
    border-color: rgba(214, 128, 33, 0.34);
}

.app-tema-pregunta-card.is-open {
    border-color: rgba(15, 93, 82, 0.24);
    box-shadow: 0 20px 42px rgba(19, 61, 56, 0.1);
}

.app-tema-pregunta-toggle {
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    border: 0;
    background: transparent;
    color: #173b35;
    text-align: left;
    cursor: pointer;
}

.app-tema-pregunta-toggle:focus {
    outline: none;
}

.app-tema-pregunta-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: #103d36;
    color: #ffffff;
    font-size: 0.96rem;
    font-weight: 900;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.app-tema-pregunta-copy {
    min-width: 0;
    flex: 1 1 auto;
}

.app-tema-pregunta-text {
    display: block;
    color: #23453f;
    font-size: clamp(1rem, 1.7vw, 1.14rem);
    font-weight: 700;
    line-height: 1.5;
}

.app-tema-pregunta-seen {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 28px;
    height: 28px;
    padding: 0 9px;
    border-radius: 999px;
    background: linear-gradient(180deg, #ffad47 0%, #f68a1f 100%);
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 900;
    line-height: 1;
}

.app-tema-pregunta-detail {
    padding: 0 18px 18px;
}

#elTemaModal .app-admin-detalle-pregunta {
    width: min(1340px, 100%);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    color: #173b35;
}

#elTemaModal .app-admin-detalle-pregunta__hero,
#elTemaModal .app-admin-detalle-pregunta__respuesta,
#elTemaModal .app-admin-detalle-pregunta__ia {
    border: 1px solid rgba(15, 93, 82, 0.12);
    border-radius: 24px;
    box-shadow: 0 16px 40px rgba(19, 61, 56, 0.08);
}

#elTemaModal .app-admin-detalle-pregunta__hero {
    padding: 22px 24px;
    background:
        radial-gradient(circle at top right, rgba(197, 239, 230, 0.24), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(237, 248, 244, 0.96) 100%);
}

#elTemaModal .app-admin-detalle-pregunta__eyebrow-row,
#elTemaModal .app-admin-detalle-pregunta__respuesta-id,
#elTemaModal .app-admin-detalle-pregunta__respuesta-chips,
#elTemaModal .app-admin-detalle-pregunta__ia {
    display: none !important;
}

#elTemaModal .app-admin-detalle-pregunta__pregunta {
    margin: 0;
    color: #173b35;
    font-size: clamp(1.1rem, 1.9vw, 1.5rem);
    font-weight: 800;
    line-height: 1.42;
}

#elTemaModal .app-admin-detalle-pregunta__respuestas {
    display: grid;
    gap: 14px;
}

#elTemaModal .app-admin-detalle-pregunta__respuesta {
    padding: 18px 20px 20px;
    background: #ffffff;
}

#elTemaModal .app-admin-detalle-pregunta__respuesta--correcta {
    background: linear-gradient(180deg, rgba(238, 252, 242, 0.98) 0%, rgba(232, 248, 236, 0.98) 100%);
    border-color: rgba(46, 125, 50, 0.15);
}

#elTemaModal .app-admin-detalle-pregunta__respuesta--incorrecta {
    background: linear-gradient(180deg, rgba(255, 249, 247, 0.98) 0%, rgba(255, 241, 237, 0.98) 100%);
    border-color: rgba(182, 72, 49, 0.15);
}

#elTemaModal .app-admin-detalle-pregunta__respuesta--caso {
    box-shadow: 0 0 0 3px rgba(15, 93, 82, 0.12), 0 16px 40px rgba(19, 61, 56, 0.12);
}

#elTemaModal .app-admin-detalle-pregunta__respuesta-head,
#elTemaModal .app-admin-detalle-pregunta__respuesta-head-main {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

#elTemaModal .app-admin-detalle-pregunta__respuesta-head {
    justify-content: flex-start;
}

#elTemaModal .app-admin-detalle-pregunta__respuesta-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: #103d36;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 900;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

#elTemaModal .app-admin-detalle-pregunta__respuesta-head-copy {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

#elTemaModal .app-admin-detalle-pregunta__respuesta-state {
    color: #173b35;
    font-size: 0.85rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

#elTemaModal .app-admin-detalle-pregunta__respuesta-texto {
    margin-top: 14px;
    color: #173b35;
    font-size: 1.04rem;
    font-weight: 800;
    line-height: 1.52;
}

#elTemaModal .app-admin-detalle-pregunta__justificacion {
    margin-top: 14px;
    padding: 16px 18px;
    border-radius: 20px;
    border: 1px solid rgba(15, 93, 82, 0.1);
    background: rgba(255, 255, 255, 0.84);
}

#elTemaModal .app-admin-detalle-pregunta__justificacion--pending {
    background: rgba(247, 250, 249, 0.92);
}

#elTemaModal .app-admin-detalle-pregunta__justificacion-label {
    margin: 0 0 10px;
    color: #0f5d52;
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#elTemaModal .app-admin-detalle-pregunta__justificacion-texto {
    color: #304843;
    font-size: 0.98rem;
    line-height: 1.74;
}

#elTemaModal .app-admin-detalle-pregunta__justificacion-texto strong {
    color: #173b35;
}

@media (max-width: 767px) {
    .app-temas-header {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .app-temas-version-legend-wrap {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    .app-temas-version-legend {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 2px;
    }

    .app-temas-version-item {
        min-width: 220px;
        width: auto;
        flex: 0 0 220px;
        padding: 8px 9px;
        scroll-snap-align: start;
    }

    .app-tema-actions-wrap {
        gap: 4px;
        flex-wrap: nowrap;
        justify-content: flex-start;
        max-width: none;
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .app-tema-actions-wrap::-webkit-scrollbar {
        display: none;
    }

    .app-tema-actions-cell {
        min-width: 0;
        width: 100% !important;
        display: block;
        padding-top: 4px !important;
        text-align: left !important;
    }

    .app-tema-mobile-head-table,
    .app-tema-mobile-head-table tbody,
    .app-tema-mobile-head-row,
    .app-tema-mobile-head-row > td {
        display: block;
        width: 100% !important;
    }

    .app-tema-mobile-head-row {
        position: relative;
        padding-left: 45px;
    }

    .app-tema-mobile-head-row > .app-tema-num {
        position: absolute;
        left: 0;
        top: 2px;
        width: 38px !important;
        min-width: 38px !important;
        height: 34px !important;
        line-height: 28px;
    }

    .app-tema-kind-cell {
        min-height: 34px;
        padding: 4px 0 2px !important;
        text-align: left !important;
        color: var(--verde-dark);
        font-size: 12px !important;
        line-height: 1.1;
        text-transform: uppercase;
        letter-spacing: 0.06em;
    }

    .app-tema-spacer-cell {
        display: none !important;
    }

    .app-temas-version-desc {
        font-size: 11px !important;
    }

    .app-tema-action-badge {
        right: 1px;
        top: 1px;
    }

    .app-tema-modal-title-sub {
        font-size: 12px !important;
    }

    .app-tema-modal-toggle {
        min-width: 132px;
        padding: 12px 20px !important;
    }

    #elTemaModal .modal-header {
        padding: 12px !important;
    }

    #elTemaModal.is-tema-multimedia-modal .modal-header {
        padding: 8px 10px !important;
        gap: 10px;
    }

    #tituloElTemaModal {
        font-size: 1rem;
    }

    #cierraElTemaModal {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px;
        border-radius: 16px !important;
    }

    #cuerpoElTemaModal {
        padding: 0.8rem 0.65rem 1rem !important;
        max-height: calc(100dvh - 74px);
    }

    #elTemaModal.is-tema-multimedia-modal #cuerpoElTemaModal {
        padding: 0.45rem 0.15rem 0.8rem !important;
        overflow-y: hidden;
    }

    #elTemaModal.is-tema-audio-modal .modal-dialog {
        width: 100vw;
        max-width: 100vw;
        height: 100dvh;
        margin: 0;
    }

    #elTemaModal.is-tema-audio-modal .modal-content {
        width: 100vw;
        min-height: 100dvh;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
    }

    #elTemaModal.is-tema-audio-modal #cuerpoElTemaModal {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    #elTemaModal .app-admin-multimedia__frame-wrap,
    #elTemaModal .app-admin-multimedia__image-wrap,
    #elTemaModal .app-admin-multimedia__fallback {
        border-radius: 18px;
    }

    #elTemaModal .app-admin-multimedia__frame-wrap {
        min-height: 62vh;
        padding: 10px;
    }

    #elTemaModal .app-admin-multimedia__frame {
        min-height: 56vh;
        height: 56vh;
        border-radius: 14px;
    }

    #elTemaModal .app-admin-multimedia__image-wrap {
        padding: 10px;
    }

    #elTemaModal .app-admin-multimedia__image {
        max-height: 70vh;
        border-radius: 14px;
    }

    #elTemaModal .app-tema-protected-viewer {
        gap: 10px;
    }

    #elTemaModal .app-tema-protected-viewer__meta {
        gap: 6px;
    }

    #elTemaModal .app-tema-protected-chip {
        min-height: 28px;
        padding: 5px 10px;
        font-size: 0.68rem;
    }

    #elTemaModal .app-tema-zoom-stage {
        height: calc(100dvh - 234px);
        min-height: 260px;
        border-radius: 18px;
    }

    #elTemaModal .app-tema-recurso-nav {
        width: 42px;
        height: 42px;
    }

    #elTemaModal .app-tema-recurso-nav i {
        font-size: 26px;
    }

    #elTemaModal .app-tema-recurso-nav--prev {
        left: 8px;
    }

    #elTemaModal .app-tema-recurso-nav--next {
        right: 8px;
    }

    #elTemaModal .app-tema-zoom-stage--pdf {
        height: calc(100dvh - 360px);
        min-height: 220px;
    }

    #elTemaModal .app-tema-pdf-toolbar,
    #elTemaModal .app-tema-protected-viewer__toolbar {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    #elTemaModal .app-tema-pdf-counter,
    #elTemaModal .app-tema-protected-viewer__helper,
    #elTemaModal .app-tema-protected-viewer__helper--pdf {
        grid-column: 1 / -1;
        font-size: 0.82rem;
    }

    #elTemaModal .app-tema-toolbar-btn {
        min-height: 42px;
        padding: 0 10px;
        font-size: 0.88rem;
        border-radius: 12px;
    }

    #elTemaModal .app-tema-pdf-page-btn {
        min-width: 52px;
        min-height: 34px;
        font-size: 0.78rem;
    }

    #elTemaModal .app-tema-protected-viewer__helper--pdf {
        display: none;
    }

    #elTemaModal .app-admin-multimedia .app-admin-multimedia__preview-seal {
        top: 12px;
        left: 12px;
        padding: 6px 10px;
        font-size: 10px;
    }

    .app-tema-preguntas-hero {
        padding: 15px 14px;
        border-radius: 20px;
    }

    .app-tema-pregunta-card {
        border-radius: 20px;
    }

    .app-tema-pregunta-toggle {
        gap: 12px;
        padding: 14px;
    }

    .app-tema-pregunta-num {
        flex-basis: 38px;
        width: 38px;
        height: 38px;
        border-radius: 12px;
        font-size: 0.9rem;
    }

    .app-tema-pregunta-text {
        font-size: 0.96rem;
        line-height: 1.45;
    }

    .app-tema-pregunta-detail {
        padding: 0 14px 14px;
    }

    #elTemaModal .app-admin-detalle-pregunta__hero,
    #elTemaModal .app-admin-detalle-pregunta__respuesta {
        border-radius: 20px;
    }

    #elTemaModal .app-admin-detalle-pregunta__hero,
    #elTemaModal .app-admin-detalle-pregunta__respuesta {
        padding: 16px;
    }

    #elTemaModal .app-admin-detalle-pregunta__pregunta {
        font-size: 1.02rem;
    }

    #elTemaModal .app-admin-detalle-pregunta__respuesta-texto,
    #elTemaModal .app-admin-detalle-pregunta__justificacion-texto {
        font-size: 0.92rem;
        line-height: 1.64;
    }

    #elTemaModal .app-tema-protected-viewer--audio {
        width: 100%;
        min-height: clamp(14rem, calc(100dvh - 220px), 24rem);
        padding: 8px 0;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
    }

    #elTemaModal .app-tema-protected-viewer--audio .app-admin-multimedia__frame-wrap--audio {
        width: 100%;
        min-height: 9rem;
        padding: 10px 8px;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
    }

    #elTemaModal .app-tema-audio-player {
        width: 100%;
    }

    #elTemaModal .app-tema-audio-shell {
        gap: 14px;
        padding: 12px 10px;
        border-radius: 16px;
    }

    #elTemaModal .app-tema-audio-head {
        align-items: center;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    #elTemaModal .app-tema-audio-title-block {
        width: 100%;
        display: grid;
        grid-template-columns: 38px minmax(0, 1.08fr) minmax(0, 0.92fr) 38px;
        align-items: center;
        gap: 6px;
    }

    #elTemaModal .app-tema-audio-kicker,
    #elTemaModal .app-tema-audio-state-text {
        min-height: 32px;
        width: 100%;
        justify-content: center;
        padding: 7px 6px;
        font-size: 0.68rem;
        text-align: center;
        white-space: nowrap;
    }

    #elTemaModal .app-tema-audio-title-block .app-tema-recurso-nav {
        width: 36px;
        height: 36px;
        min-width: 36px;
    }

    #elTemaModal .app-tema-audio-title-block .app-tema-recurso-nav i {
        font-size: 24px;
    }

    #elTemaModal .app-tema-audio-playlist-toggle {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    #elTemaModal .app-tema-audio-main {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    #elTemaModal .app-tema-audio-transport {
        min-height: 104px;
        border-radius: 20px;
    }

    #elTemaModal .app-tema-audio-play {
        width: 74px;
        height: 74px;
        margin: 0 auto;
        font-size: 28px;
    }

    #elTemaModal .app-tema-audio-actions {
        justify-content: center;
    }

    #elTemaModal .app-tema-audio-stats {
        grid-template-columns: 1fr;
    }

    #elTemaModal .app-tema-audio-stat,
    #elTemaModal .app-tema-audio-stat--wide {
        grid-column: auto;
        min-height: 0;
    }

    .app-temas-version-legend::-webkit-scrollbar {
        height: 6px;
    }

    .app-temas-version-legend::-webkit-scrollbar-thumb {
        background: rgba(26,92,79,0.18);
        border-radius: 999px;
    }
}

@media (max-width: 991px) and (orientation: landscape) {
    #elTemaModal .modal-header {
        padding: 10px 12px !important;
    }

    #elTemaModal.is-tema-multimedia-modal .modal-header {
        padding: 7px 10px !important;
    }

    #tituloElTemaModal {
        font-size: 0.98rem;
    }

    #cierraElTemaModal {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px;
    }

    #cuerpoElTemaModal {
        max-height: calc(100dvh - 66px);
        padding-top: 0.7rem !important;
    }

    #elTemaModal.is-tema-multimedia-modal #cuerpoElTemaModal {
        padding-left: 0.15rem !important;
        padding-right: 0.15rem !important;
    }

    #elTemaModal .app-tema-zoom-stage {
        height: calc(100dvh - 150px);
        min-height: 180px;
    }

    #elTemaModal .app-tema-recurso-nav {
        width: 40px;
        height: 40px;
    }

    #elTemaModal .app-tema-zoom-stage--pdf {
        height: calc(100dvh - 205px);
        min-height: 148px;
    }

    #elTemaModal .app-tema-protected-viewer {
        gap: 6px;
    }

    #elTemaModal .app-tema-protected-viewer__meta {
        gap: 6px;
    }

    #elTemaModal .app-tema-protected-chip {
        min-height: 24px;
        padding: 4px 9px;
        font-size: 0.63rem;
    }
}

.app-tema-lectura-layout {
    padding: 0;
}

.app-tema-lectura-content-wrap {
    background: #ffffff;
    border: 1px solid rgba(26,92,79,0.10);
    border-radius: 18px;
    padding: 1.15rem 1.3rem 1.4rem;
    box-shadow: 0 12px 28px rgba(26,92,79,0.06);
    max-width: none;
    width: 100%;
    margin: 0;
}

.app-tema-lectura-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    padding-bottom: 0.95rem;
    border-bottom: 1px solid rgba(26,92,79,0.10);
}

.app-tema-lectura-meta-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.38rem 0.78rem;
    border-radius: 999px;
    background: rgba(26,92,79,0.08);
    border: 1px solid rgba(26,92,79,0.14);
    color: #17352f;
    font-size: 0.86rem;
    font-weight: 700;
}

.app-tema-lectura-meta-text {
    margin: 0;
    color: #5b7069;
    font-size: 0.95rem;
    line-height: 1.5;
}

.app-tema-lectura-content.markdown-content {
    color: #304540;
    font-size: 1.04rem;
    line-height: 1.82;
    max-width: none;
    width: 100%;
}

.app-tema-lectura-content.markdown-content h1,
.app-tema-lectura-content.markdown-content h2,
.app-tema-lectura-content.markdown-content h3,
.app-tema-lectura-content.markdown-content h4 {
    color: #17352f;
}

.app-tema-lectura-content.markdown-content h1,
.app-tema-lectura-content.markdown-content h2 {
    border-bottom: 2px solid rgba(26,92,79,0.16);
    padding-bottom: 0.6rem;
    margin-top: 0;
    margin-bottom: 1.15rem;
}

.app-tema-lectura-content.markdown-content h1 {
    font-size: clamp(1.45rem, 2vw, 1.9rem);
}

.app-tema-lectura-content.markdown-content h2 {
    font-size: clamp(1.24rem, 1.7vw, 1.55rem);
}

.app-tema-lectura-content.markdown-content h3 {
    margin-top: 1.35rem;
    margin-bottom: 0.8rem;
    font-size: clamp(1.06rem, 1.45vw, 1.22rem);
}

.app-tema-lectura-content.markdown-content p,
.app-tema-lectura-content.markdown-content li {
    color: #344b45;
}

.app-tema-lectura-content.markdown-content strong {
    color: #17352f;
}

.app-tema-lectura-content.markdown-content section + section {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(26,92,79,0.10);
}

.app-tema-lectura-content.markdown-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.3rem 0;
    overflow: hidden;
    border-radius: 16px;
    box-shadow: 0 10px 24px rgba(26,92,79,0.06);
}

.app-tema-lectura-content.markdown-content th {
    background: var(--verde-dark);
    color: #ffffff;
    padding: 0.9rem 0.95rem;
}

.app-tema-lectura-content.markdown-content td {
    padding: 0.9rem 0.95rem;
    border: 1px solid rgba(26,92,79,0.08);
    background: #fcfefd;
}

.app-tema-lectura-content.markdown-content blockquote {
    border-left: 4px solid var(--verde-secundario);
    background: #f5fbf8;
    padding: 0.95rem 1rem;
    border-radius: 0 14px 14px 0;
    color: #45615b;
}

.app-tema-lectura-content.markdown-content > :first-child {
    margin-top: 0 !important;
}

.app-tema-indice-panel {
    position: fixed;
    top: 0;
    left: -100%;
    width: min(420px, 88vw);
    height: 100%;
    background: linear-gradient(180deg, #f7fcfa 0%, #eef8f4 100%);
    box-shadow: 18px 0 42px rgba(17, 61, 53, 0.16);
    z-index: 9999;
    transition: left 0.32s ease;
    border-right: 1px solid rgba(26, 92, 79, 0.12);
}

.app-tema-indice-panel__header {
    position: relative;
    padding: 18px 18px 16px;
    background:
        radial-gradient(circle at top right, rgba(168, 230, 207, 0.22), transparent 42%),
        linear-gradient(180deg, #ffffff 0%, #edf8f4 100%);
    border-bottom: 1px solid rgba(26, 92, 79, 0.12);
}

.app-tema-indice-panel__headline {
    display: flex;
    flex-direction: column;
    gap: 0.16rem;
    padding-right: 52px;
}

.app-tema-indice-panel__headline-main {
    color: #123c35;
    font-size: 1.18rem;
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: 0.02em;
}

.app-tema-indice-panel__headline-number {
    color: #0f5d52;
    font-size: 0.9rem;
    font-weight: 700;
}

.app-tema-indice-panel__headline-sub {
    color: #6a7f79;
    font-size: 0.86rem;
    font-weight: 600;
}

.app-tema-indice-panel__close {
    position: absolute;
    top: 14px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(26, 92, 79, 0.12);
    border-radius: 12px;
    background: #ffffff;
    color: #0f5d52;
    font-size: 1.65rem;
    line-height: 1;
    box-shadow: 0 8px 20px rgba(17, 61, 53, 0.08);
    cursor: pointer;
}

.app-tema-indice-panel__body,
#listaIndice {
    height: calc(100% - 108px);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 14px 14px 18px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(26, 92, 79, 0.24) transparent;
}

#listaIndice::-webkit-scrollbar {
    width: 8px;
}

#listaIndice::-webkit-scrollbar-thumb {
    background: rgba(26, 92, 79, 0.22);
    border-radius: 999px;
}

.app-tema-indice-list,
.app-tema-indice-submenu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.app-tema-indice-submenu {
    margin: 0.15rem 0 0.55rem 1.05rem;
    padding-left: 0.6rem;
    border-left: 1px solid rgba(26, 92, 79, 0.12);
}

.app-tema-indice-item {
    display: flex;
    align-items: flex-start;
    gap: 0.72rem;
    width: 100%;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.app-tema-indice-item__chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    color: #0f5d52;
    font-size: 0.72rem;
    transition: transform 0.2s ease;
    margin-top: 0.22rem;
}

.app-tema-indice-item__chevron--ghost {
    opacity: 0;
}

.app-tema-indice-item__text {
    flex: 1 1 auto;
}

#listaIndice .item-h2 {
    margin-bottom: 0.45rem;
    padding: 0.9rem 0.95rem;
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid rgba(26, 92, 79, 0.1);
    color: #17352f;
    font-size: 1rem;
    font-weight: 700;
    box-shadow: 0 6px 16px rgba(17, 61, 53, 0.04);
}

#listaIndice .item-h3 {
    margin: 0.34rem 0;
    padding: 0.72rem 0.82rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(26, 92, 79, 0.08);
    color: #42615b;
    font-size: 0.92rem;
    line-height: 1.4;
}

#listaIndice .app-tema-indice-item:hover,
#listaIndice .app-tema-indice-item:focus {
    background: #f2faf7;
    border-color: rgba(26, 92, 79, 0.2);
}

.app-tema-indice-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(8, 34, 30, 0.34);
    backdrop-filter: blur(2px);
    z-index: 1040;
}

@media (max-width: 991px) {
    .app-tema-modal-header {
        padding: 6px 8px !important;
        gap: 8px;
    }

    .app-tema-modal-toggle {
        min-height: 46px;
        min-width: 166px;
        max-width: calc(100vw - 82px);
        padding: 8px 10px 8px 12px !important;
        border-radius: 14px !important;
        gap: 0.7rem;
    }

    .app-tema-modal-body {
        padding: 0.35rem 0.35rem 0.75rem !important;
    }

    .app-tema-lectura-content-wrap {
        padding: 0.95rem 0.9rem 1.05rem;
        border-radius: 16px;
        max-width: 100%;
    }

    .app-tema-indice-panel {
        width: min(392px, 92vw);
    }

    .app-tema-indice-panel__header {
        padding: 16px 16px 14px;
    }

    .app-tema-indice-panel__headline-main {
        font-size: 1.06rem;
    }

    .app-tema-modal-close {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px;
    }

    .app-tema-modal-close i {
        font-size: 34px !important;
    }

    .app-tema-modal-title-main {
        font-size: 1rem;
    }

    .app-tema-modal-title-sub {
        font-size: 0.68rem !important;
    }

    .app-tema-modal-toggle__arrow {
        width: 24px;
        height: 24px;
        min-width: 24px;
        font-size: 0.9rem;
    }

    .app-tema-indice-panel__body,
    #listaIndice {
        padding: 12px 12px 16px;
    }
}

/* ============================================================
   27. PREGÚNTAME — Header PRO y tarjeta de pregunta
   ============================================================ */

/* --- Wrapper sin doble línea --- */
.app-preguntas-section {
    /* La navbar ya tiene border-bottom — no se añade línea extra */
}

/* --- Header sticky (mismo patrón que Temas) --- */
.app-preguntas-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 6px 12px !important;
    min-height: 54px;
    background: linear-gradient(135deg, var(--bg-blanco) 0%, rgba(168,230,207,0.18) 100%);
    border-bottom: 1px solid var(--border-verde-light);
    box-shadow: var(--shadow-xs);
    position: relative;
    top: auto;
    z-index: 2;
}

.app-preguntas-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.app-preguntas-header-titles {
    min-width: 0;
}

.app-preguntas-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--verde-dark) !important;
    line-height: 1.2;
    margin: 0 !important;
    padding: 0 !important;
}

.app-preguntas-subtitle {
    font-size: 11px !important;
    color: var(--text-muted) !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-preguntas-info-btn,
.app-module-guide-btn {
    min-width: 118px !important;
    height: 48px !important;
    flex-shrink: 0;
    border-radius: 999px !important;
    border: 1px solid rgba(33, 108, 93, 0.26) !important;
    background: linear-gradient(180deg, #fbfffe 0%, #e4f3ed 100%) !important;
    color: var(--verde-dark) !important;
    box-shadow: 0 12px 24px rgba(28, 90, 77, 0.12), inset 0 1px 0 rgba(255,255,255,0.92);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
    display: inline-flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 0 16px 0 10px !important;
    position: relative;
    overflow: hidden;
    text-align: left;
}
.app-preguntas-info-btn:hover,
.app-module-guide-btn:hover {
    background: linear-gradient(180deg, #ffffff 0%, #d7efe7 100%) !important;
    border-color: rgba(21, 96, 81, 0.42) !important;
    box-shadow: 0 16px 30px rgba(28, 90, 77, 0.17), inset 0 1px 0 rgba(255,255,255,0.96);
    transform: translateY(-1px);
}
.app-preguntas-info-btn:focus-visible,
.app-module-guide-btn:focus-visible {
    outline: 0;
    border-color: rgba(20, 94, 79, 0.55) !important;
    box-shadow: 0 0 0 4px rgba(74, 164, 139, 0.18), 0 14px 26px rgba(28, 90, 77, 0.16);
}
.app-preguntas-info-btn__icon,
.app-module-guide-btn__icon {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #2b8470 0%, #1a5f51 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.24), 0 6px 12px rgba(20, 94, 79, 0.16);
    flex-shrink: 0;
}
.app-preguntas-info-btn__mark,
.app-module-guide-btn__mark {
    color: #ffffff;
    font-size: 18px;
    line-height: 1;
    font-weight: 800;
    transform: translateY(-0.5px);
}
.app-preguntas-info-btn__copy,
.app-module-guide-btn__copy {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    min-width: 0;
    line-height: 1;
}
.app-preguntas-info-btn__label,
.app-module-guide-btn__label {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.01em;
    color: var(--verde-dark);
}

/* --- Select de filtro por tema --- */
.app-preguntas-select-wrap {
    flex-shrink: 0;
}
.app-preguntas-select-wrap select {
    border: 1px solid var(--border-verde-light) !important;
    border-radius: var(--radius-sm) !important;
    background: var(--bg-blanco) !important;
    color: var(--verde-dark) !important;
    font-weight: 600;
    padding: 6px 10px !important;
    font-size: 13px;
    outline: none;
    box-shadow: var(--shadow-xs);
    transition: border-color 0.15s;
    max-width: 240px;
}
.app-preguntas-select-wrap select:focus {
    border-color: var(--verde-secundario) !important;
    box-shadow: 0 0 0 3px rgba(93,190,163,0.15) !important;
}

/* --- Barra de progreso en el bloque de preguntas (Bootstrap striped/animated) --- */
#divResultadosOpcionPreguntame .progress-bar-striped,
#divResultadosOpcionPreguntame .progress-bar-animated {
    background-color: var(--verde-dark) !important;
}

/* --- Botón SIGUIENTE PREGUNTA --- */
#botonSiguientePreguntita {
    background: var(--verde-dark) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-sm) !important;
    transition: background 0.15s, transform 0.1s;
}
#botonSiguientePreguntita:hover {
    background: var(--verde-darker) !important;
    transform: translateY(-2px);
}
#botonSiguientePreguntita span {
    color: #fff !important;
}

/* --- Justificación de respuesta correcta --- */
#divTextoJustificacionRespuestaAcertada .w3-pale-green {
    background: rgba(168,230,207,0.22) !important;
    border-left: 4px solid var(--verde-secundario) !important;
    border-radius: var(--radius-md) !important;
    padding: 12px 16px !important;
}

/* ============================================================
   28. EXAMEN — Header PRO, tabla histórico y vista de examen
   ============================================================ */

.app-examen-section {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

/* --- Header sticky (mismo patrón que Temas/Pregúntame) --- */
.app-examen-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 6px 12px !important;
    min-height: 54px;
    background: linear-gradient(135deg, var(--bg-blanco) 0%, rgba(168,230,207,0.18) 100%);
    border-bottom: 1px solid var(--border-verde-light);
    box-shadow: var(--shadow-xs);
    position: relative;
    top: auto;
    z-index: 2;
}

.app-examen-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.app-examen-header-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.app-examen-header-titles {
    min-width: 0;
}

.app-examen-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--verde-dark) !important;
    line-height: 1.2;
    margin: 0 !important;
    padding: 0 !important;
}

.app-examen-subtitle {
    font-size: 11px !important;
    color: var(--text-muted) !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-examen-icon-wrap {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-verde-light);
    background: var(--bg-blanco);
    color: var(--verde-dark);
}
.app-examen-info-btn {
    width: 44px !important;
    height: 44px !important;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm) !important;
    border: 1px solid var(--border-verde-light) !important;
    background: rgba(168, 230, 207, 0.25) !important;
    color: var(--verde-dark) !important;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.app-examen-info-btn:hover {
    background: rgba(168,230,207,0.5) !important;
    border-color: var(--verde-secundario) !important;
    transform: translateY(-1px);
}

/* --- Timer countdown --- */
.app-examen-timer {
    color: var(--verde-dark) !important;
    font-variant-numeric: tabular-nums;
    min-width: 60px;
    text-align: center;
}

/* --- Botones de control (COMENZAR / PARAR / RANKING) --- */
.app-examen-action-btn {
    width: 44px !important;
    height: 44px !important;
    border-radius: var(--radius-sm) !important;
    border: 1px solid var(--verde-dark) !important;
    background: var(--verde-dark) !important;
    color: #fff !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, transform 0.1s;
    cursor: pointer;
}
.app-examen-action-btn:hover:not(:disabled) {
    background: var(--verde-darker) !important;
    transform: translateY(-1px);
}
.app-examen-action-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.app-examen-stop-btn {
    background: #c0392b !important;
    border-color: #c0392b !important;
}
.app-examen-stop-btn:hover:not(:disabled) {
    background: #a93226 !important;
}
.app-examen-return-btn {
    width: auto !important;
    min-width: 108px;
    padding: 0 14px !important;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    background: #eef8f3 !important;
    border-color: #9fd3be !important;
    color: var(--verde-dark) !important;
}
.app-examen-return-btn:hover:not(:disabled) {
    background: #dff2e8 !important;
}

/* --- Tabla MIS EXAMENES --- */
#cabeceraTablaExamenesUsuario th {
    background: var(--verde-dark) !important;
    color: #fff !important;
    font-weight: 700;
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 2px solid var(--verde-secundario) !important;
}
.botonClassVerExamenTerminaoUsuario,
.botonClassRehacerExamenUsuario {
    border-radius: var(--radius-sm) !important;
    border: 1px solid var(--border-verde-light) !important;
    background: var(--bg-blanco) !important;
    color: var(--verde-dark) !important;
    transition: background 0.12s, transform 0.1s;
}
.botonClassVerExamenTerminaoUsuario:hover,
.botonClassRehacerExamenUsuario:hover {
    background: rgba(168,230,207,0.2) !important;
    border-color: var(--verde-secundario) !important;
    transform: translateY(-1px);
}

/* --- Vista de examen en curso (03Examen01) --- */
/* Cabecera del examen activo */
#divConElExamen .w3-grey.w3-text-white {
    background: var(--verde-dark) !important;
    color: #fff !important;
    border-radius: var(--radius-md) !important;
}
#divConElExamen .w3-grey.w3-text-white .w3-text-indigo {
    color: var(--verde-primario) !important;
}

/* Contenedor de la pregunta activa */
#divCuerpoPreguntaActualDeExamen .w3-border {
    border-color: var(--border-verde-light) !important;
    border-radius: var(--radius-md) !important;
}

/* Botones A/B/C/D del examen */
.botonClassRespuestaExamenPregunta {
    border-radius: var(--radius-sm) !important;
    border: 1px solid var(--border-verde-light) !important;
    background: var(--bg-blanco) !important;
    transition: background 0.12s, border-color 0.12s, transform 0.1s;
    width: 50px !important;
    height: 50px !important;
}
.botonClassRespuestaExamenPregunta:hover {
    background: var(--verde-dark) !important;
    color: #fff !important;
    border-color: var(--verde-dark) !important;
    transform: scale(1.06);
}
.botonClassRespuestaExamenPregunta span {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: var(--verde-dark);
}
.botonClassRespuestaExamenPregunta:hover span {
    color: #fff !important;
}

/* Píldoras de navegación de preguntas */
.botonClassPregExamenActualUsuario {
    border-radius: var(--radius-sm) !important;
    border: 1px solid var(--border-verde-light) !important;
    background: var(--bg-blanco) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    transition: background 0.12s;
}
.botonClassPregExamenActualUsuario.w3-black {
    background: var(--verde-dark) !important;
    color: #fff !important;
    border-color: var(--verde-dark) !important;
}
.botonClassPregExamenActualUsuario.w3-border-black {
    border-color: var(--verde-secundario) !important;
    background: rgba(168,230,207,0.18) !important;
}
.botonClassPregExamenActualUsuario:hover {
    background: rgba(168,230,207,0.25) !important;
}

/* ============================================================
   29. ESTADÍSTICAS PRO — Header, tabs, tablas Rondas y Temas
   ============================================================ */

/* --- Wrapper sin doble línea --- */
.app-stats-section {
    background: var(--bg-base);
}

/* --- Header sticky (mismo patrón que resto de secciones) --- */
.app-stats-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 6px 12px !important;
    min-height: 54px;
    background: linear-gradient(135deg, var(--bg-blanco) 0%, rgba(168,230,207,0.18) 100%);
    border-bottom: 1px solid var(--border-verde-light);
    box-shadow: var(--shadow-xs);
    position: relative;
    top: auto;
    z-index: 2;
}

.app-stats-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.app-stats-header-titles {
    min-width: 0;
}

.app-stats-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--verde-dark) !important;
    line-height: 1.2;
    margin: 0 !important;
    padding: 0 !important;
}

.app-stats-subtitle {
    font-size: 11px !important;
    color: var(--text-muted) !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Badge de vista activa --- */
.app-stats-view-badge {
    display: inline-block;
    background: rgba(168,230,207,0.3);
    color: var(--verde-dark) !important;
    border: 1px solid var(--border-verde-light);
    border-radius: 20px;
    padding: 2px 10px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

/* --- Tabs de vista (Rondas / Temas) --- */
.app-stats-tabs {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    align-items: center;
    flex-wrap: wrap;
}

.app-stats-tab-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px !important;
    border-radius: var(--radius-sm) !important;
    border: 1px solid var(--border-verde-light) !important;
    background: var(--bg-blanco) !important;
    color: var(--verde-terciario) !important;
    font-weight: 600;
    font-size: 12px !important;
    cursor: pointer;
    transition: background 0.18s, color 0.18s, border-color 0.18s;
    white-space: nowrap;
    box-shadow: var(--shadow-xs);
}
.app-stats-tab-btn:hover {
    border-color: var(--verde-secundario) !important;
    color: var(--verde-dark) !important;
}
/* .app-stats-tab-active = tab activo (JS lo añade con addClass) */
.app-stats-tab-btn.app-stats-tab-active {
    background: var(--verde-dark) !important;
    color: #fff !important;
    border-color: var(--verde-dark) !important;
    font-weight: 700 !important;
    cursor: pointer;
}
/* Ocultar badge "POR RONDAS" / "POR TEMAS" */
#estadisticasPorTipoClasificacion {
    display: none !important;
}

/* -------------------------------------------------------
   TABLA DE RONDAS
   ------------------------------------------------------- */
#divTablaEstadisticasRondas {
    border-radius: var(--radius-md) !important;
    overflow: hidden;
    border: 1px solid var(--border-verde-light) !important;
    box-shadow: var(--shadow-xs);
    margin: 12px 8px !important;
}
#cabeceraTablaRondas th {
    background: var(--verde-dark) !important;
    color: #fff !important;
    font-weight: 700;
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-color: rgba(255,255,255,0.15) !important;
    padding: 8px 4px !important;
}
/* Fila de rondas */
#putoCuerpoTablaRondicasDeLosCojones tr {
    border-bottom: 1px solid var(--border-verde-light) !important;
    transition: background 0.1s;
}
#putoCuerpoTablaRondicasDeLosCojones tr:hover {
    background: rgba(168,230,207,0.08) !important;
}
/* Ronda activa (pale-blue → brand light) */
#putoCuerpoTablaRondicasDeLosCojones tr.w3-pale-blue {
    background: rgba(168,230,207,0.18) !important;
    border-left: 3px solid var(--verde-secundario) !important;
}
/* Fila total (última) */
#putoCuerpoTablaRondicasDeLosCojones tr:last-child {
    background: var(--verde-dark) !important;
    border-top: 2px solid var(--verde-secundario) !important;
}
#putoCuerpoTablaRondicasDeLosCojones tr:last-child td {
    color: #fff !important;
    font-weight: 700 !important;
}
#putoCuerpoTablaRondicasDeLosCojones tr:last-child td.w3-text-green {
    color: var(--verde-primario) !important;
}
#putoCuerpoTablaRondicasDeLosCojones tr:last-child td.w3-text-red {
    color: #f87171 !important;
}

/* Botones de ordenar columnas */
.ordenarPorEstaColumnaTablaRondas {
    width: 18px !important;
    height: 18px !important;
    border-radius: 3px !important;
    border: 1px solid rgba(255,255,255,0.3) !important;
    background: rgba(255,255,255,0.1) !important;
    color: #fff !important;
    padding: 0 !important;
    transition: background 0.12s;
}
.ordenarPorEstaColumnaTablaRondas:hover {
    background: rgba(255,255,255,0.25) !important;
}
.ordenarPorEstaColumnaTablaRondas:disabled {
    background: rgba(255,255,255,0.4) !important;
    opacity: 1 !important;
}

/* Botones ver preguntas de ronda */
.classBotonVerPreguntasEstadisticasRondaSeleccionada {
    border-radius: var(--radius-sm) !important;
    border: 1px solid var(--border-verde-light) !important;
    background: var(--bg-blanco) !important;
    font-weight: 700 !important;
    transition: background 0.12s, transform 0.1s;
    min-width: 36px !important;
    height: 36px !important;
}
.classBotonVerPreguntasEstadisticasRondaSeleccionada.w3-pale-green {
    background: rgba(168,230,207,0.3) !important;
    border-color: var(--verde-secundario) !important;
    color: var(--verde-dark) !important;
}
.classBotonVerPreguntasEstadisticasRondaSeleccionada.w3-pale-red {
    background: rgba(254,202,202,0.4) !important;
    border-color: #f87171 !important;
    color: #991b1b !important;
}
.classBotonVerPreguntasEstadisticasRondaSeleccionada:hover {
    transform: scale(1.06) !important;
    box-shadow: var(--shadow-xs) !important;
}

/* Botón borrar ronda */
.classBotonBorrarRondaSeleccionada {
    width: 28px !important;
    height: 28px !important;
    border-radius: var(--radius-sm) !important;
    border: 1px solid var(--border-verde-light) !important;
    background: var(--bg-blanco) !important;
    color: var(--text-muted) !important;
    transition: background 0.12s, color 0.12s;
}
.classBotonBorrarRondaSeleccionada:hover {
    background: #fee2e2 !important;
    color: #dc2626 !important;
    border-color: #f87171 !important;
}

/* -------------------------------------------------------
   TABLA POR TEMAS
   ------------------------------------------------------- */
#divParaVerResultadosEstadisticasPorTemas > div {
    margin: 8px !important;
}
#divParaVerResultadosEstadisticasPorTemas .w3-border.w3-round-large.w3-border-black {
    border-color: var(--border-verde-light) !important;
    border-radius: var(--radius-md) !important;
    overflow: hidden;
    box-shadow: var(--shadow-xs);
}
#cabeceraTablaPorTemas th {
    background: var(--verde-dark) !important;
    color: #fff !important;
    font-weight: 700;
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 8px 6px !important;
    border-color: rgba(255,255,255,0.12) !important;
}
/* Celda de número de tema */
#cuerpoTablaPorTemas td.w3-border-right.w3-border-blue {
    border-color: var(--border-verde-light) !important;
    background: rgba(168,230,207,0.06) !important;
}
/* Celda "Tema N" */
#cuerpoTablaPorTemas td p.letra2 {
    font-weight: 800 !important;
    color: var(--verde-dark) !important;
}
/* Celdas aciertos / fallos dentro de la tabla por temas */
#cuerpoTablaPorTemas td.w3-pale-green {
    background: rgba(168,230,207,0.25) !important;
    color: var(--verde-dark) !important;
    font-weight: 700 !important;
}
#cuerpoTablaPorTemas td.w3-pale-red {
    background: rgba(254,202,202,0.3) !important;
    color: #991b1b !important;
    font-weight: 700 !important;
}
/* Fila de totales (borde top/bottom) */
#cuerpoTablaPorTemas tr.w3-topbar.w3-bottombar {
    border-top: 2px solid var(--verde-dark) !important;
    border-bottom: 2px solid var(--verde-dark) !important;
    background: rgba(168,230,207,0.1) !important;
}
#cuerpoTablaPorTemas tr.w3-topbar.w3-bottombar td p {
    color: var(--verde-dark) !important;
    font-weight: 800 !important;
}
/* Filas hover */
#cuerpoTablaPorTemas tr:hover {
    background: rgba(168,230,207,0.07) !important;
}
/* Barra de progreso por tema en la tabla de temas */
#cuerpoTablaPorTemas .progress-bar-striped,
#cuerpoTablaPorTemas .progress-bar-animated {
    background-color: var(--verde-dark) !important;
}
/* Leyenda de colores (escala de nota) */
#divEscalaColoresEstadPorTemas {
    border-radius: var(--radius-md) !important;
    overflow: hidden;
    border: 1px solid var(--border-verde-light) !important;
    box-shadow: var(--shadow-xs);
    margin-bottom: 8px !important;
}
#divEscalaColoresEstadPorTemas .w3-table td {
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 4px 2px !important;
    text-align: center !important;
}

/* ==============================================
   Section 30 — Estadísticas PRO: KPI Panel, Mini Bar, Trend
   ============================================== */

.app-stats-section {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

/* KPI Panel */
.app-stats-kpi-panel {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    background: linear-gradient(135deg, var(--verde-dark) 0%, var(--verde-darker) 100%);
    border-bottom: 1px solid rgba(255,255,255,0.12);
    padding: 12px 16px !important;
}
.app-stats-kpi-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-width: 70px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: var(--radius-sm);
    padding: 8px 6px 6px;
    gap: 2px;
}
.app-stats-kpi-icon {
    color: var(--verde-primario);
    font-size: 14px;
    margin-bottom: 2px;
    opacity: 0.85;
}
.app-stats-kpi-value {
    color: #fff;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.3px;
}
.app-stats-kpi-label {
    color: rgba(255,255,255,0.65);
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 1px;
}
.app-stats-kpi-nivel .app-stats-kpi-value {
    font-size: 13px;
    color: var(--verde-primario);
}

/* Mini score bar in rounds table */
.app-stats-score-cell {
    min-width: 72px;
}
.app-stats-score-top {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
}
.app-stats-score-bar-wrap {
    width: 100%;
    height: 4px;
    background: rgba(0,0,0,0.1);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 3px;
}
.app-stats-score-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--verde-secundario), var(--verde-dark));
    border-radius: 2px;
    transition: width 0.4s ease;
    min-width: 2px;
}

/* Trend indicators */
.app-stats-trend-up {
    color: #16a34a;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}
.app-stats-trend-down {
    color: #dc2626;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}
.app-stats-trend-eq {
    color: #6b7280;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
}

/* ==============================================
   Section 31 — Estadísticas PRO: Gráfico evolución
   ============================================== */
.app-stats-chart-wrap {
    background: #fff;
    border-bottom: 1px solid var(--border-verde-light);
    padding-bottom: 4px;
}
.app-stats-chart-hdr {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.app-stats-chart-title {
    color: var(--verde-dark);
    font-weight: 700;
}
.app-stats-chart-subtitle {
    color: #9ca3af;
    font-weight: 400;
}
.app-stats-chart-wrap canvas {
    display: block;
    width: 100% !important;
    height: 130px !important;
}
.app-stats-focus-card {
    background: #fbfefd;
    border: 1px solid var(--border-verde-light);
    border-radius: 16px;
    padding: 14px;
    box-shadow: var(--shadow-xs);
}
.app-stats-focus-card-ok {
    background: linear-gradient(180deg, rgba(240,250,246,0.94) 0%, #ffffff 100%);
}
.app-stats-focus-card-ko {
    background: linear-gradient(180deg, rgba(255,245,245,0.96) 0%, #ffffff 100%);
    border-color: var(--estado-incorrecto-border);
}
.app-stats-focus-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.app-stats-focus-kicker {
    margin: 0;
    color: var(--text-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-size: 11px;
}
.app-stats-focus-title {
    margin: 4px 0 0;
    color: var(--verde-dark);
    font-weight: 800;
    line-height: 1.15;
}
.app-stats-focus-state {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}
.app-stats-focus-card-ok .app-stats-focus-state {
    color: var(--estado-correcto-text);
    background: var(--estado-correcto-chip-bg);
}
.app-stats-focus-card-ko .app-stats-focus-state {
    color: var(--estado-incorrecto-text);
    background: rgba(254,226,226,0.95);
}
.app-stats-focus-body {
    display: flex;
    align-items: flex-end;
    gap: 18px;
    margin-top: 14px;
}
.app-stats-focus-score {
    min-width: 90px;
    color: var(--verde-dark);
    font-size: 46px;
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -1px;
}
.app-stats-focus-copy {
    flex: 1;
}
.app-stats-focus-meta {
    margin: 0;
    color: var(--text-slate);
    font-size: 13px;
    line-height: 1.35;
}
.app-stats-focus-bar-wrap {
    width: 100%;
    height: 10px;
    margin-top: 10px;
    background: rgba(26,92,79,0.10);
    border-radius: 999px;
    overflow: hidden;
}
.app-stats-focus-bar {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--verde-secundario), var(--verde-dark));
}
.app-stats-focus-card-ko .app-stats-focus-bar {
    background: linear-gradient(90deg, #e78b8b, #c45c5c);
}
.app-stats-focus-foot {
    margin: 10px 0 0;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
}
.app-stats-recent-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
}
.app-stats-recent-card {
    background: #fbfefd;
    border: 1px solid var(--border-verde-light);
    border-radius: 14px;
    padding: 12px;
    box-shadow: var(--shadow-xs);
}
.app-stats-recent-card-ok {
    background: linear-gradient(180deg, rgba(240,250,246,0.92) 0%, #ffffff 100%);
}
.app-stats-recent-card-ko {
    background: linear-gradient(180deg, rgba(255,245,245,0.94) 0%, #ffffff 100%);
    border-color: var(--estado-incorrecto-border);
}
.app-stats-recent-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.app-stats-recent-label {
    color: var(--verde-dark);
    font-weight: 700;
    line-height: 1.2;
}
.app-stats-recent-state {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}
.app-stats-recent-card-ok .app-stats-recent-state {
    color: var(--estado-correcto-text);
    background: var(--estado-correcto-chip-bg);
}
.app-stats-recent-card-ko .app-stats-recent-state {
    color: var(--estado-incorrecto-text);
    background: rgba(254,226,226,0.95);
}
.app-stats-recent-score {
    margin-top: 10px;
    color: var(--verde-dark);
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.8px;
}
.app-stats-recent-meta {
    margin-top: 8px;
    color: var(--text-slate);
    font-size: 12px;
    line-height: 1.35;
}
.app-stats-recent-bar-wrap {
    width: 100%;
    height: 8px;
    margin-top: 10px;
    background: rgba(26,92,79,0.10);
    border-radius: 999px;
    overflow: hidden;
}
.app-stats-recent-bar {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--verde-secundario), var(--verde-dark));
}
.app-stats-recent-card-ko .app-stats-recent-bar {
    background: linear-gradient(90deg, #e78b8b, #c45c5c);
}
.app-stats-recent-foot {
    margin-top: 8px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
}
.app-stats-empty-recent {
    padding: 16px;
    color: var(--text-muted);
}
.app-stats-row-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.app-stats-row-action {
    width: 32px;
    height: 32px;
    border: 1px solid var(--border-dark-medium);
    border-radius: 10px;
    background: #fff;
    color: var(--verde-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: var(--transition-fast);
}
.app-stats-row-action:hover {
    background: var(--bg-footer);
    border-color: var(--verde-secundario);
    color: var(--verde-darker);
}

/* Badge "actual" en tabla de rondas */
.app-stats-ronda-actual-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--verde-dark);
    background: rgba(168,230,207,0.5);
    border: 1px solid var(--verde-secundario);
    border-radius: 4px;
    padding: 1px 5px;
    vertical-align: middle;
    margin-left: 4px;
}

/* ==============================================
   Section 32 — Glosario PRO
   ============================================== */

/* Outer wrapper — sin doble línea */
.app-glosario-section {
    background: var(--bg-blanco);
}

/* ---- Header ---- */
.app-glosario-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 6px 12px !important;
    min-height: 54px;
    background: linear-gradient(135deg, var(--bg-blanco) 0%, rgba(168,230,207,0.18) 100%);
    position: relative;
    top: auto;
    z-index: 2;
    border-bottom: 1px solid var(--border-verde-light);
    box-shadow: var(--shadow-xs);
}
.app-glosario-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}
.app-glosario-info-btn {
    width: 34px !important;
    height: 34px !important;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm) !important;
    border: 1px solid var(--border-verde-light) !important;
    background: rgba(168, 230, 207, 0.25) !important;
    color: var(--verde-dark) !important;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.app-glosario-info-btn:hover {
    background: rgba(168,230,207,0.5) !important;
    border-color: var(--verde-secundario) !important;
    transform: translateY(-1px);
}
.app-glosario-header-titles {
    min-width: 0;
}
.app-glosario-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--verde-dark) !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2;
}
.app-glosario-subtitle {
    font-size: 11px !important;
    color: var(--text-muted) !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- Search bar ---- */
.app-glosario-search-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 220px;
    max-width: 420px;
    justify-content: flex-end;
}
.app-glosario-search-input {
    flex: 1;
    height: 40px;
    padding: 0 14px !important;
    border-radius: var(--radius-sm) !important;
    border: 1.5px solid var(--border-verde-light) !important;
    background: #fff !important;
    color: var(--verde-dark) !important;
    outline: none !important;
    box-shadow: none !important;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.app-glosario-search-input::placeholder {
    color: var(--text-muted) !important;
}
.app-glosario-search-input:focus {
    border-color: var(--verde-secundario) !important;
    box-shadow: 0 0 0 2px rgba(93,190,163,0.15) !important;
}
.app-glosario-search-btn,
.app-glosario-clear-btn {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm) !important;
    border: 1.5px solid var(--border-verde-light) !important;
    background: #fff !important;
    color: var(--verde-dark) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    padding: 0 !important;
}
.app-glosario-search-btn:hover:not(:disabled),
.app-glosario-clear-btn:hover {
    background: rgba(26,92,79,0.08) !important;
    border-color: var(--verde-secundario) !important;
}
.app-glosario-search-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.app-glosario-guide {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    border-bottom: 1px solid var(--border-verde-light);
    background: rgba(255,255,255,0.92);
}

.app-glosario-guide-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid var(--border-verde-light);
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(245,253,251,0.92));
    box-shadow: var(--shadow-xs);
}

.app-glosario-guide-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid var(--border-verde-light);
    color: var(--verde-dark);
}

.app-glosario-guide-icon .fa {
    font-size: 16px;
}

.app-glosario-guide-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 1px;
}

.app-glosario-guide-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.1;
    color: var(--verde-dark) !important;
}

.app-glosario-guide-desc {
    font-size: 12px !important;
    line-height: 1.2;
    color: #5d6e68 !important;
}

/* ---- Responsive mobile-first ---- */
@media (max-width: 576px) {
    .app-glosario-header {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .app-glosario-header-left {
        justify-content: flex-start;
        gap: 10px;
    }
    .app-glosario-search-wrap {
        min-width: 0;
        max-width: 100%;
        width: 100%;
        flex: none;
        justify-content: flex-start;
    }
    .app-glosario-search-input {
        height: 44px;
        font-size: 15px !important;
    }
    .app-glosario-search-btn,
    .app-glosario-clear-btn {
        width: 44px;
        height: 44px;
    }

    .app-glosario-guide {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 2px;
    }

    .app-glosario-guide-item {
        padding: 8px 9px;
        min-width: 220px;
        flex: 0 0 220px;
        scroll-snap-align: start;
    }

    .app-glosario-guide-desc {
        font-size: 11px !important;
    }

    .app-glosario-guide::-webkit-scrollbar {
        height: 6px;
    }

    .app-glosario-guide::-webkit-scrollbar-thumb {
        background: rgba(26,92,79,0.18);
        border-radius: 999px;
    }
}

/* ---- Table wrapper ---- */
.app-glosario-table-outer {
    padding: 0;
    margin: 0;
}
.app-glosario-table-wrap {
    overflow-x: auto;
    border-radius: 0;
}
.app-glosario-table {
    border-collapse: collapse !important;
    width: 100%;
}

/* ---- Thead ---- */
.app-glosario-thead {
    background: var(--verde-dark) !important;
}
.app-glosario-th {
    background: var(--verde-dark) !important;
    color: #fff !important;
    font-weight: 700 !important;
    border: none !important;
    border-bottom: 2px solid var(--verde-secundario) !important;
    padding: 6px 4px !important;
    white-space: nowrap;
}
.app-glosario-th-term {
    border-right: 1px solid rgba(255,255,255,0.15) !important;
}
.app-glosario-th-tema {
    border-left: 1px solid rgba(255,255,255,0.15) !important;
}
.app-glosario-sort-icon {
    color: rgba(255,255,255,0.8) !important;
}

/* ---- Select en thead ---- */
#selectTemasGlosario {
    background: rgba(255,255,255,0.12) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
    border-radius: 4px !important;
    font-size: 10px !important;
    padding: 2px 4px !important;
    height: 22px !important;
    width: 100% !important;
}
#selectTemasGlosario option {
    background: var(--verde-dark);
    color: #fff;
}

/* ---- Tbody rows ---- */
.app-glosario-row {
    border-bottom: 1px solid var(--border-verde-light) !important;
    transition: background 0.12s;
}
.app-glosario-row:hover {
    background: rgba(168,230,207,0.12) !important;
}
.app-glosario-row:nth-child(even) {
    background: rgba(168,230,207,0.04);
}
.app-glosario-td-term {
    padding: 8px 10px !important;
    border-right: 2px solid var(--border-verde-light) !important;
    font-weight: 600 !important;
    color: var(--verde-dark) !important;
    width: 160px;
}
.app-glosario-td-expl {
    padding: 8px 12px !important;
    color: #374151 !important;
    line-height: 1.4;
}
.app-glosario-td-tema {
    padding: 8px 6px !important;
    border-left: 2px solid var(--border-verde-light) !important;
    color: var(--verde-dark) !important;
    font-weight: 700 !important;
    width: 70px;
    text-align: center !important;
}

/* ---- Navegador A-Z + contador ---- */
.app-glosario-az-wrap {
    background: #f8fffe;
    border-bottom: 1px solid var(--border-verde-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px;
}
.app-glosario-az-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    flex: 1;
}
.app-glosario-az-btn {
    height: 28px;
    min-width: 28px;
    padding: 0 7px;
    border-radius: 5px;
    border: 1px solid var(--border-verde-light);
    background: #fff;
    color: var(--verde-dark);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
    line-height: 28px;
}
.app-glosario-az-btn:hover {
    background: rgba(26,92,79,0.08);
    border-color: var(--verde-secundario);
}
.app-glosario-az-btn.app-glosario-az-active {
    background: var(--verde-dark) !important;
    color: #fff !important;
    border-color: var(--verde-dark) !important;
}
.app-glosario-contador {
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
    font-weight: 600;
    min-width: 80px;
    text-align: right;
}
@media (max-width: 576px) {
    .app-glosario-az-wrap {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    .app-glosario-az-btn {
        height: 32px;
        min-width: 32px;
        font-size: 12px;
        line-height: 32px;
    }
    .app-glosario-contador {
        text-align: left;
        padding-bottom: 2px;
    }
}

/* ==============================================
   Section 33 — Glosario Modo Flash
   ============================================== */

/* Botón activar Flash (en barra A-Z) */
.app-glosario-az-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.app-glosario-flash-toggle-btn {
    height: 28px;
    padding: 0 10px;
    border-radius: 5px;
    border: 1.5px solid var(--verde-dark);
    background: var(--verde-dark);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: background 0.15s;
    flex-shrink: 0;
}
.app-glosario-flash-toggle-btn:hover {
    background: var(--verde-darker);
    border-color: var(--verde-darker);
}

/* Contenedor modo Flash */
.app-glosario-flash-wrap {
    display: none;
    flex-direction: column;
    align-items: center;
    padding: 16px 12px 24px;
    background: #f8fffe;
    min-height: 380px;
    border-top: 1px solid var(--border-verde-light);
}

/* Barra superior: contador + salir */
.app-glosario-flash-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 520px;
    margin-bottom: 10px;
}
.app-glosario-flash-salir-btn {
    border: 1.5px solid var(--border-verde-light);
    background: #fff;
    color: var(--verde-dark);
    border-radius: 5px;
    padding: 5px 14px;
    cursor: pointer;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: background 0.12s;
}
.app-glosario-flash-salir-btn:hover {
    background: rgba(26,92,79,0.07);
}

/* Barra de progreso */
.app-glosario-flash-progress-wrap {
    width: 100%;
    max-width: 520px;
    height: 5px;
    background: var(--border-verde-light);
    border-radius: 3px;
    margin-bottom: 18px;
}
.app-glosario-flash-progress-bar {
    height: 5px;
    background: var(--verde-secundario);
    border-radius: 3px;
    transition: width 0.35s ease;
}

/* Escena 3D — altura dinámica por contenido */
.app-glosario-flash-card-scene {
    width: 100%;
    max-width: 520px;
    perspective: 1000px;
    cursor: pointer;
    margin-bottom: 0;
    -webkit-tap-highlight-color: transparent;
}
.app-glosario-flash-card {
    width: 100%;
    display: grid;
    transform-style: preserve-3d;
    transition: transform 0.45s ease;
    border-radius: var(--radius-md);
}
.app-glosario-flash-card.flipped {
    transform: rotateY(180deg);
}
.app-glosario-flash-front,
.app-glosario-flash-back {
    grid-area: 1 / 1;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 24px;
    min-height: 180px;
}
.app-glosario-flash-front {
    background: linear-gradient(135deg, var(--verde-dark) 0%, var(--verde-darker) 100%);
    color: #fff;
    box-shadow: 0 4px 20px rgba(26,92,79,0.25);
    gap: 10px;
    text-align: center;
}
.app-glosario-flash-label {
    color: rgba(255,255,255,0.50);
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.app-glosario-flash-term {
    color: #fff;
    text-align: center;
    line-height: 1.2;
}
.app-glosario-flash-hint {
    color: rgba(255,255,255,0.45);
    text-align: center;
    margin-top: 6px;
}
.app-glosario-flash-back {
    background: #fff;
    border: 2px solid var(--border-verde-light);
    transform: rotateY(180deg);
    align-items: flex-start;
    justify-content: flex-start;
    box-shadow: 0 4px 18px rgba(26,92,79,0.10);
    gap: 10px;
}
.app-glosario-flash-back-tema {
    color: var(--verde-dark);
    font-weight: 700;
    background: rgba(168,230,207,0.30);
    border-radius: 4px;
    padding: 2px 10px;
    align-self: flex-start;
    flex-shrink: 0;
}
.app-glosario-flash-expl {
    color: #374151;
    line-height: 1.55;
    width: 100%;
}

/* Controles navegación — encima de la tarjeta */
.app-glosario-flash-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 520px;
    gap: 10px;
    margin-bottom: 12px;
}
.app-glosario-flash-nav-btn {
    height: 44px;
    padding: 0 20px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border-verde-light);
    background: #fff;
    color: var(--verde-dark);
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background 0.12s;
    font-size: 13px;
}
.app-glosario-flash-nav-btn:hover:not(:disabled) {
    background: rgba(26,92,79,0.07);
    border-color: var(--verde-secundario);
}
.app-glosario-flash-nav-btn:disabled {
    opacity: 0.28;
    cursor: default;
}
.app-flash-siguiente {
    background: var(--verde-dark) !important;
    color: #fff !important;
    border-color: var(--verde-dark) !important;
}
.app-flash-siguiente:hover:not(:disabled) {
    background: var(--verde-darker) !important;
}

/* Mobile */
@media (max-width: 576px) {
    .app-glosario-flash-nav-btn {
        flex: 1;
        justify-content: center;
    }
    .app-glosario-flash-toggle-btn {
        height: 32px;
    }
}

/* ================================================================
   SECTION 34 — Pregúntame PRO: Panel inferior, post-respuesta, ayuda
   ================================================================ */

/* --- Bottom panel wrapper --- */
.app-preguntas-bottom-panel {
    background: #f9fcfb;
    border: 1px solid rgba(14, 92, 78, 0.12);
    border-top: 1px solid rgba(14, 92, 78, 0.22);
    padding: 12px 10px 8px;
    margin-top: 0;
    border-radius: 16px 16px 0 0;
    box-shadow: none;
}

#divBotoncicosPreguntaMe {
    margin-top: clamp(46px, 5vw, 72px) !important;
}

/* --- Shared panel header --- */
.app-preguntas-panel-header {
    background: var(--verde-dark);
    color: #fff;
    border-radius: 10px;
    padding: 7px 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-align: center;
    margin-bottom: 8px;
    font-size: 13px;
}

/* --- Shared panel box --- */
.app-preguntas-panel-box {
    background: #ffffff;
    border: 1px solid rgba(118, 190, 176, 0.34);
    border-radius: 14px;
    padding: 10px 12px 12px;
    box-shadow: none;
}
.app-preguntas-panel-box--evolucion {
    padding: 8px 10px 10px;
    background: #ffffff;
    border-color: rgba(118, 190, 176, 0.22);
}
.app-preguntas-panel-box--ronda,
.app-preguntas-panel-box--acciones,
.app-preguntas-panel-box--info {
    min-height: 100%;
}

.app-preguntas-panel-box--evolucion .app-preguntas-panel-header {
    background: transparent;
    color: var(--verde-dark);
    padding: 0;
    margin-bottom: 6px;
    font-size: 11px;
    letter-spacing: 0.08em;
}

.app-preguntas-support {
    margin-top: 0;
}
.app-preguntas-support-summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    padding: 8px 15px;
    border: 1px solid rgba(14, 92, 78, 0.16);
    border-radius: 999px;
    background: #ffffff;
    color: var(--verde-dark);
    cursor: pointer;
    list-style: none;
    box-shadow: 0 4px 14px rgba(20, 78, 66, 0.06);
}
.app-preguntas-support-summary::-webkit-details-marker {
    display: none;
}
.app-preguntas-support-summary::after {
    content: "\f078";
    font-family: FontAwesome;
    font-size: 11px;
    opacity: 0.72;
}
.app-preguntas-support[open] .app-preguntas-support-summary::after {
    content: "\f077";
}
.app-preguntas-support-summary-title {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.app-preguntas-support-summary-meta {
    font-size: 11px;
    color: var(--text-muted);
}
.app-preguntas-support-body {
    margin-top: 10px;
}
.app-preguntas-support[open] #filaBotoncicosAccionesPreguntas {
    margin-top: 10px !important;
}

/* --- EVOLUCIÓN --- */
.app-preguntas-evolucion-summary {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0 0 6px;
}
.app-preguntas-evolucion-stat {
    min-width: 110px;
    padding: 6px 10px;
    border-radius: 12px;
    border: 1px solid rgba(118, 190, 176, 0.28);
    background: #f8fcfa;
    text-align: center;
}
.app-preguntas-evolucion-stat--score {
    min-width: 170px;
}
.app-preguntas-evolucion-stat-label {
    display: block;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.app-preguntas-evolucion-stat-value {
    display: block;
    color: var(--verde-darker);
    font-size: clamp(18px, 2vw, 22px);
    line-height: 1;
    font-weight: 800;
}
.app-preguntas-evolucion-stat-value--score {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
}
.app-preguntas-evolucion-shell {
    padding: 0;
}
.app-preguntas-evolucion-strip {
    display: block;
}
.app-preguntas-evolucion-score-card,
.app-preguntas-evolucion-score {
    display: none;
}
.app-preguntas-evolucion-bar-card {
    border-radius: 12px;
    border: 1px solid rgba(118, 190, 176, 0.28);
    background: #f8fcfa;
    padding: 8px 10px 10px;
}
.app-preguntas-evolucion-bar-wrap {
    width: 100%;
}
.app-preguntas-evolucion-bar-top {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}
.app-preguntas-evolucion-score-ok {
    color: var(--estado-correcto-border-strong);
}
.app-preguntas-evolucion-score-sep {
    color: #9fb8b1;
}
.app-preguntas-evolucion-score-bad {
    color: var(--estado-incorrecto-border-strong);
}
.app-preguntas-evolucion-bar-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--verde-darker);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.app-preguntas-evolucion-bar-value {
    font-size: 12px;
    font-weight: 800;
    color: var(--verde-darker);
}

/* --- RONDA progress bar --- */
.app-preguntas-ronda-progress {
    height: 5px;
    background: #deefe9;
    border-radius: 999px;
    margin: 0 0 12px;
    overflow: hidden;
}
.app-preguntas-ronda-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #48baa3 0%, var(--verde-secundario) 100%);
    border-radius: 999px;
    transition: width 0.5s ease;
}

/* --- RONDA KPI wrappers --- */
.app-preguntas-ronda-kpis {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    gap: 10px;
    flex-wrap: wrap;
}
.app-preguntas-ronda-kpi {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    min-width: 64px;
}
.app-preguntas-ronda-kpi-label {
    font-size: 10px;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.2;
    font-weight: 600;
}

/* --- FUNCIONES grid with labels --- */
.app-preguntas-funciones-grid {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 10px;
}
.app-preguntas-funciones-grid--acciones {
    justify-content: flex-start;
    gap: 10px;
}
.app-preguntas-funciones-grid--info {
    justify-content: flex-start;
    gap: 10px;
}
.app-preguntas-fn-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 68px;
    padding: 2px 4px;
    border: 0;
    background: transparent;
    box-shadow: none;
}
.app-preguntas-fn-label {
    font-size: 10px;
    color: #62716d;
    text-align: center;
    line-height: 1.2;
    font-weight: 600;
    max-width: 70px;
}
.app-preguntas-fn-item .w3-btn {
    box-shadow: 0 4px 10px rgba(23, 96, 82, 0.10);
}

/* --- EVOLUCIÓN progress --- */
.app-preguntas-evolucion-progress {
    height: 12px;
    border-radius: 999px;
    background: #e2ece9;
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(16, 64, 54, 0.05);
}
.app-preguntas-evolucion-progress-fill {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #5ac0aa 0%, var(--verde-dark) 100%);
    color: #ffffff;
    font-weight: 800;
    font-size: 9px;
    letter-spacing: 0.04em;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
}
.app-preguntas-evolucion-progress-fill span {
    padding: 0 6px;
}

/* --- Post-answer feedback zones --- */
.app-preguntas-feedback-correcto {
    background: var(--estado-correcto-bg);
    border-left: 4px solid var(--estado-correcto-border-strong);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding: 8px 14px;
    margin-bottom: 8px;
}
.app-preguntas-feedback-incorrecto {
    background: var(--estado-incorrecto-bg);
    border-left: 4px solid var(--estado-incorrecto-border-strong);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding: 8px 14px;
    margin-bottom: 8px;
}
.app-preguntas-motivador-correcto {
    color: var(--estado-correcto-text);
    font-weight: 700;
    text-align: center;
}
.app-preguntas-motivador-incorrecto {
    color: var(--estado-incorrecto-text);
    font-weight: 700;
    text-align: center;
}
.app-preguntas-opcion-correcta-bar {
    background: var(--estado-correcto-chip-bg);
    color: var(--estado-correcto-text);
    font-weight: 700;
    text-align: center;
    padding: 5px 10px;
    border-radius: var(--radius-sm);
    margin-bottom: 8px;
}

/* VER JUSTIFICACIÓN button */
.app-preguntas-justi-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 24px;
    border: none;
    border-radius: var(--radius-md);
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    width: 300px;
    max-width: 100%;
    height: 56px;
    transition: filter 0.15s;
    font-family: inherit;
    margin: 0 auto;
}
.app-preguntas-justi-btn:hover {
    filter: brightness(0.92);
}
.app-preguntas-justi-btn-correcto {
    background: var(--verde-dark);
    color: #fff;
}
.app-preguntas-justi-btn-incorrecto {
    background: var(--estado-incorrecto-cta);
    color: #fff;
}

/* SIGUIENTE button */
.app-preguntas-siguiente-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 32px;
    background: var(--verde-darker);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    font-weight: 700;
    font-size: 17px;
    cursor: pointer;
    width: 300px;
    max-width: 100%;
    height: 60px;
    transition: background 0.15s;
    font-family: inherit;
    letter-spacing: 0.05em;
    margin: 0 auto;
}
.app-preguntas-siguiente-btn:hover {
    background: var(--verde-dark);
}

/* Justification text area */
.app-preguntas-justi-texto {
    position: relative;
    background: linear-gradient(180deg, #ffffff 0%, #f7fbfa 100%);
    border: 1px solid rgba(26, 92, 79, 0.10);
    border-radius: 26px;
    padding: 24px 24px 22px;
    margin-top: 14px;
    text-align: left;
    box-shadow: 0 26px 54px rgba(15, 67, 57, 0.09);
    overflow: hidden;
}
.app-preguntas-justi-texto--correcta {
    background: linear-gradient(180deg, #fcfffe 0%, #f2faf6 100%);
    border-color: rgba(26, 92, 79, 0.16);
}
.app-preguntas-justi-texto--incorrecta {
    background: linear-gradient(180deg, #fffefe 0%, #fbf5f4 100%);
    border-color: rgba(156, 98, 98, 0.16);
}
.app-preguntas-justi-texto::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, rgba(26,92,79,0.15) 0%, rgba(26,92,79,0.72) 50%, rgba(26,92,79,0.15) 100%);
}
.app-preguntas-justi-texto--incorrecta::before {
    background: linear-gradient(90deg, rgba(156,98,98,0.14) 0%, rgba(156,98,98,0.68) 50%, rgba(156,98,98,0.14) 100%);
}
.app-preguntas-justi-texto .app-question-markdown {
    color: #23463e;
    display: grid;
    gap: 14px;
}
.app-preguntas-justi-texto--incorrecta .app-question-markdown {
    color: #5c4747;
}
.app-preguntas-justi-texto .app-question-markdown > :first-child {
    margin-top: 0;
}
.app-preguntas-justi-texto .app-question-markdown h2 {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    margin: 0;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,0.90);
    border: 1px solid rgba(26, 92, 79, 0.12);
    color: var(--verde-dark);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    box-shadow: 0 10px 20px rgba(26, 92, 79, 0.06);
}
.app-preguntas-justi-texto .app-question-markdown h3 {
    margin: 8px 0 0;
    padding: 14px 0 0;
    border-left: 0;
    border-radius: 0;
    border-top: 1px solid rgba(26, 92, 79, 0.10);
    background: transparent;
    color: var(--verde-dark);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.app-preguntas-justi-texto--incorrecta .app-question-markdown h2 {
    border-color: rgba(156, 98, 98, 0.14);
    color: #8b4d4d;
    box-shadow: 0 10px 20px rgba(156, 98, 98, 0.05);
}
.app-preguntas-justi-texto--incorrecta .app-question-markdown h3 {
    border-top-color: rgba(156, 98, 98, 0.10);
    color: #8b4d4d;
}
.app-preguntas-justi-texto .app-question-markdown h2 + p {
    margin-top: -2px;
    padding: 2px 0 10px;
    color: #27463f;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
}
.app-preguntas-justi-texto--incorrecta .app-question-markdown h2 + p {
    color: #5c4747;
}
.app-preguntas-justi-texto .app-question-markdown p,
.app-preguntas-justi-texto .app-question-markdown li {
    color: #2c4b44;
    line-height: 1.8;
    font-size: 14px;
}
.app-preguntas-justi-texto--incorrecta .app-question-markdown p,
.app-preguntas-justi-texto--incorrecta .app-question-markdown li {
    color: #5d4747;
}
.app-preguntas-justi-texto .app-question-markdown p {
    margin: 0;
}
.app-preguntas-justi-texto .app-question-markdown ul,
.app-preguntas-justi-texto .app-question-markdown ol {
    margin: -2px 0 0;
    padding-left: 20px;
    display: grid;
    gap: 10px;
}
.app-preguntas-justi-texto .app-question-markdown strong {
    color: #173d35;
}
.app-preguntas-justi-texto--incorrecta .app-question-markdown strong {
    color: #703f3f;
}
.app-preguntas-justi-texto .app-question-markdown blockquote {
    margin: 2px 0 0;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.92);
    border-left: 4px solid var(--verde-secundario);
    border-radius: 16px;
    box-shadow: inset 0 0 0 1px rgba(26, 92, 79, 0.08);
}
.app-preguntas-justi-texto--incorrecta .app-question-markdown blockquote {
    border-left-color: #c99191;
    box-shadow: inset 0 0 0 1px rgba(156, 98, 98, 0.1);
}
.app-preguntas-justi-texto .app-question-markdown table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid rgba(26, 92, 79, 0.10);
    background: rgba(255,255,255,0.84);
}
.app-preguntas-justi-texto .app-question-markdown th,
.app-preguntas-justi-texto .app-question-markdown td {
    padding: 10px 11px;
    text-align: left;
    vertical-align: top;
    font-size: 13px;
    line-height: 1.45;
    border-bottom: 1px solid rgba(26, 92, 79, 0.08);
}
.app-preguntas-justi-texto .app-question-markdown th {
    background: rgba(26, 92, 79, 0.06);
    color: var(--verde-dark);
    font-weight: 800;
}
.app-preguntas-justi-texto .app-question-markdown tr:last-child td {
    border-bottom: 0;
}
.app-preguntas-justi-texto--incorrecta .app-question-markdown table {
    border-color: rgba(156, 98, 98, 0.10);
}
.app-preguntas-justi-texto--incorrecta .app-question-markdown th,
.app-preguntas-justi-texto--incorrecta .app-question-markdown td {
    border-bottom-color: rgba(156, 98, 98, 0.08);
}
.app-preguntas-justi-texto--incorrecta .app-question-markdown th {
    background: rgba(156, 98, 98, 0.06);
    color: #8b4d4d;
}
.app-question-blocks {
    display: grid;
    gap: 18px;
}
.app-question-block {
    display: grid;
    gap: 12px;
}
.app-question-block__head {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    width: fit-content;
    max-width: 100%;
    min-height: 34px;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.app-question-block--correct .app-question-block__head {
    background: linear-gradient(180deg, #1f7a67 0%, #195c4f 100%);
    color: #f5fffb;
    box-shadow: 0 10px 24px rgba(25, 92, 79, 0.2);
}
.app-question-block--incorrect .app-question-block__head {
    background: linear-gradient(180deg, #c97d7d 0%, #b26666 100%);
    color: #fff8f8;
    box-shadow: 0 10px 24px rgba(154, 91, 91, 0.16);
}
.app-question-block__items {
    display: grid;
    gap: 14px;
}
.app-question-option {
    border-radius: 16px;
    padding: 14px 15px 12px;
    border: 1px solid transparent;
}
.app-question-option--correct {
    background: linear-gradient(180deg, rgba(31, 122, 103, 0.1) 0%, rgba(31, 122, 103, 0.04) 100%);
    border-color: rgba(31, 122, 103, 0.2);
    box-shadow: inset 0 0 0 1px rgba(31, 122, 103, 0.05);
}
.app-question-option--incorrect {
    background: linear-gradient(180deg, rgba(178, 102, 102, 0.09) 0%, rgba(178, 102, 102, 0.03) 100%);
    border-color: rgba(178, 102, 102, 0.18);
    box-shadow: inset 0 0 0 1px rgba(178, 102, 102, 0.04);
}
.app-question-option__title {
    margin-bottom: 10px;
    font-weight: 800;
    line-height: 1.35;
}
.app-question-option--correct .app-question-option__title {
    color: #195c4f;
}
.app-question-option--incorrect .app-question-option__title {
    color: #8b4d4d;
}
.app-question-option__body > :last-child {
    margin-bottom: 0;
}
@media (max-width: 767px) {
    .app-preguntas-justi-texto {
        padding: 14px 14px 12px;
        border-radius: 16px;
    }
    .app-preguntas-justi-texto .app-question-markdown h3 {
        margin-top: 18px;
        padding: 9px 10px;
    }
    .app-question-block__head {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
    .app-question-option {
        padding: 13px 12px 11px;
        border-radius: 14px;
    }
}

.app-justi-unified-list {
    display: grid;
    gap: 16px;
}
.app-justi-unified-list--preguntame {
    gap: 18px;
}
.app-search-response-item,
.app-search-response-item.app-search-response-item--static {
    position: relative;
    border-radius: 24px;
    padding: 20px 18px 18px;
    border: 1px solid #e5d7d3;
    background: linear-gradient(180deg, #fffdfd 0%, #fbf7f6 100%);
    box-shadow:
        0 16px 34px rgba(84, 69, 69, 0.06),
        inset 0 1px 0 rgba(255,255,255,0.7);
}
.app-search-response-item.correcta,
.app-search-response-item--static.correcta {
    border-color: #cddfd9;
    background: linear-gradient(180deg, #fcfefd 0%, #f2f8f5 100%);
}
.app-preguntas-justi-card.app-search-response-item.correcta,
.app-preguntas-justi-card.app-search-response-item--static.correcta {
    border-color: #c6ddd6;
    background: linear-gradient(180deg, #fdfffe 0%, #eef7f3 100%);
    box-shadow: 0 18px 36px rgba(29, 90, 77, 0.08);
}
.app-search-response-item.incorrecta,
.app-search-response-item--static.incorrecta {
    border-color: #e5d8d4;
    background: linear-gradient(180deg, #fffdfd 0%, #faf5f4 100%);
}
.app-preguntas-justi-card.app-search-response-item.incorrecta,
.app-preguntas-justi-card.app-search-response-item--static.incorrecta {
    border-color: #e3d6d2;
    background: linear-gradient(180deg, #fffefe 0%, #faf4f3 100%);
    box-shadow: 0 18px 36px rgba(118, 89, 89, 0.07);
}
.app-search-response-item::before,
.app-search-response-item.app-search-response-item--static::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    border-radius: 24px 0 0 24px;
    background: #cfdbd8;
}
.app-search-response-item.correcta::before,
.app-search-response-item--static.correcta::before {
    background: linear-gradient(180deg, #4f8f82 0%, #2f6f62 100%);
}
.app-search-response-item.incorrecta::before,
.app-search-response-item--static.incorrecta::before {
    background: linear-gradient(180deg, #bc8686 0%, #9f6b6b 100%);
}
.app-search-response-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
.app-search-response-text {
    color: #34524b;
    font-weight: 600;
    line-height: 1.5;
    flex: 1 1 auto;
    font-size: 16px;
}
.app-search-response-item.incorrecta .app-search-response-text,
.app-search-response-item--static.incorrecta .app-search-response-text {
    color: #5f4d4d;
}
.app-search-resp-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 7px 14px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1px solid transparent;
    background: rgba(255,255,255,0.92);
}
.app-search-response-item.correcta .app-search-resp-chip,
.app-search-response-item--static.correcta .app-search-resp-chip {
    color: #3f786c;
    border-color: #d6e7e1;
}
.app-search-response-item.incorrecta .app-search-resp-chip,
.app-search-response-item--static.incorrecta .app-search-resp-chip {
    color: #a46f6f;
    border-color: #ecd8d4;
}
.btn-justificacion {
    margin-top: 12px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #b27474;
    font-weight: 500;
    cursor: pointer;
}
.app-search-response-item.correcta .btn-justificacion {
    color: #4f8f82;
}
.justificacion,
.justificacion.justificacion--visible {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(112, 93, 93, 0.10);
    color: #4b4343;
    display: block;
}
.app-search-response-item.correcta .justificacion,
.app-search-response-item--static.correcta .justificacion {
    border-top-color: rgba(79, 143, 130, 0.12);
    color: #3f5a54;
}
.app-search-response-item.incorrecta .justificacion,
.app-search-response-item--static.incorrecta .justificacion {
    border-top-color: rgba(178, 116, 116, 0.12);
    color: #4d4343;
}
.justificacion p:last-child,
.justificacion .markdown-content > :last-child,
.justificacion .app-search-rich-html > :last-child {
    margin-bottom: 0;
}
.app-search-rich-html p {
    margin: 0 0 12px;
    line-height: 1.8;
}
.app-preguntas-justi-card .app-search-rich-html p {
    font-size: 14px;
}
.app-search-rich-html h1,
.app-search-rich-html h2,
.app-search-rich-html h3,
.app-search-rich-html h4 {
    margin: 18px 0 10px;
    color: inherit;
    font-size: 12px;
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.app-preguntas-justi-card .app-search-rich-html h1,
.app-preguntas-justi-card .app-search-rich-html h2,
.app-preguntas-justi-card .app-search-rich-html h3,
.app-preguntas-justi-card .app-search-rich-html h4 {
    font-size: 12px;
}
.app-search-rich-html h2,
.app-search-rich-html h3,
.app-search-rich-html h4 {
    padding: 0 0 8px;
    border-left: 0;
    border-bottom: 1px solid currentColor;
    opacity: 0.92;
}
.app-search-response-item.correcta .app-search-rich-html h2,
.app-search-response-item.correcta .app-search-rich-html h3,
.app-search-response-item.correcta .app-search-rich-html h4,
.app-search-response-item--static.correcta .app-search-rich-html h2,
.app-search-response-item--static.correcta .app-search-rich-html h3,
.app-search-response-item--static.correcta .app-search-rich-html h4 {
    color: #3f7669;
}
.app-search-response-item.incorrecta .app-search-rich-html h2,
.app-search-response-item.incorrecta .app-search-rich-html h3,
.app-search-response-item.incorrecta .app-search-rich-html h4,
.app-search-response-item--static.incorrecta .app-search-rich-html h2,
.app-search-response-item--static.incorrecta .app-search-rich-html h3,
.app-search-response-item--static.incorrecta .app-search-rich-html h4 {
    color: #9a6363;
}
.app-search-rich-html strong {
    color: inherit;
}
.app-search-rich-html ul,
.app-search-rich-html ol {
    margin: 0 0 14px;
    padding-left: 20px;
}
.app-search-rich-html--justi > :first-child {
    margin-top: 0;
}
.app-search-rich-html--justi > :last-child {
    margin-bottom: 0;
}
.app-search-rich-html table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 8px 0 14px;
    overflow: hidden;
    border: 1px solid rgba(61, 101, 92, 0.10);
    border-radius: 16px;
    background: rgba(255,255,255,0.85);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.68);
}
.app-preguntas-justi-card .app-search-rich-html table {
    font-size: 13px;
}
.app-search-response-item.incorrecta .app-search-rich-html table,
.app-search-response-item--static.incorrecta .app-search-rich-html table {
    border-color: rgba(154, 99, 99, 0.14);
}
.app-search-rich-html th,
.app-search-rich-html td {
    padding: 10px 11px;
    text-align: left;
    border-bottom: 1px solid rgba(61, 101, 92, 0.08);
    font-size: 13px;
    line-height: 1.45;
}
.app-search-response-item.incorrecta .app-search-rich-html th,
.app-search-response-item.incorrecta .app-search-rich-html td,
.app-search-response-item--static.incorrecta .app-search-rich-html th,
.app-search-response-item--static.incorrecta .app-search-rich-html td {
    border-bottom-color: rgba(154, 99, 99, 0.08);
}
.app-search-rich-html th {
    font-weight: 700;
    background: rgba(61, 101, 92, 0.06);
}
.app-search-response-item.incorrecta .app-search-rich-html th,
.app-search-response-item--static.incorrecta .app-search-rich-html th {
    background: rgba(154, 99, 99, 0.06);
}
.app-search-rich-html tr:last-child td {
    border-bottom: 0;
}
@media (max-width: 767px) {
    .app-preguntas-justi-texto {
        padding: 18px 14px 16px;
        border-radius: 20px;
    }
    .app-preguntas-justi-texto .app-question-markdown h2 {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
    .app-preguntas-justi-texto .app-question-markdown h2 + p {
        font-size: 17px;
    }
    .app-search-response-item,
    .app-search-response-item.app-search-response-item--static {
        padding: 16px 13px 14px;
        border-radius: 18px;
    }
    .app-search-response-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .app-search-resp-chip {
        align-self: flex-start;
    }
    .app-search-response-text {
        font-size: 15px;
    }
}

/* --- Help modal content --- */
.app-ayuda-section {
    position: relative;
    border: 1px solid rgba(120, 189, 173, 0.18);
    padding: 18px 20px 20px;
    margin-bottom: 0;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(24, 84, 70, 0.025);
    overflow: hidden;
    text-align: left;
}
.app-ayuda-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #39a388 0%, #7ecdb7 100%);
}
.app-ayuda-section-title {
    color: var(--verde-dark);
    font-weight: 800;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    justify-content: flex-start;
    text-align: left;
}
.app-ayuda-tip {
    background: linear-gradient(135deg, #1c6b5a 0%, #155548 100%);
    color: rgba(255,255,255,0.96);
    border-radius: 14px;
    padding: 10px 12px;
    font-size: 13px;
    margin-top: 14px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    box-shadow: 0 10px 22px rgba(19, 77, 65, 0.14);
}
.app-ayuda-fn-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(118, 190, 176, 0.18);
}
.app-ayuda-fn-row:last-child {
    border-bottom: none;
}
.app-ayuda-fn-row--emphasis {
    padding-top: 4px;
}
.app-ayuda-fn-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 20px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}
.app-ayuda-fn-text {
    flex: 1;
    font-size: 14px;
    line-height: 1.55;
    text-align: left;
}
.app-ayuda-fn-text strong {
    color: var(--verde-dark);
    display: block;
    margin-bottom: 4px;
}
.app-ayuda-modal {
    max-width: 920px;
    margin: 0 auto;
}
.app-ayuda-modal--preguntame,
.app-ayuda-modal--guia {
    padding-top: 8px !important;
}
.app-ayuda-hero {
    position: relative;
    background: linear-gradient(180deg, rgba(246, 251, 249, 0.98) 0%, rgba(241, 249, 245, 0.98) 100%);
    border: 1px solid rgba(104, 184, 166, 0.18);
    border-radius: 18px;
    padding: 18px 22px 16px;
    margin-bottom: 14px;
    box-shadow: 0 8px 22px rgba(19, 77, 65, 0.04);
    text-align: left;
}
.app-ayuda-hero-topline {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.app-ayuda-hero-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(14, 92, 78, 0.11);
    color: var(--verde-dark);
    font-weight: 800;
    letter-spacing: 0.12em;
    font-size: 11px;
}
.app-ayuda-hero-eyebrow {
    color: rgba(27, 87, 73, 0.72);
    font-size: 12px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.app-ayuda-hero-main {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.9fr);
    gap: 18px;
    align-items: start;
    margin-top: 14px;
}
.app-ayuda-hero-copy-wrap {
    min-width: 0;
}
.app-ayuda-hero-title {
    margin: 0 !important;
    color: var(--verde-dark);
    font-weight: 800;
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.08;
    text-align: left;
}
.app-ayuda-hero-text,
.app-ayuda-copy {
    color: #43524e;
    line-height: 1.7;
    text-align: left;
}
.app-ayuda-hero-text {
    max-width: 760px;
    font-size: 16px;
}
.app-ayuda-hero-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.app-ayuda-hero-kpi {
    min-height: 112px;
    border-radius: 20px;
    padding: 14px 12px;
    background: rgba(255,255,255,0.82);
    border: 1px solid rgba(111, 182, 166, 0.20);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 12px 26px rgba(20, 94, 79, 0.06);
}
.app-ayuda-hero-kpi-num {
    font-size: 34px;
    line-height: 1;
    font-weight: 900;
    color: var(--verde-dark);
}
.app-ayuda-hero-kpi-copy {
    color: rgba(28, 83, 71, 0.78);
    font-size: 12px;
    line-height: 1.35;
}
.app-ayuda-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.app-ayuda-section--wide {
    grid-column: 1 / -1;
}
.app-ayuda-section-headline {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 6px;
    margin-bottom: 14px;
}
.app-ayuda-list {
    margin: 0;
    padding-left: 18px;
    color: #43524e;
    line-height: 1.58;
    text-align: left;
}
.app-ayuda-list li + li {
    margin-top: 7px;
}
.app-ayuda-fn-icon--skip {
    background: linear-gradient(180deg, #fff4df 0%, #ffe7c2 100%);
    color: #e65100;
}
.app-ayuda-fn-icon--glosario {
    background: linear-gradient(180deg, #fde8f1 0%, #f8d6e6 100%);
    color: #880e4f;
}
.app-ayuda-flow {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 16px;
}
.app-ayuda-flow-card {
    position: relative;
    border-radius: 14px;
    padding: 14px 16px 14px 18px;
    background: #ffffff;
    border: 1px solid rgba(114, 187, 170, 0.18);
    box-shadow: 0 4px 12px rgba(24, 84, 70, 0.025);
    text-align: left;
}
.app-ayuda-flow-card::before {
    content: "";
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: 0;
    width: 4px;
    border-radius: 999px;
    background: linear-gradient(180deg, #2d8370 0%, #7ecdb7 100%);
}
.app-ayuda-flow-card-top {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    justify-content: flex-start;
}
.app-ayuda-flow-card-step {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    flex-shrink: 0;
    background: linear-gradient(180deg, #2d8370 0%, #185447 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0.08em;
    box-shadow: 0 8px 16px rgba(24, 84, 70, 0.14);
}
.app-ayuda-flow-card-body {
    min-width: 0;
    flex: 1;
    text-align: left;
}
.app-ayuda-flow-card-title {
    margin: 1px 0 4px !important;
    color: var(--verde-dark);
    font-weight: 800;
    font-size: 18px;
    text-align: left;
}
.app-ayuda-flow-card-copy {
    margin: 0 !important;
    color: #4d5a56;
    line-height: 1.5;
    text-align: left;
}
.app-ayuda-resource-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.app-ayuda-resource-chip {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 14px;
    border: 1px solid rgba(118, 190, 176, 0.16);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 3px 10px rgba(24, 84, 70, 0.02);
    text-align: left;
}
.app-ayuda-resource-copy {
    flex: 1;
    color: #43524e;
    line-height: 1.45;
    text-align: left;
}
.app-ayuda-resource-copy strong {
    color: var(--verde-dark);
    display: block;
    margin-bottom: 2px;
}
.app-ayuda-resource-sub {
    display: block;
}
.app-ayuda-mini-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 15px;
    border: 1px solid rgba(118, 190, 176, 0.42);
    background: #fff;
    color: var(--verde-dark);
    box-shadow: 0 10px 22px rgba(23, 96, 82, 0.10);
    font-size: 24px;
    flex-shrink: 0;
}
.app-ayuda-mini-btn--infografia {
    color: #9a6700;
    border-color: rgba(154, 103, 0, 0.35);
}
.app-ayuda-mini-btn--pdf {
    color: #b71c1c;
    border-color: rgba(183, 28, 28, 0.3);
}
.app-ayuda-mini-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--verde-dark);
    color: #fff;
    font-size: 10px;
    line-height: 18px;
    font-weight: 800;
    text-align: center;
}
@media (max-width: 767px) {
    .app-ayuda-modal--preguntame,
    .app-ayuda-modal--guia {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }
    .app-ayuda-hero {
        padding: 18px 16px 16px;
        border-radius: 18px;
        margin-bottom: 16px;
    }
    .app-ayuda-hero-main,
    .app-ayuda-flow,
    .app-ayuda-grid,
    .app-ayuda-resource-grid {
        grid-template-columns: 1fr;
    }
    .app-ayuda-hero-kpis {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .app-ayuda-hero-title {
        font-size: 30px;
    }
    .app-ayuda-flow-card,
    .app-ayuda-section {
        border-radius: 16px;
        padding: 16px 14px;
    }
    .app-ayuda-flow-card {
        padding-left: 16px;
    }
    .app-ayuda-flow-card::before {
        top: 10px;
        bottom: 10px;
    }
    .app-ayuda-resource-chip {
        padding: 12px 12px;
        border-radius: 16px;
    }
    .app-ayuda-section-headline {
        flex-direction: column;
        gap: 8px;
    }
    .app-ayuda-fn-icon {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        font-size: 18px;
    }
    .app-ayuda-mini-btn {
        width: 44px;
        height: 44px;
        border-radius: 14px;
        font-size: 22px;
    }
    .app-ayuda-tip {
        border-radius: 14px;
        padding: 10px 12px;
    }
}
@media (max-width: 575px) {
    #elToGrandecicoModal.app-modal-context--preguntame-help #divHeaderElToGrandecico,
    #elToGrandecicoModal.app-modal-context--module-help #divHeaderElToGrandecico {
        padding: 14px 14px 12px;
        gap: 10px;
    }

    .app-modal-help-kicker {
        min-height: 24px;
        padding: 4px 9px;
        font-size: 10px;
    }

    .app-modal-help-title {
        font-size: 22px;
    }

    #elToGrandecicoModal.app-modal-context--preguntame-help #cierraElToGrandecico,
    #elToGrandecicoModal.app-modal-context--module-help #cierraElToGrandecico {
        width: 40px;
        height: 40px;
    }

    #elToGrandecicoModal.app-modal-context--preguntame-help #cierraElToGrandecico::before,
    #elToGrandecicoModal.app-modal-context--module-help #cierraElToGrandecico::before {
        font-size: 24px;
    }

    .app-ayuda-hero-topline {
        gap: 8px;
    }
    .app-ayuda-hero-eyebrow {
        font-size: 11px;
    }
    .app-ayuda-hero-kpis {
        grid-template-columns: 1fr;
    }
    .app-ayuda-hero-kpi {
        min-height: 0;
        padding: 12px;
        gap: 4px;
    }
    .app-ayuda-hero-kpi-num {
        font-size: 28px;
    }
    .app-ayuda-flow-card-step {
        width: 38px;
        height: 38px;
        border-radius: 12px;
        font-size: 13px;
    }
}

/* Round summary */
.app-ronda-resumen-nota {
    font-size: 52px;
    font-weight: 900;
    color: var(--verde-dark);
    line-height: 1;
    text-align: center;
    margin-bottom: 4px;
}
.app-ronda-resumen-kpis {
    display: flex;
    justify-content: center;
    gap: 28px;
    margin: 10px 0 6px;
}
.app-ronda-resumen-kpi {
    text-align: center;
}
.app-ronda-resumen-kpi-val {
    font-size: 26px;
    font-weight: 800;
}
.app-ronda-resumen-kpi-lbl {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 1px;
}

@media (max-width: 576px) {
    .app-preguntas-justi-btn,
    .app-preguntas-siguiente-btn {
        width: 100%;
        max-width: 320px;
    }
    .app-preguntas-fn-item {
        min-width: 60px;
        padding: 2px 2px 0;
    }
    .app-preguntas-bottom-panel {
        padding: 10px 6px 8px;
        border-radius: 14px 14px 0 0;
    }
    #divBotoncicosPreguntaMe {
        margin-top: 38px !important;
    }
    .app-preguntas-panel-box {
        padding: 9px 8px 10px;
    }
    .app-preguntas-support-summary {
        width: 100%;
        padding: 8px 12px;
    }
    .app-preguntas-support-summary-meta {
        display: none;
    }
    .app-preguntas-panel-header {
        padding: 7px 9px;
        font-size: 12px;
    }
    .app-preguntas-evolucion-summary {
        gap: 8px;
    }
    .app-preguntas-evolucion-stat {
        min-width: 0;
        flex: 1 1 120px;
    }
    .app-preguntas-ronda-kpis {
        gap: 8px;
        justify-content: center;
    }
    .app-preguntas-funciones-grid {
        gap: 8px;
        justify-content: center;
    }
    .app-preguntas-funciones-grid--acciones,
    .app-preguntas-funciones-grid--info {
        justify-content: center;
    }
}

/* ================================================================
   Sección 37 — Mi Usuario PRO (Panel Personal del Opositor)
   ================================================================ */

/* --- Header --- */
.app-miusuario-section {
    width: 100%;
    margin: 0 auto;
}
.app-miusuario-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--fondo-app);
    border-bottom: 2px solid var(--borde-suave);
    gap: 12px;
    flex-wrap: wrap;
    padding: 6px 12px !important;
    min-height: 54px;
}
.app-miusuario-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.app-miusuario-header-titles {
    min-width: 0;
}
.app-miusuario-info-btn {
    width: 34px;
    height: 34px;
    background: var(--verde-claro);
    border: 1.5px solid var(--borde-suave);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: default;
}
.app-miusuario-info-btn i {
    font-size: 16px;
    color: var(--verde-dark);
}
.app-miusuario-title {
    color: var(--verde-dark);
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
}
.app-miusuario-subtitle {
    color: var(--text-muted);
    margin: 0;
    line-height: 1.3;
}
.app-miusuario-tabs {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    flex-wrap: wrap;
}
.app-miusuario-tab {
    height: 42px;
    border: 1.5px solid var(--borde-suave);
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    color: var(--verde-dark);
    gap: 8px;
    padding: 0 14px;
    font-size: 14px;
    font-weight: 600;
}
.app-miusuario-tab i {
    font-size: 15px;
}
.app-miusuario-tab:hover,
.app-miusuario-tab.active {
    background: var(--verde-secundario);
    border-color: var(--verde-secundario);
    color: #fff;
}

.app-miusuario-tab--upgrade {
    background: rgba(255, 247, 219, 0.95);
    border-color: rgba(202, 150, 39, 0.30);
    color: #83560d;
}

.app-miusuario-tab--upgrade:hover,
.app-miusuario-tab--upgrade.active {
    background: #c99628;
    border-color: #c99628;
    color: #fff;
}

/* --- Stats summary --- */
.app-profile-section {
    padding: 24px 18px 36px;
    background:
        linear-gradient(180deg, rgba(238, 248, 244, 0.92) 0%, rgba(250,252,251,0.98) 100%);
}
.app-profile-stack {
    display: grid;
    gap: 28px;
    max-width: 1180px;
    margin: 0 auto;
}
.app-profile-panel {
    position: relative;
    padding: 22px;
    border: 2px solid rgba(26, 92, 79, 0.18);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 18px 42px rgba(17,61,53,0.09);
}
.app-profile-panel::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 6px;
    border-radius: 18px 0 0 18px;
    background: rgba(91, 191, 164, 0.72);
}
.app-profile-panel--summary {
    background: linear-gradient(180deg, #ffffff 0%, #f7fbf9 100%);
}
.app-profile-panel--avatar {
    background:
        radial-gradient(circle at top left, rgba(201, 150, 40, 0.10), transparent 32%),
        #fff;
}
.app-profile-panel--identity {
    background: linear-gradient(180deg, #ffffff 0%, #fbfdfc 100%);
}
.app-profile-panel--active-opos {
    background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
}
.app-profile-panel--practice {
    background: linear-gradient(180deg, #ffffff 0%, #f7fcfa 100%);
}
.app-profile-panel--pro-categories {
    border-color: rgba(201, 150, 40, 0.36);
    background: linear-gradient(180deg, #ffffff 0%, #fffdf7 100%);
}
.app-profile-panel--pro-categories::before {
    background: rgba(201, 150, 40, 0.86);
}
.app-profile-panel--help {
    background: #f8fcfa;
}
.app-profile-panel__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin: -6px -6px 18px;
    padding: 14px 16px;
    border: 1px solid rgba(26, 92, 79, 0.10);
    border-radius: 14px;
    background: rgba(248, 252, 250, 0.92);
}
.app-profile-panel__head h3 {
    margin: 0;
    color: var(--verde-dark);
    font-size: 20px;
    font-weight: 900;
    line-height: 1.15;
}
.app-profile-panel__eyebrow {
    display: block;
    margin-bottom: 5px;
    color: #9a6a12;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
}
.app-profile-stats {
    display: flex;
    gap: 12px;
    margin-bottom: 0;
}
.app-profile-stat-card {
    flex: 1;
    background: rgba(255,255,255,0.96);
    border: 1.5px solid var(--borde-suave);
    border-radius: 12px;
    padding: 14px 10px;
    text-align: center;
    min-width: 0;
}
.app-profile-stat-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--verde-dark);
    line-height: 1;
    margin-bottom: 4px;
}
.app-profile-stat-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    line-height: 1.3;
}

.app-profile-avatar-card {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(260px, 1.1fr);
    gap: 16px;
    align-items: stretch;
    margin: 0;
    padding: 16px;
    border: 1.5px solid rgba(26, 92, 79, 0.14);
    border-radius: 18px;
    background:
        radial-gradient(circle at top left, rgba(201, 150, 40, 0.16), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(244,250,247,0.98) 100%);
    box-shadow: 0 16px 34px rgba(17,61,53,0.08);
}

.app-profile-avatar-preview-wrap {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.app-profile-avatar-preview {
    width: 112px;
    height: 112px;
    min-width: 112px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 3px solid rgba(26, 92, 79, 0.18);
    background: linear-gradient(180deg, #f9fbf8 0%, #e6f3ee 100%);
    color: var(--verde-dark);
    font-size: 42px;
    font-weight: 900;
    box-shadow: inset 0 0 0 6px rgba(255,255,255,0.76), 0 12px 26px rgba(17,61,53,0.14);
}

.app-profile-avatar-preview.has-avatar {
    background: #fff;
}

.app-profile-avatar-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.app-profile-avatar-status {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.app-profile-avatar-status strong {
    color: var(--verde-dark);
    font-size: 1.1rem;
    line-height: 1.2;
}

.app-profile-avatar-status span:last-child {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.35;
}

.app-profile-avatar-drop {
    min-height: 132px;
    border: 2px dashed rgba(26, 92, 79, 0.28);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 16px;
    text-align: center;
    background: rgba(255,255,255,0.82);
    color: var(--verde-dark);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.app-profile-avatar-drop:hover,
.app-profile-avatar-drop:focus,
.app-profile-avatar-drop.is-dragover {
    border-color: var(--verde-secundario);
    background: rgba(230, 246, 239, 0.96);
    outline: none;
    transform: translateY(-1px);
}

.app-profile-avatar-drop.is-uploading {
    pointer-events: none;
    opacity: 0.72;
}

.app-profile-avatar-drop i {
    color: var(--verde-secundario);
    font-size: 28px;
}

.app-profile-avatar-drop-title {
    font-weight: 900;
    font-size: 1rem;
}

.app-profile-avatar-drop-copy {
    color: var(--text-muted);
    font-size: 0.86rem;
    line-height: 1.35;
}

.app-profile-avatar-actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.app-profile-action--ghost {
    background: #fff;
    color: var(--verde-dark);
    border: 1.5px solid var(--borde-suave);
}

.app-profile-action--ghost:hover,
.app-profile-action--ghost:focus {
    background: #fff4f1;
    color: #8a331d;
    border-color: rgba(138, 51, 29, 0.20);
}

.app-profile-avatar-message {
    grid-column: 1 / -1;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 700;
}

.app-profile-avatar-message.is-ok {
    background: rgba(26, 92, 79, 0.09);
    color: var(--verde-dark);
}

.app-profile-avatar-message.is-error {
    background: rgba(138, 51, 29, 0.10);
    color: #8a331d;
}

/* --- Data grid --- */
.app-profile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 0;
}
.app-profile-field { display: flex; flex-direction: column; gap: 4px; }
.app-profile-field.full-width { grid-column: 1 / -1; }
.app-profile-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.app-profile-value {
    font-size: 15px;
    color: var(--verde-dark);
    font-weight: 500;
    padding: 9px 12px;
    background: var(--fondo-app);
    border-radius: 8px;
    border: 1.5px solid var(--borde-suave);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.app-profile-value--wrap {
    white-space: normal;
    line-height: 1.45;
}
.app-profile-select {
    font-size: 15px;
    color: var(--verde-dark);
    padding: 0 12px;
    background: #fff;
    border-radius: 8px;
    border: 1.5px solid var(--verde-secundario);
    width: 100%;
    height: 42px;
    cursor: pointer;
}
.app-profile-action {
    appearance: none;
    border: 0;
    border-radius: 8px;
    background: var(--verde-secundario);
    color: #fff;
    font-weight: 700;
    min-height: 42px;
    padding: 0 14px;
    cursor: pointer;
}
.app-profile-action:hover,
.app-profile-action:focus {
    background: var(--verde-dark);
}
.app-profile-action:disabled {
    cursor: not-allowed;
    opacity: 0.62;
}
.app-profile-practice-controls {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 10px;
}

@media (max-width: 767px), (pointer: coarse) and (max-width: 920px) {
    .botonClassDescargarMultimediaTema {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}

.app-profile-contact-note {
    background: var(--verde-claro);
    border: 1.5px solid rgba(26, 92, 79, 0.12);
    border-radius: 12px;
    padding: 14px 16px;
    font-size: 13px;
    color: #555;
    line-height: 1.5;
}
.app-profile-contact-note a {
    color: var(--verde-secundario);
    font-weight: 600;
    text-decoration: none;
}

.app-profile-add-category {
    margin-top: 0;
}

.app-profile-add-category__list {
    display: grid;
    gap: 12px;
    margin-top: 12px;
}

.app-profile-add-category__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: stretch;
    padding: 16px;
    border: 1.5px solid rgba(26, 92, 79, 0.16);
    border-radius: 14px;
    background: #fbfefd;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.app-profile-add-category__item.is-paying {
    border-color: rgba(26, 92, 79, 0.42);
    background: #f4fbf8;
    box-shadow: 0 12px 32px rgba(26, 92, 79, 0.09);
}

.app-profile-add-category__main {
    min-width: 0;
    display: grid;
    align-content: center;
    gap: 10px;
}

.app-profile-add-category__title-row {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.app-profile-add-category__main strong {
    display: block;
    color: var(--verde-dark);
    overflow-wrap: anywhere;
}

.app-profile-add-category__badge {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(206, 145, 12, 0.12);
    color: #916208;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
}

.app-profile-add-category__details {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.app-profile-add-category__details span {
    display: grid;
    gap: 2px;
    min-width: 118px;
    padding: 8px 10px;
    border: 1px solid rgba(26, 92, 79, 0.12);
    border-radius: 10px;
    background: #fff;
}

.app-profile-add-category__details small,
.app-profile-add-category__price small {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}

.app-profile-add-category__details strong {
    color: var(--verde-dark);
    font-size: 14px;
}

.app-profile-add-category__empty {
    display: block;
    margin-top: 4px;
    color: var(--text-muted);
}

.app-profile-add-category__side {
    display: grid;
    grid-template-columns: auto;
    gap: 9px;
    align-items: center;
    justify-items: end;
    min-width: 180px;
}

.app-profile-add-category__price {
    display: grid;
    gap: 2px;
    justify-items: end;
    color: var(--verde-dark);
    font-size: 22px;
    font-weight: 800;
    white-space: nowrap;
}

.app-profile-add-category__paypal {
    grid-column: 1 / -1;
    display: none;
}

.app-profile-add-category__paypal.is-active {
    display: grid;
    justify-items: center;
    gap: 14px;
    width: 100%;
    max-width: 620px;
    margin: 2px auto 0;
    padding: 18px;
    border: 1.5px solid rgba(26, 92, 79, 0.18);
    border-radius: 14px;
    background: #ffffff;
}

.app-profile-add-category__checkout-head {
    display: grid;
    gap: 4px;
    width: 100%;
    max-width: 520px;
    text-align: center;
}

.app-profile-add-category__checkout-head strong {
    color: var(--verde-dark);
    font-size: 18px;
}

.app-profile-add-category__checkout-head span {
    color: var(--text-muted);
    line-height: 1.4;
}

.app-profile-add-category__paypal-buttons {
    width: 100%;
    max-width: 520px;
    min-height: 118px;
}

.app-profile-add-category__message {
    margin-top: 10px;
    font-weight: 700;
}

@media (max-width: 720px) {
    .app-profile-add-category__item {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .app-profile-add-category__side {
        grid-template-columns: 1fr;
        justify-items: stretch;
        min-width: 0;
    }

    .app-profile-add-category__price {
        justify-items: start;
    }

    .app-profile-add-category__pay {
        width: 100%;
        min-height: 44px;
    }

    .app-profile-add-category__paypal.is-active {
        max-width: 100%;
        padding: 14px;
    }

    .app-profile-add-category__details span {
        min-width: calc(50% - 4px);
    }
}

/* --- Contact form --- */
.app-contact-section {
    padding: 24px 18px 36px;
    max-width: 1180px;
    margin: 0 auto 34px;
    background:
        linear-gradient(180deg, rgba(238, 248, 244, 0.92) 0%, rgba(250,252,251,0.98) 100%);
}
.app-contact-stack {
    display: grid;
    gap: 24px;
}
.app-contact-panel {
    position: relative;
    background: #fff;
    border: 2px solid rgba(26, 92, 79, 0.18);
    border-radius: 18px;
    padding: 22px;
    box-shadow: 0 18px 42px rgba(17,61,53,0.09);
}
.app-contact-panel::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 6px;
    border-radius: 18px 0 0 18px;
    background: rgba(91, 191, 164, 0.72);
}
.app-contact-panel--intro {
    background:
        radial-gradient(circle at top left, rgba(201, 150, 40, 0.10), transparent 32%),
        #fff;
}
.app-contact-panel--message {
    background: linear-gradient(180deg, #ffffff 0%, #fbfdfc 100%);
}
.app-contact-panel--send {
    display: flex;
    gap: 18px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    background: #f8fcfa;
}
.app-contact-panel--send::before {
    background: rgba(201, 150, 40, 0.86);
}
.app-contact-panel__head {
    display: flex;
    gap: 16px;
    align-items: center;
    margin: -6px -6px 0;
    padding: 16px;
    border: 1px solid rgba(26, 92, 79, 0.10);
    border-radius: 14px;
    background: rgba(248, 252, 250, 0.92);
}
.app-contact-panel__head--compact {
    margin-bottom: 16px;
}
.app-contact-panel__head h3 {
    margin: 0;
    color: var(--verde-dark);
    font-size: 20px;
    font-weight: 900;
    line-height: 1.15;
}
.app-contact-eyebrow {
    display: block;
    margin-bottom: 5px;
    color: #9a6a12;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
}
.app-contact-icon {
    width: 58px;
    height: 58px;
    min-width: 58px;
    background: var(--verde-claro);
    border: 1.5px solid rgba(26, 92, 79, 0.16);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.app-contact-icon i {
    font-size: 23px;
    color: var(--verde-dark);
}
.app-contact-subtitle {
    color: var(--text-muted);
    max-width: 620px;
    margin: 8px 0 0;
    line-height: 1.55;
}
.app-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}
.app-contact-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.app-contact-field.full-width {
    grid-column: 1 / -1;
}
.app-contact-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.45px;
}
.app-contact-input,
.app-contact-select,
.app-contact-textarea {
    width: 100%;
    border: 2px solid rgba(26, 92, 79, 0.16);
    border-radius: 12px;
    background: #fbfefd;
    font-size: 15px;
    color: var(--verde-dark);
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.app-contact-input,
.app-contact-select {
    height: 46px;
    padding: 0 14px;
}
.app-contact-textarea {
    min-height: 190px;
    resize: vertical;
    padding: 14px;
    line-height: 1.5;
}
.app-contact-input:focus,
.app-contact-select:focus,
.app-contact-textarea:focus {
    border-color: var(--verde-secundario);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(79, 187, 170, 0.10);
}
.app-contact-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0;
    color: var(--verde-dark);
}
.app-contact-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 42px;
    padding: 9px 12px;
    border: 1.5px solid rgba(26, 92, 79, 0.13);
    border-radius: 12px;
    background: #fbfefd;
}
.app-contact-send-copy {
    max-width: 560px;
    color: var(--verde-dark);
    line-height: 1.45;
}
.app-contact-btn {
    min-width: 220px;
    height: 50px;
    margin-top: 0;
    background: var(--verde-secundario);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-weight: 800;
    cursor: pointer;
    transition: opacity 0.15s;
    box-shadow: 0 10px 24px rgba(26, 92, 79, 0.16);
}
.app-contact-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.app-contact-btn:not(:disabled):hover {
    opacity: 0.9;
}
.app-contact-msg {
    flex-basis: 100%;
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--verde-dark);
}
.app-contact-msg--success {
    color: var(--verde-secundario);
    font-weight: 600;
}
.app-contact-msg--error {
    color: #b65252;
    font-weight: 600;
}

/* --- Upgrade PRO --- */
.app-upgrade-section {
    padding: 24px 16px 30px;
    max-width: 920px;
    margin: 0 auto;
}

.app-upgrade-card {
    background: linear-gradient(180deg, #ffffff 0%, #f8fcfa 100%);
    border: 1.5px solid rgba(26, 92, 79, 0.14);
    border-radius: 22px;
    padding: 28px 26px;
    box-shadow: 0 14px 34px rgba(26, 92, 79, 0.08);
}

.app-upgrade-hero {
    margin-bottom: 20px;
}

.app-upgrade-kicker {
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
    color: #9a6b17;
}

.app-upgrade-title {
    margin: 0 0 10px;
    color: var(--verde-dark);
    font-weight: 800;
    line-height: 1.15;
}

.app-upgrade-subtitle {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.6;
}

.app-upgrade-price-wrap {
    padding: 18px 18px 16px;
    margin-bottom: 18px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(255, 247, 219, 0.94) 0%, rgba(255, 255, 255, 0.98) 100%);
    border: 1px solid rgba(202, 150, 39, 0.22);
}

.app-upgrade-price-label {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #9a6b17;
}

.app-upgrade-price {
    margin: 0;
    font-size: 34px;
    font-weight: 800;
    line-height: 1;
    color: var(--verde-dark);
}

.app-upgrade-price-note,
.app-upgrade-price-foot {
    margin: 10px 0 0;
    color: #5d6966;
    line-height: 1.5;
}

.app-upgrade-price-foot {
    font-weight: 700;
    color: #845d15;
}

.app-upgrade-quote {
    padding: 16px 18px;
    margin-bottom: 18px;
    border-left: 4px solid var(--verde-secundario);
    border-radius: 0 16px 16px 0;
    background: rgba(245, 248, 247, 0.98);
    color: #40524e;
    font-style: italic;
    line-height: 1.7;
}

.app-upgrade-block {
    margin-bottom: 18px;
    padding: 18px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid rgba(26, 92, 79, 0.12);
}

.app-upgrade-block-title {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 800;
    color: var(--verde-dark);
}

.app-upgrade-list {
    margin: 0;
    padding-left: 20px;
    color: #415651;
    line-height: 1.65;
}

.app-upgrade-list li + li {
    margin-top: 8px;
}

.app-upgrade-contact-line {
    margin: 0;
    color: #415651;
    line-height: 1.7;
}

.app-upgrade-contact-line + .app-upgrade-contact-line {
    margin-top: 8px;
}

.app-upgrade-contact-line a {
    color: var(--verde-secundario);
    font-weight: 700;
    text-decoration: none;
}

.app-upgrade-contact-intro {
    margin: 0 0 14px;
    color: #5e706b;
    line-height: 1.65;
}

.app-upgrade-fastlane {
    margin-bottom: 14px;
    padding: 16px 18px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(255, 248, 225, 0.98) 0%, rgba(246, 251, 248, 0.98) 100%);
    border: 1px solid rgba(200, 150, 38, 0.18);
    box-shadow: 0 12px 28px rgba(121, 96, 27, 0.08);
}

.app-upgrade-fastlane-kicker {
    margin: 0 0 10px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #8e6a20;
}

.app-upgrade-fastlane-steps {
    margin: 0;
    padding-left: 18px;
    color: #35504a;
    line-height: 1.65;
}

.app-upgrade-fastlane-steps li + li {
    margin-top: 6px;
}

.app-upgrade-contact-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.app-upgrade-contact-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 132px;
    padding: 14px 15px;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(247, 251, 249, 0.98) 0%, rgba(239, 248, 245, 0.98) 100%);
    border: 1px solid rgba(26, 92, 79, 0.12);
    box-shadow: 0 10px 26px rgba(18, 53, 45, 0.06);
    color: #35504a;
    text-decoration: none;
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.app-upgrade-contact-card--bizum {
    grid-column: 1 / -1;
    min-height: 0;
    padding: 16px 18px;
    background: linear-gradient(135deg, rgba(255, 249, 230, 0.98) 0%, rgba(243, 251, 247, 0.98) 100%);
    border-color: rgba(200, 150, 38, 0.22);
    box-shadow: 0 14px 30px rgba(121, 96, 27, 0.10);
}

.app-upgrade-contact-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(18, 53, 45, 0.10);
    border-color: rgba(26, 92, 79, 0.22);
}

.app-upgrade-contact-label {
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8e6a20;
}

.app-upgrade-contact-value {
    display: block;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--verde-dark);
    word-break: break-word;
}

.app-upgrade-contact-meta {
    display: block;
    margin-top: auto;
    font-size: 13px;
    line-height: 1.55;
    color: #5e706b;
}

.app-upgrade-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
}

.app-upgrade-cta {
    min-width: 220px;
    min-height: 48px;
    padding: 13px 18px;
    border-radius: 12px;
    background: var(--verde-secundario);
    color: #fff !important;
    text-decoration: none !important;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 24px rgba(22, 98, 83, 0.14);
}

.app-upgrade-cta--bizum {
    background: linear-gradient(135deg, #d79b12 0%, #c88509 100%);
    color: #fff !important;
    box-shadow: 0 16px 30px rgba(180, 125, 18, 0.22);
}

.app-upgrade-cta--secondary {
    background: #1d5b50;
}

.app-upgrade-cta--ghost {
    background: rgba(239, 248, 245, 0.98);
    color: var(--verde-dark) !important;
    border: 1px solid rgba(26, 92, 79, 0.12);
    box-shadow: none;
}

.app-upgrade-footer {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(26, 92, 79, 0.10);
    color: #5c6d69;
    line-height: 1.6;
}

.app-upgrade-footer p {
    margin: 0;
}

.app-upgrade-footer p + p {
    margin-top: 4px;
}

/* --- Change password --- */
.app-password-section {
    padding: 24px 16px;
    max-width: 460px;
    margin: 0 auto;
}
.app-password-card {
    background: #fff;
    border: 1.5px solid var(--borde-suave);
    border-radius: 16px;
    padding: 28px 24px;
    text-align: center;
}
.app-password-icon {
    width: 52px;
    height: 52px;
    background: var(--verde-claro);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}
.app-password-icon i { font-size: 24px; color: var(--verde-dark); }
.app-password-title { color: var(--verde-dark); font-weight: 700; margin: 0 0 6px; }
.app-password-subtitle {
    color: var(--text-muted);
    font-size: 13px;
    margin: 0 0 20px;
    line-height: 1.5;
}
.app-password-input {
    width: 100%;
    height: 46px;
    border: 1.5px solid var(--borde-suave);
    border-radius: 10px;
    padding: 0 16px;
    font-size: 15px;
    margin-bottom: 12px;
    outline: none;
    transition: border-color 0.15s;
    box-sizing: border-box;
}
.app-password-input:focus { border-color: var(--verde-secundario); }
.app-password-btn {
    width: 100%;
    height: 46px;
    background: var(--verde-secundario);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
}
.app-password-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.app-password-btn:not(:disabled):hover { opacity: 0.88; }
.app-password-msg { margin-top: 12px; font-size: 13px; color: var(--verde-dark); }
.app-password-success {
    color: var(--verde-secundario);
    font-weight: 600;
    font-size: 15px;
    margin-top: 14px;
}

/* --- Responsive --- */
@media (max-width: 576px) {
    .app-miusuario-header {
        padding-bottom: 10px;
    }
    .app-miusuario-tabs {
        width: 100%;
        gap: 8px;
    }
    .app-miusuario-tab {
        flex: 1 1 calc(50% - 4px);
        min-width: 0;
        padding: 0 10px;
    }
    .app-miusuario-tab span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .app-upgrade-section {
        padding: 18px 10px 24px;
    }
    .app-upgrade-card {
        padding: 20px 16px;
        border-radius: 18px;
    }
    .app-upgrade-price {
        font-size: 29px;
    }
    .app-upgrade-contact-grid {
        grid-template-columns: 1fr;
    }
    .app-upgrade-contact-card {
        min-height: 0;
        padding: 14px;
    }
    .app-upgrade-contact-card--bizum {
        grid-column: auto;
    }
    .app-upgrade-contact-value {
        font-size: 20px;
    }
    .app-upgrade-cta-row {
        flex-direction: column;
    }
    .app-upgrade-cta {
        width: 100%;
        min-width: 0;
    }
    .app-profile-section { padding: 16px 10px 28px; }
    .app-profile-stack { gap: 18px; }
    .app-profile-panel { padding: 16px 13px; border-radius: 15px; }
    .app-profile-panel__head { margin: -3px -3px 14px; padding: 12px 13px; }
    .app-profile-panel__head h3 { font-size: 18px; }
    .app-profile-grid { grid-template-columns: 1fr; }
    .app-profile-stats { flex-wrap: wrap; }
    .app-profile-stat-card { min-width: calc(50% - 6px); }
    .app-profile-avatar-card {
        grid-template-columns: 1fr;
        padding: 14px;
        border-radius: 16px;
    }
    .app-profile-avatar-preview-wrap {
        align-items: center;
    }
    .app-profile-avatar-preview {
        width: 92px;
        height: 92px;
        min-width: 92px;
        font-size: 34px;
    }
    .app-profile-avatar-drop {
        min-height: 122px;
    }
    .app-profile-avatar-actions .app-profile-action {
        flex: 1 1 140px;
    }
    .app-contact-section { padding: 16px 10px 28px; }
    .app-contact-stack { gap: 18px; }
    .app-contact-panel { padding: 16px 13px; border-radius: 15px; }
    .app-contact-panel__head { margin: -3px -3px 0; padding: 12px 13px; align-items: flex-start; }
    .app-contact-panel__head--compact { margin-bottom: 14px; }
    .app-contact-panel__head h3 { font-size: 18px; }
    .app-contact-icon { width: 48px; height: 48px; min-width: 48px; border-radius: 13px; }
    .app-contact-grid { grid-template-columns: 1fr; }
    .app-contact-panel--send { display: grid; gap: 12px; }
    .app-contact-btn {
        width: 100%;
    }
}

/* =====================================================
 * Section 38 — eXamen PRO (content)
 * ===================================================== */

/* --- Active exam wrapper --- */
.app-exam-active-wrap { padding: 0; background: #fff; }

/* --- Exam title bar --- */
.app-exam-title-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--verde-dark);
    color: #fff;
    border-radius: 10px;
    padding: 10px 16px;
    margin: 10px 10px 6px;
    font-weight: 600;
    text-align: center;
}

/* --- Question text --- */
.app-exam-question-text {
    padding: 12px 16px 8px;
    margin: 0;
    font-weight: 600;
    line-height: 1.5;
    color: var(--verde-dark);
}

/* --- Options container (active exam & review) --- */
.app-exam-options {
    margin: 4px 10px 10px;
    border: 1.5px solid var(--borde-suave);
    border-radius: 12px;
    overflow: hidden;
}
.app-exam-option-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-top: 1px solid var(--borde-suave);
    transition: background 0.15s;
}
.app-exam-option-row:first-child { border-top: none; }
.app-exam-option-row:hover { background: var(--verde-claro); }

.app-exam-option-btn {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--borde-suave);
    background: #fff;
    cursor: pointer;
    font-weight: 700;
    font-size: 14px;
    color: var(--verde-dark);
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.app-exam-option-btn:hover:not(:disabled) {
    background: var(--verde-secundario);
    border-color: var(--verde-secundario);
    color: #fff;
}
.app-exam-option-btn:disabled { cursor: not-allowed; opacity: 0.6; }
.app-exam-option-letter { pointer-events: none; }
.app-exam-option-text {
    flex: 1;
    font-size: 13px;
    color: #333;
    line-height: 1.4;
}

/* --- Selected option (active exam, no correctness implied) --- */
.app-exam-option-row.option-selected { background: #f0f4ff; }
.app-exam-option-row.option-selected .app-exam-option-btn {
    background: var(--verde-secundario);
    border-color: var(--verde-secundario);
    color: #fff;
}

/* --- Review option colors --- */
.app-exam-option-row.result-user-correct { background: #e8f5e9; }
.app-exam-option-row.result-user-correct .app-exam-option-btn {
    background: #4caf50; border-color: #4caf50; color: #fff;
}
.app-exam-option-row.result-user-wrong { background: #ffebee; }
.app-exam-option-row.result-user-wrong .app-exam-option-btn {
    background: #ef5350; border-color: #ef5350; color: #fff;
}
.app-exam-option-row.result-correct-answer { background: #f1f8e9; }
.app-exam-option-row.result-correct-answer .app-exam-option-btn {
    background: #4caf50; border-color: #4caf50; color: #fff;
}

/* --- See answer button --- */
.app-exam-see-answer-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--verde-secundario);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 10px 24px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    margin: 10px auto;
    transition: opacity 0.15s;
}
.app-exam-see-answer-btn:hover { opacity: 0.88; }

/* --- Navigation grid --- */
.app-exam-nav-section {
    margin: 0 10px 12px;
    background: var(--verde-claro);
    border-radius: 12px;
    padding: 12px;
}
.app-exam-nav-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 8px;
    padding: 0;
}
.app-exam-nav-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.app-exam-nav-btn {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1.5px solid #ccc;
    background: #fff;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    color: #555;
    padding: 0;
    transition: background 0.1s, border-color 0.1s;
}
.app-exam-nav-btn:hover:not(:disabled) {
    border-color: var(--verde-secundario);
    background: #fff;
}
.app-exam-nav-btn.active,
.app-exam-nav-btn:disabled {
    background-color: var(--verde-dark) !important;
    border-color: var(--verde-dark) !important;
    color: #fff !important;
    cursor: default;
}
.app-exam-nav-btn.answered {
    background: #111 !important;
    border-color: #111 !important;
    color: #fff !important;
    font-weight: 700;
}
.app-exam-nav-btn.active.answered,
.app-exam-nav-btn.answered:disabled {
    background-color: var(--verde-dark) !important;
    border-color: var(--verde-dark) !important;
    color: #fff !important;
}
.app-exam-nav-btn.answered.correct {
    background: #e8f5e9;
    border-color: #4caf50;
    color: #2e7d32;
}
.app-exam-nav-btn.answered.wrong {
    background: #ffebee;
    border-color: #ef5350;
    color: #c62828;
}
.app-exam-nav-status {
    margin-top: 8px;
    font-size: 12px;
    color: #555;
    display: flex;
    gap: 10px;
}
.app-exam-nav-status span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.app-exam-nav-status .badge-answered {
    background: #111;
    color: #fff;
    border-radius: 12px;
    padding: 1px 8px;
    font-size: 11px;
    font-weight: 700;
}
.app-exam-nav-status .badge-unanswered {
    background: var(--verde-secundario);
    color: #fff;
    border-radius: 12px;
    padding: 1px 8px;
    font-size: 11px;
    font-weight: 700;
}

/* --- Live exam stats --- */
.app-exam-stats-wrap {
    margin: 12px 0 0;
    border-radius: 10px;
    overflow: hidden;
    border: 1.5px solid var(--borde-suave);
    background: #fff;
}
.app-exam-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.app-exam-stats-cell {
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--borde-suave);
    font-size: 13px;
}
.app-exam-stats-cell:nth-last-child(-n+2) { border-bottom: none; }
.app-exam-stats-cell.stat-answered { background: #f5f0e8; }
.app-exam-stats-cell.stat-unanswered { background: #f5f5f5; }
.app-exam-stats-cell.stat-correct { background: #e8f5e9; }
.app-exam-stats-cell.stat-wrong { background: #ffebee; }
.app-exam-stats-value {
    font-size: 18px;
    font-weight: 700;
    min-width: 28px;
    text-align: right;
}
.app-exam-stats-cell.stat-answered .app-exam-stats-value { color: #8d6e63; }
.app-exam-stats-cell.stat-unanswered .app-exam-stats-value { color: #555; }
.app-exam-stats-cell.stat-correct .app-exam-stats-value { color: #2e7d32; }
.app-exam-stats-cell.stat-wrong .app-exam-stats-value { color: #c62828; }
.app-exam-stats-label { color: #666; font-size: 12px; }
.app-exam-score-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: var(--verde-claro);
    border-top: 1.5px solid var(--borde-suave);
}
.app-exam-score-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.app-exam-score-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--verde-dark);
}

/* --- History table --- */
.app-exam-history-wrap {
    overflow-x: auto;
    border-radius: 12px;
    border: 1.5px solid var(--borde-suave);
    margin: 0 0 12px;
}
.app-exam-history-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 480px;
}
.app-exam-history-table thead tr {
    background: var(--verde-dark);
    color: #fff;
}
.app-exam-history-table thead th {
    padding: 8px 6px;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
}
.app-exam-history-table thead th:first-child {
    text-align: left;
    padding-left: 12px;
}
.app-exam-history-table tbody tr {
    border-bottom: 1px solid var(--borde-suave);
    transition: background 0.12s;
}
.app-exam-history-table tbody tr:last-child { border-bottom: none; }
.app-exam-history-table tbody tr:hover { background: var(--verde-claro); }
.app-exam-history-table tbody td {
    padding: 7px 6px;
    font-size: 12px;
    text-align: center;
    vertical-align: middle;
}
.app-exam-history-table tbody td:first-child {
    text-align: left;
    padding-left: 12px;
    font-size: 13px;
}

/* Score badge */
.app-exam-score-badge {
    display: inline-block;
    border-radius: 6px;
    padding: 2px 8px;
    font-weight: 700;
    font-size: 12px;
    color: #fff;
    min-width: 36px;
    text-align: center;
}
.score-deep-orange { background: #ff5722; }
.score-orange      { background: #ff9800; }
.score-amber       { background: #ffc107; color: #333; }
.score-light-green { background: #8bc34a; }
.score-green       { background: #4caf50; }
.score-teal        { background: #009688; }
.score-olive       { background: #808000; }
.score-purple      { background: #9c27b0; }

/* History action buttons */
.app-exam-action-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1.5px solid var(--borde-suave);
    background: #fff;
    cursor: pointer;
    color: var(--verde-dark);
    font-size: 16px;
    transition: background 0.12s, border-color 0.12s;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.app-exam-action-btn:hover {
    background: var(--verde-claro);
    border-color: var(--verde-secundario);
}

/* --- Color legend --- */
.app-exam-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    padding: 8px 4px 12px;
}
.app-exam-legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #555;
}
.app-exam-legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
}

/* --- Instructions box --- */
.app-exam-instructions {
    background: var(--verde-claro);
    border-radius: 10px;
    padding: 12px 16px;
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 1.9;
    color: #444;
}

/* --- Desmarcar button --- */
.app-exam-desmarcar-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1.5px solid var(--borde-suave);
    border-radius: 8px;
    padding: 4px 12px;
    font-size: 12px;
    cursor: pointer;
    color: #555;
    transition: background 0.12s;
}
.app-exam-desmarcar-btn:hover { background: var(--verde-claro); }

/* --- Responsive --- */
@media (max-width: 576px) {
    .app-home-wrap {
        padding: 0;
    }
    .app-hero-demo-upgrade {
        gap: 10px;
    }
    .app-hero-demo-upgrade-cta {
        flex: 1 1 100%;
        width: 100%;
    }
    .app-hero-demo-upgrade-btn {
        width: 100%;
        min-width: 0;
        min-height: 76px;
        border-radius: 18px;
        padding: 12px 16px;
    }
    .app-hero-demo-upgrade-btn-label {
        font-size: 22px;
    }
    .app-hero-demo-upgrade-copy {
        width: 100%;
    }
    .app-quick-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }
    .app-quick-grid > div {
        min-width: 0;
    }
    .app-home-btn {
        min-width: 0;
    }
    .app-home-btn span {
        display: block;
        width: 100%;
        min-width: 0;
        font-size: 13px !important;
        line-height: 1.15;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .app-demo-tag {
        padding: 2px 8px;
        font-size: 10px;
        letter-spacing: 0.05em;
    }

    .app-temas-header-left,
    .app-preguntas-header-left,
    .app-examen-header-left,
    .app-stats-header-left,
    .app-glosario-header-left,
    .app-miusuario-header-left {
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 6px 10px;
    }

    .app-preguntas-info-btn,
    .app-module-guide-btn {
        min-width: 94px !important;
        height: 42px !important;
        gap: 8px;
        padding: 0 12px 0 8px !important;
    }

    .app-preguntas-info-btn__icon,
    .app-module-guide-btn__icon {
        width: 26px;
        height: 26px;
    }

    .app-preguntas-info-btn__mark,
    .app-module-guide-btn__mark {
        font-size: 16px;
    }

    .app-preguntas-info-btn__label,
    .app-module-guide-btn__label {
        font-size: 12px;
    }

    .app-temas-header-titles,
    .app-preguntas-header-titles,
    .app-examen-header-titles,
    .app-stats-header-titles,
    .app-glosario-header-titles,
    .app-miusuario-header-titles {
        flex: 1 1 calc(100% - 54px);
        min-width: 0;
    }

    .app-demo-tag {
        margin-left: 54px;
        padding: 3px 8px;
        max-width: calc(100% - 54px);
    }

    .app-examen-header-left {
        align-items: flex-start;
        flex-wrap: wrap;
    }
    .app-examen-header-titles {
        flex: 1 1 120px;
    }
    .app-examen-subtitle {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        line-height: 1.25;
    }

    .app-stats-header {
        gap: 8px;
    }
    .app-stats-tabs {
        width: 100%;
    }
    .app-stats-tab-btn {
        flex: 1 1 0;
        justify-content: center;
        padding: 6px 10px !important;
    }
    #divTablaEstadisticasRondas {
        margin: 10px 0 !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    #divTablaEstadisticasRondas table {
        width: 100% !important;
        min-width: 0 !important;
        table-layout: fixed;
    }
    #cabeceraTablaRondas th {
        font-size: 9px !important;
        padding: 6px 2px !important;
        line-height: 1.15;
    }
    #cabeceraTablaRondas th .letra3,
    #cabeceraTablaRondas th .letra4 {
        font-size: 9px !important;
    }
    #cabeceraTablaRondas th table {
        height: 24px !important;
    }
    .ordenarPorEstaColumnaTablaRondas {
        width: 16px !important;
        height: 16px !important;
    }
    #putoCuerpoTablaRondicasDeLosCojones td {
        font-size: 11px !important;
        padding: 4px 3px !important;
        line-height: 1.2;
        word-break: break-word;
    }
    #putoCuerpoTablaRondicasDeLosCojones td:first-child {
        width: 64px;
    }
    #putoCuerpoTablaRondicasDeLosCojones td:last-child {
        width: 64px !important;
    }
    .app-stats-score-top {
        font-size: 10px;
        white-space: nowrap;
    }
    .app-stats-score-bar-wrap {
        height: 6px;
        margin-top: 4px;
    }
    .app-stats-row-actions {
        gap: 4px;
    }
    .app-stats-row-action,
    .classBotonVerPreguntasEstadisticasRondaSeleccionada {
        width: 28px !important;
        min-width: 28px !important;
        height: 28px !important;
    }
    .classBotonBorrarRondaSeleccionada {
        width: 24px !important;
        height: 24px !important;
    }

    .app-exam-nav-btn { width: 30px; height: 30px; font-size: 10px; }
    .app-exam-stats-grid { grid-template-columns: 1fr 1fr; }
    .app-stats-chart-hdr {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
    .app-stats-focus-header,
    .app-stats-focus-body {
        flex-direction: column;
        align-items: flex-start;
    }
    .app-stats-focus-score {
        min-width: 0;
        font-size: 38px;
    }
    .app-stats-recent-grid {
        grid-template-columns: 1fr;
    }

    /* Home mobile spacing & density 2026-05-01 */
    .app-home-wrap > .app-home-hero,
    .app-home-wrap > .app-dashboard-card,
    .app-home-wrap > .app-home-infografias,
    .app-home-wrap > .d-lg-none,
    .app-home-wrap > #cuerpecilloFormularioSugerencias,
    .app-home-wrap > .app-box-accent,
    .app-home-wrap > .w3-center {
        margin-top: 16px !important;
    }

    .app-home-hero {
        padding: 12px 14px !important;
    }

    .app-hero-greeting {
        font-size: 18px;
    }

    .app-hero-subtitle {
        font-size: 12px;
    }

    .app-dashboard-card {
        padding: 12px !important;
    }

    .app-section-title {
        font-size: 15px;
    }

    .app-home-wrap .letra1.tipoLetra4 {
        font-size: 16px;
    }

    .app-hero-demo-upgrade {
        margin-top: 14px;
        gap: 10px;
    }

    .app-hero-demo-upgrade-cta {
        flex: 1 1 100%;
        width: 100%;
    }

    .app-hero-demo-upgrade-btn {
        width: 100%;
        min-height: 72px;
        padding: 12px 14px;
        border-radius: 18px;
    }

    .app-hero-demo-upgrade-btn-kicker {
        font-size: 10px;
    }

    .app-hero-demo-upgrade-btn-label {
        font-size: 21px;
    }

    .app-hero-demo-upgrade-title {
        font-size: 16px;
    }

    .app-hero-demo-upgrade-text {
        font-size: 13px;
        line-height: 1.4;
    }

    .app-kpi-card {
        min-height: 68px !important;
        padding: 6px 4px 5px !important;
        gap: 2px !important;
    }

    .app-kpi-label {
        font-size: 9px !important;
    }

    .app-kpi-num-wrap .w3-btn span,
    .app-kpi-num-wrap button span {
        font-size: 22px !important;
    }

    .app-progress-bar-bg {
        height: 7px;
    }

    .app-pct-acierto {
        font-size: 14px !important;
    }

    .app-ronda-row {
        padding-top: 8px;
    }

    .app-home-btn {
        height: 38px !important;
        padding: 2px 4px !important;
    }

    .app-home-infografias {
        padding: 10px !important;
    }

    .app-home-infografias__top {
        padding: 10px 10px 0 10px;
    }

    .app-home-infografias__stage {
        padding: 8px 10px 0 10px;
    }

    .app-home-infografias__card {
        border-radius: 16px;
        box-shadow: 0 8px 18px rgba(26, 92, 79, 0.06);
    }

    .app-home-infografias__title {
        font-size: 17px;
    }

    .app-home-infografias__copy {
        padding: 10px 12px;
        gap: 6px;
    }

    .app-home-infografias__pill {
        min-height: 24px;
        padding: 3px 9px;
        font-size: 11px;
    }

    .app-feedback-demo-card {
        padding: 12px;
        border-radius: 16px;
    }

    .app-feedback-demo-title {
        font-size: 18px;
    }

    .app-feedback-demo-text {
        font-size: 13px;
    }

    .app-feedback-demo-card .app-feedback-toggle {
        padding: 11px 14px !important;
        font-size: 14px;
    }

    .app-feedback-demo-cta-main {
        gap: 10px;
    }

    .app-feedback-demo-cta-badge svg {
        width: 32px;
        height: 32px;
    }

    .app-feedback-demo-status {
        font-size: 13px;
        padding: 11px 12px;
    }

    .app-telegram-bar {
        padding: 10px 12px;
    }

    .app-home-upgrade-modal__dialog {
        max-width: calc(100vw - 12px);
        margin: 6px auto;
    }

    .app-home-upgrade-modal__content {
        border-radius: 18px;
    }

    .app-home-upgrade-modal__header {
        padding: 14px 14px 10px;
    }

    .app-home-upgrade-modal__body .app-upgrade-section {
        padding: 14px 12px 18px;
    }

    .app-telegram-bar .letra4 {
        font-size: 13px;
    }
}
.app-justi-unified-list {
    display: grid;
    gap: 1rem;
}

.app-justi-unified-list .app-search-response-item,
.app-justi-unified-list .app-search-response-item--static {
    position: relative;
    overflow: hidden;
    border-radius: 26px;
    padding: 1.15rem 1.25rem 1.2rem;
    border: 2px solid rgba(24, 108, 92, 0.18);
    box-shadow: 0 22px 44px rgba(19, 58, 50, 0.08);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(247, 252, 250, 0.96) 100%);
}

.app-justi-unified-list .app-search-response-item.correcta,
.app-justi-unified-list .app-search-response-item--static.correcta {
    border-color: rgba(53, 146, 124, 0.30);
    background:
        linear-gradient(180deg, rgba(247, 254, 251, 0.99) 0%, rgba(236, 248, 244, 0.97) 100%);
    box-shadow: 0 24px 48px rgba(23, 106, 89, 0.10);
}

.app-justi-unified-list .app-search-response-item.incorrecta,
.app-justi-unified-list .app-search-response-item--static.incorrecta {
    border-color: rgba(181, 118, 112, 0.30);
    background:
        linear-gradient(180deg, rgba(255, 251, 250, 0.99) 0%, rgba(252, 245, 244, 0.97) 100%);
    box-shadow: 0 24px 48px rgba(111, 61, 57, 0.08);
}

.app-justi-unified-list .app-search-response-item::before,
.app-justi-unified-list .app-search-response-item--static::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    border-radius: 26px;
    background: linear-gradient(180deg, #5dceb1 0%, #1b7d69 100%);
    opacity: 0.95;
}

.app-justi-unified-list .app-search-response-item.incorrecta::before,
.app-justi-unified-list .app-search-response-item--static.incorrecta::before {
    background: linear-gradient(180deg, #d6a29a 0%, #b9756d 100%);
}

.app-justi-unified-list .app-search-response-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 0 0.9rem;
    margin: 0 0 0.95rem;
    border-bottom: 1px solid rgba(33, 92, 79, 0.10);
}

.app-justi-unified-list .app-search-response-item.incorrecta .app-search-response-top,
.app-justi-unified-list .app-search-response-item--static.incorrecta .app-search-response-top {
    border-bottom-color: rgba(136, 79, 73, 0.12);
}

.app-justi-unified-list .app-search-response-text {
    font-family: 'Montserrat', 'Open Sans', sans-serif;
    font-size: 1.12rem;
    line-height: 1.35;
    font-weight: 700;
    color: #274c45;
    letter-spacing: -0.01em;
}

.app-justi-unified-list .app-search-response-item.incorrecta .app-search-response-text,
.app-justi-unified-list .app-search-response-item--static.incorrecta .app-search-response-text {
    color: #6e4a46;
}

.app-justi-unified-list .app-search-resp-chip {
    flex-shrink: 0;
    align-self: flex-start;
    min-width: 114px;
    padding: 0.48rem 0.9rem;
    border-radius: 999px;
    border: 1px solid rgba(68, 154, 132, 0.24);
    background: rgba(255, 255, 255, 0.82);
    color: #5e9f92;
    text-align: center;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.app-justi-unified-list .app-search-response-item.incorrecta .app-search-resp-chip,
.app-justi-unified-list .app-search-response-item--static.incorrecta .app-search-resp-chip {
    border-color: rgba(193, 137, 130, 0.24);
    color: #bb8178;
    background: rgba(255, 255, 255, 0.8);
}

.app-justi-unified-list .justificacion {
    margin: 0;
    color: #264741;
}

.app-justi-unified-list .app-search-response-item.incorrecta .justificacion,
.app-justi-unified-list .app-search-response-item--static.incorrecta .justificacion {
    color: #5a4542;
}

.app-justi-unified-list .app-search-rich-html {
    display: grid;
    gap: 1rem;
}

.app-justi-unified-list .app-search-rich-html p {
    margin: 0;
    font-size: 1.03rem;
    line-height: 1.82;
    color: inherit;
}

.app-justi-unified-list .app-search-rich-html strong {
    font-weight: 800;
}

.app-justi-unified-list .app-search-rich-html h2,
.app-justi-unified-list .app-search-rich-html h3,
.app-justi-unified-list .app-search-rich-html h4 {
    margin: 0.35rem 0 0.2rem;
    padding: 0 0 0.7rem;
    border-bottom: 1px solid rgba(43, 104, 90, 0.16);
    font-family: 'Montserrat', 'Open Sans', sans-serif;
    font-size: 0.76rem;
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #8e5f59;
}

.app-justi-unified-list .app-search-response-item.correcta .app-search-rich-html h2,
.app-justi-unified-list .app-search-response-item.correcta .app-search-rich-html h3,
.app-justi-unified-list .app-search-response-item.correcta .app-search-rich-html h4,
.app-justi-unified-list .app-search-response-item--static.correcta .app-search-rich-html h2,
.app-justi-unified-list .app-search-response-item--static.correcta .app-search-rich-html h3,
.app-justi-unified-list .app-search-response-item--static.correcta .app-search-rich-html h4 {
    color: #2b7b69;
    border-bottom-color: rgba(43, 123, 105, 0.18);
}

.app-justi-unified-list .app-search-response-item.incorrecta .app-search-rich-html h2,
.app-justi-unified-list .app-search-response-item.incorrecta .app-search-rich-html h3,
.app-justi-unified-list .app-search-response-item.incorrecta .app-search-rich-html h4,
.app-justi-unified-list .app-search-response-item--static.incorrecta .app-search-rich-html h2,
.app-justi-unified-list .app-search-response-item--static.incorrecta .app-search-rich-html h3,
.app-justi-unified-list .app-search-response-item--static.incorrecta .app-search-rich-html h4 {
    color: #a1645d;
    border-bottom-color: rgba(161, 100, 93, 0.18);
}

.app-justi-unified-list .app-search-rich-html ul,
.app-justi-unified-list .app-search-rich-html ol {
    margin: 0.1rem 0 0.1rem 0;
    padding: 0;
    list-style: none;
}

.app-justi-unified-list .app-search-rich-html li {
    position: relative;
    margin: 0 0 0.62rem;
    padding-left: 1.1rem;
    line-height: 1.7;
}

.app-justi-unified-list .app-search-rich-html li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.78rem;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #3d9d87;
    transform: translateY(-50%);
}

.app-justi-unified-list .app-search-response-item.incorrecta .app-search-rich-html li::before,
.app-justi-unified-list .app-search-response-item--static.incorrecta .app-search-rich-html li::before {
    background: #c1837b;
}

.app-justi-unified-list .app-search-rich-html table {
    margin-top: 0.5rem;
    border-radius: 20px;
    overflow: hidden;
    box-shadow:
        inset 0 0 0 1px rgba(40, 106, 92, 0.08),
        0 12px 26px rgba(31, 85, 74, 0.06);
}

.app-justi-unified-list .app-search-rich-html th {
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.app-justi-unified-list .app-search-rich-html td {
    font-size: 0.94rem;
    line-height: 1.55;
}

.app-modal-preguntas-lista {
    display: grid;
    gap: 1rem;
}

.app-search-question-card--historial {
    border: 1px solid rgba(25, 96, 82, 0.14);
    border-radius: 28px;
    background:
        linear-gradient(180deg, rgba(242, 251, 248, 0.98) 0%, rgba(255,255,255,0.99) 34%, rgba(250, 253, 252, 0.98) 100%);
    box-shadow:
        0 28px 64px rgba(20, 67, 58, 0.10),
        0 8px 18px rgba(20, 67, 58, 0.05);
    overflow: hidden;
    isolation: isolate;
}

.app-search-question-card--historial .app-search-question-head {
    padding: 1.2rem 1.25rem 1.05rem 1.35rem;
    border-bottom: 1px solid rgba(25, 96, 82, 0.10);
    background:
        linear-gradient(180deg, rgba(235, 248, 244, 0.98) 0%, rgba(244, 252, 249, 0.96) 100%);
    position: relative;
}

.app-search-question-card--historial .app-search-question-head::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 6px;
    background: linear-gradient(180deg, #5dceb1 0%, #1c7e69 100%);
}

.app-search-question-card--historial .app-search-question-head::after {
    content: "PREGUNTA";
    position: absolute;
    right: 1.15rem;
    top: 0.85rem;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    color: rgba(32, 101, 86, 0.44);
}

.app-search-question-card--historial .app-search-question-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.app-search-question-card--historial .app-search-question-title {
    margin: 0;
    color: #1f5f52;
    font-weight: 800;
    line-height: 1.32;
    font-size: 1.24rem;
    max-width: 90%;
}

.app-search-question-card--historial .app-search-question-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 1rem;
}

.app-search-question-card--historial .app-search-meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    padding: 0.42rem 0.78rem;
    border-radius: 999px;
    border: 1px solid rgba(29, 100, 85, 0.14);
    background: rgba(255,255,255,0.82);
    color: #35685e;
    font-size: 0.79rem;
    font-weight: 700;
    line-height: 1;
}

.app-search-question-card--historial .app-search-meta-chip--success {
    border-color: rgba(56, 150, 118, 0.22);
    color: #1f8a67;
    background: rgba(240, 251, 245, 0.96);
}

.app-search-question-card--historial .app-search-meta-chip--danger {
    border-color: rgba(191, 124, 117, 0.2);
    color: #b06f68;
    background: rgba(255, 247, 246, 0.96);
}

.app-search-question-card--historial .app-search-question-tools {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.9rem;
}

.app-search-question-card--historial .app-search-question-body {
    position: relative;
    padding: 1.15rem 1.15rem 1.2rem;
    background: transparent;
}

.app-search-question-card--historial .app-search-question-body > * {
    position: relative;
    z-index: 1;
}

.app-search-question-card--historial .app-justi-unified-list {
    gap: 1rem;
}

#elTemaModal .app-search-question-card--tema {
    margin: 0;
}

#elTemaModal .app-search-question-card--tema .app-search-question-title {
    max-width: 100%;
}

#elTemaModal .app-search-question-card--tema .app-search-question-body {
    padding-top: 0.08rem;
}

.app-search-question-section-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem;
    padding: 0 0 0.7rem;
    border-bottom: 1px solid rgba(34, 111, 94, 0.14);
    color: #2f7667;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.app-search-question-section-label::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #3da48c;
}

.app-search-question-card--historial .app-justi-unified-list .app-search-response-item,
.app-search-question-card--historial .app-justi-unified-list .app-search-response-item--static {
    margin-top: 0;
}

.app-search-question-card--historial + .app-search-question-card--historial {
    margin-top: 1.35rem;
}

@media (max-width: 767px) {
    .app-justi-unified-list {
        gap: 0.85rem;
    }

    .app-justi-unified-list .app-search-response-item,
    .app-justi-unified-list .app-search-response-item--static {
        border-radius: 22px;
        padding: 1rem 1rem 1.05rem;
    }

    .app-justi-unified-list .app-search-response-top {
        gap: 0.7rem;
        padding-bottom: 0.8rem;
        margin-bottom: 0.8rem;
    }

    .app-justi-unified-list .app-search-response-text {
        font-size: 1rem;
    }

    .app-justi-unified-list .app-search-resp-chip {
        min-width: 96px;
        padding: 0.42rem 0.72rem;
        font-size: 0.69rem;
        letter-spacing: 0.07em;
    }

    .app-justi-unified-list .app-search-rich-html p {
        font-size: 0.96rem;
        line-height: 1.62;
    }

    .app-justi-unified-list .app-search-rich-html td {
        font-size: 0.88rem;
    }

    .app-search-question-card--historial {
        border-radius: 22px;
    }

    .app-search-question-card--historial .app-search-question-head {
        padding: 1rem 0.95rem 0.9rem 1rem;
    }

    .app-search-question-card--historial .app-search-question-title {
        font-size: 1rem;
        max-width: 100%;
    }

    .app-search-question-card--historial .app-search-question-body {
        padding: 0.9rem 0.9rem 1rem;
    }

    .app-search-question-card--historial .app-search-meta-chip {
        font-size: 0.72rem;
    }

    .app-search-question-section-label {
        margin-bottom: 0.8rem;
        font-size: 0.68rem;
        letter-spacing: 0.08em;
    }

    .app-search-question-card--historial .app-search-question-head::after {
        top: 0.75rem;
        right: 0.9rem;
        font-size: 0.62rem;
    }
}

/* 2026-04-18 16:31 - Afinado final: borders un poco mas anchos en cada justificacion */
.app-justi-unified-list .app-search-response-item,
.app-search-response-item,
.app-search-question-card--historial .app-search-response-item {
  border-width: 3px;
}

.app-justi-unified-list .app-search-response-item--correct,
.app-search-response-item--correct,
.app-search-question-card--historial .app-search-response-item--correct {
  border-width: 3px;
}

.app-justi-unified-list .app-search-response-item--incorrect,
.app-search-response-item--incorrect,
.app-search-question-card--historial .app-search-response-item--incorrect {
  border-width: 3px;
}

/* 2026-04-18 16:38 - Pulido PRO de lectura para opositor en visor unificado */
.app-justi-unified-list,
.app-search-question-card--historial .app-justi-unified-list {
  gap: 1.2rem;
}

.app-justi-unified-list .app-search-response-item,
.app-search-response-item,
.app-search-question-card--historial .app-search-response-item {
  border-radius: 24px;
  padding: 1.22rem 1.35rem 1.3rem;
  box-shadow: 0 18px 44px rgba(12, 65, 56, 0.05);
}

.app-justi-unified-list .app-search-response-item__title,
.app-search-response-item__title,
.app-search-question-card--historial .app-search-response-item__title {
  font-size: clamp(1rem, 1.5vw, 1.16rem);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.app-justi-unified-list .app-search-response-item__status,
.app-search-response-item__status,
.app-search-question-card--historial .app-search-response-item__status {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  padding: 0.48rem 0.8rem;
}

.app-justi-unified-list .app-search-response-item p,
.app-justi-unified-list .app-search-response-item li,
.app-search-response-item p,
.app-search-response-item li,
.app-search-question-card--historial .app-search-response-item p,
.app-search-question-card--historial .app-search-response-item li {
  max-width: 76ch;
  font-size: 0.99rem;
  line-height: 1.78;
  color: #355753;
}

.app-justi-unified-list .app-search-response-item p,
.app-search-response-item p,
.app-search-question-card--historial .app-search-response-item p {
  margin: 0.72rem 0 0;
}

.app-justi-unified-list .app-search-response-item p:first-of-type,
.app-search-response-item p:first-of-type,
.app-search-question-card--historial .app-search-response-item p:first-of-type {
  margin-top: 0.95rem;
  color: #274743;
  font-size: 1.02rem;
}

.app-justi-unified-list .app-search-response-item ul,
.app-justi-unified-list .app-search-response-item ol,
.app-search-response-item ul,
.app-search-response-item ol,
.app-search-question-card--historial .app-search-response-item ul,
.app-search-question-card--historial .app-search-response-item ol {
  max-width: 76ch;
  margin: 0.9rem 0 0 0;
  padding-left: 1.15rem;
}

.app-justi-unified-list .app-search-response-item li + li,
.app-search-response-item li + li,
.app-search-question-card--historial .app-search-response-item li + li {
  margin-top: 0.36rem;
}

.app-justi-unified-list .app-search-response-item h1,
.app-justi-unified-list .app-search-response-item h2,
.app-justi-unified-list .app-search-response-item h3,
.app-justi-unified-list .app-search-response-item h4,
.app-justi-unified-list .app-search-response-item h5,
.app-justi-unified-list .app-search-response-item h6,
.app-search-response-item h1,
.app-search-response-item h2,
.app-search-response-item h3,
.app-search-response-item h4,
.app-search-response-item h5,
.app-search-response-item h6,
.app-search-question-card--historial .app-search-response-item h1,
.app-search-question-card--historial .app-search-response-item h2,
.app-search-question-card--historial .app-search-response-item h3,
.app-search-question-card--historial .app-search-response-item h4,
.app-search-question-card--historial .app-search-response-item h5,
.app-search-question-card--historial .app-search-response-item h6 {
  max-width: 76ch;
  margin: 1.15rem 0 0.45rem;
  color: #7b645f;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.app-justi-unified-list .app-search-response-item table,
.app-search-response-item table,
.app-search-question-card--historial .app-search-response-item table {
  max-width: 76ch;
  margin-top: 1rem;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(48, 131, 111, 0.12);
}

.app-justi-unified-list .app-search-response-item blockquote,
.app-search-response-item blockquote,
.app-search-question-card--historial .app-search-response-item blockquote {
  max-width: 72ch;
  margin: 1rem 0 0;
  padding: 0.85rem 1rem;
  border-left: 4px solid rgba(37, 142, 217, 0.9);
  background: rgba(37, 142, 217, 0.06);
  border-radius: 0 14px 14px 0;
  color: #365c6c;
  font-style: italic;
}

.app-search-question-card--historial .app-search-question-title {
  max-width: 56rem;
  font-size: clamp(1.08rem, 1.7vw, 1.28rem);
  line-height: 1.34;
}

.app-search-question-card--historial .app-search-question-meta {
  gap: 0.45rem;
}

.app-search-question-card--historial .app-search-question-meta .chip,
.app-search-question-card--historial .app-search-question-meta .app-chip {
  font-size: 0.68rem;
  padding: 0.32rem 0.62rem;
}

@media (max-width: 767px) {
  .app-justi-unified-list .app-search-response-item,
  .app-search-response-item,
  .app-search-question-card--historial .app-search-response-item {
    border-radius: 20px;
    padding: 1rem 0.92rem 1.06rem;
  }

  .app-justi-unified-list .app-search-response-item__title,
  .app-search-response-item__title,
  .app-search-question-card--historial .app-search-response-item__title {
    font-size: 0.98rem;
  }

  .app-justi-unified-list .app-search-response-item p,
  .app-justi-unified-list .app-search-response-item li,
  .app-search-response-item p,
  .app-search-response-item li,
  .app-search-question-card--historial .app-search-response-item p,
  .app-search-question-card--historial .app-search-response-item li {
    font-size: 0.95rem;
    line-height: 1.7;
  }
}

/* 2026-04-18 16:42 - Tablas de justificacion sin azul, con branding por estado */
.app-justi-unified-list .app-search-response-item table,
.app-search-response-item table,
.app-search-question-card--historial .app-search-response-item table {
  background: #ffffff;
}

.app-justi-unified-list .app-search-response-item thead th,
.app-search-response-item thead th,
.app-search-question-card--historial .app-search-response-item thead th {
  color: #284944;
  background: #edf5f1;
}

.app-justi-unified-list .app-search-response-item tbody td,
.app-search-response-item tbody td,
.app-search-question-card--historial .app-search-response-item tbody td {
  background: rgba(255, 255, 255, 0.92);
}

.app-justi-unified-list .app-search-response-item--correct table,
.app-search-response-item--correct table,
.app-search-question-card--historial .app-search-response-item--correct table {
  box-shadow: inset 0 0 0 1px rgba(39, 156, 120, 0.18);
}

.app-justi-unified-list .app-search-response-item--correct thead th,
.app-search-response-item--correct thead th,
.app-search-question-card--historial .app-search-response-item--correct thead th {
  background: linear-gradient(180deg, #2c9d7a 0%, #247f66 100%);
  color: #f7fffc;
  border-color: rgba(255, 255, 255, 0.12);
}

.app-justi-unified-list .app-search-response-item--correct tbody td,
.app-search-response-item--correct tbody td,
.app-search-question-card--historial .app-search-response-item--correct tbody td {
  background: rgba(240, 250, 246, 0.96);
  border-color: rgba(43, 136, 109, 0.14);
  color: #355753;
}

.app-justi-unified-list .app-search-response-item--incorrect table,
.app-search-response-item--incorrect table,
.app-search-question-card--historial .app-search-response-item--incorrect table {
  box-shadow: inset 0 0 0 1px rgba(188, 129, 118, 0.18);
}

.app-justi-unified-list .app-search-response-item--incorrect thead th,
.app-search-response-item--incorrect thead th,
.app-search-question-card--historial .app-search-response-item--incorrect thead th {
  background: linear-gradient(180deg, #c89288 0%, #b47c73 100%);
  color: #fffaf9;
  border-color: rgba(255, 255, 255, 0.1);
}

.app-justi-unified-list .app-search-response-item--incorrect tbody td,
.app-search-response-item--incorrect tbody td,
.app-search-question-card--historial .app-search-response-item--incorrect tbody td {
  background: rgba(252, 245, 244, 0.96);
  border-color: rgba(188, 129, 118, 0.14);
  color: #5a4a48;
}

/* 2026-04-18 16:45 - Quitar doble linea entre cabecera de respuesta y comienzo de justificacion */
.app-justi-unified-list .app-search-response-item > div:last-child,
.app-search-response-item > div:last-child,
.app-search-question-card--historial .app-search-response-item > div:last-child {
  border-top: 0 !important;
  box-shadow: none !important;
}

.app-justi-unified-list .app-search-response-item > div:last-child::before,
.app-justi-unified-list .app-search-response-item > div:last-child::after,
.app-search-response-item > div:last-child::before,
.app-search-response-item > div:last-child::after,
.app-search-question-card--historial .app-search-response-item > div:last-child::before,
.app-search-question-card--historial .app-search-response-item > div:last-child::after {
  display: none !important;
  content: none !important;
}

.app-justi-unified-list .app-search-response-item h1:first-child,
.app-justi-unified-list .app-search-response-item h2:first-child,
.app-justi-unified-list .app-search-response-item h3:first-child,
.app-justi-unified-list .app-search-response-item h4:first-child,
.app-justi-unified-list .app-search-response-item h5:first-child,
.app-justi-unified-list .app-search-response-item h6:first-child,
.app-search-response-item h1:first-child,
.app-search-response-item h2:first-child,
.app-search-response-item h3:first-child,
.app-search-response-item h4:first-child,
.app-search-response-item h5:first-child,
.app-search-response-item h6:first-child,
.app-search-question-card--historial .app-search-response-item h1:first-child,
.app-search-question-card--historial .app-search-response-item h2:first-child,
.app-search-question-card--historial .app-search-response-item h3:first-child,
.app-search-question-card--historial .app-search-response-item h4:first-child,
.app-search-question-card--historial .app-search-response-item h5:first-child,
.app-search-question-card--historial .app-search-response-item h6:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}

.app-justi-unified-list .app-search-response-item hr,
.app-search-response-item hr,
.app-search-question-card--historial .app-search-response-item hr {
  display: none !important;
}

/* 2026-04-18 16:48 - Quitar cualquier separador restante entre titulo y justificacion */
.app-justi-unified-list .app-search-response-item > div:first-child,
.app-search-response-item > div:first-child,
.app-search-question-card--historial .app-search-response-item > div:first-child {
  border-bottom: 0 !important;
  box-shadow: none !important;
}

.app-justi-unified-list .app-search-response-item > div:first-child::before,
.app-justi-unified-list .app-search-response-item > div:first-child::after,
.app-search-response-item > div:first-child::before,
.app-search-response-item > div:first-child::after,
.app-search-question-card--historial .app-search-response-item > div:first-child::before,
.app-search-question-card--historial .app-search-response-item > div:first-child::after {
  display: none !important;
  content: none !important;
}

/* 2026-04-18 16:50 - Quitar linea real del top de cada respuesta */
.app-justi-unified-list .app-search-response-top,
.app-search-response-top,
.app-search-question-card--historial .app-search-response-top {
  border-bottom: 0 !important;
}

/* 2026-04-18 16:56 - Mas intensidad en apartados internos de justificacion */
.app-justi-unified-list .app-search-response-item h1,
.app-justi-unified-list .app-search-response-item h2,
.app-justi-unified-list .app-search-response-item h3,
.app-justi-unified-list .app-search-response-item h4,
.app-justi-unified-list .app-search-response-item h5,
.app-justi-unified-list .app-search-response-item h6,
.app-search-response-item h1,
.app-search-response-item h2,
.app-search-response-item h3,
.app-search-response-item h4,
.app-search-response-item h5,
.app-search-response-item h6,
.app-search-question-card--historial .app-search-response-item h1,
.app-search-question-card--historial .app-search-response-item h2,
.app-search-question-card--historial .app-search-response-item h3,
.app-search-question-card--historial .app-search-response-item h4,
.app-search-question-card--historial .app-search-response-item h5,
.app-search-question-card--historial .app-search-response-item h6 {
  color: #48756c;
  font-size: 0.83rem;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

/* 2026-04-18 17:00 - Apartados internos con presencia PRO real */
.app-justi-unified-list .app-search-response-item h1,
.app-justi-unified-list .app-search-response-item h2,
.app-justi-unified-list .app-search-response-item h3,
.app-justi-unified-list .app-search-response-item h4,
.app-justi-unified-list .app-search-response-item h5,
.app-justi-unified-list .app-search-response-item h6,
.app-search-response-item h1,
.app-search-response-item h2,
.app-search-response-item h3,
.app-search-response-item h4,
.app-search-response-item h5,
.app-search-response-item h6,
.app-search-question-card--historial .app-search-response-item h1,
.app-search-question-card--historial .app-search-response-item h2,
.app-search-question-card--historial .app-search-response-item h3,
.app-search-question-card--historial .app-search-response-item h4,
.app-search-question-card--historial .app-search-response-item h5,
.app-search-question-card--historial .app-search-response-item h6 {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  width: auto;
  max-width: 100%;
  margin: 1.2rem 0 0.65rem;
  padding: 0.48rem 0.76rem 0.44rem;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(43, 136, 109, 0.16) 0%, rgba(43, 136, 109, 0.08) 100%);
  box-shadow: inset 0 0 0 1px rgba(43, 136, 109, 0.16);
  color: #2f5e56;
  font-size: 0.86rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.app-search-response-item--incorrect h1,
.app-search-response-item--incorrect h2,
.app-search-response-item--incorrect h3,
.app-search-response-item--incorrect h4,
.app-search-response-item--incorrect h5,
.app-search-response-item--incorrect h6,
.app-search-question-card--historial .app-search-response-item--incorrect h1,
.app-search-question-card--historial .app-search-response-item--incorrect h2,
.app-search-question-card--historial .app-search-response-item--incorrect h3,
.app-search-question-card--historial .app-search-response-item--incorrect h4,
.app-search-question-card--historial .app-search-response-item--incorrect h5,
.app-search-question-card--historial .app-search-response-item--incorrect h6 {
  background: linear-gradient(180deg, rgba(188, 129, 118, 0.16) 0%, rgba(188, 129, 118, 0.08) 100%);
  box-shadow: inset 0 0 0 1px rgba(188, 129, 118, 0.17);
  color: #8a5b54;
}

/* 2026-04-18 17:12 - El contenido de justificacion ocupa todo el ancho disponible */
.app-justi-unified-list .app-search-response-item p,
.app-justi-unified-list .app-search-response-item li,
.app-justi-unified-list .app-search-response-item ul,
.app-justi-unified-list .app-search-response-item ol,
.app-justi-unified-list .app-search-response-item h1,
.app-justi-unified-list .app-search-response-item h2,
.app-justi-unified-list .app-search-response-item h3,
.app-justi-unified-list .app-search-response-item h4,
.app-justi-unified-list .app-search-response-item h5,
.app-justi-unified-list .app-search-response-item h6,
.app-justi-unified-list .app-search-response-item table,
.app-search-response-item p,
.app-search-response-item li,
.app-search-response-item ul,
.app-search-response-item ol,
.app-search-response-item h1,
.app-search-response-item h2,
.app-search-response-item h3,
.app-search-response-item h4,
.app-search-response-item h5,
.app-search-response-item h6,
.app-search-response-item table,
.app-search-question-card--historial .app-search-response-item p,
.app-search-question-card--historial .app-search-response-item li,
.app-search-question-card--historial .app-search-response-item ul,
.app-search-question-card--historial .app-search-response-item ol,
.app-search-question-card--historial .app-search-response-item h1,
.app-search-question-card--historial .app-search-response-item h2,
.app-search-question-card--historial .app-search-response-item h3,
.app-search-question-card--historial .app-search-response-item h4,
.app-search-question-card--historial .app-search-response-item h5,
.app-search-question-card--historial .app-search-response-item h6,
.app-search-question-card--historial .app-search-response-item table {
  max-width: none;
  width: 100%;
}

/* 2026-04-18 17:19 - Respuesta mas visible y cabeceras internas dentro del marco */
.app-justi-unified-list .app-search-response-item__title,
.app-search-response-item__title,
.app-search-question-card--historial .app-search-response-item__title,
.app-justi-unified-list .app-search-response-text,
.app-search-response-text,
.app-search-question-card--historial .app-search-response-text {
  color: #8f5f57;
  font-size: clamp(1.05rem, 1.55vw, 1.22rem);
  font-weight: 900;
  line-height: 1.34;
}

.app-justi-unified-list .app-search-response-item--correct .app-search-response-item__title,
.app-search-response-item--correct .app-search-response-item__title,
.app-search-question-card--historial .app-search-response-item--correct .app-search-response-item__title,
.app-justi-unified-list .app-search-response-item--correct .app-search-response-text,
.app-search-response-item--correct .app-search-response-text,
.app-search-question-card--historial .app-search-response-item--correct .app-search-response-text {
  color: #2b675a;
}

.app-justi-unified-list .app-search-response-item p,
.app-justi-unified-list .app-search-response-item li,
.app-search-response-item p,
.app-search-response-item li,
.app-search-question-card--historial .app-search-response-item p,
.app-search-question-card--historial .app-search-response-item li {
  font-size: 1.03rem;
  font-weight: 500;
  color: #496763;
}

.app-justi-unified-list .app-search-response-item .markdown-content > h1:first-child,
.app-justi-unified-list .app-search-response-item .markdown-content > h2:first-child,
.app-justi-unified-list .app-search-response-item .markdown-content > h3:first-child,
.app-justi-unified-list .app-search-response-item .markdown-content > h4:first-child,
.app-justi-unified-list .app-search-response-item .markdown-content > h5:first-child,
.app-justi-unified-list .app-search-response-item .markdown-content > h6:first-child,
.app-search-response-item .markdown-content > h1:first-child,
.app-search-response-item .markdown-content > h2:first-child,
.app-search-response-item .markdown-content > h3:first-child,
.app-search-response-item .markdown-content > h4:first-child,
.app-search-response-item .markdown-content > h5:first-child,
.app-search-response-item .markdown-content > h6:first-child,
.app-search-question-card--historial .app-search-response-item .markdown-content > h1:first-child,
.app-search-question-card--historial .app-search-response-item .markdown-content > h2:first-child,
.app-search-question-card--historial .app-search-response-item .markdown-content > h3:first-child,
.app-search-question-card--historial .app-search-response-item .markdown-content > h4:first-child,
.app-search-question-card--historial .app-search-response-item .markdown-content > h5:first-child,
.app-search-question-card--historial .app-search-response-item .markdown-content > h6:first-child {
  margin-top: 0.18rem;
}

.app-justi-unified-list .app-search-response-item .markdown-content h1,
.app-justi-unified-list .app-search-response-item .markdown-content h2,
.app-justi-unified-list .app-search-response-item .markdown-content h3,
.app-justi-unified-list .app-search-response-item .markdown-content h4,
.app-justi-unified-list .app-search-response-item .markdown-content h5,
.app-justi-unified-list .app-search-response-item .markdown-content h6,
.app-search-response-item .markdown-content h1,
.app-search-response-item .markdown-content h2,
.app-search-response-item .markdown-content h3,
.app-search-response-item .markdown-content h4,
.app-search-response-item .markdown-content h5,
.app-search-response-item .markdown-content h6,
.app-search-question-card--historial .app-search-response-item .markdown-content h1,
.app-search-question-card--historial .app-search-response-item .markdown-content h2,
.app-search-question-card--historial .app-search-response-item .markdown-content h3,
.app-search-question-card--historial .app-search-response-item .markdown-content h4,
.app-search-question-card--historial .app-search-response-item .markdown-content h5,
.app-search-question-card--historial .app-search-response-item .markdown-content h6 {
  display: block;
  width: calc(100% - 0.24rem);
  margin-left: 0.12rem;
  margin-right: 0.12rem;
  padding: 0.52rem 0.78rem 0.46rem;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(219, 236, 230, 0.9) 0%, rgba(219, 236, 230, 0.7) 100%);
  box-shadow: inset 0 0 0 1px rgba(80, 144, 129, 0.18);
  color: #4e776f;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.app-search-response-item--incorrect .markdown-content h1,
.app-search-response-item--incorrect .markdown-content h2,
.app-search-response-item--incorrect .markdown-content h3,
.app-search-response-item--incorrect .markdown-content h4,
.app-search-response-item--incorrect .markdown-content h5,
.app-search-response-item--incorrect .markdown-content h6,
.app-search-question-card--historial .app-search-response-item--incorrect .markdown-content h1,
.app-search-question-card--historial .app-search-response-item--incorrect .markdown-content h2,
.app-search-question-card--historial .app-search-response-item--incorrect .markdown-content h3,
.app-search-question-card--historial .app-search-response-item--incorrect .markdown-content h4,
.app-search-question-card--historial .app-search-response-item--incorrect .markdown-content h5,
.app-search-question-card--historial .app-search-response-item--incorrect .markdown-content h6 {
  background: linear-gradient(180deg, rgba(236, 228, 226, 0.95) 0%, rgba(236, 228, 226, 0.76) 100%);
  box-shadow: inset 0 0 0 1px rgba(185, 139, 130, 0.18);
  color: #8a625b;
}

@media (max-width: 767px) {
  .app-justi-unified-list .app-search-response-item p,
  .app-justi-unified-list .app-search-response-item li,
  .app-search-response-item p,
  .app-search-response-item li,
  .app-search-question-card--historial .app-search-response-item p,
  .app-search-question-card--historial .app-search-response-item li {
    font-size: 0.98rem;
  }
}

/* 2026-04-18 17:39 - Modal Fallos/Aciertos: alineacion izquierda y sin rotulo extra */
.app-search-question-card--historial .app-search-question-head,
.app-search-question-card--historial .app-search-question-title,
.app-search-question-card--historial .app-search-question-meta {
  text-align: left;
  justify-content: flex-start;
}

.app-search-question-card--historial .app-search-question-title {
  margin-left: 0;
  margin-right: 0;
}

.app-search-question-card--historial .app-search-response-top,
.app-search-question-card--historial .app-search-response-text,
.app-search-question-card--historial .app-search-response-item__title {
  text-align: left;
}

.app-search-question-card--historial .app-search-response-top {
  justify-content: space-between;
  align-items: flex-start;
}

.app-search-question-card--historial .app-search-response-text,
.app-search-question-card--historial .app-search-response-item__title {
  flex: 1 1 auto;
  padding-right: 1rem;
}

.app-search-question-card--historial .app-search-question-section-label {
  display: none;
}

#elToGrandecicoModal.app-modal-context--preguntame-help .modal-content,
#elToGrandecicoModal.app-modal-context--module-help .modal-content {
  background: linear-gradient(180deg, #f8fdfb 0%, #f3fbf7 100%);
}

#elToGrandecicoModal.app-modal-context--preguntame-help #divHeaderElToGrandecico,
#elToGrandecicoModal.app-modal-context--module-help #divHeaderElToGrandecico {
  position: sticky;
  top: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 22px 14px;
  background: linear-gradient(180deg, rgba(248,253,251,0.98) 0%, rgba(241,250,245,0.96) 100%);
  border-bottom: 1px solid rgba(111, 182, 166, 0.18);
  box-shadow: 0 10px 24px rgba(19, 77, 65, 0.06);
  backdrop-filter: blur(10px);
}

#elToGrandecicoModal.app-modal-context--preguntame-help #tituloElToGrandecico,
#elToGrandecicoModal.app-modal-context--module-help #tituloElToGrandecico {
  width: auto !important;
  margin: 0;
  text-align: left !important;
  flex: 1 1 auto;
}

.app-modal-help-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
}

.app-modal-help-kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(23, 96, 82, 0.10);
  color: rgba(21, 85, 72, 0.88);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  flex: 0 0 auto;
}

.app-modal-help-title {
  color: var(--verde-dark);
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

#elToGrandecicoModal.app-modal-context--preguntame-help #cierraElToGrandecico,
#elToGrandecicoModal.app-modal-context--module-help #cierraElToGrandecico {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(23, 96, 82, 0.16);
  background: rgba(255,255,255,0.92);
  box-shadow: 0 12px 24px rgba(19, 77, 65, 0.10);
  opacity: 1;
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-image: none !important;
  color: var(--verde-dark);
}

#elToGrandecicoModal.app-modal-context--preguntame-help #cierraElToGrandecico::before,
#elToGrandecicoModal.app-modal-context--module-help #cierraElToGrandecico::before {
  content: "×";
  font-size: 28px;
  line-height: 1;
  font-weight: 500;
  color: rgba(21, 85, 72, 0.92);
  transform: translateY(-1px);
}

#elToGrandecicoModal.app-modal-context--preguntame-help #cierraElToGrandecico:hover,
#elToGrandecicoModal.app-modal-context--module-help #cierraElToGrandecico:hover {
  border-color: rgba(23, 96, 82, 0.30);
  box-shadow: 0 16px 28px rgba(19, 77, 65, 0.14);
  background: #ffffff;
}

#elToGrandecicoModal.app-modal-context--preguntame-help #cuerpoElToGrandecico,
#elToGrandecicoModal.app-modal-context--module-help #cuerpoElToGrandecico {
  padding-top: 8px !important;
}

/* 2026-04-18 17:42 - Forzar alineacion izquierda y ocultar rotulo en modal historial */
#elToGrandecicoModal .app-search-question-card--historial .app-search-question-head,
#elToGrandecicoModal .app-search-question-card--historial .app-search-question-title,
#elToGrandecicoModal .app-search-question-card--historial .app-search-question-meta {
  text-align: left !important;
  justify-content: flex-start !important;
}

#elToGrandecicoModal .app-search-question-card--historial .app-search-response-top,
#elToGrandecicoModal .app-search-question-card--historial .app-search-response-text,
#elToGrandecicoModal .app-search-question-card--historial .app-search-response-item__title {
  text-align: left !important;
}

#elToGrandecicoModal .app-search-question-card--historial .app-search-question-section-label {
  display: none !important;
}

/* 2026-04-18 17:41 - Ocultar boton negro de favorita en modal de Fallos/Aciertos */
#elToGrandecicoModal .app-search-question-card--historial .classBotonEsPreguntaFavoritaListadoPreguntas {
  display: none !important;
}

/* 2026-04-18 17:45 - Forzar ocultacion boton negra favorita en herramientas del historial */
#elToGrandecicoModal .app-search-question-card--historial .app-search-question-tools,
#elToGrandecicoModal .classBotonEsPreguntaFavoritaListadoPreguntas,
#elToGrandecicoModal button.classBotonEsPreguntaFavoritaListadoPreguntas {
  display: none !important;
}

/* 2026-04-18 17:49 - Modal historial: limpiar metadatos y dar ancho total a pregunta */
#elToGrandecicoModal .app-search-question-card--historial .app-search-question-title {
  max-width: none !important;
  width: 100% !important;
}

#elToGrandecicoModal .app-search-question-card--historial .app-search-question-meta .app-search-meta-chip:nth-child(2),
#elToGrandecicoModal .app-search-question-card--historial .app-search-question-meta .app-search-meta-chip:nth-child(3),
#elToGrandecicoModal .app-search-question-card--historial .app-search-question-meta .app-search-meta-chip:nth-child(5) {
  display: none !important;
}

/* 2026-04-18 17:53 - Forzar ancho total de pregunta y limpieza de chips en historial */
#elToGrandecicoModal .app-search-question-card--historial .app-search-question-head {
  align-items: stretch !important;
}

#elToGrandecicoModal .app-search-question-card--historial p.app-search-question-title,
#elToGrandecicoModal .app-search-question-card--historial .app-search-question-title {
  max-width: 100% !important;
  width: 100% !important;
  flex: 1 1 100% !important;
}

#elToGrandecicoModal .app-search-question-card--historial .app-search-question-meta > span.app-search-meta-chip:nth-of-type(2),
#elToGrandecicoModal .app-search-question-card--historial .app-search-question-meta > span.app-search-meta-chip:nth-of-type(3),
#elToGrandecicoModal .app-search-question-card--historial .app-search-question-meta > span.app-search-meta-chip:nth-of-type(5) {
  display: none !important;
}

/* 2026-04-18 17:58 - Modal historial: menos lineas y menos hueco entre pregunta y primera justificacion */
#elToGrandecicoModal .app-search-question-card--historial {
  border-width: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

#elToGrandecicoModal .app-search-question-card--historial .app-search-question-head {
  border-bottom: 0 !important;
  box-shadow: none !important;
  padding-bottom: 0.55rem !important;
  margin-bottom: 0 !important;
}

#elToGrandecicoModal .app-search-question-card--historial .app-search-question-body {
  border-top: 0 !important;
  padding-top: 0.35rem !important;
  margin-top: 0 !important;
}

#elToGrandecicoModal .app-search-question-card--historial .app-justi-unified-list,
#elToGrandecicoModal .app-search-question-card--historial .respuestas {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

#elToGrandecicoModal .app-search-question-card--historial .app-search-response-item:first-child {
  margin-top: 0 !important;
}

/* 2026-04-18 18:00 - Forzar cierre visual entre pregunta y primera justificacion */
#elToGrandecicoModal .app-search-question-card.app-search-question-card--historial,
#elToGrandecicoModal article.app-search-question-card--historial {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

#elToGrandecicoModal .app-search-question-card--historial .app-search-question-head,
#elToGrandecicoModal article.app-search-question-card--historial .app-search-question-head {
  border-bottom: 0 !important;
  box-shadow: none !important;
  margin-bottom: 0 !important;
  padding-bottom: 0.18rem !important;
}

#elToGrandecicoModal .app-search-question-card--historial .app-search-question-body,
#elToGrandecicoModal article.app-search-question-card--historial .app-search-question-body {
  border-top: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-left: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  margin-top: 0 !important;
  padding-top: 0.08rem !important;
}

/* 2026-04-18 18:09 - Cabeceras internas centradas verticalmente dentro del recuadro */
.app-justi-unified-list .app-search-response-item .markdown-content h1,
.app-justi-unified-list .app-search-response-item .markdown-content h2,
.app-justi-unified-list .app-search-response-item .markdown-content h3,
.app-justi-unified-list .app-search-response-item .markdown-content h4,
.app-justi-unified-list .app-search-response-item .markdown-content h5,
.app-justi-unified-list .app-search-response-item .markdown-content h6,
.app-search-response-item .markdown-content h1,
.app-search-response-item .markdown-content h2,
.app-search-response-item .markdown-content h3,
.app-search-response-item .markdown-content h4,
.app-search-response-item .markdown-content h5,
.app-search-response-item .markdown-content h6,
.app-search-question-card--historial .app-search-response-item .markdown-content h1,
.app-search-question-card--historial .app-search-response-item .markdown-content h2,
.app-search-question-card--historial .app-search-response-item .markdown-content h3,
.app-search-question-card--historial .app-search-response-item .markdown-content h4,
.app-search-question-card--historial .app-search-response-item .markdown-content h5,
.app-search-question-card--historial .app-search-response-item .markdown-content h6 {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 34px;
  line-height: 1;
}

/* 2026-04-18 18:14 - Visor justificacion principal sin bloque contenedor, solo tarjetas */
#divTextoJustificacionRespuestaAcertada,
#divTextoJustificacionRespuestaAcertada .app-preguntas-justi-texto,
#divTextoJustificacionRespuestaAcertada .app-preguntas-justi-texto--incorrecta,
#divTextoJustificacionRespuestaAcertada .app-preguntas-justi-texto--correcta {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

#divTextoJustificacionRespuestaAcertada .app-justi-unified-list,
#divTextoJustificacionRespuestaAcertada .app-justi-unified-list--search {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 1rem !important;
}

#divTextoJustificacionRespuestaAcertada .app-search-response-item {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 2026-04-18 18:42 - Tarjetas del historial a ancho completo del bloque de pregunta */
#elToGrandecicoModal .app-search-question-card--historial .app-search-question-body {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#elToGrandecicoModal .app-search-question-card--historial .app-justi-unified-list,
#elToGrandecicoModal .app-search-question-card--historial .app-search-response-item {
  width: 100% !important;
}

/* 2026-04-18 18:47 - Forzar cuerpo del historial sin sangrado lateral */
#elToGrandecicoModal .app-search-question-card--historial .app-search-question-body.respuestas {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 2026-04-18 18:48 - Cabecera de pregunta del historial con contraste branding fuerte */
#elToGrandecicoModal .app-search-question-card--historial .app-search-question-head {
  background: linear-gradient(180deg, #0f5e4f 0%, #0a4a3e 100%) !important;
  border-radius: 18px 18px 0 0 !important;
  box-shadow: inset 0 0 0 1px rgba(141, 223, 196, 0.16) !important;
}

#elToGrandecicoModal .app-search-question-card--historial .app-search-question-title {
  color: #dff8ee !important;
}

#elToGrandecicoModal .app-search-question-card--historial .app-search-question-head::after {
  color: rgba(191, 241, 223, 0.78) !important;
}

#elToGrandecicoModal .app-search-question-card--historial .app-search-question-meta .app-search-meta-chip {
  background: rgba(227, 248, 240, 0.12) !important;
  border-color: rgba(191, 241, 223, 0.22) !important;
  color: #d2f5e8 !important;
}

#elToGrandecicoModal .app-search-question-card--historial .app-search-question-meta .app-search-meta-chip--danger {
  background: rgba(253, 210, 205, 0.16) !important;
  border-color: rgba(253, 210, 205, 0.22) !important;
  color: #ffd7d1 !important;
}

/* 2026-04-18 19:02 - Cabecera de pregunta con cuatro esquinas iguales y etiqueta abajo derecha */
#elToGrandecicoModal .app-search-question-card--historial .app-search-question-head {
  border-radius: 18px !important;
  margin-bottom: 0.8rem !important;
  padding-bottom: 1.15rem !important;
}

#elToGrandecicoModal .app-search-question-card--historial .app-search-question-head::after {
  top: auto !important;
  bottom: 0.62rem !important;
  right: 0.9rem !important;
}

/* 2026-04-18 19:03 - Quitar barra verde lateral del contenedor de pregunta en historial */
#elToGrandecicoModal .app-search-question-card--historial::before,
#elToGrandecicoModal .app-search-question-card--historial .app-search-question-head::before {
  display: none !important;
  content: none !important;
}

/* 2026-04-18 19:10 - Reducir hueco entre titulo de respuesta y comienzo de justificacion */
#elToGrandecicoModal .app-search-response-top {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

#elToGrandecicoModal .app-search-response-item .justificacion {
  padding-top: 0.1rem !important;
  margin-top: 0 !important;
}

/* 2026-04-18 19:52 - Visor principal: menos hueco entre respuesta y primer bloque de justificacion */
#divTextoJustificacionRespuestaAcertada .app-search-response-top,
#divTextoRespuestasJustificadas .app-search-response-top,
.app-justi-unified-list--preguntame .app-search-response-top {
  padding-bottom: 0.12rem !important;
  margin-bottom: 0.08rem !important;
}

#divTextoJustificacionRespuestaAcertada .app-search-response-item .justificacion,
#divTextoRespuestasJustificadas .app-search-response-item .justificacion,
.app-justi-unified-list--preguntame .app-search-response-item .justificacion {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

#divTextoJustificacionRespuestaAcertada .app-search-response-item .markdown-content > h1:first-child,
#divTextoJustificacionRespuestaAcertada .app-search-response-item .markdown-content > h2:first-child,
#divTextoJustificacionRespuestaAcertada .app-search-response-item .markdown-content > h3:first-child,
#divTextoJustificacionRespuestaAcertada .app-search-response-item .markdown-content > h4:first-child,
#divTextoJustificacionRespuestaAcertada .app-search-response-item .markdown-content > h5:first-child,
#divTextoJustificacionRespuestaAcertada .app-search-response-item .markdown-content > h6:first-child,
#divTextoRespuestasJustificadas .app-search-response-item .markdown-content > h1:first-child,
#divTextoRespuestasJustificadas .app-search-response-item .markdown-content > h2:first-child,
#divTextoRespuestasJustificadas .app-search-response-item .markdown-content > h3:first-child,
#divTextoRespuestasJustificadas .app-search-response-item .markdown-content > h4:first-child,
#divTextoRespuestasJustificadas .app-search-response-item .markdown-content > h5:first-child,
#divTextoRespuestasJustificadas .app-search-response-item .markdown-content > h6:first-child,
.app-justi-unified-list--preguntame .app-search-response-item .markdown-content > h1:first-child,
.app-justi-unified-list--preguntame .app-search-response-item .markdown-content > h2:first-child,
.app-justi-unified-list--preguntame .app-search-response-item .markdown-content > h3:first-child,
.app-justi-unified-list--preguntame .app-search-response-item .markdown-content > h4:first-child,
.app-justi-unified-list--preguntame .app-search-response-item .markdown-content > h5:first-child,
.app-justi-unified-list--preguntame .app-search-response-item .markdown-content > h6:first-child {
  margin-top: 0.05rem !important;
}

#divTextoJustificacionRespuestaAcertada .app-search-response-item p:first-of-type,
#divTextoRespuestasJustificadas .app-search-response-item p:first-of-type,
.app-justi-unified-list--preguntame .app-search-response-item p:first-of-type {
  margin-top: 0.12rem !important;
}

/* 2026-04-18 20:03 - Visor principal: titulo de respuesta correcta en verde oscuro branding */
#divTextoJustificacionRespuestaAcertada .app-search-response-item--correct .app-search-response-text,
#divTextoJustificacionRespuestaAcertada .app-search-response-item--correct .app-search-response-item__title,
#divTextoJustificacionRespuestaAcertada .app-search-response-item.correcta .app-search-response-text,
#divTextoJustificacionRespuestaAcertada .app-search-response-item.correcta .app-search-response-item__title,
#divTextoRespuestasJustificadas .app-search-response-item--correct .app-search-response-text,
#divTextoRespuestasJustificadas .app-search-response-item--correct .app-search-response-item__title,
#divTextoRespuestasJustificadas .app-search-response-item.correcta .app-search-response-text,
#divTextoRespuestasJustificadas .app-search-response-item.correcta .app-search-response-item__title,
.app-justi-unified-list--preguntame .app-search-response-item--correct .app-search-response-text,
.app-justi-unified-list--preguntame .app-search-response-item--correct .app-search-response-item__title,
.app-justi-unified-list--preguntame .app-search-response-item.correcta .app-search-response-text,
.app-justi-unified-list--preguntame .app-search-response-item.correcta .app-search-response-item__title {
  color: #1d5b4d !important;
}

#divTextoJustificacionRespuestaAcertada .app-search-response-item.correcta .app-search-response-top .app-search-response-text.tipoLetra2,
#divTextoJustificacionRespuestaAcertada .app-search-response-item.correcta .app-search-response-top .app-search-response-item__title.tipoLetra2,
#divTextoRespuestasJustificadas .app-search-response-item.correcta .app-search-response-top .app-search-response-text.tipoLetra2,
#divTextoRespuestasJustificadas .app-search-response-item.correcta .app-search-response-top .app-search-response-item__title.tipoLetra2,
.app-justi-unified-list--preguntame .app-search-response-item.correcta .app-search-response-top .app-search-response-text.tipoLetra2,
.app-justi-unified-list--preguntame .app-search-response-item.correcta .app-search-response-top .app-search-response-item__title.tipoLetra2 {
  color: #1d5b4d !important;
}

/* 2026-04-18 19:18 - Quitar cascaron exterior del bloque de pregunta en historial */
#elToGrandecicoModal .app-search-question-card--historial,
#elToGrandecicoModal article.app-search-question-card--historial {
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* 2026-04-18 19:44 - Modal historial: justificaciones con borde visible y sin cascaron padre */
#elToGrandecicoModal .app-search-question-card--historial .app-search-response-item,
#elToGrandecicoModal .app-search-question-card--historial .app-search-response-item--static {
  border-width: 3px !important;
  border-style: solid !important;
  box-shadow: 0 14px 30px rgba(12, 65, 56, 0.04) !important;
}

#elToGrandecicoModal .app-search-question-card--historial .app-search-response-item--correct {
  border-color: rgba(92, 205, 168, 0.52) !important;
}

#elToGrandecicoModal .app-search-question-card--historial .app-search-response-item--incorrect {
  border-color: rgba(223, 182, 174, 0.58) !important;
}

#elToGrandecicoModal .app-search-response-item .markdown-content > p:first-child,
#elToGrandecicoModal .app-search-response-item .app-search-rich-html > p:first-child {
  margin-top: 0 !important;
}

/* 2026-04-18 22:59 - Temas ? usa mismo casco visual que Aciertos/Fallos */
#elTemaModal .app-search-question-card--historial,
#elTemaModal article.app-search-question-card--historial {
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#elTemaModal .app-search-question-card--historial .app-search-question-head,
#elTemaModal article.app-search-question-card--historial .app-search-question-head,
#elTemaModal .app-search-question-card--historial .app-search-question-title,
#elTemaModal .app-search-question-card--historial .app-search-question-meta {
  text-align: left !important;
  justify-content: flex-start !important;
}

#elTemaModal .app-search-question-card--historial .app-search-response-top,
#elTemaModal .app-search-question-card--historial .app-search-response-text,
#elTemaModal .app-search-question-card--historial .app-search-response-item__title {
  text-align: left !important;
}

#elTemaModal .app-search-question-card--historial .app-search-question-section-label {
  display: none !important;
}

#elTemaModal .app-search-question-card--historial .app-search-question-head {
  align-items: stretch !important;
  background: linear-gradient(180deg, #0f5e4f 0%, #0a4a3e 100%) !important;
  border-radius: 18px !important;
  box-shadow: inset 0 0 0 1px rgba(141, 223, 196, 0.16) !important;
  border-bottom: 0 !important;
  margin-bottom: 0.8rem !important;
  padding-bottom: 1.15rem !important;
}

#elTemaModal .app-search-question-card--historial p.app-search-question-title,
#elTemaModal .app-search-question-card--historial .app-search-question-title {
  max-width: 100% !important;
  width: 100% !important;
  flex: 1 1 100% !important;
  color: #dff8ee !important;
}

#elTemaModal .app-search-question-card--historial .app-search-question-head::after {
  color: rgba(191, 241, 223, 0.78) !important;
  top: auto !important;
  bottom: 0.62rem !important;
  right: 0.9rem !important;
}

#elTemaModal .app-search-question-card--historial::before,
#elTemaModal .app-search-question-card--historial .app-search-question-head::before {
  display: none !important;
  content: none !important;
}

#elTemaModal .app-search-question-card--historial .app-search-question-meta .app-search-meta-chip {
  background: rgba(227, 248, 240, 0.12) !important;
  border-color: rgba(191, 241, 223, 0.22) !important;
  color: #d2f5e8 !important;
}

#elTemaModal .app-search-question-card--historial .app-search-question-body,
#elTemaModal article.app-search-question-card--historial .app-search-question-body,
#elTemaModal .app-search-question-card--historial .app-search-question-body.respuestas {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  margin-top: 0 !important;
  padding-top: 0.08rem !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#elTemaModal .app-search-question-card--historial .app-justi-unified-list,
#elTemaModal .app-search-question-card--historial .respuestas,
#elTemaModal .app-search-question-card--historial .app-search-response-item {
  width: 100% !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

#elTemaModal .app-search-question-card--historial .app-search-response-item:first-child {
  margin-top: 0 !important;
}

#elTemaModal .app-search-response-top {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

#elTemaModal .app-search-response-item .justificacion {
  padding-top: 0.1rem !important;
  margin-top: 0 !important;
}

#elTemaModal .app-search-question-card--historial .app-search-response-item,
#elTemaModal .app-search-question-card--historial .app-search-response-item--static {
  border-width: 3px !important;
  border-style: solid !important;
  box-shadow: 0 14px 30px rgba(12, 65, 56, 0.04) !important;
}

#elTemaModal .app-search-question-card--historial .app-search-response-item--correct {
  border-color: rgba(92, 205, 168, 0.52) !important;
}

#elTemaModal .app-search-question-card--historial .app-search-response-item--incorrect {
  border-color: rgba(223, 182, 174, 0.58) !important;
}

#elTemaModal .app-search-response-item .markdown-content > p:first-child,
#elTemaModal .app-search-response-item .app-search-rich-html > p:first-child {
  margin-top: 0 !important;
}

/* 2026-05-22 - eXamen PRO: mapa legible, revision con estados y justificacion unificada */
.app-exam-active-wrap {
  background: linear-gradient(180deg, #ffffff 0%, #fbfdfc 100%);
  padding: 0 0 1.2rem;
}

.app-exam-title-bar {
  min-height: 44px;
  border-radius: 8px;
  margin: 10px 6px 14px;
  background: linear-gradient(180deg, #1b6b59 0%, #145c4e 100%);
  box-shadow: 0 10px 24px rgba(17, 88, 74, 0.12);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0;
}

.app-exam-question-text {
  padding: 16px 20px 12px;
  color: #145c4e;
  font-size: 16px;
  line-height: 1.55;
  font-weight: 800;
}

.app-exam-options {
  display: grid;
  gap: 10px;
  margin: 6px 14px 20px;
  border: 0;
  border-radius: 0;
  overflow: visible;
}

.app-exam-option-row {
  min-height: 56px;
  gap: 14px;
  padding: 10px 12px;
  border: 1px solid rgba(30, 111, 94, 0.12);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 8px 18px rgba(21, 88, 74, 0.035);
}

.app-exam-option-row:first-child {
  border-top: 1px solid rgba(30, 111, 94, 0.12);
}

.app-exam-option-row:hover {
  background: #f3fbf7;
  border-color: rgba(30, 111, 94, 0.20);
}

.app-exam-option-btn {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(30, 111, 94, 0.18);
  background: #f9fdfb;
  color: #155d4e;
  font-size: 16px;
  font-weight: 900;
}

.app-exam-option-btn:hover:not(:disabled) {
  background: #145c4e;
  border-color: #145c4e;
  color: #ffffff;
}

.app-exam-option-text {
  color: #263f3a;
  font-size: 15px;
  line-height: 1.5;
}

.app-exam-option-row.option-selected {
  background: #e9f7f0;
  border-color: rgba(39, 145, 110, 0.30);
}

.app-exam-option-row.option-selected .app-exam-option-btn {
  background: #36a866;
  border-color: #36a866;
  color: #ffffff;
}

.app-exam-option-row.result-user-correct,
.app-exam-option-row.result-correct-answer {
  background: #edf9f2;
  border-color: rgba(34, 197, 94, 0.30);
}

.app-exam-option-row.result-user-correct .app-exam-option-btn,
.app-exam-option-row.result-correct-answer .app-exam-option-btn {
  background: #36a866;
  border-color: #36a866;
  color: #ffffff;
}

.app-exam-option-row.result-user-wrong {
  background: #fff2f2;
  border-color: rgba(220, 38, 38, 0.28);
}

.app-exam-option-row.result-user-wrong .app-exam-option-btn {
  background: #dc3b3b;
  border-color: #dc3b3b;
  color: #ffffff;
}

.app-exam-see-answer-btn {
  min-width: 190px;
  min-height: 48px;
  border-radius: 12px;
  background: #145c4e;
  box-shadow: 0 12px 26px rgba(20, 92, 78, 0.14);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0;
}

#divConLaJustificacionPreguntaExamen {
  margin: 8px 10px 18px;
}

.app-justi-unified-list--examen {
  margin-top: 0.25rem;
}

.app-justi-unified-list--examen .app-search-response-item,
.app-justi-unified-list--examen .app-search-response-item--static {
  border-radius: 18px;
  box-shadow: 0 14px 32px rgba(12, 65, 56, 0.05);
}

.app-justi-unified-list--examen .app-search-response-item.correcta,
.app-justi-unified-list--examen .app-search-response-item--static.correcta {
  border-color: rgba(39, 156, 120, 0.34);
}

.app-justi-unified-list--examen .app-search-response-item.incorrecta,
.app-justi-unified-list--examen .app-search-response-item--static.incorrecta {
  border-color: rgba(188, 92, 82, 0.36);
}

.app-exam-nav-section {
  margin: 10px 14px 14px;
  padding: 14px;
  border: 1px solid rgba(30, 111, 94, 0.12);
  border-radius: 14px;
  background: #f8fcfa;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.app-exam-nav-title {
  margin-bottom: 10px;
  color: #667b76;
  font-size: 12px;
  letter-spacing: 0.06em;
}

.app-exam-nav-grid {
  gap: 8px;
}

.app-exam-nav-btn {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid rgba(30, 111, 94, 0.16);
  background: #ffffff;
  color: #52645f;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 5px 12px rgba(14, 70, 59, 0.04);
}

.app-exam-nav-btn:hover:not(:disabled) {
  background: #eef9f4;
  border-color: rgba(30, 111, 94, 0.35);
}

.app-exam-nav-btn.active,
.app-exam-nav-btn:disabled {
  background: #145c4e !important;
  border-color: #145c4e !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(20, 92, 78, 0.16) !important;
}

.app-exam-nav-btn.answered {
  background: #1f7a66 !important;
  border-color: #1f7a66 !important;
  color: #ffffff !important;
}

.app-exam-nav-btn.answered.correct,
.app-exam-nav-btn.answered.correct:disabled,
.app-exam-nav-btn.answered.correct.active {
  background: #2f9f5f !important;
  border-color: #228a4e !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18) !important;
}

.app-exam-nav-btn.answered.wrong,
.app-exam-nav-btn.answered.wrong:disabled,
.app-exam-nav-btn.answered.wrong.active {
  background: #d94a4a !important;
  border-color: #be3030 !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.16) !important;
}

.app-exam-nav-status {
  margin-top: 12px;
  gap: 12px;
  color: #48645d;
  font-size: 13px;
}

.app-exam-nav-status .badge-answered {
  background: #1f7a66;
}

.app-exam-nav-status .badge-unanswered {
  background: #e7efec;
  color: #52645f;
}

.app-exam-stats-wrap {
  margin: 12px 0 0;
  border: 1px solid rgba(30, 111, 94, 0.12);
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(13, 61, 52, 0.05);
}

.app-exam-stats-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.app-exam-stats-cell {
  min-height: 56px;
  padding: 12px 16px;
  border-bottom: 0;
  border-right: 1px solid rgba(30, 111, 94, 0.08);
}

.app-exam-stats-cell:last-child {
  border-right: 0;
}

.app-exam-stats-value {
  font-size: 22px;
  font-weight: 900;
}

.app-exam-stats-label {
  color: #53655f;
  font-size: 12px;
  font-weight: 700;
}

.app-exam-score-row {
  padding: 13px 16px;
  background: #fbfdfc;
  border-top: 1px solid rgba(30, 111, 94, 0.10);
}

.app-exam-score-value {
  font-size: 28px;
  font-weight: 900;
}

.app-exam-history-wrap {
  border: 1px solid rgba(30, 111, 94, 0.14);
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(13, 61, 52, 0.04);
}

.app-exam-history-table thead tr {
  background: #145c4e;
}

.app-exam-history-table tbody td {
  padding: 10px 8px;
  font-size: 13px;
}

.app-exam-instructions {
  border: 1px solid rgba(30, 111, 94, 0.12);
  border-radius: 14px;
  background: #f8fcfa;
  color: #385751;
  line-height: 1.75;
}

@media (max-width: 576px) {
  .app-exam-title-bar {
    margin: 8px 4px 12px;
    padding: 10px 12px;
    font-size: 14px;
  }

  .app-exam-question-text {
    padding: 14px 12px 10px;
    font-size: 15px;
  }

  .app-exam-options {
    margin: 4px 8px 16px;
    gap: 8px;
  }

  .app-exam-option-row {
    min-height: 58px;
    padding: 9px 10px;
    gap: 10px;
  }

  .app-exam-option-btn {
    width: 42px;
    height: 42px;
  }

  .app-exam-option-text {
    font-size: 14px;
  }

  .app-exam-nav-section {
    margin: 8px 8px 12px;
    padding: 12px;
  }

  .app-exam-nav-grid {
    gap: 7px;
  }

  .app-exam-nav-btn {
    width: 42px !important;
    height: 42px !important;
    font-size: 12px !important;
  }

  .app-exam-stats-grid {
    grid-template-columns: 1fr 1fr;
  }

  .app-exam-stats-cell:nth-child(2n) {
    border-right: 0;
  }

  .app-exam-stats-cell:nth-child(-n+2) {
    border-bottom: 1px solid rgba(30, 111, 94, 0.08);
  }

  #divConLaJustificacionPreguntaExamen {
    margin: 8px 6px 16px;
  }
}

/* 2026-05-22 - eXamen PRO: botones de mapa grandes en escritorio real */
@media (min-width: 768px) {
  .app-exam-nav-section {
    margin: 18px 18px 20px;
    padding: 18px;
  }

  .app-exam-nav-grid {
    gap: 9px 10px;
  }

  .app-exam-nav-btn {
    width: 68px !important;
    min-width: 68px !important;
    height: 54px !important;
    min-height: 54px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
  }
}