/* ═══════════════════════════════════════════════════════════════
   ontikos · implementación de referencia
   Tres niveles de token. Los componentes consumen SOLO semánticos.
   Un componente que escriba un hex o un primitivo está mal escrito.
   Primitivos: manual de marca v2 · Semánticos: design system §4-bis
   Estados: design system §5-bis · Significado: brief §9-bis
   ═══════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&display=swap');

/* ─────────────────────────────────────────────────────────────
   1 · PRIMITIVOS. Los fija el manual. No se usan en componentes.
   ───────────────────────────────────────────────────────────── */
:root{
  --paper:#F4F1EB; --surface:#EFEBE3; --surface-2:#EBE7DE; --card:#FBF8F3;
  --ink:#17140F;   --soft:#5B554D;    --faint:#7C7367;
  --hair:rgba(23,20,15,.12); --hair-soft:rgba(23,20,15,.06);
  --red:#E7463B; --red-action:#D7352D; --red-action-hov:#C9241F;
  --red-bg:rgba(231,70,59,.07);
  --ok:#3B7A4B; --ok-bg:rgba(59,122,75,.08);
  --red-pale:#F6C3BC; --red-palemid:#EE9088; --red-mid:#E7635A; --red-deep:#CE2C20;

  --font:'Geist',system-ui,-apple-system,sans-serif;
  --text-display:52px; --text-h1:38px; --text-h2:28px; --text-h3:21px;
  --text-body-l:19px;  --text-body:16px; --text-caption:13px; --text-overline:11px;
  --r-sm:7px; --r-md:11px; --r-lg:15px; --r-pill:999px;
  --sp-1:6px; --sp-2:12px; --sp-3:20px; --sp-4:32px; --sp-5:56px;
}

/* ─────────────────────────────────────────────────────────────
   2 · SEMÁNTICOS. Lo único que consumen los componentes.
   ───────────────────────────────────────────────────────────── */
:root{
  --surface-canvas:var(--paper);
  --surface-work:var(--card);
  --surface-chrome:var(--surface);
  --surface-sunken:var(--surface-2);
  --surface-raised:var(--card);
  --surface-selected:var(--red-bg);
  --surface-action:var(--red-action);
  --surface-action-hover:var(--red-action-hov);
  --surface-ok:var(--ok-bg);

  --text-primary:var(--ink);
  --text-secondary:var(--soft);
  --text-tertiary:var(--faint);
  --text-on-action:#FFFFFF;
  --text-ok:var(--ok);
  --text-disabled:color-mix(in oklab, var(--ink) 38%, transparent);

  --border-hair:var(--hair);
  --border-soft:var(--hair-soft);
  --border-strong:color-mix(in oklab, var(--ink) 26%, transparent);
  --border-focus:var(--red);

  --phase-holgado:var(--red-pale);
  --phase-proximo:var(--red-palemid);
  --phase-urgente:var(--red-mid);
  --phase-quiebre:var(--red-deep);
  --phase-cumplido:var(--ok);

  --focus-ring:2px solid var(--border-focus);
  --focus-offset:2px;

  --z-content:0; --z-chrome:20; --z-popover:40; --z-modal:60; --z-toast:80;
  --elev-flat:none;
  --elev-popover:0 2px 8px rgba(23,20,15,.08), 0 8px 24px rgba(23,20,15,.08);
  --elev-modal:0 1px 2px rgba(23,20,15,.05), 0 14px 40px rgba(23,20,15,.10);

  --sp-xs:4px; --sp-sm:8px;
  --row-acto:52px; --row-tabla:40px; --tap-min:44px;
  /* Rejilla de la fila de acto. La comparten la fila, su cabecera y su esqueleto. */
  --acto-cols:4px minmax(160px,1fr) 150px 168px 112px 84px;
  --acto-gap:var(--sp-2);

  --motion-fast:120ms; --motion-base:180ms; --motion-sheet:240ms;
  --ease:cubic-bezier(.2,0,0,1); --ease-sheet:cubic-bezier(.32,.72,0,1);
}
@media (prefers-reduced-motion:reduce){
  :root{--motion-fast:0ms;--motion-base:0ms;--motion-sheet:0ms}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ─────────────────────────────────────────────────────────────
   3 · BASE
   ───────────────────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font);background:var(--surface-canvas);color:var(--text-primary);
  font-size:var(--text-body);line-height:1.55;letter-spacing:-.006em;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
:where(a){color:var(--text-primary)}
:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset);border-radius:var(--r-sm)}

/* Todo dato numérico. Regla del manual: tabular lining, siempre. */
.num,.kpi__v,.acto__amt,.tbl td.num,.tbl th.num,.kv__v--num{
  font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:"tnum" 1,"lnum" 1;letter-spacing:-.01em}

