/* LSPedia — mejoras de producto: Modo Aprender, Nuevas palabras y compartir */
#lspMejorasInicio{margin-top:-2px;margin-bottom:22px}
.lsp-mejoras-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);gap:14px}
.lsp-mejora-card{background:#fff;border:1px solid #e1e8f0;border-radius:18px;box-shadow:0 7px 20px rgba(15,23,42,.065);padding:16px;min-width:0}
.lsp-mejora-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:11px}.lsp-mejora-titulo{display:flex;align-items:center;gap:9px;margin:0;color:#14213d;font-family:'Poppins',sans-serif;font-size:1rem;font-weight:800}.lsp-mejora-icono{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:#eaf3ff;font-size:19px}.lsp-mejora-sub{color:#64748b;font-size:.82rem;line-height:1.45;margin:0 0 12px}.lsp-aprender-btn{border:0;border-radius:12px;background:#1677ef;color:#fff;font-weight:800;padding:10px 15px;min-height:42px;box-shadow:0 5px 14px rgba(22,119,239,.2)}.lsp-aprender-btn:hover{filter:brightness(.96)}.lsp-aprender-meta{font-size:.73rem;color:#8290a3;margin-top:8px}
.lsp-nuevas-lista{display:flex;gap:8px;overflow-x:auto;padding:1px 1px 5px;scrollbar-width:thin}.lsp-nueva-palabra{flex:0 0 auto;min-width:126px;max-width:170px;border:1px solid #dce8f5;background:linear-gradient(145deg,#fbfdff,#f2f8ff);border-radius:13px;padding:10px 11px;text-align:left;color:#1e293b;cursor:pointer}.lsp-nueva-palabra:hover,.lsp-nueva-palabra:focus-visible{border-color:#93c5fd;box-shadow:0 4px 12px rgba(37,99,235,.11);outline:none}.lsp-nueva-badge{display:inline-block;font-size:.62rem;font-weight:900;letter-spacing:.04em;color:#0b6ea8;background:#e0f2fe;border-radius:999px;padding:3px 6px;margin-bottom:5px}.lsp-nueva-nombre{display:block;font-family:'Poppins',sans-serif;font-size:.88rem;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lsp-nueva-cat{display:block;color:#738196;font-size:.68rem;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lsp-aprender-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:linear-gradient(135deg,#eef7ff,#fff8df);border:1px solid #cfe3f5;border-radius:15px;padding:10px 12px;margin:0 0 14px;box-shadow:0 5px 14px rgba(15,23,42,.06)}.lsp-aprender-bar strong{color:#163a63;font-size:.86rem;margin-right:auto}.lsp-aprender-progreso{font-size:.75rem;color:#64748b;font-weight:700}.lsp-aprender-nav{border:1px solid #cad8e8;background:#fff;color:#26435f;border-radius:9px;padding:7px 10px;font-weight:800;font-size:.78rem}.lsp-aprender-nav.primary{background:#1677ef;border-color:#1677ef;color:#fff}.lsp-aprender-fin{border:0;background:transparent;color:#7c8797;font-size:.75rem;text-decoration:underline;padding:7px}
.lsp-share-overlay{position:fixed;inset:0;background:rgba(15,23,42,.52);z-index:10950;display:flex;align-items:flex-end;justify-content:center;padding:16px;backdrop-filter:blur(3px)}.lsp-share-sheet{width:min(520px,100%);background:#fff;border-radius:22px 22px 16px 16px;padding:18px;box-shadow:0 24px 60px rgba(0,0,0,.28);animation:lspShareUp .2s ease-out}.lsp-share-grip{width:44px;height:5px;border-radius:99px;background:#d6dde6;margin:0 auto 14px}.lsp-share-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.lsp-share-head h3{font-family:'Poppins',sans-serif;font-size:1.05rem;margin:0;color:#15213a}.lsp-share-head p{font-size:.78rem;color:#64748b;margin:5px 0 14px}.lsp-share-close{border:0;background:#eef2f7;border-radius:50%;width:34px;height:34px;font-size:18px;color:#475569}.lsp-share-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.lsp-share-action{border:1px solid #dce4ee;background:#fff;border-radius:14px;padding:12px 8px;color:#26364a;font-size:.76rem;font-weight:800;min-height:75px}.lsp-share-action span{display:block;font-size:1.45rem;margin-bottom:4px}.lsp-share-action.whatsapp{background:#ecfdf3;border-color:#bbf7d0;color:#176b3a}.lsp-share-action.more{background:#eef6ff;border-color:#cfe3fa;color:#155da7}.lsp-share-toast{position:fixed;left:50%;bottom:92px;transform:translate(-50%,15px);z-index:11000;background:#0f172a;color:#fff;padding:10px 14px;border-radius:999px;font-size:.78rem;font-weight:800;opacity:0;pointer-events:none;transition:.18s ease}.lsp-share-toast.show{opacity:1;transform:translate(-50%,0)}
@keyframes lspShareUp{from{transform:translateY(20px);opacity:.6}to{transform:translateY(0);opacity:1}}
@media(max-width:767.98px){#lspMejorasInicio{margin-bottom:16px}.lsp-mejoras-grid{grid-template-columns:1fr}.lsp-mejora-card{padding:14px;border-radius:16px}.lsp-share-overlay{padding:0;align-items:flex-end}.lsp-share-sheet{border-radius:22px 22px 0 0;padding:17px 14px calc(17px + env(safe-area-inset-bottom))}.lsp-share-actions{grid-template-columns:repeat(3,1fr)}.lsp-aprender-bar{position:sticky;top:72px;z-index:100;padding:9px 10px}}
@media(prefers-reduced-motion:reduce){.lsp-share-sheet{animation:none!important}}


/* Aprendizaje unificado: reemplaza la tarjeta separada Tu progreso. */
#panelProgresoPersonal{display:none!important}
.lsp-aprender-estado{display:flex;flex-direction:column;gap:3px;margin:-2px 0 12px;padding:10px 12px;background:#f7fbff;border:1px solid #dcecf8;border-radius:12px;color:#52657a;font-size:.76rem;line-height:1.4}
.lsp-aprender-estado strong{color:#17324f;font-family:'Poppins',sans-serif;font-size:.86rem;font-weight:800}
.lsp-aprender-estado span{display:block}
.lsp-aprendizaje-unificado .lsp-aprender-btn{margin-top:1px}
@media(max-width:767.98px){.lsp-aprendizaje-unificado .lsp-mejora-sub{margin-bottom:9px}.lsp-aprender-estado{margin-bottom:11px}}


/* Ajuste 2026-09-10: navegación única de Modo Aprender + miniaturas */
.lsp-nueva-palabra{min-width:164px;max-width:184px;padding:7px 7px 10px;overflow:hidden}
.lsp-nueva-thumb-wrap{display:block;width:100%;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#e9eef5;margin-bottom:8px}
.lsp-nueva-thumb{display:block;width:100%;height:100%;object-fit:cover}
.lsp-nueva-badge,.lsp-nueva-nombre,.lsp-nueva-cat{margin-left:3px;margin-right:3px}
.ficha-palabra-browse.lsp-aprender-activo{grid-template-columns:58px minmax(0,1fr) auto minmax(0,1fr)}
.lsp-aprender-salir{min-width:0;border:0;border-radius:12px;background:#fff1f2;color:#b4233a;font-weight:800;padding:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}
.lsp-aprender-salir span{font-size:1.2rem;line-height:1}
.lsp-aprender-salir small{font-size:.66rem;font-weight:800}
.lsp-aprender-salir:hover,.lsp-aprender-salir:focus-visible{background:#ffe4e6;outline:2px solid rgba(190,24,93,.15);outline-offset:1px}
@media(max-width:767.98px){.lsp-nueva-palabra{min-width:150px;max-width:168px}.ficha-palabra-browse.lsp-aprender-activo{grid-template-columns:46px minmax(0,1fr) 46px minmax(0,1fr);gap:5px}.lsp-aprender-salir{padding:5px 3px;border-radius:10px}.lsp-aprender-salir small{font-size:.58rem}}

/* Ajuste 2026-09-10: pulido táctil y áreas seguras en móvil/tablet. */
@media(max-width:1199.98px){
    body{padding-bottom:calc(82px + env(safe-area-inset-bottom,0px))!important}
    .mobile-bottom-nav{min-height:72px}
    .mbn-item{min-height:56px;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
    .lsp-share-toast{bottom:calc(92px + env(safe-area-inset-bottom,0px))}
}
@media(max-width:767.98px){
    .lsp-nuevas-lista{scroll-snap-type:x proximity;scroll-padding-inline:1px;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch;padding-bottom:9px}
    .lsp-nueva-palabra{scroll-snap-align:start;touch-action:manipulation}
    .lsp-aprender-btn{min-height:46px;touch-action:manipulation}
    .lsp-share-close{width:44px;height:44px;touch-action:manipulation}
    #sugerencias .list-group-item,#sugerenciasCategorias .list-group-item{min-height:56px;padding:10px 12px;touch-action:manipulation}
    .sugerencia-fila{min-height:44px}
}


/* INDICE_ALFABETICO_COMPACTO_V1_20260910 */
#bloqueBuscador .buscador-indice-linea {
    display: flex;
    align-items: stretch;
    gap: 9px;
    width: 100%;
}

#bloqueBuscador .buscador-indice-linea > .input-group {
    flex: 1 1 auto;
    min-width: 0;
}

#filaBotonIndiceAlfabetico.indice-compacto-wrap {
    flex: 0 0 auto;
    display: flex;
    align-items: stretch;
}

.indice-compacto-btn {
    min-height: 50px;
    padding: 0 13px;
    border: 2px solid #f1b514;
    border-radius: 999px;
    background: linear-gradient(180deg, #fffdf5 0%, #fff5c8 100%);
    color: #0f172a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 800;
    box-shadow: 0 5px 14px rgba(180, 127, 8, 0.13);
    transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
}

.indice-compacto-btn:hover,
.indice-compacto-btn:focus-visible {
    color: #0f172a;
    background: #ffefaa;
    box-shadow: 0 7px 18px rgba(180, 127, 8, 0.20);
    outline: none;
}

.indice-compacto-btn:active {
    transform: scale(.97);
}

.indice-compacto-az {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 35px;
    height: 27px;
    padding: 0 7px;
    border-radius: 8px;
    background: #ffc107;
    color: #172033;
    font-size: .78rem;
    letter-spacing: .02em;
}

.indice-compacto-texto {
    font-size: .88rem;
}

.indice-compacto-flecha {
    display: inline-block;
    font-size: 1rem;
    line-height: 1;
    transition: transform .2s ease;
}

.indice-compacto-btn[aria-expanded="true"] .indice-compacto-flecha {
    transform: rotate(180deg);
}

#filaIndiceAlfabetico.indice-compacto-desplegable {
    width: 100%;
}

#filaIndiceAlfabetico .indice-alfabetico {
    margin-top: 10px;
    padding: 12px;
    border: 1px solid rgba(148, 163, 184, .25);
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .07);
}

@media (max-width: 767.98px) {
    #bloqueBuscador .buscador-indice-linea {
        gap: 7px;
    }

    .indice-compacto-btn {
        min-width: 58px;
        min-height: 52px;
        padding: 0 8px;
        gap: 5px;
    }

    .indice-compacto-az {
        min-width: 33px;
        height: 26px;
        padding: 0 6px;
        font-size: .74rem;
    }

    #filaIndiceAlfabetico .indice-alfabetico {
        grid-template-columns: repeat(7, 1fr) !important;
        gap: 7px !important;
        padding: 10px;
        margin-top: 8px;
    }
}

@media (max-width: 380px) {
    .indice-compacto-btn {
        min-width: 54px;
        padding: 0 6px;
    }

    #btnBuscar {
        padding-left: .8rem !important;
        padding-right: .8rem !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .indice-compacto-btn,
    .indice-compacto-flecha {
        transition: none !important;
    }
}

/* INDICE_VOCABULARIO_V1_20260910
   - A-Z a la izquierda en Diccionario y Vocabulario.
   - Vocabulario usa el azul de su buscador y su propio collapse. */
#bloqueBuscadorCategorias .buscador-indice-linea {
    display: flex;
    align-items: stretch;
    gap: 9px;
    width: 100%;
}

#bloqueBuscadorCategorias .buscador-indice-linea > .input-group {
    flex: 1 1 auto;
    min-width: 0;
}

#filaBotonIndiceAlfabeticoVocabulario.indice-compacto-wrap {
    flex: 0 0 auto;
    display: flex;
    align-items: stretch;
}

