/**
 * PREPOL Temario — Estilos del contenido importado desde JSON del pipeline.
 *
 * Scope: todos los selectores van prefijados con .prepol-fragmento-contenido
 * (que ya existe en prepol-temario-ui.php) para no filtrar a nada externo.
 *
 * Tokens reutilizados de temario.css (definidos en .prepol-temario-app,
 * que a su vez consumen tokens.css — fuente única, CROSS-REPO-TEMARIO.md §5):
 *   --prepol-navy  #031a43     (azul marino institucional)
 *   --prepol-navy-2 #0a2b66
 *   --prepol-yellow #FFC400    (bandera / examinable)
 *   --prepol-red    #C60B1E    (bandera / BOE literal)
 *   --prepol-green  #10B981    (material de apoyo — verde único de marca, D2)
 *   --prepol-fg, --prepol-fg-muted, --prepol-bg-card, --prepol-border
 *   --prepol-shadow, --prepol-radius
 *
 * Convencion: las marcas de contenido (.is-examinable, .is-literal_boe,
 * .is-apoyo) pintan una franja lateral fina a la izquierda del bloque. Eso
 * evita saturar al alumno con color de fondo y mantiene la pagina limpia.
 */

/* ============================================================================
   1. Tipografia y ritmo vertical del area de contenido
   ============================================================================ */

/* Cuerpo del fragmento — mobile-first.
 * Base: paddings reducidos y tipografia compacta para lectura en movil.
 * A partir de 720px se restauran los valores desktop (ver seccion 12). */
.prepol-fragmento-contenido {
    max-width: 72ch;
    margin: 0 auto;
    padding: 4px 2px 32px;
    font-size: 0.98rem;
    line-height: 1.72;
    color: var(--prepol-fg);
}

/* 2026-06-11 (ronda 4, referencia visual): +aire entre bloques — gran
   parte del "respira" del mockup es ritmo vertical, no tipografía. */
.prepol-fragmento-contenido > * + * {
    margin-top: 22px;
}

.prepol-fragmento-contenido h2,
.prepol-fragmento-contenido h3,
.prepol-fragmento-contenido h4 {
    color: var(--prepol-navy);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.35;
}

/* Barra de estructura en headings (estilo mockup; navy porque azul =
   estructura, CROSS-REPO §5). Hoy el contenido importado llega plano —
   estas reglas aplican a fragmentos manuales y a las subsecciones que
   TemarioPRO emitirá (petición cross-repo anotada). */
.prepol-fragmento-contenido h2,
.prepol-fragmento-contenido h3 {
    padding-left: 14px;
    border-left: 5px solid var(--prepol-navy);
}

.prepol-fragmento-contenido h2 { font-size: 1.55rem; margin-top: 40px; }
.prepol-fragmento-contenido h3 { font-size: 1.25rem; margin-top: 32px; }
.prepol-fragmento-contenido h4 { font-size: 1.08rem; margin-top: 24px; }

/* Dieta visual del énfasis (ronda 4): el contenido actual trae inflación
   de negritas (el contrato §5 prevé derivarlas de prioridad_examen en
   TemarioPRO; mientras llega, rebajamos su peso visual de 700 a 600
   para que el ojo distinga lo IMPORTANTE de lo simplemente marcado). */
.prepol-fragmento-contenido p strong,
.prepol-fragmento-contenido li strong {
    font-weight: 600;
}

/* ============================================================================
   2. Bloque base (todos los prepol-blk)
   ============================================================================ */

.prepol-fragmento-contenido .prepol-blk {
    position: relative;
    border-radius: var(--prepol-radius-sm, 6px);
}

/* Marca izquierda fina segun marca_contenido. */
.prepol-fragmento-contenido .prepol-blk.is-examinable,
.prepol-fragmento-contenido .prepol-blk.is-literal_boe,
.prepol-fragmento-contenido .prepol-blk.is-apoyo {
    border-left: 3px solid transparent;
}

/* El padding fino que acompaña a la marca aplica SOLO a parrafos sueltos.
   Fix 2026-06-11 (capturas de Alex): esta regla (3 clases) pisaba con
   14px el padding-left propio de las cajas (nota_academia 48px,
   articulo_boe 46px) y de las listas (28px) cuando llevaban marca → el
   texto invadia el carril del icono (birrete/balanza sobre el texto) y
   los numeros de lista se salian de la caja. */
.prepol-fragmento-contenido p.prepol-blk.is-examinable,
.prepol-fragmento-contenido p.prepol-blk.is-literal_boe,
.prepol-fragmento-contenido p.prepol-blk.is-apoyo {
    padding-left: 14px;
}

.prepol-fragmento-contenido .prepol-blk.is-examinable  { border-left-color: var(--prepol-yellow); }
.prepol-fragmento-contenido .prepol-blk.is-literal_boe { border-left-color: var(--prepol-red); }
.prepol-fragmento-contenido .prepol-blk.is-apoyo      { border-left-color: var(--prepol-green); opacity: 0.92; }

/* Un pequeño badge de 2 letras en la esquina para marcas, solo visible
   en pantallas anchas. Ayuda al alumno a calibrar peso sin leer la guia. */
.prepol-fragmento-contenido .prepol-blk[data-marca]::after {
    content: '';
    position: absolute;
    right: -4px;
    top: 8px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 180ms ease;
}
.prepol-fragmento-contenido .prepol-blk[data-marca]:hover::after { opacity: 0.9; }
.prepol-fragmento-contenido .prepol-blk.is-examinable::after  { background: var(--prepol-yellow); }
.prepol-fragmento-contenido .prepol-blk.is-literal_boe::after { background: var(--prepol-red); }
.prepol-fragmento-contenido .prepol-blk.is-apoyo::after       { background: var(--prepol-green); }

/* ============================================================================
   3. Bloque TEXTO (parrafo narrativo)
   ============================================================================ */

/* Mobile-first: `text-align: left` + sin hyphens. El justify en pantallas
   estrechas genera "rios" y guiones feos. Solo activamos justify a partir
   de 720px donde la anchura de linea lo soporta. */
.prepol-fragmento-contenido p.prepol-blk-texto {
    margin: 0;
    text-align: left;
    hyphens: manual;
    text-wrap: pretty;
}

/* 2026-06-11 (ronda 3, referencia visual validada por Alex): también en
   desktop alineación izquierda — el justify a 72ch seguía generando ríos
   y guionado irregular. hyphens:auto se mantiene para palabras jurídicas
   kilométricas. */
@media (min-width: 720px) {
    .prepol-fragmento-contenido p.prepol-blk-texto {
        text-align: left;
        hyphens: auto;
    }
}

/* ============================================================================
   4. Bloque DEFINICION — caja destacada con termino en negrita
   ============================================================================ */

