/* Lector estudiante: cromo propio + compatibilidad con hojas del editor */

:root {
    --reader-accent: #818cf8;
    --reader-accent-mid: #6366f1;
    --reader-glow: rgba(99, 102, 241, 0.22);
    --reader-surface-glass: rgba(30, 41, 59, 0.55);
    --reader-radius-lg: 16px;
    --reader-radius-md: 12px;
    --reader-font: 'Outfit', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/*
 * read.html carga dashboard.css (body con overflow en editor). Aqu? el scroll es del documento completo.
 */
body.reader-body {
    margin: 0;
    /* Fallback 100vh para iOS Safari donde 100vh incluye la barra de direcciones */
    min-height: 100vh;
    min-height: 100dvh;
    height: auto !important;
    max-height: none !important;
    overflow-x: hidden;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    /* Safe area para iPad con notch / iPad Pro */
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
    background: #0c1222;
    background-image: linear-gradient(168deg, #0f172a 0%, #1e293b 38%, #243447 100%);
    color: #e2e8f0;
    font-family: var(--reader-font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.reader-landing {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh; /* dvh aware de la barra del navegador en iOS */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.25rem;
    box-sizing: border-box;
    overflow-x: hidden;
}

/* Textura sutil (no imagen externa) */
.reader-landing::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 20px 20px;
    -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, black 20%, transparent 70%);
    mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, black 20%, transparent 70%);
    pointer-events: none;
}

.reader-landing-inner {
    position: relative;
    z-index: 1;
    max-width: 28rem;
    width: 100%;
    text-align: center;
}

.reader-landing-card {
    padding: 2rem 1.75rem 1.75rem;
    background: var(--reader-surface-glass);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: var(--reader-radius-lg);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.04) inset,
        0 24px 56px rgba(0, 0, 0, 0.35),
        0 0 80px var(--reader-glow);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.reader-open-book-panel {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    text-align: left;
}

.reader-landing-brand {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--reader-accent);
    margin: 0 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid rgba(129, 140, 248, 0.45);
}

.reader-landing-title {
    font-size: clamp(1.5rem, 4.5vw, 2rem);
    font-weight: 800;
    margin: 0 0 1rem;
    color: #f8fafc;
    letter-spacing: -0.03em;
    line-height: 1.2;
}

.reader-landing-lead {
    font-size: 1rem;
    line-height: 1.65;
    color: #cbd5e1;
    margin: 0 0 1.75rem;
}

.reader-landing-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    font-size: 0.9375rem;
    border-radius: var(--reader-radius-md);
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.4);
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease;
}

.reader-landing-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 28px rgba(99, 102, 241, 0.5);
}

.reader-landing-cta:active {
    transform: translateY(0);
}

.reader-landing-foot {
    margin-top: 2rem;
    font-size: 0.875rem;
}

.reader-landing-link {
    color: #a5b4fc;
    text-decoration: none;
}

.reader-landing-link:hover {
    text-decoration: underline;
}

.reader-name-panel {
    margin-top: 1.5rem;
    padding: 1.35rem 1.25rem 1.25rem;
    text-align: left;
    background: rgba(15, 23, 42, 0.72);
    border: 1px solid rgba(129, 140, 248, 0.22);
    border-radius: var(--reader-radius-md);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.28);
    max-width: 100%;
}

.reader-name-panel-title {
    margin: 0 0 0.5rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: #f8fafc;
}

.reader-name-panel-hint {
    margin: 0 0 1rem;
    font-size: 0.875rem;
    line-height: 1.55;
    color: #cbd5e1;
}

.reader-name-panel-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: #94a3b8;
    margin-bottom: 0.35rem;
}

.reader-name-panel-input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.65rem 0.75rem;
    margin-bottom: 1rem;
    font-size: 0.95rem;
    font-family: inherit;
    color: #0f172a;
    background: #f8fafc;
    border: 1px solid rgba(148, 163, 184, 0.5);
    border-radius: 8px;
}

.reader-name-panel-input:focus {
    outline: none;
    border-color: #818cf8;
    box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.35);
}

.reader-name-panel-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    justify-content: flex-end;
}

.reader-app {
    min-height: 100vh;
    min-height: 100dvh; /* dvh aware en Safari iOS */
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    background: #0b1120;
    overflow: visible;
}

.reader-toolbar {
    position: -webkit-sticky; /* Safari iOS < 13 webkit-sticky prefix */
    position: sticky;
    top: 0;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    padding: 0.55rem 1rem 0.6rem;
    /* Fondo s?lido para garantizar que position:sticky funcione en Safari/WebKit */
    /* backdrop-filter en el mismo elemento que sticky rompe WebKit ? lo ponemos en ::before */
    background: rgba(15, 23, 42, 0.96);
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
    z-index: 20;
    isolation: isolate;
}

/* Efecto glass en pseudo-elemento para no romper position:sticky en Safari/WebKit */
.reader-toolbar::before {
    content: '';
    position: absolute;
    inset: 0;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.04) 0%, rgba(15, 23, 42, 0.01) 100%);
    z-index: -1;
    pointer-events: none;
}

/* Cada fila del toolbar ocupa todo el ancho y mantiene su propio layout. */
.reader-toolbar-row {
    display: flex;
    align-items: center;
    gap: 0.65rem 1rem;
    min-width: 0;
}

.reader-toolbar-row--primary {
    flex-wrap: wrap;
    justify-content: space-between;
}

.reader-toolbar-row--tools {
    flex-wrap: wrap;
    justify-content: space-between;
    padding-top: 0.45rem;
    border-top: 1px solid rgba(148, 163, 184, 0.1);
}

.reader-toolbar-primary {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    gap: 0.65rem 1rem;
    width: 100%;
    justify-content: space-between;
}

.reader-toolbar-more {
    display: none;
    flex-shrink: 0;
}

.reader-toolbar-actions {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.reader-toolbar-tools-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.6rem;
    flex: 1 1 auto;
    min-width: 0;
}

.reader-toolbar-tools-primary {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: auto;
}

/* Texto/bordes legibles en los botones del toolbar (fondo oscuro). */
.reader-toolbar .btn-sm.btn-outline,
.reader-toolbar a.btn-sm.btn-outline {
    color: #e2e8f0 !important;
    border: 1px solid rgba(148, 163, 184, 0.45) !important;
    background: rgba(15, 23, 42, 0.55) !important;
}

.reader-toolbar .btn-sm.btn-outline:hover,
.reader-toolbar a.btn-sm.btn-outline:hover {
    color: #fff !important;
    border-color: rgba(199, 210, 254, 0.75) !important;
    background: rgba(99, 102, 241, 0.18) !important;
}

.reader-toolbar .btn-sm.btn-outline[aria-pressed="true"] {
    color: #e0e7ff !important;
    border-color: rgba(165, 180, 252, 0.6) !important;
    background: rgba(99, 102, 241, 0.28) !important;
}

.reader-toolbar .btn-icon {
    color: #cbd5e1;
}

.reader-toolbar .btn-icon:hover {
    color: #f8fafc;
}

.reader-toolbar-cluster {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}

.reader-toolbar-left {
    flex: 1 1 auto;
    min-width: 0;
}

.reader-toolbar-bookmeta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    min-width: 0;
    max-width: min(32rem, 60vw);
    text-align: left;
}

.reader-assignment-banner {
    margin-top: 0.35rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0.4rem 0.6rem;
    font-size: 0.75rem;
    line-height: 1.4;
    color: #e0e7ff !important;
    background: rgba(99, 102, 241, 0.22) !important;
    border: 1px solid rgba(165, 180, 252, 0.4) !important;
    border-radius: 8px;
}

.reader-assignment-banner[hidden] {
    display: none !important;
}

.reader-assignment-banner-inner strong {
    font-weight: 700;
    color: #ffffff !important;
}

.reader-finish-asig {
    margin: 0 0 0.75rem;
    padding: 0.65rem 0.75rem;
    font-size: 0.9rem;
    line-height: 1.45;
    color: #334155;
    background: #eef2ff;
    border-radius: 8px;
    border-left: 4px solid #6366f1;
}

a.reader-toolbar-home {
    flex-shrink: 0;
    text-decoration: none;
    color: #e2e8f0;
    border-color: rgba(148, 163, 184, 0.45);
}

a.reader-toolbar-home:hover {
    color: #fff;
    border-color: rgba(199, 210, 254, 0.6);
}

/* read.html: sin sesi?n v?lida */
.reader-read-error {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.25rem;
    box-sizing: border-box;
    background: linear-gradient(165deg, #0f172a 0%, #1e293b 42%, #334155 100%);
}

.reader-read-error[hidden] {
    display: none !important;
}

.reader-read-error-inner {
    max-width: 26rem;
    text-align: center;
}

.reader-read-error-title {
    margin: 0 0 0.75rem;
    font-size: 1.2rem;
    font-weight: 700;
    color: #f8fafc;
}

.reader-read-error-text {
    margin: 0 0 1.5rem;
    font-size: 0.9rem;
    line-height: 1.55;
    color: #cbd5e1;
}

.reader-toolbar-title {
    font-weight: 700;
    font-size: 0.9rem;
    color: #f8fafc;
    letter-spacing: -0.02em;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: min(20rem, 42vw);
}

.reader-toolbar-sep {
    width: 1px;
    height: 1.1rem;
    background: rgba(148, 163, 184, 0.35);
    flex-shrink: 0;
}

.reader-toolbar-student-line {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.35rem 0.5rem;
    min-width: 0;
    max-width: 100%;
}

.reader-toolbar-student-label {
    flex-shrink: 0;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #64748b;
}

.reader-toolbar-student {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #cbd5e1;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    max-width: min(20rem, 52vw);
}

.reader-toolbar-center {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.35rem;
    background: rgba(30, 41, 59, 0.65);
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.1);
}

.reader-toolbar .btn-icon {
    border-radius: 10px;
    transition:
        background 0.15s ease,
        color 0.15s ease,
        transform 0.12s ease;
}

.reader-toolbar .btn-icon:hover {
    background: rgba(148, 163, 184, 0.12);
}

.reader-toolbar .btn-icon:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(15, 23, 42, 1), 0 0 0 4px var(--reader-accent);
}

.reader-page-indicator {
    font-size: 0.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    color: #e2e8f0;
    min-width: 6.75rem;
    text-align: center;
    padding: 0.35rem 0.5rem;
    background: rgba(15, 23, 42, 0.5);
    border-radius: 8px;
}

.reader-page-jump {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0.25rem;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 8px;
}

.reader-page-jump-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.reader-page-jump-input {
    width: 4.2rem;
    padding: 0.2rem 0.35rem;
    border-radius: 6px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: #0f172a;
    color: #f8fafc;
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
}

.reader-page-jump-input:focus {
    outline: none;
    border-color: #818cf8;
    box-shadow: 0 0 0 2px rgba(129, 140, 248, 0.3);
}

.reader-toolbar-right {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    justify-content: flex-end;
}

.reader-profile-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    color: #cbd5e1 !important;
}

.reader-profile-wrap span {
    color: #cbd5e1 !important;
}

body.reader-body .reader-reading-profile {
    padding: 0.25rem 0.4rem;
    border-radius: 6px;
    border: 1px solid rgba(148, 163, 184, 0.4) !important;
    background: #0f172a !important;
    color: #f8fafc !important;
    font-size: 0.76rem;
}

.reader-text-size-group {
    display: inline-flex;
    gap: 0.3rem;
}

#reader-btn-glossary {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.reader-zoom-group {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.2rem 0.4rem 0.2rem 0.3rem;
    background: rgba(30, 41, 59, 0.75);
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.1);
}

.reader-zoom-pct {
    font-size: 0.75rem;
    font-weight: 600;
    color: #cbd5e1;
    min-width: 2.75rem;
    text-align: center;
}

.reader-btn-finish {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    white-space: nowrap;
    font-weight: 600;
    box-shadow: 0 2px 14px rgba(99, 102, 241, 0.35);
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease;
}

.reader-btn-finish-label--short {
    display: none;
}

.reader-btn-finish:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.45);
}

