html,
body {
    touch-action: manipulation;
    -ms-touch-action: manipulation;
    overscroll-behavior: contain;
}

/*//////////////////////////////*/


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    height: 100%;
    -webkit-text-size-adjust: 100%;
    /* evita zoom inesperado */
    scroll-behavior: smooth;
}


/* Fondo y estilo básico del body */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #333;

    /* aplicamos el gradient del root */
    background: var(--bg-body);
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;

    
}

/* 🔹 Capa del fondo difuminado y oscurecido */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: var(--bg-body);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;


  transform: scale(1.05); /* evita bordes cortados */
  z-index: -1;

  /* 🔸 Oscurecer con una capa negra semitransparente */
  box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.5);
}

input,
textarea,
select {
    font-size: 16px;
    /* evita el zoom automático en iPhone */
}



/* =========================================
   HEADER PRINCIPAL
   -----------------------------------------
   Estructura limpia, moderna y profesional.
   Logo + Nombre + Estado.
========================================= */

/* === BLOQUE UNIFICADO: HEADER + CATEGORÍAS === */
.header-wrapper {
    position: sticky;
    top: 0;
    z-index: 999;
    display: flex;
    flex-direction: column;
    background: var(--header);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);

    /* 💡 OPTIMIZACIÓN CRÍTICA: Promueve a la GPU */
    transform: translateZ(0); 
    will-change: transform, box-shadow;
}

/* Ajuste visual para integrar bien el header con las categorías */
.header-wrapper .header {
    margin-top: 15px;
    margin-bottom: 0;
    border-radius: 0;
    padding: 12px 20px;
    background: transparent;
    /* Se funde con el wrapper */
    box-shadow: none;
}

/* Que las categorías se peguen directamente debajo */
.header-wrapper .categories {
    margin-bottom: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    background: transparent;
    box-shadow: none;
}

/* ✅ Safari fix para evitar transparencias en scroll */
@supports (-webkit-touch-callout: none) {
    .header-wrapper {
        background-color: var(--bg-start);
    }
}

/* ---------- HEADER GENERAL ---------- */
.header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border-radius: 16px;
    margin-top: 20px;
    margin-bottom: 20px;
    transition: all 0.3s ease;
    padding-left: 20px;
}

/* ---------- SECCIÓN IZQUIERDA: LOGO + NOMBRE + ESTADO ---------- */
.header-left {
    display: flex;
    align-items: center;
    gap: 18px;
}

/* ---------- LOGO ---------- */
.header-logo {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.header-logo:hover {
    transform: scale(1.05);
}

/* ---------- NOMBRE Y ESTADO ---------- */
.header-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
}

.header-info h1 {
    font-size: 1.9rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
    line-height: 1.1;
}

/* ---------- STATUS HEADER ---------- */
#status-header {
    margin-top: 2px;
    display: inline-block;
    padding: 5px 10px;
    border-radius: 16px;
    font-weight: 600;
    font-size: 12px;
    text-align: center;
    color: var(--text-color, #fff);
    background: var(--status-bg);
    transition: all 0.3s ease;
    width: 100%;
}

#status-header span {
    background: none !important;
    display: block;
    color: inherit;
}

/* Subtexto */
#status-subtext {
    font-size: 0.85rem;
    color: #ffffff;
    text-align: center;
    font-weight: 400;
}

.header-info #status-subtext {
    display: block;
}

/* ---------- ESTADOS ---------- */
#status-header.open {
    background-color: #27ae27;
    color: #fff;
}

#status-header.closed {
    background-color: #f5f5f5;
    color: rgba(60, 60, 60, 0.75);
    box-shadow: none;
}

#status-header.closed+#status-subtext {
    color: rgba(100, 100, 100, 0.8);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 600px) {
    .header {
        padding: 0;
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }

    .header-left {
        flex-direction: flex;
    }

    .header-info h1 {
        font-size: 1.4rem;
    }

    #status-subtext {
        font-size: 0.8rem;
    }
}

/* ===== BARRA FLOTANTE COMPACTA ===== */
.floating-bar {
    position: fixed;
    top: -100px;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, var(--bg-start), var(--bg-end));
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: top 0.4s ease, opacity 0.3s ease;
    z-index: 1000;
    opacity: 0;
}

.floating-bar.visible {
    top: 0;
    opacity: 1;
}

.floating-content {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 15px;
}

.floating-logo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.floating-title {
    font-weight: 700;
    color: var(--text-color);
    font-size: 1.1rem;
}

.floating-categories {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 8px 0 10px;
    overflow-x: auto;
    white-space: nowrap;
    scroll-behavior: smooth;
}

.floating-categories .category-btn {
    padding: 8px 12px;
    font-size: 15px;
    border-radius: 20px;
    background: var(--card-bg);
    color: #4a5568;
    transition: all 0.2s ease;
}

.floating-categories .category-btn.active {
    background: var(--accent);
    color: #fff;
}

/* Responsive */
@media (max-width: 600px) {
    .floating-logo {
        width: 32px;
        height: 32px;
    }

    .floating-title {
        font-size: 0.95rem;
    }
}

/* Categories Sticky & Scrollable */
.categories {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    gap: 15px;
    overflow-x: auto;
    white-space: nowrap;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    padding: 12px 10px;
    margin-bottom: 25px;
}

.categories::-webkit-scrollbar {
    height: 6px;
}