/* DEFINICION — 2026-04-20 (mock v3b): azul-lavanda claro para
   doctrina "fria" (conceptos que vertebran el tema pero no se aprenden
   literalmente como el BOE). Antes estaba en amarillo, que colisionaba
   visualmente con la marca is-examinable. La separacion semantica
   queda asi:
     - amarillo PREPOL  -> is-examinable (parrafos que entran tal cual)
     - azul-lavanda     -> definicion doctrinal (concepto, no literal)
     - rojo bandera     -> articulo_boe / boe_literal
     - verde marca      -> apoyo / pedagogico (#10B981 unico, D2)
   Mapa vinculante en papel Y web: CROSS-REPO-TEMARIO.md §5.
*/
.prepol-fragmento-contenido .prepol-blk-definicion {
    position: relative;
    background: var(--prepol-lavanda-bg, #f4f6fd);
    border: 1px solid #dbe1f2;
    border-left: 4px solid var(--prepol-lavanda, #6f82c7);
    padding: 14px 18px 14px 20px;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(15,23,69,0.03);
}

/* Etiqueta "Definición" arriba a la derecha, discreta pero presente.
   En mobile puede quedar pegada al borde superior sin romper el layout. */
.prepol-fragmento-contenido .prepol-blk-definicion::before {
    content: 'Definicion';
    position: absolute;
    top: 6px;
    right: 10px;
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--prepol-lavanda, #6f82c7);
    opacity: .85;
}

/* Termino: siempre en bloque propio, destacado. Aunque Guillermo lo escriba
   inline ("**Derecho objetivo:** ...") la marca HTML generada usa <strong
   class="prepol-blk-termino"> y la subimos a una linea completa con CSS. */
.prepol-fragmento-contenido .prepol-blk-definicion .prepol-blk-termino {
    display: block;
    margin-bottom: 4px;
    color: var(--prepol-navy);
    font-weight: 800;
    font-size: 1.02em;
    letter-spacing: -0.005em;
}

/* Variante para definicion examinable: barra izquierda amarillo PREPOL
   (senala que ADEMAS de ser definicion, es examinable). Mantenemos
   el fondo azul-lavanda para preservar la categoria "definicion". */
.prepol-fragmento-contenido .prepol-blk-definicion.is-examinable {
    border-left-color: var(--prepol-yellow);
    border-left-width: 5px;
    background: linear-gradient(90deg, #fef7db 0, #fef7db 6px, #f4f6fd 6px);
}

.prepol-fragmento-contenido .prepol-blk-definicion.is-examinable::before {
    color: #b38a00;
    content: 'Definicion - Examinable';
}

/* Cuando hay una serie consecutiva de definiciones (caso "Derecho objetivo
   / subjetivo / natural / positivo"), reducimos el gap para que se lean
   como una "familia" y no como 4 cajas independientes. */
.prepol-fragmento-contenido .prepol-blk-definicion + .prepol-blk-definicion {
    margin-top: 8px;
}

/* ============================================================================
   5. Bloque ARTICULO_BOE — blockquote juridico
   ============================================================================ */

/* 2026-06-11 (ronda 4, referencia visual validada por Alex): caja rosada
   redondeada, tipografía sans (la cursiva que se veía era el font-style
   italic del blockquote de GeneratePress — se anula), referencia al final
   en rojo. El flex column permite reordenar el <cite> (que el render
   emite primero) sin tocar el HTML canónico. */
.prepol-fragmento-contenido .prepol-blk-articulo_boe {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #FBF1F1;
    border-left: 4px solid var(--prepol-red);
    margin: 0;
    padding: 18px 22px 16px 52px;
    border-radius: 10px;
    font-family: var(--prepol-font, inherit);
    font-style: normal;
    font-size: inherit;
    color: #1a1a1a;
    box-shadow: inset 0 0 0 1px rgba(198,11,30,0.08);
}

/* Dark mode: invertimos el tratamiento manteniendo la banda roja. */
html.dark .prepol-fragmento-contenido .prepol-blk-articulo_boe,
[data-theme="dark"] .prepol-fragmento-contenido .prepol-blk-articulo_boe {
    background: rgba(198,11,30,0.08);
    color: #f5e8e6;
    box-shadow: inset 0 0 0 1px rgba(198,11,30,0.25);
}

/* 2026-06-11 (ronda 3): la balanza '\2696' renderizaba como glifo confuso
   (en las capturas parecía una mancha). Comillas tipográficas serif
   grandes en el carril del padding (46/54px) — y aquí el rojo SÍ es
   correcto: es literal BOE (CROSS-REPO §5). */
.prepol-fragmento-contenido .prepol-blk-articulo_boe::before {
    content: '\201C';
    position: absolute;
    left: 10px;
    top: 4px;
    font-size: 2.5rem;
    line-height: 1;
    font-family: Georgia, "Times New Roman", serif;
    color: var(--prepol-red);
    opacity: 0.5;
}

.prepol-fragmento-contenido .prepol-blk-articulo_boe .prepol-blk-ref {
    display: block;
    order: 2; /* al final de la caja, como el "(Artículo 81.1)" del mockup */
    font-family: var(--prepol-font);
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--prepol-red);
    margin-top: 10px;
    font-style: normal;
}
.prepol-fragmento-contenido .prepol-blk-articulo_boe .prepol-blk-ref::before { content: '('; }
.prepol-fragmento-contenido .prepol-blk-articulo_boe .prepol-blk-ref::after  { content: ')'; }

.prepol-fragmento-contenido .prepol-blk-articulo_boe p {
    margin: 0;
    line-height: 1.7;
    font-size: 0.98rem;
}

/* ============================================================================
   6. Bloque LISTA ENUMERADA / VIÑETAS
   ============================================================================ */

.prepol-fragmento-contenido .prepol-blk-lista_enumerada,
.prepol-fragmento-contenido .prepol-blk-lista,
.prepol-fragmento-contenido .prepol-blk-lista_vinetas,
.prepol-fragmento-contenido .prepol-blk-lista_bullets {
    padding-left: 28px;
    margin: 0;
}

.prepol-fragmento-contenido .prepol-blk-lista_enumerada li,
.prepol-fragmento-contenido .prepol-blk-lista li,
.prepol-fragmento-contenido .prepol-blk-lista_vinetas li,
.prepol-fragmento-contenido .prepol-blk-lista_bullets li {
    margin: 8px 0;
    padding-left: 4px;
}

/* 2026-06-11 (ronda 3, referencia visual validada por Alex): numeración
   en circulitos navy + separador sutil entre items, en lugar del ::marker
   plano. Navy = estructura (CROSS-REPO §5; el rojo del mockup de
   referencia queda reservado a literal BOE). */
.prepol-fragmento-contenido .prepol-blk-lista_enumerada {
    list-style: none;
    counter-reset: prepol-li;
    padding-left: 0;
}
.prepol-fragmento-contenido .prepol-blk-lista_enumerada li {
    counter-increment: prepol-li;
    position: relative;
    padding: 2px 0 12px 38px;
    margin: 10px 0;
    border-bottom: 1px solid rgba(3, 26, 67, 0.08);
}
.prepol-fragmento-contenido .prepol-blk-lista_enumerada li:last-child {
    border-bottom: 0;
    padding-bottom: 2px;
}
.prepol-fragmento-contenido .prepol-blk-lista_enumerada li::before {
    content: counter(prepol-li);
    position: absolute;
    left: 0;
    top: 1px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--prepol-navy);
    color: #fff;
    font-size: 0.74rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ============================================================================
   7. Bloque TABLA_COMPARATIVA — con scroll horizontal en movil
   ============================================================================ */

.prepol-fragmento-contenido .prepol-blk-tabla-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 12px -4px;
    padding: 0 4px 6px;
    scrollbar-width: thin;
}

.prepol-fragmento-contenido .prepol-blk-tabla_comparativa,
.prepol-fragmento-contenido .prepol-blk-tabla {
    width: 100%;
    min-width: 420px;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--prepol-border);
    border-radius: 8px;
    overflow: hidden;
    font-size: 0.94rem;
    box-shadow: 0 1px 2px rgba(3,26,67,0.04);
}

.prepol-fragmento-contenido .prepol-blk-tabla_comparativa thead,
.prepol-fragmento-contenido .prepol-blk-tabla thead {
    background: var(--prepol-navy);
    color: #fff;
}

