/**
 * Dashboard Clipping ISAC 2025 - Main Styles
 * Design System v2.0 — ver docs/design/DECISAO.md (Fase 0: fonte unica de tokens)
 */

/* Webfonts da direcao aprovada (docs/design/DECISAO.md secao 5) sao carregadas
   por <link rel="stylesheet"> no <head> de index.html e login.html — nao por
   @import daqui, que so seria descoberto depois deste arquivo baixar. */

/* ============================================================================
   CSS Variables (Design Tokens)
   ========================================================================= */

/* ----------------------------------------------------------------------------
   A REGRA DA COR — "se algo esta colorido, algo aconteceu"

   Tres familias, e so tres:

   1. TINTA (--ink / --ink-2 / --ink-3) e SUPERFICIE (--ground / --surface /
      --surface-2 / --sunken / --rule / --rule-2): verde-grafite dessaturado.
      Tudo que e cromo — icone decorativo, barra de magnitude, botao de acao
      neutra, titulo — usa esta familia. Nao ha excecao decorativa.
   2. DADO (--pos / --neu / --neg / --warn e as variantes -soft): a paleta de
      severidade validada em DECISAO.md secao 4. So aparece onde ha sentimento
      ou gravidade. Uma barra colorida e uma afirmacao sobre o tom da cobertura.
   3. ESCOLHA (--act): o azul ISAC, e **somente** para escolha do usuario —
      filtro ativo, chip de recorte, comparacao, selecao, foco, link. E a
      convencao que o painel geografico ja usa (geo.css: "aqui o azul e
      legitimo, e escolha do usuario, nao magnitude").

   O azul foi demovido de "cor de tudo" para "cor de escolha" (DECISAO.md secao
   3, item 3). Por isso `--primary-color` continua sendo o azul: ele pinta
   interacao. Quem pintava decoracao com ele passou a `--ink-*`.

   Os nomes legados (--gray-*, --white, --success/--danger/--warning/--neutral)
   permanecem como ALIAS destes tokens, nunca como valores proprios: ha uma
   fonte de verdade por cor, e os graficos leem dela via getComputedStyle.
   ------------------------------------------------------------------------- */

