/* /Components/Layout/Header.razor.rz.scp.css */
.menu-element[b-8743a8zq95] {
    transition: .4s;
}


[b-8743a8zq95] a.navigation-link {
    display: block;
    max-width: fit-content;
    text-decoration: none;
}

    [b-8743a8zq95] a.navigation-link:hover {
        color: var(--primary-orange);
    }

        [b-8743a8zq95] a.navigation-link:hover span {
            display: block;
            height: .1rem;
            animation: expand-b-8743a8zq95 .8s;
            background-color: var(--primary-orange);
        }

/*Ativa a barra quando clicado*/
[b-8743a8zq95] a.active span {
    display: block;
    height: .1rem;
    animation: expand-b-8743a8zq95 .8s;
    background-color: var(--primary-orange);
}



@keyframes expand-b-8743a8zq95 {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
/* Estilos do ReconnectModal (template oficial do Blazor Web App, .NET 10).
   Única adaptação: a regra aninhada `&[open]` do template foi escrita de forma plana
   (`#components-reconnect-modal[open]`), porque o rewriter de CSS com escopo do Blazor não
   garante suporte a CSS nesting — o resultado visual é idêntico. As classes de estado
   (components-reconnect-show/retying/failed/paused) são aplicadas por blazor.web.js. */

.components-reconnect-first-attempt-visible[b-sfxa6i2ntz],
.components-reconnect-repeated-attempt-visible[b-sfxa6i2ntz],
.components-reconnect-failed-visible[b-sfxa6i2ntz],
.components-pause-visible[b-sfxa6i2ntz],
.components-resume-failed-visible[b-sfxa6i2ntz],
.components-rejoining-animation[b-sfxa6i2ntz] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-sfxa6i2ntz],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-sfxa6i2ntz],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-sfxa6i2ntz],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-sfxa6i2ntz],
#components-reconnect-modal.components-reconnect-retrying[b-sfxa6i2ntz],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-sfxa6i2ntz],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-sfxa6i2ntz],
#components-reconnect-modal.components-reconnect-failed[b-sfxa6i2ntz],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-sfxa6i2ntz] {
    display: block;
}

#components-reconnect-modal[b-sfxa6i2ntz] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-sfxa6i2ntz 0.5s both;
}

#components-reconnect-modal[open][b-sfxa6i2ntz] {
    animation: components-reconnect-modal-slideUp-b-sfxa6i2ntz 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-sfxa6i2ntz 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

#components-reconnect-modal[b-sfxa6i2ntz]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-sfxa6i2ntz 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-sfxa6i2ntz {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-sfxa6i2ntz {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-sfxa6i2ntz {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-sfxa6i2ntz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-sfxa6i2ntz] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-sfxa6i2ntz] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

#components-reconnect-modal button:hover[b-sfxa6i2ntz] {
    background-color: #3b6ea2;
}

#components-reconnect-modal button:active[b-sfxa6i2ntz] {
    background-color: #6b9ed2;
}

.components-rejoining-animation[b-sfxa6i2ntz] {
    position: relative;
    width: 80px;
    height: 80px;
}

.components-rejoining-animation div[b-sfxa6i2ntz] {
    position: absolute;
    border: 3px solid #0087ff;
    opacity: 1;
    border-radius: 50%;
    animation: components-rejoining-animation-b-sfxa6i2ntz 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.components-rejoining-animation div:nth-child(2)[b-sfxa6i2ntz] {
    animation-delay: -0.5s;
}

@keyframes components-rejoining-animation-b-sfxa6i2ntz {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Contato.razor.rz.scp.css */

.btn-solucoes[b-s6daofq4cm] {
    margin-top: 1rem;
    padding: .4rem .2rem;
    padding-right: .2rem;
    white-space: nowrap;
    width: 100%;
}
#solucoes-title[b-s6daofq4cm] {
    margin-top: 4rem;
}





@media (max-width: 768px) {
    #solucoes-title[b-s6daofq4cm] {
        margin-top: 0rem;
    }
}
/* /Components/Pages/Homes/Home.razor.rz.scp.css */
/*Em telas menores que o Galaxy fold, permite a fonte quebrar. (Quase desnecessário)*/
@media(max-width: 270px) {
    .btn-home[b-orj8dqsah1] {
        white-space: normal;
        font-size: small;
    }
}

.bg-img-1000[b-orj8dqsah1] {
    /*background-image: url('/images/elements/jpg/1000.jpg');*/
    background-image: url('/images/elements/svg/+1000.svg');
    min-height: 288px;
    background-position: center;
    background-size: cover;
}
/*Expande a imagem com o +1.000 para telas a partir de md*/
@media(min-width: 1024px) {
    .bg-img-1000[b-orj8dqsah1] {
        min-height: 60vh;
    }
}

.graphics-el[b-orj8dqsah1] {
    max-height: 335px;
    max-width: 332px;
    min-height: 153px;
    min-width: 160px;
}
/* /Components/Pages/Managements/Communication/Campanhas/Wizard/EtapaPublicos.razor.rz.scp.css */
/* Critérios completos no grid de públicos do wizard: o texto é a regra do segmento e não
   deve ser truncado (o Figma exibe a regra inteira em uma linha). */
.com-wizard-publicos-grid .rz-cell-data[b-8o30026ohv],
.com-wizard-publicos-grid .rz-column-title-content[b-8o30026ohv] {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}
/* /Components/Pages/Managements/Communication/Campanhas/Wizard/EtapaRevisao.razor.rz.scp.css */
/* Resumo da campanha: título e secretaria são identificadores do registro e aparecem com
   peso de leitura, como no Figma ("Resumo da campanha"). */
.com-summary-strong[b-899q93qbbl] {
    font-weight: 500;
    color: var(--semantic-content-default);
}
/* /Components/Pages/Managements/Communication/Communication.razor.rz.scp.css */
/* Dashboard do módulo Comunicação — apenas o que não tem componente Radzen.
   Todos os valores vêm de tokens; nenhum literal de cor é escrito aqui. */

.com-kpi-block[b-98a3l3tarp] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.com-kpi-label[b-98a3l3tarp] {
    font-size: var(--typescale-body-small-size);
    font-weight: 500;
    color: var(--semantic-content-secondary);
}

.com-kpi-hint[b-98a3l3tarp] {
    font-size: var(--typescale-body-small-size);
    line-height: var(--typescale-body-small-line-height);
    color: var(--semantic-content-secondary);
}

/* Série diária: barras com altura proporcional (o Radzen não expõe gráfico).
   Altura de 143 px e rótulo de eixo de 10 px são os valores do quadro; o rótulo aparece
   a cada cinco dias, como no desenho. */
.com-chart[b-98a3l3tarp] {
    display: flex;
    align-items: flex-end;
    gap: 0.1875rem;
    height: 8.9375rem;
    padding-top: 0.5rem;
}

.com-chart-col[b-98a3l3tarp] {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    gap: 0.1875rem;
    height: 100%;
    min-width: 0;
}

.com-chart-stack[b-98a3l3tarp] {
    display: flex;
    flex: 1 1 auto;
    align-items: flex-end;
    gap: 0.125rem;
    width: 100%;
    min-height: 0;
}

.com-chart-bar[b-98a3l3tarp] {
    flex: 1 1 0;
    min-height: 2px;
    border-radius: var(--border-radius-sm) var(--border-radius-sm) 0 0;
}

