/* =====================================
   VARIABLES GLOBALES (ROOT)
===================================== */
:root {
    /* Colores principales de la tienda (TUS ORIGINALES) */
    --color-primario: #2873a7;
    --color-secundario: #ffc107;
    --color-terciario: #ffffff;
    --color-accento: #0899ed;
    /* Texto (TUS ORIGINALES) */
    --texto-claro: #ffffff;
    --texto-oscuro: #222222;
    /* Fondos (TUS ORIGINALES) */
    --fondo-claro: #ffffff;
    --fondo-oscuro: #000000;
    --fondo-body: #E6F0FA;
    --fondo-overlay-suave: rgba(230, 240, 250, 0.5);
    /* Estados (TUS ORIGINALES) */
    --exito: #28a745;
    --error: #dc3545;
    --advertencia: #ffc107;
    /* Bordes y sombras (TUS ORIGINALES) */
    --radio-sm: 0.25rem;
    --radio-md: 0.5rem;
    --radio-lg: 1rem;
    --sombra-suave: 0 4px 12px rgba(0,0,0,0.15);
    --sombra-fuerte: 0 10px 20px rgba(0,0,0,0.3);
    /* Transiciones (TUS ORIGINALES) */
    --transicion: 0.3s ease;
    --transicion-lenta: 0.5s ease;
    /* =====================================
       VARIABLES NUEVAS — FULL THEME
       (Añadidas SIN borrar las tuyas)
    ===================================== */
    /* Textos complementarios */
    --texto-suave: rgba(0,0,0,0.55);
    --texto-blanco: #ffffff;
    /* Fondos generales extendidos */
    --fondo-general: var(--fondo-claro);
    --fondo-seccion: #f5f6f8;
    --fondo-tarjeta: #ffffff;
    /* Gradientes globales */
    --gradiente-principal: linear-gradient(135deg, var(--color-accento), var(--color-primario));
    --gradiente-oferta: linear-gradient(135deg, var(--advertencia), var(--error));
    --gradiente-oscuro: linear-gradient(135deg, #1e1e1e, #000000);
    /* Botones globales */
    --btn-bg: var(--color-primario);
    --btn-color: var(--texto-claro);
    --btn-border: var(--color-primario);
    --btn-outline-color: var(--texto-claro);
    --btn-outline-border: #ffffff;
    --btn-oferta-bg: var(--error);
    --btn-oferta-color: var(--texto-claro);
    /* Productos */
    --producto-card-bg: var(--fondo-tarjeta);
    --producto-precio: var(--color-primario);
    --producto-precio-oferta: var(--error);
    /* Categorías */
    --categoria-bg: var(--gradiente-principal);
    --categoria-texto: var(--texto-claro);
    /* Hero */
    --hero-bg: var(--gradiente-principal);
    --hero-texto: var(--texto-claro);
}

/* =========================================
   COLORES PERSONALIZADOS (reemplazo Bootstrap)
========================================= */

.fondo-primario {
    background-color: var(--color-primario) !important;
}

.fondo-claro {
    background-color: var(--fondo-claro) !important;
}

.fondo-oscuro {
    background-color: var(--fondo-oscuro) !important;
}

.texto-claro {
    color: var(--texto-claro) !important;
}

.texto-oscuro {
    color: var(--texto-oscuro) !important;
}

.texto-muted {
    color: rgba(0,0,0,0.5) !important;
}

.badge-custom {
    background-color: var(--color-primario) !important;
    color: var(--texto-claro) !important;
}

/* =========================== */
/* Configuración base y responsive */
/* =========================== */
html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    /* Color de fondo por si la imagen no carga */
    background-color: #ffffff;
    /* Imagen de fondo */
    background-image: url('/img/fondos/6.jpg'); /* Cambia la ruta según tu imagen */
    /* Cubrir todo el fondo */
    background-size: cover;
    /* Que no se repita */
    background-repeat: no-repeat;
    /* Mantener fija al hacer scroll */
    background-attachment: fixed;
    /* Centrar la imagen */
    background-position: center center;
    /* Superposición semitransparente para atenuar */
    background-color: rgba(230, 240, 250, 0.5);
}

/* =========================== */
/* Botones y inputs focus */
/* =========================== */
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

/* =========================== */
/* Navbar y menú mejorado */
/* =========================== */
.navbar {
    position: sticky;
    top: 0;
    z-index: 1050;
    transition: opacity 0.5s ease, transform 0.5s ease;
    opacity: 1; /* opacidad inicial */
}

    .navbar .nav-link {
        color: white !important;
        font-weight: 500;
        position: relative;
        transition: color 0.3s ease;
        border-radius: 0.25rem;
        padding: 0.5rem 0.75rem;
    }

        .navbar .nav-link:hover {
            color: #ffd700 !important;
        }

        .navbar .nav-link::after {
            content: '';
            display: block;
            width: 0%;
            height: 2px;
            background: #0899ed;
            transition: width 0.3s;
            position: absolute;
            bottom: -3px;
            left: 0;
        }

        .navbar .nav-link:hover::after,
        .navbar .nav-item.active .nav-link::after {
            width: 100%;
        }

.navbar-brand img {
    transition: transform 0.3s;
}

    .navbar-brand img:hover {
        transform: scale(1.1);
    }

/* Navbar collapse (mobile) */
.navbar-collapse {
    background: linear-gradient(180deg, #00c9c9, #238fff);
    padding: 0.3rem;
    border-radius: 0.5rem;
}

/* Dropdown y submenus */
.navbar-nav .dropdown-menu {
    border-radius: 0.5rem;
    border: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* =========================== */
/* Footer */
/* =========================== */
footer a {
    transition: all 0.3s ease;
}

    footer a:hover {
        transform: scale(1.1);
        text-decoration: none;
    }

footer .ratio iframe {
    border-radius: 0.5rem;
}

/* =========================== */
/* Botones flotantes (WhatsApp y carrito) */
/* =========================== */
#whatsappFlotante,
#carritoFlotante {
    transition: transform 0.3s, box-shadow 0.3s;
}

    #whatsappFlotante:hover,
    #carritoFlotante:hover {
        transform: translateY(-5px);
        box-shadow: 0 6px 16px rgba(0,0,0,0.3);
    }

/* =========================== */
/* Animación para inputs y botones del navbar */
/* =========================== */
.navbar-nav .nav-link {
    transition: all 0.3s ease;
}

    .navbar-nav .nav-link:hover {
        background-color: rgba(255, 255, 255, 0.15);
        color: #fff !important;
    }


.modal {
    z-index: 2000 !important;
}

.modal-backdrop {
    z-index: 1990 !important;
    background-color: rgba(0,0,0,0.5);
}

.modal.fade .modal-dialog {
    transition: transform 0.3s ease-out;
    transform: translateY(-50px);
}

.modal.show .modal-dialog {
    transform: translateY(0);
}