/* ==========================================================================
   COMPONENTES UI GLOBALES (Tarjetas, Botones, Formularios, Alertas)
   ========================================================================== */


.title-gradient {
    background: linear-gradient(45deg, #d32f2f, #ff9800);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    font-weight: 900; display: inline-block;
}


/* =========================================
   TARJETAS DE PRODUCTO (MOBILE-FIRST)
   ========================================= */
.product-card {
    background-color: var(--bg-card); border: 1px solid var(--border-card);
    border-radius: var(--border-radius-md); overflow: hidden; display: flex;
    flex-direction: column; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}


.product-card:hover { box-shadow: var(--box-shadow-md); transform: translateY(-4px); }


.product-image-container {
    width: 100%;
    aspect-ratio: 4 / 3; /* Automáticamente responsivo: mantiene la proporción sin importar el ancho */
    background-color: #ffffff;
    overflow: hidden;
}


.product-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.4s ease;
}


.product-card:hover .product-image { transform: scale(1.05); }


.product-content { padding: var(--spacing-md); display: flex; flex-direction: column; flex-grow: 1; }


.product-title {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(0.9rem, 3vw, 1rem); /* Fluido: Mínimo 0.9rem (Móvil), crece hasta 1rem (PC) */
    font-weight: 900; color: #0D2A61; margin-bottom: 5px; line-height: 1.2;
    /* [FASE 3 - CSS FIX] Protección: si el nombre es muy largo, corta a 3 líneas
       con "..." en vez de desbordar la tarjeta y romper la grilla. Con nombres
       cortos (la gran mayoría) no cambia nada visualmente: solo actúa si el
       texto ocuparía una 4ta línea. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: break-word;
}


.product-description {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-card-desc);
    margin-bottom: 10px;
    flex-grow: 1;
    /* Corta el texto largo automáticamente a 3 líneas */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}


.product-controls { display: flex; flex-direction: column; gap: var(--spacing-sm); margin-top: auto; }
.product-price-wrapper { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-xs); }
.product-price { font-size: clamp(1.05rem, 3vw, 1.15rem); font-weight: 800; color: var(--text-card-price); }


