/* =============================================================================
   TELA DO SUPORTE — mesma linguagem dos outros sistemas internos da Mères
   (processos-meres, project-meres, cultura-meres): shell com barra lateral
   preta, "mères" + o nome do modulo em azul, cores com nome semantico
   (--ok, --warn, --danger), Bebas Neue nos rotulos de bloco.

   O QUE ESTA TELA PRECISA FAZER, e a versao anterior nao fazia: quando uma
   entrega quebra, dizer EM PORTUGUES o que aconteceu e o que a pessoa do
   suporte deve fazer. Mostrar "Drive 404: File not found" obriga a chamar o
   tecnico -- exatamente o que a diretoria pediu para acabar.
   ========================================================================== */
:root {
  --azul:#0089FF; --azul-2:#0070D1; --azul-claro:#E6F3FF; --azul-borda:#CDE7FF;
  --ink:#0A0A0A; --text:#2B2B2B; --muted:#6B6B66; --grafite:#8C8C8C;
  --bg:#F5F5F3; --surface:#FFFFFF; --surface-2:#FAFAF8; --hover:#F1F1EE;
  --line:#E7E7E3; --line-strong:#D3D3CE;
  --ok:#007D41; --ok-bg:#EAF6EF; --warn:#FF751F; --warn-bg:#FFF4EC; --danger:#E5162B; --danger-bg:#FFF1F2;
  --marinho:#1800AD; --marinho-claro:#F3F1FF;
  --side:#0A0A0A; --side-2:#1A1A1A; --side-text:#B9B9B4;
  --f:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-cap:"Bebas Neue","Inter",Impact,sans-serif;
  --r:14px; --r-sm:10px;
  --shadow:0 1px 2px rgba(10,10,10,.04), 0 6px 20px rgba(10,10,10,.05);
  --shadow-lg:0 2px 6px rgba(10,10,10,.06), 0 24px 60px -18px rgba(10,10,10,.35);
  --ease:cubic-bezier(.2,.8,.2,1);
  /* Uma escala só de tempos. Sem isto cada transição nasce com um número
     diferente e o conjunto parece remendo, não um sistema. */
  --t-toque:.14s;   /* resposta ao dedo: tem que ser quase imediata */
  --t-troca:.30s;   /* troca de conteúdo */
  --t-gaveta:.38s;  /* abrir e fechar coisa grande */
  color-scheme: light;
}
* { box-sizing:border-box; }
/* PRECISA DO !important: .porta e .shell declaram display:grid, e regra de autor
   vence o [hidden] do navegador. Sem isto a porta continua por cima depois de
   entrar, e parece que "nada aconteceu" -- foi o que quebrou em 27/10. */
[hidden] { display:none !important; }
html,body { height:100%; }
body { margin:0; background:var(--bg); color:var(--text); font:400 14px/1.5 var(--f); -webkit-font-smoothing:antialiased; }
button,input { font:inherit; color:inherit; }
button { background:none; border:0; cursor:pointer; }
button:focus-visible,input:focus-visible,a:focus-visible { outline:2px solid var(--azul); outline-offset:2px; border-radius:6px; }
h1,h2,h3 { margin:0; color:var(--ink); font-weight:800; letter-spacing:-.02em; }
p { margin:0; }
.num { font-variant-numeric:tabular-nums; }

/* ------------------------------------------------------------------ porta */
/* A entrada repete a estrutura do PROJECT Mères: marca e contexto à esquerda,
   ação à direita. O botão continua sendo o oficial do Google — a página só
   organiza o espaço ao redor dele, sem imitar nem interceptar o OAuth. */
.porta { min-height:100dvh; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); background:var(--bg); }
.porta-marca { position:relative; overflow:hidden; isolation:isolate; background:var(--ink); color:#fff;
  padding:clamp(32px,4vw,64px); display:flex; flex-direction:column; justify-content:center; gap:24px; }
.porta-marca::before { content:""; position:absolute; right:clamp(-170px,-9vw,-110px); bottom:clamp(-170px,-9vw,-110px);
  width:clamp(360px,36vw,560px); aspect-ratio:1; border-radius:50%; background:var(--azul); z-index:-1; }