:root {
  /* --- Familia 1: superficies e tinta (verde-grafite, ~0,006 de croma) --- */
  --ground: #E8EAE5;
  --surface: #F6F7F3;
  --surface-2: #FCFDFA;
  --sunken: #DFE2DB;
  --ink: #191E1B;
  --ink-2: #4C534E;
  /* #7E857F no prototipo. Medido, dava 3,52:1 sobre --surface e 2,9 sobre
     --sunken — reprova AA para texto normal, e --ink-3 e justamente a tinta de
     subtitulo, legenda, nota e rotulo de escala, tudo em 9,5-11,5px. Escurecido
     no mesmo matiz ate passar 4,6:1 contra TODAS as superficies claras em que
     esse texto pousa (--sunken, --surface, --surface-2 e os quatro fundos -soft),
     nao so contra a mais clara. E o mesmo erro que o balde medio da rampa geo
     custou corrigir (3,71:1). */
  --ink-3: #5E635F;
  --rule: #CDD2C9;
  --rule-2: #B4BAAF;
  /* Tinta que se le SOBRE --ink (botao primario, aba corrente, agulha). */
  --on-ink: #F6F7F3;

  /* --- Familia 2: dado (severidade validada, DECISAO.md secao 4) --- */
  --pos: #0E7F5A;
  --neu: #8A8F93;
  --neg: #9C241B;
  --warn: #B0790E;
  --pos-soft: #DCE9E1;
  --neg-soft: #EDDCD8;
  --warn-soft: #ECE3CE;
  --neu-soft: #E4E5E2;
  /* Variantes de TEXTO das cores de dado.
     As cores de dado (--pos/--neg/--warn) foram validadas como PREENCHIMENTO —
     barra, celula, marcador — onde o piso e 3:1 (WCAG 1.4.11). Como TEXTO sobre o
     proprio fundo -soft o piso e 4,5:1, e tres dos seis pares reprovavam:
     pos/pos-soft 3,99 no claro e 4,00 no escuro, neg/neg-soft 3,16 no escuro,
     warn/warn-soft 2,94 no claro.
     Separar os dois papeis foi a saida: o preenchimento continua com o valor
     validado (nao se toca na paleta da DECISAO), e o texto ganha um valor proprio.
     No escuro isso e obrigatorio, nao preferencia: --neg #C34A3E nao alcanca
     4,5:1 contra fundo NENHUM (4,39 e o maximo, sobre preto puro). */
  --pos-ink: #0C6F4F;
  --neg-ink: var(--neg);
  --warn-ink: #83590B;
  /* Faixa de referencia sobre trilho (barra medida). So acende quando ha
     linha de base — ver panel.css. #CBD1C8 do prototipo dava 1,19:1 contra o
     trilho (--sunken): a faixa era invisivel. Escurecido ate 2,0:1, que separa
     a regiao de referencia do resto do trilho sem virar croma. */
  --band: #9CA19A;

  /* Veu de modal. Preto nos dois temas de proposito — o veu escurece o que
     esta atras, e um veu claro no tema escuro clarearia. O que muda e a opacidade. */
  --scrim: rgba(0, 0, 0, 0.5);

  /* --- Familia 3: escolha do usuario (azul ISAC) --- */
  /* ARDOSIA (teste de 2026-08-20). Substituiu o azul ISAC #1E5A8E, que era frio
     e saturado contra superficies verde-grafite de croma ~0,006 — vinha da
     marca, nao do sistema. Contrastes medidos sobre as tres superficies claras:
     7,12 / 6,32 / 5,85. Tinta clara sobre --act: 7,12. --act sobre --act-soft
     (texto em chip de faceta): 6,08.
     RISCO CONHECIDO, medido e aceito pelo dono: a ardosia fica a 54,6 de
     distancia RGB do verde positivo (#0E7F5A) — o azul dava 65,8. E o preco de
     harmonizar com uma paleta verde: parentesco com o verde do dado. Se em uso
     alguem ler "escolha minha" como "positivo", o caminho e afastar o matiz
     (mais azul, menos verde), nao dessaturar. */
  --act: #35595E;
  --act-2: #47747B;
  --act-3: #6FA0A8;
  --act-soft: #DDE7E8;
  /* Tinta que se le SOBRE --act. Tem a mesma polaridade de --on-ink (o azul
     claro do tema escuro pede tinta escura, como a tinta clara pede), por isso
     e alias e nao um quarto valor a manter em sincronia. */
  --on-act: var(--on-ink);

  /* Colors - ISAC Brand (alias — o acento de interacao e --act) */
  --isac-blue-primary: var(--act);
  --isac-blue-medium: var(--act-2);
  --isac-blue-light: var(--act-3);
  --isac-gray-dark: var(--ink-2);
  --isac-teal: var(--act-2);
  --isac-teal-light: var(--act-soft);

  /* Colors - Neutral (alias das superficies/tinta acima) */
  --white: var(--surface-2);
  --gray-50: var(--ground);
  --gray-100: var(--sunken);
  --gray-200: var(--rule);
  --gray-300: var(--rule-2);
  /* `--gray-400` e `--gray-600` deixaram de ser valores proprios.
     `--gray-600` (#63695F) media 4,32:1 sobre --sunken e 4,43 sobre --warn-soft:
     reprovava por pouco em toda a barra de escopo e no pe dos cartoes de sinal.
     `--gray-400` (#9AA096) media 2,05:1 nas celulas vazias do mapa de calor e
     2,49 nas siglas sem cobertura do mosaico — longe do piso.
     Resolvidos ao mira-los nos degraus que ja foram medidos. O efeito colateral
     e honesto: a rampa de tinta clara tem TRES degraus legiveis, nao cinco.
     Abaixo de --ink-3 nao ha degrau possivel em 10px sobre estas superficies. */
  --gray-400: var(--ink-3);
  --gray-500: var(--ink-3);
  --gray-600: var(--ink-2);
  --gray-700: #232921;
  --gray-800: #1D2320;
  --gray-900: var(--ink);

  /* Colors - Semantic (alias da familia de dado) */
  --success: var(--pos);
  --success-light: var(--pos-soft);
  --warning: var(--warn);
  --warning-light: var(--warn-soft);
  --danger: var(--neg);
  --danger-light: var(--neg-soft);
  --info: var(--act);
  --info-light: var(--act-soft);
  --neutral: var(--neu);
  --neutral-light: var(--neu-soft);
  --neutral-dark: #585D59;

  /* Typography — Archivo (grotesca/operado) + IBM Plex Mono (medido) + Newsreader (publicado) */
  --font-primary: 'Archivo', 'Archivo Narrow', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-numbers: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif;

  /* Font Sizes */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 36px;
  --text-5xl: 48px;
  --text-6xl: 60px;

  /* Font Weights */
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Grade de sangria (docs/design/DECISAO.md + DEV-LOG 2026-08-19): a largura
     maxima da coluna de conteudo e a folga lateral que ela e todo elemento de
     sangria (hoje, so `.scope`) compartilham. `--page-max` e o que `.container`
     ja resolvia em telas largas — `max-width: 1600px` com `box-sizing:
     border-box`, menos 2×24px de padding — medido antes desta conversao, nao
     escolhido a dedo. `--page-gutter` segue os MESMOS degraus que o padding de
     `.container` tinha: 24px daqui pra cima, 16px a partir de 1024px, 12px a
     partir de 768px (os overrides ficam em responsive.css, unico lugar que ja
     mexia nesses degraus). Ver `.container` e a grade de cada aba, abaixo. */
  --page-max: 1552px;
  --page-gutter: var(--space-6);

  /* Border Radius — escala 2/4/7px (DECISAO.md secao 5: r1/r2/r3) */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 7px;
  --radius-xl: 7px;

  /* Nomes do prototipo aprovado (auditoria 1.12: "os tokens --s1..--s6,
     --r1..--r3, --sans, --mono, --serif nao existem no produto — confirmado
     lendo getPropertyValue na raiz: retornam vazio"). Aliases, nao uma segunda
     fonte de verdade: --r1/--r2/--r3 sao os mesmos valores de
     --radius-sm/md/lg (a escala ja bate, so o nome faltava) e --sans/--mono/
     --serif sao os mesmos valores de --font-primary/--font-numbers/
     --font-serif. --s1..--s6 SAO um valor novo: a escala 3/6/10/16/26/42 do
     prototipo, que nao e a mesma de --space-1..--space-16 (4/8/12/16/20/24/
     32/40/48/64) e por isso nao pode ser alias de nada existente. Nao
     redefinem --space-*: mudar o valor de um token que dezenas de arquivos
     de outros workers ja consomem, no meio de uma rodada concorrente de
     edicao, seria alterar o layout deles sem eles verem a mudanca. Ver
     relatorio final, item 1.12, para onde cada folha (topbar.css, scope.css,
     panel.css) precisa trocar --space-N por --sN a mao. */
  --r1: var(--radius-sm);
  --r2: var(--radius-md);
  --r3: var(--radius-lg);
  --sans: var(--font-primary);
  --mono: var(--font-numbers);
  --serif: var(--font-serif);
  --s1: 3px;
  --s2: 6px;
  --s3: 10px;
  --s4: 16px;
  --s5: 26px;
  --s6: 42px;

  /* Shadows — NAO EXISTEM. A profundidade e fio + degrau de valor
     (DECISAO.md secao 5: "sem sombra difusa"). Os tokens permanecem por
     compatibilidade com as folhas que os referenciam, valendo `none`: apagar
     as ~30 referencias espalhadas custaria mais risco do que neutraliza-las
     numa linha. Se um dia voltar sombra, volta aqui e em nenhum outro lugar. */
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --shadow-xl: none;

  /* Anel de foco/selecao — familia 3 (escolha). Token porque o mesmo rgba do
     azul aparecia chumbado em cinco folhas diferentes. */
  --act-ring: rgba(53, 89, 94, 0.18);

  /* Transitions */
  --transition-fast: 150ms ease-in-out;
  --transition-base: 200ms ease-in-out;
  --transition-slow: 300ms ease-in-out;

  /* Aliases - usados por cadastro.css e analitico.css */
  --primary-color: var(--isac-blue-primary);
  --primary-dark: #164770;
  --primary-light: var(--isac-blue-light);
  /* Os `-dark` sempre foram, na pratica, "a cor de dado quando ela e TEXTO":
     `.sentiment-badge`, `.status-badge`, `.perfil-perm-count`, `.btn-action-danger`,
     `.alert-*`. Eles apontavam para a cor de PREENCHIMENTO, e por isso 38 badges de
     sentimento no Analitico, 24 no Config e 469 botoes de acao no escuro mediam
     entre 3,13 e 4,00:1. Agora apontam para as variantes de texto medidas. */
  --success-dark: var(--pos-ink);
  --danger-dark: var(--neg-ink);
  --warning-dark: var(--warn-ink);
  --info-dark: var(--primary-dark);
  --radius-base: var(--radius-md);
  --radius-full: 9999px;

  /* Rampa sequencial do mosaico geografico (geo.css) — magnitude em NEUTRO,
     claro para escuro. O mapa e contexto, nao alerta: "todo croma e sinal", e o
     sinal (sentimento) fica reservado as barras. O degrau t3 foi escolhido por
     contraste medido do texto sobre a celula: 5,22:1 aqui, 5,56:1 no escuro. */
  --tile-1: #DFE2DB;
  --tile-2: #B4BAAF;
  --tile-3: #666D66;
  --tile-4: #2E352F;
  --tile-hi-ink: #FCFDFA;

  /* Layout. `App.syncHeaderHeight()` reescreve este valor com a altura real do
     `header.top` no load e a cada resize; o valor aqui e o que vale no primeiro
     frame, antes do JS. Eram 126 px (cabecalho de duas faixas: logo + abas);
     com o cabecalho de uma linha do prototipo sao 55 px, e deixar 126 fazia o
     trilho de facetas comecar 71 px abaixo do lugar no primeiro pintura. */
  --header-height: 55px;
}

