/* Portal SST Saldipe · interfaz
   Por defecto, marca Saldipe (portada, acceso, índice de clientes). Las páginas de un cliente
   cargan además /<cliente>/brand/brand.css, que redefine estas mismas variables con la marca
   del cliente. Variables propias del portal, con su valor Saldipe como respaldo:
   --font-label, --highlight, --highlight-ink, --highlight-10 (estados y destacados que no son
   acciones), --top-bg, --top-fg, --top-muted, --top-line, --top-line-height. */

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--color-surface);color:var(--color-text);font-family:var(--font-body);
  font-size:var(--text-body-md);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;
  min-height:100svh;display:flex;flex-direction:column}
main{flex:1}
a{color:inherit}
[hidden]{display:none!important}
.wrap{width:min(1180px,100% - 2*clamp(16px,4vw,40px));margin:0 auto}
/* .num marca RUT, fechas y cantidades. Sin tabular-nums: en Inter ensancha los guiones. */
.kpi .v{font-variant-numeric:tabular-nums}
.nw{white-space:nowrap}

/* ---------- barra superior ---------- */
.top{background:var(--top-bg,var(--color-primary));color:var(--top-fg,#fff)}
.top-in{display:flex;align-items:center;gap:var(--space-lg);min-height:64px}
.top .brand{display:flex;align-items:center;flex:none}
.top .brand img{height:28px;width:auto;display:block}
.crumb{display:flex;align-items:center;gap:var(--space-sm);flex:1;min-width:0;font-size:var(--text-body-sm);
  color:var(--top-muted,var(--color-primary-20));white-space:nowrap;overflow:hidden}
.crumb a{text-decoration:none;color:var(--top-muted,var(--color-primary-20))}
.crumb a:hover{color:var(--top-fg,#fff)}
.crumb .here{color:var(--top-fg,#fff);font-weight:var(--fw-bold);overflow:hidden;text-overflow:ellipsis}
.crumb .sep{opacity:.5}
.session{font-size:var(--text-body-sm);color:var(--top-muted,var(--color-primary-20));display:flex;gap:var(--space-sm);align-items:center;white-space:nowrap}
.session button{font:inherit;color:var(--top-fg,#fff);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.accent-bar{height:var(--top-line-height,var(--accent-bar-height));background:var(--top-line,var(--color-accent))}
@media (max-width:640px){.hide-m{display:none}.session .mail{display:none}}

/* ---------- encabezado de página ---------- */
.head{padding:clamp(28px,5vw,56px) 0 var(--space-lg)}
.eyebrow{font-family:var(--font-label,var(--font-body));font-size:var(--text-label);font-weight:var(--fw-bold);letter-spacing:var(--ls-label);text-transform:uppercase;
  color:var(--eyebrow-color,var(--color-text-muted));margin:0 0 var(--space-sm)}
h1{font-family:var(--font-heading);font-weight:var(--fw-extrabold);font-size:clamp(1.9rem,4.5vw,var(--text-display));
  line-height:var(--lh-display);letter-spacing:var(--ls-heading);margin:0}
h2{font-family:var(--font-heading);font-weight:var(--fw-medium);font-size:var(--text-h2);line-height:var(--lh-subhead);margin:0 0 var(--space-md)}
.lead{color:var(--color-text-muted);font-size:var(--text-body-lg);line-height:var(--lh-body-lg);max-width:60ch;margin:var(--space-md) 0 0}
.section{padding-bottom:var(--space-2xl)}

/* ---------- botones ---------- */
.btn{display:inline-flex;align-items:center;gap:var(--space-sm);font-family:var(--font-label,var(--font-body));font-size:var(--text-label);
  font-weight:var(--fw-bold);letter-spacing:var(--ls-label);text-transform:uppercase;padding:12px 24px;
  border-radius:var(--radius-sm);border:2px solid transparent;cursor:pointer;text-decoration:none;line-height:1.2}
.btn-primary{background:var(--color-accent);color:var(--color-on-accent)}
.btn-primary:hover{background:var(--color-accent-hover)}
.btn-secondary{background:transparent;color:var(--color-primary);border-color:var(--color-primary)}
.btn-secondary:hover{background:var(--color-primary-10)}
.acts{display:flex;gap:var(--space-md);flex-wrap:wrap;margin-top:var(--space-lg)}

/* ---------- tarjetas de módulo ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--space-lg)}
.card{position:relative;display:flex;flex-direction:column;gap:var(--space-sm);background:var(--color-neutral);
  border-radius:var(--radius-md);padding:var(--space-lg);box-shadow:var(--shadow-card);border:var(--card-border,0);border-top:4px solid var(--card-top,var(--color-primary));
  text-decoration:none;color:inherit;min-height:170px}
a.card:hover{border-top-color:var(--highlight,var(--color-accent));box-shadow:var(--shadow-modal)}
.card h3{font-family:var(--font-heading);font-weight:var(--fw-extrabold);font-size:var(--text-h2);line-height:var(--lh-heading);margin:0}
.card p{margin:0;color:var(--color-text-muted);font-size:var(--text-body-sm)}
.card .meta{margin-top:auto;font-family:var(--font-label,var(--font-body));font-size:var(--text-label);font-weight:var(--fw-bold);letter-spacing:var(--ls-label);text-transform:uppercase}
.card.soon{background:transparent;box-shadow:none;border:1px dashed var(--color-border);border-top:4px solid var(--color-primary-20)}
.card.soon h3{color:var(--color-primary-70)}
.tag{display:inline-block;font-family:var(--font-label,var(--font-body));align-self:flex-start;background:var(--color-primary-10);color:var(--color-primary-70);font-size:11px;
  font-weight:var(--fw-bold);letter-spacing:var(--ls-label);text-transform:uppercase;padding:3px 8px;border-radius:var(--radius-sm)}
.tag.on{background:var(--highlight,var(--color-accent));color:var(--highlight-ink,var(--color-on-accent))}

/* ---------- indicadores ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:var(--space-md);margin-bottom:var(--space-xl)}
.kpi{background:var(--color-neutral);border-radius:var(--radius-md);padding:var(--space-md) var(--space-lg);box-shadow:var(--shadow-card);border:var(--card-border,0)}
.kpi .k{margin-top:6px;font-family:var(--font-label,var(--font-body));font-size:var(--text-label);font-weight:var(--fw-bold);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--color-text-muted)}
.kpi .v{font-family:var(--font-heading);font-weight:var(--fw-extrabold);font-size:2.6rem;line-height:1.05}
.kpi.main .v{color:var(--kpi-key,inherit)}
.kpi .v small{font-size:1.1rem;font-weight:var(--fw-medium);color:var(--color-text-muted)}
.kpi .d{font-size:var(--text-body-sm);color:var(--color-text-muted)}
.kpi.main{border-left:6px solid var(--highlight,var(--color-accent))}
.meter{height:6px;background:var(--color-primary-10);border-radius:3px;margin-top:var(--space-sm);overflow:hidden}
.meter span{display:block;height:100%;background:var(--color-primary)}

/* ---------- filtros ---------- */
.filters{display:flex;flex-wrap:wrap;gap:var(--space-md);align-items:flex-end;margin-bottom:var(--space-md)}
.filters label{font-family:var(--font-label,var(--font-body));display:flex;flex-direction:column;gap:4px;font-size:var(--text-label);font-weight:var(--fw-bold);
  letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--color-text-muted)}
.filters select,.filters input{font:inherit;font-size:var(--text-body-sm);text-transform:none;letter-spacing:0;font-weight:var(--fw-regular);
  color:var(--color-text);background:var(--color-neutral);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:0 12px;height:42px;min-width:160px}
.filters input{min-width:240px}
.filters select:focus,.filters input:focus{outline:2px solid var(--color-accent);outline-offset:1px}
.count{margin-left:auto;font-size:var(--text-body-sm);color:var(--color-text-muted)}

/* ---------- tablas ---------- */
.table-wrap{overflow-x:auto;background:var(--color-neutral);border-radius:var(--radius-md);box-shadow:var(--shadow-card);border:var(--card-border,0)}
table.t{width:100%;border-collapse:collapse;font-size:var(--text-body-sm)}
table.t th{font-family:var(--font-label,var(--font-body));background:var(--color-primary);color:var(--color-on-primary);font-weight:var(--fw-bold);font-size:12px;
  letter-spacing:var(--ls-label);text-transform:uppercase;padding:10px var(--space-md);text-align:left;white-space:nowrap}
table.t td{padding:10px var(--space-md);border-bottom:1px solid var(--color-surface-2);vertical-align:top}
table.t tbody tr:nth-child(even) td{background:var(--row-alt,var(--color-surface))}
table.t tbody tr:hover td{background:var(--color-accent-10)}
table.t td a{font-weight:var(--fw-bold);text-decoration:none}
table.t td a:hover{text-decoration:underline}
table.t .nw{white-space:nowrap}
.missing{color:#9A3412;font-weight:var(--fw-bold)}
.state-off{color:var(--color-text-muted)}
.empty{padding:var(--space-lg);color:var(--color-text-muted);margin:0}

/* ---------- ficha ---------- */
.sheet{background:var(--color-neutral);border-radius:var(--radius-md);box-shadow:var(--shadow-card);border:var(--card-border,0);padding:clamp(20px,4vw,40px)}
.fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--space-md) var(--space-lg);margin:0 0 var(--space-xl)}
.fields div{border-left:3px solid var(--color-primary-20);padding-left:var(--space-md)}
.fields dt{font-family:var(--font-label,var(--font-body));font-size:12px;font-weight:var(--fw-bold);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--color-text-muted)}
.fields dd{margin:2px 0 0;font-size:var(--text-body-md)}
.notes{border-left:3px solid var(--highlight,var(--color-accent));background:var(--highlight-10,var(--color-accent-10));padding:var(--space-md) var(--space-lg);margin:0 0 var(--space-xl)}
.sheet-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-lg);flex-wrap:wrap;margin-bottom:var(--space-lg)}
.chips{display:flex;gap:var(--space-sm);flex-wrap:wrap;margin-top:var(--space-sm)}
.print-only{display:none}

/* ---------- estados, como en los documentos del cliente ----------
   ok: cumplido. par: por hacer. Sin clase: neutro. Nunca rojo: lo pendiente no es un error. */
.st{display:inline-block;font-family:var(--font-label,var(--font-body));font-size:11px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;padding:3px 8px;white-space:nowrap;border-radius:var(--radius-sm);line-height:1.4;
  background:var(--color-primary-10);color:var(--color-primary)}
.st.ok{background:var(--ok-10,#E1F2E8);color:var(--ok,#1F7A4D)}
.st.par{background:var(--warn-10,#FFF3D6);color:var(--warn,#9A6B00)}
.todo{color:var(--color-text-muted)}
h2 .n{color:var(--color-accent);margin-right:8px}
.sheet section{margin-bottom:var(--space-xl)}
.sheet section:last-of-type{margin-bottom:0}

/* avance de la ficha: barra en el color de destacado; verde cuando está al día */
.progress{display:inline-flex;align-items:center;gap:8px}
.progress .bar{display:block;width:64px;height:6px;background:var(--color-primary-10)}
.progress .bar span{display:block;height:100%;background:var(--highlight,var(--color-primary))}
.progress.ok .bar span{background:var(--ok,#1F7A4D)}
.progress .num{font-family:var(--font-label,var(--font-body));font-size:12px;font-weight:600;color:var(--color-text-muted)}

/* ---------- datos por completar en la ficha (solo pantalla, en segundo plano al final) ---------- */
.pending{border-top:1px solid var(--color-border);padding:var(--space-lg) 0 0;margin:var(--space-xl) 0 0}
.pending-head{display:flex;justify-content:space-between;align-items:center;gap:var(--space-md);flex-wrap:wrap}
.pending h2{font-family:var(--font-label,var(--font-body));font-size:var(--text-label);font-weight:600;letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--color-text-muted);margin:0}
.pending p{margin:4px 0 var(--space-sm);color:var(--color-text-muted);font-size:var(--text-body-sm)}
.pending ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.pending li{font-size:12px;color:var(--color-text-muted);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:3px 9px}
.pending.ok p{margin-bottom:0}

/* ---------- tarjeta destacada de la portada (como las entregas destacadas del Lab) ---------- */
.feat{display:grid;grid-template-columns:1fr 1.25fr;min-height:360px;margin-bottom:var(--space-lg);text-decoration:none;
  color:#fff;background:var(--color-deep);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-card)}
.feat .art{position:relative;background:var(--color-primary);display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--space-lg);padding:var(--space-xl)}
.dot-art{width:min(260px,80%);height:auto}
.dot-art .on{fill:var(--color-accent)}
.dot-art .off{fill:none;stroke:rgba(255,255,255,.35);stroke-width:2}
.feat .art-cap{font-family:var(--font-heading);font-weight:var(--fw-extrabold);font-size:2rem;line-height:1;text-align:center}
.feat .art-cap small{display:block;margin-top:6px;font-family:var(--font-label,var(--font-body));font-size:11px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.65)}
.feat .body{padding:clamp(24px,4vw,44px);display:flex;flex-direction:column;justify-content:space-between;gap:var(--space-lg);align-items:flex-start}
.feat .kicker{font-family:var(--font-label,var(--font-body));font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--color-accent)}
.feat h2{font-size:clamp(2rem,4vw,3rem);font-weight:var(--fw-extrabold);margin:10px 0 8px;color:#fff}
.feat p{margin:0;color:rgba(255,255,255,.72);max-width:44ch}
.feat-stats{display:grid;grid-template-columns:repeat(3,auto);gap:var(--space-lg) var(--space-xl);margin:0}
.feat-stats dt{font-family:var(--font-label,var(--font-body));font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.feat-stats dd{margin:4px 0 0;font-family:var(--font-heading);font-weight:var(--fw-extrabold);font-size:1.8rem;line-height:1}
.feat-stats dd small{font-size:.9rem;font-weight:var(--fw-medium);color:rgba(255,255,255,.6)}
.feat:hover .btn-primary{background:var(--color-accent-hover)}
@media (max-width:820px){.feat{grid-template-columns:1fr}.feat-stats{grid-template-columns:repeat(3,1fr)}}

/* ---------- pie ---------- */
footer{background:var(--color-deep);color:var(--color-primary-20);font-size:var(--text-body-sm)}
footer .legal{color:#fff}
footer .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--space-lg);flex-wrap:wrap;padding:var(--space-lg) 0}
footer img{height:20px;width:auto;display:block}

/* ---------- impresión de la ficha ----------
   Lo impreso lleva la marca del cliente (logo y razón social de su client.json), no la de
   Saldipe. Una página A4, tinta negra y grises: se lee igual en una impresora sin color.
   Patrón documental: DGC Maquinarias/Projects/202610-DGC-EleccionDelegado/03_Export. */
@page{size:A4;margin:12mm 15mm}
@media print{
  html,body{background:#fff;color:#000;font-size:11.5px;line-height:1.45;display:block;min-height:0}
  .top,.accent-bar,footer,.screen-only,.filters{display:none!important}
  .print-only{display:block}
  .wrap{width:auto;margin:0}
  .head{padding:0 0 8px}
  .sheet{box-shadow:none;border-radius:0;padding:0;border:0}
  .doc-header{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-bottom:8px;border-bottom:2px solid #000;margin-bottom:12px}
  .doc-header .logo{height:34px;width:auto}
  .doc-header .logo svg{height:34px;width:auto;display:block}
  .doc-meta{text-align:right;font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:#444}
  .doc-meta strong{display:block;font-size:13px;letter-spacing:0;text-transform:none;color:#000;font-family:var(--font-heading)}
  .company{display:grid;grid-template-columns:2.2fr 1fr;gap:4px 20px;border:1px solid #999;border-left:3px solid #000;padding:6px 12px;margin-bottom:12px}
  .company dt{font-size:9px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#555}
  .company dd{margin:0;font-size:11.5px}
  h1{font-size:22px;line-height:1.15;color:#000}
  .eyebrow{color:#444;margin-bottom:2px}
  .chips .tag,.st{background:none!important;border:1px solid #000;color:#000!important;padding:1px 6px}
  .todo{color:#555}
  h2 .n{color:#000}
  .fields{grid-template-columns:repeat(3,1fr);gap:8px 18px;margin-bottom:14px}
  .fields div{border-left:2px solid #999;padding-left:8px}
  .fields dt{font-family:var(--font-label,var(--font-body));font-size:9px;color:#555}
  .fields dd{font-size:11.5px}
  .notes{background:none;border:1px solid #999;border-left:3px solid #000;padding:6px 12px;margin-bottom:14px}
  h2{font-size:14px;font-weight:700;margin:0 0 6px;padding-bottom:3px;border-bottom:1px solid #999}
  .table-wrap{box-shadow:none;border-radius:0;overflow:visible}
  table.t{font-size:11px}
  table.t th{background:#fff;color:#000;border-bottom:2px solid #000;padding:5px 8px}
  table.t td{padding:5px 8px;border-bottom:1px solid #bbb;background:#fff!important}
  .missing{color:#000}
  .pending{display:none!important}  /* los pendientes son de pantalla, no del documento */
  .doc-foot{margin-top:18px;padding-top:6px;border-top:1px solid #999;display:flex;justify-content:space-between;gap:20px;font-size:9px;color:#555}
  section,table,tr,.fields{page-break-inside:avoid}
}