/* ===================================================
   Portal de Pedidos — El Mago de la Empanada
   Mobile-first CSS
   =================================================== */

:root {
    --c-primary: #a11045;
    --c-primary-dark: #8a0d3a;
    --c-primary-light: #fce4ec;
    --c-success: #2e7d32;
    --c-success-bg: #e8f5e9;
    --c-danger: #c62828;
    --c-danger-bg: #ffebee;
    --c-warning: #e65100;
    --c-warning-bg: #fff3e0;
    --c-info: #1565c0;
    --c-info-bg: #e3f2fd;
    --c-text: #1a1a1a;
    --c-text-light: #666;
    --c-text-muted: #999;
    --c-border: #e0e0e0;
    --c-bg: #f8f8f8;
    --c-surface: #fff;
    --radius: 10px;
    --radius-sm: 6px;
    --shadow: 0 2px 8px rgba(0,0,0,0.08);
    --shadow-lg: 0 4px 20px rgba(0,0,0,0.12);
    --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* === Reset === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.5;
    color: var(--c-text);
    background: var(--c-bg);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
a { color: var(--c-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; }

/* === Header === */
.header {
    /* Background opaco (era rgba 0.97 + backdrop-filter:blur). Quitamos el
       blur porque creaba un nuevo containing block que limitaba los
       position:fixed descendientes (drawer, backdrop) al area del header,
       rompiendo el menu hamburguesa mobile. El bg ahora es totalmente
       opaco — casi no se nota la diferencia visual. */
    background: #ffffff;
    border-bottom: 1px solid var(--c-border);
    position: sticky;
    top: 0;
    /* z-index alto para que el header (con la hamburguesa-X) quede SIEMPRE
       arriba del drawer mobile y del backdrop — asi siempre se puede cerrar
       el menu desde la misma X. */
    z-index: 300;
}
.header__inner {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 1rem;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.header__logo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    color: var(--c-text);
}
/* Sin subrayado al hover (pisa el a:hover global): el bloque de marca
   con la dirección no debe subrayarse. */
.header__logo:hover {
    text-decoration: none;
}
.header__logo-icon {
    height: 40px;
    width: auto;
    margin-bottom: 5px;
}
.header__logo-nombre {
    height: 28px;
    width: auto;
    max-width: 280px;
    object-fit: contain;
    display: none;
}
/* Branding compartido con el header de la home (styles.css): nombre en SVG
   con borde magenta + dirección abajo, apilados a la derecha del logo. Los
   valores están espejados; si se ajusta uno, ajustar el otro. */
.header__brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}
.header__brand-svg {
    height: 29px;
    width: auto;
    overflow: visible;
}
.header__brand-addr {
    font-size: 0.79rem;
    font-weight: 500;
    color: #000;
    letter-spacing: 0.04em;
    line-height: 1;
    white-space: nowrap;
    padding-top: 2px;
}
@media (max-width: 480px) {
    .header__brand-svg { height: clamp(16px, calc(9.7vw - 12px), 25px); }
    .header__brand-addr { font-size: 0.68rem; }
}
.header__nav {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.header__link {
    color: var(--c-text-light);
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.header__link:hover { color: var(--c-primary); text-decoration: none; }
.cupon-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: 4px;
    border-radius: 999px;
    background: #e11d48;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
    vertical-align: middle;
}
.header__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--c-primary-light);
    color: var(--c-primary);
    font-weight: 700;
    font-size: 0.8rem;
}
.header__name { display: none; }
.header__logout {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.3rem;
    border-radius: 50%;
    color: var(--c-text-light);
    display: flex;
    align-items: center;
}
.header__logout:hover {
    color: var(--c-danger);
    background: var(--c-danger-bg);
}
/* Label visible solo en el menu mobile (en desktop solo el icono) */
.header__logout-label { display: none; }

/* ═══════════════════ Hamburguesa animada ═══════════════════
   3 spans que se transforman en una X cuando el menu esta abierto.
   En desktop el boton esta oculto. */
.header__hamburger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.4rem;
    color: var(--c-text);
    border-radius: 6px;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 6px;          /* mas espacio entre lineas → reduce ilusion optica */
    z-index: 201;
    position: relative;
}
.header__hamburger:hover { background: rgba(0,0,0,0.05); }
.hamburger-line {
    display: block;
    width: 22px;
    height: 2px;       /* todas las lineas: 2px (mas finas y visualmente iguales) */
    background: currentColor;
    border-radius: 9999px;  /* pill completo evita irregularidades de subpixel */
    transition: transform 0.3s ease, opacity 0.2s ease;
    transform-origin: center;
}
/* Estado abierto: las 3 lineas se transforman en una X.
   translateY: 8px = gap(6) + height(2) → las extremas se encuentran en el centro. */
.header__hamburger.is-open .hamburger-line:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
.header__hamburger.is-open .hamburger-line:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}
.header__hamburger.is-open .hamburger-line:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* Header del drawer mobile (titulo + boton X). Oculto en desktop. */
.header__nav-mobile-header { display: none; }
.header__nav-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.4rem;
    color: var(--c-text);
    border-radius: 50%;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.header__nav-close:hover { background: rgba(0,0,0,0.06); }

/* Backdrop: cubre toda la pantalla detras del drawer (mobile). */
.header__nav-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 199;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.header__nav-backdrop.is-open {
    display: block;
    opacity: 1;
}

