/* ============================================================================
   sistema.css — V2 do console. Papel e tinta.

   NÃO é uma evolução do design.css: é outro sistema, em arquivos separados,
   rodando em rotas separadas (/v2). O antigo continua no ar intocado até a
   troca ser decidida.

   ---------------------------------------------------------------------------
   DE ONDE VEM
     A linguagem é a do precificacaocerta/v2: papel pautado, tinta preta,
     grotesca pesada no título, marca-texto lima, carimbo vermelho, micro-
     rótulo em mono caixa-alta. Os tokens são os mesmos valores daquele
     arquivo — não uma aproximação.

   O QUE MUDA AO TRAZER PARA UM CONSOLE
     Aquilo é página de venda: herói de 100px, uma coluna, texto grande. Aqui é
     tela de trabalho com tabela de dezenas de milhares de linhas e sondagem a
     cada 5 s. O que transfere é a MATÉRIA (papel, tinta, régua preta, sombra
     dura, mono caixa-alta) e a ESCALA TIPOGRÁFICA. O que não transfere é a
     dobra de marketing.

   A PAUTA É O GRID
     O papel tem linha a cada 40px. Isso deixa de ser textura e vira a régua do
     ritmo vertical: seção a seção anda de 40 em 40, e o conteúdo assenta na
     pauta em vez de flutuar sobre ela.

   RESSALVA REGISTRADA
     Tema CLARO numa operação que roda em sala escura o turno inteiro. Foi por
     isso que a V1 travou escuro. A decisão de vir para o claro é do dono do
     produto, com o motivo dito; fica escrito aqui para não se perder.
   ========================================================================= */

:root {
  /* ---- papel e tinta: valores idênticos aos do precificacaocerta ---- */
  --papel:     #F2EBDC;
  --papel-2:   #E8DFCB;
  --papel-3:   #FBF7EC;
  --tinta:     #0E0E0C;
  --tinta-2:   #1A1916;
  --dinheiro:  #1F5D3A;
  --dinheiro-f:#0F3D24;
  --lima:      #C9F25C;
  --carimbo:   #D8351B;
  --cinza:     #6B6660;
  --cinza-2:   #9C968D;

  /* ---- estado: dentro da paleta do papel, não cores de dashboard ----
     Verde é o dinheiro da própria identidade; vermelho é o carimbo; o âmbar é
     puxado do papel escurecido para não introduzir uma sexta matiz. */
  --ok:        var(--dinheiro);
  --atencao:   #A8721B;
  --erro:      var(--carimbo);

  /* ---- pauta ---- */
  --pauta:     40px;   /* a linha do papel: o ritmo anda em múltiplos disto */
  --p1:         4px;
  --p2:         8px;
  --p3:        12px;
  --p4:        20px;
  --p5:        40px;
  --p6:        80px;

  /* ---- régua: preta e sólida, não hairline translúcida ---- */
  --regua:     1.5px solid var(--tinta);
  --regua-fina:1px solid rgba(14, 14, 12, 0.16);

  --sombra-dura: 6px 6px 0 var(--tinta);
  --sombra-lima: 6px 6px 0 var(--lima), 6px 6px 0 1.5px var(--tinta);

  --fonte:       'Manrope', ui-sans-serif, system-ui, sans-serif;
  --fonte-titulo:'Archivo', var(--fonte);
  --fonte-mono:  'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --curva: cubic-bezier(0.23, 1, 0.32, 1);
}

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

/* `[hidden]` do navegador é `display: none` na folha do AGENTE — qualquer
   `display` nosso, por ser regra de autor, vence. Quem paga isso é todo
   elemento que esconde por atributo e por acaso tem classe com display: o
   painel de decisão `#and-pausado` (`.acoes { display: flex }`) ficava VISÍVEL
   em job rodando, e o clique em "Continuar sem teto" batia num job que não
   estava pausado — 400 na cara do usuário. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(56px + var(--p4)); }

body {
  margin: 0;
  font-family: var(--fonte);
  font-size: 15px;
  line-height: 1.55;
  color: var(--tinta);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
}

/* A PAUTA. Camada fixa, promovida ao compositor: não repinta na rolagem, então
   a tabela de dezenas de milhares de linhas continua barata. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  transform: translateZ(0);
  background-image: repeating-linear-gradient(to bottom,
    transparent 0, transparent calc(var(--pauta) - 1px),
    rgba(14, 14, 12, 0.05) calc(var(--pauta) - 1px), rgba(14, 14, 12, 0.05) var(--pauta));
}
body > * { position: relative; z-index: 1; }


/* ---------------------------------------------------------------------------
   TIPOGRAFIA
   Archivo só onde há peso a carregar: título de página, título de seção e
   número grande. Manrope no resto. Mono no dado e no micro-rótulo.
   ------------------------------------------------------------------------ */

