/* =====================================================================
   Verifrio — Design System v1
   Tokens + primitivas. Todo el panel consume estas clases.
   ===================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  /* color · superficies */
  --bg:#070b12;
  --surface:#0d1420;
  --surface-2:#121b2b;
  --surface-3:#18233a;
  --line:rgba(255,255,255,.07);
  --line-strong:rgba(255,255,255,.13);

  /* color · texto */
  --text:#e9eff9;
  --text-2:#a7b6cb;
  --text-3:#71809a;

  /* color · marca y estado */
  --brand:#1e9bf0;
  --brand-deep:#0070c0;
  --brand-ink:#04121f;
  --brand-soft:rgba(30,155,240,.14);
  --brand-glow:rgba(30,155,240,.35);
  --ok:#34d399;
  --ok-soft:rgba(52,211,153,.12);
  --warn:#fbbf24;
  --warn-soft:rgba(251,191,36,.12);
  --danger:#f87171;
  --danger-soft:rgba(248,113,113,.12);
  --neutral-soft:rgba(148,163,184,.12);

  /* espacio (escala 4) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px;
  --s6:24px; --s7:32px; --s8:40px; --s9:56px;

  /* radios */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px; --r-full:999px;

  /* elevación */
  --e1:0 1px 2px rgba(0,0,0,.4);
  --e2:0 8px 24px -12px rgba(0,0,0,.7);
  --e3:0 24px 60px -24px rgba(0,0,0,.85);

  /* tipografía */
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Inter,Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;
  --t-11:11px; --t-12:12px; --t-13:13px; --t-14:14px;
  --t-16:16px; --t-20:20px; --t-24:24px; --t-32:32px; --t-40:40px;

  /* motion */
  --fast:120ms cubic-bezier(.2,.6,.3,1);
  --base:200ms cubic-bezier(.2,.6,.3,1);

  /* layout */
  --sidebar:248px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(56,189,248,.07), transparent 60%),
    var(--bg);
  color:var(--text);
  font:var(--t-14)/1.55 var(--font);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
::selection{background:var(--brand-soft)}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px}

h2{font-size:var(--t-20);font-weight:650;letter-spacing:-.015em}
h3{font-size:var(--t-16);font-weight:600;letter-spacing:-.01em}
.sub{color:var(--text-2);font-size:var(--t-13)}
.mono{font-family:var(--mono);font-size:var(--t-12)}
.muted{color:var(--text-2)}

/* fondo vivo: dos halos de marca que derivan muy despacio */
body::before,body::after{
  content:"";position:fixed;inset:-25vmax;pointer-events:none;z-index:0;
  background:radial-gradient(closest-side,var(--brand-soft),transparent 70%);
  animation:drift 46s ease-in-out infinite alternate;
}
body::after{
  background:radial-gradient(closest-side,rgba(0,112,192,.16),transparent 70%);
  animation-duration:64s;animation-direction:alternate-reverse;
}
@keyframes drift{
  from{transform:translate3d(-7%,-5%,0) scale(1)}
  to{transform:translate3d(9%,7%,0) scale(1.18)}
}
.shell{position:relative;z-index:1}

@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.main > *{animation:rise .42s cubic-bezier(.2,.7,.3,1) both}
.main > *:nth-child(2){animation-delay:.05s}
.main > *:nth-child(3){animation-delay:.1s}
.main > *:nth-child(4){animation-delay:.15s}
.main > *:nth-child(5){animation-delay:.2s}
.main > *:nth-child(6){animation-delay:.24s}

/* ---------- 2. Shell ---------- */
.shell{display:grid;grid-template-columns:var(--sidebar) 1fr;min-height:100vh}

.side{
  position:sticky;top:0;height:100vh;display:flex;flex-direction:column;
  background:linear-gradient(180deg, rgba(18,27,43,.72), rgba(13,20,32,.9));
  border-right:1px solid var(--line);padding:var(--s5) var(--s3);gap:var(--s5);
  backdrop-filter:blur(8px);
}
.brand{display:flex;align-items:center;gap:10px;padding:var(--s1) var(--s3) var(--s3) calc(var(--s3) + 1px)}
/* logo original de Verifrio: se escala SOLO por altura (ancho automático),
   sin recortar, sin recolorear y sin recomponer. Proporción nativa 890x678. */
.brand-lockup{
  height:76px;width:auto;display:block;flex:none;
  filter:drop-shadow(0 10px 26px rgba(0,112,192,.32));
  transition:transform var(--base), filter var(--base);
}
.brand:hover .brand-lockup{transform:translateY(-1px);filter:drop-shadow(0 14px 30px rgba(0,112,192,.46))}
.brand-sym{height:34px;width:auto;display:block;flex:none;
  filter:drop-shadow(0 6px 16px rgba(0,112,192,.4))}