.indice-compacto-btn-vocabulario {
    border-color: #0d6efd;
    background: linear-gradient(135deg, #2785ff 0%, #0867ea 100%);
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(13, 110, 253, .22);
}

.indice-compacto-btn-vocabulario:hover,
.indice-compacto-btn-vocabulario:focus-visible {
    color: #ffffff;
    background: linear-gradient(135deg, #1f7cf5 0%, #075fd8 100%);
    box-shadow: 0 8px 20px rgba(13, 110, 253, .30);
}

.indice-compacto-btn-vocabulario .indice-compacto-az {
    background: rgba(255,255,255,.17);
    color: #ffffff;
    border: 1px solid rgba(255,255,255,.28);
}

#filaIndiceAlfabeticoVocabulario.indice-compacto-desplegable {
    width: 100%;
}

#filaIndiceAlfabeticoVocabulario .indice-alfabetico {
    margin-top: 10px;
    padding: 12px;
    border: 1px solid rgba(13, 110, 253, .18);
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 8px 20px rgba(13, 110, 253, .08);
}

#indiceAlfabeticoVocabulario .btn-abc:hover,
#indiceAlfabeticoVocabulario .btn-abc:focus-visible,
#indiceAlfabeticoVocabulario .btn-abc.active {
    background: #0d6efd;
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(13, 110, 253, .28);
}

