/* ============================================================
   BASE — Variables, reset, tipografía, componentes globales
   ============================================================ */
:root {
  /* Paleta alimentaria profesional */
  --cream:    #faf7f2;
  --warm-50:  #fdf6ec;
  --warm-100: #f9e8cc;
  --amber:    #c8873a;
  --amber-dk: #a06828;
  --charcoal: #1c1c1e;
  --slate:    #3a3a3c;
  --muted:    #6e6e73;
  --border:   #e5e0d8;
  --surface:  #ffffff;
  --danger:   #c0392b;
  --success:  #1a7a4a;
  --warning:  #d4860a;
  --info:     #1d6fa4;

  /* Modo día */
  --hero-bg-day:   linear-gradient(135deg, #1c1c1e 0%, #3a2a14 60%, #c8873a 100%);
  /* Modo noche */
  --hero-bg-night: linear-gradient(135deg, #0d0d1a 0%, #1a1a2e 60%, #4a2060 100%);

  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.07);
  --shadow:    0 4px 16px rgba(0,0,0,0.10);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.14);
  --transition: 0.2s ease;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Playfair Display', Georgia, serif;
}

/* ── Dark mode ── */
[data-theme="dark"] {
  --cream:    #111113;
  --warm-50:  #1a1a1c;
  --warm-100: #2a2a2c;
  --charcoal: #f2f2f7;
  --slate:    #d1d1d6;
  --muted:    #98989d;
  --border:   #38383a;
  --surface:  #1c1c1e;
  --surface-2: #2c2c2e;
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.35);
  --shadow:    0 4px 16px rgba(0,0,0,0.45);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.55);
  /* Footer en dark: fondo más oscuro que surface */
  --footer-bg:   #0a0a0c;
  --footer-text: rgba(255,255,255,0.65);
  --footer-head: #ffffff;
  /* Badges ajustados */
  --badge-day-bg:   #3a2e00;
  --badge-day-text: #f6c26b;
  --badge-night-bg: #1e0a3c;
  --badge-night-text: #c39bd3;
  --badge-info-bg:  #0a2540;
  --badge-info-text: #7eb8f7;
}