@media (max-width: 767px) {
    .header__hamburger { display: flex; }

    /* Drawer lateral derecho — fijo, empieza DEBAJO del header sticky
       (70px) para no taparse mutuamente. El header (z-index 300) sigue
       arriba con la hamburguesa-X visible y clickeable. */
    .header__nav {
        display: flex;
        position: fixed;
        top: 70px;
        right: 0;
        bottom: 0;
        height: calc(100vh - 70px);
        width: 85vw;
        max-width: 340px;
        background: #fff;
        padding: 0 0 1rem;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        z-index: 200;
        overflow-y: auto;
        transform: translateX(100%);
        transition: transform 0.3s ease;
    }
    .header__nav--open { transform: translateX(0); }

    /* Header del drawer: titulo "Menu" + X */
    .header__nav-mobile-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1rem 1.25rem;
        border-bottom: 1px solid var(--c-border);
        margin-bottom: 0.5rem;
    }
    .header__nav-mobile-title {
        font-size: 0.95rem;
        font-weight: 700;
        color: var(--c-text);
    }

    /* Links y botones full-width tappables */
    .header__nav .header__link,
    .header__nav .btn {
        padding: 0.85rem 1.25rem;
        border-radius: 0;
        font-size: 0.95rem;
        justify-content: flex-start;
        width: 100%;
    }
    .header__nav .header__link:hover { background: rgba(0,0,0,0.04); }
    /* Logout queda full-width con label visible */
    .header__logout {
        width: 100%;
        border-radius: 0;
        padding: 0.85rem 1.25rem !important;
        justify-content: flex-start;
        gap: 0.6rem;
        margin-top: auto;  /* empuja al fondo del drawer */
        border-top: 1px solid var(--c-border);
    }
    .header__logout-label { display: inline; font-size: 0.95rem; font-weight: 500; }
    .header__name { display: inline !important; }
    .header__nav form { display: block !important; width: 100%; margin-top: auto; }

    /* Mientras el menu esta abierto, bloquear scroll del body */
    body.menu-open { overflow: hidden; }
}

/* === Main === */
.main {
    flex: 1;
    max-width: 960px;
    margin: 0 auto;
    padding: 1rem;
    width: 100%;
}

/* === Flash alerts === */
.alert {
    max-width: 960px;
    margin: 0.5rem auto;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-weight: 500;
}
.alert--success { background: var(--c-success-bg); color: var(--c-success); }
.alert--error { background: var(--c-danger-bg); color: var(--c-danger); }

/* Flash del layout como toast flotante: no desplaza el contenido, queda
   POR ENCIMA (el "¡Hola Nombre!" del login, etc.). Centrado bajo el
   header sticky (70px). Se autocierra a los 5s (pedir.js). Centrado con
   left/right + margin (no transform: la animación alertSlideIn ya usa
   transform y lo pisaría). */
#flash-alert {
    position: fixed;
    top: 82px;
    left: 1rem;
    right: 1rem;
    margin: 0 auto;
    max-width: 560px;
    z-index: 400;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
}

/* Aviso de cupones en el paso 1 del checkout (solo cupones NO acumulables
   con promos): advertencia amarilla que aparece únicamente cuando HAY
   promociones en el carrito — el momento exacto del conflicto cupón-vs-
   promo (el toggle vive en renderCheckout de pedir.js). Incluye el botón
   "Desarmar promociones" que convierte las promos en productos sueltos. */
.cupon-aviso {
    border: 1px solid;
    border-radius: var(--radius-sm);
    padding: 0.6rem 0.9rem;
    font-size: 0.85rem;
    line-height: 1.5;
    margin: 0.75rem 0 1rem;
}
/* ── Upselling de bebidas en el carrito ────────────────────────────── */
/* Va DESPUÉS de los botones de navegación (ver checkout.php): es un
   agregado opcional, no un paso del pedido. Como ya no se interpone entre
   el carrito y el botón de avanzar, puede permitirse peso visual propio:
   la barra oscura lo separa del resto de la página, que era todo el mismo
   gris claro y se leía como una sola masa plana. */
/* Azul pizarra, el mismo del globito de los tags. No va negro (el único
   color del portal sin identidad de marca: el bloque parecía pegado de
   otro sitio) ni el magenta de marca, que competiría con el botón
   "Entrega y cupones" — el CTA tiene que seguir siendo lo más fuerte de
   la pantalla. */
.upsell {
    background: #1e293b;
    border-radius: 10px;
    margin-top: 1rem;
    /* overflow hidden para que el bloque respete el redondeo. */
    overflow: hidden;
}
.upsell__title {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: #fff;
    font-size: 0.92rem;
    font-weight: 500;
    padding: 0.7rem 0.85rem 0.15rem;
}
.upsell__title-ico {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}
.upsell__list {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.6rem 0.75rem 0.75rem;
}
/* Sin borde: sobre el bordó ya contrastan solos, y el borde gris ensuciaba
   el recorte de la tarjeta. */
.upsell__item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    text-align: left;
    background: #fff;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 0.5rem 0.55rem 0.5rem 0.7rem;
    font-family: inherit;
    font-size: 0.85rem;
    color: var(--c-text);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.upsell__item:hover  { border-color: var(--c-primary); }
.upsell__item:active { background: #fdf2f6; }
.upsell__item-info { min-width: 0; flex: 1; }
.upsell__item-name { display: block; font-weight: 600; }
.upsell__item-desc {
    display: block;
    font-size: 0.75rem;
    color: var(--c-text-light);
    margin-top: 0.1rem;
}
.upsell__item-price {
    flex-shrink: 0;
    font-weight: 700;
    white-space: nowrap;
}
/* Mismo lenguaje que el botón + del menú: el cliente ya sabe qué hace. */
.upsell__item-add {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--c-primary);
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
}

