/* ============================================================
   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;
  /* Texto secundario. Estaba en #6b7385: pasa el mínimo sobre blanco puro
     (4,74:1) pero se cae en cuanto el fondo va teñido —chips sobre --papel a
     4,36, casillas marcadas a 4,25—. Un punto más de tinta y aguanta en todas
     las superficies de la aplicación (5,0-5,7:1). */
  --pluma:#5f6779;
  --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;
  --btn-h:36px;               /* altura común de los botones de la barra */
  --label:#5b6270;            /* etiquetas de formulario (algo más de tinta que --pluma) */
  --topbar-h:58px;            /* la mide `shared.js`; esto es solo el arranque */
  /* 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)}
/* Izquierda: identidad del documento + si está guardado (ver styles.css). */
.topbar__left{display:flex;align-items:center;gap:14px;min-width:0}
.topbar__brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit}
.topbar__escudo{height:38px;width:auto}
/* Colores de la marca (la alondra); el bloque de modo oscuro los aclara. */
:root{ --marca-a:#1b2a5e; --marca-b:#2d6a2e; }
.topbar__ave{width:46px;height:auto;flex:none;display:block}
.topbar h1, .topbar__marca{font-family:var(--display);font-weight:500;font-size:16px;color:var(--ink);white-space:nowrap}
/* Sin `nowrap` el nombre se partía en «Alauda / Studio» al estrecharse. */
.topbar h1 em, .topbar__marca em{font-style:italic;font-weight:400;color:var(--verde)}
/* Una sola línea, y fuera por debajo de 1300 px (ver la nota en styles.css). */
.topbar p{margin:1px 0 0;font-size:10.5px;color:var(--pluma);text-transform:uppercase;letter-spacing:.14em;white-space:nowrap}
/* (la regla que lo retira vive en «Responsive», al final del archivo) */
/* 10 px de aire entre botones (ver la nota en styles.css). */
.topbar__actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.save-status{font-size:11.5px;color:var(--pluma);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}
/* Estado de fallo: el almacenamiento está lleno y NO se está guardando nada. */
.save-status.fallo{color:#b42318;font-weight:600;cursor:help}
.save-status.fallo::before{background:#d92d20;animation:saveDot .9s ease-in-out infinite}
@keyframes saveDot{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.5);opacity:.5}}
/* filete de marca (azul→verde) bajo la barra: da identidad al editor */
.topbar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,var(--ink),var(--verde));opacity:.85}
/* aviso de "mejor en ordenador" solo en móvil */
.solo-movil-aviso{display:none}
@media (max-width:760px){ .solo-movil-aviso{display:block;background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;border-radius:10px;padding:11px 14px;font-size:13px;line-height:1.5;margin:0 0 14px} }

/* ---------- Botones ---------- */
/* Altura única para la barra (ver la nota larga en styles.css): botones con
   borde, sin borde y enlaces medían distinto y la fila quedaba descolocada. */
/* La separación icono-rótulo la pone `gap` (ver la nota en styles.css). */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:var(--btn-h);box-sizing:border-box;
  border:0;border-radius:999px;padding:8px 16px;font-size:13px;font-weight:600;
  line-height:1.15;cursor:pointer;transition:.18s;white-space:nowrap;text-decoration:none}