.brand-mark{
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;overflow:hidden;
  background:linear-gradient(160deg,var(--brand),var(--brand-deep));
  box-shadow:0 8px 22px -10px var(--brand-glow), inset 0 0 0 1px rgba(255,255,255,.14);
}
.brand-mark img{height:21px;width:auto;max-width:72%;object-fit:contain;display:block}
.brand-name{font-weight:700;font-size:var(--t-16);letter-spacing:-.02em}
.brand-name span{color:var(--brand)}
.brand-sub{display:block;font-size:var(--t-11);color:var(--text-3);font-weight:500;letter-spacing:.02em}

.nav-group{display:flex;flex-direction:column;gap:2px}
.nav-label{
  font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--text-3);
  font-weight:650;padding:var(--s2) var(--s3) var(--s1);
}
.nav-item{
  display:flex;align-items:center;justify-content:flex-start;gap:10px;width:100%;text-align:left;
  padding:9px 12px;border-radius:10px;background:transparent;color:var(--text-2);
  font:inherit;font-weight:500;font-size:var(--t-13);border:1px solid transparent;
  transition:background var(--fast), color var(--fast), border-color var(--fast);
}
.nav-item:hover{background:rgba(255,255,255,.04);color:var(--text)}
.nav-item .ico{width:16px;height:16px;flex:0 0 16px;opacity:.85}
.nav-item .count{
  margin-left:auto;font-size:var(--t-11);font-weight:700;padding:1px 7px;border-radius:var(--r-full);
  background:var(--danger-soft);color:var(--danger);border:1px solid rgba(248,113,113,.3);
}
.nav-item.on{background:var(--brand-soft);color:#dff4ff;border-color:rgba(30,155,240,.34)}
.nav-item.on .ico{opacity:1;color:var(--brand)}
.nav-item{position:relative}
.nav-item::before{
  content:"";position:absolute;left:-3px;top:50%;width:2px;height:0;border-radius:2px;
  background:var(--brand);transform:translateY(-50%);transition:height var(--base);
}
.nav-item:hover::before{height:40%}
.nav-item.on::before{height:62%}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:var(--s2);padding-top:var(--s4);border-top:1px solid var(--line)}
.who{display:flex;align-items:center;gap:10px;padding:var(--s1) var(--s2)}
.avatar{
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:0 0 30px;
  background:var(--surface-3);color:var(--text);font-size:var(--t-12);font-weight:700;border:1px solid var(--line-strong);
}
.who .n{font-size:var(--t-13);font-weight:600;line-height:1.25}
.who .e{font-size:var(--t-11);color:var(--text-3);line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px}

/* topbar móvil */
.topbar{display:none}
.scrim{display:none}

.content{min-width:0;display:flex;flex-direction:column}
.main{width:100%;max-width:1240px;margin:0 auto;padding:var(--s7) var(--s7) var(--s9)}

/* ---------- 3. Page header ---------- */
.page-head{display:flex;align-items:flex-start;gap:var(--s4);flex-wrap:wrap;margin-bottom:var(--s6)}
.page-head .ttl{min-width:0}
.page-head h1{font-size:var(--t-24);font-weight:680;letter-spacing:-.025em}
.page-head .sub{margin-top:2px}
.page-actions{margin-left:auto;display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}

/* ---------- 4. Botones ---------- */
button,.btn{
  font:inherit;font-weight:600;font-size:var(--t-13);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  padding:9px 15px;border-radius:10px;border:1px solid transparent;
  background:var(--brand);color:var(--brand-ink);
  transition:transform var(--fast), background var(--fast), border-color var(--fast), opacity var(--fast);
}
button:hover{filter:brightness(1.06)}
button:active{transform:translateY(1px)}
button:disabled{opacity:.45;cursor:not-allowed}
button.ghost,.btn.ghost{background:transparent;color:var(--text-2);border-color:var(--line-strong)}
button.ghost:hover{background:rgba(255,255,255,.04);color:var(--text)}
button.danger,.btn.danger{background:var(--danger-soft);color:var(--danger);border-color:rgba(248,113,113,.32)}
button.subtle{background:rgba(255,255,255,.05);color:var(--text);border-color:var(--line)}
button.icon{padding:9px;width:36px;height:36px;background:transparent;color:var(--text-2);border-color:var(--line)}
button.icon:hover{color:var(--text);background:rgba(255,255,255,.05)}
button.sm{padding:6px 11px;font-size:var(--t-12)}
button.link{background:none;color:var(--brand);padding:0;border:0;font-weight:600}

