.cli-card{padding:0;overflow:hidden}
.cli-head{display:flex;align-items:center;gap:8px;padding:12px 14px}
.cli-head-main{display:flex;align-items:center;gap:12px;flex:1;min-width:0;cursor:pointer;border-radius:10px;transition:.12s}
.cli-head-main:hover{opacity:.85}
.cli-head .lg{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:#fff;font-weight:700;font-size:17px;flex-shrink:0}
.cli-head .meta{flex:1;min-width:0}
.cli-head .meta b{font-size:15.5px;letter-spacing:-.2px}
.cli-head .meta .l{font-size:12.5px;color:var(--ink-3);display:flex;gap:12px;flex-wrap:wrap;margin-top:2px}
.cli-chev{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:var(--ink-3);flex-shrink:0;transition:.15s}
.cli-chev:hover{background:var(--line-2);color:var(--ink)}
.cli-chev svg{width:18px;height:18px;transition:transform .2s}
.cli-chev.open svg{transform:rotate(180deg)}
.cli-lojas{border-top:1px solid var(--line-2);background:var(--surface-2);padding:6px 8px}
.loja-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;transition:.12s;cursor:pointer}
.loja-row:hover{background:var(--surface)}
.loja-row .row-chev{width:16px;height:16px;color:var(--ink-3);flex-shrink:0}
.loja-row .li{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-strong)}
.loja-row .li svg{width:16px;height:16px}
.loja-row .info{flex:1;min-width:0}
.loja-row .info b{font-weight:600}
.loja-row .info span{font-size:12px;color:var(--ink-3)}

/* ---- Agenda: barra de navegação comum aos modos Dia e Mês ---- */
.ag-bar{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.ag-bar-titulo{flex:1;min-width:0;text-align:center;font-size:16px;font-weight:680;letter-spacing:-.2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* O modo ativo vem preenchido (e não só destacado como no .seg comum): é o
   estado da tela inteira, não um filtro secundário. */
.ag-modes{flex:0 0 auto}
.ag-modes button.active{background:var(--accent);color:#fff}

.agenda-legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:12px;font-size:12px;color:var(--ink-3)}
.agenda-legend span{display:inline-flex;align-items:center;gap:6px}
.lgdot{width:11px;height:11px;border-radius:4px;display:inline-block}

.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.cal .dow{font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--ink-3);font-weight:700;text-align:center;padding:3px 0}
.cal .cell{min-height:66px;border:1px solid var(--line-2);border-radius:10px;padding:6px;background:var(--surface);
  transition:.12s;cursor:pointer;display:flex;flex-direction:column;gap:4px;overflow:hidden;position:relative}
.cal .cell:hover{border-color:var(--accent)}
/* dias fora do mês: espaço reservado em branco (não mostramos o mês anterior
   nem o seguinte) — mesmo comportamento do Receita Pro */
.cal .cell.out{border-color:transparent;background:transparent;cursor:default;pointer-events:none}
.cal .cell.today{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.cal .cell.active-day{background:var(--accent-soft);border-color:var(--accent);box-shadow:inset 0 0 0 1.5px var(--accent)}
.cal .cell .d{font-size:12px;font-weight:650;color:var(--ink-2)}
.cal .cell.today .d{color:var(--accent-strong)}
/* Um estado por dia, não um pill por status: a pergunta do calendário é "que dia
   precisa de mim?". A quantidade só aparece na lacuna, onde o número muda a
   urgência (1 posto descoberto ≠ 8). */
.ag-cel-mk{width:7px;height:7px;border-radius:50%;margin-top:auto;background:var(--line)}
.ag-cel-qt{margin-top:auto;font-size:11px;font-weight:800;line-height:1;padding:2px 5px;border-radius:5px;
  align-self:flex-start;background:var(--crit-soft);color:var(--crit)}
.cal .cell.est-gap{border-color:var(--crit);background:var(--crit-soft)}
.cal .cell.est-pend .ag-cel-mk{background:var(--warn)}
.cal .cell.est-conf .ag-cel-mk{background:var(--ok)}
.cal .cell.est-ag .ag-cel-mk{background:var(--accent)}
.cal .cell.est-vazio{background:var(--surface-2)}
.cal .cell.selecting::after{content:"";position:absolute;top:6px;right:6px;width:15px;height:15px;border-radius:50%;border:2px solid var(--line);background:var(--surface)}
.cal .cell.picked{border-color:var(--accent);box-shadow:inset 0 0 0 1.5px var(--accent);background:var(--accent-soft)}
.cal .cell.picked::after{content:"✓";border-color:var(--accent);background:var(--accent);color:#fff;display:grid;place-items:center;font-size:10px;font-weight:900}

.selbar{position:fixed;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));max-width:520px;margin:0 auto;z-index:50;
  background:var(--ink);color:#fff;border-radius:14px;box-shadow:var(--shadow-lg);padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.selbar b{font-size:13.5px}
.selbar-actions{display:flex;gap:8px;flex:0 0 auto}
.selbar .btn{padding:7px 12px;font-size:12.5px;background:transparent;border-color:rgba(255,255,255,.35);color:#fff}
.selbar .btn.primary{background:var(--accent);border-color:var(--accent)}
.selbar .btn:disabled{opacity:.5}

/* ---- Agenda, modo Dia ---- */
/* O aviso de pendência é a primeira coisa da tela quando existe: confirmar
   serviço que já aconteceu vence qualquer outra leitura do dia. */
.ag-aviso{display:flex;flex-direction:column;gap:2px;margin-bottom:13px;border-color:var(--warn);background:var(--warn-soft)}
.ag-aviso b{font-size:13.5px;color:var(--ink)}
.ag-aviso span{font-size:12px;color:var(--ink-3)}
.ag-aviso .btn{align-self:flex-start;margin-top:8px}

.ag-loja{margin-bottom:13px}
.ag-postos{display:flex;flex-direction:column;gap:10px}

/* Card que abre o menu de ações ao ser tocado — o botão de três pontos saiu, o
   alvo passou a ser o card inteiro. Os botões de dentro (Confirmar, Falta,
   Troca) continuam tendo a preferência no clique; ver ligarAcoesPlantao. */
.plt-card.clicavel{cursor:pointer;transition:border-color .12s,box-shadow .12s,background .12s}
.plt-card.clicavel:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Só onde existe ponteiro de verdade: no celular o hover "gruda" depois do
   toque e o card fica destacado sem motivo. */
@media(hover:hover) and (pointer:fine){
  .plt-card.clicavel:hover{border-color:var(--accent);box-shadow:var(--shadow-sm)}
}

/* Posto sem ninguém — o alvo de toque da tela. Nunca some quando há falta: é
   exatamente aí que ele precisa aparecer. Tracejado é "ainda dá para preencher";
   quando a ausência veio de uma falta, o bloco fecha em vermelho sólido. */
.ag-vazio{display:flex;flex-direction:column;gap:2px;width:100%;text-align:center;padding:12px 14px;
  border:1px dashed var(--line);border-radius:var(--radius);background:transparent;cursor:pointer;transition:.12s}
.ag-vazio:hover{border-color:var(--crit);background:var(--crit-soft)}
.ag-vazio b{font-size:13px;font-weight:700;color:var(--crit)}
.ag-vazio span{font-size:12px;color:var(--ink-3)}
.ag-vazio .ag-vazio-posto{font-weight:600;color:var(--ink-2)}
.ag-vazio.falta{border-color:var(--crit);border-style:solid;background:var(--crit-soft)}
/* Loja fechada no dia não é pendência: sai do vermelho e fica só como o lugar
   por onde se lança um extra. Mesma leitura da célula `nao-previsto` da Escala. */
.ag-vazio.nao-abre{background:var(--surface-2);border-style:dashed}
.ag-vazio.nao-abre b{color:var(--ink-3);font-weight:600}
.ag-vazio.nao-abre:hover{border-color:var(--line-2);background:var(--surface-2)}

.ag-rodape{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:2px}
.ag-rodape span{flex:1;min-width:150px;font-size:12.5px;color:var(--ink-3)}

/* ---- Agenda, modo Mês: os números do mês ---- */
/* Os quatro números do mês são uma linha só, sempre — lidos em conjunto ("185 de
   186, 1 lacuna") é que eles querem dizer algo. Por isso 4 colunas fixas em vez
   de auto-fit: com um mínimo em px o "a confirmar" caía para a linha de baixo no
   celular. O que cede na tela estreita é o corpo do número e o vão, não a
   quantidade de colunas; o rótulo de duas palavras quebra sozinho. */
.ag-numeros{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(4px,2vw,10px);text-align:center}
/* Líder de loja só vê lacuna e a confirmar (o que exige ação dele) — "previstos"
   e "preenchidos" fazem sentido como visão de rede, não para uma loja só. Duas
   colunas em vez de quatro, senão os dois números ficam perdidos num grid feito
   para quatro. */
.ag-numeros.duas{grid-template-columns:repeat(2,minmax(0,1fr))}
.ag-numeros b{display:block;font-size:clamp(16px,4.4vw,19px);font-weight:700;letter-spacing:-.4px;font-variant-numeric:tabular-nums}
.ag-numeros b.crit{color:var(--crit)}
.ag-numeros b.warn{color:var(--warn)}
.ag-numeros span{display:block;font-size:clamp(10.5px,2.9vw,11.5px);line-height:1.25;color:var(--ink-3);text-wrap:balance}

.swap-sheet{padding:6px 16px 0;display:flex;flex-direction:column;gap:14px}
.swap-context,.swap-current,.swap-search,.swap-reason{display:flex;flex-direction:column;gap:4px}
.swap-context span,.swap-current>span,.swap-search span,.swap-reason span{font-size:11.5px;color:var(--ink-3);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.swap-context b{font-size:14px}
.swap-context small{font-size:12px;color:var(--ink-3)}
.swap-current div{display:flex;align-items:center;gap:10px;padding:9px 0}
.swap-current b{font-size:14px}
.swap-search input,.swap-reason textarea{width:100%;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);color:var(--ink);padding:10px 12px;font-size:16px}
.swap-reason textarea{min-height:62px;resize:vertical}
.swap-list{display:flex;flex-direction:column;gap:3px;max-height:32vh;overflow-y:auto;border:1px solid var(--line-2);border-radius:12px;padding:4px}
.swap-candidate{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;text-align:left}
.swap-candidate:hover{background:var(--line-2)}
.swap-candidate:disabled{opacity:.48;cursor:not-allowed}
.swap-candidate>span:nth-child(2){flex:1;min-width:0;display:flex;flex-direction:column}
.swap-candidate b{font-size:13.5px}
.swap-candidate small{font-size:12px;color:var(--ink-3);line-height:1.35}
.swap-candidate i{width:18px;height:18px;border-radius:50%;border:2px solid var(--line);flex:0 0 auto}
.swap-candidate.selected{background:var(--accent-soft)}
.swap-candidate.selected i{border-color:var(--accent);box-shadow:inset 0 0 0 4px var(--surface);background:var(--accent)}
.swap-empty{padding:18px;text-align:center;color:var(--ink-3);font-size:13px}

/* Troca em duas etapas. Cabeçalho e ações ficam fora da área rolável; assim a
   lista da etapa 1 e o motivo da etapa 2 nunca disputam duas rolagens aninhadas. */
.sheet.swap-flow-sheet{display:flex;width:min(100%,680px);height:min(88dvh,780px);max-height:88dvh;padding:0;overflow:hidden}
.swap-flow{display:flex;flex:1;min-height:0;flex-direction:column}
.swap-flow-header{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:8px;min-height:64px;padding:9px 18px 9px 12px;border-bottom:1px solid var(--line-2);flex:0 0 auto}
.swap-flow-header h3{margin:0;font-size:17px;letter-spacing:-.2px}
.swap-flow-header>span{color:var(--accent);font-size:12px;font-weight:750;white-space:nowrap}
.swap-flow-back{display:grid;width:40px;height:40px;place-items:center;border:0;border-radius:10px;color:var(--ink-2);background:transparent}
.swap-flow-back:hover{background:var(--line-2);color:var(--ink)}
.swap-flow-back svg{width:22px;height:22px}
.swap-flow-main{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.swap-flow-stage{display:flex;flex-direction:column;gap:15px;padding:18px}
.swap-flow-context{display:flex;align-items:center;gap:12px;padding:12px 13px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}
.swap-flow-context>div{display:flex;min-width:0;flex-direction:column;gap:3px}
.swap-flow-context b{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.swap-flow-context small{color:var(--ink-3);font-size:12.5px}
.swap-flow-calendar{display:grid;width:36px;height:36px;place-items:center;flex:0 0 auto;border-radius:9px;color:var(--accent);background:var(--accent-soft)}
.swap-flow-calendar svg{width:20px;height:20px}
.swap-flow-current{display:flex;flex-direction:column;gap:7px}
.swap-flow-current>span,.swap-search>span,.swap-reason>span{color:var(--ink-3);font-size:11.5px;font-weight:750;letter-spacing:.04em;text-transform:uppercase}
.swap-flow-current>div{display:flex;align-items:center;gap:10px}
.swap-flow-current b{font-size:14px}
.swap-flow-title h4{margin:0;font-size:18px;letter-spacing:-.2px}
.swap-flow-title p{margin:3px 0 0;color:var(--ink-3);font-size:12.5px}
.swap-flow-footer{padding:12px 18px calc(14px + env(safe-area-inset-bottom));background:var(--surface);flex:0 0 auto}
.swap-flow-footer .btn{min-width:128px}
.swap-summary{display:grid;grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr);align-items:center;gap:8px;padding:16px 12px;border:1px solid var(--line);border-radius:13px;background:var(--surface-2)}
.swap-summary>div{display:flex;min-width:0;align-items:center;flex-direction:column;gap:5px;text-align:center}
.swap-summary>div b{max-width:100%;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.swap-summary>div small{color:var(--ink-3);font-size:11.5px}
.swap-summary>svg{width:25px;color:var(--accent)}
.swap-reason small{color:var(--ink-3);font-size:11.5px;line-height:1.4}
.swap-flow-stage .swap-reason textarea{min-height:112px;background:var(--surface)}
.swap-availability{display:flex;align-items:center;gap:10px;padding:11px 12px;border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line));border-radius:10px;color:var(--accent-strong);background:var(--accent-soft)}
.swap-availability span{display:grid;width:22px;height:22px;place-items:center;flex:0 0 auto;border:1.5px solid var(--accent);border-radius:50%;font-family:serif;font-size:14px;font-weight:800}
.swap-availability b{font-size:12.5px}
.history-card{border:1px solid var(--line-2);border-radius:14px;padding:12px;background:var(--surface);display:flex;flex-direction:column;gap:8px}
.history-card>span,.history-title{font-size:11.5px;color:var(--ink-3);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.history-person{display:flex;align-items:center;gap:10px}
.history-person b{font-size:14px}
.history-timeline{display:flex;flex-direction:column;gap:12px}
.history-event{display:flex;gap:10px;align-items:flex-start}
.history-event>i{width:10px;height:10px;border-radius:50%;background:var(--accent);margin-top:5px;box-shadow:0 0 0 4px var(--accent-soft);flex:0 0 auto}
.history-event>div{display:flex;flex-direction:column;gap:3px;border-left:1px solid var(--line-2);padding-left:10px;margin-left:-15px;padding-bottom:8px}
.history-event small{font-size:11.5px;color:var(--ink-3)}
.history-event b{font-size:13px;color:var(--ink)}
.history-event span{font-size:12px;color:var(--ink-3)}

.row-excluida{opacity:.55}

.pol-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.pol-card{padding:16px;cursor:pointer;transition:.15s}
.pol-card:hover{border-color:var(--accent);box-shadow:var(--shadow-md)}
.pol-card-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px}
.pol-card-id{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.pol-card-id b{font-size:15.5px;letter-spacing:-.2px}
.pol-card-id span{font-size:12.5px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pol-card-status{align-self:flex-start;flex-shrink:0}
.pol-card-lojas .lbl{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--ink-3);margin-bottom:6px}
.chips{display:flex;flex-wrap:wrap;gap:5px}

.avatar.photo{overflow:hidden;padding:0;position:relative}
.avatar.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.foto-picker{grid-column:1/-1;display:flex;align-items:center;gap:14px}
.foto-picker .foto-prev{flex-shrink:0}
.foto-picker .foto-acts{display:flex;gap:8px;flex-wrap:wrap}

/* "Períodos fora" do policial: inativações e afastamentos na mesma linha do
   tempo, do mais recente para o mais antigo. A linha vertical liga os marcos —
   é o que faz a lista ser lida como um histórico, e não como quatro fatos
   soltos. A cor do marco diz o tipo (inativo, férias, afastamento). */
.pol-tl{position:relative;padding:4px 0 2px}
.pol-tl-item{position:relative;display:flex;gap:12px;padding:0 0 15px 0}
.pol-tl-item:last-child{padding-bottom:2px}
.pol-tl-marca{flex:0 0 auto;width:11px;height:11px;margin-top:4px;border-radius:50%;
  background:var(--ink-3);box-shadow:0 0 0 3px var(--surface)}
.pol-tl-item.crit .pol-tl-marca{background:var(--crit)}
.pol-tl-item.warn .pol-tl-marca{background:var(--warn)}
.pol-tl-item.info .pol-tl-marca{background:var(--accent)}
/* O traço desce do marco até o próximo item; o último não tem para onde ligar. */
.pol-tl-item::before{content:"";position:absolute;left:5px;top:17px;bottom:0;width:1px;background:var(--line)}
.pol-tl-item:last-child::before{display:none}
.pol-tl-tx{min-width:0;display:flex;flex-direction:column;gap:2px}
.pol-tl-tx b{font-size:13.5px;font-weight:600;line-height:1.35}
.pol-tl-tx span{color:var(--ink-2);font-size:12px;line-height:1.4}
.pol-tl-dias{color:var(--ink-3);font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.pol-tl-vazio{color:var(--ink-3);font-size:13px;padding:4px 0}

/* Página do policial: substitui o grid da rota, com voltar no topo. Mesmo
   cabeçalho do detalhe do repasse (.cob-detail-top), para as duas páginas de
   detalhe do app se lerem do mesmo jeito. */
.pol-pagina{display:flex;flex-direction:column;gap:12px;max-width:620px}
.pol-pagina .cob-detail-top h2{font-size:17px}
.pol-pagina-foto{display:flex;justify-content:center;margin:2px 0 14px}
.pol-pagina-foto button{border:0;background:none;padding:0;cursor:pointer;border-radius:20px}
/* Ações no rodapé: a leitura vem primeiro. Editar ocupa a linha inteira por ser
   o caminho comum; Férias e Excluir dividem a linha de baixo. */
.pol-pagina-acoes{display:flex;flex-wrap:wrap;gap:8px}
.pol-pagina-acoes .btn{flex:1 1 calc(50% - 4px);justify-content:center;min-width:0}
.pol-pagina-acoes .btn.primary{flex-basis:100%}

/* Detalhes: linhas mais "finas" (menos respiro vertical) e títulos de seção em
   negrito escuro, para separarem os blocos de informação com clareza. */
.det-sect{margin-bottom:11px}
.det-sect:last-child{margin-bottom:0}
.det-sect-h{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--ink-2);margin-bottom:2px}
.det-row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:5px 0;border-bottom:1px solid var(--line-2)}
.det-row:last-child{border-bottom:0}
.det-row span{color:var(--ink-3);font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;flex-shrink:0}
.det-row b{color:var(--ink);text-align:right;font-size:13.5px;font-weight:600}
/* Tela "Mais" — mesmos valores do Receita Pro (.mais-titulo / .mais-item).
   O título do grupo fica FORA do bloco: rótulo pequeno em caixa alta, não um
   cabeçalho de card. */
.mais-grupo{margin-bottom:1.1rem}
.mais-titulo{font-size:.68rem;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-3);
  margin:0 0 .45rem .2rem;font-weight:700}
.mais-item{width:100%;display:flex;align-items:center;gap:.75rem;text-align:left;cursor:pointer;
  background:var(--surface);border:0;border-bottom:1px solid var(--line);padding:.75rem .85rem;
  font-family:inherit;color:var(--ink);transition:background .12s}
.mais-grupo .mais-item:first-of-type{border-radius:14px 14px 0 0}
.mais-grupo .mais-item:last-of-type{border-radius:0 0 14px 14px;border-bottom:0}
.mais-grupo .mais-item:only-of-type{border-radius:14px}
.mais-item:hover{background:var(--line-2)}
.mais-ic{flex:0 0 auto;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent-strong)}
.mais-ic svg{width:18px;height:18px}
.mais-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:.1rem}
.mais-tx b{font-size:.92rem}
.mais-tx small{color:var(--ink-3);font-size:.74rem}
.mais-chev{flex:0 0 auto;color:var(--ink-3);display:grid;place-items:center}
.mais-chev svg{width:16px;height:16px}

