:root{--bg:#0f0d0a;--surface:#1a1612;--surface2:#241f19;--surface3:#2e271f;--border:#3a3128;--accent:#c8860a;--accent2:#e6a020;--green:#4caf7d;--red:#e05555;--blue:#5b8dee;--text:#f0e8d8;--text2:#b0a090;--text3:#706050;--font-display:'Playfair Display',serif;--font-body:'DM Sans',sans-serif;--radius:12px;}
*{margin:0;padding:0;box-sizing:border-box;}
body{background:var(--bg);color:var(--text);font-family:var(--font-body);min-height:100vh;}

/* ── LOGIN ── */
#login-screen{display:flex;align-items:center;justify-content:center;min-height:100vh;background:radial-gradient(ellipse at 20% 50%,rgba(200,134,10,0.08) 0%,transparent 60%),var(--bg);padding:16px;}
.login-box{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:48px;width:400px;max-width:100%;}
.login-logo{text-align:center;margin-bottom:36px;}
.login-logo h1{font-family:var(--font-display);font-size:32px;color:var(--accent2);font-weight:900;}
.login-logo p{color:var(--text3);font-size:13px;letter-spacing:1px;text-transform:uppercase;margin-top:4px;}
.login-error{background:rgba(224,85,85,0.1);border:1px solid rgba(224,85,85,0.3);border-radius:8px;padding:12px;color:var(--red);font-size:13px;margin-bottom:16px;display:none;}

/* ── APP LAYOUT ── */
#app{display:none;}
.layout{display:flex;}

/* ── SIDEBAR ── */
.sidebar{width:240px;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;position:fixed;height:100vh;z-index:100;overflow-y:auto;transition:transform 0.3s ease;}
.logo{padding:28px 24px 20px;border-bottom:1px solid var(--border);}
.logo h1{font-family:var(--font-display);font-size:22px;color:var(--accent2);font-weight:900;}
.logo p{font-size:11px;color:var(--text3);margin-top:2px;letter-spacing:1px;text-transform:uppercase;}
.nav{padding:16px 12px;flex:1;}
.nav-section{margin-bottom:20px;}
.nav-label{font-size:10px;color:var(--text3);letter-spacing:1.5px;text-transform:uppercase;padding:0 12px;margin-bottom:6px;}
.nav-item{display:none;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;cursor:pointer;color:var(--text2);font-size:14px;font-weight:500;transition:all 0.2s;margin-bottom:2px;}
.nav-item:hover{background:var(--surface2);color:var(--text);}
.nav-item.active{background:linear-gradient(135deg,rgba(200,134,10,0.25),rgba(200,134,10,0.1));color:var(--accent2);border:1px solid rgba(200,134,10,0.2);}
.nav-item.visible{display:flex;}
.nav-item .icon{font-size:16px;width:20px;text-align:center;}
.sidebar-footer{padding:16px;border-top:1px solid var(--border);}
.user-pill{display:flex;align-items:center;gap:10px;background:var(--surface2);border-radius:10px;padding:10px 12px;margin-bottom:10px;}
.user-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#0f0d0a;flex-shrink:0;}
.user-name{font-size:13px;font-weight:600;}
.user-role{font-size:11px;color:var(--text3);}

/* ── HAMBURGER ── */
.hamburger{display:none;position:fixed;top:12px;left:12px;z-index:200;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:8px 10px;cursor:pointer;font-size:20px;line-height:1;color:var(--text);}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:99;}
.sidebar-overlay.open{display:block;}

/* ── MAIN ── */
.main{margin-left:240px;flex:1;padding:32px;min-height:100vh;}
.page{display:none;animation:fadeIn 0.2s ease;}
.page.active{display:block;}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.page-header{margin-bottom:32px;display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:12px;}
.page-header-left h2{font-family:var(--font-display);font-size:32px;font-weight:700;}
.page-header-left p{color:var(--text2);margin-top:4px;font-size:14px;}

/* ── CARDS ── */
.cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:28px;}
.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px 24px;position:relative;overflow:hidden;}
.stat-card::before{content:'';position:absolute;top:0;right:0;width:80px;height:80px;border-radius:50%;opacity:0.08;transform:translate(20px,-20px);}
.stat-card.gold::before{background:var(--accent2);}
.stat-card.green::before{background:var(--green);}
.stat-card.blue::before{background:var(--blue);}
.stat-card.red::before{background:var(--red);}
.stat-label{font-size:11px;color:var(--text3);letter-spacing:1px;text-transform:uppercase;margin-bottom:8px;}
.stat-value{font-family:var(--font-display);font-size:28px;font-weight:700;}
.stat-sub{font-size:12px;color:var(--text2);margin-top:4px;}
.stat-icon{position:absolute;top:20px;right:20px;font-size:22px;opacity:0.5;}