/* ---------- 5. Formularios ---------- */
label{
  display:block;font-size:var(--t-11);color:var(--text-3);margin:var(--s4) 0 var(--s2);
  text-transform:uppercase;letter-spacing:.08em;font-weight:650;
}
label:first-child{margin-top:0}
input,select,textarea{
  font:inherit;font-size:var(--t-14);width:100%;padding:10px 13px;border-radius:10px;
  background:rgba(3,7,14,.65);border:1px solid var(--line-strong);color:var(--text);
  transition:border-color var(--fast), background var(--fast);
}
input::placeholder{color:var(--text-3)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);background:rgba(3,7,14,.9)}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--text-3) 50%),linear-gradient(135deg,var(--text-3) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:34px}
.field{display:flex;flex-direction:column}

/* ---------- 6. Tarjetas y superficies ---------- */
.card,.panel{
  background:linear-gradient(180deg,rgba(19,29,46,.85),rgba(13,20,32,.9));
  border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s5);
  box-shadow:var(--e1);
}
.chartbox{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s5);margin:var(--s5) 0}
.rows{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.divider{height:1px;background:var(--line);margin:var(--s5) 0}

/* ---------- 7. KPIs ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:var(--s3);margin-bottom:var(--s6)}
.kpi{
  position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s4) var(--s4) var(--s4);overflow:hidden;
}
.kpi::after{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:var(--line-strong);opacity:.7}
.kpi.tone-ok::after{background:var(--ok)} .kpi.tone-warn::after{background:var(--warn)}
.kpi.tone-bad::after{background:var(--danger)} .kpi.tone-brand::after{background:var(--brand)}
.kpi .k-label{display:flex;align-items:center;gap:6px;font-size:var(--t-11);text-transform:uppercase;letter-spacing:.09em;color:var(--text-3);font-weight:650}
.kpi .k-value{font-size:var(--t-32);font-weight:650;letter-spacing:-.03em;line-height:1.1;margin-top:var(--s2);font-variant-numeric:tabular-nums}
.kpi .k-value small{font-size:var(--t-16);color:var(--text-3);font-weight:500;letter-spacing:0}
.kpi .k-foot{margin-top:var(--s1);font-size:var(--t-12);color:var(--text-2);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.tone-ok .k-value{color:var(--ok)} .tone-warn .k-value{color:var(--warn)}
.tone-bad .k-value{color:var(--danger)} .tone-brand .k-value{color:#dff4ff}

/* compat: .stats/.stat antiguos */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s3);margin-bottom:var(--s6)}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s4)}
.stat b{display:block;font-size:var(--t-24);letter-spacing:-.03em;margin-top:2px;font-variant-numeric:tabular-nums}
.stat small{color:var(--text-3);font-size:var(--t-11);text-transform:uppercase;letter-spacing:.08em;font-weight:650}

/* ---------- 8. Chips y badges ---------- */
.pill,.chip{
  display:inline-flex;align-items:center;gap:5px;font-size:var(--t-11);font-weight:650;
  padding:3px 9px;border-radius:var(--r-full);border:1px solid var(--line-strong);
  color:var(--text-2);background:var(--neutral-soft);white-space:nowrap;letter-spacing:.01em;
}
.pill.alarm,.chip.bad{background:var(--danger-soft);border-color:rgba(248,113,113,.35);color:var(--danger)}
.pill.warnp,.chip.warn{background:var(--warn-soft);border-color:rgba(251,191,36,.32);color:var(--warn)}
.chip.ok{background:var(--ok-soft);border-color:rgba(52,211,153,.32);color:var(--ok)}
.chip.brand{background:var(--brand-soft);border-color:rgba(56,189,248,.32);color:#bae6fd}
.chip.sm{padding:1px 7px;font-size:10.5px}
.dot{width:7px;height:7px;border-radius:50%;display:inline-block;flex:0 0 7px}
.ok{color:var(--ok)} .warn{color:var(--warn)} .bad{color:var(--danger)} .gray{color:var(--text-3)}
.bg-ok{background:var(--ok)} .bg-warn{background:var(--warn)} .bg-bad{background:var(--danger)} .bg-gray{background:#475569}
.pulse{box-shadow:0 0 0 0 rgba(248,113,113,.6);animation:pulse 2.4s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(248,113,113,0)}100%{box-shadow:0 0 0 0 rgba(248,113,113,0)}}

/* ---------- 9. Grid de aparatos ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:var(--s3)}
.dev{
  position:relative;display:flex;flex-direction:column;gap:var(--s2);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s4);cursor:pointer;transition:border-color var(--fast), transform var(--fast), background var(--fast);
}
.dev:hover{border-color:var(--line-strong);transform:translateY(-1px);background:var(--surface-2)}
.dev.is-bad{border-color:rgba(248,113,113,.28)}
.dev.is-bad:hover{border-color:rgba(248,113,113,.5)}
.dev-head{display:flex;align-items:flex-start;gap:var(--s3)}
.dev-name{font-weight:620;font-size:var(--t-14);letter-spacing:-.01em;line-height:1.3}
.dev-serial{font-family:var(--mono);font-size:var(--t-11);color:var(--text-3);margin-top:1px}
.dev-tags{display:flex;gap:5px;flex-wrap:wrap;margin-left:auto;justify-content:flex-end}
.dev-body{display:flex;align-items:flex-end;gap:var(--s3);margin-top:auto}
.temp{font-size:var(--t-40);font-weight:640;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums}
.temp small{font-size:var(--t-16);color:var(--text-3);font-weight:500;letter-spacing:0;margin-left:1px}
.temp.is-dim{color:var(--text-3)}
.spark{height:42px;flex:1;min-width:0}
.spark svg{width:100%;height:100%;display:block;overflow:visible}
.dev-foot{display:flex;align-items:center;gap:var(--s2);font-size:var(--t-12);color:var(--text-2);
  border-top:1px solid var(--line);padding-top:var(--s2);margin-top:var(--s1)}
.dev-foot .range{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--text-3)}

/* compat tarjeta antigua */
.card .top{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s2)}
.card .name{font-weight:620;font-size:var(--t-14)}
.card .serial{color:var(--text-3);font-size:var(--t-11);font-family:var(--mono);margin-top:2px}
.meta{color:var(--text-2);font-size:var(--t-12)}
.card:hover{border-color:var(--line-strong)}

