/* ============================================================
   SISTEMA DE COMPRAS · CUATICO + ADE
   Prototipo navegable · Dirección "ficha de taller"
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

:root {
  --cuatico: #D98A15;
  --ade: #4F6BED;

  --ok: #15926B;
  --espera: #C08A0B;
  --alerta: #D9541F;
  --urgente: #C0243A;
  --neutro: #6B7280;

  --r: 6px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;

  --ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --accent: var(--cuatico);
}

[data-theme="dark"] {
  --bg: #0B0D10;
  --surface: #12151A;
  --surface-2: #171A1F;
  --surface-3: #1D2128;
  --border: #242932;
  --border-strong: #333A45;
  --text: #E7EAEE;
  --text-dim: #8B929C;
  --text-faint: #5A616B;
  --shadow: 0 12px 32px rgba(0,0,0,.5);
}

[data-theme="light"] {
  --bg: #F1F3F5;
  --surface: #FFFFFF;
  --surface-2: #FAFBFC;
  --surface-3: #F4F5F7;
  --border: #E3E6EA;
  --border-strong: #CDD2D9;
  --text: #14181D;
  --text-dim: #5C636D;
  --text-faint: #8A9099;
  --shadow: 0 12px 32px rgba(20,24,29,.13);
}

[data-empresa="CUATICO"] { --accent: var(--cuatico); }
[data-empresa="ADE"]     { --accent: var(--ade); }
[data-empresa="Ambas"]   { --accent: #7C8595; }

html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 13px/1.5 var(--ui);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11", "ss01";
}

.mono, .num { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

/* ---------- estructura ---------- */

.app { display: grid; grid-template-columns: 216px 1fr; height: 100vh; }

.side {
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  min-height: 0;
}

.brand {
  padding: var(--s4) var(--s4) var(--s3);
  border-bottom: 1px solid var(--border);
}
.emp-switch {
  display: flex; align-items: center; gap: var(--s2);
  width: 100%; padding: 7px var(--s2);
  border: 1px solid var(--border); border-radius: var(--r);
  background: var(--surface-2);
  font-weight: 600; font-size: 12.5px;
  letter-spacing: .02em;
}
.emp-switch:hover { border-color: var(--border-strong); }
.dot-emp { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex: none; }
.emp-switch .caret { margin-left: auto; color: var(--text-faint); font-size: 10px; }
.proto-tag {
  margin-top: var(--s2); font-size: 10.5px; color: var(--text-faint);
  letter-spacing: .04em; text-transform: uppercase;
}

.nav { padding: var(--s3) var(--s2); overflow-y: auto; flex: 1; min-height: 0; }
.nav-lbl {
  font-size: 10px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--text-faint); padding: var(--s3) var(--s2) var(--s1); font-weight: 600;
}
.nav a {
  display: flex; align-items: center; gap: var(--s2);
  padding: 6px var(--s2); border-radius: var(--r);
  color: var(--text-dim); text-decoration: none; font-size: 13px;
  cursor: pointer;
}
.nav a:hover { background: var(--surface-2); color: var(--text); }
.nav a.on { background: var(--surface-3); color: var(--text); font-weight: 500; }
.nav a.on .ico { color: var(--accent); }
.ico { width: 15px; text-align: center; font-size: 12px; color: var(--text-faint); flex: none; }
.pill {
  margin-left: auto; font: 500 10.5px/1 var(--mono);
  background: var(--surface-3); color: var(--text-dim);
  padding: 3px 5px; border-radius: 4px;
}
.nav a.on .pill { background: var(--accent); color: #fff; }

.side-foot { border-top: 1px solid var(--border); padding: var(--s3); }
.who { display: flex; align-items: center; gap: var(--s2); }
.avatar {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  background: var(--accent); color: #fff;
  display: grid; place-items: center; font-weight: 600; font-size: 11px;
}
.who small { display: block; color: var(--text-faint); font-size: 11px; }

/* ---------- topbar ---------- */

.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }

