*, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body { margin: 0; }
  img, svg { display: block; max-width: 100%; }

/* ── bloque ── */

  /* Identidad Parks Industrial: base clara, sin tema oscuro, solo la paleta oficial. */
  :root {
    --verde: #05662F; --lima: #87BC1C; --carbon: #1E1E1E; --grafito: #262626;
    --grafito-suave: #505050; --gris: #707070; --fondo: #F3F4F2; --tarjeta: #FFFFFF;
    --hairline: #E6E8EB; --tinte: #EAF3EC;
    --sombra: 0 1px 2px rgba(30,30,30,.04), 0 12px 28px -22px rgba(30,30,30,.35);
    color-scheme: light;
  }
  * { box-sizing: border-box; }
  body { margin:0; background:var(--fondo); color:var(--carbon);
    font-family:Montserrat,Poppins,Arial,sans-serif; font-size:15.5px; line-height:1.62;
    -webkit-font-smoothing:antialiased; }
  .doc { max-width:84ch; margin:0 auto; padding:4rem 1.6rem 6rem; display:flex; flex-direction:column; gap:3.2rem; }

  .rotulo { font-size:.67rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--verde); }
  h1 { font-size:clamp(1.85rem,5vw,2.5rem); font-weight:800; letter-spacing:-.022em; line-height:1.1; margin:0; color:var(--carbon); text-wrap:balance; }
  .entrada { font-size:1.02rem; color:var(--grafito-suave); margin:0; max-width:62ch; }
  .ficha { display:flex; flex-wrap:wrap; gap:1.7rem; padding-top:1rem; margin-top:.4rem;
    border-top:2px solid var(--lima); font-size:.77rem; color:var(--gris); }
  .ficha b { display:block; color:var(--carbon); font-weight:600; font-size:.91rem; }

  section { display:flex; flex-direction:column; gap:1.05rem; }
  h2 { font-size:.73rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--grafito);
    margin:0; padding-bottom:.45rem; border-bottom:2px solid var(--lima); align-self:flex-start; }
  h3 { font-size:1rem; font-weight:700; color:var(--carbon); margin:1rem 0 -.2rem;
       display:flex; align-items:baseline; gap:.6rem; }
  .cuenta-rol { font-size:.7rem; font-weight:600; color:var(--gris); text-transform:uppercase; letter-spacing:.08em; }
  p { margin:0; max-width:68ch; color:var(--grafito-suave); }
  strong, b { color:var(--carbon); font-weight:600; }
  ul { margin:0; padding-left:1.1rem; display:flex; flex-direction:column; gap:.3rem; color:var(--grafito-suave); }
  li::marker { color:var(--gris); }

  .cifras { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--hairline);
    border:1px solid var(--hairline); border-radius:12px; overflow:hidden; }
  @media (min-width:620px){ .cifras{ grid-template-columns:repeat(6,1fr);} }
  .cifra { background:var(--tarjeta); padding:.9rem 1rem; }
  .cifra .n { font-size:1.42rem; font-weight:800; letter-spacing:-.03em; font-variant-numeric:tabular-nums; line-height:1.1; color:var(--carbon); }
  .cifra .t { font-size:.63rem; text-transform:uppercase; letter-spacing:.08em; color:var(--gris); margin-top:.2rem; }

  .alerta { background:var(--carbon); color:#FFFFFF; border-radius:14px; padding:1.4rem 1.6rem;
    display:flex; flex-direction:column; gap:.55rem; }
  .alerta .t { font-size:.63rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--lima); }
  .alerta .frase { font-size:1.18rem; font-weight:700; line-height:1.4; color:#FFFFFF; }
  .alerta p { color:rgba(255,255,255,.78); max-width:none; font-size:.92rem; }
  /* Sobre fondo carbon las negritas heredaban color carbon y desaparecian. */
  .alerta strong, .alerta b { color:#FFFFFF; font-weight:700; }


  .lienzo { background:var(--tarjeta); border:1px solid var(--hairline); border-radius:10px;
    box-shadow:var(--sombra); padding:1rem 1rem .6rem; margin-top:1rem; overflow-x:auto; }
  .lienzo + .lienzo { margin-top:1.4rem; }
  .lienzo img { width:100%; min-width:640px; height:auto; display:block; }
  .lienzo figcaption { margin-top:.7rem; padding-top:.6rem; border-top:1px solid var(--hairline);
    font-size:.8rem; color:var(--gris); }
  .lienzo figcaption b { color:var(--carbon); font-weight:700; }

  details { background:var(--tarjeta); border:1px solid var(--hairline); border-radius:10px;
    box-shadow:var(--sombra); overflow:hidden; }
  details + details { margin-top:.5rem; }
  summary { cursor:pointer; padding:.8rem 1.1rem; display:flex; align-items:baseline;
    justify-content:flex-start; gap:1rem; list-style:none; }
  summary::-webkit-details-marker { display:none; }
  summary::before { content:"▸"; color:var(--gris); font-size:.8rem; margin-right:.55rem; }
  details[open] summary::before { content:"▾"; }
  summary .nom { font-weight:700; color:var(--carbon); font-size:.95rem;
    font-family:"IBM Plex Mono",monospace; letter-spacing:-.01em; }
  summary .cuenta { margin-left:auto; font-size:.68rem; color:var(--gris); text-transform:uppercase; letter-spacing:.08em; white-space:nowrap; }
  details .proposito { padding:0 1.1rem .5rem; font-size:.86rem; }
  details .disparo { padding:0 1.1rem .7rem; font-size:.82rem; color:var(--gris); }
  details .disparo b { font-size:.62rem; text-transform:uppercase; letter-spacing:.1em; color:var(--grafito); }

  .tabla, .tabla-campos { overflow-x:auto; border-top:1px solid var(--hairline); background:var(--tarjeta); }
  .tabla { border:1px solid var(--hairline); border-radius:10px; }
  table { border-collapse:collapse; width:100%; font-size:.82rem; }
  thead th { text-align:left; font-size:.62rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
    color:var(--gris); padding:.6rem .9rem; border-bottom:1px solid var(--hairline); white-space:nowrap; }
  tbody td { padding:.5rem .9rem; border-bottom:1px solid var(--hairline); color:var(--grafito-suave); vertical-align:top; }
  tbody tr:last-child td { border-bottom:0; }
  td.llave, td.tipo-paso { font-family:"IBM Plex Mono",monospace; font-size:.72rem; color:var(--verde); font-weight:600; white-space:nowrap; }
  td.campo { font-family:"IBM Plex Mono",monospace; font-size:.76rem; color:var(--carbon); }
  td.tipo, td.card, td.etapa { font-size:.76rem; color:var(--gris); }
  td.n { font-variant-numeric:tabular-nums; color:var(--gris); font-size:.74rem; width:2.2rem; }
  .ent { display:block; font-family:"IBM Plex Mono",monospace; font-size:.7rem; color:var(--gris); margin-top:.15rem; }

  .huecos { padding:.8rem 1.1rem 1rem; border-top:1px dashed var(--hairline); }
  .huecos b { font-size:.62rem; text-transform:uppercase; letter-spacing:.1em; color:var(--grafito); }
  .huecos ul { margin-top:.4rem; font-size:.8rem; }

  .nota { background:var(--tinte); border-radius:8px; padding:.75rem 1rem; }
  .nota p { font-size:.85rem; max-width:none; white-space:pre-line; }
  .nota + .nota { margin-top:.5rem; }

  .cierre { border-top:1px solid var(--hairline); padding-top:1.2rem; font-size:.77rem; color:var(--gris); }
  :focus-visible { outline:2px solid var(--lima); outline-offset:2px; border-radius:3px; }

  .fase { border:1px solid var(--hairline); border-radius:10px; background:var(--tarjeta); padding:1rem 1.2rem; }
  .fase + .fase { margin-top:.7rem; }
  .fase .cab { display:flex; gap:1rem; align-items:baseline; flex-wrap:wrap; }
  .fase .cab b { font-size:.98rem; color:var(--carbon); }
  .fase .cab span { margin-left:auto; font-size:.74rem; color:var(--verde); font-weight:700; font-variant-numeric:tabular-nums; }
  .fase p { font-size:.85rem; max-width:none; margin-top:.5rem; }
  .fase .cond { font-size:.8rem; color:var(--gris); border-top:1px dashed var(--hairline); padding-top:.5rem; }
  .fase .cond b { font-size:.62rem; text-transform:uppercase; letter-spacing:.1em; color:var(--grafito); }
  .decision p + p { margin-top:.6rem; }
  td.eje { font-weight:700; color:var(--carbon); }
  table[style*=fixed] td { overflow-wrap:anywhere; }
  .mono { font-family:"IBM Plex Mono",monospace; font-size:.92em; }
  td.mono { font-family:"IBM Plex Mono",monospace; font-size:.76rem; color:var(--carbon); }

/* ── bloque ── */

@media print {
  :root { --ground: #FFFFFF; }
  .doc { padding: 0 0 1rem; max-width: none; gap: 2rem; }
  section { break-inside: auto; }
  .brecha, .aviso, .cifras, .etapa, .decision, .hito, .riesgo { break-inside: avoid; }

  /* Tablas y bloques desplegables largos: se PARTEN entre hojas a proposito.
     Con break-inside:avoid una tabla de 41 renglones no cabe en lo que resta de
     la hoja, Chrome la empuja entera a la siguiente y deja media pagina en
     blanco. Se parte la tabla pero nunca un renglon, y el encabezado se repite. */
  .tabla, .tabla-campos, details { break-inside: auto; }
  thead { display: table-header-group; }
  tr, .nota, .huecos li { break-inside: avoid; }
  summary { break-after: avoid; }
  .fase { break-inside: avoid; }
  .lienzo svg { max-height: 215mm; width: auto; height: auto; margin: 0 auto; }

  /* Los diagramas son apaisados: en vertical el texto de las cajas baja de 3pt
     y no se lee. Cada uno se lleva su propia hoja horizontal, donde gana un
     30% de ancho. El scroller de pantalla se desactiva: en papel no se
     arrastra nada, y el visor pintaba su barra encima del dibujo. */
  @page paisaje { size: letter landscape; margin: 10mm 12mm; }
  .lienzo { page: paisaje; break-before: page; break-inside: avoid;
            overflow: visible; box-shadow: none;
            /* Chrome arma el ancho del contenido con la primera @page, que es
               vertical; sin una medida propia el dibujo se queda con el ancho
               de la hoja vertical y desperdicia medio pliego. */
            width: 245mm; max-width: none; }
  .lienzo img { min-width: 0; width: 100%; }
  h2, h3 { break-after: avoid; }
  .grupo > .encabezado, .fase > .cabeza { break-after: avoid; }
}
@page { size: letter; margin: 14mm 13mm; }

/* ── Versión web ───────────────────────────────────────────────────────── */
.barra-doc{ position:sticky; top:0; z-index:10; display:flex; gap:.5rem; align-items:center; flex-wrap:wrap;
  padding:.6rem 1rem; background:rgba(243,244,242,.94); border-bottom:1px solid var(--hairline);
  backdrop-filter:saturate(1.2) blur(6px); font-size:.8rem }
.barra-doc .titulo{ font-weight:700; margin-right:auto; color:var(--carbon) }
.barra-doc a, .barra-doc button{ font:inherit; font-weight:600; color:var(--grafito); background:var(--tarjeta);
  border:1px solid var(--grafito); border-radius:6px; padding:.35rem .8rem; cursor:pointer; text-decoration:none }
.barra-doc a:hover, .barra-doc button:hover{ background:var(--grafito); color:#FFFFFF }
.indice{ border:1px solid var(--hairline); border-radius:10px; background:var(--tarjeta); padding:1rem 1.2rem }
.indice ol{ columns:2; column-gap:2rem; margin:.4rem 0 0; padding-left:1.1rem; font-size:.86rem }
.indice li{ break-inside:avoid; margin-bottom:.3rem }
.indice a{ color:var(--carbon); text-decoration:none; border-bottom:1px solid var(--hairline) }
.indice a:hover{ border-bottom-color:var(--verde); color:var(--verde) }
.indice .t{ font-size:.63rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gris) }
@media (max-width: 640px){ .indice ol{ columns:1 } }
@media print{ .barra-doc{ display:none !important } }