/* SIGO Visual Refinement — MudBlazor overrides (carregado por último) */

/* ══════════════════════════════════════════════════════════════════
   ITENS DE ORÇAMENTO/PEDIDO — badge de recorrência, resumo, estado vazio
   ══════════════════════════════════════════════════════════════════ */

.ws-badge-recorrencia {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--sigo-hover-bg);
    color: var(--sigo-navy-mid);
    white-space: nowrap;
    flex-shrink: 0;
}

.ws-orc-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 40px 20px;
    border: 1px dashed var(--sigo-border);
    border-radius: var(--sigo-radius-card);
    color: var(--sigo-muted);
    text-align: center;
    margin-bottom: 12px;
}

.ws-orc-empty .mud-icon-root {
    opacity: .4;
}

.ws-orc-summary {
    background: var(--sigo-bg);
    border-radius: var(--sigo-radius-card);
    padding: 14px 16px;
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ws-orc-summary-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    font-size: .8rem;
    color: var(--sigo-muted);
}

.ws-orc-summary-row .ws-orc-summary-label {
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    font-size: .72rem;
}

.ws-orc-summary-row .ws-orc-summary-valor {
    min-width: 110px;
    text-align: right;
    font-weight: 600;
    color: var(--sigo-text);
}

.ws-orc-summary-recorrencias {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.ws-orc-summary-recorrencias .ws-orc-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--sigo-surface);
    border: 1px solid var(--sigo-border);
    border-radius: 8px;
    padding: 6px 12px;
}

.ws-orc-summary-recorrencias .ws-orc-chip span:first-child {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--sigo-muted);
}

.ws-orc-summary-recorrencias .ws-orc-chip span:last-child {
    font-size: .85rem;
    font-weight: 700;
    color: var(--sigo-text);
    white-space: nowrap;
}

.ws-orc-summary-total {
    justify-content: space-between;
    padding-top: 8px;
    border-top: 1px solid var(--sigo-border);
    font-size: 1rem;
}

.ws-orc-summary-total .ws-orc-summary-label {
    font-size: .8rem;
    color: var(--sigo-text);
}

.ws-orc-summary-total .ws-orc-summary-valor {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--sigo-text);
    min-width: unset;
}

/* ══════════════════════════════════════════════════════════════════
   PRECIFICAÇÃO — separação visual Custo / Venda
   ══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   BADGE %SM — indicador de preço baseado em salário mínimo
   ══════════════════════════════════════════════════════════════════ */

.ws-badge-manual {
    background: var(--sigo-cyan);
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.ws-badge-sm {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(47, 211, 255, 0.15);
    color: var(--sigo-accent-ink);
    border: 1px solid rgba(47, 211, 255, 0.4);
    cursor: default;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════
   VALOR CALCULADO — display somente-leitura (sem MudTextField)
   Elemento HTML puro: Blazor re-renderiza o texto diretamente,
   sem o estado interno do MudBlazor que impedia a atualização.
   ══════════════════════════════════════════════════════════════════ */

.ws-calc-display {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #f9fafb;
    font-family: var(--sigo-font-family, 'Hanken Grotesk', system-ui, sans-serif);
    font-size: 14px;
    color: var(--sigo-text-body);
    font-weight: 500;
    user-select: none;
}

.ws-calc-display--disabled {
    color: var(--sigo-muted);
    font-size: 12px;
    font-style: italic;
    font-weight: 400;
}

/* ══════════════════════════════════════════════════════════════════
   TUTOR — ícone de ensino com tooltip explicativo
   ══════════════════════════════════════════════════════════════════ */

/* ── Tutor — ícone + tooltip flutuante (sem MudTooltip) ─────────────
   MudTooltip não permite quebra de linha confiável por causa do
   white-space:nowrap aplicado internamente pelo MudBlazor.

   O balão (".ws-tutor-tooltip") é um único elemento real, criado uma vez
   por ws-tutor.js e anexado a <body> — não é filho de ".ws-tutor-wrap".
   Isso é proposital: um pseudo-elemento (::after) preso dentro do ícone
   fica sujeito ao overflow:hidden/auto do ancestral mais próximo (ex.: o
   corpo rolável de um MudDialog), e pode ser cortado mesmo quando há
   espaço de sobra na tela. Um elemento `position:fixed` em <body> escapa
   desse recorte e é sempre posicionado por JS com coordenadas reais
   (getBoundingClientRect do ícone), recalculadas a cada hover/foco/scroll/
   resize — nunca aparece cortado nem sobrepõe texto ilegível.

   ".ws-tutor-right" no ícone é a preferência de lado (padrão = esquerda);
   ws-tutor.js decide o lado final medindo o espaço real disponível e
   ajusta a posição vertical para nunca estourar o topo/rodapé da viewport.

   CONVENÇÃO DE TEXTO para novos `Tip="..."` (pt-BR):
   - Frase objetiva, direto ao ponto — não é lugar para parágrafos longos
     (a caixa tem largura fixa, ver `min(210px, ...)` abaixo).
   - Inicial maiúscula, restante em minúsculas (case de frase normal) —
     NUNCA CAIXA ALTA integral nem Cada Palavra Maiúscula.
   - Preservar: nomes próprios (WhatsApp), siglas/abreviações técnicas
     (CNPJ, PDV, SM), e nomes de conceitos/seções já capitalizados em
     outras partes do app (ex.: "Salário Mínimo", "Acordo Comercial" —
     este último é o título da página no PDF, ver `OrcamentoProposta.razor`)
     ou de campos vizinhos citados pelo nome exato do `ws-field-label`
     (ex.: "Preço de Custo (R$)").
   - Terminar com ponto final.
   - `text-transform: none !important` abaixo garante que a capitalização
     definida aqui nunca é sobrescrita por um ancestral com CAIXA ALTA
     (ex.: um MudText de section-label com `text-transform:uppercase`).
   ──────────────────────────────────────────────────────────────────── */
.ws-tutor-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: help;
}

.ws-tutor-icon {
    font-size: 16px !important;
    color: var(--sigo-muted) !important;
    transition: color 0.15s ease !important;
    flex-shrink: 0;
}

.ws-tutor-wrap:hover .ws-tutor-icon,
.ws-tutor-wrap:focus-within .ws-tutor-icon {
    color: var(--sigo-accent-ink) !important;
}

/* Balão flutuante — criado/posicionado por ws-tutor.js, um único elemento
   reaproveitado para todos os Tutores da página. left/top/width são
   sempre definidos inline via JS (coordenadas reais da viewport); o
   width aqui é só um fallback antes do primeiro posicionamento. */
.ws-tutor-tooltip {
    position: fixed;
    width: min(210px, calc(100vw - 24px));
    white-space: normal;
    word-break: break-word;
    text-transform: none !important;
    background: var(--sigo-navy);
    color: #ffffff;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    padding: 10px 12px;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(21, 35, 65, 0.28);
    pointer-events: none;
    opacity: 0;
    z-index: 9999;
    transition: opacity 0.15s ease;
}

.ws-tutor-tooltip.ws-tutor-tooltip-visible {
    opacity: 1;
}

/* Seta apontando para o ícone — posição vertical ajustada por JS via
   var(--ws-tutor-arrow-top) sempre que a caixa precisa deslocar pra caber
   na viewport (fica perto do ícone mesmo com a caixa reancorada). */
.ws-tutor-tooltip::after {
    content: '';
    position: absolute;
    top: var(--ws-tutor-arrow-top, 50%);
    transform: translateY(-50%);
    border: 5px solid transparent;
}
.ws-tutor-tooltip[data-side="left"]::after {
    left: 100%;
    border-left-color: var(--sigo-navy);
}
.ws-tutor-tooltip[data-side="right"]::after {
    right: 100%;
    border-right-color: var(--sigo-navy);
}

/* ══════════════════════════════════════════════════════════════════
   QUALIFICAÇÃO DE LEADS — grade compacta de grupos de tags
   (LeadClassificacaoTab.razor, aba "Qualificação" do Pipeline)
   ══════════════════════════════════════════════════════════════════ */

/* Pill de status (Classificação incompleta / Lead aguardando Qualificação) —
   mesmo MudAlert do resto do app (cores/tema automáticos), só compactado em
   formato de cápsula em vez do bloco largo padrão. */
.ws-qualif-pill.mud-alert {
    display: inline-flex;
    width: auto;
    align-items: center;
    padding: 4px 12px;
    border-radius: 999px;
}
.ws-qualif-pill .mud-alert-message {
    padding: 0;
    font-size: 12px;
    font-weight: 600;
}
.ws-qualif-pill .mud-icon-root {
    font-size: 16px;
}

/* Barra de progresso — X/Y critérios cumpridos (grupos + meta-regra de Comportamento). */
.ws-qualif-progress {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ws-qualif-progress-track {
    width: 96px;
    height: 6px;
    border-radius: 999px;
    background: var(--sigo-border);
    overflow: hidden;
}
.ws-qualif-progress-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--sigo-cyan);
    transition: width 0.2s ease;
}
.ws-qualif-progress-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--sigo-muted);
    white-space: nowrap;
}

/* Card de grupo — versão compacta do WsSubBlock, pensada pra caber várias
   colunas lado a lado (ver MudItem xs=12 sm=6 lg=4) e reduzir a rolagem
   vertical numa tela com 14 grupos de tags. */
