/* Fontes da marca: Plus Jakarta Sans (Regular 400, Medium 500). Pesos 600+ resolvem para Medium sem negrito sintético. */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/PlusJakartaSans-Regular.ttf") format("truetype");
  font-weight: 100 499;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/PlusJakartaSans-Medium.ttf") format("truetype");
  font-weight: 500 900;
  font-style: normal;
  font-display: swap;
}

/* Camada 1: base global — tipografia Radzen ligada à escala tipográfica Figma. */
:root {
  --rz-root-font-size: 16px;
  --rz-text-font-family: var(--font-theme-static-font-brand), system-ui, sans-serif;
  --rz-body-line-height: var(--typescale-body-medium-line-height);
  --rz-text-tertiary-color: var(--semantic-content-muted);
  --rz-text-contrast-color: var(--semantic-content-inverse);
  --rz-text-selection-background-color: var(--semantic-action-brand-tonal-container-default);
  --rz-text-selection-color: var(--semantic-action-brand-tonal-on-container);

  /* Display */
  --rz-text-display-h1-font-size: var(--typescale-display-large-size);
  --rz-text-display-h1-line-height: var(--typescale-display-large-line-height);
  --rz-text-display-h2-font-size: var(--typescale-display-medium-size);
  --rz-text-display-h2-line-height: var(--typescale-display-medium-line-height);
  --rz-text-display-h3-font-size: var(--typescale-display-small-size);
  --rz-text-display-h3-line-height: var(--typescale-display-small-line-height);
  --rz-text-display-h4-font-size: var(--typescale-headline-large-size);
  --rz-text-display-h4-line-height: var(--typescale-headline-large-line-height);
  --rz-text-display-h5-font-size: var(--typescale-headline-medium-size);
  --rz-text-display-h5-line-height: var(--typescale-headline-medium-line-height);
  --rz-text-display-h6-font-size: var(--typescale-headline-small-size);
  --rz-text-display-h6-line-height: var(--typescale-headline-small-line-height);

  /* Títulos H1–H6 */
  --rz-text-h1-font-size: var(--typescale-headline-large-size);
  --rz-text-h1-line-height: var(--typescale-headline-large-line-height);
  --rz-text-h2-font-size: var(--typescale-headline-medium-size);
  --rz-text-h2-line-height: var(--typescale-headline-medium-line-height);
  --rz-text-h3-font-size: var(--typescale-headline-small-size);
  --rz-text-h3-line-height: var(--typescale-headline-small-line-height);
  --rz-text-h4-font-size: var(--typescale-title-large-size);
  --rz-text-h4-line-height: var(--typescale-title-large-line-height);
  --rz-text-h5-font-size: var(--typescale-headline-small-size);
  --rz-text-h5-line-height: var(--typescale-headline-small-line-height);
  --rz-text-h6-font-size: var(--typescale-title-medium-size);
  --rz-text-h6-line-height: var(--typescale-title-medium-line-height);

  /* Subtítulos, corpo, legenda, botão e sobrelinha */
  --rz-text-subtitle1-font-size: var(--typescale-title-medium-size);
  --rz-text-subtitle1-line-height: var(--typescale-title-medium-line-height);
  --rz-text-subtitle1-font-weight: 500;
  --rz-text-subtitle2-font-size: var(--typescale-title-small-size);
  --rz-text-subtitle2-line-height: var(--typescale-title-small-line-height);
  --rz-text-subtitle2-font-weight: 500;
  --rz-text-body1-font-size: var(--typescale-body-large-size);
  --rz-text-body1-line-height: var(--typescale-body-large-line-height);
  --rz-text-body2-font-size: var(--typescale-body-medium-size);
  --rz-text-body2-line-height: var(--typescale-body-medium-line-height);
  --rz-text-body2-margin-block-end: 0;
  --rz-text-caption-font-size: var(--typescale-body-small-size);
  --rz-text-caption-line-height: var(--typescale-body-small-line-height);
  --rz-text-caption-margin-block-end: 0;
  --rz-text-button-font-size: var(--typescale-label-medium-size);
  --rz-text-button-line-height: var(--typescale-label-medium-line-height);
  --rz-text-button-text-transform: none;
  --rz-text-overline-font-size: var(--typescale-label-small-size);
  --rz-text-overline-line-height: var(--typescale-label-small-line-height);
  --rz-text-overline-font-weight: 500;
}

/* Todos os estilos tipográficos Radzen usam peso Medium e espaçamento de letra 0 (Figma: letter-spacing 0%). */
:root {
  --rz-text-display-h1-font-weight: 500;
  --rz-text-display-h2-font-weight: 500;
  --rz-text-display-h3-font-weight: 500;
  --rz-text-display-h4-font-weight: 500;
  --rz-text-display-h5-font-weight: 500;
  --rz-text-display-h6-font-weight: 500;
  --rz-text-h1-font-weight: 500;
  --rz-text-h2-font-weight: 500;
  --rz-text-h3-font-weight: 500;
  --rz-text-h4-font-weight: 500;
  --rz-text-h5-font-weight: 500;
  --rz-text-h6-font-weight: 500;

  --rz-text-display-h1-letter-spacing: 0;
  --rz-text-display-h2-letter-spacing: 0;
  --rz-text-display-h3-letter-spacing: 0;
  --rz-text-display-h4-letter-spacing: 0;
  --rz-text-display-h5-letter-spacing: 0;
  --rz-text-display-h6-letter-spacing: 0;
  --rz-text-h1-letter-spacing: 0;
  --rz-text-h2-letter-spacing: 0;
  --rz-text-h3-letter-spacing: 0;
  --rz-text-h4-letter-spacing: 0;
  --rz-text-h5-letter-spacing: 0;
  --rz-text-h6-letter-spacing: 0;
  --rz-text-subtitle1-letter-spacing: 0;
  --rz-text-subtitle2-letter-spacing: 0;
  --rz-text-body1-letter-spacing: 0;
  --rz-text-body2-letter-spacing: 0;
  --rz-text-caption-letter-spacing: 0;
  --rz-text-button-letter-spacing: 0;
  --rz-text-overline-letter-spacing: 0;

  --rz-text-display-h1-margin-block-end: 0;
  --rz-text-display-h2-margin-block-end: 0;
  --rz-text-display-h3-margin-block-end: 0;
  --rz-text-display-h4-margin-block-end: 0;
  --rz-text-display-h5-margin-block-end: 0;
  --rz-text-display-h6-margin-block-end: 0;
  --rz-text-h1-margin-block-end: 0;
  --rz-text-h2-margin-block-end: 0;
  --rz-text-h3-margin-block-end: 0;
  --rz-text-h4-margin-block-end: 0;
  --rz-text-h5-margin-block-end: 0;
  --rz-text-h6-margin-block-end: 0;
  --rz-text-subtitle1-margin-block-end: 0;
  --rz-text-subtitle2-margin-block-end: 0;
  --rz-text-body1-margin-block-end: 0;
  --rz-text-button-margin-block-end: 0;
  --rz-text-overline-margin-block-end: 0;
}

html,
body {
  min-height: 100%;
  margin: 0;
  font-family: var(--rz-text-font-family);
  font-size: var(--typescale-body-medium-size);
  line-height: var(--typescale-body-medium-line-height);
  color: var(--semantic-content-default);
  background: var(--semantic-background-primary);
  -webkit-font-smoothing: antialiased;
}

/* Radzen só aplica o rem-base de 16px quando há RadzenLayout; sem ele os rem herdavam os 14px do corpo. */
html {
  font-size: var(--rz-root-font-size);
}

/* Links usam a cor de marca de ghost; sem sublinhado nos estados padrão. */
:root {
  --rz-link-color: var(--semantic-action-brand-ghost-on-container);
  --rz-link-hover-color: var(--semantic-action-brand-filled-container-hover);
  --rz-link-text-decoration: none;
  --rz-link-hover-text-decoration: underline;
}

/* Foco visível: anel marca 24% (token shared/focus-ring), deslocamento 1px. */
:root {
  --rz-outline-width: 3px;
  --rz-outline-color: var(--semantic-action-brand-shared-focus-ring);
  --rz-outline-offset: 1px;
  --rz-ripple-duration: 0s;
}

/* Rolagem discreta alinhada aos neutros. */
:root {
  --rz-scrollbar-color: var(--semantic-border-default);
  --rz-scrollbar-size: 12px;
  --rz-scrollbar-border-radius: var(--border-radius-full);
}

/* Estados de validação nativos do Blazor ligados a tokens de status. */
.valid.modified:not([type="checkbox"]) {
  outline: var(--border-width-regular) solid var(--semantic-status-success-border);
}

.invalid {
  outline: var(--border-width-regular) solid var(--semantic-status-critical-border);
}

