/* 
   ComPRO | Apple-Inspired Mobile Design System
   Minimalist, Premium, High-Contrast UX
*/

/* La tipografía vive en tipografia.css y se enlaza desde cada página con su
 * propio <link>. Aquí había un @import a fonts.googleapis.com: se quitó porque
 * un @import obliga al navegador a bajar y analizar ESTA hoja antes de saber
 * siquiera que existe una fuente que pedir. */

/* Texto solo para lectores de pantalla.
 *
 * Hace falta para poner <label> en formularios que por diseño solo llevan
 * placeholder: el placeholder desaparece al escribir y no sirve como nombre
 * accesible. Esto etiqueta el campo sin cambiar ni un píxel.
 *
 * No se usa display:none ni visibility:hidden a propósito: las dos sacan al
 * elemento del árbol de accesibilidad y entonces el lector tampoco lo lee.
 */
.solo-lectores {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

:root {
    --apple-blue: #0071e3;
    --apple-black: #1d1d1f;
    --apple-gray-bg: #f5f5f7;
    --apple-white: #ffffff;
    --apple-text-sec: #86868b;
    --apple-border: #d2d2d7;
    --header-height: 70px;
    --nav-height: 65px;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --border-radius: 18px;
    /* Mobile-first: touch targets de 44px (Apple HIG / WCAG 2.5.5).
       Solo se compactan cuando hay ratón de verdad (hover+pointer fine). */
    --tap-size: 44px;
    --tap-font: 16px; /* <16px en inputs provoca auto-zoom en iOS Safari */

    /* ── Pila de botones flotantes ───────────────────────────────────────
     *
     * Los tres controles que flotan sobre la tienda viven en ficheros
     * distintos —la barra de edición y el selector de perfil aquí, el botón
     * del asistente en asistente.css— y ninguno sabía de la existencia de los
     * otros. Cada uno se colocaba por su cuenta y se pisaban:
     *
     *   - la barra de edición ocupa de nav+18 a nav+64 y el asistente
     *     empezaba en nav+46, los dos anclados a la derecha: 18 px encima;
     *   - el selector de perfil estaba a la izquierda y en una pantalla de
     *     móvil las tres pastillas de edición llegaban hasta él.
     *
     * Y se ve justo en el peor caso, que no es raro: un PROVEEDOR también es
     * cliente, así que ve la tienda entera Y su barra de edición. El admin,
     * además, el selector de perfil.
     *
     * Ahora los tres se apilan en una única columna a la derecha, de abajo
     * arriba, y cada uno calcula su hueco a partir de estas dos medidas. El
     * que no le toca a tu rol no ocupa sitio: el hueco lo cede al de arriba.
     */
    --pila-lado: 16px;                              /* margen derecho */
    --pila-base: calc(var(--nav-height) + 18px);    /* despegue sobre la nav */
    --pila-hueco: 12px;                             /* separación entre controles */
}

@media (hover: hover) and (pointer: fine) {
    :root {
        --tap-size: 30px;
        --tap-font: 13px;
    }
}

* { 
    margin: 0; padding: 0; box-sizing: border-box; 
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    -webkit-tap-highlight-color: transparent;
}

body {
    background-color: var(--apple-gray-bg);
    color: var(--apple-black);
    overflow-x: hidden;
    line-height: 1.47;
    letter-spacing: -0.022em;
}

/* --- MODO APP (solo táctil): sin pinch-zoom, sin doble-tap zoom y sin
   rebote/pull-to-refresh. El zoom de escritorio (Ctrl +/−) queda intacto.
   ⚠ Accesibilidad (WCAG 1.4.4): al bloquear el zoom, el texto base debe ser
   legible (16px en inputs táctiles vía --tap-font) y los touch targets ≥44px
   (--tap-size). No endurecer más sin revisar usuarios con baja visión. --- */
html {
    -webkit-text-size-adjust: 100%; /* iOS: no reescalar texto al rotar */
}

@media (hover: none) and (pointer: coarse) {
    body {
        touch-action: pan-x pan-y; /* permite scroll, bloquea pinch y doble-tap zoom */
        overscroll-behavior-y: none; /* sin rebote ni pull-to-refresh accidental */
    }
}

/* --- HEADER (APPLE STYLE) --- */
/* Cabecera translúcida, al estilo de Prime Video: el contenido se ve pasar
   por debajo en vez de chocar contra una banda opaca.
   El truco es que la opacidad NO es fija: arriba del todo la barra casi
   desaparece, y al bajar se va cerrando para que el texto siga legible sobre
   las fotos de producto. Esa transición es lo que da la sensación de que la
   barra flota sobre la página en lugar de estar pegada encima. */
.main-header {
    position: sticky; top: 0; left: 0; width: 100%; height: 70px;
    z-index: 1000; display: flex; align-items: center; justify-content: space-between;
    /* `sticky` ya sirve de marco de referencia para la píldora del proveedor,
       que va centrada en posición absoluta y no en el reparto del flex. */
    padding: 0 22px;

    background: rgba(255, 255, 255, .72);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    /* Una línea de un píxel en vez de la sombra doble: con desenfoque, una
       sombra marcada delata el borde y rompe el efecto de cristal. */
    border-bottom: 1px solid rgba(0, 0, 0, .06);
    box-shadow: none;
    transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}

/* Con la página desplazada se cierra un poco y aparece una sombra mínima:
   es lo que separa la barra del contenido cuando hay algo debajo. */
.main-header.es-desplazada {
    background: rgba(255, 255, 255, .88);
    border-bottom-color: rgba(0, 0, 0, .09);
    box-shadow: 0 1px 12px rgba(0, 0, 0, .06);
}

/* Sin soporte de backdrop-filter (Firefox con la opción desactivada, motores
   viejos) la barra se queda opaca: translúcida sin desenfoque es ilegible
   sobre las fotos del catálogo. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .main-header { background: #fff; }
    .main-header.es-desplazada { background: #fff; }
}


/* Botón Regístrate de la cabecera: solo en modo invitado */
.btn-header-register {
    display: none;
    padding: 9px 18px;
    border: none;
    border-radius: 20px;
    background: var(--apple-blue, #0071e3);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s;
}
.btn-header-register:hover { background: #005ec4; }
body.guest-mode .btn-header-register { display: inline-flex; }

.logo {
    font-size: 19px; font-weight: 700; letter-spacing: -0.5px;
    cursor: pointer;
    padding: 8px 16px;
}

/* Logo "Com|PRO": Com en negro, PRO en blanco sobre pastilla azul */
.logo-com { color: var(--apple-black); }

.logo-pro {
    background-color: var(--apple-blue);
    color: #fff;
    padding: 1px 5px;
    border-radius: 6px;
    margin-left: 1px;
    display: inline-block;
}

/* La píldora del proveedor va centrada respecto a la PANTALLA, no repartida
   por el flex.
   
   Con `justify-content: space-between` su posición dependía de lo que midieran
   el logo (122px) y el switcher de restaurante (183px): al no ser iguales,
   quedaba 192px a la izquierda del centro. Y como el switcher cambia de ancho
   con el nombre del restaurante, la píldora se movía al cambiar de local.
   
   Sacarla del flujo la ancla al centro real y la deja quieta pase lo que pase
   a los lados. El `max-width` en `calc()` reserva sitio para el bloque más
   ancho de los dos extremos, para que al estrecharse la ventana la píldora se
   encoja antes de llegar a tocarlos. */
.distributor-info {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    max-width: calc(100% - 520px);

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 50px;
    cursor: pointer;
    /* Mismo lenguaje que la barra de búsqueda: gris de base, azul al interactuar */
    background-color: #f3f3f4;
    border: 2px solid transparent;
    transition: .3s ease;
}

.distributor-info:hover {
    background-color: #fff;
    border-color: rgba(0, 113, 227, 0.4);
    box-shadow: 0 0 0 4px rgb(0 113 227 / 10%);
}

.viewing-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--apple-text-sec);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.distributor-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--apple-black);
}

.change-icon {
    width: 14px;
    height: 14px;
    color: var(--apple-text-sec);
    margin-left: 2px;
    transition: transform 0.4s ease;
}

.distributor-info:hover .change-icon {
    transform: rotate(180deg);
    color: var(--apple-blue);
}

/* En pantallas estrechas la píldora vuelve al reparto normal del flex.
   Centrada en absoluto necesita reservar hueco a los dos lados, y por debajo
   de 900px ese hueco ya no existe: acabaría montándose sobre el logo o sobre
   el avatar. Ahí es mejor que los tres bloques se repartan lo que hay. */
@media (max-width: 900px) {
    .distributor-info {
        position: static;
        transform: none;
        max-width: fit-content;
        margin: 0 auto;
        min-width: 0;
    }
}

@media (max-width: 480px) {
    .viewing-label { display: none; }
    .distributor-info { padding: 5px 10px; }
}

#provider-logo-header img {
    height: 40px; /* Aumentado de 20px */
    width: auto;
    object-fit: contain;
    opacity: 1; /* Más visible */
    cursor: pointer;
    transition: transform 0.2s ease;
}

#provider-logo-header img:active {
    transform: scale(0.9);
}

/* --- APP CONTAINER --- */
.app-container {
    padding-top: 0;
    padding-bottom: calc(var(--nav-height) + 20px);
    min-height: 100vh;
}

.app-view {
    display: none;
    animation: fadeIn 0.35s ease;
    overflow: visible; /* Asegurar que las sombras no se corten */
}

.app-view.active {
    display: block;
}

/* Solo opacidad. NO se puede animar `transform` aquí, y es la causa del salto
   del botón "Realizar pedido":
 *
 * un elemento con `transform` se convierte en el bloque contenedor de sus
 * descendientes `position: fixed`. El botón vive dentro de #view-cart, que es
 * un .app-view, así que durante los 400 ms de la animación quedaba anclado a
 * la vista —que es tan alta como la lista de productos— en vez de a la
 * ventana. Al terminar la animación el transform desaparecía, el botón volvía
 * a anclarse a la ventana y daba un salto de 89 px hacia abajo. Medido: top
 * 471 durante la animación, 560 al acabar, con la misma altura y el mismo
 * `bottom: 100px`.
 *
 * El desplazamiento de 10 px que se pierde no se echa en falta en un cambio de
 * pestaña completo, y a cambio ningún elemento fijo vuelve a saltar. */
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* --- PRODUCT GRID (STRICT SYMMETRY & SMALLER SCALE) --- */
.product-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* LOCKS COLUMNS TO EXACT 50% */
    gap: 12px;
    padding: 8px 12px 12px 12px;
    width: 100%;
    box-sizing: border-box;
}

/* Hueco al final para que la pila de flotantes no se coma la última fila.
   Sin esto, el "Añadir" de las dos últimas fichas queda debajo de la barra de
   edición y no se puede pulsar: la ficha se ve, pero el botón no responde. */
body.con-barra-edicion .product-grid {
    /* Sitio para las dos filas de pastillas del caso peor (móvil estrecho).
       Sin esto, el "Añadir" de las últimas fichas queda debajo de la barra y
       no se puede pulsar: la ficha se ve, pero el botón no responde. */
    padding-bottom: 112px;
}

@media (min-width: 768px) {
    .product-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }
}

/* Catálogo en pantallas grandes.
   
   Aquí hay dos errores fáciles y opuestos. Con `width: 100%` y columnas de
   180px, un monitor de 2000px daba trece columnas de fichas diminutas pegadas
   a los bordes. Pero un `max-width` fijo y estrecho es igual de malo: la
   rejilla se congela y el resto de la pantalla se desperdicia —con un tope de
   1360px, un monitor de 1990px usaba el 68% y uno de 2560px, el 53%.
   
   La regla es proporcional: se ocupa el 92% del ancho hasta un tope de
   1920px. Ese tope existe porque más allá las filas se vuelven incómodas de
   barrer con la vista, no por ahorrar espacio. El mínimo por ficha (230px)
   deja que el espacio que sobra se reparta entre MÁS columnas, que es lo que
   quiere quien revisa un catálogo de cientos de referencias, y no en fichas
   cada vez más grandes. */
