/* ==========================================================
   GALARMOBILITY - RESPONSIVE MOBILE TWEAKS (max-width: 768px)
   ========================================================== */

@media (max-width: 768px) {
    /* --- Catálogo (Grid) --- */
    #catalogGrid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    /* Target touch más grande para el botón de Detalle y Precio */
    .car-card button {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
        font-size: 0.85rem !important;
    }
    .car-card span.text-xl {
        font-size: 1.5rem !important;
        font-weight: 600 !important;
    }

    /* --- Barra de Filtros --- */
    /* Forzamos que se apilen como columnas al 100% */
    #index-filters-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
    }
    
    #index-filters-container > div {
        width: 100% !important;
    }
    
    /* Buscador arriba del todo mediante orden (aunque en HTML ya es el #1) */
    #index-filters-container > div:first-child {
        order: -1;
    }

    /* --- Página de Detalles --- */
    /* Eliminar márgenes laterales excesivos del contenedor Hero */
    #detalleContainer > div {
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    #detalleContainer {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* La foto principal 100% width real */
    #detailHeroImage {
        width: 100vw !important;
        max-width: 100% !important;
        object-fit: cover !important;
        margin-left: calc(-50vw + 50%); /* Hack para romper paddings padre si existieran */
    }

    /* Miniaturas horizontal scrollable */
    .custom-scrollbar {
        overflow-x: auto !important;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none;  /* IE and Edge */
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
    }
    .custom-scrollbar::-webkit-scrollbar {
        display: none; /* Chrome/Safari */
    }

    /* Botones de Contacto: apilar verticalmente / width 100% */
    #detailContactWrapper {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
    }
    #detailContactWrapper a, #detailContactWrapper button {
        width: 100% !important;
        min-height: 4rem !important; /* Touch target ampliado */
    }
}

/* ==========================================================
   GALARMOBILITY - BADGES DE ESTADO DE VEHÍCULO
   ========================================================== */

.status-badge {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0.45rem 2.2rem 0.45rem 0.85rem;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #ffffff;
    clip-path: polygon(0 0, 100% 0, 82% 100%, 0 100%);
    z-index: 10;
    pointer-events: none;
    border-radius: 0.75rem 0 0 0;
    /* sutil sombra para profundidad */
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.35));
    /* micro-animación de entrada */
    animation: badgeIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes badgeIn {
    from { opacity: 0; transform: translateX(-10px); }
    to   { opacity: 1; transform: translateX(0); }
}

.status-badge--reservado {
    background: linear-gradient(135deg, #ff8c00 0%, #e67700 100%);
    box-shadow: 0 4px 14px rgba(255, 140, 0, 0.45);
}

.status-badge--vendido {
    background: linear-gradient(135deg, #dc143c 0%, #a80e2d 100%);
    box-shadow: 0 4px 14px rgba(220, 20, 60, 0.45);
}

#view-leads .overflow-x-auto {
    display: flex;
    flex-direction: column-reverse;
    overflow-x: auto;
}

#view-leads .overflow-x-auto table {
    order: 1;
}