/* PeuOne — layout de app: lista em cartões, conversa em tela cheia no celular.
   Escuro por padrão (como no aparelho do Peu); se o sistema estiver claro, vira claro. */
:root{
  --acento:#2E6E78;          /* petróleo da marca — trocar aqui muda o app inteiro */
  --acento-forte:#38848f;
  --acento-fraco:rgba(46,110,120,.18);
  --bg:#0e1114;              /* fundo da tela */
  --superficie:#161b1f;      /* cartão, topo, compositor */
  --superficie-2:#1e252a;    /* apertado/ativo */
  --linha:#252d33;
  --texto:#e7ebec;
  --texto-fraco:#8b979b;
  --erro:#e06a6a;
  --sombra:0 1px 2px rgba(0,0,0,.35), 0 10px 28px rgba(0,0,0,.28);
  --raio:16px;
  --topo-h:58px;
  --largura-leitura:740px;
  --toque:44px;
}
@media (prefers-color-scheme: light){
  :root{
    --acento-fraco:rgba(46,110,120,.12);
    --bg:#F7F6F3; --superficie:#ffffff; --superficie-2:#f1efea; --linha:#e4e2db;
    --texto:#22282a; --texto-fraco:#767d7c; --erro:#b23c3c;
    --sombra:0 1px 2px rgba(30,42,46,.06), 0 8px 24px rgba(30,42,46,.06);
  }
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--texto);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-text-size-adjust:100%; overscroll-behavior-y:none;
  -webkit-tap-highlight-color:transparent;
}
/* --altura é escrita pelo app.js com a altura que sobra da janela.
   Sem isso, quando o teclado do iPhone abre, o campo de escrever some atrás dele. */
.oculto{display:none !important}
[hidden]{display:none !important}   /* o app esconde botão pelo atributo hidden */
button{font:inherit; cursor:pointer}
input,textarea{font:inherit; color:inherit}

/* ------------------------------------------------------------------ login */
.tela-login{min-height:var(--altura,100dvh); display:flex; align-items:center; justify-content:center; padding:24px}
.cartao-login{
  width:100%; max-width:360px; background:var(--superficie); border:1px solid var(--linha);
  border-radius:20px; padding:32px 26px 26px; box-shadow:var(--sombra); text-align:center;
}
/* a logo é uma plaquinha escura de cantos redondos — funciona no tema claro e no escuro */
.marca-grande{width:74px; height:74px; display:block; margin:0 auto}
.cartao-login h1{font:600 27px/1 Poppins,sans-serif; letter-spacing:.5px; color:var(--acento-forte); margin:12px 0 4px}
.cartao-login .sub{color:var(--texto-fraco); font-size:14px; margin:0 0 26px}
.cartao-login label{
  display:block; text-align:left; font-size:12.5px; font-weight:600; color:var(--texto-fraco);
  margin:14px 0 6px; letter-spacing:.3px;
}
.cartao-login input{
  width:100%; padding:14px; border:1px solid var(--linha); border-radius:12px;
  background:var(--bg); outline:none;
}
.cartao-login input:focus{border-color:var(--acento-forte); box-shadow:0 0 0 3px var(--acento-fraco)}
.cartao-login button[type=submit]{
  width:100%; margin-top:24px; padding:15px; border:none; border-radius:12px;
  background:var(--acento); color:#fff; font-weight:600; letter-spacing:.3px;
}
.cartao-login button[disabled]{opacity:.6}
.erro{color:var(--erro); font-size:13.5px; margin:14px 0 0}

/* ------------------------------------------------------------------ esqueleto */
.app{display:flex; height:var(--altura,100dvh); overflow:hidden}
.icone{
  background:none; border:none; color:var(--texto-fraco);
  width:var(--toque); height:var(--toque); flex:none;
  display:grid; place-items:center; border-radius:12px;
}
.icone:active{background:var(--superficie-2); color:var(--texto)}

/* ---------------------------------------------------- painel das conversas */
.painel{
  width:340px; flex:none; position:relative; background:var(--bg);
  border-right:1px solid var(--linha); display:flex; flex-direction:column;
}
.painel-topo{
  height:var(--topo-h); flex:none; display:flex; align-items:center; gap:4px; padding:0 6px;
  background:var(--bg);
}
.marca{flex:1; min-width:0; display:flex; align-items:center; justify-content:center; gap:9px}
.marca-quadro{
  width:28px; height:28px; flex:none; border-radius:8px; background:var(--superficie-2);
  display:grid; place-items:center; color:var(--acento-forte);
}
.marca-quadro svg{width:19px; height:19px}
/* A marca da gaveta: monograma P1 na conta do Peu, plaquinha da propria conta
   nas outras. Duas marcas no HTML e uma escondida e mais simples que gerar um
   index.html por pessoa. */