.categories::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 3px;
}

.category-btn {
    flex: 0 0 auto;
    scroll-snap-align: center;
    background: #444;
    border: none;
    padding: 12px 24px;
    border-radius: 25px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}


.category-btn.active {
    background: #888;
    color: white;
    border-bottom: var(--accent) solid 2px;
}





/* ================================================================= */
/* 1. CONTENEDOR DE FILTROS (.filter-controls) */
/* ================================================================= */
.filter-controls {
    /* Flexbox por defecto */
    display: flex;
    
    /* Espaciado moderno */
    gap: 15px; 
    padding: 15px 20px;
    
    /* Centrado en el flujo del documento */
    margin: 0 auto;
    
    /* Ancho: Ocupa el 100% hasta un máximo, ignora el 70% fijo si la pantalla es más pequeña */
    width: 95%; 
    max-width: 1200px; 
    
    /* Alineación */
    justify-content: flex-start; /* Alinea los elementos a la izquierda/inicio (Mejor que 'center' para UX) */
    align-items: center; 
}

/* ================================================================= */
/* 2. ESTILO DE SELECT Y BUSCADOR (COMPARTIDO - Píldora) */
/* ================================================================= */

#product-search {
    /* Diseño Base */
    background-color: var(--card-bg, #222);
    color: var(--text, #fff); /* Usamos var(--text) por si el tema define otro color */
    padding: 12px 18px; 
    border-radius: 25px; 
    font-size: 1rem;
    
    /* Borde / Sombra */
    border: none; 
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15); 
    
    /* Transiciones para suavizar el cambio de estado */
    transition: box-shadow 0.2s ease-in-out, background-color 0.2s;
    outline: none;
}

#category-select{    /* Diseño Base */
    background-color: var(--card-bg, #222);
    color: var(--text, #fff); /* Usamos var(--text) por si el tema define otro color */
    padding: 12px 18px; 
    border-radius: 25px; 
    font-size: 1rem;
    
    /* Borde / Sombra */
    border: none; 
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15); 
    
    /* Transiciones para suavizar el cambio de estado */
    transition: box-shadow 0.2s ease-in-out, background-color 0.2s;
    outline: none;
    cursor: pointer; 
}

/* ================================================================= */
/* 3. AJUSTES ESPECÍFICOS Y ANCHOS (ESCRITORIO) */
/* ================================================================= */

#category-select {
    /* Escritorio: Ancho base fijo y no se encoge (220px) */
    flex-basis: 220px; 
    flex-shrink: 0; 
    flex-grow: 0; 

    /* Eliminación de apariencia nativa */
    appearance: none;
    -webkit-appearance: none;
    
    /* Icono de flecha SVG y posición */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M7 10l5 5 5-5z" fill="%2"/></svg>'); 
    background-repeat: no-repeat;
    background-position: right 18px center; 
    padding-right: 45px; /* Espacio para el icono */
}

#product-search {
    /* Escritorio: Crece para ocupar el espacio restante */
    flex-grow: 1; 
    flex-shrink: 1; 
}

/* Estilo específico para el placeholder (compatible con CSS puro) */
#product-search::placeholder {
    color: var(--text);
    opacity: 0.7; 
}

/* ================================================================= */
/* 4. ADAPTACIÓN MÓVIL (HORIZONTAL) */
/* ================================================================= */
@media (max-width: 600px) {
    .filter-controls {
        /* Se mantiene la dirección horizontal (row) */
        gap: 10px;
        padding: 10px;
    }

    #category-select {
        /* En móvil: Ocupa el 35% del ancho */
        flex-basis: 35%; 
        flex-grow: 0;
        flex-shrink: 0;
        font-size: 0.95rem;
        
        /* Ajuste de padding y posición de icono para móvil */
        padding: 10px 15px; 
        background-position: right 10px center;
        padding-right: 30px; 
        width: 10%;
    }

    #product-search {
        /* En móvil: Ocupa el 65% del ancho restante */
        flex-basis: 65%;
        flex-grow: 1;
        flex-shrink: 1;
        font-size: 0.95rem;
        padding: 10px 15px;
        width: 90%;
    }
}

/* ===============================
   🦴 SKELETON LOADING - SIMULACIÓN EXACTA DE PRODUCT-CARD
================================= */

.skeleton-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    /* 🔹 más flexible */
    gap: 25px;
    padding: 20px;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    overflow-x: hidden;
    /* 🔒 evita scroll horizontal */
}

/* === Card (estructura igual a .product-card) === */
.skeleton-card {
    display: flex;
    align-items: center;
    gap: 20px;
    background: var(--bg-start);
    border-radius: 20px;
    padding: 5px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    position: relative;
    padding: 10px;
}

/* === Imagen === */
.skeleton-image {
    width: 80px;
    height: 80px;
    border-radius: 15px;
    flex-shrink: 0;
    background: var(--bg-end);
    background-image: linear-gradient(90deg,
            var(--bg-start) 25%,
            var(--bg-end) 50%,
            var(--bg-start) 75%);
    background-size: 400% 100%;
    animation: skeleton-shimmer 0.4s ease-in-out infinite;
}

/* === Información simulada === */
.skeleton-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Barras individuales para simular texto */
.skeleton-line {
    border-radius: 6px;
    background: var(--bg-end);
    background-image: linear-gradient(90deg,
            var(--bg-start) 25%,
            var(--bg-end) 50%,
            var(--bg-start) 75%);
    background-size: 400% 100%;
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
}

