/* css/header-nav.css */

nav {
    display: flex;
    align-items: center; /* Centra verticalmente los items */
    gap: 0 1rem; /* Espacio entre links */
}

/* Estilo base para los iconos SVG */
.nav-icon-link {
    color: var(--text-color);
    text-decoration: none;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.3s, color 0.3s;
}

.nav-icon-link svg {
    width: 24px;
    height: 24px;
    fill: currentColor; /* El SVG hereda el color del enlace */
}

.nav-icon-link:hover {
    color: var(--fuchsia-accent, #e30b5d);
    background-color: rgba(227, 11, 93, 0.1); /* Fondo fucsia sutil */
}

/* Estilo para el avatar del usuario */
.nav-avatar {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--fuchsia-accent, #e30b5d);
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
}

.nav-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nav-avatar:hover {
    transform: scale(1.1);
    box-shadow: 0 0 10px rgba(227, 11, 93, 0.7); /* Resplandor fucsia */
}