.validation-message {
  color: var(--semantic-status-critical-on-container);
  font-size: var(--typescale-body-small-size);
  line-height: var(--typescale-body-small-line-height);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Camada 2: variáveis e regras de componentes Radzen ligadas aos tokens Figma (Design System Municp). */
:root {
  /* ---- Botão (Text-Button / Icon-Button): 12px/500, padding 8×16, gap 8, raio 6; Pilled = raio total ---- */
  --rz-button-shadow: none;
  --rz-button-hover-shadow: none;
  --rz-button-focus-shadow: none;
  --rz-button-active-shadow: none;
  --rz-button-focus-gradient: none;
  --rz-button-hover-gradient: none;
  --rz-button-active-gradient: none;
  --rz-button-disabled-opacity: 1;
  --rz-button-focus-outline: var(--rz-outline-width) solid var(--components-button-color-focus-ring);
  --rz-button-focus-outline-offset: var(--rz-outline-offset);

  /* ---- Entradas (Input outlined 40px; Dropdown 32px) ---- */
  --rz-input-size-md: 2.5rem;
  --rz-input-padding-block-md: 0.5rem;
  --rz-input-padding-inline-md: 0.75rem;
  --rz-input-font-size-md: var(--typescale-body-medium-size);
  --rz-input-size-sm: 2rem;
  --rz-input-padding-block-sm: 0.375rem;
  --rz-input-padding-inline-sm: 0.75rem;
  --rz-input-font-size-sm: var(--typescale-body-medium-size);
  --rz-input-size-lg: 2.75rem;
  --rz-input-padding-block-lg: 0.625rem;
  --rz-input-padding-inline-lg: 0.875rem;
  --rz-input-font-size-lg: var(--typescale-body-medium-size);
  --rz-input-border-block-end: var(--rz-input-border);
  --rz-input-hover-border: var(--border-width-regular) solid var(--semantic-content-muted);
  --rz-input-hover-border-block-end: var(--rz-input-hover-border);
  --rz-input-hover-background-color: var(--semantic-background-primary);
  --rz-input-focus-border: var(--border-width-thick) solid var(--semantic-border-brand);
  --rz-input-focus-border-block-end: var(--rz-input-focus-border);
  --rz-input-focus-background-color: var(--semantic-background-primary);
  --rz-input-focus-outline: var(--rz-outline-width) solid var(--semantic-action-brand-shared-focus-ring);
  --rz-input-focus-outline-offset: 1px;
  --rz-input-disabled-background-color: var(--semantic-action-disabled-filled-container);
  --rz-input-disabled-border: var(--border-width-regular) solid var(--semantic-action-disabled-filled-container);
  --rz-input-disabled-border-block-end: var(--rz-input-disabled-border);
  --rz-input-disabled-color: var(--semantic-action-disabled-shared-on-container);
  --rz-input-disabled-placeholder-color: var(--semantic-action-disabled-shared-on-container);
  --rz-input-disabled-opacity: 1;

  /* ---- Dropdown ---- */
  --rz-dropdown-open-border: var(--border-width-thick) solid var(--semantic-border-brand);
  --rz-dropdown-open-background-color: var(--semantic-background-primary);
  --rz-dropdown-panel-border: var(--border-width-regular) solid var(--semantic-border-default);
  --rz-dropdown-panel-padding: 0;
  --rz-dropdown-panel-shadow: var(--rz-shadow-2);
  --rz-dropdown-items-margin: 0;
  --rz-dropdown-items-padding: var(--border-radius-sm);
  --rz-dropdown-item-padding: 0.625rem 0.75rem;
  --rz-dropdown-item-font-size: var(--typescale-body-medium-size);
  --rz-dropdown-item-hover-background-color: var(--semantic-action-neutral-ghost-container-hover);
  --rz-dropdown-item-hover-color: var(--semantic-action-neutral-ghost-on-container);
  --rz-dropdown-item-selected-background-color: var(--semantic-action-neutral-ghost-container-pressed);
  --rz-dropdown-item-selected-color: var(--semantic-action-neutral-ghost-on-container);
  --rz-dropdown-item-selected-hover-background-color: var(--semantic-action-neutral-ghost-container-pressed);
  --rz-dropdown-item-selected-hover-color: var(--semantic-action-neutral-ghost-on-container);

  /* ---- Checkbox (18px, raio 2, preenchimento de marca) ---- */
  --rz-checkbox-width: 1.125rem;
  --rz-checkbox-height: 1.125rem;
  --rz-checkbox-border-radius: 2px;
  --rz-checkbox-border-width: 2px;
  --rz-checkbox-checked-background-color: var(--semantic-action-brand-filled-container-default);
  --rz-checkbox-checked-border: var(--border-width-thick) solid var(--semantic-action-brand-filled-container-default);
  --rz-checkbox-checked-color: var(--semantic-action-brand-filled-on-container);
  --rz-checkbox-checked-hover-background-color: var(--semantic-action-brand-filled-container-hover);
  --rz-checkbox-checked-hover-border: var(--border-width-thick) solid var(--semantic-action-brand-filled-container-hover);
  --rz-checkbox-focus-outline: var(--rz-outline-width) solid var(--semantic-action-brand-shared-focus-ring);

  /* ---- Cartão / painel ---- */
  --rz-card-padding: 1.5rem;
  --rz-card-shadow: none;
  --rz-card-border: var(--border-width-regular) solid var(--semantic-border-subtle);
  --rz-panel-shadow: none;

  /* ---- Tabela (RadzenDataGrid): cabeçalho 40px terciário, linhas 48px com divisor sutil ---- */
  --rz-grid-background-color: var(--semantic-background-primary);
  --rz-grid-border: none;
  --rz-grid-border-radius: 0;
  --rz-grid-shadow: none;
  --rz-grid-header-background-color: var(--semantic-background-tertiary);
  --rz-grid-header-color: var(--semantic-content-muted);
  --rz-grid-header-font-size: var(--typescale-body-small-size);
  --rz-grid-header-font-weight: 500;
  --rz-grid-header-line-height: var(--typescale-body-small-line-height);
  --rz-grid-header-padding: 0 0.5rem;
  --rz-grid-header-cell-padding: 0;
  --rz-grid-header-cell-border: none;
  --rz-grid-header-cell-border-bottom: none;
  --rz-grid-header-title-padding-inline: 0;
  --rz-grid-cell-padding: 0 0.5rem;
  --rz-grid-cell-border: none;
  --rz-grid-right-cell-border: none;
  --rz-grid-bottom-cell-border: var(--border-width-regular) solid var(--semantic-border-subtle);
  --rz-grid-cell-color: var(--semantic-content-muted);
  --rz-grid-cell-font-size: var(--typescale-body-small-size);
  --rz-grid-cell-line-height: var(--typescale-body-small-line-height);
  --rz-grid-hover-background-color: var(--semantic-action-neutral-ghost-container-hover);
  --rz-grid-hover-color: var(--semantic-content-muted);
  --rz-grid-selected-background-color: var(--semantic-brand-muted);
  --rz-grid-selected-color: var(--semantic-content-default);
  --rz-grid-stripe-background-color: var(--semantic-background-primary);
  --rz-grid-stripe-odd-background-color: var(--semantic-background-primary);
  --rz-grid-sort-icon-color: var(--semantic-content-subtle);

  /* ---- Paginação (itens 36×36, raio 8, selecionado = preenchimento de marca) ---- */
  --rz-pager-background-color: transparent;
  --rz-pager-padding: 0;
  --rz-pager-gap: 0.125rem;
  --rz-pager-button-border-radius: var(--border-radius-md);
  --rz-pager-numeric-button-min-width: 2.25rem;
  --rz-pager-numeric-button-padding: 0;
  --rz-pager-numeric-button-color: var(--semantic-content-muted);
  --rz-pager-numeric-button-hover-background-color: var(--semantic-action-neutral-ghost-container-hover);
  --rz-pager-numeric-button-hover-color: var(--semantic-content-muted);
  --rz-pager-numeric-button-selected-background-color: var(--semantic-action-brand-filled-container-default);
  --rz-pager-numeric-button-selected-color: var(--semantic-action-brand-filled-on-container);
  --rz-pager-numeric-button-selected-padding: 0;
  --rz-pager-back-button-color: var(--semantic-content-muted);
  --rz-pager-next-button-color: var(--semantic-content-muted);
  --rz-pager-summary-color: var(--semantic-content-muted);
  --rz-pager-summary-font-size: var(--typescale-body-small-size);
  --rz-pager-summary-padding: 0;

  /* ---- Selos / chips de status (pílula 4×10, 12px/500) ---- */
  --rz-badge-font-size: var(--typescale-body-small-size);
  --rz-badge-font-weight: 500;
  --rz-badge-line-height: 14px;
  --rz-badge-letter-spacing: 0;
  --rz-badge-text-transform: none;
  --rz-badge-padding: 0.25rem 0.625rem;
  --rz-badge-pill-padding: 0.25rem 0.625rem;
  --rz-badge-pill-border-radius: var(--border-radius-full);
  --rz-chip-font-size: var(--typescale-body-small-size);
  --rz-chip-font-weight: 500;
  --rz-chip-border-radius: var(--border-radius-md);
  --rz-chip-padding-block: 0.375rem;
  --rz-chip-padding-inline: 0.625rem;

  /* ---- Menus, diálogos, tooltip e abas ---- */
  --rz-menu-background-color: var(--semantic-background-primary);
  --rz-menu-border: var(--border-width-regular) solid var(--semantic-border-default);
  --rz-menu-item-hover-background-color: var(--semantic-action-neutral-ghost-container-hover);
  --rz-menu-item-selected-background-color: var(--semantic-action-neutral-ghost-container-pressed);
  --rz-menu-item-selected-color: var(--semantic-action-neutral-ghost-on-container);
  --rz-menu-item-color: var(--semantic-action-neutral-ghost-on-container);
  --rz-menu-item-hover-color: var(--semantic-action-neutral-ghost-on-container);
  --rz-profile-menu-background-color: var(--semantic-background-primary);
  --rz-profile-menu-border: var(--border-width-regular) solid var(--semantic-border-default);
  --rz-profile-menu-item-hover-background-color: var(--semantic-action-neutral-ghost-container-hover);
  --rz-dialog-title-font-size: var(--typescale-title-large-size);
  --rz-dialog-title-line-height: var(--typescale-title-large-line-height);
  --rz-dialog-shadow: var(--rz-shadow-3);
  --rz-dialog-mask-background-color: var(--primitives-alpha-black-24);
  --rz-tooltip-background-color: var(--semantic-action-neutral-inverse-container-default);
  --rz-tooltip-color: var(--semantic-action-neutral-inverse-on-container);
  --rz-tooltip-font-size: var(--typescale-body-small-size);
  --rz-tooltip-padding: 0.25rem 0.5rem;
  --rz-tabs-tab-text-transform: none;
  --rz-tabs-tab-letter-spacing: 0;
  --rz-tabs-tab-font-size: var(--typescale-label-medium-size);
  --rz-tabs-tab-color: var(--semantic-content-muted);
  --rz-tabs-tab-selected-color: var(--semantic-action-brand-ghost-on-container);
  --rz-tabs-tab-selected-top-border-color: var(--semantic-action-brand-ghost-on-container);
  --rz-radio-checked-border: var(--border-width-thick) solid var(--semantic-action-brand-filled-container-default);
  --rz-radio-circle-background-color: var(--semantic-action-brand-filled-container-default);
  --rz-switch-checked-background-color: var(--semantic-action-brand-tonal-container-default);
  --rz-switch-checked-circle-background-color: var(--semantic-action-brand-filled-container-default);
}

/* ===== Botões ===== */
.rz-button {
  font-family: inherit;
  font-size: var(--components-button-dimension-text-size);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  border-width: var(--components-button-dimension-border-width);
  border-style: solid;
  border-color: transparent;
  box-shadow: none;
}

.rz-button.rz-button-md {
  min-height: 0;
  height: auto;
  padding: calc(var(--components-button-dimension-scale-padding-v) - var(--components-button-dimension-border-width)) calc(var(--components-button-dimension-scale-padding-h) - var(--components-button-dimension-border-width));
  line-height: calc(var(--components-button-dimension-text-size) * 1.26);
}

/* Figma: a borda é interna (stroke inside) e o rótulo usa a altura de linha do botão, não a do corpo. */
.rz-button .rz-button-box,
.rz-button .rz-button-text {
  line-height: inherit;
}

.rz-button .rz-button-box {
  gap: var(--components-button-dimension-scale-gap);
}

.rz-button .rz-button-icon-left,
.rz-button img {
  width: var(--components-button-dimension-scale-icon-height);
  height: var(--components-button-dimension-scale-icon-height);
  object-fit: contain;
}

/* Bot\u00e3o apenas com \u00edcone (Icon-Button): cont\u00eainer 30\u00d730 (padding 7 + borda 1 + \u00edcone 14), raio 6. */
.rz-button:not(:has(.rz-button-text)) {
  min-width: 0;
  padding: 0.4375rem;
}

.rz-button:not(.rz-button-lg):not(:has(.rz-button-text)) {
  box-sizing: border-box;
  width: 1.875rem;
  height: 1.875rem;
}

.rz-button:not(:has(.rz-button-text)) img {
  width: 0.875rem;
  height: 0.875rem;
}

/* Figma icon container is 14px with 1px padding, so the glyph is drawn at 12px (stroke weights assume this). */
.rz-button:not(.rz-button-lg) img {
  box-sizing: border-box;
  padding: 1px;
}

/* Tamanho Large sem texto = ícone "nu" de 24px (ex.: ícones de categoria de Zeladoria). */
.rz-button.rz-button-lg:not(:has(.rz-button-text)) {
  padding: 0;
  min-height: 0;
  height: auto;
  border-radius: var(--border-radius-2xl);
}

.rz-button.rz-button-lg:not(:has(.rz-button-text)) img {
  width: 1.5rem;
  height: 1.5rem;
}

/* Estados Hover/Pressed das variantes Text/Outlined seguem as camadas alfa do aspecto ghost. */
.rz-button.rz-variant-text:hover:not(.rz-state-disabled),
.rz-button.rz-variant-outlined:hover:not(.rz-state-disabled) {
  background-color: var(--semantic-action-neutral-ghost-container-hover);
}

.rz-button.rz-variant-text:active:not(.rz-state-disabled),
.rz-button.rz-variant-outlined:active:not(.rz-state-disabled) {
  background-color: var(--semantic-action-neutral-ghost-container-pressed);
}

.rz-button.rz-primary.rz-variant-text:hover:not(.rz-state-disabled),
.rz-button.rz-primary.rz-variant-outlined:hover:not(.rz-state-disabled) {
  background-color: var(--semantic-action-brand-ghost-container-hover);
}

.rz-button.rz-primary.rz-variant-text:active:not(.rz-state-disabled),
.rz-button.rz-primary.rz-variant-outlined:active:not(.rz-state-disabled) {
  background-color: var(--semantic-action-brand-ghost-container-pressed);
}

.rz-button.rz-primary.rz-variant-text.rz-shade-default:not(.rz-state-disabled),
.rz-button.rz-primary.rz-variant-outlined.rz-shade-default:not(.rz-state-disabled) {
  color: var(--semantic-action-brand-ghost-on-container);
}

.rz-button.rz-primary.rz-variant-outlined {
  border-color: var(--semantic-action-brand-ghost-border-default);
}

.rz-button.rz-secondary.rz-variant-outlined,
.rz-button.rz-base.rz-variant-outlined {
  border-color: var(--semantic-action-neutral-ghost-border-default);
}

.rz-button.rz-base.rz-variant-text.rz-shade-default:not(.rz-state-disabled),
.rz-button.rz-base.rz-variant-outlined.rz-shade-default:not(.rz-state-disabled) {
  color: var(--semantic-action-neutral-ghost-on-container);
}

.rz-button.rz-state-disabled,
.rz-button:disabled {
  color: var(--semantic-action-disabled-shared-on-container);
  opacity: 1;
}

/* A tinta desabilitada precisa vencer o tom da variante: `.rz-button.rz-primary.rz-shade-default`
   (0,3,0) do tema-base fixa `--rz-on-primary` mesmo com o botão desabilitado, e o resultado era
   tinta clara sobre o container cinza de desabilitado (contraste invertido). A regra abaixo
   empata em especificidade e vence por ordem de folha; botões já cobertos por
   `.rz-button.rz-state-disabled` continuam com o mesmo token, sem mudança visual. */
.rz-button.rz-state-disabled.rz-shade-default,
.rz-button:disabled.rz-shade-default {
  color: var(--semantic-action-disabled-shared-on-container);
}

.rz-button.rz-state-disabled.rz-variant-filled,
.rz-button.rz-state-disabled.rz-variant-flat,
.rz-button:disabled.rz-variant-filled,
.rz-button:disabled.rz-variant-flat {
  background-color: var(--semantic-action-disabled-filled-container);
}

.rz-button.rz-state-disabled.rz-variant-outlined,
.rz-button:disabled.rz-variant-outlined {
  border-color: var(--semantic-action-disabled-shared-border);
}

.rz-button.mun-pilled {
  border-radius: var(--components-button-dimension-border-radius-pilled);
}

/* Botão apenas com ícone: contêiner quadrado 30×30, raio 6, padding 8 (Icon-Button). */
.rz-button.rz-button-icon-only,
.rz-button.mun-icon-button {
  width: 1.875rem;
  height: 1.875rem;
  padding: 0.5rem;
}

/* ===== Entradas ===== */
.rz-textbox,
.rz-textarea,
.rz-numeric,
.rz-dropdown,
.rz-datepicker {
  font-family: inherit;
  box-shadow: none;
  box-sizing: border-box;
}

.rz-textbox.rz-input-md,
.rz-textarea.rz-input-md {
  height: var(--rz-input-size-md);
}

.rz-textbox.rz-input-sm,
.rz-textarea.rz-input-sm {
  height: var(--rz-input-size-sm);
}

.rz-textbox.rz-input-lg,
.rz-textarea.rz-input-lg {
  height: var(--rz-input-size-lg);
}

.rz-textbox,
.rz-dropdown {
  border-radius: var(--border-radius-md);
  border: var(--rz-input-border);
  background-color: var(--semantic-background-primary);
}

.rz-textbox::placeholder,
.rz-textarea::placeholder {
  color: var(--semantic-action-neutral-ghost-on-container-subtle);
}

.rz-textbox:hover:not(:disabled):not(:focus):not([readonly]),
.rz-dropdown:hover:not(.rz-state-disabled):not(.rz-state-focused) {
  border: var(--rz-input-hover-border);
}

.rz-textbox:focus,
.rz-textbox:focus-visible,
.rz-dropdown:focus,
.rz-dropdown:focus-within,
.rz-dropdown.rz-state-focused {
  border: var(--rz-input-focus-border);
  outline: var(--rz-input-focus-outline);
  outline-offset: var(--rz-input-focus-outline-offset);
}

.rz-textbox.invalid,
.rz-dropdown.invalid,
.rz-textarea.invalid {
  border: var(--border-width-regular) solid var(--semantic-status-critical-border);
  outline: none;
}

.rz-textbox:disabled,
.rz-dropdown.rz-state-disabled {
  background-color: var(--semantic-action-disabled-filled-container);
  border-color: var(--semantic-action-disabled-filled-container);
  color: var(--semantic-action-disabled-shared-on-container);
}

/* Dropdown: gatilho de 40px (App final) com borda sutil; tamanho Small = componente do DS (32px).
   O design system usa a borda sutil do input (`--rz-input-border`, 1px #e2e3e6) no estado
   Enabled+Placeholder e a reforca para #6d7581 quando há valor escolhido. O `border-color`
   fixo anterior pintava o gatilho vazio como se já houvesse valor. */
.rz-dropdown {
  align-items: center;
}

.rz-dropdown.rz-input-sm {
  height: var(--rz-input-size-sm);
  padding-block: var(--rz-input-padding-block-sm);
}

.rz-dropdown:has(.rz-dropdown-label:not(.rz-placeholder)) {
  border-color: var(--semantic-action-neutral-ghost-border-default);
}

/* Somente o valor escolhido usa content/default. O gatilho vazio mantém a tinta atenuada
   do placeholder (`--rz-input-placeholder-color` -> neutral-500, o #6d7581 do design
   system); sem o `:not()` esta regra vencia a `.rz-placeholder` do Radzen e pintava o
   estado vazio como se houvesse valor selecionado. */
.rz-dropdown .rz-dropdown-label:not(.rz-placeholder) {
  color: var(--semantic-content-default);
}

.rz-dropdown .rz-dropdown-trigger-icon {
  font-size: 0;
  width: 1.125rem;
  height: 1.125rem;
  background-color: var(--semantic-action-neutral-ghost-on-container);
  -webkit-mask: url("../assets/icons/icon-keyboard-arrow-down.svg") center / contain no-repeat;
  mask: url("../assets/icons/icon-keyboard-arrow-down.svg") center / contain no-repeat;
}

.rz-dropdown-panel {
  border-radius: var(--border-radius-md);
  background-color: var(--semantic-background-primary);
}

.rz-dropdown-item {
  border-radius: var(--border-radius-sm);
  color: var(--semantic-action-neutral-ghost-on-container-subtle);
  min-height: 2.5rem;
  display: flex;
  align-items: center;
}

.rz-dropdown-item.rz-state-highlight {
  color: var(--semantic-action-neutral-ghost-on-container);
}

/* ===== Segment control (RadzenSelectBar): trilho terciário raio 10, padding 4, gap 4; item 32px, selecionado = superfície branca raio 6 ===== */
.rz-selectbar {
  display: inline-flex;
  width: fit-content;
  height: 2.5rem;
  gap: 0.25rem;
  padding: 0.25rem;
  box-sizing: border-box;
  background-color: var(--semantic-background-tertiary);
  border: var(--border-width-regular) solid var(--semantic-border-subtle);
  border-radius: 10px;
}

.rz-selectbar .rz-button.rz-button-md {
  box-sizing: border-box;
  height: 2rem;
  padding: 0 0.75rem;
  border: var(--border-width-regular) solid transparent;
  border-radius: 6px;
  background-color: transparent;
  color: var(--semantic-action-neutral-ghost-on-container-subtle);
  font-size: var(--typescale-body-medium-size);
  font-weight: 500;
  line-height: 1.14;
}

.rz-selectbar .rz-button.rz-button-md.rz-state-active {
  background-color: var(--semantic-background-primary);
  border-color: var(--semantic-border-subtle);
  color: var(--semantic-content-default);
}

/* ===== Checkbox ===== */
.rz-chkbox .rz-chkbox-box {
  border-color: var(--semantic-action-neutral-ghost-on-container);
  background-color: transparent;
  box-sizing: border-box;
}

.rz-chkbox .rz-chkbox-box.rz-state-active {
  border-color: var(--semantic-action-brand-filled-container-default);
  background-color: var(--semantic-action-brand-filled-container-default);
  color: var(--semantic-action-brand-filled-on-container);
}

/* ===== Área de upload (RadzenUpload) ===== */
/* Figma "Área de upload": caixa de largura cheia, padding 12, raio 8, preenchimento
   `background/secondary` (#fafafa) e borda `border/subtle` (#e2e3e6). O Radzen já
dá o raio, mas NÃO dá preenchimento nem borda — a área saía transparente e sem
   contorno. Como é aparência do COMPONENTE (a mesma área aparece em toda superfície
   que usa o RadzenUpload), a regra mora aqui e não na página (C2/C3). O padding de 12
também fecha a altura do quadro: 12 + 38 do botão + 12 = 62. */
.rz-fileupload {
  /* A barra de botões do Radzen traz padding próprio (0.5rem) e a área saía com 78px em
     vez dos 62 do quadro. Zerado na área, sobra o padding de 12 de cada lado mais o
     botão de 38: 12 + 38 + 12 = 62. É o token do próprio componente, não um literal. */
  --rz-upload-button-bar-padding: 0;
  box-sizing: border-box;
  width: 100%;
  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);
}