.cupon-aviso--warn { background: #fff8e1; border-color: #ffe082; color: #795500; }
.cupon-aviso a { color: inherit; font-weight: 600; text-decoration: underline; }
/* Botón "Desarmar promociones" del aviso del checkout: convierte las promos
   en productos sueltos para poder aplicar el cupón (pedir.js, initCheckout). */
.cupon-aviso__btn {
    display: block;
    margin-top: 0.55rem;
    background: #fff;
    border: 1.5px solid currentColor;
    color: inherit;
    font-weight: 700;
}
.cupon-aviso__btn:hover { background: #fffdf5; }

/* Badge "Promoción" en los items promo del checkout — verde (una promo
   es algo bueno, no una advertencia). El aviso amarillo de cupones ya
   nombra "promociones" y este badge las identifica en el carrito. */
.checkout-item__promo-badge {
    display: inline-block;
    background: #e8f5e9;
    border: 1px solid #a5d6a7;
    color: #1b5e20;
    border-radius: 999px;
    padding: 0.05rem 0.5rem;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    vertical-align: middle;
    margin-left: 0.3rem;
}

/* === Buttons === */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.6rem 1.2rem;
    border: none;
    border-radius: var(--radius-sm);
    font-family: var(--font);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
    text-decoration: none;
    line-height: 1.3;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(0.97); }
/* Chevron de navegación (ver chevron() en checkout.php). En em para que
   escale con el texto del botón; algo apagado para que la etiqueta siga
   siendo lo que se lee primero. El .btn ya es inline-flex con gap, así
   que la separación y la alineación salen solas. */
.btn__chevron {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    opacity: 0.75;
}
.btn--primary {
    background: var(--c-primary);
    color: #fff;
}
.btn--primary:hover { background: var(--c-primary-dark); }
.btn--outline {
    background: transparent;
    border: 1.5px solid var(--c-border);
    color: var(--c-text);
}
.btn--outline:hover { border-color: var(--c-primary); color: var(--c-primary); }
.btn--sm { padding: 0.4rem 0.8rem; font-size: 0.8rem; }
.btn--lg { padding: 0.8rem 1.5rem; font-size: 1rem; }
.btn--block { width: 100%; }
.btn--danger { background: var(--c-danger); color: #fff; }
.btn--disabled, .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* === Form === */
.form-group { margin-bottom: 1rem; }
.form-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--c-text-light);
    margin-bottom: 0.3rem;
}
.form-control {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1.5px solid var(--c-border);
    border-radius: var(--radius-sm);
    font-family: var(--font);
    /* 16px = evita auto-zoom en iOS al enfocar inputs */
    font-size: 1rem;
    color: var(--c-text);
    background: var(--c-surface);
    transition: border-color 0.15s;
}
.form-control:focus {
    outline: none;
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px rgba(161, 16, 69, 0.1);
}
.form-control--error { border-color: var(--c-danger); }
.form-error {
    font-size: 0.8rem;
    color: var(--c-danger);
    margin-top: 0.25rem;
}

/* === Card === */
.card {
    background: var(--c-surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.25rem;
    margin-bottom: 1rem;
}
.card__title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--c-text);
}

/* === Auth pages === */
.auth-page {
    max-width: 420px;
    margin: 2rem auto;
}
.auth-page .card { padding: 1.5rem; }
.auth-page__title {
    font-size: 1.3rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 0.5rem;
    color: var(--c-text);
}
.auth-page__subtitle {
    text-align: center;
    color: var(--c-text-light);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}
.auth-page__footer {
    text-align: center;
    margin-top: 1rem;
    font-size: 0.85rem;
    color: var(--c-text-light);
}

/* === Categorías / tabs === */
.cat-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}
.cat-tab--text {
    grid-column: 1 / -1; /* Todos ocupa ancho completo */
}
.cat-tab {
    cursor: pointer;
    border: 2px solid var(--c-border);
    transition: all 0.15s;
    background: var(--c-surface);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 0;
    box-shadow: var(--shadow);
    flex-shrink: 0;
}
/* Tabs con imagen: la foto ocupa todo el botón y la etiqueta se apoya
   encima, abajo. La altura la fija el botón (antes la definía la imagen);
   ~104px mantiene el alto que tenía la suma de foto + etiqueta, así el
   menú no se corre para abajo. */
.cat-tab--img {
    position: relative;
    height: 104px;
    justify-content: flex-end;
}
.cat-tab__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Text-only tab (Todos) — sin imagen, centrado vertical */
.cat-tab--text {
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, var(--c-primary-light) 0%, var(--c-surface) 100%);
}
.cat-tab__label {
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.4rem 0.3rem;
    line-height: 1.2;
    color: var(--c-text);
}
/* Zócalo sobre la foto. Apenas translúcido: lo justo para que se intuya
   la imagen debajo sin comprometer la lectura del nombre, que es para lo
   que el botón está ahí. El blur despega el texto de fotos con mucho
   detalle (las empanadas tienen bastante contraste). */