.ws-qualif-card {
    background: var(--sigo-bg);
    border: 1px solid var(--sigo-border);
    border-radius: var(--sigo-radius-card);
    padding: 8px 10px;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 5px;
    transition: border-color 0.15s ease;
}
.ws-qualif-card:hover {
    border-color: var(--sigo-muted-light);
}
.ws-qualif-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    flex-wrap: wrap;
}
.ws-qualif-card-title {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.ws-qualif-card-icon {
    width: 19px;
    height: 19px;
    border-radius: 5px;
    background: var(--sigo-surface);
    color: var(--ws-qualif-accent, var(--sigo-muted));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ws-qualif-card-icon .mud-icon-root {
    font-size: 12px;
}
.ws-qualif-card-titletext {
    font-size: 11px;
    line-height: 1.3;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    color: var(--ws-qualif-accent, var(--sigo-text));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ws-qualif-rule-badge {
    font-size: 9px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 999px;
    white-space: nowrap;
    background: var(--sigo-surface);
    color: var(--sigo-muted);
    border: 1px solid var(--sigo-border);
}
.ws-qualif-rule-badge--required {
    background: rgba(47, 211, 255, 0.12);
    color: var(--sigo-navy-mid);
    border: 1px solid rgba(47, 211, 255, 0.3);
}
[data-theme="dark"] .ws-qualif-rule-badge--required {
    color: var(--sigo-cyan);
}
.ws-qualif-chips.mud-chipset {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
/* Chips de tag mais compactos (a densidade "Small" do MudChip ainda deixa
   ~28px de altura e 13px de fonte — grande demais pra caber 14 grupos com
   várias tags cada sem rolar muito a tela do modal de qualificação). */
.ws-qualif-chips .mud-chip {
    height: 22px !important;
    min-height: 22px !important;
    padding: 0 8px !important;
    font-size: 11px !important;
}

/* Cores das tags — sobrepõe o Variant automático do MudChip (o padrão do
   MudBlazor inverte Filled/Text conforme a seleção, o que deixava a tag NÃO
   selecionada com aparência sólida/forte e a SELECIONADA esmaecida, o
   oposto do esperado). Aqui o estado é controlado só por ".mud-chip-selected",
   sempre presente independente do Variant/Color passados no componente. */
.ws-qualif-chips .mud-chip {
    background: var(--sigo-surface) !important;
    color: var(--sigo-text-body) !important;
    border: 1px solid var(--sigo-border) !important;
}
.ws-qualif-chips .mud-chip:hover:not(.mud-disabled):not(.mud-chip-selected) {
    background: var(--sigo-hover-bg) !important;
    border-color: var(--sigo-muted-light) !important;
    color: var(--sigo-text) !important;
}
.ws-qualif-chips .mud-chip.mud-chip-selected {
    background: var(--ws-qualif-accent, var(--sigo-navy)) !important;
    color: #ffffff !important;
    border-color: var(--ws-qualif-accent, var(--sigo-navy)) !important;
    font-weight: 600;
}
.ws-qualif-chips .mud-chip.mud-disabled {
    opacity: 0.4 !important;
}

/* ── Tela de manutenção de Tags de Qualificação (Parâmetros > Comercial) ─────
   Mesmo card .ws-qualif-card acima, em versão "gerenciável": clicável (abre o
   modal com todas as tags do grupo), título em duas linhas (nome + descrição)
   e prévia das tags como chips estáticos (sem seleção/MudChipSet). */

/* Indicadores compactos do topo (Grupos Cadastrados / Tags Ativas / Grupos
   Obrigatórios) — bloco horizontal baixo (ícone + rótulo/valor), mais discreto
   que o KpiCard padrão (que é vertical e ocupa bem mais altura). */
.ws-qualif-stat {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: var(--sigo-radius);
    background: var(--sigo-bg);
    border: 1px solid var(--sigo-border);
    height: 100%;
}
.ws-qualif-stat-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(var(--ws-qualif-stat-rgb), 0.12);
    color: rgb(var(--ws-qualif-stat-rgb));
}
.ws-qualif-stat-icon .mud-icon-root {
    font-size: 18px !important;
    color: rgb(var(--ws-qualif-stat-rgb)) !important;
}
.ws-qualif-stat-body {
    min-width: 0;
    line-height: 1.25;
}
.ws-qualif-stat-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--sigo-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ws-qualif-stat-value {
    font-size: 15px;
    font-weight: 700;
    color: var(--sigo-text);
    white-space: nowrap;
}
.ws-qualif-card--manage {
    cursor: pointer;
    box-shadow: var(--sigo-shadow);
}
.ws-qualif-card--manage:hover {
    border-color: var(--ws-qualif-accent, var(--sigo-muted-light));
    box-shadow: var(--sigo-shadow-lg);
}
.ws-qualif-card-titlegroup {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 1px;
}
.ws-qualif-card-index {
    font-size: 11px;
    font-weight: 700;
    color: var(--sigo-muted-light);
    flex-shrink: 0;
}
.ws-qualif-chips-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    min-height: 24px;
}
.ws-qualif-chip-preview {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 7px;
    font-size: 10.5px;
    font-weight: 500;
    background: var(--sigo-surface);
    color: var(--sigo-text-body);
    border: 1px solid var(--sigo-border);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.ws-qualif-chip-preview--inativa {
    color: var(--sigo-muted-light);
    text-decoration: line-through;
    background: transparent;
}
.ws-qualif-chip-preview--empty {
    color: var(--sigo-muted-light);
    font-style: italic;
    border-style: dashed;
}
.ws-qualif-chip-preview--more {
    color: var(--ws-qualif-accent, var(--sigo-navy-mid));
    background: transparent;
    border-style: dashed;
    font-weight: 700;
}
.ws-qualif-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    padding-top: 6px;
    border-top: 1px solid var(--sigo-border);
    font-size: 10.5px;
    color: var(--sigo-muted);
}
.ws-qualif-card-manage-link {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-weight: 600;
    color: var(--ws-qualif-accent, var(--sigo-navy-mid));
}
.ws-qualif-card-manage-link .material-symbols-outlined {
    font-size: 14px;
}

/* Pílulas de filtro rápido (Todos / Obrigatórios / Comportamento) */
.ws-qualif-filter-pill {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    color: var(--sigo-text-body);
    background: var(--sigo-bg);
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.ws-qualif-filter-pill:hover {
    background: var(--sigo-hover-bg);
}
.ws-qualif-filter-pill--active {
    background: var(--sigo-navy);
    color: #ffffff;
}

/* Divisor horizontal entre os dois blocos */
.ws-preco-divisor {
    border: none;
    border-top: 1px solid var(--sigo-border);
    margin: 20px 0 16px;
}

/* Sub-cabeçalho com borda esquerda colorida */
.ws-preco-bloco {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 6px;
    margin-bottom: 14px;
    border-left: 3px solid transparent;
}

.ws-preco-custo {
    background: rgba(21, 35, 65, 0.05);
    border-left-color: var(--sigo-navy);
}

.ws-preco-venda {
    background: rgba(0, 166, 96, 0.06);
    border-left-color: var(--sigo-green);
}

.ws-preco-bloco-icon {
    font-size: 16px !important;
    flex-shrink: 0;
}

.ws-preco-custo .ws-preco-bloco-icon { color: var(--sigo-accent-ink) !important; }
.ws-preco-venda .ws-preco-bloco-icon { color: var(--sigo-green) !important; }

.ws-preco-bloco-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.ws-preco-custo .ws-preco-bloco-label { color: var(--sigo-accent-ink); }
.ws-preco-venda .ws-preco-bloco-label { color: var(--sigo-green); }

/* Subseção reutilizável — agrupa um bloco inteiro (cabeçalho + campos)
   dentro de uma aba, com o mesmo espírito visual leve de .ws-preco-bloco
   acima (borda sutil, fundo levemente destacado sobre --sigo-surface),
   mas como contêiner completo em vez de apenas um rótulo. Consumida pelo
   componente Components/WsSubBlock.razor (título+ícone via
   .ws-section-header interno já embutido no componente — não repetir
   markup solto para novos sub-blocos, usar <WsSubBlock> em vez disso; ver
   PedidosForm.razor, aba "Projeto e Integrações": Perfil da Implantação,
   Gerente do Projeto e Prazo, Conciliações e Integrações, Bandeiras do Posto).
   Só usa tokens --sigo-* (nenhuma cor fixa), então herda automaticamente
   qualquer tema claro/escuro futuro definido nesses tokens — hoje o app
   não tem tema escuro implementado (sem PaletteDark em WebsideTheme.cs),
   então não há nada a validar em runtime além de manter esse invariante. */
.ws-subsection-block {
    background: color-mix(in srgb, var(--sigo-navy) 3%, var(--sigo-surface));
    border: 1px solid var(--sigo-border);
    border-radius: var(--sigo-radius-card);
    padding: 16px;
    margin-top: 16px;
}

/* ══════════════════════════════════════════════════════════════════
   PADRÃO CAIXA ALTA — toda entrada de texto exibe em maiúsculas.
   A conversão real ocorre no servidor via UpperCaseStringConverter.
   ══════════════════════════════════════════════════════════════════ */

.mud-input-slot input:not([type="email"]):not([type="password"]):not([type="url"]),
.mud-input-slot textarea {
    text-transform: uppercase;
}

/* ══════════════════════════════════════════════════════════════════
   LAYOUT RAIZ
   ── sigo-layout   : flex-row, 100vw × 100vh, sem overflow externo
   ── sigo-sidebar  : coluna fixa à esquerda, 100vh, position fixed
   ── sigo-content  : coluna à direita, margin-left = largura sidebar
   ══════════════════════════════════════════════════════════════════ */

.sigo-layout {
    display: flex;
    width: 100vw;
    height: 100vh;
    /* dvh (viewport dinâmico) exclui a barra de endereço/teclado do Safari/Chrome mobile —
       100vh sozinho conta a altura "cheia" da tela e deixa uma faixa cortada atrás da barra
       do navegador em iOS. Fallback automático: navegadores sem suporte a dvh ignoram esta
       linha e mantêm o 100vh acima. */
    height: 100dvh;
    overflow: hidden;
    background: var(--sigo-bg);
}

/* ── Sidebar — filho flex com largura fixa (sem position:fixed) ─── */
/*
   position:fixed retira o elemento do fluxo normal e pode conflitar
   com o contexto de renderização do Blazor Server.
   Usamos flex-shrink:0 + width para manter a sidebar como coluna fixa
   dentro do flex-row .sigo-layout.
*/
.sigo-sidebar {
    flex-shrink: 0;
    flex-grow: 0;
    width: 240px;
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--sigo-surface);
    border-right: 1px solid var(--sigo-border);
    overflow: hidden;
    /* sidebar-transition: 300ms cubic-bezier(0.4,0,0.2,1) */
    transition: width 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.sigo-sidebar--collapsed {
    width: 64px;
}

/* ── Zona 1: Topo (logo) ──────────────────────────────────────────────
   Sem border-bottom (2026-10-12): a sidebar é uma peça só da base ao topo,
   sem linha separando a logo dos itens do menu. */
.sigo-sidebar-top {
    display: flex;
    align-items: center;
    padding: 0 8px;
    height: 54px;
    flex-shrink: 0;
    overflow: hidden;
}

.sigo-sidebar--collapsed .sigo-sidebar-top {
    justify-content: center;
    padding: 0;
}

/* flex:1 + justify-content:center centralizam a logo no topo — o botão de
   recolher não divide mais esta faixa (é flutuante, .sigo-sidebar-fab), então
   a mini-logo cabe sozinha nos 64px da sidebar minimizada. */
.sigo-sidebar-logo {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.sigo-logo-full {
    height: 31px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
    display: block;
}

/* Logos reduzidas quadradas (264×264): logo-p-modo-claro.png / logo-p-modo-escuro.png. */
.sigo-logo-mini {
    width: 36px;
    height: 36px;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
    animation: ws-sidebar-fadein 0.22s ease both;
}

/* ── Botão flutuante de recolher/expandir ─────────────────────────
   Irmão da sidebar no .sigo-layout (a sidebar tem overflow:hidden e
   cortaria o meio do botão que fica para fora). Círculo centrado na
   borda direita da sidebar, na altura em que termina o topo (54px, alinhado
   à linha inferior do header); "left" acompanha a mesma transição de largura da sidebar.
   O chevron gira 180° quando minimizada (aponta para "expandir"). */
.sigo-layout {
    position: relative;
}

.sigo-sidebar-fab {
    --sigo-fab-size: 26px;
    position: absolute;
    top: calc(54px - var(--sigo-fab-size) / 2);
    left: calc(240px - var(--sigo-fab-size) / 2);
    z-index: 1050;
    width: var(--sigo-fab-size);
    height: var(--sigo-fab-size);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--sigo-border);
    background: var(--sigo-surface);
    color: var(--sigo-muted);
    box-shadow: var(--sigo-shadow-lg, var(--sigo-shadow));
    cursor: pointer;
    transition: left 300ms cubic-bezier(0.4, 0, 0.2, 1),
                background 0.15s ease, color 0.15s ease,
                border-color 0.15s ease, transform 0.15s ease;
}

.sigo-layout.sidebar-collapsed .sigo-sidebar-fab {
    left: calc(64px - var(--sigo-fab-size) / 2);
}

/* Hover invertido: fundo = cor de acento do tema (navy / ciano), ícone = superfície. */
.sigo-sidebar-fab:hover {
    background: var(--sigo-accent-ink);
    border-color: var(--sigo-accent-ink);
    color: var(--sigo-surface);
    transform: scale(1.08);
}

.sigo-sidebar-fab .mud-icon-root {
    font-size: 18px !important;
    color: inherit !important;
    transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.sigo-layout.sidebar-collapsed .sigo-sidebar-fab .mud-icon-root {
    transform: rotate(180deg);
}

/* ── Zona 2: Nav (meio, flex-1, overflow-y interno) ───────────────── */
.sigo-sidebar-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 0;
}

/* ── Zona 3: Rodapé fixo (versão) ──────────────────────────────────
   Irmão de .sigo-sidebar-nav no flex-column de .sigo-sidebar — fora do
   overflow-y:auto da Zona 2, nunca rola junto com a navegação. A chave
   "Modo escuro" saiu daqui em 2026-10-17 para o header (.sigo-header-tema). */
.sigo-sidebar-footer {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 8px 10px;
    border-top: 1px solid var(--sigo-border);
    animation: ws-sidebar-fadein 0.22s ease both;
}

.sigo-sidebar--collapsed .sigo-sidebar-footer {
    align-items: center;
    padding: 8px 0 10px;
}

.sigo-sidebar-versao {
    padding: 6px 12px 0;
    text-align: center;
    font-size: 11px;
    color: var(--sigo-muted-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sigo-sidebar--collapsed .sigo-sidebar-versao {
    padding: 6px 0 0;
    font-size: 10px;
    text-align: center;
}

/* MudTooltip renderiza em portal (fora do DOM da sidebar), portanto
   overflow:hidden na sidebar não corta os tooltips. */

/* ── Separador ─────────────────────────────────────────────────────
   Separador horizontal da navegação: .sigo-nav-sep no modo expandido,
   .ws-mini-divider (definido junto de .ws-mini-nav) no minimizado. */
.sigo-nav-sep {
    border: none;
    border-top: 1px solid var(--sigo-border);
    margin: 8px 12px;
}

/* ── Coluna de conteúdo à direita da sidebar ─────────────────────── */
/*
   flex:1 ocupa todo o espaço restante após a sidebar.
   min-width:0 evita overflow em filhos com texto longo.
   Sem margin-left: a sidebar flex-shrink:0 já empurra o conteúdo.
*/
.sigo-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

/* ── Área de conteúdo rolável ────────────────────────────────────── */
.sigo-main {
    flex: 1;
    overflow-y: auto;
    background: var(--sigo-bg);
}

/* ══════════════════════════════════════════════════════════════════
   SIDEBAR EM TELAS ESTREITAS (tablet retrato / smartphone) — overlay
   ── Abaixo de 960px a sidebar de 240px (ou até o mini de 64px) não sobra
      espaço útil para o conteúdo (num phone de 375px ela sozinha comeria
      64% da tela). Em vez de continuar como coluna flex fixa (empurrando
      o conteúdo), aqui ela vira um painel sobreposto (position:fixed,
      fora da tela por padrão) acionado por um hambúrguer no header.
   ── Histórico: position:fixed já tinha sido tentado e revertido na
      sidebar (commit 4690de2, "sidebar virava block e ocupava 100% da
      largura") — mas era a sidebar SEMPRE fixa, disputando com o layout
      flex de desktop. Aqui o fixed só existe DENTRO deste media query,
      isolado do fluxo flex normal (que continua intocado ≥960px), e o
      width é redeclarado explicitamente para não repetir o problema.
   ══════════════════════════════════════════════════════════════════ */

.sigo-mobile-menu-btn {
    display: none;
}

.sigo-sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: 1250;
}

@media (max-width: 960px) {
    .sigo-mobile-menu-btn {
        display: inline-flex !important;
    }

    /* Botão flutuante de colapso desktop escondido — o hambúrguer é o
       único controle de abrir/fechar neste breakpoint. */
    .sigo-sidebar-fab {
        display: none !important;
    }

    .sigo-sidebar,
    .sigo-sidebar--collapsed {
        position: fixed;
        top: 0;
        left: 0;
        width: 280px;
        height: 100vh;
        height: 100dvh;
        z-index: 1300;
        transform: translateX(-100%);
        transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: var(--sigo-shadow-lg);
    }

    /* Aberta via .mobile-nav-open em .sigo-layout (MainLayout.razor, estado
       _mobileMenuOpen) — independente do estado de colapso desktop
       (_drawerOpen), que continua controlando só a versão ≥960px. */
    .sigo-layout.mobile-nav-open .sigo-sidebar {
        transform: translateX(0);
    }

    /* Removida do fluxo (position:fixed), a sidebar não empurra mais
       .sigo-content — ele já ocupa 100% da largura sozinho (flex:1 no
       .sigo-layout sem mais nenhum irmão em fluxo normal disputando
       espaço), sem precisar de override de width/margin aqui. */
}

/* ══════════════════════════════════════════════════════════════════
   HEADER
   ── Contido na coluna de conteúdo (nunca ultrapassando a sidebar)
   ── height: 54px, position sticky top 0, z-index 100
   ══════════════════════════════════════════════════════════════════ */

.sigo-header {
    height: 54px;
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--sigo-surface);
    border-bottom: 1px solid var(--sigo-border);
    display: flex;
    align-items: center;
    padding: 0 24px;
    flex-shrink: 0;
    gap: 16px;
}

/* Ações — único bloco do header agora (o breadcrumb saiu daqui, ver
   .sigo-page-breadcrumb abaixo — passou a viver dentro da janela/aba
   aberta, acima do card principal, em vez do header fixo). margin-left:auto
   empurra o bloco para a direita sem depender de um segundo item irmão
   (antes disso vinha de justify-content:space-between com .sigo-header-left). */
.sigo-header-right {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    margin-left: auto;
}

.sigo-header-icon-btn {
    color: var(--sigo-muted) !important;
    border-radius: 8px !important;
    transition: background 0.15s ease, color 0.15s ease !important;
}

.sigo-header-icon-btn:hover {
    background: var(--sigo-hover-bg) !important;
    color: var(--sigo-accent-ink) !important;
}

.sigo-header-icon-btn .mud-icon-root {
    color: inherit !important;
}

/* Chave "Modo escuro" (2026-10-17) — à esquerda do avatar: ícone sol/lua + MudSwitch compacto,
   mesma linguagem dos botões de ícone do header (raio 8px, hover --sigo-hover-bg). */
.sigo-header-tema {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 36px;
    padding: 0 2px 0 8px;
    margin-right: 6px;
    border-radius: 8px;
    transition: background 0.15s ease;
}
.sigo-header-tema:hover {
    background: var(--sigo-hover-bg);
}
.sigo-header-tema > .mud-icon-root {
    color: var(--sigo-muted);
}
.sigo-header-tema .mud-switch {
    margin: 0;
}

/* Divisor vertical entre ícones e ação contextual */
.sigo-header-divider {
    width: 1px;
    height: 24px;
    background: var(--sigo-border);
    margin: 0 6px;
    flex-shrink: 0;
}

/* Usuário logado — ao lado do sino de notificações. Só o avatar (iniciais) fica fixo no
   header (nome/cargo saíram daqui em 2026-09 — nome completo continua acessível via title=
   no hover); clicar abre o MudMenu com "Meu Perfil"/"Sair" (ver MainLayout.razor). Avatar 32px,
   centralizado verticalmente pelo align-items:center de .sigo-header-right. */
.sigo-header-user {
    display: flex;
    align-items: center;
    /* Altura FIXA igual à do header (.sigo-header, 54px) — não "100%": .sigo-header-right não
       tem altura própria definida (só align-items:center dentro do header, sem stretch), então
       height:100% não tinha um valor de referência real para resolver e não fazia efeito
       nenhum (avatar de 32px continuava centralizado, com a borda inferior deste elemento bem
       acima da borda real do header). O MudMenu ancora o popover exatamente na borda inferior
       deste elemento (AnchorOrigin.BottomRight) — precisa bater com a borda inferior do header
       de verdade, senão o popover abre "dentro" dele em vez de logo abaixo. */
    height: 54px;
    flex-shrink: 0;
    cursor: pointer;
    user-select: none;
}

.sigo-header-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--sigo-navy);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════
   MENU DO USUÁRIO (MudMenu, ChildContent em MainLayout.razor)
   Modelo visual pedido pelo usuário (2026-09, protótipo "Corporate Grouped"):
   banner escuro com identidade, seção com rótulo maiúsculo + itens, rodapé com "Sair".
   Modo escuro e versão saíram daqui em 2026-10 para o rodapé fixo da sidebar (.sigo-sidebar-footer).
   min-width do banner é o que dá largura ao popover inteiro (MudMenu não tem width
   fixo próprio, cresce para caber o conteúdo).
   ══════════════════════════════════════════════════════════════════ */

/* PopoverClass do MudMenu (ver MainLayout.razor) — escopado só a este menu (não o
   .mud-popover genérico, usado também por MudSelect/MudAutocomplete/MudDatePicker em todo o
   projeto) para arredondar os cantos igual ao restante do SIGO (--sigo-radius-card, mesmo
   token de .mud-card/.mud-tabs.ws-tabs-pill) sem afetar nenhum outro popover do app.
   overflow:hidden clipa o banner/rodapé (fundo de canto a canto, sem raio próprio) ao raio do
   container — mesmo truque já usado em .mud-tabs.ws-tabs-pill. */
.sigo-usermenu-popover {
    border-radius: var(--sigo-radius-card);
    overflow: hidden;
    /* Ajuste fino pedido: um pouco mais abaixo da borda do header e um pouco mais para a
       esquerda do que o encosto exato no canto do avatar (AnchorOrigin/TransformOrigin já
       cuidam do alinhamento base — isto é só o pequeno respiro extra). */
    transform: translate(-8px, 6px);
}

.sigo-usermenu-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    min-width: 260px;
    background: linear-gradient(135deg, var(--sigo-navy) 0%, var(--sigo-navy-mid) 100%);
}
.sigo-usermenu-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: 2px solid var(--sigo-cyan);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    flex-shrink: 0;
}
.sigo-usermenu-bannertext {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
    line-height: 1.3;
}
.sigo-usermenu-name {
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sigo-usermenu-email {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sigo-usermenu-badge {
    align-self: flex-start;
    margin-top: 2px;
    padding: 1px 6px;
    background: rgba(47, 211, 255, 0.15);
    border: 1px solid rgba(47, 211, 255, 0.35);
    color: var(--sigo-cyan);
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
}

.sigo-usermenu-section {
    padding: 8px;
}
.sigo-usermenu-sectionlabel {
    padding: 6px 12px 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--sigo-muted-light);
}
.sigo-usermenu-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 8px;
}
.sigo-usermenu-row:hover {
    background: var(--sigo-hover-bg);
}
.sigo-usermenu-row--clickable {
    cursor: pointer;
}
.sigo-usermenu-rowleft {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: var(--sigo-text-body);
}
/* "Sair" — <form> de POST tradicional (precisa de full page reload para gravar/limpar o
   cookie de auth, não dá pra fazer via clique de componente Blazor interativo, ver
   AuthController.cs) estilizado como item de menu, no rodapé do menu do avatar (MainLayout.razor). */
