@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,900;1,700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600;700&display=swap');

/* ══════════════════════════════════════════════════════════════════
   VARIABLES GLOBALES
══════════════════════════════════════════════════════════════════ */
:root {
  /* Paleta oscura (menú y admin) */
  --bg:       #0f0804;
  --bg2:      #1a0f08;
  --bg3:      #231510;
  --card:     #2a1810;
  --card2:    #321e14;
  --border:   #3d2418;
  --border2:  #4d2e1e;

  /* Colores de acento */
  --flame:    #e85d1a;
  --flame2:   #ff7a3d;
  --gold:     #d4a843;
  --gold2:    #f0c86a;
  --green:    #3d7a45;
  --green2:   #52a35c;

  /* Tipografía */
  --cream:    #fbf3e8;
  --muted:    #c4a882;
  --muted2:   #8a6a50;
  --white:    #fff8f0;

  /* Utilidades */
  --r:        12px;
  --r2:       8px;
  --shadow:   0 4px 24px rgba(0,0,0,.5);
  --shadow2:  0 2px 10px rgba(0,0,0,.35);

  /* Compatibilidad con código antiguo */
  --ink:      #fbf3e8;
  --paper:    #2a1810;
  --paper2:   #3d2418;
  --olive:    #3d7a45;
  --gray:     #8a6a50;
}

/* ══════════════════════════════════════════════════════════════════
   RESET BASE
══════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;          /* base explícita para todos los rem */
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%; /* evita auto-zoom en iOS */
  text-size-adjust: 100%;
}

html, body {
  background: var(--bg);
  color: var(--cream);
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 90px;
  min-height: 100vh;
  font-size: 1rem;          /* 16px */
}

a { text-decoration: none; color: inherit; }

/* ══════════════════════════════════════════════════════════════════
   LAYOUT
══════════════════════════════════════════════════════════════════ */
.wrap {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 16px 48px;
}

/* ══════════════════════════════════════════════════════════════════
   HEADER DEL MENÚ
══════════════════════════════════════════════════════════════════ */
.menu-header {
  background: linear-gradient(180deg, #1a0a04 0%, var(--bg2) 100%);
  border-bottom: 1px solid var(--border);
  padding: 28px 20px 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.menu-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 30%, rgba(232,93,26,.12) 0%, transparent 70%);
  pointer-events: none;
}

.menu-logo-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.menu-logo-img {
  width: 100px;
  height: 100px;
  object-fit: contain;
  filter: drop-shadow(0 4px 20px rgba(232,93,26,.4));
}

.menu-brand {
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  font-size: 1.75rem;       /* ~28px — era 2.4rem (38px), demasiado grande */
  line-height: 1;
  color: var(--white);
  letter-spacing: -.02em;
}

.menu-brand span { color: var(--flame); font-style: italic; }

.menu-tagline {
  font-size: 13px;
  color: var(--muted2);
  letter-spacing: .03em;
}

.menu-address {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  color: var(--muted2);
  margin-top: 4px;
}