/* === Simula el nombre del producto === */
.skeleton-title {
    width: 65%;
    height: 18px;
}

/* === Simula el precio === */
.skeleton-price {
    width: 35%;
    height: 14px;
    margin-top: 4px;
}

/* === Simula la descripción de 2 líneas === */
.skeleton-description {
    width: 90%;
    height: 10px;
    margin-top: 8px;
}

.skeleton-description:last-child {
    width: 60%;
}

/* === Botón flotante “+” === */
.skeleton-button {
    position: absolute;
    bottom: 5px;
    right: 5px;
    transform: translate(35%, 35%);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: #f2f2f2;
    background-image: linear-gradient(90deg, #f2f2f2 25%, #e8e8e8 50%, #f2f2f2 75%);
    background-size: 400% 100%;
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
}

/* ===== Animaciones ===== */
@keyframes skeleton-shimmer {
    0% {
        background-position: -100% 0;
    }

    100% {
        background-position: 100% 0;
    }
}



#main-products-grid {
    display: grid;
    /* Layout responsive: 1 columna en móvil, 2 o más en escritorio */
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
    padding: 20px;
    margin: 0 auto;
}


.product-card {
    background: var(--card-bg);
    border-radius: 20px;
    padding: 5px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    position: relative;
    overflow: visible;
    display: flex;
    gap: 20px;
    align-items: center;
    cursor: pointer;
}

.product-card:hover {
    transform: scale(1.02);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

.product-card.inactive {
    opacity: 0.6;
    background: var(--card-bg);
}

.product-image {
    width: 80px;
    height: 80px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: white;
    position: relative;
    overflow: visible;
    flex-shrink: 0;
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
}


.unavailable-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 15px;
    border-radius: 15px;
}

.product-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.product-name {
    font-size: 1 rem;
    font-weight: 700;
    color: #fff;
}

.product-price {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
}

.product-description {
    font-size: 0.9rem;
    color: #c4c4c4;
    line-height: 1.4;

    /* 🔹 Truncar en varias líneas */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /* cambia el número de líneas visibles */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}


.add-button {
    position: absolute;
    bottom: 5px;
    right: 5px;
    transform: translate(35%, 35%);
    width: 40px;
    height: 40px;
    background: var(--accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    cursor: pointer;
    z-index: 30;
}

.add-button img.add-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.add-button:hover {
    transform: translate(35%, 35%) scale(1.06);
}

.add-button.inactive {
    background: #cbd5e0;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}


/* Product Actions */
.product-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

.closed-message {
    background: #fed7d7;
    color: #c53030;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

/* small variant overrides */
.product-card.small {
    padding: 10px;
    cursor: pointer;
}

.product-card.small:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

.product-card.small.inactive {
    opacity: 0.6;
    background: #f7fafc;
    cursor: not-allowed;
}







/* Cart */
/* Cart */
.cart-float {
    display: flex;
    position: fixed;
    bottom: 40px;
    right: 20px;
    background-color: #444;
    border: none;
    border-radius: 60px;
    cursor: pointer;
    z-index: 1000;
    padding: 20px;
    overflow: hidden;
    width: auto;
    height: 70px;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 25px #0000004d;
    transition: all 0.3s ease;

    /* 💡 OPTIMIZACIÓN CRÍTICA: La clave para la fluidez en móviles */
    transform: translateZ(0); 
    will-change: transform; 

    /* ⚠️ Si el problema persiste, elimina cualquier 'backdrop-filter: blur(...);' */
    /* backdrop-filter: none; */ 
}


.cart-float:hover {
    transform: translateY(-3px);
}

.cart-float.show {
    display: flex;
    align-items: center;
    justify-content: center;
}


.cart-float:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

.cart-float.show {
    display: flex;
    align-items: center;
    gap: 5px;
}

.cart-float.empty {
    opacity: 0.6;
    pointer-events: none;
}


.cart-icon {
    font-size: 1.5rem;
}

/* Icono del carrito */
.cart-icon img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    display: block;
}

/* Información del carrito */
/* Por defecto, info del carrito flotante está oculta */
.cart-info {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    line-height: 1.2;
    margin-left: 8px;
}

/* Cuando haya productos, se muestra */
.cart-float.show-info .cart-info {
    display: flex;
}


.cart-count {
    font-weight: 700;
    color: #fff;
    font-size: 0.9rem;
}


.cart-total {
    font-weight: 600;
    color: #fff;
    font-size: 0.85rem;
}

/* Product Modal */
.product-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000000c7;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2500;
    overflow-y: auto;
}

.product-modal.show {
    display: flex;
}

.product-modal-content {
    background: #444;
    width: 600px;          /* ancho fijo para PC */
    max-width: 90%;        /* no exceda el 90% del viewport */
    max-height: 90vh;      /* altura máxima para que no ocupe toda la pantalla */
    border-radius: 12px;   /* esquinas redondeadas */
    overflow-y: auto;
    position: relative;

}

.product-modal-header {
    display: flex;
    flex-direction: row;
    /* ahora en fila */
    justify-content: space-between;
    /* separa izquierda y derecha */
    align-items: center;
    /* centra verticalmente */
    padding: 0px 30px;
}


.product-modal-title {
    font-size: 25px;
    font-weight: 700;
    color: #fff;
}

.close-product-modal {
    position: absolute;
    top: 15px;
    /* separación desde arriba */
    right: 15px;
    /* separación desde la derecha */
    background: none;
    color: white;
    border: none;
    font-size: 40px;
    cursor: pointer;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    line-height: 35px;
    text-align: center;
}


.product-modal-image {
    width: 100%;
    height: 330px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: white;
}

.product-modal-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0 0 60px 60px;
    /* solo inferior derecha e izquierda */
}


