/* =========================================================================
   GDI ONLine — Componentes
   Depende de gdi-tokens.css. Todas as classes com prefixo .gdi- (e campos
   .jf-*) para conviver com o style.css atual durante a migração tela a tela.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Shell — só o conteúdo rola; topo, sidebar e status ficam fixos
   ------------------------------------------------------------------------- */
.gdi-shell {
  display: grid;
  grid-template-columns: var(--gdi-sidebar-w) 1fr;
  height: 100vh;
  overflow: hidden;
}
.gdi-shell.is-collapsed { grid-template-columns: var(--gdi-sidebar-w-min) 1fr; }

.gdi-main {
  display: grid;
  grid-template-rows: var(--gdi-topbar-h) 1fr var(--gdi-statusbar-h);
  min-width: 0;
  min-height: 0;
  height: 100vh;
}
.gdi-content {
  overflow: auto;
  min-height: 0;   /* deixa o item do grid encolher e realmente rolar */
  padding: var(--gdi-s5) var(--gdi-s6) var(--gdi-s7);
}

/* Modo embed (?embed=1): a tela roda dentro de um iframe de outra tela do GDI.
   O base.html não desenha sidebar/topo/trilha/rodapé — aqui as faixas que
   sobrariam vazias no grid são recolhidas. Dentro do iframe, 100vh é a altura
   do próprio iframe, então o conteúdo continua rolando sozinho. */
.gdi-embed .gdi-shell   { grid-template-columns: 1fr; }
.gdi-embed .gdi-main    { grid-template-rows: 1fr; }
.gdi-embed .gdi-content { padding: var(--gdi-s4) var(--gdi-s5) var(--gdi-s5); }

/* -------------------------------------------------------------------------
   2. Sidebar
   ------------------------------------------------------------------------- */
.gdi-sidebar {
  background: var(--gdi-shell);
  color: var(--gdi-shell-ink);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-right: 1px solid var(--gdi-shell-line);
}

.gdi-brand {
  height: var(--gdi-topbar-h);
  display: flex;
  align-items: center;
  gap: var(--gdi-s2);
  padding: 0 var(--gdi-s4);
  border-bottom: 1px solid var(--gdi-shell-line);
  white-space: nowrap;
  flex: 0 0 auto;
  text-decoration: none;
}
/* Letreiro "GDI ONLine" da identidade. PNG com fundo transparente e recorte
   justo — assenta direto sobre o navy da barra, sem caixa.
   ⚠️ Os dois ficam SEMPRE no DOM, sobrepostos e trocando por opacidade: com
   `display` a troca era um pisca no meio do deslizamento. */
.gdi-brand { position: relative; }
.gdi-brand__logo, .gdi-brand__sigla { position: absolute; display: block; }
.gdi-brand__logo {
  height: 25px; width: auto;
  left: var(--gdi-s4); top: 50%; transform: translateY(-50%);
  opacity: 1;
}
/* 51px na barra de 64px: o monograma é a única marca visível com o menu
   recolhido, então ocupa quase toda a largura útil. */
.gdi-brand__sigla {
  height: 51px; width: auto; border-radius: 11px;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  opacity: 0;
}

.gdi-nav { flex: 1 1 auto; overflow-y: auto; padding: var(--gdi-s3) 0; }

.gdi-nav__group {
  font-size: var(--gdi-fs-micro);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gdi-shell-ink-mute);
  padding: var(--gdi-s4) var(--gdi-s4) var(--gdi-s2);
  white-space: nowrap;
}

.gdi-nav__item {
  display: flex;
  align-items: center;
  gap: var(--gdi-s3);
  height: 38px;
  padding: 0 var(--gdi-s4);
  color: var(--gdi-shell-ink);
  text-decoration: none;
  font-size: var(--gdi-fs-md);
  white-space: nowrap;
  border-left: 3px solid transparent;
  transition: background var(--gdi-t), color var(--gdi-t);
}
.gdi-nav__item i { font-size: 17px; width: 20px; text-align: center; flex: 0 0 auto; }
.gdi-nav__item:hover { background: var(--gdi-shell-2); color: var(--gdi-shell-ink-on); }

/* Laranja = "você está aqui". Nunca usada em algo clicável. */
.gdi-nav__item.is-active {
  background: var(--gdi-shell-2);
  color: var(--gdi-shell-ink-on);
  border-left-color: var(--gdi-here);
  font-weight: 500;
}

.gdi-sidebar__foot {
  flex: 0 0 auto;
  border-top: 1px solid var(--gdi-shell-line);
  padding: var(--gdi-s2) 0;
}

