/* Presentación institucional Parks Industrial · 16:9 (254 × 142.9 mm)
   Base clara, Montserrat, verde de marca como acento, un solo bloque negro
   por lámina. Se imprime a PDF apaisado: una lámina por hoja. */
:root{
  --verde:#05662F; --verde-claro:#0A7D3A; --lima:#87BC1C;
  --carbon:#1E1E1E; --grafito:#262626; --gris:#707070; --gris-suave:#9A9A9A;
  --fondo:#F3F4F2; --tarjeta:#FFFFFF; --hairline:#E6E8EB; --tinte:#EAF3EC;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;background:#D9DCD6;
  font-family:"Montserrat","Poppins",Arial,sans-serif;color:var(--carbon);
  -webkit-font-smoothing:antialiased}

.lam{ position:relative; width:254mm; height:142.9mm; margin:0 auto 6mm;
  background:var(--tarjeta); padding:13mm 15mm 11mm; overflow:hidden;
  display:flex; flex-direction:column; }
.lam.gris{ background:var(--fondo) }
.lam.negra{ background:var(--carbon); color:#FFF }

/* Encabezado de lámina */
.eyebrow{ font-size:7.4pt; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--verde); margin:0 0 2.5mm }
.lam.negra .eyebrow{ color:var(--lima) }
h1{ font-size:26pt; font-weight:800; letter-spacing:-.02em; line-height:1.08; margin:0 0 3mm }
h2{ font-size:19pt; font-weight:800; letter-spacing:-.015em; line-height:1.12; margin:0 0 3mm }
h3{ font-size:10pt; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--grafito); margin:0 0 2.5mm; padding-bottom:1.4mm;
  border-bottom:2px solid var(--lima); display:inline-block }
.bajada{ font-size:11pt; line-height:1.45; color:var(--gris); margin:0 0 5mm; max-width:180mm }
.lam.negra .bajada{ color:rgba(255,255,255,.72) }

/* Numeración y pie */
.folio{ position:absolute; right:15mm; bottom:6mm; font-size:7.2pt; letter-spacing:.14em;
  color:var(--gris-suave); text-transform:uppercase }
.marca{ position:absolute; left:15mm; bottom:6mm; font-size:7.2pt; letter-spacing:.14em;
  color:var(--gris-suave); text-transform:uppercase }
.lam.negra .folio,.lam.negra .marca{ color:rgba(255,255,255,.42) }

.cuerpo{ flex:1; min-height:0 }

/* Rejillas */
.rej{ display:grid; gap:4mm }
.rej.d2{ grid-template-columns:repeat(2,1fr) }
.rej.d3{ grid-template-columns:repeat(3,1fr) }
.rej.d4{ grid-template-columns:repeat(4,1fr) }
.rej.d5{ grid-template-columns:repeat(5,1fr) }

/* Tarjetas */
.tj{ background:var(--fondo); border:1px solid var(--hairline); border-radius:2.4mm;
  padding:4.5mm 5mm; display:flex; flex-direction:column; gap:1.8mm }
.lam.gris .tj{ background:var(--tarjeta) }
.tj .n{ font-size:8pt; font-weight:800; color:var(--verde); letter-spacing:.1em }
.tj .t{ font-size:11pt; font-weight:700; line-height:1.2 }
.tj .d{ font-size:8.8pt; line-height:1.42; color:var(--gris) }
.tj.acento{ border-left:3px solid var(--verde) }
.tj.alerta{ border-left:3px solid var(--carbon) }
.tj.aviso{ border-left:3px dashed var(--gris) }

/* Cifras */
.cifras{ display:grid; gap:0; border:1px solid var(--hairline); border-radius:2.4mm;
  overflow:hidden; background:var(--tarjeta) }
.cifras > div{ padding:5mm 5.5mm; border-right:1px solid var(--hairline) }
.cifras > div:last-child{ border-right:none }
.cifras .n{ font-size:24pt; font-weight:800; letter-spacing:-.03em; line-height:1 }
.cifras .t{ font-size:7.4pt; font-weight:600; letter-spacing:.11em; text-transform:uppercase;
  color:var(--gris); margin-top:1.6mm; line-height:1.3 }

