/* ============================================================
   VentaCloud Pro v4 — Design System CSS
   Incluye: Admin panel + Tienda e-commerce estilo ML
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Brand */
  --brand:       #2563EB;
  --brand-dark:  #1D4ED8;
  --brand-light: #DBEAFE;
  --brand-50:    #EFF6FF;

  /* Grays */
  --g50:  #F9FAFB; --g100: #F3F4F6; --g200: #E5E7EB;
  --g300: #D1D5DB; --g400: #9CA3AF; --g500: #6B7280;
  --g600: #4B5563; --g700: #374151; --g800: #1F2937; --g900: #111827;

  /* Semantic */
  --green:  #16A34A; --green-l: #DCFCE7; --green-d: #15803D;
  --red:    #DC2626; --red-l:   #FEE2E2;
  --amber:  #D97706; --amber-l: #FEF3C7;
  --purple: #9333EA; --purple-l:#F3E8FF;
  --teal:   #0D9488;

  /* Shop brand - ML inspired */
  --ml-yellow:  #FFE600;
  --ml-blue:    #3483FA;
  --ml-bg:      #EDEDED;

  /* Spacing */
  --r:    6px;
  --r-lg: 12px;
  --r-xl: 18px;
  --sh:   0 1px 3px rgba(0,0,0,.08);
  --sh-m: 0 4px 16px rgba(0,0,0,.10);
  --sh-l: 0 8px 32px rgba(0,0,0,.12);

  /* Layout */
  --sidebar: 240px;
  --header:  60px;
  --font: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}

body { font-family: var(--font); color: var(--g800); background: var(--g50); line-height: 1.5; }
a { color: var(--brand); text-decoration: none; }
button { cursor: pointer; font-family: var(--font); border: none; background: none; }
img { max-width: 100%; display: block; }
input, select, textarea { font-family: var(--font); }

