/* Materiales imprimibles de «Un Estado en clase». Mismos colores y letras que la web,
   pensados para A4 en blanco y negro o en color. En pantalla se ven como una hoja. */
:root{
  --papel:#FFFFFF; --superficie:#F6F8FB; --tinta:#1E2330; --tinta-suave:#555C6B; --linea:#D5DAE1;
  --san:#B0342A; --edu:#2D8A3E; --esc:#1F5C99; --san-claro:#FCEDEB; --edu-claro:#E9F6EC; --esc-claro:#E8F1FB;
  --moneda1:#E8B923; --morado:#5B3F8C; --morado-claro:#E7E0F2; --sol:#FFF5D6;
  --display:"Bricolage Grotesque",system-ui,sans-serif; --texto:"Literata",Georgia,serif;
  color-scheme:light;
}
@page{size:A4;margin:13mm 14mm}
*{box-sizing:border-box}
html{-webkit-print-color-adjust:exact;print-color-adjust:exact}
body{margin:0;background:#E9ECF1;color:var(--tinta);font-family:var(--texto);font-size:9.6pt;line-height:1.4}
.hoja{background:var(--papel);width:210mm;min-height:297mm;margin:0 auto 10mm;padding:13mm 14mm}
.barra{max-width:210mm;margin:0 auto;padding:12px 0;display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-family:var(--display);font-size:11pt}
.barra a,.barra button{font:inherit;font-weight:700;color:var(--tinta);background:var(--papel);border:2px solid var(--tinta);border-radius:999px;padding:6px 14px;text-decoration:none;cursor:pointer}
@media print{
  body{background:none}
  .barra{display:none}
  .hoja{width:auto;min-height:0;margin:0;padding:0}
  .salto{break-before:page}
}
@media screen and (max-width:820px){
  .hoja{width:auto;min-height:0;padding:16px;margin:0 0 12px}
  .barra{padding:12px 16px}
  .tabla-ancha{overflow-x:auto}
}

h1,h2,h3{font-family:var(--display);line-height:1.1;margin:0;letter-spacing:-.01em}
h1{font-size:22pt;font-weight:800}
h2{font-size:12.5pt;font-weight:800;margin:4mm 0 2mm;padding-bottom:1mm;border-bottom:2px solid var(--tinta)}
h3{font-size:10.5pt;font-weight:700;margin:3mm 0 1mm}
p{margin:0 0 2mm}
ul,ol{margin:0 0 2mm;padding-left:5mm}
li{margin-bottom:1mm}
.cabecera{display:flex;justify-content:space-between;align-items:flex-end;gap:6mm;border-bottom:4px solid var(--tinta);padding-bottom:3mm;margin-bottom:3mm}
.cabecera .marca{font-family:var(--display);font-weight:800;font-size:10pt;display:flex;align-items:center;gap:2mm}
.cabecera .marca i{display:inline-block;width:3.2mm;height:3.2mm;background:var(--tinta)}
.cabecera .lema{font-family:var(--display);font-size:9.5pt;color:var(--tinta-suave);text-align:right}
.entradilla{font-size:11pt;margin:2mm 0 3mm}
.pie{margin-top:3mm;padding-top:1.5mm;border-top:1px solid var(--linea);font-family:var(--display);font-size:7.5pt;color:var(--tinta-suave);display:flex;justify-content:space-between;gap:4mm}
.pie span:last-child{white-space:nowrap}

.dos{display:grid;grid-template-columns:1fr 1fr;gap:0 7mm}
.dos>*{min-width:0}
@media screen and (max-width:820px){.dos{grid-template-columns:1fr}}
.caja{background:var(--superficie);border:1px solid var(--linea);border-radius:2mm;padding:2.5mm 3.5mm;margin:2mm 0;break-inside:avoid}
.caja.sol{background:var(--sol);border-color:#E9D79A}
.caja.morada{background:var(--morado-claro);border-color:#C9BCE3}
.caja h3{margin-top:0}
.nota{font-size:8.5pt;color:var(--tinta-suave)}

table{border-collapse:collapse;width:100%;font-family:var(--display);font-size:9pt;margin:1mm 0 2mm;break-inside:avoid}
th,td{border:1px solid var(--linea);padding:1.2mm 2mm;text-align:left;vertical-align:top}
th{background:var(--superficie);font-weight:700}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums}
td.c,th.c{text-align:center}

.fases{list-style:none;padding:0;counter-reset:f;margin:0}
.fases>li{counter-increment:f;display:grid;grid-template-columns:7mm 1fr;gap:2mm;margin-bottom:1.6mm;break-inside:avoid}
.fases>li::before{content:counter(f);font-family:var(--display);font-weight:800;font-size:13pt;line-height:1}
.fases b{font-family:var(--display)}

.san{color:var(--san)} .edu{color:var(--edu)} .esc{color:var(--esc)}
.chip{display:inline-block;font-family:var(--display);font-weight:700;font-size:8pt;padding:.2mm 2mm;border-radius:999px;border:1px solid currentColor}
.clase-alta{border-left:2mm solid #3E2A66} .clase-media{border-left:2mm solid #7A5DB0} .clase-baja{border-left:2mm solid #B9A6DE}
.tiempo{font-family:var(--display);font-weight:700;white-space:nowrap}
.cita{font-family:var(--display);font-size:10.5pt;font-weight:500;border-left:3px solid var(--tinta);padding-left:3mm;margin:2mm 0}