/* LAYOUT CATÁLOGO */
.catalogo-layout { display: flex; gap: 40px; margin-top: 100px; padding-bottom: 80px; align-items: flex-start; }

/* SIDEBAR FILTROS (CON SCROLL INTERNO) */
.filtros-sidebar { width: 280px; background: var(--card-bg); padding: 25px; border-radius: 15px; border: 1px solid #333; flex-shrink: 0; position: sticky; top: 100px; max-height: calc(100vh - 120px); overflow-y: auto; }
.scroll-custom::-webkit-scrollbar { width: 6px; }
.scroll-custom::-webkit-scrollbar-track { background: #1a1a1a; border-radius: 10px; }
.scroll-custom::-webkit-scrollbar-thumb { background: #444; border-radius: 10px; }
.scroll-custom::-webkit-scrollbar-thumb:hover { background: var(--green-accent); }

.filtro-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; border-bottom: 1px solid #444; padding-bottom: 10px; }
.filtro-header h3 { font-weight: 900; font-size: 1.2rem; }
.btn-clear { background: none; border: none; color: var(--green-accent); cursor: pointer; font-size: 14px; font-weight: 700; }
.btn-clear:hover { text-decoration: underline; }

/* ESTILOS DE ACORDEONES PARA FILTROS */
.filtro-section { border-bottom: 1px solid #333; margin-bottom: 15px; }
.filtro-section:last-child { border-bottom: none; }
.btn-accordion { width: 100%; background: transparent; border: none; color: var(--white); font-size: 15px; font-weight: 700; text-align: left; padding: 10px 0 15px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.btn-accordion i { color: var(--green-accent); transition: transform 0.3s ease; }
.accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.4s ease-in-out; }
.filtro-section.active .accordion-content { max-height: 1000px; }
.filtro-section.active .btn-accordion i { transform: rotate(180deg); }

.accordion-content .filtro-grupo { padding: 0 5px 15px; margin-bottom: 0; }
.filtro-grupo label { display: block; font-size: 14px; color: var(--gray-text); margin-bottom: 8px; font-weight: 500; }
.filter-input { width: 100%; padding: 12px; background: #111; border: 1px solid #444; border-radius: 8px; color: white; font-family: 'Roboto', sans-serif; }
.filter-input:focus { outline: 1px solid var(--green-accent); }

/* BARRA SUPERIOR CATÁLOGO */
.catalogo-main { flex-grow: 1; min-width: 0; }
.catalogo-top-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; background: var(--card-bg); padding: 15px 25px; border-radius: 10px; border: 1px solid #333; }
.font-bold { font-weight: 900; }

.view-toggles { display: flex; gap: 10px; }
.btn-view { background: transparent; border: 1px solid #555; color: #888; width: 40px; height: 40px; border-radius: 8px; cursor: pointer; font-size: 18px; transition: 0.3s; }
.btn-view:hover, .btn-view.active { background: var(--green-accent); color: #000; border-color: var(--green-accent); }

/* ETIQUETAS SOBRE LA IMAGEN (AÑO, TIPO Y ESTATUS GIGANTE) */
.car-img { position: relative; overflow: hidden; }
.car-img img { width: 100%; display: block; }
.year-badge { position: absolute; bottom: 10px; left: 10px; background: var(--green-accent); color: #000; padding: 5px 10px; border-radius: 5px; font-weight: 900; font-size: 14px; z-index: 10; }
.type-badge { position: absolute; top: 10px; right: 10px; background: rgba(17, 17, 17, 0.85); color: var(--white); border: 1px solid var(--green-accent); padding: 4px 10px; border-radius: 6px; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; backdrop-filter: blur(2px); z-index: 10; }

/* CAPA OSCURA PARA VENDIDO / APARTADO */
.status-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.65);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5; 
}
.status-badge {
    background: #ff5252;
    color: white;
    padding: 10px 25px;
    font-size: 1.6rem;
    font-weight: 900;
    text-transform: uppercase;
    border-radius: 8px;
    transform: rotate(-15deg);
    letter-spacing: 2px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    border: 2px solid #fff;
}
.status-apartado {
    background: #ff9800;
}

/* VISTA GRID (MOSAICOS) */
.layout-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 25px; }

/* VISTA LISTA ESCRITORIO */
.layout-list { display: flex; flex-direction: column; gap: 20px; }
.layout-list .car-card { display: flex; flex-direction: row; align-items: center; }
.layout-list .car-img { width: 300px; height: 200px; flex-shrink: 0; }
.layout-list .car-img img { height: 100%; object-fit: cover; }
.layout-list .car-info { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; padding: 30px; }
.layout-list .btn-details { width: 200px; margin-top: auto; }

/* PAGINACIÓN (AJUSTADA) */
.pagination-container { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 50px; flex-wrap: wrap; }
.btn-page { background: var(--card-bg); border: 1px solid #444; color: white; min-width: 40px; height: 40px; padding: 0 10px; border-radius: 8px; cursor: pointer; font-weight: 700; transition: 0.3s; display: flex; justify-content: center; align-items: center; }
.btn-page:hover:not(:disabled), .btn-page.active { background: var(--green-accent); color: #000; border-color: var(--green-accent); }
.btn-page:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
.pagination-dots { color: var(--gray-text); font-weight: 900; padding: 0 5px; }

/* MÓVIL Y TABLET */
.btn-mobile-filters { display: none; width: 100%; padding: 15px; background: var(--card-bg); color: white; border: 1px solid #444; border-radius: 10px; font-weight: 700; margin-bottom: 20px; cursor: pointer; }

@media (max-width: 992px) {
    .catalogo-layout { flex-direction: column; margin-top: 80px; }
    .btn-mobile-filters { display: block; }
    .filtros-sidebar { width: 100%; position: static; display: none; max-height: none; } 
    .filtros-sidebar.show { display: block; }
}

/* LA MAGIA DE LA VISTA LISTA EN MÓVIL */
@media (max-width: 768px) {
    .layout-list .car-card { flex-direction: row; align-items: stretch; padding: 0; }
    .layout-list .car-img { width: 130px; height: auto; min-height: 120px; flex-shrink: 0; }
    .layout-list .car-img img { height: 100%; border-radius: 15px 0 0 15px; } 
    .layout-list .status-overlay { border-radius: 15px 0 0 15px; } 
    
    .layout-list .year-badge { font-size: 10px; padding: 3px 8px; bottom: 8px; left: 8px; }
    .layout-list .type-badge { font-size: 9px; padding: 2px 6px; top: 8px; right: 8px; }
    .layout-list .status-badge { font-size: 0.8rem; padding: 5px 10px; transform: rotate(-10deg); border-width: 1px; }
    
    .layout-list .car-info { padding: 15px; flex-grow: 1; display: flex; flex-direction: column; justify-content: center; }
    .layout-list .car-info h3 { font-size: 1.05rem; line-height: 1.2; margin-bottom: 5px; }
    .layout-list .km { font-size: 0.8rem; }
    .layout-list .price { font-size: 1.2rem; margin: 8px 0; }
    .layout-list .btn-details { width: 100%; padding: 10px; font-size: 0.9rem; margin-top: 5px; }
}