:root{
  --black:#080808;--dark:#101012;--card:#171719;--card2:#1d1d20;--line:#2a2a2e;
  --gold:#d4aa4b;--gold2:#e5c76f;--white:#f7f7f5;--muted:#a7a7ad;
  --green:#2ecc71;--red:#e2574c;--blue:#4aa3d4;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{font-family:Arial,Helvetica,sans-serif;background:var(--dark);color:var(--white);line-height:1.5;font-size:15px}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font-family:inherit;font-size:1rem;color:inherit}
::placeholder{color:#777}

/* ---------- LOGIN ---------- */
#loginScreen{position:fixed;inset:0;background:var(--black);display:flex;align-items:center;justify-content:center;z-index:999;padding:20px}
.login-box{width:100%;max-width:360px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:32px 26px}
.login-box h1{font-size:1.4rem;margin-bottom:6px}
.login-box h1 span{color:var(--gold)}
.login-box p{color:var(--muted);font-size:.85rem;margin-bottom:22px}
.field{margin-bottom:16px}
.field label{display:block;font-size:.8rem;color:var(--muted);margin-bottom:6px}
.field input,.field select,.field textarea{
  width:100%;padding:12px 14px;background:var(--dark);border:1px solid var(--line);
  border-radius:10px;color:var(--white)
}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--gold);border-color:var(--gold)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;
  border-radius:10px;font-weight:700;border:1px solid var(--gold);cursor:pointer;transition:.15s;
  background:transparent;color:var(--gold)}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--gold);color:#111;border-color:var(--gold)}
.btn-primary:hover{background:var(--gold2)}
.btn-danger{border-color:var(--red);color:var(--red)}
.btn-block{width:100%}
.btn-sm{padding:8px 12px;font-size:.82rem;border-radius:8px}
.error-msg{color:var(--red);font-size:.85rem;margin-top:10px;min-height:1em}

/* ---------- SHELL ---------- */
#app{display:none;min-height:100vh}
#app.visible{display:flex}

.sidebar{width:230px;flex-shrink:0;background:var(--black);border-right:1px solid var(--line);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto}
.sidebar-head{padding:22px 20px;border-bottom:1px solid var(--line)}
.sidebar-head .brand{font-size:1.2rem;font-weight:900}
.sidebar-head .brand span{color:var(--gold)}
.sidebar-head small{color:var(--muted);display:block;margin-top:2px;font-size:.72rem}

.nav-item{display:flex;align-items:center;gap:12px;padding:13px 20px;color:#ccc;font-size:.92rem;
  border-left:3px solid transparent;cursor:pointer}
.nav-item:hover{background:var(--card)}
.nav-item.active{background:var(--card);border-left-color:var(--gold);color:var(--white);font-weight:700}
.nav-item .ico{font-size:1.1rem;width:22px;text-align:center}

.sidebar-foot{margin-top:auto;padding:16px 20px;border-top:1px solid var(--line)}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 24px;
  border-bottom:1px solid var(--line);background:var(--dark);position:sticky;top:0;z-index:10}
.topbar h2{font-size:1.15rem}
.menu-toggle{display:none;background:none;border:none;color:var(--gold);font-size:1.5rem;cursor:pointer}
.content{padding:24px;flex:1}

.view{display:none}
.view.active{display:block}

/* ---------- CARDS / GRID ---------- */
.grid{display:grid;gap:16px}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}

.kpi{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px}
.kpi span{color:var(--muted);font-size:.78rem;display:block;margin-bottom:6px}
.kpi strong{font-size:1.5rem;display:block}
.kpi.gold strong{color:var(--gold)}
.kpi.red strong{color:var(--red)}
.kpi.green strong{color:var(--green)}

.panel{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px;margin-bottom:20px}
.panel h3{font-size:1.02rem;margin-bottom:14px}

/* ---------- TABLE ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px}
table{width:100%;border-collapse:collapse;min-width:640px}
th,td{padding:11px 12px;text-align:left;border-bottom:1px solid var(--line);font-size:.87rem;white-space:nowrap}
th{color:var(--gold);font-size:.75rem;text-transform:uppercase;letter-spacing:.4px;background:var(--card2)}
tbody tr:hover{background:var(--card2)}
.badge{display:inline-block;padding:3px 9px;border-radius:20px;font-size:.72rem;font-weight:700}
.badge-pend{background:#3a3320;color:#e5c76f}
.badge-ok{background:#1f3a26;color:#4fd47a}
.badge-warn{background:#3a2020;color:#e57070}
.badge-info{background:#20323a;color:#6fc9e5}

.toolbar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px;align-items:center}
.toolbar input,.toolbar select{padding:10px 12px;background:var(--card);border:1px solid var(--line);
  border-radius:10px;color:var(--white);min-width:150px}
.spacer{flex:1}

.row-actions{display:flex;gap:6px}
.icon-action{background:none;border:1px solid var(--line);border-radius:8px;padding:6px 9px;cursor:pointer;color:var(--muted)}
.icon-action:hover{border-color:var(--gold);color:var(--gold)}

/* ---------- MODAL ---------- */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.65);display:none;align-items:flex-start;
  justify-content:center;z-index:500;padding:30px 16px;overflow-y:auto}
