/* VeneLED — sistema visual compartido (mockup) */
:root{
  --bg:#F4F6F9; --surface:#FFFFFF; --surface-2:#FAFBFC; --border:#E3E8EF;
  --text:#0F1729; --muted:#5A6B84; --faint:#8A99AF;
  --brand:#0B1220; --accent:#B4CA15; --accent-soft:#F2F7DA;
  --accent-ink:#5A6B08; --accent-deep:#8FA211;
  --blue:#2563EB; --blue-soft:#EAF1FE;
  --ok:#0F8B4C; --ok-soft:#E6F5EC;
  --warn:#B45309; --warn-soft:#FDF2E0;
  --danger:#C42B2B; --danger-soft:#FBEBEB;
  --shadow:0 1px 2px rgba(15,23,41,.06), 0 8px 24px rgba(15,23,41,.06);
  --shadow-lg:0 12px 40px rgba(15,23,41,.16);
  --r:12px; --r-sm:8px;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:14px; line-height:1.45; -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
a{color:inherit;text-decoration:none}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#CBD5E1;border-radius:6px;border:3px solid transparent;background-clip:content-box}

/* ---------- primitivas ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600;letter-spacing:.01em;white-space:nowrap}
.badge.ok{background:var(--ok-soft);color:var(--ok)}
.badge.warn{background:var(--warn-soft);color:var(--warn)}
.badge.danger{background:var(--danger-soft);color:var(--danger)}
.badge.blue{background:var(--blue-soft);color:var(--blue)}
.badge.neutral{background:#EEF1F5;color:var(--muted)}
.badge.accent{background:var(--accent-soft);color:var(--accent-ink)}
.dot{width:7px;height:7px;border-radius:50%;display:inline-block;flex:none}
.dot.ok{background:var(--ok)}.dot.warn{background:#E8930C}.dot.danger{background:var(--danger)}.dot.neutral{background:#B6C1D0}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:9px 15px;border-radius:var(--r-sm);font-weight:600;font-size:13px;transition:.14s;border:1px solid transparent;white-space:nowrap}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{background:#1B2637}
.btn-accent{background:var(--accent);color:#1F2604}
.btn-accent:hover{filter:brightness(1.05)}
.btn-ghost{background:var(--surface);border-color:var(--border);color:var(--text)}
.btn-ghost:hover{background:var(--surface-2);border-color:#CBD5E1}
.btn-danger{background:var(--danger-soft);color:var(--danger)}
.btn-danger:hover{background:#F7DDDD}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-sm{padding:6px 11px;font-size:12px}

.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow)}
.muted{color:var(--muted)}
.faint{color:var(--faint)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.num{font-variant-numeric:tabular-nums}
.row{display:flex;align-items:center;gap:10px}
.between{display:flex;align-items:center;justify-content:space-between;gap:10px}
.grow{flex:1;min-width:0}
.trunc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hide{display:none !important}

.field{width:100%;padding:9px 12px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface);outline:none;transition:.14s}
.field:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}

.tag-why{font-size:10.5px;font-weight:600;padding:1.5px 6px;border-radius:5px;letter-spacing:.02em;text-transform:uppercase}
.why-repone{background:var(--blue-soft);color:var(--blue)}
.why-afinidad{background:#F3EAFD;color:#7C3AED}
.why-foco{background:var(--accent-soft);color:var(--accent-ink)}
.why-recuperar{background:var(--danger-soft);color:var(--danger)}
.why-manual{background:#EEF1F5;color:var(--muted)}

/* ---------- toast ---------- */
#toast{position:fixed;left:50%;transform:translateX(-50%);bottom:24px;z-index:999;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{background:var(--brand);color:#fff;padding:10px 16px;border-radius:10px;font-size:13px;font-weight:500;box-shadow:var(--shadow-lg);animation:tin .22s ease}
@keyframes tin{from{opacity:0;transform:translateY(8px)}}