.marca-quadro-foto{display:none; width:100%; height:100%; border-radius:inherit; object-fit:cover}
html:not([data-perfil="peu"]) .marca-quadro svg{display:none}
html:not([data-perfil="peu"]) .marca-quadro-foto{display:block}
.marca-nome{
  font:600 15px/1 Poppins,sans-serif; letter-spacing:3px; color:var(--texto);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* filtrando por assunto: o nome do assunto ocupa o lugar da marca, com o ✕ do lado */
.marca.filtrando .marca-nome{letter-spacing:.2px; font-size:15.5px}
.limpar-filtro{
  flex:none; width:26px; height:26px; margin-left:-2px;
  display:grid; place-items:center; border:none; border-radius:50%;
  background:var(--superficie-2); color:var(--texto-fraco);
}
.limpar-filtro:active{color:var(--texto)}
.caixa-busca{flex:none; padding:2px 12px 8px}
.caixa-busca input{
  width:100%; padding:11px 14px; border:1px solid var(--linha); border-radius:12px;
  background:var(--superficie); outline:none;
}
.caixa-busca input:focus{border-color:var(--acento-forte)}

.lista-conversas{
  flex:1; overflow-y:auto; overscroll-behavior:contain; padding:4px 12px 96px;
  display:flex; flex-direction:column; gap:10px;
  scrollbar-width:thin; -webkit-overflow-scrolling:touch;
}
/* cada conversa é um cartão: nome grande, prévia embaixo, número e hora do lado */
.item-conversa{
  display:flex; align-items:flex-start; gap:2px;
  background:var(--superficie); border:1px solid var(--linha); border-radius:var(--raio);
  padding:13px 6px 13px 15px;
}
.item-conversa.ativa{border-color:var(--acento-forte); background:var(--superficie)}
.item-conversa:active{background:var(--superficie-2)}
.item-abrir{
  flex:1; min-width:0; text-align:left; background:none; border:none; color:inherit; padding:0;
}
.item-linha1{display:flex; align-items:baseline; gap:8px}
.item-conversa .t{
  flex:1; min-width:0; font:600 16px/1.35 Poppins,sans-serif; color:var(--texto);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.item-conversa .n{flex:none; font-size:12px; color:var(--texto-fraco); font-variant-numeric:tabular-nums}
.item-conversa .h{flex:none; font-size:12px; color:var(--texto-fraco); font-variant-numeric:tabular-nums}
.item-conversa .p{
  display:block; margin-top:3px; font-size:13.5px; line-height:1.45; color:var(--texto-fraco);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.item-mais{
  flex:none; width:34px; height:34px; margin-top:-4px;
  background:none; border:none; border-radius:10px; color:var(--texto-fraco);
  display:grid; place-items:center;
}
.item-mais:active{background:var(--superficie-2)}
.vazio{color:var(--texto-fraco); font-size:14px; text-align:center; padding:34px 16px; line-height:1.7}

/* botão redondo de conversa nova, flutuando no canto */
.fab{
  position:absolute; right:18px; bottom:calc(18px + env(safe-area-inset-bottom));
  width:56px; height:56px; border:none; border-radius:50%;
  background:var(--acento); color:#fff; display:grid; place-items:center;
  box-shadow:0 6px 20px rgba(0,0,0,.35); z-index:20;
}
.fab:active{background:var(--acento-forte)}

/* ------------------------------------------------- gaveta dos assuntos (o ☰)
   Entra por cima, deslizando da esquerda. Fica escondida por "visibility" e não
   por "display", senão não teria como deslizar — e o atraso na transição é o que
   faz ela sumir só DEPOIS de terminar de sair. */
.gaveta{
  position:fixed; top:0; left:0; z-index:70;
  width:min(300px, 84vw); height:var(--altura,100dvh);
  background:var(--superficie); border-right:1px solid var(--linha);
  box-shadow:var(--sombra);
  display:flex; flex-direction:column;
  padding:env(safe-area-inset-top) 0 calc(6px + env(safe-area-inset-bottom));
  transform:translateX(-100%); visibility:hidden;
  transition:transform .22s ease, visibility 0s linear .22s;
}
.gaveta.aberta{transform:none; visibility:visible; transition:transform .22s ease, visibility 0s}
.gaveta-topo{
  flex:none; display:flex; align-items:center; gap:11px;
  padding:16px 16px 14px; border-bottom:1px solid var(--linha);
}
.gaveta-quem{min-width:0; display:flex; flex-direction:column; gap:2px}
.gaveta-quem .quem{font-size:12px; color:var(--texto-fraco)}
.gaveta-rotulo{
  flex:none; margin:0; padding:14px 18px 8px;
  font-size:11.5px; font-weight:600; letter-spacing:1.4px; text-transform:uppercase;
  color:var(--texto-fraco);
}
.lista-assuntos{
  flex:1; overflow-y:auto; overscroll-behavior:contain; padding:0 10px 10px;
  display:flex; flex-direction:column; gap:2px;
  scrollbar-width:thin; -webkit-overflow-scrolling:touch;
}
.assunto{
  display:flex; align-items:center; gap:11px; width:100%; min-height:var(--toque);
  padding:10px 12px; border:none; border-radius:12px;
  background:none; color:var(--texto); text-align:left; font-size:15px;
}
.assunto:active{background:var(--superficie-2)}
.assunto.ativo{background:var(--acento-fraco); color:var(--texto); font-weight:600}
.assunto .ponto{
  flex:none; width:9px; height:9px; border-radius:50%; background:var(--texto-fraco);
}
.assunto .nome{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.assunto .conta{
  flex:none; font-size:12px; color:var(--texto-fraco); font-variant-numeric:tabular-nums;
}
.assunto.vazio-ainda{opacity:.5}          /* assunto sugerido, ainda sem conversa */
.gaveta-pe{flex:none; padding:8px 10px 0; border-top:1px solid var(--linha)}
.item-menu{
  display:block; width:100%; text-align:left; background:none; border:none; color:var(--texto);
  padding:12px; border-radius:10px; font-size:14.5px;
}
.item-menu:active{background:var(--superficie-2)}
.fundo-menu{
  position:fixed; inset:0; z-index:65; background:rgba(0,0,0,.5);
  opacity:0; visibility:hidden; transition:opacity .22s ease, visibility 0s linear .22s;
}
.fundo-menu.aberto{opacity:1; visibility:visible; transition:opacity .22s ease, visibility 0s}

/* etiqueta do assunto no cartão da conversa */
.item-conversa .etiqueta{
  display:inline-flex; align-items:center; gap:5px; margin-top:6px;
  font-size:11.5px; color:var(--texto-fraco);
}
.item-conversa .etiqueta i{width:7px; height:7px; border-radius:50%; background:currentColor}

/* fichas de assunto na janelinha da conversa */
.chips{display:flex; flex-wrap:wrap; gap:7px; margin-top:2px}
.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 12px; border:1px solid var(--linha); border-radius:999px;
  background:var(--bg); color:var(--texto); font-size:13.5px;
}
.chip i{width:7px; height:7px; border-radius:50%; background:var(--texto-fraco)}
.chip.ativo{border-color:var(--acento-forte); background:var(--acento-fraco); font-weight:600}
#assunto-novo{margin-top:9px}

/* ---------------------------------------------------- painel da conversa */
.conversa{flex:1; display:flex; flex-direction:column; min-width:0; background:var(--bg); position:relative}
.topo{
  height:var(--topo-h); flex:none; display:flex; align-items:center; gap:4px; padding:0 6px;
  border-bottom:1px solid var(--linha); background:var(--bg);
}
#btn-voltar{display:none}
.topo-texto{flex:1; min-width:0; padding:0 6px}
.topo h2{
  margin:0; font:600 16px/1.25 Poppins,sans-serif;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.numero{font-size:11.5px; color:var(--texto-fraco); font-variant-numeric:tabular-nums}

.mensagens{
  flex:1; overflow-y:auto; overscroll-behavior:contain; padding:20px 16px 10px;
  display:flex; flex-direction:column; gap:6px;
  scrollbar-width:thin; -webkit-overflow-scrolling:touch;
}
.linha{display:flex; max-width:var(--largura-leitura); width:100%; margin:0 auto}
.linha.eu{justify-content:flex-end; margin-top:16px}
.linha.ele{margin-bottom:18px}
.bolha{overflow-wrap:anywhere}
/* o que EU mando: bolha, à direita */
.linha.eu .bolha{
  max-width:85%; padding:12px 15px; border-radius:var(--raio); border-bottom-right-radius:6px;
  background:var(--acento); color:#fff; box-shadow:var(--sombra);
}
/* o que ELE responde: sem caixa, largura toda — resposta longa lê melhor assim */
.linha.ele .bolha{max-width:100%; width:100%; padding:2px 0; font-size:16.5px; line-height:1.65}
.linha.ele .bolha.falhou{color:var(--erro); border-left:3px solid var(--erro); padding-left:12px}
.bolha p{margin:0 0 11px}
.bolha p:last-child,.bolha ul:last-child,.bolha ol:last-child,.bolha pre:last-child{margin-bottom:0}
.bolha ul,.bolha ol{margin:0 0 11px; padding-left:22px}
.bolha li{margin:5px 0}
.bolha h1,.bolha h2,.bolha h3{font:600 16.5px/1.35 Poppins,sans-serif; margin:18px 0 8px}
.bolha h1:first-child,.bolha h2:first-child,.bolha h3:first-child{margin-top:0}
.bolha hr{border:none; border-top:1px solid var(--linha); margin:16px 0}
.bolha code{
  background:var(--superficie-2); padding:1.5px 5px; border-radius:6px;
  font:13px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.linha.eu .bolha code{background:rgba(255,255,255,.16)}
.bolha pre{
  background:#0a0d0f; border:1px solid var(--linha); color:#dfe9ea;
  padding:13px 14px; border-radius:12px; overflow-x:auto; margin:0 0 11px;
  -webkit-overflow-scrolling:touch;
}
.bolha pre code{background:none; padding:0; color:inherit; font-size:12.5px; line-height:1.55}
.bolha a{color:var(--acento-forte); text-decoration:underline}
.linha.eu .bolha a{color:inherit}
.bolha blockquote{margin:0 0 11px; padding-left:12px; border-left:3px solid var(--acento-forte); color:var(--texto-fraco)}
.cursor::after{content:"▌"; color:var(--acento-forte); animation:pisca 1s steps(2) infinite; margin-left:1px}
@keyframes pisca{0%,50%{opacity:1}50.01%,100%{opacity:0}}

.status-linha{
  flex:none; padding:0 16px 8px; font-size:12.5px; color:var(--texto-fraco);
  display:flex; align-items:center; gap:7px;
  max-width:var(--largura-leitura); width:100%; margin:0 auto;
}
.status-linha .bolinha{
  width:7px; height:7px; border-radius:50%; background:var(--acento-forte);
  animation:pulsa 1.2s ease-in-out infinite;
}
@keyframes pulsa{0%,100%{opacity:.35; transform:scale(.8)}50%{opacity:1; transform:scale(1.15)}}
/* ha quanto tempo ele esta nisso — sem isto nao da pra saber se travou ou
   se esta pensando, que e a queixa numero 1 de quem usa chat de IA */
.status-linha .quando{opacity:.62; font-variant-numeric:tabular-nums}

/* ------------------------------------------------------- anexo (foto, audio) */
.anexo{margin:0 0 8px}
.anexo img{
  max-width:min(100%,300px); max-height:340px; border-radius:12px; display:block;
  cursor:zoom-in; border:1px solid var(--linha);
}
.anexo audio{width:min(100%,290px); height:38px; display:block}
/* o que ELE leu do audio — se estiver errado, da pra ver na hora */
.anexo .transcricao{
  margin-top:6px; font-size:13px; line-height:1.45; color:var(--texto-fraco);
  border-left:2px solid var(--acento-forte); padding-left:9px;
}
.linha.eu .anexo .transcricao{color:inherit; opacity:.85; border-left-color:currentColor}
.anexo .arquivo{
  display:inline-block; padding:8px 12px; border-radius:10px; font-size:14px;
  background:rgba(255,255,255,.07); border:1px solid var(--linha);
  color:inherit; text-decoration:none;
}
/* o arquivo escolhido, esperando ir junto com a mensagem */
.anexo-pendente{
  display:flex; align-items:center; gap:8px; margin:0 4px 8px; padding:7px 11px;
  border:1px dashed var(--linha); border-radius:10px;
  font-size:12.5px; color:var(--texto-fraco);
  max-width:var(--largura-leitura); width:calc(100% - 8px);
}
.anexo-pendente span{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* miniatura do print colado — a prova visual de que a imagem certa entrou */
.anexo-mini{
  flex:none; width:34px; height:34px; object-fit:cover;
  border-radius:6px; border:1px solid var(--linha); background:#000;
}
/* arrastar arquivo pra cima da conversa (no computador) */
.conversa.soltando::after{
  content:"Solte a imagem aqui";
  position:absolute; inset:0; z-index:5; display:grid; place-items:center;
  font-size:14px; color:var(--texto-fraco);
  background:rgba(14,17,20,.82); border:2px dashed var(--linha); border-radius:12px;
  pointer-events:none;
}
.anexo-pendente button{
  border:none; background:none; color:var(--texto-fraco); cursor:pointer;
  font-size:15px; line-height:1; padding:2px 4px;
}
#btn-anexar,#btn-gravar{
  flex:none; border:none; background:none; color:var(--texto-fraco);
  cursor:pointer; padding:7px; border-radius:50%; display:grid; place-items:center;
}
#btn-anexar:active,#btn-gravar:active{background:rgba(255,255,255,.09)}
#btn-gravar.gravando{color:var(--erro)}
.status-linha .bolinha.gravando{background:var(--erro)}

/* recado do proprio app (turno interrompido, parado no meio) — nao e ele falando */
.linha.aviso{justify-content:center; margin:10px auto 14px}
.linha.aviso .bolha{
  font-size:12.5px; color:var(--texto-fraco); text-align:center;
  border:1px dashed var(--linha); border-radius:10px; padding:7px 13px;
  max-width:82%;
}

/* ---------------------------------------------------- compositor */
.compositor{
  flex:none; padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  border-top:1px solid var(--linha); background:var(--superficie);
}
.campo{
  position:relative; max-width:var(--largura-leitura); margin:0 auto;
  display:flex; align-items:flex-end;
  border:1px solid var(--linha); border-radius:24px; background:var(--bg);
  padding:5px 5px 5px 0; transition:border-color .15s;
}
.campo:focus-within{border-color:var(--acento-forte); box-shadow:0 0 0 3px var(--acento-fraco)}
.compositor textarea{
  flex:1; min-width:0; resize:none; max-height:150px; min-height:38px;
  padding:8px 6px 8px 16px; border:none; background:none; outline:none; line-height:1.5;
}
#btn-enviar,#btn-parar{
  flex:none; width:38px; height:38px; border:none; border-radius:50%;
  color:#fff; display:grid; place-items:center;
}
#btn-enviar{background:var(--acento)}
#btn-enviar:disabled{opacity:.45}
#btn-parar{background:var(--texto-fraco)}

/* ------------------------------------------------------------------ modal */
.modal{
  position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:60;
  display:flex; align-items:center; justify-content:center; padding:22px;
}
.modal-cartao{
  width:100%; max-width:340px; background:var(--superficie); border:1px solid var(--linha);
  border-radius:18px; padding:22px; box-shadow:var(--sombra);
}
.modal-cartao h3{margin:0 0 14px; font:600 17px/1.2 Poppins,sans-serif}
.modal-cartao label{display:block; font-size:12.5px; font-weight:600; color:var(--texto-fraco); margin:12px 0 5px}
.modal-cartao input{
  width:100%; padding:12px 13px; border:1px solid var(--linha); border-radius:11px;
  background:var(--bg); outline:none;
}
.modal-cartao input:focus{border-color:var(--acento-forte)}
.dica-mini{font-size:12.5px; color:var(--texto-fraco); margin:12px 0 0}
.modal-botoes{display:flex; gap:9px; margin-top:20px}
.modal-botoes button{
  flex:1; padding:13px; border:none; border-radius:11px; background:var(--acento);
  color:#fff; font-weight:600;
}
.btn-secundario{background:var(--superficie-2) !important; color:var(--texto) !important}
.btn-arquivar{
  width:100%; margin-top:14px; padding:13px; border:1px solid var(--linha);
  border-radius:11px; background:none; color:var(--erro); font-weight:600;
}

/* ------------------------------------------------------------------ celular:
   duas telas de verdade — a lista ocupa tudo, a conversa entra por cima.  */
@media (max-width:820px){
  .painel{
    width:100%; border-right:none;
    padding-top:env(safe-area-inset-top);
  }
  .conversa{
    position:fixed; top:0; left:0; right:0; z-index:50;
    height:var(--altura,100dvh); transform:translateX(100%);
    transition:transform .2s ease; padding-top:env(safe-area-inset-top);
  }
  .app.ver-conversa .conversa{transform:none}
  #btn-voltar{display:grid}
  .topo h2{font-size:15.5px}
  .linha.eu .bolha{max-width:88%}
  .mensagens{padding:16px 14px 8px}
  .compositor{padding-left:8px; padding-right:8px}
  .lista-conversas{padding-left:10px; padding-right:10px}
}

/* ================================================================= FOCO PDV
   O painel de vendas do PDVLink. Tela inteira por cima de tudo — não é uma
   janelinha: dá pra navegar dentro dele (cliente, produto, pedido) e o botão
   de voltar desempilha até fechar.

   Cores de situação: as quatro são RESERVADAS pra estado (bom / atenção /
   neutro / grave) e nunca viram "mais uma cor de série". Foram escolhidas com o
   validador do dataviz e passam nos dois modos: faixa de luminosidade, piso de
   croma, separação para daltonismo (protan/deutan) e contraste contra a
   superfície. E nenhuma delas aparece sozinha — o nome está sempre do lado. */
:root{
  --pdv-bom:#0A7E3A;
  --pdv-atencao:#C58501;
  --pdv-neutro:#0096AF;
  --pdv-grave:#C4483E;
}
@media (prefers-color-scheme: light){
  :root{
    --pdv-bom:#006129;
    --pdv-atencao:#C78707;
    --pdv-neutro:#139CB6;
    --pdv-grave:#A21B18;
  }
}

.pdv{
  position:fixed; inset:0; z-index:90; background:var(--bg);
  display:flex; flex-direction:column; height:var(--altura,100dvh);
  padding-top:env(safe-area-inset-top);
}
.pdv-topo{
  height:var(--topo-h); flex:none; display:flex; align-items:center; gap:4px;
  padding:0 6px; border-bottom:1px solid var(--linha);
}
.pdv-topo .topo-texto{flex:1; min-width:0; padding:0 6px}
.pdv-topo h2{
  margin:0; font:600 16px/1.25 Poppins,sans-serif;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* o seletor de mês: as setas são alvo de 44px, o nome fica no meio */
.pdv-mes{
  flex:none; display:flex; align-items:center; justify-content:space-between;
  padding:8px 8px 10px; border-bottom:1px solid var(--linha);
}
.mes-seta{
  background:none; border:none; color:var(--texto-fraco);
  width:var(--toque); height:var(--toque); flex:none;
  display:grid; place-items:center; border-radius:12px;
}
.mes-seta:active{background:var(--superficie-2); color:var(--texto)}
.mes-seta:disabled{opacity:.28}
.mes-nome{flex:1; min-width:0; text-align:center; display:flex; flex-direction:column; gap:2px}
.mes-nome strong{font:600 15.5px/1.2 Poppins,sans-serif}
.mes-nome span{font-size:11.5px; color:var(--texto-fraco)}

.pdv-corpo{
  flex:1; overflow-y:auto; overscroll-behavior:contain;
  padding:14px 14px calc(24px + env(safe-area-inset-bottom));
  scrollbar-width:thin; -webkit-overflow-scrolling:touch;
}
.pdv-corpo > *{max-width:560px; margin-left:auto; margin-right:auto}
.pdv-vazio{color:var(--texto-fraco); font-size:14px; text-align:center; padding:40px 16px; line-height:1.8}
.pdv-trilha{
  margin:0 0 10px; font-size:11.5px; letter-spacing:1.2px; text-transform:uppercase;
  color:var(--texto-fraco); font-weight:600;
}

/* o número da capa — é o que ele abre o app pra ver */
.pdv-capa{display:flex; flex-direction:column; gap:4px; padding:4px 2px 16px}
.pdv-capa .rotulo{font-size:12.5px; color:var(--texto-fraco)}
.pdv-capa .valor{
  font:600 30px/1.15 Poppins,sans-serif; letter-spacing:-.5px;
  font-variant-numeric:tabular-nums;
}
.pdv-capa.pequena .rotulo{font-size:14px; color:var(--texto); font-weight:600; line-height:1.35}
.pdv-capa.pequena .valor{font-size:25px}
.pdv-capa .nota{font-size:12.5px; color:var(--texto-fraco); line-height:1.5}

.pdv-kpis{display:flex; gap:8px; margin-bottom:16px}
.pdv-kpi{
  flex:1; min-width:0; background:var(--superficie); border:1px solid var(--linha);
  border-radius:14px; padding:11px 10px; display:flex; flex-direction:column; gap:2px;
}
.pdv-kpi strong{font:600 17px/1.2 Poppins,sans-serif; font-variant-numeric:tabular-nums}
.pdv-kpi span{font-size:11px; color:var(--texto-fraco)}

.pdv-cartao{
  background:var(--superficie); border:1px solid var(--linha); border-radius:var(--raio);
  padding:6px 6px 8px; margin-bottom:14px;
}
.pdv-cartao-topo{display:flex; align-items:center; justify-content:space-between; padding:10px 10px 8px}
.pdv-cartao-topo h3{margin:0; font:600 13.5px/1.2 Poppins,sans-serif; color:var(--texto)}

/* --------------------------------------------------- linha com barra atrás */
.pdv-linha{
  position:relative; display:block; width:100%; text-align:left;
  background:none; border:none; color:var(--texto);
  padding:9px 10px 10px; border-radius:11px; min-height:var(--toque);
}
button.pdv-linha:active{background:var(--superficie-2)}
.pdv-trilho{
  position:absolute; left:10px; right:10px; bottom:6px; height:3px;
  border-radius:2px; background:var(--linha); overflow:hidden;
}
.pdv-enchimento{
  display:block; height:100%; border-radius:2px; background:var(--acento-forte);
}
.pdv-linha-texto{display:flex; align-items:baseline; gap:10px}
.pdv-linha-nome{
  flex:1; min-width:0; font-size:13.5px; line-height:1.35;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pdv-linha-valor{
  flex:none; font-size:13.5px; font-weight:600; font-variant-numeric:tabular-nums;
}
.pdv-linha-sub{
  display:block; margin-top:2px; font-size:11.5px; color:var(--texto-fraco);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* situação: a cor entra na barra e num pontinho — o nome está sempre escrito */
.pdv-linha.f-bom .pdv-enchimento{background:var(--pdv-bom)}
.pdv-linha.f-atencao .pdv-enchimento{background:var(--pdv-atencao)}
.pdv-linha.f-neutro .pdv-enchimento{background:var(--pdv-neutro)}
.pdv-linha.f-grave .pdv-enchimento{background:var(--pdv-grave)}
.pdv-linha[class*=" f-"] .pdv-linha-nome::before{
  content:""; display:inline-block; width:8px; height:8px; border-radius:50%;
  margin-right:7px; vertical-align:baseline; background:var(--texto-fraco);
}
.pdv-linha.f-bom .pdv-linha-nome::before{background:var(--pdv-bom)}
.pdv-linha.f-atencao .pdv-linha-nome::before{background:var(--pdv-atencao)}
.pdv-linha.f-neutro .pdv-linha-nome::before{background:var(--pdv-neutro)}
.pdv-linha.f-grave .pdv-linha-nome::before{background:var(--pdv-grave)}

.pdv-marca{display:inline-flex; align-items:center; gap:7px; font-size:13px; margin-top:6px}
.pdv-marca i{width:9px; height:9px; border-radius:50%; background:var(--texto-fraco)}
.pdv-marca.f-bom i{background:var(--pdv-bom)}
.pdv-marca.f-atencao i{background:var(--pdv-atencao)}
.pdv-marca.f-neutro i{background:var(--pdv-neutro)}
.pdv-marca.f-grave i{background:var(--pdv-grave)}

.pdv-vertodos{
  display:block; width:100%; min-height:var(--toque); margin-top:2px;
  background:none; border:none; border-top:1px solid var(--linha);
  color:var(--acento-forte); font-size:13px; font-weight:600; border-radius:0 0 11px 11px;
}
.pdv-vertodos:active{background:var(--superficie-2)}

.pdv-dado{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:9px 10px; border-bottom:1px solid var(--linha);
}
.pdv-dado:last-child{border-bottom:none}
.pdv-dado span{font-size:12.5px; color:var(--texto-fraco); flex:none}
.pdv-dado strong{
  font-size:13.5px; font-weight:600; text-align:right; min-width:0;
  overflow:hidden; text-overflow:ellipsis;
}

/* ------------------------------------------------------ o gráfico dos dias
   Uma série só: uma cor só, sem legenda (o título do cartão nomeia a série),
   eixo apagado. A barra é fina, com a ponta arredondada em cima e encostada na
   linha de base. Tocar numa barra escreve o dia e o valor na leitura de cima —
   é o "tooltip" que cabe num celular sem tapar o próprio gráfico. */
.pdv-grafico{padding:0 10px 8px}
.pdv-leitura{display:flex; align-items:baseline; gap:8px; min-height:22px; margin-bottom:8px}
.pdv-leitura .r{font-size:11px; color:var(--texto-fraco); text-transform:uppercase; letter-spacing:1px}
.pdv-leitura .d{font-size:12.5px; color:var(--texto-fraco); font-variant-numeric:tabular-nums}
.pdv-leitura .v{font-size:14px; font-weight:600; font-variant-numeric:tabular-nums; margin-left:auto}
.pdv-barras{
  display:flex; align-items:flex-end; gap:2px; height:116px;
  border-bottom:1px solid var(--linha); padding-bottom:0;
}
.pdv-barra{
  flex:1; min-width:0; height:100%; padding:0; border:none; background:none;
  display:flex; align-items:flex-end; border-radius:4px 4px 0 0;
}
.pdv-barra i{
  display:block; width:100%; background:var(--acento-forte);
  border-radius:4px 4px 0 0; min-height:2px;
}
.pdv-barra.vazia i{background:var(--linha)}
.pdv-barra.escolhida i{background:var(--acento)}
.pdv-barra.escolhida{background:var(--acento-fraco)}
.pdv-eixo{display:flex; gap:2px; margin-top:5px}
.pdv-eixo span{
  flex:1; min-width:0; text-align:center; font-size:9.5px; color:var(--texto-fraco);
  font-variant-numeric:tabular-nums;
}

.pdv-pe{text-align:center; padding:6px 0 10px; font-size:12.5px}
.pdv-pe a{color:var(--acento-forte)}

/* -------------------------------------------------- atalho na gaveta (☰) */
.lista-paineis{padding:0 10px; display:flex; flex-direction:column; gap:2px}
.painel-atalho{
  display:flex; align-items:center; gap:11px; width:100%; min-height:var(--toque);
  padding:10px 12px; border:none; border-radius:12px;
  background:none; color:var(--texto); text-align:left; font-size:15px;
}
.painel-atalho:active{background:var(--superficie-2)}
.painel-icone{flex:none; display:grid; place-items:center; color:var(--acento-forte)}
.painel-nome{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.painel-dica{flex:none; font-size:11.5px; color:var(--texto-fraco)}

@media (min-width:821px){
  .pdv-corpo{padding-left:20px; padding-right:20px}
}

/* ------------------------------------------------------------------ cofre
   Reaproveita a moldura de tela cheia do painel (.pdv / .pdv-topo / .pdv-corpo);
   daqui pra baixo é só o miolo. Alvo de toque nunca abaixo de --toque: isto é
   digitado no vidro do celular, e errar aqui quebra os robôs. */
.cofre-aviso{
  margin:0 0 16px; padding:12px 14px; border-radius:12px;
  background:var(--acento-fraco); color:var(--texto);
  font-size:13px; line-height:1.55;
}
.cofre-cartao{
  background:var(--superficie); border:1px solid var(--linha); border-radius:var(--raio);
  padding:16px; margin-bottom:12px;
}
.cofre-nome{margin:0; font:600 15.5px/1.3 Poppins,sans-serif}
.cofre-dica{margin:5px 0 0; font-size:13px; color:var(--texto-fraco); line-height:1.5}
.cofre-estado{
  margin:10px 0 0; font-size:12.5px; font-variant-numeric:tabular-nums;
  display:flex; align-items:center; gap:7px;
}
.cofre-estado::before{
  content:""; width:7px; height:7px; border-radius:50%; flex:none;
  background:var(--acento-forte);
}
.cofre-estado.cheia{color:var(--texto-fraco)}
.cofre-estado.vazia{color:var(--erro)}
.cofre-estado.vazia::before{background:var(--erro)}

/* Os endereços do Apple Watch: longos e cheios de caractere solto, então quebram em
   qualquer ponto e ficam selecionáveis — dá pra copiar na mão se o botão falhar. */
.cofre-subtitulo{
  margin:16px 0 0; font:600 12px/1.3 Poppins,sans-serif; letter-spacing:.04em;
  text-transform:uppercase; color:var(--texto-fraco);
}
.cofre-endereco{
  margin:10px 0 0; padding:10px 12px; border-radius:10px;
  background:var(--superficie-2); color:var(--texto-fraco);
  font:12.5px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;
  word-break:break-all; user-select:all; -webkit-user-select:all;
}

.cofre-acoes{display:flex; gap:9px; margin-top:14px}
.cofre-botao{
  flex:1; min-height:var(--toque); padding:11px; border:none; border-radius:11px;
  background:var(--acento); color:#fff; font-weight:600; font-size:14.5px;
}
.cofre-botao.secundario{background:var(--superficie-2); color:var(--texto)}
.cofre-botao:disabled{opacity:.55}

.cofre-form{margin-top:14px; padding-top:14px; border-top:1px solid var(--linha)}
.cofre-campo{display:flex; gap:8px; align-items:stretch}
.cofre-campo input{
  flex:1; min-width:0; min-height:var(--toque); padding:12px 13px;
  border:1px solid var(--linha); border-radius:11px; background:var(--bg); outline:none;
}
.cofre-campo input:focus{border-color:var(--acento-forte); box-shadow:0 0 0 3px var(--acento-fraco)}
.cofre-olho{
  flex:none; min-height:var(--toque); padding:0 13px; border:1px solid var(--linha);
  border-radius:11px; background:var(--superficie-2); color:var(--texto-fraco);
  font-size:13px;
}
.cofre-form .modal-botoes{margin-top:16px}
.cofre-form .cofre-botao{margin-top:9px}

.cofre-recado{margin:12px 0 0; font-size:13px; line-height:1.55; color:var(--texto-fraco)}
.cofre-recado.bom{color:var(--acento-forte)}
.cofre-recado.ruim{color:var(--erro)}

/* ================================================================== CAIXAS
   WhatsApp + e-mail da Lotus + Gmail. Reaproveita a moldura de tela cheia do
   painel (.pdv / .pdv-topo / .pdv-corpo); daqui pra baixo é só o miolo.
   Alvo de toque nunca abaixo de --toque: é lista rolada com o polegar. */
.caixa-abas{
  flex:none; display:flex; gap:4px; padding:8px 10px 9px;
  border-bottom:1px solid var(--linha);
}
.caixa-aba{
  flex:1; min-width:0; min-height:38px; padding:8px 6px;
  border:1px solid var(--linha); border-radius:11px;
  background:none; color:var(--texto-fraco); font-size:13.5px; font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.caixa-aba:active{background:var(--superficie-2)}
.caixa-aba.ativa{
  background:var(--acento-fraco); border-color:var(--acento-forte); color:var(--texto);
}

.caixa-item{
  display:block; width:100%; text-align:left; min-height:var(--toque);
  padding:11px 12px; margin-bottom:7px;
  background:var(--superficie); border:1px solid var(--linha); border-radius:13px;
  color:var(--texto);
}
.caixa-item:active{background:var(--superficie-2)}
.caixa-l1{display:flex; align-items:baseline; gap:8px}
.caixa-quem{
  flex:1; min-width:0; font-size:14.5px; font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.caixa-quando{
  flex:none; font-size:11.5px; color:var(--texto-fraco);
  font-variant-numeric:tabular-nums;
}
.caixa-l2{display:flex; align-items:baseline; gap:7px; margin-top:3px}
.caixa-resumo{
  flex:1; min-width:0; font-size:13px; color:var(--texto-fraco); line-height:1.4;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.caixa-etiqueta{
  flex:none; font-size:10.5px; letter-spacing:.6px; text-transform:uppercase;
  color:var(--texto-fraco); border:1px solid var(--linha);
  border-radius:6px; padding:1px 5px;
}
/* E-mail que o servidor ainda não marcou como lido. O ponto NUNCA vai sozinho —
   o texto fica em cor cheia junto, senão a marca some pra quem não separa a cor. */
.caixa-item.nova .caixa-quem::before{
  content:""; display:inline-block; width:7px; height:7px; border-radius:50%;
  background:var(--acento-forte); margin-right:7px; vertical-align:middle;
}
.caixa-item.nova .caixa-resumo{color:var(--texto)}

/* ------------------------------------------------------- a conversa do zap
   Bolha, como no aparelho: o que é dele encosta na direita e ganha a cor da
   marca. É leitura — não tem campo de responder, e isso é de propósito. */
.zap-linha{display:flex; margin-bottom:8px}
.zap-linha.minha{justify-content:flex-end}
.zap-bolha{
  max-width:84%; display:flex; flex-direction:column; gap:2px;
  padding:8px 11px; border-radius:14px;
  background:var(--superficie); border:1px solid var(--linha);
  font-size:14.5px; line-height:1.45; overflow-wrap:anywhere;
}
.zap-linha.minha .zap-bolha{
  background:var(--acento); border-color:var(--acento); color:#fff;
}
.zap-quem{font-size:12px; font-weight:600; color:var(--acento-forte)}
.zap-texto{white-space:pre-wrap}
.zap-anexo{font-size:13px; color:var(--texto-fraco); font-style:italic}
.zap-linha.minha .zap-anexo{color:rgba(255,255,255,.82)}
.zap-hora{
  align-self:flex-end; font-size:10.5px; color:var(--texto-fraco);
  font-variant-numeric:tabular-nums;
}
.zap-linha.minha .zap-hora{color:rgba(255,255,255,.75)}

/* ------------------------------------------------------------ o e-mail aberto */
.email-assunto{margin:0 0 8px; font:600 17px/1.35 Poppins,sans-serif}
.email-de{margin:0 0 14px; font-size:13px; color:var(--texto-fraco); line-height:1.5}
.email-de strong{color:var(--texto); font-weight:600}
.email-anexos{
  display:flex; flex-direction:column; gap:5px; margin-bottom:14px;
  padding:11px 13px; border-radius:12px; background:var(--superficie);
  border:1px solid var(--linha);
}
.email-anexos-rotulo{
  font-size:11px; letter-spacing:1px; text-transform:uppercase; color:var(--texto-fraco);
}
.email-anexo{font-size:13px; overflow-wrap:anywhere}
.email-texto{
  white-space:pre-wrap; overflow-wrap:anywhere;
  font-size:15px; line-height:1.6; padding-top:12px; border-top:1px solid var(--linha);
}

/* ================================================================ tela HOJE
   A entrada do app. Mesmo esqueleto dos outros paineis (.pdv), so que com um
   botao fixo embaixo pra ir pro chat — por isso o corpo ganha folga no fim,
   senao o ultimo cartao fica escondido atras do botao. */
.hoje .pdv-corpo{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
.hoje .pdv-topo h2{font-size:17px}

.hoje-recado{margin:2px 0 0; font-size:13px; color:var(--texto-fraco); line-height:1.6}
.hoje-subtitulo{
  margin:14px 0 6px; font-size:11px; letter-spacing:1.1px; text-transform:uppercase;
  color:var(--texto-fraco); font-weight:600;
}
.hoje-resumo{margin:0 0 8px; font-size:13.5px; line-height:1.6; color:var(--texto)}
.hoje-resumo strong{font-weight:600}
.hoje-resumo .urgente, .hoje-num strong.urgente{color:var(--pdv-grave)}

/* --- agenda: a hora à esquerda, largura fixa, pra tudo alinhar na coluna --- */
.hoje-evento{display:flex; gap:10px; padding:7px 0; border-top:1px solid var(--linha)}
.hoje-evento:first-of-type{border-top:none}
.hoje-evento.miudo{opacity:.72}
/* 78px: "19:00–20:00" tem que caber numa linha só. Com menos, a hora quebra em
   duas e o evento sai do lugar na coluna. */
.hoje-hora{
  flex:none; width:78px; font:600 11.5px/1.6 Poppins,sans-serif;
  color:var(--texto-fraco); font-variant-numeric:tabular-nums; white-space:nowrap;
}
.hoje-evento-texto{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px; min-width:0}
.hoje-evento-nome{font-size:14px; line-height:1.45; overflow-wrap:anywhere}
.hoje-chip{
  font-size:10.5px; padding:1px 6px; border-radius:6px;
  background:var(--superficie-2); color:var(--texto-fraco);
}

/* --- editais: cada um é um link pro PNCP; o prazo é o que salta --- */
.hoje-edital{
  display:flex; flex-direction:column; gap:2px; padding:9px 0;
  border-top:1px solid var(--linha); color:inherit; text-decoration:none;
}
.hoje-edital-nome{font-size:13.5px; font-weight:600; line-height:1.4}
.hoje-edital-itens{font-size:12.5px; color:var(--texto-fraco); line-height:1.45}
.hoje-edital-prazo{font-size:12px; color:var(--pdv-atencao); font-weight:600}
.hoje-edital-prazo.urgente{color:var(--pdv-grave)}

/* --- números grandes lado a lado (faturado / em separação / pendente) --- */
.hoje-numeros{display:flex; gap:10px; margin-bottom:10px}
.hoje-num{
  flex:1; min-width:0; display:flex; flex-direction:column; gap:2px;
  padding:10px 12px; border-radius:12px; background:var(--superficie-2);
}
.hoje-num strong{font:600 19px/1.2 Poppins,sans-serif; font-variant-numeric:tabular-nums}
.hoje-num span{font-size:11px; color:var(--texto-fraco)}
/* três na mesma linha (cartão da GEOLAB): num iPhone sobram ~115px pra cada uma,
   então o número encolhe pra não estourar a caixa */
.hoje-numeros.tres{gap:8px}
.hoje-numeros.tres .hoje-num{padding:10px 8px}
.hoje-numeros.tres .hoje-num strong{font-size:16px; letter-spacing:-.2px}
.hoje-numeros.tres .hoje-num span{font-size:10px}

/* --- as três caixas de mensagem --- */
.hoje-pastilhas{display:flex; gap:8px; margin-bottom:10px}
.hoje-pastilha{
  flex:1; min-width:0; display:flex; flex-direction:column; gap:2px;
  padding:10px 8px; border-radius:12px; background:var(--superficie-2);
  border:none; color:var(--texto); text-align:center;
}
.hoje-pastilha:active{background:var(--linha)}
.hoje-pastilha strong{font:600 14px/1.2 Poppins,sans-serif}
.hoje-pastilha span{font-size:11px; color:var(--texto-fraco)}
.hoje-email{display:flex; flex-direction:column; padding:6px 0; border-top:1px solid var(--linha)}
.hoje-email-de{font-size:12px; color:var(--texto-fraco)}
.hoje-email-assunto{
  font-size:13px; line-height:1.4;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* --- volume por semana: barra por semana, a desta semana acesa --- */
.hoje-barras{
  position:relative;
  display:flex; align-items:flex-end; gap:5px; height:82px; padding-top:4px;
}
/* A linha de base. Fica em cima dos rótulos, não embaixo — por isso a conta:
   14px de rótulo + 4px de folga. Mexeu num, mexe no outro. */
.hoje-barras::after{
  content:""; position:absolute; left:0; right:0; bottom:18px; height:1px;
  background:var(--linha);
}
.hoje-barra{
  flex:1; min-width:0; height:100%;
  display:flex; flex-direction:column; justify-content:flex-end; gap:4px;
}
/* A semana de agora é a que ele quer achar de relance: as outras ficam apagadas
   e ela acesa. Cor igual com opacidade diferente — duas cores brigariam. */
/* Barra fina e com folga: cheia até a borda vira bloco, não gráfico. O topo é
   arredondado (a ponta do dado) e o pé fica quadrado, assentado na linha. */
.hoje-barra i{
  display:block; width:100%; max-width:24px; margin:0 auto;
  border-radius:4px 4px 0 0;
  background:var(--pdv-neutro); opacity:.32;
}
.hoje-barra.atual i{opacity:1}
.hoje-barra.atual span{color:var(--texto); font-weight:600}
.hoje-barra span{
  height:14px; line-height:14px;
  font-size:9.5px; color:var(--texto-fraco); text-align:center;
  font-variant-numeric:tabular-nums;
}

/* --- o caminho pro chat, sempre à mão --- */
.hoje-conversar{
  position:absolute; left:14px; right:14px;
  bottom:calc(14px + env(safe-area-inset-bottom));
  height:50px; max-width:560px; margin:0 auto;
  display:flex; align-items:center; justify-content:center; gap:8px;
  border:none; border-radius:14px; background:var(--acento); color:#fff;
  font:600 15px/1 Poppins,sans-serif; box-shadow:var(--sombra);
}
.hoje-conversar:active{filter:brightness(.92)}

/* ------------------------------------------------- as cores dos cartões do Hoje
   Uma matiz por cartão, na ordem em que eles aparecem. A cor é enfeite COM regra:
   quem diz o que o cartão é são o ícone e o título, sempre visíveis — a cor só
   ajuda a achar de relance. Por isso ela quase nunca vira texto: número grande
   fica na cor da letra, e cor de texto aqui é só pra estado (vencido, prazo
   apertado), sempre com a palavra do lado.

   As seis matizes e os passos do modo claro saíram do validador de paleta: nesta
   ordem, cartões vizinhos ficam distinguíveis no escuro e no claro, inclusive nas
   simulações de daltonismo. Trocar a ORDEM dos cartões pede rodar o validador de
   novo — foi a ordem que fez o conjunto passar. */
.hoje-cartao{--cor:var(--acento); position:relative; overflow:hidden}
/* Providências é VERMELHO por escolha do Peu (31/08/2026). Passou no validador
   contra os cartões — inclusive os 41 de distância pro azul da agenda, que é o
   vizinho —, mas fica perto do vermelho de ESTADO (--pdv-grave, o "atrasada").
   Por isso vale dobrado a regra da casa aqui: estado nunca é só cor, a palavra
   ("atrasada", "atrasada desde 28/08") está sempre escrita do lado. */
.c-providencias{--cor:#cc2936; --sobre:#100f0f}
.c-agenda   {--cor:#3987e5; --sobre:#100f0f}
.c-editais  {--cor:#d95926; --sobre:#100f0f}
.c-lotus    {--cor:#199e70; --sobre:#100f0f}
.c-geolab   {--cor:#c2a62a; --sobre:#100f0f}
.c-mensagens{--cor:#9085e9; --sobre:#100f0f}
.c-corrida  {--cor:#d55181; --sobre:#100f0f}
@media (prefers-color-scheme: light){
  .c-providencias{--cor:#bc1a27; --sobre:#ffffff}
  .c-agenda   {--cor:#2a78d6; --sobre:#ffffff}
  .c-editais  {--cor:#eb6834; --sobre:#100f0f}
  .c-lotus    {--cor:#1baf7a; --sobre:#100f0f}
  .c-geolab   {--cor:#8a7317; --sobre:#ffffff}
  .c-mensagens{--cor:#4a3aa7; --sobre:#ffffff}
  .c-corrida  {--cor:#e87ba4; --sobre:#100f0f}
}

/* a cor entrando pelo alto do cartão, sumindo — dá vida sem virar bloco pintado */
.hoje-cartao::before{
  content:""; position:absolute; inset:0 0 auto; height:108px; pointer-events:none;
  background:linear-gradient(180deg, color-mix(in srgb, var(--cor) 24%, transparent), transparent);
}
/* e um fio da cor na borda de cima, pra achar o cartão de relance ao rolar */
.hoje-cartao::after{
  content:""; position:absolute; left:0; right:0; top:0; height:3px; pointer-events:none;
  background:var(--cor); opacity:.9;
}
.hoje-cartao > *{position:relative}
.hoje-cartao-topo{justify-content:flex-start; gap:10px; padding-top:12px}
/* o distintivo é o único lugar onde a cor entra CHEIA: quadrado pintado, ícone
   por cima na cor que contrasta (--sobre). É ele que dá o colorido do painel. */
.hoje-badge{
  flex:none; width:30px; height:30px; border-radius:10px; display:grid; place-items:center;
  background:var(--cor); color:var(--sobre);
  box-shadow:0 2px 8px color-mix(in srgb, var(--cor) 35%, transparent);
}
.hoje-badge svg{width:16px; height:16px}

/* ---------------------------------------------------------- os azulejos
   Seis números na abertura da tela, dois por linha. Fundo na cor do assunto
   (lavado, pra tinta branca continuar legível em cima), ícone e fio na cor
   cheia. Alvo de toque inteiro: o azulejo é um botão, não um enfeite. */
.hoje-grade{
  display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:2px 0 18px;
}
.hoje-azulejo{
  position:relative; overflow:hidden; min-width:0; min-height:96px;
  display:flex; flex-direction:column; gap:3px; text-align:left;
  padding:11px 12px 12px; border-radius:16px; color:var(--texto);
  border:1px solid color-mix(in srgb, var(--cor) 32%, transparent);
  background:
    linear-gradient(152deg,
      color-mix(in srgb, var(--cor) 26%, var(--superficie)),
      color-mix(in srgb, var(--cor) 9%, var(--superficie)));
}
.hoje-azulejo:active{filter:brightness(1.12)}
.hoje-azulejo-topo{display:flex; align-items:center; gap:6px; min-width:0}
.hoje-azulejo-topo svg{flex:none; width:14px; height:14px; color:var(--cor)}
.hoje-azulejo-rotulo{
  font-size:11px; line-height:1.3; color:var(--texto-fraco);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.hoje-azulejo-valor{
  font:600 27px/1.15 Poppins,sans-serif; letter-spacing:-.6px; margin-top:auto;
}
/* "R$ 246,3 mil" não cabe no mesmo corpo que "5". Em vez de encolher todos por
   causa do maior, cada azulejo escolhe o corpo pelo tamanho do que ele mostra. */
.hoje-azulejo-valor.medio{font-size:23px}
.hoje-azulejo-valor.longo{font-size:19.5px; letter-spacing:-.3px}
.hoje-azulejo-nota{font-size:11.5px; line-height:1.35; color:var(--texto-fraco)}
/* Estado ruim NÃO troca a cor do azulejo: se trocasse, dois problemas ao mesmo
   tempo virariam dois quadrados vermelhos iguais e o Peu perderia de quem é
   cada um. O alerta entra no número e na nota — e a palavra ("atrasada",
   "vencido", "encerra hoje") está sempre escrita, cor nunca conta sozinha. */
.hoje-azulejo.alerta .hoje-azulejo-valor{color:var(--pdv-grave)}
.hoje-azulejo.alerta .hoje-azulejo-nota{color:var(--pdv-grave); font-weight:600}
@media (prefers-color-scheme: light){
  /* no claro o mesmo mix fica pálido demais e os seis viram um só borrão */
  .hoje-azulejo{
    background:
      linear-gradient(152deg,
        color-mix(in srgb, var(--cor-fundo, var(--cor)) 22%, var(--superficie)),
        color-mix(in srgb, var(--cor-fundo, var(--cor)) 7%, var(--superficie)));
    border-color:color-mix(in srgb, var(--cor-fundo, var(--cor)) 38%, transparent);
  }
  .hoje-azulejo:active{filter:brightness(.95)}
  /* O amarelo do modo claro é escuro de propósito (pra virar ícone e texto sem
     sumir no branco). Lavado, ele dá um bege pardo — então o FUNDO deste azulejo
     usa o passo vivo do mesmo amarelo, e o ícone continua no escuro. */
  .hoje-azulejo.c-geolab{--cor-fundo:#eda100}
}

/* --- os dois números grandes ganham fundo de cor; o texto continua tinta --- */
.hoje-num.tom-cor{background:color-mix(in srgb, var(--cor) 14%, var(--superficie-2))}
.hoje-num.tom-critico{background:color-mix(in srgb, var(--pdv-grave) 14%, var(--superficie-2))}
.hoje-num.tom-critico strong{color:var(--pdv-grave)}
.hoje-num.tom-bom{background:color-mix(in srgb, var(--pdv-bom) 14%, var(--superficie-2))}
.hoje-num.tom-bom strong{color:var(--pdv-bom)}

.hoje-pastilha{background:color-mix(in srgb, var(--cor) 13%, var(--superficie-2))}
.hoje-pastilha:active{background:color-mix(in srgb, var(--cor) 26%, var(--superficie-2))}

/* a barra da semana usa a cor do próprio cartão — uma série, uma cor só */
.hoje-barra i{background:var(--cor)}

/* o número do dia e o "fecham em 3 dias" são estado, então podem ser cor */
.hoje-resumo .urgente{color:var(--pdv-grave); font-weight:600}
.hoje-subtitulo{color:color-mix(in srgb, var(--cor) 62%, var(--texto-fraco))}

/* a faixa de cor no alto da tela: o dia começando */
.hoje .pdv-topo{
  border-bottom:none;
  box-shadow:0 1px 0 var(--linha);
}
.hoje .pdv-topo::after{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg,#cc2936,#3987e5,#d95926,#199e70,#9085e9,#d55181);
}
@media (prefers-color-scheme: light){
  .hoje .pdv-topo::after{
    background:linear-gradient(90deg,#bc1a27,#2a78d6,#eb6834,#1baf7a,#4a3aa7,#e87ba4);
  }
}
.hoje .pdv-topo{position:relative}
.hoje #hoje-saudacao{font-size:20px; letter-spacing:-.3px}

/* o botão do chat com a cor da marca em degradê e a sombra na mesma cor —
   é o único botão fixo da tela, pode ser o mais forte dela */
.hoje-conversar{
  background:linear-gradient(135deg,var(--acento-forte),var(--acento));
  box-shadow:0 6px 20px color-mix(in srgb, var(--acento) 45%, transparent);
}

/* No claro, cor clara sobre fundo branco quase some. A barra da semana parada
   precisa de mais corpo, e o rótulo miúdo precisa de mais tinta que cor —
   senão o "km por semana" vira um borrão rosa. */
@media (prefers-color-scheme: light){
  .hoje-barra i{opacity:.45}
  .hoje-subtitulo{color:color-mix(in srgb, var(--cor) 45%, var(--texto-fraco))}
}

/* =============================================================== PROVIDÊNCIAS
   A tela onde o Peu escreve. Três decisões que mandam no desenho:
   (a) a barra de escrever fica FIXA no alto, fora da rolagem — alimentar a lista
       é o motivo da tela, e ela não pode sumir enquanto ele rola;
   (b) tudo que se toca tem 44px de alvo (o círculo de marcar feita é o alvo mais
       apertado do app inteiro: errar nele desmarca ou marca a linha errada);
   (c) feita não some — fica riscada, cinza, no grupo de baixo. */
.prov{--cor:#cc2936}
@media (prefers-color-scheme: light){ .prov{--cor:#bc1a27} }

.prov-nova{
  flex:none; padding:10px 12px 11px; border-bottom:1px solid var(--linha);
  background:var(--superficie);
}
.prov-nova > *{max-width:560px; margin-left:auto; margin-right:auto}
.prov-nova-linha{display:flex; gap:8px; align-items:center}
#prov-texto{
  flex:1; min-width:0; min-height:var(--toque); padding:11px 13px;
  border:1px solid var(--linha); border-radius:13px; background:var(--bg); outline:none;
  font-size:15px;
}
#prov-texto:focus{border-color:var(--cor)}
#prov-add{
  flex:none; width:var(--toque); height:var(--toque); border:none; border-radius:13px;
  background:var(--cor); color:#fff; display:grid; place-items:center;
}
#prov-add:active{filter:brightness(.92)}
.prov-nova-opcoes{display:flex; flex-direction:column; gap:6px; margin-top:8px}
.prov-chips{display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; padding:1px}
.prov-chips::-webkit-scrollbar{display:none}
.prov-prazos{position:relative}
.prov-chip{
  flex:none; min-height:38px; padding:6px 13px; border-radius:999px;
  border:1px solid var(--linha); background:none; color:var(--texto-fraco);
  font-size:13px; font-weight:600; white-space:nowrap;
}
.prov-chip.ligado{
  background:color-mix(in srgb, var(--cor) 18%, transparent);
  border-color:var(--cor); color:var(--texto);
}
/* o seletor de data nativo do iPhone é melhor que qualquer calendário meu, mas a
   caixinha crua fica torta na barra: fica escondida atrás da pastilha "Data" */
.prov-data-escondida{
  position:absolute; left:0; bottom:0; width:1px; height:1px;
  opacity:0; pointer-events:none;
}

.prov-grupo{margin-bottom:16px}
.prov-grupo-topo{display:flex; align-items:center; gap:8px; padding:0 4px 8px}
.prov-grupo-topo h3{
  margin:0; font:600 11.5px/1 Poppins,sans-serif; letter-spacing:1.1px;
  text-transform:uppercase; color:var(--texto-fraco);
}
.prov-conta{
  font-size:11.5px; color:var(--texto-fraco); background:var(--superficie-2);
  border-radius:999px; padding:2px 8px; font-variant-numeric:tabular-nums;
}
.prov-grupo.atrasadas .prov-grupo-topo h3{color:var(--pdv-grave)}
.prov-grupo.feitas{opacity:.85}
/* fechado, o bloco das feitas e so uma linha discreta que abre com um toque */
.prov-feitas-topo{
  width:100%; background:none; border:0; cursor:pointer; text-align:left;
  padding:10px 4px; margin:0; color:inherit; font:inherit;
  min-height:44px;
}
/* sem opacidade extra aqui: o cinza de --texto-fraco ja passa no contraste, e
   apagar mais some com a linha no modo claro */
.prov-feitas-seta{margin-left:auto; color:var(--texto-fraco); font-size:12px}

.prov-item{
  display:flex; align-items:flex-start; gap:2px; padding:4px;
  background:var(--superficie); border:1px solid var(--linha); border-radius:14px;
  margin-bottom:8px;
}
.prov-item.atrasada{border-color:color-mix(in srgb, var(--pdv-grave) 40%, var(--linha))}
.prov-marca{
  flex:none; width:var(--toque); height:var(--toque); border:none; background:none;
  color:var(--texto-fraco); display:grid; place-items:center; border-radius:12px;
}
.prov-marca:active{background:var(--superficie-2)}
.prov-item.feita .prov-marca{color:var(--pdv-bom)}
.prov-texto{
  flex:1; min-width:0; min-height:var(--toque); text-align:left; background:none;
  border:none; color:var(--texto); padding:9px 8px 9px 2px;
  display:flex; flex-direction:column; gap:4px;
}
.prov-titulo{font-size:14.5px; line-height:1.45; overflow-wrap:anywhere}
.prov-item.feita .prov-titulo{color:var(--texto-fraco); text-decoration:line-through}
.prov-pe{display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.prov-etiqueta{
  font-size:11px; font-weight:600; padding:2px 8px; border-radius:999px;
  background:color-mix(in srgb, var(--cor) 16%, var(--superficie-2)); color:var(--texto-fraco);
}
.prov-prazo{font-size:11.5px; color:var(--texto-fraco)}
.prov-prazo.urgente{color:var(--pdv-grave); font-weight:600}
.prov-prazo.agora{color:var(--texto); font-weight:600}

.prov-editando{padding:10px}
.prov-editor{flex:1; min-width:0; display:flex; flex-direction:column; gap:8px}
.prov-editor input{
  min-height:40px; padding:9px 11px; border:1px solid var(--linha); border-radius:11px;
  background:var(--bg); outline:none; font-size:14.5px;
}
.prov-editor input:focus{border-color:var(--cor)}
.prov-editor-linha{display:flex; gap:8px}
.prov-editar-onde{flex:1; min-width:0}
.prov-editar-data{flex:none; width:150px}
.prov-editor-botoes{display:flex; gap:8px; justify-content:flex-end}
.prov-btn{
  min-height:38px; padding:8px 15px; border-radius:11px; border:1px solid var(--linha);
  background:none; color:var(--texto); font-size:13.5px; font-weight:600;
}
.prov-btn-forte{background:var(--cor); border-color:var(--cor); color:#fff}
.prov-btn:active{filter:brightness(.92)}

/* --- o cartão de providências dentro do Hoje --- */
.hoje-prov{
  display:flex; align-items:center; gap:8px; width:100%; min-height:38px;
  text-align:left; background:none; border:none; border-top:1px solid var(--linha);
  padding:8px 2px; color:var(--texto);
}
.hoje-prov:active{background:var(--superficie-2)}
.hoje-prov-nome{
  flex:1; min-width:0; font-size:13.5px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.hoje-prov-marca{
  flex:none; font-size:11px; color:var(--texto-fraco);
  background:var(--superficie-2); border-radius:999px; padding:2px 8px;
}
.hoje-prov-marca.urgente{color:var(--pdv-grave); font-weight:600}
.hoje-anotar{
  width:100%; margin-top:10px; min-height:40px; border-radius:12px;
  border:1px dashed color-mix(in srgb, var(--cor) 55%, var(--linha));
  background:color-mix(in srgb, var(--cor) 10%, transparent);
  color:var(--texto); font-size:13.5px; font-weight:600;
}
.hoje-anotar:active{background:color-mix(in srgb, var(--cor) 20%, transparent)}