/* =============================================================
   ANTOJOS & MECATOS — styles.css
   =============================================================
   Este archivo NO contiene colores — todos viven en colores.css
   Aquí solo hay estructura: animaciones, layout, tamaños, grid.

   GUÍA RÁPIDA:
   → Animaciones de modales:       sección "MODALES"
   → Grid de tarjetas:             sección "CATEGORIES GRID"
   → Hover y filtrado de tarjetas: sección "TARJETAS"
   → Imágenes uniformes:           sección "CARD IMAGES"
   → Tabla de precios pizza:       sección "PIZZA TABLE"
   → Toggle tipo de entrega:       sección "TIPO DE ENTREGA"
   → Badge Abierto/Cerrado:        sección "STATUS"
   → Scrollbar personalizada:      sección "SCROLLBAR"
   → Mejoras móvil (bottom sheet): sección "MOBILE"
   ============================================================= */


/* =========================================================
   MODALES — Animaciones de apertura (backdrop + panel)
   ========================================================= */
@keyframes backdropFadeIn {
    from { background-color: rgba(0,0,0,0);    backdrop-filter: blur(0px); }
    to   { background-color: rgba(0,0,0,0.85); backdrop-filter: blur(6px); }
}
@keyframes slideUpIn {
    from { opacity: 0; transform: translateY(16px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)    scale(1);    }
}
@keyframes slideUpFromBottom {
    from { opacity: 0; transform: translateY(80px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* Backdrop */
#cart-modal:not(.hidden),
#category-modal:not(.hidden),
#mision-vision-modal:not(.hidden),
#adicional-modal:not(.hidden),
#instrucciones-modal:not(.hidden),
#custom-alert:not(.hidden) {
    animation: backdropFadeIn 0.25s cubic-bezier(0.16,1,0.3,1) forwards;
}
/* Panel */
#cart-modal:not(.hidden) > div,
#category-modal:not(.hidden) > div,
#mision-vision-modal:not(.hidden) > div,
#adicional-modal:not(.hidden) > div,
#instrucciones-modal:not(.hidden) > div,
#custom-alert:not(.hidden) > div {
    animation: slideUpIn 0.35s cubic-bezier(0.16,1,0.3,1) forwards;
}


/* =========================================================
   CATEGORIES GRID — Flex centrado, tarjetas del mismo tamaño
   justify-content:center → la última fila siempre centrada.
   ========================================================= */
#categories-grid {
    display:         flex !important;
    flex-wrap:       wrap;
    justify-content: center;
    gap:             1.25rem;
    align-items:     stretch;
}

/* Tamaño de tarjeta por breakpoint — 1 columna por defecto */
.menu-card { width: 100%; }

/* 2 columnas: ≥ 480 px */
@media (min-width: 480px) {
    .menu-card { width: calc(50% - 0.625rem); }
}
/* 3 columnas: ≥ 768 px */
@media (min-width: 768px) {
    .menu-card { width: calc(33.333% - 0.834rem); }
}
/* 4 columnas: ≥ 1024 px */
@media (min-width: 1024px) {
    .menu-card { width: calc(25% - 0.9375rem); }
}
/* 5 columnas: ≥ 1280 px */
@media (min-width: 1280px) {
    .menu-card { width: calc(20% - 1rem); }
}


/* =========================================================
   TARJETAS DE CATEGORÍA — hover y filtrado
   ========================================================= */
.menu-card {
    transition: transform        0.4s cubic-bezier(0.16,1,0.3,1),
                opacity          0.3s ease,
                border-color     0.4s ease,
                background-color 0.4s ease,
                box-shadow       0.4s ease;
}
.menu-card:hover {
    transform:        translateY(-6px);
    border-color:     rgb(var(--c-primary) / 0.5);
    background-color: rgb(var(--c-surface) / 0.85);
    box-shadow:       0 20px 30px -10px rgb(var(--c-primary) / 0.15);
}
/* Oculto por búsqueda */
.menu-card.search-hidden {
    opacity:        0;
    transform:      scale(0.95) translateY(8px);
    pointer-events: none;
    visibility:     hidden;
    position:       absolute;
    width:          0; height: 0;
    padding: 0; margin: 0;
    overflow:       hidden;
    border-width:   0;
}


/* =========================================================
   CARD IMAGES — Tamaño uniforme 16/9
   ========================================================= */
