/* ═══════════════════════════════════════════════════════════════════════════════════════════════════
   A PALETA DO PAINEL — ⛔ ZERO hexadecimal nesta folha. Regra §1 de `sis/docs/design-visual-telas-blazor.md`.

   🔑 Os `--panel-*` são APELIDOS dos `--mud-palette-*` que o MudThemeProvider publica a partir do
   `Layout/PainelTheme.cs`. Uma fonte só: mudar a cor do painel é mudar o C#, e a folha acompanha sozinha.

   🩸 Até 2026-09-04 esta folha tinha 46 hexadecimais e ZERO `var(--mud-palette-*)`. Sete deles eram a
   paleta declarada aqui — uma SEGUNDA cópia da que mora no `PainelTheme` —, e o portão
   `TemaDoPainelEspelhaOCssTests` existia só para comparar as duas. Os outros 39 eram cor INVENTADA no
   lugar: nove `var(--panel-danger, #ff8c82)` cujo `--panel-danger` ⛔ NUNCA foi declarado (toda ocorrência
   caía no literal), mais uma família de azuis, verdes e cinzas próximos entre si que ninguém decidiu.

   ⚠️ Os apelidos ficam porque o resto da folha os usa em ~500 lugares: trocá-los por `--mud-palette-*`
   direto seria churn sem ganho, e a camada de nome é o que deixa a folha legível ("linha", "tinta") sem
   deixá-la ser uma segunda paleta.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════ */
:root {
    color-scheme: dark;
    --panel-ink: var(--mud-palette-text-primary);
    --panel-muted: var(--mud-palette-text-secondary);
    --panel-faint: var(--mud-palette-text-disabled);
    --panel-night: var(--mud-palette-background);
    --panel-surface: var(--mud-palette-surface);
    --panel-line: var(--mud-palette-lines-default);
    --panel-signal: var(--mud-palette-primary);
    --panel-signal-soft: var(--mud-palette-primary-lighten);
    --panel-warning: var(--mud-palette-warning);
    --panel-warning-soft: var(--mud-palette-warning-lighten);
    --panel-danger: var(--mud-palette-error);
    --panel-danger-soft: var(--mud-palette-error-lighten);
    --panel-info: var(--mud-palette-info);

    /* 🔑 Os `-rgb` são a receita do CONTAINER TONAL — a cor diluída, que é como o Material desenha realce
       sem chapar.

       🩸 A SINTAXE É `rgba(var(--token), 0.45)`, ⛔ NUNCA `rgb(var(--token) / 45%)`. Medido em 2026-09-04:
       o MudBlazor publica estes tokens SEPARADOS POR VÍRGULA (`255,140,130`), e a forma com barra exige
       componentes separados por ESPAÇO — `rgb(255,140,130 / 45%)` é inválido, e o navegador descarta a
       declaração inteira EM SILÊNCIO. A captura pegou: o alerta de erro apareceu como texto vermelho solto,
       sem borda e sem fundo, porque as duas declarações tinham sumido.

       ⚠️ Só as cores SEMÂNTICAS publicam `-rgb`: não existe `--mud-palette-surface-rgb`, e por isso a
       camada de estado usa a primária diluída, ⛔ nunca `dark` (que é escuro nos dois temas — sobre
       superfície escura o realce simplesmente some). */
    --panel-danger-rgb: var(--mud-palette-error-rgb);
    --panel-signal-rgb: var(--mud-palette-primary-rgb);
    --panel-info-rgb: var(--mud-palette-info-rgb);

    font-family: Aptos, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html, body, #app { min-height: 100%; }

body {
    margin: 0;
    background:
        radial-gradient(circle at 80% -10%, rgba(var(--panel-signal-rgb), 0.12), transparent 30rem),
        var(--panel-night);
    color: var(--panel-ink);
}

button, input, select, textarea { font: inherit; }

a { color: inherit; }

.panel-app-frame { min-height: 100dvh; }

.panel-empty-state {
    min-height: 100dvh;
    display: grid;
    place-content: center;
    justify-items: start;
    gap: 1rem;
    max-width: 52rem;
    margin: 0 auto;
    padding: clamp(1.5rem, 5vw, 5rem);
}

.panel-empty-state h1 {
    max-width: 13ch;
    margin: 0;
    font-family: Bahnschrift, "Arial Narrow", sans-serif;
    font-size: clamp(2.6rem, 7vw, 5.8rem);
    font-stretch: condensed;
    font-weight: 600;
    letter-spacing: -.045em;
    line-height: .92;
}

.panel-empty-state p:not(.panel-eyebrow) {
    max-width: 42rem;
    color: var(--panel-muted);
    font-size: 1.05rem;
    line-height: 1.6;
}

.panel-mark {
    width: 3.5rem;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border: 1px solid var(--panel-line);
    border-radius: .8rem;
    background: var(--panel-surface);
    color: var(--panel-signal);
    font: 700 1.35rem/1 Cascadia Mono, monospace;
}

.panel-eyebrow {
    margin: 0;
    color: var(--panel-signal);
    font: 600 .72rem/1.2 Cascadia Mono, monospace;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.panel-button {
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .7rem 1rem;
    border-radius: .45rem;
    text-decoration: none;
}

.panel-button--primary {
    background: var(--panel-signal);
    color: var(--panel-night);
    font-weight: 700;
}

.panel-button--wide { width: 100%; }

.auth-shell {
    min-height: 100dvh;
    display: grid;
    grid-template-columns: minmax(15rem, .75fr) minmax(25rem, 1.25fr);
    align-items: stretch;
}

.auth-shell__brand {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding: clamp(1.5rem, 4vw, 4.5rem);
    border-right: 1px solid var(--panel-line);
    background: linear-gradient(160deg, var(--panel-surface), var(--panel-night));
}

.auth-shell__brand-rule { width: 1px; flex: 1; min-height: 8rem; margin-left: 1.7rem; background: var(--panel-line); }
.auth-shell__brand-label { color: var(--panel-muted); font: 600 .7rem/1.5 Cascadia Mono, monospace; letter-spacing: .12em; text-transform: uppercase; }

.auth-card {
    position: relative;
    width: min(100%, 35rem);
    align-self: center;
    margin: clamp(1.5rem, 6vw, 7rem);
    padding: clamp(1.5rem, 4vw, 3.5rem);
    border: 1px solid var(--panel-line);
    border-radius: .8rem;
    background: color-mix(in srgb, var(--panel-surface) 78%, transparent);
    box-shadow: 0 2rem 7rem rgb(0 0 0 / 25%);
}

.auth-card__signal { position: absolute; inset: -.05rem auto -.05rem -.05rem; width: .3rem; border-radius: .8rem 0 0 .8rem; background: var(--panel-signal); }
.auth-card h1 { max-width: 12ch; margin: 1.2rem 0 1rem; font: 600 clamp(2.4rem, 5vw, 4.2rem)/.92 Bahnschrift, "Arial Narrow", sans-serif; letter-spacing: -.04em; }
.auth-card__lead { margin: 0 0 2rem; color: var(--panel-muted); line-height: 1.6; }
.auth-card form { display: grid; gap: 1rem; }

.panel-field { min-width: 0; display: grid; gap: .45rem; }
.panel-field label { color: var(--panel-muted); font-size: .78rem; font-weight: 650; letter-spacing: .03em; }
/* ⚠️ O <select> entra junto do <input>: sem ele, todo combo do painel cai no estilo NATIVO do sistema —
   caixa cinza-clara sobre a casca escura. Medido numa captura em 2026-09-02, e ⛔ não era só do combo
   novo: o papel do usuário e as credenciais de PSP já pintavam assim. */
.panel-field input,
.panel-field select {
    width: 100%;
    min-height: 3.1rem;
    padding: .75rem .9rem;
    border: 1px solid var(--panel-line);
    border-radius: .45rem;
    outline: none;
    background: color-mix(in srgb, var(--panel-night) 70%, transparent);
    color: var(--panel-ink);
}
.panel-field input:focus,
.panel-field select:focus { border-color: var(--panel-signal); box-shadow: 0 0 0 .2rem rgba(var(--panel-signal-rgb), 0.14); }
/* 🔑 A seta do combo é desenhada pelo SISTEMA e não segue a folha — em tema escuro ela some contra o
   fundo. `color-scheme: dark` no elemento é o que faz o navegador desenhar o widget nativo na versão
   escura dele, incluindo a lista aberta. */
.panel-field select { color-scheme: dark; }
.panel-field__code { font: 650 1.3rem/1 Cascadia Mono, monospace !important; letter-spacing: .18em; }
.validation-message { color: var(--panel-danger); font-size: .78rem; }

button.panel-button { border: 0; cursor: pointer; }
/* O <FocusOnNavigate Selector="h1"> do App.razor foca o título a cada navegação — isso é ACESSIBILIDADE
   (o leitor de tela anuncia a página nova) e ⛔ não se remove. O que se remove é o ANEL: título não é
   ação, então o anel do navegador não diz "você pode agir aqui" — desenha um retângulo em volta do texto,
   e foi assim que a captura de 2026-09-02 mostrou "Tenants" e "Contadores" dentro de uma caixa branca.
   ⚠️ Isto NÃO afrouxa o foco de nada interativo: botão, link e cartão continuam com o anel deles. */
h1:focus, h2:focus, h3:focus { outline: none; }
button.panel-button:focus-visible, .panel-link-button:focus-visible, .auth-back:focus-visible { outline: .2rem solid rgba(var(--panel-signal-rgb), 0.4); outline-offset: .15rem; }
button:disabled { cursor: wait; opacity: .58; }
.panel-link-button, .auth-back { border: 0; padding: .55rem 0; background: transparent; color: var(--panel-signal); cursor: pointer; text-align: left; }
.auth-back { margin-bottom: .5rem; color: var(--panel-muted); }

/* 🩸 O aviso NEUTRO não tinha caixa: só `--error` e `--ok` traziam borda e fundo, e o `panel-alert` puro
   saía como texto solto. A captura da exclusão do contador pegou — ali ele é o ÚNICO retorno de um gesto
   irreversível, e sem superfície lia como legenda da grade acima. §2 do `sis`: o bloco é a unidade. */
.panel-alert { padding: .8rem 1rem; border: 1px solid var(--panel-line); border-radius: .45rem; background: color-mix(in srgb, var(--panel-surface) 62%, transparent); font-size: .86rem; line-height: 1.45; }
.panel-alert--error { border: 1px solid rgba(var(--panel-danger-rgb), 0.45); background: rgba(var(--panel-danger-rgb), 0.09); color: var(--panel-danger-soft); }
.panel-alert--ok { border: 1px solid rgba(var(--panel-signal-rgb), 0.45); background: rgba(var(--panel-signal-rgb), 0.09); color: var(--panel-signal-soft); }
/* Relatório do reprocesso de baixas (2026-08-25): neutro, porque a resposta mais comum é "nada pendente" —
   pintá-lo de sucesso ou de erro daria peso ao gesto que ele não tem. O grupo SEM EVIDÊNCIA é o único
   destacado: é o que sobra para o operador resolver. */
.panel-alert--report { display: grid; gap: .4rem; border: 1px solid var(--panel-line); background: color-mix(in srgb, var(--panel-surface) 68%, transparent); color: var(--panel-muted); }
.panel-alert--report b { color: var(--panel-ink); }
.panel-alert__warn { color: var(--panel-warning-soft); }
.panel-alert__warn b { color: var(--panel-warning); }

/* Sobreposicao da troca de senha. Cobre o workspace inteiro de proposito: e operacao de credencial, e mexer
   na frota comercial no meio dela e distracao com custo. */
.password-change { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 1.5rem; background: color-mix(in srgb, var(--panel-night) 78%, transparent); }
.password-change__card { display: grid; gap: .85rem; width: min(28rem, 100%); max-height: 90vh; overflow-y: auto; padding: 1.6rem; border: 1px solid var(--panel-line); border-radius: .6rem; background: var(--panel-night); }
.password-change__actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: .4rem; }

.auth-key { display: grid; gap: .5rem; margin-bottom: 1.25rem; padding: 1rem; border: 1px dashed var(--panel-line); border-radius: .45rem; background: color-mix(in srgb, var(--panel-night) 45%, transparent); }
.auth-key span { color: var(--panel-muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; }
.auth-key strong { overflow-wrap: anywhere; color: var(--panel-signal); font: 600 .9rem/1.5 Cascadia Mono, monospace; }
/* O QR do enrolamento. Fundo BRANCO fixo, mesmo no tema escuro: leitor de QR espera módulos escuros sobre
   claro, e inverter derruba a leitura em boa parte dos aparelhos. O SVG escala pelo container. */
.auth-qr { display: grid; justify-items: center; margin-bottom: 1rem; padding: .9rem; border-radius: .45rem; background: var(--mud-palette-white); }
.auth-qr svg { display: block; width: 100%; max-width: 208px; height: auto; }
.recovery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; padding: 0; list-style: none; }
.recovery-grid li { padding: .65rem; border: 1px solid var(--panel-line); border-radius: .35rem; background: color-mix(in srgb, var(--panel-night) 45%, transparent); font: 600 .75rem/1 Cascadia Mono, monospace; text-align: center; }
.auth-card__footer { display: flex; align-items: center; gap: .55rem; margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--panel-line); color: var(--panel-muted); font: 500 .65rem/1.4 Cascadia Mono, monospace; }
.auth-lock { color: var(--panel-signal); font-size: .55rem; }

