/* assets/css/navbar.css */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');

/* La barra de navegación principal (estilos generales que aplican a todas las páginas) */
.main-navbar {
    background-color: #161b22; /* Fondo oscuro fijo para la barra, como en GitHub */
    padding: 15px 0; /* Espaciado vertical interno */
    border-bottom: 1px solid #30363d; /* Línea divisoria inferior */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4); /* Sombra suave para profundidad */
    font-family: 'Inter', sans-serif; /* Fuente consistente */
    /* REMOVIDO de aquí: border-radius y margin-top */
}

/* Estilos específicos para el navbar SOLO en las páginas de login y registro */
.main-navbar.navbar-login-registro-especial {
    border-radius: 10px; /* Bordes redondeados solo en login/registro */
    margin-top: 20px;    /* Espacio superior solo en login/registro */
}

/* Contenedor interno de la barra de navegación para controlar el ancho y centrado */
.navbar-container {
    max-width: 1200px; /* Ancho máximo para el contenido del navbar */
    margin: 0 auto; /* Centra el contenedor horizontalmente */
    padding: 15px 20px 0; /* Modificado: Añadido padding superior y mantenido el lateral */
    display: flex; /* Habilita Flexbox */
    justify-content: space-around; /* Modificado: Distribuye el espacio alrededor de los elementos */
    align-items: center; /* Alinea los elementos verticalmente al centro - CLAVE para todo el contenido */
    flex-wrap: wrap; /* Permite que los elementos se envuelvan a la siguiente línea en pantallas pequeñas */
    min-height: 50px; /* Añadir una altura mínima para asegurar alineación vertical constante */
}

/* Grupo de enlaces de navegación (Inicio, Carrito) a la izquierda */
.navbar-links {
    display: flex;
    align-items: center;
    gap: 30px; /* Espacio entre los enlaces de navegación */
}

/* Estilo general para los enlaces individuales del navbar */
.navbar-link {
    color: #8b949e; /* Color de texto gris suave */
    text-decoration: none; /* Sin subrayado */
    font-weight: 500;
    font-size: 1.05rem;
    padding: 8px 12px; /* Espaciado interno */
    border-radius: 8px; /* Bordes redondeados para los enlaces individuales */
    transition: color 0.3s ease, background-color 0.3s ease, transform 0.2s ease, border-color 0.3s ease; /* Transiciones suaves */
    display: flex; /* Para alinear ícono y texto */
    align-items: center; /* Alinea ícono y texto verticalmente */
    gap: 8px; /* Espacio entre ícono y texto */
    border: 1px solid transparent; /* Borde transparente por defecto */
    flex-shrink: 0; /* Evita que los enlaces se compriman en exceso */
}

.navbar-link:hover {
    color: #e6edf3; /* Color de texto al pasar el ratón */
    background-color: #30363d; /* Fondo al pasar el ratón */
    transform: translateY(-2px); /* Efecto de "levantamiento" */
    border-color: #444c56; /* Color del borde al pasar el ratón */
}

/* Estilo para el enlace activo de la página actual */
.navbar-link.active {
    color: #58a6ff; /* Color de acento azul */
    background-color: #203554; /* Fondo para el elemento activo */
    font-weight: 600;
    border-color: #58a6ff; /* Borde del color de acento */
    box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.3); /* Sombra sutil para el activo */
}

.navbar-link .icon {
    font-size: 1.2rem; /* Tamaño de los íconos */
    line-height: 1; /* Asegurar que los íconos no causen problemas de alineación si tienen un tamaño de línea inconsistente */
}

/* Estilo para el contador de ítems en el carrito */
.cart-count {
    background-color: #da3633; /* Fondo rojo para el contador */
    color: white;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 10px; /* Completamente redondeado */
    margin-left: 5px;
    min-width: 18px; /* Asegura un ancho mínimo */
    text-align: center;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    line-height: 1; /* Alineación de texto */
    height: 18px;
    flex-shrink: 0;
}