/* Precio sobre la imagen (modal) - estilo premium */
/* Precio sobre la imagen (modal) - esquina superior derecha */
.modal-price-overlay {
    background: none;
    color: var(--accent);
    font-weight: 700;
    font-size: 0.9rem;
    z-index: 0;
    transition: all 0.25s ease-in-out;
}


/* Asegura que el contenedor de la imagen tenga posición relativa */
.modal-image-container {
    position: relative;
    overflow: hidden;
}

/* Responsive */
@media (max-width: 480px) {
    .modal-price-overlay {
        top: 8px;
        right: 8px;
        font-size: 0.85rem;
    }
}



.product-modal-description {
    padding: 0px 30px;
    margin: 10px 0px;
    font-size: 15px;
    color: #fff;
}



/* ===============================
   OPCIONES PERSONALIZABLES
================================ */
#extra-options {
    padding: 0 30px;
    border-radius: 12px;
    margin-top: 15px;
    transition: background 0.3s ease, box-shadow 0.3s ease;
}


#extra-options h4 {
    margin: 0 0 12px 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-color, #fff);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 6px;
}

#extra-options label {
    color: var(--muted, #ccc);
    font-size: 0.95rem;
    display: inline-block;
    margin-bottom: 4px;
    cursor: pointer;
    transition: color 0.2s ease;
}

#extra-options label:hover {
    color: var(--text-color, #fff);
}

#extra-options input[type="checkbox"] {
    accent-color: #4CAF50;
    margin-right: 6px;
}

/* ===============================
   📝 INSTRUCCIONES ESPECIALES
================================ */
.instructions-section {
    margin-bottom: 120px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0 30px;
}

/* Etiqueta del textarea */
.instructions-label {
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 8px;
    letter-spacing: 0.3px;
    user-select: none;
}

/* Campo de texto */
.instructions-textarea {
    width: 100%;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    min-height: 70px;
    border: none;
    border-radius: 10px;
    padding: 10px;
    font-size: 0.95rem;
    resize: vertical;
    outline: none;
    background-color: #555;
    transition: all 0.2s ease;
}

/* Placeholder más tenue */
.instructions-textarea::placeholder {
    color: #999;
}

/* Efecto al enfocar */
.instructions-textarea:focus {
    border-color: none;
    color: #fff;
}

.modal-actions {
    position: sticky;
    /* Fijo dentro del modal */
    bottom: 0;
    left: 0;
    right: 0;
    background: #333;
    padding: 15px 20px 30px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20%;
    z-index: 100;
}

.add-to-cart-price {
    font-weight: 700;
    font-size: 1.1rem;
    color: #fff;
    white-space: nowrap;
    /* evita salto de línea */
    display: inline-block;
    /* fuerza que el contenido sea inline */
    margin-left: 10px;
    /* espacio opcional entre botón y precio */
    vertical-align: middle;
    /* alinea con el botón */
}




.quantity-section {
    display: flex;
    align-items: center;
}

.quantity-control {
    display: flex;
    align-items: center;
    background-color: #666;
    border-radius: 25px;
    padding: 5px;
}

.quantity-btn-modal {
    background-color: #888;
    border: NONE;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-weight: 700;
    font-size: 20px;
    color: #fff;
    transition: all 0.3s ease;
}

.quantity-btn-modal:hover {
    background: #999;
}

.quantity-btn-modal:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.quantity-display {
    font-size: 20px;
    font-weight: 700;
    color: var(--card-bg);
    min-width: 30px;
    text-align: center;
}


.quantity-display {
  width: 50px;
  text-align: center;
  font-size: 1.2rem;
  border: none;
  background: transparent;
  color: #fff; /* o el color que uses */
  outline: none;
  /* Quitar flechas / líneas laterales */
  -moz-appearance: textfield; /* Firefox */
}

.quantity-display::-webkit-outer-spin-button,
.quantity-display::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0; /* Chrome, Safari, Edge */
}


.add-to-cart-modal-btn {
    width: 100%;
    background: #4CAF50;
    color: var(--card-bg);
    border: none;
    padding: 10px;
    border-radius: 50px;
    cursor: pointer;
    font-weight: 700;
    font-size: 15px;
    transition: all 0.3s ease;
}

.add-to-cart-modal-btn:hover {
    transform: translateY(-2px);
}

.add-to-cart-modal-btn:disabled {
    background: #cbd5e0;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Precio dinámico en el botón */
#modal-product-price {
    font-size: 22px;
    color: #fff;
}

.add-to-cart-modal-btn {
    transition: all 0.3s ease;
}

.add-to-cart-modal-btn span {
    font-weight: bold;
    color: #fff;
}




