/* =========================================================
   ZERO CODES v3 — Sistema de diseño
   Tema: neón/ciber pulido · oscuro · responsive · accesible
   El color de marca se puede sobreescribir desde Ajustes
   (variable --brand pintada por JS vía branding).
   ========================================================= */

:root{
  --bg:#060a14;
  --bg-2:#08101f;
  --panel:rgba(14,20,38,.72);
  --panel-solid:#0e1526;
  --border:rgba(120,160,255,.14);
  --border-strong:rgba(43,143,255,.45);
  --text:#eceaf6;
  --muted:#9c98bd;
  --brand:#2b8fff;
  --brand-2:#22d3ee;
  --pink:#38bdf8;
  --ok:#34d399;
  --warn:#fbbf24;
  --err:#f87171;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --display:'Space Grotesk',var(--sans);
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Consolas,monospace;
  --radius:16px;
  --radius-sm:10px;
  --shadow:0 18px 50px rgba(0,0,0,.45);
  --glow:0 0 24px rgba(43,143,255,.28);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--sans);
  font-size:15px;
  line-height:1.55;
  color:var(--text);
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(43,143,255,.16), transparent 60%),
    radial-gradient(700px 420px at -10% 30%, rgba(34,211,238,.10), transparent 60%),
    radial-gradient(600px 500px at 60% 110%, rgba(56,189,248,.08), transparent 60%),
    var(--bg);
  min-height:100vh;
}
body.scan-bg::before{
  content:'';
  position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(rgba(120,160,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(120,160,255,.05) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse at 50% 0%,#000 30%,transparent 75%);
}
::selection{background:rgba(43,143,255,.45);color:#fff}
a{color:var(--brand-2)}
:focus-visible{outline:2px solid var(--brand-2);outline-offset:2px;border-radius:6px}

/* ---------- Tipografía ---------- */
h1{font-family:var(--display);font-size:clamp(26px,4vw,34px);line-height:1.15;margin:6px 0 10px;letter-spacing:-.5px}
h2{font-family:var(--display);font-size:19px;margin:0;letter-spacing:-.2px}
h3{font-family:var(--display);font-size:16px;margin:0 0 12px}
.grad{background:linear-gradient(92deg,var(--brand),var(--pink) 55%,var(--brand-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow{font-size:11.5px;font-weight:700;letter-spacing:2.6px;text-transform:uppercase;color:var(--brand-2);margin:0 0 4px}
.sub,.lede{color:var(--muted);margin:0 0 18px;font-size:14.5px}
.hint{color:var(--muted);font-size:13px;margin:8px 0}
.muted{color:var(--muted)}
.mono{font-family:var(--mono)}
.fineprint{display:flex;gap:8px;align-items:flex-start;color:var(--muted);font-size:12.5px;margin-top:12px}

/* ---------- Barra superior ---------- */
.topbar{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 22px;
  background:rgba(9,8,18,.78);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
.brand{display:flex;align-items:center;font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:.5px;min-width:0}
.brand .dot{color:var(--brand);margin-right:8px;filter:drop-shadow(0 0 6px var(--brand))}
.brand .zero{color:var(--text)}
.brand .word{background:linear-gradient(92deg,var(--brand),var(--brand-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.brand img.blogo{height:24px;margin-right:9px;border-radius:6px}
.who{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--muted)}
.live{display:none;align-items:center;gap:7px;font-size:11px;font-weight:700;letter-spacing:1.6px;color:var(--ok)}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 rgba(52,211,153,.7);animation:pulse 1.8s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}
@media(min-width:640px){.live{display:flex}}

/* ---------- Layout ---------- */
.wrap{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:26px 20px 90px}
.center{position:relative;z-index:1;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:26px 16px}

/* ---------- Navegación (pestañas admin) ---------- */
.nav{display:flex;gap:8px;margin-bottom:22px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}
.nav button{
  flex:0 0 auto;border:1px solid var(--border);background:rgba(20,19,38,.6);
  color:var(--muted);padding:9px 16px;border-radius:999px;font-size:13.5px;font-weight:600;
  cursor:pointer;transition:all .18s;white-space:nowrap;font-family:var(--sans);
}
.nav button:hover{color:var(--text);border-color:var(--border-strong)}
.nav button.active{
  color:#fff;border-color:transparent;
  background:linear-gradient(92deg,var(--brand),var(--pink));
  box-shadow:0 4px 18px rgba(43,143,255,.35);
}

/* ---------- Tarjetas ---------- */
.card{
  position:relative;background:var(--panel);backdrop-filter:blur(10px);
  border:1px solid var(--border);border-radius:var(--radius);
  padding:24px;box-shadow:var(--shadow);
}
.card.glow::before{
  content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1px;
  background:linear-gradient(135deg,rgba(43,143,255,.55),rgba(34,211,238,.35) 45%,transparent 70%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
}
.cardhead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;flex-wrap:wrap}
.stack{display:flex;flex-direction:column;gap:18px}

/* ---------- Formularios ---------- */
label{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin:14px 0 6px;letter-spacing:.3px}
input,select,textarea{
  width:100%;padding:11px 13px;border-radius:var(--radius-sm);
  border:1px solid var(--border);background:rgba(10,9,22,.75);color:var(--text);
  font-size:14px;font-family:var(--sans);transition:border-color .15s, box-shadow .15s;
}
textarea{resize:vertical;font-family:var(--mono);font-size:12.5px;line-height:1.6}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(43,143,255,.18)}
input::placeholder,textarea::placeholder{color:#5d5a7d}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 18px) 55%,calc(100% - 13px) 55%;background-size:5px 5px;background-repeat:no-repeat;padding-right:34px}
.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0 16px}
.field-label{font-size:12.5px;font-weight:600;color:var(--muted);margin:16px 0 7px;letter-spacing:.3px}
.check{display:flex;align-items:center;gap:9px;cursor:pointer;margin-top:14px;color:var(--text);font-weight:500;font-size:14px}
.check input{width:auto;margin:0;accent-color:var(--brand)}
.inputwrap{position:relative}
.inputwrap .eye{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--muted);cursor:pointer;font-size:15px;padding:6px}

/* switch */
.switch{position:relative;display:inline-flex;align-items:center;gap:10px;cursor:pointer;user-select:none}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch .track{width:44px;height:24px;border-radius:999px;background:#2a2745;border:1px solid var(--border);transition:.2s;flex:0 0 auto}
.switch .track::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#8b87ad;transition:.2s}
.switch input:checked + .track{background:linear-gradient(92deg,var(--brand),var(--pink));border-color:transparent}
.switch input:checked + .track::after{left:23px;background:#fff}
.switch .sw-label{font-size:14px;font-weight:600}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:none;border-radius:var(--radius-sm);cursor:pointer;
  background:linear-gradient(92deg,var(--brand),var(--pink));
  color:#fff;font-weight:700;font-size:14px;font-family:var(--sans);
  padding:11px 20px;transition:transform .12s, box-shadow .15s, opacity .15s;
  box-shadow:0 4px 16px rgba(43,143,255,.3);
}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(43,143,255,.42)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.btn.ghost{background:rgba(24,22,44,.6);border:1px solid var(--border);color:var(--text);box-shadow:none;font-weight:600}
.btn.ghost:hover{border-color:var(--border-strong);box-shadow:none}
.btn.danger{background:linear-gradient(92deg,#ef4444,#b91c1c)}
.btn.sm{padding:8px 14px;font-size:13px}
.btn.lg{padding:14px 24px;font-size:15px}
.btn.full{width:100%;margin-top:18px}
.btn.glowing{animation:btnglow 2.4s ease-in-out infinite}
@keyframes btnglow{0%,100%{box-shadow:0 4px 16px rgba(43,143,255,.3)}50%{box-shadow:0 4px 30px rgba(56,189,248,.55)}}
.spin{width:16px;height:16px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;display:inline-block;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.linklike{background:none;border:none;color:var(--brand-2);cursor:pointer;font-size:inherit;padding:0;font-family:inherit;text-decoration:underline}

/* ---------- Mensajes / pills / chips ---------- */
.msg{margin-top:14px;font-size:13.5px;min-height:0;border-radius:var(--radius-sm);padding:0;opacity:0;transition:opacity .2s}
.msg.show{opacity:1;padding:11px 13px}
.msg.err{background:rgba(248,113,113,.12);border:1px solid rgba(248,113,113,.35);color:#fca5a5}
.msg.ok{background:rgba(52,211,153,.1);border:1px solid rgba(52,211,153,.3);color:#6ee7b7}
.msg.info{background:rgba(34,211,238,.08);border:1px solid rgba(34,211,238,.28);color:#67e8f9}

.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:11.5px;font-weight:700;letter-spacing:.4px;white-space:nowrap}
.pill.ok{background:rgba(52,211,153,.14);color:#6ee7b7;border:1px solid rgba(52,211,153,.3)}
.pill.warn{background:rgba(251,191,36,.12);color:#fcd34d;border:1px solid rgba(251,191,36,.3)}
.pill.err{background:rgba(248,113,113,.12);color:#fca5a5;border:1px solid rgba(248,113,113,.3)}
.pill.info{background:rgba(34,211,238,.1);color:#67e8f9;border:1px solid rgba(34,211,238,.28)}
.pill.neutral{background:rgba(120,160,255,.1);color:#c4b5fd;border:1px solid var(--border)}

.chip{display:inline-flex;align-items:center;gap:8px;background:rgba(24,22,44,.7);border:1px solid var(--border);border-radius:999px;padding:6px 13px;font-size:12.5px;font-weight:600}
.chip.acct{font-family:var(--mono);font-size:12px}
.swatch{width:10px;height:10px;border-radius:3px;background:var(--brand);flex:0 0 auto}

/* ---------- Tablas ---------- */
.tablewrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius-sm);-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:560px}
th{
  text-align:left;padding:11px 13px;font-size:11px;font-weight:700;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--muted);
  background:rgba(13,12,26,.9);border-bottom:1px solid var(--border);
  position:sticky;top:0;
}
td{padding:11px 13px;border-bottom:1px solid rgba(120,160,255,.08);vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:rgba(120,160,255,.05)}
.rowactions{display:flex;gap:6px;flex-wrap:wrap}
.rowactions .btn{padding:6px 10px;font-size:12px}
.empty,.emptybox{padding:26px;text-align:center;color:var(--muted);font-size:14px;border:1px dashed var(--border);border-radius:var(--radius-sm)}

/* ---------- Filtros + paginación ---------- */
.filterbar{display:flex;gap:10px;flex-wrap:wrap;margin:4px 0 14px;align-items:center}
.filterbar input,.filterbar select{width:auto;min-width:150px;flex:1 1 150px;padding:9px 12px;font-size:13px}
.filterbar .btn{flex:0 0 auto}
.pager{display:flex;gap:8px;align-items:center;justify-content:flex-end;margin-top:14px;font-size:13px;color:var(--muted);flex-wrap:wrap}
.pager .btn{padding:6px 12px;font-size:12.5px}

/* ---------- Toasts ---------- */
.toasts{position:fixed;top:16px;right:16px;z-index:100;display:flex;flex-direction:column;gap:10px;max-width:min(92vw,380px)}
.toast{
  display:flex;gap:10px;align-items:flex-start;
  background:var(--panel-solid);border:1px solid var(--border);border-left:3px solid var(--brand);
  border-radius:var(--radius-sm);padding:12px 14px;font-size:13.5px;box-shadow:var(--shadow);
  animation:toastin .25s ease;
}
.toast.ok{border-left-color:var(--ok)}
.toast.err{border-left-color:var(--err)}
.toast.info{border-left-color:var(--brand-2)}
.toast .x{margin-left:auto;background:none;border:none;color:var(--muted);cursor:pointer;font-size:15px;padding:0 2px}
@keyframes toastin{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}

/* ---------- Modal ---------- */
.modal{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(5,4,12,.72);backdrop-filter:blur(4px);animation:fadein .15s ease}
.modalbox{background:var(--panel-solid);border:1px solid var(--border-strong);border-radius:var(--radius);padding:24px;max-width:430px;width:100%;box-shadow:var(--shadow)}
.modalbox h3{margin-bottom:8px}
.modalbox p{color:var(--muted);font-size:14px;margin:0 0 6px}
.modalactions{display:flex;gap:10px;justify-content:flex-end;margin-top:20px;flex-wrap:wrap}
.modalbox.wide{max-width:620px}
.modalbox textarea{width:100%}
.tagbar{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 12px}
.tagchip{font-family:var(--mono);font-size:11.5px;color:var(--brand-2);background:rgba(34,211,238,.08);border:1px solid rgba(34,211,238,.28);border-radius:999px;padding:4px 10px;cursor:pointer;transition:all .15s}
.tagchip:hover{background:rgba(34,211,238,.18);color:#fff;border-color:var(--brand-2)}
@keyframes fadein{from{opacity:0}to{opacity:1}}

/* ---------- Skeleton ---------- */
.skeleton{border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden}
.skeleton .sk{height:42px;background:linear-gradient(90deg,rgba(120,160,255,.05) 25%,rgba(120,160,255,.12) 50%,rgba(120,160,255,.05) 75%);background-size:600px 100%;animation:sk 1.2s infinite linear;border-bottom:1px solid rgba(120,160,255,.06)}
@keyframes sk{from{background-position:-600px 0}to{background-position:600px 0}}

/* ---------- Banner (mantenimiento / avisos) ---------- */
.banner{display:flex;gap:10px;align-items:flex-start;padding:13px 16px;border-radius:var(--radius-sm);font-size:13.5px;margin-bottom:18px;border:1px solid}
.banner.warn{background:rgba(251,191,36,.09);border-color:rgba(251,191,36,.32);color:#fde68a}
.banner.info{background:rgba(34,211,238,.07);border-color:rgba(34,211,238,.25);color:#a5f3fc}

/* =========================================================
   LOGIN
   ========================================================= */
.auth{max-width:430px;width:100%;padding:32px 30px}
.tabs{display:flex;background:rgba(10,9,22,.7);border:1px solid var(--border);border-radius:var(--radius-sm);padding:4px;margin:20px 0 6px}
.tabs button{flex:1;border:none;background:none;color:var(--muted);font-weight:600;font-size:13.5px;padding:9px;border-radius:8px;cursor:pointer;font-family:var(--sans);transition:.15s}
.tabs button.active{background:linear-gradient(92deg,var(--brand),var(--pink));color:#fff}
.otp{font-family:var(--mono);font-size:24px;letter-spacing:12px;text-align:center;padding:14px}
.hp-field{position:absolute;left:-5000px;top:-5000px;opacity:0;height:0;width:0;overflow:hidden}
.secretbox{font-family:var(--mono);font-size:15px;letter-spacing:2px;background:rgba(10,9,22,.8);border:1px dashed var(--border-strong);border-radius:var(--radius-sm);padding:14px;text-align:center;word-break:break-all;margin:10px 0}

/* =========================================================
   PANEL DEL CLIENTE
   ========================================================= */
.console{display:grid;grid-template-columns:1.45fr 1fr;gap:20px;align-items:start}
.rail{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:22px}
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.steps li{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;color:var(--muted)}
.steps .num{flex:0 0 26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12.5px;color:#fff;background:linear-gradient(135deg,var(--brand),var(--pink))}
.steps b{color:var(--text)}
.divider{height:1px;background:var(--border);margin:18px 0}
.tipbox{font-size:12.5px;color:var(--muted);background:rgba(34,211,238,.06);border:1px solid rgba(34,211,238,.2);border-radius:var(--radius-sm);padding:12px}

.platpick{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:10px;margin-top:4px}
.platcard{
  display:flex;flex-direction:column;align-items:center;gap:9px;padding:15px 8px;
  background:rgba(14,13,28,.7);border:1px solid var(--border);border-radius:12px;
  cursor:pointer;transition:all .15s;text-align:center;
}
.platcard:hover{border-color:var(--border-strong);transform:translateY(-2px)}
.platcard.sel{border-color:var(--brand);box-shadow:0 0 0 2px rgba(43,143,255,.35),var(--glow);background:rgba(43,143,255,.08)}
.platlogo{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:700;font-size:16px;color:#fff;overflow:hidden;background:linear-gradient(135deg,var(--brand),var(--pink))}
.platlogo img{width:100%;height:100%;object-fit:cover}
.platname{font-size:12.5px;font-weight:600}
.consult-actions{margin-top:6px}

/* resultado */
.result-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.result-tag{font-size:12.5px}
.pillmini{display:inline-block;background:rgba(24,22,44,.7);border:1px solid var(--border);border-radius:999px;padding:6px 14px;font-weight:600}

.scanner{position:relative;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:70px 20px;text-align:center;overflow:hidden}
.scanner .sweep{position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(43,143,255,.14),transparent);height:44%;animation:sweep 1.6s ease-in-out infinite}
@keyframes sweep{0%{transform:translateY(-110%)}100%{transform:translateY(260%)}}
.scanner .ring{width:64px;height:64px;margin:0 auto 18px;border-radius:50%;border:3px solid rgba(43,143,255,.2);border-top-color:var(--brand);animation:spin 1s linear infinite}
.scanner .label{font-family:var(--mono);font-size:14px;letter-spacing:3px;color:var(--brand-2)}
.scanner .sub{margin-top:8px;font-size:13px}

.code-card{position:relative;background:var(--panel);border:1px solid var(--border-strong);border-radius:var(--radius);padding:28px 24px;text-align:center;box-shadow:var(--glow)}
.meta-top{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.code-readout{
  font-family:var(--mono);font-weight:700;
  font-size:clamp(38px,9vw,58px);letter-spacing:.35em;padding-left:.35em;
  color:#fff;text-shadow:0 0 24px rgba(43,143,255,.65);
  margin:6px 0 4px;word-break:break-all;
}
.code-readout .ch{display:inline-block;min-width:.72em}
.fresh{font-size:13px;color:var(--muted);margin-bottom:16px}
.fresh .new{display:inline-block;margin-left:8px;background:rgba(52,211,153,.15);color:#6ee7b7;border:1px solid rgba(52,211,153,.35);font-size:10.5px;font-weight:800;letter-spacing:1px;border-radius:999px;padding:2px 9px;vertical-align:1px}
.code-buttons{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.cachedbar{display:flex;gap:8px;align-items:center;justify-content:center;font-size:12.5px;color:#67e8f9;background:rgba(34,211,238,.08);border:1px solid rgba(34,211,238,.25);border-radius:999px;padding:6px 14px;margin:0 auto 14px;width:fit-content}

.mailwrap{margin-top:22px}
.mailhead{font-size:12px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.maildoc{background:#fff;border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--border)}
.mdmeta{background:#f4f4f8;color:#222;padding:13px 16px;border-bottom:1px solid #e3e3ec}
.mdmeta .subj{font-weight:700;font-size:14.5px}
.mdmeta .addr{font-size:12.5px;color:#666;margin-top:3px;word-break:break-all}
.maildoc iframe{width:100%;border:none;display:block;background:#fff}
.mdtext{padding:18px;color:#222;font-size:14px;white-space:pre-wrap;word-break:break-word}

.noresult{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:46px 24px;text-align:center}
.noresult .ic{font-size:40px;margin-bottom:12px}
.noresult p{color:var(--muted);max-width:460px;margin:0 auto 20px}

/* =========================================================
   DASHBOARD (admin)
   ========================================================= */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:20px}
.stat{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:18px}
.stat .big{font-family:var(--display);font-size:30px;font-weight:700;line-height:1.1}
.stat .lbl{font-size:12px;color:var(--muted);margin-top:5px;letter-spacing:.3px}
.stat.accent .big{background:linear-gradient(92deg,var(--brand),var(--brand-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.bars{display:flex;flex-direction:column;gap:11px;margin-top:6px}
.barrow{display:grid;grid-template-columns:110px 1fr 44px;gap:10px;align-items:center;font-size:13px}
.barrow .bl{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bartrack{height:9px;border-radius:999px;background:rgba(120,160,255,.1);overflow:hidden}
.barfill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--brand),var(--brand-2));transition:width .5s ease}
.barrow .bv{text-align:right;font-family:var(--mono);font-size:12px;color:var(--muted)}
.dashgrid{display:grid;grid-template-columns:1.3fr 1fr;gap:18px;align-items:start}

/* =========================================================
   Dashboard v4 (estilo tablero)
   ========================================================= */
.dashhead{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:20px;flex-wrap:wrap}
.dashtitle{font-family:var(--display);font-size:28px;font-weight:700;margin:2px 0 0;letter-spacing:.2px}

/* KPIs */
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.kpi{
  position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);
  padding:20px;overflow:hidden;box-shadow:var(--shadow);min-height:104px;
}
.kpi::after{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--brand),var(--brand-2))}
.kpi-body{min-width:0}
.kpi-lbl{font-size:11px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted)}
.kpi-val{font-family:var(--display);font-size:30px;font-weight:700;line-height:1.15;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi-sub{font-size:12px;color:var(--muted);margin-top:4px}
.kpi-ico{
  flex:0 0 auto;width:54px;height:54px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  font-size:24px;background:linear-gradient(135deg,rgba(43,143,255,.28),rgba(34,211,238,.18));
  border:1px solid var(--border);box-shadow:0 6px 18px rgba(43,143,255,.25)
}
.kpi-violet::after{background:linear-gradient(180deg,#2b8fff,#1d6feb)}
.kpi-violet .kpi-ico{background:linear-gradient(135deg,rgba(43,143,255,.35),rgba(29,111,235,.2))}
.kpi-blue::after{background:linear-gradient(180deg,#60a5fa,#2563eb)}
.kpi-blue .kpi-ico{background:linear-gradient(135deg,rgba(96,165,250,.32),rgba(37,99,235,.2))}
.kpi-cyan::after{background:linear-gradient(180deg,#22d3ee,#0891b2)}
.kpi-cyan .kpi-ico{background:linear-gradient(135deg,rgba(34,211,238,.32),rgba(8,145,178,.2))}
.kpi-green::after{background:linear-gradient(180deg,#34d399,#059669)}
.kpi-green .kpi-ico{background:linear-gradient(135deg,rgba(52,211,153,.32),rgba(5,150,105,.2))}
@keyframes kpifade{0%,100%{opacity:.55}50%{opacity:.9}}
.kpi.skeleton{animation:kpifade 1.2s ease-in-out infinite}
.kpi.skeleton .kpi-lbl,.kpi.skeleton .kpi-val{background:rgba(120,160,255,.14);border-radius:6px;color:transparent;min-width:80px}

/* Layout gráfica + dona */
.dash-2col{display:grid;grid-template-columns:1.5fr 1fr;gap:18px;align-items:stretch;margin-top:18px}
.chartcard .chip{font-family:var(--mono);font-size:11px;color:var(--brand-2);background:rgba(34,211,238,.1);border:1px solid rgba(34,211,238,.28);padding:4px 10px;border-radius:999px}
.chartbox{margin-top:8px}

/* Gráfica de área SVG */
.areachart{width:100%;height:auto;display:block}
.areachart .cline{stroke:var(--brand);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.areachart .cgrid{stroke:rgba(120,160,255,.12);stroke-width:1}
.areachart .cyl{fill:var(--muted);font-size:10px;font-family:var(--mono);text-anchor:end}
.areachart .cxl{fill:var(--muted);font-size:10px;font-family:var(--mono)}
.areachart .cdot{fill:var(--brand-2);stroke:var(--bg);stroke-width:1.5}

/* Dona SVG */
.donutbox{display:flex;justify-content:center;padding:6px 0 4px}
.donut{width:180px;height:180px}
.donut .dseg{transition:stroke-width .2s}
.donut .dcount{fill:var(--text);font-family:var(--display);font-size:30px;font-weight:700}
.donut .dlabel{fill:var(--muted);font-size:11px;letter-spacing:1px;text-transform:uppercase}
.legend{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.legrow{display:flex;align-items:center;gap:10px;font-size:13px}
.legdot{width:11px;height:11px;border-radius:3px;flex:0 0 auto}
.legname{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.legval{font-family:var(--mono);font-size:12.5px;font-weight:600}

/* Precios */
.priceinput{display:inline-flex;align-items:center;gap:0;max-width:200px}
.priceinput .cur{background:rgba(10,9,22,.9);border:1px solid var(--border);border-right:none;border-radius:var(--radius-sm) 0 0 var(--radius-sm);padding:11px 12px;color:var(--muted);font-family:var(--mono);font-size:13px}
.priceinput input{border-radius:0 var(--radius-sm) var(--radius-sm) 0;max-width:130px}

/* Carga masiva */
.codehint{background:rgba(10,9,22,.85);border:1px dashed var(--border-strong);border-radius:var(--radius-sm);padding:10px 14px;font-size:13px;color:var(--brand-2);margin:6px 0 10px;overflow-x:auto;white-space:nowrap}
.fmt-list{margin:6px 0 10px;padding-left:18px;color:var(--muted);font-size:13px;line-height:1.7}
.fmt-list b{color:var(--text)}
.bulk-summary{display:flex;gap:8px;flex-wrap:wrap}

/* =========================================================
   Responsive
   ========================================================= */
@media(max-width:960px){
  .console,.dashgrid{grid-template-columns:1fr}
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
  .dash-2col{grid-template-columns:1fr}
}
@media(max-width:720px){
  .wrap{padding:18px 13px 70px}
  .topbar{padding:10px 14px}
  .card{padding:18px 15px}
  .who span:not(.live){display:none}
  .who #whoami{display:inline}
  .stats{grid-template-columns:repeat(2,1fr)}
  .kpi-grid{grid-template-columns:1fr}
  .kpi-val{font-size:26px}
  .barrow{grid-template-columns:84px 1fr 40px}
  .code-buttons .btn{flex:1 1 45%}
  .filterbar input,.filterbar select{min-width:120px}
  .dashtitle{font-size:23px}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
}