.cat-tab--img .cat-tab__label {
    position: relative;
    z-index: 1;
    background: rgba(255, 255, 255, 0.88);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    padding: 0.4rem 0.3rem;
}
.cat-tab:hover {
    border-color: var(--c-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
/* Active: texto con fondo magenta */
.cat-tab--active {
    border-color: var(--c-primary);
}
.cat-tab--text.cat-tab--active {
    background: var(--c-primary);
}
.cat-tab--active .cat-tab__label {
    background: var(--c-primary);
    color: #fff;
    font-weight: 700;
}
/* Activa con imagen: el magenta también deja ver algo de la foto. */
.cat-tab--img.cat-tab--active .cat-tab__label {
    background: rgba(161, 16, 69, 0.88);
    color: #fff;
}

/* === Product list === */
.product-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--c-surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}
/* Mobile: 2-column layout per product */
.product-card {
    display: flex;
    align-items: center;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--c-border, #eee);
    background: var(--c-surface);
    gap: 0.5rem;
}
.product-card:last-child { border-bottom: none; }
.product-card:nth-child(even) { background: #fafafa; }
/* Left: name + tags + stock */
.product-card__name-row {
    flex: 1;
    min-width: 0;
}
.product-card__name {
    font-weight: 600;
    color: var(--c-text);
    display: block;
}
.product-card__stock {
    font-size: 0.7rem;
    color: var(--c-warning);
}
/* Relleno del producto, debajo del nombre. Peso liviano a propósito: el
   nombre y el precio siguen siendo lo que se escanea, esto se lee sólo
   cuando el cliente duda entre dos gustos. */
.product-card__desc {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.78rem;
    line-height: 1.3;
    color: var(--c-text-light);
}
.product-card__badge {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 600;
    background: #ff6f00;
    color: #fff;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
/* Product tags */
/* Título y tags en la misma línea. baseline para que el ícono del tag no
   quede flotando por encima del nombre. */
.product-card__title-line {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.3rem;
}
.product-card__tags {
    display: inline-flex;
    gap: 0.2rem;
    flex-wrap: wrap;
}
/* Es un <button>: reseteamos el chrome del navegador. */
.ptag {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.75rem;
    font-family: inherit;
    padding: 0.1rem 0.3rem;
    border: none;
    border-radius: 4px;
    line-height: 1;
    cursor: pointer;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
}
.ptag:focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: 1px;
}

/* Globito con el significado del tag. Lo posiciona pedir.js. */
.ptag-tip {
    position: absolute;
    z-index: 1200;
    background: #1e293b;
    color: #fff;
    font-size: 0.78rem;
    line-height: 1.2;
    padding: 0.35rem 0.6rem;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.ptag-tip--visible { opacity: 1; }
/* Mobile: tags sólo ícono. "🥬 Vegetariana 🥐 Hojaldre" no entra al lado
   de un nombre largo y termina saltando de renglón, que es justo lo que
   queríamos evitar al subirlos a la línea del título. El title del span
   sigue diciendo qué significa cada uno. */
@media (max-width: 640px) {
    .ptag__txt { display: none; }
    .ptag {
        padding: 0.1rem 0.2rem;
        font-size: 0.8rem; /* el emoji solo necesita un toque más de cuerpo */
    }
}
.ptag--recomendada { background: #fff8e1; }
.ptag--vegana { background: #e0f4ff; color: #0369a1; }
.ptag--vegetariana { background: #f1f8e9; }
.ptag--hojaldre { background: #fff3e0; }
.ptag--frita { background: #fce4ec; color: var(--c-primary); font-weight: 600; }

/* Right: price + actions stacked */
.product-card__right {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    flex-shrink: 0;
}
.product-card__price {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--c-primary);
    white-space: nowrap;
}
.product-card__actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}
.qty-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1.5px solid var(--c-border);
    background: var(--c-surface);
    color: var(--c-text);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.qty-btn:hover { border-color: var(--c-primary); color: var(--c-primary); }
.qty-btn--active { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.qty-btn--login { background: var(--c-primary); color: #fff; border-color: var(--c-primary); width: 30px; height: 30px; font-size: 1rem; }
.qty-value {
    min-width: 18px;
    text-align: center;
    font-weight: 700;
    font-size: 0.85rem;
}

/* === Cart float === */
.cart-float {
    position: fixed;
    bottom: 1rem;
    left: calc(1rem + 48px + 0.6rem);
    right: 1rem;
    z-index: 200;
    width: auto;
    max-width: 500px;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.cart-float__btn {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.85rem 1.25rem;
    background: var(--c-primary);
    color: #fff;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    box-shadow: var(--shadow-lg);
    transition: background 0.15s;
}
.cart-float__btn:hover { background: var(--c-primary-dark); text-decoration: none; }
.cart-float__count {
    background: #fff;
    color: var(--c-primary);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 0.8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cart-float__total { margin-left: auto; }
.cart-float__label { display: none; }

/* === Checkout === */
.checkout-summary {
    list-style: none;
    padding: 0;
}
.checkout-item {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--c-border);
    font-size: 0.9rem;
}
.checkout-item:last-child { border-bottom: none; }
.checkout-item__name { flex: 1; }
.checkout-item__qty { color: var(--c-text-light); margin: 0 0.5rem; }
.checkout-total {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 0;
    font-weight: 700;
    font-size: 1.1rem;
    border-top: 2px solid var(--c-text);
    margin-top: 0.5rem;
}

/* === Payment options === */
.payment-options { display: flex; flex-direction: column; gap: 0.5rem; }
.payment-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border: 1.5px solid var(--c-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color 0.15s;
}
/* Selección en VERDE (no magenta): estos radio-cards (horario deseado,
   método de pago) conviven con estados "No disponible" en rojo — el
   magenta de marca ahí transmitía problema. Semántica de color del
   portal: magenta = acción, verde = elegido/OK, rojo = problema. */
.payment-option:hover { border-color: #66bb6a; }
.payment-option--selected {
    border-color: #2e7d32;
    background: #e8f5e9;
}
.payment-option input[type="radio"] { display: none; }
.payment-option__icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.payment-option__text { flex: 1; }
.payment-option__title { font-weight: 600; font-size: 0.9rem; }
.payment-option__desc { font-size: 0.8rem; color: var(--c-text-light); }

/* Invitación a reseñar en Google (Mis pedidos) — verde: es un regalo
   (cupón 15% OFF), no una advertencia. El botón salta al navegador real
   vía intent/scheme — misma mecánica que pedir/resena.php. Se muestra
   una sola vez en la vida: desaparece apenas el cliente toca el botón. */
.resena-invite {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: #e8f5e9;
    border: 1px solid #a5d6a7;
    color: #1b5e20;
    border-radius: var(--radius, 12px);
    padding: 0.8rem 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.resena-invite__stars { font-size: 1.05rem; letter-spacing: 0.04rem; }
.resena-invite__text { flex: 1; min-width: 180px; font-size: 0.88rem; line-height: 1.45; }
.resena-invite .btn { white-space: nowrap; }
/* Mobile: tarjeta más compacta y botón a lo ancho (tap cómodo para el
   pulgar; en la vista apilada el botón angosto quedaba perdido). */
@media (max-width: 480px) {
    .resena-invite { padding: 0.65rem 0.8rem; gap: 0.35rem; }
    .resena-invite__stars { font-size: 0.85rem; }
    .resena-invite .btn { width: 100%; margin-top: 0.3rem; }
    .cupon-aviso__btn { width: 100%; }
}

/* === Order history === */
.order-card {
    background: var(--c-surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1rem;
    margin-bottom: 0.75rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
    color: var(--c-text);
    transition: box-shadow 0.15s;
}
.order-card:hover { box-shadow: var(--shadow-lg); text-decoration: none; }
.order-card__info { flex: 1; }
.order-card__id { font-weight: 700; font-size: 0.95rem; }
.order-card__date { font-size: 0.8rem; color: var(--c-text-light); }
.order-card__items { font-size: 0.85rem; color: var(--c-text-light); margin-top: 0.15rem; }
.order-card__right { text-align: right; }
.order-card__total { font-weight: 700; font-size: 1rem; color: var(--c-primary); }

/* === Badges === */
.badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}
.badge--pendiente { background: var(--c-info-bg); color: var(--c-info); }
.badge--confirmado { background: var(--c-warning-bg); color: var(--c-warning); }
.badge--entregado { background: var(--c-success-bg); color: var(--c-success); }
/* Etapas de entrega (v114): mismos tonos que el selector del admin */
.badge--para_retirar { background: #e0f7fa; color: #00838f; }
.badge--en_camino { background: #ede7f6; color: #6a1b9a; }
.badge--cancelado { background: var(--c-danger-bg); color: var(--c-danger); }
.badge--pagado { background: var(--c-success-bg); color: var(--c-success); }

/* === Empty state === */
.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--c-text-muted);
}
.empty-state__icon { font-size: 3rem; margin-bottom: 0.5rem; }
.empty-state__text { font-size: 1rem; }

/* === Footer === */
.footer {
    margin-top: auto;
    border-top: 1px solid var(--c-border);
    /* padding-bottom 80px → deja aire para el carrito flotante al final del scroll */
    padding: 1rem 1rem 80px;
    text-align: center;
    font-size: 0.8rem;
    color: var(--c-text-muted);
}
.footer p,
.footer a,
.footer button,
.footer__link-btn {
    font-family: inherit;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--c-text-muted);
}
.footer p { margin: 0.15rem 0; }
.footer__inner { max-width: 960px; margin: 0 auto; }
.footer__link-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
    vertical-align: baseline;
}
.footer__link-btn:hover { color: var(--c-primary); }

/* === Botón flotante de teléfono === */
.tel-float {
    position: fixed;
    bottom: 1rem;
    left: 1rem;
    background: var(--c-success);
    color: #fff;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,.22);
    z-index: 200;
    text-decoration: none;
    transition: all 0.15s;
}
.tel-float:hover {
    text-decoration: none;
}
.tel-float__number { display: none; }
/* Contenedor barra inferior */
.bottom-float-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 200;
    pointer-events: none; /* los hijos tienen pointer-events:auto */
}
.bottom-float-bar > * {
    pointer-events: auto;
}
/* Desktop: barra centrada con teléfono izq y carrito der */
@media (min-width: 768px) {
    .bottom-float-bar {
        display: flex;
        align-items: flex-end;
        justify-content: center;
        gap: 0.75rem;
        padding: 0 1rem 1rem;
        max-width: 700px;
        margin: 0 auto;
        left: 0;
        right: 0;
    }
    .tel-float {
        position: static;
        border-radius: 50px;
        width: auto;
        height: auto;
        padding: 10px 1.25rem;
        gap: 0.5rem;
        pointer-events: none;
        cursor: default;
        background: #fff;
        color: var(--c-success);
        border: 1.5px solid var(--c-success);
        box-shadow: var(--shadow-lg);
    }
    .tel-float__icon {
        stroke: var(--c-success);
        flex-shrink: 0;
    }
    .tel-float__number {
        display: inline;
        font-size: 0.72rem;
        font-weight: 500;
        color: var(--c-success);
        letter-spacing: 0.01em;
        line-height: 1.35;
    }
    .cart-float {
        position: static;
        transform: none;
        width: auto;
        max-width: none;
        flex: 1;
    }
}

/* === Extras en checkout (envío y envases) === */
.checkout-extra-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.88rem;
    padding: 0.45rem 0.75rem;
    border-radius: var(--radius-sm);
    margin-top: 0.4rem;
}
.checkout-extra-row--envio {
    background: #e3f2fd;
    color: #1565c0;
    border-left: 3px solid #1565c0;
    font-weight: 600;
}
.checkout-extra-row--envase {
    background: var(--c-success-bg);
    border-left: 3px solid var(--c-success);
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
}
.checkout-envase-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    color: var(--c-text);
}
.checkout-envase-line--descuento {
    color: var(--c-success);
    font-weight: 600;
}
.checkout-envase-line--devueltos {
    font-size: 0.88rem;
}
.envase-stepper {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.envase-stepper .qty-btn {
    width: 28px;
    height: 28px;
}
.envase-stepper span {
    min-width: 1.5rem;
    text-align: center;
}

/* === Modo selector (retiro/delivery) === */
.modo-selector {
    background: var(--c-surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.5rem;
    margin-bottom: 1rem;
    text-align: center;
}
.modo-selector__title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--c-text);
}
.modo-selector__options {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}
@media (min-width: 480px) {
    .modo-selector__options {
        grid-template-columns: 1fr 1fr;
    }
}
.modo-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.25rem 0.75rem;
    border: 2px solid var(--c-border);
    border-radius: var(--radius);
    background: var(--c-surface);
    cursor: pointer;
    transition: all 0.2s;
    font-family: var(--font);
    position: relative; /* para anclar .modo-option__badge */
}
.modo-option:hover {
    border-color: var(--c-primary);
    background: var(--c-primary-light);
}
.modo-option__icon { font-size: 2rem; }
.modo-option__label { font-size: 0.95rem; font-weight: 600; color: var(--c-text); }
.modo-option__dir { font-size: 0.8rem; color: var(--c-text); font-weight: 500; line-height: 1.3; }
.modo-option__sub {
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--c-success);
    background: var(--c-success-bg);
    padding: 0.3rem 0.6rem;
    border-radius: 6px;
    margin-top: 0.25rem;
}

/* Badge "🌙 Solo de noche" — se muestra en la card de Delivery cuando hoy
   no hay horario de mediodía configurado y el usuario no está dentro del
   turno nocturno actual (lógica en pedir/index.php). Paleta nocturna
   sutil (azul oscuro / lavanda) para que comunique "noche" sin distraer. */
.modo-option__badge {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: #1e293b;
    color: #e2e8f0;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    letter-spacing: 0.02em;
    line-height: 1.2;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    pointer-events: none; /* el click llega al button */
}
.modo-option--has-badge { padding-top: 1.6rem; }

/* Variante "No disponible" — gris neutro, sin la oscuridad del badge nocturno.
   Comunica "off / inactivo" sin parecer alerta crítica. */
.modo-option__badge--off {
    background: #6b7280;
    color: #f9fafb;
}

/* Estado deshabilitado del boton de modalidad (ej. delivery cuando esta
   apagado desde admin). Visualmente apagado + sin interaccion. */
.modo-option--disabled,
.modo-option:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
    background: #fafafa;
}
.modo-option--disabled:hover,
.modo-option:disabled:hover {
    /* anular hover */
    border-color: var(--c-border);
    transform: none;
}

/* Banner de incentivo "25% OFF" para visitantes sin sesión.
   Reemplaza al indicador modo-elegido cuando IS_LOGGED_IN === false.
   Verde (en vez del magenta de marca) porque universalmente se asocia
   a beneficio/ahorro y se lee mas rapido como ventaja para el usuario. */
.signup-incentive {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    background: linear-gradient(135deg, #f0fbf4 0%, #d9f2e3 100%);
    border: 1.5px dashed #2e7d32;
    border-radius: var(--radius-sm, 10px);
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
}
.signup-incentive__icon { font-size: 1.8rem; line-height: 1; flex-shrink: 0; }
.signup-incentive__body { flex: 1; min-width: 0; line-height: 1.25; }
.signup-incentive__title {
    font-weight: 700;
    color: #0a5d2a;
    font-size: 1rem;
}
.signup-incentive__sub { color: #555; font-size: 0.82rem; }
.signup-incentive__cta {
    flex-shrink: 0;
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    /* Override del .btn--primary (magenta) para que matchee la paleta
       verde del banner. Verde oscuro #0a5d2a (mismo que el title y los
       acentos del card), hover #1b5e20. */
    background: #0a5d2a !important;
    border-color: #0a5d2a !important;
    color: #fff !important;
}
.signup-incentive__cta:hover,
.signup-incentive__cta:focus-visible {
    background: #1b5e20 !important;
    border-color: #1b5e20 !important;
}
@media (max-width: 560px) {
    .signup-incentive { flex-wrap: wrap; }
    .signup-incentive__cta { width: 100%; text-align: center; }
}

.modo-elegido {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: var(--radius-sm);
    padding: 0.6rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    transition: background 0.2s, color 0.2s;
}
.modo-elegido__icon {
    font-size: 1.6rem;
    line-height: 1;
}
/* Badge "🌙 Solo de noche" en la barra modo-elegido — misma paleta
   nocturna que el badge de la card (azul slate) para coherencia visual. */
.modo-elegido__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    background: #1e293b;
    color: #e2e8f0;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    letter-spacing: 0.02em;
    line-height: 1.2;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
/* Delivery: rosa/magenta (color actual) */
.modo-elegido--delivery {
    background: var(--c-primary-light);
    color: var(--c-primary-dark);
}
.modo-elegido--delivery .modo-elegido__cambiar { color: var(--c-primary); }
/* Mostrador: azul/celeste */
.modo-elegido--mostrador {
    background: #e3f2fd;
    color: #1565c0;
}
.modo-elegido--mostrador .modo-elegido__cambiar { color: #1976d2; }
.modo-elegido__cambiar {
    background: none;
    border: none;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    font-family: var(--font);
}

/* === Hero banner === */

/* === Category sections === */
/* scroll-margin-top: el header es sticky y mide 70px, así que sin esto el
   scrollIntoView de las tabs de categoría deja el título de la sección
   escondido detrás. Los 12px extra son aire. */
.cat-section {
    margin-bottom: 1.5rem;
    scroll-margin-top: 82px;
}
.cat-section__header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--c-primary-light);
}
.cat-section__img {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    flex-shrink: 0;
}
.cat-section__name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--c-text);
}
.cat-section__count {
    font-size: 0.8rem;
    color: var(--c-text-muted);
}

/* === Checkout editable items === */
.checkout-item { align-items: center; }
.checkout-item__actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}
.checkout-item__actions .qty-btn {
    width: 26px;
    height: 26px;
    font-size: 0.9rem;
    border-radius: 50%;
}
.checkout-item__actions .qty-value {
    min-width: 18px;
    font-size: 0.85rem;
}
.checkout-item__remove {
    background: none;
    border: none;
    color: var(--c-danger);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0 0.25rem;
    line-height: 1;
    opacity: 0.6;
    transition: opacity 0.15s;
}
.checkout-item__remove:hover { opacity: 1; }
.checkout-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}
.checkout-actions .btn { font-size: 0.8rem; padding: 0.4rem 0.8rem; }

