/* ============================================================
   TOPO — identidade do usuário
   Dois blocos: o BADGE da área (onde estou) e o MENU DO USUÁRIO
   (trocar de área, tamanho da tela, minha conta, sair).
   Usado pelos TRÊS headers: Gestão, Portal do Plantonista, Ensino.
   Mobile-first. Zero cor hardcoded — só tokens de variables.css.
   ============================================================ */

/* ===== Badge da área ===== */

.area-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 0.25rem 0.7rem;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-pill);
    background: var(--color-bg-light);
    color: var(--color-text-secondary);
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
}

.area-badge i {
    font-size: 0.8rem;
    color: var(--color-primary);
}

/* Acento por área — a cor entra no ícone, nunca como bloco chapado */
.area-badge--plantonista i {
    color: var(--color-plantao);
}

.area-badge--ensino i {
    color: var(--color-success);
}

/* Em telas estreitas fica só o ícone — o texto não pode empurrar o header */
.area-badge__texto {
    display: none;
}

@media (min-width: 768px) {
    .area-badge {
        font-size: var(--font-size-sm);
    }

    .area-badge__texto {
        display: inline;
    }
}

/* ===== Botão do menu ===== */

.user-menu {
    display: inline-flex;
    align-items: center;
}

.user-menu__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    /* Touch target mínimo em mobile */
    min-height: 44px;
    padding: 0 0.6rem;
    border: 1px solid transparent;
    border-radius: var(--border-radius-pill);
    background: transparent;
    color: var(--color-text-primary);
    cursor: pointer;
    transition: var(--transition-fast);
}

.user-menu__btn:hover,
.user-menu__btn:focus,
.user-menu__btn[aria-expanded="true"] {
    border-color: var(--color-border);
    background: var(--color-bg-light);
}

.user-menu__btn:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

.user-menu__avatar {
    font-size: 1.15rem;
    color: var(--color-text-secondary);
}

/* Em mobile o botão é só o ícone: o `mobile.css` esconde `.user_name` no topo,
   e um nome longo espremeria o badge da área e o sino. */
.user-menu__btn .user_name {
    display: none;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-primary);
    text-decoration: none;
}

.user-menu__seta {
    /* 0.8rem é o piso do projeto — nada abaixo disso, nem em ícone. */
    font-size: 0.8rem;
    color: var(--color-text-muted);
    transition: var(--transition-fast);
}

.user-menu__btn[aria-expanded="true"] .user-menu__seta {
    transform: rotate(180deg);
}

/* ===== Painel ===== */

.user-menu__painel {
    min-width: 15rem;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-xl);
    box-shadow: var(--shadow-lg);
}

/* ⚠️ Blindagem: `nav_cards_menu.css` estiliza o ELEMENTO `form` (padding de
   2rem + borda + fundo) e alcança o menu em qualquer página. Sem este reset o
   bloco de áreas vira um cartão gigante dentro do dropdown. */
.user-menu__painel .user-menu__form {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    border-radius: 0;
}

/* ===== Cabeçalho ===== */

.user-menu__cabecalho {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 0.85rem var(--spacing-md);
    background: var(--color-bg-light);
    border-bottom: 1px solid var(--color-border);
}

.user-menu__cabecalho-avatar {
    font-size: 1.75rem;
    color: var(--color-text-muted);
}