.unit-selector {
    width: 100%; padding: 0.4rem; font-size: 0.85rem; color: var(--text-card-title);
    background-color: var(--bg-card); border: 1px solid var(--border-card);
    border-radius: var(--border-radius-sm); cursor: pointer; appearance: none;
    transition: all 0.2s ease;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23212121%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat; background-position: right 0.7rem top 50%; background-size: 0.65rem auto;
    /* [FASE 3 - CSS FIX] Antes esta protección solo existía en el media query de
       celular (layout.css, <767px). La sumo acá a la regla base para que también
       aplique en tablet/escritorio. Con textos cortos no cambia nada visualmente. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.unit-selector:hover { border-color: var(--bg-btn-primary); }
.unit-selector:focus { border-color: var(--bg-btn-primary); outline: none; box-shadow: 0 0 0 2px var(--bg-input-focus); }


/* --- Estado "Sin stock" de una tarjeta de producto --- */
.product-sin-stock-box {
    display: flex; align-items: center; justify-content: center;
    flex-grow: 1; min-height: 84px; text-align: center;
    background-color: var(--bg-error-soft);
    border: 1px dashed rgba(211, 47, 47, 0.35);
    border-radius: var(--border-radius-sm);
    margin-bottom: var(--spacing-xs);
}


.product-sin-stock {
    font-size: 0.85rem; font-weight: 700; color: var(--color-error);
    text-transform: uppercase; letter-spacing: 0.3px;
}


.btn-sin-stock {
    background-color: #9ca3af; border-color: #9ca3af; color: var(--bg-surface);
    opacity: 0.55; cursor: not-allowed;
}
.btn-sin-stock:hover { background-color: #9ca3af; transform: none; box-shadow: none; }


/* =========================================
   BOTONES GENÉRICOS (MOBILE-FIRST)
   ========================================= */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 10px 15px; /* Más alto en móvil para tocar fácil con el dedo */
    font-size: 0.9rem; font-weight: 600;
    border-radius: var(--border-radius-sm); cursor: pointer; text-align: center; border: none;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}


.btn-primary { background-color: var(--bg-btn-primary); color: var(--text-btn-primary); width: 100%; padding: 10px 10px; font-size: 0.85rem; }
.btn-primary:hover { background-color: var(--bg-btn-primary-hover); transform: scale(1.03); box-shadow: 0 4px 8px rgba(40, 138, 236, 0.3); }
.btn-primary:active { transform: scale(0.98); box-shadow: 0 2px 4px rgba(40, 138, 236, 0.2); }


.btn-view-all {
    display: inline-block; padding: 12px 30px; color: var(--bg-btn-primary);
    border: 2px solid var(--bg-btn-primary); border-radius: 30px; font-weight: 700;
    text-transform: uppercase; text-decoration: none; transition: all 0.3s ease; background: transparent;
}
.btn-view-all:hover { background-color: var(--bg-btn-primary); color: var(--text-btn-primary); }


/* --- Mensajes de Estado --- */
.status-message { padding: var(--spacing-lg); text-align: center; border-radius: var(--border-radius-md); margin: var(--spacing-xl) 0; font-weight: 500; width: 100%; grid-column: 1 / -1; }
.status-loading { color: var(--bg-btn-primary); background-color: #E1F5FE; border: 1px dashed var(--bg-btn-primary); }
.status-empty { color: var(--text-card-desc); background-color: var(--bg-global); border: 1px solid var(--border-card); }
.status-error { color: var(--color-error); background-color: var(--bg-error-soft); border: 1px solid rgba(211, 47, 47, 0.3); }


/* ==========================================================================
   CARRUSEL (Altura fluida para PC y Altura destacada para Móvil)
   ========================================================================== */
.hero-carousel {
    margin-top: var(--header-height, 105px);
    position: relative;
    width: 100%;
    background-color: var(--bg-header);
    overflow: hidden;
    /* [FASE 11 - CARRUSEL FIX] Antes la altura del banner la decidía la
       proporción de la imagen que subieras (height:auto), así que una foto
       con proporción distinta a las habituales rompía el layout: se veía
       gigante/recortada rara, y además estiraba TODOS los slides (porque
       están en un flex row) dejando un hueco vacío enorme en los demás.
       Con aspect-ratio, el carrusel siempre tiene la misma altura relativa
       sin importar qué imagen subas. 12/5 sale de tus banners originales
       (1942x809px). */
    aspect-ratio: 12 / 5;
}


.carousel-track-container, .carousel-track, .carousel-slide {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}


.carousel-track {
    display: flex !important;
    transition: transform 0.5s ease-in-out;
    padding: 0;
    margin: 0;
    list-style: none;
}


.carousel-slide {
    position: relative;
    min-width: 100%;
}


/* [FASE 12 - CARRUSEL FIX] <picture> (en index.html envuelve al <img>) no
   tenía ningún estilo, así que quedaba con height:auto. Eso cortaba la
   cadena de porcentajes: el height:100% de .carousel-image no tenía contra
   qué resolverse, entonces la imagen volvía a mostrarse con su alto
   original en vez de estirarse a llenar la caja del carrusel. Se nota más
   en celular porque ahí la proporción del contenedor (4/3) es bien
   distinta a la proporción real de la foto (12/5). */
.carousel-slide picture {
    display: block;
    width: 100%;
    height: 100%;
}


/* [FASE 11 - CARRUSEL FIX] object-fit:cover pase lo que pase, en todas las
   pantallas: la imagen SIEMPRE llena la caja del carrusel (definida arriba
   por aspect-ratio) recortando prolijo desde el centro. Con esto ya no
   importa si subís una foto panorámica, cuadrada o vertical — nunca va a
   deformar ni agrandar el banner. */
.carousel-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
}


/* [FASE 13] Por ahora se decidió usar la misma proporción apaisada (12/5)
   en todas las pantallas, para que la foto se vea siempre completa y sin
   zoom/recorte — en celular el banner queda más bajito de alto, pero es
   la proporción real de la imagen. Si más adelante se suman imágenes
   específicas para mobile (recorte más vertical), acá es donde se
   volvería a poner un aspect-ratio distinto para este breakpoint. */


/* Botones del Carrusel - Ya eran Mobile First! */
.carousel-btn {
    position: absolute; top: 50%; transform: translateY(-50%);
    background-color: var(--bg-surface); border: 2px solid var(--bg-btn-primary);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5); cursor: pointer;
    width: 40px; height: 40px; /* Tamaño móvil */
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); z-index: 10;
}


.carousel-btn:hover {
    background-color: var(--bg-btn-primary); border-color: #ffffff;
    transform: translateY(-50%) scale(1.15); box-shadow: 0 6px 20px rgba(40, 138, 236, 0.6);
}


.carousel-btn svg { width: 22px; height: 22px; fill: var(--bg-btn-primary); transition: fill 0.3s ease; }
.carousel-btn:hover svg { fill: #ffffff; }


.btn-prev { left: 10px; }
.btn-next { right: 10px; }
.carousel-nav { position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 10; }
.carousel-indicator { border: 2px solid transparent; width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.5); cursor: pointer; transition: all 0.3s ease; padding: 0; }
.carousel-indicator:hover { background: rgba(255, 255, 255, 0.8); transform: scale(1.1); }
.carousel-indicator.current-indicator { background: var(--bg-btn-primary); transform: scale(1.2); border-color: rgba(0,0,0,0.1); }