@media (max-width: 760px) {
    .auth-shell { display: block; padding: max(1rem, env(safe-area-inset-top, 0px)) 1rem max(1rem, env(safe-area-inset-bottom, 0px)); }
    .auth-shell__brand { min-height: auto; flex-direction: row; align-items: center; padding: 0 0 1rem; border: 0; background: transparent; }
    .auth-shell__brand-rule { width: auto; height: 1px; min-height: 0; flex: 1; margin: 0; }
    .auth-shell__brand-label { text-align: right; }
    .auth-card { width: 100%; margin: 0; padding: 1.4rem; }
    .auth-card h1 { font-size: clamp(2.35rem, 13vw, 3.6rem); }
}

.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.workspace { min-height: 100dvh; background: linear-gradient(90deg, rgb(255 255 255 / 1.5%) 1px, transparent 1px) 0 0 / 6rem 100%, var(--panel-night); }
.workspace-header { min-height: 4.8rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem clamp(1rem, 2.4vw, 2.5rem); border-bottom: 1px solid var(--panel-line); background: color-mix(in srgb, var(--panel-night) 88%, transparent); backdrop-filter: blur(16px); }
.workspace-brand { display: flex; align-items: center; gap: .8rem; text-decoration: none; }
.workspace-brand .panel-mark { width: 2.65rem; border-radius: .55rem; }
.workspace-brand > span:last-child, .workspace-operator > span:nth-child(2) { display: grid; gap: .12rem; }
.workspace-brand strong { font: 650 1.05rem/1 Bahnschrift, sans-serif; letter-spacing: -.01em; }
.workspace-brand small, .workspace-operator small { color: var(--panel-muted); font: 500 .62rem/1 Cascadia Mono, monospace; letter-spacing: .08em; text-transform: uppercase; }
.workspace-operator { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.workspace-operator strong { max-width: 16rem; overflow: hidden; text-overflow: ellipsis; font-size: .78rem; white-space: nowrap; }
.workspace-operator__status { width: .55rem; height: .55rem; border-radius: 50%; background: var(--panel-signal); box-shadow: 0 0 0 .25rem rgba(var(--panel-signal-rgb), 0.1); }
.workspace-main { min-height: calc(100dvh - 4.8rem); display: grid; grid-template-columns: minmax(25rem, .9fr) minmax(31rem, 1.1fr); }
.fleet { min-width: 0; padding: clamp(1.25rem, 2.5vw, 2.5rem); border-right: 1px solid var(--panel-line); }
.fleet-heading, .detail-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.fleet-heading h1, .detail-heading h2, .detail-empty h2 { margin: .35rem 0 0; font: 600 clamp(2.25rem, 4vw, 3.75rem)/.95 Bahnschrift, "Arial Narrow", sans-serif; letter-spacing: -.04em; }
.fleet-heading .panel-button { flex: 0 0 auto; }
.fleet-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 1.5rem 0; border: 1px solid var(--panel-line); border-radius: .6rem; background: color-mix(in srgb, var(--panel-surface) 68%, transparent); }
.fleet-summary > div { min-width: 0; display: grid; gap: .3rem; padding: 1rem; border-left: .2rem solid var(--panel-signal); }
.fleet-summary > div + div { border-top: 0; border-left-width: 1px; border-left-color: var(--panel-line); }
.fleet-summary span, .fleet-summary small { color: var(--panel-muted); font-size: .65rem; }
.fleet-summary strong { font: 650 1.8rem/1 Bahnschrift, sans-serif; }
.fleet-summary__attention strong { color: var(--panel-warning); }
.fleet-summary__blocked strong { color: var(--panel-danger); }
/* ⚠️ A busca encostava no título na consulta de contadores: lá ela vem DIRETO do heading, enquanto na
   frota há o bloco de resumo (.fleet-summary, margin 1.5rem) separando os dois. O respiro é do irmão
   adjacente para não empurrar o resumo onde ele já existe. */
.fleet-heading + .fleet-search { margin-top: 1.5rem; }
.fleet-search { min-height: 2.9rem; display: flex; align-items: center; gap: .65rem; padding: 0 .85rem; border: 1px solid var(--panel-line); border-radius: .45rem; background: color-mix(in srgb, var(--panel-night) 55%, transparent); }
.fleet-search:focus-within { border-color: var(--panel-signal); box-shadow: 0 0 0 .18rem rgba(var(--panel-signal-rgb), 0.12); }
.fleet-search > span { color: var(--panel-signal); font-size: 1.2rem; }
.fleet-search input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: var(--panel-ink); }
.fleet-search kbd { min-width: 1.6rem; padding: .25rem; border: 1px solid var(--panel-line); border-radius: .25rem; color: var(--panel-muted); font: 600 .65rem/1 Cascadia Mono, monospace; text-align: center; }
.tenant-list { display: grid; gap: .7rem; margin-top: .9rem; }
.tenant-card { --tenant-accent: var(--panel-signal); width: 100%; display: flex; flex-direction: column; align-items: stretch; gap: .85rem; padding: 1rem; border: 1px solid var(--panel-line); border-left: .3rem solid var(--tenant-accent); border-radius: .55rem; background: color-mix(in srgb, var(--panel-surface) 62%, transparent); color: var(--panel-ink); text-align: left; cursor: pointer; transition: border-color 160ms ease, transform 160ms ease, background 160ms ease; }
.tenant-card:hover { border-color: color-mix(in srgb, var(--tenant-accent) 50%, var(--panel-line)); transform: translateX(.15rem); }
.tenant-card:focus-visible { outline: .2rem solid rgba(var(--panel-signal-rgb), 0.35); outline-offset: .15rem; }
.tenant-card--selected { background: color-mix(in srgb, var(--panel-line) 86%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tenant-accent) 40%, transparent); }
.tenant-card--attention { --tenant-accent: var(--panel-warning); }
.tenant-card--critical, .tenant-card--blocked { --tenant-accent: var(--panel-danger); }
.tenant-card--open { --tenant-accent: var(--panel-info); }
.tenant-card__top { min-width: 0; display: flex; align-items: center; gap: .7rem; }
.tenant-card__monogram { width: 2rem; height: 2rem; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--tenant-accent) 35%, var(--panel-line)); border-radius: .35rem; background: color-mix(in srgb, var(--tenant-accent) 10%, transparent); color: var(--tenant-accent); font: 650 .68rem/1 Cascadia Mono, monospace; }
.tenant-card__name { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; font-weight: 650; white-space: nowrap; }
.tenant-status { padding: .28rem .45rem; border: 1px solid color-mix(in srgb, var(--tenant-accent) 35%, var(--panel-line)); border-radius: 99rem; color: var(--tenant-accent); font: 600 .57rem/1 Cascadia Mono, monospace; letter-spacing: .05em; text-transform: uppercase; }
.tenant-card__limits { display: flex; gap: 1rem; color: var(--panel-muted); font-size: .68rem; }
.tenant-card__limits span { min-width: 0; }
.tenant-card__limits b { color: var(--panel-ink); font: 650 .8rem/1 Cascadia Mono, monospace; }
.lease-runway { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .7rem; }
.lease-runway__track, .runway-large__track { position: relative; height: .22rem; overflow: hidden; border-radius: 99rem; background: var(--panel-line); }
.lease-runway__track i, .runway-large__track i { display: block; width: var(--lease-progress); height: 100%; border-radius: inherit; background: var(--tenant-accent, var(--panel-signal)); }
.lease-runway__label { color: var(--tenant-accent); font: 600 .6rem/1 Cascadia Mono, monospace; }
.tenant-detail { min-width: 0; padding: clamp(1.25rem, 3.5vw, 3.5rem); background: radial-gradient(circle at 100% 0, rgba(var(--panel-signal-rgb), 0.06), transparent 28rem); }
.tenant-detail form, .detail-overview { max-width: 52rem; margin: 0 auto; }
.detail-heading h2 { max-width: 14ch; overflow-wrap: anywhere; }
/* Exclusão do CLIENTE (2026-08-25): as ações do cabeçalho e a faixa de confirmação que as substitui.
   ⚠️ A faixa OCUPA o lugar dos botões, em vez de aparecer ao lado deles: com "Editar configuração" ainda
   visível, o operador poderia clicar em editar achando que cancelou a exclusão. */
