/* ============ TOKENS (misma identidad visual que el demo HTML) ============ */
:root{
  --font-display:'Fraunces',serif;
  --font-body:'Inter',sans-serif;
  --font-mono:'JetBrains Mono',monospace;
  --radius-s:8px; --radius-m:14px; --radius-l:22px;
  --ease:cubic-bezier(.16,1,.3,1);
}
html[data-theme="dark"]{
  --bg:#14161C; --bg-elev:#1C1F27; --bg-elev-2:#242833; --bg-elev-3:#2B303C;
  --border:#2E3340; --border-soft:#252a35;
  --text:#F2EFE9; --text-dim:#9AA0AE; --text-faint:#5C6272;
  --accent:#C8203D; --accent-hover:#E32A49; --accent-text:#FFF0EE;
  --gold:#D4A24C; --gold-soft:#3A331F;
  --teal:#2C9C86; --teal-soft:#122E29;
  --danger:#E5484D; --danger-soft:#3A1E20;
  --shadow:0 20px 50px -12px rgba(0,0,0,.55);
  --paper:#EDE7D8; --paper-text:#20211d;
}
html[data-theme="light"]{
  --bg:#F7F4EE; --bg-elev:#FFFFFF; --bg-elev-2:#EFEBE2; --bg-elev-3:#E7E1D2;
  --border:#E1DACB; --border-soft:#ece6d8;
  --text:#1B1D22; --text-dim:#6B6459; --text-faint:#A69E8D;
  --accent:#B01836; --accent-hover:#98122B; --accent-text:#FFFFFF;
  --gold:#9C6E22; --gold-soft:#F1E4C7;
  --teal:#1F7A68; --teal-soft:#DEEFEA;
  --danger:#C0392B; --danger-soft:#FBE6E2;
  --shadow:0 20px 50px -12px rgba(60,50,30,.18);
  --paper:#FFFDF8; --paper-text:#20211d;
}
*{box-sizing:border-box;}
body{font-family:var(--font-body); background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased;}
a{color:inherit; text-decoration:none;}
::-webkit-scrollbar{width:10px; height:10px;}
::-webkit-scrollbar-thumb{background:var(--border); border-radius:10px;}

.stripe-bar{height:6px; width:100%; background:repeating-linear-gradient(-45deg,var(--accent) 0 14px,var(--text) 14px 28px,var(--gold) 28px 42px); background-size:200% 100%; animation:stripe-move 6s linear infinite;}
@keyframes stripe-move{ to{ background-position:-120px 0; } }