/* ---------- 10. Secciones / atención ---------- */
.section{margin-top:var(--s6)}
.section-head{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s3)}
.section-head h2,.section-head h3{margin:0}
.section-head .sub{margin:0}
.section-head .right{margin-left:auto;display:flex;gap:var(--s2);align-items:center}

.attention{display:flex;flex-direction:column;gap:var(--s2)}
.alert-row{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--s3);
  background:linear-gradient(90deg,rgba(248,113,113,.09),rgba(248,113,113,.03));
  border:1px solid rgba(248,113,113,.28);border-radius:var(--r-md);
  padding:var(--s3) var(--s4);
}
.alert-row .a-main{min-width:0}
.alert-row .a-title{font-weight:620;font-size:var(--t-13)}
.alert-row .a-sub{font-size:var(--t-12);color:var(--text-2);margin-top:1px}
.alert-row.warn{background:linear-gradient(90deg,rgba(251,191,36,.08),rgba(251,191,36,.02));border-color:rgba(251,191,36,.28)}
.banner{
  display:flex;align-items:center;gap:var(--s3);background:var(--danger-soft);
  border:1px solid rgba(248,113,113,.3);color:#fecaca;padding:var(--s3) var(--s4);
  border-radius:var(--r-md);margin-bottom:var(--s4);font-size:var(--t-13);
}
.note{background:var(--brand-soft);border:1px solid rgba(56,189,248,.25);padding:var(--s3) var(--s4);border-radius:var(--r-md);font-size:var(--t-13);margin-top:var(--s4)}
.secret{font-family:var(--mono);background:rgba(3,7,14,.7);border:1px solid var(--line-strong);padding:var(--s3);border-radius:var(--r-sm);word-break:break-all;font-size:var(--t-12);margin-top:var(--s2)}

/* ---------- 11. Tablas ---------- */
table{width:100%;border-collapse:collapse;font-size:var(--t-13)}
th{
  text-align:left;color:var(--text-3);font-weight:650;font-size:10.5px;text-transform:uppercase;
  letter-spacing:.08em;padding:11px var(--s4);border-bottom:1px solid var(--line-strong);
  background:rgba(255,255,255,.015);position:sticky;top:0;z-index:1;
}
td{padding:12px var(--s4);border-bottom:1px solid var(--line);vertical-align:middle}
tbody tr:hover td{background:rgba(255,255,255,.022)}
tbody tr:last-child td{border-bottom:0}
.table-wrap,.tablewrap{overflow:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.table-wrap table,.tablewrap table{width:100%}

/* ---------- 12. Estados vacíos, carga ---------- */
.empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s2);
  text-align:center;padding:var(--s8) var(--s6);border:1px dashed var(--line-strong);
  border-radius:var(--r-lg);background:rgba(255,255,255,.012);color:var(--text-2);
}
.empty .ico{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--surface-3);color:var(--text-2);margin-bottom:var(--s1)}
.empty .t{font-weight:620;color:var(--text);font-size:var(--t-14)}
.empty .d{font-size:var(--t-13);max-width:44ch}
.skel{background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.09),rgba(255,255,255,.04));
  background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:var(--r-sm)}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.skel-card{height:148px;border-radius:var(--r-lg);border:1px solid var(--line)}
