:root{
  --ink:#0A0A0A;
  --paper:#F6F3EC;
  --panel:#FFFFFF;
  --deep:#0E3B36;
  --deep-2:#144E47;
  --action:#1F8A70;
  --action-soft:#E4F1EC;
  --rust:#C75B39;
  --rust-soft:#F7E7E0;
  --amber:#B9862F;
  --amber-soft:#F5EBD8;
  --line:#DCD6C7;
  --muted:#6B6558;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  font-family:'Archivo',sans-serif;
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
.expanded{font-family:'Archivo Expanded',sans-serif;}
button{font-family:inherit; cursor:pointer; border:none;}
input{font-family:inherit;}

/* ===================== LOGIN / SELECTOR DE ROL ===================== */
#screen-login{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.login-wrap{
  width:100%;
  max-width:960px;
  display:grid;
  grid-template-columns:1fr 1.1fr;
  background:var(--panel);
  border:1px solid var(--line);
}
.login-side{
  background:var(--deep);
  color:var(--paper);
  padding:48px 40px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.login-side .mark{
  font-family:'Archivo Expanded',sans-serif;
  font-weight:800;
  font-size:15px;
  letter-spacing:0.02em;
}
.login-side .mark span{color:var(--rust);}
.login-side h1{
  font-family:'Archivo Expanded',sans-serif;
  font-weight:800;
  font-size:34px;
  line-height:1.15;
  margin-top:40px;
  max-width:320px;
}
.login-side p{
  font-size:14px;
  line-height:1.6;
  color:#C9D8D4;
  margin-top:16px;
  max-width:300px;
}
.login-side .stat-row{
  display:flex;
  gap:28px;
  margin-top:auto;
  padding-top:32px;
  border-top:1px solid rgba(255,255,255,0.15);
}
.login-side .stat-row div b{
  display:block;
  font-family:'Archivo Expanded',sans-serif;
  font-size:22px;
  font-weight:700;
}
.login-side .stat-row div span{
  font-size:11px;
  color:#9FB5AF;
  text-transform:uppercase;
  letter-spacing:0.04em;
}
.login-main{
  padding:48px 40px;
  display:flex;
  flex-direction:column;
}
.login-main h2{font-size:20px; font-weight:700;}
.login-main .sub{font-size:13px; color:var(--muted); margin-top:6px; margin-bottom:28px;}
.role-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:24px;}
.role-card{
  border:1px solid var(--line);
  background:var(--paper);
  padding:16px;
  text-align:left;
  transition:border-color .15s, background .15s;
}
.role-card:hover{border-color:var(--deep);}
.role-card.selected{border-color:var(--action); background:var(--action-soft);}
.role-card .r-name{font-weight:700; font-size:14px;}
.role-card .r-desc{font-size:12px; color:var(--muted); margin-top:3px; line-height:1.4;}
.field-label{font-size:11px; text-transform:uppercase; letter-spacing:0.05em; color:var(--muted); font-weight:600; display:block; margin-bottom:6px;}
.demo-select{
  width:100%;
  padding:12px 14px;
  border:1px solid var(--line);
  background:var(--panel);
  font-size:14px;
  margin-bottom:20px;
}
.btn-enter{
  background:var(--deep);
  color:var(--paper);
  padding:14px 20px;
  font-size:14px;
  font-weight:700;
  width:100%;
  margin-top:auto;
}
.btn-enter:hover{background:var(--deep-2);}
.login-foot{font-size:11px; color:var(--muted); text-align:center; margin-top:14px;}