.detail-heading__actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.detail-heading__danger { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .5rem; max-width: 26rem; padding: .75rem; border: 1px solid var(--panel-danger); border-radius: .4rem; background: rgba(var(--panel-danger-rgb), 0.06); }
.detail-heading__danger span { flex: 1 1 100%; color: var(--panel-muted); font-size: .68rem; line-height: 1.5; }
.detail-heading__danger b { color: var(--panel-danger); }
.panel-button--danger { border: 1px solid var(--panel-danger) !important; background: rgba(var(--panel-danger-rgb), 0.12); color: var(--panel-danger); font-weight: 700; }
.detail-close { width: 2.6rem; height: 2.6rem; border: 1px solid var(--panel-line); border-radius: .4rem; background: transparent; color: var(--panel-muted); font-size: 1.4rem; cursor: pointer; }
.detail-pulse { --health-color: var(--panel-signal); display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 1.25rem 0; padding: .75rem 0; border-block: 1px solid var(--panel-line); color: var(--health-color); font: 600 .65rem/1 Cascadia Mono, monospace; text-transform: uppercase; }
.detail-pulse span { display: flex; align-items: center; gap: .5rem; }
.detail-pulse i { width: .55rem; height: .55rem; border-radius: 50%; background: var(--health-color); box-shadow: 0 0 0 .28rem color-mix(in srgb, var(--health-color) 13%, transparent); }
.detail-pulse small { color: var(--panel-muted); font-size: .57rem; }
.detail-pulse--attention { --health-color: var(--panel-warning); }
.detail-pulse--critical, .detail-pulse--blocked { --health-color: var(--panel-danger); }
.detail-pulse--open { --health-color: var(--panel-info); }
.detail-section { display: grid; gap: 1rem; margin: 1.15rem 0; padding: 1.2rem; border: 1px solid var(--panel-line); border-radius: .55rem; background: color-mix(in srgb, var(--panel-surface) 48%, transparent); }
.detail-section legend { padding: 0 .5rem; color: var(--panel-ink); font: 650 .75rem/1 Cascadia Mono, monospace; }
.detail-section__hint, .panel-field small { margin: -.35rem 0 0; color: var(--panel-muted); font-size: .68rem; }
.limit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.limit-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Módulos contratados: caixas de seleção em grade, no mesmo vocabulário visual dos limites. */
/* ⚠️ O estado fica ACIMA da grade, não abaixo: embaixo ele cai atrás da barra de ações (que é sticky) quando a
   seção está no fim da rolagem — medido numa captura, em que a linha simplesmente não aparecia. */
.module-state { margin: 0 0 .7rem; color: var(--panel-signal); font: 600 .68rem/1.4 Cascadia Mono, monospace; }
.module-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; margin-bottom: .7rem; }
.module-option { min-width: 0; display: flex; align-items: center; gap: .55rem; padding: .6rem .7rem; border: 1px solid var(--panel-line); border-radius: .45rem; background: color-mix(in srgb, var(--panel-surface) 40%, transparent); color: var(--panel-ink); font-size: .72rem; cursor: pointer; }
.module-option:hover { border-color: var(--panel-signal); }
.module-option input { accent-color: var(--panel-signal); flex: 0 0 auto; margin: 0; }
.module-option:has(input:checked) { border-color: var(--panel-signal); background: rgba(var(--panel-signal-rgb), 0.07); }
.module-option span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.status-switch__option { min-width: 0; display: flex; align-items: center; gap: .7rem; padding: .8rem; border: 1px solid var(--panel-line); border-radius: .45rem; background: transparent; color: var(--panel-ink); text-align: left; cursor: pointer; }
.status-switch__option--selected { border-color: var(--panel-signal); background: rgba(var(--panel-signal-rgb), 0.07); }
.status-switch__dot { width: .6rem; height: .6rem; flex: 0 0 auto; border-radius: 50%; }
.status-switch__dot--active { background: var(--panel-signal); }.status-switch__dot--blocked { background: var(--panel-danger); }
.status-switch__option span:last-child { min-width: 0; display: grid; gap: .25rem; }.status-switch__option small { color: var(--panel-muted); font-size: .62rem; }
.detail-actions { position: sticky; bottom: 0; display: flex; justify-content: flex-end; gap: .7rem; margin-top: 1rem; padding: 1rem 0 max(1rem, env(safe-area-inset-bottom, 0px)); background: linear-gradient(transparent, var(--panel-night) 28%); }
.panel-button--tonal { border: 1px solid var(--panel-line) !important; background: color-mix(in srgb, var(--panel-line) 45%, transparent); color: var(--panel-ink); }
.detail-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 2rem 0; border-block: 1px solid var(--panel-line); }
.detail-metrics > div { display: grid; gap: .5rem; padding: 1.15rem; border-left: 1px solid var(--panel-line); }.detail-metrics > div:first-child { border-left: 0; }
.detail-metrics span { color: var(--panel-muted); font-size: .66rem; }.detail-metrics strong { font: 650 1.45rem/1 Bahnschrift, sans-serif; }
.runway-large { --tenant-accent: var(--panel-signal); padding: 1.3rem; border: 1px solid var(--panel-line); border-left: .3rem solid var(--tenant-accent); border-radius: .55rem; background: color-mix(in srgb, var(--panel-surface) 50%, transparent); }
.runway-large--attention { --tenant-accent: var(--panel-warning); }.runway-large--critical, .runway-large--blocked { --tenant-accent: var(--panel-danger); }.runway-large--open { --tenant-accent: var(--panel-info); }
.runway-large > div:first-child, .runway-large__dates { display: flex; justify-content: space-between; gap: 1rem; }.runway-large > div:first-child span, .runway-large__dates { color: var(--panel-muted); font-size: .66rem; }.runway-large > div:first-child strong { color: var(--tenant-accent); font: 600 .67rem/1 Cascadia Mono, monospace; }
.runway-large__track { height: .42rem; margin: 1.4rem 0 .65rem; overflow: visible; }.runway-large__track b { position: absolute; right: 0; top: 50%; width: .7rem; height: .7rem; border: .15rem solid var(--tenant-accent); border-radius: 50%; background: var(--panel-night); transform: translate(25%, -50%); }
.user-console { margin-top: 1rem; padding: 1.3rem; border: 1px solid var(--panel-line); border-radius: .55rem; background: color-mix(in srgb, var(--panel-surface) 50%, transparent); }
.user-console__heading, .user-console__provision, .user-row, .invitation-ticket > div { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.user-console__heading h3 { margin: .15rem 0 0; font: 600 1.15rem/1.1 Bahnschrift, sans-serif; }.user-console__heading > span { color: var(--panel-signal); font: 600 .72rem/1 Cascadia Mono, monospace; }
.user-console__provision { align-items: end; margin: 1rem 0; }.user-console__provision .panel-field { flex: 1; }.user-console__provision .panel-button { flex: 0 0 auto; }
.invitation-ticket { display: grid; gap: .6rem; margin: 1rem 0; padding: .9rem; border: 1px solid rgba(var(--mud-palette-warning-rgb), 0.45); border-left: .25rem solid var(--panel-warning); background: rgba(var(--mud-palette-warning-rgb), 0.07); }.invitation-ticket span, .invitation-ticket small { color: var(--panel-muted); font-size: .65rem; }.invitation-ticket code { overflow-wrap: anywhere; color: var(--panel-warning); font-size: .7rem; }
/* Reset de senha: credencial ativa, não convite pendente — cor de alerta e a senha em destaque legível
   (ela é DITADA por telefone; fonte pequena demais vira tentativa errada, e tentativa errada tem custo
   desde a contenção de força bruta do ERP). */
.invitation-ticket--reset { border-color: rgba(var(--panel-danger-rgb), 0.45); border-left-color: var(--panel-danger); background: rgba(var(--panel-danger-rgb), 0.07); }
.invitation-ticket--reset code { color: var(--panel-danger); font-size: 1rem; letter-spacing: .08em; }
.user-ledger { display: grid; border-top: 1px solid var(--panel-line); }.user-row { padding: .8rem 0; border-bottom: 1px solid var(--panel-line); }.user-row > div { min-width: 0; flex: 1; display: grid; gap: .2rem; }.user-row strong { overflow: hidden; text-overflow: ellipsis; font-size: .78rem; }.user-row small, .user-ledger__empty { color: var(--panel-muted); font-size: .65rem; }.user-row__signal { width: .55rem; height: .55rem; flex: 0 0 auto; border-radius: 50%; background: var(--panel-warning); }.user-row__signal--active { background: var(--panel-signal); }.user-row__badge { margin-left: .4rem; padding: .1rem .35rem; border: 1px solid var(--panel-line); border-radius: .25rem; color: var(--panel-muted); font-size: .55rem; letter-spacing: .06em; text-transform: uppercase; vertical-align: middle; }
.security-note { display: flex; gap: .9rem; margin-top: 1rem; padding: 1rem; border: 1px dashed var(--panel-line); color: var(--panel-muted); }.security-note > span { color: var(--panel-signal); }.security-note p { margin: 0; font-size: .74rem; line-height: 1.55; }.security-note strong { color: var(--panel-ink); }
.detail-empty { min-height: calc(100dvh - 12rem); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; max-width: 28rem; margin: 0 auto; }.detail-empty > span { color: var(--panel-signal); font: 300 4rem/1 Bahnschrift, sans-serif; }.detail-empty > p:last-child { color: var(--panel-muted); line-height: 1.55; }
.panel-inline-loading, .fleet-error { display: flex; align-items: center; gap: .8rem; margin-top: 2rem; color: var(--panel-muted); }.fleet-error { align-items: flex-start; padding: 1rem; border: 1px solid rgba(var(--panel-danger-rgb), 0.35); border-radius: .5rem; background: rgba(var(--panel-danger-rgb), 0.07); }.fleet-error > span { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--panel-danger); color: var(--panel-night); font-weight: 800; }.fleet-error div { flex: 1; }.fleet-error p { margin: .3rem 0 0; color: var(--panel-muted); font-size: .75rem; }