.skel-kpi{height:96px;border-radius:var(--r-lg);border:1px solid var(--line)}

/* ---------- 13. Segmented / toggles ---------- */
.segmented{display:inline-flex;padding:3px;gap:2px;background:rgba(3,7,14,.6);border:1px solid var(--line-strong);border-radius:10px}
.segmented button{
  background:transparent;color:var(--text-2);font-weight:600;font-size:var(--t-12);
  padding:6px 11px;border-radius:7px;border:0;
}
.segmented button.on{background:var(--surface-3);color:var(--text);box-shadow:var(--e1)}
.switch{position:relative;width:36px;height:20px;border-radius:99px;background:var(--surface-3);border:1px solid var(--line-strong);cursor:pointer;transition:background var(--fast)}
.switch.on{background:var(--brand)}

/* ---------- 14. Toast ---------- */
#toasts{position:fixed;right:var(--s6);bottom:var(--s6);display:flex;flex-direction:column;gap:var(--s2);z-index:200}
.toast{
  display:flex;align-items:flex-start;gap:var(--s2);min-width:260px;max-width:380px;
  background:var(--surface-3);border:1px solid var(--line-strong);border-radius:var(--r-md);
  padding:var(--s3) var(--s4);box-shadow:var(--e3);font-size:var(--t-13);
  animation:slidein var(--base) both;
}
.toast.ok{border-color:rgba(52,211,153,.4)} .toast.bad{border-color:rgba(248,113,113,.45)}
.toast .x{margin-left:auto;background:none;color:var(--text-3);padding:0;width:auto;height:auto}
@keyframes slidein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- 15. Login / inspector ---------- */
.login{max-width:400px;margin:11vh auto;padding:var(--s7);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--e3)}
.login h1{font-size:var(--t-24);letter-spacing:-.025em;display:flex;align-items:center;gap:10px}
.login p{color:var(--text-2);font-size:var(--t-13);margin-top:var(--s2)}
.login button{width:100%;margin-top:var(--s5)}
.err{color:var(--danger);font-size:var(--t-13);margin-top:var(--s3);min-height:18px}
.detail-head{display:flex;align-items:flex-end;gap:var(--s5);flex-wrap:wrap;margin-bottom:var(--s2)}
.detail-head .temp{font-size:var(--t-40);margin:0}
.back{background:transparent;color:var(--text-2);padding:6px 0;margin-bottom:var(--s3);font-weight:500}
.back:hover{color:var(--text)}
.legend{display:flex;gap:var(--s4);color:var(--text-2);font-size:var(--t-12);margin-top:var(--s3);flex-wrap:wrap}
svg{display:block}
.two{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.stack:not(table){display:flex;flex-direction:column;gap:var(--s3)}
.row{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}

/* ---------- 17. Modo soporte ---------- */
.support-bar{
  position:sticky;top:0;z-index:95;display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
  padding:9px var(--s5);
  background:linear-gradient(90deg,rgba(251,191,36,.16),rgba(251,191,36,.05));
  border-bottom:1px solid rgba(251,191,36,.4);
  color:#fde68a;font-size:var(--t-13);backdrop-filter:blur(6px);
}
.support-bar b{color:var(--warn);text-transform:uppercase;font-size:10.5px;letter-spacing:.1em;font-weight:700}
.support-bar .sb-reason{color:var(--text-2);font-style:italic;max-width:42ch;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.support-bar .sb-exp{margin-left:auto;color:var(--text-2);font-variant-numeric:tabular-nums}
@media(max-width:640px){
  .support-bar{padding:9px var(--s4);gap:var(--s2)}
  .support-bar .sb-reason{max-width:100%;white-space:normal}
  .support-bar .sb-exp{margin-left:0}
}

@media(max-width:1080px){ .main{padding:var(--s6)} }
@media(max-width:900px){
  .shell{grid-template-columns:1fr}
  .side{
    position:fixed;inset:0 auto 0 0;width:280px;z-index:120;transform:translateX(-102%);
    transition:transform var(--base);box-shadow:var(--e3);
  }
  .side.open{transform:none}
  .scrim{display:block;position:fixed;inset:0;background:rgba(2,5,10,.6);z-index:110;opacity:0;pointer-events:none;transition:opacity var(--base)}
  .scrim.show{opacity:1;pointer-events:auto}
  .topbar{
    display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);
    border-bottom:1px solid var(--line);background:rgba(7,11,18,.9);
    backdrop-filter:blur(10px);position:sticky;top:0;z-index:100;
  }
  .topbar .brand{padding:0}
  .topbar .spacer{flex:1}
  .main{padding:var(--s5) var(--s4) var(--s8)}
  .page-head h1{font-size:var(--t-20)}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2)}
  .grid{grid-template-columns:1fr}
  .two{grid-template-columns:1fr}
  #toasts{left:var(--s4);right:var(--s4);bottom:var(--s4)}
  .toast{max-width:none}
}
@media(max-width:420px){ .kpis{grid-template-columns:1fr} }
@media(prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} }