@media (min-width: 1180px) {
    .product-grid {
        width: min(92vw, 1920px);
        margin-inline: auto;
        grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
        gap: 16px;
    }
}

.product-card { 
    background: var(--apple-white); 
    border-radius: 18px;
    padding: 12px;
    display: flex; 
    flex-direction: column;
    cursor: pointer;
    transition: var(--transition);
    border: 1px solid rgba(0,0,0,0.03);
    height: 100%;
    width: 100%; 
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
}

.product-card:hover {
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.product-card:active {
    transform: scale(0.97);
    background: #fdfdfd;
    opacity: 0.9;
}

.card-img-wrapper {
    width: 100%;
    height: 140px; /* Altura fija para evitar saltos */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    overflow: hidden;
    border-radius: 12px;
    background-color: #fbfbfd;
    position: relative;
    padding: 10px;
    flex-shrink: 0;
}

.card-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: var(--transition);
}

.card-data { 
    display: flex; 
    flex-direction: column; 
    flex-grow: 1;
    min-width: 0;
}

.card-brand { 
    font-size: 10px;
    font-weight: 500; 
    color: var(--apple-text-sec);
    text-transform: uppercase; 
    margin-bottom: 4px;
    letter-spacing: 0.05em;
}

.card-name { 
    font-size: 14px;
    font-weight: 600; 
    line-height: 1.3;
    color: var(--apple-black);
    height: 2.6em; /* Altura fija para 2 líneas */
    overflow: hidden; 
    display: -webkit-box;
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical;
    margin-bottom: 4px;
}

.card-desc {
    font-size: 11px;
    color: var(--apple-text-sec);
    height: 2.6em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-bottom: 12px;
    line-height: 1.3;
}

.card-footer {
    display: flex;
    flex-direction: column;
    margin-top: auto;
    gap: 8px;
}

.card-price {
    font-size: 15px;
    font-weight: 700;
    color: var(--apple-black);
}

.card-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    flex-wrap: wrap; /* fallback sin container queries: "Añadir" baja de línea en vez de recortar el stepper */
}

/* La tarjeta decide por su propio ancho (no por el viewport): en grids con
   columnas estrechas (tablet/desktop) las acciones se apilan igual que en móvil,
   así todas las tarjetas miden lo mismo aunque el botón diga "✓ Añadido" */
.product-card {
    container-type: inline-size;
}

@container (max-width: 240px) {
    .card-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }

    .qty-control,
    .btn-add-card,
    .btn-consult-card {
        width: 100%;
    }
}

.btn-consult-card {
    background: #ffffff;
    color: var(--apple-blue);
    border: 1.5px solid var(--apple-blue);
    border-radius: calc(var(--tap-size) / 2);
    padding: 0 12px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    height: var(--tap-size);
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    transition: var(--transition);
    flex-shrink: 0;
}

.btn-consult-card:hover {
    background: #e8f0ff;
    border-color: var(--apple-blue);
}

.qty-control {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f2f2f7;
    border-radius: calc(var(--tap-size) / 2);
    height: var(--tap-size);
    overflow: hidden;
    flex: 1 1 auto;
    /* (−) + nº + (+): nunca encoger por debajo del contenido */
    min-width: calc(var(--tap-size) * 2 + 24px);
}

.qty-control .qty-btn {
    background: var(--apple-blue);
    color: #fff;
    border: none;
    width: var(--tap-size);
    height: var(--tap-size);
    min-width: var(--tap-size);
    min-height: var(--tap-size);
    font-size: 16px;
    touch-action: manipulation;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s ease;
    line-height: 1;
}

.qty-control .qty-btn:active {
    background: #005fb8;
    transform: scale(0.93);
}

.qty-control .qty-input {
    width: 100%;
    min-width: 24px;
    max-width: 42px;
    flex: 1;
    text-align: center;
    border: none;
    background: transparent;
    font-size: var(--tap-font);
    font-weight: 700;
    color: var(--apple-black);
    outline: none;
    -moz-appearance: textfield;
    padding: 0;
}