.user-menu__identidade {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.user-menu__nome {
    font-size: var(--font-size-sm);
    font-weight: 600;
    line-height: 1.25;
    color: var(--color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-menu__area {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    line-height: 1.25;
    color: var(--color-text-secondary);
}

.user-menu__area i {
    color: var(--color-primary);
}

/* ===== Seções ===== */

.user-menu__secao {
    padding: var(--spacing-xs) 0;
    border-bottom: 1px solid var(--color-border);
}

.user-menu__secao:last-child {
    border-bottom: 0;
}

.user-menu__titulo {
    display: block;
    padding: 0.35rem var(--spacing-md) 0.2rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.2;
    color: var(--color-text-muted);
    text-transform: uppercase;
}

/* ===== Itens ===== */

.user-menu__item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.5rem var(--spacing-md);
    border: 0;
    border-left: 3px solid transparent;
    background: transparent;
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    line-height: 1.3;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition-fast);
}

.user-menu__item i {
    width: 1.1rem;
    font-size: 0.9rem;
    text-align: center;
    color: var(--color-text-muted);
}

.user-menu__item:hover,
.user-menu__item:focus {
    background: var(--color-bg-light);
    color: var(--color-text-primary);
}

.user-menu__item:focus-visible {
    outline: none;
    box-shadow: inset var(--shadow-focus);
}

/* Área atual: acento na borda esquerda, sem bloco de cor chapado */
.user-menu__item--ativo {
    border-left-color: var(--color-primary);
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
    font-weight: 600;
}

.user-menu__item--ativo i {
    color: var(--color-primary);
}

.user-menu__item--sair,
.user-menu__item--sair i {
    color: var(--color-danger);
}

.user-menu__item--sair:hover,
.user-menu__item--sair:focus {
    background: var(--color-danger-light);
    color: var(--color-danger);
}

.user-menu__check {
    margin-left: auto;
    font-size: 0.8rem;
}

/* ===== Tamanho da tela ===== */

/* O nível atual vive na mesma linha do título da seção. */
.user-menu__titulo .font-scaler-label {
    float: right;
    font-weight: 600;
    color: var(--color-primary);
    text-transform: none;
    cursor: pointer;
}

/* O widget vive só aqui dentro — o `mobile.css` esconde `.font-scaler-widget`
   no topo, e essa regra alcançaria também o que está dentro do menu. */
.user-menu__fonte {
    display: flex !important;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 0.35rem var(--spacing-md) 0.6rem;
}

/* As duas letras "A" das pontas mostram para que lado o slider cresce. */
.font-scaler-marca {
    color: var(--color-text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1;
    user-select: none;
}

.font-scaler-marca--max {
    font-size: 1.15rem;
}

.font-scaler-range {
    flex: 1;
    height: 20px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    /* Aparência própria: o controle nativo ignora os tokens do projeto. */
    -webkit-appearance: none;
    appearance: none;
}

.font-scaler-range:focus {
    outline: none;
}

.font-scaler-range:focus-visible::-webkit-slider-thumb {
    box-shadow: var(--shadow-focus);
}

.font-scaler-range:focus-visible::-moz-range-thumb {
    box-shadow: var(--shadow-focus);
}

/* Trilho — Chrome/Safari/Edge */
.font-scaler-range::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: var(--border-radius-pill);
    background: var(--color-border);
}

/* Trilho — Firefox */
.font-scaler-range::-moz-range-track {
    height: 4px;
    border-radius: var(--border-radius-pill);
    background: var(--color-border);
}

/* Cursor — Chrome/Safari/Edge (o `margin-top` centraliza no trilho de 4px) */
.font-scaler-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    margin-top: -6px;
    border: 2px solid var(--color-bg-body);
    border-radius: var(--border-radius-full);
    background: var(--color-primary);
    box-shadow: var(--shadow-sm);
    transition: var(--transition-fast);
}

.font-scaler-range::-webkit-slider-thumb:hover {
    background: var(--color-primary-hover);
}

/* Cursor — Firefox */
.font-scaler-range::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border: 2px solid var(--color-bg-body);
    border-radius: var(--border-radius-full);
    background: var(--color-primary);
    box-shadow: var(--shadow-sm);
    transition: var(--transition-fast);
}

.font-scaler-range::-moz-range-thumb:hover {
    background: var(--color-primary-hover);
}

@media (min-width: 768px) {
    .area-badge {
        font-size: var(--font-size-sm);
    }

    .area-badge__texto {
        display: inline;
    }
}

/* ===== Botão do menu ===== */

.user-menu {
    display: inline-flex;
    align-items: center;
}

.user-menu__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    /* Touch target mínimo em mobile */
    min-height: 44px;
    padding: 0 0.6rem;
    border: 1px solid transparent;
    border-radius: var(--border-radius-pill);
    background: transparent;
    color: var(--color-text-primary);
    cursor: pointer;
    transition: var(--transition-fast);
}

.user-menu__btn:hover,
.user-menu__btn:focus,
.user-menu__btn[aria-expanded="true"] {
    border-color: var(--color-border);
    background: var(--color-bg-light);
}

.user-menu__btn:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

.user-menu__avatar {
    font-size: 1.15rem;
    color: var(--color-text-secondary);
}

/* Em mobile o botão é só o ícone: o `mobile.css` esconde `.user_name` no topo,
   e um nome longo espremeria o badge da área e o sino. */
.user-menu__btn .user_name {
    display: none;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-primary);
    text-decoration: none;
}