/* === Time selector === */
.time-selector {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}
/* 16px = evita auto-zoom en iOS; antes 0.9rem forzaba zoom al enfocar select */
.time-selector .form-control { font-size: 1rem; }

/* === Reorder button === */
.btn--reorder {
    background: var(--c-info);
    color: #fff;
}
.btn--reorder:hover { background: #0d47a1; }

/* === Cancel order === */
.btn--cancel-order {
    background: transparent;
    border: 1.5px solid var(--c-danger);
    color: var(--c-danger);
}
.btn--cancel-order:hover { background: var(--c-danger-bg); }

/* === Bank details card === */
.bank-details {
    background: var(--c-info-bg);
    border-left: 4px solid var(--c-info);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-bottom: 1rem;
}
.bank-details__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--c-info);
    margin-bottom: 0.75rem;
}
.bank-details__row {
    display: flex;
    justify-content: space-between;
    padding: 0.4rem 0;
    font-size: 0.9rem;
    border-bottom: 1px solid rgba(21, 101, 192, 0.15);
}
.bank-details__row:last-child { border-bottom: none; }
.bank-details__label { color: var(--c-text-light); }
.bank-details__value { font-weight: 600; color: var(--c-text); }

/* === Flash close button === */
.alert {
    position: relative;
    padding-right: 2.5rem;
    animation: alertSlideIn 0.3s ease;
}
.alert--hiding {
    animation: alertFadeOut 0.4s ease forwards;
}
.alert__close {
    position: absolute;
    top: 50%;
    right: 0.75rem;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    color: inherit;
    opacity: 0.6;
    line-height: 1;
    padding: 0.25rem;
}
.alert__close:hover { opacity: 1; }
@keyframes alertSlideIn {
    from { opacity: 0; transform: translateY(-0.5rem); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes alertFadeOut {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-0.5rem); }
}