@media (max-width: 1050px) {
    .workspace-main { grid-template-columns: minmax(22rem, .8fr) minmax(27rem, 1.2fr); }
    .detail-metrics { grid-template-columns: repeat(2, 1fr); }.detail-metrics > div:nth-child(3) { border-left: 0; border-top: 1px solid var(--panel-line); }.detail-metrics > div:nth-child(4) { border-top: 1px solid var(--panel-line); }
}
@media (max-width: 820px) {
    .workspace-header { position: sticky; top: 0; z-index: 10; }.workspace-operator > span:nth-child(2) { display: none; }
    .workspace-main { display: block; }.fleet { border-right: 0; }.tenant-detail { border-top: 1px solid var(--panel-line); }
    .detail-empty { min-height: 20rem; }.fleet-summary > div { padding: .8rem; }.tenant-card:hover { transform: none; }
}
@media (max-width: 560px) {
    .workspace-header { min-height: 4rem; padding-inline: .75rem; }.workspace-brand small { display: none; }.workspace-brand .panel-mark { width: 2.3rem; }
    .workspace-main { min-height: calc(100dvh - 4rem); }.fleet, .tenant-detail { padding: 1rem; }.fleet-heading { align-items: flex-end; }.fleet-heading h1 { font-size: 2.5rem; }
    .fleet-heading .panel-button { min-height: 2.6rem; padding-inline: .75rem; font-size: .75rem; }.fleet-summary small { display: none; }.fleet-summary strong { font-size: 1.45rem; }
    .tenant-card__limits { gap: .55rem; justify-content: space-between; }.tenant-card__limits span { display: grid; gap: .15rem; }
    .limit-grid, .limit-grid--two, .status-switch { grid-template-columns: 1fr; }.module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.detail-heading { align-items: flex-start; }.detail-heading .panel-button { font-size: .72rem; }
    .detail-actions { margin-inline: -1rem; padding-inline: 1rem; }.detail-actions .panel-button { flex: 1; }.detail-pulse { align-items: flex-start; flex-direction: column; }
    .user-console__provision { align-items: stretch; flex-direction: column; }.user-console__provision .panel-button { width: 100%; }.user-row { align-items: flex-start; flex-wrap: wrap; }.user-row > div { flex-basis: calc(100% - 2rem); }
}

.panel-boot {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    color: var(--panel-muted);
    font: 600 .75rem/1 Cascadia Mono, monospace;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.panel-boot__pulse {
    width: .65rem;
    height: .65rem;
    border-radius: 50%;
    background: var(--panel-signal);
    box-shadow: 0 0 0 .4rem rgba(var(--panel-signal-rgb), 0.12);
    animation: panel-pulse 1.4s ease-in-out infinite;
}

#blazor-error-ui {
    position: fixed;
    inset: auto 1rem 1rem;
    z-index: 1000;
    padding: 1rem;
    border: 1px solid var(--panel-warning);
    border-radius: .5rem;
    background: var(--panel-surface);
}

@keyframes panel-pulse { 50% { opacity: .35; transform: scale(.8); } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; }
}

.invitation-accept { min-height: 100dvh; display: grid; grid-template-columns: minmax(19rem, .72fr) minmax(31rem, 1.28fr); }
.invitation-accept__rail { min-height: 100%; display: flex; flex-direction: column; justify-content: space-between; gap: 3rem; padding: clamp(1.5rem, 4vw, 4.5rem); border-right: 1px solid var(--panel-line); background: linear-gradient(155deg, color-mix(in srgb, var(--panel-surface) 98%, transparent), color-mix(in srgb, var(--panel-night) 82%, transparent)); }
.invitation-accept__rail > div { display: flex; align-items: center; gap: 1rem; }
.invitation-accept__rail ol { display: grid; gap: 0; margin: auto 0; padding: 0; list-style: none; }
.invitation-step { position: relative; min-height: 5.3rem; display: grid; grid-template-columns: 2.5rem 1fr; gap: .8rem; color: var(--panel-muted); }
.invitation-step::after { content: ""; position: absolute; top: 1.7rem; bottom: 0; left: .75rem; width: 1px; background: var(--panel-line); }
.invitation-step:last-child::after { display: none; }
.invitation-step b { width: 1.5rem; height: 1.5rem; display: grid; place-items: center; border: 1px solid var(--panel-line); border-radius: 50%; z-index: 1; background: var(--panel-surface); font: 600 .55rem/1 Cascadia Mono, monospace; }
.invitation-step span { padding-top: .25rem; font-size: .8rem; }
.invitation-step--done b, .invitation-step--active b { border-color: var(--panel-signal); color: var(--panel-signal); }
.invitation-step--active span { color: var(--panel-ink); font-weight: 650; }
.invitation-accept__boundary { max-width: 27rem; margin: 0; padding-top: 1rem; border-top: 1px solid var(--panel-line); color: var(--panel-muted); font-size: .72rem; line-height: 1.55; }
.invitation-seal { width: min(calc(100% - 3rem), 43rem); align-self: center; justify-self: center; padding: clamp(2rem, 5vw, 4.5rem); border: 1px solid var(--panel-line); border-top: .3rem solid var(--panel-signal); border-radius: .15rem .15rem .8rem .8rem; background: color-mix(in srgb, var(--panel-surface) 76%, transparent); box-shadow: 0 2rem 7rem rgb(0 0 0 / 28%); }
.invitation-seal h1 { max-width: 11ch; margin: 1rem 0 1.2rem; font: 600 clamp(2.8rem, 6vw, 5.2rem)/.88 Bahnschrift, "Arial Narrow", sans-serif; letter-spacing: -.05em; }
.invitation-seal__lead { max-width: 35rem; margin: 0 0 2rem; color: var(--panel-muted); line-height: 1.6; }
.invitation-seal form { display: grid; gap: 1rem; }
.invitation-policy { display: flex; flex-wrap: wrap; gap: .45rem; margin: .15rem 0 .6rem; }
.invitation-policy span { padding: .35rem .5rem; border: 1px solid var(--panel-line); border-radius: 99rem; color: var(--panel-muted); font: 550 .58rem/1 Cascadia Mono, monospace; }
.invitation-seal__footer { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--panel-line); color: var(--panel-muted); font: 500 .62rem/1.4 Cascadia Mono, monospace; }
.invitation-seal__footer span { margin-right: .45rem; color: var(--panel-signal); font-size: .5rem; }
.invitation-seal__success > span { width: 3.6rem; height: 3.6rem; display: grid; place-items: center; margin-bottom: 2rem; border: 1px solid var(--panel-signal); border-radius: 50%; background: rgba(var(--panel-signal-rgb), 0.1); color: var(--panel-signal); font-size: 1.4rem; }
.invitation-seal__success > p:not(.panel-eyebrow) { max-width: 34rem; color: var(--panel-muted); line-height: 1.65; }
.erp-card { display: grid; gap: .9rem; margin-top: 2.25rem; padding: clamp(1.25rem, 3vw, 1.9rem); border: 1px solid var(--panel-line); border-left: .25rem solid var(--panel-signal); border-radius: .15rem .8rem .8rem .15rem; background: linear-gradient(135deg, rgba(var(--panel-signal-rgb), 0.08), color-mix(in srgb, var(--panel-surface) 55%, transparent)); box-shadow: 0 1rem 3rem rgb(0 0 0 / 22%); }
.erp-card h2 { margin: 0; font: 600 clamp(1.5rem, 3vw, 2rem)/1 Bahnschrift, "Arial Narrow", sans-serif; letter-spacing: -.03em; }
.erp-card__address { display: inline-flex; align-items: center; gap: .55rem; justify-self: start; padding: .55rem .85rem; border: 1px dashed rgba(var(--panel-signal-rgb), 0.45); border-radius: 99rem; background: rgba(var(--panel-signal-rgb), 0.07); color: var(--panel-signal); font: 600 .82rem/1 Cascadia Mono, monospace; letter-spacing: .02em; overflow-wrap: anywhere; text-decoration: none; }
.erp-card__address:hover, .erp-card__address:focus-visible { border-style: solid; background: rgba(var(--panel-signal-rgb), 0.14); }
.erp-card__address span { font-size: .7rem; }
.erp-card__steps { display: grid; gap: .5rem; margin: 0; padding-left: 1.1rem; color: var(--panel-muted); font-size: .82rem; line-height: 1.55; }
.erp-card__steps b { color: var(--panel-ink); font-weight: 650; }
.erp-card__note { margin: 0; color: var(--panel-muted); font: 500 .62rem/1.5 Cascadia Mono, monospace; }