.prepol-fragmento-contenido .prepol-blk-tabla_comparativa th,
.prepol-fragmento-contenido .prepol-blk-tabla th {
    text-align: left;
    padding: 10px 14px;
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.prepol-fragmento-contenido .prepol-blk-tabla_comparativa td,
.prepol-fragmento-contenido .prepol-blk-tabla td {
    padding: 10px 14px;
    vertical-align: top;
    border-top: 1px solid var(--prepol-border);
    line-height: 1.55;
}

.prepol-fragmento-contenido .prepol-blk-tabla_comparativa tbody tr:nth-child(even),
.prepol-fragmento-contenido .prepol-blk-tabla tbody tr:nth-child(even) {
    background: #f8f9fc;
}

.prepol-fragmento-contenido .prepol-blk-tabla_comparativa tbody tr:hover,
.prepol-fragmento-contenido .prepol-blk-tabla tbody tr:hover {
    background: #eef1f7;
}

/* ============================================================================
   8. Bloque NOTA_ACADEMIA — callout de la academia
   ============================================================================ */

.prepol-fragmento-contenido .prepol-blk-nota_academia {
    display: block;
    background: linear-gradient(135deg, #fff9dc 0%, #fff4b8 100%);
    border: 1px solid #efd564;
    border-left: 4px solid var(--prepol-yellow);
    padding: 14px 18px 14px 48px;
    border-radius: 10px;
    position: relative;
    color: #3d2a00;
    font-size: 0.97rem;
}

.prepol-fragmento-contenido .prepol-blk-nota_academia::before {
    content: '\1F393'; /* graduation cap */
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    filter: drop-shadow(0 1px 0 rgba(0,0,0,0.1));
}

.prepol-fragmento-contenido .prepol-blk-nota_academia .prepol-blk-nota-label {
    display: inline-block;
    margin-right: 6px;
    font-weight: 700;
    color: var(--prepol-navy);
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    vertical-align: 2px;
}

/* ============================================================================
   9. Bloque PLACEHOLDER_IMAGEN
   ============================================================================ */

.prepol-fragmento-contenido .prepol-blk-placeholder_imagen {
    margin: 0;
    text-align: center;
}

.prepol-fragmento-contenido .prepol-blk-placeholder_imagen .prepol-blk-ph-box {
    border: 2px dashed var(--prepol-border);
    background: repeating-linear-gradient(
        135deg,
        #fafbfd,
        #fafbfd 10px,
        #f4f5f9 10px,
        #f4f5f9 20px
    );
    border-radius: 10px;
    padding: 36px 20px;
    color: var(--prepol-fg-muted);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
}

.prepol-fragmento-contenido .prepol-blk-placeholder_imagen figcaption {
    margin-top: 8px;
    color: var(--prepol-fg-muted);
    font-size: 0.88rem;
    font-style: italic;
}

/* ============================================================================
   10. Titulos de epigrafe internos (nivel 2 dentro de una seccion)
   ============================================================================ */

.prepol-fragmento-contenido .prepol-blk-titulo {
    color: var(--prepol-navy);
    font-weight: 700;
    margin: 32px 0 12px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--prepol-yellow);
    display: inline-block;
    padding-right: 24px;
}

/* ============================================================================
   11. Siguiente seccion — CTA grande entre fragmentos consecutivos
   ============================================================================ */

.prepol-fragmento-contenido .prepol-siguiente-bloque {
    margin-top: 48px;
    padding: 20px;
    background: linear-gradient(135deg, var(--prepol-navy) 0%, var(--prepol-navy-2) 100%);
    color: #fff;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    gap: 14px;
    justify-content: space-between;
    gap: 20px;
    box-shadow: 0 4px 18px rgba(3,26,67,0.22);
    text-decoration: none;
    transition: transform 200ms ease, box-shadow 200ms ease;
    position: relative;
    overflow: hidden;
}

.prepol-fragmento-contenido .prepol-siguiente-bloque::before {
    content: '';
    position: absolute;
    top: -40%;
    right: -10%;
    width: 260px;
    height: 260px;
    background: radial-gradient(circle, rgba(255,196,0,0.22) 0%, transparent 68%);
    pointer-events: none;
}

.prepol-fragmento-contenido .prepol-siguiente-bloque:hover,
.prepol-fragmento-contenido .prepol-siguiente-bloque:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 8px 26px rgba(3,26,67,0.34);
    color: #fff;
    text-decoration: none;
}

.prepol-fragmento-contenido .prepol-siguiente-bloque:focus-visible {
    outline: 3px solid var(--prepol-yellow);
    outline-offset: 3px;
}

.prepol-fragmento-contenido .prepol-siguiente-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.prepol-fragmento-contenido .prepol-siguiente-kicker {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--prepol-yellow);
    opacity: 0.95;
}

.prepol-fragmento-contenido .prepol-siguiente-titulo {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.prepol-fragmento-contenido .prepol-siguiente-num {
    display: inline-block;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.18);
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    margin-right: 8px;
    vertical-align: 2px;
}

.prepol-fragmento-contenido .prepol-siguiente-arrow {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--prepol-yellow);
    color: var(--prepol-navy);
    align-self: flex-end;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    font-weight: 900;
    flex-shrink: 0;
    box-shadow: 0 2px 10px rgba(255,196,0,0.4);
    transition: transform 200ms ease;
}

.prepol-fragmento-contenido .prepol-siguiente-bloque:hover .prepol-siguiente-arrow {
    transform: translateX(4px);
}

/* Variante "ultimo fragmento" — al final del tema, el boton lleva al
   listado del tema en verde para cerrar el recorrido. */
.prepol-fragmento-contenido .prepol-siguiente-bloque.is-ultimo {
    background: linear-gradient(135deg, #047857 0%, var(--prepol-green) 100%);
    box-shadow: 0 4px 18px rgba(16,185,129,0.32);
}
.prepol-fragmento-contenido .prepol-siguiente-bloque.is-ultimo .prepol-siguiente-kicker {
    color: #e8fff2;
}
.prepol-fragmento-contenido .prepol-siguiente-bloque.is-ultimo .prepol-siguiente-arrow {
    background: #fff;
    color: #047857;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

/* ============================================================================
   12. Tipografia responsive (desktop overrides — mobile-first)
   ============================================================================ */

@media (min-width: 720px) {
    .prepol-fragmento-contenido {
        font-size: 1.02rem;
        padding: 8px 4px 40px;
    }
    .prepol-fragmento-contenido .prepol-blk-articulo_boe {
        padding-left: 54px;
    }
    .prepol-fragmento-contenido .prepol-blk-articulo_boe::before {
        left: 14px;
        font-size: 2.8rem;
    }
    .prepol-fragmento-contenido .prepol-blk-nota_academia {
        padding-left: 56px;
    }
    .prepol-fragmento-contenido .prepol-siguiente-bloque {
        padding: 28px 28px 26px;
        flex-direction: row;
        align-items: center;
        text-align: left;
        gap: 24px;
    }
    .prepol-fragmento-contenido .prepol-siguiente-arrow {
        align-self: center;
    }
}

/* ============================================================================
   13. Dark mode — adapta los fondos claros a tonos oscuros
   ============================================================================ */

html.dark .prepol-fragmento-contenido .prepol-blk-definicion,
[data-theme="dark"] .prepol-fragmento-contenido .prepol-blk-definicion,
.prepol-temario-app[data-theme="dark"] .prepol-blk-definicion {
    background: linear-gradient(180deg, #2a2518 0%, #2f2a20 100%);
    border-color: #5a4a1f;
    color: #f1e8c8;
}
html.dark .prepol-fragmento-contenido .prepol-blk-definicion .prepol-blk-termino,
[data-theme="dark"] .prepol-fragmento-contenido .prepol-blk-definicion .prepol-blk-termino {
    color: var(--prepol-yellow);
}

html.dark .prepol-fragmento-contenido .prepol-blk-articulo_boe,
[data-theme="dark"] .prepol-fragmento-contenido .prepol-blk-articulo_boe {
    background: #2a1418;
    color: #f7d7db;
}

html.dark .prepol-fragmento-contenido .prepol-blk-nota_academia,
[data-theme="dark"] .prepol-fragmento-contenido .prepol-blk-nota_academia {
    background: linear-gradient(135deg, #2d2816 0%, #332e18 100%);
    border-color: #5a4e1f;
    color: #f5e8b8;
}
html.dark .prepol-fragmento-contenido .prepol-blk-nota_academia .prepol-blk-nota-label,
[data-theme="dark"] .prepol-fragmento-contenido .prepol-blk-nota_academia .prepol-blk-nota-label {
    color: var(--prepol-yellow);
}

html.dark .prepol-fragmento-contenido .prepol-blk-tabla_comparativa tbody tr:nth-child(even),
[data-theme="dark"] .prepol-fragmento-contenido .prepol-blk-tabla_comparativa tbody tr:nth-child(even) {
    background: #1a2340;
}
html.dark .prepol-fragmento-contenido .prepol-blk-tabla_comparativa tbody tr:hover,
[data-theme="dark"] .prepol-fragmento-contenido .prepol-blk-tabla_comparativa tbody tr:hover {
    background: #253060;
}

html.dark .prepol-fragmento-contenido .prepol-blk-placeholder_imagen .prepol-blk-ph-box,
[data-theme="dark"] .prepol-fragmento-contenido .prepol-blk-placeholder_imagen .prepol-blk-ph-box {
    background: #121a2e;
    border-color: #263156;
    color: var(--prepol-fg-muted);
}

/* ============================================================================
   7b. Leyenda de marcas de contenido (Sprint 1, abr 2026)
   ============================================================================
   Chips siempre visibles en la cabecera del contenido del fragmento. Explica
   el codigo de color de las barras laterales (is-examinable, is-literal_boe,
   is-apoyo). Sticky para que el alumno la siga viendo al hacer scroll. */

.prepol-fragmento-contenido .prepol-marca-leyenda {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--prepol-space-2);
    margin: 0 0 var(--prepol-space-5) 0;
    padding: var(--prepol-space-3);
    background: var(--prepol-bg);
    border: 1px solid var(--prepol-border);
    border-radius: var(--prepol-radius-sm);
    position: sticky;
    top: var(--prepol-space-2);
    z-index: 5;
    backdrop-filter: saturate(1.2);
}

.prepol-fragmento-contenido .prepol-marca-leyenda-label {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--prepol-fg-muted);
    margin-right: var(--prepol-space-2);
}

.prepol-fragmento-contenido .prepol-marca-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--prepol-border);
    background: var(--prepol-bg-card);
    color: var(--prepol-fg);
    cursor: help;
}