.com-chart-label[b-98a3l3tarp] {
    font-size: 0.625rem;
    font-weight: 500;
    line-height: 1;
    color: var(--semantic-content-secondary);
}

.com-dot--elegiveis[b-98a3l3tarp] {
    background-color: var(--semantic-status-info-flag);
}

.com-dot--aceitos[b-98a3l3tarp] {
    background-color: var(--semantic-status-critical-flag);
}

.com-dot--impactados[b-98a3l3tarp] {
    background-color: var(--semantic-status-success-flag);
}

/* Barra de consentimento (16 px, raio 6) e de consumo (18 px, raio 5). Os raios de 6 e 5
   px não têm token (sm = 4, md = 8), por isso ficam literais e escopados ao módulo (C3). */
.com-consent-bar[b-98a3l3tarp],
.com-consumo-bar[b-98a3l3tarp] {
    display: flex;
    overflow: hidden;
    border-radius: 0.375rem;
    background-color: var(--semantic-background-secondary);
}

.com-consent-bar[b-98a3l3tarp] { height: 1rem; }

.com-consent-accepted[b-98a3l3tarp] {
    background-color: var(--semantic-status-success-flag);
}

.com-consent-refused[b-98a3l3tarp] {
    background-color: var(--semantic-status-critical-flag);
}

.com-consumo-bar[b-98a3l3tarp] {
    height: 1.125rem;
    border-radius: 0.3125rem;
}

.com-consent-legend[b-98a3l3tarp] {
    font-size: 0.75rem;
    font-weight: 500;
}

.com-consent-legend--accepted[b-98a3l3tarp] {
    color: var(--semantic-status-success-text);
}

.com-consent-legend--refused[b-98a3l3tarp] {
    color: var(--semantic-status-critical-text);
}

.com-campaign-row[b-98a3l3tarp] {
    display: grid;
    grid-template-columns: minmax(9rem, 1fr) minmax(0, 2.6fr) auto;
    align-items: center;
    gap: 0.75rem;
}

.com-campaign-name[b-98a3l3tarp] {
    font-size: var(--typescale-body-medium-size);
    font-weight: 500;
    color: var(--semantic-content-default);
}

.com-campaign-bars[b-98a3l3tarp] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 0;
}

.com-campaign-fraction[b-98a3l3tarp] {
    font-size: var(--typescale-body-medium-size);
    font-weight: 500;
    color: var(--semantic-content-default);
    font-variant-numeric: tabular-nums;
}

.com-consumo-total[b-98a3l3tarp] {
    font-weight: 500;
    color: var(--semantic-content-default);
}

.com-consumo-row[b-98a3l3tarp] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Marcador de 8x8 com raio 2 (F7): identifica a série dentro da lista de consumo. */
.com-legend-dot[b-98a3l3tarp] {
    flex: 0 0 auto;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 0.125rem;
}

.com-consumo-name[b-98a3l3tarp] {
    flex: 1 1 auto;
    font-size: 0.75rem;
    color: var(--semantic-content-secondary);
}

.com-consumo-value[b-98a3l3tarp] {
    font-size: 0.75rem;
    color: var(--semantic-content-default);
    font-variant-numeric: tabular-nums;
}

/* Legenda do quadro: quadrado de 9 px com raio 2 (F4/F6). */
.dash-legend-dot[b-98a3l3tarp] {
    width: 0.5625rem;
    height: 0.5625rem;
    border-radius: 0.125rem;
}
/* /Components/Pages/Managements/Communication/Publicos/PublicosLista.razor.rz.scp.css */
/* Cabeçalho e critérios do grid de públicos: rótulos completos em vez de truncados.
   A largura das colunas continua vindo do `Width` do RadzenDataGrid (C2). */
.com-publicos-grid .rz-column-title-content[b-red1ho5i08],
.com-publicos-grid .rz-cell-data[b-red1ho5i08] {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}
/* /Components/Pages/Managements/Occurrences/ImageEnlargeDialog.razor.rz.scp.css */
/* ==========================================================================
   ImageEnlargeDialog.razor.css — Component-scoped styles
   Only styles that cannot be expressed via Radzen properties or design tokens.
   ========================================================================== */

