/* ==============================================
   1. TEMA BASE (GLOBAL)
   ============================================== */
html, body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: #121212;
    color: #e0e0e0;
    margin: 0;
    padding: 0;
}

h1, h2, h3, h4, h5, h6 {
    color: #ffffff;
    font-weight: 600;
}

p {
    line-height: 1.6;
    color: #b0b0b0;
}

a {
    color: #4dabf7;
    text-decoration: none;
}

    a:hover {
        text-decoration: underline;
    }

/* ==============================================
   2. LAYOUT PRINCIPAL (CENTRA LA PÁGINA)
   ============================================== */
.page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1;
}

.content {
    /* Define el ancho máximo y centra el contenido */
    max-width: 1400px;
    margin: 20px auto;
    padding: 0 20px;
}

/* ==============================================
   3. FILTROS (CON LAYOUT FLEX)
   ============================================== */
.filtros-container {
    /* Layout */
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-end;
    /* Estilo Dark Mode */
    background-color: #1e1e1e;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 25px;
}

.filtro-item {
    display: flex;
    flex-direction: column;
}

    .filtro-item label {
        color: #ccc;
        font-weight: 500;
        margin-bottom: 5px;
        font-size: 0.9rem;
    }

    .filtro-item select,
    .filtro-item input[type="search"] {
        background-color: #2c2c2c;
        border: 1px solid #444;
        color: #fff;
        border-radius: 5px;
        padding: 10px;
        min-width: 200px;
    }

.filtro-item-boton button {
    background-color: #0d6efd;
    color: white;
    font-weight: 500;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s;
    padding: 10px 20px;
}

    .filtro-item-boton button:hover {
        background-color: #0b5ed7;
    }

/* ==============================================
   4. CATÁLOGO (CON LAYOUT GRID)
   ============================================== */
.catalogo-grid {
    /* Layout */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 25px;
}