/* Archivo no lugar do Bricolage: mesma presença de grotesca pesada, mas com
   contraforma aberta e altura-x maior — o Bricolage fechava os buracos das
   letras no peso 800 e cansava a leitura em título grande. O tracking afrouxa
   junto (-0.038 -> -0.028): o Archivo já nasce mais fechado e não precisa
   daquele aperto todo. */
h1, h2, h3 { margin: 0; font-family: var(--fonte-titulo); font-weight: 800; letter-spacing: -0.028em; }
h1 { font-size: clamp(34px, 4vw, 52px); line-height: 1.0; }
h2 { font-size: clamp(22px, 2.2vw, 29px); line-height: 1.05; }
h3 { font-size: 17px; line-height: 1.15; letter-spacing: -0.02em; }

p { margin: 0; }
a { color: var(--tinta); text-underline-offset: 0.18em; text-decoration-thickness: 1.5px; }

/* O marca-texto da referência: lima atrás da palavra, não em volta dela. */
.grifo {
  background: linear-gradient(to bottom, transparent 12%, var(--lima) 12%, var(--lima) 92%, transparent 92%);
  padding: 0 0.12em;
}

/* .mark do precificacaocerta: mono 11px, tracking .22em, contorno. É o único
   lugar do sistema com caixa alta — e ele É a caixa alta, não um acidente. */
