/* Hub OS — sobre TOKENS_the_detailing_hub_v1 / DESIGN_SYSTEM v1.1
   Un solo acento: lima. Coral SOLO en la firma "by Detly•". Sin serif, nunca. */
:root{
  --ink:#111110; --paper:#F0EDE5; --accent:#C8F73E; --coral:#FF5722;
  --n700:#363633; --n500:#6B6A66; --n300:#A5A39D; --n200:#C5C3BC; --n150:#D9D6CF;
  --surface:#E5E2DA; --raised:#E9E6DF; --border:#C5C3BC; --border-strong:#A5A39D;
  --danger:#B3261E; --ok:#3A7D1F;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Geist Mono','SF Mono',ui-monospace,'Consolas',monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
code{font-family:var(--mono);font-size:.85em;background:var(--surface);padding:1px 5px;border-radius:2px}
a{color:inherit}

/* ---------- login / setup ---------- */
.login,.setup{max-width:380px;margin:14vh auto;padding:0 24px}
.setup{max-width:560px}
.setup h1{font-size:22px;font-weight:800;margin-bottom:10px}
.setup p{color:var(--n500);font-size:14px;line-height:1.6}
.wm{font-weight:800;font-size:18px;letter-spacing:-.01em}
.wm .dot{color:var(--accent)}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--n500);margin-top:14px}
.login h1{font-size:34px;font-weight:800;letter-spacing:-.02em;margin:6px 0 22px}
.login input{width:100%;padding:12px 14px;border:1px solid var(--border-strong);border-radius:3px;background:var(--paper);font-family:var(--sans);font-size:15px;color:var(--ink)}
.login input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--ink)}
.login button{width:100%;margin-top:10px;padding:12px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);font-family:var(--sans);font-weight:800;font-size:14px;border-radius:3px;cursor:pointer}
.login button:hover{background:var(--accent);color:var(--ink);border-color:var(--accent)}
.err{color:var(--danger);font-size:13px;margin-top:12px;min-height:18px}
.cargando{padding:60px 24px;font-family:var(--mono);font-size:13px;color:var(--n500)}

/* ---------- shell ---------- */
.wrap{max-width:1240px;margin:0 auto;padding:26px 24px 90px}
@media(max-width:640px){.wrap{padding:18px 14px 70px}}
header.top{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;border-bottom:1px solid var(--border-strong);padding-bottom:16px;margin-bottom:18px}
.top .sub{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--n500);margin-top:5px}
.top .right{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

.badge{font-family:var(--mono);font-size:11px;padding:4px 9px;border:1px solid var(--border-strong);border-radius:2px;white-space:nowrap}
.badge.on{background:var(--accent);border-color:var(--accent)}
.badge.off{color:var(--n500)}

/* ---------- tabs ---------- */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--border);margin-bottom:22px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;padding:11px 15px;cursor:pointer;color:var(--n500);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;background:none;border-top:0;border-left:0;border-right:0}
.tab.active{color:var(--ink);border-bottom-color:var(--accent);font-weight:500}
.tab:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.panel{display:none}.panel.active{display:block}

/* ---------- controles ---------- */
button.btn{font-family:var(--sans);font-weight:800;font-size:13.5px;border:1px solid var(--ink);background:var(--paper);color:var(--ink);border-radius:3px;padding:9px 16px;cursor:pointer;transition:background .12s,color .12s}
button.btn:hover{background:var(--ink);color:var(--paper)}
button.btn.primary{background:var(--accent);border-color:var(--accent)}
button.btn.primary:hover{background:var(--ink);color:var(--accent)}
button.btn.small{padding:5px 10px;font-size:12px}
button.btn:disabled{opacity:.45;cursor:not-allowed}
button.btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

input[type=text],input[type=date],input[type=time],input[type=number],select,textarea{
  font-family:var(--sans);font-size:14px;padding:8px 10px;border:1px solid var(--border-strong);
  border-radius:3px;background:var(--paper);color:var(--ink);width:100%}
textarea{line-height:1.55;resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--ink)}
label.f{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--n500);margin-bottom:5px}
.field{margin-bottom:14px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:880px){.grid2,.grid3{grid-template-columns:1fr}}

h2.sec{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--n500);font-weight:500;margin:30px 0 12px;border-top:1px solid var(--border);padding-top:18px}
h2.sec:first-child{border-top:0;padding-top:0;margin-top:0}
.note{font-size:12.5px;color:var(--n500);line-height:1.55;margin:6px 0 14px}
.card{border:1px solid var(--border);border-radius:4px;padding:18px}
.card h3{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--n500);font-weight:500;margin-bottom:12px}

/* ---------- kpis ---------- */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:8px}
@media(max-width:880px){.kpis{grid-template-columns:repeat(2,1fr)}}
.kpi{border:1px solid var(--border);border-radius:4px;padding:16px}
.kpi .lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--n500)}
.kpi .val{font-family:var(--mono);font-weight:500;font-size:32px;line-height:1.1;margin-top:7px;letter-spacing:-.02em}
.kpi .rate{font-family:var(--mono);font-size:11.5px;color:var(--n500);margin-top:4px}
.kpi .rate.up{color:var(--ok)}.kpi .rate.down{color:var(--danger)}
.kpi .bench{font-family:var(--mono);font-size:10.5px;color:var(--n300);margin-top:3px}

