:root {
  --bg: #fdf6ff;
  --surface: #ffffff;
  --surface2: #f5edff;
  --border: #e8d5f5;
  --accent: #9b5de5;
  --accent2: #f15bb5;
  --accent3: #00bbf9;
  --accent4: #fee440;
  --accent5: #00f5d4;
  --text: #2d1b4e;
  --text2: #7a5a99;
  --success: #06d6a0;
  --warning: #f9c74f;
  --danger: #f94144;
  --st: #9b5de5;
  --in: #f15bb5;
  --ot: #00bbf9;
  --shadow: 0 4px 20px rgba(155,93,229,0.12);
  --radius: 16px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Nunito',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;}

/* Header */
header{
  background:linear-gradient(135deg,#9b5de5 0%,#f15bb5 60%,#fee440 100%);
  padding:24px 32px;
  display:flex;align-items:center;justify-content:space-between;
  box-shadow:0 4px 24px rgba(155,93,229,0.25);
  position:sticky;top:0;z-index:100;
}
.logo{font-family:'Fredoka One',cursive;font-size:1.9rem;color:#fff;letter-spacing:1px;text-shadow:2px 2px 0 rgba(0,0,0,0.15);}
.logo span{color:#fee440;}
.header-stats{display:flex;gap:16px;}
.hstat{background:rgba(255,255,255,0.22);border-radius:12px;padding:8px 16px;text-align:center;backdrop-filter:blur(8px);}
.hstat-n{font-family:'Fredoka One',cursive;font-size:1.3rem;color:#fff;}
.hstat-l{font-size:0.7rem;color:rgba(255,255,255,0.85);text-transform:uppercase;letter-spacing:.5px;}

/* Nav tabs */
.nav-tabs{
  display:flex;gap:8px;padding:20px 32px 0;
  border-bottom:2px solid var(--border);
  background:var(--surface);
  overflow-x: auto;
}
.tab-btn{
  font-family:'Fredoka One',cursive;font-size:1rem;
  padding:10px 24px;border:none;border-radius:12px 12px 0 0;cursor:pointer;
  background:var(--surface2);color:var(--text2);transition:all .2s;
  white-space: nowrap;
}
.tab-btn.active{color:#fff;}
.tab-btn[data-tab="inventario"].active{background:var(--accent);}
.tab-btn[data-tab="venta"].active{background:var(--accent2);}
.tab-btn[data-tab="dashboard"].active{background:var(--accent3);}
.tab-btn[data-tab="catalogos"].active{background:var(--warning); color: #000;}
.tab-btn[data-tab="descontinuados"].active{background:var(--danger);}

/* Main content */
main{padding:24px 32px;max-width:1600px;margin:0 auto;}
.panel{display:none;}
.panel.active{display:block;}

/* Filtros */
.filtros{
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;
  background:var(--surface);border-radius:var(--radius);
  padding:16px 20px;margin-bottom:20px;box-shadow:var(--shadow);
}
.filtros input, .filtros select{
  border:2px solid var(--border);border-radius:10px;
  padding:8px 14px;font-family:'Nunito',sans-serif;font-size:.9rem;
  color:var(--text);background:var(--bg);outline:none;transition:border .2s;
}
.filtros input:focus, .filtros select:focus{border-color:var(--accent);}
.filtros input{min-width:220px;flex:1;}
.btn{
  font-family:'Fredoka One',cursive;font-size:.95rem;
  padding:9px 20px;border:none;border-radius:10px;cursor:pointer;
  transition:all .2s;letter-spacing:.3px;
}
.btn-primary{background:var(--accent);color:#fff;}
.btn-primary:hover{background:#7c3aed;transform:translateY(-1px);}
.btn-success{background:var(--success);color:#fff;}
.btn-success:hover{background:#05b88c;}
.btn-danger{background:var(--danger);color:#fff;}
.btn-danger:hover{background:#d93235;}
.btn-sm{padding:5px 12px;font-size:.82rem;}
.btn-outline{background:transparent;border:2px solid var(--accent);color:var(--accent);}
.btn-outline.active{background:var(--accent);color:#fff;}

/* Tabla inventario */
.tabla-wrap{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);overflow-x:auto;}
table{width:100%;border-collapse:collapse;font-size:.875rem;}
thead tr{background:linear-gradient(135deg,var(--accent),var(--accent2));}
thead th{color:#fff;padding:12px 14px;text-align:left;font-weight:700;font-size:.8rem;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;}
tbody tr{border-bottom:1px solid var(--border);transition:background .15s;}
tbody tr:hover{background:var(--surface2);}
tbody td{padding:10px 14px;vertical-align:middle;}

/* Badges */
.badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.3px;}
.badge-st{background:#ede7ff;color:var(--st);}
.badge-in{background:#fde7f5;color:var(--in);}
.badge-ot{background:#e3f6ff;color:var(--ot);}
.badge-completa{background:#e8fdf5;color:#059669;}
.badge-desc{background:#fee2e2;color:#dc2626;}
.badge-surtir{background:#fff8e1;color:#b45309;}
.badge-dibujar{background:#ede7ff;color:#7c3aed;}

/* Stock indicador */
.stock-num{font-family:'Fredoka One',cursive;font-size:1.1rem;}
.stock-0{color:var(--danger);}
.stock-low{color:var(--warning);}
.stock-ok{color:var(--success);}

/* Precio */
.precio{font-family:'Fredoka One',cursive;color:var(--accent);}

/* Acciones tabla */
.actions{display:flex;gap:6px;}

/* PANEL VENTA */
.venta-grid{display:grid;grid-template-columns:1fr 380px;gap:24px;}
.prod-search-box{background:var(--surface);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);}
.prod-search-box h3{font-family:'Fredoka One',cursive;color:var(--accent2);margin-bottom:14px;font-size:1.2rem;}
.prod-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;max-height:500px;overflow-y:auto;padding-right:4px;}
.prod-card{
  background:var(--bg);border:2px solid var(--border);border-radius:12px;
  padding:14px;cursor:pointer;transition:all .2s;
}
.prod-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 4px 16px rgba(155,93,229,0.15);}
.prod-card.selected{border-color:var(--accent2);background:#fde7f5;}
.prod-card .pc-name{font-weight:700;font-size:.88rem;color:var(--text);margin-bottom:4px;}
.prod-card .pc-cve{font-size:.72rem;color:var(--text2);}
.prod-card .pc-precio{font-family:'Fredoka One',cursive;font-size:1.1rem;color:var(--accent);margin-top:6px;}
.prod-card .pc-stock{font-size:.75rem;margin-top:3px;}

/* Carrito */
.carrito{background:var(--surface);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);display:flex;flex-direction:column;}
.carrito h3{font-family:'Fredoka One',cursive;color:var(--accent2);margin-bottom:14px;font-size:1.2rem;}
.carrito-items{flex:1;max-height:340px;overflow-y:auto;margin-bottom:16px;}
.cart-item{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border);}
.cart-item-name{flex:1;font-size:.85rem;font-weight:700;}
.cart-item-sub{font-size:.72rem;color:var(--text2);}
.qty-ctrl{display:flex;align-items:center;gap:6px;}
.qty-btn{width:26px;height:26px;border:2px solid var(--border);border-radius:7px;background:var(--bg);cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;transition:all .15s;}
.qty-btn:hover{border-color:var(--accent);color:var(--accent);}
.qty-num{font-family:'Fredoka One',cursive;font-size:1rem;min-width:24px;text-align:center;}
.cart-item-total{font-family:'Fredoka One',cursive;color:var(--accent);font-size:.95rem;}
.cart-remove{color:var(--danger);cursor:pointer;font-size:.9rem;background:none;border:none;padding:2px 6px;}
.cart-empty{text-align:center;color:var(--text2);padding:40px 0;font-size:.9rem;}
.cart-totals{background:var(--surface2);border-radius:12px;padding:14px;}
.ct-row{display:flex;justify-content:space-between;align-items:center;padding:4px 0;}
.ct-row span:first-child{color:var(--text2);font-size:.85rem;}
.ct-row span:last-child{font-family:'Fredoka One',cursive;font-size:1rem;color:var(--text);}
.ct-total{font-size:1.2rem!important;color:var(--accent)!important;}
.venta-form{margin-top:14px;display:flex;flex-direction:column;gap:10px;}
.venta-form input, .venta-form select, .venta-form textarea{
  border:2px solid var(--border);border-radius:10px;
  padding:9px 14px;font-family:'Nunito',sans-serif;font-size:.88rem;outline:none;
  transition:border .2s;background:var(--bg);color:var(--text);
}
.venta-form input:focus, .venta-form select:focus, .venta-form textarea:focus{border-color:var(--accent2);}
.venta-form .form-row{display:flex;gap:10px;}
.venta-form .form-row > *{flex:1;}
.btn-vender{width:100%;font-size:1.1rem;padding:13px;background:linear-gradient(135deg,var(--accent2),var(--accent));color:#fff;border-radius:12px;border:none;font-family:'Fredoka One',cursive;cursor:pointer;transition:all .2s;}
.btn-vender:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(241,91,181,0.35);}
.btn-vender:disabled{opacity:.5;cursor:not-allowed;transform:none;}

/* Historial de ventas */
.historial{background:var(--surface);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);margin-top:24px;}
.historial h3{font-family:'Fredoka One',cursive;color:var(--accent);margin-bottom:14px;}

/* DASHBOARD */
.dash-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:24px;}
.kpi-card{
  background:var(--surface);border-radius:var(--radius);padding:20px;
  box-shadow:var(--shadow);display:flex;flex-direction:column;gap:6px;
  border-top:4px solid transparent;
}
.kpi-card:nth-child(1){border-color:var(--accent);}
.kpi-card:nth-child(2){border-color:var(--accent2);}
.kpi-card:nth-child(3){border-color:var(--accent3);}
.kpi-card:nth-child(4){border-color:var(--success);}
.kpi-card:nth-child(5){border-color:var(--warning);}
.kpi-card:nth-child(6){border-color:var(--danger);}
.kpi-num{font-family:'Fredoka One',cursive;font-size:2rem;color:var(--text);}
.kpi-label{font-size:.78rem;color:var(--text2);text-transform:uppercase;letter-spacing:.5px;font-weight:700;}
.dash-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px;}
.dash-card{background:var(--surface);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);}
.dash-card h4{font-family:'Fredoka One',cursive;color:var(--accent);margin-bottom:14px;font-size:1.05rem;}
.top-item{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--border);}
.top-item:last-child{border:none;}
.top-rank{font-family:'Fredoka One',cursive;font-size:1.2rem;color:var(--accent2);min-width:30px;}
.top-info{flex:1;}
.top-name{font-weight:700;font-size:.88rem;}
.top-sub{font-size:.75rem;color:var(--text2);}
.top-val{font-family:'Fredoka One',cursive;color:var(--accent);}
.dist-bar{display:flex;height:20px;border-radius:10px;overflow:hidden;margin-bottom:8px;}
.dist-bar div{transition:width .4s;}
.dist-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:.8rem;}
.dist-dot{width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:5px;}

/* Modal */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(45,27,78,0.5);z-index:999;align-items:center;justify-content:center;backdrop-filter:blur(4px);}
.modal-overlay.show{display:flex;}
.modal{background:#fff;border-radius:20px;padding:28px;max-width:500px;width:95%;box-shadow:0 20px 60px rgba(155,93,229,0.3);animation:popIn .25s ease;}
@keyframes popIn{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}
.modal h3{font-family:'Fredoka One',cursive;font-size:1.3rem;margin-bottom:16px;color:var(--accent);}
.modal-form{display:flex;flex-direction:column;gap:12px;}
.modal-form label{font-size:.85rem;font-weight:700;color:var(--text2);display:block;margin-bottom:3px;}
.modal-form input, .modal-form select{
  width:100%;border:2px solid var(--border);border-radius:10px;
  padding:9px 14px;font-family:'Nunito',sans-serif;font-size:.9rem;outline:none;transition:border .2s;
}
.modal-form input:focus, .modal-form select:focus{border-color:var(--accent);}
.modal-actions{display:flex;gap:10px;margin-top:8px;}
.modal-actions .btn{flex:1;}

/* Toast */
.toast{
  position:fixed;bottom:24px;right:24px;z-index:9999;
  background:#fff;border-radius:14px;padding:14px 20px;
  box-shadow:0 8px 32px rgba(155,93,229,0.25);
  display:flex;align-items:center;gap:10px;font-weight:700;
  transform:translateY(100px);opacity:0;transition:all .3s;max-width:320px;
  border-left:4px solid var(--success);
}
.toast.show{transform:translateY(0);opacity:1;}
.toast.error{border-color:var(--danger);}
.toast-icon{font-size:1.3rem;}

/* Scrollbar */
::-webkit-scrollbar{width:6px;height:6px;}
::-webkit-scrollbar-track{background:var(--border);border-radius:99px;}
::-webkit-scrollbar-thumb{background:var(--accent);border-radius:99px;}

/* Responsive */
@media(max-width:900px){
  header{flex-direction:column;gap:12px;padding:16px 20px;}
  .header-stats{flex-wrap:wrap;justify-content:center;}
  .nav-tabs{padding:12px 16px 0;overflow-x:auto;}
  main{padding:16px;}
  .venta-grid{grid-template-columns:1fr;}
  .dash-row{grid-template-columns:1fr;}
}

/* empty state */
.empty{text-align:center;padding:60px 20px;color:var(--text2);}
.empty-emoji{font-size:3rem;margin-bottom:12px;}
.empty p{font-size:.95rem;}

/* edit row highlight */
tbody tr.editing{background:var(--surface2)!important;}
.edit-input{border:1px solid var(--accent);border-radius:6px;padding:3px 6px;width:80px;font-family:'Nunito',sans-serif;font-size:.85rem;}
/* Nuevas pestañas */
.tab-btn[data-tab="reportes"].active{background:var(--success); color:#fff;}
.tab-btn[data-tab="config"].active{background:var(--danger); color:#fff;}

/* Toast warning */
.toast.warn{border-color:var(--warning);}

/* Ajuste mobile — carrito PRIMERO en POS */
@media(max-width:900px){
  .venta-grid{ flex-direction: column !important; }
  .venta-grid > div:first-child { order: 2; }
  .venta-grid > div:last-child  { order: 1; }
  .carrito { position: sticky; top: 0; z-index: 10; }
}

/* Reporte anual — tabla footer */
tfoot tr td { font-weight: 700; padding: 12px 14px; }

/* Tab eventos */
.tab-btn[data-tab="reportes"].active { background: var(--success); color: #fff; }
#btn-rep-eventos.active { background: var(--accent3); color: #000; }

/* Details expandible en modal evento */
details summary { user-select: none; }
details summary:hover { color: var(--accent); }
details[open] summary { color: var(--accent); }

/* Filas de evento clickeables */
tbody tr[onclick]:hover { background: var(--surface2) !important; cursor: pointer; }