.image-enlarge-dialog[b-mdtp1zz5d7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.image-enlarge-content[b-mdtp1zz5d7] {
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
    cursor: zoom-out;
}

.image-enlarge-footer[b-mdtp1zz5d7] {
    width: 100%;
    max-width: 800px;
    display: flex;
    justify-content: flex-end;
}
/* /Components/Pages/Managements/Occurrences/NovoChamado.razor.rz.scp.css */
/* Layout ESCOPADO do formulário de Novo chamado. Só composição: o aspecto dos campos e
   dos cartões continua vindo da camada configurada (--rz-input-*, --rz-card-*), como
   exigem C2/C3. Nenhuma cor, borda ou altura de campo é redefinida aqui. */

/* A shell já é 100dvh e o `RadzenBody` é a sua área rolável; a página apenas ocupa a
   altura útil desse corpo. `gap` substitui margens soltas entre os blocos, e
   `min-height: 0` permite que o formulário encolha em vez de empurrar a página.
   O padding é o do quadro (12/16). Ele mora AQUI porque `app.css` zera o padding do
   `RadzenBody` para esta página — antes o padding do corpo (36px) somava ao intervalo
   entre o título e o primeiro cartão e a distância ficava muito maior que no desenho. */
.pg-nc-page[b-y3v0mq4k1a] {
    box-sizing: border-box;
    display: flex;
    height: 100%;
    min-height: 0;
    flex-direction: column;
    gap: 1rem;
    padding: 0.75rem 1rem;
    /* Âncora do visualizador de evidências, que é `position: absolute; inset: 0`. */
    position: relative;
}

/* Introdução fica no topo, com altura natural. `::deep` porque o RadzenStack é um
   componente filho: o atributo de escopo não chega ao elemento que ele renderiza. */
.pg-nc-page[b-y3v0mq4k1a]  .pg-nc-intro {
    flex: 0 0 auto;
}

/* Seções do formulário: cada bloco (RadzenRow/RadzenCard/ações) mantém a altura do seu
   conteúdo em vez de ser comprimido quando o espaço falta. */
.pg-nc-form[b-y3v0mq4k1a] {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    flex-direction: column;
    gap: 1rem;
    /* Em viewport baixo/estreito a rolagem acontece AQUI, e não no documento: nenhum campo
       é cortado e o cabeçalho da aplicação permanece no lugar. No desktop maximizado o
       conteúdo cabe e não aparece barra. */
    overflow-y: auto;
}

.pg-nc-form > *[b-y3v0mq4k1a] {
    /* As seções mantêm a altura do conteúdo: encolhê-las faria os campos do cartão vizinho
       (altura fixa de input) transbordarem sobre o cartão de baixo. O ajuste de altura em
       janela maximizada é adaptativo — ver o bloco `@media (max-height: 900px)` no fim. */
    flex: 0 0 auto;
}

/* Os dois cartões da primeira linha têm a MESMA altura: a `RadzenRow` já os estica
   (`AlignItems="Stretch"`), mas `RadzenColumn` não emite utilitária de layout e o
   `RadzenCard` não preenche a altura da coluna, então cada cartão ficava com a altura do
   seu conteúdo. `height: 100%` faz o cartão preencher a coluna esticada — a igualdade vem
   do alongamento da linha, sem fixar os 298px do quadro (C2). */
.pg-nc-page[b-y3v0mq4k1a]  .pg-nc-section {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* O conteúdo do cartão também é coluna flex para o campo de descrição absorver o espaço
   restante em vez de o cartão crescer. */
.pg-nc-page[b-y3v0mq4k1a]  .pg-nc-section > .rz-stack {
    flex: 1 1 auto;
    min-height: 0;
}

.pg-nc-page[b-y3v0mq4k1a]  .pg-nc-description {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
}

.pg-nc-page[b-y3v0mq4k1a]  .pg-nc-description > * {
    flex: 1 1 auto;
    min-height: 0;
}

/* A descrição é o único campo elástico do formulário: ocupa o espaço que sobra e, em janela
   baixa, encolhe até 3,5rem (≈3 linhas) em vez de empurrar a página para a rolagem. No
   maximizado grande ela fica nos 5 `Rows` do quadro — `flex-basis: auto` respeita a altura
   natural do `<textarea rows="5">`. */
.pg-nc-page[b-y3v0mq4k1a]  .pg-nc-description .rz-stack {
    min-block-size: 0;
    flex: 1 1 auto;
}

/* Ações do cadastro ficam FORA de `.pg-nc-form`, presas à base da página: o formulário
   rola e as ações continuam visíveis, como no quadro. */
.pg-nc-page[b-y3v0mq4k1a]  .pg-nc-actions {
    flex: 0 0 auto;
}

/* Evidências: bloco sem cartão, em largura cheia, abaixo da Localização. */
.pg-nc-page[b-y3v0mq4k1a]  .pg-nc-evidence {
    flex: 0 0 auto;
}

/* ── Janela maximizada em telas de trabalho (1366×768 · 1536×864) ─────────────────────
   Medido em 1536×864: o conteúdo do formulário somava 727px numa área útil de 660px e a
   página ganhava rolagem vertical mesmo sem nada a mais para ver. O ajuste é de DENSIDADE,
   não de composição (C1–C3): o recuo do cartão passa de 24 para 16px, o intervalo entre os
   campos de 12 para 8px, o campo de descrição desce de 5 para 4 linhas e os blocos passam a
   ter 12px entre si. Em viewport alto nada disto se aplica e o layout é o do Figma. */
@media (max-height: 900px) {
    .pg-nc-page[b-y3v0mq4k1a] {
        gap: 0.75rem;
    }

    .pg-nc-page[b-y3v0mq4k1a]  .pg-nc-form {
        gap: 0.75rem;
    }

    /* `--rz-card-padding` é a custom property que o `.rz-card` do projeto consome (24px). */
    .pg-nc-page[b-y3v0mq4k1a]  .pg-nc-section {
        --rz-card-padding: 1rem;
    }

    /* O RadzenStack interno do cartão é quem espaça título e campos. */
    .pg-nc-page[b-y3v0mq4k1a]  .pg-nc-section > .rz-stack {
        gap: 0.5rem;
    }

    .pg-nc-page[b-y3v0mq4k1a]  .pg-nc-description .rz-textarea {
        block-size: 4.25rem;
        min-block-size: 4.25rem;
    }
}

/* /Components/Pages/Managements/Occurrences/OccurrenceCallCard.razor.rz.scp.css */
/* ==========================================================================
   OccurrenceCallCard.razor.css — Component-scoped styles

   O CSS isolado do Blazor marca apenas os elementos escritos neste arquivo. Todo o
   conteúdo do cartão é composto por componentes Radzen (RadzenStack, RadzenImage,
   RadzenText), cujo HTML não recebe a marca de escopo; por isso as regras alcançam os
   descendentes com ::deep a partir do <div class="occurrence-call-card"> que existe no
   próprio componente.
   ========================================================================== */

/* Miniaturas do cartão. Existem apenas no cartão RECOLHIDO: é a tira que dá ao cartão
   recolhido a altura usada como referência pela galeria (ver abaixo). Expandido, a
   galeria grande ocupa o lugar e a tira deixa de ser renderizada. */
.occurrence-call-card[b-mwtzuqzs2z]  .occurrence-call-photo {
    max-width: 4rem;
    max-height: 4rem;
    object-fit: cover;
    border-radius: var(--border-radius-sm);
    cursor: zoom-in;
    transition: transform 0.15s ease;
}

.occurrence-call-card[b-mwtzuqzs2z]  .occurrence-call-photo:hover {
    transform: scale(1.05);
}

/* Descrição: recolhida é limitada a duas linhas; expandida mostra o texto inteiro. O
   atributo vive no próprio cartão para não depender do contêiner. */
.occurrence-call-card[data-expanded="true"][b-mwtzuqzs2z]  .occurrence-call-description {
    display: block;
    overflow: visible;
    -webkit-line-clamp: unset;
}

/* Galeria do chamado expandido ("Detalhes do chamado"). A altura de referência é a do
   cartão recolhido com descrição de uma linha: padding 1rem ×2 + cabeçalho 1.25rem +
   descrição 1.25rem + tira de miniaturas 4rem + três gaps de 0.5rem = 9rem (medido na
   página renderizada: 144px). Ela continua válida no estado expandido (onde a tira não
   existe mais), porque o número descreve o cartão RECOLHIDO.
   A altura da imagem vem de --occurrence-image-preview-max-height, declarada uma única
   vez na camada estrutural (o diálogo de solução consome a mesma medida): a imagem
   mantém a proporção original (height fixa, width auto). */
.occurrence-call-card[b-mwtzuqzs2z]  .occurrence-call-gallery {
    --occurrence-call-card-reference-height: 9rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding-block-end: 0.25rem;
}

.occurrence-call-card[b-mwtzuqzs2z]  .occurrence-call-gallery-image {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    height: var(--occurrence-image-preview-max-height);
    object-fit: contain;
    border-radius: var(--border-radius-sm);
    cursor: zoom-in;
    background: var(--semantic-background-secondary);
}

/* Canal sem ativo de marca (issue #67). O logo conhecido é um `RadzenImage` e recebe a caixa de
   1rem da camada estrutural (`.occurrence-call-channel`). O canal que não tem ativo é desenhado
   com `RadzenIcon`, cujo glifo é um `<i>` de 24px: sem esta regra ele estoura o quadro de 16px do
   logo e desalinha a linha. A medida repetida é a mesma do logo, não um valor novo. */
.occurrence-call-card[b-mwtzuqzs2z]  .occurrence-call-channel--icon i {
    font-size: 1rem;
    line-height: 1;
}
/* /Components/Pages/Managements/Occurrences/OccurrenceCallPhotoViewer.razor.rz.scp.css */
/* ==========================================================================
   OccurrenceCallPhotoViewer.razor.css — Component-scoped styles

   As regras que atingem imagens e botões usam ::deep: esses elementos vêm de
   componentes Radzen e por isso não recebem a marca de escopo do CSS isolado.
   ========================================================================== */

/* Cobre a área do diálogo de detalhe (o shell é o contêiner posicionado). O fundo é
   opaco para isolar a imagem do restante do conteúdo. */
.occurrence-photo-viewer[b-nkm9vxiokm] {
    position: absolute;
    inset: 0;
    /* Camada mais alta do diálogo de detalhe: acima da sobreposição do mapa (500) e
       do próprio mapa, que ficam isolados pela escala declarada em
       `figma-tokens/structural/40-patterns.css`. */
    z-index: var(--occurrence-dialog-layer-viewer, 600);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1.5rem;
    background: var(--semantic-background-primary);
}

.occurrence-photo-viewer:focus-visible[b-nkm9vxiokm] {
    outline: none;
}

/* Imagem em tamanho máximo dentro do diálogo, sempre com a proporção original: com
   largura e altura automáticas e as duas restrições, o navegador escala o elemento
   substituído preservando a razão. As setas ficam coladas às bordas da imagem. */
.occurrence-photo-viewer[b-nkm9vxiokm]  .occurrence-photo-viewer-image {
    flex: 0 1 auto;
    min-width: 0;
    min-height: 0;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: var(--border-radius-md);
}

.occurrence-photo-viewer[b-nkm9vxiokm]  .occurrence-photo-viewer-nav {
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--semantic-background-secondary);
    color: var(--semantic-content-default);
}

.occurrence-photo-viewer[b-nkm9vxiokm]  .occurrence-photo-viewer-close {
    position: absolute;
    inset-block-start: 0.75rem;
    inset-inline-end: 0.75rem;
    border-radius: 50%;
}
/* /Components/Pages/Managements/Occurrences/OccurrenceCancelDialog.razor.rz.scp.css */
/* ==========================================================================
   OccurrenceCancelDialog.razor.css — Component-scoped styles
   Only styles that cannot be expressed via Radzen properties or design tokens.
   ========================================================================== */

/* Ensure enough vertical room to avoid scrollbar at default window size (issue #30) */
.occurrence-cancel-dialog-shell[b-rbrga6fyns] {
    min-height: 420px;
}
/* /Components/Pages/Managements/Occurrences/OccurrenceCategoryDialog.razor.rz.scp.css */
/* ==========================================================================
   OccurrenceCategoryDialog.razor.css — Component-scoped styles
   Anchored positioning for category dialog (issue #28)
   ========================================================================== */

/* Anchored category dialog - positioned near the trigger button */
.occurrence-category-dialog-host.occurrence-category-dialog-anchored[b-zhytda8ah8] {
    /* The dialog will be positioned via Radzen's dialog service with custom CSS.
       This class allows the dialog to be positioned near the button using
       transform-origin and positioning logic. */
}

/* The dialog container itself gets this class for styling */
.occurrence-category-dialog-anchored .rz-dialog[b-zhytda8ah8] {
    /* Allow the dialog to be positioned naturally by the browser near the trigger */
    transform-origin: top left;
}
/* /Components/Pages/Managements/Occurrences/OccurrenceConfirmationDialog.razor.rz.scp.css */
/* ==========================================================================
   OccurrenceConfirmationDialog.razor.css — Component-scoped styles
   Only styles that cannot be expressed via Radzen properties or design tokens.

   Nenhuma regra de geometria: a janela é dimensionada pelo conteúdo (header +
   mensagem + rodapé) e a moldura vem da shell compartilhada. O `min-height: 300px`
   que existia aqui era a origem da faixa branca vazia sob a mensagem.
   ========================================================================== */
/* /Components/Pages/Managements/Occurrences/OccurrenceDetailDialog.razor.rz.scp.css */
/* ==========================================================================
   OccurrenceDetailDialog.razor.css — Component-scoped styles
   Only styles that cannot be expressed via Radzen properties or design tokens.
   ========================================================================== */

/* Print button: keep on one line (issue #22) */
.occurrence-detail-print[b-vgsepwn1rz] {
    white-space: nowrap;
}

/* Category button: same typography as "Cancelar ocorrência" (issue #32) */
.occurrence-detail-category-btn[b-vgsepwn1rz] {
    /* Inherits TextStyle from Variant.Text + ButtonStyle.Base — no extra CSS needed.
       This class exists as a hook if future design requires visual parity adjustment. */
}

/* Timeline: os estados dos marcadores são expressos pelo RadzenTimelineItem
   (PointStyle/PointVariant) e os tokens do componente ficam em
   figma-tokens/structural/40-patterns.css. Nada a declarar aqui. */
/* /Components/Pages/Managements/Occurrences/OccurrenceSolveDialog.razor.rz.scp.css */
/* ==========================================================================
   OccurrenceSolveDialog.razor.css — Component-scoped styles
   Only styles that cannot be expressed via Radzen properties or design tokens.

   A caixa de anexos (`.occurrence-evidence-*`) mora em `wwwroot/app.css`: ela é
   COMPARTILHADA com o registro de execução da programação
   (`ProgramacaoExecucaoDialog`), que precisa do mesmo upload com miniaturas e
   visualizador. Uma definição só evita duas cópias divergentes da mesma caixa.
   ========================================================================== */

/* /Components/Pages/Managements/Programacao/CentralOcorrencias.razor.rz.scp.css */
/* Estilos escopados da Central de ocorrências (vista em cartões). Valem só para esta página;
   `::deep` alcança o cartão (`OcorrenciaCentralCard`) e o RadzenPager, que são componentes
   filhos. Cores e bordas vêm dos tokens semânticos (C3). */

/* Selos de situação: a coluna dos selos ocupa o espaço entre os códigos e a ação de
   detalhe e centraliza o CONJUNTO, sem esticar cada selo. O alinhamento dos selos entre si
   vem de `AlignItems` do RadzenStack no cartão (a utilitária `.rz-align-items-*` do tema é
   `!important`; uma regra `align-items` aqui nunca venceria). */
.pg-central-list-scope[b-q4v67zsqr8]  .pg-central-card-main { flex: 1 1 0; }
.pg-central-list-scope[b-q4v67zsqr8]  .pg-central-card-actions { flex: 1 1 0; min-width: 0; }
.pg-central-list-scope[b-q4v67zsqr8]  .pg-central-card-stack { flex: 1 1 auto; }
.pg-central-list-scope[b-q4v67zsqr8]  .pg-central-card-stack .pg-tag { text-align: center; justify-content: center; }

/* Cartão do pin selecionado no mapa: promovido ao topo pelo código da página e destacado. */
.pg-central-list-scope[b-q4v67zsqr8]  .pg-central-card.is-selected {
    border-color: var(--semantic-action-brand-ghost-on-container);
    background-color: var(--semantic-background-secondary);
}

/* Rodapé: o resumo fica à esquerda e o paginador à direita; a linha de números do pager
   rola na horizontal (regra em app.css). */
.pg-central-list-scope[b-q4v67zsqr8] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
}