/* ============================================================================
   Dark Mode Variables — TRES ESCOPOS

   1. `@media (prefers-color-scheme: dark)` com guarda `:not([data-theme="light"])`
      — atende quem prefere escuro no SO **antes** de o JS rodar, sem clarao;
   2. `:root[data-theme="dark"]` — o interruptor vence a preferencia do SO;
   3. o `:root` claro acima — a raiz.

   Assim o interruptor vence nos dois sentidos (DECISAO.md secao 5). Cada bloco
   redefine apenas os tokens CANONICOS: os alias (`--gray-50: var(--ground)`)
   vivem no `:root` e sao resolvidos no mesmo elemento, portanto acompanham
   sozinhos — nao precisam ser repetidos aqui.
   ========================================================================= */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0E110E;
    --surface: #1B1F1A;
    --surface-2: #232821;
    --sunken: #141814;
    --ink: #E7EAE3;
    --ink-2: #A6ADA3;
    --ink-3: #8F9590;
    --rule: #333A31;
    --rule-2: #48513F;
    --on-ink: #141814;

    --pos: #22997A;
    --neu: #A8AEB4;
    --neg: #C34A3E;
    --warn: #B58F14;
    --pos-soft: #1E2E27;
    --neg-soft: #34211D;
    --warn-soft: #2E2818;
    --neu-soft: #262A28;
    --pos-ink: #3AA488;
    --neg-ink: #D37A71;
    --warn-ink: var(--warn);
    --band: #424C42;

    /* Ardosia clara. Contrastes: 7,20 sobre --surface, 8,20 sobre --ground,
       6,49 sobre --surface-2; tinta escura sobre ela, 7,74. No escuro a
       distancia do verde positivo sobe para 115,8 (contra 54,6 no claro) —
       o risco de confusao com o dado e um problema do tema CLARO, so. */
    --act: #7FB3BA;
    --act-2: #6FA0A8;
    --act-3: #9FCBD1;
    --act-soft: rgba(127, 179, 186, 0.15);
    --act-ring: rgba(127, 179, 186, 0.22);

    --gray-400: var(--ink-3);
    --gray-600: var(--ink-2);
    --gray-700: #D8DCD5;
    --gray-800: #E2E5DE;
    --neutral-dark: #C7CCD0;

    --primary-dark: var(--act-2);
    --info-dark: var(--act-3);

    --tile-1: #2C322B;
    --tile-2: #48513F;
    --tile-3: #8A918B;
    --tile-4: #C9CFC5;
    --tile-hi-ink: #141814;
  }
}

