/*
 * Somos Emprende · Tienda como app nativa de móvil (etapa 1).
 *
 * A pedido del usuario: se carga DESPUÉS de tienda.css y
 * tienda_compra.css y concentra acá la capa de app del celular, en
 * vez de sumar overrides dentro de tienda.css (5.000+ líneas). Mismo
 * punto de quiebre que la barra de categorías inferior (1023px).
 * Bordes de 4px y nada circular, como todo Somos Emprende.
 *
 * Piezas (markup en templates/tienda/_app_shell.html y el botón fijo
 * de detalle_producto.html; comportamiento en js/ui/app-shell.js):
 * - .app-topbar: barra superior compacta al bajar por la página.
 * - .app-cartbar: barra "Ver carrito" fija mientras haya productos.
 * - .app-product-cta: "Pedir ahora" fijo en el detalle de producto.
 * - Respuesta táctil de app (sin destello gris, :active, sin hovers
 *   "pegados" en pantallas táctiles).
 */

/* =========================================================
   ETAPA 2 · TODOS LOS TAMAÑOS
   ========================================================= */

/*
 * Nada circular en Somos Emprende: todas las esquinas son de 4px
 * -a pedido del usuario-. Se corrige acá, sin tocar las reglas
 * originales de tienda.css.
 */
.floating-cart,
.floating-cart-count,
.producto-tap-hint,
.tienda-categoria-link {
    border-radius: 4px;
}

@media (prefers-reduced-motion: no-preference) {
    .producto-tap-hint::before {
        border-radius: 4px;
    }
}

.tienda-categoria-link::after {
    border-radius: 1px;
}

/*
 * Botones del encabezado (compartir y la flecha de volver del detalle
 * y de "Vuelve a pedir") y el logo: en el celular tenían esquinas de
 * 12px y 8px -a pedido del usuario, van a 4px como todo Somos
 * Emprende-.
 */
.mobile-menu-btn,
.btn-share-header,
.tienda-logo,
.tienda-logo-placeholder {
    border-radius: 4px;
}

/*
 * Estado de la tienda -opción "A" elegida por el usuario entre seis
 * dibujadas (antes descartó la etiqueta con recuadro, el chip blanco,
 * la etiqueta "EN VIVO" y el indicador en el logo)-: como Rappi,
 * PedidosYa o Uber Eats, abierta es lo normal y NO se marca; cerrada
 * aparece un aviso oscuro a todo el ancho, debajo de los servicios,
 * que explica qué pasa. Marcado en templates/tienda/_estado_tienda.html
 * y js/estado-tienda/estado-tienda.ui.js (tiempo real).
 */
.badge-dot {
    display: none;
}

.badge-estado.badge-abierta {
    display: none !important;
}

.tienda-meta {
    flex-wrap: wrap;
}

.badge-estado.badge-cerrada {
    order: 2;
    flex: 0 0 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 0;
    height: auto;
    margin: 6px 0 0;
    padding: 10px 12px;
    border: 0;
    border-radius: 4px;
    background: #0b1220;
    color: #ffffff;
    font-size: 0.8rem;
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: none;
    text-align: left;
    white-space: normal;
    box-shadow: none;
}

.badge-estado.badge-cerrada {
    justify-content: flex-start;
}

/* En PC el aviso no se estira a todo el ancho de la fila. */
@media (min-width: 1024px) {
    .badge-estado.badge-cerrada {
        flex: 0 0 auto;
        width: auto;
        max-width: 440px;
    }
}

.badge-estado__icono {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
}

/* Botones de producto deshabilitados ("Tienda cerrada", "Límite
   alcanzado"): en gris, para que no parezcan tocables. */
.btn-agregar-carrito:disabled,
.btn-agregar-carrito[aria-disabled="true"] {
    background: #e2e8f0;
    border-color: #e2e8f0;
    color: #64748b;
    cursor: not-allowed;
    box-shadow: none;
}

/* Logo de la tienda sobre un recuadro blanco dentro del aviso oscuro. */
.badge-estado__logo {
    flex: 0 0 auto;
    display: inline-flex;
    width: 42px;
    height: 42px;
    padding: 3px;
    border-radius: 4px;
    background: #ffffff;
}

.badge-estado__logo img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 3px;
    object-fit: cover;
}

/*
 * Celular: el aviso de tienda cerrada es una barra fija abajo, en el
 * lugar de "Ver carrito" (opción "3" elegida por el usuario, como las
 * apps de delivery): el encabezado queda limpio y el aviso aparece
 * justo donde el cliente iría a pedir. Con la tienda cerrada no se
 * puede comprar, así que "Ver carrito" se oculta.
 */