/* ---------- tabla ---------- */
.tablewrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13px}
th{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--n500);font-weight:500;text-align:left;padding:9px 7px;border-bottom:1px solid var(--border-strong);white-space:nowrap}
td{padding:7px;border-bottom:1px solid var(--border);vertical-align:middle}
tr.done{background:rgba(200,247,62,.09)}
tr.pin td{border-top:2px solid var(--accent)}
input.m{width:74px;font-family:var(--mono);font-size:12.5px;text-align:right;padding:5px 7px}
.fmt{font-family:var(--mono);font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--n500);border:1px solid var(--border);border-radius:999px;padding:2px 8px;display:inline-block;white-space:nowrap}
.datecell{font-family:var(--mono);font-size:11.5px;color:var(--n700);white-space:nowrap}
.rate-cell{font-family:var(--mono);font-size:11.5px;color:var(--n500)}
.rate-cell.good{color:var(--ok);font-weight:500}

/* ---------- chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0}
.chip{font-family:var(--mono);font-size:11.5px;padding:6px 12px;border:1px solid var(--border-strong);border-radius:999px;background:var(--paper);color:var(--ink);cursor:pointer}
.chip[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- toggles ---------- */
.tgl{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;user-select:none}
.tgl input{position:absolute;opacity:0;width:0;height:0}
.sw{width:36px;height:21px;border-radius:11px;background:var(--n200);border:1px solid var(--border-strong);position:relative;transition:background .16s;flex:none}
.sw::after{content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;background:var(--paper);transition:transform .16s}
.tgl input:checked+.sw{background:var(--accent);border-color:var(--accent)}
.tgl input:checked+.sw::after{transform:translateX(15px)}
.tgl input:focus-visible+.sw{outline:2px solid var(--ink);outline-offset:2px}

.phasebar{display:flex;gap:16px;align-items:center;flex-wrap:wrap;padding:11px 15px;border:1px solid var(--border);border-radius:3px;background:var(--raised);margin-bottom:20px}
.phasebar .label{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--n500);margin-right:auto}

/* ---------- compliance ---------- */
.hall{margin-top:10px;padding:9px 12px;border-radius:2px;font-size:12.5px;line-height:1.5}
.hall.bloqueo{border:1px solid var(--danger);color:var(--danger)}
.hall.aviso{border:1px solid var(--border-strong);color:var(--n700)}
.hall b{font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase}
.hall .fix{color:var(--n500);display:block;margin-top:2px}
.limpio{margin-top:10px;padding:9px 12px;border:1px solid var(--accent);background:rgba(200,247,62,.16);font-size:12.5px;border-radius:2px}

/* ---------- barras ---------- */
.bar{display:flex;align-items:center;gap:10px;margin:6px 0;font-size:12.5px}
.bar .barlabel{width:130px;flex:none}
.bar .track{flex:1;height:13px;background:var(--surface);border-radius:2px;overflow:hidden}
.bar .fill{height:100%;background:var(--accent)}
.bar .num{font-family:var(--mono);font-size:11.5px;color:var(--n500);width:62px;text-align:right;flex:none}

/* ---------- charts ---------- */
.chartbox{border:1px solid var(--border);border-radius:4px;padding:20px 18px 10px;overflow-x:auto}
svg{display:block;font-family:var(--mono)}
.gridline{stroke:var(--border);stroke-width:1;stroke-dasharray:2 4;opacity:.6}
.barrect{fill:var(--surface)}.barrect.has{fill:var(--accent)}
.barval{font-size:10.5px;fill:var(--n500)}.barx{font-size:9.5px;fill:var(--n500)}
.foll-line{fill:none;stroke:var(--ink);stroke-width:2}
.foll-dot{fill:var(--ink)}.foll-area{fill:var(--accent);opacity:.14}

/* ---------- salida IA ---------- */
.salida{width:100%;min-height:280px;font-family:var(--sans);font-size:14px;background:var(--surface)}
.meta{font-family:var(--mono);font-size:10.5px;color:var(--n300);margin-top:6px}
.spin{display:inline-block;width:11px;height:11px;border:2px solid var(--n200);border-top-color:var(--ink);border-radius:50%;animation:sp .7s linear infinite;vertical-align:-1px;margin-right:6px}
@keyframes sp{to{transform:rotate(360deg)}}

/* ---------- biblioteca ---------- */
.ref{border-bottom:1px solid var(--border);padding:11px 0;font-size:13.5px}
.ref:last-child{border-bottom:0}
.ref .q{font-family:var(--mono);font-size:11px;color:var(--n500);display:block;margin-top:3px}
.ref .src{font-family:var(--mono);font-size:10.5px;color:var(--n300);display:block;margin-top:3px}
.warn{border-left:2px solid var(--danger);padding-left:12px;margin:12px 0;font-size:13px;color:var(--n700)}

footer.bot{margin-top:44px;padding-top:18px;border-top:1px solid var(--border);font-family:var(--mono);font-size:11px;color:var(--n500);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
.firma{font-family:var(--sans)}.firma b{font-weight:800}.firma .c{color:var(--coral);font-weight:800}
.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:12px;padding:9px 16px;border-radius:3px;opacity:0;pointer-events:none;transition:opacity .18s;z-index:50}
.toast.show{opacity:1}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- chat del asistente ---------- */
.chat{border:1px solid var(--border);border-radius:4px;padding:14px;max-height:380px;
  overflow-y:auto;background:var(--raised)}
.bub{max-width:82%;padding:10px 13px;border-radius:4px;margin-bottom:9px;font-size:14px;line-height:1.55;
  white-space:normal;word-wrap:break-word}
.bub.yo{background:var(--ink);color:var(--paper);margin-left:auto;border-bottom-right-radius:1px}
.bub.ia{background:var(--paper);border:1px solid var(--border);border-bottom-left-radius:1px}
@media(max-width:640px){.bub{max-width:92%}}