/* ── GRID Y PANELS ── */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px;}
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px;margin-bottom:20px;}
.panel-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:8px;}
.panel-title{font-family:var(--font-display);font-size:18px;font-weight:700;}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border-radius:8px;border:none;cursor:pointer;font-family:var(--font-body);font-size:14px;font-weight:500;transition:all 0.2s;}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#0f0d0a;}
.btn-primary:hover{filter:brightness(1.1);}
.btn-secondary{background:var(--surface2);color:var(--text);border:1px solid var(--border);}
.btn-secondary:hover{background:var(--surface3);}
.btn-danger{background:rgba(224,85,85,0.15);color:var(--red);border:1px solid rgba(224,85,85,0.3);}
.btn-warning{background:rgba(230,160,32,0.15);color:var(--accent2);border:1px solid rgba(230,160,32,0.3);}
.btn-info{background:rgba(91,141,238,0.15);color:var(--blue);border:1px solid rgba(91,141,238,0.3);}
.btn-green{background:rgba(76,175,125,0.15);color:var(--green);border:1px solid rgba(76,175,125,0.3);}
.btn-sm{padding:6px 12px;font-size:12px;}

/* ── FORMS ── */
.form-group{margin-bottom:16px;}
.form-label{display:block;font-size:12px;color:var(--text2);margin-bottom:6px;}
.form-input,.form-select{width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:10px 14px;color:var(--text);font-family:var(--font-body);font-size:14px;transition:border 0.2s;}
.form-input:focus,.form-select:focus{outline:none;border-color:var(--accent);}
.form-select option{background:var(--surface2);}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}

/* ── TABLES ── */
table{width:100%;border-collapse:collapse;}
th{text-align:left;padding:10px 14px;font-size:11px;color:var(--text3);letter-spacing:1px;text-transform:uppercase;border-bottom:1px solid var(--border);}
td{padding:12px 14px;font-size:14px;border-bottom:1px solid rgba(58,49,40,0.4);vertical-align:middle;}
tr:hover td{background:rgba(255,255,255,0.02);}
tr:last-child td{border-bottom:none;}
.table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch;}

/* ── BADGES ── */
.badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600;}
.badge-green{background:rgba(76,175,125,0.15);color:var(--green);}
.badge-gold{background:rgba(200,134,10,0.15);color:var(--accent2);}
.badge-blue{background:rgba(91,141,238,0.15);color:var(--blue);}
.badge-red{background:rgba(224,85,85,0.15);color:var(--red);}
.badge-gray{background:rgba(112,96,80,0.15);color:var(--text3);}
.role-badge{display:inline-block;padding:2px 8px;border-radius:12px;font-size:11px;font-weight:600;}
.role-admin{background:rgba(200,134,10,0.2);color:var(--accent2);}
.role-encargado{background:rgba(76,175,125,0.2);color:var(--green);}
.role-operario{background:rgba(91,141,238,0.2);color:var(--blue);}
.role-vendedor{background:rgba(176,144,128,0.2);color:#c8a090;}

/* ── MODALS ── */
.modal-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:1000;align-items:center;justify-content:center;backdrop-filter:blur(4px);padding:16px;}
.modal-bg.open{display:flex;}
.modal{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:32px;width:520px;max-width:100%;max-height:90vh;overflow-y:auto;}
.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;}
.modal-title{font-family:var(--font-display);font-size:22px;font-weight:700;}
.modal-close{background:none;border:none;color:var(--text2);font-size:22px;cursor:pointer;}
.modal-close:hover{color:var(--text);}
.modal-footer{display:flex;justify-content:flex-end;gap:10px;margin-top:24px;padding-top:20px;border-top:1px solid var(--border);flex-wrap:wrap;}

/* ── POS ── */
.pos-layout{display:grid;grid-template-columns:1fr 380px;gap:20px;height:calc(100vh - 160px);}
.pos-cart{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);display:flex;flex-direction:column;}
.pos-cart-header{padding:20px;border-bottom:1px solid var(--border);}
.pos-cart-items{flex:1;overflow-y:auto;padding:16px;}
.pos-cart-footer{padding:20px;border-top:1px solid var(--border);}
.products-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;}
.product-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:16px;cursor:pointer;transition:all 0.2s;text-align:center;}
.product-card:hover{border-color:var(--accent);transform:translateY(-2px);}
.product-card.sin-stock{opacity:0.5;cursor:not-allowed;}
.cart-item{display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px solid rgba(58,49,40,0.4);}
.cart-item:last-child{border-bottom:none;}
.qty-controls{display:flex;align-items:center;gap:6px;flex-shrink:0;}
.qty-btn{background:var(--surface2);border:1px solid var(--border);color:var(--text);width:26px;height:26px;border-radius:6px;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;}
.cart-grand-total{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-top:1px solid var(--border);margin-top:8px;}
.cart-grand-total span:last-child{font-family:var(--font-display);font-size:24px;font-weight:700;color:var(--accent2);}