@media (max-width: 800px) {
    .invitation-accept { display: block; padding: 1rem; }
    .invitation-accept__rail { min-height: auto; display: block; padding: 0 0 1rem; border: 0; background: transparent; }
    .invitation-accept__rail ol, .invitation-accept__boundary { display: none; }
    .invitation-seal { width: 100%; padding: 1.5rem; }
    .invitation-seal h1 { font-size: clamp(2.6rem, 13vw, 4rem); }
}

/* Os dois gestos da fila de provisionamento lado a lado. */
.user-console__provision-actions { display: flex; align-items: center; gap: .9rem; }

/* §7.13 — a faixa de PLATAFORMA: operação que vale para o servidor, não para um cliente.
   ⚠️ Ela fica FORA da grade de duas colunas do .workspace-main de propósito: dentro dela, a atualização das
   tabelas de referência apareceria na coluna de um tenant e se leria como sendo dele. */
.workspace-platform { padding: 0 clamp(1.25rem, 2.5vw, 2.5rem) clamp(1.25rem, 2.5vw, 2.5rem); border-top: 1px solid var(--panel-line); }
/* 🩸 A CLASSE `.panel-card` NÃO TINHA REGRA NENHUMA até 2026-09-04 — só `__head` e `__hint` existiam.
   Vinte blocos do painel a usavam e ⛔ nenhum deles era um cartão: eles flutuavam sobre o fundo da página,
   sem borda, sem superfície e sem respiro, encostando na grade acima e na aba ao lado. A captura de
   2026-09-04 pegou os dois lugares em que isso mais dói (a ficha do contador colada na grade, e a eyebrow
   "MULTIEMPRESA" invadindo a faixa das abas).

   🔑 §2 do `sis`: o CARD é a unidade — fundo `surface`, borda fina, raio 12–16px, ⛔ nunca cor chapada
   "para dar destaque". */
.panel-card {
    min-width: 0;
    margin: 1.5rem 0;
    padding: clamp(1rem, 2vw, 1.5rem);
    border: 1px solid var(--panel-line);
    border-radius: .8rem;
    background: color-mix(in srgb, var(--panel-surface) 62%, transparent);
}

/* ⚠️ O primeiro cartão de uma aba ⛔ não precisa da margem de cima: a faixa das abas já é a separação, e a
   margem ali empurra o conteúdo para longe do controle que o trouxe. */
.mud-tabs-panels > .mud-tabpanel > .panel-card:first-child,
.mud-tabs-panels > .mud-tabpanel > section.panel-card:first-child { margin-top: 1.25rem; }

.workspace-platform .panel-card { padding-top: clamp(1.25rem, 2.5vw, 2rem); }
.panel-card__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
/* ⚠️ Era clamp(1.3rem … 1.75rem) e competia com o <h1> da PÁGINA — dois títulos do mesmo peso, e o olho
   não sabia qual era o assunto. O cartão é subordinado; o tamanho dele diz isso. */
.panel-card__head h3 { margin: .3rem 0 0; font: 600 1.15rem/1.2 Bahnschrift, "Arial Narrow", sans-serif; letter-spacing: -.01em; }
.panel-card__hint { max-width: 74ch; margin: .9rem 0 1.1rem; color: var(--panel-muted); font-size: .74rem; line-height: 1.6; }
.panel-card__hint b { color: var(--panel-ink); }
.workspace-platform .panel-alert { margin-bottom: .9rem; }
/* O sinal vermelho da falha: o .user-row__signal só tinha "aguardando" e "ativo". */
.user-row__signal--blocked { background: var(--panel-danger); }
.panel-link-button--danger { color: var(--panel-danger); }
/* A linha só quebra QUANDO está confirmando: o aviso ocupa a largura toda e os dois botões descem
   para a linha de baixo, em vez de espremerem o login que o operador precisa ler. O par fica JUNTO à
   direita (como as ações das outras linhas) — espalhados pelo `space-between` herdado, "Confirmar" e
   "Cancelar" ficavam em pontas opostas e não se liam como uma escolha só. E o fundo avermelhado diz de
   qual linha é a pergunta, que é o ponto inteiro da confirmação. */
.user-row:has(.user-row__confirm) { flex-wrap: wrap; justify-content: flex-end; background: rgba(var(--panel-danger-rgb), 0.06); }
.user-row__confirm { flex: 1 1 100%; color: var(--panel-muted); font-size: .65rem; line-height: 1.5; }
.user-row__confirm b { color: var(--panel-danger); }
/* O aviso que o operador PRECISA ler: o e-mail não saiu, então entregar a senha virou tarefa dele. Cor
   de atenção, ⛔ não de erro — o reset FUNCIONOU; o que falhou foi só o aviso. */
.user-row__warn { color: var(--panel-warning); }
/* As ações da linha do USUÁRIO formam UM grupo (2026-09-24): com o "Enviar código" ao lado de "Gerar senha
   provisória" eram cinco ações soltas, e o `flex-wrap` do `.user-row` quebrava UMA delas sozinha para a linha
   de baixo, longe das irmãs. Em grupo, o que quebra é o grupo inteiro — a mesma régua dos contadores. */
.user-row__acoes { display: flex; flex: 1 1 auto; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: .35rem 1rem; }

/* 🩸 A CAPTURA DE 2026-09-04, na aba "Contadores": SEIS ações de texto em fila na mesma linha, todas do
   mesmo peso — o operador tinha de LER para achar a que queria. É o defeito §3 do `sis` na forma de link
   ("oito botões azuis sólidos idênticos é o mesmo que nenhum destaque"), e ele custava mais que atenção: as
   ações comiam ~560px e espremiam a IDENTIDADE do contador em quatro linhas de ~200px, que é justamente o
   dado que diz de quem se está falando.

   🔑 A cura tem duas metades, e as duas são necessárias:
   1. a identidade ganha PISO de largura e ⛔ deixa de ser a parte que cede;
   2. as ações formam um grupo próprio que QUEBRA para a linha de baixo em vez de espremer o vizinho. */
.user-row { flex-wrap: wrap; }
.user-row > div { flex: 1 1 22rem; }
/* 🩸 `flex: 0 1 auto` aqui foi uma REGRESSÃO medida na captura seguinte: o grupo encolheu até a largura do
   item mais largo e os seis viraram uma COLUNA de 250px de altura por contador — pior que a fila original.
   ⇒ `1 1 auto`: ele CRESCE para caber na linha e, quando não cabe, o `flex-wrap` do `.user-row` joga o
   grupo INTEIRO para a linha de baixo, onde a largura toda o mantém numa fila só. */
/* 🩸 O SELETOR PRECISA DO `>`, e isso custou uma captura: `.user-row > div` (linha 352) tem
   especificidade (0,1,1) e vence `.user-row__actions` (0,1,0) — ele impunha `display: grid` de uma coluna
   ao grupo, e os seis gestos empilhavam em 250px de altura por contador. A folha SERVIA a regra certa e o
   navegador a descartava por precedência: `curl` no CSS mostrava o `flex` que a tela não tinha. */
/* 🩸 O seletor de papel era um `<select>` cru com `style=` inline (`display:block; max-width:22rem`).
   ⚠️ O `MudSelect` já é bloco, mas ⛔ NÃO herda o teto de largura: sem esta regra ele estica pela linha
   inteira do `.user-row`, e um combo de três opções fica do tamanho do nome do usuário ao lado — o mesmo
   defeito de proporção que a §6.1 do `sis` descreve para campo numérico gigante. */
.user-row__papel { max-width: 22rem; margin-top: .25rem; }

.user-row > .user-row__actions { flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .25rem .9rem; }
/* A ação DESTRUTIVA se separa das demais por uma linha, ⛔ não só pela cor: mirar entre gestos de
   consequências opostas é o que a §3 chama de custo operacional. */
.user-row__actions .panel-link-button--danger { margin-left: .35rem; padding-left: .9rem; border-left: 1px solid var(--panel-line); }
/* Mesa de operações: o trilho superior mantém o operador orientado conforme novos cadastros entram. */
.workspace-nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin: 0 2.25rem 1.5rem;
    padding: 1px;
    border: 1px solid rgba(var(--panel-signal-rgb), 0.16);
    border-radius: 16px;
    overflow: hidden;
    background: color-mix(in srgb, var(--panel-night) 72%, transparent);
}
.workspace-nav__item {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .1rem .75rem;
    padding: 1rem 1.15rem;
    border: 0;
    color: var(--panel-muted);
    text-align: left;
    background: color-mix(in srgb, var(--panel-night) 90%, transparent);
    cursor: pointer;
}
.workspace-nav__item > span { grid-row: 1 / 3; color: var(--panel-faint); font: 700 .68rem/1.2 monospace; }
.workspace-nav__item strong { color: var(--panel-ink); font-size: .92rem; letter-spacing: .02em; }
.workspace-nav__item small { font-size: .72rem; }
.workspace-nav__item--active { background: linear-gradient(110deg, color-mix(in srgb, var(--panel-signal) 18%, var(--panel-surface)), color-mix(in srgb, var(--panel-signal) 6%, var(--panel-surface))); }
.workspace-nav__item--active::after { content: ""; position: absolute; inset: auto 1rem 0; height: 2px; background: var(--panel-signal); box-shadow: 0 0 16px var(--panel-signal); }
.workspace-nav__item--active > span, .workspace-nav__item--active strong { color: var(--panel-signal-soft); }
.workspace-platform--focused { min-height: calc(100vh - 190px); }

