:root{
  --primary:#C0392B;      /* rojo cálido — comida */
  --primary-dark:#922B21;
  --accent:#F39C12;       /* naranja / amarillo */
  --bg:#F7F5F2;
  --card:#FFFFFF;
  --ink:#231F20;
  --muted:#8A7F78;
  --line:#EAE3DC;
  --success:#1E8E5A;
  --danger:#D8453B;
  --warn:#E08E0B;
  --yape:#722282;
  --plin:#00C7B1;
  --sidebar-w:260px;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--ink);}

/* ══ LOGIN ══ */
.login-body{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,var(--primary) 0%,var(--primary-dark) 100%);}
.card{background:#fff;border-radius:24px;padding:44px 36px;width:100%;max-width:380px;text-align:center;box-shadow:0 8px 48px rgba(0,0,0,.25);}
.login-emoji{font-size:48px;margin-bottom:8px;}
.card h1{font-family:'DM Serif Display',serif;font-size:1.7rem;color:var(--ink);margin-bottom:4px;}
.sub{font-size:13px;color:var(--muted);margin-bottom:26px;letter-spacing:.04em;}
label{display:block;font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px;text-align:left;}
input,select{width:100%;border:2px solid var(--line);border-radius:12px;padding:12px 14px;font-size:15px;font-family:'DM Sans',sans-serif;outline:none;margin-bottom:14px;color:var(--ink);background:#fff;}
input:focus,select:focus{border-color:var(--primary);}
button{font-family:'DM Sans',sans-serif;cursor:pointer;}
.card button[type=submit]{width:100%;background:var(--primary);color:#fff;border:none;border-radius:12px;padding:13px;font-size:16px;font-weight:600;margin-top:4px;}
.card button[type=submit]:hover{background:var(--primary-dark);}
.error{background:#fef2f2;border:1px solid #fca5a5;color:var(--danger);padding:10px 14px;border-radius:10px;font-size:13px;margin-bottom:14px;}

/* ══ LAYOUT: SIDEBAR IZQUIERDA ══ */
.sidebar{
  position:fixed;top:0;left:0;bottom:0;width:var(--sidebar-w);
  background:#fff;border-right:1px solid var(--line);
  display:flex;flex-direction:column;z-index:40;
  padding:20px 0;
}
.side-logo{display:flex;align-items:center;gap:10px;padding:0 20px 18px;border-bottom:1px solid var(--line);margin-bottom:16px;}
.side-logo-emoji{font-size:26px;}
.side-logo-text{font-family:'DM Serif Display',serif;font-size:1.15rem;color:var(--primary);line-height:1.15;}

.side-user{display:flex;align-items:center;gap:10px;padding:0 20px 18px;margin-bottom:6px;}
.side-user-avatar{width:38px;height:38px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0;}
.side-user-name{font-size:13.5px;font-weight:600;color:var(--ink);}
.side-user-role{font-size:11.5px;color:var(--muted);}

.side-nav{display:flex;flex-direction:column;gap:2px;padding:0 12px;flex:1;overflow-y:auto;}
.side-btn{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:none;border-radius:10px;padding:11px 12px;font-size:14.5px;font-weight:500;color:var(--ink);}
.side-icon{font-size:17px;width:20px;text-align:center;}
.side-btn:hover{background:var(--bg);}
.side-btn.active{background:var(--primary);color:#fff;}

.side-logout{margin:14px 20px 0;padding:11px 12px;border-radius:10px;color:var(--danger);font-size:14px;font-weight:600;text-decoration:none;display:block;text-align:center;border:1px solid var(--line);}
.side-logout:hover{background:#fef2f2;}

.menu-toggle{display:none;position:fixed;top:14px;left:14px;z-index:50;background:#fff;border:1px solid var(--line);border-radius:10px;width:42px;height:42px;font-size:20px;box-shadow:0 2px 10px rgba(0,0,0,.08);}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:35;}

.main{margin-left:var(--sidebar-w);padding:26px 32px 60px;min-height:100vh;}

@media (max-width:900px){
  .sidebar{transform:translateX(-100%);transition:transform .25s ease;box-shadow:0 0 30px rgba(0,0,0,.15);}
  .sidebar.open{transform:translateX(0);}
  .menu-toggle{display:flex;align-items:center;justify-content:center;}
  .sidebar-overlay.open{display:block;}
  .main{margin-left:0;padding:70px 16px 40px;}
}

/* ══ TAB PANELS ══ */
.tab-panel{display:none;}
.tab-panel.active{display:block;}

.page-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:20px;}
.page-head h2{font-family:'DM Serif Display',serif;font-size:1.5rem;color:var(--ink);}
.rango-fechas{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);}
.rango-fechas input{width:auto;margin-bottom:0;padding:8px 10px;}

/* ══ STATS ══ */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:22px;}
.stat-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 20px;}
.stat-n{font-size:1.7rem;font-weight:700;color:var(--ink);}
.stat-n.success{color:var(--success);}
.stat-n.warn{color:var(--warn);}
.stat-l{font-size:12.5px;color:var(--muted);margin-top:2px;}

.grid-2col{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;}
@media (max-width:750px){.grid-2col{grid-template-columns:1fr;}}

/* ══ CARDS ══ */
.crm-card{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;}
.crm-card-header{padding:14px 18px;border-bottom:1px solid var(--line);}
.crm-card-title{font-weight:600;font-size:14.5px;}
.bar-row{display:flex;align-items:center;gap:10px;padding:10px 18px;font-size:13.5px;}
.bar-row .bar-label{width:130px;flex-shrink:0;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bar-track{flex:1;background:var(--bg);border-radius:6px;height:10px;overflow:hidden;}
.bar-fill{height:100%;background:var(--primary);border-radius:6px;}
.bar-val{width:80px;text-align:right;font-weight:600;flex-shrink:0;}

/* ══ TOOLBAR / FORM ══ */
.toolbar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px;}
.toolbar input,.toolbar select{width:auto;margin-bottom:0;min-width:150px;}
.field{margin-bottom:2px;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.hint{font-size:12.5px;color:var(--muted);margin:8px 0 14px;}

/* ══ BUTTONS ══ */
.btn{border:none;border-radius:10px;padding:10px 16px;font-size:14px;font-weight:600;cursor:pointer;}
.btn-primary{background:var(--primary);color:#fff;}
.btn-primary:hover{background:var(--primary-dark);}
.btn-ghost{background:#fff;border:1px solid var(--line);color:var(--ink);}
.btn-ghost:hover{background:var(--bg);}
.btn-danger{background:#fef2f2;color:var(--danger);}
.btn-sm{padding:7px 12px;font-size:13px;}

/* ══ TABLE ══ */
.table-wrap{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow-x:auto;}
table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:600px;}
th{text-align:left;padding:12px 14px;font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--line);background:#FBFAF8;}
td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:middle;}
tr:last-child td{border-bottom:none;}
.actions{display:flex;gap:6px;}

/* ══ VENTA FORM ══ */
.venta-form{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px;max-width:640px;}
.venta-item-row{display:grid;grid-template-columns:2fr 80px 90px 90px 34px;gap:8px;align-items:center;margin-bottom:8px;}
.venta-item-row select,.venta-item-row input{margin-bottom:0;}
.venta-item-row .rm-btn{background:#fef2f2;color:var(--danger);border:none;border-radius:8px;height:40px;font-size:15px;}
.venta-total{font-size:1.3rem;font-weight:700;margin:14px 0;text-align:right;color:var(--primary);}
.venta-total span{color:var(--ink);}

.metodo-pago-grupo{display:flex;gap:8px;}
.metodo-btn{flex:1;border:2px solid var(--line);background:#fff;border-radius:10px;padding:10px 6px;font-size:13px;font-weight:600;color:var(--muted);}
.metodo-btn.active[data-metodo="efectivo"]{border-color:var(--success);color:var(--success);background:#f0fdf6;}
.metodo-btn.active[data-metodo="yape"]{border-color:var(--yape);color:var(--yape);background:#f5edf8;}
.metodo-btn.active[data-metodo="plin"]{border-color:var(--plin);color:var(--plin);background:#e9fbf9;}

.pago-chip{display:inline-block;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:600;}
.pago-efectivo{background:#eafaf1;color:var(--success);}
.pago-yape{background:#f5edf8;color:var(--yape);}
.pago-plin{background:#e9fbf9;color:var(--plin);}

/* ══ MODAL ══ */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(20,15,12,.5);z-index:60;align-items:center;justify-content:center;padding:16px;}
.modal-overlay.open{display:flex;}
.modal{background:#fff;border-radius:18px;padding:26px 24px;width:100%;max-width:480px;max-height:90vh;overflow-y:auto;}
.modal h3{font-family:'DM Serif Display',serif;font-size:1.25rem;margin-bottom:16px;}
.modal-footer{display:flex;justify-content:flex-end;gap:10px;margin-top:16px;}

/* ══ TOAST ══ */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(100px);background:var(--ink);color:#fff;padding:12px 22px;border-radius:12px;font-size:14px;font-weight:500;opacity:0;transition:all .25s ease;z-index:80;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

.svc-chip{background:var(--bg);padding:3px 10px;border-radius:20px;font-size:12px;font-weight:600;}