/* [FASE 11 - CARRUSEL FIX] Se eliminó de acá un bloque "@media (max-width: 767px)"
   que, por un error de tipeo (debía decir "min-width"), volvía a pisar el
   fix de arriba en celular, sacándole el object-fit:cover y dejando que
   cualquier imagen se viera con su proporción cruda otra vez. */


/* ==========================================================================
   🛒 CARRITO DE COMPRAS LATERAL (Cart Drawer)
   ========================================================================== */


.cart-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0.45); z-index: 9998 !important; opacity: 0; visibility: hidden;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); backdrop-filter: blur(4px);
}
/* En navegadores mobile, la barra de direcciones/navegación hace que 100vh
   sea más alto que el área realmente visible. 100dvh sí tiene en cuenta ese
   espacio dinámico. Queda como segunda declaración: los navegadores viejos
   que no reconocen "dvh" simplemente ignoran esta línea y se quedan con el
   100vh de arriba. */
@supports (height: 100dvh) {
    .cart-overlay { height: 100dvh; }
}
.cart-overlay.active { opacity: 1; visibility: visible; }


/* Drawer Responsivo: 100% en móvil, 420px en PC */
.cart-drawer {
    position: fixed; top: 0; right: -100%; /* Oculto completamente fuera de la pantalla */
    width: 100%; max-width: 420px; height: 100vh;
    background-color: var(--bg-surface, #ffffff); z-index: 9999 !important;
    display: flex; flex-direction: column;
    box-shadow: -10px 0 35px rgba(0, 0, 0, 0.15);
    transition: right 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
@supports (height: 100dvh) {
    .cart-drawer { height: 100dvh; }
}
.cart-drawer.open { right: 0; }


/* Espaciados base (Móvil) */
.cart-header, .cart-footer { padding: 1rem; }
.cart-body { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 1rem; }


/* Espaciados PC */
@media (min-width: 768px) {
    .cart-header, .cart-footer { padding: 1.25rem 1.5rem; }
    .cart-body { padding: 1.25rem 1.5rem; }
}


.cart-header { border-bottom: 1px solid #e5e7eb; display: flex; justify-content: space-between; align-items: center; background-color: #f9fafb; }
.cart-header h2 { font-size: 1.2rem; margin: 0; color: #111827; font-weight: 900; letter-spacing: 0.5px; }


.close-cart-btn { font-size: 1.8rem; background: none; border: none; cursor: pointer; color: #9ca3af; transition: all 0.2s ease; }
.close-cart-btn:hover { color: #111827; transform: scale(1.1) rotate(90deg); }


@keyframes slideInItem { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }


.cart-item { display: flex; align-items: center; gap: 12px; padding-bottom: 1rem; border-bottom: 1px solid #f0f0f0; animation: slideInItem 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) forwards; }
.cart-item-thumb-wrapper { width: 60px; height: 60px; border-radius: 8px; overflow: hidden; background-color: #f3f4f6; flex-shrink: 0; border: 1px solid #e5e7eb; }
.cart-item-thumb { width: 100%; height: 100%; object-fit: cover; }
.cart-item-info { flex: 1; min-width: 0; }
.cart-item-title { font-weight: 800; font-size: 0.88rem; color: #111827; margin-bottom: 2px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cart-item-unit { font-size: 0.78rem; color: #6b7280; margin-bottom: 8px; font-weight: 600; }


.cart-item-controls-row { display: flex; align-items: center; gap: 8px; }
.qty-label { font-size: 0.7rem; font-weight: 800; color: #9ca3af; letter-spacing: 0.5px; }
.cart-item-controls { display: flex; align-items: center; gap: 4px; }
.qty-btn { background: var(--bg-surface); border: 1px solid #d1d5db; width: 28px; height: 28px; border-radius: 5px; cursor: pointer; font-weight: 800; color: #111827; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; font-size: 0.85rem;}
.qty-btn:hover:not(:disabled) { background: #111827; color: var(--bg-surface); border-color: #111827; }
.qty-btn:disabled { opacity: 0.25; cursor: not-allowed; background: #f3f4f6; color: #9ca3af; }
.qty-value { font-size: 0.85rem; font-weight: 800; width: 20px; text-align: center; color: #111827; }


.cart-item-price-col { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; align-self: stretch; }
.cart-item-price { font-weight: 900; color: var(--text-card-price); font-size: 1rem; }
.remove-btn { color: #9ca3af; background: none; border: none; font-size: 0.72rem; font-weight: 700; cursor: pointer; text-transform: uppercase; letter-spacing: 0.5px; padding: 2px 0; transition: color 0.2s ease;}
.remove-btn:hover { color: var(--color-error); }


.cart-footer { border-top: 2px solid #e5e7eb; background-color: var(--bg-surface, #ffffff); box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.03); }
.cart-total-row { display: flex; justify-content: space-between; align-items: center; font-size: 1.2rem; font-weight: 800; color: #111827; margin-bottom: 0.6rem; }
#cart-drawer-total { color: var(--text-card-price); font-weight: 900; font-size: 1.4rem; }


.cart-legal-text { font-size: 0.75rem; color: #6b7280; margin-bottom: 1rem; line-height: 1.4; font-weight: 500; }


/* --- Monto Mínimo de Compra: etiqueta permanente (informativa) + aviso (cuando falta) --- */
.cart-minimo-tag {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e8f9ee;
    color: #1a7f37;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 6px 10px;
    border-radius: 20px;
    margin-bottom: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border: 1px solid #b8ecc9;
}


.cart-minimo-aviso {
    display: none;
    background-color: #fff8e1;
    color: #856404;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    text-align: center;
    line-height: 1.4;
    border: 1px solid #ffe088;
}


.btn-checkout { padding: 16px; font-size: 1rem; border-radius: var(--border-radius-md); text-transform: uppercase; font-weight: 800; letter-spacing: 0.5px; display: flex; justify-content: center; align-items: center; transition: all 0.3s ease; }
.btn-checkout:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(37, 137, 237, 0.3); }


.btn-continue-shopping { width: 100%; margin-top: 0.75rem; padding: 12px; background-color: transparent; color: #15151c; border: 2px solid #326de1; border-radius: var(--border-radius-md); font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; cursor: pointer; transition: all 0.3s ease; }
.btn-continue-shopping:hover { background-color: #a0a8ba; color: #0d121d; border-color: #a3c9ff; transform: translateY(-2px); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); }


/* ==========================================================================
   ZONAS DE ENTREGA Y ANIMACIÓN DEL CAMIONCITO
   ========================================================================== */
@keyframes drivingTruck {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-3px) rotate(-2deg); }
    50% { transform: translateY(1px) rotate(1deg); }  
    75% { transform: translateY(-2px) rotate(0deg); }
}


.truck-icon { width: 45px; height: 45px; fill: var(--bg-surface); margin-right: 5px; animation: drivingTruck 1.2s infinite linear; }
.zones-pill-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-bottom: 2.5rem; }
.zones-pill-list li { background-color: rgba(255, 255, 255, 0.08); color: var(--bg-surface); padding: 10px 22px; border-radius: 50px; font-size: 0.95rem; font-weight: 600; border: 1px solid rgba(255, 255, 255, 0.2); transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); cursor: default; }
.zones-pill-list li:hover { background-color: var(--bg-surface); color: var(--bg-btn-primary); border-color: var(--bg-surface); box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3); transform: translateY(-3px); }


/* ==========================================================================
   LIGHTBOX GALLERY (Modal exclusivo para ampliar promociones del Carrusel)
   ========================================================================== */


.carousel-image {
    cursor: pointer;
}


.lightbox-modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.92);
    align-items: center;
    justify-content: center;
    flex-direction: column;
}


.lightbox-content {
    max-width: 90%;
    max-height: 85vh;
    object-fit: contain !important;
    box-shadow: 0 4px 25px rgba(0,0,0,0.8);
    border-radius: 8px;
}


.lightbox-close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: #ffffff;
    font-size: 45px;
    font-weight: bold;
    cursor: pointer;
    z-index: 10001;
}


.lightbox-close:hover { color: var(--bg-btn-primary, #288aec); }


.lightbox-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: none;
    font-size: 2rem;
    padding: 12px 18px;
    cursor: pointer;
    border-radius: 8px;
    z-index: 10001;
}


.lightbox-btn:hover { background: rgba(255, 255, 255, 0.4); }
.lightbox-btn.prev { left: 20px; }
.lightbox-btn.next { right: 20px; }


@media (max-width: 767px) {
    .lightbox-btn { padding: 8px 12px; font-size: 1.5rem; }
    .lightbox-btn.prev { left: 8px; }
    .lightbox-btn.next { right: 8px; }
    .lightbox-content { max-width: 95%; max-height: 80vh; }
    .lightbox-close { right: 15px; top: 10px; }
}