.top {
  height: 48px; flex: none;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  display: flex; align-items: center; gap: var(--s3);
  padding: 0 var(--s4);
}
.searchbox {
  display: flex; align-items: center; gap: var(--s2);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r); padding: 5px var(--s2);
  color: var(--text-faint); font-size: 12.5px;
  min-width: 200px; max-width: 320px; flex: 1;
}
.searchbox:hover { border-color: var(--border-strong); }
kbd {
  font: 500 10px/1 var(--mono); color: var(--text-faint);
  border: 1px solid var(--border); border-radius: 3px;
  padding: 3px 4px; margin-left: auto; background: var(--surface-3);
}
.tc-ref { margin-left: auto; font-size: 11px; color: var(--text-faint); }
.tc-ref b { color: var(--text-dim); font-weight: 500; }

.btn {
  border: 1px solid var(--border); border-radius: var(--r);
  padding: 5px 10px; font-size: 12.5px; font-weight: 500;
  background: var(--surface-2); color: var(--text);
  white-space: nowrap;
}
.btn:hover { border-color: var(--border-strong); background: var(--surface-3); }
.btn-primary {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.btn-primary:hover { filter: brightness(1.08); background: var(--accent); }
.btn-sm { padding: 3px 8px; font-size: 12px; }
.btn-icon { padding: 5px 7px; }

.view { flex: 1; min-height: 0; overflow: auto; }

/* ---------- filtros ---------- */

.filters {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-wrap: wrap;
}
.chip {
  border: 1px solid var(--border); border-radius: 20px;
  padding: 3px 10px; font-size: 12px; color: var(--text-dim);
  background: transparent;
}
.chip:hover { border-color: var(--border-strong); color: var(--text); }
.chip.on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 500; }
.fsep { width: 1px; height: 18px; background: var(--border); }
.fcount { margin-left: auto; font-size: 12px; color: var(--text-faint); }

/* ---------- kanban ---------- */

.board {
  display: flex; gap: var(--s3);
  padding: var(--s4);
  align-items: flex-start;
  min-height: 100%;
}
.col { width: 228px; flex: none; display: flex; flex-direction: column; gap: var(--s2); }
.col-head {
  display: flex; align-items: center; gap: var(--s2);
  padding: 0 var(--s1) var(--s1);
}
.col-name {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .07em; color: var(--text-dim);
}
.col-n { font: 500 11px/1 var(--mono); color: var(--text-faint); }
.col-bar { height: 2px; background: var(--border); border-radius: 2px; margin-bottom: var(--s2); }
.col.hot .col-bar { background: var(--accent); }
.col-body {
  display: flex; flex-direction: column; gap: var(--s2);
  min-height: 60px; border-radius: var(--r);
  padding: 2px; transition: background .12s;
}
.col-body.over { background: color-mix(in srgb, var(--accent) 12%, transparent); outline: 1px dashed var(--accent); }

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); padding: var(--s3);
  cursor: pointer; position: relative;
  border-left: 2px solid var(--emp, var(--border-strong));
}
.card:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.card { transition: transform .1s, border-color .1s; }
.card.dragging { opacity: .4; }
.card-top { display: flex; align-items: center; gap: var(--s2); margin-bottom: 5px; }
.cid { font: 500 10.5px/1 var(--mono); color: var(--text-faint); letter-spacing: 0; }
.card-title { font-size: 12.5px; font-weight: 500; line-height: 1.35; margin-bottom: var(--s2); }
.card-sub { font-size: 11px; color: var(--text-faint); margin-bottom: var(--s2); }
.card-money { font: 600 13.5px/1 var(--mono); margin-bottom: var(--s2); }
.card-foot {
  display: flex; align-items: center; gap: var(--s2);
  font-size: 11px; color: var(--text-dim);
  border-top: 1px solid var(--border); padding-top: var(--s2);
}
.who-mini { display: flex; align-items: center; gap: 5px; }
.av-mini {
  width: 16px; height: 16px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  font: 600 9px/1 var(--ui); color: #fff; background: var(--neutro);
}
.days { margin-left: auto; font: 400 10.5px/1 var(--mono); color: var(--text-faint); }
.days.warn { color: var(--alerta); font-weight: 500; }

