/* ============================================================
   Programación didáctica · Colegio Internacional Alauda
   Sistema editorial premium
   ============================================================ */
:root{
  --ink:#1b2a5e;              /* azul marca Alauda */
  --verde:#2d6a2e;            /* verde marca Alauda */
  --accent:#1b2a5e;           /* color por asignatura (lo fija el JS) */
  --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;
  --gris:#5b6b78;
  --papel:#f4f5f8;
  --carta:#ffffff;
  --filete:#e4e7ee;
  --filete-suave:#edeff4;
  --panel:#ffffff;
  --ok:#2e7d4f;
  --sombra:0 1px 2px rgba(30,30,40,.05),0 10px 30px rgba(30,30,40,.05);
  --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:60px;            /* la mide `shared.js`; esto es solo el arranque */
  --sans:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --serif:'Source Serif 4',Georgia,serif;
  --display:'Fraunces',Georgia,serif;
  /* alias antiguos */
  --azul:var(--ink);
  --azul-claro:#3a5a9e;
  --acento:var(--verde);
  --linea:var(--filete);
  --fondo:var(--papel);
}
*{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:10px 20px;background:rgba(255,255,255,.82);color:var(--tinta);
  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. */
.topbar__left{display:flex;align-items:center;gap:14px;min-width:0}
.topbar__brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.topbar__escudo{height:38px;width:auto}
/* Colores de la marca (la alondra). Se declaran como variables para que el
   bloque de modo oscuro los aclare sin tocar el marcado. */
: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:16.5px;line-height:1.2;color:var(--ink);letter-spacing:.01em;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)}
/* El rótulo de la herramienta, en una sola línea. Se partía en dos («… · /
   LOMLOE») en portátil y en tres en tablet, y al ensanchar la marca empujaba los
   botones a una segunda fila. Por debajo de 1300 px se retira entero: el
   logotipo ya identifica la aplicación y la pantalla dice de sobra en cuál
   estás. */
.topbar p{margin:2px 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 el bloque «Responsive», al final: allí no la
   pisan las declaraciones base, que van después de esta línea) */
/* 10 px de aire entre botones: la barra dejó de ir apretada cuando la cuenta
   pasó de un botón de 250 px a un avatar. */
.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.
   Tiene que verse a la primera, porque el profesor decide si sigue escribiendo
   o para y descarga una copia. */
.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 ---------- */
/* Una sola altura para todo lo que se pone en fila en la barra. Antes convivían
   ocho alturas distintas (32, 34, 36, 37 y 40 px): los que llevan borde medían
   más que los que no, y un `<a>` con clase de botón —al ser en línea, donde el
   relleno vertical no cuenta igual— se iba a 40. Cada botón arrancaba a una
   altura y el conjunto se veía descolocado sin poder señalar por qué.
   `inline-flex` + `min-height` iguala botones, enlaces y cajas con borde. */
/* La separación entre icono y rótulo la pone `gap`, no el espacio del marcado:
   un contenedor flex descarta los espacios sueltos entre sus hijos. Cuidado con
   escribir además un espacio DENTRO del `<span>` (queda hueco doble). */
.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;
  letter-spacing:.01em;text-decoration:none}
/* Rótulo largo / corto del mismo botón: uno u otro, nunca los dos. Se hace con
   dos etiquetas completas en vez de partir una frase, porque en un contenedor
   flex los trozos se separan con `gap` y quedaba un hueco de más. */