/* ===== Cartão ===== */
.rz-card {
  border: var(--rz-card-border);
  border-radius: var(--border-radius-lg);
  box-shadow: none;
  background-color: var(--semantic-background-primary);
}

/* ===== Tabela ===== */
.rz-data-grid {
  font-family: inherit;
  background-color: transparent;
}

.rz-data-grid .rz-grid-table {
  border-spacing: 0;
}

.rz-data-grid thead th {
  height: 2.5rem;
  background-color: var(--semantic-background-tertiary);
  color: var(--semantic-content-muted);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  border-bottom: none;
  /* Rótulo centrado em relação à PRÓPRIA célula: com o conteúdo de várias linhas o
     cabeçalho cresce e o padrão `baseline` encostava o texto ao topo (C2/C3: uma
     declaração na regra que o projeto já possui para a grelha, sem tocar em marcação). */
  vertical-align: middle;
}

.rz-data-grid thead th:first-child {
  border-top-left-radius: var(--border-radius-sm);
  border-bottom-left-radius: var(--border-radius-sm);
}

.rz-data-grid thead th:last-child {
  border-top-right-radius: var(--border-radius-sm);
  border-bottom-right-radius: var(--border-radius-sm);
}

.rz-data-grid .rz-column-title,
.rz-data-grid .rz-column-title-content {
  font-weight: 500;
}

.rz-data-grid thead th,
.rz-data-grid .rz-column-title,
.rz-data-grid .rz-column-title-content {
  font-size: var(--typescale-body-small-size);
  line-height: var(--typescale-body-small-line-height);
}

.rz-data-grid tbody td {
  height: 3rem;
  box-sizing: border-box;
  font-size: var(--typescale-body-small-size);
  line-height: var(--typescale-body-small-line-height);
  color: var(--semantic-content-muted);
  /* Conteúdo centrado na ALTURA da própria célula: quando uma célula tem várias linhas
     (título + descrição, por exemplo) a linha cresce e as células de linha única ficavam
     alinhadas ao topo pelo padrão `baseline`. Horizontal continua sob controle do Radzen
     (`TextAlign`), então a declaração não interfere no eixo principal. */
  vertical-align: middle;
}

.rz-data-grid .rz-grid-table-striped > tbody > tr:nth-child(odd) > td,
.rz-data-grid .rz-grid-table-striped > tbody > tr:nth-child(even) > td {
  background-color: transparent;
}

.rz-data-grid .rz-grid-table-striped > tbody > tr:hover > td {
  background-color: var(--semantic-action-neutral-ghost-container-hover);
}

/* ===== Paginação (sem "primeira/última"; chevrons Figma via máscara SVG) ===== */
.rz-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 2.25rem;
  border: none;
  font-family: inherit;
  /* Figma: item de página quadrado de 36px, sem padding interno. */
  --rz-pager-numeric-button-min-width: 2.25rem;
  --rz-pager-numeric-button-padding: 0;
}

.rz-data-grid .rz-pager {
  min-height: 2.5rem;
}

.rz-pager .rz-pager-item:has(> .rz-pager-first),
.rz-pager .rz-pager-item:has(> .rz-pager-last) {
  display: none;
}

.rz-pager .rz-pager-pages {
  min-height: 0;
  align-items: center;
}