/* Rótulo largo / corto del mismo botón (ver la nota en styles.css). */
.btn-corta{display:none}
.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)}
/* variante "reutilizar": misma forma, tono neutro (acción secundaria) */
.btn--reusar{color:var(--pluma);border-color:var(--filete)}
.btn--reusar:hover{background:#f2f4f9;border-color:var(--ink);color:var(--ink)}
.reu-foot{display:flex;justify-content:space-between;gap:8px;margin-top:12px}
/* Los «mini» van en filas densas del formulario: se quedan a su tamaño. */
.btn--mini{background:var(--carta);border:1px solid var(--filete);color:var(--pluma);border-radius:7px;padding:6px 10px;font-size:12px;min-height:28px}
.btn--mini:hover{border-color:var(--ink);color:var(--ink)}
/* Las ✕ de borrar se quedaban en 2,93:1 sobre la tarjeta oscura. */
.btn--danger{color:var(--peligro,#b3402f)} .btn--danger:hover{border-color:var(--peligro,#b3402f);color:var(--peligro,#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__menu a,.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);text-decoration:none}
.dropdown__menu button:hover,.dropdown__menu a:hover,.dropdown__file:hover{background:#eef1f6}

/* ---------- Layout ---------- */
/* Alto real de la barra, medido por `shared.js` (aquí había un `58px` fijo). */
.layout{display:grid;grid-template-columns:minmax(420px,1fr) 1.15fr;height:calc(100vh - var(--topbar-h))}
.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}
/* Hueco abajo para la pastilla del asistente, que antes se posaba sobre el folio. */
.preview-scroll{overflow:auto;padding:26px 26px 88px;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}
/* Dos columnas si caben, una si no: por el ancho real del panel, no por el de
   la ventana (ver la nota larga en styles.css). */
.grid-2{grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:11px}
/* Etiquetas un punto más grandes y con más tinta (ver la nota en styles.css). */
.field>span{font-size:11.5px;font-weight:600;color:var(--label);text-transform:uppercase;letter-spacing:.08em}
/* El control se pega abajo: una etiqueta de dos líneas no descuelga su campo. */
.field>span:first-child + *{margin-top:auto}
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:flex-start;align-items:center;gap:6px;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;margin-left:auto}
.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)}
/* arrastrar para reordenar */
.drag-handle{cursor:grab;color:var(--pluma);font-size:14px;line-height:1;user-select:none;flex:none;opacity:.55;transition:opacity .15s,color .15s;touch-action:none}
.drag-handle:hover{opacity:1;color:var(--ink)}
.drag-handle:active{cursor:grabbing}
.epi__grip{padding:0 2px}
.epi.dragging,.blk.dragging{opacity:.4}
.epi.drop-before,.blk.drop-before{box-shadow:0 -3px 0 -1px var(--asig)}
.epi.drop-after,.blk.drop-after{box-shadow:0 3px 0 -1px var(--asig)}
.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}
/* «Pegar contenido» se separa del resto: no añade un bloque, añade MUCHOS.
   Va en verde de marca y algo destacado porque es el atajo que más tiempo
   ahorra al preparar un tema desde material que ya tienes escrito. */
