/* ============================================================
   dfpet-ui.css — ÚNICA fonte de verdade do visual DFPet.
   Copie este arquivo sem alterar valores. Use as classes.
   Nada de estilo inline nos templates.
   ============================================================ */

:root {
  /* cor */
  --ink:      #0A1130;   /* texto e fundo escuro */
  --cream:    #F7F3EA;   /* texto sobre escuro */
  --bg:       #F1F1EF;   /* fundo da página (cinza-claro) */
  --surface:  #FFFFFF;   /* cartões, campos */
  --sunken:   #FAF8F2;   /* cabeçalho de tabela, hover */
  --muted:    #5B6284;   /* texto de apoio */
  --line:     rgba(10,17,48,.11);  /* borda */
  --hair:     rgba(10,17,48,.06);  /* divisória interna */

  --gold:      #E8B33C;  /* ação principal */
  --gold-ink:  #7D5A0B;  /* texto sobre dourado claro */
  --gold-soft: #FBF0D6;
  --green:     #1FA855;  /* compartilhar, positivo */
  --green-ink: #1B8A4B;
  --green-soft:#E4F0E9;
  --red:       #9C4A3C;
  --red-soft:  #F7E7E3;
  --blue:      #7A86B8;

  /* tipografia */
  --font-serif: 'Outfit', system-ui, sans-serif;      /* títulos (sem serifa, peso médio) */
  --font-sans:  'Nunito', system-ui, sans-serif;      /* interface */
  --font-mono:  var(--font-sans);                     /* números: a mesma fonte da interface, com algarismos de largura igual */
  --peso-titulo: 500;

  /* barra lateral e menu de baixo do celular (azul-marinho) */
  --sb-bg: #0A1130; --sb-texto: #F7F3EA; --sb-grupo: rgba(247,243,234,.72); --sb-hover: rgba(255,255,255,.09); --sb-linha: rgba(255,255,255,.14); --sb-borda: var(--sb-bg); --sb-perigo: #F4B1A5;
  --sb-titulo: var(--sb-texto);   /* títulos dos grupos do menu (Vender, Financeiro...); muda em Configurações → Visual */

  /* tamanhos de letra e balões de situação (mudam em Configurações → Visual) */
  --sb-fs: 14px; --sb-gfs: 11px; --h1-fs: 27px; --nome-fs: 15px; --txt-fs: 13px; --num-fs: 12.5px; --bal-fs: 10px;
  --bal-ok-bg: #BFDECD; --bal-ok-tx: #0F4C29; --bal-at-bg: #EACCC8; --bal-at-tx: #642720; --bal-de-bg: #F9EAC8; --bal-de-tx: #806321; --bal-borda: 0px;

  /* o que aparece "marcado": item do menu, aba, filtro (muda em Configurações → Visual) */
  --sel-bg: var(--gold-soft); --sel-tx: var(--gold-ink); --sel-borda: var(--gold);

  /* forma */
  /* --r-md era 11px; o protótipo usa 9px em 184 lugares (docs/ui/prototipos) */
  --r-sm: 8px; --r-md: 9px; --r-lg: 14px; --r-pill: 20px;
  --shadow: 0 1px 2px rgba(10,17,48,.04), 0 10px 28px -20px rgba(10,17,48,.30);

  /* altura de controle */
  --h-control: 34px;        /* desktop */
  --h-control-mobile: 44px; /* mínimo de toque */
}

/* ---------- base ---------- */
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-size: var(--txt-fs, 13px); font-variant-numeric: tabular-nums; }
*, *::before, *::after { box-sizing: border-box; }
h1 { margin: 0 0 18px; font-family: var(--font-serif); font-weight: var(--peso-titulo); font-size: var(--h1-fs, 27px); line-height: 1.1; }
h2 { margin: 0 0 14px; font-family: var(--font-serif); font-weight: var(--peso-titulo); font-size: calc(var(--h1-fs, 27px) * .74); line-height: 1.15; }
a { color: var(--gold-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
.num { font-family: var(--font-mono); white-space: nowrap; }
.num small { font-size: .72em; opacity: .7; }   /* o "R$" menor */
.apoio { font-size: 11.5px; color: var(--muted); }
.rotulo { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.container { padding: 22px 34px 56px; }

/* ---------- BOTÕES ----------
   .btn é a base. Combine com uma variante.
   Alturas: 34px desktop. No mobile todas viram 44px (regra no fim). */
.btn {
  height: var(--h-control); padding: 0 14px;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 1px solid transparent; border-radius: var(--r-md);
  font-family: var(--font-sans); font-size: 13px; line-height: 1;
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn svg { width: 15px; height: 15px; flex: none; }
.btn:hover { text-decoration: none; }

.btn-ouro    { background: var(--gold); color: var(--ink); font-weight: 600; }
.btn-ouro:hover { filter: brightness(1.06); }
.btn-escuro  { background: var(--ink); color: var(--cream); }
.btn-verde   { background: var(--green); color: #fff; font-weight: 600; border-color: var(--green-ink); }
.btn-verde:hover { filter: brightness(1.08); }
.btn-linha   { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn-linha:hover { border-color: var(--gold); color: var(--gold-ink); }
.btn-tracejado { background: transparent; color: var(--gold-ink); border: 1px dashed var(--gold); }
.btn-tracejado:hover { background: var(--gold-soft); }
.btn-perigo  { background: var(--red-soft); color: var(--red); border-color: transparent; }
.btn-perigo:hover { background: var(--red); color: #fff; }
.btn-largo   { width: 100%; }
.btn-sm      { height: 28px; padding: 0 11px; font-size: 12px; }

/* botão quadrado só com ícone — filtros, exportar, colunas */
.btn-icone {
  width: var(--h-control); height: var(--h-control); padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  border-radius: var(--r-md); cursor: pointer;
}
.btn-icone svg { width: 15px; height: 15px; }
.btn-icone:hover { border-color: var(--gold); color: var(--gold-ink); }

/* título da página + botão de ação em destaque ao lado (ex: Sincronizar
   com o Tiny em Produtos e estoque) */
.cabecalho-com-acao { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.cabecalho-com-acao h1 { margin-bottom: 0; }
.btn-icone-grande { width: 44px; height: 44px; }
.btn-icone-grande svg { width: 21px; height: 21px; }
.btn-icone.ativo { background: var(--gold-soft); border-color: var(--gold); color: var(--gold-ink); }

/* botão de ação dentro da linha da tabela — 30px */
.btn-acao {
  width: 30px; height: 30px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  border-radius: var(--r-sm); cursor: pointer;
}
.btn-acao svg { width: 15px; height: 15px; }
.btn-acao:hover { border-color: var(--gold); color: var(--gold-ink); }
.btn-compartilhar { background: var(--green); border-color: var(--green-ink); color: #fff; }
.btn-compartilhar:hover { filter: brightness(1.08); border-color: var(--green-ink); color: #fff; }

/* chip / pílula de filtro */
.chip {
  height: var(--h-control); padding: 0 13px;
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  border-radius: var(--r-pill); font-size: 12.5px; cursor: pointer; text-decoration: none;
}
.chip.ativo { background: var(--sel-bg); border-color: var(--sel-borda); color: var(--sel-tx); font-weight: 500; }
.chip svg { width: 15px; height: 15px; flex: none; }

/* aba retangular (configurações, painel) */
.aba {
  height: 36px; padding: 0 15px;
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  border-radius: 10px; font-size: 12.8px; cursor: pointer; text-decoration: none;
}
.aba.ativa { background: var(--sel-bg); border-color: var(--sel-borda); color: var(--sel-tx); font-weight: 500; }
.aba svg { width: 15px; height: 15px; flex: none; }

/* (i) que só aparece quando o texto corta — inserido por texto-cortado.js */
.btn-info-texto {
  flex: none; width: 17px; height: 17px; padding: 0;
  border: 1px solid var(--line); background: transparent; color: var(--muted);
  border-radius: 50%; font-family: var(--font-serif); font-size: 11px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-weight: var(--peso-titulo); }
.btn-info-texto:hover { border-color: var(--gold); color: var(--gold-ink); }

/* ---------- BARRA DE FILTROS (uma linha, sem vãos) ---------- */
.toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; flex-wrap: nowrap; }
.toolbar .direita { margin-left: auto; display: flex; gap: 8px; }
.grupo-botoes { display: flex; gap: 8px; }

.busca {
  display: flex; align-items: center; gap: 8px;
  height: var(--h-control); flex: none; padding: 0 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  width: 100%; max-width: 320px; min-width: 130px;
}
/* dentro da barra de filtros ela estica; fora, mantém a altura */
.toolbar .busca { flex: 1 1 180px; }
.busca svg { width: 15px; height: 15px; flex: none; color: var(--muted); }
.busca input { border: none; outline: none; background: transparent; color: var(--ink); font-family: var(--font-sans); font-size: 13px; width: 100%; min-width: 0; height: auto; padding: 0; }
.busca input::placeholder { color: #9AA0BB; }
/* acréscimos do app: a busca por voz e o balão de sugestões moram dentro
   da .busca (o gabarito não tinha esses dois, o resto segue igual) */
.busca { position: relative; }
.busca-mic { flex: none; width: 24px; height: 24px; padding: 0; border: none; background: transparent;
  color: var(--muted); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.busca-mic svg { width: 16px; height: 16px; }
.busca-mic:hover { color: var(--gold-ink); }

/* ---------- CARTÃO ---------- */
.cartao { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.cartao-cab { padding: 15px 20px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cartao-titulo { font-family: var(--font-serif); font-size: calc(var(--h1-fs, 27px) * .63); font-weight: var(--peso-titulo); }
.cartao-corpo { padding: 16px 20px; }
.pilha { display: flex; flex-direction: column; gap: 10px; }   /* empilhar irmãos sem margin */

/* ---------- TABELA (grid, não <table>) ----------
   Estrutura:
   <div class="tabela">
     <div class="linha cab" style="--cols: ...">…</div>
     <div class="linha"     style="--cols: ...">…</div>
   </div>
   Defina --cols UMA vez por tabela, numa classe própria (ver exemplos). */
.tabela { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); overflow-x: auto; }
.linha { display: grid; grid-template-columns: var(--cols); gap: 10px; align-items: center; padding: 13px 20px; border-bottom: 1px solid var(--hair); }
.linha:last-child { border-bottom: none; }
.linha.cab {
  background: var(--sunken); border-bottom: 1px solid var(--line); padding: 11px 20px;
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.tabela .linha:not(.cab):hover { background: var(--sunken); }
.celula { min-width: 0; }
.celula-texto { min-width: 0; display: flex; align-items: center; gap: 6px; }
.celula-texto > span, .celula-texto > a { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acoes-linha { display: flex; gap: 6px; justify-content: flex-end; }
.celula-direita { min-width: 0; text-align: right; }
.num-pontos { color: var(--gold-ink); font-weight: 500; }
.num-forte  { font-weight: 600; }
.vazio { padding: 18px 20px; color: var(--muted); }

/* ---------- TABELA-NOVA (skin p/ <table> de verdade) ----------
   Pro conteúdo antigo em <table>/<tr>/<td> — JS que monta linha dinâmica
   (ex: prévia de parcelas) ou célula com formulário próprio (ex: usuários).
   Troca só a classe, sem mexer na estrutura HTML nem no JS. */
.tabela-nova { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow); font-size: 13px; }
.tabela-nova th, .tabela-nova td { padding: 11px 16px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--hair); }
.tabela-nova th { background: var(--sunken); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.tabela-nova tbody tr:last-child td { border-bottom: none; }
.tabela-nova tbody tr:hover td { background: var(--sunken); }
.tabela-nova td.num, .tabela-nova .num { font-family: var(--font-mono); font-size: var(--num-fs, 12.5px); white-space: nowrap; }
.tabela-nova td input, .tabela-nova td select { height: 32px; padding: 0 9px; border: 1px solid var(--line); border-radius: var(--r-sm);
  font-family: var(--font-sans); font-size: 12.5px; background: var(--surface); color: var(--ink); }
.tabela-nova td input:focus, .tabela-nova td select:focus { outline: none; border-color: var(--gold); }
.tabela-scroll .tabela-nova { border-radius: 0; border: none; box-shadow: none; }

/* variante chave/valor: 1ª coluna vira rótulo, sem cabeçalho */
.tabela-nova.chave-valor td:first-child { width: 170px; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 640px) {
  .tabela-nova.chave-valor td:first-child { width: 120px; }
  .tabela-nova th, .tabela-nova td { padding: 9px 12px; }
}

/* ---------- FICHA DO CLIENTE (gaveta desktop / tela cheia mobile) ----------
   Estado (aba, filtro, item de pedido aberto) viaja na URL — os elementos
   abaixo são <a>/<button> normais, só o data-on muda pelo servidor. */
.fc-on[data-on="1"] { background: var(--gold-soft) !important; border-color: var(--gold) !important; color: var(--gold-ink) !important; font-weight: 500; }
.fc-linha:hover { background: var(--sunken); }
.fc-verde:hover { filter: brightness(1.08); }
.fc-verde svg, .fc-brilho svg { flex: none; }
.fc-ouro:hover { border-color: var(--gold); color: var(--gold-ink); }
.fc-brilho:hover { filter: brightness(1.06); }
.fc-borda:hover { border-color: var(--gold); }
/* botão de copiar do whatsapp-botao.js, inserido depois do de enviar em
   .fc-linha-titulo-btn: sem isso ele vira um 6º item do grid e sobra
   sozinho na 1ª coluna, numa linha de baixo — força ele a cair debaixo
   do próprio botão de enviar (última coluna) em vez disso */
.fc-linha-titulo-btn > .btn-copiar-mensagem { grid-column: 5; grid-row: 2; justify-self: end; }
@media (max-width: 900px) {
  /* a gaveta é desenhada pros 520px do desktop — a mesma linha, na tela
     cheia (mais estreita) do celular, quebra em 2: dado + valor em cima,
     situação + ações embaixo. .fc-quebra é um <span> vazio só pra forçar
     a quebra de linha no flex-wrap (grid não quebra sozinho). */
  .fc-linha-pedido, .fc-linha-titulo, .fc-linha-titulo-btn, .fc-linha-boleto {
    display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 4px 8px !important;
  }
  .fc-quebra { display: none; }
  .fc-linha-pedido .fc-quebra, .fc-linha-titulo .fc-quebra, .fc-linha-titulo-btn .fc-quebra, .fc-linha-boleto .fc-quebra {
    display: block; flex-basis: 100%; height: 0; order: 4; padding: 0; margin: 0;
  }

  .fc-linha-boleto > *:nth-child(1) { order: 1; }
  .fc-linha-boleto > *:nth-child(2) { order: 2; }
  .fc-linha-boleto > *:nth-child(4) { order: 3; margin-left: auto; }
  .fc-linha-boleto > *:nth-child(3) { order: 5; }
  .fc-linha-boleto > *:nth-child(5) { order: 6; margin-left: auto; }
  .fc-linha-boleto span { font-size: 11.5px !important; }

  .fc-linha-item { grid-template-columns: 36px 26px minmax(0,1fr) 84px !important; gap: 8px !important; }
  .fc-linha-item span, .fc-linha-item div { font-size: 11.5px !important; }

  .fc-linha-pedido > *:nth-child(1) { order: 1; }
  .fc-linha-pedido > *:nth-child(2) { order: 2; flex: 1 1 auto; min-width: 0; }
  .fc-linha-pedido > *:nth-child(4) { order: 3; flex: 0 0 auto; }
  .fc-linha-pedido > *:nth-child(3) { order: 5; }
  .fc-linha-pedido > *:nth-child(5) { order: 6; margin-left: auto; }
  .fc-linha-pedido > *:nth-child(6) { order: 7; }

  .fc-linha-titulo > *:nth-child(1), .fc-linha-titulo-btn > *:nth-child(1) { order: 1; }
  .fc-linha-titulo > *:nth-child(2), .fc-linha-titulo-btn > *:nth-child(2) { order: 2; }
  .fc-linha-titulo > *:nth-child(4), .fc-linha-titulo-btn > *:nth-child(4) { order: 3; margin-left: auto; }
  .fc-linha-titulo > *:nth-child(3), .fc-linha-titulo-btn > *:nth-child(3) { order: 5; }
  .fc-linha-titulo-btn > *:nth-child(5) { order: 6; margin-left: auto; }
  /* botão de copiar do whatsapp-botao.js: inserido depois do de enviar
     (child 6), sem regra nth-child própria — cai junto dele */
  .fc-linha-titulo-btn > .btn-copiar-mensagem { order: 6; margin-left: 4px; }

  .fc-linha-pedido span, .fc-linha-pedido a, .fc-linha-pedido button,
  .fc-linha-titulo span, .fc-linha-titulo-btn span { font-size: 11.5px !important; }

  .fc-kpi3 .num { font-size: 13.5px !important; overflow-wrap: break-word; white-space: normal !important; }
}

/* resumo de totais (checkout) */
.resumo-total { max-width: 320px; margin-left: auto; display: flex; flex-direction: column; gap: 6px; }
.resumo-total .linha-r { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; }
.resumo-total .linha-r input { height: 32px; width: 110px; padding: 0 9px; border: 1px solid var(--line); border-radius: var(--r-sm);
  font-family: var(--font-sans); font-size: 13px; text-align: right; }
.resumo-total .linha-r.total { font-size: 18px; font-weight: 600; padding-top: 10px; margin-top: 4px; border-top: 1px solid var(--hair); }
@media (max-width: 640px) { .resumo-total { max-width: none; } }

/* nome do cliente em destaque */
.cliente-nome { display: block; font-family: var(--font-serif); font-size: var(--nome-fs, 15px); line-height: 1.2; color: var(--gold-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: var(--peso-titulo); }
.cliente-doc { font-size: 11.5px; color: var(--muted); }

/* grids de coluna por tabela — os mesmos do protótipo */
.t-clientes { --cols: 34px minmax(150px,280px) 112px 104px 96px 128px 40px minmax(0,1fr); }
.t-pedidos  { --cols: 26px 96px minmax(140px,1.8fr) 100px 116px 118px 118px minmax(0,.4fr); }
.t-estoque  { --cols: 44px minmax(180px,320px) 116px 104px 96px 40px minmax(0,1fr); }
.t-contas   { --cols: 26px minmax(150px,280px) 92px 88px 116px 100px 84px minmax(0,1fr); }
.t-caixa    { --cols: 70px minmax(160px,1fr) 118px 132px 126px; }
/* Contas a receber: a coluna de valor leva o valor, a etiqueta "Parcial" e o "com encargo", e precisa
   de espaço próprio — com 100px o texto passava por cima dos botões Cobrar e › */
.t-contas-receber { --cols: 26px minmax(150px,1fr) 100px 96px 116px 200px 150px; }
.t-paradas  { --cols: 26px minmax(0,1fr) auto; }
/* Clientes do admin: mesma anatomia de t-clientes, com a coluna de acesso */
.t-clientes-adm { --cols: 34px minmax(150px,300px) 112px minmax(0,1fr) 130px 128px 124px 76px; }

/* número da parada, na rota */
.parada-num { width: 28px; height: 28px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--gold); background: var(--surface); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 12px; }
.parada-num.visitado { background: var(--green); border-color: var(--green-ink); color: #fff; }
.parada-num.pulado   { background: var(--muted); border-color: var(--muted); color: #fff; }
.parada-num.atual    { background: var(--gold); border-color: var(--gold); color: var(--ink); }

@media (max-width: 1180px) {
  .col-secundaria { display: none !important; }
  .t-clientes { --cols: 34px minmax(90px,1fr) 96px 116px 40px; }
  .t-pedidos  { --cols: 26px 72px minmax(120px,1fr) 110px 92px 116px; }
  .t-estoque  { --cols: 44px minmax(90px,1fr) 96px 40px; }
  .t-contas   { --cols: 26px minmax(90px,1fr) 112px 96px 84px; }
  .t-contas-receber { --cols: 26px minmax(90px,1fr) 116px 190px 150px; }
  .t-caixa    { --cols: 62px minmax(90px,1fr) 118px; }
  .t-clientes-adm { --cols: 34px minmax(90px,1fr) 128px 124px 76px; }
}

/* ---------- SITUAÇÃO ---------- */
.dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; cursor: help; }
.etiqueta { display: inline-block; white-space: nowrap; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: var(--r-pill); background: var(--sunken); color: var(--muted); }
.etiqueta-ok    { background: var(--bal-ok-bg, #BFDECD); color: var(--bal-ok-tx, #0F4C29); border-color: var(--bal-ok-tx, transparent); }
.etiqueta-aviso { background: var(--bal-de-bg, #F9EAC8); color: var(--bal-de-tx, #806321); border-color: var(--bal-de-tx, transparent); }
.etiqueta-erro  { background: var(--bal-at-bg, #EACCC8); color: var(--bal-at-tx, #642720); border-color: var(--bal-at-tx, transparent); }
.selo { display: inline-block; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; padding: 2px 7px; border-radius: 6px; }
.selo-ouro { background: var(--gold); color: var(--ink); }
.selo-azul { background: #E4EDFB; color: #2B4E8C; }

/* ---------- INDICADORES (faixa do topo) ---------- */
.faixa-kpi { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0,1fr);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow); overflow: hidden; margin-bottom: 20px; }
.kpi { padding: 13px 15px; border-right: 1px solid var(--hair); min-width: 0; overflow: hidden; }
.kpi:last-child { border-right: none; }
.kpi-valor { display: block; font-family: var(--font-mono); font-size: clamp(13px, 1.15vw, 19px); font-weight: 600; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-label { display: block; font-size: 11px; color: var(--muted); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-escuro { background: var(--ink); color: var(--cream); }
.kpi-escuro .kpi-valor { color: var(--gold); }
.kpi-escuro .kpi-label { color: rgba(247,243,234,.6); }
.valor-ok { color: var(--green-ink); } .valor-erro { color: var(--red); }

/* ---------- BARRAS ---------- */
.trilho { height: 8px; border-radius: var(--r-pill); background: var(--sunken); overflow: hidden; }
.trilho > span { display: block; height: 100%; border-radius: var(--r-pill); background: var(--gold); }
.linha-barra { display: flex; align-items: center; gap: 12px; }
.linha-barra .nome { width: 78px; flex: none; font-size: 11.5px; color: var(--muted); }
.linha-barra .barra { flex: 1; height: 20px; border-radius: 7px; background: var(--sunken); overflow: hidden; }
.linha-barra .barra > span { display: block; height: 100%; }
.linha-barra .valor { width: 92px; flex: none; text-align: right; font-family: var(--font-mono); font-size: 13px; white-space: nowrap; }

/* ---------- FORMULÁRIO ---------- */
.campo { display: flex; flex-direction: column; gap: 5px; font-size: 11.5px; color: var(--muted); }
.campo input, .campo select, .campo textarea {
  height: 40px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); color: var(--ink); font-family: var(--font-sans); font-size: 14px; padding: 0 12px;
}
.campo textarea { height: auto; padding: 9px 12px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--gold); }
.campo .num-input { font-family: var(--font-mono); font-size: 13px; }
.grade-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px,1fr)); gap: 12px; }
input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--gold); cursor: pointer; }

/* ---------- PAINEL LATERAL ---------- */
.gaveta-fundo { position: fixed; inset: 0; background: rgba(10,17,48,.35); z-index: 70; }
.gaveta { position: fixed; z-index: 71; top: 20px; bottom: 20px; right: 24px; width: 380px; max-width: calc(100vw - 48px);
  display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: 0 30px 70px -28px rgba(10,17,48,.6); overflow: hidden; }
.gaveta-cab { flex: none; padding: 15px 18px; border-bottom: 1px solid var(--hair); display: flex; align-items: flex-start; gap: 10px; }
.gaveta-corpo { padding: 14px 18px 16px; display: flex; flex-direction: column; gap: 11px; overflow-y: auto; min-height: 0; }
.gaveta-pe { flex: none; padding: 14px 18px; border-top: 1px solid var(--hair); display: flex; gap: 8px; }

/* ---------- CARTÃO DE PRODUTO ---------- */
.grade-produtos { display: grid; grid-template-columns: repeat(auto-fill, minmax(212px,1fr)); gap: 18px; }
.produto { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; }
.produto:hover { border-color: var(--gold); }
.produto-foto { position: relative; height: 128px; background: var(--sunken); border-bottom: 1px solid var(--hair);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.produto-foto img { width: 100%; height: 100%; object-fit: contain; }
.produto-marca { font-family: var(--font-serif); font-size: 22px; font-weight: var(--peso-titulo); }
.produto-sem-foto { font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: #8A90AB; }
.produto-corpo { padding: 12px 13px 13px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.produto-nome { font-size: 13px; line-height: 1.3; }
.preco { font-family: var(--font-mono); font-size: 16px; font-weight: 500; }
.preco-de { font-size: 11.5px; color: var(--muted); text-decoration: line-through; }
.badge-promo { position: absolute; top: 9px; left: 9px; background: var(--gold); color: var(--ink); font-size: 9px; letter-spacing: .1em; font-weight: 700; padding: 3px 7px; border-radius: 6px; }
.disponivel, .indisponivel { display: flex; align-items: center; gap: 6px; font-size: 11.5px; }
.disponivel { color: var(--green-ink); } .indisponivel { color: var(--red); }
.disponivel::before, .indisponivel::before { content: ''; width: 7px; height: 7px; border-radius: 50%; }
.disponivel::before { background: var(--green); } .indisponivel::before { background: var(--red); }
.stepper { display: flex; align-items: center; border: 1px solid var(--gold); border-radius: var(--r-sm); height: 34px; padding: 0 4px; }
.stepper button { width: 28px; height: 28px; border: none; background: transparent; color: var(--gold-ink); font-size: 17px; cursor: pointer; }
.stepper .qtd { flex: 1; text-align: center; font-family: var(--font-mono); font-size: 13.5px; }
/* acréscimos do app no cartão de produto: a quantidade é um <input>, o
   compartilhar/info ficam sobre a foto e o selo diz o que já está no carrinho */
.stepper input.qtd { width: 100%; min-width: 0; padding: 0; border: none; outline: none; background: transparent; color: inherit; }
.stepper input.qtd::-webkit-outer-spin-button,
.stepper input.qtd::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.produto-acao-topo { position: absolute; top: 9px; right: 9px; z-index: 1; }
.produto-precos { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.produto-adicionar { margin-top: auto; display: flex; align-items: center; gap: 8px; }
.produto-adicionar .stepper { flex: 1; min-width: 0; }
.produto-adicionar .btn { flex: 1; min-width: 0; }
.produto-selo-carrinho { position: absolute; left: 9px; bottom: 9px; display: inline-flex; align-items: center; gap: 5px;
  background: var(--ink); color: var(--cream); font-size: 10px; padding: 3px 8px; border-radius: var(--r-pill); }
.produto-selo-carrinho svg { width: 12px; height: 12px; }

/* ---------- AVISOS ---------- */
.aviso { display: flex; align-items: flex-start; gap: 10px; border-radius: var(--r-md); padding: 12px 14px; font-size: 12.5px; line-height: 1.55; }
.aviso svg { width: 17px; height: 17px; flex: none; }
.aviso-ouro  { background: var(--gold-soft);  border: 1px solid var(--gold); color: var(--gold-ink); }
.aviso-erro  { background: var(--red-soft);   color: var(--red); }
.aviso-ok    { background: var(--green-soft); color: var(--green-ink); }
.aviso-neutro{ background: var(--sunken);     color: var(--muted); }

/* ---------- LAYOUT ---------- */
.duas-colunas { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 16px; align-items: start; }
@media (max-width: 1100px) { .duas-colunas { grid-template-columns: minmax(0,1fr); } }
.grade-blocos { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 16px; }


/* ---------- BARRA LATERAL ---------- */
.sidebar { width: 246px; flex: none; display: flex; flex-direction: column;
  background: var(--sb-bg); border-right: 1px solid var(--sb-borda); }
.sidebar-nav { flex: 1; min-height: 0; padding: 18px 12px 12px; display: flex; flex-direction: column; gap: 18px; overflow-y: auto; overflow-x: hidden; }
.sidebar-rodape { flex: none; border-top: 1px solid var(--sb-linha); padding: 12px; display: flex; flex-direction: column; gap: 2px; }

/* título de grupo: Vender / Acompanhar / Crescer / Escritório */
.sidebar-grupo {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  font-family: var(--font-sans); font-size: var(--sb-gfs, 11px); letter-spacing: .16em; text-transform: uppercase;
  color: var(--sb-titulo); background: transparent; border: none; border-radius: var(--r-sm);
  padding: 7px 10px; cursor: pointer;
}
.sidebar-grupo:hover { background: var(--sb-hover); }
.sidebar-grupo svg { width: 14px; height: 14px; flex: none; color: var(--gold); }
.sidebar-grupo .chev { margin-left: auto; font-size: 9px; transition: transform .15s ease; }
.sidebar-grupo[aria-expanded="false"] .chev { transform: rotate(-90deg); }
.sidebar-grupo[aria-expanded="false"] + .sidebar-itens { display: none; }
.sidebar-bloco { display: flex; flex-direction: column; gap: 2px; }
.sidebar-soltos { padding-bottom: 12px; border-bottom: 1px solid var(--sb-linha); }          /* Seu dia (a tela inicial), fora dos grupos (21/10/2026) */
.sidebar-itens { display: flex; flex-direction: column; gap: 2px; }
/* rótulo fixo (não é sanfona): mesma tipografia do título de grupo, mas
   os itens embaixo ficam sempre à vista — usado pra Reservas/Encomendas */
.sidebar-rotulo {
  display: flex; align-items: center; gap: 8px; width: 100%;
  font-size: var(--sb-gfs, 11px); letter-spacing: .16em; text-transform: uppercase; color: var(--sb-titulo);
  padding: 7px 10px;
}
.sidebar-rotulo svg { width: 14px; height: 14px; flex: none; color: var(--gold); }

/* item de navegação */
.sidebar-item {
  display: flex; align-items: center; gap: 11px; padding: 8px 10px;
  border-radius: var(--r-sm); color: var(--sb-texto); text-decoration: none;
  font-size: var(--sb-fs, 14px); white-space: nowrap; background: transparent; border: none;
  font-family: var(--font-sans); cursor: pointer; width: 100%; text-align: left;
}
.sidebar-item svg { width: 17px; height: 17px; flex: none; }
.sidebar-item:hover { background: var(--sb-hover); text-decoration: none; }
.sidebar-item:hover.ativo { background: var(--sel-bg); }
.sidebar-item.ativo { background: var(--sel-bg); color: var(--sel-tx); font-weight: 500; }
.sidebar-item .contador { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--sb-grupo); }
.sidebar-item.ativo .contador { color: var(--sel-tx); }

/* encolher */
.sidebar-encolher {
  margin-top: 4px; height: 32px; width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--sb-linha); background: transparent; color: var(--sb-grupo);
  border-radius: var(--r-sm); font-family: var(--font-sans); font-size: 12px; cursor: pointer;
}
.sidebar-encolher:hover { border-color: var(--gold); color: var(--gold); }

html.sidebar-encolhida .sidebar { width: 68px; }
html.sidebar-encolhida .sidebar-item,
html.sidebar-encolhida .sidebar-grupo,
html.sidebar-encolhida .sidebar-rotulo,
html.sidebar-encolhida .sidebar-encolher { justify-content: center; gap: 0; padding-left: 0; padding-right: 0; }
html.sidebar-encolhida .sidebar-item span,
html.sidebar-encolhida .sidebar-grupo span,
html.sidebar-encolhida .sidebar-rotulo span,
html.sidebar-encolhida .sidebar-encolher span { display: none; }
html.sidebar-encolhida .sidebar-itens { display: flex !important; }


/* ---------- FOLHA "MAIS" (sobe de baixo no mobile) ---------- */
.folha-fundo { position: fixed; inset: 0; background: rgba(10,17,48,.42); z-index: 80; }
.folha {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 81;
  background: var(--surface); border-radius: 18px 18px 0 0;
  box-shadow: 0 -18px 50px -20px rgba(10,17,48,.5);
  padding: 8px 14px calc(14px + env(safe-area-inset-bottom));
  max-height: 78vh; overflow-y: auto;
}
.folha-alca { width: 38px; height: 4px; border-radius: 20px; background: var(--line); margin: 6px auto 12px; }
.folha-titulo { font-family: var(--font-serif); font-size: 19px; margin: 0 4px 10px; font-weight: var(--peso-titulo); }
.folha-grade { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 6px; }
.folha-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  min-height: 78px; padding: 10px 4px; border-radius: var(--r-md);
  background: transparent; border: none; color: var(--ink); text-decoration: none;
  font-family: var(--font-sans); font-size: 11px; line-height: 1.25; text-align: center; cursor: pointer;
}
.folha-item svg { width: 22px; height: 22px; }
.folha-item:hover, .folha-item:active { background: var(--sunken); text-decoration: none; }
.folha-item .contador { font-family: var(--font-mono); font-size: 10px; color: var(--gold-ink); }
.folha-secao { margin: 14px 4px 8px; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.folha-sair { margin-top: 12px; border-top: 1px solid var(--hair); padding-top: 12px; }
.folha-item-sair { color: var(--red); }
/* a folha "Mais" do celular acompanha a cor da barra lateral */
#menu-mais.folha { background: var(--sb-bg); color: var(--sb-texto); }
#menu-mais .folha-alca { background: var(--sb-linha); }
#menu-mais .folha-titulo { color: var(--sb-texto); }
#menu-mais .folha-item { color: var(--sb-texto); }
#menu-mais .folha-item:hover, #menu-mais .folha-item:active { background: var(--sb-hover); }
#menu-mais .folha-item .contador { color: var(--sb-grupo); }
#menu-mais .folha-secao { color: var(--sb-titulo); }
#menu-mais .folha-sair { border-top-color: var(--sb-linha); }
#menu-mais .folha-item-sair { color: var(--sb-perigo); }
#menu-mais .mais-item { background: var(--sb-hover); border-color: var(--sb-linha); color: var(--sb-texto); }
#menu-mais .mais-item:hover, #menu-mais .mais-item:active { background: var(--sb-linha); }
#menu-mais .mais-sigla, #menu-mais .mais-grupo .mais-sigla { background: var(--sel-bg); color: var(--sel-tx); }
#menu-mais .mais-seta, #menu-mais .mais-grupo .chev, #menu-mais .mais-detalhe, #menu-mais .mais-contador { color: var(--sb-grupo); }
#menu-mais .mais-sublista { border-left-color: var(--sb-linha); }
#menu-mais .mais-item-sair { color: var(--sb-perigo); }
#menu-mais .mais-item-sair .mais-sigla { background: transparent; border: 1px solid var(--sb-perigo); color: var(--sb-perigo); }
#menu-mais .mais-item[disabled] { background: var(--sb-hover); }

/* ---------- MOBILE ---------- */
@media (max-width: 900px) {
  .sidebar { display: none; }   /* no celular quem navega é a .barra-inferior */
  .container { padding: 16px 16px 90px; }
  h1 { font-size: calc(var(--h1-fs, 27px) - 1px); }
  .btn, .chip, .btn-icone, .aba { height: var(--h-control-mobile); }
  .btn-icone { width: var(--h-control-mobile); }
  .btn-acao { width: 40px; height: 40px; }
  .busca { height: var(--h-control-mobile); }
  .campo input, .campo select { height: 48px; font-size: 15px; }
  .toolbar { flex-wrap: wrap; }
  .toolbar .grupo-botoes { overflow-x: auto; }
  .faixa-kpi { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0,1fr)); }
  .kpi { border-right: none; border-bottom: 1px solid var(--hair); }
  .grade-produtos { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 11px; }
}

/* barra inferior do mobile */
.barra-inferior { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: none;
  background: var(--sb-bg); border-top: 1px solid var(--sb-borda); padding: 6px 4px calc(8px + env(safe-area-inset-bottom, 0px)); }
/* 21/10/2026: a barra ganha o espaço dos botões do sistema (tecla de início do iPhone, botões do Android por cima da tela) e mede a
   própria altura em --barra-h (partials/_navbar_mobile.html): o que fica preso logo acima dela usa essa medida, não um número fixo */
@media (max-width: 900px) { .barra-inferior { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; } }
/* o fim da página não fica atrás da barra (nas telas novas o style-mobile.css não entra; --barra-h só existe quando a barra está na página) */
@media (max-width: 900px) { .main-area { padding-bottom: calc(var(--barra-h, 0px) + 14px); } }
.barra-inferior a { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0;
  font-size: max(10px, calc(var(--sb-fs, 14px) - 3.5px)); color: var(--sb-texto); text-decoration: none; min-height: 44px; border-radius: 10px; }
.barra-inferior a svg { width: 21px; height: 21px; }
.barra-inferior a.ativo { background: var(--sel-bg); color: var(--sel-tx); font-weight: 600; }

/* ============================================================
   ACRÉSCIMOS DO APP
   Classes que o gabarito não traz mas as telas do DFPet precisam.
   Seguem o padrão das vizinhas e só usam as variáveis daqui.
   Nenhum valor do arquivo original foi alterado.
   ============================================================ */

/* (o mapa da rota saiu — não está no telas-vendedor.html) */

/* próxima visita + rodapé da rota */
.proxima-parada { display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  border-bottom: 1px solid var(--hair); }
.acoes-parada { display: flex; gap: 8px; margin-left: auto; }
.acoes-parada form { margin: 0; }
.rota-fim { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.linha-resumo { display: flex; justify-content: space-between; font-size: 12.5px; }
.painel-rota { position: sticky; top: 24px; }
@media (max-width: 1100px) { .painel-rota { position: static; } }

/* ---------- catálogo: tira de categorias ---------- */
.chips-categorias { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
@media (max-width: 900px) {
  .chips-categorias { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px 14px; padding: 0 16px 2px; }
  .chips-categorias .chip { flex: none; }
}

/* ---------- faixa de campanhas do catálogo ---------- */
.campanhas-faixa { overflow: hidden; border: 1px solid var(--gold); background: var(--gold-soft);
  border-radius: var(--r-md); margin-bottom: 16px; }
.campanhas-faixa-trilho { display: flex; gap: 34px; white-space: nowrap; padding: 9px 14px;
  color: var(--gold-ink); font-size: 12.5px; animation: campanhas-desliza 38s linear infinite; }
.campanhas-faixa-item { flex: none; }
@keyframes campanhas-desliza { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .campanhas-faixa-trilho { animation: none; overflow-x: auto; }
}

/* o (i) que o texto-cortado.js injeta fica na mesma linha do nome */
.celula > .cliente-nome { display: inline-block; max-width: calc(100% - 23px); vertical-align: bottom; }
.celula > .cliente-nome + .btn-info-texto { margin-left: 6px; vertical-align: middle; }

/* ---------- grids das outras tabelas (uma classe por tabela) ---------- */
.t-reservas       { --cols: minmax(140px,1fr) minmax(120px,1.4fr) 70px 130px 120px; }
.t-encomendas     { --cols: minmax(140px,1fr) minmax(120px,1.2fr) 80px 110px 120px; }
.t-reposicao      { --cols: minmax(140px,1fr) 120px 110px 130px; }
.t-carrinho       { --cols: minmax(0,1fr) 120px 110px 40px; }
.t-config         { --cols: minmax(0,1fr) 110px 40px; }
.t-extrato        { --cols: minmax(0,1fr) auto; }
.t-cli-pedidos    { --cols: 90px minmax(0,1fr) 130px 110px 120px; }
.t-cli-contas     { --cols: 110px minmax(0,1fr) 130px 110px 170px; }
.t-cli-encomendas { --cols: minmax(0,1fr) 80px 130px 120px; }
@media (max-width: 1180px) {
  .t-reservas       { --cols: minmax(110px,1fr) minmax(100px,1.2fr) 60px 110px; }
  .t-encomendas     { --cols: minmax(110px,1fr) 80px 110px 110px; }
  .t-cli-pedidos    { --cols: 76px minmax(0,1fr) 110px 100px 110px; }
  .t-cli-contas     { --cols: 96px minmax(0,1fr) 110px 100px 150px; }
}

/* botão de texto dentro da linha da tabela — a altura de .btn-acao, com rótulo */
.btn-mini { height: 30px; padding: 0 11px; font-size: 12px; }

/* pares rótulo/valor em cartão lateral (resumo, metas, totais) */
.par { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 12.5px; }
.par-total { display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  font-size: 15px; padding-top: 9px; border-top: 1px solid var(--hair); }

/* cartão escuro (pontos do cliente, hero do painel) */
.cartao-escuro { background: var(--ink); color: var(--cream); border-color: transparent; }
.cartao-escuro .rotulo,
.cartao-escuro .apoio { color: rgba(247,243,234,.6); }
.cartao-escuro .trilho { background: rgba(247,243,234,.16); }
.cartao-escuro .cartao-titulo { color: var(--cream); }
.saldo-grande { font-family: var(--font-serif); font-size: 34px; line-height: 1; color: var(--gold); font-weight: var(--peso-titulo); }

/* campo de número curto dentro da linha (estoque ideal, sugerido) */
.num-curto { height: 30px; width: 64px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink);
  padding: 0 8px; text-align: right; font-family: var(--font-mono); font-size: 13px; }

/* miniatura de produto na linha da tabela */
.miniatura { height: 34px; width: 34px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--sunken); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.miniatura img { width: 100%; height: 100%; object-fit: contain; }

/* duas colunas com o cartão lateral mais estreito (login, pontos) */
.cartao-titulo-linha { display: flex; align-items: center; gap: 12px; }

/* banner de campanha no topo do cartão */
.campanha-banner { height: 110px; }
.campanha-banner img { width: 100%; height: 100%; object-fit: cover; }

.num-grande { font-size: 24px; font-weight: 600; }
.trilho > span.trilho-ok { background: var(--green); }
.saldo-linha { display: flex; align-items: baseline; gap: 8px; margin: 4px 0 12px; }
.saldo-rodape { margin-top: 8px; font-size: 11.5px; }

/* bloco sanfonado dentro de um cartão (regra de juros, nova conta) */
details.cartao { margin-bottom: 16px; }
details.cartao > summary { padding: 13px 20px; cursor: pointer; font-size: 13px; color: var(--muted); list-style: none; }
details.cartao > summary::-webkit-details-marker { display: none; }
details.cartao > summary::before { content: '＋ '; color: var(--gold-ink); }
details.cartao[open] > summary::before { content: '－ '; }
details.cartao > summary:hover { color: var(--gold-ink); }
details.cartao[open] > summary { border-bottom: 1px solid var(--hair); }
.grade-campos .campo > .btn { margin-top: auto; }

/* seletor curto dentro da linha (rota, vendedor, conta do caixa) */
.select-rota { height: 30px; max-width: 130px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink); font-family: var(--font-sans); font-size: 12px; padding: 0 6px; }

/* número de estoque clicável (abre os depósitos) */
.estoque-numero { border: none; background: transparent; color: inherit; padding: 0; cursor: pointer;
  font-family: var(--font-mono); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.estoque-numero:hover { color: var(--gold-ink); }
.btn-acao.ativo { background: var(--gold-soft); border-color: var(--gold); color: var(--gold-ink); }
/* painel suspenso de colunas/filtros */
.col-filter-wrap { position: relative; }
.col-filter-painel { position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; min-width: 230px;
  display: flex; flex-direction: column; gap: 10px; padding: 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow); }
.filtros-painel-acoes { display: flex; gap: 8px; justify-content: flex-end; }

.linha-barra .barra > span.barra-ok  { background: var(--green); }
.linha-barra .barra > span.barra-erro { background: var(--red); }

/* toolbar que pode quebrar em duas linhas (abas de configurações) */
.toolbar-quebra { flex-wrap: wrap; }

/* ---------- entrar / solicitar cadastro ---------- */
.portal { display: grid; grid-template-columns: minmax(0,1fr) 380px; gap: 0;
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  background: var(--surface); box-shadow: var(--shadow); max-width: 900px; margin: 0 auto; }
.portal-capa { background: var(--ink); color: var(--cream); padding: 34px 30px;
  display: flex; flex-direction: column; justify-content: flex-end; min-height: 360px; }
.portal-capa .rotulo { color: rgba(247,243,234,.5); }
.portal-frase { font-family: var(--font-serif); font-size: 32px; line-height: 1.15; margin-top: 8px; font-weight: var(--peso-titulo); }
.portal-form { padding: 30px 26px; }
.portal-nota { text-align: center; }
@media (max-width: 760px) {
  .portal { grid-template-columns: minmax(0,1fr); }
  .portal-capa { min-height: 0; padding: 24px 22px; }
  .portal-frase { font-size: 24px; }
}

@media (max-width: 900px) {
  /* no celular o cartão tem metade da largura: quantidade em cima, botão embaixo */
  .produto-adicionar { flex-wrap: wrap; }
  .produto-adicionar .stepper,
  .produto-adicionar .btn { flex: 1 1 100%; width: auto; }
}

/* TEMPORÁRIO — atalho de login pra testar o visual (some com a migração) */
.atalho-teste { margin: 0 0 16px; padding-bottom: 14px; border-bottom: 1px dashed var(--line);
  display: flex; flex-direction: column; gap: 8px; }
.atalho-teste .grupo-botoes { flex-wrap: wrap; }
.atalho-teste .btn { flex: 1; min-width: 88px; }

/* ---------- gaveta de recebimento em lote ---------- */
.gaveta-larga { width: 660px; }
@media (max-width: 760px) { .gaveta-larga { width: auto; left: 12px; right: 12px; } }
.gl-item { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.gl-item .linha { border-bottom: 1px solid var(--hair); }
.grade-ajustes { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; padding: 12px 14px; }
@media (max-width: 620px) { .grade-ajustes { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.gr-total { flex: 1; border-top: none; padding-top: 0; }
.campo-marcar { flex-direction: row; align-items: center; gap: 9px; font-size: 13px; color: var(--ink); }
.t-lote { --cols: minmax(0,1fr) 100px 110px; }
.grade-ajustes-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }

/* ---------- desenho próprio do celular (docs/ui/telas-mobile.html) ----------
   No telefone várias telas não são a tabela encolhida: são outra
   composição. Marque com .so-desktop o que só existe no computador e com
   .so-mobile a linha de apoio que só aparece no telefone. */
.so-mobile { display: none; }
@media (max-width: 900px) {
  .so-mobile { display: revert; }
  .so-desktop { display: none !important; }

  /* Clientes: [+] | nome + cidade·dias + etiqueta | compartilhar */
  .t-clientes { --cols: 40px minmax(0,1fr) 40px; }
  /* o resto vira duas colunas: tudo empilhado à esquerda, valor à direita */
  .t-pedidos, .t-contas, .t-contas-receber, .t-cli-pedidos, .t-cli-contas, .t-cli-encomendas,
  .t-reservas, .t-encomendas, .t-lote, .t-extrato, .t-config { --cols: minmax(0,1fr) auto; }
  .t-paradas { --cols: 30px minmax(0,1fr) auto; }
  .t-estoque, .t-clientes-adm { --cols: 40px minmax(0,1fr) auto; }
  .t-caixa { --cols: minmax(0,1fr) auto; }
  .t-reposicao { --cols: minmax(0,1fr) 70px; }
  /* cabeçalho de tabela não cabe em duas colunas: some */
  .tabela > .linha.cab { display: none; }
}
/* o número do pedido não encolhe junto com o nome do cliente */
.celula-texto > .num { flex: none; }

/* ações que no celular viram uma faixa de largura inteira sob a linha */
@media (max-width: 900px) {
  .acoes-largas { grid-column: 1 / -1; justify-content: stretch; margin-top: 4px; }
  .acoes-largas .btn { flex: 1; }
}
/* ------------------------------------------------------------------
   Acrescentar ao fim de static/css/dfpet-ui.css

   .folha-filtro é usada em pedidos, contas a receber, contas a pagar e
   painel, mas não estava definida em lugar nenhum — o painel abria sem
   forma e sem posição.
   ------------------------------------------------------------------ */

.toolbar { position: relative; }

.folha-filtro {
  position: absolute;
  top: calc(var(--h-control) + 8px);
  left: 0;
  z-index: 40;
  min-width: 260px;
  max-width: min(420px, calc(100vw - 32px));
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: 0 18px 44px -22px rgba(10, 17, 48, .55);
}
.folha-filtro[hidden] { display: none; }
.folha-filtro .campo { flex: 1 1 130px; min-width: 0; }
.folha-filtro .chip { flex: none; }

@media (max-width: 900px) {
  .folha-filtro {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(var(--barra-h, 66px) + 10px);
    top: auto;
    max-width: none;
  }
}
/* linha marcada pela seleção (o tabela-selecao.js põe a classe) */
.tabela .linha.linha-marcada { background: var(--gold-soft); }

/* ==================================================================
   CELULAR — valores tirados do protótipo (docs/ui/prototipos/
   Mobile DFPet.dc.html, bloco isClientes). O LEIA.md do protótipo manda
   manter os valores exatamente como estão; aqui eles viraram classe em
   vez de style= no template, que é o que as duas regras permitem.
   ================================================================== */
@media (max-width: 900px) {
  /* busca e chips do protótipo: 46px e 38px, não os 44px do resto */
  .busca-mob { display: flex; align-items: center; gap: 9px;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: 13px; padding: 0 13px; height: 46px; }
  .busca-mob svg { width: 17px; height: 17px; flex: none; color: var(--muted); }
  .busca-mob input { border: none; outline: none; background: transparent; color: var(--ink);
    font-family: var(--font-sans); font-size: 15px; width: 100%; min-width: 0; padding: 0; height: auto; }
  .busca-mob .busca-mic { width: 28px; height: 28px; }
  .toolbar .busca-mob { flex: 1 1 0; min-width: 0; }            /* a busca encolhe para os botões de período e situação caberem na linha */
  .toolbar .grupo-botoes { flex: none; overflow: visible; }
  .busca-mob .busca-mic svg { width: 17px; height: 17px; }

  /* no celular o protótipo usa a pílula um pouco maior */
  .etiqueta { font-size: 11px; padding: 3px 9px; }
  .chips-mob { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
  .chips-mob .chip { flex: none; height: 38px; padding: 0 14px; border-radius: 20px; font-size: 13px; }
  /* as abas das telas antigas (Reposição, Configurações) também precisam
     rolar de lado no celular — senão a última fica cortada na borda */
  .tabs-config { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
  .tabs-config .chip { flex: none; }

  /* cartão de cliente */
  .cli-lista { display: flex; flex-direction: column; gap: 12px; }
  .cli-cartao { background: var(--surface); border: 1px solid var(--line);
    border-radius: 16px; padding: 14px 15px; }
  .cli-topo { display: flex; align-items: flex-start; gap: 10px; }
  .cli-info { min-width: 0; flex: 1; }
  .cli-nome { display: block; font-family: var(--font-serif); font-size: 21px;
    color: var(--gold-ink); line-height: 1.2; text-decoration: none; font-weight: var(--peso-titulo); }
  .cli-sub { font-size: 12px; color: var(--muted); margin-top: 1px; }
  .cli-conf { flex: none; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 20px; }
  .cli-metricas { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 10px; }
  .cli-metricas > * { white-space: nowrap; }
  .cli-pts { font-family: var(--font-mono); font-size: 12.5px; color: var(--gold-ink); }
  .cli-media { font-size: 12px; color: var(--muted); }
  .cli-acoes { display: flex; gap: 8px; margin-top: 12px; }
  .cli-acoes form { flex: 1; display: flex; }
  .cli-btn-pedido { flex: 1; height: 44px; display: flex; align-items: center; justify-content: center;
    gap: 7px; border: none; background: var(--ink); color: var(--surface); border-radius: 12px;
    font-family: var(--font-sans); font-size: 13.5px; font-weight: 500; cursor: pointer; text-decoration: none; }
  .cli-btn-pedido svg { width: 16px; height: 16px; }
  .cli-btn-verde, .cli-btn-abrir { width: 52px; height: 44px; flex: none; border-radius: 12px;
    cursor: pointer; display: flex; align-items: center; justify-content: center; }
  .cli-btn-verde { border: 1px solid var(--green-ink); background: var(--green); color: #fff; }
  .cli-btn-abrir { border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
  .cli-btn-verde svg, .cli-btn-abrir svg { width: 17px; height: 17px; }
  .cli-btn-reativar { height: 44px; flex: none; padding: 0 12px; border: 1px solid var(--gold); background: transparent; color: var(--gold-ink);
    border-radius: 12px; font-family: var(--font-sans); font-size: 13px; font-weight: 600; cursor: pointer; }

  /* Pedidos (bloco isPedidos do protótipo) */
  .kpis-mob { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .kpi-mob { background: var(--surface); border: 1px solid var(--line);
    border-radius: 14px; padding: 12px 13px; }
  .kpi-mob-valor { font-family: var(--font-mono); font-size: 19px; font-weight: 600; }
  .kpi-mob-valor small { font-size: 11px; color: var(--muted); font-weight: 500; }
  .kpi-mob-rotulo { font-size: 11px; color: var(--muted); }

  .ped-cartao { background: var(--surface); border: 1px solid var(--line);
    border-radius: 16px; padding: 13px 15px; display: flex; align-items: center; gap: 12px;
    color: inherit; text-decoration: none; }
  .ped-dot { width: 11px; height: 11px; flex: none; border-radius: 50%; }
  .ped-info { min-width: 0; flex: 1; }
  .ped-nome { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ped-meta { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ped-valor { flex: none; text-align: right; font-family: var(--font-mono);
    font-size: 14px; font-weight: 600; }

  /* variante do cartão de pedido pras telas em que a ação fica no próprio
     cartão (Orçamentos: fechar, PDF, compartilhar, excluir) — o cartão de
     cima é igualzinho, só ganha uma linha de botões embaixo */
  .ped-bloco { background: var(--surface); border: 1px solid var(--line);
    border-radius: 16px; padding: 13px 15px; display: flex; flex-direction: column; gap: 11px; }
  .ped-bloco .ped-cartao { background: none; border: none; border-radius: 0; padding: 0; }
  .ped-acoes { display: flex; align-items: stretch; gap: 8px; }
  .ped-acoes form { display: contents; }
  .ped-btn { flex: 1; height: 44px; border: none; background: var(--ink); color: var(--surface);
    border-radius: 12px; font-family: var(--font-sans); font-size: 14px; font-weight: 600; cursor: pointer; }
  .ped-btn-icone { width: 52px; height: 44px; flex: none; border: 1px solid var(--line);
    background: var(--surface); color: var(--ink); border-radius: 12px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
  .ped-btn-icone svg { width: 18px; height: 18px; }
  .ped-btn-perigo { color: var(--red); }
  /* ação secundária: mesma caixa, só contornada */
  .ped-btn-linha { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }

  /* Atenção (bloco isAtencao do protótipo) */
  .at-vencido { background: var(--red-soft); border: 1px solid rgba(156,74,60,.25);
    border-radius: 16px; padding: 15px 16px; }
  .at-vencido-rotulo { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--red); }
  .at-vencido-valor { font-family: var(--font-mono); font-size: 28px; font-weight: 600; color: var(--red); }
  .at-vencido-nota { font-size: 12px; color: var(--red); }
  .at-cartao { background: var(--surface); border: 1px solid var(--line);
    border-radius: 16px; padding: 14px 15px; }
  .at-topo { display: flex; align-items: flex-start; gap: 10px; }
  .at-info { min-width: 0; flex: 1; }
  .at-nome { font-family: var(--font-serif); font-size: 20px; line-height: 1.2; font-weight: var(--peso-titulo); }
  .at-sub { font-size: 12px; color: var(--muted); }
  .at-lado { flex: none; text-align: right; }
  .at-valor { font-family: var(--font-mono); font-size: 16px; font-weight: 600; }
  .at-atraso { font-size: 11px; font-weight: 600; color: var(--red); }
  .at-acoes { display: flex; gap: 8px; margin-top: 12px; }
  .at-acoes form { flex: 1; display: flex; }
  .at-btn-receber { flex: 1; height: 46px; border: none; background: var(--green); color: #fff;
    border-radius: 12px; font-family: var(--font-sans); font-size: 14px; font-weight: 600;
    cursor: pointer; display: flex; align-items: center; justify-content: center; text-decoration: none; }
  .at-btn-cobrar { flex: 1; height: 46px; display: flex; align-items: center;
    justify-content: center; gap: 8px; border: none; background: var(--green); color: #fff;
    border-radius: 12px; font-family: var(--font-sans); font-size: 14px; font-weight: 600;
    cursor: pointer; }
  .at-btn-cobrar svg { width: 17px; height: 17px; }
  .at-btn-zap { width: 52px; height: 46px; flex: none; border: 1px solid var(--line);
    background: var(--surface); color: var(--ink); border-radius: 12px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; }
  .at-btn-zap svg { width: 18px; height: 18px; }

  /* Reservas e Encomendas (bloco isReservas do protótipo) */
  .abas-mob { display: flex; gap: 8px; }
  .aba-mob { flex: 1; height: 42px; border: 1px solid var(--line); background: var(--surface);
    color: var(--ink); border-radius: 12px; font-family: var(--font-sans); font-size: 13.5px;
    cursor: pointer; display: flex; align-items: center; justify-content: center; text-decoration: none; }
  .aba-mob.ativo { background: var(--sel-bg); border-color: var(--sel-borda); color: var(--sel-tx); font-weight: 500; }
  .res-cartao { background: var(--surface); border: 1px solid var(--line);
    border-radius: 16px; padding: 14px 15px; }
  .res-cliente { font-family: var(--font-serif); font-size: 19px; color: var(--gold-ink); line-height: 1.2; font-weight: var(--peso-titulo); }
  .res-produto { font-size: 13.5px; margin-top: 6px; }
  .res-meta { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
  .res-topo { display: flex; align-items: flex-start; gap: 10px; }
  .res-info { min-width: 0; flex: 1; }
  .res-situacao { flex: none; display: flex; align-items: center; gap: 6px; font-size: 11.5px; }
  .res-situacao .ponto { width: 9px; height: 9px; border-radius: 50%; }
  .res-btn { width: 100%; height: 46px; margin-top: 12px; display: flex; align-items: center;
    justify-content: center; gap: 8px; border: none; background: var(--gold); color: var(--ink);
    border-radius: 12px; font-family: var(--font-sans); font-size: 14px; font-weight: 600;
    cursor: pointer; text-decoration: none; }
  .res-btn-linha { background: var(--surface); border: 1px solid var(--line); color: var(--ink); }
  .res-feito { margin-top: 12px; height: 46px; display: flex; align-items: center;
    justify-content: center; gap: 7px; border-radius: 12px; background: var(--green-soft);
    color: var(--green-ink); font-size: 13.5px; font-weight: 600; }
  .res-acoes { display: flex; gap: 8px; }
  .res-acoes form { flex: 1; }

  /* Rota (bloco isRota do protótipo) */
  .rt-lista { display: flex; flex-direction: column; gap: 13px; }
  .rt-mapa { border-radius: 18px; overflow: hidden; background: #0E1A14;
    background-image: linear-gradient(rgba(255,255,255,.05) 2px, transparent 2px),
                      linear-gradient(90deg, rgba(255,255,255,.05) 2px, transparent 2px);
    background-size: 64px 64px; padding: 12px; position: relative; height: 190px; }
  .rt-mapa svg.rt-linha { position: absolute; inset: 12px;
    width: calc(100% - 24px); height: calc(100% - 24px); }
  .rt-linha polyline { fill: none; stroke: #E8733C; stroke-width: 4;
    stroke-linecap: round; stroke-dasharray: 11 9; }
  .rt-pino { position: absolute; transform: translate(-50%, -50%);
    width: 30px; height: 30px; border-radius: 50%; border: 2.5px solid #E8733C;
    font-family: var(--font-mono); font-size: 13px;
    display: flex; align-items: center; justify-content: center; }
  /* o protótipo marca só a parada da vez; o resto do estado (vendeu, não
     vendeu) aparece do lado direito da linha, não na bolinha */
  .rt-pino, .rt-ordem { background: #0E1A14; color: #8A90AB; }
  .rt-pino-agora { background: #E8733C; color: #fff; }

  .rt-proxima { background: var(--surface); border: 1px solid var(--line);
    border-radius: 18px; padding: 16px; }
  .rt-rotulo { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
  .rt-nome { font-family: var(--font-serif); font-size: 24px; line-height: 1.2; margin: 3px 0 2px; font-weight: var(--peso-titulo); }
  .rt-endereco { font-size: 12.5px; color: var(--muted); }
  .rt-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
  .rt-acoes form { flex: 1; display: flex; }
  .rt-acoes form.rt-form-pular { flex: none; }
  .rt-btn-cheguei { flex: 1; height: 50px; display: flex; align-items: center;
    justify-content: center; gap: 8px; border: none; background: var(--green); color: #fff;
    border-radius: 13px; font-family: var(--font-sans); font-size: 15px; font-weight: 600; cursor: pointer; }
  .rt-btn-pular { width: 92px; height: 50px; flex: none; display: flex; align-items: center;
    justify-content: center; gap: 6px; border: 1px solid var(--gold); background: transparent;
    color: var(--gold-ink); border-radius: 13px; font-family: var(--font-sans);
    font-size: 14px; font-weight: 600; cursor: pointer; }
  .rt-btn-mapa { width: 52px; height: 50px; flex: none; border: 1px solid var(--line);
    background: var(--surface); color: var(--ink); border-radius: 13px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; text-decoration: none; }
  .rt-btn-mapa svg { width: 18px; height: 18px; }
  .rt-btn-avisar { order: 5; flex: 1 0 100%; height: 44px; border: 1px solid var(--green-ink); background: transparent; color: var(--green-ink);
    border-radius: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
    font-family: var(--font-sans); font-size: 14px; font-weight: 600; }
  .rt-btn-avisar svg { width: 18px; height: 18px; }

  .rt-fim { background: var(--surface); border: 1px solid var(--line);
    border-radius: 18px; padding: 18px; text-align: center; }
  .rt-fim-titulo { font-family: var(--font-serif); font-size: 24px; font-weight: var(--peso-titulo); }
  .rt-fim-sub { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
  .rt-fim-valor { font-family: var(--font-mono); font-size: 24px; font-weight: 600;
    color: var(--green-ink); margin-top: 8px; }

  .rt-cab { display: flex; align-items: center; gap: 8px; margin: 2px 2px 0; }
  .rt-cab-titulo { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
  .rt-btn-extra { margin-left: auto; height: 34px; padding: 0 12px; display: flex;
    align-items: center; gap: 6px; border: 1px dashed var(--gold); background: transparent;
    color: var(--gold-ink); border-radius: 10px; font-family: var(--font-sans);
    font-size: 12.5px; cursor: pointer; text-decoration: none; }
  .rt-btn-extra svg { width: 14px; height: 14px; }

  .rt-parada { background: var(--surface); border: 1px solid var(--line);
    border-radius: 14px; padding: 12px 14px; display: flex; align-items: center; gap: 11px; }
  .rt-ordem { width: 26px; height: 26px; flex: none; border-radius: 50%;
    border: 1.5px solid #E8733C; font-family: var(--font-mono); font-size: 12px;
    display: flex; align-items: center; justify-content: center; }
  .rt-parada-info { min-width: 0; flex: 1; }
  .rt-parada-nome { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rt-parada-end { font-size: 11.5px; color: var(--muted); white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; }
  .rt-venda { flex: none; display: flex; align-items: center; gap: 5px;
    font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--green-ink); }
  .rt-venda svg { width: 15px; height: 15px; }
  .rt-sem-venda { flex: none; width: 16px; height: 16px; }
  .rt-selo { flex: none; font-size: 11px; color: var(--muted); }

  .rt-btn-comecar { width: 100%; height: 50px; display: flex; align-items: center;
    justify-content: center; gap: 8px; border: none; background: var(--gold); color: var(--ink);
    border-radius: 13px; font-family: var(--font-sans); font-size: 15px; font-weight: 600;
    cursor: pointer; text-decoration: none; }
  .rt-btn-comecar.rt-btn-linha { background: var(--surface); border: 1px solid var(--line); }

  /* Início do vendedor (bloco isInicio do protótipo) */
  .ini-hero { border-radius: 18px; padding: 16px 17px; background: var(--ink); color: var(--cream); }
  .ini-hero-rotulo { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: rgba(247,243,234,.55); }
  .ini-hero-linha { display: flex; align-items: baseline; gap: 8px; margin: 6px 0 12px; }
  .ini-hero-valor { font-family: var(--font-serif); font-size: 36px; line-height: 1; color: var(--gold); font-weight: var(--peso-titulo); }
  .ini-hero-nota { font-size: 12px; color: rgba(247,243,234,.6); }
  .ini-hero-trilho { height: 7px; border-radius: 20px; background: rgba(247,243,234,.16); overflow: hidden; }
  .ini-hero-barra { height: 100%; background: linear-gradient(90deg, #C8922A, #E8B33C); border-radius: 20px; }
  .ini-hero-pe { display: flex; justify-content: space-between; margin-top: 8px;
    font-size: 11px; color: rgba(247,243,234,.62); }

  .ini-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .ini-tile { text-align: left; padding: 14px; border: 1px solid var(--line); background: var(--surface);
    border-radius: 16px; text-decoration: none; color: var(--ink); display: block; }
  .ini-tile-icone { width: 32px; height: 32px; border-radius: 10px; background: var(--gold-soft);
    color: var(--gold-ink); display: flex; align-items: center; justify-content: center; margin-bottom: 9px; }
  .ini-tile-icone svg { width: 17px; height: 17px; }
  .ini-tile-icone-erro { background: var(--red-soft); color: var(--red); }
  .ini-tile-valor { display: block; font-family: var(--font-serif); font-size: 19px; color: var(--ink); font-weight: var(--peso-titulo); }
  .ini-tile-nota { display: block; font-size: 11.5px; color: var(--muted); }

  .ini-secao { display: flex; align-items: baseline; gap: 8px; margin: 4px 2px 9px; }
  .ini-secao-titulo { font-family: var(--font-serif); font-size: 19px; font-weight: var(--peso-titulo); }
  .ini-parada { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 15px; }
  .ini-parada-topo { display: flex; align-items: flex-start; gap: 10px; }
  .ini-parada-ordem { width: 28px; height: 28px; flex: none; border-radius: 50%; background: #E8733C;
    color: #fff; font-family: var(--font-mono); font-size: 12px;
    display: flex; align-items: center; justify-content: center; }
  .ini-parada-info { min-width: 0; flex: 1; }
  .ini-parada-nome { font-family: var(--font-serif); font-size: 20px; color: var(--gold-ink); line-height: 1.2; font-weight: var(--peso-titulo); }
  .ini-parada-end { font-size: 12px; color: var(--muted); }
  .ini-parada-selo { display: inline-block; margin-top: 6px; font-size: 10px; letter-spacing: .08em;
    text-transform: uppercase; font-weight: 600; background: var(--gold); color: var(--ink);
    padding: 2px 8px; border-radius: 6px; }

  .ini-atalhos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .ini-atalho { height: 52px; display: flex; align-items: center; gap: 10px; padding: 0 14px;
    border: 1px solid var(--line); background: var(--surface); border-radius: 14px;
    font-family: var(--font-sans); font-size: 13.5px; color: var(--ink); text-decoration: none; }
  .ini-atalho svg { width: 18px; height: 18px; flex: none; }

  .cli-convite-feito { flex: none; align-self: center; font-size: 11.5px; color: var(--muted); }

  /* Ranking do painel (bloco isInicioAdmin do protótipo) */
  .pa-ranking { background: var(--surface); border: 1px solid var(--line);
    border-radius: 16px; overflow: hidden; }
  .pa-rank-linha { padding: 13px 15px; border-bottom: 1px solid var(--hair);
    display: flex; align-items: center; gap: 12px; }
  .pa-rank-linha:last-child { border-bottom: none; }
  .pa-rank-pos { width: 26px; height: 26px; flex: none; border-radius: 50%;
    background: var(--gold-soft); color: var(--gold-ink); font-family: var(--font-mono);
    font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
  .pa-rank-info { min-width: 0; flex: 1; }
  .pa-rank-nome { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pa-rank-trilho { height: 6px; border-radius: 20px; background: var(--sunken);
    overflow: hidden; margin-top: 6px; }
  .pa-rank-barra { height: 100%; background: var(--gold); border-radius: 20px; }
  .pa-rank-valor { flex: none; font-family: var(--font-mono); font-size: 13px; font-weight: 600; }

  /* Objetivos (bloco isObjetivos do protótipo) */
  .obj-lista { display: flex; flex-direction: column; gap: 12px; }
  .obj-cartao { background: var(--surface); border: 1px solid var(--line);
    border-radius: 16px; padding: 15px; display: flex; gap: 14px; align-items: center; }
  .obj-anel { width: 66px; height: 66px; flex: none; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; }
  .obj-anel-centro { width: 50px; height: 50px; border-radius: 50%; background: var(--surface);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-mono); font-size: 13.5px; font-weight: 600; }
  .obj-info { min-width: 0; flex: 1; }
  .obj-label { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
  .obj-valor { font-family: var(--font-serif); font-size: 22px; line-height: 1.2; font-weight: var(--peso-titulo); }
  .obj-premio { display: flex; align-items: center; gap: 6px; font-size: 12px;
    color: var(--gold-ink); margin-top: 3px; }
  .obj-premio svg { width: 14px; height: 14px; flex: none; }
  .obj-premio span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* Catálogo e Loja (blocos isCatalogo e isLoja do protótipo) */
  .cat-topo { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; }
  .cat-destino { display: flex; gap: 8px; }
  .cat-destino .chip { flex: 1; height: 42px; display: flex; align-items: center;
    justify-content: center; gap: 7px; border-radius: 12px; font-size: 13.5px; padding: 0; }
  .cat-destino .chip svg { width: 16px; height: 16px; }
  .cat-montando { background: var(--gold-soft); border-radius: 13px; padding: 11px 13px;
    display: flex; align-items: center; gap: 9px; }
  .cat-montando-texto { font-size: 11.5px; color: var(--gold-ink); min-width: 0; }
  .cat-montando form { margin-left: auto; flex: none; }
  .cat-trocar { height: 30px; padding: 0 11px; border: 1px solid var(--gold); background: transparent;
    color: var(--gold-ink); border-radius: 9px; font-family: var(--font-sans);
    font-size: 11.5px; cursor: pointer; }

  .grade-produtos { grid-template-columns: 1fr 1fr; gap: 10px; }
  .produto { border-radius: 16px; box-shadow: none; }
  .produto-foto { height: auto; aspect-ratio: 1 / 1; background: #fff; gap: 3px; }
  .produto-marca { font-size: 17px; }
  .produto-sem-foto { font-size: 8.5px; }
  .badge-promo { top: 8px; left: 8px; font-size: 9px; letter-spacing: .06em; font-weight: 600;
    background: var(--gold-soft); color: var(--gold-ink); padding: 2px 6px; border-radius: 5px; }
  .produto-acao-topo { top: 7px; right: 7px; }
  .produto-acao-topo.btn-compartilhar { width: 30px; height: 30px; border-radius: 9px;
    border: 1px solid var(--green-ink); background: var(--green); color: #fff; }
  .produto-acao-topo.btn-compartilhar svg { width: 15px; height: 15px; }
  .produto-corpo { padding: 10px 11px 11px; gap: 7px; }
  .produto-nome { font-size: 12px; min-height: 31px; font-weight: 400; }
  .chips-mob .chip.so-mobile { display: inline-flex; }
  .produto-precos { gap: 5px; flex-wrap: nowrap; }
  .produto-precos .preco { order: 0; }
  .produto-precos .preco-de { order: 1; }
  .preco { font-size: 14.5px; font-weight: 600; }
  .preco-de { font-size: 10.5px; }
  .disponivel, .indisponivel { font-size: 10.5px; gap: 5px; }
  .disponivel::before, .indisponivel::before { width: 6px; height: 6px; }
  .produto-adicionar { gap: 7px; flex-wrap: nowrap; }
  .produto-adicionar .stepper { flex: none; height: 40px; border-color: var(--line);
    border-radius: 10px; padding: 0; }
  /* sem o padding do navegador o botão encolhe até os 30px do protótipo */
  .produto-adicionar .stepper button { width: 30px; min-width: 0; padding: 0;
    height: 100%; color: var(--ink); font-size: 17px; }
  .produto-adicionar .stepper .qtd { width: 20px; flex: none; font-size: 13px; }
  .produto-adicionar .btn { flex: 1 1 auto; width: auto; height: 40px; border-radius: 10px; font-size: 12.5px; }
  .cat-btn-carrinho { flex: 1; height: 40px; border: none; background: var(--ink); color: var(--surface);
    border-radius: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
  .cat-btn-carrinho svg { width: 17px; height: 17px; }
  /* Meus pedidos do cliente (bloco isCliPedidos do protótipo) */
  .cp-cartao { background: var(--surface); border: 1px solid var(--line);
    border-radius: 16px; padding: 15px; }
  .cp-topo { display: flex; align-items: baseline; gap: 10px; }
  .cp-numero { font-family: var(--font-mono); font-size: 14px; color: var(--gold-ink); text-decoration: none; }
  .cp-data { font-size: 12px; color: var(--muted); }
  .cp-valor { margin-left: auto; font-family: var(--font-mono); font-size: 15px; font-weight: 600; }
  .cp-trilho { height: 7px; border-radius: 20px; background: var(--sunken); overflow: hidden; margin-top: 12px; }
  .cp-barra { height: 100%; border-radius: 20px; }
  .cp-etapas { display: flex; justify-content: space-between; margin-top: 7px; font-size: 12px; }
  .cp-etapa { font-weight: 600; }
  .cp-previsao { color: var(--muted); text-decoration: none; }
  .cp-acoes { display: flex; gap: 8px; margin-top: 12px; }
  .cp-btn-repetir { flex: 1; height: 44px; border: 1px solid var(--line); background: var(--surface);
    color: var(--ink); border-radius: 12px; font-family: var(--font-sans); font-size: 13.5px; cursor: pointer; }
  .cp-btn-zap { width: 52px; height: 44px; flex: none; border: 1px solid var(--green-ink);
    background: var(--green); color: #fff; border-radius: 12px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; }
  .cp-btn-zap svg { width: 17px; height: 17px; }
  .cp-form-repetir { flex: 1; display: flex; }
  .cp-btn-repetir[disabled], .cp-btn-zap[disabled] { opacity: .45; cursor: not-allowed; }
  .cp-btn-repetir[disabled] { background: var(--surface); color: var(--ink); }
  .cp-btn-zap[disabled] { background: var(--green); color: #fff; }

  /* Financeiro do cliente (bloco isCliFin do protótipo) */
  .cf-cartao { background: var(--surface); border: 1px solid var(--line);
    border-radius: 16px; padding: 14px 15px; }
  .cf-topo { display: flex; align-items: center; gap: 10px; }
  .cf-info { min-width: 0; flex: 1; }
  .cf-doc { font-size: 14px; display: block; color: var(--ink); }
  .cf-venc { font-size: 11.5px; color: var(--muted); }
  .cf-valor { font-family: var(--font-mono); font-size: 18px; font-weight: 600; margin-top: 8px; }
  .cf-juros { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
  .cf-acoes { display: flex; gap: 8px; margin-top: 12px; }
  .cf-btn-pix, .cf-btn-via { flex: 1; height: 46px; display: flex; align-items: center;
    justify-content: center; border-radius: 12px; font-family: var(--font-sans);
    font-size: 13.5px; text-decoration: none; }
  .cf-btn-pix { border: none; background: var(--green); color: #fff; font-weight: 600; }
  .cf-btn-via { border: 1px solid var(--line); background: var(--surface); color: var(--ink); }

  /* Contas a pagar no celular (bloco isPagar do protótipo) */
  .kpi-mob-label { font-size: 11px; color: var(--muted); }
  .kpi-mob-cifra { font-size: 11px; color: var(--muted); font-weight: 500; }
  .kpi-mob-erro { background: var(--red-soft); border-color: rgba(156,74,60,.25); }
  .kpi-mob-erro .kpi-mob-valor, .kpi-mob-erro .kpi-mob-label,
  .kpi-mob-erro .kpi-mob-cifra { color: var(--red); }
  .cf-btn-pagar { flex: 1; height: 46px; border: none; background: var(--ink); color: var(--surface);
    border-radius: 12px; font-family: var(--font-sans); font-size: 14px; font-weight: 600; cursor: pointer; }
  .cf-btn-boleto { width: 56px; height: 46px; flex: none; border: 1px solid var(--line);
    background: var(--surface); color: var(--ink); border-radius: 12px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; }
  .cf-btn-boleto svg { width: 18px; height: 18px; }
  .cf-btn-boleto[disabled] { opacity: .45; cursor: not-allowed; background: var(--surface); }

  /* Meus pontos (bloco isCliPontos do protótipo) */
  .pt-clube { background: var(--ink); color: var(--cream); border-radius: 18px; padding: 18px; }
  .pt-clube-rotulo { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: rgba(247,243,234,.55); }
  .pt-clube-linha { display: flex; align-items: baseline; gap: 8px; margin: 4px 0 12px; }
  .pt-clube-saldo { font-family: var(--font-serif); font-size: 40px; line-height: 1; color: var(--gold); font-weight: var(--peso-titulo); }
  .pt-clube-meta { font-size: 12.5px; color: rgba(247,243,234,.6); }
  .pt-clube-trilho { height: 8px; border-radius: 20px; background: rgba(247,243,234,.16); overflow: hidden; }
  .pt-clube-barra { height: 100%; background: linear-gradient(90deg, #C8922A, #E8B33C); border-radius: 20px; }
  .pt-clube-nota { font-size: 11px; color: rgba(247,243,234,.6); margin-top: 8px; }
  .pt-premio { background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
    padding: 14px 15px; display: flex; align-items: center; gap: 12px; }
  .pt-premio-info { min-width: 0; flex: 1; }
  .pt-premio-nome { font-size: 14px; }
  .pt-premio-custo { font-family: var(--font-mono); font-size: 12px; color: var(--gold-ink); margin-top: 2px; }
  .pt-btn-resgatar { flex: none; height: 44px; padding: 0 16px; border: none; background: var(--gold);
    color: var(--ink); border-radius: 12px; font-family: var(--font-sans);
    font-size: 13.5px; font-weight: 600; cursor: pointer; }
  .pt-falta { flex: none; font-size: 11.5px; color: var(--muted); }
  .pt-extrato-link { align-self: center; margin-top: 4px; font-size: 12.5px; color: var(--gold-ink); }

  /* Minhas encomendas (bloco isCliEnc do protótipo) */
  .ce-cartao { background: var(--surface); border: 1px solid var(--line);
    border-radius: 16px; padding: 14px 15px; }
  .ce-produto { font-size: 14px; }
  .ce-qtd { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
  .ce-situacao { display: flex; align-items: center; gap: 7px; margin-top: 9px; font-size: 12.5px; }
  .ce-situacao .ponto { width: 9px; height: 9px; border-radius: 50%; }

  .cat-fechar { height: 52px; margin-top: 14px; display: flex; align-items: center;
    justify-content: center; gap: 9px; border: none; background: var(--gold); color: var(--ink);
    border-radius: 13px; font-family: var(--font-sans); font-size: 15px; font-weight: 600;
    cursor: pointer; text-decoration: none; }
}

/* ------------------------------------------------------------------
   Tabela no computador — diferenças medidas contra o protótipo
   (docs/ui/prototipos/Desktop DFPet.dc.html › isClientes e isPedidos).
   ------------------------------------------------------------------ */
.linha.t-clientes { padding: 14px 20px; }  /* Clientes respira 1px a mais */
.cliente-nome { font-size: var(--nome-fs, 15px); }
/* o "R$" antes do número vem menor e apagado (protótipo › resumoPedidos) */
.kpi-valor small { font-size: 10px; font-weight: 500; color: var(--muted); }
.etiqueta { font-size: var(--bal-fs, 10px); padding: 2px 8px; border: var(--bal-borda, 0px) solid transparent; }

/* sobrescrita do <h1> (protótipo: eyebrow + título serifado de 32px) */
.secao-tela { font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 4px; }
.secao-tela + h1 { margin-top: 0; }

/* ------------------------------------------------------------------
   Cartão de produto no computador — valores do protótipo
   (docs/ui/prototipos/Desktop DFPet.dc.html › isProdutos). O gabarito
   antigo trazia outros números; estes são os do protótipo, que é a
   referência. As telas de celular reajustam tudo lá embaixo.
   ------------------------------------------------------------------ */
.produto-foto { height: auto; aspect-ratio: 4 / 3; background: #FFFFFF; gap: 5px; }
.produto-marca { font-size: 21px; letter-spacing: .01em; color: var(--ink); }
.produto-sem-foto { font-size: 9.5px; letter-spacing: .22em; }
.produto-nome { min-height: 34px; }
.badge-promo { background: var(--gold-soft); color: var(--gold-ink); font-size: 10px;
  letter-spacing: .08em; font-weight: 600; padding: 2px 7px; }
.produto-adicionar { gap: 7px; }
.produto-adicionar .stepper { flex: none; height: 32px; padding: 0;
  border-color: var(--line); border-radius: 8px; }
.produto-adicionar .stepper button { width: 28px; min-width: 0; padding: 0;
  height: 100%; color: var(--ink); font-size: 15px; }
.produto-adicionar .stepper .qtd { width: 22px; flex: none; font-size: 13px; }
.produto-adicionar .btn { flex: 1; height: 32px; border-radius: 8px;
  font-size: 12.5px; font-weight: 500; }

/* faixa de filtros do catálogo (mesma linha de "Categoria" do protótipo) */
.cat-filtros { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.cat-filtros-rotulo { font-size: 12px; color: var(--muted); margin-right: 4px; }
.cat-filtros .chip { height: 30px; padding: 0 13px; border-radius: 20px; font-size: 12.5px; }
.cat-filtros-direita { margin-left: auto; display: flex; gap: 8px; }
.cat-filtros-direita .btn-filtro { height: 30px; padding: 0 12px; display: flex; align-items: center;
  gap: 7px; border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  border-radius: 8px; font-family: var(--font-sans); font-size: 12.5px;
  cursor: pointer; text-decoration: none; }
.cat-filtros-direita .btn-filtro svg { width: 14px; height: 14px; }
.cat-filtros-direita .btn-filtro.ativo { background: var(--gold-soft);
  border-color: var(--gold); color: var(--gold-ink); }

/* Meu perfil (bloco isPerfil do protótipo) */
.pf-split { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 22px; align-items: start; }
.pf-coluna { display: flex; flex-direction: column; gap: 16px; }
.pf-topo { padding: 20px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.pf-avatar { width: 64px; height: 64px; flex: none; border-radius: 50%;
  background: var(--gold-soft); color: var(--gold-ink); font-family: var(--font-serif);
  font-size: 24px; display: flex; align-items: center; justify-content: center; font-weight: var(--peso-titulo); }
.pf-topo-info { min-width: 0; flex: 1 1 200px; }
.pf-nome { font-family: var(--font-serif); font-size: 26px; line-height: 1.15; font-weight: var(--peso-titulo); }
.pf-selo-ativa { flex: none; display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 600; color: var(--green-ink);
  background: var(--green-soft); padding: 6px 11px; border-radius: 20px; }
.pf-selo-ativa svg { width: 14px; height: 14px; }

.pf-cartao { padding: 0; overflow: hidden; }
.pf-cab { padding: 15px 20px; border-bottom: 1px solid var(--line);
  font-family: var(--font-serif); font-size: 20px; font-weight: var(--peso-titulo); }
.pf-corpo { padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; }
.pf-grade { padding: 16px 20px; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 16px; }
.pf-grade-leitura { padding: 14px 0 0; border-top: 1px solid var(--hair); margin-top: 4px; }
.pf-valor { font-size: 13.5px; margin-top: 3px; }
.pf-valor.num { font-size: 13px; }

.pf-acoes { padding: 14px 20px; border-top: 1px solid var(--hair);
  display: flex; gap: 8px; flex-wrap: wrap; }
.pf-btn { height: 36px; padding: 0 15px; font-size: 13px; }
 /* painel em linha, não a folha flutuante dos filtros — o data-abre do
    filtros-folha.js alterna o [hidden] de qualquer elemento por id */
.pf-form { padding: 16px 20px; background: var(--sunken); border-top: 1px solid var(--hair);
  display: flex; flex-direction: column; gap: 12px; }
.pf-form[hidden] { display: none; }
.pf-form-titulo { margin: 0; }
.pf-form-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 12px; }
/* kit da campanha: uma linha por produto (produto + quantidade + tirar) */
.kit-linhas { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.kit-linha { display: grid; grid-template-columns: 1fr 96px auto; gap: 8px; align-items: center; }
.kit-rodape { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 12px; }
.pf-form-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.pf-form-linha { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.pf-form-linha .campo { flex: 1 1 220px; }
.pf-push-status { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--muted); margin: 0; }
.pf-push-icone { width: 26px; height: 26px; flex: none; border-radius: 50%;
  background: var(--gold-soft); color: var(--gold-ink);
  display: flex; align-items: center; justify-content: center; }
.pf-push-icone svg { width: 14px; height: 14px; }
.pf-perigo { border-color: rgba(156,74,60,.3); }
.pf-btn-perigo { background: var(--red); color: #fff; border: none; }
.pf-btn-sair { border: 1px solid var(--line); background: var(--surface); color: var(--red);
  justify-content: center; width: 100%; }
.pf-btn-sair:hover { border-color: var(--red); text-decoration: none; }

.pf-aside { display: flex; flex-direction: column; gap: 14px; }
.pf-aside-titulo { margin-bottom: 12px; }
.pf-mes { display: flex; flex-direction: column; gap: 11px; }
.pf-mes-linha { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.pf-mes-valor { font-size: 15px; font-weight: 600; }
.pf-aside-link { display: inline-block; margin-top: 12px; color: var(--gold-ink); }

@media (max-width: 900px) {
  .pf-split { grid-template-columns: minmax(0,1fr); gap: 14px; }
  .pf-grade, .pf-corpo, .pf-form, .pf-acoes { padding-left: 15px; padding-right: 15px; }
  .pf-cab { padding: 13px 15px; }
}

/* Rota no computador (bloco isPorPerto do protótipo) */
.pp-cartao { padding: 0; overflow: hidden; }
.pp-mapa { background: #0E1A14;
  background-image: linear-gradient(rgba(255,255,255,.045) 2px, transparent 2px),
                    linear-gradient(90deg, rgba(255,255,255,.045) 2px, transparent 2px);
  background-size: 74px 74px; padding: 12px; }
.pp-mapa-area { position: relative; width: 100%; height: 200px; }
.pp-linha { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pp-linha polyline { fill: none; stroke: #E8733C; stroke-width: 4;
  stroke-linecap: round; stroke-dasharray: 12 10; }
.pp-mapa-area .rt-pino { position: absolute; transform: translate(-50%, -50%);
  width: 30px; height: 30px; border-radius: 50%; border: 2.5px solid #E8733C;
  background: #0E1A14; color: #8A90AB; font-family: var(--font-mono); font-size: 13px;
  display: flex; align-items: center; justify-content: center; }
.pp-mapa-area .rt-pino-agora { background: #E8733C; color: #fff; }

.pp-proxima { padding: 16px 18px; border-bottom: 1px solid var(--hair);
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.pp-proxima-info { min-width: 0; flex: 1 1 220px; }
.pp-proxima-nome { font-family: var(--font-serif); font-size: 24px; line-height: 1.2; font-weight: var(--peso-titulo); }
.pp-proxima-acoes { display: flex; gap: 8px; flex: none; }
.pp-btn { height: 38px; padding: 0 16px; font-size: 13.5px; font-weight: 600; }
.pp-btn-mapa { width: 38px; height: 38px; }
.pp-vendido { font-size: 20px; font-weight: 600; margin-top: 4px; }
.btn-linha-ouro { border: 1px solid var(--gold); background: transparent; color: var(--gold-ink); }
.btn-linha-ouro:hover { background: var(--gold-soft); }

.pp-itinerario-cab { padding: 12px 18px 0; display: flex; align-items: center; gap: 10px; }
.pp-btn-extra { margin-left: auto; height: 30px; padding: 0 12px; font-size: 12.5px; }
.pp-paradas { padding: 0 18px 14px; }
.pp-parada { display: flex; align-items: center; gap: 11px; padding: 9px 0;
  border-bottom: 1px solid var(--hair); }
.pp-parada:last-child { border-bottom: none; }
.pp-parada .rt-ordem { width: 24px; height: 24px; flex: none; border-radius: 50%;
  border: 1.5px solid #E8733C; background: #0E1A14; color: #8A90AB;
  font-family: var(--font-mono); font-size: 11px;
  display: flex; align-items: center; justify-content: center; }
.pp-parada-info { min-width: 0; flex: 1; }
.pp-parada-nome { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-parada-end { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-venda { flex: none; display: flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; color: var(--green-ink); }
.pp-venda svg, .pp-sem-venda svg { width: 16px; height: 16px; }
.pp-sem-venda { flex: none; display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--red); }
.pp-selo { flex: none; font-size: 11px; color: var(--muted); }
/* rota: o vendedor mudou a ordem (horário, facilidade) e marca onde está; o pulado volta para a rota */
.rt-aqui { flex: none; height: 32px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--green);
  background: var(--green-soft); color: var(--green-ink); font-family: var(--font-sans); font-size: 12px; font-weight: 600; cursor: pointer; }
.rt-aqui.rt-voltar { border-color: var(--gold); background: var(--gold-soft); color: var(--gold-ink); }

.pp-regioes { display: flex; gap: 8px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.pp-regioes .chip { height: 32px; padding: 0 13px; border-radius: 20px; font-size: 12.5px; }
.pp-parada-cartao { padding: 13px 18px; }
.pp-pin { width: 26px; height: 26px; flex: none; border-radius: 50%;
  background: var(--gold-soft); color: var(--gold-ink);
  display: flex; align-items: center; justify-content: center; }
.pp-pin svg { width: 14px; height: 14px; }
.pp-cand-nome { font-family: var(--font-serif); font-size: 18px; color: var(--gold-ink);
  line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: var(--peso-titulo); }

/* Carrinho (bloco isCarrinho do protótipo) */
.car-split { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 26px; align-items: start; }
.car-cab { padding: 15px 20px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 12px; }
.car-cab-titulo { font-family: var(--font-serif); font-size: 20px; font-weight: var(--peso-titulo); }
.car-btn-mais { margin-left: auto; height: 30px; padding: 0 12px; font-size: 12.5px; }
.car-linha { --cols: 52px minmax(0,1fr) 120px 110px 34px; gap: 12px; }
.car-foto { width: 52px; height: 52px; border-radius: 9px; background: var(--sunken); overflow: hidden; }
.car-foto img { width: 100%; height: 100%; object-fit: contain; }
.car-nome { font-size: 13.5px; }
.car-qtd .stepper { width: 104px; height: 32px; padding: 0;
  border-color: var(--line); border-radius: 8px; }
.car-qtd .stepper button { width: 30px; min-width: 0; padding: 0; height: 100%;
  color: var(--ink); font-size: 15px; }
.car-total { font-family: var(--font-mono); font-size: 14px; text-align: right; }
.car-btn-remover { width: 30px; height: 30px; }
.car-btn-remover svg { width: 14px; height: 14px; }
.car-btn-remover:hover { color: var(--red); border-color: var(--red); }

.car-aside { position: sticky; top: 18px; display: flex; flex-direction: column; gap: 14px; }
.car-cliente-nome { font-family: var(--font-serif); font-size: 22px; color: var(--gold-ink); margin: 3px 0 2px; font-weight: var(--peso-titulo); }
.car-cliente-doc { margin-bottom: 12px; }

.car-clube { margin-bottom: 2px; border-radius: 13px; overflow: hidden;
  background: var(--ink); color: var(--cream);
  box-shadow: 0 12px 30px -18px rgba(10,17,48,.8); }
.car-clube-topo { padding: 14px 15px 13px; display: flex; align-items: flex-start; gap: 12px; }
.car-clube-rotulo { font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: rgba(247,243,234,.55); }
.car-clube-linha { display: flex; align-items: baseline; gap: 6px; margin-top: 2px; }
.car-clube-saldo { font-family: var(--font-serif); font-size: 30px; line-height: 1; color: var(--gold); font-weight: var(--peso-titulo); }
.car-clube-meta { font-size: 11px; color: rgba(247,243,234,.6); }
.car-clube-barra-wrap { padding: 0 15px 12px; }
.car-clube-trilho { height: 6px; border-radius: 20px; background: rgba(247,243,234,.16); overflow: hidden; }
.car-clube-barra { height: 100%; background: linear-gradient(90deg, #C8922A, #E8B33C); border-radius: 20px; }
.car-clube-pe { display: flex; justify-content: space-between; margin-top: 7px;
  font-size: 10.5px; color: rgba(247,243,234,.62); }
.car-clube-conf { border-top: 1px solid rgba(247,243,234,.12); padding: 10px 15px;
  display: flex; align-items: center; gap: 9px; }
.car-clube-escudo { width: 26px; height: 26px; flex: none; border-radius: 50%;
  background: rgba(111,199,156,.18); color: #6FC79C;
  display: flex; align-items: center; justify-content: center; }
.car-clube-escudo svg { width: 14px; height: 14px; }
.car-clube-conf-txt { min-width: 0; flex: 1; font-size: 11.5px; }

/* troca de pontos por prêmio, dentro do card Clube DFPet do carrinho
   (vendedor/admin) — cada prêmio elegível vira uma linha com "Trocar" */
.car-troca-lista { padding: 0 15px 12px; display: flex; flex-direction: column; gap: 7px; }
.car-troca-item { display: flex; align-items: center; gap: 9px;
  background: rgba(247,243,234,.06); border: 1px solid rgba(247,243,234,.12);
  border-radius: 10px; padding: 7px 8px; }
.car-troca-item-ativo { border-color: var(--gold); background: rgba(232,179,60,.12); }
.car-troca-foto { width: 34px; height: 34px; flex: none; border-radius: 7px;
  background: rgba(247,243,234,.1); overflow: hidden; }
.car-troca-foto img { width: 100%; height: 100%; object-fit: contain; }
.car-troca-info { min-width: 0; flex: 1; }
.car-troca-nome { font-size: 11.5px; line-height: 1.25; color: var(--cream); }
.car-troca-custo { font-family: var(--font-mono); font-size: 10.5px; color: var(--gold); margin-top: 1px; }
.car-troca-btn { flex: none; height: 28px; padding: 0 11px; border: none; border-radius: 7px;
  background: var(--gold); color: var(--ink); font-family: var(--font-sans);
  font-size: 11px; font-weight: 700; cursor: pointer; }
.car-troca-btn:disabled { background: rgba(247,243,234,.14); color: rgba(247,243,234,.4); cursor: default; }
.car-troca-btn-desfazer { background: transparent; color: rgba(247,243,234,.75); border: 1px solid rgba(247,243,234,.3); }

/* item de prêmio resgatado, na lista principal do carrinho */
.car-linha-premio { background: var(--gold-soft); border-radius: 10px; }
.car-premio-selo { font-size: 11px; font-weight: 600; color: var(--gold-ink); }
.car-qtd-fixa { display: flex; align-items: center; font-size: 12.5px; color: var(--muted); }

.car-resumo-linha { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted); }
.car-resumo-risca { height: 1px; background: var(--hair); margin: 9px 0; }
.car-resumo-total { display: flex; justify-content: space-between; align-items: baseline; }
.car-resumo-total span:first-child { font-size: 13.5px; }
.car-resumo-total .num { font-size: 22px; }
.car-btn-fechar { height: 40px; margin-top: 12px; }
.car-btn-voltar { height: 34px; margin-top: 8px; font-size: 13px; }

/* com a barra lateral ocupando ~250px, abaixo disto a coluna do nome do
   produto fica estreita demais — melhor empilhar o resumo embaixo */
@media (max-width: 1250px) {
  .car-split { grid-template-columns: minmax(0,1fr); }
  .car-aside { position: static; flex-direction: row; flex-wrap: wrap; }
  .car-aside > * { flex: 1 1 260px; }
}

@media (max-width: 900px) {
  .car-split { grid-template-columns: minmax(0,1fr); gap: 14px; }
  .car-aside { flex-direction: column; }
  .car-aside { position: static; }
  .car-linha { --cols: 44px minmax(0,1fr) 34px; row-gap: 10px; }
  .car-foto { width: 44px; height: 44px; }
  .car-qtd { grid-column: 2; }
  .car-total { grid-column: 2; text-align: left; }
  .car-cab { padding: 13px 15px; }
}

/* ------------------------------------------------------------------
   Meus pontos: prêmios em cards de produto (mesma ideia do catálogo —
   foto, nome, "preço" em pontos, botão) em vez da lista simples de antes.
   Uma classe só, usada tanto no bloco mobile quanto no desktop (o restante
   da tela é que muda de layout entre os dois, isto aqui não).
   ------------------------------------------------------------------ */
.pt-premios-titulo { font-size: 15px; font-weight: 700; margin: 20px 0 10px; }
.premio-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.premio-grid-desktop { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.premio-card { position: relative; display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); box-shadow: var(--shadow); }
.premio-card.indisponivel { opacity: .6; }
.premio-card.so-vip::before {
  content: "SÓ VIP"; position: absolute; top: 8px; left: 8px; z-index: 2;
  background: var(--ink); color: var(--gold); font-size: 9px; font-weight: 700;
  letter-spacing: .06em; padding: 3px 7px; border-radius: var(--r-pill);
}
.premio-foto-wrap { aspect-ratio: 1/1; background: var(--sunken); border-bottom: 1px solid var(--hair);
  display: flex; align-items: center; justify-content: center; }
.premio-foto-wrap img { width: 100%; height: 100%; object-fit: contain; }
.premio-foto-placeholder { font-size: 26px; opacity: .5; }
.premio-corpo { padding: 10px 11px 11px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.premio-nome { font-family: var(--font-sans); font-size: 12.5px; line-height: 1.3; min-height: 32px; }
.premio-custo { font-family: var(--font-mono); font-size: 15px; font-weight: 600; color: var(--gold-ink); }
.premio-custo span { font-size: 10.5px; font-weight: 400; color: var(--muted); margin-left: 3px; }
.btn-resgatar { margin-top: auto; height: 38px; border: none; border-radius: var(--r-sm);
  background: var(--gold); color: var(--ink); font-family: var(--font-sans);
  font-size: 12.5px; font-weight: 700; cursor: pointer; width: 100%; }
.btn-resgatar:disabled { background: var(--sunken); color: var(--muted); cursor: default; }
.premio-falta { font-size: 10.5px; color: var(--muted); text-align: center; }

/* ------------------------------------------------------------------
   Catálogo publicado, repintado com o design novo.

   O layout é o que já está no ar e o cliente conhece — logos de marca,
   fileiras por categoria, cartão com contador e Adicionar. Aqui só
   trocamos cor, tipografia e cantos pelos tokens do dfpet-ui, pra tela
   não destoar do resto do app. As camadas antigas continuam carregando
   e cuidando do layout e do responsivo; este bloco vem depois e pinta
   por cima.
   ------------------------------------------------------------------ */
.produto-card { border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); box-shadow: var(--shadow); padding: 13px; gap: 9px; }
.produto-card:hover { border-color: var(--gold); }
/* já está no carrinho — contorno no cartão inteiro, pra bater o olho na
   grade toda sem precisar ler número nenhum (ver produto-qtd abaixo) */
.produto-card.no-carrinho { border-color: var(--green); box-shadow: 0 0 0 1px var(--green); }
.produto-card .produto-foto { border-radius: var(--r-sm); background: #FFFFFF;
  aspect-ratio: 4 / 3; object-fit: contain; }
.produto-card .produto-foto-placeholder { background: var(--sunken); color: var(--muted);
  font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase; }
.produto-card .produto-nome { font-family: var(--font-sans); font-size: 13px;
  font-weight: 400; line-height: 1.3; color: var(--ink); min-height: 34px; }
.produto-card .produto-rendimento { align-self: flex-start; font-size: 10.5px; color: var(--green-ink);
  background: var(--green-soft); padding: 2px 7px; border-radius: 6px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.produto-card .produto-rendimento-vazio { visibility: hidden; }
.produto-card .produto-selo-foto { position: absolute; left: 8px; bottom: 8px; z-index: 2; margin: 0; padding: 2px 8px; border-radius: 6px;
  background: var(--red-soft); font-size: 10.5px; line-height: 1.4; box-shadow: 0 1px 2px rgba(10,17,48,.12); }
.produto-card .produto-selo-foto.produto-vip-aviso { background: var(--gold-soft); }     /* guarda o lugar da etiqueta: cartões com e sem rendimento alinhados */
/* nome em no máximo 2 linhas (o nome inteiro fica no "title" e no balão de informações) */
.produto-card .produto-nome { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.produto-card .produto-promo-aviso { font-size: 11px; font-weight: 600; color: var(--red);
  margin: 2px 0 1px; }
.produto-card .produto-preco { display: flex; align-items: baseline; gap: 7px; }
.produto-card .preco-atual { font-family: var(--font-mono); font-size: 16px;
  font-weight: 500; color: var(--ink); }
.produto-card .preco-riscado { font-family: var(--font-sans); font-size: 11.5px;
  color: var(--muted); text-decoration: line-through; }
/* preço no Pix e cartão em até 10x, logo abaixo do preço (pedido do dono, 15/10/2026) */
.produto-card .produto-pagamento { display: flex; flex-direction: column; gap: 1px; margin-top: -4px; line-height: 1.25; }
.produto-card .produto-pix { font-size: 12px; color: var(--green-ink); }
.produto-card .produto-pix b { font-family: var(--font-mono); font-weight: 600; }
.produto-card .produto-cartao { font-size: 11px; color: var(--muted); }
.produto-card .produto-boleto { font-size: 11px; color: var(--muted); }
.produto-card .produto-pix, .produto-card .produto-cartao, .produto-card .produto-boleto { display: inline-flex; align-items: center; gap: 4px; }
.produto-card .produto-pix::before, .produto-card .produto-cartao::before, .produto-card .produto-boleto::before { content: ""; flex: none; width: 13px; height: 13px; background: no-repeat center / contain; }
.produto-card .produto-pix::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg transform='rotate%2845 12 12%29' fill='%2332BCAD'%3E%3Crect x='4.6' y='4.6' width='6.6' height='6.6' rx='1.8'/%3E%3Crect x='12.8' y='4.6' width='6.6' height='6.6' rx='1.8'/%3E%3Crect x='4.6' y='12.8' width='6.6' height='6.6' rx='1.8'/%3E%3Crect x='12.8' y='12.8' width='6.6' height='6.6' rx='1.8'/%3E%3C/g%3E%3C/svg%3E"); }      /* símbolo do Pix */
.produto-card .produto-cartao::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6284' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2.5'/%3E%3Cpath d='M2.5 9.5h19'/%3E%3Cpath d='M6 15h4'/%3E%3C/svg%3E"); }  /* cartão */
.produto-card .produto-boleto::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6284' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 6v12M7 6v12M10.5 6v12M13 6v12M16.5 6v12M20 6v12'/%3E%3C/svg%3E"); }  /* código de barras do boleto */

.produto-card .badge-promo { top: 9px; left: 9px; background: var(--gold-soft);
  color: var(--gold-ink); font-size: 10px; letter-spacing: .08em; font-weight: 600;
  padding: 2px 7px; border-radius: 6px; }
/* info fica no canto oposto ao de compartilhar (canto superior esquerdo),
   na mesma altura — cada botão no seu cantinho, sem disputar espaço */
.produto-card .btn-info { width: 20px; height: 20px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--surface); color: var(--muted);
  font-family: var(--font-serif); font-style: normal; font-size: 11px; font-weight: var(--peso-titulo);
  top: 9px; left: 9px; right: auto; }
.produto-card .btn-info:hover { border-color: var(--gold); color: var(--gold-ink); background: var(--surface); }
.produto-card .btn-compartilhar-produto { width: 20px; height: 20px; right: 9px; left: auto;
  border-radius: 50%; border: 1px solid var(--green-ink); background: var(--green); color: #fff; }
.produto-card .btn-compartilhar-produto:hover { filter: brightness(1.08); background: var(--green); }

/* sem botão "Adicionar": o + inicial ocupa o lugar dele, e vira o
   contador (- qtd +) assim que tem alguma unidade no carrinho — a
   quantidade mostrada aqui É a quantidade no carrinho (ver catalogo.js) */
.produto-qtd { height: 32px; margin-top: auto; }
.btn-add-inicial { width: 100%; height: 100%; border: 1px solid var(--gold); border-radius: 8px;
  background: var(--gold-soft); color: var(--gold-ink); font-family: var(--font-sans);
  font-size: 16px; font-weight: 600; box-shadow: none; }
.btn-add-inicial:hover { background: var(--gold); color: var(--ink); }
.produto-qtd .qtd-stepper { display: none; border: 1px solid var(--green); border-radius: 8px;
  height: 100%; background: var(--green-soft); }
.produto-qtd .qtd-stepper.ativo { display: flex; }
.produto-qtd .qtd-stepper button { background: transparent; color: var(--green-ink);
  font-size: 15px; font-weight: 400; padding: 0; width: 28px; height: 100%; flex: none; }
.produto-qtd .qtd-stepper button:hover { background: rgba(31,168,85,.12); }
.produto-qtd .qtd-valor { flex: 1; text-align: center; font-family: var(--font-mono);
  font-size: 13px; font-weight: 600; color: var(--green-ink); }

/* fileiras por categoria */
.categoria-bloco { scroll-margin-top: 130px; }  /* não fica escondido atrás do cabeçalho/abas fixos ao rolar até aqui (dropdown de Categoria) */
.categoria-titulo { font-family: var(--font-serif); font-size: 20px; font-weight: var(--peso-titulo);
  letter-spacing: 0; text-transform: none; color: var(--ink); }
.categoria-badge { background: var(--gold-soft); color: var(--gold-ink);
  font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: var(--r-pill); }
.btn-compartilhar-categoria { flex: none; width: 22px; height: 22px; padding: 0;
  border-radius: 7px; border: 1px solid var(--green-ink); background: var(--green); color: #fff;
  display: flex; align-items: center; justify-content: center; }
.btn-compartilhar-categoria svg { width: 11px; height: 11px; }
.btn-compartilhar-categoria:hover { filter: brightness(1.08); }
.linha-scroll::-webkit-scrollbar-thumb { background: var(--line); }
.linha-scroll::-webkit-scrollbar-thumb:hover { background: var(--gold); }
.seta-scroll { background: var(--ink); color: var(--cream); box-shadow: var(--shadow); }

/* faixa de filtros */
/* style-desktop.css tem seu próprio ".busca-wrap" genérico (usado nas
   telas de busca-e-filtro do vendedor/admin) que já vem com fundo,
   borda e altura próprias, pensado pra um <input> SEM borda por dentro.
   Aqui o padrão é o oposto — quem tem a borda visível é o <input> (regra
   abaixo), e o wrap só serve de âncora pra lupa/microfone por cima
   (position:relative) — sem esse reset, as duas bordas empilhadas
   pareciam um contorno duplicado. */
.catalogo-filtros .busca-wrap { display: block; background: none; border: none; padding: 0;
  height: auto; max-width: none; min-width: 200px; gap: 0; }
.catalogo-filtros input[type=search],
.catalogo-filtros input[type=text] { height: 34px; padding: 0 13px; border: 1px solid var(--line);
  border-radius: 9px; background: var(--surface); color: var(--ink);
  font-family: var(--font-sans); font-size: 13px; }
.catalogo-filtros input[type=search]:focus,
.catalogo-filtros input[type=text]:focus { border-color: var(--gold); }
.catalogo-filtros .chip { height: 30px; padding: 0 13px; display: inline-flex; align-items: center;
  border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface);
  color: var(--ink); font-family: var(--font-sans); font-size: 12.5px; font-weight: 400; }
.catalogo-filtros .chip:hover { border-color: var(--gold); color: var(--gold-ink); }
.chip-ativo, .chip-ativo:hover { background: var(--sel-bg); border-color: var(--sel-borda);
  color: var(--sel-tx); font-weight: 500; }
.catalogo-filtros > button[type=submit] { height: 34px; padding: 0 15px; border: none;
  background: var(--gold); color: var(--ink); border-radius: 9px;
  font-family: var(--font-sans); font-size: 13px; font-weight: 600; box-shadow: none; }
.dropdown-filtro-painel { border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); box-shadow: var(--shadow); }
.dropdown-filtro-painel .lista-opcoes a { font-size: 13px; color: var(--ink); }
.dropdown-filtro-painel .lista-opcoes a:hover { color: var(--gold-ink); }

@media (max-width: 900px) {
  /* no telefone o campo cresce, como nas outras telas do app */
  .catalogo-filtros input[type=search],
  .catalogo-filtros input[type=text] { height: 46px; border-radius: 13px; font-size: 15px; padding: 0 13px; }
  .catalogo-filtros > button[type=submit] { height: 46px; border-radius: 13px; }
  .catalogo-filtros .chip { height: 38px; padding: 0 14px; font-size: 13px; }
  .categoria-titulo { font-size: 18px; }

  /* style-mobile.css:261 zera o position do .busca-wrap pro campo de busca
     ("nada de position:absolute" — pensado pro padrão de ícone no fluxo
     normal de outras telas). Várias telas usam o padrão antigo, com a
     lupa e/ou o microfone dentro de .busca-icones OU soltos como
     .btn-microfone (position:absolute) — sem um .busca-wrap posicionado
     pra ancorar, eles iam parar longe do campo (ex: o microfone sumia
     ou aparecia em cima de outro cartão qualquer). Devolve a ancoragem
     nos dois casos. */
  .busca-wrap:has(.busca-icones), .busca-wrap:has(.btn-microfone) { position: relative; }

  /* o cartão do telefone é estreito (168px na fileira): devolve os
     tamanhos que o CSS publicado já usava, senão "Adicionar" corta */
  .produto-card { padding: 0; border-radius: 16px; overflow: hidden; }
  /* a foto cola nas bordas (sem padding no cartão), mas o texto/preço/+
     coladinho na borda ficava apertado — respiro só neles, sem mexer no
     tamanho da foto nem do botão. O cartão cresce um pouco pra caber,
     e isso é o que "aumenta o balão" (não tem altura fixa em lugar
     nenhum — ele já cresce sozinho com o conteúdo). */
  .produto-card > .produto-nome,
  .produto-card > .produto-rendimento,
  .produto-card > .produto-promo-aviso,
  .produto-card > .produto-preco,
  .produto-card > .produto-pagamento,
  .produto-card > .produto-saldo,
  .produto-card > .produto-estoques,
  .produto-card > .produto-qtd { margin-left: 11px; margin-right: 11px; }
  .produto-card > .produto-qtd { margin-bottom: 12px; }
  /* style-mobile.css:552 força o wrap da foto em 1:1 (quadrado) — pensado
     pro card antigo, cuja foto também era 1:1. Aqui a foto é 4:3 (repintura
     nova), então o quadrado sobrava ~40px de vão em branco embaixo da
     foto, antes do nome do produto. Casa os dois na mesma proporção. */
  .produto-foto-wrap { aspect-ratio: 4 / 3; }
  .produto-card .produto-nome { font-size: 12px; min-height: 31px; }
  .produto-card .preco-atual { font-size: 14.5px; font-weight: 600; }
  .produto-card .preco-riscado { font-size: 10.5px; }
  .produto-qtd { height: 40px; }
  .btn-add-inicial { border-radius: 10px; font-size: 19px; }
  .produto-qtd .qtd-stepper { border-radius: 10px; }
  .produto-qtd .qtd-stepper button { width: 32px; font-size: 18px; }
}

/* Meu cadastro do cliente (bloco isCliCad do protótipo) */
.cad-cartao { background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; padding: 16px; }
.cad-nome { font-family: var(--font-serif); font-size: 22px; line-height: 1.2; font-weight: var(--peso-titulo); }
.cad-sub { font-size: 12px; color: var(--muted); }
.cad-campos { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.cad-campo { font-size: 11.5px; color: var(--muted); display: flex; flex-direction: column; gap: 5px; }
.cad-campo input { height: 46px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); color: var(--ink); font-family: var(--font-sans);
  font-size: 14px; padding: 0 12px; }
.cad-btn-salvar { width: 100%; height: 48px; margin-top: 12px; border: none;
  background: var(--gold); color: var(--ink); border-radius: 12px;
  font-family: var(--font-sans); font-size: 14px; font-weight: 600; cursor: pointer; }
.cad-vendedor { background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 15px; display: flex; align-items: center; gap: 12px; }
.cad-vendedor-sigla { width: 40px; height: 40px; flex: none; border-radius: 50%;
  background: var(--gold-soft); color: var(--gold-ink); font-size: 13px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; }
.cad-vendedor-info { min-width: 0; flex: 1; }
.cad-vendedor-nome { font-size: 13.5px; }
.cad-vendedor-sub { font-size: 11.5px; color: var(--muted); }
.cad-btn-visita { height: 50px; border: 1px solid var(--gold); background: transparent;
  color: var(--gold-ink); border-radius: 13px; font-family: var(--font-sans);
  font-size: 14.5px; font-weight: 600; cursor: pointer; }
.cad-btn-visita[disabled] { opacity: .45; cursor: not-allowed;
  background: transparent; color: var(--gold-ink); }

/* Reposição com bipagem (bloco isReposicao do protótipo) */
.rp-erro { background: var(--red-soft); border-radius: 14px; padding: 13px 14px; margin: 12px 0; }
.rp-erro[hidden] { display: none; }
.rp-erro-titulo { font-size: 13px; font-weight: 600; color: var(--red); }
.rp-erro-codigo { font-family: var(--font-mono); font-size: 12px; color: var(--red); margin-bottom: 10px; }
.rp-erro-acoes { display: flex; gap: 8px; max-width: 420px; }
.rp-btn-cadastrar { flex: 1; height: 42px; display: flex; align-items: center; justify-content: center;
  border: none; background: var(--ink); color: var(--surface); border-radius: 11px;
  font-family: var(--font-sans); font-size: 13px; font-weight: 500; cursor: pointer; text-decoration: none; }
.rp-btn-ignorar { width: 96px; height: 42px; flex: none; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); border-radius: 11px;
  font-family: var(--font-sans); font-size: 13px; cursor: pointer; }

.rp-lista { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.rp-cartao { background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; padding: 14px 15px; }
.rp-cartao-pronto { opacity: .6; }
.rp-cartao-topo { display: flex; align-items: center; gap: 10px; }
.rp-cartao-info { min-width: 0; flex: 1; }
.rp-cartao-nome { font-size: 13.5px; }
.rp-cartao-codigo { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.rp-cartao-conta { flex: none; font-family: var(--font-mono); font-size: 14px; font-weight: 600; }
.rp-cartao-pronto .rp-cartao-conta { color: var(--green-ink); }
.rp-cartao-trilho { height: 7px; border-radius: 20px; background: var(--sunken);
  overflow: hidden; margin-top: 10px; }
.rp-cartao-barra { height: 100%; background: var(--green); border-radius: 20px; }

/* ---------- lista de contagem (static/js/contagem-lista.js) ----------
   Separar / receber / contar com ou sem leitor: dock de código + câmera +
   busca, cartões com +/− e quantidade digitável, progresso e rodapé fixo.
   Reaproveita .rp-cartao; o que é próprio fica em .cl-*. */
.cl-topo { position: sticky; top: 0; z-index: 4; background: var(--bg); padding: 10px 0 8px; display: flex; flex-direction: column; gap: 8px; }
.cl-modo { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
.cl-busca-wrap { position: relative; min-width: 0; }
.cl-busca-wrap svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--muted); pointer-events: none; }
.cl-busca { width: 100%; height: 46px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); padding: 0 12px 0 38px; font: inherit; font-size: 14px; }
.cl-busca:focus { outline: none; border-color: var(--gold); }
.cl-camera { width: 46px; height: 46px; padding: 0; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.cl-camera svg { width: 20px; height: 20px; flex: none; }  /* flex:none — o padding global de button encolhia o ícone */
.cl-progresso { height: 6px; border-radius: 6px; background: var(--hair); overflow: hidden; }
.cl-progresso i { display: block; height: 100%; width: 0; background: var(--green); transition: width .2s; }
.cl-dica { display: flex; gap: 9px; align-items: flex-start; padding: 9px 12px; border-radius: 12px; background: var(--gold-soft); color: var(--gold-ink); font-size: 12.5px; line-height: 1.45; }
.cl-dica svg { width: 17px; height: 17px; flex: none; margin-top: 1px; }
.cl-lista { display: flex; flex-direction: column; gap: 8px; padding-bottom: 170px; }
.cl-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.cl-item.cl-feito { border-color: var(--green); background: #F7FBF8; }
.cl-item.cl-passou { border-color: #E8733C; }
.cl-foto { width: 44px; height: 44px; border-radius: 12px; flex: none; object-fit: cover; background: var(--gold-soft); color: var(--gold-ink); display: flex; align-items: center; justify-content: center; font-family: var(--font-serif); font-size: 18px; overflow: hidden; border: 1px solid var(--hair); font-weight: var(--peso-titulo); }
.cl-info { flex: 1; min-width: 0; }
.cl-nome { font-size: 13.5px; font-weight: 500; line-height: 1.3; }
.cl-alvo { font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-top: 3px; }
.cl-alvo b { color: var(--ink); }
.cl-estado { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.cl-stepper { display: flex; align-items: center; background: var(--sunken); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.cl-stepper button { width: 44px; height: 44px; border: none; background: transparent; color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; font-family: var(--font-sans); }
.cl-stepper button:active { background: var(--gold-soft); }
.cl-stepper input { width: 48px; height: 44px; border: none; border-left: 1px solid var(--line); border-right: 1px solid var(--line); text-align: center; font-family: var(--font-mono); font-size: 16px; font-weight: 600; background: var(--surface); color: var(--ink); -moz-appearance: textfield; }
.cl-stepper input::-webkit-inner-spin-button, .cl-stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.cl-acao { height: 30px; padding: 0 10px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); font-family: var(--font-sans); font-size: 11.5px; font-weight: 600; color: var(--gold-ink); cursor: pointer; }
.cl-acao.cl-acao-neutra { color: var(--muted); }
.cl-vazio { padding: 24px 14px; text-align: center; color: var(--muted); font-size: 13px; }
.cl-rodape { position: fixed; left: 0; right: 0; bottom: 0; z-index: 46; background: var(--surface); border-top: 1px solid var(--line); padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 10px; }
.cl-rodape-status { flex: 1; min-width: 0; }
.cl-rodape-status b { display: block; font-family: var(--font-mono); font-size: 15px; }
.cl-rodape-status span { font-size: 11.5px; color: var(--muted); }
.cl-rodape .btn { flex: none; min-width: 150px; height: 46px; }
.cl-toast { position: fixed; left: 50%; bottom: 96px; transform: translate(-50%, 10px); background: var(--ink); color: var(--cream); padding: 10px 14px; border-radius: 12px; font-size: 12.5px; opacity: 0; pointer-events: none; transition: .18s; z-index: 60; max-width: min(480px, calc(100% - 32px)); text-align: center; line-height: 1.4; }
.cl-toast.on { opacity: 1; transform: translate(-50%, 0); }
.cl-toast.erro { background: var(--red); }
/* no celular a barra inferior do app (66px) fica embaixo; o rodapé da
   contagem sobe pra cima dela (precisa vir DEPOIS da regra base) */
@media (max-width: 900px) {
  .cl-rodape { bottom: var(--barra-h, 66px); padding-bottom: 12px; }   /* o espaço dos botões do sistema já está na barra de baixo */
  .cl-toast { bottom: calc(var(--barra-h, 66px) + 124px); }
}
@media (min-width: 901px) {
  .cl-rodape { left: auto; right: auto; width: min(720px, 100%); position: sticky; border: 1px solid var(--line); border-radius: 14px; margin-top: 12px; }
  .cl-lista { padding-bottom: 12px; }
}

/* ---------- "Meu estoque" do vendedor (templates/vendedor/estoque.html) ---------- */
.me-sub { margin: -10px 0 14px; color: var(--muted); font-size: 13px; }
.me-resumo { background: var(--ink); color: var(--cream); border-radius: 16px; padding: 16px 18px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 12px 0 14px; position: relative; overflow: hidden; }
.me-resumo::after { content: ""; position: absolute; right: -30px; top: -30px; width: 120px; height: 120px; border-radius: 50%; background: rgba(232,179,60,.14); }
.me-resumo .n { font-family: var(--font-mono); font-size: 26px; font-weight: 600; color: var(--gold); line-height: 1; }
.me-resumo .l { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(247,243,234,.7); margin-top: 6px; }
.me-lista { display: flex; flex-direction: column; gap: 10px; max-width: 720px; }
.me-card { display: flex; align-items: center; gap: 14px; padding: 15px 16px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); color: inherit; text-decoration: none; position: relative; }
a.me-card:hover { text-decoration: none; border-color: var(--gold); }
.me-card.me-inativo { opacity: .65; box-shadow: none; }
.me-ico { width: 50px; height: 50px; border-radius: 15px; display: flex; align-items: center; justify-content: center; flex: none;
  background: var(--gold-soft); color: var(--gold-ink); }
.me-ico.verde { background: var(--green-soft); color: var(--green-ink); }
.me-ico svg { width: 23px; height: 23px; }
.me-t { display: block; font-size: 15.5px; font-weight: 600; }
.me-d { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; line-height: 1.4; }
.me-seta { margin-left: auto; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: var(--cream);
  display: flex; align-items: center; justify-content: center; }
.me-seta svg { width: 15px; height: 15px; }
.me-nota { margin: 14px 0 0; font-size: 12px; color: var(--muted); }

/* ---------- painel único do Estoque (admin): abas Saldos / Movimentar ---------- */
.sd-filtros { display: flex; gap: 8px; align-items: center; margin: 4px 0 10px; }
.sd-busca { flex: 1; min-width: 0; }
.sd-busca input { width: 100%; height: 44px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); padding: 0 14px; font: inherit; font-size: 14px; }
.sd-busca input:focus { outline: none; border-color: var(--gold); }
.segmentos { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.segmentos::-webkit-scrollbar { display: none; }
.segmentos .seg, button.seg { flex: none; height: 34px; padding: 0 13px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); color: var(--muted); font-family: var(--font-sans); font-size: 12.5px; font-weight: 500; text-decoration: none; display: inline-flex; align-items: center; cursor: pointer; white-space: nowrap; }
.segmentos .seg.on { background: var(--sel-bg); border-color: var(--sel-borda); color: var(--sel-tx); font-weight: 600; }
.sd-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 0 8px; flex-wrap: wrap; }
.sd-sync { height: 34px; font-size: 12.5px; }
.sd-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.sd-deps { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 5px; }
.sd-cod { font-family: var(--font-mono); font-size: 11px; color: var(--muted); align-self: center; }
.sd-dep { font-family: var(--font-mono); font-size: 11px; border: 1px solid var(--line); border-radius: var(--r-pill); padding: 3px 8px; background: var(--sunken); color: var(--muted); }
.sd-dep b { color: var(--ink); font-weight: 600; }
.sd-dep-on { border-color: var(--gold); background: var(--gold-soft); color: var(--gold-ink); }
.sd-saldo { flex: none; text-align: right; font-family: var(--font-mono); font-size: 20px; font-weight: 600; line-height: 1; }
.sd-saldo small { display: block; font-family: var(--font-sans); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 500; margin-top: 4px; }
.mv-nova { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 4px 0 12px; }
.mv-nova .seg { height: 34px; padding: 0 13px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 12.5px; font-weight: 500; display: inline-flex; align-items: center; text-decoration: none; }
.mv-nova .seg:hover { border-color: var(--gold); text-decoration: none; }
.mv-fila { margin-bottom: 12px; }
.mv-fila .cartao-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--hair); }
.mv-linha { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--hair); color: inherit; text-decoration: none; }
.mv-linha:last-child { border-bottom: none; }
.mv-linha:hover { background: var(--sunken); text-decoration: none; }
.mv-status { margin: 4px 0 10px; }
.tdet-cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tdet-cab h1 { margin: 0; }
.tdet-cab .chip { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; padding: 3px 9px; border-radius: var(--r-pill); border: none; height: auto; }
.tdet-rota { margin: 6px 0 12px; font-size: 15px; }
.tdet-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px 18px; margin: 0 0 14px; }
.tdet-meta dt { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.tdet-meta dd { margin: 2px 0 0; font-size: 14px; }
.tdet-tiny { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.tdet-tiny-linha { display: flex; align-items: baseline; gap: 8px; font-size: 14px; }
.tdet-tiny-sel { display: inline-flex; width: 20px; height: 20px; border-radius: 50%; align-items: center; justify-content: center; flex: none; font-size: 12px; font-weight: 700; background: var(--sunken); color: var(--muted); }
.tdet-tiny-ok .tdet-tiny-sel { background: var(--green-soft); color: var(--green-ink); }
.tdet-tiny-erro .tdet-tiny-sel { background: var(--red-soft); color: var(--red); }
.tdet-tiny-erro-linha, .tdet-tiny-erro { margin: 0; }
.mv-tiny-ok { background: var(--green-soft); color: var(--green-ink); }
.mv-tiny-erro { background: var(--red-soft); color: var(--red); }
.tdet-acoes { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.tdet-tabela { overflow-x: auto; }
.tdet-lista th, .tdet-lista td { padding: 6px 10px; font-size: 13px; line-height: 1.25; }
.tdet-lista th { font-size: 10px; }
.tdet-lista .tdet-nome { min-width: 220px; }
.tdet-tabela .num { text-align: right; white-space: nowrap; }
.tdet-tabela tfoot th { background: var(--sunken); }
.tdet-cod { font-family: var(--font-mono); font-size: 12px; white-space: nowrap; }
.tdet-rodape { margin-top: 10px; }
@media print {
  body[data-page="estoque.transf_detalhe"] .sidebar, body[data-page="estoque.transf_detalhe"] .topo-cliente, body[data-page="estoque.transf_detalhe"] .barra-inferior,
  body[data-page="estoque.transf_detalhe"] .site-footer, body[data-page="estoque.transf_detalhe"] .sidebar-backdrop, body[data-page="estoque.transf_detalhe"] .folha,
  body[data-page="estoque.transf_detalhe"] .folha-fundo, body[data-page="estoque.transf_detalhe"] .pull-refresh-indicador, body[data-page="estoque.transf_detalhe"] .tdet-acoes,
  body[data-page="estoque.transf_detalhe"] .tdet-voltar, body[data-page="estoque.transf_detalhe"] .secao-tela { display: none !important; }
  body[data-page="estoque.transf_detalhe"] .main-area, body[data-page="estoque.transf_detalhe"] .container { margin: 0 !important; padding: 0 !important; width: 100% !important; max-width: none !important; }
  body[data-page="estoque.transf_detalhe"] { background: #fff; }
  body[data-page="estoque.transf_detalhe"] .tabela-nova { box-shadow: none; }
  body[data-page="estoque.transf_detalhe"] tr { break-inside: avoid; }
  body[data-page="estoque.transf_detalhe"] thead { display: table-header-group; }
  body[data-page="estoque.transf_detalhe"] tfoot { display: table-row-group; }
  body[data-page="estoque.transf_detalhe"] h1 { font-size: 16px; margin: 0; }
  body[data-page="estoque.transf_detalhe"] .tdet-rota { margin: 2px 0 6px; font-size: 12px; }
  body[data-page="estoque.transf_detalhe"] .tdet-meta { gap: 2px 14px; margin: 0 0 6px; }
  body[data-page="estoque.transf_detalhe"] .tdet-meta dd { font-size: 11px; }
  body[data-page="estoque.transf_detalhe"] .tdet-tiny { padding: 4px 8px; margin: 0 0 6px; gap: 2px; border-radius: 4px; }
  body[data-page="estoque.transf_detalhe"] .tdet-tiny-linha { font-size: 11px; }
  body[data-page="estoque.transf_detalhe"] .tdet-tiny > .apoio { display: none; }
  body[data-page="estoque.transf_detalhe"] .tdet-lista th, body[data-page="estoque.transf_detalhe"] .tdet-lista td { padding: 2px 6px; font-size: 10.5px; line-height: 1.2; border-bottom: 1px solid #ccc; }
  body[data-page="estoque.transf_detalhe"] .tdet-lista .tdet-nome { min-width: 0; white-space: nowrap; }
  body[data-page="estoque.transf_detalhe"] .tdet-tabela { overflow: visible; }
  body[data-page="estoque.transf_detalhe"] .tdet-rodape { font-size: 9px; margin-top: 4px; }
}
@page { margin: 8mm; }
.mv-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; flex-wrap: wrap; }
.mv-card .cl-info { flex: 1 1 220px; }
.mv-seta { color: var(--muted); font-weight: 400; }
.mv-acao { height: 36px; padding: 0 14px; font-size: 13px; flex: none; }
.mv-atribuir { margin-top: 6px; }
.mv-select { padding: 0 10px; width: 100%; }
.mv-chip-separar { background: var(--gold-soft); color: var(--gold-ink); }
.mv-chip-transito { background: #FBE9DD; color: #A84C18; }
.mv-chip-recebida { background: var(--green-soft); color: var(--green-ink); }
.mv-chip-divergencia { background: var(--red-soft); color: var(--red); }
.rs-titulo { margin-top: 1.6rem; }
.pn-avulsa { margin-top: 14px; }
.pn-avulsa .cartao-cab { padding: 10px 14px; border-bottom: 1px solid var(--hair); }
.pn-avulsa-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 12px 14px; }
.pn-avulsa-form select, .pn-avulsa-form input { height: 38px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); padding: 0 10px; font: inherit; font-size: 13px; }
.pn-avulsa-form input { flex: 1 1 180px; min-width: 0; }
.pn-avulsa-form .btn { height: 38px; }
.abas-mob .aba-mob { white-space: nowrap; }  /* "Entradas · 1" não quebra em duas linhas */
.t-encomendas-admin { --cols: minmax(140px,1fr) minmax(120px,1.2fr) 90px 160px 240px; }
.mv-card .chip { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; padding: 3px 9px; border-radius: var(--r-pill); white-space: nowrap; border: none; height: auto; }

.scan-icone { flex: none; display: none; color: var(--gold-ink); }
.scan-icone svg { width: 19px; height: 19px; display: block; }

@media (max-width: 900px) {
  /* o campo de bipar vira a caixa de borda dourada do protótipo */
  .scan-dock .scan-row { display: block; }
  .scan-dock .scan-label { display: none; }
  .scan-input-row { display: flex; align-items: center; gap: 10px;
    background: var(--surface); border: 1px solid var(--gold); border-radius: 14px;
    padding: 0 13px; height: 52px; }
  .scan-icone { display: block; }
  .scan-input-row #scanInput { flex: 1; min-width: 0; height: 100%; border: none; outline: none;
    background: transparent; color: var(--ink); font-family: var(--font-mono); font-size: 14px; padding: 0; }
  .qty-col { margin-top: 10px; }
  .rp-btn-transferir { width: 100%; height: 52px; border: none; background: var(--green);
    color: #fff; border-radius: 13px; font-family: var(--font-sans);
    font-size: 15px; font-weight: 600; cursor: pointer; }
}

/* Folha "Mais" em lista (bloco isMais do protótipo) */
.mais-lista { display: flex; flex-direction: column; gap: 10px; }
.mais-item { height: 60px; display: flex; align-items: center; gap: 13px; padding: 0 15px;
  border: 1px solid var(--line); background: var(--surface); border-radius: 16px;
  font-family: var(--font-sans); font-size: 15px; color: var(--ink); cursor: pointer;
  text-align: left; text-decoration: none; width: 100%; }
.mais-item:hover, .mais-item:active { background: var(--sunken); text-decoration: none; }
.mais-sigla { width: 34px; height: 34px; flex: none; border-radius: 11px;
  background: var(--gold-soft); color: var(--gold-ink); display: flex; align-items: center;
  justify-content: center; font-family: var(--font-serif); font-size: 15px; font-weight: var(--peso-titulo); }
.mais-nome { min-width: 0; flex: 1; }
.mais-contador { flex: none; font-family: var(--font-mono); font-size: 12px; color: var(--gold-ink); }
.mais-seta { width: 17px; height: 17px; flex: none; color: var(--muted); }
.mais-item-sair { color: var(--red); }
.mais-item-sair .mais-sigla { background: var(--red-soft); color: var(--red); }
.mais-item[disabled] { opacity: .45; cursor: not-allowed; background: var(--surface); }
.mais-sigla-erro { background: var(--red-soft); color: var(--red); font-family: var(--font-mono);
  font-size: 14px; font-weight: 600; }
.mais-detalhe { display: block; font-size: 11.5px; color: var(--muted); }
/* a linha de alerta do painel é a mesma linha, com duas alturas de texto */
.mais-item-alerta { height: auto; min-height: 60px; padding-top: 12px; padding-bottom: 12px; }
.mais-item-alerta .mais-nome { font-size: 13.5px; }

/* grupo dentro do Mais (Estoque / Financeiro / Vendas): mesma linha de
   sempre, só que é um <button> que abre/fecha a sublista em vez de
   navegar. Pode ter mais de um grupo aberto ao mesmo tempo — a folha
   rola, não tem o aperto de espaço do menu lateral do computador. */
.mais-grupo .mais-sigla { background: var(--ink); color: var(--gold); }
.mais-grupo .mais-nome { font-weight: 600; }
.mais-grupo .chev { width: 15px; height: 15px; flex: none; color: var(--muted); transition: transform .15s ease; }
.mais-grupo[aria-expanded="false"] .chev { transform: rotate(-90deg); }
.mais-grupo[aria-expanded="false"] + .mais-sublista { display: none; }

.mais-sublista { display: flex; flex-direction: column; gap: 8px;
  padding: 2px 0 2px 20px; margin: 8px 0 0 16px; border-left: 1.5px solid var(--line); }
.mais-sublista .mais-item { height: 50px; }
.mais-sublista .mais-sigla { width: 26px; height: 26px; border-radius: 9px; font-size: 12px; }
.mais-sublista .mais-nome { font-size: 13.5px; }

/* Loja do cliente (bloco isLoja do protótipo) — valem nos dois tamanhos */
.loja-campanha { border-radius: 18px; padding: 16px 17px;
  background: linear-gradient(130deg, #0A1130, #2A2F5E); color: var(--cream); }
.loja-campanha-rotulo { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.loja-campanha-nome { font-family: var(--font-serif); font-size: 26px; line-height: 1.15; margin: 5px 0 6px; font-weight: var(--peso-titulo); }
.loja-campanha-regra { font-size: 12.5px; color: rgba(247,243,234,.7); }

.loja-atalhos { display: flex; gap: 8px; max-width: 420px; }
.loja-form-visita { flex: 1; display: flex; }
.cad-form-visita { display: flex; }
.cad-form-visita .cad-btn-visita { flex: 1; }
.loja-btn-carrinho, .loja-btn-visita { flex: 1; height: 46px; display: flex; align-items: center;
  justify-content: center; gap: 8px; border-radius: 12px; font-family: var(--font-sans);
  font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; }
.loja-btn-carrinho { border: none; background: var(--gold); color: var(--ink); }
.loja-btn-carrinho svg { width: 16px; height: 16px; }
.loja-btn-visita { border: 1px solid var(--gold); background: transparent; color: var(--gold-ink); }

/* "Comprar de novo" (bloco isLoja do protótipo) */
.loja-recompra { margin-bottom: 18px; }
.loja-recompra-titulo { font-family: var(--font-serif); font-size: 20px; margin: 2px 2px 9px; font-weight: var(--peso-titulo); }
.loja-recompra-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px,1fr)); gap: 10px; }
.rc-linha { background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 13px 14px; display: flex; gap: 12px; align-items: center; }
.rc-marca { width: 48px; height: 48px; flex: none; border-radius: 12px; background: #fff;
  border: 1px solid var(--hair); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-size: 12px; color: var(--ink); font-weight: var(--peso-titulo); }
.rc-info { min-width: 0; flex: 1; }
.rc-nome { font-size: 13px; line-height: 1.3; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rc-meta { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.rc-btn { width: 46px; height: 46px; flex: none; border: none; background: var(--gold);
  color: var(--ink); border-radius: 12px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; }
.rc-btn svg { width: 18px; height: 18px; }

.loja-clube { background: var(--ink); color: var(--cream); border-radius: 18px;
  padding: 16px; margin-top: 18px; max-width: 420px; }
.loja-clube-rotulo { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: rgba(247,243,234,.55); }
.loja-clube-linha { display: flex; align-items: baseline; gap: 7px; margin: 3px 0 10px; }
.loja-clube-saldo { font-family: var(--font-serif); font-size: 32px; line-height: 1; color: var(--gold); font-weight: var(--peso-titulo); }
.loja-clube-meta { font-size: 12px; color: rgba(247,243,234,.6); }
.loja-clube-trilho { height: 7px; border-radius: 20px; background: rgba(247,243,234,.16); overflow: hidden; }
.loja-clube-barra { height: 100%; background: linear-gradient(90deg, #C8922A, #E8B33C); border-radius: 20px; }
.loja-clube-link { display: inline-block; margin-top: 9px; font-size: 11.5px; color: rgba(247,243,234,.75); }

.secao-meta { margin: 26px 0 14px; }
.t-metas-produto { --cols: minmax(0,1fr) 110px 150px 130px; }
.t-mais-vendidos { --cols: minmax(0,1fr) 64px 96px; }
/* Pedidos do admin no computador (protótipo de 19/10/2026): situação com nome, mensagem e pagamento em colunas próprias e o botão no fim */
.t-pedidos-adm { --cols: 26px 54px minmax(120px,1.4fr) 104px 82px minmax(100px,.8fr) 98px 122px 118px 76px; }
/* abaixo de ~1320px de tela o menu lateral não deixa caber tudo: Vendedor e Data saem primeiro (como no resto do app abaixo de 1180px) */
@media (max-width: 1320px) { .t-pedidos-adm .col-secundaria { display: none !important; } .t-pedidos-adm { --cols: 26px 56px minmax(130px,1.4fr) minmax(104px,.8fr) 100px 124px 118px 80px; } }
.t-pedidos-adm .ped-col-msg { padding-left: 18px; }             /* respiro entre o valor e a mensagem (pedido do dono) */
.t-pedidos-adm .celula-faturar { justify-content: flex-end; }
.ped-sit-cel { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.ped-sit { display: flex; align-items: center; gap: 7px; max-width: 100%; font-weight: 600; font-size: 13px; }
.ped-sit-txt { min-width: 0; line-height: 1.25; }
/* o nome do cliente cabe em até duas linhas (antes cortava em "PET SHOP EXE...") */
.t-pedidos-adm .celula-texto [data-cortavel] { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; line-height: 1.3; }
.ped-sit .dot { flex: none; }
.ped-sit-cel .selos-ped { padding-left: 15px; }
.ped-and { padding-left: 15px; font-size: 11.5px; color: var(--muted); line-height: 1.2; }
.ped-and-falta { color: var(--gold-ink); font-weight: 700; }
.ped-and-linha { color: var(--ink); font-weight: 600; }
.ped-vend { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ped-st { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; white-space: nowrap; line-height: 1.2; cursor: help; }
.ped-st > i { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 10.5px; font-weight: 800; flex: none; }
.ped-st small { display: block; font-weight: 600; color: var(--muted); font-size: 11.5px; }
.ped-st-ok { color: var(--green-ink); } .ped-st-ok > i { background: var(--green-soft); color: var(--green-ink); }
.ped-st-aviso { color: var(--gold-ink); } .ped-st-aviso > i { background: var(--gold-soft); color: var(--gold-ink); }
.ped-st-erro { color: var(--red); } .ped-st-erro > i { background: var(--red-soft); color: var(--red); }
.ped-st-mut { color: var(--muted); } .ped-st-mut > i { background: var(--sunken); color: var(--muted); border: 1px solid var(--line); }
.ped-st-nada { color: var(--muted); opacity: .55; font-weight: 600; cursor: default; }
/* Orçamentos — mesma tabela de Pedidos, com validade no lugar da situação
   do Tiny e a coluna de ações (fechar, PDF, link, excluir) */
.t-orcamentos     { --cols: 84px minmax(140px,1.8fr) 70px 58px 104px 118px 196px; }
.t-orcamentos-adm { --cols: 84px minmax(140px,1.6fr) 150px 70px 58px 104px 118px 196px; }
@media (max-width: 1180px) {
  .t-orcamentos     { --cols: 72px minmax(120px,1fr) 52px 110px 196px; }
  .t-orcamentos-adm { --cols: 72px minmax(120px,1fr) 52px 110px 196px; }
}
.cmp-cartao .cartao-corpo { display: flex; flex-direction: column; gap: 4px; }
.cmp-topo { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.cmp-nome { font-family: var(--font-serif); font-size: 20px; line-height: 1.2; font-weight: var(--peso-titulo); }
.cmp-periodo { margin-bottom: 4px; }
.cmp-regra { font-size: 12.5px; line-height: 1.5; margin: 0 0 10px; }
.cmp-acoes { display: flex; gap: 8px; align-items: center; margin-top: auto; }
.cf-form { display: flex; flex-direction: column; gap: 16px; max-width: 820px; }

.t-compras { --cols: minmax(150px,1fr) 150px 104px 70px 80px 84px 112px; }
.cp-cobertura { flex-direction: row; align-items: center; gap: 7px; }
.cp-cobertura input { height: 34px; width: 70px; }
@media (max-width: 1180px) { .cmp-cartao .cartao-corpo { display: flex; flex-direction: column; gap: 4px; }
.cmp-topo { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.cmp-nome { font-family: var(--font-serif); font-size: 20px; line-height: 1.2; font-weight: var(--peso-titulo); }
.cmp-periodo { margin-bottom: 4px; }
.cmp-regra { font-size: 12.5px; line-height: 1.5; margin: 0 0 10px; }
.cmp-acoes { display: flex; gap: 8px; align-items: center; margin-top: auto; }
.cf-form { display: flex; flex-direction: column; gap: 16px; max-width: 820px; }

.t-compras { --cols: minmax(120px,1fr) 104px 70px 84px 112px; } }
/* o :disabled do navegador tem mais peso que a classe — por isso o [disabled] */
.btn[disabled], .btn-acao[disabled], .loja-btn-visita[disabled] { opacity: .45; cursor: not-allowed; }
.loja-btn-visita[disabled] { background: transparent; color: var(--gold-ink); }

/* balão "Seu carrinho" do Catálogo — fechado por padrão (não ocupa
   espaço da página), abre flutuando sob o ícone de carrinho do topo ao
   clicar (ver static/js/catalogo.js), fecha ao clicar de novo ou fora.
   position/top/right reais são calculados em JS a partir do botão do
   carrinho, porque a altura do topo muda entre visitante e cliente
   logado (este último tem a faixa de abas embaixo). */
.catalogo-aside { position: fixed; z-index: 60; width: 320px; max-width: calc(100vw - 24px);
  max-height: calc(100vh - 90px); overflow-y: auto; box-shadow: var(--shadow-lg, 0 16px 36px rgba(10,17,48,.2)); }
.catalogo-aside[hidden] { display: none; }

/* aviso pro visitante sem login, no topo do Catálogo — o preço/prazo
   fica só no que é real (conta na hora), nada de prometer frete grátis
   ou prazo que a gente não tem configurado de verdade */
.compre-sem-cadastro { background: var(--gold-soft); border: 1px solid var(--gold); border-radius: var(--r-lg);
  padding: 14px 18px; margin-bottom: 18px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.compre-sem-cadastro-titulo { font-family: var(--font-serif); font-size: 19px; color: var(--gold-ink); font-weight: var(--peso-titulo); }
.compre-sem-cadastro-desc { font-size: 12.5px; color: var(--gold-ink); margin-top: 2px; }
.compre-sem-cadastro a { margin-left: auto; font-size: 12.5px; font-weight: 500; color: var(--gold-ink); }
@media (max-width: 900px) {
  .compre-sem-cadastro { padding: 13px 15px; }
  .compre-sem-cadastro a { margin-left: 0; }
}

/* faixa de campanha ativa, no topo do Catálogo do cliente — só
   informativa por enquanto (campanhas.avaliar só se aplica a pedido
   feito por vendedor/admin, não ao check-out do próprio cliente) */
.campanha-faixa-catalogo { background: linear-gradient(135deg, #12174A, var(--ink) 70%); color: var(--cream);
  border-radius: var(--r-lg); padding: 18px 22px; margin-bottom: 20px; }
.campanha-faixa-eyebrow { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
.campanha-faixa-titulo { font-family: var(--font-serif); font-size: 21px; font-weight: var(--peso-titulo); }
.campanha-faixa-desc { font-size: 12.5px; color: rgba(247,243,234,.68); margin-top: 5px; }
/* mesma faixa, quando o admin envia uma arte pronta em /admin/campanhas:
   a imagem ocupa o lugar do texto (proporção da arte: 1200x260) */
.campanha-faixa-arte { border-radius: var(--r-lg); overflow: hidden; }
.campanha-faixa-arte img { display: block; width: 100%; height: auto; }
/* vitrine de campanhas no topo do catálogo. Com uma campanha é uma faixa
   parada; com mais de uma o trilho vira carrossel (campanha-vitrine.js).
   O deslize é scroll-snap, então arrastar com o dedo já funciona sozinho
   e não precisa de media query pro celular. */
.campanha-vitrine { position: relative; margin-bottom: 20px; }
.campanha-trilho { display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; scrollbar-width: none; }
.campanha-trilho::-webkit-scrollbar { display: none; }
/* min-width:0 é obrigatório: item flex tem min-width:auto por padrão e
   cresce além do flex-basis pra caber o conteúdo — com o texto sem quebra
   da barra de ação, o slide ficava mais largo que a tela e empurrava o
   catálogo inteiro pro lado no celular */
.campanha-trilho > .campanha-bloco { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; }
/* controles embaixo, na mesma linha: ‹ • • • › — discretos, fora da arte */
.campanha-pontos { display: flex; align-items: center; justify-content: center; gap: 7px; padding-top: 10px; }
.campanha-ponto { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%;
  background: var(--line); cursor: pointer; }
.campanha-ponto-ativo { background: var(--gold); }
.campanha-seta { width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--muted); cursor: pointer; opacity: .6;
  display: flex; align-items: center; justify-content: center; }
.campanha-seta:hover { opacity: 1; color: var(--gold-ink); background: var(--sunken); }
.campanha-seta svg { width: 15px; height: 15px; display: block; }
.campanha-seta:first-child { margin-right: 4px; }
.campanha-seta:last-child { margin-left: 4px; }

/* bloco da campanha no catálogo: a faixa (arte ou texto) e, só pra
   vendedor/admin, a barra que joga o kit inteiro no pedido */
/* todos os slides com a MESMA altura: o item flex já estica até a altura
   do trilho, mas por dentro a faixa parava no tamanho do texto e sobrava
   um vão embaixo — cada banner parecia de um tamanho. Com a coluna e o
   flex:1 a faixa absorve a diferença e a barra de ação fica sempre
   colada embaixo. */
.campanha-bloco { margin-bottom: 0; display: flex; flex-direction: column; }
.campanha-bloco > .campanha-faixa-catalogo,
.campanha-bloco > .campanha-faixa-arte { flex: 1 1 auto; }
.campanha-bloco > .campanha-faixa-arte img { height: 100%; object-fit: cover; }
.campanha-bloco .campanha-faixa-catalogo { margin-bottom: 0; }
.campanha-bloco-acoes { display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line);
  border-top: 0; border-radius: 0 0 var(--r-lg) var(--r-lg); padding: 14px 18px; }
.campanha-bloco-preco { display: flex; flex-direction: column; gap: 2px; }
.campanha-bloco-num { font-size: 22px; font-weight: 600; }
.campanha-bloco-beneficio { font-size: 13.5px; font-weight: 500; }
.campanha-bloco-preco s { margin-left: 8px; }
/* com a barra de ação embaixo, a faixa perde o arredondado de baixo pra
   as duas virarem uma peça só (se o :has não pegar, só fica arredondado
   dos dois lados — não quebra nada) */
.campanha-bloco:has(.campanha-bloco-acoes) .campanha-faixa-arte,
.campanha-bloco:has(.campanha-bloco-acoes) .campanha-faixa-catalogo {
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}

/* ============================================================
   Topo do cliente (partials/_topo_cliente.html) — substitui a barra
   lateral só pra esse papel. No celular fica só o cabeçalho (a
   navegação continua pela barra debaixo de sempre); as abas só
   aparecem no computador.
   ============================================================ */
.topo-cliente { background: var(--ink); color: var(--cream); display: flex; align-items: center;
  gap: 18px; padding: 0 28px; height: 64px; position: sticky; top: 0; z-index: 45; }
.tc-marca { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.tc-selo { height: 32px; width: auto; object-fit: contain; flex: none; }
.tc-direita { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.tc-pontos { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: rgba(247,243,234,.7); white-space: nowrap; }
.tc-pontos strong { font-family: var(--font-mono); font-size: 15px; font-weight: 500; color: var(--gold); }
.tc-pontos svg { width: 16px; height: 16px; color: var(--gold); flex: none; }
.tc-link-entrar { font-size: 13px; color: rgba(247,243,234,.75); text-decoration: none; white-space: nowrap; }
.tc-link-entrar:hover { color: var(--cream); }
.tc-btn-carrinho { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px;
  background: var(--gold); color: var(--ink); border-radius: var(--r-sm); font-weight: 600; font-size: 13px;
  text-decoration: none; white-space: nowrap; }
.tc-btn-carrinho svg { width: 16px; height: 16px; }
.tc-form-visita { display: contents; }
.tc-btn-visita { display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px;
  border: 1px solid rgba(247,243,234,.28); border-radius: var(--r-sm); font-size: 13px; color: var(--cream);
  background: transparent; cursor: pointer; white-space: nowrap; font-family: var(--font-sans); }
.tc-btn-visita:hover { border-color: var(--gold); color: var(--gold); }
.tc-btn-visita svg { width: 15px; height: 15px; }

.sino-wrap { position: relative; }
.tc-btn-sino { width: 36px; padding: 0; justify-content: center; border: none; cursor: pointer;
  font-family: inherit; position: relative; }
.sino-contador { position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px; background: var(--red); color: #fff; font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; line-height: 1; }
.sino-painel { position: absolute; top: calc(100% + 10px); right: 0; width: 340px; max-width: calc(100vw - 32px);
  max-height: 420px; overflow-y: auto; background: var(--surface); color: var(--ink); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow); z-index: 60; }
.sino-painel-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 600; }
.sino-painel-marcar { border: none; background: none; color: var(--muted); font-size: 12px; cursor: pointer;
  font-family: inherit; }
.sino-painel-marcar:hover { color: var(--ink); }
.sino-item { display: block; padding: 11px 14px; border-bottom: 1px solid var(--line); text-decoration: none;
  color: inherit; }
.sino-item:last-child { border-bottom: none; }
.sino-item:hover { background: var(--sunken); }
.sino-item-titulo { font-size: 12.5px; font-weight: 600; }
.sino-item-desc { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.sino-item-quando { font-size: 10.5px; color: var(--muted); margin-top: 4px; }
.sino-painel-vazio { padding: 24px 14px; text-align: center; font-size: 12.5px; color: var(--muted); }

.abas-cliente { background: var(--surface); border-bottom: 1px solid var(--line); display: flex;
  gap: 4px; padding: 0 28px; overflow-x: auto; position: sticky; top: 64px; z-index: 44; }
.abas-cliente a { padding: 14px 14px 12px; font-size: 13.5px; color: var(--muted); border-bottom: 2px solid transparent;
  text-decoration: none; white-space: nowrap; }
.abas-cliente a:hover { color: var(--ink); }
.abas-cliente a.ativa { color: var(--ink); font-weight: 500; border-bottom-color: var(--gold); }

@media (max-width: 900px) {
  /* vitrine de campanha no celular: mais baixa e mais justa, e o botão de
     adicionar fica na MESMA linha do preço (no computador sobra largura;
     aqui, empilhado, a faixa virava um bloco alto demais e empurrava o
     catálogo pra fora da primeira tela) */
  .campanha-vitrine { margin-bottom: 14px; }
  .campanha-faixa-catalogo { padding: 11px 14px; }
  .campanha-faixa-eyebrow { font-size: 9px; margin-bottom: 3px; }
  .campanha-faixa-titulo { font-size: 17px; line-height: 1.1; }
  .campanha-faixa-desc { font-size: 11.5px; margin-top: 3px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .campanha-bloco-acoes { flex-wrap: nowrap; gap: 10px; padding: 9px 14px; }
  .campanha-bloco-preco { min-width: 0; }
  .campanha-bloco-num { font-size: 17px; }
  .campanha-bloco-beneficio { font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .campanha-bloco-preco .apoio { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .campanha-bloco-acoes .btn { flex: none; padding: 0 14px; }
  .campanha-pontos { padding-top: 7px; }
  /* quando a barra de ação está na tela (vendedor/admin) ela já repete o
     benefício e a condição — na tela pequena isso é o mesmo texto duas
     vezes e duas linhas a mais de altura. O cliente, que não tem a barra,
     continua vendo a descrição na faixa. */
  .campanha-bloco:has(.campanha-bloco-acoes) .campanha-faixa-desc { display: none; }

  .topo-cliente { padding: 0 16px; height: 56px; gap: 10px; }
  .tc-selo { height: 26px; }
  .tc-direita { gap: 10px; }
  .tc-pontos strong { font-size: 13px; }
  .tc-apoio { display: none; }  /* some só o rótulo ("Pontos"/"Vendas no mês") — o ícone + número fica, ao lado do carrinho */
  .tc-btn-visita { display: none; }  /* só "Solicitar visita" some — carrinho e o número de vendas/pontos continuam */
  .tc-btn-carrinho { width: 36px; height: 36px; padding: 0; justify-content: center; }
  .tc-btn-carrinho .tc-rotulo { display: none; }
  .tc-link-entrar { font-size: 12px; }
  .abas-cliente { display: none; }  /* navegação vira a barra debaixo de sempre */
}

/* ============================================================
   Tela de Entrar (auth/login.html) — painel escuro + formulário.
   .container já dá padding pra toda tela; aqui a gente cancela
   com margem negativa pra sangrar até a borda.
   ============================================================ */
.lg-sangria { margin: -1.75rem -2rem -4rem; }
.lg-grade { display: grid; grid-template-columns: minmax(0,1fr) 430px; min-height: 100vh; }
.lg-painel { position: relative; background: var(--ink); color: var(--cream); padding: 38px 40px;
  display: flex; flex-direction: column; overflow: hidden; }
.lg-painel::before { content: ""; position: absolute; width: 480px; height: 480px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(232,179,60,.2), transparent 62%); top: -150px; right: -170px; }
.lg-painel::after { content: ""; position: absolute; width: 340px; height: 340px; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(232,179,60,.09), transparent 66%); bottom: -110px; left: -90px; }
.lg-marca { position: relative; display: flex; align-items: center; gap: 11px; }
.lg-selo { height: 40px; width: auto; object-fit: contain; flex: none; }
.lg-painel-corpo { position: relative; margin-top: auto; }
.lg-eyebrow { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: rgba(247,243,234,.5); margin-bottom: 11px; }
.lg-titulo { font-family: var(--font-serif); font-weight: var(--peso-titulo); font-size: 38px; line-height: 1.14; max-width: 420px; margin: 0; }
.lg-desc { font-size: 14px; line-height: 1.65; color: rgba(247,243,234,.66); max-width: 400px; margin-top: 14px; }
.lg-stats { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(247,243,234,.14); }
.lg-stat-num { font-family: var(--font-mono); font-size: 22px; font-weight: 500; color: var(--gold); }
.lg-stat-label { font-size: 11px; color: rgba(247,243,234,.55); }
.lg-rodape-atend { position: relative; margin-top: 30px; font-size: 11px; color: rgba(247,243,234,.42); }

.lg-form-lado { padding: 38px 36px; display: flex; align-items: center; border-left: 1px solid var(--line); }
.lg-form-titulo { margin: 0; font-family: var(--font-serif); font-weight: var(--peso-titulo); font-size: 30px; line-height: 1.15; }
.lg-form-sub { margin: 6px 0 24px; font-size: 13.5px; color: var(--muted); }
.lg-campo { display: block; font-size: 12px; color: var(--muted); margin-bottom: 13px; }
.lg-campo input { display: block; width: 100%; height: 44px; margin-top: 6px; border: 1px solid var(--line);
  border-radius: 11px; background: var(--surface); color: var(--ink); font-family: var(--font-sans);
  font-size: 14px; padding: 0 13px; }
.lg-linha-lembrar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.lg-lembrar { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); cursor: pointer; }
.lg-btn-entrar { width: 100%; height: 46px; border: none; background: var(--gold); color: var(--ink);
  border-radius: 11px; font-family: var(--font-sans); font-size: 14.5px; font-weight: 600; cursor: pointer; margin-top: 4px; }
.lg-btn-entrar:hover { filter: brightness(1.06); }
.lg-ou { display: flex; align-items: center; gap: 12px; margin: 14px 0; font-size: 11px; color: var(--muted); }
.lg-ou span { flex: 1; height: 1px; background: var(--hair); }
.lg-btn-ver-catalogo { height: 44px; display: flex; align-items: center; justify-content: center; gap: 9px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 11px;
  font-family: var(--font-sans); font-size: 13.5px; text-decoration: none; }
.lg-btn-ver-catalogo:hover { border-color: var(--gold); color: var(--gold-ink); }
.lg-btn-ver-catalogo svg { width: 16px; height: 16px; }
.lg-rodape-cadastro { text-align: center; font-size: 12.5px; color: var(--muted); margin-top: 14px; }
.lg-aviso { display: flex; align-items: flex-start; gap: 9px; border-radius: 11px; padding: 12px 13px;
  margin-bottom: 14px; font-size: 12.5px; line-height: 1.55; }
.lg-aviso svg { flex: none; margin-top: 1px; width: 15px; height: 15px; }
.lg-aviso-erro { background: #F7E7E3; color: var(--red, #9C4A3C); }
.lg-aviso-ok { background: #E4F0E9; color: var(--green-ink); }

/* olho de mostrar/esconder senha */
.lg-campo-senha-wrap { position: relative; display: block; }
.lg-campo-senha-wrap input { padding-right: 42px; }
.lg-toggle-senha { position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border: none; background: transparent; color: var(--muted);
  border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.lg-toggle-senha:hover { color: var(--gold-ink); background: var(--sunken); }
.lg-toggle-senha svg { width: 18px; height: 18px; }
.lg-toggle-senha.mostrando { color: var(--gold-ink); }

/* acesso rápido — atalho de teste, ver auth_bp.py:login_rapido_ligado */
.lg-rapido-rotulo { margin: 18px 0 8px; }
.lg-rapido-linha { display: flex; gap: 7px; flex-wrap: wrap; }

/* banner escuro compacto só no celular — versão condensada do painel,
   sem estatística nem texto longo */
.lg-banner-mobile { display: none; }

@media (max-width: 900px) {
  .lg-sangria { margin: -1.75rem -2rem -4rem; }
  .lg-grade { grid-template-columns: minmax(0,1fr); min-height: 0; }
  .lg-painel { display: none; }
  .lg-banner-mobile { display: block; background: var(--ink); color: var(--cream); padding: 20px 22px 22px; }
  .lg-banner-mobile .lg-marca { margin-bottom: 14px; }
  .lg-banner-mobile .lg-selo { height: 30px; }
  .lg-banner-titulo { font-family: var(--font-serif); font-size: 20px; line-height: 1.28; font-weight: var(--peso-titulo); }
  .lg-form-lado { padding: 24px 22px 26px; border-left: none; justify-content: center; }
}

/* fotinho de cada item no painel "Seu carrinho" do Catálogo
   (partials/_resumo_carrinho_catalogo.html) */
.car-item-foto { width: 30px; height: 30px; flex: none; object-fit: contain;
  border-radius: 6px; background: #FFFFFF; border: 1px solid var(--hair); }
.car-item-foto-placeholder { background: var(--sunken); }

/* ============================================================
   Pontos e Confiabilidade (admin/pontuacao.html) — dois painéis
   selecionáveis, regras com checkbox + valor + selo ganha/perde/soma/
   tira/zera. Mobile: linhas quebram em duas fileiras (flex-wrap).
   ============================================================ */
.selecao-config { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0 22px; }
.cartao-selecao-config { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--r-lg);
  border: 1px solid var(--line); background: var(--surface); cursor: pointer; text-align: left; font-family: var(--font-sans); }
.cartao-selecao-config.ativo { border-color: var(--gold); background: var(--gold-soft); }
.cartao-selecao-config .icone-config { flex: none; width: 36px; height: 36px; border-radius: 10px; display: flex;
  align-items: center; justify-content: center; background: var(--sunken); font-size: 18px; }
.cartao-selecao-config.ativo .icone-config { background: rgba(255,255,255,.6); }
.cartao-selecao-config .titulo-config { font-family: var(--font-serif); font-size: 16px; color: var(--ink); font-weight: var(--peso-titulo); }
.cartao-selecao-config .subtitulo-config { font-size: 11px; color: var(--muted); margin-top: 1px; }

.painel-config { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.painel-config-cabecalho { padding: 16px 20px; border-bottom: 1px solid var(--line); display: flex; align-items: center;
  gap: 12px; flex-wrap: wrap; }
.painel-config-cabecalho h2 { font-family: var(--font-serif); font-weight: var(--peso-titulo); font-size: 18px; margin: 0; }
.painel-config-cabecalho .subtitulo-config { font-size: 12px; color: var(--muted); }
.painel-config-cabecalho .btn-add { margin-left: auto; }

.grade-campos-config { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 18px 20px; border-bottom: 1px solid var(--hair); }
.campo-config label { display: block; font-size: 10.5px; color: var(--muted); margin-bottom: 5px; }
.campo-config input, .campo-config select { width: 100%; height: 36px; border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 0 10px; font-family: var(--font-sans); font-size: 13px; background: var(--sunken); color: var(--ink); }

.faixas-config { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--hair); }
.faixa-config { border-radius: var(--r-md); padding: 12px 14px; }
.faixa-config.otima { background: var(--green-soft); }
.faixa-config.boa { background: var(--gold-soft); }
.faixa-config.ruim { background: #F7E7E3; }
.faixa-config-titulo { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; margin-bottom: 8px; }
.faixa-config.otima .faixa-config-titulo { color: var(--green-ink); }
.faixa-config.boa .faixa-config-titulo { color: var(--gold-ink); }
.faixa-config.ruim .faixa-config-titulo { color: var(--red); }
.faixa-config-intervalo { display: flex; align-items: center; gap: 6px; }
.faixa-config-intervalo input { width: 56px; height: 32px; border: 1px solid var(--line); border-radius: var(--r-sm);
  text-align: center; font-family: var(--font-mono); font-size: 13px; }
.faixa-config-intervalo span { font-size: 11.5px; color: var(--muted); }

.categoria-titulo-config { padding: 12px 20px 6px; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; }
.regra-linha-config { padding: 7px 20px; border-bottom: 1px solid var(--hair); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.regra-linha-config input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--gold); flex: none; }
.regra-linha-config .regra-nome-config { min-width: 0; flex: 1 1 220px; font-size: 12.5px; }
.regra-linha-config .regra-nome-config .desc-config { font-size: 10px; color: var(--muted); }
.regra-linha-config input[type=number] { width: 72px; height: 26px; border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 0 6px; font-family: var(--font-mono); font-size: 12px; text-align: right; background: var(--sunken); flex: none; }
.tag-ganha, .tag-perde, .tag-zera { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: var(--r-pill);
  text-align: center; white-space: nowrap; flex: none; }
.tag-ganha { background: var(--green-soft); color: var(--green-ink); }
.tag-perde { background: #F7E7E3; color: var(--red); }
.tag-zera { background: var(--hair); color: var(--muted); }
.btn-remover-config { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--surface); color: var(--muted); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 13px; line-height: 1; }
.btn-remover-config:hover { border-color: var(--red); color: var(--red); }

.regra-linha-nova-config { padding: 12px 20px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.regra-linha-nova-config select, .regra-linha-nova-config input[type=text] { height: 32px; border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 0 8px; font-family: var(--font-sans); font-size: 12.5px; background: var(--sunken); }
.regra-linha-nova-config input[type=number] { width: 90px; height: 32px; border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 0 8px; font-family: var(--font-mono); font-size: 12.5px; background: var(--sunken); }

@media (max-width: 900px) {
  .selecao-config { grid-template-columns: 1fr; }
  .grade-campos-config { grid-template-columns: 1fr 1fr; }
  .faixas-config { grid-template-columns: 1fr; }
}

/* ---------- Central de mensagens: resumo dos filtros (admin/mensagens.html) ---------- */
.cw-resumo-filtro { align-self: center; font-size: 13px; color: var(--muted); display: flex; gap: 10px; flex-wrap: wrap; }

/* ---- Configurações → Boleto (admin/config_boleto.html) ---- */
.cb-grade { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: start; }
.cb-prazos { gap: 8px; }
.cb-prazo { display: inline-flex; align-items: center; gap: 2px; }
.cb-prazo .btn-acao { width: 28px; height: 28px; }
.cb-linha { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.cb-linha .campo { flex: 1 1 220px; }
.cb-check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.cb-sub { padding: 10px 0 0; border-top: 1px solid var(--line); margin-top: 6px; }
.cb-faixas input { width: 90px; }
.cb-faixas td { vertical-align: middle; }
.cb-excecoes { display: flex; flex-direction: column; gap: 8px; }
.cb-excecao { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md, 10px); background: var(--sunken); }
.cb-salvar { align-self: flex-start; }
/* ficha do pedido pendente: parcelas do boleto */
.pl-parcelas { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.pl-parcelas li { display: flex; justify-content: space-between; gap: 12px; }

/* ---- Clube VIP (vip.py) — peças que aparecem em qualquer tema ---- */
.tc-vip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: var(--r-pill);
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: #0A1130; background: linear-gradient(120deg, #F6D683, #E8B33C 55%, #B8862A); text-decoration: none; }
.tc-vip svg { width: 12px; height: 12px; }
.tc-vip:hover { text-decoration: none; filter: brightness(1.05); }
.tc-aba-vip { color: var(--gold-ink) !important; font-weight: 600; }
.car-vip { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: var(--r-pill); font-family: var(--font-mono);
  font-size: 9.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #0A1130; background: linear-gradient(120deg, #F6D683, #E8B33C); vertical-align: middle; }
.produto-card .produto-vip-aviso { color: var(--gold-ink); }
.pt-so-vip { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-ink); background: var(--gold-soft); border-radius: var(--r-pill); padding: 2px 7px; margin-left: 6px; vertical-align: middle; }
/* página do clube (cliente/clube_vip.html) */
.cv-h1 i { font-style: italic; color: var(--gold); }
.cv-sub { margin: -8px 0 16px; color: var(--muted); font-size: 13.5px; }
.cv-membro { position: relative; border-radius: var(--r-lg); padding: 20px 20px 18px; overflow: hidden; color: #0A1130; max-width: 460px;
  background: radial-gradient(120% 90% at 10% 0%, #FBE7A9 0%, transparent 55%), radial-gradient(90% 80% at 100% 100%, #B8862A 0%, transparent 60%), linear-gradient(135deg, #F6D683 0%, #E8B33C 45%, #C9932E 100%);
  box-shadow: 0 20px 50px -20px rgba(232,179,60,.55), inset 0 1px 0 rgba(255,255,255,.55); }
.cv-membro::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255,255,255,0) 0 18px, rgba(255,255,255,.12) 18px 19px); mix-blend-mode: soft-light; pointer-events: none; }
.cv-membro-lin1 { display: flex; align-items: flex-start; justify-content: space-between; }
.cv-membro-clube { font-family: var(--font-serif); font-size: 19px; line-height: 1; font-weight: var(--peso-titulo); }
.cv-membro-clube small { display: block; font-family: var(--font-sans); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; opacity: .75; margin-top: 5px; }
.cv-coroa { width: 34px; height: 34px; }
.cv-membro-nome { margin-top: 30px; font-family: var(--font-serif); font-size: 24px; line-height: 1.05; font-weight: var(--peso-titulo); }
.cv-membro-lin3 { display: flex; justify-content: space-between; margin-top: 16px; font-family: var(--font-mono); font-size: 12px; }
.cv-membro-lin3 b { display: block; font-size: 9px; letter-spacing: .16em; text-transform: uppercase; opacity: .7; font-family: var(--font-sans); margin-bottom: 3px; }
.cv-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; max-width: 460px; }
.cv-kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 12px 12px 10px; }
.cv-kpi .n { font-family: var(--font-mono); font-size: 19px; font-weight: 600; color: var(--gold-ink); line-height: 1; }
.cv-kpi .n small { font-size: 11px; opacity: .8; }
.cv-kpi .l { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: 6px; line-height: 1.3; }
.cv-nivel { margin-top: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 16px; max-width: 460px; }
.cv-nivel .l1 { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; flex-wrap: wrap; }
.cv-nivel .l1 b { font-weight: 500; color: var(--gold-ink); }
.cv-trilho { height: 8px; border-radius: 8px; background: var(--gold-soft); margin: 10px 0 8px; overflow: hidden; }
.cv-trilho i { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, #B8862A, #F6D683); }
.cv-nivel .l2 { font-size: 11.5px; color: var(--muted); }
.cv-sec { margin: 22px 0 8px; } .cv-sec h2 { margin: 0; }
.cv-camp { background: var(--surface); border: 1px solid rgba(232,179,60,.4); border-radius: var(--r-lg); padding: 14px; margin-top: 8px; max-width: 460px; }
.cv-tag { display: inline-flex; font-family: var(--font-mono); font-size: 9.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; padding: 3px 8px; border-radius: var(--r-pill); background: var(--gold-soft); color: var(--gold-ink); }
.cv-camp .t { font-family: var(--font-serif); font-size: 19px; line-height: 1.1; margin: 8px 0 4px; font-weight: var(--peso-titulo); }
.cv-camp .d { font-size: 12px; color: var(--muted); line-height: 1.4; }
.cv-camp .p { margin-top: 8px; font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.cv-vazio { font-size: 13px; color: var(--muted); max-width: 460px; }
.cv-lista { display: flex; flex-direction: column; gap: 8px; max-width: 460px; }
.cv-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.cv-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--gold-soft); color: var(--gold-ink); font-family: var(--font-serif); font-size: 19px; flex: none; font-weight: var(--peso-titulo); }
.cv-item .n { font-size: 13.5px; font-weight: 500; } .cv-item .c { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.cv-acoes { display: flex; gap: 8px; margin-top: 18px; max-width: 460px; }
.cv-acoes .btn { flex: 1; }
/* cartão de membro na cor do nível do cliente (Ouro é o padrão acima) */
.cv-membro[data-nivel="platina"] {
  background: radial-gradient(120% 90% at 10% 0%, #FFFFFF 0%, transparent 55%), radial-gradient(90% 80% at 100% 100%, #7F8BA8 0%, transparent 60%), linear-gradient(135deg, #F4F6FA 0%, #C9D0E0 45%, #9AA5BE 100%);
  box-shadow: 0 20px 50px -20px rgba(110,125,160,.6), inset 0 1px 0 rgba(255,255,255,.7); }
.cv-membro[data-nivel="diamante"] {
  background: radial-gradient(120% 90% at 10% 0%, #F2FBFF 0%, transparent 55%), radial-gradient(90% 80% at 100% 100%, #2C7FB0 0%, transparent 60%), linear-gradient(135deg, #E3F6FF 0%, #8FD0EF 45%, #4DA5D4 100%);
  box-shadow: 0 20px 50px -20px rgba(60,150,205,.6), inset 0 1px 0 rgba(255,255,255,.7); }
.cv-acoes-topo { display: none; }
.cv-camps { display: block; }
/* admin (config_vip.html) */
.cv-niveis input { width: 84px; }
.cv-niveis td { vertical-align: middle; white-space: nowrap; }
.cv-selo { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: var(--r-pill); font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #0A1130; background: linear-gradient(120deg, #F6D683, #E8B33C); white-space: nowrap; }
.cv-selo.cv-platina { background: linear-gradient(120deg, #EDEFF5, #B9C2D6); }
.cv-selo.cv-diamante { background: linear-gradient(120deg, #DDF3FF, #7FC6EA); }
.cv-selo.cv-nao { background: var(--red-soft); color: var(--red); }
.cv-inline select { height: 34px; }
/* computador: duas colunas (cartão | números), campanhas e vantagens em grade, botões no topo */
@media (min-width: 900px) {
  .cv-pagina { max-width: 1180px; margin-inline: auto; }
  .cv-topo { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 22px; }
  .cv-topo .cv-sub { margin: 8px 0 0; max-width: 62ch; font-size: 14px; }
  .cv-acoes-topo { display: flex; margin-top: 0; }
  .cv-acoes-topo .btn { flex: none; padding-inline: 18px; }
  .cv-acoes-base { display: none; }
  .cv-cima { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 22px; align-items: start; }
  .cv-membro { max-width: none; min-height: 250px; padding: 26px 26px 22px; display: flex; flex-direction: column; justify-content: space-between; }
  .cv-membro > * { position: relative; }
  .cv-membro-clube { font-size: 22px; }
  .cv-membro-nome { margin-top: 34px; font-size: 30px; text-wrap: balance; }
  .cv-membro-lin3 { margin-top: 18px; font-size: 13px; }
  .cv-coroa { width: 40px; height: 40px; }
  .cv-direita { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
  .cv-direita .cv-kpis, .cv-direita .cv-nivel { margin-top: 0; max-width: none; }
  .cv-kpis { gap: 12px; }
  .cv-kpi { padding: 16px 18px 14px; }
  .cv-kpi .n { font-size: 28px; font-variant-numeric: tabular-nums; }
  .cv-kpi .n small { font-size: 14px; }
  .cv-kpi .l { font-size: 10.5px; margin-top: 9px; }
  .cv-nivel { padding: 18px 20px; }
  .cv-nivel .l1 { font-size: 14px; align-items: baseline; }
  .cv-trilho { height: 10px; margin: 12px 0 10px; }
  .cv-nivel .l2 { font-size: 12.5px; line-height: 1.5; }
  .cv-sec { margin-top: 30px; }
  .cv-camps { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
  .cv-camps .cv-camp { margin-top: 0; max-width: none; padding: 16px 18px; }
  .cv-camps .cv-vazio { max-width: none; grid-column: 1 / -1; }
  .cv-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: none; }
  .cv-item { gap: 14px; padding: 14px 16px; }
  .cv-ic { width: 44px; height: 44px; font-size: 20px; }
  .cv-item .n { font-size: 14.5px; } .cv-item .c { font-size: 12.5px; margin-top: 3px; line-height: 1.4; }
}
@media (max-width: 899px) { .cv-kpis { max-width: none; } .cv-membro, .cv-nivel, .cv-camp, .cv-lista, .cv-acoes, .cv-vazio { max-width: none; } }
/* ficha do cliente (admin): bloco Clube VIP com botões de marcar/tirar */
.fc-vip { flex: none; border-radius: 13px; border: 1px solid var(--line); padding: 12px 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fc-vip-info { min-width: 0; flex: 1; }
.fc-vip-estado { margin-top: 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fc-vip-form { display: flex; gap: 6px; flex-wrap: wrap; }
/* "Atualizado há X min" das telas com cache do Tiny (partials/_atualizado_ha.html) */
.atualizado-ha { margin: -8px 0 14px; font-size: 11.5px; color: var(--muted); }
.atualizado-ha a { margin-left: 4px; }
.atualizado-ha-velho { color: var(--red); }

/* ---- tabela → cartões no celular (static/js/tabela-mobile.js) ----
   Vale pra <table class="tabela-nova"> marcada .empilhavel pelo JS e pra
   <div class="tabela tabela-empilha"> (grid .linha). Primeira célula vira o
   título do cartão; as outras viram "rótulo — valor"; ações viram uma
   faixa de botões; célula vazia some. No computador nada muda. */
@media (max-width: 900px) {
  table.empilhavel { display: block; background: transparent; border: none; box-shadow: none; }
  table.empilhavel thead { display: none; }
  table.empilhavel tbody { display: flex; flex-direction: column; gap: 10px; }
  table.empilhavel tr { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 4px 14px 6px; }
  table.empilhavel tbody tr:hover td { background: transparent; }
  table.empilhavel td { display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 8px 0; border-bottom: 1px solid var(--hair); text-align: right; min-height: 38px; }
  table.empilhavel td:last-child { border-bottom: none; }
  table.empilhavel td::before { content: attr(data-label); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--muted); font-weight: 500; text-align: left; flex: none; }
  table.empilhavel td:first-child { display: block; text-align: left; font-weight: 500; font-size: 14.5px; line-height: 1.3; padding: 12px 0 9px; }
  table.empilhavel td:first-child::before { content: none; }
  table.empilhavel td.emp-vazio { display: none; }
  table.empilhavel td.emp-acoes { justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding-top: 10px; }
  table.empilhavel td.emp-acoes::before { content: none; }
  table.empilhavel td.emp-acoes .btn, table.empilhavel td.emp-acoes .btn-outline, table.empilhavel td.emp-acoes form { flex: 1 1 auto; }
  table.empilhavel td.emp-acoes .btn, table.empilhavel td.emp-acoes .btn-outline { min-height: 42px; justify-content: center; }
  table.empilhavel tr.emp-livre td { display: block; text-align: left; }
  .tabela-scroll:has(table.empilhavel) { overflow: visible; }

  .tabela.tabela-empilha { background: transparent; border: none; box-shadow: none; overflow: visible; display: flex; flex-direction: column; gap: 10px; }
  .tabela.tabela-empilha .linha:not(.cab) { display: flex; flex-direction: column; gap: 0; background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 4px 14px 6px; align-items: stretch; }
  .tabela.tabela-empilha .linha:not(.cab):hover { background: var(--surface); }
  .tabela.tabela-empilha .linha:not(.cab) > * { display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 8px 0; border-bottom: 1px solid var(--hair); text-align: right !important; min-height: 38px; }
  .tabela.tabela-empilha .linha:not(.cab) > *:last-child { border-bottom: none; }
  .tabela.tabela-empilha .linha:not(.cab) > *::before { content: attr(data-label); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--muted); font-weight: 500; text-align: left; flex: none; }
  .tabela.tabela-empilha .linha:not(.cab) > *:first-child { display: block; text-align: left !important; font-weight: 500; font-size: 14.5px; padding: 12px 0 9px; }
  .tabela.tabela-empilha .linha:not(.cab) > *:first-child::before { content: none; }
  .tabela.tabela-empilha .linha:not(.cab) > .emp-vazio { display: none; }
  .tabela.tabela-empilha .linha:not(.cab) > .emp-acoes { justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
  .tabela.tabela-empilha .linha:not(.cab) > .emp-acoes::before { content: none; }
  .tabela.tabela-empilha .col-secundaria { display: flex; }
}

/* barra de ações da ficha do cliente: o ícone do "Convidar pro app" vem do
   macro icon() sem width/height e ocupava o botão inteiro */
.fc-verde svg, .fc-borda svg { width: 15px; height: 15px; flex: none; }
.fc-verde { white-space: nowrap; }

/* balãozinho do (i) dos textos cortados (texto-cortado.js) */
.popover-texto {
  position: absolute; z-index: 60; max-width: min(300px, calc(100vw - 16px)); padding: 9px 12px;
  background: var(--ink); color: var(--cream); border-radius: var(--r-md);
  font-size: 12.5px; line-height: 1.4; box-shadow: 0 12px 30px -12px rgba(10, 17, 48, .6);
  overflow-wrap: anywhere; pointer-events: auto;
}
.btn-info-texto.ativo { border-color: var(--gold); color: var(--gold-ink); background: var(--gold-soft); }

/* Clientes (admin, desktop): uma coluna por informação — Cliente · Fantasia ·
   Cidade · Último pedido · Pontos · Pagamento · Confiança · Crédito.
   Abaixo de 1400px somem Fantasia, Cidade e Pontos (o resto continua legível). */
.t-clientes-fino { --cols: 34px minmax(130px,1.4fr) minmax(90px,1fr) minmax(90px,.9fr) 88px 60px 118px 104px 100px 34px; }
.linha.t-clientes-fino { padding: 14px 20px; }
.t-clientes-fino .cliente-fantasia { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.t-clientes-fino .col-pagamento { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.t-clientes-fino .apoio { font-size: 11.5px; }
@media (max-width: 1400px) {
  .t-clientes-fino { --cols: 34px minmax(110px,1fr) 92px 118px 104px 100px 34px; }
  .t-clientes-fino .col-sec-lg { display: none !important; }
}
.grade-ajustes-5 { grid-template-columns: repeat(5, minmax(0,1fr)); }
@media (max-width: 620px) { .grade-ajustes-5 { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* ---------- CENTRAL DE MENSAGENS (admin/mensagens.html) ---------- */
.t-mensagens { --cols: 26px minmax(180px,1fr) 124px 124px 150px; }
@media (max-width: 900px) { .t-mensagens { --cols: 26px minmax(0,1fr) auto; } }
.msg-linha { cursor: pointer; }
.msg-linha[aria-expanded="true"] { background: var(--gold-soft); }
.msg-detalhe { padding: 6px 20px 18px 56px; display: grid; gap: 12px; border-bottom: 1px solid var(--hair); background: var(--surface); }
.msg-detalhe[hidden] { display: none; }
.msg-balao { background: #DCF5D2; color: var(--ink); border-radius: 4px 14px 14px 14px; padding: 10px 14px; max-width: 460px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13.5px; }
.msg-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 16px; font-size: 12.5px; margin: 0; }
.msg-meta dt { color: var(--muted); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; }
.msg-meta dd { margin: 0; overflow-wrap: anywhere; }
.msg-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.msg-acoes form { margin: 0; }
.folha-nav { display: flex; align-items: center; gap: 8px; width: 100%; }
.folha-nav .atual { flex: 1; text-align: center; font-weight: 500; font-size: 14px; }
.folha-nav .atual .apoio { display: block; font-weight: 400; }
.folha-linha { display: flex; gap: 8px; flex-wrap: wrap; width: 100%; align-items: center; }
@media (max-width: 900px) { .msg-detalhe { padding-left: 20px; } }

/* etiqueta do meio de envio na Central de mensagens: régua (azul), Z-API (escuro), normal (cinza) */
.etiqueta-meio { flex: none; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }
.etiqueta-meio-regua { background: #E4EDFB; color: #2B4E8C; }
.etiqueta-meio-zapi { background: var(--ink); color: var(--cream); }
.etiqueta-meio-normal { background: var(--sunken); color: var(--muted); border: 1px solid var(--line); }
.etiqueta-meio-email { background: #FBF0D6; color: #7D5A0B; }

/* leitura da mensagem na Central (entregue, lida, respondeu) */
.msg-leitura { margin-top: 3px; }
.msg-leitura-resp { color: var(--green-ink); font-weight: 600; }
.msg-balao-resp { background: var(--sunken); border: 1px solid var(--line); border-radius: 14px 4px 14px 14px; }

/* ---------- CARTÃO DE PRODUTO MAIOR NO DESKTOP ----------
   No computador o cartão de 170px ficava pequeno demais (foto de ~100px, nome cortado).
   Só vale acima de 900px; no celular continua como estava. Seletor com .linha-scroll-wrap
   pra ganhar do style.css, que é carregado depois. */
@media (min-width: 901px) {
  .linha-scroll-wrap .linha-scroll .produto-card { flex: 0 0 248px; padding: 15px; gap: 11px; }
  .grade-produtos { grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 20px; }
  .produto-card .produto-nome { font-size: 14.5px; line-height: 1.35; min-height: 40px; }
  .produto-card .preco-atual { font-size: 19px; }
  .produto-card .preco-riscado { font-size: 12.5px; }
  .produto-card .produto-rendimento { font-size: 11.5px; }
  .produto-card .badge-promo { font-size: 11px; }
  .produto-card .btn-info, .produto-card .btn-compartilhar-produto { width: 24px; height: 24px; }

  /* banner da campanha: a arte (2400x520) na largura toda passava de 300px de altura.
     Mantém a largura e limita a altura; a arte é cortada um pouco em cima e embaixo
     (object-position puxa o corte pra baixo, onde a arte tem mais respiro) e a barra do preço fica compacta. */
  .campanha-vitrine .campanha-bloco > .campanha-faixa-arte { flex: 0 0 auto; }
  .campanha-vitrine .campanha-bloco > .campanha-faixa-arte img { height: 240px; object-fit: cover; object-position: center 25%; }
  .campanha-bloco-acoes { padding: 10px 16px; }
  .campanha-bloco-num { font-size: 20px; }
}

/* cabeçalho clicável da lista de Clientes: toque na coluna ordena (clientes-ordenar.js) */
.t-clientes-fino.cab [data-ordenar] { cursor: pointer; user-select: none; display: flex; align-items: center; gap: 5px; }
.t-clientes-fino.cab [data-ordenar]:hover { color: var(--gold-ink); }
.t-clientes-fino.cab [data-ordenar]::after { content: ""; flex: none; }
.t-clientes-fino.cab [aria-sort="ascending"] { color: var(--gold-ink); }
.t-clientes-fino.cab [aria-sort="ascending"]::after { content: "▲"; font-size: 8px; }
.t-clientes-fino.cab [aria-sort="descending"] { color: var(--gold-ink); }
.t-clientes-fino.cab [aria-sort="descending"]::after { content: "▼"; font-size: 8px; }

/* editor de mensagens de WhatsApp (Configurações) */
.msg-item { border-bottom: 1px solid var(--hair); }
.msg-item:last-child { border-bottom: none; }
.msg-editor { padding: 4px 20px 18px; }
.msg-editor[hidden] { display: none; }
.msg-editor textarea { width: 100%; min-height: 110px; font-family: var(--font-sans); font-size: 14px; line-height: 1.45;
  border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 12px; background: var(--surface); color: var(--ink); resize: vertical; }
.msg-vars { display: flex; flex-wrap: wrap; gap: 6px; }
.msg-vars .chip { font-size: 12.5px; height: 30px; }
.msg-grupos { display: grid; gap: 8px; }
.msg-grupo-nome { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.msg-grupo-nome .apoio { text-transform: none; letter-spacing: 0; font-size: 12px; }
.msg-editor .msg-balao { max-width: 520px; }

/* botão "Enviar boletos por WhatsApp" de Contas a receber: só aparece com 2+ títulos do mesmo cliente marcados */
#btn-boletos-whatsapp[hidden] { display: none; }

/* Contas a receber → "Agrupar por cliente": uma linha por cliente que abre os títulos dele */
.t-contas-grupo { --cols: 26px minmax(180px,1fr) 70px 100px 130px 170px 170px; }
@media (max-width: 1180px) { .t-contas-grupo { --cols: 26px minmax(90px,1fr) 100px 130px 170px 170px; } }
.grupo-cab .acoes-linha { flex-wrap: wrap; row-gap: 4px; }          /* Enviar/Ver no jurídico desce para baixo de Boletos › (22/10/2026) */
.grupo-cab { cursor: pointer; background: var(--sunken); }
.tabela .grupo-cab:hover { background: var(--gold-soft); }
.grupo-cab .grupo-seta { display: inline-block; color: var(--muted); transition: transform .15s; width: 16px; text-align: center; }
.grupo-cab[aria-expanded="true"] .grupo-seta { transform: rotate(90deg); }
.grupo-contas[hidden] { display: none; }
.grupo-contas .linha { padding-left: 34px; background: var(--surface); }
.cf-grupo { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); margin-bottom: 10px; overflow: hidden; }
.cf-grupo > summary { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 12px 14px; cursor: pointer; list-style: none; background: var(--sunken); }
.cf-grupo > summary::-webkit-details-marker { display: none; }
.cf-grupo-nome { font-weight: 500; }
.cf-grupo-total { grid-row: 1 / span 2; grid-column: 2; align-self: center; }
.cf-grupo > .cf-cartao { margin: 8px; }

/* Contas a receber no celular: ações do cliente agrupado e botão Cobrar com texto */
.cf-grupo-acoes { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 8px 2px; }
.cf-grupo-acoes .cf-btn-boleto.cf-btn-juridico { flex: 1 0 100%; text-decoration: none; }          /* Enviar/Ver no jurídico: linha própria embaixo (22/10/2026) */
.cf-grupo-acoes .cf-btn-boleto, .cf-grupo-acoes .cf-btn-pagar { flex: 1; width: auto; padding: 0 10px; font-size: 13px; }
.cf-btn-texto { width: auto; flex: 1; padding: 0 14px; gap: 7px; font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.cf-acoes .cf-btn-boleto.cf-btn-texto { flex: none; }
.cf-btn-texto svg { width: 17px; height: 17px; flex: none; }
.chips-mob .chip { display: inline-flex; align-items: center; gap: 6px; }
.chips-mob .chip svg { width: 15px; height: 15px; }
.chip-sep { flex: none; width: 1px; align-self: stretch; margin: 6px 2px; background: var(--line); }
/* rodapé da gaveta no celular: o total ocupa a linha de cima e os dois botões dividem a de baixo */
@media (max-width: 640px) {
  .gaveta-pe { flex-wrap: wrap; }
  .gaveta-pe .par-total { flex: 1 0 100%; display: flex; justify-content: space-between; align-items: baseline; }
  .gaveta-pe .btn { flex: 1; min-width: 0; }
}

/* ficha do cliente no celular: o limite de crédito ocupa a largura toda, formulário embaixo */
@media (max-width: 640px) {
  .fc-limite-info { flex: 1 0 100%; }
  .fc-limite-form { flex: 1 0 100%; }
  .fc-limite-form input[type="number"] { flex: 1 1 0; width: 0 !important; min-width: 0 !important; }
  .fc-limite-form label, .fc-limite-form .btn-outline { flex: none; white-space: nowrap; }
  .fc-limite > form:not(.fc-limite-form) { flex: 1 0 100%; }
  .fc-limite > form:not(.fc-limite-form) .btn-outline { width: 100%; }
}

/* Central de mensagens no celular: indicadores em faixa que rola pro lado (são até 9) e nome do cliente que quebra linha */
@media (max-width: 900px) {
  .faixa-kpi-rolagem { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 136px; overflow-x: auto; scroll-snap-type: x proximity; }
  .faixa-kpi-rolagem .kpi { border-right: 1px solid var(--hair); border-bottom: none; scroll-snap-align: start; }
  .faixa-kpi-rolagem .kpi:last-child { border-right: none; }
  .faixa-kpi-rolagem .kpi-label { white-space: normal; line-height: 1.25; }
  .msg-linha .celula-texto { white-space: normal; flex-wrap: wrap; gap: 2px 8px; }
  .msg-linha .celula-texto > span:first-child { overflow-wrap: anywhere; }
}

/* título de seção com botões à direita: no celular os botões descem pra linha de baixo */
.cat-titulo-acoes { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cat-titulo-botoes { display: flex; gap: 8px; }
@media (max-width: 640px) {
  .cat-titulo-acoes { flex-direction: column; align-items: stretch; }
  .cat-titulo-botoes { flex-wrap: wrap; }
  .cat-titulo-botoes form { flex: 1 1 140px; }
  .cat-titulo-botoes .btn { width: 100%; }
}

/* Inventário (Estoque): botões da linha do depósito juntos; no celular descem pra linha de baixo, lado a lado */
.inv-botoes { display: flex; align-items: center; gap: 8px; flex: none; }
@media (max-width: 640px) {
  .inv-botoes { flex: 1 0 100%; }
  .inv-botoes > * { flex: 1 !important; justify-content: center; }
}

/* Contagem: código sem cadastro + painel pra vincular a um produto */
.cl-item.cl-sem-cadastro { border-color: #E8733C; background: #FFF8F2; }
.cl-cadastrar { margin-top: 6px; height: 30px; padding: 0 12px; border: 1px solid #E8733C; background: var(--surface); color: #A84C18; border-radius: 8px; font: 600 12.5px var(--font-sans); cursor: pointer; }
.cl-cad { margin: -4px 0 10px; padding: 12px 14px; border: 1px solid #E8733C; border-top: none; border-radius: 0 0 14px 14px; background: var(--surface); display: grid; gap: 8px; }
.cl-cad-tit { font-size: 13px; }
.cl-cad-busca { width: 100%; height: 44px; border: 1px solid var(--line); border-radius: 10px; padding: 0 12px; font-size: 15px; background: var(--surface); color: var(--ink); }
.cl-cad-lista { display: grid; gap: 6px; max-height: 260px; overflow-y: auto; }
.cl-cad-res { display: grid; gap: 1px; text-align: left; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); cursor: pointer; font: inherit; }
.cl-cad-res b { font-weight: 500; font-size: 13.5px; }
.cl-cad-res span { font-size: 11.5px; color: var(--muted); }
.cl-cad-res:hover { background: var(--gold-soft); }
.cl-cad-msg { font-size: 12.5px; color: var(--muted); padding: 4px 2px; }
.cl-cad-msg.erro { color: var(--red); }
.cl-cad-rodape { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 11.5px; color: var(--muted); }
.cl-cad-fechar { border: none; background: none; color: var(--muted); text-decoration: underline; cursor: pointer; font: inherit; }
.inv-link-codigo { flex: none; align-self: center; font-size: 12.5px; color: var(--gold-ink); text-decoration: underline; }

/* ============ Estoque → aba Produtos (protótipo aprovado: "Aba Produtos do Estoque") ============ */
.pr { --pr-laranja: #E8733C; --pr-laranja-ink: #A84C18; --pr-laranja-soft: #FFF3EA; }
.pr-mono { font-family: var(--font-mono); }
.pr-barra { display: flex; gap: 8px; align-items: center; margin: 0 0 8px; }
.pr-busca { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 9px; height: 44px; padding: 0 8px 0 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.pr-busca > svg { width: 17px; height: 17px; flex: none; color: var(--muted); }
.pr-busca input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-size: 15px; height: 100%; color: var(--ink); }
.pr-cam { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border: none; background: var(--sunken); border-radius: 8px; color: var(--ink); cursor: pointer; }
.pr-cam svg { width: 17px; height: 17px; }
.pr-btn { flex: none; height: 44px; padding: 0 14px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-md); font: 500 14px var(--font-sans); color: var(--ink); cursor: pointer; }
.pr-btn svg { width: 18px; height: 18px; }
.pr-btn[aria-expanded="true"] { border-color: var(--gold); background: var(--gold-soft); color: var(--gold-ink); }
.pr-ouro { background: var(--gold); border-color: var(--gold); font-weight: 600; }
.pr-badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-pill); background: var(--ink); color: var(--gold); font: 600 11.5px/20px var(--font-mono); text-align: center; }
.pr-contagem { font-size: 12.5px; color: var(--muted); margin: 0 0 8px; }
.pr-contagem a { margin-left: 8px; color: var(--gold-ink); }

.pr-md { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; min-height: 300px; height: calc(100vh - 316px); height: calc(100dvh - 316px); }
.pr-lista-col, .pr-detalhe-col { height: 100%; overflow-y: auto; overscroll-behavior: contain; min-width: 0; }
.pr-detalhe-col { display: none; }
.pr-md.com-detalhe .pr-detalhe-col { display: block; }
@media (min-width: 901px) { .pr-md.com-detalhe { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); } }
@media (max-width: 900px) { .pr-md.com-detalhe .pr-lista-col { display: none; } .pr-md { height: calc(100vh - 420px); height: calc(100dvh - 420px); } }

.pr-lista { display: grid; gap: 6px; }
.pr-item { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 3px 10px; align-items: center; padding: 8px 11px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); color: var(--ink); text-decoration: none; }
.pr-item:hover { background: var(--sunken); }
.pr-item.sel { border-color: var(--gold); background: var(--gold-soft); }
.pr-foto { width: 38px; height: 38px; border-radius: 9px; background: var(--sunken); border: 1px solid var(--line); display: grid; place-items: center; font: 400 18px var(--font-serif); color: var(--gold-ink); object-fit: cover; }
.pr-item-txt { min-width: 0; display: grid; }
.pr-nome { font-weight: 500; font-size: 13.5px; line-height: 1.25; }
.pr-ref { font-size: 11px; color: var(--muted); }
.pr-ref b { font-weight: 500; color: var(--ink); }
.pr-deps-linha { display: none; }
.pr-saldo { text-align: right; font: 600 17px/1 var(--font-mono); }
.pr-saldo small { display: none; }
.pr-saldo.zero { color: var(--red); }
.pr-tags { grid-column: 2 / 4; display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.pr-tag { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px; border-radius: var(--r-pill); font-size: 11px; background: var(--sunken); border: 1px solid var(--hair); color: var(--muted); }
.pr-tag b { font-family: var(--font-mono); font-weight: 500; color: var(--ink); }
.pr-tag.sem { background: var(--pr-laranja-soft, #FFF3EA); border-color: #E8733C; color: #A84C18; font-weight: 500; }
.pr-tag.ok { background: var(--green-soft); border-color: transparent; color: var(--green-ink); }
.pr-tag.star { background: var(--gold-soft); border-color: transparent; color: var(--gold-ink); }
.pr-tag.inativo { background: var(--red-soft); border-color: transparent; color: var(--red); }

.pr-detalhe { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden; }
.pr-det-cab { padding: 10px 14px; border-bottom: 1px solid var(--line); display: grid; gap: 6px; }
.pr-voltar { justify-self: start; color: var(--gold-ink); font-size: 13.5px; text-decoration: none; }
@media (min-width: 901px) { .pr-voltar { display: none; } }
.pr-det-id { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center; }
.pr-det-id .pr-foto { width: 40px; height: 40px; font-size: 19px; }
.pr-det-nome h2 { margin: 0; font: 400 20px/1.15 var(--font-serif); text-wrap: balance; }
.pr-inativo { color: var(--red); font-weight: 600; }
.pr-det-abas { display: flex; border-bottom: 1px solid var(--line); }
.pr-det-abas a { flex: 1 1 0; height: 40px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; font-size: 13.5px; white-space: nowrap; }
.pr-det-abas a[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--gold); font-weight: 500; }
.pr-n { font: 500 11px var(--font-mono); background: var(--sunken); border: 1px solid var(--hair); padding: 1px 7px; border-radius: var(--r-pill); }
.pr-n.sem { background: #FFF3EA; color: #A84C18; border-color: #E8733C; }
@media (max-width: 560px) { .pr-det-abas .so-largo { display: none; } }
.pr-painel { padding: 12px 14px; display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.pr-deps { display: grid; gap: 8px; }
.pr-dep { display: grid; grid-template-columns: 110px minmax(0, 1fr) 48px; gap: 10px; align-items: center; font-size: 13.5px; }
.pr-trilho { height: 8px; border-radius: var(--r-pill); background: var(--sunken); overflow: hidden; }
.pr-trilho i { display: block; height: 100%; background: var(--gold); border-radius: var(--r-pill); }
.pr-q { text-align: right; font: 600 14px var(--font-mono); }
.pr-mov { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.pr-mov > div { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 10px; padding: 8px 12px; font-size: 13px; border-top: 1px solid var(--hair); }
.pr-mov > div:first-child { border-top: none; }
.pr-mov span:first-child { color: var(--muted); font-family: var(--font-mono); font-size: 12px; }
.pr-mov span:last-child { font: 600 13px var(--font-mono); } .pr-mov .pos { color: var(--green-ink); }
.pr-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.pr-codigo { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--sunken); }
.pr-codigo-num { font-size: 16px; font-weight: 500; letter-spacing: .04em; overflow-wrap: anywhere; }
.pr-codigo.confirma { background: var(--red-soft); border-color: var(--red); }
.pr-link-btn { border: none; background: none; padding: 0; font: inherit; color: var(--muted); text-decoration: underline; cursor: pointer; }
.pr-perigo { color: var(--red); }
.pr-codigo.confirma .pr-perigo { text-decoration: none; background: var(--red); color: #fff; padding: 6px 10px; border-radius: var(--r-sm); }
.pr-vazio { padding: 12px 14px; border: 1px dashed #E8733C; border-radius: var(--r-md); background: #FFF3EA; color: #A84C18; font-size: 13.5px; }
.pr-novo-codigo { display: grid; gap: 8px; }
.pr-linha { display: flex; gap: 8px; }
.pr-atual-corpo input[type=text] { width: 100%; }
.pr-linha input, .pr-atual-corpo input[type=text] { flex: 1; min-width: 0; height: 46px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-md); font: 500 16px var(--font-mono); background: var(--surface); color: var(--ink); }
.pr-erro { color: var(--red); font-size: 12.5px; min-height: 16px; }
.pr-confirma { padding: 10px 12px; border: 1px solid #E8733C; border-radius: var(--r-md); background: #FFF3EA; color: #A84C18; font-size: 13.5px; }
.pr-confirma .pr-acoes { margin-top: 8px; }
.pr-form { display: grid; gap: 12px; }
.pr-grade { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.pr-largo { grid-column: 1 / -1; }
.pr-mais-vendido { margin-top: 2px; }
@media (max-width: 560px) { .pr-linha { flex-direction: column; } .pr-linha .btn { width: 100%; height: 46px; } .pr-acoes .btn { flex: 1 1 140px; } .pr-rot { display: none; } .pr-btn { padding: 0 12px; } .pr-item .pr-tag.dep-tag { display: none; } .pr-item .pr-deps-linha { display: flex; flex-wrap: wrap; gap: 1px 10px; margin-top: 2px; font-size: 11.5px; color: var(--muted); } .pr-deps-linha b { font: 600 11.5px var(--font-mono); color: var(--ink); } }

/* painel de filtros/ações e fluxo de atualizar código: lista no computador, folha de baixo no celular */
.pr-fundo { position: fixed; inset: 0; background: rgba(10,17,48,.35); z-index: 70; }
.pr-menu { position: fixed; z-index: 71; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: 0 18px 50px -12px rgba(10,17,48,.45); width: 360px; max-width: calc(100vw - 24px); max-height: calc(100vh - 24px); overflow-y: auto; }
.pr-menu.pr-atual { width: 420px; }
.pr-menu.folha { left: 50%; top: auto; bottom: 0; transform: translateX(-50%); width: min(100vw, 460px); max-width: 100vw; border-radius: 18px 18px 0 0; max-height: 86vh; padding-bottom: env(safe-area-inset-bottom, 0px); }
.pr-menu-cab { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 6px; position: sticky; top: 0; background: var(--surface); z-index: 1; }
.pr-menu-cab h3 { margin: 0; font: 400 22px var(--font-serif); }
.pr-menu-cab button { width: 36px; height: 36px; border: none; background: var(--sunken); border-radius: 50%; font-size: 16px; cursor: pointer; }
.pr-menu-bloco { padding: 10px 16px 14px; border-top: 1px solid var(--hair); }
.pr-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pr-chip { height: 34px; padding: 0 13px; border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-pill); font-size: 13px; display: inline-flex; align-items: center; gap: 6px; color: var(--ink); text-decoration: none; }
.pr-chip.on { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.pr-chip.pr-alerta { border-color: #E8733C; color: #A84C18; background: #FFF3EA; }
.pr-chip.pr-alerta.on { background: #E8733C; color: #fff; }
.pr-chip .pr-n { background: transparent; border: none; padding: 0; opacity: .8; }
.pr-menu-rodape { display: flex; gap: 8px; padding: 12px 16px 16px; border-top: 1px solid var(--hair); position: sticky; bottom: 0; background: var(--surface); }
.pr-menu-rodape .btn { flex: 1; text-align: center; }
.pr-acao { display: grid; gap: 1px; width: 100%; text-align: left; padding: 11px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); margin-top: 8px; cursor: pointer; color: var(--ink); text-decoration: none; font: inherit; }
.pr-acao:hover { background: var(--sunken); }
.pr-acao b { font-weight: 500; font-size: 14px; } .pr-acao span { font-size: 12px; color: var(--muted); }
.pr-atual-corpo { padding: 6px 16px 14px; display: grid; gap: 12px; }
.pr-estado { padding: 11px 13px; border-radius: var(--r-md); font-size: 13.5px; }
.pr-estado.ok { background: var(--green-soft); color: var(--green-ink); }
.pr-estado.aviso { background: #FFF3EA; border: 1px solid #E8733C; color: #A84C18; }
.pr-estado.info { background: var(--gold-soft); color: var(--gold-ink); }
.pr-estado .pr-acoes { margin-top: 10px; }
.pr-res-lista { display: grid; gap: 6px; max-height: 230px; overflow-y: auto; }
.pr-res { display: grid; gap: 1px; text-align: left; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); cursor: pointer; font: inherit; color: var(--ink); }
.pr-res:hover { background: var(--gold-soft); }
.pr-res b { font-weight: 500; font-size: 13.5px; } .pr-res span { font-size: 11.5px; color: var(--muted); }
.pr-log { display: grid; gap: 4px; font-size: 12.5px; color: var(--muted); }
.pr-log > div { display: flex; justify-content: space-between; gap: 10px; padding: 6px 10px; background: var(--sunken); border-radius: var(--r-sm); }
.pr-log b { font-family: var(--font-mono); font-weight: 500; color: var(--ink); }
.pr-toast { position: fixed; left: 50%; bottom: 96px; transform: translate(-50%, 10px); background: var(--ink); color: var(--cream); padding: 10px 14px; border-radius: 12px; font-size: 12.5px; opacity: 0; pointer-events: none; transition: .18s; z-index: 80; max-width: min(480px, calc(100% - 32px)); text-align: center; }
.pr-toast.on { opacity: 1; transform: translate(-50%, 0); } .pr-toast.erro { background: var(--red); }

/* abas do Estoque no celular: 3 por linha em vez de uma fileira que rola pro lado */
@media (max-width: 900px) {
  .abas-mob.abas-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; overflow: visible; }
  .abas-mob.abas-grade .aba-mob { text-align: center; padding-inline: 4px; white-space: nowrap; height: 38px; }
}

/* campo de senha/token com botões Mostrar e Copiar ao lado */
.campo-segredo { display: flex; gap: 6px; align-items: center; }
.campo-segredo input { flex: 1; min-width: 0; }
.campo-segredo .btn-outline { flex: none; height: 38px; }
.segredo-senha { padding: 12px 14px; border: 1px solid var(--gold); background: var(--gold-soft); border-radius: var(--r-md); }
.segredo-senha .campo-segredo .btn, .segredo-senha .campo-segredo .btn-outline { height: 40px; }
.segredo-senha-erro { color: var(--red); font-size: 12.5px; min-height: 16px; margin-top: 4px; }
.grade-campos .campo.campo-largo { grid-column: 1 / -1; }

/* ============ Estoque → Reservas (protótipo aprovado: "Reservas de Estoque") ============ */
.rv { --rv-laranja: #E8733C; --rv-laranja-ink: #A84C18; --rv-laranja-soft: #FFF3EA; --rv-azul: #3E4C8A; --rv-azul-soft: #E9ECF7; }
.rv-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.rv-titulo { margin: 2px 0 0; font: 400 28px/1.1 var(--font-serif); }
.rv-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
@media (max-width: 560px) { .rv-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rv-kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 10px 12px; min-width: 0; }
.rv-kpi b { display: block; font: 600 22px/1 var(--font-mono); } .rv-kpi span { font-size: 11.5px; color: var(--muted); }
.rv-kpi.alerta b { color: var(--rv-laranja-ink); } .rv-kpi.ok b { color: var(--green-ink); }
.rv-faixa { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); margin-bottom: 10px; font-size: 13px; }
.rv-faixa-txt { flex: 1 1 220px; min-width: 0; } .rv-faixa-txt small { display: block; color: var(--muted); font-size: 11.5px; margin-top: 2px; }
.rv-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 10px; }
.rv-barra .btn.rv-ativo { background: var(--gold-soft); border-color: var(--gold); color: var(--gold-ink); }
.rv-contagem { font-size: 12.5px; color: var(--muted); } .rv-contagem a { margin-left: 6px; color: var(--gold-ink); }
.rv-lista { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) { .rv-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rv-cartao { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 12px 13px; display: grid; gap: 8px; min-width: 0; }
.rv-cartao.rv-acao { border-left: 4px solid var(--rv-laranja); }
.rv-cartao.rv-resolvida { background: var(--sunken); } .rv-cartao.rv-resolvida .rv-nome { color: var(--muted); }
.rv-topo { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: start; }
.rv-nome { font-weight: 500; font-size: 14.5px; line-height: 1.25; }
.rv-meta { font-size: 12px; color: var(--muted); margin-top: 2px; } .rv-meta b { color: var(--ink); font-weight: 500; }
.rv-qtd { text-align: right; font: 600 22px/1 var(--font-mono); } .rv-qtd small { display: block; font: 400 10.5px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-top: 3px; }
.rv-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.rv-tag { display: inline-flex; align-items: center; gap: 5px; min-height: 22px; padding: 2px 9px; border-radius: var(--r-pill); font-size: 11.5px; background: var(--sunken); border: 1px solid var(--hair); color: var(--muted); }
.rv-tag.geral { background: var(--gold-soft); color: var(--gold-ink); border-color: transparent; } .rv-tag.vend { background: var(--rv-azul-soft); color: var(--rv-azul); border-color: transparent; }
.rv-tag.sem { background: var(--rv-laranja-soft); color: var(--rv-laranja-ink); border-color: var(--rv-laranja); font-weight: 500; } .rv-tag.velha { background: var(--red-soft); color: var(--red); border-color: transparent; }
.rv-tag.ok { background: var(--green-soft); color: var(--green-ink); border-color: transparent; font-weight: 500; } .rv-tag.manual { background: var(--ink); color: var(--cream); border-color: transparent; }
.rv-linha { font-size: 12.5px; padding: 6px 10px; background: var(--sunken); border-radius: var(--r-sm); color: var(--muted); } .rv-linha b { color: var(--ink); font-weight: 500; }
.rv-acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rv-acoes .btn { height: 38px; padding: 0 14px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface); font-weight: 500; white-space: nowrap; cursor: pointer; color: var(--ink); }
.rv-acoes .btn.rv-mini { height: 34px; padding: 0 12px; font-size: 13px; }
.rv-acoes .btn.rv-escuro { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.rv-acoes .btn.rv-verde { background: var(--green-ink); border-color: var(--green-ink); color: #fff; font-weight: 600; }
.rv-link { border: none; background: none; padding: 0; color: var(--muted); text-decoration: underline; font-size: 12.5px; cursor: pointer; }
.rv-grupo { margin: 16px 0 8px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.rv-sub { margin: 0; font: 400 22px/1.15 var(--font-serif); } .rv-dica { font-size: 12.5px; color: var(--muted); }
.rv-vazio { padding: 14px; text-align: center; color: var(--muted); background: var(--surface); border: 1px dashed var(--line); border-radius: var(--r-lg); }
.rv-aviso { padding: 10px 12px; margin-bottom: 10px; background: var(--gold-soft); color: var(--gold-ink); border-radius: var(--r-md); font-size: 13px; }
.rv-sub-abas { display: flex; gap: 6px; flex: 1 1 260px; }
.rv-sub-abas a { flex: 1 1 0; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-md); font-weight: 500; font-size: 13.5px; color: var(--ink); text-decoration: none; text-align: center; padding: 0 6px; }
.rv-sub-abas a[aria-selected="true"] { background: var(--gold-soft); border-color: var(--gold); color: var(--gold-ink); }

/* janelas (conferência, nova reserva, pedir a outro, dar baixa): de baixo no celular, no meio no computador */
.rv-fundo { position: fixed; inset: 0; background: rgba(10,17,48,.35); z-index: 70; }
.rv-folha { position: fixed; z-index: 71; left: 50%; bottom: 0; transform: translateX(-50%); width: min(100vw, 480px); max-height: 88vh; overflow-y: auto; background: var(--surface); border-radius: 18px 18px 0 0; padding: 16px; display: grid; gap: 12px; box-shadow: 0 -18px 50px -12px rgba(10,17,48,.45); padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 701px) { .rv-folha { bottom: auto; top: 50%; transform: translate(-50%, -50%); border-radius: 18px; } }
.rv-folha h3 { margin: 0; font: 400 22px var(--font-serif); }
.rv-conf-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); }
.rv-stepper { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.rv-stepper button { width: 44px; height: 44px; border: none; background: var(--sunken); font-size: 20px; cursor: pointer; } .rv-stepper output { min-width: 56px; text-align: center; font: 600 17px var(--font-mono); }
.rv-bipar { display: flex; gap: 8px; } .rv-bipar input { flex: 1; min-width: 0; height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-md); font: 500 15px var(--font-mono); background: var(--surface); color: var(--ink); }
.rv-estado { padding: 10px 12px; border-radius: var(--r-md); font-size: 13px; } .rv-estado.info { background: var(--gold-soft); color: var(--gold-ink); } .rv-estado.alerta { background: var(--rv-laranja-soft); color: var(--rv-laranja-ink); border: 1px solid var(--rv-laranja); } .rv-estado.erro { background: var(--red-soft); color: var(--red); }
.rv-botoes { display: flex; gap: 8px; flex-wrap: wrap; } .rv-botoes .btn { height: 44px; padding: 0 16px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface); font-weight: 500; cursor: pointer; color: var(--ink); } .rv-botoes .btn.ouro { flex: 1; background: var(--gold); border-color: var(--gold); font-weight: 600; } .rv-botoes .btn.verde { flex: 1; background: var(--green-ink); border-color: var(--green-ink); color: #fff; font-weight: 600; } .rv-botoes .btn[disabled] { opacity: .45; cursor: not-allowed; }
.rv-campo { display: grid; gap: 6px; font-size: 12.5px; color: var(--muted); min-width: 0; }
.rv-campo input[type=text] { height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-md); font: 15px var(--font-sans); color: var(--ink); background: var(--surface); width: 100%; }
.rv-achados { display: grid; gap: 6px; max-height: 190px; overflow-y: auto; }
.rv-achado { display: grid; gap: 1px; text-align: left; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); cursor: pointer; font: inherit; color: var(--ink); } .rv-achado:hover { background: var(--gold-soft); border-color: var(--gold); }
.rv-achado small { color: var(--muted); font-size: 11.5px; }
.rv-sugestao { padding: 10px 12px; border-radius: var(--r-md); background: var(--sunken); font-size: 13px; line-height: 1.45; } .rv-sugestao b { font-weight: 500; }
.rv-escolha { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; text-align: left; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); cursor: pointer; font: inherit; color: var(--ink); }
.rv-escolha[disabled] { opacity: .5; cursor: not-allowed; } .rv-escolha small { display: block; color: var(--muted); font-size: 12px; } .rv-escolha .rv-qtd { font-size: 20px; }
.rv-motivos { display: flex; flex-wrap: wrap; gap: 8px; }
.rv-toast { position: fixed; left: 50%; top: 14px; transform: translate(-50%, -12px); background: var(--ink); color: var(--cream); padding: 11px 16px; border-radius: 12px; font-size: 13px; opacity: 0; pointer-events: none; transition: .18s; z-index: 90; max-width: min(480px, calc(100% - 32px)); text-align: center; line-height: 1.4; }
.rv-toast.on { opacity: 1; transform: translate(-50%, 0); } .rv-toast.erro { background: var(--red); }

/* Carrinho/checkout do vendedor: aviso de produto acima do estoque dele */
.aviso-lista { margin: 6px 0 0; padding-left: 18px; }
.aviso-pergunta { margin-top: 8px; font-weight: 600; }
.car-aviso-estoque { align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 12px; }
.car-aviso-estoque .car-aviso-texto { flex: 1 1 260px; min-width: 0; }
@media (max-width: 900px) {
  .car-aviso-estoque form, .car-aviso-estoque .btn { width: 100%; }
}
.aviso-itens { list-style: none; padding-left: 0; display: grid; gap: 10px; }
.aviso-item-txt { min-width: 0; overflow-wrap: anywhere; }
.aviso-item-acoes, .car-falta-acoes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.car-falta-acoes { margin-top: 8px; }
.car-falta-acoes form { margin: 0; }
.aviso-dica { display: block; font-weight: 400; font-size: 12px; margin-top: 2px; }
.car-reservas { border: 1px solid var(--hair); border-radius: var(--r-md); margin: 12px 0; overflow: hidden; }
.car-reservas-cab { padding: 10px 14px; font-weight: 600; font-size: 13px; background: var(--sunken); display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; }
.car-reserva { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--hair); }
.car-reserva-txt { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.car-reserva form { margin: 0; flex: none; }
@media (max-width: 900px) { .car-reserva { flex-wrap: wrap; } .car-reserva form, .car-reserva form .btn { width: 100%; } }
.car-reservas-abas { display: flex; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--hair); }
.car-reservas-aba { flex: 1 1 0; min-width: 0; height: 38px; border: 1px solid var(--ink); background: var(--surface, #fff); border-radius: var(--r-pill); font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink); cursor: pointer; white-space: nowrap; }
.car-reservas-aba.on { background: var(--ink); color: #fff; }
.car-reserva-vazio { padding: 12px 14px; border-top: 1px solid var(--hair); font-size: 12.5px; color: var(--muted); }
.car-reservas-n { display: inline-block; min-width: 20px; padding: 1px 6px; margin-right: 4px; border-radius: var(--r-pill); background: var(--gold); color: var(--ink); font-size: 11.5px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.car-reserva-falta { background: var(--red-soft); }
.car-reserva-falta .car-reserva-txt b, .car-reserva-falta .car-reserva-txt .apoio { color: var(--red); }

/* Carrinho do vendedor: quadro "Seu estoque neste pedido" */
.car-estoque { border: 1px solid var(--hair); border-radius: var(--r-md); margin: 12px 0; overflow: hidden; }
.car-estoque-alerta { border-color: var(--gold); }       /* falta de estoque é atenção (amarelo); vermelho fica para vencido e erro */
.car-estoque > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; background: var(--sunken); font-weight: 600; font-size: 13px; }
.car-estoque > summary::-webkit-details-marker { display: none; }
.car-estoque > summary::after { content: "▾"; margin-left: 4px; color: var(--muted); }
.car-estoque[open] > summary::after { content: "▴"; }
.car-estoque > summary .etiqueta { margin-left: auto; }
.car-estoque-linha { display: grid; grid-template-columns: minmax(0, 1fr) 48px 48px 56px; gap: 8px; align-items: center; padding: 8px 14px; border-top: 1px solid var(--hair); font-size: 12.5px; }
.car-estoque-cab { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.car-estoque-cab span:not(:first-child), .car-estoque-n { text-align: right; font-variant-numeric: tabular-nums; }
.car-estoque-nome { min-width: 0; overflow-wrap: anywhere; }
/* peças já prometidas a outro pedido (estoque_reservas.guardado_em_outros_pedidos): o porquê da falta */
.car-estoque-guardado, .rsm-guardado, .aviso-guardado { display: block; font-size: 12px; color: var(--gold-ink); font-weight: 600; line-height: 1.35; margin-top: 2px; }
.car-estoque-sobra { font-weight: 700; }
.car-estoque-ok .car-estoque-sobra { color: var(--green-ink); }
.car-estoque-pouco .car-estoque-sobra { color: var(--gold-ink); }
.car-estoque-linha.car-estoque-falta { background: var(--gold-soft); color: var(--gold-ink); }
.car-estoque-linha.car-estoque-falta .car-estoque-sobra { color: var(--gold-ink); font-weight: 700; }

/* Catálogo do vendedor: saldo no card do produto */
.produto-saldo { font-size: 11.5px; font-weight: 600; margin: 2px 0 4px; padding: 2px 8px; border-radius: var(--r-pill); width: fit-content; background: var(--green-soft); color: var(--green-ink); }
.produto-saldo.pouco { background: var(--gold-soft); color: var(--gold-ink); }
.produto-saldo.falta { background: var(--red-soft); color: var(--red); }
/* estoque no cartão (admin e vendedor, 16/10/2026): Geral e cada vendedor numa linha só, do tamanho da antiga etiqueta "Você tem" */
.produto-estoques { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 3px; margin: 2px 0 4px; }
.pe-cel { display: grid; justify-items: center; line-height: 1.05; padding: 2px 2px 3px; border-radius: 7px; background: var(--green-soft); color: var(--green-ink); min-width: 0; }
.pe-cel small { font-size: 9px; font-weight: 600; letter-spacing: .02em; opacity: .85; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pe-cel b { font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pe-cel.zero { background: var(--sunken); color: var(--muted); }
.pe-cel.meu { box-shadow: inset 0 0 0 1.5px currentColor; }
.pe-cel.pouco { background: var(--gold-soft); color: var(--gold-ink); }
.pe-cel.falta { background: var(--gold-soft); color: var(--gold-ink); }

/* Balão "Seu carrinho" do catálogo: seletor de quantidade centralizado (o botão herdava um espaçamento que
   empurrava o − e o + pra baixo do número) */
.carrinho-balao-form .stepper { width: 92px; height: 30px; padding: 0; border-color: var(--line); border-radius: 8px; }
.carrinho-balao-form .stepper button { display: flex; align-items: center; justify-content: center; flex: none; width: 28px; min-width: 0; height: 100%; padding: 0; line-height: 1; font-size: 16px; color: var(--ink); }
.carrinho-balao-form .stepper .qtd { flex: 1; width: auto; min-width: 0; height: 100%; padding: 0; line-height: 30px; text-align: center; -moz-appearance: textfield; }

/* Card de produto: o "+" inicial e o − / + do seletor ficam no centro exato do botão (antes o texto herdava o
   espaçamento interno do botão e descia uns pixels) */
.produto-qtd .btn-add-inicial,
.produto-qtd .qtd-stepper button { display: flex; align-items: center; justify-content: center; padding: 0; line-height: 1; }
.produto-qtd .qtd-valor { display: flex; align-items: center; justify-content: center; height: 100%; line-height: 1; }

/* Checkout no celular: os produtos viram uma lista em colunas (Produto | Qtd | Desc. | Total), uma linha por item,
   com o preço unitário e o estoque do vendedor embaixo do nome. Antes a tabela espremia o nome em 5 linhas e
   cortava o campo de desconto. Mesmos <tr>/<td> e atributos de sempre — o JS dos totais não muda. */
.ck-estoque-linha { margin-top: 3px; }
@media (max-width: 900px) {
  .tabela-checkout-itens, .tabela-checkout-itens thead, .tabela-checkout-itens tbody { display: block; width: 100%; }
  /* 17/10/2026: foto · nome numa linha com "2x R$ 257,42" embaixo · desconto · total (protótipo do Fechar pedido) */
  .tabela-checkout-itens tr {
    display: grid; align-items: center; column-gap: 8px; row-gap: 1px; padding: 8px 10px;
    grid-template-columns: 36px 26px minmax(0, 1fr) 66px;
    grid-template-areas: "foto nome nome tot" "foto qtd preco tot";
  }
  .tabela-checkout-itens.ck-com-desc tr {
    grid-template-columns: 36px 26px minmax(0, 1fr) 56px 66px;
    grid-template-areas: "foto nome nome desc tot" "foto qtd preco desc tot";
  }
  .tabela-checkout-itens td, .tabela-checkout-itens th { display: block; padding: 0; border: 0; min-width: 0; }
  .tabela-checkout-itens tbody tr { border-top: 1px solid var(--hair); }
  .tabela-checkout-itens thead { display: none; }
  .tabela-checkout-itens .ck-th-foto, .tabela-checkout-itens .ck-th-preco { display: none; }
  /* cabeçalho das colunas */
  .tabela-checkout-itens thead tr { grid-template-areas: "nome qtd tot"; background: var(--sunken); padding-block: 6px; }
  .tabela-checkout-itens.ck-com-desc thead tr { grid-template-areas: "nome qtd desc tot"; }
  .tabela-checkout-itens th { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }
  .tabela-checkout-itens .ck-th-nome { grid-area: nome; }
  .tabela-checkout-itens .ck-th-qtd { grid-area: qtd; text-align: center; }
  .tabela-checkout-itens .ck-th-desc { grid-area: desc; text-align: center; }
  .tabela-checkout-itens .ck-th-total { grid-area: tot; text-align: right; }
  /* linhas */
  .tabela-checkout-itens .ck-nome { grid-area: nome; font-size: 12.5px; line-height: 1.3; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 2px 4px; }
  .tabela-checkout-itens .ck-nome-txt { flex: 1 1 0; min-width: 0; display: block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-weight: 600; }
  .tabela-checkout-itens .ck-nome .btn-info-inline { flex: none; margin: 0; }
  .tabela-checkout-itens .ck-estoque-linha { flex: 0 0 100%; margin-top: 2px; }
  .tabela-checkout-itens .ck-preco { grid-area: preco; font-size: 11.5px; text-align: left; color: var(--muted); }
  .tabela-checkout-itens .ck-qtd { grid-area: qtd; font-size: 11.5px; color: var(--muted); text-align: left !important; }
  .tabela-checkout-itens .ck-nome { overflow: hidden; }
  .tabela-checkout-itens .ck-desc { grid-area: desc; white-space: nowrap; font-size: 11px; color: var(--muted); text-align: center; }
  .tabela-checkout-itens .ck-desc { display: flex; align-items: center; justify-content: center; gap: 2px; }
  .tabela-checkout-itens .ck-desc .campo-desconto-item { width: 40px !important; padding: 0.3rem 0.1rem !important; text-align: center; }
  .tabela-checkout-itens .ck-total { grid-area: tot; text-align: right; font-size: 13px; font-weight: 700; }
}

/* Checkout do vendedor/admin: dados do cliente num balão (fechado = razão social, fantasia e cidade) */
.ck-cliente { border: 1px solid var(--hair); border-radius: var(--r-md); background: var(--surface, #fff); overflow: hidden; }
.ck-cliente.aberto { border-color: var(--ink); }
.ck-cliente-barra { display: flex; align-items: center; gap: 8px; padding: 8px; }
.ck-cliente-resumo { flex: 1 1 0; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; row-gap: 1px; align-items: center;
  text-align: left; padding: 6px 8px; border: 0; background: transparent; font: inherit; color: var(--ink); cursor: pointer; }
.ck-cliente-l1 { grid-column: 1; display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 14px; }
.ck-cliente-l1 b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.ck-cliente-l2 { grid-column: 1; font-size: 12px; color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ck-cliente-seta { grid-column: 2; grid-row: 1 / span 2; color: var(--muted); transition: transform .15s; }
.ck-cliente.aberto .ck-cliente-seta { transform: rotate(180deg); }
.ck-cliente-novo { flex: none; white-space: nowrap; }
.ck-cliente-detalhe { padding: 12px; border-top: 1px solid var(--hair); background: var(--sunken); }
.ck-cliente-detalhe[hidden] { display: none; }
@media (max-width: 900px) {
  .ck-cliente-barra { flex-wrap: wrap; }
  .ck-cliente-novo { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { .ck-cliente-seta { transition: none; } }

/* Checkout: Subtotal, Desconto e Total na mesma linha (rótulo em cima, valor embaixo) em vez de três linhas empilhadas */
.resumo-total { max-width: none; margin-left: 0; flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 6px 14px;
  padding: 10px 12px; border: 1px solid var(--hair); border-radius: var(--r-md); background: var(--surface, #fff); }
.resumo-total .linha-r { flex: 1 1 0; min-width: 0; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 3px; margin: 0; }
.resumo-total .linha-r > span:first-child, .resumo-total .linha-r > label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; }
.resumo-total .linha-r .num { font-size: 14px; white-space: nowrap; }
.resumo-total .linha-r input { width: 100%; max-width: 130px; height: 32px; text-align: right; }
.resumo-total .linha-r.total { align-items: flex-end; border-top: 0; padding-top: 0; margin-top: 0; font-size: inherit; font-weight: inherit; }
.resumo-total .linha-r.total .num { font-size: 17px; font-weight: 700; color: var(--ink); }
.resumo-total .hint { flex: 0 0 100%; margin: 0; }

/* Desconto do pedido: botões % / R$ ao lado do campo */
.ck-desc-pedido { display: flex; align-items: center; gap: 6px; width: 100%; }
.resumo-total .ck-desc-pedido input { flex: 1 1 0; min-width: 0; width: auto; max-width: none; }
.ck-desc-modo { display: inline-flex; flex: none; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; height: 32px; }
.ck-desc-modo button { min-width: 0; padding: 0 8px; border: 0; background: var(--surface, #fff); color: var(--muted); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1; }
.ck-desc-modo button + button { border-left: 1px solid var(--line); }
.ck-desc-modo button[aria-pressed="true"] { background: var(--ink); color: #fff; }
/* desconto do pedido: a coluna do meio ganha o espaço que sobra (os botões % / R$ + o campo precisam de largura) */
.resumo-total .linha-r:not(.campo-desconto-pedido-linha) { flex: 0 0 auto; }
.resumo-total .campo-desconto-pedido-linha { flex: 1 1 0; min-width: 118px; }
.ck-desc-modo button { padding: 0 7px; }
.resumo-total .ck-desc-pedido input { padding: 0 6px; }
/* "Desconto nos itens": uma linha só, embaixo da faixa de Subtotal / Desconto / Total, com o rótulo e o valor nas pontas */
.resumo-total .linha-r.linha-desc-itens:not(.campo-desconto-pedido-linha) { order: 10; flex: 0 0 100%; flex-direction: row; align-items: baseline; justify-content: space-between; padding-top: 6px; border-top: 1px solid var(--hair); }
.resumo-total .linha-r.linha-desc-itens[hidden] { display: none; }
.resumo-total .linha-r.linha-desc-itens > span:first-child { font-size: 12.5px; text-transform: none; letter-spacing: 0; font-weight: 400; }
.resumo-total .hint { order: 11; }
/* Subtotal / Desconto / Total: os três títulos na mesma altura e os três valores na mesma linha (cada coluna começa
   no topo, título com altura fixa e valor numa faixa de 32px com o conteúdo centralizado) */
.resumo-total { align-items: flex-start; }
.resumo-total .linha-r, .resumo-total .linha-r.total { justify-content: flex-start; gap: 4px; }
.resumo-total .linha-r > span:first-child, .resumo-total .linha-r > label { display: block; height: 14px; line-height: 14px; margin: 0; }
.resumo-total .linha-r > .num, .resumo-total .ck-desc-pedido { display: flex; align-items: center; height: 32px; }
.resumo-total .linha-r > .num { line-height: 1; }
.resumo-total .linha-r.total { align-items: flex-end; }

/* Checkout: entrega em dois botões (Pronta entrega | Encomenda) no lugar do cartão com títulos e rádios */
.ck-data-venda { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; font-size: 14px; color: var(--muted); }
.ck-data-venda input { width: auto; min-width: 0; padding: 6px 10px; font-size: 14px; color: inherit; border: 1px solid var(--line); border-radius: 8px; }
.ck-entrega { display: flex; gap: 8px; }
.ck-entrega-opcao { flex: 1 1 0; min-width: 0; position: relative; display: block; cursor: pointer; }
.ck-entrega-opcao input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.ck-entrega-opcao span { display: flex; align-items: center; justify-content: center; height: 40px; padding: 0 10px; border: 1px solid var(--ink); border-radius: var(--r-pill);
  background: var(--surface, #fff); color: var(--ink); font-size: 13.5px; font-weight: 600; white-space: nowrap; transition: background .12s, color .12s; }
.ck-entrega-opcao input:checked + span { background: var(--ink); color: #fff; }
.ck-entrega-opcao input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .ck-entrega-opcao span { transition: none; } }

/* ---- Carrinho otimizado (mesma lógica do checkout) ---------------------------------------------------------- */
/* Subtotal | Desconto % | Total numa linha só (rótulo em cima, valor embaixo), botões lado a lado */
.car-totais { display: flex; align-items: flex-start; gap: 6px 12px; }
.car-totais-cel { flex: 0 0 auto; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.car-totais-desc { flex: 1 1 0; }
.car-totais-total { margin-left: auto; align-items: flex-end; }
.car-totais-rot { display: block; height: 14px; line-height: 14px; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; }
.car-totais-val { display: flex; align-items: center; height: 32px; line-height: 1; white-space: nowrap; font-size: 14px; }
.car-totais-total .car-totais-val { font-size: 19px; font-weight: 700; color: var(--ink); }
.car-totais-desc .car-totais-val input { width: 100%; max-width: 90px; height: 32px; padding: 0 8px; text-align: right; border: 1px solid var(--line); border-radius: var(--r-sm); font: inherit; font-size: 13px; }
.car-limite { margin: 8px 0 0; }
.car-botoes { display: flex; gap: 8px; margin-top: 12px; }
.car-botoes form { flex: 1 1 0; margin: 0; min-width: 0; }
.car-botoes .car-btn-fechar, .car-botoes .car-btn-voltar { margin: 0; height: 40px; }
.car-botoes > .car-btn-fechar { flex: 1 1 0; }
.car-botoes > .car-btn-voltar { flex: 1 1 0; }
.car-botoes form .btn { width: 100%; }

/* cliente: nome e documento sempre à mostra; os pontos ficam no cartão do Clube DFPet logo abaixo */
.car-cliente-cab { display: flex; flex-direction: column; min-width: 0; margin-bottom: 10px; }
.car-cliente-cab .car-cliente-nome { font-size: 17px; margin: 1px 0 0; overflow-wrap: anywhere; }
.car-cliente-cab .car-cliente-doc { margin: 0; }
.car-colunas { display: none; }

@media (max-width: 900px) {
  /* itens: lista em colunas (Produto | Qtd | Total | ✕), sem foto, uma linha por produto */
  .car-colunas { display: grid; grid-template-columns: minmax(0, 1fr) 88px 70px 28px; gap: 8px; padding: 6px 12px;
    background: var(--sunken); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }
  .car-colunas span:nth-child(2) { text-align: center; }
  .car-colunas span:nth-child(3) { text-align: right; }
  .car-linha { --cols: minmax(0, 1fr) 88px 70px 28px; gap: 4px 8px; padding: 8px 12px; align-items: center; row-gap: 4px; }
  .car-linha .car-foto { display: none; }
  .car-linha .celula { grid-column: 1; min-width: 0; }
  .car-linha .car-qtd, .car-linha .car-total { grid-column: auto; }
  .car-linha .car-qtd .stepper { width: 88px; height: 30px; }
  .car-linha .car-qtd .stepper button { width: 26px; }
  .car-linha .car-qtd .stepper .qtd { width: auto; flex: 1; min-width: 0; padding: 0; text-align: center; font-size: 13px; }
  .car-linha .car-total { text-align: right; font-size: 13px; font-weight: 700; }
  .car-linha .car-btn-remover { width: 28px; height: 28px; padding: 0; }
  .car-linha .car-nome { font-size: 12.5px; line-height: 1.3; }
  .car-linha-premio { --cols: minmax(0, 1fr) 88px 70px 28px; }
  /* resumo: botões lado a lado, texto curto */
  .car-aside { gap: 10px; }
  .car-cab { padding: 10px 12px; }
  .car-cab-titulo { font-size: 17px; }
}
/* Botões "Tirar do pedido / Reservar à parte": linha própria embaixo do item, lado a lado */
.car-linha > .car-falta-acoes { grid-column: 2 / -1; margin-top: 0; }
@media (max-width: 900px) { .car-linha > .car-falta-acoes { grid-column: 1 / -1; } .car-linha > .car-falta-acoes form { flex: 1 1 0; } .car-linha > .car-falta-acoes .btn { width: 100%; } }
/* no celular o resumo empilha em coluna: cada cartão tem a altura do seu conteúdo (a regra de 260px era pra linha) */
@media (max-width: 900px) { .car-aside > * { flex: 0 0 auto; } }

/* desconto do carrinho: botões % / R$ + campo na mesma coluna */
.car-totais-desc { min-width: 118px; }
.car-totais-desc .car-totais-val { gap: 6px; }
.car-totais-desc .car-totais-val input { flex: 1 1 0; min-width: 0; width: auto; max-width: none; padding: 0 6px; }
/* resumo do carrinho no celular: as três colunas (Subtotal | Desconto | Total) precisam caber na largura do cartão */
.car-totais { gap: 6px 8px; }
.car-totais-desc { min-width: 0; }
.car-totais-desc .car-totais-val input { min-width: 36px; }
@media (max-width: 900px) { .car-totais-total .car-totais-val { font-size: 16px; } .car-totais-val { font-size: 13px; } }
/* botões "Sem pedido" / "Em outro pedido": número + texto no centro exato (horizontal e vertical) */
.car-reservas-aba { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0; line-height: 1; }
.car-reservas-n { display: inline-flex; align-items: center; justify-content: center; height: 20px; margin: 0; padding: 0 6px; line-height: 1; }
/* desconto: o campo é pequeno (cabe ~6 dígitos) pra Subtotal | Desconto | Total ficarem sempre na mesma linha */
.resumo-total .campo-desconto-pedido-linha { flex: 0 1 auto; min-width: 0; }
.resumo-total .ck-desc-pedido { width: auto; }
.resumo-total .ck-desc-pedido input { flex: 0 1 68px; width: 68px; min-width: 44px; }
.resumo-total .linha-r.total { margin-left: auto; }
.car-totais-desc { flex: 0 1 auto; }
.car-totais-desc .car-totais-val input { flex: 0 1 62px; width: 62px; min-width: 40px; }
@media (max-width: 400px) {
  .resumo-total, .car-totais { gap: 6px 8px; }
  .resumo-total .linha-r.total .num, .car-totais-total .car-totais-val { font-size: 15px; }
  .ck-desc-modo button { padding: 0 6px; }
}
@media (max-width: 345px) {
  .car-resumo .cartao-corpo, .resumo-total { padding-left: 10px; padding-right: 10px; }
  .car-totais, .resumo-total { gap: 6px 6px; }
  .car-totais-desc .car-totais-val input, .resumo-total .ck-desc-pedido input { flex-basis: 44px; width: 44px; min-width: 36px; padding: 0 4px; }
  .car-totais-val, .resumo-total .linha-r .num { font-size: 12px; }
  .car-totais-total .car-totais-val, .resumo-total .linha-r.total .num { font-size: 14px; }
  .car-totais-rot, .resumo-total .linha-r > span:first-child, .resumo-total .linha-r > label { font-size: 10px; letter-spacing: .03em; }
  .ck-desc-modo button { padding: 0 5px; font-size: 11px; }
}
/* etiqueta de estoque dentro da coluna estreita do nome: quebra a linha em vez de invadir a coluna ao lado */
@media (max-width: 900px) {
  .tabela-checkout-itens .ck-estoque, .car-linha .etiqueta { white-space: normal; max-width: 100%; line-height: 1.25; }
}
@media (max-width: 345px) {
  .tabela-checkout-itens.ck-com-desc tr { grid-template-columns: minmax(0, 1fr) 24px 50px 62px; column-gap: 6px; }
  .tabela-checkout-itens .ck-desc .campo-desconto-item { width: 36px !important; }
  .tabela-checkout-itens .ck-total { font-size: 12px; }
}

/* Subtotal | Desconto | Total: o desconto fica no centro da linha (as pontas dividem o espaço igualmente) */
.car-totais-cel:not(.car-totais-desc) { flex: 1 1 0; }
.car-totais-total { margin-left: 0; }
.car-totais-desc { flex: 0 0 auto; }
.resumo-total .linha-r:not(.campo-desconto-pedido-linha) { flex: 1 1 0; }
.resumo-total .campo-desconto-pedido-linha { flex: 0 0 auto; }
.resumo-total .linha-r.total { margin-left: 0; }

/* campos de desconto: só digitação, sem as setinhas de aumentar/diminuir */
#desconto-carrinho, #desconto-pedido-entrada, .campo-desconto-item { -moz-appearance: textfield; appearance: textfield; }
#desconto-carrinho::-webkit-outer-spin-button, #desconto-carrinho::-webkit-inner-spin-button,
#desconto-pedido-entrada::-webkit-outer-spin-button, #desconto-pedido-entrada::-webkit-inner-spin-button,
.campo-desconto-item::-webkit-outer-spin-button, .campo-desconto-item::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* campo de desconto mais estreito (só digitação): sobra espaço entre Subtotal, Desconto e Total */
.resumo-total .ck-desc-pedido input { flex-basis: 54px; width: 54px; min-width: 40px; }
.car-totais-desc .car-totais-val input { flex-basis: 50px; width: 50px; min-width: 38px; }
.resumo-total, .car-totais { column-gap: 10px; }
/* a etiqueta de estoque só quebra de linha em telas bem pequenas (≤345px); acima disso fica numa linha só */
@media (min-width: 346px) and (max-width: 900px) {
  .tabela-checkout-itens .ck-estoque, .car-linha .etiqueta { white-space: nowrap; }
}

/* Clube DFPet no carrinho: o cartão já mostra os pontos e a barra; tocar nele abre a lista de prêmios pra trocar */
.car-clube-det > summary { list-style: none; cursor: pointer; display: block; }
.car-clube-det > summary::-webkit-details-marker { display: none; }
.car-clube-topo { align-items: center; justify-content: space-between; }
.car-clube-acao { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border: 1px solid var(--gold); border-radius: var(--r-pill);
  color: var(--gold); font-size: 11px; font-weight: 700; white-space: nowrap; }
.car-clube-acao::after { content: "▾"; font-size: 10px; }
.car-clube-det[open] .car-clube-acao { background: var(--gold); color: var(--ink); }
.car-clube-det[open] .car-clube-acao::after { content: "▴"; }
.car-clube-det > .car-troca-lista { padding-top: 2px; }

/* botão "i" sempre ao lado do nome do produto, na mesma linha; se o nome não couber, ele é abreviado (…) em até 2 linhas */
.car-nome { display: flex; align-items: flex-start; gap: 6px; }
.car-nome-txt { flex: 1 1 0; min-width: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.car-nome .btn-info-inline { flex: none; margin: 1px 0 0; }
.tabela-checkout-itens .ck-nome-txt { overflow-wrap: anywhere; }

/* Carrinho no celular: foto do produto de volta. A linha do item tem duas faixas: [foto | nome + preço + estoque | lixeira]
   em cima e [seletor de quantidade | total] embaixo — assim o nome (com o "i" ao lado) ganha espaço e só é abreviado
   se for realmente longo. */
@media (max-width: 900px) {
  .car-colunas { display: none; }
  .car-linha { --cols: 40px minmax(0, 1fr) auto 28px; align-items: start; column-gap: 10px; row-gap: 6px;
    grid-template-areas: "foto cel cel rem" "foto qtd tot tot"; }
  .car-linha .car-foto { display: block; grid-area: foto; width: 40px; height: 40px; border-radius: 8px; }
  .car-linha .celula { grid-area: cel; grid-column: auto; }
  .car-linha .car-qtd { grid-area: qtd; grid-column: auto; justify-self: start; align-self: center; }
  .car-linha .car-total { grid-area: tot; grid-column: auto; justify-self: end; align-self: center; font-size: 14px; }
  .car-linha > form:not(.car-qtd) { grid-area: rem; justify-self: end; }
  .car-linha > .car-falta-acoes { grid-column: 1 / -1; }
}
/* o "i" cola no fim do nome (nome curto = "i" logo depois; nome longo = nome abreviado e "i" na ponta) */
.car-nome-txt, .tabela-checkout-itens .ck-nome-txt { flex: 0 1 auto; }
@media (max-width: 900px) { .tabela-checkout-itens .ck-nome-txt { flex: 0 1 auto; } }

/* ---- Itens do carrinho e do checkout no celular: mesma lista em colunas, agora com a foto do produto ----------- */
@media (max-width: 900px) {
  /* CARRINHO: [foto | nome + preço + estoque | seletor − n + | total / lixeira] numa linha só */
  .car-colunas { display: grid; grid-template-columns: 36px minmax(0, 1fr) 80px 70px; column-gap: 8px; }
  .car-colunas span:nth-child(1) { grid-column: 1 / 3; text-align: left; }
  .car-colunas span:nth-child(2) { grid-column: 3; text-align: center; }
  .car-colunas span:nth-child(3) { grid-column: 4; text-align: right; }
  .car-colunas span:nth-child(4) { display: none; }
  .car-linha { --cols: 36px minmax(0, 1fr) 80px 70px; grid-template-columns: 36px minmax(0, 1fr) 80px 70px; column-gap: 8px; row-gap: 2px; align-items: center;
    grid-template-areas: "foto cel qtd tot" "foto cel qtd rem"; }
  .car-linha .car-foto { display: block; grid-area: foto; align-self: start; width: 36px; height: 36px; border-radius: 7px; }
  .car-linha .celula { grid-area: cel; align-self: start; }
  .car-linha .car-qtd { grid-area: qtd; justify-self: center; align-self: center; }
  .car-linha .car-qtd .stepper { width: 80px; }
  .car-linha .car-qtd .stepper button { width: 24px; }
  .car-linha .car-total { grid-area: tot; justify-self: end; align-self: end; font-size: 13px; }
  .car-linha > form:not(.car-qtd) { grid-area: rem; justify-self: end; align-self: start; }
  .car-linha .car-btn-remover { width: 26px; height: 26px; }
  .car-linha > .car-falta-acoes { grid-column: 1 / -1; }

  /* CHECKOUT: a foto entra na primeira coluna, ocupando as duas faixas da linha */
  /* 17/10/2026: o nome ocupa a linha de cima inteira e embaixo vem "4x R$ 257,42" (protótipo do Fechar pedido) */
  .tabela-checkout-itens tr { grid-template-columns: 36px 26px minmax(0, 1fr) 66px;
    grid-template-areas: "foto nome nome tot" "foto qtd preco tot"; }
  .tabela-checkout-itens.ck-com-desc tr { grid-template-columns: 36px 26px minmax(0, 1fr) 56px 66px;
    grid-template-areas: "foto nome nome desc tot" "foto qtd preco desc tot"; }
  .tabela-checkout-itens .ck-foto { display: block; grid-area: foto; align-self: start; width: auto; }
  .tabela-checkout-itens .ck-foto .carrinho-foto { width: 36px; height: 36px; border-radius: 7px; object-fit: contain; background: var(--sunken); font-size: 0; }
  .tabela-checkout-itens thead tr { grid-template-areas: "foto nome qtd tot"; }
  .tabela-checkout-itens.ck-com-desc thead tr { grid-template-areas: "foto nome qtd desc tot"; }
  .tabela-checkout-itens .ck-th-foto { display: block; grid-area: foto; }
  .tabela-checkout-itens .ck-desc .campo-desconto-item { width: 40px !important; }
}
@media (max-width: 345px) {
  .tabela-checkout-itens tr { grid-template-columns: 32px 24px minmax(0, 1fr) 62px; }
  .tabela-checkout-itens.ck-com-desc tr { grid-template-columns: 32px 24px minmax(0, 1fr) 48px 60px; }
  .tabela-checkout-itens .ck-foto .carrinho-foto { width: 32px; height: 32px; }
  .tabela-checkout-itens .ck-desc .campo-desconto-item { width: 34px !important; }
}

/* etiqueta de estoque em coluna estreita: quebra só no "·" (os espaços internos não quebram); "i" sempre ao lado do nome */
@media (max-width: 900px) {
  .tabela-checkout-itens .ck-estoque, .car-linha .etiqueta { white-space: normal; max-width: 100%; line-height: 1.25; }
  .tabela-checkout-itens .ck-nome-txt { max-width: calc(100% - 26px); }
  /* nome em até 3 linhas: abreviado numa linha só, "Alicate P/ Pet Pequeno" e "Grande" ficavam iguais */
  .tabela-checkout-itens .ck-nome-txt { white-space: normal; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; text-overflow: clip; }
}

/* ---- Colunas equilibradas: Qtd / Desc. / Total dividem o espaço em proporção e ficam centralizadas sob o título ----- */
@media (max-width: 900px) {
  /* CHECKOUT */
  /* (17/10/2026) as colunas do checkout ficam nas regras de cima: foto · nome com "qtd × preço" embaixo · desc. · total */
  .tabela-checkout-itens .ck-desc, .tabela-checkout-itens .ck-th-desc { justify-self: stretch; text-align: center; justify-content: center; }
  .tabela-checkout-itens .ck-total, .tabela-checkout-itens .ck-th-total { text-align: right; }
  /* CARRINHO */
  .car-colunas { grid-template-columns: 36px minmax(0, 2fr) minmax(84px, 1fr) minmax(70px, .9fr); }
  .car-linha { --cols: 36px minmax(0, 2fr) minmax(84px, 1fr) minmax(70px, .9fr);
    grid-template-columns: 36px minmax(0, 2fr) minmax(84px, 1fr) minmax(70px, .9fr); }
  .car-linha .car-qtd { justify-self: center; }
  .car-colunas span:nth-child(2) { text-align: center; }
}
@media (max-width: 345px) {
  .car-colunas, .car-linha { grid-template-columns: 32px minmax(0, 2fr) minmax(80px, 1fr) minmax(62px, .9fr); }
}

/* produto trocado no Clube: linha do checkout com 100% de desconto e total grátis */
.ck-premio { background: var(--gold-soft); }
.ck-desc-fixo { font-weight: 700; color: var(--gold-ink); white-space: nowrap; }
.ck-premio .ck-total { color: var(--green-ink); font-weight: 700; }

/* ---- Base dos campos: nada fica com a fonte/aparência do navegador ---------------------------------------------
   Campo, seletor, área de texto e botão herdam a fonte do app (antes alguns apareciam em Arial). Seletor sem classe
   ganha o mesmo borda/canto dos campos estilizados. `:where()` tem peso zero: qualquer regra mais específica
   (.campo select, .chip, .pr-busca input…) continua mandando. */
:where(input, select, textarea, button, option) { font-family: inherit; }
:where(select:not([class]), .sel-base) { border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface, #fff); color: var(--ink);
  min-height: 40px; padding: 0 10px; font-size: 14px; max-width: 100%; }

/* ── Carrinho, checkout e balão do catálogo: o que antes era style="" nos templates ── */
.car-vazio-ver { margin-left: auto; }
.car-limite-aberto { opacity: .7; }
.ck-enviar { align-self: flex-start; }
.car-cliente-nome-balao { font-size: 16px; margin: -2px 0 8px; }
.car-clube-balao { margin: 0 -20px 14px; }
.car-balao-vazio { margin-top: 6px; }
.car-balao-lista { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
.car-balao-item { display: flex; gap: 8px; align-items: center; }
.car-balao-info { min-width: 0; flex: 1; }
.car-balao-nome { font-size: 12.5px; line-height: 1.35; }
.car-balao-preco { font-size: 12px; color: var(--muted); }
.car-balao-rodape { margin-top: 12px; }
/* ── extraído de templates (es) — seletor com :not(#_): pesa como o style="" que ocupava o lugar (só id ou !important vencem) ── */
.es-1.es-1.es-1:not(#_) { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.es-2.es-2.es-2:not(#_) { display: inline-flex; align-items: center; text-decoration: none; height: 36px; padding: 0 15px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 10px; font-family: var(--font-sans); font-size: 13px; cursor: pointer; }
.es-3.es-3.es-3:not(#_) { display: flex; align-items: center; gap: 10px; background: var(--sunken); border-radius: 12px; padding: 11px 14px; margin-bottom: 16px; font-size: 12.5px; color: var(--muted); }
.es-4.es-4.es-4:not(#_) { flex: none; color: var(--gold-ink); }
.es-5.es-5.es-5:not(#_) { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; }
.es-6.es-6.es-6:not(#_) { padding: 15px 20px; border-bottom: 1px solid var(--line); display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.es-7.es-7.es-7:not(#_) { min-width: 0; flex: 1 1 260px; }
.es-8.es-8.es-8:not(#_) { font-family: var(--font-serif); font-size: 20px; font-weight: var(--peso-titulo); }
.es-9.es-9.es-9:not(#_) { font-size: 11.5px; color: var(--muted); }
.es-10.es-10.es-10:not(#_) { padding: 14px 20px; border-bottom: 1px solid var(--hair); background: var(--sunken); }
.es-11.es-11.es-11:not(#_) { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.es-12.es-12.es-12:not(#_) { font-size: 13px; }
.es-13.es-13.es-13:not(#_) { margin-left: auto; font-size: 11.5px; color: var(--muted); }
.es-14.es-14.es-14:not(#_) { height: 8px; border-radius: 20px; background: var(--surface); overflow: hidden; }
.es-15.es-15.es-15:not(#_) { padding: 14px 20px; border-bottom: 1px solid var(--hair); background: var(--success-bg); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.es-16.es-16.es-16:not(#_) { flex: none; }
.es-17.es-17.es-17:not(#_) { min-width: 0; flex: 1; }
.es-18.es-18.es-18:not(#_) { font-size: 13.5px; color: #1B8A4B; font-weight: 500; }
.es-19.es-19.es-19:not(#_) { font-size: 11.5px; color: #1B8A4B; }
.es-20.es-20.es-20:not(#_) { flex: none; height: 32px; padding: 0 13px; border: none; background: #1FA855; color: #fff; border-radius: 8px; font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.es-21.es-21.es-21:not(#_) { flex: none; height: 32px; padding: 0 13px; border: 1px solid #1B8A4B; background: var(--surface); color: #1B8A4B; border-radius: 8px; font-family: var(--font-sans); font-size: 12.5px; cursor: pointer; }
.es-22.es-22.es-22:not(#_) { padding: 12px 20px; border-bottom: 1px solid var(--hair); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.es-23.es-23.es-23:not(#_) { font-size: 11.5px; color: var(--muted); margin-right: 4px; }
.es-24.es-24.es-24:not(#_) { height: 30px; padding: 0 11px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 20px; font-family: var(--font-sans); font-size: 12px; cursor: pointer; }
.es-25.es-25.es-25:not(#_) { border-bottom: 1px solid var(--hair); }
.es-26.es-26.es-26:not(#_) { display: flex; align-items: center; gap: 14px; padding: 14px 20px; flex-wrap: wrap; }
.es-27.es-27.es-27:not(#_) { width: 34px; height: 34px; flex: none; border-radius: 10px; background: var(--sunken); display: flex; align-items: center; justify-content: center; color: var(--gold-ink); }
.es-28.es-28.es-28:not(#_) { min-width: 0; flex: 1 1 180px; }
.es-29.es-29.es-29:not(#_) { font-size: 14px; }
.es-30.es-30.es-30:not(#_) { display: flex; align-items: center; gap: 7px; margin-top: 4px; font-size: 11.5px; }
.es-31.es-31.es-31:not(#_) { color: #1B8A4B; }
.es-32.es-32.es-32:not(#_) { color: var(--gold-ink); }
.es-33.es-33.es-33:not(#_) { flex: none; height: 32px; padding: 0 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 8px; font-family: var(--font-sans); font-size: 12.5px; cursor: pointer; }
.es-34.es-34.es-34:not(#_) { flex: none; height: 32px; padding: 0 13px; border: none; background: var(--gold); color: #0A1130; border-radius: 8px; font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.es-35.es-35.es-35:not(#_) { flex: none; height: 32px; padding: 0 13px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 8px; font-family: var(--font-sans); font-size: 12.5px; cursor: pointer; }
.es-36.es-36.es-36:not(#_) { flex: none; height: 32px; padding: 0 13px; display: flex; align-items: center; gap: 7px; border: none; background: var(--gold); color: #0A1130; border-radius: 8px; font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.es-36.es-36.es-36.es-36-sem:not(#_) { background: transparent; color: var(--gold); border: 1px solid var(--gold); text-decoration: none; }
.es-nf-acoes { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 640px) { .es-43.es-43.es-43:not(#_) { flex-wrap: wrap; } .es-43 .es-nf-acoes { flex: 1 1 100%; justify-content: stretch; } .es-43 .es-nf-acoes > * { flex: 1 1 0; justify-content: center; } }
.es-37.es-37.es-37:not(#_) { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 0 20px 12px 68px; font-size: 12px; }
.es-38.es-38.es-38:not(#_) { border: none; background: none; padding: 0; color: var(--muted); text-decoration: underline; cursor: pointer; font: inherit; }
.es-39.es-39.es-39:not(#_) { border: none; background: none; padding: 0; color: var(--danger); text-decoration: underline; cursor: pointer; font: inherit; }
.es-40.es-40.es-40:not(#_) { color: var(--muted); }
.es-41.es-41.es-41:not(#_) { padding: 15px 20px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 12px; }
.es-42.es-42.es-42:not(#_) { flex: none; height: 32px; padding: 0 13px; display: flex; align-items: center; gap: 7px; border: none; background: var(--gold); color: #0A1130; border-radius: 8px; font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; text-decoration: none; }
.es-43.es-43.es-43:not(#_) { display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-bottom: 1px solid var(--hair); }
.es-44.es-44.es-44:not(#_) { display: flex; align-items: baseline; gap: 9px; }
.es-45.es-45.es-45:not(#_) { font-family: var(--font-mono, inherit); font-variant-numeric: tabular-nums; font-size: 13px; color: var(--gold-ink); }
.es-46.es-46.es-46:not(#_) { font-size: 13.5px; }
.es-47.es-47.es-47:not(#_) { flex: none; font-size: 11px; font-weight: 600; white-space: nowrap; padding: 3px 9px; border-radius: 20px; background: var(--success-bg); color: #1B8A4B; }
.es-48.es-48.es-48:not(#_) { flex: none; font-size: 11px; font-weight: 600; white-space: nowrap; padding: 3px 9px; border-radius: 20px; background: var(--danger-bg); color: var(--danger); }
.es-49.es-49.es-49:not(#_) { padding: 15px 20px; border-bottom: 1px solid var(--line); }
.es-50.es-50.es-50:not(#_) { display: flex; align-items: center; gap: 14px; padding: 14px 20px; cursor: pointer; }
.es-51.es-51.es-51:not(#_) { display: flex; align-items: center; gap: 8px; min-width: 0; }
.es-52.es-52.es-52:not(#_) { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.es-53.es-53.es-53:not(#_) { margin: 0 20px 14px; border: 1px solid var(--line); border-radius: 11px; overflow: hidden; }
.es-54.es-54.es-54:not(#_) { display: grid; grid-template-columns: minmax(0,1fr) 64px 72px 72px; gap: 10px; padding: 9px 12px; background: var(--sunken); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.es-55.es-55.es-55:not(#_) { text-align: right; }
.es-56.es-56.es-56:not(#_) { padding: 9px 12px; border-top: 1px solid var(--hair); }
.es-57.es-57.es-57:not(#_) { display: grid; grid-template-columns: minmax(0,1fr) 64px 72px 72px; gap: 10px; align-items: center; font-size: 12.5px; }
.es-58.es-58.es-58:not(#_) { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.es-59.es-59.es-59:not(#_) { text-align: right; font-family: var(--font-mono, inherit); font-variant-numeric: tabular-nums; }
.es-60.es-60.es-60:not(#_) { font-size: 11.5px; color: var(--danger); margin-top: 4px; }
.es-61.es-61.es-61:not(#_) { position: absolute; left: -9999px; width: 1px; height: 1px; }
.es-62.es-62.es-62:not(#_) { display: flex; flex-direction: column; gap: 12px; }
.es-63.es-63.es-63:not(#_) { align-self: flex-start; height: 40px; padding: 0 14px; display: flex; align-items: center; gap: 7px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 12px; font-family: var(--font-sans); font-size: 13.5px; cursor: pointer; }
.es-64.es-64.es-64:not(#_) { font-family: var(--font-serif); font-size: 24px; line-height: 1.15; font-weight: var(--peso-titulo); }
.es-65.es-65.es-65:not(#_) { font-size: 13px; color: var(--muted); margin-top: 3px; }
.es-66.es-66.es-66:not(#_) { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 2px solid var(--gold); border-radius: 16px; padding: 0 14px; height: 60px; }
.es-67.es-67.es-67:not(#_) { flex: 1; min-width: 0; border: none; outline: none; background: transparent; color: var(--ink); font-family: var(--font-mono, inherit); font-variant-numeric: tabular-nums; font-size: 17px; }
.es-68.es-68.es-68:not(#_) { display: flex; align-items: center; gap: 10px; background: var(--danger-bg); border-radius: 14px; padding: 12px 14px; }
.es-69.es-69.es-69:not(#_) { font-size: 14px; font-weight: 600; color: var(--danger); }
.es-70.es-70.es-70:not(#_) { font-family: var(--font-mono, inherit); font-variant-numeric: tabular-nums; font-size: 12.5px; color: var(--danger); }
.es-71.es-71.es-71:not(#_) { flex: none; height: 44px; padding: 0 16px; border: none; background: var(--surface); color: var(--ink); border-radius: 12px; font-family: var(--font-sans); font-size: 14px; cursor: pointer; }
.es-72.es-72.es-72:not(#_) { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.es-73.es-73.es-73:not(#_) { padding: 13px 15px; border-bottom: 1px solid var(--hair); }
.es-74.es-74.es-74:not(#_) { display: flex; align-items: center; gap: 10px; }
.es-75.es-75.es-75:not(#_) { font-size: 14px; line-height: 1.3; }
.es-76.es-76.es-76:not(#_) { font-family: var(--font-mono, inherit); font-variant-numeric: tabular-nums; font-size: 11.5px; color: var(--muted); }
.es-77.es-77.es-77:not(#_) { flex: none; font-family: var(--font-mono, inherit); font-variant-numeric: tabular-nums; font-size: 17px; font-weight: 600; }
.es-78.es-78.es-78:not(#_) { font-size: 13px; color: var(--muted); font-weight: 400; }
.es-79.es-79.es-79:not(#_) { flex: none; font-family: var(--font-mono, inherit); font-variant-numeric: tabular-nums; font-size: 19px; font-weight: 600; }
.es-80.es-80.es-80:not(#_) { height: 8px; border-radius: 20px; background: var(--sunken); overflow: hidden; margin-top: 9px; }
.es-81.es-81.es-81:not(#_) { background: var(--danger-bg); border-radius: 14px; padding: 13px 14px; font-size: 14px; color: var(--danger); line-height: 1.5; }
.es-82.es-82.es-82:not(#_) { display: block; width: 100%; height: 46px; margin-top: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 12px; font-family: var(--font-sans); font-size: 14.5px; cursor: pointer; }
.es-83.es-83.es-83:not(#_) { text-align: center; font-size: 13px; color: var(--muted); }
.es-84.es-84.es-84:not(#_) { height: 56px; display: flex; align-items: center; justify-content: center; gap: 9px; border: none; background: #1FA855; color: #fff; border-radius: 14px; font-family: var(--font-sans); font-size: 16px; font-weight: 600; cursor: pointer; }
.es-85.es-85.es-85:not(#_) { position: fixed; z-index: 75; top: 24px; bottom: 24px; right: 24px; width: 480px; max-width: calc(100vw - 48px); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 30px 70px -28px rgba(10,17,48,.6); overflow: hidden; }
.es-86.es-86.es-86:not(#_) { flex: none; padding: 15px 18px; border-bottom: 1px solid var(--hair); display: flex; align-items: flex-start; gap: 10px; }
.es-87.es-87.es-87:not(#_) { min-width: 0; }
.es-88.es-88.es-88:not(#_) { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.es-89.es-89.es-89:not(#_) { font-family: var(--font-serif); font-size: 21px; line-height: 1.15; font-weight: var(--peso-titulo); }
.es-90.es-90.es-90:not(#_) { font-size: 12px; color: var(--muted); }
.es-91.es-91.es-91:not(#_) { margin-left: auto; flex: none; width: 26px; height: 26px; border: none; background: transparent; color: var(--muted); font-size: 17px; line-height: 1; cursor: pointer; }
.es-92.es-92.es-92:not(#_) { flex: none; padding: 14px 18px; border-bottom: 1px solid var(--hair); display: flex; align-items: center; gap: 10px; }
.es-93.es-93.es-93:not(#_) { height: 40px; flex: 1; min-width: 0; border: 1px solid var(--gold); border-radius: 9px; background: var(--surface); color: var(--ink); font-family: var(--font-mono, inherit); font-variant-numeric: tabular-nums; font-size: 13.5px; padding: 0 11px; }
.es-94.es-94.es-94:not(#_) { flex: none; padding: 12px 18px; background: var(--gold-soft); border-bottom: 1px solid var(--hair); display: flex; align-items: center; gap: 10px; }
.es-95.es-95.es-95:not(#_) { font-size: 12.5px; font-weight: 600; color: var(--gold-ink); }
.es-96.es-96.es-96:not(#_) { font-size: 12px; color: var(--gold-ink); }
.es-97.es-97.es-97:not(#_) { height: 32px; padding: 0 12px; flex: none; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 8px; font-family: var(--font-sans); font-size: 12.5px; cursor: pointer; }
.es-98.es-98.es-98:not(#_) { flex: none; padding: 12px 18px; background: var(--danger-bg); border-bottom: 1px solid var(--hair); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.es-99.es-99.es-99:not(#_) { font-size: 12.5px; font-weight: 600; color: var(--danger); }
.es-100.es-100.es-100:not(#_) { font-family: var(--font-mono, inherit); font-variant-numeric: tabular-nums; font-size: 12px; color: var(--danger); }
.es-101.es-101.es-101:not(#_) { height: 32px; padding: 0 12px; flex: none; border: none; background: var(--ink); color: var(--surface); border-radius: 8px; font-family: var(--font-sans); font-size: 12.5px; cursor: pointer; }
.es-102.es-102.es-102:not(#_) { flex: 1; min-height: 0; overflow-y: auto; }
.es-103.es-103.es-103:not(#_) { padding: 12px 18px; border-bottom: 1px solid var(--hair); display: flex; flex-direction: column; gap: 7px; }
.es-104.es-104.es-104:not(#_) { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.es-105.es-105.es-105:not(#_) { font-family: var(--font-mono, inherit); font-variant-numeric: tabular-nums; font-size: 11px; color: var(--muted); }
.es-106.es-106.es-106:not(#_) { flex: none; font-family: var(--font-mono, inherit); font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 600; }
.es-107.es-107.es-107:not(#_) { flex: none; font-size: 12.5px; font-weight: 600; color: #1B8A4B; }
.es-108.es-108.es-108:not(#_) { flex: none; font-family: var(--font-mono, inherit); font-variant-numeric: tabular-nums; font-size: 12.5px; color: var(--muted); }
.es-109.es-109.es-109:not(#_) { height: 6px; border-radius: 20px; background: var(--sunken); overflow: hidden; }
.es-110.es-110.es-110:not(#_) { font-size: 11.5px; color: var(--gold-ink); background: var(--gold-soft); border-radius: 8px; padding: 7px 9px; }
.es-111.es-111.es-111:not(#_) { padding: 12px 18px; background: var(--sunken); border-bottom: 1px solid var(--hair); display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; }
.es-112.es-112.es-112:not(#_) { color: var(--danger); }
.es-113.es-113.es-113:not(#_) { padding: 10px 18px; border-bottom: 1px solid var(--hair); background: #E4EDFB; color: #2B4E8C; font-size: 12px; line-height: 1.5; }
.es-114.es-114.es-114:not(#_) { padding: 10px 18px; border-bottom: 1px solid var(--hair); background: var(--gold-soft); color: var(--gold-ink); font-size: 12px; line-height: 1.5; }
.es-115.es-115.es-115:not(#_) { padding: 10px 18px; border-bottom: 1px solid var(--hair); font-size: 11.5px; color: var(--muted); line-height: 1.5; }
.es-116.es-116.es-116:not(#_) { color: var(--ink); }
.es-117.es-117.es-117:not(#_) { display: grid; grid-template-columns: minmax(0,1fr) 46px 46px 46px 58px 42px; gap: 6px; padding: 9px 18px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--hair); }
.es-118.es-118.es-118:not(#_) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.es-119.es-119.es-119:not(#_) { font-size: 10.5px; color: var(--gold-ink); font-weight: 600; }
.es-120.es-120.es-120:not(#_) { font-size: 10.5px; color: var(--gold-ink); }
.es-121.es-121.es-121:not(#_) { text-align: right; font-family: var(--font-mono, inherit); font-variant-numeric: tabular-nums; color: var(--muted); }
.es-122.es-122.es-122:not(#_) { height: 30px; width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font-family: var(--font-mono, inherit); font-variant-numeric: tabular-nums; font-size: 12.5px; padding: 0 7px; text-align: right; }
.es-123.es-123.es-123:not(#_) { padding: 12px 18px; }
.es-124.es-124.es-124:not(#_) { display: flex; flex-direction: column; gap: 6px; font-size: 11.5px; color: var(--muted); }
.es-125.es-125.es-125:not(#_) { border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink); font-family: var(--font-sans); font-size: 13px; padding: 8px 10px; resize: vertical; }
.es-126.es-126.es-126:not(#_) { flex: none; padding: 12px 18px; background: var(--danger-bg); border-top: 1px solid var(--hair); font-size: 12.5px; color: var(--danger); line-height: 1.5; }
.es-127.es-127.es-127:not(#_) { flex: none; padding: 14px 18px; border-top: 1px solid var(--hair); display: flex; gap: 8px; align-items: center; }
.es-128.es-128.es-128:not(#_) { font-size: 11.5px; color: var(--muted); min-width: 0; }
.es-129.es-129.es-129:not(#_) { margin-left: auto; height: 38px; padding: 0 14px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 9px; font-family: var(--font-sans); font-size: 13px; cursor: pointer; }
.es-130.es-130.es-130:not(#_) { margin-left: auto; height: 38px; padding: 0 16px; display: flex; align-items: center; gap: 7px; border: none; background: #1FA855; color: #fff; border-radius: 9px; font-family: var(--font-sans); font-size: 13.5px; font-weight: 600; cursor: pointer; }
.es-131.es-131.es-131:not(#_) { position: fixed; z-index: 75; top: 24px; bottom: 24px; right: 24px; width: 520px; max-width: calc(100vw - 48px); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 30px 70px -28px rgba(10,17,48,.6); overflow: hidden; }
.es-132.es-132.es-132:not(#_) { flex: none; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); border-bottom: 1px solid var(--hair); }
.es-133.es-133.es-133:not(#_) { padding: 12px 16px; border-right: 1px solid var(--hair); }
.es-134.es-134.es-134:not(#_) { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.es-135.es-135.es-135:not(#_) { font-family: var(--font-mono, inherit); font-variant-numeric: tabular-nums; font-size: 19px; font-weight: 600; color: var(--danger); }
.es-136.es-136.es-136:not(#_) { font-family: var(--font-mono, inherit); font-variant-numeric: tabular-nums; font-size: 19px; font-weight: 600; color: #1B8A4B; }
.es-137.es-137.es-137:not(#_) { padding: 12px 16px; }
.es-138.es-138.es-138:not(#_) { font-family: var(--font-mono, inherit); font-variant-numeric: tabular-nums; font-size: 19px; font-weight: 600; }
.es-139.es-139.es-139:not(#_) { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.es-140.es-140.es-140:not(#_) { padding: 10px 18px; background: #E4EDFB; color: #2B4E8C; border-bottom: 1px solid var(--hair); font-size: 12px; }
.es-141.es-141.es-141:not(#_) { border-bottom: 1px solid var(--line); }
.es-142.es-142.es-142:not(#_) { padding: 12px 18px 6px; }
.es-143.es-143.es-143:not(#_) { font-size: 13px; font-weight: 600; }
.es-144.es-144.es-144:not(#_) { font-size: 11.5px; color: var(--muted); line-height: 1.5; }
.es-145.es-145.es-145:not(#_) { margin: 8px 18px; border: 1px solid var(--line); border-radius: 11px; padding: 11px 12px; }
.es-146.es-146.es-146:not(#_) { display: flex; align-items: baseline; gap: 8px; }
.es-147.es-147.es-147:not(#_) { min-width: 0; flex: 1; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.es-148.es-148.es-148:not(#_) { flex: none; font-family: var(--font-mono, inherit); font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 600; }
.es-149.es-149.es-149:not(#_) { display: flex; align-items: center; gap: 7px; margin-top: 4px; font-size: 12px; }
.es-150.es-150.es-150:not(#_) { display: flex; gap: 7px; margin-top: 9px; }
.es-151.es-151.es-151:not(#_) { flex: 1; height: 32px; border: none; background: var(--gold); color: #0A1130; border-radius: 8px; font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.es-152.es-152.es-152:not(#_) { margin-top: 8px; font-size: 12px; font-weight: 600; color: #2B4E8C; }
.es-153.es-153.es-153:not(#_) { margin-top: 8px; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.es-154.es-154.es-154:not(#_) { margin-left: auto; }
.es-155.es-155.es-155:not(#_) { height: 6px; }
.es-156.es-156.es-156:not(#_) { display: grid; grid-template-columns: minmax(0,1fr) 52px 52px 48px 44px; gap: 6px; padding: 9px 18px; background: var(--sunken); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--hair); }
.es-157.es-157.es-157:not(#_) { display: grid; grid-template-columns: minmax(0,1fr) 52px 52px 48px 44px; gap: 6px; align-items: center; padding: 10px 18px; border-bottom: 1px solid var(--hair); font-size: 12.5px; }
.es-158.es-158.es-158:not(#_) { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.es-159.es-159.es-159:not(#_) { margin: 14px 18px; background: var(--sunken); border-radius: 10px; padding: 11px 13px; }
.es-160.es-160.es-160:not(#_) { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.es-161.es-161.es-161:not(#_) { font-size: 12.5px; line-height: 1.55; }
.es-162.es-162.es-162:not(#_) { flex: none; padding: 14px 18px; border-top: 1px solid var(--hair); display: flex; gap: 8px; }
.es-163.es-163.es-163:not(#_) { flex: 1; height: 38px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 9px; font-family: var(--font-sans); font-size: 13px; cursor: pointer; }
.es-164.es-164.es-164:not(#_) { height: 100%; background: var(--gold); border-radius: 20px; }
.es-165.es-165.es-165:not(#_) { flex: none; font-size: 11px; font-weight: 600; white-space: nowrap; padding: 3px 9px; border-radius: 20px; }
.es-166.es-166.es-166:not(#_) { height: 100%; background: #1FA855; border-radius: 20px; }
.es-167.es-167.es-167:not(#_) { display: grid; grid-template-columns: minmax(0,1fr) 46px 46px 46px 58px 42px; gap: 6px; align-items: center; padding: 9px 18px; border-bottom: 1px solid var(--hair); font-size: 12.5px; }
.es-168.es-168.es-168:not(#_) { text-align: right; font-family: var(--font-mono, inherit); font-variant-numeric: tabular-nums; font-weight: 600; }
/* ── extraído de templates (fc) — seletor com :not(#_): pesa como o style="" que ocupava o lugar (só id ou !important vencem) ── */
.fc-1.fc-1.fc-1:not(#_) { flex: none; display: flex; gap: 6px; padding: 10px 20px 0; border-bottom: 1px solid var(--hair); }
.fc-2.fc-2.fc-2:not(#_) { height: 32px; padding: 0 13px; display: inline-flex; align-items: center; border: 1px solid var(--line); border-bottom: none; background: var(--surface); color: var(--ink); border-radius: 9px 9px 0 0; font-family: var(--font-sans); font-size: 12.5px; text-decoration: none; }
.fc-3.fc-3.fc-3:not(#_) { margin-left: 4px; }
.fc-4.fc-4.fc-4:not(#_) { flex: none; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); border-bottom: 1px solid var(--hair); background: var(--sunken); }
.fc-5.fc-5.fc-5:not(#_) { padding: 12px 16px; border-right: 1px solid var(--hair); min-width: 0; }
.fc-6.fc-6.fc-6:not(#_) { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.fc-7.fc-7.fc-7:not(#_) { font-size: 14px; margin-top: 3px; }
.fc-8.fc-8.fc-8:not(#_) { font-size: 11px; color: var(--muted); }
.fc-9.fc-9.fc-9:not(#_) { font-family: var(--font-mono, inherit); font-variant-numeric: tabular-nums; font-size: 16px; font-weight: 600; margin-top: 3px; }
.fc-10.fc-10.fc-10:not(#_) { padding: 12px 16px; min-width: 0; }
.fc-11.fc-11.fc-11:not(#_) { padding: 16px 20px 18px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; min-height: 0; }
.fc-12.fc-12.fc-12:not(#_) { flex: none; }
.fc-13.fc-13.fc-13:not(#_) { opacity: .8; }
.fc-14.fc-14.fc-14:not(#_) { flex: none; border-radius: 13px; overflow: hidden; background: var(--ink); color: var(--cream); }
.fc-15.fc-15.fc-15:not(#_) { padding: 14px 16px 12px; display: flex; align-items: flex-start; gap: 12px; }
.fc-16.fc-16.fc-16:not(#_) { min-width: 0; flex: 1; }
.fc-17.fc-17.fc-17:not(#_) { font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: rgba(247,243,234,.55); }
.fc-18.fc-18.fc-18:not(#_) { display: flex; align-items: baseline; gap: 6px; margin-top: 2px; flex-wrap: wrap; }
.fc-19.fc-19.fc-19:not(#_) { font-family: var(--font-serif); font-size: 28px; line-height: 1; color: var(--gold); font-weight: var(--peso-titulo); }
.fc-20.fc-20.fc-20:not(#_) { font-size: 11px; color: rgba(247,243,234,.6); }
.fc-21.fc-21.fc-21:not(#_) { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.fc-22.fc-22.fc-22:not(#_) { font-size: 10.5px; font-weight: 600; padding: 3px 9px; border-radius: 20px; background: #9C4A3C2e; color: #9C4A3C; white-space: nowrap; }
.fc-23.fc-23.fc-23:not(#_) { padding: 0 16px 14px; }
.fc-24.fc-24.fc-24:not(#_) { height: 6px; border-radius: 20px; background: rgba(247,243,234,.16); overflow: hidden; }
.fc-25.fc-25.fc-25:not(#_) { flex: none; border-radius: 13px; border: 1px solid var(--line); padding: 12px 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fc-26.fc-26.fc-26:not(#_) { font-size: 11px; font-weight: 400; color: var(--muted); }
.fc-27.fc-27.fc-27:not(#_) { color: var(--ink); }
.fc-28.fc-28.fc-28:not(#_) { display: flex; gap: 6px; align-items: center; }
.fc-29.fc-29.fc-29:not(#_) { width: 110px; }
.fc-30.fc-30.fc-30:not(#_) { display: flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--muted); }
.fc-31.fc-31.fc-31:not(#_) { flex: none; border-radius: 13px; border: 1px solid var(--line); padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; }
.fc-32.fc-32.fc-32:not(#_) { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.fc-33.fc-33.fc-33:not(#_) { font-family: var(--font-mono, inherit); font-variant-numeric: tabular-nums; font-size: 16px; font-weight: 600; }
.fc-34.fc-34.fc-34:not(#_) { font-size: 11.5px; color: var(--muted); }
.fc-35.fc-35.fc-35:not(#_) { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.fc-36.fc-36.fc-36:not(#_) { flex: 1; min-width: 160px; }
.fc-37.fc-37.fc-37:not(#_) { font-size: 11.5px; color: var(--muted); display: flex; flex-direction: column; gap: 3px; }
.fc-38.fc-38.fc-38:not(#_) { font-size: 12.5px; }
.fc-39.fc-39.fc-39:not(#_) { color: var(--red); }
.fc-40.fc-40.fc-40:not(#_) { flex: 1; min-width: 180px; }
.fc-41.fc-41.fc-41:not(#_) { display: flex; align-items: baseline; gap: 10px; margin-bottom: 9px; }
.fc-42.fc-42.fc-42:not(#_) { font-family: var(--font-serif); font-size: 18px; font-weight: var(--peso-titulo); }
.fc-43.fc-43.fc-43:not(#_) { margin-left: auto; font-size: 11.5px; }
.fc-44.fc-44.fc-44:not(#_) { background: var(--red-soft); border-radius: 11px; padding: 14px 15px; font-size: 12.5px; color: var(--red); }
.fc-45.fc-45.fc-45:not(#_) { background: var(--sunken); border-radius: 11px; padding: 14px 15px; font-size: 12.5px; color: var(--muted); line-height: 1.55; }
.fc-46.fc-46.fc-46:not(#_) { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.fc-47.fc-47.fc-47:not(#_) { display: flex; align-items: baseline; gap: 10px; margin-bottom: 9px; flex-wrap: wrap; }
.fc-48.fc-48.fc-48:not(#_) { font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 20px; background: var(--red-soft); color: var(--red); }
.fc-49.fc-49.fc-49:not(#_) { background: var(--green-soft); border-radius: 11px; padding: 14px 15px; font-size: 12.5px; color: var(--green-ink); line-height: 1.55; }
.fc-50.fc-50.fc-50:not(#_) { display: grid; grid-template-columns: 84px 64px minmax(0,1fr) 104px; gap: 10px; align-items: center; padding: 11px 14px; border-bottom: 1px solid var(--hair); }
.fc-51.fc-51.fc-51:not(#_) { font-family: var(--font-mono, inherit); font-variant-numeric: tabular-nums; font-size: 12px; color: var(--muted); }
.fc-52.fc-52.fc-52:not(#_) { text-align: right; font-family: var(--font-mono, inherit); font-variant-numeric: tabular-nums; font-size: 13px; white-space: nowrap; }
.fc-53.fc-53.fc-53:not(#_) { padding: 16px 20px 18px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; min-height: 0; }
.fc-54.fc-54.fc-54:not(#_) { flex: none; display: flex; align-items: baseline; gap: 10px; }
.fc-55.fc-55.fc-55:not(#_) { font-size: 12.5px; color: var(--muted); }
.fc-56.fc-56.fc-56:not(#_) { margin-left: auto; font-family: var(--font-mono, inherit); font-variant-numeric: tabular-nums; font-size: 16px; }
.fc-57.fc-57.fc-57:not(#_) { background: var(--sunken); border-radius: 11px; padding: 14px 15px; font-size: 12.5px; color: var(--muted); }
.fc-58.fc-58.fc-58:not(#_) { flex: none; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.fc-59.fc-59.fc-59:not(#_) { flex: none; display: flex; gap: 6px; flex-wrap: wrap; }
.fc-60.fc-60.fc-60:not(#_) { height: 32px; padding: 0 13px; display: inline-flex; align-items: center; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 20px; font-family: var(--font-sans); font-size: 12.5px; text-decoration: none; }
.fc-61.fc-61.fc-61:not(#_) { flex: none; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.fc-62.fc-62.fc-62:not(#_) { background: var(--sunken); border-radius: 11px; padding: 11px 13px; }
.fc-63.fc-63.fc-63:not(#_) { font-family: var(--font-mono, inherit); font-variant-numeric: tabular-nums; font-size: 17px; font-weight: 600; margin-top: 3px; white-space: nowrap; }
.fc-64.fc-64.fc-64:not(#_) { background: var(--green-soft); border-radius: 11px; padding: 11px 13px; }
.fc-65.fc-65.fc-65:not(#_) { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--green-ink); }
.fc-66.fc-66.fc-66:not(#_) { font-family: var(--font-mono, inherit); font-variant-numeric: tabular-nums; font-size: 17px; font-weight: 600; color: var(--green-ink); margin-top: 3px; white-space: nowrap; }
.fc-67.fc-67.fc-67:not(#_) { flex: none; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.fc-68.fc-68.fc-68:not(#_) { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.fc-69.fc-69.fc-69:not(#_) { cursor: pointer; font-size: 13px; }
.fc-70.fc-70.fc-70:not(#_) { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.fc-71.fc-71.fc-71:not(#_) { display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--muted); }
.fc-72.fc-72.fc-72:not(#_) { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.fc-73.fc-73.fc-73:not(#_) { margin-left: auto; font-family: var(--font-mono, inherit); font-variant-numeric: tabular-nums; }
.fc-74.fc-74.fc-74:not(#_) { display: grid; grid-template-columns: 84px 64px minmax(0,1fr) 104px 34px; gap: 10px; align-items: center; padding: 11px 14px; border-bottom: 1px solid var(--hair); }
.fc-75.fc-75.fc-75:not(#_) { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border: 1px solid #1B8A4B; background: #1FA855; color: #fff; border-radius: 8px; cursor: pointer; }
.fc-76.fc-76.fc-76:not(#_) { flex: none; display: flex; gap: 8px; }
.fc-77.fc-77.fc-77:not(#_) { flex: 1; height: 38px; display: flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid #1B8A4B; background: #1FA855; color: #fff; border-radius: 10px; font-family: var(--font-sans); font-size: 13px; font-weight: 600; cursor: pointer; }
.fc-78.fc-78.fc-78:not(#_) { padding: 16px 20px 18px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; min-height: 0; }
.fc-79.fc-79.fc-79:not(#_) { padding: 11px 14px; background: var(--sunken); border-bottom: 1px solid var(--hair); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.fc-80.fc-80.fc-80:not(#_) { padding: 13px 14px; display: flex; flex-direction: column; gap: 4px; }
.fc-81.fc-81.fc-81:not(#_) { font-size: 13.5px; }
.fc-82.fc-82.fc-82:not(#_) { font-size: 12px; color: var(--muted); }
.fc-83.fc-83.fc-83:not(#_) { margin-top: 6px; align-self: flex-start; height: 32px; padding: 0 12px; display: flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 9px; font-size: 12.5px; text-decoration: none; color: var(--ink); }
.fc-84.fc-84.fc-84:not(#_) { padding: 13px 14px; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.fc-85.fc-85.fc-85:not(#_) { font-size: 13px; }
.fc-86.fc-86.fc-86:not(#_) { font-family: var(--font-mono, inherit); font-variant-numeric: tabular-nums; font-size: 12.5px; }
.fc-87.fc-87.fc-87:not(#_) { min-width: 0; }
.fc-88.fc-88.fc-88:not(#_) { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-89.fc-89.fc-89:not(#_) { padding: 0 14px 13px; }
.fc-90.fc-90.fc-90:not(#_) { height: 34px; padding: 0 13px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid #1B8A4B; background: #1FA855; color: #fff; border-radius: 9px; font-size: 12.5px; font-weight: 600; text-decoration: none; }
.fc-91.fc-91.fc-91:not(#_) { flex: none; background: var(--sunken); border-radius: 12px; padding: 13px 14px; }
.fc-92.fc-92.fc-92:not(#_) { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
.fc-93.fc-93.fc-93:not(#_) { font-size: 12.5px; line-height: 1.55; }
.fc-94.fc-94.fc-94:not(#_) { flex: none; padding: 14px 20px; border-top: 1px solid var(--hair); display: flex; gap: 8px; flex-wrap: wrap; }
.fc-95.fc-95.fc-95:not(#_) { flex: 1; height: 38px; display: flex; align-items: center; justify-content: center; gap: 7px; border: none; background: var(--gold); color: #0A1130; border-radius: 10px; font-family: var(--font-sans); font-size: 13.5px; font-weight: 600; text-decoration: none; }
.fc-96.fc-96.fc-96:not(#_) { height: 38px; padding: 0 14px; display: flex; align-items: center; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 10px; font-family: var(--font-sans); font-size: 13.5px; text-decoration: none; }
.fc-97.fc-97.fc-97:not(#_) { height: 38px; padding: 0 14px; display: flex; align-items: center; border: 1px solid var(--red); background: var(--surface); color: var(--red); border-radius: 10px; font-family: var(--font-sans); font-size: 13.5px; text-decoration: none; }
.fc-98.fc-98.fc-98:not(#_) { flex: none; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border: 1px solid #1B8A4B; background: #1FA855; color: #fff; border-radius: 10px; cursor: pointer; }
.fc-99.fc-99.fc-99:not(#_) { border-bottom: 1px solid var(--hair); }
.fc-100.fc-100.fc-100:not(#_) { display: grid; grid-template-columns: 72px minmax(0,1fr) 116px 100px 28px 28px; gap: 8px; align-items: center; padding: 11px 14px; }
.fc-101.fc-101.fc-101:not(#_) { font-family: var(--font-mono, inherit); font-variant-numeric: tabular-nums; font-size: 12.5px; color: var(--gold-ink); }
.fc-102.fc-102.fc-102:not(#_) { width: 26px; height: 26px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--muted); font-family: var(--font-serif); font-size: 12px; line-height: 1; text-decoration: none; display: flex; align-items: center; justify-content: center; font-weight: var(--peso-titulo); }
.fc-103.fc-103.fc-103:not(#_) { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border: 1px solid #1B8A4B; background: #1FA855; color: #fff; border-radius: 8px; cursor: pointer; }
.fc-104.fc-104.fc-104:not(#_) { margin: 0 14px 12px; background: var(--sunken); border: 1px solid var(--line); border-radius: 11px; overflow: hidden; }
.fc-105.fc-105.fc-105:not(#_) { padding: 9px 12px; border-bottom: 1px solid var(--hair); display: flex; align-items: baseline; gap: 8px; }
.fc-106.fc-106.fc-106:not(#_) { margin-left: auto; font-family: var(--font-mono, inherit); font-variant-numeric: tabular-nums; font-size: 12px; }
.fc-107.fc-107.fc-107:not(#_) { display: grid; grid-template-columns: 30px minmax(0,1fr) 92px; gap: 9px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--hair); }
.fc-108.fc-108.fc-108:not(#_) { font-family: var(--font-mono, inherit); font-variant-numeric: tabular-nums; font-size: 11.5px; color: var(--muted); }
.fc-109.fc-109.fc-109:not(#_) { font-size: 12px; min-width: 0; }
.fc-110.fc-110.fc-110:not(#_) { text-align: right; font-family: var(--font-mono, inherit); font-variant-numeric: tabular-nums; font-size: 12px; white-space: nowrap; }
.fc-111.fc-111.fc-111:not(#_) { padding: 9px 12px; }
.fc-112.fc-112.fc-112:not(#_) { height: 28px; padding: 0 11px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid #1B8A4B; background: #1FA855; color: #fff; border-radius: 8px; font-family: var(--font-sans); font-size: 11.5px; font-weight: 600; cursor: pointer; }
.fc-113.fc-113.fc-113:not(#_) { display: inline-block; margin-bottom: 4px; }
.fc-114.fc-114.fc-114:not(#_) { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; }
.fc-115.fc-115.fc-115:not(#_) { flex: none; padding: 16px 18px; border-bottom: 1px solid var(--hair); }
.fc-116.fc-116.fc-116:not(#_) { font-family: var(--font-serif); font-size: 22px; line-height: 1.15; font-weight: var(--peso-titulo); }
.fc-117.fc-117.fc-117:not(#_) { font-size: 12px; color: var(--muted); margin-top: 2px; }
.fc-118.fc-118.fc-118:not(#_) { position: fixed; inset: 0; z-index: 70; background: rgba(10,17,48,.35); }
.fc-119.fc-119.fc-119:not(#_) { position: fixed; z-index: 71; top: 20px; bottom: 20px; right: 24px; width: 520px; max-width: calc(100vw - 48px); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 30px 70px -28px rgba(10,17,48,.6); overflow: hidden; }
.fc-120.fc-120.fc-120:not(#_) { flex: none; padding: 16px 20px; border-bottom: 1px solid var(--hair); display: flex; align-items: flex-start; gap: 12px; }
.fc-121.fc-121.fc-121:not(#_) { font-family: var(--font-serif); font-size: 23px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: var(--peso-titulo); }
.fc-122.fc-122.fc-122:not(#_) { margin-left: auto; flex: none; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border: none; background: transparent; color: var(--muted); font-size: 17px; line-height: 1; text-decoration: none; }
.fc-500.fc-500.fc-500:not(#_) { flex: none; padding: 5px 20px; font-size: 11px; border-bottom: 1px solid var(--hair); }
.fc-501.fc-501.fc-501:not(#_) { font-size: 10.5px; font-weight: 600; padding: 3px 9px; border-radius: 20px; }
.fc-502.fc-502.fc-502:not(#_) { font-size: 10.5px; font-weight: 600; padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
.fc-503.fc-503.fc-503:not(#_) { height: 100%; background: linear-gradient(90deg, #C8922A, #E8B33C); border-radius: 20px; }
.fc-504.fc-504.fc-504:not(#_) { flex: none; border-radius: 13px; padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; }
.fc-505.fc-505.fc-505:not(#_) { justify-self: start; max-width: 100%; font-size: 10.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 2px 8px; border-radius: 20px; }
.fc-506.fc-506.fc-506:not(#_) { flex: none; height: 38px; padding: 0 14px; display: flex; align-items: center; gap: 7px; border: 1px solid #1B8A4B; border-radius: 10px; font-family: var(--font-sans); font-size: 13.5px; font-weight: 600; cursor: pointer; }
/* ── extraído de templates (pd) — seletor com :not(#_): pesa como o style="" que ocupava o lugar (só id ou !important vencem) ── */
.pd-1.pd-1.pd-1:not(#_) { flex: none; padding: 14px 20px; background: var(--sunken); border-bottom: 1px solid var(--hair); display: flex; align-items: baseline; justify-content: space-between; }
.pd-2.pd-2.pd-2:not(#_) { font-size: 12px; color: var(--muted); }
.pd-3.pd-3.pd-3:not(#_) { font-family: var(--font-mono, inherit); font-variant-numeric: tabular-nums; font-size: 22px; font-weight: 600; }
.pd-4.pd-4.pd-4:not(#_) { padding: 16px 20px 18px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; min-height: 0; }
.pd-5.pd-5.pd-5:not(#_) { flex: none; }
.pd-6.pd-6.pd-6:not(#_) { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.pd-7.pd-7.pd-7:not(#_) { display: flex; flex-direction: column; }
.pd-8.pd-8.pd-8:not(#_) { display: flex; gap: 11px; align-items: flex-start; }
.pd-9.pd-9.pd-9:not(#_) { flex: none; display: flex; flex-direction: column; align-items: center; align-self: stretch; }
.pd-10.pd-10.pd-10:not(#_) { min-width: 0; flex: 1; padding-bottom: 14px; }
.pd-11.pd-11.pd-11:not(#_) { font-size: 11px; color: var(--muted); }
.pd-12.pd-12.pd-12:not(#_) { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 9px; }
.pd-13.pd-13.pd-13:not(#_) { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.pd-14.pd-14.pd-14:not(#_) { display: grid; grid-template-columns: 42px 34px minmax(0,1fr) 104px; gap: 10px; align-items: center; padding: 11px 14px; border-bottom: 1px solid var(--hair); }
.pd-15.pd-15.pd-15:not(#_) { width: 42px; height: 42px; border-radius: 9px; object-fit: cover; border: 1px solid var(--hair); }
.pd-16.pd-16.pd-16:not(#_) { width: 42px; height: 42px; flex: none; border-radius: 9px; background: #fff; border: 1px solid var(--hair); display: flex; align-items: center; justify-content: center; font-family: var(--font-serif); font-size: 11px; color: var(--ink); overflow: hidden; font-weight: var(--peso-titulo); }
.pd-17.pd-17.pd-17:not(#_) { font-size: 12.5px; color: var(--muted); }
.pd-18.pd-18.pd-18:not(#_) { min-width: 0; }
.pd-19.pd-19.pd-19:not(#_) { font-size: 12.5px; line-height: 1.3; }
.pd-20.pd-20.pd-20:not(#_) { text-align: right; font-family: var(--font-mono, inherit); font-variant-numeric: tabular-nums; font-size: 13px; }
.pd-21.pd-21.pd-21:not(#_) { padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; background: var(--sunken); }
.pd-22.pd-22.pd-22:not(#_) { display: flex; justify-content: space-between; font-size: 12.5px; }
.pd-23.pd-23.pd-23:not(#_) { color: var(--muted); }
.pd-24.pd-24.pd-24:not(#_) { font-family: var(--font-mono, inherit); font-variant-numeric: tabular-nums; }
.pd-25.pd-25.pd-25:not(#_) { font-family: var(--font-mono, inherit); font-variant-numeric: tabular-nums; color: var(--green-ink); }
.pd-26.pd-26.pd-26:not(#_) { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--hair); padding-top: 8px; }
.pd-27.pd-27.pd-27:not(#_) { font-size: 13.5px; }
.pd-28.pd-28.pd-28:not(#_) { font-family: var(--font-mono, inherit); font-variant-numeric: tabular-nums; font-size: 17px; }
.pd-29.pd-29.pd-29:not(#_) { flex: none; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.pd-30.pd-30.pd-30:not(#_) { padding: 11px 14px; background: var(--sunken); border-bottom: 1px solid var(--hair); display: flex; align-items: baseline; gap: 8px; }
.pd-31.pd-31.pd-31:not(#_) { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pd-32.pd-32.pd-32:not(#_) { margin-left: auto; font-size: 11px; color: var(--muted); }
.pd-33.pd-33.pd-33:not(#_) { display: grid; grid-template-columns: 44px 104px minmax(0,1fr) 104px 28px; gap: 9px; align-items: center; padding: 11px 14px; border-bottom: 1px solid var(--hair); }
.pd-34.pd-34.pd-34:not(#_) { font-size: 11.5px; color: var(--muted); }
.pd-35.pd-35.pd-35:not(#_) { font-size: 12.5px; }
.pd-36.pd-36.pd-36:not(#_) { font-size: 10.5px; color: var(--muted); }
.pd-37.pd-37.pd-37:not(#_) { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border: 1px solid #1B8A4B; background: #1FA855; color: #fff; border-radius: 8px; cursor: pointer; }
.pd-38.pd-38.pd-38:not(#_) { flex: none; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; padding: 13px 14px; display: flex; flex-direction: column; gap: 8px; }
.pd-39.pd-39.pd-39:not(#_) { width: 120px; height: 120px; align-self: center; }
.pd-40.pd-40.pd-40:not(#_) { font-size: 11px; resize: vertical; }
.pd-41.pd-41.pd-41:not(#_) { height: 32px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 9px; font-size: 12.5px; cursor: pointer; }
.pd-42.pd-42.pd-42:not(#_) { padding: 11px 14px; background: var(--sunken); border-bottom: 1px solid var(--hair); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pd-43.pd-43.pd-43:not(#_) { padding: 13px 14px; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.pd-44.pd-44.pd-44:not(#_) { font-size: 13px; }
.pd-45.pd-45.pd-45:not(#_) { padding: 0 14px 13px; }
.pd-46.pd-46.pd-46:not(#_) { font-size: 12.5px; line-height: 1.5; }
.pd-47.pd-47.pd-47:not(#_) { display: flex; align-items: center; gap: 8px; }
.pd-48.pd-48.pd-48:not(#_) { flex: 1; }
.pd-49.pd-49.pd-49:not(#_) { grid-column: 1 / -1; }
.pd-50.pd-50.pd-50:not(#_) { flex: none; padding: 14px 20px; border-top: 1px solid var(--hair); display: flex; gap: 8px; }
.pd-51.pd-51.pd-51:not(#_) { flex: 1; height: 38px; display: flex; align-items: center; justify-content: center; gap: 7px; border: none; background: var(--gold); color: #0A1130; border-radius: 10px; font-family: var(--font-sans); font-size: 13.5px; font-weight: 600; text-decoration: none; }
.pd-52.pd-52.pd-52:not(#_) { flex: none; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border: 1px solid #1B8A4B; background: #1FA855; color: #fff; border-radius: 10px; cursor: pointer; }
.pd-53.pd-53.pd-53:not(#_) { position: fixed; inset: 0; z-index: 70; background: rgba(10,17,48,.35); }
.pd-54.pd-54.pd-54:not(#_) { position: fixed; z-index: 71; top: 20px; bottom: 20px; right: 24px; width: 480px; max-width: calc(100vw - 48px); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 30px 70px -28px rgba(10,17,48,.6); overflow: hidden; }
.pd-55.pd-55.pd-55:not(#_) { flex: none; padding: 16px 20px; border-bottom: 1px solid var(--hair); display: flex; align-items: flex-start; gap: 12px; }
.pd-56.pd-56.pd-56:not(#_) { display: flex; align-items: baseline; gap: 9px; }
.pd-57.pd-57.pd-57:not(#_) { font-family: var(--font-serif); font-size: 23px; line-height: 1.15; font-weight: var(--peso-titulo); }
.pd-58.pd-58.pd-58:not(#_) { font-size: 12px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-59.pd-59.pd-59:not(#_) { margin-left: auto; flex: none; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 17px; line-height: 1; text-decoration: none; }
.pd-60.pd-60.pd-60:not(#_) { display: inline-block; margin-bottom: 4px; }
.pd-61.pd-61.pd-61:not(#_) { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; }
.pd-62.pd-62.pd-62:not(#_) { flex: none; padding: 16px 18px; border-bottom: 1px solid var(--hair); }
.pd-63.pd-63.pd-63:not(#_) { font-family: var(--font-serif); font-size: 22px; line-height: 1.15; font-weight: var(--peso-titulo); }
.pd-64.pd-64.pd-64:not(#_) { font-size: 12px; color: var(--muted); margin-top: 2px; }
.pd-500.pd-500.pd-500:not(#_) { width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--surface); }
.pd-501.pd-501.pd-501:not(#_) { flex: 1; width: 2px; min-height: 14px; }
.pd-502.pd-502.pd-502:not(#_) { font-size: 13px; }
.pd-503.pd-503.pd-503:not(#_) { justify-self: start; max-width: 100%; font-size: 10.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 2px 8px; border-radius: 20px; }
.pd-504.pd-504.pd-504:not(#_) { width: 10px; height: 10px; flex: none; border-radius: 50%; }
/* ── extraído de templates (en) — seletor com :not(#_): pesa como o style="" que ocupava o lugar (só id ou !important vencem) ── */
.en-1.en-1.en-1:not(#_) { flex: none; padding: 13px 20px; background: var(--green-soft); border-bottom: 1px solid var(--hair); display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.en-2.en-2.en-2:not(#_) { flex: none; }
.en-3.en-3.en-3:not(#_) { min-width: 0; flex: 1; font-size: 12.5px; color: var(--green-ink); line-height: 1.5; }
.en-4.en-4.en-4:not(#_) { flex: none; height: 30px; padding: 0 12px; display: flex; align-items: center; border: 1px solid var(--line); background: var(--surface); color: var(--muted); border-radius: 8px; font-family: var(--font-sans); font-size: 12px; text-decoration: none; }
.en-5.en-5.en-5:not(#_) { flex: none; padding: 13px 20px; background: var(--gold-soft); border-bottom: 1px solid var(--hair); display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.en-6.en-6.en-6:not(#_) { min-width: 0; flex: 1; font-size: 12.5px; color: var(--gold-ink); line-height: 1.5; }
.en-7.en-7.en-7:not(#_) { flex: none; height: 30px; padding: 0 12px; display: flex; align-items: center; border: none; background: var(--gold); color: #0A1130; border-radius: 8px; font-family: var(--font-sans); font-size: 12px; font-weight: 600; text-decoration: none; }
.en-8.en-8.en-8:not(#_) { flex: none; padding: 14px 20px; background: var(--sunken); border-bottom: 1px solid var(--hair); display: flex; align-items: baseline; justify-content: space-between; }
.en-9.en-9.en-9:not(#_) { font-size: 12px; color: var(--muted); }
.en-10.en-10.en-10:not(#_) { font-family: var(--font-mono, inherit); font-variant-numeric: tabular-nums; font-size: 22px; font-weight: 600; }
.en-11.en-11.en-11:not(#_) { padding: 16px 20px 18px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; min-height: 0; }
.en-12.en-12.en-12:not(#_) { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.en-13.en-13.en-13:not(#_) { display: flex; align-items: flex-start; gap: 0; }
.en-14.en-14.en-14:not(#_) { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 0; }
.en-15.en-15.en-15:not(#_) { margin-top: 10px; }
.en-16.en-16.en-16:not(#_) { color: var(--ink); }
.en-17.en-17.en-17:not(#_) { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 9px; }
.en-18.en-18.en-18:not(#_) { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.en-19.en-19.en-19:not(#_) { display: grid; grid-template-columns: 42px 34px minmax(0,1fr) 104px; gap: 10px; align-items: center; padding: 11px 14px; border-bottom: 1px solid var(--hair); }
.en-20.en-20.en-20:not(#_) { width: 42px; height: 42px; border-radius: 9px; object-fit: cover; border: 1px solid var(--hair); }
.en-21.en-21.en-21:not(#_) { width: 42px; height: 42px; flex: none; border-radius: 9px; background: #fff; border: 1px solid var(--hair); display: flex; align-items: center; justify-content: center; font-family: var(--font-serif); font-size: 11px; font-weight: var(--peso-titulo); }
.en-22.en-22.en-22:not(#_) { font-size: 12.5px; color: var(--muted); }
.en-23.en-23.en-23:not(#_) { min-width: 0; }
.en-24.en-24.en-24:not(#_) { font-size: 12.5px; line-height: 1.3; }
.en-25.en-25.en-25:not(#_) { font-size: 11px; color: var(--muted); }
.en-26.en-26.en-26:not(#_) { text-align: right; font-family: var(--font-mono, inherit); font-variant-numeric: tabular-nums; font-size: 13px; }
.en-27.en-27.en-27:not(#_) { padding: 12px 14px; }
.en-28.en-28.en-28:not(#_) { width: 100%; height: 38px; display: flex; align-items: center; justify-content: center; gap: 7px; border: 1px dashed var(--gold); background: var(--gold-soft); color: var(--gold-ink); border-radius: 10px; font-family: var(--font-sans); font-size: 13px; text-decoration: none; }
.en-29.en-29.en-29:not(#_) { flex: none; border: 1px solid var(--gold); border-radius: 12px; overflow: hidden; }
.en-30.en-30.en-30:not(#_) { padding: 11px 14px; background: var(--gold-soft); border-bottom: 1px solid var(--hair); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); }
.en-31.en-31.en-31:not(#_) { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--hair); }
.en-32.en-32.en-32:not(#_) { font-size: 12.5px; }
.en-33.en-33.en-33:not(#_) { width: 100%; height: 38px; border: none; background: var(--gold); color: #0A1130; border-radius: 10px; font-family: var(--font-sans); font-size: 13px; font-weight: 600; cursor: pointer; }
.en-34.en-34.en-34:not(#_) { flex: none; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.en-35.en-35.en-35:not(#_) { padding: 11px 14px; background: var(--sunken); border-bottom: 1px solid var(--hair); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.en-36.en-36.en-36:not(#_) { padding: 13px 14px; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.en-37.en-37.en-37:not(#_) { grid-column: 1 / -1; }
.en-38.en-38.en-38:not(#_) { font-size: 13px; }
.en-39.en-39.en-39:not(#_) { flex: none; padding: 14px 20px; border-top: 1px solid var(--hair); display: flex; gap: 8px; flex-wrap: wrap; }
.en-40.en-40.en-40:not(#_) { flex: 1 1 200px; height: 38px; display: flex; align-items: center; justify-content: center; gap: 7px; border: none; background: var(--gold); color: #0A1130; border-radius: 10px; font-family: var(--font-sans); font-size: 13.5px; font-weight: 600; text-decoration: none; }
.en-41.en-41.en-41:not(#_) { flex: 1 1 200px; margin: 0; }
.en-42.en-42.en-42:not(#_) { width: 100%; height: 38px; display: flex; align-items: center; justify-content: center; gap: 7px; border: none; background: var(--gold); color: #0A1130; border-radius: 10px; font-family: var(--font-sans); font-size: 13.5px; font-weight: 600; cursor: pointer; }
.en-43.en-43.en-43:not(#_) { width: 100%; height: 38px; display: flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid #1B8A4B; background: #1FA855; color: #fff; border-radius: 10px; font-family: var(--font-sans); font-size: 13.5px; font-weight: 600; cursor: pointer; }
.en-44.en-44.en-44:not(#_) { flex: 1 1 200px; height: 38px; display: flex; align-items: center; justify-content: center; gap: 7px; background: var(--green-soft); color: var(--green-ink); border-radius: 10px; font-size: 13px; font-weight: 600; }
.en-45.en-45.en-45:not(#_) { flex: none; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border: 1px solid #1B8A4B; background: #1FA855; color: #fff; border-radius: 10px; cursor: pointer; }
.en-46.en-46.en-46:not(#_) { position: fixed; inset: 0; z-index: 70; background: rgba(10,17,48,.35); }
.en-47.en-47.en-47:not(#_) { position: fixed; z-index: 71; top: 20px; bottom: 20px; right: 24px; width: 460px; max-width: calc(100vw - 48px); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 30px 70px -28px rgba(10,17,48,.6); overflow: hidden; }
.en-48.en-48.en-48:not(#_) { flex: none; padding: 16px 20px; border-bottom: 1px solid var(--hair); display: flex; align-items: flex-start; gap: 12px; }
.en-49.en-49.en-49:not(#_) { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.en-50.en-50.en-50:not(#_) { font-family: var(--font-serif); font-size: 22px; line-height: 1.15; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: var(--peso-titulo); }
.en-51.en-51.en-51:not(#_) { display: flex; align-items: center; gap: 7px; margin-top: 3px; }
.en-52.en-52.en-52:not(#_) { margin-left: auto; flex: none; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 17px; line-height: 1; text-decoration: none; }
.en-53.en-53.en-53:not(#_) { display: inline-block; margin-bottom: 4px; }
.en-54.en-54.en-54:not(#_) { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; }
.en-55.en-55.en-55:not(#_) { flex: none; padding: 16px 18px; border-bottom: 1px solid var(--hair); }
.en-56.en-56.en-56:not(#_) { font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.en-57.en-57.en-57:not(#_) { font-family: var(--font-serif); font-size: 21px; line-height: 1.2; margin-top: 2px; font-weight: var(--peso-titulo); }
.en-500.en-500.en-500:not(#_) { width: 13px; height: 13px; border-radius: 50%; }
.en-501.en-501.en-501:not(#_) { font-size: 10.5px; text-align: center; line-height: 1.3; }
.en-502.en-502.en-502:not(#_) { width: 9px; height: 9px; flex: none; border-radius: 50%; }
/* ── extraído de templates (cm) — seletor com :not(#_): pesa como o style="" que ocupava o lugar (só id ou !important vencem) ── */
.cm-1.cm-1.cm-1:not(#_) { flex-wrap: wrap; }
.cm-2.cm-2.cm-2:not(#_) { height: 34px; padding: 0 10px; }
.cm-3.cm-3.cm-3:not(#_) { margin-bottom: 16px; }
.cm-4.cm-4.cm-4:not(#_) { padding: 11px 14px; background: var(--sunken); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.cm-5.cm-5.cm-5:not(#_) { grid-template-columns: minmax(120px,1.5fr) 100px 100px minmax(120px,1.5fr) 190px; display: grid; align-items: center; gap: 10px; padding: 10px 14px; }
.cm-6.cm-6.cm-6:not(#_) { display: flex; gap: 6px; justify-content: flex-end; }
.cm-7.cm-7.cm-7:not(#_) { height: 30px; padding: 0 10px; font-size: 12px; }
.cm-8.cm-8.cm-8:not(#_) { display: flex; flex-direction: column; gap: 10px; }
.cm-9.cm-9.cm-9:not(#_) { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.cm-10.cm-10.cm-10:not(#_) { flex-direction: column; align-items: stretch; gap: 8px; }
.cm-11.cm-11.cm-11:not(#_) { display: flex; align-items: center; gap: 10px; }
.cm-12.cm-12.cm-12:not(#_) { display: flex; gap: 8px; }
.cm-13.cm-13.cm-13:not(#_) { flex: 1; }
.cm-14.cm-14.cm-14:not(#_) { width: 100%; height: 38px; }
.cm-15.cm-15.cm-15:not(#_) { margin-top: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.cm-16.cm-16.cm-16:not(#_) { display: flex; flex-direction: column; gap: 6px; padding: 10px 0 2px; margin-top: 6px; border-top: 1px solid var(--hair); }
.cm-17.cm-17.cm-17:not(#_) { font-size: 11px; color: var(--muted); display: flex; flex-direction: column; gap: 2px; }
.cm-18.cm-18.cm-18:not(#_) { height: 32px; font-size: 12.5px; }
.cm-19.cm-19.cm-19:not(#_) { grid-template-columns: 96px minmax(140px,1.8fr) 100px 58px 118px 118px; }
.cm-20.cm-20.cm-20:not(#_) { text-align: right; }
.cm-21.cm-21.cm-21:not(#_) { margin-top: 20px; padding: 11px 14px; background: var(--sunken); border-radius: 12px 12px 0 0; display: flex; align-items: center; gap: 10px; }
.cm-22.cm-22.cm-22:not(#_) { margin-left: auto; font-size: 11px; }
.cm-23.cm-23.cm-23:not(#_) { border-radius: 0 0 12px 12px; }
.cm-24.cm-24.cm-24:not(#_) { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; padding: 12px 14px; border-bottom: 1px solid var(--hair); }
.cm-25.cm-25.cm-25:not(#_) { margin: 0; }
.cm-26.cm-26.cm-26:not(#_) { width: 140px; }
.cm-27.cm-27.cm-27:not(#_) { margin: 0; flex: 1; min-width: 160px; }
.cm-28.cm-28.cm-28:not(#_) { height: 36px; }
.cm-29.cm-29.cm-29:not(#_) { width: 150px; }
.cm-30.cm-30.cm-30:not(#_) { width: 120px; }
.cm-31.cm-31.cm-31:not(#_) { width: 180px; }
.cm-32.cm-32.cm-32:not(#_) { grid-template-columns: 100px 100px minmax(100px,1fr) minmax(120px,1.5fr) 100px 34px 140px; display: grid; align-items: center; gap: 10px; padding: 10px 14px; }
.cm-33.cm-33.cm-33:not(#_) { display: flex; justify-content: flex-end; }
.cm-34.cm-34.cm-34:not(#_) { background: var(--surface); border: 1px solid var(--line); border-top: none; border-radius: 0 0 12px 12px; padding: 12px 14px; }
.cm-35.cm-35.cm-35:not(#_) { display: flex; flex-direction: column; gap: 12px; }
.cm-36.cm-36.cm-36:not(#_) { height: 44px; }
.cm-37.cm-37.cm-37:not(#_) { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cm-38.cm-38.cm-38:not(#_) { height: 34px; padding: 0 12px; font-size: 12.5px; }
.cm-39.cm-39.cm-39:not(#_) { margin-top: 16px; }
.cm-40.cm-40.cm-40:not(#_) { --cols: minmax(0,1fr) 110px 40px; align-items: center; }
.cm-500.cm-500.cm-500:not(#_) { font-size: 10.5px; font-weight: 600; white-space: nowrap; padding: 2px 8px; border-radius: 20px; }
/* ── extraído de templates (cp) — seletor com :not(#_): pesa como o style="" que ocupava o lugar (só id ou !important vencem) ── */
.cp-1.cp-1.cp-1:not(#_) { align-self: flex-start; text-decoration: none; }
.cp-2.cp-2.cp-2:not(#_) { padding: 22px 24px; display: flex; align-items: flex-start; gap: 24px; flex-wrap: wrap; }
.cp-3.cp-3.cp-3:not(#_) { min-width: 0; }
.cp-4.cp-4.cp-4:not(#_) { font-size: 14px; color: var(--gold-ink); }
.cp-5.cp-5.cp-5:not(#_) { font-size: 13.5px; color: var(--muted); margin-top: 4px; }
.cp-6.cp-6.cp-6:not(#_) { margin-left: auto; text-align: right; }
.cp-7.cp-7.cp-7:not(#_) { font-family: var(--font-mono, inherit); font-variant-numeric: tabular-nums; font-size: 30px; font-weight: 600; margin-top: 4px; }
.cp-8.cp-8.cp-8:not(#_) { text-transform: uppercase; letter-spacing: .14em; font-size: 10px; }
.cp-9.cp-9.cp-9:not(#_) { display: grid; grid-template-columns: 50px minmax(0,1fr) 120px; gap: 14px; align-items: center; padding: 13px 20px; border-bottom: 1px solid var(--hair); }
.cp-10.cp-10.cp-10:not(#_) { width: 50px; height: 50px; border-radius: 10px; object-fit: cover; border: 1px solid var(--hair); }
.cp-11.cp-11.cp-11:not(#_) { width: 50px; height: 50px; border-radius: 10px; background: #fff; border: 1px solid var(--hair); display: flex; align-items: center; justify-content: center; font-family: var(--font-serif); font-size: 12px; font-weight: var(--peso-titulo); }
.cp-12.cp-12.cp-12:not(#_) { font-size: 13.5px; line-height: 1.3; }
.cp-13.cp-13.cp-13:not(#_) { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.cp-14.cp-14.cp-14:not(#_) { text-align: right; font-family: var(--font-mono, inherit); font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 600; }
.cp-15.cp-15.cp-15:not(#_) { padding: 15px 20px; background: var(--sunken); display: flex; flex-direction: column; gap: 7px; }
.cp-16.cp-16.cp-16:not(#_) { display: flex; justify-content: space-between; font-size: 13px; }
.cp-17.cp-17.cp-17:not(#_) { color: var(--muted); }
.cp-18.cp-18.cp-18:not(#_) { color: var(--green-ink); }
.cp-19.cp-19.cp-19:not(#_) { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--hair); padding-top: 9px; }
.cp-20.cp-20.cp-20:not(#_) { font-size: 14px; }
.cp-21.cp-21.cp-21:not(#_) { font-size: 19px; }
.cp-22.cp-22.cp-22:not(#_) { display: flex; align-items: baseline; gap: 10px; }
.cp-23.cp-23.cp-23:not(#_) { margin-left: auto; }
.cp-24.cp-24.cp-24:not(#_) { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 13px 20px; border-bottom: 1px solid var(--hair); }
.cp-25.cp-25.cp-25:not(#_) { flex: none; font-size: 12px; color: var(--muted); }
.cp-26.cp-26.cp-26:not(#_) { flex: 1 1 150px; min-width: 140px; }
.cp-27.cp-27.cp-27:not(#_) { font-size: 13.5px; }
.cp-28.cp-28.cp-28:not(#_) { flex: none; margin-left: auto; font-family: var(--font-mono, inherit); font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 600; }
.cp-29.cp-29.cp-29:not(#_) { flex: none; display: flex; gap: 8px; }
.cp-30.cp-30.cp-30:not(#_) { margin-bottom: 14px; }
.cp-31.cp-31.cp-31:not(#_) { display: flex; gap: 12px; align-items: flex-start; }
.cp-32.cp-32.cp-32:not(#_) { flex: none; display: flex; flex-direction: column; align-items: center; align-self: stretch; }
.cp-33.cp-33.cp-33:not(#_) { min-width: 0; flex: 1; padding-bottom: 16px; }
.cp-34.cp-34.cp-34:not(#_) { font-size: 11px; color: var(--muted); }
.cp-35.cp-35.cp-35:not(#_) { align-items: center; }
.cp-36.cp-36.cp-36:not(#_) { align-self: flex-start; }
.cp-37.cp-37.cp-37:not(#_) { width: 140px; height: 140px; }
.cp-38.cp-38.cp-38:not(#_) { width: 100%; font-size: 11px; }
.cp-39.cp-39.cp-39:not(#_) { width: 100%; justify-content: center; }
.cp-40.cp-40.cp-40:not(#_) { background: var(--gold-soft); border: 1px solid var(--gold); border-radius: 14px; padding: 16px 18px; display: flex; align-items: center; gap: 12px; }
.cp-41.cp-41.cp-41:not(#_) { flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--gold); color: var(--ink); display: flex; align-items: center; justify-content: center; }
.cp-42.cp-42.cp-42:not(#_) { min-width: 0; flex: 1; font-size: 12.5px; color: var(--gold-ink); line-height: 1.5; }
.cp-43.cp-43.cp-43:not(#_) { justify-content: center; text-decoration: none; }
.cp-500.cp-500.cp-500:not(#_) { font-family: var(--font-serif); font-size: 34px; line-height: 1.1; margin-top: 6px; font-weight: var(--peso-titulo); }
.cp-501.cp-501.cp-501:not(#_) { flex: none; font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 20px; }
.cp-502.cp-502.cp-502:not(#_) { width: 13px; height: 13px; border-radius: 50%; }
.cp-503.cp-503.cp-503:not(#_) { flex: 1; width: 2px; min-height: 16px; }
.cp-504.cp-504.cp-504:not(#_) { font-size: 13px; }
/* ── extraído de templates (ob) — seletor com :not(#_): pesa como o style="" que ocupava o lugar (só id ou !important vencem) ── */
.ob-1.ob-1.ob-1:not(#_) { display: flex; gap: 8px; align-items: center; margin-bottom: 18px; flex-wrap: wrap; }
.ob-2.ob-2.ob-2:not(#_) { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.ob-3.ob-3.ob-3:not(#_) { height: 34px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink); font-family: var(--fb); font-size: 12.5px; padding: 0 8px; }
.ob-4.ob-4.ob-4:not(#_) { display: flex; gap: 8px; }
.ob-5.ob-5.ob-5:not(#_) { height: 34px; padding: 0 13px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 9px; font-family: var(--fb); font-size: 12.5px; cursor: pointer; }
.ob-6.ob-6.ob-6:not(#_) { margin-left: auto; height: 34px; padding: 0 14px; display: flex; align-items: center; gap: 7px; border: none; background: var(--gold); color: #0A1130; border-radius: 9px; font-family: var(--fb); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.ob-7.ob-7.ob-7:not(#_) { margin-bottom: 12px; font-size: 12px; color: var(--muted); }
.ob-8.ob-8.ob-8:not(#_) { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 18px; margin-bottom: 22px; }
.ob-9.ob-9.ob-9:not(#_) { align-self: flex-start; display: flex; align-items: center; gap: 8px; border: none; background: transparent; cursor: pointer; padding: 0; font-family: var(--fb); font-size: 12px; color: var(--muted); }
.ob-10.ob-10.ob-10:not(#_) { display: flex; gap: 18px; align-items: center; }
.ob-11.ob-11.ob-11:not(#_) { width: 62px; height: 62px; border-radius: 50%; background: var(--surface); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono, inherit); font-variant-numeric: tabular-nums; font-size: 15px; }
.ob-12.ob-12.ob-12:not(#_) { min-width: 0; flex: 1; }
.ob-13.ob-13.ob-13:not(#_) { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ob-14.ob-14.ob-14:not(#_) { font-family: var(--fd); font-size: 26px; line-height: 1.2; margin: 2px 0; }
.ob-15.ob-15.ob-15:not(#_) { font-size: 12px; color: var(--muted); }
.ob-16.ob-16.ob-16:not(#_) { margin-top: 7px; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--goldink); }
.ob-17.ob-17.ob-17:not(#_) { flex: none; }
.ob-18.ob-18.ob-18:not(#_) { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ob-19.ob-19.ob-19:not(#_) { height: 34px; display: flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 9px; font-family: var(--fb); font-size: 12.5px; cursor: pointer; }
.ob-20.ob-20.ob-20:not(#_) { display: flex; flex-direction: column; gap: 5px; }
.ob-21.ob-21.ob-21:not(#_) { font-size: 11.5px; color: var(--goldink); }
.ob-22.ob-22.ob-22:not(#_) { height: 5px; border-radius: 20px; background: var(--sunken); overflow: hidden; }
.ob-23.ob-23.ob-23:not(#_) { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--hair); padding-top: 12px; }
.ob-24.ob-24.ob-24:not(#_) { font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.ob-25.ob-25.ob-25:not(#_) { height: 32px; flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font-family: var(--font-mono, inherit); font-variant-numeric: tabular-nums; font-size: 13px; padding: 0 9px; }
.ob-26.ob-26.ob-26:not(#_) { font-size: 11px; color: var(--muted); }
.ob-27.ob-27.ob-27:not(#_) { display: flex; align-items: center; gap: 8px; }
.ob-28.ob-28.ob-28:not(#_) { width: 44px; height: 38px; flex: none; border: 1px dashed var(--line); background: var(--sunken); color: var(--muted); border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.ob-29.ob-29.ob-29:not(#_) { height: 38px; flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font-family: var(--fb); font-size: 13px; padding: 0 10px; }
.ob-30.ob-30.ob-30:not(#_) { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; }
.ob-31.ob-31.ob-31:not(#_) { padding: 15px 20px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }
.ob-32.ob-32.ob-32:not(#_) { font-family: var(--fd); font-size: 20px; }
.ob-33.ob-33.ob-33:not(#_) { font-size: 11.5px; color: var(--muted); }
.ob-34.ob-34.ob-34:not(#_) { display: grid; grid-template-columns: minmax(0,1.6fr) 1fr 150px 96px; gap: 16px; align-items: center; padding: 14px 20px; }
.ob-35.ob-35.ob-35:not(#_) { min-width: 0; }
.ob-36.ob-36.ob-36:not(#_) { height: 32px; width: 100%; border: 1px solid var(--gold); border-radius: 8px; background: var(--surface); color: var(--ink); font-family: var(--fb); font-size: 13px; padding: 0 9px; }
.ob-37.ob-37.ob-37:not(#_) { font-size: 13.5px; }
.ob-38.ob-38.ob-38:not(#_) { display: inline-block; margin-top: 4px; font-size: 12px; }
.ob-39.ob-39.ob-39:not(#_) { margin-left: 8px; font-size: 11.5px; color: var(--muted); }
.ob-40.ob-40.ob-40:not(#_) { display: flex; gap: 6px; margin-top: 7px; align-items: center; flex-wrap: wrap; }
.ob-41.ob-41.ob-41:not(#_) { display: flex; align-items: center; gap: 7px; height: 28px; border: none; background: transparent; cursor: pointer; padding: 0 4px 0 0; font-family: var(--fb); font-size: 12px; color: var(--muted); }
.ob-42.ob-42.ob-42:not(#_) { height: 28px; padding: 0 10px; display: flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 8px; font-family: var(--fb); font-size: 12px; cursor: pointer; }
.ob-43.ob-43.ob-43:not(#_) { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); background: var(--surface); color: var(--muted); border-radius: 8px; cursor: pointer; }
.ob-44.ob-44.ob-44:not(#_) { height: 32px; width: 100%; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font-family: var(--font-mono, inherit); font-variant-numeric: tabular-nums; font-size: 13px; padding: 0 9px; }
.ob-45.ob-45.ob-45:not(#_) { font-size: 11.5px; color: var(--muted); flex: none; }
.ob-46.ob-46.ob-46:not(#_) { height: 7px; border-radius: 20px; background: var(--sunken); overflow: hidden; }
.ob-47.ob-47.ob-47:not(#_) { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ob-48.ob-48.ob-48:not(#_) { width: 28px; height: 28px; flex: none; border-radius: 7px; background: var(--sunken); border: 1px solid var(--hair); display: flex; align-items: center; justify-content: center; color: var(--goldink); }
.ob-49.ob-49.ob-49:not(#_) { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ob-50.ob-50.ob-50:not(#_) { font-size: 11px; font-weight: 600; color: #1B8A4B; }
.ob-51.ob-51.ob-51:not(#_) { display: flex; align-items: center; gap: 8px; min-width: 0; grid-column: 3 / -1; }
.ob-52.ob-52.ob-52:not(#_) { width: 38px; height: 32px; flex: none; border: 1px dashed var(--line); background: var(--sunken); color: var(--muted); border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.ob-53.ob-53.ob-53:not(#_) { height: 32px; width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font-family: var(--fb); font-size: 12.5px; padding: 0 9px; }
.ob-54.ob-54.ob-54:not(#_) { font-family: var(--font-mono, inherit); font-variant-numeric: tabular-nums; font-size: 13px; text-align: right; }
.ob-55.ob-55.ob-55:not(#_) { margin: 0 20px 16px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); }
.ob-56.ob-56.ob-56:not(#_) { padding: 11px 14px; background: var(--sunken); border-bottom: 1px solid var(--hair); display: flex; align-items: baseline; gap: 10px; }
.ob-57.ob-57.ob-57:not(#_) { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ob-58.ob-58.ob-58:not(#_) { margin-left: auto; font-size: 11.5px; color: var(--muted); }
.ob-59.ob-59.ob-59:not(#_) { padding: 13px 14px; font-size: 12.5px; color: var(--muted); }
.ob-60.ob-60.ob-60:not(#_) { display: flex; align-items: center; gap: 11px; padding: 10px 14px; border-bottom: 1px solid var(--hair); }
.ob-61.ob-61.ob-61:not(#_) { width: 34px; height: 34px; flex: none; border-radius: 8px; background: #fff; border: 1px solid var(--hair); display: flex; align-items: center; justify-content: center; font-family: var(--fd); font-size: 10px; color: #0A1130; overflow: hidden; }
.ob-62.ob-62.ob-62:not(#_) { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ob-63.ob-63.ob-63:not(#_) { width: 28px; height: 28px; flex: none; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); background: var(--surface); color: var(--muted); border-radius: 8px; cursor: pointer; }
.ob-64.ob-64.ob-64:not(#_) { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.ob-65.ob-65.ob-65:not(#_) { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 9px; height: 36px; padding: 0 11px; background: var(--surface); }
.ob-66.ob-66.ob-66:not(#_) { border: none; outline: none; background: transparent; color: var(--ink); font-family: var(--fb); font-size: 13px; width: 100%; min-width: 0; }
.ob-67.ob-67.ob-67:not(#_) { display: flex; gap: 7px; flex-wrap: wrap; }
.ob-68.ob-68.ob-68:not(#_) { height: 32px; padding: 0 11px; display: flex; align-items: center; gap: 6px; border: 1px dashed var(--gold); background: transparent; color: var(--goldink); border-radius: 20px; font-family: var(--fb); font-size: 12px; cursor: pointer; max-width: 100%; }
.ob-69.ob-69.ob-69:not(#_) { padding: 14px 20px; background: var(--sunken); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ob-70.ob-70.ob-70:not(#_) { height: 34px; padding: 0 13px; display: flex; align-items: center; gap: 7px; border: 1px dashed var(--gold); background: transparent; color: var(--goldink); border-radius: 9px; font-family: var(--fb); font-size: 12.5px; cursor: pointer; }
.ob-71.ob-71.ob-71:not(#_) { margin-left: auto; display: flex; gap: 8px; }
.ob-72.ob-72.ob-72:not(#_) { height: 34px; padding: 0 14px; border: none; background: var(--gold); color: #0A1130; border-radius: 9px; font-family: var(--fb); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.ob-73.ob-73.ob-73:not(#_) { height: 34px; padding: 0 14px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 9px; font-family: var(--fb); font-size: 12.5px; cursor: pointer; }
.ob-74.ob-74.ob-74:not(#_) { position: sticky; bottom: 16px; margin-top: 18px; z-index: 6; display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--gold); border-radius: 14px; box-shadow: 0 18px 40px -22px rgba(10,17,48,.55); }
.ob-75.ob-75.ob-75:not(#_) { min-width: 0; flex: 1; font-size: 13px; }
.ob-76.ob-76.ob-76:not(#_) { height: 36px; padding: 0 14px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 9px; font-family: var(--fb); font-size: 13px; cursor: pointer; }
.ob-77.ob-77.ob-77:not(#_) { height: 36px; padding: 0 18px; border: none; background: #1FA855; color: #fff; border-radius: 9px; font-family: var(--fb); font-size: 13.5px; font-weight: 600; cursor: pointer; }
.ob-78.ob-78.ob-78:not(#_) { margin-top: 18px; display: flex; align-items: center; gap: 10px; padding: 11px 16px; background: var(--oksoft); color: #1B8A4B; border-radius: 12px; font-size: 13px; }
.ob-79.ob-79.ob-79:not(#_) { width: 26px; height: 26px; border: none; background: transparent; color: #1B8A4B; font-size: 17px; cursor: pointer; }
.ob-80.ob-80.ob-80:not(#_) { display: flex; flex-direction: column; gap: 12px; }
.ob-81.ob-81.ob-81:not(#_) { display: flex; flex-direction: column; gap: 5px; font-size: 11.5px; color: var(--muted); }
.ob-82.ob-82.ob-82:not(#_) { height: 44px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); font-family: var(--fb); font-size: 14.5px; padding: 0 12px; }
.ob-83.ob-83.ob-83:not(#_) { flex: 1; height: 44px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 12px; font-family: var(--fb); font-size: 13.5px; cursor: pointer; }
.ob-84.ob-84.ob-84:not(#_) { height: 46px; display: flex; align-items: center; justify-content: center; gap: 8px; border: none; background: var(--gold); color: #0A1130; border-radius: 13px; font-family: var(--fb); font-size: 14.5px; font-weight: 600; cursor: pointer; }
.ob-85.ob-85.ob-85:not(#_) { display: flex; align-items: center; gap: 10px; background: var(--oksoft); color: #1B8A4B; border-radius: 12px; padding: 12px 14px; font-size: 13px; }
.ob-86.ob-86.ob-86:not(#_) { width: 32px; height: 32px; flex: none; border: none; background: transparent; color: #1B8A4B; font-size: 18px; cursor: pointer; }
.ob-87.ob-87.ob-87:not(#_) { align-self: flex-start; height: 36px; display: flex; align-items: center; gap: 9px; border: none; background: transparent; cursor: pointer; padding: 0; font-family: var(--fb); font-size: 13px; color: var(--muted); }
.ob-88.ob-88.ob-88:not(#_) { display: flex; gap: 14px; align-items: center; }
.ob-89.ob-89.ob-89:not(#_) { width: 50px; height: 50px; border-radius: 50%; background: var(--surface); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono, inherit); font-variant-numeric: tabular-nums; font-size: 13.5px; font-weight: 600; }
.ob-90.ob-90.ob-90:not(#_) { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ob-91.ob-91.ob-91:not(#_) { font-family: var(--fd); font-size: 22px; line-height: 1.2; }
.ob-92.ob-92.ob-92:not(#_) { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--goldink); margin-top: 3px; }
.ob-93.ob-93.ob-93:not(#_) { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 11px; height: 44px; padding: 0 12px; background: var(--surface); gap: 6px; }
.ob-94.ob-94.ob-94:not(#_) { flex: 1; min-width: 0; border: none; outline: none; background: transparent; color: var(--ink); font-family: var(--font-mono, inherit); font-variant-numeric: tabular-nums; font-size: 14.5px; }
.ob-95.ob-95.ob-95:not(#_) { flex: none; font-size: 12px; color: var(--muted); }
.ob-96.ob-96.ob-96:not(#_) { flex: 1; min-width: 0; border: none; outline: none; background: transparent; color: var(--ink); font-family: var(--fb); font-size: 14.5px; }
.ob-97.ob-97.ob-97:not(#_) { height: 44px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 12px; font-family: var(--fb); font-size: 13.5px; cursor: pointer; }
.ob-98.ob-98.ob-98:not(#_) { font-size: 12px; color: var(--goldink); }
.ob-99.ob-99.ob-99:not(#_) { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }
.ob-100.ob-100.ob-100:not(#_) { display: flex; align-items: baseline; gap: 10px; }
.ob-101.ob-101.ob-101:not(#_) { min-width: 0; flex: 1; font-size: 14.5px; }
.ob-102.ob-102.ob-102:not(#_) { flex: none; font-family: var(--font-mono, inherit); font-variant-numeric: tabular-nums; font-size: 13px; }
.ob-103.ob-103.ob-103:not(#_) { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--goldink); }
.ob-104.ob-104.ob-104:not(#_) { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--hair); padding-top: 11px; }
.ob-105.ob-105.ob-105:not(#_) { flex: 1; height: 44px; display: flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 12px; font-family: var(--fb); font-size: 13.5px; cursor: pointer; }
.ob-106.ob-106.ob-106:not(#_) { width: 44px; height: 44px; flex: none; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); background: var(--surface); color: var(--danger); border-radius: 12px; cursor: pointer; }
.ob-107.ob-107.ob-107:not(#_) { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.ob-108.ob-108.ob-108:not(#_) { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--hair); }
.ob-109.ob-109.ob-109:not(#_) { font-size: 13.5px; line-height: 1.3; }
.ob-110.ob-110.ob-110:not(#_) { width: 40px; height: 40px; flex: none; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); background: var(--surface); color: var(--muted); border-radius: 10px; cursor: pointer; }
.ob-111.ob-111.ob-111:not(#_) { padding: 10px 12px; display: flex; flex-direction: column; gap: 9px; background: var(--sunken); }
.ob-112.ob-112.ob-112:not(#_) { height: 44px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); color: var(--ink); font-family: var(--fb); font-size: 14.5px; padding: 0 12px; }
.ob-113.ob-113.ob-113:not(#_) { min-height: 44px; padding: 8px 12px; display: flex; align-items: center; gap: 8px; border: 1px dashed var(--gold); background: var(--surface); color: var(--goldink); border-radius: 11px; font-family: var(--fb); font-size: 13px; text-align: left; cursor: pointer; }
.ob-114.ob-114.ob-114:not(#_) { height: 46px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px dashed var(--gold); background: transparent; color: var(--goldink); border-radius: 13px; font-family: var(--fb); font-size: 14px; cursor: pointer; }
.ob-115.ob-115.ob-115:not(#_) { flex: 1; height: 48px; border: none; background: var(--gold); color: #0A1130; border-radius: 13px; font-family: var(--fb); font-size: 14.5px; font-weight: 600; cursor: pointer; }
.ob-116.ob-116.ob-116:not(#_) { height: 48px; padding: 0 16px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 13px; font-family: var(--fb); font-size: 14px; cursor: pointer; }
.ob-117.ob-117.ob-117:not(#_) { position: sticky; bottom: 0; margin: 12px -16px -96px; padding: 12px 16px 14px; background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -10px 24px -18px rgba(10,17,48,.5); display: flex; gap: 8px; align-items: center; z-index: 5; }
.ob-118.ob-118.ob-118:not(#_) { min-width: 0; flex: 1; font-size: 12.5px; color: var(--muted); }
.ob-119.ob-119.ob-119:not(#_) { height: 46px; padding: 0 14px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 12px; font-family: var(--fb); font-size: 13.5px; cursor: pointer; }
.ob-120.ob-120.ob-120:not(#_) { height: 46px; padding: 0 18px; border: none; background: #1FA855; color: #fff; border-radius: 12px; font-family: var(--fb); font-size: 14.5px; font-weight: 600; cursor: pointer; }
.ob-121.ob-121.ob-121:not(#_) { position: fixed; z-index: 71; top: 20px; bottom: 20px; right: 24px; width: 440px; max-width: calc(100vw - 48px); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 30px 70px -28px rgba(10,17,48,.6); overflow: hidden; }
.ob-122.ob-122.ob-122:not(#_) { flex: none; padding: 16px 20px; border-bottom: 1px solid var(--hair); display: flex; align-items: flex-start; gap: 12px; }
.ob-123.ob-123.ob-123:not(#_) { font-family: var(--fd); font-size: 22px; line-height: 1.15; }
.ob-124.ob-124.ob-124:not(#_) { font-size: 12px; color: var(--muted); margin-top: 2px; }
.ob-125.ob-125.ob-125:not(#_) { margin-left: auto; flex: none; font-family: var(--font-mono, inherit); font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 600; color: var(--goldink); }
.ob-126.ob-126.ob-126:not(#_) { flex: none; width: 26px; height: 26px; border: none; background: transparent; color: var(--muted); font-size: 17px; line-height: 1; cursor: pointer; }
.ob-127.ob-127.ob-127:not(#_) { flex: none; padding: 10px 20px; border-bottom: 1px solid var(--hair); display: flex; gap: 7px; }
.ob-128.ob-128.ob-128:not(#_) { flex: 1; height: 34px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 9px; font-family: var(--fb); font-size: 12.5px; cursor: pointer; }
.ob-129.ob-129.ob-129:not(#_) { flex: none; padding: 12px 20px; border-bottom: 1px solid var(--hair); display: flex; flex-direction: column; gap: 6px; }
.ob-130.ob-130.ob-130:not(#_) { height: 6px; border-radius: 20px; background: var(--sunken); overflow: hidden; }
.ob-131.ob-131.ob-131:not(#_) { flex: 1; min-height: 0; overflow-y: auto; }
.ob-132.ob-132.ob-132:not(#_) { padding: 22px 20px; font-size: 12.5px; color: var(--muted); line-height: 1.6; }
.ob-133.ob-133.ob-133:not(#_) { display: flex; align-items: flex-start; gap: 10px; }
.ob-134.ob-134.ob-134:not(#_) { width: 22px; height: 22px; flex: none; margin-top: 2px; border-radius: 6px; border: 1.5px solid var(--line); background: var(--surface); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.ob-135.ob-135.ob-135:not(#_) { width: 22px; height: 22px; border-radius: 6px; background: #1FA855; display: flex; align-items: center; justify-content: center; }
.ob-136.ob-136.ob-136:not(#_) { font-size: 14px; }
.ob-137.ob-137.ob-137:not(#_) { width: 26px; height: 26px; flex: none; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); background: var(--surface); color: var(--muted); border-radius: 7px; cursor: pointer; }
.ob-138.ob-138.ob-138:not(#_) { display: flex; gap: 6px; flex-wrap: wrap; padding-left: 32px; }
.ob-139.ob-139.ob-139:not(#_) { height: 28px; padding: 0 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 20px; font-family: var(--fb); font-size: 11.5px; cursor: pointer; }
.ob-140.ob-140.ob-140:not(#_) { display: flex; gap: 8px; padding-left: 32px; }
.ob-141.ob-141.ob-141:not(#_) { height: 32px; width: 136px; flex: none; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font-family: var(--fb); font-size: 12px; padding: 0 8px; }
.ob-142.ob-142.ob-142:not(#_) { height: 32px; flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font-family: var(--fb); font-size: 12.5px; padding: 0 9px; }
.ob-143.ob-143.ob-143:not(#_) { padding-left: 32px; }
.ob-144.ob-144.ob-144:not(#_) { height: 30px; padding: 0 12px; display: flex; align-items: center; gap: 6px; border: none; background: var(--gold); color: #0A1130; border-radius: 8px; font-family: var(--fb); font-size: 12px; font-weight: 600; cursor: pointer; }
.ob-145.ob-145.ob-145:not(#_) { flex: none; padding: 12px 20px; border-top: 1px solid var(--hair); display: flex; flex-direction: column; gap: 8px; }
.ob-146.ob-146.ob-146:not(#_) { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 9px; height: 36px; padding: 0 11px; }
.ob-147.ob-147.ob-147:not(#_) { display: flex; gap: 6px; flex-wrap: wrap; }
.ob-148.ob-148.ob-148:not(#_) { height: 30px; padding: 0 11px; display: flex; align-items: center; gap: 6px; border: 1px dashed var(--gold); background: transparent; color: var(--goldink); border-radius: 20px; font-family: var(--fb); font-size: 12px; cursor: pointer; }
.ob-149.ob-149.ob-149:not(#_) { flex: none; padding: 10px 20px; background: var(--goldsoft); border-bottom: 1px solid var(--hair); font-size: 12px; color: var(--goldink); line-height: 1.5; display: flex; align-items: center; gap: 10px; }
.ob-150.ob-150.ob-150:not(#_) { flex: none; height: 28px; padding: 0 10px; border: 1px solid var(--gold); background: var(--surface); color: var(--goldink); border-radius: 8px; font-family: var(--fb); font-size: 11.5px; cursor: pointer; }
.ob-151.ob-151.ob-151:not(#_) { padding: 22px 20px; font-size: 12.5px; color: var(--muted); }
.ob-152.ob-152.ob-152:not(#_) { padding: 14px 20px; border-bottom: 1px solid var(--hair); display: flex; flex-direction: column; gap: 9px; }
.ob-153.ob-153.ob-153:not(#_) { font-family: var(--fd); font-size: 17px; color: var(--goldink); text-decoration: none; }
.ob-154.ob-154.ob-154:not(#_) { flex: none; font-family: var(--font-mono, inherit); font-variant-numeric: tabular-nums; font-size: 12.5px; font-weight: 600; white-space: nowrap; padding: 3px 8px; border-radius: 20px; background: var(--oksoft); color: #1B8A4B; }
.ob-155.ob-155.ob-155:not(#_) { font-size: 12.5px; line-height: 1.45; }
.ob-156.ob-156.ob-156:not(#_) { flex: 1; height: 34px; display: flex; align-items: center; justify-content: center; gap: 7px; border: none; background: var(--gold); color: #0A1130; border-radius: 9px; font-family: var(--fb); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.ob-157.ob-157.ob-157:not(#_) { height: 34px; padding: 0 12px; border: 1px dashed var(--gold); background: transparent; color: var(--goldink); border-radius: 9px; font-family: var(--fb); font-size: 12.5px; cursor: pointer; }
.ob-158.ob-158.ob-158:not(#_) { height: 34px; padding: 0 11px; display: flex; align-items: center; gap: 5px; background: var(--oksoft); color: #1B8A4B; border-radius: 9px; font-size: 12px; }
.ob-159.ob-159.ob-159:not(#_) { width: 34px; height: 34px; flex: none; display: flex; align-items: center; justify-content: center; border: 1px solid #1B8A4B; background: #1FA855; color: #fff; border-radius: 9px; cursor: pointer; }
.ob-160.ob-160.ob-160:not(#_) { flex: none; padding: 12px 20px; border-top: 1px solid var(--hair); display: flex; align-items: center; gap: 8px; background: var(--goldsoft); }
.ob-161.ob-161.ob-161:not(#_) { min-width: 0; flex: 1; font-size: 12.5px; color: var(--goldink); }
.ob-162.ob-162.ob-162:not(#_) { height: 34px; padding: 0 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 9px; font-family: var(--fb); font-size: 12.5px; cursor: pointer; }
.ob-163.ob-163.ob-163:not(#_) { height: 34px; padding: 0 16px; border: none; background: #1FA855; color: #fff; border-radius: 9px; font-family: var(--fb); font-size: 13px; font-weight: 600; cursor: pointer; }
.ob-164.ob-164.ob-164:not(#_) { align-self: flex-start; height: 40px; padding: 0 13px; display: flex; align-items: center; gap: 7px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 11px; font-family: var(--fb); font-size: 13px; cursor: pointer; }
.ob-165.ob-165.ob-165:not(#_) { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 15px; }
.ob-166.ob-166.ob-166:not(#_) { min-width: 0; flex: 1; font-family: var(--fd); font-size: 22px; line-height: 1.15; }
.ob-167.ob-167.ob-167:not(#_) { flex: none; font-family: var(--font-mono, inherit); font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 600; color: var(--goldink); }
.ob-168.ob-168.ob-168:not(#_) { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.ob-169.ob-169.ob-169:not(#_) { display: flex; flex-direction: column; gap: 10px; }
.ob-170.ob-170.ob-170:not(#_) { height: 44px; border: 1px dashed var(--gold); background: transparent; color: var(--goldink); border-radius: 12px; font-family: var(--fb); font-size: 13.5px; cursor: pointer; }
.ob-171.ob-171.ob-171:not(#_) { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.ob-172.ob-172.ob-172:not(#_) { font-family: var(--fd); font-size: 18px; color: var(--goldink); line-height: 1.2; }
.ob-173.ob-173.ob-173:not(#_) { flex: none; font-family: var(--font-mono, inherit); font-variant-numeric: tabular-nums; font-size: 12.5px; font-weight: 600; white-space: nowrap; padding: 3px 9px; border-radius: 20px; background: var(--oksoft); color: #1B8A4B; }
.ob-174.ob-174.ob-174:not(#_) { font-size: 13px; line-height: 1.45; }
.ob-175.ob-175.ob-175:not(#_) { flex: 1; height: 44px; display: flex; align-items: center; justify-content: center; gap: 7px; border: none; background: var(--gold); color: #0A1130; border-radius: 12px; font-family: var(--fb); font-size: 14px; font-weight: 600; cursor: pointer; }
.ob-176.ob-176.ob-176:not(#_) { flex: 1; height: 44px; border: 1px dashed var(--gold); background: transparent; color: var(--goldink); border-radius: 12px; font-family: var(--fb); font-size: 14px; cursor: pointer; }
.ob-177.ob-177.ob-177:not(#_) { flex: 1; height: 44px; display: flex; align-items: center; justify-content: center; background: var(--oksoft); color: #1B8A4B; border-radius: 12px; font-size: 13.5px; }
.ob-178.ob-178.ob-178:not(#_) { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 7px; }
.ob-179.ob-179.ob-179:not(#_) { font-size: 12.5px; color: var(--muted); }
.ob-180.ob-180.ob-180:not(#_) { background: var(--sunken); border-radius: 14px; padding: 16px; font-size: 13px; color: var(--muted); line-height: 1.55; }
.ob-181.ob-181.ob-181:not(#_) { display: flex; align-items: flex-start; gap: 11px; }
.ob-182.ob-182.ob-182:not(#_) { width: 40px; height: 40px; flex: none; border-radius: 11px; border: 1.5px solid var(--line); background: var(--surface); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.ob-183.ob-183.ob-183:not(#_) { width: 40px; height: 40px; border-radius: 11px; background: #1FA855; display: flex; align-items: center; justify-content: center; }
.ob-184.ob-184.ob-184:not(#_) { font-size: 15px; }
.ob-185.ob-185.ob-185:not(#_) { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 2px; }
.ob-186.ob-186.ob-186:not(#_) { flex: none; height: 40px; padding: 0 14px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 20px; font-family: var(--fb); font-size: 13px; cursor: pointer; }
.ob-187.ob-187.ob-187:not(#_) { height: 44px; display: flex; align-items: center; justify-content: center; gap: 7px; border: none; background: var(--gold); color: #0A1130; border-radius: 12px; font-family: var(--fb); font-size: 14px; font-weight: 600; cursor: pointer; }
.ob-188.ob-188.ob-188:not(#_) { height: 46px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); font-family: var(--fb); font-size: 14.5px; padding: 0 13px; }
.ob-189.ob-189.ob-189:not(#_) { height: 44px; border: 1px dashed var(--gold); background: var(--surface); color: var(--goldink); border-radius: 12px; font-family: var(--fb); font-size: 13.5px; cursor: pointer; }
.ob-190.ob-190.ob-190:not(#_) { position: sticky; bottom: 0; margin: 4px -16px -96px; padding: 12px 16px 14px; background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -10px 24px -18px rgba(10,17,48,.5); display: flex; gap: 8px; align-items: center; z-index: 5; }
.ob-500.ob-500.ob-500:not(#_) { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.ob-501.ob-501.ob-501:not(#_) { width: 36px; height: 20px; border-radius: 20px; position: relative; flex: none; transition: background .15s; }
.ob-502.ob-502.ob-502:not(#_) { position: absolute; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: left .15s; }
.ob-503.ob-503.ob-503:not(#_) { width: 84px; height: 84px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; }
.ob-504.ob-504.ob-504:not(#_) { height: 100%; background: #1FA855; border-radius: 20px; }
.ob-505.ob-505.ob-505:not(#_) { border-bottom: 1px solid var(--hair); }
.ob-506.ob-506.ob-506:not(#_) { height: 100%; background: var(--gold); border-radius: 20px; }
.ob-507.ob-507.ob-507:not(#_) { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 15px; display: flex; flex-direction: column; gap: 12px; }
.ob-508.ob-508.ob-508:not(#_) { width: 42px; height: 24px; border-radius: 20px; position: relative; flex: none; transition: background .15s; }
.ob-509.ob-509.ob-509:not(#_) { position: absolute; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: left .15s; }
.ob-510.ob-510.ob-510:not(#_) { width: 66px; height: 66px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.ob-511.ob-511.ob-511:not(#_) { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 15px; display: flex; flex-direction: column; gap: 11px; }
.ob-512.ob-512.ob-512:not(#_) { padding: 13px 20px; border-bottom: 1px solid var(--hair); display: flex; flex-direction: column; gap: 9px; }
.ob-513.ob-513.ob-513:not(#_) { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
/* ── extraído de templates (rp) — seletor com :not(#_): pesa como o style="" que ocupava o lugar (só id ou !important vencem) ── */
.rp-1.rp-1.rp-1:not(#_) { display: contents; }
.rp-2.rp-2.rp-2:not(#_) { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 14px; margin-bottom: 18px; }
.rp-3.rp-3.rp-3:not(#_) { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.rp-4.rp-4.rp-4:not(#_) { padding: 10px 14px; background: rgba(124,77,190,.1); border-bottom: 1px solid var(--hair); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #7C4DBE; font-weight: 600; }
.rp-5.rp-5.rp-5:not(#_) { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #7C4DBE; }
.rp-6.rp-6.rp-6:not(#_) { min-width: 0; flex: 1; }
.rp-7.rp-7.rp-7:not(#_) { display: block; font-size: 13px; }
.rp-8.rp-8.rp-8:not(#_) { display: block; font-size: 11.5px; color: var(--muted); }
.rp-9.rp-9.rp-9:not(#_) { padding: 10px 14px; background: rgba(232,115,60,.1); border-bottom: 1px solid var(--hair); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #A84C18; font-weight: 600; }
.rp-10.rp-10.rp-10:not(#_) { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #E8733C; }
.rp-11.rp-11.rp-11:not(#_) { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.rp-12.rp-12.rp-12:not(#_) { font-family: var(--font-serif); font-size: 22px; font-weight: var(--peso-titulo); }
.rp-13.rp-13.rp-13:not(#_) { font-size: 11.5px; color: var(--muted); }
.rp-14.rp-14.rp-14:not(#_) { margin-left: auto; height: 36px; padding: 0 15px; display: flex; align-items: center; gap: 7px; border: none; background: var(--gold); color: #0A1130; border-radius: 10px; font-family: var(--font-sans); font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer; }
.rp-15.rp-15.rp-15:not(#_) { display: grid; grid-template-columns: repeat(auto-fill, minmax(252px,1fr)); gap: 14px; margin-bottom: 20px; }
.rp-16.rp-16.rp-16:not(#_) { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; }
.rp-17.rp-17.rp-17:not(#_) { padding: 14px 16px 12px; border-bottom: 1px solid var(--hair); }
.rp-18.rp-18.rp-18:not(#_) { display: flex; align-items: baseline; gap: 8px; }
.rp-19.rp-19.rp-19:not(#_) { font-family: var(--font-serif); font-size: 19px; line-height: 1.15; font-weight: var(--peso-titulo); }
.rp-20.rp-20.rp-20:not(#_) { margin-left: auto; font-family: var(--font-mono, inherit); font-variant-numeric: tabular-nums; font-size: 11.5px; color: var(--muted); }
.rp-21.rp-21.rp-21:not(#_) { font-size: 12.5px; margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-22.rp-22.rp-22:not(#_) { display: flex; align-items: center; gap: 7px; margin-top: 6px; flex-wrap: wrap; }
.rp-23.rp-23.rp-23:not(#_) { font-size: 11px; color: var(--muted); }
.rp-24.rp-24.rp-24:not(#_) { font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; padding: 2px 6px; border-radius: 5px; background: rgba(232,115,60,.18); color: #A84C18; }
.rp-25.rp-25.rp-25:not(#_) { padding: 12px 16px; display: flex; gap: 8px; align-items: center; }
.rp-26.rp-26.rp-26:not(#_) { flex: 1; height: 36px; display: flex; align-items: center; justify-content: center; gap: 7px; border: none; background: var(--gold); color: #0A1130; border-radius: 9px; font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; text-decoration: none; cursor: pointer; }
.rp-27.rp-27.rp-27:not(#_) { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 9px; text-decoration: none; cursor: pointer; }
.rp-28.rp-28.rp-28:not(#_) { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); background: var(--surface); color: var(--muted); border-radius: 9px; text-decoration: none; cursor: pointer; }
.rp-29.rp-29.rp-29:not(#_) { min-height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; border: 1px dashed var(--gold); background: transparent; color: var(--gold-ink); border-radius: 14px; font-family: var(--font-sans); font-size: 13px; font-weight: 500; text-decoration: none; cursor: pointer; }
.rp-30.rp-30.rp-30:not(#_) { width: 34px; height: 34px; border-radius: 50%; background: var(--gold-soft); display: flex; align-items: center; justify-content: center; }
.rp-31.rp-31.rp-31:not(#_) { grid-column: 1/-1; }
.rp-32.rp-32.rp-32:not(#_) { background: var(--surface); border: 1px solid var(--gold); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; margin-bottom: 18px; }
.rp-33.rp-33.rp-33:not(#_) { padding: 16px 20px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.rp-34.rp-34.rp-34:not(#_) { font-family: var(--font-serif); font-size: 21px; font-weight: var(--peso-titulo); }
.rp-35.rp-35.rp-35:not(#_) { margin-left: auto; height: 32px; padding: 0 12px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); border-radius: 9px; font-family: var(--font-sans); font-size: 12.5px; text-decoration: none; cursor: pointer; }
.rp-36.rp-36.rp-36:not(#_) { padding: 18px 20px; border-bottom: 1px solid var(--hair); display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.rp-37.rp-37.rp-37:not(#_) { width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--ink); color: #F7F3EA; display: flex; align-items: center; justify-content: center; font-family: var(--font-serif); font-size: 15px; font-weight: var(--peso-titulo); }
.rp-38.rp-38.rp-38:not(#_) { min-width: 0; }
.rp-39.rp-39.rp-39:not(#_) { font-size: 15px; font-weight: 500; }
.rp-40.rp-40.rp-40:not(#_) { font-size: 12px; color: var(--muted); }
.rp-41.rp-41.rp-41:not(#_) { margin-left: auto; height: 42px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font-family: var(--font-sans); font-size: 14px; padding: 0 12px; }
.rp-42.rp-42.rp-42:not(#_) { padding: 18px 20px; border-bottom: 1px solid var(--hair); }
.rp-43.rp-43.rp-43:not(#_) { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.rp-44.rp-44.rp-44:not(#_) { margin-left: auto; font-size: 12px; color: var(--muted); }
.rp-45.rp-45.rp-45:not(#_) { margin-bottom: 12px; }
.rp-46.rp-46.rp-46:not(#_) { font-size: 11.5px; color: var(--muted); margin-bottom: 7px; }
.rp-47.rp-47.rp-47:not(#_) { display: flex; gap: 9px; flex-wrap: wrap; }
.rp-48.rp-48.rp-48:not(#_) { height: 44px; padding: 0 16px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 12px; font-family: var(--font-sans); font-size: 14px; text-decoration: none; cursor: pointer; }
.rp-49.rp-49.rp-49:not(#_) { flex: none; min-width: 18px; height: 18px; padding: 0 5px; display: flex; align-items: center; justify-content: center; border-radius: 20px; background: var(--red); color: #fff; font-size: 10.5px; font-weight: 700; }
.rp-50.rp-50.rp-50:not(#_) { height: 32px; padding: 0 12px; display: flex; align-items: center; gap: 7px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); border-radius: 9px; font-family: var(--font-sans); font-size: 12px; text-decoration: none; cursor: pointer; margin-top: 4px; }
.rp-51.rp-51.rp-51:not(#_) { margin-top: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--sunken); padding: 15px; }
.rp-52.rp-52.rp-52:not(#_) { font-size: 12.5px; color: var(--muted); line-height: 1.55; margin-bottom: 12px; }
.rp-53.rp-53.rp-53:not(#_) { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.rp-54.rp-54.rp-54:not(#_) { display: flex; align-items: center; gap: 8px; }
.rp-55.rp-55.rp-55:not(#_) { width: 34px; height: 40px; flex: none; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); background: var(--surface); color: var(--muted); border-radius: 9px; text-decoration: none; cursor: pointer; }
.rp-56.rp-56.rp-56:not(#_) { flex: 1; min-width: 0; height: 40px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font-family: var(--font-sans); font-size: 14px; padding: 0 12px; }
.rp-57.rp-57.rp-57:not(#_) { flex: none; width: 74px; text-align: right; font-size: 11.5px; color: var(--muted); }
.rp-58.rp-58.rp-58:not(#_) { height: 32px; padding: 0 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 9px; font-family: var(--font-sans); font-size: 12px; cursor: pointer; margin-bottom: 12px; }
.rp-59.rp-59.rp-59:not(#_) { height: 36px; padding: 0 13px; display: flex; align-items: center; gap: 7px; border: 1px dashed var(--gold); background: transparent; color: var(--gold-ink); border-radius: 10px; font-family: var(--font-sans); font-size: 13px; text-decoration: none; cursor: pointer; margin-bottom: 14px; width: fit-content; }
.rp-60.rp-60.rp-60:not(#_) { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin-bottom: 9px; }
.rp-61.rp-61.rp-61:not(#_) { color: var(--ink); }
.rp-62.rp-62.rp-62:not(#_) { display: flex; gap: 8px; flex-wrap: wrap; }
.rp-63.rp-63.rp-63:not(#_) { height: 38px; padding: 0 13px; display: flex; align-items: center; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 20px; font-family: var(--font-sans); font-size: 13px; text-decoration: none; cursor: pointer; }
.rp-64.rp-64.rp-64:not(#_) { padding: 18px 20px 12px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.rp-65.rp-65.rp-65:not(#_) { border-top: 1px solid var(--hair); }
.rp-66.rp-66.rp-66:not(#_) { display: block; font-size: 14.5px; font-weight: 500; }
.rp-67.rp-67.rp-67:not(#_) { flex: none; font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 20px; background: rgba(232,115,60,.18); color: #A84C18; }
.rp-68.rp-68.rp-68:not(#_) { margin-left: auto; flex: none; display: flex; align-items: center; gap: 10px; }
.rp-69.rp-69.rp-69:not(#_) { padding: 10px 20px 14px; display: flex; align-items: center; gap: 10px; }
.rp-70.rp-70.rp-70:not(#_) { height: 34px; padding: 0 13px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 9px; font-family: var(--font-sans); font-size: 12.5px; text-decoration: none; cursor: pointer; }
.rp-71.rp-71.rp-71:not(#_) { height: 34px; padding: 0 13px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); border-radius: 9px; font-family: var(--font-sans); font-size: 12.5px; text-decoration: none; cursor: pointer; }
.rp-72.rp-72.rp-72:not(#_) { font-size: 11.5px; color: var(--red); }
.rp-73.rp-73.rp-73:not(#_) { display: flex; align-items: center; gap: 13px; padding: 13px 20px; border-top: 1px solid var(--hair); }
.rp-74.rp-74.rp-74:not(#_) { width: 19px; height: 19px; flex: none; accent-color: var(--gold); cursor: pointer; }
.rp-75.rp-75.rp-75:not(#_) { width: 19px; height: 19px; flex: none; border-radius: 5px; background: var(--gold); color: #0A1130; display: flex; align-items: center; justify-content: center; }
.rp-76.rp-76.rp-76:not(#_) { display: flex; align-items: center; gap: 7px; min-width: 0; }
.rp-77.rp-77.rp-77:not(#_) { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-78.rp-78.rp-78:not(#_) { flex: none; font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; padding: 2px 6px; border-radius: 5px; background: rgba(232,115,60,.18); color: #A84C18; }
.rp-79.rp-79.rp-79:not(#_) { flex: none; height: 34px; padding: 0 13px; display: flex; align-items: center; gap: 7px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 9px; font-family: var(--font-sans); font-size: 12.5px; text-decoration: none; cursor: pointer; }
.rp-80.rp-80.rp-80:not(#_) { padding: 16px 20px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rp-81.rp-81.rp-81:not(#_) { font-size: 12.5px; color: var(--muted); }
.rp-82.rp-82.rp-82:not(#_) { margin-left: auto; height: 44px; padding: 0 20px; display: flex; align-items: center; gap: 8px; border: none; background: var(--gold); color: #0A1130; border-radius: 11px; font-family: var(--font-sans); font-size: 14.5px; font-weight: 600; cursor: pointer; }
.rp-83.rp-83.rp-83:not(#_) { display: flex; flex-direction: column; gap: 13px; }
.rp-84.rp-84.rp-84:not(#_) { display: flex; align-items: center; gap: 11px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 14px 15px; }
.rp-85.rp-85.rp-85:not(#_) { font-size: 14.5px; font-weight: 500; }
.rp-86.rp-86.rp-86:not(#_) { flex: none; height: 44px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); color: var(--ink); font-family: var(--font-sans); font-size: 14px; padding: 0 10px; }
.rp-87.rp-87.rp-87:not(#_) { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 14px 15px; }
.rp-88.rp-88.rp-88:not(#_) { display: flex; align-items: center; gap: 11px; margin-bottom: 13px; }
.rp-89.rp-89.rp-89:not(#_) { flex: none; font-size: 11.5px; color: var(--muted); }
.rp-90.rp-90.rp-90:not(#_) { height: 46px; padding: 0 15px; display: flex; align-items: center; gap: 9px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 13px; font-family: var(--font-sans); font-size: 14px; text-decoration: none; cursor: pointer; }
.rp-91.rp-91.rp-91:not(#_) { flex: none; min-width: 19px; height: 19px; padding: 0 5px; display: flex; align-items: center; justify-content: center; border-radius: 20px; background: var(--red); color: #fff; font-size: 11px; font-weight: 700; }
.rp-92.rp-92.rp-92:not(#_) { display: flex; flex-direction: column; gap: 11px; }
.rp-93.rp-93.rp-93:not(#_) { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.rp-94.rp-94.rp-94:not(#_) { flex: none; font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 20px; background: rgba(232,115,60,.18); color: #A84C18; }
.rp-95.rp-95.rp-95:not(#_) { flex: none; }
.rp-96.rp-96.rp-96:not(#_) { display: flex; align-items: center; gap: 12px; padding: 13px 15px; border-top: 1px solid var(--hair); }
.rp-97.rp-97.rp-97:not(#_) { width: 22px; height: 22px; flex: none; accent-color: var(--gold); cursor: pointer; }
.rp-98.rp-98.rp-98:not(#_) { width: 22px; height: 22px; flex: none; border-radius: 6px; background: var(--gold); color: #0A1130; display: flex; align-items: center; justify-content: center; }
.rp-99.rp-99.rp-99:not(#_) { flex: none; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); background: var(--surface); color: var(--muted); border-radius: 11px; text-decoration: none; cursor: pointer; }
.rp-100.rp-100.rp-100:not(#_) { height: 54px; display: flex; align-items: center; justify-content: center; gap: 9px; border: none; background: var(--gold); color: #0A1130; border-radius: 14px; font-family: var(--font-sans); font-size: 15.5px; font-weight: 600; cursor: pointer; }
.rp-101.rp-101.rp-101:not(#_) { height: 46px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); border-radius: 12px; font-family: var(--font-sans); font-size: 13.5px; text-decoration: none; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.rp-102.rp-102.rp-102:not(#_) { padding: 10px 14px; background: rgba(124,77,190,.1); border-bottom: 1px solid var(--hair); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: #7C4DBE; font-weight: 600; }
.rp-103.rp-103.rp-103:not(#_) { display: block; font-size: 13.5px; }
.rp-104.rp-104.rp-104:not(#_) { padding: 10px 14px; background: rgba(232,115,60,.1); border-bottom: 1px solid var(--hair); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: #A84C18; font-weight: 600; }
.rp-105.rp-105.rp-105:not(#_) { display: flex; align-items: center; gap: 10px; }
.rp-106.rp-106.rp-106:not(#_) { font-family: var(--font-serif); font-size: 19px; font-weight: var(--peso-titulo); }
.rp-107.rp-107.rp-107:not(#_) { margin-left: auto; height: 40px; padding: 0 14px; display: flex; align-items: center; gap: 7px; border: none; background: var(--gold); color: #0A1130; border-radius: 12px; font-family: var(--font-sans); font-size: 13.5px; font-weight: 600; text-decoration: none; cursor: pointer; }
.rp-108.rp-108.rp-108:not(#_) { display: flex; align-items: baseline; gap: 9px; }
.rp-109.rp-109.rp-109:not(#_) { font-family: var(--font-serif); font-size: 18px; font-weight: var(--peso-titulo); }
.rp-110.rp-110.rp-110:not(#_) { font-size: 13px; margin-top: 6px; }
.rp-111.rp-111.rp-111:not(#_) { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
.rp-112.rp-112.rp-112:not(#_) { font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 20px; background: rgba(232,115,60,.18); color: #A84C18; }
.rp-113.rp-113.rp-113:not(#_) { display: flex; gap: 8px; margin-top: 12px; }
.rp-114.rp-114.rp-114:not(#_) { flex: 1; height: 44px; display: flex; align-items: center; justify-content: center; gap: 8px; border: none; background: var(--gold); color: #0A1130; border-radius: 12px; font-family: var(--font-sans); font-size: 13.5px; font-weight: 600; text-decoration: none; cursor: pointer; }
.rp-115.rp-115.rp-115:not(#_) { width: 48px; height: 44px; flex: none; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 12px; text-decoration: none; cursor: pointer; }
.rp-116.rp-116.rp-116:not(#_) { width: 48px; height: 44px; flex: none; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); background: var(--surface); color: var(--muted); border-radius: 12px; text-decoration: none; cursor: pointer; }
.rp-117.rp-117.rp-117:not(#_) { margin-bottom: 14px; }
.rp-118.rp-118.rp-118:not(#_) { height: 38px; padding: 0 12px; width: 100%; max-width: 320px; }
.rp-500.rp-500.rp-500:not(#_) { width: 100%; padding: 13px 20px; display: flex; align-items: center; gap: 11px; border: none; border-bottom: 1px solid var(--hair); cursor: pointer; text-align: left; font-family: var(--font-sans); color: var(--ink); text-decoration: none; }
.rp-501.rp-501.rp-501:not(#_) { width: 26px; height: 26px; flex: none; border-radius: 50%; color: #0A1130; display: flex; align-items: center; justify-content: center; }
.rp-502.rp-502.rp-502:not(#_) { width: 100%; padding: 13px 15px; display: flex; align-items: center; gap: 11px; border: none; cursor: pointer; text-align: left; font-family: var(--font-sans); color: var(--ink); text-decoration: none; }
.rp-503.rp-503.rp-503:not(#_) { width: 28px; height: 28px; flex: none; border-radius: 50%; color: #0A1130; display: flex; align-items: center; justify-content: center; }
/* ── extraído de templates (oc) — seletor com :not(#_): pesa como o style="" que ocupava o lugar (só id ou !important vencem) ── */
.oc-1.oc-1.oc-1:not(#_) { flex: none; padding: 14px 20px; background: var(--sunken); border-bottom: 1px solid var(--hair); display: flex; align-items: baseline; justify-content: space-between; }
.oc-2.oc-2.oc-2:not(#_) { font-size: 12px; color: var(--muted); }
.oc-3.oc-3.oc-3:not(#_) { font-family: var(--font-mono, inherit); font-variant-numeric: tabular-nums; font-size: 22px; font-weight: 600; }
.oc-4.oc-4.oc-4:not(#_) { padding: 16px 20px 18px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; min-height: 0; }
.oc-5.oc-5.oc-5:not(#_) { min-width: 0; }
.oc-6.oc-6.oc-6:not(#_) { font-size: 11.5px; color: var(--muted); }
.oc-7.oc-7.oc-7:not(#_) { flex: none; }
.oc-8.oc-8.oc-8:not(#_) { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 9px; }
.oc-9.oc-9.oc-9:not(#_) { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.oc-10.oc-10.oc-10:not(#_) { display: grid; grid-template-columns: 42px 34px minmax(0,1fr) 104px; gap: 10px; align-items: center; padding: 11px 14px; border-bottom: 1px solid var(--hair); }
.oc-11.oc-11.oc-11:not(#_) { width: 42px; height: 42px; border-radius: 9px; object-fit: cover; border: 1px solid var(--hair); }
.oc-12.oc-12.oc-12:not(#_) { width: 42px; height: 42px; flex: none; border-radius: 9px; background: #fff; border: 1px solid var(--hair); display: flex; align-items: center; justify-content: center; font-family: var(--font-serif); font-size: 11px; color: var(--ink); overflow: hidden; font-weight: var(--peso-titulo); }
.oc-13.oc-13.oc-13:not(#_) { font-size: 12.5px; color: var(--muted); }
.oc-14.oc-14.oc-14:not(#_) { font-size: 12.5px; line-height: 1.3; }
.oc-15.oc-15.oc-15:not(#_) { font-size: 11px; color: var(--muted); }
.oc-16.oc-16.oc-16:not(#_) { text-align: right; font-family: var(--font-mono, inherit); font-variant-numeric: tabular-nums; font-size: 13px; }
.oc-17.oc-17.oc-17:not(#_) { padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; background: var(--sunken); }
.oc-18.oc-18.oc-18:not(#_) { display: flex; justify-content: space-between; font-size: 12.5px; }
.oc-19.oc-19.oc-19:not(#_) { color: var(--muted); }
.oc-20.oc-20.oc-20:not(#_) { color: var(--green-ink); }
.oc-21.oc-21.oc-21:not(#_) { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--hair); padding-top: 8px; }
.oc-22.oc-22.oc-22:not(#_) { font-size: 13.5px; }
.oc-23.oc-23.oc-23:not(#_) { font-family: var(--font-mono, inherit); font-variant-numeric: tabular-nums; font-size: 17px; }
.oc-24.oc-24.oc-24:not(#_) { flex: none; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.oc-25.oc-25.oc-25:not(#_) { padding: 11px 14px; background: var(--sunken); border-bottom: 1px solid var(--hair); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.oc-26.oc-26.oc-26:not(#_) { padding: 13px 14px; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.oc-27.oc-27.oc-27:not(#_) { font-size: 13px; }
.oc-28.oc-28.oc-28:not(#_) { font-size: 12.5px; }
.oc-29.oc-29.oc-29:not(#_) { padding: 0 14px 13px; }
.oc-30.oc-30.oc-30:not(#_) { font-size: 11px; color: var(--muted); margin-bottom: 6px; }
.oc-31.oc-31.oc-31:not(#_) { border: 1px solid var(--hair); border-radius: 8px; overflow: hidden; }
.oc-32.oc-32.oc-32:not(#_) { font-size: 12.5px; line-height: 1.5; }
.oc-33.oc-33.oc-33:not(#_) { flex: none; padding: 14px 20px; border-top: 1px solid var(--hair); display: flex; gap: 8px; flex-wrap: wrap; }
.oc-34.oc-34.oc-34:not(#_) { flex: 1; min-width: 140px; }
.oc-35.oc-35.oc-35:not(#_) { width: 100%; height: 38px; display: flex; align-items: center; justify-content: center; gap: 7px; border: none; background: var(--gold); color: #0A1130; border-radius: 10px; font-family: var(--font-sans); font-size: 13.5px; font-weight: 600; cursor: pointer; }
.oc-36.oc-36.oc-36:not(#_) { height: 38px; padding: 0 14px; display: flex; align-items: center; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 10px; font-family: var(--font-sans); font-size: 13.5px; text-decoration: none; }
.oc-37.oc-37.oc-37:not(#_) { flex: none; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border: 1px solid #1B8A4B; background: #1FA855; color: #fff; border-radius: 10px; cursor: pointer; }
.oc-38.oc-38.oc-38:not(#_) { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px 18px; }
.oc-39.oc-39.oc-39:not(#_) { display: flex; align-items: center; gap: 10px; background: var(--gold-soft); border: 1px solid var(--gold); border-radius: 14px; padding: 12px 14px; }
.oc-40.oc-40.oc-40:not(#_) { min-width: 0; flex: 1; }
.oc-41.oc-41.oc-41:not(#_) { font-size: 13.5px; color: var(--gold-ink); font-weight: 500; }
.oc-42.oc-42.oc-42:not(#_) { font-size: 11.5px; color: var(--gold-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oc-43.oc-43.oc-43:not(#_) { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.oc-44.oc-44.oc-44:not(#_) { padding: 11px 14px; background: var(--sunken); border-bottom: 1px solid var(--hair); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.oc-45.oc-45.oc-45:not(#_) { padding: 14px; font-size: 12.5px; color: var(--muted); }
.oc-46.oc-46.oc-46:not(#_) { padding: 12px 14px; border-bottom: 1px solid var(--hair); }
.oc-47.oc-47.oc-47:not(#_) { display: flex; gap: 11px; align-items: flex-start; }
.oc-48.oc-48.oc-48:not(#_) { width: 44px; height: 44px; flex: none; border-radius: 10px; object-fit: cover; border: 1px solid var(--hair); }
.oc-49.oc-49.oc-49:not(#_) { width: 44px; height: 44px; flex: none; border-radius: 10px; background: #fff; border: 1px solid var(--hair); }
.oc-50.oc-50.oc-50:not(#_) { font-size: 13px; line-height: 1.3; }
.oc-51.oc-51.oc-51:not(#_) { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.oc-52.oc-52.oc-52:not(#_) { flex: none; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); background: var(--surface); color: var(--muted); border-radius: 10px; cursor: pointer; }
.oc-53.oc-53.oc-53:not(#_) { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.oc-54.oc-54.oc-54:not(#_) { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 11px; height: 44px; }
.oc-55.oc-55.oc-55:not(#_) { width: 44px; height: 100%; border: none; background: transparent; color: var(--ink); font-size: 19px; cursor: pointer; }
.oc-56.oc-56.oc-56:not(#_) { width: 34px; text-align: center; font-family: var(--font-mono, inherit); font-variant-numeric: tabular-nums; font-size: 14px; }
.oc-57.oc-57.oc-57:not(#_) { margin-left: auto; font-family: var(--font-mono, inherit); font-variant-numeric: tabular-nums; font-size: 14.5px; font-weight: 600; white-space: nowrap; }
.oc-58.oc-58.oc-58:not(#_) { background: var(--surface); border: 1px dashed var(--gold); border-radius: 16px; overflow: hidden; }
.oc-59.oc-59.oc-59:not(#_) { padding: 0 14px; height: 48px; display: flex; align-items: center; gap: 9px; }
.oc-60.oc-60.oc-60:not(#_) { flex: 1; min-width: 0; border: none; outline: none; background: transparent; color: var(--ink); font-family: var(--font-sans); font-size: 15px; }
.oc-61.oc-61.oc-61:not(#_) { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--hair); }
.oc-62.oc-62.oc-62:not(#_) { min-width: 0; flex: 1; font-size: 13px; line-height: 1.3; }
.oc-63.oc-63.oc-63:not(#_) { font-family: var(--font-mono, inherit); font-variant-numeric: tabular-nums; font-size: 11.5px; color: var(--muted); }
.oc-64.oc-64.oc-64:not(#_) { flex: none; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: none; background: var(--gold); color: #0A1130; border-radius: 12px; cursor: pointer; }
.oc-65.oc-65.oc-65:not(#_) { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 14px; }
.oc-66.oc-66.oc-66:not(#_) { font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.oc-67.oc-67.oc-67:not(#_) { display: flex; gap: 7px; flex-wrap: wrap; }
.oc-68.oc-68.oc-68:not(#_) { flex: 1 1 auto; height: 44px; padding: 0 14px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 12px; font-family: var(--font-sans); font-size: 13.5px; cursor: pointer; }
.oc-69.oc-69.oc-69:not(#_) { font-size: 12px; color: var(--muted); margin-top: 9px; }
.oc-70.oc-70.oc-70:not(#_) { color: var(--ink); }
.oc-71.oc-71.oc-71:not(#_) { display: flex; align-items: baseline; justify-content: space-between; padding: 4px 2px; }
.oc-72.oc-72.oc-72:not(#_) { font-size: 14px; }
.oc-73.oc-73.oc-73:not(#_) { font-family: var(--font-mono, inherit); font-variant-numeric: tabular-nums; font-size: 20px; white-space: nowrap; }
.oc-74.oc-74.oc-74:not(#_) { height: 52px; display: flex; align-items: center; justify-content: center; gap: 8px; border: none; background: var(--gold); color: #0A1130; border-radius: 13px; font-family: var(--font-sans); font-size: 15px; font-weight: 600; cursor: pointer; }
.oc-75.oc-75.oc-75:not(#_) { display: flex; align-items: center; justify-content: center; text-decoration: none; height: 48px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 12px; font-family: var(--font-sans); font-size: 14px; }
.oc-76.oc-76.oc-76:not(#_) { display: contents; }
.oc-77.oc-77.oc-77:not(#_) { flex: none; padding: 11px 20px; background: var(--gold-soft); border-bottom: 1px solid var(--hair); display: flex; align-items: center; gap: 9px; }
.oc-78.oc-78.oc-78:not(#_) { font-size: 12.5px; color: var(--gold-ink); font-weight: 500; }
.oc-79.oc-79.oc-79:not(#_) { margin-left: auto; font-size: 11.5px; color: var(--gold-ink); }
.oc-80.oc-80.oc-80:not(#_) { padding: 16px 20px 18px; display: flex; flex-direction: column; gap: 18px; overflow-y: auto; min-height: 0; }
.oc-81.oc-81.oc-81:not(#_) { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.oc-82.oc-82.oc-82:not(#_) { background: var(--sunken); border-radius: 11px; padding: 14px; font-size: 12.5px; color: var(--muted); }
.oc-83.oc-83.oc-83:not(#_) { display: grid; grid-template-columns: 40px minmax(0,1fr) 108px 92px 28px; gap: 10px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--hair); }
.oc-84.oc-84.oc-84:not(#_) { width: 40px; height: 40px; border-radius: 9px; object-fit: cover; border: 1px solid var(--hair); }
.oc-85.oc-85.oc-85:not(#_) { width: 40px; height: 40px; border-radius: 9px; background: #fff; border: 1px solid var(--hair); }
.oc-86.oc-86.oc-86:not(#_) { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 9px; height: 32px; }
.oc-87.oc-87.oc-87:not(#_) { width: 30px; height: 100%; border: none; background: transparent; color: var(--ink); font-size: 16px; cursor: pointer; }
.oc-88.oc-88.oc-88:not(#_) { width: 40px; min-width: 0; border: none; outline: none; background: transparent; color: var(--ink); font-family: var(--font-mono, inherit); font-variant-numeric: tabular-nums; font-size: 13px; text-align: center; }
.oc-89.oc-89.oc-89:not(#_) { text-align: right; font-family: var(--font-mono, inherit); font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 600; white-space: nowrap; }
.oc-90.oc-90.oc-90:not(#_) { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); background: var(--surface); color: var(--muted); border-radius: 7px; cursor: pointer; }
.oc-91.oc-91.oc-91:not(#_) { flex: none; border: 1px dashed var(--gold); border-radius: 12px; overflow: hidden; }
.oc-92.oc-92.oc-92:not(#_) { padding: 10px 12px; display: flex; align-items: center; gap: 8px; background: var(--surface); }
.oc-93.oc-93.oc-93:not(#_) { flex: 1; min-width: 0; border: none; outline: none; background: transparent; color: var(--ink); font-family: var(--font-sans); font-size: 13px; }
.oc-94.oc-94.oc-94:not(#_) { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-top: 1px solid var(--hair); }
.oc-95.oc-95.oc-95:not(#_) { min-width: 0; flex: 1; font-size: 12.5px; }
.oc-96.oc-96.oc-96:not(#_) { flex: none; font-family: var(--font-mono, inherit); font-variant-numeric: tabular-nums; font-size: 12px; color: var(--muted); }
.oc-97.oc-97.oc-97:not(#_) { flex: none; height: 28px; padding: 0 10px; display: flex; align-items: center; gap: 5px; border: none; background: var(--gold); color: #0A1130; border-radius: 7px; font-family: var(--font-sans); font-size: 12px; font-weight: 600; cursor: pointer; }
.oc-98.oc-98.oc-98:not(#_) { height: 34px; padding: 0 13px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 20px; font-family: var(--font-sans); font-size: 12.5px; cursor: pointer; }
.oc-99.oc-99.oc-99:not(#_) { font-size: 11.5px; color: var(--muted); margin-top: 8px; }
.oc-100.oc-100.oc-100:not(#_) { flex: none; background: var(--sunken); border-radius: 12px; padding: 13px 14px; display: flex; flex-direction: column; gap: 7px; }
.oc-101.oc-101.oc-101:not(#_) { display: flex; justify-content: space-between; align-items: baseline; }
.oc-102.oc-102.oc-102:not(#_) { font-family: var(--font-mono, inherit); font-variant-numeric: tabular-nums; font-size: 18px; white-space: nowrap; }
.oc-103.oc-103.oc-103:not(#_) { flex: none; padding: 14px 20px; border-top: 1px solid var(--hair); display: flex; gap: 8px; }
.oc-104.oc-104.oc-104:not(#_) { flex: 1; height: 38px; display: flex; align-items: center; justify-content: center; gap: 7px; border: none; background: var(--gold); color: #0A1130; border-radius: 10px; font-family: var(--font-sans); font-size: 13.5px; font-weight: 600; cursor: pointer; }
.oc-105.oc-105.oc-105:not(#_) { display: flex; align-items: center; justify-content: center; text-decoration: none; height: 38px; padding: 0 14px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 10px; font-family: var(--font-sans); font-size: 13.5px; }
.oc-106.oc-106.oc-106:not(#_) { position: fixed; inset: 0; z-index: 70; background: rgba(10,17,48,.35); }
.oc-107.oc-107.oc-107:not(#_) { position: fixed; z-index: 71; top: 20px; bottom: 20px; right: 24px; width: 480px; max-width: calc(100vw - 48px); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 30px 70px -28px rgba(10,17,48,.6); overflow: hidden; }
.oc-108.oc-108.oc-108:not(#_) { flex: none; padding: 16px 20px; border-bottom: 1px solid var(--hair); display: flex; align-items: flex-start; gap: 12px; }
.oc-109.oc-109.oc-109:not(#_) { display: flex; align-items: baseline; gap: 9px; }
.oc-110.oc-110.oc-110:not(#_) { font-family: var(--font-serif); font-size: 23px; line-height: 1.15; font-weight: var(--peso-titulo); }
.oc-111.oc-111.oc-111:not(#_) { font-size: 12px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oc-112.oc-112.oc-112:not(#_) { margin-left: auto; flex: none; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 17px; line-height: 1; text-decoration: none; }
.oc-113.oc-113.oc-113:not(#_) { display: inline-block; margin-bottom: 4px; }
.oc-114.oc-114.oc-114:not(#_) { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; }
.oc-115.oc-115.oc-115:not(#_) { flex: none; padding: 16px 18px; border-bottom: 1px solid var(--hair); }
.oc-116.oc-116.oc-116:not(#_) { font-family: var(--font-serif); font-size: 22px; line-height: 1.15; font-weight: var(--peso-titulo); }
.oc-117.oc-117.oc-117:not(#_) { font-size: 12px; color: var(--muted); margin-top: 2px; }
.oc-500.oc-500.oc-500:not(#_) { flex: none; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; }
.oc-501.oc-501.oc-501:not(#_) { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.oc-502.oc-502.oc-502:not(#_) { font-size: 13px; font-weight: 600; }
.oc-503.oc-503.oc-503:not(#_) { width: 10px; height: 10px; flex: none; border-radius: 50%; }
/* ── extraído de templates (pt) — seletor com :not(#_): pesa como o style="" que ocupava o lugar (só id ou !important vencem) ── */
.pt-1.pt-1.pt-1:not(#_) { flex-wrap: wrap; }
.pt-2.pt-2.pt-2:not(#_) { display: contents; }
.pt-3.pt-3.pt-3:not(#_) { padding: 0 20px 12px; }
.pt-4.pt-4.pt-4:not(#_) { width: 70px; }
.pt-5.pt-5.pt-5:not(#_) { width: 55px; }
.pt-6.pt-6.pt-6:not(#_) { padding: 14px 20px 4px; display: flex; justify-content: flex-end; }
.pt-7.pt-7.pt-7:not(#_) { margin: 1.6rem 0 0; padding: 0 20px; }
.pt-8.pt-8.pt-8:not(#_) { padding: 1rem; }
.pt-9.pt-9.pt-9:not(#_) { max-width: 520px; padding: 0 20px 20px; }
.pt-10.pt-10.pt-10:not(#_) { font-size: 0.95rem; }
.pt-11.pt-11.pt-11:not(#_) { max-width: 140px; }
.pt-12.pt-12.pt-12:not(#_) { display: flex; gap: 8px; margin-top: 0.75rem; }
.pt-13.pt-13.pt-13:not(#_) { margin: 0; padding: 0 20px 8px; }
.pt-14.pt-14.pt-14:not(#_) { margin: 0 20px 20px; }
.pt-15.pt-15.pt-15:not(#_) { display: none; }
.pt-16.pt-16.pt-16:not(#_) { padding: 0 20px 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.pt-17.pt-17.pt-17:not(#_) { color: var(--ink); }
.pt-18.pt-18.pt-18:not(#_) { width: 80px; }
.pt-19.pt-19.pt-19:not(#_) { padding: 0 20px; font-size: 13px; color: var(--text-muted); }
.pt-20.pt-20.pt-20:not(#_) { padding: 10px 20px 0; }
.pt-21.pt-21.pt-21:not(#_) { font-size: 11.5px; color: var(--muted); display: block; margin-bottom: 4px; }
.pt-22.pt-22.pt-22:not(#_) { width: 100%; font: inherit; font-size: 13px; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; resize: vertical; }
.pt-23.pt-23.pt-23:not(#_) { padding: 0 20px 10px; }
.pt-24.pt-24.pt-24:not(#_) { border: none; background: transparent; font: inherit; padding: 0; width: 100%; }
.pt-25.pt-25.pt-25:not(#_) { border: none; background: transparent; font: inherit; padding: 0; width: 100%; font-size: 0.8rem; color: var(--text-muted); }
.pt-26.pt-26.pt-26:not(#_) { display: flex; align-items: center; gap: 4px; font-size: 0.8rem; white-space: nowrap; }
.pt-27.pt-27.pt-27:not(#_) { width: 56px; }
.pt-28.pt-28.pt-28:not(#_) { margin: 0 20px 16px; }
.pt-29.pt-29.pt-29:not(#_) { grid-template-columns: minmax(120px,1.5fr) 110px 110px 100px; display: grid; align-items: center; gap: 10px; padding: 10px 14px; }
.pt-30.pt-30.pt-30:not(#_) { padding: 0 20px 16px; }
.pt-31.pt-31.pt-31:not(#_) { padding: 14px 20px; font-size: 11.5px; color: var(--muted); border-top: 1px solid var(--hair); }
/* ── extraído de templates (ad) — seletor com :not(#_): pesa como o style="" que ocupava o lugar (só id ou !important vencem) ── */
.ad-1.ad-1.ad-1:not(#_) { margin-top: 1.25rem; }
.ad-2.ad-2.ad-2:not(#_) { flex: 1; }
.ad-3.ad-3.ad-3:not(#_) { margin: 0.15rem 0 0; }
.ad-4.ad-4.ad-4:not(#_) { text-align: right; }
.ad-5.ad-5.ad-5:not(#_) { margin-top: 1rem; }
.ad-6.ad-6.ad-6:not(#_) { margin-bottom: 12px; }
.ad-7.ad-7.ad-7:not(#_) { width: 100%; }
.ad-8.ad-8.ad-8:not(#_) { margin-top: 16px; }
.ad-9.ad-9.ad-9:not(#_) { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 1rem; }
.ad-10.ad-10.ad-10:not(#_) { display: flex; align-items: center; gap: 8px; }
.ad-11.ad-11.ad-11:not(#_) { margin: 0; }
.ad-12.ad-12.ad-12:not(#_) { width: 70px; }
.ad-13.ad-13.ad-13:not(#_) { min-width: 0; }
.ad-14.ad-14.ad-14:not(#_) { font-size: 14.5px; line-height: 1.35; }
.ad-15.ad-15.ad-15:not(#_) { white-space: normal; }
.ad-16.ad-16.ad-16:not(#_) { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ad-17.ad-17.ad-17:not(#_) { display: flex; align-items: center; gap: 6px; }
.ad-18.ad-18.ad-18:not(#_) { width: 60px; height: 32px; }
.ad-19.ad-19.ad-19:not(#_) { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.ad-20.ad-20.ad-20:not(#_) { --cols: minmax(160px,1fr) 150px 90px 130px 130px 120px; }
.ad-21.ad-21.ad-21:not(#_) { width: 70px; height: 30px; }
.ad-22.ad-22.ad-22:not(#_) { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.ad-23.ad-23.ad-23:not(#_) { height: 38px; padding: 0 12px; min-width: 220px; }
.ad-24.ad-24.ad-24:not(#_) { max-width: 110px; }
.ad-25.ad-25.ad-25:not(#_) { flex-wrap: wrap; }
.ad-26.ad-26.ad-26:not(#_) { margin-bottom: 16px; }
.ad-27.ad-27.ad-27:not(#_) { --cols: minmax(0,1fr) auto; }
.ad-28.ad-28.ad-28:not(#_) { display: flex; flex-direction: column; gap: 14px; }
.ad-29.ad-29.ad-29:not(#_) { display: flex; justify-content: space-between; font-size: 12.5px; margin-bottom: 8px; }
.ad-30.ad-30.ad-30:not(#_) { display: flex; justify-content: space-between; font-size: 15px; padding-top: 9px; border-top: 1px solid var(--hair); }
.ad-31.ad-31.ad-31:not(#_) { margin: 16px 0 10px; }
.ad-32.ad-32.ad-32:not(#_) { display: flex; align-items: center; gap: 9px; font-size: 12.5px; margin-bottom: 9px; }
.ad-33.ad-33.ad-33:not(#_) { min-width: 0; flex: 1; }
.ad-34.ad-34.ad-34:not(#_) { width: 64px; flex: none; height: 7px; }
.ad-35.ad-35.ad-35:not(#_) { width: 66px; text-align: right; }
.ad-36.ad-36.ad-36:not(#_) { margin-top: 12px; }
.ad-37.ad-37.ad-37:not(#_) { margin-left: auto; }
.ad-38.ad-38.ad-38:not(#_) { display: flex; justify-content: space-between; font-size: 12.5px; }
.ad-39.ad-39.ad-39:not(#_) { opacity: .35; cursor: default; }
.ad-40.ad-40.ad-40:not(#_) { align-items: flex-end; }
.ad-41.ad-41.ad-41:not(#_) { max-width: 480px; }
.ad-42.ad-42.ad-42:not(#_) { display: flex; gap: 10px; }
.ad-43.ad-43.ad-43:not(#_) { gap: 6px; }
.ad-44.ad-44.ad-44:not(#_) { background: var(--green-soft); color: var(--green-ink); }
.ad-45.ad-45.ad-45:not(#_) { display: flex; gap: 6px; flex-wrap: wrap; }
.ad-46.ad-46.ad-46:not(#_) { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.ad-47.ad-47.ad-47:not(#_) { min-width: 160px; }
.ad-48.ad-48.ad-48:not(#_) { min-width: 220px; }
.ad-49.ad-49.ad-49:not(#_) { display: flex; gap: 6px; align-items: center; }
.ad-50.ad-50.ad-50:not(#_) { width: 6.5rem; }
.ad-51.ad-51.ad-51:not(#_) { width: 5.5rem; }
.ad-52.ad-52.ad-52:not(#_) { width: 10rem; }
.ad-53.ad-53.ad-53:not(#_) { min-width: 180px; }
.ad-54.ad-54.ad-54:not(#_) { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.ad-55.ad-55.ad-55:not(#_) { margin-bottom: 14px; }
.ad-56.ad-56.ad-56:not(#_) { display: flex; align-items: center; gap: 7px; }
.ad-57.ad-57.ad-57:not(#_) { --cols: minmax(0,1fr) 120px 40px; }
.ad-58.ad-58.ad-58:not(#_) { margin-bottom: 6px; }
.ad-59.ad-59.ad-59:not(#_) { margin-top: 6px; }
.ad-60.ad-60.ad-60:not(#_) { margin-top: 8px; }
.ad-61.ad-61.ad-61:not(#_) { margin: 0 0 1.25rem; }
.ad-62.ad-62.ad-62:not(#_) { color: #3163AD; }
.ad-63.ad-63.ad-63:not(#_) { font-size: 17px; }
.ad-64.ad-64.ad-64:not(#_) { align-self: flex-start; }
.ad-65.ad-65.ad-65:not(#_) { margin-top: 14px; }
.ad-66.ad-66.ad-66:not(#_) { margin: -0.5rem 0 1.25rem; }
.ad-67.ad-67.ad-67:not(#_) { width: 0%; }
.ad-68.ad-68.ad-68:not(#_) { margin-top: 2px; }
.ad-69.ad-69.ad-69:not(#_) { color: var(--red); }
.ad-70.ad-70.ad-70:not(#_) { margin-top: 22px; }
.ad-71.ad-71.ad-71:not(#_) { margin-top: 0; }
.ad-72.ad-72.ad-72:not(#_) { --cols: 76px minmax(0,1fr) 92px; }
.ad-73.ad-73.ad-73:not(#_) { --cols: minmax(0,1fr) auto 84px; }
.ad-74.ad-74.ad-74:not(#_) { --cols: minmax(0,1.3fr) 86px 64px 92px 92px 96px minmax(0,1.6fr); }
.ad-75.ad-75.ad-75:not(#_) { margin: 10px 0 0; }
.ad-76.ad-76.ad-76:not(#_) { --cols: 86px minmax(0,1fr) 84px; }
.ad-77.ad-77.ad-77:not(#_) { --cols: 48px minmax(0,1fr) auto; }
.ad-78.ad-78.ad-78:not(#_) { --cols: 128px minmax(0,1fr) 72px; }
.ad-79.ad-79.ad-79:not(#_) { --cols: minmax(0,1fr); }
.ad-80.ad-80.ad-80:not(#_) { margin: 4px 0; }
.ad-81.ad-81.ad-81:not(#_) { max-width: 520px; }
.ad-82.ad-82.ad-82:not(#_) { display: flex; flex-direction: column; gap: 12px; }
.ad-83.ad-83.ad-83:not(#_) { display: inline; }
.ad-84.ad-84.ad-84:not(#_) { overflow-x: auto; }
.ad-85.ad-85.ad-85:not(#_) { margin: 0; font-size: 13px; }
.ad-86.ad-86.ad-86:not(#_) { text-align: right; font-weight: 600; }
.ad-87.ad-87.ad-87:not(#_) { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin-top: 14px; }
.ad-88.ad-88.ad-88:not(#_) { color: inherit; }
.ad-89.ad-89.ad-89:not(#_) { color: inherit; opacity: .7; }
.ad-90.ad-90.ad-90:not(#_) { color: var(--gold); }
.ad-91.ad-91.ad-91:not(#_) { --cols: minmax(0,1fr) auto auto; }
.ad-92.ad-92.ad-92:not(#_) { opacity: .4; }
.ad-93.ad-93.ad-93:not(#_) { background: none; border-top: 1.5px dashed var(--gold); border-radius: 0; height: 0; width: 12px; vertical-align: 3px; }
.ad-94.ad-94.ad-94:not(#_) { --cols: minmax(90px,1.2fr) minmax(0,2fr) 58px; }
.ad-95.ad-95.ad-95:not(#_) { margin: 8px 0 0; }
.ad-96.ad-96.ad-96:not(#_) { font-size: 13px; text-transform: none; letter-spacing: 0; color: inherit; }
.ad-97.ad-97.ad-97:not(#_) { --cols: minmax(0,1fr) auto auto; margin-top: 12px; }
.ad-98.ad-98.ad-98:not(#_) { --cols: minmax(0,1.2fr) repeat(5, minmax(0,1fr)); }
/* ── extraído de templates (cl) — seletor com :not(#_): pesa como o style="" que ocupava o lugar (só id ou !important vencem) ── */
.cl-1.cl-1.cl-1:not(#_) { margin-bottom: 16px; }
.cl-2.cl-2.cl-2:not(#_) { color: rgba(247,243,234,.55); }
.cl-3.cl-3.cl-3:not(#_) { display: flex; align-items: baseline; gap: 8px; margin: 4px 0 12px; }
.cl-4.cl-4.cl-4:not(#_) { font-family: var(--font-serif); font-size: 34px; color: var(--gold); font-weight: var(--peso-titulo); }
.cl-5.cl-5.cl-5:not(#_) { color: rgba(247,243,234,.6); }
.cl-6.cl-6.cl-6:not(#_) { background: rgba(247,243,234,.16); }
.cl-7.cl-7.cl-7:not(#_) { display: flex; justify-content: space-between; margin-top: 8px; font-size: 11.5px; color: rgba(247,243,234,.62); }
.cl-8.cl-8.cl-8:not(#_) { margin-left: auto; }
.cl-9.cl-9.cl-9:not(#_) { --cols: minmax(0,1fr) auto; }
.cl-10.cl-10.cl-10:not(#_) { text-align: right; }
.cl-11.cl-11.cl-11:not(#_) { max-width: 520px; }
.cl-12.cl-12.cl-12:not(#_) { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.cl-13.cl-13.cl-13:not(#_) { display: flex; gap: 8px; flex-wrap: wrap; }
.cl-14.cl-14.cl-14:not(#_) { margin: 0; }
.cl-15.cl-15.cl-15:not(#_) { align-self: flex-start; }
.cl-16.cl-16.cl-16:not(#_) { font-family: var(--font-mono, inherit); font-variant-numeric: tabular-nums; font-size: 12.5px; }
.cl-17.cl-17.cl-17:not(#_) { margin-top: 8px; }
.cl-18.cl-18.cl-18:not(#_) { margin-top: 14px; display: inline-block; }
.cl-19.cl-19.cl-19:not(#_) { --cols: minmax(0,1fr) 80px 130px 120px; }
.cl-20.cl-20.cl-20:not(#_) { margin-top: 1.5rem; }
/* ── extraído de templates (vd) — seletor com :not(#_): pesa como o style="" que ocupava o lugar (só id ou !important vencem) ── */
.vd-1.vd-1.vd-1:not(#_) { height: 110px; }
.vd-2.vd-2.vd-2:not(#_) { margin: 4px 0 10px; }
.vd-3.vd-3.vd-3:not(#_) { margin-top: 7px; }
.vd-4.vd-4.vd-4:not(#_) { margin-top: 12px; }
.vd-5.vd-5.vd-5:not(#_) { margin-bottom: 16px; }
.vd-6.vd-6.vd-6:not(#_) { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.vd-7.vd-7.vd-7:not(#_) { margin-left: auto; display: flex; gap: 8px; }
.vd-8.vd-8.vd-8:not(#_) { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; }
.vd-9.vd-9.vd-9:not(#_) { display: flex; justify-content: space-between; font-size: 12.5px; margin-bottom: 9px; }
.vd-10.vd-10.vd-10:not(#_) { margin-top: 8px; }
.vd-11.vd-11.vd-11:not(#_) { text-align: right; }
.vd-12.vd-12.vd-12:not(#_) { height: 30px; padding: 0 11px; font-size: 12px; }
/* ── extraído de templates (pa) — seletor com :not(#_): pesa como o style="" que ocupava o lugar (só id ou !important vencem) ── */
.pa-1.pa-1.pa-1:not(#_) { text-decoration: none; color: inherit; display: block; }
.pnd-linha { display: grid; grid-template-columns: minmax(150px, 1.7fr) 110px minmax(110px, 1fr) minmax(110px, 1fr) 100px; gap: 10px; align-items: center; padding: 10px 14px; text-decoration: none; color: inherit; border-top: 1px solid var(--hair); }
.pnd-meta { display: contents; }
.pnd-meta span { font-size: 12.5px; color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pnd-valor { text-align: right; }
.pnd-desc { display: block; font-family: var(--font-sans); font-size: 10.5px; color: var(--gold-ink); white-space: nowrap; }
.pnd-item:hover { background: var(--sunken); }
.pnd-cab { background: var(--sunken); border-top: none; padding-top: 8px; padding-bottom: 8px; }
.pnd-ord { border: 0; background: none; padding: 0; font: inherit; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); cursor: pointer; text-align: left; }
.pnd-ord-valor { text-align: right; }
.pnd-ord[aria-sort="ascending"]::after { content: " ▲"; }
.pnd-ord[aria-sort="descending"]::after { content: " ▼"; }
.pnd-ord[aria-sort] { color: var(--ink); }
@media (max-width: 700px) {
  .pnd-cab { display: flex; flex-wrap: wrap; gap: 4px 14px; }
  .pnd-linha:not(.pnd-cab) { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; }
  .pnd-meta { display: flex; gap: 4px 10px; flex-wrap: wrap; grid-column: 1; grid-row: 2; }
  .pnd-meta span { overflow: visible; white-space: normal; }
  .pnd-valor { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}
.pa-2.pa-2.pa-2:not(#_) { margin-bottom: 16px; }
.pa-3.pa-3.pa-3:not(#_) { padding: 11px 14px; background: var(--sunken); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pa-4.pa-4.pa-4:not(#_) { grid-template-columns: minmax(120px,1.8fr) 100px 100px; display: grid; align-items: center; gap: 10px; padding: 10px 14px; text-decoration: none; color: inherit; }
.pa-5.pa-5.pa-5:not(#_) { text-align: right; }
.pa-6.pa-6.pa-6:not(#_) { color: var(--gold-ink); font-weight: 500; }
.pa-7.pa-7.pa-7:not(#_) { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 4px; }
.pa-8.pa-8.pa-8:not(#_) { display: flex; align-items: center; justify-content: center; text-decoration: none; }
.pa-9.pa-9.pa-9:not(#_) { align-self: flex-start; }
.pa-10.pa-10.pa-10:not(#_) { display: inline; }
.pa-11.pa-11.pa-11:not(#_) { left: auto; right: 0; flex-direction: column; align-items: stretch; }
.pa-12.pa-12.pa-12:not(#_) { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.pa-13.pa-13.pa-13:not(#_) { display: flex; flex-wrap: wrap; gap: 6px; }
.pa-14.pa-14.pa-14:not(#_) { font-size: 11.5px; }
.pa-15.pa-15.pa-15:not(#_) { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.pa-16.pa-16.pa-16:not(#_) { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
/* ── extraído de templates (et) — seletor com :not(#_): pesa como o style="" que ocupava o lugar (só id ou !important vencem) ── */
/* ── extraído de templates (ge) — seletor com :not(#_): pesa como o style="" que ocupava o lugar (só id ou !important vencem) ── */
.ge-1.ge-1.ge-1:not(#_) { margin-bottom: 16px; }
.ge-2.ge-2.ge-2:not(#_) { margin-top: 20px; }
.ge-3.ge-3.ge-3:not(#_) { margin-bottom: 14px; }
.ge-4.ge-4.ge-4:not(#_) { margin-bottom: 10px; }
.ge-5.ge-5.ge-5:not(#_) { width: 100%; max-width: 360px; }
.ge-6.ge-6.ge-6:not(#_) { margin-top: 18px; }
.ge-7.ge-7.ge-7:not(#_) { margin-top: 16px; }
.ge-8.ge-8.ge-8:not(#_) { padding: 11px 14px; background: var(--sunken); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ge-9.ge-9.ge-9:not(#_) { grid-template-columns: minmax(120px,1.5fr) 60px 100px 100px; display: grid; align-items: center; gap: 10px; padding: 10px 14px; }
.ge-10.ge-10.ge-10:not(#_) { text-align: right; }
.ge-11.ge-11.ge-11:not(#_) { padding: 12px 14px; display: flex; justify-content: space-between; background: var(--sunken); }
.ge-12.ge-12.ge-12:not(#_) { margin-top: 6px; white-space: pre-wrap; }
.ge-13.ge-13.ge-13:not(#_) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
/* itens do pedido salvo: no celular a coluna do preço unitário sai e o resto cabe na tela (antes a tabela inteira sumia no celular) */
.pl-itens { overflow: hidden; }
.pl-item { display: flex; align-items: center; gap: 10px; min-width: 0; white-space: normal; }
.pl-item > span:last-child { overflow: visible; text-overflow: clip; white-space: normal; line-height: 1.3; }
.pl-foto { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; flex: none; background: var(--sunken); border: 1px solid var(--hair); }
.pl-sem-foto { display: grid; place-items: center; font-size: 10.5px; font-weight: 700; color: var(--muted); }
.pl-trava { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--sunken); color: var(--muted); font-size: 13.5px; margin: 10px 0; }
.pl-trava svg { flex: none; }
.pl-abertas { display: flex; flex-direction: column; gap: 4px; }
.pl-aberta { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 5px 0; border-top: 1px solid var(--hair); }
.pl-vencida, .pl-vencido { color: var(--red); }
.pl-info { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; }
.pl-info span { color: var(--muted); }
.enc-app { margin-bottom: 14px; }
.enc-app .cartao-cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.enc-app-lista { display: flex; flex-direction: column; gap: 0; padding: 0; }
.enc-app-item { display: flex; flex-direction: column; gap: 6px; padding: 12px 16px; border-top: 1px solid var(--hair); }
.enc-app-item:first-child { border-top: 0; }
.enc-app-topo { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: inherit; text-decoration: none; }
.enc-app-chips { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.enc-app-botoes { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 640px) {
  .pl-itens .ge-9.ge-9.ge-9:not(#_) { grid-template-columns: minmax(0, 1fr) auto auto; padding: 10px 12px; }
  .pl-itens .ge-9.ge-9.ge-9:not(#_) > :nth-child(3) { display: none; }
}

/* ── Reposição: sugestão pelo histórico de vendas do vendedor (admin/reposicao_repor.html) ── */
.etiqueta-info { background: #E7EAF6; color: #3E4C86; }
.rs-controles { display: flex; flex-direction: column; gap: 16px; margin-bottom: 14px; padding: 16px; }
.rs-bloco { display: flex; flex-direction: column; gap: 8px; }
.rs-bloco .apoio { margin: 0; }
.rs-datas, .rs-depositos { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.rs-datas[hidden] { display: none; }
.rs-campo { display: flex; flex-direction: column; gap: 4px; flex: 1 1 150px; min-width: 0; }
.rs-campo label { font-size: 11.5px; color: var(--muted); }
.rs-campo select, .rs-campo input { height: var(--h-control-mobile); min-width: 0; width: 100%; }
.rs-cobertura { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rs-passo { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); overflow: hidden; flex: none; }
.rs-passo button { width: 36px; height: 36px; border: 0; background: var(--sunken); color: var(--ink); font-family: var(--font-sans); font-size: 18px; font-weight: 600; cursor: pointer; }
.rs-passo output { min-width: 38px; text-align: center; font-family: var(--font-mono); font-size: 15px; font-weight: 600; }
.rs-resumo { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 4px 0 10px; }
.rs-add { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; }
.rs-add .busca-wrap { position: relative; display: block; flex: none; height: auto; max-width: 420px; padding: 0; border: none; background: none; }
.rs-add input[type=search] { width: 100%; box-sizing: border-box; height: 38px; padding: 0 13px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; }
.rs-sug { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 12px; }
.rs-sug[disabled] { opacity: .55; cursor: default; }
.rs-tirar { border: 0; background: none; color: var(--muted); font: inherit; font-size: 12px; text-decoration: underline; cursor: pointer; padding: 0; }
/* lista da reposição compacta (20/10/2026): foto · nome e números numa linha · balão do sugerido e o +/− do lado */
.rs-lista { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rs-item { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.rs-foto { width: 44px; height: 44px; border-radius: 9px; object-fit: cover; background: var(--sunken); border: 1px solid var(--hair); }
.rs-foto-letra { display: grid; place-items: center; font-weight: 800; color: var(--gold-ink); background: var(--gold-soft); }
.rs-info { min-width: 0; display: grid; gap: 3px; }
.rs-nome { font-weight: 700; font-size: 13.5px; line-height: 1.25; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rs-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; font-size: 11.5px; color: var(--muted); }
.rs-meta .etiqueta { font-size: 10px; padding: 1px 7px; }
.rs-lado { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.rs-sug-balao { border: 0; border-radius: var(--r-pill); padding: 3px 10px; font: 800 11.5px var(--font-sans); cursor: pointer; white-space: nowrap; }
.rs-sug-falta { background: var(--bal-at-bg); color: var(--bal-at-tx); }
.rs-sug-ok { background: var(--bal-ok-bg); color: var(--bal-ok-tx); }
.rs-sug-balao:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.rs-caminho { color: var(--gold-ink); font-weight: 500; }
.rs-gerar { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.rs-gerar .btn { height: 48px; font-size: 15px; width: 100%; }
.rs-gerar .btn:disabled { opacity: .5; cursor: default; }
.rs-gerar .apoio { text-align: center; }
.rs-legenda { line-height: 1.5; }
@media (min-width: 901px) {
  .rs-controles, .rs-lista, .rs-gerar, .rs-resumo, .rs-legenda { max-width: 760px; }
  .rs-gerar .btn { width: auto; align-self: flex-start; padding: 0 28px; }
  .rs-gerar .apoio { text-align: left; }
}
.rs-segmentos { flex-wrap: wrap; overflow-x: visible; }
.mv-fila-rodape { margin: 0; padding: 10px 14px; border-top: 1px solid var(--hair); line-height: 1.5; }

/* selo C (contas lançadas) e "Recebido" na lista de pedidos — partials/_selos_pedido.html */
.celula-status { display: flex; align-items: center; gap: 8px; }
.selos-ped { display: inline-flex; gap: 4px; vertical-align: middle; }
.selo-ped { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; font-family: var(--font-mono);
  font-size: 10px; font-weight: 600; line-height: 1; cursor: help; }
.selo-ped-sim { background: var(--green-soft); color: var(--green-ink); }
.selo-ped-recebido { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: 5px; background: var(--green-soft);
  color: var(--green-ink); font-size: 11px; font-weight: 600; line-height: 1; cursor: help; }

/* Caixa: entradas de clientes lidas do Tiny (templates/admin/caixa.html) */
.ct-bloco { margin-bottom: 18px; }
.t-caixa-tiny { --cols: 56px minmax(140px,1.6fr) 110px 90px 130px; }
@media (max-width: 900px) { .t-caixa-tiny { --cols: 40px minmax(0,1fr) 112px; } .t-caixa-tiny .col-secundaria { display: none; } .t-caixa-tiny .ad-4 { white-space: nowrap; text-align: right; } }

/* checkout do vendedor/admin: painel "Parcelas em aberto" do cliente (static/js/checkout-parcelas-abertas.js) */
.car-estoque-escolha { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px 12px; align-items: end; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 12px 14px; margin: 0 0 14px; }
.car-estoque-escolha select { width: 100%; }
.car-estoque-dica { grid-column: 1 / -1; margin: 0; }
.cat-estoque-pedido { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--gold-soft); border: 1px solid var(--line); border-radius: var(--r-md); padding: 8px 12px; margin: 0 0 12px; font-size: 13px; }
.cat-estoque-pedido a { font-weight: 500; }
.mult-linhas { display: flex; flex-direction: column; gap: 8px; }
.mult-linha { display: grid; grid-template-columns: minmax(130px, 1.4fr) minmax(100px, 1fr) minmax(90px, .7fr) auto; gap: 8px; align-items: center; }
.mult-linha select, .mult-linha input { width: 100%; box-sizing: border-box; height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; }
.mult-linha input[hidden] { display: none; }
.mult-tirar { border: 0; background: none; color: var(--muted); font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; padding: 0 4px; }
.mult-aviso { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--gold-ink); background: var(--gold-soft); border-radius: var(--r-sm); padding: 6px 10px; }
.parcelas-coincidencia { gap: 6px; }
.parcelas-coincide-linha { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 13px; padding: 8px 12px; }
.mult-rodape { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.mult-soma { margin: 0; font-size: 13px; }
.mult-soma.ok { color: var(--green-ink); }
.mult-soma.falta { color: var(--red); }
@media (max-width: 600px) { .mult-linha { grid-template-columns: 1fr 1fr; } .mult-linha .mult-forma { grid-column: 1 / -1; } .mult-linha .mult-tirar { justify-self: end; } }
.ck-clube { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.ck-clube-cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ck-clube-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.ck-clube-bloco { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.ck-score { color: var(--cor, inherit); font-size: 22px; line-height: 1.1; }
.ck-clube-trilho { width: 100%; height: 6px; border-radius: 3px; background: var(--hair); overflow: hidden; }
.ck-clube-barra { height: 100%; background: var(--gold); }
.ck-clube-premios summary { cursor: pointer; font-weight: 500; }
.ck-clube-premio { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 6px 0; border-top: 1px solid var(--hair); font-size: 13px; }
.ck-clube-premio.no-pedido .ck-clube-premio-nome { font-weight: 600; }
.ck-parcelas { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.ck-parcelas-cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: space-between; }
.ck-parcelas-linha { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; font-size: 13px; padding: 6px 0; border-top: 1px solid var(--hair); }
.ck-parcelas-linha .num { text-align: right; white-space: nowrap; }
@media (max-width: 600px) { .ck-parcelas-linha { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; } .ck-parcelas-linha > :nth-child(-n+3) { grid-column: 1; } .ck-parcelas-linha > :nth-child(4) { grid-column: 2; grid-row: 1 / span 3; align-self: center; } }

/* Balão "Faturar" da ficha do pedido (static/js/faturar-pedido.js) */
body.fat-aberto { overflow: hidden; }
.fat-fundo { position: fixed; inset: 0; z-index: 1000; background: rgba(10,17,48,.55); display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; padding: 24px 12px; }
.fat-caixa { width: 100%; max-width: 760px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: 0 24px 60px -30px rgba(10,17,48,.6); overflow: hidden; }
.fat-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.fat-cab h2 { margin: 0; font-family: var(--font-serif); font-weight: var(--peso-titulo); font-size: 22px; }
.fat-total { text-align: right; display: flex; flex-direction: column; }
.fat-total b { font-family: var(--font-mono); font-size: 22px; font-variant-numeric: tabular-nums; }
.fat-corpo { display: flex; flex-direction: column; gap: 16px; padding: 18px 20px; }
.fat-rotulo { font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.fat-rolagem { overflow-x: auto; }
.fat-tabela { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.fat-tabela th { text-align: left; font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 6px 8px; border-bottom: 1px solid var(--line); }
.fat-tabela td { padding: 8px; border-bottom: 1px solid var(--hair); }
.fat-tabela .v { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fat-tabela tfoot td { border-bottom: 0; padding-top: 12px; font-weight: 600; }
.fat-chip { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: var(--r-pill); font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; white-space: nowrap; }
.fat-ok { background: var(--green-soft); color: var(--green-ink); } .fat-warn { background: var(--gold-soft); color: var(--gold-ink); } .fat-mut { background: var(--sunken); color: var(--muted); border: 1px solid var(--line); }
.fat-ruim { background: var(--red-soft); color: var(--red); }
.fat-ficha { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }
.fat-ficha-cab { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.fat-ficha-quem { display: flex; flex-direction: column; min-width: 0; }
.fat-ficha-quem b { overflow-wrap: anywhere; }
.fat-selo { min-width: 66px; text-align: center; padding: 6px 10px; border-radius: 10px; font-weight: 700; font-size: 14px; background: var(--sunken); color: var(--muted); }
.fat-selo small { display: block; font-weight: 500; font-size: 11px; opacity: .85; }
.fat-selo-otima { background: var(--green-soft); color: var(--green-ink); }
.fat-selo-boa { background: var(--gold-soft); color: var(--gold-ink); }
.fat-selo-atencao { background: var(--red-soft); color: var(--red); }
.fat-ficha-linha { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-top: 1px solid var(--hair); font-size: 13.5px; line-height: 1.45; }
.fat-ficha-rot { flex: 0 0 74px; color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding-top: 3px; }
.fat-ficha-val { flex: 1; min-width: 0; }
.fat-ficha-alertas { display: flex; flex-wrap: wrap; gap: 6px; }
.fat-ficha-alertas .fat-chip { height: auto; min-height: 22px; padding: 3px 9px; white-space: normal; line-height: 1.35; font-family: inherit; font-size: 12px; }
.fat-ficha-sug { padding: 10px 14px; background: var(--gold-soft); border-top: 1px solid var(--hair); font-size: 13.5px; }
.fat-ficha > .fat-opcao { padding: 12px 14px; border-top: 1px solid var(--hair); }
.fat-sugs { display: flex; flex-direction: column; gap: 8px; }
.fat-sug { border: 1px solid rgba(232,179,60,.55); background: var(--gold-soft); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; font-size: 13.5px; line-height: 1.5; }
.fat-sug.feita { background: var(--green-soft); border-color: rgba(31,168,85,.3); }
.fat-sug p { margin: 0; }
.fat-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.fat-abertas { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }
.fat-aberta { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; background: var(--sunken); }
.fat-aberta.venc { border-color: rgba(156,74,60,.4); background: var(--red-soft); }
.fat-aberta.colide { outline: 2px solid var(--gold); }
.fat-opcoes { display: flex; flex-direction: column; }
.fat-opcao { display: flex; gap: 12px; align-items: flex-start; padding: 10px 4px; border-top: 1px solid var(--hair); cursor: pointer; }
.fat-opcao input { width: 20px; height: 20px; margin-top: 1px; flex: none; }
.fat-rodape { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 20px; border-top: 1px solid var(--line); background: var(--sunken); }
.fat-passos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.fat-passo { display: flex; gap: 12px; align-items: flex-start; padding: 10px 4px; border-top: 1px solid var(--hair); }
.fat-bola { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--green-soft); color: var(--green-ink); font-family: var(--font-mono); font-size: 12px; font-weight: 600; flex: none; }
.fat-bola.erro { background: var(--red-soft); color: var(--red); }
.fat-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
@media (max-width: 560px) { .fat-tabela { font-size: 12.5px; } .fat-tabela th, .fat-tabela td { padding: 6px 4px; } .fat-itens:not(.fat-itens-ed) th:nth-child(3), .fat-itens:not(.fat-itens-ed) td:nth-child(3) { display: none; } .fat-fundo { padding: 0; } .fat-caixa { border-radius: 0; min-height: 100%; } .fat-total { text-align: left; } .fat-corpo { padding: 16px; } .fat-rodape { padding: 12px 16px; } .fat-rodape .btn { flex: 1; } }

/* legenda dos selos dos pedidos */
.selos-legenda { margin: -6px 0 12px; font-size: 12px; }

/* quadro "Como enviar esta mensagem?" dos botões de WhatsApp do admin (static/js/whatsapp-botao.js) */
/* aviso dos botões de WhatsApp só de ícone (whatsapp-botao.js): "Enviando...", "Mensagem enviada ✓" */
.wa-toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--barra-h, 66px) + 18px); z-index: 1200; background: var(--ink); color: var(--cream);
  border-radius: var(--r-pill); padding: 10px 18px; font-weight: 600; font-size: 13.5px; box-shadow: var(--shadow); max-width: calc(100vw - 32px); text-align: center; }
.wa-toast[hidden] { display: none; }
.wa-escolha-fundo { position: fixed; inset: 0; z-index: 1100; background: rgba(10,17,48,.55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.wa-escolha { width: 100%; max-width: 360px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 24px 60px -30px rgba(10,17,48,.6); }
.wa-escolha b { font-family: var(--font-serif); font-weight: var(--peso-titulo); font-size: 20px; }
.wa-escolha-opcao { height: auto; padding: 12px 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; }
.wa-escolha-rotulo { font-weight: 600; }
.wa-escolha-detalhe { font-size: 12px; opacity: .75; font-weight: 400; }
.fat-canal { padding: 6px 4px 10px 32px; font-size: 13px; }
.fat-canal[hidden] { display: none; }

/* botão Faturar na lista de Pedidos e selo do que aconteceu depois (templates/partials/_faturar_acao.html) */
.celula-faturar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ped-faturar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding-top: 10px; margin-top: 10px; border-top: 1px solid var(--hair); }
.ped-faturar .btn { flex: 1; min-height: 40px; }
.fat-feito { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 20px; background: var(--green-soft); color: var(--green-ink);
  border: 1px solid var(--green-ink); font-size: 12px; font-weight: 600; white-space: nowrap; }
.env-chip { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 20px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  white-space: nowrap; cursor: help; background: var(--sunken); color: var(--muted); border: 1px solid var(--line); }
.env-recebeu { background: var(--green-soft); color: var(--green-ink); border-color: transparent; }
.env-abriu { background: var(--ink); color: var(--cream); border-color: transparent; }
.env-falhou, .env-email-falhou { background: var(--red-soft); color: var(--red); border-color: transparent; }
.env-email-enviado { background: var(--gold-soft); color: var(--gold-ink); border-color: transparent; }
/* balão Faturar: data base e vencimentos editáveis */
.fat-base { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.fat-base input, .fat-data { height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink);
  font-family: var(--font-mono); font-size: 13px; max-width: 100%; }
.fat-data { height: 34px; padding: 0 8px; font-size: 12.5px; }
.fat-base input:focus-visible, .fat-data:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (max-width: 560px) { .fat-data { width: 138px; } .fat-forma { max-width: 130px; } }
.fat-caixa-estreita { max-width: 520px; }
.btn.btn-enviar-nota { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.btn.btn-enviar-nota:hover { border-color: var(--gold); }
/* prévia da mensagem ao cliente (balões Faturar e Enviar nota) */
.fat-prev { border: 1px solid var(--line); border-radius: 12px; background: var(--sunken); }
.fat-prev summary { cursor: pointer; padding: 12px 14px; font-weight: 500; }
.fat-prev-corpo { display: flex; flex-direction: column; gap: 8px; padding: 0 14px 14px; }
.fat-prev-bolha { background: var(--surface); border: 1px solid var(--line); border-radius: 4px 14px 14px 14px; padding: 10px 12px; font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.fat-obs-edicao { width: 100%; box-sizing: border-box; font: inherit; font-size: 13.5px; line-height: 1.5; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: inherit; resize: vertical; }
.fat-prev-campo { display: flex; flex-direction: column; gap: 4px; }
.fat-prev-edicao, .fat-prev-assunto { width: 100%; box-sizing: border-box; font: inherit; font-size: 13.5px; line-height: 1.5; padding: 10px 12px; border: 1px solid var(--line); border-radius: 4px 14px 14px 14px; background: var(--surface); color: inherit; }
.fat-prev-edicao { resize: vertical; min-height: 96px; }
.fat-prev-assunto { border-radius: 8px; padding: 6px 10px; }
.fat-prev-assunto-linha { display: flex; align-items: center; gap: 6px; }
.fat-prev-assunto-linha .fat-prev-assunto { flex: 1; min-width: 0; }
.fat-prev-email { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
/* balão Faturar: observações do pedido e forma de pagamento editável */
.fat-obs { border: 1px solid var(--gold); background: var(--gold-soft); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.fat-obs-rot { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-ink); margin-top: 4px; }
.fat-obs-txt { white-space: pre-wrap; word-break: break-word; line-height: 1.5; }
.fat-forma { height: 34px; padding: 0 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font-size: 13px; max-width: 220px; }
.fat-forma:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.fat-estado-parcela { margin-top: 6px; }
.fat-data:disabled { background: var(--sunken); color: var(--muted); }
@media (max-width: 560px) { .fat-parcelas th:first-child, .fat-parcelas td:first-child { display: none; } .fat-forma { max-width: 98px; font-size: 12px; padding: 0 4px; } .fat-data { width: 140px; font-size: 12px; padding: 0 2px; } }
/* balão Faturar: botão "Confirmar pagamento" na linha do Pix/cartão */
.fat-pago-cel { margin-top: 6px; }
.fat-pago-cel:empty { display: none; }
.fat-pago-btn.feito { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 20px; background: var(--green-soft); color: var(--green-ink);
  border: 1px solid var(--green-ink); font-size: 12.5px; font-weight: 600; cursor: pointer; }
/* tela Pagamentos a conferir (templates/admin/pagamentos_conferir.html) */
.pg-lista { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.pg-item { display: flex; align-items: center; justify-content: space-between; gap: 14px 20px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: 14px 16px; }
.pg-item.atrasado { border-color: var(--red); }
.pg-info { min-width: 0; flex: 1 1 260px; display: flex; flex-direction: column; gap: 4px; }
.pg-titulo { font-weight: 500; color: inherit; text-decoration: none; }
.pg-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.pg-acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pg-acoes form { display: flex; align-items: center; gap: 6px; margin: 0; }
.pg-agendar input[type="date"] { height: 32px; padding: 0 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font-family: var(--font-mono); font-size: 12.5px; }
@media (max-width: 560px) { .pg-acoes, .pg-acoes form { width: 100%; } .pg-acoes form .btn { flex: none; } .pg-acoes > form:first-child .btn { flex: 1; } .pg-agendar input { flex: 1; } }
.fat-pago-cel { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.fat-pago-agenda { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.fat-pago-x { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--muted); cursor: pointer; line-height: 1; padding: 0; }
.pg-chip-pago { background: var(--green-soft); color: var(--green-ink); border-color: transparent; }
.pg-chip-agendado { background: var(--gold-soft); color: var(--gold-ink); border-color: transparent; }
.pg-chip-conferir { background: var(--red-soft); color: var(--red); border-color: transparent; }
/* balão Faturar: itens editáveis, item novo, desconto no pedido e totais */
.fat-in { height: 34px; border: 1px solid var(--line); border-radius: 8px; padding: 0 8px; font-family: var(--font-mono); font-size: 13px; background: var(--surface); color: var(--ink); text-align: right; max-width: 100%; }
.fat-in:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.fat-in-q { width: 64px; } .fat-in-p { width: 104px; } .fat-in-d { width: 72px; }
.fat-in-busca { flex: 1; min-width: 180px; text-align: left; font-family: var(--font-sans); }
.fat-itens-ed td:first-child { min-width: 170px; }
.fat-mudou td { background: var(--gold-soft); }
.fat-totais { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; justify-content: end; margin-left: auto; width: min(100%, 360px); }
.fat-total-forte { font-size: 18px; font-weight: 600; }
.fat-novo { display: flex; flex-direction: column; gap: 6px; }
.fat-novo-linha { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.fat-sugestoes { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--surface); }
.fat-sugestao { all: unset; cursor: pointer; padding: 9px 12px; display: flex; justify-content: space-between; gap: 10px; border-top: 1px solid var(--hair); font-size: 13px; }
.fat-sugestao:first-child { border-top: 0; }
.fat-sugestao:hover, .fat-sugestao:focus-visible { background: var(--sunken); }
/* no celular, cada item vira um cartão: foto e nome em cima (com o Tirar), e embaixo Qtd · Preço · Desc. % · Subtotal, cada um com o seu rótulo */
@media (max-width: 560px) {
  .fat-itens-ed thead { display: none; }
  .fat-itens-ed, .fat-itens-ed tbody { display: block; }
  .fat-itens-ed tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 6px 8px; padding: 10px 0; border-bottom: 1px solid var(--hair); }
  .fat-itens-ed td { border: 0; padding: 0; min-width: 0; }
  .fat-itens-ed td.fat-col-prod { grid-column: 1 / 4; min-width: 0; }
  .fat-itens-ed td.fat-col-tirar { grid-column: 4; grid-row: 1; align-self: start; }
  .fat-itens-ed td.fat-col-sub { grid-column: 4; align-self: end; font-weight: 600; }
  .fat-itens-ed td[data-rot] { display: flex; flex-direction: column; align-items: stretch; gap: 2px; text-align: left; }
  .fat-itens-ed td[data-rot]::before { content: attr(data-rot); font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  .fat-itens-ed td.fat-col-sub::before { text-align: right; }
  .fat-itens-ed td.fat-col-sub { text-align: right; }
  .fat-itens-ed .fat-in { width: 100%; }
  .fat-itens-ed td:first-child { min-width: 0; }
  .fat-itens-ed tr.fat-mudou { background: var(--gold-soft); border-radius: 10px; padding: 10px 8px; }
  .fat-itens-ed tr.fat-mudou td { background: transparent; }
}
.fat-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; align-self: flex-start; }
.fat-seg-b { border: 0; background: var(--surface); color: var(--ink); height: 34px; padding: 0 14px; font: 500 13px var(--font-sans); cursor: pointer; }
.fat-seg-b + .fat-seg-b { border-left: 1px solid var(--line); }
.fat-seg-b[aria-pressed="true"] { background: var(--ink); color: var(--cream); }
.fat-seg-b:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.fat-valor-novo { background: var(--gold-soft); font-weight: 600; }
.pg-forma { height: 32px; padding: 0 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font-size: 12.5px; }
.fat-pago-rotulo { margin-right: 2px; }
.fat-pago-forma { max-width: 180px; }
/* balão Faturar em 4 partes (protótipo de 19/10/2026): seções numeradas, lista "Antes de faturar", itens com foto, chaves, entrega e rodapé fixo */
.fat-caixa { overflow: hidden; overflow: clip; }
.fat-sec { display: flex; flex-direction: column; gap: 10px; }
.fat-sec-tit { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.fat-sec-n { width: 20px; height: 20px; border-radius: 50%; background: var(--ink); color: var(--gold); display: grid; place-items: center; font-family: var(--font-serif); font-size: 11.5px; letter-spacing: 0; flex: none; }
.fat-sec-extra { text-transform: none; letter-spacing: 0; font-weight: 500; }
.fat-checklist { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.fat-ck { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border-top: 1px solid var(--hair); font-size: 13.5px; }
.fat-ck:first-child { border-top: 0; }
.fat-ck-ic { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-family: var(--font-serif); font-weight: 700; font-size: 14px; align-self: start; }
.fat-ck-atencao .fat-ck-ic { background: var(--gold-soft); color: var(--gold-ink); }
.fat-ck-erro .fat-ck-ic { background: var(--red-soft); color: var(--red); }
.fat-ck-erro { background: var(--red-soft); }
.fat-ck-ok .fat-ck-ic { background: var(--green-soft); color: var(--green-ink); }
.fat-ck-info .fat-ck-ic { background: var(--sunken); color: var(--muted); border: 1px solid var(--line); }
.fat-ck-tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fat-ck-tx b { overflow-wrap: anywhere; }
.fat-ck-tx small, .fat-ck-det small { color: var(--muted); font-size: 12.5px; line-height: 1.45; display: block; }
.fat-ck-det { display: flex; flex-direction: column; gap: 5px; }
.fat-ck-tx small.fat-ck-sug { color: var(--ink); background: var(--gold-soft); border-radius: 8px; padding: 6px 8px; }
.fat-ck .btn-mini { white-space: nowrap; }
.fat-trava { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; cursor: pointer; white-space: nowrap; }
.fat-trava input { width: 20px; height: 20px; accent-color: var(--green); }
.fat-resumo { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.fat-resumo > .fat-base { padding: 10px 12px; border-top: 1px solid var(--hair); }
.fat-itens-sum { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 10px 12px; font-size: 14px; }
.fat-itens-sum::-webkit-details-marker { display: none; }
.fat-itens-sum::after { content: "▾"; color: var(--muted); }
.fat-itens-det[open] > .fat-itens-sum::after { content: "▴"; }
.fat-itens-det[open] > .fat-itens-sum { border-bottom: 1px solid var(--hair); }
.fat-itens-sum-tx { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.fat-itens-sum-tx small { color: var(--muted); font-size: 12px; }
.fat-itens-sum-v { font-weight: 600; white-space: nowrap; }
.fat-itens-corpo { display: flex; flex-direction: column; gap: 12px; padding: 10px 12px 12px; }
.fat-fotos { display: flex; flex: none; }
.fat-fotos .fat-foto { width: 34px; height: 34px; border: 2px solid var(--surface); }
.fat-fotos .fat-foto + .fat-foto { margin-left: -10px; }
.fat-foto { width: 40px; height: 40px; border-radius: 8px; object-fit: contain; background: var(--surface); border: 1px solid var(--line); flex: none; display: block; }
.fat-foto-vazia, .fat-foto-mais { display: grid; place-items: center; background: var(--sunken); color: var(--muted); font-family: var(--font-serif); font-weight: 700; font-size: 13px; }
.fat-prod { display: flex; align-items: center; gap: 10px; min-width: 0; }
.fat-prod-nome { min-width: 0; overflow-wrap: anywhere; line-height: 1.35; }
.fat-sugestao .fat-prod .fat-foto { width: 32px; height: 32px; }
.fat-parcelas-bloco { display: flex; flex-direction: column; gap: 6px; }
.fat-abertas-det { border: 1px solid var(--line); border-radius: 12px; }
.fat-abertas-det > summary { cursor: pointer; padding: 10px 12px; font-size: 13.5px; }
.fat-abertas-det > .fat-abertas { padding: 0 12px 12px; }
.fat-vencido { color: var(--red); font-weight: 600; }
.fat-ops { display: flex; flex-direction: column; gap: 6px; }
.fat-op { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.fat-op-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fat-op-tx b { font-size: 14px; }
.fat-op-tx small { color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.fat-chave { position: relative; width: 44px; height: 26px; flex: none; margin-top: 2px; }
.fat-chave input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; width: 100%; height: 100%; }
.fat-chave input:disabled { cursor: not-allowed; }
.fat-chave i { position: absolute; inset: 0; background: #D5D7E0; border-radius: 999px; pointer-events: none; transition: background .15s; }
.fat-chave i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(10,17,48,.25); transition: transform .15s; }
.fat-chave input:checked + i { background: var(--green); }
.fat-chave input:checked + i::after { transform: translateX(18px); }
.fat-chave input:disabled + i { opacity: .55; }
.fat-chave input:focus-visible + i { outline: 2px solid var(--gold); outline-offset: 2px; }
.fat-canais { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.fat-canais[hidden] { display: none; }
.fat-canal-b { border: 1px solid var(--line); border-radius: var(--r-pill); padding: 6px 12px; font: 600 12.5px var(--font-sans); background: var(--surface); color: var(--ink); cursor: pointer; }
.fat-canal-b[aria-pressed="true"] { border-color: var(--gold); background: var(--gold-soft); color: var(--gold-ink); }
.fat-canal-b:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.fat-entrega { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fat-ent { border: 1.5px solid var(--line); border-radius: 12px; padding: 12px; text-align: left; background: var(--surface); cursor: pointer; font: inherit; color: var(--ink); display: flex; flex-direction: column; gap: 3px; }
.fat-ent b { font-family: var(--font-serif); font-weight: var(--peso-titulo); font-size: 15px; }
.fat-ent small { color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.fat-ent[aria-pressed="true"] { border-color: var(--gold); background: var(--gold-soft); }
.fat-ent:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.fat-ent-extra { border: 1px dashed var(--gold); background: var(--sunken); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; }
.fat-ent-extra[hidden] { display: none; }
.fat-ent-campo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-weight: 600; }
.fat-ent-campo .fat-forma { height: 34px; border: 1px solid var(--line); border-radius: 8px; padding: 0 8px; background: var(--surface); color: var(--ink); max-width: 100%; }
.fat-obs-det > summary { cursor: pointer; font-size: 13.5px; font-weight: 700; color: var(--gold-ink); padding: 4px 0; }
.fat-obs-det > .fat-obs { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.fat-rodape { position: sticky; bottom: 0; z-index: 2; background: var(--surface); box-shadow: 0 -10px 24px -18px rgba(10,17,48,.4); }
.fat-frase { flex: 1 1 260px; font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.fat-frase b { color: var(--ink); }
@media (max-width: 560px) {
  .fat-itens-sum { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "tx v seta" "fotos fotos fotos"; gap: 8px 10px; }
  .fat-itens-sum-tx { grid-area: tx; } .fat-itens-sum-v { grid-area: v; } .fat-itens-sum::after { grid-area: seta; } .fat-fotos { grid-area: fotos; }
  .fat-entrega { grid-template-columns: 1fr; }
  .fat-ck { grid-template-columns: 26px minmax(0, 1fr); }
  .fat-ck > :nth-child(3) { grid-column: 2; justify-self: start; }
  .fat-rodape { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- Parcelamento sem juros (ficha do pedido e fila do admin) ---------- */
.sj-balao { border: 1px dashed var(--gold); background: var(--gold-soft); border-radius: var(--r-lg); padding: 12px; display: flex; flex-direction: column; gap: 10px; margin: 10px 0; }
.sj-balao.sj-aprovada { border-style: solid; border-color: var(--green); background: var(--green-soft); }
.sj-balao.sj-recusada { border-style: solid; border-color: var(--red); background: var(--red-soft); }
.sj-titulo { font-weight: 600; font-size: 13px; }
.sj-texto { font-size: 12.5px; color: var(--muted); margin: 0; }
.sj-form { display: flex; flex-direction: column; gap: 10px; }
.sj-resumo { cursor: pointer; font-weight: 600; font-size: 13px; padding: 6px 0; }
.sj-custo { font-size: 12.5px; font-variant-numeric: tabular-nums; }
.sj-custo-linha { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; padding: 6px 10px; border-top: 1px solid var(--hair); }
.sj-custo-linha > :nth-child(n+2) { text-align: right; }
.sj-custo-cab { border-top: 0; background: var(--sunken); color: var(--muted); font-size: 11.5px; }
.sj-custo-caixa { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--surface); }
.sj-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.sj-acoes > * { flex: 1 1 140px; }
.sj-fila { display: flex; flex-direction: column; gap: 14px; }
.sj-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.sj-sim { margin: 4px 0; }
.sj-sim .sj-custo-caixa { margin: 6px 0; }
.sj-sim-linha { display: grid; grid-template-columns: .7fr 1.2fr 1.2fr .9fr; gap: 8px; padding: 6px 10px; border-top: 1px solid var(--hair); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.sj-sim-linha > :nth-child(n+2) { text-align: right; }
.sj-sim-linha.sj-custo-cab { border-top: 0; background: var(--sunken); color: var(--muted); font-size: 11.5px; }
.sj-sim-ok { background: var(--green-soft); color: var(--green-ink); font-weight: 600; }
.sj-escolha-resumo { min-height: 1em; }

/* ---- Canhoto digital (entrega/canhoto.html) ---- */
.cn-cartao { padding: 16px; display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.cn-cliente { font-weight: 600; }
.cn-itens { list-style: none; margin: 0; padding: 0; display: grid; }
.cn-itens li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px solid var(--hair); font-size: 13px; }
.cn-itens li:first-child { border-top: 0; }
.cn-itens .cn-total { font-weight: 600; border-top: 1px solid var(--line); }
.cn-dois { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.cn-dois .campo, .cn-dois input { min-width: 0; width: 100%; }
.cn-cartao + .aviso, .aviso + .cn-cartao { margin-top: 12px; }
.cn-bloco { display: grid; gap: 4px; }
.cn-assina { border: 1.5px dashed var(--line); border-radius: var(--r-md); background: var(--sunken); position: relative; }
.cn-assina canvas { display: block; width: 100%; height: 160px; touch-action: none; cursor: crosshair; }
.cn-dica { position: absolute; left: 12px; top: 10px; font-size: 12px; color: var(--muted); pointer-events: none; }
.cn-linha { position: absolute; left: 14px; right: 14px; bottom: 34px; border-bottom: 1px solid var(--line); pointer-events: none; }
.cn-limpar { position: absolute; right: 8px; top: 6px; min-height: 0; padding: 3px 10px; font-size: 12px; }
.cn-foto { display: grid; grid-template-columns: 76px 1fr; gap: 12px; align-items: center; }
.cn-mini { width: 76px; height: 76px; border-radius: var(--r-md); background: var(--sunken) center / cover no-repeat; border: 1px solid var(--line); display: grid; place-items: center; color: var(--muted); font-size: 11px; text-align: center; padding: 4px; }
.cn-mini.tem { border-color: var(--green); }
.cn-foto-acao { display: grid; gap: 6px; }
.cn-btn-foto { cursor: pointer; text-align: center; }
.cn-evid { display: grid; gap: 6px; }
.cn-evid div { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.cn-evid div.on { color: var(--ink); }
.cn-chk { width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 11px; font-style: normal; font-weight: 700; flex: none; background: var(--sunken); border: 1.5px solid var(--line); color: transparent; }
.cn-evid div.on .cn-chk { background: var(--green); border-color: var(--green); color: #fff; }
[hidden] { display: none !important; }
.cn-ficha { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); padding: 14px; display: grid; gap: 8px; margin-bottom: 12px; }
.cn-ficha-titulo { font-weight: 600; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cn-ficha p { margin: 0; font-size: 13px; }
.cn-ficha-imgs { display: flex; gap: 10px; flex-wrap: wrap; }
.cn-ficha-imgs img { height: 84px; max-width: 160px; object-fit: contain; border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; }
.cn-ficha-imgs a:nth-child(2) img { object-fit: cover; width: 112px; }
.cn-falta { border-color: var(--gold); background: var(--gold-soft); }
/* aprovação do pedido pelo cliente (partials/_aprovacao_pedido.html) */
.ap-provas { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 12px; margin: 0; font-size: 12.5px; }
.ap-provas dt { color: var(--muted); }
.ap-provas dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
@media (max-width: 480px) { .ap-provas { grid-template-columns: 1fr; } .ap-provas dd { margin-bottom: 4px; } }
.selo-ped-aprovado { font-size: 10px; font-weight: 700; color: var(--green-ink); background: var(--green-soft); border-radius: var(--r-pill); padding: 1px 6px; }

/* ---- Provas (admin/provas.html, admin/prova_titulo.html) ---- */
.pv-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 12px 0; }
.pv-kpi { background: var(--sunken); border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px; display: grid; gap: 2px; text-decoration: none; color: var(--ink); }
.pv-kpi span { font-size: 10.5px; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); }
.pv-kpi b { font-size: 20px; }
.pv-kpi.on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.pv-kpi.forte b { color: var(--green-ink); } .pv-kpi.media b { color: var(--gold-ink); } .pv-kpi.fraca b { color: var(--red); }
.pv-linha { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px 0; border-top: 1px solid var(--hair); text-decoration: none; color: inherit; }
.pv-linha:first-child { border-top: 0; }
.pv-cli { display: grid; gap: 2px; min-width: 0; } .pv-cli .apoio { overflow-wrap: anywhere; }
.pv-val { text-align: right; font-weight: 600; }
.pv-selo { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; }
.etiqueta.pv-forte { background: var(--green-soft); color: var(--green-ink); }
.etiqueta.pv-media { background: var(--gold-soft); color: var(--gold-ink); }
.etiqueta.pv-fraca { background: var(--red-soft); color: var(--red); }
.pv-selo-grande { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--sunken); }
.pv-selo-grande b { font-size: 16px; }
.pv-barra { flex: 1; height: 8px; border-radius: 6px; background: var(--hair); overflow: hidden; }
.pv-barra i { display: block; height: 100%; background: var(--red); }
.pv-selo-grande.pv-media .pv-barra i { background: var(--gold); } .pv-selo-grande.pv-forte .pv-barra i { background: var(--green); }
.pv-itens { list-style: none; margin: 0; padding: 0; display: grid; }
.pv-itens li { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: center; padding: 8px 0; border-top: 1px solid var(--hair); font-size: 13.5px; color: var(--muted); }
.pv-itens li:first-child { border-top: 0; } .pv-itens li.on { color: var(--ink); }
.pv-itens li.on .cn-chk { background: var(--green); border-color: var(--green); color: #fff; }
.pv-libera { display: grid; }
.pv-libera div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--hair); font-size: 13.5px; }
.pv-libera div:first-child { border-top: 0; }
.pv-libera .ok { color: var(--green-ink); } .pv-libera .nao { color: var(--red); }
.pv-acoes { display: grid; gap: 8px; }
.pv-acoes form { display: grid; } .pv-acoes .btn { text-align: center; }
.pv-escolha { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: center; padding: 8px 0; border-top: 1px solid var(--hair); font-size: 13.5px; cursor: pointer; }
.pv-parcela { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--hair); font-size: 13.5px; }
.pv-parcela:first-of-type { border-top: 0; }
.pv-parcela .btn { min-height: 0; padding: 6px 12px; font-size: 12.5px; }
.cn-sem { flex-basis: 100%; }
.cn-sem summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; justify-content: center; }
.cn-sem summary::-webkit-details-marker { display: none; }
.cn-sem form { margin-top: 10px; display: grid; gap: 10px; }

/* ---- Vender sem internet (vendedor/admin): templates/vendedor/vender.html + static/js/vender-offline.js ---- */
.vo-app { max-width: 520px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding-bottom: 88px; }
.vo-app > * { min-width: 0; }
.vo-topo { background: var(--ink); color: #F1EDE2; border-radius: var(--r-lg); padding: 12px 14px; display: grid; gap: 8px; }
.vo-topo-linha { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.vo-titulo { font-family: var(--font-serif); font-size: 24px; font-weight: var(--peso-titulo); }
.vo-sinal { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; border-radius: 20px; padding: 5px 10px; }
.vo-sinal i { width: 8px; height: 8px; border-radius: 50%; }
.vo-sinal.on { background: var(--green-soft); color: var(--green-ink); } .vo-sinal.on i { background: var(--green); }
.vo-sinal.off { background: var(--gold); color: var(--ink); } .vo-sinal.off i { background: var(--ink); }
.vo-fresco { font-size: 12px; color: #B9BED9; }
.vo-acoes-topo { display: flex; gap: 8px; }
.vo-cartao { padding: 14px; display: grid; gap: 10px; }
.vo-h2 { font-family: var(--font-serif); font-weight: var(--peso-titulo); font-size: 21px; margin: 0; }
.vo-abas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; background: var(--hair); padding: 3px; border-radius: 12px; position: sticky; top: 0; z-index: 5; }
.vo-abas button { font: inherit; font-size: 12.5px; font-weight: 500; border: 0; background: transparent; color: var(--muted); padding: 9px 2px; border-radius: 9px; cursor: pointer; position: relative; }
.vo-abas button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(10,17,48,.12); }
.vo-n { position: absolute; top: 2px; right: 6px; background: var(--red); color: #fff; border-radius: 9px; font-size: 10px; min-width: 16px; padding: 0 4px; }
.vo-busca { width: 100%; font: inherit; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 10px; padding: 11px 12px; }
.vo-pill { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 11.5px; font-weight: 500; white-space: nowrap; }
.vo-pill.ok { background: var(--green-soft); color: var(--green-ink); } .vo-pill.av { background: var(--gold-soft); color: var(--gold-ink); }
.vo-pill.ru { background: var(--red-soft); color: var(--red); } .vo-pill.mu { background: var(--sunken); color: var(--muted); border: 1px solid var(--line); }
.vo-cli { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 11px 0; border: 0; border-top: 1px solid var(--hair); text-align: left; background: none; width: 100%; font: inherit; color: inherit; cursor: pointer; }
.vo-cli:first-child { border-top: 0; }
.vo-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.vo-kpi { background: var(--sunken); border: 1px solid var(--line); border-radius: 12px; padding: 9px; display: grid; gap: 1px; min-width: 0; }
.vo-kpi span { font-size: 10px; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); } .vo-kpi b { font-size: 14px; overflow-wrap: anywhere; }
.vo-kpi.ru { background: var(--red-soft); border-color: transparent; } .vo-kpi.ru b, .vo-kpi.ru span { color: var(--red); }
.vo-barra { height: 8px; border-radius: 6px; background: var(--hair); overflow: hidden; } .vo-barra i { display: block; height: 100%; }
.vo-lin { display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; padding: 7px 0; border-top: 1px solid var(--hair); font-size: 13px; }
.vo-lin-total { border-top: 1px solid var(--line); font-size: 15px; }
.vo-chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.vo-chip { font: inherit; font-size: 12.5px; font-weight: 500; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 20px; padding: 6px 12px; cursor: pointer; white-space: nowrap; }
.vo-chip[aria-pressed="true"] { background: var(--ink); color: #F1EDE2; border-color: var(--ink); }
.vo-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vo-prod { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; display: grid; align-content: start; }
.vo-foto { aspect-ratio: 4 / 3; display: grid; place-items: center; font-family: var(--font-serif); font-size: 32px; color: rgba(10,17,48,.5); position: relative; font-weight: var(--peso-titulo); }
.vo-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vo-tag { position: absolute; left: 6px; top: 6px; font-family: var(--font-sans); font-size: 10.5px; font-weight: 600; background: var(--ink); color: #F1EDE2; border-radius: 6px; padding: 1px 6px; z-index: 1; }
.vo-tag.ru { background: var(--red); }
.vo-prod-corpo { padding: 9px 10px 10px; display: grid; gap: 5px; }
.vo-nome { font-size: 13px; font-weight: 500; line-height: 1.25; min-height: 33px; overflow-wrap: anywhere; }
.vo-preco { font-weight: 600; } .vo-preco s { color: var(--muted); font-weight: 400; font-size: 12px; }
.vo-add { padding: 6px 11px; font-size: 12.5px; }
.vo-passo { display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.vo-passo button { width: 40px; height: 36px; border: 0; background: var(--sunken); font-size: 18px; cursor: pointer; color: var(--ink); } .vo-passo span { font-weight: 600; }
.vo-barra-carrinho { position: fixed; left: 0; right: 0; bottom: 56px; z-index: 12; padding: 10px 16px; background: var(--surface); border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 12px; box-shadow: 0 -8px 20px -14px rgba(10,17,48,.35); }
.vo-total { display: block; font-size: 18px; }
.vo-opc { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: center; padding: 9px 0; border-top: 1px solid var(--hair); cursor: pointer; font-size: 13.5px; }
.vo-prazos { padding-left: 14px; }
.vo-assina { border: 1.5px dashed var(--line); border-radius: 12px; background: var(--sunken); position: relative; }
.vo-assina canvas { display: block; width: 100%; height: 140px; touch-action: none; cursor: crosshair; }
.vo-dica { position: absolute; left: 12px; top: 10px; font-size: 12px; color: var(--muted); pointer-events: none; }
.vo-linha-botoes { display: flex; gap: 8px; flex-wrap: wrap; }
.vo-foto-btn { cursor: pointer; }
.vo-mini { max-width: 120px; border-radius: 10px; border: 1px solid var(--line); }
.vo-ped { display: grid; gap: 6px; padding: 10px 0; border-top: 1px solid var(--hair); } .vo-ped:first-child { border-top: 0; }
.vo-guardar { width: 100%; }
@media (min-width: 900px) { .vo-barra-carrinho { bottom: 0; left: 240px; } }
.vo-faixa-offline { position: fixed; left: 12px; right: 12px; bottom: calc(var(--barra-h, 62px) + 8px); z-index: 40; background: var(--ink); color: #F1EDE2; border-radius: 12px; padding: 10px 14px; display: flex; gap: 10px; align-items: center; justify-content: space-between; font-size: 13px; box-shadow: var(--shadow); }
.vo-faixa-offline a { background: var(--gold); color: var(--ink); font-weight: 600; border-radius: 9px; padding: 7px 12px; text-decoration: none; white-space: nowrap; }

/* título de um grupo de mensagens no editor de Configurações → Mensagens (ex.: cobrança por estágio) */
.msg-grupo-titulo { padding: 14px 20px 8px; border-top: 1px solid var(--hair); display: grid; gap: 2px; }

/* página pública do orçamento: o cliente ajusta as quantidades e segue para o pagamento (orcamento-editar.js) */
.oc-form { display: grid; gap: 14px; }
.oc-itens { background: var(--surface, #fff); border: 1px solid var(--hair); border-radius: 14px; padding: 4px 12px; }
.oc-item { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 6px 12px; padding: 12px 0; border-top: 1px solid var(--hair); }
.oc-item:first-child { border-top: 0; }
.oc-foto { width: 52px; height: 52px; border-radius: 10px; overflow: hidden; background: var(--gold-soft); display: grid; place-items: center; font-weight: 600; }
.oc-foto img { width: 100%; height: 100%; object-fit: cover; }
.oc-nome { font-weight: 500; overflow-wrap: anywhere; }
.oc-un { font-size: 12.5px; color: var(--muted); }
.oc-qtd { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.oc-stepper { display: inline-flex; align-items: center; border: 1px solid var(--hair); border-radius: 12px; overflow: hidden; }
.oc-stepper button { width: 40px; height: 38px; border: 0; background: var(--bg, #f6f4ef); font-size: 20px; cursor: pointer; }
.oc-stepper button:disabled { opacity: .35; cursor: default; }
.oc-stepper output { min-width: 40px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.oc-sub { font-weight: 600; font-variant-numeric: tabular-nums; }
.oc-remover { border: 0; background: none; font: inherit; font-size: 12.5px; color: var(--muted); text-decoration: underline; cursor: pointer; }
.oc-removido { opacity: .55; }
.oc-desc-itens { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.oc-desc-itens[hidden] { display: none; }
.oc-resumo { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 18px; font-variant-numeric: tabular-nums; }
.oc-botoes { display: grid; gap: 10px; }
.oc-botoes button:disabled { opacity: .5; cursor: default; }
.oc-dialogo { border: 0; border-radius: 16px; padding: 18px; width: min(92vw, 420px); background: var(--surface, #fff); color: var(--ink); box-shadow: 0 20px 60px rgba(10, 17, 48, .35); }
.oc-dialogo::backdrop { background: rgba(10, 17, 48, .55); }
.oc-login-form { display: grid; gap: 12px; }
.oc-login-form h2 { margin: 0; font-size: 1.15rem; }
.oc-forma { border: 1px solid var(--hair); border-radius: 14px; padding: 12px; background: var(--surface, #fff); display: grid; gap: 6px; }
.oc-forma-titulo { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.oc-forma-valor { font-weight: 600; }
.oc-forma-nota { font-size: 12.5px; color: var(--muted); }
.oc-parcelas { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.oc-parcelas th { text-align: left; font-weight: 500; color: var(--muted); padding: 4px 0; }
.oc-parcelas td { padding: 5px 0; border-top: 1px solid var(--hair); }

/* página do orçamento: cabeçalho com os dados do cliente, modo "ver" e modo "editar" */
.oc-cabecalho { display: grid; gap: 6px; margin-bottom: 8px; }
.oc-cab-linha { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.oc-cab-linha h1 { margin: 0; }
.oc-cliente { border: 1px solid var(--hair); border-radius: 14px; padding: 12px; background: var(--surface, #fff); display: grid; gap: 4px; }
.oc-cliente-nome { font-weight: 600; font-size: 1.05rem; overflow-wrap: anywhere; }
.oc-cliente-linha { color: var(--muted); font-size: 13.5px; }
.oc-cliente-dados { margin: 4px 0 0; display: grid; gap: 4px; font-size: 13.5px; }
.oc-cliente-dados > div { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 8px; }
.oc-cliente-dados dt { color: var(--muted); }
.oc-cliente-dados dd { margin: 0; overflow-wrap: anywhere; }
.oc-cliente-escuro { background: var(--ink); color: var(--cream); border-color: transparent; padding: 14px 16px; gap: 10px; }
.oc-cab2 { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.oc-cab2-dados { min-width: 0; flex: 1 1 0; display: grid; gap: 2px; }
.oc-cab2-dados .oc-cliente-nome { font-weight: 700; }
.oc-cab2-linha { font-size: 13px; color: rgba(247,243,234,.78); overflow-wrap: anywhere; }
.oc-clube-lado { flex: none; text-align: right; display: grid; justify-items: end; gap: 2px; max-width: 46%; }
.oc-clube-rotulo { font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: rgba(247,243,234,.55); }
.oc-clube-saldo { font-family: var(--font-serif); font-size: 34px; line-height: 1; color: var(--gold); font-weight: var(--peso-titulo); }
.oc-clube-meta { font-size: 11.5px; line-height: 1.35; color: rgba(247,243,234,.62); }
.oc-clube-btn { margin-top: 6px; border: 0; border-radius: 20px; padding: 7px 13px; font: inherit; font-weight: 700; font-size: 12.5px; background: var(--gold); color: var(--ink); cursor: pointer; white-space: nowrap; }
.oc-clube-btn::after { content: " ▾"; }
.oc-clube-btn[aria-expanded="true"]::after { content: " ▴"; }
.oc-clube-trilho { height: 7px; border-radius: 20px; background: rgba(247,243,234,.16); overflow: hidden; }
.oc-clube-barra { height: 100%; background: linear-gradient(90deg, #C8922A, #E8B33C); border-radius: 20px; }
.oc-clube-pe { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 11.5px; color: rgba(247,243,234,.62); }
.oc-clube-selos { display: flex; gap: 6px; flex-wrap: wrap; }
.oc-selo { font-size: 10.5px; font-weight: 600; padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
.oc-selo-vip { background: rgba(232,179,60,.2); color: #E8B33C; }
.oc-troca { display: grid; gap: 8px; margin: 4px -4px 0; }
.oc-troca[hidden] { display: none; }
.oc-troca-item { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px; border-radius: 12px; background: rgba(247,243,234,.07); border: 1px solid rgba(247,243,234,.1); }
.oc-troca-off { opacity: .65; }
.oc-troca-foto { width: 44px; height: 44px; border-radius: 10px; background: #fff; display: grid; place-items: center; overflow: hidden; }
.oc-troca-foto img { width: 100%; height: 100%; object-fit: cover; }
.oc-troca-nome { font-weight: 500; font-size: 14px; overflow-wrap: anywhere; text-transform: uppercase; letter-spacing: .01em; }
.oc-troca-custo { font-size: 12.5px; color: var(--gold); font-variant-numeric: tabular-nums; }
.oc-troca-btn { border: 0; border-radius: 10px; padding: 9px 14px; font: inherit; font-weight: 700; font-size: 13px; background: var(--gold); color: var(--ink); cursor: pointer; white-space: nowrap; }
.oc-troca-btn:disabled { background: rgba(247,243,234,.14); color: rgba(247,243,234,.5); cursor: default; }
.oc-troca-nota { font-size: 12px; color: rgba(247,243,234,.6); padding: 0 4px; }
.oc-form[data-modo="ver"] .oc-so-edicao { display: none !important; }
.oc-form[data-modo="editar"] .oc-so-ver { display: none !important; }
.oc-form[data-modo="editar"] .oc-qtd-ver { display: none; }
.oc-qtd-ver { font-variant-numeric: tabular-nums; }
.oc-link { border: 0; background: none; font: inherit; color: var(--gold-ink, #8a6411); text-decoration: underline; cursor: pointer; padding: 4px 0; }
.oc-adicionar { margin: 4px 0 14px; text-align: left; }
.oc-opcao { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 2px 10px; align-items: start; padding: 10px; border: 1.5px solid var(--hair); border-radius: 12px; margin-bottom: 8px; cursor: pointer; }
.oc-opcao[aria-checked="true"] { border-color: var(--ink); box-shadow: 0 0 0 3px var(--gold-soft); }
.oc-opcao[aria-disabled="true"] { opacity: .6; cursor: default; }
.oc-opcao .t { font-weight: 600; }
.oc-opcao .v { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.oc-opcao .d { grid-column: 2 / -1; font-size: 12.5px; color: var(--muted); }
.oc-opcao select { grid-column: 2 / -1; font: inherit; padding: 8px; border-radius: 10px; border: 1px solid var(--hair); background: var(--bg, #f6f4ef); color: var(--ink); width: 100%; }
.oc-opcao .oc-cartao-parcelas, .oc-opcao > .oc-forma-nota { grid-column: 2 / -1; }
.oc-cartao-parcelas { margin-top: 6px; }
.oc-cartao-parcelas th:not(:first-child), .oc-cartao-parcelas td:not(:first-child) { text-align: right; }
.oc-ganho { margin-top: 10px; padding: 10px 14px; border-radius: 14px; background: var(--gold-soft, #fbf1d6); color: var(--ink); font-size: 13.5px; }
.oc-ganho[hidden] { display: none; }
.oc-ganho-topo strong { font-family: var(--font-serif); font-size: 18px; font-weight: var(--peso-titulo); }
.oc-ganho ul { margin: 4px 0 0; padding-left: 18px; color: var(--muted); font-size: 12.5px; }
#cadastro-ja-existe a { font-weight: 700; text-decoration: underline; margin-left: 4px; }

/* ---- aba Crédito da ficha do cliente (admin): consulta da Boa Vista registrada no app ---- */
.cc-cartao { background: var(--surface, #fff); border-radius: 14px; padding: 14px; display: grid; gap: 10px; margin-bottom: 12px; border: 1px solid var(--hair); }
.cc-topo { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.cc-titulo { margin: 0; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.cc-selo { font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 20px; white-space: nowrap; }
.cc-bom { background: #DDF1E4; color: #1B8A4B; }
.cc-ruim { background: #F5DAD4; color: #9C3B2E; }
.cc-aviso-selo { background: #FBEBC8; color: #B7791F; }
.cc-neutro-selo { background: #ECE8DC; color: var(--muted); }
.cc-ok { color: #1B8A4B; } .cc-aviso { color: #B7791F; } .cc-neutro { color: var(--muted); }
.cc-score { display: flex; align-items: baseline; gap: 8px; }
.cc-score b { font-family: var(--font-serif); font-weight: var(--peso-titulo); font-size: 44px; line-height: 1; }
.cc-score span { color: var(--muted); font-size: 13px; }
.cc-regua { position: relative; height: 10px; border-radius: 10px; background: linear-gradient(90deg, #C9604F 0 35%, #E2A93A 35% 60%, #8DBB5B 60% 80%, #2E9A5B 80% 100%); margin: 4px 0 2px; }
.cc-regua i { position: absolute; top: -5px; width: 4px; height: 20px; border-radius: 3px; background: var(--ink); transform: translateX(-2px); }
.cc-regua-leg { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--muted); }
.cc-fonte { font-size: 13px; color: var(--muted); }
.cc-fonte b { color: var(--ink); font-weight: 500; }
.cc-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cc-item { border: 1px solid var(--hair); border-radius: 12px; padding: 9px 11px; display: grid; gap: 2px; }
.cc-r { font-size: 11px; color: var(--muted); }
.cc-v { font-weight: 600; font-variant-numeric: tabular-nums; }
.cc-mal { border-color: #E3B4AA; background: #FCF1EE; }
.cc-mal .cc-v { color: #9C3B2E; }
.cc-alerta { border-radius: 12px; padding: 10px 12px; font-size: 13.5px; background: #F5DAD4; color: #9C3B2E; }
.cc-alerta-aviso { background: #FBEBC8; color: #7A5410; }
.cc-alerta-neutro { background: #ECE8DC; color: var(--ink); }
.cc-obs, .cc-nota { font-size: 12.5px; color: var(--muted); line-height: 1.45; margin: 0; }
.cc-botoes { display: grid; gap: 8px; }
.cc-btn { border: 0; border-radius: 12px; padding: 12px 16px; font: inherit; font-weight: 600; font-size: 14.5px; cursor: pointer; text-align: center; text-decoration: none; display: block; }
.cc-btn-prim { background: var(--gold); color: var(--ink); }
.cc-btn-sec { background: transparent; border: 1px solid var(--hair); color: var(--ink); }
.cc-hist { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 10px 0; border-top: 1px solid var(--hair); }
.cc-hist:first-of-type { border-top: 0; }
.cc-hist-data { font-weight: 500; }
.cc-hist-score { font-family: var(--font-serif); font-size: 22px; text-align: right; font-weight: var(--peso-titulo); }
.cc-hist-score small { font-family: var(--font-sans, inherit); font-size: 12px; margin-left: 6px; }
.cc-sobe { color: #1B8A4B; } .cc-desce { color: #9C3B2E; }
.cc-hist-sub { grid-column: 1 / -1; font-size: 12.5px; color: var(--muted); }
.cc-dialogo { width: min(440px, calc(100vw - 24px)); border: 0; border-radius: 18px; padding: 0; background: var(--surface, #fff); color: var(--ink); }
.cc-dialogo::backdrop { background: rgba(14,18,48,.45); }
.cc-form { padding: 18px 16px; display: grid; gap: 12px; max-height: 88vh; overflow-y: auto; }
.cc-form h3 { margin: 0; font-family: var(--font-serif); font-weight: var(--peso-titulo); font-size: 22px; }
.cc-form label { display: grid; gap: 4px; font-size: 12.5px; color: var(--muted); }
.cc-form input, .cc-form select, .cc-form textarea { font: inherit; font-size: 15px; color: var(--ink); background: #FBFAF5; border: 1px solid var(--hair); border-radius: 10px; padding: 10px 11px; width: 100%; }
.cc-dois { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cc-anexo { border: 1.5px dashed var(--hair); border-radius: 12px; padding: 12px; display: grid; gap: 6px; font-size: 13.5px; }
.cc-anexo small { color: var(--muted); }
.cc-rodape { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; }

/* ---- sugestão de limite a prazo (aba Crédito, admin) ---- */
.cs-bloco { display: grid; gap: 12px; margin-bottom: 14px; }
.cs-sug { background: var(--ink); color: var(--cream); border-radius: 16px; padding: 16px; display: grid; gap: 10px; }
.cs-r { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: rgba(247,243,234,.55); }
.cs-v { font-family: var(--font-serif); font-size: 40px; line-height: 1; color: var(--gold); font-weight: var(--peso-titulo); }
.cs-s { font-size: 13px; color: rgba(247,243,234,.7); }
.cs-dois { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cs-mini { border-top: 1px solid rgba(247,243,234,.15); padding-top: 8px; font-size: 12.5px; color: rgba(247,243,234,.75); }
.cs-mini b { display: block; font-size: 16px; color: var(--cream); font-weight: 600; font-variant-numeric: tabular-nums; }
.cs-passo { display: grid; grid-template-columns: 24px 1fr auto; gap: 10px; align-items: start; padding: 9px 0; border-top: 1px solid var(--hair); font-size: 13.5px; }
.cs-passo:first-of-type { border-top: 0; }
.cs-passo small { display: block; color: var(--muted); font-size: 12px; margin-top: 1px; }
.cs-ic { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.cs-ic-ok { background: #DDF1E4; color: #1B8A4B; } .cs-ic-aviso { background: #FBEBC8; color: #B7791F; } .cs-ic-ruim { background: #F5DAD4; color: #9C3B2E; } .cs-ic-neutro { background: #ECE8DC; color: var(--muted); }
.cs-eff { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.cc-alerta-ok { background: #DDF1E4; color: #1B8A4B; }
.cc-btn:disabled { opacity: .45; cursor: default; }


/* ---------- Dívida antiga: aviso no topo e tela Regularizar (cliente) ---------- */
.da-aviso { align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 14px; }
.da-aviso-texto { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 220px; }
.rg { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.rg-h { font-size: 20px; margin: 0; }
.rg-lista, .rg-parcelas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rg-lista li, .rg-linha { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.rg-lista li > span:first-child, .rg-linha > span:first-child { min-width: 0; }
.rg-total { border-top: 1px dashed var(--line); padding-top: 8px; font-weight: 600; }
.rg-riscado { text-decoration: line-through; color: var(--muted); }
.rg-verde { color: var(--green, #2c7a4b); font-weight: 600; }
.rg-ok { background: var(--green-soft, #e0f0e6); }
.rg-aviso { background: var(--gold-soft, #fbf0d4); }
.rg-parcela { display: flex; align-items: center; gap: 10px; }
.rg-parcela .rg-txt { flex: 1; min-width: 0; }
.rg-marca { width: 20px; height: 20px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--line); color: var(--ink); }
.rg-paga .rg-marca { background: var(--green, #2c7a4b); color: #fff; }
.rg-atrasada .rg-marca { background: var(--red, #9b3a2a); }
.rg-atraso { color: var(--red, #9b3a2a); font-weight: 600; }
.rg-ajuda { text-align: center; }

/* Cobrança automática: dias da semana e estágios como botões de marcar, em linha */
.ca-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ca-chip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  font-size: 14px; color: var(--ink); cursor: pointer; }
.ca-chip { min-height: 0; line-height: 1.2; }
.ca-chip input { width: 18px; height: 18px; min-height: 0; padding: 0; margin: 0; flex: none; }

/* Criar nova rota: pino numerado do mapa (OpenStreetMap) */
.rota-nova-pino span { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: #E8B33C; color: #0A1130;
  font-weight: 700; font-size: 13px; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4); }

/* Botão "Ir": janelinha para escolher o aplicativo de navegação */
.rt-btn-ir { flex-direction: column; gap: 1px; font-family: var(--font-sans); font-size: 11px; font-weight: 700; }
.rt-btn-ir svg { width: 17px; height: 17px; }
.rota-nova-ir { margin-left: 8px; padding: 4px 12px; border: 1px solid var(--green-ink, #2f7d4a); background: transparent; color: var(--green-ink, #2f7d4a); border-radius: 999px; font-weight: 700; font-size: 13px; cursor: pointer; }
.ir-fundo { position: fixed; inset: 0; z-index: 1000; background: rgba(10, 17, 48, .55); display: flex; align-items: flex-end; justify-content: center; }
.ir-folha { width: 100%; max-width: 480px; background: var(--surface, #fff); border-radius: 18px 18px 0 0; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 10px; }
.ir-folha b { font-size: 17px; color: var(--ink); }
.ir-endereco { font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.ir-opcao { display: flex; align-items: center; justify-content: center; height: 50px; border-radius: 13px; background: var(--ink, #0A1130); color: #fff; font-weight: 600; font-size: 16px; text-decoration: none; }
.ir-cancelar { height: 46px; border: 1px solid var(--line); background: transparent; color: var(--ink); border-radius: 13px; font-size: 15px; cursor: pointer; }

/* Vendedores em rota (admin): abas, resumo, mapa, cartões e paradas */
.vr-abas { display: flex; gap: 8px; margin-bottom: 14px; }
.vr-aba { flex: 1; display: flex; align-items: center; justify-content: center; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-weight: 600; text-decoration: none; }
.vr-aba.ativa { background: var(--ink); color: #fff; border-color: var(--ink); }
.vr-resumo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.vr-resumo4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vr-num { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; min-width: 0; }
.vr-num b { display: block; font-size: 22px; font-variant-numeric: tabular-nums; }
.vr-num span { font-size: 12px; color: var(--muted); }
.vr-mapa { height: 340px; border-radius: 16px; border: 1px solid var(--line); margin-bottom: 10px; overflow: hidden; }
.vr-cartoes { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.vr-cartao { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 14px; text-align: left; width: 100%; font: inherit; color: inherit; cursor: pointer; }
.vr-cartao[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 2px var(--ink); }
.vr-topo { display: flex; align-items: center; gap: 10px; }
.vr-cor { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.vr-nome { font-weight: 600; font-size: 17px; flex: 1; min-width: 0; }
.vr-chip { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 99px; white-space: nowrap; background: #ECEBE4; color: var(--muted); }
.vr-chip.ok { background: #E3F3E8; color: #1F6B3A; } .vr-chip.atencao { background: #FBF1D6; color: #7D5A0B; } .vr-chip.erro { background: #F8E3E0; color: #C2433B; }
.vr-prox { margin: 8px 0 10px; color: var(--muted); font-size: 14px; }
.vr-barra { height: 8px; background: #ECEBE4; border-radius: 99px; overflow: hidden; } .vr-barra i { display: block; height: 100%; background: var(--gold); border-radius: 99px; }
.vr-info { margin-top: 8px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.vr-detalhe { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 14px; margin-bottom: 12px; }
.vr-paradas { list-style: none; margin: 8px 0 0; padding: 0; }
.vr-paradas li { display: grid; grid-template-columns: 26px 1fr auto; gap: 4px 10px; align-items: start; padding: 9px 0; border-top: 1px solid var(--line); }
.vr-paradas li:first-child { border-top: 0; }
.vr-pn { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: #ECEBE4; color: var(--muted); }
.vr-pn.visitado { background: var(--green); color: #fff; } .vr-pn.pulado { background: #F8E3E0; color: var(--red); }
.vr-valor { font-weight: 600; font-variant-numeric: tabular-nums; font-size: 14px; }
.vr-filtros { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }

/* ============================================================
   EDITOR DO VISUAL (Configurações → Visual)
   Botões que abrem balões de escolha + tela de exemplo no computador e no celular.
   A tela de exemplo só usa as variáveis do tema, então muda junto com as escolhas.
   ============================================================ */
.vis-barra { position: sticky; top: 64px; z-index: 30; background: var(--bg); padding: 8px 0 10px; margin-bottom: 10px; }
.vis-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.vis-visao, .vis-salvar { display: flex; align-items: center; gap: 8px; }
.vis-tab { height: 38px; padding: 0 16px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 600 14px var(--font-sans); cursor: pointer; }
.vis-tab[aria-selected="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.vis-botoes { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
.vis-be { flex: none; height: 38px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); font: 500 13px var(--font-sans); color: var(--ink); cursor: pointer; white-space: nowrap; }
.vis-be[aria-expanded="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.vis-be-tracejado { border-style: dashed; }
.vis-be:focus-visible, .vis-fechar:focus-visible, .vis-tab:focus-visible, .vis-opcao:focus-visible, .vis-preset:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.vis-balao { position: absolute; left: 0; right: 0; top: 100%; z-index: 40; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px 14px; box-shadow: 0 18px 40px -12px rgba(10,17,48,.35); max-height: 56vh; overflow-y: auto; }
.vis-balao[hidden] { display: none; }
.vis-balao-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; font-size: 13px; position: sticky; top: -12px; background: var(--surface); padding: 2px 0 6px; }
.vis-fechar { width: 34px; height: 34px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); font-size: 20px; line-height: 1; cursor: pointer; color: var(--ink); flex: none; }
.vis-opcoes { display: flex; flex-wrap: wrap; gap: 8px; }
.vis-opcao { border: 1px solid var(--line); background: var(--surface); border-radius: 12px; padding: 7px 11px; cursor: pointer; font: 500 13px var(--font-sans); color: var(--ink); display: flex; align-items: center; gap: 8px; text-align: left; }
.vis-opcao[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 2px var(--ink); }
.vis-amostra { width: 24px; height: 24px; border-radius: 8px; border: 1px solid var(--line); flex: none; }
.vis-fonte-ex { font-size: 19px; line-height: 1; }
.vis-livre { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 10px; font-size: 13px; }
.vis-livre label { display: flex; align-items: center; gap: 8px; }
.vis-livre input[type=color] { width: 44px; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: none; cursor: pointer; }
.vis-sub { margin: 12px 0 6px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.vis-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.vis-preset { display: flex; flex-direction: column; gap: 4px; text-align: left; border: 1px solid var(--line); background: var(--surface); border-radius: 12px; padding: 10px 12px; cursor: pointer; font-family: var(--font-sans); color: var(--ink); }
.vis-preset span { font-size: 12px; color: var(--muted); }
.vis-preset[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 2px var(--ink); }
.vis-passos { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px 14px; }
.vis-passo { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--line); border-radius: 12px; padding: 6px 8px 6px 12px; font-size: 13px; }
.vis-ctl { display: flex; align-items: center; gap: 6px; }
.vis-ctl button { width: 38px; height: 34px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface); font: 600 18px var(--font-sans); cursor: pointer; color: var(--ink); }
.vis-ctl b { min-width: 52px; text-align: center; font: 600 14px var(--font-sans); }
.vis-sujo { color: var(--red); font-weight: 600; }
.vis-cab-acoes { display: flex; align-items: center; gap: 8px; flex: none; }
.vis-voltar { display: flex; flex-direction: column; gap: 12px; }
.vis-voltar-item { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin: 0; }

/* tela de exemplo */
.vis-cena { margin-top: 6px; }
.vis-app { display: flex; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--bg); min-height: 520px; }
.vis-side { width: 240px; flex: none; background: var(--sb-bg); color: var(--sb-texto); border-right: 1px solid var(--sb-borda); padding: 16px 12px; display: flex; flex-direction: column; gap: 16px; }
.vis-marca { font-family: var(--font-serif); font-weight: var(--peso-titulo); font-size: 26px; padding: 0 10px 4px; }
.vis-marca b { color: var(--gold); font-weight: inherit; }
.vis-grupo { display: flex; flex-direction: column; gap: 2px; }
.vis-rotulo { padding: 7px 10px; font-size: var(--sb-gfs, 11px); letter-spacing: .16em; text-transform: uppercase; color: var(--sb-titulo); }
.vis-item { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 8px; font-size: var(--sb-fs, 14px); color: var(--sb-texto); }
.vis-item:hover { background: var(--sb-hover); }
.vis-item.ativo { background: var(--sel-bg); color: var(--sel-tx); font-weight: 500; }
.vis-item i, .vis-cel-nav i { width: 14px; height: 14px; border-radius: 4px; background: var(--gold); opacity: .85; flex: none; }
.vis-cont { margin-left: auto; font-family: var(--font-mono); font-size: calc(var(--sb-fs, 14px) - 2px); opacity: .75; }
.vis-conteudo { flex: 1; min-width: 0; padding: 22px 22px 26px; }
.vis-sec { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.vis-h1 { font-family: var(--font-serif); font-weight: var(--peso-titulo); font-size: var(--h1-fs, 27px); line-height: 1.1; margin: 0 0 12px; }
.vis-h2 { font-family: var(--font-serif); font-weight: var(--peso-titulo); font-size: calc(var(--h1-fs, 27px) * .74); line-height: 1.15; }
.vis-abas { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.vis-aba { padding: 7px 14px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.vis-aba.sel { background: var(--sel-bg); color: var(--sel-tx); border-color: var(--sel-borda); font-weight: 500; }
.vis-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.vis-kpis-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vis-kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 12px 14px; min-width: 0; }
.vis-kpi span { font-size: calc(var(--txt-fs, 13px) - 2px); color: var(--muted); display: block; }
.vis-kpi b { font-family: var(--font-mono); font-size: calc(var(--num-fs, 12.5px) + 6px); font-weight: 500; display: block; margin-top: 2px; }
.vis-cartao { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px; box-shadow: var(--shadow-sm); }
.vis-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.vis-rolagem { overflow-x: auto; }
.vis-tabela { border-collapse: collapse; width: 100%; min-width: 440px; }
.vis-tabela th { text-align: left; font-size: calc(var(--txt-fs, 13px) - 3px); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--line); font-weight: 500; }
.vis-tabela td { padding: 10px; border-top: 1px solid var(--hair); }
.vis-tabela td.nome { font-family: var(--font-serif); font-weight: var(--peso-titulo); font-size: var(--nome-fs, 15px); color: var(--gold-ink); }
.vis-tabela td.num, .vis-tabela th.num { font-family: var(--font-mono); font-size: var(--num-fs, 12.5px); white-space: nowrap; }
.vis-tabela th.num, .vis-tabela td.num:last-child { text-align: right; }
.vis-botoes-ex { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.vis-celulares { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; }
.vis-cel { width: 360px; max-width: 100%; border: 10px solid #1B1D2A; border-radius: 34px; background: var(--bg); overflow: hidden; display: flex; flex-direction: column; min-height: 640px; }
.vis-cel-topo { background: #0A1130; color: #fff; padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; font-family: var(--font-serif); font-weight: var(--peso-titulo); font-size: 22px; }
.vis-cel-topo b { color: var(--gold); font-weight: inherit; }
.vis-cel-usuario { font-family: var(--font-sans); font-size: 14px; font-weight: 400; }
.vis-cel-corpo { padding: 14px; flex: 1; overflow: hidden; }
.vis-cl { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 12px; margin-bottom: 10px; }
.vis-nome { font-family: var(--font-serif); font-weight: var(--peso-titulo); font-size: var(--nome-fs, 15px); color: var(--gold-ink); margin-bottom: 4px; }
.vis-lin { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.vis-num { font-family: var(--font-mono); font-size: var(--num-fs, 12.5px); }
.vis-cel-nav { background: var(--sb-bg); border-top: 1px solid var(--sb-borda); display: grid; grid-template-columns: repeat(5, 1fr); padding: 6px 4px 10px; }
.vis-cel-nav div { text-align: center; padding: 6px 2px; border-radius: 10px; margin: 0 2px; font-size: max(10px, calc(var(--sb-fs, 14px) - 3.5px)); color: var(--sb-texto); }
.vis-cel-nav div i { display: block; width: 18px; height: 18px; margin: 0 auto 3px; border-radius: 5px; }
.vis-cel-nav div.ativo { background: var(--sel-bg); color: var(--sel-tx); font-weight: 600; }
@media (max-width: 900px) { .vis-barra { top: 56px; } }
@media (max-width: 760px) {
  .vis-balao { position: fixed; left: 8px; right: 8px; top: auto; bottom: calc(var(--barra-h, 62px) + 8px); max-height: 44vh; }
  .vis-app { flex-direction: column; }
  .vis-side { width: auto; flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--sb-borda); }
  .vis-grupo { min-width: 150px; }
  .vis-kpis { grid-template-columns: 1fr; }
}

/* ============================================================
   MENSAGENS POR SETOR (Configurações → Mensagens)
   Cada mensagem é um botão com "i"; tocar abre o balão de edição logo abaixo.
   ============================================================ */
.msg-pagina { display: flex; flex-direction: column; gap: 14px; }
.msg-legenda { margin: 0; max-width: 78ch; }
.msg-setor { position: relative; padding: 16px 20px 18px; display: flex; flex-direction: column; gap: 10px; }
.msg-setor-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.msg-setor-titulo { margin: 0; font-size: calc(var(--h1-fs, 27px) * .7); }
.msg-setor-desc { margin: 0; max-width: 78ch; }
.msg-subgrupo { display: flex; flex-direction: column; gap: 8px; }
.msg-subgrupo .msg-grupo-nome { margin-top: 4px; }
.msg-botoes { display: flex; flex-wrap: wrap; gap: 8px; }
.msg-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 5px 13px 5px 6px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 500 13px var(--font-sans); cursor: pointer; text-align: left; }
.msg-btn:hover { border-color: var(--gold); }
.msg-btn[aria-expanded="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.msg-btn:focus-visible, .msg-fechar:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.msg-i { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--gold-soft); color: var(--gold-ink); font: 600 12px var(--font-serif); font-style: italic; line-height: 1; }
.msg-btn[aria-expanded="true"] .msg-i { background: var(--gold); color: var(--ink); }
.msg-ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); flex: none; }
.msg-pop { position: absolute; left: 12px; right: 12px; z-index: 40; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 18px 40px -12px rgba(10,17,48,.35); max-height: 70vh; overflow-y: auto; border-bottom: 1px solid var(--line); }
.msg-pop[hidden] { display: none; }
.msg-pop .msg-editor { padding: 12px 18px 18px; }
.msg-pop-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; position: sticky; top: -12px; background: var(--surface); padding: 2px 0 8px; z-index: 1; }
.msg-pop-titulo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.msg-fechar { width: 34px; height: 34px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); font-size: 20px; line-height: 1; cursor: pointer; color: var(--ink); flex: none; }
.msg-pop-desc { margin: 0 0 10px; }
@media (max-width: 900px) {
  .msg-setor { padding: 14px 14px 16px; }
  .msg-pop { position: fixed; left: 8px; right: 8px; top: auto !important; bottom: calc(var(--barra-h, 62px) + 8px); max-height: 72vh; }
  .msg-pop .msg-editor { padding: 10px 14px 16px; }
}
.msg-mais-vars { display: grid; gap: 8px; }
.msg-mais-vars > summary { cursor: pointer; font-size: 12.5px; color: var(--gold-ink); width: fit-content; }
.msg-mais-vars[open] > summary { margin-bottom: 4px; }
.msg-pop { overflow-x: hidden; }
.msg-pop .pilha, .msg-pop .msg-grupos, .msg-pop .msg-vars { min-width: 0; }
.msg-pop .msg-vars .chip { height: auto; min-height: 30px; padding-top: 4px; padding-bottom: 4px; white-space: normal; text-align: left; line-height: 1.25; max-width: 100%; }

/* ---------- BARRA DE ROLAGEM DISCRETA ----------
   Só a barrinha fina, sem fundo (a trilha branca some). Vale para a página e para balões, listas e tabelas com rolagem. */
* { scrollbar-width: thin; scrollbar-color: rgba(10,17,48,.28) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; background: transparent; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(10,17,48,.22); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(10,17,48,.38); background-clip: content-box; }
/* na barra lateral (escura) a barrinha é clara */
.sidebar, .sidebar *, #menu-mais, #menu-mais * { scrollbar-color: var(--sb-linha) transparent; }
.sidebar ::-webkit-scrollbar-thumb, #menu-mais::-webkit-scrollbar-thumb { background: var(--sb-linha); background-clip: content-box; }

/* a foto que vai junto com a mensagem, no balão do editor */
.msg-foto { display: grid; gap: 8px; margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--sunken); }
.msg-foto-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 13px; }
.msg-foto-imgs { display: flex; flex-wrap: wrap; gap: 10px; }
.msg-foto-item { margin: 0; display: grid; gap: 4px; width: min(100%, 230px); }
.msg-foto-item img { display: block; width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); }
.msg-foto-item figcaption { font-size: 11.5px; color: var(--muted); }
.msg-foto-texto { display: grid; gap: 1px; font-size: 12.5px; }
.msg-foto-texto span { color: var(--muted); }
.msg-foto-nota { margin: 0; }
.msg-foto-nenhuma { margin: 0 0 10px; }

/* a prévia da mensagem no editor mostra o cartão com a foto, como o WhatsApp monta com o link */
.msg-balao .msg-cartao-prev { margin: -4px -8px 8px; border-radius: 10px; overflow: hidden; background: rgba(255,255,255,.7); }
.msg-balao .msg-cartao-prev img { display: block; width: 100%; height: auto; }
.msg-cartao-prev-txt { display: grid; gap: 2px; padding: 7px 10px 8px; font-size: 12.5px; line-height: 1.3; }
.msg-cartao-prev-txt span { color: var(--muted); }
.msg-cartao-prev-txt small { color: var(--muted); font-size: 11px; }
.msg-pop .msg-balao { white-space: normal; }
.msg-pop .msg-balao [data-previa] { white-space: pre-wrap; overflow-wrap: anywhere; }

/* hover na barra lateral: a regra antiga `.sidebar-nav a:hover` (style.css) força letra creme, que some no item selecionado (fundo claro) e numa barra clara.
   Com esta mais específica, a letra e o fundo seguem sempre as cores da barra e da seleção. */
/* nas telas ainda não convertidas entra o style-desktop.css, cuja `.sidebar-nav a` (letra azul-marinho, 0,1,1) vencia `.sidebar-item` e deixava
   o menu invisível sobre a barra azul-marinho (Produtos, Fechar pedido, Central de mensagens) */
.sidebar-nav .sidebar-item { color: var(--sb-texto); font-size: var(--sb-fs, 14px); padding: 8px 10px; border-radius: var(--r-sm); }
.sidebar-nav .sidebar-item:hover { background: var(--sb-hover); color: var(--sb-texto); }
.sidebar-nav .sidebar-item.ativo, .sidebar-nav .sidebar-item.ativo:hover { background: var(--sel-bg); color: var(--sel-tx); }
.sidebar-rodape .sidebar-item:hover { background: var(--sb-hover); color: var(--sb-texto); }

/* botão Sincronizar da barra lateral: menor e mais discreto */
.sidebar .sync-offline-block { padding: 8px 4px 6px; gap: 4px; }
.sidebar .sync-offline-btn { gap: 6px; padding: 6px 9px; font-size: 12px; font-weight: 500; border-width: 1px; border-radius: var(--r-sm); }
.sidebar .sync-offline-btn .icon svg { width: 13px; height: 13px; }
.sidebar .sync-offline-status { font-size: 9px; }

/* título de grupo do menu: a mesma cor parado e com o mouse em cima (só o fundo muda) */
.sidebar-nav .sidebar-grupo, .sidebar-nav .sidebar-grupo:hover, .sidebar-nav .sidebar-grupo:focus-visible { color: var(--sb-titulo); }
.sidebar-nav .sidebar-grupo:hover { background: var(--sb-hover); }

/* Configurações em setores: o setor em cima, as abas dele logo abaixo */
.cfg-setores { display: grid; grid-template-columns: repeat(auto-fit, minmax(176px, 1fr)); gap: 8px; margin: 0 0 10px; }
.cfg-setor { display: grid; gap: 1px; padding: 8px 14px; min-width: 0; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none; }
.cfg-setor:hover { border-color: var(--gold); text-decoration: none; }
.cfg-setor b { font: var(--peso-titulo) 14px var(--font-serif); }
.cfg-setor span { font-size: 11.5px; color: var(--muted); }
.cfg-setor.ativo { background: var(--ink); color: #fff; border-color: var(--ink); }
.cfg-setor.ativo span { color: rgba(255,255,255,.72); }
.cfg-setor:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
@media (max-width: 900px) { .cfg-setores { display: flex; overflow-x: auto; padding-bottom: 4px; } .cfg-setor { flex: none; } }

/* campo "Quem tem acesso" (públicos de campanha e promoção) */
.pub-opcoes { display: flex; flex-wrap: wrap; gap: 8px; }
.pub-op { display: inline-flex; align-items: center; gap: 9px; min-height: 40px; padding: 6px 14px 6px 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; font-size: 13px; color: var(--ink); }
.pub-op input { position: absolute; opacity: 0; pointer-events: none; }
.pub-op small { display: block; font-size: 11px; color: var(--muted); }
.pub-op-marca { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--line); display: inline-grid; place-items: center; flex: none; }
.pub-op input:checked + .pub-op-marca { background: var(--ink); border-color: var(--ink); }
.pub-op input:checked + .pub-op-marca::after { content: "✓"; color: var(--surface); font-size: 12px; font-weight: 700; line-height: 1; }
.pub-op:has(input:checked) { border-color: var(--ink); box-shadow: 0 0 0 2px var(--ink); }
.pub-op:has(input:focus-visible) { outline: 3px solid var(--gold); outline-offset: 2px; }
.pub-atalhos { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pub-atalhos button { height: 30px; padding: 0 12px; border-radius: 99px; border: 1px dashed var(--line); background: transparent; color: var(--muted); font: 600 12px var(--font-sans); cursor: pointer; }
.pub-atalhos button:hover { color: var(--ink); border-color: var(--ink); }
.pub-resumo { margin: 0; }
.pub-pilulas { display: flex; flex-wrap: wrap; gap: 5px; }
.promo-lote { max-height: 280px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.promo-lote-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--hair); font-size: 13px; cursor: pointer; }
.promo-lote-item[hidden] { display: none; }
.promo-lote-item span { flex: 1; min-width: 0; }
.cmp-publicos { margin: 2px 0 0; }

/* ---------- BANNER DAS PROMOÇÕES (topo do catálogo) ---------- */
.promo-vitrine { display: grid; gap: 14px; margin: 0 0 18px; }
.promo-faixa { border-radius: 18px; padding: 18px 18px 16px; background: radial-gradient(120% 140% at 100% 0%, rgba(232,179,60,.30) 0%, rgba(232,179,60,0) 55%), linear-gradient(135deg, #151B52 0%, #0A1130 72%); color: #F7F3EA; display: grid; gap: 14px; overflow: hidden; }
.promo-faixa-cab { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.promo-faixa-texto { display: grid; gap: 3px; min-width: 0; }
.promo-faixa-eyebrow { font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.promo-faixa-titulo { margin: 0; font-family: var(--font-serif); font-weight: var(--peso-titulo); font-size: 26px; line-height: 1.1; color: #fff; text-wrap: balance; }
.promo-faixa-sub { font-size: 12.5px; color: rgba(247,243,234,.72); }
.promo-faixa-selo { flex: none; min-width: 84px; padding: 10px 14px; border-radius: 16px; background: var(--gold); color: #0A1130; display: grid; place-items: center; text-align: center; transform: rotate(-4deg); box-shadow: 0 8px 20px -8px rgba(0,0,0,.5); }
.promo-faixa-selo b { font: var(--peso-titulo) 24px/1 var(--font-serif); }
.promo-faixa-selo span { font-size: 10px; font-weight: 800; letter-spacing: .2em; }
.promo-faixa-trilho { display: flex; gap: 12px; overflow-x: auto; padding: 2px 2px 8px; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: rgba(247,243,234,.3) transparent; }
.promo-card { flex: 0 0 168px; scroll-snap-align: start; display: grid; gap: 6px; align-content: start; padding: 10px; border-radius: 14px; background: #fff; color: var(--ink); text-decoration: none; box-shadow: 0 10px 24px -14px rgba(0,0,0,.6); }
.promo-card:hover { text-decoration: none; transform: translateY(-2px); }
.promo-card-foto { position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1; border-radius: 10px; background: #F1F1EF; overflow: hidden; }
.promo-card-foto img { width: 100%; height: 100%; object-fit: contain; }
.promo-card-sem { font: 600 34px var(--font-serif); color: var(--muted); }
.promo-card-pct { position: absolute; top: 6px; left: 6px; padding: 2px 8px; border-radius: 99px; background: var(--red); color: #fff; font-size: 11px; font-weight: 800; }
.promo-card-nome { font-size: 12.5px; line-height: 1.3; min-height: 2.6em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.promo-card-precos { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.promo-card-precos s { font-size: 11.5px; color: var(--muted); }
.promo-card-precos b { font-size: 17px; color: var(--green-ink); font-family: var(--font-serif); font-weight: var(--peso-titulo); }
.promo-card-vip { font-size: 11px; color: var(--gold-ink); }
.promo-card-mais { background: rgba(255,255,255,.08); color: #F7F3EA; box-shadow: none; place-content: center; text-align: center; border: 1px dashed rgba(247,243,234,.35); }
.promo-card-mais b { font: var(--peso-titulo) 28px var(--font-serif); color: var(--gold); }
.promo-card-mais span { font-size: 12px; }
@media (max-width: 900px) {
  .promo-faixa { padding: 14px 14px 12px; border-radius: 16px; }
  .promo-faixa-titulo { font-size: 20px; }
  .promo-faixa-selo { min-width: 70px; padding: 8px 10px; }
  .promo-faixa-selo b { font-size: 20px; }
  .promo-card { flex-basis: 142px; }
}
@media (prefers-reduced-motion: no-preference) { .promo-card { transition: transform .15s ease; } }

/* ==================================================================
   Jurídico (Financeiro → Jurídico): lista, ficha do caso e envio. Mobile primeiro.
   Filtros seguem a regra do projeto: um botão por grupo que abre um balão (.folha-filtro).
   ================================================================== */
.jur-topo { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.jur-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.jur-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
@media (min-width: 760px) { .jur-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.jur-kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; min-width: 0; display: grid; gap: 2px; }
.jur-kpi .v { font-family: var(--font-serif); font-size: 22px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.jur-kpi .l { font-size: 12px; color: var(--muted); }
.jur-kpi.destaque { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.jur-kpi.destaque .l { color: rgba(247, 243, 234, .75); }
.jur-filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; position: relative; }
.jur-fwrap { position: relative; }
.jur-fbtn { gap: 6px; }
.jur-fbtn b { font-weight: 600; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: bottom; }
.jur-caret { font-size: 10px; opacity: .7; }
.jur-fbtn[aria-expanded="true"] { border-color: var(--gold); background: var(--gold-soft); color: var(--ink); }
.jur-fpainel { top: calc(100% + 6px); left: 0; width: min(420px, calc(100vw - 32px)); align-items: flex-start; align-content: flex-start; gap: 6px; }
@media (max-width: 900px) { .jur-fpainel { position: absolute; left: 0; right: auto; bottom: auto; top: calc(100% + 6px); width: min(420px, calc(100vw - 32px)); } }
.jur-limpar { font-size: 13px; color: var(--muted); text-decoration: underline; }
.jur-busca { flex: 1 1 240px; min-width: 0; height: var(--h-control, 40px); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); color: var(--ink); padding: 0 14px; font: inherit; }
.jur-marcas { display: flex; flex-wrap: wrap; gap: 6px; }
.jur-grade { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) { .jur-grade { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
.jur-coluna { display: grid; gap: 12px; min-width: 0; }
.jur-par { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--hair); }
.jur-par:last-of-type { border-bottom: 0; }
.jur-linha { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.jur-linha .campo { flex: 1 1 160px; min-width: 0; }
.jur-dois { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 620px) { .jur-dois { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.jur-rolagem { overflow-x: auto; }
.jur-tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.jur-tabela th { text-align: left; font-size: 11.5px; color: var(--muted); font-weight: 700; padding: 6px 8px 6px 0; }
.jur-tabela td { padding: 8px 8px 8px 0; border-top: 1px solid var(--hair); font-variant-numeric: tabular-nums; vertical-align: top; }
.jur-tabela .dir, .jur-tabela th.dir { text-align: right; }
.jur-inline { display: inline; }
.jur-link { border: 0; background: transparent; color: var(--muted); text-decoration: underline; font: inherit; font-size: 12.5px; cursor: pointer; padding: 0; }
.jur-detalhes summary { list-style: none; cursor: pointer; display: inline-flex; }
.jur-detalhes summary::-webkit-details-marker { display: none; }
.jur-detalhes[open] summary { margin-bottom: 10px; }
.jur-tempo { list-style: none; margin: 0; padding: 0; display: grid; }
.jur-tempo li { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-top: 1px solid var(--hair); overflow-wrap: anywhere; }
.jur-doc { display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--sunken); }
.jur-doc a { font-weight: 700; overflow-wrap: anywhere; }
.jur-acoes-linha { display: flex; gap: 8px; flex-wrap: wrap; }
.jur-escolha { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); margin-bottom: 12px; }
@media (min-width: 620px) { .jur-escolha { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.jur-opcao { border: 2px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; background: var(--surface); color: inherit; font: inherit; text-align: left; cursor: pointer; display: grid; gap: 2px; }
.jur-opcao[aria-pressed="true"] { border-color: var(--gold); background: var(--gold-soft); }
.jur-bloco { border: 0; padding: 0; margin: 0 0 12px; min-width: 0; }
.jur-bloco[hidden] { display: none; }
.jur-busca-cliente { position: relative; display: grid; gap: 6px; }
.jur-sugestoes { position: absolute; z-index: 30; left: 0; right: 0; top: 68px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: 0 14px 34px -18px rgba(10, 17, 48, .5); max-height: 260px; overflow-y: auto; }
.jur-sugestoes[hidden] { display: none; }
.jur-sugestao { display: block; width: 100%; text-align: left; border: 0; background: transparent; color: var(--ink); font: inherit; padding: 10px 12px; cursor: pointer; border-top: 1px solid var(--hair); }
.jur-sugestao:first-child { border-top: 0; }
.jur-sugestao:hover { background: var(--sunken); }
.jur-interruptor { display: flex; align-items: flex-start; gap: 10px; background: var(--red-soft); border-radius: var(--r-md); padding: 10px 12px; }
.jur-interruptor input { margin-top: 3px; width: 18px; height: 18px; flex: none; }

/* Jurídico: menu "Ações" de cada cliente da lista */
.jur-caso { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
.jur-caso-info { text-decoration: none; color: inherit; display: grid; gap: 4px; min-width: 0; }
.jur-caso-lado { display: grid; gap: 6px; justify-items: end; align-content: start; }
.jur-awrap .jur-apainel { top: calc(100% + 6px); right: 0; left: auto; width: min(290px, calc(100vw - 32px)); display: grid; gap: 2px; padding: 8px; }
@media (max-width: 900px) { .jur-awrap .jur-apainel { position: absolute; right: 0; left: auto; bottom: auto; top: calc(100% + 6px); width: min(290px, calc(100vw - 32px)); } }
.jur-apainel form { margin: 0; }
.jur-acao { display: block; width: 100%; text-align: left; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 14px; padding: 10px 12px; border-radius: var(--r-sm, 8px); cursor: pointer; text-decoration: none; }
.jur-acao:hover { background: var(--sunken); }
.jur-acao.desligada { color: var(--muted); cursor: default; }
.jur-acao.desligada:hover { background: transparent; }
.jur-prova { display: flex; }
.jur-lista-provas { list-style: none; margin: 0; padding: 0; display: grid; }
.jur-lista-provas li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 8px; padding: 6px 0; border-top: 1px solid var(--hair); font-size: 13px; }
.jur-lista-provas li.tem span:first-child { color: var(--green-ink); font-weight: 700; }
.jur-lista-provas li.falta span:first-child { color: var(--muted); }
.jur-lista-provas li.falta { color: var(--muted); }

/* ---- nota de compra por XML (estoque/nf_xml*.html) */
.nfx-envio { border: 2px dashed var(--line); border-radius: 12px; padding: 22px 16px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; background: var(--surface); margin-block: 14px; }
.nfx-form { display: flex; flex-direction: column; gap: 14px; max-width: 560px; }
.nfx-sub { margin: 8px 0 0; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.nfx-cartao, .nfx-item { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.nfx-faixa, .nfx-item-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.nfx-chave { overflow-wrap: anywhere; }
.nfx-chip { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: var(--r-pill); }
.nfx-ok { background: var(--green-soft); color: var(--green-ink); }
.nfx-aviso-chip { background: var(--gold-soft); color: var(--gold-ink); }
.nfx-campo { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.nfx-campo select, .nfx-campo input, .nfx-busca { font: inherit; font-size: 14px; padding: 9px 10px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); width: 100%; }
.nfx-resultados { display: flex; flex-direction: column; gap: 4px; }
.nfx-achado { text-align: left; font: inherit; font-size: 13.5px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--sunken); color: var(--ink); cursor: pointer; }
.nfx-fator { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13.5px; }
.nfx-fator input { width: 76px; text-align: center; font: inherit; padding: 7px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.nfx-resultado { background: var(--gold-soft); border-radius: 9px; padding: 8px 10px; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.nfx-dup { display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; }
.nfx-opcao { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.nfx-opcao input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--gold); flex: none; }
.nfx-resumo { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.nfx-resumo .nao { color: var(--muted); }
.nfx-aviso { border-radius: 10px; padding: 10px 12px; font-size: 13.5px; background: var(--gold-soft); color: var(--gold-ink); }
.nfx-aviso-ok { background: var(--green-soft); color: var(--green-ink); }
.nfx-aviso-erro { background: var(--red-soft); color: var(--red); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }
.es-9.nfx-aviso { flex: 1 1 100%; }
.nfx-enviar { width: 100%; }
.es-43.es-43.es-43:not(#_) { flex-wrap: wrap; }
@media (max-width: 640px) { .es-41.es-41.es-41:not(#_) { flex-wrap: wrap; } .es-41.es-41.es-41 > .es-17.es-17.es-17:not(#_) { flex: 1 1 100%; } .es-41.es-41.es-41 > .es-nf-acoes:not(#_) { flex: 1 1 100%; justify-content: stretch; } .es-41.es-41.es-41 > .es-nf-acoes > *:not(#_) { flex: 1 1 0; text-align: center; justify-content: center; } }

.oc-aviso-desconto { border-radius: 10px; padding: 10px 12px; font-size: 13.5px; background: var(--gold-soft); color: var(--gold-ink); }

/* ---------- Tarefas do vendedor e Tarefas da equipe (templates/tarefas/) ---------- */
.tf-pagina { display: grid; gap: 14px; max-width: 760px; }
.tf-pagina h1 { margin-bottom: 0; }
.tf-pagina .me-sub { margin-top: 2px; }
.tf-resumo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tf-num { display: grid; gap: 1px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); color: var(--ink); text-decoration: none; }
.tf-num:hover { text-decoration: none; border-color: var(--gold); }
.tf-num b { font-family: var(--font-serif); font-weight: 500; font-size: 24px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tf-num span { font-size: 12px; color: var(--muted); }
.tf-num-atraso b { color: var(--red); }
.tf-num.ativo { border-color: var(--gold); background: var(--gold-soft); }
.tf-filtros { display: flex; align-items: center; gap: 10px; margin-bottom: 0; }
.cp-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 10px; padding: 0; background: none; border: 0; position: relative; }
.cp-filtros .p360-fwrap { position: static; }          /* o balão alinha pela esquerda da faixa: não passa da borda do celular */
.cp-filtros .pr-btn.ativo { border-color: var(--gold); background: var(--gold-soft); color: var(--gold-ink); }
.cp-filtros .folha-filtro.cp-balao { position: absolute; top: calc(100% + 6px); bottom: auto; left: 0; right: auto; width: min(380px, calc(100vw - 32px)); max-height: 70vh; overflow-y: auto;
  display: grid; gap: 12px; padding: 12px; flex-direction: initial; }
.cp-filtros .folha-filtro.cp-balao[hidden] { display: none; }
.cp-grupo { display: grid; gap: 6px; }
.cp-grupo .rotulo { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.cp-grupo .chip { height: 34px; font-size: 13px; }
.tf-limpar { font-size: 12.5px; color: var(--muted); text-decoration: underline; }
.tf-grupo { display: grid; gap: 8px; }
.tf-grupo-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 4px 2px 0; }
.tf-grupo-cab h2 { font-size: 17px; margin: 0; }
.tf-grupo-cab span { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tf-cartao { display: grid; gap: 9px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.tf-cartao.tf-espera { background: var(--sunken); }
.tf-cartao.tf-espera .tf-titulo { font-weight: 600; }
.tf-topo { display: flex; gap: 11px; align-items: flex-start; }
.tf-icone { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--sunken); border: 1px solid var(--hair); }
.tf-icone svg { width: 17px; height: 17px; fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tf-ic-admin { background: var(--gold-soft); border-color: transparent; }
.tf-texto { min-width: 0; flex: 1; }
.tf-titulo { font-weight: 700; font-size: 14.5px; line-height: 1.3; overflow-wrap: anywhere; }
.tf-desc { color: var(--muted); font-size: 12.5px; line-height: 1.4; margin-top: 2px; overflow-wrap: anywhere; }
.tf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tf-chip { display: inline-flex; align-items: center; font-size: var(--bal-fs); font-weight: 700; letter-spacing: .02em; padding: 3px 9px; border-radius: var(--r-pill); white-space: nowrap; }
.tf-chip-atraso { background: var(--bal-at-bg); color: var(--bal-at-tx); }
.tf-chip-hoje { background: var(--bal-de-bg); color: var(--bal-de-tx); }
.tf-chip-ok { background: var(--bal-ok-bg); color: var(--bal-ok-tx); }
.tf-chip-espera { background: var(--sunken); color: var(--muted); border: 1px solid var(--line); }
.tf-chip-app { background: var(--gold-soft); color: var(--gold-ink); }
.tf-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.tf-acoes form { margin: 0; }
.tf-btn { min-height: 38px; }
.tf-vazio { display: grid; gap: 4px; text-align: center; padding: 28px 12px; color: var(--muted); background: var(--surface); border: 1px dashed var(--line); border-radius: var(--r-lg); }
.tf-vazio b { font-family: var(--font-serif); font-weight: 500; font-size: 19px; color: var(--ink); }
/* admin */
.tf-equipe { max-width: 900px; }
.tf-nova { padding: 0; border: 0; background: none; box-shadow: none; }
.tf-nova > summary { list-style: none; display: inline-flex; cursor: pointer; }
.tf-nova > summary::-webkit-details-marker { display: none; }
.tf-nova[open] > summary { margin-bottom: 10px; }
.tf-nova-form { display: grid; gap: 12px; padding: 16px; background: var(--surface); border: 1px dashed var(--gold); border-radius: var(--r-lg); }
.tf-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.tf-campos .campo { display: grid; gap: 4px; min-width: 0; }
.tf-campos select, .tf-campos input { width: 100%; min-width: 0; }
.tf-largo { grid-column: 1 / -1; }
.tf-eq-vendedores { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.tf-eq-vend { display: grid; gap: 8px; align-content: start; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); color: var(--ink); text-decoration: none; }
.tf-eq-vend:hover { text-decoration: none; border-color: var(--gold); }
.tf-eq-vend.ativo { border-color: var(--gold); background: var(--gold-soft); }
.tf-eq-nome { font-weight: 800; font-size: 15px; }
.tf-eq-nums { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--muted); }
.tf-eq-nums b { display: block; font-family: var(--font-serif); font-weight: 500; font-size: 22px; color: var(--ink); font-variant-numeric: tabular-nums; }
.tf-eq-at b { color: var(--red); }
.tf-eq-vend .tf-chip { justify-self: start; }
.tf-feitas { display: grid; gap: 0; padding: 4px 14px; }
.tf-feita { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 9px 0; border-bottom: 1px solid var(--hair); font-size: 13px; }
.tf-feita:last-child { border-bottom: 0; }
.tf-zap-hoje { display: grid; gap: 4px; }
/* contador vermelho de Tarefas na barra de baixo e no menu */
.barra-inferior a { position: relative; }
.tf-badge { position: absolute; top: 2px; left: calc(50% + 4px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--red); color: #fff; font-size: 10.5px; font-weight: 800; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; }
.tf-ini { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 14px; background: var(--gold-soft); border: 1px solid var(--gold); border-radius: var(--r-lg); color: var(--ink); text-decoration: none; }
.tf-ini:hover { text-decoration: none; }
.tf-ini-n { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); font-family: var(--font-serif); font-size: 18px; font-variant-numeric: tabular-nums; }
.tf-ini-t { display: grid; gap: 1px; min-width: 0; flex: 1; }
.tf-ini-t span { font-size: 12.5px; color: var(--gold-ink); }
.tf-ini-seta { font-size: 22px; color: var(--gold-ink); }
.pl-pedir-provas { flex-wrap: wrap; align-items: center; justify-content: space-between; }
.pl-pedir-provas span { flex: 1 1 260px; }
.pl-pedir-provas form { margin: 0; }
.tf-filtros .p360-fbtn, .tf-filtros .p360-fbtn:hover, .tf-filtros .p360-fbtn:focus, .cp-filtros .p360-fbtn, .cp-filtros .p360-fbtn:hover, .cp-filtros .p360-fbtn:focus { background: var(--surface); color: var(--ink); }
.tf-filtros .p360-fbtn.ativo, .tf-filtros .p360-fbtn[aria-expanded="true"], .cp-filtros .p360-fbtn.ativo, .cp-filtros .p360-fbtn[aria-expanded="true"] { background: var(--gold-soft); border-color: var(--gold); color: var(--ink); }
@media (max-width: 900px) {          /* o balão abre logo abaixo do botão, como no computador (não no rodapé, onde ficava fora da tela) */
  .tf-filtros .folha-filtro.p360-fpainel, .cp-filtros .folha-filtro.p360-fpainel { position: absolute; top: calc(100% + 6px); bottom: auto; left: 0; right: auto; width: min(420px, calc(100vw - 32px)); }
}
.tf-filtros .folha-filtro.p360-fpainel, .cp-filtros .folha-filtro.p360-fpainel { flex-direction: column; flex-wrap: nowrap; align-items: stretch; max-height: none; gap: 6px; width: min(300px, calc(100vw - 32px)); }
.tf-filtros .p360-fpainel .chip, .cp-filtros .p360-fpainel .chip { justify-content: flex-start; height: 38px; font-size: 13.5px; }
/* aba Crédito na ficha (balão e tela): mesma margem e espaçamento das outras abas (.fc-53/.fc-78) — antes os blocos encostavam na borda do balão */
.cc-raiz.cc-raiz.cc-raiz:not(#_) { padding: 16px 20px 18px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; min-height: 0; }
.cc-raiz.cc-raiz.cc-raiz:not(#_) > .cs-bloco, .cc-raiz.cc-raiz.cc-raiz:not(#_) > .cc-cartao, .cc-raiz.cc-raiz.cc-raiz:not(#_) .cs-bloco > .cc-cartao { margin-bottom: 0; }
.cc-raiz .cc-botoes form { margin: 0; }
/* filtros da lista de Pedidos (pedidos_filtros.py): busca + botão "Filtros" com balão de grupos, como em Compras e Produtos */
.pf-barra { display: grid; gap: 8px; margin: 0 0 12px; }
@media (min-width: 900px) { .pf-barra { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); align-items: center; } }
.pf-busca { margin: 0; }
.pf-filtros { margin: 0; }
.pf-resumo { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46ch; }
.pf-datas { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin-top: 4px; }
.pf-datas .campo { display: grid; gap: 2px; font-size: 12px; color: var(--muted); }
.pf-filtros .folha-filtro.cp-balao { width: min(460px, calc(100vw - 32px)); }
.pf-exportar { display: flex; justify-content: flex-end; margin: -4px 0 10px; }
.pf-datas .campo { flex: 1 1 120px; min-width: 0; }
.pf-datas .campo input { width: 100%; min-width: 0; box-sizing: border-box; }

/* correções do admin nos cartões de Tarefas da equipe e na tela Corrigir rota (correcoes_admin.py) */
.tf-corrigir { margin-top: 8px; border-top: 1px dashed var(--hair); padding-top: 8px; }
.tf-corrigir > summary { cursor: pointer; font-weight: 700; font-size: 13px; color: var(--gold-ink); list-style: none; }
.tf-corrigir > summary::-webkit-details-marker { display: none; }
.tf-corrigir > summary::before { content: "✎ "; }
.tf-corrigir-corpo { display: grid; gap: 12px; margin-top: 10px; }
.tf-form { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.tf-form .campo { display: grid; gap: 3px; font-size: 12px; color: var(--muted); font-weight: 600; }
.tf-form .campo input, .tf-form .campo select { font: inherit; font-size: 14px; color: var(--ink); padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); min-width: 0; width: 100%; box-sizing: border-box; }
.tf-perigo { color: var(--red); }
.cr-parada .tf-acoes { flex-wrap: wrap; }
.cr-data { display: flex; gap: 6px; align-items: center; }
.cr-data input { font: inherit; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); }

/* ---- Indique e ganhe (indicacoes.py): banner da loja, faixa de quem chegou pelo link e a página do cliente ---- */
.ig-banner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; background: var(--ink); color: var(--cream);
  border-radius: var(--r-lg); padding: 16px 18px; margin: 0 0 18px; text-decoration: none; box-shadow: var(--shadow); }
.ig-banner:hover { filter: brightness(1.06); }
.ig-banner-icone { width: 52px; height: 52px; border-radius: 50%; background: var(--gold); color: #0A1130; display: grid; place-items: center; }
.ig-banner-icone svg { width: 28px; height: 28px; }
.ig-banner-texto { display: grid; gap: 3px; min-width: 0; }
.ig-banner-eyebrow { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.ig-banner-titulo { font-family: var(--font-serif); font-weight: 500; font-size: 20px; line-height: 1.2; }
.ig-banner-sub { font-size: 13px; opacity: .8; line-height: 1.45; }
.ig-banner-acao { display: grid; gap: 6px; justify-items: end; }
.ig-banner-saldo { font-size: 12.5px; opacity: .9; }
.ig-banner-saldo b { color: var(--gold); }
@media (max-width: 640px) {
  .ig-banner { grid-template-columns: auto minmax(0, 1fr); }
  .ig-banner-acao { grid-column: 1 / -1; justify-items: stretch; }
  .ig-banner-acao .btn { justify-content: center; }
}
.ig-faixa { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; background: var(--gold-soft); color: var(--gold-ink);
  border: 1px solid var(--gold); border-radius: var(--r-md); padding: 12px 14px; margin: 0 0 16px; font-size: 13.5px; line-height: 1.45; }
.ig-pagina { max-width: 720px; display: grid; gap: 16px; }
.ig-pagina h1 { margin: 0; }
.ig-destaque { background: var(--ink); color: var(--cream); border-radius: var(--r-lg); padding: 18px; display: grid; gap: 10px; }
.ig-destaque p { margin: 0; font-size: 13.5px; line-height: 1.5; opacity: .9; }
.ig-destaque-eyebrow { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.ig-destaque-valor { font-family: var(--font-serif); font-size: 34px; font-weight: 500; line-height: 1; }
.ig-link { display: flex; gap: 8px; align-items: center; background: var(--surface); border-radius: var(--r-md); padding: 6px 6px 6px 12px; min-width: 0; }
.ig-link input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink); font: inherit; font-weight: 700; font-size: 14px; }
.ig-zap { justify-content: center; min-height: var(--h-control-mobile); }
.ig-aviso { background: rgba(232,179,60,.18); border-radius: var(--r-sm); padding: 8px 10px; }
.ig-passos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; text-align: center; font-size: 12.5px; }
.ig-passos div { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 6px; line-height: 1.35; }
.ig-passos b { display: block; font-family: var(--font-serif); font-size: 20px; color: var(--gold-ink); }
.ig-lista { padding: 14px 16px; }
.ig-lista h2 { margin: 0 0 6px; font-size: 17px; }
.ig-linha { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid var(--hair); font-size: 13.5px; }
.ig-linha:first-of-type { border-top: 0; }
.ig-linha > div { display: grid; gap: 2px; min-width: 0; }
.ig-entra { color: var(--green-ink); font-weight: 700; }
.ig-sai { color: var(--muted); font-weight: 700; }
.ig-regras { line-height: 1.5; }
.ig-usar { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; background: var(--green-soft); border-radius: var(--r-md); padding: 12px; font-size: 13.5px; line-height: 1.45; margin: 10px 0; }
.ig-usar input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--green); }
.t-indicacoes { --cols: minmax(130px,1fr) minmax(150px,1.2fr) 92px 120px 96px 150px; }

/* ---- Banner Indique e ganhe (partials/_indique_banner.html): bolha dourada, a tosadora com o cachorro e o lado azul com o botão ---- */
.igb { position: relative; display: grid; grid-template-columns: 34% 30% 36%; align-items: stretch; min-height: 210px; margin: 0 0 18px;
  background: #FFFFFF; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); }
.igb::before { content: ""; position: absolute; left: -6%; top: -18%; width: 64%; height: 140%; background: var(--gold); border-radius: 46% 54% 50% 50% / 58% 48% 52% 42%; }
.igb::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 40%; background: #0A1130; border-radius: 120px 0 0 120px / 50% 0 0 50%; }
.igb > * { position: relative; z-index: 1; }
.igb-oferta { display: grid; align-content: center; justify-items: center; gap: 6px; padding: 18px 10px 18px 22px; text-align: center; color: #0A1130; }
.igb-pct { font-family: var(--font-serif); font-weight: 800; font-size: 44px; line-height: .95; letter-spacing: -.01em; }
.igb-pct small { display: block; font-size: 20px; font-weight: 700; letter-spacing: 0; }
.igb-sub { font-family: var(--font-serif); font-weight: 700; font-size: 17px; text-transform: lowercase; }
.igb-caixa { background: #FFFFFF; border: 2px dashed #0A1130; border-radius: 10px; padding: 7px 14px; font-family: var(--font-serif); font-weight: 800; font-size: 16px; letter-spacing: .02em; }
.igb-letra { font-size: 11px; font-weight: 700; text-transform: uppercase; line-height: 1.35; max-width: 26ch; }
.igb-foto { display: flex; align-items: flex-end; justify-content: center; z-index: 2; margin: 0 -8%; }
.igb-foto img { width: 100%; height: auto; max-height: 260px; object-fit: contain; object-position: bottom; display: block; }
.igb-lado { display: grid; align-content: center; justify-items: start; gap: 10px; padding: 18px 22px 18px 9%; color: var(--gold); }
.igb-logo { width: 96px; height: auto; }
.igb-titulo { font-family: var(--font-serif); font-weight: 800; font-size: 26px; line-height: 1.08; text-wrap: balance; }
.igb-botao { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 22px; border-radius: 999px; background: var(--gold); color: #0A1130;
  font-weight: 800; font-size: 15px; text-decoration: none; box-shadow: 0 6px 16px -8px rgba(0,0,0,.5); }
.igb-botao:hover { filter: brightness(1.06); }
.igb-botao:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 2px; }
/* celular (19/10/2026, pedido do dono): faixa fina azul-marinho com TODA a informação — o título, "5% em produtos" com o código
   (ou o crédito), a regra e o botão "Indicar agora". Saem só a foto e o logo, que eram enfeite e ocupavam a primeira tela. */
@media (max-width: 700px) {
  .igb { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "titulo botao" "oferta oferta"; gap: 8px 10px; min-height: 0;
    padding: 12px 14px; border-radius: 16px; background: #0A1130; overflow: hidden; }
  .igb::before, .igb::after, .igb-foto, .igb-logo, .igb-sub { display: none; }
  .igb-lado { display: contents; }
  .igb-titulo { grid-area: titulo; align-self: center; font-size: 15px; line-height: 1.2; color: var(--gold); }
  .igb-botao { grid-area: botao; align-self: center; min-height: 36px; padding: 0 14px; font-size: 13px; }
  .igb-oferta { grid-area: oferta; grid-template-columns: auto minmax(0, 1fr); align-items: center; justify-items: start; gap: 6px 10px;
    padding: 0; text-align: left; color: #F7F3EA; }
  .igb-pct { font-size: 22px; color: var(--gold); white-space: nowrap; }
  .igb-pct small { display: inline; font-size: 13px; color: #F7F3EA; margin-left: 2px; }
  .igb-caixa { justify-self: start; font-size: 13px; padding: 4px 10px; border-color: var(--gold); color: #0A1130; overflow-wrap: anywhere; }
  .igb-letra { grid-column: 1 / -1; max-width: none; text-transform: none; font-size: 11.5px; font-weight: 600; line-height: 1.4; color: rgba(247,243,234,.82); }
}
}
/* Indique e ganhe no computador: duas colunas (crédito e link | indicações e extrato) */
.ig-grade, .ig-col { display: grid; gap: 16px; align-content: start; min-width: 0; }
@media (min-width: 901px) {
  .ig-pagina { max-width: 1120px; }
  .ig-grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 20px; }
  .ig-destaque { padding: 24px; }
  .ig-destaque-valor { font-size: 42px; }
}
.ig-extrato-sub { margin: -2px 0 6px; font-size: 12.5px; }
.ig-riscado { text-decoration: line-through; opacity: .6; }
.ig-total { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 10px; font-size: 14.5px; }
.t-ig-extrato { --cols: 92px minmax(130px,1fr) minmax(180px,1.4fr) 110px 120px; }
[data-ig-ajuste] .campo { position: relative; }
[data-ig-ajuste] .busca-sugestoes { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; }
.ig-escolhido { color: var(--green-ink); font-weight: 600; }

/* ===== Início do admin (admin/inicio.html, inicio_admin.py) — o jeito do Início do vendedor; no computador em duas colunas ===== */
.ia-pagina { display: grid; gap: 14px; }
.ia-grade { display: grid; gap: 14px; }
.ia-col { display: grid; gap: 14px; align-content: start; min-width: 0; }
@media (min-width: 901px) { .ia-grade { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 22px; } }
.ia-hero { border-radius: 18px; padding: 16px 17px; background: var(--ink); color: var(--cream); }
.ia-hero-rotulo { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: rgba(247,243,234,.55); }
.ia-hero-linha { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin: 6px 0 12px; }
.ia-hero-valor { font-family: var(--font-serif); font-size: 34px; line-height: 1; color: var(--gold); font-weight: var(--peso-titulo); }
.ia-hero-nota { font-size: 12px; color: rgba(247,243,234,.6); }
.ia-hero-trilho { height: 7px; border-radius: 20px; background: rgba(247,243,234,.16); overflow: hidden; }
.ia-hero-barra { height: 100%; background: linear-gradient(90deg, #C8922A, #E8B33C); border-radius: 20px; }
.ia-hero-pe { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 8px; font-size: 11px; color: rgba(247,243,234,.62); }
.ia-hero-pe a { color: var(--gold); font-weight: 700; text-decoration: none; }
.ia-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ia-tile { padding: 13px 14px; border: 1px solid var(--line); background: var(--surface); border-radius: 16px; text-decoration: none; color: var(--ink); display: block; min-width: 0; }
.ia-tile-icone { width: 32px; height: 32px; border-radius: 10px; background: var(--gold-soft); color: var(--gold-ink); display: flex; align-items: center; justify-content: center; margin-bottom: 9px; }
.ia-tile-icone svg { width: 17px; height: 17px; }
.ia-tile-icone-erro { background: var(--red-soft); color: var(--red); }
.ia-tile-icone-ok { background: var(--green-soft); color: var(--green-ink); }
.ia-tile-valor { display: block; font-family: var(--font-serif); font-size: 19px; color: var(--ink); font-weight: var(--peso-titulo); }
.ia-tile-nota { display: block; font-size: 11.5px; color: var(--muted); }
.ia-secao { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 4px 2px 9px; }
.ia-secao-titulo { font-family: var(--font-serif); font-size: 19px; font-weight: var(--peso-titulo); }
.ia-secao a { font-size: 12.5px; font-weight: 700; color: var(--gold-ink); text-decoration: none; }
.ia-lista { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.ia-item, .ia-vend { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 11px 13px; border-top: 1px solid var(--hair); text-decoration: none; color: var(--ink); }
.ia-item:first-child, .ia-vend:first-child { border-top: 0; }
.ia-n { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; background: var(--gold-soft); color: var(--gold-ink); }
.ia-n-erro { background: var(--red-soft); color: var(--red); }
.ia-n-ok { background: var(--green-soft); color: var(--green-ink); }
.ia-item-t, .ia-vend-t { min-width: 0; }
.ia-item-t b, .ia-vend-t b { display: block; font-size: 13.5px; }
.ia-item-t > span, .ia-vend-t > span { display: block; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ia-seta { color: var(--muted); font-size: 18px; }
.ia-av { width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: var(--cream); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.ia-vend-vazio { grid-template-columns: minmax(0, 1fr); }      /* sem vendedor: o aviso ocupa a linha toda (no lugar do avatar ficava "Nen…") */
.ia-vend-v { text-align: right; }
.ia-vend-v b { display: block; font-size: 13.5px; }
.ia-vend-v span { font-size: 11px; color: var(--muted); }
.ia-pill { display: inline-block; font-size: 10px; padding: 1px 7px; border-radius: 10px; background: var(--green-soft); color: var(--green-ink); font-weight: 700; }
.ia-pill-off { background: var(--sunken); color: var(--muted); }
.ia-atalhos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ia-atalho { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 11px 4px 9px; display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-align: center; font-size: 11.5px; line-height: 1.2; color: var(--ink); text-decoration: none; min-width: 0; }
.ia-atalho svg { width: 30px; height: 30px; padding: 6px; border-radius: 9px; background: var(--gold-soft); color: var(--gold-ink); }

/* "Já paguei": comprovantes dos clientes em Pagamentos a conferir (comprovantes_pagamento.py) */
.jp-adm { margin-top: 14px; }
.jp-item { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 16px; padding-top: 14px; border-top: 1px solid var(--hair); }
.jp-item:first-of-type { border-top: 0; padding-top: 0; }
@media (max-width: 700px) { .jp-item { grid-template-columns: minmax(0, 1fr); } }
.jp-arquivos { display: grid; gap: 8px; align-content: start; }
.jp-arquivos img { width: 100%; max-height: 300px; object-fit: contain; background: var(--sunken); border: 1px solid var(--line); border-radius: var(--r-md); display: block; }
.jp-arquivo-pdf { display: flex; align-items: center; justify-content: center; min-height: 64px; border: 1px dashed var(--line); border-radius: var(--r-md); color: var(--ink); font-weight: 700; text-decoration: none; background: var(--sunken); }
.jp-dados { display: grid; gap: 10px; min-width: 0; align-content: start; }
.jp-kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; margin: 0; font-size: 13px; }
.jp-kv dt { color: var(--muted); }
.jp-kv dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.jp-dados form { display: grid; gap: 8px; margin: 0; }
.jp-recusar summary { list-style: none; cursor: pointer; width: max-content; }
.jp-recusar summary::-webkit-details-marker { display: none; }
.jp-recusar[open] summary { margin-bottom: 8px; }
.jp-btn-recusar { color: var(--red); border-color: rgba(156,74,60,.35); }

/* Balões de Filtros de Pedidos e Compras: altura limitada e rolagem dentro do balão. A regra ".cp-filtros .folha-filtro.p360-fpainel { max-height: none }"
   acima tirava o limite e, no celular, o balão de Pedidos passava de 1.700px: o fim dele ficava fora da tela. */
.cp-filtros .folha-filtro.p360-fpainel.cp-balao { max-height: 70vh; overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 900px) { .cp-filtros .folha-filtro.p360-fpainel.cp-balao { max-height: 55vh; } }
/* Jurídico no celular: o balão alinha pela esquerda da faixa de filtros (como em Compras); antes o de Origem, aberto a partir do 2º botão, passava da borda direita */
@media (max-width: 900px) { .jur-filtros .jur-fwrap { position: static; } }

/* ===== Empréstimos de produtos (templates/emprestimos/, 16/10/2026) ===== */
.emp-pagina { display: grid; gap: 12px; max-width: 760px; }
.emp-pagina h1 { margin-bottom: 0; }
.emp-pagina .me-sub { margin-top: 0; }
.emp-voltar { font-size: 12.5px; color: var(--muted); text-decoration: none; }
.emp-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 8px; }
.emp-kpi { display: grid; gap: 1px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.emp-kpi b { font-family: var(--font-serif); font-weight: 500; font-size: 22px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.emp-kpi span { font-size: 12px; color: var(--muted); }
.emp-kpi-ruim b { color: var(--red); }
.emp-kpi-aviso { border-color: var(--gold); background: var(--gold-soft); }
.emp-abas { display: flex; gap: 8px; }
.emp-cartao { display: grid; gap: 7px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); color: var(--ink); text-decoration: none; }
.emp-cartao:hover { text-decoration: none; border-color: var(--gold); }
.emp-lin { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.emp-nome { font-weight: 700; font-size: 14.5px; min-width: 0; overflow-wrap: anywhere; }
.emp-apoio { font-size: 12px; color: var(--muted); margin: 0; }
.emp-valor { font-family: var(--font-serif); font-size: 17px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.emp-chip { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: var(--r-pill); white-space: nowrap; }
.emp-chip-ok { background: var(--green-soft); color: var(--green-ink); }
.emp-chip-aviso { background: var(--gold-soft); color: var(--gold-ink); }
.emp-chip-ruim { background: var(--red-soft); color: var(--red); }
.emp-chip-azul { background: rgba(122,134,184,.16); color: #3B4A8C; }
.emp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.emp-barra { height: 6px; border-radius: 6px; background: var(--hair); overflow: hidden; }
.emp-barra i { display: block; height: 100%; width: var(--pct, 0%); background: var(--green); }
.emp-cab { display: grid; gap: 6px; }
.emp-num { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.emp-obs { margin: 0; font-size: 13px; padding: 8px 11px; background: var(--sunken); border-radius: var(--r-md); }
.emp-form { display: grid; gap: 12px; }
.emp-bloco { display: grid; gap: 0; padding: 4px 14px 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.emp-bloco-t { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; font-weight: 700; font-size: 13.5px; padding: 8px 0 4px; }
.emp-bloco .emp-tudo { justify-self: start; margin-top: 8px; }
.emp-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid var(--hair); }
.emp-bloco > .emp-item:first-child, .emp-bloco-t + .emp-item { border-top: 0; }
.emp-itens .emp-item { grid-template-columns: minmax(0, 1fr) 112px 30px; }
.emp-item .stepper { width: 112px; }
.emp-item-nome { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.emp-tirar { width: 30px; height: 30px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--muted); font-size: 18px; cursor: pointer; }
.emp-tirar:hover { background: var(--red-soft); color: var(--red); }
.emp-itens { display: grid; padding: 0 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.emp-itens > .emp-apoio { padding: 12px 0; }
.emp-itens > .emp-item:first-of-type { border-top: 0; }
.emp-busca-campo { position: relative; }
.emp-sugestoes { position: absolute; top: 100%; left: 0; right: 0; z-index: 30; margin-top: 4px; display: grid; max-height: 300px; overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow); }
.emp-sugestoes[hidden] { display: none; }
.emp-sug { display: grid; gap: 1px; text-align: left; padding: 9px 12px; border: 0; border-top: 1px solid var(--hair); background: transparent; color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; }
.emp-sug:first-child { border-top: 0; }
.emp-sug:hover, .emp-sug:focus-visible { background: var(--sunken); }
.emp-sug span, .emp-sug-vazio { font-size: 11.5px; color: var(--muted); }
.emp-sug-vazio { padding: 10px 12px; }
.emp-acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.emp-acoes .btn { white-space: normal; height: auto; min-height: var(--h-control); padding-block: 8px; }
.emp-recusar { padding-top: 6px; border-top: 1px dashed var(--line); }
.emp-erro form { margin-top: 8px; }
.emp-hist { display: grid; gap: 6px; font-size: 12px; color: var(--muted); padding: 4px 2px; }
.emp-hist b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.emp-pendente { color: var(--red); font-weight: 700; }
@media (max-width: 900px) { .emp-item .stepper { height: var(--h-control-mobile); } .emp-tirar { width: 36px; height: 36px; } .emp-itens .emp-item { grid-template-columns: minmax(0, 1fr) 112px 36px; } }
@media (max-width: 380px) { .emp-acoes { grid-template-columns: 1fr; } }
.emp-falta { color: var(--gold-ink); font-weight: 700; }
.emp-ja-saiu small { display: block; color: var(--muted); font-size: 11.5px; }
.emp-pagina .campo[hidden] { display: none; }
/* Acordo: toda a dívida / só vencidos / escolher e o que foi para o Tiny (templates/admin/acordo_*.html, 16/10/2026) */
.ac-modos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--surface); }
.ac-modo { text-align: center; padding: 9px 4px; font-size: 12.5px; font-weight: 700; color: var(--muted); text-decoration: none; line-height: 1.25; }
.ac-modo + .ac-modo { border-left: 1px solid var(--line); }
.ac-modo:hover { text-decoration: none; background: var(--sunken); }
.ac-modo.ativo { background: var(--gold-soft); color: var(--gold-ink); box-shadow: inset 0 0 0 1px var(--gold); }
.ac-grupo { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding-top: 6px; }
.ac-passos { display: grid; gap: 9px; }
.ac-passo { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 9px; align-items: start; font-size: 13px; }
.ac-bola { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--green-soft); color: var(--green-ink); }
.ac-bola.esp { background: var(--gold-soft); color: var(--gold-ink); }
.ac-bola.erro { background: var(--red-soft); color: var(--red); }
.ac-velho { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--hair); font-size: 13px; }
.ac-velho:first-of-type { border-top: 0; }
.ac-selo { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: var(--r-pill); background: #3A3F52; color: #E9EAF0; white-space: nowrap; }
/* caso do Jurídico no celular: a coluna seguia a largura do campo de arquivo e a tela passava da borda (16/10/2026) */
.jur-coluna { grid-template-columns: minmax(0, 1fr); }
.jur-coluna input[type="file"] { max-width: 100%; min-width: 0; }
.ac-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ac-parcelas { display: grid; gap: 0; }
.ac-parcela { display: grid; grid-template-columns: 64px minmax(0, 1fr) 112px; gap: 8px; align-items: center; padding: 7px 0; border-top: 1px solid var(--hair); font-size: 13px; }
.ac-parcela:first-child { border-top: 0; }
.ac-parcela input { width: 100%; min-width: 0; height: var(--h-control); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 0 8px; font: inherit; font-size: 13px; background: var(--surface); color: var(--ink); box-sizing: border-box; }
.ac-parcela input:focus { outline: none; border-color: var(--gold); }
.ac-parcela-rot { font-weight: 700; }
.ac-parcela.ac-parcela-total { grid-template-columns: minmax(0, 1fr) auto; }
@media (max-width: 900px) { .ac-parcela input { height: var(--h-control-mobile); } .ac-parcela { grid-template-columns: 56px minmax(0, 1fr) 100px; } }
/* Jurídico com os acordos (16/10/2026): 5 números no topo (o 1º ocupa a linha no celular) e as cartas de anuência recolhidas no fim */
@media (min-width: 760px) { .jur-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 759px) { .jur-kpis .jur-kpi.destaque { grid-column: 1 / -1; } }
.jur-cartas { margin-top: 14px; }
.jur-cartas > summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.jur-cartas > summary::-webkit-details-marker { display: none; }
.jur-cartas[open] > summary { border-bottom: 1px solid var(--hair); }
/* Compras → pedido de compra (17/10/2026): quantidade editável, "×" para tirar o item e o resumo do pedido */
.cp-comprar { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.cp-qtd { width: 64px; height: 32px; text-align: right; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 0 6px; font: inherit; font-size: 13px; background: var(--surface); color: var(--ink); }
.cp-qtd:focus { outline: none; border-color: var(--gold); }
.cp-tirar { width: 28px; height: 28px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; }
.cp-tirar:hover { background: var(--red-soft); color: var(--red); }
.cp-linha.cp-tirada { opacity: .45; }
.cp-linha.cp-tirada .celula-texto { text-decoration: line-through; }
.cp-gerar { flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.cp-recentes { margin-top: 14px; }
.cp-recentes > summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 10px; }
.cp-recentes > summary::-webkit-details-marker { display: none; }
@media (max-width: 900px) { .cp-qtd { height: var(--h-control-mobile); width: 72px; } .cp-tirar { width: 40px; height: 40px; } }
.cp-rot { margin-right: auto; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
/* Compras: foto de cada produto, "adicionar produto" e o PDF dos pedidos gerados (17/10/2026) */
.cp-produto { display: flex !important; align-items: center; gap: 10px; min-width: 0; }
.cp-produto-txt { min-width: 0; flex: 1; }
.cp-foto { width: 44px; height: 44px; flex: none; border-radius: var(--r-sm); object-fit: contain; background: #fff; border: 1px solid var(--hair); }
.cp-sem-foto { display: inline-block; background: var(--sunken); }
.cp-adicionar { position: relative; margin: 0 0 12px; max-width: 520px; }
.cp-add-sugestoes { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; margin-top: 4px; display: grid; max-height: 340px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow); }
.cp-add-sugestoes[hidden] { display: none; }
.cp-add-item { display: flex; align-items: center; gap: 10px; text-align: left; padding: 8px 10px; border: 0; border-top: 1px solid var(--hair); background: transparent; color: var(--ink); font: inherit; cursor: pointer; }
.cp-add-item:first-child { border-top: 0; }
.cp-add-item:hover { background: var(--sunken); }
.cp-add-txt { display: grid; gap: 1px; min-width: 0; font-size: 13px; }
.cp-add-txt small { font-size: 11.5px; color: var(--muted); }
.cp-add-vazio { padding: 10px 12px; font-size: 12.5px; color: var(--muted); }
.cp-linha.cp-adicionada { box-shadow: inset 3px 0 0 var(--gold); }
.cp-recentes .pv-linha { grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; }
.cp-recentes .pv-linha.cp-novo { background: var(--gold-soft); border-radius: var(--r-sm); padding-left: 8px; padding-right: 8px; }
@media (max-width: 900px) { .tabela.tabela-empilha .linha:not(.cab) > .cp-produto { display: flex !important; } .cp-recentes .pv-linha { grid-template-columns: minmax(0, 1fr) auto; } }
/* Compras no celular (17/10/2026): cada produto compacto, em vez do cartão alto com uma linha por informação —
   foto e nome em cima; embaixo cobertura, saldo e venda/dia numa linha, a quantidade à direita; fornecedor e custo na última linha */
@media (max-width: 900px) {
  .tabela.tabela-empilha { gap: 6px; }
  .tabela.tabela-empilha .linha.cp-linha:not(.cab) {
    display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; column-gap: 10px; row-gap: 3px; padding: 8px 10px; box-shadow: none;
    grid-template-areas: "prod prod prod prod" "cob saldo venda qtd" "forn forn custo qtd"; align-items: center; }
  .tabela.tabela-empilha .linha.cp-linha:not(.cab) > * { display: flex; align-items: center; gap: 4px; padding: 0; border: 0; min-height: 0; font-size: 12px; text-align: left !important; justify-content: flex-start; }
  .tabela.tabela-empilha .linha.cp-linha:not(.cab) > *::before { font-size: 10px; letter-spacing: 0; text-transform: none; }
  .tabela.tabela-empilha .linha.cp-linha:not(.cab) > :nth-child(1) { grid-area: prod; padding: 0 0 2px; font-size: 13px; }
  .tabela.tabela-empilha .linha.cp-linha:not(.cab) > :nth-child(2) { grid-area: forn; }
  .tabela.tabela-empilha .linha.cp-linha:not(.cab) > :nth-child(2)::before,
  .tabela.tabela-empilha .linha.cp-linha:not(.cab) > :nth-child(3)::before,
  .tabela.tabela-empilha .linha.cp-linha:not(.cab) > :nth-child(7)::before { content: none; }
  .tabela.tabela-empilha .linha.cp-linha:not(.cab) > :nth-child(3) { grid-area: cob; }
  .tabela.tabela-empilha .linha.cp-linha:not(.cab) > :nth-child(4) { grid-area: saldo; }
  .tabela.tabela-empilha .linha.cp-linha:not(.cab) > :nth-child(5) { grid-area: venda; }
  .tabela.tabela-empilha .linha.cp-linha:not(.cab) > :nth-child(6) { grid-area: qtd; justify-content: flex-end; }
  .tabela.tabela-empilha .linha.cp-linha:not(.cab) > :nth-child(7) { grid-area: custo; font-weight: 600; }
  .tabela.tabela-empilha .linha.cp-linha:not(.cab) > :nth-child(7) .apoio { display: none; }
  .tabela.tabela-empilha .linha.cp-linha .cp-rot { display: none; }
  .tabela.tabela-empilha .linha.cp-linha .cp-foto { width: 38px; height: 38px; }
  .tabela.tabela-empilha .linha.cp-linha .etiqueta { font-size: 10.5px; padding: 1px 7px; }
  .tabela.tabela-empilha .linha.cp-linha .cp-qtd { height: 38px; width: 62px; }
  .tabela.tabela-empilha .linha.cp-linha .cp-tirar { width: 34px; height: 38px; }
}
/* Compras no computador (17/10/2026): mais espaço para o nome do produto, fornecedor e números estreitos, linhas mais baixas e foto menor */
@media (min-width: 901px) {
  .t-compras { --cols: minmax(280px, 1fr) 96px 92px 56px 70px 124px 104px; }
  .linha.t-compras.cp-linha { padding-top: 5px; padding-bottom: 5px; min-height: 0; }
  .linha.t-compras .cp-foto { width: 34px; height: 34px; }
  .linha.t-compras .cp-produto { gap: 8px; }
  .linha.t-compras .col-secundaria { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .linha.t-compras .cp-qtd { height: 30px; width: 60px; }
  .linha.t-compras .cp-tirar { width: 26px; height: 26px; }
}
.cp-rec-acoes { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.cp-recentes .pv-linha.cp-cancelado { opacity: .55; }

/* Financeiro do cliente: abas "Em aberto" | "Pagamentos" e o extrato de pagamentos (pagamentos_cliente.py, 17/10/2026) */
.fin-abas { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin: 0 0 14px; max-width: 420px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.fin-aba { height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 9px; color: var(--muted);
  font-size: 13.5px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.fin-aba:hover { color: var(--ink); text-decoration: none; }
.fin-aba.ativa { background: var(--sel-bg); color: var(--sel-tx); box-shadow: inset 0 0 0 1px var(--sel-borda); }
.fp-atualizando { margin-bottom: 12px; }
.fp-resumo { display: grid; gap: 2px; padding: 14px 16px; margin-bottom: 12px; max-width: 420px;
  background: var(--green-soft); border: 1px solid rgba(31,168,85,.25); border-radius: 14px; }
.fp-resumo-rotulo { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--green-ink); }
.fp-resumo-valor { font-family: var(--font-mono); font-size: 28px; font-weight: 700; color: var(--green-ink); font-variant-numeric: tabular-nums; }
.fp-resumo-sub { font-size: 12px; color: var(--green-ink); }
.fp-mes { display: flex; justify-content: space-between; gap: 10px; margin: 16px 2px 8px; font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); }
.fp-lista { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.fp-cartao { display: grid; gap: 8px; align-content: start; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.fp-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.fp-data { font-weight: 700; }
.fp-valor { font-size: 19px; font-weight: 700; white-space: nowrap; }
.fp-itens { display: grid; gap: 8px; padding-top: 8px; border-top: 1px solid var(--hair); }
.fp-item { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.fp-item-txt { min-width: 0; display: grid; gap: 2px; justify-items: start; }
.fp-ref { font-size: 11.5px; color: var(--muted); }
.fp-encargos { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.fp-item .etiqueta { font-size: 10.5px; padding: 1px 7px; }
.fp-item-valor { white-space: nowrap; }
.fp-recibo { justify-self: stretch; }
.fp-rodape { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
@media (max-width: 900px) {
  .fin-abas, .fp-resumo { max-width: none; }
  .fp-lista { grid-template-columns: 1fr; }
  .fp-rodape .btn { flex: 1 1 100%; }
}

/* Fechar pedido: parcelas deste pedido junto das que o cliente já tem em aberto (checkout-parcelas.js, 17/10/2026). Celular: uma lista só em
   ordem de data (Data | Em aberto | Este pedido). Computador: as em aberto numa tabela ao lado. */
.pp-comparar { display: grid; gap: 12px; }
.pp-lado-titulo { margin: 0 0 6px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.tabela-nova.tabela-parcelas-preview, .tabela-nova.pp-tabela-lado { width: 100%; min-width: 0; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tabela-parcelas-preview th, .pp-tabela-lado th { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 700;
  text-align: left; padding: 6px 8px; background: var(--sunken); }
.tabela-parcelas-preview td, .pp-tabela-lado td { padding: 6px 8px; border-top: 1px solid var(--hair); vertical-align: middle; font-size: 13px; }
.pp-tabela-lado tr.pp-vencida td { color: var(--red); font-weight: 600; }
.pp-novo { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pp-novo .parcela-data { width: 142px; height: 34px; }
.pp-novo .parcela-valor { width: 96px; height: 34px; }
.pp-quando { white-space: nowrap; }
.pp-quando .pp-n { font-weight: 700; }
.pp-quando .pp-qd { display: block; font-size: 10.5px; color: var(--muted); }
.pp-quando .pp-dm { display: none; }
.tabela-parcelas-preview .parcela-aberta, .tabela-parcelas-preview .col-aberto, .pp-so-cel { display: none; }
.tabela-parcelas-preview tfoot td { font-weight: 700; background: var(--sunken); border-top: 1px solid var(--line); }
.tabela-parcelas-preview tfoot { display: none; }
input.pp-mudou { animation: pp-mudou 1.4s ease-out; }
@keyframes pp-mudou { 0% { box-shadow: 0 0 0 3px var(--gold); } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { input.pp-mudou { animation: none; } }
@media (min-width: 901px) {
  .pp-comparar:has(.pp-abertas-lado:not([hidden])) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}
@media (max-width: 900px) {
  .pp-so-pc, .pp-abertas-lado { display: none !important; }
  .pp-so-cel { display: inline; }
  .tabela-parcelas-preview .pp-quando .pp-n { display: none; }
  .tabela-parcelas-preview .pp-quando .pp-dm { display: inline; font-weight: 700; font-size: 12.5px; }
  .tabela-parcelas-preview td, .tabela-parcelas-preview th { padding: 6px 6px; }
  .tabela-parcelas-preview.pp-com-abertas .col-aberto { display: table-cell; }
  .tabela-parcelas-preview.pp-com-abertas .parcela-aberta { display: table-row; }
  .tabela-parcelas-preview.pp-com-abertas tfoot { display: table-footer-group; }
  .tabela-parcelas-preview .col-aberto b { display: block; font-size: 12.5px; }
  .tabela-parcelas-preview .col-aberto small { display: block; font-size: 10.5px; color: var(--muted); }
  .tabela-parcelas-preview .pp-vencida .col-aberto b, .tabela-parcelas-preview .pp-vencida .col-aberto small { color: var(--red); }
  .tabela-parcelas-preview .parcela-nova { background: var(--gold-soft); }
  .tabela-parcelas-preview .pp-novo .parcela-data { width: 118px; min-width: 0; height: 32px; padding: 0 4px; font-size: 12px; }
  .tabela-parcelas-preview .pp-novo .parcela-valor { width: 72px; min-width: 0; height: 32px; padding: 0 6px; font-size: 12.5px; }
  .tabela-parcelas-preview td.parcela-juros, .tabela-parcelas-preview th.col-juros-prazo { display: none; }
  .tabela-parcelas-preview .pp-juros-cel:not([hidden]) { display: block; flex-basis: 100%; font-size: 11px; color: var(--gold-ink); }
  .tabela-parcelas-preview .pp-novo { flex-wrap: nowrap; }
  .tabela-parcelas-preview .pp-novo:has(.pp-juros-cel:not([hidden])) { flex-wrap: wrap; }
}
@media (min-width: 901px) { .pp-juros-cel { display: none; } }

/* Fechar pedido (equipe), topo enxuto (17/10/2026): título + data da venda; busca pequena com "+ Novo"; o cliente escolhido num cartão só no
   visual do Clube (azul-marinho, pontos em dourado, barra e os selos embaixo). */
.ck-topo { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "titulo data" "busca busca"; gap: 10px; align-items: center; }
.ck-topo-titulo { grid-area: titulo; margin: 0; }
.ck-data { grid-area: data; position: relative; display: inline-flex; align-items: center; height: 34px; padding: 0 12px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.ck-data input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; padding: 0; cursor: pointer; }
.ck-data.outro-dia { border-color: var(--gold); background: var(--gold-soft); color: var(--gold-ink); }
.ck-busca { grid-area: busca; display: flex; gap: 8px; align-items: stretch; }
.ck-busca .busca-wrap { flex: 1; min-width: 0; max-width: none; width: auto; margin: 0; }
.ck-data input::-webkit-calendar-picker-indicator { display: none; }      /* sem o ícone do calendário (pedido do dono); tocar na data abre o calendário */
.ck-busca .ck-cliente-novo { flex: none; height: var(--h-control-mobile); padding: 0 14px; white-space: nowrap; }
@media (min-width: 901px) {
  .ck-topo { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "titulo titulo" "data busca"; }
  .ck-data { height: var(--h-control); padding: 0; border-radius: var(--r-md); border-color: var(--line); }
  .ck-data .ck-data-txt { display: none; }
  .ck-data input { position: static; opacity: 1; height: 100%; padding: 0 10px; border-radius: var(--r-md); background: transparent; font-weight: 700; color: inherit; }
  .ck-busca .ck-cliente-novo { height: var(--h-control); }
}

.ck-cliente.tem-cliente { background: var(--ink); color: var(--cream); border-color: transparent; border-radius: 18px; }
.ck-cliente.tem-cliente .ck-cliente-barra { padding: 12px 14px 4px; }
.ck-cliente.tem-cliente .ck-cliente-resumo { background: none; border: 0; color: var(--cream); padding: 0; }
.ck-cliente.tem-cliente .ck-cliente-l1 b { color: var(--cream); font-size: 15px; }
.ck-cliente.tem-cliente .ck-cliente-l2, .ck-cliente.tem-cliente .ck-cliente-seta { color: rgba(247,243,234,.62); }
.ck-cliente.tem-cliente .ck-cliente-detalhe { background: var(--surface); color: var(--ink); margin: 8px; border-radius: 12px; padding: 12px; }
.ck-cliente .ck-clube { background: none; border: 0; border-radius: 0; padding: 4px 14px 14px; gap: 8px; color: var(--cream); }
.ck-cliente .ck-clube .apoio { color: rgba(247,243,234,.62); }
.ck-clube-rot { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: rgba(247,243,234,.55); }
.ck-clube-linha { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ck-clube-saldo { font-family: var(--font-serif); font-size: 34px; line-height: 1; color: var(--gold); font-weight: var(--peso-titulo); }
.ck-clube-meta { font-size: 12.5px; color: rgba(247,243,234,.6); }
.ck-cliente .ck-clube-trilho { height: 8px; border-radius: 20px; background: rgba(247,243,234,.16); }
.ck-cliente .ck-clube-barra { background: linear-gradient(90deg, #C8922A, #E8B33C); border-radius: 20px; }
.ck-selos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.ck-selo { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 20px;
  background: rgba(247,243,234,.12); color: var(--cream); border: 0; font-family: var(--font-sans); }
.ck-selo-score::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cor, var(--green)); }
.ck-selo-ok { background: var(--bal-ok-bg); color: var(--bal-ok-tx); }
.ck-selo-vencido { background: var(--bal-at-bg); color: var(--bal-at-tx); }
.ck-selo-botao { cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.ck-selo-botao:hover { background: rgba(247,243,234,.2); }
.ck-cliente .ck-clube-premios { color: var(--cream); }
.ck-cliente .ck-clube-premios summary { color: var(--gold); font-size: 13px; }
.ck-cliente .ck-clube-premio { border-top-color: rgba(247,243,234,.14); }
.ck-cliente .ck-clube .aviso { color: var(--ink); }
.ck-cliente:not(.tem-cliente) .ck-cliente-l2 { display: none; }

/* Resumo depois de fechar o pedido (templates/vendedor/pedido_resumo.html, 17/10/2026) */
.rsm-topo { display: grid; gap: 4px; margin-bottom: 12px; }
.rsm-topo h1 { margin: 0; }
.rsm-etiquetas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.rsm-grade { display: grid; gap: 12px; }
.rsm-col { display: grid; gap: 12px; align-content: start; min-width: 0; }
.rsm-bloco { padding: 12px 14px; display: grid; gap: 8px; }
.rsm-titulo { margin: 0; font-family: var(--font-serif); font-weight: 500; font-size: 15px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.rsm-titulo small { font-family: var(--font-sans); font-size: 12px; color: var(--muted); font-weight: 600; }
.rsm-cliente { gap: 2px; }
.rsm-cliente b { font-size: 15px; }
.rsm-itens { display: grid; }
.rsm-item { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 8px 0; border-top: 1px solid var(--hair); }
.rsm-item:first-child { border-top: 0; padding-top: 0; }
.rsm-foto { width: 44px; height: 44px; border-radius: 8px; object-fit: contain; background: var(--sunken); border: 1px solid var(--line); }
.rsm-item-txt { display: grid; gap: 3px; min-width: 0; justify-items: start; }
.rsm-item-txt b { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.rsm-item-txt small { font-size: 11.5px; color: var(--muted); }
.rsm-item-valor { font-weight: 700; font-size: 13px; white-space: nowrap; }
.rsm-falta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 2px; }
.rsm-falta form { margin: 0; }
.rsm-parcela { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 5px 0; border-top: 1px solid var(--hair); font-variant-numeric: tabular-nums; font-size: 13px; }
.rsm-parcela:first-of-type { border-top: 0; }
.rsm-n { color: var(--muted); }
.rsm-parcela small { display: block; font-size: 10.5px; color: var(--muted); font-weight: 400; }
.rsm-parcela b { text-align: right; }
.rsm-linha { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; font-variant-numeric: tabular-nums; }
.rsm-total { font-weight: 700; font-size: 15px; border-top: 1px solid var(--line); padding-top: 8px; }
.rsm-motivos { display: block; }
.rsm-motivos ul { margin: 6px 0 0; padding-left: 18px; }
.rsm-pedida { margin: 6px 0 0; font-weight: 600; }
.rsm-botoes { display: grid; grid-template-columns: 1fr 1fr 1.15fr; gap: 8px; position: relative; }
.rsm-botoes form { margin: 0; display: flex; }
.rsm-botoes .btn { width: 100%; height: var(--h-control-mobile); padding: 0 6px; white-space: normal; line-height: 1.15; font-size: 13px; }
/* o balão da Entrega abre DENTRO da página (linha própria embaixo dos 3 botões), não por cima: solto (absolute/fixed) ele passava do fim da
   página e as últimas opções ("Entregue sem canhoto" e o botão de ciência) ficavam atrás da barra de baixo do celular, sem rolagem (20/10/2026) */
.rsm-entrega { display: contents; }
.rsm-botoes .folha-filtro.rsm-balao { position: static; grid-column: 1 / -1; right: auto; left: auto; top: auto; bottom: auto; width: auto; max-width: none;
  display: grid; gap: 8px; padding: 10px; z-index: auto; scroll-margin-bottom: 110px; }
.rsm-botoes .folha-filtro.rsm-balao[hidden] { display: none; }
.rsm-balao .rsm-sem { scroll-margin-bottom: 110px; }
.rsm-opcao { display: grid; gap: 2px; width: 100%; text-align: left; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface);
  color: var(--ink); font-family: var(--font-sans); cursor: pointer; }
.rsm-opcao:hover { border-color: var(--gold); background: var(--gold-soft); }
.rsm-opcao b { font-size: 14px; }
.rsm-opcao span { font-size: 12px; color: var(--muted); }
.rsm-aprovar { width: 100%; }
.rsm-links { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; }
@media (min-width: 901px) {
  .rsm-grade { grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); align-items: start; }
  .rsm-botoes { grid-template-columns: 1fr; }
  .rsm-botoes .btn { height: var(--h-control); }
  .rsm-lado { position: sticky; top: 12px; }
}
.cn-codigo input { font-size: 20px; letter-spacing: .3em; text-align: center; max-width: 220px; font-variant-numeric: tabular-nums; }
.cn-codigo-acoes { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* faixas de filtros/abas que deslizam para o lado: sem a barra de rolagem cinza embaixo (o deslizar continua igual) */
.chips-mob, .chips-categorias, .tabs-config, .vo-chips, .abas-ficha, .ficha-abas { scrollbar-width: none; }
.chips-mob::-webkit-scrollbar, .chips-categorias::-webkit-scrollbar, .tabs-config::-webkit-scrollbar, .vo-chips::-webkit-scrollbar,
.abas-ficha::-webkit-scrollbar, .ficha-abas::-webkit-scrollbar { display: none; }

/* botão "Tentar de novo" que o tentar-de-novo.js põe nos avisos de Tiny fora do ar/ocupado */
.btn-tentar { display: flex; margin-top: 10px; width: fit-content; background: var(--surface); }

/* ícones de linha no lugar dos emojis (tour de 19/10, fase 2): tamanho dado pelo lugar onde o ícone está */
.icone-config svg { width: 18px; height: 18px; color: var(--gold-ink); }
.premio-foto-placeholder svg { width: 28px; height: 28px; color: var(--gold-ink); }
.oc-troca-foto svg { width: 22px; height: 22px; color: var(--gold-ink); }
.chat-fab svg { width: 24px; height: 24px; }
.btn svg, .btn-primario svg, .btn-linha svg { width: 15px; height: 15px; vertical-align: -2px; flex: none; }
/* compartilhar: o verde do app (o mesmo dos outros botões de compartilhar), no lugar do verde-água que não é da marca */
.btn-compartilhar-icone { background: var(--green); border-color: var(--green-ink); color: #fff; }
.btn-compartilhar-icone:hover { background: var(--green-ink); }

/* ---- Lista compacta (tour de 19/10, fase 3): Carteira do vendedor e Clientes do admin no celular --------------------------
   Uma linha por cliente: iniciais · nome, cidade e etiquetas · ação do lado. Tocar no cliente abre a ficha. */
.lc-lista { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.lc-linha { display: flex; align-items: flex-start; gap: 8px; padding: 10px 10px 10px 12px; border-top: 1px solid var(--hair); }
.lc-linha:first-child { border-top: 0; }
.lc-toque { flex: 1 1 auto; min-width: 0; display: flex; gap: 10px; align-items: flex-start; color: var(--ink); text-decoration: none; }
.lc-toque:hover { text-decoration: none; }
.lc-ini { flex: none; width: 36px; height: 36px; border-radius: 11px; background: var(--gold-soft); color: var(--gold-ink);
  display: grid; place-items: center; font-family: var(--font-serif); font-weight: 600; font-size: 13.5px; }
.lc-txt { min-width: 0; display: grid; gap: 2px; }
.lc-nome { font-family: var(--font-serif); font-size: 14.5px; font-weight: 600; line-height: 1.25; color: var(--ink); overflow-wrap: anywhere; }
.lc-sub { font-size: 12px; color: var(--muted); line-height: 1.35; overflow-wrap: anywhere; }
.lc-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.lc-tags .etiqueta { font-size: 10.5px; padding: 1px 7px; }
.lc-acoes { flex: none; display: flex; align-items: center; gap: 4px; position: relative; }
.lc-pedido { background: var(--gold); color: var(--ink); font-weight: 700; font-size: 12.5px; border-radius: 10px; padding: 7px 10px;
  text-decoration: none; white-space: nowrap; }
.lc-pedido:hover { text-decoration: none; filter: brightness(1.04); }
.lc-convite { width: 34px; height: 34px; border-radius: 10px; border: 0; background: var(--green); color: #fff; display: grid; place-items: center; }
.lc-convite svg { width: 15px; height: 15px; }
.lc-mais > summary { list-style: none; width: 30px; height: 32px; border-radius: 10px; border: 1px solid var(--line); display: grid; place-items: center;
  color: var(--muted); font-weight: 800; cursor: pointer; background: var(--surface); }
.lc-mais > summary::-webkit-details-marker { display: none; }
.lc-mais[open] > summary { background: var(--sunken); color: var(--ink); }
.lc-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 230px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: var(--shadow); padding: 6px; display: grid; gap: 2px; }
.lc-menu-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: none; border: 0; border-radius: 8px;
  padding: 9px 10px; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink); cursor: pointer; }
.lc-menu-item:hover { background: var(--sunken); }
.lc-menu-item svg { width: 15px; height: 15px; flex: none; color: var(--green-ink); }
.lc-menu .btn-copiar-mensagem { justify-self: end; }

/* ---- Listas compactas no celular (tour de 19/10, fase 3): Pedidos e Contas a receber ----------------------------------------
   Os mesmos botões e selos de antes, menores e ao lado: cabem uns 5 itens por tela em vez de 2 e meio. */
@media (max-width: 900px) {
  .cli-lista .ped-bloco { padding: 10px 12px; gap: 6px; border-radius: 14px; }
  .cli-lista .ped-bloco .ped-cartao { gap: 10px; }
  .cli-lista .ped-faturar { justify-content: flex-end; padding-top: 0; margin-top: 0; border-top: 0; gap: 6px; }
  .cli-lista .ped-faturar .btn { flex: none; min-height: 32px; height: 32px; padding: 0 14px; font-size: 13px; }
  /* o Faturar desce para a última linha do cartão (a do vendedor), sem ocupar uma linha só dele */
  .cli-lista .ped-bloco:has(> .ped-faturar) { position: relative; }
  .cli-lista .ped-bloco > .ped-faturar { position: absolute; right: 12px; bottom: 9px; max-width: 60%; }
  .cli-lista .ped-bloco:has(> .ped-faturar) .ped-info .ped-meta:last-child { padding-right: 104px; }
  .cli-lista .ped-bloco .ped-cartao { align-items: flex-start; }
  .cli-lista .ped-bloco .ped-dot { margin-top: 5px; }
  /* já faturado (Faturado + Enviar + selos): não cabe na linha do vendedor, volta para uma linha própria, à direita */
  .cli-lista .ped-bloco:has(> .ped-faturar .fat-feito) > .ped-faturar { position: static; max-width: none; }
  .cli-lista .ped-bloco:has(> .ped-faturar .fat-feito) .ped-info .ped-meta:last-child { padding-right: 0; }

  .cf-compacto { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; align-items: end; padding: 11px 12px; }
  .cf-compacto > .cf-topo { grid-column: 1 / -1; }
  .cf-compacto > .cf-valor { grid-column: 1; margin-top: 6px; font-size: 16.5px; }
  .cf-compacto > .cf-juros { grid-column: 1; }
  .cf-compacto > .cf-acoes { grid-column: 2; grid-row: 2 / span 2; margin-top: 0; gap: 6px; align-self: end; }
  .cf-compacto > .cf-acoes .cf-btn-pagar { flex: none; height: 36px; padding: 0 14px; font-size: 13.5px; border-radius: 10px; }
  .cf-compacto > .cf-acoes .cf-btn-boleto { height: 36px; border-radius: 10px; }
  .cf-compacto > .cf-acoes .cf-btn-texto { padding: 0 10px; font-size: 13px; }
}

/* ---- Menu "Mais" (tour de 19/10, fase 3): ícones no lugar das letras, busca de telas e "Mais usados" --------------------- */
.mais-sigla svg { width: 18px; height: 18px; }
.mais-item[hidden], .mais-lista > div[hidden] { display: none !important; }
.mais-busca { display: flex; align-items: center; gap: 8px; margin: 0 2px 12px; padding: 0 12px; height: 42px; border-radius: 12px;
  background: var(--sb-hover); border: 1px solid var(--sb-linha); color: var(--sb-grupo); }
.mais-busca svg { width: 16px; height: 16px; flex: none; }
.mais-busca input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--sb-texto); font: inherit; font-size: 15px; }
.mais-busca input::placeholder { color: var(--sb-grupo); }
.mais-busca:focus-within { border-color: var(--gold); }
.mais-grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 6px; margin: 4px 0 14px; }
.mais-atalho { display: grid; justify-items: center; gap: 5px; text-align: center; text-decoration: none; color: var(--sb-texto);
  font-size: 11.5px; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.mais-atalho:hover { text-decoration: none; }
.mais-atalho-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--sel-bg); color: var(--sel-tx); }
.mais-atalho-ic svg { width: 20px; height: 20px; }
.mais-nada { margin: 4px 4px 12px; color: var(--sb-grupo); font-size: 14px; }

/* "Entregue sem canhoto" no balão de Entrega do resumo do pedido: abre o formulário (ciência ou motivo) ali mesmo */
.rsm-sem > summary { list-style: none; cursor: pointer; }
.rsm-sem > summary::-webkit-details-marker { display: none; }
.rsm-sem[open] > summary { border-color: var(--gold); background: var(--gold-soft); }
.rsm-sem-form { margin-top: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--sunken); }
.rsm-sem-form:not(:has(input[value="correio"]:checked)) > .campo { display: none; }     /* rastreio e "quem levou" só quando for por correio */
.cn-sem-link { margin: 0 0 10px; font-size: 14px; }
.cn-sem-link a { font-weight: 700; }
.ig-usar[hidden] { display: none !important; }

/* ---- Fechar pedido e carrinho (tour de 19/10, fase 4) ---------------------------------------------------------------------- */
/* forma de pagamento em botões; a lista de sempre fica no formulário, só não aparece */
.ck-formas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ck-forma { border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 10px; padding: 9px 12px;
  font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; min-height: 40px; }
.ck-forma:hover { border-color: var(--gold); }
.ck-forma[aria-pressed="true"] { border-color: var(--gold); background: var(--gold-soft); color: var(--gold-ink); }
.ck-formas-erro .ck-forma { border-color: var(--red); }
.ck-forma-select { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0; pointer-events: none; overflow: hidden; }
.campo:has(> .ck-forma-select) { position: relative; }

/* barra fixa embaixo (só celular): total + o botão principal da tela */
.barra-fixa { display: none; }
@media (max-width: 900px) {
  .barra-fixa { position: fixed; left: 0; right: 0; z-index: 55; display: flex; align-items: center; gap: 12px;
    padding: 10px max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px));
    background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -8px 20px -14px rgba(10,17,48,.35); }
  .barra-fixa[hidden] { display: none; }
  .barra-fixa-txt { display: grid; line-height: 1.15; min-width: 0; }
  .barra-fixa-txt small { font-size: 11px; color: var(--muted); }
  .barra-fixa-txt b { font-size: 18px; white-space: nowrap; }
  .barra-fixa .btn { margin-left: auto; min-height: 44px; padding: 0 18px; white-space: nowrap; }
}

/* computador largo: cliente e produtos à esquerda, pagamento e botões à direita */
.ck-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
@media (min-width: 1280px) {
  .ck-colunas { display: grid !important; grid-template-columns: minmax(0, 1.7fr) minmax(340px, 1fr); gap: 16px; align-items: start; }
  .ck-colunas > input[type="hidden"] { display: none; }
  .ck-col-dir .acoes-checkout { flex-wrap: wrap; }
  /* a tabela de produtos cabe na coluna da esquerda: sem a largura mínima geral, nome em até 2 linhas, foto mais estreita */
  .ck-col-esq .tabela-checkout-itens { min-width: 0; width: 100%; }
  .ck-col-esq .tabela-checkout-itens .ck-th-nome, .ck-col-esq .tabela-checkout-itens .ck-nome { white-space: normal; }
  .ck-col-esq .tabela-checkout-itens .ck-th-foto, .ck-col-esq .tabela-checkout-itens .ck-foto { width: 56px; padding-left: 10px; padding-right: 4px; }
}

/* carrinho: "Tirar do pedido" e "Reservar à parte" de cada produto viram dois links numa linha */
.car-falta-acoes { align-items: center; gap: 4px 14px; }
.car-falta-acoes::before { content: "O que falta:"; font-size: 12px; color: var(--muted); }
.car-falta-acoes .btn.btn-mini { border: 0; background: none; padding: 0; min-height: 0; height: auto; color: var(--gold-ink); font-size: 12.5px; font-weight: 700;
  text-decoration: underline; text-underline-offset: 2px; box-shadow: none; }
@media (max-width: 900px) { .car-linha > .car-falta-acoes form { flex: none; } }

/* ---- Cartão do produto (tour de 19/10, fase 5): mesma informação em menos altura --------------------------------------------
   marca na foto com a cor dela; cartão e boleto numa linha; estoque numa linha só ("Geral 20 · João 2 · Vendedor 0") */
.produto-card .produto-marca { position: absolute; right: 8px; bottom: 8px; z-index: 2; display: inline-flex; align-items: center; gap: 5px;
  max-width: calc(100% - 16px); padding: 2px 7px; border-radius: 999px; background: rgba(255,255,255,.94); border: 1px solid var(--line);
  font-size: 10px; font-weight: 800; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: .02em; }
.produto-card .produto-marca::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.produto-card .produto-marca-bubbles { color: #121212; }
.produto-card .produto-marca-bubbles::before { background: #121212; }
.produto-card .produto-marca-propetz { color: #237E78; }
.produto-card .produto-marca-propetz::before { background: #2B9A92; }
.produto-card .produto-marca-plenitude { color: #2E2E2E; }
.produto-card .produto-marca-plenitude::before { background: #3A3A3A; }
.produto-card .produto-marca-lanca-bicho { color: #B53D17; }
.produto-card .produto-marca-lanca-bicho::before { background: #D2491E; }
.produto-card .produto-selo-foto ~ .produto-marca { max-width: calc(50% - 12px); }
.produto-estoques { display: flex; flex-wrap: wrap; gap: 3px 4px; }
.produto-estoques .pe-cel { display: inline-flex; align-items: baseline; gap: 3px; padding: 1px 6px; border-radius: 999px; }
.produto-estoques .pe-cel small { font-size: 9.5px; }
.produto-estoques .pe-cel b { font-size: 11px; }

/* ---- Ficha do cliente (tour de 19/10, fase 6) ---------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .barra-fixa-so-botao .btn { margin-left: 0; flex: 1; }
  /* os três números do topo numa linha cada: "R$ 1.469,43" não quebra mais em duas (encolhe um pouco quando é grande) */
  .fc-4.fc-4.fc-4:not(#_) .fc-5, .fc-4.fc-4.fc-4:not(#_) .fc-10 { padding: 10px 10px; }
  .fc-4.fc-4.fc-4:not(#_) .fc-6 { letter-spacing: .08em; font-size: 9.5px; }
  .fc-kpi3 .num { font-size: clamp(12px, 3.6vw, 15px) !important; white-space: nowrap !important; overflow-wrap: normal; }
}

/* ---- Configurações: busca "O que você quer ajustar?" (tour de 19/10, fase 6) ---- */
.cfg-busca { position: relative; margin-bottom: 12px; max-width: 640px; }
.cfg-busca .busca { width: 100%; }
.cfg-resultados { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 40; background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: var(--shadow); padding: 6px; display: grid; gap: 2px; max-height: 60vh; overflow-y: auto; }
.cfg-resultados[hidden] { display: none; }
.cfg-resultado { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; color: var(--ink); text-decoration: none; }
.cfg-resultado[hidden] { display: none; }
.cfg-resultado:hover, .cfg-resultado:focus-visible { background: var(--sunken); text-decoration: none; }
.cfg-resultado svg { width: 18px; height: 18px; flex: none; color: var(--gold-ink); }
.cfg-resultado span { display: grid; line-height: 1.25; }
.cfg-resultado b { font-size: 14px; }
.cfg-resultado small { font-size: 12px; color: var(--muted); }
.cfg-nada { margin: 6px 8px; font-size: 13.5px; color: var(--muted); }

/* "i" dos pedidos na ficha (ficha-itens-pedido.js): enquanto busca os itens */
.fc-102[aria-busy="true"] { opacity: .5; cursor: progress; }

/* Rota de hoje no mapa de verdade (OpenStreetMap, rota-mapa.js, 20/10/2026): o desenho em ziguezague só fica quando o mapa não carrega */
[data-rota-mapa] .rt-mapa-real { display: none; }
[data-rota-mapa].com-mapa .rt-mapa-real { display: block; position: absolute; inset: 0; z-index: 0; }
[data-rota-mapa].com-mapa > svg, [data-rota-mapa].com-mapa > .rt-pino { display: none; }
.rt-mapa.com-mapa { padding: 0; height: 250px; background: var(--sunken); }
.pp-mapa-area.com-mapa { height: 300px; border-radius: var(--r-md); overflow: hidden; }
.rt-mpin span { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: #E8B33C; color: #0A1130;
  font-weight: 700; font-size: 13px; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(10,17,48,.35); }
.rt-mpin.agora span { background: #E8733C; color: #fff; width: 32px; height: 32px; margin: -2px; }
.rt-mpin.feito span { background: #C9CCD6; color: #5B6284; }
.rt-mpin.aprox span { border-style: dashed; }
.rt-organizar { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; justify-content: space-between; font-size: 13px; }
.pp-organizar { padding: 10px 16px 0; }

/* ============================================================
   ROTAS DO ADMIN numa área só (templates/admin/rotas.html, rotas-admin.js, 20/10/2026)
   ============================================================ */
.ra-abas { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 16px; overflow-x: auto; }
.ra-aba { border: 0; background: none; font: 700 14px var(--font-sans); color: var(--muted); padding: 10px 12px; border-bottom: 3px solid transparent; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.ra-aba[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--gold); }
.ra-vivo { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.ra-pilha { display: grid; gap: 12px; min-width: 0; }
.ra-agora, .ra-montar { display: grid; gap: 14px; }
@media (min-width: 1000px) {
  .ra-agora { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
  .ra-montar { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }
  .ra-lado { position: sticky; top: 76px; }
}
.ra-lado { display: grid; gap: 12px; min-width: 0; }
.ra-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ra-kpis-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 700px) { .ra-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ra-kpi { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; min-width: 0; }
.ra-kpi b { display: block; font-family: var(--font-serif); font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ra-kpi b small { font-size: 12px; color: var(--muted); font-weight: 500; }
.ra-kpi-escuro { background: var(--ink); border-color: var(--ink); color: #c9cde0; font-size: 12.5px; }
.ra-kpi-escuro b { color: var(--gold); }
.ra-mapa-caixa { position: relative; }
.ra-mapa { height: 340px; border-radius: 16px; border: 1px solid var(--line); background: var(--sunken); overflow: hidden; position: relative; z-index: 0; }
.ra-mapa-p { height: 260px; }
@media (max-width: 700px) { .ra-mapa { height: 280px; } .ra-mapa-p { height: 220px; } }
.ra-mapa-hora { position: absolute; right: 10px; top: 10px; z-index: 2; background: rgba(255,255,255,.94); border-radius: 10px; padding: 4px 9px; font-size: 11.5px; color: var(--muted); }
.ra-legenda { position: absolute; left: 10px; bottom: 10px; z-index: 2; background: rgba(255,255,255,.94); border-radius: 10px; padding: 5px 9px; font-size: 11px; display: flex; gap: 10px; flex-wrap: wrap; }
.ra-legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; vertical-align: -1px; }
.ra-l-feito { background: var(--green); } .ra-l-agora { background: #E8733C; } .ra-l-fila { background: #fff; border: 2px solid var(--ink); } .ra-l-pulado { background: #C9CCD6; }
.ra-pino span { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 50%; font: 800 11px var(--font-sans); border: 2px solid #fff; box-shadow: 0 2px 6px rgba(10,17,48,.3); }
.ra-p-feito span { background: var(--green); color: #fff; } .ra-p-agora span { background: #E8733C; color: #fff; } .ra-p-pulado span { background: #C9CCD6; color: #fff; }
.ra-p-fila span { background: #fff; color: var(--ink); border-color: var(--ink); }
.ra-p-vend span { color: #fff; font: 700 14px var(--font-serif); border-width: 3px; }
.ra-p-cli span { background: var(--gold); }
.ra-p-cid span { background: var(--ink); color: var(--gold); font-size: 12px; }
.ra-vend { display: grid; gap: 10px; }
.ra-vcab { display: flex; align-items: center; gap: 10px; }
.ra-vnome { display: grid; min-width: 0; flex: 1; } .ra-vnome b { font-size: 15px; }
.ra-avatar { width: 36px; height: 36px; border-radius: 50%; display: inline-grid; place-items: center; color: #fff; font: 700 15px var(--font-serif); flex: none; }
.ra-avatar-p { width: 22px; height: 22px; font-size: 11px; }
.ra-barra-tx { display: flex; justify-content: space-between; margin-bottom: 4px; }
.ra-barra { height: 8px; border-radius: 99px; background: var(--sunken); border: 1px solid var(--line); overflow: hidden; }
.ra-barra span { display: block; height: 100%; background: linear-gradient(90deg, #C8922A, #E8B33C); }
.ra-vnums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ra-vnums div { background: var(--sunken); border-radius: 10px; padding: 7px 9px; display: grid; min-width: 0; }
.ra-vnums b { font-size: 14.5px; font-variant-numeric: tabular-nums; }
.ra-prox { font-size: 13px; background: var(--gold-soft); color: var(--gold-ink); border-radius: 10px; padding: 8px 10px; }
.ra-itin summary { cursor: pointer; font-weight: 800; color: var(--gold-ink); font-size: 13px; }
.ra-parada { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px; }
.ra-parada-n { min-width: 0; overflow-wrap: anywhere; }
.ra-ordem { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 11.5px; font-weight: 800; border: 2px solid var(--ink); }
.ra-o-feito { background: var(--green); border-color: var(--green); color: #fff; } .ra-o-pulado { background: #C9CCD6; border-color: #C9CCD6; color: #fff; }
.ra-o-agora { background: #E8733C; border-color: #E8733C; color: #fff; }
.ra-passo { display: grid; gap: 10px; }
.ra-passo h2, .ra-lado h2 { font-size: 17px; margin: 0; }
.ra-passo-cab { display: flex; align-items: center; gap: 10px; }
.ra-dir { margin-left: auto; }
.ra-bola { width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font: 700 13px var(--font-serif); flex: none; }
.ra-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ra-chips .chip { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.ra-chips .chip small { color: var(--muted); font-weight: 600; }
.ra-chips .chip[aria-pressed="true"] { background: var(--gold-soft); border-color: var(--gold); color: var(--gold-ink); }
.ra-linha-data { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ra-data, .ra-busca, .ra-ordenar { border: 1px solid var(--line); border-radius: 12px; padding: 9px 12px; font: 600 14px var(--font-sans); color: var(--ink); background: var(--surface); }
.ra-ferr { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ra-busca { flex: 1 1 180px; min-width: 0; }
.ra-cidade-cab { display: flex; align-items: center; gap: 8px; padding: 10px 0 6px; }
.ra-cidade-cab button { margin-left: auto; border: 0; background: none; color: var(--gold-ink); font: 800 12.5px var(--font-sans); cursor: pointer; }
.ra-cli { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); cursor: pointer; }
.ra-cli + .ra-cli { margin-top: 8px; }
.ra-cli.fora { background: var(--sunken); opacity: .7; }
.ra-cli input { width: 20px; height: 20px; accent-color: #C8922A; margin: 2px 0 0; }
.ra-cli-c { min-width: 0; }
.ra-cli-n { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 14px; }
.ra-dados { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
@media (max-width: 700px) { .ra-dados { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ra-dado { background: var(--sunken); border-radius: 10px; padding: 6px 8px; min-width: 0; display: grid; }
.ra-dado small { font-size: 10.5px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.ra-dado small.ra-sub { text-transform: none; letter-spacing: 0; font-weight: 600; }
.ra-dado b { font-size: 13px; font-variant-numeric: tabular-nums; }
.ra-dado.ok b { color: var(--green-ink); } .ra-dado.av b { color: var(--gold-ink); } .ra-dado.er b { color: var(--red); }
.ra-plan-l { display: flex; gap: 8px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.ra-plan-l:first-child { border-top: 0; }
.ra-plan-tx { display: grid; flex: 1 1 160px; min-width: 0; font-size: 13px; }
.ra-chip-perigo { color: var(--red); }
.ra-salvar { position: sticky; bottom: 0; z-index: 30; margin-top: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px;
  display: flex; align-items: center; gap: 10px; box-shadow: 0 -10px 30px -18px rgba(10,17,48,.35); }
@media (max-width: 900px) { .ra-salvar { bottom: calc(var(--barra-h, 66px) + 10px); } }
.ra-salvar-tx { display: grid; min-width: 0; flex: 1; } .ra-salvar-tx b { font-size: 15px; }
.ra-toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--barra-h, 66px) + 124px); z-index: 1200; background: var(--ink); color: #fff; border-radius: 12px; padding: 10px 14px; font-weight: 700; max-width: calc(100vw - 32px); }

/* Venda no boleto garantida pelo vendedor (boleto_garantia.py, 20/10/2026): aviso vermelho + caixa de ciência no checkout; selo no resumo */
.boleto-aviso.boleto-aviso-garantia { background: var(--red-soft); color: var(--red); border-radius: 10px; padding: .6rem .75rem; font-weight: 700; margin: 0; }
.boleto-garantia { display: flex; gap: .6rem; align-items: flex-start; padding: .7rem .75rem; border: 1.5px solid var(--red); border-radius: 10px; background: var(--surface); cursor: pointer; line-height: 1.35; }
.boleto-garantia[hidden] { display: none; }
.boleto-garantia input { width: 22px; height: 22px; flex: 0 0 auto; margin: 0; accent-color: var(--red); }
.boleto-garantia b { color: var(--red); }
.garantia-selo { background: var(--red-soft); color: var(--red); border-radius: 10px; padding: .6rem .75rem; line-height: 1.4; }
.garantia-selo b { display: block; }

/* ============================================================
   AGENDA do dia em quadro (templates/agenda/quadro.html, agenda.py, 20/10/2026): A fazer · Fazendo · Feito.
   Computador: as três colunas lado a lado. Celular: uma por vez (?col=, filtro "Mostrar").
   ============================================================ */
.ag-pagina { display: grid; gap: 14px; }
.ag-cab { display: flex; gap: 12px; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; }
.ag-cab h1 { margin: 0; }
.ag-cab .me-sub { margin: 2px 0 0; }
.ag-vermelho { color: var(--red); }
.ag-filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ag-link { font-weight: 700; font-size: 13px; color: var(--gold-ink); text-decoration: none; }
.ag-ponto { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: 6px; background: var(--gold); }
.ag-ponto-fazendo { background: var(--blue); }
.ag-ponto-feito { background: var(--green); }

.ag-cartao { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); min-width: 0; overflow: hidden; }
.ag-cartao.ag-atrasada { border-color: rgba(156,74,60,.45); box-shadow: inset 4px 0 0 var(--red); }
.ag-cartao.ag-espera { background: var(--sunken); }
.ag-cartao.ag-feito .ag-c-tit { text-decoration: line-through; text-decoration-color: rgba(10,17,48,.35); color: var(--muted); }
.ag-cartao > summary { list-style: none; cursor: pointer; padding: 9px 11px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 8px; align-items: center; }
.ag-cartao > summary::-webkit-details-marker { display: none; }
.ag-cartao > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.ag-cartao[open] > summary { background: var(--sunken); }
.ag-c-hora { font-weight: 800; font-size: 12.5px; min-width: 38px; white-space: nowrap; }
.ag-c-hora.ag-sem { color: var(--muted); font-weight: 600; }
.ag-c-tit { font-weight: 800; font-size: 13.5px; line-height: 1.3; min-width: 0; overflow-wrap: anywhere; }
.ag-st { font-size: var(--bal-fs); font-weight: 800; border-radius: var(--r-pill); padding: 2px 8px; white-space: nowrap; }
.ag-st-fazer { background: var(--bal-de-bg); color: var(--bal-de-tx); }
.ag-st-fazendo { background: #E6E9F5; color: #3A4475; }
.ag-st-feito { background: var(--bal-ok-bg); color: var(--bal-ok-tx); }
.ag-st-prev { background: var(--sunken); color: var(--muted); border: 1px solid var(--hair); }
.ag-c-mini { grid-column: 2 / 4; display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.ag-c-info { border-top: 1px solid var(--hair); padding: 10px 11px 11px; display: grid; gap: 9px; }
.ag-c-info dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; font-size: 12.5px; }
.ag-c-info dt { color: var(--muted); font-weight: 700; }
.ag-c-info dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.ag-selos { display: flex; flex-wrap: wrap; gap: 5px; }
.ag-selo { font-size: var(--bal-fs); font-weight: 800; border-radius: var(--r-pill); padding: 2px 8px; background: var(--sunken); color: var(--muted); border: 1px solid var(--hair); white-space: nowrap; }
.ag-selo-atraso { background: var(--bal-at-bg); color: var(--bal-at-tx); border-color: transparent; }
.ag-selo-admin { background: var(--bal-de-bg); color: var(--bal-de-tx); border-color: transparent; }
.ag-selo-aviso { background: var(--bal-ok-bg); color: var(--bal-ok-tx); border-color: transparent; }
.ag-selo-auto { background: #E6E9F5; color: #3A4475; border-color: transparent; }
.ag-c-acoes { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ag-c-acoes form { margin: 0; }
.ag-btn { padding: 6px 11px; font-size: 12.5px; min-height: 0; }
.btn.btn-verde { background: var(--green-soft); color: var(--green-ink); border-color: transparent; }
.ag-auto { font-size: 11.5px; color: var(--muted); }
.ag-pessoa { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--muted); }
.ag-av { width: 20px; height: 20px; border-radius: 50%; color: #fff; display: inline-grid; place-items: center; font-size: 10.5px; font-weight: 800; background: #2F6FDE; }
.ag-av-1 { background: #D9822B; } .ag-av-2 { background: #7B4FD6; } .ag-av-3 { background: #1E9C8A; } .ag-av-4 { background: #C2433B; } .ag-av-5 { background: #6B7A1F; }

.ag-dias { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; }
/* computador: a semana como um calendário (os 7 dias lado a lado, cabendo na tela), cada dia um balão; o cartão fica em duas linhas */
@media (min-width: 900px) {
  .ag-dias { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
  .ag-dias .ag-dia { padding: 8px; border-radius: 16px; min-height: 180px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 6px 18px -14px rgba(10,17,48,.35); }
  .ag-dias .ag-dia-hoje { background: var(--gold-soft); border-color: rgba(232,179,60,.6); box-shadow: 0 6px 18px -12px rgba(125,90,11,.45); }
  .ag-dias .ag-dia-fds { background: var(--sunken); }
  .ag-dias .ag-dia-cab { flex-direction: column; align-items: flex-start; gap: 0; border-bottom: 1px solid var(--hair); padding: 0 2px 6px; }
  .ag-dias .ag-dia-cab span { white-space: normal; font-size: 11px; }
  .ag-dias .ag-cartao { border-radius: 12px; }
  .ag-dias .ag-cartao > summary { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "hora st" "tit tit" "mini mini"; padding: 7px 8px; gap: 3px 6px; }
  .ag-dias .ag-cartao > summary .ag-c-hora { grid-area: hora; }
  .ag-dias .ag-cartao > summary .ag-st { grid-area: st; justify-self: end; }
  .ag-dias .ag-cartao > summary .ag-c-tit { grid-area: tit; font-size: 12.5px; }
  .ag-dias .ag-cartao > summary .ag-c-mini { grid-area: mini; }
  .ag-dias .ag-c-info { padding: 8px; }
  .ag-dias .ag-c-info dl { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ag-dias .ag-c-info dd { margin-bottom: 4px; }
  .ag-dias .ag-rapida-campo { font-size: 12.5px; padding: 7px 9px; }
}
/* o formulário completo aberto dentro do dia ("Data, hora e repetir" do + Adicionar tarefa) */
.ag-dia .ag-folha.folha-filtro.ag-folha-no-dia { position: static; width: auto; max-width: none; max-height: none; overflow: visible; box-shadow: none; padding: 10px; border-radius: 12px; z-index: auto; }
.ag-folha-no-dia .ag-linha2 { grid-template-columns: minmax(0, 1fr); }
.ag-folha-no-dia .ag-tipos { display: none; }                 /* cobrar/visitar só no "+ Nova" de cima */
@media (min-width: 900px) { .ag-dias .ag-dia:has(.ag-folha-no-dia) { grid-column: span 2; } }      /* no calendário, o dia com o formulário aberto fica mais largo */
.ag-dia { background: rgba(10,17,48,.035); border-radius: var(--r-lg); padding: 10px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; align-content: start; min-width: 0; }
.ag-dia-hoje { background: var(--gold-soft); box-shadow: inset 0 0 0 1px rgba(232,179,60,.5); }
.ag-dia-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 2px 4px; }
.ag-dia-cab b { font: var(--peso-titulo) 16px var(--font-serif); }
.ag-dia-cab span { color: var(--muted); font-size: 12px; font-weight: 700; white-space: nowrap; }
.ag-dia-cab em { font-style: normal; color: var(--red); font-weight: 800; }
.ag-vazio { color: var(--muted); font-size: 12.5px; text-align: center; padding: 10px 8px; border: 1.5px dashed var(--line); border-radius: var(--r-md); margin: 0; }
.ag-dia-hoje .ag-rapida-campo { background: rgba(255,255,255,.75); }
.ag-tipos { margin-bottom: 12px; }
/* "+ Adicionar tarefa" no fim de cada dia (como no Trello): os botões aparecem quando a pessoa toca no campo */
.ag-rapida { display: grid; gap: 8px; margin: 0; }
.ag-rapida-campo { width: 100%; min-width: 0; box-sizing: border-box; border: 1.5px dashed var(--line); background: transparent; border-radius: var(--r-lg); padding: 9px 11px; font: 700 13.5px var(--font-sans); color: var(--ink); }
.ag-rapida-campo::placeholder { color: var(--gold-ink); }
.ag-rapida-campo:focus { border-style: solid; border-color: var(--gold); background: var(--surface); outline: none; box-shadow: 0 0 0 3px var(--gold-soft); }
.ag-rapida-botoes { display: none; gap: 6px; flex-wrap: wrap; }
.ag-rapida:focus-within .ag-rapida-botoes { display: flex; }
.ag-zap > summary { cursor: pointer; display: flex; gap: 10px; align-items: center; padding: 12px 14px; list-style: none; }
.ag-zap > summary::-webkit-details-marker { display: none; }
.ag-zap > .pilha { padding: 0 14px 14px; }
.ag-zap-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ag-folha { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px; box-shadow: 0 16px 40px -22px rgba(10,17,48,.45); max-width: 560px; }
/* o .folha-filtro se posiciona pela página: sem isto o formulário abria colado na borda esquerda, atrás da barra lateral (20/10/2026).
   Computador: abre embaixo do "+ Nova", à direita. Celular: sobe de baixo, como os outros balões, com rolagem própria. */
.ag-pagina { position: relative; }
.ag-folha.folha-filtro { display: block; top: 64px; right: 0; left: auto; width: min(520px, 100%); max-width: none; min-width: 0; z-index: 60;
  max-height: calc(100vh - 140px); max-height: calc(100dvh - 140px); overflow-y: auto; overscroll-behavior: contain; padding: 16px; }
.ag-folha.folha-filtro[hidden] { display: none; }
@media (max-width: 900px) {
  .ag-folha.folha-filtro { position: fixed; left: 12px; right: 12px; top: auto; bottom: calc(var(--barra-h, 66px) + 18px); width: auto;
    max-height: calc(100vh - 120px); max-height: calc(100dvh - 120px - env(safe-area-inset-bottom, 0px)); }          /* dvh: a altura visível do iPhone (a barra do Safari não corta o topo) */
}
.ag-form { display: grid; gap: 12px; }
.ag-form h2 { margin: 0; font: var(--peso-titulo) 19px var(--font-serif); }
.ag-form .campo { display: grid; gap: 5px; font-weight: 700; font-size: 13px; }
.ag-form input[type="text"], .ag-form input:not([type]), .ag-form input[type="date"], .ag-form input[type="time"], .ag-form select { width: 100%; }
.ag-linha2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.ag-form input, .ag-form select { min-width: 0; max-width: 100%; box-sizing: border-box; }          /* data e hora do iPhone não passam da coluna */
.ag-grupo { border: 0; padding: 0; margin: 0; display: grid; gap: 7px; }
.ag-grupo legend { font-weight: 700; font-size: 13px; padding: 0; margin-bottom: 5px; }
.ag-chips, .ag-semana { display: flex; flex-wrap: wrap; gap: 6px; }
.ag-semana[hidden] { display: none; }
.ag-chip { position: relative; cursor: pointer; }
.ag-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ag-chip span { display: inline-block; border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-pill); padding: 6px 12px; font-weight: 700; font-size: 12.5px; color: var(--ink); }
.ag-chip input:checked + span { background: var(--gold-soft); border-color: var(--gold); color: var(--gold-ink); }
.ag-chip input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.ag-chip-dia span { width: 38px; text-align: center; padding: 6px 0; }
.ag-frase { font-weight: 600; font-size: 12px; }
.ag-acoes { display: flex; gap: 8px; justify-content: flex-end; }
.ag-previstas { display: grid; gap: 8px; }
.ag-previstas h2 { margin: 0; font: var(--peso-titulo) 18px var(--font-serif); }
.ag-prev { display: flex; gap: 12px; align-items: baseline; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 10px 12px; }
.ag-prev-hora { font-weight: 800; min-width: 44px; }
.ag-prev-t { display: grid; gap: 1px; min-width: 0; }
.ag-prev-t span { color: var(--muted); font-size: 12.5px; }
.ag-editar { max-width: 560px; }
.ag-editar .ag-form { padding: 14px; }
.ag-apagar { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 4px 2px; }
.ag-confirma { display: inline-flex; gap: 8px; align-items: center; font-weight: 700; font-size: 13px; color: var(--red); }

.ag-push { display: flex; gap: 12px; align-items: center; justify-content: space-between; background: var(--gold-soft); border: 1px solid rgba(232,179,60,.45); border-radius: var(--r-lg); padding: 10px 12px; }
.ag-push[hidden] { display: none; }
.ag-push-tx { display: grid; gap: 1px; min-width: 0; font-size: 12.5px; color: var(--gold-ink); }
.ag-push-tx b { color: var(--ink); font-size: 13.5px; }

/* atalho da agenda no alto do Início (vendedor e admin) */
.ag-atalho { display: flex; gap: 12px; align-items: center; background: var(--ink); color: var(--cream); border-radius: var(--r-lg); padding: 12px 14px; text-decoration: none; margin-bottom: 12px; }
.ag-atalho-ic { width: 40px; height: 40px; border-radius: 12px; background: var(--gold); color: var(--ink); display: grid; place-items: center; flex: 0 0 auto; }
.ag-atalho-ic svg { width: 22px; height: 22px; }
.ag-atalho-tx { display: grid; gap: 2px; min-width: 0; flex: 1; }
.ag-atalho-tx b { font: var(--peso-titulo) 16px var(--font-serif); color: var(--cream); }
.ag-atalho-tx span { font-size: 12.5px; color: rgba(247,243,234,.78); }
.ag-atalho-tx .ag-atalho-prox { color: var(--gold); font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-atalho-seta { color: var(--gold); font-size: 22px; }
.ia-pagina > .ag-atalho { margin-bottom: 0; }          /* no Início do admin a grade já dá o espaço */


/* ============================================================
   Rodapé da barra lateral numa linha só (pedido do dono, 21/10/2026): Sincronizar = ícone redondo (o texto vai na dica),
   perfil = bolinha com a inicial (abre o mesmo menu), encolher = setinha pequena no canto. Encolhida, empilha.
   ============================================================ */
.sidebar .sidebar-rodape.sidebar-footer { flex-direction: row; align-items: center; gap: 8px; padding: 10px 12px; }
.sidebar .sidebar-rodape .sync-offline-block { padding: 0; margin: 0; display: block; }
.sidebar .sidebar-rodape .sync-offline-btn { width: 34px; height: 34px; padding: 0; border-radius: 50%; display: grid; place-items: center; gap: 0; }
.sidebar .sidebar-rodape .sync-offline-btn .icon svg { width: 16px; height: 16px; }
.sidebar .sidebar-rodape .sync-offline-btn .label,
.sidebar .sidebar-rodape .sync-offline-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sidebar .sidebar-rodape .sync-offline-btn.sincronizando .icon svg { animation: dfpet-gira 1s linear infinite; }
@keyframes dfpet-gira { to { transform: rotate(360deg); } }
.sidebar .sidebar-rodape .perfil-menu-wrap { flex: none; }
.sidebar .sidebar-rodape .perfil-bolinha { width: 34px; height: 34px; padding: 0; border-radius: 50%; display: grid; place-items: center; gap: 0;
  background: var(--gold); color: var(--ink); font: 800 14px var(--font-sans); border: 0; border-left: 0; }
.sidebar .sidebar-rodape .perfil-bolinha:hover { background: var(--gold-soft); color: var(--ink); }
.sidebar .sidebar-rodape .sidebar-encolher { margin: 0 0 0 auto; width: 26px; height: 26px; padding: 0; border-radius: 50%; font-size: 16px; font-weight: 800; line-height: 1;
  color: var(--sb-texto); border-color: rgba(255,255,255,.28); }
.sidebar .sidebar-rodape .sidebar-encolher:hover { color: var(--gold); border-color: var(--gold); }
html.sidebar-collapsed .sidebar .sidebar-rodape .sidebar-encolher-seta,
html.sidebar-encolhida .sidebar .sidebar-rodape .sidebar-encolher-seta { display: inline-block; transform: rotate(180deg); }
html.sidebar-collapsed .sidebar .sidebar-rodape.sidebar-footer,
html.sidebar-encolhida .sidebar .sidebar-rodape.sidebar-footer { flex-direction: column; padding: 10px 0; }
html.sidebar-collapsed .sidebar .sidebar-rodape .sidebar-encolher,
html.sidebar-encolhida .sidebar .sidebar-rodape .sidebar-encolher { margin: 0; }
/* etiqueta com o nome do ícone, com a barra encolhida (sidebar.js) */
.sb-dica { position: fixed; z-index: 1200; transform: translateY(-50%); background: var(--ink); color: var(--cream); font: 700 12.5px var(--font-sans);
  padding: 6px 10px; border-radius: 8px; white-space: nowrap; pointer-events: none; box-shadow: 0 8px 22px -10px rgba(10,17,48,.6); border: 1px solid rgba(255,255,255,.14); }
.sb-dica::before { content: ""; position: absolute; left: -5px; top: 50%; width: 8px; height: 8px; background: var(--ink); transform: translateY(-50%) rotate(45deg);
  border-left: 1px solid rgba(255,255,255,.14); border-bottom: 1px solid rgba(255,255,255,.14); }
.sb-dica[hidden] { display: none; }

/* Ficha do cliente → cartão do Clube: a seta abre os prêmios que dá para trocar e "Adicionar" põe no carrinho (21/10/2026).
   A lista usa os mesmos itens .car-troca-* do balão do carrinho (o cartão também é azul-marinho). */
.fc-premios { border-top: 1px solid rgba(247,243,234,.12); }
.fc-premios > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 16px; font-size: 12.5px; font-weight: 600; color: var(--gold); }
.fc-premios > summary::-webkit-details-marker { display: none; }
.fc-premios > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.fc-premios-seta { width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .15s ease; flex: none; }
.fc-premios[open] .fc-premios-seta { transform: rotate(-135deg) translate(-2px, -2px); }
.fc-premios-lista { padding-top: 0; }
.fc-premios form { margin: 0; flex: none; }
.fc-premio-ver { display: inline-flex; align-items: center; text-decoration: none; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .fc-premios-seta { transition: none; } }

/* ---------- Jurídico: lista enxuta (protótipo aprovado em 21/10/2026) ----------
   Uma linha por cliente: nome + frase, trilha em bolinhas (Notificado · Acordo · Protesto · Negativação · Ação judicial) ou barra de parcelas,
   provas em etiquetas curtas, valor e ⋯. No celular são 3 linhas; no computador, colunas. */
.jx-cartao { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg, 16px); overflow: visible; }
.jx-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px 6px; flex-wrap: wrap; }
.jx-topo h1 { margin: 0; }
.jx-novos { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 600px) { .jx-novos { width: 100%; flex-wrap: nowrap; } .jx-novos .jx-btn { flex: 1; padding: 0 10px; font-size: 13px; } }
.jx-btn { min-height: 36px; padding: 0 14px; font-size: 13.5px; }
.jx-kpis { display: flex; gap: 4px 16px; flex-wrap: wrap; padding: 0 16px 10px; font-size: 12.5px; color: var(--muted); }
.jx-kpis b { color: var(--ink); font-family: var(--font-serif); font-size: 14.5px; font-weight: var(--peso-titulo); }
.jx-kpis .verde, .jx-kpis .verde b { color: var(--green-ink); }
.jx-filtros { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding: 0 16px 12px; border-bottom: 1px solid var(--line); position: relative; }
.jx-busca { flex: 1 1 200px; height: 36px; }
.jx-cab { display: none; }
.jx { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "cli v" "and ac" "pv pv"; gap: 5px 10px; padding: 10px 16px; border-bottom: 1px solid var(--line); align-items: center; }
.jx:last-of-type { border-bottom: 0; }
.jx-verde { background: var(--green-soft); box-shadow: inset 3px 0 0 var(--green); }
.jx-fim { opacity: .7; }
.jx-cli { grid-area: cli; display: grid; min-width: 0; text-decoration: none; color: inherit; }
.jx-cli b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jx-cli small { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jx-cli:hover b { text-decoration: underline; }
.jx-v { grid-area: v; font-family: var(--font-serif); font-size: 15px; font-weight: var(--peso-titulo); text-align: right; white-space: nowrap; }
.jx-and { grid-area: and; display: flex; align-items: center; gap: 8px; min-width: 0; }
.jx .btn.btn-verde, .jx-ficha .btn.btn-verde { background: var(--green); border-color: var(--green); color: #fff; }
.jx .btn.btn-verde:hover, .jx-ficha .btn.btn-verde:hover { background: var(--green-ink); border-color: var(--green-ink); }
.jx-ac { grid-area: ac; justify-self: end; min-height: 30px; height: 30px; padding: 0 11px; font-size: 12.5px; border-radius: 8px; white-space: nowrap; }
.jx-maiswrap { grid-area: ac; justify-self: end; }
.jx-mais { grid-area: ac; justify-self: end; width: 36px; height: 30px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); font-size: 18px; line-height: 1;
  cursor: pointer; color: var(--ink); display: inline-grid; place-items: center; text-decoration: none; padding: 0 0 5px; font-weight: 700; }
.jx-mais[aria-expanded="true"] { border-color: var(--gold); background: var(--gold-soft); }
.jx-et { font-size: 11.5px; font-weight: 800; padding: 2px 8px; border-radius: 99px; white-space: nowrap; background: var(--sunken); color: var(--muted); }
.jx-et.ok { background: #BFDECD; color: #0F4C29; }
.jx-et.av { background: #F9EAC8; color: #806321; }
.jx-et.er { background: #EACCC8; color: #642720; }
.jx-pv { grid-area: pv; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.jx-pv::-webkit-scrollbar { display: none; }
.jx-pv span { flex: none; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 99px; color: var(--green-ink); border: 1px solid rgba(31,168,85,.3); background: var(--surface); white-space: nowrap; }
.jx-pv span.nova { background: var(--green-soft); }
.jx-pv span.neutro { color: var(--muted); border-color: var(--line); }
.jx-pv span.fora { color: #806321; border-color: transparent; background: #F9EAC8; }
.jx-pv span.nv { border-color: transparent; background: var(--sunken); color: var(--muted); }
.jx-pv span.nv.ok { background: #BFDECD; color: #0F4C29; }
.jx-pv span.nv.av { background: #F9EAC8; color: #806321; }
.jx-pv span.nv.er { background: #EACCC8; color: #642720; }
/* trilha em bolinhas: f feita · a atual · s pulada · vazia ainda não */
.jx-mt { display: inline-flex; align-items: center; flex: none; }
.jx-mt i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid rgba(10,17,48,.28); background: var(--surface); position: relative; box-sizing: border-box; }
.jx-mt i + i { margin-left: 9px; }
.jx-mt i + i::before { content: ""; position: absolute; right: 100%; top: 50%; width: 10px; height: 1.5px; margin-top: -.75px; background: rgba(10,17,48,.18); }
.jx-mt i.f { background: var(--ink); border-color: var(--ink); }
.jx-mt i.s { border-style: dashed; opacity: .55; }
.jx-mt i.a { width: 13px; height: 13px; background: var(--muted); border-color: var(--muted); }
.jx-mt i.a.ok { background: var(--green); border-color: var(--green); box-shadow: 0 0 0 3px rgba(31,168,85,.18); }
.jx-mt i.a.av { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
.jx-mt i.a.er { background: var(--red); border-color: var(--red); box-shadow: 0 0 0 3px var(--red-soft); }
.jx-mp { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 12px; gap: 3px; flex: none; }
.jx-mp i { height: 8px; border-radius: 3px; background: rgba(10,17,48,.12); }
.jx-mp i.pa { background: var(--green); }
.jx-mp i.px { background: var(--gold-soft); box-shadow: inset 0 0 0 1.5px var(--gold); }
.jx-mp i.at { background: var(--red); }
.jx-vazio { padding: 16px; margin: 0; }
.jx-legenda { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 2px 14px; font-size: 12px; color: var(--muted); align-items: center; }
.jx-legenda > span { display: inline-flex; align-items: center; gap: 6px; }
.jx-legenda-txt { flex-basis: 100%; }
@media (min-width: 900px) {
  .jx-cab { display: grid; grid-template-columns: minmax(200px, 1.3fr) minmax(190px, .9fr) minmax(220px, 1.4fr) 120px 130px; gap: 12px; padding: 7px 16px;
    font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); background: var(--sunken); border-bottom: 1px solid var(--line); }
  .jx-cab span:nth-child(4) { text-align: right; }
  .jx { grid-template-columns: minmax(200px, 1.3fr) minmax(190px, .9fr) minmax(220px, 1.4fr) 120px 130px; grid-template-areas: "cli and pv v ac"; gap: 12px; padding: 9px 16px; }
  .jx-pv { flex-wrap: wrap; overflow: visible; }
}
/* ficha do caso: a trilha por extenso e o pedido de acordo confirmado (21/10/2026) */
.jx-ficha { margin-bottom: 12px; }
.jx-ficha .cartao-corpo { display: grid; gap: 10px; }
.jx-trilha { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.jx-trilha li { display: grid; justify-items: center; gap: 4px; text-align: center; position: relative; font-size: 11.5px; color: var(--muted); min-width: 0; }
.jx-trilha li::before { content: ""; position: absolute; top: 8px; left: -50%; right: 50%; height: 2px; background: var(--line); }
.jx-trilha li:first-child::before { display: none; }
.jx-trilha li i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(10,17,48,.22); background: var(--surface); position: relative; z-index: 1; box-sizing: border-box; }
.jx-trilha li.f i { background: var(--ink); border-color: var(--ink); }
.jx-trilha li.f::before, .jx-trilha li.a::before { background: var(--ink); }
.jx-trilha li.s i { border-style: dashed; }
.jx-trilha li.s span { text-decoration: line-through; opacity: .6; }
.jx-trilha li.a span { color: var(--ink); font-weight: 800; }
.jx-trilha li.a i { width: 22px; height: 22px; margin-top: -2px; background: var(--muted); border-color: var(--muted); }
.jx-trilha li.a.ok i { background: var(--green); border-color: var(--green); box-shadow: 0 0 0 4px var(--green-soft); }
.jx-trilha li.a.av i { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 0 4px var(--gold-soft); }
.jx-trilha li.a.er i { background: var(--red); border-color: var(--red); box-shadow: 0 0 0 4px var(--red-soft); }
.jx-ficha-parc { display: grid; gap: 6px; }
.jx-mp-grande { grid-auto-columns: minmax(0, 1fr); display: grid; }
.jx-mp-grande i { height: 10px; }
.jx-ficha-frase { margin: 0; }
.jx-ficha .btn { justify-self: start; }
.jx-pedido summary { cursor: pointer; }
.jx-pedido p { font-size: 13.5px; }

/* Configurações → Certificado digital (21/10/2026): cartão azul do certificado, envio do arquivo e os documentos assinados */
.ct-grade { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) { .ct-grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.ct-coluna { display: grid; gap: 12px; min-width: 0; }
.ct-cert { background: var(--ink); color: var(--cream); border-radius: var(--r-lg, 14px); padding: 16px; display: grid; gap: 8px; }
.ct-cert small { color: rgba(247,243,234,.6); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 800; }
.ct-cert > b { font-family: var(--font-serif); font-size: 18px; font-weight: var(--peso-titulo); overflow-wrap: anywhere; }
.ct-cert dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; font-size: 13px; }
.ct-cert dt { color: rgba(247,243,234,.6); }
.ct-cert dd { margin: 0; overflow-wrap: anywhere; }
.ct-validade { display: grid; gap: 5px; }
.ct-trilho { height: 7px; border-radius: 9px; background: rgba(247,243,234,.16); overflow: hidden; }
.ct-barra { height: 100%; background: linear-gradient(90deg, #C8922A, #E8B33C); }
.ct-barra.ct-perto { background: #C7735F; }
.ct-validade span { font-size: 12.5px; color: var(--gold); font-weight: 700; }
.ct-eti { justify-self: start; font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 99px; background: #BFDECD; color: #0F4C29; }
.ct-arquivo { position: relative; border: 1.5px dashed rgba(10,17,48,.25); border-radius: var(--r-md); padding: 16px; display: grid; gap: 4px; justify-items: center; text-align: center;
  background: var(--sunken); cursor: pointer; }
.ct-arquivo input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.ct-arquivo:focus-within { outline: 2px solid var(--gold); outline-offset: 2px; }
.ct-arquivo-ic { width: 40px; height: 40px; border-radius: 10px; background: var(--gold-soft); color: var(--gold-ink); display: grid; place-items: center; }
.ct-arquivo b { font-size: 14px; overflow-wrap: anywhere; }
.ct-arquivo.ok { border-style: solid; border-color: rgba(31,168,85,.45); background: var(--green-soft); }
.ct-arquivo.ok .ct-arquivo-ic { background: var(--green); color: #fff; }
.ct-remover { color: var(--red); }

/* ---------- Oportunidade de regularização na ficha do caso do Jurídico (admin/juridico_caso.html, 21/10/2026) ---------- */
.rg-adm { margin-bottom: 16px; }
.rg-adm-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.rg-adm h3.sj-titulo { font-size: 15px; margin-top: 6px; }
.rg-adm-div { border: 1px solid var(--line); border-radius: 12px; padding: 0; }
.rg-adm-div > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 10px 12px; }
.rg-adm-div > summary::-webkit-details-marker { display: none; }
.rg-adm-div > summary > span { display: grid; min-width: 0; }
.rg-adm-div > summary .apoio { font-size: 12.5px; }
.rg-adm-div > form { padding: 0 12px 12px; }
.rg-adm-calc { background: var(--sunken); border-radius: 12px; padding: 10px 12px; display: grid; gap: 4px; font-size: 13.5px; }
.rg-adm-calc div { display: flex; justify-content: space-between; gap: 10px; }
.rg-adm-calc .forte { font-weight: 800; border-top: 1px dashed var(--line); padding-top: 5px; }
.rg-adm-doc { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; margin: 0; }
.rg-adm-doc > span { min-width: 0; overflow-wrap: anywhere; display: grid; }
.rg-adm-doc .apoio { font-size: 11.5px; }
.rg-adm-chave { display: inline-flex; align-items: center; gap: 6px; font-family: inherit; font-size: 12px; font-weight: 800; color: var(--muted); background: transparent; border: 0; cursor: pointer; white-space: nowrap; padding: 4px; }
.rg-adm-chave i { width: 34px; height: 20px; border-radius: 999px; background: rgba(10,17,48,.18); position: relative; display: inline-block; }
.rg-adm-chave i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; }
.rg-adm-chave.on { color: var(--green-ink); }
.rg-adm-chave.on i { background: var(--green); }
.rg-adm-chave.on i::after { left: 16px; }
.rg-adm-chave:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 2px; border-radius: 6px; }
.rg-adm-check { display: grid; gap: 8px; }
.rg-adm-ck { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.rg-adm-ck > span:nth-child(2) { display: grid; min-width: 0; }
.rg-adm-ck form { margin: 0; }
.rg-adm-o { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; color: #fff; }
.rg-adm-ck.feito .rg-adm-o { background: var(--green); border-color: var(--green); }
.rg-adm-o svg { width: 12px; height: 12px; }


/* Ficha do caso no Jurídico, enxuta (protótipo aprovado em 22/10/2026): cliente e valor no topo, um cartão "O que fazer agora", o resto recolhido */
.jc { max-width: 720px; margin: 0 auto; display: grid; gap: 12px; }
.jc-voltar { font-weight: 700; color: var(--muted); text-decoration: none; }
.jc-cab { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px; display: grid; gap: 10px; }
.jc-cab h1 { margin: 0; font-size: 20px; line-height: 1.25; text-wrap: balance; }
.jc-cab .apoio { margin: 0; }
.jc-cab-linha { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.jc-valor small { display: block; font-size: 12px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.jc-valor b { font-size: 26px; }
.jc-etqs { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.jc-agora { background: var(--surface); border: 2px solid var(--gold); border-radius: 16px; padding: 16px; display: grid; gap: 10px; }
.jc-agora.jc-verde { border-color: var(--green); }
.jc-agora.jc-cinza { border-color: var(--line); }
.jc-rot { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-ink); }
.jc-verde .jc-rot { color: var(--green-ink); }
.jc-cinza .jc-rot { color: var(--muted); }
.jc-agora h2 { margin: 0; font-size: 18px; }
.jc-agora p { margin: 0; color: var(--muted); line-height: 1.45; }
.jc-agora > .btn, .jc-enviar > summary { width: 100%; justify-content: center; text-align: center; }
.jc-falhou { background: var(--red-soft); color: var(--red); border-radius: 10px; padding: 8px 10px; font-weight: 700; font-size: 13.5px; }
.jc-enviar > summary { list-style: none; cursor: pointer; }
.jc-enviar > summary::-webkit-details-marker { display: none; }
.jc-opcoes { display: grid; gap: 6px; margin-top: 8px; }
.jc-opcoes form { margin: 0; }
.jc-opcao { display: grid; gap: 2px; width: 100%; text-align: left; font: inherit; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--sunken); color: var(--ink); cursor: pointer; text-decoration: none; }
.jc-opcao:hover { border-color: var(--gold); background: var(--gold-soft); text-decoration: none; }
.jc-opcao span { font-size: 12.5px; color: var(--muted); }
.jc-opcao:disabled { opacity: .5; cursor: not-allowed; background: var(--sunken); border-color: var(--line); }
.jc-opcao-leve { background: var(--surface); }
.jc-msg summary { cursor: pointer; font-weight: 700; font-size: 13.5px; color: var(--muted); }
.jc-msg p { white-space: pre-line; background: var(--sunken); border: 1px dashed var(--line); border-radius: 10px; padding: 10px; font-size: 13.5px; color: var(--ink); margin-top: 6px; }
.jc-sec { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.jc-sec > summary { list-style: none; cursor: pointer; padding: 14px 16px; display: flex; justify-content: space-between; align-items: center; gap: 10px; font-weight: 800; }
.jc-sec > summary::-webkit-details-marker { display: none; }
.jc-sec > summary::after { content: "›"; font-size: 20px; color: var(--muted); transition: transform .15s; }
.jc-sec[open] > summary::after { transform: rotate(90deg); }
.jc-res { margin-left: auto; font-weight: 700; font-size: 13px; color: var(--muted); text-align: right; }
.jc-corpo { padding: 0 16px 16px; display: grid; gap: 10px; min-width: 0; }
.jc-lin { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.jc-lin:first-child { border-top: 0; }
.jc-lin-dir { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.jc-barra { width: 100%; height: 8px; border: 0; border-radius: 99px; background: var(--sunken); overflow: hidden; -webkit-appearance: none; appearance: none; }
.jc-barra::-webkit-progress-bar { background: var(--sunken); border-radius: 99px; }
.jc-barra::-webkit-progress-value { background: var(--red); border-radius: 99px; }
.jc-barra::-moz-progress-bar { background: var(--red); border-radius: 99px; }
.jc-barra-media::-webkit-progress-value { background: var(--gold); }
.jc-barra-media::-moz-progress-bar { background: var(--gold); }
.jc-barra-forte::-webkit-progress-value { background: var(--green); }
.jc-barra-forte::-moz-progress-bar { background: var(--green); }
.jc-dica { background: var(--gold-soft); color: var(--gold-ink); border-radius: 10px; padding: 9px 11px; font-size: 13.5px; font-weight: 700; margin: 0; }
.jc-provas { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.jc-provas li { display: flex; justify-content: space-between; gap: 8px; }
.jc-provas li.tem { color: var(--green-ink); }
.jc-tl { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 13.5px; }
.jc-tl li { display: grid; grid-template-columns: 48px 1fr; gap: 8px; }
.jc-tl b { color: var(--muted); }
.jc-perigo { color: var(--red); }

/* Contas a receber no celular: modo "Selecionar" para receber alguns títulos de uma vez (22/10/2026) */
.cf-sel { display: none; }
.cf-selecionando .cf-cartao { position: relative; padding-left: 46px; cursor: pointer; }
.cf-selecionando .cf-sel { display: flex; position: absolute; left: 12px; top: 0; bottom: 0; align-items: center; }
.cf-sel input { width: 22px; height: 22px; accent-color: var(--gold-ink); }
.cf-selecionando .cf-cartao.cf-marcado { border-color: var(--gold); background: var(--gold-soft); }
.cf-sel-barra { position: fixed; left: 12px; right: 12px; bottom: calc(var(--barra-h, 66px) + 10px); z-index: 45; background: var(--ink); color: #fff; border-radius: 14px;
  padding: 10px 10px 10px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; box-shadow: var(--shadow); }
.cf-sel-barra[hidden] { display: none; }
.cf-sel-barra > span { display: grid; gap: 1px; }
.cf-sel-barra b { font-size: 14px; }
.cf-sel-barra .num { color: var(--gold); font-weight: 800; font-size: 17px; }
.cf-sel-barra .cf-btn-pagar { width: auto; padding: 0 22px; background: var(--gold); color: var(--ink); font-weight: 800; }
#cf-selecionar.ativo { background: var(--gold-soft); border-color: var(--gold); color: var(--gold-ink); }

/* Ficha do cliente → Resumo: cartão "Acesso ao app" (22/10/2026) */
.aa-cartao { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; display: grid; gap: 6px; margin: 14px 16px 4px; }
.aa-topo { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.aa-tit { font-weight: 800; }
.aa-linha { margin: 0; font-size: 14px; color: var(--ink); }
.aa-login { margin: 0; font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.aa-btn { justify-self: start; display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; }

/* Contas a receber: faixa dos títulos que estão no Jurídico (fora da lista e dos totais) (22/10/2026) */
.cr-jur { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--sunken); border: 1px solid var(--line);
  border-radius: 12px; padding: 10px 14px; margin: 8px 0; color: var(--ink); text-decoration: none; font-size: 14px; }
.cr-jur small { color: var(--muted); font-size: 12px; margin-left: 4px; }
.cr-jur b { color: var(--gold-ink); white-space: nowrap; }
.cr-jur.ativo { background: var(--gold-soft); border-color: var(--gold); }
.cr-jur:hover { text-decoration: none; border-color: var(--gold); }

/* Jurídico → Dívidas antigas (protótipo aprovado em 22/10/2026) */
.da { max-width: 760px; margin: 0 auto; display: grid; gap: 12px; }
.da-topo { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.da-topo h1 { margin: 0; }
.da-nota { margin: 0; }
.da-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 900px) { .da-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.da-tile { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px; display: grid; gap: 2px; min-width: 0; color: var(--ink); text-decoration: none; }
.da-tile small { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.da-tile b { font-size: 20px; }
.da-tile span { font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.da-tile.da-alerta { border-color: var(--red); background: var(--red-soft); }
.da-tile.da-alerta small, .da-tile.da-alerta span { color: var(--red); }
a.da-tile:hover { text-decoration: none; border-color: var(--gold); }
.da-grupo { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin: 6px 2px 0; }
.da-lista { display: grid; gap: 8px; }
.da-lin { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; }
.da-nome { font-weight: 800; line-height: 1.25; min-width: 0; }
.da-val { font-size: 17px; font-weight: 700; text-align: right; white-space: nowrap; }
.da-val small { display: block; font-size: 11.5px; color: var(--muted); font-weight: 700; }
.da-det { font-size: 12.5px; color: var(--muted); grid-column: 1 / -1; }
.da-rod { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.da-mais { display: block; text-align: center; color: var(--muted); font-weight: 700; border: 1px dashed var(--line); border-radius: 12px; padding: 10px; text-decoration: none; }
.da-mais:hover { border-color: var(--gold); text-decoration: none; }
.da-vazio { text-align: center; padding: 20px 0; }

/* Novo cliente: aviso de cliente parecido na carteira (22/10/2026) */
.cd-aviso { display: grid; gap: 6px; }
.cd-lista { margin: 0; padding-left: 18px; display: grid; gap: 4px; }

/* Rotas sugeridas pelo escritório (Rotas → Montar rota, 23/10/2026) */
.rsg { margin: 0 0 18px; }
.rsg-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.rsg-cab h2 { font-size: 18px; margin: 0; }
.rsg-nota { margin: 4px 0 10px; }
.rsg-lista { display: grid; gap: 8px; }
.rsg-item { overflow: hidden; }
.rsg-item.rsg-marcada { opacity: .8; }
.rsg-sum { list-style: none; cursor: pointer; padding: 12px 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.rsg-sum::-webkit-details-marker { display: none; }
.rsg-nome { font-weight: 700; font-size: 15px; }
.rsg-cidades { flex-basis: 100%; font-size: 13px; color: var(--muted); }
.rsg-corpo { border-top: 1px solid var(--line); padding: 12px 14px; display: grid; gap: 12px; }
.rsg-clientes { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 14px; }
.rsg-clientes li { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.rsg-tirar .btn { height: 28px; padding: 0 10px; font-size: 12px; }
.rsg-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.rsg-form .campo { min-width: 160px; }

/* Proposta comercial pelo link /proposta/<token> (propostas.py, 23/10/2026) */
.prc { max-width: 560px; margin: 0 auto; display: grid; gap: 14px; }
.prc-oport { background: var(--ink); color: #fff; border-radius: 18px; padding: 18px; }
.prc-selo { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); background: var(--gold); border-radius: 999px; padding: 3px 10px; }
.prc-oport h1 { font-size: 24px; margin: 10px 0 0; color: #fff; text-wrap: balance; }
.prc-oport p { margin: 6px 0 0; color: rgba(255,255,255,.78); font-size: 14px; }
.prc-economia { margin-top: 14px; background: rgba(255,255,255,.08); border-radius: 12px; padding: 10px 12px; display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: baseline; }
.prc-economia span { font-size: 12.5px; color: rgba(255,255,255,.75); }
.prc-economia b { font-family: var(--font-serif); font-size: 28px; color: var(--gold); grid-row: 1 / 3; grid-column: 2; text-align: right; font-variant-numeric: tabular-nums; }
.prc-economia .prc-riscado { text-decoration: line-through; }
.prc-economia em { grid-column: 1 / -1; font-style: normal; font-weight: 800; color: #8FE0B0; font-size: 13.5px; }
.prc-vantagens { display: flex; flex-wrap: wrap; gap: 6px; }
.prc-vantagens span { font-size: 12.5px; font-weight: 800; color: var(--green-ink, #1B8A4B); background: var(--green-soft, #E4F0E9); border-radius: 999px; padding: 4px 10px; }
.prc-aviso { margin: 0; }
.prc-itens { padding: 14px 16px; }
.prc-itens h2 { font-size: 16px; margin: 0 0 4px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.prc-itens h2 span { font-size: 12px; font-weight: 600; color: var(--muted); font-family: inherit; }
.prc-item { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.prc-item.prc-zerado { opacity: .5; }
.prc-foto { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; background: var(--sunken); border: 1px solid var(--line); }
.prc-sem-foto { display: grid; place-items: center; font-weight: 800; color: var(--gold-ink); text-transform: uppercase; }
.prc-item-corpo b { display: block; font-size: 14px; line-height: 1.25; overflow-wrap: anywhere; }
.prc-item-corpo .apoio { display: block; font-size: 12px; }
.prc-qtd { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.prc-qtd button { width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface); font-size: 17px; font-weight: 800; color: var(--ink); }
.prc-qtd input { width: 46px; height: 32px; text-align: center; border: 1px solid var(--line); border-radius: 9px; font-weight: 800; font-size: 15px; }
.prc-preco { font-weight: 800; font-size: 14px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.prc-totais { margin-top: 10px; display: grid; gap: 4px; font-variant-numeric: tabular-nums; }
.prc-totais > div { display: flex; justify-content: space-between; font-size: 14px; }
.prc-pix { background: var(--green-soft, #E4F0E9); color: var(--green-ink, #1B8A4B); border-radius: 10px; padding: 8px 10px; font-weight: 800; }
.prc-pix b { font-size: 18px; }
.prc-formas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.prc-formas span { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--sunken); border: 1px solid var(--line); color: var(--muted); }
.prc-clube { background: var(--ink); color: #fff; border-radius: 14px; padding: 14px 16px; }
.prc-clube small { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.prc-clube b { display: block; font-size: 26px; color: var(--gold); margin-top: 2px; }
.prc-clube span { font-size: 13px; color: rgba(255,255,255,.8); }
.prc-acoes { display: grid; gap: 8px; margin-top: 14px; }
.prc-btn { justify-content: center; width: 100%; padding: 13px 14px; font-size: 15px; font-weight: 800; border-radius: 12px; }
.prc-btn-ink { background: var(--ink); color: #fff; border-color: var(--ink); }
.prc-acesso { padding: 14px 16px; display: grid; gap: 10px; }
.prc-acesso h2 { font-size: 16px; margin: 0; }
.prc-vend { display: flex; gap: 10px; align-items: center; padding: 12px 14px; }
.prc-vend b { display: block; }
.prc-av { width: 40px; height: 40px; border-radius: 50%; background: var(--gold-soft); color: var(--gold-ink); display: grid; place-items: center; font-weight: 800; font-size: 16px; }
.prc-vend a { margin-left: auto; font-weight: 800; font-size: 13px; color: var(--green-ink, #1B8A4B); text-decoration: none; border: 1px solid var(--green, #1FA855); border-radius: 999px; padding: 6px 12px; }
.prc-rodape { text-align: center; font-size: 11.5px; margin: 0; }

/* Fila comercial (Escritório → Fila comercial, 23/10/2026) */
.fcm { display: grid; gap: 14px; }
.fcm-topo { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.fcm-topo h1 { margin: 0; }
.fcm-topo .apoio { margin: 4px 0 0; max-width: 70ch; }
.fcm-liga { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fcm-numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.fcm-num { padding: 12px 14px; }
.fcm-num small { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.fcm-num b { display: block; font-size: 22px; font-variant-numeric: tabular-nums; }
.fcm-num span { font-size: 12.5px; color: var(--muted); }
.fcm-destaque { background: var(--ink); color: #fff; border-color: var(--ink); }
.fcm-destaque small, .fcm-destaque span { color: rgba(255,255,255,.75); }
.fcm-destaque b { color: var(--gold); }
.fcm-bloco { padding: 14px 16px; display: grid; gap: 10px; }
.fcm-bloco h2 { font-size: 16px; margin: 0; }
.fcm-bloco-cab { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.fcm-limite { display: flex; gap: 8px; align-items: flex-end; }
.fcm-limite input { width: 80px; }
.fcm-lista { display: grid; gap: 6px; }
.fcm-item { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.fcm-item summary { list-style: none; cursor: pointer; padding: 10px 12px; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.fcm-item summary::-webkit-details-marker { display: none; }
.fcm-ordem { min-width: 22px; height: 22px; border-radius: 50%; background: var(--gold-soft); color: var(--gold-ink); font-size: 12px; font-weight: 800; display: inline-grid; place-items: center; }
.fcm-corpo { padding: 0 12px 12px; display: grid; gap: 8px; }
.fcm-msg { white-space: pre-wrap; background: #D9FDD3; border-radius: 10px; padding: 10px 12px; font-size: 14px; }
.fcm-resp { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.fcm-resp:last-child { border-bottom: 0; }

/* Fechar pedido (equipe): últimos pedidos e prazos que o cliente costuma fazer (23/10/2026) */
.ck-hist { padding-top: 10px; border-top: 1px solid var(--line); display: grid; gap: 6px; }
.ck-hist-tit { margin: 4px 0 0; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ck-hist-prazos { display: flex; flex-wrap: wrap; gap: 6px; }
.ck-hist-prazo { cursor: pointer; }
.ck-hist-ped { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 2px 10px; font-size: 13px; align-items: baseline; }
.ck-hist-ped b { font-variant-numeric: tabular-nums; }
.ck-hist-ped-prazo { grid-column: 2 / -1; font-size: 12px; }
.ck-hist-ped-prazo:empty { display: none; }

/* Fechar pedido no computador largo: as parcelas na largura da página, este pedido à esquerda e o que já está em aberto à direita (23/10/2026) */
@media (min-width: 1280px) {
  .ck-parcelas-largura { padding: 14px 16px; }
  .ck-parcelas-largura .parcelas-preview-wrap { margin-top: 0; }
  .ck-parcelas-largura .pp-comparar { grid-template-columns: minmax(0, 1fr); }
  .ck-parcelas-largura .pp-comparar:has(.pp-abertas-lado:not([hidden])) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
  .ck-parcelas-largura .pp-deste { order: 1; }
  .ck-parcelas-largura .pp-abertas-lado { order: 2; }
}
.pp-dividir { font-size: 13px; }

/* Fechar pedido: item fora do catálogo (23/10/2026) */
.ck-avulsos .cartao-cab { flex-wrap: wrap; }
.ck-av-lista { display: grid; gap: 8px; }
.ck-av-lista:empty { display: none; }
.ck-av-linha { display: grid; grid-template-columns: minmax(0, 1fr) 80px 130px auto; gap: 8px; align-items: end; }
.ck-av-rodape { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.ck-av-total { font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) {
  .ck-av-linha { grid-template-columns: 1fr 1fr auto; }
  .ck-av-c-desc { grid-column: 1 / -1; }
}

/* Continha do cliente /continha/<token> (continha.py, 23/10/2026) */
.cnh { max-width: 560px; margin: 0 auto; display: grid; gap: 14px; }
.cnh-hero { background: var(--ink); color: #fff; border-radius: 18px; padding: 18px; display: grid; gap: 10px; }
.cnh-selo { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.cnh-hero h1 { margin: 0; font-size: 16px; font-weight: 600; color: rgba(255,255,255,.82); text-wrap: balance; }
.cnh-falta { display: grid; }
.cnh-falta span { font-size: 13px; color: rgba(255,255,255,.75); }
.cnh-falta b { font-family: var(--font-serif, Outfit, sans-serif); font-size: 32px; line-height: 1.1; color: #fff; }
.cnh-trilho { height: 10px; border-radius: 999px; background: rgba(255,255,255,.16); overflow: hidden; }
.cnh-trilho i { display: block; height: 100%; background: linear-gradient(90deg, #C8922A, #E8B33C); border-radius: 999px; }
.cnh-leg { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; color: rgba(255,255,255,.8); }
.cnh-pix, .cnh-lista, .cnh-nota { padding: 14px 16px; display: grid; gap: 10px; }
.cnh-pix h2, .cnh-lista h2 { margin: 0; font-size: 16px; }
.cnh-form { display: grid; gap: 10px; }
.cnh-valores { display: flex; flex-wrap: wrap; gap: 8px; }
.cnh-valores .chip { height: 38px; padding: 0 14px; font-size: 14px; font-weight: 700; cursor: pointer; }
.cnh-pag { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: 14px; }
.cnh-pag:last-child { border-bottom: 0; }
.cnh-pag b { color: var(--green-ink); white-space: nowrap; }
.cnh-pag.cnh-origem b { color: var(--ink); }
.cnh-nota { font-size: 14px; } .cnh-nota span { color: var(--muted); }
/* cartão do lembrete da continha no Início do admin */
.cnh-lemb { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: var(--r-md); padding: 12px 14px; display: grid; gap: 8px; }
.cnh-lemb-atraso { border-left-color: var(--red); background: var(--red-soft); }
.cnh-lemb-olho { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-ink); }
.cnh-lemb-atraso .cnh-lemb-olho { color: var(--red); }
.cnh-lemb-nome { font-size: 16px; }
.cnh-lemb-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.cnh-lemb-nums div { background: var(--sunken); border: 1px solid var(--line); border-radius: 10px; padding: 6px 8px; display: grid; }
.cnh-lemb-nums small { font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.cnh-lemb-nums b { font-size: 14.5px; }
.cnh-lemb-sub { font-size: 12.5px; color: var(--muted); }
.cnh-lemb-btn { width: 100%; justify-content: center; }
.cnh-lemb-dois { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cnh-lemb-dois .btn { justify-content: center; }
.cnh-lemb-ok { border-left-color: var(--green); }
.cnh-lemb-trilho { height: 8px; border-radius: 999px; background: var(--sunken); border: 1px solid var(--line); overflow: hidden; }
.cnh-lemb-trilho i { display: block; height: 100%; background: linear-gradient(90deg, #C8922A, #E8B33C); }
.cnh-lemb-pags summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--muted); }
.cnh-lemb-pags .cnh-pag { font-size: 13px; }
.cnh-tela { display: grid; gap: 12px; }
.cnh-tela h1 { margin: 0; }
.cnh-grade { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); align-items: start; }

/* Contas a pagar organizadas + a semana do caixa (contas_pagar.py, 26/10/2026) */
.cxp { display: grid; gap: 12px; }
.cxp-cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 12px; }
.cxp-cab h1 { margin: 0; }
.cxp-semana { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--green); border-radius: var(--r-md); padding: 12px 14px; display: grid; gap: 9px; }
.cxp-semana-ruim { border-left-color: var(--red); }
.cxp-olho { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-ink); }
.cxp-titulo { font-size: 16px; line-height: 1.3; }
.cxp-tri { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.cxp-tri div { background: var(--sunken); border: 1px solid var(--line); border-radius: 10px; padding: 7px 8px; display: grid; }
.cxp-tri small { font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.cxp-tri b { font-size: 15px; }
.cxp-tri span { font-size: 11px; color: var(--muted); }
.cxp-sai b { color: var(--red); }
.cxp-atrasado { background: var(--red-soft); color: #642720; border-radius: 10px; padding: 8px 10px; font-size: 13px; }
.cxp-dias { display: grid; gap: 3px; }
.cxp-dia { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 13px; padding: 3px 0; border-bottom: 1px dashed var(--line); }
.cxp-dia:last-child { border-bottom: 0; }
.cxp-mov { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.cxp-mov em { font-style: normal; font-size: 12px; }
.cxp-mov .ent { color: var(--green-ink); } .cxp-mov .sai { color: var(--red); }
.cxp-dia b.neg { color: var(--red); }
.cxp-nota { font-size: 12px; color: var(--muted); }
.cxp-saldo { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.cxp-saldo .campo { flex: 1 1 160px; min-width: 0; }
.cxp-ver { justify-content: center; }
.cxp-abas { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.cxp-aba { flex: none; display: inline-flex; gap: 6px; align-items: center; border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 7px 12px; font-weight: 700; font-size: 13px; color: var(--ink); text-decoration: none; }
.cxp-aba em { font-style: normal; color: var(--gold-ink); font-size: 12px; }
.cxp-aba.ativa { background: var(--ink); color: #fff; border-color: var(--ink); }
.cxp-aba.ativa em { color: var(--gold); }
.cxp-filtros { position: relative; display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.cxp-filtros .p360-fbtn.ativo { background: var(--ink); color: #fff; border-color: var(--ink); }
.cxp-grupo { display: grid; gap: 6px; }
.cxp-grupo h2 { margin: 4px 2px 0; font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); display: flex; justify-content: space-between; }
.cxp-grupo h2 span { color: var(--ink); }
.cxp-conta { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 12px; display: grid; gap: 4px; }
.cxp-venc { border-left: 4px solid var(--red); }
.cxp-c1 { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.cxp-c1 b { font-size: 14.5px; min-width: 0; overflow-wrap: anywhere; }
.cxp-v { font-weight: 800; white-space: nowrap; }
.cxp-c2 { display: flex; justify-content: space-between; gap: 8px; align-items: center; font-size: 12.5px; color: var(--muted); }
.cxp-c2 > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.cxp-acoes { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; margin-top: 2px; }
.cxp-det summary { list-style: none; cursor: pointer; height: 30px; display: inline-flex; align-items: center; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-sm); font-size: 12.5px; font-weight: 700; background: var(--sunken); }
.cxp-det summary::-webkit-details-marker { display: none; }
.cxp-det[open] { flex-basis: 100%; }
.cxp-form { display: grid; gap: 8px; margin-top: 8px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); align-items: end; }
.cxp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; align-items: center; }
.cxp-chips .chip { height: 30px; font-size: 12.5px; cursor: pointer; }
.cxp-link { font-size: 12.5px; align-self: center; }
.cxp-nova { padding: 12px 14px; }
.cxp-nova summary { cursor: pointer; font-weight: 700; }
.cxp-links { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cxp-up { padding: 14px 16px; display: grid; gap: 8px; }
.cxp-vales { display: grid; gap: 6px; }
.cxp-vale { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 9px 12px; font-size: 14px; }
.cxp-resumo { padding: 14px 16px; display: grid; gap: 4px; }
.cxp-resumo h2 { margin: 0 0 4px; font-size: 16px; }
.cxp-linha { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px dashed var(--line); font-size: 14px; }
.cxp-sub { padding-left: 12px; color: var(--muted); }
/* Contas a pagar: marcar várias e pagar de uma vez (27/10/2026) */
.cxp-marca { display: inline-flex; gap: 8px; align-items: center; min-width: 0; cursor: pointer; }
.cxp-marca input { width: 20px; height: 20px; flex: none; accent-color: var(--green); }
.cxp-lote { position: sticky; bottom: calc(var(--barra-h, 0px) + 8px); z-index: 5; background: var(--ink); color: #fff; border-radius: var(--r-md); padding: 10px 12px;
  display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); align-items: end; box-shadow: 0 6px 20px rgba(10, 17, 48, .25); }
.cxp-lote[hidden] { display: none; }
.cxp-lote-tit { grid-column: 1 / -1; font-size: 14px; }
.cxp-lote .campo { color: #fff; }
@media (max-width: 600px) { .cxp-lote { grid-template-columns: 1fr 1fr; gap: 6px; padding: 9px 10px; } .cxp-lote .campo input, .cxp-lote .campo select { height: 38px; } }

/* ---- Fechar pedido da equipe enxuto (pedido do dono, 27/10/2026): botões vivos, pouco texto, extras recolhidos ---------------- */
.ck-rua .ck-formas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ck-rua .ck-forma { min-height: 52px; font-size: 15.5px; font-weight: 800; border-width: 2px; border-radius: 14px; text-align: center; padding: 8px 10px; }
.ck-rua .ck-forma[aria-pressed="true"] { border-color: var(--green); background: var(--green-soft); color: var(--green-ink); }
.ck-rua .chip-parcela { min-height: 42px; font-size: 14.5px; font-weight: 800; border-width: 2px; }
.ck-rua .chip-parcela.ativo { background: var(--ink); border-color: var(--ink); color: #fff; }
.ck-rua .acoes-checkout { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: stretch; }
.ck-rua .acoes-checkout > .btn-ouro { grid-column: 1 / -1; }
.ck-rua .acoes-checkout > .ck-validade-orcamento, .ck-rua .acoes-checkout > .orcamento-status { grid-column: 1 / -1; }
.ck-rua .ck-finalizar, #ck-barra-fixa .btn { background: var(--green); border-color: var(--green); color: #fff; font-weight: 800; font-size: 17px;
  min-height: 56px; border-radius: 14px; box-shadow: 0 5px 0 -2px var(--green-ink); }
.ck-rua .ck-finalizar:hover, #ck-barra-fixa .btn:hover { background: var(--green-ink); border-color: var(--green-ink); }
.ck-rua .ck-finalizar:active, #ck-barra-fixa .btn:active { transform: translateY(2px); box-shadow: none; }
.ck-rua .ck-sec { min-height: 46px; font-size: 14px; }
/* recolhidos: vendedor e estoque, observação, mais opções */
.ck-rua details > summary { list-style: none; cursor: pointer; }
.ck-rua details > summary::-webkit-details-marker { display: none; }
.ck-vend > .ck-vend-linha { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; }
.ck-vend-linha small { color: var(--muted); font-size: 12px; font-weight: 700; }
.ck-vend-linha b { font-weight: 800; }
.ck-vend-trocar { flex: none; color: var(--gold-ink); font-weight: 800; font-size: 14px; }
.ck-vend[open] .ck-vend-trocar { visibility: hidden; }
.ck-obs > summary, .ck-mais > summary { color: var(--gold-ink); font-weight: 800; font-size: 14.5px; padding: 8px 0; }
.ck-mais > summary::after { content: " ▾"; }
.ck-mais[open] > summary::after { content: " ▴"; }
.ck-mais > .pilha { margin-top: 6px; }
.ck-rua .campo-parcelas-boleto-wrap[hidden] { display: none; }
.ck-rua .campo-parcelas-boleto-wrap > .chips-parcelas { order: -1; }
.ck-rua .campo-parcelas-boleto-wrap > .boleto-aviso { order: -2; }

/* catálogo: produto já no pedido em verde forte, não em tom pastel (pedido do dono, 27/10/2026) */
.produto-card.no-carrinho { border-color: var(--green); box-shadow: 0 0 0 2px var(--green); }
.produto-qtd .qtd-stepper { background: var(--green); border-color: var(--green-ink); }
.produto-qtd .qtd-stepper button { color: #fff; font-weight: 800; }
.produto-qtd .qtd-stepper button:hover { background: rgba(255,255,255,.16); }
.produto-qtd .qtd-valor, .produto-qtd .qtd-stepper .qtd-input { color: #fff; font-weight: 800; background: transparent; }

/* carrinho do topo: verde com o número de itens quando tem produto (pedido do dono, 27/10/2026) */
.tc-btn-carrinho { position: relative; }
.tc-btn-carrinho.tc-carrinho-cheio { background: var(--green); color: #fff; }
.tc-carrinho-n { position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
  background: #fff; color: var(--green-ink); border: 2px solid var(--green); font-size: 11px; font-weight: 800; line-height: 16px; text-align: center; }
.tc-carrinho-n[hidden] { display: none; }
@media (min-width: 901px) { .tc-carrinho-n { display: none; } }      /* no computador o número já está no rótulo "Carrinho · N" */
/* topo da equipe no catálogo: cliente do pedido e valor do carrinho */
.tc-pedido { display: flex; flex-direction: column; align-items: flex-end; min-width: 0; max-width: 46vw; text-decoration: none; color: var(--cream, #F7F3EA); line-height: 1.15; }
.tc-pedido-cli { font-size: 12px; font-weight: 700; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tc-pedido strong { font-size: 15px; font-weight: 800; color: var(--gold); }

/* estoque do pedido no cartão: vermelho só quando passa do que tem (27/10/2026) */
.pe-cel.falta { background: var(--red-soft); color: var(--red); }

/* endereço de cada cliente nas telas de rota (pedido do dono, 28/10/2026) */
.rp-end, .ra-end { display: block; font-size: 12px; color: var(--ink); opacity: .78; line-height: 1.3; margin-top: 1px; overflow-wrap: anywhere; }
.rp-end-falta, .ra-end-falta { color: var(--red); opacity: 1; font-weight: 600; }

/* vendas esperando o admin no topo de Pedidos (28/10/2026): vermelho, com Aprovar e Reprovar ali mesmo */
.apv-fila { display: grid; gap: 10px; margin: 0 0 16px; padding: 14px; border-radius: var(--r-md, 14px); background: var(--red-soft); border: 2px solid var(--red); }
.apv-tit { margin: 0; font-size: 15px; font-weight: 800; color: var(--red); }
.apv-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 12px; border-radius: 12px; background: var(--surface); }
.apv-dados { display: grid; gap: 3px; min-width: 0; text-decoration: none; color: var(--ink); }
.apv-cliente { font-size: 14.5px; overflow-wrap: anywhere; }
.apv-meta { font-size: 12.5px; color: var(--muted); }
.apv-motivo { font-size: 12.5px; font-weight: 700; color: var(--red); overflow-wrap: anywhere; }
.apv-acoes { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; justify-content: flex-end; }
.apv-acoes form { margin: 0; }
.btn.apv-aprovar { background: var(--green); border-color: var(--green); color: #fff; font-weight: 800; }
.apv-reprovar > summary { list-style: none; cursor: pointer; }
.apv-reprovar > summary::-webkit-details-marker { display: none; }
.apv-reprovar[open] { flex-basis: 100%; }
.apv-reprovar-form { display: grid; gap: 8px; margin-top: 8px; }
.btn.apv-reprovar-btn { background: var(--red); border-color: var(--red); color: #fff; font-weight: 800; }
@media (max-width: 640px) { .apv-item { grid-template-columns: 1fr; } .apv-acoes { justify-content: stretch; } .apv-acoes form, .apv-reprovar { flex: 1; } .apv-acoes .btn { width: 100%; } }
.pnd-item.pnd-aprovar { background: var(--red-soft); box-shadow: inset 4px 0 0 var(--red); }
.pnd-reprovado { display: block; font-size: 11.5px; font-weight: 700; color: var(--red); }
.rsm-decidir { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-start; margin: 10px 0; }
.rsm-decidir form { margin: 0; }
.rsm-reprovado p { margin: 6px 0 0; }
/* boleto acima do prazo do cliente no fechar pedido do vendedor (28/10/2026) */
.boleto-acima { display: grid; gap: 8px; padding: 12px; border-radius: 12px; background: var(--red-soft); border: 1.5px solid var(--red); }
.boleto-acima[hidden] { display: none; }
.boleto-acima-tx { margin: 0; font-weight: 800; color: var(--red); font-size: 13.5px; }
.boleto-acima-check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--ink); cursor: pointer; }
.boleto-acima-check input { width: 22px; height: 22px; flex: none; margin-top: 1px; accent-color: var(--red); }
.boleto-acima-check b { display: block; font-size: 14px; }

/* Clientes no mapa (rota nova, 28/10/2026): mapa grande, legenda que filtra, balão do cliente por cima do mapa */
.mc { display: grid; gap: 10px; }
.mc-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.mc-topo h1 { margin: 0; }
.mc-de { font-size: 15px; color: var(--muted); font-weight: 600; }
.mc-vend { position: relative; }
.mc-vend > summary { list-style: none; cursor: pointer; }
.mc-vend > summary::-webkit-details-marker { display: none; }
.mc-vend-lista { position: absolute; right: 0; top: calc(100% + 6px); z-index: 1200; display: flex; flex-wrap: wrap; gap: 6px; width: min(280px, 80vw);
  padding: 10px; background: var(--surface); border-radius: 12px; box-shadow: 0 12px 30px -12px rgba(10,17,48,.45); }
.mc-busca-campo { width: 100%; min-height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); font: inherit; font-size: 16px; }
.mc-legenda { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.mc-legenda::-webkit-scrollbar { display: none; }
.mc-leg { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1.5px solid var(--line);
  background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.mc-leg i { width: 11px; height: 11px; border-radius: 50%; }
.mc-leg small { color: var(--muted); font-weight: 700; }
.mc-leg[aria-pressed="false"] { opacity: .45; text-decoration: line-through; }
.mc-mapa-caixa { position: relative; border-radius: 16px; overflow: hidden; background: var(--sunken); border: 1px solid var(--line); }
.mc-mapa { height: clamp(320px, calc(100dvh - 300px - var(--barra-h, 0px)), 760px); width: 100%; }
.mc-pino { background: none; border: 0; filter: drop-shadow(0 2px 2px rgba(10,17,48,.35)); }
.mc-eu { position: absolute; right: 10px; bottom: 10px; z-index: 900; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px;
  border-radius: 999px; border: 0; background: var(--ink); color: #fff; font: inherit; font-size: 13px; font-weight: 800; box-shadow: 0 6px 16px -6px rgba(10,17,48,.6); cursor: pointer; }
.mc-eu svg { width: 16px; height: 16px; }
.mc-faltam, .mc-sem-mapa { position: absolute; left: 10px; top: 10px; right: 10px; z-index: 900; margin: 0; padding: 7px 10px; border-radius: 10px;
  background: rgba(255,255,255,.94); font-size: 12px; color: var(--muted); }
.mc-sem-mapa { position: static; }
.mc-balao { position: sticky; bottom: calc(var(--barra-h, 0px) + 8px); z-index: 950; display: grid; gap: 8px; padding: 14px; border-radius: 16px;
  background: var(--surface); box-shadow: 0 -6px 30px -14px rgba(10,17,48,.55); border: 1px solid var(--line); }
.mc-balao[hidden] { display: none; }
.mc-b-topo { display: flex; justify-content: space-between; align-items: center; }
.mc-b-cor { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.mc-b-cor i { width: 10px; height: 10px; border-radius: 50%; }
.mc-b-fechar { width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--sunken); font-size: 20px; line-height: 1; cursor: pointer; color: var(--ink); }
.mc-b-nome { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.mc-b-nome h2 { margin: 0; font-size: 17px; overflow-wrap: anywhere; }
.mc-b-km { flex: none; font-size: 14px; }
.mc-b-end { margin: 0; font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.mc-b-falta { color: var(--red); font-weight: 700; }
.mc-b-selos { display: flex; gap: 6px; flex-wrap: wrap; }
.mc-b-dados { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.mc-b-dados div { display: grid; gap: 1px; padding: 8px; border-radius: 10px; background: var(--sunken); }
.mc-b-dados small { font-size: 11px; color: var(--muted); }
.mc-b-dados b { font-size: 14px; }
.mc-b-aprox { margin: 0; font-size: 12px; color: var(--gold-ink); }
.mc-b-acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mc-b-acoes .btn { min-height: 48px; justify-content: center; font-weight: 800; }
.btn.mc-b-ir { background: var(--green); border-color: var(--green); color: #fff; }
.btn.mc-b-pedido { background: var(--gold); border-color: var(--gold); color: var(--ink); }
/* visitas sem pedido na ficha do cliente (28/10/2026) */
.vsv-cartao { display: grid; gap: 8px; margin: 0 0 14px; padding: 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.vsv-tit { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.vsv-item { display: grid; gap: 6px; padding-top: 8px; border-top: 1px solid var(--hair); }
.vsv-item:first-of-type { border-top: 0; padding-top: 0; }
.vsv-linha { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; }
.vsv-audio { width: 100%; height: 36px; }
.btn.mc-b-nao { background: var(--surface); border: 2px solid var(--red); color: var(--red); }
.mc-b-visita { margin: 0; font-size: 12.5px; color: var(--muted); }
.mc-b-ok { margin: 0; padding: 8px 10px; border-radius: 10px; background: var(--green-soft); color: var(--green-ink); font-weight: 800; font-size: 13px; }
.mc-nao-tit { color: var(--red); }
.mc-motivos { display: flex; flex-wrap: wrap; gap: 6px; }
.mc-motivo { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 2px solid var(--line); background: var(--surface); color: var(--ink);
  font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; }
.mc-motivo[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.mc-mic { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; background: var(--sunken); }
.mc-mic-btn { flex: none; width: 58px; height: 58px; border-radius: 50%; border: 0; background: var(--red); color: #fff; display: grid; place-items: center; cursor: pointer; }
.mc-mic-btn.gravando { box-shadow: 0 0 0 6px rgba(156,74,60,.25); }
.mc-mic-tx { display: grid; flex: 1; min-width: 0; }
.mc-mic-tx b { font-size: 14px; }
.mc-mic-tx span { font-size: 12px; color: var(--muted); }
.mc-nao-erro { margin: 0; color: var(--red); font-weight: 700; font-size: 13px; }
.btn.mc-nao-enviar { background: var(--green); border-color: var(--green); color: #fff; }
.btn.mc-nao-enviar:disabled { opacity: .45; }

/* canhoto: assinatura em tela cheia (28/10/2026) — rolar a página não risca mais a assinatura */
.cn-previa { display: grid; place-items: center; min-height: 96px; border: 1.5px dashed var(--line); border-radius: var(--r-md, 14px); background: var(--sunken); overflow: hidden; }
.cn-previa img { display: block; width: 100%; max-height: 140px; object-fit: contain; background: #fff; }
.cn-previa-vazia { font-size: 13px; color: var(--muted); }
.btn.cn-btn-assinar { width: 100%; min-height: 50px; margin-top: 8px; justify-content: center; background: var(--green); border-color: var(--green); color: #fff; font-weight: 800; font-size: 16px; }
.cn-tela { position: fixed; inset: 0; z-index: 3000; display: flex; flex-direction: column; gap: 10px; padding: max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom));
  background: var(--surface); }
.cn-tela[hidden] { display: none; }
.cn-tela-topo { display: grid; gap: 2px; }
.cn-tela-topo b { font-size: 17px; }
.cn-tela .cn-assina { flex: 1; min-height: 0; display: flex; background: #fff; }
.cn-tela .cn-assina canvas { flex: 1; height: auto; min-height: 0; }
.cn-tela .cn-linha { bottom: 22%; }
.cn-tela-acoes { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 8px; }
.cn-tela-acoes .btn { min-height: 52px; justify-content: center; font-weight: 800; }
.btn.cn-btn-salvar { background: var(--green); border-color: var(--green); color: #fff; }
.btn.cn-btn-salvar:disabled { opacity: .45; }
html.cn-assinando, html.cn-assinando body { overflow: hidden; overscroll-behavior: none; }

/* Filtro por cidade (29/10/2026): o botão "Cidade ▾" (partials/_filtro_cidade.html) em Clientes, Contas a receber e Pedidos.
   O balão é o .p360-fpainel dentro de .cp-filtros (lista em coluna, abaixo do botão); aqui só a altura com rolagem e, no canto direito, o lado. */
.cf-cidade, .cr-cidade-mob { display: flex; align-items: center; }
.cr-cidade-mob { margin: 0 0 8px; }
.toolbar .cf-cidade { flex: none; }
.fcid { display: inline-flex; }
.fcid .folha-filtro.p360-fpainel { max-height: 60vh; overflow-y: auto; overscroll-behavior: contain; }
.fcid-direita .folha-filtro.p360-fpainel { left: auto; right: 0; }
@media (max-width: 900px) {          /* no celular a lista de cidades sobe da parte de baixo (é comprida: abaixo do botão ficava atrás da barra do app) */
  .fcid .folha-filtro.p360-fpainel, .fcid-direita .folha-filtro.p360-fpainel { position: fixed; top: auto; left: 12px; right: 12px; bottom: calc(var(--barra-h, 66px) + 10px); width: auto; max-height: 60vh; z-index: 80; }
}


/* Pagamentos a conferir: subtítulos das duas partes (pedidos guardados no app · pedidos no Tiny), 29/10/2026 */
.pg-sub { font-size: 15px; margin: 18px 0 8px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.pg-sub .apoio { font-size: 12.5px; font-weight: 400; }

/* Clientes no mapa — "Visita feita" pela parada (rota nova, parte 2, 29/10/2026) */
.mc-parada { position: absolute; left: 10px; bottom: 10px; z-index: 900; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px;
  border-radius: 999px; border: 2px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; font-weight: 800;
  box-shadow: 0 6px 16px -8px rgba(10,17,48,.5); cursor: pointer; max-width: calc(100% - 150px); }
.mc-parada span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-parada i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--muted); }
.mc-parada[aria-pressed="true"] { border-color: var(--green); background: var(--green-soft); color: var(--green-ink); }
.mc-parada[aria-pressed="true"] i { background: var(--green); box-shadow: 0 0 0 4px rgba(31,168,85,.2); }
.mc-p-rot { color: var(--muted); }
.mc-p-lista { display: grid; gap: 8px; max-height: 42vh; overflow-y: auto; }
.mc-p-qual { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; border-radius: 14px; border: 2px solid var(--line); background: var(--surface);
  color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.mc-p-qual i { flex: none; width: 12px; height: 12px; border-radius: 50%; }
.mc-p-qual span { display: grid; gap: 1px; min-width: 0; }
.mc-p-qual b { font-size: 15px; overflow-wrap: anywhere; }
.mc-p-qual small { font-size: 12px; color: var(--muted); font-weight: 700; overflow-wrap: anywhere; }
.mc-p-qual em { margin-left: auto; flex: none; font-style: normal; font-weight: 800; font-size: 14px; }
.mc-p-chegou { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--green-soft); color: var(--green-ink);
  font-weight: 800; font-size: 14px; }
.mc-p-acoes { display: grid; gap: 8px; }
.mc-p-acoes .btn { min-height: 52px; justify-content: center; font-weight: 800; font-size: 16px; }
.btn.mc-p-guardar { background: var(--green); border-color: var(--green); color: #fff; }
.mc-p-nao-e-aqui { justify-self: center; font-size: 13px; }
.mc-busca-campo.mc-busca-destaque { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
.mc-p-acoes .btn.mc-p-pedido { background: var(--green); border-color: var(--green); color: #fff; }
.mc-p-acoes .btn.mc-b-nao { background: var(--red); border-color: var(--red); color: #fff; }
.mc-parada-dica { margin: 0; padding: 8px 12px; border-radius: 12px; background: var(--green-soft); color: var(--green-ink); font-size: 12.5px; font-weight: 700; }
.mc-parada-dica[hidden] { display: none; }

/* Consulta no SCPC pela API da associação (scpc.py, 29/10/2026) */
.cc-scpc { display: contents; margin: 0; }
.cc-item-largo { grid-column: 1 / -1; }
.scpc-cfg { margin-top: 16px; }

/* Pedido na rua (29/10/2026): barra do limite de desconto do vendedor no fechamento */
.ck-lim { display: grid; gap: 4px; margin-top: 8px; }
.ck-lim-trilho { height: 10px; border-radius: 9px; background: var(--sunken); border: 1px solid var(--line); overflow: hidden; }
.ck-lim-trilho i { display: block; height: 100%; width: 0; background: var(--green); border-radius: 9px; transition: width .2s; }
.ck-lim.passou .ck-lim-trilho i { background: var(--red); }
.ck-lim-tx { margin: 0; font-size: 13px; font-weight: 800; color: var(--muted); }
.ck-lim.passou .ck-lim-tx { color: var(--red); }
.ck-lim-passou { margin: 4px 0 0; padding: 8px 10px; border-radius: 10px; background: var(--red-soft); color: var(--red); font-size: 13px; font-weight: 700; }
.ck-lim-passou[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .ck-lim-trilho i { transition: none; } }
.resumo-total .ck-lim, .resumo-total .ck-lim-passou { flex: 1 1 100%; width: 100%; box-sizing: border-box; }

/* Pedido na rua, parte 2 (29/10/2026): pagamento do fechar pedido da equipe — prazo do cliente, últimas compras com o prazo (tocar repete),
   dias editáveis em cada parcela, "−" e "+ Parcela", e "Fica devendo R$ X até dd/mm". */
.ck-prazo-cliente { margin: 0; font-size: 11.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.ck-ultimas { display: grid; gap: 6px; }
.ck-ultimas-tit { margin: 0; font-size: 11.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.ck-ultimas-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.ck-ultima { border: 2px solid var(--line); background: var(--sunken); color: var(--ink); border-radius: 12px; padding: 7px 6px; text-align: center;
  cursor: pointer; font-variant-numeric: tabular-nums; }
.ck-ultima b { display: block; font-family: var(--font-serif); font-size: 15px; }
.ck-ultima small { display: block; color: var(--muted); font-weight: 700; font-size: 11.5px; }
.ck-ultima:hover { border-color: var(--gold); }
.ck-ultima[aria-pressed="true"] { border-color: var(--green); background: var(--green-soft); }
.ck-forma .ck-forma-desc { font-size: .78em; font-weight: 800; color: var(--green-ink); white-space: nowrap; }
.pp-qd-ed { display: inline-flex; align-items: center; margin-top: 3px; height: 30px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
  overflow: hidden; }
.pp-qd-ed:focus-within { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold-soft); }
.pp-qd-ed input { width: 40px; min-width: 0; height: 100%; border: 0; padding: 0 2px 0 6px; text-align: right; font-weight: 800; font-size: 15px; background: transparent;
  color: var(--ink); font-variant-numeric: tabular-nums; }
.pp-qd-ed input:focus { outline: none; }
.pp-qd-ed span { padding: 0 6px 0 2px; font-size: 10.5px; font-weight: 700; color: var(--muted); }
.pp-quando .pp-qd-ed { display: flex; width: max-content; }
.pp-tirar { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--red);
  font-size: 18px; font-weight: 800; line-height: 1; cursor: pointer; padding: 0; }
.pp-tirar:hover { border-color: var(--red); background: var(--red-soft); }
.pp-mais { justify-self: start; }
.pp-devendo { margin: 0; padding: 9px 12px; border-radius: 10px; background: var(--sunken); border: 1px solid var(--line); font-size: 13.5px;
  font-variant-numeric: tabular-nums; }
.pp-devendo b { font-weight: 800; }
/* computador largo: as datas das parcelas junto do prazo, com o atalho para a tabela embaixo dos produtos (01/11/2026) */
.pp-resumo-datas { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; padding: 9px 12px; border-radius: 10px;
  background: var(--sunken); border: 1px solid var(--line); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.pp-resumo-datas[hidden] { display: none; }
.pp-resumo-datas .btn-link { font-weight: 700; }
#ck-parcelas-largura { scroll-margin-top: 88px; }     /* "Mudar datas" desce até a tabela sem ela ficar embaixo da barra do topo */
.ck-rua .campo-parcelas-boleto-wrap > .ck-prazo-cliente, .ck-rua .campo-parcelas-boleto-wrap > .ck-ultimas { order: -1; }
/* parcela editável: coluna 1 = nº, data e dias; no celular a data é o próprio "12/11" (tocar abre o calendário, como a data da venda) */
.pp-quando.pp-ed { white-space: normal; }
.pp-data-ed { display: inline-flex; align-items: center; gap: 6px; }
.pp-data-ed .parcela-data { width: 142px; height: 34px; }
.pp-quando.pp-ed .pp-n { margin-right: 6px; }
@media (max-width: 900px) {
  .pp-data-ed { position: relative; display: inline-block; }
  .pp-data-ed .pp-dm { text-decoration: underline dotted var(--gold-ink); text-underline-offset: 3px; cursor: pointer; }
  .tabela-parcelas-preview .pp-data-ed .parcela-data { position: absolute; inset: 0; width: 100%; height: 100%; min-width: 0; padding: 0; border: 0;
    opacity: 0; cursor: pointer; }
  .pp-data-ed .parcela-data::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
  .tabela-parcelas-preview .pp-novo .parcela-valor { width: 84px; }
}
/* parcela editável: sem o nº (a data já diz qual é); título "Data"; valor e "−" na mesma linha */
.tabela-parcelas-preview.pp-editavel .pp-quando .pp-n, .tabela-parcelas-preview.pp-editavel th .pp-so-pc { display: none; }
.tabela-parcelas-preview.pp-editavel th .pp-so-cel { display: inline; }
.tabela-parcelas-preview.pp-editavel .pp-novo { flex-wrap: nowrap; }
.tabela-parcelas-preview.pp-editavel .pp-novo:has(.pp-juros-cel:not([hidden])) { flex-wrap: wrap; }
@media (min-width: 901px) {
  .tabela-parcelas-preview.pp-editavel .pp-data-ed .parcela-data { width: 122px; padding: 0 6px; }
  .tabela-parcelas-preview.pp-editavel .pp-novo .parcela-valor { width: 84px; }
}
.pp-dias-linha { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.pp-dias-linha .pp-qd-ed { margin-top: 0; }

/* Pedido na rua, parte 3 (29/10/2026): resumo depois de fechar — 3 botões grandes de entrega, aviso do sem canhoto numa janela, Voltar às rotas */
.rsm-entregar { display: grid; gap: 10px; }
.rsm-entregar form { margin: 0; }
.rsm-grande { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 72px; padding: 12px 16px; border-radius: 16px; border: 2px solid transparent;
  text-align: left; cursor: pointer; font: inherit; }
.rsm-grande svg { width: 30px; height: 30px; flex: none; }
.rsm-grande b { display: block; font-size: 17px; font-weight: 800; line-height: 1.2; }
.rsm-grande small { display: block; font-size: 12.5px; font-weight: 700; opacity: .85; margin-top: 2px; }
.rsm-g-canhoto { background: var(--green); color: #fff; box-shadow: 0 5px 0 -2px var(--green-ink); }
.rsm-g-canhoto:hover { background: var(--green-ink); }
.rsm-g-sem { background: var(--surface); color: var(--ink); border-color: var(--line); }
.rsm-g-sem:hover { border-color: var(--gold); }
.rsm-g-enc { background: var(--gold); color: var(--ink); box-shadow: 0 5px 0 -2px var(--gold-ink); }
.rsm-grande:active:not(:disabled) { transform: translateY(2px); box-shadow: none; }
.rsm-grande:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.rsm-espera { margin: 0; font-weight: 800; color: var(--red); font-size: 14px; }
.rsm-botoes.rsm-botoes-sec { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.rsm-feito { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 16px; background: var(--green-soft); color: var(--green-ink); }
.rsm-feito-ic { width: 40px; height: 40px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; flex: none; }
.rsm-feito-ic svg { width: 22px; height: 22px; }
.rsm-feito b { display: block; font-size: 16px; font-weight: 800; }
.rsm-feito small { display: block; color: var(--ink); font-weight: 600; font-size: 13px; }
.btn.rsm-voltar { width: 100%; min-height: 52px; background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 800; font-size: 16px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center; text-decoration: none; }
.btn.rsm-voltar:hover { background: #1b2550; }
.rsm-dialogo { border: 0; border-radius: 18px; padding: 18px; width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); overflow: auto;
  background: var(--surface); color: var(--ink); box-shadow: 0 18px 50px rgba(10, 17, 48, .3); }
.rsm-dialogo::backdrop { background: rgba(10, 17, 48, .45); }
.rsm-dialogo h2 { margin: 0 0 12px; font-size: 19px; }
.rsm-dialogo .rsm-sem-form { margin: 0; padding: 0; border: 0; background: none; }
.rsm-dialogo-botoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.rsm-dialogo-botoes .btn { min-height: 48px; }

/* Metas: sugestão embaixo do campo da meta (rotas_objetivos.sugestao_meta, 29/10/2026) */
.ob-sug { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 10px;
  background: var(--gold-soft); color: var(--ink); font-size: 13px; }
.ob-sug b { font-variant-numeric: tabular-nums; }
.ob-sug small { display: block; color: var(--gold-ink); font-size: 11.5px; font-weight: 600; margin-top: 1px; }
.ob-sug-usar { flex: none; height: 32px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--gold); background: var(--surface); color: var(--gold-ink);
  font-weight: 800; font-size: 13px; cursor: pointer; }
.ob-sug-usar:hover { background: var(--gold); color: var(--ink); }
.ob-sug-usar:disabled { opacity: .6; cursor: default; }

/* consulta do ambiente de teste da associação no histórico (30/10/2026) */
.cc-teste { display: inline-block; padding: 1px 7px; margin-right: 4px; border-radius: 999px; background: #F9EAC8; color: #806321; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }

/* pedido de visita: aviso de que telefone, cidade e endereço vieram do cadastro (30/10/2026) */
.ag-cadastrado { margin: -4px 0 2px; padding: 6px 10px; border-radius: 10px; background: #E4F0E9; color: #1B8A4B; font-size: 12.5px; font-weight: 700; }

/* SCPC no caso do Jurídico (protótipo aprovado em 30/10/2026; scpc_negativacao.py) */
.scpc { display: grid; gap: 10px; margin: 12px 0; }
.scpc-cartao { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 14px; display: grid; gap: 10px; }
.scpc-cartao.scpc-foco { border: 2px solid var(--gold); }
.scpc-cartao h2, .scpc-h1 { font-family: var(--font-serif, "Outfit", sans-serif); font-size: 17px; margin: 0; text-wrap: balance; }
.scpc-h1 { font-size: 21px; }
.scpc-cartao p { margin: 0; font-size: 13.5px; color: var(--muted); }
.scpc-form { display: grid; gap: 10px; }
.scpc-titulos { display: grid; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.scpc-tit { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 9px 11px; font-size: 13.5px; background: var(--surface); }
.scpc-titulos > .scpc-tit:first-child:not(label) { grid-template-columns: 1fr auto; }
div.scpc-tit { grid-template-columns: 1fr auto; }
.scpc-tit + .scpc-tit { border-top: 1px solid var(--line); }
.scpc-tit input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--green); margin: 0; }
.scpc-tit small { display: block; color: var(--muted); font-size: 12px; }
.scpc-tit b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.scpc-tit.scpc-fora { background: var(--sunken); color: var(--muted); }
.scpc-conta { display: flex; gap: 12px; align-items: center; background: var(--gold-soft); border-radius: 12px; padding: 10px 12px; font-size: 13.5px; font-weight: 700; }
.scpc-conta > b { font-size: 30px; line-height: 1; color: var(--gold-ink); font-family: var(--font-serif, "Outfit", sans-serif); }
.btn.scpc-btn-neg { background: var(--red); color: #fff; border: 0; display: grid; justify-items: center; }
.btn.scpc-btn-neg[disabled] { opacity: .45; }
.scpc-form .btn, .scpc-cartao > .btn { display: grid; justify-items: center; gap: 1px; width: 100%; }
.scpc-cartao .btn small, .scpc-form .btn small { font-weight: 600; font-size: 12px; opacity: .85; }
.scpc-selo { display: grid; gap: 2px; background: var(--ink); color: #fff; border-radius: 14px; padding: 12px 14px; }
.scpc-selo small { color: rgba(255,255,255,.72); font-size: 12.5px; }
.scpc-selo b { font-size: 18px; color: var(--gold); font-variant-numeric: tabular-nums; }
.scpc-lista { display: grid; gap: 6px; }
.scpc-ativo { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.scpc-ativo summary { display: flex; justify-content: space-between; gap: 10px; padding: 9px 12px; cursor: pointer; font-size: 13.5px; list-style: none; }
.scpc-ativo summary small { display: block; color: var(--muted); font-size: 12px; }
.scpc-tirar { display: grid; gap: 8px; padding: 0 12px 12px; }
.scpc-dados { display: grid; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; font-size: 13.5px; }
.scpc-dado { display: flex; justify-content: space-between; gap: 10px; padding: 8px 11px; }
.scpc-dado + .scpc-dado { border-top: 1px solid var(--line); }
.scpc-dado span { color: var(--muted); }
.scpc-dado b { text-align: right; min-width: 0; overflow-wrap: anywhere; }
.scpc-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.scpc-grade .scpc-largo { grid-column: 1 / -1; }
.scpc-alerta { background: var(--red-soft, #F7E7E3); color: #642720; border-radius: 12px; padding: 9px 12px; font-size: 13.5px; font-weight: 700; }
.scpc-conferir { max-width: 640px; }
/* protesto pelo AC Protesto (30/10/2026; scpc_protesto.py) */
.btn.scpc-btn-prot { background: var(--ink); color: #fff; border: 0; }
.scpc-prot { display: grid; gap: 8px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; padding-bottom: 10px; }
.scpc-prot .scpc-tit { grid-template-columns: 1fr auto; }
.scpc-prot-pago { border-color: var(--gold); }
.scpc-prot-pago .scpc-alerta { margin: 0 10px; background: var(--gold-soft); color: var(--gold-ink); }
.scpc-prot-acoes { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 10px; }
.scpc-prot-acoes .btn { width: auto; }
.scpc-termo-botoes { display: flex; flex-wrap: wrap; gap: 8px; }
/* recuperar uma consulta do SCPC pelo número da resposta (30/10/2026) */
.cc-recuperar { width: 100%; font-size: 13.5px; }
.cc-recuperar summary { cursor: pointer; color: var(--muted); font-weight: 700; padding: 6px 0; }
.cc-recuperar-form { display: grid; gap: 8px; padding-top: 6px; }

/* ---- Notas no nosso CNPJ (estoque/notas_sefaz*.html, 30/10/2026) */
.ns-busca { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin-block: 12px; flex-wrap: wrap; }
.ns-luz { width: 10px; height: 10px; border-radius: 50%; background: var(--green); flex: none; }
.ns-busca-erro .ns-luz { background: var(--red); }
.ns-busca-txt { display: flex; flex-direction: column; gap: 2px; flex: 1 1 180px; min-width: 0; font-size: 14px; }
.ns-busca-txt span { font-size: 13px; color: var(--muted); }
.ns-buscar { min-height: 40px; }
.ns-buscar[disabled] { opacity: .5; cursor: not-allowed; }
.ns-filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.ns-q { flex: 1 1 100%; }
.ns-q input { width: 100%; box-sizing: border-box; font: inherit; font-size: 15px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); min-height: 44px; }
.ns-nota { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.ns-topo { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; color: inherit; text-decoration: none; }
.ns-quem { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ns-quem b { font-size: 16px; overflow-wrap: anywhere; }
.ns-valor { white-space: nowrap; font-variant-numeric: tabular-nums; font-size: 16px; }
.ns-sug { align-self: flex-start; border-radius: 8px; padding: 4px 10px; font-size: 13px; font-weight: 700; background: var(--sunken); color: var(--muted); }
.ns-sug-dist { background: var(--green-soft); color: var(--green-ink); }
.ns-sug-loja { background: var(--gold-soft); color: var(--gold-ink); }
.ns-sug-grande { font-size: 14px; padding: 10px 12px; border-radius: 12px; align-self: stretch; margin-block: 12px; }
.ns-botoes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ns-b { border: 0; border-radius: 12px; padding: 10px 4px; font: inherit; font-size: 14px; font-weight: 800; min-height: 46px; cursor: pointer; text-align: center; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.ns-b-dist { background: var(--green); color: #fff; }
.ns-b-loja { background: var(--gold); color: var(--ink); }
.ns-b-ign { background: var(--surface); color: var(--muted); border: 1px solid var(--line); }
.ns-b-largo { padding-inline: 22px; }
.ns-linha { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.ns-faixa { border-radius: 10px; padding: 9px 12px; font-size: 14px; font-weight: 700; }
.ns-ok { background: var(--green-soft); color: var(--green-ink); }
.ns-loja { background: var(--gold-soft); color: var(--gold-ink); }
.ns-espera { background: var(--sunken); color: var(--muted); font-weight: 600; }
.ns-ign { background: var(--sunken); color: var(--muted); }
.ns-erro { background: var(--red-soft); color: var(--red); }
.ns-desfazer { align-self: flex-end; }
.ns-desfazer button { border: 0; background: none; color: var(--muted); font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; min-height: 32px; }
.ns-vazio { color: var(--muted); text-align: center; padding: 28px 8px; }
.ns-rodape { text-align: center; }
.ns-cab { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 8px; margin-block: 12px; }
.ns-cab h1 { margin: 0; font-size: 22px; overflow-wrap: anywhere; }
.ns-rot { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ns-total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--line); padding-top: 10px; margin-top: 4px; }
.ns-total b { font-size: 24px; font-variant-numeric: tabular-nums; }
.ns-itens { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 4px 16px; }
.ns-item { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.ns-item:last-child { border-bottom: 0; }
.ns-item small { display: block; color: var(--muted); font-size: 12px; }
.ns-item b { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ns-escolha { display: flex; flex-direction: column; gap: 10px; margin-block: 12px; }
.ns-g { border: 0; border-radius: 14px; padding: 14px; font: inherit; font-size: 17px; font-weight: 800; min-height: 56px; text-align: left; display: flex; flex-direction: column; gap: 2px; cursor: pointer; width: 100%; box-sizing: border-box; text-decoration: none; }
.ns-g small { font-size: 13px; font-weight: 600; }
.ns-g.ns-b-ign { font-size: 15px; min-height: 48px; }
.ns-sempre { display: flex; gap: 10px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px; font-size: 14px; }
.ns-sempre input { width: 22px; height: 22px; margin: 0; accent-color: var(--ink); flex: none; }
.ns-xml { display: block; text-align: center; padding: 10px; }
.ns-chave { overflow-wrap: anywhere; text-align: center; }
.ns-forn { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 4px 14px 14px; display: flex; flex-direction: column; margin-block: 12px; }
.ns-forn-linha { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.ns-forn-linha span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ns-forn-linha b { overflow-wrap: anywhere; }
.ns-forn-linha small { color: var(--muted); font-size: 13px; }
.ns-forn .btn { margin-top: 14px; align-self: flex-start; }
.ns-sel { font: inherit; font-size: 14px; font-weight: 700; padding: 8px 10px; border-radius: 9px; border: 1px solid var(--line); background: var(--sunken); color: var(--ink); max-width: 48%; }
.ns-sel-dist { background: var(--green-soft); color: var(--green-ink); }
.ns-sel-loja { background: var(--gold-soft); color: var(--gold-ink); }
.ns-legenda, .ns-ligacao { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; margin-block: 12px; }
.ns-ligacao { background: var(--ink); color: #fff; border: 0; }
.ns-ligacao .ns-rot { color: var(--gold); }
.ns-ligacao span:last-child { opacity: .85; font-size: 13px; }
.ns-t-dist { color: var(--green-ink); }
.ns-t-loja { color: var(--gold-ink); }
.ns-t-ign { color: var(--muted); }