.menu-address svg { color: var(--flame); flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════════════
   CATEGORÍAS STICKY
══════════════════════════════════════════════════════════════════ */
.cat-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(15,8,4,.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  padding: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.cat-nav::-webkit-scrollbar { display: none; }

.cat-nav-inner {
  display: flex;
  gap: 4px;
  padding: 10px 16px;
  white-space: nowrap;
  width: max-content;
  min-width: 100%;
}

.cat-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  border-radius: 100px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: color .2s, background .2s, border-color .2s;
  white-space: nowrap;
  user-select: none;
}

.cat-pill:hover { color: var(--cream); background: rgba(255,255,255,.06); }
.cat-pill.active {
  color: var(--flame);
  background: rgba(232,93,26,.12);
  border-color: rgba(232,93,26,.3);
}

/* ══════════════════════════════════════════════════════════════════
   SECCIÓN TÍTULO
══════════════════════════════════════════════════════════════════ */
.section-title {
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  font-size: 1.2rem;        /* ~19px — era 1.5rem (24px) */
  color: var(--white);
  margin: 32px 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
}

.section-title::before {
  content: '';
  width: 4px;
  height: 1.4em;
  background: var(--flame);
  border-radius: 3px;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════
   PRODUCT CARD
══════════════════════════════════════════════════════════════════ */
.product {
  display: flex;
  gap: 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 14px;
  margin-bottom: 10px;
  align-items: flex-start;
  transition: border-color .2s, box-shadow .2s;
}

.product:hover {
  border-color: var(--border2);
  box-shadow: 0 4px 20px rgba(0,0,0,.35);
}

.product img {
  width: 72px;
  height: 72px;
  border-radius: var(--r2);
  object-fit: cover;
  flex-shrink: 0;
  background: var(--bg3);
  border: 1px solid var(--border);
}

.product .info { flex: 1; min-width: 0; }

.product .name {
  font-weight: 700;
  font-size: 15px;
  color: var(--white);
  line-height: 1.25;
  margin-bottom: 3px;
}

.product .desc {
  font-size: 12.5px;
  color: var(--muted2);
  line-height: 1.5;
  margin-bottom: 6px;
}

.product .price {
  font-family: 'JetBrains Mono', monospace;
  color: var(--gold);
  font-weight: 700;
  font-size: 15px;
}

/* ── qty control ── */
.qty-control {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.qty-control button {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--border2);
  background: var(--bg3);
  color: var(--cream);
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, border-color .15s;
}

.qty-control button:hover:not(:disabled) {
  background: var(--flame);
  border-color: var(--flame);
}

.qty-control button:disabled { opacity: .3; cursor: default; }

.qty-control .qty {
  min-width: 22px;
  text-align: center;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  color: var(--white);
}

/* ══════════════════════════════════════════════════════════════════
   EMPANADAS — SELECTOR DE SABORES
══════════════════════════════════════════════════════════════════ */
.product--empanada { flex-wrap: wrap; }

.product-inner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
}

.flavor-wrap {
  width: 100%;
  background: var(--bg3);
  border-radius: var(--r2);
  padding: 12px 14px 10px;
  margin-top: 10px;
  border: 1px solid var(--border);
}

.flavor-title {
  font-weight: 700;
  font-size: 13px;
  color: var(--gold);
  margin-bottom: 2px;
}

.flavor-hint {
  font-size: 11.5px;
  color: var(--muted2);
  margin-bottom: 8px;
}

.flavor-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}

.flavor-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  padding: 7px 10px;
  transition: border-color .15s;
}

.flavor-row--active {
  border-color: var(--flame);
  background: rgba(232,93,26,.08);
}

.flavor-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--cream);
  flex: 1;
}

.flavor-qty-control {
  display: flex;
  align-items: center;
  gap: 8px;
}

.flavor-qty-control button {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--border2);
  background: var(--bg3);
  color: var(--cream);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
}

.flavor-qty-control button:hover:not(:disabled) { background: var(--flame); border-color: var(--flame); }
.flavor-qty-control button:disabled { opacity: .25; cursor: default; }

.flavor-qty {
  min-width: 18px;
  text-align: center;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: var(--white);
}

.flavor-summary { font-size: 12px; min-height: 18px; }
.flavor-pending { color: var(--gold); font-weight: 600; }
.flavor-ok { color: var(--green2); font-weight: 600; }

/* ══════════════════════════════════════════════════════════════════
   SELECTOR DE SALSA
══════════════════════════════════════════════════════════════════ */
.sauce-wrap {
  width: 100%;
  background: var(--bg3);
  border-radius: var(--r2);
  padding: 10px 14px;
  margin-top: 8px;
  border: 1px solid var(--border);
}

.sauce-title {
  font-weight: 700;
  font-size: 12.5px;
  color: var(--gold);
  margin-bottom: 6px;
}

.sauce-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sauce-opt {
  padding: 6px 14px;
  border-radius: 100px;
  border: 1px solid var(--border2);
  background: var(--card2);
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
}