:root[data-theme="dark"] {
  --ground: #0E110E;
  --surface: #1B1F1A;
  --surface-2: #232821;
  --sunken: #141814;
  --ink: #E7EAE3;
  --ink-2: #A6ADA3;
  --ink-3: #8F9590;
  --rule: #333A31;
  --rule-2: #48513F;
  --on-ink: #141814;

  --pos: #22997A;
  --neu: #A8AEB4;
  --neg: #C34A3E;
  --warn: #B58F14;
  --pos-soft: #1E2E27;
  --neg-soft: #34211D;
  --warn-soft: #2E2818;
  --neu-soft: #262A28;
  --pos-ink: #3AA488;
  --neg-ink: #D37A71;
  --warn-ink: var(--warn);
  --band: #424C42;

  /* Espelho do bloco de `prefers-color-scheme: dark`. Os dois PRECISAM andar
     juntos: quem prefere escuro no SO e nunca tocou no interruptor cai no outro
     bloco. Atualizar so um deixa metade dos usuarios no acento antigo — foi
     exatamente esse o defeito do month-picker, corrigido em 4fbb096. */
  --act: #7FB3BA;
  --act-2: #6FA0A8;
  --act-3: #9FCBD1;
  --act-soft: rgba(127, 179, 186, 0.15);
  --act-ring: rgba(127, 179, 186, 0.22);

  --gray-400: var(--ink-3);
  --gray-600: var(--ink-2);
  --gray-700: #D8DCD5;
  --gray-800: #E2E5DE;
  --neutral-dark: #C7CCD0;

  --primary-dark: var(--act-2);
  --info-dark: var(--act-3);

  /* Rampa do mosaico invertida: no escuro, "mais" e mais claro. t3 aqui e
     #8A918B porque o texto escuro sobre ele mede 5,56:1 — o degrau que custou
     correcao no mockup. */
  --tile-1: #2C322B;
  --tile-2: #48513F;
  --tile-3: #8A918B;
  --tile-4: #C9CFC5;
  --tile-hi-ink: #141814;
}

/* Dark mode - element overrides */

/* O nome do produto e titulo, nao escolha: tinta nos dois temas. `--gray-800`
   ja tem override por tema, entao a regra especifica do escuro (que o pintava de
   azul) era a unica coisa a remover. */

/* `.btn-primary` e amigos passaram a `background: var(--ink)` +
   `color: var(--on-ink)` (components.css), que resolve nos dois temas — a
   correcao de tinta branca por tema deixou de ser necessaria para eles.
   Sobram os que continuam pintados de tinta de DADO (danger/perigo), onde o
   fundo e escuro nos dois temas. */