.prepol-fragmento-contenido .prepol-marca-chip-pip {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.prepol-fragmento-contenido .prepol-marca-chip.is-examinable {
    background: var(--prepol-examinable-bg);
    border-color: var(--prepol-examinable-edge);
}
.prepol-fragmento-contenido .prepol-marca-chip.is-examinable .prepol-marca-chip-pip {
    background: var(--prepol-examinable-edge);
}

.prepol-fragmento-contenido .prepol-marca-chip.is-literal_boe {
    background: var(--prepol-literal-bg);
    border-color: var(--prepol-literal-edge);
}
.prepol-fragmento-contenido .prepol-marca-chip.is-literal_boe .prepol-marca-chip-pip {
    background: var(--prepol-literal-edge);
}

.prepol-fragmento-contenido .prepol-marca-chip.is-apoyo {
    background: var(--prepol-apoyo-bg);
    border-color: var(--prepol-apoyo-edge);
}
.prepol-fragmento-contenido .prepol-marca-chip.is-apoyo .prepol-marca-chip-pip {
    background: var(--prepol-apoyo-edge);
}

@media (min-width: 720px) {
    .prepol-fragmento-contenido .prepol-marca-leyenda {
        padding: var(--prepol-space-3) var(--prepol-space-4);
    }
}

html.dark .prepol-fragmento-contenido .prepol-marca-leyenda,
[data-theme="dark"] .prepol-fragmento-contenido .prepol-marca-leyenda {
    background: var(--prepol-bg-alt);
    border-color: var(--prepol-border);
}
html.dark .prepol-fragmento-contenido .prepol-marca-chip,
[data-theme="dark"] .prepol-fragmento-contenido .prepol-marca-chip {
    color: var(--prepol-fg);
}

/* ============================================================================
   8. Bloques semanticos v3b (Sprint 1, abr 2026)
   ============================================================================
   Nuevos tipos que emite el importer PHP tras alinear con la mock editorial:
   mnemotecnia, alerta_examen/alerta, confusion_tipica/confusion, ejemplo,
   pregunta_activa, recitalo, linea_completar, referencia_legal,
   cambio_legislativo. Patron: <aside> o <div> con clase .prepol-blk-<tipo>,
   cabecera con .prepol-blk-icono (18x18 tenido) + .prepol-blk-titulo en
   mayusculas pequenas, body libre. Mobile-first. */

/* --- 8.1 Patrones comunes --- */

.prepol-fragmento-contenido .prepol-blk-titulo {
    font-weight: 800;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--prepol-navy);
    margin: 0 0 var(--prepol-space-2) 0;
    padding-left: 28px;
    line-height: 1.3;
}

.prepol-fragmento-contenido .prepol-blk-icono {
    position: absolute;
    left: 14px;
    top: 16px;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    background: currentColor;
    opacity: 0.18;
    pointer-events: none;
}

/* Caja generica compartida (aside/div con borde izq, padding y radius). El
   .prepol-blk-titulo queda 28px indent para dejar sitio al icono absoluto. */
.prepol-fragmento-contenido .prepol-blk-mnemotecnia,
.prepol-fragmento-contenido .prepol-blk-alerta_examen,
.prepol-fragmento-contenido .prepol-blk-alerta,
.prepol-fragmento-contenido .prepol-blk-confusion_tipica,
.prepol-fragmento-contenido .prepol-blk-confusion,
.prepol-fragmento-contenido .prepol-blk-ejemplo,
.prepol-fragmento-contenido .prepol-blk-cambio_legislativo,
.prepol-fragmento-contenido .prepol-blk-pregunta_activa,
.prepol-fragmento-contenido .prepol-blk-recitalo,
.prepol-fragmento-contenido .prepol-blk-linea_completar {
    position: relative;
    padding: var(--prepol-space-4);
    padding-left: 44px;
    border-radius: var(--prepol-radius);
    border-left: 4px solid transparent;
    margin-block: var(--prepol-space-5);
}

/* --- 8.2 Mnemotecnia (violeta) --- */
.prepol-fragmento-contenido .prepol-blk-mnemotecnia {
    background: var(--prepol-mnemo-bg);
    border-left-color: var(--prepol-mnemo-edge);
    color: var(--prepol-fg);
}
.prepol-fragmento-contenido .prepol-blk-mnemotecnia .prepol-blk-titulo {
    color: var(--prepol-mnemo-ink);
}
.prepol-fragmento-contenido .prepol-blk-mnemotecnia .prepol-blk-icono {
    background: var(--prepol-mnemo-edge);
    opacity: 0.28;
}
.prepol-fragmento-contenido .prepol-blk-mnemo-palabra {
    font-size: 1.75rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    color: var(--prepol-mnemo-ink);
    text-align: center;
    margin: var(--prepol-space-3) 0;
    line-height: 1.1;
}
.prepol-fragmento-contenido .prepol-blk-mnemo-desglose {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: var(--prepol-space-2);
    margin-top: var(--prepol-space-3);
    font-size: 0.94rem;
}
.prepol-fragmento-contenido .prepol-blk-mnemo-desglose > div {
    padding: var(--prepol-space-2) var(--prepol-space-3);
    background: rgba(255,255,255,0.55);
    border-radius: var(--prepol-radius-sm);
}
.prepol-fragmento-contenido .prepol-blk-mnemo-desglose strong {
    display: inline-block;
    min-width: 1.5em;
    color: var(--prepol-mnemo-ink);
    font-weight: 900;
}
.prepol-fragmento-contenido .prepol-blk-mnemo-frase {
    font-style: italic;
    margin-top: var(--prepol-space-3);
    color: var(--prepol-fg-muted);
}

/* --- 8.3 Alerta de examen (amarillo) --- */
.prepol-fragmento-contenido .prepol-blk-alerta_examen,
.prepol-fragmento-contenido .prepol-blk-alerta {
    background: var(--prepol-warn-bg);
    border-left-color: var(--prepol-warn-edge);
    color: #4d3a00;
}
.prepol-fragmento-contenido .prepol-blk-alerta_examen .prepol-blk-titulo,
.prepol-fragmento-contenido .prepol-blk-alerta .prepol-blk-titulo {
    color: var(--prepol-warn-edge);
}
.prepol-fragmento-contenido .prepol-blk-alerta_examen .prepol-blk-icono,
.prepol-fragmento-contenido .prepol-blk-alerta .prepol-blk-icono {
    background: var(--prepol-warn-edge);
    opacity: 0.35;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    border-radius: 0;
}