.porta-marca::after { content:""; position:absolute; left:-90px; top:-90px; width:250px; aspect-ratio:1;
  border-radius:50%; background:#fff; opacity:.06; z-index:-1; }
.porta-wordmark { display:flex; align-items:baseline; gap:clamp(10px,1vw,16px); white-space:nowrap; }
.porta-wordmark span,.porta-wordmark b { font:800 clamp(42px,4.5vw,68px)/1 var(--f); letter-spacing:-.055em; }
.porta-wordmark span { color:var(--azul); letter-spacing:-.035em; }
.porta-wordmark b { color:#fff; }
.porta-marca > p { max-width:34ch; color:rgba(255,255,255,.78); font-size:clamp(16px,1.35vw,20px); line-height:1.55; }
.porta-main { display:grid; place-items:center; padding:clamp(32px,5vw,80px); }
.porta form { width:min(400px,100%); display:grid; gap:18px; animation:sobe .38s var(--ease); }
.porta-cabecalho { display:grid; gap:12px; margin-bottom:2px; }
.porta-cabecalho h1 { font-size:36px; line-height:1.1; letter-spacing:-.045em; }
.porta-cabecalho p { color:var(--muted); font-size:16px; }
.caixa-google { display:grid; gap:14px; width:100%; }
/* O botão fica 100% nativo. `large` permite a variante personalizada com foto;
   o tema claro e retangular é o desenho oficial que acomoda avatar, conta e G. */
#botao-google { width:100%; min-height:44px; display:flex; align-items:center; justify-content:flex-start; }
.acesso-nota { width:100%; display:grid; grid-template-columns:18px minmax(0,1fr); align-items:start; gap:10px;
  padding:12px 14px; border:1px solid var(--azul-borda); border-radius:12px; background:#F7FBFF;
  color:var(--muted); font-size:12px; line-height:1.4; }
.acesso-nota svg { margin-top:1px; color:var(--azul-2); }
.acesso-nota b { display:block; color:var(--text); font-size:12.5px; margin-bottom:2px; }
.acesso-nota span { display:block; }
.porta .erro { color:var(--danger); background:var(--danger-bg); border:1px solid #FFD2D6;
  border-radius:10px; padding:11px 13px; font-size:13px; font-weight:600; display:none; }
.porta .erro.on { display:block; }
@media (max-width:820px) {
  .porta { grid-template-columns:1fr; }
  .porta-marca { min-height:220px; padding:34px 24px; justify-content:center; gap:14px; }
  .porta-marca::before { width:320px; right:-150px; bottom:-190px; }
  .porta-marca::after { width:180px; left:-75px; top:-85px; }
  .porta-wordmark span,.porta-wordmark b { font-size:clamp(38px,10vw,52px); }
  .porta-marca > p { font-size:15px; max-width:38ch; }
  .porta-main { min-height:calc(100dvh - 220px); padding:42px 24px 56px; place-items:start center; }
  .porta-cabecalho h1 { font-size:32px; }
}
@media (max-width:380px) {
  .porta-wordmark { gap:8px; }
  .porta-wordmark span,.porta-wordmark b { font-size:35px; }
}

/* ------------------------------------------------------------------ shell */
.shell { display:grid; grid-template-columns:256px minmax(0,1fr); height:100vh; }
@media (max-width:900px) { .shell { grid-template-columns:1fr; height:auto; } }
.side { background:var(--side); color:var(--side-text); display:flex; flex-direction:column; padding:16px 12px; gap:6px; overflow-y:auto; }
@media (max-width:900px) { .side { height:auto; } }
/* O logo é o caminho de volta. Antes era um <div> decorativo: a pessoa clicava
   e não acontecia nada, que é o pior tipo de afordância — parece quebrado. */
.side-top { display:flex; align-items:center; gap:7px; width:100%; text-align:left;
  padding:8px 10px; margin:-4px 0 10px; border-radius:var(--r-sm);
  transition:background var(--t-toque), transform var(--t-toque); }
.side-top:hover { background:var(--side-2); }
.side-top:active { transform:scale(.97); }
.side-top b { font:800 23px/1 var(--f); letter-spacing:-.05em; color:#fff; }
.side-top span { font:800 17px/1 var(--f); color:var(--azul); }
/* A seta só aparece quando há para onde voltar. */
.side-top .volta { margin-left:auto; font-size:15px; color:#5E5E58; opacity:0;
  transform:translateX(4px); transition:opacity var(--t-toque), transform var(--t-toque); }
.side-top:hover .volta { opacity:1; transform:none; }
body.na-principal .side-top .volta { display:none; }

/* ------------------------------------------- o indicador que desliza no menu */
/* Em vez de o azul pular de um item para o outro, uma pílula corre entre eles.
   É o mesmo gesto dos outros documentos da Mères, e custa quase nada. */
nav { position:relative; }
.nav-tinta { position:absolute; left:0; right:0; top:0; height:0; border-radius:var(--r-sm);
  background:var(--azul); box-shadow:0 6px 18px -8px rgba(0,137,255,.8); opacity:0; pointer-events:none;
  transition:transform .26s var(--ease), height .26s var(--ease), opacity .2s; }
/* A pílula azul marca SÓ o item escolhido, e só se move quando a aba muda.
   Ela já tentou acompanhar o cursor, por JS, e foi pior: `pointerover` não
   dispara em todo item quando o mouse corre, e a transição de 0,26s nunca
   termina num movimento rápido — a pílula chegava atrasada, parava no meio do
   caminho e, ao descer para as unidades, ficava acesa onde o cursor tinha
   passado por último. Quem marca o item sob o mouse é o :hover do CSS, que o
   navegador mantém sincronizado sempre, sem atraso e sem evento perdido. */
.side-h { font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#77776F; padding:0 11px 6px; margin-top:18px; }
.nav-item { position:relative; z-index:1; display:flex; align-items:center; gap:10px; padding:9px 11px;
  border-radius:var(--r-sm); color:var(--side-text); font-weight:500; width:100%; text-align:left;
  background:transparent;
  /* Entra na hora (0s) e sai com um respiro curto: o realce precisa estar onde
     o cursor está, não onde ele esteve. O fade só existe na saída. */
  transition:color .12s var(--ease), background .16s var(--ease); }
.nav-item:hover:not(.on), .nav-item:focus-visible:not(.on) {
  background:#242424; color:#fff; transition:color 0s, background 0s; }
.nav-item:active { transform:scale(.985); }
.nav-item.on { color:#fff; }

/* Um selo só para os três contadores do menu: o número normal, o de alerta e o
   das unidades. Mesma altura, mesma pílula, mesmo alinhamento à direita —
   antes cada um tinha a sua forma e a coluna ficava torta. */
.selo-n { margin-left:auto; flex:0 0 auto; min-width:26px; height:19px; padding:0 7px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px; font-size:11px; font-weight:700; line-height:1;
  font-variant-numeric:tabular-nums; letter-spacing:.01em;
  background:rgba(255,255,255,.06); color:#8C8C85;
  transition:background var(--t-troca) var(--ease), color var(--t-troca) var(--ease); }
.nav-item:hover .selo-n { background:rgba(255,255,255,.12); color:#D8D8D2; }
.nav-item.on .selo-n { background:rgba(255,255,255,.22); color:#fff; }
.selo-n.grave { background:var(--danger); color:#fff; }
.nav-item:hover .selo-n.grave, .nav-item.on .selo-n.grave { background:var(--danger); color:#fff; }

.side-uni { display:flex; align-items:center; gap:10px; padding:7px 11px;
  border-radius:var(--r-sm); font-size:12.5px; color:var(--side-text); text-align:left; width:100%;
  transition:background var(--t-toque) var(--ease), color var(--t-toque) var(--ease); }
.side-uni .u { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.side-uni:hover, .side-uni.on { background:var(--side-2); color:#fff; }
.side-uni .selo-n { font-size:10.5px; height:18px; min-width:24px; }
.side-uni:hover .selo-n, .side-uni.on .selo-n { background:rgba(255,255,255,.12); color:#D8D8D2; }
.side-foot { margin-top:auto; padding-top:12px; border-top:1px solid #222; display:grid; gap:8px; }
.quem { display:grid; gap:2px; padding:4px 11px; }
.quem b { font-size:12.5px; color:#fff; font-weight:600; overflow:hidden; text-overflow:ellipsis; }
.quem small { font-size:11px; color:#5E5E58; }
.side-status { display:flex; align-items:center; gap:8px; padding:2px 11px; font-size:11.5px; color:#5E5E58; }
.side-status i { width:7px; height:7px; border-radius:50%; background:var(--ok); }
body.sem-contato .side-status i { background:var(--danger); }
.sair { padding:7px 11px; border-radius:9px; color:#77776F; font-size:12px; text-align:left; }
.sair:hover { background:var(--side-2); color:#fff; }

/* --------------------------------------------------------------- conteudo */
.main { overflow-y:auto; padding:0 clamp(16px,2.6vw,36px) 64px; }
.barra { position:sticky; top:0; z-index:10; display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:16px 0; background:linear-gradient(var(--bg) 78%, transparent); }
.barra h1 { font-size:22px; margin-right:auto; }
.janela { display:inline-flex; padding:3px; border-radius:999px; background:var(--surface); border:1px solid var(--line); }
.janela button { padding:7px 14px; border-radius:999px; font-size:12.5px; font-weight:700; color:var(--muted); }
.janela button[aria-pressed="true"] { background:var(--ink); color:#fff; }
/* 330 e não 260: o texto de ajuda ficou mais longo quando "sala" virou
   "subconjunto", e cortava no meio da palavra. */
.busca input { padding:9px 14px; border:1px solid var(--line); border-radius:999px; background:var(--surface); min-width:min(330px,52vw); font-size:13px; }

/* --------------------------------------------------- resumo de atencao */
.alerta { display:flex; align-items:center; gap:16px; padding:18px 22px; border-radius:var(--r); margin-bottom:22px;
  background:var(--ok-bg); border:1px solid #CFE8DB; }
.alerta.mal { background:var(--danger-bg); border-color:#FFD2D6; }
.alerta .sel { flex:none; width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  background:var(--ok); color:#fff; font-size:20px; font-weight:900; }
.alerta.mal .sel { background:var(--danger); }
.alerta b { display:block; font-size:17px; color:var(--ink); font-weight:800; letter-spacing:-.02em; }
.alerta span { font-size:13.5px; color:var(--muted); }
.alerta .ir { margin-left:auto; padding:10px 18px; border-radius:var(--r-sm); background:var(--danger); color:#fff; font-weight:700; font-size:13px; }

/* ------------------------------------------------------- lista de clientes */
.lista { display:grid; gap:10px; }
.cli { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; transition:box-shadow .15s, border-color .15s; }
.cli:hover { box-shadow:var(--shadow); }
.cli.quebrou { border-color:#FFD2D6; }
/* A coluna do HORÁRIO entrou em 28/10: a API já mandava `quando`, mas a tela
   não mostrava em lugar nenhum, e "às que horas saiu?" é metade da pergunta
   que chega pelo telefone. */
/* A coluna do meio foi de 104 para 132 px em 29/10, quando "sala" virou
   "subconjunto": a palavra é cinco letras mais longa e quebrava em duas linhas. */
.cli-topo { display:grid; grid-template-columns:minmax(0,1.7fr) 132px 76px minmax(0,1fr) auto auto; gap:16px; align-items:center;
  width:100%; padding:15px 20px; text-align:left; }
@media (max-width:1040px) { .cli-topo { grid-template-columns:minmax(0,1fr) auto; gap:10px 14px; } .cli-topo .esconde { display:none; } }
.cli-topo:hover { background:var(--surface-2); }
.cli .nome { font-size:15px; font-weight:700; color:var(--ink); }
.cli .sub { font-size:12px; color:var(--grafite); margin-top:2px; }
.cli .cel { font-size:13px; color:var(--text); }
.cli .cel small { display:block; font-size:11px; color:var(--grafite); font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
.cli .hora { font-size:13px; color:var(--text); font-variant-numeric:tabular-nums; }
.cli .hora small { display:block; font-size:11px; color:var(--grafite); font-weight:600; letter-spacing:.04em; text-transform:uppercase; }

.selo { padding:5px 11px; border-radius:999px; font-size:12px; font-weight:700; white-space:nowrap; }
.s-ok { background:var(--ok-bg); color:var(--ok); }
.s-mal { background:var(--danger-bg); color:var(--danger); }
.s-warn { background:var(--warn-bg); color:var(--warn); }
.s-neutro { background:var(--hover); color:var(--muted); }
.s-sombra { background:var(--marinho-claro); color:var(--marinho); }
.chev { color:var(--grafite); transition:transform .18s var(--ease); }
.cli.aberto .chev { transform:rotate(90deg); }

/* ------------------------------------------------------------- o checklist */
/* A GAVETA. `display:none` não anima: a altura salta de zero para tudo e o
   conteúdo pisca. Com grid-template-rows de 0fr para 1fr o navegador interpola
   a altura real, sem ninguém precisar medir nada em JavaScript. */
/* minmax(0,...) e não só `0fr`: uma faixa em `fr` ganha um mínimo automático do
   conteúdo, e a gaveta fechada ficava com 40,8 px — o padding e a borda do
   corpo, que `overflow:hidden` não apaga. Por isso o recorte é um elemento
   PRÓPRIO, sem padding nenhum, e o corpo acolchoado vai dentro dele. */
.gaveta { display:grid; grid-template-rows:minmax(0,0fr); transition:grid-template-rows var(--t-gaveta) var(--ease); }
.cli.aberto .gaveta { grid-template-rows:minmax(0,1fr); }
.gaveta > .recorte { overflow:hidden; min-height:0; }
.corpo { border-top:1px solid var(--line); background:var(--surface-2); padding:20px;
  display:grid; gap:18px; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); }
@media (max-width:1040px) { .corpo { grid-template-columns:1fr; } }
/* O conteúdo entra um pouco depois da gaveta começar a abrir: a gaveta abre o
   espaço, o conteúdo ocupa. Ao contrário parece que o texto empurra a caixa. */
.cli .corpo > * { opacity:0; transform:translateY(6px); transition:opacity var(--t-troca) var(--ease), transform var(--t-troca) var(--ease); }
.cli.aberto .corpo > * { opacity:1; transform:none; transition-delay:.12s; }
/* A frase ocupa a largura toda e vem primeiro: é a resposta, o resto é prova. */
.corpo > .frase { grid-column:1/-1; }
.col-esq { display:grid; gap:16px; align-content:start; min-width:0; }
.passos { display:grid; gap:0; }
.passo { display:grid; grid-template-columns:30px minmax(0,1fr); gap:12px; padding:10px 0; position:relative; }
.passo:not(:last-child)::before { content:""; position:absolute; left:14px; top:34px; bottom:-4px; width:2px; background:var(--line); }
.passo.ok:not(:last-child)::before { background:var(--ok); opacity:.3; }
.passo .bola { width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-size:13px; font-weight:900;
  background:var(--hover); color:var(--grafite); border:2px solid var(--line); z-index:1; }
.passo.ok .bola { background:var(--ok-bg); color:var(--ok); border-color:#CFE8DB; }
.passo.erro .bola { background:var(--danger-bg); color:var(--danger); border-color:#FFD2D6; }
.passo b { font-size:13.5px; color:var(--ink); font-weight:600; }
.passo.nao b { color:var(--grafite); font-weight:500; }
.passo p { font-size:12px; color:var(--muted); margin-top:1px; }
.passo .det { font-size:11.5px; color:var(--grafite); margin-top:3px; word-break:break-all; }
.passo.erro .det { color:var(--danger); }

/* ------------------------------------------------- o que houve e o que fazer */
.acao { display:grid; gap:14px; align-content:start; }
.diag { border-radius:var(--r); padding:16px 18px; display:grid; gap:10px; border:1px solid var(--line); background:var(--surface); }
.diag.mal { border-color:#FFD2D6; background:var(--danger-bg); }
.diag.warn { border-color:#FFE0C8; background:var(--warn-bg); }
.diag .cap { font:400 16px/1 var(--f-cap); letter-spacing:.06em; color:var(--muted); }
.diag.mal .cap { color:var(--danger); } .diag.warn .cap { color:var(--warn); }
.diag .oq { font-size:14px; color:var(--ink); font-weight:600; line-height:1.45; }
.diag .fz { font-size:13px; color:var(--text); line-height:1.5; }
.botao { padding:13px 20px; border-radius:var(--r-sm); font-weight:700; font-size:13.5px; text-align:center; }
.botao.forte { background:var(--ink); color:#fff; }
.botao.forte:hover:not(:disabled) { background:#242424; }
.botao.forte:disabled { background:var(--hover); color:var(--grafite); cursor:not-allowed; }
/* O reenvio completo vira secundário quando só o e-mail falhou: continua ao
   alcance, mas não é mais o que a mão encontra primeiro. */
.botao.leve { background:var(--surface); border:1px solid var(--line-strong); color:var(--text); }
.botao.leve:hover:not(:disabled) { background:var(--hover); }
.botao.leve:disabled { color:var(--grafite); cursor:not-allowed; }
.botao.indo { background:var(--azul); color:#fff; }
.porque { font-size:12.5px; color:var(--muted); line-height:1.5; }

/* ---------------------------------------------------------------- diálogo
   Confirmação e resultado moram na MESMA caixa, de propósito: a mensagem de
   "pronto" ficava num pedaço da tela que o recarregamento da lista apagava
   meio segundo depois, e quem clicava não via nada. Aqui a caixa só sai
   quando a pessoa fecha, e a lista só recarrega depois disso. */
.vidro { position:fixed; inset:0; background:rgba(10,10,10,.45); backdrop-filter:blur(2px);
  display:flex; align-items:center; justify-content:center; padding:24px; z-index:90;
  opacity:0; transition:opacity var(--t-troca) var(--ease); }
.vidro.on { opacity:1; }
.caixa { background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow-lg); max-width:460px; width:100%; padding:24px;
  transform:translateY(8px) scale(.98); transition:transform var(--t-troca) var(--ease); }
.vidro.on .caixa { transform:none; }
.caixa h3 { font-family:var(--f-cap); font-size:22px; letter-spacing:.3px; color:var(--ink); margin-bottom:10px; }
.caixa p { font-size:13.5px; line-height:1.55; color:var(--text); margin-bottom:8px; }
.caixa p.aviso { color:var(--danger); font-weight:700; }
.caixa .pes { display:flex; gap:10px; justify-content:flex-end; margin-top:20px; }
.caixa .pes .botao { flex:0 0 auto; padding:11px 18px; }
.caixa .selo { display:inline-block; font-family:var(--f-cap); font-size:12px; letter-spacing:.6px;
  padding:3px 9px; border-radius:999px; margin-bottom:10px; }
.caixa .selo.bom { background:var(--ok-bg); color:var(--ok); }
.caixa .selo.ruim { background:var(--danger-bg); color:var(--danger); }
.caixa .detalhe { font-size:12.5px; color:var(--muted); margin-top:10px; line-height:1.5; }

/* ------------------------------------------------------ o dia, por unidade */
/* Pedido na reunião de 28/10: "cards com todas as documentações enviadas no
   dia, por unidade". O recorte é HOJE em São Paulo, e não a janela escolhida
   ali em cima — são perguntas diferentes, e misturar as duas dá número errado. */
.dia { display:grid; gap:11px; margin-bottom:22px; }
.dia-h { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.dia-h b { font:400 19px/1 var(--f-cap); letter-spacing:.06em; color:var(--ink); }
.dia-h span { font-size:12.5px; color:var(--muted); }
.dia-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(166px,1fr)); gap:10px; }
.uni-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:14px 16px;
  display:grid; gap:6px; text-align:left; transition:border-color .15s, box-shadow .15s; }
.uni-card:hover { border-color:var(--azul-borda); box-shadow:var(--shadow); }
.uni-card.on { border-color:var(--azul); box-shadow:0 0 0 1px var(--azul); }
.uni-card.mal { border-color:#FFD2D6; }
.uni-card .u { font-size:13px; font-weight:700; color:var(--ink); }
.uni-card .q { display:flex; align-items:baseline; gap:6px; }
.uni-card .q b { font-size:27px; font-weight:800; letter-spacing:-.03em; color:var(--ink); font-variant-numeric:tabular-nums; }
.uni-card .q span { font-size:12px; color:var(--muted); }
.uni-card .p { font-size:11.5px; font-weight:700; }
.uni-card .p.ok { color:var(--ok); }
.uni-card .p.mal { color:var(--danger); }
.uni-card .p.sombra { color:var(--marinho); }
.dia-vazio { padding:17px 20px; border-radius:var(--r); background:var(--surface);
  border:1px dashed var(--line-strong); color:var(--muted); font-size:13px; }

/* --------------------------------------------- por onde chegou ao cliente */
/* Três canais, porque são três as portas pelas quais a documentação chega: a
   pasta do Drive, o e-mail e o WhatsApp. O rótulo vai junto do ícone de
   propósito — bolinha sem nome obriga a decorar a ordem. */
.canais { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.canal { display:inline-flex; align-items:center; gap:5px; padding:4px 9px; border-radius:999px;
  font-size:11.5px; font-weight:700; background:var(--hover); color:var(--grafite); white-space:nowrap; }
.canal svg { width:13px; height:13px; flex:none; }
.canal.ok { background:var(--ok-bg); color:var(--ok); }
.canal.erro { background:var(--danger-bg); color:var(--danger); }
.canal.nao { background:var(--hover); color:var(--grafite); }

/* --------------------------------------------- a frase que responde a ligação */
/* "cliente Y recebeu documento X no e-mail X às Xh" — foi assim que a reunião
   descreveu o que a tela precisa responder. Está escrito por extenso em vez de
   espalhado em colunas, porque é lido em voz alta com o cliente na linha. */
.frase { padding:13px 16px; border-radius:var(--r); font-size:13px; line-height:1.55;
  background:var(--azul-claro); border:1px solid var(--azul-borda); color:var(--ink); }
.frase b { font-weight:700; }
.frase.cinza { background:var(--surface); border-color:var(--line); color:var(--muted); }
.frase.cinza b { color:var(--text); }
.frase.mal { background:var(--danger-bg); border-color:#FFD2D6; }

/* ------------------------------------------------ os documentos, um a um */
.docs { border:1px solid var(--line); border-radius:var(--r); background:var(--surface); overflow:hidden; }
.docs-h { display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  padding:12px 16px; border-bottom:1px solid var(--line); }
.docs-h b { font:400 16px/1 var(--f-cap); letter-spacing:.06em; color:var(--muted); }
.docs-h small { font-size:11.5px; color:var(--grafite); }
.docs ol { margin:0; padding:0; list-style:none; }
.docs li { display:grid; grid-template-columns:17px minmax(0,1fr); gap:10px; align-items:start; padding:9px 16px; font-size:12.5px; }
.docs li + li { border-top:1px solid var(--line); }
.docs li i { width:17px; height:17px; border-radius:50%; display:grid; place-items:center; margin-top:1px;
  font-size:10px; font-weight:900; font-style:normal; }
.docs li.ok i { background:var(--ok-bg); color:var(--ok); }
.docs li.prev i { background:var(--marinho-claro); color:var(--marinho); }
.docs li.nao i { background:var(--hover); color:var(--grafite); }
.docs li span { color:var(--ink); word-break:break-word; }
.docs li small { display:block; color:var(--grafite); font-size:11px; margin-top:1px; }
.docs-sem { padding:14px 16px; font-size:12.5px; color:var(--muted); line-height:1.5; }

/* --------------------------------------------------------- onde quebra */
.etapas { display:grid; grid-template-columns:repeat(6,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
@media (max-width:1100px){ .etapas { grid-template-columns:repeat(3,1fr); } }
@media (max-width:620px) { .etapas { grid-template-columns:repeat(2,1fr); } }
.et { background:var(--surface); padding:18px; display:grid; gap:7px; align-content:start; }
.et .n { font:400 20px/1 var(--f-cap); letter-spacing:.06em; color:var(--grafite); }
.et > b { font-size:13.5px; color:var(--ink); line-height:1.3; min-height:2.6em; }
.et .barra2 { height:7px; border-radius:99px; background:var(--hover); display:flex; overflow:hidden; }
.et .barra2 i.b-ok { background:var(--ok); } .et .barra2 i.b-mal { background:var(--danger); }
.et .c { font-size:12.5px; color:var(--muted); }
.et.mal { background:var(--danger-bg); }

/* ------------------------------------------------------- monitoramento */
/* Herdou o painel público, que foi apagado em 28/10/2026. Carrega o que ele
   tinha de substância — a rotina está viva?, o ritmo de cada endereço, tudo
   que chegou — sem a esteira: onde cada documento para já é a aba "Onde
   quebra", e duas telas para a mesma pergunta era o que havia de redundante. */
.mon { display:grid; gap:18px; }
.mon-saude { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px; }
.sinal { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:16px 18px; display:grid; gap:5px; }
.sinal.mal { border-color:#FFD2D6; background:var(--danger-bg); }
.sinal .k { font:400 15px/1 var(--f-cap); letter-spacing:.06em; color:var(--muted); }
.sinal.mal .k { color:var(--danger); }
.sinal .v { font-size:19px; font-weight:800; letter-spacing:-.02em; color:var(--ink); font-variant-numeric:tabular-nums; }
.sinal .o { font-size:12px; color:var(--muted); line-height:1.4; }
.mon-nums { display:grid; grid-template-columns:repeat(auto-fit,minmax(132px,1fr)); gap:10px; }
.mon-num { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:13px 15px; display:grid; gap:2px; }
.mon-num.mal { border-color:#FFD2D6; }
.mon-num b { font-size:22px; font-weight:800; letter-spacing:-.03em; color:var(--ink); font-variant-numeric:tabular-nums; }
.mon-num.mal b { color:var(--danger); }
.mon-num span { font-size:11.5px; color:var(--muted); line-height:1.35; }
.mon-tab { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.mon-tab h2 { font:400 17px/1 var(--f-cap); letter-spacing:.06em; color:var(--muted); padding:14px 18px; border-bottom:1px solid var(--line); }
.mon-rol { overflow-x:auto; }
.mon-tab table { width:100%; border-collapse:collapse; font-size:12.5px; min-width:600px; }
.mon-tab th, .mon-tab td { text-align:left; padding:10px 14px; border-bottom:1px solid var(--line); white-space:nowrap; }
.mon-tab tbody tr:last-child td { border-bottom:0; }
.mon-tab th { font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.mon-tab td:first-child { font-weight:700; color:var(--ink); }
.mon-tab td.n { font-variant-numeric:tabular-nums; }
/* No log técnico o texto é a informação: `nowrap` o cortaria exatamente onde
   está o nome do modelo ou a chave do documento. */
.mon-tab td.cru { white-space:normal; font-size:11.5px; color:var(--muted); word-break:break-word; min-width:220px; }
.modo { padding:3px 9px; border-radius:999px; font-size:11px; font-weight:700; }
.modo.sombra { background:var(--marinho-claro); color:var(--marinho); }
.modo.ativo { background:var(--ok-bg); color:var(--ok); }

.vazio { padding:56px 20px; text-align:center; color:var(--muted); background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r); }
.vazio b { display:block; font-size:16px; color:var(--ink); margin-bottom:6px; }
.faixa { display:none; position:fixed; inset:auto 0 0 0; z-index:60; background:var(--danger); color:#fff;
  padding:14px 20px; font-size:13.5px; font-weight:700; text-align:center; }
body.sem-contato .faixa { display:block; }
/* ===========================================================================
   SUAVIDADE
   Trocar de aba era um corte seco: o conteúdo antigo sumia e o novo aparecia
   no mesmo quadro, e o olho perdia o fio. Aqui a troca tem direção — o novo
   sobe para o lugar — e a lista entra escalonada, para a pessoa perceber que
   são muitas linhas antes de começar a ler.
   =========================================================================== */
@keyframes sobe { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
@keyframes aparece { from { opacity:0; } to { opacity:1; } }

#vista.entrando { animation:sobe var(--t-troca) var(--ease); }
#cards.entrando { animation:sobe var(--t-troca) var(--ease); }

/* O atraso é limitado: numa lista de 200 clientes, escalonar tudo faria a
   última linha aparecer meio minuto depois. Doze passos bastam para o olho
   ler "é uma lista". */
.lista .cli { animation:sobe .34s var(--ease) backwards; animation-delay:calc(var(--k,0) * 22ms); }
.dia-cards .uni-card { animation:sobe .3s var(--ease) backwards; animation-delay:calc(var(--k,0) * 30ms); }

/* Enquanto relê, a tela esmaece de leve em vez de congelar: diz que está viva
   sem roubar a leitura de quem está no meio de um atendimento. */
.main.relendo #vista, .main.relendo #cards { opacity:.55; transition:opacity .2s; }
.main #vista, .main #cards { transition:opacity .25s; }

/* A porta não some, ela sai. */
.porta { transition:opacity var(--t-troca) var(--ease), transform var(--t-troca) var(--ease); }
.porta.saindo { opacity:0; transform:scale(.98); }
.shell { animation:aparece .4s var(--ease); }

/* Resposta ao dedo. Sem isto o clique não tem peso nenhum. */
.botao, .uni-card, .side-uni, .filtro button, .janela button, .det-nav button,
.det-pontos button, .gloss-abrir, .ir, .cli-topo {
  transition:background var(--t-toque), border-color var(--t-toque), color var(--t-toque),
             box-shadow var(--t-toque), transform var(--t-toque);
}
.botao:active:not(:disabled), .uni-card:active, .side-uni:active, .filtro button:active,
.janela button:active, .det-nav button:active:not(:disabled), .ir:active { transform:scale(.97); }
.cli-topo:active { transform:scale(.995); }

/* Quem prefere menos movimento recebe a mesma tela, parada. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after { transition:none !important; animation:none !important; }
  .cli .corpo > * { opacity:1; transform:none; }
}