/* ============================================================================
   painel.css — a camada de COMPONENTE do painel, sobre tokens.css.
   Nenhuma cor, raio, sombra ou duracao literal: tudo sai dos tokens (§5.2).
   As unicas primitivas novas sao as cores de VARIANTE (--v-a..--v-e), que sao
   dado, nao decoracao: elas precisam ser distinguiveis entre si e legiveis nos
   dois temas, e por isso saem do mesmo espaco OKLCH com L travada.
   ============================================================================ */

@layer tema {
  :root {
    /* uma escala de hue por variante, L e C travados: as cinco linhas do
       grafico tem o MESMO peso visual, senao a mais escura parece "a boa". */
    --v-a: #396bcc;
    --v-b: #2f9e63;
    --v-c: #c1712a;
    --v-d: #8e5bc4;
    --v-e: #b8455a;
    --v-x: var(--fg-muted);
  }
  @supports (color: oklch(0 0 0)) {
    :root {
      --v-a: oklch(0.58 0.15 262);
      --v-b: oklch(0.58 0.15 152);
      --v-c: oklch(0.58 0.15 62);
      --v-d: oklch(0.58 0.15 312);
      --v-e: oklch(0.58 0.15 20);
    }
  }

  /* TEMA ESCURO — o painel e ferramenta de trabalho e vive aberto. Trocar tema
     e trocar PARA QUAL primitivo cada semantico aponta; nenhum componente muda. */
  @media (prefers-color-scheme: dark) {
    :root {
      --bg:            var(--n-1000);
      --bg-subtle:     var(--n-950);
      --surface:       var(--n-950);
      --surface-2:     var(--n-900);
      --surface-3:     var(--n-800);
      --fg:            var(--n-50);
      --fg-muted:      var(--n-400);
      --fg-subtle:     var(--n-500);
      --accent:        var(--a-400);
      --accent-hover:  var(--a-300);
      --accent-fg:     var(--n-1000);
      --border:        color-mix(in oklab, var(--fg) 14%, transparent);
      --border-strong: color-mix(in oklab, var(--fg) 24%, transparent);
    }
    @supports (color: oklch(0 0 0)) {
      :root {
        --v-a: oklch(0.72 0.14 262);
        --v-b: oklch(0.72 0.14 152);
        --v-c: oklch(0.72 0.14 62);
        --v-d: oklch(0.72 0.14 312);
        --v-e: oklch(0.72 0.14 20);
      }
    }
  }
}