.mark {
  display: inline-block;
  padding: 4px 10px;
  border: 1.5px solid currentColor;
  font-family: var(--fonte-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
}
.mark-lima    { color: var(--dinheiro-f); border-color: var(--dinheiro); background: var(--lima); }
.mark-carimbo { color: var(--papel-3); border-color: var(--carimbo); background: var(--carimbo); }
.mark-tinta   { color: var(--tinta); }

.rotulo {
  display: block;
  font-family: var(--fonte-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cinza);
}
.apoio { color: var(--cinza); font-size: 14px; line-height: 1.5; max-width: 68ch; }
.mono  { font-family: var(--fonte-mono); font-variant-numeric: tabular-nums; }
.num   { font-family: var(--fonte-mono); font-variant-numeric: tabular-nums; }

::selection { background: var(--lima); color: var(--tinta); }
:focus-visible { outline: 2.5px solid var(--tinta); outline-offset: 2px; }


/* ---------------------------------------------------------------------------
   CASCA
   ------------------------------------------------------------------------ */

.topo {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: var(--p4);
  min-height: 56px;
  padding: 0 var(--p5);
  background: var(--papel);
  border-bottom: var(--regua);
}

/* A MARCA é a logo do atendro-ai, não um logotipo próprio.
   O azul dela é a única cor de fora desta paleta que entra no sistema, e entra
   por ser marca: um símbolo de identidade não se repinta para caber no tema —
   é ele que diz de quem é o produto. A regra de "nenhuma sexta matiz" continua
   valendo para tudo o que informa estado.
   O PNG é o dobro do tamanho exibido (679x138 para ~22px de altura), então
   sobra densidade de resto em tela retina. */
.marca { display: flex; align-items: center; flex: none; }
.marca img { display: block; height: 22px; width: auto; }
@media (max-width: 720px) { .marca img { height: 19px; } }

/* AS SEÇÕES SÃO BOTÕES — um comando segmentado, não uma fila de links.
   A construção é a mesma de .numeros e da cabeça da .tabela: moldura preta
   sólida por fora, régua fina por dentro. Não é um idioma novo inventado para
   a navegação; é o que o resto da tela já faz.
   E a seção aberta é PREENCHIDA de tinta em vez de sublinhada: o sublinhado de
   2.5px obrigava a comparar item por item para achar onde se estava — o bloco
   preto se acha antes de ler. */
.abas {
  display: flex; align-items: stretch;
  min-width: 0;                 /* pode encolher: o que sobra rola dentro dela */
  overflow-x: auto;
  border: var(--regua);
  scrollbar-width: none;
  /* SOMBRA DE ROLAGEM. Estreitando a janela, o segmento passa a rolar — e um
     segmento cortado rente à moldura parece um segmento que ACABOU ali:
     "Configurações" simplesmente não existia mais.
     As duas primeiras camadas são sombras presas à moldura; as duas seguintes
     são tampas da cor do fundo que rolam JUNTO com o conteúdo (`local`) e
     cobrem a sombra do lado que já chegou ao fim. O resultado é que a sombra
     aparece só do lado onde ainda há aba escondida, sem uma linha de script.
     A tampa tem PLATÔ opaco (55%) antes de desbotar: duas rampas de alfa
     sobrepostas nunca se anulam, e sem o platô sobrava um cinza de 3% na borda
     esquerda mesmo com o segmento inteiro à vista. */
  background:
    /* as tampas vêm PRIMEIRO: no `background` a primeira camada é a de cima, e
       uma tampa pintada por baixo da sombra não tapa nada */
    linear-gradient(to right, var(--papel-3) 55%, rgba(251, 247, 236, 0)) 0 0 / 26px 100% no-repeat local,
    linear-gradient(to left,  var(--papel-3) 55%, rgba(251, 247, 236, 0)) 100% 0 / 26px 100% no-repeat local,
    linear-gradient(to right, rgba(14, 14, 12, 0.16), rgba(14, 14, 12, 0)) 0 0 / 18px 100% no-repeat scroll,
    linear-gradient(to left,  rgba(14, 14, 12, 0.16), rgba(14, 14, 12, 0)) 100% 0 / 18px 100% no-repeat scroll,
    var(--papel-3);
}
.abas::-webkit-scrollbar { display: none; }
.aba {
  display: inline-flex; align-items: center;
  padding: 0 var(--p3); min-height: 34px;
  border-left: var(--regua-fina);
  font-size: 13px; font-weight: 700; color: var(--cinza);
  text-decoration: none; white-space: nowrap;
  transition: background 120ms var(--curva), color 120ms var(--curva);
}
.aba:first-child { border-left: 0; }
@media (hover: hover) and (pointer: fine) {
  .aba:hover { background: var(--papel-2); color: var(--tinta); }
}
.aba-ativa, .aba-ativa:hover { background: var(--tinta); color: var(--papel-3); }
/* O foco do teclado é traço externo: dentro do segmento ele encostaria na
   divisória do vizinho e viraria ruído. */
.aba:focus-visible { outline-offset: -3px; }
.aba-ativa:focus-visible { outline-color: var(--papel-3); }

.espaco { flex: 1 1 auto; }
.estado-sistema {
  display: flex; align-items: center; gap: var(--p4); flex: none;
  font-family: var(--fonte-mono); font-size: 11px; color: var(--cinza);
}
/* Sobe de 900 para 1180: as seções em botão ocupam mais que os links soltos, e
   entre 900 e 1180 quem perdia espaço era a navegação — que é o que se usa. */
@media (max-width: 1180px) { .estado-sistema { display: none; } }

/* "AO VIVO" — o selo de transmissão.
   Ele não reporta um número: reporta que ESTA tela está recebendo agora. É a
   mesma coisa que o bloco vermelho de um estúdio no ar informa, então usa a
   mesma forma — carimbo cheio, caixa alta apertada em mono, ponto pulsando à
   esquerda. A tipografia é a de .tabela th (10.5px / 0.16em), que já é o
   micro-rótulo desta casa.
   Fora do ar ele NÃO some: perde a cor e o pulso e fica em contorno cinza. Um
   indicador que desaparece deixa a dúvida de se parou ou nunca existiu, e os
   vizinhos ainda dançam de lugar. */
.no-ar {
  display: inline-flex; align-items: center; gap: 6px;
  /* Menos à direita que à esquerda: o tracking de 0.16em sobra depois da
     última letra e, numa caixa cheia deste tamanho, joga o texto para a
     esquerda se os dois lados forem iguais. */
  padding: 3px 5px 3px 7px;
  border: 1.5px solid var(--carimbo);
  background: var(--carimbo); color: var(--papel-3);
  /* 500, não 700: a folha do Google só traz a JetBrains Mono em 400 e 500, e
     pedir 700 aqui rende negrito sintético — que a 10.5px vira borrão. É o
     mesmo peso de .tabela th, que é este mesmo micro-rótulo. */
  font-family: var(--fonte-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  white-space: nowrap;
  transition: background 200ms var(--curva), border-color 200ms var(--curva),
              color 200ms var(--curva);
}
.no-ar i {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex: none;
  animation: no-ar-pulso 1.5s var(--curva) infinite;
}
@keyframes no-ar-pulso { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }

.no-ar-parado {
  background: transparent; border-color: var(--cinza-2); color: var(--cinza-2);
}
.no-ar-parado i { animation: none; opacity: 0.5; }

.folha { max-width: 1360px; margin: 0 auto; padding: var(--p5) var(--p5) var(--p6); }

/* A seção anda na pauta: 40px entre uma e outra, sempre. */
.secao { margin-top: var(--p5); }
.folha > .secao:first-child { margin-top: 0; }

.cabeca {
  display: flex; align-items: flex-start; gap: var(--p4);
  flex-wrap: wrap; margin-bottom: var(--p4);
}
.cabeca > :first-child { flex: 1 1 22rem; min-width: 0; }
.cabeca .apoio { margin-top: var(--p2); }
.acoes { display: flex; gap: var(--p2); flex-wrap: wrap; flex: none; }


/* ---------------------------------------------------------------------------
   CAIXA — a moldura preta que substitui o "cartão"
   ------------------------------------------------------------------------ */

.caixa {
  background: rgba(251, 247, 236, 0.72);
  border: var(--regua);
}
.caixa-sombra { box-shadow: var(--sombra-dura); }


/* ---------------------------------------------------------------------------
   NÚMEROS DO DIA
   ------------------------------------------------------------------------ */

.numeros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  /* Translúcido de propósito: a pauta do papel atravessa o bloco e o conteúdo
     assenta na folha, em vez de flutuar numa placa opaca por cima dela. */
  background: rgba(251, 247, 236, 0.72);
  border: var(--regua);
}
.numeros > * { padding: var(--p4); border-left: var(--regua-fina); }
.numeros > *:first-child { border-left: 0; }
.numeros .rotulo { margin-bottom: var(--p1); }
.numeros .valor {
  display: block;
  font-family: var(--fonte-titulo); font-weight: 800;
  font-size: 38px; line-height: 1; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}


/* ---------------------------------------------------------------------------
   TABELA
   ------------------------------------------------------------------------ */

.rolagem { overflow-x: auto; border: var(--regua); background: rgba(251, 247, 236, 0.82); }
.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }

.tabela th {
  position: sticky; top: 0; z-index: 1;
  padding: var(--p2) var(--p3);
  background: var(--tinta); color: var(--papel);
  font-family: var(--fonte-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  text-align: left; white-space: nowrap;
}
.tabela td {
  padding: var(--p3);
  border-top: var(--regua-fina);
  color: var(--tinta-2);
  white-space: nowrap; max-width: 24rem; overflow: hidden; text-overflow: ellipsis;
}
.tabela tbody tr:first-child td { border-top: 0; }
.tabela td.num, .tabela th.num { text-align: right; }
.tabela td strong { font-weight: 700; color: var(--tinta); }
.tabela td .sub { display: block; font-family: var(--fonte-mono); font-size: 11.5px; color: var(--cinza); }
@media (hover: hover) and (pointer: fine) {
  .tabela tbody tr:hover td { background: var(--papel-2); }
}
.vazio { padding: var(--p5); text-align: center; color: var(--cinza); }


/* ---------------------------------------------------------------------------
   ESTADO — ponto + rótulo, na tinta do estado
   ------------------------------------------------------------------------ */

.estado { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.estado::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.estado-ok      { color: var(--dinheiro); }
.estado-atencao { color: var(--atencao); }
.estado-erro    { color: var(--carimbo); }
.estado-off     { color: var(--cinza-2); }


/* ---------------------------------------------------------------------------
   BOTÃO — sombra dura deslocada, do precificacaocerta
   ------------------------------------------------------------------------ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--p2);
  min-height: 38px; padding: 0 var(--p4);
  border: var(--regua); background: var(--papel-3); color: var(--tinta);
  font-family: var(--fonte); font-size: 14px; font-weight: 700;
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: transform 120ms var(--curva), box-shadow 120ms var(--curva);
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--tinta); }
}
.btn:active { transform: translate(0, 0); box-shadow: none; }

.btn-forte { background: var(--tinta); color: var(--papel-3); }
@media (hover: hover) and (pointer: fine) {
  .btn-forte:hover { box-shadow: 4px 4px 0 var(--lima), 4px 4px 0 1.5px var(--tinta); }
}
.btn-perigo { color: var(--carimbo); border-color: var(--carimbo); }

/* SAIR não é uma seção do produto: é uma ação, e a última que alguém quer
   errar no meio de um turno. Sai da navegação e vira botão, na outra ponta da
   barra. Em repouso é o botão neutro — não se pede atenção para uma saída —,
   e só a sombra do hover vem no vermelho do carimbo, avisando o que é.
   Mora AQUI, e não junto do resto do cabeçalho: `.btn` é definido nesta seção
   e sobrescreveria borda e sombra de qualquer variante declarada antes dela. */
@media (hover: hover) and (pointer: fine) {
  .btn-sair:hover { border-color: var(--carimbo); color: var(--carimbo);
                    box-shadow: 4px 4px 0 var(--carimbo); }
}
.btn:disabled { color: var(--cinza-2); border-color: var(--cinza-2); cursor: not-allowed; transform: none; box-shadow: none; }
.btn-pequeno { min-height: 30px; padding: 0 var(--p3); font-size: 12.5px; }
@media (pointer: coarse) { .btn, .btn-pequeno { min-height: 44px; } }


/* ---------------------------------------------------------------------------
   CAMPO
   ------------------------------------------------------------------------ */

.campo {
  width: 100%; min-height: 38px; padding: 6px var(--p3);
  border: var(--regua); background: var(--papel-3); color: var(--tinta);
  font-family: var(--fonte); font-size: 14px;
}
.campo:focus { outline: none; box-shadow: 3px 3px 0 var(--lima), 3px 3px 0 1.5px var(--tinta); }
::placeholder { color: var(--cinza-2); }


/* ---------------------------------------------------------------------------
   AVISO
   ------------------------------------------------------------------------ */

.aviso { padding: var(--p3) var(--p4); border: var(--regua); border-left-width: 6px; background: var(--papel-3); font-size: 14px; }
.aviso-erro    { border-left-color: var(--carimbo); }
.aviso-atencao { border-left-color: var(--atencao); }
.aviso-ok      { border-left-color: var(--dinheiro); }


/* ---------------------------------------------------------------------------
   BARRA DE PROGRESSO
   ------------------------------------------------------------------------ */

.progresso { display: inline-block; vertical-align: middle; width: 110px; height: 10px; border: var(--regua); background: var(--papel-2); overflow: hidden; }
.progresso i { display: block; height: 100%; background: var(--lima); transform-origin: left; }


/* ---------------------------------------------------------------------------
   PREFERÊNCIAS
   ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn:hover { transform: none; }
  /* O pulso do "ao vivo" some, a cor fica: o vermelho já diz que está no ar. */
  .no-ar i { animation: none; }
}
@media (prefers-contrast: more) {
  :root { --cinza: #4A463F; --cinza-2: #6B6660; --regua-fina: 1px solid rgba(14,14,12,.34); }
}
@media (max-width: 720px) {
  .folha { padding: var(--p4) var(--p4) var(--p5); }
  .topo { padding: 0 var(--p4); }
}