.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--secondary{background:#eceef6;color:var(--ink);border:1px solid #d8dcec}
.btn--secondary:hover{background:#e2e6f2}
.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(--ink);border:1px dashed #c8cde0;border-radius:8px;width:100%;padding:10px;margin-top:8px}
.btn--add:hover{background:#f0f2f9;border-color:var(--ink)}
/* Los «mini» viven dentro del formulario, en filas densas: se quedan a su
   tamaño (la altura común es para la barra). */
.btn--mini{background:var(--carta);border:1px solid var(--filete);color:var(--pluma);border-radius:7px;padding:5px 9px;font-size:12px;min-height:28px}
.btn--mini:hover{border-color:var(--ink);color:var(--ink)}
/* El rojo claro se quedaba en 2,93:1 sobre la tarjeta oscura: se usa un token. */
.btn--danger:hover{border-color:var(--peligro,#b3402f);color:var(--peligro,#b3402f)}

/* ---------- Dropdown ---------- */
.dropdown{position:relative}
.dropdown__menu{
  position:absolute;right:0;top:calc(100% + 8px);background:var(--carta);color:var(--tinta);
  border:1px solid var(--filete);border-radius:10px;box-shadow:var(--sombra);padding:6px;min-width:215px;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                       /* «Importar un PDF» es un enlace: sin subrayado */
}
.dropdown__menu button:hover,.dropdown__menu a:hover,.dropdown__file:hover{background:#eef1f6}

/* ---------- Layout ---------- */
/* El alto lo pone `--topbar-h`, que mide `shared.js`. Aquí había un `60px` fijo:
   daba por hecha una barra de 60, pero la de esta página medía 105 y la página
   se pasaba 45 px exactos del alto de la ventana — aparecía un scroll del
   documento entero además del de cada panel, y los últimos 45 px de la vista
   previa quedaban por debajo del borde. */
.layout{display:grid;grid-template-columns:1fr 1fr;gap:0;height:calc(100vh - var(--topbar-h))}
.form-pane{overflow-y:auto;padding:18px 22px 90px;position:relative}
.preview-pane{border-left:1px solid var(--filete);background:#e3e6ec;display:flex;flex-direction:column;overflow:hidden}
.preview-toolbar{padding:9px 18px;font-size:10.5px;color:var(--pluma);background:var(--carta);border-bottom:1px solid var(--filete);text-transform:uppercase;letter-spacing:.16em}
/* El hueco de abajo es para el asistente: la pastilla flota en esa esquina y
   antes se posaba encima del folio. Reservarle sitio es mejor que moverla. */
.preview-scroll{overflow-y:auto;padding:26px 26px 88px;flex:1}

/* ---------- Navegación de secciones ---------- */
/* Una sola fila, con desplazamiento lateral. Envuelto ocupaba tres filas (cuatro
   en tablet): unos 100 px de alto fijos delante del formulario, en la zona más
   valiosa de la pantalla. El desvanecido de la derecha avisa de que sigue, y el
   apartado activo se centra solo (ver `buildNav` en app.js). */
.form-nav{display:flex;flex-wrap:nowrap;gap:6px;margin-bottom:16px;position:sticky;top:-18px;
  background:var(--papel);padding:10px 0;z-index:5;overflow-x:auto;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
.form-nav::-webkit-scrollbar{display:none}
.form-nav a{flex:none;font-size:11.5px;color:var(--pluma);text-decoration:none;padding:5px 11px;border-radius:999px;background:var(--carta);border:1px solid var(--filete);transition:.15s;white-space:nowrap}
.form-nav a:hover{border-color:var(--ink);color:var(--ink)}
.form-nav a.active{background:var(--ink);border-color:var(--ink);color:#fff}

/* ---------- Tarjetas de formulario ---------- */
.card{background:var(--panel);border:1px solid var(--filete);border-radius:var(--radio);padding:22px;margin-bottom:16px;box-shadow:var(--sombra);scroll-margin-top:74px}
.card h2{font-size:15px;color:var(--tinta);display:flex;align-items:baseline;gap:12px;margin-bottom:16px;padding-bottom:10px;border-bottom:1px solid var(--filete-suave);font-weight:600}
.card__num{
  font-family:var(--display);font-weight:400;font-style:italic;font-size:24px;color:var(--ink);
  background:none;width:auto;min-width:22px;height:auto;display:inline;flex:none;line-height:1;
}

.grid{display:grid;gap:12px}
/* Dos columnas SI CABEN, y una si no. Antes era `1fr 1fr` fijo y solo pasaba a
   una columna por debajo de 620 px de ventana — pero la pantalla se parte en dos
   paneles hasta los 1000, así que en el iPad cada campo se quedaba en 150-161 px
   y «Colegio Internacional Alauda» no cabía: se cortaba. Ahora los campos se
   reparten por el ancho que tienen de verdad, no por el de la ventana, y da
   igual dónde se usen (tarjeta, actividad, bloque anidado).
   El `min(...,100%)` evita que la columna mínima desborde un contenedor más
   estrecho que ella. */
.grid-2{grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
/* Las etiquetas son lo que se lee de reojo mil veces al día: 10,5 px en
   versalitas con interletraje estaban al límite de lo cómodo, y su gris se
   quedaba en 4,74:1. Un punto más de tamaño y de tinta. */
.field>span{font-size:11.5px;font-weight:600;color:var(--label);text-transform:uppercase;letter-spacing:.08em}
/* El control se pega abajo, así que cuando una etiqueta ocupa dos líneas —«Título
   de la unidad / situación de aprendizaje»— su campo no se descuelga del de al
   lado: la fila entera queda alineada. */
.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 10px}

.subblock{border:0;padding:0;margin:0 0 18px}
.subblock legend{font-size:12.5px;font-weight:600;color:var(--tinta);padding:0;margin-bottom:6px}

/* ---------- Checkboxes ---------- */
.checks{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.checks--ods{grid-template-columns:1fr 1fr 1fr}
.chk{display:flex;align-items:flex-start;gap:8px;font-size:13px;padding:8px 10px;border:1px solid var(--filete);border-radius:8px;cursor:pointer;background:#fff;transition:.15s}
.chk:hover{border-color:var(--ink)}
.chk input{width:auto;margin:2px 0 0;accent-color:var(--ink)}
.chk.checked{background:#f0f2f9;border-color:#aab3d2}
.chk small{display:block;color:var(--pluma);font-size:11px;font-weight:400}
.chk b{font-weight:600}

/* ---------- Repeaters ---------- */
.repeater{display:flex;flex-direction:column;gap:8px}
.rep-row{display:flex;gap:8px;align-items:flex-start}
.rep-row .rep-handle{color:var(--pluma);font-family:var(--display);font-style:italic;font-size:13px;padding-top:10px;width:22px;text-align:center;flex:none}
.rep-row .rep-inputs{flex:1;display:flex;gap:8px}
.rep-row .rep-inputs input[data-w="codigo"],.rep-row .rep-inputs input[data-w="peso"]{max-width:120px}
.rep-del{flex:none}
.rep-empty{font-size:13px;color:var(--pluma);font-style:italic;font-family:var(--serif);padding:4px 0}

/* Actividades */
.act-card{border:1px solid var(--filete);border-radius:10px;padding:14px;background:#fafbfd}
.act-card__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;gap:8px}
.act-card__head .act-fase{max-width:190px}
.act-card .grid-2{gap:10px}

/* Criterios que evalúa cada actividad (fichas seleccionables) */
.crit-pick{margin-top:10px;border-top:1px dashed var(--filete);padding-top:10px}
.crit-pick__lbl{display:block;font-size:11px;font-weight:600;color:var(--pluma);
  text-transform:uppercase;letter-spacing:.07em;margin-bottom:7px}
.crit-chips{display:flex;flex-wrap:wrap;gap:6px}
.crit-chip{display:inline-flex;align-items:baseline;gap:7px;max-width:100%;text-align:left;
  border:1px solid var(--filete);background:var(--papel,#fff);border-radius:999px;padding:6px 13px;
  font-family:inherit;font-size:12px;color:var(--tinta);cursor:pointer;transition:.14s}
.crit-chip:hover{border-color:var(--marca,#1b2a5e)}
.crit-chip b{font-weight:700;flex:none}
.crit-chip span{color:var(--pluma);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:22ch}
.crit-chip.on{background:var(--marca,#1b2a5e);border-color:var(--marca,#1b2a5e);color:#fff}
.crit-chip.on span{color:rgba(255,255,255,.8)}
.crit-vacio{font-size:12px;color:var(--pluma);font-style:italic;margin:0}
.crit-legacy{font-size:11.5px;color:var(--pluma);margin:9px 0 0;display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* Rúbrica */
.rub-traer{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.rub-traer small{font-size:11.5px;color:var(--pluma)}
.rub-row{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr 1fr auto;gap:6px;align-items:start;margin-bottom:6px}
.rub-row input{font-size:12.5px;padding:7px 8px}
.rub-head{font-size:10px;font-weight:600;color:var(--pluma);text-transform:uppercase;letter-spacing:.08em}
.rub-ind{display:flex;align-items:center;gap:6px}
.rub-ind input{flex:1;min-width:0}
.rub-cod{flex:none;font-size:10.5px;font-weight:700;color:#fff;background:var(--marca,#1b2a5e);
  border-radius:5px;padding:3px 6px;cursor:help}
.ponder-total{font-size:13px;font-weight:600;margin-top:8px}
.ponder-total.bad{color:#b3402f}
.ponder-total.good{color:var(--ok)}

/* ============================================================
   DOCUMENTO (vista previa + impresión) — diseño editorial
   ============================================================ */
.documento{
  background:#fff;max-width:820px;margin:0 auto;padding:50px 58px;
  box-shadow:0 2px 6px rgba(30,30,40,.08),0 18px 50px rgba(30,30,40,.14);border-radius:3px;
  font-family:var(--serif);color:#26282e;line-height:1.6;
}
.doc-header{padding-bottom:18px;margin-bottom:26px;position:relative}
.doc-header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:#e3e0d6;box-shadow:0 3px 0 -1px var(--accent)}
.doc-header__escudo{height:44px;width:auto;margin-bottom:14px}
.doc-header__top{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--sans);font-size:10px;color:var(--pluma);text-transform:uppercase;letter-spacing:.2em}
.doc-header h1{font-family:var(--display);font-weight:500;font-size:32px;color:var(--accent);margin:12px 0 6px;line-height:1.12;letter-spacing:-.01em}
.doc-header .doc-sub{font-family:var(--sans);font-size:12px;color:var(--pluma);text-transform:uppercase;letter-spacing:.12em}
.doc-meta{display:grid;grid-template-columns:1fr 1fr;gap:4px 28px;margin-top:16px;font-family:var(--sans);font-size:12px}
.doc-meta div{display:flex;justify-content:space-between;border-bottom:1px dotted #d8d4c8;padding:4px 0}
.doc-meta span:first-child{color:var(--pluma)}
.doc-meta span:last-child{font-weight:600;color:#33363d;text-align:right}

.doc-section{margin:26px 0;page-break-inside:avoid}
.doc-section > h2{
  font-family:var(--display);font-weight:500;font-size:17px;color:var(--tinta);background:none;
  padding:0 0 7px;border-bottom:2px solid var(--accent);border-radius:0;margin-bottom:13px;
  display:flex;align-items:baseline;gap:8px;letter-spacing:0;
}
.doc-section h3{font-family:var(--sans);font-size:11px;font-weight:600;color:var(--accent);margin:15px 0 6px;text-transform:uppercase;letter-spacing:.14em}
.doc-section p{margin:0 0 9px;font-size:14.5px}
.doc-section ul{margin:0 0 9px;padding-left:20px;font-size:14.5px}
.doc-section li{margin-bottom:4px}

.doc-tags{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 10px}
.doc-tag{font-family:var(--sans);font-size:10.5px;font-weight:500;background:transparent;color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 38%, #fff);border-radius:999px;padding:4px 12px;letter-spacing:.03em}
.doc-tag--ods{color:#1f6b3b;border-color:#bcdcc8}

table.doc-table{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:11.5px;margin:6px 0 12px}
table.doc-table th,table.doc-table td{border:1px solid #e3e0d6;padding:7px 10px;text-align:left;vertical-align:top}
table.doc-table th{background:#f7f5ef;color:var(--accent);font-weight:600;text-transform:uppercase;font-size:10px;letter-spacing:.08em}
table.doc-table tr{page-break-inside:avoid}

.doc-act{border:1px solid #e8e5db;border-left:3px solid var(--accent);border-radius:0 8px 8px 0;padding:13px 16px;margin-bottom:10px;page-break-inside:avoid}
.doc-act__head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:5px}
.doc-act__head strong{font-family:var(--display);font-weight:500;font-size:15px;color:#26282e}
.doc-act__fase{font-family:var(--sans);font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 40%, #fff);padding:3px 10px;border-radius:999px;font-weight:600;white-space:nowrap;background:none}
.doc-act__meta{font-family:var(--sans);font-size:11px;color:var(--pluma);margin-top:7px;display:flex;flex-wrap:wrap;gap:14px}
.doc-act__meta span b{color:#33363d}
.doc-act p{font-size:13.5px}

.doc-empty{color:#b9c2ca;font-style:italic;font-family:var(--sans);font-size:13px}
.crit-code{font-family:var(--sans);font-weight:700;color:var(--accent);margin-right:6px;font-size:12px}

.doc-footer{margin-top:34px;padding-top:12px;border-top:1px solid #e3e0d6;font-family:var(--sans);font-size:9.5px;color:var(--pluma);display:flex;justify-content:space-between;align-items:center;gap:14px;text-transform:uppercase;letter-spacing:.14em}
/* Sello de la herramienta, al modo del pie de imprenta de una editorial. */
.doc-sello{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;flex:none}
.doc-sello__ave{width:26px;height:auto;display:block;opacity:.85}

/* Estado vacío: el esqueleto del documento de fondo y el mensaje encima, sobre
   un velo blanco para que se lea. Da la sensación de que la unidad se está
   formando ahí, en vez de un rectángulo en blanco. */
.doc-placeholder{text-align:center;color:var(--pluma);font-family:var(--serif);padding:46px 30px 54px}
/* Esqueleto del documento que va a salir: cabecera, título, apartados y sus
   líneas. Va ENCIMA del mensaje, no detrás: probé a superponerlos con un velo
   y las líneas cruzaban por detrás del texto — parecía un fallo de pintado,
   no un boceto. */
.doc-ghost{width:min(300px,80%);margin:0 auto 28px;display:flex;flex-direction:column;gap:9px;align-items:flex-start}
.doc-ghost span{display:block;width:100%;height:7px;border-radius:4px;background:#e9ecf2}
.doc-ghost .g-top{width:38%;height:6px;background:#eef0f5}
.doc-ghost .g-tit{width:72%;height:17px;margin:10px 0 1px;background:#dfe4ee}
.doc-ghost .g-sub{width:48%;height:8px}
.doc-ghost .g-sec{width:30%;height:8px;margin-top:13px;background:#d6dded}
.doc-ghost .g-l--corta{width:62%}
.doc-placeholder h3{font-family:var(--display);font-weight:500;font-size:21px;color:var(--ink);margin-bottom:10px}
.doc-placeholder p{font-style:italic}
@media print{ .doc-ghost{display:none} }

/* ---------- Print ---------- */
.print-only{display:none}
@media print{
  .no-print{display:none !important}
  body{background:#fff;font-size:12px;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .layout{display:none}
  .print-only{display:block}
  .documento{box-shadow:none;border-radius:0;margin:0;max-width:100%;padding:0}
  .doc-section{margin:16px 0}
  /* `size:A4` explícito: sin él, el navegador usaba el papel por defecto de la
     impresora y en un equipo configurado en Carta la unidad salía con otra caja.
     El cuadernillo ya lo declaraba; la programación no. */
  @page{size:A4;margin:18mm 16mm}
}

/* ---------- Dedo, no ratón ----------
   En tablet (que es media plantilla del colegio) había 34 controles por debajo
   de los 44 px recomendados: las píldoras de la barra a 36, los chips de
   apartado a 29. Se agrandan SOLO cuando el puntero es grueso, para no
   engordar la interfaz de escritorio.
   Los controles menudos que van dentro de una fila del formulario (`.btn--mini`,
   los ✎/⧉/🗑 de los repetidores) se quedan en 38: a 44 romperían la fila. Es un
   compromiso consciente, no un olvido. */
@media (pointer:coarse){
  :root{ --btn-h:44px }
  .form-nav a{min-height:44px;display:inline-flex;align-items:center;padding:5px 14px}
  .btn--mini{min-height:38px;padding:8px 12px}
  input,select,textarea{padding:11px 12px}
  .chk{padding:11px 12px;min-height:44px;align-items:center}
}

/* ---------- Responsive ---------- */
/* La barra se va simplificando por etapas, y no antes de hacer falta. Los
   umbrales están medidos con la sesión iniciada (que es como se trabaja) y con
   sitio de sobra para el botón «El colegio» cuando informática dé el permiso.

   1ª etapa · se retira el rótulo de la herramienta: el logotipo ya identifica
   la aplicación y la propia pantalla dice en cuál estás. */
@media (max-width:1150px){
  .topbar{padding:10px 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}
}
/* 2ª etapa · rótulos cortos donde no se pierde nada: «Exportar PDF» → «PDF», y
   el aviso de guardado en su punto de color, que es lo que se mira de reojo.
   El texto del aviso VUELVE si hay un fallo: ese hay que leerlo, porque el
   profesor tiene que decidir si sigue escribiendo o descarga una copia. */
@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:1000px){
  .layout{grid-template-columns:1fr;height:auto}
  .preview-pane{border-left:0;border-top:1px solid var(--filete);height:80vh}
  .form-pane{height:auto}
}
@media (max-width:620px){
  /* `.grid-2` ya no necesita regla aquí: se pliega solo cuando no cabe. */
  .checks,.checks--ods{grid-template-columns:1fr}
  .rub-row{grid-template-columns:1fr}
  .topbar{flex-direction:column;align-items:flex-start}
}

/* ============================================================
   Modo oscuro (automático, según el sistema operativo)
   Oscurece SOLO el "chrome" del editor (barras, tarjetas, campos…).
   El documento (.documento) se queda BLANCO 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) */
    --gris:#aab2c2;
    --papel:#0f1116;          /* fondo de la app */
    --carta:#1b1e26;          /* tarjetas, menús */
    --panel:#1b1e26;          /* paneles de tarjeta */
    --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;
  }
  /* El documento es PAPEL: su tinta no puede seguir el tema del sistema.
     En oscuro se volvía casi blanca sobre fondo blanco, y como Chrome conserva
     el tema al imprimir, también salía así en el PDF. Se redeclaran también los
     alias (--azul, --gris…): `--azul:var(--ink)` ya quedó resuelto en :root. */
  .documento, #documento, #printArea{
    --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--secondary{background:#262b36;color:var(--ink);border-color:#3a414f}
  .btn--secondary:hover{background:#2f3543}
  .btn--ghost:hover{background:#262b36;border-color:#3a414f}
  .btn--add{border-color:#3a414f}
  .btn--add:hover{background:#1d2230}
  .dropdown__menu button:hover,.dropdown__file:hover{background:#262b36}
  /* lienzo de la vista previa (detrás del documento blanco) */
  .preview-pane{background:#0b0d11}
  /* navegación de secciones: texto oscuro sobre la píldora azul clara activa */
  .form-nav a.active{color:#0f1116}
  /* El verde de «Total: 100%» se había quedado en su versión clara sobre fondo
     oscuro: 3,3:1, por debajo del 4,5 de AA. Lo encontró el barrido de
     contraste, no la vista. (El botón de ayuda tenía el mismo problema, pero se
     arregla dentro de tour.js: su CSS se inyecta después y ganaba a este.) */
  .ponder-total.good{color:var(--verde)}
  /* checkboxes y tarjetas de actividad */
  .chk{background:#13161c}
  .chk.checked{background:#1d2230;border-color:#33496e}
  /* fichas de criterios y rúbrica enlazada */
  .crit-chip{background:#13161c;border-color:var(--filete);color:var(--tinta)}
  .crit-chip:hover{border-color:#33496e}
  .crit-chip.on{background:#33527f;border-color:#33527f;color:#fff}
  .crit-chip.on span{color:rgba(255,255,255,.78)}
  .rub-cod{background:#33527f}
  .act-card{background:#191c23}
}