h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

.pdv-login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--t7-gradiente-claro, linear-gradient(135deg, #32BDF9 0%, #3B82F6 100%)); /* fundo sem texto: único lugar do gradiente claro */
}

.pdv-login-card {
    width: 100%;
    max-width: 400px;
    border-radius: 20px !important;
    box-shadow: 0 24px 60px rgba(9, 30, 66, .35) !important;
}

/* Padrão de legibilidade de gráfico (MudBlazor 9.9 MudChart) — reclamação direta do dono
   (2026-09-02): "esses gráficos estão muito pequenos e os labels que aparecem ao passar o mouse
   são tão pequenos que eu, que tenho uma visão ótima, não consigo ver nada; as linhas de todos os
   gráficos são muito finas ... todos os gráficos do sistema estão com o mesmo problema". Rede de
   segurança em CSS pra QUALQUER MudChart do sistema (mesmo um que nasça sem passar pelo padrão
   C# em Components/Shared/GraficoPadrao.cs). Seletores confirmados inspecionando o SVG renderizado
   em produção (Playwright, /unidade-negocio/trajetoria-cumprimento e /unidade-negocio/control-tower,
   2026-09-02): eixo/tooltip usam o atributo de apresentação SVG `font-size` (não `style` inline),
   então uma regra CSS comum já vence sem precisar de !important — presentation attribute tem
   especificidade mais baixa que qualquer regra de autor. */
/* Gráficos: Apache ECharts via wwwroot/js/graficos.js (fonte, tooltip e espessura ficam lá) — sem CSS de MudChart. */

/* Barra de abas sempre por cima dos vizinhos: os itens do MudGrid do cabeçalho (Spacing=6 → caixa
   de padding 24px maior que o conteúdo) desciam sobre a metade de baixo das abas e engoliam o
   clique (achado QA r14/r15 no Control Tower, 2026-09-02; classe real da barra: .mud-tabs-tabbar). */
.mud-tabs-tabbar { position: relative; z-index: 3; }
.mud-tabs-panels { position: relative; z-index: 1; }

/* Barra de navegação do bloco Entidade (EntidadeAbas.razor): pílulas com fundo suave, ativa em
   destaque — pedido do dono (2026-09-02). */
