/* ============================================================
   cliente-live.css – Efectos "vivos" para la tienda del cliente
   ------------------------------------------------------------
   Usa SOLO las variables root definidas en theme.css (--color-*).
   Sin colores hardcodeados: todo se adapta al tema dinámico
   de cada tienda (incluso cambios en vivo desde el admin).
   ============================================================ */

/* ===== FONDO VIVO: resplandor ambiental tenue ===== */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(60rem 60rem at 15% -10%, color-mix(in srgb, var(--color-primary) 7%, transparent), transparent 60%),
        radial-gradient(50rem 50rem at 90% 110%, color-mix(in srgb, var(--color-accent) 5%, transparent), transparent 60%);
}

/* ===== HEADER: sombra + borde con brillo ===== */
body > header {
    box-shadow: 0 14px 40px -22px color-mix(in srgb, var(--color-bg-body) 75%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 20%, var(--color-border)) !important;
}

/* ===== NOMBRE DE LA TIENDA: glow sutil ===== */
#restaurant-name {
    text-shadow: 0 0 26px color-mix(in srgb, var(--color-primary) 30%, transparent);
}

/* ===== TARJETAS DE PRODUCTO ===== */
#productos-grid > div {
    position: relative;
    overflow: hidden;
    transition:
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Línea superior con gradiente (como .benefit-card de AutoWeb) */
#productos-grid > div::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-primary), var(--color-accent), transparent);
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

#productos-grid > div:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border)) !important;
    box-shadow:
        0 18px 40px -14px color-mix(in srgb, var(--color-bg-body) 65%, transparent),
        0 0 28px color-mix(in srgb, var(--color-primary) 16%, transparent);
}

#productos-grid > div:hover::before {
    opacity: 1;
}

/* ===== APARICIÓN DE TARJETAS (la clase fade-in ya se usa) ===== */
@keyframes fade-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}
.fade-in {
    animation: fade-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ===== PILLS DE CATEGORÍA ===== */
#categorias-container button.bg-primary {
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #ffffff 16%, transparent),
        inset 0 0 12px color-mix(in srgb, var(--color-primary) 24%, transparent),
        0 6px 16px -10px color-mix(in srgb, var(--color-primary) 50%, transparent) !important;
}
#categorias-container button:not(.bg-primary):hover {
    border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border)) !important;
    box-shadow: 0 4px 12px -10px color-mix(in srgb, var(--color-primary) 35%, transparent);
}

/* ===== BOTONES: iluminación interior (nunca se recorta) =====
   El brillo principal va DENTRO del botón (box-shadow inset):
   los contenedores con overflow (scroll) no pueden cortarlo.
   Solo se suma un halo exterior mínimo y compacto (-12px de spread)
   que cabe en cualquier padding. */
#btn-cart-flotante,
#btn-proceder-pago.bg-primary {
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #ffffff 16%, transparent),
        inset 0 0 16px color-mix(in srgb, var(--color-primary) 26%, transparent),
        0 8px 20px -12px color-mix(in srgb, var(--color-primary) 45%, transparent) !important;
}
#btn-cart-flotante:hover,
#btn-proceder-pago.bg-primary:hover {
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #ffffff 24%, transparent),
        inset 0 0 22px color-mix(in srgb, var(--color-primary) 38%, transparent),
        0 10px 24px -12px color-mix(in srgb, var(--color-primary) 60%, transparent),
        0 0 14px -6px color-mix(in srgb, var(--color-primary) 25%, transparent) !important;
}
#btn-submit-order.bg-accent {
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #ffffff 16%, transparent),
        inset 0 0 16px color-mix(in srgb, var(--color-accent) 26%, transparent),
        0 8px 20px -12px color-mix(in srgb, var(--color-accent) 45%, transparent) !important;
}
#btn-submit-order.bg-accent:hover {
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #ffffff 24%, transparent),
        inset 0 0 22px color-mix(in srgb, var(--color-accent) 38%, transparent),
        0 10px 24px -12px color-mix(in srgb, var(--color-accent) 60%, transparent),
        0 0 14px -6px color-mix(in srgb, var(--color-accent) 25%, transparent) !important;
}

/* Espacio extra abajo del modal de checkout para que el halo exterior
   del botón quepa dentro del área con scroll */
#checkout-modal > div {
    padding-bottom: 2.5rem;
}

/* ===== ACCESIBILIDAD: sin movimiento si el usuario lo pide ===== */
@media (prefers-reduced-motion: reduce) {
    .fade-in { animation: none; }
    #productos-grid > div { transition: none; }
}