/* === Footer contact === */
.footer__contact {
    margin-bottom: 0.5rem;
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.footer__contact a {
    color: var(--c-text-light);
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    transition: color 0.15s;
}
.footer__contact a:hover { color: var(--c-primary); text-decoration: none; }

/* === Cart float clear === */
.cart-float__clear {
    background: rgba(255,255,255,0.2);
    border: none;
    color: #fff;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 0.75rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.25rem;
    transition: background 0.15s;
}
.cart-float__clear:hover { background: rgba(255,255,255,0.4); }

/* Fritas minimum warning */
.fritas-warning {
    position: fixed;
    bottom: 70px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 199;
    background: #fff3cd;
    color: #856404;
    border: 1px solid #ffc107;
    border-radius: 8px;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    text-align: center;
    max-width: 90%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* === Promociones === */
.promos-section {
    margin-bottom: 1rem;
}
.promos-section__title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: var(--c-text);
}
.promo-card {
    position: relative;
    background: var(--c-surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 2px solid var(--c-border);
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
}
.promo-card__badge {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--c-success);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 800;
    padding: 0.25rem 0.6rem;
    border-radius: 0 var(--radius) 0 8px;
    letter-spacing: -0.02em;
}
/* Cuadrada (80x80): con la descripción sumada, la tarjeta creció y una
   imagen de 60px de alto quedaba corta contra el bloque de texto.
   object-fit cover, así que no se deforma — sólo cambia el recorte. */
.promo-card__img {
    width: 80px;
    height: 80px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}
.promo-card__info { flex: 1; min-width: 0; }
.promo-card__name { font-weight: 700; font-size: 0.95rem; color: var(--c-text); }
/* Mismo gris que .product-card__desc: las dos son "qué incluye esto" y
   conviene que se lean igual. Antes era --c-text-muted (#999), pero la
   regla estaba muerta — la clase no se usaba en ningún markup. */
.promo-card__desc { font-size: 0.8rem; color: var(--c-text-light); margin-top: 0.1rem; line-height: 1.3; }
.promo-card__pricing { margin-top: 0.25rem; display: flex; align-items: center; gap: 0.5rem; }
.promo-card__price { font-weight: 700; color: var(--c-primary); font-size: 1rem; }
.promo-card__price-old { font-size: 0.85rem; color: var(--c-text-muted); text-decoration: line-through; }
.promo-card__slots { margin-top: 0.2rem; }
.promo-card__slot {
    display: inline-block;
    font-size: 0.75rem;
    background: var(--c-primary-light);
    color: var(--c-primary-dark);
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    margin-right: 0.25rem;
}
.promo-card__slot--pago {
    background: #fff3cd;
    color: #856404;
}

/* Promo modal */
.promo-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.promo-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
}
.promo-modal__content {
    position: relative;
    background: var(--c-surface);
    border-radius: 16px 16px 0 0;
    width: 100%;
    max-width: 500px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}