@media (max-width: 1023px) {
    .badge-estado.badge-cerrada {
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: calc(var(--categorias-bottom-height, 72px) + 10px);
        z-index: 1125;
        flex: none;
        width: auto;
        margin: 0;
        padding: 10px 14px 10px 10px;
        box-shadow: 0 12px 28px rgba(11, 18, 32, 0.3);
    }

    /* Detalle: sobre la barra fija de "Pedir ahora". */
    .pagina-detalle-producto .badge-estado.badge-cerrada {
        bottom: 84px;
    }

    body:has(.badge-estado.badge-cerrada) .app-cartbar {
        display: none;
    }

    body:has(.badge-estado.badge-cerrada) .vuelve-pedir-floating {
        bottom: calc(var(--categorias-bottom-height, 72px) + 10px + 64px + 10px);
    }

    body:has(.badge-estado.badge-cerrada) .tienda-categorias-nav ~ .tienda-footer {
        padding-bottom: calc(var(--categorias-bottom-height, 72px) + 84px);
    }

    body.has-app-product-cta:has(.badge-estado.badge-cerrada) .tienda-footer {
        padding-bottom: 160px;
    }
}

/* "Vuelve a pedir" y "Reseñas" en teléfonos no tienen barra de categorías. */
@media (max-width: 767px) {
    .pagina-vuelve-pedir .badge-estado.badge-cerrada,
    .pagina-resenas .badge-estado.badge-cerrada {
        bottom: 12px;
    }

    body.pagina-vuelve-pedir:has(.badge-estado.badge-cerrada) .tienda-footer,
    body.pagina-resenas:has(.badge-estado.badge-cerrada) .tienda-footer {
        padding-bottom: 80px;
    }
}

