@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* =========================================================================
   GDI ONLine — Design Tokens
   Camada única de variáveis. Nenhum componente define cor, fonte, raio ou
   espaçamento fora daqui. Prefixo --gdi-* para conviver com o style.css atual.
   ========================================================================= */

:root {

  /* ---- Superfícies ---------------------------------------------------- */
  --gdi-canvas:        #F4F6F9;   /* fundo da área de conteúdo            */
  --gdi-surface:       #FFFFFF;   /* cards, linhas de grid                */
  --gdi-surface-2:     #FAFBFC;   /* zebra, hover leve                    */
  --gdi-surface-3:     #EDF1F5;   /* cabeçalho de grid, chips             */
  --gdi-line:          #DFE4EA;   /* borda padrão                         */
  --gdi-line-strong:   #C4CDD9;   /* borda de campo, divisor forte        */

  /* ---- Estrutura escura (sidebar) ------------------------------------- */
  --gdi-shell:         #0E2233;
  --gdi-shell-2:       #17334C;
  --gdi-shell-line:    #22405C;
  --gdi-shell-ink:     #C3D2E0;
  --gdi-shell-ink-on:  #FFFFFF;
  --gdi-shell-ink-mute:#7B90A5;
  --gdi-brand:         #5BC8F5;   /* "GDI" do logo (igual produção)        */

  /* ---- Texto ----------------------------------------------------------- */
  --gdi-ink:           #152332;   /* primário                              */
  --gdi-ink-soft:      #4C5C6E;   /* secundário                            */
  --gdi-ink-mute:      #7C8B9B;   /* labels, placeholders                  */
  --gdi-ink-on:        #FFFFFF;

  /* ---- Ação (azul institucional) — só o que é clicável ---------------- */
  --gdi-action:        #0A58CA;
  --gdi-action-hover:  #08479F;
  --gdi-action-press:  #063A82;
  --gdi-action-soft:   #E8F0FE;
  --gdi-action-ring:   rgba(10, 88, 202, .28);

  /* ---- Localização (laranja) — só onde você ESTÁ, nunca clicável ------ */
  --gdi-here:          #E5731B;
  --gdi-here-soft:     #FFF2E6;

  /* ---- Semântica ------------------------------------------------------- */
  --gdi-ok:            #0B7A4B;
  --gdi-ok-soft:       #E6F4EC;
  --gdi-warn:          #A9600A;
  --gdi-warn-soft:     #FFF4E3;
  --gdi-bad:           #B42318;
  --gdi-bad-soft:      #FDECEA;

  /* ---- Tipografia ------------------------------------------------------ */
  --gdi-font:      'IBM Plex Sans', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  --gdi-font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  /* Fonte dos VALORES EM DESTAQUE dos cards (pedido do Ricardo, 03/09/2026).
     Existe como token próprio, e não escrita direto na tela, para a troca valer
     em todo card de uma vez quando ele quiser levar para as outras telas.
     ⚠️ `tabular-nums` é obrigatório junto: a Roboto é proporcional, e sem isso
     o "1" fica mais estreito que os outros dígitos e os valores dos seis cards
     deixam de alinhar entre si — que é justamente o que a mono dava de graça. */
  --gdi-font-destaque: 'Roboto', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;

  --gdi-fs-micro: 11px;   /* label de campo, cabeçalho de coluna          */
  --gdi-fs-xs:    12px;
  --gdi-fs-sm:    13px;   /* corpo das grids                              */
  --gdi-fs-md:    14px;   /* base da interface                            */
  --gdi-fs-lg:    16px;
  --gdi-fs-xl:    19px;   /* título de tela                               */
  --gdi-fs-kpi:   25px;   /* número de indicador                          */

  --gdi-lh-tight: 1.25;
  --gdi-lh:       1.5;

  /* ---- Espaçamento ----------------------------------------------------- */
  --gdi-s1: 4px;
  --gdi-s2: 8px;
  --gdi-s3: 12px;
  --gdi-s4: 16px;
  --gdi-s5: 20px;
  --gdi-s6: 24px;
  --gdi-s7: 32px;

  /* ---- Forma ----------------------------------------------------------- */
  --gdi-radius-sm: 4px;
  --gdi-radius:    6px;
  --gdi-radius-lg: 10px;

  /* ---- Campos de formulário (.jf-*) — estilo aprovado pelo usuário ------
     Arredondado, macio, rótulo em cima. Botões dos campos SEMPRE
     transparentes (lupa, calendário, seta, ×). Ver gdi-components §17. */
  --gdi-fld-h:        42px;
  --gdi-fld-r:        10px;
  --gdi-fld-bg:       #FFFFFF;
  --gdi-fld-border:   #D6DEE9;
  --gdi-fld-border-h: #B7C2D2;
  --gdi-fld-ring:     rgba(10, 88, 202, .16);  /* anel de foco suave dos campos */

  /* Sombra existe em UM lugar: coisa que flutua (dropdown, modal). */
  --gdi-shadow-pop: 0 8px 24px rgba(21, 35, 50, .16), 0 1px 2px rgba(21, 35, 50, .10);

  /* ---- Métricas de layout ---------------------------------------------- */
  --gdi-sidebar-w:      232px;
  --gdi-sidebar-w-min:  64px;
  --gdi-topbar-h:       58px;   /* cabe título + subtítulo da tela */
  --gdi-statusbar-h:    30px;
  --gdi-control-h:      36px;
  --gdi-row-h:          38px;

  /* ---- Movimento -------------------------------------------------------- */
  --gdi-t: 120ms cubic-bezier(.2, .6, .3, 1);
}

