/* ============================================================
   AS PEÇAS DO crm.css NO VISUAL NOVO

   O Breno, em 22/09/2026, depois de aprovar a tela piloto: "por que já
   não aplicou em tudo?". As outras 35 telas usam as mesmas peças do
   crm.css (cartão, número de destaque, lista, botão, selo, filtro,
   busca, aviso). Em vez de reescrever cada tela à mão, esta folha veste
   essas peças com o material de assets/sistema-visual.css. Cada tela
   depois passa pela régua e tem o que é só dela corrigido nela mesma.

   ORDEM DE CARREGAMENTO, e ela é a regra desta folha:
     crm.css  →  sistema-visual.css  →  esta folha  →  o <style> da tela
   Os seletores aqui têm o MESMO peso dos do crm.css, e ganham por vir
   depois. E perdem para o estilo da própria tela, que vem depois ainda:
   a tela continua podendo discordar, com motivo, sem !important.

   A tela de Atendimentos não carrega esta folha: ela nunca usou o
   crm.css e já nasceu no visual novo.
   ============================================================ */

/* ---------- a moldura das telas antigas ----------
   O conteúdo de cada tela é a lâmina de vidro. Ele vem com respiro
   próprio (o crm.css já dava 26/32/48px ao .conteudo) e em bloco, e não
   em coluna flexível como em Atendimentos: aqui os blocos da página se
   empilham com margem, do jeito que as telas foram escritas. */
.conteudo.lamina{display:block;padding:var(--espaco-28) var(--espaco-32) var(--espaco-32)}
@media (max-width:900px){ .conteudo.lamina{padding:var(--espaco-20) var(--espaco-16) var(--espaco-28)} }

/* ---------- a entrada: na hora ----------
   Decisão do Breno em 22/09/2026 para as telas de trabalho: "fazer ela
   aparecer na hora". A cascata de 720ms do crm.css sai. */
.sobe{opacity:1;transform:none;animation:sobe-na-hora 160ms var(--curva) backwards}
@keyframes sobe-na-hora{from{opacity:0;transform:translateY(4px)}}
.d1,.d2,.d3,.d4,.d5,.d6{animation-delay:0s}
.listras::before{display:none}

/* ---------- cabeçalho da página ---------- */
.cabecalho h1{font-size:30px;font-weight:700;letter-spacing:-.03em}
.cabecalho p{font-size:var(--t-linha);color:var(--apoio)}

/* ---------- os cartões: peças de vidro dentro da lâmina ----------
   Cartão branco chapado boiando em cinza é o que o Breno chamou de
   "cara de SaaS de 2005" na EVF. Dentro da lâmina, o cartão é um vidro
   um degrau mais erguido, com o aro de luz no topo. */
.painel,.kpi{
  background:linear-gradient(177deg,rgba(255,255,255,.78) 0%,rgba(255,255,255,.6) 100%);
  border-radius:var(--r-painel);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px var(--contorno-fraco),var(--elevacao-1);
}
/* cartão de dado não é botão: não levanta no ponteiro (Emil: o que a
   pessoa vê dezenas de vezes por dia não se mexe à toa) */
.kpi,.kpi:hover{transform:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px var(--contorno-fraco),var(--elevacao-1)}
.painel-titulo{font-size:17px;font-weight:700;letter-spacing:-.018em}
.painel-sub{font-size:var(--t-apoio);color:var(--quieto)}

/* O número de destaque, grande e LEVE: o "mostrador" da EVF. Número
   grande em negrito grita; leve e grande tem a mesma presença sem gritar. */
.kpi-num{font-weight:var(--mostrador-peso);letter-spacing:var(--mostrador-espacamento);font-variant-numeric:tabular-nums}
.kpi-num .de{font-weight:400;color:var(--quieto)}
.kpi-rot{font-size:var(--t-linha);font-weight:600}
.kpi-base{font-size:var(--t-apoio);color:var(--apoio)}
/* o cartão principal da fileira ganha a face laranja da marca, que
   desce do escuro para mais escuro para o branco passar em cima */