.sigo-usermenu-footer {
    display: flex;
    justify-content: flex-end;
    padding: 8px;
    background: var(--sigo-bg);
    border-top: 1px solid var(--sigo-border);
}
.sigo-usermenu-footer form {
    margin: 0;
}

.sigo-menu-logout {
    display: flex;
    align-items: center;
    gap: 6px;
    border: none;
    background: transparent;
    color: #d3352e;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
}
.sigo-menu-logout:hover {
    background: rgba(211, 53, 46, 0.08);
}

/* ══════════════════════════════════════════════════════════════════
   BREADCRUMB DA JANELA — dentro da aba/janela aberta, acima do card
   principal (MainLayout.razor: primeiro filho do MudContainer que
   envolve @Body, antes vivia em .sigo-header-left no header fixo).
   ══════════════════════════════════════════════════════════════════ */
.sigo-page-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    margin-bottom: 8px;
}

.sigo-breadcrumb-section {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.07em;
    color: var(--sigo-muted);
    white-space: nowrap;
}

.sigo-breadcrumb-sep {
    font-size: 14px !important;
    width: 14px !important;
    min-width: 14px !important;
    height: 14px !important;
    color: var(--sigo-muted) !important;
    flex-shrink: 0;
}

.sigo-breadcrumb-page {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    color: var(--sigo-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ══════════════════════════════════════════════════════════════════
   NAV EXPANDIDO — itens de menu (MudNavMenu / MudNavLink)
   ══════════════════════════════════════════════════════════════════ */

/* Links diretos e sub-itens de primeiro nível */
.mud-nav-link {
    color: var(--sigo-text-body) !important;
    display: flex !important;
    align-items: center !important;
    min-height: 44px !important;
    margin: 2px 8px !important;
    padding: 0 12px 0 14px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease !important;
}

.mud-nav-link:hover {
    background: var(--sigo-hover-bg) !important;
    color: var(--sigo-accent-ink) !important;
}

/* Ativo: fundo translúcido + borda direita 4px na cor secundária */
.mud-nav-link.active {
    background: var(--sigo-selected-bg) !important;
    color: var(--sigo-accent-ink) !important;
    font-weight: 600 !important;
    box-shadow: inset -4px 0 0 var(--sigo-cyan) !important;
}

/* Ícones na sidebar — dimensão fixa 20px */
.sigo-sidebar .mud-icon-root {
    color: var(--sigo-muted) !important;
    font-size: 20px !important;
    width: 20px !important;
    min-width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
    transition: color 0.18s ease !important;
}

.sigo-sidebar .mud-nav-link:hover .mud-icon-root {
    color: var(--sigo-accent-ink) !important;
}

.sigo-sidebar .mud-nav-link.active .mud-icon-root {
    color: var(--sigo-accent-ink) !important;
}

/* Span wrapper do ícone no MudNavLink */
.sigo-sidebar .mud-nav-link-icon,
.sigo-sidebar .mud-nav-group-toggle-btn .mud-nav-link-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20px !important;
    min-width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
    margin-right: 10px !important;
}

/* ── Botão de grupo (toggle) ──────────────────────────────────────── */
.mud-nav-group .mud-nav-group-toggle-btn {
    color: var(--sigo-text-body) !important;
    display: flex !important;
    align-items: center !important;
    min-height: 44px !important;
    margin: 2px 8px !important;
    padding: 0 12px 0 14px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    background: transparent !important;
    cursor: pointer !important;
    width: calc(100% - 16px) !important;
    transition: background 0.18s ease, color 0.18s ease !important;
}

.mud-nav-group .mud-nav-group-toggle-btn:hover {
    background: var(--sigo-hover-bg) !important;
    color: var(--sigo-accent-ink) !important;
}

.mud-nav-group .mud-nav-group-toggle-btn:hover .mud-icon-root {
    color: var(--sigo-accent-ink) !important;
}

/* Ícone do grupo quando filho está ativo */
.mud-nav-group .mud-nav-group-toggle-btn .mud-primary-text {
    color: var(--sigo-cyan) !important;
}

/* Seta de collapse */
.mud-nav-group .mud-nav-group-expand-icon {
    color: var(--sigo-muted) !important;
    font-size: 16px !important;
    opacity: 0.6 !important;
    flex-shrink: 0;
}

/* ── Sub-itens dos grupos ─────────────────────────────────────────── */
.mud-nav-group .mud-collapse-container .mud-nav-link {
    color: var(--sigo-text-body) !important;
    min-height: 40px !important;
    padding: 0 12px 0 44px !important;
    font-size: 13px !important;
    font-weight: 400 !important;
}

.mud-nav-group .mud-collapse-container .mud-nav-link:hover {
    background: var(--sigo-hover-bg) !important;
    color: var(--sigo-accent-ink) !important;
}

.mud-nav-group .mud-collapse-container .mud-nav-link.active {
    background: var(--sigo-selected-bg) !important;
    color: var(--sigo-accent-ink) !important;
    font-weight: 600 !important;
    box-shadow: inset -4px 0 0 var(--sigo-cyan) !important;
}

/* ══════════════════════════════════════════════════════════════════
   NAV MINIMIZADO — ws-mini-nav
   ══════════════════════════════════════════════════════════════════ */

/* overflow-y:auto + overflow-x:visible é inválido no CSS — o browser converte
   visible para auto, gerando scrollbar horizontal indesejada.
   MudTooltip renderiza em portal fora do DOM, portanto overflow:hidden não
   corta os tooltips; apenas os pseudo-elementos CSS seriam afetados (não usados). */
.ws-mini-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 0;
    gap: 2px;
    flex: 1;
    overflow: hidden;
    overflow-y: auto;
}