/* Financeiro — atalhos para as telas onde o dinheiro se movimenta. Mesma linha
   da tela "Mais", mas dentro de um card e com o número de pendências à direita. */
.fin-atalho{width:100%;display:flex;align-items:center;gap:.75rem;text-align:left;cursor:pointer;
  background:none;border:0;border-bottom:1px solid var(--line-2);padding:.7rem 0;
  font-family:inherit;color:var(--ink)}
.fin-atalho:last-child{border-bottom:0}
.fin-atalho:hover{background:var(--bg)}
.fin-atalho:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:6px}
.fin-atalho-ic{flex:0 0 auto;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent-strong)}
.fin-atalho-ic svg{width:18px;height:18px}
.fin-atalho-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:.1rem}
.fin-atalho-tx b{font-size:.92rem}
.fin-atalho-tx small{color:var(--ink-3);font-size:.74rem}
.fin-atalho-chev{flex:0 0 auto;color:var(--ink-3);font-size:19px;line-height:1}
@media(max-width:390px){
  .fin-atalho{flex-wrap:wrap}
  .fin-atalho .pill{order:3;margin-left:calc(38px + .75rem)}
}

/* ---------------------------------------------------------------------------
   Painel Financeiro — view-financeiro.js.
   Um bloco por dono de tela, como .plt-card (Agenda) e .cob-* (Contas a
   Receber). Nada de cor fixa: tudo sai de tokens.css, então o painel inteiro
   acompanha o tema claro/escuro sem uma segunda folha de estilo.
   As grades usam auto-fit/minmax em vez de breakpoint por aparelho — no desktop
   os cards ganham colunas sozinhos.
   --------------------------------------------------------------------------- */
.fin-card{margin-bottom:13px}

/* Filtros de cliente e loja: ficam colados no filtro de período porque os três
   recortam a mesma coisa. Aceso quando o filtro está ativo — filtro invisível é
   a forma mais fácil de ler um número errado com confiança. */
.fin-filtros{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin-bottom:13px}
.fin-filtro{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;
  padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);
  color:var(--ink-2);font:600 12.5px var(--sans);cursor:pointer;text-align:left;transition:.15s}
.fin-filtro span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fin-filtro svg{width:14px;height:14px;flex:0 0 auto;color:var(--ink-3)}
.fin-filtro:hover{border-color:var(--accent)}
.fin-filtro.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-strong)}
.fin-filtro.on svg{color:var(--accent)}

/* Hero — reaproveita a paleta da faixa "Agora" do Início: escura nos dois temas,
   de propósito. É o único bloco da tela que responde "estou no ritmo?", e o
   contraste com os cards claros é o que o separa do resto. */
.fin-hero{border:0;background:var(--faixa-bg);color:var(--faixa-ink);
  box-shadow:var(--shadow-md);margin-bottom:13px;overflow:hidden}