.kpi-heroi,.kpi-heroi:hover{
  background:var(--laranja-face);
  box-shadow:var(--laranja-relevo),0 18px 36px -22px rgba(160,48,22,.7);
}
.kpi-heroi .kpi-base{color:#fff}

/* ---------- botões ---------- */
.btn{
  font-size:var(--t-corpo);letter-spacing:-.005em;
  transition:transform var(--tempo-aperto) var(--curva),box-shadow var(--tempo-rapido) var(--curva),background-color var(--tempo-rapido) var(--curva);
}
.btn:hover{transform:none}
.btn:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){
  .btn:hover{transform:translateY(-2px)}
  .btn:hover:active{transform:translateY(-2px) scale(.97)}
}
.btn-claro{background:var(--vidro-face-controle);border:1px solid var(--vidro-borda);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),var(--elevacao-1)}
.btn-claro:hover{background:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),var(--elevacao-2)}
.btn-escuro,.btn-escuro:hover{background:var(--asfalto-face);color:var(--tinta-sobre-escuro);box-shadow:var(--asfalto-relevo),var(--asfalto-sombra)}
.btn-laranja,.btn-laranja:hover{background:var(--laranja-face);color:#fff;box-shadow:var(--laranja-relevo),var(--laranja-sombra)}
.btn-fantasma{background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 1px var(--contorno-fraco);font-size:var(--t-apoio);
  transition:background-color var(--tempo-rapido) var(--curva),transform var(--tempo-aperto) var(--curva)}
.btn-fantasma:hover{background:rgba(255,255,255,.9)}
.btn-fantasma:active{transform:scale(.97)}
.seta-canto{background:rgba(22,23,26,.06)}
.seta-canto:hover{transform:none}
@media (hover:hover) and (pointer:fine){ .seta-canto:hover{transform:translate(2px,-2px)} }

/* ---------- selos: o par de sinal, com anel fino ---------- */
.chip{font-size:var(--t-rotulo)}
.chip-ok{box-shadow:inset 0 0 0 1px rgba(31,107,74,.18)}
.chip-aten{box-shadow:inset 0 0 0 1px rgba(131,89,12,.18)}
.chip-risco{box-shadow:inset 0 0 0 1px rgba(162,48,44,.18)}
.chip-info{box-shadow:inset 0 0 0 1px rgba(68,84,106,.16)}
.chip-laranja{background:#FBECE7;color:var(--laranja-texto);box-shadow:inset 0 0 0 1px rgba(201,62,34,.2)}
.chip-neutro{background:rgba(255,255,255,.7);color:var(--apoio);box-shadow:inset 0 0 0 1px var(--contorno-fraco)}
/* O selo em cima do cartão laranja: fundo branco translúcido clareava o
   laranja e o branco da letra caía para 3,9:1 (medido em 22/09/2026, em
   14 telas). Escurecendo o fundo do selo, o branco passa de 7:1. */
.kpi-heroi .chip{background:rgba(70,18,6,.26);color:#fff;box-shadow:none}

/* ---------- listas ---------- */
/* Rede de segurança das listas em colunas: quando as colunas não cabem,
   a linha cresce até caber e o cartão rola de lado (ele já rola, pelo
   crm.css). Sem isto, a última coluna vazava para fora da linha, por
   baixo da borda do cartão. No celular a linha vira cartão empilhado e
   isto não se aplica. */
@media (min-width:901px){
  .linha-lista,.cab-lista{min-width:min-content}
  /* e a caixa que junta as linhas cresce junto, senão elas vazam dela */
  .painel>div:has(>.linha-lista){min-width:min-content}
}
/* Título de coluna em caixa baixa, peso 500, tom quieto. A caixa alta
   com espaçamento largo é um dos três clichês de máquina da lista do
   Breno, e sai daqui e do mini-título. */
.cab-lista{font-size:var(--t-apoio);font-weight:500;color:var(--quieto);letter-spacing:0;text-transform:none}
.mini-titulo{font-size:var(--t-corpo);font-weight:700;color:var(--tinta);letter-spacing:-.005em;text-transform:none}
.linha-lista:hover{background:transparent}
@media (hover:hover) and (pointer:fine){ .linha-lista:hover{background:rgba(255,255,255,.55)} }
.av{background:var(--vidro-face-erguida);box-shadow:inset 0 0 0 1px var(--contorno-fraco),inset 0 1px 0 #fff;color:var(--apoio)}
.acao-linha{
  background:rgba(255,255,255,.6);box-shadow:inset 0 0 0 1px var(--contorno-fraco);
  transition:background-color var(--tempo-rapido) var(--curva),color var(--tempo-rapido) var(--curva),transform var(--tempo-aperto) var(--curva);
}
.acao-linha:active{transform:scale(.97)}
.linha-lista:hover .acao-linha{background:rgba(255,255,255,.6);color:var(--tinta)}
@media (hover:hover) and (pointer:fine){
  .linha-lista:hover .acao-linha{background:var(--asfalto-face);color:var(--tinta-sobre-escuro)}
}

/* ---------- ficha de dados: rótulo em negrito na tinta do valor ----------
   Regra fechada na EVF: em cinza e peso médio, o rótulo some ao lado do
   próprio valor, e ele é a única coisa que diz o que o valor significa. */
.dado-rot{font-weight:700;color:var(--tinta)}
.dado-val{font-weight:500}

/* ---------- filtros e busca ---------- */
.busca{
  background:var(--vidro-face-controle);border:1px solid var(--vidro-borda);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 0 1px var(--contorno-fraco);
}
.busca:focus-within{outline:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 0 2px var(--laranja)}
.busca input{text-overflow:ellipsis}
.busca input:focus-visible{outline:none}
.sit{
  background:rgba(255,255,255,.5);box-shadow:inset 0 0 0 1px var(--contorno-fraco);font-size:var(--t-apoio);
  transition:background-color var(--tempo-rapido) var(--curva),color var(--tempo-rapido) var(--curva),transform var(--tempo-aperto) var(--curva);
}
.sit:hover{background:rgba(255,255,255,.5)}
.sit:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){ .sit:hover{background:rgba(255,255,255,.85);color:var(--tinta)} }
.sit.ativa,.sit.ativa:hover{background:var(--asfalto-face);color:var(--tinta-sobre-escuro);box-shadow:var(--asfalto-relevo),var(--asfalto-sombra)}

/* ---------- blocos auxiliares ---------- */
.barra{background:rgba(22,23,26,.1)}
.divisor{background:var(--linha)}
.alerta{background:var(--risco-bg);border-color:rgba(162,48,44,.22);border-radius:var(--r-item)}
.alerta-sub{color:var(--risco-txt)}
.vazio-icone{background:rgba(255,255,255,.7);box-shadow:inset 0 0 0 1px var(--contorno-fraco)}
.caixa{border-color:#B7BAC0;background:rgba(255,255,255,.7)}
.linha-agenda:hover{background:transparent}
@media (hover:hover) and (pointer:fine){ .linha-agenda:hover{background:rgba(255,255,255,.55)} }
.trilho::before{background:#B7BAC0}
.hora{font-variant-numeric:tabular-nums}