.sauce-opt:hover { border-color: var(--flame); color: var(--cream); }
.sauce-opt.selected {
  background: rgba(232,93,26,.15);
  border-color: var(--flame);
  color: var(--flame2);
}

/* ══════════════════════════════════════════════════════════════════
   CARRITO FLOTANTE
══════════════════════════════════════════════════════════════════ */
#cart-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: var(--card2);
  border-top: 1px solid var(--border2);
  padding: 12px 20px;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  box-shadow: 0 -8px 32px rgba(0,0,0,.5);
  z-index: 50;
  backdrop-filter: blur(8px);
}

#cart-bar.visible { display: flex; }

#cart-bar .count {
  font-size: 12.5px;
  color: var(--muted2);
}

#cart-bar .total {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 18px;
  color: var(--gold);
}

#cart-bar button {
  background: var(--flame);
  color: #fff;
  border: none;
  padding: 11px 22px;
  border-radius: 100px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s, transform .15s;
}

#cart-bar button:hover {
  background: #c94e10;
  transform: translateY(-1px);
}

/* ══════════════════════════════════════════════════════════════════
   CHECKOUT MODAL
══════════════════════════════════════════════════════════════════ */
#checkout-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.7);
  display: none;
  align-items: flex-end;
  justify-content: center;
  z-index: 100;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#checkout-overlay.visible { display: flex; }

#checkout {
  background: var(--bg2);
  width: 100%;
  max-width: 640px;
  border-radius: 20px 20px 0 0;
  border-top: 1px solid var(--border2);
  padding: 24px 20px 36px;
  max-height: 90dvh;
  max-height: 90vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex-shrink: 0;
}

#checkout h2 {
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem;        /* ~19px — era 1.5rem */
  font-weight: 900;
  color: var(--white);
  margin: 0 0 16px;
  padding-right: 32px;
}

.close-btn {
  position: absolute;
  top: 20px; right: 20px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 32px; height: 32px;
  font-size: 16px;
  cursor: pointer;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s;
  float: none;
}

#checkout { position: relative; }

.close-btn:hover { background: var(--flame); color: #fff; border-color: var(--flame); }

.cart-line {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  font-size: 13.5px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  gap: 12px;
  color: var(--cream);
}

.cart-line-flavors {
  font-size: 11.5px;
  color: var(--muted2);
  margin-top: 2px;
}

.cart-total {
  display: flex;
  justify-content: space-between;
  font-weight: 700;
  font-size: 17px;
  padding: 14px 0 18px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--gold);
  border-top: 1px solid var(--border2);
  margin-top: 4px;
}

/* ══════════════════════════════════════════════════════════════════
   FORMULARIO (campos)
══════════════════════════════════════════════════════════════════ */
.field { margin-bottom: 14px; }

.field label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 11px 14px;
  border-radius: var(--r2);
  border: 1px solid var(--border2);
  background: var(--bg3);
  color: var(--cream);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  transition: border-color .2s, box-shadow .2s;
  outline: none;
}

.field input:focus,
.field textarea:focus {
  border-color: var(--flame);
  box-shadow: 0 0 0 3px rgba(232,93,26,.15);
}

.field input::placeholder,
.field textarea::placeholder { color: var(--muted2); }

.field textarea { resize: vertical; min-height: 64px; }

.field small {
  display: block;
  font-size: 11.5px;
  color: var(--muted2);
  margin-top: 4px;
}

/* Campos ocultos */
#address-field { display: none; }
#share-location { display: none; }

#loc-status {
  font-size: 12px;
  margin: 4px 0 12px;
  color: var(--muted2);
}

#loc-status.ok  { color: var(--green2); font-weight: 600; }
#loc-status.err { color: var(--flame); font-weight: 600; }

/* ══════════════════════════════════════════════════════════════════
   BOTONES
══════════════════════════════════════════════════════════════════ */
.btn-block {
  width: 100%;
  padding: 13px;
  border: none;
  border-radius: var(--r2);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: background .2s, transform .15s, opacity .2s;
}

