/* Paleta oficial de Misión Foco, la misma que usa el panel del profesor (public/panel.html):
   azul #10528A · verde #7FB542 · amarillo #F5A623 · rojo #E15554 · fondo #F4F6F8 · borde #DDE3E8.
   Los nombres en inglés se conservan porque los usa todo el resto de esta hoja. */
:root{--ink:#1c1c1c;--muted:#5A6B7A;--blue:#10528A;--blue-dark:#0d436f;--blue2:#E7F0F8;
  --green:#7FB542;--green-dark:#5f9130;--green-soft:#EAF4DE;--orange:#F5A623;--red:#E15554;
  --line:#DDE3E8;--paper:#fff;--bg:#F4F6F8;--shadow:0 16px 50px rgba(16,82,138,.09)}
*{box-sizing:border-box}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg);line-height:1.5}.topbar{height:72px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 28px;position:sticky;top:0;z-index:20}.brand{display:flex;align-items:center;gap:12px}.brand-mark{width:42px;height:42px;border-radius:13px;background:linear-gradient(135deg,var(--blue),#2984c7);color:white;display:grid;place-items:center;font-weight:900}.brand div{display:flex;flex-direction:column}.brand small{color:var(--muted)}.top-actions{display:flex;gap:10px;align-items:center}.save-state{font-size:13px;color:var(--green);margin-right:8px}.app-shell{display:grid;grid-template-columns:270px minmax(0,1fr);min-height:calc(100vh - 72px)}.sidebar{background:#102c43;color:white;padding:24px 16px;display:flex;flex-direction:column;gap:20px}.project-card{padding:17px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);border-radius:16px;display:flex;flex-direction:column;gap:5px}.project-card span:last-child{font-size:12px;color:#b7ccda}.eyebrow,.kicker,.source-label{font-size:11px;font-weight:800;letter-spacing:.1em;color:#5e7c92}.sidebar .eyebrow{color:#8db9d6}nav{display:flex;flex-direction:column;gap:6px}nav button{border:0;background:transparent;color:#bcd0dd;border-radius:12px;text-align:left;padding:11px;display:flex;gap:11px;cursor:pointer}nav button:hover,nav button.active{background:rgba(255,255,255,.1);color:#fff}nav button i{font-style:normal;width:27px;height:27px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.1);font-size:12px;font-weight:800}nav button.active i{background:#fff;color:var(--blue)}nav button span{display:flex;flex-direction:column;font-weight:700}nav button small{font-weight:400;opacity:.72}.source-note{margin-top:auto;border-top:1px solid rgba(255,255,255,.13);padding:18px 8px 4px;display:flex;flex-direction:column;gap:4px;font-size:12px;color:#a9c2d2}.source-note strong{color:white}main{padding:34px clamp(24px,4vw,62px);max-width:1500px;width:100%;margin:0 auto}.hero{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:24px}.hero h1{font-size:34px;margin:4px 0 2px;letter-spacing:-.03em}.hero p{margin:0;color:var(--muted)}.progress-card{background:#fff;border:1px solid var(--line);border-radius:15px;padding:14px 16px;min-width:200px}.progress-card div:first-child{display:flex;justify-content:space-between}.progress-card span{font-size:12px;color:var(--muted)}.progress{height:7px;background:#e9eef2;border-radius:8px;margin-top:9px;overflow:hidden}.progress span{display:block;background:linear-gradient(90deg,var(--green),#8bc95f);height:100%;width:0;transition:.3s}.step-panel{display:none;background:#fff;border:1px solid var(--line);border-radius:22px;padding:28px;box-shadow:var(--shadow)}.step-panel.active{display:block}.section-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}.section-heading h2,.section-heading h3{margin:2px 0}.section-heading p{margin:2px 0;color:var(--muted)}.section-heading.small{margin-top:26px;margin-bottom:12px}.badge{font-size:12px;background:#f1f5f7;border:1px solid var(--line);border-radius:99px;padding:6px 10px}.badge.official{background:#edf7e8;color:#467729;border-color:#cce3be}.grid{display:grid;gap:17px;margin-bottom:20px}.grid.three{grid-template-columns:repeat(3,1fr)}.grid.two{grid-template-columns:repeat(2,1fr)}.grid .full{grid-column:1/-1}label{display:flex;flex-direction:column;gap:7px;font-size:13px;font-weight:750;color:#304c61}input,textarea,select{width:100%;border:1px solid #cbd8e1;border-radius:10px;padding:11px 12px;font:inherit;color:var(--ink);background:#fff;outline:none;resize:vertical}input:focus,textarea:focus,select:focus{border-color:#4c93c6;box-shadow:0 0 0 3px rgba(38,126,188,.1)}.btn{border:0;border-radius:10px;padding:10px 14px;font-weight:750;cursor:pointer}.btn.primary{background:var(--blue);color:#fff}.btn.secondary{background:var(--blue2);color:var(--blue)}.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}.guidance{background:#fff8ea;border:1px solid #f2dfb8;border-radius:14px;padding:16px 18px}.guidance p{margin:4px 0 0;color:#6a5b3d}.curriculum-card{background:#f4f9fd;border:1px solid #cfe2f0;border-left:4px solid var(--blue);border-radius:14px;padding:19px;margin:18px 0}.curriculum-card h3{margin:5px 0}.curriculum-card p{margin:5px 0;color:#405d71}.curriculum-card.compact{margin:0}.curriculum-card.teacher{background:#f6faef;border-color:#d9e8c9;border-left-color:var(--green)}.split-cards{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:20px 0}.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}.chip{font-size:12px;background:#fff;border:1px solid #cee0ed;border-radius:99px;padding:5px 9px}.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:13px}table{border-collapse:collapse;width:100%;font-size:13px}th{background:#f4f7f9;color:#50697b;text-align:left}th,td{padding:11px;border-bottom:1px solid var(--line);vertical-align:top}tr:last-child td{border-bottom:0}td input,td textarea{min-width:130px;padding:8px}.hint{font-size:12px;color:var(--muted)}.session-list{display:flex;flex-direction:column;gap:13px}.session-card{border:1px solid var(--line);border-radius:15px;overflow:hidden}.session-head{padding:13px 16px;background:#f6f8fa;display:flex;align-items:center;gap:12px}.session-number{width:28px;height:28px;border-radius:8px;background:var(--blue);color:#fff;display:grid;place-items:center;font-weight:800}.session-head input{border:0;background:transparent;font-weight:800;padding:4px}.session-body{padding:16px;display:grid;grid-template-columns:2fr 1fr;gap:13px}.session-body label:last-child{grid-column:1/-1}.icon-btn{border:0;background:transparent;color:var(--red);font-size:18px;cursor:pointer}.criterion{display:grid;grid-template-columns:35px 1fr 38px;gap:10px;align-items:start;margin-bottom:10px}.criterion-num{width:32px;height:32px;border-radius:9px;background:#edf5fb;display:grid;place-items:center;font-weight:800;color:var(--blue)}.validation-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px}.stat{border:1px solid var(--line);border-radius:14px;padding:16px}.stat strong{display:block;font-size:28px}.stat.ok strong{color:var(--green)}.stat.warn strong{color:var(--orange)}.stat.error strong{color:var(--red)}.validation-list{display:flex;flex-direction:column;gap:9px}.validation-item{display:flex;gap:12px;padding:13px;border:1px solid var(--line);border-radius:12px}.validation-item i,.dot{width:10px;height:10px;border-radius:50%;margin-top:6px;flex:0 0 auto}.ok i,.dot.ok{background:var(--green)}.warn i,.dot.warn{background:var(--orange)}.error i,.dot.error{background:var(--red)}.validation-item strong{display:block}.validation-item span{font-size:12px;color:var(--muted)}.legend{display:flex;gap:18px;margin-top:20px;font-size:12px;color:var(--muted)}.legend span{display:flex;gap:7px;align-items:center}.legend .dot{margin:0}.step-footer{display:flex;justify-content:space-between;align-items:center;padding:20px 0}.paper{background:#fff;color:#172c3b;max-width:900px;margin:0 auto;padding:65px;box-shadow:0 5px 30px rgba(22,50,70,.12)}.paper h1{text-align:center;font-size:24px}.paper h2{font-size:17px;border-bottom:2px solid #173c56;padding-bottom:5px;margin-top:28px}.paper h3{font-size:14px}.paper p,.paper li,.paper td{font-size:12px}.paper .doc-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;background:#f2f5f7;padding:12px}.paper .doc-box{border:1px solid #b8c7d1;padding:12px;margin:8px 0}.toast{position:fixed;right:24px;bottom:24px;background:#12344d;color:#fff;padding:12px 18px;border-radius:10px;opacity:0;transform:translateY(10px);pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:none}
.assistant-bar{display:grid;grid-template-columns:1fr minmax(230px,330px) auto;gap:12px;align-items:center;background:linear-gradient(115deg,#f1ecff,#eef7ff);border:1px solid #d8d0f2;border-radius:16px;padding:13px 15px;margin-bottom:18px}.assistant-bar>div{display:flex;align-items:center;gap:11px}.assistant-bar>div>div{display:flex;flex-direction:column}.assistant-bar small{color:#6c6b83}.assistant-icon{width:34px;height:34px;border-radius:10px;background:#6b4fc4;color:#fff;display:grid;place-items:center;font-size:19px}.btn.assistant{background:#6b4fc4;color:#fff}.assistant-proposal{background:#fff;border:1px solid #cfc4ef;border-left:4px solid #6b4fc4;border-radius:14px;padding:17px;margin:-7px 0 18px}.assistant-proposal header{display:flex;justify-content:space-between;align-items:center}.assistant-proposal p{white-space:pre-wrap}.assistant-proposal .proposal-actions{display:flex;gap:8px;justify-content:flex-end}.origin-label{font-size:10px;font-weight:850;letter-spacing:.08em;color:#6b4fc4}.official-trace{border-top:1px solid #cfdeea;margin-top:14px;padding-top:10px;font-size:11px;color:#597487}.official-trace strong{color:#315a77}.trace-warning{color:#9a6517;background:#fff6dd;border-radius:7px;padding:5px 7px;display:inline-block;margin-top:5px}
@media(max-width:900px){.app-shell{grid-template-columns:1fr}.sidebar{display:none}.grid.three,.grid.two,.split-cards{grid-template-columns:1fr}.hero{align-items:flex-start;gap:16px}.top-actions .save-state,.top-actions .ghost{display:none}.session-body{grid-template-columns:1fr}.session-body label:last-child{grid-column:auto}main{padding:22px 14px}.step-panel{padding:20px}.assistant-bar{grid-template-columns:1fr}}
@media print{body{background:#fff}.topbar,.sidebar,.hero,#alerts,.step-panel:not([data-panel=documento]),.no-print,.toast{display:none!important}.app-shell{display:block}.document-view{display:block!important;border:0;box-shadow:none;padding:0}.paper{box-shadow:none;max-width:none;padding:0}main{padding:0}.paper table{break-inside:avoid}}

/* ===== Identidad Misión Foco ===== */
/* `--brand` se usa en diez sitios de esta hoja pero nunca se declaró: el número romano del bloque
   salía en blanco sobre blanco y las fichas marcadas parecían desaparecer. Es el azul del producto. */
:root{--brand:var(--blue)}
/* El cohete es el logo del producto (el mismo de la Carrera Espacial) y en el logotipo
   "Foco" va siempre en verde, como en el panel y en la portada. */
.brand-mark{background:linear-gradient(135deg,var(--blue),#2e7fb8);font-size:21px;line-height:1}
.brand strong b{color:var(--green);font-weight:900}
.topbar{border-bottom:2px solid var(--blue)}
.sidebar{background:var(--blue-dark)}
nav button.active i{color:var(--blue-dark)}
.progress span{background:linear-gradient(90deg,var(--green),#9fd45f)}
/* El asistente iba en morado, un color que no existe en la marca. */
.assistant-bar{background:linear-gradient(115deg,var(--blue2),var(--green-soft));border-color:#c5dcef}
/* La barra cambia de contenido según el paso —en el anual lleva además cuántas unidades y el
   desplegable desaparece—, así que se reparte sola en vez de con tres columnas fijas. */
.assistant-bar{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.assistant-bar>div:first-child{flex:1 1 300px}
.assistant-bar #assistantAction{flex:0 1 330px}
.assistant-bar #assistantAction[hidden]{display:none}
.asistente-unidades{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;
  color:#3d4b57;background:rgba(255,255,255,.75);border-radius:10px;padding:6px 10px}
.asistente-unidades input{width:64px;text-align:center;padding:5px}
/* Igual que la barra: el `display:flex` de arriba le gana al `hidden` del navegador, y «Unidades
   en el año» se colaba en pasos donde no se titula nada. Solo tiene sentido en el mapa anual. */
.asistente-unidades[hidden]{display:none}
.assistant-icon{background:var(--blue)}
.btn.assistant{background:var(--green-dark)}
.btn.assistant:hover{background:var(--green)}
.assistant-proposal{border-color:#c5dcef;border-left-color:var(--green-dark)}
.origin-label{color:var(--green-dark)}
.assistant-bar small{color:var(--muted)}
.curriculum-card.teacher{background:var(--green-soft);border-color:#cce3be;border-left-color:var(--green)}
.badge.official{background:var(--green-soft);color:var(--green-dark);border-color:#cce3be}

/* ===== Trazabilidad curricular ===== */
/* El docente debe distinguir de un vistazo qué texto puede citar como oficial. */
.verif{display:inline-block;margin-left:.5rem;padding:.15rem .6rem;border-radius:999px;font-size:.72rem;font-weight:700;vertical-align:middle}
.verif.ok{background:var(--green-soft);color:var(--green-dark)}
.verif.warn{background:#FDF0D8;color:#8a5a05}
.verif.error{background:#FBE3E3;color:#A32F2E}
.curriculum-quote{margin:.6rem 0 0;padding:.6rem .8rem;border-left:3px solid var(--green);background:#fff;font-size:.86rem;line-height:1.45;color:#33505f;border-radius:0 8px 8px 0}
.trace-loading{color:var(--muted);font-style:italic}
.topbar .volver{color:var(--blue);text-decoration:none;font-weight:600;font-size:.85rem;margin-right:.75rem}
.topbar .volver:hover{text-decoration:underline}

/* ===== Búsqueda en el padrón del MINEDU ===== */
/* Va en azul, no en el verde del asistente, a propósito: esto NO lo produce la IA, sale del
   registro oficial del Ministerio. El docente debe poder distinguirlo de un vistazo. */
.padron{background:var(--blue2);border:1px solid #cfe2f0;border-left:4px solid var(--blue);
  border-radius:14px;padding:17px 19px;margin-bottom:18px}
.padron-fila{display:flex;gap:10px;align-items:stretch;margin-top:7px;max-width:520px}
.padron-fila input{flex:1;letter-spacing:.12em;font-weight:700;font-variant-numeric:tabular-nums}
/* El botón llevaba el azul claro de .btn.secondary, el mismo del panel: se leía como texto
   suelto en vez de como el botón que dispara la búsqueda. */
.padron-fila .btn{white-space:nowrap;background:var(--blue);color:#fff;padding:11px 18px}
.padron-fila .btn:hover{background:var(--blue-dark)}
.padron-fila .btn:disabled{background:#8fadc5;cursor:progress}
.padron-campo label{gap:3px}
.padron-campo .hint{font-weight:400}
.padron-nota{margin:11px 0 0;font-size:12.5px;color:#4d6a7e}
.padron-estado{margin:-8px 0 16px;font-size:13.5px;color:var(--muted);padding:9px 13px;
  border-radius:9px;background:#f3f6f8}
.padron-estado.ok{background:var(--green-soft);color:#3d5b22;font-weight:600}
.padron-estado.warn{background:#FDF0D8;color:#8a5a05;font-weight:600}

.padron-ficha{border:1px solid #cfe2f0;border-radius:14px;padding:0;margin:0 0 20px;overflow:hidden;background:#fff}
.padron-ficha header{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 18px;background:var(--blue-dark);color:#fff}
.padron-ficha header .origen{display:block;font-size:10.5px;font-weight:800;letter-spacing:.13em;color:#9fd45f}
.padron-ficha header strong{font-size:17px;display:block;margin-top:3px}
.padron-ficha dl{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:0}
.padron-ficha dl>div{padding:11px 18px;border-bottom:1px solid var(--line);border-right:1px solid var(--line)}
.padron-ficha dt{font-size:10.5px;font-weight:800;letter-spacing:.09em;color:#7d93a3;text-transform:uppercase}
.padron-ficha dd{margin:3px 0 0;font-size:14px;color:#2c3f4c}
.padron-censo{margin:0;padding:12px 18px;font-size:13px;color:#3d5b22;background:var(--green-soft);
  border-bottom:1px solid var(--line);line-height:1.45}
.padron-aviso{margin:0;padding:12px 18px;font-size:13px;color:#A32F2E;background:#FBE3E3;
  border-bottom:1px solid var(--line);font-weight:600}
/* Contexto del distrito. En ámbar y no en verde a propósito: viene de Wikipedia y es del
   distrito, no del aula. El docente tiene que poder distinguirlo del dato oficial de un
   vistazo, sin leer la letra pequeña. */
.padron-zona{padding:14px 18px;background:#FFFBF2;border-bottom:1px solid var(--line);
  border-left:4px solid var(--orange)}
.padron-zona strong{font-size:14px;color:#8a5a05}
.padron-zona p{margin:7px 0 0;font-size:13px;line-height:1.5;color:#4a5c69}
.padron-zona .zona-datos{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.padron-zona .zona-aviso{font-size:11.5px;color:#7d6640;line-height:1.45;margin-top:9px;
  padding-top:8px;border-top:1px dashed #e6d3ae}
.padron-otros{margin:0;padding:12px 18px;font-size:13px;color:var(--muted);display:flex;
  align-items:center;gap:9px;flex-wrap:wrap;border-bottom:1px solid var(--line)}
.chip-nivel{border:1px solid #cee0ed;background:#fff;color:var(--blue);border-radius:99px;
  padding:5px 12px;font:inherit;font-size:12.5px;font-weight:650;cursor:pointer}
.chip-nivel:hover{background:var(--blue2);border-color:var(--blue)}
.padron-ficha footer{padding:9px 18px;font-size:11.5px;color:#7d93a3;background:#f8fafb}
@media(max-width:900px){.padron-ficha dl{grid-template-columns:1fr 1fr}.padron-fila{max-width:none}}

/* ===== Caseríos del distrito ===== */
.caserios{border:1px solid var(--line);border-radius:12px;padding:14px 17px;margin:0 0 20px;background:#fff}
.meta-caserios{margin:0;font-size:13px;color:var(--muted);line-height:1.5}
.meta-caserios b{color:var(--ink)}
.chips-caserios{display:flex;flex-wrap:wrap;gap:7px;margin:11px 0 9px}
.chip-caserio{border:1px solid #cee0ed;background:#fff;color:#33505f;border-radius:99px;
  padding:6px 13px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;display:inline-flex;
  align-items:baseline;gap:6px}
.chip-caserio small{font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.chip-caserio:hover{border-color:var(--blue);background:var(--blue2)}
.chip-caserio.marcado{background:var(--green-soft);border-color:var(--green);color:var(--green-dark)}
.chip-caserio.marcado small{color:var(--green-dark);opacity:.8}
.aviso-caserios{font-size:11.5px;padding-top:8px;border-top:1px dashed var(--line)}

/* ===== Validador ===== */
/* Cada resultado se pinta con <button> para poder saltar a su paso, pero la regla
   .validation-item solo fijaba borde y separación: el navegador ponía lo demás, y con sus
   valores por defecto los títulos salían centrados —desalineados unos respecto de otros—,
   con fondo gris de sistema y otra tipografía. */
.validation-item{text-align:left;background:#fff;font:inherit;color:inherit;cursor:pointer;width:100%}
.validation-item:hover{border-color:var(--green);background:var(--green-soft)}

/* ===== Base normativa ===== */
/* Es un dato de contexto del documento activo, no una nota al pie: va pegada a la tarjeta de
   arriba y en letra menor, para que no compita con los pasos. Al salir del final de la barra
   pierde el margin-top:auto y el #projectMeta deja de ser :last-child, así que ambos se
   estilan aquí de forma explícita. */
.project-card #projectMeta{font-size:12px;color:#b7ccda}
.project-card .source-note{margin:8px 0 0;padding:7px 0 0;border-top:1px solid rgba(255,255,255,.15);
  font-size:10.5px;line-height:1.4;color:#9fbacc;cursor:help}
.project-card .source-note b{color:#d3e3ee;font-weight:700}

/* ===== Mis planificaciones ===== */
/* El trabajo dejó de vivir solo en el navegador: el docente puede tener varias planificaciones
   en el servidor y cambiar entre ellas desde aquí. */
.doc-switch{display:flex;gap:6px;align-items:center;margin-top:10px}
.doc-switch select{flex:1;min-width:0;padding:6px 8px;font-size:12px;border-radius:8px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);color:#eaf3f9}
.doc-switch select option{color:var(--ink)}
.doc-switch .icon-btn{color:#bcd6e6;font-size:16px;line-height:1;width:26px;height:26px;
  border-radius:7px;background:rgba(255,255,255,.1);flex:0 0 auto}
.doc-switch .icon-btn:hover{background:rgba(255,255,255,.22);color:#fff}
/* El estado de guardado ya no dice siempre lo mismo: verde si está en el servidor, ámbar si
   se quedó solo en este equipo. Un docente tiene derecho a saber cuál de las dos cosas pasó. */
.save-state{font-size:13px;margin-right:8px;color:var(--muted)}
.save-state.ok{color:var(--green)}
.save-state.warn{color:var(--orange);font-weight:600}

/* ===== Caracterización sociocultural ===== */
.caracterizacion{border:1px solid #cfe2f0;border-left:4px solid var(--blue);border-radius:14px;
  padding:20px 22px;margin:0 0 22px;background:#f7fbfe}
.carac-head{display:flex;gap:18px;justify-content:space-between;align-items:flex-start;margin-bottom:16px}
.carac-head h3{margin:3px 0 6px}
.carac-head p{margin:0;font-size:13px;color:#42607a;max-width:62ch;line-height:1.5}
.carac-alcance{flex:0 0 auto;max-width:230px;font-size:11.5px;line-height:1.45;color:#5b7a90;
  background:#fff;border:1px solid #d6e6f2;border-radius:10px;padding:9px 11px}
.carac-fuente{margin-bottom:14px}
.carac-fuente .hint{font-weight:400;line-height:1.45}
/* Encabezado del bloque de dimensiones. Los botones cuelgan de AQUÍ, no del campo de texto de
   arriba: pegados a él parecían suyos («guardar lo pegado») cuando lo que hacen es redactar y
   guardar las diez dimensiones de abajo. La línea separa un bloque del otro. */
.carac-dims-cab{margin:26px 0 12px;padding-top:18px;border-top:1px solid var(--line)}
.carac-dims-cab h4{margin:0;font-size:15px;color:#173c56}
.carac-dims-cab p{margin:3px 0 0;font-size:12px;color:var(--muted)}
.carac-acciones{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 16px}
.carac-estado{font-size:12px;color:var(--muted)}
.carac-estado.error{color:var(--red);font-weight:600}
.carac-vacia{margin:0;font-size:13px;color:#42607a;line-height:1.5}
.carac-dims{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.carac-dim{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 13px;gap:5px}
.carac-dim-cab{display:flex;justify-content:space-between;align-items:center;gap:8px}
.carac-dim-cab b{font-size:13px}
.carac-dim .hint{font-weight:400;font-size:11.5px;line-height:1.4}
.carac-dim textarea{font-size:13px}
/* De dónde salió cada dimensión. Lo redactado por IA va en ámbar a propósito: el docente lo
   firma, así que tiene que saber de un vistazo qué le falta revisar. */
.carac-origen{font-style:normal;font-size:10px;font-weight:800;letter-spacing:.03em;
  border-radius:99px;padding:3px 8px;white-space:nowrap;flex:0 0 auto}
.carac-origen.ok{background:var(--green-soft);color:var(--green-dark)}
.carac-origen.warn{background:#fdf1de;color:#8a5a12}
.carac-origen.error{background:#f4f6f8;color:#7b8a96}
.carac-sintesis{margin-top:16px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:15px 17px}
.carac-sintesis h4{margin:0 0 6px;font-size:13px}
.carac-sintesis h4+ol{margin:0 0 4px}
.carac-sintesis p,.carac-sintesis li{font-size:13px;color:#3d566a;line-height:1.5}
@media(max-width:1080px){.carac-dims{grid-template-columns:1fr}.carac-head{flex-direction:column}
  .carac-alcance{max-width:none}}

/* ===== Tres alternativas de situación significativa ===== */
/* Elegir entre enfoques distintos es decisión pedagógica del docente; con una sola propuesta
   solo podía aceptar o volver a generar a ciegas. Van en columnas para poder compararlas. */
.situaciones{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:14px 0 4px}
.situacion-op{background:#fff;border:1px solid var(--line);border-radius:14px;padding:15px 16px;
  display:flex;flex-direction:column;gap:8px}
.situacion-op:hover{border-color:#6b4fc4;box-shadow:0 3px 14px rgba(107,79,196,.12)}
.situacion-op>header{display:flex;justify-content:space-between;align-items:flex-start;gap:9px;margin:0}
.situacion-op h4{margin:0;font-size:14px;line-height:1.35}
.op-num{flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:#efe9fb;color:#6b4fc4;
  display:grid;place-items:center;font-size:11px;font-weight:800}
.op-parrafo{margin:0;font-size:12.5px;line-height:1.55;color:#31465a}
.op-reto{margin:0;font-size:12.5px;line-height:1.5;color:#1f3d55;background:#f4f9fd;
  border-left:3px solid var(--blue);border-radius:0 8px 8px 0;padding:8px 10px}
.op-dato{margin:0;font-size:11.5px;line-height:1.45;color:var(--muted)}
.op-dim{border-top:1px dashed var(--line);padding-top:7px}
.situacion-op .btn{margin-top:auto;align-self:stretch}
@media(max-width:1180px){.situaciones{grid-template-columns:1fr}}

/* Qué cubre el código modular y qué no. El PEI no es requisito —para eso está la búsqueda—
   pero hay dimensiones que ningún registro público conoce y hay que decirlo. */
.carac-cobertura{background:#fff;border:1px solid #d6e6f2;border-radius:12px;padding:12px 14px;margin-bottom:14px}
.carac-cobertura p{margin:0;font-size:12.5px;line-height:1.55;color:#3d566a}
.carac-cobertura-falta{margin-top:7px !important;padding-top:7px;border-top:1px dashed var(--line);color:#7a5a1e}

/* ===== Buscador de caseríos ===== */
/* Un distrito puede tener 60 centros poblados; en pantalla eran 60 fichas de golpe. */
.caserios-buscar{display:flex;gap:8px;margin:11px 0 4px}
.caserios-buscar input{flex:1;min-width:0;padding:9px 11px;font-size:13px}
.caserios-buscar .btn{flex:0 0 auto;white-space:nowrap}
.caserios-grupo{margin-top:11px}
.caserios-rotulo{display:block;font-size:11px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:#7b8fa0;margin-bottom:6px}
.caserios-grupo .chips-caserios{margin:0}
/* Los añadidos a mano se distinguen: no salen del padrón, los escribió el docente. */
.chip-caserio.propio::after{content:'tuyo';font-size:9px;font-weight:800;letter-spacing:.04em;
  background:var(--blue2);color:var(--blue);border-radius:99px;padding:2px 6px;margin-left:2px}
.ver-mas{margin-top:9px;border:0;background:transparent;color:var(--blue);font:inherit;
  font-size:12.5px;font-weight:700;cursor:pointer;padding:2px 0;text-decoration:underline}
.ver-mas:hover{color:var(--blue-dark)}

/* ===== Buscar el colegio por nombre ===== */
/* Una sola línea: el nombre ocupa lo que puede y la región solo acota. */
.padron-fila #regionFiltro{flex:0 0 auto;width:180px;min-width:0}
.padron-resultados{margin-top:8px;border:1px solid var(--line);border-radius:12px;background:#fff;
  max-height:320px;overflow-y:auto}
.padron-resultado{display:grid;grid-template-columns:1fr auto;gap:1px 12px;width:100%;text-align:left;
  border:0;border-bottom:1px solid var(--line);background:#fff;font:inherit;color:inherit;
  cursor:pointer;padding:10px 13px}
.padron-resultado:last-child{border-bottom:0}
.padron-resultado:hover,.padron-resultado:focus-visible{background:var(--blue2)}
.padron-resultado strong{font-size:13px;line-height:1.35}
.padron-resultado span{grid-column:1;font-size:11.5px;color:var(--muted);line-height:1.4}
/* El código modular a la derecha: es el dato que el docente venía buscando. */
.padron-resultado i{grid-row:1/span 3;grid-column:2;align-self:center;font-style:normal;
  font-size:11.5px;font-weight:800;color:var(--blue);background:var(--blue2);
  border-radius:99px;padding:4px 9px;font-variant-numeric:tabular-nums;white-space:nowrap}
.padron-resultado-vacio{margin:0;padding:12px 13px;font-size:12.5px;color:var(--muted);line-height:1.5}
@media(max-width:640px){.padron-fila #regionFiltro{width:100%}}

/* ===== Buscar la institución: un solo renglón ===== */
/* Código, nombre y región en la misma línea. Sin botón: el código se dispara al séptimo dígito
   y el nombre mientras escribes, así que un botón solo repetiría lo que ya pasa. */
.padron .padron-fila{display:flex;gap:8px;align-items:center}
.campo-codigo{flex:0 0 130px;width:130px;font-variant-numeric:tabular-nums;letter-spacing:.06em;
  font-weight:700}
.padron .padron-fila #buscarNombre{flex:1 1 auto;min-width:0}
.padron .padron-fila #regionFiltro{flex:0 0 168px;width:168px}
/* Mientras consulta el padrón, el propio campo lo dice: no hace falta un botón que cambie de texto. */
.campo-codigo.cargando{background:var(--blue2);border-color:#9dc2de;color:var(--blue);cursor:progress}
.padron-nota{margin:9px 0 0}

/* Resultados en rejilla: en vertical, veinte colegios eran una columna interminable. */
/* Las separaciones se dibujan con bordes, no con un fondo gris asomando por el hueco entre
   fichas: cuando la última fila quedaba a medias, ese hueco se veía como un bloque gris vacío. */
.padron-rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:0;
  background:#fff}
.padron-resultados{margin-top:9px;max-height:290px}
.padron-resultado{display:block;position:relative;width:100%;text-align:left;background:#fff;
  border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  font:inherit;color:inherit;cursor:pointer;padding:9px 11px;padding-right:74px}
.padron-resultado strong{display:block;font-size:12.5px;line-height:1.3}
/* Nivel y lugar, un renglón cada uno: "Básica Alternativa - Inicial e Intermedio" se partía en
   dos y esa ficha crecía, desalineando toda su fila. */
.padron-resultado .res-nivel{display:block;font-size:11px;color:var(--blue);font-weight:650;
  line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.padron-resultado .res-lugar{display:block;font-size:11px;color:var(--muted);line-height:1.35;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.padron-resultado i{position:absolute;top:9px;right:10px}
@media(max-width:820px){
  .padron .padron-fila{flex-wrap:wrap}
  .campo-codigo{flex:1 1 120px}
  .padron .padron-fila #regionFiltro{flex:1 1 140px;width:auto}
}

/* Los cercanos, en UN renglón. Apilados en tres filas se comían la pantalla; para ver el resto
   están el buscador y el "+N más". Se desplaza de lado, con un degradado que avisa de que sigue. */
.chips-caserios.en-linea{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin;
  padding-bottom:3px;-webkit-mask-image:linear-gradient(90deg,#000 92%,transparent)}
.chips-caserios.en-linea .chip-caserio{flex:0 0 auto}
.caserios-rotulo{margin-bottom:5px}
.caserios .chip-caserio{padding:5px 11px}
.aviso-caserios{margin-top:9px}
/* La caja de zona: los mismos datos, sin el párrafo de disculpas. La fuente va en la línea
   de cifras y el aviso completo en el title. */
.padron-zona strong{font-size:13px}
.padron-zona p{margin:3px 0;font-size:12.5px;line-height:1.45}
.zona-datos{color:var(--muted);font-size:11.5px !important}
.padron-censo em{color:var(--muted);font-style:normal;font-size:11.5px}

/* La caracterización impresa: tabla de dos columnas como el formato que ya usan las I.E. */
.paper .doc-dimensiones{margin:10px 0 14px;table-layout:fixed}
.paper .doc-dimensiones th:first-child,.paper .doc-dimensiones td:first-child{width:210px}
.paper .doc-dimensiones td{vertical-align:top;line-height:1.45}
.paper .doc-dimensiones i{color:#8a5a12;font-size:11px}
.paper .doc-pendiente{border-left:3px solid var(--orange);background:#fff8ea;padding:8px 11px;margin:0 0 12px}

/* ── La UNIDAD DE APRENDIZAJE, como el formato del colegio ──
   Los datos generales son una lista numerada con los dos puntos alineados —«1. Área  :  …»—, no
   una tabla; y los criterios y las transversales se enlistan con su rótulo en negrita delante. */
.paper .doc-generales{margin:4px 0 14px;padding:0 0 0 26px;font-size:12px;line-height:1.7}
.paper .doc-generales li{padding-left:4px}
.paper .doc-generales li b{display:inline-block;min-width:120px}
.paper .doc-generales .dos-puntos{display:inline-block;width:16px;text-align:center}
.paper .doc-generales .doc-pendiente{border:0;background:none;padding:0;margin:0;
  color:var(--muted);letter-spacing:.5px}
.paper .doc-lista-criterios{margin:6px 0 14px;padding-left:22px;font-size:12px;line-height:1.55}
.paper .doc-lista-criterios li{margin:0 0 6px;text-align:justify}
.paper .doc-lista-criterios .doc-pendiente{border:0;background:none;padding:0;margin:0;
  color:#8a5a12;font-style:italic}
/* La matriz de la unidad va a una fila por competencia: la competencia en negrita y sus
   capacidades en redonda, alineadas a la izquierda. La primera columna de las demás tablas del
   documento va centrada y en negrita, y aquí eso convertía las capacidades en un bloque negro. */
.paper .matriz-unidad td:first-child{text-align:left;font-weight:400;width:42%}
.paper .matriz-unidad td:first-child b{font-weight:700}
.paper .matriz-unidad ul{margin:4px 0 0;padding-left:18px}
.paper .matriz-unidad li{margin:0 0 2px}

/* ── Calendarización del año ── */
.grid.four{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.grid.dos{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:820px){.grid.dos{grid-template-columns:1fr}}
/* Los botones que redactan una sección, debajo de su encabezado. */
.acciones-vinculos,.acciones-materiales,.acciones-evaluacion{display:flex;align-items:center;
  gap:10px;flex-wrap:wrap;margin:0 0 14px}
.acciones-vinculos .hint,.acciones-materiales .hint,.acciones-evaluacion .hint{margin:0;flex:1 1 260px}
/* Las referencias no se editan: se componen del catálogo oficial y del padrón. */
.referencias-anual{margin:0 0 20px;padding:10px 14px;border-radius:10px;background:#f5f8fa;
  border:1px solid var(--line);font-size:12px;color:#3d4b57;line-height:1.5}
.bloques-fechas{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:6px 0 12px}
.bloque-fecha{display:grid;grid-template-columns:auto 1fr;gap:4px 8px;align-items:center;
  padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:#f8fafb}
.bloque-fecha .bloque-rotulo{grid-row:1/3;font-weight:700;font-size:15px;color:var(--brand);
  min-width:26px;text-align:center}
.bloque-fecha input{font-size:11px;padding:4px 6px}
.bloque-fecha b{grid-column:2;font-size:13px}
.bloque-fecha small{grid-column:2;font-size:10px;color:var(--muted);margin-top:-4px}
/* Cuántas unidades toca este periodo, al lado de sus semanas y editable: el reparto lo propone
   la calendarización —una unidad dura cerca de un mes— y el docente lo corrige. */
.bloque-unidades{grid-column:2;display:flex;align-items:baseline;gap:6px;margin-top:2px}
.bloque-unidades input{width:52px;font-size:13px;font-weight:700;padding:3px 5px;text-align:center}
.bloque-unidades small{grid-column:auto;margin:0;font-size:10px}
.calendario-resumen{margin-bottom:16px}
.cal-cifras{display:flex;flex-wrap:wrap;gap:8px}
.cal-cifras span{display:flex;flex-direction:column;padding:9px 14px;border-radius:12px;
  background:#eef4f9;font-size:11px;color:var(--muted);line-height:1.25}
.cal-cifras b{font-size:19px;color:var(--brand)}
.cal-cifras small{font-size:9px;opacity:.75}
.cal-aviso{margin:8px 0 0;padding:8px 12px;border-radius:10px;font-size:12px}
.cal-aviso.warn{background:#fdf5e3;color:#7a5b12}
.cal-aviso.error{background:#fdeaea;color:#8d2020}
/* La segunda tabla del formato: unidad, duración y semanas. Todo calculado — por eso no hay ni un
   campo editable dentro, y se dice debajo de dónde salen las cifras. */
.tabla-unidades-caja{margin-bottom:18px}
.tabla-unidades{width:100%;border-collapse:collapse;font-size:12.5px}
.tabla-unidades th,.tabla-unidades td{border:1px solid var(--line);padding:7px 10px;text-align:left}
.tabla-unidades th{background:#eef4f9;font-size:10.5px;text-transform:uppercase;letter-spacing:.03em;
  color:var(--muted)}
.tabla-unidades td:nth-child(n+3){text-align:center;white-space:nowrap}
.tabla-unidades small{display:block;color:var(--muted);font-size:11px;font-weight:400}
.tabla-unidades .fila-total td{background:#f2f6f9;font-weight:700}
.cal-nota{margin:6px 0 0;font-size:11.5px;color:var(--muted)}
.matriz-anual td{vertical-align:top}
.matriz-anual .col-bloque{text-align:center;white-space:nowrap}
.matriz-anual .col-num{width:58px}
.matriz-anual .col-num input{text-align:center}
.matriz-anual .col-num input.fuera{border-color:#c34141;background:#fdeaea}
.matriz-anual .col-num small,.matriz-anual .col-bloque small{display:block;font-size:9px;color:var(--muted);text-align:center}
.bloque-chip{display:inline-block;padding:2px 9px;border-radius:20px;background:var(--brand);
  color:#fff;font-size:11px;font-weight:700}
@media(max-width:900px){.grid.four,.bloques-fechas{grid-template-columns:1fr 1fr}}
.doc-calendario,.doc-unidades{width:100%;border-collapse:collapse;font-size:11px;margin:6px 0 4px}
.doc-calendario th,.doc-calendario td,.doc-unidades th,.doc-unidades td{border:1px solid #333;padding:5px 7px;vertical-align:top}
.doc-calendario th,.doc-unidades th{background:#eef4f9;font-size:10px;text-transform:uppercase;letter-spacing:.03em}
.doc-calendario td:nth-child(n+4),.doc-unidades td:nth-child(3),.doc-unidades td:nth-child(4){text-align:center}
.doc-unidades td:first-child{text-align:center;font-weight:700}
/* En la matriz impresa, la situación significativa va bajo el título, en la misma celda. */
.doc-situacion{display:block;margin-top:3px;font-size:10px;line-height:1.3;text-align:justify}
tr.doc-total td{background:#f2f6f9;font-weight:700}
.doc-nota{font-size:10px;color:var(--muted);margin:0 0 10px}
/* Datos informativos de la anual: rótulo y valor, dos columnas, como en el formato en papel. */
.doc-datos{width:100%;border-collapse:collapse;font-size:11px;margin:6px 0 10px}
.doc-datos th,.doc-datos td{border:1px solid #333;padding:5px 7px;vertical-align:top;text-align:left}
.doc-datos th{background:#eef4f9;width:32%;font-weight:700}
/* Las dos redacciones sueltas del anual (descripción general y evaluación): a todo el ancho. */
.campo-largo{margin-bottom:18px}
/* El botón que redacta una sección va en su encabezado, donde empieza lo que rellena. */
.accion-seccion{display:flex;flex-direction:column;align-items:flex-end;gap:4px;max-width:340px}
/* Cuando son varios botones y ninguna pista debajo —descargar todas, agregar sesión— van en fila:
   apilados ocupan tres renglones y empujan el paso entero hacia abajo. */
.accion-seccion.en-fila{flex-direction:row;align-items:center;flex-wrap:wrap;max-width:none;gap:8px}
.accion-seccion .hint{margin:0;text-align:right}
.accion-seccion .hint.ok{color:#2c6e2f}
.accion-seccion .hint.error{color:#8d2020}
.enlace-deshacer{background:none;border:0;padding:0;font:inherit;color:var(--brand);
  text-decoration:underline;cursor:pointer}
/* ── Matriz anual: una columna por competencia, como el formato del colegio ──
   Tiene que caber ENTERA en una pantalla de portátil (1366 menos la barra lateral ≈ 1050 px).
   Antes pedía 1100 px de ancho mínimo y las columnas de competencia quedaban fuera, a la derecha:
   el docente veía dos de las cuatro de su área y daba por hecho que faltaban. */
.matriz-anual{min-width:0;table-layout:fixed}
.matriz-anual th,.matriz-anual td{padding:7px 5px}
.matriz-anual .col-comp{width:32px;text-align:center;padding:6px 1px}
.matriz-anual th.col-comp{font-size:9px;letter-spacing:0;word-break:break-all;line-height:1.15}
/* El bloque de competencias se lee de un vistazo si está enmarcado, no suelto entre columnas. */
.matriz-anual th.col-comp:first-of-type,.matriz-anual td.col-comp:first-of-type{border-left:2px solid #d7e3ec}
.matriz-anual th.col-comp:last-of-type,.matriz-anual td.col-comp:last-of-type{border-right:2px solid #d7e3ec}
.matriz-anual .col-comp input[type=checkbox]{width:15px;height:15px;cursor:pointer;accent-color:var(--brand)}
/* Marca puesta por la IA a falta de decisión del docente: se ve distinta hasta que él la toca. */
.matriz-anual .col-comp input.propuesta{accent-color:#c98a2b;outline:2px dotted #c98a2b;outline-offset:1px}
.matriz-anual .equis.fija{display:inline-block;font-weight:700;color:var(--brand);cursor:help}
.matriz-anual .col-met{width:74px}
.matriz-anual .col-met select{padding:3px;font-size:11px}
/* La columna Unidad lleva DOS campos, título y situación significativa, uno debajo del otro: en
   la matriz del colegio van juntos en la misma celda. El título se distingue por el peso. */
/* `table-layout:fixed` reparte a partes iguales lo que no lleve ancho: la unidad se quedaba en
   160 px mientras las casillas de competencia sobraban. Se le da el ancho que necesita. */
.matriz-anual .col-titulo{width:42%}
.matriz-anual .celda-titulo{font-weight:600;margin-bottom:5px}
.matriz-anual .celda-situacion{font-size:11.5px;color:#3d4b57;line-height:1.4}
.matriz-anual td textarea,.matriz-anual td input{min-width:0;width:100%;padding:6px;font-size:12px}
/* Cada unidad ocupa dos filas. Arriba lo que se lee en columna; abajo, a todo lo ancho, los cuatro
   campos que hay que ESCRIBIR — con quince columnas en una sola fila el título de la unidad caía
   en una celda de tres caracteres («Nos / conoc / emos») y las cabeceras se montaban entre sí. */
.matriz-anual tr.u-principal>td{border-top:2px solid #d0dde8;padding-top:10px}
.matriz-anual tr.u-principal:first-child>td{border-top:0}
.matriz-anual tr.u-detalle>td{border-bottom:2px solid #d0dde8;padding:0 5px 12px}
.detalle-unidad{display:grid;gap:12px;grid-template-columns:190px minmax(240px,1.4fr) minmax(160px,1fr);
  align-items:start;background:#f7fafc;border:1px solid #e4edf3;border-radius:10px;padding:10px 12px}
.detalle-unidad:has(.campo-texto){grid-template-columns:190px minmax(220px,1.3fr) minmax(150px,1fr) 140px}
.rotulo-detalle{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.04em;
  font-weight:700;color:var(--muted);margin-bottom:4px}
.rotulo-detalle i{font-style:normal;font-weight:400;text-transform:none;letter-spacing:0;opacity:.8}
.campo-detalle textarea,.campo-detalle input{width:100%;padding:6px;font-size:12px}
.chips-enfoques{display:flex;flex-wrap:wrap;gap:3px;margin-bottom:6px}
/* El valor y la actitud del enfoque, bajo sus chips: el formato del colegio pide los tres. */
.campo-enfoques .enfoque-valor{margin-bottom:4px;font-weight:600}
.campo-enfoques textarea{font-size:11.5px}
/* La propuesta de la matriz son cinco columnas de texto: sin repartir, la situación se lleva
   media tabla y el campo temático sale en una palabra por renglón.
   La columna de la UNIDAD va estrecha y su título parte de línea: heredaba el `nowrap` de la
   tabla de títulos, donde la celda es «U1 · I», y aquí lleva además el nombre entero de la
   unidad. En una sola línea se comía 200 px y dejaba la situación significativa —que es lo que
   hay que leer para decidir— en una columna de sobre.
   Los anchos van en `table-layout:fixed` y sobre los `th`: en reparto automático el navegador
   mide el contenido y los `width` de las celdas son solo una sugerencia que pierde —la casilla
   declaraba 28 px y salía de 157—, y en fijo la primera fila es la que manda. */
.matriz-propuesta{table-layout:fixed}
.matriz-propuesta th:first-child{width:28px}
.matriz-propuesta th:nth-child(2){width:104px}
.matriz-propuesta th:nth-child(4){width:17%}
.matriz-propuesta th:nth-child(5){width:11%}
.matriz-propuesta th:nth-child(6){width:13%}
/* La 3.ª no lleva ancho: con las demás fijadas se queda con todo lo que sobra, que es lo que se
   quiere para la situación significativa. */
.matriz-propuesta td{overflow-wrap:break-word}
.matriz-propuesta td:nth-child(2){white-space:normal}
.matriz-propuesta td:nth-child(2) small{display:block;line-height:1.35;margin-top:2px}
@media(max-width:1000px){.detalle-unidad,.detalle-unidad:has(.campo-texto){grid-template-columns:1fr}}
/* Los generadores de la matriz, sobre ella: cada botón dice qué columna rellena. */
.acciones-matriz{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.acciones-matriz .hint{margin:0;flex:1 1 220px}
.matriz-nota-ia{font-size:11px;color:#8a5d12;background:#fdf5e3;border-radius:8px;
  padding:6px 10px;margin:0 0 10px}
.matriz-nota-ia:empty{display:none}
/* ── El documento que el colegio ya tiene ──
   Va antes de los generadores de la matriz porque es lo primero que hay que preguntar: lo que ya
   está decidido no se genera. Enmarcado y en gris para que no compita con el morado del asistente:
   de aquí no sale nada de IA, solo lo que el docente trae escrito. */
.caja-documento{border:1px dashed #bcd0e0;border-radius:12px;background:#fbfdff;
  padding:12px 14px;margin:0 0 14px}
.caja-documento h4{margin:0 0 4px;font-size:14px}
.caja-documento .doc-cabecera p{margin:0 0 10px;font-size:12.5px;color:var(--muted);line-height:1.5}
.doc-acciones{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.doc-acciones .hint{margin:0;flex:1 1 220px}
.doc-acciones .hint.ok{color:var(--green)}
.doc-acciones .hint.warn{color:#8a6a1f}
#cajaPegado{margin-top:10px;display:grid;gap:8px}
#cajaPegado textarea{width:100%;font-family:inherit;font-size:12.5px;line-height:1.5;
  border:1px solid var(--line);border-radius:10px;padding:9px 11px;resize:vertical}
#unidadesDelDocumento{margin-top:12px;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:12px 14px}
#unidadesDelDocumento .origin-label{display:block;margin-bottom:2px}
#unidadesDelDocumento .ojo{color:#8a6a1f}
/* La situación significativa es un párrafo entero: sin esto la tabla se sale de la caja. */
#unidadesDelDocumento .titulos-propuestos td:last-child{min-width:220px}
#unidadesDelDocumento .proposal-actions{display:flex;gap:8px;justify-content:flex-end}
/* `.assistant-bar` declara display:grid, que gana al `[hidden]` del navegador: en los pasos sin
   acciones la barra seguía a la vista, con el desplegable vacío y un botón que no hacía nada. */
.assistant-bar[hidden]{display:none}
/* Confirmar o corregir el contexto de la zona, sin salir de la ficha del padrón. */
.zona-acciones{display:flex;gap:8px;margin:10px 0 4px;flex-wrap:wrap}
.zona-acciones .btn{padding:6px 12px;font-size:12px}
.zona-campo{margin:8px 0 0;font-size:12px;gap:4px}
.zona-campo textarea{font-size:12px;padding:8px}
/* Cierre de un paso: lo que se puede entregar desde aquí sin esperar al documento final. */
.cierre-paso{display:flex;justify-content:space-between;align-items:center;gap:16px;
  flex-wrap:wrap;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.cierre-paso p{margin:0;color:var(--muted);font-size:13px}
.cierre-paso div{display:flex;gap:10px}
.doc-ficha th{width:32%;text-align:left;background:#f6f9fb}
/* Subir el PEI, el PCI o el PAT para sacarles el texto. */
.carac-subir{display:flex;flex-direction:column;gap:6px;margin:2px 0 10px;padding:10px 12px;
  border:1px dashed #bcd0e0;border-radius:12px;background:#fbfdff}
.carac-subir input[type=file]{font-size:12px;border:0;padding:0;background:none}
.carac-subir .hint.ok{color:var(--green)}
.carac-subir .hint.error{color:var(--red)}
/* Confirmar las dimensiones: al final, cuando ya las ha leído, no antes de bajar a ellas. */
.carac-cierre{display:flex;justify-content:space-between;align-items:center;gap:16px;
  flex-wrap:wrap;margin-top:18px;padding:14px 16px;border-radius:12px;
  background:#fdf5e3;border:1px solid #f0dfb6}
.carac-cierre p{margin:0;font-size:13px;color:#7a5b12;flex:1 1 320px}
.carac-detalle{display:block;font-style:normal;font-size:11px;opacity:.75;margin-top:2px}
/* Por qué la propuesta que se está viendo es una plantilla local y no la redactó la IA. Va en
   ámbar dentro de la tarjeta: es un aviso sobre lo que hay debajo, no un error de la pantalla. */
.prop-aviso{margin:0 0 12px;padding:9px 12px;border-radius:9px;font-size:12.5px;line-height:1.5;
  background:#fff6e2;border:1px solid #f0d9a8;color:#7a5a12}
.prop-aviso i{display:block;font-style:normal;font-size:11px;opacity:.8;margin-top:3px}
/* «Este grupo todavía no tiene diagnóstico»: se enseña con los dos campos vacíos, para que la
   pantalla en blanco no se lea como que el programa perdió lo escrito. */
.aviso-grupo{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  margin-top:14px;padding:12px 16px;border-radius:12px;background:var(--blue2);border:1px solid #c5dcef}
.aviso-grupo[hidden]{display:none}
.aviso-grupo p{margin:0;font-size:13px;color:#1d4a68;flex:1 1 340px;line-height:1.5}
.aviso-grupo small{color:#42607a}
#avisoGrupoNombre{font-weight:600;color:var(--blue)}
/* Con el diagnóstico ya escrito no hay nada que avisar, pero pedir otro borrador tiene que
   seguir a mano: el recuadro se retira y deja una línea pequeña con su botón. */
.aviso-grupo.discreto{background:none;border:0;padding:8px 0 0;margin-top:6px}
.aviso-grupo.discreto p{font-size:12px;color:var(--muted)}
.aviso-grupo.discreto #avisoTitulo,.aviso-grupo.discreto #avisoGrupoNombre{color:#42607a}
.aviso-grupo.discreto .btn{padding:6px 12px;font-size:12px}
/* La propuesta se coloca donde se pidió (ver propuestaJuntoA); dentro del paso necesita su aire. */
.step-panel>.assistant-proposal{margin:14px 0 0}
/* Documentos justificados, como se entregan a la UGEL. Los encabezados y las celdas de cifras
   llevan su propia alineación y no se tocan. */
.paper p,.paper li,.paper td,.paper blockquote{text-align:justify;hyphens:auto}
.paper h1,.paper h2,.paper h3,.paper th,.paper .doc-meta,
.paper td[align=center],.paper .doc-unidades td:nth-child(3),
.paper .doc-unidades td:nth-child(4),.paper .doc-calendario td:nth-child(n+4){text-align:inherit}
.paper h1{text-align:center}
@media print{
  /* Los márgenes del papel los pone el navegador; el encabezado con la fecha y el pie con la URL
     son un AJUSTE DE SU DIÁLOGO DE IMPRESIÓN («Más ajustes › Encabezados y pies de página») y no
     se pueden quitar desde aquí. Lo que sí se puede es no dejar hueco de sobra. */
  @page{margin:14mm 12mm}
  /* La programación anual va apaisada: su matriz tiene quince columnas y en vertical el campo
     temático se parte letra a letra. Los demás documentos siguen en vertical. */
  @page apaisado{size:A4 landscape;margin:12mm 10mm}
  .paper.apaisado{page:apaisado}
  .paper p,.paper li,.paper td{text-align:justify}
  /* En una tabla de quince columnas, justificar parte las palabras: aquí manda que se lea. */
  .paper .doc-unidades td{text-align:left;hyphens:none}
  /* Una tabla larga —la ruta de una unidad son veinte sesiones— NO cabe en lo que queda de hoja:
     con `break-inside:avoid` saltaba entera y dejaba media página en blanco bajo su título, que es
     lo que devuelve la UGEL. Se parte por filas, sin romper ninguna, y la cabecera se repite. */
  .paper table{break-inside:auto}
  .paper tr{break-inside:avoid}
  .paper thead{display:table-header-group}
  /* Y ningún título se queda solo al pie de la página, con su contenido en la siguiente. */
  .paper h2,.paper h3{break-after:avoid}
}
/* En pantalla, la vista previa del documento apaisado también es más ancha: si se ve angosta y
   sale ancha, el docente no se fía de lo que va a imprimir. */
.paper.apaisado{max-width:1180px}
.paper.apaisado .doc-unidades{font-size:10px}
.paper.apaisado .doc-unidades th,.paper.apaisado .doc-unidades td{padding:4px 5px}
/* El reparto de anchos lo pone el <colgroup> que arma la matriz; sin `fixed` el navegador lo
   ignora en cuanto una celda trae texto largo. Las abreviaturas de competencia parten de sílaba
   para no reclamar el ancho de «LDTTELM» entero. */
.doc-unidades{table-layout:fixed}
.doc-unidades th{word-break:break-word;hyphens:none}
/* Los títulos propuestos para todo el año: uno por fila, con lo que sustituyen a la vista. */
.titulos-propuestos{width:100%;border-collapse:collapse;font-size:12px;margin:10px 0}
.titulos-propuestos th,.titulos-propuestos td{border-bottom:1px solid var(--line);
  padding:8px 10px;vertical-align:top;text-align:left}
.titulos-propuestos th{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.titulos-propuestos td:first-child,.titulos-propuestos th:first-child{width:28px}
.titulos-propuestos td:nth-child(2){white-space:nowrap;color:var(--muted)}
.titulos-propuestos small{color:var(--muted)}
.titulos-propuestos input[type=checkbox]{width:16px;height:16px;accent-color:var(--brand)}
/* El campo temático llega numerado, un tema por sesión: los saltos de línea SON la propuesta. */
.titulos-propuestos .prop-valor{display:block;white-space:pre-wrap;font-weight:inherit}
@media(max-width:1120px){.matriz-anual{min-width:780px}}
/* Los enfoques transversales, como fichas que se encienden. Con casillas y el nombre entero cada
   fila de la matriz medía media pantalla y había que desplazarse para ver la siguiente unidad. */
.chip-enfoque{display:inline-block;margin:1px;padding:2px 7px;border-radius:20px;
  border:1px solid var(--line);background:#fff;color:var(--muted);font-size:10px;line-height:1.4;
  cursor:pointer;font-family:inherit}
.chip-enfoque:hover{border-color:var(--brand);color:var(--brand)}
.chip-enfoque.puesto{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600}
.matriz-leyenda{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:10px;color:var(--muted);margin:2px 0 14px}
.matriz-leyenda i{font-style:normal;font-weight:700;color:var(--brand)}
.matriz-leyenda span{white-space:nowrap}
.leyenda-met{opacity:.8}
.grid.four{align-items:end}
.grid.four label .hint{min-height:0}
.matriz-vinculos{width:100%;border-collapse:collapse;font-size:11px}
.matriz-vinculos th,.matriz-vinculos td{border:1px solid var(--line);padding:6px 8px;vertical-align:middle}
.matriz-vinculos th{background:#f8fafb;font-size:10px}
.matriz-vinculos td i{font-style:normal;font-weight:700;color:var(--brand)}
.matriz-vinculos .col-comp{width:40px;text-align:center}
/* Igual que en el formato: una fila por unidad, y una columna por competencia de otra área. */
.matriz-vinculos .col-comp-vinc{width:120px;vertical-align:bottom;line-height:1.3;
  font-weight:400;text-align:center;position:relative;padding-top:18px}
.matriz-vinculos .area-vinc{display:block;font-size:9px;text-transform:uppercase;
  letter-spacing:.04em;color:var(--muted);font-weight:700}
.matriz-vinculos .col-comp-vinc .icon-btn{position:absolute;top:2px;right:2px}
.matriz-vinculos th i{font-style:normal;font-weight:700;color:var(--brand)}
.matriz-vinculos .col-met-vinc{text-align:center;font-weight:700;color:var(--brand);width:64px}
.matriz-vinculos .col-dur-vinc{text-align:center;white-space:nowrap;width:118px}
.matriz-vinculos small{color:var(--muted)}
.matriz-vinculos .col-comp input[type=checkbox]{width:15px;height:15px;accent-color:var(--brand);cursor:pointer}
/* La unidad entera de una vez: el botón manda, y al lado se dice por dónde va la cadena. */
.acciones-unidad{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px;
  padding:12px 14px;background:#f4f9fd;border:1px solid #cfe2f0;border-radius:14px}
.acciones-unidad .hint{flex:1;min-width:280px}
.acciones-unidad .hint.ok{color:#467729}
.acciones-unidad .hint.warn{color:#8a6a1f}
.acciones-unidad .hint.error{color:var(--red)}
/* ── LAS UNIDADES DEL AÑO, UNA TARJETA CADA UNA ──
   Como las sesiones: plegadas dicen qué unidad son, cuánto duran y qué les falta; la que se está
   trabajando se despliega y el formulario entero se mueve dentro. Solo una abierta a la vez,
   porque solo una se edita a la vez. */
.unit-list{display:grid;gap:10px;margin-bottom:18px}
/* Mismo aspecto que la tarjeta de sesión, sin compartir su clase: el paso de Sesiones reasigna el
   `ontoggle` de todo lo que sea `.session-card`, y estas dejarían de responder al desplegarse. */
.unit-card{border:1px solid var(--line);border-radius:15px;overflow:hidden}
.unit-card>summary{padding:13px 16px;background:#f6f8fa;display:flex;align-items:center;
  gap:12px;cursor:pointer;list-style:none;user-select:none}
.unit-card>summary::-webkit-details-marker{display:none}
.unit-card>summary::after{content:'▸';color:var(--muted);font-size:15px;transition:transform .15s}
.unit-card[open]>summary::after{transform:rotate(90deg)}
.unit-card>summary:hover{background:#eef3f7}
.unit-card[open]>summary{background:var(--blue2)}
.unit-estado{margin-left:auto;font-size:11px;font-weight:700;border-radius:999px;padding:3px 10px;
  white-space:nowrap}
.unit-estado.ok{background:var(--green-soft);color:#467729}
.unit-estado.falta{background:#fdf3e0;color:#8a6a1f}
/* Cada unidad se descarga sin abrirla: los dos botones viven en el resumen, pequeños, y no
   compiten con el título de la unidad. */
.unit-acciones{display:flex;gap:6px;margin-left:10px}
.unit-acciones .btn{padding:4px 10px;font-size:11.5px}
.unit-card>.unit-body{padding:0}
.unit-card>.unit-body>.unit-form{padding:18px 16px 4px;border-top:1px solid var(--line)}
.unit-card>.unit-body>.unit-form>.acciones-unidad{margin-top:0}
.curriculum-card .accion-seccion{display:flex;align-items:center;justify-content:space-between;
  gap:10px;margin-bottom:8px}
/* I. Datos generales de la unidad: no se escriben, salen del anual y de la calendarización. Se
   enseñan como ficha, para que se lea de un vistazo que la unidad abierta es la que se cree. */
.datos-unidad{background:#f4f9fd;border:1px solid #cfe2f0;border-left:4px solid var(--blue);
  border-radius:14px;padding:14px 18px;margin-bottom:18px}
.datos-unidad dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:10px 18px;margin:8px 0 0}
.datos-unidad dt{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);
  font-weight:800}
.datos-unidad dd{margin:2px 0 0;font-size:13px;font-weight:600;color:#254a63}
/* III. Ruta de S-A en la pantalla: la misma tabla que se entrega, de solo lectura. Se distingue de
   los campos editables por el fondo y porque no tiene ni bordes de entrada ni cursor de texto. */
.ruta-unidad{margin:0 0 20px}
.tabla-ruta{width:100%;border-collapse:collapse;font-size:12.5px;background:#fff;
  border:1px solid var(--line);border-radius:12px;overflow:hidden}
.tabla-ruta th{background:#f4f9fd;font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--muted);text-align:left;padding:8px 12px;border-bottom:1px solid var(--line)}
.tabla-ruta td{padding:8px 12px;border-bottom:1px solid #eef2f5;vertical-align:top}
.tabla-ruta tbody tr:last-child td{border-bottom:0}
.tabla-ruta td:first-child{white-space:nowrap;font-weight:700;color:#254a63;width:96px}
.tabla-ruta td:last-child{white-space:nowrap;color:var(--muted);width:190px}
.tabla-ruta .sin-titulo{color:var(--muted);font-style:italic}
.tabla-ruta tfoot td{background:#f8fafb;font-size:11.5px;color:var(--muted);font-weight:700;
  border-top:1px solid var(--line);border-bottom:0}
/* Las SESIONES DE APRENDIZAJE en el documento: cada una es un entregable con sus cinco apartados,
   así que empieza en página nueva y su encabezado la nombra con su unidad. */
.paper .doc-sesion{margin:0 0 26px;break-inside:auto}
.paper .doc-sesion+.doc-sesion{border-top:1px solid var(--line);padding-top:20px}
.paper .doc-sesion-titulo{font-size:15px;margin:0 0 14px;text-align:center;text-transform:none}
.paper .doc-sesion h4{font-size:13px;margin:16px 0 6px;color:#173c56}
.paper .tabla-secuencia td:first-child{width:110px;font-weight:700;text-align:left}
.paper .tabla-secuencia td:last-child{width:80px;text-align:center;white-space:nowrap}
.paper .tabla-secuencia ul{margin:0;padding-left:18px}
.paper .tabla-secuencia li{margin:0 0 3px}
/* Dentro de una celda o de una viñeta, «pendiente» es una palabra, no un cartel: la caja naranja
   con su borde se sale de la columna y desordena la tabla. */
.paper .doc-sesion .doc-pendiente{border:0;background:none;padding:0;margin:0;color:#8a5a12;
  font-style:italic}
@media print{.paper .doc-sesion+.doc-sesion{break-before:page;border-top:0;padding-top:0}}
/* Las UNIDADES del año en un solo documento: cada una es un entregable con su formato de EBR, así
   que empieza en página nueva y su encabezado la nombra con su número. */
.paper .doc-unidad{margin:0 0 26px}
.paper .doc-unidad+.doc-unidad{border-top:1px solid var(--line);padding-top:20px}
.paper .doc-unidad-titulo{font-size:15px;margin:0 0 14px;text-align:center;text-transform:none;
  border:0;padding:0}
@media print{.paper .doc-unidad+.doc-unidad{break-before:page;border-top:0;padding-top:0}}
/* V. Criterios de evaluación: cada uno cuelga de una capacidad del CNEB, en un desplegable —no se
   escriben a mano— y debajo el criterio. */
.criterion.con-capacidad{align-items:start}
.criterion-campos{display:flex;flex-direction:column;gap:6px}
.criterion-campos select{font-size:12px;padding:6px 8px;color:#405d71}
/* VIII. Evaluación: la lista de instrumentos. Tres columnas —con qué, dónde y para qué— y el
   «para qué» se lleva el ancho, que es donde se escribe. */
.lista-instrumentos{margin:6px 0 4px}
.tabla-instrumentos{table-layout:fixed;width:100%}
.tabla-instrumentos th:nth-child(1),.tabla-instrumentos td:nth-child(1){width:22%}
.tabla-instrumentos th:nth-child(2),.tabla-instrumentos td:nth-child(2){width:14%}
.tabla-instrumentos th:nth-child(4),.tabla-instrumentos td:nth-child(4){width:34px;text-align:center}
.tabla-instrumentos input,.tabla-instrumentos select{width:100%;font-size:11.5px;padding:3px 5px}
.doc-instrumentos td:first-child{text-align:left}
.doc-instrumentos td:last-child{text-align:left}
/* El «Área transversal» (competencias 28 y 29): va siempre y en todas las unidades, así que no
   lleva casilla ni botón de quitar. Se distingue con un fondo tenue para que se lea como lo que es
   —una columna fija—, igual que la X fija de la matriz anual. */
.matriz-vinculos .col-transversal{background:#eef4f9}
.matriz-vinculos .equis.fija{display:inline-block;font-weight:700;color:var(--brand);cursor:help}
#agregarVinculo{max-width:340px;font-size:12px}
.doc-vinculos{width:100%;border-collapse:collapse;font-size:11px;margin:6px 0}
.doc-vinculos th,.doc-vinculos td{border:1px solid #333;padding:5px 7px}
.doc-vinculos th{background:#eef4f9;font-size:10px;text-transform:uppercase}
.doc-vinculos td:not(:first-child){text-align:center}
/* Los estándares del ciclo: dos columnas de texto, no una lista de equis. El nombre de la
   competencia necesita un cuarto del ancho o se parte en una palabra por renglón. */
.doc-estandares td:first-child{width:24%}
.doc-estandares td:not(:first-child){text-align:justify}
.tabla-instrumento .col-criterio{width:24%;font-size:11px;vertical-align:top;padding-top:10px}
.tabla-instrumento textarea{font-size:11px;min-height:56px}
/* La duración de cada sesión, en horas pedagógicas, con su equivalencia en minutos al lado: el
   docente piensa en «90 minutos» y el módulo cuenta en horas de 45. */
.duracion-sesion{display:flex;align-items:center;gap:8px}
.duracion-sesion input{width:74px}
.duracion-sesion small{color:var(--muted);font-weight:400}
/* ── La SESIÓN DE APRENDIZAJE con su formato ──
   Cada sesión es un documento entero —información general, propósito, tres etapas, tarea e
   instrumento—, así que la tarjeta se pliega: una unidad de veinte sesiones abiertas es una
   pantalla por la que no se puede navegar. Plegada enseña lo que se busca: número, nombre y
   cuánto dura. */
.session-card>summary{padding:13px 16px;background:#f6f8fa;display:flex;align-items:center;
  gap:12px;cursor:pointer;list-style:none;user-select:none}
.session-card>summary::-webkit-details-marker{display:none}
.session-card>summary::after{content:'▸';margin-left:auto;color:var(--muted);font-size:15px;
  transition:transform .15s}
.session-card[open]>summary::after{transform:rotate(90deg)}
.session-card>summary:hover{background:#eef3f7}
.session-resumen{display:flex;flex-direction:column;min-width:0}
.session-resumen b{font-size:14px;color:#1d3d53;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.session-resumen small{color:var(--muted);font-weight:400;font-size:11.5px}
.session-card>summary .icon-btn{margin-left:4px;order:3}
.session-card .session-body{display:block;padding:18px 16px 8px}
/* Abierta, la tarjeta ES el formato de la sesión: su encabezado, los cinco apartados con sus
   nombres y la información general en lista, con los campos en su renglón. Lo que no se escribe
   —área, grado, docente— se ve igual, en gris: viene del perfil y del anual. */
.sesion-encabezado{margin:0 0 16px;text-align:center;font-weight:800;font-size:14px;color:#1d3d53}
h4.apartado-sesion{margin:20px 0 8px;font-size:13.5px;color:#173c56;
  border-bottom:1px solid var(--line);padding-bottom:5px}
h4.apartado-sesion:first-of-type{margin-top:4px}
/* La viñeta se pinta a mano: en un <li> con display:flex el navegador se come el marcador, y en
   el formato del colegio los seis datos van con su punto delante. */
.info-sesion{list-style:none;margin:0 0 6px;padding-left:10px;font-size:13px}
.info-sesion li{margin:0 0 9px;display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  color:#304c61;font-weight:750}
.info-sesion li::before{content:'•';color:var(--muted);flex:0 0 auto}
.info-sesion li>b{flex:0 0 auto}
.info-sesion input:not([type=date]):not([type=number]),.info-sesion select{flex:1 1 260px;
  min-width:200px;font-weight:400}
.info-sesion .heredado{font-weight:400;color:#48657a;background:#f4f7f9;border-radius:8px;
  padding:5px 10px;border:1px solid var(--line)}
.secuencia-sesion{margin:4px 0 18px}
.secuencia-sesion .section-heading.small{margin:18px 0 10px}
.secuencia-sesion h4{margin:2px 0;font-size:14px}
.etapa-sesion{display:grid;grid-template-columns:150px 1fr;gap:12px;align-items:start;
  padding:10px 0;border-top:1px solid var(--line)}
.etapa-rotulo{display:flex;flex-direction:column;gap:6px;font-size:13px;color:#304c61}
.etapa-tiempo{display:flex;align-items:center;gap:6px}
.etapa-tiempo input{width:70px;padding:6px 8px;text-align:center}
.etapa-tiempo small{color:var(--muted);font-size:11px}
/* Cada sesión se descarga sola: los dos botones al pie de su tarjeta, discretos, porque lo
   habitual es entregar la unidad entera y esto es para la que se pide suelta. */
.acciones-sesion{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:16px 0 4px;
  padding-top:12px;border-top:1px solid var(--line)}
.acciones-sesion .hint{margin:0 auto 0 0}
.acciones-sesion .btn{padding:7px 14px;font-size:12.5px}
.fechas-sesion{display:flex;align-items:center;gap:8px}
.fechas-sesion small{color:var(--muted);font-weight:400}
.fechas-sesion input{padding:9px 10px}
@media(max-width:900px){.etapa-sesion{grid-template-columns:1fr}}
/* Lo que las sesiones le cuestan a la unidad: sus horas, las semanas que suman y si eso cuadra
   con lo que la unidad tiene en la calendarización. */
.balance-sesiones{margin:14px 0 0;padding:12px 14px;border:1px solid var(--line);border-radius:12px;
  background:#f8fafc}
.balance-cifras{margin:0;font-size:13px}
.balance-cifras b{color:var(--blue)}
.balance-aviso{margin:6px 0 0;font-size:12px}
.balance-aviso.ok{color:var(--green)}
.balance-aviso.warn{color:#8a5d12}
.balance-sesiones .btn{margin-top:10px;font-size:12px}
/* La mezcla de duraciones de las sesiones, bajo los mandos del año y a todo el ancho: es una
   explicación de lo que hace el módulo, no un campo más de la rejilla. */
.pista-sesion{grid-column:1/-1;margin:-8px 0 0}
/* La tabla del año escolar: las semanas de gestión se distinguen de las lectivas, que son las que
   el docente ya fijó arriba en los bloques. */
.tabla-ano .fila-gestion{background:#fbfcfd;color:#3d4b57}
.tabla-ano .fila-lectivo td:first-child{font-weight:700;color:var(--brand)}
.fechas-gestion{display:flex;gap:6px;flex-wrap:wrap}
.fechas-gestion input{font-size:11px;padding:3px 5px;width:auto}