/* Header layout puro CSS */
.CustomHeader {
    display: flex;
    align-items: center;
    justify-content: space-between; /* logo izquierda, user derecha */
    height: 64px;
    padding: 0 12px;
    background-color: #141b4d;
    box-sizing: border-box;
    gap: 12px;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.header-right {
    display: flex;
    align-items: center;
}

.user-area {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #ffffff; /* texto blanco en header */
}

    .user-area .mud-menu-root,
    .user-area .mud-menu {
        color: #ffffff; /* asegurar íconos/labels blancos si hace falta */
    }

.user-text {
    color: #ffffff !important;
    font-weight: 500;
}

.logoHeader {
    margin-left: 10px;
    height: auto;
    width: 120px;
    display: block;
}

/* Prevent MudBlazor default paddings from breaking alignment */
.mud-menu-button, .mud-text {
    vertical-align: middle;
}

@media (max-width: 640px) {
    .logoHeader {
        width: 100px;
    }

    .CustomHeader {
        padding: 0 8px;
    }
}