.tag {
  font-size: 9.5px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; padding: 2px 5px; border-radius: 3px;
  white-space: nowrap;
}
.tag-urg { background: var(--urgente); color: #fff; }
.tag-exc { background: transparent; color: var(--alerta); border: 1px solid var(--alerta); }
.tag-emp { background: var(--surface-3); color: var(--text-dim); }
.tag-ok { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); }
.tag-esp { background: color-mix(in srgb, var(--espera) 20%, transparent); color: var(--espera); }
.tag-ale { background: color-mix(in srgb, var(--alerta) 18%, transparent); color: var(--alerta); }

/* ---------- detalle ---------- */

.det { max-width: 1120px; margin: 0 auto; padding: var(--s5) var(--s5) var(--s6); }
.crumb {
  display: flex; align-items: center; gap: var(--s2);
  font-size: 12px; color: var(--text-faint); margin-bottom: var(--s4);
}
.crumb button { color: var(--text-dim); font-size: 12px; }
.crumb button:hover { color: var(--text); }

.det-head { display: flex; align-items: flex-start; gap: var(--s4); margin-bottom: var(--s4); }
.det-head h1 { font-size: 24px; font-weight: 600; letter-spacing: -.015em; margin: var(--s1) 0 var(--s3); }
.det-meta { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; font-size: 12.5px; color: var(--text-dim); }
.det-meta b { font-family: var(--mono); font-weight: 600; color: var(--text); }
.badge-row { display: flex; gap: var(--s2); align-items: center; }
.state-badge {
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 4px;
  background: color-mix(in srgb, var(--espera) 20%, transparent); color: var(--espera);
}

/* barra AHORA — elemento firma */
.ahora {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4);
  border: 1px solid color-mix(in srgb, var(--espera) 40%, var(--border));
  border-left: 3px solid var(--espera);
  border-radius: var(--r);
  background: color-mix(in srgb, var(--espera) 8%, var(--surface));
  margin-bottom: var(--s5);
  flex-wrap: wrap;
}
.ahora-lbl {
  font: 700 10px/1 var(--ui); letter-spacing: .12em; text-transform: uppercase;
  color: var(--espera); flex: none;
}
.ahora-txt { font-size: 13.5px; flex: 1; min-width: 240px; }
.ahora-txt b { font-weight: 600; }
.ahora-txt .since { color: var(--text-dim); }
.ahora-acts { display: flex; gap: var(--s2); flex-wrap: wrap; }

/* stepper */
.stepper {
  display: flex; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); padding: var(--s4) var(--s3);
  margin-bottom: var(--s5); overflow-x: auto;
}
.step { flex: 1; min-width: 76px; text-align: center; position: relative; }
.step::before {
  content: ""; position: absolute; top: 5px; left: 0; right: 50%;
  height: 1px; background: var(--border);
}
.step::after {
  content: ""; position: absolute; top: 5px; left: 50%; right: 0;
  height: 1px; background: var(--border);
}
.step:first-child::before, .step:last-child::after { display: none; }
.step.done::before, .step.done::after, .step.now::before { background: var(--accent); }
.sdot {
  width: 11px; height: 11px; border-radius: 50%; margin: 0 auto var(--s2);
  background: var(--surface); border: 1.5px solid var(--border);
  position: relative; z-index: 1;
}
.step.done .sdot { background: var(--accent); border-color: var(--accent); }
.step.now .sdot {
  background: var(--surface); border-color: var(--accent); border-width: 2px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.step-name { font-size: 11px; color: var(--text-dim); }
.step.now .step-name { color: var(--text); font-weight: 600; }
.step-date { font: 400 10px/1.4 var(--mono); color: var(--text-faint); margin-top: 2px; }

/* tabs */
.tabs { display: flex; gap: var(--s1); border-bottom: 1px solid var(--border); margin-bottom: var(--s5); overflow-x: auto; }
.tab {
  padding: var(--s2) var(--s3); font-size: 13px; color: var(--text-dim);
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
}
.tab:hover { color: var(--text); }
.tab.on { color: var(--text); border-bottom-color: var(--accent); font-weight: 500; }
.tab .n { font: 500 10.5px/1 var(--mono); color: var(--text-faint); margin-left: 4px; }

/* paneles */
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s3); }
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: var(--s4); }
.panel h3 {
  font-size: 10.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-faint); margin: 0 0 var(--s3);
}
.kv { display: flex; align-items: baseline; gap: var(--s3); padding: 5px 0; font-size: 13px; }
.kv dt { color: var(--text-dim); width: 88px; flex: none; font-size: 12px; }
.kv dd { margin: 0; }
.reqline { display: flex; align-items: flex-start; gap: var(--s2); padding: 4px 0; font-size: 12.5px; }
.mark { flex: none; font-family: var(--mono); font-weight: 600; }
.mark.y { color: var(--ok); }
.mark.n { color: var(--alerta); }
.mark.d { color: var(--text-faint); }

