/* ============================================================
   TOKENS — paleta clara por defecto, oscura por media query,
   y override explícito por data-theme en ambas direcciones.
   ============================================================ */
:root{
  --bg:#F1F5F6;
  --surface:#FFFFFF;
  --surface-2:#E8EFF0;
  --line:#D2DEE0;
  --line-strong:#B4C4C7;
  --text:#0C1113;
  --muted:#5C6E73;
  --accent:#0A8B98;
  --accent-2:#066570;
  --accent-soft:#DEF6F8;
  --on-accent:#FFFFFF;
  --good:#0E7F52;      --good-soft:#DCF3E8;
  --warn:#9A6206;      --warn-soft:#FBEED5;
  --crit:#B3261E;      --crit-soft:#FBE0DE;
  --shadow:0 1px 2px rgba(12,17,19,.06), 0 8px 24px -16px rgba(12,17,19,.28);

  --font-display:"Bahnschrift","DIN Alternate","Avenir Next Condensed","Segoe UI",system-ui,sans-serif;
  --font-body:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --font-num:"Cascadia Mono","Consolas","SF Mono","Roboto Mono",ui-monospace,monospace;
  --font-script:"Segoe Script","Brush Script MT","Snell Roundhand","Bradley Hand",cursive;

  --r:6px;
  --rail-w:236px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#090C0E;
    --surface:#121719;
    --surface-2:#1A2126;
    --line:#232C31;
    --line-strong:#35424A;
    --text:#E9F1F2;
    --muted:#8DA1A7;
    --accent:#22D9E8;
    --accent-2:#7FEAF3;
    --accent-soft:#0C2B30;
    --on-accent:#04191C;
    --good:#41D093;      --good-soft:#0D2A21;
    --warn:#F2AE45;      --warn-soft:#2E2312;
    --crit:#FF6B6B;      --crit-soft:#31191A;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 30px -18px rgba(0,0,0,.9);
  }
}
:root[data-theme="dark"]{
  --bg:#090C0E; --surface:#121719; --surface-2:#1A2126; --line:#232C31;
  --line-strong:#35424A; --text:#E9F1F2; --muted:#8DA1A7;
  --accent:#22D9E8; --accent-2:#7FEAF3; --accent-soft:#0C2B30; --on-accent:#04191C;
  --good:#41D093; --good-soft:#0D2A21; --warn:#F2AE45; --warn-soft:#2E2312;
  --crit:#FF6B6B; --crit-soft:#31191A;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 30px -18px rgba(0,0,0,.9);
}
:root[data-theme="light"]{
  --bg:#F1F5F6; --surface:#FFFFFF; --surface-2:#E8EFF0; --line:#D2DEE0;
  --line-strong:#B4C4C7; --text:#0C1113; --muted:#5C6E73;
  --accent:#0A8B98; --accent-2:#066570; --accent-soft:#DEF6F8; --on-accent:#FFFFFF;
  --good:#0E7F52; --good-soft:#DCF3E8; --warn:#9A6206; --warn-soft:#FBEED5;
  --crit:#B3261E; --crit-soft:#FBE0DE;
  --shadow:0 1px 2px rgba(12,17,19,.06), 0 8px 24px -16px rgba(12,17,19,.28);
}

*,*::before,*::after{box-sizing:border-box;}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:3px;}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important;}
}

/* ============================================================ SHELL */
.app{display:grid; grid-template-columns:var(--rail-w) 1fr; min-height:100vh;}

.rail{
  background:var(--surface); border-right:1px solid var(--line);
  display:flex; flex-direction:column; gap:20px; padding:20px 14px;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.brand{display:flex; flex-direction:column; padding:2px 6px 14px; border-bottom:1px solid var(--line);}
.logo{display:block; width:176px; height:auto; user-select:none;}
.brand-sub{
  font-family:var(--font-display); font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted); margin-top:12px;
}

