/* =========================================
   VARIABLES DE TEMA (Heloiza)
   ========================================= */
:root {
    /* COLOR DE MARCA (Vino Tinto / Bordó Elegante) */
    --brand-color: #800020; 
    --bg-wine: #800020;

    /* TIPOGRAFÍA ELEGANTE */
    --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;

    /* MODO CLARO (Tonos crema y dorado suave) */
    --bg-body: #fffaf5; /* Crema muy suave */
    --text-main: #2c2c2c;
    --text-muted: #6c757d;
    --title-color: #800020; /* Títulos en bordó */
    --card-bg: #ffffff;
    --border-color: #eee0d5;
    --primary-color: var(--brand-color);
    --btn-primary-text: #ffffff;
    --nav-bg: rgba(255, 250, 245, 0.95);
    --hero-bg: url('../img/bgHome.jpg');
}

[data-theme="dark"] {
    /* MODO OSCURO (CONTRASTE ALTO) */
    --bg-body: #121212; /* Negro puro */
    --text-main: #ffffff !important; /* Blanco purísimo forzado */
    --text-muted: #e0e0e0 !important; /* Gris muy claro para subtítulos */
    --title-color: #e6b981 !important; /* Títulos en DORADO para resaltar sobre negro */
    --card-bg: #1e1e1e; /* Gris oscuro para tarjetas */
    --border-color: #333333;
    --primary-color: #e6b981; /* Botones dorados */
    --brand-color: #e6b981 !important; /* Forzamos el color de marca a dorado en modo oscuro */
    --btn-primary-text: #121212; /* Texto negro sobre botón dorado */
    --nav-bg: rgba(18, 18, 18, 0.95);
}

/* =========================================
   ESTILOS GENERALES Y CLASES DE UTILIDAD
   ========================================= */
body {
    background-color: var(--bg-body);
    color: var(--text-main);
    font-family: 'Segoe UI', system-ui, sans-serif;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.brand-font { font-family: var(--font-serif) !important; }

/* El color de la marca usa la variable que cambia según el modo */
.text-wine, .brand-color { color: var(--brand-color) !important; }

/* El fondo vino siempre queda igual (para la etiqueta de "Nuevo") */
.bg-wine { background-color: var(--bg-wine) !important; color: white; }

/* Forzar que los textos grises se lean bien en modo oscuro */
.text-muted { color: var(--text-muted) !important; }

#mainNav {
    background-color: var(--nav-bg);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.navbar-brand {
    color: var(--brand-color) !important;
    font-family: var(--font-serif);
    letter-spacing: 1px;
}

/* =========================================
   HERO / PORTADA
   ========================================= */
.hero-section {
    height: 65vh; /* Un poco más alto para que entre bien el lema */
    min-height: 450px;
    background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), var(--hero-bg);
    background-size: cover;
    background-position: center;
    transition: background-image 0.5s ease;
}

.hero-content {
    background: rgba(255, 255, 255, 0.85); /* Fondo clarito para que se lea bien el texto */
    backdrop-filter: blur(8px);
    color: var(--brand-color); /* Texto en color vino */
    max-width: 700px;
    margin: 0 20px;
    border: 1px solid rgba(255,255,255,0.4);
}

/* Ajuste del Hero en modo oscuro para que no encandile */
[data-theme="dark"] .hero-content {
    background: rgba(30, 30, 30, 0.85);
    color: var(--text-main);
    border-color: rgba(255,255,255,0.1);
}
[data-theme="dark"] .hero-content .brand-color { color: var(--primary-color) !important; }


.btn-primary {
    background-color: var(--brand-color);
    border-color: var(--brand-color);
    color: white;
    font-family: var(--font-serif);
    letter-spacing: 1px;
}
.btn-primary:hover {
    background-color: #600018; /* Un vino más oscuro al pasar el mouse */
    border-color: #600018;
}

/* =========================================
   BOTONES DE TEMPORADA
   ========================================= */
.btn-season {
    background-color: var(--card-bg);
    color: var(--text-muted);
    border: 2px solid var(--border-color);
    transition: all 0.3s;
    opacity: 0.6; /* Un poco apagados si no están activos */
}

