/* ============================================================
   DESIGN TOKENS — sistema unificado de colores y estilos
   ============================================================ */
:root {
    --brand: #f97316;
    --brand-soft: #fff7ed;
    --brand-strong: #c2410c;
    --brand-glow: rgba(249, 115, 22, 0.15);

    --success: #166534;
    --success-soft: #f0fdf4;
    --info: #1e40af;
    --info-soft: #dbeafe;
    --warning: #ca8a04;
    --warning-soft: #fef9c3;
    --danger: #dc2626;
    --danger-soft: #fee2e2;

    --spec-year-bg: #dbeafe;     --spec-year-fg: #1e40af;
    --spec-km-bg: #dcfce7;       --spec-km-fg: #166534;
    --spec-fuel-bg: #ffedd5;     --spec-fuel-fg: #9a3412;
    --spec-gear-bg: #f3e8ff;     --spec-gear-fg: #6b21a8;
    --spec-room-bg: #fce7f3;     --spec-room-fg: #9d174d;
    --spec-area-bg: #e0e7ff;     --spec-area-fg: #3730a3;

    --text: #111827;
    --text-soft: #6b7280;
    --text-soft2: #9ca3af;
    --border: #e5e7eb;
    --border-soft: #f3f4f6;
    --bg: #f9fafb;

    --radius-sm: 6px;
    --radius: 10px;
    --radius-lg: 16px;
    --radius-pill: 999px;

    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-hover: 0 12px 24px -8px rgba(0, 0, 0, 0.15);
}

/* ============================================================
   SPEC PILLS — badges semánticos para tarjetas de anuncio
   Aplica a .rv2-card-spec, .vi-ad-spec, .vb-ad-spec, .vm-ad-spec, .vv-ad-spec
   ============================================================ */
.rv2-card-spec,
.vi-ad-spec,
.vb-ad-spec,
.vm-ad-spec,
.vv-ad-spec {
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    padding: 4px 10px !important;
    border-radius: var(--radius-pill) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    background: var(--border-soft);
    color: var(--text-soft);
    border: none !important;
    line-height: 1.2;
}
.rv2-card-spec i,
.vi-ad-spec i,
.vb-ad-spec i,
.vm-ad-spec i,
.vv-ad-spec i {
    font-size: 10px !important;
    color: inherit !important;
}

.spec-year { background: var(--spec-year-bg) !important; color: var(--spec-year-fg) !important; }
.spec-km { background: var(--spec-km-bg) !important; color: var(--spec-km-fg) !important; }
.spec-fuel { background: var(--spec-fuel-bg) !important; color: var(--spec-fuel-fg) !important; }
.spec-gear { background: var(--spec-gear-bg) !important; color: var(--spec-gear-fg) !important; }
.spec-room { background: var(--spec-room-bg) !important; color: var(--spec-room-fg) !important; }
.spec-area { background: var(--spec-area-bg) !important; color: var(--spec-area-fg) !important; }

.rv2-card-specs,
.vi-ad-specs,
.vb-ad-specs-row,
.vm-ad-specs-row,
.vv-ad-specs {
    gap: 5px !important;
}

/* ============================================================
   CTA BUTTON — botón "Ver detalle" en tarjetas
   ============================================================ */
.card-cta {
    background: var(--brand);
    color: #fff !important;
    padding: 7px 14px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    border: none;
    cursor: pointer;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s;
    white-space: nowrap;
}
.card-cta:hover {
    background: var(--brand-strong);
    transform: translateX(2px);
}

/* ============================================================
   HERO STATS CHIPS
   ============================================================ */
.hero-stats {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.hero-stat-chip {
    background: #fff;
    border: 1px solid var(--border);
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    color: var(--text);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    box-shadow: var(--shadow-card);
}
.hero-stat-chip i { color: var(--brand); font-size: 11px; }
.hero-stat-chip.alt i { color: var(--info); }
.hero-stat-chip.alt2 i { color: var(--success); }

/* ============================================================
   CARD IMAGES — fix fotos verticales (forzar crop, no expandir)
   ============================================================ */
.rv2-card-image,
.vi-ad-thumb,
.vb-ad-thumb,
.vm-ad-thumb,
.vv-ad-thumb {
    overflow: hidden !important;
}
.rv2-card-image img,
.vi-ad-thumb img,
.vb-ad-thumb img,
.vm-ad-thumb img,
.vv-ad-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block;
}

/* ============================================================
   LAYOUT SHIM — alinear wrappers vi-*/vb-*/vm-*/vv-* con rv2-*
   Coches usa vi-* por complejidad (brands grid, year stats, etc.)
   pero visualmente equivalente a rv2-* en el resto.
   ============================================================ */
.vi-main, .vb-main, .vm-main, .vv-main {
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 16px !important;
    display: flex !important;
    gap: 16px !important;
    align-items: flex-start !important;
}
.vi-sidebar, .vb-sidebar, .vm-sidebar, .vv-sidebar {
    width: 280px !important;
    flex-shrink: 0 !important;
    background: #fff !important;
    border-radius: var(--radius-lg) !important;
    padding: 0 !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-card) !important;
    position: sticky !important;
    top: 16px !important;
    overflow: hidden !important;
}
.vi-content, .vb-content, .vm-content, .vv-content {
    flex: 1 !important;
    min-width: 0 !important;
}