/* ---------- 18. Movimiento de datos ---------- */
@keyframes drawline{to{stroke-dashoffset:0}}
.spark path.line{animation:drawline 1.25s cubic-bezier(.3,.8,.3,1) both}
.spark path.area{animation:rise .8s ease both}

@keyframes breathe{0%,100%{box-shadow:0 0 0 0 rgba(52,211,153,.55)}55%{box-shadow:0 0 0 7px rgba(52,211,153,0)}}
.dot.bg-ok.pulse-ok{animation:breathe 2.8s ease-in-out infinite}

.refresh-ring{position:relative;display:inline-grid;place-items:center}
.refresh-ring svg{position:absolute;inset:0;transform:rotate(-90deg);pointer-events:none}
.refresh-ring circle{fill:none;stroke-width:2;stroke-linecap:round}
.refresh-ring .track{stroke:rgba(255,255,255,.10)}
.refresh-ring .bar{stroke:var(--brand);stroke-dasharray:94;stroke-dashoffset:0;
  animation:sweep 30s linear infinite}
@keyframes sweep{from{stroke-dashoffset:0}to{stroke-dashoffset:94}}

/* login */
.login{position:relative;overflow:hidden}
.login::before{
  content:"";position:absolute;inset:-40% -10% auto -10%;height:70%;
  background:radial-gradient(closest-side,var(--brand-soft),transparent 70%);
  animation:drift 30s ease-in-out infinite alternate;pointer-events:none;
}
.login > *{position:relative}
.login-logo{height:168px;width:auto;display:block;margin:-4px auto 20px;
  filter:drop-shadow(0 12px 30px rgba(0,112,192,.45));
  animation:rise .7s cubic-bezier(.2,.7,.3,1) both}

@media(prefers-reduced-motion:reduce){
  body::before,body::after,.main > *,.spark path.line,.spark path.area,
  .refresh-ring .bar,.login-logo,.dot.bg-ok.pulse-ok{animation:none!important}
}

/* ---------- 19. Facturas ---------- */
.num{text-align:right;font-variant-numeric:tabular-nums}
.sep{border:0;border-top:1px solid var(--border);margin:var(--s4) 0}
table.kv{width:100%;border-collapse:collapse;margin-top:var(--s2)}
table.kv td{padding:6px 0;border-bottom:1px solid var(--border);font-size:var(--t-13)}
table.kv td:first-child{color:var(--text-2);width:42%}
table.kv td:last-child{text-align:right;font-weight:600}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 18px;border-radius:var(--r-md);font-weight:600;font-size:var(--t-14);
  background:linear-gradient(160deg,var(--brand),var(--brand-deep));color:#04121f;
  border:0;cursor:pointer;text-decoration:none;
  box-shadow:0 10px 24px -12px var(--brand-glow);
  transition:transform var(--base),filter var(--base);
}
.btn:hover{transform:translateY(-1px);filter:brightness(1.06)}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none;filter:none}
.bill-banner{
  display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
  padding:14px var(--s4);margin-bottom:var(--s4);border-radius:var(--r-lg);
  background:linear-gradient(90deg,rgba(248,113,113,.14),rgba(248,113,113,.04));
  border:1px solid rgba(248,113,113,.4);
}
.bill-banner.warn{background:linear-gradient(90deg,rgba(251,191,36,.14),rgba(251,191,36,.04));
  border-color:rgba(251,191,36,.4)}
.bill-banner b{font-size:var(--t-14)}
.bill-banner .sp{margin-left:auto}

/* ---------- 20. Tablas que se adaptan a cualquier pantalla ---------- */
.rows{overflow:hidden}
.tablewrap{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.tablewrap::-webkit-scrollbar{height:8px}
.tablewrap::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:8px}
.tablewrap table{min-width:100%}

/* buscador de tablas */
.search{
  width:100%;max-width:320px;padding:9px 12px;border-radius:var(--r-md);
  background:var(--surface-2);border:1px solid var(--border);color:var(--text);
  font-size:var(--t-13);
}
.search:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}

/* dos columnas para la pantalla de pago */
.paygrid{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--s4);align-items:start}
@media(max-width:860px){ .paygrid{grid-template-columns:1fr} }