@media (max-width: 767.98px) {
    #bloqueBuscadorCategorias .buscador-indice-linea {
        gap: 7px;
    }

    #filaIndiceAlfabeticoVocabulario .indice-alfabetico {
        grid-template-columns: repeat(7, 1fr) !important;
        gap: 7px !important;
        padding: 10px;
        margin-top: 8px;
    }
}

@media (max-width: 380px) {
    #btnBuscarCategorias {
        padding-left: .8rem !important;
        padding-right: .8rem !important;
        min-width: 58px !important;
    }
}


/* CORRECCION_TARJETA_CATEGORIAS_V2_20260911
   Mantiene el desglose Diccionario/Vocabulario dentro de la tarjeta,
   alineado como el resto de las estadísticas y sin cuadros flotantes. */
#statCardCategorias #detalleCategoriasStats {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    vertical-align: middle !important;
}

#statCardCategorias #detalleCategoriasStats .stat2-desglose-num,
#statCardCategorias #detalleCategoriasStats .stat2-desglose-sep,
#statCardCategorias #detalleCategoriasStats .stat2-desglose-label,
#statCardCategorias #detalleCategoriasStats .stat2-desglose-icon-img {
    position: static !important;
    transform: none !important;
    flex: 0 0 auto !important;
}

@media (max-width: 576px) {
    #statCardCategorias #detalleCategoriasStats {
        gap: 5px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

/* DEFINICION_COLAPSABLE_DICCIONARIO_V1_20260911
   Mantiene el texto completo en el DOM, pero acerca el video cuando una
   definición del Diccionario es larga. */
.definicion-colapsable {
    background: #eef6ff;
    border-left: 4px solid #0d6efd;
    border-radius: .5rem;
    padding: 1rem;
}

.definicion-colapsable-contenido {
    position: relative;
}

.definicion-colapsable-texto {
    color: #1e293b;
    font-size: 1rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.definicion-colapsable-cerrada .definicion-colapsable-texto {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    overflow: hidden;
}

.definicion-colapsable-cerrada .definicion-colapsable-contenido::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2.2rem;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(238, 246, 255, 0), #eef6ff 88%);
}

.definicion-colapsable-toggle {
    display: inline-flex;
    align-items: center;
    gap: .32rem;
    margin-top: .55rem;
    padding: .28rem .15rem;
    border: 0;
    background: transparent;
    color: #0d6efd;
    font-size: .88rem;
    font-weight: 800;
    line-height: 1.2;
    cursor: pointer;
    touch-action: manipulation;
}

.definicion-colapsable-toggle:hover,
.definicion-colapsable-toggle:focus-visible {
    color: #084298;
    text-decoration: underline;
}

.definicion-colapsable-toggle:focus-visible {
    outline: 2px solid rgba(13, 110, 253, .35);
    outline-offset: 3px;
    border-radius: .35rem;
}

@media (max-width: 767.98px) {
    .definicion-colapsable {
        padding: .85rem .9rem;
    }

    .definicion-colapsable-cerrada .definicion-colapsable-texto {
        -webkit-line-clamp: 4;
    }

    .definicion-colapsable-toggle {
        min-height: 38px;
        margin-top: .35rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .definicion-colapsable {
        scroll-behavior: auto;
    }
}


/* LO_NUEVO_ENCIMA_APRENDIZAJE_V1_20260912
   Lo nuevo ocupa una fila completa y aparece antes de Tu aprendizaje. */
#lspMejorasInicio .lsp-mejoras-grid {
    grid-template-columns: 1fr;
}
#lspNuevasCard {
    order: 1;
    grid-column: 1 / -1;
}
#lspModoCard {
    order: 2;
    grid-column: 1 / -1;
}