.fin-hero-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:14px 16px 4px}
.fin-hero-top h3{margin:3px 0 0;font-size:14px;font-weight:650;letter-spacing:-.2px;color:var(--faixa-ink)}
.fin-kicker{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--faixa-ink-2)}
.fin-hero-selo{flex:0 0 auto;padding:4px 9px;border-radius:8px;background:var(--faixa-tile);
  font-size:11px;font-weight:600;color:var(--faixa-ink)}
.fin-hero-main{display:grid;grid-template-columns:126px minmax(0,1fr);gap:14px;align-items:center;padding:8px 16px 12px}
.fin-ring{position:relative;width:126px;height:126px}
.fin-ring svg{width:126px;height:126px;transform:rotate(-90deg)}
.fin-ring .trilho{fill:none;stroke:var(--faixa-tile);stroke-width:11}
.fin-ring .valor{fill:none;stroke:var(--faixa-ink);stroke-width:11;stroke-linecap:round;transition:stroke-dashoffset .45s ease}
.fin-ring-tx{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 14px}
.fin-ring-tx strong{font-size:22px;font-weight:750;letter-spacing:-.6px;font-variant-numeric:tabular-nums}
.fin-ring-tx span{font-size:9.5px;line-height:1.25;color:var(--faixa-ink-2);margin-top:2px}
.fin-hero-num{min-width:0;display:flex;flex-direction:column}
.fin-hero-num .l{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--faixa-ink-2)}
.fin-hero-num .v{font-size:26px;font-weight:800;letter-spacing:-.8px;line-height:1.1;margin:2px 0 10px;font-variant-numeric:tabular-nums}
.fin-hero-num .v2{font-size:15px;font-weight:700;margin-top:2px;font-variant-numeric:tabular-nums}

/* Barra de composição: as quatro fatias somam o previsto do período. */
.fin-barra{display:flex;height:9px;margin:0 16px;border-radius:99px;overflow:hidden;background:var(--faixa-tile)}
.fin-barra i{display:block;height:100%}
.s-conf{background:var(--faixa-ink)}
.s-pend{background:#E2A85A}
.s-fut{background:rgba(255,255,255,.30)}
.s-perd{background:#C94A44}
.fin-hero-leg{display:flex;flex-wrap:wrap;gap:5px 14px;padding:9px 16px 0;font-size:10px;color:var(--faixa-ink-2)}
.fin-hero-leg span{display:inline-flex;align-items:center;gap:5px}
.fin-hero-leg i{width:7px;height:7px;border-radius:50%;display:inline-block}
.fin-hero-stats{display:grid;grid-template-columns:repeat(3,1fr);margin-top:12px;border-top:1px solid var(--faixa-tile)}
.fin-hero-stats>div{padding:10px 12px;min-width:0}
.fin-hero-stats>div+div{border-left:1px solid var(--faixa-tile)}
.fin-hero-stats span{display:block;font-size:9.5px;color:var(--faixa-ink-2)}
.fin-hero-stats b{display:block;font-size:13px;margin-top:3px;font-variant-numeric:tabular-nums}
.fin-hero-nota{padding:11px 16px 14px;font-size:11.5px;line-height:1.45;color:var(--faixa-ink-2);border-top:1px solid var(--faixa-tile)}

/* Indicadores: cada um abre a folha que mostra de onde o número saiu.
   Duas colunas fixas, e não auto-fit: o card de margem ocupa a linha inteira
   (`grid-column:1/-1`), o que mantém vivas todas as trilhas que o auto-fit
   criaria — no desktop os dois primeiros cards ficavam espremidos num sétimo da
   largura com o resto vazio. */
.fin-metricas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-bottom:13px}
.fin-metrica{display:flex;flex-direction:column;align-items:center;text-align:center;width:100%;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:12px 13px;
  cursor:pointer;font-family:inherit;color:var(--ink);transition:border-color .15s,box-shadow .15s}
.fin-metrica:hover{border-color:var(--accent);box-shadow:var(--shadow-sm)}
.fin-metrica:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.fin-metrica.larga{grid-column:1/-1}
.fin-metrica .l{font-size:11.5px;color:var(--ink-3);font-weight:500}
.fin-metrica .v{font-size:21px;font-weight:750;letter-spacing:-.4px;margin-top:4px;font-variant-numeric:tabular-nums}
.fin-metrica .v.pos{color:var(--ok)}
.fin-metrica .v.neg{color:var(--crit)}
.fin-metrica .s{font-size:11.5px;color:var(--ink-3);margin-top:4px;line-height:1.35}
.fin-metrica .t{font-size:11.5px;color:var(--accent);font-weight:600;margin-top:5px}
.fin-mini{display:block;width:100%;height:6px;border-radius:99px;background:var(--line-2);margin-top:9px;overflow:hidden}
.fin-mini b{display:block;height:100%;border-radius:inherit;background:var(--chart-blue)}

.fin-detalhe{padding:2px 10px 6px}
.fin-detalhe-linha{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 6px;border-bottom:1px solid var(--line-2);font-size:13px}
.fin-detalhe-linha:last-child{border-bottom:0}
.fin-detalhe-linha b{font-family:var(--mono);font-weight:650;white-space:nowrap}
.fin-detalhe-linha.total{border-top:1px solid var(--line);margin-top:2px;font-weight:700}
.fin-detalhe-linha.total b{color:var(--ok)}

/* Gráficos: SVG desenhado à mão, o app não carrega biblioteca de gráfico.
   O max-width impede que o viewBox estique meio metro de altura no desktop. */
.fin-chart{display:block;width:100%;max-width:620px;height:auto;margin:0 auto}
.fin-leg{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:11.5px;color:var(--ink-2);margin-bottom:6px}
.fin-leg span{display:inline-flex;align-items:center;gap:6px}
.fin-leg .linha{width:18px;height:3px;border-radius:2px;display:inline-block}
.fin-leg .linha.prev{background:var(--ink-3)}
.fin-leg .linha.conf{background:var(--chart-blue)}
.fin-rodape{display:flex;justify-content:space-between;gap:12px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line-2)}
.fin-rodape.solo{justify-content:flex-start}
.fin-rodape .dir{text-align:right}
.fin-rodape span{display:block;font-size:11px;color:var(--ink-3)}
.fin-rodape b{display:block;font-size:15px;font-weight:700;margin-top:2px;font-variant-numeric:tabular-nums}
.fin-rodape b.warn{color:var(--warn)}
.fin-rodape b.pos{color:var(--ok)}
.fin-vazio{padding:18px 4px;text-align:center;font-size:12.5px;color:var(--ink-3);line-height:1.45}

/* Abas internas de card (métrica do gráfico anual, faturamento × margem). */
.fin-abas{display:flex;gap:6px;overflow-x:auto;padding:11px 16px 0;scrollbar-width:none}
.fin-abas::-webkit-scrollbar{display:none}
.fin-abas button{flex:0 0 auto;padding:5px 11px;border:1px solid var(--line);border-radius:999px;
  background:var(--surface);color:var(--ink-2);font:600 11.5px var(--sans);cursor:pointer;transition:.15s}
.fin-abas button:hover{border-color:var(--accent)}
.fin-abas button.active{background:var(--accent);border-color:var(--accent);color:var(--ink-inv)}

/* Evolução no ano: os cinco totais são as abas do gráfico. O tile aceso é o que
   está plotado — não existe fileira de pílulas separada, que empilharia a mesma
   taxonomia duas vezes e esticaria o card no celular. Os dois rótulos de grupo
   separam "resultado" (por serviço confirmado) de "caixa" (dinheiro movido):
   sem eles alguém subtrai um do outro e estranha que não fecha. */
.fin-ano-grupo{font-size:10px;font-weight:750;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 7px}
/* `divisor`, e não `seg`: `.seg` é o segmentado de components.css e daria a este
   rótulo um fundo cinza de controle. */
.fin-ano-grupo.divisor{margin-top:14px;padding-top:13px;border-top:1px dashed var(--line)}
.fin-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.fin-tiles.tres{grid-template-columns:repeat(auto-fit,minmax(112px,1fr))}
.fin-tile{display:flex;flex-direction:column;align-items:flex-start;text-align:left;min-width:0;
  border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-2);
  padding:10px 11px;font-family:inherit;color:var(--ink);cursor:pointer;transition:border-color .15s,background .15s}