.card-img-wrapper {
    position:      relative;
    width:         100%;
    aspect-ratio:  16 / 9;
    overflow:      hidden;
    border-radius: 0.75rem;
    background:    rgb(var(--c-surface-2));
}
.card-img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    display: block; z-index: 1;
    transition: transform 0.45s cubic-bezier(0.16,1,0.3,1);
}
.menu-card:hover .card-img { transform: scale(1.07); }
.card-img.img-error { display: none; }
.card-img-fallback {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 2.75rem; background: rgb(var(--c-surface-2)); z-index: 0;
}


/* =========================================================
   PIZZA TABLE — Scroll suave horizontal en móvil
   ========================================================= */
.pizza-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 0.875rem;
    border: 1px solid rgb(var(--c-border));
}
.pizza-table-wrap table {
    border-collapse: collapse;
    width: 100%;
    min-width: 420px;
}
.pizza-table-wrap thead tr {
    background: rgb(var(--c-elevated) / 0.5);
    border-bottom: 1px solid rgb(var(--c-border));
}
.pizza-table-wrap th {
    padding: 10px 12px;
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgb(var(--c-text-faint));
    white-space: nowrap;
}
.pizza-table-wrap th:first-child { text-align: left; }
.pizza-table-wrap th:not(:first-child) { text-align: center; }

.pizza-table-wrap tbody tr {
    border-bottom: 1px solid rgb(var(--c-border) / 0.6);
    transition: background 0.15s;
}
.pizza-table-wrap tbody tr:last-child { border-bottom: none; }
.pizza-table-wrap tbody tr:hover { background: rgb(var(--c-elevated) / 0.35); }
.pizza-table-wrap td {
    padding: 9px 12px;
    font-size: 11px;
    white-space: nowrap;
    color: rgb(var(--c-text-muted));
    font-weight: 600;
}
.pizza-table-wrap td:not(:first-child) {
    text-align: center;
    color: rgb(var(--c-primary));
    font-weight: 700;
}
.pizza-table-wrap td.na { color: rgb(var(--c-text-faint)); font-weight: 400; }


/* =========================================================
   TIPO DE ENTREGA — Botones toggle en el carrito
   ========================================================= */
.tipo-entrega-btn {
    flex: 1;
    padding: 10px 8px;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 0.75rem;
    border: 1px solid transparent;
    transition: all 0.2s;
    cursor: pointer;
}
.tipo-entrega-btn.activo {
    background: rgb(var(--c-primary));
    border-color: rgb(var(--c-primary));
    color: rgb(var(--c-bg));
}
.tipo-entrega-btn.inactivo {
    background: rgb(var(--c-elevated));
    border-color: rgb(var(--c-border));
    color: rgb(var(--c-text-muted));
}
.tipo-entrega-btn.inactivo:hover {
    background: rgb(var(--c-elevated-hover));
    color: rgb(var(--c-text));
}


/* =========================================================
   STATUS — Indicador Abierto/Cerrado
   ========================================================= */
@keyframes statusPulse {
    0%,100% { opacity:1;   transform:scale(1);    }
    50%      { opacity:0.5; transform:scale(1.15); }
}
.dot { animation: statusPulse 2s infinite ease-in-out; }


/* =========================================================
   SCROLLBAR
   ========================================================= */
::-webkit-scrollbar       { width:6px; height:6px; }
::-webkit-scrollbar-track { background: rgb(var(--c-bg)); }
::-webkit-scrollbar-thumb { background: rgb(var(--c-elevated)); border-radius:9999px; }
::-webkit-scrollbar-thumb:hover { background: rgb(var(--c-primary)); }


/* =========================================================
   MOBILE — Bottom-sheet y mejoras táctiles
   ========================================================= */