.ws-mini-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    color: var(--sigo-muted);
    text-decoration: none;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
    flex-shrink: 0;
}

.ws-mini-item:hover {
    background: var(--sigo-hover-bg);
    color: var(--sigo-accent-ink);
}

/* Ativo: translúcido + borda direita 4px ciano */
.ws-mini-item-active {
    background: var(--sigo-selected-bg) !important;
    color: var(--sigo-accent-ink) !important;
    box-shadow: inset -4px 0 0 var(--sigo-cyan);
    border-radius: 10px 0 0 10px;
}

.sigo-sidebar .ws-mini-item-active .mud-icon-root {
    color: var(--sigo-accent-ink) !important;
}

.sigo-sidebar .ws-mini-item:hover .mud-icon-root {
    color: var(--sigo-accent-ink) !important;
}

.ws-mini-item .mud-icon-root {
    font-size: 20px !important;
}

/* Tooltip CSS puro — aparece à direita do ícone */
.ws-mini-item::after {
    content: attr(data-tip);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--sigo-navy);
    color: #ffffff;
    font-size: 12px;
    font-weight: 500;
    padding: 5px 10px;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 9999;
    box-shadow: 0 2px 8px rgba(21, 35, 65, 0.25);
}

.ws-mini-item::before {
    content: '';
    position: absolute;
    left: calc(100% + 4px);
    top: 50%;
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-right-color: var(--sigo-navy);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 9999;
}

.ws-mini-item:hover::after,
.ws-mini-item:hover::before {
    opacity: 1;
}

.ws-mini-divider {
    width: 28px;
    height: 1px;
    background: var(--sigo-border);
    margin: 6px 0;
    flex-shrink: 0;
}

/* Fade do conteúdo ao trocar de estado */
@keyframes ws-sidebar-fadein {
    from { opacity: 0; transform: translateX(-3px); }
    to   { opacity: 1; transform: translateX(0); }
}

.sigo-sidebar .mud-navmenu {
    animation: ws-sidebar-fadein 0.22s ease both;
}

.ws-mini-nav {
    animation: ws-sidebar-fadein 0.22s ease both;
}

/* ══════════════════════════════════════════════════════════════════
   CONTEÚDO PRINCIPAL
   ══════════════════════════════════════════════════════════════════ */

.mud-main-content,
.sigo-main {
    background: var(--sigo-bg) !important;
}

