/* 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;
}
.marca-grande{width:66px; height:66px; color:var(--acento-forte)}
.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}
.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}
}