.user-menu__seta {
    /* 0.8rem é o piso do projeto — nada abaixo disso, nem em ícone. */
    font-size: 0.8rem;
    color: var(--color-text-muted);
    transition: var(--transition-fast);
}

.user-menu__btn[aria-expanded="true"] .user-menu__seta {
    transform: rotate(180deg);
}

/* ===== Painel ===== */

.user-menu__painel {
    min-width: 15rem;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-xl);
    box-shadow: var(--shadow-lg);
}

/* ⚠️ Blindagem: `nav_cards_menu.css` estiliza o ELEMENTO `form` (padding de
   2rem + borda + fundo) e alcança o menu em qualquer página. Sem este reset o
   bloco de áreas vira um cartão gigante dentro do dropdown. */
.user-menu__painel .user-menu__form {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    border-radius: 0;
}

/* ===== Cabeçalho ===== */

.user-menu__cabecalho {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 0.85rem var(--spacing-md);
    background: var(--color-bg-light);
    border-bottom: 1px solid var(--color-border);
}

.user-menu__cabecalho-avatar {
    font-size: 1.75rem;
    color: var(--color-text-muted);
}

.user-menu__identidade {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.user-menu__nome {
    font-size: var(--font-size-sm);
    font-weight: 600;
    line-height: 1.25;
    color: var(--color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-menu__area {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    line-height: 1.25;
    color: var(--color-text-secondary);
}

.user-menu__area i {
    color: var(--color-primary);
}

/* ===== Seções ===== */

.user-menu__secao {
    padding: var(--spacing-xs) 0;
    border-bottom: 1px solid var(--color-border);
}

.user-menu__secao:last-child {
    border-bottom: 0;
}

.user-menu__titulo {
    display: block;
    padding: 0.35rem var(--spacing-md) 0.2rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.2;
    color: var(--color-text-muted);
    text-transform: uppercase;
}

/* ===== Itens ===== */

.user-menu__item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.5rem var(--spacing-md);
    border: 0;
    border-left: 3px solid transparent;
    background: transparent;
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    line-height: 1.3;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition-fast);
}

.user-menu__item i {
    width: 1.1rem;
    font-size: 0.9rem;
    text-align: center;
    color: var(--color-text-muted);
}

.user-menu__item:hover,
.user-menu__item:focus {
    background: var(--color-bg-light);
    color: var(--color-text-primary);
}

.user-menu__item:focus-visible {
    outline: none;
    box-shadow: inset var(--shadow-focus);
}

/* Área atual: acento na borda esquerda, sem bloco de cor chapado */
.user-menu__item--ativo {
    border-left-color: var(--color-primary);
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
    font-weight: 600;
}

.user-menu__item--ativo i {
    color: var(--color-primary);
}

.user-menu__item--sair,
.user-menu__item--sair i {
    color: var(--color-danger);
}

.user-menu__item--sair:hover,
.user-menu__item--sair:focus {
    background: var(--color-danger-light);
    color: var(--color-danger);
}

.user-menu__check {
    margin-left: auto;
    font-size: 0.8rem;
}

/* ===== Tamanho da tela ===== */

.user-menu__fonte {
    padding: 0.2rem var(--spacing-md) 0.45rem;
}

/* O widget vive só aqui dentro — o `mobile.css` o esconde no topo, e essa
   regra alcançaria também o que está dentro do menu. */
.user-menu__fonte .font-scaler-widget {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-xs);
    width: 100%;
    padding: 0.2rem;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-pill);
    background: var(--color-bg-light);
}

.user-menu__fonte .font-scaler-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: var(--border-radius-full);
    background: var(--color-bg-body);
    color: var(--color-text-secondary);
    font-size: 0.8rem;
    cursor: pointer;
    transition: var(--transition-fast);
}

.user-menu__fonte .font-scaler-btn:hover:not(:disabled) {
    background: var(--color-primary);
    color: var(--color-bg-body);
}

.user-menu__fonte .font-scaler-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

.user-menu__fonte .font-scaler-label {
    flex: 1;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-primary);
    text-align: center;
    cursor: pointer;
}

@media (min-width: 768px) {
    .user-menu__btn {
        min-height: 38px;
    }

    /* Vence o `display: none !important` do mobile.css para `.user_name`. */
    .user-menu__btn .user_name {
        display: inline !important;
    }

    .user-menu__avatar {
        display: none;
    }
}