/* ── Light Theme (default) ── */
:root {
  --bg: #f5f5f0;
  --sidebar-bg: #1a1d23;
  --card: #ffffff;
  --card-hover: #fafafa;
  --green: #8BC53F;
  --green-soft: rgba(139,197,63,.12);
  --blue: #2C3545;
  --cyan: #06b6d4;
  --purple: #a855f7;
  --orange: #f59e0b;
  --red: #ef4444;
  --text: #1f2937;
  --text2: #6b7280;
  --text3: #6d7280;
  --border: #e5e7eb;
  --input-bg: #ffffff;
  --input-border: #d1d5db;
  --radius: 14px;
  --shadow: 0 1px 3px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.03);
  --transition: .25s cubic-bezier(.4,0,.2,1);
  --modal-bg: rgba(0,0,0,.4);
  --chip-bg: #f3f4f6;
  --table-stripe: transparent;
  --scrollbar-track: #f1f1f1;
  --scrollbar-thumb: #c1c1c1;
}

/* ── Dark Theme ── */
[data-theme="dark"] {
  --bg: #0f1117;
  --sidebar-bg: #161920;
  --card: #1c1f2a;
  --card-hover: #242736;
  --green: #8BC53F;
  --green-soft: rgba(139,197,63,.15);
  --blue: #c8d1e0;
  --text: #e5e7eb;
  --text2: #9ca3af;
  --text3: #6b7280;
  --border: #2d3244;
  --input-bg: #242736;
  --input-border: #3d4255;
  --shadow: 0 1px 3px rgba(0,0,0,.2), 0 4px 16px rgba(0,0,0,.15);
  --modal-bg: rgba(0,0,0,.65);
  --chip-bg: #2d3244;
  --table-stripe: rgba(255,255,255,.02);
  --scrollbar-track: #1c1f2a;
  --scrollbar-thumb: #3d4255;
}
[data-theme="dark"] .badge-green { background:rgba(139,197,63,.2);color:#a8e05f; }
[data-theme="dark"] .badge-blue { background:rgba(200,209,224,.12);color:#c8d1e0; }
[data-theme="dark"] .badge-cyan { background:rgba(6,182,212,.15);color:#22d3ee; }
[data-theme="dark"] .badge-purple { background:rgba(168,85,247,.15);color:#c084fc; }
[data-theme="dark"] .badge-orange { background:rgba(245,158,11,.15);color:#fbbf24; }
[data-theme="dark"] .badge-red { background:rgba(239,68,68,.15);color:#f87171; }

* { margin:0; padding:0; box-sizing:border-box; }
html { font-size:14px; }
body {
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:var(--bg);
  color:var(--text);
  display:flex;
  height:100vh;
  overflow:hidden;
  transition: background var(--transition), color var(--transition);
}

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

/* ── Sidebar ── */
.sidebar {
  width:240px; min-width:240px;
  background:var(--sidebar-bg); color:#fff;
  display:flex; flex-direction:column;
  padding:1.5rem 1rem; z-index:10;
  transition: background var(--transition);
}
.logo { display:flex; align-items:center; gap:.75rem; margin-bottom:2.5rem; padding:0 .5rem; }
.logo-icon {
  width:36px;height:36px; background:var(--green); border-radius:10px;
  display:grid;place-items:center; font-weight:800;font-size:1.1rem;color:#fff;
}
.logo-text { font-size:1.4rem;font-weight:700;letter-spacing:-.5px; }
.logo-text em { font-style:normal;color:var(--green); }
.nav { flex:1; display:flex; flex-direction:column; gap:4px; }
.nav-item {
  display:flex;align-items:center;gap:.75rem;
  padding:.75rem 1rem; border-radius:10px; color:var(--text3);
  text-decoration:none; font-weight:500; font-size:.92rem;
  transition:var(--transition); cursor:pointer;
}
.nav-item:hover { background:rgba(255,255,255,.06); color:#e5e7eb; }
.nav-item.active { background:var(--green-soft); color:var(--green); }
.nav-item svg { flex-shrink:0; }
.sidebar-footer {
  display:flex;flex-direction:column;gap:.5rem;
  padding:.75rem 1rem; font-size:.8rem;color:var(--text3);
}
.btn-logout {
  display:flex;align-items:center;gap:.5rem;width:100%;
  padding:.5rem .75rem;border-radius:8px;border:1px solid var(--border);
  background:transparent;color:var(--text2);font-size:.8rem;cursor:pointer;
  transition:all .2s;
}
.btn-logout:hover { background:rgba(239,68,68,.1);color:var(--red);border-color:var(--red); }
.status-dot {
  width:8px;height:8px;border-radius:50%;
  background:var(--green); box-shadow:0 0 6px var(--green);
}

/* ── Main ── */
.main { flex:1; display:flex;flex-direction:column; overflow:hidden; }
.header {
  display:flex;justify-content:space-between;align-items:center;
  padding:1.5rem 2rem 1rem; background:var(--bg);
  transition: background var(--transition);
}
.header h1 { font-size:1.6rem;font-weight:700;color:var(--blue); }
.header-sub { color:var(--text2);font-size:.88rem;margin-top:.2rem; }
.header-right { display:flex;align-items:center;gap:.75rem; }
.hamburger-btn {
  display:none; width:38px; height:38px; border-radius:10px;
  border:1px solid var(--border); background:var(--card);
  cursor:pointer; color:var(--text2); transition:var(--transition);
  align-items:center; justify-content:center;
}
.hamburger-btn:hover { border-color:var(--green); color:var(--green); }
.hamburger-btn svg { pointer-events:none; }

/* ── Mobile Overlay ── */
.mobile-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.5); z-index:9;
  opacity:0; transition:opacity .3s ease;
}
.mobile-overlay.active { display:block; opacity:1; }

/* ── DEV Badge ── */
.env-badge {
  display:none; padding:.2rem .6rem; border-radius:50px;
  font-size:.7rem; font-weight:700; letter-spacing:.5px;
  text-transform:uppercase;
}
.env-badge.dev {
  display:inline-block; background:rgba(245,158,11,.15);
  color:#b45309; border:1px solid rgba(245,158,11,.3);
}
[data-theme="dark"] .env-badge.dev {
  background:rgba(245,158,11,.2); color:#fbbf24;
  border-color:rgba(245,158,11,.4);
}

/* ── Empty State ── */
.empty-state {
  text-align:center; padding:3rem 1.5rem; color:var(--text3);
}
.empty-state svg { margin-bottom:.75rem; opacity:.4; }
.empty-state p { font-size:.9rem; }

.btn-icon {
  width:38px;height:38px;border-radius:10px;border:1px solid var(--border);
  background:var(--card);display:grid;place-items:center;cursor:pointer;
  transition:var(--transition);color:var(--text2);
}
.btn-icon:hover { border-color:var(--green);color:var(--green); }
.btn-icon.spin:hover { transform:rotate(45deg); }
.avatar-pill {
  display:flex;align-items:center;gap:.6rem;
  background:var(--card);padding:.4rem .9rem .4rem .4rem;
  border-radius:50px;box-shadow:var(--shadow);
  font-weight:600;font-size:.88rem;
  transition: background var(--transition);
}
.avatar {
  width:32px;height:32px;border-radius:50%;
  background:var(--green);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:.85rem;
}

/* ── Date Filter ── */
.date-filter {
  display:flex;align-items:center;gap:.4rem;
}
.date-input {
  padding:.4rem .6rem;border:1px solid var(--input-border);border-radius:8px;
  font-size:.82rem;font-family:inherit;background:var(--input-bg);color:var(--text);
  outline:none;transition:var(--transition);
}
.date-input:focus { border-color:var(--green);box-shadow:0 0 0 2px var(--green-soft); }
.date-sep { color:var(--text3);font-size:.8rem; }

/* ── Content ── */
.content { flex:1;overflow-y:auto;padding:0 2rem 3rem; }
.page { display:none; animation:fadeUp .4s ease; }
.page.active { display:block; }
@keyframes fadeUp { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }

/* ── Metrics ── */
.metrics-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; margin-bottom:1.5rem; }
.metrics-grid.secondary { grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
.metric {
  background:var(--card); padding:1.25rem 1.5rem; border-radius:var(--radius);
  box-shadow:var(--shadow); position:relative; overflow:hidden;
  transition:var(--transition);
}
.metric:hover { transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,.06); }
.metric::before { content:'';position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:4px 0 0 4px; }
.metric.c-green::before { background:var(--green); }
.metric.c-blue::before { background:#2C3545; }
.metric.c-purple::before { background:var(--purple); }
.metric.c-cyan::before { background:var(--cyan); }
.metric.c-orange::before { background:var(--orange); }
.metric-label { font-size:.78rem;color:var(--text2);text-transform:uppercase;letter-spacing:.8px;font-weight:600; }
.metric-value { font-size:1.8rem;font-weight:800;color:var(--blue);margin:.3rem 0 .15rem; }
.metric-sub { font-size:.8rem;font-weight:500; }
.metric-sub.up { color:var(--green); }
.metric-sub.down { color:var(--red); }
.metric-sub.neutral { color:var(--text3); }

/* ── Cards ── */
.card {
  background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:1.5rem; transition: background var(--transition);
}
.card-header { display:flex;justify-content:space-between;align-items:center;margin-bottom:1.25rem;flex-wrap:wrap;gap:.75rem; }
.card-header h3 { font-size:1rem;font-weight:600;color:var(--blue); }
.card-header-actions { display:flex;align-items:center;gap:.75rem; }
.card-hint { font-size:.75rem;color:var(--text3);font-weight:400; }

/* ── Grids ── */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; }
.grid-1-1 { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; }

/* ── Charts ── */
.chart-container { position:relative; height:250px; }

/* ── Top Products ── */
.top-list { display:flex; flex-direction:column; gap:.1rem; }
.top-item {
  display:flex;align-items:center;justify-content:space-between;
  padding:.75rem .5rem; border-radius:8px; transition:var(--transition);
}
.top-item:hover { background:var(--green-soft); }
.top-item-left { display:flex;align-items:center;gap:.75rem; }
.top-rank {
  width:26px;height:26px;border-radius:8px;
  background:var(--green-soft);color:var(--green);
  display:grid;place-items:center;font-weight:700;font-size:.78rem;
}
.top-name { font-weight:500; }
.top-value { font-weight:700;color:var(--green);font-size:.92rem; }
.top-sub { font-size:.75rem;color:var(--text3);margin-left:.5rem; }

/* ── Tables ── */
.table-wrap { overflow-x:auto; overflow-y:auto; }
#pedidos-table-wrap,
#clientes-table-wrap,
#productos-table-wrap,
#actividad-table-wrap { max-height:calc(100vh - 260px); }
table { width:100%;border-collapse:collapse;font-size:.88rem; }
thead th {
  text-align:left;padding:.7rem .75rem;
  color:var(--text2);font-weight:600;font-size:.78rem;
  text-transform:uppercase;letter-spacing:.5px;
  border-bottom:2px solid var(--border);
  position:sticky;top:0;background:var(--card);z-index:2;
}
tbody td { padding:.7rem .75rem; border-bottom:1px solid var(--border); vertical-align:middle; }
tbody tr { transition:var(--transition); }
tbody tr:hover { background:var(--card-hover); }
tbody tr:last-child td { border-bottom:none; }
.td-bold { font-weight:600;color:var(--blue); }
.td-mono { font-family:'JetBrains Mono',monospace;font-size:.82rem; }

/* ── Badges ── */
.badge { display:inline-block; padding:.2rem .6rem;border-radius:50px; font-size:.75rem;font-weight:600; }
.badge-green { background:var(--green-soft);color:#3d6b10; }
.badge-blue { background:rgba(44,53,69,.1);color:#2C3545; }
.badge-cyan { background:rgba(6,182,212,.1);color:#0e7490; }
.badge-purple { background:rgba(168,85,247,.1);color:#7c3aed; }
.badge-orange { background:rgba(245,158,11,.1);color:#b45309; }
.badge-red { background:rgba(239,68,68,.1);color:#dc2626; }

/* ── Search ── */
.search-input {
  padding:.55rem 1rem; border:1px solid var(--input-border); border-radius:10px;
  font-size:.88rem; font-family:inherit; outline:none; width:240px;
  background:var(--input-bg); color:var(--text);
  transition:var(--transition);
}
.search-input:focus { border-color:var(--green);box-shadow:0 0 0 3px var(--green-soft); }

/* ── Buttons ── */
.btn {
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.55rem 1.1rem; border-radius:10px; border:none;
  font-size:.88rem; font-weight:600; font-family:inherit;
  cursor:pointer; transition:var(--transition);
}
.btn-primary { background:var(--green);color:#fff; }
.btn-primary:hover { background:#7ab535;transform:translateY(-1px); }
.btn-secondary { background:var(--chip-bg);color:var(--text); border:1px solid var(--border); }
.btn-secondary:hover { border-color:var(--green);color:var(--green); }
.btn-danger { background:rgba(239,68,68,.1);color:var(--red);border:1px solid transparent; }
.btn-danger:hover { background:rgba(239,68,68,.2); }
.btn-sm { padding:.4rem .8rem;font-size:.8rem; }

/* ── Form ── */
.form-group { margin-bottom:1rem; }
.form-label { display:block;font-size:.78rem;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.5px;margin-bottom:.35rem; }
.form-input {
  width:100%;padding:.6rem .85rem;border:1px solid var(--input-border);
  border-radius:8px;font-size:.9rem;font-family:inherit;
  background:var(--input-bg);color:var(--text);outline:none;
  transition:var(--transition);
}
.form-input:focus { border-color:var(--green);box-shadow:0 0 0 3px var(--green-soft); }
.form-select {
  width:100%;padding:.6rem .85rem;border:1px solid var(--input-border);
  border-radius:8px;font-size:.9rem;font-family:inherit;
  background:var(--input-bg);color:var(--text);outline:none;
  transition:var(--transition);cursor:pointer;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .8rem center;
  padding-right:2.5rem;
}
.form-select:focus { border-color:var(--green);box-shadow:0 0 0 3px var(--green-soft); }
.form-row { display:grid;grid-template-columns:1fr 1fr;gap:1rem; }
.form-actions { display:flex;gap:.75rem;justify-content:flex-end;margin-top:1.5rem; }

/* ── Chips (aliases) ── */
.chip-list { display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.5rem; }
.chip {
  display:inline-flex;align-items:center;gap:.3rem;
  padding:.25rem .65rem;border-radius:50px;
  background:var(--chip-bg);font-size:.8rem;font-weight:500;
  transition:var(--transition);
}
.chip-remove {
  width:16px;height:16px;border-radius:50%;border:none;
  background:transparent;color:var(--text3);cursor:pointer;
  display:grid;place-items:center;font-size:.85rem;line-height:1;
  transition:var(--transition);
}
.chip-remove:hover { background:rgba(239,68,68,.15);color:var(--red); }
.chip-add-wrap { display:flex;gap:.4rem;align-items:center; }
.chip-add-input {
  padding:.35rem .65rem;border:1px dashed var(--input-border);
  border-radius:50px;font-size:.8rem;font-family:inherit;
  background:transparent;color:var(--text);outline:none;width:140px;
  transition:var(--transition);
}
.chip-add-input:focus { border-color:var(--green);border-style:solid; }

/* ── Editable price input ── */
.price-input {
  width:90px;padding:.3rem .5rem;border:1px solid var(--input-border);
  border-radius:6px;font-size:.85rem;font-family:inherit;
  background:var(--input-bg);color:var(--text);outline:none;text-align:right;
  transition:var(--transition);
}
.price-input:focus { border-color:var(--green);box-shadow:0 0 0 2px var(--green-soft); }

/* ── Mini table ── */
.mini-table-wrap { max-height:320px;overflow-y:auto; }
.mini-row {
  display:flex;justify-content:space-between;align-items:center;
  padding:.6rem .5rem;border-radius:8px;
  transition:var(--transition);cursor:pointer;
}
.mini-row:hover { background:var(--card-hover); }
.mini-row-left { display:flex;flex-direction:column;gap:.15rem; }
.mini-name { font-weight:600;font-size:.88rem; }
.mini-date { font-size:.75rem;color:var(--text3); }
.mini-amount { font-weight:700;color:var(--blue); }

/* ── Skeleton ── */
.skeleton .sk-line {
  height:14px;border-radius:6px;
  background:linear-gradient(90deg,var(--border) 25%,var(--card-hover) 50%,var(--border) 75%);
  background-size:200% 100%; animation:shimmer 1.5s infinite;
}
.sk-line.big { height:28px;margin-top:.5rem; }
.sk-line.w60 { width:60%; } .sk-line.w40 { width:40%; }
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ── Spinner ── */
.loading-spinner {
  width:32px;height:32px;margin:3rem auto;
  border:3px solid var(--border); border-top-color:var(--green);
  border-radius:50%; animation:spin .6s linear infinite;
}
@keyframes spin { to{transform:rotate(360deg)} }

/* ── Modal ── */
.modal-overlay {
  position:fixed;inset:0;background:var(--modal-bg);
  display:none;place-items:center;z-index:100;
  backdrop-filter:blur(4px);
}
.modal-overlay.open { display:grid; animation:fadeIn .2s ease; }
.modal {
  background:var(--card);border-radius:var(--radius);
  padding:2rem;max-width:650px;width:92%;
  max-height:85vh;overflow-y:auto;
  position:relative; animation:scaleIn .25s ease;
  transition: background var(--transition);
}
.modal.modal-wide { max-width:800px; }
.modal-close {
  position:absolute;top:1rem;right:1rem;
  width:32px;height:32px;border-radius:8px;border:none;
  background:var(--chip-bg);cursor:pointer;font-size:1.2rem;
  color:var(--text2);display:grid;place-items:center;
  transition:var(--transition);
}
.modal-close:hover { background:var(--border); }
.modal h2 { font-size:1.2rem;font-weight:700;color:var(--blue);margin-bottom:.25rem; }
.modal h4 { font-size:.95rem;font-weight:600;color:var(--blue);margin:1.25rem 0 .75rem; }
.modal-section { padding:1rem 0;border-top:1px solid var(--border); }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes scaleIn { from{opacity:0;transform:scale(.95)} to{opacity:1;transform:scale(1)} }

/* ── Clickable ── */
.clickable { cursor:pointer; }

/* ── Toast ── */
.toast-container { position:fixed;bottom:1.5rem;right:1.5rem;z-index:200;display:flex;flex-direction:column;gap:.5rem; }
.toast {
  padding:.75rem 1.25rem;border-radius:10px;font-size:.88rem;font-weight:500;
  box-shadow:0 4px 20px rgba(0,0,0,.15);
  animation:slideInRight .3s ease;
  display:flex;align-items:center;gap:.5rem;
}
.toast-success { background:#16a34a;color:#fff; }
.toast-error { background:var(--red);color:#fff; }
@keyframes slideInRight { from{opacity:0;transform:translateX(40px)} to{opacity:1;transform:translateX(0)} }

/* ── Pedido Builder ── */
.pedido-items-list { display:flex;flex-direction:column;gap:.5rem;margin:1rem 0; }
.pedido-item-row {
  display:flex;align-items:center;justify-content:space-between;
  padding:.6rem .75rem;background:var(--chip-bg);border-radius:8px;
  font-size:.88rem;
}
.pedido-item-row .item-info { flex:1; }
.pedido-item-row .item-total { font-weight:700;margin:0 .75rem; }
.pedido-total-bar {
  display:flex;justify-content:space-between;align-items:center;
  padding:1rem;background:var(--green-soft);border-radius:10px;
  margin-top:1rem;font-weight:700;
}
.pedido-total-bar .total-amount { font-size:1.3rem;color:var(--green); }

/* product search dropdown */
.product-search-wrap { position:relative; }
.product-dropdown {
  position:absolute;top:100%;left:0;right:0;
  background:var(--card);border:1px solid var(--border);
  border-radius:8px;max-height:200px;overflow-y:auto;
  z-index:10;box-shadow:0 8px 24px rgba(0,0,0,.1);
  display:none;
}
.product-dropdown.open { display:block; }
.product-dropdown-item {
  padding:.6rem .75rem;cursor:pointer;font-size:.88rem;
  transition:var(--transition);border-bottom:1px solid var(--border);
}
.product-dropdown-item:last-child { border-bottom:none; }
.product-dropdown-item:hover { background:var(--green-soft); }
.product-dropdown-item .prod-name { font-weight:600; }
.product-dropdown-item .prod-cat { font-size:.75rem;color:var(--text3); }

/* ── Filter Bar ── */
.filter-bar {
  display:flex;align-items:center;gap:1.5rem;
  padding:.75rem 1.25rem;background:var(--card);border-radius:var(--radius);
  box-shadow:var(--shadow);margin-bottom:1.25rem;
  transition:background var(--transition);
}
.filter-group { display:flex;align-items:center;gap:.5rem; }
.filter-label { font-size:.78rem;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.5px; }
.filter-select {
  padding:.4rem .7rem;border:1px solid var(--input-border);border-radius:8px;
  font-size:.85rem;font-family:inherit;background:var(--input-bg);color:var(--text);
  outline:none;cursor:pointer;transition:var(--transition);
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .5rem center;
  padding-right:2rem;
}
.filter-select:focus { border-color:var(--green); }

/* ── Toggle ── */
.toggle-label {
  display:flex;align-items:center;gap:.4rem;cursor:pointer;
  font-size:.85rem;color:var(--text);
}
.toggle-label input[type="checkbox"] {
  width:16px;height:16px;accent-color:var(--green);cursor:pointer;
}

/* ── Segmentos Bar ── */
.segmentos-bar {
  display:flex;gap:1rem;margin-bottom:1.25rem;flex-wrap:wrap;
}
.segmento-card {
  flex:1;min-width:140px;
  background:var(--card);padding:.85rem 1rem;border-radius:10px;
  box-shadow:var(--shadow);text-align:center;
  transition:background var(--transition);
}
.segmento-card .seg-tipo { font-size:.72rem;color:var(--text2);font-weight:600;text-transform:uppercase;letter-spacing:.5px; }
.segmento-card .seg-count { font-size:1.4rem;font-weight:800;color:var(--blue);margin:.15rem 0; }
.segmento-card .seg-detail { font-size:.72rem;color:var(--text3); }

/* ── Tabs (modal) ── */
.modal-tabs {
  display:flex;gap:0;border-bottom:2px solid var(--border);margin-bottom:1.25rem;
}
.modal-tab {
  padding:.6rem 1.2rem;cursor:pointer;font-size:.88rem;font-weight:600;
  color:var(--text3);border-bottom:2px solid transparent;
  margin-bottom:-2px;transition:var(--transition);
  background:none;border-top:none;border-left:none;border-right:none;
}
.modal-tab:hover { color:var(--text); }
.modal-tab.active { color:var(--green);border-bottom-color:var(--green); }
.modal-tab-content { display:none; }
.modal-tab-content.active { display:block; }

/* ── Audit Log ── */
.audit-row {
  display:flex;align-items:flex-start;gap:.75rem;
  padding:.75rem .5rem;border-bottom:1px solid var(--border);
  transition:var(--transition);
}
.audit-row:last-child { border-bottom:none; }
.audit-row:hover { background:var(--card-hover); }
.audit-icon {
  width:32px;height:32px;border-radius:8px;flex-shrink:0;
  display:grid;place-items:center;font-size:.9rem;
}
.audit-icon.precio { background:rgba(139,197,63,.12);color:var(--green); }
.audit-icon.cliente { background:rgba(168,85,247,.1);color:var(--purple); }
.audit-icon.pedido { background:rgba(6,182,212,.1);color:var(--cyan); }
.audit-icon.alias { background:rgba(245,158,11,.1);color:var(--orange); }
.audit-body { flex:1;min-width:0; }
.audit-action { font-weight:600;font-size:.88rem; }
.audit-detail { font-size:.78rem;color:var(--text3);margin-top:.15rem; }
.audit-diff {
  display:flex;flex-wrap:wrap;gap:.35rem .75rem;
  margin-top:.4rem;padding:.4rem .6rem;
  background:var(--chip-bg);border-radius:6px;font-size:.78rem;
}
.diff-item { display:inline-flex;align-items:center;gap:.25rem; }
.diff-key { color:var(--text3);font-weight:500; }
.diff-old { color:var(--red);text-decoration:line-through;opacity:.7; }
.diff-new { color:var(--green);font-weight:600; }
.audit-time { font-size:.72rem;color:var(--text3);white-space:nowrap;margin-left:auto;text-align:right;min-width:120px; }

/* ── Price History Chart ── */
.price-chart-container { position:relative;height:200px;margin-top:.75rem; }

/* ── Sortable Table Headers ── */
.sortable-table { width:100%;border-collapse:collapse;font-size:.88rem; }
.sortable-th {
  cursor:pointer;user-select:none;
  text-align:left;padding:.7rem .75rem;
  color:var(--text2);font-weight:600;font-size:.78rem;
  text-transform:uppercase;letter-spacing:.5px;
  border-bottom:2px solid var(--border);
  background:var(--card);transition:var(--transition);
  white-space:nowrap;
}
.sortable-th:hover { color:var(--green);background:var(--green-soft); }
.sort-icon { font-size:.7rem;margin-left:.3rem;color:var(--text3); }
.sort-icon.active { color:var(--green);font-weight:700; }

/* ── Login Overlay ── */
.login-overlay {
  position:fixed;top:0;left:0;right:0;bottom:0;
  background:var(--bg);z-index:9999;
  display:flex;align-items:center;justify-content:center;
  transition:opacity .3s ease;
}
.login-overlay.hidden { display:none; }
.login-card {
  background:var(--card);border-radius:var(--radius);
  padding:2.5rem 2rem;width:100%;max-width:400px;
  box-shadow:var(--shadow);text-align:center;
}
.login-logo { margin-bottom:.5rem; }
.login-error {
  color:var(--red);font-size:.82rem;text-align:left;
  margin-bottom:.75rem;padding:.5rem .75rem;
  background:rgba(239,68,68,.08);border-radius:8px;
}
.btn-full { width:100%;padding:.75rem;font-size:.95rem;justify-content:center;text-align:center; }
.pw-toggle {
  position:absolute;right:.65rem;top:50%;transform:translateY(-50%);
  background:none;border:none;cursor:pointer;color:var(--text3);
  padding:2px;display:flex;align-items:center;
}
.pw-toggle:hover { color:var(--text); }
.login-footer {
  margin-top:1.25rem;text-align:center;
}
.login-footer a {
  color:var(--text3);font-size:.82rem;text-decoration:none;
  transition:var(--transition);
}
.login-footer a:hover { color:var(--green); }

/* ── Settings Page ── */
.settings-form { padding:.5rem 0; }
.settings-form .form-group { margin-bottom:1rem; }
.settings-form .form-label {
  display:block;font-size:.82rem;font-weight:600;
  color:var(--text2);margin-bottom:.35rem;text-transform:uppercase;
  letter-spacing:.3px;
}
.settings-form .form-input {
  width:100%;padding:.65rem .85rem;border:1px solid var(--input-border);
  border-radius:8px;background:var(--input-bg);color:var(--text);
  font-size:.9rem;transition:var(--transition);
}
.settings-form .form-input:focus {
  outline:none;border-color:var(--green);
  box-shadow:0 0 0 3px var(--green-soft);
}
.form-hint {
  display:block;font-size:.75rem;color:var(--text3);margin-top:.25rem;
}

/* also apply form-input to login form */
#login-form .form-input,
#recovery-step1 .form-input,
#recovery-step2 .form-input {
  width:100%;padding:.7rem .85rem;border:1px solid var(--input-border);
  border-radius:8px;background:var(--input-bg);color:var(--text);
  font-size:.9rem;transition:var(--transition);margin-bottom:.75rem;
}
#login-form .form-input:focus,
#recovery-step1 .form-input:focus,
#recovery-step2 .form-input:focus {
  outline:none;border-color:var(--green);
  box-shadow:0 0 0 3px var(--green-soft);
}

/* ── Responsive ── */
@media(max-width:1100px) {
  .metrics-grid { grid-template-columns:repeat(2,1fr); }
  .grid-2, .grid-1-1 { grid-template-columns:1fr; }
  .date-filter { display:none; }
  .header-right .avatar-pill span { font-size:.8rem; }
}
@media(max-width:768px) {
  .hamburger-btn { display:flex; }
  .sidebar {
    display:none; position:fixed; top:0; left:0; bottom:0;
    width:260px; z-index:10; transform:translateX(-100%);
    transition:transform .3s ease;
  }
  .sidebar.mobile-open {
    display:flex; transform:translateX(0);
  }
  .header { padding:1rem; }
  .header h1 { font-size:1.2rem; }
  .content { padding:0 1rem 1rem; }
  .metrics-grid { grid-template-columns:1fr; }
  .search-input { width:100%; }
  .form-row { grid-template-columns:1fr; }
  .filter-bar { flex-direction:column;align-items:flex-start; }
  .segmentos-bar { flex-direction:column; }
  .card-header { flex-direction:column; align-items:flex-start; }
  .card-header-actions { width:100%; }
  .card-header-actions .search-input { flex:1; }
  .modal { width:96%; padding:1.25rem; }
  .form-actions { flex-direction:column; }
  .form-actions .btn { width:100%; justify-content:center; }
  .avatar-pill span { display:none; }
  .date-filter { display:none; }
  .pedido-total-bar { flex-direction:column; gap:.5rem; text-align:center; }
}