/* Componentes do painel (gerados por site/app/nucleo/ui.js, dialogo.js, toast.js, paleta.js, graficos.js).
   Visual da biblioteca Genesis do Nodum. Use sempre os tokens de fundacoes.css; nenhum tamanho de
   texto fora de 10/11/12/13/14/20/30 px. CSS de módulo vai em estilo/modulos/<id>.css. */

/* ---------- Utilitários de layout ---------- */
.pilha { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--g-space-16); min-width: 0; }
.pilha-24 { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--g-space-24); min-width: 0; }
.pilha-8 { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--g-space-8); min-width: 0; }
.linha { display: flex; align-items: center; flex-wrap: wrap; gap: var(--g-space-8); min-width: 0; }
.linha-12 { display: flex; align-items: center; flex-wrap: wrap; gap: var(--g-space-12); min-width: 0; }
.entre { justify-content: space-between; }
.empurra { margin-left: auto; }
.grade-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--g-space-16); }
.grade-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--g-space-16); }
.grade-lateral { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--g-space-16); align-items: stretch; }
.grade-lateral > .pilha { align-content: start; }
@media (max-width: 1100px) { .grade-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grade-lateral { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .grade-2, .grade-3 { grid-template-columns: minmax(0, 1fr); } }
.num { font-variant-numeric: tabular-nums; }
.direita { text-align: right; }

/* ---------- Ícones ---------- */
.icone { display: inline-block; flex: none; vertical-align: middle; }

/* ---------- Botões ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--g-space-8);
  flex: 0 0 auto;
  min-height: var(--g-height-referenceControl);
  padding: 0 15px;
  border: 1px solid transparent; border-radius: var(--g-geometry-controlRadius);
  font-family: var(--g-font-sans); font-size: var(--g-type-numeric-size); font-weight: var(--g-control-weight); line-height: 18px;
  text-decoration: none; white-space: nowrap;
  transition: transform var(--g-duration-quick) var(--g-ease-smooth-out), background-color var(--g-duration-quick), border-color var(--g-duration-quick), color var(--g-duration-quick), box-shadow var(--g-duration-quick);
}
.botao:hover:not(:disabled) { transform: translateY(var(--g-lift-hover)); }
.botao:active:not(:disabled) { transform: translateY(0) scale(var(--g-scale-pressed)); }
.botao:disabled, .botao[aria-disabled='true'] { opacity: var(--g-opacity-disabled); cursor: not-allowed; }
.botao-primario {
  background: var(--g-primary-surface); color: var(--g-primary-ink); border-color: var(--g-primary-surface);
  box-shadow: 0 1px 2px #0000001f, 0 4px 12px -4px #0000003d, inset 0 1px 0 #ffffff1f;
}
/* No escuro, o primário continua escuro e ganha a borda em degradê do Nodum (beam). */
:root:not(.light) .botao-primario {
  border-color: transparent;
  background: linear-gradient(#1f1f1f, #1f1f1f) padding-box, linear-gradient(115deg, #2dd4bf99, #ffffff59 45%, #a78bfa99) border-box;
  box-shadow: 0 1px 2px #0006, 0 6px 18px -8px #2dd4bf40;
}
.botao-primario:hover:not(:disabled) { background: #000; }
:root:not(.light) .botao-primario:hover:not(:disabled) { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, linear-gradient(115deg, #2dd4bf, #ffffff80 45%, #a78bfa) border-box; }
.botao-secundario { background: var(--g-page); color: var(--g-ink); border-color: var(--g-line); box-shadow: var(--g-control-lift); }
:root:not(.light) .botao-secundario { background: transparent; border-color: var(--g-line-strong); box-shadow: none; }
.botao-secundario:hover:not(:disabled) { border-color: var(--g-line-strong); background: var(--g-hover); }
.botao-fantasma { background: transparent; color: var(--g-secondary); }
.botao-fantasma:hover:not(:disabled) { color: var(--g-ink); background: rgb(var(--g-ink-rgb) / .05); transform: none; }
.botao-perigo { background: var(--g-dangerHover); border-color: var(--g-dangerHover); color: #fff; }
.botao-perigo:hover:not(:disabled) { background: #c42a21; }
.botao-pequeno { min-height: var(--g-height-micro); padding: 0 10px; font-size: var(--g-caption-size); border-radius: var(--g-radius-8); }
.botao-icone { width: var(--g-height-referenceControl); padding: 0; }
.botao-icone.botao-pequeno { width: var(--g-height-micro); }
.botao-largo { width: 100%; }
.botao[aria-busy='true'] { pointer-events: none; }
.botao[aria-busy='true']::after {
  content: ''; width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent; animation: girar .7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }
.acoes { display: flex; align-items: center; flex-wrap: wrap; gap: var(--g-space-8); }
.acoes-fim { justify-content: flex-end; }
.link { color: var(--g-ink); text-decoration: underline; text-decoration-color: var(--g-line-strong); text-underline-offset: 3px; }
.link:hover { text-decoration-color: currentColor; }
.link-sutil { color: var(--g-secondary); text-decoration: none; }
.link-sutil:hover { color: var(--g-ink); }

/* ---------- Campos ---------- */
.campo { display: grid; align-content: start; gap: var(--g-space-8); min-width: 0; }
.campo > label, .campo > .campo-rotulo { color: var(--g-ink); font-size: var(--g-type-body-size); font-weight: 500; line-height: 20px; }
.campo .opcional { color: var(--g-secondary); font-weight: 400; }
.campo > small { color: var(--g-secondary); font-size: var(--g-type-numeric-size); line-height: var(--g-type-numeric-line); }
.campo > small.campo-erro { color: var(--g-status-danger); }
.entrada, .selecao, .area-texto {
  width: 100%; min-width: 0;
  min-height: var(--g-height-field);
  padding: 0 12px;
  border: 1px solid var(--g-line); border-radius: var(--g-geometry-controlRadius);
  background: var(--g-page); color: var(--g-ink);
  box-shadow: var(--g-control-lift);
  font-family: var(--g-font-sans); font-size: var(--g-type-body-size); line-height: 20px;
  transition: border-color var(--g-duration-quick), box-shadow var(--g-duration-quick);
}
:root:not(.light) .entrada, :root:not(.light) .selecao, :root:not(.light) .area-texto { background-color: var(--g-recess); border-color: var(--g-line-strong); }
.entrada::placeholder, .area-texto::placeholder { color: var(--g-secondary); }
.entrada:hover, .selecao:hover, .area-texto:hover { border-color: var(--g-line-strong); }
.entrada:focus, .selecao:focus, .area-texto:focus { outline: none; border-color: var(--g-glyph); box-shadow: 0 0 0 3px rgb(var(--g-ink-rgb) / .08); }
.entrada[aria-invalid='true'], .selecao[aria-invalid='true'], .area-texto[aria-invalid='true'] { border-color: var(--g-status-danger); }
.area-texto { min-height: 96px; padding: 10px 12px; resize: vertical; }
.selecao {
  appearance: none; padding-right: 36px;
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666574' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
:root:not(.light) .selecao { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3a3ac' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
.entrada-compacta { min-height: var(--g-height-referenceControl); font-size: var(--g-type-numeric-size); }
.campo-com-icone { position: relative; }
.campo-com-icone > .icone { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--g-secondary); pointer-events: none; }
.campo-com-icone > .entrada { padding-left: 36px; }

.caixa-selecao { display: inline-flex; align-items: flex-start; gap: 10px; font-size: var(--g-type-body-size); line-height: 20px; cursor: pointer; }
.caixa-selecao input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--g-ink); flex: none; }
.caixa-selecao small { display: block; color: var(--g-secondary); font-size: var(--g-type-numeric-size); line-height: var(--g-type-numeric-line); }

.interruptor { display: inline-flex; align-items: center; gap: 10px; font-size: var(--g-type-body-size); line-height: 20px; cursor: pointer; }
.interruptor button[role='switch'] {
  position: relative; width: var(--g-geometry-switchWidth); height: var(--g-geometry-switchHeight); flex: none;
  padding: 2px; border: 1px solid var(--g-line); border-radius: 999px; background: var(--g-recess);
  transition: background-color var(--g-duration-fast) var(--g-ease-smooth-out), border-color var(--g-duration-fast);
}
.interruptor button[role='switch']::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: var(--g-geometry-switchThumb); height: var(--g-geometry-switchThumb);
  border-radius: 50%; background: var(--g-floating); box-shadow: var(--g-shadow-thumb);
  transition: transform var(--g-duration-fast) var(--g-ease-bounce);
}
.interruptor button[aria-checked='true'] { background: var(--g-ink); border-color: var(--g-ink); }
.interruptor button[aria-checked='true']::after { transform: translateX(18px); background: var(--g-page); }

.formulario { display: grid; gap: var(--g-space-16); }
.formulario-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--g-space-16); }
.formulario-grade > .inteiro { grid-column: 1 / -1; }
@media (max-width: 760px) { .formulario-grade { grid-template-columns: minmax(0, 1fr); } }
.formulario-secao { display: grid; gap: var(--g-space-16); padding-top: var(--g-space-16); border-top: 1px solid var(--g-line); }
.formulario-secao > h3 { font-size: var(--g-type-body-size); line-height: 20px; font-weight: 600; }
.alerta-formulario { padding: 12px 14px; border-radius: var(--g-radius-12); border: 1px solid color-mix(in srgb, var(--g-status-danger) 30%, transparent); background: color-mix(in srgb, var(--g-status-danger) 7%, var(--g-page)); color: var(--g-status-danger); font-size: var(--g-type-numeric-size); line-height: var(--g-type-numeric-line); }

/* ---------- Abas segmentadas ---------- */
.abas {
  display: inline-flex; align-items: center; gap: 2px;
  width: fit-content; max-width: 100%;
  padding: 4px; border-radius: var(--g-radius-12);
  background: var(--g-surface);
  overflow-x: auto; scrollbar-width: none;
}
.abas::-webkit-scrollbar { display: none; }
.abas [role='tab'], .abas .aba {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  min-height: 36px; padding: 0 13px;
  border: 0; border-radius: var(--g-radius-8); background: transparent;
  color: var(--g-secondary); font-size: var(--g-caption-size); line-height: 16px; white-space: nowrap; text-decoration: none;
  transition: background-color var(--g-tabs-dur) var(--g-ease-smooth-out), color var(--g-duration-quick), box-shadow var(--g-tabs-dur);
}
.abas [role='tab']:hover, .abas .aba:hover { color: var(--g-ink); }
.abas [aria-selected='true'], .abas [aria-current='page'] { background: var(--g-page); color: var(--g-ink); box-shadow: var(--g-control-lift); }
:root:not(.light) .abas [aria-selected='true'], :root:not(.light) .abas [aria-current='page'] { background: var(--g-recess); }
.abas .contagem-aba { color: var(--g-secondary); font-variant-numeric: tabular-nums; }

/* ---------- Chips de filtro ---------- */
.chips { display: flex; flex-wrap: wrap; gap: var(--g-space-8); }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: var(--g-height-micro); padding: 0 12px;
  border: 1px solid var(--g-line); border-radius: 999px; background: var(--g-page);
  color: var(--g-secondary); font-size: var(--g-caption-size); line-height: 16px; white-space: nowrap;
}
:root:not(.light) .chip { background: transparent; border-color: var(--g-line-strong); }
.chip:hover { color: var(--g-ink); border-color: var(--g-line-strong); }
.chip[aria-pressed='true'], :root:not(.light) .chip[aria-pressed='true'] { background: var(--g-ink); border-color: var(--g-ink); color: var(--g-page); }
.chip .chip-contagem { font-variant-numeric: tabular-nums; opacity: .8; }
.barra-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: var(--g-space-8) var(--g-space-12); }
.barra-filtros .campo-com-icone { flex: 1 1 220px; max-width: 320px; }
.barra-filtros .selecao { width: auto; min-width: 140px; }
/* Filtros que dividem a linha com outro controle (ex.: abas Cartões/Tabela): ocupam o resto e, no celular, a linha toda. */
.filtros-flex { flex: 1 1 420px; min-width: 0; }
@media (max-width: 760px) {
  .barra-filtros .campo-com-icone { flex-basis: 100%; max-width: none; }
  .barra-filtros > .campo, .barra-filtros > span > .campo { flex: 1 1 140px; }
  .barra-filtros > span { display: contents; }
  .barra-filtros .selecao { width: 100%; }
}

/* ---------- Cartões ---------- */
.cartao {
  min-width: 0;
  padding: var(--g-space-24);
  border: 1px solid var(--g-line); border-radius: var(--g-radius-16);
  background: var(--g-stage);
}
.cartao-compacto { padding: var(--g-space-16); border-radius: var(--g-radius-12); }
.cartao-cabecalho { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: var(--g-space-12); margin-bottom: var(--g-space-16); }
.cartao-cabecalho h2, .cartao-cabecalho h3 { font-size: var(--g-type-title-size); line-height: var(--g-type-title-line); font-weight: 500; letter-spacing: var(--g-type-title-tracking); }
.cartao-cabecalho h3.pequeno, .cartao-cabecalho .titulo-pequeno { font-size: var(--g-type-body-size); line-height: 20px; letter-spacing: 0; }
.cartao-cabecalho p { margin-top: var(--g-space-8); max-width: 740px; color: var(--g-secondary); font-size: var(--g-type-numeric-size); line-height: var(--g-type-numeric-line); }
.cartao-cabecalho > .botao-fantasma { margin-block: -5px; margin-inline-end: -13px; }
.cartao-clicavel { display: block; text-decoration: none; color: inherit; transition: border-color var(--g-duration-quick), transform var(--g-duration-quick) var(--g-ease-smooth-out); }
.cartao-clicavel:hover { border-color: var(--g-line-strong); transform: translateY(-1px); }
.cartao-rodape { margin-top: var(--g-space-16); padding-top: var(--g-space-16); border-top: 1px solid var(--g-line); }

/* ---------- KPIs ---------- */
.grade-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--g-space-16); margin: 0; min-width: 0; }
.grade-kpis[data-colunas='3'] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grade-kpis[data-colunas='2'] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1100px) { .grade-kpis[data-colunas='4'], .grade-kpis:not([data-colunas]) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kpi { min-width: 0; padding: var(--g-space-24); border: 1px solid var(--g-line); border-radius: var(--g-radius-12); display: grid; align-content: start; }
.kpi dt { color: var(--g-secondary); font-size: var(--g-type-numeric-size); line-height: var(--g-type-numeric-line); display: flex; align-items: center; gap: 6px; }
.kpi dd { margin: var(--g-space-12) 0 var(--g-space-8); display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.kpi .kpi-valor { font-size: var(--g-type-display-size); font-weight: 500; line-height: var(--g-type-display-line); letter-spacing: var(--g-type-display-tracking); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kpi p { margin: 0; color: var(--g-secondary); font-size: var(--g-type-numeric-size); line-height: var(--g-type-numeric-line); }
.kpi .kpi-sparkline { margin-top: var(--g-space-12); }
.variacao { display: inline-flex; align-items: center; gap: 2px; font-size: var(--g-caption-size); line-height: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.variacao-boa { color: var(--g-status-success); }
.variacao-ruim { color: var(--g-status-danger); }
.variacao-neutra { color: var(--g-secondary); }
@media (max-width: 760px) {
  .grade-kpis, .grade-kpis[data-colunas] { grid-template-columns: minmax(0, 1fr); gap: var(--g-space-12); }
  .kpi { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--g-space-4) var(--g-space-12); padding: var(--g-space-16); }
  .kpi dd { margin: 0; grid-column: 2; grid-row: 1 / 3; justify-content: flex-end; }
  .kpi .kpi-valor { font-size: var(--g-type-title-size); line-height: var(--g-type-title-line); }
  .kpi .kpi-sparkline { display: none; }
}

/* ---------- Selos ---------- */
.selo {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  min-height: 22px; padding: 0 9px;
  border: 1px solid var(--g-line); border-radius: 999px; background: var(--g-page);
  color: var(--g-ink); font-size: var(--g-label-small-size); line-height: 14px; font-weight: 500; white-space: nowrap;
}
:root:not(.light) .selo { background: var(--g-surface); border-color: var(--g-line-strong); }
.selo::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--selo-cor, var(--g-secondary)); flex: none; }
.selo.sem-ponto::before { display: none; }
.selo-sucesso { --selo-cor: var(--g-status-success); color: var(--g-status-success); background: color-mix(in srgb, var(--g-status-success) 7%, var(--g-page)); border-color: color-mix(in srgb, var(--g-status-success) 22%, transparent); }
.selo-alerta { --selo-cor: var(--g-status-warning); color: var(--g-status-warning); background: color-mix(in srgb, var(--g-status-warning) 8%, var(--g-page)); border-color: color-mix(in srgb, var(--g-status-warning) 25%, transparent); }
.selo-perigo { --selo-cor: var(--g-status-danger); color: var(--g-status-danger); background: color-mix(in srgb, var(--g-status-danger) 7%, var(--g-page)); border-color: color-mix(in srgb, var(--g-status-danger) 22%, transparent); }
.selo-info { --selo-cor: var(--g-status-info); color: var(--g-status-info); background: color-mix(in srgb, var(--g-status-info) 7%, var(--g-page)); border-color: color-mix(in srgb, var(--g-status-info) 22%, transparent); }
.selo-destaque { --selo-cor: var(--g-page); background: var(--g-ink); color: var(--g-page); border-color: var(--g-ink); }
:root:not(.light) .selo-sucesso, :root:not(.light) .selo-alerta, :root:not(.light) .selo-perigo, :root:not(.light) .selo-info { background: color-mix(in srgb, var(--selo-cor) 12%, #000); }

/* ---------- Tabela ---------- */
.tabela-caixa { position: relative; min-width: 0; max-width: 100%; overflow-x: auto; border: 1px solid var(--g-line); border-radius: var(--g-radius-12); }
.tabela { width: 100%; border-collapse: collapse; font-size: var(--g-type-numeric-size); line-height: var(--g-type-numeric-line); }
.tabela th {
  padding: 10px 16px; text-align: left; white-space: nowrap;
  color: var(--g-secondary); font-size: var(--g-caption-size); line-height: 16px; font-weight: 500;
  border-bottom: 1px solid var(--g-line); background: color-mix(in srgb, var(--g-surface) 45%, transparent);
}
.tabela td { padding: 12px 16px; border-bottom: 1px solid var(--g-line); vertical-align: middle; font-variant-numeric: tabular-nums; }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela .num, .tabela [data-alinhar='direita'] { text-align: right; font-variant-numeric: tabular-nums; }
.tabela th button { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: inherit; font: inherit; }
.tabela th button:hover { color: var(--g-ink); }
.tabela th[aria-sort] button { color: var(--g-ink); }
.tabela tr[data-link] { cursor: pointer; }
.tabela tbody tr[data-link]:hover { background: var(--g-hover); }
.tabela tbody tr[data-link]:focus-visible { outline-offset: -2px; }
.tabela .celula-principal { display: grid; gap: 2px; min-width: 160px; }
.tabela .celula-principal strong { font-weight: 500; font-size: var(--g-type-numeric-size); }
.tabela .celula-principal small { color: var(--g-secondary); font-size: var(--g-caption-size); line-height: 16px; }
.paginacao { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--g-space-8); padding-top: var(--g-space-12); color: var(--g-secondary); font-size: var(--g-caption-size); line-height: 16px; }

/* ---------- Estado vazio, carregando, erro ---------- */
.vazio { display: grid; justify-items: center; gap: var(--g-space-8); padding: 40px 16px; text-align: center; }
.vazio-icone { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--g-surface); color: var(--g-secondary); margin-bottom: 4px; }
.vazio h3 { font-size: var(--g-type-body-size); line-height: 20px; font-weight: 500; }
.vazio p { max-width: 420px; color: var(--g-secondary); font-size: var(--g-type-numeric-size); line-height: var(--g-type-numeric-line); }
.vazio .acoes { margin-top: var(--g-space-8); justify-content: center; }
.esqueleto {
  display: block; height: 14px; border-radius: 6px;
  background: linear-gradient(90deg, var(--g-surface) 0%, var(--g-recess) 50%, var(--g-surface) 100%);
  background-size: 200% 100%; animation: brilho var(--g-shimmer-dur) linear infinite;
}
.esqueleto-bloco { height: 120px; border-radius: var(--g-radius-12); }
.esqueleto-titulo { height: 30px; width: 40%; }
@keyframes brilho { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.carregando-pagina { display: grid; gap: var(--g-space-24); }
.erro-pagina { padding: 16px; border: 1px solid color-mix(in srgb, var(--g-status-danger) 30%, transparent); border-radius: var(--g-radius-12); color: var(--g-status-danger); font-size: var(--g-type-numeric-size); line-height: var(--g-type-numeric-line); }

/* ---------- Avatar ---------- */
.avatar {
  display: inline-grid; place-items: center; flex: none;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--g-recess); color: var(--g-ink);
  font-size: var(--g-label-small-size); line-height: 1; font-weight: 500; letter-spacing: 0; text-transform: none;
}
.avatar-grande { width: 40px; height: 40px; font-size: var(--g-type-numeric-size); }
.pessoa { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.pessoa > span:last-child { display: grid; min-width: 0; }
.pessoa strong { font-weight: 500; font-size: var(--g-type-numeric-size); line-height: var(--g-type-numeric-line); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pessoa small { color: var(--g-secondary); font-size: var(--g-caption-size); line-height: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Progresso ---------- */
.progresso { display: grid; gap: 8px; min-width: 0; }
.progresso-rotulo { display: flex; justify-content: space-between; gap: 8px; font-size: var(--g-caption-size); line-height: 16px; }
.progresso-trilho { height: 6px; border-radius: 999px; background: var(--g-recess); overflow: hidden; }
.progresso-barra { height: 100%; border-radius: 999px; background: var(--g-ink); transition: width var(--g-duration-slow) var(--g-ease-smooth-out); }
.progresso[data-tom='sucesso'] .progresso-barra { background: var(--g-status-success); }
.progresso[data-tom='alerta'] .progresso-barra { background: var(--g-status-warning); }
.progresso[data-tom='perigo'] .progresso-barra { background: var(--g-status-danger); }

/* ---------- Linha do tempo ---------- */
.linha-tempo { list-style: none; margin: 0; padding: 0; display: grid; }
.linha-tempo li { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; padding-bottom: 18px; }
.linha-tempo li:last-child { padding-bottom: 0; }
.linha-tempo li::before { content: ''; position: absolute; left: 11px; top: 22px; bottom: -2px; width: 1px; background: var(--g-line-strong); }
.linha-tempo li:last-child::before { display: none; }
.marco { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--g-surface); color: var(--g-secondary); border: 1px solid var(--g-line); }
.marco[data-tom='sucesso'] { color: var(--g-status-success); }
.marco[data-tom='alerta'] { color: var(--g-status-warning); }
.marco[data-tom='perigo'] { color: var(--g-status-danger); }
.marco[data-tom='info'] { color: var(--g-status-info); }
.linha-tempo .evento { display: grid; gap: 2px; padding-top: 2px; }
.linha-tempo .evento strong { font-weight: 500; font-size: var(--g-type-numeric-size); line-height: var(--g-type-numeric-line); }
.linha-tempo .evento p { color: var(--g-secondary); font-size: var(--g-type-numeric-size); line-height: var(--g-type-numeric-line); }
.linha-tempo .evento small { color: var(--g-secondary); font-size: var(--g-caption-size); line-height: 16px; }

/* ---------- Primeiros passos (como no Nodum) ---------- */
.passos-cabecalho { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 16px 24px; padding-bottom: 20px; border-bottom: 1px solid var(--g-line); }
.passos-cabecalho h2 { font-size: var(--g-type-body-size); line-height: 22px; font-weight: 400; }
.passos-cabecalho p { margin-top: 6px; color: var(--g-secondary); font-size: var(--g-type-numeric-size); line-height: var(--g-type-numeric-line); }
.passos-cabecalho .progresso { width: 240px; max-width: 100%; }
.passos-lista { list-style: none; margin: 0; padding: 0; }
.passos-lista li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--g-line); }
.passos-lista li:last-child { border-bottom: 0; padding-bottom: 0; }
.passo-marca { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: var(--g-type-numeric-size); font-variant-numeric: tabular-nums; }
.passo-marca[data-feito='true'] { background: var(--g-recess); color: var(--g-ink); }
.passo-marca[data-feito='false'] { border: 1px solid var(--g-status-warning); color: var(--g-ink); }
.passo-texto strong { display: block; font-weight: 400; font-size: var(--g-type-body-size); line-height: 22px; }
.passo-texto p { color: var(--g-secondary); font-size: var(--g-type-numeric-size); line-height: var(--g-type-numeric-line); margin-top: 2px; }
@media (max-width: 760px) {
  .passos-lista li { grid-template-columns: 28px minmax(0, 1fr); align-items: start; }
  .passos-lista li > .botao, .passos-lista li > a.botao { grid-column: 2; justify-self: start; }
}

/* ---------- Lista de descrição ---------- */
.descricao { display: grid; grid-template-columns: minmax(120px, 200px) minmax(0, 1fr); gap: 12px 16px; margin: 0; font-size: var(--g-type-numeric-size); line-height: var(--g-type-numeric-line); }
.descricao dt { color: var(--g-secondary); }
.descricao dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 760px) { .descricao { grid-template-columns: minmax(0, 1fr); gap: 2px; } .descricao dd { margin-bottom: 10px; } }