.fin-tile:hover{border-color:var(--accent)}
.fin-tile:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.fin-tile .l{font-size:10.5px;color:var(--ink-3);font-weight:600;line-height:1.3}
.fin-tile .v{font-size:17px;font-weight:750;letter-spacing:-.3px;margin-top:5px;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.fin-tiles.tres .fin-tile .v{font-size:15px}
.fin-tile .v.pos{color:var(--ok)}
.fin-tile .v.neg{color:var(--crit)}
/* A marca ocupa espaço mesmo apagada: sem isso o card pula de altura a cada
   troca de aba, e a página inteira dá um solavanco embaixo do dedo. */
.fin-tile .marca{display:inline-flex;align-items:center;gap:4px;margin-top:6px;visibility:hidden;
  font-size:9.5px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.06em}
.fin-tile .marca i{width:6px;height:6px;border-radius:50%;background:var(--accent)}
.fin-tile.on{border-color:var(--accent);border-width:2px;background:var(--accent-soft);padding:9px 10px}
.fin-tile.on .l{color:var(--accent-strong)}
.fin-tile.on .v{color:var(--accent)}
.fin-tile.on .v.pos,.fin-tile.on .v.neg{color:var(--accent)}
.fin-tile.on .marca{visibility:visible}
.fin-ano-grafico{margin-top:15px}

/* Funil: quatro etapas que só encolhem. */
.fin-funil-row{display:grid;grid-template-columns:82px minmax(0,1fr) auto;align-items:center;gap:10px;margin-bottom:9px}
.fin-funil-row .rot{font-size:11.5px;color:var(--ink-2)}
.fin-funil-row .trilho{display:block;height:11px;border-radius:99px;background:var(--line-2);overflow:hidden}
.fin-funil-row .trilho b{display:block;height:100%;border-radius:inherit;background:var(--chart-blue)}
.fin-funil-row .val{font-size:12.5px;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.fin-nota{margin-top:11px;padding:10px 12px;background:var(--surface-2);border:1px solid var(--line-2);
  border-radius:10px;font-size:11.5px;line-height:1.45;color:var(--ink-2)}

/* Caixa do período. */
.fin-caixa{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px}
.fin-caixa>div{background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--radius-sm);padding:9px 10px}
.fin-caixa span{display:block;font-size:11px;color:var(--ink-3);font-weight:600}
.fin-caixa b{display:block;font-size:15px;font-weight:700;margin-top:2px;font-variant-numeric:tabular-nums;white-space:nowrap}
.fin-caixa b.pos{color:var(--ok)}
.fin-caixa b.neg{color:var(--crit)}
.fin-barras{display:flex;align-items:flex-end;justify-content:center;gap:26px;padding:16px 8px 0}
.fin-barra-grupo{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:10.5px;color:var(--ink-3)}
.fin-barra-grupo strong{font-size:10.5px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.fin-barra-grupo i{display:block;width:40px;border-radius:7px 7px 2px 2px;background:var(--chart-blue)}
.fin-barra-grupo i.rec{background:var(--chart-green)}
.fin-barra-grupo i.sal{background:var(--chart-amber)}

/* Ranking por cliente/loja: barra dupla — o traço claro é o previsto, o cheio é
   o já confirmado. Assim a lista nasce ordenada e útil já no primeiro dia da
   quinzena, quando nada foi confirmado ainda. */
.fin-rank-row+.fin-rank-row{margin-top:13px}
.fin-rank-row .topo{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:12.5px}
.fin-rank-row .topo span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fin-rank-row .topo b{flex:0 0 auto;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.fin-rank-row .topo b small{font-size:11px;font-weight:500;color:var(--ink-3)}
.fin-rank-row .trilho{position:relative;display:block;height:9px;border-radius:99px;background:var(--line-2);margin-top:6px;overflow:hidden}
.fin-rank-row .trilho b{position:absolute;left:0;top:0;height:100%;border-radius:inherit}
.fin-rank-row .trilho b.prev{background:color-mix(in srgb,var(--chart-blue) 26%,var(--surface))}
.fin-rank-row .trilho b.conf{background:var(--chart-blue)}
.fin-rank-row .sub{display:block;font-size:10.5px;color:var(--ink-3);margin-top:5px;line-height:1.35}

/* Posição em aberto — fora do recorte de período, de propósito. */
.fin-pos{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:9px}
.fin-pos-box{border:1px solid var(--line);border-radius:var(--radius-sm);padding:11px 12px}
.fin-pos-box .l{display:block;font-size:11.5px;color:var(--ink-3);font-weight:600}
.fin-pos-box .v{display:block;font-size:19px;font-weight:750;margin-top:3px;font-variant-numeric:tabular-nums}
.fin-pos-linhas{margin-top:9px;border-top:1px solid var(--line-2);padding-top:7px}
.fin-pos-linhas>div{display:flex;justify-content:space-between;gap:10px;font-size:11px;color:var(--ink-3);margin-top:5px}
.fin-pos-linhas b{color:var(--ink);font-variant-numeric:tabular-nums}
.fin-pos-linhas b.warn{color:var(--warn)}
.fin-pos-linhas b.neg{color:var(--crit)}

/* Pendências: cada linha navega para a tela que resolve aquilo. */
.fin-alertas{padding:4px 16px 12px}
.fin-alerta{display:grid;grid-template-columns:34px minmax(0,1fr) 14px;align-items:center;gap:10px;width:100%;
  padding:11px 0;border:0;border-bottom:1px solid var(--line-2);background:none;text-align:left;
  font-family:inherit;color:var(--ink);cursor:pointer}
.fin-alerta:last-child{border-bottom:0}
.fin-alerta:hover{background:var(--bg)}
.fin-alerta:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:6px}
.fin-alerta .ic{width:32px;height:32px;border-radius:9px;display:grid;place-items:center}
.fin-alerta .ic svg{width:17px;height:17px}
.fin-alerta.crit .ic{background:var(--crit-soft);color:var(--crit)}
.fin-alerta.warn .ic{background:var(--warn-soft);color:var(--warn)}
.fin-alerta.info .ic{background:var(--accent-soft);color:var(--accent-strong)}
.fin-alerta .tx{min-width:0;display:flex;flex-direction:column;gap:2px}
.fin-alerta .tx b{font-size:12.5px;font-weight:650}
.fin-alerta .tx small{font-size:11px;color:var(--ink-3);line-height:1.35}
.fin-alerta .chev{color:var(--ink-3);font-size:18px;line-height:1}

@media(max-width:420px){
  .fin-hero-main{grid-template-columns:104px minmax(0,1fr);gap:11px}
  .fin-ring,.fin-ring svg{width:104px;height:104px}
  .fin-ring-tx strong{font-size:19px}
  .fin-hero-num .v{font-size:22px}
  .fin-funil-row{grid-template-columns:70px minmax(0,1fr) auto;gap:8px}
  .fin-barras{gap:16px}
}

/* Configurações: bloco de aparência no formato do app móvel de referência. */
.cfg-appearance{border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden}
.cfg-appearance-pad{padding:18px 20px}
.cfg-appearance h2{margin:0;color:var(--ink);font-size:18px;font-weight:800;letter-spacing:0;line-height:1.2}
.cfg-appearance p{margin:8px 0 14px;color:var(--ink-3);font-size:13px;line-height:1.45;letter-spacing:0}
.cfg-appearance p b{color:var(--ink-2);font-weight:800}
.cfg-theme-seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:center;gap:0;width:100%;
  min-height:42px;padding:3px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);box-shadow:none}
.cfg-theme-seg button{min-width:0;min-height:34px;border-radius:8px;color:var(--ink-3);font-size:13px;font-weight:700;letter-spacing:0;transition:.16s}
.cfg-theme-seg button.active{background:var(--accent);color:#fff;box-shadow:var(--shadow-sm)}
.cfg-operacao-linha{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:20px}
.cfg-operacao-linha label{display:block;color:var(--ink);font-size:14px;font-weight:800;letter-spacing:0}
.cfg-operacao-linha p,.cfg-operacao-nota{margin:5px 0 0;color:var(--ink-3);font-size:12.5px;line-height:1.45;letter-spacing:0}
.cfg-minutos{display:grid;grid-template-columns:minmax(72px,92px) 38px;align-items:stretch;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface)}
.cfg-minutos input{width:100%;min-width:0;border:0;border-radius:0;padding:10px 8px;text-align:center;background:transparent;color:var(--ink);font:800 15px var(--mono);outline:0}
.cfg-minutos input:focus{box-shadow:inset 0 0 0 2px var(--accent)}
.cfg-minutos span{display:grid;place-items:center;border-left:1px solid var(--line);background:var(--surface-2);color:var(--ink-3);font-size:12px;font-weight:800}
.cfg-operacao-acoes{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line-2)}
.cfg-operacao-acoes>span{max-width:560px;color:var(--ink-3);font-size:12px;line-height:1.4}
.cfg-operacao-acoes .btn{flex:0 0 auto}
@media(max-width:720px){
  .cfg-appearance{border-radius:var(--radius)}
  .cfg-appearance-pad{padding:16px}
  .cfg-appearance h2{font-size:17px}
  .cfg-appearance p{font-size:12.5px;margin:8px 0 12px}
  .cfg-theme-seg{min-height:40px;border-radius:10px;padding:3px}
  .cfg-theme-seg button{min-height:32px;border-radius:8px;font-size:12.5px}
  .cfg-operacao-linha{grid-template-columns:1fr;gap:12px}
  .cfg-minutos{width:100%}
  .cfg-operacao-acoes{align-items:stretch;flex-direction:column}
  .cfg-operacao-acoes .btn{width:100%}
}
@media(max-width:420px){
  .cfg-appearance-pad{padding:14px}
  .cfg-appearance h2{font-size:16px}
  .cfg-appearance p{font-size:12px;line-height:1.4}
  .cfg-theme-seg button{font-size:12px}
}

/* chips (lojas vinculadas) na mesma linha do rótulo, alinhados à direita */
.det-row b.det-chips{display:flex;flex-wrap:wrap;gap:5px;justify-content:flex-end;min-width:0}
/* Seção de detalhes como acordeão (ver converterSecoesEmAcordeao). */
.det-acc{border-bottom:1px solid var(--line-2);padding:0}
.det-acc:last-child{border-bottom:0}
.det-acc summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;cursor:pointer;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--ink-2)}
.det-acc summary::-webkit-details-marker{display:none}
.det-acc summary::after{content:"";width:8px;height:8px;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);transform:rotate(45deg);transition:.15s;flex:0 0 auto}
.det-acc[open] summary::after{transform:rotate(225deg)}
.det-acc-b{padding:0 0 9px}

/* Postos & Horários — cabeçalho da loja com um tom de cor para se destacar do
   corpo do cartão; o valor/dia usa o verde de "recebido" do Receita Pro. */
.loja-card{margin-bottom:14px;overflow:hidden}
.loja-h{background:var(--accent-soft);border-bottom-color:transparent}
.loja-h h3{font-weight:600;color:var(--accent-strong)}
.loja-h .sub{color:var(--accent-strong);opacity:.75}
.loja-h-acts{display:flex;align-items:center;gap:10px;flex-shrink:0}
.loja-card .cli-chev{color:var(--accent-strong)}
.loja-card .cli-chev:hover{background:color-mix(in srgb,var(--accent) 14%,transparent)}
/* só os três dados da linha ficam em negrito — o resto pesava demais na leitura.
   O seletor do valor/dia precisa da mesma "força" do td acima, senão perde o peso. */
.loja-card .tbl tbody td{font-weight:400}
.loja-card .tbl tbody td b{font-weight:700}
.loja-card .tbl tbody td.valor-dia{font-weight:700;color:var(--ok)}
/* telefone discável: toque abre o discador do celular */
.det-link{color:var(--accent);text-decoration:none;font-weight:600}
.det-link:hover{text-decoration:underline}

/* Card do plantão — o bloco que a Agenda usa no modo Dia para cada lançamento:
   avatar e QRA à esquerda, valor à direita e a faixa de status embaixo. */
.plt-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px}
.plt-card-top{display:flex;align-items:flex-start;gap:10px}
.plt-card-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.plt-card-info b{font-size:14px}
.plt-card-info span{font-size:12px;color:var(--ink-3)}
.plt-card-val{text-align:right;flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.plt-card-val b{font-size:14.5px}
.plt-card-bottom{display:flex;align-items:center;gap:10px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line-2)}

/* Cancelado (Agenda): posto que o cliente avisou que não vai funcionar — fica
   visível e cinza, nunca reaparece como "descoberto". Sem ações de plantão:
   confirmar/falta/troca não fazem sentido para um serviço que não vai acontecer. */
.plt-card.cancelado{background:var(--surface-2);border-style:dashed}
.plt-card.cancelado .cancelado-av{background:var(--line-2);color:var(--ink-3)}
.plt-card.cancelado .plt-card-info b{color:var(--ink-2)}

/* Faixa de status do plantão: o chip do estado atual e, à direita, só as ações
   válidas para ele — a linha de trabalho do líder no card da Agenda. A cor é
   semântica e vem sempre de tokens.css: verde confirma, vermelho é falta, âmbar
   é troca, azul é agendado. */
.plt-status{display:flex;align-items:center;flex-wrap:wrap;gap:8px;width:100%}
.plt-acts{display:inline-flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:4px;margin-left:auto}
.plt-act{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:38px;padding:7px 11px;border-radius:10px;
  font-size:12.5px;font-weight:600;color:var(--ink-2);background:transparent;border:1px solid transparent}