/* O paginador é a única linha de páginas: `PageNumbersCount` recebe o total, então a
   linha de números pode exceder a largura do rodapé e é ELA que rola (a regra da linha
   fica em `app.css`, no bloco `.pg-central-pager`). */
/* /Components/Pages/Managements/Programacao/NewCentralOcorrencias.razor.rz.scp.css */
/* Estilos escopados da Central de ocorrências em grade. Valem só para esta página; `::deep`
   alcança o RadzenDataGrid e o RadzenPager, que são componentes filhos. Cores e bordas vêm dos
   tokens semânticos (C3). */

/* Linha do pin selecionado: promovida ao topo pelo código da página e destacada SEM bordas
   internas entre as células — só o contorno da linha inteira (topo, base e as duas pontas). */
.pg-central-grid-scope[b-xy7902wj9i]  .pg-central-grid tr[data-map-selected="true"] > td {
    background-color: var(--semantic-background-secondary);
    border-inline: 0;
    border-block: var(--border-width-thin) solid var(--semantic-action-brand-ghost-on-container);
}
.pg-central-grid-scope[b-xy7902wj9i]  .pg-central-grid tr[data-map-selected="true"] > td:first-child {
    border-inline-start: var(--border-width-thin) solid var(--semantic-action-brand-ghost-on-container);
}
.pg-central-grid-scope[b-xy7902wj9i]  .pg-central-grid tr[data-map-selected="true"] > td:last-child {
    border-inline-end: var(--border-width-thin) solid var(--semantic-action-brand-ghost-on-container);
}

