/* =============================================================================
   Painel de saúde da integração — The Simple Gym.

   🚨 O SISTEMA VISUAL FOI MEDIDO NO SITE DO CLIENTE, não olhado em captura. Fonte:
   `referencias/design-system/tokens.json`, lido de `getComputedStyle` no site real em
   05/09/2026 — o mesmo material que a pasta `agenda/` usa. Foto responde "como
   parece"; só medição responde "que número é".

   O que a medição disse, e que manda neste arquivo:
     · tinta #202020 (não é preto) · papel #fff · cinzas #ededed / #e6e6e6
     · corpo em peso 400, display em 500 — a marca NÃO usa bold em lugar nenhum
     · cinza é RÓTULO, nunca texto corrido
     · raio 15px no desktop, 20px no celular
     · número em mono

   ⚠️ DIVERGÊNCIA DECLARADA E ACEITA: as famílias do site (`swiss-721-bt`,
   `antarctican-mono`) são Adobe Fonts e não podem ser auto-hospedadas. A pilha abaixo
   é a mesma que o protótipo de agendamento usa. Sem esta declaração o portão nasceria
   vermelho por dívida que não é nossa — e vermelho permanente se aprende a ignorar.

   🚨 A TIPOGRAFIA CARREGA UMA DISTINÇÃO, e ela é de significado: **mono é a palavra da
   máquina** (número, endereço, expressão de cron, resposta de API) e **sans é a nossa**
   (a frase que explica). Quem lê aprende sozinho, em duas telas, o que pode ignorar.
   ========================================================================== */