[data-theme="dark"] .btn-danger,
[data-theme="dark"] .modal-confirm-danger {
  color: #FFFFFF;
}


[data-theme="dark"] .alert-info { color: var(--info-dark); }
[data-theme="dark"] .alert-success { color: var(--success-dark); }
[data-theme="dark"] .alert-warning { color: var(--warning-dark); }
[data-theme="dark"] .alert-danger { color: var(--danger-dark); }

/* ============================================================================
   Reset & Base Styles
   ========================================================================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Corpo do texto — auditoria 1.10. Ate aqui `body` lia `--text-base` (16px),
   `line-height: 1.5` e `--gray-700` (#232921): tres valores da camada de
   tokens legada que nunca foram alinhados ao prototipo aprovado. `--text-base`
   continua existindo e vale 16px porque dezenas de componentes o usam de
   proposito (modais, alertas, `.insight-item h3`) — o que muda aqui e SO o
   corpo, com o valor literal do prototipo (dashboard.html/analitico.html
   `body{font-size:13.5px;line-height:1.45}`), desacoplado daquele token.
   `--gray-700` continua existindo (ainda usado por `.user-name`/`.btn-logout`
   antigos), so deixou de ser a tinta do corpo: `--ink` e o token que os dois
   prototipos usam e que esta na paleta aprovada (13,94:1 de contraste). */
body {
  font-family: var(--font-primary);
  font-size: 13.5px;
  font-weight: var(--font-regular);
  line-height: 1.45;
  color: var(--ink);
  background: var(--gray-50);
}

/* Reset de botao do prototipo (dashboard.html/analitico.html `button{...}`),
   que nunca chegou aqui. Sem ele, `<button>` cai no `line-height` padrao do
   agente do usuario ("normal", nao o herdado do corpo) — e e exatamente o
   sintoma medido no item 1.10: `.tab`, `.btn`, `.sel`, `.u-row`, `.crow`
   (todos <button> em scope.css/topbar.css/panel.css) tinham `line-height:
   normal` porque nada nunca disse a eles para herdar. `font: inherit` inclui
   `line-height` na heranca (e o unico jeito de herda-lo via shorthand); toda
   regra mais especifica (`.btn-primary`, `.sel` etc.) continua vencendo em
   `background`/`border`/`color`, porque selecionador de classe bate
   selecionador de elemento. Verificado ao vivo em `/login` (unico HTML que
   nao exige sessao): `.login-btn` computava `line-height: normal` antes desta
   regra. */
button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--act);
  outline-offset: 2px;
}

/* Link de pular navegacao: azul e legitimo aqui (e link, e so aparece no foco —
   as duas coisas que a regra reserva ao `--act`). O que estava errado era a
   tinta: `#fff` literal sobre `--act` mede 6,5:1 no claro mas 2,4:1 no escuro,
   porque o `--act` escuro e um azul CLARO. `--on-act` tem a polaridade certa nos
   dois temas. */
.skip-nav {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  background: var(--act);
  color: var(--on-act);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  z-index: 9999;
  font-weight: var(--font-semibold);
  text-decoration: none;
  transition: top var(--transition-fast);
}

.skip-nav:focus {
  top: var(--space-4);
}

/* ============================================================================
   Layout
   ========================================================================= */

/* `.container` deixou de ser quem limita a largura da pagina. O motivo e o
 * defeito medido em 2026-08-19: um filho seu (`.scope`) nunca consegue sangrar
 * mais longe que a PROPRIA borda de `.container`, e essa borda para de
 * acompanhar a janela assim que `.container` bate no `max-width` — a 1920px a
 * barra de escopo ficava recuada 160px de cada lado, a 2536px 474px, enquanto
 * o cabecalho (`.top`, fora de `.container`) ia de ponta a ponta. Margem
 * negativa so alcanca a borda do proprio ancestral; quando essa borda para de
 * ser a da janela, a margem negativa para de bastar.
 *
 * A correcao transfere o limite de largura para DENTRO de cada aba —
 * `#dashboard-content` (panel.css), `.analitico-container` (analitico.css) e
 * `.config-sections` (admin.css) — no mesmo nivel em que a barra de escopo
 * vive. So assim ela pode ser `grid-column: 1 / -1` e alcancar a borda real da
 * viewport, sem margem negativa nenhuma: a grade que a contem tambem nao tem
 * max-width para escapar. `.container` sobra como envelope inerte (ainda
 * precisa existir — `.colophon .container`, em panel.css, o referencia). */
.container {
  width: 100%;
}

