/* =========================================
   COMPONENTES GLOBALES (NAVBAR Y BOTONES)
   ========================================= */

/* RESTAURADO: Tamaño imponente del Logo */
.logo-navbar {
    height: 50px;
    object-fit: contain;
}

.navbar-seypro {
    /* Degradado con transparencia para permitir ver el contenido de fondo */
    background: linear-gradient(90deg, rgba(14, 24, 40, 0.85) 0%, rgba(21, 36, 59, 0.70) 75%, rgba(0, 114, 206, 0.70) 100%) !important;
    
    /* Efecto de Cristal Esmerilado (Glassmorphism) */
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important; 
    
    /* Borde sutil */
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.3s ease;
}

.btn-ubicar {
    background-color: #0072ce !important;
    color: white !important;
    font-weight: bold;
    border: none;
    box-shadow: 0 4px 10px rgba(0, 114, 206, 0.3);
    transition: all 0.3s ease;
}

.btn-ubicar:hover {
    background-color: #005bb5 !important;
    color: white !important;
    transform: translateY(-2px);
}

.btn-seypro-orange {
    background-color: #ff6f00 !important;
    color: #ffffff !important;
    border: none;
    transition: all 0.3s ease;
}

.btn-seypro-orange:hover {
    background-color: #e65100 !important;
    color: #ffffff !important;
    transform: translateY(-2px);
}

/* =========================================
   MEGA MENÚ CORPORATIVO (SOLUCIONES)
   ========================================= */
.position-static {
    position: static !important;
}

.mega-menu-container {
    background-color: #ffffff;
    border-radius: 24px !important; 
    margin-top: 25px !important; /* Despega el menú hacia abajo del filo del navbar */
    border-top: 3px solid #ff6f00;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1) !important;
    animation: megaMenuFadeIn 0.3s ease forwards;
}

@keyframes megaMenuFadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.mega-menu-title {
    font-size: 0.75rem;
    letter-spacing: 1.5px;
    color: #94a3b8 !important;
}

.mega-link {
    padding: 10px 15px;
    border-radius: 12px;
    transition: all 0.2s ease;
    background-color: transparent;
    white-space: normal; 
}

.mega-link:hover, .mega-link:focus {
    background-color: #f8fafc;
    transform: translateX(5px); 
}

.mega-icon-wrapper {
    width: 40px;
    height: 40px;
    min-width: 40px;
    background-color: #f0f7ff;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 15px;
    color: #0072ce;
    font-size: 1.1rem;
    transition: all 0.3s ease;
}

.mega-link:hover .mega-icon-wrapper {
    background-color: #ff6f00; 
    color: #ffffff;
}

.mega-link-simple {
    padding: 8px 15px;
    border-radius: 8px;
    color: #64748b;
    font-weight: 500;
    transition: all 0.2s ease;
}

.mega-link-simple:hover {
    background-color: rgba(0, 114, 206, 0.05);
    color: #0072ce;
    transform: translateX(5px);
}

@media (min-width: 768px) {
    .border-start-md {
        border-left: 1px solid #f1f5f9;
    }
}

/* =========================================
   CARRITO EN EL NAVBAR
   ========================================= */
.nav-cart-icon {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 45px;
    height: 45px;
    color: #ffffff;
    font-size: 1.3rem;
    text-decoration: none;
    border-radius: 50%;
    transition: all 0.3s ease;
    cursor: pointer;
}

/* Efecto al pasar el mouse por el carrito */
.nav-cart-icon:hover {
   
    color: #00e5ff; /* Un toque cian o pon #ff6f00 si prefieres naranja */
    transform: translateY(-2px);
}

/* El contador naranja (Badge) */
/* El contador naranja (Badge) MEJORADO */
.cart-badge {
    position: absolute;
    top: -2px; /* Lo subimos un poquito para que respire */
    right: -6px; /* Lo sacamos un poco hacia la derecha */
    background-color: #ff6f00; /* Naranja SEYPRO */
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 900;
    width: 22px; /* Un pelín más grande para que el número encaje perfecto */
    height: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    
    /* CAMBIO PRINCIPAL: Adiós borde negro feo, hola borde azul SEYPRO (como en tu imagen) */
    border: 2px solid #0072ce; 
    
    /* Le añadimos una sombra para que parezca que flota sobre el carrito */
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
}

/* Tooltip "Ver Carrito" (Aparece al hacer hover) */
.nav-cart-icon::after {
    content: "Ver Carrito";
    position: absolute;
    top: 130%; /* Posicionado debajo del icono */
    left: 50%;
    transform: translateX(-50%);
    background-color: #0e1828;
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: bold;
    padding: 6px 12px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    border: 1px solid rgba(255, 111, 0, 0.3);
}

/* Flechita del Tooltip */
.nav-cart-icon::before {
    content: "";
    position: absolute;
    top: 110%; /* Posicionado justo encima de la cajita del tooltip */
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: transparent transparent #0e1828 transparent;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

/* Mostrar el tooltip y la flechita al hacer hover */
.nav-cart-icon:hover::after {
    opacity: 1;
    visibility: visible;
    top: 115%; /* Se eleva suavemente hacia arriba */
}

.nav-cart-icon:hover::before {
    opacity: 1;
    visibility: visible;
    top: calc(115% - 11px);
}