.rz-pager .rz-pager-element {
  min-width: var(--rz-pager-numeric-button-min-width);
  height: 2.25rem;
  min-height: 0;
  padding: var(--rz-pager-numeric-button-padding);
  border-radius: var(--border-radius-md);
  font-family: inherit;
  font-size: var(--typescale-label-medium-size);
  font-weight: 500;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.rz-pager .rz-pager-page.rz-state-active {
  background-color: var(--semantic-action-brand-filled-container-default);
  color: var(--semantic-action-brand-filled-on-container);
}

.rz-pager .rz-pager-element.rz-state-disabled {
  opacity: 1;
  color: var(--semantic-action-disabled-shared-on-container);
}

.rz-pager .rz-pager-prev .rz-pager-icon,
.rz-pager .rz-pager-next .rz-pager-icon {
  font-size: 0;
  width: 1rem;
  height: 1rem;
  background-color: currentColor;
}

.rz-pager .rz-pager-prev .rz-pager-icon {
  -webkit-mask: url("../assets/icons/icon-chevron-backward.svg") center / contain no-repeat;
  mask: url("../assets/icons/icon-chevron-backward.svg") center / contain no-repeat;
}

.rz-pager .rz-pager-next .rz-pager-icon {
  -webkit-mask: url("../assets/icons/icon-chevron-forward.svg") center / contain no-repeat;
  mask: url("../assets/icons/icon-chevron-forward.svg") center / contain no-repeat;
}

/* ===== Selos de status ===== */
.rz-badge {
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.rz-badge.rz-badge-primary.rz-variant-flat {
  background-color: var(--semantic-action-brand-tonal-container-default);
  color: var(--semantic-action-brand-ghost-on-container);
}

/* ===== Link ===== */
.rz-link {
  font-family: inherit;
}

/* Camada 3: casca da aplicação (RadzenLayout / Header / Sidebar / Body / PanelMenu / ProfileMenu). */
:root {
  /* Página: corpo com o fundo PRIMÁRIO. O Figma "Page shell" pinta #FFFFFF e nem o
     "Main container" nem o "content slot" têm fill, então o branco da página aparece
     ao redor/abaixo dos cartões (medido em 4501:37969). Padding do Figma "Main
     Content" (36 / 40 / 40). */
  --rz-layout-background-color: var(--semantic-background-primary);
  --rz-layout-body-background-color: var(--semantic-background-primary);
  --rz-layout-body-padding: 2.25rem 2.5rem 2.5rem;

  /* Cabeçalho "Header container": 62px, padding 12/20, divisor inferior sutil. */
  --rz-header-background-color: var(--semantic-background-primary);
  --rz-header-color: var(--semantic-content-default);
  --rz-header-min-height: 3.875rem;
  --rz-header-border: var(--border-width-regular) solid var(--semantic-border-subtle);
  --rz-header-shadow: none;

  /* Sidebar: 250px, fundo secundário, divisor direito sutil, padding 20/8. */
  --rz-sidebar-width: 250px;
  --rz-sidebar-background-color: var(--semantic-background-secondary);
  --rz-sidebar-color: var(--semantic-content-muted);
  --rz-sidebar-border-inline-end: var(--border-width-regular) solid var(--semantic-border-subtle);
  --rz-sidebar-toggle-color: var(--semantic-action-neutral-ghost-on-container);
  --rz-sidebar-toggle-hover-color: var(--semantic-action-neutral-ghost-on-container);
  --rz-sidebar-toggle-hover-background-color: var(--semantic-action-neutral-ghost-container-hover);
  --rz-sidebar-toggle-hover-border-radius: var(--border-radius-md);

  /* PanelMenu: botão de 34px, padding 4/12, gap 8, raio 8, rótulo 14px/500, ícone 20px. */
  --rz-panel-menu-font-size: var(--typescale-label-medium-size);
  --rz-panel-menu-font-weight: 500;
  --rz-panel-menu-icon-width: 1.25rem;
  --rz-panel-menu-icon-height: 1.25rem;
  --rz-panel-menu-icon-font-size: 1.25rem;
  --rz-panel-menu-icon-margin-inline: 0;
  --rz-panel-menu-item-background-color: transparent;
  --rz-panel-menu-item-border: none;
  --rz-panel-menu-item-border-radius: var(--border-radius-md);
  --rz-panel-menu-item-color: var(--semantic-action-neutral-ghost-on-container-subtle);
  --rz-panel-menu-item-hover-color: var(--semantic-action-neutral-ghost-on-container);
  --rz-panel-menu-item-hover-background-color: var(--semantic-action-neutral-ghost-container-hover);
  --rz-panel-menu-item-active-color: var(--semantic-content-default);
  --rz-panel-menu-item-active-background-color: var(--semantic-background-tertiary);
  --rz-panel-menu-item-padding-block: 0.25rem;
  --rz-panel-menu-item-padding-inline: 0.75rem;
  --rz-panel-menu-item-line-height: var(--typescale-label-medium-line-height);
  --rz-panel-menu-icon-color: var(--semantic-action-neutral-ghost-on-container-subtle);
  --rz-panel-menu-toggle-icon-opacity: 0;
  --rz-panel-menu-item-transition: color 0.2s ease-out, background-color 0.2s ease-out;

  /* Subitens (Zeladoria): opções de 36px, trilho contínuo de 1px de marca, rótulo 14px/500. */
  --rz-panel-menu-2nd-level-vertical-offset: 0;
  --rz-panel-menu-item-2nd-level-background-color: transparent;
  --rz-panel-menu-item-2nd-level-color: var(--semantic-action-neutral-ghost-on-container-subtle);
  --rz-panel-menu-item-2nd-level-font-size: var(--typescale-label-medium-size);
  --rz-panel-menu-item-2nd-level-font-weight: 500;
  --rz-panel-menu-item-2nd-level-hover-background-color: transparent;
  --rz-panel-menu-item-2nd-level-hover-color: var(--semantic-action-neutral-ghost-on-container);
  --rz-panel-menu-item-2nd-level-active-background-color: transparent;
  --rz-panel-menu-item-2nd-level-active-color: var(--semantic-action-brand-ghost-on-container);
  --rz-panel-menu-item-2nd-level-active-font-weight: 500;
  --rz-panel-menu-item-2nd-level-border-radius: 0;
  --rz-panel-menu-item-2nd-level-margin-inline: 0;
  --rz-panel-menu-item-2nd-level-padding-block: 0.25rem;
  --rz-panel-menu-item-2nd-level-padding-inline: 0.5rem;
  --rz-panel-menu-item-2nd-level-offset: 0.5rem;

  /* Distância vertical entre itens de primeiro nível (Figma: Top content frame-1 gap 24). */
  --mun-sidebar-item-gap: 1.5rem;
  --mun-sidebar-footer-gap: 1rem;
}

.rz-header {
  box-sizing: border-box;
  padding: 0.75rem 1.25rem;
  display: flex;
  align-items: center;
}

.rz-sidebar {
  box-sizing: border-box;
  padding: 1.25rem 0.5rem;
}

.rz-sidebar-toggle {
  margin-inline-end: 0;
}

/* Conteúdo da sidebar ocupa a altura total; rodapé separado do topo (Figma: Content wrapper space-between). */
.rz-sidebar > .rz-stack {
  height: 100%;
}

.rz-header > .rz-stack {
  flex: 1 1 auto;
  min-width: 0;
}

/* Figma "Left content" fills the header, pushing the right content to the end
   (Header container 1287×62: left content 1046, gap 16, right content 185). */
.rz-header > .rz-stack > .rz-stack:first-child {
  flex: 1 1 auto;
  min-width: 0;
}

/* Figma Page shell (2809:53693) has no header menu button at desktop: the
   "Left content" holds only the title, which begins at the header's 20px inset.
   The toggle is only needed when the sidebar collapses, so it is hidden wide.
   961px aligns exactly with RadzenSidebar ResponsiveMaxWidth="960px". */
@media (min-width: 961px) {
  .mun-header-menu-toggle {
    display: none;
  }
}

/* O colapso da sidebar pertence ao RadzenSidebar (ResponsiveMaxWidth="960px",
   declarado em ModeratorLayout.razor): o componente aplica .rz-sidebar-collapsed
   e a grade `auto 1fr` do RadzenLayout acompanha sozinha. Não imponha
   grid-template-columns nem width — isso substitui o layout do componente.
   Aqui ficam apenas os ajustes de conteúdo do cabeçalho estreito. */
@media (max-width: 960px) {
  .rz-header,
  .rz-body {
    min-width: 0;
  }

  .rz-header {
    overflow: hidden;
  }

  .rz-header > .rz-stack > .rz-stack:first-child {
    flex: 1 1 0;
    min-width: 0;
  }

  .rz-header > .rz-stack > .rz-stack:last-child {
    flex: 0 0 auto;
  }

  .rz-header h1 {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.mun-brand {
  display: block;
  width: 5.6875rem;
  padding-inline-start: 0.625rem;
}

.mun-brand img {
  display: block;
  width: 5.0625rem;
  height: 1.75rem;
  object-fit: contain;
}

.mun-sidebar-footer {
  --mun-sidebar-item-gap: var(--mun-sidebar-footer-gap);
}

/* Figma "Top content" is hug (184px: the widest nav item); "Bottom content"
   fills the sidebar width (234px). */
[data-plumb-id="top-content"] {
  align-self: flex-start;
  width: fit-content;
}

.rz-profile-menu .rz-image,
.rz-profile-menu .rz-navigation-item-link img {
  width: 1.5rem;
  height: 1.5rem;
}

/* PanelMenu */
.rz-panel-menu {
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--mun-sidebar-item-gap);
  overflow: visible;
}

/* Os botões da sidebar ajustam a largura ao conteúdo (Figma: sizing hug). */
.rz-panel-menu > .rz-navigation-item,
.rz-panel-menu > .rz-navigation-item > .rz-navigation-item-wrapper,
.rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper {
  width: fit-content;
}

.rz-panel-menu .rz-navigation-item {
  overflow: visible;
  border-block-end: none;
}

.rz-panel-menu .rz-navigation-item-wrapper {
  overflow: hidden;
  line-height: var(--typescale-label-medium-line-height);
}

.rz-panel-menu .rz-navigation-item-wrapper-active::before,
.rz-panel-menu .rz-navigation-item-active::before {
  display: none;
}

.rz-panel-menu .rz-navigation-item-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.125rem;
  box-sizing: border-box;
  background: none;
  font-family: inherit;
}

.rz-panel-menu .rz-navigation-item-link:active {
  background: var(--semantic-action-neutral-ghost-container-pressed);
}

.rz-panel-menu .rz-navigation-item-icon {
  flex: 0 0 auto;
  object-fit: contain;
}

/* Selecionado (folha ativa ou grupo com página filha ativa): contêiner transparente, rótulo de marca,
   ícone escuro e barra "Página Ativa" (20×40, raio total) encostada à borda esquerda da sidebar. */
.rz-panel-menu > .rz-navigation-item > .rz-navigation-item-wrapper:has(> .rz-navigation-item-link.active),
.rz-panel-menu > .rz-navigation-item:has(.rz-navigation-menu .rz-navigation-item-link.active) > .rz-navigation-item-wrapper {
  position: relative;
  overflow: visible;
  background-color: transparent;
  color: var(--semantic-action-brand-ghost-on-container);
  font-weight: 600;
}

.rz-panel-menu > .rz-navigation-item > .rz-navigation-item-wrapper:has(> .rz-navigation-item-link.active)::before,
.rz-panel-menu > .rz-navigation-item:has(.rz-navigation-menu .rz-navigation-item-link.active) > .rz-navigation-item-wrapper::before {
  display: block;
  content: "";
  position: absolute;
  inset-block-start: -0.1875rem;
  inset-inline-start: -1.3125rem;
  width: 1.25rem;
  height: 2.5rem;
  border-radius: var(--border-radius-full);
  background-color: var(--semantic-action-brand-ghost-on-container);
}

.rz-panel-menu > .rz-navigation-item > .rz-navigation-item-wrapper:has(> .rz-navigation-item-link.active) .rz-navigation-item-icon,
.rz-panel-menu > .rz-navigation-item:has(.rz-navigation-menu .rz-navigation-item-link.active) > .rz-navigation-item-wrapper .rz-navigation-item-icon {
  filter: brightness(0.25);
}

.rz-panel-menu > .rz-navigation-item > .rz-navigation-item-wrapper:has(> .rz-navigation-item-link.active):hover,
.rz-panel-menu > .rz-navigation-item:has(.rz-navigation-menu .rz-navigation-item-link.active) > .rz-navigation-item-wrapper:hover {
  background-color: var(--semantic-action-brand-ghost-container-hover);
}

/* Subitens: opções de 36px; o trilho de 1px de marca é contínuo entre as opções. */
.rz-panel-menu .rz-navigation-menu {
  margin: 0;
  padding: 0 0.625rem;
  overflow: visible;
}

.rz-panel-menu .rz-navigation-menu .rz-navigation-item {
  margin: 0;
  overflow: visible;
}

.rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 2.25rem;
  margin: 0;
  overflow: visible;
  background: transparent;
}

.rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper::before {
  display: block;
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0.6875rem;
  width: var(--border-width-regular);
  background-color: var(--semantic-action-brand-filled-container-default);
}

.rz-panel-menu .rz-navigation-menu .rz-navigation-item-wrapper:hover {
  background: transparent;
}

.rz-panel-menu .rz-navigation-menu .rz-navigation-item-link {
  flex: 0 0 auto;
  min-height: 1.75rem;
  margin-inline-start: 1.25rem;
  padding: 0.25rem 0.5rem;
  border-radius: var(--border-radius-md);
}

.rz-panel-menu .rz-navigation-menu .rz-navigation-item-link:hover {
  background: var(--semantic-action-neutral-ghost-container-hover);
}

.rz-panel-menu .rz-navigation-menu .rz-navigation-item-link.active {
  color: var(--semantic-action-brand-ghost-on-container);
  font-weight: 600;
}

/* Pertencimento da rota ao item (ver `SidebarNavigation`). O `NavLink` do Radzen só recebe
   `.active` na rota do seu `Path`; telas filhas do mesmo item — criar/detalhe de programação,
   Central de Ocorrências, revisão — precisam manter o item e o grupo destacados. O marcador
   é aplicado pelo próprio `ModeratorSideBar`, e estas regras reproduzem exatamente o estado
   "selecionado" acima (rótulo de marca, peso 600, ícone escuro e barra de página ativa). */
.rz-panel-menu .rz-navigation-menu .rz-navigation-item.mun-nav-current > .rz-navigation-item-wrapper > .rz-navigation-item-link {
  color: var(--semantic-action-brand-ghost-on-container);
  font-weight: 600;
}

.rz-panel-menu > .rz-navigation-item:has(.rz-navigation-menu .rz-navigation-item.mun-nav-current) > .rz-navigation-item-wrapper {
  position: relative;
  overflow: visible;
  background-color: transparent;
  color: var(--semantic-action-brand-ghost-on-container);
  font-weight: 600;
}

.rz-panel-menu > .rz-navigation-item:has(.rz-navigation-menu .rz-navigation-item.mun-nav-current) > .rz-navigation-item-wrapper::before {
  display: block;
  content: "";
  position: absolute;
  inset-block-start: -0.1875rem;
  inset-inline-start: -1.3125rem;
  width: 1.25rem;
  height: 2.5rem;
  border-radius: var(--border-radius-full);
  background-color: var(--semantic-action-brand-ghost-on-container);
}

.rz-panel-menu > .rz-navigation-item:has(.rz-navigation-menu .rz-navigation-item.mun-nav-current) > .rz-navigation-item-wrapper .rz-navigation-item-icon {
  filter: brightness(0.25);
}

/* Corpo, rolagem e foco do layout */
.rz-layout {
  font-family: inherit;
}

.rz-body {
  box-sizing: border-box;
}

/* The occurrence-validation workspace uses the full area below the header. */
.rz-body:has(> .occurrence-page) {
  padding: 0;
}

/* Páginas de trabalho (lista + mapa) ocupam a área inteira da página, sem padding de conteúdo. */
.rz-body:has(> .mun-workspace) {
  padding: 0;
  background-color: var(--semantic-background-primary);
}

/* Menu de perfil do cabeçalho: sem fundo de marca. */
:root {
  --rz-profile-menu-top-item-background-color: transparent;
  --rz-profile-menu-toggle-button-color: var(--semantic-action-neutral-ghost-on-container);
}

ul.rz-profile-menu {
  background: transparent;
  box-shadow: none;
  /* Compact control: the Figma "right content" slot is 185×38, so the toggle
     gets a 24px avatar + 8px gap + label + this padding. */
  padding: 7px 6px;
}

ul.rz-profile-menu > .rz-navigation-item > .rz-navigation-item-wrapper {
  border-radius: var(--border-radius-md);
  padding: 0;
}

ul.rz-profile-menu > .rz-navigation-item > .rz-navigation-item-wrapper:hover {
  background: var(--semantic-action-neutral-ghost-container-hover);
}

ul.rz-profile-menu .rz-navigation-menu {
  background: var(--semantic-background-primary);
  border: var(--rz-profile-menu-border);
  border-radius: var(--border-radius-md);
  box-shadow: var(--rz-shadow-2);
  padding: var(--border-radius-sm);
}

ul.rz-profile-menu .rz-navigation-menu .rz-navigation-item-wrapper {
  border-radius: var(--border-radius-sm);
}

ul.rz-profile-menu .rz-navigation-item-link {
  font-family: inherit;
  font-size: var(--typescale-body-medium-size);
}

/* Camada 4: utilitários e padrões de composição reutilizáveis por qualquer página Radzen. */

/* Cores de texto semânticas (Figma: content/*). */
.mun-text-default { color: var(--semantic-content-default); }
.mun-text-secondary { color: var(--semantic-content-secondary); }
.mun-text-muted { color: var(--semantic-content-muted); }
.mun-text-subtle { color: var(--semantic-content-subtle); }
.mun-text-brand { color: var(--semantic-action-brand-ghost-on-container); }

/* Superfícies utilitárias. */
.mun-surface-secondary { background-color: var(--semantic-background-secondary); }
.mun-surface-tertiary { background-color: var(--semantic-background-tertiary); }

/* O `!important` é obrigatório: RadzenStack emite `.rz-display-flex`, que
   `material-base.css` declara com `!important`, então um `display: grid` sem
   `!important` perde e as colunas colapsam. A única alternativa que elimina a
   exceção é `RadzenColumn` dentro de um contêiner simples — `RadzenRow` NÃO
   serve, pois também emite `rz-display-flex`. Ver
   figma-tokens/docs/radzen-visual-mapping.md. */
.occurrence-page { min-width: 0; }
.occurrence-workspace.rz-stack {
    display: grid !important;
    grid-template-columns: minmax(0, 480px) minmax(0, 1fr);
    align-items: stretch;
    gap: 0;
    min-width: 0;
}
.occurrence-list { min-width: 0; gap: 0.75rem; background-color: var(--semantic-background-primary); }

/* `flex: none` é load-bearing: a barra é um item flex dentro de `.occurrence-list`,
   que é uma coluna de altura fixa. Sem ele a barra encolhia abaixo do próprio
   conteúdo e o excedente era pintado sobre a primeira linha do grid. */
.occurrence-list-toolbar { flex: none; min-height: 2rem; }
.occurrence-results-count {
    flex: none;
    white-space: nowrap;
    color: var(--semantic-content-muted);
    font-size: var(--typescale-label-medium-size);
    font-weight: 500;
    line-height: var(--typescale-label-medium-line-height);
}
.occurrence-filter-anchor { position: relative; }
.rz-card.rz-variant-filled.occurrence-filter-popover {
    position: absolute;
    inset-block-start: calc(100% + 0.5rem);
    inset-inline-start: 0;
    z-index: 20;
    width: min(22rem, calc(100vw - 2rem));
    padding: 1.25rem;
    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%);
}
.occurrence-filter-types { max-height: 18rem; overflow-y: auto; }
.occurrence-category-icon { width: 1.5rem; height: 1.5rem; object-fit: contain; }
/* Figma "List" (Page shell 2809:53693): header 38px (secondary) + rows 52px as
   4px-radius bordered cards with an 8px gap; columns 56/186/62/72/80 inside 12px side padding. */
