/* ============================================================
   COLORES: NO se escriben aquí. Todos salen de colors.js, que crea las
   variables var(--primary-500), var(--secondary-700), var(--tertiary-200),
   var(--quaternary-600), etc. (números 50 = claro ... 900 = oscuro).
   Para cambiar la paleta edita SOLO colors.js.
   ============================================================ */

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--tertiary-200);
    color: var(--secondary-800);
    overflow-x: hidden;
    position: relative;
}

/* Imagen de fondo de toda la página — para cambiarla, reemplaza el archivo fondo.png
   (mismo nombre) o cambia "fondo.png" aquí abajo por el nombre de tu nueva imagen. */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -2;
    background-image: url('fondo.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* Capa semitransparente sobre la foto para que el texto y las tarjetas blancas
   sigan siendo legibles. Sube/baja el 0.86 para aclarar u oscurecer el fondo. */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background-color: var(--tertiary-200);
    opacity: 0.94;
}

/* Honeycomb Animated Background Pattern */
.bg-honeycomb {
    /* solo puntos dorados sobre fondo transparente (así no "ensucian" los fondos oscuros del hero) */
    background-image: radial-gradient(var(--primary-500) 1px, transparent 1.2px), radial-gradient(var(--primary-500) 1px, transparent 1.2px);
    background-size: 30px 30px;
    background-position: 0 0, 15px 15px;
}

/* Pulse glow animation for header logo */
@keyframes beeGlow {
    0%, 100% { transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 8px rgb(var(--primary-rgb) / 0.6)); }
    50% { transform: scale(1.08) rotate(5deg); filter: drop-shadow(0 0 16px rgb(var(--primary-rgb) / 0.9)); }
}

.animate-bee {
    animation: beeGlow 3s infinite ease-in-out;
}

/* Custom Glassmorphism Header */
.glass-nav {
    background: var(--primary-500);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 10px 30px -10px rgb(var(--secondary-rgb) / 0.45);
}

/* Custom Scrollbar Styling */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: var(--primary-600);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--primary-700);
}

/* Modal Animations */
.modal-active {
    display: flex !important;
    animation: fadeIn 0.25s ease-out forwards;
}

@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: scale(1); }
}

/* Badge Pop Effect */
.badge-pop {
    animation: pop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.4); }
    100% { transform: scale(1); }
}

/* ============================================================
   PANTALLA DE CARGA — arepa que se va acabando a mordiscos + texto.
   La arepa es un SVG dentro de index.html; los colores salen de colors.js.
   - Tamaño: cambia "--w" de .loader-scene (todo se escala solo).
   - Velocidad: cambia la duración (5.2s) en .arepa-wrap, .arepa-state y .crumb.
   - Cada mordisco es una capa (.arepa-state-1 ... .arepa-state-8, @keyframes arepaS1...) y sus migajas (.crumb-N)
     tienen su propio @keyframes con el momento en que ocurre (en % del ciclo).
   ============================================================ */
#pageLoader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(var(--tertiary-rgb) / 0.45);
    -webkit-backdrop-filter: blur(14px);
            backdrop-filter: blur(14px);
    transition: opacity 0.6s ease, visibility 0.6s ease;
}

/* En celulares / pantallas táctiles el desenfoque de toda la pantalla es pesado y hace que la animación vaya a tirones:
   se cambia por un fondo casi opaco con el mismo color. */
@media (max-width: 900px), (hover: none) {
    #pageLoader {
        -webkit-backdrop-filter: none;
                backdrop-filter: none;
        background: rgb(var(--tertiary-rgb) / 0.93);
    }
}

#pageLoader.loader-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loader-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
    padding: 1rem 1.3rem 1.1rem;
    border-radius: 1.5rem;
    background: rgb(var(--tertiary-rgb) / 0.78);
    border: 1px solid rgb(var(--primary-rgb) / 0.45);
    box-shadow: 0 18px 40px -18px rgb(var(--secondary-rgb) / 0.55);
}

/* ---- La animación corre SOLO con opacity y transform sobre elementos HTML: el navegador la maneja aparte del hilo
        principal (compositor), así no se congela aunque el celular esté ocupado cargando la página. ---- */
.loader-scene {
    --w: 128px;                 /* <- tamaño de toda la animación (todo se escala solo) */
    --u: calc(var(--w) / 200);  /* 1 unidad del dibujo = 1/200 del ancho (lo usan las migajas) */
    position: relative;
    width: var(--w);
    aspect-ratio: 128 / 92;     /* mismo alto que antes: el cuadro no cambia de tamaño */
}

/* sacudida suave de la arepa en cada mordisco (opacity + transform) */
.arepa-wrap {
    position: absolute; inset: 0;
    display: flex; align-items: center;
    transform-origin: 50% 55%;
    will-change: transform, opacity;
    animation: arepaLife 5.2s linear infinite;
}
.arepa-box { position: relative; width: 100%; aspect-ratio: 200 / 138; }
.loader-scene > .crumbs { position: absolute; left: 0; top: 50%; transform: translateY(-50%); pointer-events: none; }

/* 9 capas fijas: arepa entera (0) y con 1 ... 8 mordiscos. Solo una se ve a la vez; cambian con un fundido rapidísimo.
   La sombra sigue la forma de la arepa a medida que se la comen. */
.arepa-state {
    position: absolute; inset: 0;
    opacity: 0;
    will-change: opacity;
    animation: 5.2s linear infinite;
    filter: drop-shadow(0 5px 5px rgb(var(--secondary-rgb) / 0.3));
}
.arepa-state svg { display: block; width: 100%; height: 100%; overflow: visible; }
.arepa-state-0 { opacity: 1; }
.arepa-state-0 { animation-name: arepaS0; }
.arepa-state-1 { animation-name: arepaS1; }
.arepa-state-2 { animation-name: arepaS2; }
.arepa-state-3 { animation-name: arepaS3; }
.arepa-state-4 { animation-name: arepaS4; }
.arepa-state-5 { animation-name: arepaS5; }
.arepa-state-6 { animation-name: arepaS6; }
.arepa-state-7 { animation-name: arepaS7; }
.arepa-state-8 { animation-name: arepaS8; }

/* migajas: puntitos que saltan con cada mordisco */
.crumb {
    position: absolute;
    left: calc(var(--cx) / 200 * 100%);
    top: calc((var(--cy) + 2) / 138 * 100%);
    width: calc(var(--r) * 2 * var(--u)); height: calc(var(--r) * 2 * var(--u));
    margin: calc(var(--r) * var(--u) * -1) 0 0 calc(var(--r) * var(--u) * -1);
    border-radius: 50%;
    opacity: 0;
    animation: 5.2s linear infinite;
}
.crumb-1 { animation-name: crumb1; }
.crumb-2 { animation-name: crumb2; }
.crumb-3 { animation-name: crumb3; }
.crumb-4 { animation-name: crumb4; }
.crumb-5 { animation-name: crumb5; }
.crumb-6 { animation-name: crumb6; }
.crumb-7 { animation-name: crumb7; }
.crumb-8 { animation-name: crumb8; }

@keyframes arepaLife {
    0% { opacity: 0; transform: scale(.72) translateY(6px); }
    3.6% { opacity: 1; transform: scale(1.04) translateY(0); }
    5.4% { opacity: 1; transform: scale(1) translateY(0); }
    7.5% { opacity: 1; transform: translate(-2.4px, 0.69px) rotate(-1.6deg) scale(.985); }
    10.6% { opacity: 1; transform: translate(0, 0) rotate(0) scale(1); }
    18.5% { opacity: 1; transform: translate(-2.27px, -0.88px) rotate(-1.6deg) scale(.985); }
    21.6% { opacity: 1; transform: translate(0, 0) rotate(0) scale(1); }
    29.5% { opacity: 1; transform: translate(2.45px, 0.6px) rotate(1.6deg) scale(.985); }
    32.6% { opacity: 1; transform: translate(0, 0) rotate(0) scale(1); }
    40.5% { opacity: 1; transform: translate(2.27px, -0.88px) rotate(1.6deg) scale(.985); }
    43.6% { opacity: 1; transform: translate(0, 0) rotate(0) scale(1); }
    51.5% { opacity: 1; transform: translate(0px, 1.8px) rotate(0deg) scale(.985); }
    54.6% { opacity: 1; transform: translate(0, 0) rotate(0) scale(1); }
    62.5% { opacity: 1; transform: translate(0px, -1.8px) rotate(0deg) scale(.985); }
    65.6% { opacity: 1; transform: translate(0, 0) rotate(0) scale(1); }
    74.5% { opacity: 1; transform: translate(2.55px, 0.35px) rotate(1.6deg) scale(.985); }
    77.6% { opacity: 1; transform: translate(0, 0) rotate(0) scale(1); }
    86.5% { opacity: 1; transform: translate(-2.55px, 0.35px) rotate(-1.6deg) scale(.985); }
    89.6% { opacity: 1; transform: translate(0, 0) rotate(0) scale(1); }
    96% { opacity: 1; transform: scale(1) translateY(0); }
    100% { opacity: 0; transform: scale(.92) translateY(5px); }
}
@keyframes arepaS0 {
    0%, 9.2% { opacity: 1; }
    9.21%, 100% { opacity: 0; }
}
@keyframes arepaS1 {
    0%, 7% { opacity: 0; }
    9.2%, 20.2% { opacity: 1; }
    20.21%, 100% { opacity: 0; }
}
@keyframes arepaS2 {
    0%, 18% { opacity: 0; }
    20.2%, 31.2% { opacity: 1; }
    31.21%, 100% { opacity: 0; }
}
@keyframes arepaS3 {
    0%, 29% { opacity: 0; }
    31.2%, 42.2% { opacity: 1; }
    42.21%, 100% { opacity: 0; }
}
@keyframes arepaS4 {
    0%, 40% { opacity: 0; }
    42.2%, 53.2% { opacity: 1; }
    53.21%, 100% { opacity: 0; }
}
@keyframes arepaS5 {
    0%, 51% { opacity: 0; }
    53.2%, 64.2% { opacity: 1; }
    64.21%, 100% { opacity: 0; }
}
@keyframes arepaS6 {
    0%, 62% { opacity: 0; }
    64.2%, 76.2% { opacity: 1; }
    76.21%, 100% { opacity: 0; }
}
@keyframes arepaS7 {
    0%, 74% { opacity: 0; }
    76.2%, 88.2% { opacity: 1; }
    88.21%, 100% { opacity: 0; }
}
@keyframes arepaS8 {
    0%, 86% { opacity: 0; }
    88.2%, 100% { opacity: 1; }
}
@keyframes crumb1 {
    0%, 7% { opacity: 0; transform: translate(0, 0); }
    7.8% { opacity: 1; }
    11% { opacity: 1; transform: translate(calc(var(--dx) * var(--u) * .7), calc((var(--dy) * .7 - 4) * var(--u))); }
    16%, 100% { opacity: 0; transform: translate(calc(var(--dx) * var(--u)), calc((var(--dy) + 12) * var(--u))); }
}
@keyframes crumb2 {
    0%, 18% { opacity: 0; transform: translate(0, 0); }
    18.8% { opacity: 1; }
    22% { opacity: 1; transform: translate(calc(var(--dx) * var(--u) * .7), calc((var(--dy) * .7 - 4) * var(--u))); }
    27%, 100% { opacity: 0; transform: translate(calc(var(--dx) * var(--u)), calc((var(--dy) + 12) * var(--u))); }
}
@keyframes crumb3 {
    0%, 29% { opacity: 0; transform: translate(0, 0); }
    29.8% { opacity: 1; }
    33% { opacity: 1; transform: translate(calc(var(--dx) * var(--u) * .7), calc((var(--dy) * .7 - 4) * var(--u))); }
    38%, 100% { opacity: 0; transform: translate(calc(var(--dx) * var(--u)), calc((var(--dy) + 12) * var(--u))); }
}
@keyframes crumb4 {
    0%, 40% { opacity: 0; transform: translate(0, 0); }
    40.8% { opacity: 1; }
    44% { opacity: 1; transform: translate(calc(var(--dx) * var(--u) * .7), calc((var(--dy) * .7 - 4) * var(--u))); }
    49%, 100% { opacity: 0; transform: translate(calc(var(--dx) * var(--u)), calc((var(--dy) + 12) * var(--u))); }
}
@keyframes crumb5 {
    0%, 51% { opacity: 0; transform: translate(0, 0); }
    51.8% { opacity: 1; }
    55% { opacity: 1; transform: translate(calc(var(--dx) * var(--u) * .7), calc((var(--dy) * .7 - 4) * var(--u))); }
    60%, 100% { opacity: 0; transform: translate(calc(var(--dx) * var(--u)), calc((var(--dy) + 12) * var(--u))); }
}
@keyframes crumb6 {
    0%, 62% { opacity: 0; transform: translate(0, 0); }
    62.8% { opacity: 1; }
    66% { opacity: 1; transform: translate(calc(var(--dx) * var(--u) * .7), calc((var(--dy) * .7 - 4) * var(--u))); }
    71%, 100% { opacity: 0; transform: translate(calc(var(--dx) * var(--u)), calc((var(--dy) + 12) * var(--u))); }
}
@keyframes crumb7 {
    0%, 74% { opacity: 0; transform: translate(0, 0); }
    74.8% { opacity: 1; }
    78% { opacity: 1; transform: translate(calc(var(--dx) * var(--u) * .7), calc((var(--dy) * .7 - 4) * var(--u))); }
    83%, 100% { opacity: 0; transform: translate(calc(var(--dx) * var(--u)), calc((var(--dy) + 12) * var(--u))); }
}
@keyframes crumb8 {
    0%, 86% { opacity: 0; transform: translate(0, 0); }
    86.8% { opacity: 1; }
    90% { opacity: 1; transform: translate(calc(var(--dx) * var(--u) * .7), calc((var(--dy) * .7 - 4) * var(--u))); }
    95%, 100% { opacity: 0; transform: translate(calc(var(--dx) * var(--u)), calc((var(--dy) + 12) * var(--u))); }
}

/* Si el celular tiene "reducir movimiento" (Android: Quitar animaciones · iPhone: Reducir movimiento) la arepa YA NO se queda quieta:
   sigue comiéndose con fundidos suaves, pero sin sacudidas ni migajas saltando. */
@keyframes arepaCalm {
    0% { opacity: 0; }
    3.6% { opacity: 1; }
    96% { opacity: 1; }
    100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .arepa-wrap { animation-name: arepaCalm; will-change: opacity; }
    .crumbs { display: none; }
}

.loader-text {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.01em;
    color: var(--secondary-800);
    text-align: center;
    white-space: nowrap;
}

.loader-dots i {
    font-style: normal;
    animation: loaderDot 1.2s infinite both;
}
.loader-dots i:nth-child(2) { animation-delay: 0.2s; }
.loader-dots i:nth-child(3) { animation-delay: 0.4s; }

@keyframes loaderDot {
    0%, 80%, 100% { opacity: 0.15; }
    40%           { opacity: 1; }
}

/* ============================================================
   TOPPINGS / SALSAS / PROTEÍNAS (página principal): pestañas + carrusel
   ============================================================ */
.extras-tab {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.1rem; line-height: 1.2; text-align: center;
    padding: 0.55rem 1rem;
    border-radius: 1.25rem;
    font-weight: 700;
    font-size: 0.85rem;
    background: var(--secondary-100);
    color: var(--secondary-700);
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}
.extras-tab:hover { background: var(--secondary-200); }
.extras-tab.active {
    background: var(--primary-500);
    color: var(--secondary-900);
    box-shadow: 0 6px 14px -4px rgb(var(--primary-rgb) / 0.7);
}

.carousel-grid { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; align-content: flex-start; flex: 1; min-width: 0; }
.carousel-grid.slide-next { animation: carouselNext 0.45s ease-out; }
.carousel-grid.slide-prev { animation: carouselPrev 0.45s ease-out; }

@keyframes carouselNext { from { opacity: 0; transform: translateX(28px); }  to { opacity: 1; transform: translateX(0); } }
@keyframes carouselPrev { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: translateX(0); } }

.extra-card {
    background: var(--tertiary-100);
    border: 1px solid var(--primary-300);
    border-radius: 1rem;
    padding: 1rem 0.5rem;
    text-align: center;
    /* Todas las tarjetas: mismo alto, emoji arriba, nombre al centro y precio SIEMPRE abajo alineado */
    display: flex; flex-direction: column; align-items: center;
    flex: 0 1 11rem; min-width: 0;
}
.extra-emoji { display: block; font-size: 2.25rem; line-height: 1; margin-bottom: 0.5rem; }
.extra-name {
    display: flex; align-items: center; justify-content: center;
    flex: 1 1 auto; min-height: 2.6em;
    font-weight: 700; font-size: 0.8rem; line-height: 1.25;
    color: var(--secondary-900);
    overflow-wrap: anywhere; text-wrap: balance;
}
@media (min-width: 640px) { .extra-name { font-size: 0.875rem; } }
@media (max-width: 639px) {
    /* celular: 2 por fila, y si queda una sola en la última fila se centra */
    .extra-card { flex: 0 1 calc(50% - 0.375rem); max-width: 11rem; }
}
.extra-card .price-pill {
    display: inline-block;
    margin-top: 0.6rem;
    white-space: nowrap;
    padding: 0.15rem 0.75rem;
    border-radius: 9999px;
    border: 1px solid var(--primary-400);
    background: var(--tertiary-50);
    color: var(--primary-700);
    font-weight: 800;
    font-size: 0.7rem;
}

.carousel-arrow {
    flex-shrink: 0;
    width: 2.5rem; height: 2.5rem;
    border-radius: 9999px;
    background: var(--tertiary-50);
    border: 1px solid var(--secondary-200);
    color: var(--secondary-700);
    box-shadow: 0 4px 12px rgb(var(--secondary-rgb) / 0.2);
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s, transform 0.2s;
}
.carousel-arrow:hover { background: var(--primary-100); transform: scale(1.08); }

.carousel-dot {
    width: 0.5rem; height: 0.5rem;
    border-radius: 9999px;
    background: var(--secondary-200);
    transition: width 0.25s, background 0.25s;
}
.carousel-dot { border: 0; padding: 0; cursor: pointer; position: relative; }
.carousel-dot::before { content: ""; position: absolute; inset: -8px -4px; }
.carousel-dot.active { width: 1.6rem; background: var(--primary-500); }

/* ============================================================
   RESEÑAS DE CLIENTES (carrusel automático + flechas manuales)
   ============================================================ */
.review-card {
    position: relative;
    flex: 1; min-width: 0;
    background: var(--tertiary-50);
    border: 2px solid var(--primary-400);
    border-radius: 1.75rem;
    padding: 1.75rem 2.25rem 1.75rem 1.75rem;
    box-shadow: 0 10px 30px -12px rgb(var(--secondary-rgb) / 0.25);
    min-height: 9.5rem;
    display: flex; flex-direction: column; justify-content: center;
    overflow: hidden;
}
.review-quote-icon {
    color: var(--primary-300);
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
    display: block;
}
.review-dot {
    position: absolute;
    bottom: 1.1rem; right: 1.25rem;
    width: 0.65rem; height: 0.65rem;
    border-radius: 9999px;
    background: var(--primary-500);
}
#reviewContent.review-fade-in { animation: reviewFadeIn 0.4s ease-out; }
@keyframes reviewFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 639px) {
    .review-card { padding: 1.5rem 1.5rem 1.5rem 1.25rem; }
}

/* ============================================================
   CARRUSEL DE MEDIA DEL HERO (imágenes/video que rotan solos)
   ============================================================ */
/* Carrusel del hero: franja panorámica debajo de la tarjeta de bienvenida */
.hero-carousel-wrap { margin-top: 1.5rem; }
.hero-carousel-frame {
    aspect-ratio: 3 / 1;
    /* fondo café→naranja de la marca (mismos tonos que la tarjeta oscura), sin capa clara encima */
    background-color: #3f2511;
    background-image: linear-gradient(to bottom right, #3f2511, #553217, #9b390d);
}
@media (max-width: 639px) { .hero-carousel-frame { aspect-ratio: 16 / 10; } }
.hero-carousel { position: relative; width: 100%; height: 100%; border-radius: 1rem; overflow: hidden; }
.hero-carousel-track { position: relative; width: 100%; height: 100%; }
.hero-carousel-slide {
    position: absolute; inset: 0;
    opacity: 0; visibility: hidden;
    transition: opacity 0.7s ease;
    z-index: 1;
}
.hero-carousel-slide.active { opacity: 1; visibility: visible; z-index: 2; }
.hero-carousel-slide img,
.hero-carousel-slide video { width: 100%; height: 100%; object-fit: cover; border-radius: 1rem; display: block; }

.hero-carousel-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    z-index: 10;
    width: 2.1rem; height: 2.1rem;
    border-radius: 9999px;
    background: var(--tertiary-50);
    border: 1px solid var(--secondary-200);
    color: var(--secondary-700);
    box-shadow: 0 4px 12px rgb(var(--secondary-rgb) / 0.25);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.8rem;
    opacity: 0; pointer-events: none;
    transition: background 0.2s, transform 0.2s, opacity 0.2s;
}
.hero-carousel:hover .hero-carousel-arrow,
.hero-carousel:focus-within .hero-carousel-arrow { opacity: 1; pointer-events: auto; }
.hero-carousel-arrow:hover { background: var(--primary-100); transform: translateY(-50%) scale(1.08); }
.hero-carousel-arrow-left { left: 0.5rem; }
.hero-carousel-arrow-right { right: 0.5rem; }

.hero-carousel-dots {
    position: absolute; bottom: 0.6rem; left: 50%; transform: translateX(-50%);
    z-index: 10;
    display: flex; gap: 0.35rem;
}
.hero-carousel-dots .carousel-dot { background: rgb(255 255 255 / 0.55); }
.hero-carousel-dots .carousel-dot.active { background: var(--primary-500); }

@media (max-width: 639px) {
    /* en celular las flechas siempre visibles, sin depender de hover */
    .hero-carousel-arrow { opacity: 1; pointer-events: auto; width: 1.9rem; height: 1.9rem; }
}

/* ============================================================
   ANIMACIÓN DE ABEJAS — Reemplazo del confeti
   ============================================================ */
.bee-burst {
    position: fixed;
    z-index: 9998;
    pointer-events: none;
    font-size: 22px;
    animation: beeBurstFly 1.1s ease-out forwards;
}

@keyframes beeBurstFly {
    0%   { transform: translate(0, 0) rotate(0deg) scale(0.6); opacity: 1; }
    70%  { opacity: 1; }
    100% { transform: translate(var(--bee-x), var(--bee-y)) rotate(var(--bee-rot)) scale(1); opacity: 0; }
}

/* ============================================================
   CURSOR PERSONALIZADO — Abejita
   ============================================================ */
/* Aquí solo se dibuja la abejita (y sus otras formas doradas). Para que NUNCA se vea el cursor del sistema al mismo tiempo
   (el "cursor doble"), el cursor nativo se oculta en TODO el sitio: cualquier elemento, sus ::before/::after y las partes
   internas de los campos, aunque otra regla le pida su propio cursor (pointer, not-allowed, grab, zoom-in, wait... incluso con
   !important, como los botones "Próximamente"). Antes solo se ocultaba en body/a/button/input/select/textarea, y todo lo demás
   (labels, íconos con cursor:pointer, .cursor-not-allowed, el zoom de la carta, el modo edición...) mostraba los dos.
   - Solo se activa cuando la abejita ya está funcionando: initCustomCursor() le pone la clase cc-on a <html>. Si algo falla
     (o es una pantalla táctil) se queda el cursor normal del sistema.
   - La clase cc-on se repite 3 veces a propósito: sube la prioridad para ganarle a cualquier otra regla con !important.
   - data-cc-probe lo pone el JS un instante para leer qué cursor le pidió la página a un elemento (ver pageCursorOf en
     script.js) y así elegir el dibujo correcto. Se usa un atributo (no una clase) para no despertar a los observadores. */
html.cc-on.cc-on.cc-on:not([data-cc-probe]),
html.cc-on.cc-on.cc-on *:not([data-cc-probe]),
html.cc-on.cc-on.cc-on *:not([data-cc-probe])::before,
html.cc-on.cc-on.cc-on *:not([data-cc-probe])::after {
    cursor: none !important;
}
/* partes internas de los campos (una por regla: si el navegador no conoce una, las demás siguen valiendo) */
html.cc-on.cc-on.cc-on ::-webkit-calendar-picker-indicator { cursor: none !important; }
html.cc-on.cc-on.cc-on ::-webkit-inner-spin-button { cursor: none !important; }
html.cc-on.cc-on.cc-on ::-webkit-outer-spin-button { cursor: none !important; }
html.cc-on.cc-on.cc-on ::-webkit-search-cancel-button { cursor: none !important; }
html.cc-on.cc-on.cc-on ::-webkit-slider-thumb { cursor: none !important; }
html.cc-on.cc-on.cc-on ::-webkit-slider-runnable-track { cursor: none !important; }
html.cc-on.cc-on.cc-on ::file-selector-button { cursor: none !important; }

#customCursor {
    position: fixed;
    top: 0;
    left: 0;
    /* Por encima de TODO (incluidas las ventanas de aviso/confirmación, z-index 100000):
       si queda debajo, el cursor nativo está oculto y la abejita no se vería. */
    z-index: 2147483647;
    width: 32px;
    height: 32px;
    line-height: 0;
    pointer-events: none;
    transform: translate(-50%, -50%);
    will-change: transform;
    animation: cursorIdle 1.6s ease-in-out infinite, cursorIntro 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes cursorIntro {
    0%   { transform: translate(-50%, -50%) scale(0) rotate(-90deg); opacity: 0; }
    100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 1; }
}

@keyframes cursorIdle {
    0%, 100% { margin-top: 0px; }
    50% { margin-top: -4px; }
}

#customCursor.cursor-click-left {
    animation: cursorPeckLeft 0.25s ease-out;
}

#customCursor.cursor-click-right {
    animation: cursorSpinRight 0.35s ease-out;
}

@keyframes cursorPeckLeft {
    0%   { transform: translate(-50%, -50%) scale(1); }
    40%  { transform: translate(-50%, -50%) scale(0.7) rotate(-15deg); }
    100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
}