/* Light mode footer vars */
:root {
  --footer-bg:   #1c1c1e;
  --footer-text: rgba(255,255,255,0.65);
  --footer-head: #ffffff;
  --surface-2:   #f5f5f7;
  --badge-day-bg:    #fef9e7;
  --badge-day-text:  #9a7d0a;
  --badge-night-bg:  #1a1a2e;
  --badge-night-text:#c39bd3;
  --badge-info-bg:   #d6eaf8;
  --badge-info-text: #1a5276;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--charcoal);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ── Tipografía ── */
h1,h2,h3 { font-family: var(--font-display); line-height: 1.25; }
h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
h2 { font-size: clamp(1.3rem, 3vw, 1.9rem); }
h3 { font-size: 1.15rem; }
p  { color: var(--muted); }

/* ── Layout ── */
.container { max-width: 1120px; margin: 0 auto; padding: 0 20px; }

/* ── Botones ── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px; border-radius: var(--radius-sm);
  border: 1.5px solid transparent; font-family: var(--font-body);
  font-size: 0.9rem; font-weight: 600; cursor: pointer;
  text-decoration: none; transition: all var(--transition);
  white-space: nowrap;
}
.btn-primary   { background: var(--amber); color: #fff; border-color: var(--amber); }
.btn-primary:hover { background: var(--amber-dk); border-color: var(--amber-dk); }
.btn-outline   { background: transparent; color: var(--charcoal); border-color: var(--border); }
.btn-outline:hover { border-color: var(--amber); color: var(--amber); }
.btn-ghost     { background: transparent; border-color: transparent; color: var(--muted); }
.btn-ghost:hover { background: var(--warm-50); color: var(--charcoal); }
.btn-danger    { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn-danger:hover { background: #a93226; }
.btn-success   { background: var(--success); color: #fff; border-color: var(--success); }
.btn-sm  { padding: 6px 12px; font-size: 0.82rem; }
.btn-lg  { padding: 14px 28px; font-size: 1rem; }
.btn-icon { padding: 8px; border-radius: var(--radius-sm); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* ── Badges ── */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 20px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
}
.badge-amber   { background: var(--warm-100); color: var(--amber-dk); }
.badge-success { background: #d4edda; color: #155724; }
.badge-danger  { background: #fde8e8; color: #922b21; }
.badge-warning { background: #fef3cd; color: #856404; }
.badge-info    { background: var(--badge-info-bg);   color: var(--badge-info-text); }
.badge-muted   { background: var(--warm-100); color: var(--muted); }
.badge-night   { background: var(--badge-night-bg);  color: var(--badge-night-text); }
.badge-day     { background: var(--badge-day-bg);    color: var(--badge-day-text); }

/* Dark mode badge overrides */
[data-theme="dark"] .badge-success { background: #0d3320; color: #6ee7b7; }
[data-theme="dark"] .badge-danger  { background: #3b0f0f; color: #fca5a5; }
[data-theme="dark"] .badge-warning { background: #3b2500; color: #fcd34d; }
[data-theme="dark"] .badge-amber   { background: var(--warm-100); color: var(--amber); }
[data-theme="dark"] .badge-muted   { background: var(--warm-100); color: var(--slate); }

/* ── Cards ── */
.card {
  background: var(--surface); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); border: 1px solid var(--border);
  padding: 20px;
}

/* ── Forms ── */
.form-group { margin-bottom: 16px; }
.form-group label {
  display: block; font-size: 0.85rem; font-weight: 600;
  color: var(--slate); margin-bottom: 5px;
}
.form-control {
  width: 100%; padding: 9px 12px;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: 0.93rem; color: var(--charcoal);
  background: #fff; transition: border-color var(--transition);
  outline: none;
}
.form-control:focus { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(200,135,58,0.12); }
textarea.form-control { resize: vertical; min-height: 80px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* ── Toggle switch ── */
.toggle-wrap { display: flex; align-items: center; gap: 10px; }
.toggle {
  position: relative; width: 44px; height: 24px;
  background: #d1d5db; border-radius: 12px; cursor: pointer;
  transition: background var(--transition); flex-shrink: 0;
}
.toggle.on { background: var(--amber); }
.toggle::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; transition: transform var(--transition);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.toggle.on::after { transform: translateX(20px); }

/* ── Modal ── */
.modal-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(28,28,30,0.55); backdrop-filter: blur(4px);
  align-items: center; justify-content: center; z-index: 200; padding: 16px;
}
.modal-overlay.open { display: flex; }
.modal-box {
  background: var(--surface); border-radius: var(--radius-lg);
  width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto;
  box-shadow: var(--shadow-lg); padding: 28px;
  animation: slideUp 0.22s ease;
}
.modal-box.wide { max-width: 720px; }
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; }
.modal-header h3 { font-size: 1.15rem; }
.modal-close { background: none; border: none; font-size: 1.2rem; cursor: pointer; color: var(--muted); padding: 4px 8px; border-radius: 4px; }
.modal-close:hover { background: var(--warm-50); color: var(--charcoal); }
.modal-footer { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--border); }

/* ── Toast ── */
.toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 999; display: flex; flex-direction: column; gap: 8px; }
.toast {
  display: flex; align-items: center; gap: 10px;
  background: var(--charcoal); color: #fff;
  padding: 12px 18px; border-radius: var(--radius);
  box-shadow: var(--shadow-lg); font-size: 0.9rem; font-weight: 500;
  animation: slideUp 0.2s ease; min-width: 240px; max-width: 360px;
}
.toast.success { background: var(--success); }
.toast.error   { background: var(--danger); }
.toast.warning { background: var(--warning); }
.toast.info    { background: var(--info); }
.toast i { font-size: 1rem; flex-shrink: 0; }

/* ── Empty state ── */
.empty-state { text-align: center; padding: 48px 20px; color: var(--muted); }
.empty-state i { font-size: 2.8rem; opacity: 0.25; display: block; margin-bottom: 14px; }
.empty-state h3 { font-size: 1rem; color: var(--slate); margin-bottom: 6px; }

/* ── Divider ── */
.divider { border: none; border-top: 1px solid var(--border); margin: 20px 0; }

/* ── Animations ── */
@keyframes slideUp   { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
@keyframes fadeIn    { from { opacity:0; } to { opacity:1; } }
@keyframes pulse     { 0%,100%{opacity:1;} 50%{opacity:0.5;} }
.animate-in { animation: slideUp 0.25s ease both; }

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

/* ============================================================
   DARK MODE — Overrides específicos
   ============================================================ */

/* Header */
[data-theme="dark"] .site-header {
  background: rgba(17,17,19,0.95);
  border-bottom-color: var(--border);
}
[data-theme="dark"] .site-logo { color: var(--charcoal); }
[data-theme="dark"] .header-toggle-btn { color: var(--slate); border-color: var(--border); }
[data-theme="dark"] .mode-indicator.day   { background: #3a2e00; color: #f6c26b; }
[data-theme="dark"] .mode-indicator.night { background: #1e0a3c; color: #c39bd3; }
[data-theme="dark"] .cart-btn { background: var(--amber); }

/* Cards */
[data-theme="dark"] .menu-card { border-color: var(--border); }
[data-theme="dark"] .menu-card-title { color: var(--charcoal); }
[data-theme="dark"] .menu-card-desc  { color: var(--muted); }
[data-theme="dark"] .price-local     { color: var(--amber); }
[data-theme="dark"] .price-delivery  { color: var(--muted); }

/* Category tabs */
[data-theme="dark"] .cat-tab { background: var(--surface); border-color: var(--border); color: var(--muted); }
[data-theme="dark"] .cat-tab.active { background: var(--amber); border-color: var(--amber); color: #fff; }
[data-theme="dark"] .cat-tab:hover  { border-color: var(--amber); color: var(--amber); }

/* Search */
[data-theme="dark"] .menu-search-input {
  background: var(--surface); border-color: var(--border);
  color: var(--charcoal);
}
[data-theme="dark"] .menu-search-input::placeholder { color: var(--muted); }

/* Cart drawer */
[data-theme="dark"] .cart-drawer { background: var(--surface); }
[data-theme="dark"] .cart-header { border-bottom-color: var(--border); }
[data-theme="dark"] .cart-header h3 { color: var(--charcoal); }
[data-theme="dark"] .cart-item { border-bottom-color: var(--border); }
[data-theme="dark"] .cart-item-name  { color: var(--charcoal); }
[data-theme="dark"] .cart-item-price { color: var(--amber); }
[data-theme="dark"] .cart-footer { border-top-color: var(--border); }
[data-theme="dark"] .cart-total-label  { color: var(--slate); }
[data-theme="dark"] .cart-total-amount { color: var(--charcoal); }
[data-theme="dark"] .service-btn { border-color: var(--border); color: var(--slate); }
[data-theme="dark"] .service-btn.active { background: var(--warm-50); border-color: var(--amber); color: var(--amber); }
[data-theme="dark"] .qty-btn { border-color: var(--border); color: var(--slate); }

/* Forms */
[data-theme="dark"] .form-control {
  background: var(--warm-50); border-color: var(--border);
  color: var(--charcoal);
}
[data-theme="dark"] .form-control::placeholder { color: var(--muted); }
[data-theme="dark"] textarea.form-control { background: var(--warm-50); }

/* Promo banner — ya tiene fondo propio, ok */

/* Section title */
[data-theme="dark"] .menu-section-title { color: var(--charcoal); }
[data-theme="dark"] .menu-section-title::after { background: var(--border); }

/* Search results */
[data-theme="dark"] .search-results-label { color: var(--muted); }
[data-theme="dark"] .search-results-label strong { color: var(--charcoal); }
[data-theme="dark"] .other-shift-label { color: var(--muted); }

/* Empty state */
[data-theme="dark"] .empty-state h3 { color: var(--slate); }

/* Admin sidebar — ya es oscuro, sin cambios */
/* Admin topbar */
[data-theme="dark"] .admin-topbar { background: var(--surface); border-bottom-color: var(--border); }
[data-theme="dark"] .topbar-title { color: var(--charcoal); }
[data-theme="dark"] .btn-hamburger { border-color: var(--border); color: var(--slate); }

/* Admin cards/tables */
[data-theme="dark"] .stat-card   { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .stat-value  { color: var(--charcoal); }
[data-theme="dark"] .stat-label  { color: var(--muted); }
[data-theme="dark"] .table-card  { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .data-table thead th { background: var(--warm-50); color: var(--muted); }
[data-theme="dark"] .data-table tbody td { border-bottom-color: var(--border); color: var(--charcoal); }
[data-theme="dark"] .data-table tbody tr:hover td { background: var(--warm-50); }
[data-theme="dark"] .chart-card  { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .chart-card h3 { color: var(--slate); }
[data-theme="dark"] .card        { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .settings-section { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .settings-section h3 { color: var(--charcoal); border-bottom-color: var(--border); }
[data-theme="dark"] .salary-total { background: var(--warm-50); border-color: var(--warm-100); }
[data-theme="dark"] .salary-total span  { color: var(--slate); }
[data-theme="dark"] .salary-total strong { color: var(--charcoal); }
[data-theme="dark"] .promo-card  { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .promo-title { color: var(--charcoal); }
[data-theme="dark"] .promo-expires { color: var(--muted); }
[data-theme="dark"] .search-input { background: var(--warm-50); border-color: var(--border); color: var(--charcoal); }
[data-theme="dark"] .search-input::placeholder { color: var(--muted); }

/* Modal */
[data-theme="dark"] .modal-box { background: var(--surface); }
[data-theme="dark"] .modal-header h3 { color: var(--charcoal); }
[data-theme="dark"] .modal-footer { border-top-color: var(--border); }
[data-theme="dark"] .modal-close { color: var(--muted); }
[data-theme="dark"] .modal-close:hover { background: var(--warm-50); }

/* Stat icons en dark */
[data-theme="dark"] .stat-icon.amber  { background: #3a2200; color: var(--amber); }
[data-theme="dark"] .stat-icon.green  { background: #0d3320; color: #6ee7b7; }
[data-theme="dark"] .stat-icon.blue   { background: #0a2540; color: #7eb8f7; }
[data-theme="dark"] .stat-icon.red    { background: #3b0f0f; color: #fca5a5; }
[data-theme="dark"] .stat-icon.purple { background: #1e0a3c; color: #c39bd3; }