/* Escala del manual */
.t-display{font-size:var(--text-display);font-weight:600;letter-spacing:-.03em;line-height:1}
.t-h1{font-size:var(--text-h1);font-weight:600;letter-spacing:-.028em;line-height:1.05}
.t-h2{font-size:var(--text-h2);font-weight:600;letter-spacing:-.022em;line-height:1.1}
.t-h3{font-size:var(--text-h3);font-weight:600;letter-spacing:-.014em;line-height:1.2}
.t-body-l{font-size:var(--text-body-l);font-weight:400;line-height:1.5}
.t-body{font-size:var(--text-body);font-weight:400;line-height:1.6}
.t-caption{font-size:var(--text-caption);font-weight:500;line-height:1.5;color:var(--text-secondary)}
.kick{font-size:var(--text-overline);font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-tertiary)}

/* ─────────────────────────────────────────────────────────────
   4 · MARCA. El logo es asset: la O se coloca, no se dibuja.
   ───────────────────────────────────────────────────────────── */
.lock{display:inline-flex;align-items:baseline;white-space:nowrap;font-weight:600;
  letter-spacing:-.05em;color:var(--text-primary);line-height:1}
.lock__o{display:inline-block;position:relative;width:.72em;height:.72em;
  margin-right:.02em;transform:translateY(.03em)}
.lock__o svg{position:absolute;inset:0;width:100%;height:100%;display:block}
/* Los cortes toman el color de la superficie donde se posa el logo */
.lock__o .cut{fill:var(--surface-canvas)}
.on-chrome .lock__o .cut{fill:var(--surface-chrome)}
.on-work .lock__o .cut{fill:var(--surface-work)}
.on-ink .lock__o .cut{fill:var(--ink)}
.on-ink .lock{color:var(--paper)}

/* ─────────────────────────────────────────────────────────────
   5 · BOTONES
   ───────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-sm);
  min-height:36px;padding:0 var(--sp-2);border:1px solid transparent;border-radius:var(--r-sm);
  font-size:14px;font-weight:500;letter-spacing:-.01em;cursor:pointer;
  transition:background var(--motion-fast) var(--ease),border-color var(--motion-fast) var(--ease)}
.btn:disabled{color:var(--text-disabled);background:var(--surface-sunken);
  border-color:transparent;cursor:not-allowed}
.btn--sm{min-height:30px;font-size:13px;padding:0 var(--sp-sm)}
.btn--lg{min-height:44px;font-size:15px;padding:0 var(--sp-3)}

/* Acción: el acto. Único uso del rojo como superficie. */
.btn--action{background:var(--surface-action);color:var(--text-on-action)}
.btn--action:hover:not(:disabled){background:var(--surface-action-hover)}
.btn--action:active:not(:disabled){background:var(--red-deep)}

.btn--quiet{background:transparent;border-color:var(--border-hair);color:var(--text-primary)}
.btn--quiet:hover:not(:disabled){background:var(--surface-sunken)}
.btn--quiet:active:not(:disabled){background:var(--surface-2)}

.btn--ghost{background:transparent;color:var(--text-secondary)}
.btn--ghost:hover:not(:disabled){background:var(--surface-sunken);color:var(--text-primary)}

/* Destructivo: NO es rojo. El rojo es el acto (design system §4-bis). */
.btn--danger{background:var(--ink);color:var(--paper)}
.btn--danger:hover:not(:disabled){background:#000}

.btn.is-loading{color:transparent;position:relative;pointer-events:none}
.btn.is-loading::after{content:"";position:absolute;width:14px;height:14px;border-radius:50%;
  border:2px solid currentColor;border-top-color:transparent;color:var(--text-on-action);
  animation:spin 700ms linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ─────────────────────────────────────────────────────────────
   6 · CAMPOS
   ───────────────────────────────────────────────────────────── */
.field{display:block}
.field__lb{display:block;font-size:var(--text-caption);font-weight:500;
  color:var(--text-secondary);margin-bottom:var(--sp-xs)}
.field__in{width:100%;min-height:38px;padding:0 var(--sp-2);background:var(--surface-work);
  border:1px solid var(--border-hair);border-radius:var(--r-sm);color:var(--text-primary);
  transition:border-color var(--motion-fast) var(--ease)}
.field__in:hover:not(:disabled){border-color:var(--border-strong)}
.field__in:disabled{background:var(--surface-sunken);color:var(--text-disabled);cursor:not-allowed}
.field__in::placeholder{color:var(--text-tertiary)}
.field--error .field__in{border-color:var(--border-focus)}
.field__msg{display:flex;gap:var(--sp-xs);align-items:flex-start;margin-top:var(--sp-xs);
  font-size:var(--text-caption);color:var(--text-primary)}
.field__msg svg{width:14px;height:14px;flex:none;margin-top:2px;stroke:var(--border-focus);
  fill:none;stroke-width:1.8}

/* ─────────────────────────────────────────────────────────────
   7 · CHIP Y BADGE
   ───────────────────────────────────────────────────────────── */
.chip{display:inline-flex;align-items:center;gap:var(--sp-xs);padding:2px var(--sp-sm);
  border:1px solid var(--border-hair);border-radius:var(--r-pill);
  font-size:12px;font-weight:500;color:var(--text-secondary);white-space:nowrap}
.chip--ok{border-color:transparent;background:var(--surface-ok);color:var(--text-ok)}
.chip--act{border-color:transparent;background:var(--surface-selected);color:var(--text-primary)}
.chip__dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}

/* ─────────────────────────────────────────────────────────────
   8 · PANEL Y CLAVE-VALOR
   ───────────────────────────────────────────────────────────── */
.panel{background:var(--surface-work);border:1px solid var(--border-hair);
  border-radius:var(--r-md);overflow:hidden;box-shadow:var(--elev-flat)}
.panel__hd{padding:var(--sp-2) var(--sp-3);background:var(--surface-chrome);
  border-bottom:1px solid var(--border-soft)}
.panel__bd{padding:var(--sp-2) var(--sp-3)}
.kv{display:flex;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-sm) 0;
  border-bottom:1px solid var(--border-soft)}