/* "Sair da aplicação" em destaque: pílula vermelha, fica sólida no hover */
.gdi-nav__item--logout {
  margin: var(--gdi-s2) var(--gdi-s3) 2px;
  border-radius: 8px;
  border-left-color: transparent;
  background: rgba(220, 64, 64, .16);
  color: #ffbcbc;
  font-weight: 600;
}
.gdi-nav__item--logout i { color: #ff9a9a; }
.gdi-nav__item--logout:hover { background: #d63a3a; color: #fff; }
.gdi-nav__item--logout:hover i { color: #fff; }
.gdi-shell.is-collapsed .gdi-nav__item--logout { margin: var(--gdi-s2) var(--gdi-s2); }

/* ⚠️ Os rótulos saem por OPACIDADE + largura zero, não por `display:none`.
   Com display o texto sumia de um quadro para o outro enquanto a barra ainda
   estava deslizando — era o que fazia o movimento parecer picotado. */
.gdi-shell.is-collapsed .gdi-nav__item span {
  opacity: 0;
  width: 0; overflow: hidden; white-space: nowrap;
}
.gdi-shell.is-collapsed .gdi-nav__group {
  opacity: 0;
  max-height: 0; padding-top: 0; padding-bottom: 0; overflow: hidden;
}
.gdi-shell.is-collapsed .gdi-nav__item { justify-content: center; padding: 0; }
/* Menu recolhido (64 px): o letreiro sai e entra o monograma. O manual da
   marca manda usar só o símbolo abaixo da largura mínima do rótulo. */
.gdi-shell.is-collapsed .gdi-brand { justify-content: center; padding: 0; gap: 0; }
.gdi-shell.is-collapsed .gdi-brand__logo  { opacity: 0; }
.gdi-shell.is-collapsed .gdi-brand__sigla { opacity: 1; }

/* ── Deslizamento do menu ──────────────────────────────────────────────────
   ⚠️ As transições só valem com a classe `is-anima`, que o base.html põe
   DEPOIS da primeira pintura. Sem essa trava, quem chega numa tela com o menu
   já recolhido (o estado fica guardado na sessão) veria a barra deslizar
   sozinha a cada troca de tela — animação em carregamento de página parece
   defeito, não capricho. */
.gdi-shell.is-anima { transition: grid-template-columns .26s cubic-bezier(.4, 0, .2, 1); }
.gdi-shell.is-anima .gdi-nav__item span,
.gdi-shell.is-anima .gdi-nav__group,
.gdi-shell.is-anima .gdi-brand__logo,
.gdi-shell.is-anima .gdi-brand__sigla { transition: opacity .16s ease .06s; }
.gdi-shell.is-anima .gdi-nav__group { transition: opacity .16s ease .06s, max-height .26s ease; }
/* recolhendo, o texto some primeiro (senão ele seria cortado no meio da
   viagem); expandindo, ele só aparece quando a barra já abriu */
.gdi-shell.is-anima.is-collapsed .gdi-nav__item span,
.gdi-shell.is-anima.is-collapsed .gdi-brand__logo { transition: opacity .1s ease; }
.gdi-shell.is-anima.is-collapsed .gdi-nav__group { transition: opacity .1s ease, max-height .26s ease; }

@media (prefers-reduced-motion: reduce) {
  .gdi-shell.is-anima,
  .gdi-shell.is-anima .gdi-nav__item span,
  .gdi-shell.is-anima .gdi-nav__group,
  .gdi-shell.is-anima .gdi-brand__logo,
  .gdi-shell.is-anima .gdi-brand__sigla { transition: none; }
}

/* -------------------------------------------------------------------------
   3. Topbar
   ------------------------------------------------------------------------- */
.gdi-topbar {
  display: flex;
  align-items: center;
  gap: var(--gdi-s3);
  padding: 0 var(--gdi-s5) 0 var(--gdi-s3);
  background: var(--gdi-surface);
  border-bottom: 1px solid var(--gdi-line);
}
.gdi-topbar__toggle {
  border: 0;
  background: transparent;
  color: var(--gdi-ink-soft);
  width: 34px; height: 34px;
  border-radius: var(--gdi-radius);
  cursor: pointer;
  font-size: 18px;
  display: grid; place-items: center;
}
.gdi-topbar__toggle:hover { background: var(--gdi-surface-3); color: var(--gdi-ink); }
/* A topbar identifica a TELA (ícone + título + subtítulo). O nome da empresa
   mora no rodapé — ver .gdi-statusbar__empresa. */
.gdi-topbar__icon {
  width: 30px; height: 30px; flex: 0 0 auto;
  border-radius: var(--gdi-radius);
  background: var(--gdi-action-soft);
  color: var(--gdi-action);
  display: grid; place-items: center;
  font-size: 16px;
}
.gdi-topbar__heading { min-width: 0; line-height: 1.15; }   /* permite o truncamento */
/* Sobretítulo = módulo. Diz "onde estou" sem competir com o nome da tela. */
.gdi-topbar__modulo {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--gdi-ink-mute);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gdi-topbar__heading h1 {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gdi-topbar__voltar { flex: 0 0 auto; display: flex; align-items: center; }
/* Descrição da tela — ocupa a linha que o sobretítulo deixou livre quando o
   módulo repetia o nome da tela (ver partials/_topbar.html). */
.gdi-topbar__sub {
  display: block;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--gdi-ink-mute);
  line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.gdi-topbar__actions { display: flex; align-items: center; gap: var(--gdi-s2); flex: 0 0 auto; }
.gdi-topbar__sep { width: 1px; height: 26px; background: var(--gdi-line); flex: 0 0 auto; }
.gdi-topbar__spacer { flex: 1 1 auto; }

.gdi-user { display: flex; align-items: center; gap: var(--gdi-s2); }
.gdi-user__avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--gdi-action-soft);
  color: var(--gdi-action);
  display: grid; place-items: center;
  font-size: 15px;
}
.gdi-user__meta { line-height: 1.2; }
.gdi-user__label { font-size: var(--gdi-fs-micro); color: var(--gdi-ink-mute); display: block; }
.gdi-user__name  { font-size: var(--gdi-fs-sm); font-weight: 500; }

/* Menu do usuário (nativo, via <details> — sem JS). */
.gdi-usermenu { position: relative; }
.gdi-usermenu > summary {
  list-style: none; cursor: pointer; padding: 4px 6px; border-radius: var(--gdi-radius);
  transition: background var(--gdi-t);
}
.gdi-usermenu > summary::-webkit-details-marker { display: none; }
.gdi-usermenu > summary:hover { background: var(--gdi-surface-3); }
.gdi-usermenu__caret { color: var(--gdi-ink-mute); font-size: 12px; margin-left: 2px; transition: transform var(--gdi-t); }
.gdi-usermenu[open] .gdi-usermenu__caret { transform: rotate(180deg); }
.gdi-usermenu__pop {
  position: absolute; z-index: 60; top: calc(100% + 6px); right: 0; min-width: 240px;
  background: var(--gdi-surface); border: 1px solid var(--gdi-line-strong);
  border-radius: var(--gdi-radius-lg); box-shadow: var(--gdi-shadow-pop); padding: 6px;
}
.gdi-usermenu__head { padding: 8px 10px 10px; border-bottom: 1px solid var(--gdi-line); margin-bottom: 4px; }
.gdi-usermenu__name { font-weight: 600; font-size: var(--gdi-fs-md); }
.gdi-usermenu__sub  { font-size: var(--gdi-fs-xs); color: var(--gdi-ink-mute); margin-top: 2px; }
.gdi-usermenu__pop a {
  display: flex; align-items: center; gap: var(--gdi-s2); padding: 9px 10px; border-radius: var(--gdi-radius);
  color: var(--gdi-ink); text-decoration: none; font-size: var(--gdi-fs-sm);
}
.gdi-usermenu__pop a:hover { background: var(--gdi-action-soft); color: var(--gdi-action); }
.gdi-usermenu__pop a i { font-size: 15px; color: var(--gdi-ink-mute); }
.gdi-usermenu__pop a:hover i { color: var(--gdi-action); }

/* A trilha (.gdi-crumbs) e o cabeçalho de tela (.gdi-page-head) foram
   consolidados na topbar — ver .gdi-topbar__heading. */

/* -------------------------------------------------------------------------
   6. Card
   ------------------------------------------------------------------------- */
.gdi-card {
  background: var(--gdi-surface);
  border: 1px solid var(--gdi-line);
  border-radius: var(--gdi-radius-lg);
  margin-bottom: var(--gdi-s4);
  overflow: hidden;
}
.gdi-card__head {
  display: flex;
  align-items: center;
  gap: var(--gdi-s2);
  padding: var(--gdi-s3) var(--gdi-s4);
  border-bottom: 1px solid var(--gdi-line);
  background: var(--gdi-surface-2);
}
.gdi-card__title {
  font-size: var(--gdi-fs-sm);
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--gdi-ink-soft);
}
.gdi-card__title i { color: var(--gdi-ink-mute); margin-right: var(--gdi-s1); }
.gdi-card__meta { margin-left: auto; font-size: var(--gdi-fs-xs); color: var(--gdi-ink-mute); }
.gdi-card__body { padding: var(--gdi-s4); }
.gdi-card__body--flush { padding: 0; }
.gdi-card__foot {
  display: flex; align-items: center; gap: var(--gdi-s2);
  padding: var(--gdi-s3) var(--gdi-s4);
  border-top: 1px solid var(--gdi-line);
  background: var(--gdi-surface-2);
}
.gdi-card__foot .gdi-push { margin-left: auto; }

/* -------------------------------------------------------------------------
   7. Tiles de módulo (substituem os blocos azuis do RH)
   ------------------------------------------------------------------------- */
.gdi-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--gdi-s3);
}
.gdi-tile {
  display: flex; align-items: flex-start; gap: var(--gdi-s3);
  padding: var(--gdi-s4);
  background: var(--gdi-surface);
  border: 1px solid var(--gdi-line);
  border-radius: var(--gdi-radius-lg);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--gdi-t), transform var(--gdi-t);
}
.gdi-tile:hover { border-color: var(--gdi-action); transform: translateY(-1px); }
.gdi-tile__icon {
  width: 34px; height: 34px; flex: 0 0 auto;
  border-radius: var(--gdi-radius);
  background: var(--gdi-action-soft);
  color: var(--gdi-action);
  display: grid; place-items: center;
  font-size: 17px;
}
.gdi-tile__title { font-size: var(--gdi-fs-md); font-weight: 600; }
.gdi-tile__hint  { font-size: var(--gdi-fs-xs); color: var(--gdi-ink-mute); margin-top: 2px; }

