/* ==========================================
   BURGER & DOGS EXPRESS - DESIGN SYSTEM & STYLES
   Estética gourmet, cálida y artesanal (Sin aspecto de plantilla IA)
   ========================================== */

/* ------------------------------------------
   VARIABLES DE COLOR Y TEMAS (MODO CLARO POR DEFECTO)
   ------------------------------------------ */
:root,
html[data-theme="light"] {
    --bg-main: #F9F7F2;          /* Fondo cálido crema / pergamino */
    --bg-surface: #FFFFFF;       /* Superficie blanca */
    --bg-card: #FFFFFF;          /* Tarjetas limpias */
    --bg-muted: #F2ECE1;         /* Contenedores secundarios */
    --bg-subtle: #FDFBF7;
    
    --border: #E8E0D2;           /* Bordes suaves cálidos */
    --border-hover: #D6CABA;
    --border-focus: #DC2626;

    --text-primary: #1C1917;     /* Texto principal carbón profundo */
    --text-secondary: #57534E;   /* Texto secundario cálido */
    --text-muted: #8A8175;       /* Texto tenue */

    --brand-red: #D92626;        /* Rojo parrilla / smashburger */
    --brand-red-hover: #B91C1C;
    --brand-red-light: #FEE2E2;
    --brand-red-text: #991B1B;

    --brand-gold: #D97706;       /* Amarillo queso cheddar artesanal */
    --brand-gold-hover: #B45309;
    --brand-gold-light: #FEF3C7;
    --brand-gold-text: #92400E;

    --brand-green: #16A34A;      /* Verde WhatsApp / éxito */
    --brand-green-light: #DCFCE7;

    --shadow-sm: 0 1px 2px rgba(40, 30, 20, 0.05);
    --shadow-card: 0 4px 14px -2px rgba(45, 30, 15, 0.07), 0 2px 6px -1px rgba(45, 30, 15, 0.04);
    --shadow-card-hover: 0 14px 28px -4px rgba(45, 30, 15, 0.12), 0 6px 12px -2px rgba(45, 30, 15, 0.06);
    --shadow-modal: 0 25px 50px -12px rgba(30, 20, 10, 0.25);
}

/* Modo oscuro moderno y elegante (Gris neutro y carbón profundo, sin tono café) */
html[data-theme="dark"] {
    --bg-main: #0B0B0C;          /* Fondo carbón puro y profundo */
    --bg-surface: #131316;       /* Superficie oscura elegante */
    --bg-card: #1A1A1E;          /* Tarjetas oscuras limpias */
    --bg-muted: #232328;         /* Contenedores secundarios */
    --bg-subtle: #111113;
    
    --border: #2C2C32;           /* Bordes neutros sutiles */
    --border-hover: #404049;
    --border-focus: #EF4444;

    --text-primary: #F4F4F6;     /* Blanco suave de alta legibilidad */
    --text-secondary: #A1A1AA;   /* Gris neutro */
    --text-muted: #71717A;       /* Texto tenue */

    --brand-red: #EF4444;
    --brand-red-hover: #DC2626;
    --brand-red-light: #2A1313;
    --brand-red-text: #FCA5A5;

    --brand-gold: #F59E0B;
    --brand-gold-hover: #D97706;
    --brand-gold-light: #2A1F0E;
    --brand-gold-text: #FDE68A;

    --brand-green: #22C55E;
    --brand-green-light: #122818;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
    --shadow-card: 0 4px 16px -2px rgba(0, 0, 0, 0.6);
    --shadow-card-hover: 0 14px 30px -4px rgba(0, 0, 0, 0.85);
    --shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.95);
}

/* ------------------------------------------
   RESET Y BASE TIPOGRÁFICA
   ------------------------------------------ */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--bg-main);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.25s ease, color 0.25s ease;
    line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Outfit', 'Hanken Grotesk', sans-serif;
    letter-spacing: -0.02em;
}

/* Voz tipográfica de marca: reservada solo para el titular del hero y el
   nombre del platillo en el modal. Un producto operativo no necesita una
   display font en botones, controles, tarjetas o el logotipo — pero un
   titular grande sí se gana una voz propia. */
.font-display {
    font-family: 'Bitter', 'Outfit', Georgia, serif;
    letter-spacing: -0.01em;
}

/* Scrollbar personalizado y discreto: el track es transparente para que
   nunca se vea como una franja de color pegada al borde de tarjetas o
   modales, sin importar el fondo sobre el que aparezca. */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border-hover) transparent;
}
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: var(--border-hover);
    border-radius: 9999px;
    border: 1px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
    background-clip: padding-box;
}

/* Ocultar barra de scroll horizontal */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}
.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* ------------------------------------------
   HERO
   ------------------------------------------ */
.hero-panel {
    background-color: var(--bg-card);
    background-image:
        radial-gradient(circle at 14px 14px, var(--border) 1.4px, transparent 1.4px),
        radial-gradient(650px circle at 92% -10%, var(--brand-red-light) 0%, transparent 60%);
    background-size: 28px 28px, 100% 100%;
    background-position: -6px -6px, 0 0;
}
html[data-theme="dark"] .hero-panel {
    background-image:
        radial-gradient(circle at 14px 14px, var(--border) 1.4px, transparent 1.4px),
        radial-gradient(650px circle at 92% -10%, rgba(239, 68, 68, 0.12) 0%, transparent 60%);
}