/* ── Scrollbar ──────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--g300); border-radius: 10px; }

/* ── Buttons ────────────────────────────────────────────────── */
.btn { display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:var(--r);font-size:14px;font-weight:500;transition:all .15s;white-space:nowrap;cursor:pointer; }
.btn-primary   { background:var(--brand);    color:#fff; border:none; }
.btn-primary:hover   { background:var(--brand-dark); transform:translateY(-1px); box-shadow:0 4px 12px rgba(37,99,235,.3); }
.btn-secondary { background:#fff; color:var(--g700); border:1px solid var(--g200); }
.btn-secondary:hover { background:var(--g50); border-color:var(--g300); }
.btn-success   { background:var(--green);  color:#fff; border:none; }
.btn-success:hover   { background:var(--green-d); }
.btn-danger    { background:var(--red);    color:#fff; border:none; }
.btn-amber     { background:var(--amber);  color:#fff; border:none; }
.btn-sm  { padding:5px 10px; font-size:13px; }
.btn-lg  { padding:12px 24px; font-size:15px; font-weight:600; }
.btn-full { width:100%;justify-content:center; }
.btn-icon { padding:7px; border-radius:var(--r); }
.btn:disabled { opacity:.5; cursor:not-allowed; transform:none!important; box-shadow:none!important; }

/* ── Forms ──────────────────────────────────────────────────── */
.form-group { margin-bottom:16px; }
.form-group label { display:block;font-size:13px;font-weight:600;color:var(--g700);margin-bottom:5px; }
.form-row   { display:grid;grid-template-columns:1fr 1fr;gap:12px; }
.form-row-3 { display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px; }
.input-wrap { position:relative; }
.input-wrap input { padding-left:36px!important; }
.input-wrap .inp-icon { position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--g400);pointer-events:none; }
.input-wrap .inp-toggle { position:absolute;right:11px;top:50%;transform:translateY(-50%);color:var(--g400);padding:4px;cursor:pointer;background:none;border:none; }
.input-wrap .inp-toggle:hover { color:var(--g700); }

input[type=text],input[type=number],input[type=email],input[type=password],input[type=search],select,textarea {
  width:100%;padding:9px 12px;border:1.5px solid var(--g200);border-radius:var(--r);font-size:14px;color:var(--g800);background:#fff;transition:border-color .15s,box-shadow .15s;outline:none;
}
input:focus,select:focus,textarea:focus { border-color:var(--brand);box-shadow:0 0 0 3px rgba(37,99,235,.1); }
input.error { border-color:var(--red)!important; }
textarea { resize:vertical;min-height:80px; }
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance:none; }
input[type=number] { -moz-appearance:textfield; }
.field-error { font-size:12px;color:var(--red);margin-top:4px;display:none; }
.field-error.show { display:block; }

/* ── Cards ──────────────────────────────────────────────────── */
.card { background:#fff;border-radius:var(--r-lg);border:1px solid var(--g200);padding:20px; }
.card-header { display:flex;align-items:center;justify-content:space-between;margin-bottom:16px; }
.card-title  { font-size:15px;font-weight:700;color:var(--g800); }

/* ── Alerts ─────────────────────────────────────────────────── */
.alert { padding:10px 14px;border-radius:var(--r);font-size:14px;margin-bottom:12px; }
.alert-error   { background:var(--red-l);  color:var(--red);  border:1px solid #FECACA; }
.alert-success { background:var(--green-l);color:var(--green);border:1px solid #BBF7D0; }
.alert-warning { background:var(--amber-l);color:var(--amber);border:1px solid #FDE68A; }
.alert-info    { background:var(--brand-light);color:var(--brand);border:1px solid #BFDBFE; }

/* ── Badges ─────────────────────────────────────────────────── */
.badge { display:inline-flex;align-items:center;padding:2px 8px;border-radius:100px;font-size:12px;font-weight:600; }
.badge-blue   { background:var(--brand-light); color:var(--brand-dark); }
.badge-green  { background:var(--green-l);     color:var(--green-d); }
.badge-red    { background:var(--red-l);       color:var(--red); }
.badge-amber  { background:var(--amber-l);     color:#92400E; }
.badge-gray   { background:var(--g100);        color:var(--g600); }
.badge-purple { background:var(--purple-l);    color:var(--purple); }
.role-superadmin { background:var(--purple-l); color:var(--purple); }
.role-admin      { background:var(--brand-light); color:var(--brand-dark); }
.role-vendedor   { background:var(--green-l);  color:var(--green-d); }

/* ── Tables ─────────────────────────────────────────────────── */
.table-wrapper { overflow-x:auto;border-radius:var(--r-lg);border:1px solid var(--g200);background:#fff; }
table { width:100%;border-collapse:collapse; }
thead { background:var(--g50); }
th { padding:11px 14px;text-align:left;font-size:11px;font-weight:700;color:var(--g500);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--g200);white-space:nowrap; }
td { padding:11px 14px;font-size:14px;color:var(--g700);border-bottom:1px solid var(--g100); }
tr:last-child td { border-bottom:none; }
tbody tr:hover { background:var(--g50); }

/* ── Modal ──────────────────────────────────────────────────── */
.modal-overlay { position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px;opacity:0;visibility:hidden;transition:all .2s; }
.modal-overlay.open { opacity:1;visibility:visible; }
.modal { background:#fff;border-radius:var(--r-xl);width:100%;max-width:520px;max-height:90vh;overflow-y:auto;box-shadow:var(--sh-l);transform:translateY(16px);transition:transform .2s; }
.modal-overlay.open .modal { transform:translateY(0); }
.modal-header { padding:16px 20px;border-bottom:1px solid var(--g100);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:#fff;z-index:1; }
.modal-title  { font-size:16px;font-weight:700; }
.modal-body   { padding:20px; }
.modal-footer { padding:14px 20px;border-top:1px solid var(--g100);display:flex;justify-content:flex-end;gap:8px; }
.close-btn { color:var(--g400);padding:4px;border-radius:6px;background:none;border:none;cursor:pointer;line-height:1; }
.close-btn:hover { color:var(--g700);background:var(--g100); }

/* ── Toast ──────────────────────────────────────────────────── */
.toast-container { position:fixed;bottom:24px;right:24px;z-index:9999;display:flex;flex-direction:column;gap:8px; }
.toast { background:var(--g900);color:#fff;padding:12px 16px;border-radius:var(--r);font-size:14px;box-shadow:var(--sh-l);display:flex;align-items:center;gap:8px;min-width:240px;max-width:360px;transform:translateY(80px);opacity:0;transition:all .3s; }
.toast.show { transform:translateY(0);opacity:1; }
.toast-success { background:#065F46; }
.toast-error   { background:#991B1B; }
.toast-warning { background:#92400E; }

/* ── Misc ───────────────────────────────────────────────────── */
.empty-state { text-align:center;padding:50px 20px;color:var(--g400); }
.empty-state svg { width:44px;height:44px;margin:0 auto 12px;opacity:.4; }
.empty-state h3 { font-size:16px;color:var(--g500);margin-bottom:6px; }
.empty-state p  { font-size:14px; }
.section-header { display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;gap:12px;flex-wrap:wrap; }
.divider { border:none;border-top:1px solid var(--g100);margin:16px 0; }
.font-mono { font-family:'Menlo','Courier New',monospace; }
.progress-bar  { height:6px;border-radius:10px;background:var(--g200);overflow:hidden; }
.progress-fill { height:100%;border-radius:10px;transition:width .4s; }
.live-dot { width:8px;height:8px;border-radius:50%;background:#22C55E;display:inline-block;animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1}50%{opacity:.3} }
.stock-critical { color:var(--red);font-weight:700; }
.stock-low      { color:var(--amber);font-weight:700; }
.stock-ok       { color:var(--green); }
.grid-2 { display:grid;grid-template-columns:1fr 1fr;gap:20px; }
.grid-3 { display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px; }
.stats-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:22px; }
.stat-card { background:#fff;border-radius:var(--r-lg);border:1px solid var(--g200);padding:18px;display:flex;align-items:flex-start;gap:14px; }
.stat-icon { width:44px;height:44px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0; }
.stat-value { font-size:22px;font-weight:800;color:var(--g900);line-height:1.1; }
.stat-change { font-size:12px;margin-top:4px; }
.stat-change.up { color:var(--green); }
.stat-change.down { color:var(--red); }
.tabs { display:flex;border-bottom:2px solid var(--g200);margin-bottom:20px; }
.tab-btn { padding:10px 16px;font-size:14px;font-weight:500;color:var(--g500);border-bottom:2px solid transparent;margin-bottom:-2px;background:none;border-top:none;border-left:none;border-right:none;cursor:pointer;transition:all .15s; }
.tab-btn:hover { color:var(--g700); }
.tab-btn.active { color:var(--brand);border-bottom-color:var(--brand); }
.search-bar { display:flex;align-items:center;gap:6px;background:#fff;border:1.5px solid var(--g200);border-radius:var(--r);padding:0 12px;flex:1;max-width:320px; }
.search-bar:focus-within { border-color:var(--brand); }
.search-bar input { border:none;padding:8px 4px;flex:1;font-size:14px;outline:none; }
.pagination { display:flex;gap:4px;flex-wrap:wrap;justify-content:center;margin-top:16px; }
.page-content { padding:24px;flex:1; }

/* ── Admin Layout ───────────────────────────────────────────── */
.app-layout { display:flex;min-height:100vh; }
.sidebar { width:var(--sidebar);background:var(--g900);color:#fff;display:flex;flex-direction:column;position:fixed;top:0;left:0;height:100vh;z-index:200;overflow-y:auto;transition:transform .25s; }
.sidebar-brand { padding:16px;border-bottom:1px solid rgba(255,255,255,.07);display:flex;align-items:center;gap:10px; }
.sidebar-brand-text h2 { font-size:14px;font-weight:800; }
.sidebar-brand-text p  { font-size:11px;color:var(--g400); }
.sidebar-nav { flex:1;padding:10px 0; }
.nav-section { padding:14px 14px 5px;font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--g500);text-transform:uppercase; }
.nav-item { display:flex;align-items:center;gap:9px;padding:9px 14px;color:var(--g400);font-size:13px;font-weight:500;transition:all .15s;border-radius:8px;margin:1px 8px;text-decoration:none; }
.nav-item:hover { color:#fff;background:rgba(255,255,255,.06); }
.nav-item.active { color:#fff;background:var(--brand); }
.nav-item .nav-badge { background:#EF4444;color:#fff;border-radius:100px;font-size:10px;font-weight:700;padding:1px 6px;margin-left:auto; }
.sidebar-user { padding:12px 14px;border-top:1px solid rgba(255,255,255,.07);display:flex;align-items:center;gap:10px; }
.user-avatar { width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;flex-shrink:0; }
.user-info p:first-child { font-size:13px;font-weight:600;color:#fff; }
.user-info p:last-child  { font-size:11px;color:var(--g400); }
.logout-btn { margin-left:auto;color:var(--g500);padding:4px;background:none;border:none;cursor:pointer; }
.logout-btn:hover { color:#f87171; }
.main-content { margin-left:var(--sidebar);flex:1;display:flex;flex-direction:column;min-height:100vh; }
.top-header { height:var(--header);background:#fff;border-bottom:1px solid var(--g200);display:flex;align-items:center;justify-content:space-between;padding:0 24px;position:sticky;top:0;z-index:100; }
.hamburger { display:none;padding:8px;color:var(--g600);background:none;border:none;cursor:pointer; }
.sidebar-overlay { display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:190; }
.sidebar-overlay.open { display:block; }
.topbar-back { display:flex;align-items:center;gap:5px;font-size:13px;color:var(--g500);cursor:pointer;padding:5px 9px;border-radius:var(--r);border:none;background:none;transition:all .15s; }
.topbar-back:hover { background:var(--g100);color:var(--g800); }
.page-header { margin-bottom:22px; }
.page-header h1 { font-size:22px;font-weight:800;color:var(--g900); }
.page-header p  { font-size:14px;color:var(--g500);margin-top:3px; }
.user-menu-btn { display:flex;align-items:center;gap:8px;padding:5px 10px;border-radius:8px;cursor:pointer;border:none;background:none;font-family:inherit; }
.user-menu-btn:hover { background:var(--g100); }
.user-dropdown { position:absolute;top:calc(100% + 8px);right:0;background:#fff;border:1px solid var(--g200);border-radius:var(--r-lg);box-shadow:var(--sh-l);min-width:180px;z-index:999;display:none; }
.user-dropdown.open { display:block; }
.user-drop-item { display:flex;align-items:center;gap:8px;padding:10px 14px;font-size:13px;color:var(--g700);cursor:pointer;transition:background .1s;text-decoration:none; }
.user-drop-item:hover { background:var(--g50); }
.user-drop-item.danger { color:var(--red); }

/* ══════════════════════════════════════════════════════════════
   TIENDA E-COMMERCE (ML-inspired)
   ══════════════════════════════════════════════════════════════ */

/* ── Shop header ────────────────────────────────────────────── */
.shop-header { background:var(--brand);position:sticky;top:0;z-index:500;box-shadow:0 2px 8px rgba(0,0,0,.15); }
.shop-header-top { display:flex;align-items:center;gap:16px;padding:10px 24px;max-width:1280px;margin:0 auto; }
.shop-logo { display:flex;align-items:center;gap:8px;color:#fff;font-size:18px;font-weight:900;letter-spacing:-.5px;white-space:nowrap;text-decoration:none; }
.shop-logo .logo-icon { background:#fff;color:var(--brand);width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px; }
.shop-search { flex:1;max-width:600px;display:flex; }
.shop-search input { flex:1;padding:10px 16px;border:none;border-radius:6px 0 0 6px;font-size:14px;outline:none; }
.shop-search button { padding:10px 18px;background:var(--ml-yellow);border:none;border-radius:0 6px 6px 0;cursor:pointer;font-weight:700;font-size:14px;color:var(--g800);transition:background .15s; }
.shop-search button:hover { background:#FFD700; }
.shop-header-actions { display:flex;align-items:center;gap:12px;flex-shrink:0; }
.shop-action-btn { display:flex;flex-direction:column;align-items:center;gap:2px;color:rgba(255,255,255,.9);font-size:11px;font-weight:500;cursor:pointer;padding:4px 8px;border-radius:6px;transition:background .15s;text-decoration:none;background:none;border:none; }
.shop-action-btn:hover { background:rgba(255,255,255,.15);color:#fff; }
.shop-action-btn svg { width:22px;height:22px; }
.cart-bubble { position:relative; }
.cart-bubble-count { position:absolute;top:-6px;right:-6px;background:#FF4444;color:#fff;border-radius:100px;font-size:10px;font-weight:800;min-width:18px;height:18px;display:flex;align-items:center;justify-content:center;padding:0 3px; }

.shop-nav { background:rgba(0,0,0,.15);border-top:1px solid rgba(255,255,255,.1); }
.shop-nav-inner { max-width:1280px;margin:0 auto;padding:0 24px;display:flex;gap:0;overflow-x:auto; }
.shop-nav-link { color:rgba(255,255,255,.85);font-size:13px;padding:9px 14px;white-space:nowrap;cursor:pointer;border-bottom:2px solid transparent;transition:all .15s;text-decoration:none;background:none;border-top:none;border-left:none;border-right:none; }
.shop-nav-link:hover,.shop-nav-link.active { color:#fff;border-bottom-color:#fff; }

/* ── Shop layout ────────────────────────────────────────────── */
.shop-body { background:var(--ml-bg);min-height:calc(100vh - 110px); }
.shop-container { max-width:1280px;margin:0 auto;padding:20px 24px; }
.shop-layout { display:grid;grid-template-columns:240px 1fr;gap:16px; }

/* ── Sidebar filtros ────────────────────────────────────────── */
.shop-sidebar { display:flex;flex-direction:column;gap:12px; }
.filter-card { background:#fff;border-radius:var(--r-lg);padding:16px;border:1px solid var(--g200); }
.filter-title { font-size:14px;font-weight:700;color:var(--g800);margin-bottom:12px;display:flex;align-items:center;gap:6px; }
.filter-option { display:flex;align-items:center;gap:8px;padding:6px 0;cursor:pointer;font-size:13px;color:var(--g700); }
.filter-option:hover { color:var(--brand); }
.filter-option input[type=radio],
.filter-option input[type=checkbox] { width:16px;height:16px;accent-color:var(--brand);cursor:pointer;flex-shrink:0; }
.price-inputs { display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px; }
.price-inputs input { padding:7px 10px;font-size:13px;width:100%; }
.filter-apply { width:100%;padding:8px;margin-top:10px;background:var(--brand);color:#fff;border:none;border-radius:var(--r);font-size:13px;font-weight:600;cursor:pointer;transition:background .15s; }
.filter-apply:hover { background:var(--brand-dark); }
.active-filters { display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px; }
.filter-tag { background:var(--brand-light);color:var(--brand-dark);padding:3px 10px;border-radius:100px;font-size:12px;font-weight:500;display:flex;align-items:center;gap:4px;cursor:pointer; }
.filter-tag:hover { background:#BFDBFE; }

/* ── Productos grid ─────────────────────────────────────────── */
.shop-toolbar { display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap;gap:8px; }
.shop-count { font-size:13px;color:var(--g500); }
.shop-sort  { display:flex;align-items:center;gap:8px;font-size:13px;color:var(--g600); }
.shop-sort select { border:1px solid var(--g200);border-radius:var(--r);padding:5px 10px;font-size:13px;cursor:pointer;width:auto; }

.product-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px; }
.prod-card-shop { background:#fff;border-radius:var(--r-lg);border:1px solid var(--g200);overflow:hidden;cursor:pointer;transition:all .2s;display:flex;flex-direction:column; }
.prod-card-shop:hover { box-shadow:var(--sh-m);transform:translateY(-2px);border-color:var(--g300); }
.prod-img-wrap { aspect-ratio:1;background:var(--g50);display:flex;align-items:center;justify-content:center;font-size:70px;padding:20px;position:relative;overflow:hidden; }
.prod-img-wrap img { width:100%;height:100%;object-fit:contain; }
.prod-badge-stock { position:absolute;top:8px;left:8px;background:var(--red);color:#fff;font-size:10px;font-weight:700;padding:2px 7px;border-radius:100px; }
.prod-badge-new   { position:absolute;top:8px;left:8px;background:var(--green);color:#fff;font-size:10px;font-weight:700;padding:2px 7px;border-radius:100px; }
.prod-info { padding:12px;flex:1;display:flex;flex-direction:column;gap:4px; }
.prod-brand-tag { font-size:11px;color:var(--g400);text-transform:uppercase;letter-spacing:.04em; }
.prod-name  { font-size:14px;font-weight:600;color:var(--g800);line-height:1.35;flex:1; }
.prod-price { font-size:20px;font-weight:800;color:var(--g900); }
.prod-price-old { font-size:12px;color:var(--g400);text-decoration:line-through; }
.prod-discount  { font-size:12px;color:var(--green);font-weight:700; }
.prod-stock-tag { font-size:11px;color:var(--g400);margin-top:2px; }
.prod-stock-tag.low { color:var(--amber);font-weight:600; }
.prod-add-btn { width:100%;padding:9px;background:var(--brand);color:#fff;border:none;border-radius:0 0 var(--r-lg) var(--r-lg);font-size:13px;font-weight:700;cursor:pointer;transition:background .15s; }
.prod-add-btn:hover { background:var(--brand-dark); }
.prod-add-btn:disabled { background:var(--g300);cursor:not-allowed; }
.prod-add-btn.added { background:var(--green); }

/* ── Product detail ─────────────────────────────────────────── */
.prod-detail { background:#fff;border-radius:var(--r-xl);padding:24px;display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-bottom:20px;border:1px solid var(--g200); }
.prod-detail-img { background:var(--g50);border-radius:var(--r-lg);display:flex;align-items:center;justify-content:center;font-size:120px;aspect-ratio:1;padding:20px; }
.prod-detail-info { display:flex;flex-direction:column;gap:12px; }
.prod-detail-price { font-size:32px;font-weight:900;color:var(--g900); }
.prod-detail-desc  { font-size:14px;color:var(--g600);line-height:1.7; }
.qty-selector { display:flex;align-items:center;gap:10px; }
.qty-selector .qty-btn { width:36px;height:36px;border-radius:50%;border:1.5px solid var(--g300);background:#fff;font-size:18px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--g700);transition:all .1s; }
.qty-selector .qty-btn:hover { border-color:var(--brand);color:var(--brand); }
.qty-selector .qty-val { font-size:18px;font-weight:700;min-width:32px;text-align:center; }

/* ── Cart sidebar ───────────────────────────────────────────── */
.cart-drawer { position:fixed;top:0;right:0;height:100vh;width:400px;background:#fff;z-index:600;box-shadow:-4px 0 24px rgba(0,0,0,.15);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .3s ease; }
.cart-drawer.open { transform:translateX(0); }
.cart-drawer-overlay { position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:599;display:none; }
.cart-drawer-overlay.open { display:block; }
.cart-drawer-head { padding:16px 20px;border-bottom:1px solid var(--g100);display:flex;align-items:center;justify-content:space-between; }
.cart-drawer-title { font-size:17px;font-weight:800; }
.cart-drawer-body { flex:1;overflow-y:auto;padding:12px 0; }
.cart-drawer-item { padding:12px 20px;display:flex;gap:12px;border-bottom:1px solid var(--g50); }
.cart-drawer-item-img { width:60px;height:60px;background:var(--g50);border-radius:var(--r);display:flex;align-items:center;justify-content:center;font-size:30px;flex-shrink:0; }
.cart-drawer-item-info { flex:1;min-width:0; }
.cart-drawer-item-name  { font-size:13px;font-weight:600;color:var(--g800);line-height:1.35;margin-bottom:4px; }
.cart-drawer-item-price { font-size:15px;font-weight:800;color:var(--brand); }
.cart-drawer-foot { padding:16px 20px;border-top:1px solid var(--g200); }
.cart-total-row { display:flex;justify-content:space-between;font-size:18px;font-weight:800;margin-bottom:14px; }
.btn-checkout { width:100%;padding:14px;background:var(--ml-yellow);color:var(--g900);border:none;border-radius:var(--r-lg);font-size:16px;font-weight:800;cursor:pointer;transition:all .15s; }
.btn-checkout:hover { background:#FFD700;transform:translateY(-1px);box-shadow:0 4px 14px rgba(255,230,0,.5); }

/* ── Checkout ───────────────────────────────────────────────── */
.checkout-steps { display:flex;gap:0;margin-bottom:24px;overflow-x:auto; }
.checkout-step { flex:1;text-align:center;position:relative;padding:12px 8px; }
.checkout-step::after { content:'';position:absolute;top:20px;left:50%;width:100%;height:2px;background:var(--g200); }
.checkout-step:last-child::after { display:none; }
.step-circle { width:32px;height:32px;border-radius:50%;border:2px solid var(--g300);background:#fff;color:var(--g400);font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;margin:0 auto 6px;position:relative;z-index:1; }
.step-label { font-size:12px;color:var(--g500);font-weight:500; }
.checkout-step.done .step-circle { background:var(--green);border-color:var(--green);color:#fff; }
.checkout-step.done::after { background:var(--green); }
.checkout-step.active .step-circle { background:var(--brand);border-color:var(--brand);color:#fff; }
.checkout-step.active .step-label { color:var(--brand);font-weight:700; }
.checkout-layout { display:grid;grid-template-columns:1fr 360px;gap:20px; }
.order-summary { background:#fff;border-radius:var(--r-xl);border:1px solid var(--g200);padding:20px;position:sticky;top:80px; }

/* ── Payment ────────────────────────────────────────────────── */
.pay-method-grid { display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px; }
.pay-method-btn { padding:14px;border:2px solid var(--g200);border-radius:var(--r-lg);background:#fff;cursor:pointer;text-align:center;transition:all .15s;font-family:inherit; }
.pay-method-btn:hover { border-color:var(--brand);background:var(--brand-50); }
.pay-method-btn.sel { border-color:var(--brand);background:var(--brand-50); }
.pay-method-btn .pm-icon { font-size:28px;display:block;margin-bottom:5px; }
.pay-method-btn .pm-name { font-size:13px;font-weight:700;color:var(--g700); }
.pay-method-btn .pm-sub  { font-size:11px;color:var(--g400);margin-top:2px; }
.card-input-group { display:grid;grid-template-columns:1fr;gap:10px; }
.card-number-wrap { position:relative; }
.card-brand-icon  { position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:20px; }
.paypal-btn-wrap { display:flex;flex-direction:column;align-items:center;gap:12px;padding:20px;background:var(--g50);border-radius:var(--r-lg);border:1px solid var(--g200); }
.paypal-logo { font-size:28px;font-weight:900;color:#003087; }
.paypal-logo span { color:#009cde; }
.btn-paypal { background:#FFD140;border:none;border-radius:100px;padding:12px 32px;font-size:15px;font-weight:800;cursor:pointer;color:#1E1E1E;display:flex;align-items:center;gap:8px;transition:all .15s; }
.btn-paypal:hover { background:#F5C518;transform:translateY(-1px); }

/* ── Order success ──────────────────────────────────────────── */
.order-success { text-align:center;padding:48px 24px; }
.success-icon  { width:80px;height:80px;background:var(--green-l);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;font-size:36px; }

/* ── Responsive ─────────────────────────────────────────────── */
@media(max-width:1100px){
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .shop-layout { grid-template-columns:200px 1fr; }
  .checkout-layout { grid-template-columns:1fr; }
}
@media(max-width:900px){
  .shop-layout { grid-template-columns:1fr; }
  .shop-sidebar { display:none; }
  .shop-sidebar.open { display:flex; }
  .prod-detail { grid-template-columns:1fr; }
  .grid-2,.grid-3 { grid-template-columns:1fr; }
}
@media(max-width:768px){
  .sidebar { transform:translateX(-100%); }
  .sidebar.open { transform:translateX(0); }
  .main-content { margin-left:0; }
  .hamburger { display:flex; }
  .stats-grid { grid-template-columns:1fr 1fr; }
  .form-row,.form-row-3 { grid-template-columns:1fr; }
  .shop-header-top { gap:10px;padding:10px 16px; }
  .shop-logo { font-size:15px; }
  .cart-drawer { width:100%; }
  .page-content { padding:16px; }
  .checkout-layout { grid-template-columns:1fr; }
  .top-header { padding:0 12px;gap:8px; }
  .top-header > div:first-child { min-width:0;overflow:hidden; }
  .top-header span[style*="font-weight:700"] { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
  .topbar-back { padding:5px 6px; }
  .page-header h1 { font-size:18px; }
  .img-grid { grid-template-columns:repeat(2,1fr)!important; }
}
@media(max-width:480px){
  .stats-grid { grid-template-columns:1fr; }
  .product-grid { grid-template-columns:1fr 1fr; }
  .topbar-back span { display:none; }
}


/* ══════════════════════════════════════════════════════════════
   ALIAS DE PALETA (compatibilidad) — dashboard.php, reportes.php y
   usuarios.php usaban var(--gray-500), var(--blue-600), etc. que
   nunca estaban definidas (bug preexistente: bordes/textos con
   color inválido). Se definen aquí y quedan disponibles también
   para el modo oscuro.
   ══════════════════════════════════════════════════════════════ */
:root{
  --gray-50:#F9FAFB; --gray-100:#F3F4F6; --gray-200:#E5E7EB; --gray-300:#D1D5DB;
  --gray-400:#9CA3AF; --gray-500:#6B7280; --gray-600:#4B5563; --gray-700:#374151;
  --gray-800:#1F2937; --gray-900:#111827;
  --blue-500:#3B82F6; --blue-600:#2563EB;
  --green-500:#22C55E; --green-600:#16A34A; --green-700:#15803D;
  --red-500:#EF4444; --red-600:#DC2626;
  --purple-500:#A855F7;
  --amber-600:#D97706; --amber-700:#B45309;
  --surface:#FFFFFF;
}

/* ══════════════════════════════════════════════════════════════
   MODO OSCURO — admin (toggle vía [data-theme="dark"] en <html>)
   Paleta optimizada para contraste (no es una inversión cruda de
   colores): fondo casi negro azulado, texto gris muy claro, y los
   colores de marca/semánticos (verde, rojo, ámbar) se mantienen
   para no perder significado visual.
   ══════════════════════════════════════════════════════════════ */
[data-theme="dark"]{
  --g50:#12151C; --g100:#181C25; --g200:#252A35; --g300:#38404E;
  --g400:#5B6472; --g500:#8890A0; --g600:#AEB6C2; --g700:#CBD2DB;
  --g800:#E4E8EE; --g900:#F5F7FA;
  --gray-50:#12151C; --gray-100:#181C25; --gray-200:#252A35; --gray-300:#38404E;
  --gray-400:#5B6472; --gray-500:#8890A0; --gray-600:#AEB6C2; --gray-700:#CBD2DB;
  --gray-800:#E4E8EE; --gray-900:#F5F7FA;
  --brand-light:#1B2E4A; --brand-50:#16202E;
  --green-l:#0F2A1C; --red-l:#3A1414; --amber-l:#3A2A0A; --purple-l:#2A1B3D;
  --surface:#181C25;
  color-scheme: dark;
}
[data-theme="dark"] body{ background:var(--g50); color:var(--g900); }
[data-theme="dark"] .card,
[data-theme="dark"] .modal,
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer,
[data-theme="dark"] .kpi-card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .table-wrapper,
[data-theme="dark"] .top-header,
[data-theme="dark"] .user-dropdown,
[data-theme="dark"] .filter-card,
[data-theme="dark"] .search-bar,
[data-theme="dark"] .sidebar-overlay ~ .main-content .card{
  background:var(--surface); border-color:var(--g200);
}
[data-theme="dark"] thead{ background:var(--g100); }
[data-theme="dark"] input[type=text],[data-theme="dark"] input[type=number],
[data-theme="dark"] input[type=email],[data-theme="dark"] input[type=password],
[data-theme="dark"] input[type=search],[data-theme="dark"] input[type=date],
[data-theme="dark"] select,[data-theme="dark"] textarea{
  background:var(--surface); color:var(--g900); border-color:var(--g300);
}
[data-theme="dark"] input::placeholder,[data-theme="dark"] textarea::placeholder{ color:var(--g400); }
[data-theme="dark"] .btn-secondary{ background:var(--g100); color:var(--g800); border-color:var(--g300); }
[data-theme="dark"] .empty-state{ color:var(--g500); }
[data-theme="dark"] tbody tr:hover{ background:var(--g100); }
[data-theme="dark"] .divider{ border-color:var(--g200); }
[data-theme="dark"] .btn-print{ background:var(--surface); color:var(--g700); border-color:var(--g300); }
[data-theme="dark"] .periodo-btn{ background:var(--surface); color:var(--g600); border-color:var(--g300); }
[data-theme="dark"] .chart-bar[style*="background:#E5E7EB"]{ background:var(--g300)!important; }

/* Botón de alternar tema */
.theme-toggle{ display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; border:1px solid var(--g200); background:var(--surface,#fff); color:var(--g600); cursor:pointer; transition:all .15s; flex-shrink:0; }
.theme-toggle:hover{ background:var(--g100); color:var(--brand); }
.theme-toggle svg{ width:17px; height:17px; }