.qty-control .qty-input::-webkit-outer-spin-button,
.qty-control .qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.btn-add-card {
    background: var(--apple-blue);
    color: #fff;
    border: 1.5px solid var(--apple-blue);
    border-radius: calc(var(--tap-size) / 2);
    flex: 1 1 auto;
    padding: 0 14px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    height: var(--tap-size);
    min-height: var(--tap-size);
    touch-action: manipulation;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.15s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.btn-add-card:hover {
    background: #005ec4;
    border-color: #005ec4;
}

.btn-add-card:active {
    transform: scale(0.95);
}

.btn-add-card.btn-added {
    background: #34c759;
    border-color: #34c759;
    color: #fff;
    cursor: default;
}

.btn-add-card.btn-added:hover {
    background: #2ab24e;
    border-color: #2ab24e;
}

/* Favorite Button on Card */
.fav-btn-card {
    position: absolute; top: 6px; right: 6px;
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: none; border-radius: 50%;
    /* Área táctil estándar de la app: 44px en táctil, 30px con ratón */
    width: var(--tap-size); height: var(--tap-size);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; z-index: 5;
    color: #86868b;
    transition: var(--transition);
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.fav-btn-card svg {
    width: 18px;
    height: 18px;
}

.fav-btn-card.active {
    color: #ff3b30;
    background: #fff;
}

/* --- FILTER + SORT ROW (píldora flotante, como la bottom-nav) --- */
.filter-sort-row {
    display: flex;
    align-items: center;
    position: sticky;
    top: 86px; /* header 70px + 16px de aire al quedar fija */
    z-index: 150;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 35px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08), 0 14px 38px rgba(0, 0, 0, 0.16);
    padding: 4px 12px 4px 6px;
    width: fit-content;
    max-width: 96%;
    margin: 20px auto 10px auto;
    box-sizing: border-box;
    gap: 4px;
}

.filter-sort-row .category-scroll-container {
    position: static;
    top: auto;
    z-index: auto;
    flex: 0 1 auto;
    min-width: 0;
    margin: 0;
    padding: 4px 8px;
    max-width: none;
    width: auto;
    background: transparent;
    box-shadow: none;
    border: none;
    border-radius: 0;
    justify-content: flex-start; /* evita que el primer chip quede cortado al hacer overflow */
}

.filter-sort-row .sort-filter-bar {
    position: static;
    top: auto;
    z-index: auto;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    width: auto;
}

.filter-sort-row .sort-dropdown {
    padding: 4px 10px;
}

.filter-sort-row .sort-dropdown label {
    display: none;
}

/* --- CATEGORY SCROLL --- */
.category-scroll-container {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-x: auto;
    padding: 8px 16px;
    gap: 8px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    position: sticky;
    top: 70px;
    background: #ffffff;
    z-index: 150;
    max-width: 94%;
    width: fit-content;
    margin: 12px auto 4px auto;
    border-radius: 50px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.category-scroll-container::-webkit-scrollbar { display: none; }

.chip {
    padding: 5px 14px;
    background: var(--apple-white);
    border: 1px solid var(--apple-border);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: var(--transition);
    flex-shrink: 0;
}

.chip.active {
    background: var(--apple-black);
    color: #fff;
    border-color: var(--apple-black);
}

.chip-separator {
    width: 1px;
    height: 24px;
    background: var(--apple-border);
    flex-shrink: 0;
    margin: 0 4px;
}

.chip-marca {
    background: #f0f5ff;
    border-color: #c8d8f0;
    color: #1d1d1f;
    font-size: 12px;
    padding: 7px 14px;
}

.chip-marca.active {
    background: var(--apple-blue, #0071e3);
    color: #fff;
    border-color: var(--apple-blue, #0071e3);
}

/* --- BOTTOM NAV (MODERN APPLE) --- */
.bottom-nav {
    position: fixed; bottom: 0; left: 0; width: 100%; height: var(--nav-height);
    background: rgba(255, 255, 255, .82);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-top: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 -1px 12px rgba(0,0,0,.06);
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 6000; /* SUPERIOR AL MODAL (5000) */
    padding-bottom: 10px; /* Space for home indicator on mobile */
    transition: var(--transition);
}

@media (min-width: 768px) {
    .bottom-nav {
        width: 500px;
        left: 50%;
        transform: translateX(-50%);
        bottom: 25px;
        border-radius: 35px;
        border: 1px solid rgba(0,0,0,0.08);
        box-shadow: 0 6px 14px rgba(0,0,0,0.10), 0 20px 48px rgba(0,0,0,0.20);
        padding-bottom: 0;
        padding-left: 10px;
        padding-right: 10px;
        height: 70px;
    }
}

.nav-item {
    display: flex; flex-direction: column; align-items: center;
    color: #86868b; text-decoration: none; font-size: 10px; gap: 4px; 
    border: none; background: none; flex: 1;
    transition: color 0.2s;
    cursor: pointer;
}

.nav-item.active { color: var(--apple-blue); }
.nav-item svg { width: 22px; height: 22px; stroke-width: 2.2; }

/* --- BAG (CART) & FAVORITES VIEW --- */
.view-title {
    font-size: 28px;
    font-weight: 700;
    padding: 20px 22px 10px 22px;
    letter-spacing: -0.5px;
}

.cart-items-scroll {
    overflow-y: auto;
    max-height: calc(100vh - 240px);
    padding-bottom: 220px; /* Suficiente espacio para el botón fijo */
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    scrollbar-width: none; /* Para Firefox */
}

/* Ocultar barra de scroll para Chrome, Edge y Safari */
.cart-items-scroll::-webkit-scrollbar {
    display: none;
}

/* --- ACCESO A LA FACTURACIÓN DESDE EDITAR PERFIL --- */
/* Un bloque aparte, no un campo más del formulario: lo que hay detrás son los
   datos del restaurante, no los de la persona, y mezclarlos en la misma lista
   haría pensar que se guardan con el mismo botón. */
.perfil-facturacion {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--apple-border);
}
.perfil-facturacion > div { flex: 1 1 180px; }
.perfil-facturacion strong { display: block; font-size: 14px; font-weight: 700; color: var(--apple-black); }
.perfil-facturacion p { margin: 3px 0 0; font-size: 12.5px; line-height: 1.4; color: #86868b; }
.perfil-facturacion .btn-apple-secondary { margin: 0; width: auto; flex-shrink: 0; }

/* --- FILTRO DE PROVEEDOR DEL CARRITO --- */
/* Reunión del 12/08: repasar un pedido de 50 referencias repartidas entre
   cuatro proveedores obligaba a recorrer la lista entera. Estas fichas acotan
   la vista a un proveedor —y con ella el pedido—, así que llevan el logo: es
   lo que se reconoce de un vistazo, más que el nombre. */
.cart-filtro {
    display: flex;
    gap: 8px;
    width: 100%;
    max-width: 600px;
    margin: 0 auto 4px;
    padding: 4px 16px 12px;
    overflow-x: auto;
    scrollbar-width: none;
}
.cart-filtro::-webkit-scrollbar { display: none; }
.cart-filtro[hidden] { display: none; }

/* La fila de fichas come alto: sin esto el final de la lista se metía debajo
   del botón de pedir. Si el navegador no entiende :has() solo sobra scroll. */
#view-cart:has(#cart-filtro-proveedor:not([hidden])) .cart-items-scroll {
    max-height: calc(100vh - 292px);
}

.cart-chip {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    padding: 6px 12px 6px 8px;
    border: 1px solid var(--apple-border);
    border-radius: 20px;
    background: var(--apple-white);
    color: var(--apple-black);
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}
/* "Todos" no tiene logo; sin este relleno queda descuadrado con los demás. */
.cart-chip:first-child { padding-left: 14px; }

.cart-chip img {
    width: 20px; height: 20px;
    object-fit: contain;
    border-radius: 5px;
    background: #fff;
}

.cart-chip-n {
    padding: 1px 7px;
    border-radius: 999px;
    background: #f0f0f2;
    color: #6e6e73;
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.cart-chip.es-activo {
    background: var(--apple-black);
    border-color: var(--apple-black);
    color: #fff;
}
.cart-chip.es-activo .cart-chip-n { background: rgba(255, 255, 255, .22); color: #fff; }

@media (hover: hover) and (pointer: fine) {
    .cart-chip:hover { border-color: #b8b8bd; }
    .cart-chip.es-activo:hover { border-color: var(--apple-black); }
}

.bag-item {
    background: var(--apple-white);
    margin: 0 16px 8px 16px;
    padding: 14px;
    border-radius: 14px;
    display: flex;
    gap: 12px;
    align-items: center;
    position: relative;
    border: 1px solid rgba(0,0,0,0.03);
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}

.bag-item img {
    width: 84px; height: 84px;
    object-fit: contain;
    background: #fbfbfd;
    border-radius: 12px;
    flex-shrink: 0;
}

.bag-item-info { 
    flex: 1; 
    min-width: 0; 
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.bag-item-name {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.2px;
    line-height: 1.25;
    margin-bottom: 2px;
    color: var(--apple-black);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bag-item-ref {
    font-size: 11px;
    color: var(--apple-text-sec);
    font-weight: 500;
    margin-bottom: 6px;
}

/* Columna derecha de la línea (patrón e-commerce: cantidad y precio juntos
   a la derecha, para que al cambiar cantidad se vea moverse el total al lado) */
.bag-item-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 8px;
    flex-shrink: 0;
    padding-right: 20px; /* aire para no chocar con la ✕ de eliminar */
}

.bag-item-right .qty-stepper { margin-top: 0; }

.bag-item-total {
    font-size: 17px;
    font-weight: 700;
    color: var(--apple-black);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* En pantallas estrechas la columna derecha baja a una fila completa:
   stepper a la izquierda, total a la derecha */
@media (max-width: 560px) {
    .bag-item { flex-wrap: wrap; }
    .bag-item-right {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding-right: 0;
        margin-top: 4px;
    }
}

.remove-item-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background: #f2f2f7;
    border: none;
    font-size: 14px;
    color: #86868b;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
}

.remove-item-btn:hover {
    background: #e5e5ea;
    color: #ff3b30;
}

/* Área táctil ampliada a ~44px sin agrandar la ✕ visualmente */
.remove-item-btn::before {
    content: '';
    position: absolute;
    inset: -10px;
}

.cart-summary {
    display: none !important;
}

.bag-footer {
    position: fixed; 
    bottom: 100px; /* Justo encima de la nav flotante */
    left: 0; 
    right: 0;
    width: 100%; 
    padding: 0 20px;
    z-index: 7000; /* Superior a la nav (6000) */
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.bag-footer button {
    pointer-events: auto;
}

/* ── Cuándo se ve el botón de pedir ──────────────────────────────────────
 *
 * UN solo interruptor, y no toca `display`.
 *
 * Antes lo controlaban tres sitios a la vez y con mecanismos distintos:
 * `switchAppTab` ponía visibility/opacity, `updateCartUI` ponía display, y esta
 * hoja lo forzaba a `display: none !important` con un diálogo abierto. Como
 * `display` no se puede animar, el botón no aparecía: SALTABA, y en un estado
 * medido en pruebas quedaba con `display:flex` en línea y `none` computado —
 * es decir, invisible sin que nada lo explicara.
 *
 * Ahora el elemento está SIEMPRE en su sitio (es `position: fixed`, así que no
 * ocupa hueco en el flujo y tenerlo montado no cuesta nada) y solo cambia la
 * opacidad, que el compositor resuelve sin recalcular el diseño. La posición es
 * la misma desde el primer fotograma.
 *
 * NO se toca `transform` aquí, y es a propósito: a partir de 768 px el botón se
 * centra con `left: 50%` + `transform: translateX(-50%)`. Una regla como
 * `.bag-footer.es-visible { transform: none }` tiene más especificidad que la
 * de la media query, así que borraba ese centrado y el botón se iba media
 * anchura a la derecha. Con dos usos distintos de `transform` sobre el mismo
 * elemento, uno de los dos pierde: se cede el de la animación, que es el
 * prescindible. */
.bag-footer {
    visibility: hidden;
    opacity: 0;
    transition: opacity .22s ease, visibility 0s linear .22s;
}
.bag-footer.es-visible {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
}

/* Con un diálogo abierto encima, el botón se aparta: flota a z-index 7000 y si
   no, se quedaba por encima de los campos de Editar Perfil. Se usa el mismo
   mecanismo que el resto, no un `display: none !important` que peleaba con el
   JS y ganaba a destiempo. */
body:has(.modal-overlay.show) .bag-footer,
body:has(.aj-overlay) .bag-footer,
body:has(.ch-overlay) .bag-footer,
body:has(.pa-overlay) .bag-footer {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    /* Sin `transform` tampoco aquí: borraría el centrado de escritorio. */
    .bag-footer { transition: opacity .01s, visibility 0s; }
}

.btn-checkout {
    background: var(--apple-blue);
    color: #fff;
    width: 90%;
    max-width: 500px;
    height: 60px;
    border-radius: 14px;
    border: none;
    font-size: 16px;
    font-weight: 600;
    box-shadow: 0 10px 25px rgba(0,113,227,0.3);
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-checkout:active {
    transform: scale(0.97);
    background: #005fb8;
}

@media (min-width: 768px) {
    .bag-footer {
        width: 500px;
        left: 50%;
        transform: translateX(-50%);
    }
}

/* --- QUANTITY SELECTORS --- */
.modal-qty-stepper {
    background-color: #f5f5f7;
    border-radius: calc(var(--tap-size) / 2 + 4px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: fit-content;
    min-width: 130px;
    padding: 4px 8px;
    margin: 0 auto;
}

.modal-qty-stepper button {
    background: transparent;
    border: none;
    font-size: 18px;
    font-weight: 600;
    color: var(--apple-black);
    cursor: pointer;
    padding: 8px 12px;
    min-width: var(--tap-size);
    min-height: var(--tap-size);
    touch-action: manipulation;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s;
}

.modal-qty-stepper button:active {
    opacity: 0.5;
}

.modal-qty-stepper input[type="number"] {
    background: transparent;
    border: none;
    width: 40px;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    color: var(--apple-black);
    -webkit-appearance: none;
    margin: 0;
    outline: none;
}

/* Hide spin buttons */
.modal-qty-stepper input::-webkit-outer-spin-button,
.modal-qty-stepper input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.modal-qty-stepper input[type=number] {
    -moz-appearance: textfield;
}

.qty-stepper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f2f2f7;
    border-radius: 26px;
    padding: 5px;
    width: 160px;
    margin-top: 10px;
    border: 1px solid rgba(0,0,0,0.05);
}

.qty-stepper button {
    width: 42px;
    height: 42px;
    border: none;
    background: #fff;
    border-radius: 50%;
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    cursor: pointer;
    color: var(--apple-black);
    transition: var(--transition);
}

.qty-stepper button:active {
    background: #e5e5ea;
    transform: scale(0.9);
}

.qty-number {
    font-size: 17px;
    font-weight: 700;
    color: var(--apple-black);
    min-width: 20px;
    text-align: center;
}


/* --- PROFILE VIEW --- */
.profile-card {
    max-width: 500px;
    margin: 30px auto;
    background: var(--apple-white);
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    padding: 4px 0;
    border: none;
}

.profile-section {
    margin: 0;
    border-radius: 0;
    overflow: hidden;
}

.profile-section:not(:last-child) {
    border-bottom: 8px solid var(--apple-gray-bg);
    margin-bottom: 0;
    border-radius: 0;
}

.logout-section {
    margin-top: 10px !important;
    border-bottom: none !important;
}

.profile-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid #f2f2f7;
    cursor: pointer;
    background: none; border-left: none; border-right: none; border-top: none;
    width: 100%; text-align: left;
    transition: var(--transition);
}

.profile-row:hover {
    background-color: #fafafa;
}

.profile-row:last-child { border-bottom: none; }
.profile-row-label { font-size: 15px; font-weight: 500; color: var(--apple-black); }
.profile-row-value { font-size: 14px; color: var(--apple-text-sec); font-weight: 500; }

/* --- MODAL (PRODUCT DETAILS) --- */
/* === LIQUID GLASS MODAL SYSTEM === */
.modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    padding-bottom: calc(var(--nav-height) + 20px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.28s ease, visibility 0.28s ease;
}

.modal-overlay.show {
    opacity: 1;
    visibility: visible;
}

.modal-wrapper {
    position: relative;
    width: 95%;
    max-width: 500px;
    height: 85vh;
    /* 100% = hueco real del overlay (ya descuenta padding + nav): el modal
       nunca puede desbordar y dejar el botón "Añadir" oculto tras la nav */
    max-height: min(800px, 100%);
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(40px) saturate(200%);
    -webkit-backdrop-filter: blur(40px) saturate(200%);
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow:
        0 2px 0 0 rgba(255,255,255,0.7) inset,
        0 32px 64px -16px rgba(0, 0, 0, 0.22),
        0 8px 24px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: scale(0.92) translateY(8px);
    transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.modal-overlay.show .modal-wrapper {
    transform: scale(1) translateY(0);
}

/* --- LA FICHA DE PRODUCTO SE ABRE SIN ANIMACIÓN ---
 *
 * El resto de modales conservan su entrada (escala con rebote y fundido del
 * fondo). Este no: la ficha de producto es lo que más se abre y se cierra en
 * toda la aplicación —un restaurante entra en veinte productos para hacer un
 * pedido— y ahí una animación que está bien la primera vez estorba las otras
 * diecinueve. Aparece y ya.
 *
 * Va por id para no tocar los demás modales, y con la misma regla en las tres
 * capas que se movían: el fondo, la caja y la foto. */
#product-modal,
#product-modal .modal-wrapper {
    transition: none;
}

#product-modal .modal-wrapper {
    transform: none;
}

/* La foto entra de golpe. Se conserva el cambio de opacidad —sin transición—
 * porque es lo que evita que al pasar de un producto a otro se vea un instante
 * la foto del anterior mientras carga la nueva. */
#product-modal .modal-img-area img {
    transition: none;
}

/* Gris plano mientras carga, en vez del brillo que recorría el hueco. */
#product-modal .modal-img-area {
    animation: none;
    background: #f2f2f7;
}

#product-modal .modal-img-area:has(img.loaded) {
    background: #fff;
}

/* Paneles de trabajo (gestión de pedidos e importador): necesitan mucho más
   ancho que un modal normal porque muestran tablas y fichas de datos */
@media (min-width: 720px) {
    #mgmt-modal .modal-wrapper,
    #import-modal .modal-wrapper {
        max-width: 920px;
        height: 90vh;
        max-height: min(940px, 100%);
    }
}
@media (min-width: 1200px) {
    #mgmt-modal .modal-wrapper { max-width: 1100px; }
}

/* Provider modal glass buttons */
#provider-modal .modal-wrapper {
    height: auto;
    max-height: 90vh;
}

#provider-modal .btn-apple-primary {
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 0 rgba(255,255,255,0.6) inset;
    color: var(--apple-black);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: var(--transition);
}

#provider-modal .btn-apple-primary:hover {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(255,255,255,0.9);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1), 0 1px 0 rgba(255,255,255,0.8) inset;
}