/* === 🛒 CARRITO DE COMPRAS - PANTALLA COMPLETA CON ANIMACIÓN === */
/* === MODAL PRINCIPAL DEL CARRITO === */
.cart-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    display: none;
    justify-content: flex-end;
    align-items: stretch;
    z-index: 4000;
    overflow: hidden;
    transition: background 0.4s ease;
}

.cart-modal.show {
    display: flex;
    animation: fadeInCart 0.4s ease forwards;
}

.cart-modal.hide {
    animation: fadeOutCart 0.4s ease forwards;
}

/* === CONTENIDO DEL CARRITO === */
.cart-content {
    background: #444;
    color: var(--text-color);
    /* gris oscuro */
    width: 100%;
    height: 100%;
    padding: 25px;
    box-shadow: -5px 0 30px rgba(0, 0, 0, 0.15);
    transform: translateX(100%);
    animation: slideInCart 0.4s ease forwards;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    border-radius: 0;
}

/* === ANIMACIONES === */
@keyframes slideInCart {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes slideOutCart {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(100%);
    }
}

@keyframes fadeInCart {
    from {
        background: rgba(0, 0, 0, 0);
    }

    to {
        background: rgba(0, 0, 0, 0.35);
    }
}

@keyframes fadeOutCart {
    from {
        background: rgba(0, 0, 0, 0.35);
    }

    to {
        background: rgba(0, 0, 0, 0);
    }
}

/* === HEADER DEL CARRITO === */
.cart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cart-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: #fff;
}



.close-cart {
    background: none;
    border: none;
    font-size: 40px;
    cursor: pointer;
    color: #fff;
    transition: transform 0.2s ease, color 0.2s ease;
}

.close-cart:hover {
    transform: scale(1.1);
    color: red;
}




.cart-empty {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 30px;
    text-align: center;
    gap: 12px;
}

.cart-empty-text {
    color: #888;
    font-size: 15px;
}

.btn-add-products {
    background: #555;
    color: white;
    border: none;
    padding: 12px 22px;
    border-radius: 25px;
    font-weight: 600;
    cursor: pointer;
    font-size: 15px;
    transition: background 0.2s ease-in-out;
}

.btn-add-products:hover {
    background: #666;
}

/* === ITEMS DEL CARRITO === */
.cart-items {
    flex: 1;
    margin-bottom: 20px;
    overflow-y: auto;
    padding-right: 5px;
}

/* Contenedor de cada producto */
.cart-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid #616161;
    gap: 15px;
}

/* --- Lado izquierdo: imagen + texto --- */
.item-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.cart-item-image {
    width: 55px;
    height: 55px;
    border-radius: 12px;
    object-fit: cover;
    background: #f7fafc;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.cart-item-placeholder {
    width: 55px;
    height: 55px;
    border-radius: 12px;
    background: #f1f1f1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #a0aec0;
}

/* === Ícono de eliminar producto === */
.cart-item-delete {
    width: 20px;
    height: 20px;
    opacity: 0.7;
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.cart-item-delete:hover {
    transform: scale(1.15);
    opacity: 0.8;
    filter: brightness(0) saturate(100%) invert(24%) sepia(90%) saturate(6182%) hue-rotate(350deg) brightness(92%) contrast(85%);
}

/* === Animación al eliminar producto === */
.fade-out {
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}



/* --- Información del producto --- */
.item-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
}

.item-name {
    font-weight: 600;
    color: #fff;
    margin-bottom: 3px;
}

.item-instructions {
    font-size: 0.8rem;
    color: #fff;
    font-style: italic;
    margin-bottom: 4px;
}

.item-price {
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
}

/* --- Controles de cantidad --- */
.item-controls {
    display: flex;
    align-items: center;
    gap: 5px;
}

.quantity-btn {
    background: #555;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    color: #fff;
    cursor: pointer;
    font-weight: 600;
    font-size: 15px;
    transition: all 0.2s ease;
}

.quantity-btn:hover {
    background: #666;
}

.quantity {
    font-weight: 600;
    min-width: 20px;
    text-align: center;
    color: #fff;
}


/* === Observaciones generales === */
.cart-observations {
    margin: 15px 0 0px;
    display: flex;
    flex-direction: column;
    border-top: 1px solid #616161;
}

.cart-observations-label {
    font-weight: 600;
    margin-bottom: 8px;
    margin-top: 8px;
    color: #fff;
}

.cart-observations-textarea {
    width: 100%;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    min-height: 70px;
    border: none;
    border-radius: 10px;
    padding: 10px;
    font-size: 0.95rem;
    resize: vertical;
    outline: none;
    background-color: #555;
    transition: all 0.2s ease;
    color: #999;
}

.cart-observations-textarea:focus {
    border-color: none;
    color: #fff;
}


/* === PIE DEL CARRITO === */
.cart-summary {
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid #616161;
}

#textmetodo {
    font-size: 14px;
    color: #ff0000;
}

/* 💳 Select de método de pago */
.payment-method {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* separa el select y el total */
    gap: 10px;
    margin-bottom: 10px;
}

/* 💳 Select de método de pago */
.cart-payment-select {
    width: 40%;
    padding: 7px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 10px;
    background: #555;
    color: #fff;
    font-weight: 500;
    font-size: 0.9rem;
    outline: none;
    cursor: pointer;
    transition: all 0.25s ease;
}



.cart-payment-select option {
    background: #fff;
    color: #000;
}