/* ══════════════════════════════════════════════════════════════════
   CARDS MudBlazor
   ══════════════════════════════════════════════════════════════════ */

.mud-card {
    background: var(--sigo-surface) !important;
    border: 1px solid var(--sigo-border) !important;
    box-shadow: var(--sigo-shadow) !important;
    border-radius: var(--sigo-radius-card) !important;
    transition: box-shadow 0.18s ease !important;
}

.mud-card:hover {
    box-shadow: var(--sigo-shadow-lg) !important;
}

/* ══════════════════════════════════════════════════════════════════
   SEÇÃO DE ÍCONE NOS CARDS
   ══════════════════════════════════════════════════════════════════ */

.ws-section-icon {
    background: rgba(21, 35, 65, 0.07) !important;
}

.ws-section-icon .mud-icon-root {
    color: var(--sigo-accent-ink) !important;
}

.ws-section-title {
    color: var(--sigo-accent-ink) !important;
}

/* ══════════════════════════════════════════════════════════════════
   BOTÕES
   ══════════════════════════════════════════════════════════════════ */

/* Botão principal: --sigo-cta-* (navy no claro, azul #3d6bc7 no escuro — antes o navy
   ficava 1,08:1 sobre a superfície escura e o botão "sumia"). */
.mud-button-root.mud-button-filled.mud-button-filled-primary {
    background: var(--sigo-cta-bg) !important;
    color: var(--sigo-cta-fg) !important;
    border-radius: var(--sigo-radius) !important;
    box-shadow: none !important;
    transition: opacity 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease !important;
}

.mud-button-root.mud-button-filled.mud-button-filled-primary:hover {
    background: var(--sigo-cta-bg) !important;
    opacity: 0.88 !important;
    transform: translateY(-1px) !important;
    box-shadow: var(--sigo-shadow) !important;
}

.mud-button-root.mud-button-outlined {
    border: 1.5px solid var(--sigo-cyan) !important;
    color: var(--sigo-accent-ink) !important;
    border-radius: var(--sigo-radius) !important;
}

.mud-button-root.mud-button-outlined:hover {
    background: var(--sigo-hover-bg) !important;
    border-color: var(--sigo-cyan) !important;
}

/* ══════════════════════════════════════════════════════════════════
   CAMPOS OBRIGATÓRIOS — asterisco vermelho no label
   ══════════════════════════════════════════════════════════════════ */

.ws-required-label::after {
    content: " *";
    color: var(--mud-palette-error);
}

/* ══════════════════════════════════════════════════════════════════
   INPUTS E SELECTS
   ══════════════════════════════════════════════════════════════════ */

.mud-input-outlined .mud-input-outlined-border {
    border-color: #d1d5db !important;
    border-radius: 6px !important;
}

.mud-input-outlined:hover .mud-input-outlined-border {
    border-color: #9ca3af !important;
}

.mud-input-outlined.mud-input-focused .mud-input-outlined-border {
    border-color: var(--sigo-cyan) !important;
    border-width: 1.5px !important;
    box-shadow: 0 0 0 3px rgba(47, 211, 255, 0.15) !important;
}

.mud-input-label {
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
    color: #6b7280 !important;
}

/* ══════════════════════════════════════════════════════════════════
   TABELAS
   ══════════════════════════════════════════════════════════════════ */