/* -------------------------------------------------------------------------
   8. Botões — sólido só na ação principal da tela
   ------------------------------------------------------------------------- */
.gdi-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--gdi-s2);
  height: var(--gdi-control-h);
  padding: 0 var(--gdi-s4);
  border-radius: var(--gdi-radius);
  border: 1px solid var(--gdi-line-strong);
  background: var(--gdi-surface);
  color: var(--gdi-ink);
  font: 500 var(--gdi-fs-md)/1 var(--gdi-font);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--gdi-t), border-color var(--gdi-t), color var(--gdi-t);
}
.gdi-btn:hover { background: var(--gdi-surface-3); }
.gdi-btn:active { transform: translateY(1px); }
.gdi-btn[disabled] { opacity: .5; cursor: not-allowed; }

.gdi-btn--primary {
  background: var(--gdi-action);
  border-color: var(--gdi-action);
  color: var(--gdi-ink-on);
}
.gdi-btn--primary:hover { background: var(--gdi-action-hover); border-color: var(--gdi-action-hover); }

/* Ação repetida em linha de grid: fantasma. 31 botões sólidos competem
   com o dado que o usuário veio ler. */
.gdi-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--gdi-action);
  padding: 0 var(--gdi-s2);
}
.gdi-btn--ghost:hover { background: var(--gdi-action-soft); }

.gdi-btn--danger { border-color: var(--gdi-bad); color: var(--gdi-bad); }
.gdi-btn--danger:hover { background: var(--gdi-bad-soft); }

/* XLSX é SEMPRE verde com fonte branca — padrão do sistema, em toda tela. */
/* Padrão do sistema (06/08/2026): PDF é SEMPRE vermelho com fonte branca e
   planilha SEMPRE verde com fonte branca. A cor identifica o formato de longe,
   em qualquer tela — não é decoração de uma tela só. */
.gdi-btn--pdf { background: var(--gdi-bad); border-color: var(--gdi-bad); color: #fff; }
.gdi-btn--pdf:hover { background: #9E2B22; border-color: #9E2B22; color: #fff; }
.gdi-btn--xlsx { background: var(--gdi-ok); border-color: var(--gdi-ok); color: #fff; }
.gdi-btn--xlsx:hover { background: #096A41; border-color: #096A41; color: #fff; }

.gdi-btn--sm { height: 28px; padding: 0 var(--gdi-s3); font-size: var(--gdi-fs-sm); }
.gdi-btn--icon { width: var(--gdi-control-h); padding: 0; }

/* input[type=date] auxiliar do calendário: presente no DOM (para showPicker),
   porém invisível e fora da tabulação. Use em toda tela migrada. */
.gdi-native-date { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  border: 0; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); pointer-events: none; }

/* Separador vertical fino (barras de ação, toolbars de exportação). */
.gdi-sep { width: 1px; align-self: stretch; min-height: 22px; background: var(--gdi-ink-mute); opacity: .55; margin: 0 var(--gdi-s2); flex: 0 0 auto; }

/* Barra de ação do rodapé com respiro maior (evita "tudo muito junto"). */
.gdi-card__foot.gdi-card__foot--wide { gap: var(--gdi-s4); }

/* -------------------------------------------------------------------------
   9. Formulários — grid + rótulos densos (estilo auditoria)
   ------------------------------------------------------------------------- */
.gdi-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--gdi-s3) var(--gdi-s4);
  align-items: end;
}
.gdi-form-grid .gdi-span-2 { grid-column: span 2; }

.gdi-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.gdi-label {
  font-size: var(--gdi-fs-micro);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gdi-ink-mute);
}
.gdi-label small { text-transform: none; letter-spacing: 0; font-weight: 400; }
.gdi-hint { font-size: var(--gdi-fs-xs); color: var(--gdi-ink-mute); }