@media (max-width: 560px) {
    .modal-overlay {
        padding: 12px;
        padding-bottom: calc(var(--nav-height) + 12px);
    }

    .modal-wrapper {
        width: 100%;
        max-width: 100%;
    }

    #provider-modal .modal-wrapper {
        padding: 24px 16px !important;
        max-width: 100%;
    }

    #provider-list,
    #provider-list > div,
    #provider-modal .btn-apple-primary,
    #provider-modal .btn-apple-primary span {
        min-width: 0;
        max-width: 100%;
    }

    #provider-modal .btn-apple-primary {
        gap: 10px !important;
        padding: 13px 10px !important;
        font-size: 14px !important;
    }

    #provider-modal .btn-apple-primary span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* Cart provider group header */
.cart-provider-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 16px 16px 6px;
    padding: 10px 14px;
    background: rgba(255,255,255,0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.6);
    border-radius: 14px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}

.cart-provider-header img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    border-radius: 6px;
}

.cart-provider-header span:nth-child(2) {
    flex: 1;
    font-size: 13px;
    font-weight: 700;
    color: var(--apple-black);
    letter-spacing: -0.2px;
}

.cart-provider-subtotal {
    font-size: 13px;
    font-weight: 600;
    color: var(--apple-blue);
}

.close-modal {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(120, 120, 128, 0.16);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5100;
    color: #1d1d1f;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.close-modal:hover {
    background: rgba(255, 255, 255, 1);
    transform: scale(1.1);
}

.modal-content-scroll {
    overflow-y: auto;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    scrollbar-width: none; /* Firefox */
}

.modal-content-scroll::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

.modal-img-area { 
    width: 100%;
    height: 300px; 
    min-height: 300px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    border-bottom: 1px solid #f2f2f7;
    flex-shrink: 0;
}

.modal-img-area img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.modal-info-area {
    padding: 24px;
    flex-grow: 1;
}

.modal-brand {
    font-size: 12px;
    font-weight: 600;
    color: var(--apple-text-sec);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 4px;
}

.modal-name {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 8px;
    color: var(--apple-black);
}

.modal-ref {
    font-size: 13px;
    color: var(--apple-text-sec);
    margin-bottom: 16px;
}

.modal-desc {
    font-size: 15px;
    color: #48484a;
    line-height: 1.5;
    margin-bottom: 0;
}

.modal-footer {
    padding: 20px 24px 24px 24px;
    border-top: 1px solid #f2f2f7;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex-shrink: 0;
    /* Pegado al fondo del área con scroll: el botón queda siempre visible
       aunque la descripción sea larga o la pantalla baja */
    position: sticky;
    bottom: 0;
    z-index: 1;
}

/* Aclara qué hace el stepper: cada +/− = una unidad de compra */
.qty-caption {
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--apple-black);
    margin: 0 0 -4px 0;
}

.qty-caption span {
    font-weight: 400;
    color: var(--apple-text-sec);
}

@media (max-width: 380px) {
    /* En pantallas muy estrechas, la aclaración va debajo para no romper */
    .qty-caption span { display: block; font-size: 12px; }
}

.modal-action-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
}

.btn-confirm-add {
    background: var(--apple-blue);
    color: #fff;
    width: 100%;
    padding: 18px;
    border-radius: 16px;
    border: none;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: var(--transition);
    box-shadow: 0 4px 12px rgba(0, 113, 227, 0.2);
}

.btn-confirm-add:active {
    background: #005fb8;
    transform: scale(0.98);
}

/* --- SEARCH VIEW --- */
.search-container-island {
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.search-island-input {
    max-width: 600px;
    width: 85% !important;
    margin: 20px auto !important;
    background: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 50px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    padding: 18px 28px !important;
    transition: var(--transition);
    border-bottom: none; /* Override default input border if any */
}

.search-island-input:focus {
    background: rgba(255, 255, 255, 0.95) !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

#search-results-area {
    width: 100%;
    margin-top: 20px;
}

/* Toggle all providers button — remarcado permanente, a juego con el buscador */
.toggle-all-btn {
    padding: 9px 20px;
    border-radius: 20px;
    border: 2px solid rgba(0, 113, 227, 0.4);
    background: #fff;
    color: #1d1d1f;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s;
    box-shadow: 0 0 0 4px rgb(0 113 227 / 10%);
}
.toggle-all-btn:hover {
    border-color: rgba(0, 113, 227, 0.65);
    box-shadow: 0 0 0 4px rgb(0 113 227 / 16%);
}
.toggle-all-btn.active {
    background: #0071e3;
    border-color: #0071e3;
    color: #fff;
    box-shadow: 0 2px 8px rgba(0,113,227,0.3);
}

/* Order items detail (expandible) */
.order-items-detail {
    display: none;
    padding: 12px 14px 14px;
    border-top: 1px solid #f2f2f7;
}
.order-card.expanded .order-items-detail { display: block; }
.order-item-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: 13px;
    border-bottom: 1px solid rgba(0,0,0,0.04);
}
.order-item-row:last-child { border-bottom: none; }
.order-item-name { color: #1d1d1f; }
.order-item-ref { font-size: 11px; color: #aeaeb2; margin-top: 1px; }
.order-item-qty { font-weight: 700; color: #0071e3; min-width: 28px; text-align: right; }
/* Desglose de precio por unidad de compra (caja o pieza) */
.order-item-desglose {
    font-size: 11px;
    color: #636366;
    margin-top: 3px;
    font-weight: 500;
}
.order-item-orientativo {
    color: #ff9500;
    font-style: italic;
}
/* --- MODO INVITADO: sin registrar se ve todo (descripciones incluidas)
   excepto los precios, que van difuminados (clic → registrate) --- */
body.guest-mode .card-price,
body.guest-mode .card-price-offer,
body.guest-mode #modal-row-precio-kg {
    filter: blur(6px);
    user-select: none;
    -webkit-user-select: none;
    cursor: pointer;
}

.glass-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: #fff;
    z-index: 5500; /* por DEBAJO de la bottom-nav (6000): el menu sigue visible y usable */
    display: flex; flex-direction: column;
    align-items: center; justify-content: flex-start;
    padding: 40px 40px 120px; /* hueco inferior para la nav flotante */
    overflow-y: auto;
}

.auth-close-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    background: #f2f2f7;
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    font-size: 16px;
    color: #86868b;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.auth-close-btn:hover {
    background: #e5e5ea;
    color: #1d1d1f;
}

.input-apple {
    width: 100%; padding: 18px; margin-bottom: 12px;
    border-radius: 12px; border: 1px solid var(--apple-border);
    font-size: 16px; outline: none; transition: border-color 0.2s;
}

.input-apple:focus { border-color: var(--apple-blue); }

.btn-apple-primary {
    background: var(--apple-black); color: #fff;
    width: 100%; padding: 16px; border-radius: 12px;
    border: none; font-size: 16px; font-weight: 600; margin-top: 10px;
}

.btn-apple-secondary {
    background: #fff; color: var(--apple-black);
    width: 100%; padding: 14px; border-radius: 12px;
    border: 1px solid var(--apple-border); font-size: 15px; font-weight: 600; margin-top: 10px;
}

/* --- CART DOT INDICATOR --- */
.cart-dot {
    position: absolute;
    top: -2px;
    right: -4px;
    width: 10px;
    height: 10px;
    background: #0071e3;
    border-radius: 50%;
    display: none;
    border: 2px solid var(--apple-white);
}

.cart-dot.show {
    display: block;
}

/* Punto rojo, misma forma que el azul de Pedidos (.cart-dot), sin número */
.fav-badge {
    position: absolute;
    top: -2px;
    right: -4px;
    width: 10px;
    height: 10px;
    background: #ff3b30;
    border-radius: 50%;
    display: none;
    border: 2px solid var(--apple-white);
    letter-spacing: -0.3px;
}
.fav-badge.show {
    display: block;
}

/* Hide old numeric badge if it still exists */
.nav-badge, .badge-count {
    display: none !important;
}

/* --- CARD STATE BORDERS ---
   Sin bordes de color: el estado se indica solo con el badge ✓ (pedido)
   y el corazón (favorito) */

/* Badge ✓ solo cuando está en pedido */
.product-card.in-cart::after {
    content: '✓';
    position: absolute;
    top: 15px; /* centrado con el corazon de favoritos (top 10 + (28-18)/2) */
    left: 10px;
    width: 18px;
    height: 18px;
    background: var(--apple-blue);
    border-radius: 50%;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    pointer-events: none;
}

/* Fila de precio: altura reservada para que TODAS las tarjetas midan igual
   (con oferta el precio ocupa 2 líneas; sin reservar, esas filas quedaban más
   altas y creaban huecos verticales irregulares en la rejilla) */
.card-price-row {
    display: flex;
    align-items: center;
    align-content: center;
    gap: 6px;
    flex-wrap: wrap;
    min-height: 44px;
}

/* --- OFFER / SALE PRICE --- */
.card-price-offer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}

.card-price-old {
    text-decoration: line-through;
    color: #aeaeb2;
    font-size: 12px;
    font-weight: 500;
}

.card-price-sale {
    color: #ff3b30;
    font-size: 15px;
    font-weight: 700;
}

.sale-badge {
    background: #ff3b30;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    line-height: 1.4;
}

/* --- UNITS PER BOX CHIP --- */
.card-units {
    font-size: 10px;
    font-weight: 600;
    color: #86868b;
    background: #f2f2f7;
    border-radius: 8px;
    padding: 2px 6px;
    display: inline-block;
    margin-top: 2px;
    white-space: nowrap;
}

/* Precio total por unidad de compra (caja o pieza) */
.card-precio-compra {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--apple-blue);
    margin-top: 3px;
    letter-spacing: -0.1px;
}
.card-precio-orientativo {
    color: #ff9500;
}

/* --- PRODUCT MODAL EXTRA INFO --- */
.modal-extra-info {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #f2f2f7;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.modal-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: #1d1d1f;
    gap: 8px;
}

.modal-info-row .info-label {
    color: #86868b;
    font-weight: 500;
    flex-shrink: 0;
}

.modal-info-row .info-value {
    font-weight: 600;
    text-align: right;
    max-width: 65%;
}

/* Campos de texto largo (ingredientes, alérgenos, etc.) en columna */
.modal-info-row--block {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}
.modal-info-row--block .info-value {
    text-align: left;
    max-width: 100%;
    font-weight: 400;
    font-size: 12px;
    color: #3a3a3c;
    line-height: 1.5;
}

/* --- ACCOUNT BACK BUTTON --- */
.btn-back-account {
    display: flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    color: var(--apple-blue);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    padding: 12px 16px 4px;
    width: 100%;
}

/* --- SKELETON LOADERS --- */
.skeleton-card {
    background: var(--apple-white);
    border-radius: 18px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(0,0,0,0.03);
    height: 100%;
}

.skeleton-img {
    width: 100%;
    height: 140px;
    background: #e5e5ea;
    border-radius: 12px;
    margin-bottom: 12px;
    animation: pulse 1.5s infinite ease-in-out;
}

.skeleton-text {
    height: 14px;
    background: #e5e5ea;
    border-radius: 4px;
    margin-bottom: 8px;
    animation: pulse 1.5s infinite ease-in-out;
}

.skeleton-text.short { width: 40%; }
.skeleton-text.medium { width: 70%; }
.skeleton-text.long { width: 90%; }

.skeleton-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
}