.platform-console { max-width: 1180px; margin: 0 auto 2rem; padding: 2rem; border: 1px solid rgba(var(--panel-signal-rgb), 0.15); border-radius: 20px; background: linear-gradient(145deg, color-mix(in srgb, var(--panel-night) 98%, transparent), color-mix(in srgb, var(--panel-night) 98%, transparent)); }
.platform-console__heading { display: flex; justify-content: space-between; gap: 2rem; align-items: flex-start; margin-bottom: 1.6rem; }
.platform-console__heading h1 { margin: .15rem 0 .45rem; color: var(--panel-ink); }
.platform-console__heading p:last-child { max-width: 650px; margin: 0; color: var(--panel-muted); }
.platform-console__seal { padding: .45rem .7rem; border: 1px solid rgba(var(--panel-signal-rgb), 0.35); border-radius: 999px; color: var(--panel-signal-soft); font: 700 .68rem/1 monospace; text-transform: uppercase; letter-spacing: .08em; }
.credential-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr); gap: 1.5rem; }
.credential-form, .credential-register { padding: 1.4rem; border: 1px solid var(--panel-line); border-radius: 14px; background: color-mix(in srgb, var(--panel-night) 45%, transparent); }
.credential-form__coordinates { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin-bottom: 1rem; }
.credential-form label { display: grid; gap: .4rem; color: var(--panel-muted); font-size: .76rem; font-weight: 700; }
.credential-form select, .credential-form input[type=password] { width: 100%; padding: .72rem .8rem; border: 1px solid var(--panel-line); border-radius: 8px; color: var(--panel-ink); background: var(--panel-night); }
.credential-remove { grid-template-columns: auto 1fr !important; align-items: center; margin: .85rem 0; font-weight: 500 !important; }
.credential-form__note, .credential-empty { color: var(--panel-faint); font-size: .76rem; }
.credential-register__heading { display: flex; justify-content: space-between; margin-bottom: .75rem; color: var(--panel-muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }
.credential-register__heading strong { color: var(--panel-signal-soft); }
.credential-row { width: 100%; display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: .75rem; padding: .9rem .25rem; border: 0; border-bottom: 1px solid var(--panel-line); color: var(--panel-ink); text-align: left; background: transparent; cursor: pointer; }
.credential-row span { display: grid; gap: .2rem; }
.credential-row small { color: var(--panel-faint); }
.credential-row__edit { color: var(--panel-signal); font-size: .72rem; }
@media (max-width: 800px) {
    .workspace-nav { margin-inline: 1rem; grid-template-columns: 1fr; }
    .credential-layout, .credential-form__coordinates { grid-template-columns: 1fr; }
    .platform-console { margin-inline: 1rem; padding: 1.25rem; }
    .platform-console__heading { display: block; }
    .platform-console__seal { display: inline-block; margin-top: 1rem; }
}

/* Casca MudBlazor (2026-08) — só o que a AppBar precisa e o MudBlazor não dá de graça: a marca é um link
   dentro de um Typo.h6, e sem isto herdaria a cor azul padrão de âncora por cima do Color.Inherit da barra. */
.app-bar-brand { color: inherit; text-decoration: none; font-weight: 650; }
.tenant-grid .mud-table-container { background: transparent; box-shadow: none; }
/* §7.18 — a grade de bancos por trilho. Três colunas: o banco e os dois interruptores.
   ⚠️ A coluna do banco é `minmax(0, 1fr)`, ⛔ não `1fr`: com nome longo (as cooperativas têm), `1fr` puro
   deixa a coluna crescer além da grade e empurra os interruptores para fora do cartão. */
/* ⚠️ O `max-width` NÃO é enfeite, e só a CAPTURA o pegou: sem ele a coluna do nome comia a largura toda do
   cartão e os dois interruptores iam parar a ~1400px do banco a que pertencem, num monitor de 1600. Linha
   larga com alvo no extremo direito é onde o operador marca o banco errado. */
.bancos-grade { display: grid; max-width: 34rem; margin-top: .75rem; border-top: 1px solid var(--panel-line); }
.bancos-grade__head, .bancos-grade__row {
    display: grid; grid-template-columns: minmax(0, 1fr) 7rem 7rem; gap: .5rem;
    align-items: center; padding: .5rem 0; border-bottom: 1px solid var(--panel-line);
}
.bancos-grade__head { color: var(--panel-muted); font-size: .6rem; letter-spacing: .06em; text-transform: uppercase; }
.bancos-grade__row > span { min-width: 0; display: grid; gap: .1rem; }
.bancos-grade__row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .78rem; }
.bancos-grade__row small { color: var(--panel-muted); font-size: .6rem; }
/* O número do provedor fica visível de propósito: é ele que viaja no canal, e é por ele que o suporte
   confere um chamado contra o log do ERP. */
.bancos-grade__switch { display: flex; justify-content: center; }
/* 🩸 Só a captura pegou: o botão primário ficava idêntico habilitado e desabilitado. Aqui isso é caro —
   ele nasce DESABILITADO (nada foi escolhido ainda) e parecia clicável, então o operador clicaria e leria
   a ausência de efeito como tela quebrada. ⚠️ Vale para TODO `panel-button`, ⛔ não só o desta grade: a
   ausência de estilo era geral, e restringi-la a esta tela deixaria a próxima com o mesmo defeito. */
.panel-button:disabled { opacity: .45; cursor: not-allowed; }
/* 🩸 A MESMA correção, na outra família de botão. Ela nasceu de uma captura (2026-09-02) que mostrou o
   `panel-button` desabilitado com cara de clicável; o `panel-link-button` ficou de fora e tem o mesmo
   defeito — "Revogar" e "Aceitar" NASCEM desabilitados enquanto a empresa não é conhecida. */
.panel-link-button:disabled { opacity: .45; cursor: not-allowed; }
.bancos-grade__switch input { width: 1.1rem; height: 1.1rem; cursor: pointer; }

@media (max-width: 760px) {
    /* No celular os rótulos das colunas somem, então cada interruptor carrega o próprio (aria-label já os
       nomeia). Empilhar mantendo a grade de 3 colunas espremeria o nome do banco a duas letras. */
    .bancos-grade__head { display: none; }
    .bancos-grade__row { grid-template-columns: minmax(0, 1fr) 3.5rem 3.5rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════
   AS PRIMITIVAS DE TELA (2026-09-04) — molde do design system do `sis`.

   🔑 Elas existem para que o padrão seja O QUE ACONTECE QUANDO NINGUÉM FAZ NADA. O `sis` mediu o custo da
   alternativa: dos 160 `MudDatePicker` dele, só 17 lembravam do `Editable` — "a convenção já falhou, com
   número". Aqui a forma mora no componente, ⛔ não na disciplina de quem copia o vizinho.

   ⛔ ZERO hexadecimal daqui para baixo, como no resto da folha: toda cor vem de `--panel-*`, que é apelido
   de `--mud-palette-*`, que vem do `PainelTheme`.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── Cabeçalho de página ───────────────────────────────────────────────────────────────────────────── */
.painel-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: .9rem;
    margin-bottom: 1.5rem;
}

.painel-page-header__icon {
    flex: 0 0 auto;
    width: 2.75rem;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border: 1px solid var(--panel-line);
    border-radius: .6rem;
    /* O quadrado TINGIDO: a primária diluída, ⛔ nunca chapada — §2 do `sis`. */
    background: rgba(var(--panel-signal-rgb), 0.12);
    color: var(--panel-signal);
}

/* `min-width: 0` é o que faz `text-overflow` funcionar em vez de o título empurrar as ações para fora. */
.painel-page-header__title { flex: 1 1 18rem; min-width: 0; }

.painel-page-header__title h1 {
    margin: .2rem 0 0;
    font-family: Bahnschrift, "Arial Narrow", sans-serif;
    font-size: clamp(1.9rem, 4vw, 3.2rem);
    font-stretch: condensed;
    font-weight: 600;
    letter-spacing: -.035em;
    /* ⚠️ 1.05, ⛔ não .95: com line-height menor que 1 o glifo do título invade a caixa do vizinho —
       exatamente o defeito que a captura de 2026-09-02 pegou entre o título e a busca. */
    line-height: 1.05;
}

.painel-page-header__title h3 { margin: .2rem 0 0; font-size: 1.05rem; letter-spacing: .01em; }
.painel-page-header__subtitle { margin: .35rem 0 0; color: var(--panel-muted); font-size: .82rem; line-height: 1.5; }

/* `margin-left: auto` empurra as ações para a direita SEM um spacer vazio no markup; com `flex-wrap`
   acima, em tela estreita elas caem para a linha de baixo em vez de espremer o título. */
.painel-page-header__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-left: auto; }

/* ── Barra de consulta ─────────────────────────────────────────────────────────────────────────────── */
.painel-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1rem;
}

.painel-toolbar__search {
    flex: 1 1 20rem;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem .85rem;
    border: 1px solid var(--panel-line);
    border-radius: .5rem;
    background: color-mix(in srgb, var(--panel-night) 70%, transparent);
    color: var(--panel-muted);
}

.painel-toolbar__search:focus-within { border-color: var(--panel-signal); box-shadow: 0 0 0 .2rem rgba(var(--panel-signal-rgb), 0.14); }
.painel-toolbar__search input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: var(--panel-ink); }
.painel-toolbar__search kbd { padding: .1rem .45rem; border: 1px solid var(--panel-line); border-radius: .3rem; color: var(--panel-muted); font: 600 .72rem/1.6 Cascadia Mono, monospace; }
.painel-toolbar__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-left: auto; }

/* ── Lookup (campo com lupa) ───────────────────────────────────────────────────────────────────────── */
/* 🔒 ZERO hexadecimal — os `--panel-*` são apelidos dos `--mud-palette-*` publicados pelo PainelTheme.
   ⚠️ Container tonal é `rgba(var(--token), 0.45)`, ⛔ NUNCA `rgb(var(--token) / 45%)`: o MudBlazor publica
   os `-rgb` separados por VÍRGULA, e a forma com barra exige espaço — o navegador descarta a declaração
   em silêncio. */
.painel-lookup { min-width: 0; display: grid; gap: .3rem; margin-bottom: .9rem; }
.painel-lookup__label { color: var(--panel-muted); font-size: .72rem; font-weight: 650; }
.painel-lookup__control {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .2rem .3rem .2rem .85rem;
    border: 1px solid var(--panel-line);
    border-radius: .5rem;
    background: color-mix(in srgb, var(--panel-night) 70%, transparent);
}

.painel-lookup__control:focus-within { border-color: var(--panel-signal); box-shadow: 0 0 0 .2rem rgba(var(--panel-signal-rgb), 0.14); }
/* ⚠️ `readonly`, ⛔ não `disabled` — ver o PainelLookupField.razor: desabilitado o campo sai da ordem de
   tabulação e o leitor de tela deixa de anunciar o que está escolhido. O cursor diz que não se digita. */