/* ---------- Diálogo (modal) e gaveta ---------- */
.fundo-dialogo {
  position: fixed; inset: 0; z-index: 80;
  display: grid; place-items: center; padding: 16px;
  background: var(--g-backdrop);
  animation: aparecer var(--g-modal-open-dur) var(--g-ease-smooth-out);
}
.fundo-dialogo[data-saindo] { animation: sumir var(--g-modal-close-dur) ease-in forwards; }
.dialogo {
  display: flex; flex-direction: column;
  width: min(560px, 100%); max-height: min(86dvh, 820px);
  border: 1px solid var(--g-line); border-radius: var(--g-radius-16);
  background: var(--g-floating); box-shadow: 0 24px 64px -12px #0000004d;
  animation: subir var(--g-modal-open-dur) var(--g-ease-smooth-out);
  outline: none;
}
.dialogo[data-tamanho='grande'] { width: min(760px, 100%); }
.dialogo[data-tamanho='pequeno'] { width: min(420px, 100%); }
.dialogo-cabecalho { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 24px 24px 0; }
.dialogo-cabecalho h2 { font-size: var(--g-type-title-size); line-height: var(--g-type-title-line); font-weight: 500; letter-spacing: var(--g-type-title-tracking); }
.dialogo-cabecalho p { margin-top: 6px; color: var(--g-secondary); font-size: var(--g-type-numeric-size); line-height: var(--g-type-numeric-line); }
.dialogo-corpo { padding: 20px 24px; overflow-y: auto; min-height: 0; }
.dialogo-rodape { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 8px; padding: 16px 24px; border-top: 1px solid var(--g-line); }
.fundo-dialogo.fundo-gaveta-lateral { place-items: stretch end; padding: 0; }
.gaveta {
  display: flex; flex-direction: column;
  width: min(520px, 100vw); height: 100dvh;
  border-left: 1px solid var(--g-line); background: var(--g-floating);
  box-shadow: -24px 0 64px -24px #0000004d;
  animation: deslizar var(--g-panel-open-dur) var(--g-ease-smooth-out);
  outline: none;
}
.gaveta[data-tamanho='grande'] { width: min(720px, 100vw); }
.fundo-dialogo[data-saindo] .gaveta { animation: deslizar-saida var(--g-panel-close-dur) var(--g-ease-smooth-out) forwards; }
.gaveta .dialogo-corpo { flex: 1; }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
@keyframes sumir { to { opacity: 0; } }
@keyframes subir { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes deslizar { from { transform: translateX(100%); } to { transform: none; } }
@keyframes deslizar-saida { to { transform: translateX(100%); } }
@media (max-width: 760px) {
  .fundo-dialogo:not(.fundo-gaveta-lateral) { place-items: end stretch; padding: 0; }
  .dialogo { width: 100%; max-height: 92dvh; border-radius: var(--g-radius-16) var(--g-radius-16) 0 0; }
  .dialogo-cabecalho { padding: 20px 20px 0; }
  .dialogo-corpo { padding: 16px 20px; }
  .dialogo-rodape { padding: 12px 20px; }
}
.senha-mostrada { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px dashed var(--g-line-strong); border-radius: var(--g-radius-12); background: var(--g-surface); font-family: var(--g-font-mono); font-size: var(--g-type-body-size); }

/* ---------- Menu flutuante (popover) ---------- */
.menu-flutuante {
  position: fixed; z-index: 70;
  min-width: 220px; max-width: min(360px, calc(100vw - 16px));
  max-height: min(420px, calc(100dvh - 24px)); overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--g-line); border-radius: var(--g-radius-12);
  background: var(--g-floating); box-shadow: var(--g-shadow-popover);
  animation: subir var(--g-duration-fast) var(--g-ease-smooth-out);
}
.menu-flutuante [role='menuitem'], .menu-flutuante [role='option'], .menu-flutuante .item-menu {
  display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: var(--g-height-referenceControl); padding: 6px 10px;
  border: 0; border-radius: var(--g-radius-8); background: none; text-align: left; text-decoration: none; color: var(--g-ink);
  font-size: var(--g-type-numeric-size); line-height: var(--g-type-numeric-line);
}
.menu-flutuante [role='menuitem']:hover, .menu-flutuante [role='menuitem']:focus-visible,
.menu-flutuante [role='option']:hover, .menu-flutuante [role='option'][data-ativo='true'],
.menu-flutuante .item-menu:hover { background: var(--g-hover); outline: none; }
.menu-flutuante [aria-selected='true'] { font-weight: 600; }
.menu-flutuante small { display: block; color: var(--g-secondary); font-size: var(--g-caption-size); line-height: 16px; font-weight: 400; }
.menu-flutuante hr { border: 0; border-top: 1px solid var(--g-line); margin: 6px 0; }
.menu-flutuante .menu-rotulo { padding: 8px 10px 4px; color: var(--g-secondary); font-size: var(--g-label-small-size); line-height: 14px; letter-spacing: .08em; text-transform: uppercase; }
.menu-flutuante .menu-busca { padding: 4px 4px 6px; }
.menu-flutuante .item-menu .icone:last-child { margin-left: auto; }
.menu-perigo { color: var(--g-status-danger) !important; }