@media (max-width: 640px) {

    #cart-modal, #category-modal { align-items:flex-end; padding:0; }

    #cart-modal:not(.hidden) > div,
    #category-modal:not(.hidden) > div {
        animation: slideUpFromBottom 0.4s cubic-bezier(0.16,1,0.3,1) forwards;
    }
    #cart-modal > div {
        border-radius: 1.25rem 1.25rem 0 0;
        max-width:100%; width:100%;
        height:92vh; height:92dvh;
        max-height:92vh; max-height:92dvh;
    }
    #category-modal > div {
        border-radius: 1.25rem 1.25rem 0 0;
        max-width:100%; width:100%;
        max-height:90vh; max-height:90dvh;
    }

    #instrucciones-modal, #adicional-modal,
    #custom-alert, #mision-vision-modal {
        align-items:flex-end; padding:0;
    }
    #instrucciones-modal:not(.hidden) > div,
    #adicional-modal:not(.hidden) > div,
    #custom-alert:not(.hidden) > div,
    #mision-vision-modal:not(.hidden) > div {
        animation: slideUpFromBottom 0.35s cubic-bezier(0.16,1,0.3,1) forwards;
    }
    #instrucciones-modal > div,
    #adicional-modal > div,
    #custom-alert > div {
        border-radius: 1.25rem 1.25rem 0 0;
        max-width:100%; width:100%;
        padding-bottom: max(1.75rem, env(safe-area-inset-bottom, 1.75rem));
    }
    #mision-vision-modal > div {
        border-radius: 1.25rem 1.25rem 0 0;
        max-width:100%; width:100%;
        max-height:88vh; max-height:88dvh;
        padding-bottom: max(1.5rem, env(safe-area-inset-bottom, 1.5rem));
    }

    /* Botones más grandes para dedos */
    .open-category-modal-btn  { min-height:50px; font-size:0.7rem; }
    .add-product-btn           { min-height:46px; }
    #checkout-btn              { min-height:52px; font-size:0.7rem; }
    #confirmar-instrucciones-btn,
    #cancelar-instrucciones-btn,
    #confirmar-adicional-btn,
    #cancelar-adicional-btn    { min-height:48px; }
    .tipo-entrega-btn          { min-height:46px; }
}
/* =============================================================
   ANTOJOS & MECATOS — colores.css
   =============================================================
   ÚNICO ARCHIVO QUE NECESITAS TOCAR PARA CAMBIAR EL TEMA.
   Todos los colores del sitio (botones, fondos, textos, bordes)
   salen de las variables de aquí abajo. Cambia un valor y se
   actualiza en TODA la página automáticamente.

   Colores extraídos directamente del logo de Antojos & Mecatos:
   dorado de las hojas + negro del círculo + blanco del texto.

   Formato: cada color va en "R G B" (sin comas, sin rgb()).
   Así Tailwind puede aplicar transparencias como bg-mostaza/20
   ============================================================= */

:root {

    /* ============================================
       1. COLOR DE MARCA — dorado del logo
       Úsalo en botones principales, precios, acentos
       ============================================ */
    --c-primary:         209 181 75;
    --c-primary-hover:   184 156 55;
    --c-primary-light:   235 216 140;


    /* ============================================
       2. FONDOS — negro del logo
       Jerarquía: fondo > superficie > superficie2
       (cada nivel un poco más claro/oscuro que el anterior)
       ============================================ */
    --c-bg:              16 15 13;
    --c-surface:         25 24 22;
    --c-surface-2:       33 31 28;
    --c-elevated:        42 39 36;
    --c-elevated-hover: 56 51 42;     /* #383329  botones secundarios hover */


    /* ============================================
       3. BORDES
       ============================================ */
    
    --c-border:          65 62 58; /* #383228  borde estándar sutil      */


    /* ============================================
       4. TEXTO — blanco del logo
       ============================================ */
    --c-text:            248 248 246;
    --c-text-muted:      205 205 198;
    --c-text-faint:      160 160 154;



    /* ============================================
       5. ESTADOS — semáforos de la app
       ============================================ */
    --c-success:        74 222 128;   /* verde  — Badge "Abierto"           */
    --c-closed:         196 146 74;   /* ámbar  — Badge "Cerrado"           */
    --c-danger:         248 113 113;  /* rojo   — alertas/errores           */

}

/* =============================================================
   GUÍA RÁPIDA DE PERSONALIZACIÓN
   =============================================================
   ¿Quieres cambiar el color principal (dorado) por otro?
   Solo edita estas 3 líneas con tu nuevo color en formato "R G B":

       --c-primary:        209 181 75;
       --c-primary-hover:  168 145 58;   (≈20% más oscuro que el principal)
       --c-primary-light:  225 207 138;  (≈35% más claro que el principal)

   Ejemplo — si quisieras rojo clásico de comida rápida:
       --c-primary:        220 38 38;    (#DC2626)
       --c-primary-hover:  185 28 28;    (#B91C1C)
       --c-primary-light:  248 113 113;  (#F87171)
   ============================================================= */