.reader-main {
    flex: 1 1 auto;
    min-height: 0;
    overflow: visible;
    padding: 1.5rem 1rem 2.5rem;
    box-sizing: border-box;
    background: radial-gradient(circle at center, #243040 0%, #161e29 100%);
    transform: translateZ(0);
    will-change: transform;
}

/* Modo inmersi?n (tecla T): barra superior casi oculta; hover/foco la revela */
body.reader-toolbar-autohide .reader-toolbar {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    transform: translateY(calc(-100% + 0.4rem));
    opacity: 0.18;
    transition:
        transform 0.22s ease,
        opacity 0.22s ease;
}

body.reader-toolbar-autohide .reader-toolbar:hover,
body.reader-toolbar-autohide .reader-toolbar:focus-within {
    transform: translateY(0);
    opacity: 1;
}

body.reader-toolbar-autohide .reader-main {
    padding-top: 0.35rem;
}

.reader-toolbar-reveal {
    position: fixed;
    top: 0.55rem;
    right: 0.8rem;
    z-index: 35;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: rgba(15, 23, 42, 0.88);
    border-color: rgba(148, 163, 184, 0.5);
    color: #e2e8f0;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.reader-toolbar-reveal[hidden] {
    display: none !important;
}

body.reader-toolbar-drawer-open .reader-toolbar-reveal {
    opacity: 0;
    pointer-events: none;
}

body.reader-deep-reading .reader-toolbar {
    transform: translateY(-100%);
    opacity: 0;
    transition: transform 0.15s ease-out, opacity 0.15s ease-out;
}

body.reader-deep-reading .reader-main {
    padding-top: 0.8rem;
}

body.reader-profile-dyslexia {
    --reader-font: 'Arial', 'Verdana', sans-serif;
}

body.reader-profile-dyslexia .book-prose,
body.reader-profile-dyslexia .book-quiz-question,
body.reader-profile-dyslexia .book-quiz-option-text,
body.reader-profile-dyslexia .book-tf-statement {
    letter-spacing: 0.03em;
    word-spacing: 0.06em;
}

body.reader-profile-high-contrast .reader-main {
    background: #0b0b0b !important;
}

body.reader-profile-high-contrast .canvas-area {
    background: #ffffff !important;
    box-shadow: 0 0 0 2px #000 !important;
}

/*
 * Tipografía y caja de lectura (estudiante):
 * - Letra equilibrada (escala única, sin multiplos apilados).
 * - Contenido casi al ancho útil de la hoja (sin columna estrecha).
 * - Sangría de página tipo libro premium: presente pero compacta.
 */
body.genlibros-reader {
    --reader-text-scale: 1;
    --genlibros-read-size: 1.02rem;
    --book-body-size: 1.02rem;
    --book-heading-size: 1.32rem;
    /* 100 % del ancho interior de la hoja (el padding de página es el margen) */
    --book-measure: 100%;
    --book-read-page-pad-y: clamp(1.05rem, 1.6vw, 1.5rem);
    --book-read-page-pad-x: clamp(0.9rem, 1.4vw, 1.35rem);
    --canvas-page-pad-y: 26px;
    --canvas-page-pad-x: 22px;
}

/* Escala de lectura sobre rem base (evita dobles multiplicaciones con 1em) */
body.genlibros-reader .reader-main .book-prose,
body.genlibros-reader .reader-main .book-activity-instruction,
body.genlibros-reader .reader-main .book-quiz-question,
body.genlibros-reader .reader-main .book-quiz-option-text,
body.genlibros-reader .reader-main .book-tf-statement,
body.genlibros-reader .reader-main .rich-text-editor {
    font-size: calc(var(--book-body-size, 1.02rem) * var(--reader-text-scale, 1));
    font-family: var(--book-font-family, var(--book-serif, 'Literata', Georgia, serif));
}

/* Tamaños/fuentes aplicadas por el docente a palabras o frases */
body.genlibros-reader .reader-main .book-prose .gl-ts-xs,
body.genlibros-reader .reader-main .rich-text-editor .gl-ts-xs { font-size: 0.82em !important; }
body.genlibros-reader .reader-main .book-prose .gl-ts-s,
body.genlibros-reader .reader-main .rich-text-editor .gl-ts-s { font-size: 0.92em !important; }
body.genlibros-reader .reader-main .book-prose .gl-ts-m,
body.genlibros-reader .reader-main .rich-text-editor .gl-ts-m { font-size: 1em !important; }
body.genlibros-reader .reader-main .book-prose .gl-ts-l,
body.genlibros-reader .reader-main .rich-text-editor .gl-ts-l { font-size: 1.14em !important; }
body.genlibros-reader .reader-main .book-prose .gl-ts-xl,
body.genlibros-reader .reader-main .rich-text-editor .gl-ts-xl { font-size: 1.32em !important; }

body.genlibros-reader .reader-main .book-prose span[style*="font-size"],
body.genlibros-reader .reader-main .rich-text-editor span[style*="font-size"],
body.genlibros-reader .reader-main .book-prose span[style*="font-family"],
body.genlibros-reader .reader-main .rich-text-editor span[style*="font-family"] {
    /* Los estilos inline del HTML del libro tienen prioridad visual */
    line-height: inherit;
}

body.genlibros-reader .reader-main .cw-clue-text,
body.genlibros-reader .reader-main .cw-clue-word,
body.genlibros-reader .reader-main .ws-chip {
    font-size: calc(0.92rem * var(--reader-text-scale, 1));
}

/* Prosa / párrafos: ancho completo y ritmo premium */
body.genlibros-reader .reader-main .rich-text-editor,
body.genlibros-reader .reader-main .book-prose {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    line-height: 1.58;
    text-align: justify;
    hyphens: auto;
}

body.genlibros-reader .reader-main table,
body.genlibros-reader .reader-main .table-viewer table,
body.genlibros-reader .reader-main .book-table {
    font-size: calc(0.94rem * var(--reader-text-scale, 1));
    max-width: 100%;
}

body.genlibros-reader .reader-main table th,
body.genlibros-reader .reader-main table td {
    padding: 0.4em 0.5em;
    line-height: 1.4;
}

/* Actividades e ilustraciones: ocupar todo el ancho útil de la hoja */
body.genlibros-reader .reader-main .book-prose,
body.genlibros-reader .reader-main .book-activity-instruction,
body.genlibros-reader .reader-main .activity-instruction-read,
body.genlibros-reader .reader-main .block-quiz-mc .block-content,
body.genlibros-reader .reader-main .block-match .block-content,
body.genlibros-reader .reader-main .block-flashcards .block-content,
body.genlibros-reader .reader-main .block-true-false .block-content,
body.genlibros-reader .reader-main .block-open-question .block-content,
body.genlibros-reader .reader-main .block-fill-blank .block-content,
body.genlibros-reader .reader-main .block-wordsearch .block-content,
body.genlibros-reader .reader-main .block-crossword .block-content,
body.genlibros-reader .reader-main .block-math .block-content,
body.genlibros-reader .reader-main .block-math-guided .block-content,
body.genlibros-reader .reader-main .block-math-find-error .block-content,
body.genlibros-reader .reader-main .block-math-classify .block-content,
body.genlibros-reader .reader-main .block-math-equiv .block-content,
body.genlibros-reader .reader-main .block-table .block-content,
body.genlibros-reader .reader-main .block-chart .block-content,
body.genlibros-reader .reader-main .block-image .block-content,
body.genlibros-reader .reader-main .block-hotspot .block-content,
body.genlibros-reader .reader-main .block-hotspot-diagram .block-content,
body.genlibros-reader .reader-main .block-image-label .block-content {
    max-width: 100% !important;
    width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Hotspot diagram — panel y zonas en lector estudiante */
body.genlibros-reader .hs-tooltip {
    min-width: min(260px, calc(100% - 16px));
    max-width: min(440px, calc(100% - 16px));
}

/*
 * Vista estudiante: zonas calientes casi invisibles.
 * Siguen siendo clicables / con hit-area, sin dibujar “manchas” sobre el esquema.
 */
body.genlibros-reader .hs-hit {
    cursor: pointer;
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    color: transparent !important;
    opacity: 0.03;
    transition: opacity 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

body.genlibros-reader .hs-hit-ring,
body.genlibros-reader .hs-hit-core {
    opacity: 0 !important;
    visibility: hidden;
    animation: none !important;
}

/* Ligera pista solo en interacción (accesible sin saturación visual) */
body.genlibros-reader .hs-hit:hover,
body.genlibros-reader .hs-hit:focus-visible {
    opacity: 0.22;
    border-color: rgba(8, 145, 178, 0.35) !important;
    background: rgba(6, 182, 212, 0.08) !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12) inset !important;
    transform: translate(-50%, -50%);
}

body.genlibros-reader .hs-hit.is-active {
    opacity: 0.28;
    border-color: rgba(8, 145, 178, 0.45) !important;
    background: rgba(6, 182, 212, 0.12) !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16) inset !important;
    transform: translate(-50%, -50%);
}

body.genlibros-reader .hs-hit:focus-visible {
    outline: 2px solid rgba(14, 116, 144, 0.45);
    outline-offset: 2px;
}

/* Preferencia: aún más sutil (sin halo al hover) si el dispositivo no soporta hover fino */
@media (hover: none) {
    body.genlibros-reader .hs-hit:hover {
        opacity: 0.03;
        border-color: transparent !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    body.genlibros-reader .hs-hit.is-active {
        opacity: 0.18;
    }
}

body.genlibros-reader .hs-stage,
body.genlibros-reader .hs-viewer,
body.genlibros-reader .reader-main .block-hotspot .block-content,
body.genlibros-reader .reader-main .block-hotspot-diagram .block-content {
    overflow: visible;
}


/* Márgenes de página compactos y asimétricos en doble hoja */
body.genlibros-reader.editor-preview-mode .canvas-area {
    padding: var(--book-read-page-pad-y) var(--book-read-page-pad-x) !important;
}

@media (min-width: 1150px) {
    body.genlibros-reader:not(.reader-layout-compact) .canvas-page.book-page--spread-left .canvas-area {
        padding-left: clamp(1.05rem, 1.6vw, 1.45rem) !important;
        padding-right: clamp(0.75rem, 1.1vw, 1.05rem) !important;
    }

    body.genlibros-reader:not(.reader-layout-compact) .canvas-page.book-page--spread-right .canvas-area {
        padding-right: clamp(1.05rem, 1.6vw, 1.45rem) !important;
        padding-left: clamp(0.75rem, 1.1vw, 1.05rem) !important;
    }
}

body.genlibros-reader.reader-layout-compact .canvas-area {
    padding: clamp(1rem, 2.2vw, 1.35rem) clamp(0.85rem, 2vw, 1.25rem) !important;
}

.reader-term-callout {
    position: fixed;
    z-index: 160;
    max-width: min(22rem, calc(100vw - 1rem));
    padding: 0.65rem 0.7rem;
    background: rgba(15, 23, 42, 0.96);
    border: 1px solid rgba(148, 163, 184, 0.32);
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}

.reader-term-callout-title {
    margin: 0;
    color: #fff;
    font-size: 0.86rem;
    font-weight: 700;
}

.reader-term-callout-def {
    margin: 0.3rem 0 0.45rem;
    color: #cbd5e1;
    font-size: 0.78rem;
    line-height: 1.45;
}

.reader-glossary-panel {
    position: fixed;
    top: 4.25rem;
    right: 0.85rem;
    z-index: 120;
    width: min(23rem, calc(100vw - 1.7rem));
    max-height: calc(100vh - 5.1rem); /* fallback */
    max-height: calc(100svh - 5.1rem); /* Safari iOS: excluye la barra del navegador */
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding: 0.85rem;
    color: #e2e8f0;
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.44);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.reader-glossary-panel[hidden] {
    display: none !important;
}

.reader-glossary-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.reader-glossary-title {
    margin: 0;
    font-size: 1rem;
    color: #f8fafc;
}

.reader-glossary-help {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.45;
    color: #cbd5e1;
}

.reader-glossary-search-wrap {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.55rem;
    border-radius: 8px;
    border: 1px solid rgba(148, 163, 184, 0.34);
    background: rgba(15, 23, 42, 0.75);
}

.reader-glossary-search-wrap i {
    width: 0.95rem;
    height: 0.95rem;
    color: #94a3b8;
}

.reader-glossary-search {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    color: #f8fafc;
    font-size: 0.86rem;
}

.reader-glossary-results {
    min-height: 3rem;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding-right: 0.2rem;
}

.reader-glossary-item {
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 8px;
    padding: 0.5rem 0.55rem;
    background: rgba(30, 41, 59, 0.65);
}

.reader-glossary-term {
    margin: 0;
    font-weight: 700;
    font-size: 0.88rem;
    color: #fff;
}

.reader-glossary-def {
    margin: 0.22rem 0 0;
    font-size: 0.79rem;
    line-height: 1.45;
    color: #cbd5e1;
}

.reader-glossary-go {
    margin-top: 0.4rem;
}

.reader-glossary-empty {
    margin: 0.4rem 0;
    font-size: 0.82rem;
    color: #94a3b8;
}

/* ?Mesa? de lectura: contraste con la hoja blanca */
body.genlibros-reader .reader-main {
    background:
        radial-gradient(ellipse 85% 55% at 50% 0%, rgba(30, 41, 59, 0.35) 0%, transparent 55%),
        radial-gradient(ellipse 120% 80% at 50% 100%, rgba(15, 23, 42, 0.5) 0%, transparent 50%),
        linear-gradient(180deg, #1a2234 0%, #151c2c 40%, #121a28 100%);
}

/*
 * El body del lector usa texto claro para la barra y el landing; la hoja del libro es clara.
 * Sin esta regla, las actividades heredan #e2e8f0 sobre blanco (contraste ilegible).
 */
body.genlibros-reader .reader-main {
    color: #111827;
    --book-ink: #111827;
    --book-ink-muted: #374151;
}

body.genlibros-reader .reader-main .match-pill {
    color: #111827;
}

body.genlibros-reader .reader-main .match-columns {
    color: #111827;
}

body.genlibros-reader .reader-main .math-eq-pill {
    color: #111827;
}

body.genlibros-reader .reader-main .math-eq-columns {
    color: #111827;
}

.reader-zoom-outer {
    max-width: calc(var(--sheet-page-width, 816px) + 48px);
    margin: 0 auto;
}

/* Libro abierto (dos hojas): m?s ancho en escritorio */
body.genlibros-reader:not(.reader-on-cover) .reader-zoom-outer {
    max-width: min(1720px, calc(100vw - 32px));
}

/* iPad / Tablet / M?vil (?1149px o t?ctil): modo hoja ?nica centrada de m?xima comodidad */
body.genlibros-reader.reader-layout-compact:not(.reader-on-cover) .reader-zoom-outer {
    max-width: min(880px, 92vw);
    margin: 0 auto;
}

body.genlibros-reader .reader-pages-stack.reader-pages-stack--compact {
    max-width: min(880px, 92vw);
    margin: 0 auto;
}

/* Una sola hoja visible en iPad: ocupar todo el ancho ?til sin divisiones ni lomo */
body.genlibros-reader.reader-layout-compact .reader-pages-stack .canvas-page:not([hidden]) {
    flex: 0 1 auto !important;
    width: 100% !important;
    max-width: min(880px, 92vw) !important;
    min-width: 0 !important;
    pointer-events: auto !important;
    margin: 0 auto !important;
}

body.genlibros-reader.reader-layout-compact .reader-pages-stack .canvas-area {
    border-radius: 14px !important;
    border: none !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.2) !important;
}

body.genlibros-reader.reader-layout-compact .reader-pages-stack::after {
    display: none !important;
    content: none !important;
}

.reader-zoom-inner {
    position: relative;
    transition: transform 0.2s ease;
    will-change: transform;
}

.genlibros-reader .reader-pages-stack {
    margin: 0 auto;
    isolation: isolate;
}

/* Escritorio (?1150px): Doble p?gina 3D realista estilo Libro F?sico de Lujo */
@media (min-width: 1150px) {
    body.genlibros-reader:not(.reader-layout-compact) .reader-pages-stack {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: stretch;
        gap: 0;
        max-width: min(1800px, 94vw);
        position: relative;
        margin: 0 auto;
    }

    /* (El tubo central artificial con degradado que arruinaba la sombra inset ha sido eliminado para dejar ver el hundimiento natural) */

    body.genlibros-reader:not(.reader-layout-compact) .canvas-page.book-page--spread-left {
        display: flex !important;
        justify-content: flex-end !important;
        flex: 0 0 50% !important;
        max-width: 50% !important;
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    body.genlibros-reader:not(.reader-layout-compact) .canvas-page.book-page--spread-right {
        display: flex !important;
        justify-content: flex-start !important;
        flex: 0 0 50% !important;
        max-width: 50% !important;
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    body.genlibros-reader:not(.reader-layout-compact) .canvas-page.book-page--spread-left .canvas-area {
        margin-left: auto !important;
        margin-right: 0 !important;
        border-radius: 6px 0 0 6px !important;
        border-top: 1px solid #e2e8f0 !important;
        border-bottom: 1px solid #e2e8f0 !important;
        border-left: 1px solid #e2e8f0 !important;
        border-right: none !important;
        /* Gradiente ultra sutil para dar volumen a la hoja (ligeramente oscurecida hacia el lomo) */
        background: linear-gradient(to right, #ffffff 70%, #fcfcfd 90%, #f1f5f9 100%) !important;
        box-shadow: 
            /* Pliegue profundo y afilado en el centro del lomo */
            inset -3px 0 6px -1px rgba(0, 0, 0, 0.15),
            /* Sombra curva suave del lomo */
            inset -25px 0 35px -10px rgba(0, 0, 0, 0.08),
            /* 1. Grosor de las hojas laterales (stack) - simulando 10 p?ginas s?per n?tidas */
            -1px 0 0 #ffffff, -2px 0 0 #cbd5e1, 
            -3px 0 0 #ffffff, -4px 0 0 #94a3b8, 
            -5px 0 0 #ffffff, -6px 0 0 #cbd5e1, 
            -7px 0 0 #f8fafc, -8px 0 0 #94a3b8,
            -9px 0 0 #ffffff, -10px 0 0 #64748b,
            /* 2. Sombra inferior/superior que las hojas proyectan sobre la tapa */
            0 1px 2px rgba(0,0,0,0.15), 0 -1px 2px rgba(0,0,0,0.15),
            /* 3. Tapa dura oscura (Hardcover) sobresaliendo 3px a los lados y 4px arriba/abajo */
            -13px 4px 0 #1e293b, -13px -4px 0 #1e293b, 
            0 4px 0 #1e293b, 0 -4px 0 #1e293b,
            /* Sombra proyectada (Drop shadow) amplia y ultra suave en el escritorio */
            -20px 24px 50px rgba(0, 0, 0, 0.65) !important;
    }

    body.genlibros-reader:not(.reader-layout-compact) .canvas-page.book-page--spread-right .canvas-area {
        margin-left: 0 !important;
        margin-right: auto !important;
        border-radius: 0 6px 6px 0 !important;
        border-top: 1px solid #e2e8f0 !important;
        border-bottom: 1px solid #e2e8f0 !important;
        border-right: 1px solid #e2e8f0 !important;
        border-left: none !important;
        /* Gradiente ultra sutil para dar volumen a la hoja (ligeramente oscurecida hacia el lomo) */
        background: linear-gradient(to left, #ffffff 70%, #fcfcfd 90%, #f1f5f9 100%) !important;
        box-shadow: 
            /* Pliegue profundo y afilado en el centro del lomo */
            inset 3px 0 6px -1px rgba(0, 0, 0, 0.15),
            /* Sombra curva suave del lomo */
            inset 25px 0 35px -10px rgba(0, 0, 0, 0.08),
            /* 1. Grosor de las hojas laterales (stack) - simulando 10 p?ginas s?per n?tidas */
            1px 0 0 #ffffff, 2px 0 0 #cbd5e1, 
            3px 0 0 #ffffff, 4px 0 0 #94a3b8, 
            5px 0 0 #ffffff, 6px 0 0 #cbd5e1, 
            7px 0 0 #f8fafc, 8px 0 0 #94a3b8,
            9px 0 0 #ffffff, 10px 0 0 #64748b,
            /* 2. Sombra inferior/superior que las hojas proyectan sobre la tapa */
            0 1px 2px rgba(0,0,0,0.15), 0 -1px 2px rgba(0,0,0,0.15),
            /* 3. Tapa dura oscura (Hardcover) sobresaliendo 3px a los lados y 4px arriba/abajo */
            13px 4px 0 #1e293b, 13px -4px 0 #1e293b, 
            0 4px 0 #1e293b, 0 -4px 0 #1e293b,
            /* Sombra proyectada (Drop shadow) amplia y ultra suave en el escritorio */
            20px 24px 50px rgba(0, 0, 0, 0.65) !important;
    }
}

/* ?? StPageFlip: capa de animaci?n (solo durante el volteo) ?? */
.reader-flip-overlay {
    position: absolute;
    z-index: 120;
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    pointer-events: none;
    overflow: hidden;
    color: inherit;
}

.reader-flip-overlay--viewport {
    position: fixed;
    z-index: 250000;
}

.reader-flip-overlay__book {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    margin: 0;
    padding: 0;
}

/* StPageFlip: sin margen interno que desplace el libro hacia abajo */
.reader-flip-overlay__book .stf__parent,
.reader-flip-overlay__book .stf__wrapper,
.reader-flip-overlay__book .stf__block {
    margin: 0 !important;
    padding: 0 !important;
}

body.reader-flip-overlay-active .reader-pages-stack {
    opacity: 0;
    pointer-events: none;
    transition: none !important;
    /* Mantiene el tama?o del layout (evita que la portada ?encoja? durante el volteo) */
}

body.reader-flip-overlay-active .reader-zoom-outer {
    transition: none !important;
}

body.genlibros-reader.reader-flip-overlay-active .reader-pages-stack::after,
body.genlibros-reader.reader-flip-overlay-active .pages-stack::after {
    display: none !important;
    content: none !important;
}

.reader-flip-clone {
    pointer-events: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.reader-flip-clone .canvas-area {
    box-shadow: none;
    width: 100% !important;
    height: 100% !important;
    box-sizing: border-box !important;
}

.reader-flip-clone .canvas-sheet-clip {
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
}

.reader-flip-clone .canvas-sheet-inner {
    transform-origin: top center !important;
}

/* Portada e interior: hoja a tama?o cuaderno (--sheet-page-width) */
body.genlibros-reader.reader-on-cover .reader-zoom-outer {
    max-width: calc(var(--sheet-page-width, 816px) + 48px);
}

body.genlibros-reader.reader-on-cover .reader-pages-stack {
    max-width: var(--sheet-page-width, 816px);
    margin-left: auto;
    margin-right: auto;
}

body.genlibros-reader.reader-layout-compact .reader-main {
    -webkit-overflow-scrolling: touch;
}

body.genlibros-reader.reader-layout-compact .reader-pages-stack .canvas-page:not([hidden]) {
    /* Permitir scroll vertical y pinch-zoom nativo del navegador en dispositivos t?ctiles */
    touch-action: pan-y pinch-zoom;
}

/* ?? Lector: pasar p?gina fluido (CSS 3D, solo hoja activa en DOM visible) ?? */

@keyframes readerPartnerFadeOutFwd {
    from {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
    to {
        opacity: 0.2;
        transform: translate3d(-6px, 0, 0);
    }
}

@keyframes readerPageFlipOutFwd {
    from {
        opacity: 1;
        transform: perspective(1280px) rotateY(0deg) translate3d(0, 0, 0.02px);
    }
    to {
        opacity: 0.45;
        transform: perspective(1280px) rotateY(-78deg) translate3d(0, 0, 0.02px);
    }
}

@keyframes readerPartnerFadeInFwd {
    from {
        opacity: 0;
        transform: translate3d(-8px, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes readerPageFlipInFwd {
    from {
        opacity: 0;
        transform: perspective(1280px) rotateY(68deg) translate3d(0, 0, 0.02px);
    }
    to {
        opacity: 1;
        transform: perspective(1280px) rotateY(0deg) translate3d(0, 0, 0.02px);
    }
}

@keyframes readerCoverFlipOutFwd {
    from {
        opacity: 1;
        transform: perspective(1280px) rotateY(0deg) translate3d(0, 0, 0.02px);
    }
    to {
        opacity: 0.35;
        transform: perspective(1280px) rotateY(-70deg) translate3d(0, 0, 0.02px);
    }
}

@keyframes readerPartnerFadeOutBack {
    from {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
    to {
        opacity: 0.2;
        transform: translate3d(6px, 0, 0);
    }
}

@keyframes readerPageFlipOutBack {
    from {
        opacity: 1;
        transform: perspective(1280px) rotateY(0deg) translate3d(0, 0, 0.02px);
    }
    to {
        opacity: 0.45;
        transform: perspective(1280px) rotateY(78deg) translate3d(0, 0, 0.02px);
    }
}

@keyframes readerPartnerFadeInBack {
    from {
        opacity: 0;
        transform: translate3d(8px, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes readerPageFlipInBack {
    from {
        opacity: 0;
        transform: perspective(1280px) rotateY(-68deg) translate3d(0, 0, 0.02px);
    }
    to {
        opacity: 1;
        transform: perspective(1280px) rotateY(0deg) translate3d(0, 0, 0.02px);
    }
}

@keyframes readerCoverFlipInBack {
    from {
        opacity: 0.35;
        transform: perspective(1280px) rotateY(-70deg) translate3d(0, 0, 0.02px);
    }
    to {
        opacity: 1;
        transform: perspective(1280px) rotateY(0deg) translate3d(0, 0, 0.02px);
    }
}

/* Anular animaci?n global del editor (las dos hojas a la vez + blur) */
body.genlibros-reader.editor-preview-mode .reader-pages-stack.book-spread-animating.book-spread-forward .canvas-page:not([hidden]),
body.genlibros-reader.editor-preview-mode .reader-pages-stack.book-spread-animating.book-spread-back .canvas-page:not([hidden]),
body.genlibros-reader.editor-preview-mode .reader-pages-stack.book-spread-enter .canvas-page:not([hidden]) {
    animation: none;
    filter: none;
}

/* Adelante: sale volteando la derecha (o la portada); la izquierda solo se desvanece un poco */
body.genlibros-reader.editor-preview-mode .reader-pages-stack.book-spread-animating.book-spread-forward .canvas-page.canvas-page--cover:not([hidden]) {
    transform-origin: right center;
    animation: readerCoverFlipOutFwd var(--reader-flip-ms, 340ms) cubic-bezier(0.33, 0, 0.25, 1) forwards;
    will-change: transform, opacity;
}

body.genlibros-reader.editor-preview-mode .reader-pages-stack.book-spread-animating.book-spread-forward .canvas-page.book-page--spread-left:not(.book-page--spread-alone):not([hidden]) {
    animation: readerPartnerFadeOutFwd var(--reader-flip-ms, 340ms) cubic-bezier(0.4, 0, 0.2, 1) forwards;
    will-change: opacity, transform;
}

body.genlibros-reader.editor-preview-mode .reader-pages-stack.book-spread-animating.book-spread-forward .canvas-page.book-page--spread-right:not([hidden]) {
    transform-origin: left center;
    animation: readerPageFlipOutFwd var(--reader-flip-ms, 340ms) cubic-bezier(0.33, 0, 0.25, 1) forwards;
    will-change: transform, opacity;
}

body.genlibros-reader.editor-preview-mode .reader-pages-stack.book-spread-animating.book-spread-forward .canvas-page.book-page--spread-alone:not([hidden]) {
    transform-origin: left center;
    animation: readerPageFlipOutFwd var(--reader-flip-ms, 340ms) cubic-bezier(0.33, 0, 0.25, 1) forwards;
    will-change: transform, opacity;
}

/* Atr?s: voltea la izquierda; la derecha se apaga suave */
body.genlibros-reader.editor-preview-mode .reader-pages-stack.book-spread-animating.book-spread-back .canvas-page.book-page--spread-right:not(.book-page--spread-alone):not([hidden]) {
    animation: readerPartnerFadeOutBack var(--reader-flip-ms, 340ms) cubic-bezier(0.4, 0, 0.2, 1) forwards;
    will-change: opacity, transform;
}

body.genlibros-reader.editor-preview-mode .reader-pages-stack.book-spread-animating.book-spread-back .canvas-page.book-page--spread-left:not(.book-page--spread-alone):not([hidden]) {
    transform-origin: right center;
    animation: readerPageFlipOutBack var(--reader-flip-ms, 340ms) cubic-bezier(0.33, 0, 0.25, 1) forwards;
    will-change: transform, opacity;
}

body.genlibros-reader.editor-preview-mode .reader-pages-stack.book-spread-animating.book-spread-back .canvas-page.book-page--spread-alone:not([hidden]) {
    transform-origin: right center;
    animation: readerPageFlipOutBack var(--reader-flip-ms, 340ms) cubic-bezier(0.33, 0, 0.25, 1) forwards;
    will-change: transform, opacity;
}

/* Entrada al avanzar */
body.genlibros-reader.editor-preview-mode .reader-pages-stack.book-spread-enter:not(.book-spread-enter-from-back) .canvas-page.book-page--spread-left:not(.book-page--spread-alone):not([hidden]) {
    animation: readerPartnerFadeInFwd var(--reader-enter-ms, 380ms) cubic-bezier(0.22, 1, 0.36, 1) forwards;
    will-change: opacity, transform;
}

body.genlibros-reader.editor-preview-mode .reader-pages-stack.book-spread-enter:not(.book-spread-enter-from-back) .canvas-page.book-page--spread-right:not([hidden]) {
    transform-origin: left center;
    animation: readerPageFlipInFwd var(--reader-enter-ms, 380ms) cubic-bezier(0.22, 1, 0.36, 1) forwards;
    will-change: transform, opacity;
}

body.genlibros-reader.editor-preview-mode .reader-pages-stack.book-spread-enter:not(.book-spread-enter-from-back) .canvas-page.book-page--spread-alone:not([hidden]) {
    transform-origin: left center;
    animation: readerPageFlipInFwd var(--reader-enter-ms, 380ms) cubic-bezier(0.22, 1, 0.36, 1) forwards;
    will-change: transform, opacity;
}

/* Entrada al retroceder */
body.genlibros-reader.editor-preview-mode .reader-pages-stack.book-spread-enter.book-spread-enter-from-back .canvas-page.book-page--spread-left:not(.book-page--spread-alone):not([hidden]) {
    transform-origin: right center;
    animation: readerPageFlipInBack var(--reader-enter-ms, 380ms) cubic-bezier(0.22, 1, 0.36, 1) forwards;
    will-change: transform, opacity;
}

body.genlibros-reader.editor-preview-mode .reader-pages-stack.book-spread-enter.book-spread-enter-from-back .canvas-page.book-page--spread-right:not([hidden]) {
    animation: readerPartnerFadeInBack var(--reader-enter-ms, 380ms) cubic-bezier(0.22, 1, 0.36, 1) forwards;
    will-change: opacity, transform;
}

body.genlibros-reader.editor-preview-mode .reader-pages-stack.book-spread-enter.book-spread-enter-from-back .canvas-page.book-page--spread-alone:not([hidden]) {
    transform-origin: right center;
    animation: readerPageFlipInBack var(--reader-enter-ms, 380ms) cubic-bezier(0.22, 1, 0.36, 1) forwards;
    will-change: transform, opacity;
}

body.genlibros-reader.editor-preview-mode .reader-pages-stack.book-spread-enter.book-spread-enter-from-back .canvas-page.canvas-page--cover:not([hidden]) {
    transform-origin: right center;
    animation: readerCoverFlipInBack var(--reader-enter-ms, 380ms) cubic-bezier(0.22, 1, 0.36, 1) forwards;
    will-change: transform, opacity;
}

/* Portada: una sola hoja centrada y proporcionada */
body.genlibros-reader.reader-on-cover .reader-pages-stack {
    max-width: var(--sheet-page-width);
}

/* ===== PORTADA: Tama?o correcto en TODOS los modos (igual que iPad) ===== */
/* En desktop, la portada no tiene book-page--spread-* ? necesita width expl?cito */
body.genlibros-reader.reader-on-cover .reader-pages-stack .canvas-page--cover:not([hidden]) {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    display: flex !important;
    justify-content: center !important;
}

body.genlibros-reader.reader-on-cover .canvas-page--cover .canvas-area {
    width: 100% !important;
    max-width: var(--sheet-page-width, 816px) !important;
    margin: 0 auto !important;
}

/* ===== PORTADA: Dise?o Premium Neobrutalista v?a CSS (sin depender de JS) ===== */
/* Se aplica al bloque de texto de la portada cuando NO tiene ya el preset HTML inyectado */
body.genlibros-reader .canvas-page--cover .block-text .rich-text-editor.fallback-cover-branding {
    display: block;
    background: #ffffff !important;
    border: 4px solid #000 !important;
    box-shadow: 6px 6px 0px #000 !important;
    transform: rotate(-1deg) !important;
    padding: 2rem 2rem 2.5rem !important;
    margin: 1rem auto !important;
    max-width: 88% !important;
    border-radius: 0 !important;
    box-sizing: border-box;
}

body.genlibros-reader .canvas-page--cover .block-text .rich-text-editor.fallback-cover-branding h2 {
    font-size: 2.4rem !important;
    font-weight: 900 !important;
    color: #000000 !important;
    text-transform: uppercase !important;
    letter-spacing: -0.04em !important;
    line-height: 1 !important;
    margin: 1rem 0 0.8rem !important;
    border: none !important;
}

body.genlibros-reader .canvas-page--cover .block-text .rich-text-editor.fallback-cover-branding p:first-child {
    display: inline-block !important;
    padding: 0.35rem 0.75rem !important;
    background: #3b82f6 !important;
    color: #fff !important;
    font-weight: 800 !important;
    font-size: 0.8rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    border: 2px solid #000 !important;
    box-shadow: 3px 3px 0 #000 !important;
    margin-bottom: 0.5rem !important;
}

body.genlibros-reader .canvas-page--cover .block-text .rich-text-editor.fallback-cover-branding hr {
    border: none !important;
    border-top: 4px dashed #000 !important;
    margin: 1rem 0 !important;
}

body.genlibros-reader .canvas-page--cover .block-text .rich-text-editor.fallback-cover-branding p:last-child {
    font-size: 1rem !important;
    color: #000 !important;
    font-weight: 600 !important;
    margin-top: 0.75rem !important;
}

body.genlibros-reader .canvas-page--cover .block-image:not(.block-image--cover-full) .book-figure {
    max-width: 100% !important;
    margin: 0 auto 0.75rem !important;
}

body.genlibros-reader .canvas-page--cover .block-image:not(.block-image--cover-full) .book-figure__inner:not(.book-figure__inner--cropped):not([data-cropped="1"]):not([style*="aspect-ratio"]) {
    aspect-ratio: auto !important;
    height: auto !important;
    max-height: min(36vh, 280px) !important;
}

body.genlibros-reader .canvas-page--cover .block-image:not(.block-image--cover-full) img,
body.genlibros-reader .canvas-page--cover .block-image:not(.block-image--cover-full) .book-figure__img {
    max-height: min(36vh, 280px) !important;
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
}

/*
 * Portada a página completa (estudiante = docente):
 * - Anula max-height 500px del lector.
 * - Cadena de altura 100% (área → clip → inner → bloque → figura).
 * - Sin wrap del layout genérico del sheet, que impedía el stretch.
 */
body.genlibros-reader .canvas-page--cover:has(.block-image--cover-full) .canvas-area,
body.genlibros-reader .canvas-page--cover.canvas-page--cover-full-image .canvas-area {
    padding: 0 !important;
}

body.genlibros-reader .canvas-page--cover:has(.block-image--cover-full) .canvas-sheet-clip,
body.genlibros-reader .canvas-page--cover.canvas-page--cover-full-image .canvas-sheet-clip {
    height: 100% !important;
    min-height: 100% !important;
    overflow: hidden !important;
}

body.genlibros-reader .canvas-page--cover:has(.block-image--cover-full) .canvas-sheet-inner,
body.genlibros-reader .canvas-page--cover.canvas-page--cover-full-image .canvas-sheet-inner {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-content: stretch !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    height: 100% !important;
    min-height: 100% !important;
    row-gap: 0 !important;
    gap: 0 !important;
}

body.genlibros-reader .canvas-page--cover .block-image--cover-full,
body.genlibros-reader .canvas-page--cover.canvas-page--cover-full-image .block-image--cover-full {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    align-self: stretch !important;
}

body.genlibros-reader .canvas-page--cover .block-image--cover-full .block-content,
body.genlibros-reader .canvas-page--cover .block-image--cover-full .book-figure,
body.genlibros-reader .canvas-page--cover .block-image--cover-full .book-figure__inner {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

body.genlibros-reader .canvas-page--cover .block-image--cover-full img,
body.genlibros-reader .canvas-page--cover .block-image--cover-full .book-figure__img,
body.genlibros-reader .canvas-page--cover .block-image--cover-full .book-figure__inner img {
    max-height: none !important;
    max-width: none !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Vista docente (preview): misma sangría cuando llena la hoja */
.editor-preview-mode .canvas-page--cover:has(.block-image--cover-full) .canvas-area {
    padding: 0 !important;
}

.editor-preview-mode .canvas-page--cover:has(.block-image--cover-full) .canvas-sheet-inner {
    height: 100%;
    min-height: 100%;
    flex-wrap: nowrap;
    align-items: stretch;
}


/* Interior: ancho acorde a doble p?gina (mismas reglas base que dashboard + .editor-preview-mode) */
body.genlibros-reader:not(.reader-on-cover) .reader-pages-stack {
    max-width: min(1720px, 98vw);
}

/* Botones de p?gina: estado deshabilitado legible sobre la barra oscura */
.reader-toolbar .btn-icon:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

.genlibros-reader .reader-pages-stack .canvas-area {
    background: #ffffff !important;
    border: none !important;
    outline: none !important;
}

.genlibros-reader .canvas-sheet-inner {
    display: flex !important;
    flex-wrap: wrap !important;
    align-content: flex-start !important;
    align-items: flex-start !important;
    row-gap: 12px !important;
}

/* Remover bordes amarillos de advertencia de capacidad en el visor */
body.genlibros-reader .canvas-area.canvas-area--at-capacity {
    box-shadow: none !important;
    background: #ffffff !important;
}

/* En lector: lienzo sin color de fondo (transparente) para no tapar la sombra interior (inset) de canvas-area */
body.genlibros-reader .canvas-sheet-clip {
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* En lector: el lienzo de la p?gina nunca muestra barras de desplazamiento internas */
/* Fallback m?nimo de portada: solo si NO hay estilos inline del preset */
.book-cover-branding:not([style]) {
    position: relative;
    margin: 1.5rem auto;
    width: 88%;
    max-width: 600px;
    text-align: left;
    padding: 2.2rem 2rem;
    background: rgba(255, 255, 255, 0.98);
    border-left: 8px solid #0f172a;
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.15);
    border-radius: 12px;
    box-sizing: border-box;
}

.book-cover-branding:not([style]) #titulo-libro,
.book-cover-branding:not([style]) h2 {
    margin: 0 0 0.5rem 0;
    font-size: 2.4rem;
    font-family: 'Literata', 'Cormorant Garamond', serif;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.15;
    letter-spacing: -0.03em;
}

/* En lector: el lienzo de la p?gina nunca muestra barras de desplazamiento internas */
body.genlibros-reader .canvas-sheet-clip {
    overflow: hidden !important;
}

body.genlibros-reader .canvas-sheet-clip.reader-sheet-scroll {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    pointer-events: auto !important;
    -webkit-overflow-scrolling: touch;
    scroll-padding-bottom: 1.25rem;
}

.genlibros-reader .block--reader {
    margin-bottom: 1rem;
}

.genlibros-reader .block--reader .block-content {
    padding-left: 0;
    padding-right: 0;
}

/* Actividades bloqueadas tras ?Comprobar? en lector: celdas y pills siguen clicables sin disabled */
.genlibros-reader .reader-activity-locked .ws-cell,
.genlibros-reader .reader-activity-locked .cw-cell-input,
.genlibros-reader .reader-activity-locked .cw-clue-card,
.genlibros-reader .reader-activity-locked .match-pill,
.genlibros-reader .reader-activity-locked .match-columns,
.genlibros-reader .reader-activity-locked .math-eq-pill,
.genlibros-reader .reader-activity-locked .math-eq-columns,
.genlibros-reader .reader-activity-locked .book-quiz-option {
    pointer-events: none !important;
    cursor: default !important;
}

.genlibros-reader .reader-activity-locked .match-svg,
.genlibros-reader .reader-activity-locked .math-eq-svg {
    pointer-events: none !important;
}

/* Modales del editor (appDialogs) por encima del cromo del lector.
 * Host a pantalla completa (sin height:0): en algunos navegadores un contenedor fixed 0?0
 * con hijos fixed daba problemas de hit-testing o de foco al pulsar ?Comenzar lectura?. */
body.reader-body #app-dialog-host {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 300000;
}

body.reader-body #app-dialog-host .app-dialog-layer {
    pointer-events: auto;
}

@media (max-width: 1099px) {
    body.reader-toolbar-autohide .reader-toolbar {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        transform: translateY(calc(-100% + 0.28rem));
    }

    .reader-toolbar-reveal {
        top: 0.4rem;
        right: 0.5rem;
        padding: 0.35rem 0.55rem;
    }
}

@media (max-width: 768px) {
    .reader-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    .reader-toolbar-primary {
        flex-wrap: wrap;
        width: 100%;
        align-items: flex-start;
        justify-content: space-between;
    }

    .reader-toolbar-left {
        flex: 1 1 calc(100% - 3.35rem);
    }

    .reader-toolbar-more {
        display: inline-flex;
        margin-top: 0.15rem;
    }

    .reader-toolbar-center {
        flex: 1 1 100%;
        justify-content: center;
        flex-wrap: wrap;
    }

    .reader-toolbar-title {
        max-width: 100%;
    }

    .reader-toolbar-student {
        max-width: 100%;
    }

    .reader-toolbar-actions {
        display: none;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        padding-top: 0.5rem;
        margin-top: 0.15rem;
        border-top: 1px solid rgba(148, 163, 184, 0.12);
        gap: 0.65rem;
    }

    .reader-page-jump {
        width: 100%;
        justify-content: center;
    }

    .reader-toolbar.reader-toolbar--drawer-open .reader-toolbar-actions {
        display: flex;
    }

    .reader-toolbar.reader-toolbar--drawer-open .reader-toolbar-more {
        background: rgba(129, 140, 248, 0.18);
        color: #e0e7ff;
    }

    .reader-toolbar-right {
        flex-direction: column;
        align-items: stretch;
        justify-content: stretch;
        width: 100%;
        gap: 0.65rem;
    }

    .reader-profile-wrap,
    .reader-text-size-group {
        width: 100%;
        justify-content: center;
    }

    .reader-reading-profile {
        min-width: 10rem;
    }

    .reader-glossary-panel {
        top: 3.9rem;
        right: 0.5rem;
        left: 0.5rem;
        width: auto;
        max-height: calc(100vh - 4.6rem); /* fallback */
        max-height: calc(100svh - 4.6rem); /* iOS Safari: excluye la barra del navegador */
    }

    .reader-zoom-group {
        justify-content: center;
        width: 100%;
        flex-wrap: wrap;
    }

    .reader-btn-finish {
        width: 100%;
    }

    #reader-btn-fullscreen {
        align-self: center;
    }
}

@media (max-width: 768px) {
    .reader-pages-stack.book-spread-animating .canvas-page:not([hidden]),
    .reader-pages-stack.book-spread-enter .canvas-page:not([hidden]) {
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}

@media (max-width: 520px) {
    .reader-btn-finish-label--long {
        display: none;
    }

    .reader-btn-finish-label--short {
        display: inline;
    }
}

/* ?? Di?logos del lector (informe / descarga) ?? */
.reader-dialog-overlay {
    position: fixed;
    inset: 0;
    z-index: 400000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    box-sizing: border-box;
    background: rgba(15, 23, 42, 0.85); /* Un poco m?s oscuro para compensar la falta de blur */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.reader-dialog-overlay[hidden] {
    display: none !important;
}

.reader-dialog {
    width: min(420px, 100%);
    max-height: min(88vh, 100%);
    overflow-y: auto;
    padding: 1.35rem 1.4rem 1.25rem;
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 14px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
    color: #e2e8f0;
}

.reader-dialog-title {
    margin: 0 0 0.65rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: #f8fafc;
    letter-spacing: -0.02em;
    line-height: 1.3;
}

.reader-dialog-lead {
    margin: 0 0 1rem;
    font-size: 0.875rem;
    line-height: 1.55;
    color: #cbd5e1;
}

.reader-dialog-hint {
    margin: 0 0 1.15rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: #94a3b8;
}

.reader-dialog-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    justify-content: flex-end;
    margin-top: 0.25rem;
}

.reader-dialog-actions--stack {
    flex-direction: column;
    align-items: stretch;
}

.reader-dialog-actions--stack .btn {
    justify-content: center;
}

.reader-finish-summary {
    margin-bottom: 1rem;
}

.reader-finish-stats {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.reader-finish-stats li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.45rem 0.65rem;
    background: rgba(30, 41, 59, 0.85);
    border-radius: 8px;
    border: 1px solid rgba(148, 163, 184, 0.12);
}

.reader-finish-stats li span {
    color: #94a3b8;
}

.reader-finish-stats li strong {
    color: #f1f5f9;
    font-variant-numeric: tabular-nums;
}

.reader-finish-empty {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #94a3b8;
}

.reader-export-success-badge {
    width: 2.5rem;
    height: 2.5rem;
    margin: 0 auto 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    font-weight: 700;
    color: #0f172a;
    background: linear-gradient(135deg, #34d399, #10b981);
    border-radius: 50%;
    line-height: 1;
}

.reader-export-success-dialog .reader-dialog-title {
    text-align: center;
}

.reader-export-filename-wrap {
    margin: 0 0 0.85rem;
    text-align: center;
}

.reader-export-filename {
    display: inline-block;
    max-width: 100%;
    padding: 0.45rem 0.65rem;
    font-size: 0.8rem;
    font-family: ui-monospace, 'Cascadia Code', monospace;
    word-break: break-all;
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(129, 140, 248, 0.35);
    border-radius: 8px;
    color: #c7d2fe;
}

.reader-adaptive-hint-box {
    margin: 12px 0 0;
}
.reader-adaptive-hint-inner {
    padding: 12px 14px;
    border-radius: var(--reader-radius-md);
    background: rgba(30, 41, 59, 0.85);
    border: 1px solid rgba(129, 140, 248, 0.35);
    font-size: 0.92rem;
    line-height: 1.45;
    color: #e2e8f0;
}
.reader-adaptive-hint-inner strong {
    display: block;
    margin-bottom: 6px;
    color: #c7d2fe;
}

@media (prefers-reduced-motion: reduce) {
    .reader-landing-cta,
    .reader-toolbar .btn-icon,
    .reader-btn-finish,
    .reader-main,
    .reader-zoom-outer {
        transition: none;
        scroll-behavior: auto;
    }

    .reader-landing-cta:hover,
    .reader-btn-finish:hover {
        transform: none;
    }

    body.genlibros-reader.editor-preview-mode .reader-pages-stack.book-spread-animating .canvas-page:not([hidden]),
    body.genlibros-reader.editor-preview-mode .reader-pages-stack.book-spread-enter .canvas-page:not([hidden]) {
        animation: none !important;
        filter: none !important;
        opacity: 1 !important;
        transform: none !important;
        will-change: auto !important;
    }
}

/* --- MODO TALLER (BLOQUEO DE INTEGRIDAD) --- */
body.workshop-mode-active {
    user-select: none !important;
    -webkit-user-select: none !important;
}

/* --- MODO TALLER (PANTALLA COMPLETA) --- */
.reader-dialog-overlay--workshop,
.reader-dialog-overlay--lock {
    z-index: 10002;
    background: radial-gradient(circle at center, #1e293b 0%, #0f172a 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.reader-workshop-dialog,
.reader-workshop-lock-dialog {
    max-width: 520px;
    border-top: 4px solid var(--accent-color);
    animation: workshop-dialog-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.reader-workshop-lock-dialog {
    border-top-color: #ef4444;
    box-shadow: 0 0 50px rgba(239, 68, 68, 0.2);
}

.reader-workshop-icon,
.reader-workshop-lock-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    background: rgba(129, 140, 248, 0.1);
    color: var(--accent-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.reader-workshop-lock-icon {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.reader-workshop-icon svg,
.reader-workshop-lock-icon svg {
    width: 32px;
    height: 32px;
}

@keyframes workshop-dialog-pop {
    from { opacity: 0; transform: scale(0.9) translateY(20px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

/* Contador de infracciones en el overlay de bloqueo del taller */
.reader-workshop-violation-count {
    display: block;
    margin: 0.75rem auto 0.5rem;
    padding: 0.45rem 1.1rem;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.35);
    border-radius: 50px;
    color: #fca5a5;
    font-size: 0.82rem;
    font-weight: 600;
    text-align: center;
    letter-spacing: 0.02em;
    max-width: fit-content;
    /* Se muestra solo cuando tiene contenido */
    &:empty { display: none; }
}

.reader-workshop-runtime-badge {
    display: inline-block;
    margin: 0 auto 12px;
    padding: 4px 12px;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 999px;
    background: rgba(129, 140, 248, 0.15);
    color: var(--accent-color);
    border: 1px solid rgba(129, 140, 248, 0.4);
}

.reader-workshop-strict-launchers {
    margin-top: 18px;
}

.reader-workshop-strict-hint {
    background: rgba(129, 140, 248, 0.08);
    border-left: 3px solid var(--accent-color);
    padding: 10px 14px;
    border-radius: 6px;
    margin-bottom: 16px;
    text-align: left;
}

.reader-workshop-strict-launchers .reader-dialog-actions {
    flex-wrap: wrap;
    gap: 10px;
}

.reader-workshop-launch-note {
    margin-top: 14px;
    font-size: 0.85rem;
    color: var(--secondary-text-color, #94a3b8);
    text-align: left;
    line-height: 1.45;
}

.reader-workshop-launch-note--fallback {
    background: rgba(251, 191, 36, 0.08);
    border-left: 3px solid #fbbf24;
    padding: 10px 14px;
    border-radius: 6px;
}

.reader-workshop-launch-note.workshop-launch-note--ok {
    color: #34d399;
    border-left-color: #34d399;
}

body.workshop-strict-runtime .reader-toolbar {
    box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.35) inset;
}

/* Ocultar elementos sobrantes en modo taller */
body.workshop-mode-active .reader-toolbar-home {
    display: none !important;
}

body.workshop-mode-active .reader-btn-finish {
    box-shadow: 0 0 15px rgba(129, 140, 248, 0.4);
    animation: pulse-finish 2s infinite;
}

@keyframes pulse-finish {
    0% { transform: scale(1); }
    50% { transform: scale(1.03); }
    100% { transform: scale(1); }
}

/* Soporte para iPad/Safari: Pantalla completa virtual si el nativo falla o es limitado */
.reader-virtual-fullscreen {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: 999999 !important;
    overflow: hidden !important;
}

.reader-virtual-fullscreen .reader-app {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: #0c1222;
    display: flex;
    flex-direction: column;
}

.reader-virtual-fullscreen .reader-zoom-inner,
.reader-virtual-fullscreen .reader-zoom-outer {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

.reader-virtual-fullscreen .reader-toolbar {
    position: relative;
    flex-shrink: 0;
    z-index: 10000;
}

.reader-virtual-fullscreen .reader-main {
    flex: 1;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-height: 100% !important;
    height: auto !important;
}

/* ?? Numeraci?n de P?ginas ?? */
.reader-page-number {
    position: absolute;
    bottom: 25px;
    font-size: 0.85rem;
    font-family: var(--book-serif, 'Literata', serif);
    font-weight: 500;
    color: #64748b;
    z-index: 10;
    pointer-events: none;
    -webkit-user-select: none; /* Safari iOS */
    user-select: none;
}

.canvas-page--even .reader-page-number {
    left: 45px;
}

.canvas-page--odd .reader-page-number {
    right: 45px;
}

/* ?? Herramientas de Estudio (Marcadores y Notas) ?? */
.reader-bookmark-btn {
    position: absolute;
    top: 0;
    width: 36px;
    height: 48px;
    background: rgba(148, 163, 184, 0.15);
    border: none;
    border-radius: 0 0 6px 6px; /* Bordes inferiores redondeados simulando la cinta */
    color: #94a3b8;
    cursor: pointer;
    z-index: 20;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); /* Efecto de resorte premium */
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding-bottom: 8px;
    transform: translateY(-24px); /* Parcialmente escondido hacia arriba */
    opacity: 0.8;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.reader-bookmark-btn svg {
    width: 20px;
    height: 20px;
    transition: all 0.3s ease;
}

/* Al pasar el mouse: la cinta baja ligeramente para invitar a hacer clic */
.reader-bookmark-btn:hover {
    transform: translateY(-12px);
    background: rgba(148, 163, 184, 0.3);
    color: #cbd5e1;
    opacity: 1;
}

/* Activo (p?gina marcada): la cinta baja por completo, se alarga y brilla con el color primario */
.reader-bookmark-btn--active,
.reader-bookmark-btn--active:hover {
    transform: translateY(0);
    background: var(--primary-color, #eab308); /* Fallback dorado si no hay variable */
    color: #fff;
    opacity: 1;
    height: 58px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.reader-bookmark-btn--active svg {
    fill: #fff; /* ?cono relleno indicando estado guardado */
    stroke: #fff;
}

/* Separaci?n desde el lomo del libro (alineaci?n par/impar) */
.canvas-page--even .reader-bookmark-btn {
    left: 45px;
}

.canvas-page--odd .reader-bookmark-btn {
    right: 45px;
}

.reader-highlight-toolbar {
    background: #1e293b;
    border-radius: 8px;
    padding: 6px;
    display: flex;
    gap: 8px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
    z-index: 100000;
    border: 1px solid rgba(255,255,255,0.1);
}

.reader-highlight-toolbar[hidden] {
    display: none !important;
}

.reader-hl-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.2s;
}
.reader-hl-btn:hover {
    transform: scale(1.15);
}

.highlight-yellow { background-color: rgba(253, 224, 71, 0.4); }
.highlight-green { background-color: rgba(134, 239, 172, 0.4); }
.highlight-pink { background-color: rgba(249, 168, 212, 0.4); }

.reader-hl-btn.highlight-yellow { background-color: #fde047; }
.reader-hl-btn.highlight-green { background-color: #86efac; }
.reader-hl-btn.highlight-pink { background-color: #f9a8d4; }

.reader-highlight {
    border-bottom: 2px solid transparent;
    cursor: pointer;
    border-radius: 3px;
    padding: 0 2px;
}
.reader-highlight--has-note {
    border-bottom-color: rgba(0,0,0,0.4);
}
.reader-highlight:hover {
    filter: brightness(0.95);
}

.reader-study-empty {
    font-size: 0.85rem;
    color: #94a3b8;
    text-align: center;
    margin-top: 2rem;
}

.reader-study-section-title {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #f1f5f9;
    margin: 1.6rem 0 0.8rem;
    font-weight: 700;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 0.35rem;
}

.reader-study-ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.reader-study-li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    background: rgba(30, 41, 59, 0.6);
    padding: 0.6rem;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.05);
}

body.reader-body .reader-study-li .btn,
body.reader-body .reader-study-li .btn.btn-outline {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    color: #f8fafc !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
    line-height: 1.2 !important;
}

body.reader-body .reader-study-li .btn:hover,
body.reader-body .reader-study-li .btn.btn-outline:hover {
    background: var(--primary-color, #eab308) !important;
    border-color: var(--primary-color, #eab308) !important;
    color: #0f172a !important;
    box-shadow: 0 0 10px rgba(234, 179, 8, 0.35) !important;
}

.reader-study-li .btn-icon.danger {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    color: #f87171;
    padding: 6px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.reader-study-li .btn-icon.danger:hover {
    background: #ef4444;
    border-color: #ef4444;
    color: #ffffff;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.4);
}

.reader-study-hl-content {
    cursor: pointer;
    flex: 1;
}

.reader-study-hl-text {
    font-size: 0.85rem;
    font-style: italic;
    margin-bottom: 0.4rem;
    padding: 0.3rem 0.5rem;
    border-radius: 0 6px 6px 0;
    border-left: 3.5px solid #64748b;
    transition: all 0.2s ease;
}

.reader-study-hl-text.highlight-yellow {
    color: #fef08a;
    background: rgba(253, 224, 71, 0.12);
    border-left-color: #eab308;
}

.reader-study-hl-text.highlight-green {
    color: #bbf7d0;
    background: rgba(134, 239, 172, 0.12);
    border-left-color: #22c55e;
}

.reader-study-hl-text.highlight-pink {
    color: #fbcfe8;
    background: rgba(249, 168, 212, 0.12);
    border-left-color: #ec4899;
}

.reader-study-note {
    font-size: 0.8rem;
    color: #cbd5e1;
    margin-bottom: 0.4rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.reader-study-note svg {
    width: 12px;
    height: 12px;
}

.reader-study-hl-meta {
    font-size: 0.7rem;
    color: #64748b;
    font-weight: 600;
}

/* ?? Di?logos Din?micos (appDialogs) Adaptados al Lector ?? */
body.reader-body .app-dialog-backdrop {
    background: rgba(15, 23, 42, 0.82);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

body.reader-body .app-dialog-panel {
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 14px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
    color: #e2e8f0;
}

body.reader-body .app-dialog-title {
    color: #f8fafc;
    font-family: 'Outfit', sans-serif;
    font-size: 1.15rem;
}

body.reader-body .app-dialog-message {
    color: #cbd5e1;
    font-size: 0.9rem;
}

body.reader-body .app-dialog-input {
    background: rgba(15, 23, 42, 0.45);
    border: 1px solid rgba(148, 163, 184, 0.25);
    color: #f8fafc;
    border-radius: 8px;
    padding: 10px 12px;
}

body.reader-body .app-dialog-input:focus {
    border-color: #818cf8;
    box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.3);
}

body.reader-body .app-dialog-field-label {
    color: #94a3b8;
}

/* ==========================================
   TOKENS Y ESTILOS PREMIUM PARA CUADERNILLOS
   ========================================== */

/* Tarjetas y Contenedores */
.premium-card {
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    border: 1px solid rgba(226, 232, 240, 0.8);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.premium-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(0,0,0,0.12);
}

/* Banners y Degradados Premium */
.premium-gradient-dark {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
    color: #f8fafc;
    border: 1px solid rgba(148, 163, 184, 0.2);
}
.premium-gradient-blue {
    background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 50%, #0284c7 100%);
    color: #ffffff;
    border: 1px solid rgba(56, 189, 248, 0.25);
}
.premium-gradient-emerald {
    background: linear-gradient(135deg, #022c22 0%, #064e3b 50%, #0f766e 100%);
    color: #ffffff;
    border: 1px solid rgba(52, 211, 153, 0.25);
}

/* Divisores Estilizados */
.premium-divider {
    width: 60px;
    height: 4px;
    background: #06b6d4;
    margin: 15px auto;
    border-radius: 2px;
}

/* Callouts y Banners de Alerta */
.premium-alert-warning {
    background-color: #fffbeb;
    border-left: 4px solid #d97706;
    padding: 16px;
    border-radius: 4px;
    margin: 20px 0;
    color: #78350f;
    font-size: 0.95rem;
    line-height: 1.5;
}
.premium-alert-warning strong {
    color: #b45309;
    display: block;
    margin-bottom: 4px;
}

.premium-alert-success {
    background-color: #f0fdf4;
    border-left: 4px solid #16a34a;
    padding: 16px;
    border-radius: 4px;
    margin: 20px 0;
    color: #14532d;
    font-size: 0.95rem;
    line-height: 1.5;
}
.premium-alert-success strong {
    color: #15803d;
    display: block;
    margin-bottom: 4px;
}

/* ==========================================================================
   BOTONES FLOTANTES PREMIUM DE NAVEGACI?N LATERAL (iPad / Inmersi?n)
   ========================================================================== */
.reader-floating-nav-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    /* Debajo del men? lateral para no interceptar sus toques */
    z-index: 900;
    display: none;
}

/* Mostrar siempre en modo inmersi?n (deep reading) o en modo compacto / iPad */
body.genlibros-reader.reader-deep-reading .reader-floating-nav-container,
body.genlibros-reader.reader-layout-compact .reader-floating-nav-container {
    display: block;
}

.reader-floating-nav {
    position: fixed;
    /* Media-baja: fuera del rail vertical centrado del men? */
    top: auto;
    bottom: max(18vh, calc(72px + env(safe-area-inset-bottom, 0px)));
    transform: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: auto !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0.85;
}

/* A la derecha del men? lateral (no encima) */
.reader-floating-nav--prev {
    left: max(
        72px,
        calc(var(--reader-sidebar-rail, 70px) + env(safe-area-inset-left, 0px))
    );
}

.reader-floating-nav--next {
    right: max(16px, env(safe-area-inset-right, 0px));
}

.reader-floating-nav:hover,
.reader-floating-nav:focus-visible {
    opacity: 1;
    background: rgba(79, 70, 229, 0.95);
    border-color: rgba(255, 255, 255, 0.5);
    transform: scale(1.08);
    box-shadow: 0 12px 28px rgba(79, 70, 229, 0.5);
}

.reader-floating-nav:active {
    transform: scale(0.96);
}

.reader-floating-nav:disabled,
.reader-floating-nav[disabled] {
    opacity: 0.2;
    cursor: not-allowed;
    pointer-events: none !important;
}

.reader-floating-nav svg {
    width: 24px;
    height: 24px;
    stroke-width: 2.5;
}

/* ==========================================================================
   OPTIMIZACI?N DE EVENTOS T?CTILES IPAD (Eliminaci?n de Latencia 300ms)
   ========================================================================== */
button,
input,
textarea,
select,
a,
.btn,
.btn-icon,
.reader-floating-nav,
.ws-cell,
.cw-cell-input,
.cw-clue-card,
.cw-cell,
.match-pill,
.match-columns,
.math-eq-pill,
.math-eq-columns,
.book-quiz-option,
.table-activity-input,
.fill-blank-input,
.reader-page-jump-input,
.canvas-page {
    touch-action: manipulation;
}

/* Sopa: pan desactivado en la grilla para arrastre fluido */
.genlibros-reader .ws-grid,
.editor-preview-mode .ws-grid {
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

/* ==========================================================================
   TARJETA PREMIUM DE REGISTRO DE DESEMPE?O DEL ESTUDIANTE (Porcentaje)
   ========================================================================== */
/* ==========================================================================
   BARRA LATERAL MINIMALISTA (ESTILO PREMIUM ESTUDIANTIL)
   ========================================================================== */
:root {
    --reader-sidebar-rail: 70px; /* left inset + ancho rail (zona libre para bot?n ?) */
}

.reader-sidebar-nav {
    position: fixed;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    /* Por encima de los botones de p?gina flotantes */
    z-index: 1100;
    width: 54px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px 6px;
    background: rgba(15, 23, 42, 0.88);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    box-shadow: 
        0 20px 40px -10px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(255, 255, 255, 0.05);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}

.reader-sidebar-item {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    position: relative;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
}

.reader-sidebar-item i,
.reader-sidebar-item svg {
    width: 20px;
    height: 20px;
    stroke-width: 2;
    transition: transform 0.2s ease;
}

.reader-sidebar-item:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    transform: translateY(-1px) scale(1.05);
}

.reader-sidebar-item.active,
.reader-sidebar-item[aria-pressed="true"] {
    background: rgba(59, 130, 246, 0.25);
    color: #60a5fa;
    border: 1px solid rgba(96, 165, 250, 0.35);
    box-shadow: 0 0 14px rgba(59, 130, 246, 0.3);
}

.reader-sidebar-item--highlight {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.4);
}

.reader-sidebar-item--highlight:hover {
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.6);
}

/* Tooltip emergente lateral al pasar el cursor */
.reader-sidebar-tooltip {
    position: absolute;
    left: 56px;
    top: 50%;
    transform: translateY(-50%) translateX(-8px);
    background: #0f172a;
    color: #f8fafc;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 8px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
    z-index: 1010;
}

.reader-sidebar-item:hover .reader-sidebar-tooltip {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

.reader-sidebar-divider {
    width: 26px;
    height: 1px;
    background: rgba(255, 255, 255, 0.12);
    margin: 2px 0;
}

/* Popover de Ajustes de Lectura */
.reader-sidebar-popover {
    position: fixed;
    left: 78px;
    top: 50%;
    transform: translateY(-50%);
    width: 270px;
    background: rgba(15, 23, 42, 0.94);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 1.25rem;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
    z-index: 1020;
    transition: all 0.25s ease;
}

.reader-sidebar-popover.hidden {
    display: none;
    opacity: 0;
    transform: translateY(-50%) scale(0.95);
    pointer-events: none;
}

.reader-sidebar-popover-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: #f8fafc;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 0.5rem;
}

.reader-popover-close {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}

.reader-popover-close:hover {
    color: #fff;
}

.popover-group {
    margin-bottom: 1rem;
}

.popover-group:last-child {
    margin-bottom: 0;
}

.popover-group label {
    display: block;
    font-size: 0.8rem;
    color: #94a3b8;
    margin-bottom: 0.4rem;
    font-weight: 600;
}

.popover-group select {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    background: #1e293b;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 0.875rem;
    outline: none;
}

/* ==========================================================================
   INTERFAZ ZERO-DISPLACEMENT MICRO-ELEGANTE PARA LECTURA Y IPAD
   ========================================================================== */
.reader-toolbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    z-index: 990 !important;
    pointer-events: none !important;
    overflow: visible !important;
}

.reader-toolbar::before {
    display: none !important;
}

/* El lienzo principal del libro con margen superior; crece con el contenido (scroll del documento) */
.reader-main {
    padding-top: 3.2rem !important;
    padding-bottom: 1.5rem !important;
    /* Safe area para iPad con notch/home indicator */
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)) !important;
    margin-top: 0 !important;
    min-height: 100vh !important;
    min-height: 100dvh !important; /* dvh aware en Safari iOS: excluye la barra del navegador */
    /* height fijo cortaba ejercicios largos en iPad (sin scroll de hoja) */
    height: auto !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    box-sizing: border-box !important;
    transition: padding-top 0.3s ease !important;
}

.reader-toolbar-primary {
    pointer-events: none !important;
    padding: 0 !important;
    width: 100% !important;
    background: transparent !important;
}

/* Ocultar artefactos viejos */
.reader-toolbar-reveal,
#reader-toolbar-reveal {
    display: none !important;
}

/* C?psula de navegaci?n flotante MICRO-ELEGANTE en el centro superior */
.reader-toolbar-center {
    pointer-events: auto !important;
    position: fixed !important;
    top: 10px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: rgba(15, 23, 42, 0.78) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 9999px !important;
    padding: 4px 12px !important;
    gap: 0.35rem !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
    z-index: 995 !important;
    transition: opacity 0.3s ease, transform 0.3s ease !important;
}

.reader-toolbar-center .btn-icon {
    width: 26px !important;
    height: 26px !important;
    padding: 0 !important;
    border-radius: 50% !important;
}

.reader-toolbar-center .btn-icon i,
.reader-toolbar-center .btn-icon svg {
    width: 14px !important;
    height: 14px !important;
}

.reader-page-indicator {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    color: #e2e8f0 !important;
}

.reader-page-jump-input {
    width: 32px !important;
    height: 22px !important;
    padding: 0 2px !important;
    font-size: 0.72rem !important;
    border-radius: 6px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
    text-align: center;
}

.reader-page-jump .btn {
    height: 22px !important;
    padding: 0 6px !important;
    font-size: 0.7rem !important;
    line-height: 1 !important;
    border-radius: 6px !important;
}

/* Etiqueta de libro y estudiante flotante superior izquierda (MICRO-COMPACTA) */
.reader-toolbar-left {
    pointer-events: auto !important;
    position: fixed !important;
    top: 10px !important;
    left: 76px !important;
    background: rgba(15, 23, 42, 0.75) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    padding: 3px 10px !important;
    gap: 0.4rem !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25) !important;
    z-index: 994 !important;
    transition: opacity 0.3s ease !important;
}

.reader-toolbar-institutional-mark img {
    width: 24px !important;
    height: 24px !important;
}

.reader-toolbar-home {
    font-size: 0.7rem !important;
    padding: 2px 7px !important;
    border-radius: 6px !important;
}

.reader-toolbar-title {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    color: #f1f5f9 !important;
    max-width: 160px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.reader-toolbar-student-line {
    font-size: 0.68rem !important;
}

/* Bot?n de informe flotante superior derecho (ELEGANTE Y COMPACTO) */
.reader-toolbar-right {
    pointer-events: auto !important;
    position: fixed !important;
    top: 10px !important;
    right: 16px !important;
    z-index: 994 !important;
    transition: opacity 0.3s ease !important;
}

.reader-toolbar-right .reader-btn-finish {
    padding: 4px 12px !important;
    font-size: 0.75rem !important;
    border-radius: 9999px !important;
    height: 28px !important;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35) !important;
    border: none !important;
}

/* En Modo Inmersi?n / Lectura Profunda: Ocultar suavemente los flotantes superiores para 100% foco */
body.reader-toolbar-autohide .reader-toolbar-center,
body.reader-toolbar-autohide .reader-toolbar-left,
body.reader-toolbar-autohide .reader-toolbar-right,
body.reader-deep-reading .reader-toolbar-center,
body.reader-deep-reading .reader-toolbar-left,
body.reader-deep-reading .reader-toolbar-right {
    opacity: 0;
    pointer-events: none !important;
    transform: translateX(-50%) translateY(-20px) !important;
}

/* Optimizaci?n especial iPad y Pantallas T?ctiles */
@media (max-width: 1024px) {
    :root {
        --reader-sidebar-rail: 66px; /* 10px + 44px + 12px de aire */
    }
    .reader-sidebar-nav {
        left: 10px;
        width: 44px;
        padding: 8px 4px;
        border-radius: 16px;
        z-index: 1100;
    }
    .reader-sidebar-item {
        width: 36px;
        height: 36px;
    }
    .reader-sidebar-tooltip {
        display: none;
    }
    .reader-floating-nav {
        width: 44px;
        height: 44px;
        bottom: max(16vh, calc(64px + env(safe-area-inset-bottom, 0px)));
    }
    .reader-floating-nav--prev {
        left: max(66px, calc(var(--reader-sidebar-rail) + env(safe-area-inset-left, 0px)));
    }
    .reader-toolbar-left {
        display: none !important; /* En iPad se oculta el t?tulo largo del libro para mantener el espacio visual 100% despejado */
    }
    .reader-toolbar-center {
        top: 8px !important;
        padding: 3px 8px !important;
    }
    .reader-toolbar-right .reader-btn-finish-label {
        display: inline-block;
        font-size: 0.72rem;
    }
}

/* Banner de informe entregado / env?o bloqueado */
.reader-submission-locked-banner {
    width: calc(100% - 2rem);
    max-width: 850px;
    margin: 0.6rem auto 0.4rem;
    padding: 0.7rem 1.1rem;
    background: rgba(245, 158, 11, 0.14);
    border: 1px solid rgba(245, 158, 11, 0.4);
    border-radius: var(--reader-radius-md, 12px);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fef08a;
    box-sizing: border-box;
    z-index: 100;
    position: relative;
    animation: reader-banner-fade-in 0.3s ease;
}

.reader-submission-locked-inner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.reader-submission-locked-icon {
    font-size: 1.2rem;
    color: #f59e0b;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.reader-submission-locked-icon svg {
    width: 20px;
    height: 20px;
    stroke-width: 2.2px;
}

.reader-submission-locked-text {
    font-size: 0.85rem;
    line-height: 1.4;
    color: #fef3c7;
}

@keyframes reader-banner-fade-in {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ???????????????????????????????????????????????????????????????
 * iPad / Safari t?ctil: UX premium (gestos, 16px inputs, teclado, 1 scroller, sin 3D)
 * ??????????????????????????????????????????????????????????????? */

:root {
    --reader-keyboard-inset: 0px;
}

/* Desactivar flip 3D CSS (perspective / rotateY) en iPad e iOS */
body.reader-no-flip-3d .reader-pages-stack.book-spread-animating .canvas-page:not([hidden]),
body.reader-no-flip-3d .reader-pages-stack.book-spread-enter .canvas-page:not([hidden]),
body.reader-ios-touch .reader-pages-stack.book-spread-animating .canvas-page:not([hidden]),
body.reader-ios-touch .reader-pages-stack.book-spread-enter .canvas-page:not([hidden]) {
    animation: none !important;
    filter: none !important;
    opacity: 1 !important;
    transform: none !important;
    will-change: auto !important;
    perspective: none !important;
}

body.reader-no-flip-3d .reader-pages-stack,
body.reader-ios-touch .reader-pages-stack {
    perspective: none !important;
    transform-style: flat !important;
}

/*
 * iPad: el documento hace scroll (main crece con el contenido).
 * Si la hoja es muy alta, tambi?n permite scroll local seguro para llegar a ?Comprobar / Enviar?.
 */
body.reader-ios-touch .canvas-sheet-clip.reader-sheet-document-scroll:not(.reader-sheet-scroll--ios-safe) {
    overflow: visible !important;
    max-height: none !important;
    -webkit-overflow-scrolling: auto;
}

body.reader-ios-touch .canvas-sheet-clip.reader-sheet-scroll--ios-safe,
body.reader-ios-touch .canvas-sheet-clip.reader-sheet-scroll {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    max-height: min(78dvh, calc(100dvh - 7.5rem - var(--reader-keyboard-inset, 0px))) !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
}

body.reader-ios-touch.genlibros-reader.reader-layout-compact .reader-pages-stack .canvas-page:not([hidden]) {
    height: auto !important;
    min-height: 0;
    touch-action: pan-y pinch-zoom;
}

body.reader-ios-touch.genlibros-reader.reader-layout-compact .reader-pages-stack .canvas-area {
    height: auto !important;
    min-height: 0;
    max-height: none !important;
}

body.reader-ios-touch .reader-main {
    height: auto !important;
    max-height: none !important;
    min-height: 100dvh !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    overscroll-behavior-x: none;
    overscroll-behavior-y: auto;
    padding-bottom: calc(2.5rem + env(safe-area-inset-bottom, 0px) + var(--reader-keyboard-inset, 0px)) !important;
    transition: padding-bottom 0.18s ease;
}

/* Contenedores de hoja: en iPad dejan crecer; el tope lo define scroll seguro de la clip */
body.reader-ios-touch.genlibros-reader .canvas-area {
    max-height: none !important;
    height: auto !important;
}

body.reader-ios-touch.genlibros-reader .canvas-sheet-inner {
    max-height: none !important;
    height: auto !important;
}

/* Espacio al final del libro para no tapar botones de actividad con el home-indicator */
body.reader-ios-touch.genlibros-reader .reader-zoom-outer {
    padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
}

/* Men? lateral siempre por encima de flechas de p?gina en iPad */
body.reader-ios-touch .reader-sidebar-nav,
body.reader-layout-compact .reader-sidebar-nav {
    z-index: 1100;
}

body.reader-ios-touch .reader-sidebar-popover {
    z-index: 1120;
    left: calc(10px + 44px + 12px);
}

body.reader-ios-touch.reader-keyboard-open .reader-main {
    padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px) + var(--reader-keyboard-inset, 0px));
}

/* Safari: inputs < 16px ? zoom al focus y descoloca la hoja */
body.reader-ios-touch input,
body.reader-ios-touch textarea,
body.reader-ios-touch select,
body.genlibros-reader.reader-ios-touch .canvas-page input,
body.genlibros-reader.reader-ios-touch .canvas-page textarea,
body.genlibros-reader.reader-ios-touch .canvas-page select {
    font-size: 16px !important;
}

/* Tipograf?a m?nima legible en hoja (iPad / escala ?nica) */
body.reader-ios-touch.genlibros-reader .reader-main .book-prose,
body.reader-ios-touch.genlibros-reader .reader-main .book-activity-instruction,
body.reader-ios-touch.genlibros-reader .reader-main .book-quiz-question,
body.reader-ios-touch.genlibros-reader .reader-main .book-quiz-option-text,
body.reader-ios-touch.genlibros-reader .reader-main p,
body.reader-single-scale.genlibros-reader .reader-main .book-prose {
    font-size: max(15px, calc(var(--book-body-size, 1.02rem) * var(--reader-text-scale, 1)));
    line-height: 1.55;
}

/* Boot iPad: stack nativo (sin Google Fonts) */
html.genlibros-ios-boot body.reader-body,
body.reader-ios-touch.reader-body {
    --reader-font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
    font-family: var(--reader-font);
}

/* Low-perf / iPad: sin blur GPU caro */
body.reader-low-perf .reader-landing-card,
body.reader-low-perf .reader-sidebar-nav,
body.reader-low-perf .reader-sidebar-popover,
body.reader-low-perf .reader-toolbar,
body.reader-low-perf .reader-toolbar::before,
body.reader-low-perf .reader-float-nav-btn,
body.reader-low-perf .reader-dialog,
body.reader-low-perf .reader-term-callout,
body.reader-low-perf .reader-study-panel,
body.reader-low-perf .reader-glossary-panel,
body.reader-low-perf .reader-settings-popover,
body.reader-low-perf .reader-finish-overlay,
body.reader-low-perf .reader-read-error-inner {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.reader-low-perf .reader-sidebar-nav,
body.reader-low-perf .reader-float-nav-btn {
    background: rgba(15, 23, 42, 0.94) !important;
}

/* Toast motor Python (aula) */
.reader-python-engine-toast {
    position: fixed;
    z-index: 14000;
    left: 50%;
    bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    width: min(22rem, calc(100vw - 1.5rem));
    pointer-events: none;
}

.reader-python-engine-toast[hidden] {
    display: none !important;
}

.reader-python-engine-toast__inner {
    padding: 0.75rem 0.9rem;
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.96);
    border: 1px solid rgba(129, 140, 248, 0.35);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
    color: #e2e8f0;
}

.reader-python-engine-toast__title {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #a5b4fc;
    margin-bottom: 0.25rem;
}

.reader-python-engine-toast__msg {
    margin: 0 0 0.55rem;
    font-size: 0.85rem;
    line-height: 1.4;
    color: #cbd5e1;
}

.reader-python-engine-toast__bar {
    height: 4px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.25);
    overflow: hidden;
}

.reader-python-engine-toast__fill {
    display: block;
    height: 100%;
    width: 0%;
    border-radius: inherit;
    background: linear-gradient(90deg, #6366f1, #818cf8);
    transition: width 0.25s ease;
}

.reader-python-engine-toast.is-ready .reader-python-engine-toast__fill {
    background: linear-gradient(90deg, #059669, #34d399);
}

.reader-python-engine-toast.is-error .reader-python-engine-toast__fill {
    background: linear-gradient(90deg, #b91c1c, #f87171);
}

/* Barra progreso en bloque code-runner / python mastery */
.cr-pyodide-status,
.pm-pyodide-status {
    margin: 0 0 8px;
    padding: 8px 10px;
    border-radius: 8px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    font-size: 0.8rem;
    color: #334155;
    line-height: 1.4;
}

.cr-pyodide-status[hidden],
.pm-pyodide-status[hidden] {
    display: none !important;
}

.cr-pyodide-status__bar,
.pm-pyodide-status__bar {
    margin-top: 6px;
    height: 3px;
    border-radius: 999px;
    background: #e2e8f0;
    overflow: hidden;
}

.cr-pyodide-status__fill,
.pm-pyodide-status__fill {
    display: block;
    height: 100%;
    width: 0%;
    background: #6366f1;
    transition: width 0.2s ease;
}

@media (hover: none) and (pointer: coarse) {
    body.genlibros-reader input:not([type='checkbox']):not([type='radio']):not([type='range']),
    body.genlibros-reader textarea,
    body.genlibros-reader select {
        font-size: max(16px, 1em) !important;
    }

    .reader-page-jump-input,
    .reader-reading-profile {
        font-size: 16px !important;
        min-height: 2rem;
    }
}

/* Toques en herramientas de estudio no ?saltan? a la p?gina */
.reader-study-layer,
[data-no-page-swipe] {
    touch-action: manipulation;
}

/* Rellenar huecos: conservar p?rrafos / saltos entre conceptos en el lector */
body.genlibros-reader .fill-blank-body {
    display: flex;
    flex-direction: column;
    width: 100%;
}

body.genlibros-reader .fill-blank-para {
    margin: 0 0 0.4em;
    padding: 0;
    line-height: 2.05;
    font-size: 1.05rem;
    overflow-wrap: break-word;
}

body.genlibros-reader .fill-blank-para:last-child {
    margin-bottom: 0;
}

body.genlibros-reader .fill-blank-gap {
    width: 100%;
    min-height: 0.55em;
    pointer-events: none;
}

body.genlibros-reader .fill-blank-gap--2 {
    min-height: 1rem;
}

body.genlibros-reader .fill-blank-gap--3 {
    min-height: 1.35rem;
}

body.genlibros-reader .fill-blank-line {
    white-space: pre-wrap;
    line-height: 2.05;
}

/* Overlay discreto al montar/preparar p?ginas (virtualizaci?n o carga diferida) */
.reader-page-preparing {
    position: fixed;
    inset: 0;
    z-index: 2500;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    background: rgba(15, 23, 42, 0.28);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.reader-page-preparing[hidden],
.reader-page-preparing:not(.is-visible) {
    display: none !important;
}

.reader-page-preparing.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.reader-page-preparing-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1.1rem 1.4rem;
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}

.reader-page-preparing-spin {
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    border: 2px solid rgba(148, 163, 184, 0.35);
    border-top-color: #e2e8f0;
    animation: reader-preparing-spin 0.7s linear infinite;
}

.reader-page-preparing-text {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: #f1f5f9;
    letter-spacing: 0.01em;
}

@keyframes reader-preparing-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .reader-page-preparing-spin {
        animation: none;
        border-top-color: #94a3b8;
    }
}


/* ==========================================================================
   SOPA DE LETRAS + CRUCIGRAMA ? experiencia premium en lector (estudiante)
   ========================================================================== */
.genlibros-reader .block-wordsearch,
.genlibros-reader .block-crossword {
    width: 100% !important;
    max-width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.genlibros-reader .block-wordsearch .block-content,
.genlibros-reader .block-crossword .block-content {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
}

/* Pistas de juego */
.ws-play-hint,
.cw-play-hint {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: linear-gradient(135deg, #eff6ff 0%, #f8fafc 100%);
    border: 1px solid #bfdbfe;
    color: #1e3a5f;
    font-size: 0.84rem;
    line-height: 1.4;
}

.ws-play-hint.hidden,
.cw-play-hint.hidden {
    display: none !important;
}

.ws-play-hint-icon,
.cw-play-hint-icon {
    flex-shrink: 0;
    font-size: 0.95rem;
    opacity: 0.85;
    line-height: 1.3;
}

/* Sopa ? letras grandes y rastro de selecci?n */
.genlibros-reader .ws-grid-wrap {
    padding: 14px;
    border-radius: 14px;
    border: 1px solid #cbd5e1;
    background: #fff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

.genlibros-reader .ws-grid {
    max-width: min(100%, calc(var(--ws-size, 12) * 44px));
    gap: 3px;
}

.genlibros-reader .ws-cell {
    border: 1px solid #94a3b8;
    border-radius: 6px;
    font-weight: 800;
    font-size: clamp(0.95rem, calc(100cqw / var(--ws-size, 12) * 0.62), 1.45rem);
    color: #0f172a;
    min-height: 28px;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
}

.genlibros-reader .ws-cell--pick {
    background: #c7d2fe !important;
    border-color: #4f46e5 !important;
    color: #312e81 !important;
    transform: scale(1.04);
    z-index: 1;
}

.genlibros-reader .ws-cell--path {
    background: #e0e7ff !important;
    border-color: #6366f1 !important;
    color: #312e81 !important;
}

.genlibros-reader .ws-cell--found {
    background: #6ee7b7 !important;
    border-color: #059669 !important;
    color: #064e3b !important;
    font-weight: 800;
}

.genlibros-reader .ws-cell--miss {
    background: #fecaca !important;
    border-color: #ef4444 !important;
}

.genlibros-reader .ws-word-list {
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 8px;
}

.genlibros-reader .ws-chip {
    min-height: 40px;
    font-size: 0.8rem;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}

.genlibros-reader .ws-words-count--done {
    background: #d1fae5;
    border-color: #6ee7b7;
    color: #065f46;
}

/* Crucigrama: siempre dentro del ancho (sin scroll lateral) */
.genlibros-reader .cw-grid-placeholder--live {
    display: flex !important;
    justify-content: center;
    padding: 12px 10px;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 60%);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
    overflow: hidden !important;
    max-width: 100%;
    min-width: 0;
}

.genlibros-reader .cw-board-shell {
    overflow-x: hidden !important;
    max-width: 100%;
    min-width: 0;
}

.genlibros-reader .cw-grid {
    --cw-cell-size: min(34px, calc((100cqw - 8px) / max(var(--cw-cols, 1), 1)));
    width: max-content !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    grid-template-columns: repeat(var(--cw-cols, 1), var(--cw-cell-size)) !important;
    grid-auto-rows: var(--cw-cell-size) !important;
}

.genlibros-reader .cw-cell {
    width: var(--cw-cell-size) !important;
    height: var(--cw-cell-size) !important;
    aspect-ratio: unset !important;
    border: 1.5px solid #1e293b !important;
    background: #ffffff !important;
    font-size: max(9px, calc(var(--cw-cell-size) * 0.48)) !important;
    font-weight: 800 !important;
    min-height: 0 !important;
}

.genlibros-reader .cw-cell--void {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

.genlibros-reader .cw-cell--active {
    background: #dbeafe !important;
    box-shadow: inset 0 0 0 2px #2563eb !important;
}

.genlibros-reader .cw-cell-input {
    font-size: inherit !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    caret-color: #2563eb;
    min-height: 100%;
    -webkit-tap-highlight-color: transparent;
}

.genlibros-reader .cw-cell-num {
    color: #0f172a !important;
    font-weight: 800 !important;
    font-size: max(6px, calc(var(--cw-cell-size) * 0.24)) !important;
}

.genlibros-reader .cw-clue-card {
    border-radius: 10px;
    padding: 8px 10px;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.genlibros-reader .cw-clue-card:hover,
.genlibros-reader .cw-clue-card:active,
.genlibros-reader .cw-clue-card--focus {
    border-color: #60a5fa;
    background: #f0f9ff;
    box-shadow: 0 2px 10px rgba(37, 99, 235, 0.12);
}

.genlibros-reader .cw-clue-word {
    font-size: calc(0.78rem * var(--reader-text-scale, 1));
}

.genlibros-reader .cw-clue-text {
    font-size: calc(0.82rem * var(--reader-text-scale, 1));
    color: #334155;
    line-height: 1.35;
}

.genlibros-reader .cw-meta-chip {
    font-size: 0.7rem;
}

.genlibros-reader .cw-clues-title {
    font-size: calc(0.95rem * var(--reader-text-scale, 1));
}

/* Vista docente (preview) comparte highlights de arrastre de sopa */
.ws-cell--path {
    background: #e0e7ff;
    border-color: #6366f1;
    color: #312e81;
}

.cw-clue-card--focus {
    border-color: #60a5fa;
    background: #f0f9ff;
}

@media (max-width: 720px) {
    .genlibros-reader .ws-word-list {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }
    .genlibros-reader .cw-clues {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   ENTREGA EN GRUPO Y BÚSQUEDA DE COMPAÑEROS POR GRADO (PREMIUM PRO)
   ========================================================================== */
.reader-group-submission-wrap {
    margin: 1.1rem 0;
    padding: 0.95rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03);
}

.group-submission-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.group-submission-label {
    font-size: 0.88rem;
    font-weight: 700;
    color: #334155;
}

.group-mode-toggle {
    display: inline-flex;
    background: #e2e8f0;
    padding: 3px;
    border-radius: 9999px;
    gap: 2px;
}

.btn-group-mode {
    border: none;
    background: transparent;
    padding: 6px 14px;
    border-radius: 9999px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-group-mode.is-active {
    background: #ffffff;
    color: #2563eb;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.15);
    font-weight: 700;
}

.reader-group-selector-panel {
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px dashed #cbd5e1;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    animation: fadeInGroup 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeInGroup {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.group-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.group-grado-chip {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #1d4ed8;
    background: #dbeafe;
    padding: 3px 10px;
    border-radius: 9999px;
}

.group-hint {
    font-size: 0.78rem;
    color: #64748b;
}

.group-search-wrap {
    position: relative;
}

.group-search-input {
    width: 100%;
    padding: 9px 14px;
    font-size: 0.88rem;
    border: 1.5px solid #cbd5e1;
    border-radius: 8px;
    background: #ffffff;
    color: #0f172a;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.group-search-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.group-search-results {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.12);
    z-index: 50;
    max-height: 200px;
    overflow-y: auto;
}

.group-search-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 12px;
    cursor: pointer;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.15s;
}

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

.group-search-item:hover {
    background: #f0f9ff;
}

.group-search-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: #0f172a;
}

.group-search-sub {
    font-size: 0.75rem;
    color: #64748b;
}

.group-members-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.group-member-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    padding: 4px 10px;
    border-radius: 9999px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #1e293b;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.group-member-chip--leader {
    background: #eff6ff;
    border-color: #93c5fd;
    color: #1e40af;
}

.group-member-remove {
    border: none;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0 2px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.group-member-remove:hover {
    color: #ef4444;
}

.group-team-summary {
    font-size: 0.82rem;
    color: #1e293b;
    background: #f0f9ff;
    border-left: 3px solid #0284c7;
    padding: 8px 12px;
    border-radius: 0 6px 6px 0;
    line-height: 1.4;
}

/* ==========================================================================
   ADAPTACIONES Y OPTIMIZACIONES IPAD SAFARI / WEBKIT (PREMIUM PRO)
   ========================================================================== */
@supports (height: 100dvh) {
    body.genlibros-reader,
    .reader-layout-container,
    .reader-dialog-overlay {
        min-height: 100dvh;
    }
}

/* Compensación de teclado virtual en iPad */
body.reader-keyboard-open .reader-dialog-overlay {
    padding-bottom: var(--ipad-keyboard-offset, 0px);
}

body.reader-keyboard-open .reader-dialog {
    transform: translateY(calc(var(--ipad-keyboard-offset, 0px) * -0.35));
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Áreas interactivas táctiles (evita desplazamiento accidental del libro al arrastrar) */
.reader-interactive-block,
.ws-grid-container,
.cw-grid-container,
.matching-canvas,
.hotspot-canvas {
    touch-action: none;
    overscroll-behavior: contain;
}

/* Inset seguro para Home Indicator en iPad */
.reader-bottom-nav-bar,
.reader-floating-nav {
    padding-bottom: max(10px, env(safe-area-inset-bottom, 0px));
}

/* ==========================================================================
   FIDELIDAD DE RENDERIZADO DE IMÁGENES Y BLOQUES (EDITOR & LECTOR)
   ========================================================================== */
/* Anular restricciones de alto y encuadre en imágenes recortadas por el docente */
.book-figure__inner--cropped,
.book-figure__inner[data-cropped="1"],
.book-figure__inner[style*="aspect-ratio"] {
    max-width: 100% !important;
}

.book-figure__inner--cropped .book-figure__img,
.book-figure__inner[data-cropped="1"] .book-figure__img,
.book-figure__inner[style*="aspect-ratio"] .book-figure__img {
    max-height: none !important;
    max-width: none !important;
    object-fit: fill !important;
}

/* Permitir que el contenedor de figura respete el ancho personalizado del docente */
.block-image:not(.block-image--cover-full) .book-figure {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
}

.block-image:not(.block-image--cover-full) .book-figure__inner:not(.book-figure__inner--cropped):not([data-cropped="1"]):not([style*="aspect-ratio"]) {
    height: auto !important;
    max-height: none !important;
    aspect-ratio: auto !important;
}

.block-image:not(.block-image--cover-full) .book-figure__inner:not(.book-figure__inner--cropped):not([data-cropped="1"]):not([style*="aspect-ratio"]) .book-figure__img {
    width: 100% !important;
    height: auto !important;
    max-height: min(52vh, 480px) !important;
    object-fit: contain !important;
    object-position: center !important;
}

/* Preservar alineaciones personalizadas del bloque en el lector */
.canvas-block[style*="margin-left: 0"][style*="margin-right: auto"],
.canvas-block[style*="margin-left: 0px"][style*="margin-right: auto"] {
    margin-left: 0 !important;
    margin-right: auto !important;
}

.canvas-block[style*="margin-left: auto"][style*="margin-right: 0"],
.canvas-block[style*="margin-left: auto"][style*="margin-right: 0px"] {
    margin-left: auto !important;
    margin-right: 0 !important;
}

.canvas-block[style*="margin-left: auto"][style*="margin-right: auto"] {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ==========================================================================
   BARRA FLOTANTE DE MODO VISTA PREVIA ADMINISTRADOR EN EL LECTOR
   ========================================================================== */
.admin-preview-floating-banner {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    background: linear-gradient(90deg, #1e1b4b 0%, #312e81 100%);
    color: #ffffff;
    padding: 8px 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.admin-preview-banner-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.admin-preview-banner-info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.admin-preview-banner-badge {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    background: #4f46e5;
    color: #ffffff;
    padding: 3px 10px;
    border-radius: 9999px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.admin-preview-banner-text {
    font-size: 0.85rem;
    color: #e0e7ff;
}

.admin-preview-banner-text strong {
    color: #ffffff;
    font-weight: 700;
}

.admin-preview-banner-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.admin-preview-banner-select {
    padding: 4px 10px;
    font-size: 0.82rem;
    font-weight: 600;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    cursor: pointer;
    outline: none;
}

.admin-preview-banner-select option {
    background: #1e1b4b;
    color: #ffffff;
}

.admin-preview-banner-btn {
    border: none;
    background: #e0e7ff;
    color: #1e1b4b;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 5px 14px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.admin-preview-banner-btn:hover {
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}