.kv:last-child{border-bottom:0}
.kv__k{font-size:var(--text-caption);color:var(--text-secondary);flex:none}
.kv__v{font-size:14px;text-align:right;min-width:0}

/* ─────────────────────────────────────────────────────────────
   9 · KPI
   ───────────────────────────────────────────────────────────── */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  background:var(--surface-work);border:1px solid var(--border-hair);border-radius:var(--r-md);overflow:hidden}
.kpi{padding:var(--sp-2) var(--sp-3);border-right:1px solid var(--border-soft)}
.kpi:last-child{border-right:0}
.kpi__k{display:block;font-size:var(--text-overline);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-tertiary);margin-bottom:var(--sp-xs)}
.kpi__v{display:block;font-size:26px;font-weight:300;letter-spacing:-.02em;line-height:1.1}
.kpi__v small{font-size:14px;font-weight:400;color:var(--text-secondary)}

/* ─────────────────────────────────────────────────────────────
   10 · FILA DE ACTO. La pieza central.
   La fase se lee por color, por grosor y por palabra (§5-bis).
   ───────────────────────────────────────────────────────────── */
.acto{display:grid;grid-template-columns:var(--acto-cols);
  gap:0 var(--acto-gap);align-items:center;width:100%;text-align:left;min-height:var(--row-acto);
  padding:var(--sp-sm) var(--sp-2);background:var(--surface-work);border:0;
  border-bottom:1px solid var(--border-soft);cursor:pointer;
  transition:background var(--motion-fast) var(--ease)}