.btn-season.active {
    border-color: var(--brand-color);
    color: var(--brand-color) !important;
    background-color: var(--card-bg);
    opacity: 1;
    box-shadow: 0 5px 15px rgba(128, 0, 32, 0.2) !important;
}
[data-theme="dark"] .btn-season.active { color: var(--primary-color) !important; border-color: var(--primary-color); }

/* =========================================
   TARJETAS DE PRODUCTO
   ========================================= */
.product-card {
    background-color: var(--card-bg);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid var(--border-color) !important;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.08) !important;
    border-color: var(--brand-color) !important;
}

.card-img-wrapper {
    height: 400px; /* Fotos bien grandes y verticales */
}

/* Botón de WhatsApp extra grande y llamativo */
.btn-success.btn-lg {
    font-size: 1.2rem;
    padding: 15px 20px;
    background-color: #25d366; /* Verde WhatsApp oficial */
    border-color: #25d366;
}
.btn-success.btn-lg:hover { background-color: #20b85c; }

/* =========================================
   MODAL Y CARRUSEL
   ========================================= */
.modal-content { background-color: var(--card-bg) !important; }
.carousel-control-prev-icon, .carousel-control-next-icon {
    filter: invert(1); /* Flechas oscuras para que se vean sobre fotos claras */
}
[data-theme="dark"] .carousel-control-prev-icon, 
[data-theme="dark"] .carousel-control-next-icon {
    filter: none; /* Flechas claras en modo oscuro */
}
.carousel-indicators [data-bs-target] { background-color: var(--brand-color); }

/* =========================================
   BOTÓN MODO OSCURO
   ========================================= */
.theme-toggle-btn {
    width: 45px; height: 45px; border-radius: 50%;
    background-color: var(--card-bg);
    border: 2px solid var(--brand-color); /* Borde color vino */
    color: var(--brand-color);
    font-size: 1.2rem; display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.3s;
}
.theme-toggle-btn:hover { background-color: var(--brand-color); color: white; }
[data-theme="dark"] .theme-toggle-btn { border-color: var(--primary-color); color: var(--primary-color); }
[data-theme="dark"] .theme-toggle-btn:hover { background-color: var(--primary-color); color: var(--bg-body); }

/* Estilos para seleccionar Talles y Colores en la tienda */
.badge-opcion {
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    font-size: 0.9rem;
    padding: 0.5rem 0.8rem;
}
.badge-opcion:hover {
    background-color: rgba(128, 0, 32, 0.1); /* Un tono suave de tu color vino */
}
.badge-opcion.selected {
    background-color: var(--brand-color) !important;
    color: white !important;
    border-color: var(--brand-color) !important;
    transform: scale(1.05);
}


/* --- ARREGLO MODO NOCHE Y BADGES --- */

/* Forzamos que los badges de opciones tengan texto legible en ambos modos */
[data-theme="dark"] .badge-opcion.border-secondary {
    border-color: #6c757d !important;
    color: #e9ecef !important; /* Texto claro en fondo oscuro */
}

/* Badges seleccionados (Talles) */
.badge-opcion.selected {
    background-color: var(--brand-color) !important;
    color: white !important;
    border-color: var(--brand-color) !important;
}

/* --- ESTILOS TIPO "MOTOROLA" PARA COLORES --- */

.color-swatch {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    border: 2px solid rgba(0,0,0,0.1);
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Borde blanco en modo noche para que resalte */
[data-theme="dark"] .color-swatch {
    border: 2px solid rgba(255,255,255,0.2);
}

.color-swatch:hover {
    transform: scale(1.1);
}

/* Cuando se selecciona un color */
.color-swatch.selected {
    border: 2px solid var(--brand-color) !important;
    box-shadow: 0 0 0 2px var(--brand-color) inset; /* Doble borde para resaltar */
    transform: scale(1.15);
}

/* Ocultar talles en la tarjeta principal (para limpiar la vista) */
.card-body #talles-container-card {
    display: none;
}


/* --- ARREGLOS MODO NOCHE CARRITO --- */

/* Forzamos que los textos del modal del carrito sean claros en modo oscuro */
[data-theme="dark"] #carrito-items-container h6,
[data-theme="dark"] #carrito-items-container .text-dark,
[data-theme="dark"] #carrito-items-container .fw-bold.mb-2,
[data-theme="dark"] .modal-footer .text-dark {
    color: #e9ecef !important; 
}

/* --- NUEVO SELECTOR DE COLORES (ADMIN & TIENDA) --- */
.color-picker-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Swatch (burbuja de color) genérica */
.color-swatch-label {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid rgba(0,0,0,0.2);
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: all 0.2s ease;
}
[data-theme="dark"] .color-swatch-label { border-color: rgba(255,255,255,0.3); }

/* Swatch seleccionada (Admin y Tienda) */
.color-check-input:checked + .color-swatch-label,
.badge-opcion.color-hex.selected {
    border-color: var(--brand-color) !important;
    box-shadow: 0 0 0 3px var(--brand-color) inset;
    transform: scale(1.1);
}

/* Swatch en el admin para eliminar */
.admin-color-swatch {
    width: 30px; height: 30px; border-radius: 50%; border: 1px solid #ccc;
    display: flex; align-items: center; justify-content: center;
    cursor: default;
    position: relative;
}
.admin-color-swatch .bi-x-circle-fill {
    position: absolute; top: -5px; right: -5px; color: var(--bs-danger); cursor: pointer;
    background: white; border-radius: 50%;
}

/* --- CARRUSEL FILTRABLE --- */
/* Oculta las imágenes del carrusel que no coinciden con el filtro */
.carousel-item.filtered-out {
    display: none !important;
}


/* =========================================
   ESTILOS DEL CATÁLOGO Y MODALES (Heloiza)
   ========================================= */

/* Efecto para que el color se vea seleccionado (Anillo doble) */
.badge-opcion.color-hex {
    transition: all 0.2s ease;
    box-shadow: 0 0 0 1px #ced4da; /* Borde gris sutil por defecto */
}

/* Efecto de anillo para los colores seleccionados */
.badge-opcion.color-hex.selected {
    background-color: var(--color-real) !important; /* Prohibido tapar el color */
    outline: 3px solid var(--brand-color) !important; /* Anillo exterior grueso */
    outline-offset: 3px; /* Espacio transparente entre el círculo y el anillo */
    border-color: transparent !important;
    transform: scale(1.1);
    box-shadow: none !important; /* Limpiamos sombras que puedan molestar */
}

/* Contenedor para que la tabla de talles vacía no rompa el diseño */
.size-chart-container {
    min-height: 50vh;
    background: var(--bg-body);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    border: 1px dashed var(--border-color);
    border-radius: 1rem;
}

/* Arreglo para el texto del carrito en modo oscuro */
[data-theme="dark"] #carrito-items-container .text-dark {
    color: #e9ecef !important;
}
/* Arreglo para que los talles se lean de día y de noche */
.badge-opcion:not(.selected) {
    color: var(--bs-body-color) !important;
}