.gdi-input, .gdi-select, .gdi-textarea {
  height: var(--gdi-control-h);
  width: 100%;
  padding: 0 var(--gdi-s3);
  border: 1px solid var(--gdi-line-strong);
  border-radius: var(--gdi-radius);
  background: var(--gdi-surface);
  color: var(--gdi-ink);
  font: 400 var(--gdi-fs-md)/1 var(--gdi-font);
  font-variant-numeric: tabular-nums;
  transition: border-color var(--gdi-t), box-shadow var(--gdi-t);
}
.gdi-textarea { height: auto; padding: var(--gdi-s2) var(--gdi-s3); line-height: var(--gdi-lh); }
.gdi-input::placeholder { color: var(--gdi-ink-mute); }
.gdi-input:hover, .gdi-select:hover { border-color: var(--gdi-ink-mute); }
.gdi-input:focus, .gdi-select:focus, .gdi-textarea:focus {
  outline: none;
  border-color: var(--gdi-action);
  box-shadow: 0 0 0 3px var(--gdi-action-ring);
}
.gdi-input:disabled, .gdi-select:disabled { background: var(--gdi-surface-3); color: var(--gdi-ink-mute); }
.gdi-input.is-invalid { border-color: var(--gdi-bad); }

/* Combobox: seta própria, sem o widget nativo do Windows. */
.gdi-select {
  appearance: none;
  padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%237C8B9B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

/* Ícone dentro do campo — o botão azul de calendário some. */
.gdi-input-group { position: relative; }
.gdi-input-group .gdi-input { padding-right: 34px; }
.gdi-input-group__btn {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px;
  border: 0; border-radius: var(--gdi-radius-sm);
  background: transparent; color: var(--gdi-ink-mute);
  cursor: pointer; display: grid; place-items: center; font-size: 15px;
}
.gdi-input-group__btn:hover { background: var(--gdi-surface-3); color: var(--gdi-action); }

/* Segmentado — substitui grupos de radio (Todos / Em Aberto / Recebido). */
.gdi-segment {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  background: var(--gdi-surface-3);
  border-radius: var(--gdi-radius);
}
.gdi-segment input { position: absolute; opacity: 0; pointer-events: none; }
.gdi-segment label {
  padding: 0 var(--gdi-s4);
  height: 30px;
  display: inline-flex; align-items: center;
  border-radius: var(--gdi-radius-sm);
  font-size: var(--gdi-fs-sm);
  color: var(--gdi-ink-soft);
  cursor: pointer;
  transition: background var(--gdi-t), color var(--gdi-t);
}
.gdi-segment label:hover { color: var(--gdi-ink); }
.gdi-segment input:checked + label {
  background: var(--gdi-surface);
  color: var(--gdi-ink);
  font-weight: 500;
  box-shadow: 0 1px 2px rgba(21, 35, 50, .10);
}
.gdi-segment input:focus-visible + label { outline: 2px solid var(--gdi-action); outline-offset: 1px; }

/* -------------------------------------------------------------------------
   10. Grid de dados
   ------------------------------------------------------------------------- */
.gdi-table-scroll { max-height: 62vh; overflow: auto; }

.gdi-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--gdi-fs-sm); }

.gdi-table thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--gdi-surface-3);
  color: var(--gdi-ink-soft);
  font-size: var(--gdi-fs-micro);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: left;
  padding: 9px var(--gdi-s3);
  border-bottom: 1px solid var(--gdi-line-strong);
  white-space: nowrap;
}
.gdi-table thead th.gdi-num { text-align: right; }

.gdi-table tbody td {
  height: var(--gdi-row-h);
  padding: 0 var(--gdi-s3);
  border-bottom: 1px solid var(--gdi-line);
  color: var(--gdi-ink);
  white-space: nowrap;
}
.gdi-table tbody tr:hover td { background: var(--gdi-surface-2); }
.gdi-table tbody tr.is-selected td { background: var(--gdi-action-soft); }

/* Marca de exceção na borda da linha: não desloca layout e sobrevive ao hover.
   Ex.: CIOT abaixo do piso mínimo da ANTT. */
.gdi-table tbody tr.is-alert td:first-child { box-shadow: inset 3px 0 0 var(--gdi-bad); }

.gdi-table tfoot td {
  position: sticky; bottom: 0;
  background: var(--gdi-surface-3);
  font-weight: 600;
  padding: 10px var(--gdi-s3);
  border-top: 1px solid var(--gdi-line-strong);
}
.gdi-table .gdi-row-actions { text-align: right; }

/* -------------------------------------------------------------------------
   11. Indicadores (KPI) — a cor mora no número, não no cartão
   ------------------------------------------------------------------------- */
.gdi-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--gdi-s3);
}
.gdi-kpi {
  background: var(--gdi-surface);
  border: 1px solid var(--gdi-line);
  border-radius: var(--gdi-radius);
  padding: var(--gdi-s3) var(--gdi-s4);
}
.gdi-kpi__label {
  font-size: var(--gdi-fs-micro);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gdi-ink-mute);
}
.gdi-kpi__value {
  font-size: var(--gdi-fs-kpi);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.2;
  margin-top: 2px;
}
.gdi-kpi__unit { font-size: var(--gdi-fs-sm); font-weight: 400; color: var(--gdi-ink-mute); }
.gdi-kpi__foot { font-size: var(--gdi-fs-xs); color: var(--gdi-ink-mute); margin-top: 2px; }
.gdi-kpi.is-ok   .gdi-kpi__value { color: var(--gdi-ok); }
.gdi-kpi.is-bad  .gdi-kpi__value { color: var(--gdi-bad); }
.gdi-kpi.is-warn .gdi-kpi__value { color: var(--gdi-warn); }
.gdi-kpi.is-bad  { border-color: var(--gdi-bad); background: var(--gdi-bad-soft); }

/* -------------------------------------------------------------------------
   12. Etiquetas
   ------------------------------------------------------------------------- */
