.main-header {
    background-color: rgb(63, 57, 57); /* El color oscuro que necesitabas */
    color: white;
    padding: 10px 0;
    width: 100%;
    position: relative;
    z-index: 101; /* Asegura que esté por encima de otros elementos */
}

.header-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between; /* Separa los 3 bloques */
    align-items: center;
    padding: 0 20px;
}

/* Estilo para el Logo */
.header-logo img {
    height: 60px; /* Ajusta según el tamaño de tu imagen */
    filter: brightness(1); /* Asegura que no tenga filtros oscuros */
}

/* Estilo para los links de la derecha */
.header-links a {
    color: white;
    text-decoration: none;
    font-size: 11px;
    font-weight: bold;
    margin-left: 15px;
}

.header-links a:hover {
    color: #ccc;
}

.header-social a {
    font-size: 1.3rem; /* Opcional: aumenta un poco el tamaño si se ven muy pequeños */
    color: #ffffff;
    transition: color 0.3s ease;
}

/* Contenedor de la derecha que agrupa todo */
.header-navigation {
    display: flex;
    align-items: center;
    gap: 25px;
}

/* Área específica de autenticación */
.user-auth-area {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-left: 20px;
    border-left: 1px solid rgba(255, 255, 255, 0.2); /* Separador vertical sutil */
}

/* Saludo del usuario */
.user-greeting {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}

.user-greeting a {
    color: green; /* Color amarillo para el nombre del usuario */
    font-weight: bold;
    text-decoration: none;
    font-weight: bold;
    /* border: 1px solid rgba(255, 82, 82, 0.3); */
    
    padding: 3px 4px;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.user-greeting a:hover {
    background-color: green;
    color: white !important;
}

.user-greeting i {
    font-size: 1.2rem;
    color: #9c27b0; /* Color de acento municipal */
}

/* Botón de Ingresar */
.btn-login {
    background-color: #9c27b0; /* Morado institucional */
    color: white !important;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 12px !important;
    font-weight: bold;
    text-transform: uppercase;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}

.btn-login:hover {
    background-color: #7b1fa2;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* Botón de Cerrar Sesión */
.btn-logout {
    color: #ff5252 !important; /* Color rojo suave para salida */
    font-size: 11px !important;
    font-weight: bold;
    text-transform: uppercase;
    /* border: 1px solid rgba(255, 82, 82, 0.3); */
    padding: 3px 4px;
    border-radius: 6px;
    transition: all 0.3s ease;
    text-decoration: none;
}

.btn-logout:hover {
    background-color: #ff5252;
    color: white !important;
}

/* Ajuste de los links normales para que no se peguen */
.header-links {
    display: flex;
    gap: 15px;
}