.producto-card {
    /* Estilo Dark Mode */
    background-color: #1e1e1e;
    border: 1px solid #333;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

    .producto-card:hover {
        transform: translateY(-5px);
        border-color: #0d6efd;
    }

    .producto-card img {
        width: 100%;
        height: 250px;
        object-fit: cover;
        border-bottom: 1px solid #333;
    }

.producto-info {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

    .producto-info h5 {
        color: #fff;
        font-size: 1.1rem;
        font-weight: 600;
        margin-top: 0;
        margin-bottom: 10px;
    }

/* Badges y Precios */
.info-categoria {
    background-color: #333;
    color: #ccc;
    font-size: 0.8rem;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 15px;
    align-self: flex-start;
    margin-bottom: 12px;
}

.producto-info .precio {
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 15px;
}

.precio-tachado {
    color: #888;
    font-weight: 400;
    font-size: 0.9rem;
    margin-right: 8px;
}

.precio-oferta {
    color: #20c997; /* Verde oferta */
    font-weight: 700;
}

.btn-detalle {
    background-color: #0d6efd;
    color: #fff;
    font-weight: 500;
    text-align: center;
    border-radius: 5px;
    padding: 12px 15px;
    margin-top: auto; /* Empuja el botón al fondo */
    transition: background-color 0.2s ease;
}

    .btn-detalle:hover {
        background-color: #0b5ed7;
        color: #fff;
        text-decoration: none;
    }
/* ==============================================
   5. PÁGINA DE DETALLE DE PRODUCTO
   ============================================== */

.detalle-container {
    /* Contenedor principal con fondo de componente */
    background-color: #1e1e1e;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 25px;
}

.btn-volver {
    background: none;
    border: none;
    color: #4dabf7; /* Azul de enlace */
    font-size: 1rem;
    cursor: pointer;
    padding: 0;
    margin-bottom: 20px;
}

    .btn-volver:hover {
        text-decoration: underline;
    }

.detalle-grid {
    display: grid;
    grid-template-columns: 1fr; /* Una columna en móviles */
    gap: 30px;
}

/* En pantallas más grandes (tablets/desktop), usamos 2 columnas */
@media (min-width: 768px) {
    .detalle-grid {
        grid-template-columns: 1fr 1fr; /* 50% y 50% */
    }
}

/* Columna Izquierda: Imágenes */
.columna-imagenes {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.imagen-principal-container {
    background-color: #121212; /* Fondo del body */
    border: 1px solid #333;
    border-radius: 8px;
    overflow: hidden;
}

    .imagen-principal-container img {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1; /* Mantiene la imagen cuadrada */
        object-fit: contain; /* 'contain' para ver el producto completo */
    }

.galeria-miniaturas {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.miniatura-container {
    width: 80px;
    height: 80px;
    border: 2px solid #444;
    border-radius: 5px;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.2s;
}

    .miniatura-container:hover {
        border-color: #0d6efd;
    }

    .miniatura-container.seleccionada {
        border-color: #4dabf7; /* Azul brillante */
        box-shadow: 0 0 8px rgba(77, 171, 247, 0.5);
    }

    .miniatura-container img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* Columna Derecha: Información */
.columna-info {
    display: flex;
    flex-direction: column;
}

    .columna-info h1 {
        font-size: 2rem;
        font-weight: 700;
        color: #fff;
        margin-top: 10px;
        margin-bottom: 15px;
    }

.estado-vendido {
    font-size: 1.2rem;
    font-weight: 700;
    color: #dc3545; /* Rojo */
    border: 2px solid #dc3545;
    padding: 10px;
    text-align: center;
    border-radius: 8px;
    margin-bottom: 20px;
}

/* Precios en Detalle */
.precio-detalle-normal {
    font-size: 2.2rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 20px;
}

.precio-detalle-oferta {
    margin-bottom: 20px;
}

    .precio-detalle-oferta .precio-oferta {
        font-size: 2.2rem;
        color: #20c997; /* Verde oferta */
        font-weight: 700;
        margin-right: 15px;
    }

    .precio-detalle-oferta .precio-tachado {
        font-size: 1.5rem;
        color: #888;
    }

/* Descripción */
.descripcion {
    border-top: 1px solid #333;
    padding-top: 20px;
    margin-top: 10px;
}

    .descripcion h4 {
        font-size: 1.1rem;
        font-weight: 600;
        color: #fff;
        margin-bottom: 10px;
    }

    .descripcion p {
        color: #ccc;
        line-height: 1.7;
    }

/* Botones de Acción */
.acciones-compra {
    margin-top: auto; /* Empuja los botones al fondo de la columna */
    padding-top: 20px;
}

.btn-primario {
    background-color: #0d6efd;
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 12px 20px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
    text-align: center;
}

    .btn-primario:hover {
        background-color: #0b5ed7;
        color: #fff;
        text-decoration: none;
    }

    .btn-primario.btn-grande {
        padding: 15px 25px;
        font-size: 1.1rem;
        width: 100%; /* Opcional: Ocupa todo el ancho */
    }

    .btn-primario .oi {
        margin-right: 8px;
    }
    /*Destacados*/
/* ==============================================
   6. PÁGINA DE INICIO (HOME) Y CARRUSEL
   ============================================== */

.carrusel-wrapper {
    position: relative; /* Padre para los botones absolutos */
}

.carrusel-container {
    display: flex;
    gap: 20px;
    padding: 10px;
    /* ¡MAGIA PARA OCULTAR EL SCROLLBAR! */
    overflow-x: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE y Edge */
}

    .carrusel-container::-webkit-scrollbar {
        display: none; /* Chrome, Safari y Opera */
    }

    .carrusel-container .producto-card {
        flex: 0 0 300px;
        scroll-snap-align: start;
    }

.card-link-wrapper {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
}

    .card-link-wrapper .producto-info {
        flex-grow: 1;
    }

.carrusel-container .producto-card {
    display: flex;
    flex-direction: column;
}

    .carrusel-container .producto-card .btn-detalle {
        margin: 0 20px 20px 20px;
        margin-top: 0;
    }

/* Estilos para los botones de flecha */
.carrusel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%); /* Centrado vertical */
    z-index: 10;
    background-color: rgba(0, 0, 0, 0.5);
    border: 1px solid #555;
    color: #fff;
    border-radius: 50%; /* Círculo perfecto */
    width: 40px;
    height: 40px;
    cursor: pointer;
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .carrusel-btn:hover {
        background-color: rgba(0, 0, 0, 0.8);
    }

    .carrusel-btn.btn-prev {
        left: -15px; /* Ligeramente fuera del contenedor */
    }

    .carrusel-btn.btn-next {
        right: -15px; /* Ligeramente fuera del contenedor */
    }
    /*/*/
/* ==============================================
   7. BADGE DE DESCUENTO
   ============================================== */

.card-image-container {
    position: relative; /* Contenedor padre para el badge */
}

.descuento-badge {
    position: absolute; /* Posicionamiento absoluto */
    top: 10px; /* 10px desde arriba */
    left: 10px; /* 10px desde la izquierda */

    background-color: #dc3545; /* Rojo de "peligro" o "descuento" */
    color: #fff;
    padding: 4px 8px;
    border-radius: 5px;
    font-size: 0.9rem;
    font-weight: 700;
    z-index: 2; /* Nos aseguramos que esté sobre la imagen */
}
/**/
/* Estilos para el encabezado de sección (Ofertas Destacadas / Ver Todas) */
.section-header {
    display: flex;
    justify-content: space-between; /* Título a la izq, link a la der */
    align-items: center;
    border-bottom: 2px solid #0d6efd;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

    .section-header h2 {
        margin: 0;
        border: none; /* Quitamos el borde que tenía antes el h2 solo */
        padding: 0;
    }

.ver-todo-link {
    color: #4dabf7; /* Azul de enlace */
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s;
}

    .ver-todo-link:hover {
        color: #fff;
        text-decoration: underline;
    }
/* ==============================================
   PARCHE DE EMERGENCIA PARA FLECHAS DE CARRUSEL
   ============================================== */

/* 1. Aseguramos que el "padre" tenga posición relativa */
.carrusel-wrapper {
    position: relative;
}

/* 2. Estilos principales del botón */
.carrusel-btn {
    /* Posicionamiento */
    position: absolute;
    top: 50%;
    transform: translateY(-50%); /* Centrado vertical */
    z-index: 10;
    /* Apariencia */
    background-color: rgba(30, 30, 30, 0.7); /* Fondo semi-transparente */
    border: 1px solid #777;
    color: #fff;
    border-radius: 50%; /* Círculo */
    width: 45px; /* Un poco más grandes para que sean obvios */
    height: 45px;
    cursor: pointer;
    /* Importante para centrar el ícono */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
}

    .carrusel-btn:hover {
        background-color: rgba(0, 0, 0, 0.9);
    }

    /* 3. Posición específica para c/u */
    .carrusel-btn.btn-prev {
        left: -20px; /* Lo sacamos 20px a la izquierda */
    }

    .carrusel-btn.btn-next {
        right: -20px; /* Lo sacamos 20px a la derecha */
    }
/* ==============================================
   8. BANNERS PROMOCIONALES (VERSIÓN DINÁMICA FINAL)
   ============================================== */

.banner-section {
    margin: 40px 0;
}

.banner-grid {
    display: grid;
    /* Un grid de 3 columnas flexibles */
    grid-template-columns: repeat(4, 1fr);
    /* Altura de fila automática */
    grid-auto-rows: auto;
    gap: 20px;
}

.banner-card {
    display: block;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #333;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-decoration: none;
    /* Por defecto, todos son 1x1 */
    grid-column: span 1;
    grid-row: span 1;
}

    .banner-card img {
        width: 100%;
        height: 100%;
        display: block;
        /* ESTA ES LA CLAVE: Rellena el espacio, sin bordes blancos. */
        object-fit: cover;
    }

    .banner-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
    }

    /* ==============================================
   CLASES DINÁMICAS (controladas desde la DB)
   ============================================== */

    /* .default ya es 1x1 */

    /* Ocupa 2 columnas de ancho (2x1) */
    .banner-card.wide {
        grid-column: span 2;
    }

    /* Ocupa 2 filas de alto (1x2) */
    .banner-card.tall {
        grid-row: span 2;
    }

    /* Ocupa 2x2 (el más grande) */
    .banner-card.large {
        grid-column: span 2;
        grid-row: span 2;
    }

/* Ajustes para móviles */
@media (max-width: 768px) {
    .banner-grid {
        /* En móvil, solo 1 columna */
        grid-template-columns: 1fr;
    }

    /* En móvil, todos los banners ocupan 1x1 */
    .banner-card.wide,
    .banner-card.large {
        grid-column: span 1;
        grid-row: span 1;
    }
}

/* ==============================================
   9. TEMA CLARO (LIGHT MODE) - OVERRIDE
   ============================================== */

/* --- Paleta de Colores (inspirada en el logo) --- */
:root {
    --light-bg: #FFFDF3; /* Crema/Amarillo muy suave del coche */
    --light-card: #FFFFFF; /* Blanco puro para tarjetas (mayor contraste) */
    --light-text: #5D4037; /* Marrón oscuro (del logo) para texto */
    --light-heading: #3E2723; /* Marrón más oscuro para títulos */
    --light-accent: #C08552; /* Tono terracota/marrón claro */
    --light-border: #E0E0E0; /* Borde gris muy claro */
    --light-shadow: rgba(0, 0, 0, 0.1);
}

/* 1. Base Global */
html.light-theme body {
    background-color: var(--light-bg);
    color: var(--light-text);
}

html.light-theme h1,
html.light-theme h2,
html.light-theme h3,
html.light-theme h4,
html.light-theme h5,
html.light-theme h6 {
    color: var(--light-heading);
}

html.light-theme p {
    color: var(--light-text);
}

html.light-theme a {
    color: var(--light-accent);
}

/* 2. Barra de Navegación */
html.light-theme .navbar {
    background-color: var(--light-card);
    border-bottom: 1px solid var(--light-border);
    box-shadow: 0 2px 4px var(--light-shadow);
}

html.light-theme .navbar-brand {
    color: var(--light-heading);
}

html.light-theme .nav-link {
    color: var(--light-text);
}

    html.light-theme .nav-link:hover,
    html.light-theme .nav-link.active {
        background-color: #f4f4f4;
        color: var(--light-heading);
    }

/* 3. Filtros */
html.light-theme .filtros-container {
    background-color: var(--light-card);
    border: 1px solid var(--light-border);
}

html.light-theme .filtro-item label {
    color: var(--light-text);
}

html.light-theme .filtro-item select,
html.light-theme .filtro-item input[type="search"] {
    background-color: #f9f9f9;
    border: 1px solid var(--light-border);
    color: var(--light-heading);
}

html.light-theme .filtro-item-boton button {
    background-color: var(--light-accent);
    color: white;
}

    html.light-theme .filtro-item-boton button:hover {
        filter: brightness(110%); /* Un sutil efecto de brillo */
    }

/* 4. Tarjeta de Producto */
html.light-theme .producto-card {
    background-color: var(--light-card);
    border: 1px solid var(--light-border);
    box-shadow: 0 4px 8px var(--light-shadow);
}

    html.light-theme .producto-card:hover {
        border-color: var(--light-accent);
    }

    html.light-theme .producto-card img {
        border-bottom: 1px solid var(--light-border);
    }

html.light-theme .producto-info h5 {
    color: var(--light-heading);
}

html.light-theme .info-categoria {
    background-color: #eee;
    color: var(--light-text);
}

html.light-theme .producto-info .precio {
    color: var(--light-heading);
}

html.light-theme .precio-oferta {
    color: #B71C1C; /* Un rojo oscuro para ofertas en tema claro */
}

html.light-theme .btn-detalle {
    background-color: var(--light-accent);
    color: white;
}

    html.light-theme .btn-detalle:hover {
        filter: brightness(110%);
    }

/* 5. Carrusel y Banners */
html.light-theme .carrusel-btn {
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid var(--light-border);
    color: var(--light-heading);
}

    html.light-theme .carrusel-btn:hover {
        background-color: rgba(255, 255, 255, 1);
    }

html.light-theme .banner-card {
    border: 1px solid var(--light-border);
}

    html.light-theme .banner-card:hover {
        box-shadow: 0 8px 20px var(--light-shadow);
    }

/* 6. Página de Detalle */
html.light-theme .detalle-container {
    background-color: var(--light-card);
    border: 1px solid var(--light-border);
}

html.light-theme .imagen-principal-container {
    background-color: var(--light-bg);
    border: 1px solid var(--light-border);
}

html.light-theme .miniatura-container {
    border: 2px solid var(--light-border);
}

    html.light-theme .miniatura-container:hover {
        border-color: var(--light-accent);
    }

    html.light-theme .miniatura-container.seleccionada {
        border-color: var(--light-accent);
        box-shadow: none;
    }

html.light-theme .columna-info h1 {
    color: var(--light-heading);
}

html.light-theme .descripcion {
    border-top: 1px solid var(--light-border);
}

    html.light-theme .descripcion h4 {
        color: var(--light-heading);
    }

html.light-theme .btn-primario {
    background-color: var(--light-accent);
    color: white;
}

    html.light-theme .btn-primario:hover {
        filter: brightness(110%);
    }

/* ==============================================
   10. ESTILOS DEL SWITCH DE TEMA
   ============================================== */

.theme-switch {
    background-color: var(--light-bg); /* Fondo claro para el botón */
    border: 1px solid var(--light-border);
    color: var(--light-text);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    transition: all 0.3s ease;
}

    .theme-switch:hover {
        background-color: #f0f0f0;
    }

    /* En TEMA OSCURO (default), mostramos la LUNA y ocultamos el SOL */
    .theme-switch .bi-sun-fill {
        display: none;
    }

    .theme-switch .bi-moon-fill {
        display: inline-block;
        color: #e0e0e0; /* Color luna en tema oscuro */
    }

/* En TEMA CLARO, mostramos el SOL y ocultamos la LUNA */
html.light-theme .theme-switch {
    background-color: var(--light-card);
    border: 1px solid var(--light-border);
}

    html.light-theme .theme-switch .bi-sun-fill {
        display: inline-block;
        color: #f39c12; /* Color sol */
    }

    html.light-theme .theme-switch .bi-moon-fill {
        display: none;
    }
/* ==============================================
   11. AJUSTES DEL ZOOM DE IMAGEN (Magnify.js)
   ============================================== */

/* Estilo general de la lupa */
.magnify-lens {
    border: 1px solid #555; /* Borde oscuro */
    box-shadow: 0px 0px 15px rgba(0,0,0,0.5); /* Sombra elegante */
    border-radius: 50%; /* Lupa circular por defecto */
    z-index: 9999; /* Asegura que esté por encima de todo */
    cursor: none !important; /* Esconde el cursor dentro de la lupa */
}

/* Ajustes para el tema claro */
html.light-theme .magnify-lens {
    border: 2px solid var(--light-accent); /* Borde con color de acento */
    box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
}
/* ==============================================
   13. PIE DE PÁGINA (FOOTER)
   ============================================== */

.site-footer {
    background-color: #111; /* Fondo casi negro en modo oscuro */
    color: #aaa;
    padding: 40px 0 0 0;
    margin-top: auto; /* Empuja el footer al fondo si hay poco contenido */
    border-top: 1px solid #333;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    padding-bottom: 40px;
}

.footer-col h4 {
    color: #fff;
    font-size: 1.2rem;
    margin-bottom: 15px;
    border-bottom: 2px solid #444;
    display: inline-block;
    padding-bottom: 5px;
}

.footer-col p, .footer-col li {
    font-size: 0.95rem;
    line-height: 1.8;
    list-style: none;
}

.footer-col ul {
    padding: 0;
}

.footer-col a {
    color: #aaa;
    text-decoration: none;
    transition: color 0.2s;
}

    .footer-col a:hover {
        color: #4dabf7;
        padding-left: 5px; /* Efecto de movimiento */
    }

.footer-bottom {
    background-color: #000;
    text-align: center;
    padding: 15px 0;
    font-size: 0.85rem;
    color: #666;
}

/* --- Ajustes para TEMA CLARO (Inspirado en el Logo) --- */
html.light-theme .site-footer {
    background-color: #3E2723; /* Marrón oscuro del logo */
    color: #EEDDCC; /* Crema suave */
    border-top: 1px solid #5D4037;
}

html.light-theme .footer-col h4 {
    color: #FFFDF3; /* Títulos en crema */
    border-color: #8D6E63;
}

html.light-theme .footer-col a {
    color: #D7CCC8;
}

    html.light-theme .footer-col a:hover {
        color: #FFF;
    }

html.light-theme .footer-bottom {
    background-color: #281A16; /* Marrón aún más oscuro */
    color: #8D6E63;
}

/* ==============================================
   14. MIGAS DE PAN (BREADCRUMBS)
   ============================================== */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: #888;
    margin-bottom: 20px;
}

    .breadcrumb a {
        color: #4dabf7; /* Azul enlace */
        text-decoration: none;
    }

        .breadcrumb a:hover {
            text-decoration: underline;
        }

    .breadcrumb .separator {
        font-size: 0.8rem;
        color: #555;
    }

    .breadcrumb .current {
        color: #ccc; /* Color texto actual (no link) */
        font-weight: 500;
    }

/* Tema Claro */
html.light-theme .breadcrumb a {
    color: var(--light-accent);
}

html.light-theme .breadcrumb .separator {
    color: #aaa;
}

html.light-theme .breadcrumb .current {
    color: var(--light-heading);
}