/* ============================================================================
   Cia do Sorriso — PELE DEFINITIVA  ("Negatoscopio")
   ----------------------------------------------------------------------------
   Sobrepoe estilo.css. Nao altera uma linha de layout, de menu ou de conteudo:
   grid, colunas, ordem e textos sao exatamente os que ja estavam aprovados.

   A IDEIA, em uma frase: a tela e um APARELHO. O chassi escuro e o corpo do
   negatoscopio; as fichas brancas sao as chapas acesas em cima dele; e a mesma
   sonda graduada mede tudo que o aparelho mede — minutos na fila, horas na
   cadeira, a meta dentro de cada indicador.

   As cinco decisoes que sustentam o acabamento:

   1. MATERIAL, nao cor. Campo fundo com grao, papel com aresta de luz por
      dentro e rampa de sombra de cinco paradas com a cor casada ao fundo.
      Sombra cinza lava a cor; sombra da cor do fundo escurece sem lavar.
   2. A COR MORA NA ESCALA. A zona vermelha e impressa no mostrador a partir da
      meta e a agulha e escura em qualquer estado. Barra vermelha cheia em cinco
      fichas seguidas e papel de parede: com tudo em alarme, nada esta em alarme.
   3. SERIFA = quem e a pessoa e em que tela estou. SANS = tudo que o sistema
      mede, conta ou faz. Numero e instrumento: grotesca 700, algarismo tabular,
      entrelinha fechada. Numero em serifa e enfeite.
   4. UM MOMENTO DE MOVIMENTO, nao movimento espalhado. As fichas sobem uma vez
      quando a tela troca. O resto e resposta ao toque: apertar afunda, passar o
      mouse acende a aresta. Tudo desligado em prefers-reduced-motion.
   5. NADA DE PADRAO DE FABRICA. Barra de rolagem, anel de foco, selecao de
      texto e estado vazio sao desenhados. Sao os quatro lugares onde a tela
      denuncia que ninguem cuidou dela.
   ========================================================================== */

:root{
  /* --- o chassi -------------------------------------------------------- */
  --marfim:#0C1114;
  --tinta:#161E22;
  --tinta2:#1E272C;
  --tinta3:#334046;
  --tinta-txt:#D5DDE1;
  --tinta-txt2:#818E96;
  --creme:#FBF7F0;

  /* --- a chapa acesa --------------------------------------------------- */
  --papel:#FFFCF7;
  --papel2:#F3EDE3;
  --linha:#DED4C3;
  --linha2:#EBE3D7;

  --grafite:#141A1D;
  --aco:#4E5A63;
  --aco2:#858F98;

  --r-xs:4px; --r-sm:7px; --r-md:10px; --r-lg:16px; --r-xl:22px;
  --raio:var(--r-lg);

  /* a chapa: fio de luz na aresta, sombra funda e halo quente por fora.
     O halo e o que faz o branco parecer ACESO e nao apenas claro. */
  --lev-1:0 1px 2px rgba(0,0,0,.5),0 2px 4px rgba(0,0,0,.3);
  --lev:
    0 1px 2px rgba(0,0,0,.55),
    0 4px 10px rgba(0,0,0,.40),
    0 14px 30px rgba(0,0,0,.38),
    0 30px 60px rgba(0,0,0,.30),
    0 0 70px -26px rgba(255,244,222,.22);
  --lev-alta:
    0 2px 4px rgba(0,0,0,.6),
    0 10px 24px rgba(0,0,0,.5),
    0 28px 60px rgba(0,0,0,.5),
    0 60px 110px rgba(0,0,0,.45),
    0 0 110px -30px rgba(255,244,222,.30);
  --aresta:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 0 0 1px rgba(255,250,238,.10);

  /* fibra do papel e grao do campo, em SVG: escala com a tela e nao pixela */
  --grao-campo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='.30'/%3E%3C/svg%3E");
  --fibra-papel:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23f)' opacity='.16'/%3E%3C/svg%3E");

  --curva:cubic-bezier(.2,.7,.3,1);
}

