/* ===== ESTILOS DEL NAVBAR - TINTA CIRCULAR ===== */
/* Prevenir parpadeo durante la carga */
.navbar, .navbar-brand, .logo-navbar {
    transition: none !important; /* Eliminar todas las transiciones */
}

/* ===== NAVBAR PRINCIPAL ===== */
.navbar {
    padding: 12px 0 !important; /* Más padding para dar respiración al logo */
    min-height: 78px !important; /* Altura mínima aumentada para logo más grande */
    background: #fff !important;
}

/* ===== LOGO DEL NAVBAR ===== */
.logo-navbar {
    max-height: 54px !important; /* Aumentado de 42px a 54px */
    height: 54px !important; /* Altura fija para evitar parpadeo */
    width: 54px !important; /* Ancho fijo para mantener circular */
    object-fit: contain !important; /* Mantener proporciones */
    border-radius: 50% !important; /* Hacer el logo circular */
    background: none !important; /* Sin fondo */
    padding: 0 !important; /* Sin padding */
    box-shadow: none !important; /* Sin sombra */
    transition: none !important; /* Sin transiciones para evitar parpadeo */
    margin-right: 12px !important; /* Espacio entre logo y texto */
}

/* ===== TEXTO DEL BRAND ===== */
.navbar-brand::after {
    content: "Tinta Circular" !important;
    font-family: 'Autumn in September', 'Poppins', Arial, sans-serif !important;
    font-size: 28px !important;
    font-weight: 800 !important;
    color: #2c3e50 !important;
    margin-left: 8px !important;
    white-space: nowrap !important;
}

/* ===== CONTAINER DEL BRAND ===== */
.navbar-brand {
    padding: 12px 0 !important; /* Más padding para el brand */
    display: flex !important;
    align-items: center !important;
    height: 78px !important; /* Altura aumentada para acomodar logo más grande */
    max-height: 78px !important;
}

/* ===== LINKS DEL NAVBAR ===== */
.navbar-nav .nav-link {
    padding: 8px 12px !important; /* Reducido padding */
    font-size: 14px !important; /* Fuente ligeramente más pequeña */
    line-height: 1.2 !important;
}

/* ===== BOTÓN TIENDA ===== */
.btn-tienda {
    padding: 8px 20px !important; /* Reducido padding */
    font-size: 13px !important; /* Fuente más pequeña */
}

/* ===== ICONOS DEL NAVBAR ===== */
.nav-item.icon-item .nav-link {
    padding: 8px 10px !important;
    font-size: 16px !important; /* Iconos ligeramente más pequeños */
}

/* ===== AVATAR DE USUARIO ===== */
.user-avatar, .user-avatar-default {
    width: 28px !important; /* Reducido de ~35px */
    height: 28px !important;
    font-size: 14px !important;
}

/* ===== NOMBRE DE USUARIO ===== */
.user-name {
    font-size: 13px !important;
    margin-left: 6px !important;
}

/* ===== BADGE DEL CARRITO ===== */
.cart-badge {
    font-size: 10px !important;
    min-width: 16px !important;
    height: 16px !important;
    line-height: 16px !important;
}

/* ===== RESPONSIVE - MÓVIL ===== */
@media (max-width: 991px) {
    .navbar {
        padding: 10px 0 !important; /* Más padding también en móvil */
        min-height: 66px !important;
    }
    
    .logo-navbar {
        max-height: 46px !important; /* Logo más grande también en móvil */
        height: 46px !important; /* Altura fija para evitar parpadeo */
        width: 46px !important; /* Ancho fijo para mantener circular */
        border-radius: 50% !important; /* Mantener formato circular en móvil */
        background: none !important; /* Sin fondo */
        padding: 0 !important; /* Sin padding */
        box-shadow: none !important; /* Sin sombra */
        margin-right: 8px !important; /* Menos espacio en móvil */
    }
    
    .navbar-brand::after {
        font-size: 16px !important; /* Texto más pequeño en móvil */
        margin-left: 6px !important;
    }
    
    .navbar-brand {
        padding: 10px 0 !important; /* Más padding en móvil también */
        height: 66px !important; /* Altura fija en móvil */
        max-height: 66px !important;
    }
    
    /* Iconos sociales móvil más pequeños */
    .navbar-social-item {
        width: 28px !important;
        height: 28px !important;
        font-size: 12px !important;
    }
    
    /* Navbar toggler más pequeño */
    .navbar-toggler {
        padding: 4px 6px !important;
        font-size: 1rem !important;
    }
}

/* Ajustes para menú desplegado en móvil */
@media (max-width: 991px) {
    #ftco-navbar {
        max-height: none !important; /* Permitir que el contenedor crezca con el menú */
    }

    #ftco-navbar .navbar-collapse {
        background: #fff !important;
        padding: 12px 0 !important;
    }

    #ftco-navbar .navbar-collapse.show {
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
    }
}