.btn-app{display:inline-flex; align-items:center; gap:8px; justify-content:center; padding:10px 20px; border-radius:999px; border:1px solid transparent; font-weight:600; font-size:14px; transition:all .18s var(--ease);}
.btn-app-primary{background:var(--accent); color:var(--accent-text);}
.btn-app-primary:hover{background:var(--accent-hover); color:var(--accent-text); transform:translateY(-1px);}
.btn-app-ghost{background:transparent; color:var(--text); border-color:var(--border);}
.btn-app-ghost:hover{background:var(--bg-elev-2); color:var(--text);}
.btn-app-gold{background:var(--gold); color:#1B1D22;}
.btn-app-danger{background:var(--danger-soft); color:var(--danger); border:1px solid transparent;}
.btn-app-danger:hover{background:var(--danger); color:#fff;}
.btn-app-sm{padding:7px 14px; font-size:12.5px; border-radius:8px;}

.pill{display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:999px; font-size:12px; font-weight:600;}
.pill-teal{background:var(--teal-soft); color:var(--teal);}
.pill-gold{background:var(--gold-soft); color:var(--gold);}
.pill-danger{background:var(--danger-soft); color:var(--danger);}
.pill-dim{background:var(--bg-elev-2); color:var(--text-dim);}

.card-app{background:var(--bg-elev); border:1px solid var(--border); border-radius:var(--radius-m);}
.eyebrow{font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint);}

.form-control, .form-select{background:var(--bg-elev-2); border:1px solid var(--border); color:var(--text); border-radius:10px; padding:11px 14px;}
.form-control:focus, .form-select:focus{background:var(--bg-elev-2); color:var(--text); border-color:var(--accent); box-shadow:0 0 0 3px rgba(200,32,61,.18);}
label.form-label{font-size:12.5px; font-weight:600; color:var(--text-dim); margin-bottom:6px;}
.text-danger{color:var(--danger) !important; font-size:12.5px;}

/* ---- Login ---- */
.login-shell{min-height:100vh; display:grid; grid-template-columns:1fr 1fr;}
@media (max-width:900px){ .login-shell{grid-template-columns:1fr;} .login-visual{display:none;} }
.login-visual{position:relative; overflow:hidden; background:linear-gradient(180deg,var(--bg-elev) 0%, var(--bg) 100%); display:flex; flex-direction:column; justify-content:space-between; padding:56px; border-right:1px solid var(--border);}
.pole{position:absolute; top:-10%; right:8%; width:120px; height:130%; border-radius:60px; overflow:hidden; background:repeating-linear-gradient(115deg,var(--accent) 0 26px, var(--paper) 26px 52px, #2C6E8F 52px 78px, var(--paper) 78px 104px); background-size:150% 150%; animation:pole-spin 5s linear infinite; box-shadow:var(--shadow);}
@keyframes pole-spin{ to{ background-position:0 -300px; } }
.login-form-wrap{display:flex; align-items:center; justify-content:center; padding:40px 24px;}
.login-form{width:100%; max-width:400px;}
.theme-toggle{width:42px; height:42px; border-radius:50%; border:1px solid var(--border); background:var(--bg-elev-2); display:flex; align-items:center; justify-content:center; font-size:17px; color:var(--text);}

/* ---- App shell ---- */
#app-shell{display:grid; grid-template-columns:250px 1fr; min-height:100vh;}
@media (max-width:860px){ #app-shell{grid-template-columns:1fr;} }
.sidebar{background:var(--bg-elev); border-right:1px solid var(--border); display:flex; flex-direction:column; padding:22px 16px; gap:4px; position:sticky; top:0; height:100vh; overflow-y:auto;}
@media (max-width:860px){ .sidebar{display:none;} }
.nav-item{display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:10px; font-size:14px; font-weight:500; color:var(--text-dim);}
.nav-item:hover{background:var(--bg-elev-2); color:var(--text);}
.nav-item.active{background:var(--accent); color:var(--accent-text); font-weight:600;}
.topbar{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 28px; border-bottom:1px solid var(--border); position:sticky; top:0; background:var(--bg); z-index:40;}
.topbar h1{font-family:var(--font-display); font-size:22px; font-weight:600;}
.view{padding:26px 28px 60px;}

.bottom-nav{display:none; position:fixed; left:0; right:0; bottom:0; z-index:70; background:var(--bg-elev); border-top:1px solid var(--border); padding:6px 4px calc(6px + env(safe-area-inset-bottom));}
@media (max-width:860px){ .bottom-nav{display:flex;} .main-col{padding-bottom:calc(72px + env(safe-area-inset-bottom));} .view{padding:14px 14px 0;} }
.bn-item{flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:7px 2px; border-radius:12px; color:var(--text-dim); font-size:10.5px; font-weight:600; background:none; border:none;}
.bn-item .bn-ic{font-size:19px;}
.bn-item.active{color:var(--accent);}

/* ---- KPIs / tablas / tickets ---- */
.kpi-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:26px;}
@media (max-width:860px){ .kpi-grid{grid-template-columns:repeat(2,1fr);} }
.kpi{padding:18px 20px;}
.kpi .val{font-family:var(--font-display); font-size:30px; font-weight:600;}
table.table-app{width:100%; border-collapse:collapse; font-size:13.5px;}
table.table-app thead th{text-align:left; padding:11px 14px; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-faint); border-bottom:1px solid var(--border);}
table.table-app tbody td{padding:13px 14px; border-bottom:1px solid var(--border-soft); vertical-align:middle;}
table.table-app tbody tr:hover{background:var(--bg-elev-2);}

.ticket{background:var(--paper); color:var(--paper-text); width:300px; margin:0 auto; padding:22px 20px 14px; font-family:var(--font-mono); font-size:12px; line-height:1.55; box-shadow:var(--shadow);}
.ticket .center{text-align:center;}
.ticket .biz{font-weight:700; font-size:14px; text-transform:uppercase;}
.ticket hr{border:none; border-top:1px dashed #8a8574; margin:10px 0;}
.ticket .row-t{display:flex; justify-content:space-between; gap:10px;}
.ticket .tot{font-weight:700; font-size:14px;}
@media print{ body *{visibility:hidden;} #print-area, #print-area *{visibility:visible;} #print-area{position:absolute; top:0; left:0; width:80mm;} }