/* ============================================================
   Cuadernillo del alumno · Colegio Internacional Alauda
   Sistema editorial premium + paginación A4 real
   ============================================================ */
:root{
  --ink:#1b2a5e;
  --verde:#2d6a2e;
  --asig:#1b2a5e;             /* color de la asignatura (lo fija el JS) */
  --asig-d:#13204a;
  --tinta:#23262d;
  --pluma:#6b7385;
  --papel:#f4f5f8;
  --carta:#ffffff;
  --filete:#e4e7ee;
  --filete-suave:#edeff4;
  --sombra:0 1px 2px rgba(30,30,40,.05),0 10px 30px rgba(30,30,40,.05);
  --sans:'Inter',system-ui,-apple-system,Segoe UI,sans-serif;
  --serif:'Source Serif 4',Georgia,serif;
  --display:'Fraunces',Georgia,serif;
  --radio:10px;
  /* alias */
  --azul:var(--ink); --gris:var(--pluma); --linea:var(--filete); --fondo:var(--papel); --panel:var(--carta);
}
*{box-sizing:border-box} html,body{margin:0;padding:0}
body{font-family:var(--sans);color:var(--tinta);background:var(--papel);font-size:15px;line-height:1.5}
h1,h2,h3{margin:0;font-weight:600} button{font-family:inherit}
::selection{background:var(--ink);color:#fff}

/* ---------- Barra superior ---------- */
.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:9px 18px;background:rgba(255,255,255,.82);backdrop-filter:blur(12px) saturate(1.4);-webkit-backdrop-filter:blur(12px) saturate(1.4);border-bottom:1px solid var(--filete)}
.topbar__brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit}
.topbar__escudo{height:38px;width:auto}
.topbar h1{font-family:var(--display);font-weight:500;font-size:16px;color:var(--ink)}
.topbar h1 em{font-style:italic;font-weight:400;color:var(--verde)}
.topbar p{margin:1px 0 0;font-size:10.5px;color:var(--pluma);text-transform:uppercase;letter-spacing:.14em}
.topbar__actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.save-status{font-size:11.5px;color:var(--pluma);margin-right:4px;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.save-status::before{content:"";width:7px;height:7px;border-radius:50%;background:#2d6a2e;flex:none;transition:.3s}
.save-status.saving{color:#b45309}
.save-status.saving::before{background:#d97706;animation:saveDot .9s ease-in-out infinite}
@keyframes saveDot{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.5);opacity:.5}}

/* ---------- Botones ---------- */
.btn{border:0;border-radius:999px;padding:9px 16px;font-size:13px;font-weight:600;cursor:pointer;transition:.18s;white-space:nowrap}
.btn--primary{background:linear-gradient(135deg,#1b2a5e,#2746a8);color:#fff;box-shadow:0 2px 10px rgba(39,70,168,.35)}
.btn--primary:hover{background:linear-gradient(135deg,#22357a,#3056cc);transform:translateY(-1px);box-shadow:0 4px 16px rgba(39,70,168,.45)}
.btn--ghost{background:transparent;color:var(--tinta);border:1px solid var(--filete)}
.btn--ghost:hover{background:#eef1f6;border-color:#c9d0dd}
.btn--add{background:transparent;color:var(--verde);border:1px dashed #b5cdb6;border-radius:8px;width:100%;padding:11px;margin-top:6px}
.btn--add:hover{background:#f0f6f0;border-color:var(--verde)}
.btn--mini{background:var(--carta);border:1px solid var(--filete);color:var(--pluma);border-radius:7px;padding:6px 10px;font-size:12px}
.btn--mini:hover{border-color:var(--ink);color:var(--ink)}
.btn--danger{color:#b3402f} .btn--danger:hover{border-color:#b3402f;color:#b3402f}

.dropdown{position:relative}
.dropdown__menu{position:absolute;right:0;top:calc(100% + 8px);background:var(--carta);border:1px solid var(--filete);border-radius:10px;box-shadow:var(--sombra);padding:6px;min-width:210px;display:none;z-index:60}
.dropdown__menu.open{display:block}
.dropdown__menu button,.dropdown__file{display:block;width:100%;text-align:left;background:none;border:0;border-radius:7px;padding:9px 11px;font-size:13.5px;cursor:pointer;color:var(--tinta)}
.dropdown__menu button:hover,.dropdown__file:hover{background:#eef1f6}

/* ---------- Layout ---------- */
.layout{display:grid;grid-template-columns:minmax(420px,1fr) 1.15fr;height:calc(100vh - 58px)}
.form-pane{overflow-y:auto;padding:18px 20px 90px}
.preview-pane{border-left:1px solid var(--filete);background:#e3e6ec;display:flex;flex-direction:column;overflow:hidden}
.preview-toolbar{padding:8px 16px;font-size:10.5px;color:var(--pluma);background:var(--carta);border-bottom:1px solid var(--filete);display:flex;justify-content:space-between;align-items:center;text-transform:uppercase;letter-spacing:.14em}
.zoom{display:flex;align-items:center;gap:8px} .zoom span{font-size:11px;min-width:38px;text-align:center;letter-spacing:0}
.preview-scroll{overflow:auto;padding:26px;flex:1}

/* ---------- Formulario ---------- */
.card{background:var(--carta);border:1px solid var(--filete);border-radius:var(--radio);padding:20px;margin-bottom:16px;box-shadow:var(--sombra)}
.card h2{font-size:15px;color:var(--tinta);display:flex;align-items:baseline;gap:11px;margin-bottom:14px;padding-bottom:9px;border-bottom:1px solid var(--filete-suave)}
.card h2 small{font-weight:400;color:var(--pluma);font-size:12px;font-family:var(--serif);font-style:italic;letter-spacing:0;text-transform:none}
.card__num{font-family:var(--display);font-weight:400;font-style:italic;font-size:21px;color:var(--verde);background:none;min-width:30px;height:auto;padding:0;display:inline;flex:none;line-height:1}
.grid{display:grid;gap:11px}.grid-2{grid-template-columns:1fr 1fr}
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:11px}
.field>span{font-size:10.5px;font-weight:600;color:var(--pluma);text-transform:uppercase;letter-spacing:.1em}
input,select,textarea{font-family:inherit;font-size:14px;color:var(--tinta);border:1px solid var(--filete);border-radius:8px;padding:9px 11px;background:#fff;width:100%;transition:border-color .15s, box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(27,42,94,.09)}
textarea{resize:vertical;line-height:1.5}
.hint{font-size:12px;color:var(--pluma);margin:0 0 8px}
.switch{display:flex;align-items:center;gap:9px;font-size:13.5px;cursor:pointer}
.switch input{width:auto;accent-color:var(--verde)}
.color-row{display:flex;align-items:center;gap:8px}
.color-row input[type=color]{width:46px;height:38px;padding:2px;cursor:pointer}
.color-name{font-size:12px;color:var(--pluma);font-style:italic;font-family:var(--serif)}
.img-field{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.img-name{font-size:12px;color:var(--pluma)}

.repeater{display:flex;flex-direction:column;gap:8px}
.rep-row{display:flex;gap:8px;align-items:flex-start}
.rep-row .rep-handle{color:var(--verde);font-family:var(--display);font-style:italic;font-size:15px;padding-top:9px;width:20px;text-align:center;flex:none}
.rep-row textarea{flex:1}
.rep-empty{font-size:13px;color:var(--pluma);font-style:italic;font-family:var(--serif)}

/* epígrafes */
.epi{border:1px solid var(--filete);border-radius:10px;padding:14px;margin-bottom:12px;background:#fafbfd}
.epi__head{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.epi__num{min-width:30px;height:30px;border-radius:8px;background:var(--asig);color:#fff;display:grid;place-items:center;font-family:var(--display);font-weight:500;flex:none}
.epi__head input{flex:1;font-weight:600}
.epi__tools{display:flex;gap:4px}
.blocks{display:flex;flex-direction:column;gap:8px;margin:6px 0 6px 38px;border-left:2px solid var(--filete);padding-left:12px}
.blk{border:1px solid var(--filete);border-radius:8px;padding:9px 10px;background:#fff;position:relative}
.blk__bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.blk__type{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--asig)}
.blk__tools{display:flex;gap:3px}
.blk__tools button{border:1px solid var(--filete);background:#fff;border-radius:6px;width:26px;height:26px;font-size:12px;cursor:pointer;color:var(--pluma)}
.blk__tools button:hover{border-color:var(--ink);color:var(--ink)}
.blk textarea,.blk input{font-size:13px}
.blk .grid-2{gap:8px}
.block-add{display:flex;flex-wrap:wrap;gap:6px;margin-left:38px}
.block-add button{background:transparent;border:1px solid var(--filete);border-radius:999px;padding:5px 12px;font-size:11.5px;color:var(--ink);cursor:pointer;transition:.15s}
.block-add button:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.blk-img-prev{max-height:54px;border-radius:5px;border:1px solid var(--filete);margin-top:6px}
/* editor de tabla */
.grid-tabla{display:grid;gap:4px;align-items:center}
.grid-tabla input{font-size:12.5px;padding:6px 7px}
.grid-tabla input.cab{font-weight:700;background:#f3f5fb;border-color:#cfd6e6}
.grid-tabla .tbl-x{border:1px solid var(--filete);background:#fff;color:var(--pluma);border-radius:6px;width:24px;height:30px;cursor:pointer;font-size:11px}
.grid-tabla .tbl-x:hover{border-color:#b3402f;color:#b3402f}
.tabla-tools{display:flex;gap:6px;margin-top:7px}
/* editor de vocabulario */
.voc-edit{display:flex;flex-direction:column;gap:6px}
.voc-row{display:flex;gap:6px;align-items:center}
.voc-row .voc-t{max-width:34%;font-weight:600}
/* selector de ejemplos */
.ej-pick{position:fixed;inset:0;background:rgba(20,25,40,.45);backdrop-filter:blur(3px);z-index:200;display:flex;align-items:center;justify-content:center;padding:20px}
.ej-pick__panel{background:#fff;border:1px solid var(--filete);border-radius:14px;width:min(460px,100%);box-shadow:0 24px 70px rgba(20,25,40,.35);padding:20px 22px;animation:bibIn .22s cubic-bezier(.22,.8,.3,1)}
@keyframes bibIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.ej-pick__head{display:flex;justify-content:space-between;align-items:center}
.ej-pick__head h2{font-family:var(--display);font-weight:500;font-size:18px;color:var(--ink);margin:0}
.ej-pick .bib-x{border:1px solid var(--filete);background:#fff;border-radius:8px;width:30px;height:30px;cursor:pointer;color:var(--pluma)}
.ej-pick .bib-x:hover{border-color:var(--ink);color:var(--ink)}
.ej-pick__nota{font-size:12px;color:var(--pluma);margin:6px 0 14px}
.ej-pick__list{display:flex;flex-direction:column;gap:8px}
.ej-card{display:flex;flex-direction:column;gap:2px;text-align:left;background:#fff;border:1px solid var(--filete);border-radius:10px;padding:13px 15px;cursor:pointer;transition:.15s;font-family:inherit}
.ej-card:hover{border-color:var(--ink);background:#f6f8fc;transform:translateY(-1px)}
.ej-card__name{font-family:var(--display);font-weight:600;font-size:15px;color:var(--tinta)}
.ej-card__sub{font-size:12px;color:var(--pluma)}

/* ============================================================
   HOJAS A4 (paginación real)
   ============================================================ */
.documento-wrap{display:flex;flex-direction:column;align-items:center;gap:24px;transform-origin:top center}
.hoja{
  width:210mm;height:297mm;flex:none;background:#fff;
  box-shadow:0 2px 6px rgba(20,20,30,.10),0 18px 44px rgba(20,20,30,.18);
  padding:14mm 18mm 16mm;position:relative;font-family:var(--serif);color:#26282e;line-height:1.55;
  display:flex;flex-direction:column;overflow:hidden;
}
.hoja__body{flex:1;min-height:0;overflow:hidden}
.hoja__num{position:absolute;bottom:7mm;left:0;right:0;text-align:center;font-family:var(--sans);font-size:8.5pt;color:#a8a294;letter-spacing:.1em}
.mi{display:flow-root}

/* pulso al editar la portada: el cambio se ve en tiempo real */
.hoja--pulso{animation:hojaPulso .8s cubic-bezier(.22,.8,.3,1)}
@keyframes hojaPulso{
  0%{box-shadow:0 0 0 3px var(--asig),0 12px 40px color-mix(in srgb,var(--asig) 45%,transparent)}
  100%{box-shadow:0 2px 6px rgba(20,20,30,.10),0 18px 44px rgba(20,20,30,.18)}
}
/* resaltado del bloque que se está editando, dentro de la página */
.mi--live{animation:miLive 1.4s cubic-bezier(.22,.8,.3,1)}
@keyframes miLive{
  0%{background:color-mix(in srgb,var(--asig) 11%,transparent);box-shadow:inset 3px 0 0 var(--asig)}
  100%{background:transparent;box-shadow:inset 3px 0 0 transparent}
}
/* entrada animada de páginas cuando cambia su número */
.wrap-anim .hoja{animation:hojaIn .5s cubic-bezier(.22,.8,.3,1) both}
.wrap-anim .hoja:nth-child(2){animation-delay:.06s}
.wrap-anim .hoja:nth-child(3){animation-delay:.12s}
.wrap-anim .hoja:nth-child(4){animation-delay:.18s}
.wrap-anim .hoja:nth-child(n+5){animation-delay:.24s}
@keyframes hojaIn{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.wrap-anim .hoja,.mi--live,.hoja--pulso{animation:none}}

/* medidor fuera de pantalla */
#measurer{position:absolute;left:-9999px;top:0;visibility:hidden;pointer-events:none}
#measurer .hoja{height:auto;box-shadow:none}
#measurer .hoja__body{overflow:visible}

/* cabecera interior: un solo escudo + filete con guiño de color */
.hoja__head{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e6e2d6;padding-bottom:6px;margin-bottom:12px;position:relative;flex:none}
.hoja__head::after{content:"";position:absolute;left:0;bottom:-1px;width:38px;height:2px;background:var(--asig)}
.hoja__head img{height:24px;width:auto}
.hoja__head .he-asig{font-family:var(--sans);font-size:8pt;font-weight:600;color:var(--asig);text-transform:uppercase;letter-spacing:.22em}

/* ---- A · PORTADA ---- */
.portada{justify-content:flex-start;text-align:center}
.portada__escudo{height:60px;width:auto;align-self:center;flex:none;margin:4mm auto 5mm}
.portada__bloque{display:inline-block;font-family:var(--sans);font-size:10pt;font-weight:600;color:#fff;background:var(--asig);padding:6px 20px;border-radius:999px;letter-spacing:.12em}
.portada__nivel{font-family:var(--sans);font-size:10.5pt;color:var(--pluma);margin:12px 0 0;text-transform:uppercase;letter-spacing:.3em}
.portada__img{width:112mm;height:112mm;border-radius:50%;object-fit:cover;margin:8mm auto 2mm;display:block;border:1.2mm solid var(--asig);outline:1px solid #e6e2d6;outline-offset:3mm}
.portada__img--ph{width:112mm;height:112mm;border-radius:50%;margin:8mm auto 2mm;display:grid;place-items:center;background:#f6f4ee;border:2px dashed #d4cfc0;color:#b3ada0;font-family:var(--serif);font-style:italic;font-size:12pt}
/* duotono editorial: la foto se tiñe con el color de la asignatura */
.portada__img.duo{position:relative;overflow:hidden;background:var(--asig-d);padding:0}
.portada__img.duo img{width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(1) contrast(1.05);mix-blend-mode:screen}
.portada__img.duo::after{content:"";position:absolute;inset:0;
  background:color-mix(in srgb,var(--asig) 24%, #fff);mix-blend-mode:multiply}
.portada__titulo{font-family:var(--display);font-size:46pt;font-weight:600;color:var(--asig);line-height:1.02;margin:5mm 0 2mm;letter-spacing:-.015em}
.portada__tema{font-family:var(--sans);font-size:10.5pt;font-weight:600;color:var(--pluma);letter-spacing:.4em}
.portada__asig{margin-top:auto;padding-top:4mm;font-family:var(--sans);font-size:13pt;font-weight:600;color:var(--tinta);text-transform:uppercase;letter-spacing:.35em;border-top:1px solid #e6e2d6}
.portada__nombre{display:flex;gap:8px;align-items:baseline;width:118mm;margin:7mm auto 0;font-family:var(--sans);font-size:11.5pt;color:var(--tinta)}
.portada__nombre span{font-weight:600;color:var(--asig)}
.portada__nombre i{flex:1;border-bottom:1.5px solid #c4cbd4;transform:translateY(-2px)}

/* ---- Variantes de portada por nivel educativo ----
   La base (.portada) es el estilo de Secundaria. */

/* Primaria · primeros cursos: grande, redondo, amable */
.portada--inicial .portada__titulo{font-size:54pt;letter-spacing:0;font-weight:700}
.portada--inicial .portada__img,
.portada--inicial .portada__img--ph{width:104mm;height:104mm;border-width:2.2mm;outline:2.5px dotted var(--asig);outline-offset:4mm}
.portada--inicial .portada__bloque{font-size:11pt;padding:8px 24px}
.portada--inicial .portada__nivel{letter-spacing:.2em;font-size:11.5pt}
.portada--inicial .portada__tema{letter-spacing:.3em}
.portada--inicial .portada__nombre{font-size:13pt;width:124mm}
.portada--inicial .portada__nombre i{border-bottom-width:2px;border-color:#aab3c0}
.portada--inicial .portada__asig{letter-spacing:.25em;font-size:14pt}

/* Primaria · cursos superiores: amable pero más contenido */
.portada--media .portada__titulo{font-size:48pt;letter-spacing:-.005em}
.portada--media .portada__img,
.portada--media .portada__img--ph{width:108mm;height:108mm;border-width:1.6mm;outline:1px solid #e6e2d6;outline-offset:3.5mm}

/* Bachillerato · IB · FP: sobriedad editorial, imagen apaisada */
.portada--superior{text-align:left}
.portada--superior .portada__escudo{margin:4mm 0 6mm;height:52px}
.portada--superior .portada__bloque{background:none;color:var(--asig);border:1px solid var(--asig);border-radius:0;padding:6px 14px;letter-spacing:.25em;font-size:9pt}
.portada--superior .portada__nivel{text-align:left;margin-top:10px;letter-spacing:.35em;font-size:9.5pt}
.portada--superior .portada__img,
.portada--superior .portada__img--ph{width:100%;height:84mm;border-radius:2px;margin:10mm auto 0;border:none;outline:none;border-bottom:1.5mm solid var(--asig)}
.portada--superior .portada__img--ph{display:grid}
.portada--superior .portada__titulo{font-size:42pt;text-align:left;margin-top:8mm;letter-spacing:-.02em}
.portada--superior .portada__tema{text-align:left;letter-spacing:.45em;color:var(--asig)}
.portada--superior .portada__asig{text-align:left;letter-spacing:.4em;font-size:11pt;display:flex;justify-content:space-between;align-items:baseline}

/* ---- B · ÍNDICE Y ORIENTACIONES ---- */
.sec-title{font-family:var(--display);font-weight:500;font-size:17pt;color:var(--tinta);margin:0 0 12px;display:flex;align-items:baseline;gap:12px}
.sec-title::after{content:"";flex:1;height:1px;background:#e0dccf;align-self:center}
.indice{font-family:var(--serif);font-size:11.5pt;margin-bottom:18px}
.indice ul{padding:0;margin:0}
.indice li{list-style:none;display:flex;align-items:baseline;gap:9px;margin:6px 0}
.indice .ix-sub{margin-left:24px;font-size:10.5pt;color:#4c4f56}
.indice .ix-num{font-family:var(--display);font-style:italic;font-weight:500;color:var(--asig);min-width:30px}
.indice .ix-dots{flex:1;border-bottom:1px dotted #cfc9ba;transform:translateY(-3px)}
.orient{border-top:2px solid var(--asig);background:#faf9f4;padding:14px 18px 12px}
.orient h3{font-family:var(--sans);font-size:9pt;color:var(--asig);text-transform:uppercase;letter-spacing:.2em;margin-bottom:8px}
.orient ul{margin:0;padding-left:17px} .orient li{margin-bottom:6px;font-size:10.5pt}

/* ---- C/D/E · EPÍGRAFES ---- */
.epi-apertura{display:flex;align-items:baseline;gap:15px;margin:1mm 0 5mm;padding-bottom:9px;border-bottom:2px solid var(--asig)}
.epi-apertura .ea-num{font-family:var(--display);font-style:italic;font-size:42pt;font-weight:500;color:var(--asig);line-height:.9}
.epi-apertura .ea-tit{font-family:var(--display);font-size:17.5pt;font-weight:500;color:var(--tinta);letter-spacing:-.01em;line-height:1.18}
.subepi{font-family:var(--display);font-size:12.5pt;font-weight:600;color:var(--tinta);margin:13px 0 5px}
.subepi .se-num{color:var(--asig);font-style:italic;font-weight:500;margin-right:2px}
.cuerpo p{margin:0 0 8px;text-align:justify;font-size:10.8pt;hyphens:auto}
.cuerpo ul{margin:0 0 8px;padding-left:20px;font-size:10.8pt} .cuerpo li{margin-bottom:3px}
.destacado{border-top:2px solid var(--asig);border-bottom:1px solid #e6e2d6;padding:9px 2px 8px;margin:11px 0;background:none}
.destacado h4{font-family:var(--sans);font-size:8.5pt;text-transform:uppercase;letter-spacing:.2em;color:var(--asig);margin:0 0 4px}
.destacado p{margin:0;font-size:10.5pt;font-style:italic;color:#33363d}
figure.ilus{margin:10px 0;text-align:center}
figure.ilus img{max-width:100%;border-radius:4px}
figure.ilus.tam-pequena img{max-width:55%}
figure.ilus.tam-media img{max-width:78%}
figure.ilus.tam-completa img{max-width:100%}
figure.ilus figcaption{font-family:var(--sans);font-size:8.5pt;color:var(--pluma);margin-top:6px}
figure.ilus figcaption::before{content:"— "}

/* ---- Ejercicio: enunciado numerado + espacio de respuesta ---- */
.ejercicio{margin:10px 0 12px;break-inside:avoid}
.ej-cab{display:flex;gap:9px;align-items:baseline}
.ej-num{flex:none;width:22px;height:22px;border-radius:50%;background:var(--asig);color:#fff;
  font-family:var(--sans);font-weight:700;font-size:10.5pt;display:grid;place-items:center;transform:translateY(2px)}
.ej-enun{flex:1;font-size:10.8pt;line-height:1.45}
.ej-lineas{margin:7px 0 0 31px;display:flex;flex-direction:column;gap:13px}
.ej-lineas span{display:block;border-bottom:1px solid #b9b3a2}
.ej-cuadro{margin:8px 0 0 31px;border:1px solid #cfc9ba;border-radius:4px}
.ej-cuadricula{margin:8px 0 0 31px;border:1px solid #cfc9ba;border-radius:4px;
  background-image:linear-gradient(#e6e1d3 1px,transparent 1px),linear-gradient(90deg,#e6e1d3 1px,transparent 1px);
  background-size:5mm 5mm}

/* ---- Tabla de datos ---- */
table.doc-tabla{width:100%;border-collapse:collapse;margin:10px 0;font-family:var(--sans);font-size:10pt;break-inside:avoid}
table.doc-tabla th,table.doc-tabla td{border:1px solid #d8d3c4;padding:6px 9px;text-align:left;vertical-align:top}
table.doc-tabla th{background:color-mix(in srgb,var(--asig) 12%,#fff);color:var(--asig-d);font-weight:700;
  border-bottom:2px solid var(--asig)}
table.doc-tabla tr:nth-child(even) td{background:#faf9f4}

/* ---- Vocabulario / glosario ---- */
dl.vocab{margin:10px 0;display:grid;gap:7px}
dl.vocab .voc-it{display:flex;gap:10px;align-items:baseline;border-bottom:1px dotted #d8d3c4;padding-bottom:6px}
dl.vocab dt{flex:none;min-width:26%;font-family:var(--display);font-weight:600;font-size:11pt;color:var(--asig-d)}
dl.vocab dd{margin:0;flex:1;font-size:10.5pt;line-height:1.4}

/* ---- F · CIERRE ---- */
.cierre p{font-size:11pt;text-align:justify}

/* ---- G · CONTRAPORTADA ---- */
.contraportada{justify-content:center;text-align:center}
.contraportada .cp-tipo{font-family:var(--sans);font-size:9.5pt;font-weight:600;color:var(--asig);border:1px solid var(--asig);display:inline-block;padding:6px 20px;border-radius:999px;letter-spacing:.18em;text-transform:uppercase;margin:0 auto 18px;background:none}
.contraportada .cp-cont{font-family:var(--serif);font-size:11pt;text-align:left;max-width:148mm;margin:0 auto;white-space:pre-wrap;line-height:1.7}
.contraportada .cp-escudo{height:42px;width:auto;align-self:center;flex:none;margin:30px auto 0;opacity:.9}

.doc-placeholder{background:var(--carta);border:1px solid var(--filete);border-radius:10px;padding:64px 32px;text-align:center;color:var(--pluma);font-family:var(--serif);max-width:520px}
.doc-placeholder h3{font-family:var(--display);font-weight:500;font-size:20px;color:var(--ink);margin-bottom:10px}
.doc-placeholder p{font-style:italic}

/* ============================================================
   Modo presentación (pantalla completa)
   ============================================================ */
.pres{position:fixed;inset:0;z-index:300;
  background:radial-gradient(120% 90% at 50% 18%, #18261d 0%, #0b120e 70%, #070b08 100%);
  overflow:hidden;animation:presIn .35s ease both}
@keyframes presIn{from{opacity:0}to{opacity:1}}
.pres-stage{position:absolute;inset:0;overflow:hidden}
.pres-track{display:flex;height:100%;transition:transform .55s cubic-bezier(.22,.85,.28,1)}
.pres-slide{min-width:100vw;height:100vh;display:flex;align-items:center;justify-content:center}
.pres-slide .hoja{transform:scale(var(--ps,0.8));transform-origin:center;flex:none;
  box-shadow:0 30px 90px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.04);border-radius:2px}
/* barra superior translúcida que se desvanece */
.pres-bar{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:16px;
  padding:16px 22px;color:#e9efe9;z-index:5;
  background:linear-gradient(to bottom, rgba(0,0,0,.45), transparent);
  opacity:.25;transition:opacity .3s}
.pres:hover .pres-bar{opacity:1}
.pres-tit{font-family:var(--display);font-weight:500;font-size:16px;flex:1;letter-spacing:.01em}
.pres-count{font-family:var(--sans);font-size:13px;color:#aebcae;letter-spacing:.06em}
.pres-count b{color:#fff;font-size:15px;font-variant-numeric:tabular-nums}
.pres-acts{display:flex;gap:8px}
.pres-ic{width:38px;height:38px;border-radius:9px;border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);color:#e9efe9;font-size:15px;cursor:pointer;transition:.15s}
.pres-ic:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.4)}
/* flechas laterales */
.pres-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:60px;height:90px;border:0;border-radius:12px;cursor:pointer;
  background:rgba(255,255,255,.05);color:#e9efe9;font-size:38px;line-height:1;
  opacity:0;transition:opacity .3s, background .15s}
.pres:hover .pres-nav{opacity:.55}
.pres-nav:hover{opacity:1 !important;background:rgba(255,255,255,.16)}
.pres-prev{left:18px} .pres-next{right:18px}
.pres-nav.off{opacity:0 !important;pointer-events:none}
/* puntos de página */
.pres-dots{position:absolute;bottom:18px;left:0;right:0;display:flex;justify-content:center;gap:7px;z-index:5;
  opacity:.3;transition:opacity .3s}
.pres:hover .pres-dots{opacity:1}
.pres-dots span{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.3);cursor:pointer;transition:.2s}
.pres-dots span.on{background:var(--asig,#7cc97d);transform:scale(1.35)}
@media (max-width:760px){ .pres-nav{width:44px;height:70px;font-size:28px} .pres-tit{font-size:13px} }

/* ---------- Print: WYSIWYG exacto ---------- */
.print-only{display:none}
@media print{
  .no-print,#measurer{display:none !important}
  .layout{display:none}
  body{background:#fff;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .print-only{display:block}
  .documento-wrap{display:block;transform:none !important;gap:0}
  .hoja{box-shadow:none;margin:0;break-after:page;page-break-after:always}
  .hoja:last-child{break-after:auto;page-break-after:auto}
  @page{size:A4;margin:0}
}

/* ---------- Modo folleto (aviso · Fase 1: sólo informa, no cambia la impresión) ---------- */
.pv-tools{display:flex;align-items:center;gap:12px}
.folleto-sw{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;color:var(--pluma);cursor:pointer;
  border:1px solid var(--filete);border-radius:999px;padding:4px 10px;user-select:none;letter-spacing:.06em}
.folleto-sw input{margin:0}
.folleto-sw:hover{border-color:var(--ink);color:var(--ink)}
.folleto-aviso{font-size:12px;line-height:1.45;padding:8px 16px;text-transform:none;letter-spacing:0;
  background:#fff7e6;border-bottom:1px solid #f0e3c4;color:#7a5b12}
.folleto-aviso b{color:#5b430c}
.folleto-aviso--ok{background:#eef7ef;border-bottom-color:#cfe6d0;color:#2e6a3a}
.folleto-aviso--ok b{color:#1f5128}

/* ---------- Responsive ---------- */
@media (max-width:1050px){
  .layout{grid-template-columns:1fr;height:auto}
  .preview-pane{border-left:0;border-top:1px solid var(--filete);height:85vh}
  .form-pane{height:auto}
}