/* Modo compacto: aplique class="gdi-compact" no <body> das telas de
   auditoria (Painel CIOT, Títulos Analítico) para caber mais linha na tela. */
.gdi-compact {
  --gdi-fs-sm:   12px;
  --gdi-control-h: 32px;
  --gdi-row-h:     30px;
}

/* =========================================================================
   Base
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

body.gdi {
  margin: 0;
  font-family: var(--gdi-font);
  font-size: var(--gdi-fs-md);
  line-height: var(--gdi-lh);
  color: var(--gdi-ink);
  background: var(--gdi-canvas);
  -webkit-font-smoothing: antialiased;
}

.gdi h1, .gdi h2, .gdi h3 { margin: 0; font-weight: 600; line-height: var(--gdi-lh-tight); }

/* Foco visível sempre — requisito, não enfeite. */
.gdi :focus-visible {
  outline: 2px solid var(--gdi-action);
  outline-offset: 1px;
  border-radius: var(--gdi-radius-sm);
}

/* Números alinham em coluna. Vale para toda a interface. */
.gdi { font-variant-numeric: tabular-nums; }

/* Identificadores (CIOT, CTe, NFSe, placa, RNTRC) em monoespaçada.
   É o que o usuário confere caractere a caractere. */
.gdi-id {
  font-family: var(--gdi-font-mono);
  font-size: .95em;
  letter-spacing: -.01em;
}

.gdi-num { font-variant-numeric: tabular-nums; text-align: right; }

.gdi-t-ok   { color: var(--gdi-ok); }
.gdi-t-bad  { color: var(--gdi-bad); }
.gdi-t-warn { color: var(--gdi-warn); }
.gdi-t-mute { color: var(--gdi-ink-mute); }

.gdi-scroll { scrollbar-width: thin; scrollbar-color: var(--gdi-line-strong) transparent; }
.gdi-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.gdi-scroll::-webkit-scrollbar-thumb {
  background: var(--gdi-line-strong);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: 6px;
}
.gdi-scroll::-webkit-scrollbar-thumb:hover { background: var(--gdi-ink-mute); background-clip: content-box; }

@media (prefers-reduced-motion: reduce) {
  .gdi *, .gdi *::before, .gdi *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}