.painel-lookup__value { flex: 1; min-width: 0; padding: .45rem 0; border: 0; outline: none; background: transparent; color: var(--panel-ink); font: inherit; cursor: default; }
.painel-lookup__value::placeholder { color: var(--panel-muted); }
.painel-lookup__filter { flex: 1 1 auto; margin-bottom: .9rem; }

/* ── Empresas da concessão de contador ─────────────────────────────────────────────────────────────── */
/* Mesma forma do `module-grid`: a caixa de marcação ganha do combo quando tudo cabe à vista. */
.empresa-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; margin-bottom: .7rem; }
.empresa-option { min-width: 0; display: flex; align-items: center; gap: .6rem; padding: .6rem .7rem; border: 1px solid var(--panel-line); border-radius: .45rem; background: color-mix(in srgb, var(--panel-surface) 40%, transparent); color: var(--panel-ink); font-size: .72rem; cursor: pointer; }
.empresa-option:hover { border-color: var(--panel-signal); }
.empresa-option input { accent-color: var(--panel-signal); flex: 0 0 auto; margin: 0; }
.empresa-option:has(input:checked) { border-color: var(--panel-signal); background: rgba(var(--panel-signal-rgb), 0.07); }
.empresa-option > span { min-width: 0; display: grid; gap: .15rem; }
.empresa-option strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; }
.empresa-option small { color: var(--panel-muted); font-size: .66rem; }
/* 🔒 A TRAVADA continua legível — ela é informação ("já tem acesso"), ⛔ não ruído a apagar. */
.empresa-option--travada { cursor: not-allowed; border-style: dashed; opacity: .78; }
.empresa-option--travada:hover { border-color: var(--panel-line); }

/* 🩸 O empilhamento mora AQUI, e ⛔ não junto das outras grades lá em cima — cicatriz de PRECEDÊNCIA de
   CSS, a mesma de 2026-09-04 (`.user-row > div` vencendo `.user-row__actions`): o bloco de 560px do topo do
   arquivo vem ANTES desta declaração base, e regra de mesma especificidade declarada depois VENCE. A
   captura de 2026-09-05 a 430px mostrou o resultado — duas colunas espremidas, com a razão social virando
   "Mercado Auror…". */
@media (max-width: 700px) {
    .empresa-grid { grid-template-columns: 1fr; }
    /* Sem a disputa por largura, o nome inteiro cabe — as reticências ali eram do aperto, ⛔ não do dado. */
    .empresa-option strong { overflow: visible; text-overflow: clip; white-space: normal; }
}

/* A identidade FIXA do modo "acrescentar empresa" — leitura, ⛔ não campo. */
.identidade-fixa { margin: 0 0 .3rem; display: grid; gap: .2rem; }
.identidade-fixa small { color: var(--panel-muted); font-size: .68rem; }

/* O bloco de conceder acesso vira COLUNA quando carrega o lookup + as empresas — os três empilham. */
.user-console__provision--lookup { flex-direction: column; align-items: stretch; }
.user-console__provision--lookup .panel-button { align-self: flex-end; }

/* ── Grade ─────────────────────────────────────────────────────────────────────────────────────────── */
/* §4: separador OU zebra, ⛔ nunca os dois. O fundo uniforme é o que devolve destaque a quem carrega
   ESTADO — o hover e a linha selecionada. */
.painel-grid.mud-table { border: 1px solid var(--panel-line); border-radius: .6rem; background: var(--panel-surface); overflow: hidden; }
.painel-grid .mud-table-head th,
.painel-grid .mud-table-head .mud-table-cell {
    border-bottom: 1px solid var(--panel-line);
    background: color-mix(in srgb, var(--panel-night) 45%, transparent);
    color: var(--panel-muted);
    font: 700 .72rem/1.4 Cascadia Mono, monospace;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.painel-grid .mud-table-body .mud-table-cell { border-bottom: 1px solid color-mix(in srgb, var(--panel-line) 55%, transparent); color: var(--panel-ink); }
.painel-grid .mud-table-body .mud-table-row:last-child .mud-table-cell { border-bottom: 0; }
.painel-grid .mud-table-body .mud-table-row:hover .mud-table-cell { background: rgba(var(--panel-signal-rgb), 0.07); }
/* Números à direita — a coluna de contagem alinhada à esquerda vira "só mais uma coluna" (§4). */
.painel-grid .painel-cell-numero { text-align: right; font-variant-numeric: tabular-nums; }
.painel-grid__empty { margin: 0; padding: 1.6rem; color: var(--panel-muted); text-align: center; }

/* ── Ações da linha ────────────────────────────────────────────────────────────────────────────────── */
/* A FORMA é comum; só a COR distingue — ver o comentário do componente. */
.painel-row-actions { display: flex; gap: .35rem; justify-content: flex-end; }
.painel-row-action.mud-icon-button {
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--panel-line);
    border-radius: .4rem;
    color: var(--panel-muted);
}
.painel-row-action.mud-icon-button:hover:not(:disabled) { border-color: var(--panel-signal); background: rgba(var(--panel-signal-rgb), 0.12); color: var(--panel-signal); }
.painel-row-action--open.mud-icon-button { color: var(--panel-signal); }
.painel-row-action--danger.mud-icon-button { color: var(--panel-danger); }
/* 🔑 O ÂMBAR das ações que MUDAM estado sem destruir — resetar senha, revogar. §3 do `sis`: "se uma ação
   altera valor, dê a ela um tonal de OUTRA cor; verde igual ao 'confirmar' faz duas coisas diferentes com o
   mesmo sinal". ⛔ Aqui o par é revogar (âmbar, tira UM cliente) × excluir (vermelho, alcança TODOS) — se
   os dois fossem vermelhos, a única diferença entre um corte reversível e o fim da identidade seria o
   tooltip. */
/* A mensagem da confirmação destrutiva — ela é o único aviso entre o clique e o efeito, então tem largura
   de LEITURA (não da caixa) e o destaque do que está em jogo. */
.painel-confirm__mensagem { max-width: 52ch; margin: 0; color: var(--panel-muted); font-size: .86rem; line-height: 1.6; }
.painel-confirm__mensagem b { color: var(--panel-danger); }

.painel-row-action--warning.mud-icon-button { color: var(--panel-warning); }
.painel-row-action--warning.mud-icon-button:hover:not(:disabled) { border-color: var(--panel-warning); background: rgba(var(--mud-palette-warning-rgb), 0.12); color: var(--panel-warning); }
.painel-row-action--danger.mud-icon-button:hover:not(:disabled) { border-color: var(--panel-danger); background: rgba(var(--panel-danger-rgb), 0.12); color: var(--panel-danger); }
/* 🩸 O `:disabled` do botão nasceu de uma captura (2026-09-02): um botão que nasce desabilitado e não
   PARECE desabilitado é um clique que não acontece e que o operador não entende. */
/* 🩸 ERA `.mud-disabled`, e a regra estava MORTA. Medido em 2026-09-04: o MudIconButton desabilitado
   emite o ATRIBUTO `disabled`, ⛔ não a classe `mud-disabled` — então o ícone parado ficava com a mesma
   opacidade do clicável. É exatamente o defeito que a leva anterior corrigiu no `panel-button` ("o botão,
   que nasce desabilitado, parecia clicável"), sobrevivendo na primitiva vizinha.
   ⚠️ E o `:not(.mud-disabled)` dos `:hover` acima era pior que inútil: ele SEMPRE casava, então o realce de
   hover pintava o botão que não responde ao clique. Os quatro seletores passaram a `:disabled`. */
.painel-row-action.mud-icon-button:disabled { opacity: .35; cursor: not-allowed; }

/* ── Grupo de campos (§6.2) ────────────────────────────────────────────────────────────────────────── */
/* A legenda na BORDA é comportamento NATIVO do par `<fieldset>`/`<legend>` — é exatamente o que o
   MudBlazor usa no `Outlined` (o `.mud-input-outlined-border` dele É um fieldset com legend). Por isso o
   grupo fica IDÊNTICO ao campo ao lado, em vez de parecido. ⛔ Um `div` com título dentro mantém a borda e
   perde o corte, sem quebrar mais nada — é por isso que o portão afirma a TAG. */
.painel-field-group {
    min-width: 0;
    margin: 0;
    padding: .25rem .9rem .9rem;
    border: 1px solid var(--panel-line);
    border-radius: .45rem;
}
.painel-field-group > legend { padding: 0 .35rem; color: var(--panel-muted); font-size: .75rem; font-weight: 650; }
.painel-field-group--inline { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }

/* ── Colunas da frota (2026-09-04) ─────────────────────────────────────────────────────────────────── */
/* A identidade do cliente numa CÉLULA, ⛔ não num cartão: o monograma continua ancorando o olho, mas a
   linha agora se alinha com as vizinhas — é isso que torna a comparação entre clientes possível. */
.tenant-identity { min-width: 0; display: flex; align-items: center; gap: .65rem; }
.tenant-identity__monogram {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
    border: 1px solid var(--panel-line);
    border-radius: .35rem;
    background: rgba(var(--panel-signal-rgb), 0.1);
    color: var(--panel-signal);
    font: 650 .68rem/1 Cascadia Mono, monospace;
}
.tenant-identity div { min-width: 0; display: grid; }
.tenant-identity strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; }
.tenant-identity small { color: var(--panel-muted); font-size: .7rem; }

/* O chip de situação numa coluna própria: a cor dele é SEMÂNTICA, ⛔ não a do prazo — "ativo" e "vence em
   5 dias" são duas perguntas, e pintá-las com o mesmo sinal faria uma responder pela outra. */
.tenant-status--active { --tenant-accent: var(--panel-signal); }
.tenant-status--blocked { --tenant-accent: var(--panel-danger); }
/* 🩸 O chip de PENDENTE não existia, e a falta ⛔ não era inofensiva: `--tenant-accent` ficava indefinida,
   e `color: var(--tenant-accent)` sem fallback descarta a declaração — o texto do chip herdava a cor do
   corpo, num contorno colorido pela mesma variável ausente. A concessão pendente é o estado MAIS COMUM da
   área do contador (ela nasce assim), então era justamente o caso comum que saía sem cor. */