/* =========================================
   FIX PARA BOTONES TRANSPARENTES (IPHONE / MOBILE)
   ========================================= */
.theme-toggle-btn, 
#btn-abrir-carrito {
    /* Esto elimina el recuadro oscuro feo nativo de iOS/Safari */
    -webkit-tap-highlight-color: transparent !important; 
    transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Evitamos que Bootstrap le ponga fondo oscuro al mantener apretado o hacer foco */
.theme-toggle-btn:focus,
.theme-toggle-btn:active,
#btn-abrir-carrito:focus,
#btn-abrir-carrito:active {
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Le damos una animación súper sutil (se achica apenitas) para que se sienta el toque */
.theme-toggle-btn:active,
#btn-abrir-carrito:active {
    opacity: 0.7;
    transform: scale(0.92);
}


/* ========================================= */
/* ESTILOS DE BOTONES: CATEGORÍAS Y TEMPORADA*/
/* ========================================= */

.categorias-scroll::-webkit-scrollbar { 
    display: none; 
}

/* === MODO CLARO (Por defecto) === */
.btn-filtro-cat.active, 
.btn-season.active { 
    background-color: var(--brand-color) !important; 
    color: #ffffff !important; 
    border-color: var(--brand-color) !important; 
}

.btn-filtro-cat:not(.active), 
.btn-season:not(.active) {
    color: #212529 !important; 
    border-color: #ced4da !important; 
    background-color: transparent !important;
}