/* ANIMACION_LO_NUEVO_V1_20260912
   Llama la atención al cargar sin dejar una animación permanente o molesta. */
#lspNuevasCard {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    animation: lspLoNuevoPulso 1.35s cubic-bezier(.22, 1, .36, 1) .55s 2;
}

#lspNuevasCard::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(110deg,
        transparent 18%,
        rgba(255, 193, 7, .08) 38%,
        rgba(56, 189, 248, .16) 50%,
        rgba(255, 193, 7, .08) 62%,
        transparent 82%);
    transform: translateX(-125%);
    animation: lspLoNuevoBrillo 1.35s ease-in-out .55s 2;
}

#lspNuevasCard > * {
    position: relative;
    z-index: 1;
}

#lspNuevasCard .lsp-mejora-icono {
    transform-origin: center;
    animation: lspLoNuevoIcono .9s cubic-bezier(.34, 1.56, .64, 1) .7s 2;
}

@keyframes lspLoNuevoPulso {
    0%, 100% {
        transform: translateY(0) scale(1);
        box-shadow: 0 7px 20px rgba(15, 23, 42, .065);
    }
    45% {
        transform: translateY(-2px) scale(1.006);
        box-shadow: 0 13px 30px rgba(37, 99, 235, .16), 0 0 0 2px rgba(255, 193, 7, .14);
    }
}

@keyframes lspLoNuevoBrillo {
    0% { transform: translateX(-125%); }
    70%, 100% { transform: translateX(125%); }
}

@keyframes lspLoNuevoIcono {
    0%, 100% { transform: scale(1) rotate(0deg); }
    45% { transform: scale(1.13) rotate(-6deg); }
    68% { transform: scale(1.08) rotate(5deg); }
}

@media (prefers-reduced-motion: reduce) {
    #lspNuevasCard,
    #lspNuevasCard::before,
    #lspNuevasCard .lsp-mejora-icono {
        animation: none !important;
    }
}

/* ANIMACION_LO_NUEVO_VIEWPORT_V2_20260912
   La animación ya no se consume apenas carga la página. Se activa cuando
   la tarjeta "Lo nuevo" entra realmente en la pantalla y dura ~6 s. */
#lspNuevasCard,
#lspNuevasCard::before,
#lspNuevasCard .lsp-mejora-icono {
    animation: none;
}