.nav{display:flex; flex-direction:column; gap:2px;}
.nav-btn{
  appearance:none; background:none; border:0; border-left:2px solid transparent;
  color:var(--muted); font-family:var(--font-display); font-size:14.5px;
  letter-spacing:.04em; text-align:left; padding:9px 12px; cursor:pointer;
  border-radius:0 var(--r) var(--r) 0; display:flex; align-items:center; gap:10px;
  transition:background .12s, color .12s;
}
.nav-btn:hover{background:var(--surface-2); color:var(--text);}
.nav-btn[aria-current="page"]{
  background:var(--accent-soft); color:var(--accent); border-left-color:var(--accent); font-weight:600;
}
.nav-glyph{width:18px; text-align:center; font-size:15px; opacity:.9;}
.nav-badge{
  margin-left:auto; font-family:var(--font-num); font-size:11px;
  background:var(--crit); color:#fff; border-radius:20px; padding:1px 7px; font-weight:700;
}
.rail-foot{margin-top:auto; display:flex; flex-direction:column; gap:10px; padding-top:14px; border-top:1px solid var(--line);}

.main{min-width:0; display:flex; flex-direction:column;}
.topbar{
  position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--line);
  padding:16px 26px; display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
.topbar h1{
  font-family:var(--font-display); font-size:21px; font-weight:600;
  letter-spacing:.02em; margin:0; text-wrap:balance;
}
.topbar-note{color:var(--muted); font-size:13px; margin:2px 0 0;}
.topbar-actions{margin-left:auto; display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
.content{padding:22px 26px 80px; display:flex; flex-direction:column; gap:20px;}
.view[hidden]{display:none;}
.view{display:flex; flex-direction:column; gap:20px;}

/* ============================================================ CARDS */
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); overflow:hidden;
}
.card-head{
  padding:14px 16px; border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.card-head h2{
  font-family:var(--font-display); font-size:14px; letter-spacing:.12em;
  text-transform:uppercase; margin:0; font-weight:600; color:var(--text);
}
.card-head .sub{font-size:12.5px; color:var(--muted);}
.card-head .spacer{margin-left:auto;}
.card-body{padding:16px;}
.card-body.tight{padding:0;}

.grid{display:grid; gap:16px;}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));}
.grid-kpi{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));}
.grid-kpi-3{grid-template-columns:repeat(3,minmax(0,1fr));}
@media (max-width:1100px){ .grid-kpi-3{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:560px){
  .grid-kpi-3{grid-template-columns:1fr;}
  .seg button{padding:8px 10px; font-size:12px; letter-spacing:.04em;}
}
.kpi.is-crit::before{background:var(--crit);}
.subfields{
  display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  padding:12px; background:var(--surface-2); border:1px dashed var(--line-strong); border-radius:var(--r);
}
.seg{max-width:100%; overflow-x:auto;}
.dlg-foot{flex-wrap:wrap;}
#dEcTexto{font-family:var(--font-num); font-size:12px; min-height:200px; resize:vertical;}

/* ============================================================ KPI */
.kpi{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:14px 16px; display:flex; flex-direction:column; gap:4px; position:relative;
}
.kpi::before{content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--line-strong);}
.kpi.is-accent::before{background:var(--accent);}
.kpi.is-good::before{background:var(--good);}
.kpi.is-warn::before{background:var(--warn);}
.kpi-label{
  font-family:var(--font-display); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted);
}
.kpi-value{
  font-family:var(--font-num); font-size:23px; font-weight:600;
  font-variant-numeric:tabular-nums; letter-spacing:-.02em;
}
.kpi-foot{font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums;}