.hist {
  display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap;
  border: 1px solid var(--border); border-left: 3px solid var(--neutro);
  border-radius: var(--r); background: var(--surface-2);
  padding: var(--s3) var(--s4); margin-top: var(--s3); font-size: 12.5px;
}
.hist .lbl { font: 600 10px/1 var(--ui); letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); }
.delta-up { color: var(--alerta); font-weight: 600; }
.delta-flat { color: var(--ok); font-weight: 600; }

/* cotizaciones */
.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--s3); }
.quote { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: var(--s4); }
.quote.best { border-color: var(--ok); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 40%, transparent); }
.quote h4 { margin: 0 0 var(--s1); font-size: 14px; font-weight: 600; }
.quote .prov-st { font-size: 11px; color: var(--text-faint); margin-bottom: var(--s3); }
.big { font: 600 20px/1 var(--mono); letter-spacing: -.02em; }
.qrow { display: flex; justify-content: space-between; font-size: 12px; padding: 3px 0; color: var(--text-dim); }
.qrow span:last-child { color: var(--text); font-family: var(--mono); }

/* timeline */
.tl { position: relative; padding-left: var(--s5); }
.tl::before { content: ""; position: absolute; left: 5px; top: 4px; bottom: 4px; width: 1px; background: var(--border); }
.tl-item { position: relative; padding-bottom: var(--s4); }
.tl-item::before {
  content: ""; position: absolute; left: calc(-1 * var(--s5) + 2px); top: 5px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--surface); border: 1.5px solid var(--border-strong);
}
.tl-item.acc::before { background: var(--accent); border-color: var(--accent); }
.tl-txt { font-size: 13px; }
.tl-when { font: 400 11px/1.4 var(--mono); color: var(--text-faint); margin-top: 1px; }

/* ---------- comparador ---------- */

.cmp-wrap { padding: var(--s5); }
.cmp-head { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s4); flex-wrap: wrap; }
.cmp-head h1 { font-size: 20px; font-weight: 600; margin: 0; letter-spacing: -.01em; }
.weights {
  display: flex; align-items: center; gap: var(--s2);
  font-size: 12px; color: var(--text-dim);
  border: 1px solid var(--border); border-radius: var(--r);
  padding: 4px var(--s2); background: var(--surface);
}

table.cmp {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); overflow: hidden; font-size: 13px;
}
table.cmp th, table.cmp td {
  padding: 9px var(--s3); text-align: right;
  border-bottom: 1px solid var(--border);
}
table.cmp th:first-child, table.cmp td:first-child {
  text-align: left; color: var(--text-dim); font-weight: 400;
  width: 210px; font-size: 12.5px;
}
table.cmp thead th {
  background: var(--surface-2); font-weight: 600; font-size: 13px;
  border-bottom: 1px solid var(--border-strong); text-align: right;
  vertical-align: bottom;
}
table.cmp thead th small { display: block; font-weight: 400; font-size: 11px; color: var(--text-faint); }
table.cmp td.v { font-family: var(--mono); font-variant-numeric: tabular-nums; }
tr.sep td { border-bottom: 1px solid var(--border-strong); }
tr.total td {
  background: var(--surface-3); font-weight: 700; font-size: 14px;
  border-top: 1px solid var(--border-strong); border-bottom: 1px solid var(--border-strong);
}
tr.total td:first-child { font-weight: 600; color: var(--text); letter-spacing: .02em; }
tr.score td { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); font-weight: 700; font-size: 14px; }
td.win { color: var(--ok); }
td.lose { color: var(--text-dim); }
.starwin { color: var(--ok); }
.note-inline { font-size: 11.5px; color: var(--text-faint); text-align: left !important; }