.acto:hover{background:var(--surface-sunken)}
.acto[aria-selected="true"]{background:var(--surface-selected);box-shadow:inset 2px 0 0 var(--border-focus)}
.acto__cuerda{align-self:stretch;border-radius:2px;justify-self:start;width:2px;background:var(--fase)}
.acto__bd{min-width:0}
.acto__verb{display:block;font-size:14px;font-weight:600;letter-spacing:-.012em;white-space:nowrap}
.acto__obj{display:block;font-size:13px;color:var(--text-secondary);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.acto__cli{min-width:0;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acto__cli i{display:block;font-style:normal;font-size:var(--text-overline);font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--text-tertiary);margin-top:2px}
.acto__plz{font-size:13px;color:var(--text-primary);min-width:0}
.acto__plz i{display:block;font-style:normal;font-size:12px;color:var(--text-tertiary);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acto__amt{font-size:14px;font-weight:500;text-align:right;white-space:nowrap}
.acto__amt em{font-style:normal;font-size:11px;color:var(--text-tertiary);font-weight:400}
.acto__go{display:flex;justify-content:flex-end}
.acto__go .btn{opacity:0;transition:opacity var(--motion-fast) var(--ease)}
.acto:hover .acto__go .btn,.acto[aria-selected="true"] .acto__go .btn,
.acto:focus-visible .acto__go .btn{opacity:1}

/* Fases: color, grosor, fondo y peso de la cifra */
.f-holgado {--fase:var(--phase-holgado)}
.f-proximo {--fase:var(--phase-proximo)}
.f-urgente {--fase:var(--phase-urgente)}
.f-quiebre {--fase:var(--phase-quiebre)}
.f-cumplido{--fase:var(--phase-cumplido)}
.f-proximo  .acto__cuerda{width:3px}
.f-urgente  .acto__cuerda{width:3px}
.f-quiebre  .acto__cuerda{width:4px}
.f-urgente,.f-quiebre{background:var(--surface-selected)}
.f-urgente .acto__amt{font-weight:500}
.f-quiebre .acto__amt{font-weight:600}
.f-quiebre .acto__cuerda{position:relative}
.f-quiebre .acto__cuerda::after{content:"";position:absolute;left:-2px;bottom:-1px;
  width:8px;height:8px;background:var(--fase);border-radius:0 0 0 2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ─────────────────────────────────────────────────────────────
   11 · TABLA
   ───────────────────────────────────────────────────────────── */
.tbl{width:100%;border-collapse:collapse;background:var(--surface-work)}
.tbl th{height:var(--row-tabla);padding:0 var(--sp-2);text-align:left;
  font-size:var(--text-overline);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-tertiary);border-bottom:1px solid var(--border-hair);white-space:nowrap}
.tbl td{height:var(--row-tabla);padding:0 var(--sp-2);font-size:14px;
  border-bottom:1px solid var(--border-soft)}
.tbl tbody tr:nth-child(even){background:var(--surface-sunken)}
.tbl tbody tr:hover{background:var(--surface-selected)}
.tbl .num{text-align:right}

/* ─────────────────────────────────────────────────────────────
   12 · ALERTA Y AVISO
   ───────────────────────────────────────────────────────────── */
.alert{display:flex;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3);background:var(--surface-work);
  border:1px solid var(--border-hair);border-left:3px solid var(--border-focus);border-radius:var(--r-sm)}
.alert--ok{border-left-color:var(--phase-cumplido)}
.alert svg{width:17px;height:17px;flex:none;margin-top:2px;stroke:currentColor;fill:none;stroke-width:1.7}
.alert--quiet{border-left-color:var(--border-strong)}
.alert__t{display:block;font-size:14px;font-weight:600;letter-spacing:-.01em}
.alert__d{display:block;font-size:13px;color:var(--text-secondary);margin-top:2px}
.toast{position:fixed;z-index:var(--z-toast);left:50%;bottom:var(--sp-4);transform:translateX(-50%);
  display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3);
  background:var(--ink);color:var(--paper);border-radius:var(--r-sm);box-shadow:var(--elev-modal);
  font-size:14px}

/* ─────────────────────────────────────────────────────────────
   13 · ESTADOS DE SUPERFICIE
   ───────────────────────────────────────────────────────────── */
.skeleton{background:var(--surface-sunken);border-radius:var(--r-sm)}
.sk-row{display:grid;grid-template-columns:var(--acto-cols);
  gap:0 var(--acto-gap);align-items:center;min-height:var(--row-acto);padding:var(--sp-sm) var(--sp-2);
  background:var(--surface-work);border-bottom:1px solid var(--border-soft)}
.sk-row .skeleton{height:11px}

.empty{background:var(--surface-work);border:1px solid var(--border-hair);border-radius:var(--r-md);
  padding:var(--sp-5) var(--sp-4);text-align:center}
.empty__t{font-size:var(--text-h3);font-weight:600;letter-spacing:-.014em}
.empty__d{font-size:14px;color:var(--text-secondary);margin-top:var(--sp-1);max-width:44ch;
  margin-left:auto;margin-right:auto}
.empty__stats{display:flex;justify-content:center;gap:var(--sp-4);margin-top:var(--sp-3);
  padding-top:var(--sp-3);border-top:1px solid var(--border-soft)}
.empty__stat b{display:block;font-size:24px;font-weight:300;letter-spacing:-.02em}
.empty__stat span{font-size:var(--text-overline);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-tertiary)}

/* ─────────────────────────────────────────────────────────────
   14 · SUPERPOSICIÓN
   ───────────────────────────────────────────────────────────── */
.popover{background:var(--surface-raised);border:1px solid var(--border-hair);
  border-radius:var(--r-md);box-shadow:var(--elev-popover);padding:var(--sp-1);z-index:var(--z-popover)}
.modal{background:var(--surface-raised);border:1px solid var(--border-hair);
  border-radius:var(--r-lg);box-shadow:var(--elev-modal);z-index:var(--z-modal)}

/* ─────────────────────────────────────────────────────────────
   15 · IMPRESIÓN. El comprobante no es una captura de pantalla.
   ───────────────────────────────────────────────────────────── */
@media print{
  :root{--surface-canvas:#fff;--surface-work:#fff;--surface-chrome:#fff;--surface-sunken:#fff}
  body{background:#fff;font-size:11pt}
  .no-print,.btn,.toast,.popover{display:none!important}
  .panel,.kpis,.acto{border-color:#999;box-shadow:none;break-inside:avoid}
  a[href]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
}