/* Selos centralizados nas colunas de situação e programação. */
.pg-central-grid-scope[b-xy7902wj9i]  .pg-central-grid-tag { width: 100%; }
.pg-central-grid-scope[b-xy7902wj9i]  .pg-central-grid-tag .pg-tag { text-align: center; }

/* Rodapé: o paginador nativo é a ÚNICA linha de páginas (`PageNumbersCount` = 4, janela
   deslizante). A faixa extra de números que existia abaixo foi removida por repetir a
   mesma informação; `app.css` cuida do alinhamento com o resumo. */
/* /Components/Pages/Managements/Programacao/ProgramacaoCriacao.razor.rz.scp.css */
/* ProgramacaoCriacao.razor.css — Component-scoped styles
   Only styles that cannot be expressed via Radzen properties or design tokens.

   A moldura de altura e a região rolável ficam em `wwwroot/app.css` (`.pg-criacao`,
   `.pg-criacao-scroll`, `.pg-criacao-hint`, `.pg-criacao-footer`): o CSS isolado de Blazor
   só aplica o escopo a elementos HTML, e o RadzenStack é componente — uma regra
   `.pg-criacao { height: 100% }` aqui nunca casaria com o elemento real.

   Pelo mesmo motivo a IGUALDADE DE ALTURA dos dois cartões da visão administrativa
   (`.pg-admin-cards`) mora em `wwwroot/app.css`: `RadzenRow`, `RadzenColumn` e `RadzenCard`
   são raízes de componente e não recebem o atributo de escopo do Blazor, então nenhum
   seletor deste arquivo as alcançaria. */

.pg-conflict-alert[b-yeq1751kgt] {
    margin-bottom: 0.5rem;
}

.pg-conflict-item[b-yeq1751kgt] {
    margin-top: 0.25rem;
    padding-left: 0.5rem;
    border-left: 2px solid var(--rz-warning-border-color, #ffc107);
}
/* /Components/Pages/Managements/Programacao/ProgramacaoFila.razor.rz.scp.css */
/* Estilos escopados da fila da Central de Programação (ProgramacaoFila). Valem só para
   esta página; `::deep` alcança o interior do RadzenDataGrid/RadzenPager, que são
   componentes filhos. Cores e bordas vêm dos tokens semânticos (C3). */

/* Wrapper que sustenta o grid e o rodapé dentro da coluna flex da página. A isolação de
   CSS do Blazor só aplica o escopo a elementos HTML; sem este wrapper as regras abaixo
   não alcançariam o interior dos componentes Radzen. */
.pg-fila-list[b-ed8fotmjml] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
}

/* O paginador nativo é o rodapé: linha superior de separação, como o rodapé anterior.
   `flex-wrap: nowrap` é load-bearing: o tema do Radzen declara `flex-wrap: wrap` em
   `.rz-pager`, então a linha de números caía para uma segunda linha e deixava o resumo
   sozinho na primeira (defeito relatado). `min-width: 0` permite ao item flex encolher
   abaixo do próprio conteúdo. */
.pg-fila-list[b-ed8fotmjml]  .rz-pager {
    min-width: 0;
    max-width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    border-top: var(--border-width-thin) solid var(--semantic-border-subtle);
}

/* O resumo cede espaço (reticências) antes de empurrar os números. */
.pg-fila-list[b-ed8fotmjml]  .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-fila-list[b-ed8fotmjml]  .rz-pager .rz-pager-pages {
    flex: 0 0 auto;
}

/* Ação do modo de seleção ("Programar"). O alinhamento à direita vem do próprio
   RadzenStack (JustifyContent="End"); aqui fica só a separação do rodapé. */
.pg-fila-list[b-ed8fotmjml]  .pg-fila-actions {
    padding-block: 0.625rem;
    border-top: var(--border-width-thin) solid var(--semantic-border-subtle);
}

/* Linha promovida pelo clique no pin do mapa: destaque de fundo sem as divisórias
   verticais internas — a linha lê como uma faixa única, e as bordas externas do cartão
   continuam no primeiro e no último célula. */
.pg-fila-list[b-ed8fotmjml]  .occurrence-validation-grid .rz-grid-table tbody tr > td.pg-fila-row--promoted {
    background-color: var(--semantic-brand-muted);
    border-inline-end: 0 none;
}

.pg-fila-list[b-ed8fotmjml]  .occurrence-validation-grid .rz-grid-table tbody tr > td.pg-fila-row--promoted:last-child {
    border-inline-end: var(--border-width-thin) solid var(--semantic-border-subtle);
}
/* /Components/Pages/Solutions/CardsMenu.razor.rz.scp.css */
/* /Components/Pages/Solutions/Solucoes.razor.rz.scp.css */

.btn-solucoes[b-1otsrzdo7b] {
    margin-top: 1rem;
    padding: .4rem .2rem;
    padding-right: .2rem;
    white-space: nowrap;
    width: 100%;
}
#solucoes-title[b-1otsrzdo7b] {
    margin-top: 4rem;
}





@media (max-width: 768px) {
    #solucoes-title[b-1otsrzdo7b] {
        margin-top: 0rem;
    }
}
/* /Components/Pages/Solutions/SolucoesCard.razor.rz.scp.css */

/*.scrollable-row > :first-child {
    margin-left: 300px;
    padding-left: 0;
}*/
/* /Components/Shared/Comunicacao/MunicpChipSelect.razor.rz.scp.css */
/* Chips de seleção múltipla (Figma: grade de 3 colunas, cada chip com caixa de marcação).
   A grade é `auto-fit` para colapsar em telas estreitas sem media query própria. */
.com-chip-grid[b-08di0lcuob] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0.5rem;
}

.com-chip[b-08di0lcuob] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    border-radius: var(--border-radius-md);
    border: 1px solid var(--semantic-border-subtle);
    background-color: var(--semantic-background-secondary);
    color: var(--semantic-content-default);
    font: inherit;
    font-size: 0.875rem;
    line-height: 1.33;
    text-align: start;
    cursor: pointer;
}

.com-chip:hover[b-08di0lcuob] {
    background-color: var(--semantic-background-tertiary);
}

.com-chip.is-selected[b-08di0lcuob] {
    border-color: var(--semantic-status-info-border);
    background-color: var(--semantic-status-info-container);
    color: var(--semantic-status-info-text);
}

.com-chip:focus-visible[b-08di0lcuob] {
    outline: 2px solid var(--semantic-status-info-text);
    outline-offset: 2px;
}

.com-chip-box[b-08di0lcuob] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    border: 1px solid var(--semantic-border-default);
    border-radius: var(--border-radius-xs);
    background-color: var(--semantic-background-primary);
    font-size: 0.75rem;
    line-height: 1;
}

.com-chip.is-selected .com-chip-box[b-08di0lcuob] {
    border-color: var(--semantic-status-info-flag);
    background-color: var(--semantic-status-info-flag);
    color: var(--semantic-background-primary);
}