/* ---------- Notificações (sino) ---------- */
.lista-notificacoes { list-style: none; margin: 0; padding: 0; }
.notificacao { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 14px 16px; border-bottom: 1px solid var(--g-line); text-decoration: none; color: inherit; }
.notificacao:last-child { border-bottom: 0; }
a.notificacao:hover, button.notificacao:hover { background: var(--g-hover); }
.notificacao .ponto { width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: transparent; }
.notificacao[data-lida='false'] .ponto { background: var(--g-status-info); }
.notificacao strong { display: block; font-weight: 500; font-size: var(--g-type-numeric-size); line-height: var(--g-type-numeric-line); }
.notificacao[data-lida='true'] strong { font-weight: 400; color: var(--g-secondary); }
.notificacao p { margin-top: 2px; color: var(--g-secondary); font-size: var(--g-type-numeric-size); line-height: var(--g-type-numeric-line); }
.notificacao small { color: var(--g-secondary); font-size: var(--g-caption-size); line-height: 16px; white-space: nowrap; }
.painel-notificacoes { width: min(400px, calc(100vw - 16px)); padding: 0; }
.painel-notificacoes header { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 12px 12px 16px; border-bottom: 1px solid var(--g-line); }
.painel-notificacoes header h2 { font-size: var(--g-type-body-size); line-height: 20px; font-weight: 500; }
.painel-notificacoes footer { padding: 8px; border-top: 1px solid var(--g-line); }