.plt-act svg{width:15px;height:15px;flex-shrink:0}
.plt-act:hover{background:var(--line-2)}
.plt-act.falta{color:var(--crit)}
.plt-act.falta:hover{background:var(--crit-soft)}
.plt-act.troca{color:var(--troca)}
.plt-act.troca:hover{background:var(--troca-soft)}
/* Ação principal: única preenchida do card, sempre a mais à direita. */
.plt-act.confirmar{background:var(--ok);border-color:var(--ok);color:#fff;padding:8px 15px}
.plt-act.confirmar:hover{background:var(--ok);filter:brightness(.94);box-shadow:var(--shadow-sm)}
.plt-act.desfazer{color:var(--ok);border-color:var(--line);margin-left:auto}
.plt-act.desfazer:hover{background:var(--ok-soft)}
.plt-act.corrigir{border-color:var(--line);margin-left:auto}
.plt-cronometro{font-variant-numeric:tabular-nums}
/* "Correção após 15s somente pelo admin" — explica o botão que sumiu. */
.plt-nota{display:inline-flex;align-items:center;gap:5px;margin-left:auto;font-size:12px;color:var(--ink-3)}
.plt-nota svg{width:14px;height:14px;flex-shrink:0}
.plt-obs{font-size:12.5px;color:var(--ink-2)}
.plt-obs b{font-weight:650}
.tbl .r-act{align-items:center;white-space:nowrap}
.sheet-item.perigo b{color:var(--crit)}

/* Contas a Receber/Pagar: linha expansível com os lançamentos que compõem o
   total do grupo (loja ou policial) — some abaixo da linha principal ao abrir. */
.row-expand td{padding:0 0 10px!important;background:var(--surface-2)}
.row-expand .data-list{padding:2px 16px 0}
.row-expand .dl-row:last-child{border-bottom:none}
/* alvos de toque de 44px — as mesmas ações da tabela, só que sempre visíveis e maiores */
.r-act.mobile{display:flex;gap:4px}
.r-act.mobile .btn{min-width:40px;min-height:40px;padding:8px}

/* Escala (gerador de quinzena): matriz postos × dias. */
.mtx-wrap{overflow-x:auto;padding:10px}
table.mtx{border-collapse:separate;border-spacing:3px;font-size:11.5px}
.mtx thead th{padding:2px;font-weight:600;color:var(--ink-3);text-align:center;white-space:nowrap}
.mtx-posto{position:sticky;left:0;background:var(--surface);text-align:left!important;padding:8px 12px!important;white-space:nowrap;font-size:12.5px;z-index:2}
.mtx-posto .mtx-hor{display:block;font-size:10.5px;font-weight:500;color:var(--ink-3);margin-top:1px}
.mtx-dow{display:block;font-size:9px;text-transform:uppercase;letter-spacing:.4px}
.mtx-dia{display:block;font-size:12px;font-weight:650;color:var(--ink)}
.mtx-cell{width:38px;height:36px;min-width:38px;text-align:center;font-size:11px;font-weight:650;border:1px solid var(--line-2);
  border-radius:7px;cursor:pointer;transition:filter .12s;background:var(--crit-soft);color:var(--crit)}
.mtx-cell:hover{filter:brightness(.96)}
.mtx-cell.coberto{background:var(--accent-soft);color:var(--accent-strong);border-color:transparent}
.mtx-cell.proposta{background:var(--surface);color:var(--accent-strong);border:1.5px dashed var(--accent)}
.mtx-cell.troca{background:var(--warn-soft);color:var(--warn);border-color:transparent}
@media(max-width:860px){.mtx-cell{width:34px}}

/* Escala revisada: controles no formato mobile-first e matriz alinhada. */
.esc-controls{display:flex;flex-direction:column;gap:12px;margin-bottom:10px}
.esc-field{display:flex;flex-direction:column;gap:6px}
.esc-field>span{font-size:11.5px;color:var(--ink-3);font-weight:700}
.esc-field .sel{width:100%;height:40px;background:var(--surface)}
.esc-period{display:grid;grid-template-columns:52px minmax(0,1fr) 52px;gap:10px;align-items:center}
.esc-period .icon-btn{width:100%;height:42px;border:1px solid var(--line);background:var(--surface)}
.esc-period b{height:42px;border:1px solid var(--line);border-radius:10px;display:grid;place-items:center;font-size:13.5px;color:var(--ink);white-space:nowrap}
.esc-repeat{display:inline-flex;align-items:center;gap:7px;color:var(--accent);font-size:13px;font-weight:700;width:max-content}
.esc-repeat svg{width:16px;height:16px}
.esc-repeat:disabled{color:var(--ink-3);opacity:.55;cursor:not-allowed}
.esc-actions{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin:8px 0}
.esc-actions .btn{justify-content:center;min-height:42px;padding:8px 10px;font-size:12.5px;border-radius:8px}
.esc-status{display:flex;align-items:center;gap:8px;margin:0 0 8px;padding:10px 14px;border-radius:8px;font-size:13px;background:var(--ok-soft);color:var(--ink-2)}
.esc-status-icon{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--ok);color:var(--ok);font-size:12px;font-weight:900;flex:0 0 auto}
.esc-status strong{color:var(--crit)}
.esc-travada{display:flex;align-items:center;gap:12px;margin-bottom:10px;border-color:var(--warn)}
.esc-travada.destravada{border-color:var(--crit)}
.esc-travada-txt{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.esc-travada-txt b{font-size:13.5px}
.esc-travada-txt span{font-size:12.5px;color:var(--ink-3);line-height:1.4}
.esc-travada .btn{flex:0 0 auto}
@media(max-width:640px){.esc-travada{flex-direction:column;align-items:stretch}.esc-travada .btn{width:100%;justify-content:center}}
.esc-publish{width:100%;justify-content:center;min-height:42px;margin-bottom:10px;border-radius:8px}
.esc-legend{margin-top:12px}
.mtx-wrap{overflow-x:auto;overflow-y:hidden;padding:12px 0;border-radius:8px}
table.mtx{border-collapse:separate;border-spacing:0 7px;font-size:12px;min-width:max-content}
.mtx thead th{padding:0 6px 7px;font-weight:700;color:var(--ink-3);text-align:center;white-space:nowrap}
/* Coluna congelada dos postos. A borda do congelamento é 1px de linha, não uma
   faixa opaca: um box-shadow com deslocamento e sem spread negativo pinta uma
   cópia sólida do próprio bloco ao lado dele e comeria a lateral do primeiro dia
   mesmo com a matriz sem rolagem. O segundo shadow tem spread -7px justamente
   para morrer antes de cobrir a primeira célula. */
.mtx-posto{position:sticky;left:0;background:var(--surface);text-align:left!important;padding:10px 16px!important;white-space:nowrap;font-size:12.5px;z-index:5;min-width:138px;width:138px;
  box-shadow:1px 0 0 var(--line),7px 0 8px -7px rgba(0,0,0,.22)}
.mtx-posto b{display:block;font-size:14px;color:var(--ink);line-height:1.2}
.mtx-posto .mtx-hor{display:block;font-size:12px;font-weight:500;color:var(--ink-3);margin-top:5px}
.mtx-dow{display:block;font-size:9.5px;text-transform:uppercase;letter-spacing:.4px}
.mtx-dia{display:block;font-size:13px;font-weight:750;color:var(--ink)}
.mtx-cell{width:50px;height:52px;min-width:50px;text-align:center;font-size:12px;font-weight:800;border:0;border-radius:8px;cursor:pointer;transition:filter .12s;background:var(--crit-soft);color:var(--crit);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.mtx-cell.coberto{background:var(--accent-soft);color:var(--accent-strong)}
.mtx-cell.proposta{background:var(--surface);color:var(--accent-strong);box-shadow:inset 0 0 0 1.5px var(--accent)}
.mtx-cell.troca{background:var(--warn-soft);color:var(--warn)}
/* Cancelado: resolvido, cinza — nunca mais o vermelho de lacuna (era o achado
   D11: hoje cancelar devolve a célula para "descoberto"). */
.mtx-cell.cancelado{background:var(--line-2);color:var(--ink-3);font-size:9.5px;letter-spacing:.03em;box-shadow:none}
/* Dia fora do funcionamento da loja (D12): cinza claro, fora da contagem de
   lacunas, mas continua clicável — é por aqui que entra o extra de sábado. */
.mtx-cell.nao-previsto{background:var(--surface-2);color:var(--line);box-shadow:inset 0 0 0 1px var(--line-2);cursor:pointer}
/* Extra: alguém escalado num dia fora do funcionamento — mesma cor de troca
   (âmbar), para chamar atenção de que é exceção, sem inventar uma cor nova. */
.mtx-cell.coberto.extra,.mtx-cell.proposta.extra{background:var(--warn-soft);color:var(--warn)}
@media(max-width:860px){
  .esc-actions .btn{font-size:11px;padding:8px 6px}
  .mtx-posto{min-width:132px;width:132px;padding-left:14px!important}
  .mtx-cell{width:50px;min-width:50px;height:52px}
}

/* ============================================================
   Início (dashboard) — componentes próprios do painel. Desenho vindo de
   telas-propostas.html (seções 01/02): faixa escura de "agora", filtro de
   período, cartões de indicador, cobertura em barras verticais, alertas com
   marcador de severidade e base cadastral.
   ============================================================ */

/* Faixa "Agora": o único painel escuro da tela, para separar "o que está
   acontecendo agora" do resto, que é análise de um período escolhido. */
.dash-faixa{background:var(--faixa-bg);border-radius:var(--radius);padding:13px 15px;color:var(--faixa-ink);margin-bottom:13px}
.dash-faixa-h{display:flex;align-items:center;gap:7px;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--faixa-ink-2);margin-bottom:9px;font-weight:600}
.dash-faixa-h .live{width:6px;height:6px;border-radius:50%;background:var(--faixa-live);
  box-shadow:0 0 0 3px rgba(95,208,138,.22);flex:0 0 auto}
.dash-faixa-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.dash-faixa-i{position:relative;display:block;width:100%;min-width:0;min-height:72px;padding:8px 23px 8px 9px;border:0;border-radius:var(--radius-sm);background:var(--faixa-tile);color:inherit;font:inherit;text-align:left;cursor:pointer}
.dash-faixa-i:hover{filter:brightness(1.08)}
.dash-faixa-i:focus-visible{outline:2px solid var(--faixa-ink);outline-offset:2px}
.dash-faixa-i .v,.dash-faixa-i .l,.dash-faixa-i .s{display:block}
.dash-faixa-i .v{font-size:19px;font-weight:700;line-height:1.1;letter-spacing:-.3px}
.dash-faixa-i .l{font-size:11px;color:var(--faixa-ink-2);line-height:1.25;margin-top:2px}
.dash-faixa-i .s{font-size:10.5px;color:var(--faixa-ink-2);line-height:1.2;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dash-faixa-chev{position:absolute;top:8px;right:9px;color:var(--faixa-ink-2);font-size:18px;line-height:1}
.dash-faixa-i.crit{background:var(--faixa-tile-crit)}
.dash-faixa-i.crit .v{color:var(--faixa-ink-crit)}
.dash-faixa-i.warn{background:var(--faixa-tile-warn)}
.dash-faixa-i.warn .v{color:var(--faixa-ink-warn)}
.dash-faixa-cta{display:block;width:100%;margin-top:9px;background:var(--faixa-ink);color:var(--faixa-bg);
  border:0;border-radius:var(--radius-sm);padding:9px;font:600 13.5px var(--sans);text-align:center;cursor:pointer}
.dash-faixa-cta:hover{filter:brightness(.95)}
@media(max-width:560px){.dash-faixa-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

.modal.folha.wide{max-width:650px;border-radius:8px}
.folha .modal-b{overscroll-behavior:contain}
.dash-detail-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin-bottom:18px;overflow:hidden;border:1px solid var(--line);border-radius:7px;background:var(--line)}
.dash-detail-summary>div{padding:12px 8px;background:var(--bg);text-align:center}
.dash-detail-summary b{display:block;font-size:22px;line-height:1}
.dash-detail-summary b.ok{color:var(--ok)}
.dash-detail-summary b.warn{color:var(--warn)}
.dash-detail-summary b.crit{color:var(--crit)}
.dash-detail-summary b.info{color:var(--accent)}
.dash-detail-summary b.neutral{color:var(--ink-3)}
.dash-detail-summary span{display:block;margin-top:4px;color:var(--ink-2);font-size:11px;line-height:1.25}
.dash-detail-group+.dash-detail-group{margin-top:20px}
.dash-detail-group-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding-bottom:7px;border-bottom:1px solid var(--line)}
.dash-detail-group-h h4{margin:0;font-size:15px}
.dash-detail-group-h span{color:var(--ink-3);font-size:11px}
.dash-detail-record{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:11px;align-items:center;min-height:72px;padding:10px 0;border-bottom:1px solid var(--line-2)}
.dash-detail-record:last-child{border-bottom:0}
.dash-detail-avatar{display:grid;width:42px;height:42px;place-items:center;border-radius:7px;color:#fff;font-weight:800}
.dash-detail-main{min-width:0}
.dash-detail-main b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dash-detail-main span{display:block;margin-top:2px;color:var(--ink-2);font-size:12px;line-height:1.35}
.dash-detail-tag{display:inline-flex;align-items:center;min-height:27px;padding:4px 8px;border-radius:14px;font-size:11px;font-weight:800;white-space:nowrap}
.dash-detail-tag.ok{color:var(--ok);background:var(--ok-soft)}
.dash-detail-tag.warn{color:var(--warn);background:var(--warn-soft)}
.dash-detail-tag.crit{color:var(--crit);background:var(--crit-soft)}
.dash-detail-tag.info{color:var(--accent);background:var(--accent-soft)}
.dash-detail-tag.troca{color:var(--warn);background:var(--warn-soft)}
.dash-detail-tag.neutral{color:var(--ink-2);background:var(--line)}
.dash-detail-sub-h{display:flex;align-items:center;justify-content:space-between;margin-top:11px;padding:7px 9px;border-radius:6px;background:var(--bg);font-size:12px}
.dash-detail-sub-h span{color:var(--ink-3);font-weight:700}
.dash-detail-sub-empty{padding:13px 9px;color:var(--ink-3);font-size:12px;border-bottom:1px solid var(--line-2)}
.dash-detail-note{display:flex;gap:10px;margin-top:16px;padding:11px 12px;border-radius:6px;color:var(--accent-strong);background:var(--accent-soft);font-size:12px}
.dash-detail-note span{color:var(--ink-2)}
.dash-detail-future{margin-top:14px}
.dash-detail-empty{padding:38px 20px;text-align:center}
.dash-detail-empty>span{display:grid;width:58px;height:58px;margin:0 auto 14px;place-items:center;border-radius:50%;color:var(--ok);background:var(--ok-soft);font-size:28px;font-weight:800}
.dash-detail-empty h4{margin:0;font-size:18px}
.dash-detail-empty p{max-width:380px;margin:7px auto 0;color:var(--ink-2);font-size:13px;line-height:1.5}
/* Linha de detalhe que leva a outra tela: as listas de faltas/trocas e de
   lacunas abrem a Agenda no dia do fato. Mesma leitura da linha estática, com
   alvo de toque de botão. */
.dash-detail-link{width:100%;text-align:left;cursor:pointer;background:none;font:inherit;color:inherit;
  border-width:0 0 1px;border-style:solid;border-color:var(--line-2)}
.dash-detail-link:last-child{border-bottom-width:0}
.dash-detail-link:hover{background:var(--bg)}
.dash-detail-link:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:6px}
.dash-detail-end{display:flex;align-items:center;gap:7px}
.dash-detail-chev{flex:0 0 auto;color:var(--ink-3);font-size:19px;line-height:1}

@media(max-width:560px){
  .overlay.folha-open{align-items:flex-end;padding:0}
  .modal.folha{max-width:none;max-height:88dvh;border-radius:10px 10px 0 0;animation:slideUp .25s ease both}
  .modal.folha::before{content:"";width:42px;height:4px;flex:0 0 auto;align-self:center;margin-top:7px;border-radius:2px;background:var(--line)}
  .folha .modal-h{padding:11px 16px 13px}
  .folha .modal-b{padding:14px 16px 22px}
  .folha .modal-f{padding-bottom:calc(11px + env(safe-area-inset-bottom))}
}
@media(max-width:390px){
  .dash-detail-record{grid-template-columns:38px minmax(0,1fr)}
  .dash-detail-avatar{width:38px;height:38px}
  .dash-detail-record .dash-detail-tag{grid-column:2;justify-self:start;margin-top:-5px;white-space:normal}
  .dash-detail-record .dash-detail-end{grid-column:2;justify-self:start;margin-top:-5px}
  .dash-detail-end .dash-detail-tag{margin-top:0}
  .dash-detail-note{flex-direction:column;gap:3px}
}

/* Filtro de período: segmentado de largura total + linha de navegação centrada.
   Ocupa a largura toda de propósito — é o controle que reconfigura a tela inteira. */
.dash-periodo{margin-bottom:13px}
.dash-seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--surface);
  border:1px solid var(--line);border-radius:10px;padding:3px;gap:2px}