/* A grade de sangria, comum as tres. `display: grid` e o `grid-template-columns`
 * ficam em cada arquivo dono (panel.css, analitico.css, admin.css) — declarar
 * aqui tambem correria o risco de uma folha carregada depois (analitico.css,
 * admin.css) vencer por ordem com a MESMA especificidade e voltar pro flex
 * antigo. O que e seguro centralizar aqui e a REGRA DE COLUNA: todo filho vai
 * pra coluna do meio por padrao, e `.sangria` (hoje so `.scope`) ocupa a grade
 * inteira. `min-width: 0` em todo item evita que conteudo largo (a tabela do
 * Analitico) empurre a coluna do meio alem do que o grid calculou — o
 * "estouro" classico de grid com item de largura intrinseca, e a causa mais
 * provavel de rolagem horizontal se esta grade vazar. */
#dashboard-content > *,
.analitico-container > *,
.cur-container > *,
.config-sections > * {
  grid-column: 2;
  min-width: 0;
}

#dashboard-content > .sangria,
.analitico-container > .sangria {
  grid-column: 1 / -1;
  min-width: 0;
}

/* `#loading`/`#error` nao tem elemento de sangria — so precisam da mesma
 * largura e da mesma folga que a coluna do meio, pra nao colar nas bordas
 * agora que `.container` perdeu o padding. */
.loading-container,
.error-container {
  max-width: min(var(--page-max), calc(100% - 2 * var(--page-gutter)));
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================================
   Header

   O CABECALHO NAO MORA MAIS AQUI. A casca vigente e `header.top` (topbar.css):
   uma linha so, wordmark em texto, navegacao dentro. Saiu deste arquivo tudo o
   que desenhava a faixa antiga e ja nao tinha elemento no DOM:
   `.dashboard-header` (com o bloco `@supports` de backdrop-filter e o override
   de tema), `.header-content`, `.header-left`, `.header-right`,
   `.header-divider` (e o `[data-theme="dark"] .header-divider` la de cima),
   `.header-app-name`, `.user-icon`, `.logo` e `.filter-group`.

   Conferido por busca no HTML e no JS antes de apagar, um seletor por vez. Tres
   sobreviveram a conferencia e continuam abaixo, porque `auth.js` os escreve no
   cabecalho novo: `.user-name`, `.btn-logout` — e `main.js:syncHeaderHeight()`
   ainda cita `.dashboard-header` como fallback de QUERY (nao de estilo), o que
   nao depende de regra CSS nenhuma.
   ========================================================================= */

.user-name {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--gray-700);
  white-space: nowrap;
}

.btn-logout {
  background: none;
  color: var(--gray-500);
  border: none;
  padding: var(--space-1) 0;
  font-family: var(--font-primary);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: color var(--transition-base);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.btn-logout:hover {
  color: var(--gray-900);
}

/* ============================================================================
   Main Content
   ========================================================================= */

/* Perdeu o padding-top (era 32px). Nas abas com `.scope` (Painel, Analitico)
   esse padding so existia pra `.scope` cancelar com margem negativa e ficar
   colado ao cabecalho — com a grade de sangria `.scope` ja nasce colado, sem
   precisar cancelar nada. Nas abas sem `.scope` (Base, Sistema) o respiro
   equivalente foi pra `.config-sections` (admin.css), que soma o que este
   padding dava (32px) ao que ja era seu (24px) — ver o comentario la. */
.dashboard-main {
  padding: 0 0 var(--space-8);
  min-height: calc(100vh - 200px);
}

/* ============================================================================
   Loading & Error States
   ========================================================================= */

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-16) 0;
  gap: var(--space-4);
}

.spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--gray-200);
  border-top-color: var(--isac-blue-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.error-container {
  text-align: center;
  padding: var(--space-16) var(--space-6);
}

.error-icon {
  font-size: var(--text-5xl);
  margin-bottom: var(--space-4);
  color: var(--warning);
}

.error-container h2 {
  font-size: var(--text-2xl);
  color: var(--gray-900);
  margin-bottom: var(--space-2);
}

.error-container p {
  color: var(--gray-600);
  margin-bottom: var(--space-6);
}

/* ============================================================================
   Sections
   ========================================================================= */

section {
  margin-bottom: var(--space-8);
}

/* A faixa de KPIs tem chrome proprio (panel.css, `.kpis`): grade de celulas
   separadas por fio, sem bloco afundado em volta. */
.hero-section {
  margin-bottom: var(--space-6);
}

/* ============================================================================
   Grid System
   ========================================================================= */

.grid {
  display: grid;
  gap: var(--space-6);
}

.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

/* ============================================================================
   Metric Cards (Hero KPIs)
   ========================================================================= */

/* `.metric-card` e familia (`.metric-icon/-label/-value/-trend/-detail`,
   `.sparkline-container` e as container queries deles) foram removidos com a
   faixa de KPIs antiga. O substituto e `.kpis`/`.kpi` em panel.css: grade
   separada por fio, valor em mono, delta com a base escrita e o lugar da barra
   medida. As sparklines sairam junto — repetiam, em 40px e sem eixo, a mesma
   serie que o painel "Sentimento no tempo" mostra logo abaixo, e uma delas era
   a terceira peca que pintava decoracao com o azul da escolha. */

/* ============================================================================
   Cards
   ========================================================================= */

/* O CHROME DE PAINEL.
   Saiu a sombra e saiu o titulo grande empilhado; entrou o painel do
   prototipo aprovado (docs/design/sintese/dashboard.html, `.panel`/`.panel-h`):
   fio de 1px, sem sombra, titulo em corpo pequeno com o subtitulo **ao lado**
   na mesma linha de base, e uma area de meta a direita.

   `.card` e `.panel` sao o mesmo objeto de proposito: o marcador antigo esta
   em nove secoes do Painel — inclusive no painel geografico, que usava `.card`
   "para integrar com os vizinhos". Os vizinhos mudaram; ele acompanha sem uma
   linha de HTML alterada. `.panel` existe para a marcacao nova poder usar o
   nome do prototipo. */

.card,
.panel {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-6);
}