/* ===================== APP SHELL ===================== */
#app{display:none; min-height:100vh; grid-template-columns:240px 1fr;}
#app.active{display:grid;}
.sidebar{
  background:var(--deep);
  color:var(--paper);
  padding:24px 0;
  display:flex;
  flex-direction:column;
}
.sidebar .brand{
  font-family:'Archivo Expanded',sans-serif;
  font-weight:800;
  font-size:14px;
  padding:0 24px 24px 24px;
  border-bottom:1px solid rgba(255,255,255,0.12);
  margin-bottom:16px;
}
.sidebar .brand span{color:var(--rust);}
.nav-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 24px;
  font-size:13.5px;
  color:#C9D8D4;
  cursor:pointer;
  border-left:3px solid transparent;
}
.nav-item.active{color:#fff; background:rgba(255,255,255,0.06); border-left-color:var(--rust); font-weight:600;}
.nav-item:hover{color:#fff;}
.sidebar-foot{margin-top:auto; padding:16px 24px 0 24px; border-top:1px solid rgba(255,255,255,0.12);}
.who{font-size:12px; color:#9FB5AF; line-height:1.5;}
.who b{color:#fff; display:block; font-size:13px;}
.btn-logout{
  margin-top:12px;
  background:transparent;
  border:1px solid rgba(255,255,255,0.25);
  color:#C9D8D4;
  padding:8px 12px;
  font-size:12px;
  width:100%;
}
.btn-logout:hover{border-color:#fff; color:#fff;}

.main{padding:32px 40px; overflow-y:auto;}
.topbar{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:28px;}
.topbar h1{font-family:'Archivo Expanded',sans-serif; font-size:24px; font-weight:800;}
.topbar .path{font-size:12px; color:var(--muted); margin-top:4px;}
.branch-switch{
  display:flex; align-items:center; gap:8px;
  border:1px solid var(--line); background:var(--panel);
  padding:8px 12px; font-size:12.5px; font-weight:600;
}
.branch-switch select{border:none; background:transparent; font-weight:600; font-size:12.5px;}

.kpi-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:28px;}
.kpi{border:1px solid var(--line); background:var(--panel); padding:18px;}
.kpi .k-label{font-size:11px; text-transform:uppercase; letter-spacing:0.04em; color:var(--muted); font-weight:600;}
.kpi .k-val{font-family:'Archivo Expanded',sans-serif; font-size:26px; font-weight:800; margin-top:8px;}
.kpi .k-delta{font-size:11.5px; margin-top:6px; color:var(--action); font-weight:600;}
.kpi .k-delta.down{color:var(--rust);}

.panel{border:1px solid var(--line); background:var(--panel); margin-bottom:20px;}
.panel-head{display:flex; justify-content:space-between; align-items:center; padding:16px 20px; border-bottom:1px solid var(--line);}
.panel-head h3{font-size:14px; font-weight:700;}
.panel-body{padding:4px 0;}
table{width:100%; border-collapse:collapse;}
th{text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:0.03em; color:var(--muted); font-weight:600; padding:10px 20px; border-bottom:1px solid var(--line);}
td{padding:12px 20px; font-size:13px; border-bottom:1px solid #EFEBDF;}
tr:last-child td{border-bottom:none;}
.badge{display:inline-block; padding:3px 9px; font-size:11px; font-weight:600; border-radius:2px;}
.badge.ok{background:var(--action-soft); color:var(--deep-2);}
.badge.warn{background:var(--amber-soft); color:var(--amber);}
.badge.bad{background:var(--rust-soft); color:var(--rust);}
.mini-btn{border:1px solid var(--line); background:var(--panel); padding:6px 12px; font-size:11.5px; font-weight:600;}
.mini-btn:hover{border-color:var(--deep);}
.mini-btn.primary{background:var(--deep); color:#fff; border-color:var(--deep);}
.cat-chip.active{background:var(--deep); color:#fff; border-color:var(--deep);}

.two-col{display:grid; grid-template-columns:1.4fr 1fr; gap:20px;}

/* branch cards (owner view) */
.branch-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
.branch-card{border:1px solid var(--line); background:var(--panel); padding:18px;}
.branch-card .bc-name{font-weight:700; font-size:14px;}
.branch-card .bc-city{font-size:12px; color:var(--muted); margin-top:2px;}
.branch-card .bc-sales{font-family:'Archivo Expanded',sans-serif; font-size:20px; font-weight:800; margin-top:14px;}
.branch-card .bc-label{font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:0.04em;}
.branch-card .bc-bar{height:5px; background:#EFEBDF; margin-top:10px;}
.branch-card .bc-bar div{height:100%; background:var(--action);}

/* POS */
.pos-grid{display:grid; grid-template-columns:1.6fr 1fr; gap:20px;}
.prod-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;}
.prod-card{border:1px solid var(--line); background:var(--panel); padding:14px; text-align:left;}
.prod-card:hover{border-color:var(--deep);}
.prod-card .p-name{font-size:12.5px; font-weight:700; line-height:1.3;}
.prod-card .p-stock{font-size:10.5px; color:var(--muted); margin-top:6px;}
.prod-card .p-price{font-family:'Archivo Expanded',sans-serif; font-size:16px; font-weight:800; margin-top:8px; color:var(--deep);}
.cart-line{display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid #EFEBDF; font-size:12.5px;}
.cart-total{display:flex; justify-content:space-between; padding-top:14px; margin-top:6px; border-top:2px solid var(--ink); font-weight:800; font-size:16px; font-family:'Archivo Expanded',sans-serif;}
.btn-charge{background:var(--action); color:#fff; width:100%; padding:14px; font-weight:700; font-size:14px; margin-top:16px;}
.cart-qty-btn{width:22px; height:22px; border:1px solid var(--line); background:#fff; font-size:13px; line-height:1; padding:0;}
.cart-qty-btn:hover{border-color:var(--deep);}
.cart-remove-btn{width:22px; height:22px; border:1px solid var(--rust-soft); background:var(--rust-soft); color:var(--rust); font-size:12px; line-height:1; padding:0;}
.cart-remove-btn:hover{background:var(--rust); color:#fff;}

/* super admin */
.sa-tenant-row{display:flex; justify-content:space-between; align-items:center; padding:14px 20px; border-bottom:1px solid #EFEBDF;}
.sa-tenant-row:last-child{border-bottom:none;}
.sa-tenant-name{font-weight:700; font-size:13.5px;}
.sa-tenant-meta{font-size:11.5px; color:var(--muted); margin-top:2px;}

/* ===================== Login funcional (extras) ===================== */
#screen-login{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;}
.login-err{background:var(--rust-soft); color:var(--rust); padding:12px 14px; font-size:13px; margin-bottom:16px;}
.mode-tabs{display:flex; border:1px solid var(--line); margin-bottom:20px;}
.mode-tab{flex:1; background:var(--paper); padding:10px; font-size:12.5px; font-weight:600; color:var(--muted);}
.mode-tab.active{background:var(--deep); color:#fff;}
.field-label{font-size:11px; text-transform:uppercase; letter-spacing:0.05em; color:var(--muted); font-weight:600; display:block; margin-bottom:6px;}

/* ===================== Formularios genéricos ===================== */
.form-row{margin-bottom:16px;}
.form-row label{font-size:11px; text-transform:uppercase; letter-spacing:0.04em; color:var(--muted); font-weight:600; display:block; margin-bottom:6px;}
.form-row input, .form-row select{width:100%; padding:10px 12px; border:1px solid var(--line); font-size:13.5px; font-family:inherit; background:#fff;}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:0 16px;}
.btn-primary{background:var(--deep); color:#fff; padding:12px 20px; font-weight:700; font-size:13.5px;}
.btn-primary:hover{background:var(--deep-2);}
.alert-ok{background:var(--action-soft); color:var(--deep-2); padding:12px 16px; font-size:13px; margin-bottom:20px; border:1px solid #C7E3D8;}
.alert-err{background:var(--rust-soft); color:var(--rust); padding:12px 16px; font-size:13px; margin-bottom:20px; border:1px solid #E9C3B4;}
.modal-overlay{position:fixed; inset:0; background:rgba(10,10,10,0.4); display:flex; align-items:center; justify-content:center; z-index:50;}
.modal-box{background:#fff; border:1px solid var(--line); width:100%; max-width:440px; padding:24px;}
.modal-box h3{font-size:16px; font-weight:700; margin-bottom:18px;}

/* ===================== Móvil ===================== */
.mobile-topbar{display:none;}
.sidebar-backdrop{display:none;}

@media (max-width: 860px){
  #app{grid-template-columns:1fr;}
  #app.active{display:block;}

  .mobile-topbar{
    display:flex; align-items:center; gap:14px;
    background:var(--deep); color:#fff;
    padding:14px 18px; position:sticky; top:0; z-index:30;
  }
  .mobile-topbar button{
    background:transparent; border:1px solid rgba(255,255,255,0.3); color:#fff;
    width:36px; height:36px; font-size:16px; flex-shrink:0;
  }
  .mobile-topbar .mt-brand{font-family:'Archivo Expanded',sans-serif; font-weight:800; font-size:14px;}
  .mobile-topbar .mt-brand span{color:var(--rust);}

  .sidebar{
    position:fixed; top:0; left:0; bottom:0; width:260px; z-index:50;
    transform:translateX(-100%); transition:transform .2s ease;
    overflow-y:auto;
  }
  .sidebar.open{transform:translateX(0);}
  .sidebar-backdrop.open{
    display:block; position:fixed; inset:0; background:rgba(10,10,10,0.45); z-index:40;
  }

  .main{padding:18px 16px 40px;}
  .topbar{flex-direction:column; align-items:flex-start; gap:12px; margin-bottom:20px;}
  .topbar h1{font-size:19px;}
  /* botones posicionados con margin negativo (truco de layout de escritorio) se resetean en móvil */
  [style*="-48px"]{margin-top:0 !important; justify-content:flex-start !important;}

  .kpi-grid{grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px;}
  .branch-grid{grid-template-columns:1fr; gap:12px;}
  .prod-grid{grid-template-columns:1fr 1fr; gap:8px;}
  .pos-grid{grid-template-columns:1fr; gap:16px;}
  .form-grid{grid-template-columns:1fr; gap:0;}
  .two-col{grid-template-columns:1fr;}

  table{display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; white-space:nowrap;}
  th, td{padding:10px 14px;}

  .modal-box{max-width:none; width:calc(100% - 32px); max-height:85vh; overflow-y:auto;}

  #screen-login{padding:0;}
  .login-wrap{grid-template-columns:1fr; max-width:none;}
  .login-side{padding:32px 24px;}
  .login-side h1{font-size:26px;}
  .login-side .stat-row{display:none;}
  .login-main{padding:28px 24px;}
}