.dash-seg button{border:0;background:none;border-radius:7px;padding:7px 4px;font:600 13px var(--sans);
  color:var(--ink-2);cursor:pointer;transition:.15s}
.dash-seg button:hover:not(.active){background:var(--line-2)}
.dash-seg button.active{background:var(--accent);color:var(--ink-inv)}
.dash-nav{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:8px;
  font-size:13.5px;color:var(--ink-2);font-weight:600}
.dash-nav .icon-btn{width:28px;height:28px}

/* Cartões de indicador do período. O chevron indica que o cartão abre outra tela;
   o denominador vem menor e cinza para o numerador ser o que se lê primeiro. */
.dash-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:9px;margin-bottom:13px}
.dash-tile{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 12px;position:relative}
.dash-tile .l{font-size:12px;color:var(--ink-3);font-weight:600;padding-right:14px}
.dash-tile .v{font-size:22px;font-weight:700;line-height:1.15;margin-top:2px;letter-spacing:-.3px;font-variant-numeric:tabular-nums}
.dash-tile .v small{font-size:14px;font-weight:600;color:var(--ink-3)}
.dash-tile .s{font-size:11.5px;color:var(--ink-3);margin-top:1px}
.dash-tile.link{cursor:pointer;transition:border-color .15s}
.dash-tile.link:hover{border-color:var(--accent)}
.dash-tile.link::after{content:"\203A";position:absolute;right:11px;top:7px;color:var(--ink-3);font-size:17px;line-height:1}
.dash-tile.crit .v{color:var(--crit)}
.dash-tile.ok .v{color:var(--ok)}
.dash-tile.warn .v{color:var(--warn)}
.dash-tile.accent .v{color:var(--accent)}

/* Situação dos postos por dia: 100% da demanda originalmente prevista. O
   cancelamento do cliente permanece visível em cinza; extras não entram. As
   texturas mantêm os estados distinguíveis sem depender somente da cor. */
.dash-bars{display:flex;align-items:flex-end;gap:3px;height:120px}
.dash-bar{flex:1;position:relative;display:flex;flex-direction:column;justify-content:flex-end;height:100%;
  min-width:0;overflow:hidden;padding:0;border:0;border-radius:3px;background:none;cursor:pointer}
.dash-bar:hover{filter:brightness(1.06)}
.dash-bar:focus-visible{z-index:2;outline:2px solid var(--accent);outline-offset:2px}
.dash-bar>span{display:block;width:100%;min-height:0}
.dash-bar .confirmado,.dash-legend i.confirmado{background:var(--chart-blue)}
.dash-bar .escalado,.dash-legend i.escalado{background-color:color-mix(in srgb,var(--chart-blue) 44%,var(--surface));
  background-image:repeating-linear-gradient(135deg,transparent 0 4px,rgba(255,255,255,.38) 4px 6px)}
.dash-bar .pendencia,.dash-legend i.pendencia{background-color:var(--chart-amber);
  background-image:radial-gradient(rgba(255,255,255,.62) 1px,transparent 1.5px);background-size:6px 6px}
.dash-bar .falha,.dash-legend i.falha{background-color:var(--crit);
  background-image:repeating-linear-gradient(45deg,transparent 0 4px,rgba(30,0,0,.2) 4px 6px)}
.dash-bar .cancelado,.dash-legend i.cancelado{background-color:var(--ink-3);
  background-image:repeating-linear-gradient(0deg,transparent 0 4px,rgba(255,255,255,.35) 4px 6px)}
.dash-bar.hoje{outline:2px solid var(--accent);outline-offset:1px}
.dash-bar.vazio{height:3px;border-radius:2px;background:var(--line);cursor:default}
.dash-xaxis{display:flex;gap:3px;margin-top:6px}
.dash-xaxis span{flex:1;text-align:center;font-size:10px;color:var(--ink-3);min-width:0;overflow:hidden;
  font-variant-numeric:tabular-nums}
.dash-readout{margin-top:9px;font-size:12.5px;color:var(--ink-2);background:var(--surface-2);
  border:1px solid var(--line-2);border-radius:var(--radius-sm);padding:7px 10px}
.dash-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:8px;font-size:12px;color:var(--ink-2)}
.dash-legend i{width:9px;height:9px;border-radius:2px;display:inline-block;margin-right:5px;vertical-align:-1px}

/* Linha de loja: nome + trilha curta + percentual. Trilha estreita de propósito —
   aqui o que se compara é a ordem da lista, não a medida exata de cada barra. */
.dash-loja{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line-2)}
.dash-loja:last-child{border-bottom:0}
.dash-loja .nm{flex:1;min-width:0}
.dash-loja .nm b{display:block;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dash-loja .nm span{display:block;font-size:11.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dash-loja .track{flex:0 0 62px;height:7px;background:var(--line-2);border-radius:4px;overflow:hidden}
.dash-loja .fill{height:100%;background:var(--chart-blue);border-radius:4px;width:0;
  transition:width .9s cubic-bezier(.22,1,.36,1)}
.dash-loja .pc{flex:0 0 38px;text-align:right;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.dash-loja.risco .fill{background:var(--crit)}
.dash-loja.risco .pc{color:var(--crit)}

/* Resumo financeiro */
.dash-fin-h{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin:0 0 7px}
.dash-fin-h.seg2{margin-top:11px}
.dash-fin3{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:7px}
.dash-fin3>div{background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--radius-sm);padding:8px 9px}
.dash-fin3 .l{font-size:11px;color:var(--ink-3);font-weight:600}
.dash-fin3 .v{font-size:14px;font-weight:700;margin-top:2px;white-space:nowrap;font-variant-numeric:tabular-nums}
.dash-fin3 .v.ok{color:var(--ok)}
.dash-res{display:flex;align-items:center;gap:10px;background:var(--accent-soft);border-radius:10px;padding:10px 12px;margin-top:11px}
.dash-res .l{font-size:12.5px;color:var(--accent);font-weight:600;line-height:1.3}
.dash-res .l span{font-weight:400;color:var(--ink-3)}
.dash-res .v{margin-left:auto;font-size:17px;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums}
.dash-venc{display:flex;align-items:center;gap:10px;border:1px solid var(--crit);background:var(--crit-soft);
  border-radius:10px;padding:9px 12px;margin-top:10px}
.dash-venc .l{font-size:12.5px;color:var(--crit);font-weight:600}
.dash-venc .s{font-size:11px;color:var(--ink-3)}
.dash-venc .v{margin-left:auto;font-size:15px;font-weight:700;color:var(--crit);font-variant-numeric:tabular-nums}

/* Alertas: bolinha de severidade + o fato + o prazo + a ação que resolve. */
.dash-al{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--line-2);align-items:flex-start}
.dash-al:last-child{border-bottom:0}
.dash-al .mk{flex:0 0 auto;width:8px;height:8px;border-radius:50%;margin-top:6px}
.dash-al.crit .mk{background:var(--crit)}
.dash-al.warn .mk{background:var(--warn)}
.dash-al.info .mk{background:var(--chart-blue)}
.dash-al .tx{flex:1;min-width:0}
.dash-al .tx b{display:block;font-size:13px;font-weight:600;line-height:1.35}
.dash-al .tx span{font-size:11.5px;color:var(--ink-3)}
.dash-al .go{flex:0 0 auto;font-size:12.5px;color:var(--accent);font-weight:600;white-space:nowrap;
  background:none;border:0;font-family:inherit;padding:3px 0;cursor:pointer}
.dash-al .go:hover{text-decoration:underline}

/* Base cadastral: quatro números de mesmo peso, separados por linha. Sempre 4
   colunas — com auto-fit o quarto item caía sozinho numa segunda linha no celular. */
.dash-base{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:10px;overflow:hidden}
.dash-base>div{background:var(--surface);padding:10px 5px;text-align:center;min-width:0}
.dash-base .v{font-size:17px;font-weight:700;font-variant-numeric:tabular-nums}
.dash-base .l{font-size:10.5px;color:var(--ink-3);line-height:1.25;margin-top:2px}

/* Evolução do dinheiro: duas séries no tempo — linha cheia para o faturado,
   tracejada para o que efetivamente entrou. O max-width impede que o SVG (que
   escala pela proporção do viewBox) fique com meio metro de altura no desktop. */
.dash-linechart{width:100%;max-width:560px;margin:0 auto;height:auto;display:block}

/* ---------------------------------------------------------------------------
   Contas a Receber — cobrança (proposta-contas-a-receber.html, etapa 3).
   view-contas-receber.js (lista) + cobranca-acoes.js (fechar/detalhe/receber/
   estornar/histórico) — mesmo papel que .plt-card/.mtx-cell têm para a Agenda
   e a Escala, um bloco de estilo por dono de tela.
   --------------------------------------------------------------------------- */

/* Faixa de fechamento — única porta de entrada para gerar uma cobrança nova */
.cob-fx{background:var(--warn-soft);border:1px solid var(--warn);border-radius:var(--radius);padding:12px 14px;margin-bottom:12px}
.cob-fx .fx-h{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--warn)}
.cob-fx .fx-h .dot{width:7px;height:7px;border-radius:50%;background:var(--warn)}
.cob-fx .tx{margin:6px 0 10px}
.cob-fx .tx b{display:block;font-size:14px}
.cob-fx .tx span{display:block;font-size:12.5px;color:var(--ink-2);margin-top:2px}
.cob-fx-cta{background:var(--warn);color:var(--ink-inv);border-radius:10px;padding:9px 14px;font-size:13px;font-weight:650}