.gdi-badge {
  display: inline-flex; align-items: center; gap: 5px;
  height: 21px; padding: 0 var(--gdi-s2);
  border-radius: 999px;
  font-size: var(--gdi-fs-micro); font-weight: 500;
  background: var(--gdi-surface-3); color: var(--gdi-ink-soft);
}
.gdi-badge.is-ok   { background: var(--gdi-ok-soft);   color: var(--gdi-ok); }
.gdi-badge.is-bad  { background: var(--gdi-bad-soft);  color: var(--gdi-bad); }
.gdi-badge.is-warn { background: var(--gdi-warn-soft); color: var(--gdi-warn); }
.gdi-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* -------------------------------------------------------------------------
   13. Etapas (Parâmetros → Resultado) — versão PEQUENA (aprovada)
   ------------------------------------------------------------------------- */
.gdi-steps { display: flex; align-items: center; gap: var(--gdi-s3); margin-bottom: var(--gdi-s5); }
.gdi-step { display: flex; align-items: center; gap: var(--gdi-s2); }
.gdi-step__mark {
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: var(--gdi-fs-xs); font-weight: 600;
  background: var(--gdi-surface); color: var(--gdi-ink-mute);
  border: 1px solid var(--gdi-line-strong);
}
.gdi-step__label { font-size: var(--gdi-fs-sm); color: var(--gdi-ink-mute); }
.gdi-step.is-done .gdi-step__mark { background: var(--gdi-ok); border-color: var(--gdi-ok); color: #fff; }
.gdi-step.is-done .gdi-step__label { color: var(--gdi-ink-soft); }
.gdi-step.is-current .gdi-step__mark { background: var(--gdi-action); border-color: var(--gdi-action); color: #fff; }
.gdi-step.is-current .gdi-step__label { color: var(--gdi-ink); font-weight: 500; }
.gdi-step__line { width: 56px; height: 1px; background: var(--gdi-line-strong); }

/* -------------------------------------------------------------------------
   14. Vazio e carregando
   ------------------------------------------------------------------------- */
.gdi-empty { padding: var(--gdi-s7) var(--gdi-s4); text-align: center; color: var(--gdi-ink-mute); }
.gdi-empty i { font-size: 26px; display: block; margin-bottom: var(--gdi-s2); color: var(--gdi-line-strong); }
.gdi-empty__title { font-size: var(--gdi-fs-md); color: var(--gdi-ink-soft); font-weight: 500; }

.gdi-skel {
  height: 12px; border-radius: var(--gdi-radius-sm);
  background: linear-gradient(90deg, var(--gdi-surface-3) 25%, var(--gdi-surface-2) 37%, var(--gdi-surface-3) 63%);
  background-size: 400% 100%;
  animation: gdi-shimmer 1.2s ease-in-out infinite;
}
@keyframes gdi-shimmer { from { background-position: 100% 50%; } to { background-position: 0 50%; } }

/* -------------------------------------------------------------------------
   15. Barra de status
   ------------------------------------------------------------------------- */
.gdi-statusbar {
  display: flex; align-items: center; gap: var(--gdi-s4);
  padding: 0 var(--gdi-s6);
  background: var(--gdi-surface);
  border-top: 1px solid var(--gdi-line);
  font-size: var(--gdi-fs-xs);
  color: var(--gdi-ink-mute);
}
.gdi-statusbar__spacer { flex: 1 1 auto; }
.gdi-statusbar b { color: var(--gdi-ink-soft); font-weight: 500; }
.gdi-statusbar .is-ok  { color: var(--gdi-ok); }
.gdi-statusbar .is-bad { color: var(--gdi-bad); }
.gdi-statusbar__empresa { color: var(--gdi-ink-soft); font-weight: 500; }

/* =========================================================================
   17. CAMPOS DE FORMULÁRIO .jf-*  (padrão aprovado — botões transparentes)
   Arredondado (10px), altura 42px, rótulo em cima, obrigatório com *.
   Combo pesquisável (× + seta), input com lupa, cartões de seleção.
   ========================================================================= */

/* grid de campos — rótulos em cima, alinhamento por linha */
.jf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--gdi-s4) var(--gdi-s5); }
.jf-grid .jf-col-2 { grid-column: span 2; }
.jf-grid .jf-col-all { grid-column: 1 / -1; }

.jf { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.jf-label { font-size: 13px; font-weight: 600; color: var(--gdi-ink); display: flex; align-items: center; gap: 5px; }
.jf-req { color: var(--gdi-bad); font-weight: 700; line-height: 1; }
.jf-help { font-size: 12px; color: var(--gdi-ink-mute); }

/* controle base */
.jf-inp {
  width: 100%; height: var(--gdi-fld-h); padding: 0 12px;
  font-family: var(--gdi-font); font-size: 14.5px; color: var(--gdi-ink);
  background: var(--gdi-fld-bg); border: 1.5px solid var(--gdi-fld-border);
  border-radius: var(--gdi-fld-r); outline: 0;
  font-variant-numeric: tabular-nums;
  transition: border-color var(--gdi-t), box-shadow var(--gdi-t);
}
textarea.jf-inp { height: auto; padding: 10px 12px; resize: vertical; min-height: 78px; line-height: 1.45; }
.jf-inp::placeholder { color: var(--gdi-ink-mute); }
.jf-inp:hover { border-color: var(--gdi-fld-border-h); }
.jf-inp:focus { border-color: var(--gdi-action); box-shadow: 0 0 0 1px var(--gdi-action); }
.jf-inp:disabled { background: var(--gdi-surface-3); color: var(--gdi-ink-mute); cursor: not-allowed; }

/* Foco limpo: UM contorno azul colado (borda + 1px da mesma cor), sem o
   outline global do sistema (que vinha deslocado por cima) e sem halo. */
.jf-inp:focus, .jf-inp:focus-visible,
.jf-val:focus, .jf-val:focus-visible,
.jf-btn:focus, .jf-btn:focus-visible,
.jf-pop-search input:focus, .jf-pop-search input:focus-visible { outline: none; }

/* O autofill do Chrome não pinta o campo de azul. */
.jf-inp:-webkit-autofill,
.jf-inp:-webkit-autofill:hover,
.jf-inp:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 40px var(--gdi-fld-bg) inset !important;
  -webkit-text-fill-color: var(--gdi-ink) !important;
  caret-color: var(--gdi-ink);
  transition: background-color 9999s ease 0s;
}
.jf.is-error .jf-inp { border-color: var(--gdi-bad); }
.jf.is-error .jf-inp:focus { box-shadow: 0 0 0 3.5px var(--gdi-bad-soft); }
.jf.is-ok .jf-inp { border-color: var(--gdi-ok); }
.jf-err { font-size: 12px; color: var(--gdi-bad); display: flex; align-items: center; gap: 5px; }