/* ============================================================ TABLAS */
.table-wrap{overflow-x:auto;}
table{border-collapse:collapse; width:100%; font-size:13.5px;}
thead th{
  font-family:var(--font-display); font-size:10.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--muted); font-weight:600;
  text-align:left; padding:10px 12px; border-bottom:1px solid var(--line);
  white-space:nowrap; background:var(--surface); position:sticky; top:0;
}
tbody td{padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:middle;}
tbody tr:last-child td{border-bottom:0;}
tbody tr:hover{background:var(--surface-2);}
.num{font-family:var(--font-num); font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap;}
.col-name{min-width:180px;}
.strong{font-weight:600;}
.dim{color:var(--muted);}
.tiny{font-size:11.5px;}
.row-stripe{border-left:3px solid transparent;}
.row-stripe.crit{border-left-color:var(--crit);}
.row-stripe.warn{border-left-color:var(--warn);}
.row-stripe.good{border-left-color:var(--good);}

/* ============================================================ CHIPS */
.chip{
  display:inline-flex; align-items:center; gap:5px; border-radius:20px;
  padding:2px 9px; font-family:var(--font-display); font-size:11px;
  letter-spacing:.07em; text-transform:uppercase; font-weight:600;
  border:1px solid transparent; white-space:nowrap;
}
.chip.neutral{background:var(--surface-2); color:var(--muted); border-color:var(--line);}
.chip.accent{background:var(--accent-soft); color:var(--accent); border-color:color-mix(in srgb,var(--accent) 30%, transparent);}
.chip.good{background:var(--good-soft); color:var(--good); border-color:color-mix(in srgb,var(--good) 30%, transparent);}
.chip.warn{background:var(--warn-soft); color:var(--warn); border-color:color-mix(in srgb,var(--warn) 35%, transparent);}
.chip.crit{background:var(--crit-soft); color:var(--crit); border-color:color-mix(in srgb,var(--crit) 35%, transparent);}

/* ============================================================ BOTONES */
.btn{
  appearance:none; font-family:var(--font-display); font-size:13.5px; letter-spacing:.03em;
  padding:8px 14px; border-radius:var(--r); border:1px solid var(--line-strong);
  background:var(--surface); color:var(--text); cursor:pointer; font-weight:600;
  display:inline-flex; align-items:center; gap:7px; transition:background .12s, border-color .12s, transform .06s;
}
.btn:hover{background:var(--surface-2); border-color:var(--muted);}
.btn:active{transform:translateY(1px);}
.btn[disabled]{opacity:.45; cursor:not-allowed;}
.btn-primary{background:var(--accent); border-color:var(--accent); color:var(--on-accent);}
.btn-primary:hover{background:var(--accent-2); border-color:var(--accent-2);}
.btn-danger{color:var(--crit); border-color:color-mix(in srgb,var(--crit) 40%, var(--line));}
.btn-danger:hover{background:var(--crit-soft);}
.btn-sm{padding:4px 9px; font-size:12px;}
.btn-ghost{border-color:transparent; background:transparent; color:var(--muted);}
.btn-ghost:hover{background:var(--surface-2); color:var(--text);}
.btn-block{width:100%; justify-content:center;}

/* ============================================================ FORMS */
.field{display:flex; flex-direction:column; gap:5px;}
.field > label{
  font-family:var(--font-display); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); font-weight:600;
}
input[type="text"], input[type="number"], input[type="date"], input[type="month"], select, textarea{
  font-family:var(--font-body); font-size:14px; color:var(--text);
  background:var(--bg); border:1px solid var(--line-strong); border-radius:var(--r);
  padding:8px 10px; width:100%; min-width:0;
}
input[type="number"]{font-family:var(--font-num); font-variant-numeric:tabular-nums;}
input:hover, select:hover{border-color:var(--muted);}
input:focus, select:focus, textarea:focus{outline:2px solid var(--accent); outline-offset:0; border-color:var(--accent);}
select{cursor:pointer;}
.form-grid{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));}
.form-row{display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end;}
.checkline{display:flex; align-items:center; gap:9px; font-size:14px; cursor:pointer; user-select:none;}
.checkline input{width:17px; height:17px; accent-color:var(--accent); cursor:pointer;}
.hint{font-size:12px; color:var(--muted); line-height:1.45;}