/* ============================================================== o chassi ===*/
body{
  color:var(--tinta-txt);
  background-color:#0C1114;
  background-image:var(--grao-campo),
    radial-gradient(125% 90% at 50% -12%,#141D22 0%,#0C1417 48%,#05080A 100%);
  background-size:160px 160px,100% 100%;
}

/* A coluna e o chassi LEVANTADO e o campo a direita e o poco fundo. Os dois
   escuros precisam de distancia visivel entre si, senao a metafora se perde e
   sobra so uma tela escura. */
.caixa{
  background:linear-gradient(184deg,#232E34 0%,#1A2429 55%,#141D22 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    inset -1px 0 0 rgba(255,255,255,.06),
    18px 0 44px -16px rgba(0,0,0,.75);
  position:relative;z-index:3;
}
.marca b{letter-spacing:-.028em}
.marca span{border-color:rgba(224,132,148,.34)}

.estado-casa{
  background:rgba(255,255,255,.05);border-radius:var(--r-md);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 0 0 1px rgba(255,255,255,.05);
}

/* item de menu: a marca do ativo entra pela esquerda como um trinco */
.nav button{border-radius:var(--r-sm);position:relative;transition:background .14s var(--curva),color .14s}
.nav button:before{
  content:"";position:absolute;left:0;top:50%;width:2px;height:0;margin-top:0;
  background:var(--carmim);border-radius:0 2px 2px 0;
  transition:height .18s var(--curva),margin-top .18s var(--curva);
}
.nav button[aria-current=page]{
  background:rgba(255,255,255,.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),inset 0 0 0 1px rgba(255,255,255,.07);
}
.nav button[aria-current=page]:before{height:18px;margin-top:-9px}
.nav .badge{font-variant-numeric:tabular-nums}
.equipe-fila .av{border-color:#1A2429}

/* ======================================================= texto no chassi ===
   Tudo que fica direto no campo escuro precisa inverter. */
.chapeu h1{color:var(--creme);font-size:29px;letter-spacing:-.035em}
.chapeu p,.vivo{color:var(--tinta-txt2)}
.secao-topo h2{color:var(--creme)}
.secao-topo p{color:var(--tinta-txt2)}

/* ========================================================= a chapa acesa ===
   Nao e branco chapado: e branco com a luz entrando por cima e fibra de papel.
   E o gradiente de topo que faz ler como chapa iluminada por tras. */
.painel,.quadro,.kpi,.mini,.cartao,.portal-cartao{
  box-shadow:var(--aresta),var(--lev);
  color:var(--grafite);
  background-image:var(--fibra-papel),
    linear-gradient(180deg,rgba(255,255,255,.85) 0%,rgba(255,255,255,0) 180px);
  background-size:150px 150px,100% 100%;
}
.painel,.quadro,.kpi,.mini{border-radius:var(--r-lg)}
.cartao,.portal-cartao{border-radius:var(--r-xl);box-shadow:var(--aresta),var(--lev-alta)}

/* ============================================================ tipografia ===*/
.quadro-topo h2,.secao-topo h2,.fila-topo h2{
  font-family:var(--corpo);font-weight:700;letter-spacing:-.022em;
}
.quadro-topo h2{font-size:15.5px}
.secao-topo h2{font-size:17px}
.fila-topo h2{font-size:14.5px}

.kpi .v,.termo .val,.cand .nota{
  font-family:var(--corpo);font-weight:700;
  font-variant-numeric:tabular-nums;letter-spacing:-.055em;
}
.kpi .v{font-size:42px;line-height:.92}
.kpi.principal .v{font-size:54px}
.kpi .v small{font-weight:600;letter-spacing:-.01em}
.termo .val{font-size:50px;line-height:.86}
.cand .nota{font-size:24px;letter-spacing:-.045em}

/* inicial em circulo, rotulo de cadeira e nome em tabela sao DADO, nao
   nome proprio: saem da serifa */
.av{font-family:var(--corpo);font-weight:700;letter-spacing:.01em}

.pessoa{font-family:var(--corpo);font-weight:600;letter-spacing:-.012em}
/* nome de gente continua serifa: e o unico lugar onde ela ainda e display */
.nome{font-size:16px;letter-spacing:-.02em}
.ch-nome{font-size:19px;letter-spacing:-.03em}

/* numero nao pode dancar quando o valor muda */
.marcador,.par dd,tbody td,.n,.badge,.leg,.balao .h,.msg-interna .h{
  font-variant-numeric:tabular-nums;
}
/* rotulo em versalete perde a ultima letra de espaco: acerta o eixo optico */
.olho,.bloco h4,thead th,.nav .grupo,.dia span,.selo-robo{padding-right:.18em}

/* ============================================================== controles ===
   🚨 Botao de fundo claro declara a PROPRIA cor de texto. Sem isso ele herda a
   cor de quem o contem: dentro da ficha funciona, solto no campo escuro vira
   creme sobre creme e some. O codigo fica "certo" e so o print mostra. */
.bt{
  border-radius:var(--r-sm);border-color:transparent;background:var(--papel2);
  color:var(--grafite);font-weight:600;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 0 0 1px rgba(64,46,24,.10);
  transition:background .13s,box-shadow .13s,transform .08s;
}
.bt:hover{background:#EAE1D3;box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 0 0 1px rgba(64,46,24,.18)}
.bt:active{transform:translateY(1px);box-shadow:inset 0 1px 2px rgba(64,46,24,.2),inset 0 0 0 1px rgba(64,46,24,.2)}
/* uma acao forte por tela: a secundaria perde a borda e o peso */
.bt.forte{
  background:linear-gradient(180deg,#242E33 0%,#131C20 100%);color:var(--creme);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 0 0 1px rgba(0,0,0,.55),
             0 1px 2px rgba(0,0,0,.35),0 4px 12px rgba(0,0,0,.35);
}
.bt.forte:hover{background:linear-gradient(180deg,#2D383E 0%,#182226 100%)}
.bt.forte:active{transform:translateY(1px);box-shadow:inset 0 1px 3px rgba(0,0,0,.5),inset 0 0 0 1px rgba(0,0,0,.6)}
.bt.quieto{background:none;box-shadow:none}
.bt.quieto:hover{background:rgba(64,46,24,.07);box-shadow:none}
.bt.perigo{background:var(--carmim-suave);color:var(--carmim);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 0 0 1px var(--carmim-borda)}

.campo-texto,.busca input,.campo{
  border-color:transparent;border-radius:var(--r-sm);
  box-shadow:inset 0 1px 3px rgba(64,46,24,.12),inset 0 0 0 1px rgba(64,46,24,.12);
  transition:box-shadow .14s;
}
.campo{border-radius:var(--r-md)}
.campo-texto:focus,.busca input:focus{
  outline:none;
  box-shadow:inset 0 1px 3px rgba(64,46,24,.10),inset 0 0 0 1px var(--grafite),0 0 0 3px rgba(20,26,29,.12);
}
.campo:focus-within{box-shadow:inset 0 1px 3px rgba(64,46,24,.10),inset 0 0 0 1px var(--grafite),0 0 0 3px rgba(20,26,29,.10)}
.campo textarea::placeholder,.busca input::placeholder{color:var(--aco2)}

/* ⭐ RODADA 6: a aba e' TEXTO, e texto nao tem caixa. O anel de 1px que morava
   aqui (inset box-shadow) era invisivel para a medicao de fundo e de borda, mas
   o olho lia PILULA no print — foi assim que a versao anterior foi reprovada.
   A aba fica sem sombra nenhuma: quem marca a ativa e' o traco de 2px. */
.aba-fila{box-shadow:none;border-radius:0;transition:color .13s,border-color .13s}
.aba-fila[aria-selected=true]{box-shadow:none}
.fila-filtros{border-color:transparent;border-radius:var(--r-md);box-shadow:inset 0 0 0 1px rgba(64,46,24,.12)}
/* O funil e' fantasma; ganha a moldura da casa so' quando ha' filtro ligado. */
.funil{border-radius:var(--r-sm);transition:background .13s,color .13s}
.funil.tem{border-color:transparent;box-shadow:inset 0 0 0 1px rgba(64,46,24,.16)}
/* O popover das respostas rapidas e' papel suspenso: mesma familia do cartao. */
.pop-rapidas{border-color:transparent;border-radius:var(--r-lg);box-shadow:var(--aresta),var(--lev-alta)}
.rap-item,.rap-gerenciar{border-radius:var(--r-sm);transition:background .12s}
.ic-fantasma{border-radius:var(--r-sm);transition:background .13s,color .13s}
/* A barra do audio e' papel de trabalho, nao alarme: aresta por dentro, sem cor. */
.micbar{border-color:transparent;border-radius:var(--r-md);box-shadow:inset 0 0 0 1px rgba(64,46,24,.12)}
.etiqueta,.sit,.dono{border-radius:var(--r-xs)}
/* "SEM DONO" e rotulo, nao botao: perde a borda e para de disputar com o alarme */
.sem-dono{border-color:transparent;box-shadow:inset 0 0 0 1px rgba(168,17,43,.16)}
/* (os chips permanentes de resposta rapida morreram na rodada 6 — o estilo deles
   saiu junto; a lista agora vive no popover do raio, estilizada acima) */

/* ================================================================= sonda ===
   ⭐ O elemento-assinatura. Escala gravada, marca da meta, cabeca chata e
   ZONA VERMELHA impressa no mostrador a partir da meta — como em qualquer
   instrumento de verdade. A agulha e escura em todos os estados: le-se "a
   agulha esta funda na zona", e nao "tem cinco barras vermelhas na tela". */
.trilho{
  height:8px;border-radius:2px;
  background:
    linear-gradient(90deg,transparent 0 var(--meta,33.33%),rgba(168,17,43,.15) var(--meta,33.33%) 100%),
    repeating-linear-gradient(90deg,rgba(64,46,24,.20) 0 1px,transparent 1px 10%),
    var(--papel2);
  box-shadow:inset 0 1px 2px rgba(64,46,24,.18),inset 0 0 0 1px rgba(64,46,24,.11);
}
.trilho:before{content:none}
.trilho i{border-radius:2px 0 0 2px;box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
.ok .trilho i,.atencao .trilho i,.estourou .trilho i,.quieto .trilho i{background:#3B454B}
.quieto .trilho i{background:#9AA3A9}
.trilho i:after{                                  /* cabeca chata, nao bolinha */
  width:3px;height:14px;border-radius:1px;margin-top:-7px;right:-1px;
  background:var(--grafite);
  box-shadow:0 0 0 2px var(--papel),0 1px 3px rgba(64,46,24,.4);
}
.estourou .trilho i:after{background:var(--carmim)}
.item[aria-current=true] .trilho i:after{box-shadow:0 0 0 2px var(--papel2),0 1px 3px rgba(64,46,24,.4)}
.trilho.meta:after{top:-6px;bottom:-6px;width:2px;background:var(--grafite);opacity:.55;border-radius:1px}
.marcador{font-family:var(--corpo);font-weight:700;letter-spacing:-.035em;font-size:13px}
/* no indicador da operacao o proprio preenchimento e o recado (verde =
   ocupacao saudavel), entao ali a agulha continua colorida */
.regua-kpi .trilho{height:8px;background:
    repeating-linear-gradient(90deg,rgba(64,46,24,.20) 0 1px,transparent 1px 10%),
    var(--papel2)}
.regua-kpi .trilho i:after{background:inherit}
.regua-kpi .leg{letter-spacing:.02em}

/* ================================================================== fila ===*/
.item{padding:13px 17px 15px;transition:background .13s}
.item:hover{background:linear-gradient(90deg,rgba(64,46,24,.055),rgba(64,46,24,.02))}
.item[aria-current=true]:before{width:3px;background:var(--carmim);box-shadow:0 0 10px rgba(168,17,43,.45)}
.item.estourou:before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--carmim);opacity:.32}
.item[aria-current=true].estourou:before{opacity:1;width:3px}
.grupo-fila{background:linear-gradient(var(--papel) 74%,rgba(255,252,247,0))}

/* =============================================================== conversa ===*/
.fio{
  background-color:var(--papel2);
  background-image:var(--grao-campo),
    linear-gradient(180deg,#EDE6D9 0%,#F5F0E7 30%,#F5F0E7 100%);
  background-size:160px 160px,100% 100%;
}
.balao{border-radius:var(--r-lg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(64,46,24,.10),0 4px 10px rgba(64,46,24,.08)}
.balao.entrada{border-bottom-left-radius:5px}
.balao.saida{
  border-bottom-right-radius:5px;
  background:linear-gradient(180deg,#212B30 0%,#131C20 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.11),0 2px 4px rgba(64,46,24,.22),0 8px 18px rgba(64,46,24,.18);
}
.balao.robo{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 0 0 1px var(--menta-borda)}

/* ⭐ A BOLHA QUE NÃO SAIU, LEGÍVEL (18/08/2026 — pedido do Fabiano).
 *
 * 🚨 O DEFEITO, MEDIDO: `.balao.falhou` nasceu em estilo.css com fundo carmim
 * claro e letra carmim escura (#6E1425) — legível, 10:1. Só que a pele vem
 * DEPOIS no <link> e pinta `.balao.saida` com o gradiente escuro; as duas regras
 * têm o mesmo peso, então o fundo escuro ganha e a letra escura FICA. Resultado
 * na tela da recepção: 1,23:1 de contraste (o mínimo legível é 4,5:1) — vermelho
 * escuro sobre preto, que foi exatamente a reclamação.
 *
 * ⭐ O conserto NÃO é trocar o fundo de volta para claro: a bolha de saída é
 * escura por identidade, e clarear só ela quebraria a coluna da direita. É dar
 * à falha uma cor PRÓPRIA que vive no escuro — âmbar sobre carvão quente, com
 * o fio âmbar na borda para achar a bolha de longe sem precisar ler.
 *
 * 🚨 E ela vale para a bolha automática também (`.balao.robo.falhou`): duas
 * aparências para o mesmo fato ("não saiu") é a tela ensinando errado.
 *
 * ⭐ Os dois seletores são de PROPÓSITO mais específicos que `.balao.falhou`
 * sozinho: com dois nomes de classe ele empataria com `.balao.saida` e ganharia
 * só por vir depois no arquivo. Foi exatamente uma disputa decidida por ORDEM
 * que produziu o defeito lá em cima; esta regra ganha por peso, não por sorte.
 * E são só estes dois porque bolha de falha é sempre de saída: quem garante isso
 * é `mensagemFalhou` em `js/app.js`, que recusa mensagem de entrada.
 */
.balao.saida.falhou,.balao.robo.falhou{
  background:linear-gradient(180deg,#2A2110 0%,#191204 100%);
  color:#FFE9A8;
  box-shadow:inset 0 0 0 1px rgba(255,197,61,.55),0 2px 4px rgba(64,46,24,.22),0 8px 18px rgba(64,46,24,.18);
}
.balao.falhou .h{color:rgba(255,233,168,.72)}
.balao.falhou .erro{color:#FFC53D}
.balao.falhou .selo-robo{color:#FFC53D}
.nota-fio{border-radius:var(--r-md)}
.ch-topo .av{box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 0 0 1px rgba(64,46,24,.14)}

/* ================================================================= ficha ===*/
.proximo{
  border-radius:var(--r-md);
  background:linear-gradient(180deg,#212B30 0%,#131C20 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.11),0 2px 6px rgba(64,46,24,.2),0 10px 24px rgba(64,46,24,.2);
}
.proximo button{border-radius:var(--r-sm);box-shadow:inset 0 -1px 0 rgba(0,0,0,.10);transition:background .13s,transform .08s}
.proximo button:active{transform:translateY(1px)}
.portao li{transition:none}
.portao .mk{font-weight:700}

/* =============================================================== operacao ===
   O indicador principal, que na versao clara era a unica massa escura da area,
   aqui INVERTE: vira a chapa mais acesa da linha, senao afunda no chassi. */
.kpi.principal{
  background:linear-gradient(180deg,#FFFDF9 0%,#F7F1E6 100%);
  background-image:var(--fibra-papel),linear-gradient(180deg,#FFFDF9 0%,#F7F1E6 100%);
  background-size:150px 150px,100% 100%;
  color:var(--grafite);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 0 0 1px rgba(255,250,238,.16),
    0 2px 4px rgba(0,0,0,.5),
    0 14px 30px rgba(0,0,0,.42),
    0 34px 70px rgba(0,0,0,.35),
    0 0 90px -22px rgba(255,240,205,.42);
}
.kpi.principal .v{color:var(--grafite)}
.kpi.principal .v small{color:var(--aco2)}
.kpi.principal .r{color:var(--grafite)}
.kpi.principal .d{color:var(--aco)}
.kpi.principal .regua-kpi .trilho{background:
    repeating-linear-gradient(90deg,rgba(64,46,24,.20) 0 1px,transparent 1px 10%),var(--papel2);
  box-shadow:inset 0 1px 2px rgba(64,46,24,.18),inset 0 0 0 1px rgba(64,46,24,.11)}
.kpi.principal .regua-kpi .trilho i{background:var(--menta)}
.kpi.principal .regua-kpi .trilho i:after{box-shadow:0 0 0 2px var(--papel),0 1px 3px rgba(64,46,24,.4)}
.kpi.principal .regua-kpi .leg{color:var(--aco2)}

/* a serie dos 14 dias: barra fina com a ponta arredondada, apoiada na base,
   e um respiro de 2px entre as duas — a mesma gramatica da regua da fila */
thead th{background:linear-gradient(180deg,#F0E9DC,#F5F0E7)}
.dia-serie i{box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
.dia-serie{transition:background .12s}
tbody tr.clicavel{transition:background .12s}

/* o cartao da maior espera viva e o mais urgente da tela: ganha a mesma
   elevacao dos outros mais a aresta de alarme, em vez de ficar rebaixado */
.quadro.alarme{
  background:linear-gradient(180deg,#FCEBEE 0%,#F8DFE4 100%);
  background-image:var(--fibra-papel),linear-gradient(180deg,#FCEBEE 0%,#F8DFE4 100%);
  background-size:150px 150px,100% 100%;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 0 0 1px rgba(168,17,43,.20),
    0 0 0 1px rgba(255,250,238,.08),
    0 2px 4px rgba(0,0,0,.45),
    0 12px 26px rgba(0,0,0,.38),
    0 28px 56px rgba(0,0,0,.30),
    0 0 74px -24px rgba(255,190,200,.30);
}
.quadro.alarme .quadro-topo h2{color:var(--carmim)}
.quadro.alarme .quadro-topo p{color:#8A3243}

/* ================================================================= avisos ===
   A faixa de teste e a primeira coisa que qualquer um ve. Continua avisando —
   e um aviso de seguranca — mas para de gritar mais alto que a tela. */
.faixa-relogio{
  border-radius:var(--r-md);border-color:transparent;font-weight:500;
  /* 🚨 O canto direito é RESERVADO para o sino. Medido em 29/07/2026: o sino
     ocupava 1386-1424 e o botão "trocar de pessoa" ia até 1407, então o sino
     cobria o fim do texto da faixa. Os dois são fixos no topo, e quem chegou
     depois abre espaço — em vez de o aviso de segurança ficar ilegível. */
  padding:7px 62px 7px 14px;
  background:rgba(138,100,19,.14);color:#D9BC72;
  box-shadow:inset 0 0 0 1px rgba(214,180,105,.22);
}
.faixa-relogio button{color:#F0D9A0}
.recado{border-radius:var(--r-md);box-shadow:var(--lev-alta)}
.gaveta{background:rgba(4,7,9,.72);backdrop-filter:blur(4px)}

/* ================================================================= vazio ===
   Estado vazio nao e area cinza com uma frase no meio: e a sonda em repouso,
   zerada. Mesmo instrumento, dizendo que nao ha o que medir ainda. */
.vazio{padding:52px 24px}
.vazio:before{
  content:"";display:block;width:112px;height:8px;margin:0 auto 22px;border-radius:2px;
  background:
    repeating-linear-gradient(90deg,rgba(64,46,24,.22) 0 1px,transparent 1px 12.5%),
    var(--papel2);
  box-shadow:inset 0 1px 2px rgba(64,46,24,.16),inset 0 0 0 1px rgba(64,46,24,.10);
}
.vazio b{font-size:16.5px}

/* ============================================================== acabamento ===
   Barra de rolagem, anel de foco e selecao de texto sao os tres lugares onde a
   tela denuncia que ninguem cuidou dela. */
*{scrollbar-width:thin;scrollbar-color:rgba(64,46,24,.26) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(64,46,24,.24);border-radius:99px;border:3px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:rgba(64,46,24,.4);background-clip:padding-box;border:3px solid transparent}
/* no chassi escuro e na area escura a barra inverte */
.caixa,.rolo,.tela{scrollbar-color:rgba(255,255,255,.16) transparent}
.caixa ::-webkit-scrollbar-thumb,.rolo::-webkit-scrollbar-thumb,.tela::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.14);background-clip:padding-box;border:3px solid transparent}
.caixa ::-webkit-scrollbar-thumb:hover,.rolo::-webkit-scrollbar-thumb:hover{
  background:rgba(255,255,255,.26);background-clip:padding-box;border:3px solid transparent}

:focus-visible{outline:2px solid #E4899B;outline-offset:2px;border-radius:var(--r-xs)}
.painel :focus-visible,.quadro :focus-visible,.kpi :focus-visible,.cartao :focus-visible{outline-color:var(--carmim)}
::selection{background:var(--carmim);color:#fff}

/* ============================================================== movimento ===
   Movimento aqui nao e enfeite: e continuidade. Quando o painel se atualiza
   sozinho, a fila se reordena; sem transicao a pessoa perde de vista quem
   estava olhando. Ver pele.js. */
@keyframes entrar{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.vista{animation:entrar .30s var(--curva)}

/* ---- o aparelho ligando -----------------------------------------------
   Aparelho bom LIGA, nao pisca. O chassi entra primeiro; as chapas acendem em
   sequencia depois que as fontes terminaram de carregar. Sem isso a pessoa ve
   texto trocando de fonte e blocos pulando de lugar — o tipo de coisa que faz
   um sistema caro parecer barato nos primeiros 400ms. */
.pele-carregando .caixa,.pele-carregando .tela{opacity:0}
.pele-carregando *,.pele-carregando *:before,.pele-carregando *:after{animation-play-state:paused !important}
/**
 * 🚨 O PORTAL É A EXCEÇÃO, e ele PRECISA ser (achado em 31/07/2026 pela prova de
 * tela, que mediu opacidade 0).
 *
 * A regra acima pausa toda animação até a pele "acender", e a chapa do portal
 * entra por animação com `both` — ou seja, presa no quadro inicial, que é
 * opacidade ZERO. Resultado: a primeira tela do sistema, a única que alguém de
 * fora alcança, ficava em branco esperando as fontes, com o formulário
 * funcionando por baixo. Quem espera a pele acender é o PAINEL; o portal acende
 * sozinho, na hora.
 */
.pele-carregando .portal,.pele-carregando .portal *,
.pele-carregando .portal *:before,.pele-carregando .portal *:after{animation-play-state:running !important}

@keyframes pele-chassi{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
@keyframes pele-campo{from{opacity:0}to{opacity:1}}
@keyframes pele-chapa{
  from{opacity:0;transform:translateY(12px);filter:brightness(.80) saturate(.65)}
  62%{filter:brightness(1.03) saturate(1)}
  to{opacity:1;transform:none;filter:none}
}
html[data-aceso] .caixa{animation:pele-chassi .45s var(--curva) both}
html[data-aceso] .tela{animation:pele-campo .40s .05s var(--curva) both}
html[data-aceso] .tres>.painel{animation:pele-chapa .58s var(--curva) both}
html[data-aceso] .tres>.painel:nth-child(1){animation-delay:.13s}
html[data-aceso] .tres>.painel:nth-child(2){animation-delay:.21s}
html[data-aceso] .tres>.painel:nth-child(3){animation-delay:.29s}

/* ---- a travessia e a chegada ------------------------------------------
   Trocar de pessoa e travessia, nao corte seco. Mensagem nova desliza e da um
   claro que apaga sozinho: usa OUTLINE, nunca box-shadow, senao a animacao
   apagaria a sombra e a aresta que a ficha ja tem. */
@keyframes pele-atravessa{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.pele-travessia{animation:pele-atravessa .34s var(--curva) both}

@keyframes pele-sobe{from{opacity:0;transform:translateY(11px) scale(.986)}to{opacity:1;transform:none}}
@keyframes pele-clarao{
  0%,12%{outline-color:rgba(214,166,74,.85)}
  100%{outline-color:rgba(214,166,74,0)}
}
.pele-chegou{
  outline:2px solid rgba(214,166,74,0);outline-offset:1px;border-radius:var(--r-md);
  animation:pele-sobe .40s var(--curva) both,pele-clarao 1.9s ease-out both;
}
.balao.pele-chegou{border-radius:var(--r-lg)}

/* a ficha da fila em movimento (FLIP) nao pode piscar o fundo do hover */
.item[style*="transform"]{background:var(--papel)}

@media (prefers-reduced-motion:reduce){
  .vista,.tres>.painel,.caixa,.tela,.pele-chegou,.pele-travessia{animation:none}
  .pele-carregando .caixa,.pele-carregando .tela{opacity:1}
  .pulso{animation:none}
  *{transition:none !important}
}

/* ================================================================= teclado ===
   Ferramenta de recepcao boa se opera sem tirar a mao do teclado, e mostra o
   proprio atalho: atalho que ninguem descobre nao existe. */
.pele-teclas{
  margin:9px 0 0;font-size:10.5px;color:var(--aco2);letter-spacing:.01em;
  display:flex;align-items:center;gap:4px;flex-wrap:wrap;
}
.pele-teclas b{
  display:inline-grid;place-items:center;min-width:16px;height:16px;padding:0 4px;
  font-family:var(--mono);font-size:9.5px;font-weight:600;color:var(--aco);
  background:linear-gradient(180deg,#FFFCF7,#F1EADF);border-radius:3px;
  box-shadow:inset 0 0 0 1px rgba(64,46,24,.18),0 1px 0 rgba(64,46,24,.18);
}

/* ============================================================ tipografia fina
   Algarismo tabular ja esta em cima; aqui entra o ZERO CORTADO nos campos de
   medida. E o detalhe de painel de instrumento: separa 0 de O sem pensar. */
.n,.marcador,.leg,.balao .h,.msg-interna .h,.serie-dias,.serie-topo,.nav .badge,.portao .mk{
  font-feature-settings:"tnum" 1,"zero" 1;
}
h1,h2,h3,.nome,.ch-nome,.vazio b{text-wrap:balance}
.resumo,.previa,.kpi .d,.mini p{text-wrap:pretty}

/* ================================================== a quarta lista da fila ===
   "Sem resposta" e acompanhamento, nao fila. Entao NAO ganha sonda, nao ganha
   cor de alarme e nao ganha contador: so a frase do que aconteceu. Se piscasse
   como as outras, a equipe aprenderia a ignorar todas — a melhor decisao do
   relatorio do Fabiano. */
.sem-urgencia{
  margin-top:10px;padding-top:9px;font-size:11.5px;color:var(--aco2);
  box-shadow:inset 0 1px 0 rgba(64,46,24,.10);
}
.item.quieto .sem-urgencia{color:var(--aco2)}

/* ================================================================= O PORTAL ===
   A tela de entrada é o aparelho LIGANDO: o chassi escuro, o feixe de luz
   descendo de cima e a chapa acesa no meio dele. Mesma gramática do painel —
   nada aqui inventa uma segunda identidade só porque é a primeira tela.

   🚨 O feixe é DESENHO, não decoração solta: ele nasce no topo, na mesma direção
   da luz que já acende toda chapa do sistema (a aresta clara em cima, a sombra
   embaixo). Luz vindo de outro lugar aqui faria a tela de entrada parecer de
   outro produto. */
/**
 * As TRÊS camadas do fundo, nesta ordem e com esta força — medidas olhando o
 * print, não no escuro:
 *  1. o FEIXE, descendo do topo como a luz do negatoscópio;
 *  2. o HALO atrás da chapa, que é o que faz o branco parecer ACESO;
 *  3. a VINHETA, que escurece as bordas e empurra o olho para o meio.
 */
.portal-feixe{
  background:
    radial-gradient(72% 50% at 50% -8%, rgba(255,238,208,.24) 0%, rgba(255,238,208,.07) 40%, transparent 70%),
    radial-gradient(40% 34% at 50% 48%, rgba(255,242,222,.17) 0%, rgba(255,242,222,.05) 55%, transparent 76%),
    radial-gradient(130% 96% at 50% 50%, transparent 30%, rgba(3,6,8,.78) 100%);
}
/* O grão do chassi por cima do feixe: sem ele o degradê vira faixa lisa de
   monitor barato, que é o defeito que a pele inteira existe para evitar.
   🚨 A 55% ele LAVAVA o preto: o chassi virava cinza de escritório e o feixe
   sumia junto. Grão é fibra, não névoa — medido no print, corrigido para 10%. */
.portal:before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:var(--grao-campo);background-size:160px 160px;opacity:.10;
}

.portal-topo{
  background:linear-gradient(184deg,#232E34 0%,#1A2429 58%,#141D22 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 -1px 0 rgba(0,0,0,.35);
}
/* O fio de luz que separa o chassi da chapa: é a linha do aparelho, e é ela que
   faz o cartão parecer DUAS peças encaixadas em vez de um retângulo pintado. */
.portal-topo:after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,244,222,.35),transparent);
}
.portal-topo .wordmark{
  font-family:var(--corpo);font-weight:700;font-size:16px;letter-spacing:.30em;
  text-transform:uppercase;color:var(--creme);margin-bottom:16px;
}
.portal-topo .logo{filter:drop-shadow(0 1px 6px rgba(0,0,0,.45))}

.portal-cartao .campo-texto{background-image:var(--grao-campo);background-size:160px 160px}
.portal-entrar{border-radius:var(--r-md)}
.portal-rodape{border-radius:0 0 var(--r-xl) var(--r-xl)}

/* ⭐ O MOMENTO DE MOVIMENTO, e é UM só: a chapa ACENDE quando a tela abre.
   Mesma regra do painel (as fichas sobem uma vez quando a vista troca) — e
   desligado inteiro em prefers-reduced-motion, como todo o resto. */
@keyframes portal-acende{
  from{opacity:0;transform:translateY(10px) scale(.985)}
  to{opacity:1;transform:none}
}
@keyframes portal-feixe-acende{ from{opacity:0} to{opacity:1} }
.portal-cartao{animation:portal-acende .5s var(--curva) both}
.portal-feixe{animation:portal-feixe-acende .9s ease-out both}
@media (prefers-reduced-motion:reduce){
  .portal-cartao,.portal-feixe{animation:none}
}

/* A volta depois da sessão expirar não repete a entrada em grande: é um aviso,
   e o painel continua visível atrás. */
.portal.volta .portal-cartao{animation-duration:.28s}
.portal.volta .portal-topo{padding-top:20px;padding-bottom:18px}