.skeleton-price { width: 50px; height: 18px; background: #e5e5ea; border-radius: 4px; animation: pulse 1.5s infinite ease-in-out; }
.skeleton-btn { width: 70px; height: 34px; background: #e5e5ea; border-radius: 20px; animation: pulse 1.5s infinite ease-in-out; }

@keyframes pulse {
    0% { opacity: 0.6; }
    50% { opacity: 1; }
    100% { opacity: 0.6; }
}

/* --- ENHANCED ACCOUNT PAGE --- */
.account-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 16px 32px 16px;
    background: transparent; /* Fondo transparente solicitado */
    margin-bottom: 0;
    border-bottom: none;
}

.account-avatar {
    width: 80px;
    height: 80px;
    background: var(--apple-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 16px;
    box-shadow: 0 8px 20px rgba(0, 113, 227, 0.25); /* Sombra más pronunciada */
}

.account-info {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px; /* Espaciado entre elementos solicitado */
}

.account-name {
    font-size: 20px;
    font-weight: 700;
    color: var(--apple-black);
    margin-bottom: 0;
}

.account-email {
    font-size: 14px;
    color: var(--apple-text-sec);
    margin-bottom: 4px; /* Pequeño ajuste para el badge de negocio */
}

.business-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--apple-text-sec);
    font-size: 13px;
    font-weight: 500;
    background: rgba(0,0,0,0.03);
    padding: 4px 12px;
    border-radius: 20px;
}

.btn-assign-business {
    color: var(--apple-blue);
    font-weight: 600;
    cursor: pointer;
    font-size: 13px;
    margin-left: 4px;
}

.account-edit-btn {
    margin-top: 16px;
    width: auto !important;
    padding: 8px 20px !important;
    font-size: 13px !important;
    background: #fff;
    border: 1px solid var(--apple-border);
    border-radius: 10px;
    font-weight: 600;
    color: var(--apple-black);
    cursor: pointer;
    transition: var(--transition);
}

.account-edit-btn:active {
    background: #f5f5f7;
    transform: scale(0.95);
}

.menu-section-title {
    font-size: 12px; /* 12px solicitado */
    font-weight: 600;
    color: var(--apple-text-sec);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0 16px 10px 16px; /* Ajuste padding solicitado */
    margin-top: 24px; /* Espaciado entre secciones */
}

.account-view-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 0 16px 100px 16px; /* Centrado y padding solicitado */
}

/* (Unified with first .profile-card definition above) */

.profile-row-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f2f2f7;
    border-radius: 8px;
    margin-right: 14px;
    color: #1d1d1f;
}

.profile-row-content {
    display: flex;
    align-items: center;
    flex: 1;
}

.profile-chevron {
    color: #d2d2d7;
}

.pending-badge {
    background: #f2f2f7;
    color: var(--apple-text-sec);
    font-size: 12px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 12px;
    margin-right: 8px;
}

/* Switch Styles */
.apple-switch {
    width: 51px;
    height: 31px;
    background: #e9e9ea;
    border-radius: 16px;
    position: relative;
    cursor: pointer;
    transition: background 0.3s;
}

.apple-switch.on {
    background: #34c759;
}

.apple-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 27px;
    height: 27px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 3px 8px rgba(0,0,0,0.15);
    transition: transform 0.3s;
}

.apple-switch.on::after {
    transform: translateX(20px);
}

.logout-btn-text {
    color: #ff3b30;
    font-weight: 600;
    text-align: center;
    width: 100%;
}

/* --- PROFILE SELECTOR (Netflix-style) --- */
/* === LIQUID GLASS PROFILE SELECTOR === */
#profile-selector {
    background: rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    z-index: 9000;
    justify-content: center;
    padding: 40px 20px;
}
.profile-selector-inner {
    text-align: center;
    max-width: 540px;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(40px) saturate(200%);
    -webkit-backdrop-filter: blur(40px) saturate(200%);
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow:
        0 2px 0 0 rgba(255,255,255,0.7) inset,
        0 32px 64px -16px rgba(0, 0, 0, 0.22),
        0 8px 24px rgba(0, 0, 0, 0.08);
    padding: 48px 36px;
    transform: scale(0.92) translateY(8px);
    animation: profileIn 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes profileIn {
    to { transform: scale(1) translateY(0); }
}
.profile-selector-title {
    font-size: 28px;
    font-weight: 800;
    color: var(--apple-black, #1d1d1f);
    letter-spacing: -0.8px;
    margin-bottom: 6px;
}
.profile-selector-sub {
    font-size: 15px;
    color: var(--apple-text-sec, #6e6e73);
    margin-bottom: 36px;
}
.profile-selector-grid {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}
#profile-selector .profile-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 0 rgba(255,255,255,0.6) inset;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 22px;
    cursor: pointer;
    padding: 28px 24px 22px;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    min-width: 130px;
}
#profile-selector .profile-card:hover {
    transform: scale(1.06) translateY(-4px);
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(255,255,255,0.95);
    box-shadow: 0 12px 32px rgba(0,0,0,0.12), 0 2px 0 rgba(255,255,255,0.8) inset;
}
.profile-avatar {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    transition: transform 0.2s;
}
#profile-selector .profile-card:hover .profile-avatar {
    transform: scale(1.08);
}
.profile-avatar svg {
    width: 36px;
    height: 36px;
}
.profile-avatar-admin {
    background: linear-gradient(135deg, #1d1d1f 0%, #3a3a3c 100%);
    color: #f5c842;
    box-shadow: 0 4px 16px rgba(29,29,31,0.3);
}
.profile-avatar-proveedor {
    background: linear-gradient(135deg, #0055d4 0%, #0071e3 100%);
    color: #fff;
    box-shadow: 0 4px 16px rgba(0,113,227,0.35);
}
.profile-avatar-cliente {
    background: linear-gradient(135deg, #2d8a4e 0%, #34c759 100%);
    color: #fff;
    box-shadow: 0 4px 16px rgba(52,199,89,0.35);
}
.profile-card-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--apple-black, #1d1d1f);
    letter-spacing: -0.2px;
    transition: color 0.2s;
}
@media (max-width: 480px) {
    .profile-selector-inner { padding: 36px 20px; margin: 0 8px; }
    .profile-avatar { width: 64px; height: 64px; border-radius: 16px; }
    .profile-avatar svg { width: 28px; height: 28px; }
    .profile-selector-title { font-size: 22px; }
    .profile-selector-grid { gap: 14px; }
    #profile-selector .profile-card { min-width: 100px; padding: 20px 16px 16px; }
}

.toast {
    position: fixed;
    /* Abajo, no arriba.
    
       Con `top: 24px` el aviso caía justo sobre la píldora del proveedor —que
       está centrada en la cabecera— y la tapaba entera: al añadir algo al
       carrito dejabas de ver a quién le estabas comprando. Bajarlo un poco no
       vale, porque a 82px se comía la barra de filtros (100-145px).
    
       Abajo no hay nada con lo que chocar, el ojo ya está en la rejilla, y es
       donde lo ponen Pinterest y el propio iOS. Se deja hueco para la barra de
       navegación inferior. */
    /* `--nav-height` son 65px, pero la barra inferior es una píldora flotante
       que ocupa unos 95px desde el borde: con 18px de margen el aviso se le
       montaba encima 19px. Medido, no estimado. */
    bottom: calc(var(--nav-height, 65px) + 48px);
    left: 50%;
    transform: translateX(-50%) translateY(10px) scale(0.92);
    /* Tarjeta translúcida tipo "Guardado en..." (glass, no negro opaco) */
    background: rgba(28, 28, 30, 0.72);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #fff;
    padding: 10px 12px;
    border-radius: 24px;
    font-size: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 10001;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
    transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
    pointer-events: auto; /* el botón "Deshacer" debe ser pulsable */
}

.toast-icon {
    font-size: 16px;
    display: flex;
    align-items: center;
}

/* Miniatura del producto (como el "Guardado en Tatuajes" de referencia) */
.toast-thumb {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    object-fit: contain;
    background: #fff;
    padding: 3px;
    flex-shrink: 0;
}

.toast-text { padding: 0 4px; }

.toast-action {
    background: #fff;
    color: #1d1d1f;
    border: none;
    border-radius: 18px;
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
    margin-left: 4px;
    transition: transform 0.15s ease, background 0.2s ease;
}

.toast-action:active { transform: scale(0.94); }

.toast.success .toast-icon::before { content: "✓"; color: #34c759; font-weight: 800; }
.toast.error .toast-icon::before { content: "✕"; color: #ff3b30; font-weight: 800; }

/* --- MICRO-INTERACTIONS & FEEDBACK --- */
.btn-apple-primary, .btn-apple-secondary, .btn-confirm-add, .btn-checkout, .btn-add-card, .nav-item, .chip, .fav-btn-card, .remove-item-btn {
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
}

.btn-apple-primary:active, .btn-apple-secondary:active, .btn-confirm-add:active, .btn-checkout:active, .btn-add-card:active, .nav-item:active, .chip:active, .remove-item-btn:active {
    transform: scale(0.95);
}

/* (Unified with first .product-card definition above) */

/* Heart Pop Animation */
@keyframes heartPop {
    0% { transform: scale(1); }
    50% { transform: scale(1.4); }
    100% { transform: scale(1); }
}

.fav-btn-card.pop {
    animation: heartPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.fav-btn-card.active svg {
    filter: drop-shadow(0 0 5px rgba(255, 59, 48, 0.4));
}

/* Smooth Image Loading */
.card-img-wrapper img, .modal-img-area img, .bag-item img {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.card-img-wrapper img.loaded, .modal-img-area img.loaded, .bag-item img.loaded {
    opacity: 1;
}

/* Skeleton placeholder effect */
.card-img-wrapper, .modal-img-area, .bag-item img {
    background: linear-gradient(110deg, #f2f2f7 8%, #e5e5ea 18%, #f2f2f7 33%);
    background-size: 200% 100%;
    animation: shimmer 1.5s linear infinite;
}

/* Al cargar la imagen: fondo blanco uniforme para que todos los logos queden alineados */
.card-img-wrapper:has(img.loaded), .modal-img-area:has(img.loaded) {
    animation: none;
    background: #fff;
}

@keyframes shimmer {
    to { background-position-x: -200%; }
}

/* --- LOADING SPINNER --- */
.loader-container {
    display: none;
    justify-content: center;
    align-items: center;
    padding: 40px;
    grid-column: 1 / -1;
}

.loader-container.show {
    display: flex;
}

.loader {
    width: 32px;
    height: 32px;
    border: 3px solid #d2d2d7;
    border-radius: 50%;
    border-top-color: #0071e3;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* --- EMPTY STATE FAVORITES --- */
.empty-state-container {
    text-align: center;
    padding: 60px 20px;
    max-width: 400px;
    margin: 0 auto;
}

.empty-state-icon {
    margin-bottom: 20px;
    opacity: 0.6;
}

.empty-state-title {
    font-size: 20px;
    font-weight: 700;
    color: #1d1d1f;
    margin-bottom: 12px;
}

.empty-state-description {
    font-size: 14px;
    color: #86868b;
    margin-bottom: 24px;
    line-height: 1.5;
}

.btn-explore-store {
    background: #0071e3;
    color: white;
    border: none;
    border-radius: 12px;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-explore-store:active {
    transform: scale(0.95);
    background: #005fb8;
}

/* Old nav-badge removed - using .cart-dot instead */


/* Enhancement 5: Truncated Descriptions */
.product-description-truncated {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
    max-height: 40px;
}

/* Enhancement 6: Sort and Filter Bar */
.sort-filter-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    position: sticky;
    top: 120px;
    z-index: 140;
    width: 100%;
    padding: 4px 16px;
    margin: 0 auto 16px auto;
    margin-top: 28px;
    background: transparent;
}

.sort-dropdown {
    display: inline-flex;
    align-items: center;
    background: #ffffff;
    border-radius: 50px;
    padding: 8px 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    gap: 8px;
    transition: all 0.3s ease;
}

.sort-dropdown.scrolled {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.sort-dropdown label {
    color: #86868b;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

#sort-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: transparent;
    border: none;
    padding: 4px 24px 4px 4px;
    font-size: 13px;
    font-weight: 600;
    color: #1d1d1f;
    cursor: pointer;
    min-width: 120px;
    transition: all 0.2s ease;
    /* Flecha SVG personalizada */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2386868b' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 12px;
}

#sort-select:hover {
    color: #0071e3;
}

#sort-select:focus {
    outline: none;
}

/* Opciones del Dropdown */
#sort-select option {
    font-size: 13px;
    padding: 8px;
    background: #ffffff;
    color: #1d1d1f;
}

#sort-select option:hover {
    background: #f5f5f7;
}

#sort-select option:first-child {
    font-weight: 600;
    color: var(--apple-blue);
}

/* Responsive */
@media (max-width: 768px) {
    .sort-dropdown {
        width: 100%;
        justify-content: flex-end;
    }

    #sort-select {
        font-size: 13px;
        padding: 4px 24px 4px 4px;
    }
}

/* --- MOBILE PRODUCT CARD FIXES --- */
@media (max-width: 480px) {
    .product-grid {
        gap: 8px;
        padding: 8px 10px 12px 10px;
    }

    .product-card {
        padding: 10px;
        border-radius: 14px;
    }

    .card-img-wrapper {
        height: 110px;
        margin-bottom: 8px;
    }

    .card-name {
        font-size: 13px;
    }

    .card-desc {
        display: none;
    }

    .card-price {
        font-size: 13px;
        margin-bottom: 4px;
    }

    /* Stepper y botón apilados: todas las tarjetas miden lo mismo aunque
       el botón cambie a "✓ Añadido", y cada control ocupa el ancho completo */
    .card-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }

    .qty-control,
    .btn-add-card,
    .btn-consult-card {
        width: 100%;
    }

    .btn-add-card,
    .btn-consult-card {
        font-size: 12px;
        padding: 0 10px;
    }
}


/* --- MODO EDICIÓN EN TIENDA (proveedor: su tienda / admin: cualquiera) --- */
.edit-btn-card {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    color: var(--apple-blue);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease;
}

.edit-btn-card:active { transform: scale(0.9); }

/* Marco sutil en las tarjetas cuando el modo edición está activo */
.store-edit-mode .product-card {
    outline: 1.5px dashed rgba(0, 113, 227, 0.35);
    outline-offset: -1.5px;
}

/* La pila. Lo único posicionado: sus hijos solo se apilan dentro.
   Va anclada por `bottom`, así que crece hacia arriba sola —no hace falta
   column-reverse, que además invertía el orden respecto al HTML—. El orden en
   pantalla es el mismo en que están escritos: perfil, asistente y barra. */
#pila-flotantes {
    position: fixed;
    right: var(--pila-lado);
    bottom: var(--pila-base);
    z-index: 6500;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--pila-hueco);
    /* Sin esto la columna, que es tan ancha como la ventana, se traga los
       clics de las fichas que hay a su lado. */
    pointer-events: none;
}
#pila-flotantes > * { pointer-events: auto; }