/* 🔴 Animación de error para el select método de pago */
.shake-error {
    animation: shake 0.4s ease-in-out;
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    20%,
    60% {
        transform: translateX(-6px);
    }

    40%,
    80% {
        transform: translateX(6px);
    }
}



.cart-total-amount {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    text-align: right;
}

.cart-actions {
    display: flex;
    gap: 10px;
    padding-bottom: 30px;
}

.cart-btn {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 25px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.clear-cart {
    background: none;
    color: #888;
}

.clear-cart:hover {
    background: #feb2b2;
}

.checkout-btn {
    background: #4CAF50;
    color: white;
}

.checkout-btn:hover {
    background: #378f5c;
}

/* === PANEL LATERAL EN PANTALLAS GRANDES === */
@media (min-width: 768px) {
    .cart-content {
        width: 450px;
        height: 100%;
    }
}



.menu-section {
    scroll-margin-top: 100px;
}

.section-title {
    font-weight: 700;
    color: #fff;
    margin-left: 25px;
    text-align: left;
}

/* Error Message */
.error-message {
    color: #3c3c3cd9;
    padding: 15px;
    border-radius: 10px;
    margin: 20px 0;
    text-align: center;
}

/* Responsive */
@media (max-width: 768px) {


    .container {
        margin-left: 0;
    }

    .header h1 {
        font-size: 25px;
    }

    .products-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 20px;
    }

    /* On narrow screens stack card content */
    .product-card {
        flex-direction: flex;
        text-align: left;
        gap: 15px;
    }

    .product-image {
        width: 80px;
        height: 80px;
        align-self: center;
    }

    .add-button {
        align-self: center;
    }

    .categories {
        gap: 10px;
    }

    .category-btn {
        padding: 8px 17px;
        font-size: 14px;
    }

    .cart-float {
        bottom: 40px;
        right: 15px;
        padding: 12px 20px;
    }

    .cart-content {
        padding: 20px;
        width: 100%;
    }
}

/* === MODAL DE OPCIONES DE ENTREGA === */
.delivery-modal,
.customer-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.delivery-modal.show,
.customer-modal.show {
    display: flex;
    opacity: 1;
}

/* Contenido del modal */
.delivery-content,
.customer-content {
    background: #444;
    padding: 25px 30px;
    border-radius: 20px;
    width: 90%;
    max-width: 380px;
    text-align: center;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
    transform: translateY(-20px);
    transition: all 0.3s ease;
    color: #fff;
}

.delivery-modal.show .delivery-content,
.customer-modal.show .customer-content {
    transform: translateY(0);
}





.customer-subtitle {
    font-size: 15px;
    color: #fff;
    margin-top: 8px;
    line-height: 1.4;
}



/* Opciones de entrega */
.delivery-modal {
    color: var(--text-color);
}



.delivery-options {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 25px 0;
    align-items: center;
}

.delivery-option-btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;

    width: 100%;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    border: none;
    border-radius: 45px;
    cursor: pointer;
    transition: all 0.3s ease;

    /* 🌫️ Efecto Glass */
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* 🪞 Al pasar el mouse */
.delivery-option-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}


/* Imagen dentro del botón */
.delivery-option-btn img {
    width: 70px;
    height: auto;
    object-fit: contain;
    background: none;
    padding: 6px;
    border-radius: 12px;
    transition: transform 0.3s ease;
}

/* Pequeño zoom al hover */
.delivery-option-btn:hover img {
    transform: scale(1.5);
}

/* Texto dentro del botón */
.delivery-option-btn span {
    flex: 1;
    text-align: center;
    padding: 30px;
    /*quitar*/
}

/* Botón cerrar */
.close-delivery,
.close-customer {
    background: transparent;
    border: none;
    color: #888;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    margin-top: 12px;
    transition: color 0.2s ease;
}

.close-delivery:hover,
.close-customer:hover {
    color: #555;
}


/* Inputs del modal de cliente */
.customer-content input {
    color: #fff;
    width: 100%;
    margin: 6px 0;
    padding: 12px;
    font-size: 15px;
    border-radius: 25px;
    border: none;
    transition: border 0.3s ease, box-shadow 0.3s ease;
    background: #666;
}

.customer-content input::placeholder {
    color: #888;
}

.customer-content input:focus {
    outline: none;
    border-color: var(--primary-1);
}

/* Botón enviar datos del cliente */
.submit-customer-btn {
    margin-top: 10px;
    background: #4CAF50;
    color: white;
    border: none;
    padding: 14px;
    border-radius: 25px;
    cursor: pointer;
    width: 100%;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

.submit-customer-btn:hover {
    background: #45a049;
    transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}











/* === FOOTER INFO === */
.footer-info {
    text-align: center;
    border-radius: 20px;
    padding: 40px 25px;
    transition: all 0.3s ease;
    padding-bottom: 300px;
}

/* Íconos sociales */
.footer-socials {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 25px;
}

.footer-socials img {
    width: 25px;
    height: auto;
    transition: transform 0.3s ease;
    cursor: pointer;
    filter: invert(1);
    opacity: 0.7;
}

.footer-socials img:hover {
    transform: scale(1.1);
}

/* Código QR */
.footer-qr img {
    width: 100px;
    margin-bottom: 20px;
    filter: invert(1);
    opacity: 0.7;
}

/* Sedes */
.footer-branches {
    color: #fff;
    font-size: 0.95rem;
    margin-bottom: 25px;
    line-height: 1.5;
}

.footer-branches h4 {
    color: #4a5568;
    font-weight: 700;
    margin-bottom: 8px;
}

.footer-branches .telefono {
    display: inline-block;
    margin-top: 5px;
    color: #fff;
    font-weight: 600;
}

/* Políticas */
.footer-policies {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-policies a {
    color: #667eea;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-policies a:hover {
    color: #764ba2;
}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.footer-logo {
    width: 200px;
    height: auto;
    margin-top: 100px;
    margin-bottom: 100px;
}

.create-store-btn {
    color: #fff;
}





/*Domicilios*/

/* 🌍 Mapa a pantalla completa */
#map {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 1;
}

/* 🌫️ Capa de controles encima */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 10px 10px 10px 10px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 30%, rgba(0, 0, 0, 0) 100%);
    color: white;
}