.com-chip-label[b-08di0lcuob] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Components/Shared/Comunicacao/MunicpRadioCardGroup.razor.rz.scp.css */
.com-radio-group[b-corb6hxt40] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.com-radio-card[b-corb6hxt40] {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.5625rem;
    border: var(--border-width-regular) solid var(--semantic-border-subtle);
    border-radius: var(--border-radius-md, 8px);
    background-color: var(--semantic-background-primary);
}

.com-radio-card.is-selected[b-corb6hxt40] {
    border-color: var(--semantic-action-brand-filled-container-default);
    background-color: var(--semantic-action-brand-tonal-container-default);
}

.com-radio-input[b-corb6hxt40] {
    margin-top: 0.1875rem;
    accent-color: var(--semantic-action-brand-filled-container-default);
}

.com-radio-body[b-corb6hxt40] {
    display: flex;
    flex-direction: column;
    gap: 0.4375rem;
    cursor: pointer;
}

.com-radio-title[b-corb6hxt40] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--semantic-content-default);
}

.com-radio-description[b-corb6hxt40] {
    font-size: 0.75rem;
    line-height: 1.33;
    color: var(--semantic-content-muted);
}

.com-radio-input:focus-visible + .com-radio-body[b-corb6hxt40] {
    outline: 2px solid var(--semantic-status-info-text);
    outline-offset: 2px;
}
/* /Components/Shared/Comunicacao/MunicpRangeSlider.razor.rz.scp.css */
.com-range[b-gmlkh28z1c] {
    position: relative;
    display: flex;
    align-items: center;
    /* A trilha desenha 4 px e o polegar 16 px: a altura do contêiner é a do polegar, para
       que o foco e o próprio polegar não sejam cortados por um pai com `overflow`. */
    height: 1.5rem;
    /* SEM `padding`: a trilha e os dois `<input>` já recuam 0.5rem nas pontas (metade do
       polegar), para o centro do polegar de 0% e o de 100% coincidirem com as extremidades
       da trilha. Um `padding` aqui seria aplicado uma segunda vez, porque `left`/`right`
       percentuais de filhos posicionados resolvem contra a caixa de padding do contêiner. */
    box-sizing: border-box;
}

.com-range-track[b-gmlkh28z1c] {
    position: absolute;
    /* Acompanha o recuo dos inputs para trilha e polegares usarem a MESMA régua. */
    left: 0.5rem;
    right: 0.5rem;
    height: 0.25rem;
    border-radius: var(--border-radius-full, 9999px);
    background-color: var(--semantic-border-subtle);
}

.com-range-fill[b-gmlkh28z1c] {
    position: absolute;
    top: 0;
    bottom: 0;
    border-radius: inherit;
    background-color: var(--semantic-action-brand-filled-container-default);
}

.com-range-input[b-gmlkh28z1c] {
    position: absolute;
    left: 0.5rem;
    width: calc(100% - 1rem);
    height: 1.5rem;
    margin: 0;
    background: transparent;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
}

/* O polegar é a única superfície clicável (a trilha do `<input>` fica transparente e sem
   eventos) — mas cada polegar precisa de um empilhamento previsível quando os dois se
   encontram: `.com-range-input--max` vence por vir depois no DOM, então o `--min` sobe
   quando a faixa está colapsada no topo, senão ele ficaria inalcançável. */
.com-range-input--min[b-gmlkh28z1c] {
    z-index: 2;
}

.com-range-input--max[b-gmlkh28z1c] {
    z-index: 1;
}

.com-range-input[b-gmlkh28z1c]::-webkit-slider-runnable-track {
    background: transparent;
    border: 0;
}

.com-range-input[b-gmlkh28z1c]::-moz-range-track {
    background: transparent;
    border: 0;
}

.com-range-input[b-gmlkh28z1c]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    pointer-events: auto;
    width: 1rem;
    height: 1rem;
    /* Centraliza o polegar na trilha de 4 px (metade da diferença). */
    margin-top: -0.375rem;
    border-radius: var(--border-radius-full, 9999px);
    border: 2px solid var(--semantic-action-brand-filled-container-default);
    background-color: var(--semantic-background-primary);
    cursor: pointer;
}

.com-range-input[b-gmlkh28z1c]::-moz-range-thumb {
    pointer-events: auto;
    width: 1rem;
    height: 1rem;
    border-radius: var(--border-radius-full, 9999px);
    border: 2px solid var(--semantic-action-brand-filled-container-default);
    background-color: var(--semantic-background-primary);
    cursor: pointer;
}

.com-range-input:focus-visible[b-gmlkh28z1c]::-webkit-slider-thumb {
    outline: 2px solid var(--semantic-action-brand-shared-focus-ring);
    outline-offset: 2px;
}

.com-range-input:focus-visible[b-gmlkh28z1c]::-moz-range-thumb {
    outline: 2px solid var(--semantic-action-brand-shared-focus-ring);
    outline-offset: 2px;
}
/* /Components/Shared/Comunicacao/MunicpWhatsappPreview.razor.rz.scp.css */
/* Prévia do WhatsApp (Figma "Prévia do WhatsApp"): painel `background/secondary`,
   superfície branca com faixa de remetente, balão e nota. Apenas tokens do design
   system; nenhum literal de cor. */
.com-preview[b-1viowk3kho] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
    padding: 0.75rem;
    border-radius: var(--border-radius-lg);
    background-color: var(--semantic-background-secondary);
}

.com-preview-heading[b-1viowk3kho] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.com-preview-title[b-1viowk3kho] {
    color: var(--semantic-content-default);
    font-size: var(--typescale-title-medium-size);
    line-height: var(--typescale-title-medium-line-height);
    font-weight: 500;
}

.com-preview-subtitle[b-1viowk3kho] {
    color: var(--semantic-content-muted);
    font-size: var(--typescale-body-small-size);
    line-height: var(--typescale-body-small-line-height);
}

.com-preview-surface[b-1viowk3kho] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--border-radius-lg);
    background-color: var(--semantic-background-primary);
}

.com-preview-sender[b-1viowk3kho] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background-color: var(--semantic-background-secondary);
}

.com-preview-avatar[b-1viowk3kho] {
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--border-radius-full);
    background-color: var(--semantic-border-subtle);
}

.com-preview-channel[b-1viowk3kho] {
    color: var(--semantic-content-secondary);
    font-size: var(--typescale-body-small-size);
    font-weight: 500;
}

.com-preview-thread[b-1viowk3kho] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
}

.com-preview-bubble[b-1viowk3kho] {
    display: flex;
    flex-direction: column;
    gap: 0.3125rem;
    max-width: 88%;
    padding: 0.625rem 0.75rem;
    border-radius: var(--border-radius-md);
    background-color: var(--semantic-background-secondary);
    white-space: pre-wrap;
    word-break: break-word;
}

.com-preview-header[b-1viowk3kho] {
    color: var(--semantic-content-default);
    font-size: var(--typescale-body-medium-size);
    font-weight: 600;
}

.com-preview-body[b-1viowk3kho] {
    color: var(--semantic-content-default);
    font-size: var(--typescale-body-medium-size);
    line-height: 1.43;
}

.com-preview-footer[b-1viowk3kho] {
    color: var(--semantic-content-muted);
    font-size: var(--typescale-body-small-size);
}