#lspNuevasCard.lsp-lo-nuevo-atencion {
    animation: lspLoNuevoPulso 1.45s cubic-bezier(.22, 1, .36, 1) 4;
}

#lspNuevasCard.lsp-lo-nuevo-atencion::before {
    animation: lspLoNuevoBrillo 1.45s ease-in-out 4;
}

#lspNuevasCard.lsp-lo-nuevo-atencion .lsp-mejora-icono {
    animation: lspLoNuevoIcono 1.05s cubic-bezier(.34, 1.56, .64, 1) 5;
}

@media (prefers-reduced-motion: reduce) {
    #lspNuevasCard.lsp-lo-nuevo-atencion,
    #lspNuevasCard.lsp-lo-nuevo-atencion::before,
    #lspNuevasCard.lsp-lo-nuevo-atencion .lsp-mejora-icono {
        animation: none !important;
    }
}

/* ============================================================
   EQUILIBRIO_DESCUBRE_AVATAR_MOVIL_V1_20260912
   En móvil, Descubre deja de dominar toda la fila y el personaje
   animado gana presencia. No cambia escritorio ni Vocabulario.
   ============================================================ */
@media (max-width: 991.98px) {
    body:not(.vista-temas-movil):not(.senal-cerrada) #filaHeroPrincipal {
        grid-template-columns: minmax(0, 1.35fr) minmax(130px, 0.9fr) !important;
        column-gap: 8px !important;
        align-items: center !important;
    }
    body:not(.vista-temas-movil):not(.senal-cerrada) #senalDelDia {
        min-width: 0 !important;
        align-self: center !important;
    }
    body:not(.vista-temas-movil):not(.senal-cerrada) #senalDelDia .dia-rect-card {
        min-height: 108px !important;
        border-radius: 15px !important;
    }
    body:not(.vista-temas-movil):not(.senal-cerrada) #senalDelDia .dia-rect-media {
        width: 96px !important;
        margin: 5px 0 5px 5px !important;
        border-radius: 8px !important;
    }
    body:not(.vista-temas-movil):not(.senal-cerrada) #senalDelDia .dia-rect-body {
        padding: 5px 6px !important;
    }
    body:not(.vista-temas-movil):not(.senal-cerrada) #senalDelDia .dia-rect-nav {
        gap: 3px !important;
        margin-bottom: 1px !important;
    }
    body:not(.vista-temas-movil):not(.senal-cerrada) #senalDelDia .dia-rect-nav-btn {
        width: 21px !important;
        height: 21px !important;
        font-size: 9px !important;
    }
    body:not(.vista-temas-movil):not(.senal-cerrada) #senalDelDia .dia-rect-label {
        font-size: 9px !important;
    }
    body:not(.vista-temas-movil):not(.senal-cerrada) #senalDelDia .dia-rect-badge {
        font-size: 7px !important;
        padding: 1px 5px !important;
        margin-bottom: 2px !important;
    }
    body:not(.vista-temas-movil):not(.senal-cerrada) #senalDelDia .dia-rect-titulo {
        font-size: 15px !important;
        line-height: 1.08 !important;
        margin-bottom: 2px !important;
    }
    body:not(.vista-temas-movil):not(.senal-cerrada) #senalDelDia .dia-rect-btn {
        font-size: 9.5px !important;
        padding: 5px 12px !important;
        border-radius: 9px !important;
    }
    body:not(.vista-temas-movil):not(.senal-cerrada) #colAvatarHero {
        align-self: center !important;
        justify-content: center !important;
        overflow: visible !important;
        min-width: 0 !important;
    }
    body:not(.vista-temas-movil):not(.senal-cerrada) #colAvatarHero .avatar-hero-img {
        width: auto !important;
        height: 148px !important;
        max-width: 145px !important;
        object-fit: contain !important;
        object-position: center bottom !important;
    }
}

@media (max-width: 430px) {
    body:not(.vista-temas-movil):not(.senal-cerrada) #filaHeroPrincipal {
        grid-template-columns: minmax(0, 1.28fr) minmax(118px, 0.92fr) !important;
        column-gap: 6px !important;
    }
    body:not(.vista-temas-movil):not(.senal-cerrada) #colAvatarHero .avatar-hero-img {
        height: 138px !important;
        max-width: 132px !important;
    }
    body:not(.vista-temas-movil):not(.senal-cerrada) #senalDelDia .dia-rect-media {
        width: 90px !important;
    }
    body:not(.vista-temas-movil):not(.senal-cerrada) #senalDelDia .dia-rect-titulo {
        font-size: 14px !important;
    }
}

/* ============================================================
   CONTROLES_VIDEO_PALABRA_V1_20260912
   Rediseño visual de los controles del video en las fichas de
   Diccionario y Vocabulario. Mantiene intactas las 7 velocidades
   existentes y conserva tortuga/conejo como apoyo visual.
   ============================================================ */