@layer componentes {

  /* o painel nao tem sticky CTA; o reset de tokens.css reserva a faixa */
  body { padding-block-end: var(--sp-12); }
  p, li { max-inline-size: none; }

  /* ---------------------------------------------------------------- barra -- */
  .barra {
    position: sticky; top: 0; z-index: var(--z-sticky);
    background: var(--surface); border-block-end: var(--hairline);
  }
  .barra-in {
    max-inline-size: var(--container); margin-inline: auto;
    padding: var(--sp-3) var(--gutter);
    display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
  }
  .marca {
    font-weight: var(--fw-bold); letter-spacing: var(--tr-h3);
    color: var(--fg); text-decoration: none; font-size: var(--fs-1);
  }
  .marca span { color: var(--accent); font-weight: var(--fw-medium); }
  .ctx { display: flex; align-items: baseline; gap: var(--sp-3); flex: 1 1 auto; }
  .ctx b { font-size: var(--fs-0); }
  .ctx em { color: var(--fg-muted); font-style: normal; font-size: var(--fs--1); }
  .periodo {
    font-size: var(--fs--1); color: var(--fg-muted);
    font-variant-numeric: tabular-nums;
    padding: 2px var(--sp-2); border: var(--hairline); border-radius: var(--r-full);
  }
  .sair { display: flex; align-items: center; gap: var(--sp-3); }
  .quem { font-size: var(--fs--1); color: var(--fg-muted); }
  .papel {
    font-style: normal; font-size: var(--fs--2); text-transform: uppercase;
    letter-spacing: var(--tr-eyebrow); padding: 1px var(--sp-2);
    border-radius: var(--r-full); background: var(--accent-soft); color: var(--accent);
  }
  .papel-viewer { background: color-mix(in oklab, var(--fg) 8%, transparent); color: var(--fg-muted); }

  /* ------------------------------------------------------------ conteudo -- */
  .conteudo {
    max-inline-size: var(--container); margin-inline: auto;
    padding: var(--sp-8) var(--gutter) var(--sp-12);
    display: grid; gap: var(--sp-8);
  }
  /* `min-inline-size: 0` NAO E MICRO-AJUSTE.
     Item de grid nasce com `min-width: auto`, que o proibe de encolher abaixo do
     conteudo. A tabela por variante tem 13 colunas e 1.463 px de largura minima:
     sem esta linha o item ESTICA a grade, a `.rolagem` nunca chega a rolar, e
     quem rola e a PAGINA INTEIRA — cabecalho, filtros e todo o resto andando de
     lado. Medido num viewport de 1.280 px (notebook comum): `.conteudo` com
     clientWidth 1264 e scrollWidth 1561, e a coluna `P(melhor)` fora da tela.
     Com a linha, a tabela rola dentro do proprio quadro e o resto fica parado. */
  .conteudo > * { min-inline-size: 0; }
  .rodape {
    max-inline-size: var(--container); margin-inline: auto;
    padding: 0 var(--gutter) var(--sp-12);
    color: var(--fg-subtle); font-size: var(--fs--1);
  }
  h3 { font-size: var(--fs-1); letter-spacing: var(--tr-h3); margin-block-end: var(--sp-3); }
  .h-sub { margin-block-start: var(--sp-6); }

  /* ------------------------------------------------------------ controles -- */
  .controles {
    display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: flex-end;
    background: var(--surface-2); border: var(--hairline);
    border-radius: var(--r-card); padding: var(--sp-4);
  }
  .campo { display: grid; gap: var(--sp-1); font-size: var(--fs--1); }
  .campo > span { color: var(--fg-muted); }
  .campo-linha select, .campo-linha input, .campo input {
    font: inherit; font-size: var(--fs--1); color: var(--fg);
    background: var(--surface); border: var(--hairline-strong);
    border-radius: var(--r-input); padding: var(--sp-2) var(--sp-3);
    min-block-size: var(--alvo-min);
  }
  .btn {
    font: inherit; font-size: var(--fs--1); font-weight: var(--fw-semi);
    min-block-size: var(--alvo-min); padding: var(--sp-2) var(--sp-5);
    border-radius: var(--r-btn); border: var(--hairline-strong);
    background: var(--surface); color: var(--fg); cursor: pointer;
    text-decoration: none; display: inline-flex; align-items: center;
    transition: background var(--dur-fast) var(--ease-out-quint);
  }
  .btn:hover { background: var(--surface-3); }
  .btn-forte { background: var(--accent); color: var(--accent-fg); border-color: transparent; }
  .btn-forte:hover { background: var(--accent-hover); }
  .btn-quieto { border-color: transparent; color: var(--fg-muted); }

  /* ------------------------------------------------------------- veredito -- */
  .veredito {
    border: var(--hairline); border-inline-start: 4px solid var(--accent);
    border-radius: var(--r-card); background: var(--surface);
    padding: var(--sp-6); box-shadow: var(--sh-1);
  }
  .veredito h2 { font-size: var(--fs-2); letter-spacing: var(--tr-h2); }
  .veredito-burn_in { border-inline-start-color: var(--warn); }
  .veredito-lider_forte { border-inline-start-color: var(--ok); }
  .veredito-sem_dado { border-inline-start-color: var(--fg-subtle); }
  .veredito-linhas { margin-block-start: var(--sp-3); display: grid; gap: var(--sp-2); }
  .veredito-linhas li {
    list-style: none; padding-inline-start: var(--sp-4); position: relative;
    color: var(--fg-muted); font-size: var(--fs--1);
  }
  .veredito-linhas li::before {
    content: "·"; position: absolute; inset-inline-start: 0; color: var(--accent);
  }

  .realidade {
    background: var(--surface-2); border: var(--hairline);
    border-radius: var(--r-card); padding: var(--sp-5);
  }
  .realidade p { font-size: var(--fs--1); color: var(--fg-muted); }
  .realidade b { color: var(--fg); }
  .aviso { color: var(--warn); }

  /* ------------------------------------------------------------------ kpi -- */
  .kpis {
    display: grid; gap: var(--sp-3);
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  }
  .kpi {
    background: var(--surface); border: var(--hairline);
    border-radius: var(--r-md); padding: var(--sp-4); display: grid; gap: var(--sp-1);
  }
  .kpi-rot {
    font-size: var(--fs--2); text-transform: uppercase;
    letter-spacing: var(--tr-eyebrow); color: var(--fg-subtle);
  }
  .kpi-val { font-size: var(--fs-2); font-variant-numeric: tabular-nums; line-height: var(--lh-snug); }
  .kpi-extra { font-size: var(--fs--2); color: var(--fg-muted); }

  /* --------------------------------------------------------------- blocos -- */
  .bloco {
    background: var(--surface); border: var(--hairline);
    border-radius: var(--r-card); padding: var(--sp-6);
  }
  .bloco.duas { display: grid; gap: var(--sp-8); grid-template-columns: 1fr; }
  @media (min-width: 900px) { .bloco.duas { grid-template-columns: 1fr 1fr; } }
  /* mesma razao da linha em `.conteudo > *`: aqui moram o funil e as tabelas de
     higiene e coorte, e sem isto uma coluna larga estoura a outra metade. */
  .bloco.duas > * { min-inline-size: 0; }

  .nota { font-size: var(--fs--2); color: var(--fg-muted); margin-block-start: var(--sp-4); }
  .nota code { font-family: var(--font-mono); font-size: 0.92em; }
  .vazio, .cinza { color: var(--fg-subtle); }
  .ok-linha { color: var(--ok); font-size: var(--fs--1); }

  /* --------------------------------------------------------------- tabela -- */
  .rolagem { overflow-x: auto; }
  .tab { inline-size: 100%; border-collapse: collapse; font-size: var(--fs--1); }
  .tab th, .tab td {
    padding: var(--sp-2) var(--sp-3); text-align: start;
    border-block-end: var(--hairline); vertical-align: top;
  }
  .tab thead th {
    font-size: var(--fs--2); text-transform: uppercase; letter-spacing: var(--tr-eyebrow);
    color: var(--fg-subtle); font-weight: var(--fw-medium); white-space: nowrap;
  }
  .tab td.n, .tab th.n { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
  /* A JANELA MORA NO CABECALHO DA COLUNA. Duas colunas bayesianas convivem aqui
     (P(melhor), do CBBG, e P(a frente), desta tela); sem a fonte e o periodo
     escritos no proprio <th>, elas voltariam a parecer o mesmo numero. */
  .tab thead th .cab-fonte {
    display: block; font-style: normal; text-transform: none; letter-spacing: 0;
    font-weight: var(--fw-body); color: var(--fg-subtle); white-space: nowrap;
  }
  .nota-janela { line-height: 1.5; }
  .tab tbody th { white-space: nowrap; }
  .tab-min th, .tab-min td { padding: var(--sp-1) var(--sp-2); }
  .linha-morta { opacity: .6; }
  .morta { font-style: normal; font-size: var(--fs--2); color: var(--danger); }
  .pastilha {
    display: inline-block; inline-size: 10px; block-size: 10px;
    border-radius: var(--r-full); margin-inline-end: var(--sp-2);
  }
  .firme { color: var(--fg); }
  .ic, .selo-fraco {
    display: block; font-style: normal; font-size: var(--fs--2);
    color: var(--fg-subtle); font-weight: var(--fw-body);
  }
  .selo-fraco { color: var(--warn); }

  /* ---------------------------------------------------------------- funil -- */
  .funis { display: grid; gap: var(--sp-6); grid-template-columns: 1fr; }
  @media (min-width: 900px) { .funis { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } }
  .funil h4 { font-size: var(--fs-0); margin-block-end: var(--sp-3); }
  .degraus { display: grid; gap: var(--sp-1); }
  .degrau {
    list-style: none; display: grid; align-items: center; gap: var(--sp-2);
    grid-template-columns: 6.5rem 1fr 3.5rem 4rem 5.5rem;
    font-size: var(--fs--2); font-variant-numeric: tabular-nums;
    padding: var(--sp-1) var(--sp-2); border-radius: var(--r-xs);
  }
  .degrau-cab { color: var(--fg-subtle); text-transform: uppercase; letter-spacing: var(--tr-eyebrow); }
  .degrau-barra { background: var(--surface-3); border-radius: var(--r-full); block-size: 8px; }
  .degrau-barra i { display: block; block-size: 8px; border-radius: var(--r-full); }
  .degrau-n, .degrau-pc, .degrau-perda { text-align: end; }
  .degrau-perda { color: var(--fg-subtle); }
  .degrau-pior { background: color-mix(in oklab, var(--danger) 10%, transparent); }
  .degrau-pior .degrau-perda { color: var(--danger); font-weight: var(--fw-semi); }
  .degrau-incoerente { background: color-mix(in oklab, var(--warn) 12%, transparent); }
  .incoerente { color: var(--warn); font-weight: var(--fw-semi); }

  /* -------------------------------------------------------------- grafico -- */
  .abas { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-block-end: var(--sp-4); }
  .aba {
    font: inherit; font-size: var(--fs--2); cursor: pointer;
    padding: var(--sp-1) var(--sp-3); border-radius: var(--r-full);
    border: var(--hairline); background: transparent; color: var(--fg-muted);
  }
  .aba-ativa { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
  .oculto { display: none; }
  .gr { inline-size: 100%; block-size: auto; }
  .gr .g { stroke: var(--border); stroke-width: 1; }
  .gr .t-eixo { fill: var(--fg-subtle); font-size: 10px; font-family: var(--font-sans); }
  .gr circle { cursor: crosshair; }
  .legenda { display: flex; gap: var(--sp-4); font-size: var(--fs--2); color: var(--fg-muted); }
  .legenda span { display: inline-flex; align-items: center; gap: var(--sp-1); }
  .legenda i { inline-size: 10px; block-size: 10px; border-radius: var(--r-full); }
  #dica {
    position: fixed; z-index: var(--z-toast); pointer-events: none;
    background: var(--bg-inverse); color: var(--fg-inverse);
    font-size: var(--fs--2); padding: var(--sp-1) var(--sp-3);
    border-radius: var(--r-sm); box-shadow: var(--sh-2);
  }

  /* -------------------------------------------------------------- alertas -- */
  .alerta {
    font-size: var(--fs--1); padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-sm); margin-block-start: var(--sp-3);
    border-inline-start: 3px solid var(--warn);
    background: color-mix(in oklab, var(--warn) 10%, transparent);
  }
  .alerta-erro {
    border-inline-start-color: var(--danger);
    background: color-mix(in oklab, var(--danger) 10%, transparent);
  }

  /* ------------------------------------------------- TELA 8: SAUDE DOS JOBS --
     A regra visual desta secao e uma so: `atrasado` e `nunca rodou` sao VERMELHOS,
     e o vermelho e do PLANO DE FUNDO DA LINHA, nao so de um pontinho. O ponto da
     tela e que o operador nao consiga percorre-la sem ver que algo envelheceu em
     silencio; um selo discreto num canto seria uma tela que passa despercebida.
     `desligado` e CINZA de proposito: ausencia declarada nao e alarme e nao e ok. */
  .selo-job {
    display: inline-block; font-size: var(--fs--2); font-weight: var(--fw-semi);
    padding: 2px var(--sp-2); border-radius: var(--r-full);
    text-transform: uppercase; letter-spacing: var(--tr-eyebrow);
    border: var(--hairline); white-space: nowrap;
  }
  .selo-ok          { color: var(--ok);      background: color-mix(in oklab, var(--ok) 14%, transparent);      border-color: transparent; }
  .selo-atrasado,
  .selo-nunca_rodou,
  .selo-falhou      { color: var(--danger);  background: color-mix(in oklab, var(--danger) 18%, transparent);  border-color: transparent; }
  .selo-desligado   { color: var(--fg-subtle); background: color-mix(in oklab, var(--fg) 7%, transparent);     border-color: transparent; }
  /* `rodando`/`pulada`: nem alarme nem sucesso novo — azul de informacao, nunca verde. */
  .selo-andamento   { color: var(--info);    background: color-mix(in oklab, var(--info) 14%, transparent);    border-color: transparent; }
  /* estado que ESTA TELA nao sabe ler. Ambar, com borda: ele tem que incomodar o
     suficiente para alguem abrir o codigo — o que ele NAO pode e passar por verde. */
  .selo-desconhecido { color: var(--warn);   background: color-mix(in oklab, var(--warn) 16%, transparent);    border-color: var(--warn); }

  .tab-jobs th, .tab-jobs td { vertical-align: top; }
  .tab-jobs tbody th { text-align: start; font-weight: var(--fw-semi); }
  .tab-jobs .sub {
    display: block; font-style: normal; font-size: var(--fs--2);
    color: var(--fg-subtle); margin-block-start: 2px;
  }
  .tab-jobs .sub code, .miudo code { font-family: var(--font-mono); }
  /* a linha inteira pinta: ver o comentario no topo desta secao */
  .lj-atrasado, .lj-nunca_rodou, .lj-falhou {
    background: color-mix(in oklab, var(--danger) 9%, transparent);
  }
  .lj-desconhecido { background: color-mix(in oklab, var(--warn) 9%, transparent); }
  .lj-desligado { opacity: .72; }
  .lj-detalhe td { border-block-start: 0; padding-block-start: 0; }
  .lj-detalhe + .lj > * { border-block-start: var(--hairline-strong); }
  .atraso { color: var(--danger); font-size: var(--fs--2); white-space: nowrap; }
  .motivo { font-size: var(--fs--1); color: var(--fg-muted); }
  .motivo-ruim { color: var(--danger); font-weight: var(--fw-medium); }
  .miudo { font-size: var(--fs--2); }
  .ok-txt { color: var(--ok); }
  .achado-txt { color: var(--warn); }
  .ruim-txt { color: var(--danger); font-weight: var(--fw-semi); }
  .linha-ruim { background: color-mix(in oklab, var(--danger) 10%, transparent); }
  .hist { margin-block-start: var(--sp-2); }
  .hist summary {
    cursor: pointer; font-size: var(--fs--2); color: var(--fg-muted);
    padding-block: var(--sp-1);
  }
  .tab-hist { margin-block-start: var(--sp-2); }
  /* O ERRO LITERAL, INTEIRO. `text-overflow: ellipsis` aqui seria esconder
     exatamente a parte que diz o que quebrou. */
  .erro-cel { max-inline-size: 42ch; }
  .erro-lit {
    font-family: var(--font-mono); font-size: var(--fs--2); color: var(--danger);
    white-space: pre-wrap; overflow-wrap: anywhere;
  }
  .kpis-jobs .kpi-val { font-variant-numeric: tabular-nums; }
  .kpi-atrasado .kpi-val, .kpi-falhou .kpi-val, .kpi-nunca_rodou .kpi-val { color: var(--danger); }
  .kpi-ok .kpi-val { color: var(--ok); }
  .kpi-andamento .kpi-val { color: var(--info); }
  .kpi-desconhecido .kpi-val { color: var(--warn); }
  .veredito-falhou { border-inline-start-color: var(--danger); }
  .aba-ops { border-color: var(--border-strong); }

  /* --------------------------------------------- carimbo do veredito (tela 1) --
     "De quando e aquele numero", colado NO numero. Ver `carimboDoVeredito()`. */
  .carimbo {
    font-size: var(--fs--1); color: var(--fg-muted);
    margin-block-start: var(--sp-2);
  }
  .carimbo-vazio { color: var(--fg-subtle); }
  .carimbo-velho {
    color: var(--danger); font-weight: var(--fw-medium);
    padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm);
    border-inline-start: 3px solid var(--danger);
    background: color-mix(in oklab, var(--danger) 12%, transparent);
  }

  /* ---------------------------------------------------------------- login -- */
  .login-caixa {
    max-inline-size: 26rem; margin: var(--sp-20) auto; padding: var(--sp-8);
    background: var(--surface); border: var(--hairline);
    border-radius: var(--r-card); box-shadow: var(--sh-2);
  }
  .login-titulo { font-size: var(--fs-3); letter-spacing: var(--tr-h2); }
  .login-titulo span { color: var(--accent); }
  .login-sub { color: var(--fg-muted); font-size: var(--fs--1); margin-block: var(--sp-2) var(--sp-6); }
  .form { display: grid; gap: var(--sp-4); }
  .login-nota { font-size: var(--fs--2); color: var(--fg-subtle); margin-block-start: var(--sp-6); }
}