.btn-primary {
  background: var(--flame);
  color: #fff;
}

.btn-primary:hover:not(:disabled) {
  background: #c94e10;
  transform: translateY(-1px);
}

.btn-primary:disabled { opacity: .45; cursor: not-allowed; }

.btn-secondary {
  background: var(--bg3);
  color: var(--cream);
  border: 1px solid var(--border2);
  margin-bottom: 8px;
}

.btn-secondary:hover { background: var(--card2); }

/* ══════════════════════════════════════════════════════════════════
   OPCIONES DE ENTREGA / PAGO
══════════════════════════════════════════════════════════════════ */
.payment-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.payment-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: var(--r2);
  padding: 11px 14px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  font-size: 14px;
  font-weight: 500;
  color: var(--cream);
}

.payment-opt:hover { border-color: var(--flame); }

.payment-opt input[type="radio"] {
  accent-color: var(--flame);
  width: 16px; height: 16px;
  flex-shrink: 0;
  cursor: pointer;
}

.payment-opt:has(input:checked) {
  border-color: var(--flame);
  background: rgba(232,93,26,.1);
}

.payment-icon { font-size: 18px; line-height: 1; }
.payment-label { flex: 1; }

/* ══════════════════════════════════════════════════════════════════
   CBU INFO
══════════════════════════════════════════════════════════════════ */
#cbu-info {
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: var(--r2);
  padding: 12px 14px;
  margin-bottom: 12px;
}

#cbu-info .cbu-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

#cbu-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 15px;
  font-weight: 700;
  color: var(--gold);
}

#cbu-info .cbu-hint {
  font-size: 11.5px;
  color: var(--muted2);
  margin-top: 4px;
}

/* ══════════════════════════════════════════════════════════════════
   MENSAJES
══════════════════════════════════════════════════════════════════ */
.empty-msg {
  text-align: center;
  color: var(--muted2);
  font-size: 13.5px;
  padding: 32px 0;
}

/* ══════════════════════════════════════════════════════════════════
   ADMIN — LAYOUT GENERAL
══════════════════════════════════════════════════════════════════ */
.admin-body {
  background: var(--bg);
  min-height: 100vh;
  padding-bottom: 0;
}

.admin-topbar {
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 58px;
  position: sticky;
  top: 0;
  z-index: 50;
}

.admin-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-brand img {
  width: 34px; height: 34px;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(232,93,26,.3));
}

.admin-brand-name {
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  font-size: 1rem;          /* 16px — era 1.1rem */
  color: var(--white);
}

.admin-brand-name span { color: var(--flame); font-style: italic; }

.admin-brand-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(212,168,67,.12);
  border: 1px solid rgba(212,168,67,.25);
  border-radius: 100px;
  padding: 2px 8px;
}

#logout-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--border2);
  color: var(--muted);
  padding: 7px 14px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: border-color .2s, color .2s;
}

#logout-btn:hover { border-color: var(--flame); color: var(--flame); }

/* ── Tabs ── */
.admin-tabs {
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  padding: 0 16px;
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
}

.admin-tabs::-webkit-scrollbar { display: none; }

.tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 14px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted2);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  font-family: 'Inter', sans-serif;
  transition: color .2s, border-color .2s;
}

.tab-btn:hover { color: var(--muted); }
.tab-btn.active { color: var(--flame); border-bottom-color: var(--flame); }

.tab-icon { font-size: 14px; }

/* ── Content ── */
.admin-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 24px 16px 60px;
}

.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ── Section heading ── */
.admin-section-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;        /* ~18px — era 1.25rem */
  font-weight: 900;
  color: var(--white);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-section-title span { color: var(--flame); }

/* ── Cards de formulario ── */
.form-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 20px;
  margin-bottom: 16px;
}

.form-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1rem;          /* 16px — era 1.1rem */
  font-weight: 700;
  color: var(--white);
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.form-row { display: flex; gap: 12px; }
.form-row .field { flex: 1; }