.promo-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid var(--c-border, #eee);
}
.promo-modal__header h3 { font-size: 1.1rem; font-weight: 700; margin: 0; }
.promo-modal__close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--c-text-muted);
    padding: 0 0.25rem;
}
.promo-modal__body {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem 1rem;
}
.promo-modal__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--c-border, #eee);
}
.promo-modal__counter {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--c-text-muted);
}

/* Products inside promo modal */
.promo-slot-section { margin-bottom: 1rem; }
.promo-slot-header {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--c-primary);
    margin-bottom: 0.4rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--c-border, #eee);
}
.promo-cat-group { margin-bottom: 0.25rem; }
.promo-cat-group--collapsed .promo-cat-body { display: none; }
.promo-cat-group--collapsed .promo-cat-header__arrow { display: inline-block; }
.promo-cat-header__arrow {
    display: inline-block;
    transition: transform 0.2s;
    font-weight: 700;
}
.promo-cat-group:not(.promo-cat-group--collapsed) .promo-cat-header__arrow {
    transform: rotate(90deg);
}
.promo-cat-header {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--c-text);
    background: #f0f0f0;
    padding: 0.5rem 0.65rem;
    margin: 0.3rem 0 0;
    border-radius: 6px;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}
.promo-cat-header:hover { background: #e8e8e8; }
.promo-cat-body { padding-left: 0.25rem; }
.promo-product {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.35rem 0;
    border-bottom: 1px solid #f5f5f5;
}
.promo-product__name { font-size: 0.85rem; flex: 1; min-width: 0; }
.promo-product__actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

/* Checkout promo items */
.checkout-item--promo {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    align-items: start;
    background: #fff;
    border: 1px solid var(--c-border);
    border-left: 3px solid var(--c-primary);
    border-radius: var(--radius);
    padding: 0.6rem 0.75rem;
    margin-bottom: 0.5rem;
    gap: 0.15rem 0.75rem;
}
.checkout-item__promo-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    grid-column: 1 / -1;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--c-border);
    margin-bottom: 0.1rem;
}
.checkout-item__promo-header small {
    font-weight: 400;
    color: var(--c-text-muted);
}
.checkout-item__promo-details {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
    align-items: center;
}
.checkout-promo__flavor {
    font-size: 0.8rem;
    color: var(--c-text);
    font-weight: 500;
    background: #f0f0f0;
    padding: 0.15rem 0.55rem;
    border-radius: 10px;
}
.checkout-item__promo-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    justify-content: flex-end;
}
.checkout-item__promo-actions .btn {
    font-size: 0.75rem;
    padding: 0.2rem 0.6rem;
}

/* Turno selector */
.turno-selector {
    display: flex;
    gap: 0.5rem;
}
.turno-btn {
    flex: 1;
    padding: 0.6rem 1rem;
    border: 1.5px solid var(--c-border);
    border-radius: var(--radius);
    background: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--c-text);
    cursor: pointer;
    text-align: center;
    transition: all 0.15s ease;
}
.turno-btn:hover {
    border-color: var(--c-primary);
    color: var(--c-primary);
}
/* !important para asegurar que la clase active gane sobre cualquier
   regla de hover/focus del navegador (algunos browsers aplican estilos
   default a <button> que pueden hacer que el texto quede ilegible). */