/* Mensaje de bienvenida del usuario (visible dentro del botón de cuenta) */
.welcome-message {
    color: #c9d1d9; /* Color de texto */
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.welcome-message .user-name {
    color: #58a6ff; /* Color de acento para el nombre de usuario */
    font-weight: 600;
}

/* --- Estilos del Menú Desplegable (para "Cuenta" o "Hola, Usuario") --- */

/* Contenedor principal del botón de cuenta y su menú desplegable */
.navbar-auth-dropdown {
    position: relative; /* Crucial para posicionar el menú desplegable relativo a este */
    display: flex; /* Permite alinear el botón si hubiera otros elementos aquí */
    align-items: center;
    
}

/* Estilo del botón que activa el menú desplegable */
.dropdown-toggle {
    background: none; /* Sin fondo predeterminado */
    border: none; /* Sin borde */
    color: #c9d1d9; /* Color de texto */
    font-size: 1.05rem;
    font-weight: 500;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 8px;
    display: flex;
    align-items: center; /* Centra ícono/texto y flecha verticalmente */
    gap: 8px; /* Espacio entre texto y flecha */
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease; /* Añadida transición para transform */
    flex-shrink: 0;
    line-height: 1.2; /* Ajustar line-height para mejor alineación si es necesario */
}

.dropdown-toggle:hover {
    background-color: #30363d;
    color: #e6edf3;
    transform: translateY(-2px); /* Efecto de "levantamiento" */
}


/* ******** AJUSTE: MOVER TODO EL BOTÓN DE CUENTA ARRIBA EN LOGIN/REGISTRO *********** */
/* Este selector apunta al .dropdown-toggle cuando el .main-navbar también tiene la clase .navbar-login-registro-especial. */
.main-navbar.navbar-login-registro-especial .dropdown-toggle {
    transform: translateY(-11px); /* Mueve todo el botón 3px hacia arriba. Ajusta este valor si es necesario. */
    transition: transform 0.2s ease; /* Para una transición suave */
}

/* Estilo para la flecha indicadora del menú desplegable */
.dropdown-toggle {
    padding-right: 25px; /* Añade espacio a la derecha para que no se pegue al borde en algunos casos */
}
.dropdown-toggle .dropdown-arrow {
    margin-left: 5px; /* Espacio a la izquierda de la flecha */
    font-size: 0.8rem;
    transition: transform 0.2s ease;
}

/* Rota la flecha cuando el menú está abierto */
.dropdown-toggle[aria-expanded="true"] .dropdown-arrow {
    transform: rotate(180deg);
}

/* Contenedor del menú desplegable (la lista de opciones) */
.dropdown-menu {
    display: none; /* Oculto por defecto */
    position: absolute;
    top: calc(100% + 10px); /* Posiciona el menú 10px debajo del botón toggle */
    right: 0; /* Alinea el menú a la derecha del botón toggle */
    background-color: #1f2a3a; /* Fondo oscuro para el menú */
    border: 1px solid #30363d; /* Borde del menú */
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4); /* Sombra para el menú */
    min-width: 180px; /* Ancho mínimo para las opciones */
    z-index: 1000; /* Asegura que el menú esté por encima de otros elementos */
    padding: 8px 0; /* Espaciado interno vertical */
    overflow: hidden; /* Asegura que los bordes redondeados se apliquen al contenido */
}

/* Muestra el menú cuando tiene la clase 'show' */
.dropdown-menu.show {
    display: block;
}

/* Estilo para cada elemento individual dentro del menú desplegable */
.dropdown-item {
    display: flex;
    align-items: center; /* Centra el contenido verticalmente */
    gap: 10px; /* Espacio entre ícono y texto si los hay */
    padding: 10px 20px; /* Espaciado interno para cada opción */
    color: #c9d1d9; /* Color de texto del ítem */
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
    white-space: nowrap; /* Evita que el texto se rompa en varias líneas */
    width: 100%; /* Ocupa todo el ancho disponible del menú */
    box-sizing: border-box; /* Incluye padding en el cálculo del ancho */
}

.dropdown-item:hover {
    background-color: #30363d; /* Fondo al pasar el ratón por un ítem */
    color: #e6edf3;
}

/* Estilo para el divisor horizontal dentro del menú */
.dropdown-divider {
    height: 1px;
    background-color: #30363d;
    margin: 8px 0;
}

/* Estilos específicos para el botón de cambio de tema dentro del menú */
.dropdown-item.theme-toggle-button {
    font-size: 1rem;
    justify-content: flex-start; /* Alinea el contenido a la izquierda */
    border-radius: 0; /* Sin bordes redondeados, se ajusta al menú */
    background: none; /* Sin fondo de botón */
    border: none; /* Sin borde de botón */
    color: #c9d1d9;
    cursor: pointer;
    text-align: left;
    outline: none; /* Eliminar el contorno al enfocar */
}