/* ── Mensajes de estado ── */
.msg { font-size: 13px; margin-top: 8px; border-radius: 6px; padding: 0; }
.msg.ok  { color: var(--green2); }
.msg.err { color: var(--flame); }

/* ── Botón agregar ── */
#add-btn {
  margin-bottom: 16px;
  width: auto;
  padding: 10px 20px;
  border-radius: 100px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ── Admin product cards ── */
.admin-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 14px;
  margin-bottom: 10px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  transition: border-color .2s;
}

.admin-card:hover { border-color: var(--border2); }

.admin-card.inactive-card { opacity: .55; }

.admin-card img {
  width: 60px; height: 60px;
  border-radius: var(--r2);
  object-fit: cover;
  background: var(--bg3);
  border: 1px solid var(--border);
  flex-shrink: 0;
}

.admin-card .info { flex: 1; min-width: 0; }

.admin-card .name {
  font-weight: 700;
  font-size: 14.5px;
  color: var(--white);
}

.admin-card .meta {
  font-size: 12px;
  color: var(--muted2);
  margin-top: 2px;
}

.admin-card .price {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  color: var(--gold);
  font-size: 14px;
  margin-top: 4px;
}

.admin-card .row-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.row-actions button {
  font-size: 12px;
  padding: 5px 11px;
  border-radius: 100px;
  border: none;
  cursor: pointer;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  transition: opacity .15s, transform .15s;
}

.row-actions button:hover { opacity: .85; transform: translateY(-1px); }

.edit-btn   { background: var(--bg3); color: var(--muted); border: 1px solid var(--border2); }
.toggle-btn { background: var(--green); color: #fff; }
.toggle-btn.inactive { background: var(--bg3); color: var(--muted2); border: 1px solid var(--border2); }
.delete-btn { background: rgba(232,93,26,.15); color: var(--flame); border: 1px solid rgba(232,93,26,.25); }
.delete-btn:hover { background: var(--flame) !important; color: #fff !important; }

/* ── Category rows ── */
.cat-row {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  padding: 12px 14px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.cat-row .cat-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--white);
}

.cat-row .cat-count {
  font-size: 12px;
  color: var(--muted2);
  margin-left: 6px;
}

.cat-del-btn {
  background: none;
  border: 1px solid rgba(232,93,26,.3);
  color: var(--flame);
  border-radius: 100px;
  padding: 4px 12px;
  font-size: 12px;
  cursor: pointer;
  font-weight: 600;
  transition: background .15s;
}

.cat-del-btn:hover:not(:disabled) { background: var(--flame); color: #fff; }
.cat-del-btn:disabled { opacity: .35; cursor: not-allowed; }

/* ── Toggle switches ── */
.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  gap: 14px;
}

.toggle-row:last-child { border-bottom: none; }

.toggle-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--cream);
}

.toggle-label small {
  display: block;
  color: var(--muted2);
  font-size: 11.5px;
  font-weight: 400;
  margin-top: 2px;
}

.switch {
  position: relative;
  width: 46px; height: 26px;
  flex-shrink: 0;
}

.switch input { opacity: 0; width: 0; height: 0; }

.slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: 26px;
  transition: .2s;
}

.slider::before {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  left: 3px; bottom: 3px;
  background: var(--muted2);
  border-radius: 50%;
  transition: .2s;
}

input:checked + .slider { background: var(--flame); border-color: var(--flame); }
input:checked + .slider::before { background: #fff; transform: translateX(20px); }

/* ── QR ── */
#qr-preview {
  text-align: center;
  margin-top: 16px;
}

#qr-preview img {
  max-width: 200px;
  border-radius: var(--r2);
  border: 4px solid var(--card2);
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
}