:root {
  /* ---- primitivas: valor cru medido no site ---- */
  --c-branco:    #ffffff;
  --c-tinta-900: #202020;
  --c-cinza-100: #ededed;
  --c-cinza-200: #e6e6e6;

  /* 🚨 O CINZA DE RÓTULO DO SITE (#8a8a8a) REPROVA SOBRE A SUPERFÍCIE SUTIL.
     Medido: 3,45:1 sobre #ffffff (já abaixo de AA) e 2,95:1 sobre #ededed — pior que o
     mínimo de 3:1 de elemento não textual. Como aqui quase todo rótulo vive dentro de
     card cinza, ele foi escurecido até passar nos DOIS fundos: 6,90:1 e 5,89:1.
     Contraste é medido, nunca estimado. */
  --c-cinza-600: #5a5a5a;

  /* ---- cores de estado, todas medidas sobre os dois fundos usados ----
     ok         #1f6b3a → 6,52:1 no branco · 5,57:1 no cinza
     atenção    #7a4f00 → 7,13:1 · 6,09:1
     falha      #b3261e → 6,54:1 · 5,58:1   (o vermelho da marca)
     aguardando #5a5a5a → 6,90:1 · 5,89:1
     inconcl.   #3f5a73 → 7,19:1 · 6,14:1
     🚨 COR NUNCA É O ÚNICO CANAL: todo selo carrega a PALAVRA do estado, cada nó do mapa
     também, e a régua fica escrita ao lado do número. Cor sozinha é veredito que entra
     sem passar pela revisão que o texto recebe. */
  --e-ok:           #1f6b3a;
  --e-atencao:      #7a4f00;
  --e-falha:        #b3261e;
  --e-aguardando:   #5a5a5a;
  --e-inconclusivo: #3f5a73;

  /* ---- semânticas ---- */
  --papel:        var(--c-branco);
  --superficie:   var(--c-cinza-100);
  --linha:        var(--c-cinza-200);
  --tinta:        var(--c-tinta-900);
  --rotulo:       var(--c-cinza-600);
  --acao:         var(--c-tinta-900);
  --acao-texto:   var(--c-branco);

  --fonte: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;
  --fonte-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;

  --t-rotulo: 0.6875rem;  /* 11px */
  --t-mini:   0.75rem;    /* 12px */
  --t-corpo:  0.875rem;   /* 14px — painel é denso; o site usa 15/16 em página de leitura */
  --t-medio:  1.0625rem;  /* 17px */
  --t-titulo: 1.375rem;   /* 22px */
  --t-display: 2rem;      /* 32px */
  /* O corpo do veredito. É o maior salto da escala de propósito: a tela tem UMA
     pergunta, e a resposta dela não disputa atenção com nada. */
  --t-veredito: clamp(1.75rem, 4.6vw, 2.875rem);

  --peso-corpo: 400;
  --peso-display: 500;    /* 🚨 a marca não tem bold. 500 é o máximo. */

  --raio: 15px;
  --raio-mini: 8px;
  --gap: 14px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: var(--peso-corpo) var(--t-corpo)/1.5 var(--fonte);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

/* Foco sempre visível — o painel é operado por teclado com uma mão segurando o café. */
:where(button, summary, a, input):focus-visible {
  outline: 2px solid var(--tinta); outline-offset: 3px; border-radius: var(--raio-mini);
}

/* ------------------------------------------------------------- cabeçalho -- */

.topo {
  position: sticky; top: 0; z-index: 20;
  background: var(--papel);
  border-bottom: 1px solid var(--linha);
  padding: 12px 20px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}

.topo-nome { display: flex; flex-direction: column; }
.topo h1 {
  margin: 0; font-size: var(--t-medio); font-weight: var(--peso-display);
  letter-spacing: -0.01em;
}
.topo .cliente { color: var(--rotulo); font-size: var(--t-mini); }

/* ---- o pulso: a assinatura da tela ----
   🚨 Ele não é enfeite. Enquanto a medição está fresca, ele bate; quando ela para, ele
   para e fica OCO, em vermelho. Um painel de saúde que segue bonito e imóvel depois que
   o observador morreu é o pior defeito possível — este ponto é essa invariante em forma
   visível, e é o que alguém percebe de longe, sem ler.
   ⚠️ MOVIMENTO NUNCA É O ÚNICO CANAL: forma (cheio × oco), cor e a palavra do selo ao
   lado dizem o mesmo. Com `prefers-reduced-motion` só o movimento sai. */
/* 🚨 O PULSO FALA EM TINTA, NÃO NO VERDE DE `ok` — e a diferença apareceu na foto do
   estado quebrado: um ponto verde ao lado do selo FALHA manda dois sinais opostos no
   mesmo canto da tela. Ele não diz "está tudo bem"; diz "a medição está viva". Verde é
   a palavra do SISTEMA; o observador fala na cor da marca. */
.pulso {
  flex: none; width: 11px; height: 11px; border-radius: 50%;
  background: var(--tinta); position: relative;
}
.pulso::after {
  content: ''; position: absolute; inset: -1px; border-radius: 50%;
  border: 1.5px solid var(--tinta);
  animation: bate 2.6s cubic-bezier(.2, .6, .3, 1) infinite;
}
@keyframes bate {
  0%   { transform: scale(1);   opacity: .5; }
  70%  { transform: scale(2.9); opacity: 0; }
  100% { transform: scale(2.9); opacity: 0; }
}
.pulso.parado { background: transparent; border: 2px solid var(--e-falha); }
.pulso.parado::after { display: none; }

.selo-geral {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px;
  font-weight: var(--peso-display); font-size: var(--t-mini);
  letter-spacing: 0.04em; text-transform: uppercase;
  border: 1.5px solid currentColor;
}

.topo .espaco { margin-left: auto; }

/* 🚨 A IDADE DA MEDIÇÃO ANDA SOZINHA de segundo em segundo, sem depender de rede. É o
   único número que a tela recalcula por conta própria, e é ele que denuncia a sonda
   morta. */
.idade { font-family: var(--fonte-mono); font-size: var(--t-mini); color: var(--rotulo); }
.idade strong { font-weight: var(--peso-display); color: var(--tinta); }
.idade.velha strong { color: var(--e-falha); }

.botao {
  font: var(--peso-display) var(--t-mini)/1 var(--fonte);
  padding: 9px 14px; border-radius: 999px; cursor: pointer;
  background: var(--acao); color: var(--acao-texto); border: 1.5px solid var(--acao);
}
.botao.vazado { background: transparent; color: var(--tinta); }
.botao:disabled { opacity: .5; cursor: default; }
/* Alvo de toque: 44px é o mínimo confortável no celular, e o painel é aberto no celular
   quando alguém é acordado por ele. */
@media (max-width: 700px) { .botao { min-height: 44px; } }

/* ------------------------------------------------------------------ base -- */

main { padding: 20px; max-width: 1500px; margin: 0 auto; }

section { margin-bottom: 34px; }

section > h2 {
  margin: 0 0 4px; font-size: var(--t-titulo); font-weight: var(--peso-display);
  letter-spacing: -0.015em;
  display: flex; align-items: baseline; gap: 10px;
}
section > .sub { margin: 0 0 var(--gap); color: var(--rotulo); font-size: var(--t-mini); max-width: 78ch; }

/* ---------------------------------------------------------- o veredito --- */

/* A resposta. Uma frase, num campo generoso de branco, sem caixa nem borda: ela não
   precisa competir com nada porque é a única coisa nesta faixa da tela. */
.veredito { margin: 30px 0 34px; }

.frase {
  margin: 0;
  font-size: var(--t-veredito);
  font-weight: var(--peso-display);
  line-height: 1.06;
  letter-spacing: -0.028em;
  max-width: 20ch;
}
.frase.v-ok           { color: var(--e-ok); }
.frase.v-atencao      { color: var(--tinta); }
.frase.v-inconclusivo { color: var(--tinta); }
.frase.v-falha        { color: var(--e-falha); }

.sob {
  margin: 12px 0 0; max-width: 58ch;
  font-size: var(--t-corpo); color: var(--rotulo);
}

/* ---- as quatro faixas: o índice das seções, com o número em cima ---- */
.faixas { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }

.faixa {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  min-width: 108px; padding: 11px 16px 12px;
  background: var(--superficie); border: 0; border-radius: var(--raio);
  border-left: 4px solid currentColor;
  font-family: var(--fonte); text-align: left; cursor: pointer;
  transition: transform 140ms ease;
}
.faixa .n { font: var(--peso-display) var(--t-display)/1 var(--fonte-mono); }
.faixa .rot {
  font-size: var(--t-rotulo); text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--rotulo);
}
.faixa:not(:disabled):hover { transform: translateY(-2px); }
.faixa:disabled { cursor: default; }
/* 🚨 QUEM PERDE A COR É A FAIXA VAZIA, NÃO A DESLIGADA — e a diferença apareceu na
   primeira foto: "19 no lugar" saiu cinza, porque ela não leva a lugar nenhum (o mapa
   logo abaixo já é a lista) e eu tinha amarrado o cinza ao `:disabled`. A maior boa
   notícia da tela estava pintada como indisponível.
   E o esmaecimento é por COR, nunca por `opacity`: opacidade derruba o contraste do
   número justo quando ele é a boa notícia. */