@keyframes cursorSpinRight {
    0%   { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
    100% { transform: translate(-50%, -50%) scale(1.15) rotate(360deg); }
}

@media (hover: none) and (pointer: coarse) {
    /* En pantallas táctiles no hay cursor que reemplazar (cc-on tampoco se activa ahí: ver initCustomCursor) */
    body, a, button, input, select, textarea, .cursor-pointer { cursor: auto !important; }
    #customCursor { display: none; }
}


/* ============================================================
   BARRA SUPERIOR (menú): evita que se vea corrida/sobrepuesta
   ============================================================ */
/* La barra es "sticky" con top-4; sin este margen se empujaba 16px hacia abajo
   y quedaba pegada/encima de las promociones. Con el margen ya nace en su sitio. */
#siteHeader { margin-top: 1rem; }
.nav-bar { gap: 0.5rem; }
.nav-brand { min-width: 0; flex-shrink: 1; }
.nav-brand > div:last-child { min-width: 0; }
.nav-actions { flex-shrink: 0; }

/* Celulares: todo un poco más compacto para que quepa dentro de la barra */
@media (max-width: 639px) {
    .nav-bar { padding-left: 0.75rem; padding-right: 0.75rem; }
    .nav-brand { gap: 0.5rem; }
    .nav-logo { width: 2.5rem; height: 2.5rem; flex-shrink: 0; }
    .nav-title { font-size: 1rem; }
    .nav-actions { gap: 0.375rem; }
    .nav-actions > button { padding-left: 0.625rem; padding-right: 0.625rem; }
    .nav-burger { padding-left: 0.375rem !important; padding-right: 0.375rem !important; }
}
/* Pantallas muy angostas (320px) */
@media (max-width: 359px) {
    .nav-title { font-size: 0.875rem; }
    .nav-brand span { letter-spacing: 0.08em; }
}


/* ============================================================
   PESTAÑAS Y TARJETAS DE TOPPINGS/SALSAS/PROTEÍNAS/BEBIDAS: sin texto corrido
   ============================================================ */
.extras-tab .tab-name { white-space: nowrap; }
.extras-tab .tab-price { font-size: 0.7rem; font-weight: 600; opacity: 0.8; white-space: nowrap; }
@media (max-width: 639px) {
    /* celular: 4 pestañas ordenadas en 2 x 2, todas del mismo tamaño */
    #extrasTabs { display: grid !important; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
    .extras-tab { width: 100%; padding: 0.5rem 0.4rem; font-size: 0.8rem; }
}
@media (min-width: 640px) {
    #extrasTabs .extras-tab { min-width: 9.5rem; }
}

/* ============================================================
   MAPA DE COBERTURA
   ============================================================ */
.coverage-map-wrap { width: 100%; }
.coverage-map-box {
    position: relative; width: 100%; height: 18rem; border-radius: 1rem; overflow: hidden;
    border: 1px solid var(--secondary-200); background: var(--secondary-100);
}
@media (min-width: 640px) { .coverage-map-box { height: 22rem; } }
.coverage-map-canvas { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.coverage-map-canvas[hidden], .coverage-map-loading[hidden] { display: none; }
.coverage-map-loading {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    font-weight: 700; font-size: 0.85rem; color: var(--secondary-600); pointer-events: none;
}
.map-note {
    position: absolute; left: 50%; bottom: 2.2rem; transform: translateX(-50%); z-index: 1100;
    max-width: 88%; padding: 0.45rem 0.8rem; border-radius: 9999px;
    font-size: 0.72rem; font-weight: 700; line-height: 1.25; text-align: center;
    background: var(--secondary-900); color: var(--tertiary-50);
    box-shadow: 0 6px 16px rgb(0 0 0 / 0.3);
}
.map-note[hidden] { display: none; }

/* Botón "mi ubicación" dentro del mapa de Google (mismo estilo que sus controles) */
.gm-locate-btn {
    width: 40px; height: 40px; margin-right: 10px; border-radius: 2px;
    background: #fff; color: #666; font-size: 1.05rem;
    box-shadow: rgba(0,0,0,0.3) 0 1px 4px -1px;
    display: flex; align-items: center; justify-content: center;
}
.gm-locate-btn:hover { color: #333; background: #f5f5f5; }

/* Primera persona dentro del mismo recuadro del mapa */
.coverage-sv { position: absolute; inset: 0; z-index: 1200; background: #111; }
.coverage-sv[hidden] { display: none; }
.coverage-sv iframe { width: 100%; height: 100%; border: 0; display: block; }
.coverage-sv-close {
    position: absolute; top: 0.6rem; left: 0.6rem; z-index: 2;
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.5rem 0.9rem; border-radius: 9999px;
    font-size: 0.8rem; font-weight: 800;
    background: var(--tertiary-50); color: var(--secondary-900);
    box-shadow: 0 4px 12px rgb(0 0 0 / 0.35);
}

/* Mapa de Google con controles propios: zoom, muñeco y ubicación ordenados.
   (Estas mismas reglas aplican también a #deliveryMapLeaflet, el mapa de la
   pestaña "Dirección de entrega", para que se vea y se controle igual.) */
#coverageMapLeaflet, #deliveryMapLeaflet { z-index: 0; font-family: 'Poppins', sans-serif; background: #e5e3df; }
#coverageMapLeaflet .leaflet-bar, #deliveryMapLeaflet .leaflet-bar { border: 0; border-radius: 0.75rem; overflow: hidden; box-shadow: 0 2px 8px rgb(0 0 0 / 0.3); }
#coverageMapLeaflet .leaflet-bar a, #deliveryMapLeaflet .leaflet-bar a,
#coverageMapLeaflet .lm-ctl button, #deliveryMapLeaflet .lm-ctl button {
    width: 40px; height: 40px; line-height: 40px; display: flex; align-items: center; justify-content: center;
    background: #fff; color: #444; font-size: 1.1rem; font-weight: 700; border: 0; border-bottom: 1px solid #e5e5e5;
}
#coverageMapLeaflet .leaflet-bar a:last-child, #coverageMapLeaflet .lm-ctl button:last-child,
#deliveryMapLeaflet .leaflet-bar a:last-child, #deliveryMapLeaflet .lm-ctl button:last-child { border-bottom: 0; }
#coverageMapLeaflet .leaflet-bar a:hover, #coverageMapLeaflet .lm-ctl button:hover,
#deliveryMapLeaflet .leaflet-bar a:hover, #deliveryMapLeaflet .lm-ctl button:hover { background: var(--primary-50); }
#coverageMapLeaflet .leaflet-bottom.leaflet-right .leaflet-control, #deliveryMapLeaflet .leaflet-bottom.leaflet-right .leaflet-control { margin-bottom: 8px; margin-right: 6px; }
#coverageMapLeaflet .leaflet-top.leaflet-right .leaflet-control, #deliveryMapLeaflet .leaflet-top.leaflet-right .leaflet-control { margin-top: 8px; margin-right: 6px; }
#coverageMapLeaflet .lm-pegman button, #deliveryMapLeaflet .lm-pegman button { cursor: grab; touch-action: none; }
#coverageMapLeaflet .lm-pegman button:active, #deliveryMapLeaflet .lm-pegman button:active { cursor: grabbing; }
#coverageMapLeaflet.lm-dropping, #deliveryMapLeaflet.lm-dropping { outline: 3px solid var(--primary-500); outline-offset: -3px; }
#coverageMapLeaflet .leaflet-control-attribution, #deliveryMapLeaflet .leaflet-control-attribution { font-size: 10px; }
.lm-pegman-ghost {
    position: fixed; z-index: 100000; pointer-events: none;
    transform: translate(-50%, -100%); filter: drop-shadow(0 4px 4px rgb(0 0 0 / 0.4));
}
.lm-pegman-pin { filter: drop-shadow(0 2px 2px rgb(0 0 0 / 0.4)); }
.colmena-pin { background: none; border: 0; }
.colmena-pin img {
    width: 44px; height: 44px; border-radius: 9999px; object-fit: cover;
    border: 3px solid var(--primary-500); background: #000; box-shadow: 0 3px 8px rgb(0 0 0 / 0.4);
}
/* Pin arrastrable de la dirección de entrega (mismo estilo que el pin de La Colmena, en dorado) */
.delivery-pin { background: none; border: 0; }
.delivery-pin__wrap { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 9999px; background: var(--primary-500); border: 3px solid var(--tertiary-50); box-shadow: 0 3px 8px rgb(0 0 0 / 0.45); color: var(--secondary-900); font-size: 1.05rem; cursor: grab; }
.delivery-pin__wrap:active { cursor: grabbing; }
.lm-user-dot { background: none; border: 0; }
.lm-user-dot span {
    display: block; width: 20px; height: 20px; border-radius: 9999px;
    background: #4285F4; border: 3px solid #fff; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.15), 0 2px 6px rgb(0 0 0 / 0.4);
}

/* Selector Mapa / Satélite */
#coverageMapLeaflet .leaflet-top.leaflet-left .leaflet-control, #deliveryMapLeaflet .leaflet-top.leaflet-left .leaflet-control { margin-top: 8px; margin-left: 8px; }
#coverageMapLeaflet .lm-maptype, #deliveryMapLeaflet .lm-maptype { display: flex; }
#coverageMapLeaflet .lm-maptype button, #deliveryMapLeaflet .lm-maptype button {
    height: 36px; padding: 0 0.85rem; background: #fff; color: #444;
    font-size: 0.78rem; font-weight: 700; border: 0; border-right: 1px solid #e5e5e5;
}
#coverageMapLeaflet .lm-maptype button:last-child, #deliveryMapLeaflet .lm-maptype button:last-child { border-right: 0; }
#coverageMapLeaflet .lm-maptype button:hover, #deliveryMapLeaflet .lm-maptype button:hover { background: var(--primary-50); }
#coverageMapLeaflet .lm-maptype button.active, #deliveryMapLeaflet .lm-maptype button.active { background: var(--primary-500); color: var(--secondary-900); }


/* ============================================================
   MODAL LEGAL — ENCABEZADO CON LOGO
   Antes el logo tenía "hidden sm:block" y desaparecía en celulares.
   Ahora se muestra siempre:
   - Celular: logo pequeño a la izquierda, junto al título "LEGAL".
   - PC (>= 640px): logo grande a la derecha, centrado con el texto.
   ============================================================ */
.legal-header {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "logo title"
        "intro intro";
    align-items: center;
    column-gap: 0.875rem;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}
.legal-logo {
    grid-area: logo;
    width: 3.5rem;
    height: 3.5rem;
    flex-shrink: 0;
    border-radius: 0.75rem;
    overflow: hidden;
    background: #1a0f08; /* mismo fondo oscuro del logo, por si tarda en cargar */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
}
.legal-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.legal-title { grid-area: title; }
.legal-intro {
    grid-area: intro;
    margin-top: 0.875rem;
    max-width: 36rem;
}

@media (min-width: 640px) {
    .legal-header {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "title logo"
            "intro logo";
        column-gap: 1rem;
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
    .legal-logo {
        width: 5rem;
        height: 5rem;
        align-self: center;
    }
    .legal-title { align-self: end; }
    .legal-intro { margin-top: 0.5rem; align-self: start; }
}

/* ============================================================
   OPCIONES SELECCIONABLES (proteínas, toppings, salsas, bebidas) de
   "Arma tu Arepa" y "Arma tu Combo". Mismo diseño en PC y celular:
   - .opt-grid: cuadrícula que se acomoda sola según el ancho (nunca corta el texto).
   - .opt-chip: tarjeta; al elegirla se pinta del dorado de la barra de scroll con ✓.
   ============================================================ */
.opt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: 0.5rem;
}
.opt-grid--protein { grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); }
.opt-chip {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0.55rem 0.75rem;
    border: 1.5px solid #CFBFB1;
    border-radius: 0.75rem;
    background: #FDF9F0;
    color: #553217;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.25;
    cursor: pointer;
    user-select: none;
    transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}
.opt-chip--center { justify-content: center; text-align: center; }
.opt-chip:hover { background: #FCF6E7; border-color: #DCB141; }
.opt-chip > span { min-width: 0; overflow-wrap: anywhere; }
.opt-chip input { accent-color: #B28515; width: 1rem; height: 1rem; flex-shrink: 0; }
.opt-chip--center input { display: none; }
.opt-chip input:focus-visible { outline: 2px solid #B28515; outline-offset: 2px; }
/* Respaldo para navegadores viejos (sin :has): al menos el texto cambia */
.opt-chip input:checked + span { color: #906A12; font-weight: 800; }
@supports selector(:has(*)) {
    .opt-chip:has(input:checked) {
        background: var(--primary-600, #B28515);   /* exactamente el mismo dorado de la barra de scroll */
        border-color: var(--primary-600, #B28515);
        color: #3F2511;
        font-weight: 800;
        box-shadow: 0 4px 10px -4px rgba(178, 133, 21, .6);
    }
    .opt-chip:has(input:checked) input:checked + span { color: #3F2511; }
    .opt-chip:has(input:checked)::after {
        content: "✓";
        margin-left: auto;
        font-weight: 900;
        font-size: 0.85rem;
    }
    .opt-chip--center:has(input:checked)::after { margin-left: 0.25rem; }
    .opt-chip input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
    .opt-chip:has(input:focus-visible) { outline: 2px solid #906A12; outline-offset: 2px; }
}
/* Botones "Arma tu Combo" / "Arma tu Arepa": el texto nunca se parte en dos líneas */
.btn-arma { white-space: nowrap; }

/* Tarjetas de combo en celular: el precio arriba y el botón "Arma tu Combo" debajo, a todo el
   ancho de la tarjeta y centrado. Antes el botón se bajaba solo cuando no cabía junto al precio
   y quedaba pegado a la izquierda, desalineado. En pantallas grandes no cambia nada. */
@media (max-width: 639px) {
    div.combo-card-footer {
        flex-direction: column;
        align-items: stretch;
        flex-wrap: nowrap;
        gap: 0.85rem;
    }
    div.combo-card-footer .btn-arma {
        width: 100%;
        justify-content: center;
        padding-top: 0.85rem;
        padding-bottom: 0.85rem;
        font-size: 1rem;
    }
}

/* Foto del producto en la orden (carrito) */
.cart-thumb {
    width: 4rem;
    height: 4rem;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: 0.75rem;
    border: 1px solid #ECD494;
    background: #FCF6E7;
    box-shadow: 0 2px 6px -2px rgba(63, 37, 17, .35);
}
@media (min-width: 640px) { .cart-thumb { width: 4.5rem; height: 4.5rem; } }

/* Ubicación actual del cliente (formulario de la orden) */
.loc-box { display: flex; flex-direction: column; gap: 0.35rem; }
.loc-btn {
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    width: 100%; padding: 0.65rem 0.75rem;
    border: 1.5px dashed var(--primary-600, #B28515); border-radius: 0.75rem;
    background: #FCF6E7; color: #3F2511;
    font-size: 0.75rem; font-weight: 800; line-height: 1.25;
    cursor: pointer; transition: background-color .15s, border-color .15s, transform .1s;
}
.loc-btn:hover { background: #F4E5BE; }
.loc-btn:active { transform: scale(.98); }
.loc-btn:disabled { opacity: .7; cursor: wait; }
.loc-btn i { color: var(--primary-600, #B28515); font-size: 1rem; }
.loc-status { font-size: 10.5px; line-height: 1.35; color: #937258; padding: 0 0.125rem; }
.loc-box--ok .loc-btn { border-style: solid; background: #ECFDF5; border-color: #059669; }
.loc-box--ok .loc-btn i { color: #059669; }
.loc-box--ok .loc-status { color: #047857; font-weight: 600; }
.loc-box--error .loc-btn { border-color: #C1440E; background: #FBF1E9; }
.loc-box--error .loc-btn i { color: #C1440E; }
.loc-box--error .loc-status { color: #9B390D; font-weight: 600; }

/* ============================================================
   COMPATIBILIDAD CELULAR (responsive) — todos los diseños nuevos
   ============================================================ */

/* Orden (carrito): encabezado que se acomoda solo. Si no cabe el contador de cantidad
   junto al nombre, baja a la línea de abajo en vez de apretar el texto. */
.cart-item-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.5rem 0.75rem; }
.cart-item-info { display: flex; align-items: flex-start; gap: 0.75rem; flex: 1 1 11rem; min-width: 0; }
.cart-qty { margin-left: auto; }
@media (max-width: 400px) { .cart-thumb { width: 3.5rem; height: 3.5rem; } }

/* Opciones seleccionables: en celular siempre 2 por fila (la última, si queda sola, ocupa todo el ancho) */
@media (max-width: 639px) {
    .opt-grid, .opt-grid--protein { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .opt-grid > .opt-chip:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .opt-chip { padding: 0.55rem 0.6rem; gap: 0.4rem; }
}

/* iPhone/Safari hace zoom automático si un campo tiene letra menor a 16px: se evita en celular */
@media (max-width: 639px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    select, textarea { font-size: 16px !important; }
}

/* Botones y tarjetas: sin retraso ni zoom por doble toque */
button, a, label, select, .opt-chip, .loc-btn { touch-action: manipulation; }

/* Dedos: botones +/- del carrito y cierre de ventanas con área de toque cómoda */
@media (pointer: coarse) {
    #cartItemsContainer button[onclick^="updateCartQuantity"] { width: 2rem; height: 2rem; font-size: 0.9rem; }
    #cartItemsContainer button[onclick^="removeCartItem"] { padding: 0.5rem 0.75rem; }
}

/* Barras del sistema en iPhone (notch y barra inferior): el contenido nunca queda debajo */
#cartCheckoutFooter { padding-bottom: 1.25rem; } /* aire al final del scroll, antes de la barra fija de "Comprar" */
#cartCheckoutFooter #checkoutForm { margin-bottom: 0; padding-bottom: 0; }
/* Barra fija del botón Comprar (abajo del carrito, siempre visible); respeta la barra inferior del iPhone */
#cartBuyBar {
    /* el espacio (arriba 1rem, lados 1.25rem, abajo 1rem) va en el style del propio #cartBuyBar en index.html */
    box-shadow: 0 -8px 16px -10px rgba(63, 37, 17, 0.28);
    position: relative; z-index: 1;
}
#comboBuilderModal .sticky.bottom-0, #arepaBuilderModal .sticky.bottom-0 { padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); }
#floatingHoursWidget { margin-bottom: env(safe-area-inset-bottom, 0px); margin-right: env(safe-area-inset-right, 0px); }

/* ------------------------------------------------------------
   PILA DE BOTONES FLOTANTES (esquina inferior derecha): se fijan aquí con
   valores en px propios (no solo clases de Tailwind) porque el CSS de Tailwind
   compilado (css/tailwind.built.css) no incluye varias utilidades que se usan
   en estos botones (p. ej. bottom-8, bottom-24, bottom-40, right-5, left-3,
   left-5), lo que hacía que "volver arriba" y el ícono de correo perdieran su
   posición y aparecieran arriba en vez de abajo. De abajo hacia arriba:
   1) horario (floatingHoursWidget) 2) correo/contacto (contactMenuWrap)
   3) volver arriba (scrollTopBtn). Los tres comparten el mismo borde derecho. */
#floatingHoursWidget,
#contactMenuWrap,
#scrollTopBtn {
    left: auto !important;
    right: calc(0.75rem + env(safe-area-inset-right, 0px)) !important;
}
#floatingHoursWidget { bottom: calc(5rem + env(safe-area-inset-bottom, 0px)) !important; }
#contactMenuWrap     { bottom: calc(9rem + env(safe-area-inset-bottom, 0px)) !important; }
#scrollTopBtn         { bottom: calc(13rem + env(safe-area-inset-bottom, 0px)) !important; }
@media (min-width: 640px) {
    #floatingHoursWidget,
    #contactMenuWrap,
    #scrollTopBtn { right: calc(1.25rem + env(safe-area-inset-right, 0px)) !important; }
    #floatingHoursWidget { bottom: 2rem !important; }
    #contactMenuWrap     { bottom: 6rem !important; }
    #scrollTopBtn         { bottom: 10rem !important; }
    /* El CSS de Tailwind compilado tampoco trae w-14/h-14: se fija el tamaño
       de escritorio de estos botones redondos directamente aquí. */
    #scrollTopBtn, #contactMenuBtn { width: 3.5rem !important; height: 3.5rem !important; }
}

/* ------------------------------------------------------------
   MENÚ DEL BOTÓN DE CORREO/CONTACTO: se abre hacia la IZQUIERDA del botón
   (no hacia arriba) para que nunca quede tapado ni choque con la flecha de
   "volver arriba" ni con el widget de horario que están apilados justo
   encima y debajo de este botón. Varias utilidades de Tailwind que usaba
   antes (w-60, bottom-full, right-full, etc.) tampoco existen en el CSS
   compilado, así que su tamaño y posición se fijan aquí de forma explícita. */
#contactMenuPanel {
    top: 50% !important;
    right: 100% !important;
    left: auto !important;
    bottom: auto !important;
    transform: translateY(-50%);
    margin-right: 0.75rem;
    width: 15rem;
    max-width: calc(100vw - 5.5rem - env(safe-area-inset-right, 0px));
    z-index: 41;
}

/* En navegadores de celular (no en ventanas de escritorio angostas) esta pila
   quedaba con demasiado espacio libre debajo, muy arriba de lo que se ve en
   pantalla; aquí se baja un poco solo para ese caso (pantalla táctil). */
@media (max-width: 639px) and (pointer: coarse) {
    #floatingHoursWidget { bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)) !important; }
    #contactMenuWrap     { bottom: calc(5rem + env(safe-area-inset-bottom, 0px)) !important; }
    #scrollTopBtn         { bottom: calc(8.75rem + env(safe-area-inset-bottom, 0px)) !important; }
}

/* Ventanas y listas con scroll propio: no arrastran la página de fondo al llegar al final */
.overflow-y-auto { overscroll-behavior: contain; }

/* Altura real visible en celular (la barra de direcciones sube y baja): dvh en vez de vh */
@supports (height: 100dvh) {
    .max-h-\[60vh\] { max-height: 60dvh; }
    .max-h-\[90vh\] { max-height: 90dvh; }
    .min-h-screen { min-height: 100dvh; }
}

/* Pantallas muy angostas (320 px) */
@media (max-width: 359px) {
    .loc-btn { font-size: 0.7rem; padding: 0.6rem 0.5rem; }
    .opt-chip { font-size: 0.7rem; }
}

/* "Arma tu Arepa" en la página principal: el botón siempre va debajo del precio (nunca
   al lado), igual en PC, tablet y celular — como ya pasa en las tarjetas de combos. */
.arepa-card-footer {
    flex-direction: column;
    align-items: stretch;
}
.arepa-card-footer .btn-arma {
    width: 100%;
    justify-content: center;
}

/* Tamaño fijo de la foto al abrir "Arma tu Arepa" y "Arma tu Combo" (y cualquier
   combo o arepa por unidad): mismo tamaño en los dos modales, ni muy grande ni muy
   chico. Se define aquí con ID (no con clases de Tailwind) porque el CSS compilado
   de Tailwind estaba desactualizado y no traía las clases w-16/h-16, dejando la foto
   sin límite de tamaño. */
#builderThumbWrap,
#comboBuilderThumbWrap {
    width: 84px;
    height: 84px;
    flex-shrink: 0;
    border-radius: 1rem;
    overflow: hidden;
}
#builderThumb,
#comboBuilderThumb {
    width: 84px;
    height: 84px;
    object-fit: cover;
    object-position: center;
    display: block;
}
@media (max-width: 380px) {
    #builderThumbWrap,
    #comboBuilderThumbWrap {
        width: 68px;
        height: 68px;
    }
    #builderThumb,
    #comboBuilderThumb {
        width: 68px;
        height: 68px;
    }
}

/* ============================================================
   CALIFICACIÓN CON ESTRELLAS (1 a 5) en las tarjetas de Combos y Arepas.
   ============================================================ */
.product-rating {
    margin-top: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.product-rating .stars-row {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
}
.product-rating .star-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.15rem;
    line-height: 1;
    font-size: 1rem;
    color: var(--secondary-200, #e5e0dc);
    transition: transform 0.12s ease, color 0.12s ease;
}
.product-rating .star-btn:hover,
.product-rating .star-btn:focus-visible {
    transform: scale(1.2);
    outline: none;
}
.product-rating .star-btn.filled {
    color: var(--primary-500);
}
.product-rating .star-btn.user-filled {
    color: var(--quaternary-600);
}
.product-rating .rating-summary {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--secondary-400);
    display: flex;
    align-items: center;
    gap: 0.3rem;
}
.product-rating .rating-summary .rating-avg {
    color: var(--secondary-700);
    font-weight: 800;
}
.product-rating .rating-you {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--quaternary-600);
}

/* Apodo de cada arepa (ej. "Arepa Angelita"), pequeño y en el color de la marca, bajo el nombre */
.arepa-nick {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.75rem;
    font-weight: 700;
    font-style: italic;
    color: var(--primary-700);
}

/* Espacio compacto entre el encabezado (foto + nombre) y la primera sección en "Arma tu Arepa"
   y "Arma tu Combo". Antes se sumaban el padding del encabezado, el del cuerpo y un margen extra
   de "space-y" que se aplicaba aunque los bloques ocultos no se vieran (~76px de vacío).
   Con flex + gap los bloques ocultos ya no dejan margen. */
.builder-head { padding-bottom: 0 !important; }
.builder-body {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding-top: 0.75rem;
}


/* ===== Aviso de cookies ===== */
.cookie-banner {
    position: fixed; left: 50%; transform: translateX(-50%); z-index: 49;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    width: calc(100% - 28px); max-width: 920px;
    display: none; align-items: center; gap: 16px;
    padding: 16px 18px;
    background: #3F2511; color: #FDF9F0;
    border: 2px solid #D4A017; border-radius: 20px;
    box-shadow: 0 18px 45px rgba(0,0,0,.4);
    font-family: 'Poppins', sans-serif;
    animation: cookieIn .35s ease-out;
}
.cookie-banner.is-visible { display: flex; }
@keyframes cookieIn { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } }
.cookie-banner__logo { width: 3.5rem; height: 3.5rem; flex-shrink: 0; border-radius: 0.75rem; overflow: hidden; background: #1a0f08; box-shadow: 0 2px 8px rgba(0,0,0,.35); }
.cookie-banner__logo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cookie-banner__text { flex: 1; min-width: 0; }
.cookie-banner__title { margin: 0 0 2px; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 15px; color: #D4A017; }
.cookie-banner__desc { margin: 0; font-size: 12.5px; line-height: 1.5; color: #DCCCB0; }
.cookie-banner__link { background: none; border: 0; padding: 0; color: #D4A017; font-weight: 800; text-decoration: underline; cursor: pointer; font-size: inherit; font-family: inherit; }
.cookie-banner__actions { display: flex; gap: 8px; flex-shrink: 0; }
.cookie-btn { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 13px; padding: 10px 22px; border-radius: 12px; cursor: pointer; border: 2px solid #D4A017; transition: background .2s, color .2s, transform .2s; }
.cookie-btn:active { transform: scale(.97); }
.cookie-btn--ghost { background: transparent; color: #FDF9F0; }
.cookie-btn--ghost:hover { background: rgba(212,160,23,.18); }
.cookie-btn--solid { background: #D4A017; color: #3F2511; }
.cookie-btn--solid:hover { background: #B28515; border-color: #B28515; }
@media (max-width: 640px) {
    .cookie-banner { flex-wrap: wrap; gap: 12px; padding: 14px; border-radius: 18px; }
    .cookie-banner__logo { width: 3rem; height: 3rem; }
    .cookie-banner__text { flex: 1 1 calc(100% - 4rem); }
    .cookie-banner__actions { width: 100%; }
    .cookie-btn { flex: 1; padding: 12px 10px; }
}

/* ============================================================
   CÓDIGO QR DE PAGO — botón pequeño (abre la ventana) y ventana ampliada.
   Colores: siempre desde las variables de colors.js.
   ============================================================ */
.qr-open-btn {
    position: relative;
    flex-shrink: 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
    line-height: 0;
    -webkit-tap-highlight-color: transparent;
}
.qr-open-btn:focus-visible { outline: 2px solid var(--primary-500); outline-offset: 3px; border-radius: 0.6rem; }
.qr-open-btn:hover img { border-color: var(--primary-500); }
.qr-open-badge {
    position: absolute;
    right: -6px;
    bottom: -6px;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    line-height: 1;
    background: var(--primary-500);
    color: var(--secondary-900);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

#qrModal { z-index: 60; } /* por encima del carrito, desde donde se abre */
.qr-modal-card { max-width: 22rem; }
.qr-modal-title { margin: 0 2.5rem 0.25rem 0; }
.qr-modal-sub { font-size: 0.75rem; color: var(--secondary-500); margin-bottom: 1rem; }
.qr-modal-frame {
    background: #fff;
    border: 1px solid var(--primary-200);
    border-radius: 1.25rem;
    padding: 0.75rem;
}
.qr-modal-frame img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
}
.qr-modal-info {
    margin-top: 1rem;
    padding: 0.85rem 1rem;
    border-radius: 0.9rem;
    border: 1px solid var(--primary-200);
    background: var(--primary-50);
    font-size: 0.8rem;
}
.qr-modal-holder { font-weight: 700; color: var(--secondary-800); }
.qr-modal-label { color: var(--secondary-600); margin-top: 0.15rem; }
.qr-modal-value {
    font-weight: 900;
    font-size: 1.15rem;
    color: var(--secondary-900);
    word-break: break-all;
}
.qr-modal-note {
    margin-top: 0.75rem;
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--quaternary-700);
}

/* ============================================================
   CARTA — botones "Ver Carta" / "Descargar Carta" y ventana ampliada
   ============================================================ */
.carta-actions { display: flex; flex-direction: column; align-items: stretch; gap: 0.75rem; width: 100%; }
.carta-actions > a, .carta-actions > button { justify-content: center; }
@media (min-width: 640px) {
    .carta-actions { flex-direction: row; align-items: center; width: auto; }
}
.carta-btn-ver {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.65rem 1.25rem;
    border-radius: 0.75rem;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
    color: var(--tertiary-50);
    background: transparent;
    border: 2px solid var(--tertiary-50);
}
.carta-btn-ver:hover { background: var(--tertiary-50); color: var(--secondary-900); }

.carta-modal-card { max-width: 28rem; }
.carta-modal-frame {
    overflow: auto;
    max-height: 62vh;
    border-radius: 1rem;
    border: 1px solid var(--primary-200);
    background: var(--secondary-900);
    -webkit-overflow-scrolling: touch;
}
.carta-modal-frame img { display: block; width: 100%; height: auto; max-width: none; cursor: zoom-in; }
.carta-modal-frame.is-zoomed img { width: 240%; cursor: zoom-out; }
.carta-wa-link { font-weight: 800; color: var(--quaternary-700); text-decoration: underline; }
.carta-btn-dl {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.85rem;
    padding: 0.75rem 1.25rem;
    border-radius: 0.75rem;
    font-weight: 800;
    color: var(--tertiary-50);
    background: linear-gradient(90deg, var(--primary-500), var(--quaternary-600));
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}

/* Aviso flotante de estado de pedido (ej. "ya salió en camino",
   "ya puedes recogerlo en recepción"). Ver showOrderToast() en script.js. */
@keyframes ordertoast-in {
    from { opacity: 0; transform: translateY(14px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
#orderToastContainer > div {
    animation: ordertoast-in 0.25s ease-out;
}

/* Logo en el encabezado de bienvenida del perfil: cuadrado con esquinas bien redondeadas
   (lados rectos), grande y sin borde, para que el fondo oscuro del logo haga el marco. */
.profile-logo {
    width: 4rem; height: 4rem; flex-shrink: 0;
    border-radius: 26%; object-fit: cover;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}
@media (min-width: 640px) { .profile-logo { width: 4.5rem; height: 4.5rem; } }


/* ============================================================
   FLECHA DE "DESLIZA PARA SALIR" (Mi Orden, celular)
   ============================================================ */
.swipe-back-arrow {
    position: absolute; left: 8px; top: 50%;
    width: 2.75rem; height: 2.75rem; margin-top: -1.375rem;
    border-radius: 9999px;
    display: flex; align-items: center; justify-content: center;
    background: var(--primary-500); color: var(--secondary-900);
    border: 2px solid var(--tertiary-50);
    box-shadow: 0 4px 14px rgb(0 0 0 / 0.35);
    font-size: 1.1rem;
    opacity: 0; pointer-events: none;
    transform: scale(0.6);
    transition: transform 0.15s ease;
    z-index: 70;
}
.swipe-back-arrow.is-visible { transform: scale(0.85); }
.swipe-back-arrow.is-ready { transform: scale(1.1); }


/* Mapa en vivo del cliente: el mapa captura la rueda del ratón y el pellizco
   (en vez de que se desplace el modal/la página) para poder acercar y alejar
   sin usar los botones + / −. */
#liveTrackingMapCanvas, #liveTrackingMapLeaflet {
    touch-action: none;
    overscroll-behavior: contain;
    -webkit-user-select: none; user-select: none;
}
#liveTrackingMapLeaflet { z-index: 0; background: #e5e3df; }

/* Mapa en vivo: el atributo hidden debe ganarle a clases como .flex de Tailwind,
   si no el cartel "Cargando mapa…" queda encima del mapa para siempre. */
#liveTrackingMapLoading[hidden],
#liveTrackingMapCanvas[hidden],
#liveTrackingMapLeaflet[hidden] { display: none !important; }


/* Domiciliario en el mapa del cliente (motor Leaflet): círculo dorado con nombre */
.live-driver { position: relative; width: 22px; height: 22px; }
.live-driver-dot { position: absolute; inset: 2px; border-radius: 999px; border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.45); }
.live-driver-pulse { position: absolute; inset: 0; border-radius: 999px; opacity: .45; animation: liveDriverPulse 1.8s ease-out infinite; }
.live-driver-name { position: absolute; top: 26px; left: 50%; transform: translateX(-50%); white-space: nowrap;
    font: 800 12px/1 Poppins, sans-serif; background: rgba(255,255,255,.92); padding: 3px 7px; border-radius: 999px;
    box-shadow: 0 1px 4px rgba(0,0,0,.3); }
@keyframes liveDriverPulse { 0% { transform: scale(.7); opacity: .55; } 100% { transform: scale(2.4); opacity: 0; } }


/* ============================================================
   VENTANAS DE AVISO / CONFIRMACIÓN (reemplazan alert, confirm y prompt del navegador)
   Lógica en dialogs.js. Colores: salen de colors.js (variables --primary-*, etc.).
   Para cambiar el logo o el nombre que se ve arriba, edita las constantes al inicio de dialogs.js.
   ============================================================ */
.cm-dialog-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgb(var(--secondary-rgb) / 0.62);
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
    animation: cmDialogBg 0.2s ease-out both;
}
.cm-dialog-overlay.cm-closing { animation: cmDialogBgOut 0.16s ease-in both; }

.cm-dialog {
    width: 100%;
    max-width: 24rem;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 1.5rem;
    background: var(--tertiary-50);
    border: 1px solid var(--primary-200);
    box-shadow: 0 25px 60px -20px rgb(var(--secondary-rgb) / 0.75);
    font-family: 'Poppins', sans-serif;
    animation: cmDialogIn 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.15) both;
}
.cm-dialog-overlay.cm-closing .cm-dialog { animation: cmDialogOut 0.16s ease-in both; }

.cm-dialog-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1.1rem;
    background: var(--secondary-900);
    color: var(--tertiary-50);
    border-bottom: 3px solid var(--primary-500);
}
.cm-dialog-logo {
    width: 2.6rem;
    height: 2.6rem;
    flex-shrink: 0;
    border-radius: 0.75rem;
    object-fit: cover;
    border: 2px solid var(--primary-500);
    background: var(--tertiary-100);
}
.cm-dialog-brand {
    font-weight: 800;
    font-size: 0.95rem;
    line-height: 1.2;
    color: var(--tertiary-50);
}
.cm-dialog-brand small {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--primary-200);
}

.cm-dialog-body {
    padding: 1.2rem 1.25rem 0.4rem;
    overflow-y: auto;
    color: var(--secondary-800);
    font-size: 0.92rem;
    line-height: 1.5;
    white-space: pre-line;
    word-break: break-word;
}
.cm-dialog-input {
    display: block;
    width: calc(100% - 2.5rem);
    margin: 0.7rem 1.25rem 0;
    padding: 0.65rem 0.9rem;
    border-radius: 0.8rem;
    border: 1.5px solid var(--primary-300);
    background: var(--tertiary-100);
    color: var(--secondary-900);
    font: inherit;
    font-size: 0.92rem;
    outline: none;
}
.cm-dialog-input:focus {
    border-color: var(--primary-600);
    box-shadow: 0 0 0 3px rgb(var(--primary-rgb) / 0.3);
}

.cm-dialog-actions {
    display: flex;
    flex-direction: row-reverse;
    gap: 0.6rem;
    padding: 1rem 1.25rem 1.2rem;
}
.cm-dialog-btn {
    flex: 1;
    padding: 0.7rem 1rem;
    border-radius: 0.85rem;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
}
.cm-dialog-btn:active { transform: scale(0.97); }
.cm-dialog-btn:focus-visible { outline: 3px solid rgb(var(--primary-rgb) / 0.55); outline-offset: 2px; }
.cm-dialog-btn-ok {
    background: var(--quaternary-600);
    color: #fff;
    border: 1.5px solid var(--quaternary-600);
    box-shadow: 0 8px 18px -8px rgb(var(--quaternary-rgb) / 0.8);
}
.cm-dialog-btn-ok:hover { background: var(--quaternary-700); border-color: var(--quaternary-700); }
.cm-dialog-btn-cancel {
    background: transparent;
    color: var(--secondary-700);
    border: 1.5px solid var(--secondary-300);
}
.cm-dialog-btn-cancel:hover { background: var(--tertiary-200); }

@keyframes cmDialogBg    { from { opacity: 0; } to { opacity: 1; } }
@keyframes cmDialogBgOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes cmDialogIn    { from { opacity: 0; transform: translateY(14px) scale(0.94); } to { opacity: 1; transform: none; } }
@keyframes cmDialogOut   { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(8px) scale(0.96); } }


/* ============================================================
   MENÚ DESPLEGABLE DE LA COLMENA (combos: tipo de arepa y gaseosas)
   Mismos colores, bordes y tipografía que las opciones (.opt-chip).
   PC: lista flotante bajo el campo. Celular: hoja desde abajo.
   ============================================================ */
.cs { position: relative; }
.cs-btn {
    width: 100%;
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    min-height: 2.9rem;
    padding: 0.65rem 0.85rem;
    border: 1.5px solid #CFBFB1;
    border-radius: 0.75rem;
    background: #FDF9F0;
    color: #553217;
    font-family: 'Poppins', sans-serif;
    font-size: 0.875rem; font-weight: 600; line-height: 1.25;
    text-align: left;
    cursor: pointer;
    transition: background-color .15s, border-color .15s, box-shadow .15s;
}
.cs-btn:hover { background: #FCF6E7; border-color: #DCB141; }
.cs-btn:focus-visible, .cs-btn.is-open {
    outline: none;
    border-color: var(--primary-600, #B28515);
    box-shadow: 0 0 0 3px rgba(212, 160, 23, .28);
    background: #FFFDF8;
}
.cs-current, .cs-opt-body { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.7rem; }
.cs-txt { min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.cs-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-sub { margin-top: 0.1rem; font-size: 0.75rem; font-weight: 700; font-style: italic; color: var(--primary-700, #906A12); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-thumb { width: 2.75rem; height: 2.75rem; flex-shrink: 0; object-fit: cover; border-radius: 0.65rem; border: 1px solid #E8D08A; background: #1a0f08; }
.cs-icon { width: 2.1rem; height: 2.1rem; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px; font-size: 1.15rem; line-height: 1; box-shadow: inset 0 0 0 1px rgba(107, 63, 29, .12); }
.cs-btn:has(.cs-thumb) { padding-top: 0.45rem; padding-bottom: 0.45rem; }
.cs-btn:has(.cs-icon) { padding-top: 0.4rem; padding-bottom: 0.4rem; }
/* La flecha (.cs-arrow) lleva su estilo en línea y su dirección la cambia csSetChevron() en script.js */

.cs-panel {
    position: fixed;
    z-index: 10000;
    display: flex; flex-direction: column;
    background: #FFFDF8;
    border: 1.5px solid #E8D08A;
    border-radius: 1rem;
    box-shadow: 0 18px 38px -12px rgba(63, 37, 17, .42), 0 4px 10px -4px rgba(63, 37, 17, .18);
    font-family: 'Poppins', sans-serif;
    opacity: 0; transform: translateY(-6px);
    transition: opacity .14s ease, transform .14s ease;
    overflow: hidden;
}
.cs-panel.cs-up { transform: translateY(6px); }
.cs-panel.is-visible { opacity: 1; transform: none; }
.cs-list { overflow-y: auto; padding: 0.4rem; display: flex; flex-direction: column; gap: 0.25rem; overscroll-behavior: contain; }
.cs-list::-webkit-scrollbar { width: 8px; }
.cs-list::-webkit-scrollbar-thumb { background: var(--primary-500, #D4A017); border-radius: 8px; }

.cs-opt {
    display: flex; align-items: center; gap: 0.5rem;
    width: 100%;
    padding: 0.65rem 0.8rem;
    border: 1.5px solid transparent;
    border-radius: 0.65rem;
    background: transparent;
    color: #553217;
    font-family: inherit; font-size: 0.875rem; font-weight: 600; line-height: 1.25;
    text-align: left;
    cursor: pointer;
    transition: background-color .12s, border-color .12s, color .12s;
}
.cs-opt:hover, .cs-opt:focus-visible { outline: none; background: #FCF6E7; border-color: #DCB141; }
.cs-opt.is-selected {
    background: var(--primary-600, #B28515);
    border-color: var(--primary-600, #B28515);
    color: #3F2511;
    font-weight: 800;
    box-shadow: 0 4px 10px -4px rgba(178, 133, 21, .6);
}
.cs-opt.is-selected .cs-sub { color: #3F2511; opacity: .8; }
.cs-opt.is-selected .cs-thumb { border-color: rgba(63, 37, 17, .35); }
.cs-opt.is-selected .cs-icon { box-shadow: inset 0 0 0 1.5px rgba(63, 37, 17, .35); }
.cs-check { font-weight: 900; font-size: 0.9rem; flex-shrink: 0; }

/* Celular: hoja inferior con fondo oscuro, opciones grandes y respeto a la barra inferior del iPhone */
.cs-backdrop {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(63, 37, 17, .55);
    backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
    opacity: 0; transition: opacity .18s ease;
}
.cs-backdrop.is-visible { opacity: 1; }
.cs-panel--sheet {
    left: 0; right: 0; bottom: 0; top: auto;
    max-height: 72vh;
    border-radius: 1.5rem 1.5rem 0 0;
    border-width: 1.5px 0 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    opacity: 1; transform: translateY(100%);
    transition: transform .22s ease;
}
.cs-panel--sheet.is-visible { transform: none; }
.cs-sheet-head { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 0.6rem 1rem 0.35rem; border-bottom: 1px solid #F0E2B8; }
.cs-sheet-grip { width: 2.5rem; height: 0.28rem; border-radius: 9999px; background: #E8D08A; }
.cs-sheet-title { font-weight: 800; font-size: 0.95rem; color: #6B3F1D; padding-bottom: 0.3rem; }
.cs-panel--sheet .cs-list { padding: 0.6rem 0.75rem 0.9rem; }
.cs-panel--sheet .cs-opt { min-height: 3.5rem; font-size: 1rem; padding: 0.6rem 0.85rem; }
.cs-panel--sheet .cs-thumb { width: 3.25rem; height: 3.25rem; }
.cs-panel--sheet .cs-icon { width: 2.5rem; height: 2.5rem; font-size: 1.35rem; }
@media (max-width: 639px) { .cs-btn { font-size: 1rem; min-height: 3rem; } }

/* Nombres largos (p. ej. "Coca Cola 250ml" en campos estrechos): pasan a 2 líneas en vez de cortarse */
.cs-btn .cs-name, .cs-opt .cs-name { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.cs-btn .cs-icon { width: 1.9rem; height: 1.9rem; font-size: 1.05rem; }
.cs-current, .cs-opt-body { gap: 0.6rem; }

/* Icono sin círculo de fondo (p. ej. el 📍 del punto de recogida) */
.cs-icon--plain { background: none; box-shadow: none !important; width: 1.9rem; font-size: 1.4rem; }
.cs-panel--sheet .cs-icon--plain { width: 2.5rem; font-size: 1.7rem; }

/* ============================================================
   CALENDARIO PROPIO (datepicker.js) — usa la paleta de la página
   ============================================================ */
.cm-dp-wrap { position: relative; }
.cm-dp-input { padding-right: 2.4rem !important; }
/* Oculta el ícono gris del navegador y deja el nuestro */
.cm-dp-input::-webkit-calendar-picker-indicator { opacity: 0; position: absolute; right: 0; top: 0; width: 2.6rem; height: 100%; cursor: pointer; }
.cm-dp-icon { position: absolute; right: 0.8rem; top: 50%; transform: translateY(-50%); color: var(--quaternary-600); font-size: 0.95rem; cursor: pointer; }

.cm-dp {
    position: fixed;
    z-index: 100001;
    width: 18.5rem;
    max-width: calc(100vw - 16px);
    font-family: 'Poppins', sans-serif;
    background: var(--tertiary-50);
    border: 1px solid var(--primary-200);
    border-radius: 1.25rem;
    overflow: hidden;
    box-shadow: 0 25px 60px -20px rgb(var(--secondary-rgb) / 0.75);
    animation: cmDpIn 0.16s ease-out both;
}
@keyframes cmDpIn { from { opacity: 0; transform: translateY(-6px) scale(0.98); } to { opacity: 1; transform: none; } }

.cm-dp-head {
    display: flex; align-items: center; gap: 0.35rem;
    padding: 0.7rem 0.75rem;
    background: var(--secondary-900);
    color: var(--tertiary-50);
    border-bottom: 3px solid var(--primary-500);
}
.cm-dp-title {
    flex: 1; text-align: left; background: none; border: 0; cursor: pointer;
    font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 0.9rem;
    color: var(--tertiary-50); padding: 0.3rem 0.4rem; border-radius: 0.6rem;
    transition: background 0.15s;
}
.cm-dp-title i { color: var(--primary-500); font-size: 0.75rem; margin-left: 0.25rem; }
.cm-dp-title:hover { background: rgb(var(--primary-rgb) / 0.18); }
.cm-dp-nav {
    width: 2rem; height: 2rem; border-radius: 0.6rem; border: 0; cursor: pointer;
    background: rgb(var(--primary-rgb) / 0.18); color: var(--primary-400);
    font-size: 0.75rem; transition: background 0.15s, color 0.15s;
}
.cm-dp-nav:hover { background: var(--primary-500); color: var(--secondary-900); }

.cm-dp-body { padding: 0.7rem 0.7rem 0.3rem; }
.cm-dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cm-dp-grid--pick { grid-template-columns: repeat(3, 1fr); gap: 6px; padding-bottom: 0.4rem; }
.cm-dp-dow { text-align: center; font-size: 0.68rem; font-weight: 800; color: var(--quaternary-600); padding: 0.25rem 0 0.4rem; }

.cm-dp-day, .cm-dp-cell {
    font-family: inherit; font-weight: 600; color: var(--secondary-800);
    background: transparent; border: 2px solid transparent; cursor: pointer;
    transition: background 0.12s, color 0.12s, transform 0.12s;
}
.cm-dp-day { height: 2.1rem; border-radius: 0.65rem; font-size: 0.8rem; }
.cm-dp-cell { padding: 0.65rem 0; border-radius: 0.8rem; font-size: 0.82rem; }
.cm-dp-day:hover:not(:disabled), .cm-dp-cell:hover:not(:disabled) { background: var(--primary-200); }
.cm-dp-other { color: var(--secondary-300); font-weight: 500; }
.cm-dp-today { border-color: var(--primary-500); }
.cm-dp-selected, .cm-dp-selected:hover:not(:disabled) { background: var(--quaternary-600); color: #fff; border-color: var(--quaternary-600); }
.cm-dp-day:disabled, .cm-dp-cell:disabled { opacity: 0.3; cursor: not-allowed; }
.cm-dp button:focus-visible { outline: 2px solid var(--primary-500); outline-offset: 1px; }

.cm-dp-foot {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.4rem 0.9rem 0.75rem;
}
.cm-dp-link {
    background: none; border: 0; cursor: pointer; font-family: inherit;
    font-size: 0.78rem; font-weight: 700; color: var(--secondary-600);
    padding: 0.35rem 0.6rem; border-radius: 0.6rem; transition: background 0.15s;
}
.cm-dp-link:hover:not(:disabled) { background: var(--primary-200); }
.cm-dp-link--accent { color: var(--quaternary-600); }
.cm-dp-link:disabled { opacity: 0.35; cursor: not-allowed; }

/* ============================================================
   <select> con clase "cm-select" (selectpicker.js): usan el menú
   desplegable .cs de la página, en tamaño compacto para que
   combinen con los demás campos de los formularios.
   ============================================================ */
.cm-sel-wrap { position: relative; }
.cm-sel-wrap:has(#staffOrdersStatusFilter) { min-width: 14rem; }
.cm-sel-wrap:has(#staffUsersRoleFilter) { min-width: 14rem; }
.cm-sel-wrap:has(#coverageCitySelect) { width: 100%; }
/* El <select> real queda oculto pero presente (para required, .value y onchange) */
.cm-sel-native { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.cm-sel-compact .cs-btn {
    min-height: 0; padding: 0.625rem; font-size: 0.75rem; line-height: 1rem;
    border: 1px solid var(--secondary-300); border-radius: 0.75rem; background: #fff;
}
.cm-sel-compact .cs-btn:hover { background: #fff; border-color: var(--primary-500); }
.cm-sel-compact .cs-btn:focus-visible, .cm-sel-compact .cs-btn.is-open {
    background: #fff; border-color: var(--primary-500); box-shadow: 0 0 0 2px var(--primary-500);
}
.cm-sel-compact .cs-btn:disabled { opacity: 0.55; cursor: not-allowed; }


/* ============================================================
   Panel de administración > Usuarios: buscador y botón Filtrar
   (mismos colores que el buscador de Pedidos y las pestañas del panel)
   ============================================================ */
.staff-users-clear {
    position: absolute; right: 0.4rem; top: 50%; transform: translateY(-50%);
    width: 1.6rem; height: 1.6rem; border-radius: 9999px; border: 0; background: transparent;
    color: var(--secondary-400); font-size: 0.75rem; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.staff-users-clear:hover { background: var(--primary-100); color: var(--secondary-900); }
.staff-users-clear.hidden { display: none; }



/* Cobertura > selector de punto: mismo menú desplegable de la página, en tamaño grande
   (igual al campo anterior: esquinas muy redondeadas, letra en negrita, fondo crema). */
.cm-sel-wrap:has(#coverageCitySelect) .cs-btn {
    min-height: 3.1rem; padding: 0.875rem 1rem;
    font-size: 0.875rem; font-weight: 700; line-height: 1.25rem;
    border: 1px solid var(--secondary-200); border-radius: 1rem;
    background: var(--tertiary-50, #FDF9F0); color: var(--secondary-800);
    box-shadow: 0 1px 2px rgba(63, 37, 17, .08);
}
.cm-sel-wrap:has(#coverageCitySelect) .cs-btn:hover { background: #FCF6E7; border-color: #DCB141; }
.cm-sel-wrap:has(#coverageCitySelect) .cs-btn:focus-visible,
.cm-sel-wrap:has(#coverageCitySelect) .cs-btn.is-open {
    background: #FFFDF8; border-color: var(--primary-600, #B28515);
    box-shadow: 0 0 0 3px rgba(212, 160, 23, .28);
}
@media (max-width: 639px) { .cm-sel-wrap:has(#coverageCitySelect) .cs-btn { font-size: 0.875rem; min-height: 3.1rem; } }

/* ============================================================
   VENTANA DE INSTALAR APP — mismo estilo que el aviso de cookies
   (café oscuro, borde dorado, logo). Colores: los de la marca.
   ============================================================ */
.install-modal {
    position: fixed; inset: 0; z-index: 60;
    display: none; align-items: center; justify-content: center;
    padding: 16px; background: rgba(18, 6, 0, .68);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    font-family: 'Poppins', sans-serif;
}
.install-modal.is-visible { display: flex; animation: installFade .3s ease-out; }
.install-card {
    position: relative; width: 100%; max-width: 380px; text-align: center;
    padding: 28px 22px 20px; color: #FDF9F0;
    background: linear-gradient(160deg, #553217 0%, #3F2511 55%, #2a1708 100%);
    border: 2px solid #D4A017; border-radius: 24px;
    box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 0 0 6px rgba(212,160,23,.12);
    animation: installPop .4s cubic-bezier(.2,.9,.3,1.2);
}
.install-close {
    position: absolute; top: 10px; right: 10px; width: 32px; height: 32px;
    border-radius: 999px; border: 0; background: rgba(253,249,240,.1); color: #DCCCB0;
    cursor: pointer; transition: background .2s, color .2s;
}
.install-close:hover { background: rgba(212,160,23,.3); color: #fff; }
.install-logo {
    width: 96px; height: 96px; margin: 0 auto 14px; border-radius: 22px; overflow: hidden;
    background: #120600; border: 2px solid #D4A017;
    box-shadow: 0 0 0 5px rgba(212,160,23,.18), 0 10px 26px rgba(212,160,23,.28);
}
.install-logo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.install-title { margin: 0; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 20px; line-height: 1.2; color: #D4A017; }
.install-tagline { margin: 4px 0 12px; font-size: 12.5px; font-weight: 600; font-style: italic; color: #DCCCB0; }
.install-msg { margin: 0 0 14px; font-size: 14px; line-height: 1.55; color: #F5E6C8; }
.install-msg strong { color: #D4A017; }
.install-perks { list-style: none; margin: 0 0 16px; padding: 12px 14px; text-align: left; font-size: 12.5px; font-weight: 600; color: #F5E6C8; background: rgba(253,249,240,.07); border: 1px solid rgba(212,160,23,.3); border-radius: 14px; display: grid; gap: 8px; }
.install-perks i { width: 22px; text-align: center; margin-right: 6px; color: #D4A017; }
.install-ios { display: none; margin: -4px 0 14px; padding: 10px 12px; font-size: 12.5px; line-height: 1.5; color: #F5E6C8; background: rgba(193,68,14,.22); border: 1px dashed #C1440E; border-radius: 12px; }
.install-ios.is-on { display: block; }
.install-actions { display: flex; gap: 8px; }
.install-actions .cookie-btn { flex: 1; padding: 12px 10px; }
.install-actions .cookie-btn--solid i { margin-right: 6px; }
@keyframes installFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes installPop { from { opacity: 0; transform: translateY(18px) scale(.94); } to { opacity: 1; transform: none; } }
.cookie-banner.is-visible ~ #installBanner { display: none !important; }

/* ============================================================
   NUESTRO MENÚ — tarjetas de la página + ventana emergente
   ============================================================ */
.menu-heading { display:flex; align-items:center; gap:12px; margin:0 0 18px; font-size:clamp(1.6rem,4vw,2.4rem); font-weight:900; color:var(--secondary-900); }
.menu-heading__icon { display:inline-flex; align-items:center; justify-content:center; width:2.6rem; height:2.6rem; border-radius:12px; background:var(--secondary-900); color:var(--primary-500); font-size:1.2rem; box-shadow:0 4px 12px rgba(63,37,17,.3); }
.menu-tiles { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
@media (min-width:768px){ .menu-tiles { grid-template-columns:repeat(4,1fr); gap:24px; } }
.menu-tile { display:flex; flex-direction:column; padding:0; border:0; overflow:hidden; border-radius:20px; background:#fff; cursor:pointer; text-align:center; box-shadow:0 6px 18px rgba(63,37,17,.16); transition:transform .25s, box-shadow .25s; -webkit-tap-highlight-color:transparent; }
.menu-tile:hover { transform:translateY(-6px); box-shadow:0 14px 28px rgba(63,37,17,.26); }
.menu-tile.is-pressed { animation:menuPress .22s ease-out; }
@keyframes menuPress { 50% { transform:scale(.92); } }
.menu-tile__photo { position:relative; display:flex; align-items:center; justify-content:center; aspect-ratio:1/1; background:linear-gradient(160deg,#fff,var(--tertiary-100)); overflow:hidden; }
.menu-tile__photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.menu-tile:hover .menu-tile__photo img { transform:scale(1.08); }
.menu-tile__emoji { font-size:clamp(3rem,10vw,4.5rem); }
.menu-tile__label { padding:12px 8px; font-family:'Montserrat',sans-serif; font-weight:800; font-size:.95rem; color:#fff; background:var(--quaternary-600); }
.menu-modal { position:fixed; inset:0; z-index:50; align-items:center; justify-content:center; padding:10px; background:rgba(63,37,17,.72); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.menu-modal.flex { animation:installFade .25s ease-out; }
.menu-card { display:flex; flex-direction:column; width:100%; max-width:1180px; max-height:94vh; background:var(--tertiary-50); border:2px solid var(--primary-500); border-radius:24px; box-shadow:0 24px 60px rgba(0,0,0,.5); overflow:hidden; animation:menuPop .35s cubic-bezier(.2,.9,.3,1.15); }
@keyframes menuPop { from { opacity:0; transform:translateY(24px) scale(.9); } to { opacity:1; transform:none; } }
.menu-card__top { display:flex; align-items:stretch; border-bottom:1px solid var(--secondary-100); background:#fff; }
.menu-tabs { display:flex; flex:1; overflow-x:auto; justify-content:center; gap:4px; padding:6px 8px 0; scrollbar-width:none; }
.menu-tabs::-webkit-scrollbar { display:none; }
.menu-tab { display:flex; flex-direction:column; align-items:center; gap:4px; min-width:76px; padding:6px 10px 8px; border:0; border-bottom:3px solid transparent; background:none; cursor:pointer; color:var(--secondary-800); font-weight:700; font-size:.78rem; transition:background .2s; }
.menu-tab:hover { background:var(--primary-50); }
.menu-tab.is-active { color:var(--quaternary-600); border-bottom-color:var(--quaternary-600); }
.menu-tab__photo { position:relative; display:flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:50%; overflow:hidden; background:var(--tertiary-100); font-size:1.4rem; }
.menu-tab__photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.menu-close { flex-shrink:0; width:40px; height:40px; margin:8px; border:0; border-radius:50%; background:var(--secondary-900); color:var(--primary-500); cursor:pointer; }
.menu-close:hover { background:var(--quaternary-600); color:#fff; }
.menu-card__body { flex:1; overflow-y:auto; padding:14px 16px 20px; overscroll-behavior:contain; }
.menu-panel { display:none; }
.menu-panel.is-active { display:block; animation:installFade .3s ease-out; }
.menu-panel section > div:first-child { margin-bottom:.9rem !important; }
.menu-panel section > div:first-child h3 { font-size:1.4rem; margin-top:.25rem; }
.menu-panel section > div:first-child p { font-size:.8rem; margin-top:.25rem; }
/* Combos más compactos (misma información, sin tanto espacio vertical) */
#menuModal #combos .grid { gap:12px !important; }
#menuModal #combos .grid > div { padding:12px !important; }
#menuModal #combos [style*="aspect-ratio"] { aspect-ratio:16/9 !important; margin-bottom:.6rem !important; }
#menuModal #combos h4 { font-size:1rem; }
#menuModal #combos p { font-size:.72rem; line-height:1.35; }
/* Bebidas e insumos */
.menu-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
@media (min-width:768px){ .menu-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; } .menu-grid--2 { grid-template-columns:repeat(2,minmax(0,360px)); justify-content:center; } }
.menu-item { display:flex; flex-direction:column; align-items:center; gap:4px; padding:14px 10px; text-align:center; border:1px solid var(--primary-100); border-radius:20px; background:#fff; box-shadow:0 4px 12px rgba(63,37,17,.1); }
.menu-item__pic { display:flex; align-items:center; justify-content:center; width:100%; aspect-ratio:1/1; margin-bottom:6px; border-radius:14px; background:linear-gradient(160deg,var(--secondary-800),var(--secondary-900)); font-size:3.2rem; overflow:hidden; }
.menu-item__pic img { width:100%; height:100%; object-fit:cover; }
.menu-item--drink .menu-item__pic { aspect-ratio:auto; padding:10px 0; font-size:2.2rem; }
.menu-item h4 { font-family:'Montserrat',sans-serif; font-weight:800; font-size:.92rem; color:var(--secondary-900); }
.menu-item p { font-size:.72rem; line-height:1.4; color:var(--secondary-500); }
.menu-item__price { font-weight:900; font-size:1.25rem; color:var(--primary-700); }
.menu-add { width:100%; margin-top:4px; padding:9px 10px; border:0; border-radius:12px; font-weight:800; font-size:.82rem; background:var(--primary-500); color:var(--secondary-900); cursor:pointer; transition:background .2s, transform .15s; }
.menu-add:hover { background:var(--primary-600); } .menu-add:active { transform:scale(.95); }
.menu-add.is-done { background:var(--quaternary-600); color:#fff; }
@media (prefers-reduced-motion:reduce){ .menu-card,.menu-panel.is-active,.menu-tile.is-pressed{ animation:none; } }

/* Bebidas: una fila por tipo que se despliega con sus sabores */
.drink-groups { display:grid; gap:10px; max-width:720px; margin:0 auto; }
.drink-group { background:#fff; border:1px solid var(--primary-100); border-radius:18px; box-shadow:0 4px 12px rgba(63,37,17,.1); overflow:hidden; transition:border-color .2s; }
.drink-group.is-open { border-color:var(--primary-500); }
.drink-group__head { display:flex; align-items:center; gap:14px; width:100%; padding:12px 16px; border:0; background:none; cursor:pointer; text-align:left; }
.drink-group__emoji { display:flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:14px; font-size:1.7rem; background:var(--secondary-900); flex-shrink:0; }
.drink-group__txt { flex:1; display:flex; flex-direction:column; min-width:0; }
.drink-group__txt b { font-family:'Montserrat',sans-serif; font-weight:800; font-size:1.02rem; color:var(--secondary-900); }
.drink-group__txt small { font-size:.74rem; color:var(--secondary-500); }
.drink-group__arrow { color:var(--quaternary-600); transition:transform .3s; }
.drink-group.is-open .drink-group__arrow { transform:rotate(180deg); }
.drink-group__body { display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s ease; }
.drink-group.is-open .drink-group__body { grid-template-rows:1fr; }
.drink-group__body > .menu-grid { overflow:hidden; min-height:0; padding:0 14px; }
.drink-group.is-open .drink-group__body > .menu-grid { padding:4px 14px 16px; }
.menu-grid--drinks { grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (min-width:640px){ .menu-grid--drinks { grid-template-columns:repeat(3,minmax(0,1fr)); } }
.menu-grid--drinks .menu-item { box-shadow:none; background:var(--tertiary-50); }
@media (prefers-reduced-motion:reduce){ .drink-group__body,.drink-group__arrow{ transition:none; } }

/* Pestañas del menú: las 4 siempre visibles y repartidas en partes iguales (sin cortes en celular) */
.menu-tabs { overflow-x:visible; justify-content:stretch; gap:2px; padding:6px 4px 0 6px; }
.menu-tab { flex:1 1 0; min-width:0; padding:6px 2px 8px; }
.menu-tab__label { max-width:100%; white-space:nowrap; font-size:.78rem; }
@media (max-width:480px){
    .menu-tab__photo { width:40px; height:40px; font-size:1.2rem; }
    .menu-tab__label { font-size:.68rem; }
    .menu-close { width:34px; height:34px; margin:10px 8px 0 4px; align-self:flex-start; }
}
@media (min-width:768px){ .menu-tabs { justify-content:center; } .menu-tab { flex:0 0 auto; min-width:90px; padding:6px 12px 8px; } }

/* Miniatura con el ícono de la bebida/insumo en "Mi Orden" */
.cart-thumb--emoji { position:relative; display:flex; align-items:center; justify-content:center; flex-shrink:0; overflow:hidden; border-radius:.75rem; background:linear-gradient(160deg,var(--secondary-800),var(--secondary-900)); font-size:2.2rem; box-shadow:0 2px 8px rgba(63,37,17,.3); }
.cart-thumb--emoji img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }


/* ============================================================
   "MI ORDEN": EDITAR PEDIDO (arepas y combos) y CAMBIAR (bebidas e insumos)
   Mismos colores de la marca: dorado (primary), café (secondary) y naranja (quaternary).
   ============================================================ */

/* Las ventanas de edición se abren ENCIMA de "Mi Orden" (que también es z-50 y va después en el HTML) */
#arepaBuilderModal, #comboBuilderModal { z-index: 55; }
#swapModal { z-index: 56; }

/* Fila de acciones de cada pedido: Editar / Cambiar + Quitar */
.cart-actions {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
    gap: 0.4rem; padding-top: 0.25rem;
}
.cart-act {
    display: inline-flex; align-items: center; gap: 0.375rem;
    padding: 0.4rem 0.75rem;
    border: 1.5px solid transparent; border-radius: 0.6rem;
    font-size: 11px; font-weight: 800; line-height: 1.2;
    cursor: pointer; white-space: nowrap;
    transition: background-color .15s, border-color .15s, color .15s, transform .1s, box-shadow .15s;
}
.cart-act:active { transform: scale(.95); }
.cart-act:focus-visible { outline: 2px solid var(--primary-600, #B28515); outline-offset: 2px; }
/* Editar / Cambiar: mismo dorado de los botones "Añadir" y de las opciones elegidas */
.cart-act--edit {
    color: var(--secondary-800, #553217);
    background: var(--primary-50, #FCF6E7);
    border-color: var(--primary-300, #E8CB78);
}
.cart-act--edit i { color: var(--primary-700, #906A12); }
.cart-act--edit:hover {
    background: var(--primary-500, #D4A017);
    border-color: var(--primary-500, #D4A017);
    color: var(--secondary-900, #3F2511);
    box-shadow: 0 4px 10px -4px rgba(178, 133, 21, .6);
}
.cart-act--edit:hover i { color: var(--secondary-900, #3F2511); }
/* Quitar: discreto, se pinta naranja al pasar el mouse (igual que antes) */
.cart-act--remove { color: var(--secondary-400, #937258); background: transparent; }
.cart-act--remove:hover { color: var(--quaternary-600, #C1440E); background: var(--quaternary-50, #FBF1E9); }

/* Aviso breve sobre el pedido que se acaba de actualizar */
@keyframes cartItemFlash {
    0%   { box-shadow: 0 0 0 0 rgba(212, 160, 23, .75); border-color: var(--primary-500, #D4A017); }
    60%  { box-shadow: 0 0 0 7px rgba(212, 160, 23, 0);  border-color: var(--primary-500, #D4A017); }
    100% { box-shadow: 0 0 0 0 rgba(212, 160, 23, 0); }
}
.cart-item--flash { animation: cartItemFlash 1.3s ease-out; }
.cart-updated-tag {
    position: absolute; top: -0.6rem; right: 0.9rem;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    background: var(--quaternary-600, #C1440E); color: #fff;
    font-size: 10px; font-weight: 800; letter-spacing: .02em;
    box-shadow: 0 3px 8px -2px rgba(63, 37, 17, .5);
    animation: cartTagIn .25s ease-out;
    pointer-events: none;
}
@keyframes cartTagIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Ventana "Cambiar bebida / insumo" */
.swap-group__title {
    display: flex; align-items: center; gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 0.8rem;
    color: var(--secondary-800, #553217);
}
.swap-group__title .swap-group__emoji {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.75rem; height: 1.75rem; border-radius: 0.5rem;
    background: var(--secondary-900, #3F2511); font-size: 1rem;
}
.swap-desc { font-size: 11px; line-height: 1.35; color: var(--secondary-500, #7A5B45); margin: -0.15rem 0 0.5rem; }
.swap-current-note {
    font-size: 11px; font-weight: 600; padding: 0.5rem 0.65rem;
    border: 1px solid var(--primary-200, #F0DCA0); border-radius: 0.75rem;
    background: var(--primary-50, #FCF6E7); color: var(--primary-700, #906A12);
}
/* El botón usa las mismas clases que "Guardar cambios" de los armadores; aquí solo el estado sin cambios */
.swap-save:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none !important; }

@media (max-width: 400px) {
    .cart-act { padding: 0.4rem 0.6rem; }
    .cart-actions { justify-content: stretch; }
    .cart-actions .cart-act { flex: 1 1 auto; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    .cart-item--flash, .cart-updated-tag { animation: none; }
}


/* Foto de los insumos (masa de arepas / grasa de cerdo) en lugar del emoji */
.ins-ico {
    display: inline-block; flex-shrink: 0;
    width: 1.35rem; height: 1.35rem;
    object-fit: cover; border-radius: 0.35rem;
    border: 1px solid var(--primary-200, #F0DCA0);
    vertical-align: -0.3rem;
}
.opt-chip .ins-ico { width: 2rem; height: 2rem; border-radius: 0.45rem; vertical-align: middle; margin-right: 0.15rem; }
.cart-thumb--emoji img { display: block; }


/* Foto de las bebidas (Coca Cola, Sprite, Quatro) en lugar del emoji */
.menu-item--drink .menu-item__pic--photo { aspect-ratio: 1 / 1; padding: 0; }
.extra-emoji .extra-photo {
    display: block; width: 4.5rem; height: 4.5rem; margin: 0 auto;
    object-fit: cover; border-radius: 0.75rem;
    border: 1px solid var(--primary-200, #F0DCA0);
    box-shadow: 0 3px 8px -3px rgba(63, 37, 17, .4);
}


/* ===== Sección "Descargar app" (entre la carta y toppings) ===== */
.app-promo { background: linear-gradient(135deg, #3a1d08 0%, #2a1405 55%, #1a0c03 100%); border: 2px solid #D4A017; color: #F5E6C8; }
.app-promo__grid { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
.app-promo__text { text-align: center; width: 100%; }
.app-promo__tag { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .8rem; border-radius: 999px; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #D4A017; background: rgba(212,160,23,.14); border: 1px solid rgba(212,160,23,.45); }
.app-promo__title { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1.6rem; line-height: 1.2; margin-top: .6rem; color: #D4A017; }
.app-promo__sub { margin-top: .5rem; font-size: .92rem; color: rgba(245,230,200,.92); }
.app-promo__perks { list-style: none; margin: 1rem auto 0; padding: .8rem 1rem; max-width: 24rem; display: grid; gap: .55rem; text-align: left; background: rgba(0,0,0,.25); border: 1px solid rgba(212,160,23,.3); border-radius: 1rem; font-size: .85rem; font-weight: 600; }
.app-promo__perks i { width: 1.2rem; margin-right: .4rem; text-align: center; color: #D4A017; }
.app-promo__btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; margin-top: 1.1rem; padding: .85rem 1.6rem; border-radius: .9rem; font-weight: 800; color: #2a1405; background: #D4A017; box-shadow: 0 10px 22px -8px rgba(212,160,23,.7); }
.app-promo__btn:hover { background: #e6b422; }
.app-promo__visual { display: none; }
.app-promo__phone { width: 13rem; padding: .9rem; border-radius: 2rem; display: grid; gap: .6rem; justify-items: center; background: #120600; border: 3px solid rgba(212,160,23,.7); box-shadow: 0 18px 40px -12px rgba(0,0,0,.7); transform: rotate(4deg); }
.app-promo__logo { width: 4.2rem; height: 4.2rem; border-radius: 1.1rem; overflow: hidden; border: 2px solid #D4A017; }
.app-promo__logo img { width: 100%; height: 100%; object-fit: cover; }
.app-promo__card { width: 100%; display: flex; align-items: center; gap: .5rem; padding: .4rem; border-radius: .8rem; font-size: .72rem; font-weight: 700; background: rgba(212,160,23,.12); border: 1px solid rgba(212,160,23,.35); }
.app-promo__card img { width: 2.4rem; height: 2.4rem; border-radius: .6rem; object-fit: cover; }
.app-promo__cta { width: 100%; text-align: center; padding: .45rem; border-radius: .7rem; font-size: .72rem; font-weight: 800; color: #2a1405; background: #D4A017; }
@media (min-width: 640px) {
    .app-promo__grid { flex-direction: row; justify-content: space-between; gap: 2rem; }
    .app-promo__text { text-align: left; }
    .app-promo__perks { margin-left: 0; }
    .app-promo__title { font-size: 2rem; }
    .app-promo__visual { display: block; flex-shrink: 0; padding-right: 1rem; }
}

.cookie-banner.is-visible ~ #installBanner.is-manual { display: flex !important; }

/* ===== Secuencia de pantallas (estilo capturas de tienda de apps) ===== */
.app-shots-wrap { position: relative; margin-top: 1.5rem; }
.app-shots { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 10px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.app-shots::-webkit-scrollbar { display: none; }
.app-shot { flex: 0 0 11.5rem; height: 24rem; scroll-snap-align: start; position: relative; overflow: hidden; border-radius: 1.4rem; padding: 1rem .8rem 0; text-align: center; background: linear-gradient(180deg, #5a1d0a 0%, #3a1405 60%, #C1440E 60.5%, #C1440E 100%); border: 1px solid rgba(212,160,23,.55); box-shadow: 0 12px 26px -12px rgba(0,0,0,.8); }
.app-shot h4 { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: .9rem; line-height: 1.2; color: #F5E6C8; min-height: 3.3em; }
.app-shot__phone { position: absolute; left: 50%; bottom: -2.2rem; transform: translateX(-50%); width: 8.6rem; height: 15.5rem; padding: .5rem .45rem; border-radius: 1.5rem; display: flex; flex-direction: column; gap: .35rem; background: #120600; border: 3px solid #D4A017; box-shadow: 0 10px 24px -8px rgba(0,0,0,.8); text-align: left; overflow: hidden; }
.ph-head { display: flex; align-items: center; gap: .3rem; padding-bottom: .3rem; border-bottom: 1px solid rgba(212,160,23,.3); }
.ph-head img { width: 1.1rem; height: 1.1rem; border-radius: .3rem; object-fit: cover; }
.ph-head b { font-size: .62rem; color: #D4A017; }
.ph-hero { width: 100%; height: 5.2rem; object-fit: cover; border-radius: .7rem; }
.ph-title { font-size: .66rem; font-weight: 800; color: #F5E6C8; }
.ph-row { display: flex; gap: .25rem; }
.ph-btn { flex: 1; text-align: center; padding: .3rem .1rem; font-size: .5rem; font-weight: 800; border-radius: .5rem; color: #2a1405; background: #D4A017; }
.ph-btn--ghost { color: #D4A017; background: transparent; border: 1px solid #D4A017; }
.ph-item { display: flex; align-items: center; gap: .35rem; padding: .25rem; border-radius: .6rem; background: rgba(212,160,23,.12); border: 1px solid rgba(212,160,23,.3); }
.ph-item img { width: 2.1rem; height: 2.1rem; border-radius: .5rem; object-fit: cover; flex-shrink: 0; }
.ph-item span { font-size: .55rem; font-weight: 800; color: #F5E6C8; line-height: 1.2; }
.ph-item em { display: block; font-style: normal; font-weight: 600; color: #D4A017; }
.ph-tabs { display: flex; gap: .2rem; }
.ph-tabs i { flex: 1; text-align: center; font-style: normal; font-size: .46rem; font-weight: 800; padding: .25rem 0; border-radius: .4rem; color: #F5E6C8; background: rgba(255,255,255,.08); }
.ph-tabs i.on { color: #2a1405; background: #D4A017; }
.ph-chip { font-size: .52rem; font-weight: 700; padding: .35rem .4rem; border-radius: .5rem; color: #F5E6C8; background: rgba(255,255,255,.07); border: 1px solid rgba(212,160,23,.25); }
.ph-chip.on { color: #2a1405; background: #D4A017; border-color: #D4A017; }
.ph-note { margin-top: auto; text-align: center; font-size: .5rem; font-weight: 800; padding: .3rem; border-radius: .5rem; color: #2a1405; background: #D4A017; }
.ph-club { display: grid; gap: .15rem; justify-items: center; padding: .5rem; border-radius: .8rem; text-align: center; background: rgba(212,160,23,.14); border: 1px solid rgba(212,160,23,.4); }
.ph-club span { font-size: 1.3rem; } .ph-club b { font-size: .62rem; color: #D4A017; } .ph-club i { font-style: normal; font-size: .5rem; color: #F5E6C8; }
.ph-bar { width: 100%; height: .3rem; border-radius: 9px; background: rgba(255,255,255,.15); }
.ph-bar u { display: block; width: 60%; height: 100%; border-radius: 9px; background: #D4A017; }
.ph-turn { text-align: center; padding: .45rem; font-size: .6rem; font-weight: 700; border-radius: .7rem; color: #F5E6C8; background: rgba(193,68,14,.35); border: 1px solid #C1440E; }
.ph-turn b { color: #D4A017; font-size: .9rem; }
.ph-step { font-size: .52rem; font-weight: 700; padding: .35rem .4rem; border-radius: .5rem; color: rgba(245,230,200,.55); background: rgba(255,255,255,.05); }
.ph-step.done { color: #D4A017; } .ph-step.now { color: #2a1405; background: #D4A017; }
.app-shot--end .app-shot__big { position: absolute; left: 50%; bottom: .6rem; transform: translateX(-50%); width: 88%; height: 11rem; object-fit: cover; border-radius: 1rem; border: 3px solid #D4A017; box-shadow: 0 10px 22px -8px rgba(0,0,0,.8); }
.app-shots-arrow { display: none; position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 2.4rem; height: 2.4rem; border-radius: 999px; color: #2a1405; background: #D4A017; box-shadow: 0 6px 14px -4px rgba(0,0,0,.6); }
.app-shots-arrow--l { left: -.6rem; } .app-shots-arrow--r { right: -.6rem; }
@media (min-width: 640px) { .app-shots-arrow { display: block; } .app-shot { flex-basis: 12.5rem; height: 26rem; } .app-shot__phone { width: 9.4rem; height: 17rem; } }

/* ===== Descargar app: versión compacta (menos alto) ===== */
.app-promo { padding-top: 1.1rem; padding-bottom: 1.1rem; }
.app-promo__perks { margin-top: .7rem; padding: .6rem .8rem; gap: .4rem; }
.app-promo__btn { margin-top: .8rem; padding: .7rem 1.4rem; }
.app-shots-wrap { margin-top: 1rem; }
.app-shot { flex-basis: 9.6rem; height: 15.5rem; padding: .7rem .5rem 0; }
.app-shot h4 { font-size: .74rem; min-height: 2.6em; }
.app-shot__phone { width: 7.4rem; height: 13rem; bottom: -2.4rem; padding: .4rem .35rem; gap: .28rem; }
.app-shot--end .app-shot__big { height: 8.6rem; bottom: .5rem; }
@media (min-width: 640px) {
    .app-shot { flex-basis: 10.2rem; height: 16rem; }
    .app-shot__phone { width: 7.8rem; height: 13.4rem; }
}
@media (min-width: 1024px) {
    .app-promo { display: grid; grid-template-columns: 19rem minmax(0, 1fr); align-items: center; column-gap: 2rem; }
    .app-promo .app-promo__grid { grid-column: 1; }
    .app-promo .app-shots-wrap { grid-column: 2; margin-top: 0; min-width: 0; }
    .app-promo__title { font-size: 1.7rem; }
    .app-shot { flex-basis: 10.6rem; height: 17rem; }
    .app-shot__phone { width: 8.2rem; height: 14.2rem; }
    .app-shot--end .app-shot__big { height: 9.6rem; }
}

/* ===== Administrar página (solo administrador) ===== */
.site-hidden { display: none !important; }
.site-edit-on *:not(.sa-ui):not(.sa-ui *):hover { outline: 2px dashed var(--sa-acc, #D4A017) !important; outline-offset: 2px; cursor: pointer; }
.sa-fab { position: fixed; left: 14px; bottom: 14px; z-index: 55; display: flex; align-items: center; gap: .4rem; padding: .65rem 1rem; border-radius: 999px; font: 800 .85rem 'Poppins', sans-serif; color: var(--sa-dark, #2a1405); background: var(--sa-acc, #D4A017); border: 0; box-shadow: 0 10px 22px -8px rgba(0,0,0,.6); }
.sa-fab:hover { background: var(--sa-acc-hi, #e6b422); }
.sa-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 90; display: flex; align-items: center; justify-content: center; gap: .8rem; padding: .5rem .8rem; font: 700 .8rem 'Poppins', sans-serif; color: var(--sa-dark, #2a1405); background: var(--sa-acc, #D4A017); }
.sa-bar button { padding: .25rem .8rem; border-radius: 999px; font-weight: 800; color: var(--sa-acc, #D4A017); background: var(--sa-dark, #2a1405); }
.sa-bar { flex-wrap: wrap; row-gap: .35rem; }
.sa-bar__t { font-weight: 800; }
.sa-bar__hint { font-weight: 600; font-size: .72rem; opacity: .85; }
.sa-bar__tools { display: inline-flex; gap: .4rem; flex-wrap: wrap; justify-content: center; }
.sa-bar button { white-space: nowrap; }
.sa-bar button:hover { background: var(--sa-bg1, #3a1d08); }
.sa-bar button:disabled { opacity: .4; pointer-events: none; }
.sa-bar .sa-bar__save { color: var(--sa-txt, #F5E6C8); background: #C1440E; box-shadow: 0 0 0 2px var(--sa-dark, #2a1405) inset; }
.sa-bar .sa-bar__save:hover { background: #a63a0b; }
.sa-bar .sa-bar__save.is-dirty { animation: saPulse 1.6s ease-in-out infinite; }
.sa-bar__n { display: inline-block; min-width: 1.15rem; padding: 0 .3rem; margin-left: .15rem; border-radius: 999px; font-size: .68rem; line-height: 1.15rem; text-align: center; color: #C1440E; background: var(--sa-txt, #F5E6C8); }
@keyframes saPulse { 0%,100% { box-shadow: 0 0 0 2px #2a1405 inset, 0 0 0 0 rgba(193,68,14,.55); } 50% { box-shadow: 0 0 0 2px #2a1405 inset, 0 0 0 7px rgba(193,68,14,0); } }
.sa-bar button[data-sa-bar="level"] { color: var(--sa-dark, #2a1405); background: var(--sa-txt, #F5E6C8); }
.sa-bar button[data-sa-bar="level"]:hover { background: #fff3da; }
@media (max-width: 640px) {
    .sa-bar { justify-content: space-between; gap: .3rem .5rem; padding: .4rem .6rem; font-size: .75rem; }
    .sa-bar__t { order: 1; }
    .sa-bar__exit { order: 2; }
    .sa-bar__tools { order: 3; flex-basis: 100%; flex-wrap: wrap; justify-content: center; }
    .sa-bar__hint, .sa-bar__lbl { display: none; }
    .sa-bar button { padding: .3rem .75rem; font-size: .75rem; }
    .sa-bar__tools { gap: .3rem; }
    .sa-bar__tools button[data-sa-bar="undo"], .sa-bar__tools button[data-sa-bar="reset"] { padding: .3rem .7rem; font-size: .9rem; line-height: 1; }
}

/* ===== Mover cosas en el Modo edición ===== */
.site-edit-on *:not(.sa-ui):not(.sa-ui *):hover { cursor: grab; }
body.site-edit-on *:not(.sa-ui):not(.sa-ui *) { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
body.site-edit-on img { -webkit-user-drag: none; }
body.site-edit-on .sa-move-target.sa-move-target.sa-move-target { outline: 3px solid #C1440E !important; outline-offset: 2px; }
body.site-edit-on .sa-moved:not(.sa-lifted) { outline: 2px dotted rgba(193,68,14,.55); outline-offset: 2px; }
body.site-edit-on .sa-lifted { filter: drop-shadow(0 14px 16px rgba(42,20,5,.5)); opacity: .94; z-index: 80; }
body.sa-dragging, body.sa-dragging * { cursor: grabbing !important; user-select: none !important; -webkit-user-select: none !important; }
.sa-overlay { position: fixed; inset: 0; z-index: 85; display: none; align-items: center; justify-content: center; padding: 14px; background: rgba(18,6,0,.72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); font-family: 'Poppins', sans-serif; }
.sa-overlay.is-on { display: flex; }
#saEditor { z-index: 95; }
.sa-card { width: 100%; max-width: 26rem; max-height: 92vh; overflow: auto; padding: 1.1rem; border-radius: 1.4rem; color: var(--sa-txt, #F5E6C8); background: linear-gradient(160deg, var(--sa-bg1, #3a1d08), var(--sa-bg2, #1a0c03)); border: 2px solid var(--sa-acc, #D4A017); box-shadow: 0 24px 50px -12px rgba(0,0,0,.8); }
.sa-card--wide { max-width: 44rem; display: flex; flex-direction: column; padding: 0; overflow: hidden; height: 90vh; }
.sa-card h3 { font-family: 'Montserrat', sans-serif; font-weight: 800; color: var(--sa-acc, #D4A017); font-size: 1.05rem; margin-bottom: .6rem; }
.sa-head { display: flex; align-items: center; justify-content: space-between; padding: .9rem 1.1rem .4rem; }
.sa-head h3 { margin: 0; }
.sa-x { width: 2rem; height: 2rem; border-radius: 999px; color: var(--sa-acc, #D4A017); background: rgba(var(--sa-acc-rgb, 212,160,23),.15); }
.sa-tabs { display: flex; gap: .4rem; overflow-x: auto; padding: .4rem 1.1rem .7rem; scrollbar-width: none; }
.sa-tabs::-webkit-scrollbar { display: none; }
.sa-tabs button { flex-shrink: 0; padding: .4rem .85rem; border-radius: 999px; font-size: .78rem; font-weight: 700; color: var(--sa-txt, #F5E6C8); background: rgba(255,255,255,.07); border: 1px solid rgba(var(--sa-acc-rgb, 212,160,23),.3); }
.sa-tabs button.is-on { color: var(--sa-dark, #2a1405); background: var(--sa-acc, #D4A017); border-color: var(--sa-acc, #D4A017); }
.sa-body { flex: 1; overflow-y: auto; padding: .3rem 1.1rem 1rem; display: grid; gap: .7rem; align-content: start; }
.sa-foot { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .8rem 1.1rem; border-top: 1px solid rgba(var(--sa-acc-rgb, 212,160,23),.3); background: rgba(0,0,0,.25); }
.sa-foot #saMsg { font-size: .75rem; color: var(--sa-txt, #F5E6C8); }
.sa-row { position: relative; display: flex; gap: .8rem; align-items: flex-start; padding: .7rem; border-radius: 1rem; background: rgba(var(--sa-acc-rgb, 212,160,23),.08); border: 1px solid rgba(var(--sa-acc-rgb, 212,160,23),.3); }
.sa-row--slim { align-items: center; justify-content: space-between; }
.sa-pic { flex-shrink: 0; width: 5rem; display: grid; gap: .3rem; justify-items: center; }
.sa-pic img, .sa-pic > span { width: 5rem; height: 5rem; border-radius: .8rem; object-fit: cover; display: grid; place-items: center; font-size: 2rem; background: rgba(0,0,0,.35); border: 1px solid rgba(var(--sa-acc-rgb, 212,160,23),.4); }
.sa-pic button { width: 100%; padding: .25rem; border-radius: .5rem; font-size: .68rem; font-weight: 800; color: var(--sa-dark, #2a1405); background: var(--sa-acc, #D4A017); }
.sa-fields { flex: 1; min-width: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.sa-title { grid-column: 1 / -1; font-weight: 800; font-size: .85rem; color: var(--sa-acc, #D4A017); }
.sa-f { display: grid; gap: .15rem; font-size: .66rem; font-weight: 700; color: rgba(var(--sa-txt-rgb, 245,230,200),.8); }
.sa-f--name, .sa-f--desc { grid-column: 1 / -1; }
.sa-input { width: 100%; padding: .45rem .6rem; border-radius: .6rem; font: 600 .82rem 'Poppins', sans-serif; color: var(--sa-txt, #F5E6C8); background: rgba(0,0,0,.35); border: 1px solid rgba(var(--sa-acc-rgb, 212,160,23),.4); }
.sa-input:focus { outline: 2px solid var(--sa-acc, #D4A017); }
.sa-del { position: absolute; top: .4rem; right: .4rem; font-size: 1rem; }
.sa-btn { padding: .6rem 1.1rem; border-radius: .8rem; font-weight: 800; font-size: .85rem; color: var(--sa-dark, #2a1405); background: var(--sa-acc, #D4A017); }
.sa-btn:hover { background: var(--sa-acc-hi, #e6b422); }
.sa-btn--ghost { color: var(--sa-acc, #D4A017); background: transparent; border: 1.5px solid var(--sa-acc, #D4A017); }
.sa-btn--ghost:hover { background: rgba(var(--sa-acc-rgb, 212,160,23),.15); }
.sa-btn--big { width: 100%; padding: .8rem; }
.sa-add { justify-self: start; }
.sa-note { font-size: .78rem; color: rgba(var(--sa-txt-rgb, 245,230,200),.85); margin: .3rem 0 .6rem; }
.sa-actions { display: flex; gap: .5rem; justify-content: flex-end; margin-top: .8rem; flex-wrap: wrap; }
.sa-prev { display: grid; place-items: center; } .sa-prev img { max-height: 11rem; border-radius: .9rem; border: 2px solid var(--sa-acc, #D4A017); }
.sa-toast { position: fixed; left: 50%; bottom: 4.5rem; transform: translate(-50%, 20px); z-index: 100; padding: .6rem 1rem; border-radius: 999px; font: 700 .8rem 'Poppins', sans-serif; color: var(--sa-dark, #2a1405); background: var(--sa-acc, #D4A017); opacity: 0; pointer-events: none; transition: .25s; }
.sa-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.sa-toast { width: max-content; max-width: 90vw; text-align: center; }

/* ===== Editar colores (Modo edición) — mismos colores y diseño de las ventanas del administrador ===== */
.sa-bar .sa-bar__color.is-on { color: var(--sa-txt, #F5E6C8); background: #C1440E; box-shadow: 0 0 0 2px var(--sa-dark, #2a1405) inset; }
body.site-edit-on .sa-color-sel.sa-color-sel.sa-color-sel { outline: 3px solid var(--sa-dark, #2a1405) !important; outline-offset: 2px; box-shadow: 0 0 0 7px rgba(var(--sa-acc-rgb, 212,160,23),.95) !important; }
.sa-color { position: fixed; z-index: 88; right: 14px; bottom: 14px; width: 22.5rem; max-width: calc(100vw - 28px); max-height: min(78vh, 40rem); overflow: auto; display: none; padding: .85rem; border-radius: 1.3rem; font-family: 'Poppins', sans-serif; color: var(--sa-txt, #F5E6C8); background: linear-gradient(160deg, var(--sa-bg1, #3a1d08), var(--sa-bg2, #1a0c03)); border: 2px solid var(--sa-acc, #D4A017); box-shadow: 0 24px 50px -12px rgba(0,0,0,.8); }
.sa-color.is-on { display: block; }
.sa-color h3 { margin: 0; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1rem; color: var(--sa-acc, #D4A017); }
.sa-color__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.sa-color__sel { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .55rem; }
.sa-color__tag { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .72rem; font-weight: 700; color: rgba(var(--sa-txt-rgb, 245,230,200),.85); }
.sa-color__nav { display: inline-flex; gap: .3rem; }
.sa-color__nav .sa-btn { padding: .25rem .55rem; font-size: .68rem; border-width: 1px; }
.sa-color__nav .sa-btn:disabled { opacity: .35; pointer-events: none; }
.sa-color__tabs { display: flex; gap: .4rem; margin-bottom: .6rem; }
.sa-color__tabs button { position: relative; flex: 1; padding: .4rem .5rem; border-radius: 999px; font-size: .78rem; font-weight: 700; color: var(--sa-txt, #F5E6C8); background: rgba(255,255,255,.07); border: 1px solid rgba(var(--sa-acc-rgb, 212,160,23),.3); }
.sa-color__tabs button.is-on { color: var(--sa-dark, #2a1405); background: var(--sa-acc, #D4A017); border-color: var(--sa-acc, #D4A017); }
.sa-color__tabs button i { display: none; position: absolute; top: 4px; right: 9px; width: 7px; height: 7px; border-radius: 50%; background: #C1440E; box-shadow: 0 0 0 2px var(--sa-txt, #F5E6C8); }
.sa-color__tabs button.has i { display: block; }
.sa-color__cur { display: flex; align-items: center; gap: .55rem; margin-bottom: .6rem; padding: .45rem .6rem; border-radius: .8rem; background: rgba(var(--sa-acc-rgb, 212,160,23),.08); border: 1px solid rgba(var(--sa-acc-rgb, 212,160,23),.3); }
.sa-color__curdot { flex-shrink: 0; width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 2px solid var(--sa-txt, #F5E6C8); }
.sa-color__curdot.is-none, .sa-color__sw--none { background: repeating-conic-gradient(#d9c9a8 0 25%, #fffdf8 0 50%) 50% / 10px 10px !important; }
.sa-color__curtxt { font-size: .72rem; font-weight: 600; }
.sa-color__pal { display: grid; gap: 4px; margin-bottom: .6rem; }
.sa-color__row { display: grid; grid-template-columns: 3.7rem repeat(10, 1fr); gap: 3px; align-items: center; }
.sa-color__row > span { font-size: .62rem; font-weight: 700; color: rgba(var(--sa-txt-rgb, 245,230,200),.8); }
.sa-color__row--n { grid-template-columns: 3.7rem 1fr; }
.sa-color__neutral { display: flex; gap: 3px; }
.sa-color__neutral .sa-color__sw { width: 1.7rem; flex: none; }
.sa-color__sw { aspect-ratio: 1; min-height: 1.15rem; border-radius: 6px; border: 1px solid rgba(var(--sa-txt-rgb, 245,230,200),.35); cursor: pointer; }
.sa-color__sw:hover { transform: scale(1.12); }
.sa-color__sw.is-sel { outline: 2px solid var(--sa-txt, #F5E6C8); outline-offset: 1px; box-shadow: 0 0 0 4px #C1440E; }
.sa-color__custom { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .5rem; }
.sa-color__custom label { display: inline-flex; align-items: center; gap: .45rem; font-size: .72rem; font-weight: 700; }
.sa-color__custom input[type=color] { width: 2.3rem; height: 1.9rem; padding: 0; border-radius: .5rem; border: 1px solid rgba(var(--sa-acc-rgb, 212,160,23),.6); background: rgba(0,0,0,.35); cursor: pointer; }
.sa-color__custom .sa-input { max-width: 7rem; text-transform: uppercase; }
.sa-color .sa-actions { margin-top: .5rem; }
@media (max-width: 640px) { .sa-color { left: 8px; right: 8px; bottom: 8px; width: auto; max-width: none; max-height: 56vh; padding: .7rem; } .sa-color__row { grid-template-columns: 3.2rem repeat(10, 1fr); } .sa-color__row--n { grid-template-columns: 3.2rem 1fr; } }
@media (max-width: 480px) { .sa-fab span { display: none; } .sa-fab { padding: .7rem .8rem; } .sa-pic { width: 4.2rem; } .sa-pic img, .sa-pic > span { width: 4.2rem; height: 4.2rem; } }

/* ===== "Próximamente" ===== */
.btn-arma.is-soon, .menu-add.is-soon { color: #D4A017 !important; background: #3a1d08 !important; border: 1.5px dashed #D4A017 !important; cursor: not-allowed !important; box-shadow: none !important; transform: none !important; opacity: 1 !important; }
.btn-arma.is-soon:hover, .menu-add.is-soon:hover { background: #3a1d08 !important; transform: none !important; }
.soon-ribbon { position: absolute; top: .8rem; left: .8rem; z-index: 30; padding: .3rem .75rem; border-radius: 999px; font: 800 .7rem 'Poppins', sans-serif; letter-spacing: .04em; text-transform: uppercase; color: #2a1405; background: #D4A017; border: 1.5px solid #3a1d08; box-shadow: 0 6px 14px -4px rgba(0,0,0,.6); pointer-events: none; }
.soon-ribbon--mini { top: .45rem; left: .45rem; z-index: 3; padding: .16rem .5rem; font-size: .58rem; white-space: nowrap; }
@media (min-width: 640px) { .soon-ribbon--mini { font-size: .64rem; padding: .2rem .6rem; } }
.price-pill--soon { color: #D4A017 !important; background: #3a1d08 !important; border: 1px dashed #D4A017 !important; }
.opt-chip.is-soon { opacity: .6; cursor: not-allowed; border-style: dashed; }
.soon-tag { font-style: normal; font-size: .7em; font-weight: 800; color: #b8860b; }
.sa-soon { grid-column: 1 / -1; display: flex; align-items: center; gap: .5rem; padding: .45rem .6rem; border-radius: .7rem; font-size: .78rem; font-weight: 800; color: var(--sa-acc, #D4A017); background: rgba(0,0,0,.3); border: 1px dashed rgba(var(--sa-acc-rgb, 212,160,23),.6); cursor: pointer; }
.sa-soon input { width: 1.1rem; height: 1.1rem; accent-color: var(--sa-acc, #D4A017); }
.sa-soon small { font-weight: 600; color: rgba(var(--sa-txt-rgb, 245,230,200),.7); }

.sa-f--w { grid-column: 1 / -1; }
select.sa-input { appearance: auto; }
select.sa-input option { color: var(--sa-txt, #F5E6C8); background: var(--sa-dark, #2a1405); }
.sa-new { position: absolute; top: -.55rem; left: .8rem; padding: .1rem .55rem; border-radius: 999px; font: 800 .65rem 'Poppins', sans-serif; color: var(--sa-dark, #2a1405); background: var(--sa-acc, #D4A017); }

/* ===== Panel Administrar: barra horizontal visible y fácil de usar ===== */
.sa-tabs { scrollbar-width: thin; scrollbar-color: var(--sa-acc, #D4A017) transparent; cursor: grab; -webkit-overflow-scrolling: touch; }
.sa-tabs::-webkit-scrollbar { display: block; height: 8px; }
.sa-tabs::-webkit-scrollbar-track { background: transparent; border-radius: 8px; }
.sa-tabs::-webkit-scrollbar-thumb { background: var(--sa-acc, #D4A017); border-radius: 8px; }
.sa-body { scrollbar-width: thin; scrollbar-color: var(--sa-acc, #D4A017) transparent; }
.sa-body::-webkit-scrollbar { width: 8px; }
.sa-body::-webkit-scrollbar-track { background: transparent; }
.sa-body::-webkit-scrollbar-thumb { background: var(--sa-acc, #D4A017); border-radius: 8px; }
.sa-tabs button { user-select: none; }

/* ===== Barras de desplazamiento propias de La Colmena (la abejita las sigue; siempre visibles, sin borde) ===== */
html.col-sb-on, html.col-sb-on * { scrollbar-width: none !important; }
html.col-sb-on::-webkit-scrollbar, html.col-sb-on *::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }
.col-rail { position: fixed; display: none; z-index: 2147483000; touch-action: none; background: transparent; animation: colRailIn .16s ease-out; }
.col-rail.is-off { display: none !important; pointer-events: none; }
@keyframes colRailIn { from { opacity: 0; } to { opacity: 1; } }
/* Aire para la barra horizontal: queda debajo de las pestañas, sin pegarse a ellas ni al borde */
.col-hscroll, .menu-tabs, .sa-tabs { padding-bottom: 28px !important; }
html.col-sb-on .sa-tabs { padding-bottom: 28px !important; }
/* Panel Administrar: el contenido deja aire a la derecha para la barra dorada */
.sa-body { padding-right: 32px !important; }
.col-rail--y { width: 14px; } .col-rail--x { height: 14px; }
.col-rail::before { content: ''; position: absolute; border-radius: 8px; background: transparent; }   /* sin fondo gris: solo se ve la parte dorada */
.col-rail--y::before { top: 0; bottom: 0; left: 3px; right: 3px; } .col-rail--x::before { left: 0; right: 0; top: 3px; bottom: 3px; }
.col-thumb { position: absolute; border-radius: 8px; background: #D4A017; border: 0; box-shadow: none; }
.col-rail--y .col-thumb { top: 0; left: 3px; right: 3px; } .col-rail--x .col-thumb { left: 0; top: 3px; bottom: 3px; }
.col-rail:hover .col-thumb, .col-rail.is-drag .col-thumb { background: #e6b422; }

/* ===== Campos numéricos del panel Administrar: sin flechitas del navegador, con botones − y + de La Colmena ===== */
.sa-input[type=number] { -moz-appearance: textfield; appearance: textfield; text-align: center; }
.sa-input[type=number]::-webkit-inner-spin-button, .sa-input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }
.sa-num { display: flex; align-items: stretch; gap: .3rem; }
.sa-num .sa-input { flex: 1; min-width: 0; }
.sa-step { flex-shrink: 0; width: 2.1rem; border-radius: .6rem; font: 800 1.05rem 'Poppins', sans-serif; line-height: 1; color: var(--sa-dark, #2a1405); background: var(--sa-acc, #D4A017); border: 1px solid var(--sa-bg1, #3a1d08); user-select: none; }
.sa-step:hover { background: var(--sa-acc-hi, #e6b422); }
.sa-step:active { transform: scale(.92); }
/* El número nunca puede quedar aplastado por los botones − y + */
.sa-num .sa-input { min-width: 3.6rem; }
/* Celular / app: Precio, Puntos y demás campos numéricos ocupan el ancho completo de la tarjeta (antes compartían media fila y el número no se veía) */
@media (max-width: 640px) {
    .sa-f--price, .sa-f--points, .sa-f--arepaCount, .sa-f--drinkCount { grid-column: 1 / -1; }
    .sa-num { gap: .4rem; }
    .sa-num .sa-input { font-size: 1rem; padding: .5rem .35rem; }
    .sa-step { width: 2.6rem; font-size: 1.15rem; }
}
/* Celulares muy angostos (320–360 px): botones un poco más compactos para que quepa un precio de 6 cifras */
@media (max-width: 360px) {
    .sa-num { gap: .25rem; }
    .sa-num .sa-input { padding: .5rem .15rem; font-size: .95rem; }
    .sa-step { width: 2.2rem; }
}
@media (max-width: 340px) {
    .sa-pic { width: 3.4rem; } .sa-pic img, .sa-pic > span { width: 3.4rem; height: 3.4rem; }
    .sa-step { width: 2rem; }
}


/* ===== Promociones por producto: etiqueta "-20%" y precio anterior tachado (mismos colores de La Colmena) ===== */
.promo-badge { display: inline-flex; align-items: center; gap: .3rem; padding: .28rem .7rem; border-radius: 999px; font: 800 .72rem 'Poppins', sans-serif; letter-spacing: .03em; line-height: 1.2; color: #fff; background: var(--quaternary-600, #C1440E); border: 1.5px solid #D4A017; box-shadow: 0 6px 14px -6px rgba(0,0,0,.55); animation: promoPop .45s cubic-bezier(.2,.9,.3,1.25) both; }
.promo-badge i { font-size: .62rem; color: #F5D470; }
.promo-badge--card { position: absolute; top: .8rem; left: .8rem; z-index: 30; pointer-events: none; }
.promo-badge--mini { position: absolute; top: .45rem; left: .45rem; z-index: 3; padding: .16rem .5rem; font-size: .62rem; pointer-events: none; }
.extra-card, .menu-item { position: relative; }
.promo-old { display: block; font-size: .78rem; font-weight: 700; line-height: 1.1; color: var(--secondary-400, #9b8570); text-decoration: line-through; text-decoration-color: var(--quaternary-600, #C1440E); text-decoration-thickness: 2px; }
.promo-old--inline { display: inline; margin-right: .25rem; font-size: .62rem; }
.promo-on { color: var(--quaternary-600, #C1440E) !important; }
.extra-card.has-promo { border-color: var(--quaternary-600, #C1440E); }
.extra-card .price-pill.promo-on { border-color: var(--quaternary-600, #C1440E); }
.promo-tag { color: var(--quaternary-600, #C1440E); font-weight: 800; }
@keyframes promoPop { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .promo-badge { animation: none; } }

/* Panel Administrar: campo de promoción */
.sa-f--promo > span { color: var(--sa-acc, #D4A017); }
.sa-f--promo .sa-input { border-color: rgba(193, 68, 14, .75); }
.sa-promo-pv { font-weight: 700; font-size: .7rem; color: #F5D470; }


/* ===== Botón flotante "Arma tu Arepa" (solo la llama): esquina inferior izquierda ===== */
.fire-fab { position: fixed; left: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 40; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; border-radius: 999px; font-size: 1.25rem; color: #9B390D; background: #D4A017; border: 0; box-shadow: 0 10px 22px -8px rgba(0,0,0,.6); cursor: pointer; transition: background .2s, transform .15s, box-shadow .2s; -webkit-tap-highlight-color: transparent; }
.fire-fab:hover { background: #e6b422; transform: translateY(-2px); box-shadow: 0 14px 26px -8px rgba(0,0,0,.65); }
.fire-fab:active { transform: scale(.94); }
.fire-fab:focus-visible { outline: 3px solid #F5D470; outline-offset: 2px; }
/* Si hay botón "Administrar" (rol administrador), la llama queda justo encima */
body:has(#saFab) .fire-fab { bottom: calc(4.3rem + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 640px) { .fire-fab { left: 18px; width: 3.25rem; height: 3.25rem; } body:has(#saFab) .fire-fab { bottom: 4.4rem; } }

/* Aviso de descuento un poco más grande SOLO en computador (pantalla ancha con mouse); en celular/tableta no cambia */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
    .promo-badge { font-size: .86rem; padding: .36rem .9rem; gap: .38rem; }
    .promo-badge i { font-size: .74rem; }
    .promo-badge--card { top: 1rem; left: 1rem; }
    .promo-badge--mini { font-size: .72rem; padding: .2rem .6rem; }
}

/* ===== Cursores de La Colmena: abeja (pixel art) + formas de Windows en dorado ===== */
#customCursor img { display: block; width: 32px; height: 32px; user-select: none; -webkit-user-drag: none;
    filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .35)); }
#customCursor[data-c="arrow"] img { image-rendering: pixelated; }
#customCursor[data-c="wait"] img { animation: cursorSpin .9s linear infinite; }
@keyframes cursorSpin { to { transform: rotate(360deg); } }

/* ===== Agregar secciones (Modo edición → ➕ Sección) ===== */
/* Elegir dónde va: marco punteado + 4 botones sobre la sección tocada */
.sa-place { position: fixed; inset: 0; z-index: 86; display: none; pointer-events: none; }
.sa-place.is-on { display: block; }
.sa-place__frame { position: fixed; border: 3px dashed #C1440E; border-radius: 1.2rem; background: rgba(var(--sa-acc-rgb, 212,160,23),.14); pointer-events: none; }
.sa-place__frame b { position: absolute; left: .6rem; top: .5rem; max-width: calc(100% - 1.2rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: .15rem .65rem; border-radius: 999px; font: 800 .7rem 'Poppins', sans-serif; color: var(--sa-txt, #F5E6C8); background: #C1440E; }
.sa-place__btn { position: fixed; transform: translate(-50%, -50%); pointer-events: auto; padding: .5rem .95rem; border-radius: 999px; font: 800 .8rem 'Poppins', sans-serif; white-space: nowrap; color: var(--sa-dark, #2a1405); background: var(--sa-acc, #D4A017); border: 2px solid var(--sa-dark, #2a1405); box-shadow: 0 6px 16px rgba(0,0,0,.45); cursor: pointer; transition: transform .15s, background .15s; }
.sa-place__btn:hover { background: var(--sa-acc-hi, #e6b422); transform: translate(-50%, -50%) scale(1.08); }
body.sa-adding *:not(.sa-ui):not(.sa-ui *) { cursor: crosshair !important; }
body.sa-adding *:not(.sa-ui):not(.sa-ui *):hover { outline: none !important; }
body.site-edit-on.sa-adding .sa-add-hover.sa-add-hover.sa-add-hover { outline: 3px dashed #C1440E !important; outline-offset: 3px; }

/* Ventana de crear / editar */
.nsec-f { margin-top: .6rem; }
.nsec-seg { display: flex; flex-wrap: wrap; gap: .4rem; margin: .3rem 0; }
.nsec-seg button { padding: .4rem .8rem; border-radius: 999px; font-size: .76rem; font-weight: 700; color: #F5E6C8; background: rgba(255,255,255,.07); border: 1px solid rgba(212,160,23,.3); }
.nsec-seg button.is-on { color: #2a1405; background: #D4A017; border-color: #D4A017; }
.nsec-sw i { display: inline-block; width: .8rem; height: .8rem; margin-right: .35rem; border-radius: 50%; vertical-align: -1px; border: 1px solid rgba(245,230,200,.7); }
.nsec-sw--crema i { background: var(--tertiary-100, #F5E6C8); }
.nsec-sw--dorado i { background: var(--primary-500, #D4A017); }
.nsec-sw--cafe i { background: var(--secondary-800, #4a2b12); }
.nsec-sw--terracota i { background: var(--quaternary-600, #C1440E); }
.nsec-sw--ninguno i { background: repeating-conic-gradient(#d9c9a8 0 25%, #fffdf8 0 50%) 50% / 6px 6px; }
.nsec-two { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
@media (max-width: 480px) { .nsec-two { grid-template-columns: 1fr; } }
.nsec-pic { display: flex; align-items: center; gap: .7rem; margin-top: .3rem; }
.nsec-pic img, .nsec-pic > span { flex: none; width: 4.2rem; height: 4.2rem; border-radius: .8rem; object-fit: cover; display: grid; place-items: center; font-size: 1.6rem; background: rgba(0,0,0,.35); border: 1px solid rgba(212,160,23,.4); }
.nsec-pic > div { display: grid; gap: .3rem; }
.nsec-pic .sa-btn { padding: .3rem .7rem; font-size: .72rem; }
.nsec-crow { position: relative; display: flex; align-items: center; gap: .7rem; margin-top: .6rem; padding: .6rem 2.1rem .6rem .6rem; border-radius: 1rem; background: rgba(212,160,23,.08); border: 1px solid rgba(212,160,23,.3); }
.nsec-crow .nsec-pic { flex: none; flex-direction: column; margin: 0; gap: .3rem; }
.nsec-crow .nsec-pic > div { width: 100%; }
.nsec-crow .nsec-pic img, .nsec-crow .nsec-pic > span { width: 3.6rem; height: 3.6rem; }
.nsec-crow__f { flex: 1; min-width: 0; display: grid; gap: .35rem; }
.nsec-crow__f .sa-input { padding: .35rem .5rem; }
.nsec-crow .sa-del { top: .3rem; right: .3rem; }
.nsec-addc { margin-top: .6rem; }

/* La sección nueva en la página (usa los colores de la marca: si cambias colors.js, cambia sola) */
.nsec { position: relative; }
.nsec-wide { width: 100%; max-width: 80rem; margin: 0 auto; padding: 2rem 1rem; }
@media (min-width: 640px) { .nsec-wide { padding: 2rem 1.5rem; } }
@media (min-width: 768px) { .nsec-wide { padding: 2rem 2.5rem; } }
.nsec-box { padding: clamp(1.25rem, 4vw, 2.5rem); overflow: hidden; border: 1px solid transparent; border-radius: 1.5rem; box-shadow: 0 25px 50px -12px rgba(63,37,17,.35); }
.nsec-bg-crema { color: var(--secondary-900); background: var(--tertiary-50, #FFFDF8); border-color: var(--primary-200); }
.nsec-bg-dorado { color: var(--tertiary-50, #FFFDF8); background: linear-gradient(90deg, var(--primary-500), var(--primary-600), var(--quaternary-600)); }
.nsec-bg-cafe { color: var(--tertiary-50, #FFFDF8); background: linear-gradient(135deg, var(--secondary-900), var(--secondary-800), var(--quaternary-700)); border-color: rgb(var(--primary-rgb) / .5); }
.nsec-bg-terracota { color: var(--tertiary-50, #FFFDF8); background: linear-gradient(135deg, var(--quaternary-600), var(--quaternary-700)); }
.nsec-bg-ninguno { padding: 0; color: var(--secondary-900); background: transparent; border-color: transparent; box-shadow: none; }
.nsec-info { display: flex; flex-direction: column; align-items: center; gap: clamp(1rem, 3vw, 2rem); }
@media (min-width: 768px) {
    .nsec-info.nsec-pos-izq { flex-direction: row; }
    .nsec-info.nsec-pos-der { flex-direction: row-reverse; }
    .nsec-info.has-photo .nsec-photo { flex: 0 0 42%; }
}
.nsec-photo { width: 100%; overflow: hidden; border-radius: 1.1rem; border: 2px solid rgb(var(--primary-rgb) / .6); box-shadow: 0 10px 24px -8px rgba(0,0,0,.4); }
.nsec-photo img { display: block; width: 100%; max-height: 26rem; object-fit: cover; }
.nsec-body { flex: 1; min-width: 0; text-align: left; }
.nsec-info:not(.has-photo) .nsec-body { max-width: 44rem; margin: 0 auto; text-align: center; }
.nsec-title { font-weight: 900; font-size: clamp(1.4rem, 3.4vw, 2.1rem); line-height: 1.15; }
.nsec-text { margin-top: .6rem; font-size: clamp(.9rem, 1.6vw, 1.05rem); line-height: 1.65; white-space: pre-line; opacity: .92; }
.nsec-btn { display: inline-flex; align-items: center; margin-top: 1.1rem; padding: .75rem 1.4rem; border-radius: .9rem; font-weight: 800; text-decoration: none; color: var(--secondary-900); background: var(--primary-500); box-shadow: 0 8px 18px -6px rgba(0,0,0,.4); transition: transform .2s, background .2s; }
.nsec-btn:hover { background: var(--primary-400); transform: translateY(-2px) scale(1.03); }
.nsec-bg-dorado .nsec-btn, .nsec-bg-terracota .nsec-btn { background: var(--tertiary-50, #FFFDF8); }
.nsec-bg-dorado .nsec-btn:hover, .nsec-bg-terracota .nsec-btn:hover { background: var(--tertiary-100, #F5E6C8); }
a.menu-tile { text-decoration: none; }
@media (min-width: 768px) { .nsec-tiles { grid-template-columns: repeat(var(--ns-cols, 4), 1fr); } }
/* secciones lado a lado: se parten en columnas y en pantallas angostas se apilan */
.nsec-row { display: flex; align-items: stretch; gap: 1.5rem; }
.nsec-row > * { flex: 1 1 0; min-width: 0; }
.nsec-row .nsec-info { flex-direction: column !important; }
.nsec-row .nsec-info.has-photo .nsec-photo { flex: none; }
.nsec-row .nsec-tiles { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 899px) { .nsec-row { flex-direction: column; } }
body.site-edit-on .nsec::after { content: '✏️ Sección nueva · toca para editar'; position: absolute; top: .5rem; right: .5rem; z-index: 5; padding: .2rem .6rem; border-radius: 999px; font: 800 .68rem 'Poppins', sans-serif; color: #2a1405; background: #D4A017; box-shadow: 0 2px 8px rgba(0,0,0,.35); pointer-events: none; }
.nsec-flash { animation: nsecFlash 1.8s ease-out; }
@keyframes nsecFlash { 0%, 100% { box-shadow: 0 0 0 0 rgba(212,160,23,0); } 25% { box-shadow: 0 0 0 10px rgba(212,160,23,.7); } }

/* ===== Administrar → pestaña Horario ===== */
.sa-hor { display: grid; gap: .5rem; }
.sa-hor-prev { padding: .7rem .9rem; border-radius: 1rem; font-size: .78rem; color: rgba(var(--sa-txt-rgb, 245,230,200),.85); background: rgba(var(--sa-acc-rgb, 212,160,23),.12); border: 1px dashed rgba(var(--sa-acc-rgb, 212,160,23),.6); }
.sa-hor-prev b { display: block; margin-top: .15rem; font-size: .9rem; color: var(--sa-acc, #D4A017); }
.sa-hor-row { display: grid; grid-template-columns: 9rem 1fr; align-items: center; gap: .6rem; padding: .55rem .75rem; border-radius: 1rem; background: rgba(var(--sa-acc-rgb, 212,160,23),.08); border: 1px solid rgba(var(--sa-acc-rgb, 212,160,23),.3); }
.sa-hor-row.is-off { border-style: dashed; background: rgba(0,0,0,.2); }
.sa-hor-sw { position: relative; display: flex; align-items: center; gap: .6rem; font: 800 .88rem 'Poppins', sans-serif; color: var(--sa-txt, #F5E6C8); cursor: pointer; user-select: none; }
.sa-hor-sw input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sa-hor-sw i { position: relative; flex: none; width: 2.5rem; height: 1.4rem; border-radius: 999px; background: #4a3a2a; border: 1px solid rgba(var(--sa-acc-rgb, 212,160,23),.55); transition: background .2s; }
.sa-hor-sw i::after { content: ''; position: absolute; top: 2px; left: 2px; width: 1rem; height: 1rem; border-radius: 50%; background: var(--sa-txt, #F5E6C8); transition: transform .2s, background .2s; }
.sa-hor-sw input:checked + i { background: var(--sa-acc, #D4A017); }
.sa-hor-sw input:checked + i::after { transform: translateX(1.1rem); background: var(--sa-dark, #2a1405); }
.sa-hor-sw input:focus-visible + i { outline: 2px solid var(--sa-txt, #F5E6C8); outline-offset: 2px; }
.sa-hor-row.is-off .sa-hor-sw { color: rgba(var(--sa-txt-rgb, 245,230,200),.6); }
.sa-hor-times { display: flex; align-items: center; gap: .45rem; font-size: .78rem; font-weight: 700; color: rgba(var(--sa-txt-rgb, 245,230,200),.8); }
.sa-hor-times .sa-input { flex: 1; min-width: 0; color-scheme: dark; text-align: center; }
.sa-hor-off { display: none; font-size: .78rem; font-weight: 700; color: rgba(var(--sa-txt-rgb, 245,230,200),.6); }
.sa-hor-row.is-off .sa-hor-times { display: none; }
.sa-hor-row.is-off .sa-hor-off { display: block; }
.sa-hor-tools { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .2rem; }
.sa-hor-tools .sa-btn { padding: .45rem .8rem; font-size: .75rem; }
.sa-hor-msg { min-height: 1.1rem; font-size: .78rem; font-weight: 700; color: var(--sa-txt, #F5E6C8); }
.sa-hor-save { position: sticky; bottom: 0; padding: .6rem 0 .2rem; background: linear-gradient(to top, var(--sa-bg2, #1a0c03) 70%, transparent); }
@media (max-width: 520px) { .sa-hor-row { grid-template-columns: 1fr; gap: .4rem; } }

/* ===== Administrar → pestaña Puntos de atención ===== */
.sa-pt { display: grid; gap: .8rem; }
.sa-pt-row { display: grid; gap: .5rem; padding: .75rem; border-radius: 1rem; background: rgba(var(--sa-acc-rgb, 212,160,23),.08); border: 1px solid rgba(var(--sa-acc-rgb, 212,160,23),.3); }
.sa-pt-head { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem .6rem; color: var(--sa-acc, #D4A017); font-size: .85rem; }
.sa-pt-main { font-size: .68rem; font-weight: 800; color: var(--sa-dark, #2a1405); background: var(--sa-acc, #D4A017); border-radius: 999px; padding: .1rem .55rem; }
.sa-pt-ops { margin-left: auto; display: inline-flex; gap: .3rem; }
.sa-pt-ops button { width: 2rem; height: 2rem; border-radius: .6rem; font-size: .85rem; color: var(--sa-txt, #F5E6C8); background: rgba(255,255,255,.08); border: 1px solid rgba(var(--sa-acc-rgb, 212,160,23),.4); }
.sa-pt-ops button:hover:not(:disabled) { background: rgba(var(--sa-acc-rgb, 212,160,23),.25); }
.sa-pt-ops button:disabled { opacity: .3; pointer-events: none; }
.sa-pt-st { font-size: .74rem; font-weight: 700; line-height: 1.35; color: #f3b27a; }
.sa-pt-st.is-ok { color: #9fe0a8; }
.sa-pt-st a { color: var(--sa-acc, #D4A017); text-decoration: underline; }
.sa-pt-co { display: none; }
.sa-pt-co.is-on { display: grid; }
/* El selector de punto de atención del pedido (A domicilio) */
#deliveryPointSection .cs-btn { width: 100%; }

/* ============================================================
   "Próximamente" bien acomodado en celular / app
   (Nuestro menú → Bebidas e Insumos, y el carrusel de Toppings, Salsas, Proteínas y Bebidas de la Casa)
   ============================================================ */
/* Menú → Bebidas / Insumos: el botón se adapta al ancho de la tarjeta y puede bajar a 2 líneas, sin empujar ni cortar la columna */
.menu-item { min-width: 0; }
/* el botón queda siempre abajo y alineado entre tarjetas, aunque un nombre ocupe 2 líneas */
.menu-item > .menu-add { margin-top: auto; }
.menu-add.is-soon { white-space: normal; line-height: 1.2; overflow-wrap: break-word; }
@media (max-width: 639px) {
    .menu-add.is-soon { font-size: clamp(.6rem, 2.9vw, .78rem); padding: 9px 4px; letter-spacing: 0; }
}
@media (max-width: 380px) { .menu-item { padding: 12px 6px; } }

/* Carrusel de extras: el botón se queda dentro de su tarjeta (puede bajar a 2 líneas) */
.extra-card .price-pill--soon { white-space: normal; max-width: 100%; box-sizing: border-box; text-align: center; line-height: 1.2; }
@media (max-width: 639px) {
    .extra-card .price-pill--soon { font-size: clamp(.58rem, 2.7vw, .68rem); padding: .25rem .45rem; }
    /* Las flechas ya no ocupan los costados (dejaban tarjetas de ~78 px): pasan a la fila de los puntos, y las tarjetas usan todo el ancho */
    #extrasCarousel { position: relative; }
    #extrasCarousel > div:first-child { display: block; }
    #extrasCarousel .carousel-grid { width: 100%; }
    #extrasCarousel .carousel-arrow { position: absolute; bottom: 0; z-index: 2; width: 2.25rem; height: 2.25rem; }
    #extrasCarousel .carousel-arrow[data-dir="-1"] { left: .15rem; }
    #extrasCarousel .carousel-arrow[data-dir="1"] { right: .15rem; }
    #extrasDots { min-height: 2.25rem; margin-top: .9rem; }
}

/* ============================================================
   SELECTOR DE HORA DE LA COLMENA (timepicker.js) — Administrar → Horarios
   Mismo estilo que el calendario y los menús desplegables de la página
   ============================================================ */
.sa-time { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: .45rem; padding: .45rem .6rem; border-radius: .6rem; font: 700 .82rem 'Poppins', sans-serif; color: var(--sa-txt, #F5E6C8); background: rgba(0,0,0,.35); border: 1px solid rgba(var(--sa-acc-rgb, 212,160,23),.4); cursor: pointer; transition: background .15s, border-color .15s; }
.sa-time:hover { background: rgba(var(--sa-acc-rgb, 212,160,23),.14); border-color: var(--sa-acc, #D4A017); }
.sa-time:focus-visible, .sa-time.is-open { outline: none; border-color: var(--sa-acc, #D4A017); box-shadow: 0 0 0 2px rgba(var(--sa-acc-rgb, 212,160,23),.35); }
.sa-time i { color: var(--sa-acc, #D4A017); font-size: .8rem; }
.sa-time__txt { white-space: nowrap; }
.sa-time__car { font-size: .65rem !important; opacity: .8; }

.cm-tp-back { position: fixed; inset: 0; z-index: 100000; background: rgba(18,6,0,.6); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: cmTpFade .16s ease-out both; }
@keyframes cmTpFade { from { opacity: 0; } to { opacity: 1; } }
.cm-tp { position: fixed; z-index: 100001; width: 18.5rem; max-width: calc(100vw - 16px); font-family: 'Poppins', sans-serif; background: var(--tertiary-50); border: 1px solid var(--primary-200); border-radius: 1.25rem; overflow: hidden; box-shadow: 0 25px 60px -20px rgb(var(--secondary-rgb) / 0.75); animation: cmDpIn .16s ease-out both; }
.cm-tp-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; padding: .75rem 1rem; background: var(--secondary-900); border-bottom: 2px solid var(--primary-500); }
.cm-tp-title { font-size: .72rem; font-weight: 700; color: var(--primary-200); }
.cm-tp-big { font-size: 1.35rem; font-weight: 800; color: var(--primary-500); white-space: nowrap; }
.cm-tp-body { padding: .7rem .8rem .3rem; display: grid; gap: .6rem; }
.cm-tp-lab { display: block; margin-bottom: .3rem; font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--quaternary-600); }
.cm-tp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.cm-tp-ampm { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cm-tp-cell { padding: .5rem 0; border-radius: .7rem; border: 1px solid transparent; background: none; font: 700 .85rem 'Poppins', sans-serif; color: var(--secondary-800); cursor: pointer; transition: background .15s; }
.cm-tp-cell:hover { background: var(--primary-200); }
.cm-tp-cell.is-sel, .cm-tp-cell.is-sel:hover { background: var(--quaternary-600); color: #fff; border-color: var(--quaternary-600); }
.cm-tp-ampm .cm-tp-cell { border-color: var(--primary-200); }
.cm-tp button:focus-visible { outline: 2px solid var(--primary-500); outline-offset: 1px; }
.cm-tp-foot { display: flex; justify-content: space-between; align-items: center; padding: .4rem .9rem .75rem; }
.cm-tp-link { background: none; border: 0; cursor: pointer; font: 700 .78rem 'Poppins', sans-serif; color: var(--secondary-600); padding: .35rem .6rem; border-radius: .6rem; }
.cm-tp-link:hover { background: var(--primary-200); }
.cm-tp-link--accent { color: var(--quaternary-600); }
/* Celular / app: hoja desde abajo con botones grandes */
.cm-tp--sheet { left: 0; right: 0; bottom: 0; top: auto; width: auto; max-width: none; border-radius: 1.5rem 1.5rem 0 0; padding-bottom: env(safe-area-inset-bottom, 0); animation: cmTpUp .22s ease-out both; }
@keyframes cmTpUp { from { transform: translateY(100%); } to { transform: none; } }
.cm-tp--sheet .cm-tp-cell { padding: .75rem 0; font-size: 1rem; }
.cm-tp--sheet .cm-tp-big { font-size: 1.5rem; }
.cm-tp--sheet .cm-tp-link { font-size: .95rem; padding: .6rem 1rem; }
@media (prefers-reduced-motion: reduce) { .cm-tp, .cm-tp-back { animation: none; } }

/* ============================================================
   INVENTARIO — "Agotado" y "Quedan N" (misma esquina que "Próximamente")
   ============================================================ */
.btn-arma.is-sold, .menu-add.is-sold { color: #fff !important; background: #8a2f0a !important; border: 1.5px dashed #F5D470 !important; cursor: not-allowed !important; box-shadow: none !important; transform: none !important; opacity: 1 !important; }
.btn-arma.is-sold:hover, .menu-add.is-sold:hover { background: #8a2f0a !important; transform: none !important; }
.menu-add.is-sold { white-space: normal; line-height: 1.2; }
.sold-ribbon { position: absolute; top: .8rem; left: .8rem; z-index: 30; padding: .3rem .75rem; border-radius: 999px; font: 800 .7rem 'Poppins', sans-serif; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: #C1440E; border: 1.5px solid #3a1d08; box-shadow: 0 6px 14px -4px rgba(0,0,0,.6); pointer-events: none; }
.sold-ribbon--mini { top: .45rem; left: .45rem; z-index: 3; padding: .16rem .5rem; font-size: .58rem; white-space: nowrap; }
.stock-tag { position: absolute; top: .8rem; right: .8rem; z-index: 30; padding: .3rem .7rem; border-radius: 999px; font: 800 .68rem 'Poppins', sans-serif; color: #F5E6C8; background: rgba(42,20,5,.92); border: 1.5px solid #D4A017; box-shadow: 0 6px 14px -4px rgba(0,0,0,.6); pointer-events: none; white-space: nowrap; }
.stock-tag--mini { top: .45rem; right: .45rem; z-index: 3; padding: .16rem .5rem; font-size: .58rem; }
.price-pill--sold { color: #fff !important; background: #8a2f0a !important; border: 1px dashed #F5D470 !important; white-space: normal; text-align: center; line-height: 1.2; }
.soon-tag--sold { color: #C1440E; }
.sa-soon--sold { border-color: rgba(193,68,14,.8); }
.sa-soon--sold input { accent-color: #C1440E; }
@media (min-width: 640px) { .sold-ribbon--mini { font-size: .64rem; padding: .2rem .6rem; } .stock-tag--mini { font-size: .64rem; padding: .2rem .6rem; } }
@media (max-width: 639px) { .menu-add.is-sold { font-size: clamp(.6rem, 2.9vw, .78rem); padding: 9px 4px; letter-spacing: 0; } .extra-card .price-pill--sold { font-size: clamp(.58rem, 2.7vw, .68rem); padding: .25rem .45rem; } }
.sa-f--stock { grid-column: 1 / -1; }

/* ===== Panel Administrar → 🛵 Domicilio (precio por kilómetro) ===== */
.sa-dom { display: grid; gap: .7rem; }
.sa-dom .sa-f { display: grid; gap: .3rem; padding: .7rem .8rem; border-radius: 1rem; background: rgba(var(--sa-acc-rgb, 212,160,23),.08); border: 1px solid rgba(var(--sa-acc-rgb, 212,160,23),.3); }
.sa-dom-t { margin: .2rem 0 0; font-size: .78rem; font-weight: 800; color: var(--sa-txt, #F5E6C8); }
.sa-dom-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(5.2rem, 1fr)); gap: .45rem; }
.sa-dom-ex { display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .5rem .3rem; border-radius: .9rem; background: rgba(0,0,0,.3); border: 1px dashed rgba(var(--sa-acc-rgb, 212,160,23),.6); font-size: .72rem; font-weight: 700; color: rgba(var(--sa-txt-rgb, 245,230,200),.85); }
.sa-dom-ex b { font-size: .88rem; color: var(--sa-acc, #D4A017); }

/* ===== Panel Administrar → 🎨 Colores del panel ===== */
.sa-pc { display: grid; gap: .4rem; padding: .7rem .8rem; border-radius: 1rem; background: rgba(var(--sa-acc-rgb, 212,160,23), .08); border: 1px solid rgba(var(--sa-acc-rgb, 212,160,23), .3); }
.sa-pc__l { font-size: .78rem; font-weight: 800; color: var(--sa-txt, #F5E6C8); }
.sa-pc__row { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.sa-pc__sw { width: 1.9rem; height: 1.9rem; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); box-shadow: 0 2px 6px rgba(0,0,0,.45); transition: transform .12s; }
.sa-pc__sw:hover { transform: scale(1.12); }
.sa-pc__sw.is-on { border-color: #fff; outline: 2px solid var(--sa-acc, #D4A017); outline-offset: 2px; }
.sa-pc__hex { width: 6.4rem; text-transform: uppercase; text-align: center; font-variant-numeric: tabular-nums; }
.sa-pc__hex.is-bad { border-color: #E03131; }
.sa-pc__presets { display: flex; flex-wrap: wrap; gap: .45rem; }
.sa-pc__presets .sa-btn { padding: .4rem .8rem; font-size: .75rem; }
.sa-pc__warn { min-height: 1rem; font-size: .76rem; font-weight: 700; color: #FFA94D; }

/* ===== Videos de productos (MP4/WebM) y botones de video en Administrar ===== */
.cm-pvideo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; background: #1a0c03; }
.menu-item__pic { position: relative; }
.extra-emoji video.extra-photo { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.sa-pic em.sa-pic__v { font-size: .62rem; font-weight: 800; color: #8CE99A; text-align: center; }
.sa-pic .sa-pic__x { background: transparent; color: var(--sa-acc, #D4A017); border: 1px solid rgba(var(--sa-acc-rgb, 212,160,23), .6); }
.soon-ribbon, .sold-ribbon, .stock-tag { z-index: 31; }

/* ===== Reseñas: 4 por página, con iniciales, tipo de cuenta y texto ===== */
.review-board { position: relative; flex: 1; min-width: 0; }
.review-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.review-item { display: flex; flex-direction: column; gap: .75rem; min-width: 0; padding: 1.1rem 1.2rem; background: var(--tertiary-50); border: 2px solid var(--primary-400); border-radius: 1.5rem; box-shadow: 0 10px 30px -12px rgb(var(--secondary-rgb) / 0.25); }
.review-item__head { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.review-item__who { min-width: 0; display: grid; gap: .15rem; }
.review-item__name { font-weight: 800; font-size: .95rem; line-height: 1.2; color: var(--secondary-900); overflow-wrap: anywhere; }
.review-avatar { flex: none; width: 2.9rem; height: 2.9rem; display: grid; place-items: center; border-radius: 50%; font: 800 1rem 'Poppins', sans-serif; letter-spacing: .02em; box-shadow: 0 4px 10px -4px rgba(0,0,0,.45); border: 2px solid #fff; }
.review-avatar--0 { background: var(--primary-500); color: var(--secondary-900); }
.review-avatar--1 { background: var(--quaternary-600); color: #fff; }
.review-avatar--2 { background: var(--secondary-800); color: var(--primary-300); }
.review-avatar--3 { background: var(--primary-200); color: var(--quaternary-700, var(--quaternary-600)); }
.review-acct { display: inline-flex; align-items: center; gap: .35rem; flex-wrap: wrap; font-size: .72rem; font-weight: 700; color: var(--secondary-500); line-height: 1.2; }
.review-acct i { font-size: .7rem; }
.review-acct--reg i { color: var(--quaternary-600); }
.review-acct--google { color: var(--secondary-600); }
.review-acct--google .fa-circle-check { color: #1a73e8; }
.review-item__text { font-size: .9rem; line-height: 1.55; color: var(--secondary-700); overflow-wrap: anywhere; }
.review-item__text .review-quote-icon { display: inline; font-size: .8rem; margin-right: .4rem; vertical-align: baseline; }
#reviewContent.review-grid.review-fade-in { animation: reviewFadeIn 0.4s ease-out; }
@media (max-width: 639px) { .review-grid { grid-template-columns: 1fr; gap: .75rem; } .review-item { padding: 1rem; border-radius: 1.25rem; } }
/* Celular: las flechas pasan a la fila de los puntos y las reseñas usan todo el ancho */
@media (max-width: 639px) {
    #resenas > .max-w-5xl { position: relative; display: block; }
    #reviewPrevBtn, #reviewNextBtn { position: absolute; bottom: -3.15rem; z-index: 2; width: 2.25rem; height: 2.25rem; }
    #reviewPrevBtn { left: .15rem; } #reviewNextBtn { right: .15rem; }
    #reviewDots { min-height: 2.25rem; margin-top: 1.15rem; }
}

/* ===== Calificación de 1 a 5 estrellas en las reseñas ===== */
.review-rate { display: flex; align-items: center; gap: .1rem; font-size: 1.05rem; line-height: 1; color: var(--secondary-200, #d8cbbd); }
.review-rate .on { color: var(--primary-500); text-shadow: 0 1px 0 rgba(0,0,0,.12); }
.review-rate b { margin-left: .4rem; font-size: .72rem; font-weight: 800; color: var(--secondary-500); }
.review-stars-pick { display: flex; align-items: center; flex-wrap: wrap; gap: .1rem; padding: .35rem .5rem; border: 1px solid var(--secondary-300); border-radius: .85rem; background: #fff; }
.review-stars-pick button { font-size: 1.9rem; line-height: 1; padding: 0 .15rem; color: var(--secondary-200, #d8cbbd); transition: transform .12s, color .12s; cursor: pointer; background: none; border: 0; }
.review-stars-pick button.is-on { color: var(--primary-500); }
.review-stars-pick button:hover { transform: scale(1.15); }
.review-stars-pick button:focus-visible { outline: 2px solid var(--primary-500); outline-offset: 2px; border-radius: .4rem; }
.review-stars-pick__txt { margin-left: .5rem; font-size: .75rem; font-weight: 700; color: var(--secondary-600); }

/* Reseñas: botones del administrador */
.review-item { position: relative; }
.review-item__head { position: relative; }
.review-del { margin-left: auto; flex: none; width: 2.1rem; height: 2.1rem; border-radius: 50%; display: grid; place-items: center; cursor: pointer; background: #fff; color: #b3261e; border: 2px solid #b3261e; font-size: .8rem; transition: background .15s, color .15s, transform .15s; }
.review-del:hover, .review-del:focus-visible { background: #b3261e; color: #fff; transform: scale(1.08); outline: none; }
.review-admin-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .6rem 1rem; margin-top: 1rem; padding: .7rem 1rem; border: 2px dashed var(--primary-400); border-radius: 1.25rem; background: var(--tertiary-50); color: var(--secondary-900); font-weight: 700; font-size: .85rem; }
.review-admin-bar[hidden] { display: none; }
.review-admin-bar i { color: var(--primary-600, #D4A017); margin-right: .25rem; }
.review-del-all { display: inline-flex; align-items: center; gap: .4rem; padding: .55rem 1.1rem; border-radius: 999px; cursor: pointer; font: 800 .82rem 'Poppins', sans-serif; background: #b3261e; color: #fff; border: 2px solid #b3261e; transition: background .15s, color .15s; }
.review-del-all i { color: inherit; margin: 0; }
.review-del-all:hover, .review-del-all:focus-visible { background: #fff; color: #b3261e; outline: none; }

/* ---------- Buscar y filtrar ---------- */
.menu-search-btn { display:flex; align-items:center; justify-content:center; gap:.7rem; width:100%; margin-top:16px; padding:.95rem 1.2rem; border:2px solid var(--primary-500); border-radius:999px; background:#fff; color:var(--secondary-900); font:800 1rem 'Montserrat',sans-serif; cursor:pointer; box-shadow:0 6px 18px rgba(63,37,17,.16); transition:transform .2s, box-shadow .2s, background .2s; -webkit-tap-highlight-color:transparent; }
.menu-search-btn i:first-child { display:grid; place-items:center; width:2.1rem; height:2.1rem; border-radius:50%; background:var(--secondary-900); color:var(--primary-500); font-size:.9rem; }
.menu-search-btn__end { color:var(--quaternary-600); }
.menu-search-btn:hover, .menu-search-btn:focus-visible { transform:translateY(-3px); background:var(--primary-50); box-shadow:0 12px 24px rgba(63,37,17,.24); outline:none; }
.msr-card { max-width:760px; height:min(94vh,820px); }
.msr-top { display:flex; align-items:center; gap:4px; padding:8px 6px 8px 14px; background:#fff; border-bottom:1px solid var(--secondary-100); }
.msr-input { flex:1; display:flex; align-items:center; gap:.6rem; min-width:0; padding:0 .9rem; height:2.8rem; border:2px solid var(--primary-500); border-radius:999px; background:var(--tertiary-50); color:var(--secondary-900); }
.msr-input:focus-within { box-shadow:0 0 0 3px rgba(var(--primary-rgb, 212,160,23),.35); }
.msr-input i { color:var(--quaternary-600); }
.msr-input input { flex:1; min-width:0; border:0; outline:0; background:transparent; font:600 1rem 'Poppins',sans-serif; color:var(--secondary-900); -webkit-appearance:none; appearance:none; }
.msr-input input::-webkit-search-cancel-button { display:none; }
.msr-x { border:0; background:var(--secondary-900); color:var(--primary-500); width:1.6rem; height:1.6rem; border-radius:50%; font-size:.7rem; cursor:pointer; flex:none; }
.msr-x[hidden] { display:none; }
.msr-filters { display:grid; gap:.55rem; padding:.7rem 14px; background:#fff; border-bottom:1px solid var(--secondary-100); }
.msr-chips, .msr-row { display:flex; gap:.45rem; overflow-x:auto; scrollbar-width:none; align-items:center; }
.msr-chips::-webkit-scrollbar, .msr-row::-webkit-scrollbar { display:none; }
.msr-chip { flex:none; padding:.4rem .85rem; border-radius:999px; border:2px solid var(--primary-500); background:#fff; color:var(--secondary-900); font:700 .8rem 'Montserrat',sans-serif; cursor:pointer; white-space:nowrap; transition:background .15s, color .15s; }
.msr-chip:hover { background:var(--primary-50); }
.msr-chip.is-on { background:var(--quaternary-600); border-color:var(--quaternary-600); color:#fff; }
.msr-sort { flex:none; margin-left:auto; padding:.4rem .7rem; border-radius:999px; border:2px solid var(--secondary-900); background:#fff; color:var(--secondary-900); font:700 .8rem 'Montserrat',sans-serif; cursor:pointer; }
.msr-body { flex:1; overflow-y:auto; padding:12px 14px 18px; overscroll-behavior:contain; }
.msr-count { margin:0 0 .6rem; font-size:.78rem; font-weight:700; color:var(--secondary-600); }
.msr-list { display:grid; gap:.6rem; }
.msr-item { display:flex; align-items:center; gap:.8rem; width:100%; text-align:left; padding:.6rem .8rem .6rem .6rem; border:2px solid var(--primary-200, #f0d78a); border-radius:1.2rem; background:#fff; cursor:pointer; box-shadow:0 4px 12px -6px rgba(63,37,17,.3); transition:transform .15s, border-color .15s; }
.msr-item:hover, .msr-item:focus-visible { transform:translateY(-2px); border-color:var(--primary-500); outline:none; }
.msr-item__pic { position:relative; flex:none; display:grid; place-items:center; width:3.6rem; height:3.6rem; border-radius:50%; overflow:hidden; background:var(--tertiary-100); font-size:1.6rem; }
.msr-item__pic img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.msr-item__pic b { font-weight:400; }
.msr-item__txt { flex:1; min-width:0; display:grid; gap:.1rem; }
.msr-item__txt small { font:800 .65rem 'Montserrat',sans-serif; text-transform:uppercase; letter-spacing:.06em; color:var(--quaternary-600); }
.msr-item__txt strong { font:800 .95rem/1.2 'Poppins',sans-serif; color:var(--secondary-900); overflow-wrap:anywhere; }
.msr-item__txt span { font-size:.75rem; color:var(--secondary-600); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.msr-item__end { flex:none; display:grid; justify-items:end; gap:.25rem; }
.msr-price { font:900 .95rem 'Montserrat',sans-serif; color:var(--secondary-900); }
.msr-tag { font-style:normal; font:800 .62rem 'Montserrat',sans-serif; padding:.15rem .5rem; border-radius:999px; white-space:nowrap; }
.msr-tag--sold { background:var(--secondary-900); color:#fff; }
.msr-tag--soon { background:var(--primary-500); color:var(--secondary-900); }
.msr-tag--promo { background:var(--quaternary-600); color:#fff; }
.msr-empty { display:grid; justify-items:center; gap:.3rem; padding:2.5rem 1rem; text-align:center; color:var(--secondary-800); }
.msr-empty span { font-size:2.6rem; } .msr-empty small { color:var(--secondary-600); }
.msr-flash { animation:msrFlash 2.4s ease-out; }
@keyframes msrFlash { 0%,60% { box-shadow:0 0 0 4px var(--primary-500), 0 0 28px 6px rgba(212,160,23,.7); } 100% { box-shadow:none; } }
@media (max-width:480px) { .msr-item__end { align-self:flex-start; } .msr-sort { margin-left:0; } .msr-card { height:94vh; } }
@media (prefers-reduced-motion:reduce) { .msr-flash { animation:none; outline:3px solid var(--primary-500); } }
.msr-chips, .msr-row { flex-wrap:wrap; overflow:visible; }
.msr-sort { max-width:100%; }

/* Botón buscar dentro de la ventana del menú (debajo de las pestañas) */
.menu-card__search { flex:none; padding:8px 14px; background:#fff; border-bottom:1px solid var(--secondary-100); }
.menu-search-btn--in { margin-top:0; padding:.55rem 1rem; font-size:.9rem; box-shadow:0 3px 10px rgba(63,37,17,.14); }
.menu-search-btn--in i:first-child { width:1.8rem; height:1.8rem; font-size:.8rem; }


/* Buscar y filtrar: filtros en desplegable + "Ordenar" junto a los productos */
.msr-filters { display:block; padding:.55rem 14px; }
.msr-toggle { display:flex; align-items:center; gap:.5rem; width:100%; padding:.55rem .9rem; border:2px solid var(--primary-500); border-radius:999px; background:#fff; color:var(--secondary-900); font:700 .85rem 'Montserrat',sans-serif; cursor:pointer; text-align:left; }
.msr-toggle:hover { background:var(--primary-50); }
.msr-toggle > span { flex:1; }
.msr-toggle i { color:var(--quaternary-600); }
.msr-toggle__arrow { transition:transform .2s; font-size:.75rem; }
.msr-toggle.is-open .msr-toggle__arrow { transform:rotate(180deg); }
.msr-badge { font-style:normal; min-width:1.35rem; height:1.35rem; padding:0 .35rem; display:inline-grid; place-items:center; border-radius:999px; background:var(--quaternary-600); color:#fff; font:800 .7rem 'Montserrat',sans-serif; }
.msr-badge[hidden], .msr-reset[hidden] { display:none; }
.msr-panel { display:grid; gap:.5rem; padding:.7rem .2rem .2rem; animation:msrOpen .18s ease-out; }
.msr-panel[hidden] { display:none; }
@keyframes msrOpen { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }
.msr-label { margin:0; font:700 .75rem 'Montserrat',sans-serif; color:var(--secondary-600); }
.msr-reset { justify-self:start; border:0; background:transparent; padding:.2rem 0; font:700 .78rem 'Montserrat',sans-serif; color:var(--quaternary-600); text-decoration:underline; cursor:pointer; }
.msr-listbar { display:flex; align-items:center; justify-content:space-between; gap:.6rem; padding:.55rem 14px; background:var(--tertiary-50, #fffaf0); border-bottom:1px solid var(--secondary-100); }
.msr-listbar .msr-count { margin:0; }
.msr-sortwrap { display:flex; align-items:center; gap:.4rem; min-width:0; }
.msr-sortwrap i { color:var(--secondary-900); font-size:.8rem; }
.msr-sortwrap .msr-sort { margin-left:0; }
.msr-body { padding-top:10px; }
@media (prefers-reduced-motion:reduce) { .msr-panel { animation:none; } .msr-toggle__arrow { transition:none; } }


/* Nuestro menú: pestañas nuevas + carrusel horizontal con flechas cuando hay más de 4 */
.menu-tabs-wrap { flex:1; min-width:0; display:flex; align-items:stretch; }
.menu-tabs-wrap .menu-tabs { flex:1; min-width:0; }
.menu-tabs-wrap.is-carousel .menu-tabs { overflow-x:auto; justify-content:flex-start; gap:0; scroll-snap-type:x mandatory; scrollbar-width:none; }
.menu-tabs-wrap.is-carousel .menu-tabs::-webkit-scrollbar { display:none; }
.menu-tabs-wrap.is-carousel .menu-tab { flex:0 0 25%; min-width:0; scroll-snap-align:start; }
.menu-tabs-arrow { flex:none; align-self:flex-start; margin-top:18px; width:30px; height:30px; display:grid; place-items:center; border:2px solid var(--primary-500); border-radius:50%; background:#fff; color:var(--secondary-900); font-size:.75rem; cursor:pointer; transition:background .15s, opacity .15s; }
.menu-tabs-arrow--prev { margin-left:6px; } .menu-tabs-arrow--next { margin-right:2px; }
.menu-tabs-arrow:hover:not(:disabled) { background:var(--primary-50); }
.menu-tabs-arrow:disabled { opacity:.3; cursor:default; }
.menu-tabs-arrow[hidden] { display:none; }
.menu-tabs-arrow:focus-visible { outline:3px solid var(--quaternary-600); outline-offset:2px; }
.menu-extra { display:grid; justify-items:center; gap:.8rem; padding:.6rem 0 1.5rem; text-align:center; }
.menu-extra__pic { width:min(260px,70%); aspect-ratio:1/1; border-radius:24px; overflow:hidden; box-shadow:0 10px 24px rgba(63,37,17,.25); background:var(--tertiary-100); }
.menu-extra__pic img { width:100%; height:100%; object-fit:cover; display:block; }
.menu-extra h3 { margin:0; font-size:1.4rem; font-weight:800; color:var(--secondary-900); }
.menu-extra p { max-width:34rem; margin:0; font-size:.9rem; color:var(--secondary-600); white-space:pre-line; }


/* Presupuesto del cliente: deslizador bajo el botón Filtros */
.msr-budget { display:grid; gap:.35rem; margin-top:.6rem; padding:.6rem .9rem .5rem; border:2px solid var(--primary-500); border-radius:1.2rem; background:#fff; }
.msr-budget__head { display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
.msr-budget__head label { display:flex; align-items:center; gap:.45rem; font:700 .85rem 'Montserrat',sans-serif; color:var(--secondary-900); }
.msr-budget__head label i { color:var(--quaternary-600); }
.msr-budget__head b { padding:.15rem .65rem; border-radius:999px; background:var(--primary-50); color:var(--secondary-900); font:800 .78rem 'Montserrat',sans-serif; white-space:nowrap; transition:background .15s, color .15s; }
.msr-budget__head b.is-on { background:var(--quaternary-600); color:#fff; }
.msr-range { --pct:100%; -webkit-appearance:none; appearance:none; width:100%; height:1.6rem; margin:0; background:transparent; cursor:pointer; touch-action:pan-y; }
.msr-range:focus { outline:none; }
.msr-range::-webkit-slider-runnable-track { height:.5rem; border-radius:999px; background:linear-gradient(to right, var(--primary-500) var(--pct), var(--secondary-100) var(--pct)); }
.msr-range::-moz-range-track { height:.5rem; border-radius:999px; background:var(--secondary-100); }
.msr-range::-moz-range-progress { height:.5rem; border-radius:999px; background:var(--primary-500); }
.msr-range::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:1.5rem; height:1.5rem; margin-top:-.5rem; border-radius:50%; border:3px solid #fff; background:var(--quaternary-600); box-shadow:0 2px 8px rgba(63,37,17,.45); transition:transform .15s; }
.msr-range::-moz-range-thumb { width:1.5rem; height:1.5rem; border-radius:50%; border:3px solid #fff; background:var(--quaternary-600); box-shadow:0 2px 8px rgba(63,37,17,.45); }
.msr-range:active::-webkit-slider-thumb { transform:scale(1.15); }
.msr-range:focus-visible::-webkit-slider-thumb { outline:3px solid var(--primary-500); outline-offset:2px; }
.msr-range:focus-visible::-moz-range-thumb { outline:3px solid var(--primary-500); outline-offset:2px; }
.msr-budget__scale { display:flex; justify-content:space-between; font:700 .7rem 'Montserrat',sans-serif; color:var(--secondary-600); }
@media (prefers-reduced-motion:reduce) { .msr-range::-webkit-slider-thumb, .msr-budget__head b { transition:none; } }

/* ---------- Barra de avisos fija ---------- */
.promo-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 45; overflow: hidden; background: var(--pb-bg, var(--secondary-900)); color: var(--pb-acc, var(--primary-400)); border-bottom: 2px solid var(--pb-acc, var(--primary-500)); box-shadow: 0 4px 14px rgba(63,37,17,.35); font: 800 .82rem/1 'Montserrat', sans-serif; letter-spacing: .01em; }
.promo-bar[hidden] { display: none; }
.promo-bar__track { display: flex; width: max-content; padding: .62rem 0; animation: promoBarMove var(--promo-dur, 30s) linear infinite; will-change: transform; }
@media (hover: hover) and (pointer: fine) { .promo-bar:hover .promo-bar__track { animation-play-state: paused; } }
.promo-bar__set { display: flex; flex: none; align-items: center; white-space: nowrap; }
.promo-bar__item { display: inline-flex; align-items: center; gap: .5rem; padding: 0 1.1rem; color: var(--pb-txt, var(--tertiary-50)); }
.promo-bar__item i { font-style: normal; font-size: 1rem; }
.promo-bar__sep { color: var(--pb-acc, var(--primary-500)); font-size: .8rem; }
@keyframes promoBarMove { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (min-width: 640px) { .promo-bar { font-size: .9rem; } }
body.has-promo-bar { padding-top: var(--promo-h, 0px); }
#siteHeader.sticky { top: calc(var(--promo-h, 0px) + .75rem); }
/* Panel Administrar → Avisos */
.sa-av-opts { display: grid; gap: .6rem; margin-bottom: .7rem; }
.sa-av-sw { display: flex; align-items: center; gap: .6rem; padding: .7rem .8rem; border-radius: 1rem; font-weight: 800; font-size: .85rem; background: rgba(var(--sa-acc-rgb, 212,160,23),.08); border: 1px solid rgba(var(--sa-acc-rgb, 212,160,23),.3); cursor: pointer; }
.sa-av-sw input { width: 1.2rem; height: 1.2rem; accent-color: var(--sa-acc, #D4A017); }
.sa-av-list { display: grid; gap: .6rem; margin-bottom: .7rem; }
.sa-av-row { display: grid; grid-template-columns: 3.4rem 1fr; gap: .45rem; padding: .6rem; border-radius: 1rem; background: rgba(var(--sa-acc-rgb, 212,160,23),.08); border: 1px solid rgba(var(--sa-acc-rgb, 212,160,23),.3); }
.sa-av-ico { text-align: center; font-size: 1.2rem; padding-left: .2rem; padding-right: .2rem; }
.sa-av-txt { resize: vertical; min-height: 2.8rem; }
.sa-av-tools { grid-column: 1 / -1; display: flex; gap: .4rem; justify-content: flex-end; }
.sa-av-tools .sa-step:disabled { opacity: .35; cursor: default; }
.sa-av-tools .sa-step { min-height: 2.1rem; }

.sa-av-cols { display: grid; gap: .55rem; margin: .2rem 0 .9rem; }
.sa-av-pre { display: grid; grid-template-columns: repeat(auto-fit, minmax(5.2rem, 1fr)); gap: .45rem; }
.sa-av-pbtn { display: grid; gap: .25rem; justify-items: center; padding: .4rem .3rem; border-radius: .9rem; cursor: pointer; background: rgba(0,0,0,.3); border: 1px solid rgba(var(--sa-acc-rgb, 212,160,23),.45); color: rgba(var(--sa-txt-rgb, 245,230,200),.9); font: 700 .7rem 'Poppins', sans-serif; }
.sa-av-pbtn:hover, .sa-av-pbtn:focus-visible { border-color: var(--sa-acc, #D4A017); outline: none; transform: translateY(-1px); }
.sa-av-pbtn span { display: flex; align-items: center; justify-content: center; gap: .3rem; width: 100%; padding: .35rem 0; border-radius: .6rem; background: var(--pb-bg); color: var(--pb-txt); border: 1px solid var(--pb-acc); font: 800 .85rem 'Montserrat', sans-serif; }
.sa-av-pbtn span b { color: var(--pb-acc); font-size: .7rem; }
.sa-av-pbtn em { font-style: normal; }
.sa-av-crow { display: grid; gap: .3rem; padding: .55rem .7rem; border-radius: 1rem; background: rgba(var(--sa-acc-rgb, 212,160,23),.08); border: 1px solid rgba(var(--sa-acc-rgb, 212,160,23),.3); font-size: .78rem; font-weight: 800; }
.sa-av-crow > div { display: flex; gap: .5rem; align-items: center; }
.sa-av-crow input[type=color] { flex: none; width: 3rem; height: 2.4rem; padding: 0; border-radius: .6rem; border: 2px solid var(--sa-acc, #D4A017); background: transparent; cursor: pointer; }
.sa-av-crow .sa-input { flex: 1; min-width: 0; text-transform: uppercase; font-family: ui-monospace, monospace; }
.sa-av-pv { display: flex; align-items: center; justify-content: center; gap: .7rem; overflow: hidden; white-space: nowrap; padding: .62rem .8rem; border-radius: .9rem; background: var(--pb-bg); color: var(--pb-txt); border-bottom: 2px solid var(--pb-acc); font: 800 .8rem 'Montserrat', sans-serif; }
.sa-av-pv b { color: var(--pb-acc); }
.sa-av-pv span { overflow: hidden; text-overflow: ellipsis; }
.sa-av-warn { margin: 0; min-height: 1em; font-size: .75rem; font-weight: 700; color: #ffb4a8; }
.sa-av-cols, #saAvPvBox, .sa-av-pv, .sa-av-pre, .sa-av-crow, .sa-av-list, .sa-av-row { min-width: 0; max-width: 100%; }
.sa-av-pv span { flex: 0 1 auto; min-width: 0; }
.sa-av-crow > div > * { min-width: 0; }

/* La barra de avisos siempre se mueve sola (también en celulares con "reducir movimiento") y no se puede arrastrar a mano */
.promo-bar { touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.promo-bar__track { -webkit-animation: promoBarMove var(--promo-dur, 30s) linear infinite; animation: promoBarMove var(--promo-dur, 30s) linear infinite; }
@-webkit-keyframes promoBarMove { from { -webkit-transform: translateX(0); } to { -webkit-transform: translateX(-50%); } }
.sa-f .cm-sel-wrap, .sa-row .cm-sel-wrap, .sa-av-opts .cm-sel-wrap { width: 100%; min-width: 0; }
.sa-f .cs-btn, .sa-row .cs-btn { min-height: 2.4rem; }

/* ---------- Buscar: más filtros, orden, limpiar y «¿Qué quieres comer?» ---------- */
.msr-panel { max-height: 48vh; overflow-y: auto; overscroll-behavior: contain; padding-right: .3rem; }
.msr-label small { font-weight: 600; color: var(--secondary-500, #8a6a4a); }
.msr-note { margin: 0 0 .6rem; padding: .5rem .75rem; border-radius: .9rem; background: var(--primary-50); border: 1px dashed var(--primary-500); font-size: .75rem; font-weight: 700; color: var(--secondary-800); }
.msr-meta { display: flex; flex-wrap: wrap; gap: .1rem .6rem; font-size: .7rem; font-weight: 700; color: var(--secondary-700, #6b3f1d); }
.msr-meta__star { color: var(--primary-700, #906A12); }
.msr-meta--ex { color: var(--quaternary-700, #9B390D); }
.msr-clearall { display: inline-flex; align-items: center; gap: .35rem; margin-left: auto; padding: .35rem .8rem; border-radius: 999px; border: 2px solid var(--quaternary-600); background: #fff; color: var(--quaternary-600); font: 800 .75rem 'Montserrat', sans-serif; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; }
.msr-clearall:hover:not(:disabled), .msr-clearall:focus-visible { background: var(--quaternary-600); color: #fff; outline: none; }
.msr-clearall:disabled { opacity: .4; cursor: default; }
.msr-listbar { flex-wrap: wrap; }
.msr-empty__btn { margin-top: .5rem; padding: .5rem 1.1rem; border-radius: 999px; border: 2px solid var(--quaternary-600); background: #fff; color: var(--quaternary-600); font: 800 .8rem 'Montserrat', sans-serif; cursor: pointer; }
.msr-empty__btn--ai { background: var(--primary-500); border-color: var(--primary-500); color: var(--secondary-900); margin-top: .1rem; }
.msr-aibar { padding: .55rem 14px 0; background: #fff; }
.msr-ai-btn { display: flex; align-items: center; gap: .75rem; width: 100%; padding: .55rem .9rem; border: 2px solid var(--primary-600, #B88A12); border-radius: 1.2rem; background: linear-gradient(135deg, var(--primary-400), var(--primary-500)); color: var(--secondary-900); text-align: left; cursor: pointer; box-shadow: 0 6px 16px -6px rgba(63,37,17,.45); transition: transform .15s, box-shadow .15s; }
.msr-ai-btn:hover, .msr-ai-btn:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 20px -6px rgba(63,37,17,.5); outline: none; }
.msr-ai-btn__ico { display: grid; place-items: center; flex: none; width: 2.3rem; height: 2.3rem; border-radius: 50%; background: var(--secondary-900); font-size: 1.2rem; }
.msr-ai-btn__txt { flex: 1; min-width: 0; display: grid; line-height: 1.2; }
.msr-ai-btn__txt b { font: 800 1rem 'Montserrat', sans-serif; }
.msr-ai-btn__txt small { font: 600 .72rem 'Poppins', sans-serif; opacity: .85; }
.msr-ai-btn > i { color: var(--quaternary-700, #9B390D); }
.msr-ai-btn.is-on { background: var(--secondary-900); color: var(--primary-400); border-color: var(--secondary-900); }
.msr-ai-btn.is-on .msr-ai-btn__ico { background: var(--primary-500); }
.msr-ai-btn.is-on > i { color: var(--primary-400); }
.msr-ai[hidden] { display: none; }
.msr-ai { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--tertiary-50); }
.msr-ai__head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .5rem 14px; border-bottom: 1px solid var(--secondary-100); background: #fff; }
.msr-ai__back, .msr-ai__reset { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .8rem; border-radius: 999px; border: 2px solid var(--primary-500); background: #fff; color: var(--secondary-900); font: 800 .75rem 'Montserrat', sans-serif; cursor: pointer; }
.msr-ai__back:hover, .msr-ai__reset:hover { background: var(--primary-50); }
.msr-ai__host { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.msr-card.is-ai .msr-filters, .msr-card.is-ai .msr-listbar, .msr-card.is-ai .msr-body { display: none; }
.cia-embed { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.cia-embed .cia-log { flex: 1; min-height: 0; }

/* Menús desplegables de la página: «Ordenar por» del buscador */
.msr-sortwrap .cm-sel-wrap { min-width: 11.5rem; }
.msr-sortwrap .cm-sel-compact .cs-btn { border: 2px solid var(--secondary-900); border-radius: 999px; padding: .4rem .8rem; font: 700 .8rem 'Montserrat', sans-serif; }
@media (max-width: 480px) { .msr-sortwrap .cm-sel-wrap { min-width: 10rem; } }

/* Panel Administrar → Carrusel */
.sa-hero-list { display: grid; gap: .6rem; margin-bottom: .7rem; min-width: 0; }
.sa-hero-row { display: grid; grid-template-columns: 5.2rem 1fr; gap: .5rem .7rem; padding: .6rem; border-radius: 1rem; background: rgba(var(--sa-acc-rgb, 212,160,23),.08); border: 1px solid rgba(var(--sa-acc-rgb, 212,160,23),.3); min-width: 0; }
.sa-hero-th { position: relative; display: block; width: 5.2rem; height: 3.8rem; border-radius: .7rem; overflow: hidden; background: #1a0c03; border: 1px solid rgba(var(--sa-acc-rgb, 212,160,23),.5); }
.sa-hero-th img, .sa-hero-th video { width: 100%; height: 100%; object-fit: cover; display: block; }
.sa-hero-th em { position: absolute; right: .2rem; bottom: .15rem; font-style: normal; font-size: .85rem; }
.sa-hero-info { display: grid; gap: .3rem; min-width: 0; align-content: start; font-size: .78rem; }
.sa-hero-tools { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .4rem; justify-content: flex-end; align-items: center; }
.sa-hero-tools .sa-step { min-height: 2.1rem; }
.sa-hero-tools .sa-step:disabled { opacity: .35; cursor: default; }
.sa-hero-chg { padding: .35rem .8rem; font-size: .75rem; }

/* Panel Administrar: botón de colores (pintura) junto al título */
.sa-head__l { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.sa-head__paint { flex: none; width: 2.2rem; height: 2.2rem; display: grid; place-items: center; border-radius: 50%; cursor: pointer; font-size: .95rem; color: var(--sa-acc, #D4A017); background: rgba(var(--sa-acc-rgb, 212,160,23),.12); border: 1.5px solid var(--sa-acc, #D4A017); transition: background .15s, color .15s, transform .15s; }
.sa-head__paint:hover, .sa-head__paint:focus-visible { background: var(--sa-acc, #D4A017); color: var(--sa-dark, #2a1405); transform: scale(1.08); outline: none; }
.sa-head__paint.is-on { background: var(--sa-acc, #D4A017); color: var(--sa-dark, #2a1405); }
.sa-pc__other { display: inline-flex; align-items: center; gap: .4rem; margin-left: .3rem; font-size: .72rem; font-weight: 800; color: var(--sa-txt, #F5E6C8); }
.sa-pc__pick { width: 2.2rem; height: 1.9rem; padding: 0; border-radius: .5rem; border: 2px solid var(--sa-acc, #D4A017); background: transparent; cursor: pointer; }

/* Panel Administrar: campos de fecha con el calendario de la página (el ícono toma el dorado del panel) */
.sa-f .cm-dp-wrap { width: 100%; }
.sa-f .cm-dp-icon { color: var(--sa-acc, #D4A017); }

/* Panel Administrar: botón 🎨 de la paleta de colores con el mismo diseño de los menús desplegables de la página
   (fondo crema, borde café claro, texto café; dorado al pasar el mouse, abrir o estar activo) */
.sa-head__paint {
    width: 2.4rem; height: 2.4rem; border-radius: 0.75rem;
    color: #553217; background: #FDF9F0; border: 1.5px solid #CFBFB1;
    box-shadow: 0 1px 2px rgba(63, 37, 17, .08);
    transition: background-color .15s, border-color .15s, box-shadow .15s, color .15s;
}
.sa-head__paint:hover { background: #FCF6E7; border-color: #DCB141; color: #553217; transform: none; }
.sa-head__paint:focus-visible {
    outline: none; background: #FFFDF8; color: #553217; transform: none;
    border-color: var(--primary-600, #B28515); box-shadow: 0 0 0 3px rgba(212, 160, 23, .28);
}
.sa-head__paint.is-on, .sa-head__paint.is-on:hover {
    background: var(--primary-600, #B28515); border-color: var(--primary-600, #B28515); color: #3F2511;
    box-shadow: 0 4px 10px -4px rgba(178, 133, 21, .6);
}

/* ===== Modo edición: textos de «Próximamente» y «Agotado» =====
   Las cintas (arriba) y los botones (abajo) se pueden tocar; el contorno dorado avisa que se editan. */
body.site-edit-on .soon-ribbon, body.site-edit-on .sold-ribbon { pointer-events: auto; cursor: pointer; }
body.site-edit-on .soon-ribbon:hover, body.site-edit-on .sold-ribbon:hover,
body.site-edit-on button.is-soon:hover, body.site-edit-on button.is-sold:hover,
body.site-edit-on .price-pill--soon:hover, body.site-edit-on .price-pill--sold:hover {
    outline: 3px solid var(--primary-500, #D4A017); outline-offset: 2px; cursor: pointer !important;
}
/* Vista previa en la ventana de edición: mismos colores que el botón real de la página */
.sa-st-pvbox { display: flex; align-items: center; gap: .6rem; margin: .7rem 0 .2rem; font-size: .78rem; font-weight: 700; color: rgba(var(--sa-txt-rgb, 245,230,200), .85); }
.sa-st-pv { display: inline-flex; align-items: center; padding: .45rem 1rem; border-radius: .75rem; font: 800 .8rem 'Poppins', sans-serif; border: 1.5px dashed; }
.sa-st-pv--soon { color: #D4A017; background: #3a1d08; border-color: #D4A017; }
.sa-st-pv--sold { color: #fff; background: #8a2f0a; border-color: #F5D470; }

/* Panel Administrar → Colores: «Otro color» y su código con el mismo aspecto que en el panel de color del Modo edición
   (.sa-color__custom): texto 700, cuadro de color 2.3×1.9 rem con borde fino dorado y fondo oscuro, código en mayúsculas. */
.sa-pc__other { gap: .45rem; font-weight: 700; }
.sa-pc__pick {
    width: 2.3rem; height: 1.9rem; padding: 0; border-radius: .5rem;
    border: 1px solid rgba(var(--sa-acc-rgb, 212,160,23), .6); background: rgba(0,0,0,.35); cursor: pointer;
}
.sa-pc__hex { width: auto; max-width: 7rem; text-align: left; }

/* Ventana «Otro color» del panel Administrar → Colores: usa el diseño del panel 🎨 Color del Modo edición (.sa-color) */
.sa-color--pop { z-index: 100003; width: 21rem; max-height: min(80vh, 36rem); }
.sa-color--pop .sa-input.is-bad { border-color: #E03131; }
button.sa-pc__pick { display: inline-block; flex: none; }
button.sa-pc__pick:hover, button.sa-pc__pick:focus-visible { border-color: var(--sa-acc, #D4A017); outline: none; box-shadow: 0 0 0 3px rgba(var(--sa-acc-rgb, 212,160,23), .35); }

/* Avisos → colores de la barra: el cuadro abre la misma ventana de colores del Modo edición (.sa-color--pop) */
.sa-av-crow .sa-av-pick { display: inline-block; flex: none; width: 3rem; height: 2.4rem; padding: 0; border-radius: .6rem; border: 2px solid var(--sa-acc, #D4A017); cursor: pointer; }
.sa-av-crow .sa-av-pick:hover, .sa-av-crow .sa-av-pick:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(var(--sa-acc-rgb, 212,160,23), .35); }

/* PC: con más de 4 pestañas en el menú, quedan juntas (ancho fijo) en vez de abrirse al 25% */
@media (min-width:768px){
    .menu-tabs-wrap.is-carousel .menu-tab { flex:0 0 108px; min-width:0; padding:6px 6px 8px; }
    .menu-tabs-wrap.is-carousel .menu-tabs { gap:4px; scroll-snap-type:x proximity; }
    .menu-tabs-wrap.is-carousel .menu-tabs > .menu-tab:first-child { margin-left:auto; }
    .menu-tabs-wrap.is-carousel .menu-tabs > .menu-tab:last-child { margin-right:auto; }
}

/* ===== Secciones de la ventana del menú (Nuestro menú · Otros productos…) ===== */
.menu-tab[hidden] { display:none; }
.msr-chips[hidden], .msr-label[hidden] { display:none; }
.msr-chip i { margin-right:.2rem; color:var(--quaternary-600); }
.msr-chip.is-on i { color:#fff; }
.menu-card__search { display:flex; align-items:center; gap:8px; }
.menu-card__search .menu-search-btn--in { flex:1 1 auto; width:auto; min-width:0; }
.menu-secs { display:flex; gap:6px; flex:0 1 auto; min-width:0; }
.menu-secs[hidden] { display:none; }
.menu-sec { flex:0 1 auto; min-width:0; display:flex; align-items:center; gap:.45rem; padding:.3rem .8rem .3rem .3rem; border:2px solid var(--primary-500); border-radius:999px; background:#fff; color:var(--secondary-900); font:800 .82rem 'Montserrat',sans-serif; cursor:pointer; box-shadow:0 3px 10px rgba(63,37,17,.14); transition:background .15s, color .15s, transform .15s; }
.menu-sec__ico { flex:none; display:grid; place-items:center; width:1.8rem; height:1.8rem; border-radius:50%; background:var(--secondary-900); color:var(--primary-500); font-size:.8rem; }
.menu-sec__txt { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.menu-sec:hover { background:var(--primary-50); transform:translateY(-1px); }
.menu-sec.is-on { background:var(--secondary-900); border-color:var(--secondary-900); color:var(--primary-300, #f0c75e); }
.menu-sec.is-on .menu-sec__ico { background:var(--primary-500); color:var(--secondary-900); }
.menu-sec:focus-visible { outline:3px solid var(--quaternary-600); outline-offset:2px; }
@media (max-width:560px){
    .menu-card__search { flex-wrap:wrap; }
    .menu-card__search .menu-search-btn--in { flex:1 1 100%; }
    .menu-secs { flex:1 1 100%; }
    .menu-sec { flex:1 1 0; justify-content:flex-start; font-size:.78rem; padding-right:.6rem; }
}
/* selector de icono en el editor de secciones */
.nsec-ico { display:grid; grid-template-columns:repeat(auto-fill,minmax(42px,1fr)); gap:6px; margin-top:6px; }
.nsec-ico button { height:42px; border-radius:12px; border:2px solid var(--sa-line, var(--primary-500)); background:var(--sa-card, #fff); color:var(--sa-txt, var(--secondary-900)); font-size:1rem; cursor:pointer; }
.nsec-ico button.is-on { background:var(--primary-500); color:var(--secondary-900); border-color:var(--primary-500); box-shadow:0 0 0 2px var(--secondary-900) inset; }

/* ===== Acomodar secciones (Modo edición) ===== */
.sa-lay { position:fixed; inset:0; z-index:87; display:none; pointer-events:none; }
.sa-lay.is-on { display:block; }
.sa-lay__frame { position:fixed; border:3px dashed #C1440E; border-radius:1.2rem; background:rgba(var(--sa-acc-rgb,212,160,23),.10); pointer-events:none; }
.sa-lay__tb { position:fixed; display:flex; align-items:center; gap:4px; height:36px; padding:0 4px 0 12px; border-radius:999px; background:var(--sa-bg, #3F2511); color:var(--sa-txt, #F5E6C8); box-shadow:0 6px 18px rgba(63,37,17,.35); pointer-events:auto; font:800 .72rem 'Poppins',sans-serif; max-width:calc(100vw - 12px); }
.sa-lay__name { max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-right:4px; }
.sa-lay__tb button { height:28px; min-width:28px; padding:0 .6rem; border:0; border-radius:999px; background:var(--sa-acc, #D4A017); color:var(--sa-dark, #2a1405); font:800 .74rem 'Poppins',sans-serif; cursor:pointer; touch-action:none; }
.sa-lay__tb button:hover { background:var(--sa-acc-hi, #e6b422); }
.sa-lay__tb .sa-lay__mv { cursor:grab; }
.sa-lay__h { position:fixed; width:30px; height:30px; margin:-15px 0 0 -15px; display:grid; place-items:center; border-radius:50%; background:var(--sa-acc, #D4A017); color:var(--sa-dark, #2a1405); border:3px solid var(--sa-dark, #2a1405); box-shadow:0 3px 10px rgba(0,0,0,.3); pointer-events:auto; touch-action:none; }
.sa-lay__h i { font-style:normal; font-weight:900; font-size:.85rem; line-height:1; }
.sa-lay__h--r { cursor:ew-resize; } .sa-lay__h--b { cursor:ns-resize; } .sa-lay__h--c { cursor:nwse-resize; }
.sa-lay__badge { position:fixed; left:50%; bottom:18px; transform:translateX(-50%); display:none; padding:.4rem .9rem; border-radius:999px; background:var(--sa-bg, #3F2511); color:var(--sa-txt, #F5E6C8); font:800 .78rem 'Poppins',sans-serif; box-shadow:0 6px 18px rgba(0,0,0,.35); pointer-events:none; }
.sa-lay__badge.is-on { display:block; }
body.sa-laying main > *:hover, body.sa-laying main > .nsec-row > *:hover { outline:2px dashed rgba(193,68,14,.6); outline-offset:3px; cursor:pointer; }
body.sa-laydrag { user-select:none; -webkit-user-select:none; cursor:grabbing; }
body.sa-laydrag * { cursor:grabbing !important; }
@media (max-width:560px){ .sa-lay__name { display:none; } .sa-lay__tb { padding-left:4px; } }

body.sa-laying main > * { touch-action:pan-y; }

/* =====================================================================
   MODO EDICIÓN · líneas de colores por tipo de cosa + 🗺️ Tablero + acomodar al arrastrar
   Cada tipo tiene su color (los mismos del Tablero):  sección · fila · bloque · tarjeta · foto · botón · texto
   ===================================================================== */
:root { --k-seccion: #E8590C; --k-fila: #AE3EC9; --k-bloque: #0CA678; --k-tarjeta: #1C7ED6; --k-foto: #F59F00; --k-boton: #D6336C; --k-texto: #3BC9DB; }

/* líneas permanentes (se prenden y apagan desde el Tablero) */
body.site-edit-on.sa-frames-on.sa-fk-seccion [data-sa-k="seccion"] { outline: 4px solid var(--k-seccion); outline-offset: -5px; }
body.site-edit-on.sa-frames-on.sa-fk-fila    [data-sa-k="fila"]    { outline: 3px dashed var(--k-fila); outline-offset: -3px; }
body.site-edit-on.sa-frames-on.sa-fk-bloque  [data-sa-k="bloque"]  { outline: 3px dotted var(--k-bloque); outline-offset: -3px; }
body.site-edit-on.sa-frames-on.sa-fk-tarjeta [data-sa-k="tarjeta"] { outline: 2px solid var(--k-tarjeta); outline-offset: -2px; }
body.site-edit-on.sa-frames-on.sa-fk-foto    [data-sa-k="foto"]    { outline: 2px solid var(--k-foto); outline-offset: -2px; }
body.site-edit-on.sa-frames-on.sa-fk-boton   [data-sa-k="boton"]   { outline: 2px solid var(--k-boton); outline-offset: 2px; }
body.site-edit-on.sa-frames-on.sa-fk-texto   [data-sa-k="texto"]   { outline: 1px dotted var(--k-texto); outline-offset: 1px; }

/* lo que está a punto de moverse (al pasar el mouse / tocar): línea gruesa del color de su tipo */
body.site-edit-on .sa-move-target.sa-move-target.sa-move-target[data-sa-hk="seccion"] { outline: 4px solid var(--k-seccion) !important; outline-offset: 2px; }
body.site-edit-on .sa-move-target.sa-move-target.sa-move-target[data-sa-hk="fila"]    { outline: 4px dashed var(--k-fila) !important; outline-offset: 2px; }
body.site-edit-on .sa-move-target.sa-move-target.sa-move-target[data-sa-hk="bloque"]  { outline: 4px dotted var(--k-bloque) !important; outline-offset: 2px; }
body.site-edit-on .sa-move-target.sa-move-target.sa-move-target[data-sa-hk="tarjeta"] { outline: 4px solid var(--k-tarjeta) !important; outline-offset: 2px; }
body.site-edit-on .sa-move-target.sa-move-target.sa-move-target[data-sa-hk="foto"]    { outline: 4px solid var(--k-foto) !important; outline-offset: 2px; }
body.site-edit-on .sa-move-target.sa-move-target.sa-move-target[data-sa-hk="boton"]   { outline: 4px solid var(--k-boton) !important; outline-offset: 2px; }
body.site-edit-on .sa-move-target.sa-move-target.sa-move-target[data-sa-hk="texto"]   { outline: 3px dotted var(--k-texto) !important; outline-offset: 2px; }
.sa-lay__frame { border-color: var(--k-seccion); }
body.sa-laying main > *:hover, body.sa-laying main > .nsec-row > *:hover { outline-color: var(--k-seccion); }

/* etiqueta flotante con el tipo de lo que vas a mover */
.sa-kchip { position: fixed; z-index: 89; display: none; pointer-events: none; padding: .18rem .65rem; border-radius: 999px; font: 800 .68rem 'Poppins', sans-serif; color: var(--kt, #fff); background: var(--kc, #C1440E); box-shadow: 0 3px 10px rgba(0,0,0,.35); white-space: nowrap; }
.sa-kchip.is-on { display: block; }
.sa-kchip::after { content: attr(data-t); }

/* hueco punteado: dónde va a quedar lo que arrastras (las demás cosas se corren solas para hacerle lugar) */
.sa-flow-ghost { position: fixed; z-index: 85; pointer-events: none; box-sizing: border-box; border: 3px dashed var(--kc, #1C7ED6); border-radius: .9rem; background: rgba(28,126,214,.10); background: color-mix(in srgb, var(--kc, #1C7ED6) 14%, transparent); animation: saGhost .9s ease-in-out infinite alternate; }
@keyframes saGhost { from { box-shadow: 0 0 0 2px rgba(255,255,255,.0); } to { box-shadow: 0 0 0 6px color-mix(in srgb, var(--kc, #1C7ED6) 28%, transparent); } }
body.sa-flowing .sa-lifted { box-shadow: 0 18px 30px -8px rgba(42,20,5,.55); }

/* 🗺️ Tablero de colores */
.sa-board { position: fixed; z-index: 88; left: 14px; bottom: 14px; width: 19.5rem; max-width: calc(100vw - 28px); max-height: min(78vh, 36rem); overflow: auto; display: none; padding: .85rem; border-radius: 1.3rem; font-family: 'Poppins', sans-serif; color: var(--sa-txt, #F5E6C8); background: var(--sa-bg, #3F2511); border: 1px solid rgba(var(--sa-acc-rgb, 212,160,23), .45); box-shadow: 0 18px 40px rgba(0,0,0,.45); }
.sa-board.is-on { display: block; }
.sa-board__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .35rem; }
.sa-board h3 { margin: 0; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1rem; color: var(--sa-acc, #D4A017); }
.sa-board__note { margin: 0 0 .55rem; font-size: .72rem; line-height: 1.35; opacity: .85; }
.sa-board__list { list-style: none; margin: 0 0 .6rem; padding: 0; display: grid; gap: .3rem; }
.sa-board__row { width: 100%; display: flex; align-items: center; gap: .6rem; padding: .4rem .55rem; text-align: left; border-radius: .8rem; color: inherit; background: rgba(255,255,255,.06); border: 1.5px solid transparent; cursor: pointer; transition: opacity .15s, border-color .15s, background-color .15s; }
.sa-board__row:hover { background: rgba(255,255,255,.12); border-color: var(--kc); }
.sa-board__row[aria-pressed="false"] { opacity: .45; }
.sa-board__row[aria-pressed="false"] .sa-board__line { filter: grayscale(1); }
.sa-board__line { flex: none; width: 2.4rem; height: 0; border-top: 4px solid var(--kc); border-radius: 2px; }
.sa-board__line--fila { border-top-style: dashed; }
.sa-board__line--bloque, .sa-board__line--texto { border-top-style: dotted; }
.sa-board__line--tarjeta, .sa-board__line--foto, .sa-board__line--boton { border-top-width: 3px; }
.sa-board__tx { flex: 1; min-width: 0; display: grid; line-height: 1.2; }
.sa-board__tx b { font-size: .8rem; font-weight: 800; }
.sa-board__tx small { font-size: .66rem; opacity: .8; }
.sa-board__n { flex: none; min-width: 1.5rem; padding: 0 .35rem; font-style: normal; font-size: .68rem; font-weight: 800; line-height: 1.2rem; text-align: center; border-radius: 999px; color: var(--sa-dark, #2a1405); background: var(--kc); }
.sa-board__n:empty::after, .sa-board__n[data-n]::after { content: attr(data-n); }
.sa-board__sw { display: grid; gap: .35rem; margin-bottom: .6rem; font-size: .74rem; font-weight: 600; }
.sa-board__sw label { display: flex; align-items: center; gap: .5rem; cursor: pointer; }
.sa-board__sw input { width: 1rem; height: 1rem; accent-color: var(--sa-acc, #D4A017); }
.sa-board__btns { display: flex; gap: .4rem; }
.sa-board__btns button { flex: 1; padding: .4rem .5rem; border-radius: 999px; font: 800 .72rem 'Poppins', sans-serif; color: var(--sa-dark, #2a1405); background: var(--sa-acc, #D4A017); cursor: pointer; }
.sa-board__btns button:hover { background: var(--sa-acc-hi, #e6b422); }
@media (max-width: 640px) { .sa-board { left: 8px; right: 8px; bottom: 8px; width: auto; max-height: 52vh; } }

/* =====================================================================
   Traslados · sección vacía 📦 · ✂️ Separar
   ===================================================================== */
/* sección vacía (grupo): aquí viven las tarjetas que se separan o se traen de otras secciones */
.nsec-grupo .nsec-slot { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1rem; align-items: start; }
.nsec-grupo .menu-heading { margin-bottom: 1rem; }
.nsec-grupo .nsec-slot:empty { display: none; }
body.site-edit-on .nsec-grupo .nsec-slot:empty { display: grid; min-height: 6rem; place-items: center; border: 2px dashed var(--k-bloque, #0CA678); border-radius: 1rem; }
body.site-edit-on .nsec-grupo .nsec-slot:empty::before { content: '📦 Sección vacía · arrastra aquí tarjetas de otras secciones'; padding: 1rem; font: 700 .8rem 'Poppins', sans-serif; text-align: center; opacity: .75; }
body:not(.site-edit-on) .nsec-grupo.nsec-empty { display: none; }
/* sección que recibe lo que arrastras */
.sa-drop-host { outline: 3px dashed var(--k-bloque, #0CA678) !important; outline-offset: 6px; border-radius: 1rem; background-image: linear-gradient(rgba(12,166,120,.08), rgba(12,166,120,.08)); }

/* ✂️ Separar: marco y botones sobre lo elegido */
.sa-sep { position: fixed; inset: 0; z-index: 87; display: none; pointer-events: none; font-family: 'Poppins', sans-serif; }
.sa-sep.is-on { display: block; }
.sa-sep__frame { position: fixed; box-sizing: border-box; border: 3px solid var(--kc, #1C7ED6); border-radius: .8rem; background: color-mix(in srgb, var(--kc, #1C7ED6) 10%, transparent); box-shadow: 0 0 0 9999px rgba(30, 14, 4, .28); }
.sa-sep__frame b { position: absolute; left: -3px; top: -1.55rem; padding: .12rem .6rem; border-radius: .5rem .5rem 0 0; font-size: .68rem; font-weight: 800; color: #fff; background: var(--kc, #1C7ED6); white-space: nowrap; }
.sa-sep__acts { position: fixed; display: flex; gap: .35rem; pointer-events: auto; padding: .3rem; border-radius: 999px; background: var(--sa-bg, #3F2511); border: 1px solid rgba(var(--sa-acc-rgb, 212,160,23), .5); box-shadow: 0 10px 24px rgba(0,0,0,.4); }
.sa-sep__acts button { padding: .38rem .8rem; border-radius: 999px; font: 800 .72rem 'Poppins', sans-serif; color: var(--sa-txt, #F5E6C8); background: rgba(255,255,255,.1); cursor: pointer; white-space: nowrap; }
.sa-sep__acts button:hover:not(:disabled) { background: rgba(255,255,255,.2); }
.sa-sep__acts button:disabled { opacity: .35; cursor: default; }
.sa-sep__acts button.is-go { color: var(--sa-dark, #2a1405); background: var(--sa-acc, #D4A017); }
.sa-sep__acts button.is-go:hover { background: var(--sa-acc-hi, #e6b422); }
body.sa-separating .sa-sep-hover { outline: 3px dashed #D6336C !important; outline-offset: 2px; cursor: crosshair !important; }
body.sa-separating { cursor: crosshair; }

/* =====================================================================
   ✋ Libre · 🎯 Ajuste fino · 🧲 Igualar
   ===================================================================== */
/* lo movido a mano no se recorta: las cajas con overflow que lo contienen se abren */
.sa-ov { overflow: visible !important; }
.sa-moved { max-width: none; }

/* 🎯 ajuste fino: panelito con flechas de 1 en 1 píxel */
.sa-nudge { position: fixed; z-index: 89; left: 50%; bottom: 14px; transform: translateX(-50%); display: none; align-items: center; gap: .55rem; padding: .45rem .7rem; border-radius: 999px; font-family: 'Poppins', sans-serif; color: var(--sa-txt, #F5E6C8); background: var(--sa-bg, #3F2511); border: 1px solid rgba(var(--sa-acc-rgb, 212,160,23), .55); box-shadow: 0 14px 32px rgba(0,0,0,.45); max-width: calc(100vw - 16px); flex-wrap: wrap; justify-content: center; }
.sa-nudge.is-on { display: flex; }
.sa-nudge__t { font-size: .72rem; font-weight: 800; white-space: nowrap; }
.sa-nudge__pad { display: grid; grid-template-columns: repeat(4, 2rem); gap: .2rem; }
.sa-nudge button { height: 2rem; border-radius: .6rem; font: 800 .8rem 'Poppins', sans-serif; color: var(--sa-txt, #F5E6C8); background: rgba(255,255,255,.1); cursor: pointer; }
.sa-nudge button:hover { background: rgba(255,255,255,.2); }
.sa-nudge .sa-nudge__s, .sa-nudge .sa-nudge__r { padding: 0 .7rem; font-size: .7rem; color: var(--sa-dark, #2a1405); background: var(--sa-acc, #D4A017); }
.sa-nudge .sa-nudge__s:hover, .sa-nudge .sa-nudge__r:hover { background: var(--sa-acc-hi, #e6b422); }
.sa-nudge .sa-nudge__x { width: 2rem; border-radius: 999px; }
@media (max-width: 640px) { .sa-nudge { bottom: 8px; border-radius: 1.2rem; } }

/* 🧲 igualar: casillas de la ventana */
.sa-eq-ck { display: flex; align-items: center; gap: .55rem; padding: .45rem .6rem; border-radius: .8rem; background: rgba(255,255,255,.06); font-weight: 700; font-size: .82rem; cursor: pointer; }
.sa-eq-ck input { width: 1.1rem; height: 1.1rem; accent-color: var(--sa-acc, #D4A017); }