/* Tablas */
table{ width:100%; border-collapse:collapse; font-size:8.8pt }
thead th{ font-size:7.2pt; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--gris); text-align:left; padding:0 3mm 2mm; border-bottom:1.5px solid var(--carbon) }
tbody td{ padding:2.6mm 3mm; border-bottom:1px solid var(--hairline); vertical-align:top;
  line-height:1.38 }
tbody tr:last-child td{ border-bottom:none }
td.eje{ font-weight:700; color:var(--carbon) }
td.si{ color:var(--verde-claro); font-weight:600 }
td.no{ color:var(--carbon); font-weight:700 }
td.mid{ color:var(--grafito); font-weight:600 }
.num{ font-variant-numeric:tabular-nums; white-space:nowrap }

/* Bloque negro: uno por lámina como máximo */
.bloque{ background:var(--carbon); color:#FFF; border-radius:2.4mm; padding:5mm 6mm }
.bloque .k{ font-size:7.4pt; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--lima); margin-bottom:2mm }
.bloque p{ margin:0; font-size:10pt; line-height:1.45; color:rgba(255,255,255,.85) }
.bloque strong{ color:#FFF; font-weight:700 }

/* Listas */
ul.lista{ margin:0; padding:0; list-style:none }
ul.lista li{ position:relative; padding-left:5mm; margin-bottom:2.4mm;
  font-size:9.4pt; line-height:1.42 }
ul.lista li::before{ content:""; position:absolute; left:0; top:1.7mm;
  width:2mm; height:2mm; background:var(--lima) }
ul.lista li b{ font-weight:700; color:var(--carbon) }
.lam.negra ul.lista li b{ color:#FFF }

/* Línea de tiempo */
.linea{ display:grid; gap:0; margin-top:2mm }
.linea > div{ border-top:3px solid var(--hairline); padding:3mm 4mm 0 0 }
.linea > div.on{ border-top-color:var(--verde) }
.linea .f{ font-size:7.2pt; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--verde) }
.linea .t{ font-size:10pt; font-weight:700; margin:1.4mm 0 1mm; line-height:1.2 }
.linea .d{ font-size:8.4pt; color:var(--gris); line-height:1.4 }

@page{ size:254mm 142.9mm; margin:0 }
@media print{ html,body{background:#FFF} .pila{ padding:0; overflow:visible } .lam{ margin:0; page-break-after:always; break-after:page } }

/* Etiquetas de estado: la forma distingue, la paleta no cambia */
.chip{ display:inline-block; font-size:6.6pt; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  padding:.5mm 1.7mm; border-radius:.9mm; white-space:nowrap; line-height:1.5; vertical-align:middle }
.chip.bloquea{ border:1.5px solid var(--carbon); color:var(--carbon) }
.chip.bloquea::before{ content:""; display:inline-block; width:1.5mm; height:1.5mm; background:currentColor; margin-right:1.2mm; vertical-align:.1mm }
.chip.mitiga{ border:1px solid var(--gris-suave); color:var(--grafito) }
.chip.ok{ background:var(--tinte); color:var(--verde); border:1px solid var(--tinte) }
.chip.pend{ border:1px dashed var(--gris); color:var(--gris) }
.mono{ font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.92em; letter-spacing:-.01em }
.pila{ padding:8mm 0; overflow-x:auto }
.pie-nota{ font-size:7.2pt; color:var(--gris); margin-top:2.5mm; line-height:1.4 }
.fig{ flex:1; min-height:0; display:flex; align-items:center; justify-content:center }
.fig img{ max-width:100%; max-height:100%; object-fit:contain; display:block }
/* Diagrama de Gantt */
.gantt{ display:grid; grid-template-columns:44mm 1fr; row-gap:1.6mm; column-gap:4mm; align-items:center }
.gantt .fase{ font-size:8.4pt; font-weight:700; line-height:1.2 }
.gantt .fase span{ display:block; font-weight:500; color:var(--gris); font-size:7.2pt }
.gantt .pista{ position:relative; height:9mm; border-left:1px solid var(--hairline) }
.gantt .b{ position:absolute; height:3.4mm; border-radius:.7mm; font-size:6.4pt; font-weight:700;
  display:flex; align-items:center; padding-left:1.4mm; white-space:nowrap; font-variant-numeric:tabular-nums }
.gantt .b.dos{ top:.6mm; background:var(--verde); color:#FFF }
.gantt .b.uno{ top:4.8mm; background:var(--tarjeta); border:1px solid var(--grafito); color:var(--grafito) }
.gantt .eje{ grid-column:2; position:relative; height:5mm; border-top:1px solid var(--carbon) }
.gantt .eje span{ position:absolute; top:1mm; transform:translateX(-50%); font-size:6.8pt; color:var(--gris);
  font-variant-numeric:tabular-nums }
.leyenda{ display:flex; gap:6mm; font-size:7.4pt; color:var(--gris); margin-top:2mm; align-items:center }
.leyenda i{ display:inline-block; width:6mm; height:2.6mm; border-radius:.6mm; margin-right:1.6mm; vertical-align:middle }

/* Calendario con fechas: una barra por fase y marcas de fecha limite */
.gantt.cal{ row-gap:1.2mm }
.gantt.cal .pista{ height:5.4mm }
.gantt.cal .b.dos, .gantt.cal .b.uno{ top:1mm }
.gantt .hito{ position:absolute; top:.4mm; height:4.6mm; border-left:2px solid var(--carbon) }
.gantt .hito span{ position:absolute; left:1.2mm; top:.6mm; font-size:6.4pt; font-weight:700; font-style:normal;
  white-space:nowrap; color:var(--carbon); font-variant-numeric:tabular-nums }
.gantt.cal .eje span:last-child{ transform:translateX(-100%) }

/* Lamina de definiciones: cuatro listas con fecha; letra un punto menor para
   que las tarjetas no invadan la nota del pie. */
.lam.def ul.lista li{ font-size:8pt; margin-bottom:1.5mm; line-height:1.35 }
.lam.def .tj{ padding:3.6mm 4mm }
.gantt .eje span{ white-space:nowrap }

/* Impresion AL FINAL: .pila se declara arriba con margen y desplazamiento
   horizontal; si estas reglas quedan antes, la de pantalla gana, y un contenedor
   con desplazamiento no se reparte entre paginas: Chrome recorta la portada. */
@media print{
  .pila{ padding:0; overflow:visible }
  .lam{ height:142.6mm; break-inside:avoid }
  .lam:last-of-type{ break-after:auto; page-break-after:auto }
}

/* ── Controles de la versión web (no se imprimen) ─────────────────────── */
.barra{ position:sticky; top:0; z-index:10; display:flex; gap:2mm; align-items:center; flex-wrap:wrap;
  padding:2.4mm 4mm; background:rgba(243,244,242,.94); border-bottom:1px solid var(--hairline);
  backdrop-filter:saturate(1.2) blur(6px); font-size:9pt }
.barra .titulo{ font-weight:700; margin-right:auto; color:var(--carbon) }
.barra a, .barra button{ font:inherit; font-weight:600; color:var(--grafito); background:var(--tarjeta);
  border:1px solid var(--grafito); border-radius:1.4mm; padding:1.3mm 3mm; cursor:pointer; text-decoration:none }
.barra button.primario{ background:var(--verde); border-color:var(--verde); color:#FFF }
.barra a:hover, .barra button:hover{ background:var(--grafito); color:#FFF }
.barra button.primario:hover{ background:#044A22 }
.barra .contador{ font-variant-numeric:tabular-nums; color:var(--gris); min-width:14mm; text-align:center }
.barra :focus-visible{ outline:2px solid var(--lima); outline-offset:2px }
.lam{ zoom:var(--zoom, 1); scroll-margin-top:16mm }

/* Modo presentación: una lámina a pantalla completa */
html.presentando, html.presentando body{ overflow:hidden; background:#D9DCD6 }
html.presentando .barra{ position:fixed; left:0; right:0; opacity:0; transition:opacity .2s }
html.presentando .barra:hover, html.presentando .barra:focus-within{ opacity:1 }
html.presentando .pila{ padding:0 }
html.presentando .lam{ display:none; zoom:1 }
html.presentando .lam.actual{ display:flex; position:fixed; top:50%; left:50%; margin:0;
  transform:translate(-50%,-50%) scale(var(--escala, 1)); box-shadow:0 10px 40px rgba(30,30,30,.18) }
@media (prefers-reduced-motion: reduce){ html.presentando .barra{ transition:none } }

@media print{
  .barra{ display:none !important }
  .lam{ zoom:1 !important }
  html.presentando .lam{ display:flex !important; position:static; transform:none; box-shadow:none }
}