.seg{display:inline-flex; border:1px solid var(--line-strong); border-radius:var(--r); overflow:hidden; background:var(--bg);}
.seg button{
  appearance:none; background:none; border:0; cursor:pointer; padding:8px 18px;
  font-family:var(--font-display); font-size:13px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); font-weight:600;
}
.seg button + button{border-left:1px solid var(--line-strong);}
.seg button[aria-pressed="true"]{background:var(--accent); color:var(--on-accent);}

/* ============================================================ VENTA */
.sale-layout{display:grid; gap:16px; grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);}
@media (max-width:940px){ .sale-layout{grid-template-columns:1fr;} }

.ticket{
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r);
  padding:14px 16px; display:flex; flex-direction:column; gap:2px;
}
.ticket-title{
  font-family:var(--font-display); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); margin-bottom:8px;
}
.tline{display:flex; justify-content:space-between; gap:14px; padding:5px 0; font-size:13.5px;}
.tline span:last-child{font-family:var(--font-num); font-variant-numeric:tabular-nums; white-space:nowrap;}
.tline.rule{border-top:1px solid var(--line-strong); margin-top:6px; padding-top:9px;}
.tline.total{font-size:16px; font-weight:700;}
.tline.total span:last-child{color:var(--accent); font-size:19px;}
.tline.minus span:last-child{color:var(--warn);}
.tline.dimline{color:var(--muted); font-size:12.5px;}
.fefo-list{display:flex; flex-direction:column; gap:4px; margin-top:4px;}
.fefo-item{
  display:flex; justify-content:space-between; gap:10px; font-size:12.5px;
  background:var(--surface); border:1px solid var(--line); border-radius:4px; padding:5px 8px;
}
.fefo-item .num{font-size:12.5px;}

.alertbox{
  border-radius:var(--r); padding:10px 12px; font-size:13px; display:flex; gap:9px; align-items:flex-start;
  border:1px solid transparent; line-height:1.45;
}
.alertbox.crit{background:var(--crit-soft); color:var(--crit); border-color:color-mix(in srgb,var(--crit) 35%, transparent);}
.alertbox.warn{background:var(--warn-soft); color:var(--warn); border-color:color-mix(in srgb,var(--warn) 35%, transparent);}
.alertbox.accent{background:var(--accent-soft); color:var(--accent); border-color:color-mix(in srgb,var(--accent) 30%, transparent);}