.com-preview-button[b-1viowk3kho] {
    margin-top: 0.125rem;
    padding-top: 0.375rem;
    border-top: var(--border-width-thin) solid var(--semantic-border-subtle);
    color: var(--semantic-status-info-text);
    text-align: center;
    font-size: var(--typescale-label-medium-size);
    font-weight: 500;
}

.com-preview-note[b-1viowk3kho] {
    color: var(--semantic-content-muted);
    font-size: var(--typescale-body-small-size);
    line-height: var(--typescale-body-small-line-height);
}
/* /Components/Shared/Comunicacao/MunicpWizardStepper.razor.rz.scp.css */
/* Navegação de etapas (Figma "Navegação de etapas"): barra 1207x42, raio 8, gap 23,
   padding 12 / 0 / 14 / 14. A altura de 42 px é o alvo de comparação e é expressa por
   `min-height` + padding vertical + altura de linha, não por altura fixa: se o rótulo
   quebrar, a barra cresce (C1/C4). */
.com-stepper[b-h7squkslm5] {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 1.4375rem;
    min-height: 2.625rem;
    margin: 0;
    padding: 0 0 0 0.875rem;
    border-radius: var(--border-radius-md);
    list-style: none;
}

.com-step[b-h7squkslm5] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding-block: 0.6875rem;
    border-bottom: 2px solid transparent;
    color: var(--semantic-content-secondary);
    font-size: var(--typescale-label-medium-size);
    line-height: 1.125rem;
    font-weight: 500;
    white-space: nowrap;
}

.com-step.is-current[b-h7squkslm5] {
    border-bottom-color: var(--semantic-action-brand-filled-container-default);
    color: var(--semantic-action-brand-filled-container-default);
    font-weight: 600;
}

.com-step-number[b-h7squkslm5] {
    font-variant-numeric: tabular-nums;
}
/* /Components/Shared/Comunicacao/WizardFooter.razor.rz.scp.css */
/* Divisor e rodapé do wizard. `RadzenSeparator` não existe no Radzen 11.4.0, por isso o
   divisor é um `<hr>` estilizado com o token de borda (01-mapeamento.md G22). */
.com-divider[b-tcld6l27ls] {
    margin: 0;
    border: 0;
    border-bottom: 1px solid var(--semantic-border-subtle);
}

.com-wizard-footer[b-tcld6l27ls] {
    padding-block: 0.25rem;
}
/* /Components/Shared/OcorrenciaValidationGrid.razor.rz.scp.css */
.occurrence-group-panel[b-0jgyzanci8] {
    box-sizing: border-box;
    display: flex;
    flex: 0 0 21.875rem;
    flex-direction: column;
    gap: 1.25rem;
    padding: 0.75rem;
    overflow: hidden;
    border: 1px solid var(--semantic-border-subtle);
    border-radius: 0.5rem;
    background: var(--semantic-background-primary);
}

.occurrence-group-panel-heading[b-0jgyzanci8] {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
}

.occurrence-group-panel-heading[b-0jgyzanci8]  .occurrence-group-panel-title,
.occurrence-group-panel-heading[b-0jgyzanci8]  .occurrence-group-panel-description,
.occurrence-group-empty[b-0jgyzanci8]  .occurrence-group-empty-title,
.occurrence-group-empty[b-0jgyzanci8]  .occurrence-group-empty-description {
    margin: 0;
}

.occurrence-group-panel-heading[b-0jgyzanci8]  .occurrence-group-panel-title,
.occurrence-group-selected-card[b-0jgyzanci8]  .occurrence-group-neighborhood,
.occurrence-group-selected-card[b-0jgyzanci8]  .occurrence-group-calls {
    color: var(--semantic-content-default);
}

.occurrence-group-panel-heading[b-0jgyzanci8]  .occurrence-group-panel-description,
.occurrence-group-empty[b-0jgyzanci8]  .occurrence-group-empty-description,
.occurrence-group-selected-card[b-0jgyzanci8]  .occurrence-group-address,
.occurrence-group-panel-actions[b-0jgyzanci8]  .occurrence-group-count {
    color: var(--semantic-content-muted);
}

.occurrence-group-empty[b-0jgyzanci8] {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    text-align: center;
}

.occurrence-group-empty[b-0jgyzanci8]  .rz-icon {
    color: var(--semantic-content-default);
    font-size: 1.875rem;
}

.occurrence-group-empty[b-0jgyzanci8]  .occurrence-group-empty-title,
.occurrence-group-empty[b-0jgyzanci8]  .occurrence-group-empty-description {
    display: block;
    font-size: var(--typescale-body-small-size);
    line-height: var(--typescale-body-small-line-height);
}

.occurrence-group-selected-list[b-0jgyzanci8] {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.5rem;
    overflow-y: auto;
}

/* Figma "Ocorrência — <bairro>" (Agrupar Ocorrências, nó 456x350): the selected
   occurrence is a 432x52 row with padding 12/12/8/8, an 12px gap, a 4px radius and a
   1px brand border; columns are icon 24 · local (flexible) · chamados · idade ·
   pin 30 · ação. The previous 6px radius, 8px gap and 6/8 padding made it read as a
   generic card instead of the design's selected row. */
.occurrence-group-selected-card[b-0jgyzanci8] {
    box-sizing: border-box;
    display: grid;
    flex: 0 0 3.25rem;
    grid-template-columns: 1.5rem minmax(0, 1fr) auto auto 1.875rem auto;
    align-items: center;
    gap: 0.75rem;
    /* The design's 8px block inset includes its inside stroke, so the CSS border has
       to come out of the padding to keep the row at the design's 52px total. */
    padding: calc(0.5rem - var(--border-width-regular)) 0.75rem;
    border: var(--border-width-regular) solid var(--semantic-action-brand-ghost-border-default);
    border-radius: var(--border-radius-sm);
}

.occurrence-group-selected-card[b-0jgyzanci8]  .occurrence-group-category-icon {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.625rem;
    object-fit: contain;
}

.occurrence-group-selected-location[b-0jgyzanci8] {
    min-width: 0;
}

/* Figma: the locality is body-medium (14/20) and only the address drops to
   body-small (12/16) — the same pair the list rows use. */
.occurrence-group-selected-card[b-0jgyzanci8]  .occurrence-group-neighborhood {
    font-size: var(--typescale-body-medium-size);
    line-height: var(--typescale-body-medium-line-height);
}

.occurrence-group-selected-card[b-0jgyzanci8]  .occurrence-group-address {
    font-size: var(--typescale-body-small-size);
    line-height: var(--typescale-body-small-line-height);
}