.block-add__pegar{margin-left:auto;border-color:#b5cdb6 !important;color:var(--verde) !important;font-weight:600}
.block-add__pegar:hover{background:var(--verde) !important;border-color:var(--verde) !important;color:#fff !important}

/* Diálogo de pegar contenido */
.peg-panel{width:min(620px,100%)}
.peg-body{padding:14px 18px 4px}
.peg-body textarea{width:100%;font-family:var(--sans);font-size:13.5px;line-height:1.55;color:var(--tinta);
  border:1px solid var(--filete);border-radius:10px;padding:11px 13px;background:#fff;resize:vertical}
.peg-body textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(27,42,94,.09)}
.peg-info{margin:9px 2px 0;font-size:12px;color:var(--pluma);font-family:var(--serif);font-style:italic;line-height:1.5}
.peg-foot{display:flex;gap:10px;justify-content:flex-end}
@media (prefers-color-scheme: dark){
  .peg-body textarea{background:#12141a;border-color:#2c313c;color:#e7e9ef}
  .peg-body textarea:focus{border-color:#8fb3dd;box-shadow:0 0 0 3px rgba(143,179,221,.22)}
  .block-add__pegar{border-color:#3a5a3c !important;color:#6cc06f !important}
  .block-add__pegar:hover{background:#2d6a2e !important;border-color:#2d6a2e !important;color:#fff !important}
}
.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}
/* ---- Solución (modo solucionario · versión del profesor) ---- */
.ej-solucion{margin:7px 0 0 31px;border-left:3px solid var(--asig);
  background:color-mix(in srgb,var(--asig) 7%,#fff);border-radius:0 6px 6px 0;
  padding:7px 11px;font-family:var(--serif);font-size:10.5pt;color:#33363d;line-height:1.45}
.ej-solucion__lbl{display:block;font-family:var(--sans);font-size:7.5pt;font-weight:700;
  text-transform:uppercase;letter-spacing:.16em;color:var(--asig);margin-bottom:3px}
/* marca de cada página cuando se muestran soluciones (también al imprimir) */
.con-soluciones .hoja{position:relative}
.con-soluciones .hoja::before{content:"🔑 SOLUCIONARIO · documento del profesor";
  position:absolute;top:4mm;left:50%;transform:translateX(-50%);z-index:3;
  font-family:var(--sans);font-size:7pt;font-weight:700;letter-spacing:.16em;white-space:nowrap;
  color:#b45309;background:#fff7ed;border:1px solid #fed7aa;border-radius:999px;padding:2px 12px}

/* ---- Autoevaluación del alumno ---- */
.autoeval{width:100%;border-collapse:collapse;margin:8px 0 4px;font-family:var(--sans);font-size:10.5pt}
.autoeval thead th{font-size:8.5pt;text-transform:uppercase;letter-spacing:.06em;color:var(--asig);font-weight:700;
  padding:6px 6px;border-bottom:2px solid var(--asig);text-align:center;white-space:nowrap}
.autoeval thead th:first-child{text-align:left}
.autoeval td{border-bottom:1px solid #e6e2d6;padding:9px 6px;vertical-align:middle}
.autoeval .ae-q{font-family:var(--serif);font-size:11pt;color:#26282e}
.autoeval .ae-mark{width:74px;text-align:center}
.autoeval .ae-mark::before{content:"";display:inline-block;width:16px;height:16px;border:1.5px solid #b9b3a2;border-radius:4px}
.autoeval-intro{font-family:var(--serif);font-style:italic;color:var(--pluma);font-size:10pt;margin:0 0 4px}
.autoeval-libre{margin-top:13px;font-family:var(--sans);font-size:10pt}
.autoeval-libre span{font-weight:700;color:var(--asig)}
.autoeval-libre i{display:block;border-bottom:1px solid #b9b3a2;height:0;margin-top:13px}

/* ---- Recurso / enlace (vídeo, simulación, web) ---- */
.recurso{display:flex;gap:11px;align-items:center;text-decoration:none;color:inherit;break-inside:avoid;
  border:1px solid #dde3e9;border-left:3px solid var(--asig);border-radius:0 8px 8px 0;
  padding:9px 13px;margin:10px 0;background:color-mix(in srgb,var(--asig) 5%,#fff)}
.recurso__ic{font-size:15pt;flex:none;line-height:1}
.recurso__body{display:flex;flex-direction:column;min-width:0;gap:1px}
.recurso__tit{font-family:var(--sans);font-weight:600;font-size:10.5pt;color:var(--asig-d)}
.recurso__url{font-family:var(--sans);font-size:8.5pt;color:var(--pluma);word-break:break-all}

/* ============================================================
   Modo lectura accesible (dislexia / baja visión)
   La clase la pone el JS en <body>, así afecta tanto al documento
   como al medidor (#measurer) → la paginación cuenta la letra grande.
   Solo toca el texto de lectura de las hojas A4; el resto intacto.
   ============================================================ */
body.lectura-facil .hoja{--serif:'Atkinson Hyperlegible','Inter',system-ui,sans-serif}
body.lectura-facil .cuerpo p,
body.lectura-facil .cuerpo ul,
body.lectura-facil .cuerpo li,
body.lectura-facil .ej-enun,
body.lectura-facil .destacado p,
body.lectura-facil .cierre p,
body.lectura-facil .indice,
body.lectura-facil dl.vocab dd,
body.lectura-facil .autoeval .ae-q,
body.lectura-facil .ej-solucion{
  font-size:12pt;line-height:1.85;letter-spacing:.012em;word-spacing:.04em;
  text-align:left;hyphens:none;-webkit-hyphens:none}
body.lectura-facil .cuerpo li{margin-bottom:6px}

/* ---- 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}
/* Colofón: quién ha compuesto el cuadernillo. Debajo del escudo del colegio y
   claramente por detrás de él en jerarquía — es una firma, no un anuncio. */
.contraportada .cp-sello{display:flex;align-items:center;justify-content:center;gap:7px;margin:14px auto 0;
  font-family:var(--sans);font-size:7.5pt;letter-spacing:.2em;text-transform:uppercase;color:var(--pluma);opacity:.75}
.contraportada .cp-sello img{width:30px;height:auto;display:block}

.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}
/* Interruptor "Folleto": toggle limpio con estado on/off claro */
.folleto-sw{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:600;color:var(--pluma);cursor:pointer;
  border:1px solid var(--filete);border-radius:999px;padding:4px 11px 4px 7px;user-select:none;letter-spacing:.01em;
  background:var(--carta);transition:.15s;white-space:nowrap;text-transform:none}
.folleto-sw:hover{border-color:var(--ink);color:var(--ink)}
.folleto-sw:focus-within{box-shadow:0 0 0 3px rgba(45,106,46,.18)}
.folleto-sw input{position:absolute;opacity:0;width:0;height:0;margin:0;pointer-events:none}
.folleto-sw__sw{position:relative;width:30px;height:17px;border-radius:999px;background:#cfd6e2;flex:none;transition:.2s}
.folleto-sw__sw::after{content:"";position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;
  background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.28);transition:.2s}
.folleto-sw__tx{transition:color .15s}
/* estado encendido: la clase .is-on (la pone el JS) es la fuente fiable;
   #folletoModo:checked ~ … queda como refuerzo para navegadores que lo reevalúen */
.folleto-sw.is-on .folleto-sw__sw,#folletoModo:checked ~ .folleto-sw__sw{background:var(--verde)}
.folleto-sw.is-on .folleto-sw__sw::after,#folletoModo:checked ~ .folleto-sw__sw::after{left:15px}
.folleto-sw.is-on .folleto-sw__tx,#folletoModo:checked ~ .folleto-sw__tx{color:var(--verde)}
/* Interruptor "Soluciones" (versión del profesor): mismo patrón, acento ámbar */
.sol-sw{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:600;color:var(--pluma);cursor:pointer;
  border:1px solid var(--filete);border-radius:999px;padding:4px 11px 4px 7px;user-select:none;letter-spacing:.01em;
  background:var(--carta);transition:.15s;white-space:nowrap;text-transform:none}
.sol-sw:hover{border-color:#b45309;color:#b45309}
.sol-sw:focus-within{box-shadow:0 0 0 3px rgba(180,83,9,.18)}
.sol-sw input{position:absolute;opacity:0;width:0;height:0;margin:0;pointer-events:none}
.sol-sw__sw{position:relative;width:30px;height:17px;border-radius:999px;background:#cfd6e2;flex:none;transition:.2s}
.sol-sw__sw::after{content:"";position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;
  background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.28);transition:.2s}
.sol-sw__tx{transition:color .15s}
.sol-sw.is-on .sol-sw__sw,#solucionesModo:checked ~ .sol-sw__sw{background:#c2700c}
.sol-sw.is-on .sol-sw__sw::after,#solucionesModo:checked ~ .sol-sw__sw::after{left:15px}
.sol-sw.is-on .sol-sw__tx,#solucionesModo:checked ~ .sol-sw__tx{color:#b45309}
/* campo de solución en el editor del ejercicio */
.ej-sol-input{margin-top:7px;border:1px dashed #e0b888;background:#fffdf7;font-size:12.5px;color:var(--tinta)}
.ej-sol-input::placeholder{color:#b08850}
.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}

/* ---------- Dedo, no ratón ----------
   Solo con puntero grueso, para no engordar el escritorio. Los controles menudos
   de dentro de una fila se quedan en 38: a 44 romperían la fila (ver styles.css). */
@media (pointer:coarse){
  :root{ --btn-h:44px }
  .btn--mini{min-height:38px;padding:8px 12px}
  input,select,textarea{padding:11px 12px}
  .switch{min-height:44px;align-items:center}
  .switch input{width:18px;height:18px}
}

/* ---------- Responsive ---------- */
/* Barra compacta en portátiles (misma regla que en styles.css). */
/* Simplificación por etapas (mismos umbrales que styles.css). */
@media (max-width:1150px){
  .topbar{padding:9px 14px;gap:10px}
  .topbar p{display:none}
  .topbar__actions{gap:8px}
  .topbar__ave{width:38px}
  /* El aviso de guardado se queda en su punto de color; el texto vuelve si hay
     un FALLO, que es el único que hay que leer sí o sí. */
  .save-status{font-size:0;gap:0}
  .save-status.fallo{font-size:11.5px;gap:6px}
}
@media (max-width:980px){
  .topbar__actions{gap:6px}
  .topbar__actions .btn{padding:8px 12px}
  .btn-larga{display:none} .btn-corta{display:inline}
}
@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}
}

/* ============================================================
   Modo oscuro (automático, según el sistema operativo)
   Oscurece SOLO el "chrome" del editor (barras, tarjetas, campos…).
   La hoja A4 (.hoja) se queda BLANCA a propósito: es lo que se
   imprime y debe verse igual que en papel, como un preview real.
   ============================================================ */
@media (prefers-color-scheme: dark){
  :root{
    --tinta:#e7e9ef;          /* texto principal */
    --pluma:#9aa3b4;          /* texto secundario */
    --label:#a8b1c2;          /* etiquetas de formulario */
    --peligro:#e0795f;        /* rojo legible sobre fondo oscuro (5,63:1) */
    --papel:#0f1116;          /* fondo de la app */
    --carta:#1b1e26;          /* tarjetas, paneles, menús */
    --filete:#2c313c;         /* bordes */
    --filete-suave:#242832;   /* bordes suaves */
    --ink:#8fb3dd;            /* azul de marca legible sobre oscuro (texto/acentos) */
    --verde:#6cc06f;          /* verde de marca legible sobre oscuro */
    --sombra:0 1px 2px rgba(0,0,0,.4),0 12px 32px rgba(0,0,0,.55);
    --marca-a:#eef3ec;         /* la alondra, aclarada para fondo oscuro */
    --marca-b:#7cc97d;
  }
  /* La hoja se quedaba blanca, sí — pero la TINTA seguía al sistema operativo.
     Resultado: en modo oscuro los títulos del cuadernillo salían en #e7e9ef
     sobre papel blanco (1,21:1 de contraste: invisibles). Y no era solo la
     pantalla: Chrome conserva el tema del sistema al imprimir, así que el
     profesor con el portátil en oscuro imprimía los títulos en blanco.
     Aquí el papel recupera sus colores de papel. Hay que redeclarar también
     los alias (--azul, --gris…) porque `--azul:var(--ink)` ya quedó resuelto
     en :root y no se recalcula al cambiar --ink más abajo. */
  .documento-wrap, .documento, .hoja, #printArea, #measurer{
    --tinta:#23262d; --pluma:#6b7385; --papel:#f4f5f8; --carta:#ffffff;
    --filete:#e4e7ee; --filete-suave:#edeff4;
    --ink:#1b2a5e; --verde:#2d6a2e;
    --azul:#1b2a5e; --gris:#6b7385; --linea:#e4e7ee; --fondo:#f4f5f8; --panel:#ffffff;
    color:#23262d;
  }
  ::selection{color:#0f1116}                    /* texto oscuro sobre selección azul clara */
  .topbar{background:rgba(18,20,26,.82)}
  /* campos de formulario */
  input,select,textarea{background:#12141a;color:var(--tinta);border-color:var(--filete)}
  input:focus,select:focus,textarea:focus{box-shadow:0 0 0 3px rgba(143,179,221,.25)}
  input::placeholder,textarea::placeholder{color:#5c647a}
  /* botones y estados hover claros → oscuros */
  .btn--ghost:hover{background:#262b36;border-color:#3a414f}
  .btn--add{border-color:#3a5a3c}
  .btn--add:hover{background:#16241a}
  .btn--reusar{border-color:#2c313c}
  .btn--reusar:hover{background:#1d2230;border-color:#8fb3dd;color:#8fb3dd}
  .dropdown__menu button:hover,.dropdown__file:hover{background:#262b36}
  /* lienzo de la vista previa (detrás de las hojas A4 blancas) */
  .preview-pane{background:#0b0d11}
  /* epígrafes y bloques del formulario */
  .epi{background:#191c23}
  .blk{background:#13161c}
  .blk__tools button{background:#13161c}
  .blk__type{color:color-mix(in srgb,var(--asig) 60%,#fff)}  /* etiqueta legible sea cual sea el color de asignatura */
  .grid-tabla input.cab{background:#1d2230;border-color:#39414f}
  .grid-tabla .tbl-x{background:#13161c}
  .block-add button:hover{color:#0f1116}        /* texto oscuro sobre el azul claro de hover */
  /* selector de ejemplos */
  .ej-pick__panel,.ej-pick .bib-x,.ej-card{background:#1b1e26}
  .ej-card:hover{background:#222632}
  /* raíles de los interruptores (folleto / soluciones) */
  .folleto-sw__sw,.sol-sw__sw{background:#3a414f}
  /* campo de solución del editor */
  .ej-sol-input{background:#1c1813;border-color:#6b4f2a;color:var(--tinta)}
  .ej-sol-input::placeholder{color:#9a7b50}
}