/* ============================================================ MISC */
.empty{
  padding:40px 20px; text-align:center; color:var(--muted); display:flex;
  flex-direction:column; align-items:center; gap:10px;
}
.empty-title{font-family:var(--font-display); font-size:15px; letter-spacing:.04em; color:var(--text);}
.bars{display:flex; flex-direction:column; gap:9px;}
.bar-row{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 12px; align-items:center;}
.bar-name{font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.bar-val{font-family:var(--font-num); font-size:13px; font-variant-numeric:tabular-nums;}
.bar-track{grid-column:1 / -1; height:5px; background:var(--surface-2); border-radius:3px; overflow:hidden;}
.bar-fill{height:100%; background:var(--accent); border-radius:3px;}

#toasts{position:fixed; bottom:18px; right:18px; z-index:200; display:flex; flex-direction:column; gap:8px;}
.toast{
  background:var(--surface); border:1px solid var(--line-strong); border-left:3px solid var(--accent);
  border-radius:var(--r); padding:10px 14px; font-size:13.5px; box-shadow:var(--shadow);
  max-width:340px; animation:slidein .18s ease-out;
}
.toast.crit{border-left-color:var(--crit);}
.toast.good{border-left-color:var(--good);}
@keyframes slidein{from{opacity:0; transform:translateX(14px);} to{opacity:1; transform:none;}}

dialog{
  border:1px solid var(--line-strong); border-radius:var(--r); background:var(--surface);
  color:var(--text); padding:0; max-width:min(620px,94vw); width:100%; box-shadow:var(--shadow);
}
dialog::backdrop{background:rgba(4,10,12,.62); backdrop-filter:blur(2px);}
.dlg-head{padding:15px 18px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:12px;}
.dlg-head h3{margin:0; font-family:var(--font-display); font-size:15px; letter-spacing:.06em; text-transform:uppercase;}
.dlg-body{padding:18px; display:flex; flex-direction:column; gap:14px; max-height:70vh; overflow-y:auto;}
.dlg-foot{padding:14px 18px; border-top:1px solid var(--line); display:flex; gap:9px; justify-content:flex-end; background:var(--surface-2);}

.storage-warn{
  font-size:11.5px; line-height:1.4; color:var(--warn); background:var(--warn-soft);
  border:1px solid color-mix(in srgb,var(--warn) 35%, transparent); border-radius:4px; padding:7px 9px;
}
.storage-ok{font-size:11.5px; color:var(--muted); display:flex; align-items:center; gap:6px;}
.dot{width:6px; height:6px; border-radius:50%; background:var(--good); flex:none;}

/* ============================================================ RESPONSIVE */
@media (max-width:820px){
  .app{grid-template-columns:1fr;}
  .rail{
    position:static; height:auto; flex-direction:row; align-items:center; gap:14px;
    border-right:0; border-bottom:1px solid var(--line); padding:12px 14px; overflow-x:auto;
  }
  .brand{border-bottom:0; padding:0; flex:none;}
  .logo{width:104px;}
  .brand-sub{display:none;}
  .nav{flex-direction:row; gap:4px;}
  .nav-btn{border-left:0; border-bottom:2px solid transparent; border-radius:var(--r); padding:7px 10px; white-space:nowrap;}
  .nav-btn[aria-current="page"]{border-left-color:transparent; border-bottom-color:var(--accent);}
  .nav-glyph{display:none;}
  .rail-foot{margin-top:0; margin-left:auto; border-top:0; padding-top:0; flex:none;}
  .rail-foot .storage-warn, .rail-foot .storage-ok{display:none;}
  .topbar{padding:14px 16px;} .content{padding:16px 16px 70px;}
}

/* ============================================================
   VERSIÓN NUBE — acceso, sesión y estado de conexión
   ============================================================ */
[hidden]{display:none !important;}
input[type="email"], input[type="password"]{
  font-family:var(--font-body); font-size:14px; color:var(--text);
  background:var(--bg); border:1px solid var(--line-strong); border-radius:var(--r);
  padding:8px 10px; width:100%; min-width:0;
}
input[type="email"]:focus, input[type="password"]:focus{outline:2px solid var(--accent); outline-offset:0; border-color:var(--accent);}

.acceso{min-height:100vh; display:grid; place-items:center; padding:24px 16px; background:var(--bg);}
.acceso-card{
  width:min(400px, 100%); background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--shadow); padding:28px 24px;
  display:flex; flex-direction:column; gap:18px;
}
.acceso-logo{width:190px; height:auto; align-self:center;}
.acceso .brand-sub{text-align:center; margin-top:-10px;}
.acceso-form{display:flex; flex-direction:column; gap:14px;}
.acceso-estado{display:flex; flex-direction:column; gap:12px; align-items:center; text-align:center; color:var(--muted); font-size:14px;}
.spinner{
  width:22px; height:22px; border:2px solid var(--line-strong); border-top-color:var(--accent);
  border-radius:50%; animation:gira .8s linear infinite;
}
@keyframes gira{to{transform:rotate(360deg);}}

.rail-user{display:flex; flex-direction:column; gap:1px; font-size:13.5px; padding:0 6px;}
.dot-warn{background:var(--warn);}
body.ocupado, body.ocupado *{cursor:progress !important;}
@media (max-width:820px){ .rail-user{display:none;} }