/* ---------- Toast ---------- */
.toasts { position: fixed; z-index: 90; right: 16px; bottom: 16px; display: grid; gap: 8px; justify-items: end; pointer-events: none; }
.toast {
  display: flex; align-items: center; gap: 10px; max-width: min(420px, calc(100vw - 32px));
  padding: 12px 16px; border-radius: var(--g-radius-12);
  background: var(--g-ink); color: var(--g-page); box-shadow: var(--g-shadow-popover);
  font-size: var(--g-type-numeric-size); line-height: var(--g-type-numeric-line);
  pointer-events: auto; animation: subir var(--g-duration-fast) var(--g-ease-smooth-out);
}
.toast[data-saindo] { animation: sumir var(--g-duration-quick) ease-in forwards; }
.toast[data-tom='erro'] .icone { color: #ff8a95; }
:root.light .toast[data-tom='erro'] .icone { color: #ff8a95; }
.toast[data-tom='sucesso'] .icone { color: #4ade80; }
:root:not(.light) .toast[data-tom='erro'] .icone { color: #bb273e; }
:root:not(.light) .toast[data-tom='sucesso'] .icone { color: #147d3d; }
@media (max-width: 760px) { .toasts { left: 16px; right: 16px; justify-items: stretch; } }

/* ---------- Dica (tooltip) ---------- */
.dica-flutuante {
  position: fixed; z-index: 95; pointer-events: none;
  max-width: min(260px, calc(100vw - 16px));
  padding: 4px 8px; border-radius: var(--g-radius-8);
  background: var(--g-ink); color: var(--g-page); box-shadow: var(--g-shadow-popover);
  font-size: var(--g-caption-size); line-height: 16px; font-weight: 500; text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ---------- Paleta ⌘K ---------- */
.fundo-dialogo.fundo-paleta { place-items: start center; padding-top: 12vh; }
.paleta { width: min(640px, 100%); max-height: min(70dvh, 560px); overflow: hidden; }
.paleta-busca { display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid var(--g-line); color: var(--g-secondary); }
.paleta-busca input { flex: 1; min-width: 0; height: 52px; border: 0; background: transparent; color: var(--g-ink); font-size: var(--g-type-body-size); outline: none; }
.paleta-busca input::placeholder { color: var(--g-secondary); }
.paleta-busca kbd { font: inherit; font-size: var(--g-label-small-size); padding: 0 5px; border: 1px solid var(--g-line); border-radius: 5px; line-height: 16px; }
.paleta-resultados { overflow-y: auto; padding: 6px; min-height: 0; flex: 1; }
.paleta-grupo { padding: 10px 10px 4px; color: var(--g-secondary); font-size: var(--g-label-small-size); line-height: 14px; letter-spacing: .08em; text-transform: uppercase; }
.paleta-item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 40px; padding: 6px 10px;
  border: 0; border-radius: var(--g-radius-8); background: none; text-align: left; color: var(--g-ink);
  font-size: var(--g-type-numeric-size); line-height: var(--g-type-numeric-line);
}
.paleta-item[data-ativo='true'] { background: var(--g-hover); }
.paleta-item .icone { color: var(--g-secondary); }
.paleta-item span { min-width: 0; display: grid; }
.paleta-item small { color: var(--g-secondary); font-size: var(--g-caption-size); line-height: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.paleta-vazio { padding: 24px 16px; color: var(--g-secondary); font-size: var(--g-type-numeric-size); text-align: center; }
.paleta-rodape { display: flex; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--g-line); color: var(--g-secondary); font-size: var(--g-label-small-size); line-height: 14px; }
@media (max-width: 760px) { .fundo-dialogo.fundo-paleta { padding-top: 0; place-items: start stretch; } .paleta { border-radius: 0 0 var(--g-radius-16) var(--g-radius-16); max-height: 80dvh; } .paleta-rodape { display: none; } }

/* ---------- Gráficos (SVG) ---------- */
.grafico { position: relative; width: 100%; min-width: 0; }
.grafico svg { width: 100%; height: auto; overflow: visible; }
.grafico text { fill: var(--g-secondary); font-family: var(--g-font-sans); font-size: 11px; font-variant-numeric: tabular-nums; }
.grafico .eixo { stroke: var(--g-line-strong); stroke-width: 1; }
.grafico .grade-linha { stroke: var(--g-line); stroke-width: 1; }
.grafico .serie-linha { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.grafico .serie-area { opacity: .1; }
.grafico [data-dica] { cursor: default; }
.grafico .alvo-dica { fill: transparent; }
.grafico .barra-grafico { transition: opacity var(--g-duration-quick); }
.grafico .barra-grafico:hover, .grafico .fatia:hover { opacity: .8; }
.grafico .ponto-dica { opacity: 0; transition: opacity var(--g-duration-quick); }
.grafico g:hover > .ponto-dica { opacity: 1; }
.legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font-size: var(--g-caption-size); line-height: 16px; color: var(--g-secondary); }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.legenda i { width: 8px; height: 8px; border-radius: 2px; background: var(--cor); }
.funil-etapa { display: grid; grid-template-columns: minmax(90px, 160px) minmax(0, 1fr) auto; align-items: center; gap: 12px; font-size: var(--g-type-numeric-size); line-height: var(--g-type-numeric-line); }
.funil-etapa + .funil-etapa { margin-top: 8px; }
.funil-barra { height: 28px; border-radius: 6px; background: var(--cor, var(--g-serie-1)); min-width: 4px; }
.funil-etapa .num { color: var(--g-ink); }
.funil-etapa small { color: var(--g-secondary); font-size: var(--g-caption-size); }
.barras-h { display: grid; gap: 10px; }
.barras-h-linha { display: grid; grid-template-columns: minmax(80px, 180px) minmax(0, 1fr) auto; align-items: center; gap: 12px; font-size: var(--g-type-numeric-size); line-height: var(--g-type-numeric-line); }
.barras-h-trilho { height: 8px; border-radius: 999px; background: var(--g-recess); overflow: hidden; }
.barras-h-barra { height: 100%; border-radius: 999px; background: var(--cor, var(--g-serie-1)); }
.barras-h-linha .rotulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Mapa ---------- */
.mapa-caixa { position: relative; height: max(420px, calc(100dvh - 300px)); border: 1px solid var(--g-line); border-radius: var(--g-radius-16); overflow: hidden; background: var(--g-surface); }
.mapa-caixa .maplibregl-map { position: absolute; inset: 0; font-family: var(--g-font-sans); }
.pino-unidade {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--cor, var(--g-secondary)); color: #fff; border: 2px solid #fff;
  box-shadow: 0 2px 6px #0000004d; cursor: pointer; padding: 0;
}
.pino-unidade[data-tipo='fabrica'] { border-radius: 6px; }
.pino-unidade:hover, .pino-unidade[data-ativo='true'] { transform: scale(1.15); z-index: 2; }
.maplibregl-popup-content { background: var(--g-floating) !important; color: var(--g-ink); border: 1px solid var(--g-line); border-radius: var(--g-radius-12) !important; box-shadow: var(--g-shadow-popover) !important; padding: 14px 16px !important; font-size: var(--g-type-numeric-size); line-height: var(--g-type-numeric-line); }
.maplibregl-popup-tip { display: none; }
.maplibregl-popup-close-button { font-size: var(--g-type-title-size); color: var(--g-secondary); right: 6px; top: 4px; }
.maplibregl-ctrl-attrib { font-size: var(--g-label-small-size) !important; }
.mapa-legenda { position: absolute; left: 12px; bottom: 12px; z-index: 2; display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--g-line); border-radius: var(--g-radius-12); background: var(--g-floating); box-shadow: var(--g-shadow-popover); font-size: var(--g-caption-size); line-height: 16px; }
.mapa-legenda span { display: inline-flex; align-items: center; gap: 8px; }
.mapa-legenda i { width: 10px; height: 10px; border-radius: 50%; background: var(--cor); }
.popup-unidade { display: grid; gap: 6px; min-width: 200px; }
.popup-unidade strong { font-weight: 500; font-size: var(--g-type-body-size); line-height: 20px; padding-right: 16px; }

/* ---------- Ficha (cabeçalho de entidade) ---------- */
.ficha-topo { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.ficha-icone { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--g-radius-12); background: var(--g-surface); color: var(--g-ink); flex: none; border: 1px solid var(--g-line); }
.lista-simples { list-style: none; margin: 0; padding: 0; }
.lista-simples > li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--g-line); min-width: 0; }
.lista-simples > li:first-child { padding-top: 0; }
.lista-simples > li:last-child { border-bottom: 0; padding-bottom: 0; }

/* ---------- Em construção (stubs dos módulos) ---------- */
.em-construcao { display: grid; gap: 16px; }
.em-construcao ul { margin: 0; padding-left: 18px; color: var(--g-secondary); font-size: var(--g-type-numeric-size); line-height: 22px; }

/* ---------- Widgets da Visão geral ---------- */
.grade-widgets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--g-space-16); align-items: start; }
.grade-widgets > [data-largura='inteira'] { grid-column: 1 / -1; }
.grade-widgets > .widget-inicio > .cartao { height: 100%; }
@media (max-width: 1100px) { .grade-widgets { grid-template-columns: minmax(0, 1fr); } }

/* Notificação dentro do menu do sino: mantém a grade da lista (ponto, texto, quando). */
.menu-flutuante .notificacao[role='menuitem'] { display: grid; align-items: start; padding: 12px 16px; border-radius: 0; min-height: 0; }
.menu-flutuante .lista-notificacoes { margin: 0 -1px; }