/* ==========================================================================
   DRIBBLE NICHE ENGINE — GASTRONOMÍA & DARK LUXURY (ALTO CONTRASTE)
   Blueprint: .agents/skills/dribbble-niche-engine/references/gastronomia.md
   Arquetipo: Nikkei & Izakaya Luxury + Brutalist Gourmet
   Identidad: Obsidiana Volcánica (#07080B), Blanco Puro (#FFFFFF), Ámbar Oro (#F59E0B)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&family=Space+Grotesk:wght@500;600;700;800&family=JetBrains+Mono:wght@500;700&display=swap');

:root {
  --bg-dark: #07080B;
  --bg-surface: #0E1118;
  --bg-card: #10141F;
  --bg-card-hover: #161B29;
  --bg-subtle: #141824;
  
  --text-main: #FFFFFF;
  --text-secondary: #E2E8F0;
  --text-muted: #94A3B8;
  --text-dim: #64748B;
  
  --border-light: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  --border-accent: rgba(245, 158, 11, 0.4);
  
  --accent-amber: #F59E0B;
  --accent-amber-glow: rgba(245, 158, 11, 0.25);
  --accent-cyan: #0284C7;
  --accent-emerald: #10B981;
  --accent-rose: #EF4444;

  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-display: 'Space Grotesk', var(--font-sans);
  --font-mono: 'JetBrains Mono', monospace;

  --shadow-card: 0 10px 25px -5px rgba(0, 0, 0, 0.6), 0 2px 6px -1px rgba(0, 0, 0, 0.4);
  --shadow-glow: 0 0 25px -3px rgba(245, 158, 11, 0.25);
  --shadow-drawer: 0 -15px 40px -5px rgba(0, 0, 0, 0.85);
}

/* ==========================================================================
   REGLAS GLOBALES — ALTO CONTRASTE Y PROFUNDIDAD GASTRONÓMICA
   ========================================================================== */
body,
body.theme-editorial {
  background-color: var(--bg-dark) !important;
  color: var(--text-main) !important;
  font-family: var(--font-sans) !important;
  letter-spacing: -0.015em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Tipografía Display de Alto Impacto */
h1, h2, h3,
.font-display,
.theme-editorial h1,
.theme-editorial h2,
.theme-editorial h3 {
  font-family: var(--font-display) !important;
  letter-spacing: -0.03em !important;
  font-weight: 800;
  color: #FFFFFF !important;
}

/* 1. Superficies Dark Luxury con Máximo Contraste */
.theme-editorial .bg-zinc-950,
.theme-editorial .bg-zinc-950\/90,
.theme-editorial .bg-zinc-950\/80,
.theme-editorial .bg-zinc-950\/70,
.theme-editorial .bg-zinc-950\/60 {
  background-color: var(--bg-surface) !important;
  color: #FFFFFF !important;
}

.theme-editorial .bg-zinc-900,
.theme-editorial .bg-zinc-900\/90,
.theme-editorial .bg-zinc-900\/80 {
  background-color: var(--bg-card) !important;
  color: #FFFFFF !important;
}

.theme-editorial .bg-zinc-800,
.theme-editorial .bg-zinc-800\/80,
.theme-editorial .bg-zinc-800\/60 {
  background-color: var(--bg-subtle) !important;
}

/* 2. Bordes Arquitectónicos de 1px en Alto Contraste */
.theme-editorial .border-zinc-800,
.theme-editorial .border-zinc-800\/80,
.theme-editorial .border-zinc-800\/60,
.theme-editorial .border-zinc-800\/90,
.theme-editorial .border-zinc-700,
.theme-editorial .border-zinc-700\/80 {
  border-color: var(--border-light) !important;
}

.theme-editorial .divide-zinc-800,
.theme-editorial .divide-zinc-800\/60 {
  border-color: var(--border-light) !important;
}

/* 3. Escala Cromática de Textos — CERO TEXTOS GRISES APAGADOS */
.theme-editorial .text-white,
.theme-editorial .text-zinc-100 {
  color: #FFFFFF !important;
}

.theme-editorial .text-zinc-200,
.theme-editorial .text-zinc-300 {
  color: #F1F5F9 !important;
}

.theme-editorial .text-zinc-400 {
  color: #94A3B8 !important;
}

.theme-editorial .text-zinc-500 {
  color: #64748B !important;
}

/* 4. Form Controls en Dark Obsidian con Texto Nítido */
.theme-editorial input[type="text"],
.theme-editorial input[type="number"],
.theme-editorial input[type="tel"],
.theme-editorial input[type="date"],
.theme-editorial input[type="password"],
.theme-editorial select,
.theme-editorial textarea {
  background-color: #0B0E14 !important;
  color: #FFFFFF !important;
  border: 1px solid var(--border-strong) !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
}

.theme-editorial input::placeholder,
.theme-editorial textarea::placeholder {
  color: #475569 !important;
}

.theme-editorial input:focus,
.theme-editorial select:focus,
.theme-editorial textarea:focus {
  border-color: var(--accent-amber) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.25) !important;
}

