*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:16px; }
body { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; background:#f0f2f5; color:#1a1a2e; min-height:100vh; }

a { color:#2563eb; text-decoration:none; }
a:hover { text-decoration:underline; }

/* Layout */
.layout { display:flex; min-height:100vh; }
.sidebar { width:240px; background:#1a1a2e; color:#fff; padding:24px 0; flex-shrink:0; position:sticky; top:0; height:100vh; overflow-y:auto; }
.sidebar h1 { font-size:18px; padding:0 20px 24px; border-bottom:1px solid rgba(255,255,255,0.1); margin-bottom:8px; }
.sidebar h1 span { color:#60a5fa; }
.sidebar nav a { display:block; padding:10px 20px; color:rgba(255,255,255,0.7); font-size:14px; transition:all 0.2s; }
.sidebar nav a:hover, .sidebar nav a.active { background:rgba(255,255,255,0.08); color:#fff; text-decoration:none; }
.sidebar nav a.active { border-left:3px solid #60a5fa; }
.main { flex:1; padding:24px 32px; max-width:1200px; }

/* Header */
.page-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; }
.page-header h2 { font-size:24px; font-weight:600; }

/* Cards */
.card { background:#fff; border-radius:12px; padding:20px; box-shadow:0 1px 3px rgba(0,0,0,0.06); margin-bottom:16px; }
.card-header { font-size:14px; font-weight:600; color:#64748b; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:12px; }

/* Stats grid */
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; margin-bottom:24px; }
.stat-card { background:#fff; border-radius:12px; padding:20px; box-shadow:0 1px 3px rgba(0,0,0,0.06); }
.stat-card .label { font-size:13px; color:#64748b; margin-bottom:4px; }
.stat-card .value { font-size:28px; font-weight:700; color:#1a1a2e; }
.stat-card .value.green { color:#10b981; }
.stat-card .value.blue { color:#2563eb; }
.stat-card .value.orange { color:#f59e0b; }

/* Tables */
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; }
th, td { text-align:left; padding:10px 12px; font-size:14px; border-bottom:1px solid #f1f5f9; }
th { font-weight:600; color:#64748b; text-transform:uppercase; font-size:12px; letter-spacing:0.5px; }
tr:hover td { background:#f8fafc; }
td .precio { font-weight:600; color:#10b981; }

/* Buttons */
.btn { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border-radius:8px; font-size:14px; font-weight:500; border:none; cursor:pointer; transition:all 0.2s; text-decoration:none; }
.btn:hover { text-decoration:none; }
.btn-primary { background:#2563eb; color:#fff; }
.btn-primary:hover { background:#1d4ed8; }
.btn-success { background:#10b981; color:#fff; }
.btn-success:hover { background:#059669; }
.btn-danger { background:#ef4444; color:#fff; }
.btn-danger:hover { background:#dc2626; }
.btn-outline { background:transparent; border:1px solid #d1d5db; color:#374151; }
.btn-outline:hover { background:#f9fafb; }
.btn-sm { padding:4px 10px; font-size:12px; }
.btn-group { display:flex; gap:8px; }

/* Forms */
.form-group { margin-bottom:16px; }
.form-group label { display:block; font-size:13px; font-weight:600; color:#374151; margin-bottom:4px; }
.form-control { width:100%; padding:10px 12px; border:1px solid #d1d5db; border-radius:8px; font-size:14px; transition:border 0.2s; }
.form-control:focus { outline:none; border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,0.1); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-hint { font-size:12px; color:#94a3b8; margin-top:4px; }
select.form-control { background:#fff; }

/* Alerts */
.alert { padding:12px 16px; border-radius:8px; font-size:14px; margin-bottom:16px; }
.alert-success { background:#d1fae5; color:#065f46; }
.alert-error { background:#fee2e2; color:#991b1b; }
.alert-info { background:#dbeafe; color:#1e40af; }

/* Badge */
.badge { display:inline-block; padding:2px 8px; border-radius:12px; font-size:11px; font-weight:600; }
.badge-stock { background:#dbeafe; color:#1e40af; }
.badge-sin-precio { background:#fef3c7; color:#92400e; }
.badge-inactivo { background:#f1f5f9; color:#64748b; }
.badge-pendiente { background:#fef3c7; color:#92400e; }
.badge-pagado { background:#d1fae5; color:#065f46; }
.badge-enviado { background:#dbeafe; color:#1e40af; }
.badge-entregado { background:#d1fae5; color:#065f46; }
.badge-cancelado { background:#f1f5f9; color:#64748b; }

/* Product detail */
.prod-header { display:flex; gap:24px; margin-bottom:24px; }
.prod-img { width:300px; height:300px; border-radius:12px; object-fit:cover; background:#f1f5f9; flex-shrink:0; }
.prod-img-placeholder { width:300px; height:300px; border-radius:12px; background:#f1f5f9; display:flex; align-items:center; justify-content:center; color:#94a3b8; font-size:14px; }
.prod-info { flex:1; }
.prod-info h2 { font-size:22px; margin-bottom:4px; }
.prod-info .desc { color:#64748b; font-size:15px; margin-bottom:16px; }
.prod-meta { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.prod-meta dt { font-size:12px; color:#94a3b8; text-transform:uppercase; }
.prod-meta dd { font-size:16px; font-weight:600; }
.prod-actions { margin-top:20px; }

/* Price result */
.price-result { background:#f0fdf4; border:1px solid #bbf7d0; border-radius:12px; padding:20px; margin-top:16px; }
.price-result .final { font-size:36px; font-weight:800; color:#059669; }
.price-result .breakdown { margin-top:12px; font-size:14px; color:#374151; }
.price-result .breakdown div { display:flex; justify-content:space-between; padding:4px 0; border-bottom:1px solid #dcfce7; }
.price-result .breakdown .total { font-weight:700; border-top:2px solid #059669; padding-top:8px; margin-top:4px; }

/* Import page */
.import-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.import-card { background:#fff; border:2px dashed #d1d5db; border-radius:12px; padding:24px; text-align:center; cursor:pointer; transition:all 0.2s; }
.import-card:hover { border-color:#2563eb; background:#f8fafc; }
.import-card .icon { font-size:40px; margin-bottom:8px; }
.import-card h3 { font-size:16px; margin-bottom:4px; }
.import-card p { font-size:13px; color:#64748b; }

/* Candidates */
.candidate { display:flex; gap:16px; padding:12px 0; border-bottom:1px solid #f1f5f9; }
.candidate:last-child { border-bottom:none; }
.candidate img { width:80px; height:80px; border-radius:8px; object-fit:cover; }
.candidate-info { flex:1; }
.candidate-info h4 { font-size:15px; }
.candidate-info p { font-size:13px; color:#64748b; }

/* Product grid for catalog view */
.prod-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; }
.prod-grid .item { background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,0.06); transition:transform 0.2s; }
.prod-grid .item:hover { transform:translateY(-2px); }
.prod-grid .item img { width:100%; height:200px; object-fit:cover; }
.prod-grid .item .info { padding:12px; }
.prod-grid .item h4 { font-size:14px; margin-bottom:4px; }
.prod-grid .item .precio { font-size:18px; font-weight:700; color:#10b981; }

/* Responsive */
@media(max-width:768px) {
  .sidebar { width:60px; }
  .sidebar h1 { font-size:0; padding:16px; }
  .sidebar h1::after { content:"⚡"; font-size:20px; }
  .sidebar nav a { padding:10px; text-align:center; font-size:0; }
  .sidebar nav a::before { font-size:14px; }
  .main { padding:16px; }
  .form-row { grid-template-columns:1fr; }
  .prod-header { flex-direction:column; }
  .prod-img, .prod-img-placeholder { width:100%; height:auto; aspect-ratio:1; }
  .stats { grid-template-columns:1fr 1fr; }
  .import-grid { grid-template-columns:1fr; }
}

/* Toast notification */
.toast { position:fixed; bottom:24px; right:24px; padding:12px 20px; border-radius:8px; color:#fff; font-size:14px; font-weight:500; z-index:999; animation:slideIn 0.3s ease; }
.toast-success { background:#10b981; }
.toast-error { background:#ef4444; }
@keyframes slideIn { from { transform:translateY(20px); opacity:0; } to { transform:translateY(0); opacity:1; } }