/* Estilos de aplicação mínimos: tema, tipografia e componentes ficam em css/radzen-overrides.css e css/radzen-structural.css. */
h1:focus {
    outline: none;
}

:root {
    /* Caixa em que o mapa do documento imprimível é desenhado (ver `ocorrenciaMap.js`,
       §11.7). O corpo impresso é o A4 (210mm) menos as margens de `@page` (2 × 12mm) =
       186mm ≈ 703px; descontado o padding do cartão-folha (2 × 1,5rem = 48px) sobram
       ~655px. 40rem (640px) fica abaixo desse teto com margem de segurança, então a
       caixa nunca estoura a folha. O módulo lê ESTES valores em `beforeprint` para
       redimensionar o canvas do MapLibre antes da captura — mantenha-os em sincronia
       com a altura/tamanho esperados do documento. */
    --pg-print-map-inline-size: 40rem;
    --pg-print-map-block-size: 24rem;
}

.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."
    }

/* ===== Realce de confirmação de campo (preenchimento correto) =====
   A mesma declaração de `.valid.modified` em `css/radzen-structural.css`: borda (outline) verde
   do padrão de preenchimento correto, sem texto nem ícone. Os campos de endereço do cadastro de
   chamado usam a classe para confirmar que o endereço foi encontrado — a legenda de conferência
   que existia no campo de número deixou de ser exibida.

   A regra é GLOBAL de propósito: o `input` é renderizado pelo `RadzenAutoComplete` e o isolamento
   de CSS do Blazor não alcança elementos de um componente filho. O `outline` acompanha o raio da
   caixa e não desloca o layout. */
.mun-field-confirmed > .rz-autocomplete-input {
    outline: var(--border-width-regular) solid var(--semantic-status-success-border);
}

/* ===== Módulo Programação (Zeladoria) =====
   Estilos de apresentação das telas da Central de Programação do Figma
   (node 4501:37472). Consomem apenas tokens semânticos e não alteram as regras
   compartilhadas de Ocorrência; as classes têm prefixo "pg-". */

/* Selos de situação (Legenda/Status). */
.pg-tag.rz-badge {
    --rz-badge-padding: 0.25rem 0.5rem;
    --rz-badge-font-size: var(--typescale-label-medium-size);
    border: var(--border-width-thin) solid transparent;
    border-radius: var(--border-radius-full);
    font-weight: 400;
    line-height: 1.15;
}
.pg-tag.rz-badge.pg-tag--draft { background-color: var(--semantic-background-secondary); border-color: var(--semantic-border-subtle); color: var(--semantic-content-secondary); }
.pg-tag.rz-badge.pg-tag--scheduled { background-color: var(--semantic-status-info-container); border-color: var(--semantic-status-info-border); color: var(--semantic-status-info-text); }
.pg-tag.rz-badge.pg-tag--running { background-color: var(--semantic-status-warning-container); border-color: var(--semantic-status-warning-border); color: var(--semantic-status-warning-text); }
.pg-tag.rz-badge.pg-tag--executed { background-color: var(--semantic-status-success-container); border-color: var(--semantic-status-success-border); color: var(--semantic-status-success-text); }
.pg-tag.rz-badge.pg-tag--revised { background-color: var(--semantic-status-critical-container); border-color: var(--semantic-status-critical-border); color: var(--semantic-status-critical-text); }
.pg-tag.rz-badge.pg-tag--solved { background-color: var(--semantic-status-success-container); border-color: var(--semantic-status-success-border); color: var(--semantic-status-success-text); }
.pg-tag.rz-badge.pg-tag--finished { background-color: var(--semantic-data-categorical-purple-container); border-color: var(--semantic-data-categorical-purple-flag); color: var(--semantic-data-categorical-purple-text); }
.pg-tag.rz-badge.pg-tag--canceled { background-color: var(--semantic-background-secondary); border-color: var(--semantic-border-subtle); color: var(--semantic-content-muted); }

/* Linhas de ocorrência reutilizadas na fila, criação, detalhe e análise. */
.pg-ocorrencia-list { min-width: 0; }
/* Criação e detalhe da programação: no máximo SEIS ocorrências visíveis; a partir da sétima
   a própria lista rola na vertical. O piso de altura do cartão (`--pg-ocorrencia-min-row`)
   garante que seis linhas caibam exatamente no limite — sem ele, cartões curtos deixariam
   passar a sétima. `max-block-size` e `overflow` convivem com as utilitárias `.rz-*` do
   RadzenStack, que impõem apenas `display`/`flex-direction` (C2/C4). */
.pg-ocorrencia-list--scroll {
    max-block-size: calc(6 * var(--pg-ocorrencia-min-row, 3.5rem) + 5 * 0.25rem);
    overflow-y: auto;
    overflow-x: hidden;
    padding-inline-end: 0.25rem;
}
.pg-ocorrencia-list--scroll > .pg-ocorrencia-card {
    min-block-size: var(--pg-ocorrencia-min-row, 3.5rem);
    flex: none;
}
.pg-ocorrencia-card {
    min-width: 0;
    padding: 0.25rem;
    border: var(--border-width-thin) solid var(--semantic-border-subtle);
    border-radius: var(--border-radius-sm);
    background-color: var(--semantic-background-primary);
}
.pg-ocorrencia-card-main { min-width: 0; flex: 1 1 auto; }
.pg-ocorrencia-text { min-width: 0; }
/* O TÍTULO segue em uma linha com reticências (é "Bairro - Categoria"); o ENDEREÇO quebra
   em vez de ser cortado, porque ele agora carrega o número do imóvel no fim ("…, n° 123") e
   o `ellipsis` esconderia justamente o dado que identifica o local. */