/* tablas sin ficha: se deslizan en horizontal en vez de aplastarse */
@media(min-width:901px){
  .rows{overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* portátil pequeño, tablet o móvil: cada fila se convierte en una ficha */
@media(max-width:1100px){
  table.stack{min-width:0;width:100%}
  table.stack thead{display:none}
  table.stack, table.stack tbody, table.stack tr, table.stack td{display:block;width:auto}
  table.stack tr{
    border:1px solid var(--border);border-radius:var(--r-md);margin:var(--s2) 0;
    padding:var(--s2) var(--s3);background:var(--surface-2);
  }
  table.stack td{
    display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
    padding:6px 0;border:0;border-bottom:1px dashed rgba(255,255,255,.06);
    text-align:right;
  }
  table.stack td:last-child{border-bottom:0}
  table.stack td::before{
    content:attr(data-label);color:var(--text-3);font-size:var(--t-11);
    text-transform:uppercase;letter-spacing:.07em;font-weight:600;text-align:left;flex:none;
  }
  table.stack td.cell-actions{justify-content:flex-end;gap:var(--s2);padding-top:var(--s2)}
  table.stack td.cell-actions::before{content:""}
  table.stack td.num, table.stack td:not([data-label]){text-align:right}
  table.stack td[data-label="Invoice"]{padding-top:var(--s2)}
  table.stack td[data-label="Invoice"]::before{display:none}
  table.stack td[data-label="Invoice"] span{font-size:var(--t-14);font-weight:700}
}

/* la tabla de facturas necesita sitio: nunca pegada a los bordes */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s4);flex-wrap:wrap}
.page-head .page-actions{flex:1 1 220px;display:flex;justify-content:flex-end}
@media(max-width:1100px){
  .page-head{flex-direction:column;align-items:stretch}
  .page-head .page-actions{justify-content:stretch}
  .search{max-width:none}
}

