@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700&display=swap');

/* Tamanho/margem de página para impressão (Proposta de Orçamento via window.print —
   ver OrcamentosVisualizar.razor). Declarado no nível raiz da folha de estilo, não
   aninhado em @media print: suporte a @page aninhado em regras condicionais é mais
   recente/menos testado entre motores de impressão do que @page no nível raiz.
   "A4 landscape" (nome + orientação) em vez de "297mm 210mm" (dimensão livre): o
   driver de impressão/PDF do SO precisa casar o @page com um tamanho de papel
   físico — um papel nomeado padrão tem chance bem maior de ser reconhecido do
   que uma dimensão arbitrária, que alguns drivers só respeitam parcialmente
   (aceitam a proporção mas não o tamanho exato, ou ignoram e caem no padrão do
   sistema — sintoma: conteúdo encolhido dentro da página impressa). */
@page { size: A4 landscape; margin: 0; }

/* ── Design tokens ─────────────────────────────────────────────── */
:root {
    --ws-navy:   #152341;
    --ws-cyan:   #2FD3FF;
    --ws-orange: #FF7440;
    --ws-green:  #00A660;
    --ws-bg:     #f9f9f9;
    --ws-surface:#FFFFFF;
    --ws-border: #e5e7eb;
    --ws-radius: 10px;
    --ws-shadow: 0px 1px 4px 0px rgba(130, 143, 163, 0.15);
    --ws-text:   #374151;
    --ws-muted:  #9a9ea5;
}

/* ── Reset & Base ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    font-family: var(--sigo-font-family, 'Hanken Grotesk', system-ui, sans-serif);
    margin: 0;
    padding: 0;
    background: var(--ws-bg);
}

/* ── Material Symbols Outlined — glyph via ligadura de texto ─────
   O link do Google Fonts (ver _Layout.cshtml) só define @font-face;
   esta classe é o contrato usado por BI.cs ("material-symbols-outlined/nome"),
   consumido pelo branch de font-icon do MudIcon. ─────────────────── */
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
    /* Glifo ocupa 1em: se a fonte atrasar, o nome do ícone não estica o layout. */
    display: inline-block;
    width: 1em;
    overflow: hidden;
}

/* Até a fonte de ícones carregar (classe posta/tirada no <head> de _Layout.cshtml): nada de "visibility",
   "lock"… como texto na tela. */
html.sigo-icones-pendentes .material-symbols-outlined { visibility: hidden; }

/* ── Fundo principal (coberto por sigo-overrides .sigo-main) ─── */

/* ── Cards ────────────────────────────────────────────────────── */
.mud-card {
    border-radius: var(--ws-radius) !important;
    box-shadow: var(--ws-shadow) !important;
    border: 1px solid var(--ws-border) !important;
}

.mud-card-content {
    padding: 24px !important;
}

/* ══════════════════════════════════════════════════════════════════
   INDICADORES — KpiCard (stat tile) e WsMedidor (meter)          2026-10
   Padrão único do SIGO para números de destaque e "valor × limite":
   • O número é o protagonista (2rem, tinta do texto — nunca a cor do tom).
   • O tom (classe .ws-tom-*) só muda quando o valor TEM significado: neutro/marca
     no estado normal; bom/atenção/crítico com ícone + rótulo de status (a cor nunca
     carrega o significado sozinha — guia de dataviz).
   • Medidor: preenchimento = tom; trilho = o MESMO tom clareado (lê-se o estado na
     barra inteira); valor > 0 sempre visível (largura mínima); marcadores de limite
     desenhados na própria barra.
   Tokens em sigo-tokens.css (--sigo-tom-*), claro e escuro com passos próprios.
   ══════════════════════════════════════════════════════════════════ */

.ws-tom-neutro  { --tom: var(--sigo-tom-neutro);  --tom-tinta: var(--sigo-tom-neutro-tinta);  }
.ws-tom-marca   { --tom: var(--sigo-tom-marca);   --tom-tinta: var(--sigo-tom-marca-tinta);   }
.ws-tom-bom     { --tom: var(--sigo-tom-bom);     --tom-tinta: var(--sigo-tom-bom-tinta);     }
.ws-tom-atencao { --tom: var(--sigo-tom-atencao); --tom-tinta: var(--sigo-tom-atencao-tinta); }
.ws-tom-critico { --tom: var(--sigo-tom-critico); --tom-tinta: var(--sigo-tom-critico-tinta); }

/* ── KpiCard ──────────────────────────────────────────────────────── */
.ws-kpi {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;   /* card clicável vira <button>, que centraliza os filhos por padrão no Chrome */
    gap: 10px;
    width: 100%;
    height: 100%;
    min-height: 132px;
    padding: 18px 20px 16px;
    background: var(--sigo-surface);
    border: 1px solid var(--sigo-border);
    border-radius: 12px;
    box-shadow: var(--sigo-shadow);
    overflow: hidden;
    text-align: left;
    font: inherit;
    color: inherit;
    transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}

/* Faixa superior só quando o tom é de status relevante — chama o olho para o card certo. */
.ws-kpi.ws-tom-atencao::before,
.ws-kpi.ws-tom-critico::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--tom);
}

.ws-kpi-topo {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.ws-kpi-icone {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--tom) 14%, var(--sigo-surface));
    color: var(--tom-tinta);
}
.ws-kpi-icone .mud-icon-root {
    font-size: 18px;
    color: var(--tom-tinta);
}

.ws-kpi-rotulo {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--sigo-text-body);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ws-kpi-valor {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--sigo-text);
}

.ws-kpi-rodape {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--sigo-muted);
}

/* Rótulo de status: ícone + texto na tinta do tom, sobre o fundo tingido. */
.ws-kpi-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px 2px 6px;
    border-radius: 999px;
    font-weight: 600;
    background: color-mix(in srgb, var(--tom) 14%, var(--sigo-surface));
    color: var(--tom-tinta);
}
.ws-kpi-status .mud-icon-root {
    font-size: 14px;
    color: var(--tom-tinta);
}

/* Variação: sobe = bom/desce = crítico por padrão (o chamador inverte quando "subir" é ruim). */
.ws-kpi-delta {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 600;
}
.ws-kpi-delta.up   { background: color-mix(in srgb, var(--sigo-tom-bom) 14%, var(--sigo-surface));     color: var(--sigo-tom-bom-tinta); }
.ws-kpi-delta.down { background: color-mix(in srgb, var(--sigo-tom-critico) 14%, var(--sigo-surface)); color: var(--sigo-tom-critico-tinta); }

/* Clicável (OnClick): é um <button>; seta aparece no hover, borda ganha o tom. */
button.ws-kpi { cursor: pointer; }
.ws-kpi--destaque .ws-kpi-valor { font-size: 2.5rem; }
@media (max-width: 560px) { .ws-kpi--destaque .ws-kpi-valor { font-size: 2rem; } }
.ws-kpi-seta {
    flex-shrink: 0;
    color: var(--sigo-muted-light);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity .18s ease, transform .18s ease;
}
.ws-kpi-seta.mud-icon-root { font-size: 18px; }
button.ws-kpi:hover {
    border-color: color-mix(in srgb, var(--tom) 45%, var(--sigo-border));
    box-shadow: var(--sigo-shadow-lg);
    transform: translateY(-1px);
}
button.ws-kpi:hover .ws-kpi-seta,
button.ws-kpi:focus-visible .ws-kpi-seta {
    opacity: 1;
    transform: none;
}
/* Card usado como filtro e com o filtro aplicado. */
.ws-kpi--selecionado,
button.ws-kpi--selecionado:hover {
    border-color: var(--tom);
    box-shadow: 0 0 0 1px var(--tom), var(--sigo-shadow);
}
.ws-kpi--selecionado .ws-kpi-seta {
    opacity: 1;
    transform: none;
}

button.ws-kpi:focus-visible {
    outline: none;
    box-shadow: var(--sigo-focus-ring), var(--sigo-shadow);
}

/* ── WsMedidor ────────────────────────────────────────────────────── */
.ws-medidor {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ws-medidor-cab {
    display: flex;
    align-items: center;
    min-height: 20px;
    justify-content: space-between;
    gap: 12px;
}

.ws-medidor-rotulo {
    font-size: 13px;
    font-weight: 500;
    color: var(--sigo-text-body);
}

.ws-medidor-valor {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 700;
    color: var(--sigo-text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.ws-medidor-valor .ws-medidor-de {
    font-weight: 500;
    color: var(--sigo-muted);
}
.ws-medidor-valor .mud-icon-root {
    font-size: 16px;
    color: var(--tom-tinta);
}

.ws-medidor-trilho {
    position: relative;
    height: 8px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--tom) 16%, var(--sigo-surface));
}

.ws-medidor-preenchimento {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: 4px;
    background: var(--tom);
    transition: width .4s ease;
}
/* Qualquer valor > 0 aparece (1 de 50.000 não some na barra). */
.ws-medidor-preenchimento--minimo { min-width: 6px; }

/* Marcador de limite: traço vertical que ultrapassa o trilho, com anel da superfície. */
.ws-medidor-marca {
    position: absolute;
    top: -3px;
    bottom: -3px;
    width: 2px;
    margin-left: -1px;
    border-radius: 1px;
    background: var(--sigo-text-body);
    box-shadow: 0 0 0 1.5px var(--sigo-surface);
}
.ws-medidor-marca--suave { background: var(--sigo-muted-light); }

.ws-medidor-legenda {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    font-size: 12px;
    color: var(--sigo-muted);
}
.ws-medidor-legenda-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.ws-medidor-legenda-traco {
    width: 2px;
    height: 12px;
    border-radius: 1px;
    background: var(--sigo-text-body);
}
.ws-medidor-legenda-traco--suave { background: var(--sigo-muted-light); }

/* ── Cabeçalho de seção nos cards ─────────────────────────────── */
.ws-section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--ws-border);
}

.ws-section-icon {
    width: 36px;
    height: 36px;
    background: rgba(21,35,65,0.08);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ws-section-icon .mud-icon-root {
    color: var(--ws-navy) !important;
    font-size: 18px !important;
}

.ws-section-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ws-navy);
}

/* ── Page header ─────────────────────────────────────────────── */
.ws-page-header {
    margin-bottom: 24px;
}

.ws-breadcrumb {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: #94A3B8;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.ws-breadcrumb a {
    color: #94A3B8;
    text-decoration: none;
}

.ws-breadcrumb a:hover {
    color: var(--ws-muted);
}

.ws-page-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ws-text);
    letter-spacing: -0.3px;
}

/* ── Campos do formulário ─────────────────────────────────────── */
.ws-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 14px;
}

.ws-field-label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    color: var(--ws-muted);
}

/* ── Texto auxiliar / mini-label ─────────────────────────────── */
/* Substitui o antipadrão "style=color:#94A3B8" repetido em dezenas de forms
   (ex.: descrição abaixo de um MudSwitch). */
.ws-helper-text {
    color: var(--sigo-muted-light) !important;
}

/* ── MudSwitch desmarcado no modo escuro ─────────────────────────
   O MudBlazor pinta a trilha desmarcada de preto (--mud-palette-black) a 48% de opacidade —
   sobre as superfícies escuras (#171d2b) ela some e só a bolinha branca fica visível.
   Troca por cinza-azulado (mesmo tom de --mud-palette-text-secondary) pra o switch ler como
   controle mesmo desligado. Marcado (.mud-checked) mantém a cor da paleta. */
[data-theme="dark"] .mud-switch-base:not(.mud-checked) + .mud-switch-track {
    background-color: var(--mud-palette-text-secondary);
    opacity: .6;
}

/* Mini-label maiúsculo usado em painéis de resumo (ex.: Contrato/Pedido gerado
   a partir de um Orçamento) — mesmo padrão visual repetido com cor hardcoded
   antes de virar classe. */
.ws-mini-label {
    font-size: 0.68rem;
    color: var(--sigo-muted-light);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ── Action bar inferior ─────────────────────────────────────── */
.ws-action-bar {
    position: sticky;
    bottom: 0;
    background: var(--ws-surface);
    border-top: 1px solid var(--ws-border);
    padding: 12px 20px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
    border-radius: 0 0 var(--ws-radius) var(--ws-radius);
}

/* ── Rodapé de paginação fixo (listagens) ─────────────────────── */
.ws-pager {
    position: sticky;
    bottom: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: 12px;
    padding: 6px 12px;
    background: var(--sigo-surface);
    border: 1px solid var(--sigo-border);
    border-radius: 8px;
    font-size: .8125rem;
}
.ws-pager-resumo { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--sigo-muted); }
.ws-pager-resumo strong { color: var(--mud-palette-text-primary); }
.ws-pager-nav { display: flex; align-items: center; gap: 2px; }
.ws-pager-pagina { padding: 0 8px; font-weight: 600; white-space: nowrap; }

/* ── Chips / badges ───────────────────────────────────────────── */
.mud-chip {
    border-radius: 6px !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
}

/* ── Scrollbar ────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94A3B8; }

/* ── PDF preview viewer ───────────────────────────────────────── */
.pdf-preview-bg {
    background: #c8cdd6;
    min-height: calc(100vh - 48px);
    padding: 28px 0 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pdf-preview-bg .prop-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.pdf-preview-bg .page {
    width: 297mm !important;
    height: 210mm !important;
    min-height: 210mm !important;
    max-height: 210mm !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    flex-shrink: 0;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}

/* ── Contrato preview viewer (A4 retrato — ao contrário da proposta de Orçamento em .page,
   que é paginada manualmente em blocos de 297x210mm landscape, o Contrato é HTML corrido:
   sem tamanho fixo forçado, o navegador quebra página automaticamente na impressão) ────── */
.contrato-preview-bg {
    background: #c8cdd6;
    min-height: calc(100vh - 48px);
    padding: 28px 0 40px;
    display: flex;
    justify-content: center;
}

.contrato-preview-bg .contrato-preview-page {
    background: #fff;
    width: 210mm;
    min-height: 297mm;
    padding: 35mm 20mm 20mm;
    box-sizing: border-box;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}

/* Painel de cabeçalho de Editar Contrato: os 5 campos SEMPRE na mesma linha horizontal (colunas
   fixas, sem quebra — antes o auto-fit jogava o último para baixo em áreas de conteúdo estreitas,
   como com o menu lateral aberto). minmax(0, …) + ellipsis evitam que um nome de cliente longo
   estoure a linha; só em celular (<= 600px) volta a quebrar. Todos começam alinhados ao topo
   (rótulo + valor); o campo editável "Contrato Externo" tem o padding vertical do MudTextField
   zerado para o texto cair na mesma linha dos valores ao lado. */
.ws-contrato-cabecalho {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 8px 16px;
    align-items: start;
}

.ws-contrato-cabecalho > div > .ws-mini-label,
.ws-contrato-cabecalho > div > div:not(.ws-mini-label):not(.mud-input-control) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 600px) {
    .ws-contrato-cabecalho {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.ws-contrato-externo.mud-input-control {
    margin-top: 0;
}

.ws-contrato-externo .mud-input > input.mud-input-root {
    padding-top: 0;
    padding-bottom: 0;
    font-size: .85rem;
    font-weight: 600;
    height: 1.35em;
}

/* Editar Contrato › Nova Condição Comercial: os dois cards do topo (flag + Vigência) lado a lado com a
   mesma altura — o WsSubBlock tem margin-top:16px, descontado do 100% para não estourar o item. */
.ws-cards-lado-a-lado > .mud-grid-item > .ws-subsection-block {
    height: calc(100% - 16px);
}

/* Linha do tempo do Contrato (abas Histórico/Observações) — reaproveita .ws-lead-timeline, só com
   mais altura útil que os 340px do Lead (a lista rola por dentro, não a página). */
.ws-lead-timeline.ws-contrato-timeline {
    max-height: max(260px, calc(100vh - 460px));
}

/* Origem do registro na linha do tempo do Contrato (ContratoHistoricoTab): comentário lançado à mão
   (TipoContratoHistorico.Observacao, laranja) x registro gerado automaticamente pelo SIGO (azul) —
   borda lateral, fundo, ícone e selo na cor da origem; substitui o zebrado neutro do .ws-lead-timeline. */
.ws-contrato-evt-manual { --ws-evt-tom: var(--sigo-orange);   --ws-evt-fundo: 10%; }
.ws-contrato-evt-sigo   { --ws-evt-tom: var(--sigo-navy-mid); --ws-evt-fundo: 5%; }
[data-theme="dark"] .ws-contrato-evt-sigo { --ws-evt-tom: var(--sigo-cyan); }

.ws-contrato-timeline .ws-lead-timeline-item.ws-contrato-evt-manual,
.ws-contrato-timeline .ws-lead-timeline-item.ws-contrato-evt-sigo {
    border-left: 3px solid var(--ws-evt-tom);
    background: color-mix(in srgb, var(--ws-evt-tom) var(--ws-evt-fundo), var(--sigo-surface));
}

.ws-contrato-timeline .ws-contrato-evt-manual .ws-lead-timeline-icon,
.ws-contrato-timeline .ws-contrato-evt-sigo .ws-lead-timeline-icon {
    background: color-mix(in srgb, var(--ws-evt-tom) 16%, var(--sigo-surface));
    color: var(--ws-evt-tom);
}

.ws-contrato-evt-selo {
    display: inline-block;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    vertical-align: 1px;
    color: var(--ws-evt-tom);
    background: color-mix(in srgb, var(--ws-evt-tom) 14%, var(--sigo-surface));
}

/* ── Log de alterações do Contrato (ContratoLogAlteracoes) — grade campo / antes / depois ── */
.ws-contrato-log-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}
.ws-contrato-log-busca { flex: 1 1 220px; }
.ws-contrato-log-filtro { flex: 0 1 190px; }
.ws-contrato-log-data { flex: 0 1 150px; }

.ws-contrato-log-resumo {
    font-size: 11px;
    color: var(--sigo-muted);
    margin-bottom: 6px;
}
.ws-contrato-log-resumo span { margin-left: 4px; }

/* A grade rola por dentro (mesma altura útil da linha do tempo), não a página. */
.ws-contrato-log-tabela {
    max-height: max(260px, calc(100vh - 520px));
    overflow: auto;
}
.ws-contrato-log-tabela th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--sigo-surface);
}
.ws-contrato-log-tabela td { vertical-align: top; font-size: 12.5px; }

.ws-contrato-log-tipo {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    color: var(--sigo-text-body);
}
.ws-contrato-log-campo { font-weight: 600; color: var(--sigo-text); }
.ws-contrato-log-legado {
    display: inline-block;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    color: var(--sigo-muted);
    background: var(--sigo-bg);
    border: 1px dashed var(--sigo-border);
}

/* Antes (tom de erro, riscado leve) x Depois (tom de sucesso) — textos longos (Observações) quebram e rolam. */
.ws-contrato-log-valor {
    padding: 2px 6px;
    border-radius: 6px;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 140px;
    overflow: auto;
}
.ws-contrato-log-antes {
    background: color-mix(in srgb, var(--mud-palette-error) 8%, var(--sigo-surface));
    color: color-mix(in srgb, var(--mud-palette-error) 55%, var(--sigo-text));
}
.ws-contrato-log-depois {
    background: color-mix(in srgb, var(--mud-palette-success) 10%, var(--sigo-surface));
    color: color-mix(in srgb, var(--mud-palette-success) 55%, var(--sigo-text));
    font-weight: 600;
}

.ws-contrato-timeline-legenda {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin-bottom: 8px;
    font-size: 11px;
    color: var(--sigo-muted);
}

.ws-contrato-timeline-legenda > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ws-contrato-timeline-legenda-dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: var(--ws-evt-tom);
}

/* ── Print ────────────────────────────────────────────────────── */
@media print {
    /* Ocultar UI da aplicação e fundo de pré-visualização */
    .print-hidden,
    .sigo-sidebar,
    .sigo-header,
    .ws-tab-bar,
    #blazor-error-ui {
        display: none !important;
    }

    .sigo-layout {
        display: block !important;
        width: auto !important;
        height: auto !important;
        overflow: visible !important;
    }

    .sigo-content {
        margin-left: 0 !important;
        height: auto !important;
        overflow: visible !important;
    }

    .sigo-main {
        overflow: visible !important;
    }

    /* Reset do wrapper de preview — fundo some, layout vira block */
    .pdf-preview-bg {
        background: none !important;
        padding: 0 !important;
        min-height: unset !important;
        display: block !important;
    }

    .pdf-preview-bg .prop-wrap {
        display: block !important;
        gap: 0 !important;
    }

    .pdf-preview-bg .page {
        box-shadow: none !important;
    }

    .contrato-preview-bg {
        background: none !important;
        padding: 0 !important;
        min-height: unset !important;
        display: block !important;
    }

    .contrato-preview-bg .contrato-preview-page {
        width: auto !important;
        min-height: unset !important;
        padding: 0 !important;
        box-shadow: none !important;
    }

    /* Tamanho e quebra explícitos por bloco de página */
    .page {
        width: 297mm !important;
        height: 210mm !important;
        min-height: 210mm !important;
        max-height: 210mm !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        page-break-before: always;
        break-before: page;
        page-break-after: always;
        break-after: page;
        page-break-inside: avoid;
        break-inside: avoid;
    }

    .page:first-of-type {
        page-break-before: auto;
        break-before: auto;
    }

    /* Seções internas não quebram */
    .p2-map-wrap,
    .p4-tbl-wrap,
    .p4-bottom,
    .p5-grid,
    .p6-main {
        page-break-inside: avoid;
        break-inside: avoid;
    }

    /* Sem margem/padding residual do UA no elemento raiz — @page acima já cobre a
       margem da página impressa, mas o body em si não pode ter nenhum inset próprio
       competindo com o tamanho exato de .page (297mm x 210mm). */
    html, body {
        width: 297mm !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* ── Blazor error UI ──────────────────────────────────────────── */
#blazor-error-ui {
    background: #FEE2E2;
    border-top: 1px solid #FECACA;
    bottom: 0;
    display: none;
    left: 0;
    padding: 12px 20px;
    position: fixed;
    width: 100%;
    z-index: 9999;
    font-size: 0.875rem;
    color: #991B1B;
}

/* ── Pipeline (Kanban) ────────────────────────────────────────── */
/* Colunas por Estágio (MudDropZone) + cards (MudDropContainer/ItemRenderer) —
   ver PipelineLeadsIndex.razor. Cor de acento de cada coluna vem de Estagio.Cor
   (hex, mesmo campo usado em EstagiosIndex.razor) via a var --ws-pipeline-accent. */
/* ── Toolbar do Pipeline — visões (Kanban/Lista) + resumo + ações ── */
.ws-pl-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding-bottom: 12px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--ws-border);
}

.ws-pl-views {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--ws-border) 55%, var(--ws-bg));
}

.ws-pl-view {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: var(--ws-muted);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
}

.ws-pl-view:hover {
    color: var(--ws-text);
}

.ws-pl-view .material-symbols-outlined {
    font-size: 17px;
}

.ws-pl-view-ativa {
    background: var(--ws-surface);
    color: var(--ws-text);
    font-weight: 700;
    box-shadow: var(--ws-shadow);
    cursor: default;
}

.ws-pl-view-ativa .material-symbols-outlined {
    color: var(--sigo-navy-mid);
}

[data-theme="dark"] .ws-pl-view-ativa .material-symbols-outlined {
    color: var(--sigo-cyan);
}

.ws-pl-view-count {
    padding: 0 7px;
    border-radius: 999px;
    font-size: 0.625rem;
    font-weight: 700;
    background: var(--sigo-hover-bg);
    color: var(--sigo-navy-mid);
}

[data-theme="dark"] .ws-pl-view-count {
    color: var(--sigo-cyan);
}

.ws-pl-acoes {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ── Painel do Monitor SLA — 3 KpiCard (padrão de indicadores, §23 da arquitetura) que também
   funcionam como filtro (estado "selecionado" em .ws-kpi--selecionado). ── */
.ws-pl-sla-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

@media (max-width: 1500px) { .ws-pl-sla-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .ws-pl-sla-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .ws-pl-sla-grid { grid-template-columns: 1fr; } }

/* ── Filtros do Monitor SLA — dois grupos (Interação | Estágio parado há) numa faixa única.
   Pílula neutra (texto na tinta do texto); a cor de status fica só no ponto; contagem zero
   esmaece; ativa em navy (cyan no escuro). ── */
.ws-pl-filtros {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
    margin-bottom: 16px;
    background: var(--sigo-surface);
    border: 1px solid var(--sigo-border);
    border-radius: 12px;
}

.ws-pl-filtros-rotulo {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--sigo-muted);
    white-space: nowrap;
}

.ws-pl-filtros-rotulo .material-symbols-outlined {
    font-size: 16px;
}

.ws-pl-filtros-sep {
    width: 1px;
    height: 20px;
    margin: 0 6px;
    background: var(--sigo-border);
}

.ws-pl-pill {
    --tom: var(--sigo-tom-marca);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 5px 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--sigo-border);
    background: var(--sigo-surface);
    color: var(--sigo-text-body);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.ws-pl-pill:hover {
    border-color: color-mix(in srgb, var(--tom) 45%, var(--sigo-border));
    background: color-mix(in srgb, var(--tom) 6%, var(--sigo-surface));
}

.ws-pl-pill:focus-visible {
    outline: none;
    box-shadow: var(--sigo-focus-ring);
}

.ws-pl-pill-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--tom);
    flex-shrink: 0;
}

.ws-pl-pill-count {
    min-width: 20px;
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
    background: var(--sigo-bg);
    color: var(--sigo-text);
}

/* Contagem zero: a pílula recua (não compete com as que têm leads). */
.ws-pl-pill-zerada {
    color: var(--sigo-muted-light);
}
.ws-pl-pill:disabled { opacity: .5; cursor: default; }
.ws-pl-pill > .material-symbols-outlined { font-size: 16px; }
.ws-pl-pill-zerada .ws-pl-pill-dot { opacity: .35; }
.ws-pl-pill-zerada .ws-pl-pill-count { color: var(--sigo-muted-light); }

.ws-pl-pill-ativa,
.ws-pl-pill-ativa:hover {
    background: var(--sigo-navy);
    border-color: var(--sigo-navy);
    color: #fff;
}
.ws-pl-pill-ativa .ws-pl-pill-count {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}
.ws-pl-pill-ativa .ws-pl-pill-dot {
    box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.85);
}

[data-theme="dark"] .ws-pl-pill-ativa,
[data-theme="dark"] .ws-pl-pill-ativa:hover {
    background: var(--sigo-cyan);
    border-color: var(--sigo-cyan);
    color: #0f1420;
}
[data-theme="dark"] .ws-pl-pill-ativa .ws-pl-pill-count {
    background: rgba(15, 20, 32, 0.15);
    color: #0f1420;
}
[data-theme="dark"] .ws-pl-pill-ativa .ws-pl-pill-dot {
    box-shadow: 0 0 0 1.5px rgba(15, 20, 32, 0.6);
}

@keyframes ws-pipeline-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
    .ws-pipeline-card,
    .ws-kpi {
        transition: none !important;
    }
}

/* Alertas do Monitor SLA na listagem de Leads (LeadSlaAlertas.razor) — superfície neutra com
   faixa lateral e ícone no tom; texto na tinta do texto (padrão de indicadores, §23). */
.ws-pipeline-alert {
    --tom: var(--sigo-tom-critico);
    --tom-tinta: var(--sigo-tom-critico-tinta);
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px 10px 16px;
    margin-bottom: 12px;
    overflow: hidden;
    border-radius: 10px;
    background: var(--sigo-surface);
    border: 1px solid var(--sigo-border);
    color: var(--sigo-text-body);
    box-shadow: var(--sigo-shadow);
}

.ws-pipeline-alert::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--tom);
}

.ws-pipeline-alert-info  { --tom: var(--sigo-tom-atencao); --tom-tinta: var(--sigo-tom-atencao-tinta); }
.ws-pipeline-alert-aviso { --tom: var(--sigo-tom-atencao); --tom-tinta: var(--sigo-tom-atencao-tinta); flex-wrap: wrap; }

.ws-pipeline-alert-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    font-size: 17px;
    color: var(--tom-tinta);
    background: color-mix(in srgb, var(--tom) 14%, var(--sigo-surface));
}

.ws-pipeline-alert-texto {
    flex: 1;
    font-size: 13px;
}

.ws-pipeline-alert-texto strong {
    color: var(--sigo-text);
}

.ws-pipeline-alert-aviso .ws-pipeline-alert-texto {
    flex: 0 1 auto;
}

.ws-pipeline-alert-btn {
    flex-shrink: 0;
    padding: 5px 12px;
    border-radius: 8px;
    border: 1px solid var(--sigo-border);
    background: var(--sigo-surface);
    color: var(--sigo-text);
    font-size: 12px;
    font-weight: 600;
}

/* Alerta clicável inteiro: clicar filtra os leads alertados. */
.ws-pipeline-alert-clicavel {
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.ws-pipeline-alert-clicavel:hover {
    border-color: color-mix(in srgb, var(--tom) 45%, var(--sigo-border));
    box-shadow: var(--sigo-shadow-lg);
}

.ws-pipeline-alert-faixas {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.ws-pipeline-alert-faixa {
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--sigo-border);
    background: var(--sigo-surface);
    color: var(--sigo-text-body);
    font-size: 12px;
    cursor: pointer;
}

.ws-pipeline-alert-faixa:hover {
    border-color: color-mix(in srgb, var(--tom) 45%, var(--sigo-border));
    background: color-mix(in srgb, var(--tom) 6%, var(--sigo-surface));
}

.ws-pipeline-alert-faixa-ativa,
.ws-pipeline-alert-faixa-ativa:hover {
    background: var(--sigo-navy);
    border-color: var(--sigo-navy);
    color: #fff;
}

[data-theme="dark"] .ws-pipeline-alert-faixa-ativa,
[data-theme="dark"] .ws-pipeline-alert-faixa-ativa:hover {
    background: var(--sigo-cyan);
    border-color: var(--sigo-cyan);
    color: #0f1420;
}

.ws-pipeline-board {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    overflow-x: auto;
    padding-bottom: 8px;
}

.ws-pipeline-column {
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* Antes largura fixa (0 0 280px) — em monitores largos sobrava espaço e ainda assim
       precisava rolar pra ver as últimas colunas. Agora as colunas crescem pra preencher a
       tela toda quando há espaço (mostrando todos os status de uma vez) e encolhem até
       min-width antes de recorrer à rolagem horizontal do board (muitos status/tela estreita). */
    flex: 1 1 280px;
    min-width: 260px;
    max-width: 340px;
    min-height: 120px;
    /* Altura limitada à tela com rolagem própria (2026-10): antes uma coluna com 40 leads esticava a
       página e os cabeçalhos sumiam ao rolar. O cabeçalho fica fixo (sticky) dentro da coluna. */
    max-height: max(420px, calc(100dvh - 190px));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    background: color-mix(in srgb, var(--ws-border) 35%, var(--ws-bg));
    border: 1px solid var(--ws-border);
    border-radius: 16px;
    padding: 0 0 12px;
}

/* Cards empilhados com respiro lateral dentro da coluna (o cabeçalho ocupa a largura toda). */
.ws-pipeline-column > .ws-pipeline-card,
.ws-pipeline-column > .mud-drop-item {
    margin: 0 12px;
}

.ws-pipeline-column-vazia {
    background: color-mix(in srgb, var(--ws-border) 20%, var(--ws-bg));
}

.ws-pipeline-column-header {
    position: sticky;
    top: 0;
    z-index: 2;
    order: -1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px 12px;
    background: var(--ws-surface);
    border-bottom: 1px solid var(--ws-border);
}

.ws-pipeline-column-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    font-size: 0.6875rem;
    color: var(--ws-muted);
    font-variant-numeric: tabular-nums;
}

.ws-pipeline-column-lock {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--ws-muted);
}
.ws-pipeline-column-lock .material-symbols-outlined { font-size: 12px; }

.ws-pipeline-column-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--ws-muted);
    cursor: pointer;
}
.ws-pipeline-column-toggle:hover { background: var(--sigo-hover-bg); color: var(--ws-text); }
.ws-pipeline-column-toggle:focus-visible { outline: none; box-shadow: var(--sigo-focus-ring); }
.ws-pipeline-column-toggle .material-symbols-outlined { font-size: 18px; }

.ws-pipeline-column-mais {
    order: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0 12px;
}

.ws-pipeline-column-encerrados {
    border: none;
    background: transparent;
    font: inherit;
    font-size: 0.6875rem;
    color: var(--ws-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    padding: 4px;
}
.ws-pipeline-column-encerrados:hover { color: var(--ws-text); }

/* Coluna recolhida: faixa estreita com o nome na vertical — continua aceitando cards soltos nela. */
.ws-pipeline-column--recolhida {
    flex: 0 0 52px;
    min-width: 52px;
    max-width: 52px;
    overflow: hidden;
    cursor: default;
}
.ws-pipeline-column--recolhida > .mud-drop-item { display: none; }
.ws-pipeline-column--recolhida .ws-pipeline-column-header {
    height: 100%;
    padding: 12px 6px;
    border-bottom: none;
    align-items: center;
}
.ws-pipeline-column--recolhida .ws-pipeline-column-head-row {
    flex-direction: column-reverse;
    justify-content: flex-end;
    gap: 10px;
}
.ws-pipeline-column--recolhida .ws-pipeline-column-title-wrap { flex-direction: row; }
.ws-pipeline-column--recolhida .ws-pipeline-column-title {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
}
.ws-pipeline-column--recolhida .ws-pipeline-column-badge,
.ws-pipeline-column--recolhida .ws-pipeline-column-lock { display: none; }

.ws-pipeline-column-accent {
    height: 3px;
    border-radius: 999px;
    background: var(--ws-pipeline-accent, var(--sigo-navy-mid));
}

.ws-pipeline-column-head-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.ws-pipeline-column-title-wrap {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ws-pipeline-column-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--ws-text);
    overflow: hidden;
    text-overflow: ellipsis;
}

.ws-pipeline-column-title-wrap { min-width: 0; flex: 1 1 auto; }

/* Micro-alerta da coluna — quantos leads dela estão sem interação além do limite (tom crítico,
   ícone + texto específico; sem pulso contínuo). */
.ws-pipeline-column-alerta {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    border: none;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--tom-tinta);
    background: color-mix(in srgb, var(--tom) 10%, var(--sigo-surface));
}

.ws-pipeline-column-alerta .mud-icon-root {
    font-size: 16px;
    color: var(--tom-tinta);
}

.ws-pipeline-column-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 28px 12px 16px;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--ws-muted);
}

.ws-pipeline-column-empty .material-symbols-outlined {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    font-size: 20px;
    background: var(--ws-surface);
    opacity: 0.8;
}

.ws-pipeline-column-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--sigo-muted);
}

.ws-pipeline-column-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--ws-pipeline-accent, var(--sigo-navy-mid));
}

.ws-pipeline-column-count {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--ws-muted);
    background: var(--ws-surface);
    border: 1px solid var(--ws-border);
    border-radius: 999px;
    padding: 1px 8px;
}

/* Card do Lead — superfície neutra; o nível de SLA (LeadCardInfo.Nivel/Tom) aparece numa faixa
   lateral fina (só atenção/crítico) e nos micro-indicadores do topo, sempre com ícone. Sem pulso. */
.ws-pipeline-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
    background: var(--sigo-surface);
    border: 1px solid var(--sigo-border);
    border-radius: 12px;
    box-shadow: var(--sigo-shadow);
    padding: 14px 14px 12px 16px;
    cursor: pointer;
    transition: box-shadow .15s ease, border-color .15s ease;
}

.ws-pipeline-card.ws-tom-critico::before,
.ws-pipeline-card.ws-tom-atencao::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--tom);
}

/* Sem transform no hover: um ancestral com transform vira o bloco de referência dos position:fixed internos, e
   a camada de "clicar fora" do menu "..." (MudOverlay, renderizada dentro do MudMenu no MudBlazor 7) ficava do
   tamanho do card — clicar fora não fechava o menu e dava para abrir o de outro card. */
.ws-pipeline-card:hover {
    border-color: color-mix(in srgb, var(--sigo-tom-marca) 35%, var(--sigo-border));
    box-shadow: var(--sigo-shadow-lg);
}

.ws-pipeline-card:focus-visible {
    outline: none;
    border-color: var(--sigo-tom-marca);
    box-shadow: var(--sigo-focus-ring);
}

/* Card cujo painel lateral está aberto. */
.ws-pipeline-card-aberto {
    border-color: var(--sigo-tom-marca);
    box-shadow: 0 0 0 1px var(--sigo-tom-marca), var(--sigo-shadow);
}

/* Dois micro-indicadores no topo do card (2026-10): 💬 dias desde a última interação (crítico = SLA
   estourado) e 🕒 dias no estágio (atenção = parado +10 dias). Antes um selo só misturava as duas métricas. */
.ws-pipeline-card-sinais {
    display: inline-flex;
    gap: 4px;
    flex-shrink: 0;
}

.ws-pl-sinal-mini {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 7px 1px 5px;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    background: var(--sigo-bg);
    color: var(--sigo-muted);
}
.ws-pl-sinal-mini .material-symbols-outlined { font-size: 13px; }
.ws-pl-sinal-mini--critico {
    --tom: var(--sigo-tom-critico); --tom-tinta: var(--sigo-tom-critico-tinta);
    font-weight: 700;
    color: var(--tom-tinta);
    background: color-mix(in srgb, var(--tom) 13%, var(--sigo-surface));
}
.ws-pl-sinal-mini--aviso {
    --tom: var(--sigo-tom-atencao); --tom-tinta: var(--sigo-tom-atencao-tinta);
    font-weight: 700;
    color: var(--tom-tinta);
    background: color-mix(in srgb, var(--tom) 15%, var(--sigo-surface));
}

.ws-pipeline-card-linha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: -4px;
    min-width: 0;
}
.ws-pipeline-card-linha .ws-pipeline-card-contato {
    margin-top: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.ws-pl-flag {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px 2px 6px;
    border-radius: 6px;
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--tom-tinta);
    background: color-mix(in srgb, var(--tom) 12%, var(--sigo-surface));
}
.ws-pl-flag .material-symbols-outlined { font-size: 14px; }

/* Qualificação em 0%: convite discreto em vez de uma barra vazia. */
.ws-pl-qualificar {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border: 1px dashed var(--sigo-border);
    border-radius: 6px;
    background: transparent;
    font: inherit;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--ws-muted);
    cursor: pointer;
}
.ws-pl-qualificar:hover,
.ws-pl-qualificar:focus-visible {
    outline: none;
    border-color: var(--sigo-tom-marca);
    color: var(--sigo-tom-marca-tinta);
}
.ws-pl-qualificar .material-symbols-outlined { font-size: 14px; }

/* Modo compacto: empresa + sinais + avatar/ações (a preferência fica no navegador, ws-pipeline.js). */
.ws-pipeline-board--compacto .ws-pipeline-card {
    gap: 6px;
    padding: 9px 10px 8px 12px;
}
.ws-pipeline-board--compacto .ws-pipeline-card-empresa { font-size: 0.8125rem; }
.ws-pipeline-board--compacto .ws-pipeline-card-footer { padding-top: 6px; }
.ws-pipeline-board--compacto .ws-pipeline-column { gap: 8px; }

.ws-pipeline-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.6875rem;
    color: var(--sigo-muted);
}

.ws-pipeline-card-origem {
    padding: 2px 8px;
    border-radius: 5px;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: var(--sigo-bg);
    color: var(--sigo-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.ws-pipeline-card-empresa {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--sigo-text);
    line-height: 1.25;
    min-width: 0;
    overflow-wrap: anywhere;
}

.ws-pipeline-card-contato {
    margin-top: -6px;
    font-size: 0.75rem;
    color: var(--ws-muted);
}

/* Tags de qualificação — hoje só no painel lateral do Lead (LeadPainelLateral), todas, quebrando linha. */
.ws-pipeline-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.ws-pipeline-card-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    background: color-mix(in srgb, var(--sigo-tom-marca) 10%, var(--sigo-surface));
    color: var(--sigo-tom-marca-tinta);
    flex-shrink: 0;
}

/* Barra de % de Qualificação preenchida (mesma regra de negócio da aba Qualificação —
   ver PipelineLeadsIndex.ConstruirCard/ILeadClassificacaoValidator). */
.ws-pipeline-card-qualif {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 2px;
}

.ws-pipeline-card-qualif-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--ws-muted);
}

.ws-pipeline-card-qualif-pct {
    font-variant-numeric: tabular-nums;
}

.ws-pipeline-card-qualif-pct-ativo {
    color: var(--sigo-text);
    font-weight: 700;
}

.ws-pipeline-card-qualif-track {
    height: 6px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--sigo-tom-marca) 14%, var(--sigo-surface));
    overflow: hidden;
}

.ws-pipeline-card-qualif-fill {
    height: 100%;
    border-radius: 4px;
    background: var(--sigo-tom-marca);
    transition: width 0.2s ease;
}

/* Rodapé: responsável (avatar com iniciais + nome) à esquerda e ações à direita; se o card
   estiver estreito, as ações quebram para a linha de baixo em vez de sobrepor o nome. */
.ws-pipeline-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 8px;
    padding-top: 10px;
    border-top: 1px solid var(--ws-border);
}

.ws-pipeline-card-responsavel {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 90px;
    font-size: 0.75rem;
    color: var(--ws-text);
    /* min-width:0 permite a reticência (…) em vez de transbordar o card quando o nome é muito
       longo, já que o rodapé é flex e o item usa por padrão a largura do conteúdo como mínimo. */
    min-width: 0;
}

.ws-pipeline-card-responsavel-nome {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.ws-pipeline-card-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    font-size: 0.5625rem;
    font-weight: 700;
    background: color-mix(in srgb, var(--ws-border) 80%, var(--ws-surface));
    color: var(--ws-text);
}

/* Ações do rodapé do card: Registrar ação + WhatsApp à mostra; o resto no menu "⋯" (2026-10). */
.ws-pipeline-card-acoes {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    justify-content: flex-end;
    margin-left: auto;
}

/* Botões de ação "fantasma": ícone neutro que ganha a cor do botão no hover. */
.ws-pipeline-card .ws-pipeline-card-acoes > .ws-pipeline-card-acao,
.ws-pipeline-card .ws-pipeline-card-acoes > .ws-pipeline-card-whatsapp {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: transparent;
    color: var(--ws-muted);
    transition: background 0.15s, color 0.15s;
}

.ws-pipeline-card .ws-pipeline-card-acoes > .ws-pipeline-card-acao:hover {
    background: color-mix(in srgb, var(--sigo-tom-marca) 12%, var(--sigo-surface));
    color: var(--sigo-tom-marca-tinta);
}
.ws-pipeline-card .ws-pipeline-card-acoes > .ws-pipeline-card-whatsapp:hover {
    background: rgba(0, 166, 96, 0.12);
    color: var(--sigo-green);
}

/* WhatsApp mantém a cor da marca mesmo em repouso — é o atalho mais usado e reconhecível. */
.ws-pipeline-card .ws-pipeline-card-acoes > .ws-pipeline-card-whatsapp {
    color: var(--sigo-green);
}

/* Ícone oficial do WhatsApp (SVG inline) em vez do glifo genérico "chat" do Material Symbols —
   mais reconhecível de imediato pro usuário. */
.ws-pipeline-card-whatsapp {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: rgba(0, 166, 96, 0.12);
    color: var(--sigo-green);
    flex-shrink: 0;
}

.ws-pipeline-card-whatsapp svg {
    width: 14px;
    height: 14px;
}

/* Mesmo botão do WhatsApp, versão usada junto ao campo Telefone no LeadEditDialog (Dados do
   Lead) — só some quando o campo está vazio (ver LeadEditDialog.razor). */
.ws-lead-whatsapp-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    background: rgba(0, 166, 96, 0.12);
    color: var(--sigo-green);
    flex-shrink: 0;
}

.ws-lead-whatsapp-btn svg {
    width: 12px;
    height: 12px;
}

/* Botão "Registrar ação/interação" no card — abre o LeadAcaoDialog (catálogo completo dos
   tipos de interação), separado do histórico. */
.ws-pipeline-card-acao {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: rgba(255, 116, 64, 0.12);
    color: var(--sigo-orange);
    flex-shrink: 0;
    border: none;
    padding: 0;
    cursor: pointer;
}

.ws-pipeline-card-acao .material-symbols-outlined {
    font-size: 15px;
}

.ws-pipeline-card-dragging {
    opacity: 0.5;
}

/* Menu "..." do card: a camada de "clicar fora" do MudMenu fica desligada — o fechamento por clique fora da lista
   (ou Esc) é feito em ws-pipeline.js (menuCard / FecharMenuCardJs), que funciona em qualquer ponto da tela. */
.ws-pipeline-card-menu .mud-overlay { display: none !important; }

.ws-pipeline-card-menu .mud-icon-button {
    width: 26px;
    height: 26px;
    padding: 0;
    border-radius: 7px;
    color: var(--ws-muted);
}

.ws-pl-menu-titulo {
    font-size: 0.6875rem !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── Toolbar: busca, Meus leads, filtros avançados, atalhos, aviso de alterações externas ── */
.ws-pl { position: relative; }

.ws-pl-busca {
    position: relative;
    flex: 1 1 280px;
    max-width: 440px;
    min-width: 200px;
}
.ws-pl-busca .mud-input-control { margin: 0; }

.ws-pl-kbd,
.ws-pl-atalhos kbd {
    display: inline-block;
    min-width: 18px;
    padding: 0 5px;
    border: 1px solid var(--sigo-border);
    border-bottom-width: 2px;
    border-radius: 4px;
    font: 600 0.6875rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
    text-align: center;
    color: var(--ws-muted);
    background: var(--sigo-surface);
}
.ws-pl-kbd {
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}
.ws-pl-busca:focus-within .ws-pl-kbd { display: none; }

.ws-pl-filtros-avancados {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: -4px 0 14px;
}
@media (max-width: 900px) { .ws-pl-filtros-avancados { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.ws-pl-chip {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px 3px 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: var(--sigo-tom-marca-tinta);
    background: color-mix(in srgb, var(--sigo-tom-marca) 10%, var(--sigo-surface));
}
.ws-pl-chip-x {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    cursor: pointer;
}
.ws-pl-chip-x:hover,
.ws-pl-chip-x:focus-visible { outline: none; background: color-mix(in srgb, var(--sigo-tom-marca) 18%, transparent); }
.ws-pl-chip-x .material-symbols-outlined { font-size: 14px; }

.ws-pl-limpar {
    border: none;
    background: transparent;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--ws-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
.ws-pl-limpar:hover { color: var(--ws-text); }

.ws-pl-resultado {
    font-size: 12px;
    color: var(--ws-muted);
    font-variant-numeric: tabular-nums;
}

.ws-pl-atalhos {
    position: absolute;
    right: 0;
    top: 56px;
    z-index: 20;
    width: min(340px, calc(100vw - 32px));
    padding: 12px 14px;
    border: 1px solid var(--sigo-border);
    border-radius: 12px;
    background: var(--sigo-surface);
    box-shadow: var(--sigo-shadow-lg);
}
.ws-pl-atalhos-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.ws-pl-atalhos dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 12px;
    margin: 0;
    font-size: 0.8125rem;
}
.ws-pl-atalhos dt { display: flex; gap: 3px; align-items: center; white-space: nowrap; }
.ws-pl-atalhos dd { margin: 0; color: var(--ws-muted); }

.ws-pl-externo {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px 6px 12px;
    margin-bottom: 12px;
    border: 1px solid color-mix(in srgb, var(--sigo-tom-marca) 35%, var(--sigo-border));
    border-radius: 10px;
    font-size: 0.8125rem;
    color: var(--sigo-tom-marca-tinta);
    background: color-mix(in srgb, var(--sigo-tom-marca) 7%, var(--sigo-surface));
}
.ws-pl-externo .mud-icon-root { font-size: 18px; }

.ws-pl-progresso { position: absolute; left: 0; right: 0; top: -6px; }

/* ── Celular: um estágio por vez (abas) — arrastar entre colunas dá lugar ao "Mover para". ── */
.ws-pl-mobile-tabs { display: none; }

@media (max-width: 600px) {
    .ws-pl-mobile-tabs {
        display: flex;
        gap: 6px;
        overflow-x: auto;
        padding-bottom: 8px;
        margin-bottom: 4px;
        scrollbar-width: none;
    }
    .ws-pl-mobile-tab {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        flex-shrink: 0;
        padding: 6px 12px;
        border: 1px solid var(--sigo-border);
        border-bottom: 3px solid var(--ws-pipeline-accent, var(--sigo-border));
        border-radius: 10px;
        background: var(--sigo-surface);
        font: inherit;
        font-size: 0.8125rem;
        font-weight: 600;
        color: var(--ws-text);
    }
    .ws-pl-mobile-tab-ativa { background: var(--sigo-hover-bg); }
    .ws-pl-mobile-tab-count { font-size: 0.6875rem; color: var(--ws-muted); }

    .ws-pipeline-board > .ws-pipeline-column:not(.ws-pipeline-column--foco) { display: none; }
    .ws-pipeline-board > .ws-pipeline-column,
    .ws-pipeline-board > .ws-pipeline-column--recolhida {
        flex: 1 1 100%;
        min-width: 0;
        max-width: none;
        max-height: none;
    }
    .ws-pipeline-column--recolhida > .mud-drop-item { display: block; }
    .ws-pipeline-column-toggle { display: none; }
    .ws-pl-busca { max-width: none; flex-basis: 100%; }
    .ws-pl-kbd { display: none; }
}

/* ── Painel lateral do Lead (LeadPainelLateral.razor) ── */
/* Camada: abaixo dos diálogos (WebsideTheme ZIndex.Dialog = 1300) e acima da barra superior/menu (1100/1200) —
   toda janela aberta pelo painel (Registrar ação, Editar, Apoio, Mover…) vem para a frente e, ao fechar, volta
   ao painel. Antes ficava em 1300/1301, na mesma camada ou acima das janelas. */
.ws-pl-painel-fundo {
    position: fixed;
    inset: 0;
    z-index: 1290;
    background: rgba(15, 20, 32, 0.32);
    animation: ws-pl-fade .15s ease;
}

.ws-pl-painel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1291;
    display: flex;
    flex-direction: column;
    width: min(440px, 100vw);
    background: var(--sigo-surface);
    border-left: 1px solid var(--sigo-border);
    box-shadow: var(--sigo-shadow-lg);
    animation: ws-pl-slide .18s ease;
}

@keyframes ws-pl-fade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes ws-pl-slide { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    .ws-pl-painel, .ws-pl-painel-fundo { animation: none; }
}

.ws-pl-painel-cab {
    padding: 0 16px 14px;
    border-bottom: 1px solid var(--sigo-border);
}
.ws-pl-painel-cab-accent {
    height: 4px;
    margin: 0 -16px 14px;
    background: var(--ws-pipeline-accent, var(--sigo-navy-mid));
}
.ws-pl-painel-cab-linha { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.ws-pl-painel-cab-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ws-pl-painel-estagio {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ws-muted);
}
.ws-pl-painel-titulo {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--sigo-text);
    overflow-wrap: anywhere;
}
.ws-pl-painel-sub { font-size: 0.8125rem; color: var(--ws-muted); }
.ws-pl-painel-acoes-rapidas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ws-pl-painel-whatsapp { color: var(--sigo-green) !important; }
.ws-pl-painel-whatsapp svg { width: 14px; height: 14px; margin-right: 6px; }

.ws-pl-painel-corpo {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 4px 16px 16px;
}

.ws-pl-painel-secao {
    padding: 14px 0;
    border-bottom: 1px solid var(--sigo-border);
}
.ws-pl-painel-secao:last-child { border-bottom: none; }

.ws-pl-painel-h3 {
    margin: 0 0 8px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ws-muted);
}
.ws-pl-painel-h3-linha { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ws-pl-painel-h3-linha .ws-pl-painel-h3 { margin-bottom: 6px; }
.ws-pl-painel-pct { font-size: 0.8125rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.ws-pl-painel-sinais { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ws-pl-sinal {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border: 1px solid var(--sigo-border);
    border-radius: 10px;
}
.ws-pl-sinal.ws-tom-critico,
.ws-pl-sinal.ws-tom-atencao {
    border-color: color-mix(in srgb, var(--tom) 45%, var(--sigo-border));
    background: color-mix(in srgb, var(--tom) 7%, var(--sigo-surface));
}
.ws-pl-sinal-rotulo { display: inline-flex; align-items: center; gap: 4px; font-size: 0.6875rem; font-weight: 600; color: var(--ws-muted); }
.ws-pl-sinal-rotulo .material-symbols-outlined { font-size: 14px; }
.ws-pl-sinal-valor { font-size: 1rem; font-weight: 700; color: var(--sigo-text); }
.ws-tom-critico > .ws-pl-sinal-valor,
.ws-tom-atencao > .ws-pl-sinal-valor { color: var(--tom-tinta); }
.ws-pl-sinal-ctx { font-size: 0.6875rem; color: var(--ws-muted); }

.ws-pl-painel-aviso {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 0.8125rem;
    color: var(--tom-tinta);
    background: color-mix(in srgb, var(--tom) 9%, var(--sigo-surface));
}
.ws-pl-painel-aviso .mud-icon-root { font-size: 18px; }

.ws-pl-painel-dados {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 14px;
    margin: 0;
    font-size: 0.8125rem;
}
.ws-pl-painel-dados dt { color: var(--ws-muted); }
.ws-pl-painel-dados dd { margin: 0; color: var(--sigo-text); overflow-wrap: anywhere; }
.ws-pl-painel-dados a { color: var(--sigo-tom-marca-tinta); }

.ws-pl-painel-badge {
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 0.625rem;
    font-weight: 700;
    color: var(--sigo-tom-atencao-tinta);
    background: color-mix(in srgb, var(--sigo-tom-atencao) 18%, var(--sigo-surface));
}

.ws-pl-painel-mover { display: flex; flex-wrap: wrap; gap: 6px; }
.ws-pl-mover-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid var(--sigo-border);
    border-radius: 999px;
    background: var(--sigo-surface);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--sigo-text-body);
    cursor: pointer;
}
.ws-pl-mover-chip:hover:not(:disabled),
.ws-pl-mover-chip:focus-visible {
    outline: none;
    border-color: var(--ws-pipeline-accent);
    background: color-mix(in srgb, var(--ws-pipeline-accent) 8%, var(--sigo-surface));
}
.ws-pl-mover-chip-atual { cursor: default; background: var(--sigo-hover-bg); }
.ws-pl-mover-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--ws-pipeline-accent); }
.ws-pl-mover-lock { font-size: 13px !important; color: var(--ws-muted); }

.ws-pl-painel-vazio { margin: 0; font-size: 0.8125rem; color: var(--ws-muted); }

.ws-pl-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ws-pl-timeline-item { display: grid; grid-template-columns: 28px 1fr; gap: 8px; }
.ws-pl-timeline-icone {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    font-size: 16px !important;
    color: var(--sigo-tom-marca-tinta);
    background: color-mix(in srgb, var(--sigo-tom-marca) 10%, var(--sigo-surface));
}
.ws-pl-timeline-auto .ws-pl-timeline-icone { color: var(--ws-muted); background: var(--sigo-bg); }
.ws-pl-timeline-topo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 8px; font-size: 0.8125rem; }
.ws-pl-timeline-topo span { font-size: 0.6875rem; color: var(--ws-muted); }
.ws-pl-timeline-desc {
    margin: 2px 0 0;
    font-size: 0.75rem;
    color: var(--sigo-text-body);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ws-pl-painel-rodape {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid var(--sigo-border);
}

/* Sugestões de motivo (LeadMotivoPerdaDialog) — mesmas pílulas dos filtros. */
.ws-pl-motivos { display: flex; flex-wrap: wrap; gap: 6px; }
.ws-pl-motivos .ws-pl-pill { padding-right: 10px; }

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 12px;
    top: 10px;
}

/* ── Toolbar executiva de listagem (piloto: ClientesIndex, 2026-09-23) ──────
   Barra de busca compacta numa linha só (busca + filtros integrados + ações),
   resumo de resultados abaixo e badge de Estágio como pílula colorida — layout
   fornecido pelo usuário (mockup Tailwind), adaptado aos tokens --sigo-* (sem
   introduzir Tailwind no projeto) para funcionar nos dois temas. Pensado pra
   ser reaproveitado quando esse padrão rolar pras demais telas de listagem. */
/* MudSelect com largura fixa numa linha flex (barras de filtro das listagens: Ativos/Inativos/Todos,
   Estágio, Grupo, Tipo…): o MudSelect gera DUAS camadas — o Style="width:…" vai só na interna
   (.mud-input-control), e a externa (.mud-select) tem flex-grow:1 no CSS do MudBlazor, então cresce e deixa
   um vão vazio ao lado do campo. Se a camada interna tem largura fixa (width/max-width no style), a externa
   não cresce. Seletores sem largura definida (ou só com min-width) continuam ocupando o espaço, como antes. */
.mud-select:has(> .mud-input-control:is([style*="max-width"], [style^="width"], [style*=";width"], [style*="; width"])) {
    flex-grow: 0;
}

.ws-toggle-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border: 1px solid var(--sigo-border);
    border-radius: 8px;
    background: var(--sigo-bg);
    cursor: pointer;
    user-select: none;
    transition: background-color .15s ease;
}

.ws-toggle-chip:hover {
    background: var(--sigo-hover-bg);
}

.ws-toggle-chip .mud-checkbox {
    padding: 0;
}

.ws-toggle-chip span {
    font-size: .75rem;
    font-weight: 600;
    color: var(--sigo-text-body);
    white-space: nowrap;
}

.ws-results-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 2px;
    font-size: .75rem;
    color: var(--sigo-muted);
}

.ws-results-bar strong {
    color: var(--sigo-text);
    font-weight: 600;
}

.ws-results-bar .ws-results-sep {
    color: var(--sigo-border);
}

.ws-results-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--sigo-surface);
    border: 1px solid var(--sigo-border);
    padding: 2px 8px;
    border-radius: 6px;
    font-size: .6875rem;
    color: var(--sigo-text-body);
}

.ws-estagio-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 9999px;
    font-size: .75rem;
    font-weight: 600;
    border: 1px solid transparent;
    white-space: nowrap;
}

.ws-estagio-badge .ws-estagio-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ── Layout de registro / formulário (2026-09-23, piloto em Grupo Econômico) ──
   Cabeçalho com identidade (ícone + título + badges + ações), grade 70/30 com
   cards de seção à esquerda e resumo (métricas, auditoria, atalhos) à direita,
   barra de ações fixa no rodapé. Mockup Tailwind do usuário traduzido para os
   tokens --sigo-* (claro/escuro), sem Tailwind no projeto. */
/* Tom de destaque da janela de registro — global para o WsRecordHeader funcionar também fora do WsRecordPage */
:root {
    --ws-record-accent: #2da0a8;
}

.ws-record-page {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ws-record-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--sigo-border);
}

/* WsRecordHeader usado sozinho (fora do WsRecordPage): espaço próprio até o conteúdo; dentro da página,
   o gap do .ws-record-page já faz esse papel. */
.ws-record-header {
    margin-bottom: 20px;
}

.ws-record-page > .ws-record-header {
    margin-bottom: 0;
}

.ws-record-identity {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.ws-record-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--sigo-icon-grad);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: var(--sigo-shadow-lg);
}

.ws-record-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
}

.ws-record-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--sigo-text);
    /* Nome do registro na edição pode ser longo: uma linha só, com reticências, sem empurrar as ações. */
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ws-record-subtitle {
    margin: 2px 0 0;
    font-size: .875rem;
    color: var(--sigo-muted);
}

.ws-record-code,
.ws-record-summary-code {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: .75rem;
    color: var(--sigo-muted);
}

.ws-record-code {
    padding: 2px 10px;
    border-radius: 6px;
    background: var(--sigo-bg);
    border: 1px solid var(--sigo-border);
}

.ws-record-tag {
    padding: 2px 10px;
    border-radius: 6px;
    font-size: .75rem;
    font-weight: 600;
    color: var(--ws-record-accent);
    background: color-mix(in srgb, var(--ws-record-accent) 10%, var(--sigo-surface));
    border: 1px solid color-mix(in srgb, var(--ws-record-accent) 25%, transparent);
}

.ws-record-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 12px;
    border-radius: 9999px;
    font-size: .75rem;
    font-weight: 600;
    border: 1px solid transparent;
}

.ws-record-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.ws-record-status--ativo {
    color: var(--sigo-green);
    background: color-mix(in srgb, var(--sigo-green) 10%, var(--sigo-surface));
    border-color: color-mix(in srgb, var(--sigo-green) 30%, transparent);
}

.ws-record-status--ativo .ws-record-status-dot {
    animation: ws-record-pulse 2s ease-in-out infinite;
}

.ws-record-status--inativo {
    color: var(--sigo-muted);
    background: var(--sigo-bg);
    border-color: var(--sigo-border);
}

@keyframes ws-record-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .35; }
}

.ws-record-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ws-record-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
}

@media (min-width: 1200px) {
    .ws-record-grid {
        grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
    }
}

/* Dois cards lado a lado (WsRecordColumns — ex.: abas de Clientes). Decide pela LARGURA DA COLUNA
   principal (container query em .ws-record-main), não da tela: com a coluna de resumo ao lado (70/30),
   dois cards só cabem quando sobra espaço de verdade. */
@container (min-width: 1000px) {
    .ws-record-grid--half {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }
}

/* Cards empilhados (WsRecordStack), em qualquer largura */
.ws-record-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Linha de tabela inativa/cancelada (ex.: produto cancelado no modal de Produtos Contratados) */
.ws-record-row-off td {
    opacity: .65;
}

/* Card denso (formulários com abas, WsFormAbas): menos respiro. */
.ws-record-card--dense {
    padding: 18px 20px;
}

.ws-record-card--dense .ws-record-card-header {
    padding-bottom: 12px;
    margin-bottom: 14px;
}

/* Componentes antigos baseados em .ws-field (ex.: CnpjLookup, CepLookup) dentro de um WsRecordCard ganham o
   mesmo visual do WsRecordField: rótulo = .ws-record-label, sem a margem própria (a MudGrid já espaça). */
.ws-record-card .ws-field {
    gap: 0;
}

/* Na MudGrid o espaçamento vem da grade; campos empilhados soltos (formulários antigos via WsSubBlock)
   mantêm a margem própria, menos o último do card. */
.ws-record-card .mud-grid-item > .ws-field,
.ws-record-card .ws-field:last-child {
    margin-bottom: 0;
}

/* Sub-blocos (WsSubBlock → WsRecordCard) em sequência dentro de uma aba */
.ws-subblock-card:not(:first-child),
.ws-subblock-card + * {
    margin-top: 16px;
}

.ws-record-card .ws-field-label {
    display: inline-block;
    margin-bottom: 6px;
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--sigo-text-body);
}

/* Estado vazio dentro de um WsRecordCard (ex.: Produtos Contratados sem itens) */
.ws-record-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 28px 16px;
    border: 1px dashed var(--sigo-border);
    border-radius: 8px;
    text-align: center;
    font-size: .875rem;
    color: var(--sigo-text-body);
}

.ws-record-empty .mud-icon-root {
    font-size: 1.75rem !important;
    color: var(--sigo-muted-light);
}

.ws-record-empty-hint {
    font-size: .75rem;
    color: var(--sigo-muted);
}

/* Editar Filial — card "Identidade Visual" da coluna de resumo: prévia da logo + upload */
.ws-filial-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 96px;
    padding: 16px;
    border: 1px solid var(--sigo-border);
    border-radius: 8px;
    background: var(--sigo-bg);
}

.ws-filial-logo img {
    display: block;
    max-width: 100%;
    max-height: 72px;
    object-fit: contain;
}

.ws-filial-logo-upload {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

.ws-filial-logo-upload input[type="file"] {
    flex: 1;
    min-width: 0;
    padding: 6px;
    border: 1px dashed var(--sigo-border);
    border-radius: 8px;
    font-size: .8rem;
    color: var(--sigo-text-body);
    background: var(--sigo-surface);
    cursor: pointer;
}

.ws-filial-logo-upload input[type="file"]:hover {
    border-color: var(--sigo-accent-strong);
    background: var(--sigo-hover-bg);
}

/* Tabela dentro de um WsRecordCard: sem sombra/borda própria (o card já emoldura) */
.ws-record-table.mud-table,
.ws-record-table .mud-table-container {
    background: transparent;
    box-shadow: none;
}

/* Etiqueta "Somente consulta" no cabeçalho de um WsRecordCard sem edição */
.ws-record-readonly {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 9999px;
    font-size: .6875rem;
    font-weight: 600;
    color: var(--sigo-muted);
    background: var(--sigo-bg);
    border: 1px solid var(--sigo-border);
    white-space: nowrap;
}

.ws-record-readonly .mud-icon-root {
    font-size: .9rem !important;
}

/* Métrica ocupando a linha inteira da grade de 2 colunas (ex.: "Valor ativo" no card lateral) */
.ws-record-metric--full {
    grid-column: 1 / -1;
}

/* Lista compacta dentro de um WsRecordCard estreito (coluna de resumo) — substitui tabelas largas.
   Ex.: Produtos Contratados em Editar Cliente. Item "--off" = inativo/cancelado (esmaecido). */
.ws-record-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 560px;
    overflow-y: auto;
    padding-right: 2px;
}

.ws-record-list-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--sigo-border);
    background: var(--sigo-surface);
    transition: background-color .15s ease;
}

.ws-record-list-item:hover {
    background: var(--sigo-bg);
}

.ws-record-list-item--off {
    opacity: .7;
}

.ws-record-list-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.ws-record-list-title {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--sigo-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ws-record-list-value {
    font-size: .8125rem;
    font-weight: 700;
    color: var(--sigo-text);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.ws-record-list-meta {
    font-size: .6875rem;
    color: var(--sigo-muted);
}

.ws-record-list-bottom {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
}

.ws-record-list-dates {
    font-size: .6875rem;
    color: var(--sigo-muted);
}

/* Linha "Adicionar produto" e etiquetas — hoje usadas pelo modal Packs de Produtos (PacksProdutoDialog) */
.ws-assoc {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ws-assoc-add {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.ws-assoc-add-field {
    flex: 1;
    min-width: 0;
}

.ws-assoc-pendente {
    font-size: .75rem;
    font-weight: 600;
    color: var(--mud-palette-warning);
}

.ws-assoc-novo {
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: 9999px;
    font-size: .625rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--ws-record-accent);
    background: color-mix(in srgb, var(--ws-record-accent) 12%, var(--sigo-surface));
}

.ws-assoc-bonificado {
    color: var(--mud-palette-warning);
    background: color-mix(in srgb, var(--mud-palette-warning) 12%, var(--sigo-surface));
}

.ws-assoc-bonificados {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 0 4px 12px;
    margin-left: 4px;
    border-left: 1px solid var(--sigo-border);
    white-space: nowrap;
}

/* Packs de Produtos (2026-10-26) — PacksProdutoDialog (lista + edição), SelecionarPackDialog ("Adicionar Pack" do
   Orçamento/Pedido) e card do Editar Produto. A linha "Adicionar produto" e as etiquetas reaproveitam .ws-assoc-*. */
.ws-pack {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 20px;
    min-height: 460px;
}

.ws-pack-lista {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-right: 20px;
    border-right: 1px solid var(--sigo-border);
    min-width: 0;
}
.ws-pack-lista ul {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 460px;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}
/* a busca (mud-input-control) cresceria no eixo da coluna e abriria um vão na lista */
.ws-pack-lista > *, .ws-pack-lista .mud-input-control { flex: 0 0 auto; }
.ws-pack-inativos { display: flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--sigo-muted); cursor: pointer; }
.ws-pack-lista-vazia { padding: 12px 4px; font-size: .8125rem; color: var(--sigo-muted); }
.ws-pack-lista-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    font: inherit;
    text-align: left;
    color: inherit;
    cursor: pointer;
}
.ws-pack-lista-item:hover { background: var(--sigo-hover-bg); }
.ws-pack-lista-item:focus-visible { outline: none; box-shadow: var(--sigo-focus-ring); }
.ws-pack-lista-item strong { font-size: .875rem; color: var(--sigo-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-pack-lista-item small  { font-size: .72rem; color: var(--sigo-muted); }
.ws-pack-lista-item--sel {
    border-color: color-mix(in srgb, var(--sigo-tom-marca) 45%, var(--sigo-border));
    background: color-mix(in srgb, var(--sigo-tom-marca) 10%, var(--sigo-surface));
}
.ws-pack-lista-item--sel strong { color: var(--sigo-tom-marca-tinta); }
.ws-pack-lista-item--inativo strong { color: var(--sigo-muted); }

.ws-pack-edicao { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ws-pack-vazio { margin: auto 0; }
.ws-pack-cabecalho { display: flex; align-items: center; gap: 10px; }
.ws-pack-campos {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 10px 16px;
}
.ws-pack-descricao { grid-column: 1 / -1; }
.ws-pack-ativo { display: flex; align-items: center; gap: 6px; padding-bottom: 6px; font-size: .8125rem; color: var(--sigo-text-body); white-space: nowrap; }
.ws-pack-qtd-add { width: 96px; flex-shrink: 0; }
.ws-pack-opcao { display: flex; flex-direction: column; line-height: 1.3; }
.ws-pack-opcao small { font-size: .72rem; color: var(--sigo-muted); }
.ws-pack-dica-ordem { font-size: .75rem; color: var(--sigo-muted); }

.ws-pack-tabela-scroll { max-height: 340px; overflow: auto; border: 1px solid var(--sigo-border); border-radius: 10px; }
.ws-pack-tabela { width: 100%; border-collapse: collapse; font-size: .8125rem; }
.ws-pack-tabela th, .ws-pack-tabela td { padding: 6px 10px; border-bottom: 1px solid var(--sigo-border); text-align: left; vertical-align: middle; }
.ws-pack-tabela thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    font-size: .72rem;
    font-weight: 600;
    color: var(--sigo-muted);
    background: var(--sigo-surface);
    white-space: nowrap;
}
.ws-pack-tabela tbody tr:last-child > td { border-bottom: none; }
.ws-pack-tabela tbody tr:hover > td { background: var(--sigo-hover-bg); }
.ws-pack-tabela .ws-pack-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ws-pack-col-ordem { width: 1%; padding-right: 0 !important; }
.ws-pack-ordem { display: inline-flex; flex-direction: column; }
.ws-pack-ordem button {
    display: flex;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--sigo-muted);
    cursor: pointer;
}
.ws-pack-ordem button .mud-icon-root { font-size: 18px; }
.ws-pack-ordem button:hover:not(:disabled) { color: var(--sigo-tom-marca-tinta); background: var(--sigo-hover-bg); }
.ws-pack-ordem button:focus-visible { outline: none; box-shadow: var(--sigo-focus-ring); }
.ws-pack-ordem button:disabled { opacity: .3; cursor: default; }
.ws-pack-prod { color: var(--sigo-text); }
.ws-pack-tags { display: inline-flex; flex-wrap: wrap; align-items: center; }
.ws-pack-cod { margin-left: 6px; font-size: .7rem; color: var(--sigo-muted); font-variant-numeric: tabular-nums; }
.ws-pack-tag-inativo { color: var(--sigo-muted); background: var(--sigo-bg); }
.ws-pack-linha--inativa .ws-pack-prod { color: var(--sigo-muted); text-decoration: line-through; }
.ws-pack-qtd { width: 92px; margin: 0 !important; margin-left: auto !important; }
.ws-pack-acoes { width: 1%; text-align: right !important; }

.ws-pack-resumo {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 16px;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--sigo-bg);
}
.ws-pack-resumo-rotulo { font-size: .75rem; font-weight: 600; color: var(--sigo-text-body); }
.ws-pack-resumo-total { font-size: 1rem; font-weight: 700; color: var(--sigo-text); font-variant-numeric: tabular-nums; }
.ws-pack-resumo-total small { margin-right: 4px; font-size: .72rem; font-weight: 500; color: var(--sigo-muted); }
.ws-pack-resumo-nota { flex-basis: 100%; font-size: .72rem; color: var(--sigo-muted); }

.ws-pack-divisor { width: 1px; height: 24px; margin: 0 4px; background: var(--sigo-border); }

/* Seleção de pack no Orçamento/Pedido */
.ws-pack-sel { display: flex; flex-direction: column; gap: 12px; }
.ws-pack-sel-lista { display: flex; flex-direction: column; gap: 8px; max-height: 56vh; overflow-y: auto; padding: 2px; }
.ws-pack-sel-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--sigo-border);
    border-radius: 10px;
    background: var(--sigo-surface);
    font: inherit;
    text-align: left;
    color: inherit;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.ws-pack-sel-card:hover { border-color: color-mix(in srgb, var(--sigo-tom-marca) 40%, var(--sigo-border)); }
.ws-pack-sel-card:focus-visible { outline: none; box-shadow: var(--sigo-focus-ring); }
.ws-pack-sel-card--sel {
    border-color: var(--sigo-tom-marca);
    background: color-mix(in srgb, var(--sigo-tom-marca) 6%, var(--sigo-surface));
}
.ws-pack-sel-topo { display: flex; align-items: center; gap: 10px; }
.ws-pack-sel-topo strong { flex: 1; min-width: 0; font-size: .9375rem; color: var(--sigo-text); }
.ws-pack-sel-radio {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border: 2px solid var(--sigo-muted-light);
    border-radius: 50%;
}
.ws-pack-sel-card--sel .ws-pack-sel-radio { border-color: var(--sigo-tom-marca); box-shadow: inset 0 0 0 3px var(--sigo-surface); background: var(--sigo-tom-marca); }
.ws-pack-sel-qtd { font-size: .75rem; color: var(--sigo-muted); white-space: nowrap; }
.ws-pack-sel-desc { font-size: .8125rem; color: var(--sigo-text-body); }
.ws-pack-sel-itens { display: flex; flex-wrap: wrap; gap: 4px; }
.ws-pack-chip {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: .72rem;
    color: var(--sigo-text-body);
    background: var(--sigo-bg);
}
.ws-pack-chip b { margin-right: 2px; color: var(--sigo-text); }
.ws-pack-chip--bonificado { color: var(--mud-palette-warning); background: color-mix(in srgb, var(--mud-palette-warning) 12%, var(--sigo-surface)); }
.ws-pack-chip--inativo { color: var(--sigo-muted); text-decoration: line-through; }
.ws-pack-sel-totais { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; font-size: .8125rem; font-weight: 600; color: var(--sigo-text); font-variant-numeric: tabular-nums; }
.ws-pack-sel-totais small { margin-right: 2px; font-weight: 400; color: var(--sigo-muted); }
.ws-pack-sel-extra { font-weight: 400; font-size: .75rem; color: var(--sigo-muted); }
.ws-pack-sel-aviso { color: var(--sigo-tom-atencao-tinta); }

/* Card "Packs de Produtos" do Editar Produto */
.ws-pack-card-vazio { font-size: .8125rem; color: var(--sigo-muted); }
.ws-pack-card-lista { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ws-pack-card-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--sigo-border);
    border-radius: 8px;
    background: var(--sigo-surface);
    font: inherit;
    text-align: left;
    color: inherit;
    cursor: pointer;
}
.ws-pack-card-item:hover { border-color: color-mix(in srgb, var(--sigo-tom-marca) 40%, var(--sigo-border)); }
.ws-pack-card-item:focus-visible { outline: none; box-shadow: var(--sigo-focus-ring); }
.ws-pack-card-item > span { display: flex; flex-direction: column; min-width: 0; }
.ws-pack-card-item strong { font-size: .8125rem; color: var(--sigo-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-pack-card-item small  { font-size: .72rem; color: var(--sigo-muted); }

@media (max-width: 960px) {
    .ws-pack { grid-template-columns: minmax(0, 1fr); }
    .ws-pack-lista { padding-right: 0; padding-bottom: 14px; border-right: none; border-bottom: 1px solid var(--sigo-border); }
    .ws-pack-lista ul { max-height: 200px; }
    .ws-assoc-add { flex-wrap: wrap; }
    .ws-assoc-bonificados { padding-left: 0; margin-left: 0; border-left: none; }
}
@media (max-width: 600px) {
    .ws-pack-campos { grid-template-columns: minmax(0, 1fr); }
    .ws-pack-ativo { padding-bottom: 0; white-space: normal; }
    .ws-pack .ws-assoc-add-field { flex: 1 1 100%; }
    .ws-pack-qtd-add { flex: 1 1 auto; }
    .ws-pack-dialog-acoes { flex-wrap: wrap; gap: 6px; }
    .ws-pack-dialog-acoes .ws-pack-divisor { display: none; }
}

.ws-record-cancelado {
    color: var(--mud-palette-error);
    font-weight: 600;
}

.ws-record-toggle--compact {
    margin-top: 14px;
    padding: 10px 14px;
}

.ws-record-main,
.ws-record-side {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}

/* Contêiner das container queries de .ws-record-grid--half (ver acima) */
.ws-record-main {
    container-type: inline-size;
}

/* WsFormAbas (um MudContainer) como card da coluna principal: anula o padding global de .mud-container
   (sigo-overrides.css, 32px em cima/embaixo com !important), senão o card das abas começa 32px abaixo do
   card vizinho da coluna de resumo (ex.: Produtos Contratados em Editar Cliente). */
.ws-record-main > .ws-form-abas,
.ws-record-side > .ws-form-abas,
.ws-record-main > .ws-fieldset-bloqueio > .ws-form-abas { /* abas dentro do fieldset de bloqueio (Pedido com contrato, 2026-10-18) */
    padding: 0 !important;
}

/* Salvar por aba (WsRecordSecaoSalvar): fim do conteúdo da aba, à direita, separado por uma linha */
.ws-record-secao-salvar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px dashed var(--sigo-border);
}

.ws-record-secao-dica {
    font-size: .6875rem;
    color: var(--sigo-muted-light);
}

.ws-record-card {
    background: var(--sigo-surface);
    border: 1px solid var(--sigo-border);
    border-radius: 12px;
    box-shadow: var(--sigo-shadow);
    padding: 24px;
}

.ws-record-card--compact {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ws-record-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 16px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--sigo-border);
}

.ws-record-card-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--sigo-bg);
    color: var(--sigo-text);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ws-record-card-icon--accent {
    color: var(--ws-record-accent);
    background: color-mix(in srgb, var(--ws-record-accent) 12%, var(--sigo-surface));
}

.ws-record-card-header-extra {
    margin-left: auto;
}

/* Cabeçalho do card quebra linha quando o HeaderExtra não cabe ao lado do título (ex.: chaves de cálculo) */
.ws-record-card-header {
    flex-wrap: wrap;
}

/* Título + subtítulo sempre à direita do ícone: ocupa o espaço restante da linha e quebra o próprio
   texto, em vez de o bloco inteiro descer para baixo do ícone quando o subtítulo é longo (flex-wrap
   acima). A base de 220px garante que, sem espaço, quem desce de linha é o HeaderExtra — não o título. */
.ws-record-card-heading {
    flex: 1 1 220px;
    min-width: 0;
}

/* Produto › Precificação: fundo próprio em cada coluna (Custo navy / Venda verde, mesmos tons de
   .ws-preco-bloco) para diferenciar os dois lados. A borda transparente + background-clip abre um
   respiro entre as colunas sem mexer no padding da MudGrid. */
.ws-preco-coluna {
    border: 6px solid transparent;
    border-radius: 14px;
    background-clip: padding-box;
}

.ws-preco-coluna-custo { background-color: rgba(21, 35, 65, 0.04); }
.ws-preco-coluna-venda { background-color: rgba(0, 166, 96, 0.05); }

[data-theme="dark"] .ws-preco-coluna-custo { background-color: rgba(47, 211, 255, 0.06); }
[data-theme="dark"] .ws-preco-coluna-venda { background-color: rgba(0, 166, 96, 0.08); }

.ws-record-card-title {
    margin: 0 0 2px;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--sigo-text);
}

.ws-record-card-subtitle {
    font-size: .75rem;
    color: var(--sigo-muted);
}

/* Rótulo do WsRecordField: rótulo, extras (bolinha, ajuda) à esquerda; contador empurrado à direita */
.ws-record-label-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ws-record-label {
    display: inline-block;
    margin-bottom: 6px;
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--sigo-text-body);
}

.ws-record-counter {
    margin-left: auto;
    margin-bottom: 6px;
    font-size: .6875rem;
    color: var(--sigo-muted-light);
}

.ws-record-dot {
    width: 8px;
    height: 8px;
    margin-bottom: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ws-record-help {
    margin-bottom: 6px;
    color: var(--sigo-muted-light);
    cursor: help;
    font-size: 1rem !important;
}

.ws-record-mono input {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

.ws-record-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px;
    border-radius: 8px;
    border: 1px solid var(--sigo-border);
    background: color-mix(in srgb, var(--sigo-bg) 50%, var(--sigo-surface));
    transition: background-color .15s ease;
}

/* Vários liga/desliga seguidos no mesmo card, ou depois de campos */
.ws-record-toggle + .ws-record-toggle,
.ws-field + .ws-record-toggle,
.mud-grid + .ws-record-toggle:not(.ws-record-toggle--compact) {
    margin-top: 10px;
}

.ws-record-toggle:hover {
    background: var(--sigo-bg);
}

.ws-record-toggle-title {
    display: block;
    font-size: .875rem;
    font-weight: 600;
    color: var(--sigo-text);
}

.ws-record-toggle-desc {
    font-size: .75rem;
    color: var(--sigo-muted);
}

.ws-record-summary-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--sigo-border);
}

.ws-record-summary-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: .875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--sigo-text-body);
}

.ws-record-accent {
    color: var(--ws-record-accent);
}

.ws-record-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.ws-record-metric {
    display: flex;
    flex-direction: column;
    padding: 12px;
    border-radius: 8px;
    background: var(--sigo-bg);
    border: 1px solid var(--sigo-border);
}

.ws-record-metric-label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    font-size: .75rem;
    color: var(--sigo-muted);
}

.ws-record-metric-label .mud-icon-root {
    font-size: .875rem !important;
    color: var(--sigo-muted-light);
}

/* Grade mais larga (modal de Indicadores do Grupo Econômico) */
.ws-record-metrics--wide {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

.ws-record-metrics-note {
    margin-top: -8px;
}

.ws-record-metric--success .ws-record-metric-value { color: var(--sigo-green); }
.ws-record-metric--danger  .ws-record-metric-value { color: var(--mud-palette-error); }
.ws-record-metric--muted   .ws-record-metric-value { color: var(--sigo-muted); }

/* Modal de Indicadores (GrupoEconomicoIndicadoresDialog) */
.ws-ind {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-bottom: 4px;
}

.ws-ind-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ws-ind-section .ws-record-summary-title {
    padding-bottom: 8px;
    border-bottom: 1px solid var(--sigo-border);
}

/* ── Gráficos SVG (Components/Charts) ──────────────────────────────────────
   Paleta categórica de referência do guia de dataviz, validada (scripts/
   validate_palette.js) contra as superfícies do SIGO: claro #ffffff e escuro
   #171d2b — todos os checks PASS; no claro, slots 3/4/5 ficam < 3:1 de
   contraste, por isso a rosca sempre mostra legenda com valores. A cor segue a
   entidade (ex.: Tipo de Negócio → slot fixo), nunca a posição. */
:root {
    --viz-1: #2a78d6;
    --viz-2: #eb6834;
    --viz-3: #1baf7a;
    --viz-4: #eda100;
    --viz-5: #e87ba4;
    --viz-6: #008300;
    --viz-7: #4a3aa7;
    --viz-8: #e34948;
    --viz-neutral: #b4bcc9;
}

:root[data-theme="dark"] {
    --viz-1: #3987e5;
    --viz-2: #d95926;
    --viz-3: #199e70;
    --viz-4: #c98500;
    --viz-5: #d55181;
    --viz-6: #008300;
    --viz-7: #9085e9;
    --viz-8: #e66767;
    --viz-neutral: #4b5468;
}

.ws-viz {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.ws-viz-svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
}

.ws-viz-grid {
    stroke: var(--sigo-border);
    stroke-width: 1;
    opacity: .6;
}

.ws-viz-baseline {
    stroke: var(--sigo-border);
    stroke-width: 1;
}

.ws-viz-tick {
    font-size: 10.5px;
    fill: var(--sigo-muted);
    font-variant-numeric: tabular-nums;
}

.ws-viz-endlabel {
    font-size: 12px;
    font-weight: 700;
    fill: var(--sigo-text);
}

.ws-viz-band-bg {
    fill: var(--sigo-text);
    opacity: 0;
    transition: opacity .12s ease;
}

.ws-viz-band:hover .ws-viz-band-bg {
    opacity: .05;
}

.ws-viz-cross {
    stroke: var(--sigo-muted-light);
    stroke-width: 1;
    opacity: 0;
}

.ws-viz-band:hover .ws-viz-cross {
    opacity: 1;
}

/* Pontos: anel de 2px na cor da superfície (legíveis sobre a linha) */
.ws-viz-dot {
    stroke: var(--sigo-surface);
    stroke-width: 2;
}

.ws-viz-dot--hover {
    opacity: 0;
}

.ws-viz-band:hover .ws-viz-dot--hover {
    opacity: 1;
}

.ws-viz-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    font-size: .75rem;
    color: var(--sigo-text-body);
}

.ws-viz-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ws-viz-swatch {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex-shrink: 0;
    display: inline-block;
}

/* Rosca: separação de 2px entre fatias = traço na cor da superfície */
.ws-viz-donut {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px 24px;
}

.ws-viz-donut-svg {
    width: 180px;
    height: 180px;
    flex-shrink: 0;
}

.ws-viz-slice {
    stroke: var(--sigo-surface);
    stroke-width: 2;
    transition: opacity .12s ease;
}

.ws-viz-donut-svg:hover .ws-viz-slice {
    opacity: .55;
}

.ws-viz-donut-svg .ws-viz-slice:hover {
    opacity: 1;
}

.ws-viz-donut-total {
    font-size: 28px;
    font-weight: 700;
    fill: var(--sigo-text);
}

.ws-viz-donut-caption {
    font-size: 11px;
    fill: var(--sigo-muted);
}

.ws-viz-donut-legend {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-width: 200px;
}

.ws-viz-donut-legend li {
    display: grid;
    grid-template-columns: auto 1fr auto 44px;
    align-items: center;
    gap: 8px;
    font-size: .8125rem;
    color: var(--sigo-text-body);
}

.ws-viz-donut-value {
    font-weight: 600;
    color: var(--sigo-text);
    font-variant-numeric: tabular-nums;
}

.ws-viz-donut-pct {
    text-align: right;
    color: var(--sigo-muted);
    font-variant-numeric: tabular-nums;
}

/* ── Painel de Indicadores do Grupo Econômico ───────────────────────────── */
.ws-ind-dialog {
    background: var(--sigo-bg);
}

.ws-ind-context {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.ws-ind-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.ws-ind-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 9999px;
    font-size: .75rem;
    font-weight: 600;
    color: var(--sigo-text-body);
    background: var(--sigo-surface);
    border: 1px solid var(--sigo-border);
}

.ws-ind-chip .mud-icon-root { font-size: .95rem !important; }

.ws-ind-chip--ok {
    color: var(--sigo-green);
    border-color: color-mix(in srgb, var(--sigo-green) 30%, transparent);
    background: color-mix(in srgb, var(--sigo-green) 8%, var(--sigo-surface));
}

.ws-ind-chip--alerta {
    color: var(--mud-palette-error);
    border-color: color-mix(in srgb, var(--mud-palette-error) 30%, transparent);
    background: color-mix(in srgb, var(--mud-palette-error) 8%, var(--sigo-surface));
}

.ws-ind-sync {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .75rem;
    color: var(--sigo-muted);
}

.ws-ind-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.ws-ind-kpi {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 18px;
    border-radius: 12px;
    background: var(--sigo-surface);
    border: 1px solid var(--sigo-border);
    box-shadow: var(--sigo-shadow);
    transition: box-shadow .15s ease;
}

.ws-ind-kpi:hover { box-shadow: var(--sigo-shadow-lg); }

.ws-ind-kpi--alerta {
    border-color: color-mix(in srgb, var(--mud-palette-error) 35%, var(--sigo-border));
}

.ws-ind-kpi-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.ws-ind-kpi-label {
    font-size: .6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--sigo-muted);
}

.ws-ind-kpi-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--ws-record-accent, #2da0a8) 12%, var(--sigo-surface));
    color: var(--ws-record-accent, #2da0a8);
}

.ws-ind-kpi--alerta .ws-ind-kpi-icon {
    background: color-mix(in srgb, var(--mud-palette-error) 12%, var(--sigo-surface));
    color: var(--mud-palette-error);
}

.ws-ind-kpi-value {
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--sigo-text);
}

.ws-ind-kpi-hint {
    font-size: .75rem;
    color: var(--sigo-muted);
}

.ws-ind-warn { color: var(--mud-palette-warning-darken, var(--mud-palette-warning)); font-weight: 600; }

/* Meter: trilho = passo claro do mesmo tom do preenchimento */
.ws-ind-meter {
    height: 6px;
    border-radius: 9999px;
    background: color-mix(in srgb, var(--viz-1) 15%, var(--sigo-surface));
    overflow: hidden;
}

.ws-ind-meter-fill {
    height: 100%;
    border-radius: 9999px;
    background: var(--viz-1);
}

.ws-ind-meter-fill--ok    { background: var(--sigo-green); }
.ws-ind-meter-fill--aviso { background: var(--mud-palette-warning); }
.ws-ind-meter-fill--erro  { background: var(--mud-palette-error); }

.ws-ind-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}

@media (min-width: 960px) {
    .ws-ind-grid--2   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ws-ind-grid--mix { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}

.ws-ind-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px;
    border-radius: 12px;
    background: var(--sigo-surface);
    border: 1px solid var(--sigo-border);
    box-shadow: var(--sigo-shadow);
    min-width: 0;
}

.ws-ind-card--oportunidade {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--ws-record-accent, #2da0a8) 10%, var(--sigo-surface)) 0%,
        var(--sigo-surface) 70%);
}

.ws-ind-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.ws-ind-card-title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 2px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--sigo-text);
}

.ws-ind-card-sub {
    font-size: .75rem;
    color: var(--sigo-muted);
}

.ws-ind-delta {
    flex-shrink: 0;
    padding: 2px 10px;
    border-radius: 6px;
    font-size: .75rem;
    font-weight: 600;
    color: var(--sigo-text-body);
    background: var(--sigo-bg);
    white-space: nowrap;
}

.ws-ind-delta--up   { color: var(--sigo-green); background: color-mix(in srgb, var(--sigo-green) 10%, var(--sigo-surface)); }
.ws-ind-delta--down { color: var(--mud-palette-error); background: color-mix(in srgb, var(--mud-palette-error) 10%, var(--sigo-surface)); }

.ws-ind-note {
    font-size: .6875rem;
    color: var(--sigo-muted-light);
}

.ws-ind-subsection {
    margin: 4px 0 0;
}

.ws-ind-ufs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ws-ind-uf {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 12px;
    border-radius: 9999px;
    font-size: .75rem;
    color: var(--sigo-text-body);
    background: var(--sigo-bg);
    border: 1px solid var(--sigo-border);
}

.ws-ind-uf strong { color: var(--sigo-text); }
.ws-ind-uf--muted { color: var(--sigo-muted); }

.ws-ind-mix {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ws-ind-mix-top {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
    font-size: .8125rem;
}

.ws-ind-mix-name {
    font-weight: 600;
    color: var(--sigo-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ws-ind-mix-value {
    color: var(--sigo-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.ws-ind-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ws-ind-list li {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--sigo-surface);
    border: 1px solid var(--sigo-border);
    font-size: .8125rem;
    color: var(--sigo-text);
}

.ws-ind-list li span {
    font-size: .75rem;
    color: var(--sigo-muted);
}

.ws-ind-alerts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 10px;
}

.ws-ind-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: .8125rem;
    color: var(--sigo-text-body);
    background: var(--sigo-bg);
    border-left: 3px solid var(--sigo-border);
}

.ws-ind-alert strong { color: var(--sigo-text); }
.ws-ind-alert .mud-icon-root { margin-top: 1px; flex-shrink: 0; }

.ws-ind-alert--erro  { border-left-color: var(--mud-palette-error); }
.ws-ind-alert--erro  .mud-icon-root { color: var(--mud-palette-error); }
.ws-ind-alert--aviso { border-left-color: var(--mud-palette-warning); }
.ws-ind-alert--aviso .mud-icon-root { color: var(--mud-palette-warning); }
.ws-ind-alert--info  { border-left-color: var(--mud-palette-info); }
.ws-ind-alert--info  .mud-icon-root { color: var(--mud-palette-info); }
.ws-ind-alert--ok    { border-left-color: var(--sigo-green); }
.ws-ind-alert--ok    .mud-icon-root { color: var(--sigo-green); }

.ws-ind-razao {
    display: block;
    font-weight: 600;
    color: var(--sigo-text);
}

.ws-ind-cnpj {
    display: block;
    font-size: .6875rem;
    color: var(--sigo-muted);
    font-variant-numeric: tabular-nums;
}

.ws-ind-segmento {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.ws-ind-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 9999px;
    font-size: .6875rem;
    font-weight: 600;
    white-space: nowrap;
}

.ws-ind-status .mud-icon-root { font-size: .9rem !important; }
.ws-ind-status--ok     { color: var(--sigo-green); background: color-mix(in srgb, var(--sigo-green) 10%, var(--sigo-surface)); }
.ws-ind-status--alerta { color: var(--mud-palette-error); background: color-mix(in srgb, var(--mud-palette-error) 10%, var(--sigo-surface)); }
.ws-ind-status--neutro { color: var(--sigo-muted); background: var(--sigo-bg); }

.ws-ind-footer-note {
    flex: 1;
    padding-left: 8px;
    font-size: .6875rem;
    color: var(--sigo-muted-light);
}

/* ── Indicadores do Grupo Econômico — redesenho 2026-10 (ws-gi-*) ─────────
   Cabeçalho com Pulso do grupo, navegação fixa, KpiCard/WsMedidor (§23),
   barras/mapa/alertas que filtram a tabela de empresas. Cor só com
   significado: marca no normal, tons de status sempre com ícone + texto. */
.ws-gi { gap: 28px; }

.ws-gi-secao {
    display: flex;
    flex-direction: column;
    gap: 16px;
    scroll-margin-top: 64px;
}

.ws-gi-secao-titulo {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin: 0;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--sigo-text-body);
}
.ws-gi-secao-titulo small {
    font-size: .75rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--sigo-muted);
}

/* Cabeçalho: frase-retrato + Pulso */
.ws-gi-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, auto);
    align-items: center;
    gap: 20px 32px;
    padding: 24px 26px;
    border: 1px solid var(--sigo-border);
    border-radius: 16px;
    background:
        radial-gradient(120% 160% at 0% 0%, color-mix(in srgb, var(--sigo-tom-marca) 14%, var(--sigo-surface)) 0%, var(--sigo-surface) 58%);
    box-shadow: var(--sigo-shadow);
    overflow: hidden;
    isolation: isolate;
}
.ws-gi-hero::after {
    content: '';
    position: absolute;
    inset: 0 0 0 45%;
    z-index: -1;
    background-image: radial-gradient(color-mix(in srgb, var(--sigo-tom-marca) 22%, transparent) 1px, transparent 1.5px);
    background-size: 14px 14px;
    -webkit-mask-image: linear-gradient(to left, #000 0%, transparent 85%);
            mask-image: linear-gradient(to left, #000 0%, transparent 85%);
    pointer-events: none;
}

.ws-gi-hero-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.ws-gi-hero-tag { font-size: .75rem; font-weight: 600; color: var(--sigo-muted); }

.ws-gi-hero-frase {
    max-width: 62ch;
    margin: 0;
    font-size: 1.125rem;
    line-height: 1.55;
    color: var(--sigo-text-body);
}
.ws-gi-hero-frase strong { font-weight: 700; color: var(--sigo-text); white-space: nowrap; }

.ws-gi-pulso { display: flex; flex-direction: column; gap: 6px; }
.ws-gi-pulso-titulo {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--sigo-muted);
}
.ws-gi-pulso-titulo .mud-icon-root { font-size: 16px !important; color: var(--sigo-tom-marca-tinta); }

.ws-gi-pulso-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px 6px 6px;
    border: 1px solid var(--sigo-border);
    border-radius: 10px;
    background: var(--sigo-surface);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.ws-gi-pulso-item:hover {
    border-color: color-mix(in srgb, var(--tom) 55%, var(--sigo-border));
    box-shadow: var(--sigo-shadow);
    transform: translateX(-2px);
}
.ws-gi-pulso-item:focus-visible { outline: none; box-shadow: var(--sigo-focus-ring); }
.ws-gi-pulso-ic {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--tom) 14%, var(--sigo-surface));
}
.ws-gi-pulso-ic .mud-icon-root { font-size: 18px; color: var(--tom-tinta); }
.ws-gi-pulso-txt { display: flex; flex-direction: column; line-height: 1.25; }
.ws-gi-pulso-txt small  { font-size: .6875rem; color: var(--sigo-muted); }
.ws-gi-pulso-txt strong { font-size: .8125rem; color: var(--sigo-text); }

/* Navegação: reaproveita .ws-dcob-nav (fixa no topo do conteúdo do diálogo) */
.ws-gi-nav { overflow-x: auto; scrollbar-width: none; }
.ws-gi-nav::-webkit-scrollbar { display: none; }
.ws-gi-nav button { display: inline-flex; align-items: center; gap: 6px; }
.ws-gi-nav-badge {
    min-width: 18px;
    padding: 0 6px;
    border-radius: 999px;
    font-size: .6875rem;
    line-height: 18px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    color: var(--sigo-tom-marca-tinta);
    background: color-mix(in srgb, var(--sigo-tom-marca) 14%, var(--sigo-surface));
}
.ws-gi-nav-badge--neutro { color: var(--sigo-muted); background: var(--sigo-bg); }
.ws-gi-nav-acoes { display: flex; align-items: center; gap: 2px; margin-left: auto; flex-shrink: 0; }
.ws-gi-nav-sync  { padding: 0 6px; font-size: .75rem; color: var(--sigo-muted); white-space: nowrap; }
.ws-gi-girando .mud-icon-root { animation: ws-gi-giro 1s linear infinite; }
@keyframes ws-gi-giro { to { transform: rotate(360deg); } }

/* KPIs principais e indicadores de apoio */
.ws-gi-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }

.ws-gi-mini { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ws-gi-mini-item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding: 12px 16px;
    border: 1px solid var(--sigo-border);
    border-radius: 12px;
    background: var(--sigo-surface);
    font: inherit;
    text-align: left;
    color: inherit;
    overflow: hidden;
}
.ws-gi-mini-item--clicavel { cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; }
.ws-gi-mini-item--clicavel:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--sigo-tom-marca) 45%, var(--sigo-border));
    box-shadow: var(--sigo-shadow);
}
.ws-gi-mini-item--clicavel:focus-visible { outline: none; box-shadow: var(--sigo-focus-ring); }
.ws-gi-mini-item:disabled { cursor: default; }
.ws-gi-mini-item--tom::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--tom);
}
.ws-gi-mini-rotulo { font-size: .75rem; font-weight: 600; color: var(--sigo-text-body); }
.ws-gi-mini-valor {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--sigo-text);
    font-variant-numeric: tabular-nums;
}
.ws-gi-mini-ic { font-size: 18px !important; color: var(--tom-tinta); }
.ws-gi-mini-dica { font-size: .6875rem; color: var(--sigo-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ws-gi-alert-txt { flex: 1; min-width: 0; }
.ws-gi .ws-ind-alert { align-items: center; }
.ws-gi .ws-ind-card-head { flex-wrap: wrap; }
.ws-gi-deltas { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }

/* Carteira: barras clicáveis (segmento, UF, ranking) */
.ws-gi-grid-3  { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ws-gi-grid-op { display: grid; grid-template-columns: minmax(0, 8fr) minmax(280px, 4fr); gap: 16px; align-items: start; }

.ws-gi-barras { display: flex; flex-direction: column; gap: 2px; }
.ws-gi-barra {
    display: flex;
    flex-direction: column;
    align-items: stretch;   /* é <button>: sem isso o Chrome centraliza e o trilho some */
    gap: 6px;
    width: 100%;
    padding: 7px 8px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    font: inherit;
    text-align: left;
    color: inherit;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease;
}
.ws-gi-barra:hover { background: var(--sigo-hover-bg); }
.ws-gi-barra:focus-visible { outline: none; box-shadow: var(--sigo-focus-ring); }
.ws-gi-barra--ativa {
    border-color: color-mix(in srgb, var(--sigo-tom-marca) 55%, var(--sigo-border));
    background: color-mix(in srgb, var(--sigo-tom-marca) 8%, var(--sigo-surface));
}
.ws-gi-barra-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: .8125rem; }
.ws-gi-barra-nome {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-weight: 600;
    color: var(--sigo-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ws-gi-barra-num { flex-shrink: 0; font-weight: 600; color: var(--sigo-text); font-variant-numeric: tabular-nums; }
.ws-gi-barra-num small { margin-left: 4px; font-weight: 400; color: var(--sigo-muted); }
.ws-gi-barra-trilho {
    display: block;
    height: 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--viz-1) 14%, var(--sigo-surface));
    overflow: hidden;
}
.ws-gi-barra-trilho > span {
    display: block;
    height: 100%;
    min-width: 4px;
    border-radius: 999px;
    background: var(--viz-1);
    transition: width .4s ease;
}
.ws-gi-barra--muted .ws-gi-barra-nome { color: var(--sigo-muted); }
.ws-gi-barra--muted .ws-gi-barra-trilho > span { background: var(--viz-neutral); }
.ws-gi-uf { display: inline-block; min-width: 26px; font-weight: 700; }
.ws-gi-ranking { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.ws-gi-pos {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    font-size: .6875rem;
    font-weight: 700;
    color: var(--sigo-tom-marca-tinta);
    background: color-mix(in srgb, var(--sigo-tom-marca) 12%, var(--sigo-surface));
}
.ws-gi-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    align-self: flex-start;
    padding: 4px 8px;
    border: none;
    border-radius: 6px;
    background: transparent;
    font: inherit;
    font-size: .75rem;
    font-weight: 600;
    color: var(--sigo-tom-marca-tinta);
    cursor: pointer;
}
.ws-gi-link:hover { background: var(--sigo-hover-bg); }
.ws-gi-link:focus-visible { outline: none; box-shadow: var(--sigo-focus-ring); }

/* Mapa de cobertura empresa × produto */
.ws-gi-legenda { display: flex; align-items: center; gap: 14px; font-size: .75rem; color: var(--sigo-muted); white-space: nowrap; }
.ws-gi-legenda > span { display: inline-flex; align-items: center; gap: 6px; }

.ws-gi-mapa-scroll {
    max-height: 520px;
    overflow: auto;
    border: 1px solid var(--sigo-border);
    border-radius: 10px;
}
.ws-gi-mapa { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .8125rem; }
.ws-gi-mapa thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 8px 2px 6px;
    vertical-align: bottom;
    background: var(--sigo-surface);
    border-bottom: 1px solid var(--sigo-border);
}
.ws-gi-mapa tbody th {
    position: sticky;
    left: 0;
    z-index: 1;
    max-width: 220px;
    padding: 0 10px;
    text-align: left;
    background: var(--sigo-surface);
    border-right: 1px solid var(--sigo-border);
    border-bottom: 1px solid color-mix(in srgb, var(--sigo-border) 60%, transparent);
}
.ws-gi-mapa thead th.ws-gi-mapa-canto {
    left: 0;
    z-index: 3;
    min-width: 170px;
    padding: 8px 10px;
    text-align: left;
    border-right: 1px solid var(--sigo-border);
}
.ws-gi-mapa-canto span  { display: block; font-size: .75rem; font-weight: 700; color: var(--sigo-text); }
.ws-gi-mapa-canto small { font-size: .6875rem; font-weight: 400; color: var(--sigo-muted); }
.ws-gi-mapa td {
    height: 32px;
    min-width: 46px;
    padding: 0;
    text-align: center;
    border-bottom: 1px solid color-mix(in srgb, var(--sigo-border) 60%, transparent);
}
.ws-gi-mapa tbody tr:last-child th,
.ws-gi-mapa tbody tr:last-child td { border-bottom: none; }
.ws-gi-mapa tbody tr:hover th,
.ws-gi-mapa tbody tr:hover td { background: var(--sigo-hover-bg); }
.ws-gi-mapa .ws-gi-mapa-col--sel { background: color-mix(in srgb, var(--sigo-tom-marca) 8%, var(--sigo-surface)); }

.ws-gi-mapa-prod {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
    min-width: 44px;
    padding: 4px 2px;
    border: none;
    border-radius: 6px;
    background: transparent;
    font: inherit;
    color: inherit;
    cursor: pointer;
}
.ws-gi-mapa-prod:hover:not(:disabled) { background: var(--sigo-hover-bg); }
.ws-gi-mapa-prod:focus-visible { outline: none; box-shadow: var(--sigo-focus-ring); }
.ws-gi-mapa-prod:disabled { cursor: default; }
.ws-gi-mapa-prod-nome {
    max-height: 120px;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: .75rem;
    font-weight: 600;
    color: var(--sigo-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ws-gi-mapa-prod-pct { font-size: .6875rem; color: var(--sigo-muted); font-variant-numeric: tabular-nums; }
.ws-gi-mapa-prod-barra {
    display: block;
    width: 30px;
    height: 4px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--viz-1) 14%, var(--sigo-surface));
    overflow: hidden;
}
.ws-gi-mapa-prod-barra > span { display: block; height: 100%; background: var(--viz-1); }
.ws-gi-mapa-emp {
    display: block;
    max-width: 200px;
    padding: 0;
    border: none;
    background: transparent;
    font: inherit;
    font-weight: 600;
    color: var(--sigo-text);
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}
.ws-gi-mapa-emp:hover { color: var(--sigo-tom-marca-tinta); text-decoration: underline; }
.ws-gi-mapa-emp:focus-visible { outline: none; box-shadow: var(--sigo-focus-ring); border-radius: 4px; }
.ws-gi-mapa .ws-gi-mapa-total {
    padding: 0 10px;
    font-size: .75rem;
    font-weight: 600;
    color: var(--sigo-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.ws-gi-mapa-full { color: var(--sigo-tom-bom-tinta); }
.ws-gi-mapa-rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }

.ws-gi-cel {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    vertical-align: middle;
    transition: transform .12s ease;
}
.ws-gi-cel--tem {
    background: var(--viz-1);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--viz-1) 16%, transparent);
}
.ws-gi-cel--falta { border: 1.5px dashed var(--sigo-muted-light); }
.ws-gi-mapa td:hover .ws-gi-cel { transform: scale(1.25); }
.ws-gi-mapa .ws-gi-mapa-col--sel .ws-gi-cel--falta {
    border-style: solid;
    border-color: var(--sigo-tom-marca);
    background: color-mix(in srgb, var(--sigo-tom-marca) 14%, transparent);
}

/* Potencial de expansão */
.ws-gi-potencial {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 16px;
    border: 1px solid color-mix(in srgb, var(--sigo-tom-marca) 25%, var(--sigo-border));
    border-radius: 12px;
    background: color-mix(in srgb, var(--sigo-tom-marca) 7%, var(--sigo-surface));
}
.ws-gi-potencial-valor {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--sigo-text);
    font-variant-numeric: tabular-nums;
}
.ws-gi-potencial-dica { font-size: .75rem; color: var(--sigo-muted); }
.ws-gi-op-lista { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ws-gi-op-lista li {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px 4px;
    border: 1px solid var(--sigo-border);
    border-radius: 10px;
    background: var(--sigo-surface);
}
.ws-gi-op-lista li.ws-gi-op--sel { border-color: color-mix(in srgb, var(--sigo-tom-marca) 55%, var(--sigo-border)); }
.ws-gi-op-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: .8125rem; }
.ws-gi-op-topo strong { min-width: 0; color: var(--sigo-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-gi-op-topo span   { flex-shrink: 0; font-weight: 700; color: var(--sigo-tom-marca-tinta); font-variant-numeric: tabular-nums; }
.ws-gi-op-dica { font-size: .75rem; color: var(--sigo-muted); }
.ws-gi-op-acao { align-self: flex-start; margin-left: -8px !important; }

/* Empresas: busca, pílulas de situação, chips de filtro, tabela */
.ws-gi-busca { flex: 0 1 320px; margin: 0 !important; }
.ws-gi-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.ws-gi-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px 4px 10px;
    border: 1px solid var(--sigo-border);
    border-radius: 999px;
    background: var(--sigo-surface);
    font: inherit;
    font-size: .75rem;
    font-weight: 600;
    color: var(--sigo-text-body);
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease;
}
.ws-gi-pill:hover:not(:disabled) { background: var(--sigo-hover-bg); }
.ws-gi-pill:focus-visible { outline: none; box-shadow: var(--sigo-focus-ring); }
.ws-gi-pill:disabled { cursor: default; }
.ws-gi-pill--sel {
    border-color: color-mix(in srgb, var(--sigo-tom-marca) 60%, var(--sigo-border));
    background: color-mix(in srgb, var(--sigo-tom-marca) 10%, var(--sigo-surface));
    color: var(--sigo-tom-marca-tinta);
}
.ws-gi-pill--zero { opacity: .5; }
.ws-gi-pill-ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--tom); }
.ws-gi-pill-qtd {
    min-width: 20px;
    padding: 0 6px;
    border-radius: 999px;
    font-size: .6875rem;
    line-height: 18px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    background: var(--sigo-bg);
}
.ws-gi-chips-filtro { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }

.ws-gi-vazio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 28px 16px;
    font-size: .8125rem;
    color: var(--sigo-muted);
}

.ws-gi-tabela .ws-ind-razao { display: flex; align-items: center; gap: 6px; }
.ws-gi-novo {
    padding: 0 6px;
    border-radius: 999px;
    font-size: .625rem;
    font-weight: 700;
    line-height: 16px;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--sigo-tom-marca-tinta);
    background: color-mix(in srgb, var(--sigo-tom-marca) 14%, var(--sigo-surface));
}
.ws-gi-valor { display: block; font-weight: 600; color: var(--sigo-text); font-variant-numeric: tabular-nums; }
.ws-gi-part { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.ws-gi-part .ws-ind-cnpj { display: inline; }
.ws-gi-part-trilho {
    display: block;
    width: 56px;
    height: 4px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--viz-1) 14%, var(--sigo-surface));
    overflow: hidden;
}
.ws-gi-part-trilho > span { display: block; height: 100%; background: var(--viz-1); }
.ws-gi-dots { display: inline-flex; flex-wrap: wrap; gap: 3px; max-width: 120px; }
.ws-gi-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1.5px solid var(--sigo-border);
}
.ws-gi-dot--tem { border-color: var(--viz-1); background: var(--viz-1); }
.ws-gi-dot--sel { outline: 2px solid var(--sigo-tom-marca); outline-offset: 1px; }
.ws-gi-renova { color: var(--sigo-tom-atencao-tinta); white-space: nowrap; }
.ws-gi-sit {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px 2px 8px;
    border-radius: 999px;
    font-size: .6875rem;
    font-weight: 700;
    white-space: nowrap;
    color: var(--tom-tinta);
    background: color-mix(in srgb, var(--tom) 14%, var(--sigo-surface));
}
.ws-gi-sit .mud-icon-root { font-size: 14px !important; color: var(--tom-tinta); }
.ws-gi-sit.ws-tom-neutro { color: var(--sigo-muted); background: var(--sigo-bg); }
.ws-gi-linha--destaque > td { animation: ws-gi-destaque 2.4s ease-out; }
@keyframes ws-gi-destaque {
    0%, 40% { background: color-mix(in srgb, var(--sigo-tom-marca) 16%, var(--sigo-surface)); }
    100%    { background: transparent; }
}

/* Carregamento */
.ws-gi-esqueleto { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 4px 0 12px; }
.ws-gi-esqueleto .mud-skeleton { border-radius: 12px; }
.ws-gi-esq-hero, .ws-gi-esq-largo { grid-column: 1 / -1; }

@media (max-width: 1200px) {
    .ws-gi-grid-op { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1100px) {
    .ws-gi-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
    .ws-gi-hero { grid-template-columns: minmax(0, 1fr); }
    .ws-gi-hero::after { inset: 0; }
    .ws-gi-pulso { flex-direction: row; flex-wrap: wrap; }
    .ws-gi-pulso-titulo { flex-basis: 100%; }
    .ws-gi-pulso-item { flex: 1 1 180px; }
    .ws-gi-kpis, .ws-gi-mini, .ws-gi-esqueleto { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .ws-gi-hero { padding: 18px; }
    .ws-gi-hero-frase { font-size: 1rem; }
    .ws-gi-kpis, .ws-gi-mini, .ws-gi-grid-3, .ws-gi-esqueleto { grid-template-columns: minmax(0, 1fr); }
    .ws-gi-busca { flex-basis: 100%; }
    .ws-gi-nav-sync { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .ws-gi-girando .mud-icon-root, .ws-gi-linha--destaque > td { animation: none; }
    .ws-gi-pulso-item, .ws-gi-barra-trilho > span, .ws-gi-cel { transition: none; }
    .ws-gi-pulso-item:hover { transform: none; }
}

/* ── Indicadores do Grupo Econômico — layout em abas (ws-ge-*, 2026-10-26) ─
   Topo com frase-retrato e ações, 5 KpiCard sempre à vista, abas (Visão geral ·
   Empresas · Oportunidades · Cadastro). Barras, mapa, pílulas e selos de situação
   continuam nas classes ws-gi-* acima (compartilhadas com Escalas/Conformidade).
   Valores por recorrência: seletor .ws-ge-base troca a base (Mensal × Única…). */
.ws-ge { gap: 18px; }

/* Topo */
.ws-ge-topo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 24px;
}
.ws-ge-topo-texto { flex: 1 1 420px; min-width: 0; }
.ws-ge-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 6px; }
.ws-ge-tag { display: inline-flex; align-items: center; gap: 4px; font-size: .75rem; font-weight: 600; color: var(--sigo-muted); }
.ws-ge-tag--sync { font-weight: 400; }
.ws-ge-tag .mud-icon-root { font-size: 14px !important; }
.ws-ge-frase {
    max-width: 80ch;
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--sigo-text-body);
}
.ws-ge-topo-acoes { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }

/* KPIs */
.ws-ge-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.ws-ge-kpi-recs { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; font-size: .75rem; color: var(--sigo-muted); }
.ws-ge-kpi-recs span { display: flex; justify-content: space-between; gap: 8px; }
.ws-ge-kpi-recs strong { font-weight: 600; color: var(--sigo-text); font-variant-numeric: tabular-nums; }

/* Abas — barra fixa no topo do conteúdo do diálogo */
.ws-ge-abas {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    gap: 2px;
    padding: 4px;
    border: 1px solid var(--sigo-border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--sigo-surface) 94%, transparent);
    backdrop-filter: blur(6px);
    overflow-x: auto;
    scrollbar-width: none;
    scroll-margin-top: 8px;
}
.ws-ge-abas::-webkit-scrollbar { display: none; }
.ws-ge-aba {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding: 8px 14px;
    border: none;
    border-radius: 8px;
    background: transparent;
    font: inherit;
    font-size: .875rem;
    font-weight: 600;
    color: var(--sigo-text-body);
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
.ws-ge-aba .mud-icon-root { font-size: 18px !important; color: var(--sigo-muted); }
.ws-ge-aba:hover { background: var(--sigo-hover-bg); color: var(--sigo-text); }
.ws-ge-aba:focus-visible { outline: none; box-shadow: var(--sigo-focus-ring); }
.ws-ge-aba--sel,
.ws-ge-aba--sel:hover {
    background: color-mix(in srgb, var(--sigo-tom-marca) 12%, var(--sigo-surface));
    color: var(--sigo-tom-marca-tinta);
}
.ws-ge-aba--sel .mud-icon-root { color: var(--sigo-tom-marca-tinta); }
.ws-ge-aba-badge {
    min-width: 20px;
    padding: 0 6px;
    border-radius: 999px;
    font-size: .6875rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    color: var(--tom-tinta);
    background: color-mix(in srgb, var(--tom) 16%, var(--sigo-surface));
}
.ws-ge-aba-badge.ws-tom-neutro { color: var(--sigo-muted); background: var(--sigo-bg); }

.ws-ge-painel { display: flex; flex-direction: column; gap: 16px; min-width: 0; animation: ws-ge-entra .18s ease-out; }
@keyframes ws-ge-entra { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.ws-ge-secao-topo { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; margin-top: 8px; }
.ws-ge-painel > .ws-gi-secao-titulo { margin-top: 8px; }

/* Visão geral: atenção + leituras */
.ws-ge-grid-resumo { display: grid; grid-template-columns: minmax(0, 7fr) minmax(300px, 5fr); gap: 16px; align-items: start; }
.ws-ge-contagem {
    margin-left: 6px;
    padding: 0 7px;
    border-radius: 999px;
    font-size: .75rem;
    line-height: 20px;
    color: var(--sigo-text-body);
    background: var(--sigo-bg);
}
.ws-ge-itens { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ws-ge-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px 10px 14px;
    border: 1px solid var(--sigo-border);
    border-radius: 10px;
    background: var(--sigo-surface);
    font: inherit;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.ws-ge-item::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--tom); }
.ws-ge-item.ws-tom-neutro::before { background: var(--sigo-border); }
.ws-ge-item:hover:not(:disabled) { border-color: color-mix(in srgb, var(--tom) 50%, var(--sigo-border)); box-shadow: var(--sigo-shadow); }
.ws-ge-item:focus-visible { outline: none; box-shadow: var(--sigo-focus-ring); }
.ws-ge-item:disabled { cursor: default; }
.ws-ge-item-ic {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--tom) 14%, var(--sigo-surface));
}
.ws-ge-item-ic .mud-icon-root { font-size: 18px; color: var(--tom-tinta); }
.ws-ge-item.ws-tom-neutro .ws-ge-item-ic { background: var(--sigo-bg); }
.ws-ge-item.ws-tom-neutro .ws-ge-item-ic .mud-icon-root { color: var(--sigo-muted); }
.ws-ge-item-txt { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; line-height: 1.35; }
.ws-ge-item-txt strong { font-size: .875rem; color: var(--sigo-text); }
.ws-ge-item-txt span   { font-size: .78rem; color: var(--sigo-muted); }
.ws-ge-item-acao {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    font-size: .78rem;
    font-weight: 600;
    color: var(--sigo-tom-marca-tinta);
    white-space: nowrap;
}
.ws-ge-item-acao .mud-icon-root { font-size: 16px !important; }

.ws-ge-tudo-ok { display: flex; align-items: center; gap: 14px; padding: 8px 4px; }
.ws-ge-tudo-ok > div { display: flex; flex-direction: column; gap: 2px; }
.ws-ge-tudo-ok strong { font-size: .9375rem; color: var(--sigo-text); }
.ws-ge-tudo-ok span   { font-size: .8125rem; color: var(--sigo-muted); }
.ws-ge-tudo-ok-ic {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--tom) 14%, var(--sigo-surface));
}
.ws-ge-tudo-ok-ic .mud-icon-root { color: var(--tom-tinta); }

.ws-ge-leituras { display: flex; flex-direction: column; margin: 0; }
.ws-ge-leituras > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px dashed var(--sigo-border);
    cursor: help;
}
.ws-ge-leituras > div:last-child { border-bottom: none; }
.ws-ge-leituras dt { font-size: .8125rem; color: var(--sigo-text-body); }
.ws-ge-leituras dd { display: flex; align-items: baseline; flex-wrap: wrap; justify-content: flex-end; gap: 2px 8px; margin: 0; text-align: right; }
.ws-ge-leituras dd strong { font-size: .9375rem; color: var(--sigo-text); font-variant-numeric: tabular-nums; }
.ws-ge-leituras dd small  { font-size: .72rem; color: var(--sigo-muted); }
.ws-ge-leitura--tom dd strong { color: var(--tom-tinta); }
.ws-ge-leitura-ic { align-self: center; font-size: 16px !important; color: var(--tom-tinta); }

.ws-ge-destaques {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 12px 0 0;
    border-top: 1px solid var(--sigo-border);
    list-style: none;
}
.ws-ge-destaques li { display: flex; align-items: center; gap: 8px; font-size: .8125rem; color: var(--sigo-text-body); }
.ws-ge-destaques li > .mud-icon-root { flex-shrink: 0; font-size: 16px !important; color: var(--sigo-tom-marca-tinta); }
.ws-ge-destaque-txt { flex: 1; min-width: 0; }
.ws-ge-destaques strong { color: var(--sigo-text); }

/* Tendências */
.ws-ge-grid-tend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ws-ge-grid-tend--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ws-ge-grafico-vazio {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 140px;
    padding: 16px;
    border: 1px dashed var(--sigo-border);
    border-radius: 10px;
    font-size: .8125rem;
    color: var(--sigo-muted);
    text-align: center;
}

/* Seletor da recorrência (base dos valores) */
.ws-ge-base {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--sigo-border);
    border-radius: 999px;
    background: var(--sigo-surface);
}
.ws-ge-base-rotulo { padding: 0 8px 0 10px; font-size: .72rem; font-weight: 600; color: var(--sigo-muted); }
.ws-ge-base-op {
    padding: 3px 12px;
    border: none;
    border-radius: 999px;
    background: transparent;
    font: inherit;
    font-size: .78rem;
    font-weight: 600;
    color: var(--sigo-text-body);
    cursor: pointer;
}
.ws-ge-base-op:hover { background: var(--sigo-hover-bg); }
.ws-ge-base-op:focus-visible { outline: none; box-shadow: var(--sigo-focus-ring); }
.ws-ge-base-op--sel,
.ws-ge-base-op--sel:hover { background: var(--sigo-tom-marca); color: #fff; }

/* Empresas */
.ws-ge-barra-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.ws-ge-busca { flex: 1 1 280px; max-width: 420px; margin: 0 !important; }
.ws-ge-contador { margin-left: auto; font-size: .8125rem; color: var(--sigo-muted); white-space: nowrap; }
.ws-ge-contador strong { color: var(--sigo-text); }
.ws-ge-chips-rotulo { margin-right: 2px; font-size: .75rem; color: var(--sigo-muted); }
.ws-ge-sem-valor { font-size: .78rem; color: var(--sigo-muted); }
.ws-ge-sufixo { margin-left: 2px; font-size: .72rem; font-weight: 400; color: var(--sigo-muted); }

/* Oportunidades */
.ws-ge-potenciais { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.ws-ge-potencial {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 18px;
    border: 1px solid color-mix(in srgb, var(--sigo-tom-marca) 30%, var(--sigo-border));
    border-radius: 12px;
    background: color-mix(in srgb, var(--sigo-tom-marca) 6%, var(--sigo-surface));
}
.ws-ge-potencial--neutro { border-color: var(--sigo-border); background: var(--sigo-surface); }
.ws-ge-potencial-rotulo { font-size: .75rem; font-weight: 600; color: var(--sigo-text-body); }
.ws-ge-potencial-valor { font-size: 1.5rem; font-weight: 700; line-height: 1.2; color: var(--sigo-text); font-variant-numeric: tabular-nums; }
.ws-ge-potencial-valor small { margin-left: 2px; font-size: .8125rem; font-weight: 500; color: var(--sigo-muted); }
.ws-ge-potencial-dica { font-size: .75rem; color: var(--sigo-muted); }

.ws-ge-op-tabela-scroll { overflow-x: auto; }
.ws-ge-op-tabela { width: 100%; border-collapse: collapse; font-size: .8125rem; }
.ws-ge-op-tabela th, .ws-ge-op-tabela td { padding: 8px 10px; border-bottom: 1px solid var(--sigo-border); text-align: left; vertical-align: middle; }
.ws-ge-op-tabela thead th { font-size: .72rem; font-weight: 600; color: var(--sigo-muted); white-space: nowrap; }
.ws-ge-op-tabela tbody tr:last-child > * { border-bottom: none; }
.ws-ge-op-tabela tbody tr:hover > * { background: var(--sigo-hover-bg); }
.ws-ge-op-tabela .ws-ge-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ws-ge-op-tabela small { margin-left: 2px; font-size: .7rem; color: var(--sigo-muted); }
.ws-ge-op-prod { display: block; font-weight: 600; color: var(--sigo-text); }
.ws-ge-op-rec  { font-size: .72rem; font-weight: 400; color: var(--sigo-muted); }
.ws-ge-op-pot  { color: var(--sigo-tom-marca-tinta); }
.ws-ge-op-acao { width: 1%; white-space: nowrap; text-align: right !important; }
.ws-ge-adocao { display: inline-flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; color: var(--sigo-text-body); }
.ws-ge-adocao-trilho {
    width: 90px;
    height: 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--viz-1) 16%, var(--sigo-surface));
    overflow: hidden;
}
.ws-ge-adocao-trilho > span { display: block; height: 100%; border-radius: 999px; background: var(--viz-1); }
.ws-ge-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Grupo sem empresas */
.ws-ge-vazio-grupo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 36px 24px;
    border: 1px dashed var(--sigo-border);
    border-radius: 14px;
    background: var(--sigo-surface);
    text-align: center;
}
.ws-ge-vazio-grupo strong { font-size: 1rem; color: var(--sigo-text); }
.ws-ge-vazio-grupo > span:not(.ws-ge-vazio-ic) { max-width: 60ch; margin-bottom: 8px; font-size: .875rem; color: var(--sigo-muted); }
.ws-ge-vazio-ic {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--sigo-tom-marca) 12%, var(--sigo-surface));
}
.ws-ge-vazio-ic .mud-icon-root { font-size: 28px; color: var(--sigo-tom-marca-tinta); }

/* Carregamento */
.ws-ge-esqueleto { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; padding: 4px 0 12px; }
.ws-ge-esqueleto .mud-skeleton { border-radius: 12px; }
.ws-ge-esq-largo { grid-column: 1 / -1; }

@media (max-width: 1280px) {
    .ws-ge-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ws-ge-grid-tend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
    .ws-ge-kpis, .ws-ge-esqueleto { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ws-ge-grid-resumo, .ws-ge-grid-tend, .ws-ge-grid-tend--2 { grid-template-columns: minmax(0, 1fr); }
    .ws-ge-contador { margin-left: 0; }
}
@media (max-width: 600px) {
    .ws-ge-kpis, .ws-ge-esqueleto { grid-template-columns: minmax(0, 1fr); }
    .ws-ge-aba { padding: 8px 10px; }
    .ws-ge-item-acao { display: none; }
    .ws-ge-busca { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
    .ws-ge-painel { animation: none; }
}

/* ── Tabelas de Horários — Recursos Humanos (ws-esc-*, 2026-10-10) ──────
   Gestão (EscalasIndex), formulário (EscalasForm), matriz (EscalaMatriz),
   conformidade (EscalaConformidade) e alocação (EscalaAlocarDialog).
   Reaproveita KpiCard/WsMedidor (§23) e as pílulas/estados ws-gi-*. */
.ws-esc { display: flex; flex-direction: column; gap: 24px; }

.ws-esc-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.ws-esc-barra-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ws-esc-busca { flex: 0 1 280px; min-width: 200px; margin: 0 !important; }
.ws-esc-filtro-ativo { width: 130px; flex: 0 0 130px; margin: 0 !important; }
.ws-esc-filtro { flex: 0 1 190px; min-width: 150px; margin: 0 !important; }
.ws-esc-vazio strong { color: var(--sigo-text); }

/* Cartões das escalas */
.ws-esc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.ws-esc-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: 14px 16px;
    border: 1px solid var(--sigo-border);
    border-radius: 12px;
    background: var(--sigo-surface);
    box-shadow: var(--sigo-shadow);
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.ws-esc-card:hover { border-color: color-mix(in srgb, var(--sigo-tom-marca) 40%, var(--sigo-border)); box-shadow: var(--sigo-shadow-lg); transform: translateY(-1px); }
.ws-esc-card:focus-visible { outline: none; box-shadow: var(--sigo-focus-ring); }
.ws-esc-card--sel {
    border-color: var(--sigo-tom-marca);
    box-shadow: 0 0 0 1px var(--sigo-tom-marca), var(--sigo-shadow-lg);
    background: linear-gradient(160deg, color-mix(in srgb, var(--sigo-tom-marca) 7%, var(--sigo-surface)) 0%, var(--sigo-surface) 60%);
}
.ws-esc-card--inativa { opacity: .7; }
.ws-esc-card-topo { display: flex; align-items: center; gap: 6px; min-height: 22px; }
.ws-esc-card-nome {
    margin-top: 4px;
    font-size: .9375rem;
    font-weight: 700;
    color: var(--sigo-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ws-esc-card-horario { font-size: .75rem; color: var(--sigo-muted); }
.ws-esc-card-rodape {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
    padding: 6px 10px;
    border-radius: 8px;
    background: var(--sigo-bg);
    font-size: .75rem;
    color: var(--sigo-text-body);
}
.ws-esc-card-carga { font-weight: 700; color: var(--sigo-text); font-variant-numeric: tabular-nums; }
.ws-esc-card-carga small { font-weight: 400; color: var(--sigo-muted); }
.ws-esc-card-alerta { display: inline-flex; margin-left: auto; }
.ws-esc-card-alerta .mud-icon-root { font-size: 18px; color: var(--tom-tinta); }
.ws-esc-principal { display: inline-flex; }
.ws-esc-principal .mud-icon-root { font-size: 16px; color: var(--sigo-tom-atencao); }
.ws-esc-card-inativa-tag {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--sigo-muted);
}

/* Etiquetas de regime/tipo/vínculo — a cor só distingue o regime, sem significado de status. */
.ws-esc-tag {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border-radius: 6px;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
    color: var(--sigo-text-body);
    background: var(--sigo-bg);
    border: 1px solid var(--sigo-border);
}
.ws-esc-tag--clt   { color: var(--sigo-tom-marca-tinta); background: color-mix(in srgb, var(--sigo-tom-marca) 10%, var(--sigo-surface)); border-color: transparent; }
.ws-esc-tag--pj    { color: var(--sigo-text); background: color-mix(in srgb, var(--viz-3) 16%, var(--sigo-surface)); border-color: transparent; }
.ws-esc-tag--misto { color: var(--sigo-text); background: color-mix(in srgb, var(--viz-5) 16%, var(--sigo-surface)); border-color: transparent; }

/* Detalhe da escala selecionada */
.ws-esc-detalhe { gap: 18px; }
.ws-esc-detalhe-cab { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 20px; }
.ws-esc-detalhe-titulo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ws-esc-detalhe-titulo h2 { margin: 0; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; color: var(--sigo-text); }
.ws-esc-detalhe-sub { max-width: 80ch; margin: 6px 0 0; font-size: .8125rem; line-height: 1.5; color: var(--sigo-muted); }
.ws-esc-detalhe-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ws-esc-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: .75rem;
    font-weight: 600;
    color: var(--sigo-text-body);
    background: var(--sigo-bg);
}
.ws-esc-chip .mud-icon-root { font-size: 16px; color: var(--sigo-tom-marca-tinta); }
.ws-esc-detalhe-corpo { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.ws-esc-detalhe-matriz { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ws-esc-detalhe-conf {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--sigo-border);
    border-radius: 12px;
    background: var(--sigo-bg);
}
.ws-esc-detalhe-conf h3 { margin: 0; }

/* Matriz semanal */
.ws-esc-matriz-scroll { overflow-x: auto; border: 1px solid var(--sigo-border); border-radius: 10px; }
.ws-esc-matriz { width: 100%; border-collapse: collapse; font-size: .8125rem; }
.ws-esc-matriz thead th {
    padding: 9px 10px;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--sigo-muted);
    background: var(--sigo-bg);
    border-bottom: 1px solid var(--sigo-border);
}
.ws-esc-matriz td, .ws-esc-matriz tbody th {
    padding: 8px 10px;
    text-align: left;
    white-space: nowrap;
    color: var(--sigo-text-body);
    border-bottom: 1px solid color-mix(in srgb, var(--sigo-border) 60%, transparent);
}
.ws-esc-matriz tbody tr:last-child td, .ws-esc-matriz tbody tr:last-child th { border-bottom: none; }
.ws-esc-matriz tbody tr:hover td, .ws-esc-matriz tbody tr:hover th { background: var(--sigo-hover-bg); }
.ws-esc-matriz .ws-esc-num { text-align: right; }
.ws-esc-linha--descanso td, .ws-esc-linha--descanso th { background: color-mix(in srgb, var(--sigo-bg) 70%, transparent); }
.ws-esc-linha--erro td, .ws-esc-linha--erro th { background: color-mix(in srgb, var(--sigo-tom-critico) 6%, var(--sigo-surface)); }
.ws-esc-linha-msg td {
    padding: 4px 10px 8px;
    font-size: .75rem;
    color: var(--sigo-tom-critico-tinta);
    background: color-mix(in srgb, var(--sigo-tom-critico) 6%, var(--sigo-surface));
}
.ws-esc-linha-msg .mud-icon-root { font-size: 14px; vertical-align: -2px; color: var(--sigo-tom-critico-tinta); }
.ws-esc-dia { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--sigo-text); }
.ws-esc-linha--descanso .ws-esc-dia { color: var(--sigo-muted); }
.ws-esc-ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--sigo-border); }
.ws-esc-ponto--on { background: var(--viz-1); }
.ws-esc-forte { font-weight: 700; color: var(--sigo-text) !important; font-variant-numeric: tabular-nums; }
.ws-esc-muted { color: var(--sigo-muted) !important; }
.ws-esc-carga {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 6px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--sigo-tom-marca-tinta);
    background: color-mix(in srgb, var(--sigo-tom-marca) 10%, var(--sigo-surface));
}
.ws-esc-erro { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--sigo-tom-critico-tinta); }
.ws-esc-erro .mud-icon-root { font-size: 16px; color: var(--sigo-tom-critico-tinta); }
.ws-esc-sit {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 6px;
    font-size: .75rem;
    font-weight: 600;
    color: var(--sigo-text-body);
    background: var(--sigo-bg);
}
.ws-esc-sit--trabalho { color: var(--sigo-text); background: color-mix(in srgb, var(--viz-1) 10%, var(--sigo-surface)); }
.ws-esc-sit--dsr { color: var(--sigo-muted); font-weight: 700; }

/* Edição da matriz */
.ws-esc-matriz--edicao td { padding-top: 6px; padding-bottom: 6px; }
.ws-esc-hora, .ws-esc-select {
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--sigo-border);
    border-radius: 6px;
    background: var(--sigo-surface);
    font: inherit;
    font-size: .8125rem;
    color: var(--sigo-text);
    font-variant-numeric: tabular-nums;
    color-scheme: light dark;
}
.ws-esc-hora { width: 96px; }
.ws-esc-select { min-width: 118px; cursor: pointer; }
.ws-esc-hora:hover, .ws-esc-select:hover { border-color: color-mix(in srgb, var(--sigo-tom-marca) 50%, var(--sigo-border)); }
.ws-esc-hora:focus, .ws-esc-select:focus { outline: none; border-color: var(--sigo-tom-marca); box-shadow: var(--sigo-focus-ring); }
.ws-esc-matriz .ws-esc-acoes { text-align: right; }

.ws-esc-total {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--sigo-bg);
}
.ws-esc-total > .mud-icon-root { font-size: 22px; color: var(--sigo-tom-marca-tinta); }
.ws-esc-total span { display: flex; flex-direction: column; }
.ws-esc-total strong { font-size: .9375rem; color: var(--sigo-text); font-variant-numeric: tabular-nums; }
.ws-esc-total small { font-size: .75rem; color: var(--sigo-muted); }

.ws-esc-flex, .ws-esc-aviso {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--sigo-tom-marca) 7%, var(--sigo-surface));
    border: 1px solid color-mix(in srgb, var(--sigo-tom-marca) 22%, var(--sigo-border));
}
.ws-esc-flex > .mud-icon-root, .ws-esc-aviso > .mud-icon-root { flex-shrink: 0; color: var(--sigo-tom-marca-tinta); }
.ws-esc-flex div { display: flex; flex-direction: column; gap: 2px; font-size: .8125rem; color: var(--sigo-text-body); }
.ws-esc-flex strong { color: var(--sigo-text); }
.ws-esc-aviso { padding: 10px 12px; margin-bottom: 12px; font-size: .75rem; color: var(--sigo-text-body); }

/* Resumo do formulário */
.ws-esc-resumo-carga { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.ws-esc-resumo-valor { font-size: 2rem; font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; color: var(--sigo-text); font-variant-numeric: tabular-nums; }
.ws-esc-resumo-rotulo { font-size: .75rem; color: var(--sigo-muted); }

/* Conformidade */
.ws-esc-conf { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 4px; padding: 0; list-style: none; }
.ws-esc-conf-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    border-left: 3px solid var(--tom);
    background: color-mix(in srgb, var(--tom) 8%, var(--sigo-surface));
    font-size: .8125rem;
}
.ws-esc-conf-item > .mud-icon-root { flex-shrink: 0; margin-top: 1px; font-size: 18px; color: var(--tom-tinta); }
.ws-esc-conf-item span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ws-esc-conf-item strong { color: var(--sigo-text); }
.ws-esc-conf-item small { font-size: .75rem; line-height: 1.4; color: var(--sigo-text-body); }

/* Colaboradores */
.ws-esc .ws-esc-colab-cab { align-items: center; }
.ws-esc-colab-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ws-esc-pessoa { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ws-esc-pessoa > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.ws-esc-pessoa strong { color: var(--sigo-text); }
.ws-esc-pessoa small { font-size: .75rem; color: var(--sigo-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-esc-avatar {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    font-size: .75rem;
    font-weight: 700;
    color: #fff;
    background: var(--sigo-icon-grad);
}
.ws-esc-lotacao { display: flex; flex-direction: column; }
.ws-esc-lotacao span { color: var(--sigo-text); }
.ws-esc-lotacao small { font-size: .75rem; color: var(--sigo-muted); }

/* Diálogo de alocação */
.ws-esc-aloc { display: flex; flex-direction: column; gap: 14px; }
.ws-esc-aloc-topo { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 12px; }
.ws-esc-aloc-opcao { display: flex; flex-direction: column; line-height: 1.3; }
.ws-esc-aloc-opcao small { font-size: .75rem; color: var(--sigo-muted); }
/* Escala escolhida DENTRO do campo (Vincular colaboradores / Escala adicional): o MudSelect desenha o conteúdo da
   opção no campo de uma linha — só o nome, no peso normal, com reticências; a linha de detalhe (regime · tipo · carga)
   fica só na lista aberta (popover, fora do campo) e no quadro da escala abaixo. */
.ws-esc-aloc-select .ws-esc-aloc-opcao { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: inherit; }
.ws-esc-aloc-select .ws-esc-aloc-opcao strong { font-weight: inherit; }
.ws-esc-aloc-select .ws-esc-aloc-opcao small { display: none; }
.ws-esc-aloc-destino {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--sigo-tom-marca) 7%, var(--sigo-surface));
}
.ws-esc-aloc-destino > .mud-icon-root { color: var(--sigo-tom-marca-tinta); }
.ws-esc-aloc-destino span { display: flex; flex-direction: column; font-size: .8125rem; }
.ws-esc-aloc-destino strong { color: var(--sigo-text); }
.ws-esc-aloc-destino small { font-size: .75rem; color: var(--sigo-muted); }
.ws-esc-aloc-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ws-esc-aloc-busca { flex: 1 1 240px; margin: 0 !important; }
.ws-esc-aloc-lista-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ws-esc-aloc-lista {
    max-height: 360px;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
    border: 1px solid var(--sigo-border);
    border-radius: 10px;
}
.ws-esc-aloc-lista li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px 6px 4px;
    border-bottom: 1px solid color-mix(in srgb, var(--sigo-border) 60%, transparent);
}
.ws-esc-aloc-lista li:last-child { border-bottom: none; }
.ws-esc-aloc-lista li:hover { background: var(--sigo-hover-bg); }
.ws-esc-aloc-lista li.ws-esc-aloc-item--sel { background: color-mix(in srgb, var(--sigo-tom-marca) 6%, var(--sigo-surface)); }
.ws-esc-aloc-lista li.ws-esc-aloc-item--off { opacity: .6; }
.ws-esc-aloc-lista li.ws-esc-aloc-vazio { justify-content: center; padding: 24px; font-size: .8125rem; color: var(--sigo-muted); }
.ws-esc-aloc-nome { display: flex; flex: 1; flex-direction: column; min-width: 0; font-size: .8125rem; }
.ws-esc-aloc-nome strong { color: var(--sigo-text); }
.ws-esc-aloc-nome small { font-size: .75rem; color: var(--sigo-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-esc-aloc-atual { flex-shrink: 0; }

@media (max-width: 1200px) {
    .ws-esc-detalhe-corpo { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
    .ws-esc-aloc-topo { grid-template-columns: minmax(0, 1fr); }
    .ws-esc-busca, .ws-esc-filtro { flex-basis: 100%; }
    .ws-esc-aloc-atual { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .ws-esc-card { transition: none; }
    .ws-esc-card:hover { transform: none; }
}


.ws-record-metric-label .ws-estagio-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ws-record-metric-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ws-record-metric-value {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--sigo-text);
}

.ws-record-metric-hint {
    font-size: .6875rem;
    color: var(--sigo-muted);
}

.ws-record-section-label {
    margin: 0 0 12px;
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--sigo-text-body);
}

.ws-record-audit {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-left: 12px;
    border-left: 2px solid var(--sigo-border);
    font-size: .75rem;
}

.ws-record-audit-label {
    display: block;
    font-size: .6875rem;
    color: var(--sigo-muted-light);
}

.ws-record-audit-value {
    display: block;
    font-weight: 500;
    color: var(--sigo-text-body);
}

.ws-record-audit-by {
    display: block;
    font-size: .6875rem;
    color: var(--sigo-muted);
}

.ws-record-links {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 12px;
    border-top: 1px solid var(--sigo-border);
}

.ws-record-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 6px 0;
    border: 0;
    background: none;
    cursor: pointer;
    font: inherit;
    font-size: .75rem;
    font-weight: 500;
    color: var(--sigo-text-body);
    text-align: left;
    transition: opacity .15s ease;
}

.ws-record-link span {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ws-record-link .mud-icon-root {
    font-size: 1rem !important;
}

.ws-record-link:hover {
    opacity: .8;
}

.ws-record-link--accent {
    color: var(--ws-record-accent);
}

.ws-record-info {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--mud-palette-info) 7%, var(--sigo-surface));
    border: 1px solid color-mix(in srgb, var(--mud-palette-info) 20%, transparent);
}

.ws-record-info-icon {
    margin-top: 1px;
    color: var(--mud-palette-info);
    flex-shrink: 0;
}

.ws-record-info-title {
    margin: 0;
    font-size: .75rem;
    font-weight: 600;
    color: var(--sigo-text);
}

.ws-record-info-text {
    margin: 2px 0 0;
    font-size: .75rem;
    line-height: 1.6;
    color: var(--sigo-text-body);
}

/* Ações da janela à direita do título (WsRecordAcoes, 2026-10-10 — antes, barra fixa no rodapé).
   O cabeçalho com ações gruda no topo da área de conteúdo (.sigo-main) e, ao rolar, vira uma faixa
   compacta (ws-record-header.js põe .ws-record-header--compacto): ícone menor, sem subtítulo nem dica. */
.ws-record-identity { flex: 1 1 360px; }
.ws-record-identity-texto { min-width: 0; }

.ws-record-header-acoes {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex-shrink: 0;
    margin-left: auto;
}

/* WsRecordPage sem Titulo (ex.: aba de Configurações > E-mail): ações numa linha à direita, no topo. */
.ws-record-acoes-topo {
    display: flex;
    justify-content: flex-end;
}
.ws-record-acoes-topo .ws-record-header-acoes {
    flex-direction: row-reverse;
    align-items: center;
    gap: 16px;
}

.ws-record-header-dica {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .75rem;
    color: var(--sigo-muted);
    white-space: nowrap;
}

.ws-record-header-dica-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--sigo-green);
}

.ws-record-header--fixo {
    position: sticky;
    top: 0;
    z-index: 6;
    background: var(--sigo-bg);
    transition: padding .18s ease, box-shadow .18s ease;
}

.ws-record-header--fixo .ws-record-icon,
.ws-record-header--fixo .ws-record-title {
    transition: width .18s ease, height .18s ease, font-size .18s ease;
}

.ws-record-header--compacto {
    padding-top: 10px;
    padding-bottom: 10px;
    box-shadow: 0 8px 12px -10px rgba(15, 23, 42, .25);
}
.ws-record-header--compacto .ws-record-icon { width: 34px; height: 34px; border-radius: 9px; box-shadow: none; }
.ws-record-header--compacto .ws-record-icon .mud-icon-root { font-size: 1.125rem; }
.ws-record-header--compacto .ws-record-title { font-size: 1.125rem; }
.ws-record-header--compacto .ws-record-subtitle,
.ws-record-header--compacto .ws-record-header-dica { display: none; }

@media (max-width: 600px) {
    .ws-record-header-acoes { width: 100%; align-items: stretch; }
    .ws-record-header-acoes .ws-record-actions { width: 100%; }
    .ws-record-header-acoes .ws-record-actions > * { flex: 1; }
    .ws-record-header-dica { display: none; }
    .ws-record-card { padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .ws-record-header--fixo,
    .ws-record-header--fixo .ws-record-icon,
    .ws-record-header--fixo .ws-record-title { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════
   TEMA ESCURO — ajustes finos deste arquivo
   ══════════════════════════════════════════════════════════════════ */

/* Scrollbar clara demais (pensada só para fundo claro) sobre superfície
   escura — tom mais discreto, coerente com o resto do tema escuro. */
[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #3a4358;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #4a5570;
}

/* Preview de documento impresso (Orçamento/Contrato) — sempre claro,
   mesmo com o app em modo escuro (é a simulação de uma folha impressa,
   não faz sentido escurecer). .pdf-preview-bg/.contrato-preview-bg já
   usam cores literais fixas (não dependem de --sigo-*), então na
   prática já ficam claras sozinhas; a regra abaixo é só uma trava
   explícita contra qualquer mudança futura que passe a usar tokens
   aqui. */
[data-theme="dark"] .pdf-preview-bg,
[data-theme="dark"] .contrato-preview-bg {
    background: #c8cdd6;
}

[data-theme="dark"] .contrato-preview-bg .contrato-preview-page {
    background: #ffffff;
    color: #152341;
}

/* ── Central de Cobrança (CentralCobrancaIndex, CobrancaRegistroDialog, CobrancaHistoricoLista) ── */
/* Cabeçalho com ações principais */
.ws-cob-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 18px;
    border-radius: var(--sigo-radius-card);
    border: 1px solid var(--sigo-border);
    background: var(--sigo-surface);
    box-shadow: var(--sigo-shadow);
}
.ws-cob-header-titulo { font-size: 1.25rem; font-weight: 700; color: var(--sigo-text); letter-spacing: -.01em; }
.ws-cob-header-tag {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    color: var(--sigo-navy-mid);
    background: rgba(42, 82, 152, 0.10);
}

/* KPIs clicáveis (filtro rápido) — borda de destaque no filtro ativo */
.ws-cob-kpis {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}
@media (max-width: 1280px) { .ws-cob-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .ws-cob-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .ws-cob-kpis { grid-template-columns: 1fr; } }

.ws-cob-kpi-card {
    --ws-cob-kpi-cor: var(--sigo-navy-mid);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 6px;
    min-width: 0;
    padding: 12px 14px;
    border-radius: var(--sigo-radius-card);
    border: 1px solid var(--sigo-border);
    background: var(--sigo-surface);
    box-shadow: var(--sigo-shadow);
    cursor: pointer;
    transition: box-shadow .15s, border-color .15s;
}
.ws-cob-kpi-card:hover { box-shadow: var(--sigo-shadow-lg); border-color: var(--ws-cob-kpi-cor); }
.ws-cob-kpi-card--ativo { border-color: var(--ws-cob-kpi-cor); box-shadow: 0 0 0 1px var(--ws-cob-kpi-cor), var(--sigo-shadow); }
.ws-cob-kpi-card--fixo { cursor: default; }
.ws-cob-kpi-card--fixo:hover { border-color: var(--sigo-border); }
.ws-cob-kpi-card--auto     { --ws-cob-kpi-cor: #0891b2; }
.ws-cob-kpi-card--urgente  { --ws-cob-kpi-cor: var(--mud-palette-error); }
.ws-cob-kpi-card--promessa { --ws-cob-kpi-cor: #4f46e5; }
[data-theme="dark"] .ws-cob-kpi-card { --ws-cob-kpi-cor: #7ea6e6; }
[data-theme="dark"] .ws-cob-kpi-card--auto { --ws-cob-kpi-cor: #22d3ee; }
[data-theme="dark"] .ws-cob-kpi-card--urgente { --ws-cob-kpi-cor: var(--mud-palette-error); }
[data-theme="dark"] .ws-cob-kpi-card--promessa { --ws-cob-kpi-cor: #a5b4fc; }

.ws-cob-kpi-topo { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.ws-cob-kpi-titulo {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ws-cob-kpi-cor);
}
.ws-cob-kpi-titulo .mud-icon-root { font-size: 16px; }
.ws-cob-kpi-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ws-cob-kpi-badge {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 4px;
    color: var(--sigo-text-body);
    background: var(--sigo-bg);
    white-space: nowrap;
}
.ws-cob-kpi-card--urgente .ws-cob-kpi-badge { color: var(--mud-palette-error); background: rgba(244, 67, 54, 0.10); }
.ws-cob-kpi-pct { font-size: 12px; font-weight: 700; color: var(--sigo-green); }
.ws-cob-kpi-valor { font-size: 1.25rem; font-weight: 700; color: var(--sigo-text); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-cob-kpi-card--auto .ws-cob-kpi-valor,
.ws-cob-kpi-card--urgente .ws-cob-kpi-valor,
.ws-cob-kpi-card--promessa .ws-cob-kpi-valor { color: var(--ws-cob-kpi-cor); }
.ws-cob-kpi-valor--menor { font-size: 1rem; }
.ws-cob-kpi-rodape {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    font-size: 11.5px;
    color: var(--sigo-muted);
}
.ws-cob-kpi-rodape > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-cob-kpi-ativo, .ws-cob-kpi-destaque {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    color: var(--ws-cob-kpi-cor);
    white-space: nowrap;
}
.ws-cob-kpi-ativo .mud-icon-root { font-size: 14px; }
.ws-cob-progresso { height: 6px; border-radius: 999px; background: var(--sigo-bg); overflow: hidden; }
.ws-cob-progresso > div { height: 100%; border-radius: 999px; background: var(--sigo-green); transition: width .4s; }

/* Faixas de atraso (aging) */
.ws-cob-aging {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--sigo-border);
}
.ws-cob-aging-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--sigo-muted); margin-right: 2px; }
.ws-cob-aging-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 6px 3px 10px;
    border: 1px solid var(--sigo-border);
    border-radius: 999px;
    background: var(--sigo-surface);
    color: var(--sigo-text-body);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.ws-cob-aging-pill:hover { background: var(--sigo-hover-bg); }
.ws-cob-aging-qtd {
    min-width: 20px;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    background: var(--sigo-bg);
    color: var(--sigo-text);
}
.ws-cob-aging-pill--critica .ws-cob-aging-qtd { background: rgba(244, 67, 54, 0.14); color: var(--mud-palette-error); }
.ws-cob-aging-pill--ativa { background: var(--sigo-navy); border-color: var(--sigo-navy); color: #fff; font-weight: 600; }
.ws-cob-aging-pill--ativa:hover { background: var(--sigo-navy); }
.ws-cob-aging-pill--ativa .ws-cob-aging-qtd { background: rgba(255, 255, 255, 0.18); color: #fff; }
[data-theme="dark"] .ws-cob-aging-pill--ativa { background: #2a5298; border-color: #2a5298; }

/* Barra da seleção (ações em lote) */
.ws-cob-lote {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid rgba(42, 82, 152, 0.35);
    background: rgba(42, 82, 152, 0.06);
    font-size: 13px;
}
.ws-cob-lote-total { color: var(--sigo-navy-mid); }
[data-theme="dark"] .ws-cob-lote-total { color: #7ea6e6; }
.ws-cob-linha--selecionada > td { background: rgba(42, 82, 152, 0.05); }

/* Situação da cobrança (chip) */
.ws-cob-sit {
    --ws-cob-sit-cor: var(--sigo-muted);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--ws-cob-sit-cor);
    background: color-mix(in srgb, var(--ws-cob-sit-cor) 12%, transparent);
}
.ws-cob-sit-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ws-cob-sit--ok      { --ws-cob-sit-cor: var(--sigo-green); }
.ws-cob-sit--info    { --ws-cob-sit-cor: #4f46e5; }
.ws-cob-sit--alerta  { --ws-cob-sit-cor: #d9631f; }
.ws-cob-sit--critico { --ws-cob-sit-cor: var(--mud-palette-error); }
[data-theme="dark"] .ws-cob-sit--info   { --ws-cob-sit-cor: #a5b4fc; }
[data-theme="dark"] .ws-cob-sit--alerta { --ws-cob-sit-cor: var(--sigo-orange); }

.ws-cob-urgente, .ws-cob-tentativas {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    font-weight: 700;
    color: var(--mud-palette-error);
}
.ws-cob-urgente .mud-icon-root, .ws-cob-tentativas .mud-icon-root { font-size: 13px; }
.ws-cob-contato { display: flex; align-items: center; gap: 3px; margin-top: 1px; }
.ws-cob-contato .mud-icon-root { font-size: 13px; }
.ws-cob-atraso--critica { font-weight: 800; }
.ws-cob-texto-desconto { color: var(--sigo-green); }
.ws-cob-recalc-novo { color: var(--sigo-navy-mid); }
[data-theme="dark"] .ws-cob-recalc-novo { color: #7ea6e6; }

.ws-cob-whats {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    vertical-align: middle;
    color: #00a660;
}
.ws-cob-whats:hover { background: rgba(0, 166, 96, 0.10); }
.ws-cob-whats svg { width: 18px; height: 18px; }

.ws-cob-cel-principal { font-weight: 600; line-height: 1.3; }
.ws-cob-cel-sec { font-size: 12px; color: var(--sigo-muted); line-height: 1.35; }

.ws-cob-atraso { font-size: 11.5px; font-weight: 600; color: var(--sigo-muted); }
.ws-cob-atraso--vencida { color: var(--mud-palette-error); }
.ws-cob-atraso--hoje { color: var(--sigo-orange); }

.ws-cob-linha--vencida > td:first-child { box-shadow: inset 3px 0 0 var(--mud-palette-error); }

/* Filtro "Atraso frequente" (visão por cliente): barra da frequência de pagamentos atrasados. */
.ws-cob-freq { display: inline-flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
.ws-cob-freq-trilho { width: 70px; height: 6px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--sigo-border) 80%, var(--sigo-surface)); }
.ws-cob-freq-trilho > span { display: block; height: 100%; border-radius: 999px; background: var(--sigo-tom-marca); }
.ws-cob-freq-trilho > span.ws-cob-freq--media { background: var(--sigo-tom-atencao); }
.ws-cob-freq-trilho > span.ws-cob-freq--alta  { background: var(--sigo-tom-critico); }

.ws-cob-sem-contato {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    color: var(--sigo-orange);
    background: rgba(255, 116, 64, 0.12);
}

.ws-cob-previsao {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    color: var(--sigo-green);
}
.ws-cob-previsao--hoje { color: var(--sigo-orange); }
.ws-cob-previsao--vencida { color: var(--mud-palette-error); }

.ws-cob-hist-linha {
    background: var(--sigo-bg);
    padding: 12px 16px !important;
}

/* Faixa de resumo da fatura no topo do Registrar Contato */
.ws-cob-fatura {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.3fr;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid var(--sigo-border);
    background: var(--sigo-bg);
}
.ws-cob-fatura > div { display: flex; flex-direction: column; min-width: 0; }
.ws-cob-fatura-label { font-size: 11px; color: var(--sigo-muted); text-transform: uppercase; letter-spacing: .03em; }
.ws-cob-fatura-valor { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-cob-texto-atraso { color: var(--mud-palette-error); }
@media (max-width: 600px) {
    .ws-cob-fatura { grid-template-columns: 1fr 1fr; }
}

.ws-cob-responsavel {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px dashed var(--sigo-border);
    font-size: 13px;
}

/* Linha do tempo de contatos */
.ws-cob-hist { display: flex; flex-direction: column; gap: 8px; max-height: 460px; overflow-y: auto; }
.ws-cob-hist-total { font-size: 12px; color: var(--sigo-muted); }
.ws-cob-hist-item {
    display: flex;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--sigo-border);
    border-left: 3px solid rgb(var(--ws-acao-accent-rgb, 21, 35, 65));
    background: var(--sigo-surface, var(--mud-palette-surface));
}
.ws-cob-hist-body { flex: 1; min-width: 0; }
.ws-cob-hist-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ws-cob-hist-data { font-size: 11.5px; color: var(--sigo-muted); white-space: nowrap; }
.ws-cob-hist-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.ws-cob-hist-chips .mud-chip { margin: 0; }
.ws-cob-hist-desc { font-size: 12.5px; margin-top: 4px; white-space: pre-line; word-break: break-word; }
.ws-cob-hist-resp {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    font-size: 11.5px;
    color: var(--sigo-muted);
}
.ws-cob-hist-resp .mud-icon-root { font-size: 14px; }

.ws-cob-origem {
    margin-left: auto;
    font-size: 10.5px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.ws-cob-origem--manual { color: var(--ws-navy); background: rgba(21, 35, 65, 0.08); }
.ws-cob-origem--auto { color: #0891b2; background: rgba(8, 145, 178, 0.12); }
[data-theme="dark"] .ws-cob-origem--manual { color: #c7d2fe; background: rgba(199, 210, 254, 0.12); }

/* ── Dashboard da Central de Cobrança (Pages/Dashboards/DashboardCobranca.razor) ──
   Base = Indicadores do Grupo Econômico (.ws-ind-*) + gráficos WsViz; aqui só o que é próprio. */
.ws-dcob { display: flex; flex-direction: column; gap: 16px; }

.ws-dcob-secao {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0 -4px;
    font-size: .8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--sigo-text);
}
.ws-dcob-secao .mud-icon-root { color: var(--sigo-navy-mid); }
[data-theme="dark"] .ws-dcob-secao .mud-icon-root { color: #7ea6e6; }
.ws-dcob-secao > span {
    margin-left: 6px;
    font-size: .6875rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--sigo-muted);
}

.ws-dcob-txt-ok   { color: var(--sigo-green); }
.ws-dcob-txt-erro { color: var(--mud-palette-error); }

.ws-dcob-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: 4px;
    font-size: 10.5px;
    font-weight: 700;
    white-space: nowrap;
    color: var(--ws-dcob-badge-cor, var(--sigo-muted));
    background: color-mix(in srgb, var(--ws-dcob-badge-cor, var(--sigo-muted)) 12%, var(--sigo-surface));
}
.ws-dcob-badge--ok    { --ws-dcob-badge-cor: var(--sigo-green); }
.ws-dcob-badge--info  { --ws-dcob-badge-cor: var(--viz-1); }
.ws-dcob-badge--aviso { --ws-dcob-badge-cor: #c27c00; }
.ws-dcob-badge--erro  { --ws-dcob-badge-cor: var(--mud-palette-error); }
[data-theme="dark"] .ws-dcob-badge--aviso { --ws-dcob-badge-cor: var(--viz-4); }

/* Aging: barra empilhada + cartões das faixas */
.ws-dcob-stack {
    display: flex;
    height: 14px;
    border-radius: 7px;
    overflow: hidden;
    gap: 2px;
    background: var(--sigo-bg);
}
.ws-dcob-stack > div { min-width: 4px; transition: opacity .15s; }
.ws-dcob-stack > div:hover { opacity: .85; }

.ws-dcob-aging {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}
@media (max-width: 1100px) { .ws-dcob-aging { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .ws-dcob-aging { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ws-dcob-aging-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
    padding: 12px;
    border-radius: 10px;
    background: var(--sigo-bg);
    border: 1px solid transparent;
    border-top: 3px solid var(--ws-dcob-faixa, transparent);
    min-width: 0;
    font: inherit;
    text-align: left;
    color: inherit;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, transform .1s;
}
.ws-dcob-aging-item:hover:not(:disabled) { border-color: color-mix(in srgb, var(--ws-dcob-faixa) 55%, transparent); box-shadow: var(--sigo-shadow); transform: translateY(-1px); }
.ws-dcob-aging-item:focus-visible { outline: none; box-shadow: var(--sigo-focus-ring); }
.ws-dcob-aging-item:disabled { cursor: default; opacity: .6; }
.ws-dcob-aging-nivel { font-size: 10.5px; font-weight: 700; color: var(--sigo-muted); }
.ws-dcob-cobertura { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; font-size: .6875rem; color: var(--sigo-muted); }
.ws-dcob-cobertura-trilho { height: 4px; border-radius: 999px; background: color-mix(in srgb, var(--sigo-border) 80%, var(--sigo-surface)); overflow: hidden; }
.ws-dcob-cobertura-trilho > span { display: block; height: 100%; border-radius: 999px; background: var(--sigo-tom-bom); }
.ws-dcob-cobertura--baixa { color: var(--sigo-tom-atencao-tinta); font-weight: 600; }
.ws-dcob-cobertura--baixa .ws-dcob-cobertura-trilho > span { background: var(--sigo-tom-atencao); }
.ws-dcob-aging-item--critico { border-color: color-mix(in srgb, var(--mud-palette-error) 35%, transparent); }
.ws-dcob-aging-topo { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.ws-dcob-aging-topo .ws-ind-kpi-label { display: inline-flex; align-items: center; gap: 5px; }
.ws-dcob-aging-qtd { font-size: 1.25rem; font-weight: 700; color: var(--sigo-text); }
.ws-dcob-aging-qtd small { font-size: .75rem; font-weight: 500; color: var(--sigo-muted); }
.ws-dcob-aging-valor { font-size: .75rem; color: var(--sigo-text-body); font-variant-numeric: tabular-nums; }
.ws-dcob-aging-acao {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--sigo-border);
    font-size: .6875rem;
    font-weight: 600;
    color: var(--sigo-tom-marca-tinta);
}
.ws-dcob-aging-item--critico .ws-dcob-aging-acao { color: var(--mud-palette-error); font-weight: 600; }

/* Feed de interações */
.ws-dcob-feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ws-dcob-feed li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--sigo-border);
    font-size: .8125rem;
}
.ws-dcob-feed li:last-child { border-bottom: 0; }
.ws-dcob-feed-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex-shrink: 0; }
.ws-dcob-feed-corpo { display: flex; flex-direction: column; flex: 1; min-width: 0; color: var(--sigo-text-body); }
.ws-dcob-feed-corpo strong { color: var(--sigo-text); }
.ws-dcob-feed-corpo small { font-size: .6875rem; color: var(--sigo-muted); }
.ws-dcob-feed-quando { font-size: .6875rem; color: var(--sigo-muted); white-space: nowrap; }

.ws-dcob-segmentos { display: flex; flex-direction: column; gap: 8px; }
.ws-dcob-segmento {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    font: inherit;
    text-align: left;
    color: inherit;
    cursor: pointer;
}
.ws-dcob-segmento:hover { background: var(--sigo-bg); }
.ws-dcob-segmento:focus-visible { outline: none; box-shadow: var(--sigo-focus-ring); }
.ws-dcob-segmento--ativo { border-color: var(--sigo-tom-marca); background: color-mix(in srgb, var(--sigo-tom-marca) 6%, var(--sigo-surface)); }
/* Conteúdo em <span> (dentro de <button>): meter e preenchimento precisam ser blocos. */
.ws-dcob-segmento .ws-ind-meter, .ws-dcob-segmento .ws-ind-meter-fill { display: block; }

.ws-dcob-tabela { background: transparent !important; }
.ws-dcob-tabela th {
    font-size: .6875rem !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--sigo-muted) !important;
}
.ws-dcob-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    padding: 1px 6px;
    border-radius: 6px;
    font-size: .75rem;
    font-weight: 700;
    color: var(--sigo-text);
    background: var(--sigo-bg);
}

/* Tabelas: números alinhados, rolagem horizontal em telas estreitas, linhas clicáveis, minibarras. */
.ws-dcob-n { text-align: right !important; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ws-dcob-tabela-wrap { overflow-x: auto; margin: 0 -4px; }
.ws-dcob-tabela-wrap .ws-dcob-tabela { min-width: 560px; }
.ws-dcob-linha-clicavel { cursor: pointer; }
.ws-dcob-linha-clicavel:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--sigo-tom-marca); }
.ws-dcob-celula-barra { white-space: nowrap; }
.ws-dcob-celula-barra > * { vertical-align: middle; }
.ws-dcob-mini-barra {
    display: inline-block;
    width: 56px;
    height: 6px;
    margin-right: 8px;
    border-radius: 999px;
    overflow: hidden;
    background: color-mix(in srgb, var(--sigo-tom-marca) 14%, var(--sigo-surface));
}
.ws-dcob-mini-barra > span { display: block; height: 100%; border-radius: 999px; background: var(--sigo-tom-marca); }
.ws-dcob-mini-barra > span.ws-dcob-mini-barra--ok { background: var(--sigo-tom-bom); }

/* Cabeçalho: atualização automática; filtros globais; navegação por seções (fixa ao rolar). */
.ws-dcob-auto { margin: 0 0 0 4px; }
.ws-dcob-auto .mud-typography { font-size: .75rem; color: var(--sigo-muted); }
.ws-dcob-filtros {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    align-items: center;
}
.ws-dcob-filtros .mud-input-control { margin: 0; }
.ws-dcob-nav {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px;
    margin: 0 -2px;
    border: 1px solid var(--sigo-border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--sigo-surface) 92%, transparent);
    backdrop-filter: blur(6px);
    overflow-x: auto;
    scrollbar-width: none;
}
.ws-dcob-nav button {
    flex-shrink: 0;
    padding: 5px 12px;
    border: none;
    border-radius: 8px;
    background: transparent;
    font: inherit;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--sigo-text-body);
    cursor: pointer;
}
.ws-dcob-nav button:hover { background: var(--sigo-hover-bg); color: var(--sigo-text); }
.ws-dcob-nav button:focus-visible { outline: none; box-shadow: var(--sigo-focus-ring); }
.ws-dcob-nav-periodo { margin-left: auto; padding-right: 8px; font-size: .75rem; color: var(--sigo-muted); white-space: nowrap; }
.ws-dcob-secao[id], #dcob-tendencia { scroll-margin-top: 64px; }

/* Grades de indicadores: Hoje (5), destaque (2 grandes) e secundários. */
.ws-dcob-hoje      { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.ws-dcob-hero      { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ws-dcob-kpis-sec  { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
@media (max-width: 1280px) { .ws-dcob-hoje { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .ws-dcob-hoje, .ws-dcob-hero { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .ws-dcob-hoje, .ws-dcob-hero { grid-template-columns: 1fr; } }

/* Migração entre faixas: barra empilhada pago / mesma faixa / piorou. */
.ws-dcob-mig-pago   { background: var(--sigo-tom-bom); }
.ws-dcob-mig-mesma  { background: color-mix(in srgb, var(--sigo-muted) 45%, var(--sigo-surface)); }
.ws-dcob-mig-piorou { background: var(--sigo-tom-critico); }
.ws-dcob-migracao { display: flex; flex-direction: column; gap: 10px; }
.ws-dcob-migracao-linha { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(0, 2fr) auto; align-items: center; gap: 10px; font-size: .8125rem; }
.ws-dcob-migracao-rotulo { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--sigo-text); }
.ws-dcob-migracao-rotulo small { margin-left: auto; color: var(--sigo-muted); font-variant-numeric: tabular-nums; }
.ws-dcob-migracao-barra { display: flex; height: 12px; gap: 2px; border-radius: 6px; overflow: hidden; background: var(--sigo-bg); }
.ws-dcob-migracao-barra > span { min-width: 0; }
.ws-dcob-migracao-pct { font-size: .75rem; }

/* Custo da cobrança — faixa compacta dentro do card de eficiência. */
.ws-dcob-custo { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--sigo-border); }
.ws-dcob-custo > div { display: flex; flex-direction: column; gap: 2px; }
.ws-dcob-custo strong { font-size: 1.125rem; color: var(--sigo-text); font-variant-numeric: tabular-nums; }
.ws-dcob-custo small { font-size: .75rem; color: var(--sigo-muted); }

.ws-ind-alert .ws-dcob-alerta-acao { flex-shrink: 0; margin-left: 8px; align-self: center; }

/* Detalhe do operador (CobrancaOperadorDialog). */
.ws-dcob-op-resumo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
@media (max-width: 600px) { .ws-dcob-op-resumo { grid-template-columns: 1fr; } }

/* Gráficos WsViz clicáveis (OnClickRotulo) e mês selecionado. */
.ws-viz-band--clicavel { cursor: pointer; }
.ws-viz-band--clicavel:focus { outline: none; }
.ws-viz-band--clicavel:focus-visible .ws-viz-band-bg,
.ws-viz-band--selecionado .ws-viz-band-bg { fill: var(--sigo-tom-marca); fill-opacity: .08; opacity: 1; }

/* Linha de referência (meta/teto) dos gráficos WsViz */
.ws-viz-ref { stroke: var(--sigo-muted); stroke-width: 1; stroke-dasharray: 4 4; opacity: .8; }
.ws-viz-ref-label { font-weight: 600; }

/* ── Produtos e Serviços por unidade (ContratoProdutosTab, ProdutosContratadosDialog, card do Cliente) ── */
.ws-cprod-tabela .mud-input-control { margin: 0; }
/* Larguras pelo <ColGroup> da aba (layout fixo): Produto fica com o espaço que sobra e nenhuma coluna invade a outra.
   Cabe sem rolagem com o menu lateral expandido — os campos de edição da tabela são compactos (fonte 13px, margens
   internas e ícones menores) em vez de usar o tamanho padrão dos formulários. */
.ws-cprod-tabela .mud-table-container { overflow-x: hidden; }
.ws-cprod-tabela table { table-layout: fixed; width: 100%; }
.ws-cprod-tabela th, .ws-cprod-tabela td { overflow: hidden; padding-left: 6px !important; padding-right: 6px !important; }
.ws-cprod-tabela th:first-child, .ws-cprod-tabela td:first-child { padding-left: 10px !important; padding-right: 0 !important; }
.ws-cprod-tabela td .mud-picker, .ws-cprod-tabela td .mud-select,
.ws-cprod-tabela td .mud-input-control { width: 100%; min-width: 0; }
.ws-cprod-tabela .ws-cob-cel-principal { overflow-wrap: anywhere; }
.ws-cprod-tabela td .mud-input { font-size: 13px; }
.ws-cprod-tabela td .mud-input-outlined .mud-input-slot,
.ws-cprod-tabela td .mud-input.mud-input-outlined input { padding: 7px 4px 7px 9px !important; height: auto; }
.ws-cprod-tabela td .mud-input-adornment-end { margin-left: 0 !important; margin-right: 4px; }
.ws-cprod-tabela td .mud-input-adornment .mud-icon-button { padding: 3px; }
.ws-cprod-tabela td .mud-input-adornment .mud-icon-root,
.ws-cprod-tabela td .mud-select .mud-input-adornment-end .mud-icon-root { font-size: 18px; }
.ws-cprod-tabela td .mud-select .mud-input-slot { text-overflow: clip; }
/* O campo nunca reserva largura mínima própria — ocupa exatamente a coluna (data/situação inteiras com as larguras do ColGroup). */
.ws-cprod-tabela td .mud-input input, .ws-cprod-tabela td .mud-input .mud-input-slot { min-width: 0; }
.ws-cprod-tabela td .mud-select, .ws-cprod-tabela td .mud-select .mud-input-control-input-container { display: block; width: 100% !important; }
/* "Cancelado em": data ocupa o espaço que sobra, ícone do comentário em coluna própria de 26px */
.ws-cprod-cancelado-cel { display: grid; grid-template-columns: minmax(0, 1fr) 26px; align-items: center; gap: 2px; }
.ws-cprod-cancelado-cel .mud-icon-button { padding: 3px; }
.ws-cprod-cancelado-cel .mud-icon-button .mud-icon-root { font-size: 19px; }
.ws-cprod-tabela td { vertical-align: middle; }
.ws-cprod-nova {
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 4px;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--viz-1);
    background: color-mix(in srgb, var(--viz-1) 12%, var(--sigo-surface));
}
/* Unidade cancelada: linha destacada em vermelho (fundo + faixa à esquerda + nome) */
.ws-cprod-row-cancelada > td { background: color-mix(in srgb, var(--mud-palette-error) 7%, var(--sigo-surface)) !important; }
.ws-cprod-row-cancelada > td:first-child { box-shadow: inset 3px 0 0 var(--mud-palette-error); }
.ws-cprod-row-cancelada:hover > td { background: color-mix(in srgb, var(--mud-palette-error) 11%, var(--sigo-surface)) !important; }
.ws-cprod-row-cancelada .ws-cob-cel-principal { color: var(--mud-palette-error); }
.ws-cprod-flag {
    display: inline-flex;
    align-items: center;
    padding: 0 10px 0 4px;
    border-radius: 8px;
    border: 1px solid var(--sigo-border);
    background: var(--sigo-surface);
    flex-shrink: 0;
}
.ws-cprod-flag .mud-switch { margin: 0; }
.ws-cprod-flag--ativa {
    border-color: color-mix(in srgb, var(--mud-palette-error) 40%, transparent);
    background: color-mix(in srgb, var(--mud-palette-error) 7%, var(--sigo-surface));
}
.ws-cprod-flag--ativa .mud-switch-label, .ws-cprod-flag--ativa .mud-typography { color: var(--mud-palette-error); font-weight: 600; }
.ws-cprod-sit--ativo .mud-input-slot { color: var(--sigo-green); font-weight: 600; }
.ws-cprod-sit--cancelado .mud-input-slot { color: var(--mud-palette-error); font-weight: 600; }

.ws-cprod-situacao {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}
.ws-cprod-situacao::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ws-cprod-situacao--ativo { color: var(--sigo-green); background: color-mix(in srgb, var(--sigo-green) 12%, transparent); }
.ws-cprod-situacao--cancelado { color: var(--mud-palette-error); background: color-mix(in srgb, var(--mud-palette-error) 12%, transparent); }

.ws-cprod-resumo { display: flex; flex-wrap: wrap; gap: 6px; }
.ws-cprod-resumo--lista { flex-direction: column; align-items: stretch; }
.ws-cprod-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 3px 4px 3px 10px;
    border-radius: 8px;
    border: 1px solid var(--sigo-border);
    background: var(--sigo-surface);
    font-size: 12px;
    color: var(--sigo-text-body);
}
.ws-cprod-chip strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--sigo-text); font-weight: 600; }
.ws-cprod-chip--off { opacity: .6; }
.ws-cprod-chip-ok {
    min-width: 22px;
    padding: 0 6px;
    border-radius: 6px;
    text-align: center;
    font-weight: 700;
    color: var(--sigo-green);
    background: color-mix(in srgb, var(--sigo-green) 12%, transparent);
}
.ws-cprod-chip-canc {
    padding: 0 6px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--mud-palette-error);
    background: color-mix(in srgb, var(--mud-palette-error) 10%, transparent);
}

/* ── Cancelamento de produto/serviço com comentário obrigatório (CancelarProdutosDialog, ContratoProdutosTab,
      ContratoHistoricoTab) ── */
.ws-cprod-canc-lista {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 180px;
    overflow-y: auto;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--mud-palette-error) 30%, var(--sigo-border));
    background: color-mix(in srgb, var(--mud-palette-error) 5%, var(--sigo-surface));
}
.ws-cprod-canc-item { display: flex; justify-content: space-between; gap: 12px; font-size: .8125rem; color: var(--sigo-text-body); }
.ws-cprod-canc-item strong { color: var(--sigo-text); }

.ws-cprod-coment { color: var(--mud-palette-error) !important; }
.ws-cprod-coment--pendente { opacity: .75; }
.ws-cprod-coment--sem { color: var(--mud-palette-warning) !important; }
.ws-cprod-coment-tip { display: flex; flex-direction: column; gap: 4px; max-width: 320px; white-space: normal; text-align: left; }
.ws-cprod-coment-tip em { opacity: .8; font-size: 11px; }

.ws-contrato-hist-filtros { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }

.ws-contrato-evt-cancprod .ws-lead-timeline-icon { color: var(--mud-palette-error); }
.ws-contrato-evt-destaque > .ws-lead-timeline-body {
    border-radius: 8px;
    box-shadow: 0 0 0 2px var(--mud-palette-error);
    background: color-mix(in srgb, var(--mud-palette-error) 6%, var(--sigo-surface));
    animation: ws-contrato-pulse 1.6s ease-out 1;
}
@keyframes ws-contrato-pulse {
    0%   { box-shadow: 0 0 0 6px color-mix(in srgb, var(--mud-palette-error) 35%, transparent); }
    100% { box-shadow: 0 0 0 2px var(--mud-palette-error); }
}
.ws-contrato-cancprod-unidades { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 6px; }
.ws-contrato-cancprod-label { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--sigo-muted); margin-right: 2px; }
.ws-contrato-cancprod-label .mud-icon-root { font-size: 14px; }
.ws-contrato-cancprod-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--mud-palette-error);
    background: color-mix(in srgb, var(--mud-palette-error) 10%, transparent);
}
.ws-contrato-cancprod-chip small { font-weight: 500; opacity: .85; }
.ws-contrato-evt-selo--canc { color: var(--mud-palette-error) !important; background: color-mix(in srgb, var(--mud-palette-error) 12%, transparent) !important; }

/* ── Meu Perfil › Assinatura de E-mail: dados insuficientes (AssinaturaEmailPreview, 2026-10-12) ── */
.ws-assin-pendente {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid color-mix(in srgb, var(--tom) 40%, var(--sigo-border));
    border-left: 3px solid var(--tom);
    border-radius: 8px;
    background: color-mix(in srgb, var(--tom) 10%, var(--sigo-surface));
}
.ws-assin-pendente-icone { flex-shrink: 0; font-size: 22px !important; color: var(--tom-tinta); }
.ws-assin-pendente-corpo { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: .8125rem; color: var(--sigo-text-body); }
.ws-assin-pendente-corpo strong { color: var(--sigo-text); }
.ws-assin-pendente-corpo ul { margin: 2px 0 4px; padding-left: 18px; }
.ws-assin-pendente-corpo li { color: var(--sigo-text); font-weight: 600; }
.ws-assin-pendente-corpo small { font-size: .75rem; color: var(--sigo-muted); }
.ws-assin-pendente-corpo .mud-button-root { align-self: flex-start; }

/* ── Pipeline › Leads, formato Lista (PipelineLeadsIndex, 2026-10-12) — substituiu Comercial › Leads ── */
.ws-pl-lista { display: flex; flex-direction: column; gap: 8px; }
.ws-pl-lista-aviso {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; border-radius: 8px; font-size: .8125rem; color: var(--sigo-text-body);
    background: color-mix(in srgb, var(--sigo-tom-marca) 7%, var(--sigo-surface));
    border: 1px solid color-mix(in srgb, var(--sigo-tom-marca) 22%, var(--sigo-border));
}
.ws-pl-tabela { border: 1px solid var(--sigo-border); border-radius: 12px; overflow: hidden; background: var(--sigo-surface); }
.ws-pl-tabela .mud-table-head .mud-table-cell {
    font-size: .6875rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--sigo-muted); background: var(--sigo-bg); white-space: nowrap;
}
.ws-pl-tabela .ws-pl-linha { cursor: pointer; }
.ws-pl-tabela .ws-pl-linha > td:first-child { box-shadow: inset 3px 0 0 transparent; }
.ws-pl-tabela .ws-pl-linha.ws-tom-critico > td:first-child { box-shadow: inset 3px 0 0 var(--sigo-tom-critico); }
.ws-pl-tabela .ws-pl-linha.ws-tom-atencao > td:first-child { box-shadow: inset 3px 0 0 var(--sigo-tom-atencao); }
.ws-pl-tabela .ws-pl-linha--aberta > td { background: color-mix(in srgb, var(--sigo-tom-marca) 8%, var(--sigo-surface)); }
.ws-pl-tabela .ws-pl-linha--inativa > td { color: var(--sigo-muted); }
.ws-pl-lista-empresa { display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--sigo-text); }
.ws-pl-tabela .ws-pl-linha--inativa .ws-pl-lista-empresa { color: var(--sigo-muted); }
.ws-pl-lista-sub { display: block; font-size: .75rem; color: var(--sigo-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; }
.ws-pl-lista-pendente { color: var(--sigo-tom-atencao-tinta); font-weight: 600; }
.ws-pl-lista-inativo {
    padding: 0 6px; border-radius: 999px; font-size: .625rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--sigo-muted); background: var(--sigo-bg); border: 1px solid var(--sigo-border);
}
.ws-pl-lista-qualif { display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; font-weight: 600; color: var(--sigo-text-body); font-variant-numeric: tabular-nums; }
.ws-pl-lista-qualif-trilho { display: block; width: 48px; height: 5px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--viz-1) 14%, var(--sigo-surface)); }
.ws-pl-lista-qualif-trilho > span { display: block; height: 100%; background: var(--viz-1); }
.ws-pl-lista-acoes { display: inline-flex; align-items: center; gap: 2px; }
.ws-pl-lista-acoes .ws-pipeline-card-whatsapp { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; }
.ws-pl-lista-vazio { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 28px 12px; color: var(--sigo-muted); font-size: .8125rem; }
.ws-pl-lista .ws-pipeline-column-encerrados { align-self: flex-start; }

/* ── Configurações › Integrações (2026-10-12) — lista de integrações selecionáveis ───────────────── */
.ws-integracoes-lista {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 10px;
}
.ws-integracao-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    text-align: left;
    font: inherit;
    color: var(--sigo-text);
    background: var(--sigo-surface);
    border: 1px solid var(--sigo-border);
    border-radius: var(--sigo-radius);
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}
.ws-integracao-item:hover { border-color: var(--sigo-destaque); }
.ws-integracao-item:focus-visible { outline: 2px solid var(--sigo-destaque); outline-offset: 2px; }
.ws-integracao-item--ativa {
    border-color: var(--sigo-destaque);
    box-shadow: 0 0 0 1px var(--sigo-destaque) inset;
    background: var(--sigo-destaque-fundo);
}
.ws-integracao-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    height: 34px;
    border-radius: 8px;
    color: var(--sigo-destaque-tinta);
    background: var(--sigo-destaque-fundo);
}
.ws-integracao-texto { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ws-integracao-nome { font-weight: 600; }
.ws-integracao-categoria { font-size: .75rem; color: var(--sigo-muted); }
.ws-integracao-status {
    flex-shrink: 0;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 600;
    white-space: nowrap;
}
.ws-integracao-status--ativa    { color: var(--sigo-sucesso-tinta); background: var(--sigo-sucesso-fundo); }
.ws-integracao-status--inativa  { color: var(--sigo-atencao-tinta); background: var(--sigo-atencao-fundo); }
.ws-integracao-status--pendente { color: var(--sigo-muted); background: color-mix(in srgb, var(--sigo-muted) 12%, transparent); }

/* ── Painel de Controle › Ligações (DashboardLigacoes.razor) ──────────────────────────────────────────────
   Atendida/perdida = cores de STATUS (sempre com legenda). Mapas de calor: um único tom em intensidade crescente
   (--i = 0–100%) — marca para volume, perigo para métricas em que "mais" é pior. */
.ws-lig-atendida { background: var(--sigo-sucesso); }
.ws-lig-perdida  { background: var(--sigo-perigo); }

.ws-lig-barras {
    display: grid;
    grid-template-columns: repeat(24, minmax(0, 1fr));
    gap: 4px;
    height: 180px;
    align-items: end;
    padding-top: 4px;
}
.ws-lig-coluna { display: flex; flex-direction: column; align-items: stretch; height: 100%; min-width: 0; cursor: default; }
.ws-lig-pilha  { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; }
.ws-lig-seg    { min-height: 2px; border-radius: 0; }
.ws-lig-pilha > .ws-lig-seg:first-child { border-radius: 4px 4px 0 0; }
.ws-lig-coluna:hover .ws-lig-seg { filter: brightness(1.08); }
.ws-lig-rotulo-hora {
    margin-top: 4px;
    text-align: center;
    font-size: .6875rem;
    color: var(--sigo-muted);
    font-variant-numeric: tabular-nums;
}
@media (max-width: 700px) {
    .ws-lig-barras { gap: 2px; height: 140px; }
    .ws-lig-rotulo-hora { font-size: .5625rem; }
}

.ws-lig-dias { display: flex; flex-direction: column; gap: 8px; }
.ws-lig-dia  { display: grid; grid-template-columns: 36px minmax(0, 1fr) 150px; align-items: center; gap: 10px; font-size: .8125rem; }
.ws-lig-dia-nome  { color: var(--sigo-muted); font-weight: 600; }
.ws-lig-dia-valor { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ws-lig-dia-valor small { color: var(--sigo-muted); }

.ws-lig-tabela td, .ws-lig-tabela th { white-space: nowrap; font-variant-numeric: tabular-nums; }

.ws-lig-mapa {
    --ws-lig-tom: var(--sigo-destaque);
    border-collapse: separate;
    border-spacing: 2px;
    width: 100%;
    min-width: 760px;
    font-size: .6875rem;
    font-variant-numeric: tabular-nums;
}
.ws-lig-mapa--alerta { --ws-lig-tom: var(--sigo-perigo); }
.ws-lig-mapa thead th { color: var(--sigo-muted); font-weight: 600; text-align: center; padding: 2px 0; }
.ws-lig-mapa tbody th {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--sigo-surface);
    text-align: left;
    font-weight: 600;
    color: var(--sigo-text);
    padding: 0 8px 0 0;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ws-lig-mapa td {
    height: 26px;
    min-width: 26px;
    text-align: center;
    border-radius: 3px;
    color: var(--sigo-text);
    background: color-mix(in srgb, var(--ws-lig-tom) calc(var(--i, 0%) * .75), var(--sigo-surface));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sigo-border) 70%, transparent);
}
.ws-lig-mapa td:hover { outline: 2px solid var(--sigo-text); outline-offset: -1px; }
.ws-lig-escala {
    --ws-lig-tom: var(--sigo-destaque);
    display: inline-block;
    width: 120px;
    height: 10px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--sigo-surface), color-mix(in srgb, var(--ws-lig-tom) 75%, var(--sigo-surface)));
    box-shadow: inset 0 0 0 1px var(--sigo-border);
}
.ws-lig-escala.ws-lig-mapa--alerta { --ws-lig-tom: var(--sigo-perigo); }

/* Configurações › Integrações — listas do card "Dados da integração" */
.ws-integracao-lista { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: .8125rem; color: var(--sigo-text); }
.ws-integracao-lista li::marker { color: var(--sigo-muted); }

/* ── Painel de Controle › Ligações › Indicadores de Tendências (DashboardLigacoesTendencias.razor) ─────────────── */

/* Conteúdo do modal (MudDialog ExtraLarge): rola por dentro, cabeçalho e X sempre visíveis. */
.ws-lig-tend-modal .mud-dialog-content { max-height: calc(100vh - 140px); overflow-y: auto; }
.ws-lig-tend { padding-bottom: 8px; }
.ws-lig-tend-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.ws-lig-tend-controles { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ws-lig-tend-controles .mud-select { min-width: 170px; }

.ws-lig-tend-rank { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1100px) { .ws-lig-tend-rank { grid-template-columns: 1fr; } }

.ws-lig-rank { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ws-lig-rank li {
    display: grid;
    grid-template-columns: 26px minmax(70px, 1.1fr) minmax(40px, 1fr) auto auto;
    align-items: center;
    gap: 8px;
    font-size: .8125rem;
    color: var(--sigo-muted);
    font-variant-numeric: tabular-nums;
}
.ws-lig-rank li.ws-lig-rank--top { color: var(--sigo-text); font-weight: 600; }
.ws-lig-rank-pos { font-size: .75rem; color: var(--sigo-destaque-tinta); font-weight: 700; }
.ws-lig-rank-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-lig-rank-barra { height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--sigo-muted) 14%, transparent); overflow: hidden; }
.ws-lig-rank-barra > span { display: block; height: 100%; border-radius: 4px; background: color-mix(in srgb, var(--sigo-destaque) 45%, var(--sigo-surface)); }
.ws-lig-rank--top .ws-lig-rank-barra > span { background: var(--sigo-destaque); }
.ws-lig-rank-valor small { color: var(--sigo-muted); font-weight: 400; margin-left: 2px; }
.ws-lig-rank-indice { min-width: 46px; text-align: right; font-size: .75rem; }
.ws-lig-rank-indice.acima  { color: var(--sigo-atencao-tinta); }
.ws-lig-rank-indice.abaixo { color: var(--sigo-muted); }

.ws-lig-mapa td.ws-lig-mapa-pico { box-shadow: inset 0 0 0 2px var(--sigo-atencao); font-weight: 700; }

    display: flex; flex-direction: column; gap: 2px; padding: 10px 12px;
    border: 1px solid var(--sigo-border); border-radius: 8px; background: var(--sigo-surface);
}


/* ── Ligações › Tendências › "Volume diário e previsão" (cards + gráfico SVG) ─────────────────────────────────
   Real = marca (azul) com área; média móvel 7d = atenção (laranja) tracejada; previsão = neutro tracejado com
   faixa de confiança; tendência: ▲ verde / ▼ vermelho / ► cinza (sempre com seta + texto). */
.ws-lig-prev-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.ws-lig-prev-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.ws-lig-prev-kpi {
    display: flex; flex-direction: column; gap: 4px; min-width: 0;
    padding: 12px 14px;
    border: 1px solid var(--sigo-border);
    border-left: 4px solid var(--sigo-destaque);
    border-radius: 10px;
    background: var(--sigo-surface);
}
.ws-lig-prev-kpi--previsao { border-left-color: var(--sigo-atencao); }
.ws-lig-prev-kpi--up       { border-left-color: var(--sigo-sucesso); }
.ws-lig-prev-kpi--down     { border-left-color: var(--sigo-perigo); }
.ws-lig-prev-kpi--flat     { border-left-color: var(--sigo-muted); }
.ws-lig-prev-kpi--pico     { border-left-color: var(--sigo-perigo); }
.ws-lig-prev-kpi-rotulo { font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--sigo-muted); }
.ws-lig-prev-kpi-valor {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    font-size: 1.5rem; font-weight: 700; line-height: 1.2; color: var(--sigo-text); font-variant-numeric: tabular-nums;
}
.ws-lig-prev-kpi-valor small { font-size: .75rem; font-weight: 500; color: var(--sigo-muted); }
.ws-lig-prev-kpi-sub, .ws-lig-prev-kpi-delta { font-size: .75rem; color: var(--sigo-muted); }
.ws-lig-prev-kpi-delta.up   { color: var(--sigo-sucesso-tinta); font-weight: 600; }
.ws-lig-prev-kpi-delta.down { color: var(--sigo-perigo-tinta); font-weight: 600; }

.ws-lig-seta { font-size: 1.375rem; font-weight: 900; line-height: 1; }
.ws-lig-seta--up   { color: var(--sigo-sucesso-tinta); }
.ws-lig-seta--down { color: var(--sigo-perigo-tinta); }
.ws-lig-seta--flat { color: var(--sigo-muted); }
.ws-lig-pilula { font-size: .9375rem; font-weight: 700; padding: 2px 8px; border-radius: 6px; }
.ws-lig-pilula--up   { color: var(--sigo-sucesso-tinta); background: var(--sigo-sucesso-fundo); }
.ws-lig-pilula--down { color: var(--sigo-perigo-tinta); background: var(--sigo-perigo-fundo); }
.ws-lig-pilula--flat { color: var(--sigo-muted); background: color-mix(in srgb, var(--sigo-muted) 12%, transparent); }

.ws-lig-grafico { width: 100%; height: auto; display: block; margin-top: 8px; }
.ws-lig-grafico-grade { stroke: var(--sigo-border); stroke-width: 1; }
.ws-lig-grafico-eixo  { fill: var(--sigo-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.ws-lig-grafico-area  { fill: color-mix(in srgb, var(--sigo-destaque) 10%, transparent); stroke: none; }
.ws-lig-grafico-linha { fill: none; stroke: var(--sigo-destaque); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ws-lig-grafico-linha--prev { stroke: var(--sigo-muted); stroke-dasharray: 5 4; }
.ws-lig-grafico-media { fill: none; stroke: var(--sigo-atencao); stroke-width: 2; stroke-dasharray: 7 4; stroke-linejoin: round; }
.ws-lig-grafico-faixa { fill: color-mix(in srgb, var(--sigo-muted) 18%, transparent); stroke: color-mix(in srgb, var(--sigo-muted) 35%, transparent); stroke-width: 1; }
.ws-lig-grafico-hoje  { stroke: var(--sigo-muted); stroke-width: 1; stroke-dasharray: 2 3; }
.ws-lig-grafico-ponto--prev { fill: var(--sigo-surface); stroke: var(--sigo-muted); stroke-width: 2; }
.ws-lig-grafico-ponto--atipico { fill: none; stroke: var(--sigo-atencao); stroke-width: 2; }

/* Hover: alvo invisível por dia, guia + ponto + caixa aparecem só no :hover (sem ida ao servidor). */
.ws-lig-hover-alvo   { fill: transparent; }
.ws-lig-hover-mostra { opacity: 0; pointer-events: none; transition: opacity .08s; }
.ws-lig-hover:hover .ws-lig-hover-mostra { opacity: 1; }
.ws-lig-hover-guia   { stroke: var(--sigo-text); stroke-width: 1; stroke-dasharray: 3 3; opacity: .5; }
.ws-lig-hover-ponto  { fill: var(--sigo-destaque); stroke: var(--sigo-surface); stroke-width: 2; }
.ws-lig-hover-ponto--prev { fill: var(--sigo-muted); }
.ws-lig-hover-caixa  { fill: var(--sigo-text); opacity: .94; }
.ws-lig-hover-texto  { fill: var(--sigo-surface); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.ws-lig-hover-texto--titulo { font-weight: 700; }

.ws-lig-leg { display: inline-block; width: 18px; height: 10px; border-radius: 2px; vertical-align: middle; }
.ws-lig-leg--real    { background: color-mix(in srgb, var(--sigo-destaque) 10%, transparent); border-top: 2px solid var(--sigo-destaque); }
.ws-lig-leg--media   { height: 0; border-top: 2px dashed var(--sigo-atencao); }
.ws-lig-leg--prev    { height: 0; border-top: 2px dashed var(--sigo-muted); }
.ws-lig-leg--faixa   { background: color-mix(in srgb, var(--sigo-muted) 18%, transparent); border: 1px solid color-mix(in srgb, var(--sigo-muted) 35%, transparent); }
.ws-lig-leg--atipico { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--sigo-atencao); }
/* Ligações › Tendências › Picos previstos: um card por período (dia + horário, total, % de aumento). */
.ws-lig-picos-resumo { margin: 0 0 10px; font-size: .8125rem; color: var(--sigo-text); }
.ws-lig-picos { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.ws-lig-pico {
    display: flex; flex-direction: column; gap: 6px;
    padding: 10px 12px;
    border: 1px solid var(--sigo-border);
    border-left: 4px solid var(--sigo-atencao);
    border-radius: 8px;
    background: var(--sigo-surface);
}
.ws-lig-pico-quando { display: flex; flex-direction: column; }
.ws-lig-pico-dia  { font-size: .75rem; color: var(--sigo-muted); font-weight: 600; }
.ws-lig-pico-hora { font-size: 1rem; font-weight: 700; color: var(--sigo-text); }
.ws-lig-pico-qtd  { display: flex; align-items: baseline; gap: 6px; font-variant-numeric: tabular-nums; }
.ws-lig-pico-qtd strong { font-size: 1.375rem; color: var(--sigo-text); line-height: 1; }
.ws-lig-pico-qtd span   { font-size: .75rem; color: var(--sigo-muted); }
.ws-lig-pico-aumento {
    font-size: .75rem; font-weight: 700;
    color: var(--sigo-atencao-tinta);
    background: var(--sigo-atencao-fundo);
    border-radius: 6px; padding: 3px 8px; align-self: flex-start;
}

/* Ligações › Tendências › Comparativo com o período anterior: resumo + tabela (antes, agora, barras, variação,
   situação). Verde = melhorou, vermelho = piorou, neutro para volume/duração — sempre com texto, nunca só cor. */
.ws-lig-tend-pilha { display: flex; flex-direction: column; gap: 12px; }
.ws-lig-comp-resumo { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.ws-lig-comp-chip {
    font-size: .75rem; font-weight: 600; padding: 3px 10px; border-radius: 999px;
    color: var(--sigo-muted); background: color-mix(in srgb, var(--sigo-muted) 12%, transparent);
}
.ws-lig-comp-chip--melhor { color: var(--sigo-sucesso-tinta); background: var(--sigo-sucesso-fundo); }
.ws-lig-comp-chip--pior   { color: var(--sigo-perigo-tinta); background: var(--sigo-perigo-fundo); }

.ws-lig-comp-tabela { display: flex; flex-direction: column; }
.ws-lig-comp-linha {
    display: grid;
    grid-template-columns: minmax(170px, 1.4fr) 90px 90px minmax(120px, 1.2fr) 90px 100px;
    align-items: center; gap: 12px;
    padding: 8px 4px;
    border-bottom: 1px solid var(--sigo-border);
    font-size: .8125rem; font-variant-numeric: tabular-nums;
}
.ws-lig-comp-linha:last-child { border-bottom: none; }
.ws-lig-comp-linha--cab {
    font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--sigo-muted);
    padding-top: 0;
}
.ws-lig-comp-nome  { font-weight: 600; color: var(--sigo-text); }
.ws-lig-comp-ant   { color: var(--sigo-muted); }
.ws-lig-comp-atual { color: var(--sigo-text); font-weight: 700; }
.ws-lig-comp-ant small, .ws-lig-comp-atual small { display: none; }
.ws-lig-comp-col-barras { display: flex; flex-direction: column; gap: 3px; }
.ws-lig-comp-barra { display: block; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--sigo-muted) 10%, transparent); overflow: hidden; }
.ws-lig-comp-barra > span { display: block; height: 100%; border-radius: 3px; }
.ws-lig-comp-barra--ant   > span { background: color-mix(in srgb, var(--sigo-muted) 55%, transparent); }
.ws-lig-comp-barra--atual > span { background: var(--sigo-destaque); }
.ws-lig-comp-var { font-weight: 700; white-space: nowrap; color: var(--sigo-muted); }
.ws-lig-comp-var--melhor { color: var(--sigo-sucesso-tinta); }
.ws-lig-comp-var--pior   { color: var(--sigo-perigo-tinta); }
.ws-lig-comp-var--neutro { color: var(--sigo-text); }
.ws-lig-comp-sit {
    display: inline-block; font-size: .6875rem; font-weight: 700; padding: 2px 8px; border-radius: 4px; white-space: nowrap;
    color: var(--sigo-muted); background: color-mix(in srgb, var(--sigo-muted) 12%, transparent);
}
.ws-lig-comp-sit--melhor { color: var(--sigo-sucesso-tinta); background: var(--sigo-sucesso-fundo); }
.ws-lig-comp-sit--pior   { color: var(--sigo-perigo-tinta); background: var(--sigo-perigo-fundo); }
.ws-lig-comp-sit--neutro { color: var(--sigo-info-tinta); background: var(--sigo-info-fundo); }

/* Celular/tablet estreito: cada indicador vira um bloco de 2 linhas (nome + situação / antes, agora, variação). */
@media (max-width: 760px) {
    .ws-lig-comp-linha--cab { display: none; }
    .ws-lig-comp-linha { grid-template-columns: 1fr 1fr 1fr; row-gap: 6px; }
    .ws-lig-comp-nome { grid-column: 1 / 3; }
    .ws-lig-comp-col-barras { display: none; }
    .ws-lig-comp-ant small, .ws-lig-comp-atual small { display: block; font-size: .625rem; font-weight: 600; color: var(--sigo-muted); text-transform: uppercase; }
}
/* ── Ligações › Tendências: Horários de maior volume, Períodos do mês e extras do Comparativo ───────────────── */
.ws-lig-tend-rank { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
.ws-lig-tend-rank-full { grid-column: 1 / -1; }
@media (max-width: 1100px) { .ws-lig-tend-rank { grid-template-columns: 1fr; } }

.ws-lig-janela {
    display: flex; flex-direction: column; gap: 2px;
    padding: 10px 12px; border-radius: 8px;
    border-left: 4px solid var(--sigo-destaque);
    background: var(--sigo-destaque-fundo);
}
.ws-lig-janela-rotulo { font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--sigo-muted); }
.ws-lig-janela-hora   { font-size: 1.25rem; font-weight: 700; color: var(--sigo-text); }
.ws-lig-janela-sub    { font-size: .75rem; color: var(--sigo-text); }

.ws-lig-top { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ws-lig-top li {
    display: grid; grid-template-columns: 26px minmax(90px, 1fr) auto auto auto; align-items: center; gap: 10px;
    font-size: .8125rem; font-variant-numeric: tabular-nums; color: var(--sigo-text);
}
.ws-lig-top-hora  { font-weight: 700; }
.ws-lig-top-media small { color: var(--sigo-muted); }
.ws-lig-top-vezes { font-size: .75rem; font-weight: 700; color: var(--sigo-atencao-tinta); background: var(--sigo-atencao-fundo); padding: 2px 8px; border-radius: 6px; white-space: nowrap; }
.ws-lig-top-fatia { font-size: .75rem; color: var(--sigo-muted); white-space: nowrap; }
@media (max-width: 560px) { .ws-lig-top li { grid-template-columns: 26px 1fr auto; } .ws-lig-top-fatia, .ws-lig-top-media small { display: none; } }

.ws-lig-perfil { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 2px; height: 64px; align-items: end; margin-top: 4px; }
.ws-lig-perfil-col { display: flex; align-items: flex-end; height: 100%; border-radius: 2px; }
.ws-lig-perfil-col--janela { background: var(--sigo-destaque-fundo); }
.ws-lig-perfil-col > span { display: block; width: 100%; min-height: 1px; border-radius: 3px 3px 0 0; background: color-mix(in srgb, var(--sigo-destaque) 40%, var(--sigo-surface)); }
.ws-lig-perfil-col--top > span { background: var(--sigo-destaque); }
.ws-lig-perfil-eixo { display: flex; justify-content: space-between; font-size: .6875rem; color: var(--sigo-muted); }

.ws-lig-turnos { display: flex; flex-direction: column; gap: 5px; }
.ws-lig-turno { display: grid; grid-template-columns: minmax(130px, auto) minmax(40px, 1fr) 52px; align-items: center; gap: 8px; font-size: .75rem; color: var(--sigo-text); }
.ws-lig-turno-pct { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }

.ws-lig-periodos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 760px) { .ws-lig-periodos { grid-template-columns: 1fr; } }
.ws-lig-periodo {
    display: flex; flex-direction: column; gap: 4px; padding: 10px 12px;
    border: 1px solid var(--sigo-border); border-radius: 8px; background: var(--sigo-surface);
}
.ws-lig-periodo--maior { border-color: var(--sigo-destaque); box-shadow: 0 0 0 1px var(--sigo-destaque) inset; }
.ws-lig-periodo-nome  { font-size: .8125rem; font-weight: 700; color: var(--sigo-text); }
.ws-lig-periodo-media { font-size: 1.375rem; font-weight: 700; color: var(--sigo-text); font-variant-numeric: tabular-nums; }
.ws-lig-periodo-media small { font-size: .75rem; font-weight: 500; color: var(--sigo-muted); }
.ws-lig-periodo-dif { font-size: .75rem; font-weight: 700; }
.ws-lig-periodo-dif--up   { color: var(--sigo-atencao-tinta); }
.ws-lig-periodo-dif--down { color: var(--sigo-info-tinta); }
.ws-lig-periodo-dif--flat { color: var(--sigo-muted); }
.ws-lig-periodo-sub { font-size: .75rem; color: var(--sigo-muted); }

.ws-lig-mes { display: grid; grid-template-columns: repeat(31, minmax(0, 1fr)); gap: 2px; height: 80px; align-items: end; margin-top: 12px; }
.ws-lig-mes-col { display: flex; align-items: flex-end; height: 100%; }
.ws-lig-mes-col > span { display: block; width: 100%; min-height: 1px; border-radius: 3px 3px 0 0; }
.ws-lig-mes-col--ini  > span { background: var(--sigo-destaque); }
.ws-lig-mes-col--meio > span { background: color-mix(in srgb, var(--sigo-destaque) 60%, var(--sigo-surface)); }
.ws-lig-mes-col--fim  > span { background: color-mix(in srgb, var(--sigo-destaque) 32%, var(--sigo-surface)); }
.ws-lig-mes-col--meio, .ws-lig-mes-col--fim { }
.ws-lig-mes-col:nth-child(11), .ws-lig-mes-col:nth-child(21) { border-left: 1px dashed var(--sigo-border); padding-left: 1px; }
.ws-lig-mes-col--vazio > span { background: transparent; border: 1px dashed var(--sigo-border); height: 6px !important; }
.ws-lig-mes-eixo { display: grid; grid-template-columns: 10fr 10fr 11fr; font-size: .6875rem; color: var(--sigo-muted); margin-top: 4px; }
.ws-lig-mes-eixo span { text-align: center; }

.ws-lig-comp-narrativa { margin: 0 0 10px; padding: 10px 12px; border-radius: 8px; background: color-mix(in srgb, var(--sigo-muted) 7%, transparent); }
.ws-lig-comp-narrativa p { margin: 0; font-size: .8125rem; color: var(--sigo-text); line-height: 1.5; }
.ws-lig-comp-grafico { margin-bottom: 8px; }
.ws-lig-comp-grupo {
    padding: 10px 4px 4px; font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: var(--sigo-destaque-tinta); border-bottom: 1px solid var(--sigo-border);
}

/* ── Painel de Controle › Ligações › Performance por Técnico (DashboardLigacoesPerformance.razor) ──────────── */
.ws-lig-perf-controle {
    display: grid; grid-template-columns: minmax(240px, 1fr) auto auto; align-items: end; gap: 14px;
    padding: 12px 14px; border: 1px solid var(--sigo-border); border-radius: 10px; background: var(--sigo-surface);
}
@media (max-width: 1100px) { .ws-lig-perf-controle { grid-template-columns: 1fr; } }
.ws-lig-perf-tecnico-info { display: block; margin-top: 4px; font-size: .75rem; color: var(--sigo-muted); }
.ws-lig-perf-periodo { display: flex; flex-direction: column; gap: 4px; }
.ws-lig-perf-rotulo { font-size: .75rem; color: var(--sigo-muted); }
.ws-lig-perf-acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.ws-lig-perf-ao-vivo { display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; font-weight: 600; color: var(--sigo-destaque-tinta);
    background: var(--sigo-destaque-fundo); padding: 4px 10px; border-radius: 999px; }
.ws-lig-perf-pulso { width: 8px; height: 8px; border-radius: 50%; background: var(--sigo-destaque); animation: ws-lig-pulso 1.6s ease-in-out infinite; }
@keyframes ws-lig-pulso { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .ws-lig-perf-pulso { animation: none; } }

/* Segmentos (período, direção, paginação) e pílulas de métrica */
.ws-lig-segmentos { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 10px; background: color-mix(in srgb, var(--sigo-muted) 12%, transparent); }
.ws-lig-segmentos button {
    display: inline-flex; align-items: center; gap: 4px; border: 0; background: transparent; cursor: pointer;
    padding: 6px 12px; border-radius: 8px; font: inherit; font-size: .75rem; font-weight: 600; color: var(--sigo-muted);
}
.ws-lig-segmentos button:hover:not(:disabled) { color: var(--sigo-text); }
.ws-lig-segmentos button.ativo { background: var(--sigo-surface); color: var(--sigo-destaque-tinta); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.ws-lig-segmentos button:disabled { opacity: .45; cursor: default; }
.ws-lig-segmentos button:focus-visible, .ws-lig-pilulas button:focus-visible { outline: 2px solid var(--sigo-destaque); outline-offset: 1px; }
.ws-lig-segmentos--peq button { padding: 4px 10px; }
.ws-lig-pilulas { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.ws-lig-pilulas button {
    border: 1px solid var(--sigo-border); background: var(--sigo-surface); color: var(--sigo-muted); cursor: pointer; white-space: nowrap;
    padding: 5px 14px; border-radius: 999px; font: inherit; font-size: .75rem; font-weight: 600;
}
.ws-lig-pilulas button.ativo { background: var(--sigo-destaque); border-color: var(--sigo-destaque); color: var(--sigo-surface); }

.ws-lig-perf-titulo { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 14px 0 8px; }
.ws-lig-perf-titulo h3 { margin: 0; font-size: 1.125rem; font-weight: 700; color: var(--sigo-text); }
.ws-lig-perf-titulo span { font-size: .75rem; color: var(--sigo-muted); }

/* 6 indicadores */
.ws-lig-perf-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1400px) { .ws-lig-perf-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .ws-lig-perf-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px)  { .ws-lig-perf-kpis { grid-template-columns: 1fr; } }
.ws-lig-perf-kpi { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border: 1px solid var(--sigo-border); border-radius: 10px; background: var(--sigo-surface); min-width: 0; }
.ws-lig-perf-kpi-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; }
.ws-lig-perf-kpi-rotulo { font-size: .75rem; font-weight: 600; color: var(--sigo-muted); }
.ws-lig-perf-kpi-valor { font-size: 1.625rem; font-weight: 700; line-height: 1.15; color: var(--sigo-text); font-variant-numeric: tabular-nums; }
.ws-lig-perf-kpi-ref { font-size: .75rem; color: var(--sigo-muted); }
.ws-lig-perf-kpi-rodape { display: flex; justify-content: space-between; gap: 6px; flex-wrap: wrap; font-size: .6875rem; color: var(--sigo-muted); }
.ws-lig-perf-delta { font-size: .6875rem; font-weight: 700; padding: 1px 6px; border-radius: 4px; white-space: nowrap; color: var(--sigo-muted); background: color-mix(in srgb, var(--sigo-muted) 12%, transparent); }
.ws-lig-perf-delta--bom  { color: var(--sigo-sucesso-tinta); background: var(--sigo-sucesso-fundo); }
.ws-lig-perf-delta--ruim { color: var(--sigo-perigo-tinta); background: var(--sigo-perigo-fundo); }
.ws-lig-perf-barra { position: relative; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--sigo-muted) 14%, transparent); }
.ws-lig-perf-barra-fill { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: var(--sigo-destaque); }
.ws-lig-perf-barra-fill--bom  { background: var(--sigo-sucesso); }
.ws-lig-perf-barra-fill--ruim { background: var(--sigo-perigo); }
.ws-lig-perf-barra-marca { position: absolute; top: -3px; width: 2px; height: 12px; margin-left: -1px; background: var(--sigo-text); border-radius: 1px; }
.ws-lig-perf-status { font-weight: 700; color: var(--sigo-muted); }
.ws-lig-perf-status--bom  { color: var(--sigo-sucesso-tinta); }
.ws-lig-perf-status--ruim { color: var(--sigo-perigo-tinta); }

/* Grade: série (60%) + ranking/evolução (40%) */
.ws-lig-perf-grade { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 14px; margin-top: 14px; align-items: start; }
@media (max-width: 1100px) { .ws-lig-perf-grade { grid-template-columns: 1fr; } }
.ws-lig-perf-lateral { display: flex; flex-direction: column; gap: 14px; }
.ws-lig-perf-resumo {
    display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
    padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--sigo-muted) 7%, transparent);
}
.ws-lig-perf-resumo-destaque { display: flex; align-items: center; gap: 10px; color: var(--sigo-destaque-tinta); }
.ws-lig-perf-resumo-destaque strong { display: block; font-size: .8125rem; color: var(--sigo-text); }
.ws-lig-perf-resumo-destaque span { font-size: .75rem; color: var(--sigo-muted); }
.ws-lig-perf-resumo-num { display: flex; flex-direction: column; font-size: .75rem; color: var(--sigo-muted); }
.ws-lig-perf-resumo-num strong { font-size: .9375rem; color: var(--sigo-text); font-variant-numeric: tabular-nums; }

/* Ranking (cartão escuro de marca) */
.ws-lig-perf-ranking {
    padding: 16px; border-radius: 12px; color: #fff;
    background: linear-gradient(135deg, var(--sigo-primary) 0%, color-mix(in srgb, var(--sigo-primary) 70%, var(--sigo-destaque)) 100%);
}
.ws-lig-perf-ranking-topo { display: flex; justify-content: space-between; align-items: center; }
.ws-lig-perf-ranking-rotulo { font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; opacity: .85; }
.ws-lig-perf-ranking .ws-tutor-icon { color: rgba(255,255,255,.85) !important; }
.ws-lig-perf-posicao { display: flex; align-items: baseline; gap: 8px; margin: 8px 0 4px; }
.ws-lig-perf-posicao strong { font-size: 1.625rem; }
.ws-lig-perf-posicao span, .ws-lig-perf-ranking-vazio { font-size: .75rem; opacity: .8; }
.ws-lig-perf-ranking-lista { list-style: none; margin: 10px 0 0; padding: 10px 0 0; border-top: 1px solid rgba(255,255,255,.18); display: flex; flex-direction: column; gap: 4px; }
.ws-lig-perf-ranking-lista li { display: grid; grid-template-columns: 26px 26px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 8px; font-size: .8125rem; }
.ws-lig-perf-ranking--eu { background: rgba(255,255,255,.14); font-weight: 700; }
.ws-lig-perf-ranking-pos { font-weight: 700; font-size: .75rem; opacity: .9; }
.ws-lig-perf-ranking-avatar { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .625rem; font-weight: 700; background: rgba(255,255,255,.2); }
.ws-lig-perf-ranking-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-lig-perf-ranking-valor { font-weight: 700; font-variant-numeric: tabular-nums; }

.ws-lig-perf-evolucao { display: flex; flex-direction: column; gap: 10px; }
.ws-lig-perf-evolucao-topo { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 4px; font-size: .75rem; color: var(--sigo-text); font-weight: 600; }

/* Tabela de chamadas */
.ws-lig-perf-busca { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ws-lig-perf-busca .mud-input-control { min-width: 260px; }
.ws-lig-perf-tabela td { vertical-align: middle; }
.ws-lig-perf-protocolo { font-weight: 700; color: var(--sigo-destaque-tinta); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ws-lig-perf-cliente { display: block; font-weight: 600; color: var(--sigo-text); }
.ws-lig-perf-sub { display: block; font-size: .6875rem; color: var(--sigo-muted); }
.ws-lig-perf-fila { font-size: .6875rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--sigo-destaque-fundo); color: var(--sigo-destaque-tinta); white-space: nowrap; }
.ws-lig-perf-desfecho { display: inline-block; margin: 1px 4px 1px 0; font-size: .6875rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap;
    color: var(--sigo-muted); background: color-mix(in srgb, var(--sigo-muted) 12%, transparent); }
.ws-lig-perf-desfecho--bom   { color: var(--sigo-sucesso-tinta); background: var(--sigo-sucesso-fundo); }
.ws-lig-perf-desfecho--ruim  { color: var(--sigo-perigo-tinta); background: var(--sigo-perigo-fundo); }
.ws-lig-perf-desfecho--aviso { color: var(--sigo-atencao-tinta); background: var(--sigo-atencao-fundo); }
.ws-lig-perf-paginas { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; font-size: .75rem; color: var(--sigo-muted); }
.ws-lig-perf-reticencias { padding: 4px 6px; }

/* ── Painel de Controle › Ligações no padrão do modal Performance (barra de controle, títulos, cards) ─────── */
.ws-lig-controle { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "filtros filtros" "periodo acoes"; }
.ws-lig-controle .ws-lig-controle-filtros { grid-area: filtros; }
.ws-lig-controle .ws-lig-perf-periodo { grid-area: periodo; }
.ws-lig-controle .ws-lig-perf-acoes { grid-area: acoes; }
@media (max-width: 1100px) { .ws-lig-controle { grid-template-columns: 1fr; grid-template-areas: "filtros" "periodo" "acoes"; } .ws-lig-controle .ws-lig-perf-acoes { justify-content: flex-start; } }
.ws-lig-controle-filtros { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 1280px) { .ws-lig-controle-filtros { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .ws-lig-controle-filtros { grid-template-columns: 1fr; } }

.ws-lig-nav {
    position: sticky; top: 54px; z-index: 5; margin: 0 0 4px; padding: 6px 0;
    background: color-mix(in srgb, var(--sigo-bg) 92%, transparent); backdrop-filter: blur(6px);
}
.ws-lig-nav .ws-lig-segmentos { overflow-x: auto; flex-wrap: nowrap; max-width: 100%; }
.ws-lig-nav .ws-lig-segmentos button { white-space: nowrap; }
.ws-lig-secao { margin-top: 22px; scroll-margin-top: 110px; }

.ws-lig-kpis--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ws-lig-kpis--7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
@media (max-width: 1600px) { .ws-lig-kpis--7 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1400px) { .ws-lig-kpis--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .ws-lig-kpis--5, .ws-lig-kpis--7 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px)  { .ws-lig-kpis--5, .ws-lig-kpis--7 { grid-template-columns: 1fr; } }
.ws-lig-perf-kpi--clicavel { cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.ws-lig-perf-kpi--clicavel:hover { border-color: var(--sigo-destaque); }
.ws-lig-perf-kpi--clicavel:focus-visible { outline: 2px solid var(--sigo-destaque); outline-offset: 2px; }

.ws-lig-tecnico { display: inline-flex; align-items: center; gap: 8px; }
.ws-lig-avatar {
    width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .625rem; font-weight: 700; color: var(--sigo-destaque-tinta); background: var(--sigo-destaque-fundo);
}

/* ══ Painel de Controle › Ligações — layout 2026-10-13 (ws-lig2-*) ═══════════════════════════════════════════
   Temperatura dos indicadores: --t-cor (borda/barra), --t-tinta (texto), --t-fundo (tinta de fundo).
   Saudável = verde, Atenção = âmbar, Crítico = vermelho, Neutro = azul da marca (volume/duração), Vazio = cinza.
   O laranja de destaque do tema NÃO é usado aqui (parecia alerta). Cor sempre acompanhada de texto/valor. */
.ws-lig2, .ws-temp--neutro {
    --t-cor: var(--sigo-tom-marca); --t-tinta: var(--sigo-tom-marca-tinta);
    --t-fundo: color-mix(in srgb, var(--sigo-tom-marca) 9%, transparent);
}
.ws-temp--bom     { --t-cor: var(--sigo-tom-bom);     --t-tinta: var(--sigo-tom-bom-tinta);     --t-fundo: var(--sigo-sucesso-fundo); }
.ws-temp--atencao { --t-cor: var(--sigo-tom-atencao); --t-tinta: var(--sigo-tom-atencao-tinta); --t-fundo: var(--sigo-atencao-fundo); }
.ws-temp--critico { --t-cor: var(--sigo-tom-critico); --t-tinta: var(--sigo-tom-critico-tinta); --t-fundo: var(--sigo-perigo-fundo); }
.ws-temp--vazio   { --t-cor: var(--sigo-border);      --t-tinta: var(--sigo-muted);             --t-fundo: color-mix(in srgb, var(--sigo-muted) 7%, transparent); }

/* Impressão/PDF: manter barras e fundos coloridos (o navegador remove fundos por padrão). */
.ws-lig2, .ws-lig2 * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

/* ── Barra de controle ── */
.ws-lig2-controle {
    display: flex; flex-direction: column; gap: 12px;
    padding: 14px 16px; border: 1px solid var(--sigo-border); border-radius: 12px; background: var(--sigo-surface);
}
.ws-lig2-controle-topo { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.ws-lig2-controle .ws-lig-controle-filtros { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 1280px) { .ws-lig2-controle .ws-lig-controle-filtros { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .ws-lig2-controle .ws-lig-controle-filtros { grid-template-columns: 1fr; } }
.ws-lig2-ao-vivo { color: var(--sigo-tom-marca-tinta); background: color-mix(in srgb, var(--sigo-tom-marca) 10%, transparent); }
.ws-lig2 .ws-lig-perf-pulso { background: var(--sigo-tom-bom); }
.ws-lig2-filtros-ativos { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: .75rem; color: var(--sigo-muted); }
.ws-lig2-chip {
    display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: .75rem; font-weight: 600;
    color: var(--sigo-tom-marca-tinta); background: color-mix(in srgb, var(--sigo-tom-marca) 10%, transparent);
}

/* ── Cabeçalho + navegação (fixos ao rolar) ── */
.ws-lig2-cabecalho {
    position: sticky; top: 54px; z-index: 6;
    display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
    margin: 12px -4px 0; padding: 8px 4px;
    background: color-mix(in srgb, var(--sigo-bg) 94%, transparent); backdrop-filter: blur(6px);
}
.ws-lig2-cabecalho .ws-lig-perf-titulo { margin: 0; }
.ws-lig2-cabecalho .ws-lig-nav { position: static; margin: 0; padding: 0; background: none; backdrop-filter: none; }
.ws-lig2 .ws-lig-segmentos button.ativo { color: var(--sigo-tom-marca-tinta); }
.ws-lig2 .ws-lig-pilulas button.ativo { background: var(--sigo-tom-marca); border-color: var(--sigo-tom-marca); color: #fff; }

/* ── Seções ── */
.ws-lig2-secao { margin-top: 28px; scroll-margin-top: 130px; }
.ws-lig2-secao-topo { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.ws-lig2-secao-topo h3 { margin: 0; display: inline-flex; align-items: center; gap: 8px; font-size: 1.1875rem; font-weight: 700; color: var(--sigo-text); }
.ws-lig2-secao-topo > span { font-size: .75rem; color: var(--sigo-muted); }
.ws-lig2-clicavel { cursor: pointer; }
.ws-lig2-clicavel:focus-visible { outline: 2px solid var(--sigo-tom-marca); outline-offset: 2px; }

/* ── Agora ── */
.ws-lig2-agora { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1280px) { .ws-lig2-agora { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .ws-lig2-agora { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ws-lig2-agora-item {
    display: flex; flex-direction: column; gap: 4px; min-width: 0;
    padding: 12px 14px; border-radius: 12px; background: var(--sigo-surface);
    border: 1px solid var(--sigo-border); border-top: 4px solid var(--t-cor);
}
.ws-lig2-agora-item.ws-lig2-clicavel:hover { box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.ws-lig2-agora-rotulo { font-size: .75rem; font-weight: 600; color: var(--sigo-muted); }
.ws-lig2-agora-valor  { font-size: 1.75rem; font-weight: 800; line-height: 1.15; color: var(--t-tinta); font-variant-numeric: tabular-nums; }
.ws-lig2-agora-sub    { font-size: .75rem; color: var(--sigo-muted); }
.ws-lig2-agora-sub strong { color: var(--t-tinta); }
.ws-lig2-ao-vivo-lista { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ws-lig2-ao-vivo-item {
    display: inline-flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 10px;
    border: 1px solid var(--sigo-border); background: var(--sigo-surface); font-size: .8125rem;
}
.ws-lig2-ao-vivo-item small { display: block; font-size: .6875rem; color: var(--sigo-muted); }

/* ── Veredito ── */
.ws-lig2-veredito {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 14px 16px; border-radius: 12px;
    background: var(--t-fundo); border: 1px solid color-mix(in srgb, var(--t-cor) 35%, transparent); border-left: 6px solid var(--t-cor);
}
.ws-lig2-veredito-icone {
    display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%;
    background: var(--t-cor); color: #fff; flex-shrink: 0;
}
.ws-lig2-veredito-texto { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 2px; }
.ws-lig2-veredito-texto strong { font-size: 1rem; color: var(--t-tinta); }
.ws-lig2-veredito-texto span { font-size: .8125rem; color: var(--sigo-text); }
.ws-lig2-legenda-temp { display: flex; gap: 10px; font-size: .6875rem; font-weight: 600; color: var(--sigo-muted); }
.ws-lig2-legenda-temp span { display: inline-flex; align-items: center; gap: 4px; }
.ws-lig2-legenda-temp span::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--t-cor); }

/* ── Termômetros ── */
.ws-lig2-termos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
@media (max-width: 1280px) { .ws-lig2-termos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .ws-lig2-termos { grid-template-columns: 1fr; } }
.ws-lig2-termo {
    display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 14px;
    background: linear-gradient(180deg, var(--t-fundo) 0%, var(--sigo-surface) 75%);
    border: 1px solid color-mix(in srgb, var(--t-cor) 35%, var(--sigo-border)); border-top: 5px solid var(--t-cor);
}
.ws-lig2-termo-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; }
.ws-lig2-termo-rotulo { font-size: .8125rem; font-weight: 700; color: var(--sigo-text); }
.ws-lig2-termo-valor { font-size: 2.25rem; font-weight: 800; line-height: 1.05; color: var(--t-tinta); font-variant-numeric: tabular-nums; }
.ws-lig2-termo-estado { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .75rem; color: var(--sigo-muted); }
.ws-lig2-termo-tag {
    font-size: .6875rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
    padding: 2px 8px; border-radius: 999px; color: var(--t-tinta); background: var(--sigo-surface);
    border: 1px solid color-mix(in srgb, var(--t-cor) 45%, transparent);
}
.ws-lig2-medidor { position: relative; height: 10px; border-radius: 5px; background: color-mix(in srgb, var(--sigo-muted) 14%, transparent); margin-top: 2px; }
.ws-lig2-medidor-fill { position: absolute; inset: 0 auto 0 0; border-radius: 5px; background: var(--t-cor); }
.ws-lig2-medidor-marca { position: absolute; top: -4px; width: 3px; height: 18px; margin-left: -1.5px; border-radius: 2px; background: var(--sigo-text); }
.ws-lig2-termo-rodape { font-size: .75rem; color: var(--sigo-muted); }

/* ── Painéis agrupados ── */
.ws-lig2-paineis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
@media (max-width: 1280px) { .ws-lig2-paineis { grid-template-columns: 1fr; } }
.ws-lig2-painel { padding: 12px 16px 6px; border-radius: 12px; border: 1px solid var(--sigo-border); background: var(--sigo-surface); }
.ws-lig2-painel h4 {
    display: flex; align-items: center; gap: 6px; margin: 0 0 4px;
    font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--sigo-tom-marca-tinta);
}
.ws-lig2-linha {
    display: grid; grid-template-columns: minmax(0, 1fr) auto 86px; align-items: center; gap: 10px;
    padding: 9px 0; border-bottom: 1px solid var(--sigo-border);
}
.ws-lig2-linha:last-child { border-bottom: none; }
.ws-lig2-linha.ws-lig2-clicavel:hover { background: color-mix(in srgb, var(--sigo-muted) 5%, transparent); }
.ws-lig2-linha-rotulo { display: flex; flex-direction: column; min-width: 0; font-size: .8125rem; color: var(--sigo-text); }
.ws-lig2-linha-rotulo small { font-size: .6875rem; color: var(--sigo-muted); }
.ws-lig2-linha-valor {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 1.0625rem; font-weight: 800; color: var(--t-tinta); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ws-lig2-linha-valor::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--t-cor); }
.ws-lig2-linha.ws-temp--neutro .ws-lig2-linha-valor { color: var(--sigo-text); }
.ws-lig2-linha.ws-temp--neutro .ws-lig2-linha-valor::before { background: color-mix(in srgb, var(--sigo-tom-marca) 50%, transparent); }
.ws-lig2-linha-delta { text-align: right; }

/* ── Selos de temperatura (tabelas) ── */
.ws-lig2-pill {
    display: inline-block; min-width: 54px; text-align: center; padding: 2px 8px; border-radius: 999px; white-space: nowrap;
    font-size: .75rem; font-weight: 700; font-variant-numeric: tabular-nums;
    color: var(--t-tinta); background: var(--t-fundo); border: 1px solid color-mix(in srgb, var(--t-cor) 30%, transparent);
}

/* ── Por hora ── */
.ws-lig2-hora { display: grid; grid-template-columns: minmax(0, 3fr) minmax(260px, 1.1fr); gap: 12px; }
@media (max-width: 1100px) { .ws-lig2-hora { grid-template-columns: 1fr; } }
.ws-lig2-criticos { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.ws-lig2-chip--info  { color: var(--sigo-tom-marca-tinta); background: color-mix(in srgb, var(--sigo-tom-marca) 10%, transparent); }
.ws-lig2-chip--erro  { color: var(--sigo-perigo-tinta);   background: var(--sigo-perigo-fundo); }
.ws-lig2-chip--aviso { color: var(--sigo-atencao-tinta);  background: var(--sigo-atencao-fundo); }
.ws-lig2-chip--ok    { color: var(--sigo-sucesso-tinta);  background: var(--sigo-sucesso-fundo); }
.ws-lig2-barras { height: 200px; }
.ws-lig2-barra-total { display: block; text-align: center; font-size: .6875rem; font-weight: 700; color: var(--sigo-text); font-variant-numeric: tabular-nums; margin-bottom: 2px; }
.ws-lig2-dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; align-items: end; }
.ws-lig2-dia { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.ws-lig2-dia-valor { font-size: .75rem; font-weight: 700; color: var(--sigo-text); min-height: 1em; }
.ws-lig2-dia-barra { display: flex; align-items: flex-end; width: 100%; max-width: 34px; height: 110px; border-radius: 6px; background: color-mix(in srgb, var(--sigo-muted) 10%, transparent); }
.ws-lig2-dia-barra > span { display: block; width: 100%; border-radius: 6px; background: var(--sigo-tom-marca); min-height: 2px; }
.ws-lig2-dia-nome { font-size: .75rem; font-weight: 600; color: var(--sigo-muted); }
.ws-lig2-dia .ws-lig2-pill { min-width: 0; padding: 1px 5px; font-size: .625rem; }
.ws-lig2-nota { display: block; margin-top: 8px; font-size: .6875rem; color: var(--sigo-muted); }

/* ── Grades (hora a hora, filas, técnicos, perdidas) ── */
.ws-lig2-grade { overflow-x: auto; }
.ws-lig2-grade > div { display: grid; grid-template-columns: var(--colunas); align-items: center; gap: 10px; min-width: var(--minimo, 0); padding: 8px 6px; border-bottom: 1px solid var(--sigo-border); font-size: .8125rem; font-variant-numeric: tabular-nums; }
.ws-lig2-grade > div:last-child { border-bottom: none; }
.ws-lig2-grade-cab { font-size: .6875rem !important; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--sigo-muted); padding-top: 0 !important; }
.ws-lig2-grade-linha:hover { background: color-mix(in srgb, var(--sigo-tom-marca) 5%, transparent); }
.ws-lig2-grade--hora     { --colunas: 64px repeat(3, minmax(60px, 1fr)) repeat(3, minmax(84px, 1fr)) minmax(84px, 1fr) minmax(64px, 1fr) minmax(84px, 1fr); --minimo: 900px; }
.ws-lig2-grade--fila     { --colunas: minmax(200px, 2fr) minmax(160px, 1.5fr) minmax(84px, .8fr) repeat(6, minmax(84px, 1fr)); --minimo: 1020px; }
.ws-lig2-grade--tecnico  { --colunas: minmax(210px, 2fr) minmax(140px, 1.4fr) minmax(64px, .7fr) minmax(84px, 1fr) minmax(84px, 1fr) minmax(84px, 1fr) minmax(64px, .7fr) minmax(84px, 1fr) minmax(90px, 1fr); --minimo: 1000px; }
.ws-lig2-grade--atencao  { --colunas: minmax(210px, 1.8fr) minmax(150px, 1.2fr) repeat(6, minmax(96px, 1fr)); --minimo: 1080px; }
.ws-lig2-grade--perdidas { --colunas: 110px minmax(150px, 1fr) minmax(160px, 1.4fr) 100px minmax(190px, 1.2fr); --minimo: 720px; }
.ws-lig2-nome { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-weight: 700; color: var(--sigo-text); }
.ws-lig2-nome small { display: block; font-size: .6875rem; font-weight: 500; color: var(--sigo-muted); }
.ws-lig2-ponto { width: 9px; height: 9px; border-radius: 50%; background: var(--sigo-tom-marca); flex-shrink: 0; }
.ws-lig2-volume { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.ws-lig2-volume-barra { flex: 1; height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--sigo-muted) 12%, transparent); overflow: hidden; }
.ws-lig2-volume-barra > span { display: block; height: 100%; border-radius: 4px; background: var(--sigo-tom-marca); }
/* Números da grade: alinhados à direita (unidades sob unidades) e afastados da coluna seguinte. */
.ws-lig2-volume-num { min-width: 4ch; text-align: right; }
.ws-lig2-volume-cab { text-align: right; }
.ws-lig2-num { text-align: right; padding-right: 22px; }
.ws-lig2-num--alerta { font-weight: 700; color: var(--sigo-tom-critico-tinta); }
.ws-lig2-num--zero { color: var(--sigo-muted); }

/* Performance › "Técnicos abaixo da média": célula = valor do técnico + distância para a média da equipe. */
.ws-lig-perf-kpis--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .ws-lig-perf-kpis--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px)  { .ws-lig-perf-kpis--4 { grid-template-columns: 1fr; } }
.ws-lig-perf-kpi-valor--ruim { color: var(--sigo-perigo-tinta); }
.ws-lig-atencao-cab small { display: block; margin-top: 2px; font-size: .625rem; font-weight: 500; text-transform: none; letter-spacing: 0; }
.ws-lig-atencao-indice { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.ws-lig-atencao-indice small { font-size: .6875rem; color: var(--sigo-muted); }
.ws-lig-atencao-celula { display: flex; flex-direction: column; gap: 1px; padding: 4px 8px; border-radius: 6px; border-left: 3px solid transparent; }
.ws-lig-atencao-celula strong { font-weight: 700; color: var(--sigo-text); white-space: nowrap; }
.ws-lig-atencao-celula small { font-size: .6875rem; font-weight: 600; color: var(--sigo-muted); }
.ws-lig-atencao-celula--ruim { background: var(--sigo-perigo-fundo); border-left-color: var(--sigo-perigo); }
.ws-lig-atencao-celula--ruim small { color: var(--sigo-perigo-tinta); }
.ws-lig-atencao-celula--bom small { color: var(--sigo-sucesso-tinta); }
.ws-lig-atencao-piorou { margin-left: 4px; font-size: .625rem; color: var(--sigo-perigo-tinta); }
.ws-lig2 .ws-lig-avatar { color: var(--sigo-tom-marca-tinta); background: color-mix(in srgb, var(--sigo-tom-marca) 13%, transparent); }

/* Mapas de calor desta tela: volume em azul da marca; métricas "quanto mais, pior" seguem em vermelho. */
.ws-lig2 .ws-lig-mapa:not(.ws-lig-mapa--alerta), .ws-lig2 .ws-lig-escala:not(.ws-lig-mapa--alerta) { --ws-lig-tom: var(--sigo-tom-marca); }


/* ── Ligações: cabeçalho da página, quadro de filtros e navegação (2026-10-13) ────────────────────────────── */
.ws-lig2-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 12px; }
.ws-lig2-topo-titulo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ws-lig2-topo-linha { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; }
.ws-lig2-topo-linha h2 { margin: 0; font-size: 1.375rem; font-weight: 800; color: var(--sigo-text); }
.ws-lig2-topo-linha .ws-dcob-auto { margin: 0; }
.ws-lig2-topo-sub { font-size: .8125rem; color: var(--sigo-muted); }
.ws-lig2-topo-acoes { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ws-lig2-grupo { display: flex; align-items: center; gap: 8px; }
.ws-lig2-divisor { width: 1px; height: 28px; background: var(--sigo-border); }
@media (max-width: 700px) { .ws-lig2-divisor { display: none; } }

.ws-lig2-controle { gap: 0; padding: 4px 16px; }
.ws-lig2-controle-linha { display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: start; gap: 12px; padding: 12px 0; }
.ws-lig2-controle-linha + .ws-lig2-controle-linha { border-top: 1px solid var(--sigo-border); }
.ws-lig2-controle-rotulo {
    padding-top: 9px; font-size: .6875rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--sigo-muted);
}
.ws-lig2-controle-campos { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; min-width: 0; }
.ws-lig2-controle-campos--coluna { flex-direction: column; align-items: stretch; }
.ws-lig2-datas { width: 260px; max-width: 100%; }
.ws-lig2-datas .mud-input-control { margin: 0; }
@media (max-width: 600px) { .ws-lig2-controle-linha { grid-template-columns: 1fr; gap: 6px; } .ws-lig2-controle-rotulo { padding-top: 0; } }

.ws-lig2-nav {
    position: sticky; top: 54px; z-index: 6;
    display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap;
    margin: 12px -4px 0; padding: 8px 4px;
    background: color-mix(in srgb, var(--sigo-bg) 94%, transparent); backdrop-filter: blur(6px);
}
.ws-lig2-nav .ws-lig-segmentos { overflow-x: auto; flex-wrap: nowrap; max-width: 100%; }
.ws-lig2-nav .ws-lig-segmentos button { white-space: nowrap; }
.ws-lig2-nav-periodo { font-size: .75rem; font-weight: 600; color: var(--sigo-muted); }

/* ── Ligações: cada seção é um BLOCO (2026-10-14) ───────────────────────────────────────────────────────────────
   Moldura própria, fundo levemente acinzentado (os cards internos, brancos, se destacam) e faixa de título com o
   acento do bloco (--s-cor). "Perdidas sem retorno" usa a temperatura (verde/âmbar/vermelho) como acento. */
.ws-lig2-secao {
    --s-cor: var(--sigo-tom-marca);
    margin-top: 22px; padding: 0 18px 18px;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--s-cor) 22%, var(--sigo-border));
    background: color-mix(in srgb, var(--sigo-bg) 55%, var(--sigo-surface));
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 14px rgba(15, 23, 42, .05);
    overflow: hidden;
}
.ws-lig2-bloco--agora    { --s-cor: var(--sigo-tom-info); }
.ws-lig2-bloco--saude    { --s-cor: var(--sigo-tom-marca); }
.ws-lig2-bloco--hora     { --s-cor: var(--sigo-tom-info); }
.ws-lig2-bloco--filas    { --s-cor: var(--sigo-tom-marca); }
.ws-lig2-bloco--tecnicos { --s-cor: var(--sigo-tom-info); }
.ws-lig2-bloco--perdidas { --s-cor: var(--t-cor); }

.ws-lig2-secao > .ws-lig2-secao-topo {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin: 0 -18px 16px; padding: 14px 18px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--s-cor) 12%, var(--sigo-surface)) 0%, var(--sigo-surface) 70%);
    border-bottom: 1px solid color-mix(in srgb, var(--s-cor) 20%, var(--sigo-border));
    box-shadow: inset 4px 0 0 var(--s-cor);
}
.ws-lig2-secao-icone {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 38px; height: 38px; border-radius: 11px;
    color: var(--s-cor); background: color-mix(in srgb, var(--s-cor) 14%, var(--sigo-surface));
    border: 1px solid color-mix(in srgb, var(--s-cor) 30%, transparent);
}
.ws-lig2-secao-titulo { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.ws-lig2-secao-titulo h3 { margin: 0; font-size: 1.125rem; font-weight: 800; color: var(--sigo-text); }
.ws-lig2-secao-titulo span { font-size: .75rem; color: var(--sigo-muted); }
.ws-lig2-secao-resumo { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ws-lig2-secao-resumo .ws-lig2-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font-size: .75rem; }
.ws-lig2-secao-resumo .ws-lig-perf-pulso { width: 7px; height: 7px; }

/* Cards internos brancos sobre o fundo do bloco. */
.ws-lig2-secao .ws-ind-card,
.ws-lig2-secao .ws-lig2-painel,
.ws-lig2-secao .ws-lig2-agora-item { background: var(--sigo-surface); box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.ws-lig2-secao .ws-ind-card { border: 1px solid var(--sigo-border); }

@media (max-width: 600px) {
    .ws-lig2-secao { padding: 0 12px 12px; border-radius: 12px; }
    .ws-lig2-secao > .ws-lig2-secao-topo { margin: 0 -12px 12px; padding: 12px; }
}

/* Blocos reaproveitados nos modais (PainelBloco): acentos genéricos e o primeiro bloco sem margem extra. */
.ws-lig2-bloco--marca   { --s-cor: var(--sigo-tom-marca); }
.ws-lig2-bloco--info    { --s-cor: var(--sigo-tom-info); }
.ws-lig2-bloco--bom     { --s-cor: var(--sigo-tom-bom); }
.ws-lig2-bloco--atencao { --s-cor: var(--sigo-tom-atencao); }
.ws-lig2-bloco--critico { --s-cor: var(--sigo-tom-critico); }
.ws-lig2-bloco--primeiro { margin-top: 14px; }
/* Dentro de grades/pilhas dos modais o espaçamento vem do gap, não da margem do bloco. */
.ws-lig-perf-grade > .ws-lig2-secao, .ws-lig-tend-pilha > .ws-lig2-secao { margin-top: 0; }
.ws-lig-perf-grade { margin-top: 18px; }
.ws-lig-tend-pilha { margin-top: 18px; gap: 18px; }
.ws-lig2-secao .ws-lig-perf-lateral .ws-ind-card { box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.ws-lig2-secao .ws-lig-prev-kpi, .ws-lig2-secao .ws-lig-perf-kpi, .ws-lig2-secao .ws-lig-periodo { background: var(--sigo-surface); }

/* ── Tendências › Antes × agora (2026-10-14): resumo + gráfico lado a lado; indicadores em painéis por grupo ──
   Agora = azul da marca, antes = cinza tracejado (sem o laranja de destaque). Situação: verde melhorou, vermelho
   piorou, azul subiu/caiu (neutro), cinza igual — sempre escrita na pílula. */
.ws-lig-comp-topo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 14px; align-items: stretch; margin: 12px 0 14px; }
@media (max-width: 1000px) { .ws-lig-comp-topo { grid-template-columns: 1fr; } }
.ws-lig-comp-topo .ws-lig-comp-narrativa { margin: 0; display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; }
.ws-lig-comp-topo .ws-lig-comp-narrativa p { font-size: .875rem; }
.ws-lig-comp-grafico { margin: 0; padding: 10px 12px; border: 1px solid var(--sigo-border); border-radius: 10px; background: var(--sigo-surface); }
.ws-lig-comp-grafico svg { width: 100%; height: 170px; }
.ws-lig-comp-grafico .ws-lig-grafico-linha:not(.ws-lig-grafico-linha--prev) { stroke: var(--sigo-tom-marca); }
.ws-lig-comp-grafico .ws-lig-hover-ponto { fill: var(--sigo-tom-marca); }
.ws-lig-comp-grafico .ws-lig-leg--real { background: color-mix(in srgb, var(--sigo-tom-marca) 10%, transparent); border-top-color: var(--sigo-tom-marca); }

.ws-lig-comp-grupos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1400px) { .ws-lig-comp-grupos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .ws-lig-comp-grupos { grid-template-columns: 1fr; } }
.ws-lig-comp-painel { padding: 12px 14px 4px; border: 1px solid var(--sigo-border); border-radius: 12px; background: var(--sigo-surface); }
.ws-lig-comp-painel h4 { margin: 0 0 6px; font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--sigo-tom-marca-tinta); }

.ws-lig-comp-item {
    --c: var(--sigo-border);
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nome veredito" "valores veredito";
    align-items: center; gap: 2px 10px; padding: 9px 0 9px 10px; margin-left: -2px;
    border-left: 3px solid var(--c); border-bottom: 1px solid var(--sigo-border);
}
.ws-lig-comp-item:last-child { border-bottom: none; }
.ws-lig-comp-item--melhor { --c: var(--sigo-tom-bom); }
.ws-lig-comp-item--pior   { --c: var(--sigo-tom-critico); }
.ws-lig-comp-item--neutro { --c: var(--sigo-tom-marca); }
.ws-lig-comp-item .ws-lig-comp-nome { grid-area: nome; font-size: .8125rem; font-weight: 600; color: var(--sigo-text); }
.ws-lig-comp-valores { grid-area: valores; display: inline-flex; align-items: baseline; gap: 6px; font-variant-numeric: tabular-nums; }
.ws-lig-comp-antes { font-size: .8125rem; color: var(--sigo-muted); }
.ws-lig-comp-seta  { font-size: .75rem; color: var(--sigo-muted); }
.ws-lig-comp-valores strong { font-size: 1.0625rem; font-weight: 800; color: var(--sigo-text); }
.ws-lig-comp-veredito {
    grid-area: veredito; justify-self: end; white-space: nowrap;
    font-size: .6875rem; font-weight: 700; padding: 3px 9px; border-radius: 999px;
    color: var(--sigo-muted); background: color-mix(in srgb, var(--sigo-muted) 12%, transparent);
}
.ws-lig-comp-veredito--melhor { color: var(--sigo-sucesso-tinta); background: var(--sigo-sucesso-fundo); }
.ws-lig-comp-veredito--pior   { color: var(--sigo-perigo-tinta);  background: var(--sigo-perigo-fundo); }
.ws-lig-comp-veredito--neutro { color: var(--sigo-tom-marca-tinta); background: color-mix(in srgb, var(--sigo-tom-marca) 10%, transparent); }


/* ══ Painel de Controle › Tickets (Tiflux) — 2026-10-15 (ws-tkt-*) ═══════════════════════════════════════════════
   Reaproveita o layout do painel de Ligações (ws-lig2-*: blocos, termômetros, grades, selos de temperatura).
   Séries: abertos = azul da marca, resolvidos = verde (saudável), backlog = ciano (info), projeção = tracejado.
   Idade do backlog em degradê verde → vermelho. Rosca de canais na paleta de gráficos (--viz-*). */
.ws-tkt { --tkt-criados: var(--sigo-tom-marca); --tkt-resolvidos: var(--sigo-tom-bom); --tkt-backlog: var(--sigo-tom-info); }

.ws-lig2-controle .ws-tkt-filtros { grid-template-columns: repeat(7, minmax(0, 1fr)); }
@media (max-width: 1400px) { .ws-lig2-controle .ws-tkt-filtros { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 800px)  { .ws-lig2-controle .ws-tkt-filtros { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 500px)  { .ws-lig2-controle .ws-tkt-filtros { grid-template-columns: 1fr; } }

.ws-tkt-progresso {
    display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; padding: 10px 14px; border-radius: 10px;
    font-size: .8125rem; color: var(--sigo-tom-marca-tinta); background: color-mix(in srgb, var(--sigo-tom-info) 10%, var(--sigo-surface));
    border: 1px dashed color-mix(in srgb, var(--sigo-tom-info) 45%, transparent);
}

/* ── Radar de alertas ── */
.ws-tkt-alertas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 1100px) { .ws-tkt-alertas { grid-template-columns: 1fr; } }
.ws-tkt-alerta {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 12px;
    padding: 12px 14px; border-radius: 12px; background: var(--sigo-surface);
    border: 1px solid color-mix(in srgb, var(--t-cor) 30%, var(--sigo-border)); border-left: 5px solid var(--t-cor);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04); transition: transform .12s ease, box-shadow .12s ease;
}
.ws-tkt-alerta.ws-lig2-clicavel:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(15, 23, 42, .08); }
.ws-tkt-alerta-icone {
    display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%;
    color: #fff; background: var(--t-cor);
}
.ws-tkt-alerta-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ws-tkt-alerta-texto strong { font-size: .875rem; color: var(--t-tinta); }
.ws-tkt-alerta-texto span { font-size: .8125rem; color: var(--sigo-text-body); }
.ws-tkt-alerta-texto small { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: .75rem; font-weight: 600; color: var(--sigo-muted); }

/* ── Resumo do período (narrativa) ── */
.ws-tkt-narrativa {
    display: flex; gap: 12px; margin-top: 12px; padding: 12px 16px; border-radius: 12px; background: var(--sigo-surface);
    border: 1px solid var(--sigo-border); box-shadow: inset 4px 0 0 var(--sigo-tom-info);
}
.ws-tkt-narrativa-icone {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px;
    color: var(--sigo-tom-info); background: color-mix(in srgb, var(--sigo-tom-info) 14%, var(--sigo-surface));
}
.ws-tkt-narrativa strong { display: block; margin-bottom: 4px; font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--sigo-tom-marca-tinta); }
.ws-tkt-narrativa p { margin: 0 0 4px; font-size: .875rem; line-height: 1.45; color: var(--sigo-text-body); }

/* ── Evolução (▲▲ ▲ ► ▼ ▼▼) ── */
.ws-tkt-evolucao {
    display: inline-flex; align-items: baseline; gap: 4px; padding: 1px 7px; border-radius: 5px; white-space: nowrap;
    font-size: .75rem; font-weight: 800; color: var(--sigo-muted); background: color-mix(in srgb, var(--sigo-muted) 12%, transparent);
}
.ws-tkt-evolucao small { font-size: .6875rem; font-weight: 600; }
.ws-tkt-evolucao--bom        { color: var(--sigo-sucesso-tinta); background: var(--sigo-sucesso-fundo); }
.ws-tkt-evolucao--bom-forte  { color: #fff; background: var(--sigo-tom-bom); }
.ws-tkt-evolucao--ruim       { color: var(--sigo-atencao-tinta); background: var(--sigo-atencao-fundo); }
.ws-tkt-evolucao--ruim-forte { color: #fff; background: var(--sigo-tom-critico); }

/* ── Fluxo e backlog ── */
.ws-tkt-fluxo { display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(280px, 1fr); gap: 12px; }
@media (max-width: 1200px) { .ws-tkt-fluxo { grid-template-columns: 1fr; } }
.ws-tkt-fluxo-lateral { display: flex; flex-direction: column; gap: 12px; }
.ws-tkt-sw-criados    { background: var(--tkt-criados); }
.ws-tkt-sw-resolvidos { background: var(--tkt-resolvidos); }
.ws-tkt-sw-backlog    { background: var(--tkt-backlog); height: 3px !important; border-radius: 2px; }
.ws-tkt-sw-previsto   { background: repeating-linear-gradient(90deg, var(--tkt-backlog) 0 4px, transparent 4px 7px); height: 3px !important; }
.ws-tkt-g-criados    { fill: var(--tkt-criados); }
.ws-tkt-g-resolvidos { fill: var(--tkt-resolvidos); }
.ws-tkt-g-backlog    { fill: none; stroke: var(--tkt-backlog); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.ws-tkt-g-previsto   { fill: none; stroke: var(--tkt-backlog); stroke-width: 2; stroke-dasharray: 6 4; opacity: .85; }
.ws-tkt-g-area       { fill: color-mix(in srgb, var(--tkt-backlog) 9%, transparent); }
.ws-tkt-g-futuro     { fill: color-mix(in srgb, var(--sigo-muted) 7%, transparent); }
.ws-tkt-g-ponto-prev { fill: var(--sigo-surface); stroke: var(--tkt-backlog); stroke-width: 2; }
.ws-tkt-g-alvo       { fill: transparent; }
.ws-tkt-g-dia:hover .ws-tkt-g-alvo { fill: color-mix(in srgb, var(--sigo-tom-marca) 7%, transparent); }
.ws-tkt-g-dia:hover rect:not(.ws-tkt-g-alvo) { filter: brightness(1.1); }
.ws-tkt-eixo-backlog { fill: var(--sigo-tom-info); }

.ws-tkt-aging { display: flex; gap: 2px; height: 22px; border-radius: 7px; overflow: hidden; margin: 4px 0 10px; }
.ws-tkt-aging-seg { min-width: 4px; }
.ws-tkt-aging--0 { background: var(--sigo-tom-bom); }
.ws-tkt-aging--1 { background: color-mix(in srgb, var(--sigo-tom-bom) 55%, var(--sigo-tom-atencao)); }
.ws-tkt-aging--2 { background: var(--sigo-tom-atencao); }
.ws-tkt-aging--3 { background: color-mix(in srgb, var(--sigo-tom-atencao) 45%, var(--sigo-tom-critico)); }
.ws-tkt-aging--4 { background: var(--sigo-tom-critico); }
.ws-tkt-aging-lista { display: flex; flex-direction: column; gap: 4px; }
.ws-tkt-aging-item { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 52px; align-items: center; gap: 8px; font-size: .8125rem; color: var(--sigo-text-body); }
.ws-tkt-aging-item strong { font-variant-numeric: tabular-nums; color: var(--sigo-text); }
.ws-tkt-aging-item small { text-align: right; font-size: .75rem; color: var(--sigo-muted); font-variant-numeric: tabular-nums; }
.ws-tkt-aging-ponto { width: 10px; height: 10px; border-radius: 3px; }

.ws-tkt-previsao { display: flex; flex-direction: column; gap: 4px; border-top: 4px solid var(--t-cor) !important; }
.ws-tkt-previsao-rotulo { font-size: .75rem; font-weight: 700; color: var(--sigo-muted); }
.ws-tkt-previsao strong { font-size: 1.625rem; font-weight: 800; color: var(--t-tinta); font-variant-numeric: tabular-nums; }
.ws-tkt-previsao strong small { font-size: .75rem; font-weight: 600; color: var(--sigo-muted); }
.ws-tkt-previsao > span:last-child { font-size: .8125rem; color: var(--sigo-text-body); }

/* ── Distribuição ── */
.ws-tkt-dist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1000px) { .ws-tkt-dist { grid-template-columns: 1fr; } }
.ws-tkt-barra-linha {
    display: grid; grid-template-columns: minmax(110px, 1.1fr) minmax(80px, 1.6fr) 44px 74px; align-items: center; gap: 10px;
    padding: 6px 4px; border-radius: 6px; font-size: .8125rem;
}
.ws-tkt-barra-linha.ws-lig2-clicavel:hover { background: color-mix(in srgb, var(--sigo-tom-marca) 6%, transparent); }
.ws-tkt-barra-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--sigo-text); }
.ws-tkt-barra-num { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--sigo-text); }
.ws-tkt-barra-linha .ws-lig2-pill { min-width: 0; }

.ws-tkt-rosca { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.ws-tkt-rosca svg { width: 150px; height: 150px; flex-shrink: 0; }
.ws-tkt-rosca-fundo { fill: none; stroke: color-mix(in srgb, var(--sigo-muted) 12%, transparent); stroke-width: 20; }
.ws-tkt-rosca-fatia { fill: none; stroke-width: 20; transition: stroke-width .15s ease; }
.ws-tkt-rosca-fatia:hover { stroke-width: 24; }
.ws-tkt-rosca-total { fill: var(--sigo-text); font-size: 22px; font-weight: 800; }
.ws-tkt-rosca-rotulo { fill: var(--sigo-muted); font-size: 11px; }
.ws-tkt-rosca-legenda { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 160px; }
.ws-tkt-rosca-item {
    display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 5px 6px;
    border: 0; border-radius: 6px; background: none; cursor: pointer; text-align: left; font: inherit; font-size: .8125rem; color: var(--sigo-text-body);
}
.ws-tkt-rosca-item:hover:not(:disabled) { background: color-mix(in srgb, var(--sigo-tom-marca) 6%, transparent); }
.ws-tkt-rosca-item:disabled { cursor: default; }
.ws-tkt-rosca-item strong { color: var(--sigo-text); font-variant-numeric: tabular-nums; }
.ws-tkt-rosca-cor { width: 12px; height: 12px; border-radius: 3px; }
.ws-tkt-cor--0 { stroke: var(--viz-1); background: var(--viz-1); }
.ws-tkt-cor--1 { stroke: var(--viz-3); background: var(--viz-3); }
.ws-tkt-cor--2 { stroke: var(--viz-4); background: var(--viz-4); }
.ws-tkt-cor--3 { stroke: var(--viz-5); background: var(--viz-5); }
.ws-tkt-cor--4 { stroke: var(--viz-6); background: var(--viz-6); }
.ws-tkt-cor--5 { stroke: var(--viz-7); background: var(--viz-7); }
.ws-tkt-cor--6 { stroke: var(--viz-neutral); background: var(--viz-neutral); }

/* ── Chegada por hora ── */
.ws-tkt-horas { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 3px; align-items: end; height: 190px; }
.ws-tkt-hora { display: flex; flex-direction: column; align-items: stretch; gap: 4px; height: 100%; min-width: 0; }
.ws-tkt-hora-barras { flex: 1; display: flex; align-items: flex-end; gap: 1px; }
.ws-tkt-hora-barras > span { flex: 1; min-height: 1px; border-radius: 3px 3px 0 0; }
.ws-tkt-hora:hover .ws-tkt-hora-barras > span { filter: brightness(1.1); }
.ws-tkt .ws-lig-mapa:not(.ws-lig-mapa--alerta) { --ws-lig-tom: var(--sigo-tom-marca); }

/* ── Grades ── */
.ws-tkt-grade--estagio { --colunas: minmax(170px, 1.4fr) minmax(190px, 1.6fr) 90px minmax(110px, 1fr) minmax(96px, 1fr) 100px 110px; --minimo: 960px; }
.ws-tkt-barra-tempo > span { background: var(--sigo-tom-atencao) !important; }
.ws-tkt-grade--tecnico {
    --colunas: 34px minmax(190px, 1.8fr) 62px minmax(120px, 1.2fr) 100px 76px repeat(6, minmax(70px, .8fr)) 64px minmax(96px, 1fr);
    --minimo: 1400px;
}
.ws-tkt-grade--acao { --colunas: minmax(220px, 2fr) minmax(150px, 1.2fr) minmax(140px, 1fr) minmax(140px, 1fr) 90px minmax(150px, 1fr) 36px; --minimo: 1000px; }
.ws-tkt-linha--sem { opacity: .75; }
.ws-tkt-ticket { display: flex; flex-direction: column; min-width: 0; }
.ws-tkt-ticket small, .ws-tkt-sub { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .6875rem; color: var(--sigo-muted); }
.ws-tkt-link { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 7px; color: var(--sigo-link); }
.ws-tkt-link:hover { background: color-mix(in srgb, var(--sigo-link) 10%, transparent); }

.ws-tkt-pos {
    display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%;
    font-size: .75rem; font-weight: 800; color: var(--sigo-muted); background: color-mix(in srgb, var(--sigo-muted) 12%, transparent);
}
.ws-tkt-pos--1 { color: #5c4300; background: linear-gradient(135deg, #ffe082, #f5b700); box-shadow: 0 0 0 2px color-mix(in srgb, #f5b700 35%, transparent); }
.ws-tkt-pos--2 { color: #37414f; background: linear-gradient(135deg, #eceff4, #b8c1cf); }
.ws-tkt-pos--3 { color: #5a2f12; background: linear-gradient(135deg, #f3c39b, #cd7f45); }
.ws-tkt-pos--baixo { color: var(--sigo-perigo-tinta); background: var(--sigo-perigo-fundo); }

.ws-tkt-anel { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; }
.ws-tkt-anel svg { position: absolute; inset: 0; width: 40px; height: 40px; }
.ws-tkt-anel-fundo { fill: none; stroke: color-mix(in srgb, var(--sigo-muted) 15%, transparent); stroke-width: 4; }
.ws-tkt-anel-valor { fill: none; stroke: var(--t-cor); stroke-width: 4; stroke-linecap: round; }
.ws-tkt-anel strong { position: relative; font-size: .75rem; font-weight: 800; color: var(--t-tinta); font-variant-numeric: tabular-nums; }

.ws-tkt-faisca { width: 92px; height: 24px; display: block; }
.ws-tkt-faisca polyline { fill: none; stroke: var(--tkt-resolvidos); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }

/* ── Clientes e satisfação ── */
.ws-tkt-clientes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
@media (max-width: 1100px) { .ws-tkt-clientes { grid-template-columns: 1fr; } }
.ws-tkt-negativas { display: flex; flex-direction: column; gap: 8px; max-height: 420px; overflow-y: auto; }
.ws-tkt-negativa {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: start;
    padding: 10px 12px; border-radius: 10px; border: 1px solid var(--sigo-border); border-left: 4px solid var(--sigo-tom-critico);
}
.ws-tkt-negativa strong { display: block; font-size: .8125rem; color: var(--sigo-text); }
.ws-tkt-negativa small { display: block; font-size: .6875rem; color: var(--sigo-muted); }
.ws-tkt-negativa q { display: block; margin-top: 4px; font-size: .8125rem; font-style: italic; color: var(--sigo-text-body); }
.ws-tkt-estrelas { font-size: .875rem; letter-spacing: 1px; color: var(--sigo-tom-atencao); white-space: nowrap; }
.ws-tkt-estrelas span { color: color-mix(in srgb, var(--sigo-muted) 30%, transparent); }
.ws-tkt-vazio-bom { display: flex; align-items: center; gap: 6px; padding: 12px; border-radius: 10px; font-size: .8125rem; color: var(--sigo-sucesso-tinta); background: var(--sigo-sucesso-fundo); }

/* ══ Painel de Controle › Suporte ao vivo — redesenho 2026-10-16 (ws-sav-*) ══════════════════════════════════════
   Auditoria em DESIGN-IS-2026-10-16/. Cabine no topo (situação + 6 números + "Pede ação agora" + atendentes) e
   detalhe em abas. Regras visuais (skill dataviz):
   - valores na cor do TEXTO; o estado vem da barra/ícone/rótulo (nunca só cor);
   - zero = cinza; verde só onde "bom" é informação;
   - um herói por tela (o total de pendências);
   - algarismos proporcionais nos números grandes, tabulares nas colunas;
   - nenhuma tabela mais larga que o cartão (colunas curtas + reticências + title).
   Níveis: Normal = verde, Atenção = âmbar, Urgente = âmbar avermelhado (mistura dos dois tons, não o laranja de
   destaque), Emergência = vermelho. */
.ws-temp--urgente {
    --t-cor: color-mix(in srgb, var(--sigo-tom-atencao) 45%, var(--sigo-tom-critico));
    --t-tinta: color-mix(in srgb, var(--sigo-tom-atencao-tinta) 40%, var(--sigo-tom-critico-tinta));
    --t-fundo: color-mix(in srgb, var(--sigo-atencao-fundo) 50%, var(--sigo-perigo-fundo));
}

/* ── Cabeçalho ── */
.ws-sav-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.ws-sav-topo-titulo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ws-sav-topo-titulo h2 { margin: 0; font-size: 1.375rem; font-weight: 800; color: var(--sigo-text); }
.ws-sav-topo-acoes { display: flex; align-items: center; gap: 8px; }
.ws-sav-status {
    display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px;
    font-size: .75rem; font-weight: 600; color: var(--sigo-muted); background: color-mix(in srgb, var(--sigo-muted) 8%, transparent);
}
.ws-sav-status.ws-temp--bom, .ws-sav-status.ws-temp--atencao { color: var(--t-tinta); background: var(--t-fundo); }
.ws-sav-status .mud-icon-root { font-size: .9375rem; }
.ws-sav .ws-lig-perf-pulso { background: var(--sigo-tom-bom); }

/* ── Cabine ── */
.ws-sav-cabine { display: flex; flex-direction: column; gap: 12px; }

.ws-sav-situacao {
    display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 14px;
    background: var(--t-fundo); border: 1px solid color-mix(in srgb, var(--t-cor) 30%, transparent); border-left: 6px solid var(--t-cor);
}
.ws-sav-situacao-icone {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 42px; height: 42px; border-radius: 50%; color: #fff; background: var(--t-cor);
}
.ws-sav-situacao-texto { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ws-sav-situacao-texto > strong { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 1.125rem; font-weight: 800; color: var(--sigo-text); }
.ws-sav-heroi { font-size: 2.25rem; line-height: 1; font-weight: 800; color: var(--t-tinta); }
.ws-sav-situacao-texto > span { font-size: .875rem; color: var(--sigo-text-body); }
.ws-sav-aviso-expediente { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--sigo-tom-atencao-tinta) !important; }
.ws-sav-aviso-expediente .mud-icon-root { font-size: 1rem; }

/* Números de ação */
.ws-sav-numeros { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 1400px) { .ws-sav-numeros { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .ws-sav-numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ws-sav-numero {
    display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 12px 14px 11px; border-radius: 12px; cursor: pointer;
    background: var(--sigo-surface); border: 1px solid var(--sigo-border); border-top: 4px solid var(--t-cor);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04); transition: transform .12s ease, box-shadow .12s ease;
}
.ws-sav-numero:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(15, 23, 42, .1); }
.ws-sav-numero:focus-visible { outline: 2px solid var(--sigo-tom-marca); outline-offset: 2px; }
.ws-sav-numero.ws-temp--vazio { border-top-color: var(--sigo-border); }
.ws-sav-numero-rotulo { font-size: .75rem; font-weight: 700; color: var(--sigo-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-sav-numero-valor { font-size: 2rem; font-weight: 800; line-height: 1.1; color: var(--sigo-text); }
.ws-sav-numero.ws-temp--vazio .ws-sav-numero-valor { color: var(--sigo-muted); }
.ws-sav-numero-sub { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: .75rem; color: var(--sigo-muted); }

/* Rótulo de nível em texto (acompanha a cor) */
.ws-sav-rotulo-nivel {
    display: inline-flex; align-items: center; gap: 2px; font-size: .6875rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: .04em; color: var(--t-tinta);
}
.ws-sav-rotulo-nivel .mud-icon-root { font-size: .875rem; }

/* Fila de ação + atendentes */
.ws-sav-painel { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(280px, 1fr); gap: 12px; align-items: start; }
@media (max-width: 1100px) { .ws-sav-painel { grid-template-columns: 1fr; } }
.ws-sav-cartao, .ws-sav-subcartao {
    padding: 14px 16px; border-radius: 14px; background: var(--sigo-surface); border: 1px solid var(--sigo-border);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04); min-width: 0;
}
.ws-sav-subcartao { margin-top: 14px; border-left: 4px solid var(--sigo-tom-marca); }
.ws-sav-cartao-topo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.ws-sav-cartao-topo h3 { margin: 0; font-size: 1rem; font-weight: 800; color: var(--sigo-text); }
.ws-sav-cartao-sub { flex: 1; font-size: .75rem; color: var(--sigo-muted); }

.ws-sav-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.ws-sav-chips--filtros { margin: 0 0 10px; }
.ws-sav-chips button {
    display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; cursor: pointer; font: inherit;
    font-size: .75rem; font-weight: 600; color: var(--sigo-text-body); background: var(--sigo-surface); border: 1px solid var(--sigo-border);
}
.ws-sav-chips button b { font-weight: 800; color: var(--sigo-text); font-variant-numeric: tabular-nums; }
.ws-sav-chips button .mud-icon-root { font-size: .9375rem; }
.ws-sav-chips button:hover { border-color: var(--sigo-tom-marca); }
.ws-sav-chips button.ativo { color: #fff; background: var(--sigo-tom-marca); border-color: var(--sigo-tom-marca); }
.ws-sav-chips button.ativo b { color: #fff; }
.ws-sav-chips button.zero { opacity: .55; }
.ws-sav-chips button:focus-visible { outline: 2px solid var(--sigo-tom-marca); outline-offset: 2px; }

.ws-sav-acoes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ws-sav-acao {
    display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 12px;
    padding: 9px 8px; cursor: pointer; border-bottom: 1px solid var(--sigo-border); box-shadow: inset 3px 0 0 var(--t-cor);
}
.ws-sav-acao:last-child { border-bottom: none; }
.ws-sav-acao:hover { background: color-mix(in srgb, var(--sigo-tom-marca) 5%, transparent); }
.ws-sav-acao:focus-visible { outline: 2px solid var(--sigo-tom-marca); outline-offset: -2px; }
.ws-sav-acao-nivel {
    display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px;
    color: var(--t-tinta); background: var(--t-fundo);
}
.ws-sav-acao-corpo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ws-sav-acao-titulo { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8125rem; color: var(--sigo-muted); }
.ws-sav-acao-titulo strong { font-size: .875rem; color: var(--sigo-text); }
.ws-sav-acao-motivo { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .75rem; color: var(--sigo-text-body); }
.ws-sav-acao-motivo em { font-style: normal; font-weight: 600; color: var(--sigo-tom-marca-tinta); }
.ws-sav-acao-motivo .ws-sav-rotulo-nivel { margin-right: 4px; }
.ws-sav-acao-idade { display: flex; flex-direction: column; align-items: flex-end; min-width: 76px; text-align: right; }
.ws-sav-acao-idade strong { font-size: 1rem; font-weight: 800; line-height: 1.1; color: var(--sigo-text); white-space: nowrap; }
.ws-sav-acao-idade small { font-size: .6875rem; color: var(--sigo-muted); }

.ws-sav-mais, .ws-sav-longos, .ws-sav-link { font: inherit; cursor: pointer; background: none; border: none; }
.ws-sav-mais {
    display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; margin-top: 6px; padding: 6px;
    font-size: .8125rem; font-weight: 700; color: var(--sigo-tom-marca-tinta); border-radius: 8px;
}
.ws-sav-mais:hover { background: color-mix(in srgb, var(--sigo-tom-marca) 6%, transparent); }
.ws-sav-longos {
    display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 8px; padding: 8px 10px; border-radius: 10px; text-align: left;
    font-size: .8125rem; color: var(--sigo-text-body); background: color-mix(in srgb, var(--sigo-muted) 7%, transparent);
}
.ws-sav-longos span { flex: 1; }
.ws-sav-longos:hover { background: color-mix(in srgb, var(--sigo-tom-marca) 8%, transparent); }
.ws-sav-link { padding: 2px 4px; font-size: .75rem; font-weight: 700; color: var(--sigo-tom-marca-tinta); }
.ws-sav-link:hover { text-decoration: underline; }

/* Carga dos atendentes: barra horizontal com o traço do limite de chats simultâneos */
.ws-sav-carga { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ws-sav-carga li {
    display: grid; grid-template-columns: minmax(90px, 1.1fr) minmax(60px, 1fr) 26px auto; align-items: center; gap: 8px;
    padding: 5px 6px; border-radius: 8px; cursor: pointer;
}
.ws-sav-carga li:hover { background: color-mix(in srgb, var(--sigo-tom-marca) 6%, transparent); }
.ws-sav-carga li:focus-visible { outline: 2px solid var(--sigo-tom-marca); outline-offset: -2px; }
.ws-sav-carga-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8125rem; font-weight: 600; color: var(--sigo-text); }
.ws-sav-carga-barra { position: relative; height: 10px; border-radius: 4px; background: color-mix(in srgb, var(--sigo-tom-marca) 10%, transparent); }
.ws-sav-carga-barra > span { display: block; height: 100%; border-radius: 4px; background: var(--sigo-tom-marca); }
.ws-sav-carga-barra > span.alta { background: var(--sigo-tom-atencao); }
.ws-sav-carga-barra > i { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--sigo-muted); opacity: .5; }
.ws-sav-carga-num { font-size: .875rem; font-weight: 800; text-align: right; color: var(--sigo-text); font-variant-numeric: tabular-nums; }
.ws-sav-badge { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: .6875rem; font-weight: 700; white-space: nowrap; color: var(--t-tinta); background: var(--t-fundo); }

/* ── Detalhe em abas ── */
.ws-sav-detalhe { margin-top: 18px; scroll-margin-top: 80px; }
.ws-sav-abas { display: flex; gap: 2px; flex-wrap: wrap; border-bottom: 2px solid var(--sigo-border); }
.ws-sav-abas button {
    display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; margin-bottom: -2px; cursor: pointer; font: inherit;
    font-size: .875rem; font-weight: 700; color: var(--sigo-muted); background: none; border: none; border-bottom: 3px solid transparent;
}
.ws-sav-abas button b {
    padding: 0 7px; border-radius: 999px; font-size: .75rem; color: var(--sigo-text-body);
    background: color-mix(in srgb, var(--sigo-muted) 12%, transparent); font-variant-numeric: tabular-nums;
}
.ws-sav-abas button:hover { color: var(--sigo-text); }
.ws-sav-abas button.ativo { color: var(--sigo-tom-marca-tinta); border-bottom-color: var(--sigo-tom-marca); }
.ws-sav-abas button.ativo b { color: #fff; background: var(--sigo-tom-marca); }
.ws-sav-abas button:focus-visible { outline: 2px solid var(--sigo-tom-marca); outline-offset: -2px; }
.ws-sav-aba {
    padding: 16px; border: 1px solid var(--sigo-border); border-top: none; border-radius: 0 0 14px 14px;
    background: var(--sigo-surface); min-width: 0;
}

.ws-sav-recorte { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.ws-sav-recorte-campo { flex: 0 1 380px; min-width: 220px; }
.ws-sav-recorte-campo.mud-input-control { margin-top: 0; }
.ws-sav-padrao { display: inline-flex; align-items: center; gap: 4px; font-size: .75rem; font-weight: 600; color: var(--sigo-tom-marca-tinta); }
.ws-sav-padrao .mud-icon-root { font-size: .9375rem; }
.ws-sav-recorte-aviso { font-size: .75rem; font-weight: 600; color: var(--sigo-tom-atencao-tinta); }

.ws-sav-linha-info {
    display: flex; align-items: center; gap: 6px 18px; flex-wrap: wrap; margin-bottom: 12px; padding: 8px 12px; border-radius: 10px;
    font-size: .8125rem; color: var(--sigo-text-body); background: color-mix(in srgb, var(--sigo-muted) 6%, transparent);
}
.ws-sav-linha-info span { display: inline-flex; align-items: center; gap: 4px; }
.ws-sav-linha-info b { color: var(--sigo-text); }
.ws-sav-linha-info .mud-icon-root { font-size: 1rem; color: var(--sigo-muted); }
.ws-sav-fonte { margin-left: auto; font-size: .75rem; color: var(--sigo-muted); }
.ws-sav-intro { margin: 0 0 12px; font-size: .8125rem; color: var(--sigo-text-body); }
.ws-sav-nota { display: block; margin-top: 8px; font-size: .6875rem; color: var(--sigo-muted); }
.ws-sav-titulo-lista { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; font-size: .9375rem; font-weight: 800; color: var(--sigo-text); }
.ws-sav-titulo-lista span { font-size: .75rem; font-weight: 500; color: var(--sigo-muted); }
.ws-sav-duas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 20px; align-items: start; }
@media (max-width: 1100px) { .ws-sav-duas { grid-template-columns: 1fr; } }

.ws-sav-vazio {
    display: flex; align-items: center; gap: 6px; padding: 12px; border-radius: 10px;
    font-size: .8125rem; color: var(--sigo-muted); background: color-mix(in srgb, var(--sigo-muted) 7%, transparent);
}
.ws-sav-vazio--bom { color: var(--sigo-sucesso-tinta); background: var(--sigo-sucesso-fundo); }

/* ── Tabelas: cabem no cartão (sem rolagem horizontal até ~760px) ── */
.ws-sav .ws-lig2-grade { overflow-x: auto; }
.ws-sav-linha { box-shadow: inset 3px 0 0 var(--t-cor); }
.ws-sav-linha.ws-temp--bom { box-shadow: inset 3px 0 0 transparent; }
.ws-sav-linha--calma { opacity: .72; }
.ws-sav-linha--calma:hover { opacity: 1; }
.ws-sav-celula { display: flex; flex-direction: column; min-width: 0; }
.ws-sav-celula strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; color: var(--sigo-text); }
.ws-sav-celula small, .ws-sav-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .6875rem; color: var(--sigo-muted); }
.ws-sav-celula .ws-sav-fila { color: var(--sigo-tom-atencao-tinta); }
.ws-sav-celula .ws-sav-motivo { font-weight: 600; color: var(--sigo-text-body); }
.ws-sav-celula .ws-sav-sem-classe { font-style: italic; color: var(--sigo-muted); }
.ws-sav-nivel { display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; font-weight: 700; color: var(--t-tinta); white-space: nowrap; }
.ws-sav-nivel i { width: 8px; height: 8px; border-radius: 50%; background: var(--t-cor); }
.ws-sav-nivel.ws-temp--bom { color: var(--sigo-muted); font-weight: 600; }
.ws-sav-tempo { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ws-sav-tempo--alerta { display: inline-block; padding: 1px 8px; border-radius: 999px; font-weight: 700; color: var(--t-tinta); background: var(--t-fundo); }
.ws-sav-tempo-grande { font-size: 1rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.ws-sav-tempo-grande.ws-temp--bom { color: var(--sigo-text) !important; }
.ws-sav-celula .ws-sav-tempo-grande:not(.ws-temp--bom) { color: var(--t-tinta); }
.ws-sav-ativo { display: block; margin-top: 2px; font-size: .6875rem; font-weight: 700; color: var(--sigo-tom-atencao-tinta); }
.ws-sav-tickets { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: .75rem; }
.ws-sav-tickets a { font-weight: 700; color: var(--sigo-link); text-decoration: none; }
.ws-sav-tickets a:hover { text-decoration: underline; }
.ws-sav-tickets span { color: var(--sigo-muted); }
.ws-sav-dias { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 2px; }
.ws-sav-dias span { padding: 0 6px; border-radius: 999px; font-size: .6875rem; color: var(--sigo-muted); background: color-mix(in srgb, var(--sigo-muted) 8%, transparent); }
.ws-sav-dias span.seq { font-weight: 700; color: var(--t-tinta); background: var(--t-fundo); }

.ws-sav-grade--chats      { --colunas: 104px minmax(150px, 1.3fr) minmax(130px, 1.1fr) 92px 100px minmax(160px, 1.4fr) 28px; --minimo: 760px; }
.ws-sav-grade--cancelados { --colunas: minmax(160px, 1.4fr) minmax(140px, 1.2fr) 64px 80px minmax(130px, 1fr) 28px; --minimo: 640px; }
.ws-sav-grade--atendente  { --colunas: 104px minmax(150px, 1.4fr) minmax(120px, 1fr) minmax(160px, 1.3fr) 84px 28px; --minimo: 700px; }
.ws-sav-grade--retorno    { --colunas: 104px minmax(150px, 1.3fr) minmax(130px, 1.1fr) minmax(150px, 1.3fr); --minimo: 560px; }
.ws-sav-grade--repeticao  { --colunas: 96px minmax(160px, 1.4fr) minmax(170px, 1.5fr) 64px 100px minmax(110px, .9fr); --minimo: 740px; }
.ws-sav-grade--seguidas   { --colunas: 104px minmax(130px, 1fr) minmax(160px, 1.3fr) minmax(170px, 1.3fr) 96px; --minimo: 700px; }
.ws-sav-grade--seguidas.com-assunto { --colunas: 104px minmax(120px, 1fr) minmax(150px, 1.2fr) minmax(160px, 1.2fr) 88px minmax(140px, 1.1fr); --minimo: 800px; }

/* ── Aba Atendentes ── */
.ws-sav-atendentes { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.ws-sav-atendente {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; cursor: pointer;
    padding: 9px 12px; border-radius: 10px; border: 1px solid var(--sigo-border); border-left: 4px solid var(--t-cor); background: var(--sigo-surface);
    transition: box-shadow .12s ease;
}
.ws-sav-atendente:hover { box-shadow: 0 3px 12px rgba(15, 23, 42, .08); }
.ws-sav-atendente:focus-visible { outline: 2px solid var(--sigo-tom-marca); outline-offset: 2px; }
.ws-sav-atendente.ativo { background: color-mix(in srgb, var(--sigo-tom-marca) 7%, var(--sigo-surface)); border-color: var(--sigo-tom-marca); }
.ws-sav-atendente-qtd { display: flex; flex-direction: column; align-items: center; font-size: 1.375rem; font-weight: 800; line-height: 1; color: var(--sigo-text); }
.ws-sav-atendente-qtd small { font-size: .625rem; font-weight: 600; color: var(--sigo-muted); }
.ws-sav-atendente-qtd.alta { color: var(--sigo-tom-atencao-tinta); }

/* ── Ligações em andamento ── */
.ws-sav-chamadas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ws-sav-chamada {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px;
    padding: 8px 12px; border-radius: 10px; border: 1px solid var(--sigo-border); border-left: 4px solid var(--t-cor); font-size: .8125rem;
}

@media (max-width: 600px) {
    .ws-sav-aba { padding: 12px; }
    .ws-sav-acao { grid-template-columns: minmax(0, 1fr) auto; }
    .ws-sav-acao-nivel { display: none; }
    .ws-sav-situacao { padding: 12px; }
    .ws-sav-heroi { font-size: 1.75rem; }
}

/* ── Modal "Pede ação agora" (lista completa) ── */
.ws-sav-modal-titulo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 1.125rem; font-weight: 800; color: var(--sigo-text); }
.ws-sav-modal-titulo .mud-icon-root { color: var(--sigo-tom-critico); }
.ws-sav-modal-titulo small { font-size: .75rem; font-weight: 500; color: var(--sigo-muted); }
.ws-sav-modal-filtros { display: flex; flex-direction: column; padding-bottom: 4px; background: var(--sigo-surface); }
.ws-sav-modal-filtros .ws-sav-chips button .ws-sav-nivel { gap: 0; }
.ws-sav-modal-lista { max-height: min(62vh, 640px); overflow-y: auto; padding-right: 4px; }
.ws-sav-modal-grupo {
    display: flex; align-items: center; gap: 6px; margin: 12px 0 4px; font-size: .6875rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .06em; color: var(--t-tinta);
}
.ws-sav-modal-grupo:first-child { margin-top: 0; }
.ws-sav-modal-grupo i { width: 8px; height: 8px; border-radius: 50%; background: var(--t-cor); }
.ws-sav-modal-grupo small { font-weight: 700; color: var(--sigo-muted); }

/* ── Blocos com faixa de título (2026-10-16): o layout da cabine e das abas continua igual; só ganham o contorno e
   a faixa de título dos painéis de Ligações e Tickets (ws-lig2-secao). ── */
.ws-sav .ws-lig2-secao .ws-sav-numeros { margin-top: 12px; }
.ws-sav .ws-lig2-secao .ws-sav-painel { margin-top: 2px; }
.ws-sav .ws-lig2-secao.ws-sav-detalhe { margin-top: 22px; }
.ws-sav .ws-lig2-secao .ws-sav-abas { border-bottom-color: color-mix(in srgb, var(--sigo-tom-marca) 22%, var(--sigo-border)); }
.ws-sav .ws-lig2-secao .ws-sav-aba { background: var(--sigo-surface); }

/* ── Relatórios › Recursos Humanos › Conformidade de Jornada (2026-10-16) ──────────────────────────────────────
   Filtros em linha; um bloco por colaborador (resumo do período + grade dia × hora dos atendimentos na escala, base
   .ws-lig-mapa, tom da marca): hora escalada = contorno na cor da marca; escalada sem atendimento = contorno crítico
   tracejado; jornada parcial = pontilhado; hora sem jornada = esmaecida; teve atendimento fora da escala = canto em
   destaque. Impressão: filtros/botões somem (.print-hidden) e cada bloco evita quebrar no meio. ── */
.ws-cj-filtros {
    display: grid;
    grid-template-columns: repeat(2, minmax(150px, 170px)) repeat(3, minmax(170px, 1fr)) auto auto;
    gap: 10px;
    align-items: center;
}
.ws-cj-filtros .mud-input-control { margin: 0; }
@media (max-width: 1100px) { .ws-cj-filtros { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } }
.ws-cj-chips { margin: 12px 0 14px; }
.ws-cj-kpis { margin-bottom: 4px; }
.ws-gi-kpis.ws-cj-kpis { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.ws-cj-sub { color: var(--sigo-muted); font-size: .75rem; font-weight: 400; }
.ws-cj-obs { display: block; color: var(--sigo-tom-atencao-tinta); font-size: .6875rem; font-weight: 600; }
.ws-cj-pct { font-weight: 700; font-variant-numeric: tabular-nums; }
.ws-cj-pct--ok { color: var(--sigo-tom-bom-tinta); }
.ws-cj-pct--atencao { color: var(--sigo-tom-atencao-tinta); }
.ws-cj-pct--critico { color: var(--sigo-tom-critico-tinta); }
.ws-cj-fora-n { color: var(--sigo-tom-critico-tinta); font-weight: 700; }
.ws-cj-alerta-n { color: var(--sigo-tom-atencao-tinta); font-weight: 700; }
.ws-cj-vazio {
    display: flex; align-items: center; gap: 10px; padding: 28px 20px; margin-top: 8px;
    border: 1px dashed var(--sigo-border); border-radius: 12px; color: var(--sigo-muted); background: var(--sigo-surface);
}

.ws-cj-vazio > div { display: flex; flex-direction: column; gap: 2px; }
.ws-cj-vazio strong { color: var(--sigo-text); }

/* Bloco por colaborador: resumo do período + grade de atendimentos por hora */
.ws-cj-legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; margin: 16px 0 10px; font-size: .75rem; color: var(--sigo-muted); }
.ws-cj-legenda > span { display: inline-flex; align-items: center; gap: 6px; }
.ws-cj-legenda .ws-lig-escala { --ws-lig-tom: var(--sigo-tom-marca); width: 64px; }

.ws-cj-colab {
    margin-bottom: 10px; border: 1px solid var(--sigo-border); border-radius: 12px; background: var(--sigo-surface);
    overflow: hidden;
}
.ws-cj-colab-cab {
    display: flex; align-items: center; gap: 12px; padding: 12px 16px;
    border-bottom: 1px solid var(--sigo-border); background: color-mix(in srgb, var(--sigo-tom-marca) 4%, var(--sigo-surface));
}
.ws-cj-avatar {
    flex: none; width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    font-size: .8125rem; font-weight: 700; color: var(--sigo-tom-marca-tinta);
    background: color-mix(in srgb, var(--sigo-tom-marca) 14%, var(--sigo-surface));
}
.ws-cj-colab-id { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.ws-cj-colab-id .ws-cj-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-cj-colab-nome { font-weight: 700; color: var(--sigo-text); }
.ws-cj-colab-numeros { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 22px; }
.ws-cj-num { display: flex; flex-direction: column; align-items: flex-end; font-size: .6875rem; color: var(--sigo-muted); line-height: 1.25; }
.ws-cj-num strong { font-size: 1.0625rem; font-weight: 700; color: var(--sigo-text); font-variant-numeric: tabular-nums; }
.ws-cj-num.ws-cj-pct--ok strong { color: var(--sigo-tom-bom-tinta); }
.ws-cj-num.ws-cj-pct--atencao strong { color: var(--sigo-tom-atencao-tinta); }
.ws-cj-num.ws-cj-pct--critico strong { color: var(--sigo-tom-critico-tinta); }
.ws-cj-colab-corpo { padding: 12px 16px 16px; }
.ws-cj-colab-canais { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.ws-cj-canal {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
    font-size: .75rem; color: var(--sigo-muted); background: var(--sigo-bg); border: 1px solid var(--sigo-border);
}
.ws-cj-canal strong { color: var(--sigo-text); font-variant-numeric: tabular-nums; }
.ws-cj-canal .mud-icon-root { font-size: .95rem !important; }
@media (max-width: 760px) {
    .ws-cj-colab-cab { flex-wrap: wrap; }
    .ws-cj-colab-numeros { justify-content: flex-start; width: 100%; padding-left: 48px; }
    .ws-cj-num { align-items: flex-start; }
}

/* Grade dia × hora */
.ws-cj-grade { --ws-lig-tom: var(--sigo-tom-marca); min-width: 640px; }
.ws-cj-grade thead th:first-child { text-align: left; }
.ws-cj-grade tbody th { background: var(--sigo-surface); white-space: nowrap; }
.ws-cj-grade tr.ws-cj-dia-folga th { color: var(--sigo-muted); font-weight: 500; }
.ws-cj-grade td.ws-cj-esc { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--sigo-tom-marca) 70%, transparent); }
.ws-cj-grade td.ws-cj-esc--vazia {
    box-shadow: none;
    outline: 2px dashed color-mix(in srgb, var(--sigo-tom-critico) 75%, transparent); outline-offset: -2px;
    background: color-mix(in srgb, var(--sigo-tom-critico) 7%, var(--sigo-surface));
}
.ws-cj-grade td.ws-cj-livre { box-shadow: none; background: color-mix(in srgb, var(--sigo-border) 35%, var(--sigo-surface)); color: var(--sigo-muted); }
.ws-cj-grade td.ws-cj-parcial { box-shadow: none; outline: 1px dotted color-mix(in srgb, var(--sigo-tom-marca) 70%, transparent); outline-offset: -1px; }
.ws-cj-grade td.ws-cj-fora { position: relative; }
.ws-cj-grade td.ws-cj-fora::after {
    content: ""; position: absolute; top: 0; right: 0; border-style: solid; border-width: 0 8px 8px 0;
    border-color: transparent var(--sigo-destaque) transparent transparent; border-top-right-radius: 3px;
}
.ws-cj-grade .ws-cj-grade-total { font-weight: 700; color: var(--sigo-text); background: transparent; box-shadow: none; padding: 0 6px; text-align: right; }
/* Totalizador: faixa invertida (texto × fundo do tema) — fora da escala de cor da grade, com respiro acima. */
.ws-cj-grade .ws-cj-grade-linha-total > * {
    border-top: 8px solid transparent; background-clip: padding-box;
    font-weight: 700; font-variant-numeric: tabular-nums;
}
.ws-cj-grade .ws-cj-grade-linha-total > td,
.ws-cj-grade .ws-cj-grade-linha-total > td.ws-cj-grade-total {
    background-color: var(--sigo-text) !important; color: var(--sigo-surface) !important; box-shadow: none !important;
    outline: none !important; text-align: center;
}
.ws-cj-grade .ws-cj-grade-linha-total > td:hover { outline: none; }
.ws-cj-grade .ws-cj-grade-linha-total > td.ws-cj-fora-n { color: var(--sigo-destaque) !important; }
.ws-cj-grade .ws-cj-grade-linha-total > td.ws-cj-grade-total { padding: 0 8px; text-align: right; }
.ws-cj-grade .ws-cj-grade-linha-total > td:last-child { border-radius: 3px 6px 6px 3px; }
.ws-cj-grade .ws-cj-grade-linha-total > th { color: var(--sigo-text) !important; text-transform: uppercase; font-size: .625rem; letter-spacing: .06em; }

.ws-cj-amostra { display: inline-block; position: relative; width: 16px; height: 14px; border-radius: 3px; background: var(--sigo-surface); }
.ws-cj-amostra.ws-cj-esc { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--sigo-tom-marca) 70%, transparent); }
.ws-cj-amostra.ws-cj-esc--vazia {
    box-shadow: none; outline: 2px dashed color-mix(in srgb, var(--sigo-tom-critico) 75%, transparent); outline-offset: -2px;
    background: color-mix(in srgb, var(--sigo-tom-critico) 7%, var(--sigo-surface));
}
.ws-cj-amostra.ws-cj-parcial { outline: 1px dotted color-mix(in srgb, var(--sigo-tom-marca) 70%, transparent); outline-offset: -1px; }
.ws-cj-amostra.ws-cj-fora { box-shadow: inset 0 0 0 1px var(--sigo-border); }
.ws-cj-amostra.ws-cj-fora::after {
    content: ""; position: absolute; top: 0; right: 0; border-style: solid; border-width: 0 7px 7px 0;
    border-color: transparent var(--sigo-destaque) transparent transparent;
}

/* Chave "Consolidado" nos filtros */
.ws-cj-chave { display: flex; align-items: center; gap: 2px; white-space: nowrap; }
.ws-cj-chave .mud-switch { margin: 0; }
.ws-cj-chave-textos { display: flex; flex-direction: column; line-height: 1.15; cursor: pointer; user-select: none; }
.ws-cj-chave-rotulo { font-size: .875rem; font-weight: 600; color: var(--sigo-text); }
.ws-cj-chave-sub { font-size: .6875rem; color: var(--sigo-muted); }
.ws-cj-limpar { white-space: nowrap; }

/* Comparativo selecionado × média geral dentro dos indicadores */
.ws-cj-comp { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 2px; }
.ws-cj-comp-linha { display: grid; grid-template-columns: 84px minmax(40px, 1fr) auto; align-items: center; gap: 8px; font-size: .75rem; }
.ws-cj-comp-rotulo { color: var(--sigo-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-cj-comp-valor { font-weight: 700; color: var(--sigo-text); font-variant-numeric: tabular-nums; text-align: right; min-width: 44px; }
.ws-cj-comp-barra { height: 8px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--sigo-border) 55%, var(--sigo-surface)); }
.ws-cj-comp-barra > span { display: block; height: 100%; border-radius: 999px; }
.ws-cj-comp-sel { background: var(--sigo-tom-marca); }
.ws-cj-comp-sel--pior { background: var(--sigo-tom-atencao); }
.ws-cj-comp-media { background: color-mix(in srgb, var(--sigo-muted) 55%, var(--sigo-surface)); }

/* Consolidado funcionário a funcionário */
.ws-cj-cons { width: 100%; min-width: 980px; border-collapse: collapse; font-size: .8125rem; font-variant-numeric: tabular-nums; }
.ws-cj-cons thead th {
    padding: 0 8px 8px; text-align: left; font-size: .6875rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .05em; color: var(--sigo-muted); border-bottom: 1px solid var(--sigo-border); white-space: nowrap;
}
.ws-cj-cons thead th.ws-dcob-n { text-align: right; }
.ws-cj-cons tbody td, .ws-cj-cons tfoot td, .ws-cj-cons tfoot th {
    padding: 7px 8px; border-bottom: 1px solid var(--sigo-border); vertical-align: middle; white-space: nowrap;
}
.ws-cj-cons tbody tr:hover > td { background: var(--sigo-bg); }
.ws-cj-cons-media th, .ws-cj-cons-media td {
    font-weight: 700; border-bottom: none !important; border-top: 2px solid var(--sigo-border);
    background: color-mix(in srgb, var(--sigo-tom-marca) 4%, var(--sigo-surface)); text-align: left;
}
.ws-cj-cons-media td.ws-dcob-n { text-align: right; }
.ws-cj-bloco-sub { display: block; }
.ws-cj-escala { max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
.ws-cj-vs { display: inline-block; margin-left: 6px; padding: 0 5px; border-radius: 4px; font-size: .6875rem; font-weight: 700; }
.ws-cj-vs--melhor { color: var(--sigo-tom-bom-tinta); background: color-mix(in srgb, var(--sigo-tom-bom) 12%, transparent); }
.ws-cj-vs--pior { color: var(--sigo-tom-critico-tinta); background: color-mix(in srgb, var(--sigo-tom-critico) 10%, transparent); }
.ws-cj-ordenar {
    all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 2px;
    font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit;
}
.ws-cj-ordenar:hover, .ws-cj-ordenar--ativo { color: var(--sigo-text); }
.ws-cj-ordenar:focus-visible { box-shadow: var(--sigo-focus-ring); border-radius: 4px; }
.ws-cj-ordenar .mud-icon-root { font-size: 1rem !important; }
.ws-cj-link { all: unset; cursor: pointer; font-weight: 600; color: var(--sigo-text); }
.ws-cj-link:hover { color: var(--sigo-tom-marca); text-decoration: underline; }
.ws-cj-link:focus-visible { box-shadow: var(--sigo-focus-ring); border-radius: 4px; }


/* Só no papel (ex.: "Gerado em"). */
.ws-cj-so-impressao { display: none !important; }

/* ── Impressão / Salvar como PDF ──
   O @page global é A4 paisagem SEM margem: as margens do relatório ficam no próprio conteúdo (.ws-cj-pagina).
   Indicadores numa linha; cartões e tabelas na largura da folha (sem rolagem nem largura mínima, para nada ser
   cortado à direita); cabeçalho das tabelas repete a cada folha; linhas não quebram ao meio; grade compacta para o
   mês de um colaborador caber numa folha; no consolidado a matriz por hora começa em folha nova. ── */
@media print {
    .ws-cj-pagina { padding: 9mm 10mm 8mm; font-size: 10.5px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .ws-cj-pagina, .ws-cj-pagina * { box-shadow: none !important; }
    .ws-cj-so-impressao { display: inline-flex !important; }
    .ws-cj-pagina .ws-record-header { margin-bottom: 6px; padding-bottom: 6px; }
    .ws-cj-chips { margin: 4px 0 8px; }
    .ws-cj-chips .ws-ind-chip { font-size: 9.5px; padding: 2px 8px; }

    /* Indicadores: os quatro numa linha, compactos */
    .ws-cj-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 8px !important; break-inside: avoid; margin-bottom: 8px; }
    .ws-cj-kpis .ws-kpi { min-height: 0; padding: 10px 12px; gap: 4px; border-radius: 8px; }
    .ws-cj-kpis .ws-kpi-valor { font-size: 1.35rem; }
    .ws-cj-comp { margin: 2px 0 0; gap: 2px; }
    .ws-cj-comp-linha { grid-template-columns: 70px minmax(30px, 1fr) auto; font-size: 9px; gap: 6px; }
    .ws-cj-comp-barra { height: 6px; }

    /* Cartões e tabelas na largura da folha */
    .ws-cj .ws-record-card { padding: 10px 12px; border-radius: 8px; break-inside: auto; }
    .ws-cj .ws-record-card-header { margin-bottom: 6px; break-after: avoid; page-break-after: avoid; }
    .ws-cj .ws-dcob-tabela-wrap { overflow: visible !important; margin: 0 !important; }
    .ws-cj-cons, .ws-cj-grade { min-width: 0 !important; width: 100%; }
    .ws-cj-cons { font-size: 9.5px; }
    .ws-cj-cons thead, .ws-cj-grade thead { display: table-header-group; }
    .ws-cj-cons tfoot { display: table-row-group; }   /* média geral só no fim, não repetida a cada folha */
    .ws-cj-cons thead th { font-size: 8.5px; padding: 0 5px 5px; letter-spacing: .02em; }
    .ws-cj-cons tbody td, .ws-cj-cons tfoot td, .ws-cj-cons tfoot th { padding: 3px 5px; }
    .ws-cj-cons tr, .ws-cj-grade tr { break-inside: avoid; page-break-inside: avoid; }
    .ws-cj-cons .ws-cj-bloco-sub { font-size: 8.5px; }
    .ws-cj-escala { max-width: 130px; }
    .ws-cj-vs { font-size: 8px; padding: 0 3px; margin-left: 3px; }
    .ws-cj-ordenar .mud-icon-root { display: none; }
    .ws-cj-link { text-decoration: none !important; }

    /* Grade e matriz compactas */
    .ws-cj-grade { font-size: 8.5px; border-spacing: 1.5px; }
    .ws-cj-grade td { height: 15px; min-width: 0; }
    .ws-cj-grade tbody th { font-size: 8.5px; padding-right: 6px; }
    .ws-cj-legenda { margin: 6px 0; font-size: 8.5px; gap: 4px 12px; }

    /* Quebras de folha */
    .ws-cj-nova-pagina { break-before: page; page-break-before: always; margin-top: 0 !important; }
    .ws-cj-colab { break-inside: avoid; page-break-inside: avoid; margin-bottom: 8px; border-radius: 8px; }
    .ws-cj-colab-cab { padding: 8px 12px; gap: 10px; }
    .ws-cj-colab-corpo { padding: 8px 12px 10px; }
    .ws-cj-colab-canais { margin-bottom: 6px; gap: 6px; }
    .ws-cj-num strong { font-size: .95rem; }
    .ws-cj-avatar { width: 28px; height: 28px; font-size: .7rem; }
    .ws-cj-canal { padding: 2px 8px; font-size: 9px; }
    .ws-cj-colab-id .ws-cj-sub { white-space: normal; }
}

/* ── Conformidade de Jornada › possível hora extra (2026-10-17): atendimento depois da saída da escala. Roxo — fora
   das cores já usadas na grade (azul = escala, vermelho = sem atendimento, laranja = fora da escala). ── */
.ws-cj { --cj-he: #7c3aed; --cj-he-tinta: #5b21b6; --cj-he-fundo: #f3edff; }
:root[data-theme="dark"] .ws-cj { --cj-he: #a78bfa; --cj-he-tinta: #ddd0ff; --cj-he-fundo: rgba(167, 139, 250, .14); }

.ws-cj-grade td.ws-cj-he {
    box-shadow: inset 0 0 0 2px var(--cj-he) !important; outline: none !important;
    background: var(--cj-he-fundo) !important;
}
.ws-cj-he-n { font-weight: 800; color: var(--cj-he-tinta); }
.ws-cj-he-badge {
    display: inline-block; padding: 1px 7px; border-radius: 999px; white-space: nowrap;
    font-size: .6875rem; font-weight: 800; color: #fff; background: var(--cj-he);
}
.ws-cj-grade .ws-cj-grade-linha-total > td.ws-cj-he-total { color: #c4b5fd !important; }
:root[data-theme="dark"] .ws-cj-grade .ws-cj-grade-linha-total > td.ws-cj-he-total { color: var(--cj-he) !important; }
.ws-cj-num.ws-cj-num--he strong { color: var(--cj-he); }
.ws-cj-amostra.ws-cj-he { box-shadow: inset 0 0 0 2px var(--cj-he); background: var(--cj-he-fundo); }

.ws-cj-he-alerta {
    display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--cj-he) 45%, transparent); border-left: 4px solid var(--cj-he);
    border-radius: 10px; background: var(--cj-he-fundo);
}
.ws-cj-he-alerta-icone {
    flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
    border-radius: 8px; color: #fff; background: var(--cj-he);
}
.ws-cj-he-alerta-corpo { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: .8125rem; color: var(--sigo-text); }
.ws-cj-he-alerta-corpo > strong { color: var(--cj-he-tinta); font-size: .875rem; }
.ws-cj-he-alerta-corpo > span { color: var(--sigo-muted); }
@media print {
    .ws-cj-he-alerta, .ws-cj-he-badge, .ws-cj-grade td.ws-cj-he { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ── Conformidade de Jornada › feriado (2026-10-17): dia sem jornada contabilizada. Verde-azulado com listras — fora
   das cores da grade (azul escala, vermelho sem atendimento, laranja fora, roxo hora extra). ── */
.ws-cj { --cj-fer: #0f9488; --cj-fer-tinta: #0b6b63; --cj-fer-fundo: #e7f6f4; }
:root[data-theme="dark"] .ws-cj { --cj-fer: #2dd4bf; --cj-fer-tinta: #99f6e4; --cj-fer-fundo: rgba(45, 212, 191, .12); }
.ws-cj-grade td.ws-cj-feriado {
    box-shadow: none !important; outline: none !important;
    background: repeating-linear-gradient(135deg, var(--cj-fer-fundo) 0 6px, transparent 6px 12px), var(--cj-fer-fundo) !important;
}
.ws-cj-grade tr.ws-cj-dia-feriado th { color: var(--cj-fer-tinta); }
.ws-cj-feriado-tag {
    display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 999px; vertical-align: 1px;
    font-size: .625rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #fff; background: var(--cj-fer);
}
.ws-cj-amostra.ws-cj-feriado {
    background: repeating-linear-gradient(135deg, var(--cj-fer-fundo) 0 3px, color-mix(in srgb, var(--cj-fer) 35%, transparent) 3px 5px);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cj-fer) 45%, transparent);
}
.ws-cj-troca-tag {
    display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 999px; vertical-align: 1px;
    font-size: .625rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--sigo-surface); background: var(--sigo-text);
}
.ws-cj-canal.ws-cj-canal--troca { border-color: color-mix(in srgb, var(--sigo-text) 30%, var(--sigo-border)); }
.ws-cj-canal--troca .mud-icon-root { color: var(--sigo-text) !important; }
.ws-cj-canal.ws-cj-canal--feriado { border-color: color-mix(in srgb, var(--cj-fer) 45%, var(--sigo-border)); background: var(--cj-fer-fundo); }
.ws-cj-canal--feriado .mud-icon-root, .ws-cj-canal--feriado strong { color: var(--cj-fer-tinta) !important; }
@media print {
    .ws-cj-grade td.ws-cj-feriado, .ws-cj-feriado-tag { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ── Parâmetros › Cadastros › Feriados (2026-10-17) ── */
.ws-fer-data { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.ws-fer-sub { color: var(--sigo-muted); font-size: .75rem; }
.ws-fer-tag {
    display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 999px; font-size: .6875rem; font-weight: 700;
    color: var(--sigo-muted); background: var(--sigo-bg); border: 1px solid var(--sigo-border);
}
.ws-fer-abr {
    display: inline-block; padding: 1px 8px; border-radius: 6px; font-size: .75rem; font-weight: 600; white-space: nowrap;
    border: 1px solid var(--sigo-border); background: var(--sigo-bg); color: var(--sigo-text);
}
.ws-fer-abr--nacional { color: var(--sigo-tom-marca-tinta); border-color: color-mix(in srgb, var(--sigo-tom-marca) 40%, var(--sigo-border)); }
.ws-fer-abr--estadual { color: var(--sigo-tom-atencao-tinta); border-color: color-mix(in srgb, var(--sigo-tom-atencao) 45%, var(--sigo-border)); }
.ws-fer-abr--municipal { color: var(--sigo-tom-bom-tinta); border-color: color-mix(in srgb, var(--sigo-tom-bom) 40%, var(--sigo-border)); }
.ws-fer-regra {
    display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 8px 12px; border-radius: 8px;
    font-size: .8125rem; color: var(--sigo-text); background: var(--sigo-bg); border: 1px solid var(--sigo-border);
}
.ws-fer-regra .mud-icon-root { color: var(--sigo-tom-marca); }
.ws-fer-locais { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.ws-fer-local {
    all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px;
    font-size: .75rem; color: var(--sigo-text); background: var(--sigo-surface); border: 1px solid var(--sigo-border);
}
.ws-fer-local strong { font-size: .6875rem; color: var(--sigo-muted); }
.ws-fer-local:hover { border-color: var(--sigo-tom-marca); color: var(--sigo-tom-marca-tinta); }
.ws-fer-local:focus-visible { box-shadow: var(--sigo-focus-ring); }
.ws-fer-resumo { display: grid; gap: 10px; }
.ws-fer-resumo > div { display: flex; flex-direction: column; gap: 2px; }
.ws-fer-resumo strong { color: var(--sigo-text); }
.ws-fer-nota { margin: 12px 0 0; font-size: .75rem; line-height: 1.5; color: var(--sigo-muted); }

/* ── Tabela de Horários › Próximos feriados (2026-10-17) — mesma cor de feriado da Conformidade de Jornada ── */
.ws-esc-feriados {
    --fer: #0f9488; --fer-tinta: #0b6b63; --fer-fundo: #e7f6f4;
    margin-top: 16px; padding: 12px 14px; border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--fer) 30%, var(--sigo-border)); background: var(--sigo-surface);
}
:root[data-theme="dark"] .ws-esc-feriados { --fer: #2dd4bf; --fer-tinta: #99f6e4; --fer-fundo: rgba(45, 212, 191, .12); }
.ws-esc-feriados-cab { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.ws-esc-feriados-cab strong { color: var(--sigo-text); }
.ws-esc-feriados-icone {
    display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 7px;
    color: #fff; background: var(--fer);
}
.ws-esc-feriados-sub { font-size: .75rem; color: var(--sigo-muted); }
.ws-esc-feriados-lista { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.ws-esc-feriado {
    flex: 0 0 auto; display: flex; flex-direction: column; gap: 1px; min-width: 150px; max-width: 220px; padding: 8px 10px;
    border-radius: 10px; background: var(--fer-fundo); border: 1px solid color-mix(in srgb, var(--fer) 30%, transparent);
}
.ws-esc-feriado-data { font-weight: 800; color: var(--fer-tinta); font-variant-numeric: tabular-nums; }
.ws-esc-feriado-data small { font-weight: 600; margin-left: 2px; }
.ws-esc-feriado-nome { font-size: .8125rem; font-weight: 600; color: var(--sigo-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-esc-feriado-meta { font-size: .6875rem; color: var(--sigo-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Tabela de Horários › escala adicional (2026-10-17): colaborador em mais de uma escala ao mesmo tempo ── */
.ws-esc-adic-tag {
    display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 999px; vertical-align: 1px;
    font-size: .6875rem; font-weight: 700; color: var(--sigo-tom-marca-tinta);
    background: color-mix(in srgb, var(--sigo-tom-marca) 12%, var(--sigo-surface));
    border: 1px solid color-mix(in srgb, var(--sigo-tom-marca) 35%, transparent);
}
.ws-esc-adic-tag--mais { color: var(--sigo-muted); background: var(--sigo-bg); border-color: var(--sigo-border); }
/* Histórico de escalas (EscalaHistoricoDialog) */
.ws-esc-hist { width: 100%; border-collapse: collapse; font-size: .8125rem; }
.ws-esc-hist th {
    text-align: left; padding: 0 8px 8px; font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
    color: var(--sigo-muted); border-bottom: 1px solid var(--sigo-border);
}
.ws-esc-hist td { padding: 8px; border-bottom: 1px solid var(--sigo-border); vertical-align: middle; }
.ws-esc-hist tr.ws-esc-hist--vigente td { background: color-mix(in srgb, var(--sigo-tom-bom) 6%, var(--sigo-surface)); }
.ws-esc-hist-periodo { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ws-esc-adic-nota {
    display: flex; align-items: flex-start; gap: 8px; margin: 4px 0 12px; padding: 8px 12px; border-radius: 8px;
    font-size: .8125rem; line-height: 1.45; color: var(--sigo-text); background: var(--sigo-bg); border: 1px solid var(--sigo-border);
}
.ws-esc-adic-nota .mud-icon-root { flex: none; margin-top: 1px; color: var(--sigo-tom-marca); }

/* ── Relatórios (/relatorios, 2026-10-16): página central com os relatórios em cards, agrupados por área.
   Barra (busca com largura limitada + chips de área + contador); card inteiro clicável (ícone, título, descrição,
   itens com check, rodapé com fontes/formatos e "Abrir relatório"); card tracejado "Novos relatórios em breve". ── */
.ws-rel { max-width: 1440px; }
.ws-rel-barra { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; margin-bottom: 22px; }
.ws-rel-busca { flex: 0 1 380px; min-width: 240px; }
.ws-rel-busca.mud-input-control, .ws-rel-busca .mud-input-control { margin: 0; }
.ws-rel-areas { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 auto; }
.ws-rel-area-chip {
    all: unset; box-sizing: border-box; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px;
    font-size: .8125rem; font-weight: 600; color: var(--sigo-muted);
    background: var(--sigo-surface); border: 1px solid var(--sigo-border); border-radius: 999px;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.ws-rel-area-chip .mud-icon-root { font-size: 1.05rem !important; }
.ws-rel-area-chip > span {
    min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
    font-size: .6875rem; font-weight: 700; background: var(--sigo-bg); color: var(--sigo-muted);
}
.ws-rel-area-chip:hover { border-color: color-mix(in srgb, var(--sigo-tom-marca) 45%, var(--sigo-border)); color: var(--sigo-text); }
.ws-rel-area-chip:focus-visible { box-shadow: var(--sigo-focus-ring); }
.ws-rel-area-chip--ativo {
    color: var(--sigo-tom-marca-tinta); border-color: var(--sigo-tom-marca);
    background: color-mix(in srgb, var(--sigo-tom-marca) 8%, var(--sigo-surface));
}
.ws-rel-area-chip--ativo > span { background: var(--sigo-tom-marca); color: #fff; }
.ws-rel-total { margin-left: auto; font-size: .8125rem; color: var(--sigo-muted); white-space: nowrap; }

.ws-rel-vazio {
    display: flex; align-items: center; gap: 14px; padding: 28px 24px;
    border: 1px dashed var(--sigo-border); border-radius: 14px; color: var(--sigo-muted); background: var(--sigo-surface);
}
.ws-rel-vazio > div { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.ws-rel-vazio strong { color: var(--sigo-text); }

.ws-rel-area { margin-bottom: 30px; }
.ws-rel-area-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.ws-rel-area-icone {
    display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px;
    color: var(--sigo-tom-marca); background: color-mix(in srgb, var(--sigo-tom-marca) 12%, var(--sigo-surface));
}
.ws-rel-area-cab h2 { margin: 0; font-size: 1rem; font-weight: 700; color: var(--sigo-text); }
.ws-rel-area-qtd { font-size: .8125rem; color: var(--sigo-muted); }
.ws-rel-area-cab::after { content: ""; flex: 1; height: 1px; background: var(--sigo-border); margin-left: 6px; }

.ws-rel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 18px; }
.ws-rel-card {
    position: relative; display: flex; flex-direction: column; gap: 14px; padding: 22px 22px 18px;
    color: inherit; text-decoration: none;
    background: var(--sigo-surface); border: 1px solid var(--sigo-border); border-radius: 14px; box-shadow: var(--sigo-shadow);
    overflow: hidden; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
a.ws-rel-card::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
    background: linear-gradient(90deg, var(--sigo-tom-marca), color-mix(in srgb, var(--sigo-tom-marca) 35%, var(--ws-cyan, #2fd3ff)));
}
a.ws-rel-card:hover {
    border-color: color-mix(in srgb, var(--sigo-tom-marca) 50%, var(--sigo-border));
    box-shadow: 0 10px 28px -14px color-mix(in srgb, var(--sigo-tom-marca) 55%, transparent);
    transform: translateY(-2px);
}
a.ws-rel-card:focus-visible { outline: none; box-shadow: var(--sigo-focus-ring); }
.ws-rel-card-cab { display: flex; align-items: center; gap: 14px; }
.ws-rel-card-icone {
    flex: none; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px;
    color: var(--sigo-tom-marca); background: color-mix(in srgb, var(--sigo-tom-marca) 12%, var(--sigo-surface));
}
.ws-rel-card-icone .mud-icon-root { font-size: 1.6rem !important; }
.ws-rel-card-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ws-rel-card-id h3 { margin: 0; font-size: 1.125rem; font-weight: 700; line-height: 1.25; color: var(--sigo-text); }
.ws-rel-card-id span { font-size: .75rem; font-weight: 600; color: var(--sigo-muted); text-transform: uppercase; letter-spacing: .05em; }
.ws-rel-card-rodape {
    margin-top: auto; padding-top: 14px; border-top: 1px solid var(--sigo-border);
    display: flex; align-items: center; justify-content: flex-end; gap: 12px;
}
.ws-rel-card-abrir {
    display: inline-flex; align-items: center; gap: 4px; padding: 8px 14px; border-radius: 10px; white-space: nowrap;
    font-size: .875rem; font-weight: 700; color: #fff; background: var(--ws-navy, #152341);
    transition: background-color .15s ease;
}
a.ws-rel-card:hover .ws-rel-card-abrir { background: var(--sigo-tom-marca); }
.ws-rel-card--breve {
    align-items: center; justify-content: center; text-align: center; gap: 8px; min-height: 150px;
    border-style: dashed; box-shadow: none; background: transparent; color: var(--sigo-muted); font-size: .8125rem;
}
.ws-rel-card--breve strong { font-size: .9375rem; color: var(--sigo-text); }
.ws-rel-card--breve .ws-rel-card-icone { color: var(--sigo-muted); background: var(--sigo-bg); }
@media (max-width: 760px) {
    .ws-rel-busca { flex-basis: 100%; }
    .ws-rel-total { margin-left: 0; }
    .ws-rel-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    .ws-rel-card, .ws-rel-area-chip, .ws-rel-card-abrir { transition: none; }
    a.ws-rel-card:hover { transform: none; }
}

/* Formulário bloqueado (ex.: Pedido com contrato ativo, 2026-10-17): fieldset[disabled] desabilita os campos
   nativos sem alterar o layout. */
.ws-fieldset-bloqueio { border: 0; padding: 0; margin: 0; min-width: 0; }
.ws-fieldset-bloqueio[disabled] .mud-input-control,
.ws-fieldset-bloqueio[disabled] .mud-select,
.ws-fieldset-bloqueio[disabled] .mud-switch { pointer-events: none; }

/* Painel de Controle › Ligações › Técnicos (2026-10-19): faixa do técnico selecionado com "Limpar técnico e ver todos". */
.ws-lig2-filtro-tecnico {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
    padding: 8px 12px;
    border: 1px solid var(--sigo-border);
    border-left: 3px solid var(--mud-palette-primary);
    border-radius: 8px;
    background: var(--sigo-surface);
}
.ws-lig2-filtro-tecnico-texto { flex: 1; min-width: 160px; font-size: .8125rem; }

/* ── Dashboard de Tickets › Por canal de entrada (redesenho 2026-10-19) ── */
.ws-tkt-canal { display: flex; flex-direction: column; gap: 16px; height: 100%; }
.ws-tkt-canal-topo { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.ws-tkt-canal-topo svg { width: 190px; height: 190px; flex-shrink: 0; }
.ws-tkt-canal-fatia--ativa { stroke-width: 26; }
.ws-tkt-canal-resumo { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 200px; }
.ws-tkt-canal-resumo-rotulo { font-size: .6875rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--sigo-muted); }
.ws-tkt-canal-resumo-nome { display: flex; align-items: center; gap: 8px; font-size: 1.375rem; font-weight: 800; color: var(--sigo-text); }
.ws-tkt-canal-resumo-sub { font-size: .8125rem; color: var(--sigo-text-body); }
.ws-tkt-canal-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.ws-tkt-canal-kpis > div {
    display: flex; flex-direction: column; padding: 10px 12px; border: 1px solid var(--sigo-border); border-radius: 10px;
    background: color-mix(in srgb, var(--sigo-tom-marca) 4%, transparent);
}
.ws-tkt-canal-kpis strong { font-size: 1.125rem; font-weight: 800; color: var(--sigo-text); font-variant-numeric: tabular-nums; }
.ws-tkt-canal-kpis span { font-size: .75rem; color: var(--sigo-muted); }
.ws-tkt-canal-tabela { display: flex; flex-direction: column; gap: 2px; overflow-x: auto; }
.ws-tkt-canal-linha {
    display: grid; align-items: center; gap: 10px; padding: 8px 8px; min-width: 620px; border-radius: 8px;
    grid-template-columns: 12px minmax(130px, 1.6fr) minmax(120px, 1.3fr) repeat(4, minmax(72px, .8fr));
    font-size: .8125rem; color: var(--sigo-text-body);
}
.ws-tkt-canal-cab { padding-top: 0; padding-bottom: 4px; font-size: .6875rem; font-weight: 700; color: var(--sigo-muted); text-transform: uppercase; letter-spacing: .03em; }
.ws-tkt-canal-linha:not(.ws-tkt-canal-cab):hover { background: color-mix(in srgb, var(--sigo-tom-marca) 6%, transparent); }
.ws-tkt-canal-linha--ativa { background: color-mix(in srgb, var(--sigo-tom-marca) 10%, transparent); box-shadow: inset 3px 0 0 var(--sigo-tom-marca); }
.ws-tkt-canal-nome { display: flex; flex-direction: column; min-width: 0; font-weight: 600; color: var(--sigo-text); }
.ws-tkt-canal-nome small { font-weight: 400; font-size: .6875rem; color: var(--sigo-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-tkt-canal-share { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.ws-tkt-canal-share strong { font-variant-numeric: tabular-nums; color: var(--sigo-text); }
.ws-tkt-canal .ws-lig2-volume-barra > .ws-tkt-cor--0 { background: var(--viz-1); }
.ws-tkt-canal .ws-lig2-volume-barra > .ws-tkt-cor--1 { background: var(--viz-3); }
.ws-tkt-canal .ws-lig2-volume-barra > .ws-tkt-cor--2 { background: var(--viz-4); }
.ws-tkt-canal .ws-lig2-volume-barra > .ws-tkt-cor--3 { background: var(--viz-5); }
.ws-tkt-canal .ws-lig2-volume-barra > .ws-tkt-cor--4 { background: var(--viz-6); }
.ws-tkt-canal .ws-lig2-volume-barra > .ws-tkt-cor--5 { background: var(--viz-7); }
.ws-tkt-canal .ws-lig2-volume-barra > .ws-tkt-cor--6 { background: var(--viz-neutral); }

/* Gargalos por estágio — filtro de mesas do card (2026-10-19) */
.ws-tkt-gargalo-filtro { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.ws-tkt-gargalo-mesas { max-width: 360px; min-width: 240px; flex: 0 1 360px; }