.vi-ad-item, .vb-ad-item, .vm-ad-item, .vv-ad-item {
    display: flex !important;
    flex-direction: row !important;
    background: #fff !important;
    border-radius: var(--radius-lg) !important;
    overflow: hidden !important;
    box-shadow: var(--shadow-card) !important;
    border: 1px solid var(--border) !important;
    transition: all 0.25s ease !important;
    text-decoration: none !important;
    color: inherit !important;
}
.vi-ad-list, .vb-ad-list, .vm-ad-list, .vv-ad-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}
.vi-ad-info, .vb-ad-info, .vm-ad-info, .vv-ad-info {
    flex: 1 !important;
    padding: 14px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    min-width: 0 !important;
}
.vi-ad-title, .vb-ad-title, .vm-ad-title, .vv-ad-title {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--text) !important;
    line-height: 1.3 !important;
}
.vi-ad-price, .vb-ad-price, .vm-ad-price, .vv-ad-price {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--brand) !important;
}
.vi-results-bar, .vb-results-bar, .vm-results-bar, .vv-results-bar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 12px 16px !important;
    background: #fff !important;
    border-radius: var(--radius) !important;
    border: 1px solid var(--border) !important;
    margin-bottom: 12px !important;
    box-shadow: var(--shadow-card) !important;
}
.vi-filter-card, .vb-filter-card, .vm-filter-card, .vv-filter-card {
    padding: 16px !important;
    border-bottom: 1px solid var(--border) !important;
    margin: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
}
.vi-filter-card:last-child, .vb-filter-card:last-child,
.vm-filter-card:last-child, .vv-filter-card:last-child {
    border-bottom: none !important;
}
.vi-filter-card h3, .vb-filter-card h3, .vm-filter-card h3, .vv-filter-card h3 {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--text-soft) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    margin: 0 0 10px 0 !important;
}

/* ============================================================
   CARD HOVER mejorado (común a todos los layouts)
   ============================================================ */
@media (hover: hover) and (pointer: fine) {
    .rv2-card:hover,
    .vi-ad-item:hover,
    .vb-ad-item:hover,
    .vm-ad-item:hover,
    .vv-ad-item:hover {
        box-shadow: var(--shadow-hover) !important;
        border-color: var(--brand) !important;
        transform: translateY(-2px) !important;
    }
}

/* ============================================================
   MOBILE OVERRIDES (≤768px)
   IMPORTANTE: este bloque DEBE ir al final del archivo, después
   de todas las reglas globales !important. CSS cascade: con
   misma especificidad, gana la última declarada. Si se mueve
   arriba, las reglas globales (.vi-main flex row, .vi-sidebar
   sticky 280px, .vi-ad-item flex-direction row) ganan en móvil.
   ============================================================ */
@media (max-width: 768px) {
    /* Layout principal: stack vertical, sin sidebar fija */
    .vi-main, .vb-main, .vm-main, .vv-main {
        flex-direction: column !important;
        padding: 12px 16px 30px !important;
        gap: 12px !important;
    }

    /* Sidebar = drawer off-canvas */
    .vi-sidebar, .vb-sidebar, .vm-sidebar, .vv-sidebar {
        position: fixed !important;
        top: 0 !important;
        left: -100% !important;
        bottom: 0 !important;
        width: 85% !important;
        max-width: 340px !important;
        height: 100% !important;
        max-height: 100% !important;
        z-index: 2147483647 !important;
        background: #f8fafc !important;
        padding: 48px 20px 20px !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: 0 8px 24px rgba(0,0,0,0.18) !important;
        overflow-y: auto !important;
        transition: left 0.3s ease !important;
    }
    .vi-sidebar.open, .vb-sidebar.open, .vm-sidebar.open, .vv-sidebar.open {
        left: 0 !important;
    }

    /* Cards: stack vertical (foto arriba, info debajo) */
    .vi-ad-item, .vb-ad-item, .vm-ad-item, .vv-ad-item {
        flex-direction: column !important;
        min-height: 0 !important;
    }
    .vi-ad-thumb, .vb-ad-thumb, .vm-ad-thumb, .vv-ad-thumb {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 180px !important;
        max-height: 240px !important;
        aspect-ratio: 16 / 10 !important;
        flex-shrink: 0 !important;
    }
    .vi-ad-thumb img, .vb-ad-thumb img, .vm-ad-thumb img, .vv-ad-thumb img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
    .vi-ad-info, .vb-ad-info, .vm-ad-info, .vv-ad-info {
        padding: 12px 14px !important;
        width: 100% !important;
        min-width: 0 !important;
    }
    .vi-ad-title, .vb-ad-title, .vm-ad-title, .vv-ad-title {
        font-size: 15px !important;
        line-height: 1.35 !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        display: block !important;
        -webkit-line-clamp: unset !important;
    }
    .vi-ad-price, .vb-ad-price, .vm-ad-price, .vv-ad-price {
        font-size: 18px !important;
    }
}