.mud-table-container {
    border: 1px solid #e5e7eb !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}

.mud-table-head .mud-table-cell {
    background: #f9fafb !important;
    color: #374151 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
    padding: 10px 16px !important;
    border-bottom: 1px solid #e5e7eb !important;
}

.mud-table-body .mud-table-cell {
    color: #374151 !important;
    font-size: 13px !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid #f3f4f6 !important;
}

.mud-table-body .mud-table-row:nth-child(even) .mud-table-cell {
    background: #fafafa !important;
}

.mud-table-body .mud-table-row:hover {
    background: #f0f9ff !important;
}

/* ══════════════════════════════════════════════════════════════════
   ACTION BAR (formulários)
   ══════════════════════════════════════════════════════════════════ */

.ws-action-bar {
    background: var(--sigo-surface) !important;
    border-top: 1px solid var(--sigo-border) !important;
}

/* ══════════════════════════════════════════════════════════════════
   GRÁFICOS — paleta alinhada
   ══════════════════════════════════════════════════════════════════ */

.mud-card .mud-card-header .mud-typography-h6 {
    color: var(--sigo-text) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
}

/* ══════════════════════════════════════════════════════════════════
   CONTEÚDO DA PÁGINA — padding responsivo
   ══════════════════════════════════════════════════════════════════ */

.mud-container {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
}

@media (max-width: 1280px) {
    .mud-container {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
}

@media (max-width: 768px) {
    .mud-container {
        padding: 16px !important;
    }
}

/* ══════════════════════════════════════════════════════════════════
   BARRA DE ABAS (ws-tab-bar) — lista de janelas abertas
   Vive DENTRO do header fixo (.sigo-header, ver acima), à esquerda dos
   ícones/usuário. Design "aba integrada à página" (ajuste 2026-09-18,
   a pedido — aba ATIVA fundida ao conteúdo abaixo, sem nenhuma linha
   separando as duas, tipo aba de pasta/navegador): aba ATIVA usa
   `--sigo-bg`, a MESMA cor de fundo de .sigo-main (o conteúdo da página
   logo abaixo do header) — não `--sigo-surface` (cor do header), que é
   o oposto do que "fundir com o conteúdo" pede; sem borda inferior
   colorida (o antigo indicador de 3px na Primary quebrava a fusão visual
   mesmo com a cor batendo). Cantos superiores arredondados, coladas (gap
   mínimo), alinhadas ao rodapé do header. Abas INATIVAS usam fundo
   `--sigo-surface` (mesma cor do header), ficando em segundo plano —
   só a aba ativa "sai" do header em direção à página. A borda inferior
   do próprio header (.sigo-header, ver acima) é removida enquanto há
   abas abertas (ver `.sigo-header:has(.ws-tab-bar)` logo abaixo) — sem
   isso, essa borda cruzaria por baixo da aba ativa e quebraria a fusão
   mesmo com as cores combinando. */
.sigo-header:has(.ws-tab-bar) {
    border-bottom: none;
}

.ws-tab-bar {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-end !important;
    /* flex-grow:0 — antes era "1 1 auto" e esticava .ws-tab-bar (e, por tabela, .ws-tab-bar-scroll
       logo abaixo) até a borda de .sigo-header-right mesmo com poucas abas, empurrando o botão
       "Fechar todas" para um lugar fixo no header em vez de ficar colado na última aba. Com
       flex-grow:0 a barra só ocupa a largura que as abas + botão realmente precisam; flex-shrink:1
       mantém o comportamento de encolher (via overflow-x da .ws-tab-bar-scroll) quando não couber. */
    flex: 0 1 auto;
    min-width: 0;
    height: 100%;
    gap: 0;
    overflow: hidden;
}

.ws-tab-bar-scroll {
    display: flex !important;
    /* Mesmo motivo do flex-grow:0 acima — só o suficiente para as abas, não para preencher o
       .ws-tab-bar inteiro (senão o botão "Fechar todas", que vem logo depois no fluxo, ficaria
       empurrado para o fim de um espaço maior que as abas). */
    flex: 0 1 auto;
    min-width: 0;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-end !important;
    gap: 2px;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.ws-tab-bar-scroll::-webkit-scrollbar {
    display: none;
}

/* Layout revisto em 2026-08-30: o "|" (divisor vertical solto) entre as abas e o botão não
   encaixava bem — trocado por uma "mini aba" (.ws-tab-close-all-mini) com a mesma forma das abas
   de verdade (cantos superiores arredondados, fundo, borda inferior reservada), só que sem texto,
   abrigando o botão de fechar tudo. Altura igual à das abas reais por construção: mesmo padding
   vertical de .ws-tab (8px/7px, ver abaixo) definindo a caixa, não um height fixo/percentual
   arbitrário — encostada na mesma base das abas, não esticada (align-items:flex-end no wrap). */
.ws-tab-close-all-wrap {
    display: flex;
    /* flex-end (não o "stretch" padrão) — sem isso a mini aba abaixo esticava pra altura inteira
       deste wrap (100%, = header inteiro), já que ela não define a própria altura via height. */
    align-items: flex-end;
    flex-shrink: 0;
    height: 100%;
}

.ws-tab-close-all-mini {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Antes igual ao padding-top/bottom de .ws-tab (8px/7px), dando a mesma altura das abas
       reais — reduzido 20% a pedido (6.4px/5.6px), então a mini aba de "fechar todas" agora
       fica um pouco mais baixa que as abas de verdade, de propósito. */
    padding: 6.4px 8px 5.6px;
    margin-left: 4px;
    border-bottom: 3px solid transparent;
    border-radius: 8px 8px 0 0;
    background: var(--sigo-surface);
    transition: background 0.15s ease;
}

.ws-tab-close-all-mini:hover {
    background: color-mix(in srgb, var(--mud-palette-error) 8%, var(--sigo-surface));
}

/* Antes 17px (altura do CONTEÚDO de uma linha de texto de .ws-tab) — reduzido 20% (13.6px)
   a pedido, então não bate mais com a altura das abas reais, de propósito. */
.ws-tab-close-all-btn.mud-icon-button {
    padding: 0 !important;
    width: 13.6px !important;
    height: 13.6px !important;
}

.ws-tab-close-all-btn .mud-icon-root {
    font-size: 13.6px !important;
}

/* Hover continua sinalizando ação destrutiva (vermelho). background:transparent anula o fundo
   arredondado que .sigo-header-icon-btn:hover aplicaria — aqui quem dá o feedback visual de hover
   é a mini aba em volta (.ws-tab-close-all-mini:hover, acima), não o botão duplicando por cima. */
.ws-tab-close-all-btn.mud-icon-button:hover {
    background: transparent !important;
    color: var(--mud-palette-error) !important;
}

.ws-tab {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-shrink: 0 !important;
    align-items: center;
    gap: 6px;
    padding: 8px 14px 7px;
    border: none;
    border-bottom: 3px solid transparent;
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--sigo-muted);
    background: var(--sigo-surface);
    box-shadow: none;
    user-select: none;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 150ms ease;
    max-width: 180px;
    min-width: 72px;
}

.ws-tab:hover {
    background: color-mix(in srgb, var(--sigo-navy) 6%, var(--sigo-surface));
    color: var(--sigo-accent-ink);
}

/* Fundida ao conteúdo abaixo — mesma cor de fundo de .sigo-main, sem
   linha/borda separando as duas (ver comentário no topo da seção). */
.ws-tab-active {
    background: var(--sigo-bg) !important;
    color: var(--sigo-accent-ink) !important;
    border-bottom-color: transparent !important;
    font-weight: 700;
}

.ws-tab-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.ws-tab-close {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: none;
    color: inherit;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease, background 0.15s ease;
}

.ws-tab:hover .ws-tab-close,
.ws-tab-active .ws-tab-close {
    opacity: 0.5;
}

.ws-tab-close:hover {
    opacity: 1 !important;
    background: rgba(0, 0, 0, 0.08);
}

/* Drag-and-drop */
.ws-tab[draggable="true"] { cursor: grab; user-select: none; }

.ws-tab--dragging {
    opacity: .45;
    box-shadow: 0 0 0 2px var(--sigo-cyan);
    cursor: grabbing;
}

.ws-tab--dragover {
    border-left: 3px solid var(--sigo-cyan);
    background: rgba(47, 211, 255, 0.08);
}

@media (max-width: 768px) {
    .ws-tab {
        max-width: 120px;
        min-width: 60px;
        font-size: 11px;
        padding: 7px 10px 6px;
    }
}

/* ══════════════════════════════════════════════════════════════════
   ACCORDION DE PERMISSÕES (PerfisForm)
   ══════════════════════════════════════════════════════════════════ */

.perm-panel-header {
    background-color: #eef0f4 !important;
}

.perm-panel-header:hover {
    background-color: #e3e5e9 !important;
}

/* ══════════════════════════════════════════════════════════════════
   ABAS INTEGRADAS — MudTabs com Class="ws-tabs-pill"
   Usada dentro de <WsFormAbas> em todos os formulários de entidade do
   projeto (abas internas "abaixo da rota da página" — não confundir com
   .ws-tab-bar, a lista de janelas abertas no header). Barra de abas e
   painel de conteúdo formam um único card (mesma borda, fundo e raio) —
   a barra fica encostada no topo do card, separada do conteúdo por um
   divisor (border-bottom). Aba ativa = sublinhado de 2px na cor Primary
   (--sigo-navy, ver WebsideTheme.cs) + fundo destacado (tingido na mesma
   cor, cantos superiores arredondados — ajuste 2026-09-18, a pedido: só
   o sublinhado não ficava óbvio o suficiente qual aba está selecionada);
   abas inativas ficam só com texto neutro, sem fundo/borda/sombra
   próprios — o padding de cada aba cresceu (era quase só o sublinhado,
   sem respiro pro fundo) e o espaçamento entre abas (gap) encolheu na
   mesma proporção, já que agora o próprio fundo da aba ativa é quem
   separa visualmente uma da outra. Cores derivadas dos tokens --sigo-*
   — nenhuma cor fixa fora deles.
   ══════════════════════════════════════════════════════════════════ */

/* Bloco WsFormAbas (MudContainer que envolve o MudTabs): fluido, ocupa
   100% da largura disponível dentro de MainLayout.razor (que já é fluido —
   .sigo-main > MudContainer MaxWidth.False), acompanhando os Breakpoints
   automaticamente por não ter max-width fixo. */
.ws-form-abas {
    width: 100%;
    max-width: 100%;
}

/* Card único: borda + raio + fundo branco envolvendo barra de abas e
   painel de conteúdo juntos. overflow:hidden clipa os dois filhos
   (.mud-tabs-tabbar e .ws-tab-panel-content, ver abaixo) ao raio
   arredondado do card. */
.mud-tabs.ws-tabs-pill {
    background: var(--sigo-surface);
    border: 1px solid var(--sigo-border);
    border-radius: var(--sigo-radius-card);
    overflow: hidden;
}

.ws-tabs-pill .mud-tabs-tabbar {
    display: flex;
    align-items: center;
    width: 100%;
    /* Sem fundo/borda/raio próprios — a barra fica encostada no topo do
       card único (ver .mud-tabs.ws-tabs-pill acima), separada do conteúdo
       por este divisor inferior. */
    background: transparent !important;
    border: none;
    border-bottom: 1px solid var(--sigo-border);
    border-radius: 0;
    padding: 8px 12px;
    margin-bottom: 0;
    box-shadow: none !important;
    /* Rolagem horizontal nativa — mais previsível que o sistema de
       scroll-buttons do MudBlazor (que depende de medição via JS e não
       reagia corretamente ao container "fit-content" deste componente). */
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.ws-tabs-pill .mud-tabs-tabbar-wrapper,
.ws-tabs-pill .mud-tabs-tabbar-inner,
.ws-tabs-pill .mud-tabs-tabbar-content {
    background: transparent !important;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
}

.ws-tabs-pill .mud-tabs-tabbar-wrapper {
    /* Neutraliza o posicionamento via transform controlado por JS do
       MudBlazor — a rolagem passa a ser feita pelo navegador (overflow-x). */
    transform: none !important;
}

/* Aba com sublinhado + destaque de fundo na ativa — texto + borda inferior
   de 2px na cor Primary do tema (--sigo-navy) e fundo tingido na mesma cor
   só na aba ativa; inativas ficam em texto neutro, sem fundo/borda/sombra
   própria (só um fundo bem sutil no hover, pra dar feedback sem confundir
   com a aba selecionada). */
.ws-tabs-pill .mud-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px 8px 0 0;
    padding: 8px 14px;
    min-height: 38px;
    line-height: 1;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--sigo-muted);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    box-shadow: none;
    opacity: 1 !important;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.ws-tabs-pill .mud-tab:hover {
    background: color-mix(in srgb, var(--sigo-navy) 5%, transparent);
    color: var(--sigo-accent-ink);
    border-bottom-color: color-mix(in srgb, var(--sigo-navy) 30%, transparent);
}

/* Foco por teclado: anel de foco do token --sigo-focus-ring, já usado
   como padrão de acessibilidade do design system mas até então órfão. */
.ws-tabs-pill .mud-tab:focus-visible {
    outline: none;
    box-shadow: var(--sigo-focus-ring);
    z-index: 1;
}

.ws-tabs-pill .mud-tab-active,
.ws-tabs-pill .mud-tab-active:hover {
    background: color-mix(in srgb, var(--sigo-navy) 10%, transparent);
    color: var(--sigo-accent-ink);
    border: none;
    border-bottom: 2px solid var(--sigo-navy);
    box-shadow: none;
    font-weight: 700;
}

.ws-tabs-pill .mud-tab-active:focus-visible {
    box-shadow: var(--sigo-focus-ring);
}

.ws-tabs-pill .mud-tab-slider {
    display: none;
}

.ws-tabs-pill .mud-tabs-scroll-button {
    /* Rolagem tratada nativamente via overflow-x na barra (ver acima);
       os botões de rolagem do MudBlazor ficam ocultos para não duplicar
       a interação nem sofrer com o "flicker" da medição via JS. */
    display: none !important;
}

/* Fundo branco de todo o conteúdo de cada aba. `PanelClass="px-6 pb-6 pt-3
   ws-tab-panel-content"` (MudTabs, ver WsFormAbas.razor — pt-3 igual ao
   pt-3 do MudContainer em MainLayout.razor, para o espaço acima do
   conteúdo ficar igual em telas com e sem abas) é injetado pelo
   MudBlazor na MESMA div que já carrega `.mud-tabs-panels` — não existe
   um wrapper próprio por MudTabPanel: com KeepPanelsAlive=false (padrão),
   o ChildContent do painel ativo é renderizado direto dentro de
   `.mud-tabs-panels`, sem nó intermediário (ver MudTabPanel.razor no
   código-fonte do MudBlazor). Por isso uma única regra aqui já cobre toda
   a área interna do MudTabPanel ativo — a barra de abas (.mud-tabs-tabbar,
   elemento IRMÃO desta div, ver acima) e seus rótulos/ícones/botões nunca
   são alcançados por este seletor. Seleciona pela classe própria
   (`.ws-tab-panel-content`) em vez de `.mud-tabs-panels` para não depender
   do nome de classe interno do MudBlazor. Sem borda/raio/sombra próprios —
   o card único (.mud-tabs.ws-tabs-pill, ver acima) já os fornece; aqui só
   o fundo, para o caso (hoje inexistente) de KeepPanelsAlive=true deixar
   mais de um painel na árvore simultaneamente. */
.ws-tabs-pill .ws-tab-panel-content {
    width: 100%;
    background: var(--sigo-surface);
}

.ws-tabs-pill .ws-section-icon {
    border-radius: 999px;
}

/* ── Popovers dentro da viewport (MudSelect, MudAutocomplete, MudMenu,
   MudDatePicker etc. — todos renderizam via .mud-popover) ──────────────
   O MudBlazor posiciona o popover via JS a partir de AnchorOrigin/
   TransformOrigin do campo, mas não limita sua largura/altura ao espaço
   realmente visível da viewport — em campos próximos da borda (mobile) ou
   de listas longas, o popover pode ultrapassar a área visível. Aqui
   apenas limitamos o tamanho máximo e habilitamos rolagem interna;
   ".mud-list" já herda "max-height" do MudBlazor (ver MudBlazor.min.css:
   ".mud-list{max-height:inherit;overflow-y:auto}"), então basta definir
   o teto aqui para a lista de opções rolar em vez de extrapolar a tela. */
.mud-popover {
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
}

.mud-popover .mud-list {
    overflow-y: auto;
}

/* ── Modal de reconexão do circuito Blazor Server ────────────────────────
   Substitui a modal padrão do blazor.server.js ("Attempting to reconnect to
   the server: X of Y") — o elemento #components-reconnect-modal existe em
   Pages/_Layout.cshtml e o próprio blazor.server.js alterna as classes
   components-reconnect-show/failed/rejected nele conforme o estado da
   reconexão (ver wwwroot/js/blazor-reconnect.js), além de escrever o número
   da tentativa atual/máxima em #components-reconnect-current-attempt e
   #components-reconnect-max-retries (mecanismo nativo do framework, sem JS
   próprio). Sem nenhuma dessas classes = escondido. Paleta, gradiente do
   ícone e fonte reaproveitam os tokens de marca do SIGO (sigo-tokens.css)
   em vez de cores genéricas. */
/* O MudBlazor.min.css (carregado antes desta folha) já vem com CSS próprio mirando
   #components-reconnect-modal — reconhece essa convenção de ID do próprio ASP.NET Core e aplica
   z-index/background com !important, além de um estilo de botão com margin:40px auto !important,
   uppercase, cor de texto do tema, etc. (ver #components-reconnect-modal button no pacote). Os
   !important abaixo, e os seletores dos botões escopados por #components-reconnect-modal mais
   adiante, existem só pra garantir que o visual desta modal não fique refém dessa disputa de
   especificidade/!important com o MudBlazor. */
#components-reconnect-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000 !important;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: transparent !important;
    font-family: var(--sigo-font-family, 'Hanken Grotesk', system-ui, sans-serif);
}

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: flex;
}