.pg-ocorrencia-title { color: var(--semantic-content-default); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-ocorrencia-address { color: var(--semantic-content-muted); white-space: normal; overflow-wrap: anywhere; }
.pg-ocorrencia-icon { width: 1.5rem; height: 1.5rem; object-fit: contain; border-radius: 10px; flex: none; }
.pg-ocorrencia-actions { flex: none; flex-wrap: nowrap; }
.pg-ocorrencia-radio.is-selected { color: var(--semantic-action-brand-ghost-on-container); }
.pg-icon-button.rz-button { box-sizing: border-box; width: 1.875rem; height: 1.875rem; flex: none; }
/* O glifo do Icon-Button é desenhado pelo `::after` (mask). Sem um contêiner
   posicionado, o `inset: 1px` do pseudo-elemento resolve contra o próprio botão
   (30px) e o símbolo sai com 26,7px em vez dos 12px do Icon-Button — o
   `.rz-button-box` mede 14px. O painel de validação já faz o mesmo em
   `.occurrence-row-action`; sem esta regra o ícone de documento da lista
   contextual fica desproporcional ao design. */
.pg-icon-button.rz-button .rz-button-box { position: relative; }
.pg-icon-button--brand .rz-button-box img { opacity: 0; }
.pg-icon-button--brand .rz-button-box::after {
    content: "";
    position: absolute;
    inset: 1px;
    background-color: var(--semantic-action-brand-ghost-on-container);
    mask: url("/assets/icons/icon-fi-rs-document.svg") center / contain no-repeat;
}

/* Fila da Central. */
.pg-fila { padding: 8px 12px 0; display: flex; flex-direction: column; min-height: 0; }
/* Figma "Fila — aguardando programação": o Dropdown mede 177x32 (11rem) no desenho,
   mas o valor selecionado ("Preservação Pública — Equipe GNK") é mais largo que isso.
   A largura passa a ACOMPANHAR o texto: parte de 11rem (o do desenho), cresce até 24rem
   quando o rótulo é longo e encolhe quando o quadro aperta. `max-width` + ellipsis no
   rótulo garantem que o texto nunca vaze do controle. */
.pg-fila .pg-fila-team.rz-dropdown { flex: 0 1 auto; width: auto; min-width: 11rem; max-width: 24rem; }
/* O rótulo do Radzen nasce com `min-width: auto`/`max-width: none`, então ele não encolhe
   abaixo do texto e pintava fora do controle (o `.rz-dropdown` recorta, mas sem
   reticências). O teto relativo reserva o espaço dos ícones do trigger e do botão de
   limpar, deixando a reticência aparecer dentro da área visível. */
.pg-fila .pg-fila-team .rz-dropdown-label {
    min-width: 0;
    
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pg-fila .occurrence-validation-grid {
    flex: 1 1 auto;
    min-height: 0;
}

.pg-fila-footer {
    padding-block: 0.625rem;
    border-top: var(--border-width-thin) solid var(--semantic-border-subtle);
    position: sticky;
    bottom: 0;
    z-index: 1;
    background-color: var(--semantic-background-primary);
}
/* Figma "Rodapé — contagem e paginação": o total fica SOB a tabela; a barra de ações
   não o exibe (o desenho mostra Filtrar · Equipe compatível · Selecionar distribuídos). */
.pg-fila-sticky-header {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: var(--semantic-background-secondary);
}

.pg-fila-count {
    flex: none;
    color: var(--semantic-content-muted);
    font-size: var(--typescale-label-medium-size);
    font-weight: 500;
    line-height: var(--typescale-label-medium-line-height);
}
/* Figma "Selecionando": a marca é um checkbox na PRIMEIRA coluna, com "selecionar
   todas" no cabeçalho, e a linha marcada recebe a superfície atenuada da marca
   (`--semantic-brand-muted` = brand-50 = o #fdf2ef do quadro). Os botões de
   localizar/detalhar continuam na última coluna — não são substituídos pela marca. */
.pg-fila .pg-fila-select { display: flex; justify-content: center; }
.pg-fila .occurrence-validation-grid thead th:has(.pg-fila-select) { text-align: center; }
/* `.rz-grid-table` entra no seletor porque o próprio projeto zera o fundo das células
   listradas em `radzen-structural.css` (`.rz-data-grid .rz-grid-table-striped > tbody >
   tr:nth-child(odd|even) > td` = 0,3,3): sem a classe extra a regra empata e perde. */
.pg-fila .occurrence-validation-grid .rz-grid-table tbody tr:has(.pg-fila-select[data-selected="true"]) > td {
    background-color: var(--semantic-brand-muted);
}
.occurrence-group-select.is-selected { color: var(--semantic-action-brand-ghost-on-container); }

/* Agenda semanal. */
.pg-agenda { min-width: 0; }
.pg-agenda-cell {
    box-sizing: border-box;
    min-height: 3.25rem;
    padding: 0.5rem 0.625rem;
    gap: 0.125rem;
    align-items: stretch;
    border-block-start: var(--border-width-thin) solid var(--semantic-border-subtle);
    border-inline-start: var(--border-width-thin) solid var(--semantic-border-subtle);
}
.pg-agenda-head-label,
.pg-agenda-head-hours { color: var(--semantic-content-muted); }
.pg-agenda-head-day { color: var(--semantic-content-default); font-weight: 600; }
.pg-agenda-cell--team { justify-content: center; }
/* Linha de equipe e célula de dia do quadro medem 99 (6,1875rem). A densidade compacta
   (criação e revisão) zera esse piso logo abaixo: lá a linha é dimensionada pelo cartão.
   Não há token de controle para esta altura — mesma classe de exceção já registrada para
   o cabeçalho de 3,25rem. */
.pg-agenda-cell--team,
.pg-agenda-cell--slot { min-height: 6.1875rem; }
.pg-agenda-team-name { color: var(--semantic-content-default); }
.pg-agenda-team-areas { color: var(--semantic-content-muted); }
.pg-agenda-cell--slot { gap: 0.25rem; }
/* ── Densidade COMPACTA (criação e revisão) ───────────────────────────────────
   MESMA grade da agenda do gestor — mesma moldura, mesmos títulos, mesmos cartões em barra
   contínua atravessando dias — com o bloco do cartão, os recuos e os pisos reduzidos. As
   variáveis vivem na GRADE (é lá que `.pg-agenda-grid--timeline` as declara), por isso a
   sobrescrita precisa de (0,2,0). A altura do conjunto passa a ser a do conteúdo: nenhuma
   regra aqui impõe altura ao bloco, então quem manda é a grade (Radzen adaptivity +
   `min-height` derivado das pistas). */
.pg-agenda--compact .pg-agenda-grid--timeline {
    --pg-card-block-size: 2.5rem;
    --pg-lane-gap: 0.1875rem;
    --pg-lane-pad: 0.25rem;
}
.pg-agenda--compact .pg-agenda-cell { min-height: 0; padding: 0.25rem 0.5rem; }
.pg-agenda--compact .pg-agenda-cell--team,
.pg-agenda--compact .pg-agenda-cell--slot { min-height: 0; }
.pg-agenda--compact .pg-agenda-head > .pg-agenda-cell { padding-block: 0.25rem; }
.pg-agenda--compact .pg-agenda-plan.rz-card { min-height: 0; padding: 0.125rem 0.375rem; }
/* A agenda de apoio dos formulários cabe no espaço VISÍVEL em vez de empurrar "Dados da
   Programação" para fora da tela: o teto é relativo à viewport (`dvh`), como nos shells de
   diálogo do módulo, e a grade rola por dentro com a linha de títulos fixa. Nada é medido em
   pixel — a altura continua sendo a do conteúdo até o teto. */
.pg-agenda--compact .pg-agenda-grid--timeline {
    max-block-size: 60dvh;
    overflow: auto;
}
.pg-agenda-plan.rz-card {
    padding: 0.25rem 0.5rem;
    min-width: 0;
    border: var(--border-width-thin) solid var(--semantic-border-subtle);
    border-radius: var(--border-radius-sm);
    background-color: var(--semantic-background-primary);
    box-shadow: none;
    cursor: pointer;
}
.pg-agenda-plan.rz-card:hover { background-color: var(--semantic-background-secondary); }
.pg-agenda-plan.rz-card:focus-visible { outline: 2px solid var(--semantic-action-brand-shared-focus-ring); outline-offset: 1px; }
.pg-agenda-plan-body { width: 100%; min-width: 0; }
/* Cartão de programação: 64px de altura e padding 10/10/6/6 no quadro. Escopado em `--full`
   de propósito: `.pg-agenda--compact .pg-agenda-plan` tem a MESMA especificidade de
   `.pg-agenda-plan.rz-card` e perde por ordem, então mexer na base mudaria também o cartão
   compacto (criação/revisão), onde a célula tem 42px e um piso de 64 estouraria (C9). */
.pg-agenda--full .pg-agenda-plan.rz-card {
    min-height: 4rem;
    padding: 0.625rem 0.625rem 0.375rem 0.375rem;
}
.pg-agenda-plan-code { color: var(--semantic-content-default); font-weight: 600; }
.pg-agenda-plan-count,
.pg-agenda-plan-hours { color: var(--semantic-content-muted); }
.pg-agenda-plan.pg-tag--scheduled { border-inline-start: 3px solid var(--semantic-status-info-flag); }
.pg-agenda-plan.pg-tag--running { border-inline-start: 3px solid var(--semantic-status-warning-flag); }
.pg-agenda-plan.pg-tag--executed { border-inline-start: 3px solid var(--semantic-status-success-flag); }
.pg-agenda-plan.pg-tag--finished { border-inline-start: 3px solid var(--semantic-data-categorical-purple-flag); }
.pg-agenda-legend { padding-block: 0.1875rem; }
.pg-agenda-legend-title { color: var(--semantic-content-muted); }
/* Chip de legenda: 26px de altura e padding 8/8/4/4 no quadro. Classe PRÓPRIA, separada do
   `.pg-tag` (selo de status usado nas linhas e nas listas) para não regredir aquelas
   superfícies (C9). Os tons abaixo replicam os mesmos tokens semânticos do selo, para
   legenda e linhas concordarem de cor. */
.pg-agenda-legend-chip.rz-chip {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    block-size: 1.625rem;
    padding: 0.5rem 0.5rem 0.25rem 0.25rem;
    border: var(--border-width-thin) solid transparent;
}
/* Tons da legenda. O `RadzenChip` emite `rz-chip`, `rz-chip-base` e `rz-shade-default`, e
   `.rz-chip-base.rz-shade-default` (0,2,0) define o fundo por `var(--rz-base)`: as regras
   precisam das três classes para vencer por especificidade (0,3,0), sem `!important`. */
.pg-agenda-legend-chip.rz-chip.pg-agenda-legend-chip--draft     { background-color: var(--semantic-background-secondary);     border-color: var(--semantic-border-subtle);          color: var(--semantic-content-secondary); }
.pg-agenda-legend-chip.rz-chip.pg-agenda-legend-chip--scheduled { background-color: var(--semantic-status-info-container);    border-color: var(--semantic-status-info-border);     color: var(--semantic-status-info-text); }
.pg-agenda-legend-chip.rz-chip.pg-agenda-legend-chip--running   { background-color: var(--semantic-status-warning-container); border-color: var(--semantic-status-warning-border);  color: var(--semantic-status-warning-text); }
.pg-agenda-legend-chip.rz-chip.pg-agenda-legend-chip--executed  { background-color: var(--semantic-status-success-container); border-color: var(--semantic-status-success-border);  color: var(--semantic-status-success-text); }
.pg-agenda-empty { justify-content: center; }

/* ── Variante COMPLETA: grade com camada temporal ─────────────────────────────
   O eixo do tempo corre HORIZONTAL dentro de cada dia e a equipe é a linha — o
   inverso de `RadzenScheduler`/`RadzenGantt`, cujo eixo de hora é vertical e cuja
   semana é a semana cultural. Por isso a grade é composta com CSS Grid comum:
   `RadzenStack` e `RadzenRow` emitem `rz-display-flex`, que o Radzen declara com
   `!important`, e um `display: grid` de projeto sobre eles seria ineficaz. Só
   existem `div`s; o conteúdo continua Radzen (`RadzenCard`/`RadzenText`).
   Decisão e alternativas: Develop_Plans/Agenda_alternative.md. */
.pg-agenda-grid--timeline {
    /* Proporção do quadro (187 de equipe e 212 por dia): `fr`, nunca px — a
       proporção acompanha a largura disponível (C3). */
    --pg-team-col: 187fr;
    --pg-day-col: 212fr;
    --pg-lane-gap: 0.25rem;
    /* Recuo vertical mínimo entre o cartão e a borda da linha (Figma: a célula de
       `Estado=Estresse` — 4213:51249 — tem padding 8/7/8/7 e gap 4 entre os cartões
       empilhados). Sem ele a linha crescia exatamente o bloco das pistas e o cartão
       de cima colava na borda superior. */
    --pg-lane-pad: 0.5rem;
    --pg-card-block-size: 4rem;
    border: var(--border-width-thin) solid var(--semantic-border-subtle);
    border-radius: var(--border-radius-md);
    overflow: hidden;
}

/* Cabeçalho e linha do corpo compartilham a MESMA lista de trilhas, derivada de
   `--pg-day-count` (dias efetivamente desenhados, gravados pelo componente). O
   `minmax(0, …)` é obrigatório: com mínimo automático o texto da coluna de equipe
   infla o trilho e cabeçalho e linha divergem de largura. */
.pg-agenda-head,
.pg-agenda-row {
    display: grid;
    grid-template-columns: minmax(0, var(--pg-team-col)) repeat(var(--pg-day-count, 5), minmax(0, var(--pg-day-col)));
    align-items: stretch;
}
/* A linha de títulos acompanha a rolagem da GRADE (o `.pg-agenda-grid--timeline` é o
   scroller da agenda no desktop). z-index acima da camada temporal: a pista é 1 e o
   cartão 2, então 3 mantém o cabeçalho por cima mesmo quando um cartão encosta na borda
   superior. Só a variante completa usa `.pg-agenda-head`, por construção. */
.pg-agenda-head {
    position: sticky;
    inset-block-start: 0;
    z-index: 3;
    background-color: var(--semantic-background-secondary);
}

/* Mesma linha explícita para todas as células: a pista temporal é um item
   sobreposto (colunas 2..-1) e, sem isso, a colocação automática das células de
   dia encontraria o trilho ocupado e abriria uma segunda linha. */
.pg-agenda-head > .pg-agenda-cell,
.pg-agenda-row > .pg-agenda-cell { grid-row: 1; }

/* A moldura desenha o contorno externo; as células desenham apenas os separadores
   internos (borda de topo e de início), como na variante compacta. */
.pg-agenda-head > .pg-agenda-cell:first-child,
.pg-agenda-row > .pg-agenda-cell:first-child { border-inline-start: 0; }
/* A linha de títulos mede 52 px no quadro (`min-height` da célula). O conteúdo tem
   duas linhas de texto; com o padding 8/8 da célula ele passaria a 56 px, então a
   faixa de títulos usa o mesmo recorte vertical da variante compacta e o
   `min-height` volta a mandar na altura. */
.pg-agenda-head > .pg-agenda-cell { border-block-start: 0; padding-block: 0.25rem; }

.pg-agenda-grid--timeline .pg-agenda-cell--team {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Uma linha sem conflito mantém os 99 px da célula; com sobreposição ela cresce
   exatamente o necessário para mostrar todas as pistas. O valor derivado é
   declarado NA linha, onde `--pg-lanes` é escrito pelo componente — uma variável
   derivada no contêiner seria calculada com o `--pg-lanes` do contêiner (1) e
   herdada já resolvida. */
.pg-agenda-row {
    --pg-lanes-block-size: calc(var(--pg-lanes, 1) * var(--pg-card-block-size) + (var(--pg-lanes, 1) - 1) * var(--pg-lane-gap) + 2 * var(--pg-lane-pad));
    min-height: var(--pg-lanes-block-size);
}

/* A pista ocupa as colunas de DIA, começando depois da coluna de equipe: é a caixa
   de coordenadas única de onde saem `--pg-left`/`--pg-width` (percentuais do quadro
   de cinco dias, vindos de ProgramacaoAgendaLayout). É camada de pintura, não de
   interação — o ponteiro atravessa até as células e só os cartões o recebem. */
.pg-agenda-track {
    position: relative;
    z-index: 1;
    grid-row: 1;
    grid-column: 2 / -1;
    pointer-events: none;
}
.pg-agenda-track .pg-agenda-plan {
    position: absolute;
    box-sizing: border-box;
    inset-block-start: calc(50% - var(--pg-lanes-block-size) / 2 + var(--pg-lane-pad) + var(--pg-lane, 0) * (var(--pg-card-block-size) + var(--pg-lane-gap)));
    inset-inline-start: var(--pg-left, 0%);
    inline-size: var(--pg-width, 100%);
    z-index: 2;
    pointer-events: auto;
}

/* Linha sem equipe cadastrada: a mensagem ocupa a grade inteira. */
.pg-agenda-row--empty > .pg-agenda-cell { grid-column: 1 / -1; }

/* Detalhe, criação e listas. */
.pg-detail,
.pg-criacao,
.pg-lista,
.pg-agenda-page { padding: 0.75rem 1rem; min-width: 0; }

/* ── Criação de programação: moldura com rodapé sempre visível ────────────────────
   O corpo do shell (`.rz-body`) tem altura definida e `overflow: auto`; a página ocupa
   essa altura e só o MIOLO rola. Assim "Salvar Rascunho"/"Liberar para Execução" ficam na
   base da viewport em qualquer altura de tela, e não no fim de um documento longo.
   `height`/`min-height`/`flex` não disputam as utilitárias `.rz-*`, que impõem
   `display`/`flex-direction` com `!important` (C2/C4): o RadzenStack já é coluna.
   Estas regras moram aqui, e não no `ProgramacaoCriacao.razor.css`, porque o CSS isolado
   de Blazor não aplica o escopo ao elemento de um componente Radzen. */
.pg-criacao {
    height: 100%;
    min-height: 0;
}
.pg-criacao-scroll {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    overflow-y: auto;
    overflow-x: hidden;
}
/* Faixa de aviso (com o botão de dados administrativos) e rodapé são fixos. */
.pg-criacao-hint,
.pg-criacao-footer {
    flex: none;
}
/* O detalhe recua 12px nas laterais: no quadro (Figma 4501:38054) a navegação de abas e
   o conteúdo começam em x=12 do content slot de 1267px e a linha de tempo do Histórico
   ocupa 1243px. Criação e listas mantêm o recuo de 16px (C9). */
.pg-detail { padding-inline: 0.75rem; }
/* A navegação local é flush sob o cabeçalho (Figma "Abas da Programação": nav
   1267x44 encostada na borda do content slot) e o padding do quadro pertence ao
   corpo — 18/20 na agenda, 8/12 na Central de Ocorrências. */
.pg-agenda-page { padding: 0; }
.pg-agenda-body { padding: 1.125rem 1.25rem; }
.pg-central-content { min-width: 0; padding: 0.5rem 0.75rem; }

/* As páginas de trabalho do módulo ocupam a área inteira abaixo do cabeçalho, sem o
   padding de conteúdo do RadzenLayout: no Figma o content slot é 1267x897 encostado
   no cabeçalho. A Central de Programação já obtém isso pela classe `occurrence-page`.
   A Central de Ocorrências entra com `mod-zeladoria` no seletor porque
   `.rz-body:has(> .mod-zeladoria:not(.occurrence-page))` (0,3,0, no layer compilado)
   declara `padding-right: 1.75rem` e vencia esta regra (0,2,0) — o content slot ficava
   com 28px de padding residual (~1239px em vez dos 1267px do quadro).
   `pg-os` NÃO entra nesta lista: o editor de impressão foi dimensionado para que as
   folhas do documento meçam 421px (o valor do quadro). Zerar o padding alarga o editor
   para 1255,3px e leva as folhas a 451,3px — pior que o estado atual (medido em
   2026-10-26). A divergência residual é a coluna de configuração (296,8/276,8 contra
   346 do quadro), registrada em `verification-report.md`. */
.rz-body:has(> .pg-agenda-page),
.rz-body:has(> .mod-zeladoria.pg-central-ocorrencias),
.rz-body:has(> .pg-lista),
.rz-body:has(> .pg-criacao),
.rz-body:has(> .pg-detail),
/* Novo chamado: a página carrega o padding do quadro (12/16) por conta própria, então o
   padding do corpo (36px) somava ao intervalo entre o título e o primeiro cartão. */
.rz-body:has(> .pg-nc-page) {
    padding: 0;
}
.pg-detail-summary,
.pg-detail-footer,
.pg-criacao-footer {
    padding-block: 0.75rem;
}
/* No detalhe SÓ o divisor inferior do cabeçalho do shell desenha linha horizontal: o bloco
   do selo/dados começa logo abaixo dele e as abas seguem sem separador (Figma 4501:37939:
   selo em y=21, navegação em y=78, conteúdo em y=138). A criação da programação tem outro
   quadro e mantém a própria borda (C9). */
.pg-detail-summary { border-block-end: 0; }
/* Ações do plano: presas ao rodapé VISÍVEL da página (mesmo contrato de `.zl-actions`) e
   alinhadas à DIREITA, como no quadro. `position: sticky` não é `display` nem
   `flex-direction`, então convive com as utilitárias `.rz-*` do RadzenStack (C2/C4); o
   alinhamento vem do próprio parâmetro `JustifyContent` do componente, não de uma regra
   que perderia para o `!important`. */
.pg-detail-footer {
    border-block-start: 0;
    position: sticky;
    inset-block-end: 0;
    z-index: 1;
    margin-block-start: auto;
    background-color: var(--semantic-background-primary);
}
.pg-criacao-footer { border-block-end: 0; border-block-start: var(--border-width-thin) solid var(--semantic-border-subtle); }

/* Visão administrativa da criação: "Dados Administrativos" e "Informações da Programação"
   fecham na MESMA altura. As colunas já esticam (o RadzenRow emite `rz-align-items-normal`,
   que vale como `stretch`), então falta a coluna ser coluna FLEX e o cartão ocupar a altura
   dela — o `.rz-card` é `display: block` e ficava na altura do conteúdo (335 px contra 463).
   O seletor usa `[class^="rz-col"]`: nesta versão do Radzen a coluna emite
   `rz-col-12 rz-col-lg-6` e NÃO emite a classe base `rz-col`. As regras vivem AQUI porque o
   CSS isolado do Blazor não aplica escopo à raiz de um componente Radzen (`.pg-admin-cards`
   é a raiz do RadzenRow e `.rz-card` a do RadzenCard). */
.pg-admin-cards > [class^="rz-col"] { display: flex; flex-direction: column; min-height: 0; }
.pg-admin-cards > [class^="rz-col"] > .rz-card { display: flex; flex-direction: column; flex: 1 1 auto; }
.pg-admin-cards > [class^="rz-col"] > .rz-card > .pg-admin-card-body { flex: 1 1 auto; min-height: 0; }

/* "Informações da Programação" (visão administrativa da criação): os três campos dividem a
   altura do cartão e cada caixa de texto cresce com o seu grupo, preenchendo o bloco sem
   sobra no rodapé. `flex: 1 1 auto` (basis auto) preserva a altura mínima de 4 linhas quando
   não há espaço extra (layout empilhado em telas estreitas). */
.pg-admin-info-field { flex: 1 1 auto; }
.pg-admin-info-field .rz-textarea { flex: 1 1 auto; }

/* Indicador mínimo da atualização enxuta de situação no detalhe da programação (após o
   registro de execução): um anel pequeno ao lado do título das ocorrências, no lugar de
   trocar a página inteira pelo estado de carregamento completo. */
.pg-status-refresh .rz-progressbar-circular { width: 1.125rem; height: 1.125rem; }
.pg-status-refresh .rz-progressbar-circular > svg { width: 100%; height: 100%; }
.pg-detail-code { color: var(--semantic-content-default); }
.pg-detail-period,
.pg-detail-created { color: var(--semantic-content-muted); }
.pg-section { padding-block: 0.25rem; }
.pg-field-label { color: var(--semantic-content-secondary); font-weight: 500; }
.pg-card { border: var(--border-width-thin) solid var(--semantic-border-subtle); }
.pg-card-description { color: var(--semantic-content-muted); }
.pg-mini-map { height: 14rem; border: var(--border-width-thin) solid var(--semantic-border-subtle); border-radius: var(--border-radius-md); overflow: hidden; }
/* A moldura é do wrapper (borda + raio + clip); o mapa preenche a caixa sem
   desenhar uma segunda borda por dentro (mesmo contrato de `.occurrence-detail-map`). */
.pg-mini-map .ocorrencia-map { height: 100%; width: 100%; border: 0; border-radius: 0; }
.pg-mini-map .ocorrencia-map-host { height: 100%; }
/* Miniaturas das evidências Antes/Depois do parecer do gestor (Figma "Analisar
   ocorrência"): caixa de 4,5rem com corte, para várias imagens caibam na linha. */
.pg-evidence-thumb {
    display: block;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: var(--border-radius-md);
    object-fit: cover;
}
/* A miniatura Antes/Depois do parecer é CLICÁVEL (abre o visualizador em overlay — o mesmo
   comportamento das miniaturas de anexo). O botão veste a moldura de `.pg-evidence-thumb` e a
   imagem preenche a caixa; sem esta regra o `<button>` somaria padding/borda do navegador e a
   prévia deixaria de casar com a do quadro. */
.pg-evidence-zoom {
    padding: 0;
    border: 0;
    background: none;
    overflow: hidden;
    cursor: pointer;
}
.pg-evidence-zoom > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pg-evidence-zoom:focus-visible {
    outline: var(--border-width-regular) solid var(--semantic-action-brand-filled-container-default);
    outline-offset: 2px;
}
/* ── Caixa de anexos das evidências (compartilhada) ────────────────────────────────
   "Área de upload" do Figma: UMA área com borda, botão de escolha à esquerda e
   miniaturas à direita (cada uma com o seu botão de remoção). Definida UMA vez porque
   duas janelas usam exatamente a mesma caixa: "Solucionar ocorrência"
   (OccurrenceSolveDialog) e o registro de execução da programação
   (ProgramacaoExecucaoDialog). Antes as regras viviam no CSS isolado do primeiro, que
   não alcança o segundo; e o `::deep` não é necessário aqui porque esta folha é global.
   O RadzenUpload desenha a própria caixa (preenchimento + borda + padding); ela é
   neutralizada para que a moldura seja a única do contêiner. */
.occurrence-evidence-dropzone {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    min-width: 0;
    padding: 0.75rem;
    border: var(--border-width-thin) solid var(--semantic-border-subtle);
    border-radius: var(--border-radius-md);
    background: var(--semantic-background-secondary);
}
/* `flex: 0 0 auto` + `width: auto` impedem que a área interna do upload ocupe a largura
   toda e empurre as miniaturas para fora da caixa. */
.occurrence-evidence-dropzone .occurrence-evidence-upload.rz-fileupload {
    flex: 0 0 auto;
    width: auto;
    padding: 0;
    border: 0;
    background: transparent;
}
/* A lista interna do upload sai de cena: as prévias são as miniaturas, cada uma com o
   seu próprio botão de remoção. O componente continua sendo a fonte da seleção. */
.occurrence-evidence-dropzone .rz-fileupload-content { display: none; }
/* "Selecionar arquivos" é um botão de contorno no quadro, não o preenchido que o
   RadzenUpload recebe por padrão. `text-transform: none` desfaz o caixa-alta que o tema
   do Radzen aplica a `.rz-fileupload .rz-button`: o quadro escreve em caixa mista. */
.occurrence-evidence-dropzone .rz-fileupload .rz-button {
    min-height: var(--rz-button-size-md);
    border: var(--border-width-regular) solid var(--semantic-action-neutral-ghost-on-container-subtle);
    background: var(--semantic-background-primary);
    color: var(--semantic-content-default);
    font-size: var(--typescale-label-medium-size);
    text-transform: none;
}
/* Tira de miniaturas: encostada à direita e rolando na horizontal quando houver mais
   anexos do que caberia, em vez de reduzir as prévias. */
.occurrence-evidence-thumbnails {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 0 1 auto;
    min-width: 0;
    margin-inline-start: auto;
    overflow-x: auto;
    overflow-y: hidden;
    padding-block-end: 0.125rem;
}
/* Cada anexo é um par "miniatura + remover", rígido na tira. O intervalo DENTRO do par
   é menor que o intervalo entre pares, para que o X fique claro como sendo daquele
   arquivo e não do seguinte. */
.occurrence-evidence-thumb {
    display: flex;
    align-items: center;
    gap: 0.125rem;
    flex: 0 0 auto;
}
/* Miniatura: quadrada e recortada no centro. A imagem gravada é o arquivo ORIGINAL —
   a redução é só de exibição (`object-fit`), nunca de resolução. */
.occurrence-evidence-thumb-open {
    display: block;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: var(--border-width-thin) solid var(--semantic-border-subtle);
    border-radius: var(--border-radius-sm);
    background: var(--semantic-background-primary);
    overflow: hidden;
    cursor: pointer;
}
.occurrence-evidence-thumb-open:focus-visible {
    outline: var(--border-width-regular) solid var(--semantic-action-brand-filled-container-default);
    outline-offset: 2px;
}
.occurrence-evidence-thumb-image { display: block; width: 100%; height: 100%; object-fit: cover; }
/* PDF não tem prévia: o mesmo quadrado da miniatura, com o ícone do formato. */
.occurrence-evidence-thumb-file {
    display: flex;
    width: 2.5rem;
    height: 2.5rem;
    align-items: center;
    justify-content: center;
    border: var(--border-width-thin) solid var(--semantic-border-subtle);
    border-radius: var(--border-radius-sm);
    background: var(--semantic-background-primary);
    color: var(--semantic-content-muted);
}
.occurrence-evidence-thumb-file .rz-icon { font-size: 1.25rem; }
/* Botão de remoção AO LADO do arquivo correspondente: é o que identifica qual anexo sai.
   O seletor repete a classe da miniatura para manter a especificidade que o CSS
   escopado do diálogo tinha (0,3,0) e continuar vencendo as regras do RadzenButton. */
.occurrence-evidence-dropzone .occurrence-evidence-thumb .occurrence-evidence-thumb-remove {
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    min-height: 1.5rem;
    padding: 0;
    color: var(--semantic-content-muted);
}
.pg-criacao-top { margin: 0; }
.pg-detail-tabs .rz-tabview-nav { margin-block-end: 0.5rem; }
.pg-detail-tabs .rz-tabview-nav li a { padding-inline: 0; margin-inline-end: 1.25rem; }
.pg-detail-tabs .rz-tabview-panel { padding: 0.75rem 0 0; }
/* O tema Material declarava `border-top` no painel (a linha logo abaixo da faixa de abas).
   O quadro do detalhe não tem esse separador: só o `Indicador ativo` de 2 px sob a aba.
   O seletor repete as classes do tema (`.rz-tabview.rz-tabview-top > .rz-tabview-panels`,
   0,3,0) — com duas classes a regra perderia por especificidade. */
.rz-tabview.rz-tabview-top.pg-detail-tabs > .rz-tabview-panels { border-top: 0; }
.pg-tab-panel { min-width: 0; }

/* Histórico: a geometria vive no padrão compartilhado `.pg-log`
   (figma-tokens/structural/40-patterns.css), aplicado a esta tela. */

/* Estados vazios. */
.pg-empty { min-height: 60vh; text-align: center; background-color: var(--semantic-background-primary); }
.pg-empty-icon { font-size: 2.5rem; color: var(--semantic-status-success-flag); }
.pg-empty-title { color: var(--semantic-content-default); }

/* Diálogos do módulo. */
.pg-dialog-description,
.pg-dialog-hint { color: var(--semantic-content-muted); }
.pg-dialog-error { color: var(--semantic-status-critical-text); }

/* ------------------------------------------------------------------------------------ *
 *  Shell dos modais do módulo de Programação (Figma "Modal Shell": instâncias
 *  4501:39055 Registrar Execução, 4501:39071 Registrar Início, 4501:39093 Registrar
 *  Conclusão, 4501:39508 Analisar ocorrência e 4501:39527 Confirmar baixa — as cinco com
 *  820 de largura, cabeçalho e rodapé separados do conteúdo por divisor de ponta a ponta).
 *
 *  O host zera o recuo do `.rz-dialog-content` para o cabeçalho e o rodapé entregarem o
 *  divisor na largura inteira do quadro; o recuo de 24 do Figma passa a ser o de cada
 *  faixa. É o mesmo contrato já validado em `.occurrence-detail-dialog-host`
 *  (`figma-tokens/structural/40-patterns.css`), aqui restrito às classes `.pg-*` do módulo
 *  (C4/C9: nada do shell de Ocorrência é alterado).
 * ------------------------------------------------------------------------------------ */
.pg-dialog-host > .rz-dialog-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    padding: 0;
    overflow: visible;
}
.pg-dialog {
    box-sizing: border-box;
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    max-height: 100%;
    border-radius: var(--rz-dialog-border-radius);
    background-color: var(--semantic-background-primary);
    overflow: hidden;
    /* Altura do Text-Button do rodapé no quadro (38). Sobrescreve o default do Radzen
       (`--rz-button-size-md: 2.25rem`) DENTRO da shell, para o botão continuar sendo
       dimensionado pelo próprio componente em vez de por um `height` literal (C2). */
    --rz-button-size-md: 2.375rem;
}
/* Cabeçalho: título e descrição à esquerda, fechar à direita; recuo 24/24/24/12 do Figma. */
.pg-dialog-header {
    box-sizing: border-box;
    flex: none;
    padding: 1.5rem 1.5rem 0.75rem;
    border-block-end: var(--border-width-thin) solid var(--semantic-border-subtle);
}
/* Conteúdo: cede a altura e rola por dentro, para o cabeçalho e o rodapé não saírem da
   janela quando a análise é longa (evidências + declaração + decisão + anexos). */
.pg-dialog-body {
    box-sizing: border-box;
    flex: 1 1 auto;
    min-height: 0;
    padding: 0.75rem 1.5rem;
    overflow-y: auto;
}
/* Rodapé: par de ações alinhado à DIREITA, como no quadro — a secundária é a ação neutra
   preenchida (`ButtonStyle.Light`) e a primária a de marca. Recuo 24/24/12/24 do Figma. */
.pg-dialog-footer {
    box-sizing: border-box;
    flex: none;
    padding: 0.75rem 1.5rem 1.5rem;
    border-block-start: var(--border-width-thin) solid var(--semantic-border-subtle);
}
/* Bloco de leitura do modal: caixa com borda e o recuo do cartão do quadro. É aplicado ao
   próprio `RadzenStack` da seção — e não a um `.rz-card` — porque o `.rz-card` traz
   `--rz-card-padding` (1,5rem) e a borda ficaria disputando especificidade com a classe
   do módulo; o contêiner de layout do Radzen já é a caixa do quadro, só sem recorte. */
.pg-dialog-block {
    box-sizing: border-box;
    padding: 0.75rem;
    border: var(--border-width-thin) solid var(--semantic-border-subtle);
    border-radius: var(--border-radius-md);
    background-color: var(--semantic-background-primary);
}
/* Bloco de DESTAQUE (resumo da baixa, ocorrência selecionada): mesmo recorte sobre o
   fundo secundário, que é o que separa o dado do restante do conteúdo no quadro. */
.pg-dialog-summary {
    box-sizing: border-box;
    padding: 0.75rem;
    border: var(--border-width-thin) solid var(--semantic-border-subtle);
    border-radius: var(--border-radius-md);
    background-color: var(--semantic-background-secondary);
}
.pg-dialog-summary-title { color: var(--semantic-content-default); font-weight: 500; }
.pg-choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0.75rem; }
.pg-choice.rz-card {
    padding: 0.75rem;
    border: var(--border-width-thin) solid var(--semantic-border-subtle);
    border-radius: var(--border-radius-md);
    box-shadow: none;
    cursor: pointer;
}
.pg-choice.rz-card:hover { background-color: var(--semantic-background-secondary); }
.pg-choice.rz-card:focus-visible { outline: 2px solid var(--semantic-action-brand-shared-focus-ring); outline-offset: 1px; }
.pg-choice.is-selected { border-color: var(--semantic-action-brand-ghost-on-container); background-color: var(--semantic-background-secondary); }
/* Indicador de escolha do par de tipo de registro — o mesmo desenho do cartão de
   ocorrência (`.pg-ocorrencia-radio`), para os dois pares do diálogo lerem igual. */
.pg-choice-radio { flex: none; color: var(--semantic-action-neutral-ghost-on-container-subtle); }
.pg-choice-radio.is-selected { color: var(--semantic-action-brand-ghost-on-container); }
.pg-choice-body { align-items: flex-start; }
.pg-choice-title { color: var(--semantic-content-default); }
.pg-choice-text { color: var(--semantic-content-muted); white-space: normal; }
/* Opções de resultado e de parecer (Figma "Card/Decisão de Execução/Parecer" — 4967:40700).
   O tom vive nos tokens semânticos: repouso = Default do quadro (container/text), hover e
   pressed = as variáveis de estado do Figma, e "escolhido" = Pressed (D16), porque é o estado
   persistente e o mais saliente do quadro. A borda usa o token de TEXTO do status (D18) — é o
   stroke que o componente declara. A opção tem de ser um contêiner sem utilitário de layout nem
   variante do Radzen que fixe cor — como `.rz-card`. Um `.rz-button` declara
   background-color/border-color/color em regras de 3 a 5 classes, então esta regra de 2 classes
   nunca venceria. */
.pg-verdict.rz-card {
    box-sizing: border-box;
    min-height: 2.75rem;                               /* 44 px do quadro */
    padding: 0.875rem;                                 /* 14 px do quadro */
    border: var(--border-width-regular) solid var(--semantic-border-subtle);
    border-radius: var(--border-radius-md);
    box-shadow: none;
    cursor: pointer;
    text-align: start;
    transition: background-color 120ms ease-out, border-color 120ms ease-out;
}
/* No quadro as DUAS opções já aparecem tingidas: o tom identifica o significado
   (Aprovar/Revisão, Conforme/Não conforme), não a escolha. */
.pg-verdict.rz-card.pg-verdict--success {
    background-color: var(--semantic-status-success-container);
    border-color: var(--semantic-status-success-text);
    color: var(--semantic-status-success-text);
}
.pg-verdict.rz-card.pg-verdict--warning {
    background-color: var(--semantic-status-warning-container);
    border-color: var(--semantic-status-warning-text);
    color: var(--semantic-status-warning-text);
}
/* Hover: o texto escurece junto com o preenchimento (text/interactive). O `:not(.is-selected)`
   deixa a escolha prevalecer sobre a interação. */
.pg-verdict.rz-card.pg-verdict--success:hover:not(.is-selected) {
    background-color: var(--semantic-status-success-container-hover);
    color: var(--semantic-status-success-text-interactive);
}
.pg-verdict.rz-card.pg-verdict--warning:hover:not(.is-selected) {
    background-color: var(--semantic-status-warning-container-hover);
    color: var(--semantic-status-warning-text-interactive);
}
/* Pressed e "escolhido" (D16): o tom mais escuro + borda um degrau acima. A escala do projeto
   é 0,5/1/2 px; o "um degrau acima" do quadro (1 -> 1,5) vira 1 -> 2 (--border-width-thick),
   desvio declarado em figma-tokens/docs/radzen-visual-mapping.md. */
.pg-verdict.rz-card:active:not(.is-selected),
.pg-verdict.rz-card.is-selected {
    border-width: var(--border-width-thick);
}
.pg-verdict.rz-card.pg-verdict--success:active:not(.is-selected),
.pg-verdict.rz-card.pg-verdict--success.is-selected {
    background-color: var(--semantic-status-success-container-pressed);
    color: var(--semantic-status-success-text-interactive);
}
.pg-verdict.rz-card.pg-verdict--warning:active:not(.is-selected),
.pg-verdict.rz-card.pg-verdict--warning.is-selected {
    background-color: var(--semantic-status-warning-container-pressed);
    color: var(--semantic-status-warning-text-interactive);
}
.pg-verdict.rz-card:focus-visible {
    outline: 2px solid var(--semantic-action-brand-shared-focus-ring);
    outline-offset: 1px;
}
.pg-analise-row { padding-block: 0.25rem; }

/* Ordem de Serviço (prévia e impressão). A moldura ocupa a altura de `.rz-body` (mesmo
   contrato de `.pg-criacao`): com a janela maximizada, as DUAS folhas do documento
   convencional cabem na viewport e a página NÃO rola na vertical. O excedente de um
   documento atipicamente longo fica DENTRO da folha (`overflow-y: auto`), e não no
   documento inteiro — o rodapé de ações e o cabeçalho continuam sempre visíveis. */
.pg-os { box-sizing: border-box; height: 100%; min-height: 0; padding: 0.75rem 1rem; }
/* Cabeçalho do documento e barra de ações não encolhem: só o editor cede altura. */
.pg-os > .pg-os-actions { flex: none; }
.pg-os-sheet { max-width: 60rem; margin-inline: auto; border: var(--border-width-thin) solid var(--semantic-border-subtle); }
/* Prévia paginada: duas folhas do documento lado a lado, dentro da coluna da prévia. A
   grade com `align-items: stretch` é o que faz as duas caixas fecharem na altura da
   maior — a folha de anexos fica em branco até o fim quando tem menos conteúdo, em vez
   de terminar antes da página 1. `1fr 1fr` divide a largura da prévia em partes iguais,
   como as duas colunas sem `Size` que existiam antes. */
.pg-os-preview { min-width: 0; flex: 1 1 auto; min-height: 0; }
/* A linha do editor e a coluna da configuração também cedem altura: sem `min-height: 0`
   o conteúdo mínimo de cada coluna empurraria a página além da viewport. A coluna vira
   coluna FLEX porque `.rz-col` é um `div` de bloco: sem isso a prévia (RadzenStack) fica
   com altura de conteúdo e a grade das duas folhas nunca recebe uma altura definida. */
.pg-os-grid { flex: 1 1 auto; min-height: 0; }
/* `height: 100%` é necessário: `.rz-col` tem `flex-shrink: 0` do tema e, sem altura
   explícita, a coluna fica na altura do CONTEÚDO (a linha flex cresce com o item mais
   alto) — era isso que mantinha as folhas com 1100+ px e a página rolando. */
.pg-os-grid > .rz-col { display: flex; flex-direction: column; min-height: 0; height: 100%; max-height: 100%; }
.pg-os-grid > .rz-col.pg-os-actions { overflow-y: auto; }
.pg-os-pages {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* Uma única linha que ocupa a altura restante: é ela que limita as folhas. */
    grid-template-rows: minmax(0, 1fr);
    gap: 0.75rem;
    align-items: stretch;
    flex: 1 1 auto;
    min-height: 0;
}
/* Dentro da grade a folha ocupa a coluna inteira: o `margin-inline: auto` de
   `.pg-os-sheet` desliga o `stretch` do item de grade e a folha encolheria até o conteúdo
   (a página 2 saía com 358px contra os 421px da página 1). */
.pg-os-pages > .pg-os-sheet { margin-inline: 0; min-block-size: 0; overflow-y: auto; overflow-x: hidden; }
/* Mapa do documento: um pouco mais baixo na TELA para o documento convencional caber sem
   rolagem; a impressão continua com a altura própria do bloco. */
.pg-os .pg-mini-map { height: 8rem; }
/* Densidade da PRÉVIA (só na tela): o documento é o mesmo do papel, mas aqui ele precisa
   caber na altura da janela maximizada — "situação convencional" de duas páginas. O recuo
   dos cartões e as miniaturas de evidência encolhem o suficiente para as duas folhas
   fecharem sem rolagem, sem alterar nenhum texto. As regras são escopadas a `.pg-os` /
   `.pg-os-sheet`, então não alcançam outros cartões da aplicação. */
.pg-os-sheet .pg-card { --rz-card-padding: 0.625rem; }
.pg-os .pg-evidence-thumb { width: 3rem; height: 3rem; }
.pg-os-eyebrow { color: var(--semantic-content-muted); letter-spacing: 0.04em; text-transform: uppercase; }
.pg-os-code { color: var(--semantic-content-secondary); }
.pg-os-notes { white-space: pre-wrap; }
/* Painel de configuração da impressão (Figma 4501:38116): padding 16, contra os 24 que o
   `--rz-card-padding` global dos cartões aplica. `RadzenCard` não expõe padding, então o
   ajuste é a própria variável do Radzen, restrita ao painel — nenhuma regra de layout é
   anulada, só o recuo interno do cartão desta página. */
.pg-os-config { --rz-card-padding: 1rem; }
/* Item obrigatório da impressão (Figma 4501:38118): no alvo o checkbox bloqueado aparece
   no tom neutro a 38% — o tratamento de "desabilitado" — e não no tom da marca que
   `--rz-checkbox-checked-background-color` aplica a um checkbox marcado. Duas classes a
   mais que o `.rz-chkbox-box.rz-state-disabled` do Radzen resolvem por especificidade,
   sem `!important`, e a regra fica restrita a `.pg-os`. */
.pg-os .rz-chkbox.rz-state-disabled .rz-chkbox-box,
.pg-os .rz-chkbox.rz-state-disabled .rz-chkbox-box .rzi {
    background-color: color-mix(in srgb, var(--semantic-action-neutral-inverse-container-default) 38%, transparent);
    border-color: color-mix(in srgb, var(--semantic-action-neutral-inverse-container-default) 38%, transparent);
    color: color-mix(in srgb, var(--semantic-action-neutral-inverse-container-default) 38%, transparent);
}
/* Rótulo dos itens opcionais (Figma 4501:38136): 12px no tom de maior ênfase, e não no
   tom secundário que o `TextStyle.Caption` do Radzen aplica por padrão. */
.pg-os-option-label { color: var(--semantic-content-default); }
.pg-os-signature {
    display: block;
    margin-block-start: 2.5rem;
    padding-block-start: 0.375rem;
    border-block-start: var(--border-width-thin) solid var(--semantic-border-subtle);
    color: var(--semantic-content-muted);
}

/* Impressão da Ordem de Serviço / Relatório (#39). A folha é o documento: a moldura da
   tela (quadro de 100dvh com `overflow: hidden`) é desfeita e as duas páginas — a folha 1
   (`.pg-os-sheet`) e a coluna de anexos/dados administrativos — passam a fluir na
   vertical, em sequência, com a assinatura fechando a página 2.
   `@page` é a única forma de controlar margem/tamanho de impressão e não anula nenhuma
   flexibilidade do Radzen (C4): é regra de mídia paginada, não de layout de tela.
   O cabeçalho/rodapé do NAVEGADOR não é controlável por CSS: quando aparece, é desligado
   no diálogo de impressão — e o documento não depende dele (nada nele é título, data ou
   numeração obrigatória). */
@media print {
    /* Cromo do shell e do editor. O `ModeratorLayout` não tem rodapé: sidebar e cabeçalho
       são as únicas superfícies do shell além do corpo, e o resto é cromo do editor. */
    .rz-sidebar,
    .rz-header,
    .pg-os-actions,
    .pg-detail-footer { display: none !important; }
    /* O shell é um quadro de 100dvh com `overflow: hidden`; sem desfazê-lo a impressão
       corta tudo o que passa da primeira página. */
    .rz-layout {
        display: block !important;
        height: auto !important;
        overflow: visible !important;
    }
    /* `RadzenBody` traz `margin-left: 250px` (a faixa da sidebar) em STYLE inline, que
       vence qualquer regra sem `!important`: zerar só o padding deixava o documento
       deslocado 250px para a direita. */
    .rz-body {
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        height: auto !important;
    }
    .pg-os { padding: 0 !important; overflow: visible !important; height: auto !important; }
    /* O editor é uma linha de duas colunas (configuração · prévia). Na impressão a
       configuração sai e a prévia flui: duas folhas lado a lado não cabem em A4. Exige
       `!important` porque `RadzenRow` emite `.rz-display-flex`, que o Radzen declara com
       `!important`; o efeito é só de impressão, a tela não muda (C4). */
    .pg-os-grid { display: block !important; }
    /* As duas folhas do documento empilham na vertical, cada uma na largura da página. */
    .pg-os-pages { display: block !important; }
    /* A página 2 (folha de anexos: fotos, administrativo, materiais e assinatura) começa
       sempre em folha nova; nada é renderizado depois das assinaturas. Sem nenhum bloco
       nela — todas as opções desligadas — não nasce uma folha em branco: sem caixa,
       `break-before` não gera quebra. */
    .pg-os-sheet--attachments:not(:has(.pg-card, .pg-os-signatures)) { display: none; }
    .pg-os-sheet--attachments { break-before: page; }
    /* Folha sem moldura de tela nem largura máxima/centralização na impressão. A altura
       volta a ser a do conteúdo: a igualdade entre as duas folhas é da PRÉVIA, não do
       documento paginado (uma folha impressa pode quebrar em mais de um papel). O
       `overflow` da prévia também é desfeito, senão a paginação cortaria o excedente. */
    .pg-os-sheet { border: 0; box-shadow: none; max-width: none; margin-inline: 0; block-size: auto; overflow: visible !important; }
    /* O mapa é uma figura do documento: nunca parte entre duas folhas. A altura volta ao
       valor do documento impresso — a compactação de 9rem é só da PRÉVIA na tela. */
    .pg-os .pg-mini-map { height: 11rem; break-inside: avoid; }
    /* A densidade da prévia (recuo dos cartões e miniaturas) não vale para o papel: as
       evidências voltam ao tamanho de leitura e o recuo do cartão volta a herdar o token
       da aplicação (`unset` = `inherit` para propriedades customizadas). */
    .pg-os-sheet .pg-card { --rz-card-padding: unset; }
    .pg-os .pg-evidence-thumb { width: 4.5rem; height: 4.5rem; }
    /* Cartões de ocorrência (e o bloco de assinaturas) são atômicos: nunca partem entre
       duas folhas. */
    .pg-os .pg-card,
    .pg-os-signatures { break-inside: avoid; }

    @page { size: A4; margin: 12mm; }
}

/* ===== Central de Ocorrências (módulo Programação) =====
   Figma "Central de Ocorrências / Gestor Prefeitura" (4501:40431). Reaproveita o
   mapa de ocorrências e o diálogo de detalhe; só a composição é própria.
   O padding do quadro (corpo 8/12) fica em `.pg-central-content`; a página é flush
   para a navegação local encostar na borda do content slot. */
.pg-central-ocorrencias { min-width: 0; }
.pg-central-description { color: var(--semantic-content-muted); }
.pg-central-search-input.rz-textbox { flex: 1 1 20rem; min-width: 0; }
/* O botão Filtrar fica no fim da linha: o popover abre alinhado à direita para não estourar a página. */
.pg-central-search .rz-card.rz-variant-filled.occurrence-filter-popover { inset-inline-start: auto; inset-inline-end: 0; }
.pg-central-body { min-width: 0; }
.pg-central-map {
    height: clamp(20rem, 52vh, 40rem);
    border: var(--border-width-thin) solid var(--semantic-border-subtle);
    border-radius: var(--border-radius-md);
    overflow: hidden;
}
.pg-central-list {
    height: 100%;
    min-height: 0;
    padding: 0.5rem;
    border: var(--border-width-thin) solid var(--semantic-border-subtle);
    border-radius: var(--border-radius-md);
    background-color: var(--semantic-background-primary);
}
/* Cabeçalho da lista (#36). Ele NÃO vive na área rolável (`flex: none`), então nenhum
   cartão atravessa por cima do título — é o equivalente ao cabeçalho fixo de uma tabela,
   sem `position: sticky` (que aqui não teria efeito: o título é IRMÃO do trecho que rola).
   O fundo é o mesmo do painel, opaco, então nada aparece por baixo caso a ordem mude. */
.pg-central-list-title {
    flex: none;
    padding-block: 0.25rem;
    background-color: var(--semantic-background-primary);
    color: var(--semantic-content-default);
}
.pg-central-list-items { min-width: 0; }

/* Rolagem da região, não da página. O Radzen já faz de `.rz-body` um trilho `1fr` de
   `.rz-layout` (100dvh, `overflow: hidden`) com `overflow: auto` — ou seja, o documento
   nunca rola; o que rola é a área de conteúdo, que é o que se percebe como "a página
   inteira rola". A Central de Programação converte isso em rolagem INTERNA pela moldura
   `.rz-body:has(> .occurrence-page)` do layer compilado; aqui a mesma moldura é aplicada
   às classes `pg-central-*`. A cadeia de altura precisa chegar definida até o item que
   rola, senão `height: 100%` não tem de onde herdar. */
@media (min-width: 961px) {
    .rz-body:has(> .pg-central-ocorrencias) {
        height: calc(100dvh - 62px);
        overflow: hidden;
    }

    .pg-central-ocorrencias,
    .pg-central-content {
        height: 100%;
        min-height: 0;
    }

    /* `RadzenRow` já é `display: flex` (`.rz-display-flex`, declarada com `!important`
       pelo Radzen): não impor `display: grid` aqui. Esticar por `flex` resolve sem
       anular a flexibilidade do componente. */
    .pg-central-body {
        flex: 1 1 auto;
        min-height: 0;
    }

    /* As colunas precisam de altura DEFINIDA. `align-items: stretch` (o padrão da linha)
       estica o item até a altura da LINHA, e a linha é dimensionada pelo item mais alto —
       então o par mapa+lista ditava 1928px dentro de uma linha de 692px. `min-height: 0`
       sozinho não resolve: sem altura própria o item continua dimensionado pelo conteúdo.
       Com `height: 100%` a coluna resolve contra a linha (que tem altura definida) e o
       `height: 100%` do mapa passa a ter de onde herdar. */
    .pg-central-body > * {
        height: 100%;
        min-height: 0;
    }

    .pg-central-map { height: 100%; }
}

/* A lista é quem rola. `RadzenStack` já é coluna por padrão. */
.pg-central-list {
    display: flex;
    flex-direction: column;
}

.pg-central-list-items {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* Paginador da Central de ocorrências (cartões). A classe emitida pelo Radzen 11 é
   `rz-pager` (não `rz-paginator`, que pertencia a versões antigas e tornava esta regra
   morta). `flex-wrap: nowrap` é o que impede o `ul` de números de cair para uma segunda
   linha e desalinhar do resumo — o tema do Radzen declara `flex-wrap: wrap` em
   `.rz-pager` e `flex: 1` em `.rz-pager-pages`. `min-width: 0` permite ao item flex
   encolher abaixo do próprio conteúdo. */
.pg-central-pager.rz-pager {
    min-width: 0;
    max-width: 100%;
    padding-block: 0.25rem;
    flex-wrap: nowrap;
}

/* O resumo cede espaço (reticências) antes de empurrar os números. */
.pg-central-pager.rz-pager .rz-pager-summary {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Os números preservam a largura intrínseca de 36 px do desenho. */
.pg-central-pager.rz-pager .rz-pager-pages {
    flex: 0 0 auto;
}
.pg-central-empty { padding-block: 1.5rem; }
/* Rodapé FORA da área rolável (`flex: none`): a contagem em pt-BR e a paginação ficam
   presas à base do painel enquanto só a lista rola (#19/#20). O seletor de itens por
   página é o do próprio `RadzenPager` (`PageSizeOptions`/`PageSizeChanged`), não um
   controle paralelo; por isso nenhuma regra de largura é necessária aqui. */
.pg-central-footer {
    flex: none;
    padding-block: 0.5rem 0.25rem;
    border-block-start: var(--border-width-thin) solid var(--semantic-border-subtle);
}
.pg-central-summary { color: var(--semantic-content-muted); }
.pg-central-empty-title { color: var(--semantic-content-default); }

.pg-central-card {
    min-width: 0;
    padding: 0.25rem;
    border: var(--border-width-thin) solid var(--semantic-border-subtle);
    border-radius: var(--border-radius-sm);
    background-color: var(--semantic-background-primary);
    /* Altura da caixa de um selo, derivada da PRÓPRIA declaração do `.pg-tag`
       (fonte × entrelinha + padding vertical + as duas bordas). Vive no cartão — ancestral
       comum das linhas de código e do bloco de selos — porque as DUAS colunas a usam: as
       linhas de código adotam essa altura para que o centro do texto de cada linha coincida
       com o centro do selo correspondente, e o slot reservado do segundo selo
       (`.pg-central-card-tagslot`) usa a mesma medida para um cartão sem programação não
       ficar mais baixo que um programado (#46). Medida derivada, não escolhida (C3). */
    --pg-central-tag-line: calc(var(--typescale-label-medium-size) * 1.15 + 0.5rem + 2 * var(--border-width-thin));
}
.pg-central-card-main { min-width: 0; flex: 1 1 auto; }
.pg-central-card-text { min-width: 0; }
/* Nome da categoria SEM corte: o cartão precisa exibir o nome completo da ocorrência
   (antes `nowrap` + `ellipsis` escondia "Vazamento de água" como "Vazamento de…"). O texto
   quebra em quantas linhas precisar e o cartão cresce em altura; `overflow-wrap` impede que
   uma palavra longa estoure a coluna. O nome da EQUIPE continua em uma linha. */
.pg-central-card-title { color: var(--semantic-content-default); white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.pg-central-card-team { color: var(--semantic-content-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-central-card-icon { width: 1.5rem; height: 1.5rem; object-fit: contain; border-radius: 10px; flex: none; }
.pg-central-card-codes { flex: none; min-width: 6.5rem; }
/* Figma "Municp / Card central": cada selo tem a largura do próprio texto e os dois ficam
   alinhados uns aos outros. O alinhamento vem de `AlignItems` do RadzenStack (a utilitária
   `.rz-align-items-*` do tema é declarada com `!important`, então uma regra de projeto aqui
   NUNCA vence — ver C4 em radzen-visual-mapping.md); `align-items` nesta folha seria
   inócuo e por isso não existe mais. */
.pg-central-card-tagslot { min-height: var(--pg-central-tag-line); }
/* Cada linha de código tem a altura de um selo, com o texto centrado verticalmente: é o
   que faz o centro da linha 1 coincidir com o centro do 1º selo e o da linha 2 com o do
   2º (no quadro, os passos são 31px nas linhas e 30px nos selos). */
.pg-central-card-code {
    color: var(--semantic-content-muted);
    white-space: nowrap;
    line-height: var(--pg-central-tag-line);
}
.pg-central-card-actions { flex: none; }

/* Filtros rápidos por situação (pílulas do Figma). */
.pg-quickchip.rz-button {
    height: auto;
    padding: 0.25rem 0.75rem;
    border: var(--border-width-thin) solid var(--semantic-border-subtle);
    border-radius: var(--border-radius-full);
    background-color: var(--semantic-background-primary);
    color: var(--semantic-content-secondary);
    font-size: var(--typescale-label-medium-size);
    font-weight: 500;
    line-height: 1.4;
}
.pg-quickchip.rz-button:hover { background-color: var(--semantic-background-secondary); }
.pg-quickchip.is-active.rz-button {
    border-color: var(--semantic-action-brand-ghost-border-default);
    background-color: var(--semantic-action-brand-tonal-container-default);
    color: var(--semantic-action-brand-ghost-on-container);
}

/* Navegação local (Agenda semanal | Ocorrências). */
.pg-localnav {
    /* Figma "Navegação local": 1267x44 com recuo esquerdo de 20 e indicador de
       2px sob a aba ativa. A altura (44) vem do quadro e não tem token de
       controle; `min-height` permite a aba crescer se o texto quebrar. */
    padding-inline-start: 1.25rem;
    /* Sem `border-block-end`: no Figma o divisor da navegação local (Divider 1267x1) fica no
       TOPO da faixa, à direita das abas (4033:48415, x=246, y=0); a linha acima das abas já
       vem do divisor inferior do cabeçalho do shell. Uma borda embaixo desenhava uma segunda
       linha que o quadro não tem. */
}
.pg-localnav-tab.rz-button {
    height: auto;
    min-height: 2.75rem;
    padding: 0.75rem 0.5rem 0.5rem;
    border: 0;
    border-block-end: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--semantic-content-muted);
    font-size: var(--typescale-label-medium-size);
    font-weight: 500;
}
.pg-localnav-tab.is-active.rz-button {
    border-block-end-color: var(--semantic-action-brand-ghost-on-container);
    color: var(--semantic-action-brand-ghost-on-container);
    font-weight: 600;
}

/* Selo de ocorrência validada (Legenda/Status). */
.pg-tag.rz-badge.pg-tag--validated {
    background-color: var(--semantic-status-success-container);
    border-color: var(--semantic-status-success-border);
    color: var(--semantic-status-success-text);
}

/* ===== Central de Análise (módulo Programação) =====
   Figma "Central de Análise / Gestor Prefeitura" (seção 4501:39376), quadro
   "ANÁLISE 00 — Central de Análise • Avaliação": cabeçalho 1227x52 · filtros 1227x40 ·
   cabeçalho das colunas 1227x28 · lista de cartões 1227x64 com 8px entre as linhas. O
   quadro usa padding 18/20 e gap 14, e as cinco colunas medem 330/250/250/220/105 dentro
   do cartão. As larguras entram em `fr` (relativas), não em px: a proporção lida do Figma
   é condição de uma viewport maximizada (C1) e o `fr` acompanha a largura disponível
   (C3). Exceção declarada em figma-tokens/docs/radzen-visual-mapping.md. */
.pg-lista.pg-analise { padding: 1.125rem 1.25rem; }
.pg-analise-title { color: var(--semantic-content-default); }
.pg-analise-description { color: var(--semantic-content-muted); }
/* A busca absorve a sobra da linha e pode ENCOLHER (897 dos 1227 do quadro). Cada gatilho
   cresce/reduz com o próprio conteúdo — nunca com um px — e o rótulo não quebra, para o selo
   acompanhar nomes de equipe longos (C2/C3). */
.pg-analise-search.rz-textbox { flex: 1 1 12rem; min-width: 0; }
/* `inline-size: auto` é obrigatório: o campo do Radzen ocupa a largura do contêiner
   (`%input` → `width: 100%`), então com `flex-basis: auto` a base seria a largura CHEIA da
   linha e os três gatilhos encolheriam por igual, ignorando o próprio rótulo. Com a largura
   automática cada selo mede o próprio conteúdo e só encolhe quando a linha não cabe. */
.pg-analise-select.rz-dropdown { min-width: 0; inline-size: auto; flex: 0 1 auto; align-items: stretch; }
/* O Radzen emite um input oculto (acessibilidade/filtro) como PRIMEIRO filho do gatilho.
   O tema o deixa com `opacity:0; height:0`, mas ele continua sendo um item do flex e
   ocupava ~170 px de largura — era isso que empurrava o rótulo para longe da borda
   esquerda do selo. Tirar só este elemento do fluxo (mantendo-o na árvore de
   acessibilidade) devolve a largura ao texto. Escopo: apenas estes filtros. */
.pg-analise-select .rz-helper-hidden-accessible {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
}
.pg-analise-select .rz-dropdown-label { white-space: nowrap; flex: 1 1 auto; }
.pg-analise-team.rz-dropdown { min-inline-size: max-content; max-inline-size: 100%; }
.pg-analise-order.rz-dropdown { flex: 0 0 auto; }

/* Grade das cinco colunas, compartilhada pelo cabeçalho das colunas e pelas linhas —
   as duas geometrias não podem divergir. */
.pg-analise-grid {
    display: grid;
    grid-template-columns: minmax(0, 330fr) minmax(0, 250fr) minmax(0, 250fr) minmax(0, 220fr) minmax(0, 105fr);
    gap: 0.75rem;
    align-items: center;
}
/* Cabeçalho das colunas: 28px no quadro, com o mesmo recuo lateral de 12 das linhas. */
.pg-analise-head { min-height: 1.75rem; padding-inline: 0.75rem; }
.pg-analise-head-label { color: var(--semantic-content-muted); }
/* Linha: cartão de 64px no quadro com padding 6/12; a borda de 0,5px e o raio substituem
   os padrões do `.rz-card` (1px e 12px). */
.pg-analise-card.rz-card {
    min-height: 4rem;
    padding: 0.375rem 0.75rem;
    border: var(--border-width-thin) solid var(--semantic-border-subtle);
    border-radius: var(--border-radius-sm);
    background-color: var(--semantic-background-primary);
}
.pg-analise-cell,
.pg-analise-action { min-width: 0; }
.pg-analise-cell-muted { color: var(--semantic-content-muted); }

/* ------------------------------------------------------------------------------------ *
 *  Rolagem da região nas três páginas de trabalho (Figma: o quadro mostra o conteúdo
 *  inteiro e o excedente rola DENTRO da lista/grade, não no documento). O Radzen já faz
 *  de `.rz-body` um trilho `1fr` de `.rz-layout` (100dvh, `overflow: hidden`) com
 *  `overflow: auto`; aqui ele passa a não rolar e a cadeia de altura desce até o item que
 *  rola — o mesmo contrato de `.pg-central-ocorrencias`.
 *  Cada seletor usa uma classe EXCLUSIVA da página (C4/C9): `PreferenciasZeladoria`
 *  compartilha `.zl-page`, e `RevisaoExecucoes`/`ExecucoesProgramadas` compartilham
 *  `.pg-analise`/`.pg-lista`, por isso nenhuma delas entra nestes seletores.
 * ------------------------------------------------------------------------------------ */
@media (min-width: 961px) {
    .rz-body:has(> .zl-equipes-page),
    .rz-body:has(> .pg-analise-page) {
        height: calc(100dvh - 62px);
        overflow: hidden;
    }

    .zl-equipes-page,
    .pg-analise-page {
        height: 100%;
        min-height: 0;
    }

    /* `RadzenRow`/`RadzenStack` já são flex (as classes `rz-display-flex` são declaradas
       com `!important` pelo Radzen): a altura vem de `flex` + `min-height: 0`, nunca de um
       `display` imposto. */
    .zl-equipes-page .zl-body,
    .pg-analise-page .pg-analise-body {
        flex: 1 1 auto;
        min-height: 0;
    }

    /* `align-items: stretch` NÃO resolve aqui: a linha é dimensionada pelo item mais alto e
       o item continua com a altura do conteúdo (é o mesmo motivo documentado em
       `.pg-central-body > *`). A altura da coluna precisa ser DEFINIDA para o
       `height: 100%` do cartão ter de onde herdar. */
    .zl-equipes-page .zl-body > * {
        height: 100%;
        min-height: 0;
    }

    .zl-equipes-page .pg-card,
    .pg-analise-page .pg-card,
    .pg-agenda-page .pg-card {
        height: 100%;
        min-height: 0;
    }

    /* O `.rz-card` é `display: block`: sem virar coluna flex, o `RadzenStack` interno não
       tem como receber `flex: 1 1 auto` e a lista/grade transborda o cartão em vez de
       rolar. */
    .zl-equipes-page .pg-card,
    .pg-agenda-page .pg-card {
        display: flex;
        flex-direction: column;
    }

    .zl-equipes-page .pg-card > .rz-stack,
    .pg-agenda-page .pg-card > .rz-stack {
        flex: 1 1 auto;
        min-height: 0;
    }

    .zl-equipes-page .zl-team-list {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
    }

    .pg-analise-page .pg-analise-list {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
    }

    /* Agenda: a cadeia desce até a grade temporal, que passa a rolar. Escopado em
       `.pg-agenda--full` para não afetar a variante COMPACTA usada na criação/revisão. */
    .rz-body:has(> .pg-agenda-page) {
        height: calc(100dvh - 62px);
        overflow: hidden;
    }

    .pg-agenda-page {
        height: 100%;
        min-height: 0;
    }

    .pg-agenda-page .pg-agenda-body {
        flex: 1 1 auto;
        min-height: 0;
        box-sizing: border-box;
    }

    .pg-agenda-page .pg-agenda--full {
        flex: 1 1 auto;
        min-height: 0;
    }

    /* Agenda: a cadeia de altura desce até a grade, que rola quando o conteúdo excede.
       A grade NÃO estica para preencher a página (`flex: 0 1 auto`): com poucas equipes ela
       mede o próprio conteúdo e a legenda de estados desce para a base da página
       (`margin-block-start: auto`), que é onde o quadro a posiciona. Antes a grade absorvia
       toda a sobra e a legenda só parecia estar no rodapé porque a grade a empurrava. */
    .pg-agenda-page .pg-agenda--full .pg-agenda-grid--timeline {
        flex: 0 1 auto;
        min-height: 0;
        overflow: auto;
    }

    .pg-agenda-page .pg-agenda--full > .pg-agenda-legend {
        flex: 0 0 auto;
        margin-block-start: auto;
    }
}

@media (min-width: 961px) and (max-height: 900px) {
    .zl-equipes-page .zl-team-form {
        --rz-card-padding: 1rem;
    }
}

@media (min-width: 961px) and (max-height: 760px) {
    .zl-equipes-page .zl-team-form > .rz-stack {
        overflow-y: auto;
    }
}

/* Detalhe da programação: a página ocupa a altura do content slot e as ações do plano ficam
   presas ao rodapé VISÍVEL. Mesmo contrato das demais páginas de trabalho do módulo — o corpo
   não rola e a cadeia de altura desce até o painel de abas, que passa a rolar por dentro. */
@media (min-width: 961px) {
    .rz-body:has(> .pg-detail) {
        height: calc(100dvh - 62px);
        overflow: hidden;
    }

    .pg-detail {
        height: 100%;
        min-height: 0;
    }

    .pg-detail-tabs {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        min-height: 0;
    }

    .pg-detail-tabs .rz-tabview-panels {
        flex: 1 1 auto;
        min-height: 0;
        overflow: auto;
    }

    .pg-detail-footer { flex: 0 0 auto; }
}

/* ===== Gestão de Equipes e Preferências da Zeladoria ===== */
.zl-page { padding: 0.75rem 1rem; min-width: 0; }
/* Cabeçalho e linhas do quadro compartilham a MESMA caixa. O cabeçalho vivia fora do
   cartão de linha, então o conteúdo começava sem a borda hairline e com padding vertical
   diferente (0,25 rem contra 0,75 rem do `.zl-team.rz-card`), o que desalinhava as colunas
   3/2/3/2/2. A regra repete `padding` e largura de borda do cartão (borda transparente) para
   que as duas grades tenham exatamente o mesmo content box; nenhuma coluna ou largura
   literal foi acrescentada (C2/C3). */
.zl-team-head {
    padding: 0.75rem;
    border: var(--border-width-thin) solid transparent;
}
.zl-team-count { color: var(--semantic-content-default); }
.zl-team-head-label { color: var(--semantic-content-muted); letter-spacing: 0.04em; }
.zl-team.rz-card {
    padding: 0.75rem;
    border: var(--border-width-thin) solid var(--semantic-border-subtle);
    border-radius: var(--border-radius-sm);
    box-shadow: none;
    cursor: pointer;
}
.zl-team.rz-card:hover { background-color: var(--semantic-background-secondary); }
.zl-team.is-selected.rz-card {
    border-color: var(--semantic-action-brand-ghost-border-default);
    background-color: var(--semantic-action-brand-tonal-container-default);
}
.zl-team:focus-visible { outline: 2px solid var(--semantic-action-brand-shared-focus-ring); outline-offset: 1px; }
.zl-team-name { color: var(--semantic-content-default); }

/* Linha de trabalhador no painel da equipe (nome · vínculo · função · líder · remover).
   `div` simples: `.rz-stack` imporía `display:flex !important` ao grid. */
.zl-member-row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1.1fr) minmax(0, 1.1fr) auto auto;
    gap: 0.5rem;
    align-items: center;
}
@media (max-width: 960px) {
    .zl-member-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
/* Lista de capacidades da equipe. O contêiner rola quando há muitos tipos e precisa de
   RESPIRO: a caixa de marcação desenha borda e anel de foco FORA dos 18px dela, então sem
   padding o `overflow-y: auto` cortava os cantos do primeiro e do último item de cada
   coluna (defeito relatado). O `margin-inline` negativo devolve o alinhamento à margem do
   cartão, para o respiro não deslocar a coluna em relação aos demais campos. */
.zl-capacities {
    max-height: 16rem;
    overflow-y: auto;
    padding: 0.25rem 0.5rem;
    margin-inline: -0.5rem;
}
/* Grade de 3 colunas das capacidades, na ordem do quadro. O RadzenCheckBoxList renderiza um
   RadzenStack INTERNO e o Radzen declara `.rz-display-flex { display: flex !important }`,
   então o override de `display` exige `!important` — mesma classe de conflito já registrada
   para `.occurrence-workspace.rz-stack`. Alternativa que preserva o flex (dar `flex-basis`
   de um terço a cada item) trocaria isto por uma largura literal por item, pior para C3.
   O `gap` de coluna é real (não zero) para as caixas de marcação não encostarem umas nas
   outras nem no limite de cada célula. */
.zl-capacities .rz-stack {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem 0.75rem;
    align-items: center;
}
/* O rótulo do dropdown de vínculo ("Servidor municipal") transborda a faixa do grid e invade
   o campo vizinho. O Radzen já reserva o espaço do gatilho
   (`calc(2 * --rz-dropdown-trigger-icon-width)`), então NÃO se aplica `max-width` aqui: um
   teto relativo reservaria esse espaço duas vezes e cortaria o texto. Basta deixar o rótulo
   encolher (`min-width: 0`) para que ele reticencie dentro da faixa. O seletor atinge só o
   `<span class="rz-dropdown-label">`: o painel do dropdown é renderizado DENTRO do
   `.rz-dropdown`, então um `overflow: hidden` no root cortaria a lista aberta. */
.zl-member-row .rz-dropdown { min-width: 0; }
.zl-member-row .rz-dropdown .rz-dropdown-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.zl-card-fill { height: 100%; }
.zl-notice-modes .rz-radiobutton-list { gap: 0.5rem; }
.zl-notice-modes .rz-radiobutton { align-items: flex-start; }
.zl-feedback { color: var(--semantic-status-success-text); }

/* Formulário de equipe — composição, não aparência de componente (D10).
   Uma ÚNICA grade para as duas linhas: coluna 1 = nome/líder, coluna 2 = tipo/nº de membros.
   A coluna 2 é `max-content`, então a largura do "Tipo da equipe" é a do TEXTO mais longo de
   `TipoEquipe` + recuos + seta do dropdown; o "Número de membros" fica na mesma coluna e herda
   exatamente essa largura. A coluna 1 absorve o restante. `column-gap` reproduz o `Gap` que os
   dois `RadzenRow` usavam. */
.zl-team-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    column-gap: 0.5rem;
    row-gap: 0.75rem;
    align-items: start;
}
/* Contêiner das células: `min-width: 0` deixa a coluna 1 encolher e `position: relative`
   ancora o elemento de medição absoluto. */
.zl-team-form-grid > * { min-width: 0; position: relative; }

/* Elemento de medição oculto: reserva a largura do rótulo mais longo dentro da coluna
   `max-content`, incluindo recuos e a área do gatilho do `RadzenDropDown`. Fora do fluxo,
   não afeta a altura do campo. */
.zl-field-measure {
    position: absolute;
    visibility: hidden;
    height: 0;
    overflow: hidden;
    white-space: nowrap;
    font-size: var(--rz-input-font-size-md);
    padding-inline: var(--rz-input-padding-inline-md);
    padding-inline-end: calc(var(--rz-input-padding-inline-md) + var(--zl-dropdown-trigger-reserve));
}

/* Reserva do gatilho (ícone + recuo) do `RadzenDropDown`. Valor derivado do template do
   componente (`.rz-dropdown-trigger` com `.rzi-chevron-down`) e conferido por medição em
   Chromium; não é um valor de design. */
:root { --zl-dropdown-trigger-reserve: 1.75rem; }

/* Percentual é tratado como `auto` no cálculo intrínseco da coluna, então os dois controles
   esticam até a largura medida sem participar do dimensionamento. */
.zl-team-type-field,
.zl-team-members-field { width: 100%; }

/* Os textos de apoio (rótulo do campo e legenda) NÃO podem participar da largura intrínseca da
   coluna: sem isso o `max-content` da coluna 2 mede a FRASE inteira da legenda do "Número de
   membros" e espreme a coluna do nome. `width: 0` zera a contribuição intrínseca e
   `min-width: 100%` devolve a largura real na composição. Medido em Chromium 1280×720. */
.zl-team-form-grid .pg-card-description,
.zl-team-form-grid .pg-field-label {
    width: 0;
    min-width: 100%;
}
/* Barra de ações presa ao rodapé da janela de conteúdo. `position: sticky` não é `display`
   nem `flex-direction`, então conviver com as utilitárias `.rz-*` marcadas `!important` do
   RadzenStack (C2/C4) — nenhuma exceção declarada é necessária. O fundo impede que os
   cartões apareçam por baixo do botão durante a rolagem. */
.zl-actions {
    position: sticky;
    inset-block-end: 0;
    z-index: 1;
    margin-block-start: auto;
    padding-block: 0.5rem;
    background-color: var(--semantic-background-primary);
}

/* ── Preferências: rodapé de ações preso à base da TELA ──────────────────────────────
   A página ocupa a altura útil do corpo do shell, só o miolo rola e a barra de ações fica
   fora da região rolável — o mesmo contrato de `.pg-criacao`/`.pg-detail-footer`. Com o
   `position: sticky` dentro do fluxo do cartão (contrato antigo de `.zl-actions`), o botão
   "Salvar preferências" só encostava no fim do conteúdo: em tela alta ele ficava no meio da
   página em vez do canto inferior direito.
   `height`/`min-height`/`flex` convivem com as utilitárias `.rz-*` do RadzenStack, que
   impõem `display`/`flex-direction` com `!important` (C2/C4). */
.zl-prefs-page {
    height: 100%;
    min-height: 0;
}
.zl-prefs-scroll {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.75rem;
    min-height: 0;
    min-width: 0;
    overflow-y: auto;
    overflow-x: hidden;
}
.zl-prefs-actions {
    flex: none;
    padding-block-start: 0.25rem;
}

/* ===== Filtro de situação na linha de FILTROS (Central de Análise) =====
   O seletor de situação é o "filtro por tipo" desta tela e passou a viver na MESMA linha
   dos demais filtros — busca, equipe, situação, ordenação —, entre a equipe e a ordenação,
   com o mesmo intervalo do quadro "Filtros" da ANÁLISE 00 (gap 12). Antes ele ocupava uma
   linha própria acima das colunas.
   O gatilho herda `pg-analise-select` (fonte, altura e recuo internos iguais aos da
   ordenação); a largura mínima reserva o rótulo mais longo do seletor mais o recuo de 12,
   o intervalo de 8 e a seta de 18 do design, para o selo não mudar de tamanho ao trocar de
   situação (é a exceção declarada em figma-tokens/docs/radzen-visual-mapping.md). */
.pg-analise-status.rz-dropdown {
    min-inline-size: 8.5rem;
}

/* ------------------------------------------------------------------------------------ *
 *  Dashboards de Zeladoria (Figma: 4501:41109 "Dashboard - Gestor" e
 *  4501:41490 "Dashboard • Líder de Equipe — Saneamento Centro").
 *
 *  Os dois quadros são painéis analíticos desenhados à mão: cartões brancos raio 14 com
 *  borda discreta, indicadores, barras proporcionais, timelines de etapa, ranking de bairros
 *  e uma área empilhada em SVG. Nenhum componente Radzen representa essas peças — a
 *  composição usa os primitivos compartilhados de Components/Shared/Dashboard
 *  (DashboardCard, DashKpi, DashBar, DashStatusPill, DashPager) e esta folha dá a aparência.
 *  O prefixo `.dash-` é exclusivo destes painéis e não colide com `.dashboard-*`, que
 *  pertence ao painel legado de Zeladoria.
 *
 *  Cores de dados (faixas etárias, escala de densidade, barras de entrada/saída) vêm do
 *  quadro e não existem como token do design system — são cores de visualização, não de
 *  interface; ficam literais e registradas em figma-tokens/docs/radzen-visual-mapping.md.
 * ------------------------------------------------------------------------------------ */

/* O content slot destes painéis é flush sob o cabeçalho (Figma 1267x897 encostado).
   Mesmo contrato das demais páginas de trabalho do módulo. */
.rz-body:has(> .dash-page) { padding: 0; }

.dash-page { min-width: 0; padding: 1.25rem 1.25rem 1.5rem; }

/* 01 / Cabeçalho e filtro mensal */
.dash-toolbar { display: flex; justify-content: flex-end; align-items: center; min-height: 2rem; }
/* Filtro mensal do dashboard do LÍDER (o do Gestor passou a usar o filtro de intervalo). */
.dash-toolbar-filter.rz-dropdown { width: 14.25rem; }

/* Filtro global de intervalo de meses (Figma 4501:41134 — gatilho 228x32, padding 6/12,
   gap 8, raio 8 e a borda neutral-500 do input preenchido). O gatilho É a caixa do quadro:
   o RadzenDropDown entra sem borda, padding e altura próprios para que exista um ÚNICO
   contorno, como no desenho. */
.dash-range-anchor { position: relative; display: inline-flex; }
.dash-range-trigger {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    border: var(--border-width-regular) solid var(--semantic-action-neutral-ghost-border-default);
    border-radius: var(--border-radius-md);
    background-color: var(--semantic-background-primary);
}
/* O ícone da frente é o "Leading icon" 18x18 do CAMPO (Figma), não o Icon-Button do design
   system (30x30 com glifo de 14). O contrato global do Icon-Button vive em
   `.rz-button:not(.rz-button-lg):not(:has(.rz-button-text))` (0,3,0) no layer compilado;
   esta regra tem a mesma especificidade e vence por ordem de origem (`app.css` carrega
   depois). */
.dash-range-trigger .dash-range-icon.rz-button {
    box-sizing: border-box;
    flex: none;
    width: 1.125rem;
    height: 1.125rem;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 0;
}
.dash-range-trigger .dash-range-icon.rz-button .rz-button-box { width: 1.125rem; height: 1.125rem; }
.dash-range-trigger .dash-range-icon.rz-button img { width: 1.125rem; height: 1.125rem; object-fit: contain; }
.dash-range-dropdown.rz-dropdown {
    width: max-content;
    min-width: 0;
    height: auto;
    min-height: 0;
    padding: 0;
    border: 0;
    background-color: transparent;
}
.dash-range-dropdown.rz-dropdown .rz-dropdown-label { padding: 0; font-size: 0.875rem; line-height: 1.125rem; }

/* Painel do intervalo (Figma "DS / Date Picker • Range Months": corpo 320x211, cabeçalho
   com dois Icon-Button de 30 e o ano, grade de 12 meses em 4 linhas de 3, ações
   "Limpar data" e "Aplicar"). */
.dash-range-backdrop { position: fixed; inset: 0; z-index: 19; }
.dash-range-panel.rz-card {
    position: absolute;
    inset-block-start: calc(100% + 0.5rem);
    inset-inline-end: 0;
    z-index: 20;
    width: min(20rem, calc(100vw - 2rem));
    padding: 0.75rem;
    border: var(--border-width-regular) solid var(--semantic-border-default);
    border-radius: var(--border-radius-lg);
    background: var(--semantic-background-primary);
    box-shadow: 0 8px 24px rgb(0 0 0 / 14%);
}
.dash-range-year-label { color: var(--semantic-content-default); font-weight: 500; }
.dash-range-year-step.rz-button { width: 1.875rem; height: 1.875rem; flex: none; }
.dash-range-month.rz-button { width: 100%; min-height: 2.25rem; justify-content: center; font-size: 0.875rem; font-weight: 400; }
.dash-range-month.is-in-range.rz-button { background-color: var(--semantic-background-tertiary); }
.dash-range-month.is-pending.rz-button,
.dash-range-month.is-start.rz-button,
.dash-range-month.is-end.rz-button {
    background-color: var(--semantic-action-brand-filled-container-default);
    color: var(--semantic-action-brand-filled-on-container, #fdf2ef);
}

/* Cartão de seção */
.dash-card.rz-card {
    padding: 1.25rem;
    border: var(--border-width-thin) solid var(--semantic-border-subtle);
    border-radius: 0.875rem;
    background-color: var(--semantic-background-primary, #ffffff);
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1.0625rem;
}

.dash-card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.9375rem; }
.dash-card-heading { display: flex; flex-direction: column; gap: 0.3125rem; min-width: 0; }
.dash-card-title { color: var(--semantic-content-default); font-size: 1rem; font-weight: 500; }
.dash-card-subtitle { color: var(--semantic-content-muted); font-size: 0.75rem; }
.dash-head-filter.rz-dropdown { width: 11.375rem; }

.dash-head-kpi {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.5625rem 0.75rem;
    border-radius: 0.5625rem;
    background-color: var(--semantic-status-critical-container, #fceeee);
    text-align: center;
}

.dash-head-kpi-value { font-size: 1.5rem; font-weight: 500; }
.dash-head-kpi-hint { font-size: 0.75rem; }

/* Tons compartilhados */
.dash-tone-neutral { color: var(--semantic-content-default); }
.dash-tone-info { color: #143681; }
.dash-tone-received { color: #a43e27; }
.dash-tone-solved { color: #187644; }
.dash-tone-critical { color: #9a1b1b; }
.dash-ta-end { text-align: right; }

/* 02 / Backlog • piscina com estoque segmentado */
.dash-pool { display: flex; align-items: stretch; gap: 1rem; }
.dash-pool-source {
    display: flex;
    flex-direction: column;
    gap: 0.5625rem;
    padding: 0.9375rem 0.875rem;
    border-radius: 0.75rem;
    flex: 0 0 11.1875rem;
}

.dash-pool-source--in { background-color: #fdf2ef; }
.dash-pool-source--out { background-color: #edf8f2; flex-basis: 15.3125rem; gap: 0.75rem; }
.dash-pool-eyebrow { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.02em; }
.dash-pool-figure { font-size: 1.75rem; font-weight: 500; }
.dash-pool-caption { color: var(--semantic-content-default); font-size: 0.875rem; }
.dash-pool-note { color: var(--semantic-content-muted); font-size: 0.75rem; }
.dash-out-card {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.5rem 0.6875rem;
    border-radius: 0.5rem;
    background-color: #ffffff;
}

.dash-out-value { font-size: 1rem; font-weight: 500; }
.dash-out-label { color: #4c525a; font-size: 0.75rem; }

.dash-reservoir {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0.5rem;
    border: var(--border-width-thin) solid #2563eb;
    border-radius: 0.8125rem;
    background-color: #eef3fd;
}

.dash-reservoir-head { padding: 0.625rem 0.75rem; border-radius: 0.4375rem; background-color: #eef3fd; }
.dash-reservoir-total { margin: 0; color: var(--semantic-content-default); font-size: 1.375rem; font-weight: 500; }
.dash-reservoir-stages { display: flex; flex-direction: column; gap: 1px; }
.dash-stage { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 0.875rem; transition: height 200ms ease; }
.dash-stage-count { flex: 0 0 4rem; color: #0f285e; font-size: 1rem; font-weight: 500; }
.dash-stage-label { color: #0f285e; font-size: 0.875rem; }

/* 03 / Distribuição etária */
.dash-panel {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.875rem;
    border-radius: 0.625rem;
    background-color: #fafafa;
}

.dash-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.dash-panel-title { color: var(--semantic-content-default); font-size: 1rem; font-weight: 500; }
.dash-panel-filters { display: flex; align-items: center; gap: 0.75rem; }
.dash-legend { display: flex; align-items: center; gap: 0.875rem; flex-wrap: wrap; }
.dash-legend-item { display: flex; align-items: center; gap: 0.5rem; }
.dash-legend-dot { width: 0.625rem; height: 0.625rem; border-radius: 50%; flex: none; }
.dash-legend-text { color: var(--semantic-content-secondary); font-size: 0.75rem; font-weight: 500; }
.dash-legend-total { margin-inline-start: auto; color: var(--semantic-content-default); font-size: 0.875rem; font-weight: 600; }
.dash-chart-row { display: flex; gap: 1rem; align-items: stretch; }
.dash-chart {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 0.375rem;
    row-gap: 0.4375rem;
}

.dash-area { grid-column: 2; grid-row: 1; width: 100%; height: 15.625rem; display: block; background-color: #ffffff; border-radius: 0.4375rem; }
/* Faixa transparente por dia: é o alvo do `<title>` nativo (tooltip com dia e total).
   `fill` também está no atributo do `<rect>`; aqui é só a garantia de que o retângulo
   nunca herde o preto padrão do SVG. */
.dash-day-hit { fill: transparent; pointer-events: all; }
.dash-axis-y {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    color: #6d7581;
    font-size: 0.625rem;
    font-weight: 500;
}

.dash-axis-x { grid-column: 2; grid-row: 2; display: flex; justify-content: space-between; color: var(--semantic-content-muted); font-size: 0.625rem; font-weight: 500; }
.dash-insights {
    flex: 0 0 17.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    border: var(--border-width-thin) solid var(--semantic-border-subtle);
    border-radius: 0.5625rem;
    background-color: #ffffff;
}

.dash-insights-title { color: var(--semantic-content-default); font-size: 0.875rem; font-weight: 600; }
.dash-insight {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.375rem;
    padding: 0.375rem 0.5rem;
    border-radius: 0.5rem;
    background-color: #f3f4f5;
}

.dash-insight-label { color: var(--semantic-content-secondary); font-size: 0.75rem; font-weight: 500; }
.dash-insight-delta { font-size: 0.75rem; font-weight: 500; }

/* Tabelas do painel */
.dash-table { border: var(--border-width-thin) solid var(--semantic-border-subtle); border-radius: 0.5rem; overflow: hidden; }
.dash-tr {
    display: grid;
    grid-template-columns: 1.75fr 2.35fr 1.85fr 2.7fr 1.7fr 1fr;
    align-items: center;
    gap: 0.5625rem;
    padding: 0.625rem 0.75rem;
    border-block-end: var(--border-width-thin) solid var(--semantic-border-subtle);
    color: var(--semantic-content-secondary);
    font-size: 0.75rem;
}

.dash-tr:last-child { border-block-end: 0; }
.dash-tr--head { background-color: #f3f4f5; color: var(--semantic-content-muted); font-size: 0.625rem; font-weight: 500; letter-spacing: 0.04em; }
/* Cabeçalho ordenável (`DashSortHeader`): a célula continua sendo a do quadro — mesma caixa e
   mesma tipografia de `.dash-tr--head` — e ganha a affordance de botão. O realce é sutil para
   não competir com o conteúdo; o foco é o do teclado e usa o anel do design. */
.dash-th {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
    cursor: pointer;
    user-select: none;
    border-radius: var(--border-radius-sm);
}
.dash-th:hover { color: var(--semantic-content-default); }
.dash-th:focus-visible {
    outline: var(--border-width-regular) solid var(--semantic-action-brand-ghost-on-container);
    outline-offset: 1px;
}
.dash-th-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-th-indicator { font-size: 0.5625rem; line-height: 1; color: var(--semantic-action-brand-ghost-on-container); }
.dash-cell-strong { color: var(--semantic-content-secondary); font-weight: 500; }
.dash-cell-code { color: var(--semantic-content-muted); font-size: 0.625rem; font-weight: 500; letter-spacing: 0.03em; }
.dash-cell-stack { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }

/* Trilhas proporcionais do quadro (222/644/92/96), em `fr` — a proporção acompanha a
   largura disponível em vez de reproduzir a viewport maximizada (C1/C3). */
.dash-table--flow .dash-tr { grid-template-columns: 222fr 644fr 92fr 96fr; padding: 0.625rem 0.8125rem; font-size: 0.75rem; }

/* 08 / Programações vencidas em RadzenDataGrid (Figma 4501:41052): cabeçalho 34px com
   fundo neutral-50 e 10/500, linhas 58px com 12/Regular, "Atraso" 14/600 e o TOP 3 com
   fundo red.50. As regras são escopadas em `.dash-overdue-grid` e usam as custom
   properties de padding do Radzen, para não disputar especificidade com o layer compilado
   (`app.css` carrega depois de `radzen-structural.css` e vence por ordem de origem). */
.dash-overdue-table {
    border: var(--border-width-thin) solid var(--semantic-border-subtle);
    border-radius: 0.5rem;
    overflow: hidden;
}
.dash-overdue-grid {
    --rz-grid-cell-padding: 0.53125rem 0.375rem;
    --rz-grid-header-cell-padding: 0.71875rem 0.375rem;
    --rz-grid-cell-border: none;
    --rz-grid-border: none;
}
.dash-overdue-grid .rz-grid-table { min-width: 0; }
.dash-overdue-grid .rz-grid-table thead th {
    height: auto;
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    /* Cabeçalho de 34px do quadro: padding 11,5 + linha de 11 (a tipografia de 10 do
       cabeçalho). O Radzen embrulha o título num `.rz-column-title` com `line-height` de
       16px do layer compilado — sem ajustar também o título, a faixa fica em 39px. */
    line-height: 0.6875rem;
}
.dash-overdue-grid .rz-grid-table thead th .rz-column-title,
.dash-overdue-grid .rz-grid-table thead th .rz-column-title-content { line-height: 0.6875rem; }
.dash-overdue-grid .rz-grid-table thead th:first-child,
.dash-overdue-grid .rz-grid-table tbody td:first-child { padding-inline-start: 0.875rem; }
.dash-overdue-grid .rz-grid-table thead th:last-child,
.dash-overdue-grid .rz-grid-table tbody td:last-child { padding-inline-end: 0.875rem; }
.dash-overdue-grid .rz-grid-table tbody td {
    height: 3.625rem;
    font-size: 0.75rem;
    color: var(--semantic-content-secondary);
    border-block-end: var(--border-width-thin) solid var(--semantic-border-subtle);
}
.dash-overdue-grid .rz-grid-table tbody tr:last-child td { border-block-end: 0; }
/* TOP 3 com o fundo `red.50` do quadro. A especificidade precisa passar de (0,3,3): o
   layer compilado força `background-color: transparent` nas células de grade listrada em
   `.rz-data-grid .rz-grid-table-striped > tbody > tr:nth-child(…) > td`, e por isso o
   seletor ancora em `.dash-overdue-table .dash-overdue-grid` (0,4,3). */
.dash-overdue-table .dash-overdue-grid .rz-grid-table > tbody > tr > td.is-top {
    background-color: var(--semantic-status-critical-bg);
}
.dash-overdue-grid .dash-grid-late { font-size: 0.875rem; font-weight: 600; }
.dash-overdue-grid .dash-grid-rank { font-size: 0.875rem; font-weight: 600; color: var(--semantic-content-muted); }
/* Selo de situação de 26px do quadro. Escopado na grade: o `.dash-pill` é compartilhado
   pelos demais painéis e não pode mudar de altura (C9). */
.dash-overdue-grid .dash-pill { box-sizing: border-box; block-size: 1.625rem; display: inline-flex; align-items: center; }
/* A linha inteira é a superfície de ativação. O `<tr>` vira o bloco de posicionamento e o
   pseudo-elemento do link cobre a linha: mantém âncora real (aba nova, clique do meio,
   foco por teclado) sem interop. */
.dash-overdue-grid .rz-grid-table tbody tr { position: relative; }
.dash-grid-row-link.rz-link { display: inline-flex; min-width: 0; }
.dash-grid-row-link .rz-link-text { display: contents; }
.dash-overdue-grid .dash-grid-row-link .rz-link-text::after {
    content: "";
    position: absolute;
    inset: 0;
}

/* 05 / Resolução x recebimento */
.dash-kpi-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; }
.dash-kpi {
    display: flex;
    flex-direction: column;
    gap: 0.3125rem;
    padding: 0.625rem 0.8125rem;
    border-radius: 0.5625rem;
    background-color: #f3f4f5;
}

.dash-kpi--received { background-color: #fdf2ef; }
.dash-kpi--solved { background-color: #edf8f2; }
.dash-kpi--critical { background-color: #fceeee; }
.dash-kpi-label { color: var(--semantic-content-muted); font-size: 0.625rem; font-weight: 500; letter-spacing: 0.04em; }
.dash-kpi-value { font-size: 1.375rem; font-weight: 500; }
.dash-kpi--received .dash-kpi-value { color: #a43e27; }
.dash-kpi--solved .dash-kpi-value { color: #187644; }
.dash-kpi--critical .dash-kpi-value { color: #9a1b1b; }
.dash-kpi-hint { color: var(--semantic-content-muted); font-size: 0.75rem; }

.dash-flowbars { display: flex; flex-direction: column; gap: 0.375rem; min-width: 0; }
.dash-flowbar { display: flex; align-items: center; gap: 0.5rem; }
.dash-flowbar-label { flex: 0 0 5.625rem; color: #4c525a; font-size: 0.625rem; font-weight: 500; }
.dash-flowbar .dash-bar { flex: 1 1 auto; min-width: 0; }
/* Número do quadro (50px) encostado no FIM da trilha da barra: o rótulo do Figma é
   alinhado à esquerda dentro da caixa, então o número "gruda" no fim colorido. */
.dash-flowbar-value { flex: 0 0 3.125rem; color: var(--semantic-content-default); font-size: 0.75rem; font-weight: 500; text-align: left; }

/* Barras proporcionais */
.dash-bar { height: 0.875rem; background-color: #e2e3e6; border-radius: 0.3125rem; overflow: hidden; }
.dash-bar-fill { height: 100%; border-radius: inherit; transition: width 200ms ease; }

/* 04 / Tempo de resolução • timelines */
.dash-flow {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.8125rem 0.9375rem;
    border-radius: 0.5625rem;
    background-color: #f3f4f5;
}

.dash-flow-head { display: flex; align-items: center; gap: 0.75rem; }
.dash-flow-name { flex: 1 1 auto; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.02em; }
.dash-flow-total { font-size: 1rem; font-weight: 500; }
/* Linha do tempo: a LINHA tem largura fixa (100% da coluna) nos dois fluxos e não muda com os
   dados; o que muda é a POSIÇÃO dos marcos (tempo acumulado ÷ tempo do fluxo). Rótulo e valor
   são ancorados na mesma posição do marco — centrados no meio e alinhados à borda nos extremos,
   para não vazar da caixa. Traço e marco compartilham o centro vertical (`inset-block-start: 50%`),
   que é o que mantém o círculo assentado sobre a linha. */
.dash-flow-chart { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; }
/* A altura da faixa de rótulos NÃO é fixa: o `style` do elemento reserva uma linha por PISTA
   (ver `DashboardFlowLabels`), porque etapas com a mesma posição no tempo (0 dias) descem uma
   linha em vez de se sobrepor. `min-block-size` mantém a altura de uma linha quando não há
   colisão. */
.dash-flow-names, .dash-flow-times { position: relative; min-block-size: 1.25rem; }
.dash-flow-anchor { position: absolute; inset-block-start: 0; transform: translateX(-50%); white-space: nowrap; }
.dash-flow-anchor--start { transform: none; text-align: start; }
.dash-flow-anchor--end { transform: translateX(-100%); text-align: end; }
.dash-flow-names .dash-flow-anchor { color: var(--semantic-content-secondary); font-size: 0.875rem; font-weight: 600; }
.dash-flow-times .dash-flow-anchor { font-size: 1rem; font-weight: 500; }
.dash-flow-chart--simple .dash-flow-times .dash-flow-anchor { color: #187644; }
.dash-flow-chart--programmed .dash-flow-times .dash-flow-anchor { color: #a43e27; }
.dash-flow-track { position: relative; block-size: 0.9375rem; }
.dash-flow-line { position: absolute; inset-inline: 0; inset-block-start: 50%; transform: translateY(-50%); block-size: 0.25rem; border-radius: 0.125rem; }
.dash-flow-chart--simple .dash-flow-line { background-color: #187644; }
.dash-flow-chart--programmed .dash-flow-line { background-color: #a43e27; }
.dash-flow-step-marker { position: absolute; inset-block-start: 50%; transform: translate(-50%, -50%); inline-size: 0.875rem; block-size: 0.875rem; border-radius: 50%; }

/* 06 / Mapa de calor */
.dash-map-row { display: flex; gap: 1rem; align-items: stretch; }
/* Altura DEFINIDA do quadro do mapa: sem ela a caixa do host vem "100%" de uma linha
   flex cuja altura depende do painel ao lado, que por sua vez depende de dados
   carregados de forma assíncrona. O `OcorrenciaMap` mede `clientHeight` ao criar o mapa
   e ao enquadrar o conjunto (`fitToMarkers`), então uma caixa ainda colapsada produz um
   enquadramento largo demais e os pins caem fora do quadro. Mesmo contrato dos demais
   contextos de mapa do projeto (`.pg-mini-map`, `.occurrence-detail-map`), que também
   declaram altura própria. O valor é o do quadro (297px em 06 / 510px em 05) e coincide
   com o parâmetro `Height` já passado ao componente. */
/* Altura DEFINIDA do quadro do mapa. Valor do quadro ampliado: ~2× o original (297px), para
   que o mapa de calor e o ranking de bairros ocupem a mesma faixa vertical. O `OcorrenciaMap`
   mede `clientHeight` ao criar o mapa e ao enquadrar o conjunto, então a altura da caixa tem de
   estar resolvida antes do primeiro enquadramento — e precisa coincidir com o parâmetro
   `Height` passado ao componente (594px). */
.dash-map-frame {
    flex: 1 1 auto;
    height: 37.125rem;
    min-width: 0;
    border: var(--border-width-thin) solid var(--semantic-border-subtle);
    border-radius: 0.625rem;
    overflow: hidden;
    background-color: #f3f4f5;
}

.dash-map-frame .ocorrencia-map { border: 0; border-radius: 0; }
/* O ranking acompanha a altura do mapa: as cinco linhas se distribuem pela faixa inteira
   (`space-between`) em vez de ficarem amontoadas no topo. */
.dash-ranking {
    flex: 0 0 21rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.8125rem;
    padding: 1rem 0.875rem;
    border-radius: 0.625rem;
    background-color: #f3f4f5;
}

.dash-ranking-title { color: var(--semantic-content-default); font-size: 0.875rem; font-weight: 500; }
.dash-rank-row { display: flex; flex: 1 1 auto; flex-direction: column; justify-content: center; gap: 0.375rem; }
.dash-rank-head { display: flex; align-items: center; gap: 0.5rem; }
.dash-rank-name { flex: 1 1 auto; color: var(--semantic-content-secondary); font-size: 0.75rem; font-weight: 500; }
.dash-rank-value { color: #a43e27; font-size: 0.875rem; font-weight: 600; }
.dash-density { display: flex; align-items: center; gap: 0.625rem; }
.dash-density-label { color: #4c525a; font-size: 0.75rem; font-weight: 500; }
.dash-density-step { width: 3.375rem; height: 1.1875rem; border-radius: 0.25rem; flex: none; }

/* 07 / Retrabalho */
.dash-rework-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.875rem; }
.dash-rework-col {
    display: flex;
    flex-direction: column;
    gap: 0.6875rem;
    padding: 0.9375rem 0.875rem;
    border-radius: 0.625rem;
    background-color: #f3f4f5;
}

.dash-rework-title { color: var(--semantic-content-default); font-size: 0.875rem; font-weight: 500; }
.dash-rework-line { display: flex; flex-direction: column; gap: 0.3125rem; }
.dash-rework-head { display: flex; align-items: center; gap: 0.5rem; }
.dash-rework-name { flex: 1 1 auto; color: var(--semantic-content-secondary); font-size: 0.75rem; }
.dash-rework-rate { font-size: 0.75rem; font-weight: 500; }

/* Selos de status */
.dash-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.5rem;
    border: var(--border-width-thin) solid transparent;
    border-radius: 999px;
    font-size: 0.75rem;
    line-height: 1;
    white-space: nowrap;
}

.dash-pill--neutral { background-color: var(--semantic-background-secondary); border-color: var(--semantic-border-subtle); color: var(--semantic-content-muted); }
.dash-pill--info { background-color: #d3e0fb; border-color: #7ca1f3; color: #1f54c8; }
.dash-pill--warning { background-color: #fef9d2; border-color: #fae862; color: #c6a60a; }
.dash-pill--success { background-color: #d3eedf; border-color: #7acba0; color: #1d8f52; }
.dash-pill--critical { background-color: #f8d4d4; border-color: #ea7d7d; color: #bb2020; }

/* Paginação */
.dash-pager-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.dash-pager-summary { color: var(--semantic-content-muted); font-size: 0.75rem; }
.dash-pager { display: flex; align-items: center; gap: 0.25rem; }
.dash-pager-btn {
    min-width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: var(--border-width-thin) solid var(--semantic-border-subtle);
    border-radius: 0.375rem;
    background-color: var(--semantic-background-secondary);
    color: var(--semantic-content-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
}

.dash-pager-btn:disabled { cursor: not-allowed; opacity: 0.5; }
.dash-pager-btn.is-active {
    background-color: var(--semantic-action-brand-filled-container-default);
    border-color: var(--semantic-action-brand-filled-container-default);
    color: var(--semantic-action-brand-filled-on-container, #fdf2ef);
}

@media (max-width: 75rem) {
    .dash-pool { flex-direction: column; }
    .dash-pool-source,
    .dash-pool-source--out { flex-basis: auto; }
    .dash-chart-row { flex-direction: column; }
    .dash-insights { flex-basis: auto; }
    .dash-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dash-map-row { flex-direction: column; }
    .dash-ranking { flex-basis: auto; }
    .dash-rework-grid { grid-template-columns: minmax(0, 1fr); }
    .dash-table,
    .dash-table--flow { overflow-x: auto; }
}

/* ------------------------------------------------------------------------------------ *
 *  Dashboard do Líder de Equipe (Figma 4501:41490) — peças exclusivas deste painel.
 * ------------------------------------------------------------------------------------ */

.dash-toolbar--split { justify-content: space-between; }
.dash-toolbar-group { display: flex; align-items: center; gap: 0.75rem; }
.dash-toolbar-label { color: var(--semantic-content-muted); font-size: 0.75rem; font-weight: 500; }
.dash-toolbar-team.rz-dropdown { width: 13.75rem; }

.dash-index-row { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 0.75rem; align-items: stretch; }
.dash-index-card.rz-card { align-items: center; text-align: center; }
.dash-index-card .dash-card-head { justify-content: center; }
.dash-index-value { font-size: 1.375rem; font-weight: 500; }
.dash-tone-delay { color: #bb2020; }
.dash-tone-warning { color: #a0820c; }
.dash-index-base { color: var(--semantic-content-secondary); font-size: 0.875rem; font-weight: 500; }
.dash-index-card .dash-bar { width: 100%; }
.dash-index-alert {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.4375rem;
    padding: 0.5rem 0.5625rem;
    border-radius: 0.4375rem;
    background-color: #fceeee;
    text-align: start;
}

.dash-index-alert--warning { background-color: #fefdef; }
.dash-index-alert-main { color: #9a1b1b; font-size: 0.75rem; font-weight: 500; }
.dash-index-alert-note { color: #4c525a; font-size: 0.75rem; }

.dash-segment { display: flex; width: 100%; height: 1.25rem; overflow: hidden; border-radius: 0.25rem; }
.dash-segment-part { display: block; height: 100%; }
.dash-segment-legend { display: flex; width: 100%; }
.dash-segment-item { display: flex; flex-direction: column; gap: 0.375rem; align-items: center; min-width: 0; flex: 1 1 0; text-align: center; }
.dash-segment-name { font-size: 0.875rem; font-weight: 600; }
.dash-segment-share { color: var(--semantic-content-muted); font-size: 0.75rem; }

.dash-rework-head-row,
.dash-rework-row { grid-template-columns: 19.375rem 1fr 9.375rem; gap: 0.875rem; }
.dash-rework-track { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.dash-rework-track .dash-bar { flex: 1 1 auto; min-width: 0; }
.dash-rework-fraction { flex: 0 0 9.4375rem; color: #4c525a; font-size: 0.75rem; }

.dash-filters { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.dash-search.rz-textbox { flex: 1 1 24rem; min-width: 0; min-height: 2.625rem; }
.dash-filter.rz-dropdown { flex: 0 0 13.4375rem; }

.dash-prog-row { grid-template-columns: 31.5625rem 10.625rem 11.5625rem 13.4375rem 3.5rem; gap: 0.625rem; }

.dash-map-row--lider { align-items: stretch; }
.dash-map-frame--lider { flex: 1 1 auto; height: 31.875rem; }
.dash-occ-list {
    flex: 0 0 35.625rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.5625rem;
    border: var(--border-width-thin) solid var(--semantic-border-subtle);
    border-radius: 0.5rem;
    background-color: #ffffff;
    min-width: 0;
}

.dash-occ-list-title { color: var(--semantic-content-default); font-size: 0.875rem; font-weight: 500; }
.dash-occ-card {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem;
    min-height: 3.25rem;
    border: var(--border-width-thin) solid var(--semantic-border-subtle);
    border-radius: 0.4375rem;
}

.dash-occ-icon { flex: none; width: 1.5rem; height: 1.5rem; border-radius: 0.625rem; display: inline-flex; align-items: center; justify-content: center; }
.dash-occ-main { display: flex; flex-direction: column; min-width: 0; flex: 0 0 9.5rem; }
.dash-occ-category { color: #1b1d20; font-size: 0.875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-occ-district { color: var(--semantic-content-muted); font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-occ-codes { display: flex; flex-direction: column; gap: 0.3125rem; flex: 0 0 9.625rem; min-width: 0; }
.dash-occ-code { color: var(--semantic-content-muted); font-size: 0.625rem; font-weight: 500; letter-spacing: 0.03em; }
.dash-occ-card .dash-pill { flex: 0 0 auto; }
.dash-occ-card .rz-button { flex: none; }

@media (max-width: 75rem) {
    .dash-index-row { grid-template-columns: minmax(0, 1fr); }
    .dash-map-row--lider { flex-direction: column; }
    .dash-occ-list { flex-basis: auto; }
    .dash-toolbar--split { flex-direction: column; align-items: stretch; gap: 0.75rem; }
}

/* ===== Módulo Comunicação — camada do módulo =====
   Regras que o quadro de Comunicação precisa e que NÃO podem ser globais: `.dash-*` e
   `.pg-*` são compartilhados com Zeladoria/Ocorrências (C9) e `--rz-card-padding`,
   `--rz-grid-header-background-color` e `.rz-label` mudariam outras telas. Tudo aqui é
   escopado por `.com-*`, usa tokens semânticos e não impõe `display`/`flex-direction` a
   `RadzenStack`/`RadzenRow` (C2/C4). Origem: `Develop_Plans/plano-fidelidade-modulo-comunicacao.md`
   (T1-T11). */

/* Moldura da página: Figma 18/20/18/20 (dashboard) e 20/30/15/30 (wizard). O gap fica no
   parâmetro `Gap` do RadzenStack, não aqui. */
.com-page { min-width: 0; padding: 1.125rem 1.25rem; }
.com-page--wizard { padding: 1.25rem 1.875rem 0.9375rem; }

/* ── Página de público (edição e criação) ──────────────────────────────────────
   O corpo é uma cadeia flex com altura definida (a altura do corpo do shell) e
   `min-height: 0` em cada elo; assim a ÚNICA área que rola é a caixa de bairros
   (`.com-chip-grid`) e o rodapé com "Salvar"/"Cancelar" nunca sai da viewport.
   Nenhuma regra aqui impõe `display`/`flex-direction` a `RadzenStack`/`RadzenRow`:
   esses vêm das utilitárias `.rz-*` do tema, declaradas com `!important` (C2/C4).
   Nenhuma altura é escolhida — só o encadeamento de `height: 100%` + `min-height: 0`. */
.com-page--publico {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.com-page--publico .com-publico-row {
    flex: 1 1 auto;
    min-height: 0;
}

.com-page--publico .com-publico-col {
    height: 100%;
    min-height: 0;
}

.com-page--publico .com-publico-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.com-page--publico .com-publico-card-body,
.com-page--publico .com-publico-fields {
    flex: 1 1 auto;
    min-height: 0;
}

.com-page--publico .com-publico-fields .com-chip-select {
    flex: 1 1 auto;
    min-height: 0;
}

/* O box dos bairros é o contêiner que rola. `padding-inline-end` reserva a barra e evita
   que o anel de foco do chip seja cortado pela borda do cartão. */
.com-page--publico .com-publico-fields .com-chip-grid {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-inline-end: 0.25rem;
}

/* Rodapé de ações preso à base da página, fora da área rolável. */
.com-page--publico .com-page-footer {
    flex: none;
    position: sticky;
    bottom: 0;
    z-index: 1;
    background-color: var(--semantic-background-primary);
}

/* Páginas com rodapé fixo (detalhe e histórico da campanha): a moldura ocupa a altura
   do corpo do shell (`--rz-body` tem altura definida) e o espaçador empurra o rodapé
   para a base, como o "Espaçador flexível" do quadro. */
.com-page--fill { min-height: 100%; }
.com-page-spacer { flex: 1 1 auto; min-height: 1.25rem; }

/* Corpo de cartão que cresce para distribuir o conteúdo quando o cartão é esticado
   (par "Configuração" / "Projeção financeira" e cartões do dashboard). */
.com-card-fill { flex: 1 1 auto; min-height: 0; }

/* Cartão do módulo: raio 8, borda 1px `border/default`, padding 14/15 (T2).
   `.com-card.rz-card` (0,2,0) vence `.rz-card` da camada compilada sem `!important`. */
.com-card.rz-card {
    padding: 0.875rem;
    border: var(--border-width-regular) solid var(--semantic-border-default);
    border-radius: var(--border-radius-md);
    background-color: var(--semantic-background-primary);
    min-width: 0;
}
.com-card--detail.rz-card { padding: 0.9375rem; }

/* Rótulo de campo do módulo: 14/500 (T15). Escopado por `.com-page`/`.com-card` para
   não tocar Ocorrências/Zeladoria (C9). */
.com-page .rz-label,
.com-card .rz-label {
    font-weight: 500;
}

/* Cabeçalho de seção (T1): a escala vem do `SectionHeading`; a descrição usa
   `content/secondary`, como no quadro. */
.com-section-title { color: var(--semantic-content-default); }
.com-section-description {
    color: var(--semantic-content-secondary);
    font-size: var(--typescale-body-small-size);
    line-height: var(--typescale-body-small-line-height);
}

/* Situação como texto nas listagens (T4): mesma cor do tom da pílula, sem fundo nem
   contorno. A pílula continua sendo usada na identificação do detalhe. */
.com-status-text {
    font-size: var(--typescale-body-small-size);
    line-height: var(--typescale-body-small-line-height);
    color: var(--semantic-content-secondary);
    white-space: nowrap;
}
.com-status-text--success { color: var(--semantic-status-success-on-container); }
.com-status-text--info { color: var(--semantic-status-info-text); }
.com-status-text--warning { color: var(--semantic-status-warning-text); }
.com-status-text--critical { color: var(--semantic-status-critical-text); }

/* Indicador de métrica (T8): rótulo 12/500 + valor 16/500 + apoio 12/400. */
.com-metric { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.com-metric--inline { gap: 0.375rem; }
.com-metric-label {
    color: var(--semantic-content-secondary);
    font-size: var(--typescale-body-small-size);
    line-height: var(--typescale-body-small-line-height);
    font-weight: 500;
}
.com-metric-line { display: flex; align-items: baseline; gap: 0.5rem; min-width: 0; }
.com-metric-value {
    color: var(--semantic-content-default);
    font-size: var(--typescale-title-medium-size);
    line-height: var(--typescale-title-medium-line-height);
    font-weight: 500;
}
.com-metric-value--info { color: var(--semantic-status-info-text); }
.com-metric-value--success { color: var(--semantic-status-success-text); }
.com-metric-value--brand { color: var(--semantic-action-brand-filled-container-default); }
.com-metric-value--critical { color: var(--semantic-status-critical-text); }
.com-metric-hint {
    color: var(--semantic-content-muted);
    font-size: var(--typescale-body-small-size);
    line-height: var(--typescale-body-small-line-height);
}

/* Trilha de progresso do módulo (T8): fundo `background/secondary`, altura e raio vêm
   do componente. */
.com-track {
    overflow: hidden;
    width: 100%;
    height: 0.625rem;
    background-color: var(--semantic-background-secondary);
}
.com-track-fill { height: 100%; transition: width 200ms ease; }

/* Caixa de estimativa (T7): faixa `background/secondary`, raio 8, rótulo -> valor. */
.com-estimativa {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: var(--border-radius-md);
    background-color: var(--semantic-background-secondary);
    min-width: 0;
}
.com-estimativa--plain { padding: 0.75rem; }
.com-estimativa-title {
    color: var(--semantic-content-secondary);
    font-size: var(--typescale-body-small-size);
    line-height: var(--typescale-body-small-line-height);
    font-weight: 500;
}
.com-estimativa-note {
    color: var(--semantic-content-muted);
    font-size: var(--typescale-body-small-size);
    line-height: var(--typescale-body-small-line-height);
}

/* Verificação da revisão (T7/F25): marca textual + título 14/500 + descrição 12/400. */
.com-check-item { display: flex; align-items: flex-start; gap: 0.5rem; min-width: 0; }
.com-check-mark { flex: none; font-weight: 600; line-height: 1.4; }
.com-check-mark--ok { color: var(--semantic-status-success-on-container); }
.com-check-mark--error { color: var(--semantic-status-critical-text); }
.com-check-body { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.com-check-title {
    color: var(--semantic-content-default);
    font-size: var(--typescale-body-medium-size);
    line-height: var(--typescale-body-medium-line-height);
    font-weight: 500;
}
.com-check-description {
    color: var(--semantic-content-muted);
    font-size: var(--typescale-body-small-size);
    line-height: var(--typescale-body-small-line-height);
}

/* Lista de propriedades do detalhe (F16): linhas de 39 px com divisor de 1 px. */
.com-properties { display: flex; flex-direction: column; min-width: 0; }
.com-property-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 2.4375rem;
    border-bottom: var(--border-width-regular) solid var(--semantic-border-subtle);
}
.com-property-label {
    color: var(--semantic-content-secondary);
    font-size: var(--typescale-body-medium-size);
    line-height: var(--typescale-body-medium-line-height);
}
.com-property-value {
    color: var(--semantic-content-default);
    font-size: var(--typescale-body-medium-size);
    line-height: var(--typescale-body-medium-line-height);
    font-weight: 500;
    text-align: end;
}

/* Faixa de resultados das listagens (T10/T11): contagem 12/400 alinhada à direita acima
   da grade, e linha de filtros sem cartão. */
.com-results-bar { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.com-results-count {
    color: var(--semantic-content-secondary);
    font-size: var(--typescale-body-small-size);
    line-height: var(--typescale-body-small-line-height);
}

/* Grade do módulo (T3/F9/F11): cabeçalho `background/secondary` e células 12 px em
   `content/secondary`. A variável é declarada na própria grade, não no tema, para não
   alterar as demais grades do produto (C9). */
.com-grid.rz-data-grid { --rz-grid-header-background-color: var(--semantic-background-secondary); }
/* O grid do Radzen pinta o cabeçalho por uma regra própria; a variável sozinha não basta
   (medido: `neutral/50`). A regra declara a superfície `background/secondary` na grade do
   módulo, sem tocar no tema global (C9). */
.com-grid .rz-grid-table > thead > tr > th { background-color: var(--semantic-background-secondary); }
.com-grid .rz-grid-table > tbody > tr > td { color: var(--semantic-content-secondary); }
.com-grid--tall .rz-grid-table > tbody > tr { height: 3.75rem; }
.com-grid--medium .rz-grid-table > tbody > tr { height: 3.375rem; }
.com-grid--short .rz-grid-table > tbody > tr { height: 3rem; }

/* Ação de linha: Icon-Button 30x30 com contorno de marca (F9/F27). */
.com-row-action.rz-button.rz-variant-outlined {
    border-color: var(--semantic-action-brand-ghost-border-default);
    color: var(--semantic-action-brand-ghost-on-container);
    background-color: transparent;
}

/* Variante neutra tonal do botão (T6): superfície `background/secondary` com contorno
   `border/default`. Não existe aparência equivalente no Radzen 11.4.0 — o
   `Outlined + Base` é transparente. */
.com-button-neutral.rz-button.rz-variant-outlined {
    border-color: var(--semantic-border-default);
    background-color: var(--semantic-background-secondary);
    color: var(--semantic-content-default);
}
.com-button-neutral.rz-button.rz-variant-outlined:hover:not(.rz-state-disabled) {
    background-color: var(--semantic-background-tertiary);
}

/* Rodapé de página do módulo (F33/F40): texto/aviso à esquerda, ações à direita. */
.com-page-footer {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-block: 0.75rem;
    border-top: var(--border-width-regular) solid var(--semantic-border-subtle);
    background-color: var(--semantic-background-primary);
}
.com-page-footer-note {
    flex: 1 1 auto;
    color: var(--semantic-content-muted);
    font-size: var(--typescale-body-small-size);
    line-height: var(--typescale-body-small-line-height);
}

/* Rodapé de ações alinhado à direita (Figma "Campanha / Rodapé de ações": 42 px de
   altura, botões de 31, 10 px de intervalo e a divisória logo acima). */
.com-page-footer--end {
    justify-content: flex-end;
    gap: 0.625rem;
    padding-block: 0.6875rem 0;
    border-top: var(--border-width-regular) solid var(--semantic-border-subtle);
}

/* Linha de filtros das listagens (Figma "DS / Busca, filtros e ordenação", 40 px): a
   busca preenche a própria faixa — o Radzen não dá largura a um `.rz-textbox` solto — e
   os dropdowns ficam em 32 px pelo `InputSize.Small`. */
.com-filters { min-height: 2.5rem; }
.com-filters-search.rz-textbox { width: 100%; min-width: 0; }

/* Blocos ainda sem regra no módulo (T7). */
.com-percent {
    color: var(--semantic-content-secondary);
    font-size: var(--typescale-body-medium-size);
}
.com-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.com-repeticao { display: flex; align-items: flex-end; gap: 0.75rem; }
.com-alternativa {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    border-radius: var(--border-radius-md);
    background-color: var(--semantic-background-secondary);
}

/* Relatório de recusas (F26): linha com rótulo/valor e trilha de 12 px. */
.com-report-row { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.com-report-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.com-report-name {
    color: var(--semantic-content-secondary);
    font-size: var(--typescale-body-small-size);
    line-height: var(--typescale-body-small-line-height);
}
.com-report-value {
    color: var(--semantic-content-default);
    font-size: var(--typescale-body-small-size);
    line-height: var(--typescale-body-small-line-height);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

/* A moldura da página do módulo é o único recuo abaixo do cabeçalho: o content slot do
   RadzenLayout não soma padding (mesmo contrato de `.dash-page`). */
.rz-body:has(> .com-page) { padding: 0; }

/* Identificação da campanha (F13): faixa sem cartão, status -> nome -> secretaria. */
.com-identification {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding-inline: 0.75rem;
    min-width: 0;
}
.com-identification-name { color: var(--semantic-content-default); font-weight: 600; }
.com-identification-secretaria { color: var(--semantic-content-muted); font-weight: 500; }
/* Pílula da identificação: 26 px de altura, como no quadro (F13). Escopada para não
   alterar os selos das demais telas (C9). */
.com-identification .dash-pill { box-sizing: border-box; min-height: 1.625rem; align-items: center; }

/* Navegação local do módulo: recuo de 14 px (F14). A altura e o indicador de 2 px vêm
   de `.pg-localnav-tab`, que já corresponde ao quadro. */
.com-localnav { padding-inline-start: 0.875rem; }

/* Bloco TOTAL ESTIMADO (F17): faixa `background/secondary`, valor de 28 px em
   `status/info`. 28 px não existe na escala compilada (title-large = 22), por isso o
   valor é literal e escopado ao módulo (C3). */
.com-total {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.6875rem;
    border-radius: var(--border-radius-md);
    background-color: var(--semantic-background-secondary);
}
.com-total-label {
    color: var(--semantic-content-secondary);
    font-size: var(--typescale-body-small-size);
    line-height: var(--typescale-body-small-line-height);
    font-weight: 500;
    letter-spacing: 0.02em;
}
.com-total-value {
    color: var(--semantic-status-info-text);
    font-size: 1.75rem;
    line-height: 1.2;
    font-weight: 500;
}

/* Linha do tempo do histórico (F19): marcador de 12 px no corredor de 22 px, conector de
   1 px, colunas de 114 / livre / 190 px com 18 px de intervalo, 98 px por evento e
   conteúdo a 10 px do topo — sem divisória por evento, como no quadro. As cores de
   marcador e conector não têm variável própria (Q6); usam status/info e borda sutil. */
.com-timeline { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.com-timeline-item { display: flex; gap: 1.125rem; min-height: 6.125rem; }
.com-timeline-connector { position: relative; flex: 0 0 1.375rem; display: flex; justify-content: center; }
.com-timeline-connector::before {
    content: "";
    position: absolute;
    inset-block: 1.75rem 0.25rem;
    width: 1px;
    background-color: var(--semantic-border-subtle);
}
.com-timeline-item:last-child .com-timeline-connector::before { inset-block-end: auto; height: 1.25rem; }
.com-timeline-marker {
    position: relative;
    z-index: 1;
    margin-block-start: 0.625rem;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: var(--border-radius-full);
    background-color: var(--semantic-status-info-flag);
}
.com-timeline-grid {
    display: grid;
    grid-template-columns: 7.125rem minmax(0, 1fr) 11.875rem;
    align-items: start;
    gap: 1.125rem;
    flex: 1 1 auto;
    padding-block: 0.625rem 0;
    min-width: 0;
}
.com-timeline-date {
    color: var(--semantic-content-default);
    font-size: var(--typescale-body-medium-size);
    line-height: var(--typescale-body-medium-line-height);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.com-timeline-main { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.com-timeline-action {
    color: var(--semantic-content-default);
    font-size: var(--typescale-body-medium-size);
    line-height: var(--typescale-body-medium-line-height);
    font-weight: 600;
}
.com-timeline-detail {
    color: var(--semantic-content-muted);
    font-size: var(--typescale-body-small-size);
    line-height: var(--typescale-body-small-line-height);
}
.com-timeline-owner {
    color: var(--semantic-content-muted);
    font-size: var(--typescale-body-small-size);
    line-height: var(--typescale-body-small-line-height);
}

/* Wizard (F20/F24): cabeçalho de etapa e navegação FORA do workspace; o workspace não é
   cartão — a separação vem do divisor do rodapé. */
.com-wizard-workspace { min-width: 0; }
.com-form-panel { min-width: 0; }
.com-divider {
    margin: 0;
    border: 0;
    border-bottom: var(--border-width-regular) solid var(--semantic-border-subtle);
}
.com-field-label {
    color: var(--semantic-content-default);
    font-size: var(--typescale-body-medium-size);
    line-height: var(--typescale-body-medium-line-height);
    font-weight: 500;
}

/* "Mais atributos disponíveis" (Figma "Filtros adicionais / editáveis"): dois campos por
   linha, 12 px entre colunas e 10 px entre linhas. A grade é fluida — em telas estreitas
   cai para uma coluna sem perder atributo (C2). */
.com-attribute-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.625rem 0.75rem;
    min-width: 0;
}
@media (max-width: 40rem) {
    .com-attribute-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Alternativa de template (F24): bloco `background/secondary` com seleção, categoria e
   ações na mesma linha. */
.com-alternativa-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    min-width: 0;
}
.com-alternativa-select.rz-dropdown { flex: 0 1 21.5625rem; min-width: 0; }
.com-alternativa-categoria {
    flex: 1 1 auto;
    color: var(--semantic-content-muted);
    font-size: var(--typescale-body-small-size);
    line-height: var(--typescale-body-small-line-height);
}

/* Custo estimado da revisão (F25): rótulo 12/400 e valor 22/500. */
.com-cost { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.com-cost-label {
    color: var(--semantic-content-secondary);
    font-size: var(--typescale-body-small-size);
    line-height: var(--typescale-body-small-line-height);
}
.com-cost-value {
    color: var(--semantic-status-info-text);
    font-size: var(--typescale-title-large-size);
    line-height: var(--typescale-title-large-line-height);
    font-weight: 500;
}