.turno-btn.turno-btn--active,
.turno-btn--active {
    background: var(--c-primary) !important;
    border-color: var(--c-primary) !important;
    color: #fff !important;
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(161,16,69,0.3);
}
.turno-btn--disabled {
    color: var(--c-text-muted);
    cursor: default;
    font-weight: 400;
}

/* Hora grid */
.hora-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.35rem;
}
.hora-btn {
    padding: 0.45rem 0.25rem;
    border: 1.5px solid var(--c-border);
    border-radius: var(--radius);
    background: #fff;
    font-size: 0.85rem;
    color: var(--c-text);
    cursor: pointer;
    text-align: center;
    transition: all 0.15s ease;
}
.hora-btn:hover {
    border-color: var(--c-primary);
    color: var(--c-primary);
}
.hora-btn.hora-btn--active,
.hora-btn--active {
    background: var(--c-primary) !important;
    border-color: var(--c-primary) !important;
    color: #fff !important;
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(161,16,69,0.3);
}

/* === Responsive === */
@media (min-width: 480px) {
    .cart-float__label { display: inline; }
    .header__name { display: inline; }
    .header__logo-nombre { display: block; height: 24px; }
}
/* === Mobile optimizations (375px - iPhone SE) === */
@media (max-width: 414px) {
    /* Fritas warning: no solapar con cart float */
    .fritas-warning {
        bottom: 80px;
        font-size: 0.8rem;
        padding: 0.4rem 0.75rem;
    }

    /* Cart clear button: touch target mínimo 44px */
    .cart-float__clear {
        width: 32px;
        height: 32px;
        font-size: 0.85rem;
    }

    /* Header nav más compacto */
    .header__nav {
        gap: 0.4rem;
    }
    .header__link {
        font-size: 0.75rem;
        padding: 0.3rem 0.4rem;
    }

    /* Mode selector botones más compactos */
    .modo-option {
        padding: 1rem 0.5rem;
    }
    .modo-option__icon {
        font-size: 1.75rem;
    }

    /* Promo modal full mobile */
    .promo-modal__content {
        max-height: 92vh;
        border-radius: 12px 12px 0 0;
    }
    .promo-modal__header { padding: 0.75rem; }
    .promo-modal__body { padding: 0.5rem 0.75rem; }
    .promo-modal__footer { padding: 0.6rem 0.75rem; }

    /* Hora grid: 3 columnas en mobile + touch target mínimo */
    .hora-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.4rem;
    }
    .hora-btn {
        min-height: 40px;
    }

    /* Qty buttons táctiles */
    .qty-btn {
        width: 30px;
        height: 30px;
        font-size: 0.95rem;
    }

    /* Product cards más compactos */
    .product-card {
        padding: 0.5rem;
        gap: 0.35rem;
    }
    .product-card__price {
        font-size: 0.8rem;
    }

    /* Promo cards: layout vertical */
    .promo-card {
        flex-wrap: wrap;
    }
    .promo-card__img {
        width: 100%;
        height: 100px;
        object-fit: cover;
        border-radius: 8px;
    }

    /* Category tabs: scroll horizontal */
    .cat-tabs {
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        gap: 0.4rem;
        padding-bottom: 0.25rem;
    }
    .cat-tab {
        flex: 0 0 auto;
        min-width: 100px;
        scroll-snap-align: start;
    }
    .cat-tab__img {
        height: 60px;
    }
}

@media (min-width: 768px) {
    .header__logo-nombre { height: 28px; }
    .cat-tabs {
        grid-template-columns: repeat(5, 1fr);
    }
    .cat-tab--text { grid-column: auto; }
    .cat-tab__img { height: 120px; }
    .cat-section__img { width: 64px; height: 64px; }
    /* Desktop: name+tags left, price+actions right */
    .product-card__name-row {
        display: flex;
        align-items: center;
        gap: 0.3rem;
    }
    .product-card__tags { margin-top: 0; display: inline-flex; }
    .product-card__right {
        flex-direction: row;
        gap: 0.5rem;
    }
}

/* Piso/Depto siempre en 2 columnas (incluso mobile). No usar inline grid
   porque el media query de abajo colapsa todos los grids 1fr 1fr en mobile. */
.grid-piso-depto {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

/* Input con botón de limpiar (×) a la derecha. La cruz aparece sólo cuando
   el input tiene contenido, gracias a :placeholder-shown. */
.input-clearable {
    position: relative;
    display: block;
}
.input-clearable__btn {
    position: absolute;
    right: 0.4rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.75rem;
    height: 1.75rem;
    display: none;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    color: #999;
    font-size: 1.4rem;
    line-height: 1;
    padding: 0;
    border-radius: 50%;
    transition: color 0.15s, background 0.15s;
}
.input-clearable__btn:hover {
    color: #555;
    background: rgba(0, 0, 0, 0.05);
}
.input-clearable input:not(:placeholder-shown) ~ .input-clearable__btn {
    display: inline-flex;
}

/* Chevron decorativo (flecha hacia abajo) que se muestra a la derecha de un
   input para indicar que abrirá un desplegable. Sólo visual: pointer-events
   none para no interferir con el input. El triángulo se hace con bordes:
   width/height 0, border-top filled = triángulo apuntando hacia abajo. */
.input-chevron {
    position: absolute;
    right: 0.8rem;
    top: 50%;
    margin-top: -3px; /* la mitad de la altura del triángulo (6px) para centrarlo */
    width: 0;
    height: 0;
    pointer-events: none;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #888;
}

/* === Responsive helpers: grids inline que deben stackear en mobile === */
@media (max-width: 479px) {
    [style*="grid-template-columns: 1fr 1fr"],
    [style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
    .time-selector {
        grid-template-columns: 1fr;
    }
    /* Inputs full-width sin desbordar */
    .form-control {
        max-width: 100%;
    }
}