.dropdown-item.theme-toggle-button:hover {
    background-color: #30363d;
    color: #e6edf3;
    transform: none; /* Desactivar cualquier transformación extra */
}

/* Visibilidad de los iconos de sol/luna dentro del menú del tema */
.dropdown-item.theme-toggle-button .light-icon,
.dropdown-item.theme-toggle-button .dark-icon {
    display: none; /* Ocultar ambos por defecto */
    font-size: 1.2rem;
    margin-right: 8px;
}

/* Mostrar el ícono de sol en tema claro */
body.light-theme .dropdown-item.theme-toggle-button .light-icon {
    display: inline-block;
}
/* Mostrar el ícono de luna en tema oscuro */
body.dark-theme .dropdown-item.theme-toggle-button .dark-icon {
    display: inline-block;
}

/* Estilos para los botones "Ingresar" y "Registrarse" dentro del menú desplegable */
.dropdown-item.auth-button {
    background: none;
    border: none;
    color: #e6edf3;
    font-weight: 500;
    padding: 10px 20px;
    border-radius: 0;
    justify-content: flex-start;
    outline: none; /* Eliminar el contorno al enfocar */
}

.dropdown-item.auth-button:hover {
    background-color: #30363d;
    color: #e6edf3;
    transform: none;
    box-shadow: none;
}

/* --- Media Queries para Responsividad --- */

/* Para pantallas medianas y pequeñas (hasta 768px de ancho) */
@media (max-width: 768px) {
    .navbar-container {
        flex-direction: column; /* Apila los elementos verticalmente */
        gap: 20px; /* Espacio entre los grupos (links y auth) cuando están apilados */
        padding: 15px 15px 0; /* Ajusta el padding lateral para dispositivos móviles */
    }

    .navbar-links {
        flex-direction: column; /* Apila los enlaces individuales (Inicio, Carrito) */
        gap: 12px; /* Espacio entre enlaces apilados */
        width: 100%; /* Ocupa todo el ancho disponible */
        align-items: center; /* Centra los enlaces individualmente */
    }

    .navbar-link {
        width: calc(100% - 30px); /* Ajusta el ancho para el padding */
        text-align: center;
        justify-content: center; /* Centra el contenido (ícono y texto) */
    }

    /* El contenedor del botón de cuenta y su menú en móvil */
    .navbar-auth-dropdown {
        width: 100%;
        display: flex;
        justify-content: center; /* Centra el botón de toggle en la pantalla */
        margin-top: 10px; /* Espacio con los enlaces superiores */
    }

    /* El botón que activa el menú desplegable en móvil */
    .dropdown-toggle {
        width: calc(100% - 30px); /* Para que el botón se expanda casi todo el ancho */
        justify-content: center; /* Centra el contenido del botón */
    }

    /* El menú desplegable en móvil */
    .dropdown-menu {
        left: 50%; /* Posiciona el menú al 50% del ancho */
        transform: translateX(-50%); /* Lo desplaza hacia la izquierda la mitad de su propio ancho para centrarlo */
        min-width: 250px; /* Ancho mínimo para el menú en móvil */
        width: calc(100% - 40px); /* Ocupa la mayor parte del ancho disponible con un margen */
    }

    /* Los ítems del menú desplegable en móvil */
    .dropdown-item,
    .dropdown-item.theme-toggle-button,
    .dropdown-item.auth-button {
        width: 100%; /* Ocupa todo el ancho del menú */
        justify-content: flex-start; /* Los ítems siguen alineados a la izquierda dentro del menú */
    }
}

/* Para pantallas muy pequeñas (teléfonos antiguos, etc.) */
@media (max-width: 480px) {
    .navbar-link {
        font-size: 1rem;
    }

    .welcome-message {
        font-size: 1rem;
    }
}


/* Ocultar la flecha nativa del select o menú, si está duplicada */
.dropdown-toggle::after {
  display: none !important; /* Oculta la flecha que Bootstrap agrega */
}

/* En cambio, usa solo una flecha con un SVG o font icon personalizada */
.mi-flecha-personalizada {
  display: inline-block;
  /* estilos para tu flecha */
}

.dropdown-menu {
    z-index: 2000 !important;
}