/* ============================================================
   PAUTA TÉCNICA — Sistema de diseño para PDF (Zurik Connect)
   Lienzo: Carta / Letter (8.5 × 11 in → 816 × 1056 px @96dpi)
   Diseñado con primitivas simples (cajas, líneas, texto, tablas)
   para ser generable por una librería PDF sin motor de browser.
   ============================================================ */

:root{
  /* Marca / tinta */
  --ink:#0e1a1c;
  --ink-2:#34403f;
  --teal:#14b8b1;
  --deep:#0e7470;
  --mute:#6b7475;
  --faint:#9aa3a2;

  /* Superficies */
  --paper:#ffffff;
  --soft:#f6f7f6;
  --soft-2:#f0f3f2;
  --softTeal:#e8f7f6;
  --line:#e6e8e7;
  --line-2:#d3d8d6;

  /* Campo capturado en la app */
  --field-bg:#f0faf9;
  --field-line:#bfe6e3;

  /* Estados */
  --ok-bg:#e2f4ea;   --ok-fg:#16713c;   --ok-mk:#2a9d6e;
  --warn-bg:#fbf0d9;  --warn-fg:#7a5a10;  --warn-mk:#d39524;
  --crit-bg:#fbe2dc;  --crit-fg:#9d3320;  --crit-mk:#d9533b;
  --info-bg:#dce9fb;  --info-fg:#1f4e9d;  --info-mk:#3b82f6;

  /* Tipografía */
  --sans:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono","SFMono-Regular",ui-monospace,Menlo,Consolas,monospace;

  /* Geometría de página */
  --pw:816px;
  --ph:1056px;
  --mx:56px;     /* margen lateral */
  --mt:50px;     /* margen superior contenido */
}

*{box-sizing:border-box;-webkit-print-color-adjust:exact !important;print-color-adjust:exact !important;}

html,body{margin:0;padding:0;}
body{
  background:#dfe2e1;
  font-family:var(--sans);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ---- Barra de utilidades (solo pantalla) ---- */
.toolbar{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:14px;
  padding:11px 22px;
  background:rgba(14,26,28,0.92);
  color:#fff;
  backdrop-filter:saturate(1.2) blur(2px);
}
.toolbar .tb-brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:13px;letter-spacing:-.01em;}
.toolbar .tb-doc{font-size:11px;color:rgba(255,255,255,.55);font-family:var(--mono);}
.toolbar .tb-spacer{flex:1;}
.toolbar .tb-legend{display:flex;align-items:center;gap:14px;font-size:10.5px;color:rgba(255,255,255,.62);}
.toolbar .tb-chip{display:inline-flex;align-items:center;gap:6px;}
.toolbar .sw{width:13px;height:13px;border-radius:3px;border:1px solid rgba(255,255,255,.25);}
.toolbar .tb-btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 13px;border-radius:8px;border:0;cursor:pointer;
  background:var(--teal);color:#fff;font-weight:700;font-size:12px;font-family:var(--sans);
}

/* ---- Pila de páginas ---- */
.deck{
  display:flex;flex-direction:column;align-items:center;gap:26px;
  padding:30px 0 60px;
}

/* ---- Hoja Carta ---- */
.page{
  position:relative;
  width:var(--pw);
  height:var(--ph);
  background:var(--paper);
  box-shadow:0 1px 0 rgba(14,26,28,.04),0 18px 40px -22px rgba(14,26,28,.32);
  overflow:hidden;
  display:flex;flex-direction:column;
}

/* ====================== ENCABEZADO (bloque formal ISO) ====================== */
.zmark{display:flex;align-items:baseline;gap:1px;font-weight:800;font-size:21px;letter-spacing:-.03em;line-height:1;}
.zmark .z{color:var(--teal);}
.zmark .rest{color:var(--ink);}
.zmark .dot{width:6px;height:6px;border-radius:50%;background:var(--teal);align-self:flex-start;margin-left:1px;margin-top:2px;}
/* Logo Zurik (imagen): white para fondo oscuro (toolbar), black para fondo claro (portada/headers). */
.toolbar .tb-brand .tb-logo{height:17px;width:auto;display:block;}
.cover .cv-top .cv-logo{height:40px;width:auto;display:block;}
.dh-logo .dh-logoimg{height:24px;width:auto;display:block;}