.bar { display: inline-block; height: 4px; border-radius: 2px; background: var(--accent); vertical-align: middle; margin-right: 6px; }

.cmp-foot {
  display: flex; align-items: center; gap: var(--s3);
  margin-top: var(--s4); padding: var(--s4);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  flex-wrap: wrap;
}
.cmp-foot .rec { font-size: 13.5px; }
.cmp-foot .rec b { font-weight: 600; }
.hint { font-size: 12px; color: var(--text-faint); width: 100%; }

/* ---------- overlays ---------- */

.scrim {
  position: fixed; inset: 0; background: rgba(4,6,9,.55);
  display: grid; place-items: center; padding: var(--s4); z-index: 50;
}
.modal {
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 10px; box-shadow: var(--shadow);
  width: 100%; max-width: 460px; padding: var(--s5);
}
.modal h2 { margin: 0 0 var(--s2); font-size: 16px; font-weight: 600; }
.modal p { margin: 0 0 var(--s4); font-size: 13px; color: var(--text-dim); line-height: 1.55; }
.modal label { display: block; font-size: 12px; color: var(--text-dim); margin-bottom: 5px; }
.modal select, .modal textarea {
  width: 100%; font: inherit; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r); padding: 7px var(--s2); margin-bottom: var(--s3);
}
.modal textarea { min-height: 68px; resize: vertical; }
.modal-acts { display: flex; gap: var(--s2); justify-content: flex-end; margin-top: var(--s3); }
.blocked-why {
  border-left: 3px solid var(--alerta);
  background: color-mix(in srgb, var(--alerta) 8%, transparent);
  padding: var(--s3); border-radius: 0 var(--r) var(--r) 0;
  font-size: 12.5px; margin-bottom: var(--s4);
}

.palette {
  position: fixed; top: 12vh; left: 50%; transform: translateX(-50%);
  width: min(540px, 92vw); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: 10px;
  box-shadow: var(--shadow); z-index: 60; overflow: hidden;
}
.palette input {
  width: 100%; font: 400 15px var(--ui); color: var(--text);
  background: transparent; border: none; border-bottom: 1px solid var(--border);
  padding: var(--s4); outline: none;
}
.pres { max-height: 320px; overflow-y: auto; padding: var(--s2); }
.pres-item {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s2) var(--s3); border-radius: var(--r); cursor: pointer; font-size: 13px;
}
.pres-item:hover, .pres-item.sel { background: var(--surface-3); }
.pres-item .cid { flex: none; }
.pres-empty { padding: var(--s4); color: var(--text-faint); font-size: 13px; }

.toast {
  position: fixed; bottom: var(--s5); left: 50%; transform: translateX(-50%);
  background: var(--surface); border: 1px solid var(--border-strong);
  border-left: 3px solid var(--ok);
  border-radius: var(--r); box-shadow: var(--shadow);
  padding: var(--s3) var(--s4); font-size: 13px; z-index: 70;
  max-width: 90vw;
}
.toast.bad { border-left-color: var(--alerta); }

/* ---------- vacío ---------- */
.empty { display: grid; place-items: center; height: 100%; text-align: center; padding: var(--s6); }
.empty h2 { font-size: 15px; font-weight: 600; margin: 0 0 var(--s2); }
.empty p { color: var(--text-dim); font-size: 13px; max-width: 380px; margin: 0 auto var(--s4); line-height: 1.6; }

