/* Identidade da plataforma STINT, tema escuro.
   Poppins ja esta instalada nesta maquina (400/500/600/700). Nada de CDN:
   o app e local e nao depende de rede para desenhar a propria tela. */
:root {
  --fundo:      #0B1013;
  --superficie: #0C343D;
  --cartao:     #111820;
  --cartao-alt: #141C26;
  --borda:      #1E2A33;
  --borda-forte:#2A3A45;

  --texto:      #E9EFF2;
  --texto-2:    #9BAAB4;
  --texto-3:    #6B7C87;

  --accent:     #77E40D;
  --accent-esc: #5BB80A;

  --verde:      #35D07F;
  --amarelo:    #E8B317;
  --vermelho:   #F2545B;
  /* Era #C0392F. Contra o #F2545B dava ΔE 12,1 em visao normal de cores, abaixo
     do piso de 15: os dois niveis de vermelho ficavam quase iguais justamente
     onde a cor e o sinal que se bate o olho. Este da 21,7. Medido, nao achado.
     So preenchimento, nunca texto: 2,28:1 contra a superficie nao serve para ler. */
  --vermelho-e: #912F3F;
  --neutro:     #4A5A63;

  /* escala de 4px */
  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px;
  --e5: 24px; --e6: 32px; --e7: 48px;

  --raio:   10px;
  --raio-s: 6px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: Poppins, -apple-system, "Helvetica Neue", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.oculto { display: none !important; }

.ico { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2;
       stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }

/* ---------- topo ---------- */

.topo {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: var(--e5);
  padding: var(--e3) var(--e5);
  background: var(--superficie);
  border-bottom: 1px solid rgba(0,0,0,.35);
}

.marca { display: flex; flex-direction: column; line-height: 1.15; }
.marca-nome { font-weight: 700; font-size: 15px; letter-spacing: -.01em; }
.marca-sub  { font-size: 11px; color: var(--texto-3); }

.abas { display: flex; gap: var(--e1); flex: 1; }

.aba {
  display: flex; align-items: center; gap: var(--e2);
  background: none; border: 0; border-radius: var(--raio-s);
  color: var(--texto-2); padding: var(--e2) var(--e3);
  font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
  transition: background .12s, color .12s;
}
.aba:hover { background: rgba(255,255,255,.06); color: var(--texto); }
.aba.ativa { background: rgba(0,0,0,.28); color: var(--texto); font-weight: 600; }

.pino {
  min-width: 20px; padding: 0 6px; border-radius: 999px;
  background: rgba(255,255,255,.10); color: var(--texto-2);
  font-size: 11px; font-weight: 600; line-height: 18px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.aba.ativa .pino { background: rgba(255,255,255,.14); color: var(--texto); }
.pino-alerta { background: var(--vermelho); color: #fff; }

.busca {
  display: flex; align-items: center; gap: var(--e2);
  background: rgba(0,0,0,.28); border: 1px solid transparent;
  border-radius: var(--raio-s); padding: var(--e2) var(--e3);
  color: var(--texto-3); transition: border-color .12s;
}
.busca:focus-within { border-color: var(--accent-esc); color: var(--texto-2); }
.busca input {
  background: none; border: 0; color: var(--texto); font: inherit;
  width: 190px; outline: none;
}
.busca input::placeholder { color: var(--texto-3); }

/* ---------- estrutura ---------- */

main { padding: var(--e5); max-width: 1180px; margin: 0 auto; }

.bloco {
  background: var(--cartao); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: var(--e5); margin-bottom: var(--e5);
}
.bloco-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--e4); }

h2 { margin: 0 0 var(--e1); font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.nota { margin: 0 0 var(--e4); color: var(--texto-3); font-size: 12.5px; max-width: 68ch; }
.bloco-topo .nota { margin-bottom: 0; }
.vazio { color: var(--texto-3); padding: var(--e6) 0; text-align: center; }

/* ---------- resumo ---------- */

.resumo { display: flex; gap: var(--e2); margin-bottom: var(--e4); flex-wrap: wrap; }
.selo {
  display: flex; align-items: baseline; gap: var(--e2);
  background: var(--cartao); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: var(--e3) var(--e4);
}
.selo b { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.selo span { color: var(--texto-3); font-size: 12px; }
.selo-vermelho_escuro b { color: var(--vermelho-e); }
.selo-vermelho b { color: var(--vermelho); }
.selo-amarelo b { color: var(--amarelo); }
.selo-verde b { color: var(--verde); }

/* ---------- lista de grupos ---------- */

.lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e2); }

.grupo {
  display: grid;
  grid-template-columns: 40px minmax(0,1fr) auto auto;
  gap: var(--e4); align-items: center;
  background: var(--cartao); border: 1px solid var(--borda);
  border-left: 3px solid var(--neutro);
  border-radius: var(--raio); padding: var(--e3) var(--e4);
  transition: border-color .12s, background .12s;
}
.grupo:hover { background: var(--cartao-alt); border-color: var(--borda-forte); }
.grupo.b-verde           { border-left-color: var(--verde); }
.grupo.b-amarelo         { border-left-color: var(--amarelo); }
.grupo.b-vermelho        { border-left-color: var(--vermelho); }
.grupo.b-vermelho_escuro { border-left-color: var(--vermelho-e); }
.grupo.b-neutro          { border-left-color: var(--neutro); }
.grupo.apagado { opacity: .55; }

.avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--cartao-alt); object-fit: cover;
  border: 1px solid var(--borda);
}
/* URL de foto do WhatsApp expira. Silueta desenhada em CSS fica melhor que o
   icone de imagem quebrada do navegador, e nao custa requisicao nenhuma. */