.faixa.vazia { border-left-color: var(--linha); color: var(--rotulo); }

/* ------------------------------------------------------------- os grupos -- */

.grupo { margin-bottom: 30px; }
.grupo > h2 .conta {
  font: var(--peso-display) var(--t-mini)/1 var(--fonte-mono);
  color: var(--rotulo); letter-spacing: 0;
}
.grupo.g-falha > h2 { color: var(--e-falha); }

.itens { display: flex; flex-direction: column; gap: 10px; }

.item {
  background: var(--superficie); border-radius: var(--raio);
  padding: 14px 16px; border-left: 5px solid var(--linha);
}
.item-topo { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.item-topo .rot {
  margin: 0; font-weight: var(--peso-display); font-size: var(--t-medio);
  letter-spacing: -0.01em;
}
.item-topo .med { font-family: var(--fonte-mono); font-size: var(--t-mini); }
.item-topo .desde {
  margin-left: auto; font-family: var(--fonte-mono); font-size: var(--t-rotulo);
  color: var(--rotulo);
}

/* 🚨 NA TELA LARGA O ITEM VIRA GRADE, e isso não é estética: em fila, o selo, o nome e
   o número passam a começar no MESMO x em todos os cartões, então o olho desce uma
   coluna em vez de caçar o número atrás de um nome de comprimento variável. A primeira
   foto mostrou o oposto — 1.400px de cartão com o conteúdo espremido no terço da
   esquerda e a idade órfã lá na ponta.
   A coluna do selo tem 128px porque "INCONCLUSIVO" em caixa alta com espaçamento mede
   ~117px: medida, não arredondada para um número bonito. */
@media (min-width: 900px) {
  .item-topo {
    display: grid; align-items: baseline; gap: 8px 16px;
    grid-template-columns: 128px minmax(210px, 1fr) minmax(0, 1.7fr) max-content;
  }
  .item-topo .desde { margin-left: 0; text-align: right; }
}

/* ---- divulgação progressiva ----
   🚨 O endereço do worker, o nome do endpoint e a expressão do cron ficam AQUI DENTRO.
   Eles não ajudam quem só quer saber se pode tocar o dia — e na primeira linha empurram
   o número para fora do olhar. Continuam a um clique, e o item QUEBRADO nasce aberto,
   porque ali o leitor é quem vai consertar. */
details > summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: 8px;
  font-size: var(--t-mini); color: var(--rotulo);
}
details > summary::-webkit-details-marker { display: none; }