.entidade-abas { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px; background: #F1F4F8; border-radius: 999px; }
.entidade-aba { display: inline-flex; align-items: center; padding: 8px 18px; border-radius: 999px; font-size: 14px; font-weight: 500;
  color: #37474F; text-decoration: none; line-height: 1.2; transition: background .15s, color .15s, box-shadow .15s; white-space: nowrap; }
.entidade-aba:hover { background: #E3E8EF; color: #1E293B; text-decoration: none; }
.entidade-aba.ativa { background: linear-gradient(135deg, #594AE2, #7C6CF0); color: #fff; box-shadow: 0 4px 12px rgba(89,74,226,.35); }
@media (max-width: 700px) { .entidade-abas { border-radius: 16px; } }

/* Área de arrastar e soltar (Trabalhos > Importações) — achado real do suporte (14/09/2026): o
   <InputFile> real do MudFileUpload fica com o atributo HTML `hidden` (Hidden=true é o padrão) até
   a própria DragAndDrop mudar o estado — mas um elemento `hidden` não recebe evento nenhum do
   navegador (nem dragenter), então o primeiro arrasto nunca disparava e o campo nunca saía do
   estado escondido: arrastar um arquivo não fazia nada. Correção: Hidden="false" + este overlay
   transparente cobrindo a área visível — é o <input type=file> real (clique e soltar funcionam
   nativamente), só sem aparência; MudPaper por baixo é só a moldura visual. */
.pdv-area-arrastar-arquivo { position: relative; }
.pdv-input-arrastar-arquivo { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 1; }

/* WideDataTable do plano de adequação comercial (docs/PLANO-ADEQUACAO-DASHBOARDS-COMERCIAL.md,
   seção 2) — tabela larga sempre com rolagem horizontal visível (nunca depender de chegar no fim
   pra perceber que tem mais coluna) e a 1ª coluna (dimensão/contexto) fixa durante essa rolagem.
   Usar junto com MudTable FixedHeader="true" Height="..." (cabeçalho fixo já é nativo do MudBlazor)
   — esta classe só resolve rolagem horizontal + coluna de contexto fixa, que o MudTable não tem. */
.tabela-larga { overflow-x: auto; }
.tabela-larga table th:first-child, .tabela-larga table td:first-child {
  position: sticky; left: 0; z-index: 2; background: var(--mud-palette-surface);
  box-shadow: 2px 0 4px rgba(0,0,0,.06);
}
.tabela-larga table thead th:first-child { z-index: 3; }

/* ===== Padrão visual Trade7 (docs/PADRAO-VISUAL.md, 22/09/2026) — camada de design sobre o MudBlazor.
   Cor com significado fixo, relevo real nos cartões, número grande nos KPIs, tabela como detalhe. ===== */
:root {
  /* Sistema de design Trade7 (03/10/2026, decisão #14): cores com contraste AA medido. --t7-primaria só sem texto;
     --t7-primaria-escura é a que leva texto branco e vira link; tom "-texto" de cada status é o único permitido como texto. */
  --t7-primaria: #2E7FEB; --t7-primaria-escura: #2569C7; --t7-primaria-mais-escura: #1F5FBA; --t7-primaria-clara: #E8F1FD;
  --t7-atencao: #F4AC57; --t7-atencao-clara: #FDF1E3; --t7-atencao-texto: #9A5A0C;
  --t7-perigo: #CE0404; --t7-perigo-clara: #FEB9B9; --t7-perigo-texto: #A50303;
  --t7-sucesso: #64BB77; --t7-sucesso-escura: #1E7A3A; --t7-sucesso-texto: #1E7A3A; --t7-sucesso-clara: #EBFAEE;
  --t7-aviso: #EDB012; --t7-aviso-escura: #8A5A00; --t7-aviso-texto: #8A5A00; --t7-aviso-clara: #FDF4DE;
  --t7-navy: #1B3A5C; --t7-texto: #1E293B; --t7-texto-2: #64748B; --t7-texto-2-tinto: #5B6B82; --t7-contorno: #7F8EA3; --t7-borda: #E2E8F0;
  --t7-cabecalho-tabela: #F1F5F9; --t7-veu: rgba(30,41,59,.45);
  --t7-sombra-cartao: 0 1px 2px rgba(15,23,42,.08), 0 8px 24px rgba(15,23,42,.10);
  --t7-sombra-botao: 0 6px 16px rgba(46,127,235,.35); --t7-sombra-botao-pressionado: 0 2px 6px rgba(46,127,235,.35);
  --t7-gradiente-primario: linear-gradient(135deg, #2B73DA 0%, #2569C7 100%);
  --t7-gradiente-claro: linear-gradient(135deg, #32BDF9 0%, #3B82F6 100%);
  --t7-transicao: 120ms ease;
}
body, .mud-typography { -webkit-font-smoothing: antialiased; }

/* Título de página: Exo 2 navy; subtítulo cinza. */
.mud-main-content .mud-typography-h4, .mud-main-content .mud-typography-h5 { color: var(--t7-navy); }

/* Cartões e papéis com relevo real (sem borda cinza). */
.mud-main-content .mud-paper:not(.mud-alert):not(.mud-table-toolbar):not(.mud-dialog):not(.mud-popover):not(.mud-drawer) {
  box-shadow: var(--t7-sombra-cartao); border-color: transparent;
}
.mud-main-content .mud-paper-outlined { box-shadow: none; border: 1px solid var(--t7-borda); }

/* Botão principal: gradiente + sombra colorida; texto sem caixa alta. */
.mud-button-filled.mud-button-filled-primary { background: var(--t7-gradiente-primario); box-shadow: var(--t7-sombra-botao); }
.mud-button-filled.mud-button-filled-primary:hover { background: var(--t7-primaria-mais-escura); box-shadow: var(--t7-sombra-botao-pressionado); }
.mud-button-filled.mud-button-filled-primary:active { transform: scale(.98); box-shadow: var(--t7-sombra-botao-pressionado); }
.mud-button-root { border-radius: 12px; transition: background-color var(--t7-transicao), box-shadow var(--t7-transicao), transform var(--t7-transicao), color var(--t7-transicao); }

/* Barra superior navy com logo branco; menu lateral: item ativo com barra azul à esquerda. */
.mud-appbar .mud-typography, .mud-appbar .mud-button-root, .mud-appbar .mud-link { color: #fff; }
.mud-drawer .mud-nav-link { border-radius: 10px; margin: 2px 8px; color: var(--t7-texto); }
/* Marca Trade7 no cabeçalho do menu lateral (28/10/2026): TRADE herda a cor do tema; o 7 fica num quadrado com o degradê da marca. */
.t7-marca { display: inline-flex; align-items: center; gap: 3px; font-weight: 800; font-size: 1.15rem; letter-spacing: .06em; line-height: 1; color: inherit; }
.t7-marca .t7-sete { display: inline-flex; align-items: center; justify-content: center; width: 1.3em; height: 1.3em; border-radius: .28em; background: linear-gradient(135deg, #32BDF9 0%, #2569C7 100%); color: #fff; font-weight: 900; font-style: italic; letter-spacing: 0; }
.mud-drawer .mud-nav-link:hover { background: #F1F5F9; }
.mud-drawer .mud-nav-link.active { background: var(--t7-primaria-clara); color: var(--t7-primaria-escura); font-weight: 600; box-shadow: inset 4px 0 0 var(--t7-primaria); }
.mud-drawer .mud-nav-link.active .mud-icon-root { color: var(--t7-primaria); }

/* Tabelas: cabeçalho suave, linhas de 44 px, zebra leve, hover azul. */
.mud-table-container thead .mud-table-cell { background: var(--t7-cabecalho-tabela); color: var(--t7-texto-2-tinto); font-weight: 600; font-size: 13px; letter-spacing: .01em; height: 44px; }
.mud-table-container .mud-table-cell { padding-top: 10px; padding-bottom: 10px; font-size: 13px; line-height: 18px; min-height: 44px; }
.mud-table-container tbody .mud-table-cell:first-child { font-weight: 600; }
.mud-table-container .mud-table-cell .mud-chip { height: 28px; }
.mud-table-container tbody tr:nth-of-type(even) { background: #F8FAFC; }
.mud-table-container tbody tr:hover { background: #EEF4FD !important; }

/* Chips de situação: cor de significado fixa (mesmas do app). */
.mud-chip.mud-chip-color-success { background: var(--t7-sucesso-clara); color: var(--t7-sucesso-texto); --t7-ponto: var(--t7-sucesso); }
.mud-chip.mud-chip-color-warning { background: var(--t7-aviso-clara); color: var(--t7-aviso-texto); --t7-ponto: var(--t7-aviso); }
.mud-chip.mud-chip-color-error { background: var(--t7-perigo-clara); color: var(--t7-perigo-texto); --t7-ponto: var(--t7-perigo); }
.mud-chip.mud-chip-color-secondary { background: var(--t7-atencao-clara); color: var(--t7-atencao-texto); --t7-ponto: var(--t7-atencao); }
.mud-chip.mud-chip-color-primary, .mud-chip.mud-chip-color-info { background: var(--t7-primaria-clara); color: var(--t7-primaria-escura); --t7-ponto: var(--t7-primaria); }
.mud-chip.mud-chip-color-default { background: var(--t7-cabecalho-tabela); color: var(--t7-texto-2-tinto); }
.mud-chip { font-weight: 600; font-size: 13px; height: 28px; border-radius: 999px; transition: background-color var(--t7-transicao), color var(--t7-transicao); }
/* Chip de estado: ponto de 8 na cor forte no lugar do ícone (decisão #14-a); só chip não tocável. Chip de filtro (tocável) não leva ponto. */
.mud-chip[style*="--t7-ponto"]::before, .mud-chip.mud-chip-color-success:not(.mud-clickable)::before, .mud-chip.mud-chip-color-warning:not(.mud-clickable)::before,
.mud-chip.mud-chip-color-error:not(.mud-clickable)::before, .mud-chip.mud-chip-color-secondary:not(.mud-clickable)::before,
.mud-chip.mud-chip-color-primary:not(.mud-clickable)::before, .mud-chip.mud-chip-color-info:not(.mud-clickable)::before {
  content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--t7-ponto); margin-right: 6px; flex: none; }
.mud-chip:not(.mud-clickable) .mud-chip-icon { display: none; }
/* Chip de ESTADO (não tocável) é sempre fundo claro + tom de texto + ponto, mesmo quando o Razor usa Variant.Filled. Cheio forte só em
   chip tocável selecionado (filtro): texto escuro sobre laranja, verde e amarelo; branco sobre vermelho e azul. */
.mud-chip.mud-clickable.mud-chip-filled.mud-chip-color-success, .mud-chip.mud-clickable.mud-chip-filled.mud-chip-color-warning, .mud-chip.mud-clickable.mud-chip-filled.mud-chip-color-secondary { color: var(--t7-texto); }
.mud-chip.mud-clickable.mud-chip-filled.mud-chip-color-success { background: var(--t7-sucesso); } .mud-chip.mud-clickable.mud-chip-filled.mud-chip-color-warning { background: var(--t7-aviso); }
.mud-chip.mud-clickable.mud-chip-filled.mud-chip-color-secondary { background: var(--t7-atencao); }
.mud-chip.mud-clickable.mud-chip-filled.mud-chip-color-error { background: var(--t7-perigo); color: #fff; } .mud-chip.mud-clickable.mud-chip-filled.mud-chip-color-primary { background: var(--t7-primaria-escura); color: #fff; }

/* Cartão de KPI: número grande Exo 2 na cor do significado, rótulo abaixo, mesmo tamanho na linha. */
.t7-kpi { display: flex; flex-direction: column; justify-content: center; min-height: 112px; padding: 16px 20px; border-radius: 16px;
  background: #fff; box-shadow: var(--t7-sombra-cartao); position: relative; overflow: hidden; }
.t7-kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--t7-cor, var(--t7-contorno)); } /* sem estado = cinza: azul é só ação */
.t7-kpi-valor { font-family: 'Exo 2', 'Open Sans', sans-serif; font-weight: 700; font-size: 32px; line-height: 1.1; color: var(--t7-cor, var(--t7-navy)); }
.t7-kpi-rotulo { font-size: 13px; color: var(--t7-texto-2); margin-top: 4px; font-weight: 600; }
.t7-kpi-apoio { font-size: 13px; color: var(--t7-texto-2); margin-top: 2px; }
.t7-kpi.sucesso { --t7-cor: var(--t7-sucesso-texto); } .t7-kpi.atencao { --t7-cor: var(--t7-atencao-texto); }
.t7-kpi.perigo { --t7-cor: var(--t7-perigo); } .t7-kpi.aviso { --t7-cor: var(--t7-atencao-texto); } .t7-kpi.neutro { --t7-cor: var(--t7-navy); }
.t7-kpi .t7-kpi-valor, .t7-kpi .t7-kpi-rotulo { font-variant-numeric: tabular-nums; }
/* Número compacto 26 quando seis dividem uma linha (Gestão das Unidades). */
.t7-kpi.compacto { min-height: 88px; padding: 12px 16px; } .t7-kpi.compacto .t7-kpi-valor { font-size: 26px; }

/* Abas do bloco Entidade seguem a primária (antes roxo, fora da paleta). */
.entidade-aba.ativa { background: var(--t7-gradiente-primario); box-shadow: 0 4px 12px rgba(46,127,235,.35); }

/* Diálogos e alertas: cantos e respiro. */
.mud-dialog { border-radius: 16px; }
.mud-alert { border-radius: 12px; }

/* Fileira de KPIs com N cartões iguais (5 sinais da Ruptura etc.): grade fluida, todos da mesma largura e altura. */
.t7-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.t7-kpis > * { display: flex; }
.t7-kpis .mud-link { width: 100%; display: flex; }
.t7-kpis .t7-kpi { width: 100%; }

/* CI-045 — pins do Mapa da Operação: ícone + cor (a legenda traz o texto). */
.t7-pin-envelope { background: transparent; border: none; }
.t7-pin { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%;
    color: #fff; font-size: 13px; font-weight: 700; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.t7-pin-pequeno { width: 18px; height: 18px; font-size: 10px; vertical-align: middle; }
.t7-mapa-legenda { background: var(--mud-palette-surface, #fff); padding: 6px 10px; border-radius: 6px; box-shadow: 0 1px 4px rgba(0,0,0,.3); font-size: 13px; line-height: 22px; }

/* CI-048 §24 — impressão/PDF das telas: sem menu, barra, listas escondidas dos seletores nem painel recolhido (eram as páginas em
   branco no fim do PDF); cartão e tabela não se partem no meio. */
@media print {
  .mud-appbar, .mud-drawer, .mud-drawer-overlay, .mud-popover-provider, .mud-snackbar-provider, .mud-overlay { display: none !important; }
  .mud-main-content { padding-top: 0 !important; margin-left: 0 !important; }
  /* Achado de QA 30/09/2026: no MudBlazor 9 o painel é .mud-expand-panel e o conteúdo recolhido fica num grid de altura 0
     marcado .invisible, que o Chrome imprime inteiro — 9 páginas em branco no fim da Comparação de Preço. */
  .mud-collapse-container.invisible, .mud-expand-panel:not(.mud-panel-expanded) .mud-collapse-container { display: none !important; }
  html, body, .mud-layout { height: auto !important; min-height: 0 !important; overflow: visible !important; }
  .mud-paper, .t7-kpi, .mud-chart, .mud-table-container { break-inside: avoid; }
}

/* ===== Sistema de design Trade7 — 03/10/2026 (relatório docs/design/Trade7-sistema-de-design-relatorio_v1.pdf, decisão #14) ===== */
/* Alturas: botão 48, principal 52, só-ícone 48 (44 na tabela), campo 48, barra superior 64. */
.mud-button-root.mud-button { min-height: 48px; padding-left: 20px; padding-right: 20px; }
.mud-button-root.mud-button.mud-button-filled.mud-button-filled-primary { min-height: 52px; }
.mud-dialog-actions .mud-button-root.mud-button, .mud-table-toolbar .mud-button-root.mud-button, .mud-expand-panel-header .mud-button-root.mud-button,
.mud-button-root.mud-button.mud-button-text, .mud-chip-set .mud-button-root.mud-button { min-height: 48px; }
.mud-button-root.mud-button.mud-button-text { padding-left: 12px; padding-right: 12px; }
.mud-button-root.mud-icon-button { width: 48px; height: 48px; }
.mud-table-container .mud-button-root.mud-icon-button { width: 44px; height: 44px; }
.mud-button-root.mud-icon-button.mud-button-root-size-small { width: 40px; height: 40px; }
.mud-input-control:not(.mud-input-control-margin-dense) .mud-input.mud-input-outlined > input.mud-input-slot,
.mud-input-control:not(.mud-input-control-margin-dense) .mud-input.mud-input-outlined > .mud-select-input,
.mud-input-control:not(.mud-input-control-margin-dense) .mud-input.mud-input-filled > input.mud-input-slot { min-height: 48px; padding-top: 12px; padding-bottom: 12px; }
.mud-input-control-margin-dense .mud-input.mud-input-outlined > input.mud-input-slot, .mud-input-control-margin-dense .mud-input.mud-input-outlined > .mud-select-input { min-height: 44px; }
.mud-input { font-size: 1rem; }
.mud-appbar.mud-appbar-fixed-top { min-height: 64px; }
/* Ícones de ação na tabela: editar azul, excluir vermelho, baixar azul. */
.mud-table-container .mud-icon-button.mud-primary-text, .mud-table-container .mud-icon-button[aria-label="Editar"] { color: var(--t7-primaria-escura); }
.mud-table-container .mud-icon-button.mud-error-text { color: var(--t7-perigo); }
/* Links e texto em primária passam a usar a primária escura (AA sobre branco). */
.mud-link, .mud-primary-text, .mud-typography.mud-primary-text, .mud-nav-link.active { color: var(--t7-primaria-escura) !important; }
.mud-progress-linear .mud-progress-linear-bar, .mud-progress-circular .mud-progress-circular-circle { color: var(--t7-primaria); }
/* Menu lateral 280: nome do item quebra em até 2 linhas, nunca corta. */
.mud-drawer .mud-nav-link .mud-nav-link-text { white-space: normal; line-height: 1.25; }
.mud-drawer .mud-nav-link { min-height: 44px; }
/* Foco visível em todo controle: aro branco de 2 + anel primário de 2. */
.mud-button-root:focus-visible, .mud-chip:focus-visible, .mud-nav-link:focus-visible, a:focus-visible, .mud-switch-input:focus-visible + .mud-switch-track {
  outline: 2px solid #fff; box-shadow: 0 0 0 4px var(--t7-primaria-escura) !important; }
/* Cartão marcado (aviso com ação): borda esquerda de 4 na cor do significado. */
.t7-cartao-marcado { border-left: 4px solid var(--t7-cor, var(--t7-atencao)); border-radius: 16px; }
.t7-cartao-marcado.perigo { --t7-cor: var(--t7-perigo); } .t7-cartao-marcado.sucesso { --t7-cor: var(--t7-sucesso); } .t7-cartao-marcado.primaria { --t7-cor: var(--t7-primaria); }
/* Véu de diálogo e tooltip. */
.mud-overlay-scrim.mud-overlay-dark { background-color: var(--t7-veu); }
.mud-tooltip { font-size: 13px; }
/* Texto secundário sobre fundo tingido. */
.mud-main-content .mud-typography.mud-text-secondary { color: var(--t7-texto-2-tinto); }
/* Divisória e contorno de campo. */
.mud-input.mud-input-outlined .mud-input-outlined-border { border-color: var(--t7-contorno); }
/* Barra de filtros padrão: cartão leve, campos de 48, botão Filtrar à direita. */
.t7-barra-filtros { border-radius: 16px; box-shadow: var(--t7-sombra-cartao); }
.t7-barra-filtros .mud-input-control { margin-top: 0; }
.t7-barra-filtros .mud-grid { align-items: flex-end; }
/* Achados da revisão dos prints da etapa 1 (03/10/2026): rótulo de botão nunca quebra em 3 linhas; trilha sem caixa alta. */
.mud-button-root.mud-button, .mud-menu .mud-button-root { white-space: nowrap; }
.mud-breadcrumbs, .mud-breadcrumbs .mud-breadcrumb-item { text-transform: none; letter-spacing: 0; font-size: 13px; }
.mud-button-group .mud-button-root.mud-button { min-height: 48px; }
/* Ações da tabela sempre numa linha (editar + excluir lado a lado), ícones de 40 na célula. */
.mud-table-container .mud-table-cell:last-child { white-space: nowrap; }
.mud-table-container .mud-table-cell .mud-icon-button, .mud-table-container .mud-button-root.mud-icon-button { width: 40px; height: 40px; display: inline-flex; }
/* Barra de filtros: adornos compactos para a data caber em 160 px. */
.t7-barra-filtros .mud-input-adornment .mud-icon-button, .t7-barra-filtros .mud-picker .mud-icon-button { width: 32px; height: 32px; }
.t7-barra-filtros .mud-input-adornment { margin-left: 0; }
.t7-barra-filtros .mud-input-slot { padding-right: 0; }
/* Texto de apoio recolhido ("Entenda esta tela"). */
.t7-ajuda .mud-button-root.mud-button { min-height: 36px; padding-left: 8px; padding-right: 12px; }
.t7-ajuda-corpo { background: var(--t7-primaria-clara); border-radius: 12px; padding: 12px 16px; margin-top: 4px; max-width: 960px; }
/* Linha de tabela em 44 mesmo com chip (28) ou botão de ícone (40) na célula. */
.mud-table-container .mud-table-cell:has(.mud-icon-button), .mud-table-container .mud-table-cell:has(.mud-chip) { padding-top: 2px; padding-bottom: 2px; }
/* Janelas prontas (1/4/8/13 semanas) numa linha própria da barra, sem a largura do MudItem original. */
.t7-barra-filtros .t7-barra-extra > .mud-grid-item { flex: 0 0 auto; max-width: none; padding-top: 0; }
/* Chip de estado NÃO tocável: claro + tom de texto, com especificidade acima do .mud-chip-filled.mud-chip-color-* do MudBlazor. */
.mud-chip.mud-chip-filled.mud-chip-color-success:not(.mud-clickable) { background: var(--t7-sucesso-clara); color: var(--t7-sucesso-texto); }
.mud-chip.mud-chip-filled.mud-chip-color-warning:not(.mud-clickable) { background: var(--t7-aviso-clara); color: var(--t7-aviso-texto); }
.mud-chip.mud-chip-filled.mud-chip-color-error:not(.mud-clickable) { background: var(--t7-perigo-clara); color: var(--t7-perigo-texto); }
.mud-chip.mud-chip-filled.mud-chip-color-secondary:not(.mud-clickable) { background: var(--t7-atencao-clara); color: var(--t7-atencao-texto); }
.mud-chip.mud-chip-filled.mud-chip-color-primary:not(.mud-clickable), .mud-chip.mud-chip-filled.mud-chip-color-info:not(.mud-clickable) { background: var(--t7-primaria-clara); color: var(--t7-primaria-escura); }
.mud-chip.mud-chip-filled.mud-chip-color-default:not(.mud-clickable), .mud-chip.mud-chip-filled.mud-chip-color-dark:not(.mud-clickable) { background: var(--t7-cabecalho-tabela); color: var(--t7-texto-2-tinto); }
/* ===== Campos com contorno de 48 (sistema de design): o MudBlazor 9 não tem padrão global de Variant, então o campo de
   sublinhado (Variant.Text) vira caixa com borda #7F8EA3, raio 12 e 48 de altura; o rótulo flutua para cima da caixa. ===== */
.mud-input.mud-input-text.mud-input-underline { border: 1px solid var(--t7-contorno); border-radius: 12px; background: #fff;
  padding: 0 12px; min-height: 48px; align-items: center; margin-bottom: 0; transition: border-color var(--t7-transicao), box-shadow var(--t7-transicao); }
.mud-input.mud-input-text.mud-input-underline:not(.mud-input-text-with-label) { margin-top: 0; }
.mud-input.mud-input-text.mud-input-underline.mud-input-text-with-label { margin-top: 20px; }
.mud-input.mud-input-text.mud-input-underline:before, .mud-input.mud-input-text.mud-input-underline:after { display: none !important; }
.mud-input.mud-input-text.mud-input-underline:hover:not(.mud-disabled) { border-color: var(--t7-texto-2-tinto); }
.mud-input.mud-input-text.mud-input-underline:focus-within { border-color: var(--t7-primaria-escura); box-shadow: 0 0 0 1px var(--t7-primaria-escura); }
.mud-input.mud-input-text.mud-input-underline.mud-input-error { border-color: var(--t7-perigo); }
.mud-input.mud-input-text.mud-input-underline > input.mud-input-root-text, .mud-input.mud-input-text.mud-input-underline > .mud-input-slot, .mud-input.mud-input-text.mud-input-underline > textarea.mud-input-root-text { padding-top: 0; padding-bottom: 0; min-height: 46px; line-height: 46px; }
.mud-input.mud-input-text.mud-input-underline > textarea.mud-input-root-text { line-height: 1.5; padding-top: 12px; padding-bottom: 12px; }
.mud-input.mud-input-text.mud-input-underline .mud-input-adornment-end, .mud-input.mud-input-text.mud-input-underline .mud-select-input ~ .mud-input-adornment-end { right: 8px; }
/* Rótulo: dentro da caixa enquanto vazio; acima da caixa (sem fundo) quando encolhido. */
.mud-input-control-input-container:has(> .mud-input-text.mud-input-underline) > label.mud-input-label-inputcontrol { transform: translate(12px, 32px) scale(1); max-width: calc(100% - 24px); }
.mud-input-control-input-container:has(> .mud-input-text.mud-input-underline) > .mud-shrink ~ label.mud-input-label-inputcontrol,
.mud-input-control-input-container:has(> .mud-input-text.mud-input-underline) > .mud-input:focus-within ~ label.mud-input-label-inputcontrol { transform: translate(0, 0) scale(0.8125); color: var(--t7-texto-2-tinto); }
.mud-input-control-input-container:has(> .mud-input-text.mud-input-underline) > .mud-input-helper-text { margin-left: 12px; }
/* Dentro da tabela e da barra superior os campos continuam compactos (busca de 44). */
.mud-table-toolbar .mud-input.mud-input-text.mud-input-underline, .mud-appbar .mud-input.mud-input-text.mud-input-underline { min-height: 44px; }
/* Data completa sempre visível: célula de grade com seletor de data nunca fica abaixo de 200 px (adornos de limpar + calendário). */
.mud-grid > .mud-grid-item:has(> .mud-picker) { flex: 0 0 auto; min-width: 200px; max-width: none; }
.mud-picker .mud-input-adornment .mud-icon-button, .mud-picker .mud-input-adornment-end .mud-icon-button { width: 32px; height: 32px; }
/* Campo focado: só a borda primária com 1 px extra (o anel de 4 px é para botão, chip e link). */
.mud-input-slot:focus-visible { outline: none; }
/* Célula de grade com campo nunca encolhe a ponto de cortar o rótulo (ex.: "Estado" em sm=1). */
.mud-grid > .mud-grid-item:has(> .mud-input-control), .mud-grid > .mud-grid-item:has(> .mud-select), .mud-grid > .mud-grid-item:has(> .mud-autocomplete) { min-width: 128px; }
/* Abas: sem caixa alta, sem largura mínima de 160 px (rótulo inteiro cabe; "Por ponto de venda" e "Trajetória" não cortam). */
.mud-tabs .mud-tab { text-transform: none; min-width: 0; padding: 0 14px; letter-spacing: 0; font-weight: 600; font-size: 1rem; }
.mud-tabs .mud-tab.mud-tab-active { color: var(--t7-primaria-escura); }
/* Grupo segmentado (Hoje/Ontem/Semana, 4/8/13 semanas): 48 de altura, padding compacto, nunca estoura a célula. */
.mud-button-group .mud-button-root.mud-button { padding-left: 12px; padding-right: 12px; min-height: 44px; }
.mud-button-group { max-width: 100%; }
/* Conteúdo principal nunca rola na horizontal por causa de um bloco largo; o bloco largo rola sozinho (.tabela-larga). */
.mud-main-content { overflow-x: clip; }

/* Dica de campo: o texto de ajuda vira um "?" de 20 px no canto superior direito do campo (o texto fica na dica nativa). Mensagem
   de erro de validação continua em texto vermelho abaixo do campo. */
.mud-input-control { position: relative; }

/* Nada cortado: linha de controles sempre quebra; célula de grade com campo de seleção tem largura para o rótulo inteiro. */
.mud-grid > .mud-grid-item.d-flex { flex-wrap: wrap; }
.mud-grid > .mud-grid-item:has(> .mud-select), .mud-grid > .mud-grid-item:has(> .mud-autocomplete) { min-width: 200px; }
/* Grupo de alternância (visões "Visão geral / Por promotor / Por ponto de venda…"): item com a largura do próprio texto, nunca
   cortado; o grupo quebra de linha quando não cabe. */
.mud-toggle-group { flex-wrap: wrap; height: auto; }
.mud-toggle-group .mud-toggle-item { flex: 0 1 auto; white-space: nowrap; min-width: max-content; padding-left: 14px; padding-right: 14px; min-height: 44px; }
/* Cartões lado a lado na mesma linha da grade têm a mesma altura: a célula vira coluna flexível e o cartão estica. */
.mud-grid > .mud-grid-item { display: flex; flex-direction: column; }
.mud-grid > .mud-grid-item > .mud-paper, .mud-grid > .mud-grid-item > .mud-card, .mud-grid > .mud-grid-item > .t7-kpi, .mud-grid > .mud-grid-item > .mud-link > .t7-kpi { flex: 1 1 auto; }
.mud-grid > .mud-grid-item > .mud-link { display: flex; flex: 1 1 auto; }
/* Diálogo longo rola por dentro: nada de campo escondido abaixo da borda. */
.mud-dialog { max-height: calc(100vh - 32px); display: flex; flex-direction: column; }
.mud-dialog .mud-dialog-content { overflow-y: auto; flex: 1 1 auto; }

/* Envio de arquivo: botão traduzido no padrão (o input nativo fica invisível, mas acessível). */
.t7-arquivo { display: inline-flex; align-items: center; cursor: pointer; }
.t7-arquivo .t7-arquivo-botao { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 20px; border-radius: 12px; border: 1.5px solid var(--t7-primaria-escura);
  color: var(--t7-primaria-escura); font-weight: 600; font-size: 1rem; }
.t7-arquivo:hover .t7-arquivo-botao { background: var(--t7-primaria-clara); }
.t7-arquivo .t7-arquivo-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }



/* ===== Revisão do catálogo de telas (03/10/2026) — causas-raiz dos prints desconformes ===== */
/* 1. Rótulo em repouso (campo vazio) nunca encosta na seta nem corta: quebra em até 2 linhas e fica centralizado na caixa;
      com "?" de dica, reserva mais espaço. Vale para seletor, autocompletar e campo de texto com contorno. */
.mud-input-control-input-container > .mud-input.mud-input-outlined:not(.mud-shrink):not(:focus-within) ~ label.mud-input-label-outlined {
  top: 50%; transform: translate(14px, -50%) scale(1); max-width: calc(100% - 56px); white-space: normal; line-height: 1.15; overflow: visible; text-overflow: clip; }
.mud-input-control-input-container > .mud-input.mud-input-text.mud-input-underline:not(.mud-shrink):not(:focus-within) ~ label.mud-input-label-inputcontrol { max-width: calc(100% - 56px); white-space: normal; line-height: 1.15; top: 50%; transform: translate(12px, calc(-50% + 10px)) scale(1); }
/* 2. Célula de grade com seletor tem largura para o rótulo mais comum ("Importância do ponto de venda") sem apertar. */
.mud-grid > .mud-grid-item:has(> .mud-select), .mud-grid > .mud-grid-item:has(> .mud-autocomplete), .mud-grid > .mud-grid-item:has(> .mud-input-control) { min-width: 150px; }
/* 3. Barra de filtros: UMA linha que quebra, campos de 220–320, botões com a própria largura, Filtrar no fim à direita. */
.t7-barra-filtros .mud-grid { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin: 0; width: 100%; }
.t7-barra-filtros .mud-grid > .mud-grid-item { flex: 1 1 220px; min-width: 150px; max-width: 320px; padding: 0 !important; display: block; }
.t7-barra-filtros .mud-grid > .mud-grid-item:not(.d-flex):not(.t7-acao):not(:has(> .mud-select, > .mud-input-control, > .mud-autocomplete, > .mud-picker, > .mud-button-root, > .mud-button-group-root, > .mud-toggle-group)), .t7-barra-filtros .mud-grid > .mud-grid-item.t7-barra-extra { flex: 1 1 100%; max-width: none; min-width: 0; }
.t7-barra-filtros .mud-grid > .mud-grid-item:has(> .mud-button-root), .t7-barra-filtros .mud-grid > .mud-grid-item.t7-acao { flex: 0 0 auto; min-width: 0; max-width: none; align-self: flex-end; }
.t7-barra-filtros .mud-grid > .mud-grid-item.t7-acao-filtrar { margin-left: auto; }
.t7-barra-filtros .mud-grid > .mud-grid-item.t7-acao-filtrar .mud-button-root.mud-button { min-width: 112px; }
.t7-barra-filtros .mud-grid > .mud-grid-item:has(> .mud-button-group), .t7-barra-filtros .mud-grid > .mud-grid-item:has(> .mud-toggle-group) { flex: 0 0 auto; min-width: 0; max-width: none; }
/* 4. Tabela densa: 12 px nas laterais da célula, cabeçalho quebra em palavras inteiras; nunca corta uma coluna na borda. */
.mud-table-container .mud-table-cell { padding-left: 12px; padding-right: 12px; }
.mud-table-container thead .mud-table-cell { white-space: normal; line-height: 1.2; }
.mud-table-container { overflow-x: auto; }
/* 5. Cartão de KPI nunca fica com uma palavra por linha: a célula tem no mínimo 200 px e a grade quebra em mais linhas. */
.mud-grid > .mud-grid-item:has(> .t7-kpi), .mud-grid > .mud-grid-item:has(> .mud-link > .t7-kpi), .mud-grid > .mud-grid-item:has(> .mud-paper[data-card]), .mud-grid > .mud-grid-item:has(> .mud-paper[data-sinal]), .mud-grid > .mud-grid-item:has(> .mud-link > .mud-paper[data-sinal]) { min-width: 150px; }
.t7-kpi-valor.texto { font-size: 20px; line-height: 1.2; overflow-wrap: anywhere; }
.t7-kpi-valor { overflow-wrap: anywhere; }
/* 6. Grupo de botões (Visão geral / Por promotor / Por ponto de venda…): cada botão com a própria largura; o grupo quebra de linha. */
.mud-button-group-root { flex-wrap: wrap; height: auto; max-width: 100%; }
.mud-button-group-root .mud-button-root.mud-button { flex: 0 0 auto; min-width: max-content; }
/* 7. Célula de grade cujo único filho é um botão tem a largura do botão (nunca "Atualizar" cortado). */
.mud-grid > .mud-grid-item:has(> .mud-button-root:only-child) { flex: 0 0 auto; min-width: max-content; max-width: 100%; }
/* 8. Texto em "overline" (rótulo pequeno acima de número): sem caixa alta, sem espaçamento de letra. */
.mud-typography-overline, .mud-typography.mud-typography-overline { text-transform: none; letter-spacing: 0; font-size: 13px; }
/* 9. Botão desabilitado legível: texto cinza-escuro sobre fundo claro (não branco sobre azul claro). */
.mud-button-root.mud-button-filled:disabled, .mud-button-root.mud-button-filled.mud-disabled { background: #E3E8EF !important; color: #37474F !important; box-shadow: none; }
.mud-button-root.mud-button-outlined:disabled, .mud-button-root.mud-button-text:disabled { color: #5B6B82 !important; border-color: #B8C2D0 !important; }
/* 10. Botão de texto pequeno dentro de frase (links "Abrir acordos ›") no mesmo tamanho do texto ao redor. */
.mud-typography .mud-link, .mud-typography .mud-button-root.mud-button-text.mud-button-root-size-small { font-size: inherit; }
/* 11. Célula de grade marcada como linha (d-flex) continua linha: botões lado a lado, nunca em escada. */
.mud-grid > .mud-grid-item.d-flex:not(.flex-column) { flex-direction: row; align-items: center; gap: 8px; }
.t7-barra-filtros .mud-grid > .mud-grid-item.d-flex { flex: 1 1 auto; max-width: none; min-width: 0; justify-content: flex-end; margin-left: auto; }
/* 12. Grupo de alternância é linha que quebra (o MudBlazor usa grade de colunas iguais, que corta o rótulo longo). */
.mud-toggle-group.mud-toggle-group-horizontal { display: flex; flex-wrap: wrap; grid-template-columns: none !important; }
.mud-toggle-group.mud-toggle-group-horizontal > .mud-toggle-item { flex: 0 0 auto; }
/* 13. Botão laranja (ação de atenção): fundo claro com texto escuro — AA; nunca branco sobre laranja claro. */
.mud-button-root.mud-button-filled.mud-button-filled-secondary { background: var(--t7-atencao-clara) !important; color: var(--t7-atencao-texto) !important; }
.mud-button-root.mud-button-filled.mud-button-filled-secondary:hover { background: #FFD9B3 !important; }
/* 14. Rótulo encolhido (acima da caixa) usa a largura inteira do campo — nunca reticências. */
.mud-input-control-input-container:has(> .mud-input-text.mud-input-underline) > .mud-shrink ~ label.mud-input-label-inputcontrol,
.mud-input-control-input-container:has(> .mud-input-text.mud-input-underline) > .mud-input:focus-within ~ label.mud-input-label-inputcontrol { max-width: calc((100% - 4px) / 0.8125); white-space: nowrap; }
.mud-input-control-input-container > .mud-shrink ~ label.mud-input-label-outlined, .mud-input-control-input-container > .mud-input-outlined:focus-within ~ label.mud-input-label-outlined { max-width: calc((100% - 24px) / 0.75); }
/* 15. Dentro da célula de grade em coluna, chip, botão, interruptor e caixa de marcar ficam com a própria largura (nunca esticados). */
.mud-grid > .mud-grid-item > .mud-chip, .mud-grid > .mud-grid-item > .mud-button-root, .mud-grid > .mud-grid-item > .mud-switch, .mud-grid > .mud-grid-item > .mud-checkbox, .mud-grid > .mud-grid-item > .mud-chipset { align-self: flex-start; }

/* 17. Tabela analítica larga (8 colunas ou mais): célula compacta de 8 px para caber em 1280 sem rolar. */
.mud-table-container:has(th:nth-child(8)) .mud-table-cell, .mud-grid-item:not(.mud-grid-item-xs-12:not([class*="md-"])) .mud-table-container:has(th:nth-child(5)) .mud-table-cell { padding-left: 8px; padding-right: 8px; font-size: 13px; }
.mud-table-container:has(th:nth-child(8)) .mud-table-cell .mud-chip { margin: 2px 2px 2px 0; }

/* 19. Texto de aviso/atenção em tom escuro (AA), nunca laranja claro sobre fundo claro. */
.mud-warning-text, .mud-typography.mud-warning-text { color: var(--t7-aviso-texto) !important; }
.mud-secondary-text, .mud-typography.mud-secondary-text { color: var(--t7-atencao-texto) !important; }
.mud-alert.mud-alert-text-warning .mud-alert-message, .mud-alert.mud-alert-outlined-warning .mud-alert-message { color: var(--t7-aviso-texto); }
/* 20. Coluna de ações quebra em linhas quando não cabe (botão nunca passa da borda); botões com respiro entre si. */
.mud-table-container .mud-table-cell:last-child { white-space: normal; }
.mud-table-container .mud-table-cell:last-child .mud-button-root.mud-button { margin: 2px 4px 2px 0; }
/* 21. Valor de cartão em texto (estado) nunca em 32 px: cabe em duas linhas de 20 px. */
.mud-paper[data-sinal] .mud-typography-h5, .mud-paper[data-card] .mud-typography-h5, .mud-paper[data-sinal] .mud-typography-h4, .mud-paper[data-card] .mud-typography-h4 { overflow-wrap: normal; flex-shrink: 0; }
.mud-paper[data-sinal] .d-flex, .mud-paper[data-card] .d-flex { flex-wrap: wrap; }
/* 22. Grade dentro do conteúdo não estoura o cartão pela margem negativa do MudGrid (era isso que deslocava a página ao focar um campo). */
.mud-main-content .mud-grid { width: 100%; margin-left: 0; margin-right: 0; }
/* 23. Botão de contorno laranja (ação de atenção) com texto escuro legível. */
.mud-button-root.mud-button-outlined.mud-button-outlined-secondary, .mud-button-root.mud-button-text.mud-button-text-secondary { color: var(--t7-atencao-texto) !important; border-color: var(--t7-atencao) !important; }

/* 25. Valor de cartão nunca quebra ("92,59 %" numa linha só); célula de ações com só ícones fica numa linha. */
.mud-paper[data-sinal] .mud-typography-h5, .mud-paper[data-card] .mud-typography-h5, .mud-paper[data-sinal] .mud-typography-h4, .mud-paper[data-card] .mud-typography-h4, .t7-kpi-valor:not(.texto) { white-space: nowrap; }
.mud-table-container .mud-table-cell:last-child:has(.mud-icon-button):not(:has(.mud-button-root.mud-button)) { white-space: nowrap; min-width: max-content; }
/* 26. Campo de várias linhas: rótulo em repouso fica no topo da caixa, não no meio. */
.mud-input-control-input-container > .mud-input.mud-input-text.mud-input-underline:has(> textarea):not(.mud-shrink):not(:focus-within) ~ label.mud-input-label-inputcontrol { top: 0; transform: translate(12px, 32px) scale(1); }
/* 27. Grade de cartões de KPI: 5 cartões numa linha, 6 em duas de 3 (nunca órfão). */
.t7-kpis:has(> :nth-child(5):last-child) { grid-template-columns: repeat(5, 1fr); }
.t7-kpis:has(> :nth-child(6):last-child) { grid-template-columns: repeat(3, 1fr); }
.t7-kpis:has(> :nth-child(8):last-child) { grid-template-columns: repeat(4, 1fr); }
/* 7 cartões: 4 + 3 com a segunda linha ocupando a largura toda, sem buraco (retorno do design 12/10/2026, K2). */
.t7-kpis:has(> :nth-child(7):last-child) { grid-template-columns: repeat(12, 1fr); }
.t7-kpis:has(> :nth-child(7):last-child) > * { grid-column: span 3; }
.t7-kpis:has(> :nth-child(7):last-child) > :nth-child(n+5) { grid-column: span 4; }
/* 28. Cartão dentro de link na célula da grade estica como os vizinhos (mesma altura, mesma largura). */
.mud-grid > .mud-grid-item > .mud-link > .mud-paper { flex: 1 1 auto; width: 100%; }
/* 29. Link que envolve um cartão na célula da grade é sempre flex (o utilitário d-block do MudBlazor não pode vencer). */
.mud-grid > .mud-grid-item > .mud-link { display: flex !important; flex-direction: column; }
/* 30. Abas numa linha só (retorno do design 12/10/2026, L1: quebrar em duas linhas confunde a ordem); quando não cabem, a barra rola. */
.mud-tabs .mud-tabs-tabbar-wrapper { flex-wrap: nowrap; transform: none !important; }
.mud-tabs .mud-tabs-tabbar-inner, .mud-tabs .mud-tabs-tabbar-content { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.mud-tabs .mud-tabs-scroll-button { display: none !important; }
/* 31. Cabeçalho de tabela estreita pode hifenizar uma palavra longa em vez de cortar a coluna. */
.mud-grid-item .mud-table-container thead .mud-table-cell, .mud-grid-item .mud-simple-table thead th { hyphens: manual; word-break: normal; }
/* 32. Chip de contexto (competência, atualizado há…) tem a largura do próprio texto, nunca a da célula. */
.mud-grid-item > .mud-chip, .mud-grid-item > div > .mud-chip:only-child, .mud-stack > .mud-chip { align-self: flex-start; flex: 0 0 auto; }
.mud-chip { max-width: max-content; }
/* 33. Célula de tabela: linha de ações quebra; botão de texto compacto; cabeçalho pode hifenizar palavra longa. */
.mud-table-cell .mud-stack, .mud-table-cell .d-flex { flex-wrap: wrap; }
.mud-table-cell .mud-button-root.mud-button-text { min-height: 36px; padding-left: 8px; padding-right: 8px; font-size: 13px; }
.mud-table-container thead .mud-table-cell { hyphens: manual; word-break: normal; overflow-wrap: normal; }
/* 34. Tabela dentro de cartão estreito (meia ou um terço da largura) e tabela com 10+ colunas: 12 px e 6 px de respiro. */
.mud-grid > .mud-grid-item > .mud-paper, .mud-grid > .mud-grid-item > .mud-link > .mud-paper { container-type: inline-size; }
@container (max-width: 640px) {
  .mud-table-container .mud-table-cell, .mud-simple-table td, .mud-simple-table th { font-size: 13px; padding-left: 6px; padding-right: 6px; }
  .mud-table-cell .mud-button-root.mud-button-text { font-size: 13px; min-height: 32px; padding-left: 6px; padding-right: 6px; }
  .mud-table-cell .mud-chip { font-size: 13px; height: 26px; }
}
.mud-table-container:has(th:nth-child(10)) .mud-table-cell { font-size: 13px; padding-left: 6px; padding-right: 6px; }
/* 35. Valor de cartão em texto longo quebra normalmente (classe texto); só número fica numa linha. */
.mud-paper[data-sinal] .mud-typography-h5.texto, .mud-paper[data-card] .mud-typography-h5.texto, .mud-paper[data-sinal] .mud-typography-h4.texto, .mud-paper[data-card] .mud-typography-h4.texto { white-space: normal; font-size: 1.25rem; }
/* 36. Botão de texto dentro de célula pode quebrar o rótulo em 2 linhas (nunca alarga a tabela). */
.mud-table-cell .mud-button-root.mud-button-text { white-space: normal; text-align: left; line-height: 1.2; }
/* 37. Tabela compacta (fila da Central): 12 px, chips de 24. */
.t7-tabela-compacta .mud-table-cell { font-size: 13px; padding-left: 6px; padding-right: 6px; }
.t7-tabela-compacta .mud-table-cell .mud-chip { font-size: 13px; height: 24px; margin: 2px 2px 2px 0; }
/* 38. Campo dentro de cartão em coluna não cresce para preencher o vão (o vão fica no fim, acima do rodapé do cartão). */
.mud-paper.d-flex.flex-column > .mud-input-control, .mud-paper.d-flex.flex-column > .mud-select, .radar-card > .mud-input-control { flex-grow: 0; }
/* 39. Cartão de meia largura (ou menor) com tabela de 6+ colunas vira largura total: nada abaixo de 12 px e nenhuma tabela rolando
   (Planograma, Ponto Extra, Prazo/Vencimento tinham tabelas de 6–7 colunas em 436 px). */
@media (min-width: 960px) {
  .mud-grid > .mud-grid-item.mud-grid-item-md-6:has(.mud-table-container th:nth-child(6)), .mud-grid > .mud-grid-item.mud-grid-item-md-6:has(.mud-simple-table th:nth-child(6)),
  .mud-grid > .mud-grid-item.mud-grid-item-md-4:has(.mud-table-container th:nth-child(5)), .mud-grid > .mud-grid-item.mud-grid-item-md-4:has(.mud-simple-table th:nth-child(5)),
  .mud-grid > .mud-grid-item.mud-grid-item-lg-6:has(.mud-table-container th:nth-child(6)), .mud-grid > .mud-grid-item.mud-grid-item-lg-6:has(.mud-simple-table th:nth-child(6)),
  .mud-grid > .mud-grid-item.mud-grid-item-md-7:has(.mud-table-container th:nth-child(6)), .mud-grid > .mud-grid-item.mud-grid-item-md-8:has(.mud-table-container th:nth-child(7)),
  .mud-grid > .mud-grid-item.mud-grid-item-md-6:has(.mud-simple-table td .mud-button-text), .mud-grid > .mud-grid-item.mud-grid-item-md-6:has(.mud-simple-table tr > td:nth-child(5)) { flex-basis: 100%; max-width: 100%; }
}
@container (max-width: 640px) {
  .mud-table-container:has(th:nth-child(6)) .mud-table-cell .mud-icon-button { width: 32px; height: 32px; }
}
/* 40. Cartão com número grande (R$ 17.500,00) tem célula de pelo menos 200 px: valor nunca quebra em duas linhas. */
.mud-grid > .mud-grid-item:has(> .mud-paper > .mud-typography-h5), .mud-grid > .mud-grid-item:has(> .mud-paper > .mud-typography-h4), .mud-grid > .mud-grid-item:has(> .mud-paper > div > .mud-typography-h5) { min-width: 200px; }

/* 26. Revisão do catálogo (rodada 6, 03/10/2026): campo numérico sem setas de incremento (o app não tem; a tela digita); chip nunca
   abaixo de 13 px; cartões lado a lado na mesma grade têm a mesma altura; abas e seletor segmentado com respiro ao quebrar linha. */
.mud-input-numeric-spin { display: none !important; }
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.mud-chip.mud-chip-size-small, .mud-chip.mud-chip-size-small .mud-chip-content { font-size: 13px; }
.mud-grid > .mud-grid-item > .mud-paper:only-child { height: 100%; box-sizing: border-box; }
.mud-tabs .mud-tabs-tabbar-wrapper { row-gap: 4px; }
.mud-toggle-group { margin: 4px 0; }
.mud-toggle-group .mud-toggle-item { padding-left: 16px; padding-right: 16px; }
/* 27. Célula de ações da tabela: botões de ícone compactos e numa linha só (Usuários tinha 5 ações e o último ícone saía do cartão). */
.mud-table-cell .mud-icon-button { padding: 6px; width: 36px; height: 36px; }
.mud-table-cell .mud-icon-button.mud-icon-button-size-small { padding: 4px; width: 32px; height: 32px; }
.mud-table-cell:last-child:has(> .mud-icon-button, > .mud-stack > .mud-icon-button, > .d-flex > .mud-icon-button) { white-space: nowrap; }
.mud-table-cell:last-child:has(> .mud-icon-button) .mud-icon-button + .mud-icon-button { margin-left: 2px; }
/* 28. Tabela de 12+ colunas: 4 px de respiro lateral (13 colunas × 24 px de respiro passavam 46 px da largura do cartão). */
.mud-table-container:has(th:nth-child(12)) .mud-table-cell { padding-left: 2px; padding-right: 2px; }
/* 29. Chip dentro de tabela compacta quebra o texto em vez de alargar a coluna (fila da Central). */
.t7-tabela-compacta .mud-table-cell .mud-chip { height: auto; min-height: 24px; white-space: normal; max-width: 100%; }
.t7-tabela-compacta .mud-table-cell .mud-chip .mud-chip-content { white-space: normal; line-height: 1.2; padding-top: 3px; padding-bottom: 3px; }
/* 30. Botão de contorno/texto amarelo (aviso) com texto escuro legível, como o laranja da regra 23. */
.mud-button-root.mud-button-outlined.mud-button-outlined-warning, .mud-button-root.mud-button-text.mud-button-text-warning { color: var(--t7-aviso-texto) !important; border-color: var(--t7-aviso) !important; }
/* 31. Dois ou mais botões de texto na mesma célula: um por linha, compactos, no máximo 220 px (nunca quebra aleatória nem coluna de 300 px). */
.mud-table-cell > .mud-button-root.mud-button-text:not(:only-child) { display: block; width: fit-content; max-width: 220px; margin: 0 0 2px 0; padding: 2px 8px; min-height: 28px; }
.mud-table-cell > .mud-button-root.mud-button-text:not(:only-child) .mud-button-label { white-space: normal; }

/* 34. Rodada 7: botões do rodapé do diálogo com respiro da borda; aba nunca encolhe nem corta o texto; interruptor na barra de filtros
   com espaço antes do botão; cartão de indicador cabe 5 por linha (mínimo 130 px; data 172 px). */
.mud-dialog .mud-dialog-actions { padding: 8px 24px 20px; gap: 8px; }
.mud-tabs .mud-tab { flex: 0 0 auto; max-width: none; white-space: nowrap; }
.t7-barra-filtros .mud-switch, .t7-barra-filtros .mud-checkbox { margin-right: 16px; }
/* 35. Seis cartões de indicador em sm-2 cabem numa linha (mínimo 150 px); cartão de meia largura com tabela de 5 colunas e tendência quebra a tendência em 2 linhas. */
.mud-grid > .mud-grid-item.mud-grid-item-sm-2:has(> .mud-paper) { min-width: 150px; }


/* 41. Rótulo de cartão de indicador ocupa 2 linhas sempre: números alinhados entre vizinhos. */
.t7-kpi .t7-kpi-rotulo { min-height: 2.4em; }

.mud-table-cell > .mud-button-root.mud-button-text:only-child { white-space: nowrap; }
/* 43. Linha de cartões de indicador: ver "Grade de cartões de indicador sem buraco" no fim do arquivo (K2). */

/* 44. Rodada 9 — grupo de alternância com folga lateral de verdade (o MudBlazor fixa 5 px com especificidade maior); chip nunca quebra
   no meio do texto (quem quebra de linha é o conjunto de chips); barra de filtros com campo largo o bastante para o rótulo inteiro;
   cartão de família órfão na Consolidação ocupa a linha inteira; cabeçalho de tabela compacta nunca separa "e" sozinho;
   coluna de ação de tabela simples só com a largura do botão; passos inativos do assistente legíveis. */
.mud-toggle-group .mud-toggle-item, .mud-toggle-group .mud-toggle-item.mud-toggle-item-size-medium { padding: 5px 16px !important; }
.mud-chip .mud-chip-content, .t7-tabela-compacta .mud-table-cell .mud-chip .mud-chip-content { white-space: nowrap; }
.t7-tabela-compacta .mud-table-cell .mud-chip { white-space: nowrap; max-width: none; }
.mud-table-cell:has(> .mud-chip + .mud-chip), .mud-table-cell > .d-flex:has(> .mud-chip) { flex-wrap: wrap; gap: 4px; }
.t7-barra-filtros .mud-grid > .mud-grid-item { flex-basis: 250px; }
@media (min-width: 960px) { .mud-grid > .mud-grid-item:has(> .mud-paper[data-familia]):nth-child(3n+1):last-child { flex-basis: 100%; max-width: 100%; } }
.t7-tabela-compacta th, .mud-simple-table th { min-width: 88px; }
.t7-tabela-acao-fim th:last-child, .t7-tabela-acao-fim td:last-child { width: 1%; white-space: nowrap; }
.mud-stepper-nav .mud-step-label-content-title { font-size: 14px; }
.mud-table-cell .t7-acoes-icone { display: inline-flex; gap: 2px; white-space: nowrap; }
/* 45. Abas quebram de linha de verdade: o MudBlazor fixa width:max-content no wrapper e overflow:hidden + nowrap no content. */
.mud-tabs .mud-tabs-tabbar-wrapper { width: 100% !important; display: flex; flex-wrap: wrap; }
.mud-tabs .mud-tabs-tabbar-content { white-space: normal; overflow: visible; }
.mud-tabs .mud-tabs-tabbar, .mud-tabs .mud-tabs-tabbar-inner { height: auto; min-height: 48px; }
/* 46. Abas em duas linhas: o traço deslizante do MudBlazor fica sempre na base da barra (sob a aba errada); o realce vai na própria aba. */
.mud-tabs .mud-tab-slider { display: none; }
.mud-tabs .mud-tab.mud-tab-active { box-shadow: inset 0 -2px 0 var(--t7-primaria); }
/* 47. Tabela densa de muitas colunas (Comparativo de prestadores): 12 px, célula estreita, sem largura mínima por coluna — cabe sem rolar. */
.t7-tabela-densa th, .t7-tabela-densa td, .t7-tabela-densa .mud-table-cell { padding: 6px 6px !important; font-size: 13px; min-width: 0; line-height: 1.25; }
.t7-barra-filtros .mud-grid > .mud-grid-item:has(> .mud-select) { flex-basis: 300px; max-width: 380px; }
/* 48. Cartão de sinal estreito: valor com espaço ("-5,22 pontos") quebra no espaço, nunca passa da borda; botão dentro do cartão quebra o texto. */
.mud-paper[data-sinal] .mud-typography-h5, .mud-paper[data-sinal] .mud-typography-h4, .mud-paper[data-card] .mud-typography-h5, .mud-paper[data-card] .mud-typography-h4 { white-space: normal; overflow-wrap: normal; line-height: 1.15; }
.mud-paper[data-sinal] .mud-button-root.mud-button, .mud-paper[data-card] .mud-button-root.mud-button { max-width: 100%; white-space: normal; height: auto; line-height: 1.25; text-align: left; }
.mud-stepper-nav .mud-step-label-content-title { color: var(--t7-texto-2-tinto); }
.mud-stepper-nav .mud-step-label-content-title.mud-step-label-content-title-active, .mud-stepper-nav .mud-step-button-active .mud-step-label-content-title { color: var(--t7-primaria-escura); }
/* 49. (revogada 04/10: colunas fixas quebravam cabeçalho por sílaba; o Comparativo de prestadores foi transposto.) */
/* 50. Grade de cartões de valor (Torre da Unidade › Contrato): cartões dividem a linha; o último nunca fica sozinho. */
.t7-cartoes-fluidos > .mud-grid-item { flex: 1 1 150px !important; max-width: none !important; min-width: 150px !important; }
/* 51. Visão Executiva: grupo com um único cartão de domínio ocupa a linha inteira; com número ímpar, o último também. */
@media (min-width: 960px) { .mud-grid > .mud-grid-item:has(> .radar-card):only-child, .mud-grid > .mud-grid-item:has(> .radar-card):nth-child(odd):last-child { flex-basis: 100%; max-width: 100%; } }
/* 52. Grade só de cartões de sinal (Ruptura, Ponto Extra, Planograma, Materiais…): colunas iguais de no mínimo 170 px — cinco por linha,
   o sexto desce com a MESMA largura; nunca um cartão largo ao lado de um estreito. Grade mista (cartão + gráfico) segue as regras de flex. */
.mud-grid:has(> .mud-grid-item > .mud-paper[data-sinal], > .mud-grid-item > .mud-link > .mud-paper[data-sinal]):not(:has(> .mud-grid-item:not(:has(> .mud-paper[data-sinal], > .mud-link > .mud-paper[data-sinal])))) { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 0; width: 100%; }
.mud-grid:has(> .mud-grid-item > .mud-paper[data-sinal], > .mud-grid-item > .mud-link > .mud-paper[data-sinal]):not(:has(> .mud-grid-item:not(:has(> .mud-paper[data-sinal], > .mud-link > .mud-paper[data-sinal])))) > .mud-grid-item { padding: 0; max-width: none; min-width: 0; flex: none; width: auto; }
/* 53. Tabela por dimensão (Regional, Rede…): cabeçalho com respiro e sem colar no vizinho. */
.tabela-larga th, .tabela-larga .mud-table-cell { padding-left: 12px; padding-right: 12px; }
.tabela-larga thead th { white-space: normal; line-height: 1.2; }
/* 54. Cartão de indicador (dono, 04/10/2026): número em destaque na cor do significado, rótulo e UMA linha de apoio. O resto da explicação
   fica recolhido (aparece ao passar o mouse ou focar o cartão) e o "Entenda este resultado" da tela traz os tópicos. */
.mud-paper[data-sinal] .mud-typography-h5:not(.texto), .mud-paper[data-card] .mud-typography-h5:not(.texto), .mud-paper[data-sinal] .mud-typography-h4:not(.texto), .mud-paper[data-card] .mud-typography-h4:not(.texto) {
  font-family: 'Exo 2', 'Open Sans', sans-serif; font-weight: 700; font-size: 1.75rem; line-height: 1.15; color: var(--t7-navy); font-variant-numeric: tabular-nums; margin: 2px 0; }
.mud-paper[data-sinal][style*="#2E7D32"] .mud-typography-h5, .mud-paper[data-sinal][style*="palette-success"] .mud-typography-h5, .mud-paper[data-card][style*="#2E7D32"] .mud-typography-h5 { color: var(--t7-sucesso-texto); }
.mud-paper[data-sinal][style*="#C62828"] .mud-typography-h5, .mud-paper[data-sinal][style*="palette-error"] .mud-typography-h5, .mud-paper[data-sinal][style*="t7-perigo"] .mud-typography-h5, .mud-paper[data-card][style*="palette-error"] .mud-typography-h5 { color: var(--t7-perigo-texto); }
.mud-paper[data-sinal][style*="#F4AC57"] .mud-typography-h5, .mud-paper[data-sinal][style*="palette-warning"] .mud-typography-h5, .mud-paper[data-sinal][style*="t7-aviso"] .mud-typography-h5, .mud-paper[data-sinal][style*="t7-atencao"] .mud-typography-h5, .mud-paper[data-card][style*="palette-warning"] .mud-typography-h5 { color: var(--t7-aviso-texto); }
.mud-paper[data-sinal] .mud-typography-caption.d-block ~ .mud-typography-caption.d-block,
.mud-paper[data-card] .mud-typography-caption.d-block ~ .mud-typography-caption.d-block,
.mud-paper[data-sinal] .mud-typography-caption.d-block ~ .mud-tooltip-root,
.mud-paper[data-card] .mud-typography-caption.d-block ~ .mud-tooltip-root { display: none; }
.mud-paper[data-sinal]:hover .mud-typography-caption.d-block, .mud-paper[data-sinal]:focus-within .mud-typography-caption.d-block,
.mud-paper[data-card]:hover .mud-typography-caption.d-block, .mud-paper[data-card]:focus-within .mud-typography-caption.d-block,
.mud-paper[data-sinal]:hover .mud-tooltip-root, .mud-paper[data-sinal]:focus-within .mud-tooltip-root { display: block; }
.t7-sem-dado { display: flex; align-items: center; gap: 6px; min-height: 2rem; margin: 2px 0; font-size: 14px; line-height: 1.3; color: var(--t7-texto-2-tinto); }
.t7-sem-dado .mud-icon-root { flex: 0 0 auto; color: var(--t7-texto-2-tinto); }
.t7-sem-dado-motivo { font-weight: 400; }
/* 55. Altura segue o conteúdo, não o vizinho (dono, 04/10/2026), fora os cartões de indicador (que ficam iguais na linha). */
.mud-grid > .mud-grid-item > .mud-paper.h-100:not([data-sinal]):not([data-card]):not(.t7-kpi):not(.radar-card) { height: auto !important; }
.mud-grid > .mud-grid-item:has(> .mud-paper.h-100:not([data-sinal]):not([data-card]):not(.t7-kpi):not(.radar-card)) { align-self: flex-start; }
/* 56. Cartão de conteúdo sem dado vira uma linha compacta e o vizinho ocupa a largura toda. */
.mud-grid > .mud-grid-item.mud-grid-item-md-6:has(> .mud-paper > [data-estado-indisponivel]:not(.t7-sem-dado)),
.mud-grid > .mud-grid-item.mud-grid-item-md-6:nth-child(odd):has(> .mud-paper > [data-estado-indisponivel]:not(.t7-sem-dado)) + .mud-grid-item.mud-grid-item-md-6,
.mud-grid > .mud-grid-item.mud-grid-item-md-6:nth-child(odd):has(+ .mud-grid-item.mud-grid-item-md-6 > .mud-paper > [data-estado-indisponivel]:not(.t7-sem-dado)) { flex-basis: 100%; max-width: 100%; }
/* 57. (dono, 04/10/2026) Chip que só informa é neutro: chip não tocável em azul (primary/info) vira cinza; azul fica para o que se clica. */
.mud-chip.mud-chip-color-primary:not(.mud-clickable), .mud-chip.mud-chip-color-info:not(.mud-clickable),
.mud-chip.mud-chip-filled.mud-chip-color-primary:not(.mud-clickable), .mud-chip.mud-chip-filled.mud-chip-color-info:not(.mud-clickable) { background: var(--t7-cabecalho-tabela); color: var(--t7-texto-2-tinto); --t7-ponto: var(--t7-texto-2-tinto); }
/* 58. Cartão de indicador: rótulo + número + UMA linha de apoio. Da terceira linha em diante o texto fica recolhido (aparece ao passar o mouse
   ou focar); o "Entenda este resultado" da tela traz a leitura completa. */
.mud-paper[data-sinal] > .mud-typography-caption ~ .mud-typography-caption ~ .mud-typography-caption,
.mud-paper[data-card] > .mud-typography-caption ~ .mud-typography-caption ~ .mud-typography-caption,
.mud-paper[data-sinal] > .mud-typography-caption ~ .mud-typography-caption ~ .mud-tooltip-root,
.mud-paper[data-card] > .mud-typography-caption ~ .mud-typography-caption ~ .mud-tooltip-root,
.t7-kpi .t7-kpi-apoio ~ .t7-kpi-apoio { display: none; }
.mud-paper[data-sinal]:hover > .mud-typography-caption, .mud-paper[data-card]:hover > .mud-typography-caption, .mud-paper[data-sinal]:focus-within > .mud-typography-caption,
.mud-paper[data-card]:focus-within > .mud-typography-caption, .t7-kpi:hover .t7-kpi-apoio, .t7-kpi:focus-within .t7-kpi-apoio { display: block; }
/* 59. Número de cartão nunca em azul de ação. */
.mud-paper[data-sinal] .mud-primary-text, .mud-paper[data-card] .mud-primary-text, .mud-paper[data-sinal] .mud-info-text, .mud-paper[data-card] .mud-info-text { color: var(--t7-navy) !important; }
/* 60. Estado vazio de bloco: linha compacta com ícone, título e motivo — nunca um cartão alto de meia largura. */
.t7-sem-dado-bloco { padding: 8px 12px; border: 1px solid var(--t7-contorno, #CBD5E1); border-radius: 8px; background: transparent; }
/* 61. Ajuda de diálogo: "Como funciona" com ícone, uma linha, 13 px. */
.t7-ajuda-inline { display: flex; width: fit-content; align-items: center; gap: 4px; margin: 2px 0 8px; font-size: 13px; color: var(--t7-primaria-escura); cursor: help; }
.t7-ajuda-inline .mud-icon-root { font-size: 16px; }


/* 62. Zero de cartão é neutro: nunca verde, vermelho, laranja nem azul (marcado por js/dicas-campo.js). */
.t7-zero, .t7-zero * { color: var(--t7-navy) !important; }
.t7-kpi.t7-kpi-zero { --t7-cor: var(--t7-navy); }
.t7-ajuda-inline-raiz { display: block !important; width: fit-content; }


/* 63. Piso de 13 px também na mensagem de validação e no texto de apoio de campo. */
.mud-input-helper-text:not(.t7-dica), .mud-input-helper-text.mud-input-error { font-size: 13px; line-height: 1.3; }

/* 64. Campo preenchido sem o Blazor saber (preenchimento automático do navegador, ou página estática como o Login): o rótulo sobe e
   nunca fica por cima do valor. Login usa Placeholder=" " para o CSS saber se há texto (:placeholder-shown). */
.mud-input-control-input-container > .mud-input.mud-input-outlined:has(input:-webkit-autofill) ~ label.mud-input-label-outlined,
.mud-input-control-input-container > .mud-input.mud-input-outlined:has(input[placeholder=" "]:not(:placeholder-shown)) ~ label.mud-input-label-outlined {
  top: 0 !important; transform: translate(14px, -6px) scale(0.75) !important; max-width: calc((100% - 24px) / 0.75) !important; white-space: nowrap !important; line-height: 1.15rem !important;
  background-color: var(--mud-palette-surface, #fff) !important; padding: 0 5px !important; }
.mud-input-control-input-container > .mud-input.mud-input-outlined:has(input:autofill) ~ label.mud-input-label-outlined {
  top: 0 !important; transform: translate(14px, -6px) scale(0.75) !important; max-width: calc((100% - 24px) / 0.75) !important; white-space: nowrap !important; line-height: 1.15rem !important;
  background-color: var(--mud-palette-surface, #fff) !important; padding: 0 5px !important; }
.mud-input-control-input-container > .mud-input.mud-input-text.mud-input-underline:has(input:-webkit-autofill) ~ label.mud-input-label-inputcontrol,
.mud-input-control-input-container > .mud-input.mud-input-text.mud-input-underline:has(input[placeholder=" "]:not(:placeholder-shown)) ~ label.mud-input-label-inputcontrol {
  top: 0 !important; transform: translate(0, 0) scale(0.8125) !important; max-width: calc((100% - 4px) / 0.8125) !important; white-space: nowrap !important; }
.mud-input-control-input-container > .mud-input.mud-input-text.mud-input-underline:has(input:autofill) ~ label.mud-input-label-inputcontrol {
  top: 0 !important; transform: translate(0, 0) scale(0.8125) !important; max-width: calc((100% - 4px) / 0.8125) !important; white-space: nowrap !important; }

/* Combo sem opções: a lista abre com a mensagem traduzida (variável definida em App.razor), nunca em branco. */
.mud-popover-open > .mud-list:empty::after {
    content: var(--t7-lista-sem-opcoes);
    display: block;
    padding: 12px 16px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.875rem;
}

/* "Sem dado" na primeira linha e o motivo curto na linha de baixo, nunca cortado (retorno do design 12/10/2026, noite). */
.t7-sem-dado > span { min-width: 0; }
.t7-sem-dado-motivo { display: block; }

/* Cartão de indicador (retorno do design 12/10/2026, K1): título em até duas linhas (nunca cortado no meio da palavra) e no máximo UMA linha de apoio depois do número; o
   detalhe fica na seção para onde o cartão leva. */
[data-sinal] > .mud-typography-caption:first-child { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
[data-sinal] > :is(.mud-typography-h4, .mud-typography-h5, .mud-typography-h6, .t7-sem-dado, div) ~ :is(.mud-typography-caption, .mud-typography-body2) ~ :is(.mud-typography-caption, .mud-typography-body2, .mud-tooltip-root) { display: none; }

/* Tabela larga: 7 primeiras colunas + a última (ações) à vista; "Ver todas as colunas" mostra o resto (retorno do design 12/10/2026, L2). */
.t7-limitar-colunas:not(.t7-todas-colunas) :is(th, td):nth-child(n+8):not(:last-child) { display: none; }
.t7-alternar-colunas { margin-bottom: 4px; }

/* Grade de cartões de indicador sem buraco (retorno do design 12/10/2026, K2): até 5 cartões numa linha, 6 em 3+3, 7 em 4+3 com a última
   linha ocupando a largura toda, 8 em 4+4. Vale de 960 px para cima; abaixo disso cada cartão segue o xs/sm da tela. */
@media (min-width: 960px) {
  .mud-grid:has(> .mud-grid-item :is([data-sinal], [data-card], .t7-kpi)):not(:has(> .mud-grid-item:nth-child(6))) > .mud-grid-item { flex: 1 1 0; max-width: none; min-width: 0; }
  .mud-grid:has(> .mud-grid-item :is([data-sinal], [data-card], .t7-kpi)):has(> .mud-grid-item:nth-child(6):last-child) > .mud-grid-item { flex: 0 0 33.3333%; max-width: 33.3333%; }
  .mud-grid:has(> .mud-grid-item :is([data-sinal], [data-card], .t7-kpi)):has(> .mud-grid-item:nth-child(7):last-child) > .mud-grid-item { flex: 0 0 25%; max-width: 25%; }
  .mud-grid:has(> .mud-grid-item :is([data-sinal], [data-card], .t7-kpi)):has(> .mud-grid-item:nth-child(7):last-child) > .mud-grid-item:nth-child(n+5) { flex: 1 1 33.3333%; max-width: none; min-width: 0; }
  .mud-grid:has(> .mud-grid-item :is([data-sinal], [data-card], .t7-kpi)):has(> .mud-grid-item:nth-child(8):last-child) > .mud-grid-item { flex: 0 0 25%; max-width: 25%; }
  /* Gráficos lado a lado: o último, quando sobra sozinho, ocupa a linha inteira em vez de deixar meia largura vazia. */
  .mud-grid:not(:has(> .mud-grid-item:not(.mud-grid-item-md-6))) > .mud-grid-item-md-6:last-child:nth-child(odd) { flex-basis: 100%; max-width: 100%; }
  /* Meia largura sem par dos dois lados (ex.: gráfico seguido de um bloco de largura toda) também ocupa a linha. */
  .mud-grid > .mud-grid-item-md-6:not(.mud-grid-item-md-6 + .mud-grid-item-md-6):not(:has(+ .mud-grid-item-md-6)) { flex-basis: 100%; max-width: 100%; }
}

/* Célula de tabela sem valor mostra "Sem dado" (variável traduzida em App.razor), nunca branco (retorno do design 12/10/2026, L2). A
   primeira e a última coluna ficam de fora: costumam ser de ações. */
:is(td.mud-table-cell, .mud-simple-table td):empty:not(:first-child):not(:last-child)::after { content: var(--t7-sem-dado); color: var(--mud-palette-text-secondary); }

/* Lista ou gráfico vazio em destaque (retorno do design 12/10/2026, L5): ícone grande, título forte e o motivo embaixo, centralizados —
   nunca uma linha solta com ícone pequeno. */
.t7-sem-dado-bloco[data-estado-indisponivel="lista-vazia"], .t7-sem-dado-bloco[data-estado-indisponivel="sem-dado"] {
  flex-direction: column; justify-content: center; text-align: center; gap: 6px; padding: 24px 16px; min-height: 120px; border-style: dashed; }
.t7-sem-dado-bloco:is([data-estado-indisponivel="lista-vazia"], [data-estado-indisponivel="sem-dado"]) .mud-icon-root { font-size: 2rem; width: 2rem; height: 2rem; }
.t7-sem-dado-bloco:is([data-estado-indisponivel="lista-vazia"], [data-estado-indisponivel="sem-dado"]) b { font-size: 1rem; color: var(--mud-palette-text-primary); }

/* Cabeçalho de tabela em no máximo duas linhas (retorno do design 12/10/2026, L2): coluna nunca mais estreita que ~7 caracteres por linha;
   a tabela rola na horizontal quando não cabe. */
:is(.mud-table-head th, .mud-simple-table thead th) { min-width: 96px; }
:is(.mud-table-head th, .mud-simple-table thead th):first-child:empty { min-width: 0; }

/* Lista aberta nunca mais estreita que o nome das opções (retorno do design 12/10/2026, L1: "Angelon", "Superm…" cortados). */
.mud-popover.mud-popover-open:has(> .mud-list) { min-width: 240px; }
.mud-popover.mud-popover-open > .mud-list .mud-list-item-text { white-space: normal; overflow-wrap: normal; word-break: normal; }

/* Barra de filtros: os campos dividem a linha (mínimo 130 px; data 172 px) e o Filtrar fica na mesma linha, à direita, em vez de cair sozinho para baixo
   (retorno do design 12/10/2026, L3). */
[data-barra="filtros"] > .mud-grid > .mud-grid-item:not(.t7-acao):not(.t7-barra-extra):not(:has(> .mud-divider)) { flex: 1 1 130px; max-width: 360px; min-width: 130px; } /* campo sozinho na linha não estica até a borda (retorno do design 13/10/2026, L3) */
[data-barra="filtros"] > .mud-grid > .mud-grid-item:has(.mud-picker) { flex: 0 0 172px; min-width: 172px; } /* data inteira (dd/mm/aaaa) com os dois ícones */
/* Valor escolhido inteiro no seletor ("Q.", "QA Unidade S…" no retorno do design 13/10/2026, L1): seletor nunca abaixo de 240 px; a barra quebra linha antes de cortar. */
[data-barra="filtros"] > .mud-grid > .mud-grid-item:not(.t7-acao):not(.t7-barra-extra):not(:has(> .mud-divider)):has(.mud-select, .mud-autocomplete):not(:has(.mud-picker)), .t7-barra-filtros .mud-grid > .mud-grid-item:not(.t7-acao):not(.t7-barra-extra):has(.mud-select, .mud-autocomplete):not(:has(.mud-picker)) { flex: 1 1 240px; min-width: 240px; }
/* Na barra de filtros o rótulo fica sempre em cima, pequeno (como no campo preenchido): o campo estreito nunca quebra o rótulo em duas
   linhas (retorno do design 12/10/2026, L1). */
[data-barra="filtros"] .mud-input-control-input-container > .mud-input.mud-input-outlined ~ label.mud-input-label-outlined {
  top: 0 !important; transform: translate(14px, -6px) scale(0.75) !important; max-width: calc((100% - 24px) / 0.75) !important; white-space: nowrap !important;
  background-color: var(--mud-palette-surface, #fff) !important; padding: 0 5px !important; }
[data-barra="filtros"] .mud-input-control-input-container > .mud-input.mud-input-text ~ label.mud-input-label-inputcontrol {
  top: 0 !important; transform: translate(0, 0) scale(0.8125) !important; max-width: calc((100% - 4px) / 0.8125) !important; white-space: nowrap !important; }
/* Valor em dinheiro no cartão de indicador cabe inteiro (R$ 708.750,00) em vez de ser cortado. */
.mud-card[data-sinal] .mud-typography-h5 { font-size: 1.15rem; }
/* Valor em dinheiro inteiro nos cartões de contrato (captura 13/10/2026: "R$ 18.200,0" cortado em 1280 px). */
.mud-paper[data-sinal="contrato"] .mud-typography-h5:not(.texto) { font-size: clamp(1.1rem, 1.5vw, 1.5rem); white-space: nowrap; }
/* Nenhum texto abaixo de 13 px (retorno do design 13/10/2026, L7): legenda, rótulo de cartão, chip e texto de ajuda. */
.mud-typography-caption, .mud-typography-overline, .mud-chip.mud-chip-size-small, .mud-input-helper-text, .mud-tooltip { font-size: 13px; }
/* Par de meia largura com alturas muito diferentes ocupa a linha inteira (marcado por js/grade.js). */
@media (min-width: 960px) { .mud-grid > .mud-grid-item-md-6.t7-linha-inteira { flex-basis: 100%; max-width: 100%; } }
/* Selos de faixa inteiros dentro do cartão (retorno do design 13/10/2026, L1: "Dados insuficientes: 26" saía da borda). */
.mud-paper[data-sinal="faixas"] .mud-chip { max-width: 100%; height: auto; min-height: 28px; white-space: normal; padding-right: 12px; }
.mud-paper[data-sinal="faixas"] .mud-chip .mud-chip-content { overflow: visible; }
/* Coluna de ações fica sempre à vista na tabela que rola de lado (retorno do design 13/10/2026, L2: ícones partidos na borda em Usuários). */
.mud-table-container tbody td.mud-table-cell:last-child:has(.mud-icon-button) { position: sticky; right: 0; background: var(--mud-palette-surface); z-index: 1; box-shadow: -8px 0 8px -6px rgba(0,0,0,.18); } /* sombra: a coluna fica por cima do que rola, nunca parece corte */

/* Ajuda de campo (dono, 22/10/2026): o texto de ajuda nunca fica dentro do campo; vira um "?" logo à direita do nome do campo, que abre
   a explicação num balão (clique, Enter ou F1 com o campo em foco) e nunca abre a lista do seletor. */
.mud-input-control .mud-input-helper-text.t7-dica { display: none !important; }
.t7-dica-rotulo { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 20px; height: 20px; margin-left: 6px; vertical-align: middle;
  border-radius: 50%; background: var(--t7-primaria-clara); color: var(--t7-primaria-escura); font-size: 13px; font-weight: 700; line-height: 1; order: 2;
  cursor: help; pointer-events: auto; user-select: none; position: relative; z-index: 3; }
.t7-dica-rotulo:hover, .t7-dica-rotulo:focus-visible { background: var(--t7-primaria-escura); color: #fff; outline: none; }
/* O asterisco de obrigatório (desenhado pelo rótulo) vem antes do "?": "E-mail* ?". */
label.mud-input-label:has(.t7-dica-rotulo), label.mud-input-label:has(.t7-adicionar-rotulo) { overflow: visible; display: inline-flex; align-items: center; }
label.mud-input-label:has(.t7-dica-rotulo)::after, label.mud-input-label:has(.t7-adicionar-rotulo)::after { order: 1; }
/* "+" de criação contextual (dono, 31/10/2026): mesmo tamanho e espaçamento do "?", sempre depois dele ("Marca ? +"), nunca sobreposto. */
.t7-adicionar-rotulo { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 20px; height: 20px; margin-left: 6px; vertical-align: middle;
  border-radius: 50%; background: var(--t7-primaria-escura); color: #fff; font-size: 15px; font-weight: 700; line-height: 1; order: 3;
  cursor: pointer; pointer-events: auto; user-select: none; position: relative; z-index: 3; }
.t7-adicionar-rotulo:hover, .t7-adicionar-rotulo:focus-visible { background: var(--t7-primaria-clara); color: var(--t7-primaria-escura); outline: none; }
[data-ajuda-rotulo] + .t7-adicionar-rotulo, .t7-dica-rotulo + .t7-adicionar-rotulo { margin-left: 6px; }
.t7-dica-balao { position: fixed; z-index: 2000; max-width: 360px; padding: 10px 12px; border-radius: 8px; background: #1f2a44; color: #fff;
  font-size: 13px; line-height: 1.4; box-shadow: 0 6px 20px rgba(0,0,0,.25); white-space: normal; }
.t7-dica-balao b { display: block; margin-bottom: 4px; font-size: 13px; }