/* --- 8.4 Confusion tipica (rojo, 2 columnas) --- */
.prepol-fragmento-contenido .prepol-blk-confusion_tipica,
.prepol-fragmento-contenido .prepol-blk-confusion {
    background: var(--prepol-danger-bg);
    border-left-color: var(--prepol-danger-edge);
}
.prepol-fragmento-contenido .prepol-blk-confusion_tipica .prepol-blk-titulo,
.prepol-fragmento-contenido .prepol-blk-confusion .prepol-blk-titulo {
    color: var(--prepol-danger-edge);
}
.prepol-fragmento-contenido .prepol-blk-confusion_tipica .prepol-blk-icono,
.prepol-fragmento-contenido .prepol-blk-confusion .prepol-blk-icono {
    background: var(--prepol-danger-edge);
    opacity: 0.28;
    border-radius: 50%;
}
.prepol-fragmento-contenido .prepol-blk-confusion-intro {
    margin-bottom: var(--prepol-space-3);
    color: var(--prepol-fg);
}
.prepol-fragmento-contenido .prepol-blk-confusion-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--prepol-space-3);
    margin: var(--prepol-space-3) 0;
}
.prepol-fragmento-contenido .prepol-blk-confusion-item {
    padding: var(--prepol-space-3);
    background: #fff;
    border-radius: var(--prepol-radius-sm);
    border: 1px solid var(--prepol-border);
    position: relative;
}
.prepol-fragmento-contenido .prepol-blk-confusion-item:nth-child(1) {
    border-left: 3px solid var(--prepol-yellow);
}
.prepol-fragmento-contenido .prepol-blk-confusion-item:nth-child(2) {
    border-left: 3px solid var(--prepol-red);
}
.prepol-fragmento-contenido .prepol-blk-confusion-titulo {
    font-weight: 800;
    font-size: 1rem;
    color: var(--prepol-navy);
    margin-bottom: var(--prepol-space-2);
}
.prepol-fragmento-contenido .prepol-blk-confusion-cierre {
    margin-top: var(--prepol-space-3);
    padding-top: var(--prepol-space-3);
    border-top: 1px dashed var(--prepol-danger-edge);
    font-style: italic;
    color: var(--prepol-fg-muted);
}

/* --- 8.5 Ejemplo (verde) --- */
.prepol-fragmento-contenido .prepol-blk-ejemplo {
    background: var(--prepol-example-bg);
    border-left-color: var(--prepol-example-edge);
}
.prepol-fragmento-contenido .prepol-blk-ejemplo .prepol-blk-titulo {
    color: #0d7a3f;
}
.prepol-fragmento-contenido .prepol-blk-ejemplo .prepol-blk-icono {
    background: var(--prepol-example-edge);
    opacity: 0.35;
}

/* --- 8.6 Pregunta activa (con lineas manuscritas) --- */
.prepol-fragmento-contenido .prepol-blk-pregunta_activa {
    background: var(--prepol-info-bg);
    border-left-color: var(--prepol-info-edge);
    padding-left: var(--prepol-space-4);
}
.prepol-fragmento-contenido .prepol-blk-pregunta_activa .prepol-blk-titulo {
    padding-left: 0;
    color: var(--prepol-info-edge);
}
.prepol-fragmento-contenido .prepol-blk-pregunta {
    font-weight: 600;
    margin-bottom: var(--prepol-space-4);
}
.prepol-fragmento-contenido .prepol-blk-linea-resp {
    height: 28px;
    border-bottom: 1px dashed var(--prepol-border);
    margin-bottom: var(--prepol-space-2);
}

/* --- 8.7 Recitalo (oculto hasta focus/click) --- */
.prepol-fragmento-contenido .prepol-blk-recitalo {
    background: #f4ecfb;
    border-left-color: #9c36b5;
    padding-left: var(--prepol-space-4);
}
.prepol-fragmento-contenido .prepol-blk-recitalo .prepol-blk-titulo {
    padding-left: 0;
    color: #7a2396;
}
.prepol-fragmento-contenido .prepol-blk-oculto {
    background: repeating-linear-gradient(
        90deg,
        #dacfe6 0 8px,
        transparent 8px 16px
    );
    color: transparent;
    user-select: none;
    padding: var(--prepol-space-3);
    border-radius: var(--prepol-radius-sm);
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease;
    min-height: 1.8em;
}
.prepol-fragmento-contenido .prepol-blk-oculto:hover,
.prepol-fragmento-contenido .prepol-blk-oculto:focus,
.prepol-fragmento-contenido .prepol-blk-oculto.is-revealed {
    background: transparent;
    color: inherit;
    user-select: text;
    outline: 2px solid #9c36b5;
    outline-offset: 2px;
}

/* --- 8.8 Linea completar (huecos __) --- */
.prepol-fragmento-contenido .prepol-blk-linea_completar {
    background: #fffceb;
    border-left-color: var(--prepol-yellow);
    padding-left: var(--prepol-space-4);
}
.prepol-fragmento-contenido .prepol-blk-linea_completar .prepol-blk-titulo {
    padding-left: 0;
    color: #7a5b00;
}
.prepol-fragmento-contenido .prepol-blk-instruccion {
    color: var(--prepol-fg-muted);
    font-size: 0.92rem;
    margin-bottom: var(--prepol-space-2);
}
.prepol-fragmento-contenido .prepol-blk-cloze {
    font-size: 1.05rem;
    line-height: 2;
}
.prepol-fragmento-contenido .prepol-blk-hueco {
    display: inline-block;
    min-width: 80px;
    height: 1.3em;
    border-bottom: 2px solid var(--prepol-yellow);
    margin: 0 4px;
    vertical-align: baseline;
}

/* --- 8.9 Referencia legal (cita inline) --- */
.prepol-fragmento-contenido .prepol-blk-referencia_legal {
    color: var(--prepol-fg-muted);
    font-size: 0.95rem;
    padding: var(--prepol-space-2) 0;
}
.prepol-fragmento-contenido .prepol-blk-referencia_legal .prepol-blk-ref {
    font-style: normal;
    font-weight: 700;
    color: var(--prepol-red);
    background: #fdecee;
    padding: 2px 8px;
    border-radius: var(--prepol-radius-sm);
    font-size: 0.88em;
    margin-right: 4px;
    white-space: nowrap;
}

/* --- 8.10 Cambio legislativo (ambar) --- */
.prepol-fragmento-contenido .prepol-blk-cambio_legislativo {
    background: #fff4e5;
    border-left-color: #d97706;
    padding-left: var(--prepol-space-4);
}
.prepol-fragmento-contenido .prepol-blk-cambio_legislativo .prepol-blk-titulo {
    padding-left: 0;
    color: #b45309;
}
.prepol-fragmento-contenido .prepol-blk-norma-anterior {
    margin-top: var(--prepol-space-3);
    padding: var(--prepol-space-2) var(--prepol-space-3);
    background: rgba(255,255,255,0.55);
    border-radius: var(--prepol-radius-sm);
    font-size: 0.93rem;
}
.prepol-fragmento-contenido .prepol-blk-norma-anterior strong {
    color: #b45309;
}