#resultado .controles-video,
#resultadoCategorias .controles-video {
    width: 100%;
    max-width: 760px;
    margin: 10px auto 0 !important;
    padding: 10px 12px;
    border: 1px solid rgba(197, 145, 18, .28);
    border-radius: 18px;
    background: linear-gradient(180deg, #fff9e8 0%, #fff3cf 100%);
    box-shadow: 0 8px 20px rgba(15, 23, 42, .08), inset 0 1px 0 rgba(255, 255, 255, .9);
    gap: 9px !important;
}

#resultado .controles-video > .btn,
#resultadoCategorias .controles-video > .btn {
    min-width: 48px;
    min-height: 48px;
    padding: 7px 11px;
    border: 0 !important;
    border-radius: 15px !important;
    background: linear-gradient(180deg, #132858 0%, #0c1c42 100%) !important;
    color: #fff !important;
    font-weight: 800;
    box-shadow: 0 6px 13px rgba(15, 30, 67, .19), inset 0 1px 0 rgba(255, 255, 255, .1);
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

#resultado .controles-video > .btn:hover,
#resultadoCategorias .controles-video > .btn:hover,
#resultado .controles-video > .btn:focus-visible,
#resultadoCategorias .controles-video > .btn:focus-visible {
    color: #fff !important;
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 8px 17px rgba(15, 30, 67, .24), 0 0 0 3px rgba(255, 193, 7, .14);
    outline: none;
}

#resultado .controles-video > .btn:active,
#resultadoCategorias .controles-video > .btn:active {
    transform: scale(.96);
}

/* Reproducir/Pausar es la acción principal: amarillo de marca. */
#resultado #btnPlayPause,
#resultadoCategorias #btnPlayPause,
#resultado #btnPlayPauseSugerida,
#resultadoCategorias #btnPlayPauseSugerida {
    background: linear-gradient(180deg, #ffd84c 0%, #f6bb08 100%) !important;
    color: #14213d !important;
    box-shadow: 0 7px 16px rgba(190, 137, 4, .24), inset 0 1px 0 rgba(255, 255, 255, .55) !important;
}

#resultado #btnPlayPause:hover,
#resultadoCategorias #btnPlayPause:hover,
#resultado #btnPlayPauseSugerida:hover,
#resultadoCategorias #btnPlayPauseSugerida:hover,
#resultado #btnPlayPause:focus-visible,
#resultadoCategorias #btnPlayPause:focus-visible,
#resultado #btnPlayPauseSugerida:focus-visible,
#resultadoCategorias #btnPlayPauseSugerida:focus-visible {
    color: #14213d !important;
    filter: brightness(1.02);
}

#resultado .controles-video-texto,
#resultadoCategorias .controles-video-texto {
    font-size: .72rem;
    font-weight: 800;
    line-height: 1;
}

/* La velocidad se lee como una sola pastilla: tortuga | 1x | conejo. */
#resultado .controles-video-velocidad,
#resultadoCategorias .controles-video-velocidad {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 5px 7px;
    border: 1px solid rgba(20, 33, 61, .12);
    border-radius: 999px;
    background: rgba(255, 255, 255, .78);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}

#resultado .controles-video-velocidad .btn,
#resultadoCategorias .controles-video-velocidad .btn {
    width: 40px;
    height: 40px;
    min-width: 40px;
    padding: 0 !important;
    display: inline-grid;
    place-items: center;
    border: 0 !important;
    border-radius: 50% !important;
    background: #132858 !important;
    color: #fff !important;
    font-size: 1rem;
    box-shadow: 0 4px 10px rgba(15, 30, 67, .17);
    transition: transform .16s ease, background-color .16s ease;
    touch-action: manipulation;
}

#resultado .controles-video-velocidad .btn:active,
#resultadoCategorias .controles-video-velocidad .btn:active {
    transform: scale(.92);
}

#resultado #palabraVelocidadLabel,
#resultadoCategorias #palabraVelocidadLabel,
#resultado #velocidadSugeridaLabel,
#resultadoCategorias #velocidadSugeridaLabel {
    min-width: 42px;
    text-align: center;
    color: #14213d !important;
    font-size: .98rem !important;
    font-weight: 900 !important;
    letter-spacing: -.01em;
}

/* Móvil: dos filas claras. Arriba acciones, abajo velocidad + fullscreen. */
@media (max-width: 767.98px) {
    #resultado .controles-video,
    #resultadoCategorias .controles-video {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        align-items: center;
        gap: 8px !important;
        padding: 9px;
        border-radius: 17px;
    }

    #resultado .controles-video > .btn,
    #resultadoCategorias .controles-video > .btn {
        width: 100%;
        min-width: 0;
        min-height: 50px;
        padding: 7px 5px;
        border-radius: 14px !important;
        font-size: .94rem;
    }

    #resultado .controles-video-velocidad,
    #resultadoCategorias .controles-video-velocidad {
        grid-column: 1 / span 3;
        width: 100%;
        min-width: 0;
        min-height: 50px;
        justify-content: space-evenly;
        padding: 5px 9px;
    }

    #resultado .controles-video-velocidad + .btn,
    #resultadoCategorias .controles-video-velocidad + .btn {
        grid-column: 4;
        width: 100%;
        min-width: 0;
        min-height: 50px;
    }

    #resultado .controles-video-velocidad .btn,
    #resultadoCategorias .controles-video-velocidad .btn {
        width: 40px;
        height: 40px;
        min-width: 40px;
        font-size: 1.06rem;
    }

    #resultado .controles-video-texto,
    #resultadoCategorias .controles-video-texto {
        font-size: .66rem;
    }
}