.avatar.sem-foto {
  background: var(--cartao-alt)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7C87' stroke-width='1.6'%3E%3Cpath d='M17 20v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='10.5' cy='7' r='3.5'/%3E%3C/svg%3E")
    center / 22px no-repeat;
}

.corpo { min-width: 0; }
.nome {
  font-weight: 600; font-size: 14px; letter-spacing: -.005em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.previa {
  color: var(--texto-3); font-size: 12.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.previa b { color: var(--texto-2); font-weight: 500; }

.marcas { display: flex; gap: var(--e1); margin-top: 2px; flex-wrap: wrap; }
.marca-item {
  font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  padding: 1px var(--e2); border-radius: 4px;
  background: rgba(255,255,255,.07); color: var(--texto-3);
}
.marca-reaberto { background: rgba(242,84,91,.16); color: var(--vermelho); }
.marca-mudo { background: rgba(255,255,255,.05); }

.direita { text-align: right; min-width: 150px; }
.cronometro {
  font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.t-verde { color: var(--verde); }
.t-amarelo { color: var(--amarelo); }
.t-vermelho { color: var(--vermelho); }
/* TEXTO do nivel mais grave usa o vermelho claro, nao o --vermelho-e: aquele
   tem 2,28:1 contra a superficie e serve para preencher, nao para ler. Quem
   separa os dois niveis e a barra e a borda, que sao preenchimento; o texto ao
   lado ja diz "14 dias" e nao depende da cor para nada. */
.t-vermelho_escuro { color: var(--vermelho); }
.t-neutro { color: var(--texto-3); }
.resp { color: var(--texto-3); font-size: 11.5px; }

.acoes-linha { display: flex; gap: var(--e1); }
.acao {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0;
  background: none; border: 1px solid transparent; border-radius: var(--raio-s);
  color: var(--texto-2); cursor: pointer; transition: all .12s;
}
.acao:hover { background: rgba(255,255,255,.07); color: var(--texto); border-color: var(--borda-forte); }
.acao.ligado { color: var(--accent); }

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

.rolagem { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th {
  text-align: left; padding: var(--e2) var(--e3);
  color: var(--texto-3); font-size: 10.5px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  border-bottom: 1px solid var(--borda); white-space: nowrap;
}
td { padding: var(--e3); border-bottom: 1px solid var(--borda); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--cartao-alt); }
td.num { font-variant-numeric: tabular-nums; text-align: right; }
.inativo { color: var(--texto-3); }

/* ---------- formularios ---------- */

.btn {
  background: rgba(255,255,255,.07); border: 1px solid var(--borda-forte);
  color: var(--texto); padding: var(--e2) var(--e4); border-radius: var(--raio-s);
  font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer;
  transition: all .12s; white-space: nowrap;
}
.btn:hover { background: rgba(255,255,255,.12); }
.btn-primario { background: var(--accent); border-color: var(--accent); color: #08140A; font-weight: 600; }
.btn-primario:hover { background: var(--accent-esc); border-color: var(--accent-esc); }
.btn-mini { padding: var(--e1) var(--e2); font-size: 11.5px; }

input[type=text], input[type=number], input:not([type]) {
  background: rgba(0,0,0,.3); border: 1px solid var(--borda);
  color: var(--texto); padding: var(--e2) var(--e3); border-radius: var(--raio-s);
  font: inherit; font-size: 13px; outline: none; transition: border-color .12s;
}
input:focus { border-color: var(--accent-esc); }

.linha-form { display: flex; gap: var(--e2); margin-top: var(--e4); flex-wrap: wrap; }
.linha-form input { flex: 1; min-width: 130px; }

.grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--e4); }
.grade > label { display: flex; flex-direction: column; gap: var(--e1); color: var(--texto-2); font-size: 12.5px; }
.dica { color: var(--texto-3); font-size: 11px; }
.checks { grid-column: 1 / -1; display: flex; gap: var(--e5); flex-wrap: wrap; }
.check { display: flex; align-items: center; gap: var(--e2); color: var(--texto-2); font-size: 13px; cursor: pointer; }
.check input { accent-color: var(--accent); width: 15px; height: 15px; }
.acoes { grid-column: 1 / -1; }

.erro { color: var(--vermelho); font-size: 13px; }

/* ---------- saude ---------- */

.cartoes { display: flex; gap: var(--e2); flex-wrap: wrap; margin-bottom: var(--e4); }
.cartao-s {
  background: var(--cartao-alt); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: var(--e3) var(--e4); min-width: 130px;
}
.cartao-s b { display: block; font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cartao-s span { color: var(--texto-3); font-size: 11.5px; }
.cartao-s.ruim b { color: var(--vermelho); }
.cartao-s.bom b { color: var(--verde); }

details { color: var(--texto-3); font-size: 12.5px; }
summary { cursor: pointer; }
pre {
  background: rgba(0,0,0,.3); border: 1px solid var(--borda); border-radius: var(--raio-s);
  padding: var(--e3); overflow-x: auto; font-size: 12px; color: var(--texto-2);
}

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

.aviso {
  display: flex; align-items: center; gap: var(--e2);
  background: var(--vermelho-e); color: #fff;
  padding: var(--e3) var(--e5); font-size: 13px; font-weight: 500;
}

@media (max-width: 860px) {
  .topo { flex-wrap: wrap; gap: var(--e3); }
  .busca { order: 3; width: 100%; }
  .busca input { width: 100%; }
  .grupo { grid-template-columns: 40px minmax(0,1fr) auto; }
  .acoes-linha { grid-column: 2 / -1; justify-content: flex-end; }
}

/* ---------- barra de filtro de tabela ---------- */

.barra-tabela {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e4); margin: var(--e5) 0 var(--e3);
}
.busca-clara { background: rgba(0,0,0,.3); border-color: var(--borda); }
.busca-clara input { width: 260px; }
.conta { color: var(--texto-3); font-size: 12px; font-variant-numeric: tabular-nums; }

/* ---------- barras da aba Metricas ----------
   Trilho recessivo, preenchimento fino com ponta arredondada ancorada na base,
   e o numero SEMPRE escrito ao lado: o texto e o que torna a cor dispensavel
   para quem nao a distingue. */

.barras { display: flex; flex-direction: column; gap: var(--e1); }

.barra-linha {
  display: grid;
  grid-template-columns: minmax(150px, 1.5fr) minmax(80px, 3fr) 120px 120px;
  gap: var(--e4); align-items: center;
  padding: var(--e2) var(--e3); border-radius: var(--raio-s);
  transition: background .12s;
}
.barra-linha:hover { background: var(--cartao-alt); }
.barra-linha.apagado { opacity: .5; }

.barra-rot { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.barra-titulo {
  font-size: 13px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.barra-sub { font-size: 11px; color: var(--texto-3); }

.barra-trilho {
  height: 8px; background: rgba(255,255,255,.06);
  border-radius: 999px; overflow: hidden;
}
.barra-fill { height: 100%; border-radius: 999px; transition: width .3s ease; }
.f-verde { background: var(--verde); }
.f-amarelo { background: var(--amarelo); }
.f-vermelho { background: var(--vermelho); }
.f-vermelho_escuro { background: var(--vermelho-e); }
.f-neutro { background: var(--neutro); }

.barra-valor {
  font-size: 13px; font-weight: 600; text-align: right;
  font-variant-numeric: tabular-nums;
}
.barra-dir {
  font-size: 11.5px; color: var(--texto-3); text-align: right;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 860px) {
  .barra-linha { grid-template-columns: 1fr auto; gap: var(--e2); }
  .barra-trilho { grid-column: 1 / -1; }
  .barra-dir { display: none; }
}

/* ---------- cards de alerta ----------
   Pulso lento (1,4s) e nao piscada: o limite de acessibilidade e 3 flashes por
   segundo, e o objetivo aqui e chamar o olho de longe, nao castigar quem esta
   perto. Quem pediu menos movimento no sistema recebe o card parado, com a cor
   e o texto intactos: nada da informacao mora na animacao. */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--e3);
}

.card-alerta {
  border: 1px solid var(--borda);
  border-left: 4px solid var(--neutro);
  border-radius: var(--raio);
  background: var(--cartao-alt);
  padding: var(--e4);
  display: flex; flex-direction: column; gap: var(--e2);
}

.card-topo { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e2); }
.card-tipo {
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--texto-3);
}
.card-relogio {
  font-size: 22px; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.card-detalhe {
  margin: 0; font-size: 13px; color: var(--texto);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Quantas vezes o cliente falou sem ser respondido. Fica junto do nome do
   grupo porque e sobre o grupo, e nao um segundo relogio: o relogio do card ja
   conta desde a primeira dessas mensagens. */
.card-n {
  display: inline-block; margin-left: 8px; padding: 1px 7px;
  border: 1px solid var(--borda-forte); border-radius: 999px;
  font-size: 11px; font-weight: 600; color: var(--texto-3);
  white-space: nowrap; vertical-align: middle;
}
.card-pe {
  display: flex; justify-content: space-between; gap: var(--e2);
  font-size: 11px; color: var(--texto-3); margin-top: auto;
}
.card-pe span:first-child { font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }

.card-alerta.n-verde          { border-left-color: var(--verde); }
.card-alerta.n-verde   .card-relogio { color: var(--verde); }
.card-alerta.n-neutro         { border-left-color: var(--neutro); }
.card-alerta.n-neutro  .card-relogio { color: var(--texto-3); }

.card-alerta.n-amarelo        { border-left-color: var(--amarelo); }
.card-alerta.n-amarelo .card-relogio { color: var(--amarelo); }
.card-alerta.n-amarelo .card-pe span:first-child { color: var(--amarelo); }
.card-alerta.n-amarelo { animation: pulso-amarelo 1.4s ease-in-out infinite; }

.card-alerta.n-vermelho       { border-left-color: var(--vermelho); }
.card-alerta.n-vermelho .card-relogio { color: var(--vermelho); }
.card-alerta.n-vermelho .card-pe span:first-child { color: var(--vermelho); }
.card-alerta.n-vermelho { animation: pulso-vermelho 1.4s ease-in-out infinite; }

@keyframes pulso-amarelo {
  0%, 100% { background: var(--cartao-alt); box-shadow: 0 0 0 0 rgba(232,179,23,0); }
  50%      { background: rgba(232,179,23,.10); box-shadow: 0 0 0 3px rgba(232,179,23,.18); }
}
@keyframes pulso-vermelho {
  0%, 100% { background: var(--cartao-alt); box-shadow: 0 0 0 0 rgba(242,84,91,0); }
  50%      { background: rgba(242,84,91,.14); box-shadow: 0 0 0 3px rgba(242,84,91,.24); }
}

@media (prefers-reduced-motion: reduce) {
  .card-alerta { animation: none !important; }
  .card-alerta.n-amarelo  { background: rgba(232,179,23,.10); }
  .card-alerta.n-vermelho { background: rgba(242,84,91,.14); }
}

/* Alerta ja respondido: sem pulso, recuado, e o relogio congelado no tempo que
   a resposta levou. Ele fica na tela porque e registro, nao porque pede acao. */
.card-alerta.n-feito { border-left-color: var(--verde); opacity: .55; }
.card-alerta.n-feito .card-relogio { color: var(--texto-2); font-size: 17px; }
.card-alerta.n-feito .card-pe span:first-child { color: var(--verde); }

/* Aviso: grupo novo e monitor parado. Nao ha ninguem esperando resposta, entao
   nao pisca e nao escala de cor. O relogio diz ha quanto tempo, sem urgencia. */
.card-alerta.n-aviso { border-left-color: var(--texto-3); }
.card-alerta.n-aviso .card-relogio { color: var(--texto-2); font-size: 17px; }

/* Botao de tratar: dentro do card, discreto o bastante para nao competir com o
   cronometro, e largo o bastante para acertar sem mirar. */
.card-tratar { align-self: flex-start; margin-top: var(--e1); }
.card-alerta.n-vermelho .card-tratar:hover,
.card-alerta.n-amarelo  .card-tratar:hover { background: rgba(255,255,255,.16); }

.card-extra {
  margin: 0; font-size: 12px; color: var(--texto-3);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Selo de grupo parado. Laranja NAO entra na escala da borda: medido com o
   validador, laranja fica entre o amarelo e o vermelho em matiz e os tres
   ficariam com dE abaixo de 15, indistinguiveis ate para quem enxerga cor
   normalmente. Como selo ele so precisa de contraste contra o card, e passa. */
.marca-parado { background: rgba(240,136,60,.18); color: #F0883C; }

/* A mensagem que gerou o alerta. Tres linhas: o suficiente para decidir se
   aquilo pede acao, sem o card virar uma conversa inteira. */
.card-msg {
  margin: 0; font-size: 12.5px; color: var(--texto-2); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-msg b { color: var(--texto-3); font-weight: 600; }

.pino-parado { background: rgba(240,136,60,.22); color: #F0883C; }
.marca-cliente-mudo { background: rgba(255,255,255,.06); color: var(--texto-2); }