.occurrence-group-selected-card[b-0jgyzanci8]  .occurrence-group-neighborhood,
.occurrence-group-selected-card[b-0jgyzanci8]  .occurrence-group-address {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.occurrence-group-selected-card[b-0jgyzanci8]  .occurrence-group-calls,
.occurrence-group-selected-card[b-0jgyzanci8]  .occurrence-group-created-at {
    text-align: center;
    white-space: nowrap;
}

/* Figma: "Quantidade" and the age are both 14/20 — the same step as the locality
   name — while the address is the only 12/16 line in the card. */
.occurrence-group-selected-card[b-0jgyzanci8]  .occurrence-group-calls,
.occurrence-group-selected-card[b-0jgyzanci8]  .occurrence-group-created-at {
    font-size: var(--typescale-body-medium-size);
    line-height: var(--typescale-body-medium-line-height);
}

.occurrence-group-selected-card[b-0jgyzanci8]  .occurrence-group-created-at {
    color: var(--semantic-content-muted);
}

/* The pin sits in a 30px track (Figma "Icon-Button"), so the 16px glyph is centred
   in it rather than left-aligned against the age. */
.occurrence-group-selected-card[b-0jgyzanci8]  .occurrence-group-location-icon {
    justify-self: center;
    color: var(--semantic-content-muted);
    font-size: 1rem;
}

/* Figma "Remover": 106x31, padding 16/16/8/8, radius 6, filled neutral *inverse*.
   `neutral-filled-container` is the light (neutral-25) container and rendered the
   action as a pale grey chip; the design fills it with the inverse container
   (#4c525a) and puts the on-inverse ink over it. */
.occurrence-group-selected-card[b-0jgyzanci8]  .occurrence-group-remove {
    box-sizing: border-box;
    min-width: 0;
    height: 1.9375rem;
    padding: 0.5rem 1rem;
    background: var(--semantic-action-neutral-inverse-container-default);
    color: var(--semantic-action-neutral-inverse-on-container);
    font-size: var(--typescale-label-medium-size);
}

.occurrence-group-selected-card[b-0jgyzanci8]  .occurrence-group-remove .rz-button-text {
    font-size: var(--typescale-label-medium-size);
    line-height: 1;
}

.occurrence-group-panel-actions[b-0jgyzanci8] {
    display: flex;
    flex: 0 0 2.375rem;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.occurrence-group-panel-actions[b-0jgyzanci8]  .rz-button {
    flex: 0 0 auto;
}

@media (max-width: 520px) {
    .occurrence-group-selected-card[b-0jgyzanci8] {
        grid-template-columns: 1.5rem minmax(0, 1fr) auto auto;
    }

    .occurrence-group-selected-card[b-0jgyzanci8]  .occurrence-group-created-at,
    .occurrence-group-selected-card[b-0jgyzanci8]  .occurrence-group-location-icon {
        display: none;
    }
}

/* #19 — Grid preenche o espaço vertical com paginador fixo no rodapé.
   O componente raiz (.occurrence-list) vira coluna flex; a toolbar fica
   flex:0 0 auto; o container do grid (.occurrence-grid-container) recebe
   flex:1 1 auto; min-height:0 para permitir rolagem interna. A rolagem
   ocorre DENTRO do .rz-body do RadzenDataGrid, não no documento. */
.occurrence-list[b-0jgyzanci8] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

/* #19 — O container do grid cresce para preencher o espaço disponível.
   min-height:0 é essencial para que o flex item possa encolher abaixo do
   seu content-size e ativar a rolagem interna do Radzen. */
.occurrence-grid-container[b-0jgyzanci8] {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* #19/#20 — O RadzenDataGrid em si deve ser flex:1 para empurrar o rodapé
   (paginator) para o fundo. O Radzen renderiza o pager fora da tabela,
   dentro do mesmo wrapper; com flex:1 no grid, o pager fica no rodapé. */
.occurrence-grid-container[b-0jgyzanci8]  .rz-data-grid {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* Rodapé de paginação: resumo à esquerda e números à direita são desenhados pelo
   RadzenPager NATIVO do grid (ShowPagingSummary + PagingSummaryTemplate). O seletor de
   tamanho de página não aparece mais aqui — ele vive no filtro.
   `flex-wrap: nowrap` é load-bearing: o tema do Radzen declara `flex-wrap: wrap` em
   `.rz-pager`, então a linha de números caía para uma segunda linha e desalinhava do
   resumo. `min-width: 0` permite ao item flex encolher abaixo do conteúdo. */
.occurrence-grid-container[b-0jgyzanci8]  .rz-pager {
    min-width: 0;
    max-width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
}

/* O resumo cede espaço (reticências) antes de empurrar os números. */
.occurrence-grid-container[b-0jgyzanci8]  .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. */
.occurrence-grid-container[b-0jgyzanci8]  .rz-pager .rz-pager-pages {
    flex: 0 0 auto;
}

/* #36 — Cabeçalhos fixos (sticky) com fundo opaco para não deixar texto
   das linhas atravessar. Usado via HeaderCssClass="occurrence-sticky-header"
   nas RadzenDataGridColumn. O ::deep é necessário porque o <th> é renderizado
   pelo RadzenDataGrid (componente filho) e o CSS isolado do Blazor não o alcança. */
[b-0jgyzanci8] .occurrence-sticky-header {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--semantic-background-primary);
    /* Borda inferior para separar visualmente do corpo ao rolar */
    border-bottom: 1px solid var(--semantic-border-subtle);
}

/* Garante que o fundo do cabeçalho cubra também quando há congelamento de colunas
   (Radzen acrescenta wrappers extras). */
[b-0jgyzanci8] .rz-header .occurrence-sticky-header,
[b-0jgyzanci8] .rz-frozen-header .occurrence-sticky-header,
[b-0jgyzanci8] .rz-pinned-header .occurrence-sticky-header {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--semantic-background-primary);
    border-bottom: 1px solid var(--semantic-border-subtle);
}

/* Ajuste do body do grid para rolagem suave dentro do container flex. */
.occurrence-grid-container[b-0jgyzanci8]  .rz-body {
    min-height: 0;
    overflow-y: auto;
}

/* Cabeçalhos ordenáveis: o Radzen desenha o ícone de ordenação DENTRO do título, e as
   colunas estreitas (56/62/80px) não podem perder o rótulo por causa dele. Gap menor e
   ícone um pouco mais compacto devolvem espaço ao texto sem mexer nas larguras de
   desenho; `white-space: nowrap` evita que o rótulo quebre em duas linhas nos 38px do
   cabeçalho. A ordenação em várias colunas continua ativa (AllowMultiColumnSorting). */
.occurrence-validation-grid[b-0jgyzanci8]  .rz-grid-table thead th .rz-column-title {
    gap: 0.125rem;
    white-space: nowrap;
}

.occurrence-validation-grid[b-0jgyzanci8]  .rz-grid-table thead th .rz-sortable-column-icon {
    flex: 0 0 auto;
    font-size: 0.75rem;
}

/* Linha promovida pelo pin do mapa: o destaque pertence à LINHA inteira, não a cada
   célula. A borda de marca fica só no contorno (block em todas as células, inline na
   primeira e na última) e as divisórias internas entre colunas são zeradas. O seletor
   repete `.rz-grid-table` para vencer o listramento do projeto, que chega a (0,3,3). */
.occurrence-grid-container[b-0jgyzanci8]  .occurrence-validation-grid .rz-grid-table tbody tr > td.ocorrencia-row--promoted {
    background-color: var(--semantic-background-secondary);
    border-inline: 0;
    border-block: var(--border-width-thin) solid var(--semantic-action-brand-ghost-on-container);
}

.occurrence-grid-container[b-0jgyzanci8]  .occurrence-validation-grid .rz-grid-table tbody tr > td.ocorrencia-row--promoted:first-child {
    border-inline-start: var(--border-width-thin) solid var(--semantic-action-brand-ghost-on-container);
}

.occurrence-grid-container[b-0jgyzanci8]  .occurrence-validation-grid .rz-grid-table tbody tr > td.ocorrencia-row--promoted:last-child {
    border-inline-end: var(--border-width-thin) solid var(--semantic-action-brand-ghost-on-container);
}