.dochead{
  flex:0 0 auto;
  margin:26px var(--mx) 0;
  border:1.5px solid var(--ink);border-radius:10px;overflow:hidden;
  display:grid;grid-template-columns:150px 1fr 220px;
}
.dochead > div{min-width:0;}
.dh-logo{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;padding:12px;border-right:1px solid var(--line-2);background:var(--soft);}
.dh-logo .zmark{font-size:26px;}
.dh-title{display:flex;flex-direction:column;justify-content:center;padding:11px 18px;border-right:1px solid var(--line-2);}
.dh-title .t1{font-size:8.5px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--teal);}
.dh-title .t2{font-size:13.5px;font-weight:800;letter-spacing:-.01em;color:var(--ink);margin-top:4px;line-height:1.22;}
.dh-meta{display:flex;flex-direction:column;}
.dh-row{flex:1;min-height:22px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 13px;border-bottom:1px solid var(--line);}
.dh-row:last-child{border-bottom:0;}
.dh-row .l{font-size:8px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--mute);}
.dh-row .v{font-family:var(--mono);font-size:10.5px;font-weight:700;color:var(--ink);white-space:nowrap;}
.dh-row.hl{background:var(--softTeal);}
.dh-row.hl .v{color:var(--deep);}

/* ====================== CUERPO ====================== */
.pbody{
  flex:1 1 auto;
  padding:20px var(--mx) 0;
  min-height:0;
}

/* ====================== PIE ====================== */
.pfoot{
  flex:0 0 auto;
  margin:0 var(--mx);
  padding:10px 0 24px;
  border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;
  font-size:9px;color:var(--mute);
}
.pfoot .f-left{display:flex;align-items:center;gap:8px;}
.pfoot .f-sys{color:var(--faint);}
.pfoot .f-page{font-family:var(--mono);color:var(--ink-2);font-weight:700;}

/* ====================== TIPOGRAFÍA / BLOQUES ====================== */
.eyebrow{font-size:9px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);}
.sec-title{font-size:15px;font-weight:800;letter-spacing:-.01em;color:var(--ink);}
.sec-sub{font-size:10.5px;color:var(--mute);margin-top:1px;}

.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:13px;}
.sec-head .lead{display:flex;align-items:center;gap:11px;}
.sec-head .idx{
  width:26px;height:26px;border-radius:8px;background:var(--softTeal);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  font-family:var(--mono);font-weight:800;font-size:12px;color:var(--deep);
}
.sec-divider{height:1px;background:var(--line);margin:18px 0;}

