/* 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;
}

.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),
.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);
}

/* ===== 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;
}

.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);
}

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

/* 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); }
.occurrence-group-select { box-sizing: border-box; width: 1.875rem; height: 1.875rem; }
.occurrence-group-select img { width: 1rem !important; height: 1rem !important; }
.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);
}
.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 {
    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;
}
.occurrence-solve-dialog-shell { height: 35.8125rem; }
.occurrence-solve-dialog-shell .occurrence-dialog-header { flex: 0 0 4.125rem; }
.occurrence-solve-dialog-shell .occurrence-dialog-content { flex: 1 1 auto; overflow-y: auto; }
.occurrence-solve-dialog-shell .occurrence-dialog-footer { flex: 0 0 4.1875rem; }
/* 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: 37.1875rem; }
.occurrence-category-content > h2 { min-height: 1rem; line-height: 1rem; }
.occurrence-category-options { height: 33.75rem; 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); }
/* "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; width: 100%; height: 12.625rem; overflow: hidden; border-radius: var(--border-radius-md); container-type: inline-size; }
.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: 500; text-shadow: 0 0 3px var(--semantic-background-primary), 0 0 3px var(--semantic-background-primary); }
.occurrence-detail-timeline { position: relative; height: 14.4375rem; padding-inline-start: 0.125rem; }
.occurrence-detail-timeline::before { position: absolute; inset-block: 0.375rem; inset-inline-start: 0.5rem; width: 1px; content: ""; background: var(--semantic-border-subtle); }
.occurrence-detail-timeline-step { position: relative; z-index: 1; min-height: 1.625rem; }
.occurrence-detail-timeline-indicator { box-sizing: border-box; flex: 0 0 0.75rem; width: 0.75rem; height: 0.75rem; margin: 0.25rem; border: var(--border-width-regular) solid var(--semantic-border-subtle); border-radius: 50%; background: var(--semantic-background-primary); }
.occurrence-detail-timeline-indicator[data-state="complete"] { border-color: var(--semantic-action-brand-filled-container-default); background: var(--semantic-action-brand-filled-container-default); }
.occurrence-detail-timeline-indicator[data-state="current"] { border-color: var(--semantic-action-brand-filled-container-default); background: var(--semantic-background-primary); }
.occurrence-detail-timeline-label { color: var(--semantic-content-muted); }
.occurrence-detail-timeline-step:has([data-state="current"]) .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; }
.occurrence-detail-footer-left { flex: 0 0 22.5rem; }
.occurrence-detail-footer-left .rz-button:first-child { flex: 0 0 12.375rem; }
.occurrence-detail-footer-left .rz-button:last-child { flex: 1 1 auto; min-width: 0; }
.occurrence-detail-footer-left .rz-button:last-child {
    padding: calc(0.5rem - var(--components-button-dimension-border-width)) calc(1rem - var(--components-button-dimension-border-width));
    border-radius: var(--components-button-dimension-border-radius-squared);
    font-size: var(--typescale-label-small-size);
    line-height: 1.25;
}
.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;
}
.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) ----------------------------
   O quadro "Timeline" marca cada entrada com um ponto sólido de 12px e um conector
   vertical de 1px, e distribui o conteúdo em três colunas: hora, evento com o detalhe
   empilhado abaixo, e usuário à direita. A ordem ascendente (mais antigo primeiro) é
   intencional: é a ordem cronológica do evento, como no quadro. O conector do quadro
   mede #dee0e5, praticamente o mesmo tom de `border/subtle` (neutral-100). */
.pg-log { position: relative; min-width: 0; }
.pg-log-row { position: relative; display: grid; grid-template-columns: 0.75rem auto minmax(0, 1fr) minmax(0, 11rem); column-gap: 1rem; align-items: start; padding-block-end: 2.5rem; }
.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.125rem; border-radius: 50%; background: var(--semantic-status-info-text); }
/* Liga o ponto desta entrada ao ponto da entrada seguinte: o passo do quadro mede
   72px (32 de conteúdo + 40 de intervalo), e o conector cobre esse intervalo. */
.pg-log-row:not(:last-child)::after { position: absolute; inset-block: 0.875rem -0.125rem; 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: 500; line-height: var(--typescale-label-medium-line-height); white-space: nowrap; }
.pg-log-events { display: flex; min-width: 0; flex-direction: column; }
.pg-log-event { display: block; color: var(--semantic-content-default); font-size: var(--typescale-label-medium-size); font-weight: 500; 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; text-align: end; }

/* ===== 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);
}