/* ---------- 21. Ofertas: selección, acciones y bloque del dispositivo ---------- */
.cell-pick{width:38px;padding-right:0!important;text-align:center}
.cell-pick input{width:16px;height:16px;accent-color:var(--brand);cursor:pointer}
tr.picked{background:rgba(30,155,240,.07)!important;box-shadow:inset 2px 0 0 var(--brand)}
button.danger{background:linear-gradient(180deg,#f87171,#dc2626);border-color:transparent;color:#1a0505}
button.danger:hover{filter:brightness(1.06)}
button.ghost.danger{background:transparent;color:#fca5a5;border-color:rgba(248,113,113,.35)}
button.ghost.danger:hover{background:rgba(248,113,113,.12);color:#fecaca}

.bulkbar{
  position:sticky;top:10px;z-index:40;display:none;align-items:center;gap:var(--s2);
  padding:10px 14px;margin:0 0 var(--s3);border-radius:var(--r-md);
  background:rgba(13,20,32,.95);border:1px solid var(--brand);backdrop-filter:blur(10px);
  box-shadow:var(--e2);flex-wrap:wrap;
}
.bulkbar.show{display:flex;animation:fade-up .18s ease-out both}
.bulkbar .bulk-count{font-size:var(--t-13);font-weight:600;margin-right:auto}

.hw-summary{
  margin-top:var(--s3);padding:12px 14px;border-radius:var(--r-md);
  background:var(--surface-2);border:1px dashed var(--border);
}
.hw-line{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);
  padding:4px 0;font-size:var(--t-13);color:var(--text-2)}
.hw-line b{color:var(--text);font-variant-numeric:tabular-nums}
.hw-line b small{color:var(--text-3);font-weight:400;font-size:var(--t-11)}
.hw-line.total{margin-top:6px;padding-top:8px;border-top:1px solid var(--border);
  font-size:var(--t-14);color:var(--text)}
.hw-line.total b{font-size:var(--t-18);letter-spacing:-.01em}

/* ---------- 22. Avisos de acción (modal en dos pasos) ---------- */
body.modal-on{overflow:hidden}
.modal-scrim{
  position:fixed;inset:0;z-index:400;display:grid;place-items:center;padding:var(--s4);
  background:rgba(3,7,14,.72);backdrop-filter:blur(6px);
  animation:modal-in .16s ease-out both;overflow-y:auto;
}
@keyframes modal-in{from{opacity:0}to{opacity:1}}
.modal{
  width:min(520px,100%);background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);box-shadow:var(--e3);overflow:hidden;
  animation:modal-pop .2s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes modal-pop{from{transform:translateY(10px) scale(.98);opacity:0}to{transform:none;opacity:1}}
.modal.is-danger{border-color:rgba(248,113,113,.45);box-shadow:0 20px 60px rgba(248,113,113,.12),var(--e3)}
.modal-head{padding:var(--s4) var(--s5) var(--s2)}
.modal-step{
  display:inline-block;font-size:var(--t-11);letter-spacing:.09em;text-transform:uppercase;
  font-weight:700;color:var(--brand);
}
.modal.is-danger .modal-step{color:#f87171}
.modal-head h3{margin:6px 0 0;font-size:var(--t-18);line-height:1.3;letter-spacing:-.01em}
.modal-body{padding:0 var(--s5) var(--s3);color:var(--text-2);font-size:var(--t-13);line-height:1.6}
.modal-body p{margin:0 0 10px}
.modal-body b{color:var(--text)}
.modal-list{margin:8px 0 12px;padding-left:18px;color:var(--text-2)}
.modal-list li{margin:4px 0}
.modal-list li::marker{color:var(--brand)}
.modal.is-danger .modal-list li::marker{color:#f87171}
.modal-body label{margin:12px 0 6px;display:block}
.modal-body .req{color:#f87171;font-weight:600;text-transform:none;letter-spacing:0}
.modal-body textarea{
  width:100%;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);
  color:var(--text);padding:10px 12px;font:inherit;font-size:var(--t-13);resize:vertical;min-height:74px;
}
.modal-body textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.modal-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.modal-chips .chip{cursor:pointer;border:1px solid var(--border);background:var(--surface-2)}
.modal-chips .chip.on{border-color:var(--brand);color:var(--brand)}
.modal-actions{
  display:flex;justify-content:flex-end;gap:var(--s2);padding:var(--s3) var(--s5) var(--s5);
  border-top:1px solid var(--border);margin-top:var(--s2);
}
.modal .err{padding:0 var(--s5) var(--s3);min-height:0}
@media(max-width:520px){
  .modal{width:100%}
  .modal-actions{flex-direction:column-reverse}
  .modal-actions button{width:100%}
}

/* ---------- 23. Árbol: migas de pan ---------- */
.crumbs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:var(--s2);
  font-size:var(--t-12);color:var(--text-3)}
.crumbs .link{background:none;border:0;padding:0;color:var(--text-2);cursor:pointer;
  font:inherit;font-weight:600;text-decoration:none}
.crumbs .link:hover{color:var(--brand);text-decoration:underline}
.crumbs .sep{color:var(--border)}
.crumbs [aria-current]{color:var(--text);font-weight:600}

/* ---------- 24. Cabeceras alineadas con sus columnas ---------- */
table th{white-space:nowrap}
table th.num{text-align:right}
table th.cell-pick{width:38px}
table td.num, table th.num{font-variant-numeric:tabular-nums}

/* ---------- 25. Menú y títulos en el mismo eje izquierdo ---------- */
.nav-item{justify-content:flex-start}
.nav-item>span:first-of-type{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-item .count{margin-left:0;flex:none}
.nav-label{padding-left:calc(var(--s3) + 1px)}   /* eje exacto con los iconos */
/* en móvil el cajón repite el mismo eje */
.side .nav-item{justify-content:flex-start}

/* ---------- 26. Planes ---------- */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--s3);margin-top:var(--s3)}
.plan{
  border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s4);
  background:var(--surface-2);display:flex;flex-direction:column;gap:6px;
}
.plan.on{border-color:rgba(30,155,240,.55);background:var(--brand-soft);box-shadow:0 12px 30px -22px var(--brand-glow)}
.plan.suggested{border-color:rgba(52,211,153,.45)}
.plan-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s2)}
.plan-top b{font-size:var(--t-15)}
.plan-price{font-size:var(--t-22);font-weight:700;letter-spacing:-.02em;margin-top:6px}
.plan-price small{font-size:var(--t-11);font-weight:500;color:var(--text-3)}
.plan-feats{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.plan-feats li{position:relative;padding-left:18px;font-size:var(--t-12);color:var(--text-2);line-height:1.5}
.plan-feats li::before{content:"✓";position:absolute;left:0;top:-1px;color:var(--ok);font-weight:700;font-size:var(--t-12)}
.chip.on{background:var(--brand-soft);color:#dff4ff;border-color:rgba(30,155,240,.4)}
/* conmutador de alcance (Activity) */
.seg{display:inline-flex;gap:4px;padding:4px;border:1px solid var(--border);border-radius:var(--r-full);
  background:var(--surface-2);margin:var(--s2) 0 var(--s3)}
.seg button{background:transparent;color:var(--text-2);border:0;border-radius:var(--r-full);
  padding:6px 14px;font-size:var(--t-12);font-weight:600}
.seg button.on{background:var(--brand);color:var(--brand-ink)}
button.link{background:none;border:0;padding:0;color:var(--brand);font-weight:600;cursor:pointer}
button.link:hover{text-decoration:underline}