/* grupo: controle + botões à direita — TODOS transparentes (lupa, ×, seta, calendário) */
.jf-group {
  position: relative; display: flex; align-items: stretch;
  background: var(--gdi-fld-bg); border: 1.5px solid var(--gdi-fld-border);
  border-radius: var(--gdi-fld-r); transition: border-color var(--gdi-t), box-shadow var(--gdi-t);
}
.jf-group:hover { border-color: var(--gdi-fld-border-h); }
.jf-group:focus-within { border-color: var(--gdi-action); box-shadow: 0 0 0 1px var(--gdi-action); }
.jf-group :focus, .jf-group :focus-visible { outline: none; box-shadow: none; }
.jf.is-error .jf-group { border-color: var(--gdi-bad); }
.jf-group .jf-inp { border: 0; box-shadow: none; background: transparent; flex: 1; min-width: 0; }
.jf-group .jf-inp:focus { box-shadow: none; }
.jf-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px;
  border: 0; background: transparent; color: var(--gdi-ink-mute); cursor: pointer; font-size: 16px;
  border-left: 1px solid var(--gdi-line); transition: color var(--gdi-t), background var(--gdi-t);
}
.jf-btn:hover { color: var(--gdi-action); background: var(--gdi-action-soft); }
.jf-btn.jf-btn--go { border-radius: 0 8.5px 8.5px 0; }
.jf-btn.jf-btn--go:hover { color: var(--gdi-action); background: var(--gdi-action-soft); }
.jf-btn.jf-btn--clear:hover { color: var(--gdi-bad); background: var(--gdi-bad-soft); }
.jf-btn[hidden] { display: none; }
.jf-mono { font-family: var(--gdi-font-mono); font-size: .92em; }

/* combo pesquisável (× + seta) */
.jf-combo { position: relative; }
.jf-combo .jf-caret i, .jf-combo .jf-caret svg { transition: transform .14s; }
.jf-combo.is-open .jf-caret i, .jf-combo.is-open .jf-caret svg { transform: rotate(180deg); }
.jf-pop {
  position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--gdi-surface); border: 1px solid var(--gdi-line-strong);
  border-radius: var(--gdi-fld-r); box-shadow: var(--gdi-shadow-pop);
  padding: 6px; max-height: 264px; overflow: auto; display: none;
}
.jf-combo.is-open .jf-pop { display: block; }
.jf-pop-search { position: relative; margin: 2px 2px 6px; }
.jf-pop-search input {
  width: 100%; height: 36px; padding: 0 10px 0 32px; font: inherit; font-size: 13.5px;
  border: 1.5px solid var(--gdi-fld-border); border-radius: 8px; background: var(--gdi-fld-bg); color: var(--gdi-ink); outline: 0;
}
.jf-pop-search input:focus { border-color: var(--gdi-action); box-shadow: 0 0 0 3px var(--gdi-action-ring); }
.jf-pop-search i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--gdi-ink-mute); font-size: 14px; }
.jf-opt {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 7px;
  font-size: 14px; color: var(--gdi-ink); cursor: pointer;
}
.jf-opt small { color: var(--gdi-ink-mute); font-size: 12px; }
.jf-opt:hover { background: var(--gdi-action-soft); }
.jf-opt.is-sel { background: var(--gdi-action-soft); color: var(--gdi-action); font-weight: 600; }
.jf-opt.is-sel::after { content: "\2713"; margin-left: auto; font-size: 13px; font-weight: 700; }
.jf-noopt { padding: 14px 10px; text-align: center; color: var(--gdi-ink-mute); font-size: 13px; }
.jf-val {
  flex: 1; min-width: 0; display: flex; align-items: center; height: var(--gdi-fld-h); padding: 0 12px;
  font-size: 14.5px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.jf-val.is-placeholder { color: var(--gdi-ink-mute); }

/* segmentado (radios inline, versão arredondada dos campos) */
.jf-segment {
  display: inline-flex; background: var(--gdi-surface-3); border: 1px solid var(--gdi-line);
  border-radius: 10px; padding: 3px; gap: 2px; flex-wrap: wrap;
}
.jf-segment label { position: relative; cursor: pointer; }
.jf-segment input { position: absolute; opacity: 0; }
.jf-segment span {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 15px; border-radius: 8px;
  font-size: 13.5px; color: var(--gdi-ink-soft); transition: var(--gdi-t);
}
.jf-segment input:checked + span { background: var(--gdi-surface); color: var(--gdi-action); font-weight: 600; box-shadow: 0 1px 2px rgba(21, 35, 50, .10); }
.jf-segment input:focus-visible + span { outline: 2px solid var(--gdi-action); outline-offset: 1px; }

/* toggle */
.jf-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; }
.jf-switch input { position: absolute; opacity: 0; }
.jf-switch .track { width: 42px; height: 24px; border-radius: 999px; background: var(--gdi-line-strong); position: relative; transition: .15s; flex: 0 0 auto; }
.jf-switch .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: .15s; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.jf-switch input:checked + .track { background: var(--gdi-action); }
.jf-switch input:checked + .track::after { transform: translateX(18px); }