/* Painel que carrega severidade: o fio da esquerda engrossa e recebe a tinta
   do dado. E o unico croma permitido no chrome, e ele diz alguma coisa. */
.panel-warn,
.card-qmentum {
  border-left: 3px solid var(--warn);
}

.panel-crit {
  border-left: 3px solid var(--neg);
}

.card-header,
.panel-h {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--rule);
}

.card-title,
.panel-h h2 {
  font-size: 14.5px;
  font-weight: var(--font-bold);
  letter-spacing: 0.01em;
  color: var(--ink);
  margin-bottom: 0;
}

.card-subtitle,
.panel-h .sub {
  flex: 1 1 auto;
  font-size: 11.5px;
  color: var(--ink-3);
  margin-bottom: 0;
}

/* Meta a direita do cabecalho: sempre valor apurado, sempre em mono. */
.panel-h .right {
  margin-left: auto;
  font-family: var(--font-numbers);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--ink-3);
  white-space: nowrap;
}

/* No estreito a meta perde o `nowrap` e a ancoragem a direita: `nowrap` num
   flex item que ja nao cabe transborda o painel em vez de encolher. */
@media (max-width: 560px) {
  .panel-h .right {
    margin-left: 0;
    white-space: normal;
  }
}

.card-body,
.panel-b {
  padding: var(--space-4);
}

/* ============================================================================
   Charts
   ========================================================================= */

.charts-section canvas {
  max-height: 300px;
}

/* `.donut-center-text` / `.nss-label` / `.nss-value` foram removidos com o
   donut de sentimento (Fase 2 de DECISAO.md secao 7: "donut -> barra de
   composicao + regua do NSS"). A leitura vive agora na barra de escopo, onde
   e a mesma em todas as telas — ver scope.css, `.scope-ruler`. */

/* ============================================================================
   Insights
   ========================================================================= */

.insights-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.insight-item {
  padding: var(--space-4);
  border-left: 4px solid;
  background: var(--gray-50);
  border-radius: var(--radius-md);
}

.insight-item.positive {
  border-color: var(--success);
  background: var(--success-light);
}

.insight-item.warning {
  border-color: var(--warning);
  background: var(--warning-light);
}

.insight-item.negative {
  border-color: var(--danger);
  background: var(--danger-light);
}

.insight-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

/* Carimbo de severidade — palavra escrita, nunca so cor (DECISAO.md §5:
   "todo croma e sinal", codificacao secundaria exigida por CVD). */
.insight-stamp {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 1px var(--space-2);
  border-radius: var(--radius-base);
  font-size: 10.5px;
  font-weight: var(--font-semibold);
  font-stretch: 78%;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.4;
}

/* Carimbo de severidade — contorno, nao bloco cheio, como no prototipo
   (`.stamp.crit`/`.stamp.warn`): fundo -soft, tinta -ink, fio na cor de dado.
   O bloco cheio que estava aqui punha tinta clara sobre a cor de dado, e
   #F6F7F3 sobre --warn #B0790E mede 3,49:1 — reprova AA para texto de 10,5px.
   Com a variante de texto sobre o fundo -soft, os quatro pares (dois carimbos x
   dois temas) ficam entre 4,52 e 4,82. */
.insight-stamp.favoravel {
  background: var(--pos-soft);
  color: var(--pos-ink);
  border: 1px solid var(--pos);
}

.insight-stamp.atencao {
  background: var(--warn-soft);
  color: var(--warn-ink);
  border: 1px solid var(--warn);
}

.insight-item h3 {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--gray-900);
  margin-bottom: 0;
}

.insight-item p {
  font-size: var(--text-sm);
  color: var(--gray-600);
  margin-bottom: var(--space-2);
}