.occurrence-validation-grid {
    min-width: 0;
    --rz-grid-cell-padding: 0;
    --rz-grid-header-padding: 0;
}
.occurrence-validation-grid .rz-data-grid-data { scrollbar-width: none; }
.occurrence-validation-grid .rz-grid-table {
    min-width: 0;
    /* A tabela ocupa sempre 100% do espaço disponível: as colunas CAT/CHAM/CRIAÇÃO/
       ações têm largura fixa e LOCAL absorve o restante. Assim a grade nunca precisa
       de rolagem lateral, mesmo quando a barra de rolagem vertical do grid consome
       largura (era a causa da rolagem horizontal no painel de 480px). */
    width: 100%;
    table-layout: fixed;
    border-spacing: 0 0.5rem;
    margin-block-start: -0.5rem;
}
.occurrence-validation-grid thead th {
    height: 2.375rem;
    box-sizing: border-box;
    padding: 0;
    background-color: var(--semantic-background-secondary);
    color: var(--semantic-content-secondary);
    font-size: var(--typescale-body-small-size);
    line-height: 1.1667;
    border-block: var(--border-width-thin) solid var(--semantic-border-subtle);
    box-shadow: 0 0.5rem 0 var(--semantic-background-primary);
}
.occurrence-validation-grid tbody td {
    height: 3.25rem;
    box-sizing: border-box;
    padding-block: 0.25rem;
    padding-inline: 0;
    color: var(--semantic-content-default);
    border-block: var(--border-width-thin) solid var(--semantic-border-subtle);
}
/* The row-card outline spans four edges and is drawn by the border of the first and
   last cell plus the block borders of every cell. Radzen's own sheet
   (material-base.css) declares the same properties for the same cells:
     .rz-grid-table tr td:last-child:not(.rz-composite-cell)  -> inline-end resets
     .rz-grid-table tr:first-child > td                       -> border-block-start none
     .rz-grid-table tr:last-child > td                        -> border-block-end none
   Those selectors carry more classes than "tbody td", so the project rule lost and
   each card was left open on three sides — the "cut" against the map reported by
   the maintainer. `.rz-grid-table` is added to the project selectors so they win on
   specificity instead of on cascade order; the resulting values are unchanged.
   Declared exception (C4): figma-tokens/docs/radzen-visual-mapping.md. */