/* Con una pantalla completa abierta encima, la columna estorba: flota a 6500,
 * por encima del panel de compras (6100), del de proveedor (6100), de ajustes
 * (6300) y del chat (6400), y se planta sobre el contenido —tapaba filas
 * enteras del panel—. Ahí dentro ya estás mirando los datos; la columna vuelve
 * al cerrar.
 *
 * Antes esta regla vivía en asistente.css y escondía SOLO el botón del
 * asistente. Desde que los tres controles comparten columna, esconder uno
 * dejaba los otros dos encima del panel igualmente. */
body:has(.pa-overlay) #pila-flotantes,
body:has(.pv-overlay) #pila-flotantes,
body:has(.aj-overlay) #pila-flotantes,
body:has(.ch-overlay) #pila-flotantes,
body:has(.sn-overlay) #pila-flotantes,
body:has(.modal-overlay.show) #pila-flotantes,
/* Y el panel del asistente, no solo su botón.
 *
 * Faltaban las dos cosas y se notaban juntas, que es el fallo que se ve nada
 * más entrar: el selector de restaurante (`.sn-overlay`, z 6000) es OBLIGATORIO
 * —sin restaurante no se sabe a qué NIF facturar— y la columna flotante vive a
 * 6500, así que su botón se quedaba encima y era pulsable. Al pulsarlo se abría
 * el asistente (z 6460) sobre el selector, para decir "elige un restaurante
 * para poder consultar sus datos": pidiendo justo lo que el modal de debajo
 * estaba pidiendo, y tapándolo.
 *
 * Esconder el botón no bastaba: un panel ya abierto se quedaba flotando ahí.
 * Los dos vuelven al cerrar la pantalla de encima, como el resto de la columna. */
body:has(.pa-overlay) #as-panel,
body:has(.pv-overlay) #as-panel,
body:has(.aj-overlay) #as-panel,
body:has(.ch-overlay) #as-panel,
body:has(.sn-overlay) #as-panel,
body:has(.modal-overlay.show) #as-panel { display: none; }

/* Y al revés: con el asistente abierto, la columna estorba.
 *
 * Era el único de los cinco paneles que no la escondía, y por eso su botón
 * asomaba por la esquina de abajo a la derecha del propio panel. No es
 * apreciación: el panel se ancla en `nav + 46` y la columna ocupa hasta
 * `nav + 18 + 48` = `nav + 66`, así que se pisan 20 px exactos. Medido en el
 * navegador: el panel llega a (1180, 689) y el botón empieza en (1136, 669).
 *
 * Se esconde la columna y no se sube el panel, que era el otro arreglo
 * posible, porque la columna cambia de alto —la barra de edición se parte en
 * dos filas en pantallas estrechas— y cualquier hueco calculado a mano vuelve
 * a quedarse corto. Además es lo que ya hacen los otros cuatro paneles: el
 * asistente era la excepción, no la regla.
 *
 * No deja a nadie encerrado: el panel tiene su propia ✕, y al cerrarlo la
 * columna vuelve. */
body:has(#as-panel) #pila-flotantes { display: none; }

#edit-mode-bar {
    display: flex;
    gap: 8px;
    /* En un móvil estrecho las tres pastillas no caben en una línea. Antes se
       salían por la izquierda y se comían el selector de perfil; ahora se
       parten en dos filas y es la propia columna la que sube a los de encima:
       nadie tiene que medir nada. */
    flex-wrap: wrap;
    justify-content: flex-end;
    max-width: calc(100vw - var(--pila-lado) * 2);
}

#edit-mode-bar button {
    border: none;
    border-radius: 24px;
    padding: 0 18px;
    height: 46px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}

#edit-toggle { background: #1d1d1f; color: #fff; }
#edit-toggle.off { background: #fff; color: #1d1d1f; border: 1px solid var(--apple-border); }
#btn-new-product { background: var(--apple-blue); color: #fff; }