/* ---------- mobile ---------- */
.botnav { display: none; }
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .side { display: none; }
  .view { padding-bottom: 56px; }
  .botnav {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; height: 56px;
    background: var(--surface); border-top: 1px solid var(--border); z-index: 40;
  }
  .botnav button {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; font-size: 10.5px; color: var(--text-faint);
  }
  .botnav button.on { color: var(--accent); }
  .det, .cmp-wrap { padding: var(--s4) var(--s3) var(--s6); }
  .det-head { flex-direction: column; gap: var(--s2); }
  .tc-ref { display: none; }
  table.cmp { font-size: 12px; }
  table.cmp th:first-child, table.cmp td:first-child { width: 130px; font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ============================================================
   AÑADIDOS DE LA APP REAL (no estaban en el prototipo)
   ============================================================ */

/* login */
.login { min-height: 100vh; display: grid; place-items: center; padding: var(--s4); }
.login-card {
  width: 100%; max-width: 360px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 10px; padding: var(--s5);
}
.login-card h1 { font-size: 18px; font-weight: 600; margin: 0 0 var(--s1); }
.login-card p { font-size: 12.5px; color: var(--text-dim); margin: 0 0 var(--s5); }
.field { margin-bottom: var(--s3); }
.field label { display: block; font-size: 12px; color: var(--text-dim); margin-bottom: 5px; }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r); padding: 7px var(--s2);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); outline: none; }
.field textarea { min-height: 62px; resize: vertical; }
.field .hint2 { font-size: 11px; color: var(--text-faint); margin-top: 4px; }
.err {
  border-left: 3px solid var(--alerta); background: color-mix(in srgb, var(--alerta) 8%, transparent);
  padding: var(--s2) var(--s3); border-radius: 0 var(--r) var(--r) 0;
  font-size: 12.5px; margin-bottom: var(--s3);
}
.ok-box {
  border-left: 3px solid var(--ok); background: color-mix(in srgb, var(--ok) 8%, transparent);
  padding: var(--s2) var(--s3); border-radius: 0 var(--r) var(--r) 0; font-size: 12.5px;
}

/* formularios de varios pasos */
.form-wrap { max-width: 620px; margin: 0 auto; padding: var(--s5) var(--s4) var(--s6); }
.pasos { display: flex; gap: var(--s2); margin-bottom: var(--s5); }
.paso-n {
  flex: 1; height: 3px; border-radius: 2px; background: var(--border);
}
.paso-n.on { background: var(--accent); }
.form-h { font-size: 18px; font-weight: 600; margin: 0 0 var(--s1); }
.form-sub { font-size: 12.5px; color: var(--text-dim); margin: 0 0 var(--s5); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.acts { display: flex; gap: var(--s2); justify-content: flex-end; margin-top: var(--s4); }

/* sugerencias del catálogo */
.sug { border: 1px solid var(--border); border-top: none; border-radius: 0 0 var(--r) var(--r); background: var(--surface); }
.sug-item { padding: var(--s2) var(--s3); font-size: 12.5px; cursor: pointer; display: flex; gap: var(--s2); }
.sug-item:hover { background: var(--surface-3); }
.sug-item b { font-weight: 500; }
.sug-item .veces { margin-left: auto; color: var(--text-faint); font-size: 11px; }

/* lista genérica */
.lista { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.lista-item {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4); border-bottom: 1px solid var(--border);
  cursor: pointer; font-size: 13px;
}
.lista-item:last-child { border-bottom: none; }
.lista-item:hover { background: var(--surface-2); }
.lista-item .crece { flex: 1; min-width: 0; }
.lista-item .sub { font-size: 11.5px; color: var(--text-faint); }

/* KPIs */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--s3); margin-bottom: var(--s5); }
.kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: var(--s3) var(--s4); }
.kpi .n { font: 600 22px/1.1 var(--mono); letter-spacing: -.02em; }
.kpi .l { font-size: 11px; color: var(--text-dim); margin-top: 4px; }
.kpi.acc .n { color: var(--accent); }

.spin { padding: var(--s6); text-align: center; color: var(--text-faint); font-size: 13px; }