.tenant-status--pending { --tenant-accent: var(--panel-warning); }

/* O travessão de célula sem dado — cinza, para ⛔ não competir com o que tem conteúdo. */
.painel-cell-vazio { color: var(--panel-faint); }

/* A régua na coluna: o rótulo à direita, tabular, para os prazos se alinharem entre linhas. */
.painel-grid .lease-runway { min-width: 9rem; }
.painel-grid .lease-runway__label { font-variant-numeric: tabular-nums; }
.lease-runway--attention { --tenant-accent: var(--panel-warning); }
.lease-runway--critical, .lease-runway--blocked { --tenant-accent: var(--panel-danger); }
.lease-runway--open { --tenant-accent: var(--panel-info); }
.lease-runway--stable { --tenant-accent: var(--panel-signal); }

.painel-cell-acoes { width: 1%; white-space: nowrap; }
/* 🩸 AS DUAS REGRAS ABAIXO SAÍRAM DA CAPTURA, e nenhum teste as teria pego. Com OITO ícones na coluna de
   ações, o `white-space: nowrap` dela ganha a disputa do layout automático da tabela: na grade de contadores
   do cliente a coluna do NOME foi espremida a quase zero (sobrava um `n.br` solto na borda) e o CRC quebrou
   em TRÊS linhas. ⇒ a coluna de identidade pede piso de largura, e código curto ⛔ não quebra. */
.painel-cell-identidade { min-width: 14rem; }

/* 🩸 A EMPRESA da concessão CEDE LARGURA, e a cicatriz é a mesma de 2026-09-04: a grade da aba do cliente
   pede mais do que o cartão de ~780px tem, e o excedente ⛔ não some graciosamente — a captura de
   2026-09-05 mostrou a razão social quebrando em CINCO linhas, e com a coluna capada ela empurrou a coluna
   de AÇÕES para fora da borda (dois dos sete ícones visíveis).
   ⇒ ela ⛔ não é coluna: desce para a célula da IDENTIDADE, no molde do CRC, com teto e reticências. O nome
   inteiro ⛔ não se perde — vira o `title`. */
.painel-cell-empresa { display: block; max-width: 18rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--panel-muted); }
/* A célula de situação empilha o chip e o que o ERP respondeu — largura de LEITURA, não da coluna. */
.painel-cell-situacao { display: grid; gap: .25rem; justify-items: start; max-width: 22rem; }
.painel-cell-situacao small { color: var(--panel-muted); font-size: .68rem; line-height: 1.4; }

/* O e-mail é longo e ⛔ não pode empurrar o vizinho para fora — reticências, como o nome logo acima. */
.tenant-identity small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.painel-grid__empty p { margin: .2rem 0; }
.painel-grid__empty p:first-child { color: var(--panel-ink); font-weight: 650; }

/* ── A grade em tela estreita ──────────────────────────────────────────────────────────────────────── */
/* 🩸 A captura de 2026-09-04 a 430px: o MudDataGrid empilha cada célula com o rótulo ao lado (bom), mas
   ⛔ NÃO separa um registro do seguinte — "Clientes 2" e "Nome Bruno Fiscal" ficavam colados, e a lista
   virava uma coluna contínua de pares em que não dá para dizer onde um contador termina.

   🔑 A separação é do REGISTRO, não da célula: uma borda mais forte no topo de cada linha de tabela a
   partir da segunda. ⚠️ Só abaixo do breakpoint, porque no desktop a linha JÁ é a unidade visual. */
@media (max-width: 599px) {
    .painel-grid .mud-table-body tr + tr {
        border-top: 2px solid var(--panel-line);
    }
    .painel-grid .mud-table-body tr { display: block; padding: .35rem 0; }
    /* ⚠️ Empilhada, a linha tem a largura do cartão inteiro — o teto de 13rem cortaria à toa. */
    .painel-cell-empresa { max-width: none; white-space: normal; }
}

/* ── A trilha de auditoria (issue #111) ───────────────────────────────────────────────────────────── */
/* 🔒 ZERO hexadecimal, como o resto da folha: os `--panel-*` são apelidos dos `--mud-palette-*` que o
   `MudThemeProvider` publica a partir do `Layout/PainelTheme.cs`. */

/* ⚠️ `auto-fit` com mínimo em rem, e ⛔ não colunas fixas: os quatro filtros cabem lado a lado no
   desktop e quebram sozinhos no celular — a alternativa (media query por quantidade de filtros)
   envelheceria no dia em que o quinto filtro entrasse. */
/* 🩸 O que se alinha é a CAIXA, ⛔ nunca a borda de baixo (issue #156). Esta regra já foi
   `align-items: end`, e o resultado eram as cinco caixas em cinco alturas diferentes: os filtros ⛔ não
   têm a mesma altura total — o lookup tem rótulo ACIMA da caixa e dica abaixo, o "Até" tem texto de apoio
   abaixo, o "De" e a "Categoria" não têm nada, e a caixa de marcar não é caixa de campo nenhuma. Alinhar
   pelo fim empilha essas diferenças TODAS em cima da caixa, que é a única parte que o olho usa para ler a
   linha como uma linha.

   🔑 A conta tem UM número só, e ele é NOSSO: a linha do rótulo do lookup (uma linha de texto + o gap
   dele). O rótulo do MudBlazor flutua DENTRO da caixa ⇒ o campo dele começa uma linha de rótulo mais
   abaixo. ⚠️ O `margin-top: 8px` que o MudBlazor põe no `.mud-input-outlined-with-label` é zerado aqui de
   propósito: ele existe para o rótulo flutuante não ser cortado por quem está acima, e aqui quem está
   acima é a linha de rótulo inteira. Zerá-lo é o que evita ter de repetir na folha um número que é
   deles — e que muda quando a versão do MudBlazor mudar, sem ninguém ver. */
.audit-filters {
    /* Uma linha de rótulo: o texto do `painel-lookup__label` (line-height travada logo abaixo) + o gap
       interno do lookup. */
    --audit-rotulo: calc(1.05rem + .3rem);
    /* A caixa do campo do MudBlazor — o lookup se iguala a ela, ⛔ não o contrário. */
    --audit-caixa: 3.5rem;

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    align-items: start;
    gap: .9rem 1.1rem;
    margin: 1.4rem 0 .6rem;
}

/* O lookup já traz a própria margem inferior; aqui ele é um filtro em linha com os vizinhos. */
.audit-filters .painel-lookup { margin-bottom: 0; }

/* ⚠️ `line-height` travada: sem ela a altura da linha do rótulo depende da fonte herdada, e a conta do
   `--audit-rotulo` passa a errar por um ou dois pixels — desalinhamento pequeno demais para alguém
   chamar de defeito e grande o bastante para a linha parecer torta. */
.audit-filters > .painel-lookup > .painel-lookup__label { line-height: 1.05rem; }
.audit-filters > .painel-lookup > .painel-lookup__control { min-height: var(--audit-caixa); }

.audit-filters > .mud-select,
.audit-filters > .mud-picker,
.audit-filters > .audit-toggle { margin-top: var(--audit-rotulo); }

.audit-filters .mud-input-outlined-with-label { margin-top: 0; }

/* §6 do `sis`: o totalizador ROTULA o escopo — ele é o do FILTRO, ⛔ nunca o da página. */
.audit-total { margin: .8rem 0 .2rem; color: var(--panel-muted); font-size: .72rem; }
.audit-total strong { color: var(--panel-ink); font: 650 .95rem/1 Cascadia Mono, monospace; }

/* ⚠️ Monoespaçada e sem quebra: a coluna do instante é a que o olho percorre de cima a baixo, e uma
   data que quebra em duas linhas destrói a comparação entre eventos vizinhos. */
.audit-when { color: var(--panel-muted); font: 600 .72rem/1.2 Cascadia Mono, monospace; white-space: nowrap; }

.audit-action { min-width: 0; display: grid; gap: .15rem; }
.audit-action small { color: var(--panel-muted); font-size: .65rem; }

.audit-target { min-width: 0; display: grid; gap: .15rem; }
.audit-target small { overflow: hidden; color: var(--panel-muted); font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; }

/* 🔑 O evento SEM operador e o evento de SERVIDOR são dados, ⛔ não ausências — por isso eles têm chip
   próprio em vez de um traço. Cores diferentes de propósito: um diz "ninguém da SoftConn fez isto", o
   outro diz "isto não é de cliente nenhum", e confundi-los apagaria a distinção mais cara da tela. */
.audit-no-operator, .audit-platform {
    padding: .22rem .45rem;
    border: 1px solid var(--panel-line);
    border-radius: 99rem;
    font: 600 .57rem/1 Cascadia Mono, monospace;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.audit-no-operator { border-color: color-mix(in srgb, var(--panel-warning) 35%, var(--panel-line)); color: var(--panel-warning); }
.audit-platform { border-color: color-mix(in srgb, var(--panel-info) 35%, var(--panel-line)); color: var(--panel-info); }

.audit-pager { display: flex; justify-content: flex-end; gap: .6rem; margin-top: .9rem; }

/* ⚠️ Caixa nativa, como os interruptores do §7.18: o que o portão de primitivas proíbe é o `<select>`,
   que o SISTEMA OPERACIONAL desenha inteiro (seta, altura, popover). Uma caixa de marcar é um quadrado,
   e a folha a alcança. */
.audit-toggle { display: flex; align-items: center; gap: .5rem; min-height: 2.6rem; color: var(--panel-ink); font-size: .78rem; cursor: pointer; }
/* Na linha de filtros ela ocupa a MESMA faixa vertical das caixas — assim o texto fica no meio delas. */
.audit-filters > .audit-toggle { min-height: var(--audit-caixa); }
.audit-toggle input { width: 1.1rem; height: 1.1rem; cursor: pointer; }
.audit-toggle input:disabled { cursor: not-allowed; }
.audit-toggle input:disabled + span { color: var(--panel-muted); }