/* ── INVENTARIO ── */
.inv-item{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.inv-label{font-size:13px;color:var(--text2);width:140px;flex-shrink:0;}
.inv-bar-wrap{flex:1;height:8px;background:var(--surface3);border-radius:4px;overflow:hidden;}
.inv-bar{height:100%;border-radius:4px;transition:width 0.5s;}
.inv-value{font-size:13px;font-weight:600;width:80px;text-align:right;}

/* ── CHARTS ── */
.chart-container{position:relative;height:220px;}

/* ── TRAZA ── */
.traza-timeline{padding:8px 0;}
.traza-step{display:flex;gap:16px;padding:14px 0;border-bottom:1px solid rgba(58,49,40,0.4);}
.traza-step:last-child{border-bottom:none;}
.traza-dot-col{display:flex;flex-direction:column;align-items:center;gap:4px;}
.traza-dot{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;}
.traza-dot.current{background:linear-gradient(135deg,var(--accent),var(--accent2));border:2px solid var(--accent2);}
.traza-dot.past{background:var(--surface2);border:2px solid var(--border);}
.traza-line{width:2px;flex:1;background:var(--border);min-height:20px;}
.traza-resumen{margin-top:16px;padding:16px;background:var(--surface2);border-radius:10px;display:flex;gap:24px;flex-wrap:wrap;}
.traza-resumen-item{text-align:center;min-width:80px;}
.traza-resumen-label{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:1px;margin-bottom:4px;}
.traza-resumen-value{font-family:var(--font-display);font-size:20px;font-weight:700;}

/* ── MISC ── */
.stock-lote-tag{display:inline-block;padding:2px 8px;border-radius:6px;font-size:11px;background:rgba(76,175,125,0.1);border:1px solid rgba(76,175,125,0.2);color:var(--green);margin:2px;}
.toast{position:fixed;bottom:24px;right:24px;background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:14px 20px;font-size:14px;transform:translateY(80px);opacity:0;transition:all 0.3s;z-index:9999;max-width:calc(100vw - 48px);}
.toast.show{transform:translateY(0);opacity:1;}
.toast.success{border-color:var(--green);color:var(--green);}
.toast.error{border-color:var(--red);color:var(--red);}
.empty{text-align:center;padding:48px 24px;color:var(--text3);}
.empty-icon{font-size:48px;display:block;margin-bottom:12px;opacity:0.4;}
::-webkit-scrollbar{width:4px;height:4px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px;}

/* ══════════════════════════════════════
   RESPONSIVE — TABLET (≤ 1024px)
══════════════════════════════════════ */
@media (max-width:1024px){
  .grid-2{grid-template-columns:1fr;}
  .pos-layout{grid-template-columns:1fr;height:auto;}
  .pos-cart{max-height:400px;}
  .cards-grid{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));}
  .products-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));}
}

/* ══════════════════════════════════════
   RESPONSIVE — MÓVIL (≤ 768px)
══════════════════════════════════════ */
@media (max-width:768px){
  body,#app{overflow-x:hidden;width:100%;}
  .layout{width:100%;overflow-x:hidden;}
  .main{width:100%;max-width:100vw;overflow-x:hidden;}
  /* Sidebar oculto por defecto, se abre con hamburger */
  .sidebar{transform:translateX(-100%);}
  .sidebar.open{transform:translateX(0);}
  .hamburger{display:flex;align-items:center;justify-content:center;}

  /* Main ocupa todo el ancho */
  .main{margin-left:0;padding:16px;padding-top:56px;}

  /* Header más compacto */
  .page-header{margin-bottom:20px;}
  .page-header-left h2{font-size:24px;}

  /* Cards en 2 columnas */
  .cards-grid{grid-template-columns:1fr 1fr;gap:10px;}
  .stat-value{font-size:22px;}

  /* Grid 2 columnas → 1 columna */
  .grid-2{grid-template-columns:1fr;}

  /* POS en columna */
  .pos-layout{grid-template-columns:1fr;height:auto;gap:16px;}
  .pos-cart{max-height:none;}
  .products-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;}

  /* Tablas con scroll horizontal */
  .panel{padding:16px;overflow:hidden;}
  .table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -16px;padding:0 16px;}
   table{min-width:0;width:100%;}
   th,td{white-space:nowrap;font-size:12px;padding:8px 10px;}
  .page-header{flex-direction:column;align-items:flex-start;}
  .page-header .btn{width:100%;}

  /* Ocultar columnas menos importantes en tablas */
  .hide-mobile{display:none!important;}

  /* Formularios: form-row en columna */
  .form-row{grid-template-columns:1fr;}

  /* Modal fullscreen en móvil */
  .modal{padding:20px;border-radius:12px 12px 0 0;position:fixed;bottom:0;left:0;right:0;width:100%;max-width:100%;max-height:85vh;margin:0;}
  .modal-bg{align-items:flex-end;padding:0;}

  /* Footer botones apilados */
  .modal-footer{flex-direction:column-reverse;}
  .modal-footer .btn{width:100%;justify-content:center;}

  /* Toast más compacto */
  .toast{bottom:16px;right:16px;left:16px;max-width:none;}

  /* Traza resumen en 3 columnas */
  .traza-resumen{gap:12px;}
  .traza-resumen-item{min-width:60px;}
  .traza-resumen-value{font-size:16px;}
}

/* ══════════════════════════════════════
   RESPONSIVE — MÓVIL PEQUEÑO (≤ 380px)
══════════════════════════════════════ */
@media (max-width:380px){
  .cards-grid{grid-template-columns:1fr;}
  .main{padding:12px;padding-top:52px;}
}