/* 5. Tarjetas de Platos — Dribbble Gastronomy Eje Z con Relieve */
.dish-card-editorial,
.theme-editorial .dish-card-editorial {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--border-light) !important;
  border-radius: 20px !important;
  box-shadow: var(--shadow-card) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.dish-card-editorial:hover,
.theme-editorial .dish-card-editorial:hover {
  background-color: var(--bg-card-hover) !important;
  transform: translateY(-2px) scale(1.005) !important;
  border-color: var(--border-accent) !important;
  box-shadow: 0 14px 35px -5px rgba(0, 0, 0, 0.7), var(--shadow-glow) !important;
}

/* 6. Botones de Acción (+ Pedir) — Ámbar Vibrante de Máximo Apetito */
.btn-pedir-pill,
.theme-editorial .btn-pedir-pill {
  background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%) !important;
  color: #000000 !important;
  border-radius: 9999px !important;
  font-weight: 900 !important;
  letter-spacing: -0.01em !important;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  transition: all 0.2s ease !important;
}

.btn-pedir-pill:hover,
.theme-editorial .btn-pedir-pill:hover {
  background: linear-gradient(135deg, #FBBF24 0%, #F59E0B 100%) !important;
  transform: scale(1.05) !important;
  box-shadow: 0 6px 18px rgba(245, 158, 11, 0.5) !important;
}

/* 7. Barra Sticky y Categorías */
.theme-editorial .sticky {
  background-color: rgba(7, 8, 11, 0.92) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-bottom: 1px solid var(--border-light) !important;
}

.cat-pill-active,
.theme-editorial .cat-pill-active {
  background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%) !important;
  color: #000000 !important;
  font-weight: 900 !important;
  box-shadow: 0 0 18px rgba(245, 158, 11, 0.45) !important;
}

.cat-pill-inactive,
.theme-editorial .cat-pill-inactive {
  background-color: #10141F !important;
  color: #94A3B8 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.cat-pill-inactive:hover,
.theme-editorial .cat-pill-inactive:hover {
  background-color: #161B29 !important;
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}

/* 8. Barra Flotante de Carrito (#cart-bar) */
.btn-black-pill,
.theme-editorial .btn-black-pill {
  background: linear-gradient(135deg, #10B981 0%, #059669 100%) !important;
  color: #000000 !important;
  border-radius: 9999px !important;
  font-weight: 900 !important;
  letter-spacing: -0.01em !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), 0 0 25px rgba(16, 185, 129, 0.4) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn-black-pill:hover,
.theme-editorial .btn-black-pill:hover {
  background: linear-gradient(135deg, #34D399 0%, #10B981 100%) !important;
  transform: translateY(-2px) scale(1.01) !important;
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.9), 0 0 30px rgba(16, 185, 129, 0.55) !important;
}

/* 9. Micro-Badges Flotantes en Vidrio Oscuro */
.badge-pill-editorial,
.theme-editorial .badge-pill-editorial {
  background: rgba(0, 0, 0, 0.8) !important;
  backdrop-filter: blur(8px) !important;
  color: #FCD34D !important;
  border: 1px solid rgba(245, 158, 11, 0.4) !important;
  border-radius: 9999px !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

/* 10. Drawer de Checkout & Modales */
.theme-editorial #checkout-drawer > div,
.theme-editorial #product-modal > div,
.theme-editorial #caja-chica-modal > div,
.theme-editorial #cobro-mixto-modal > div,
.theme-editorial #relevo-cajero-modal > div,
.theme-editorial #config-modal > div,
.theme-editorial #table-success-modal > div {
  background-color: var(--bg-surface) !important;
  border: 1px solid var(--border-strong) !important;
  box-shadow: var(--shadow-drawer) !important;
  color: #FFFFFF !important;
}

/* 11. Resumen de Costos y Desglose Tributario SUNAT */
.theme-editorial .tax-breakdown-box {
  background-color: #0A0D14 !important;
  border: 1px solid var(--border-light) !important;
  border-radius: 14px !important;
}

/* 12. Top Notice Bar Dark */
.top-notice-bar,
.theme-editorial .top-notice-bar {
  background-color: #0A0D14 !important;
  border-bottom: 1px solid var(--border-light) !important;
  color: #CBD5E1 !important;
}

/* ==========================================================================
   AISLAMIENTO ESTRICTO DE IMPRESIÓN TÉRMICA (ESC/POS 58mm / 80mm)
   ========================================================================== */
@media print {
  body,
  body.theme-editorial {
    background: #FFFFFF !important;
    color: #000000 !important;
  }
}