.badge-estado__texto {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.badge-estado__texto strong {
    font-size: 0.84rem;
    font-weight: 700;
}

.badge-estado__texto span {
    font-size: 0.76rem;
    opacity: 0.8;
}

/*
 * Servicios solo con ícono -a pedido del usuario: con el texto al lado
 * ("Retiro", "Delivery"...) y la calificación, la fila se veía
 * cargada-. Al tocar un ícono aparece un globo con su nombre
 * (js/ui/servicios-info.js, .tienda-servicio-globo más abajo).
 */
.tienda-servicio-chip {
    pointer-events: auto;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.tienda-servicio-chip:active {
    opacity: 0.8;
}

.tienda-servicio-globo {
    position: fixed;
    z-index: 1700;
    max-width: calc(100vw - 16px);
    padding: 7px 11px;
    border-radius: 4px;
    background: var(--tienda-color, #0b1220);
    color: var(--tienda-color-texto, #ffffff);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.22);
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
    pointer-events: none;
}

.tienda-servicio-globo[hidden] {
    display: none;
}

.tienda-servicio-globo.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Flechita hacia el ícono. */
.tienda-servicio-globo::before {
    content: "";
    position: absolute;
    top: -4px;
    left: var(--flecha-x, 50%);
    width: 8px;
    height: 8px;
    margin-left: -4px;
    background: var(--tienda-color, #0b1220);
    transform: rotate(45deg);
}

/*
 * Hoja "Compartir" (templates/tienda/_compartir.html,
 * js/ui/share-sheet.js): WhatsApp, copiar enlace, código QR y "Más
 * opciones". Hoja inferior en el celular, tarjeta centrada en PC.
 */
.share-sheet {
    position: fixed;
    inset: 0;
    z-index: 1590;
    visibility: hidden;
    pointer-events: none;
}

.share-sheet.is-open {
    visibility: visible;
    pointer-events: auto;
}

.share-sheet__overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.share-sheet.is-open .share-sheet__overlay {
    opacity: 1;
}

.share-sheet__panel {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(92vw, 400px);
    padding: 16px;
    background: #ffffff;
    border-radius: 4px;
    box-shadow: 0 24px 50px rgba(15, 23, 42, 0.22);
    transform: translate(-50%, -46%);
    opacity: 0;
    transition:
        transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1),
        opacity 0.2s ease;
}

.share-sheet.is-open .share-sheet__panel {
    transform: translate(-50%, -50%);
    opacity: 1;
}

.share-sheet__handle {
    display: none;
}

.share-sheet__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.share-sheet__title {
    margin: 0;
    color: #0b1220;
    font-size: 1.05rem;
    font-weight: 800;
}

.share-sheet__close {
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    background: #ffffff;
    color: #0b1220;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
}

.share-sheet__item {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 60px;
    padding: 8px 4px;
    border: 0;
    border-bottom: 1px solid #f1f5f9;
    background: none;
    color: #0b1220;
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.share-sheet__item:last-child {
    border-bottom: 0;
}

.share-sheet__item[hidden] {
    display: none;
}

.share-sheet__item:active {
    background: #f8fafc;
}

@media (hover: hover) {
    .share-sheet__item:hover {
        background: #f8fafc;
    }
}

.share-sheet__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 4px;
    background: #f1f5f9;
    color: #0b1220;
}

.share-sheet__icon svg {
    width: 22px;
    height: 22px;
}

.share-sheet__icon--whatsapp {
    background: rgba(37, 211, 102, 0.14);
    color: #128c4a;
}

.share-sheet__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.share-sheet__text strong {
    font-size: 0.95rem;
    font-weight: 700;
}

.share-sheet__text small {
    font-size: 0.78rem;
    color: #64748b;
}

/* QR grande y nítido (el PNG se genera a 640px). */
.qr-image-wrap .qr-image {
    width: min(72vw, 280px);
    height: auto;
    image-rendering: pixelated;
}

@media (max-width: 1023px) {
    .share-sheet__panel {
        left: 0;
        right: 0;
        top: auto;
        bottom: 0;
        width: auto;
        padding: 10px 16px 18px;
        border-radius: 4px 4px 0 0;
        box-shadow: 0 -12px 32px rgba(15, 23, 42, 0.18);
        transform: translateY(100%);
        opacity: 1;
    }

    .share-sheet.is-open .share-sheet__panel {
        transform: translateY(0);
    }

    .share-sheet__handle {
        display: block;
        width: 40px;
        height: 4px;
        margin: 0 auto 10px;
        border-radius: 2px;
        background: #d1d5db;
    }
}

/*
 * Botón flotante "Pedir de nuevo" (tienda.html) -a pedido del usuario:
 * "es el único que no encaja con el diseño"-. Mismo lenguaje que "Ver
 * carrito" y los botones principales: fondo oscuro sólido, texto
 * blanco en negrita e ícono de "repetir" dentro de un recuadro de 4px.
 * Posición y comportamiento (se oculta al bajar y reaparece al subir)
 * siguen siendo los de tienda.css / tienda.html.
 */
.vuelve-pedir-floating {
    gap: 8px;
    height: 40px;
    padding: 0 12px 0 6px;
    border: 0;
    border-radius: 4px;
    background: var(--tienda-color, #0b1220);
    color: var(--tienda-color-texto, #ffffff);
    box-shadow: 0 12px 28px rgba(11, 18, 32, 0.3);
    touch-action: manipulation;
}

.vuelve-pedir-floating:hover {
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 14px 30px rgba(11, 18, 32, 0.34);
}

.vuelve-pedir-floating-icono {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
}

.vuelve-pedir-floating-icono svg {
    width: 16px;
    height: 16px;
}

.vuelve-pedir-floating-texto {
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0;
}

/*
 * Ícono de los estados vacíos (catálogo sin productos, "Vuelve a
 * pedir" sin compras, reseñas sin reseñas): antes eran emoji (🛍️, ⭐),
 * que se ven distinto en cada teléfono. Ahora es un ícono de línea
 * dentro de un recuadro de 4px, mismo estilo que la hoja de compartir.
 */
.sin-productos-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0 auto 6px;
    border-radius: 4px;
    background: #f1f5f9;
    color: #0b1220;
    font-size: 0;
}

.sin-productos-icono svg {
    width: 28px;
    height: 28px;
}

/* Solo existen en el celular. */
.app-topbar,
.app-cartbar,
.app-product-cta,
.tienda-footer-prefijo {
    display: none;
}

@media (max-width: 1023px) {

    html,
    body {
        -webkit-tap-highlight-color: transparent;
    }

    /*
     * Barras de abajo realmente fijas -a pedido del usuario: "sigue
     * moviéndose, aplica lo que hiciste en el panel"-. Si el que hace
     * scroll es el documento, el navegador del celular esconde/muestra
     * su barra de direcciones en cada desplazamiento, el alto visible
     * cambia y todo lo fijo abajo (categorías, "Ver carrito", "Pedir
     * ahora") se reacomoda. Acá el documento queda quieto con el alto
     * exacto de la pantalla y el que desplaza es <body> por dentro
     * -misma técnica que panel-app.css-. js/ui/app-shell.js reenvía
     * el scroll de <body> como scroll de window, así el resaltado de
     * categorías y "Pedir de nuevo" siguen funcionando sin cambios;
     * lockBodyScroll() (core/dom.js) sigue bloqueándolo igual porque
     * pone overflow: hidden directo en <body>.
     */
    html {
        height: 100%;
        overflow: hidden;
        overscroll-behavior: none;
    }

    body {
        height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior-y: contain;
    }

    /*
     * Con un modal o el carrito abierto (lockBodyScroll() en
     * js/core/dom.js): la página vuelve al modo de siempre -el
     * documento desplaza, bloqueado con overflow: hidden en <body>- y
     * lockBodyScroll() la lleva al mismo punto con scrollTo(). Sin
     * position: fixed: con <html> y <body> bloqueados a la vez Firefox
     * de Android no abría el teclado, y con <body> fijo lo abría pero
     * no escribía en los campos.
     */
    html.is-scroll-locked {
        height: auto;
        overflow: visible;
    }

    html.is-scroll-locked body {
        height: auto;
    }

    /* El carrito flotante circular se reemplaza por la barra "Ver
       carrito" y el carrito de la barra superior. */
    .floating-cart {
        display: none !important;
    }

    /* ---------- Barra superior compacta ---------- */

    .app-topbar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1150;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        height: 56px;
        padding: 0 12px;
        background: #ffffff;
        border-bottom: 1px solid #e5e9f0;
        box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
        transform: translateY(-100%);
        visibility: hidden;
        transition:
            transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1),
            visibility 0s linear 0.24s;
    }

    .app-topbar.is-visible {
        transform: translateY(0);
        visibility: visible;
        transition:
            transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1),
            visibility 0s;
    }

    .app-topbar__brand {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
        padding: 0;
        border: 0;
        background: none;
        color: #0b1220;
        font: inherit;
        text-align: left;
        cursor: pointer;
    }

    .app-topbar__logo {
        flex: 0 0 auto;
        width: 34px;
        height: 34px;
        border-radius: 4px;
        object-fit: cover;
    }

    .app-topbar__logo--placeholder {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: var(--tienda-color, #0b1220);
        color: var(--tienda-color-texto, #ffffff);
        font-weight: 800;
    }

    .app-topbar__name {
        font-size: 1rem;
        font-weight: 800;
        letter-spacing: -0.01em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .app-topbar__cart {
        position: relative;
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        padding: 0;
        border: 1px solid #e2e8f0;
        border-radius: 4px;
        background: #ffffff;
        color: #0b1220;
        cursor: pointer;
    }

    .app-topbar__cart svg {
        width: 22px;
        height: 22px;
    }

    .app-topbar__count {
        position: absolute;
        top: -6px;
        right: -6px;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        display: none;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        background: var(--tienda-color, #0b1220);
        color: var(--tienda-color-texto, #ffffff);
        font-size: 0.66rem;
        font-weight: 800;
        line-height: 1;
        box-shadow: 0 0 0 2px #ffffff;
    }

    body.has-app-cartbar .app-topbar__count {
        display: inline-flex;
    }

    /*
     * Al tocar una categoría, la posición la calcula
     * catalogo/index.js:irACategoria() con el alto real de la barra
     * superior (antes eran 50px/42px fijos, que no coincidían con el
     * relleno de cada tamaño de pantalla). Esto queda solo para el
     * salto sin JavaScript.
     */
    .categoria-bloque {
        scroll-margin-top: 56px;
    }

    /* ---------- Barra "Ver carrito" ---------- */

    .app-cartbar {
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: 12px;
        z-index: 1120;
        display: flex;
        align-items: center;
        gap: 12px;
        height: 54px;
        padding: 0 16px 0 10px;
        border: 0;
        border-radius: 4px;
        background: var(--tienda-color, #0b1220);
        color: var(--tienda-color-texto, #ffffff);
        font: inherit;
        font-weight: 700;
        text-align: left;
        cursor: pointer;
        box-shadow: 0 12px 28px rgba(11, 18, 32, 0.28);
        opacity: 0;
        transform: translateY(16px);
        pointer-events: none;
        visibility: hidden;
        transition:
            opacity 0.2s ease,
            transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1),
            visibility 0s linear 0.24s;
        touch-action: manipulation;
    }

    .app-cartbar.is-visible {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
        visibility: visible;
        transition:
            opacity 0.2s ease,
            transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1),
            visibility 0s;
    }

    .app-cartbar.is-visible:active {
        transform: scale(0.98);
    }

    /* Sobre la barra de categorías cuando la página la tiene. */
    .tienda-categorias-nav ~ .app-cartbar {
        bottom: calc(var(--categorias-bottom-height, 72px) + 10px);
    }

    /* Sobre el botón fijo "Pedir ahora" en el detalle. */
    body.has-app-product-cta .app-cartbar {
        bottom: 84px;
    }

    .app-cartbar__count {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 32px;
        height: 32px;
        padding: 0 8px;
        border-radius: 4px;
        background: rgba(255, 255, 255, 0.16);
        font-size: 0.9rem;
        font-weight: 800;
        font-variant-numeric: tabular-nums;
    }

    .app-cartbar__label {
        flex: 1;
        font-size: 0.95rem;
    }

    .app-cartbar__total {
        flex: 0 0 auto;
        font-size: 0.95rem;
        font-weight: 800;
        font-variant-numeric: tabular-nums;
    }

    /* "Pedir de nuevo" sube para no quedar tapado por la barra. */
    body.has-app-cartbar .vuelve-pedir-floating {
        bottom: calc(var(--categorias-bottom-height, 72px) + 10px + 54px + 10px);
    }

    /* El final de la página no queda escondido detrás de la barra. */
    body.has-app-cartbar .tienda-footer {
        padding-bottom: 76px;
    }

    body.has-app-cartbar .tienda-categorias-nav ~ .tienda-footer {
        padding-bottom: calc(var(--categorias-bottom-height, 72px) + 74px);
    }

    /* ---------- "Pedir ahora" fijo en el detalle ---------- */

    .app-product-cta {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1110;
        display: flex;
        align-items: center;
        gap: 12px;
        min-height: 72px;
        padding: 10px 12px;
        background: #ffffff;
        border-top: 1px solid #e5e9f0;
        box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.08);
        visibility: hidden;
    }

    /* Siempre fija mientras exista (app-shell.js la activa al
       cargar): no aparece ni desaparece con el scroll, así no mueve
       nada de abajo mientras se desplaza la página. */
    .app-product-cta.is-visible {
        visibility: visible;
    }

    /* La barra fija reemplaza al "Pedir ahora" del contenido. */
    body.has-app-product-cta .detalle-producto-acciones .js-add-cart,
    body.has-app-product-cta .detalle-producto-acciones .js-download-product {
        display: none;
    }

    .app-product-cta__info {
        display: flex;
        flex-direction: column;
        gap: 2px;
        flex: 1;
        min-width: 0;
    }

    .app-product-cta__name {
        font-size: 0.76rem;
        color: #64748b;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .app-product-cta__price {
        font-size: 1.1rem;
        font-weight: 800;
        color: #0b1220;
        font-variant-numeric: tabular-nums;
    }

    .app-product-cta__btn {
        flex: 0 0 auto;
        height: 48px;
        padding: 0 22px;
        border: 0;
        border-radius: 4px;
        background: var(--tienda-color, #0b1220);
        color: var(--tienda-color-texto, #ffffff);
        font: inherit;
        font-weight: 700;
        cursor: pointer;
        touch-action: manipulation;
    }

    .app-product-cta__btn:active {
        transform: scale(0.97);
    }

    .app-product-cta__btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    body.has-app-product-cta .tienda-footer {
        padding-bottom: 84px;
    }

    body.has-app-product-cta.has-app-cartbar .tienda-footer {
        padding-bottom: 148px;
    }

    /* ---------- Encabezado: servicios con texto ---------- */

    /*
     * "Abierto" y los servicios en UNA sola fila -a pedido del
     * usuario: en dos líneas ocupaba demasiado espacio-. Chips
     * compactos; si en un teléfono angosto no caben, la fila se
     * desliza con el dedo (patrón de filtros de app) en vez de
     * cortarse o saltar de línea. Los márgenes automáticos del primer
     * y último elemento la centran cuando sí cabe, sin esconder el
     * comienzo cuando se desliza (justify-content: center lo haría).
     */
    .tienda-meta {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 5px;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .tienda-meta > :first-child,
    .tienda-meta > .badge-estado + * {
        margin-left: auto;
    }

    .tienda-meta > :last-child {
        margin-right: auto;
    }

    .tienda-meta > * {
        flex: 0 0 auto;
    }

    .tienda-servicios {
        flex-wrap: nowrap;
        gap: 5px;
    }

    .tienda-servicio-chip {
        height: 30px;
        min-height: 30px;
    }

    .tienda-servicio-chip svg {
        width: 16px;
        height: 16px;
    }

    /* ---------- Tarjetas de producto ---------- */

    /*
     * Lectura de app: nombre a la izquierda y el precio debajo,
     * también a la izquierda (antes el precio sin oferta quedaba suelto
     * a la derecha).
     */
    .producto-nombre {
        text-align: left;
        font-size: 0.84rem;
        font-weight: 600;
        color: #0b1220;
    }

    .producto-precio-wrap {
        justify-content: flex-start;
    }

    .producto-precio,
    .producto-precio-original,
    .producto-footer > .producto-precio {
        text-align: left;
    }

    .producto-precio,
    .producto-footer > .producto-precio {
        font-size: 0.98rem;
        font-weight: 700;
    }

    /* ---------- Carrito: botones + y − de tamaño táctil ---------- */

    .cart-qty-btn {
        width: 44px;
        height: 44px;
        font-size: 1.2rem;
        touch-action: manipulation;
    }

    .cart-qty-btn:active {
        transform: scale(0.94);
    }

    .cart-qty-value {
        min-width: 28px;
        font-size: 1rem;
    }

    /* ---------- Final de la página ---------- */

    /*
     * A pedido del usuario ("las aplicaciones nativas tienen
     * footer?"): en el celular el bloque oscuro del footer se
     * reemplaza por una línea discreta "Tienda creada con Somos
     * Emprende" al final del catálogo -la lista termina limpia, como
     * en una app, sin perder la marca-. En PC el footer queda igual.
     * Los rellenos inferiores para las barras fijas siguen aplicando
     * (ahora sobre fondo blanco).
     */
    .tienda-footer {
        background: transparent;
        color: #64748b;
        border-top: 0;
    }

    .tienda-footer-inner {
        padding: 22px 0 16px;
    }

    .tienda-footer-brand-wrap {
        gap: 8px;
    }

    .tienda-footer-logo {
        width: 22px;
        height: 22px;
    }

    .tienda-footer-brand-textos {
        flex-direction: row;
        align-items: baseline;
        gap: 4px;
    }

    .tienda-footer-prefijo {
        display: inline;
        font-size: 0.8rem;
        color: #94a3b8;
    }

    .tienda-footer-brand {
        font-size: 0.8rem;
        color: #64748b;
    }

    /* ---------- Respuesta táctil ---------- */

    .btn-agregar-carrito,
    .btn-detalle-producto,
    .tienda-categoria-link,
    .producto-card,
    .btn-share-header {
        touch-action: manipulation;
    }

    .btn-agregar-carrito:active,
    .btn-detalle-producto:active,
    .tienda-categoria-link:active,
    .btn-share-header:active {
        transform: scale(0.97);
        transition-duration: 90ms;
    }
}

/*
 * "Vuelve a pedir": su menú de categorías (.vuelve-pedir-menu-desktop)
 * está en el HTML pero oculto en teléfonos (tienda.css) -sin esto,
 * "Ver carrito" y el footer reservaban lugar para una barra de
 * categorías que no se ve-.
 */
@media (max-width: 767px) {
    .vuelve-pedir-menu-desktop ~ .app-cartbar {
        bottom: 12px;
    }

    body.has-app-cartbar .vuelve-pedir-menu-desktop ~ .tienda-footer {
        padding-bottom: 76px;
    }

    body:not(.has-app-cartbar) .vuelve-pedir-menu-desktop ~ .tienda-footer {
        padding-bottom: 0;
    }
}

/*
 * Pantallas táctiles: los "levantar al pasar el mouse" de tienda.css
 * se quedan pegados después de tocar -se anulan acá sin tocar las
 * reglas originales, que siguen valiendo en PC-.
 */
@media (hover: none) {
    .mobile-menu-btn:hover,
    .btn-agregar-carrito:hover,
    .tienda-categoria-link:hover,
    .vuelve-pedir-floating:hover {
        transform: none;
    }

    .btn-agregar-carrito:active,
    .tienda-categoria-link:active {
        transform: scale(0.97);
    }
}

/* Tiempo de entrega del producto ("Listo en ~20 min", "Entrega en
   1 día", "Por encargo · 3 días"): etiqueta compacta bajo el nombre. */
.producto-tiempo {
    margin: 4px 0 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.3;
    color: #64748b;
}

.producto-tiempo::before {
    content: "";
    width: 12px;
    height: 12px;
    flex: 0 0 auto;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* En el detalle: etiqueta compacta con el reloj, no texto suelto. */
.producto-tiempo--detalle {
    align-self: flex-start;
    width: fit-content;
    margin: 8px 0 4px;
    padding: 6px 10px;
    gap: 6px;
    border-radius: 4px;
    background: #f1f5f9;
    color: #0f172a;
    font-size: 0.82rem;
}

.producto-tiempo--detalle::before {
    width: 14px;
    height: 14px;
    color: #12a150;
    background: #12a150;
}

/* Entrega estimada del carrito ("Lo recibirás mañana, jueves 8 de
   octubre"), encima del botón de compra: fila con el reloj en un
   recuadro verde suave, integrada al resumen del carrito (antes era
   una caja de aviso verde con línea a la izquierda). */
.cart-entrega {
    margin: 6px 0 12px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    background: #ffffff;
}

.cart-entrega[hidden],
.cart-entrega__nota[hidden] {
    display: none;
}

.cart-entrega__icono {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    background: #ecfdf3;
    color: #12a150;
}

.cart-entrega__icono svg {
    width: 20px;
    height: 20px;
}

.cart-entrega__textos {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.cart-entrega__texto {
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.3;
    color: #0f172a;
}

.cart-entrega__nota {
    font-size: 0.78rem;
    line-height: 1.3;
    color: #667085;
}


/* ==========================================================
   "Quedan N" (urgencia real: solo con inventario y pocas unidades)
   ========================================================== */

.producto-quedan {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 4px 0 0;
    font-size: 0.78rem;
    font-weight: 700;
    color: #c2410c;
}

.producto-quedan::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    animation: producto-quedan-pulso 1.6s ease-in-out infinite;
}

.producto-quedan[hidden] {
    display: none;
}

.producto-quedan--detalle {
    font-size: 0.9rem;
}

@keyframes producto-quedan-pulso {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

/* ==========================================================
   Avisos de compras y calificaciones recientes (js/avisos/)
   Abajo a la izquierda, chico; nunca encima del carrito abierto.
   ========================================================== */

.tienda-aviso {
    position: fixed;
    left: 12px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 84px);
    z-index: 900;
    display: flex;
    align-items: stretch;
    width: min(330px, calc(100vw - 24px));
    overflow: hidden;
    border-radius: 4px;
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.18);
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.24s ease, transform 0.24s ease;
}

.tienda-aviso::before {
    content: "";
    flex-shrink: 0;
    width: 3px;
    background: linear-gradient(180deg, #2f7cf6, #53d189);
}

.tienda-aviso[hidden] {
    display: none;
}

.tienda-aviso.is-visible {
    opacity: 1;
    transform: none;
}

.tienda-aviso__cuerpo {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    padding: 10px 4px 10px 10px;
    color: inherit;
    text-decoration: none;
}

.tienda-aviso__imagen {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 4px;
    object-fit: cover;
    background: #f1f5f9;
}

.tienda-aviso__imagen--letra {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    color: #64748b;
}

.tienda-aviso__estrellas {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 4px;
    background: #fef3c7;
    color: #f59e0b;
}

.tienda-aviso__estrellas svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.tienda-aviso__texto {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.tienda-aviso__titulo {
    font-size: 0.78rem;
    font-weight: 600;
    color: #64748b;
}

.tienda-aviso__detalle {
    overflow: hidden;
    font-size: 0.9rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tienda-aviso__detalle--estrellas {
    letter-spacing: 1px;
    color: #f59e0b;
}

.tienda-aviso__cerrar {
    display: inline-flex;
    align-items: flex-start;
    justify-content: center;
    flex-shrink: 0;
    width: 34px;
    padding-top: 8px;
    border: 0;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
}

.tienda-aviso__cerrar svg {
    width: 16px;
    height: 16px;
}

@media (min-width: 769px) {
    .tienda-aviso {
        left: 20px;
        bottom: 20px;
    }
}

/*
 * Instalar la tienda como app (js/ui/instalar-app.js).
 * Aviso flotante arriba -abajo están el carrito y el "Pedir ahora"-,
 * desde la segunda visita y con X para cerrarlo.
 */
.app-instalar-aviso {
    position: fixed;
    top: calc(12px + env(safe-area-inset-top));
    left: 50%;
    z-index: 1580;
    display: flex;
    align-items: center;
    gap: 12px;
    width: min(calc(100vw - 24px), 420px);
    padding: 10px 8px 10px 10px;
    border: 1px solid #e2e8f0;
    border-left: 3px solid var(--tienda-color, #0b1220);
    border-radius: 4px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.16);
    transform: translate(-50%, calc(-100% - 24px));
    opacity: 0;
    transition:
        transform 0.26s cubic-bezier(0.2, 0.8, 0.2, 1),
        opacity 0.2s ease;
}

.app-instalar-aviso.is-visible {
    transform: translate(-50%, 0);
    opacity: 1;
}

.app-instalar-aviso__icono {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border: 1px solid #f1f5f9;
    border-radius: 4px;
    object-fit: cover;
}

.app-instalar-aviso__texto {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.app-instalar-aviso__texto strong {
    overflow: hidden;
    color: #0b1220;
    font-size: 0.92rem;
    font-weight: 800;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.app-instalar-aviso__texto small {
    color: #64748b;
    font-size: 0.78rem;
}

.app-instalar-aviso__boton {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 0 14px;
    border: 0;
    border-radius: 4px;
    background: var(--tienda-color, #0b1220);
    color: var(--tienda-color-texto, #ffffff);
    font: inherit;
    font-size: 0.86rem;
    font-weight: 700;
    cursor: pointer;
    touch-action: manipulation;
}

.app-instalar-aviso__cerrar {
    flex: 0 0 auto;
    width: 32px;
    height: 38px;
    padding: 0;
    border: 0;
    background: none;
    color: #94a3b8;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
}

/* Instrucciones en iPhone: misma hoja que "Compartir". */
.app-instalar-ios__pasos {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 6px 0 4px;
    padding: 0;
    list-style: none;
}

.app-instalar-ios__pasos li {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #0b1220;
    font-size: 0.93rem;
    line-height: 1.4;
}

.app-instalar-ios__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    background: #f1f5f9;
    font-size: 0.85rem;
    font-weight: 800;
}

.app-instalar-ios__icono {
    width: 18px;
    height: 18px;
    vertical-align: -3px;
    color: #2f7cf6;
}


/*
 * "¿Tienes alguna pregunta?" del detalle de producto
 * (templates/tienda/_pregunta_producto.html, js/ui/pregunta-producto.js).
 * Botón negro de Somos Emprende -no el color de la tienda- para que no
 * compita con "Agregar al carrito"; la hoja es la de "Compartir".
 */
.pregunta-producto {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #eef2f6;
}

.pregunta-producto__texto {
    margin: 0;
    color: #475569;
    font-size: 0.88rem;
    line-height: 1.45;
}

.pregunta-producto__boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    padding: 0 16px;
    border: 0;
    border-radius: 4px;
    background: #0b1220;
    color: #ffffff;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: background-color 0.18s ease;
}

.pregunta-producto__boton:active {
    background: #1e293b;
}

@media (hover: hover) {
    .pregunta-producto__boton:hover {
        background: #1e293b;
    }
}

.pregunta-sheet__panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pregunta-sheet__panel .share-sheet__header {
    align-items: flex-start;
    margin-bottom: 0;
}

.pregunta-sheet__ayuda {
    color: #64748b;
    font-size: 0.86rem;
    line-height: 1.4;
}

.pregunta-sheet__campo {
    width: 100%;
    min-height: 110px;
    padding: 12px;
    border: 1px solid #d0d5dd;
    border-radius: 4px;
    background: #ffffff;
    color: #0b1220;
    font: inherit;
    /* 16px: menos que eso y el iPhone agranda la página al escribir. */
    font-size: 16px;
    line-height: 1.4;
    resize: vertical;
    box-sizing: border-box;
}

.pregunta-sheet__campo:focus {
    outline: none;
    border-color: #0b1220;
    box-shadow: 0 0 0 3px rgba(11, 18, 32, 0.12);
}

/*
 * Redes sociales del pie (templates/tienda/_redes_footer.html,
 * js/ui/redes-footer.js) -a pedido del usuario: del color de los
 * botones de la tienda, con movimiento-. Aparecen una tras otra al
 * llegar al pie (.is-animable -> .is-visible, retraso por --orden), dan
 * un saltito al tocarlas y suben un poco con el mouse.
 */
.tienda-redes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
}

.tienda-redes__enlace {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 4px;
    background: var(--tienda-color, #0b1220);
    color: var(--tienda-color-texto, #ffffff);
    box-shadow: 0 6px 16px rgba(11, 18, 32, 0.16);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s ease;
}

.tienda-redes__enlace svg {
    width: 22px;
    height: 22px;
}

.tienda-redes__enlace:active {
    transform: scale(0.88);
}

.tienda-redes__enlace:focus-visible {
    outline: 2px solid var(--tienda-color, #0b1220);
    outline-offset: 3px;
}

@media (hover: hover) {
    .tienda-redes__enlace:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 22px rgba(11, 18, 32, 0.22);
    }
}

.tienda-redes.is-animable li {
    opacity: 0;
    transform: translateY(14px) scale(0.8);
}

.tienda-redes.is-visible li {
    animation: tienda-redes-entrada 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    animation-delay: calc(var(--orden, 0) * 90ms);
}

@keyframes tienda-redes-entrada {
    0% {
        opacity: 0;
        transform: translateY(14px) scale(0.8);
    }

    60% {
        opacity: 1;
        transform: translateY(-4px) scale(1.06);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .tienda-redes.is-animable li,
    .tienda-redes.is-visible li {
        opacity: 1;
        transform: none;
        animation: none;
    }

    .tienda-redes__enlace,
    .tienda-redes__enlace:hover,
    .tienda-redes__enlace:active {
        transform: none;
        transition: none;
    }
}