/* Agrupa los dos inputs para poder centrar el botón atrás entre ellos */
.inputs-group {
    position: relative;
    width: 100%;
    max-width: 700px;
    display: flex;
    flex-direction: row;
    align-items: center;
}

/* 🔙 Botón de ir atrás (dentro del overlay) */
.btn-back {
    align-self: flex-start;
    background: none;
    color: white;
    border: none;
    padding: 8px 14px;
    border-radius: 25px;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}


.btn-back img {
    width: 20px;
    height: 20px;
    filter: invert(0.6);
}

/* Posicionamos el botón absolutamente dentro de .inputs-group para centrarlo
   verticalmente entre los dos inputs */
.inputs-left {
    flex: 0 0 56px; /* ancho fijo para el botón */
    display: flex;
    align-items: center;
    justify-content: center;
}

.inputs-left .btn-back {
    position: relative;
    padding: 28px 10px;
    backdrop-filter: blur(8px);
    background: #fff8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.inputs-right {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.inputs-right .input-container {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

.inputs-right .input-container input {
    width: 100%;
    padding: 10px 40px 10px 12px;
}

/* 🧹 Inputs */
.input-container {
    position: relative;
    width: 90%;
    display: flex;
    align-items: center;
    gap: 8px;
}

.input-container input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px 40px 10px 12px;
    border-radius: 25px;
    border: none;
    outline: none;
    font-size: 15px;
    backdrop-filter: blur(8px);
    background: #fff8;
    color: #333;
}

.clear-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 18px;
    color: #666;
    opacity: 0;
    transition: opacity 0.2s;
    user-select: none;
}

.input-container:hover .clear-btn,
.input-container input:not(:placeholder-shown)+.clear-btn {
    opacity: 1;
}

#subtotal,
#domicilio-cost {
    font-weight: bold;
}

/* 📋 Estilo de sugerencias mejorado */
.suggestions {
    position: absolute;
    top: 106px;
    width: 85%;
    max-width: 500px;
    background: rgba(255, 255, 255, 0.96);
    border-radius: 10px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25);
    display: none;
    z-index: 1001;
    max-height: 50vh;
    /* 🔹 límite de altura visible */
    overflow-y: auto;
    /* 🔹 scroll si hay demasiadas sugerencias */
    padding: 6px;
    backdrop-filter: blur(6px);
}

/* Estilo individual de cada sugerencia */
.suggestions div {
    background: white;
    border-radius: 8px;
    margin: 4px 0;
    padding: 10px 14px;
    cursor: pointer;
    font-size: 15px;
    color: #333;
    transition: background 0.2s, transform 0.15s;
}

.suggestions div:hover {
    background: #808080;
    color: white;
    transform: scale(1.02);
}

/* 🔹 Scroll elegante */
.suggestions::-webkit-scrollbar {
    width: 8px;
}

.suggestions::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
}

.suggestions::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.45);
}

/* Panel fijo abajo */
.panel {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    backdrop-filter: blur(8px);
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.2);
    border-radius: 16px 16px 0 0;
    padding: 15px;
    z-index: 999;
    color: #333;
}

/* ------------------------------------------- */
/* 🧭 BOTÓN DE UBICACIÓN Y ALERTA (MODIFICADO) */
/* ------------------------------------------- */

/* 🧭 Botón de ubicación */
.locate-btn {
    /* 1. Establece RELATIVE: CLAVE para posicionar la alerta ABSOLUTA dentro */
    position: relative; 
    
    /* 2. Luego, anula el RELATIVE y fija la posición en la pantalla (comportamiento original) */
    position: fixed; 

    /* TUS ESTILOS ORIGINALES */
    right: 20px;
    z-index: 1000;
    
    /* 💡 Aceleración GPU */
    transform: translateZ(0); 
    will-change: transform;

    /* Diseño */
    background: #1E88E5;
    border: none;
    
    /* 🎯 CAMBIO CLAVE 1: Usamos un radio fijo para el modo 'pastilla' (expandido) */
    border-radius: 25px;
    
    /* Permite que el botón crezca con el texto */
    width: auto; 
    height: auto;
    /* Mantiene el tamaño mínimo del ícono (35px + 10px*2 padding = 55px) */
    min-width: 30px; 
    padding: 10px; 
    gap: 10px;
    font-size: 26px;
    color: white;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    
    /* 🎯 CAMBIO CLAVE: Usa Flex para alinear imagen y texto */
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Alinea los elementos al inicio */
    
    /* Transiciona el ancho y el border-radius */
    transition: all 0.7s ease; 
    
    /* Filtro por defecto (para escritorio) */
    backdrop-filter: blur(4px);
}