/* ------------------------------------------
   COMPONENTES Y TARJETAS DE COMIDA
   ------------------------------------------ */
.theme-surface {
    background-color: var(--bg-surface);
}

.theme-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-card);
}

.theme-muted {
    background-color: var(--bg-muted);
}

/* Tarjeta de Producto */
.product-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-card);
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, border-color 0.2s ease;
}

.product-card:hover {
    transform: translateY(-3px);
    border-color: var(--border-hover);
    box-shadow: var(--shadow-card-hover);
}

/* Chips de Categorías */
.category-pill {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.category-pill.active {
    background-color: var(--brand-red);
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(217, 38, 38, 0.3);
}

/* Chips del Personalizador ("¿Qué le quitamos?") */
.chip-remove {
    transition: all 0.18s ease;
    cursor: pointer;
    user-select: none;
    border: 1px solid var(--border);
    background-color: var(--bg-muted);
    color: var(--text-primary);
}

.chip-remove:hover {
    border-color: var(--brand-red);
    background-color: var(--brand-red-light);
}

/* Estado cuando el ingrediente SE QUITA */
.chip-remove.is-removed {
    background-color: var(--brand-red-light) !important;
    border-color: var(--brand-red) !important;
    color: var(--brand-red-text) !important;
    font-weight: 600;
}

.chip-remove.is-removed .chip-text {
    text-decoration: line-through;
    opacity: 0.85;
}

/* Chips de Extras ("¿Qué le agregamos?") */
.chip-extra {
    transition: all 0.18s ease;
    cursor: pointer;
    user-select: none;
    border: 1px solid var(--border);
    background-color: var(--bg-card);
    color: var(--text-primary);
}

.chip-extra:hover {
    border-color: var(--brand-gold);
    background-color: var(--brand-gold-light);
}

/* Estado cuando el Extra ESTÁ SELECCIONADO */
.chip-extra.is-selected {
    background-color: var(--brand-gold-light) !important;
    border-color: var(--brand-gold) !important;
    color: var(--brand-gold-text) !important;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(217, 119, 6, 0.15);
}

/* Botones rápidos de notas de cocina */
.quick-note-tag {
    cursor: pointer;
    transition: all 0.15s ease;
    background-color: var(--bg-muted);
    border: 1px dashed var(--border);
    color: var(--text-secondary);
}
.quick-note-tag:hover {
    border-color: var(--brand-red);
    color: var(--brand-red);
    background-color: var(--brand-red-light);
}

/* ------------------------------------------
   BOTONES Y ACCIONES
   ------------------------------------------ */
.btn-primary-food {
    background-color: var(--brand-red);
    color: #FFFFFF;
    font-weight: 700;
    transition: transform 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 1px 2px rgba(30, 10, 8, 0.35), 0 8px 20px -8px rgba(217, 38, 38, 0.55);
}
.btn-primary-food:hover {
    background-color: var(--brand-red-hover);
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 2px 4px rgba(30, 10, 8, 0.35), 0 10px 24px -8px rgba(217, 38, 38, 0.6);
}
.btn-primary-food:active {
    transform: translateY(0);
    box-shadow: inset 0 1px 3px rgba(30, 10, 8, 0.35);
}
.btn-primary-food:disabled {
    background-color: var(--text-muted);
    box-shadow: none;
    transform: none;
}

.btn-secondary-food {
    background-color: var(--bg-muted);
    color: var(--text-primary);
    border: 1px solid var(--border);
    font-weight: 600;
    transition: background-color 0.16s ease, border-color 0.16s ease;
}
.btn-secondary-food:hover {
    background-color: var(--border);
    border-color: var(--border-hover);
}

.btn-whatsapp-glow {
    background-color: #1FAE59;
    color: #FFFFFF;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 8px 20px -8px rgba(31, 174, 89, 0.6);
    transition: transform 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}
.btn-whatsapp-glow:hover {
    background-color: #1B9950;
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 10px 24px -8px rgba(31, 174, 89, 0.65);
}

/* Botón flotante WhatsApp: una elevación sutil y constante, no un rebote
   infinito que compite por atención en cada fotograma. */
.floating-whatsapp-btn {
    box-shadow: 0 10px 24px -6px rgba(31, 174, 89, 0.45);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.floating-whatsapp-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px -6px rgba(31, 174, 89, 0.55);
}

/* ------------------------------------------
   MODALES Y ANIMACIONES
   ------------------------------------------ */
@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: translateY(24px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.animate-modal-in {
    animation: modalFadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Badge de conteo: una entrada rápida y segura, sin rebote elástico. */
.bounce-badge {
    animation: badgePop 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes badgePop {
    0% { transform: scale(0.5); }
    100% { transform: scale(1); }
}

/* Toast */
.toast-slide-in {
    animation: toastPop 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes toastPop {
    from {
        opacity: 0;
        transform: translateY(-16px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ------------------------------------------
   ESTADOS DE FOCO Y ACCESIBILIDAD
   ------------------------------------------ */
input:focus, button:focus-visible, select:focus, textarea:focus {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}