@media (max-width: 390px) {
    #resultado .controles-video,
    #resultadoCategorias .controles-video {
        gap: 6px !important;
        padding: 8px;
    }

    #resultado .controles-video > .btn,
    #resultadoCategorias .controles-video > .btn {
        min-height: 48px;
        font-size: .88rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    #resultado .controles-video .btn,
    #resultadoCategorias .controles-video .btn {
        transition: none !important;
    }
}

/* ============================================================
   CONTROLES_VIDEO_VISUAL_V2_20260912
   Rediseño visual de los controles del video. Conserva intactas
   las velocidades actuales y los iconos tortuga/conejo porque son
   una referencia visual importante para usuarios sordos.
   ============================================================ */
body .controles-video-compactos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 10px;
    padding: 9px 10px;
    border: 1px solid rgba(190, 145, 24, 0.24);
    border-radius: 18px;
    background: linear-gradient(180deg, #fffaf0 0%, #fff2cf 100%);
    box-shadow:
        0 7px 18px rgba(15, 23, 42, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

body .controles-video-compactos > .btn {
    width: 46px;
    height: 46px;
    min-width: 46px;
    min-height: 46px;
    padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 14px !important;
    background: linear-gradient(180deg, #172856 0%, #0d1838 100%) !important;
    color: #ffffff !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: 1rem;
    font-weight: 800;
    box-shadow:
        0 6px 12px rgba(10, 22, 56, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);
    transition:
        transform 0.16s ease,
        box-shadow 0.16s ease,
        filter 0.16s ease;
    -webkit-tap-highlight-color: transparent;
}

/* Reproducir/Pausar: control principal, más visible sin cambiar su función. */
body .controles-video-compactos > .btn:nth-child(2) {
    width: 52px;
    height: 52px;
    min-width: 52px;
    min-height: 52px;
    border-radius: 16px !important;
    background: linear-gradient(180deg, #ffd84a 0%, #f5b900 100%) !important;
    color: #102047 !important;
    border-color: rgba(181, 130, 0, 0.22) !important;
    box-shadow:
        0 8px 18px rgba(201, 147, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.58);
}

body .controles-video-compactos > .btn:hover,
body .controles-video-compactos > .btn:focus-visible {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

body .controles-video-compactos > .btn:active {
    transform: scale(0.94);
    box-shadow: 0 3px 8px rgba(10, 22, 56, 0.18);
}

body .controles-video-compactos > .btn:focus-visible,
body .controles-video-velocidad .btn:focus-visible {
    outline: 3px solid rgba(255, 193, 7, 0.38) !important;
    outline-offset: 2px;
}

/* La tortuga, la velocidad y el conejo se mantienen siempre juntos y
   ahora se leen como un único control visual. */
body .controles-video-velocidad {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 52px;
    padding: 4px 6px;
    border: 1px solid rgba(15, 23, 42, 0.14);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.88);
    color: #102047;
    font-size: 1rem;
    font-weight: 900;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 4px 10px rgba(15, 23, 42, 0.07);
    flex-shrink: 0;
}

body .controles-video-velocidad .btn {
    width: 43px;
    height: 43px;
    min-width: 43px;
    min-height: 43px;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, #172856 0%, #0d1838 100%) !important;
    color: #ffffff !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.08rem;
    line-height: 1;
    box-shadow:
        0 5px 10px rgba(10, 22, 56, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.09);
    transition: transform 0.16s ease, filter 0.16s ease;
    -webkit-tap-highlight-color: transparent;
}

body .controles-video-velocidad .btn:hover,
body .controles-video-velocidad .btn:focus-visible {
    filter: brightness(1.10);
    transform: translateY(-1px);
}

body .controles-video-velocidad .btn:active {
    transform: scale(0.93);
}

/* Si el valor 1x/0.8x/etc. está envuelto en un elemento, gana una zona
   central estable; si es texto directo, hereda el mismo peso del grupo. */
body .controles-video-velocidad > span,
body .controles-video-velocidad .velocidad-actual,
body .controles-video-velocidad .texto-velocidad {
    min-width: 38px;
    padding: 0 2px;
    color: #102047;
    text-align: center;
    font-size: 1rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

/* Pantalla completa conserva el mismo lenguaje visual, pero con un borde
   ligeramente más claro para reconocerlo como acción de vista. */
body .controles-video-compactos > .btn:last-child {
    border-color: rgba(255, 255, 255, 0.22) !important;
}

@media (max-width: 576px) {
    body .controles-video-compactos {
        gap: 6px;
        padding: 8px 7px;
        border-radius: 16px;
    }

    body .controles-video-compactos > .btn {
        width: 43px;
        height: 43px;
        min-width: 43px;
        min-height: 43px;
        border-radius: 13px !important;
        font-size: 0.94rem;
    }

    body .controles-video-compactos > .btn:nth-child(2) {
        width: 48px;
        height: 48px;
        min-width: 48px;
        min-height: 48px;
        border-radius: 15px !important;
    }

    body .controles-video-velocidad {
        gap: 5px;
        min-height: 48px;
        padding: 3px 5px;
        font-size: 0.96rem;
    }

    body .controles-video-velocidad .btn {
        width: 39px;
        height: 39px;
        min-width: 39px;
        min-height: 39px;
        font-size: 1rem;
    }

    body .controles-video-velocidad > span,
    body .controles-video-velocidad .velocidad-actual,
    body .controles-video-velocidad .texto-velocidad {
        min-width: 34px;
        font-size: 0.95rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    body .controles-video-compactos > .btn,
    body .controles-video-velocidad .btn {
        transition: none !important;
    }
}



/* ============================================================
   FULLSCREEN_VIDEO_MOVIL_FIX_V1_20260912
   Corrige la vista de pantalla completa en Android/Chrome.
   El iframe ocupa correctamente el área disponible y los controles
   personalizados permanecen visibles dentro del fullscreen real.
   ============================================================ */
.video-palabra-pantalla-completa,
.video-palabra-pantalla-completa:fullscreen {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    background: #000 !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    z-index: 2147483000 !important;
}

.video-palabra-pantalla-completa iframe,
.video-palabra-pantalla-completa:fullscreen iframe {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    flex: 1 1 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    aspect-ratio: auto !important;
    background: #000 !important;
}

body .video-palabra-pantalla-completa > .video-palabra-controles-pantalla-completa,
body .video-palabra-pantalla-completa:fullscreen > .video-palabra-controles-pantalla-completa {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    transform: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: rgba(7, 12, 28, .97) !important;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, .28) !important;
    z-index: 2147483646 !important;
}

body.video-palabra-pantalla-completa-activa {
    overflow: hidden !important;
    overscroll-behavior: none;
}

@media (max-width: 767.98px) {
    body .video-palabra-pantalla-completa > .video-palabra-controles-pantalla-completa,
    body .video-palabra-pantalla-completa:fullscreen > .video-palabra-controles-pantalla-completa {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 6px !important;
        padding: 7px 8px calc(7px + env(safe-area-inset-bottom, 0px)) !important;
    }

    body .video-palabra-pantalla-completa > .video-palabra-controles-pantalla-completa .controles-video-velocidad,
    body .video-palabra-pantalla-completa:fullscreen > .video-palabra-controles-pantalla-completa .controles-video-velocidad {
        grid-column: 1 / span 3 !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    body .video-palabra-pantalla-completa > .video-palabra-controles-pantalla-completa .controles-video-velocidad + .btn,
    body .video-palabra-pantalla-completa:fullscreen > .video-palabra-controles-pantalla-completa .controles-video-velocidad + .btn {
        grid-column: 4 !important;
        width: 100% !important;
    }
}


/* ============================================================
   FULLSCREEN_VIDEO_MOVIL_NATIVE_TOAST_FIX_V2_20260912
   Android/Chrome: mantenemos fullscreen nativo porque es el modo mas
   estable para YouTube. El aviso del navegador aparece temporalmente
   en la parte inferior; por eso la barra personalizada comienza elevada
   y luego baja suavemente cuando el aviso ya desaparecio.
   ============================================================ */
@keyframes lspControlesFullscreenEvitarAvisoChrome {
    0%, 88% {
        bottom: calc(154px + env(safe-area-inset-bottom, 0px));
    }
    100% {
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    }
}

@media (pointer: coarse), (max-width: 900px) {
    body .video-palabra-pantalla-completa:fullscreen > .video-palabra-controles-pantalla-completa,
    body .video-palabra-pantalla-completa:-webkit-full-screen > .video-palabra-controles-pantalla-completa {
        position: absolute !important;
        left: 8px !important;
        right: 8px !important;
        top: auto !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        border-radius: 18px !important;
        padding: 7px 8px calc(7px + env(safe-area-inset-bottom, 0px)) !important;
        background: rgba(7, 12, 28, .96) !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, .34) !important;
        z-index: 2147483646 !important;
        animation: lspControlesFullscreenEvitarAvisoChrome 6.2s ease-out forwards !important;
    }

    body .video-palabra-pantalla-completa:fullscreen > .video-palabra-controles-pantalla-completa .controles-video-velocidad,
    body .video-palabra-pantalla-completa:-webkit-full-screen > .video-palabra-controles-pantalla-completa .controles-video-velocidad {
        min-width: 0 !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body .video-palabra-pantalla-completa:fullscreen > .video-palabra-controles-pantalla-completa,
    body .video-palabra-pantalla-completa:-webkit-full-screen > .video-palabra-controles-pantalla-completa {
        animation-duration: 6.2s !important;
        animation-timing-function: steps(1, end) !important;
    }
}