.insight-item .recommendation {
  font-size: var(--text-sm);
  color: var(--gray-700);
  font-style: italic;
}

.insight-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--gray-200);
}

/* "Como isto e calculado" — mitigacao do risco 1 de DECISAO.md §8 (a frase
   de diagnostico pode errar com autoridade de maquina): o criterio fica a
   um clique em todo cartao, com destino ou sem. */
.insight-calc-link {
  background: none;
  border: none;
  padding: 0;
  font-size: var(--text-xs);
  color: var(--gray-600);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.insight-calc-link:hover {
  color: var(--primary-color);
}

/* Acao com destino — clicar aplica o recorte que originou o cartao e leva
   ao Analitico (DECISAO.md §7, Fase 2). So existe quando ha recorte genuino. */
.insight-action {
  margin-left: auto;
  padding: var(--space-1) var(--space-3);
  background: transparent;
  border: 1px solid var(--primary-color);
  border-radius: var(--radius-base);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--primary-color);
  cursor: pointer;
  transition: all var(--transition-base);
  white-space: nowrap;
}

.insight-action:hover {
  background: var(--primary-color);
  color: var(--white);
}

/* ============================================================================
   Qmentum Section
   ========================================================================= */

.qmentum-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

.qmentum-item {
  text-align: center;
  padding: var(--space-6);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  background: var(--gray-50);
  transition: all var(--transition-base);
}

.qmentum-item[data-indicator] {
  cursor: pointer;
}

.qmentum-item:hover {
  background: var(--surface-2);
  border-color: var(--rule-2);
}

.qmentum-icon {
  font-size: var(--text-3xl);
  color: var(--ink-3);
  margin-bottom: var(--space-2);
}

.qmentum-title {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--gray-900);
  margin-bottom: var(--space-3);
}

.qmentum-value {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--ink);
  font-family: var(--font-numbers);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--space-2);
}

.qmentum-detail {
  font-size: var(--text-sm);
  color: var(--gray-600);
}

/* ============================================================================
   Table
   ========================================================================= */

.table-responsive {
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table thead {
  background: var(--gray-100);
  border-bottom: 2px solid var(--gray-300);
}

.data-table th {
  padding: var(--space-4);
  text-align: left;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--gray-700);
}

.data-table td {
  padding: var(--space-4);
  border-bottom: 1px solid var(--gray-200);
  font-size: var(--text-sm);
}

.data-table tbody tr:hover {
  background: var(--gray-50);
}

.data-table th:nth-child(2),
.data-table th:nth-child(3),
.data-table th:nth-child(4),
.data-table th:nth-child(5),
.data-table th:nth-child(6),
.data-table td:nth-child(2),
.data-table td:nth-child(3),
.data-table td:nth-child(4),
.data-table td:nth-child(5),
.data-table td:nth-child(6) {
  text-align: center;
}


/* ============================================================================
   Footer
   ========================================================================= */

.dashboard-footer {
  background: var(--white);
  border-top: 1px solid var(--gray-200);
  padding: var(--space-6) 0;
  margin-top: var(--space-12);
}

.footer-content {
  text-align: center;
}

.footer-content p {
  font-size: var(--text-sm);
  color: var(--gray-600);
  margin-bottom: var(--space-2);
}

.footer-meta {
  color: var(--gray-500);
}

.footer-meta a {
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 600;
  transition: color var(--transition-base);
}

.footer-meta a:hover {
  color: var(--primary-dark);
  text-decoration: underline;
}

/* ============================================================================
   Utilities
   ========================================================================= */

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-muted {
  color: var(--gray-500);
}

.font-mono {
  font-family: var(--font-numbers);
  font-variant-numeric: tabular-nums;
}

/* ============================================================================
   Heatmap
   ========================================================================= */

.heatmap-container {
  overflow-x: auto;
}

.heatmap-grid {
  display: grid;
  gap: 2px;
  min-width: max-content;
  grid-template-columns: 220px repeat(var(--hm-months, 12), 1fr);
}

/* Mobile label toggle: full name (desktop) vs sigla (mobile) */
.label-short {
  display: none;
}

.heatmap-header {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--gray-600);
  text-align: center;
  padding: var(--space-1) var(--space-2);
}

.heatmap-label {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--gray-700);
  padding: var(--space-1) var(--space-2);
  display: flex;
  align-items: center;
  line-height: 1.3;
  word-break: break-word;
}

.heatmap-cell {
  font-size: 10px;
  font-weight: var(--font-semibold);
  font-family: var(--font-numbers);
  text-align: center;
  padding: var(--space-1);
  border-radius: var(--radius-sm);
  color: var(--gray-900);
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-fast);
  cursor: default;
}

.heatmap-cell:hover {
  transform: scale(1.1);
  z-index: 1;
}

.heatmap-empty {
  background: var(--sunken);
  color: var(--ink-3);
}

.hidden {
  display: none !important;
}