/* ============================================================
   banner.css — o BANNER de cada tela (casca Cockpit v0.9.0), o seletor Mata | Porto, o Início, o anel de progresso e a vida dos cartões no PC.
   Cor só por token de tema.css. Só transform e opacity se mexem (o arco do anel e o traço da mini-linha são stroke, baratos). Carregado depois de casca.css.
   Plano B: o estado natural é sempre VISÍVEL; o reflexo do banner começa fora e só roda quando casca-mov.js liga a classe .brilha.
   ============================================================ */
:root{--fl-off:0px}
html{scroll-padding-top:calc(var(--h-proto) + 64px)}

/* ---------- banner: saudação/título | número principal | logo em placa (+ mini-linha) ---------- */
.tp.ban{position:relative;overflow:hidden;isolation:isolate;display:grid;grid-template-columns:1.1fr 1.2fr 1fr;gap:24px;align-items:center;min-height:170px;padding:22px 26px;border-radius:20px;color:#fff;background:var(--grad-ban)}
.tp.ban.sem-valor{grid-template-columns:1fr auto;min-height:130px;padding:16px 26px}
.tp.ban>*{position:relative;z-index:2}
.tp.ban::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);transform:translateX(-120%)}
.tp.ban.brilha::after{animation:ban-brilho 1.2s ease-out .1s 1 forwards}
@keyframes ban-brilho{to{transform:translateX(120%)}}
.ban-c1 h1{font-family:var(--fonte-titulo);font-size:24px;font-weight:800;line-height:1.1;color:#fff;margin:0 0 4px}
.ban-c1 .dt{font-size:13px;color:rgba(255,255,255,.8);margin:0 0 14px;line-height:1.35}
.ban-c1 .dt b{color:#fff}
.sem-valor .ban-c1 .dt{margin-bottom:10px}
.ban .leg{color:rgba(255,255,255,.72);font-size:12.5px;margin-top:8px}
.volta-faixa{display:inline-flex;align-items:center;gap:8px;min-height:40px;margin:0 0 12px;padding:0 16px;border:0;border-radius:99px;background:rgba(255,255,255,.16);box-shadow:0 0 0 1.5px rgba(255,255,255,.3) inset;color:#fff;font-weight:700;font-size:14px;white-space:nowrap;cursor:pointer;transition:transform .18s}
.volta-faixa:active{transform:scale(.97)}
.valor-ban small{display:block;margin-bottom:2px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.82)}
.valor-ban .grande{display:block;font-family:var(--fonte-titulo);font-size:40px;font-weight:800;line-height:1.1;color:#fff;white-space:nowrap;font-variant-numeric:tabular-nums}
.ban-selo{display:inline-block;margin-top:8px;padding:5px 12px;border-radius:99px;background:rgba(0,0,0,.25);font-size:13px;font-weight:700;color:#fff}
.ban-selo .pn-var{display:inline;margin:0;font-size:13px;color:#fff}
.ban-selo .pn-var.cai{color:var(--atencao-sobre-escuro)}
.ban-selo .pn-var .pn-pt{color:rgba(255,255,255,.6)}
.ban-selo .pn-var span:last-child:not(.pn-pt):not(.pn-seta){color:inherit}
.tp.ban .pn-res{display:block;width:100%}
.tp.ban .pn-res .num,.tp.ban .pn-res-n,.tp.ban .vazio-n .num{font-size:40px;line-height:1.1;color:#fff}
.tp.ban .pn-res-n.neg{color:var(--atencao-sobre-escuro)}
.ban-duo{display:flex;gap:22px;flex-wrap:nowrap}
.duo-i small{margin-bottom:2px}
.duo-i .grande{font-size:23px}
.duo-i em{display:block;margin-top:2px;font-style:normal;font-size:12px;color:rgba(255,255,255,.78)}
.ban-c3{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.placa-logo{width:200px;padding:12px;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.14);border-radius:14px}
.placa-logo img{display:block;width:100%;height:auto}
.sem-valor .placa-logo{width:150px}
.mini-ban{width:200px;color:rgba(255,255,255,.7)}
.mini-ban svg{display:block;width:100%;height:46px;overflow:visible}
.mini-ban small{display:block;margin-top:2px;text-align:center;font-size:11px}

/* seletor Mata | Porto: pílula translúcida, o ativo é BRANCO com texto verde (nunca amarelo) */
.segf{--n:2;position:relative;display:inline-grid;grid-template-columns:repeat(var(--n),1fr);padding:3px;border-radius:999px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.2)}
.segf>i{position:absolute;top:3px;bottom:3px;left:3px;width:calc((100% - 6px)/var(--n));border-radius:999px;background:#fff;transition:transform .55s var(--mola);pointer-events:none}
.segf button{position:relative;z-index:1;min-height:36px;padding:0 16px;border:0;background:none;font-family:var(--fonte-titulo);font-weight:700;font-size:13px;color:rgba(255,255,255,.92);cursor:pointer;transition:color .25s,transform .18s}
.segf button:active{transform:scale(.97)}
.segf button.on{color:var(--verde-acao)}
.segf.fixa{display:inline-flex;padding:0}
.segf.fixa span{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:0 14px;font-family:var(--fonte-titulo);font-weight:700;font-size:13px}

/* ---------- corpo: cartão branco, raio 16, sombra suave ---------- */
.corpo,.corpo-i{margin:20px 0 0;display:flex;flex-direction:column;gap:14px;position:relative;z-index:2}
.corpo{--gut:0px}
.cartao{border-radius:16px;box-shadow:var(--sombra-card)}
.rodape{margin:22px 0 0}
.dia{margin:0;max-width:none;padding:20px 22px}
.dia .lbl{margin-bottom:12px;font-family:var(--fonte-titulo);font-weight:800;font-size:17px;color:var(--tinta);letter-spacing:0}
.receber{display:flex;gap:22px;align-items:center}
.rec-t{flex:1;min-width:0;width:100%}
.dia .big{margin:0 0 2px}
.dia .big .n{font-size:34px}
.rec-rot{display:block;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--tinta-2)}
.rec-t .sub{font-size:12.5px;line-height:1.35}
.barra-fina{height:8px;margin:10px 0;border-radius:99px;background:var(--card-2);overflow:hidden}
.barra-fina i{display:block;height:100%;width:var(--p);border-radius:99px;background:var(--verde-acao);transform-origin:left}
.dia .btns{margin-top:12px}
.dia .btn.sec{min-height:44px;font-size:14px}
.vendas-i{display:flex;flex-direction:column;gap:10px}
.sh{margin:6px 2px 10px}

/* ---------- anel de progresso ---------- */
.anel{position:relative;display:inline-block;flex:none;width:120px;height:120px}
.anel svg{display:block;width:100%;height:100%}
.an-tr{fill:none;stroke:var(--card-2);stroke-width:11}
.an-arco{fill:none;stroke:var(--ban-3);stroke-width:11;stroke-linecap:round}
.an-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;line-height:1.1}
.an-n{font-family:var(--fonte-titulo);font-weight:800;font-size:24px;color:var(--tinta)}
.an-c small{margin-top:2px;font-size:11px;color:var(--tinta-2);font-weight:500}
.anel.an-sm{width:88px;height:88px}
.an-sm .an-c .num{font-size:19px;font-weight:800;line-height:1;color:var(--tinta);letter-spacing:0}
.an-sm .an-c small{font-size:10.5px}
.pn-ent{display:flex;align-items:center;gap:14px}
.pn-ent-t{display:block;flex:1;min-width:0}
.pn-qg{display:block;font-size:inherit}
.pn-qg .anel .num{font-size:19px;color:var(--tinta);letter-spacing:0}

/* ---------- celular: o banner vira o fim do cabeçalho, o cartão do dia sobe 24 px ---------- */
@media (max-width:1023px){
  html{scroll-padding-top:calc(var(--h-proto) + 64px)}
  .tp.ban,.tp.ban.sem-valor{grid-template-columns:1fr;gap:6px;min-height:0;padding:12px 20px 44px;border-radius:0 0 24px 24px}
  .tp.ban.sem-valor{padding-bottom:40px}
  .ban:not(.sem-valor) .ban-c1 .dt,.ban:not(.sem-valor) .ban-c3,.ban .ban-c1>.segf:not(.fixa),.ban .ban-c1>.leg{display:none}
  .sem-valor .ban-c3{position:absolute;right:16px;top:12px}
  .sem-valor .placa-logo{display:none}
  .ban-c1 h1{font-size:20px;margin:0}
  .valor-ban .grande{font-size:38px}
  .duo-i .grande{font-size:23px}
  .ban-duo{gap:22px}
  .corpo,.corpo-i{margin:-24px 16px 0;gap:12px}
  .corpo.duas{display:flex}
  .dia .big .n{font-size:28px}
  .receber{flex-direction:row;align-items:center;gap:14px}
  .anel.rec-an{width:84px;height:84px}
  .rec-an .an-n{font-size:18px}
  .rec-an .an-c small{font-size:9.5px}
  .rodape{margin:22px 16px 0}
  .pn-ent{flex-direction:row}
}

/* ---------- PC: usa a largura, hover com vida ---------- */
@media (min-width:1024px){
  .pagina{max-width:1400px;margin:0 auto;padding:24px 28px 40px}
  .corpo.pn{margin:20px 0 0}
  .corpo.duas{margin:20px 0 0}
  .pn-heroi{grid-template-columns:minmax(0,3fr) minmax(0,9fr)}
  .corpo-i{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:stretch}
  .corpo-i .col-vendas{grid-column:1/-1}
  .vendas-i{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .col-avisos{display:flex;flex-direction:column;padding:20px 22px;border-radius:16px;background:var(--card);box-shadow:var(--sombra-card)}
  .col-avisos .sh{margin:0 0 6px}
  .col-avisos .sh h2{font-size:17px}
  .col-avisos .cartao.lista{padding:0;border-radius:0;background:none;box-shadow:none}
  .col-avisos .av{padding:12px 0}
  .col-vendas .sh{margin:4px 2px 12px}
  .rodape{margin:28px 0 0}
  .cartao{transition:transform .2s,box-shadow .25s}
  .cartao:not(:has(.tabela)):not(.vazio):hover{transform:translateY(-2px);box-shadow:var(--sombra-card-alta)}
  .tabela tbody tr{transition:background .15s}
  .tabela tbody tr:hover td{background:var(--card-2)}
  .mov:hover,.faz-lin:hover,.av:hover{background:var(--card-2)}
  .nota-aberta .corpo{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:20px;align-items:start}
  .nota-aberta .corpo>.cartao:first-child{grid-row:1/span 4}
  .so-pc .cartao{padding:6px 14px}
  .so-pc .tabela td,.so-pc .tabela th{padding-top:14px;padding-bottom:14px}
}

/* venda e resumo ao lado seguem a paleta nova: banner verde, sem o filete duplo antigo */
.venda .barra-venda{background:var(--grad-ban)}
.venda .barra-venda::after,.v-cupom .v-ch .fio{display:none}
.v-cupom .v-ch{background:var(--grad-ban)}
.v-bar{background:rgba(5,39,14,.9)}
@media (min-width:1024px){ .venda .barra-venda{border-radius:20px} }

/* ============================================================
   v0.9.4 — arrumação "de canto a canto": cartão de venda de 3 linhas, FAB contextual, abas legíveis, financeiro mais baixo, banner do PC sem título repetido.
   ============================================================ */
/* T8: cartão de venda — 3 linhas, ≤ 120 px. (Antes o texto herdava `.det{padding-bottom:104px}` da página da venda; agora a classe é outra.) */
.carga.nv{display:block;padding:12px 14px}
.nv .topo-c{align-items:baseline;gap:10px}
.nv .quem{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nv .valor{flex:none}
.nv-d{margin-top:2px;font-size:12px;font-weight:500;color:var(--tinta-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nv .docs{margin-top:8px;flex-wrap:nowrap;align-items:center;gap:6px;min-width:0}
.nv .v-pctl{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:600;color:var(--tinta-2)}
.nv .doc{flex:none;white-space:nowrap}
.nv .doc.ok,.nv .doc.pend{padding:4px 9px}

/* T5: FAB contextual */
.fab[data-fab="nenhum"]{display:none!important}
.fab.com-rotulo{width:auto;padding:0 20px 0 16px;border-radius:99px;grid-auto-flow:column;gap:6px}
.fab.com-rotulo span{font-family:var(--fonte-titulo);font-weight:800;font-size:15px}

/* T2/T3: abas com as ações da tela (+ Lançar no PC · ⋯), atrasadas dentro da lista, barra de situação na linha de resumo */
.fl-abas{align-items:center;justify-content:space-between}
.fl-abas-t{display:flex;gap:2px;min-width:0}
.fl-abas-ac{display:flex;align-items:center;gap:8px;margin-left:auto;padding-bottom:3px}
.fl-lancar{min-height:34px;padding:0 16px}
.fl-mais-ac{width:40px;height:36px;border:0;border-radius:10px;background:none;color:var(--tinta-2);font-size:22px;font-weight:800;line-height:1;cursor:pointer;transition:transform .18s,background .2s}
.fl-mais-ac:hover{background:var(--card-2)}.fl-mais-ac:active{transform:scale(.95)}
.dia-h.atr{color:var(--problema-tx)}
.dia-h.atr b{font-weight:800}
.fl-so-atr{margin:10px 0 0;text-align:center}
.fl-rs .g-dbar.mini{display:inline-flex;align-self:center;width:72px;height:6px;margin:0 0 0 2px}
.fl-rs .g-dbar.mini i{min-width:4px}

/* T4: o cartão do dia no Início */
.dia .rec-atr{margin:2px 0 0;font-size:13px;font-weight:600}
.dia .problema{color:var(--problema-tx);font-weight:700}
.dia .rec-mes{margin:14px 0 0;font-size:13px;line-height:1.35}
.dia .rec-mes+.barra-fina{margin:8px 0 10px}
.dia .rec-pagar{margin:0;padding-top:10px;border-top:1px solid var(--linha);font-size:13px}

/* T12: a Evolução tem a altura do que ela mostra (não a do vizinho) */
@media (min-width:1024px){
  .pn-ev{align-self:start}
  /* T1: a barra de topo já diz o nome da tela — o banner perde o título e vira uma faixa de números (~120 px) */
  .tp.ban.sem-h1-pc{min-height:0;padding:14px 26px}
  .sem-h1-pc .ban-c1 h1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .sem-h1-pc .ban-c1 .dt{margin-bottom:8px}
  .sem-h1-pc .ban .leg,.sem-h1-pc .leg{margin-top:5px}
  .sem-h1-pc .placa-logo{width:170px;padding:8px}
  .sem-h1-pc .valor-ban .grande{font-size:36px}
  .sem-h1-pc .ban-selo{margin-top:6px}
}
@media (max-width:1023px){
  /* T9: nas telas com abas o corpo não sobe sobre o banner; as abas ficam num cartão claro */
  .tp.ban.com-abas{padding-bottom:14px}
  .tp.ban.com-abas .ban-selo{display:none}
  .corpo:has(.fl-abas){margin-top:12px}
  .fl-abas{padding:0 4px 0 6px;border-bottom:0;border-radius:14px;background:var(--card);box-shadow:var(--sombra-card)}
  .fl-aba{margin-bottom:0;padding:0 11px}
  .fl-lancar{display:none}
  .fl-abas-ac{padding-bottom:0}
}
/* T14: o chip Mata | Porto dentro da folha de Lançar */
.seg.fl-faz{margin:12px 0 10px}
.seg.fl-faz button{display:inline-flex;align-items:center;justify-content:center;gap:8px}
.seg.fl-faz .pt{display:inline-block;width:10px;height:10px;border-radius:50%}
/* PC: faixa de números e primeira dobra do Financeiro mais baixas (a legenda do seletor já está no próprio seletor) */
@media (min-width:1024px){
  .sem-h1-pc .leg{display:none}
  .pagina:has(.sem-h1-pc) .corpo{margin-top:14px}
  .pagina:has(.sem-h1-pc) .fl-fim{margin-top:8px}
  .pagina:has(.com-abas) #fl-lz>.cartao.movs{padding-top:8px;padding-bottom:10px}
}
/* Financeiro: o selo "N conta vencida" repete o "R$ x vencido" logo acima; sai em qualquer largura */
.tp.ban.com-abas .ban-selo{display:none}

/* Mata | Porto | Mata + Porto no cabeçalho do celular: colunas 1 : 1 : 1,7 (o texto inteiro cabe); a pílula branca é medida e deslizada com mola por tela-painel.js (pnPilula), a mesma mola do PC */
@media (max-width:1023px){
  html[data-tela="painel"] #cel-seg .segf{grid-template-columns:1fr 1fr 1.7fr;max-width:none}
  html[data-tela="painel"] #cel-seg .segf button{white-space:nowrap;padding:0 4px}
}