/* 🎯 CAMBIO CLAVE 3: Cuando el botón contiene el texto oculto, se vuelve círculo */
.locate-btn:has(> .hidden) {
    gap: 0px;
    border-radius: 30px; /* Fuerza la forma circular */
    /* 🎯 CORRECCIÓN: Sobrescribe la transición de 'border-radius'. Dura 0s (es instantáneo) 
       y espera 0.7s (el tiempo de la animación de encogimiento). Esto asegura que el 
       redondeo se aplica SOLO cuando el botón ya está encogido, eliminando el óvalo intermedio. */
    transition: border-radius 0s linear 0.7s, all 0.7s ease;
}

.locate-btn img {
    width: 25px;
    height: 25px;
    object-fit: contain;
    pointer-events: none;
    /* Añadimos un margen derecho para separar la imagen del texto */
}


/* 📢 ESTILOS DE LA ALERTA TEMPORAL CON ANIMACIÓN CLIP-PATH (PAC-MAN) */
.location-alert-text {
    /* ❌ ELIMINAMOS POSICIONAMIENTO ABSOLUTO Y RIGHT FIJO (es flex item) */
    position: static; 
    right: auto; 
    top: auto;
    transform: none; 
    
    /* Apariencia */
    padding: 2px 0; 
    background-color: transparent; 
    color: white;
    font-size: 14px;
    font-weight: bold;
    border-radius: 0; 
    box-shadow: none; 
    white-space: nowrap;
    z-index: 999; 
    
    /* Establecemos un ancho máximo para poder hacer la transición a 0 */
    max-width: 300px; 
    overflow: hidden;
    
    /* CONTROL DE ANIMACIÓN (CLAVE) */
    
    /* 1. Estado inicial: visible (clip-path cubre el 100% del elemento) */
    clip-path: inset(0% 0% 0% 0%); 
    
    /* 2. Transición: Animamos clip-path, opacidad y el ancho máximo (para encoger el botón) */
    transition: clip-path 0.7s ease-in-out, opacity 0.7s ease-in-out, max-width 0.7s ease-in-out; 
    
    pointer-events: none; 
}

/* Clase para ocultar (usada por JavaScript) */
.location-alert-text.hidden {
    /* 🎯 Efecto de Pac-Man: Se cierra el área visible de izquierda a derecha (hacia el botón) */
    /* clip-path: inset(Top Right Bottom Left) */
    /* Cerramos el borde derecho al 100% para simular que el botón lo oculta */
    clip-path: inset(0% 0% 0% 100%); 
    
    /* Reducimos la opacidad para un cierre suave */
    opacity: 0;
    
    /* 🎯 CAMBIO CLAVE para forzar el encogimiento del botón padre y que vuelva a ser redondo */
    max-width: 0; 
    /* Hacemos que la imagen se pegue al borde derecho quitando su margen */
}
/* === OPTIMIZACIÓN MÓVIL (< 600px) === */
@media (max-width: 600px) {
    .locate-btn {
        /* ❌ ELIMINAR EL FILTRO CARO EN MÓVIL */
        backdrop-filter: none;
    }
}

.locate-btn img {
    width: 35px;
    height: 35px;
    object-fit: contain;
    pointer-events: none;
}

/* ================================ */
/* 💡 EFECTO LUZ INTERMITENTE EN RUTA */
/* ================================ */

/* 1. Definición de la animación pulsante */
@keyframes pulse-route {
  0% {
    /* Estado inicial: Sombra transparente */
    filter: drop-shadow(0 0 0 rgba(255, 255, 0, 0.0)); 
  }
  50% {
    /* Estado máximo: Sombra brillante (luz neón) */
    filter: drop-shadow(0 0 10px #1E88E5); /* Amarillo brillante */
  }
  100% {
    /* Vuelve al estado inicial */
    filter: drop-shadow(0 0 0 rgba(255, 255, 0, 0.0));
  }
}

/* 2. Clase que aplica la animación a la línea de la ruta (SVG) */
/* La ruta de Leaflet es un elemento SVG <path> dentro del contenedor del mapa */
.route-pulsing .leaflet-routing-alt-line,
.route-pulsing path.leaflet-interactive {
    /* Aplica la animación */
    animation: pulse-route 1.5s infinite ease-in-out; /* 1.5s de duración, se repite */
}

.panel .linea {
    display: flex;
    justify-content: space-between;
    margin: 6px 0;
    font-size: 16px;
}

.panel .total {
    font-weight: bold;
    font-size: 18px;
    border-top: 1px solid #ddd;
    margin-top: 10px;
    padding-top: 8px;
}



#linea,
#recargo-nocturno {
    color: #d84315;
    /* Rojo-alarma */
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    display: flex;
    padding: 10px 15px;
    border-radius: 5px;
    display: none;
    /* Por defecto oculto; JS lo muestra cuando aplica */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    margin: 10px 0;
}


.btn-finalizar {
    width: 100%;
    margin-top: 10px;
    background: #4CAF50;
    color: white;
    border: none;
    padding: 12px;
    border-radius: 25px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
}

.btn-finalizar:hover {
    background: #43a047;
}

/*//////////////////////////////*