/* cartões de seleção (papéis, filiais…) */
.jf-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.jf-choice {
  position: relative; display: flex; gap: 11px; padding: 13px 14px; cursor: pointer;
  background: var(--gdi-fld-bg); border: 1.5px solid var(--gdi-fld-border); border-radius: 12px;
  transition: border-color var(--gdi-t), background var(--gdi-t);
}
.jf-choice:hover { border-color: var(--gdi-fld-border-h); }
.jf-choice input { position: absolute; opacity: 0; pointer-events: none; }
.jf-choice .box { flex: 0 0 auto; width: 20px; height: 20px; border: 1.5px solid var(--gdi-line-strong); border-radius: 6px; display: grid; place-items: center; color: #fff; margin-top: 1px; transition: .12s; }
.jf-choice .box i { font-size: 12px; opacity: 0; }
.jf-choice .ico { color: var(--gdi-action); font-size: 18px; }
.jf-choice .t { font-weight: 600; font-size: 14px; line-height: 1.2; display: block; }
.jf-choice .d { font-size: 12px; color: var(--gdi-ink-mute); margin-top: 2px; display: block; }
.jf-choice:has(input:checked) { border-color: var(--gdi-action); background: var(--gdi-action-soft); }
.jf-choice:has(input:checked) .box { background: var(--gdi-action); border-color: var(--gdi-action); }
.jf-choice:has(input:checked) .box i { opacity: 1; }

/* -------------------------------------------------------------------------
   16. Telas estreitas
   ------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .gdi-shell { grid-template-columns: 1fr; }
  .gdi-sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 40;
    width: var(--gdi-sidebar-w);
    transform: translateX(-100%);
    transition: transform var(--gdi-t);
  }
  .gdi-shell.is-open .gdi-sidebar { transform: none; }
  .gdi-content { padding: var(--gdi-s4); }
  .jf-grid .jf-col-2 { grid-column: 1 / -1; }

  .gdi-topbar__modulo { display: none; }
  .gdi-topbar__actions .gdi-btn span,
  .gdi-topbar__voltar .gdi-btn span { display: none; }
  .gdi-topbar__actions .gdi-btn,
  .gdi-topbar__voltar .gdi-btn { width: 32px; padding: 0; }
  .gdi-statusbar__empresa { display: none; }
}

@media (max-width: 640px) {
  .gdi-topbar__icon { display: none; }
  .gdi-topbar__heading h1 { font-size: var(--gdi-fs-md); }
  .gdi-user__meta { display: none; }
}

/* ── Escolha de orientação do PDF (Retrato/Paisagem) ────────────────────────
   Botões-cartão usados no modal padrão (_modal_orientacao.html) e nos modais
   que também escolhem modelo (Balancete, Balanço, Relatórios). O estilo mora
   AQUI, num lugar só: mudar aqui muda em todas as telas de uma vez. */
.gdi-orient { display: flex; gap: 10px; }
.gdi-orient label {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 14px; border: 1.5px solid var(--gdi-fld-border); border-radius: var(--gdi-radius);
  cursor: pointer; font-size: var(--gdi-fs-sm); color: var(--gdi-ink-soft);
  transition: border-color var(--gdi-t), background var(--gdi-t), color var(--gdi-t);
}
.gdi-orient label:hover { border-color: var(--gdi-fld-border-h); }
.gdi-orient label:has(input:checked) {
  border-color: var(--gdi-action); background: var(--gdi-action-soft);
  color: var(--gdi-action); font-weight: 600;
}
.gdi-orient input { accent-color: var(--gdi-action); }
/* rótulo "Orientação:" acima dos botões */
.gdi-orient-tit { font-weight: 600; font-size: var(--gdi-fs-sm); color: var(--gdi-ink-soft); margin-bottom: 8px; }
.gdi-orient-tit i { color: var(--gdi-ink-mute); margin-right: 5px; }

/* ═══════════════════════════════════════════════════════════════════════
   Combobox global (gdi-combobox.js) — padrão único de select em todo o GDI.
   O <select> nativo continua no DOM (fonte da verdade); este controle é a
   camada visual: chevron centralizado com divisória fina, "X" para limpar e
   busca quando há muitos itens. Não quebra o JS existente (lê/escreve no
   select e dispara 'change').
   ═══════════════════════════════════════════════════════════════════════ */
.gcb { position: relative; display: block; width: 100%; vertical-align: top; }
.gcb > select.gcb-native { position: absolute; opacity: 0; pointer-events: none; width: 100%; height: 100%; left: 0; top: 0; margin: 0; }
/* o controle herda a métrica do campo padrão (.jf-inp) */
.gcb-ctl {
  display: flex; align-items: center; gap: 6px; width: 100%;
  /* ⚠️ 10px à direita, não 4px: com 4px a divisória e o chevron encostavam
     na borda do campo e o combo parecia apertado ao lado dos demais. */
  height: var(--gdi-fld-h, 40px); padding: 0 10px 0 12px;
  font: var(--gdi-fs-md, 14.5px)/1 var(--gdi-font);
  color: var(--gdi-ink); text-align: left;
  background: var(--gdi-fld-bg, #fff); border: 1.5px solid var(--gdi-fld-border, #cfd6e2);
  border-radius: var(--gdi-fld-r, 10px); cursor: pointer; outline: 0;
  transition: border-color var(--gdi-t), box-shadow var(--gdi-t);
}
.gcb-ctl:hover { border-color: var(--gdi-fld-border-h, #b6c0cf); }
.gcb.is-open .gcb-ctl, .gcb-ctl:focus-visible { border-color: var(--gdi-action); box-shadow: 0 0 0 1px var(--gdi-action); }
/* ⚠️ line-height 1 no `.gcb-ctl` corta o rabo das letras (o "g" de
   "posterga" aparecia cortado). Aqui a caixa de texto ganha altura para o
   descendente; o flex do controle continua centralizando. */
.gcb-val { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  line-height: 1.45; padding-block: 1px; }
.gcb-val.is-ph { color: var(--gdi-ink-mute); }
.gcb-clear { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 5px; display: none;
  align-items: center; justify-content: center; color: var(--gdi-ink-mute); font-size: 15px; line-height: 1; }
.gcb-clear:hover { background: var(--gdi-surface-3); color: var(--gdi-bad); }
.gcb.has-value.is-clearable .gcb-clear { display: inline-flex; }
.gcb-div { flex: 0 0 auto; width: 1px; height: 20px; margin-left: 2px;
  background: var(--gdi-fld-border, #cfd6e2); }
.gcb-arrow { flex: 0 0 auto; width: 22px; display: inline-flex; align-items: center;
  justify-content: center; color: var(--gdi-ink-soft, #7C8B9B); }
.gcb-arrow svg { transition: transform var(--gdi-t); }
.gcb.is-open .gcb-arrow svg { transform: rotate(180deg); }
.gcb.is-disabled .gcb-ctl { background: var(--gdi-surface-3); color: var(--gdi-ink-mute); cursor: not-allowed; }

/* dropdown */
/* ⚠️ acima das cortinas (4300/4350) e dos modais (4500/4600): o painel é
   sempre o elemento mais alto enquanto está aberto, senão some atrás deles */
.gcb-dd { position: fixed; z-index: 4800; left: 0; top: 0; min-width: 160px;
  background: var(--gdi-surface, #fff); border: 1px solid var(--gdi-line, #e6ebf1);
  border-radius: var(--gdi-radius, 10px); box-shadow: var(--gdi-shadow-pop, 0 12px 34px rgba(14,34,51,.18));
  display: none; overflow: hidden; flex-direction: column; }
/* ⚠️ o painel aberto vive no <body>, então NÃO é mais descendente de `.gcb`:
   a exibição passa a depender de uma classe própria */
.gcb-dd.is-shown { display: flex; }
.gcb-search { padding: 8px; border-bottom: 1px solid var(--gdi-line); display: none; flex: 0 0 auto; }
.gcb.searchable .gcb-search { display: block; }
.gcb-search input { width: 100%; height: 34px; padding: 0 10px; font: var(--gdi-fs-sm, 13.5px)/1 var(--gdi-font);
  border: 1.5px solid var(--gdi-fld-border, #cfd6e2); border-radius: 8px; outline: 0; }
.gcb-search input:focus { border-color: var(--gdi-action); }
.gcb-list { flex: 1 1 auto; overflow-y: auto; padding: 4px; min-height: 0; }
.gcb-opt { padding: 8px 10px; border-radius: 7px; font-size: var(--gdi-fs-sm, 13.5px); color: var(--gdi-ink);
  cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gcb-opt:hover, .gcb-opt.is-active { background: var(--gdi-action-soft); color: var(--gdi-action); }
.gcb-opt.is-sel { font-weight: 600; }
.gcb-opt.is-sel::after { content: '\2713'; float: right; color: var(--gdi-action); }
.gcb-opt.is-ph { color: var(--gdi-ink-mute); }
.gcb-empty { padding: 14px 10px; text-align: center; color: var(--gdi-ink-mute); font-size: var(--gdi-fs-sm); }

/* -------------------------------------------------------------------------
   Ordenação das grades (gdi-grade.js) — vale para toda tela com grade
   ------------------------------------------------------------------------- */
/* ⚠️ A seta neutra fica SEMPRE visível, fraquinha. Antes ela só aparecia no
   hover — e no tablet, onde não existe hover, nada indicava que a coluna era
   clicável: parecia que a grade não ordenava. Fraca o bastante para não virar
   ruído, forte o bastante para se ver que dá para clicar. */
th.gdi-ord { cursor: pointer; user-select: none; position: relative; padding-right: 18px !important; }
th.gdi-ord::after {
  content: "\2195";                 /* ↕ */
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  font-size: 10px; opacity: .28; transition: opacity var(--gdi-t);
}
th.gdi-ord:hover { color: var(--gdi-action); }
th.gdi-ord:hover::after { opacity: .6; }
th.gdi-ord.is-asc::after  { content: "\2191"; opacity: 1; color: var(--gdi-action); }  /* ↑ */
th.gdi-ord.is-desc::after { content: "\2193"; opacity: 1; color: var(--gdi-action); }  /* ↓ */
th.gdi-ord.is-asc, th.gdi-ord.is-desc { color: var(--gdi-action); }

/* -------------------------------------------------------------------------
   Faixa "retomar consulta" (gdi-estado.js)
   ------------------------------------------------------------------------- */
.gdi-retomar {
  display: flex; align-items: center; gap: var(--gdi-s3);
  padding: 10px 14px; margin-bottom: var(--gdi-s4);
  border: 1px solid var(--gdi-line); border-left: 3px solid var(--gdi-action);
  border-radius: var(--gdi-radius); background: var(--gdi-action-soft);
  font-size: var(--gdi-fs-sm); color: var(--gdi-ink-soft);
}
.gdi-retomar > i:first-child { color: var(--gdi-action); font-size: 16px; flex: 0 0 auto; }
.gdi-retomar > span { flex: 1 1 auto; min-width: 0; }
.gdi-retomar b { color: var(--gdi-ink); font-weight: 600; }
.gdi-retomar__x {
  border: 0; background: transparent; color: var(--gdi-ink-mute); cursor: pointer;
  width: 28px; height: 28px; border-radius: var(--gdi-radius);
  display: grid; place-items: center; flex: 0 0 auto;
}
.gdi-retomar__x:hover { background: rgba(14,34,51,.08); color: var(--gdi-ink); }


/* -------------------------------------------------------------------------
   Spinner de botão — para ação que demora e precisa avisar no próprio botão
   ------------------------------------------------------------------------- */
.gdi-spin { display: inline-block; animation: gdi-spin .8s linear infinite; }
@keyframes gdi-spin { to { transform: rotate(360deg); } }

/* -------------------------------------------------------------------------
   Centro de custo — o NOME em destaque, o código ao lado

   ⚠️ O código sozinho engana. O centro "0102" é OPERACIONAL e NÃO é a filial
   0102 — essa colisão já descartou R$ 439 mil num card de custo. E "0000" nem
   existe: é o rótulo que os serviços usam para centro EM BRANCO, e mandou o
   Ricardo caçar um centro que não há (02/09/2026). Por isso, toda vez que um
   centro de custo aparece na tela, o nome vem junto e em destaque.
   ------------------------------------------------------------------------- */
.gdi-cc { display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; }
.gdi-cc__nome { font-weight: 700; color: var(--gdi-ink); }
.gdi-cc__cod { font-family: var(--gdi-font-mono); font-size: 11px; font-weight: 600;
  color: var(--gdi-ink-mute); background: var(--gdi-surface-2);
  border: 1px solid var(--gdi-line); border-radius: 4px; padding: 1px 5px;
  flex: none; }
/* centro em BRANCO: não é um centro, é a ausência de um — e isso é um defeito
   de lançamento, então aparece como alerta e não como mais um código */
.gdi-cc--vazio .gdi-cc__nome { color: var(--gdi-warn); }
.gdi-cc--vazio .gdi-cc__cod { color: var(--gdi-warn);
  background: var(--gdi-warn-soft); border-color: var(--gdi-warn); }