.editor-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* --- PANEL DE GESTIÓN DE PEDIDOS (admin/proveedor dentro de la tienda) --- */
/* Estados que faltaban (los otros están en el <style> de index.html) */
.status-preparando { background: #fff4e6; color: #ff8c00; }
.status-completado, .status-entregado { background: #e8f5e9; color: #34c759; }
.status-cancelado  { background: #fdecea; color: #ff3b30; }

.mgmt-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}

.mgmt-stat {
    background: #f5f5f7;
    border-radius: 12px;
    padding: 12px 8px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mgmt-stat-value { font-size: 18px; font-weight: 700; color: var(--apple-black); }
.mgmt-stat-label { font-size: 11px; font-weight: 500; color: var(--apple-text-sec); }

.mgmt-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #f2f2f7;
}

.mgmt-status-row label {
    font-size: 13px;
    font-weight: 600;
    color: var(--apple-text-sec);
}

.mgmt-status-row select {
    flex: 1;
    max-width: 180px;
    border: 1px solid var(--apple-border);
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--apple-black);
    background: #fff;
    cursor: pointer;
    text-transform: capitalize;
    outline: none;
}

.mgmt-status-row select:focus { border-color: var(--apple-blue); }

/* --- BARRA DE BÚSQUEDA (From Uiverse.io by alexruix, adaptada a ComPRO) --- */
.search-group {
    display: flex;
    line-height: 28px;
    align-items: center;
    position: relative;
    width: 100%;
    max-width: 480px;
}

.search-group-input {
    width: 100%;
    height: 44px;
    line-height: 28px;
    padding: 0 1rem;
    padding-left: 2.5rem;
    /* Estado resaltado permanente (antes solo en hover/focus) */
    border: 2px solid rgba(0, 113, 227, 0.4); /* azul ComPRO (--apple-blue) */
    border-radius: 8px;
    outline: none;
    background-color: #fff;
    box-shadow: 0 0 0 4px rgb(0 113 227 / 10%);
    color: #0d0c22;
    font-size: var(--tap-font); /* ≥16px en táctil: evita el auto-zoom de iOS */
    transition: .3s ease;
}

.search-group-input::placeholder {
    color: #9e9ea7;
}

.search-group-input:focus,
.search-group-input:hover {
    outline: none;
    border-color: rgba(0, 113, 227, 0.65);
    background-color: #fff;
    box-shadow: 0 0 0 4px rgb(0 113 227 / 16%);
}

.search-group-icon {
    position: absolute;
    left: 1rem;
    fill: #9e9ea7;
    width: 1rem;
    height: 1rem;
    pointer-events: none;
}

/* La X nativa de input[type=search] duplica funciones y varía por navegador */
.search-group-input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* ── IMPORTADOR DE CATÁLOGO ── */
.btn-import-file {
    padding: 12px 18px;
    border-radius: 12px;
    background: #f2f2f7;
    color: var(--apple-black, #1d1d1f);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.btn-import-file:hover { background: #e5e5ea; }

.import-resumen {
    background: rgba(0, 113, 227, 0.08);
    border-radius: 12px;
    padding: 11px 14px;
    font-size: 13px;
    color: var(--apple-black, #1d1d1f);
    margin-bottom: 12px;
}

.import-tabla-wrap {
    overflow-x: auto;
    max-height: 42vh;
    overflow-y: auto;
    border: 1px solid #e5e5e7;
    border-radius: 12px;
}
.import-tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.import-tabla th {
    position: sticky;
    top: 0;
    background: #f5f5f7;
    text-align: left;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #86868b;
    font-weight: 700;
    padding: 8px 6px;
    white-space: nowrap;
    z-index: 1;
}
.import-tabla th.num { text-align: right; }
.import-tabla td { padding: 5px 6px; border-top: 1px solid #f2f2f7; }
.imp-cell {
    border: 1px solid transparent;
    background: transparent;
    border-radius: 7px;
    padding: 6px 7px;
    font-size: 13px;
    font-family: inherit;
    color: var(--apple-black, #1d1d1f);
    max-width: 100%;
}
.imp-cell:hover { border-color: #e5e5e7; }
.imp-cell:focus { outline: none; border-color: var(--apple-blue, #0071e3); background: #fff; }
.imp-cell.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ── CUADRO DE MANDO (ERP) ──────────────────────────────────────────
   Los importes son UNA sola medida (€): un único tono azul en todas las
   barras. Los estados usan la paleta de estado reservada, con etiqueta. */

.mgmt-tabs {
    display: flex;
    gap: 4px;
    background: #f2f2f7;
    border-radius: 11px;
    padding: 3px;
    margin-bottom: 14px;
    flex-shrink: 0;
}
.mgmt-tab {
    flex: 1;
    border: none;
    background: transparent;
    border-radius: 8px;
    padding: 9px 0;
    font-size: 13.5px;
    font-weight: 600;
    color: #86868b;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s;
}
.mgmt-tab.active {
    background: #fff;
    color: var(--apple-black, #1d1d1f);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.erp-vacio { font-size: 13px; color: #86868b; padding: 10px 0; }

/* Selector de periodo + exportar */
.erp-periodo { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.erp-periodo select {
    flex: 1 1 180px;
    padding: 9px 11px;
    border: 1.5px solid #e5e5e7;
    border-radius: 10px;
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    color: var(--apple-black, #1d1d1f);
    cursor: pointer;
}
.erp-periodo select:focus { outline: none; border-color: var(--apple-blue, #0071e3); }
.erp-exportar {
    padding: 9px 14px;
    border: none;
    border-radius: 10px;
    background: #f2f2f7;
    color: var(--apple-black, #1d1d1f);
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
}
.erp-exportar:hover { background: #e5e5ea; }

/* Variación contra el periodo anterior */
.erp-var { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.erp-var.buena { color: #34c759; }
.erp-var.mala { color: #ff3b30; }
.erp-var.neutra { color: #86868b; }
.erp-kpi-comp { margin-top: 6px; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.erp-kpi-comp span { font-size: 11.5px; color: rgba(255,255,255,0.6); }

/* Avisos accionables */
.erp-alerta { border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; }
.erp-alerta-aviso { background: rgba(255, 149, 0, 0.1); }
.erp-alerta-grave { background: rgba(255, 59, 48, 0.09); }
.erp-alerta-info { background: #f5f5f7; }
.erp-alerta-cab { font-size: 13px; margin-bottom: 4px; }
.erp-alerta-fila {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 12.5px;
    color: #636366;
    padding: 3px 0;
}
.erp-alerta-fila span:last-child { white-space: nowrap; }
.erp-llamar {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 14px;
    background: rgba(0, 113, 227, 0.1);
    color: var(--apple-blue, #0071e3);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}
.erp-llamar:hover { background: rgba(0, 113, 227, 0.18); }

/* KPIs */
.erp-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
    margin-bottom: 22px;
}
.erp-kpi {
    background: #f5f5f7;
    border-radius: 14px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.erp-kpi-principal {
    grid-column: 1 / -1;
    background: var(--apple-black, #1d1d1f);
}
.erp-kpi-principal .erp-kpi-valor { color: #fff; font-size: 30px; }
.erp-kpi-principal .erp-kpi-label { color: rgba(255,255,255,0.65); }
.erp-kpi-valor {
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--apple-black, #1d1d1f);
    font-variant-numeric: tabular-nums;
}
.erp-kpi-label { font-size: 11.5px; font-weight: 600; color: #86868b; }

/* Bloques con título */
.erp-bloque { margin-bottom: 26px; }
.erp-titulo {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 12px;
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.erp-titulo span { font-size: 12px; font-weight: 500; color: #86868b; }

/* Barras horizontales (magnitud por categoría) */
.erp-barras { display: flex; flex-direction: column; gap: 8px; }
.erp-barra-fila {
    display: grid;
    grid-template-columns: minmax(72px, 28%) 1fr auto;
    align-items: center;
    gap: 10px;
}
.erp-barra-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--apple-black, #1d1d1f);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.erp-barra-pista {
    height: 12px;
    background: #f2f2f7;
    border-radius: 6px;
    overflow: hidden;
}
.erp-barra-fill {
    display: block;
    height: 100%;
    background: var(--apple-blue, #0071e3);
    border-radius: 0 4px 4px 0; /* extremo redondeado, base anclada */
}
.erp-barra-valor {
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Columnas verticales (evolución temporal) */
.erp-columnas {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 168px;
    padding-top: 4px;
    border-bottom: 1px solid #e5e5e7; /* eje recesivo */
    overflow-x: auto;
}
.erp-col {
    flex: 1 1 0;
    min-width: 46px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
}
.erp-col-valor {
    font-size: 10.5px;
    font-weight: 700;
    color: #86868b;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.erp-col-barra {
    width: 100%;
    background: var(--apple-blue, #0071e3);
    border-radius: 4px 4px 0 0; /* extremo redondeado, base anclada */
    min-height: 2px;
}
.erp-col-label {
    font-size: 11px;
    font-weight: 600;
    color: #86868b;
    white-space: nowrap;
}

/* Estados */
.erp-estados { display: flex; flex-direction: column; gap: 6px; }
.erp-estado-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f5f5f7;
    border-radius: 10px;
    padding: 9px 12px;
}
.erp-estado-n { font-size: 13px; color: #86868b; font-weight: 600; }
.erp-estado-imp {
    margin-left: auto;
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Tablas (top productos / clientes) */
.erp-tabla-wrap { overflow-x: auto; }
.erp-tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.erp-tabla th {
    text-align: left;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #86868b;
    font-weight: 700;
    padding: 0 10px 8px 0;
    border-bottom: 1px solid #e5e5e7;
    white-space: nowrap;
}
.erp-tabla td {
    padding: 10px 10px 10px 0;
    border-bottom: 1px solid #f2f2f7;
    vertical-align: top;
}
.erp-tabla tr:last-child td { border-bottom: none; }
.erp-tabla .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; padding-right: 0; }
.erp-ref { font-size: 11px; color: #86868b; }

/* Con espacio de sobra, cliente y líneas del pedido van en paralelo */
.mgmt-cuerpo { display: block; }
@media (min-width: 720px) {
    .mgmt-cuerpo {
        display: grid;
        grid-template-columns: minmax(230px, 34%) 1fr;
        gap: 16px;
        align-items: start;
    }
    .mgmt-cuerpo .mgmt-cliente { margin: 10px 0 0; }
}

/* Ficha del cliente dentro de cada pedido del panel de gestión */
.mgmt-cliente {
    background: #f5f5f7;
    border-radius: 12px;
    padding: 12px 14px;
    margin: 10px 0 12px;
}
.mgmt-cliente-titulo {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #86868b;
    margin-bottom: 6px;
}
.mgmt-dato {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    font-size: 13px;
    padding: 3px 0;
}
.mgmt-dato span:first-child { color: #86868b; font-weight: 600; flex-shrink: 0; }
.mgmt-dato span:last-child { text-align: right; word-break: break-word; }

/* Desglose por proveedor (pedidos multiproveedor, vista admin) */
.mgmt-desglose {
    border-top: 1px dashed #e5e5e7;
    margin-top: 8px;
    padding-top: 6px;
}

/* Barra de filtros del panel de gestión de pedidos */
/* Buscador del panel de gestión. Va ENCIMA de los desplegables: con cientos
   de pedidos es más rápido escribir el número que ir acotando filtros. */
.mgmt-buscador {
    width: 100%;
    margin: 0 0 10px;
    padding: 11px 14px;
    border: 1.5px solid #e5e5e7;
    border-radius: 12px;
    background: #fff;
    font-family: inherit;
    font-size: 14px;
    color: #1d1d1f;
    box-sizing: border-box;
}
.mgmt-buscador::placeholder { color: #a1a1a6; }

/* Aviso de lista recortada: hay que decir que no se está viendo todo. */
.mgmt-recorte {
    margin: 0 0 10px;
    padding: 9px 12px;
    border-radius: 10px;
    background: #f5f5f7;
    color: #86868b;
    font-size: 12.5px;
}
.mgmt-buscador:focus { outline: none; border-color: var(--apple-blue, #0071e3); }

.mgmt-filtros {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

/* Cada filtro con su etiqueta encima. Sin ella, un desplegable que pone "Más
   recientes" no dice que sea el criterio de ORDEN: parece un dato del pedido. */
.mgmt-filtros label {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1 1 140px;
    min-width: 0;
    font-size: 11px;
    font-weight: 700;
    color: #86868b;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.mgmt-filtros select {
    width: 100%;
    min-width: 0;
    padding: 9px 10px;
    border: 1.5px solid #e5e5e7;
    border-radius: 10px;
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    color: #1d1d1f;
    font-family: inherit;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
}
.mgmt-filtros select:focus { outline: none; border-color: var(--apple-blue, #0071e3); }

/* En el teléfono, cuatro filtros en fila quedan en columnas de 80px donde no
   se lee ni el nombre del proveedor. Dos por línea es lo que cabe. */
@media (max-width: 640px) {
    .mgmt-filtros label { flex: 1 1 calc(50% - 4px); }
    .mgmt-buscador { font-size: 16px; }   /* 16px evita el zoom automático de iOS */
}

/* Chip de producto congelado en la tarjeta */
.card-frozen {
    color: #0091ff !important;
    background: rgba(0, 145, 255, 0.1) !important;
}

/* Botón "Repetir pedido" del historial */
.btn-repeat-order {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: none;
    border-radius: 18px;
    background: rgba(0, 113, 227, 0.1);
    color: var(--apple-blue);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s;
}
.btn-repeat-order:hover { background: rgba(0, 113, 227, 0.18); }
.btn-repeat-order:disabled { opacity: 0.5; cursor: default; }

/* --- ANIMACIÓN AL PULSAR UNA TARJETA DE PRODUCTO --- */
@keyframes cardPop {
    0%   { transform: scale(1); }
    35%  { transform: scale(0.94); }
    100% { transform: scale(1); }
}

.product-card.card-clicked {
    animation: cardPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (prefers-reduced-motion: reduce) {
    .product-card.card-clicked { animation: none; }
}

/* --- BOTONES DE CONTACTO DEL PROVEEDOR (From Uiverse.io by vinodjangid07) --- */
#info-proveedor-modal .Btn {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background-color: transparent;
    position: relative;
    border-radius: 7px;
    cursor: pointer;
    transition: all .3s;
    flex-shrink: 0;
    text-decoration: none;
}

#info-proveedor-modal .svgContainer {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    letter-spacing: 0.8px;
    border-radius: 10px;
    transition: all .3s;
    border: 1px solid rgba(156, 156, 156, 0.466);
}

#info-proveedor-modal .BG {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    z-index: 0;
    border-radius: 9px;
    pointer-events: none;
    transition: all .3s;
}

#info-proveedor-modal .svgContainer { position: relative; z-index: 1; }

/* Degradados por función: teléfono en verde, web en azul */
#info-proveedor-modal .BG-tel {
    background: linear-gradient(45deg, #2e9e46 0%, #34c759 50%, #7ce495 100%);
}

#info-proveedor-modal .BG-web {
    background: linear-gradient(45deg, #0051a8 0%, #0071e3 50%, #5ab0ff 100%);
}

/* Hover sutil, sin la rotación del degradado (se salía del botón) */
#info-proveedor-modal .Btn:hover .svgContainer {
    background-color: rgba(156, 156, 156, 0.25);
}

/* --- BOTÓN FLOTANTE ABAJO-IZQUIERDA (estilo app iOS: blanco con sombra; función por definir) --- */
/* Ya no se posiciona: es un hijo más de #pila-flotantes. Estaba a la
   izquierda, que es lo que le hacía chocar con la barra de edición en cuanto
   la pantalla se estrechaba. */
#float-action { flex-shrink: 0; }

.reject-checkbox .checkbox-wrapper * {
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

.reject-checkbox .checkbox-wrapper input[type="checkbox"] {
    display: none;
}

.reject-checkbox .checkbox-wrapper label {
    --size: 50px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--size);
    height: var(--size);
    background: #ffffff;
    border-radius: 16px; /* esquinas de icono iOS */
    border: 1px solid rgba(0, 0, 0, 0.05);
    /* sombra debajo, como los iconos/tarjetas de iOS */
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    transition: 0.2s ease transform, 0.2s ease box-shadow;
}

.reject-checkbox .checkbox-wrapper label:before {
    content: "";
    width: calc(var(--size) * 0.5);
    height: calc(var(--size) * 0.5);
    border-radius: 50%;
    background-image: linear-gradient(43deg, #0051a8 0%, #0071e3 46%, #5ab0ff 100%);
    transition: 0.2s ease transform;
}

.reject-checkbox .checkbox-wrapper label:hover {
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2), 0 3px 8px rgba(0, 0, 0, 0.1);
}

.reject-checkbox .checkbox-wrapper label:hover:before {
    transform: scale(1.12);
}

.reject-checkbox .checkbox-wrapper label:active {
    transform: scale(0.92);
}

/* --- BOTÓN FAVORITO EN EL MODAL DE PRODUCTO --- */
.modal-add-row {
    display: flex;
    align-items: stretch;
    gap: 10px;
}

.modal-add-row .btn-confirm-add { flex: 1; }

.modal-fav-btn {
    flex-shrink: 0;
    width: 56px;
    border: 1.5px solid var(--apple-border);
    border-radius: 16px;
    background: #fff;
    color: #86868b;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
}

.modal-fav-btn:active { transform: scale(0.92); }

.modal-fav-btn.active {
    color: #ff3b30;
    border-color: #ff3b30;
    background: rgba(255,59,48,0.06);
}

.modal-fav-btn.active svg { fill: currentColor; }

/* ── Selección múltiple de productos ─────────────────────────────────────── */
/* Pedido en la reunión del 12/08: poder marcar varios y borrarlos de una vez,
   como en la bandeja de correo. */
.mgmt-prod-check {
    width: 18px; height: 18px;
    flex-shrink: 0;
    accent-color: var(--apple-blue, #0071e3);
    cursor: pointer;
}

.mgmt-prod-fila { transition: background-color .14s ease; border-radius: 8px; }
.mgmt-prod-fila.es-marcado { background: #f0f6ff; }

.mgmt-barra-sel {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: #f0f6ff;
    border: 1.5px solid rgba(0, 113, 227, .25);
    font-size: 13.5px;
    color: #1d1d1f;
}
.mgmt-barra-sel span { margin-right: auto; }

.mgmt-barra-sel button {
    padding: 7px 13px;
    border: none;
    border-radius: 9px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 650;
    cursor: pointer;
}
.mgmt-barra-sel button:disabled { opacity: .5; cursor: default; }
.mgmt-sel-cancelar { background: #fff; color: #495057; }
.mgmt-sel-cancelar:hover:not(:disabled) { background: #f1f3f5; }
.mgmt-sel-borrar { background: #fee2e2; color: #d70015; }
.mgmt-sel-borrar:hover:not(:disabled) { background: #ffd4d4; }

@media (max-width: 640px) {
    .mgmt-barra-sel { flex-wrap: wrap; }
    .mgmt-barra-sel span { width: 100%; margin-bottom: 4px; }
    .mgmt-barra-sel button { flex: 1; }
}

/* Alcance real del historial: con varios restaurantes, la lista los mezcla y
   el distintivo de arriba solo dice dónde estás operando ahora. */
.orders-alcance {
    margin: 0 0 14px;
    padding: 9px 12px;
    border-radius: 10px;
    background: #f5f5f7;
    color: #86868b;
    font-size: 12.5px;
    line-height: 1.4;
}

/* La foto de perfil llena el círculo del avatar de Mi Cuenta. `cover` y no
   `contain`: una foto de cara recortada al círculo se lee mejor que la misma
   encajada con franjas a los lados. */
.account-avatar.tiene-foto { padding: 0; overflow: hidden; background: #e9ecef; }
.account-avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- FAVORITOS AGRUPADOS POR PROVEEDOR --- */
/* Una sección por distribuidora. En favoritos se mezclan proveedores con
   mínimos y portes distintos, así que lo primero que hay que poder leer es a
   quién le pides cada cosa — igual que ya hace el carrito. */
/* Contenedor propio, no .product-grid: es una pila de secciones, no una
   rejilla, y las medidas de aquella (pensadas para un contenedor de rejilla)
   descuadraban esta. */
.fav-lista {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 12px 12px;
}

/* Nada de anchos mayores que el contenedor: favoritos cuelga de
   .cart-items-scroll, que está limitado a 600 px. Pedir aquí `min(92vw,1920px)`
   como hace el catálogo daba 1178 px dentro de una caja de 600 y el
   `margin-inline: auto` lo resolvía con un margen NEGATIVO de -577 px: la lista
   se iba a la derecha y cortaba la última ficha de cada fila. */

@media (max-width: 480px) {
    .fav-lista { padding: 8px 10px 12px; }
}

.fav-grupo { margin-bottom: 26px; }

.fav-grupo-cab {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--apple-border);
}
.fav-grupo-cab img {
    width: 30px; height: 30px;
    object-fit: contain;
    border-radius: 7px;
    background: #fff;
}
.fav-grupo-cab h3 {
    flex: 1; min-width: 0;
    margin: 0;
    font-size: 16px; font-weight: 700; letter-spacing: -.2px;
    color: var(--apple-black);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fav-grupo-n {
    flex-shrink: 0;
    padding: 2px 9px;
    border-radius: 999px;
    background: #f0f0f2;
    color: #6e6e73;
    font-size: 12px; font-weight: 700;
}

/* La rejilla de dentro repite las medidas de la tienda para que una ficha se
   vea igual esté donde esté. */
.fav-grupo-rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
    gap: 16px;
}

@media (max-width: 640px) {
    .fav-grupo-rejilla { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
    .fav-grupo-cab h3 { font-size: 15px; }
}

/* ── Foco visible: suelo de accesibilidad ────────────────────────────────────
 *
 * Esta hoja tiene doce `outline: none`. La mayoría son legítimos: quitan el
 * anillo del sistema y ponen el suyo con box-shadow. Pero cuatro no sustituyen
 * nada —#sort-select, los dos campos numéricos de los selectores de cantidad y
 * el comodín de .reject-checkbox— y uno está en `.input-apple`, que es TODOS
 * los campos de la aplicación. Quien navegue con teclado pierde de vista dónde
 * está.
 *
 * Se arregla con una sola regla y no parcheando las cinco, porque el problema
 * volvería a aparecer con el siguiente `outline: none` que alguien escriba.
 *
 * `:focus-visible` y no `:focus`: el anillo sale al tabular pero NO al hacer
 * clic con el ratón, que es justo el motivo por el que se quitaba el outline.
 * El diseño no cambia para quien usa ratón o pantalla táctil.
 *
 * !important es deliberado: varias de esas reglas tienen más especificidad que
 * cualquier selector razonable que se ponga aquí, y un indicador de foco es un
 * mínimo que no debería poder desactivarse por descuido.
 */
:focus-visible {
    outline: 2px solid var(--apple-blue) !important;
    outline-offset: 2px !important;
}


/* ── Selección múltiple en el carrito ─────────────────────────────────────────
   La cesta de Amazon como referencia de comportamiento —marcar líneas,
   "seleccionar todo" arriba y un resumen de lo marcado— pero con el lenguaje de
   la casa: píldora blanca de esquinas redondas y, para marcar, el MISMO check
   azul de las tarjetas (.product-card.in-cart::after). Una casilla cuadrada del
   navegador cantaría al lado del resto de la interfaz.

   La barra está siempre presente cuando hay dos o más líneas y solo cambia de
   contenido. Si apareciera al marcar la primera, la lista daría un salto justo
   debajo del dedo.                                                          */

.barra-sel {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 16px 10px 16px;
    padding: 9px 16px;
    background: var(--apple-white);
    border: 1px solid var(--apple-border);
    border-radius: 50px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .03);
    font-size: 13.5px;
    color: var(--apple-black, #1d1d1f);
    transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.barra-sel[hidden] { display: none; }

/* Con algo marcado la barra se tiñe y saca un halo azul suave: se ve que hay
   una acción viva sin meter un bloque de color. */
.barra-sel.tiene-seleccion {
    background: #f7fbff;
    border-color: rgba(0, 113, 227, .3);
    box-shadow: 0 2px 10px rgba(0, 113, 227, .10);
}

/* ── "Seleccionar todo" ─────────────────────────────────────────────────────*/
.barra-sel-todo {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    color: var(--apple-blue);
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
    user-select: none;
}
.barra-sel-todo span { transition: opacity .2s ease; }
.barra-sel-todo:hover span { opacity: .65; }
/* Dos etiquetas para el mismo control: la larga se lee mejor, la corta cabe en
   un móvil. Se cambian por CSS y no por JS para que el texto no dependa de
   cuándo se repinta la barra. */
.barra-sel-todo .sel-corto { display: none; }

.barra-sel-info {
    margin-left: auto;
    color: #86868b;
    white-space: nowrap;
    transition: color .25s ease;
}
.barra-sel.tiene-seleccion .barra-sel-info { color: var(--apple-black, #1d1d1f); }
.barra-sel-info strong { font-weight: 700; }

/* Botón píldora. No se saca del flujo: se atenúa y se retira un poco, así la
   barra no cambia de tamaño al marcar y desmarcar. */
.barra-sel-borrar {
    padding: 8px 16px;
    border: none;
    border-radius: 50px;
    background: #fff1f1;
    color: #d70015;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    opacity: 0;
    transform: translateX(6px) scale(.96);
    pointer-events: none;
    transition: opacity .22s ease, transform .22s ease, background .15s ease;
}
.barra-sel-borrar.es-visible { opacity: 1; transform: none; pointer-events: auto; }
.barra-sel-borrar:hover { background: #ffe1e1; }
.barra-sel-borrar:active { transform: scale(.97); }

/* ── El check de cada línea ─────────────────────────────────────────────────
   Mismo círculo azul con ✓ que marca una tarjeta que está en el pedido.      */
.bag-item-check {
    appearance: none;
    -webkit-appearance: none;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    margin: 0;
    border: 1.5px solid #d2d2d7;
    border-radius: 50%;
    background: var(--apple-white);
    cursor: pointer;
    position: relative;
    transition: background .18s ease, border-color .18s ease, opacity .2s ease, transform .12s ease;
}
.bag-item-check::after {
    content: '✓';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    opacity: 0;
    transform: scale(.6);
    transition: opacity .18s ease, transform .18s ease;
}
.bag-item-check:checked {
    background: var(--apple-blue);
    border-color: var(--apple-blue);
}
.bag-item-check:checked::after { opacity: 1; transform: none; }
.bag-item-check:active { transform: scale(.92); }
.bag-item-check:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3.5px rgba(0, 113, 227, .25);
}

/* Con ratón el check está discreto hasta que hace falta: el carrito se lee, no
   se audita. Con el dedo no hay hover, así que siempre visible. */
@media (hover: hover) {
    .bag-item-check { opacity: .5; }
    .bag-item:hover .bag-item-check,
    .bag-item-check:checked,
    .bag-item-check:focus-visible { opacity: 1; }
}

.bag-item { transition: background .25s ease, border-color .25s ease; }
.bag-item.es-marcado {
    background: #f7fbff;
    border-color: rgba(0, 113, 227, .28);
}

/* El recuento es lo elástico y lo que se recorta; el check y el botón nunca:
   son las dos cosas con las que se actúa. */
.barra-sel-todo, .barra-sel-borrar { flex-shrink: 0; }
.barra-sel-info { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 640px) {
    .barra-sel { padding: 9px 13px; gap: 9px; }
    .barra-sel-info { font-size: 12.5px; }
    .barra-sel-borrar { padding: 8px 14px; }
    /* En estrecho no cabe todo: se cae el importe y el número del botón, que es
       información repetida —el recuento ya está a la izquierda—, y se queda lo
       que hace falta para decidir. */
    .barra-sel .solo-ancho { display: none; }
    /* Y la etiqueta pasa a su versión corta: "Todos" / "Ninguno". Un círculo
       a secas no dice qué hace, y 375px es la anchura de móvil más común, no un
       caso extremo. */
    .barra-sel-todo span { font-size: 12.5px; }
    .barra-sel-todo .sel-largo { display: none; }
    .barra-sel-todo .sel-corto { display: inline; }
}