.seta {
  flex: none; width: 0; height: 0;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  transition: transform 160ms ease;
}
details[open] > summary .seta { transform: rotate(90deg); }

.item-mais { margin-top: 10px; }
.item-mais > .miolo { padding-top: 10px; }

@keyframes revela { from { opacity: 0; transform: translateY(-5px); } }
details[open] > .miolo { animation: revela 170ms ease-out; }

.item-mais dl {
  margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px;
  font-size: var(--t-mini);
}
.item-mais dt {
  color: var(--rotulo); text-transform: uppercase; font-size: var(--t-rotulo);
  letter-spacing: 0.07em;
}
.item-mais dd { margin: 0; max-width: 76ch; }
.item-mais dd.onde { font-family: var(--fonte-mono); }

/* ------------------------------------------------------------ o mapa ----- */

/* O mapa do caminho do dado: origem → miolo → destino. É a resposta visual a
   "observar todos os pontos de contato da integração", e fica ABERTO porque é a peça
   mais legível da tela para quem não é técnico. */
.mapa { display: grid; gap: var(--gap); grid-template-columns: repeat(3, 1fr); align-items: start; }
@media (max-width: 900px) { .mapa { grid-template-columns: 1fr; } }

.coluna > h3 {
  margin: 0 0 8px; font-size: var(--t-rotulo); font-weight: var(--peso-display);
  text-transform: uppercase; letter-spacing: 0.09em; color: var(--rotulo);
}
.coluna { display: flex; flex-direction: column; gap: 8px; }

.no {
  background: var(--superficie); border-radius: var(--raio-mini);
  padding: 10px 12px; display: flex; align-items: center; gap: 10px;
  border-left: 4px solid var(--linha);
}
.no .nome { font-weight: var(--peso-display); font-size: var(--t-mini); min-width: 0; }
.no .valor {
  margin-left: auto; font-family: var(--fonte-mono); font-size: var(--t-rotulo);
  color: var(--rotulo); text-align: right; min-width: 0;
}
/* 🚨 A PALAVRA do estado, não só a cor da borda. O mapa era a exceção que faltava à
   regra declarada lá em cima. */
.no .estado {
  flex: none; font-size: var(--t-rotulo); font-weight: var(--peso-display);
  text-transform: uppercase; letter-spacing: 0.06em;
}

/* --------------------------------------------------------------- gavetas -- */

.fundo > .sub { margin-bottom: 10px; }

.gaveta {
  background: var(--superficie); border-radius: var(--raio);
  padding: 13px 16px; margin-bottom: 8px;
}
.gaveta > summary { font-size: var(--t-corpo); color: var(--tinta); font-weight: var(--peso-display); }
.gaveta > summary .conta {
  font: var(--peso-corpo) var(--t-rotulo)/1 var(--fonte-mono); color: var(--rotulo);
}
.gaveta > .miolo { padding-top: 12px; }
.gaveta .sub { color: var(--rotulo); font-size: var(--t-mini); max-width: 78ch; margin: 0 0 10px; }
.gaveta h3 {
  margin: 16px 0 6px; font-size: var(--t-mini); font-weight: var(--peso-display);
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--rotulo);
}
.gaveta .miolo > h3:first-child { margin-top: 0; }
.gaveta ul { margin: 0 0 8px; padding-left: 18px; max-width: 88ch; }
.gaveta li { margin-bottom: 6px; }
.gaveta p { max-width: 88ch; }
.gaveta code { font-family: var(--fonte-mono); font-size: 0.95em; }

/* --------------------------------------------------------------- tabelas -- */

.rolagem { overflow-x: auto; border-radius: var(--raio-mini); background: var(--papel); }