.cob-actionline{margin:0 0 12px}
.cob-lote-btn{width:100%;min-height:58px;display:grid;grid-template-columns:38px minmax(0,1fr) 24px;align-items:center;gap:10px;
  padding:9px 12px;border:2px solid var(--accent);border-radius:12px;background:var(--surface);color:var(--accent);
  text-align:left;box-shadow:none;transition:border-color .12s,background .12s,box-shadow .12s,transform .12s}
.cob-lote-btn:hover{background:var(--accent-soft);box-shadow:var(--shadow-sm)}
.cob-lote-btn:active{transform:translateY(1px)}
.cob-lote-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cob-lote-ico{width:38px;height:38px;border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));border-radius:10px;display:grid;place-items:center;background:var(--surface)}
.cob-lote-ico svg{width:21px;height:21px}
.cob-lote-tx{min-width:0;display:flex;flex-direction:column;gap:2px}
.cob-lote-tx b{font-size:14px;line-height:1.2;color:var(--accent-strong)}
.cob-lote-tx small{font-size:12px;line-height:1.25;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cob-lote-chev{width:24px;height:24px;display:grid;place-items:center;color:var(--accent-strong)}
.cob-lote-chev svg{width:18px;height:18px}

/* Stepper de competência — a quinzena é a unidade real do negócio, então ela
   navega direto, sem abrir filtro (proposta § 03). "Todas" é o estado padrão. */
.cob-perline{display:flex;align-items:center;justify-content:center;gap:8px;margin:4px 0 10px;font-size:13.5px;color:var(--ink-2)}
.cob-perline .icon-btn{width:30px;height:30px;border:1px solid var(--line);background:var(--surface)}
.cob-perline b{min-width:0;text-align:center;font-size:13.5px;color:var(--ink)}
.cob-perline .mais{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:5px 10px;font-size:12px;font-weight:600;color:var(--ink-2)}
.cob-perline .mais.on{background:var(--accent);border-color:var(--accent);color:#fff}

/* Chips de situação — rolam na horizontal no celular em vez de quebrar linha */
.cob-chipbar{display:flex;gap:6px;overflow-x:auto;padding-bottom:3px;margin-bottom:11px;scrollbar-width:none}
.cob-chipbar::-webkit-scrollbar{display:none}
.cob-fchip{flex:0 0 auto;border:1px solid var(--line);background:var(--surface);border-radius:20px;padding:5px 12px;font-size:12.5px;font-weight:600;color:var(--ink-2);transition:.15s}
.cob-fchip.on{background:var(--accent);border-color:var(--accent);color:#fff}
.cob-fchip .ct{font-family:var(--mono);opacity:.7;margin-left:4px}

/* "O filtro está escondendo dinheiro" — nada some em silêncio de uma tela de
   cobrança; o tile do topo soma tudo, e esta linha explica a diferença. */
.cob-fora{display:block;width:100%;text-align:left;margin-top:12px;padding:10px 13px;border:1px dashed var(--line);border-radius:var(--radius);background:var(--surface-2)}
.cob-fora b{display:block;font-size:13px;color:var(--ink)}
.cob-fora span{display:block;font-size:12px;color:var(--ink-3);margin-top:2px}

/* Lista de cobranças */
.cob-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,420px);align-items:start;gap:14px}
.cob-list{display:flex;flex-direction:column;gap:10px}
.cob-list-card{padding:14px 16px;cursor:pointer;transition:border-color .12s,box-shadow .12s}
.cob-list-card.selected{border-color:var(--accent);box-shadow:inset 3px 0 0 var(--accent)}
.cob-list-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(hover:hover){.cob-list-card:hover{border-color:var(--accent);box-shadow:var(--shadow-sm)}}
.cob-list-card .top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.cob-list-card .nm b{display:block;font-size:14.5px}
.cob-list-card .nm span{display:block;font-size:12px;color:var(--ink-3);margin-top:1px}
.cob-list-card .vl{text-align:right;flex-shrink:0}
.cob-list-card .vl .k{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3)}
.cob-list-card .vl .n{font-size:16px;font-weight:650;font-family:var(--mono)}
.cob-list-card .chips{display:flex;gap:5px;margin-top:8px}
.cob-list-card .meta{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-3);margin-top:8px}
.cob-list-card .meta i{opacity:.5;font-style:normal}
.cob-list-card .act{display:flex;align-items:center;gap:8px;margin-top:12px}
.cob-list-card .act .primary{flex:1;justify-content:center;min-height:38px}
.cob-list-card .act .more{width:38px;min-width:38px;justify-content:center;font-size:18px;line-height:1;padding-inline:0}

/* Contas a Pagar: o card é mais expressivo que o de cobrança. O valor em
   destaque muda de cor pela urgência, e o bloqueado ganha fundo tracejado para
   deixar claro que não é ação do gestor agora. */
.rep-card{padding:11px 12px 10px;border-radius:11px}
.rep-card .nm{flex:1;min-width:0;display:flex;gap:8px;align-items:flex-start}
.rep-card .nm .tx{min-width:0}
.rep-card .nm b{font-size:13.8px;line-height:1.25}
.rep-card .nm span{font-size:11.2px;margin-top:1px}
.rep-card .vl .k{font-size:9.8px;letter-spacing:.03em;font-weight:700}
.rep-card .vl .n{font-size:16.5px;line-height:1.2}
.rep-card .chips{flex-wrap:wrap;gap:4px;margin-top:7px}
.rep-card .meta{font-size:11.5px;gap:7px;margin-top:6px;flex-wrap:wrap}
.rep-card .meta i{color:#B8C4D2;opacity:1}
.rep-card .act{gap:6px;margin-top:9px}
.rep-card .act .btn{border-radius:7px}
.rep-card .act .more{padding-inline:0}
.rep-card .act .rep-detail-btn{flex:1;justify-content:center;background:var(--surface);border-color:var(--line);color:var(--ink-2)}
.rep-card .act .rep-detail-btn:hover{background:var(--surface);border-color:var(--ink-3)}
.rep-card.venc{border-color:#F0D4D4}
.rep-card.hoje{border-color:#EEDCBE}
.rep-card.bloqueado{border-style:dashed;border-color:#DCC9E6;background:#FCFAFD}
.rep-card.bloqueado .vl .n{color:#5B3B6E}
.rep-card.venc .vl .n{color:var(--crit)}
.rep-card.pago{opacity:.78}
.rep-avatar{width:30px;height:30px;border-radius:9px;font-size:11px;letter-spacing:.02em}
.rep-inline-wait{margin-top:6px;font-size:11.5px;color:#5B3B6E;font-weight:600}
.rep-prog .tr{display:flex}
.rep-prog .fi{border-radius:4px 0 0 4px}
.rep-prog .fb{height:100%;background:#C9B3D6}
.rep-prog .lb b{font-weight:600}

/* Desktop: detalhe fixo ao lado da lista, em vez de abrir folha/modal só para ler. */
.cob-side{position:sticky;top:calc(var(--topbar-h) + 14px);max-height:calc(100vh - var(--topbar-h) - 28px);display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.cob-side-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:14px 15px;border-bottom:1px solid var(--line)}
.cob-side-head h3{margin:0;font-size:15px;font-weight:700;line-height:1.25}
.cob-side-head p{margin:2px 0 0;font-size:12px;color:var(--ink-3)}
.cob-side-scroll{overflow-y:auto;padding:12px 12px 0}
.cob-side-venc{padding:0 2px 12px;margin-top:-2px}
.cob-side-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:9px 14px}
.cob-side-row+.cob-side-row{border-top:1px solid var(--line-2)}
.cob-side-row span{min-width:0;display:flex;flex-direction:column}
.cob-side-row b{font-size:12.5px}
.cob-side-row small{font-size:11.5px;color:var(--ink-3);margin-top:1px}
.cob-side-row strong{font-family:var(--mono);font-size:13px;white-space:nowrap}
.cob-side-row strong.neg{color:var(--crit)}
.cob-side-row strong.add{color:var(--accent)}
/* Extrato de recebimentos/ajustes dentro do painel: as linhas .cob-lin nasceram
   no detalhe do celular, onde o card já tinha respiro. Aqui elas entram direto
   no .cob-card-b, que não tem recuo lateral. */
.cob-side .cob-card-b>.cob-lin{padding-left:14px;padding-right:14px}
.cob-side-actions{border-top:1px solid var(--line);padding:12px;display:flex;flex-direction:column;gap:8px}
.cob-side-actions>.btn{justify-content:center}
.cob-side-actions>div{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cob-side-actions>div .btn{justify-content:center}

/* Barra de progresso — usada na lista (parcial) e no fechamento (pendências) */
.cob-prog{margin-top:10px}
.cob-prog .tr{height:6px;border-radius:4px;background:var(--line-2);overflow:hidden}
.cob-prog .fi{height:100%;background:var(--accent);border-radius:4px}
.cob-prog .lb{display:flex;justify-content:space-between;font-size:11px;color:var(--ink-3);margin-top:4px}

/* Cartões de conteúdo dentro dos modais de cobrança (razonete, composição…) */
.cob-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:12px;overflow:hidden}
.cob-card-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:11px 14px;border-bottom:1px solid var(--line-2);font-size:13.5px;font-weight:650}
.cob-card-h small{font-size:11.5px;font-weight:500;color:var(--ink-3)}
.cob-card-b{padding:4px 0}

/* Razonete: rótulo (+sub) à esquerda, valor tabular à direita */
.cob-ledger{padding:6px 14px}
.cob-ledger-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:6px 0}
.cob-ledger-row+.cob-ledger-row{border-top:1px solid var(--line-2)}
.cob-ledger-l{display:flex;flex-direction:column}
.cob-ledger-l span{font-size:13px;color:var(--ink-2)}
.cob-ledger-l small{font-size:11px;color:var(--ink-3);margin-top:1px}
.cob-ledger-row b{font-size:13.5px;font-family:var(--mono);white-space:nowrap;flex-shrink:0}
.cob-ledger-row b.neg{color:var(--crit)}
.cob-ledger-row b.pos{color:var(--ok)}
.cob-ledger-row b.add{color:var(--accent)}
.cob-ledger-row.sub{border-top:1px solid var(--line)}
.cob-ledger-row.sub b{font-weight:650}
.cob-ledger-row.tot{border-top:2px solid var(--ink);margin-top:2px;padding-top:9px}
.cob-ledger-row.tot .cob-ledger-l span,.cob-ledger-row.tot b{font-size:15px;font-weight:700}

.cob-venc-lbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3)}
.cob-venc-val{font-family:var(--mono);font-size:17px;font-weight:650;margin-top:2px}
.cob-venc-sub{font-size:12px;color:var(--ink-3);line-height:1.5}

.cob-chips{display:flex;gap:6px;margin-bottom:12px}
.cob-detail-page{display:flex;flex-direction:column;gap:12px}
.cob-detail-top{display:flex;align-items:flex-start;gap:10px;margin-bottom:2px}
.cob-detail-top .icon-btn{width:38px;height:38px;flex:0 0 auto;background:var(--surface);border:1px solid var(--line)}
.cob-detail-top h2{margin:0;font-size:18px;line-height:1.2;letter-spacing:-.2px}
.cob-detail-top p{margin:3px 0 0;font-size:12.5px;color:var(--ink-3)}
.cob-detail-body{display:flex;flex-direction:column;gap:14px;background:var(--bg)}
.cob-detail-body>.cob-card{margin-bottom:0}
.cob-detail-actions{border-top:0;padding:0;margin-top:2px}
.cob-det-footer{flex-direction:column;align-items:stretch;gap:8px;background:var(--bg)}
.cob-det-footer>.btn,
.cob-det-footer .btn{justify-content:center;min-height:44px}
.cob-det-client-actions{display:flex;flex-direction:column;gap:8px;padding-top:2px}
.cob-det-split{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px}
.cob-det-admin-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:2px;padding-top:10px;border-top:1px solid var(--line-2)}
.cob-det-footer .btn.ghost{background:var(--surface);border-color:var(--line)}
.cob-det-footer .btn.ghost:hover{background:var(--surface);border-color:var(--ink-3)}
.cob-det-footer .btn svg,.sheet-item b svg{width:17px;height:17px;flex:0 0 auto;margin-right:7px}
.sheet-item b{display:flex;align-items:center}
.cob-det-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px}
.cob-det-actions.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.cob-det-actions .btn{justify-content:center;min-width:0}
.cob-pdf-scope{padding-bottom:8px}
.cob-pdf-scope .sheet-item b{font-size:14px}
.cob-pdf-scope .sheet-item span{line-height:1.35}
.cob-rec-toggle{display:flex;width:100%;margin:0 0 12px}
.cob-rec-toggle button{flex:1;min-height:36px}