/* --- 8.11 Ajustes desktop (>=720px) --- */
@media (min-width: 720px) {
    .prepol-fragmento-contenido .prepol-blk-mnemotecnia,
    .prepol-fragmento-contenido .prepol-blk-alerta_examen,
    .prepol-fragmento-contenido .prepol-blk-alerta,
    .prepol-fragmento-contenido .prepol-blk-confusion_tipica,
    .prepol-fragmento-contenido .prepol-blk-confusion,
    .prepol-fragmento-contenido .prepol-blk-ejemplo {
        padding: var(--prepol-space-5);
        padding-left: 52px;
    }
    .prepol-fragmento-contenido .prepol-blk-mnemo-palabra {
        font-size: 2.3rem;
    }
    .prepol-fragmento-contenido .prepol-blk-confusion-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* --- 8.12 Dark mode — todos los selectores cubren html.dark + [data-theme="dark"] --- */
html.dark .prepol-fragmento-contenido .prepol-blk-mnemotecnia,
[data-theme="dark"] .prepol-fragmento-contenido .prepol-blk-mnemotecnia {
    background: var(--prepol-mnemo-bg);
    color: #e0d6ff;
}
html.dark .prepol-fragmento-contenido .prepol-blk-mnemotecnia .prepol-blk-titulo,
html.dark .prepol-fragmento-contenido .prepol-blk-mnemo-palabra,
html.dark .prepol-fragmento-contenido .prepol-blk-mnemo-desglose strong,
[data-theme="dark"] .prepol-fragmento-contenido .prepol-blk-mnemotecnia .prepol-blk-titulo,
[data-theme="dark"] .prepol-fragmento-contenido .prepol-blk-mnemo-palabra,
[data-theme="dark"] .prepol-fragmento-contenido .prepol-blk-mnemo-desglose strong {
    color: var(--prepol-mnemo-ink);
}
html.dark .prepol-fragmento-contenido .prepol-blk-mnemo-desglose > div,
[data-theme="dark"] .prepol-fragmento-contenido .prepol-blk-mnemo-desglose > div {
    background: rgba(255,255,255,0.05);
}

html.dark .prepol-fragmento-contenido .prepol-blk-alerta_examen,
html.dark .prepol-fragmento-contenido .prepol-blk-alerta,
[data-theme="dark"] .prepol-fragmento-contenido .prepol-blk-alerta_examen,
[data-theme="dark"] .prepol-fragmento-contenido .prepol-blk-alerta {
    background: var(--prepol-warn-bg);
    color: #f5e8b8;
}
html.dark .prepol-fragmento-contenido .prepol-blk-alerta_examen .prepol-blk-titulo,
html.dark .prepol-fragmento-contenido .prepol-blk-alerta .prepol-blk-titulo,
[data-theme="dark"] .prepol-fragmento-contenido .prepol-blk-alerta_examen .prepol-blk-titulo,
[data-theme="dark"] .prepol-fragmento-contenido .prepol-blk-alerta .prepol-blk-titulo {
    color: var(--prepol-yellow);
}

html.dark .prepol-fragmento-contenido .prepol-blk-confusion_tipica,
html.dark .prepol-fragmento-contenido .prepol-blk-confusion,
[data-theme="dark"] .prepol-fragmento-contenido .prepol-blk-confusion_tipica,
[data-theme="dark"] .prepol-fragmento-contenido .prepol-blk-confusion {
    background: var(--prepol-danger-bg);
    color: #f5d7db;
}
html.dark .prepol-fragmento-contenido .prepol-blk-confusion-item,
[data-theme="dark"] .prepol-fragmento-contenido .prepol-blk-confusion-item {
    background: var(--prepol-bg-card);
    border-color: var(--prepol-border);
}
html.dark .prepol-fragmento-contenido .prepol-blk-confusion_tipica .prepol-blk-titulo,
html.dark .prepol-fragmento-contenido .prepol-blk-confusion .prepol-blk-titulo,
html.dark .prepol-fragmento-contenido .prepol-blk-confusion-titulo,
[data-theme="dark"] .prepol-fragmento-contenido .prepol-blk-confusion_tipica .prepol-blk-titulo,
[data-theme="dark"] .prepol-fragmento-contenido .prepol-blk-confusion .prepol-blk-titulo,
[data-theme="dark"] .prepol-fragmento-contenido .prepol-blk-confusion-titulo {
    color: var(--prepol-yellow);
}

html.dark .prepol-fragmento-contenido .prepol-blk-ejemplo,
[data-theme="dark"] .prepol-fragmento-contenido .prepol-blk-ejemplo {
    background: var(--prepol-example-bg);
    color: #bce8c9;
}
html.dark .prepol-fragmento-contenido .prepol-blk-ejemplo .prepol-blk-titulo,
[data-theme="dark"] .prepol-fragmento-contenido .prepol-blk-ejemplo .prepol-blk-titulo {
    color: var(--prepol-green);
}

html.dark .prepol-fragmento-contenido .prepol-blk-pregunta_activa,
[data-theme="dark"] .prepol-fragmento-contenido .prepol-blk-pregunta_activa {
    background: var(--prepol-info-bg);
}
html.dark .prepol-fragmento-contenido .prepol-blk-pregunta_activa .prepol-blk-titulo,
[data-theme="dark"] .prepol-fragmento-contenido .prepol-blk-pregunta_activa .prepol-blk-titulo {
    color: var(--prepol-yellow);
}
html.dark .prepol-fragmento-contenido .prepol-blk-linea-resp,
[data-theme="dark"] .prepol-fragmento-contenido .prepol-blk-linea-resp {
    border-bottom-color: var(--prepol-border);
}

html.dark .prepol-fragmento-contenido .prepol-blk-recitalo,
[data-theme="dark"] .prepol-fragmento-contenido .prepol-blk-recitalo {
    background: #1f1430;
}
html.dark .prepol-fragmento-contenido .prepol-blk-oculto,
[data-theme="dark"] .prepol-fragmento-contenido .prepol-blk-oculto {
    background: repeating-linear-gradient(
        90deg,
        #3a2850 0 8px,
        transparent 8px 16px
    );
}

html.dark .prepol-fragmento-contenido .prepol-blk-linea_completar,
[data-theme="dark"] .prepol-fragmento-contenido .prepol-blk-linea_completar {
    background: #2a2518;
    color: #f5e8b8;
}
html.dark .prepol-fragmento-contenido .prepol-blk-linea_completar .prepol-blk-titulo,
[data-theme="dark"] .prepol-fragmento-contenido .prepol-blk-linea_completar .prepol-blk-titulo {
    color: var(--prepol-yellow);
}
html.dark .prepol-fragmento-contenido .prepol-blk-hueco,
[data-theme="dark"] .prepol-fragmento-contenido .prepol-blk-hueco {
    border-bottom-color: var(--prepol-yellow);
}

html.dark .prepol-fragmento-contenido .prepol-blk-referencia_legal .prepol-blk-ref,
[data-theme="dark"] .prepol-fragmento-contenido .prepol-blk-referencia_legal .prepol-blk-ref {
    background: #3a1418;
    color: #f7d7db;
}

html.dark .prepol-fragmento-contenido .prepol-blk-cambio_legislativo,
[data-theme="dark"] .prepol-fragmento-contenido .prepol-blk-cambio_legislativo {
    background: #2a1f10;
    color: #f5d9b8;
}
html.dark .prepol-fragmento-contenido .prepol-blk-cambio_legislativo .prepol-blk-titulo,
[data-theme="dark"] .prepol-fragmento-contenido .prepol-blk-cambio_legislativo .prepol-blk-titulo {
    color: #fbbf24;
}
html.dark .prepol-fragmento-contenido .prepol-blk-norma-anterior,
[data-theme="dark"] .prepol-fragmento-contenido .prepol-blk-norma-anterior {
    background: rgba(255,255,255,0.05);
}

/* ============================================================================
   9. Bloques v3b (mock 2026-04-20) — upgrades visuales para Tema 1
   ----------------------------------------------------------------------------
   Esta seccion sobreescribe/extiende los bloques existentes con los
   tratamientos del mock v3b. Todos son mobile-first: paddings modestos
   en movil, aire extra en >=720px. Contratos HTML asumidos:

     <aside class="prepol-blk-mnemotecnia">
       <h4 class="prepol-blk-titulo">Mnemotecnia PREPOL</h4>
       <p class="prepol-blk-mnemo-palabra">CLARA</p>
       ...
     </aside>

     <aside class="prepol-blk-boe-literal" data-boe-ref="Art. 1 CP">
       <h4 class="prepol-blk-titulo">Literal BOE</h4>
       <p>"..."</p>
     </aside>

     <aside class="prepol-blk-apoyo">
       <h4 class="prepol-blk-titulo">Apoyo - no memorizar</h4>
       <p>...</p>
     </aside>

     <aside class="prepol-blk-lo-imprescindible">
       <h4 class="prepol-blk-titulo">Lo imprescindible</h4>
       <ol>
         <li>...</li>
         ...
       </ol>
     </aside>

   Si Guillermo sube Gutenberg nativo, todos estos pueden renderizarse con
   block.json + save.js triviales (solo clase + children). No requieren JS
   runtime; el estilo se aplica por CSS puro.
   ============================================================================ */

/* --- 9.1 Mnemotecnia con chip header ("MNEMOTECNIA PREPOL") --- */

/* Convertimos el .prepol-blk-titulo en una pildora flotante estilo chip,
   visualmente desacoplada del bloque (sale por encima del borde). Se
   aplica solo al bloque mnemotecnia para no romper los demas. */
.prepol-fragmento-contenido .prepol-blk-mnemotecnia {
    padding-top: 28px; /* hueco para el chip que cuelga del borde */
}

.prepol-fragmento-contenido .prepol-blk-mnemotecnia .prepol-blk-titulo {
    position: absolute;
    top: -10px;
    left: 14px;
    padding: 4px 10px;
    background: var(--prepol-mnemo-edge, #6b4bb5);
    color: #fff;
    border-radius: 999px;
    font-size: .68rem;
    letter-spacing: .1em;
    box-shadow: 0 2px 6px rgba(107, 75, 181, .25);
    margin: 0;
}

/* El icono absoluto no tiene sentido con el chip header: lo anulamos. */
.prepol-fragmento-contenido .prepol-blk-mnemotecnia .prepol-blk-icono {
    display: none;
}

/* --- 9.2 BOE literal como bloque independiente (header pill oscuro + chip oro) --- */

.prepol-fragmento-contenido .prepol-blk-boe-literal {
    position: relative;
    background: #fdf7f2;
    border: 1px solid #f1d8d5;
    border-radius: 8px;
    padding: 36px 20px 18px 22px;
    margin: var(--prepol-space-5) 0;
    font-family: Georgia, "Times New Roman", serif;
    color: #1a1a1a;
    box-shadow: inset 4px 0 0 var(--prepol-red, #c60b1e);
}

/* Chip oscuro arriba-izquierda: "Literal BOE" */
.prepol-fragmento-contenido .prepol-blk-boe-literal .prepol-blk-titulo {
    position: absolute;
    top: -10px;
    left: 14px;
    padding: 5px 11px;
    background: var(--prepol-navy, #0a2540);
    color: #fff;
    border-radius: 999px;
    font-family: var(--prepol-font);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin: 0;
    padding-left: 11px; /* anula el 28px heredado si aplicase */
    line-height: 1.2;
    box-shadow: 0 2px 6px rgba(10, 37, 64, .25);
}

/* Chip dorado arriba-derecha con la referencia (Art. X Ley Y).
   Se pinta a partir del data-attribute para que el HTML quede limpio. */
.prepol-fragmento-contenido .prepol-blk-boe-literal[data-boe-ref]::before {
    content: attr(data-boe-ref);
    position: absolute;
    top: -10px;
    right: 14px;
    padding: 5px 11px;
    background: linear-gradient(135deg, #d4a017 0%, #b8860b 100%);
    color: #fff;
    border-radius: 999px;
    font-family: var(--prepol-font);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    box-shadow: 0 2px 6px rgba(184, 134, 11, .3);
}

.prepol-fragmento-contenido .prepol-blk-boe-literal p {
    margin: 0 0 .6em;
    line-height: 1.75;
    font-size: 1rem;
    font-style: italic;
}

.prepol-fragmento-contenido .prepol-blk-boe-literal p:last-child {
    margin-bottom: 0;
}

/* --- 9.3 Apoyo - no memorizar (verde-turquesa con badge) --- */

.prepol-fragmento-contenido .prepol-blk-apoyo {
    position: relative;
    background: #effaf7;
    border: 1px solid #c7ebe0;
    border-left: 4px solid #1aa87a;
    padding: 30px 18px 14px 18px;
    border-radius: 8px;
    margin: var(--prepol-space-5) 0;
    color: #0f3d2e;
}

.prepol-fragmento-contenido .prepol-blk-apoyo .prepol-blk-titulo {
    position: absolute;
    top: -10px;
    left: 14px;
    padding: 5px 11px;
    background: #1aa87a;
    color: #fff;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin: 0;
    padding-left: 11px;
    line-height: 1.2;
    box-shadow: 0 2px 6px rgba(26, 168, 122, .3);
}

/* Icono tipo "ampliacion/lupa" a la derecha. */
.prepol-fragmento-contenido .prepol-blk-apoyo::after {
    content: '\1F4A1'; /* bombilla */
    position: absolute;
    top: 8px;
    right: 14px;
    font-size: 1rem;
    opacity: .6;
}

.prepol-fragmento-contenido .prepol-blk-apoyo p {
    margin: 0 0 .5em;
    line-height: 1.65;
    font-size: .97rem;
}

.prepol-fragmento-contenido .prepol-blk-apoyo p:last-child {
    margin-bottom: 0;
}

/* --- 9.4 Lo imprescindible (navy oscuro + numeracion amarilla) --- */
/* Resumen de cierre de seccion — los 3-5 puntos que "aunque olvides
   todo lo demas, esto debe quedarte". Invertimos la paleta (fondo
   navy, texto claro, numeros amarillos) para que destaque como cierre
   enfatico y el alumno lo identifique visualmente con un vistazo. */

.prepol-fragmento-contenido .prepol-blk-lo-imprescindible {
    position: relative;
    background: linear-gradient(135deg, #0a2540 0%, #0f2e54 100%);
    color: #f4f7fc;
    border-radius: 10px;
    padding: 30px 18px 20px 18px;
    margin: var(--prepol-space-5) 0;
    box-shadow: 0 4px 12px rgba(10, 37, 64, .18);
}

.prepol-fragmento-contenido .prepol-blk-lo-imprescindible .prepol-blk-titulo {
    position: absolute;
    top: -10px;
    left: 14px;
    padding: 5px 11px;
    background: var(--prepol-yellow, #f5a623);
    color: var(--prepol-navy, #0a2540);
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin: 0;
    padding-left: 11px;
    line-height: 1.2;
    box-shadow: 0 2px 6px rgba(245, 166, 35, .35);
}

.prepol-fragmento-contenido .prepol-blk-lo-imprescindible ol,
.prepol-fragmento-contenido .prepol-blk-lo-imprescindible ul {
    list-style: none;
    counter-reset: imprescindible;
    padding: 0;
    margin: 0;
}

.prepol-fragmento-contenido .prepol-blk-lo-imprescindible li {
    counter-increment: imprescindible;
    position: relative;
    padding: 8px 0 8px 42px;
    margin: 0;
    line-height: 1.55;
    font-size: .97rem;
}

.prepol-fragmento-contenido .prepol-blk-lo-imprescindible li::before {
    content: counter(imprescindible);
    position: absolute;
    left: 0;
    top: 6px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--prepol-yellow, #f5a623);
    color: var(--prepol-navy, #0a2540);
    border-radius: 50%;
    font-weight: 900;
    font-size: .9rem;
    box-shadow: 0 2px 4px rgba(245, 166, 35, .35);
}

.prepol-fragmento-contenido .prepol-blk-lo-imprescindible li + li {
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.prepol-fragmento-contenido .prepol-blk-lo-imprescindible strong {
    color: var(--prepol-yellow, #f5a623);
    font-weight: 800;
}

@media (min-width: 720px) {
    .prepol-fragmento-contenido .prepol-blk-boe-literal,
    .prepol-fragmento-contenido .prepol-blk-apoyo,
    .prepol-fragmento-contenido .prepol-blk-lo-imprescindible {
        padding-left: 24px;
        padding-right: 24px;
    }
    .prepol-fragmento-contenido .prepol-blk-boe-literal p {
        font-size: 1.05rem;
        line-height: 1.8;
    }
    .prepol-fragmento-contenido .prepol-blk-lo-imprescindible li {
        font-size: 1.02rem;
        padding-left: 46px;
    }
}

/* --- 9.5 Dark mode para bloques v3b --- */
html.dark .prepol-fragmento-contenido .prepol-blk-boe-literal,
[data-theme="dark"] .prepol-fragmento-contenido .prepol-blk-boe-literal {
    background: #2a1418;
    color: #f5e8e6;
    border-color: #4a2026;
}
html.dark .prepol-fragmento-contenido .prepol-blk-apoyo,
[data-theme="dark"] .prepol-fragmento-contenido .prepol-blk-apoyo {
    background: rgba(26, 168, 122, .1);
    color: #c7ebe0;
    border-color: rgba(26, 168, 122, .25);
}
html.dark .prepol-fragmento-contenido .prepol-blk-lo-imprescindible,
[data-theme="dark"] .prepol-fragmento-contenido .prepol-blk-lo-imprescindible {
    background: linear-gradient(135deg, #050f1e 0%, #0a1e38 100%);
}
html.dark .prepol-fragmento-contenido .prepol-blk-definicion,
[data-theme="dark"] .prepol-fragmento-contenido .prepol-blk-definicion {
    background: #1a1d2e;
    border-color: #2b3154;
    color: #dfe5ff;
}
html.dark .prepol-fragmento-contenido .prepol-blk-definicion .prepol-blk-termino,
[data-theme="dark"] .prepol-fragmento-contenido .prepol-blk-definicion .prepol-blk-termino {
    color: #b8c3ff;
}

/* ============================================================================
   10. Hero "Bienvenido a tu primer tema" (mock v3b 2026-04-20)
   ----------------------------------------------------------------------------
   Solo aparece en Fase 1 de la primera sesion. Visibilidad condicional
   controlada por el article padre via data-pasada-visible: si el alumno
   salta a Fase 2/3 (raro: en primer acceso no estan disponibles), el
   CSS oculta el hero.
   ============================================================================ */

.prepol-fragmento-hero-bienvenida {
    margin: 0 0 var(--prepol-space-5) 0;
    padding: 22px 18px 20px 18px;
    background: linear-gradient(135deg, #fef9ee 0%, #fff 60%);
    border: 1px solid #f3e0b0;
    border-left: 4px solid var(--prepol-yellow, #f5a623);
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(245, 166, 35, .08);
    position: relative;
    overflow: hidden;
}

/* Oculto cuando el alumno esta en Fase 2 o 3 (el data-visible-en-fase
   se contrasta con data-pasada-visible del article padre). En Fase 1
   (la unica donde aparece) se queda visible. */
[data-pasada-visible="2"] .prepol-fragmento-hero-bienvenida,
[data-pasada-visible="3"] .prepol-fragmento-hero-bienvenida {
    display: none;
}

.prepol-fragmento-hero-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: 4px 10px;
    background: var(--prepol-yellow, #f5a623);
    color: var(--prepol-navy, #0a2540);
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1.2;
    margin-bottom: 12px;
}

.prepol-fragmento-hero-titulo {
    margin: 0 0 8px 0;
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--prepol-navy, #0a2540);
    text-wrap: balance;
    letter-spacing: -0.01em;
}

.prepol-fragmento-hero-lead {
    margin: 0 0 16px 0;
    font-size: .98rem;
    line-height: 1.55;
    color: var(--prepol-fg, #0a2540);
}

.prepol-fragmento-hero-lead strong {
    color: var(--prepol-navy, #0a2540);
    font-weight: 800;
}

.prepol-fragmento-hero-pasos {
    list-style: none;
    padding: 0;
    margin: 0 0 16px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.prepol-fragmento-hero-pasos li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid #f3e9c8;
    border-radius: 8px;
    transition: transform .15s, box-shadow .15s;
}

.prepol-fragmento-hero-pasos li:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(10, 37, 64, .06);
}

.prepol-fragmento-hero-paso-num {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--prepol-yellow, #f5a623);
    color: var(--prepol-navy, #0a2540);
    border-radius: 50%;
    font-weight: 900;
    font-size: .85rem;
}

.prepol-fragmento-hero-paso-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.prepol-fragmento-hero-paso-body strong {
    color: var(--prepol-navy, #0a2540);
    font-weight: 800;
    font-size: .92rem;
}

.prepol-fragmento-hero-paso-body span {
    color: var(--prepol-fg-muted, #5a6b82);
    font-size: .88rem;
    line-height: 1.4;
}

.prepol-fragmento-hero-nota {
    margin: 0;
    padding: 10px 14px;
    background: color-mix(in srgb, var(--prepol-yellow, #f5a623) 10%, transparent);
    border-radius: 6px;
    font-size: .86rem;
    color: var(--prepol-fg, #0a2540);
    line-height: 1.5;
}

.prepol-fragmento-hero-nota strong {
    color: var(--prepol-navy, #0a2540);
    font-weight: 800;
}

@media (min-width: 720px) {
    .prepol-fragmento-hero-bienvenida {
        padding: 28px 24px 24px 28px;
    }
    .prepol-fragmento-hero-titulo {
        font-size: 1.6rem;
    }
    .prepol-fragmento-hero-lead {
        font-size: 1.05rem;
    }
    .prepol-fragmento-hero-pasos {
        flex-direction: row;
        gap: 12px;
    }
    .prepol-fragmento-hero-pasos li {
        flex: 1;
        flex-direction: column;
        align-items: flex-start;
    }
}

html.dark .prepol-fragmento-hero-bienvenida,
[data-theme="dark"] .prepol-fragmento-hero-bienvenida {
    background: linear-gradient(135deg, #1f1a0a 0%, #2a2313 60%);
    border-color: #5a4618;
}
html.dark .prepol-fragmento-hero-titulo,
[data-theme="dark"] .prepol-fragmento-hero-titulo {
    color: var(--prepol-yellow, #f5a623);
}
html.dark .prepol-fragmento-hero-pasos li,
[data-theme="dark"] .prepol-fragmento-hero-pasos li {
    background: rgba(255, 255, 255, .04);
    border-color: #3a3018;
}
html.dark .prepol-fragmento-hero-paso-body strong,
[data-theme="dark"] .prepol-fragmento-hero-paso-body strong {
    color: #f5e8b8;
}
html.dark .prepol-fragmento-hero-paso-body span,
[data-theme="dark"] .prepol-fragmento-hero-paso-body span {
    color: #d1c8a8;
}
html.dark .prepol-fragmento-hero-lead,
html.dark .prepol-fragmento-hero-nota,
[data-theme="dark"] .prepol-fragmento-hero-lead,
[data-theme="dark"] .prepol-fragmento-hero-nota {
    color: #e5ddc0;
}

/* ============================================================================
 * 10. Tema 1 — Frecuencia en examen (chip graduado de 5 niveles)
 *     y Pregunta oficial CNP verbatim.
 *     Clases: .prepol-blk-frecuencia, .prepol-blk-fraseo_oficial
 * ========================================================================== */

.prepol-fragmento-contenido .prepol-blk-frecuencia {
    margin: 1rem 0 0.5rem;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.prepol-fragmento-contenido .prepol-blk-frecuencia-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.4;
    color: #fff;
    flex-shrink: 0;
}

.prepol-fragmento-contenido .prepol-blk-frecuencia.is-muy-frecuente .prepol-blk-frecuencia-chip {
    background: #C60B1E;
}
.prepol-fragmento-contenido .prepol-blk-frecuencia.is-frecuente .prepol-blk-frecuencia-chip {
    background: #E85D3F;
}
.prepol-fragmento-contenido .prepol-blk-frecuencia.is-ocasional .prepol-blk-frecuencia-chip {
    background: #C8A100;
    color: #111;
}
.prepol-fragmento-contenido .prepol-blk-frecuencia.is-rara .prepol-blk-frecuencia-chip {
    background: #4A6FA5;
}
.prepol-fragmento-contenido .prepol-blk-frecuencia.is-nunca .prepol-blk-frecuencia-chip {
    background: #9AA4B2;
    color: #111;
}

.prepol-fragmento-contenido .prepol-blk-frecuencia.has-cuerpo > *:not(.prepol-blk-frecuencia-chip) {
    flex: 1 1 auto;
}

/* Pregunta oficial CNP verbatim */
.prepol-fragmento-contenido .prepol-blk-fraseo_oficial {
    position: relative;
    margin: 1.25rem 0;
    padding: 1rem 1.1rem 1rem 3rem;
    background: #F1F5FB;
    border: 1px solid #D0DBEA;
    border-left: 4px solid #031a43;
    border-radius: 6px;
}

.prepol-fragmento-contenido .prepol-blk-fraseo_oficial::before {
    content: "\1F4DD"; /* :memo: */
    position: absolute;
    left: 0.8rem;
    top: 0.9rem;
    font-size: 1.1rem;
    line-height: 1;
}

.prepol-fragmento-contenido .prepol-blk-fraseo_oficial .prepol-blk-titulo {
    color: #031a43;
    margin: 0 0 0.4rem;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.prepol-fragmento-contenido .prepol-blk-fraseo-conv {
    font-weight: 500;
    color: #4a5568;
}

.prepol-fragmento-contenido .prepol-blk-fraseo_oficial p {
    margin: 0.2rem 0;
    line-height: 1.6;
}

.prepol-fragmento-contenido .prepol-blk-fraseo-resp {
    display: inline-block;
    margin-top: 0.6rem;
    padding: 0.2rem 0.7rem;
    background: #FFC400;
    color: #111;
    border-radius: 4px;
    font-weight: 700;
    font-size: 0.8rem;
}

/* Dark mode */
html.dark .prepol-fragmento-contenido .prepol-blk-fraseo_oficial,
[data-theme="dark"] .prepol-fragmento-contenido .prepol-blk-fraseo_oficial {
    background: #1a2338;
    border-color: #2d3a55;
}

html.dark .prepol-fragmento-contenido .prepol-blk-fraseo_oficial .prepol-blk-titulo,
[data-theme="dark"] .prepol-fragmento-contenido .prepol-blk-fraseo_oficial .prepol-blk-titulo {
    color: #FFC400;
}

html.dark .prepol-fragmento-contenido .prepol-blk-fraseo-conv,
[data-theme="dark"] .prepol-fragmento-contenido .prepol-blk-fraseo-conv {
    color: #c0cadc;
}