.modal-bg.open{display:flex}
.modal{background:var(--card);border:1px solid var(--line);border-radius:16px;max-width:560px;width:100%;padding:26px}
.modal h3{margin-bottom:18px}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px}

.empty-state{padding:40px 20px;text-align:center;color:var(--muted)}

.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--gold);color:#111;
  padding:12px 22px;border-radius:10px;font-weight:700;z-index:800;display:none}

.chart-bars{display:flex;align-items:flex-end;gap:8px;height:160px;padding-top:10px}
.chart-bar{flex:1;background:linear-gradient(180deg,var(--gold2),var(--gold));border-radius:4px 4px 0 0;
  position:relative;min-height:2px}
.chart-bar small{position:absolute;bottom:-20px;left:0;right:0;text-align:center;color:var(--muted);font-size:.68rem}

@media (max-width:900px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .grid-2{grid-template-columns:1fr}
  .two-col{grid-template-columns:1fr}
}

@media (max-width:760px){
  .sidebar{position:fixed;left:0;top:0;bottom:0;z-index:400;transform:translateX(-100%);transition:.2s;width:250px}
  .sidebar.open{transform:translateX(0)}
  .menu-toggle{display:block}
  .content{padding:16px}
  .grid-4,.grid-3{grid-template-columns:1fr 1fr}
  th,td{font-size:.82rem;padding:9px 8px}
  .btn{padding:13px 18px}
}

@media (max-width:480px){
  .grid-4,.grid-3{grid-template-columns:1fr}
}

/* ---------- Actualización 002: modalidad de venta y anulaciones ---------- */
.badge-rev{background:rgba(74,163,212,.15);color:var(--blue)}
.badge-anulada{background:rgba(226,87,76,.15);color:var(--red)}
tr.row-anulada td{opacity:.5;text-decoration:line-through}
tr.row-anulada td.no-strike{opacity:1;text-decoration:none}
.modal.wide{max-width:820px}
.seg{display:flex;gap:8px;flex-wrap:wrap}
.seg label{flex:1;min-width:150px;display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--line);
  border-radius:10px;cursor:pointer;font-size:.9rem;color:var(--white)}
.seg label:has(input:checked){border-color:var(--gold);background:rgba(212,170,75,.08)}
.seg input{width:auto}
.draft-table{width:100%;font-size:.82rem;margin-top:10px}
.draft-table th,.draft-table td{padding:6px 6px;text-align:left;white-space:nowrap}
.draft-table input{width:70px;padding:6px 8px;background:var(--card2);border:1px solid var(--line);border-radius:8px;color:var(--white)}
.sale-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px}
.sale-summary div{background:var(--card2);border:1px solid var(--line);border-radius:10px;padding:10px}
.sale-summary span{display:block;font-size:.72rem;color:var(--muted)}
.sale-summary strong{font-size:1rem}
.notice{background:rgba(212,170,75,.1);border:1px solid var(--gold);border-radius:10px;padding:10px 12px;font-size:.85rem;margin-bottom:14px}
@media (max-width:760px){.sale-summary{grid-template-columns:1fr 1fr}}
@media (max-width:760px){
  .draft-table thead{display:none}
  .draft-table,.draft-table tbody{display:block;min-width:0}
  .draft-table tr{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;padding:10px 4px;border-bottom:1px solid var(--line)}
  .draft-table td{white-space:normal;padding:0;border:none}
  .draft-table td[data-label]::before{content:attr(data-label);display:block;font-size:.68rem;color:var(--muted)}
  .draft-table td.prod{grid-column:1/-1;font-weight:700}
  .draft-table td.quitar{grid-column:1/-1}
  .draft-table input{width:100%;font-size:1rem}
}

/* ---------- Tres cuentas (migración 003) ----------
   Los elementos "solo-cuentas" se ven solo si la migración está aplicada;
   los "sin-cuentas" se ocultan en ese modo. Sin la migración, el panel queda igual. */
body:not(.modo-cuentas) .solo-cuentas{display:none !important}
body.modo-cuentas .sin-cuentas{display:none !important}
.sub-info{font-size:.78rem;color:var(--muted);margin-top:3px}
.badge-cta{font-size:.7rem;white-space:nowrap}
.badge-cta-eldo{background:rgba(212,170,75,.18);color:var(--gold)}
.badge-cta-niko{background:rgba(90,150,230,.18);color:#8fb8ee}
.badge-cta-aye{background:rgba(190,110,210,.18);color:#d39ae2}
.reparto-fila{align-items:center;margin-bottom:6px}
.cuenta-card h3{margin-bottom:10px}
.cuenta-filas div{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:1px solid rgba(255,255,255,.06);font-size:.88rem}
.cuenta-filas span{color:var(--muted)}
.cuenta-filas .destacado strong{color:var(--gold)}