table { border-collapse: collapse; width: 100%; font-size: var(--t-mini); }
thead th {
  text-align: left; padding: 9px 12px; white-space: nowrap;
  font-weight: var(--peso-display); font-size: var(--t-rotulo);
  text-transform: uppercase; letter-spacing: 0.07em; color: var(--rotulo);
  background: var(--papel); border-bottom: 1px solid var(--linha);
}
tbody td { padding: 10px 12px; border-bottom: 1px solid var(--linha); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
td.num, td.mono { font-family: var(--fonte-mono); white-space: nowrap; }
td.num { text-align: right; }
td .rot { font-weight: var(--peso-display); }
td .regua, td .onde { display: block; color: var(--rotulo); font-size: var(--t-rotulo); margin-top: 3px; }
td .onde { font-family: var(--fonte-mono); }
td .porque { display: block; margin-top: 6px; max-width: 62ch; }

/* --------------------------------------------------------------- estados -- */

.selo {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: var(--t-rotulo); font-weight: var(--peso-display);
  letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap;
  border: 1.5px solid currentColor;
}

.v-ok           { color: var(--e-ok); }
.v-atencao      { color: var(--e-atencao); }
.v-falha        { color: var(--e-falha); }
.v-aguardando   { color: var(--e-aguardando); }
.v-inconclusivo { color: var(--e-inconclusivo); }

.b-ok           { border-left-color: var(--e-ok); }
.b-atencao      { border-left-color: var(--e-atencao); }
.b-falha        { border-left-color: var(--e-falha); }
.b-aguardando   { border-left-color: var(--e-aguardando); }
.b-inconclusivo { border-left-color: var(--e-inconclusivo); }

/* ----------------------------------------------------------------- aviso -- */

.aviso {
  background: var(--superficie); border-left: 5px solid var(--e-falha);
  border-radius: var(--raio); padding: 14px 16px; margin-bottom: var(--gap);
}
.aviso .rot { font-weight: var(--peso-display); font-size: var(--t-medio); }
.aviso .porque { display: block; margin-top: 6px; max-width: 76ch; color: var(--rotulo); }

/* ---------------------------------------------------------------- login --- */

.login-tela { min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
.login-caixa { width: min(360px, 100%); }
.login-caixa h1 { font-size: var(--t-titulo); font-weight: var(--peso-display); margin: 0 0 4px; }
.login-caixa p { color: var(--rotulo); font-size: var(--t-mini); margin: 0 0 20px; }
.login-caixa label { display: block; font-size: var(--t-rotulo); text-transform: uppercase; letter-spacing: 0.07em; color: var(--rotulo); margin-bottom: 5px; }
.login-caixa input {
  width: 100%; padding: 12px; margin-bottom: 14px; font: var(--peso-corpo) var(--t-corpo) var(--fonte);
  background: var(--superficie); border: 1.5px solid transparent; border-radius: var(--raio-mini); color: var(--tinta);
}
.login-caixa input:focus { outline: none; border-color: var(--tinta); }
.login-caixa .botao { width: 100%; padding: 13px; }
.erro { color: var(--e-falha); font-size: var(--t-mini); min-height: 1.4em; margin-top: 10px; }

/* ---------------------------------------------------------------- celular */

@media (max-width: 700px) {
  :root { --raio: 20px; }
  main { padding: 14px; }
  .topo { padding: 12px 14px; gap: 10px; }
  .veredito { margin: 22px 0 26px; }
  /* No celular a faixa vira uma fileira que corre, com o toque de 44px preservado. */
  .faixas { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .faixa { min-width: 96px; }
  /* A idade em linha própria: colada no valor ela vira parte do número
     (`falta GA4_MP_SECRET_RUN assim há 10h`), que é duas informações lidas como uma. */
  .item-topo .med, .item-topo .desde { display: block; width: 100%; margin-left: 0; }
}

/* 🚨 MOVIMENTO REDUZIDO RECEBE O ESTADO FINAL, nunca a ausência de informação. O pulso
   para de bater e continua dizendo a mesma coisa por forma e cor; as gavetas abrem sem
   transição. */
@media (prefers-reduced-motion: reduce) {
  .pulso::after { animation: none; opacity: .35; transform: none; }
  details[open] > .miolo { animation: none; }
  .seta, .faixa { transition: none; }
  .faixa:not(:disabled):hover { transform: none; }
}