.occurrence-validation-grid .rz-grid-table thead th:first-child,
.occurrence-validation-grid .rz-grid-table tbody tr td:first-child {
    padding-inline-start: 0.75rem;
    border-inline-start: var(--border-width-thin) solid var(--semantic-border-subtle);
    border-start-start-radius: var(--border-radius-sm);
    border-end-start-radius: var(--border-radius-sm);
}
.occurrence-validation-grid .rz-grid-table thead th:last-child,
.occurrence-validation-grid .rz-grid-table tbody tr td:last-child {
    padding-inline-end: 0.75rem;
    border-inline-end: var(--border-width-thin) solid var(--semantic-border-subtle);
    border-start-end-radius: var(--border-radius-sm);
    border-end-end-radius: var(--border-radius-sm);
}
.occurrence-validation-grid .rz-grid-table tbody tr:first-child > td {
    border-block-start: var(--border-width-thin) solid var(--semantic-border-subtle);
}
.occurrence-validation-grid .rz-grid-table tbody tr:last-child > td {
    border-block-end: var(--border-width-thin) solid var(--semantic-border-subtle);
}
.occurrence-validation-grid .occurrence-category-icon { border-radius: 10px; }
.occurrence-location-cell { min-width: 0; }
.occurrence-neighborhood, .occurrence-address { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.occurrence-neighborhood, .occurrence-calls, .occurrence-created-at { color: var(--semantic-content-default); }
.occurrence-address { color: var(--semantic-content-muted); }

/* Icon-Button 30x30 (global rule); glyph recolored per Figma via mask (neutral locate, brand details). */
.occurrence-row-actions { flex-wrap: nowrap; }
.occurrence-row-action { box-sizing: border-box; width: 1.875rem; height: 1.875rem; flex: none; }
.occurrence-row-action .rz-button-box { position: relative; }
.occurrence-row-action img { opacity: 0; }
.occurrence-row-action .rz-button-box::after {
    content: "";
    position: absolute;
    inset: 1px;
    background-color: var(--semantic-action-neutral-ghost-on-container);
    mask: var(--occurrence-action-icon) center / contain no-repeat;
}
.occurrence-row-action--locate { --occurrence-action-icon: url("/assets/icons/icon-location-on.svg"); }
.occurrence-row-action--details {
    --occurrence-action-icon: url("/assets/icons/icon-fi-rs-document.svg");
}
.occurrence-row-action--details .rz-button-box::after { background-color: var(--semantic-action-brand-ghost-on-container); }
/* "Adicionar" do modo agrupamento: o glifo do quadro é o `+` em `brand/50` sobre o
   preenchimento de marca. O SVG tem o traço embutido (`#1B1D20`), então a cor vem do
   mesmo mascaramento usado nas ações de linha — a imagem é escondida e o glifo é
   pintado pelo token. O `inset: 1px` mantém o desenho nos 12 px do ícone do design. */
.occurrence-group-select { box-sizing: border-box; width: 1.875rem; height: 1.875rem; }
.occurrence-group-select .rz-button-box { position: relative; }
.occurrence-group-select img { opacity: 0; }
.occurrence-group-select .rz-button-box::after {
    content: "";
    position: absolute;
    inset: 1px;
    background-color: var(--semantic-action-brand-filled-on-container);
    mask: url("/assets/icons/icon-add.svg") center / contain no-repeat;
}
.occurrence-group-select[aria-pressed="true"] { background: var(--semantic-action-brand-filled-container-default); }
/* Selected row of the grouping mode: the brand outline replaces the subtle card
   border. `.rz-grid-table` is carried for the same reason as the base card rules
   above — the first/last-row rules reach (0,3,2) and would otherwise keep the
   subtle colour on the top and bottom edges of a selected first or last row. */
.occurrence-validation-grid .rz-grid-table tbody tr:has(.occurrence-group-select[aria-pressed="true"]) > td {
    border-block: var(--border-width-regular) solid var(--semantic-action-brand-ghost-border-default);
}
.occurrence-validation-grid .rz-grid-table tbody tr:has(.occurrence-group-select[aria-pressed="true"]) > td:first-child {
    border-inline-start: var(--border-width-regular) solid var(--semantic-action-brand-ghost-border-default);
}
.occurrence-validation-grid .rz-grid-table tbody tr:has(.occurrence-group-select[aria-pressed="true"]) > td:last-child {
    border-inline-end: var(--border-width-regular) solid var(--semantic-action-brand-ghost-border-default);
}
.occurrence-group-footer {
    min-height: 3.375rem;
    padding-block: 0.625rem;
    border-top: var(--border-width-thin) solid var(--semantic-border-subtle);
}
.occurrence-page-loading { min-height: 50vh; }
.occurrence-page-empty, .occurrence-page-error { padding: 1.25rem; border: var(--border-width-regular) solid var(--semantic-border-subtle); border-radius: var(--rz-border-radius); }
.occurrence-workspace > .occurrence-map-frame { min-width: 0; }

/* Figma "map wrapper" (Page shell 2809:53693): the map image fills the region
   and only a left divider separates it from the list — no radius, no full border. */
.mod-zeladoria .occurrence-workspace > .occurrence-map-frame {
    border-inline-start: var(--border-width-regular) solid var(--semantic-border-subtle);
}
.mod-zeladoria .occurrence-workspace > .occurrence-map-frame .ocorrencia-map {
    border: 0;
    border-radius: 0;
}

@media (min-width: 961px) {
    .rz-body:has(> .occurrence-page) {
        height: calc(100dvh - 62px);
        overflow: hidden;
    }

    .occurrence-page,
    .occurrence-workspace.rz-stack {
        height: 100%;
        min-height: 0;
    }

    .occurrence-list {
        box-sizing: border-box;
        height: 100%;
        min-height: 0;
        overflow: hidden;
        padding: 8px 12px 0;
    }

    .occurrence-workspace > .occurrence-map-frame {
        height: 100%;
        min-height: 0;
    }

    .occurrence-workspace > .occurrence-map-frame > .ocorrencia-map-host,
    .occurrence-workspace > .occurrence-map-frame > .ocorrencia-map {
        height: 100%;
    }
}

@media (max-width: 960px) {
    .occurrence-workspace.rz-stack { grid-template-columns: minmax(0, 1fr); }
    .occurrence-workspace > .occurrence-map-frame { height: auto; min-height: 26rem; }
    .occurrence-workspace > .occurrence-map-frame > .ocorrencia-map-host,
    .occurrence-workspace > .occurrence-map-frame > .ocorrencia-map { height: 26rem; }
}

/* Design-system specimen page. */
.mun-theme-root { min-height: 100vh; background: var(--semantic-background-secondary); }
.mun-reference-bar {
    min-height: 62px;
    padding: 0 40px;
    border-bottom: var(--border-width-regular) solid var(--semantic-border-subtle);
    background: var(--semantic-background-primary);
}
.mun-brand-wide .rzi { width: 7.5rem; height: auto; }
.mun-reference-content {
    width: 100%;
    max-width: 1360px;
    margin-inline: auto;
    padding: 36px 40px 48px;
    box-sizing: border-box;
}
.rz-badge.mun-swatch {
    display: block;
    flex: 0 0 2rem;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: var(--border-width-regular) solid var(--semantic-border-subtle);
    border-radius: 6px;
}
.rz-badge.mun-swatch--brand { background-color: var(--semantic-action-brand-filled-container-default); }
.rz-badge.mun-swatch--ink { background-color: var(--semantic-content-default); }
.rz-badge.mun-swatch--surface { background-color: var(--semantic-background-primary); }
.rz-badge.mun-swatch--success { background-color: var(--semantic-status-success-container); }
.rz-badge.mun-swatch--category { background-color: var(--semantic-data-categorical-sky-container); }

@media (max-width: 768px) {
    .mun-reference-bar { padding-inline: 1rem; }
    .mun-reference-content { padding: 1.5rem 1rem 2rem; }
}


.mod-zeladoria {
    min-width: 0;
}

.rz-body:has(> .mod-zeladoria:not(.occurrence-page)) {
    padding-right: 1.75rem;
}

.dashboard-workflow-panel {
    height: 31.25rem;
    min-height: 31.25rem;
    padding: 0;
    /* Figma: faixa do eixo da timeline = 20px. O Radzen deriva flex/width/height
       desta variável (default 4rem), então o tamanho deixa de ser um override. */
    --rz-timeline-axis-size: 1.25rem;
}

.dashboard-workflow-content {
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
    gap: 1.8125rem;
    padding-top: 8.0625rem;
}

.dashboard-category-filters {
    flex-wrap: nowrap;
    flex: 0 0 auto;
    width: 30.875rem;
    margin-inline-start: 24.125rem;
}

.dashboard-category-filters .rz-button-lg[data-plumb-id^="category-icon"] {
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
}

.dashboard-category-filters [data-plumb-id^="category-icon"] img {
    width: 1.5rem;
    height: 1.5rem;
    object-fit: contain;
}

.dashboard-workflow-panel .rz-timeline {
    gap: 1.25rem;
    width: calc(100% - 3.5625rem);
    margin-inline-start: 1.6875rem;
}

.dashboard-workflow-panel .rz-timeline-item {
    box-sizing: border-box;
    flex: 0 0 2.125rem;
    padding: 0;
}

.dashboard-workflow-panel .rz-timeline-content-end {
    margin-inline-start: 0.375rem;
}

.dashboard-workflow-panel .rz-timeline-content-end > .rz-stack {
    height: 2.125rem;
}

.dashboard-workflow-step-title {
    color: var(--semantic-content-secondary);
    font-size: var(--typescale-label-medium-size);
    font-weight: 500;
    line-height: var(--typescale-label-medium-line-height);
}

.dashboard-workflow-step-description {
    color: var(--semantic-content-subtle);
    font-size: var(--typescale-label-small-size);
    font-weight: 500;
    line-height: var(--typescale-label-small-line-height);
}

.rz-card.dashboard-map-panel {
    min-height: 31.25rem;
    border: 0;
    box-shadow: inset 0 0 0 var(--border-width-regular) var(--semantic-border-subtle);
}

.dashboard-map-content {
    min-height: 25.25rem;
}

.dashboard-map-filters {
    flex: 0 0 15rem;
    min-width: 13rem;
    padding-right: 1rem;
    border-right: var(--border-width-regular) solid var(--semantic-border-subtle);
}

.dashboard-map-view {
    flex: 1 1 auto;
    min-width: 0;
    height: 25.25rem;
}

.dashboard-map-view .ocorrencia-map,
.dashboard-map-view .ocorrencia-map-host {
    width: 100%;
    height: 100%;
}

/* `height` and `min-height` are both load-bearing here: the panel's content
   (title + grid + pager) exceeds 410px, so keeping only `min-height` would let
   the card grow past the Figma dimension. */
.dashboard-statistics-panel {
    min-width: 0;
    box-sizing: border-box;
    height: 25.625rem;
    min-height: 410px;
}

.dashboard-statistics-grid {
    min-width: 0;
    overflow-x: auto;
}

.dashboard-statistics-grid .rz-grid-table {
    min-width: 0;
    width: 100%;
    table-layout: fixed;
}

.dashboard-statistics-grid .rz-column-title-content {
    display: block;
    flex: 1 1 100%;
    width: 100%;
}

.dashboard-statistics-grid thead th,
.dashboard-statistics-grid tbody td {
    box-sizing: border-box;
    padding: 0;
    border: 0;
}

.dashboard-statistics-line {
    box-sizing: border-box;
    display: flex;
    width: 100%;
    height: 100%;
    padding-inline: 12px;
    white-space: nowrap;
}
.dashboard-statistics-line--header {
    height: 2.5rem;
    border-radius: var(--border-radius-sm);
    background: var(--semantic-background-tertiary);
    color: var(--semantic-content-secondary);
}
.dashboard-statistics-line--row {
    height: 2.5rem;
    border-bottom: var(--border-width-thin) solid var(--semantic-border-subtle);
    color: var(--semantic-content-default);
}
.dashboard-statistics-line--header .rz-text-caption { color: var(--semantic-content-secondary); font-size: var(--typescale-label-small-size); font-weight: 500; line-height: var(--typescale-label-small-line-height); }
.dashboard-statistics-line--row .rz-text-body2 { font-size: var(--typescale-body-small-size); font-weight: 400; line-height: var(--typescale-body-small-line-height); }
.dashboard-statistics-line--row .dashboard-statistics-metric { color: var(--semantic-content-secondary); }
.dashboard-statistics-type { flex: 0 0 15rem; text-align: start; }
.dashboard-statistics-metric { flex: 0 0 auto; text-align: center; }
.dashboard-statistics-open { width: 5rem; }
.dashboard-statistics-work-orders { width: 5.625rem; }
.dashboard-statistics-completed { width: 7.5rem; }
.dashboard-statistics-open-30d { width: 6.875rem; }
.dashboard-statistics-average { width: 7.5rem; }
.dashboard-statistics-trend-heading { flex: 0 0 4.375rem; text-align: center; }
.dashboard-statistics-trend { box-sizing: border-box; flex: 0 0 3.125rem; height: 1.375rem; padding: 0.25rem 0.625rem; }

.dashboard-statistics-grid thead th {
    background-color: transparent;
}

.dashboard-statistics-grid tbody td {
    height: 2.5rem;
}

.dashboard-statistics-grid .rz-pager {
    min-height: 4.625rem;
}

.mod-zeladoria [data-plumb-id="section-lista"] {
    min-height: 35rem;
}

@media (max-width: 960px) {
    .dashboard-workflow-panel {
        height: auto;
        min-height: 0;
    }

    .dashboard-workflow-content {
        min-height: 0;
    }

    .dashboard-category-filters.rz-flex-row {
        flex-wrap: wrap !important;
        width: auto;
        margin-inline-start: 0;
        --rz-gap: 1.25rem !important;
    }

    .dashboard-workflow-panel .rz-timeline {
        width: auto;
        margin-inline-start: 0;
    }

    .dashboard-workflow-panel .rz-timeline-content-end > .rz-stack.rz-flex-row {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .dashboard-workflow-panel .rz-timeline-content-end > .rz-stack.rz-flex-row > .rz-button {
        align-self: flex-end;
        flex-shrink: 0;
    }

    .rz-card.dashboard-map-panel,
    .dashboard-map-content {
        min-height: 0;
    }

    .dashboard-map-content.rz-flex-row {
        flex-direction: column !important;
    }

    .dashboard-map-filters {
        flex: 0 0 auto;
        padding: 0 0 1rem;
        border-right: 0;
        border-bottom: var(--border-width-regular) solid var(--semantic-border-subtle);
    }

    .dashboard-map-filter-options {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    }

    .dashboard-map-view {
        flex: none;
        width: 100%;
        height: 25.25rem;
    }

    .mod-zeladoria [data-plumb-id="section-lista"] {
        min-height: 0;
    }
}

/* Occurrence-management dialogs reuse one Figma Modal Shell composition. */
.occurrence-action-dialog-host .rz-dialog-titlebar,
.occurrence-detail-dialog-host .rz-dialog-titlebar,
.occurrence-category-dialog-host .rz-dialog-titlebar { display: none; }
.occurrence-action-dialog-host,
.occurrence-detail-dialog-host,
.occurrence-category-dialog-host {
    overflow: hidden;
}
/* Figma: só o diálogo de detalhe tem raio 20. Os demais (cancelar, solucionar,
   desvincular, categoria) são instâncias do Modal Shell `Size=Large`, cujo raio
   é 12 — exatamente o valor que a bridge publica em `--rz-dialog-border-radius`,
   de modo que eles não precisam de regra de projeto alguma.
   Leitura ao vivo: `2581:42399` cancelar = 12, `2581:42391` desvincular = 12,
   `2839:9311` solucionar = 12, `2926:33095` categoria = 12, `2809:58257`
   detalhe = 20. */
.occurrence-detail-dialog-host {
    border-radius: var(--border-radius-2xl);
    /* Altura do diálogo de detalhe. O rodapé de ações mede 74px (12 + 38 + 24, a mesma
       soma guardada em `.occurrence-detail-dialog-shell .occurrence-dialog-footer`).
       Quando o status não renderiza o rodapé, esses 74px saem da janela em vez de virar
       área vazia sob a coluna esquerda (34,4375rem fixos). O chamador consome a variável
       no `Height` do `DialogOptions` (`OccurrenceDetailDialogOptions`), de modo que os
       nove pontos de abertura não repetem a altura nem conhecem o status. */
    --occurrence-detail-dialog-height: min(94vh, 858px);
    /* Escala de camadas do diálogo de detalhe. A sobreposição do mapa vive na escala do
       próprio mapa (400 / 500 em `wwwroot/ocorrencia-map.css`); o visualizador de fotos é
       a camada mais alta do diálogo e precisa ficar ACIMA dela, senão o link do mapa
       aparece por cima da imagem ampliada. */
    --occurrence-dialog-layer-map: 1;
    --occurrence-dialog-layer-map-overlay: 500;
    --occurrence-dialog-layer-viewer: 600;
}
.occurrence-detail-dialog-host:not(:has(.occurrence-dialog-footer)) {
    --occurrence-detail-dialog-height: calc(min(94vh, 858px) - 4.625rem);
}
.occurrence-action-dialog-host > .rz-dialog-content,
.occurrence-category-dialog-host > .rz-dialog-content {
    padding: 0;
    overflow: visible;
}
.occurrence-category-dialog-host > .rz-dialog-content { display: flex; height: 100%; }
.occurrence-detail-dialog-host > .rz-dialog-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    padding: 0;
    overflow: visible;
}
.occurrence-dialog-shell {
    position: relative;
    box-sizing: border-box;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    /* Segue o raio de diálogo da bridge (12px). Assim os diálogos de ação e de
       categoria ficam corretos sem regra própria; o detalhe sobrescreve na
       regra seguinte, por ser o único com raio 20 no design. */
    border-radius: var(--rz-dialog-border-radius);
    background: var(--semantic-background-primary);
    overflow: hidden;
    /* Size mode do rodapé do modal (Figma "Text-Button" do rodapé = 38px).
       Sobrescreve o default do Radzen (--rz-button-size-md: 2.25rem) apenas
       dentro da shell, para que o botão continue a ser dimensionado pelo
       próprio componente em vez de por um `height` literal. */
    --rz-button-size-md: 2.375rem;
}
.occurrence-detail-dialog-host .occurrence-dialog-shell {
    border-radius: var(--border-radius-2xl);
}
.occurrence-dialog-header {
    position: relative;
    box-sizing: border-box;
    min-height: 4.125rem;
    padding: 1.5rem 3.25rem 0.75rem 1.5rem;
    border-bottom: var(--border-width-thin) solid var(--semantic-border-subtle);
}
.occurrence-dialog-heading > h2 { margin: 0; font-weight: 500; }
/* O cabeçalho rico (identidade + métricas) é dimensionado pelo conteúdo:
   identidade de 42px (título 22/28 + protocolo 12/14) somada ao padding
   24/12 herdado de `.occurrence-dialog-header` = 78px, a altura do "Header"
   do design. Um `flex-basis`/`height` fixo aqui roubava 22px do
   `.occurrence-dialog-content`, que absorve o restante da altura da shell. */
.occurrence-dialog-header--custom { padding-block: 1.5rem 0.75rem; }
.occurrence-dialog-heading { min-width: 0; }
.occurrence-dialog-description,
.occurrence-dialog-helper { color: var(--semantic-content-muted); }
.occurrence-dialog-content { min-width: 0; padding: 0.75rem 1.25rem 1.25rem; }
.occurrence-dialog-footer {
    box-sizing: border-box;
    min-height: 4.125rem;
    padding: 0.75rem 1.5rem;
    border-top: var(--border-width-thin) solid var(--semantic-border-subtle);
}
.occurrence-dialog-close {
    position: absolute;
    inset-block-start: 1.5rem;
    inset-inline-end: 1.5rem;
    z-index: 1;
    width: 1.875rem;
    height: 1.875rem;
}
.occurrence-cancel-dialog-shell,
.occurrence-solve-dialog-shell,
.occurrence-unlink-dialog-shell {
    display: flex;
    flex-direction: column;
}
/* Figma `2581:42393` cancelar = 840×662. O teto em `100dvh` é a única liberdade
   acrescentada: sem ele a shell fixa ficava mais alta que a janela e o rodapé era
   cortado, porque o host do diálogo de ação usa `overflow: hidden` e não rola. */
.occurrence-cancel-dialog-shell { height: 41.375rem; max-height: calc(100dvh - 3rem); }
.occurrence-cancel-dialog-shell .occurrence-dialog-header { flex: 0 0 3.5rem; min-height: 3.5rem; padding-block: 1.125rem 0.75rem; }
/* `min-height: 0` + `overflow-y` são load-bearing: com o `min-height: auto` padrão
   o item flex não encolhe abaixo do próprio conteúdo, o conteúdo transborda a shell
   e empurra o rodapé (Voltar / Cancelar ocorrência) para fora do quadro. Os diálogos
   de solucionar e desvincular já usam exatamente esta estratégia. */
.occurrence-cancel-dialog-shell .occurrence-dialog-content {
    flex: 1 1 auto;
    gap: 1.25rem;
    padding: 1.25rem;
    min-height: 0;
    overflow-y: auto;
}
/* The base `.occurrence-dialog-footer` sets `min-height: 4.125rem` (66px), which
   is taller than this shell's 64px footer. The override is load-bearing here. */
.occurrence-cancel-dialog-shell .occurrence-dialog-footer { flex: 0 0 4rem; min-height: 4rem; }
/* Figma `2581:42391` rodapé = 76px com padding 12/24/24 (conteúdo 40).
   Os diálogos de ação seguem a mesma estratégia: fixar o total do design e
   normalizar o botão em 38px. Sem o padding inferior do design, o botão ficava
   7px acima do que o quadro mostra. */
.occurrence-unlink-dialog-shell .occurrence-dialog-footer {
    flex: 0 0 4.75rem;
    min-height: 4.75rem;
    padding: 0.75rem 1.5rem 1.5rem;
}
/* A altura do quadro (35.8125rem) era fixa e menor que a prévia ampliada das
   evidências, então a imagem anexada nunca aparecia em tamanho útil. Altura de conteúdo
   com teto: o corpo rola (já tem `overflow-y`) e a janela cresce só o necessário,
   parando em `100dvh - 3rem`. O chamador já usa `Height = "auto"`. */
.occurrence-solve-dialog-shell { height: auto; max-height: calc(100dvh - 3rem); }
.occurrence-solve-dialog-shell .occurrence-dialog-header { flex: 0 0 4.125rem; }
/* `min-height: 0` é load-bearing: com o `min-height: auto` padrão o item flex não encolhe
   abaixo do próprio conteúdo e, com a shell em altura automática, ela cresceria sem
   nunca acionar a rolagem do corpo. */
.occurrence-solve-dialog-shell .occurrence-dialog-content { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.occurrence-solve-dialog-shell .occurrence-dialog-footer { flex: 0 0 4.1875rem; }
/* Altura única da prévia de imagem dos diálogos de ocorrência. Promovida da galeria do
   cartão (que a praticava como `9rem * 1.5`) para que cartão e diálogo de solução não
   guardem dois números iguais em arquivos diferentes. */
.occurrence-dialog-shell,
.occurrence-call-card { --occurrence-image-preview-max-height: 13.5rem; }
/* Figma `2581:42391` modal = 820×562 (cabeçalho 66 + conteúdo 420 + rodapé 76).
   Estava em 548 (34.25rem): com o rodapé já corrigido para 76, a shell fixa
   roubaria 9px da área de conteúdo, então a altura acompanha o design. */
.occurrence-unlink-dialog-shell { height: 35.125rem; }
.occurrence-unlink-dialog-shell .occurrence-dialog-header { flex: 0 0 4.125rem; }
.occurrence-unlink-dialog-shell .occurrence-dialog-content { flex: 1 1 auto; overflow-y: auto; }
/* Pop-up de mensagem/confirmação do design system (mensagens curtas): mensagem no
   corpo e ações centralizadas. Compõe as mesmas medidas do rodapé dos modais —
   botão de 38px com padding 10/20 — em vez de dimensões próprias. */
.mun-message-dialog {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem;
    text-align: center;
    background-color: var(--semantic-background-primary);
    border-radius: var(--rz-dialog-border-radius);
    /* Mesmo Size mode do rodapé do modal (Figma "Text-Button" = 38px); a variável
       fica no próprio componente Radzen, que segue definindo o tamanho do botão. */
    --rz-button-size-md: 2.375rem;
}
.mun-message-dialog__text { color: var(--semantic-content-default); }
.mun-message-dialog--info .mun-message-dialog__text { color: var(--semantic-status-info-text); }
.mun-message-dialog--success .mun-message-dialog__text { color: var(--semantic-status-success-text); }
.mun-message-dialog--critical .mun-message-dialog__text { color: var(--semantic-status-critical-text); }
.mun-message-dialog__action.rz-button {
    box-sizing: border-box;
    height: auto;
    min-height: var(--rz-button-size-md);
    padding: calc(0.625rem - var(--components-button-dimension-border-width)) calc(1.25rem - var(--components-button-dimension-border-width));
    border-radius: var(--border-radius-md);
    font-size: var(--typescale-label-medium-size);
    line-height: 1.285714;
}

/* Pop-up de resposta a uma operação. Figma "Modal Shell" 399x232 (nó do "Ocorrências
   Agrupadas", em `zeladoria / validação`): ícone circular de 56px sobre
   background/secondary, título title-medium, descrição opcional e uma única ação.
   `Frame 93` = 40 + 56 + 17 + 24 + 17 + 38 + 40 = 232, com padding só em bloco.
   A geometria estava num `.razor.css` ESCOPADO do componente e não chegava ao conteúdo
   renderizado no host de diálogo do Radzen — o pop-up saía sem padding, sem
   centralização e sem o selo do ícone, que é o desvio relatado. Fica aqui, ao lado do
   `.mun-message-dialog`, que é a outra moldura curta do design system. */
.occurrence-operation-success {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.0625rem;
    padding-block: 2.5rem;
    background: var(--semantic-background-primary);
    text-align: center;
}
.occurrence-operation-success-icon {
    display: flex;
    width: 3.5rem;
    height: 3.5rem;
    flex: 0 0 3.5rem;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--semantic-background-secondary);
    color: var(--semantic-content-default);
}
.occurrence-operation-success-icon .rz-icon { font-size: 2rem; }
.occurrence-operation-success-title {
    margin: 0;
    color: var(--semantic-content-default);
    font-size: var(--typescale-title-medium-size);
    line-height: var(--typescale-title-medium-line-height);
    font-weight: 500;
}
.occurrence-operation-success-description {
    max-width: 22rem;
    margin: 0;
    color: var(--semantic-content-muted);
    font-size: var(--typescale-body-small-size);
    line-height: var(--typescale-body-small-line-height);
}
.occurrence-operation-success-action.rz-button {
    box-sizing: border-box;
    height: auto;
    min-height: 2.375rem;
    padding: calc(0.625rem - var(--components-button-dimension-border-width)) calc(1.25rem - var(--components-button-dimension-border-width));
    border-radius: var(--border-radius-md);
    font-size: var(--typescale-label-medium-size);
    line-height: 1.285714;
}
/* Aparência tonal de marca do quadro (#fbded7). O `!important` é a exceção declarada:
   Radzen declara o fundo das variantes de botão em seletores de 3 a 4 classes
   (`.rz-button.rz-variant-filled.rz-base`, `.rz-button.rz-base.rz-outlined...`), que uma
   classe de projeto não alcança — e `Variant` só tem Filled/Flat/Text/Outlined, sem
   equivalente tonal. Ver `figma-tokens/docs/radzen-visual-mapping.md`. */
.occurrence-operation-success-action--soft.rz-button {
    background: var(--semantic-action-brand-tonal-container-default) !important;
    border-color: var(--semantic-action-brand-tonal-container-default) !important;
    color: var(--semantic-action-brand-tonal-on-container) !important;
}
.occurrence-dialog-message { color: var(--semantic-content-secondary); }
.occurrence-dialog-items { padding: 0.75rem; background: var(--semantic-background-secondary); border-radius: var(--border-radius-sm); }
.occurrence-dialog-field { min-width: 0; }
.occurrence-dialog-textarea { box-sizing: border-box; width: 100%; min-height: 7.5rem; resize: vertical; }
.occurrence-dialog-acknowledgement { min-height: 2.125rem; }
.occurrence-dialog-error { color: var(--semantic-status-critical-text); }

.occurrence-category-dialog {
    box-sizing: border-box;
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    padding: 0.875rem;
    background: var(--semantic-background-primary);
}
.occurrence-category-kicker { height: 0.875rem; line-height: var(--typescale-label-small-line-height); }
/* O `gap` vem do parâmetro `Gap="0.25rem"` do RadzenStack, que renderiza
   `--rz-gap: 0.25rem` inline; `.rz-stack { gap: var(--rz-gap) }` já produz os
   4px. A declaração com `!important` que existia aqui repetia o mesmo valor e
   duplicava a configuração do componente — removida. */
.occurrence-category-content { height: calc(37.1875rem + 3.75rem); }
.occurrence-category-content > h2 { min-height: 1rem; line-height: 1rem; }
/* Dez linhas do "Dropdown Option" (3,75rem cada): a lista passou de 9 para 10 itens ao
   trocar os rótulos locais por `TipoProblema.List` sem o valor neutro (entra "Outros").
   O teto em 94vh mantém a janela ancorada dentro da viewport de 768 px; abaixo disso a
   própria região rola (`overflow-y: auto`). */
.occurrence-category-options { height: min(calc(3.75rem * 10), calc(94vh - 6.4375rem)); overflow-y: auto; }
/* Figma "Dropdown Option" (`Modal - Alterar Categoria`, 299x60): raio 6 (o raio
   quadrado do botão do design system), padding 10/12, ícone 40 e rótulo 20 de altura
   (body-medium 14/20) centrados no eixo transversal, com 8 de intervalo. O `align-items`
   é declarado aqui para que o ícone e o rótulo compartilhem o mesmo eixo — era o
   desalinhamento relatado. O rótulo usa `neutral-500` (#6d7581), que é exatamente o
   valor do quadro; `--semantic-content-muted` (neutral-600) o deixava escuro demais. */
.rz-button.rz-button-md.occurrence-category-option {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: 3.75rem;
    min-height: 3.75rem;
    flex: 0 0 3.75rem;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    border: 0;
    border-radius: var(--components-button-dimension-border-radius-squared);
    color: var(--semantic-action-neutral-ghost-on-container-subtle);
    text-align: start;
}
.occurrence-category-option .rz-button-text {
    font-size: var(--typescale-body-medium-size);
    line-height: var(--typescale-body-medium-line-height);
}
.occurrence-category-option img { box-sizing: border-box; width: 2.5rem !important; height: 2.5rem !important; padding: 0 !important; border-radius: 10px; }
/* A linha selecionada precisa de "rz-button" no seletor: o Radzen declara o fundo das
   variantes em `.rz-button.rz-variant-text.rz-base` (3 classes), que vence
   `.occurrence-category-option.is-selected` (2) e deixava o fundo transparente — o mesmo
   tipo de perda por especificidade da borda da grade (ver `radzen-visual-mapping.md`).
   Com 3 classes o projeto empata e vence por ordem de folha, sem recorrer a `!important`. */
.rz-button.occurrence-category-option.is-selected { background: var(--semantic-background-tertiary); }
/* O marcador é centrado pelo próprio layout (`inset-block: 0` + `margin-block: auto`)
   em vez de depender da posição estática de um pseudo-elemento em contêiner flex. */
.rz-button.occurrence-category-option.is-selected::after {
    position: absolute;
    inset-inline-end: 0.75rem;
    inset-block: 0;
    margin-block: auto;
    width: 1rem;
    height: 1rem;
    content: "";
    background: var(--semantic-action-neutral-filled-on-container);
    mask: url("/assets/icons/icon-check.svg") center / contain no-repeat;
}
.occurrence-category-footer { flex: 0 0 1.9375rem; }

.occurrence-unlink-explanation { min-height: 3.25rem; }
.occurrence-unlink-icon { margin-block-start: 0.25rem; color: var(--semantic-content-secondary); }
.occurrence-unlink-flow-card {
    box-sizing: border-box;
    width: min(16.625rem, 42%);
    min-height: 4rem;
    padding: 0.75rem;
    border: var(--border-width-regular) solid var(--semantic-border-subtle);
    border-radius: var(--border-radius-sm);
    background: var(--semantic-background-secondary);
}
.occurrence-unlink-arrow { color: var(--semantic-content-secondary); }
.occurrence-unlink-summary > img { width: 2.25rem; height: 2.25rem; border-radius: 10px; }

.occurrence-detail-dialog-shell { height: 100%; }
.occurrence-detail-dialog-shell .occurrence-dialog-content { min-height: 0; flex: 1 1 auto; padding: 0; }
/* Rodapé dimensionado pelo conteúdo: botão de 38px + padding 12/24/24 = 74px,
   a altura do "Footer" do design. O padding inferior maior é o que posiciona
   os botões 12px do topo e 24px da base, em vez de centralizá-los. */
.occurrence-detail-dialog-shell .occurrence-dialog-footer { flex: 0 0 auto; padding: 0.75rem 1.5rem 1.5rem; }
.occurrence-detail-header-content { box-sizing: border-box; width: 100%; min-width: 0; padding-inline-end: 2.5rem; }
.occurrence-detail-identity { min-width: 0; }
/* "Category" do design: 40x40 com raio 10 (o raio 10 não tem token; a
   convenção do projeto para ele é o literal, como em `.occurrence-category-option img`). */
.occurrence-detail-identity img { width: 2.5rem; height: 2.5rem; border-radius: 10px; }
/* Título = `title-large` do design (500 22/28). */
.occurrence-detail-identity h1 { font-size: var(--typescale-title-large-size); line-height: var(--typescale-title-large-line-height); font-weight: 500; }
/* Protocolo = `label-small` do design (500 12/14). */
.occurrence-detail-identity .rz-text-caption { font-size: var(--typescale-label-small-size); line-height: var(--typescale-label-small-line-height); font-weight: 500; }
.occurrence-detail-metrics { flex: 0 0 auto; }
/* Métricas do design: valor `label-large` (500 16/18) e rótulo `label-small`
   (500 12/14). */
.occurrence-detail-metrics .rz-text-body2 { font-size: var(--typescale-label-large-size); line-height: var(--typescale-label-large-line-height); font-weight: 500; }
.occurrence-detail-metrics .rz-text-caption { font-size: var(--typescale-label-small-size); line-height: var(--typescale-label-small-line-height); font-weight: 500; }
/* "Summary metric" do design: chip com raio 8 e padding 4/8. O tom interno é
   mais claro que o da métrica de tempo: valor em `content/secondary` e rótulo
   em `content/subtle`. */
.occurrence-detail-metric { box-sizing: border-box; padding: 0.25rem 0.5rem; border-radius: var(--border-radius-md); }
.occurrence-detail-metric .rz-text-body2 { color: var(--semantic-content-secondary); }
.occurrence-detail-metric .rz-text-caption { color: var(--semantic-content-subtle); }
/* Glifo do "Summary metric": 12 px na mesma linha do valor, em `content/muted` (o
   traço do quadro é #5D646D). */
.occurrence-detail-metric-glyph { font-size: 0.75rem; color: var(--semantic-content-muted); }
/* "frame" do design: caixa 32x32 raio 8 sobre `background/secondary`, ícone 22px. */
.occurrence-detail-metric-icon { display: grid; width: 2rem; height: 2rem; font-size: 1.375rem; place-items: center; border-radius: var(--border-radius-md); background: var(--semantic-background-secondary); color: var(--semantic-content-secondary); }
.occurrence-detail-body { display: grid !important; grid-template-columns: 21.625rem minmax(0, 1fr); align-items: stretch; min-height: 0; height: 100%; }
.occurrence-detail-context { box-sizing: border-box; align-self: start; height: 34.4375rem; min-width: 0; padding: 1rem; }
.occurrence-detail-location,
.occurrence-detail-timeline { width: 100%; }
.occurrence-detail-address { height: 2.375rem; min-height: 2.375rem; }
.occurrence-detail-neighborhood { font-size: var(--typescale-label-large-size); font-weight: 500; line-height: var(--typescale-label-large-line-height); }
.occurrence-detail-map { position: relative; z-index: var(--occurrence-dialog-layer-map); width: 100%; height: 12.625rem; overflow: hidden; border-radius: var(--border-radius-md); container-type: inline-size; isolation: isolate; }
.occurrence-detail-map .ocorrencia-map-host { height: 100%; }
.occurrence-detail-map .ocorrencia-map { width: 100%; height: 100%; border: 0; border-radius: 0; }
.occurrence-detail-map .ocorrencia-indicator,
.occurrence-detail-map .ocorrencia-zoom-controls { display: none; }
.occurrence-map-link { position: absolute; inset-inline-end: 0.5rem; inset-block-end: 1.5rem; z-index: var(--occurrence-dialog-layer-map-overlay); text-shadow: 0 0 3px var(--semantic-background-primary), 0 0 3px var(--semantic-background-primary); }
.occurrence-detail-timeline { position: relative; }
/* A linha do tempo usa o RadzenTimeline: o componente reserva a faixa do eixo em
   --rz-timeline-axis-size, desenha a linha passando pelo centro dessa faixa e posiciona
   o marcador nela, então o círculo fica centrado em relação à linha por construção — o
   projeto não reposiciona nada. O que se define aqui são apenas os tokens do próprio
   componente: faixa do eixo, espessura/cor da linha, borda do marcador e o espaçamento
   entre etapas. O diâmetro do marcador vem de PointSize.ExtraSmall (0.75rem). */
.occurrence-detail-timeline {
    --rz-timeline-axis-size: 2.25rem;
    /* Precisa ser um comprimento (0.625rem), não o número 0: o Radzen calcula a posição
       da linha com calc(var(--rz-timeline-item-padding) + …), e o Chrome rejeita a soma
       de um número puro com um comprimento dentro de calc().
       O valor também é o RITMO VERTICAL entre etapas: o Radzen desenha a linha em
       `.rz-timeline-item::before` com `top: 0; bottom: 0`, isto é, um segmento DENTRO da
       caixa do item. Separá-los por `gap` deixava um buraco em cada etapa e o traço
       terminava antes do círculo seguinte. Com o espaçamento na variável do componente,
       ele vive dentro da caixa e o segmento encontra o do item vizinho: 10 + 10 = 20px,
       o mesmo intervalo do quadro. */
    --rz-timeline-item-padding: 0.625rem;
    --rz-timeline-line-width: 1px;
    --rz-timeline-line-color: var(--semantic-border-subtle);
    --rz-timeline-point-border: var(--border-width-regular) solid transparent;
}
.occurrence-detail-timeline .rz-timeline {
    /* O ritmo vem do padding do item (acima), não de `gap`: ver o comentário da variável.
       O padding recua o eixo e o texto — o `margin-inline` negativo, derivado da MESMA
       variável, devolve a posição x do círculo e a largura útil do texto. */
    margin-inline: calc(var(--rz-timeline-item-padding) * -1);
    gap: 0;
    width: 100%;
}
/* O Radzen declara o eixo e o marcador com `flex: 0 1 <tamanho>`, isto é, permite que
   encolham. Como o conteúdo de uma etapa pode ser largo (a linha "Conclusão prevista
   para …"), o flexbox pode reduzir o eixo e o marcador e deslocar a linha para fora do
   centro. Desligar o encolhimento preserva o tamanho declarado pelos tokens do
   componente, sem tamanho literal e sem `!important`. */
.occurrence-detail-timeline .rz-timeline-axis,
.occurrence-detail-timeline .rz-timeline-point { flex-shrink: 0; }
/* Posição do traço: o próprio Radzen desloca a linha para o centro do eixo
   (--rz-timeline-item-padding + metade do eixo − metade da espessura). O projeto não
   reposiciona nada: o espaçamento entre etapas vive em --rz-timeline-item-padding, que
   o componente aplica como padding do item e usa em todos os calc() do `::before`, então
   a linha é contínua por construção. */
/* Etapas ainda não alcançadas: apenas o contorno, na cor de borda sutil do design. O
   seletor soma as duas classes que o Radzen aplica ao marcador contornado para vencer
   por especificidade, sem !important. */
.occurrence-detail-timeline .rz-timeline-point-outlined.rz-timeline-point-base {
    border-color: var(--semantic-border-subtle);
    color: var(--semantic-border-subtle);
}
.occurrence-detail-timeline-label { color: var(--semantic-content-muted); }
/* A etapa atual (aria-current="step" no item do Radzen) ganha o texto padrão, como no
   design; as demais seguem com o texto esmaecido. */
.occurrence-detail-timeline .rz-timeline-item[aria-current="step"] .occurrence-detail-timeline-label { color: var(--semantic-content-default); }
.occurrence-detail-timeline-meta { color: var(--semantic-content-subtle); }
.occurrence-detail-calls { box-sizing: border-box; min-width: 0; min-height: 0; padding: 1rem; overflow-y: auto; border-inline-start: var(--border-width-regular) solid var(--semantic-border-subtle); background: var(--semantic-background-secondary); }
.occurrence-call-card { box-sizing: border-box; min-width: 0; padding: 1rem; border: var(--border-width-regular) solid var(--semantic-border-subtle); border-radius: var(--border-radius-xl); background: var(--semantic-background-primary); }
.occurrence-call-meta { min-width: 0; }
.occurrence-call-channel { flex: 0 0 1rem; width: 1rem; height: 1rem; object-fit: contain; }
.occurrence-call-date { color: var(--semantic-content-muted); white-space: nowrap; }
.occurrence-call-elapsed { color: var(--semantic-content-subtle); white-space: nowrap; }
.occurrence-call-description { min-width: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.occurrence-call-photos img { width: 3rem; height: 3rem; border-radius: var(--border-radius-sm); object-fit: cover; }
.occurrence-call-more { min-width: 2rem; }
.occurrence-detail-footer-left,
.occurrence-detail-footer-right { min-width: 0; }
/* Largura de conteúdo: o grupo mede o que os rótulos precisam. A largura fixa (22.5rem)
   era o valor do quadro para um rótulo de 12px e, com o rótulo de 14px, ou cortava o
   texto com reticências ou empurrava o botão para fora da coluna. Há folga medida na
   linha (conteúdo 1185px × esquerdo ~382 + direito 580 = 962). */
.occurrence-detail-footer-left { flex: 0 0 auto; }
.occurrence-detail-footer-left .rz-button:first-child { flex: 0 0 12.375rem; }
/* Sem override de tipografia/caixa: o botão herda o Text-Button do rodapé
   (`.occurrence-dialog-footer .rz-button`), ficando idêntico a "Cancelar ocorrência" —
   mesma altura, mesmo centro de caixa de texto, mesmo raio. */
.occurrence-detail-footer-left .rz-button:last-child { flex: 0 0 auto; }
.occurrence-detail-footer-right { flex: 0 0 36.25rem; justify-content: flex-end; }
.occurrence-detail-footer-right .rz-button:nth-child(1) { flex: 0 0 12.0625rem; }
.occurrence-detail-footer-right .rz-button:nth-child(2) { flex: 0 0 8.375rem; }
.occurrence-detail-footer-right .rz-button:nth-child(3) { flex: 0 0 14.8125rem; }
.occurrence-dialog-footer .rz-button {
    box-sizing: border-box;
    height: auto;
    min-height: var(--rz-button-size-md);
    padding: calc(0.625rem - var(--components-button-dimension-border-width)) calc(1.25rem - var(--components-button-dimension-border-width));
    border-radius: var(--border-radius-md);
    font-size: var(--typescale-label-medium-size);
    line-height: 1.285714;
}
.occurrence-dialog-footer .rz-button .rz-button-icon-left { font-size: var(--typescale-label-medium-size); line-height: 1; }
.occurrence-detail-print-icon {
    display: inline-block;
    flex: 0 0 0.875rem;
    height: 0.875rem;
    background-color: currentColor;
    mask: url("/assets/icons/icon-fi-rs-document.svg") center / 0.75rem 0.75rem no-repeat;
}

@media (max-width: 1024px) {
    .occurrence-detail-dialog-shell .occurrence-dialog-footer {
        flex: 0 0 auto;
        height: auto;
        min-height: 4.625rem;
        flex-wrap: wrap !important;
    }

    .occurrence-detail-footer-left,
    .occurrence-detail-footer-right {
        flex: 0 0 100%;
        width: 100%;
        flex-wrap: wrap !important;
    }

    .occurrence-detail-footer-left .rz-button:first-child {
        flex: 0 0 12.375rem;
        width: auto;
        max-width: 100%;
    }

    .occurrence-detail-footer-left .rz-button:last-child {
        flex: 0 0 auto;
        width: auto;
        max-width: 100%;
    }

    .occurrence-detail-footer-right { justify-content: flex-start; }
    .occurrence-detail-footer-right .rz-button:nth-child(1),
    .occurrence-detail-footer-right .rz-button:nth-child(2),
    .occurrence-detail-footer-right .rz-button:nth-child(3) {
        flex: 0 0 auto;
        width: auto;
        max-width: 100%;
    }

    .occurrence-dialog-footer .rz-button {
        height: auto;
        white-space: normal;
    }
}

@media (max-width: 760px) {
    .occurrence-detail-body { grid-template-columns: minmax(0, 1fr); }
    .occurrence-detail-context { max-height: 55vh; overflow-y: auto; }
    .occurrence-detail-calls { border-inline-start: 0; border-block-start: var(--border-width-regular) solid var(--semantic-border-subtle); }
    .occurrence-detail-header-content { align-items: flex-start; flex-direction: column; }
    .occurrence-detail-metrics { flex-wrap: wrap; }
}

/* --- Campo bloqueado (Figma "Input" / Style=Outlined, State=Disabled) ------------------
   O quadro desenha o campo somente-leitura com fundo e borda no mesmo tom
   (`action/disabled/filled-container` = neutral-100) e o valor em
   `action/disabled/shared-on-container` (neutral-400). O `ReadOnly` do Radzen mantém a
   aparência habilitada, então o estado do quadro precisa ser declarado; a classe fica
   aplicada apenas nas telas que reproduzem o quadro bloqueado. */
.mun-field--readonly.rz-textbox,
.mun-field--readonly.rz-textarea {
    border-color: var(--semantic-action-disabled-filled-container);
    background-color: var(--semantic-action-disabled-filled-container);
    color: var(--semantic-action-disabled-shared-on-container);
}
/* O parágrafo bloqueado do quadro é uma caixa 320x120: min-height 7.5rem e padding
   10/12/18, sendo o último o espaço reservado ao contador de caracteres. */
.mun-field--readonly.rz-textarea {
    min-height: 7.5rem;
    padding: 0.625rem 0.75rem 1.125rem;
}
/* Hover de campo BLOQUEADO: o tema do Radzen pinta o hover de qualquer `.rz-textbox` não
   desabilitado (`.rz-textbox:not(:disabled):not(.rz-state-disabled):hover`, 0,4,0) — inclusive
   quando o campo é apenas `readonly`, e é isso que fazia o campo somente-leitura parecer
   editável ao passar o ponteiro. A regra abaixo empata em especificidade (0,4,0) e vence por
   vir depois no cascade (este arquivo é concatenado depois de `material-base.css`),
   devolvendo o estado de campo bloqueado do quadro. */
.rz-textbox[readonly]:not(:disabled):hover,
.rz-textarea[readonly]:not(:disabled):hover {
    border-color: var(--semantic-action-disabled-filled-container);
    background-color: var(--semantic-action-disabled-filled-container);
    color: var(--semantic-action-disabled-shared-on-container);
}
/* O mesmo estado no foco do campo bloqueado que usa a classe do quadro. O foco de um
   `readonly` sem a classe continua visível de propósito (campo focável por teclado). */
.mun-field--readonly.rz-textbox:focus,
.mun-field--readonly.rz-textarea:focus {
    border-color: var(--semantic-action-disabled-filled-container);
    outline: none;
}
.mun-field--readonly.rz-textbox:disabled,
.mun-field--readonly.rz-textarea:disabled {
    opacity: 1;
    -webkit-text-fill-color: var(--semantic-action-disabled-shared-on-container);
}

/* --- Linha de tempo de registro (Histórico da Programação) ----------------------------
   Quadro "Timeline" (Figma 4501:38054, aba Histórico). Cada entrada é marcada por um
   ponto sólido de 12px e por um conector vertical de 1px; o conteúdo vai em quatro
   colunas medidas no quadro — ponto em x=24, hora em x=52, evento em x=170 e usuário em
   x=930, todas com passo de 16px — e o cartão recua 24px. A ordem é ascendente (mais
   antigo primeiro), como no quadro.
   Os 143px que sobram à direita do usuário no quadro são folga do desenho (as camadas
   foram posicionadas à mão), não intenção: o trilho final é o único elástico, então a
   coluna do usuário cai em x=930 na largura do quadro e a folga cresce com a tela em
   vez de empurrar o texto para a borda. As demais pistas têm teto medido, o que as
   deixa encolher em telas estreitas sem tirar a posição relativa no quadro cheio. */
.pg-log { position: relative; min-width: 0; padding: 1.5rem; }
.pg-log-row {
    position: relative;
    display: grid;
    /* A coluna da hora é do tamanho do conteúdo (`auto`), como no quadro: lá o rótulo
       "03 set 14:10" ocupa ~100px e o evento começa em x=170. Fixar 102px fazia um rótulo
       mais longo ("30 out 2026 12:36") invadir a coluna do evento. */
    grid-template-columns: 0.75rem auto minmax(0, 46.5rem) minmax(0, 10.625rem) minmax(0, 1fr);
    column-gap: 1rem;
    align-items: start;
    /* Passo do quadro: 100px por entrada = 42 de conteúdo (16 + 10 + 16) + 58 de intervalo. */
    padding-block-end: 3.625rem;
}
.pg-log-row:last-child { padding-block-end: 0; }
.pg-log-dot { box-sizing: border-box; width: 0.75rem; height: 0.75rem; margin-block-start: 0.25rem; border-radius: 50%; background: var(--semantic-status-info-text); }
/* Liga o ponto desta entrada ao ponto da entrada seguinte: no quadro o conector cobre
   72px, indo de 18px abaixo da linha da hora até 10px acima da próxima entrada. */
.pg-log-row:not(:last-child)::after { position: absolute; inset-block: 1.125rem 0.625rem; inset-inline-start: 0.34375rem; width: 1px; content: ""; background: var(--semantic-border-subtle); }
.pg-log-time { color: var(--semantic-content-default); font-size: var(--typescale-label-medium-size); font-weight: 600; line-height: var(--typescale-label-medium-line-height); white-space: nowrap; }
/* Evento e detalhe são duas linhas separadas: o quadro deixa 10px entre elas. Sem esse
   passo o detalhe colava no evento e a entrada ficava 10px mais baixa que o desenho. */
.pg-log-events { display: flex; min-width: 0; flex-direction: column; gap: 0.625rem; }
.pg-log-event { display: block; color: var(--semantic-content-default); font-size: var(--typescale-label-medium-size); font-weight: 600; line-height: var(--typescale-label-medium-line-height); }
.pg-log-detail { display: block; color: var(--semantic-content-muted); font-size: var(--typescale-body-small-size); line-height: var(--typescale-body-small-line-height); }
.pg-log-actor { color: var(--semantic-content-muted); font-size: var(--typescale-body-small-size); line-height: var(--typescale-body-small-line-height); overflow-wrap: anywhere; }

/* ===== Cadastro manual de chamado — Figma "Novo chamado" (4501:41491) =====
   Duas exceções ESCOPADAS à página, ambas declaradas em docs/radzen-visual-mapping.md.
   A regra geral de entradas (20-components.css) fixa a altura da textarea em
   --rz-input-size-md, e um `height` fixo anula o atributo `rows` do RadzenTextArea: o
   campo "Descrição do problema" precisa crescer com o conteúdo, então aqui a altura volta
   a ser consequência do `rows`, mantendo o piso do design system. As demais telas seguem
   a regra geral (o ajuste geral é um defeito próprio, com ~20 consumidores e impacto nos
   diálogos de ocorrência, e por isso não é feito aqui).
   O "Text-Button" do quadro mede 38px — a mesma altura média já adotada na shell do modal
   de ocorrência por token (`--rz-button-size-md: 2.375rem`), e não por `height` literal. */
.pg-nc-description .rz-textarea {
  height: auto;
  min-height: var(--rz-input-size-md);
}

.pg-nc-actions,
.pg-header-actions,
.pg-nc-evidence {
  --rz-button-size-md: 2.375rem;
  --components-button-dimension-text-size: var(--typescale-label-medium-size);
}

/* A camada compilada dimensiona o botão pelo padding do componente e zera o `min-height`
   (`.rz-button.rz-button-md`), então o token de tamanho médio não o alcança: aqui o mínimo
   volta a ser o próprio token, e a altura continua vindo do componente — sem `height`
   literal. */
.pg-nc-actions .rz-button.rz-button-md,
.pg-header-actions .rz-button.rz-button-md,
.pg-nc-evidence .rz-fileupload .rz-button {
  min-height: var(--rz-button-size-md);
}

/* "Selecionar arquivos" é um botão de contorno no quadro (borda neutral-500), não o botão
   preenchido que o RadzenUpload recebe por padrão. */
.pg-nc-evidence .rz-fileupload .rz-button {
  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);
}