/* Quitar recuadro blanco detrás de botones de la cabecera (solo topbar items específicos) */
.topbar-head-dropdown .btn,
.topbar-user .btn,
.header-item .btn.btn-topbar {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0.18rem 0.4rem !important;
}

/* Icono sustituto (cuando no hay imagen) */
.header-profile-icon {
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.04); /* sutil sobre fondo oscuro */
    color: #ffffff;
    font-size: 18px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.06);
}

/* Si hay imagen de perfil, que no tenga fondo blanco ni recuadro extraño */
.header-profile-user {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 50%;
    background: transparent !important;
    border: 1px solid rgba(255,255,255,0.06);
    display: inline-block;
}

/* Texto del usuario: contraste y truncado */
.user-name-text {
    color: #ffffff; /* visible sobre header oscuro */
}

.user-name-sub-text {
    color: rgba(255,255,255,0.75);
}

/* Cuando el header sea claro (si cambiás tema), mantener legibilidad */
.header.light .user-name-text,
.header.light .user-name-sub-text {
    color: #383838;
}

/* Asegura que la campana y badges no aparezcan en un recuadro blanco */
.topbar-head-dropdown .position-absolute.topbar-badge {
    transform: translate(40%, -20%) !important;
}

/* Opcional: si el botón con icono tiene foco, elegir borde sutil (no caja blanca) */
.topbar-user .btn:focus,
.topbar-head-dropdown .btn:focus {
    outline: none !important;
    box-shadow: 0 0 0 0.12rem rgba(128,189,255,0.08) !important;
}