.sigo-reconnect-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(21, 35, 65, .45);
    backdrop-filter: blur(3px);
}

.sigo-reconnect-box {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 440px;
    background: var(--sigo-surface, #fff);
    border-radius: 16px;
    padding: 36px 32px 26px;
    text-align: center;
    box-shadow: var(--sigo-shadow-lg, 0 4px 12px rgba(130, 143, 163, .22)), 0 24px 48px rgba(21, 35, 65, .18);
    overflow: hidden;
}

.sigo-reconnect-box > * {
    position: relative;
    z-index: 1;
}

/* Manchas de luz ambiente, só decorativas, atrás do conteúdo */
.sigo-reconnect-glow {
    position: absolute;
    z-index: 0;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    filter: blur(46px);
    pointer-events: none;
}

.sigo-reconnect-glow-a { top: -60px; right: -60px; background: rgba(47, 211, 255, .25); }
.sigo-reconnect-glow-b { bottom: -60px; left: -60px; background: rgba(255, 116, 64, .18); }

/* ── Estado "reconectando" — radar com ondas concêntricas ────────────────── */
.sigo-reconnect-radar {
    position: relative;
    width: 104px;
    height: 104px;
    margin: 0 auto 22px;
}

.sigo-reconnect-radar-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--sigo-cyan, #2fd3ff);
    opacity: 0;
    animation: sigo-reconnect-ping 2.2s cubic-bezier(0, 0, .2, 1) infinite;
}

.sigo-reconnect-radar-ring-1 { opacity: .18; }
.sigo-reconnect-radar-ring-2 { inset: 14px; animation-duration: 2.8s; animation-delay: .3s; opacity: .28; }
.sigo-reconnect-radar-ring-3 { inset: 30px; animation-duration: 1.6s; animation-delay: .1s; opacity: .35; }

@keyframes sigo-reconnect-ping {
    75%, 100% { transform: scale(1.5); opacity: 0; }
}

.sigo-reconnect-radar-core {
    position: absolute;
    inset: 34px;
    border-radius: 50%;
    background: var(--sigo-icon-grad, linear-gradient(135deg, #152341 0%, #2a5298 100%));
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(21, 35, 65, .35);
}

.sigo-reconnect-radar-icon {
    color: #fff;
    font-size: 28px;
    animation: sigo-reconnect-spin 5s linear infinite;
}

@keyframes sigo-reconnect-spin {
    to { transform: rotate(360deg); }
}

/* ── Ícones dos estados "falhou"/"expirou" (Material Symbols) ────────────── */
.sigo-reconnect-radar,
.sigo-reconnect-ic {
    display: none;
}

.sigo-reconnect-ic {
    font-size: 44px;
    margin-bottom: 18px;
}

.sigo-reconnect-ic-failed   { color: var(--sigo-orange, #ff7440); }
.sigo-reconnect-ic-rejected { color: #BA1A1A; }

/* ── Textos ───────────────────────────────────────────────────────────── */
.sigo-reconnect-title,
.sigo-reconnect-sub {
    display: none;
}

.sigo-reconnect-title {
    font-weight: 700;
    font-size: 1.15rem;
    margin: 0 0 8px;
    color: var(--sigo-text, #152341);
}

.sigo-reconnect-sub {
    font-size: .875rem;
    line-height: 1.5;
    margin: 0 0 20px;
    color: var(--sigo-text-body, #3d4a68);
}

.sigo-reconnect-attempt {
    font-weight: 700;
    color: var(--sigo-navy, #152341);
}

/* ── Barra de progresso indeterminada (só no estado "reconectando" — não há
   percentual real de progresso, então é só um indicador de atividade) ───── */
.sigo-reconnect-progress {
    display: none;
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: var(--sigo-border, #dde5f3);
    overflow: hidden;
    margin: 0 0 22px;
}

.sigo-reconnect-progress-fill {
    height: 100%;
    width: 40%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--sigo-navy, #152341), var(--sigo-cyan, #2fd3ff));
    animation: sigo-reconnect-progress-slide 1.6s ease-in-out infinite;
}

@keyframes sigo-reconnect-progress-slide {
    0%   { transform: translateX(-120%); }
    100% { transform: translateX(280%); }
}

/* ── Botões ───────────────────────────────────────────────────────────────
   Seletores escopados por "#components-reconnect-modal" (em vez de só ".sigo-reconnect-btn")
   de propósito — é o que dá especificidade suficiente pra vencer o
   "#components-reconnect-modal button" do MudBlazor sem precisar de !important em quase nada
   (a exceção é "margin", que o MudBlazor define com !important). */
#components-reconnect-modal .sigo-reconnect-btn {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 24px;
    border-radius: 999px;
    border: none;
    font-family: inherit;
    font-size: .9rem;
    font-weight: 600;
    line-height: normal;
    letter-spacing: normal;
    text-transform: none;
    cursor: pointer;
    margin: 0 0 10px !important;
    transition: opacity .15s ease, transform .1s ease;
}

#components-reconnect-modal .sigo-reconnect-btn .material-symbols-outlined {
    font-size: 18px;
    color: inherit;
}

#components-reconnect-modal .sigo-reconnect-btn:active { transform: scale(.98); }

#components-reconnect-modal .sigo-reconnect-btn-primary {
    background: var(--sigo-navy, #152341);
    color: #fff;
}

#components-reconnect-modal .sigo-reconnect-btn-secondary {
    background: var(--sigo-bg, #f4f6fb);
    color: var(--sigo-text, #152341);
}

/* Hover em regra própria por variante (não só "opacity" genérico) — o MudBlazor também define
   "#components-reconnect-modal button:hover { background-color: ... }" e, só no :hover, a
   especificidade dele empatava com a nossa base (que não tocava em background no hover),
   deixando o fundo escuro sumir e virar a cor clara do tema do MudBlazor por baixo do texto
   branco. Definir o próprio background aqui, por variante, fecha essa lacuna. */
#components-reconnect-modal .sigo-reconnect-btn-primary:hover {
    background: var(--sigo-navy-mid, #2a5298);
}

#components-reconnect-modal .sigo-reconnect-btn-secondary:hover {
    background: var(--sigo-hover-bg, #e5f9ff);
}

/* ── Rodapé ───────────────────────────────────────────────────────────── */
.sigo-reconnect-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 12px;
    padding-top: 14px;
    border-top: 1px solid var(--sigo-border, #dde5f3);
    font-size: .75rem;
    color: var(--sigo-muted-light, #94a3b8);
}

.sigo-reconnect-footer .material-symbols-outlined {
    font-size: 14px;
}

/* ── Estado: tentando reconectar automaticamente ─────────────────────────── */
#components-reconnect-modal.components-reconnect-show .sigo-reconnect-radar {
    display: block;
}

#components-reconnect-modal.components-reconnect-show .sigo-reconnect-msg-show {
    display: block;
}

#components-reconnect-modal.components-reconnect-show .sigo-reconnect-btn.sigo-reconnect-msg-show {
    display: flex;
}

/* ── Estado: acabaram as tentativas automáticas ──────────────────────────── */
#components-reconnect-modal.components-reconnect-failed .sigo-reconnect-ic-failed {
    display: block;
}

#components-reconnect-modal.components-reconnect-failed .sigo-reconnect-msg-failed {
    display: block;
}

#components-reconnect-modal.components-reconnect-failed .sigo-reconnect-btn.sigo-reconnect-msg-failed {
    display: flex;
}

/* ── Estado: servidor descartou o circuito (sessão parada há tempo demais) ── */
#components-reconnect-modal.components-reconnect-rejected .sigo-reconnect-ic-rejected {
    display: block;
}

#components-reconnect-modal.components-reconnect-rejected .sigo-reconnect-msg-rejected {
    display: block;
}

#components-reconnect-modal.components-reconnect-rejected .sigo-reconnect-btn.sigo-reconnect-msg-rejected {
    display: flex;
}

/* ══════════════════════════════════════════════════════════════════
   TEMA ESCURO — ajustes finos
   Os tokens --sigo-*/--ws-* (sigo-tokens.css) já cobrem superfície,
   borda e texto automaticamente. Os blocos abaixo tratam dois tipos de
   exceção que não acompanham a troca de tema sozinhos:
   1) cores literais (hex/rgb) escritas pensando só em fundo claro
      (cinza de tabela/input/accordion, overlay rgba baseado no navy);
   2) fundos/bordas tingidos com navy que precisam virar ciano no escuro.
   Texto/ícone de hover/ativo/selecionado NÃO precisa mais de override aqui:
   usa --sigo-accent-ink e --sigo-selected-bg (sigo-tokens.css), que já trocam
   de valor por tema (2026-10-12 — 23 overrides removidos). Regra para código
   novo: nunca use --sigo-navy como cor de TEXTO; ver docs/08-cores.md.
   ══════════════════════════════════════════════════════════════════ */

/* ── Badges ───────────────────────────────────────────────────────── */
[data-theme="dark"] .ws-badge-recorrencia {
    color: var(--sigo-cyan);
}

/* ── Precificação — bloco "Custo" (o "Venda", em verde, já é legível
   em fundo escuro; só o navy do "Custo" precisa de troca) ──────────── */
[data-theme="dark"] .ws-preco-custo {
    background: rgba(47, 211, 255, 0.08);
    border-left-color: var(--sigo-cyan);
}

/* ── Valor calculado (display somente-leitura, sem MudTextField) ──── */
[data-theme="dark"] .ws-calc-display {
    border-color: var(--sigo-border);
    background: var(--sigo-bg);
}

/* ── Cabeçalho de seção / título de card ────────────────────────── */
[data-theme="dark"] .ws-section-icon {
    background: rgba(47, 211, 255, 0.1) !important;
}

/* ── Tabela (MudTable) — hoje hardcoded para fundo claro ──────────── */
[data-theme="dark"] .mud-table-container {
    border-color: var(--sigo-border) !important;
}

[data-theme="dark"] .mud-table-head .mud-table-cell {
    background: var(--sigo-bg) !important;
    color: var(--sigo-text) !important;
    border-bottom-color: var(--sigo-border) !important;
}