/* ══════════════════════════════════════════════════════════════════
   ADMIN — PEDIDOS
══════════════════════════════════════════════════════════════════ */
.orders-filter-bar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.orders-filter-btn {
  padding: 6px 14px;
  border-radius: 100px;
  border: 1px solid var(--border2);
  background: transparent;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: all .15s;
}
.orders-filter-btn:hover { border-color: var(--flame); color: var(--cream); }
.orders-filter-btn.active {
  background: rgba(232,93,26,.12);
  border-color: var(--flame);
  color: var(--flame2);
}

/* Tarjeta de pedido */
.order-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 14px 16px;
  margin-bottom: 10px;
  transition: border-color .2s;
}
.order-card:hover { border-color: var(--border2); }

.order-card.status-new       { border-left: 3px solid var(--gold); }
.order-card.status-confirmed { border-left: 3px solid var(--green2); }
.order-card.status-done      { border-left: 3px solid var(--muted2); opacity: .7; }

.order-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.order-customer {
  font-weight: 700;
  font-size: 14.5px;
  color: var(--white);
}

.order-phone {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 1px;
}

.order-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 2px;
}

.order-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 100px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.badge-new       { background: rgba(212,168,67,.15); color: var(--gold); border: 1px solid rgba(212,168,67,.3); }
.badge-confirmed { background: rgba(61,122,69,.18);  color: var(--green2); border: 1px solid rgba(61,122,69,.3); }
.badge-done      { background: rgba(138,106,80,.12); color: var(--muted); border: 1px solid rgba(138,106,80,.25); }

.order-total {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 15px;
  color: var(--gold);
  white-space: nowrap;
}

.order-items {
  font-size: 12.5px;
  color: var(--muted);
  margin-bottom: 10px;
  line-height: 1.6;
}

.order-items strong {
  color: var(--cream);
  font-weight: 600;
}

.order-detail {
  font-size: 12px;
  color: var(--muted2);
  margin-bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.order-detail span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.order-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  border-top: 1px solid var(--border);
  padding-top: 10px;
  margin-top: 2px;
}

.order-actions a,
.order-actions button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 13px;
  border-radius: 100px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  font-family: 'Inter', sans-serif;
  transition: opacity .15s, transform .1s;
  border: none;
}
.order-actions a:hover,
.order-actions button:hover { opacity: .85; transform: translateY(-1px); }

.btn-wa   { background: #25D366; color: #fff; }
.btn-mail { background: var(--bg3); color: var(--muted); border: 1px solid var(--border2); }
.btn-status-confirm { background: var(--green); color: #fff; }
.btn-status-done    { background: var(--bg3); color: var(--muted2); border: 1px solid var(--border2); }
.btn-del-order      { background: rgba(232,93,26,.12); color: var(--flame); border: 1px solid rgba(232,93,26,.25); }
.btn-del-order:hover { background: var(--flame) !important; color: #fff !important; }

.order-date {
  font-size: 11.5px;
  color: var(--muted2);
  margin-left: auto;
}

/* ══════════════════════════════════════════════════════════════════
   ADMIN LOGIN
══════════════════════════════════════════════════════════════════ */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--bg);
}

.login-card {
  background: var(--card);
  border: 1px solid var(--border2);
  border-radius: 20px;
  padding: 36px 28px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 24px 80px rgba(0,0,0,.6);
}

.login-logo {
  text-align: center;
  margin-bottom: 28px;
}

.login-logo img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  filter: drop-shadow(0 4px 16px rgba(232,93,26,.35));
  margin-bottom: 12px;
}

.login-logo h1 {
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  font-size: 1.4rem;        /* ~22px — era 1.6rem (26px) */
  color: var(--white);
}

.login-logo h1 span { color: var(--flame); font-style: italic; }

.login-logo p {
  font-size: 12.5px;
  color: var(--muted2);
  margin-top: 4px;
}

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .menu-brand { font-size: 1.5rem; }    /* ~24px en mobile */
  .menu-logo-img { width: 72px; height: 72px; }
  .product img { width: 60px; height: 60px; }
  .form-row { flex-direction: column; gap: 0; }
  .admin-topbar { padding: 0 14px; }
  .admin-content { padding: 16px 12px 60px; }
}