/* === MODO OSCURO (Noche) === */
[data-theme="dark"] .btn-filtro-cat.active, 
[data-theme="dark"] .btn-season.active { 
    background-color: var(--brand-color) !important; 
    /* Fuerzo el texto oscuro para que resalte sobre el dorado de tu marca */
    color: #121212 !important; 
    border-color: var(--brand-color) !important; 
}

[data-theme="dark"] .btn-filtro-cat:not(.active), 
[data-theme="dark"] .btn-season:not(.active) {
    color: #f8f9fa !important; 
    border-color: #6c757d !important; 
    background-color: transparent !important;
}


/* ========================================= */
/* 1. DISEÑO DEL BOTÓN "FILTRAR CATEGORÍAS"  */
/* ========================================= */
.btn-filtro-principal {
    border: 2px solid var(--brand-color) !important;
    background-color: transparent !important;
    transition: all 0.3s ease;
}

/* Color del texto del botón sin apuntar (Respeta día y noche) */
[data-theme="light"] .btn-filtro-principal { color: #212529 !important; }
[data-theme="dark"] .btn-filtro-principal { color: #f8f9fa !important; }

/* Efecto al apuntar con el mouse (HOVER) */
.btn-filtro-principal:hover {
    background-color: var(--brand-color) !important;
    transform: scale(1.03); /* Se agranda apenitas */
}

/* Color de la letra al apuntar (Para que se lea perfecto con tu color) */
[data-theme="light"] .btn-filtro-principal:hover { color: #ffffff !important; } /* Letra blanca sobre bordo */
[data-theme="dark"] .btn-filtro-principal:hover { color: #121212 !important; } /* Letra oscura sobre dorado */


/* ========================================= */
/* 2. EFECTO BORDES EN TARJETAS DE PRODUCTOS */
/* ========================================= */
.product-card {
    border: 2px solid transparent !important; /* Preparamos un borde invisible */
    transition: all 0.3s ease !important; /* Transición suave */
}

.product-card:hover {
    border-color: var(--brand-color) !important; /* Aparece tu color (Bordo/Dorado) */
    transform: translateY(-5px); /* La tarjeta "salta" un poquito hacia arriba */
    box-shadow: 0 10px 25px rgba(0,0,0,0.15) !important; /* Se hace una sombra más linda */
}

/* ========================================= */
/* CONTROL DINÁMICO DE FONDOS DEL HERO       */
/* ========================================= */

/* 1. Fondo por defecto (Si no tocaron ningún botón o tocaron "Ver Catálogo") */
body {
    --hero-bg: url('../img/bgHome.jpg');
}

/* 2. Si tocaron Invierno (Forzamos la foto de los percheros) */
body[data-season="invierno"] {
    --hero-bg: url('../img/bgHome.jpg') !important;
}

/* 3. Si tocaron Verano (Forzamos la foto clara de la tienda) */
body[data-season="verano"] {
    --hero-bg: url('../img/bgVerano.png') !important;
}


/* ========================================= */
/* ESTILOS DE EDICIÓN Y COLORES (PANEL)      */
/* ========================================= */

/* Bordes grises para los círculos de color (soluciona el problema del blanco invisible) */
#agotados-color-options > *,
#colores-added-container > * {
    border: 1px solid #ced4da !important;
}

/* Estilos visuales para los radios de colores al seleccionarlos */
.color-radio-input:checked + .color-radio-label,
.radio-color-galeria:checked + .label-color-galeria {
    border: 3px solid #212529 !important; /* Borde negro más notorio */
    transform: scale(1.15);
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.15) !important;
}
.color-radio-label, .label-color-galeria { 
    transition: all 0.1s ease-in-out; 
}


/* --- FIRMA DEL DESARROLLADOR EN FOOTER --- */
.firma-lecs {
    color: var(--brand-color); /* Usa el color principal de Heloiza para integrar */
    opacity: 0.7;
    transition: all 0.3s ease;
    letter-spacing: 1px;
}

.firma-lecs:hover {
    opacity: 1;
    transform: scale(1.05); /* Pequeño efecto de zoom */
    color: #000000; /* Color oscuro al pasar el mouse (o ajustalo al de tu marca) */
}

/* Soporte para el modo noche si el usuario lo activa */
[data-theme="dark"] .firma-lecs:hover {
    color: #ffffff;
}