/* ---- Campos (datos capturados en la app) ---- */
.field-grid{display:grid;gap:11px 16px;}
.field{min-width:0;}
.field .lab{font-size:8.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-bottom:4px;}
.field .val{
  font-size:13px;font-weight:600;color:var(--ink);
  background:var(--field-bg);border:1px solid var(--field-line);
  border-radius:7px;padding:8px 10px;line-height:1.25;
  min-height:34px;display:flex;align-items:center;
}
.field .val.mono{font-family:var(--mono);font-weight:600;letter-spacing:-.01em;}
.field .val.blank{background:#fff;border:1px dashed var(--line-2);color:var(--faint);}
.field.empty .val{background:#fff;border:1px dashed var(--line-2);}

/* ---- Pills de estado ---- */
.pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 9px;border-radius:999px;
  font-size:10px;font-weight:800;letter-spacing:.01em;white-space:nowrap;
}
.pill .d{width:6px;height:6px;border-radius:50%;}
.pill.ok{background:var(--ok-bg);color:var(--ok-fg);} .pill.ok .d{background:var(--ok-mk);}
.pill.warn{background:var(--warn-bg);color:var(--warn-fg);} .pill.warn .d{background:var(--warn-mk);}
.pill.crit{background:var(--crit-bg);color:var(--crit-fg);} .pill.crit .d{background:var(--crit-mk);}
.pill.info{background:var(--info-bg);color:var(--info-fg);} .pill.info .d{background:var(--info-mk);}
.pill.na{background:var(--soft-2);color:var(--mute);} .pill.na .d{background:var(--faint);}

/* ---- Checklist ---- */
.check-row{
  display:flex;align-items:center;gap:12px;
  padding:10px 0;border-bottom:1px solid var(--line);
}
.check-row:last-child{border-bottom:0;}
.cbox{
  width:20px;height:20px;border-radius:6px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  border:1.5px solid var(--line-2);background:#fff;
}
.cbox.on{background:var(--teal);border-color:var(--teal);}
.cbox.on svg{stroke:#fff;}
.cbox.na{background:var(--soft);border-style:dashed;}
.check-row .ci{
  width:22px;font-family:var(--mono);font-size:11px;font-weight:700;color:var(--faint);flex-shrink:0;text-align:right;
}
.check-row .ctxt{flex:1;min-width:0;font-size:12.5px;font-weight:600;color:var(--ink);}
.check-row .ctxt .sub{font-size:10px;font-weight:500;color:var(--mute);margin-top:1px;}

/* ---- Tarjeta de observación por componente ---- */
.obs-card{
  border:1px solid var(--line);border-radius:11px;overflow:hidden;background:#fff;
  display:flex;flex-direction:column;
}
.obs-card .oc-head{
  display:flex;align-items:center;gap:9px;
  padding:9px 12px;border-bottom:1px solid var(--line);background:var(--soft);
}
.obs-card .oc-ic{width:24px;height:24px;border-radius:7px;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.obs-card .oc-name{font-size:12px;font-weight:800;color:var(--ink);flex:1;}
.obs-card .oc-body{padding:11px 12px;display:flex;gap:11px;}
.obs-card .oc-txt{flex:1;font-size:11px;line-height:1.5;color:var(--ink-2);min-width:0;}
.obs-card .oc-txt.empty{color:var(--faint);font-style:italic;}

/* ---- Placeholder de foto ---- */
.photo{
  position:relative;border-radius:9px;overflow:hidden;
  background-color:var(--soft);
  background-image:repeating-linear-gradient(135deg,#eceeed 0 9px,#f4f6f5 9px 18px);
  border:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  color:var(--faint);
}
.photo .ph-cam{opacity:.7;}
.photo .ph-cap{font-family:var(--mono);font-size:8.5px;font-weight:600;letter-spacing:.02em;color:var(--mute);text-align:center;padding:0 8px;}
.photo .ph-tag{
  position:absolute;top:7px;left:7px;
  font-family:var(--mono);font-size:8px;font-weight:700;letter-spacing:.04em;
  background:rgba(14,26,28,.78);color:#fff;padding:2px 6px;border-radius:5px;
}
.photo.filled{background-image:none;background:var(--ink);}
.photo.filled .ph-cap{color:rgba(255,255,255,.65);}

/* ---- Medición (readout) ---- */
.meas{border:1px solid var(--line);border-radius:11px;padding:14px;background:#fff;display:flex;flex-direction:column;gap:9px;}
.meas .m-top{display:flex;align-items:center;justify-content:space-between;}
.meas .m-lab{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);}
.meas .m-val{display:flex;align-items:baseline;gap:5px;}
.meas .m-num{font-family:var(--mono);font-size:30px;font-weight:800;letter-spacing:-.03em;color:var(--ink);line-height:1;}
.meas .m-unit{font-size:12px;font-weight:700;color:var(--mute);}
.meas .m-scale{height:6px;border-radius:3px;background:var(--soft-2);position:relative;overflow:hidden;}
.meas .m-fill{position:absolute;top:0;bottom:0;left:0;border-radius:3px;}
.meas .m-ref{display:flex;justify-content:space-between;font-size:8.5px;font-family:var(--mono);color:var(--faint);}

/* ---- Tabla de procedimientos ---- */
.proc{width:100%;border-collapse:collapse;}
.proc thead th{
  font-size:8.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);
  text-align:left;padding:0 12px 9px;border-bottom:1.5px solid var(--ink);
}
.proc thead th.c-ap{text-align:center;width:74px;}
.proc tbody tr{border-bottom:1px solid var(--line);}
.proc tbody tr:nth-child(even){background:var(--soft);}
.proc td{padding:11px 12px;vertical-align:top;}
.proc .p-letter{
  width:34px;
}
.proc .p-letter span{
  display:flex;align-items:center;justify-content:center;width:24px;height:24px;
  border-radius:7px;background:var(--ink);color:#fff;font-family:var(--mono);font-weight:800;font-size:12px;
}
.proc .p-name{font-size:11.5px;font-weight:700;color:var(--ink);width:200px;line-height:1.35;}
.proc .p-purpose{font-size:10px;line-height:1.5;color:var(--ink-2);}
.proc .p-ap{text-align:center;width:74px;}

/* ---- Incidencia ---- */
.inci{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;display:flex;}
.inci .in-photo{flex:0 0 188px;}
.inci .in-body{flex:1;min-width:0;padding:14px 16px;display:flex;flex-direction:column;}
.inci .in-top{display:flex;align-items:center;gap:9px;margin-bottom:11px;}
.inci .in-num{width:24px;height:24px;border-radius:7px;background:var(--crit-bg);color:var(--crit-fg);font-family:var(--mono);font-weight:800;font-size:12px;display:flex;align-items:center;justify-content:center;}
.inci .in-title{font-size:13px;font-weight:800;color:var(--ink);flex:1;}
.def-row{display:flex;gap:11px;padding:8px 0;border-top:1px solid var(--line);}
.def-row:first-of-type{border-top:0;}
.def-row .dt{flex:0 0 86px;font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);padding-top:2px;}
.def-row .dd{flex:1;font-size:11px;line-height:1.5;color:var(--ink-2);}

/* ---- Bloques utilitarios ---- */
.note{
  border:1px solid var(--field-line);background:var(--field-bg);border-radius:9px;
  padding:11px 13px;font-size:11px;line-height:1.55;color:var(--ink-2);
}
.note.empty{border-style:dashed;border-color:var(--line-2);background:#fff;color:var(--faint);font-style:italic;}
.note-lab{font-size:8.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-bottom:6px;}

.kpi-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;}
.kpi{border:1px solid var(--line);border-radius:11px;padding:13px 14px;background:#fff;}
.kpi .k-lab{font-size:8.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);}
.kpi .k-val{font-family:var(--mono);font-size:24px;font-weight:800;letter-spacing:-.02em;color:var(--ink);margin-top:5px;line-height:1;}
.kpi .k-sub{font-size:10px;color:var(--mute);margin-top:5px;display:flex;align-items:center;gap:5px;}

.legend-inline{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.legend-inline .li{display:flex;align-items:center;gap:6px;font-size:9.5px;color:var(--mute);font-weight:600;}
.legend-inline .li .d{width:8px;height:8px;border-radius:3px;}

/* ====================== PORTADA ====================== */
.cover{padding:0;position:relative;background:var(--paper);}
.cover .cv-band{position:absolute;top:0;left:0;width:10px;height:100%;background:var(--teal);}
.cover .cv-wm{
  position:absolute;right:-60px;bottom:-90px;
  font-weight:800;font-size:560px;line-height:1;color:var(--soft);
  letter-spacing:-.04em;user-select:none;z-index:0;
}
.cover .cv-inner{position:relative;z-index:1;display:flex;flex-direction:column;height:100%;padding:64px 72px 0 78px;}
.cover .cv-top{display:flex;align-items:flex-start;justify-content:space-between;}
.cover .cv-top .zmark{font-size:40px;}
.cover .cv-mid{flex:1;display:flex;flex-direction:column;justify-content:center;max-width:600px;}
.cover .cv-eyebrow{font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--teal);margin-bottom:20px;}
.cover .cv-title{font-size:54px;font-weight:800;letter-spacing:-.03em;line-height:1.02;color:var(--ink);}
.cover .cv-rule{width:96px;height:4px;background:var(--teal);margin:26px 0 22px;}
.cover .cv-chip{display:inline-flex;align-self:flex-start;align-items:center;gap:9px;font-size:16px;font-weight:700;color:var(--deep);background:var(--softTeal);padding:9px 16px;border-radius:9px;}
.cover .cv-tag{font-size:14px;font-style:italic;color:var(--mute);margin-top:22px;letter-spacing:.01em;}
.cover .cv-meta{margin:0 0 0;border-top:2px solid var(--ink);display:grid;grid-template-columns:repeat(4,1fr);}
.cover .cv-foot{padding:0 72px 56px 78px;position:relative;z-index:1;}
.cover .cv-doc-row{display:flex;align-items:center;gap:9px;margin-bottom:14px;}
.cover .cv-doc-row .ds{font-size:10px;font-weight:700;letter-spacing:.04em;color:var(--mute);}
.cover .cv-cell{padding:14px 4px 0;}
.cover .cv-cell .cl{font-size:8.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-bottom:6px;}
.cover .cv-cell .cv{font-family:var(--mono);font-size:15px;font-weight:700;color:var(--ink);}

/* ====================== CHEQUEOS EN MANTENIMIENTO (checklist por componente) ====================== */
.comp-block{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;}
.comp-block .cb-head{display:flex;align-items:center;gap:11px;padding:9px 14px;background:var(--soft);border-bottom:1px solid var(--line);}
.comp-block .cb-ic{width:28px;height:28px;border-radius:8px;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.comp-block .cb-name{font-size:13px;font-weight:800;letter-spacing:.01em;color:var(--ink);text-transform:uppercase;}
.comp-block .cb-count{font-size:9.5px;font-weight:700;color:var(--mute);margin-left:6px;}
.comp-block .cb-head .sp{flex:1;}
.cb-list{display:grid;grid-template-columns:1fr 1fr;gap:0 26px;padding:8px 14px 4px;}
.cb-item{display:flex;align-items:center;gap:8px;padding:4.5px 0;}
.cb-num{font-family:var(--mono);font-size:9.5px;font-weight:700;color:var(--faint);width:16px;text-align:right;flex-shrink:0;}
.cb-box{width:17px;height:17px;border-radius:5px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--teal);}
.cb-box.warn{background:var(--warn-mk);}
.cb-box svg{stroke:#fff;}
.cb-txt{flex:1;min-width:0;font-size:10.5px;font-weight:600;color:var(--ink-2);line-height:1.25;}
.cb-obs{padding:9px 14px;border-top:1px solid var(--line);background:#fcfdfd;}
.cb-obs .ol{font-size:8px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-bottom:5px;}
.cb-obs .ot{font-size:10.5px;line-height:1.5;color:var(--ink-2);background:var(--field-bg);border:1px solid var(--field-line);border-radius:7px;padding:8px 10px;}
.cb-obs .ot.empty{background:#fff;border-style:dashed;border-color:var(--line-2);color:var(--faint);font-style:italic;}

/* ====================== CHEQUEOS EN MANTENIMIENTO (observaciones) ====================== */
.obs-band{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;}
.obs-band .ob-head{display:flex;align-items:center;gap:11px;padding:10px 15px;background:var(--soft);border-bottom:1px solid var(--line);}
.obs-band .ob-ic{width:28px;height:28px;border-radius:8px;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.obs-band .ob-lab{flex:1;display:flex;align-items:baseline;gap:6px;}
.obs-band .ob-lab .pre{font-size:8.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);}
.obs-band .ob-lab .nm{font-size:13px;font-weight:800;letter-spacing:-.01em;color:var(--ink);text-transform:uppercase;}
.obs-band .ob-body{display:flex;gap:13px;padding:12px 15px;}
.obs-band .ob-notes{flex:1;min-width:0;font-size:11px;line-height:1.55;color:var(--ink-2);background:var(--field-bg);border:1px solid var(--field-line);border-radius:8px;padding:10px 12px;display:flex;align-items:flex-start;}
.obs-band .ob-notes.empty{background:#fff;border-style:dashed;border-color:var(--line-2);color:var(--faint);font-style:italic;}
.obs-band .ob-photo{flex:0 0 116px;}
.obs-band .ob-photo .ph-tag{display:none;}

/* ====================== SOPORTE VISUAL (fotos grandes) ====================== */
.fig-grid{display:grid;gap:18px;}
.fig{display:flex;flex-direction:column;}
.fig .fig-img{
  position:relative;border-radius:11px;overflow:hidden;border:1px solid var(--line);
  background-color:var(--ink);
  display:flex;align-items:center;justify-content:center;
}
.fig .fig-img.empty{background-color:var(--soft);background-image:repeating-linear-gradient(135deg,#eceeed 0 10px,#f4f6f5 10px 20px);}
.fig .fig-tag{position:absolute;top:11px;left:11px;font-family:var(--mono);font-size:11px;font-weight:800;background:rgba(255,255,255,.16);color:#fff;padding:4px 9px;border-radius:6px;letter-spacing:.04em;}
.fig .fig-cap{display:flex;align-items:center;gap:8px;margin-top:11px;}
.fig .fig-cap .fc-l{font-family:var(--mono);font-size:11px;font-weight:800;color:var(--deep);}
.fig .fig-cap .fc-t{font-size:12.5px;font-weight:700;color:var(--ink);}

/* ====================== IMPRESIÓN ====================== */
@media screen{ .deck{min-height:100vh;} }

@media print{
  @page{size:Letter;margin:0;}
  html,body{background:#fff;-webkit-print-color-adjust:exact !important;print-color-adjust:exact !important;}
  .toolbar{display:none !important;}
  .deck{gap:0;padding:0;}
  .page{box-shadow:none !important;page-break-after:always;break-after:page;page-break-inside:avoid;break-inside:avoid;}
  .page:last-child{page-break-after:auto;break-after:auto;}
}