[data-theme="dark"] .mud-table-body .mud-table-cell {
    color: var(--sigo-text-body) !important;
    border-bottom-color: var(--sigo-border) !important;
}

[data-theme="dark"] .mud-table-body .mud-table-row:nth-child(even) .mud-table-cell {
    background: var(--sigo-bg) !important;
}

[data-theme="dark"] .mud-table-body .mud-table-row:hover {
    background: var(--sigo-hover-bg) !important;
}

/* ── Inputs outlined ──────────────────────────────────────────────── */
[data-theme="dark"] .mud-input-outlined .mud-input-outlined-border {
    border-color: var(--sigo-border) !important;
}

[data-theme="dark"] .mud-input-outlined:hover .mud-input-outlined-border {
    border-color: var(--sigo-muted) !important;
}

[data-theme="dark"] .mud-input-label {
    color: var(--sigo-muted) !important;
}

/* ── Accordion de permissões (PerfisForm) ─────────────────────────── */
[data-theme="dark"] .perm-panel-header {
    background-color: var(--sigo-bg) !important;
}

[data-theme="dark"] .perm-panel-header:hover {
    background-color: var(--sigo-hover-bg) !important;
}

/* ── Abas — barra de janelas abertas (ws-tab-bar) ─────────────────── */
[data-theme="dark"] .ws-tab:hover {
    background: color-mix(in srgb, var(--sigo-cyan) 8%, var(--sigo-surface));
}

[data-theme="dark"] .ws-tab-active {
    border-bottom-color: transparent !important;
}

[data-theme="dark"] .ws-tab-close:hover {
    background: rgba(255, 255, 255, 0.12);
}

/* ── Abas integradas (WsFormAbas / ws-tabs-pill) ──────────────────── */
[data-theme="dark"] .ws-tabs-pill .mud-tab:hover {
    background: color-mix(in srgb, var(--sigo-cyan) 8%, transparent);
    border-bottom-color: color-mix(in srgb, var(--sigo-cyan) 40%, transparent);
}

[data-theme="dark"] .ws-tabs-pill .mud-tab-active,
[data-theme="dark"] .ws-tabs-pill .mud-tab-active:hover {
    background: color-mix(in srgb, var(--sigo-cyan) 14%, transparent);
    border-bottom-color: var(--sigo-cyan);
}

/* ── Vermelhos fixos — clareados em modo escuro para manter contraste
   AA sobre fundo escuro (Sair / ícone de reconexão rejeitada) ────────── */
[data-theme="dark"] .sigo-usermenu-footer {
    display: flex;
    justify-content: flex-end;
    padding: 8px;
    background: var(--sigo-bg);
    border-top: 1px solid var(--sigo-border);
}
.sigo-usermenu-footer form {
    margin: 0;
}

.sigo-menu-logout {
    color: #ff6b61;
}

[data-theme="dark"] .sigo-reconnect-ic-rejected {
    color: #ff6b61;
}

[data-theme="dark"] .sigo-reconnect-attempt {
    color: var(--sigo-text);
}

/* ── Histórico do Lead (aba "Histórico" do LeadEditDialog — ver LeadHistoricoTab) ──────── */
.ws-lead-timeline {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 340px;
    overflow-y: auto;
    padding-right: 4px;
}
/* Fundo alternado entre um item e outro (zebra) — só pra separar visualmente onde um registro
   termina e o próximo começa numa lista potencialmente longa, sem depender só do espaçamento. */
.ws-lead-timeline-item {
    display: flex;
    gap: 10px;
    padding: 8px;
    border-radius: 8px;
}
.ws-lead-timeline-item:nth-child(odd) {
    background: var(--sigo-bg);
}
.ws-lead-timeline-item:nth-child(even) {
    background: var(--sigo-surface);
}
.ws-lead-timeline-icon {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: var(--sigo-hover-bg);
    color: var(--sigo-navy-mid);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
[data-theme="dark"] .ws-lead-timeline-icon {
    color: var(--sigo-cyan);
}
.ws-lead-timeline-icon .mud-icon-root {
    font-size: 14px;
}
.ws-lead-timeline-icon svg {
    width: 14px;
    height: 14px;
}
.ws-lead-timeline-body {
    flex: 1;
    min-width: 0;
}
.ws-lead-timeline-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}
.ws-lead-timeline-tipo {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--sigo-text);
}
.ws-lead-timeline-data {
    font-size: 11px;
    color: var(--sigo-muted-light);
    white-space: nowrap;
}
.ws-lead-timeline-desc {
    font-size: 12.5px;
    color: var(--sigo-text-body);
    margin-top: 2px;
    white-space: pre-wrap;
}
.ws-lead-timeline-autor {
    font-size: 11px;
    color: var(--sigo-muted);
    margin-top: 3px;
}

/* ── Catálogo de tipos de ação (LeadAcaoDialog) — grade de 2 colunas com a orientação de cada
   tipo sempre visível, pra o usuário comparar antes de escolher em vez de abrir um dropdown.
   2 colunas (em vez da lista de 1 coluna anterior) reduz a altura total do catálogo pela metade,
   evitando que o usuário precise rolar pra ver os 11 tipos (ver DialogOptions.MaxWidth.Large em
   PipelineLeadsIndex.AbrirAcaoAsync, que dá espaço suficiente pras 2 colunas). Em telas estreitas
   (mobile), cai pra 1 coluna — ver media query abaixo. */
.ws-acao-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
@media (max-width: 600px) {
    .ws-acao-list {
        grid-template-columns: 1fr;
    }
}
.ws-acao-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--sigo-border);
    background: var(--sigo-bg);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.ws-acao-item:hover {
    border-color: rgba(var(--ws-acao-accent-rgb, 21, 35, 65), 0.4);
}
/* Cada item recebe sua própria cor via --ws-acao-accent-rgb (ver TipoInteracaoLeadVisual.CorRgb),
   aplicada ao ícone, ao título e ao estado selecionado — 11 tipos ficam rápidos de reconhecer
   visualmente numa lista, em vez de um catálogo monocromático. */
.ws-acao-item--selecionado {
    border-color: rgb(var(--ws-acao-accent-rgb, 21, 35, 65));
    background: rgba(var(--ws-acao-accent-rgb, 21, 35, 65), 0.08);
}
.ws-acao-item-icon {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: rgba(var(--ws-acao-accent-rgb, 21, 35, 65), 0.12);
    color: rgb(var(--ws-acao-accent-rgb, 21, 35, 65));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ws-acao-item-icon .mud-icon-root {
    font-size: 14px;
}
.ws-acao-item-icon svg {
    width: 14px;
    height: 14px;
}
.ws-acao-item-body {
    flex: 1;
    min-width: 0;
}
.ws-acao-item-titulo {
    font-size: 12.5px;
    font-weight: 700;
    color: rgb(var(--ws-acao-accent-rgb, 21, 35, 65));
}
[data-theme="dark"] .ws-acao-item-titulo {
    /* Cores "600" do Tailwind ficam escuras demais sobre fundo escuro — clareia um pouco pra manter contraste AA. */
    filter: brightness(1.35);
}
.ws-acao-item-info {
    font-size: 11.5px;
    color: var(--sigo-muted);
    margin-top: 1px;
}
.ws-acao-item-check {
    color: rgb(var(--ws-acao-accent-rgb, 21, 35, 65));
    flex-shrink: 0;
    display: flex;
}
.ws-acao-item-check .mud-icon-root {
    font-size: 18px;
}

/* ── Importação de Leads via CSV (LeadImportCsvDialog) — exemplo de cabeçalho esperado ──── */
.ws-csv-exemplo {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    padding: 8px 10px;
    border-radius: 6px;
    background: var(--sigo-bg);
    border: 1px solid var(--sigo-border);
    color: var(--sigo-text-body);
    overflow-x: auto;
    white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════
   CAMADA DE INTERAÇÃO GLOBAL (2026-10-12) — docs/08-cores.md
   Comportamento único para o projeto todo: foco de teclado, seleção de
   texto, destaque ("olhe aqui") e sinal de notificação nova. Tudo em
   tokens semânticos, então vale para os dois temas sem override.
   ══════════════════════════════════════════════════════════════════ */

/* Foco de teclado visível e igual em todo lugar (só :focus-visible — clique
   de mouse não mostra o anel). Componentes que já definem o próprio anel
   (ws-kpi, ws-pipeline-card...) usam o mesmo --sigo-focus-ring. */
.mud-button-root:focus-visible,
.mud-icon-button:focus-visible,
.mud-nav-link:focus-visible,
.ws-tab:focus-visible,
.mud-tab:focus-visible,
a:focus-visible {
    outline: none;
    box-shadow: var(--sigo-focus-ring) !important;
}

::selection {
    background: color-mix(in srgb, var(--sigo-cyan) 35%, transparent);
    color: inherit;
}

/* Destaque — rótulo laranja de marca para novidade/prazo/conquista.
   Uso: <span class="sigo-destaque">Novo</span>. No máximo um por tela. */
.sigo-destaque {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--sigo-destaque-tinta);
    background: var(--sigo-destaque-fundo);
}

/* Chips de status padronizados — fundo tingido + tinta do mesmo tom.
   Uso: <span class="sigo-status sigo-status--perigo">Vencida</span>.
   Sempre com texto (e de preferência ícone): a cor nunca carrega o significado sozinha. */
.sigo-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
}
.sigo-status--sucesso { color: var(--sigo-sucesso-tinta); background: var(--sigo-sucesso-fundo); }
.sigo-status--atencao { color: var(--sigo-atencao-tinta); background: var(--sigo-atencao-fundo); }
.sigo-status--perigo  { color: var(--sigo-perigo-tinta);  background: var(--sigo-perigo-fundo); }
.sigo-status--info    { color: var(--sigo-info-tinta);    background: var(--sigo-info-fundo); }
.sigo-status--neutro  { color: var(--sigo-text-body);     background: var(--sigo-bg); }

/* Notificação nova: o ponto do sino pulsa (anel que expande e some) —
   chama atenção sem bloquear. Respeita "reduzir movimento" do sistema. */
.sigo-notif-badge .mud-badge.mud-badge-dot {
    animation: sigo-pulso 2s ease-out infinite;
}

@keyframes sigo-pulso {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mud-palette-error) 55%, transparent); }
    70%  { box-shadow: 0 0 0 7px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

@media (prefers-reduced-motion: reduce) {
    .sigo-notif-badge .mud-badge.mud-badge-dot {
        animation: none;
    }
}