/* Composição por loja — acordeão de dois níveis, fecha por padrão */
.cob-acc+.cob-acc{border-top:1px solid var(--line-2)}
.cob-acc .hd{display:flex;align-items:center;gap:8px;width:100%;padding:10px 14px;text-align:left}
.cob-acc .hd .cv{display:inline-block;transition:transform .15s;color:var(--ink-3);font-size:11px}
.cob-acc.open .hd .cv{transform:rotate(180deg)}
.cob-acc .hd b{flex:1;font-size:13px}
.cob-acc .hd .qt{font-size:11.5px;color:var(--ink-3)}
.cob-acc .hd .vv{font-size:13px;font-family:var(--mono);font-weight:600}
.cob-acc .bd{display:none;padding:0 14px 8px}
.cob-acc.open .bd{display:block;max-height:min(44dvh,420px);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y;padding-right:10px}
.cob-detail-page .cob-acc.open .bd{max-height:none;overflow:visible;touch-action:auto;padding-right:14px}
.cob-comp-sheet-meta{padding:0 16px 10px;font-size:12px;color:var(--ink-3)}
.cob-comp-sheet-list{max-height:calc(78dvh - 76px);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:0 16px 16px}
.cob-comp-sheet-list .cob-lin{padding:10px 0}

/* Linha de item (composição) ou recebimento (extrato) */
.cob-lin{display:flex;align-items:center;gap:10px;padding:7px 0}
.cob-lin+.cob-lin{border-top:1px solid var(--line-2)}
.cob-lin.fora{opacity:.72}
.cob-lin .dt{font-size:11.5px;color:var(--ink-3);flex-shrink:0;white-space:nowrap}
.cob-lin .ds{flex:1;min-width:0;display:flex;flex-direction:column}
.cob-lin .ds b{font-size:12.5px}
.cob-lin .ds span{font-size:11.5px;color:var(--ink-3)}
.cob-lin .vv{font-size:13px;font-family:var(--mono);white-space:nowrap;display:flex;align-items:center;flex-shrink:0}

/* Alertas dentro dos modais de fechamento/recebimento (ok/wn/inf) */
.cob-alerta{border-radius:var(--radius);padding:11px 13px;margin-bottom:12px;font-size:12.5px;line-height:1.5}
.cob-alerta b{display:block;font-size:13px;margin-bottom:2px}
.cob-alerta.ok{background:var(--ok-soft);color:var(--ink-2)}
.cob-alerta.ok b{color:var(--ok)}
.cob-alerta.wn{background:var(--warn-soft);color:var(--ink-2)}
.cob-alerta.wn b{color:var(--warn)}
.cob-alerta.inf{background:var(--accent-soft);color:var(--ink-2)}
.cob-alerta.inf b{color:var(--accent-strong)}
.cob-alerta.ct{background:var(--crit-soft);color:var(--ink-2)}
.cob-alerta.ct b{color:var(--crit)}

.cob-grupo-h{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);margin:2px 0 8px}
.cob-pend-list{display:flex;flex-direction:column;gap:8px}
.cob-sem-card .cob-card-b{display:flex;flex-direction:column;gap:10px}
.cob-sem-grupo{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);padding:10px;display:flex;flex-direction:column;gap:8px}
.cob-sem-resumo{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:2px 2px 4px}
.cob-sem-resumo div{min-width:0;display:flex;flex-direction:column;gap:2px}
.cob-sem-resumo b{font-size:13.5px;color:var(--ink)}
.cob-sem-resumo span{font-size:11.5px;color:var(--ink-3);line-height:1.35}
.cob-sem-resumo strong{font-size:11.5px;color:var(--ink-3);white-space:nowrap}
.cob-sem-dias{display:flex;flex-direction:column;gap:8px}
.cob-sem-item{border:1px solid var(--line);border-radius:10px;background:var(--surface-2);padding:9px;display:flex;flex-direction:column;gap:6px}
.cob-sem-item.ok{border-color:color-mix(in srgb,var(--ok) 45%,var(--line));background:var(--ok-soft)}
.cob-sem-item>b{font-size:12.5px;line-height:1.3;color:var(--ink)}
.cob-sem-item button{width:100%;text-align:left;border:1px solid var(--line);border-radius:8px;background:var(--surface);padding:8px 10px;display:flex;flex-direction:column;gap:1px}
.cob-sem-item button strong{font-size:12.5px;color:var(--ink)}
.cob-sem-item button span{font-size:11px;color:var(--ink-3)}

/* Receber em lote — seleção item a item, nunca "tudo" de uma vez */
.cob-sel-list{display:flex;flex-direction:column;gap:8px;max-height:40vh;overflow-y:auto;padding-right:2px}
.cob-sel{position:relative;display:flex;align-items:center;gap:10px;padding:11px 12px;border:1px solid var(--line);border-radius:var(--radius);cursor:pointer;background:var(--surface);transition:.12s}
.cob-sel:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.cob-sel:has(input:checked){border-color:color-mix(in srgb,var(--accent) 46%,var(--line));background:var(--accent-soft)}
.cob-sel input{position:absolute;opacity:0;pointer-events:none}
.cob-sel .ck{width:22px;height:22px;border-radius:7px;border:1.5px solid var(--line);background:var(--surface);flex:0 0 auto;display:grid;place-items:center}
.cob-sel .ck::after{content:'';width:10px;height:6px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg);opacity:0;margin-top:-2px}
.cob-sel input:checked+.ck{background:var(--accent);border-color:var(--accent)}
.cob-sel input:checked+.ck::after{opacity:1}
.cob-sel .ds{flex:1;min-width:0;display:flex;flex-direction:column}
.cob-sel .ds b{font-size:13.5px}
.cob-sel .ds span{font-size:11.5px;color:var(--ink-3)}
.cob-sel .vv{font-size:14px;font-family:var(--mono);font-weight:650;white-space:nowrap;text-align:right;display:flex;flex-direction:column;line-height:1.15}
.cob-sel .vv small{font-family:var(--sans);font-size:10.5px;font-weight:600;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em;margin-top:2px}
.cob-sel .vv.atr{color:var(--crit)}
.cob-conseq{border-radius:var(--radius);background:var(--accent-soft);padding:11px 13px;margin:12px 0;font-size:12.5px;color:var(--ink-2);line-height:1.45}
.cob-conseq b{display:block;font-size:13px;color:var(--accent-strong);margin-bottom:4px}
.cob-conseq ul{margin:0;padding-left:18px}
.cob-conseq li{margin-bottom:3px}
.cob-lote-footer{justify-content:space-between;align-items:center}
.cob-lote-footer>div{min-width:0;display:flex;flex-direction:column}
.cob-lote-footer span{font-size:11.5px;color:var(--ink-3)}
.cob-lote-footer b{font-size:18px;font-family:var(--mono);line-height:1.15}

.rep-pix-row{margin-top:7px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:7px;padding:7px 8px;border:1px solid var(--line-2);border-radius:9px;background:var(--bg)}
.rep-pix-row small{font-size:9.5px!important;font-weight:800!important;color:var(--ink-3)!important;text-transform:uppercase;letter-spacing:.08em}
.rep-pix-row strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:var(--ink)}
.rep-pix-row button{border:1px solid var(--accent);background:var(--surface);color:var(--accent);border-radius:8px;min-height:30px;padding:0 9px;font-weight:750;font-size:11.5px}
.rep-pix-row button:disabled{opacity:.45;border-color:var(--line);color:var(--ink-3)}
.rep-fila-sel.feito{border-color:color-mix(in srgb,var(--ok) 50%,var(--line));background:var(--ok-soft)}
.rep-fila-page{display:flex;flex-direction:column;gap:12px;padding-bottom:92px}
.rep-fila-list{display:flex;flex-direction:column;gap:9px}
.rep-fila-row{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:flex-start;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.rep-fila-row input{position:absolute;opacity:0;pointer-events:none}
.rep-fila-row .ck{width:24px;height:24px;border-radius:8px;border:1.5px solid var(--line);background:var(--surface);display:grid;place-items:center;margin-top:2px}
.rep-fila-row .ck::after{content:'';width:11px;height:6px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg);opacity:0;margin-top:-2px}
.rep-fila-row input:checked+.ck{background:var(--ok);border-color:var(--ok)}
.rep-fila-row input:checked+.ck::after{opacity:1}
.rep-fila-row.feito{border-color:color-mix(in srgb,var(--ok) 52%,var(--line));background:var(--ok-soft)}
.rep-fila-row .info{min-width:0;display:flex;flex-direction:column}
.rep-fila-row .info>b{font-size:15px;line-height:1.2}
.rep-fila-row .info>small{font-size:11.8px;color:var(--ink-3);margin-top:2px}
.rep-fila-row .valor{font-family:var(--mono);font-size:15px;font-weight:750;white-space:nowrap;margin-top:2px}
.rep-fila-form{display:flex;flex-direction:column;gap:10px}
.rep-fila-footer{position:fixed;left:0;right:0;bottom:var(--bottom-nav-h,70px);z-index:25;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(14px);border-top:1px solid var(--line);box-shadow:0 -10px 28px rgba(15,23,42,.08)}
.rep-fila-footer>div{min-width:0;display:flex;flex-direction:column}
.rep-fila-footer span{font-size:11.5px;color:var(--ink-3)}
.rep-fila-footer b{font-size:18px;font-family:var(--mono);line-height:1.15}
.rep-fila-footer .btn{min-width:130px;justify-content:center}

/* Histórico — linha do tempo append-only */
.cob-tl{padding:4px 14px}
.cob-ev{padding:9px 0 9px 16px;position:relative}
.cob-ev::before{content:'';position:absolute;left:2px;top:15px;width:6px;height:6px;border-radius:50%;background:var(--ink-3)}
.cob-ev+.cob-ev{border-top:1px solid var(--line-2)}
.cob-ev .wh{display:block;font-size:11px;color:var(--ink-3)}
.cob-ev b{display:block;font-size:13px;margin-top:2px}
.cob-ev b .vv{font-family:var(--mono);font-weight:600}
.cob-ev b .vv.neg{color:var(--crit)}
.cob-ev b .vv.pos{color:var(--ok)}
.cob-ev span{display:block;font-size:12px;color:var(--ink-2);margin-top:1px}