/* ============================================================
   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:      #0B0B0B;   /* texto e fundo escuro */
  --cream:    #FFFFFF;   /* texto sobre escuro */
  --bg:       #FFFFFF;   /* fundo da página */
  --surface:  #FFFFFF;   /* cartões, campos */
  --sunken:   #FAF8F2;   /* cabeçalho de tabela, hover */
  --muted:    #6B6B6B;   /* texto de apoio */
  --line:     rgba(11,11,11,.11);  /* borda */
  --hair:     rgba(11,11,11,.06);  /* divisória interna */

  --gold:      #C9A227;  /* ação principal */
  --gold-ink:  #7D5A0B;  /* texto sobre dourado claro */
  --gold-soft: #FBF0D6;
  --acao:       var(--ink);  /* botão de ação principal */
  --acao-texto: #FFFFFF;
  --acao-hover: #2B2B2B;
  --green:     #1FA855;  /* compartilhar, positivo */
  --green-ink: #1B8A4B;
  --green-soft:#E4F0E9;
  --red:       #9C4A3C;
  --red-soft:  #F7E7E3;
  --blue:      #7A86B8;

  /* tipografia */
  --font-serif: 'Instrument Serif', Georgia, serif;   /* títulos */
  --font-sans:  'Outfit', system-ui, sans-serif;      /* interface */
  --font-mono:  'IBM Plex Mono', monospace;           /* números */

  /* 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(11,11,11,.04), 0 10px 28px -20px rgba(11,11,11,.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: 14px; }
*, *::before, *::after { box-sizing: border-box; }
h1 { margin: 0 0 18px; font-family: var(--font-serif); font-weight: 400; font-size: 32px; line-height: 1.1; }
h2 { margin: 0 0 14px; font-family: var(--font-serif); font-weight: 400; font-size: 24px; 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(--acao); color: var(--acao-texto); font-weight: 600; }
.btn-ouro:hover { background: var(--acao-hover); }
.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(--gold-soft); border-color: var(--gold); color: var(--gold-ink); 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(--gold-soft); border-color: var(--gold); color: var(--gold-ink); 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;
}
.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: 20px; }
.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); 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); }
@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; }

  .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: 18px; line-height: 1.2; color: var(--gold-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.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 58px 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; }
.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) 52px 92px 116px; }
  .t-estoque  { --cols: 44px minmax(90px,1fr) 96px 40px; }
  .t-contas   { --cols: 26px minmax(90px,1fr) 112px 96px 84px; }
  .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(--green-soft); color: var(--green-ink); }
.etiqueta-aviso { background: var(--gold-soft);  color: var(--gold-ink); }
.etiqueta-erro  { background: var(--red-soft);   color: var(--red); }
.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(255,255,255,.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(11,11,11,.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(11,11,11,.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; }
.produto-sem-foto { font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: #8C8C8C; }
.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(--surface); border-right: 1px solid var(--line); }
.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(--hair); 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: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); background: transparent; border: none; border-radius: var(--r-sm);
  padding: 7px 10px; cursor: pointer;
}
.sidebar-grupo:hover { background: rgba(11,11,11,.06); }
.sidebar-grupo svg { width: 14px; height: 14px; flex: none; color: var(--gold-ink); }
.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-itens { display: flex; flex-direction: column; gap: 2px; }

/* item de navegação — mesmo visual dos itens do grupo Estoque
   (partials/_sidebar_grupo_estoque.html): texto 14px, canto 9px, ícone
   de traço 1.5 e transição suave no hover */
.sidebar-item {
  display: flex; align-items: center; gap: 11px; padding: 8px 10px;
  border-radius: 9px; color: var(--ink); text-decoration: none;
  font-size: 14px; white-space: nowrap; background: transparent; border: none;
  font-family: var(--font-sans); cursor: pointer; width: 100%; text-align: left;
  transition: background .12s;
}
.sidebar-item svg { width: 17px; height: 17px; flex: none; stroke-width: 1.5; }
.sidebar-item:hover { background: rgba(11,11,11,.06); text-decoration: none; }
.sidebar-item.ativo { background: var(--gold-soft); color: var(--gold-ink); font-weight: 500; }
.sidebar-item .contador { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--muted); }

/* style.css ainda tem a regra da barra lateral ESCURA antiga
   (`.sidebar-nav a, .sidebar-footer a`: texto cinza-claro --ink-soft,
   fonte .85rem, hover com fundo escuro e texto branco). Ela é mais
   específica que .sidebar-item e vencia — os itens ficavam cinza e
   apagados; só os do grupo Estoque escapavam, por terem estilo inline.
   Estas regras (duas classes) ganham dela e deixam todo item igual ao
   Estoque. */
.sidebar-nav .sidebar-item, .sidebar-footer .sidebar-item {
  color: var(--ink); font-size: 14px; font-weight: 600; border-radius: 9px;
  border-left: none; gap: 11px; transition: background .12s;
}
.sidebar-nav .sidebar-item:hover, .sidebar-footer .sidebar-item:hover { background: rgba(11,11,11,.06); color: var(--ink); }
.sidebar-nav .sidebar-item.ativo, .sidebar-footer .sidebar-item.ativo { background: var(--gold-soft); color: var(--gold-ink); font-weight: 500; }
@media (min-width: 781px) {
  /* no celular (≤780px) a barra vira só ícones e o style.css centraliza
     com outro padding — não mexe nisso */
  .sidebar-nav .sidebar-item, .sidebar-footer .sidebar-item { padding: 8px 10px; }
}

/* encolher */
.sidebar-encolher {
  margin-top: 4px; height: 32px; width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--line); background: transparent; color: var(--muted);
  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-ink); }

html.sidebar-encolhida .sidebar { width: 68px; }
html.sidebar-encolhida .sidebar-item,
html.sidebar-encolhida .sidebar-grupo,
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-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(11,11,11,.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(11,11,11,.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; }
.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); }

/* ---------- MOBILE ---------- */
@media (max-width: 900px) {
  .sidebar { display: none; }   /* no celular quem navega é a .barra-inferior */
  .container { padding: 16px 16px 90px; }
  h1 { font-size: 26px; }
  .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(--surface); border-top: 1px solid var(--line); padding: 6px 4px 8px; }
@media (max-width: 900px) { .barra-inferior { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; } }
.barra-inferior a { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0;
  font-size: 10px; color: var(--muted); text-decoration: none; min-height: 44px; }
.barra-inferior a svg { width: 21px; height: 21px; }
.barra-inferior a.ativo { color: var(--gold-ink); }

/* ============================================================
   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(255,255,255,.6); }
.cartao-escuro .trilho { background: rgba(255,255,255,.16); }
.cartao-escuro .cartao-titulo { color: var(--cream); }
.saldo-grande { font-family: var(--font-serif); font-size: 34px; line-height: 1; color: var(--gold); }

/* 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(255,255,255,.5); }
.portal-frase { font-family: var(--font-serif); font-size: 32px; line-height: 1.15; margin-top: 8px; }
.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-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(11, 11, 11, .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: 84px;
    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; }
  .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; }
  .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; gap: 10px; margin-top: 10px; }
  .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; }

  /* 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; }
  .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(--gold-soft); border-color: var(--gold); color: var(--gold-ink); 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; }
  .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(--acao); color: var(--acao-texto);
    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: #8C8C8C; }
  .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; }
  .rt-endereco { font-size: 12.5px; color: var(--muted); }
  .rt-acoes { display: flex; 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-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; }
  .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(--acao); color: var(--acao-texto);
    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(255,255,255,.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); }
  .ini-hero-nota { font-size: 12px; color: rgba(255,255,255,.6); }
  .ini-hero-trilho { height: 7px; border-radius: 20px; background: rgba(255,255,255,.16); overflow: hidden; }
  .ini-hero-barra { height: 100%; background: linear-gradient(90deg, #C8922A, #C9A227); border-radius: 20px; }
  .ini-hero-pe { display: flex; justify-content: space-between; margin-top: 8px;
    font-size: 11px; color: rgba(255,255,255,.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); }
  .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; }
  .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; }
  .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); }
  .cli-rota { margin-left: auto; }
  .cli-rota .select-rota { height: 28px; font-size: 11.5px; max-width: 110px; }

  /* 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; }
  .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(255,255,255,.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); }
  .pt-clube-meta { font-size: 12.5px; color: rgba(255,255,255,.6); }
  .pt-clube-trilho { height: 8px; border-radius: 20px; background: rgba(255,255,255,.16); overflow: hidden; }
  .pt-clube-barra { height: 100%; background: linear-gradient(90deg, #C8922A, #C9A227); border-radius: 20px; }
  .pt-clube-nota { font-size: 11px; color: rgba(255,255,255,.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(--acao);
    color: var(--acao-texto); 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(--acao); color: var(--acao-texto);
    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: 19px; }         /* o gabarito trazia 18px */
/* 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: 10.5px; padding: 2px 7px; }

/* 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; }
.pf-topo-info { min-width: 0; flex: 1 1 200px; }
.pf-nome { font-family: var(--font-serif); font-size: 26px; line-height: 1.15; }
.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; }
.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: #8C8C8C; 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; }
.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: #8C8C8C;
  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); }

.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; }

/* 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; }
.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; }
.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(11,11,11,.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(255,255,255,.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); }
.car-clube-meta { font-size: 11px; color: rgba(255,255,255,.6); }
.car-clube-barra-wrap { padding: 0 15px 12px; }
.car-clube-trilho { height: 6px; border-radius: 20px; background: rgba(255,255,255,.16); overflow: hidden; }
.car-clube-barra { height: 100%; background: linear-gradient(90deg, #C8922A, #C9A227); border-radius: 20px; }
.car-clube-pe { display: flex; justify-content: space-between; margin-top: 7px;
  font-size: 10.5px; color: rgba(255,255,255,.62); }
.car-clube-conf { border-top: 1px solid rgba(255,255,255,.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; }

.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; }
}

/* ------------------------------------------------------------------
   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); }
.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-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; }

.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: 400;
  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); }
.produto-card .badge-no-carrinho { background: var(--green-soft); color: var(--green-ink);
  font-size: 10.5px; font-weight: 600; border-radius: var(--r-pill); box-shadow: none; }

.produto-form { gap: 7px; }
.produto-form .qtd-stepper { border: 1px solid var(--line); border-radius: 8px; height: 32px; }
.produto-form .qtd-stepper button { background: transparent; color: var(--ink);
  font-size: 15px; font-weight: 400; padding: 0; width: 28px; height: 100%; }
.produto-form .qtd-stepper button:hover { background: var(--sunken); color: var(--ink); }
.produto-form .qtd-input { width: 30px; font-family: var(--font-mono); font-size: 13px;
  background: transparent; color: var(--ink); }
.produto-form button[type=submit] { flex: 1; height: 32px; padding: 0 10px;
  border: 1px solid var(--ink); background: var(--ink); color: var(--surface);
  border-radius: 8px; font-family: var(--font-sans); font-size: 12.5px; font-weight: 500;
  box-shadow: none; }
.produto-form button[type=submit]:hover { opacity: .88; background: var(--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-grupo { color: var(--muted); }

/* fotos maiores no catálogo: roupa é foto em pé, e na caixa deitada (4:3)
   de antes a peça ficava pequena. Caixa quadrada e cartão um pouco mais
   largo no computador; no celular continuam dois cartões por tela. */
.produto-card .produto-foto { aspect-ratio: 1 / 1; }
@media (min-width: 901px) {
  .linha-scroll .produto-card, .linha-scroll .card-ver-todos { flex: 0 0 204px; }
  .produto-grid { grid-template-columns: repeat(auto-fill, minmax(204px, 1fr)); }
}
@media (max-width: 900px) {
  .produto-card .produto-foto-wrap { aspect-ratio: 1 / 1; }
}

/* cartão de produto limpo: sem contorno nem sombra, e a foto sem a linha
   embaixo. Com o mouse em cima o cartão vem um pouco pra frente (sobe,
   cresce de leve e ganha sombra) — só onde existe mouse, e sem movimento
   pra quem pediu menos animação no aparelho. */
.produto-card, .produto-card:hover { border-color: transparent; box-shadow: none; }
.produto-card .produto-foto, .produto-card .produto-foto-wrap { border-bottom: none; }
/* a fileira corta o que passa da borda dela: folga em cima e embaixo pro
   cartão levantado e a sombra caberem */
.linha-scroll { padding-top: 10px; margin-top: -10px; padding-bottom: 16px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .produto-card:not(.produto-card-esqueleto) { transition: transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s ease; }
  .produto-card:not(.produto-card-esqueleto):hover { transform: translateY(-5px) scale(1.025);
    box-shadow: 0 14px 26px -14px rgba(11,11,11,.32); z-index: 2; }
}

/* botão verde de compartilhar (produto e categoria): só o vendedor e o
   admin usam, pra mandar pro cliente — na loja do visitante/cliente some */
/* Raleway semi-bold (The League of Moveable Type, licença OFL — arquivo e
   licença em static/fonts/raleway/) nos nomes e preços dos produtos.
   lining-nums: sem isso a Raleway desenha os algarismos em alturas
   diferentes ("estilo antigo"), o que atrapalha a leitura de preço. */
@font-face {
  font-family: 'Raleway'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/raleway/Raleway-SemiBold.woff2') format('woff2');
}
:root { --font-vitrine: 'Raleway', var(--font-sans); }
.produto-card .produto-nome, .produto-card .preco-atual, .produto-card .preco-riscado,
#modal-nome, #modal-preco .preco, #modal-preco .preco-de {
  font-family: var(--font-vitrine); font-weight: 600; font-variant-numeric: lining-nums; }

/* cartão da loja: sem quantidade nem "Adicionar" — o cartão inteiro é um
   link pra tela do produto (cliente.produto), onde se compra */
a.produto-card-abre { cursor: pointer; text-decoration: none; color: var(--ink); }
a.produto-card-abre:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ------------------------------------------------------------------
   Tela do produto (templates/cliente/produto.html): fotos à esquerda
   com as miniaturas ao lado, nome e preço no meio, caixa de compra à
   direita. No celular vira uma coluna: foto, miniaturas, nome, preço,
   compra, descrição.
   ------------------------------------------------------------------ */
.pd { max-width: 1180px; margin: 0 auto; }
.pd-trilha { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); margin-bottom: 14px; }
.pd-trilha a { color: var(--muted); }
.pd-trilha a:hover { color: var(--gold-ink); }
.pd-trilha a[data-pd-voltar] { color: var(--gold-ink); font-weight: 500; }
.pd-grade { display: grid; gap: 26px; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) 292px;
  grid-template-areas: "galeria info compra" "sobre sobre compra"; align-items: start; }

.pd-galeria { grid-area: galeria; display: flex; flex-direction: row-reverse; gap: 12px; min-width: 0; }
.pd-foto { flex: 1; min-width: 0; aspect-ratio: 4 / 5; max-height: 74vh; background: #F4F4F4; border-radius: 12px;
  overflow: hidden; display: grid; place-items: center; }
.pd-foto img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pd-foto-vazia { color: var(--muted); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; }
/* lupa e foto em tela cheia (static/js/produto.js) */
.pd-foto { position: relative; }
.pd-foto[data-pd-zoom] { cursor: zoom-in; }
.pd-lupa { position: absolute; z-index: 2; width: 190px; height: 190px; border-radius: 50%; pointer-events: none;
  background-color: #fff; background-repeat: no-repeat; border: 2px solid #fff;
  box-shadow: 0 8px 28px rgba(11,11,11,.28), 0 0 0 1px rgba(11,11,11,.10); }
.pd-ampliar { position: absolute; z-index: 3; right: 10px; bottom: 10px; width: 40px; height: 40px; padding: 0;
  border-radius: 50%; border: 1px solid var(--line); background: rgba(255,255,255,.94); color: var(--ink);
  display: grid; place-items: center; cursor: pointer; }
.pd-ampliar svg { width: 19px; height: 19px; }
.pd-ampliar:hover, .pd-ampliar:active { background: #fff; color: var(--ink); border-color: var(--ink); }
.pd-ampliar:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
html.pd-zoom-aberto { overflow: hidden; }
.pd-zoom { width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0;
  border: 0; background: #fff; color: var(--ink); overflow: hidden; }
.pd-zoom[open] { display: flex; flex-direction: column; }
.pd-zoom::backdrop { background: #fff; }
.pd-zoom-topo { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 16px 8px; font-size: 13px; color: var(--muted);
  font-variant-numeric: tabular-nums; }
.pd-zoom-botao { width: 42px; height: 42px; padding: 0; border-radius: 50%; border: 1px solid var(--line);
  background: rgba(255,255,255,.94); color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.pd-zoom-botao svg { width: 20px; height: 20px; }
.pd-zoom-botao:hover, .pd-zoom-botao:active { background: #fff; color: var(--ink); border-color: var(--ink); }
.pd-zoom-botao:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.pd-zoom-palco { flex: 1; min-height: 0; overflow: hidden; cursor: zoom-in; touch-action: none; scrollbar-width: none; }
.pd-zoom-palco::-webkit-scrollbar { display: none; }
.pd-zoom-foto { display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-select: none; }
.pd-zoom-perto .pd-zoom-palco { display: flex; overflow: auto; cursor: zoom-out; touch-action: pan-x pan-y; }
/* margin: auto centraliza quando a foto aumentada é menor que a tela, sem cortar quando é maior */
.pd-zoom-perto .pd-zoom-foto { flex: none; margin: auto; max-width: none; max-height: none; }
.pd-zoom-ant, .pd-zoom-prox { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; }
.pd-zoom-ant { left: 16px; }
.pd-zoom-prox { right: 16px; }
.pd-zoom-perto .pd-zoom-ant, .pd-zoom-perto .pd-zoom-prox { display: none; }
.pd-zoom-dica { flex: none; margin: 0; padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  text-align: center; font-size: 12.5px; color: var(--muted); }
@media (max-width: 640px) {
  .pd-zoom-ant { left: 8px; }
  .pd-zoom-prox { right: 8px; }
}
.pd-minis { display: flex; flex-direction: column; gap: 8px; }
.pd-mini { flex: none; width: 56px; height: 56px; padding: 0; border: 1px solid var(--line); border-radius: 7px;
  overflow: hidden; background: #F4F4F4; cursor: pointer; }
.pd-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-mini:hover { background: #F4F4F4; }
.pd-mini.ativa { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.pd-mini:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.pd-info { grid-area: info; min-width: 0; }
.pd-linha-fina { font-size: 12.5px; color: var(--muted); margin-bottom: 8px; }
.pd-selo { display: inline-block; background: var(--gold-soft); color: var(--gold-ink); font-size: 10.5px; font-weight: 600;
  letter-spacing: .08em; padding: 3px 8px; border-radius: 5px; margin-bottom: 8px; }
.pd .pd-nome { margin: 0 0 12px; font-family: var(--font-vitrine); font-weight: 600; font-size: 22px; line-height: 1.25;
  color: var(--ink); text-wrap: balance; }
.pd-preco { font-family: var(--font-vitrine); font-weight: 600; font-size: 34px; line-height: 1.1; color: var(--ink);
  font-variant-numeric: lining-nums; }
.pd-preco-de { font-family: var(--font-vitrine); font-weight: 600; font-size: 14px; color: var(--muted);
  text-decoration: line-through; font-variant-numeric: lining-nums; margin-bottom: 2px; }
.pd-off { font-family: var(--font-sans); font-size: 14px; font-weight: 500; color: var(--green-ink); margin-left: 6px; }
.pd-ver-desc { display: inline-block; margin-top: 12px; font-size: 13px; color: var(--gold-ink); }
.pd-ver-desc:hover { text-decoration: underline; }

.pd-compra { grid-area: compra; border: 1px solid var(--line); border-radius: 12px; padding: 16px;
  display: flex; flex-direction: column; gap: 12px; }
.pd-aviso { font-size: 13.5px; font-weight: 500; color: var(--green-ink); }
.pd-aviso span { display: block; font-size: 12.5px; font-weight: 400; color: var(--muted); }
.pd-estoque { font-size: 14px; font-weight: 600; }
.pd-form { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.pd-qtd { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13.5px; margin: 0 0 2px; }
.pd .pd-qtd select { width: auto; height: auto; border: none; background-color: transparent; padding: 4px 2px;
  font-family: var(--font-sans); font-size: 13.5px; font-weight: 600; color: var(--ink); cursor: pointer; }
.pd-qtd em { font-style: normal; font-size: 12.5px; color: var(--muted); }
.pd .pd-botao { width: 100%; height: 46px; padding: 0 14px; border-radius: 9px; border: 1px solid var(--ink);
  background: var(--ink); color: var(--surface); font-family: var(--font-sans); font-size: 14.5px; font-weight: 600;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: none; }
.pd .pd-botao:hover { background: var(--ink); opacity: .9; }
.pd .pd-botao-leve { background: var(--gold-soft); border-color: var(--gold-soft); color: var(--gold-ink); }
.pd .pd-botao-leve:hover { background: var(--gold-soft); }
.pd .pd-botao:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.pd-botao svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; }
.pd-ver-carrinho { font-size: 13px; color: var(--gold-ink); text-align: center; }
.pd-ver-carrinho[hidden] { display: none; }

.pd-sobre { grid-area: sobre; min-width: 0; border-top: 1px solid var(--line); padding-top: 18px; scroll-margin-top: 150px; }
.pd-sobre h2 { margin: 0 0 10px; font-family: var(--font-serif); font-weight: 500; font-size: 20px; }
.pd-sobre h2:not(:first-child) { margin-top: 22px; }
/* a descrição vem do Bling com fonte, cor e tamanho próprios colados no
   texto — aqui tudo volta pro padrão da loja */
.pd-descricao { max-width: 65ch; font-size: 14px; line-height: 1.6; color: var(--ink); overflow-wrap: anywhere; }
.pd-descricao * { font-family: inherit !important; font-size: inherit !important; color: inherit !important;
  background: transparent !important; line-height: inherit !important; }
.pd-descricao p { margin: 0 0 10px; }
.pd-descricao img { max-width: 100%; height: auto; }
.pd-detalhes { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 18px; font-size: 13.5px; max-width: 460px; }
.pd-detalhes dt { color: var(--muted); }
.pd-detalhes dd { margin: 0; }

@media (max-width: 1020px) {
  .pd-grade { gap: 18px; grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "galeria" "info" "compra" "sobre"; }
  .pd-galeria { flex-direction: column; gap: 10px; }
  .pd-foto { flex: none; max-height: none; }
  .pd-minis { flex-direction: row; overflow-x: auto; padding: 2px; scrollbar-width: none; }
  .pd-minis::-webkit-scrollbar { display: none; }
  .pd .pd-nome { font-size: 20px; }
  .pd-preco { font-size: 30px; }
}

/* ------------------------------------------------------------------
   Campanha em janela suspensa, ao abrir a vitrine
   (partials/_campanha_popup.html + static/js/campanha-popup.js).
   Fica acima do topo da loja e abaixo do "carregando" com o logo.
   ------------------------------------------------------------------ */
.cp-fundo { position: fixed; inset: 0; z-index: 200; background: rgba(11,11,11,.55); display: flex;
  align-items: center; justify-content: center; padding: 20px; animation: cp-clarear .25s ease both; }
.cp-fundo[hidden] { display: none; }
.cp-fundo .cp-cartao { position: relative; width: 100%; max-width: 460px; max-height: 100%; overflow: auto; padding: 0;
  background: var(--surface); border-radius: 16px; box-shadow: 0 24px 60px -20px rgba(11,11,11,.55);
  animation: cp-subir .32s cubic-bezier(.2,.7,.2,1) both; }
.cp-cartao .cp-fechar { position: absolute; top: 10px; right: 10px; z-index: 1; width: 34px; height: 34px; padding: 0;
  border: none; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--ink); cursor: pointer;
  display: grid; place-items: center; box-shadow: 0 1px 4px rgba(11,11,11,.18); }
.cp-cartao .cp-fechar:hover { background: #FFFFFF; color: var(--ink); }
.cp-fechar svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
/* imagem da campanha: em cima do texto no celular, ao lado no computador */
.cp-arte { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 30%; }
.cp-texto { min-width: 0; display: flex; flex-direction: column; }
.cp-capa { background: var(--ink); color: #FFFFFF; padding: 36px 24px 30px;
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
  border-bottom: 3px solid var(--gold); }
.cp-slide-foto .cp-capa { padding: 24px 24px 22px; }
.cp-eyebrow { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.cp-destaque { font-family: var(--font-vitrine); font-weight: 600; font-size: 58px; line-height: 1;
  font-variant-numeric: lining-nums; }
.cp-destaque small { font-size: 22px; letter-spacing: .06em; color: var(--gold); }
.cp-corpo { padding: 22px 26px 26px; text-align: center; flex: 1; display: flex; flex-direction: column; justify-content: center; }
.cp-corpo h2 { margin: 0 0 8px; font-family: var(--font-serif); font-weight: 500; font-size: 24px; line-height: 1.2; text-wrap: balance; }
.cp-beneficio { margin: 0 0 6px; font-size: 16px; color: var(--ink); }
.cp-condicao { margin: 0 0 20px; font-size: 13px; color: var(--muted); }
.cp-corpo form { margin: 0; }
.cp-corpo .cp-botao { width: 100%; height: 48px; padding: 0 14px; border-radius: 9px; border: 1px solid var(--ink);
  background: var(--ink); color: var(--surface); font-family: var(--font-sans); font-size: 15px; font-weight: 600;
  cursor: pointer; box-shadow: none; }
.cp-corpo .cp-botao:hover { background: var(--ink); opacity: .9; }
.cp-fechar:focus-visible, .cp-botao:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* uma campanha por "slide"; com mais de uma, o trilho rola de lado (campanha-popup.js) */
.cp-fundo .cp-cartao { display: flex; flex-direction: column; }
.cp-trilho-campanhas { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.cp-trilho-campanhas::-webkit-scrollbar { display: none; }
.cp-trilho-campanhas:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.cp-slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; display: flex; flex-direction: column; }
.cp-slide .cp-texto { flex: 1; }
.cp-controles { flex: none; display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 10px 14px 14px; border-top: 1px solid var(--hair); }
.cp-seta, .cp-pausa { width: 34px; height: 34px; padding: 0; border-radius: 50%; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.cp-seta:hover, .cp-seta:active, .cp-pausa:hover, .cp-pausa:active { background: var(--surface); color: var(--ink); border-color: var(--ink); }
.cp-seta svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cp-pausa { width: 30px; height: 30px; margin-left: 4px; }
.cp-pausa svg { width: 11px; height: 11px; fill: currentColor; }
.cp-pausa .cp-ico-tocar, .cp-pausa[aria-pressed="true"] .cp-ico-pausa { display: none; }
.cp-pausa[aria-pressed="true"] .cp-ico-tocar { display: block; }
.cp-bolinhas { display: flex; align-items: center; gap: 8px; }
.cp-bolinhas button { width: 9px; height: 9px; padding: 0; border-radius: 50%; border: 1.5px solid var(--ink);
  background: transparent; cursor: pointer; }
.cp-bolinhas button[aria-current="true"] { background: var(--gold); border-color: var(--gold); }
.cp-seta:focus-visible, .cp-pausa:focus-visible, .cp-bolinhas button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (min-width: 720px) {
  .cp-fundo .cp-cartao.cp-com-foto { max-width: 700px; }
  .cp-slide-foto { display: grid; grid-template-columns: 44% minmax(0, 1fr); }
  .cp-slide-foto .cp-arte { height: 100%; min-height: 400px; aspect-ratio: auto; }
  .cp-slide-foto .cp-capa { padding: 40px 24px 32px; }
}
@keyframes cp-clarear { from { opacity: 0; } to { opacity: 1; } }
@keyframes cp-subir { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cp-fundo, .cp-cartao { animation: none; } }

/* abertura do produto: logo da loja se revelando da esquerda pra direita
   e um fio dourado correndo embaixo (partials/_abrindo_produto.html +
   static/js/abrir-produto.js). Quando ele sai, a foto se aproxima e nome,
   preço e compra sobem em sequência. */
.pd-carregando { position: fixed; inset: 0; z-index: 300; background: var(--surface);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
.pd-carregando[hidden] { display: none; }
.pd-carregando img { width: 140px; height: auto; display: block; }
.pd-fio { width: 140px; height: 2px; border-radius: 2px; background: var(--gold-soft); overflow: hidden; position: relative; }
.pd-fio::after { content: ""; position: absolute; inset: 0; width: 42%; border-radius: 2px; background: var(--gold);
  animation: pd-correr .85s cubic-bezier(.45,.05,.55,.95) infinite; }
.pd-carregando.pd-revelando img { animation: pd-revelar .5s cubic-bezier(.2,.7,.2,1) both; }
/* rede de segurança: se o script não rodar, o logo sai sozinho */
.pd-carregando-chegando { animation: pd-sumir .25s ease 2.8s forwards; }
.pd-carregando.pd-saindo { animation: pd-sumir .22s ease forwards; }
.pd.pd-entrou .pd-galeria { animation: pd-aproximar .5s cubic-bezier(.2,.7,.2,1) both; }
.pd.pd-entrou .pd-trilha, .pd.pd-entrou .pd-info, .pd.pd-entrou .pd-compra, .pd.pd-entrou .pd-sobre {
  animation: pd-subir .45s cubic-bezier(.2,.7,.2,1) both; }
.pd.pd-entrou .pd-info { animation-delay: .07s; }
.pd.pd-entrou .pd-compra { animation-delay: .14s; }
.pd.pd-entrou .pd-sobre { animation-delay: .2s; }
@keyframes pd-revelar { from { clip-path: inset(0 100% 0 0); opacity: .3; transform: translateY(4px); }
  to { clip-path: inset(0 0 0 0); opacity: 1; transform: none; } }
@keyframes pd-correr { from { transform: translateX(-110%); } to { transform: translateX(250%); } }
@keyframes pd-sumir { to { opacity: 0; visibility: hidden; } }
@keyframes pd-aproximar { from { opacity: 0; transform: scale(.955); } to { opacity: 1; transform: none; } }
@keyframes pd-subir { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .pd-carregando { display: none !important; }
  .pd.pd-entrou * { animation: none !important; }
}

html:not([data-dfpet-role="vendedor"]):not([data-dfpet-role="admin"]) .btn-compartilhar-produto,
html:not([data-dfpet-role="vendedor"]):not([data-dfpet-role="admin"]) .btn-compartilhar-categoria { display: none; }
.categoria-titulo { font-family: var(--font-serif); font-size: 20px; font-weight: 400;
  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(--gold-soft); border-color: var(--gold);
  color: var(--gold-ink); font-weight: 500; }
.catalogo-filtros > button[type=submit] { height: 34px; padding: 0 15px; border: none;
  background: var(--acao); color: var(--acao-texto); 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; }
  /* 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-form .qtd-stepper { height: 40px; border-radius: 10px; flex: none; }
  .produto-form .qtd-stepper button { width: 26px; font-size: 17px; }
  .produto-form .qtd-input { width: 22px; }
  .produto-form button[type=submit] { height: 40px; border-radius: 10px;
    flex: 1; min-width: 0; font-size: 12.5px; padding: 0 6px; }
}

/* 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; }
.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(--acao); color: var(--acao-texto); 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; }

.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; }
.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, #0B0B0B, #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; }
.loja-campanha-regra { font-size: 12.5px; color: rgba(255,255,255,.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(--acao); color: var(--acao-texto); }
.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; }
.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); }
.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(--acao);
  color: var(--acao-texto); 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(255,255,255,.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); }
.loja-clube-meta { font-size: 12px; color: rgba(255,255,255,.6); }
.loja-clube-trilho { height: 7px; border-radius: 20px; background: rgba(255,255,255,.16); overflow: hidden; }
.loja-clube-barra { height: 100%; background: linear-gradient(90deg, #C8922A, #C9A227); border-radius: 20px; }
.loja-clube-link { display: inline-block; margin-top: 9px; font-size: 11.5px; color: rgba(255,255,255,.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; }
.t-pedidos-adm { --cols: 26px 84px minmax(140px,1.6fr) 150px 100px 58px 118px; }
@media (max-width: 1180px) { .t-pedidos-adm { --cols: 26px 72px minmax(120px,1fr) 52px 110px; } }
/* 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; }
.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; }
.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(11,11,11,.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); }
.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; }
.campanha-faixa-desc { font-size: 12.5px; color: rgba(255,255,255,.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;
  box-shadow: inset 0 -2px 0 var(--gold); }
.tc-marca { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.tc-selo { height: 50px; 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(255,255,255,.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(255,255,255,.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(255,255,255,.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; }

.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); }

/* ============================================================
   Topo da loja (partials/_topo_loja.html) — visitante e cliente.
   Branco, com o logo preto e a linha dourada fechando embaixo.
   Três irmãs: .tl-faixa (atalhos, rola junto com a página),
   .tl-linha (logo + busca + conta + sacola, presa no alto) e
   .tl-menu (categorias; presa só no computador).
   ============================================================ */
.tl-faixa, .tl-linha, .tl-menu { background: var(--surface); color: var(--ink); }
.tl-faixa { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 20px; padding: 8px 28px 0; font-size: 12.5px; color: var(--muted); }
.tl-dica { color: var(--gold-ink); }
.tl-saldo { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.tl-saldo svg { width: 14px; height: 14px; color: var(--gold-ink); flex: none; }
.tl-saldo strong { font-family: var(--font-mono); font-weight: 500; font-size: 13px; color: var(--ink); }
.tl-faixa-links { margin-left: auto; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 20px; }
.tl-faixa-links a, .tl-faixa-links button { color: var(--muted); text-decoration: none; white-space: nowrap;
  font: inherit; background: none; border: none; padding: 0; cursor: pointer; }
.tl-faixa-links a:hover, .tl-faixa-links button:hover { color: var(--ink); }
.tl-faixa-links a.ativa { color: var(--ink); font-weight: 500; }
.tl-faixa-links form { display: contents; }

.tl-linha { display: flex; align-items: center; gap: 28px; padding: 0 28px; height: 72px; position: sticky; top: 0; z-index: 45; }
.tl-logo { display: flex; flex: none; }
.tl-logo img { height: 48px; width: auto; display: block; }
.tl-busca { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; height: 44px; padding: 0 8px;
  background: var(--sunken); border: 1px solid var(--line); border-radius: var(--r-sm); }
.tl-busca:focus-within { border-color: var(--gold); }
/* dois níveis de classe + o tipo: as regras antigas de input[type=search] do style.css são mais fortes que uma classe só */
.tl-linha .tl-busca input[type=search] { flex: 1; min-width: 0; height: 100%; border: none; background: transparent; padding: 0 4px;
  font-family: var(--font-sans); font-size: 15px; color: var(--ink); outline: none; box-shadow: none; }
.tl-linha .tl-busca input[type=search]::placeholder { color: var(--muted); }
.tl-busca-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: none; padding: 0;
  border: none; background: transparent; color: var(--muted); border-radius: var(--r-sm); cursor: pointer; }
.tl-busca-btn:hover { color: var(--ink); }
.tl-busca-btn svg { width: 19px; height: 19px; flex: none; }
.tl-busca-btn.gravando { color: var(--gold-ink); }
.tl-conta { display: flex; align-items: center; gap: 20px; flex: none; }
.tl-entrar { font-size: 14.5px; font-weight: 500; color: var(--ink); text-decoration: none; white-space: nowrap; }
.tl-entrar:hover { color: var(--gold-ink); }
.tl-icone { position: relative; display: flex; color: var(--ink); text-decoration: none; }
.tl-icone svg { width: 23px; height: 23px; }
.tl-so-celular { display: none; }
.tl-sacola b { position: absolute; top: -7px; right: -10px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px;
  background: var(--gold); color: var(--ink); font-family: var(--font-sans); font-size: 10.5px; font-weight: 600;
  display: grid; place-items: center; }
.tl-sacola b[hidden] { display: none; }
.tl-linha a:focus-visible, .tl-menu a:focus-visible, .tl-menu button:focus-visible,
.tl-busca-btn:focus-visible, .tl-faixa a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.tl-menu { position: sticky; top: 72px; z-index: 44; border-bottom: 2px solid var(--gold); }
.tl-menu nav { display: flex; justify-content: safe center; gap: 6px; padding: 0 18px; overflow-x: auto; scrollbar-width: none; }
.tl-menu nav::-webkit-scrollbar { display: none; }
.tl-menu nav > a, .tl-menu nav > button { display: flex; align-items: center; gap: 5px; padding: 10px 10px 9px; white-space: nowrap;
  font-family: var(--font-sans); font-size: 14px; font-weight: 400; color: var(--ink); text-decoration: none; background: none; border: none;
  border-radius: 0; border-bottom: 2px solid transparent; cursor: pointer; transition: border-color .15s; }
.tl-menu nav > a:hover, .tl-menu nav > button:hover, .tl-menu nav > button[aria-expanded="true"] { border-bottom-color: var(--ink); }
.tl-menu nav > .ativa { font-weight: 600; border-bottom-color: var(--ink); }
.tl-menu nav svg { width: 11px; height: 11px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tl-menu nav > .tl-destaque { color: var(--gold-ink); font-weight: 500; }
.tl-painel { position: absolute; left: 0; right: 0; top: calc(100% + 2px); background: var(--surface); border-bottom: 1px solid var(--line);
  box-shadow: 0 14px 24px -14px rgba(11,11,11,.28); padding: 18px 28px 20px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px 24px; }
.tl-painel[hidden] { display: none; }
.tl-painel a { padding: 5px 0; font-size: 14px; color: var(--ink); text-decoration: none; }
.tl-painel a:hover, .tl-painel a.ativa { color: var(--gold-ink); }
.tl-painel-tudo { grid-column: 1 / -1; font-weight: 600; }

/* ------------------------------------------------------------------
   Carrossel de banners das marcas, no alto da vitrine
   (partials/_banners.html + static/js/banners.js). O trilho é uma
   fileira com scroll-snap, um banner por vez; bolinhas no meio e a
   pausa no canto de baixo, à direita, por cima da imagem.
   ------------------------------------------------------------------ */
.banners { position: relative; margin-bottom: 16px; border-radius: var(--r-lg); overflow: hidden; background: var(--sunken); }
.banners-trilho { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; outline-offset: -2px; }
.banners-trilho::-webkit-scrollbar { display: none; }
.banners-item { flex: 0 0 100%; scroll-snap-align: start; display: block; aspect-ratio: 16 / 5; }
.banners-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* banner com texto da loja ao lado da foto (foto que não é larga o bastante) */
.banners-item-dividido { display: flex; background: var(--ink); color: #FFFFFF; text-decoration: none; }
.banners-item-dividido img { width: 56%; flex: none; }
.banners-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  gap: 8px; padding: 0 5%; }
.banners-texto-marca { font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.banners-texto-titulo { font-family: var(--font-serif); font-size: clamp(26px, 3.6vw, 46px); line-height: 1.05; }
.banners-texto-apoio { font-size: 14.5px; line-height: 1.4; color: rgba(255,255,255,.78); max-width: 30ch; }
.banners-texto-botao { margin-top: 8px; padding: 8px 18px; border: 1px solid #FFFFFF; font-size: 12.5px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; }
.banners-item-dividido:hover .banners-texto-botao { background: #FFFFFF; color: var(--ink); }
.banners-controles { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; pointer-events: none; }
.banners-bolinhas { display: flex; align-items: center; gap: 8px; padding: 6px 9px; border-radius: 999px;
  background: rgba(11,11,11,.38); pointer-events: auto; }
.banners-bolinhas button { width: 9px; height: 9px; padding: 0; border-radius: 50%; border: 1.5px solid #FFFFFF;
  background: transparent; cursor: pointer; box-sizing: border-box; }
.banners-bolinhas button[aria-current="true"] { background: var(--gold); border-color: var(--gold); }
.banners-pausa { position: absolute; right: 12px; bottom: 0; width: 26px; height: 26px; padding: 0; border: none; border-radius: 50%;
  background: rgba(11,11,11,.5); color: #FFFFFF; cursor: pointer; display: grid; place-items: center; pointer-events: auto; }
.banners-pausa:hover { background: rgba(11,11,11,.72); }
.banners-pausa svg { width: 11px; height: 11px; fill: currentColor; }
.banners-pausa .banners-ico-tocar, .banners-pausa[aria-pressed="true"] .banners-ico-pausa { display: none; }
.banners-pausa[aria-pressed="true"] .banners-ico-tocar { display: block; }
.banners-bolinhas button:focus-visible, .banners-pausa:focus-visible, .banners-trilho:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (max-width: 900px) {
  /* no celular a caixa fica um pouco mais alta, senão o banner vira uma tira */
  .banners { margin-bottom: 12px; }
  .banners-item { aspect-ratio: 2 / 1; }
  .banners-item-dividido img { width: 52%; }
  .banners-texto { gap: 4px; padding: 0 14px 22px; }
  .banners-texto-marca { font-size: 10.5px; }
  .banners-texto-titulo { font-size: 22px; }
  .banners-texto-apoio { display: none; }
  .banners-texto-botao { margin-top: 4px; padding: 5px 11px; font-size: 10.5px; }
  .banners-controles { bottom: 8px; }
  .banners-pausa { right: 8px; }
}

/* catálogo do visitante/cliente: a busca foi pro topo, aqui ficam só os filtros */
.catalogo-filtros-so-chips { margin-bottom: 14px; }



@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: 42px; }
  .tc-direita { gap: 10px; }

  /* topo da loja no celular: logo + conta + sacola numa linha, busca na de
     baixo (as duas presas no alto); o menu de categorias desliza de lado e
     rola junto com a página. Da faixa de atalhos só fica o que não é link
     (pontos/crédito do cliente, aviso do visitante) — a navegação da conta
     é a barra debaixo. */
  .tl-faixa { padding: 7px 16px 0; font-size: 12px; }
  .tl-faixa-links { display: none; }
  .tl-linha { flex-wrap: wrap; gap: 8px 14px; height: auto; padding: 8px 16px 10px; }
  .tl-logo img { height: 38px; }
  .tl-conta { margin-left: auto; gap: 18px; }
  .tl-entrar { display: none; }
  .tl-so-celular { display: flex; }
  .tl-busca { order: 3; flex-basis: 100%; height: 42px; }
  .tl-menu { position: relative; top: auto; }
  .tl-menu nav { padding: 0 8px; }
  .tl-painel { padding: 14px 16px 16px; grid-template-columns: 1fr 1fr; }
  .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(201,162,39,.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(201,162,39,.09), transparent 66%); bottom: -110px; left: -90px; }
.lg-marca { position: relative; display: flex; align-items: center; gap: 11px; }
.lg-selo { height: 96px; 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(255,255,255,.5); margin-bottom: 11px; }
.lg-titulo { font-family: var(--font-serif); font-weight: 400; font-size: 38px; line-height: 1.14; max-width: 420px; margin: 0; }
.lg-desc { font-size: 14px; line-height: 1.65; color: rgba(255,255,255,.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(255,255,255,.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(255,255,255,.55); }
.lg-rodape-atend { position: relative; margin-top: 30px; font-size: 11px; color: rgba(255,255,255,.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: 400; 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(--acao); color: var(--acao-texto);
  border-radius: 11px; font-family: var(--font-sans); font-size: 14.5px; font-weight: 600; cursor: pointer; margin-top: 4px; }
.lg-btn-entrar:hover { background: var(--acao-hover); }
.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: 72px; }
  .lg-banner-titulo { font-family: var(--font-serif); font-size: 20px; line-height: 1.28; }
  .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); }
.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: 400; 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; }
}

/* ---- Pagar com Pix (tela do pedido do cliente) ---- */
.cartao.pix-pagar { display: flex; gap: 22px; align-items: center; padding: 22px 24px; border-color: var(--gold); }
.pix-pagar-qr { flex: none; width: 180px; height: 180px; background: #fff; border: 1px solid var(--hair); border-radius: 12px; padding: 6px; }
.pix-pagar-texto { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.pix-pagar-texto p { margin: 0; font-size: 13.5px; line-height: 1.5; }
.pix-pagar-valor { font-family: var(--font-vitrine); font-variant-numeric: lining-nums; font-size: 28px; font-weight: 600; line-height: 1.1; }
.pix-pagar-texto textarea {
  width: 100%; font-family: 'IBM Plex Mono', monospace; font-size: 11px; line-height: 1.4; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 9px; background: var(--sunken); color: var(--ink);
  resize: none; word-break: break-all;
}
.pix-pagar-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.pix-pagar-acoes .btn { justify-content: center; }
@media (max-width: 640px) {
  .cartao.pix-pagar { flex-direction: column; align-items: stretch; padding: 18px 16px; }
  .pix-pagar-qr { align-self: center; }
  .pix-pagar-texto { flex: 0 0 auto; }
  .pix-pagar-acoes .btn { flex: 1 1 100%; min-height: 44px; }
}

/* ---- Pagamento online (InfinitePay) na tela do pedido do cliente ---- */
.cartao.pag-online { display: flex; flex-direction: column; gap: 4px; padding: 16px 20px; font-size: 13.5px; line-height: 1.5; }
.cartao.pag-online strong { font-size: 15px; }
.cartao.pag-online-ok { border-color: var(--green-ink, #2f7d4f); }
.cartao.pag-online-ok strong { color: var(--green-ink, #2f7d4f); }
.pix-pagar-texto form { margin: 0; }

/* ---- Compartilhar produto (página do produto) ---- */
.pd .pd-compartilhar { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; padding: 7px 14px;
  border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink);
  font: inherit; font-size: 13px; cursor: pointer; }
.pd .pd-compartilhar svg { width: 15px; height: 15px; flex: none; }
.pd .pd-compartilhar:hover { border-color: var(--gold); color: var(--gold-ink); }
.pd-info > .pd-ver-desc + .pd-compartilhar { margin-left: 14px; }

/* ---- Vendas › Pendências: no celular cada linha vira um cartão ---- */
@media (max-width: 900px) {
  .tabela-pendencias, .tabela-pendencias tbody, .tabela-pendencias tr, .tabela-pendencias td { display: block; width: auto; min-width: 0 !important; }
  .tabela-pendencias thead { display: none; }
  .tabela-pendencias tr { padding: 14px 16px; border-bottom: 1px solid var(--hair); }
  .tabela-pendencias tr:last-child { border-bottom: none; }
  .tabela-pendencias td { padding: 2px 0 !important; border: none !important; text-align: left; font-size: 13.5px; }
  .tabela-pendencias td.tp-nome { font-weight: 600; font-size: 14.5px; margin-bottom: 4px; }
  .tabela-pendencias td[data-rotulo]::before { content: attr(data-rotulo); display: inline-block; min-width: 96px; margin-right: 6px;
    color: var(--muted); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; font-family: var(--font-sans); }
  .tabela-pendencias td.tp-acao { margin-top: 8px; }
}

/* ---- Promoções do site: faixa no topo da vitrine (partials/_promocoes_faixa.html) ---- */
.promo-vitrine { display: flex; flex-direction: column; gap: 14px; margin-bottom: 18px; }
.promo-faixa { background: var(--ink); color: #fff; border-radius: 18px; padding: 18px 0 16px; overflow: hidden; }
.promo-faixa-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 0 20px 14px; }
.promo-faixa-texto { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.promo-faixa-olho { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.promo-faixa .promo-faixa-titulo { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 28px; line-height: 1.15; color: #fff; text-wrap: balance; }
.promo-faixa-sub { font-size: 12.5px; color: rgba(255,255,255,.72); }
.promo-faixa-selo { flex: none; min-width: 72px; height: 72px; padding: 0 12px; border-radius: 999px; background: var(--gold); color: var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; text-align: center; }
.promo-faixa-selo b { font-family: var(--font-vitrine); font-weight: 600; font-size: 20px; font-variant-numeric: lining-nums; white-space: nowrap; }
.promo-faixa-selo span { font-size: 10px; letter-spacing: .12em; font-weight: 600; margin-top: 3px; }
.promo-faixa-trilho { display: flex; gap: 12px; overflow-x: auto; padding: 0 20px 4px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.promo-faixa-trilho::-webkit-scrollbar { display: none; }
.promo-card { flex: none; width: 158px; scroll-snap-align: start; background: #fff; color: var(--ink); border-radius: 12px; overflow: hidden;
  text-decoration: none; display: flex; flex-direction: column; }
.promo-card:hover { text-decoration: none; }
.promo-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.promo-card-foto { position: relative; aspect-ratio: 3 / 4; background: var(--sunken); max-width: 100%; }
.promo-card-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.promo-card-pct { position: absolute; top: 8px; left: 8px; background: var(--gold); color: var(--ink); font-size: 11px; font-weight: 600;
  border-radius: 999px; padding: 2px 7px; }
.promo-card-nome { font-family: var(--font-vitrine); font-weight: 600; font-size: 12.5px; line-height: 1.3; padding: 8px 10px 2px; min-height: 41px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.promo-card-precos { padding: 0 10px 11px; display: flex; flex-direction: column; font-variant-numeric: lining-nums tabular-nums; }
.promo-card-precos s { font-size: 11px; color: var(--muted); }
.promo-card-precos b { font-family: var(--font-vitrine); font-weight: 600; font-size: 15.5px; }
.promo-card.promo-card-mais { width: 112px; background: transparent; color: #fff; border: 1px dashed rgba(255,255,255,.35);
  align-items: center; justify-content: center; text-align: center; gap: 4px; padding: 12px; }
.promo-card-mais b { font-family: var(--font-vitrine); font-size: 24px; color: var(--gold); }
.promo-card-mais span { font-size: 11.5px; color: rgba(255,255,255,.8); }
@media (max-width: 640px) {
  .promo-faixa { border-radius: 14px; padding: 16px 0 14px; }
  .promo-faixa-cab { padding: 0 16px 12px; }
  .promo-faixa .promo-faixa-titulo { font-size: 24px; }
  .promo-faixa-selo { min-width: 64px; height: 64px; }
  .promo-faixa-trilho { padding: 0 16px 4px; gap: 10px; }
  .promo-card { width: 138px; }
}

/* ---- Campo "Quem vê" (partials/_campo_publicos.html) ---- */
.campo-publicos { display: flex; flex-direction: column; gap: 8px; }
.campo-publicos-titulo { font-size: 13px; font-weight: 500; }
.campo-publicos-opcoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
.publico-opcao { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; cursor: pointer; }
.publico-opcao input { margin-top: 3px; accent-color: var(--ink); flex: none; }
.publico-opcao b { display: block; font-weight: 500; }
.publico-opcao small { display: block; font-size: 12px; color: var(--muted); }
.publico-opcao:has(input:checked) { border-color: var(--ink); }
.publicos-atalhos { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; font-size: 12.5px; }
.cmp-publicos { margin-top: 2px; }

/* ---- Tela de promoção do admin (admin/promocao_form.html) ---- */
.pm-form { display: flex; flex-direction: column; gap: 16px; }
.pm-colunas { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.pm-campos { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@media (max-width: 1000px) { .pm-colunas { grid-template-columns: minmax(0, 1fr); } }
.pm-segmentos { display: flex; flex-wrap: wrap; gap: 6px; }
.pm-segmentos button { font: inherit; font-size: 13px; border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  border-radius: 999px; padding: 6px 14px; cursor: pointer; }
.pm-segmentos button[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.pm-desconto { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pm-desconto input { width: 110px; }
.pm-resultados { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 10px; max-height: 260px; overflow-y: auto; }
.pm-resultados button { font: inherit; font-size: 13px; text-align: left; background: var(--surface); border: none; border-bottom: 1px solid var(--hair);
  padding: 9px 12px; cursor: pointer; color: var(--ink); }
.pm-resultados button:hover, .pm-resultados button:focus-visible { background: var(--sunken); }
.pm-resultados .apoio { padding: 9px 12px; }
.pm-escolhidos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pm-escolhidos:empty { display: none; }
.pm-escolhidos li { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 10px; padding: 6px 6px 6px 12px; font-size: 13px; }
.pm-escolhidos li span { flex: 1; min-width: 0; }
.pm-previa { position: sticky; top: 16px; padding: 16px; display: flex; flex-direction: column; gap: 12px; background: var(--sunken); }
.pm-previa-total b { font-family: var(--font-vitrine); font-size: 30px; line-height: 1; }
.pm-previa-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pm-previa-lista li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 12.5px; }
.pm-previa-foto { width: 44px; height: 56px; border-radius: 8px; overflow: hidden; background: var(--surface); }
.pm-previa-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pm-previa-nome { font-family: var(--font-vitrine); font-weight: 600; line-height: 1.3; }
.pm-previa-val { text-align: right; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.pm-previa-val s { display: block; color: var(--muted); font-size: 11px; font-family: var(--font-vitrine); }
.pm-previa-val b { font-family: var(--font-vitrine); font-weight: 600; }
.pm-previa-zero .pm-previa-val b { color: var(--red); }

/* ---- Confirmação antes de ação sem volta (static/js/confirmar.js) ---- */
.confirmar-janela { border: 1px solid var(--line); border-radius: 16px; padding: 22px 22px 18px; max-width: min(420px, calc(100vw - 32px));
  background: var(--surface); color: var(--ink); box-shadow: 0 24px 60px rgba(11,11,11,.25); }
.confirmar-janela::backdrop { background: rgba(11,11,11,.45); }
.confirmar-texto { margin: 0 0 18px; font-size: 15px; line-height: 1.5; }
.confirmar-acoes { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.btn.confirmar-sim { background: var(--red); border-color: var(--red); color: #fff; }
.btn.confirmar-sim:hover { filter: brightness(.92); }

/* ---- Login: "Entrando…" enquanto a próxima tela abre (static/js/entrando.js) ---- */
html.lg-entrando, html.lg-entrando * { cursor: progress; }
[data-entrando][disabled] { opacity: .7; }
[data-entrando][aria-busy="true"] { opacity: 1; }

/* ---- Painel do admin: esqueleto enquanto os números chegam do Bling (static/js/painel-carregar.js) ---- */
.painel-carregando { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.painel-carregando-texto { font-size: 13px; color: var(--muted); }
.painel-esqueleto { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.painel-esqueleto span { height: 92px; border-radius: 12px; background: var(--sunken); border: 1px solid var(--hair);
  animation: painel-pulsar 1.4s ease-in-out infinite; }
.painel-esqueleto-largo { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.painel-esqueleto-largo span { height: 220px; }
.painel-esqueleto span:nth-child(2) { animation-delay: .15s; }
.painel-esqueleto span:nth-child(3) { animation-delay: .3s; }
.painel-esqueleto span:nth-child(4) { animation-delay: .45s; }
@keyframes painel-pulsar { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .painel-esqueleto span { animation: none; } }
.painel-falhou { margin-top: 16px; }

/* Vendas › Pendências: "Já recebi: dar baixa" do pagamento online (admin_bp.pagamento_recebido_manual) */
.tp-baixa { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; flex-wrap: wrap; }
.tp-baixa select { height: 30px; padding: 0 6px; font-size: 12.5px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--ink); }

/* ---- Indique e ganhe (indicacoes.py; protótipo aprovado em 15/10/2026, opção 1A) ---- */
/* banner da vitrine pro cliente logado (partials/_indique_banner.html) */
.igb { background: var(--ink); color: #fff; border-radius: 16px; padding: 20px 20px 18px; margin: 0 0 18px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; align-items: center; }
.igb-olho { grid-column: 1 / -1; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.igb .igb-titulo { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 26px; line-height: 1.15; color: #fff; text-wrap: balance; }
.igb-selo { grid-row: 2 / span 2; grid-column: 2; width: 84px; height: 84px; border-radius: 50%; background: var(--gold); color: var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; text-align: center; }
.igb-selo b { font-family: var(--font-vitrine); font-weight: 600; font-size: 26px; font-variant-numeric: lining-nums; }
.igb-selo small { font-size: 9px; letter-spacing: .1em; font-weight: 600; margin-top: 4px; }
.igb-texto { margin: 0; font-size: 13px; color: rgba(255,255,255,.76); max-width: 60ch; }
.igb-pe { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.igb-saldo { font-size: 12.5px; color: rgba(255,255,255,.82); }
.igb-saldo b { color: var(--gold); font-family: var(--font-vitrine); font-weight: 600; font-size: 16px; font-variant-numeric: lining-nums; }
.igb-botao { display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 9px; background: #fff; color: var(--ink);
  font-weight: 600; font-size: 13.5px; text-decoration: none; }
.igb-botao:hover { text-decoration: none; background: var(--gold-soft); color: var(--ink); }
.igb-botao:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (max-width: 640px) {
  .igb { padding: 16px 16px 14px; border-radius: 14px; }
  .igb .igb-titulo { font-size: 22px; }
  .igb-selo { width: 72px; height: 72px; }
  .igb-selo b { font-size: 22px; }
}
/* faixa de quem chegou pelo link de alguém */
.ig-faixa { border: 1px solid var(--gold); background: var(--gold-soft); border-radius: 14px; padding: 12px 16px; margin: 0 0 16px; }
.ig-faixa p { margin: 0; font-size: 13.5px; color: var(--gold-ink); }
.ig-faixa b { font-weight: 600; }

/* página do cliente (cliente/indique.html) */
.ig-pagina { display: flex; flex-direction: column; gap: 16px; }
.ig-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 18px; align-items: start; }
.ig-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
@media (max-width: 860px) { .ig-grade { grid-template-columns: minmax(0, 1fr); } }
.ig-saldo { background: var(--ink); color: #fff; border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.ig-olho { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.ig-saldo-valor { font-family: var(--font-vitrine); font-weight: 600; font-size: 38px; line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
.ig-saldo p { margin: 0; font-size: 13px; color: rgba(255,255,255,.78); }
.ig-saldo p b { color: #fff; font-weight: 600; }
.ig-link { display: flex; gap: 6px; }
.ig-link input { flex: 1; min-width: 0; height: 42px; border-radius: 9px; border: 1px solid rgba(255,255,255,.24); background: rgba(255,255,255,.08);
  color: #fff; padding: 0 10px; font: 400 13px var(--font-sans); }
.ig-link button { height: 42px; border-radius: 9px; border: 0; background: var(--gold); color: var(--ink); font: 600 13px var(--font-sans); padding: 0 16px; cursor: pointer; }
.ig-link button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ig-zap { width: 100%; justify-content: center; }
.ig-passos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ig-passos div { border: 1px solid var(--line); border-radius: 12px; padding: 10px 10px 12px; font-size: 12.5px; line-height: 1.35;
  display: flex; flex-direction: column; gap: 6px; background: var(--surface); }
.ig-passos b { width: 24px; height: 24px; border-radius: 50%; background: var(--gold-soft); color: var(--gold-ink); display: grid; place-items: center; font-size: 12px; }
.ig-lista { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface); }
.ig-lista h2 { margin: 0; padding: 12px 16px; font-family: var(--font-sans); font-size: 14px; font-weight: 600; border-bottom: 1px solid var(--hair); background: var(--sunken); }
.ig-linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--hair); }
.ig-linha:last-child { border-bottom: 0; }
.ig-linha > div { min-width: 0; display: flex; flex-direction: column; }
.ig-linha b { font-weight: 500; font-size: 13.5px; }
.ig-linha small { color: var(--muted); font-size: 12px; }
.ig-linha .num { font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 13.5px; }
.ig-entra { color: var(--green-ink); font-weight: 600; }
.ig-sai { color: var(--ink); }
.ig-riscado { text-decoration: line-through; opacity: .6; }
.ig-etq { font-size: 11.5px; border-radius: 999px; padding: 2px 10px; white-space: nowrap; background: var(--sunken); color: var(--muted); border: 1px solid var(--line); }
.ig-etq-ok { background: var(--green-soft); color: var(--green-ink); border-color: transparent; }
.ig-total { background: var(--sunken); }
.ig-vazio { margin: 0; padding: 14px 16px; color: var(--muted); font-size: 13px; }
.ig-regras { margin: 0; font-size: 12px; color: var(--muted); }

/* finalização da compra: usar o crédito (cliente/checkout.html) */
.ig-usar { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--gold); background: var(--gold-soft); border-radius: 12px; padding: 12px 14px; cursor: pointer; }
.ig-usar input { margin-top: 3px; accent-color: var(--ink); width: 18px; height: 18px; flex: none; }
.ig-usar b { font-weight: 600; font-size: 14px; }
.ig-usar small { display: block; color: var(--gold-ink); font-size: 12.5px; }
.ig-credito-linha { display: flex; justify-content: space-between; gap: 12px; margin: 0; color: var(--green-ink); font-size: 14px; }
.ig-credito-linha[hidden] { display: none; }

/* admin (admin/indique.html) */
.ig-adm { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: start; }
.ig-regras-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; align-items: end; }
.ig-regras-form .ig-liga, .ig-regras-form button { grid-column: 1 / -1; }
.ig-regras-form button { justify-self: start; }
.ig-liga { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.ig-liga input { width: 18px; height: 18px; accent-color: var(--ink); }
.ig-numeros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ig-numeros div { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; }
.ig-numeros b { font-family: var(--font-vitrine); font-weight: 600; font-size: 22px; font-variant-numeric: lining-nums tabular-nums; }
.ig-numeros span { font-size: 12px; color: var(--muted); }
.ig-ajuste-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; align-items: end; }
.ig-ajuste-form .ig-motivo { grid-column: 1 / -1; }
.ig-ajuste-form button { justify-self: start; }

/* ---- Entrega / frete (frete.py, static/js/frete.js; protótipo aprovado em 16/10/2026) ---- */
.fr-link { background: none; border: 0; padding: 0; min-height: 0; color: var(--gold-ink); font: 500 13px var(--font-sans);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; white-space: nowrap; }
.fr-link:hover { color: var(--ink); background: none; }
.fr-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.fr-cadastro { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; font-size: 14px; }
.fr-cadastro b { display: block; font-weight: 600; }
.fr-cep { display: grid; grid-template-columns: minmax(0, 220px) auto; gap: 12px; align-items: end; }
.fr-cep .fr-link { padding-bottom: 12px; justify-self: start; }
.fr-lado { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.fr-uf { max-width: 90px; }
.fr-achado { font-size: 13.5px; background: var(--sunken); border-radius: 10px; padding: 9px 12px; }
.fr-achado small { display: block; color: var(--muted); font-size: 12.5px; }
.fr-status { margin: 0; font-size: 13px; color: var(--muted); }
.fr-status:empty { display: none; }
.fr-status.fr-erro { color: #8a2b1b; background: #fbe9e5; border-radius: 10px; padding: 9px 12px; }
.fr-opcoes { display: flex; flex-direction: column; gap: 8px; }
.fr-opcoes:empty { display: none; }
.fr-opcao { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; align-items: center; border: 1px solid var(--line);
  border-radius: 12px; padding: 11px 12px; cursor: pointer; background: var(--surface); }
.fr-opcao:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.fr-opcao:focus-within { outline: 2px solid var(--gold); outline-offset: 2px; }
.fr-opcao input { width: 18px; height: 18px; margin: 0; accent-color: var(--ink); }
.fr-opcao-texto { display: flex; flex-direction: column; min-width: 0; }
.fr-nome { font-weight: 500; font-size: 14px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fr-prazo { color: var(--muted); font-size: 12.5px; }
.fr-preco { font-family: var(--font-vitrine); font-weight: 600; font-size: 15px; font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap; text-align: right; }
.fr-preco s { display: block; color: var(--muted); font-family: var(--font-sans); font-weight: 400; font-size: 11.5px; }
.fr-gratis { color: var(--green-ink); }
.fr-selo { font-size: 10.5px; font-weight: 600; letter-spacing: .04em; border-radius: 999px; padding: 2px 8px;
  background: var(--green-soft); color: var(--green-ink); }
.fr-selo-loja { background: var(--gold-soft); color: var(--gold-ink); }
.fr-meta { border: 1px solid var(--gold); background: var(--gold-soft); border-radius: 12px; padding: 10px 12px; display: flex;
  flex-direction: column; gap: 7px; font-size: 13px; color: var(--gold-ink); }
.fr-meta b { font-weight: 600; }
.fr-meta-ok { border-color: transparent; background: var(--green-soft); color: var(--green-ink); }
.fr-barra { display: block; height: 6px; border-radius: 99px; background: rgba(125,90,11,.15); overflow: hidden; }
.fr-barra i { display: block; height: 100%; background: var(--gold); border-radius: 99px; }
@media (max-width: 480px) {
  .fr-cep { grid-template-columns: minmax(0, 1fr) auto; }
}

/* admin › Configurações › Frete */
.fr-adm { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: start; }
.fr-adm-form { display: grid; gap: 12px; }
.fr-adm-form button { justify-self: start; }
.fr-pesos { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.fr-pesos td { padding: 7px 0; border-bottom: 1px solid var(--hair); }
.fr-pesos td:last-child { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
.fr-teste { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; }
/* a tabela de produtos da finalização rola dentro da própria caixa no celular
   (o overflow-x da .tabela-scroll só existia no style-desktop.css) */
.checkout-itens-wrap .tabela-scroll { overflow-x: auto; max-width: 100%; }

/* ---- Avise-me quando chegar (avise_me.py, static/js/avise-me.js; aprovado em 16/10/2026) ---- */
.produto-foto-wrap .badge-esgotado { background: var(--ink); color: #fff; }
.pd-esgotado { display: flex; flex-direction: column; gap: 12px; }
.pd-esgotado-selo { align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  background: var(--ink); color: #fff; border-radius: 6px; padding: 5px 10px; }
.pd-avise { display: flex; flex-direction: column; gap: 10px; }
.pd-avise-titulo { font-family: var(--font-serif); font-weight: 400; font-size: 21px; line-height: 1.2; }
.pd-avise p { margin: 0; font-size: 13.5px; color: var(--muted); }
.pd-avise-campo { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--muted); }
.pd-avise-campo input { height: 46px; border: 1px solid var(--line); border-radius: 9px; padding: 0 12px; font: 400 15px var(--font-sans);
  color: var(--ink); background: var(--surface); width: 100%; min-width: 0; }
.pd-avise-campo input:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.pd .pd-avise .pd-avise-msg { font-size: 13.5px; border-radius: 9px; padding: 10px 12px; color: var(--ink); background: var(--sunken); }
.pd .pd-avise .pd-avise-ok, .pd-avise-ok { color: var(--green-ink); background: var(--green-soft); border-radius: 9px; padding: 10px 12px;
  font-size: 13.5px; margin: 0; }
.pd .pd-avise .pd-avise-erro { color: #8a2b1b; background: #fbe9e5; }
.pd-avise-nota { font-size: 12px; color: var(--muted); }

/* ---- Avaliações (avaliacoes.py, partials/_estrelas.html, static/js/avaliacoes.js; protótipo aprovado em 16/10/2026) ---- */
.av-estrelas { position: relative; display: inline-flex; vertical-align: middle; line-height: 0; flex: none;
  width: max-content; align-self: flex-start; justify-self: start; }   /* nunca estica: o dourado é % dessa largura */
.av-estrelas svg { width: var(--av-tam, 16px); height: var(--av-tam, 16px); flex: none; fill: currentColor; }
.av-fundo { display: flex; color: #E3DED2; }
.av-cheia { display: flex; color: var(--gold); position: absolute; top: 0; left: 0; bottom: 0; overflow: hidden; white-space: nowrap; }
.av-so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.av-resumo { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 14px; align-items: center; margin-bottom: 12px; }
.av-nota-grande { grid-row: 1 / span 2; font-family: var(--font-vitrine); font-weight: 600; font-size: 44px; line-height: 1;
  font-variant-numeric: lining-nums tabular-nums; }
.av-contagem { color: var(--muted); font-size: 13px; }
.av-criterios { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; border-top: 1px solid var(--hair); max-width: 420px; }
.av-criterio { display: grid; grid-template-columns: minmax(0, 1fr) auto 32px; gap: 10px; align-items: center; font-size: 13.5px; }
.av-num { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.av-lista { display: flex; flex-direction: column; }
.av-item { padding: 14px 0; border-top: 1px solid var(--hair); display: flex; flex-direction: column; gap: 6px; }
.av-item-topo { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.av-item-topo b { font-weight: 600; }
.av-item-topo small { color: var(--muted); font-size: 12px; }
.av-item p { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.av-comprou { color: var(--gold-ink); background: var(--gold-soft); border-radius: 999px; padding: 1px 8px; font-size: 11.5px; }
.av-mini { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--muted); }
.av-mini b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.av-mais { border-top: 1px solid var(--hair); }
.av-mais summary { cursor: pointer; padding: 12px 0; color: var(--gold-ink); font-weight: 500; font-size: 13.5px; text-decoration: underline; text-underline-offset: 3px; }
.av-mais[open] summary { display: none; }

.av-form { margin-top: 16px; }
.av-form-corpo { display: flex; flex-direction: column; gap: 16px; }
.av-nota { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; min-width: 0; }
.av-nota legend { padding: 0; font-size: 14px; font-weight: 500; float: left; }
.av-obrig { color: #8a2b1b; }
.av-valor { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
.av-seletor { grid-column: 1 / -1; position: relative; width: max-content; }
.av-seletor .av-cheia { width: 0; }
.av-alvos { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(10, 1fr); }
.av-alvos label { cursor: pointer; }
.av-alvos input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.av-seletor:focus-within { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 6px; }
.av-seletor:has(input[value="0.5"]:checked) .av-cheia { width: 10%; }
.av-seletor:has(input[value="1"]:checked) .av-cheia { width: 20%; }
.av-seletor:has(input[value="1.5"]:checked) .av-cheia { width: 30%; }
.av-seletor:has(input[value="2"]:checked) .av-cheia { width: 40%; }
.av-seletor:has(input[value="2.5"]:checked) .av-cheia { width: 50%; }
.av-seletor:has(input[value="3"]:checked) .av-cheia { width: 60%; }
.av-seletor:has(input[value="3.5"]:checked) .av-cheia { width: 70%; }
.av-seletor:has(input[value="4"]:checked) .av-cheia { width: 80%; }
.av-seletor:has(input[value="4.5"]:checked) .av-cheia { width: 90%; }
.av-seletor:has(input[value="5"]:checked) .av-cheia { width: 100%; }
.av-texto { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 500; }
.av-texto small { font-weight: 400; color: var(--muted); }
.av-texto textarea { width: 100%; min-height: 96px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
  font: 400 14.5px var(--font-sans); resize: vertical; }
.pd .av-enviar:disabled { opacity: .45; cursor: not-allowed; }
.av-rodape { margin: 0; font-size: 12px; color: var(--muted); }
.av-entrar { margin-top: 14px; background: var(--sunken); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.pd .av-entrar .pd-botao { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
/* cartão da vitrine */
.produto-aval { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); margin-top: 3px; font-variant-numeric: tabular-nums; }
/* admin */
.av-adm { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; padding: 12px 16px; border-top: 1px solid var(--hair); }
.av-adm-texto { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.av-adm-texto small { color: var(--muted); font-size: 12px; }
.av-adm-texto p { margin: 0; font-size: 13.5px; overflow-wrap: anywhere; }
.av-adm-notas { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.av-adm-oculta .av-adm-texto { opacity: .55; }

/* ---- Tamanhos e cores do mesmo produto (variacoes.py, partials/_produto_grade.html, static/js/tamanhos.js; aprovado em 16/10/2026) ---- */
.produto-tams { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.produto-tams span { font-size: 11px; line-height: 18px; border: 1px solid var(--line); border-radius: 5px; padding: 0 5px; color: var(--ink); }
.produto-tams span.fora { color: #A7A29A; text-decoration: line-through; border-style: dashed; }
.pd-cor-txt { color: var(--muted); font-size: 13px; margin-top: -4px; }
.pd-escolha { display: flex; flex-direction: column; gap: 8px; }
.pd-escolha-tit { font-size: 13.5px; }
.pd-escolha-tit b { font-weight: 600; }
.pd-cores { display: flex; flex-wrap: wrap; gap: 8px; }
.pd-cor { width: 56px; height: 70px; border-radius: 9px; border: 1px solid var(--line); overflow: hidden; background: var(--sunken); display: block; }
.pd-cor img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-cor[aria-current="true"] { border: 2px solid var(--ink); }
.pd-cor-esgotada img { opacity: .45; }
.pd-cor:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.pd-tams { display: flex; flex-wrap: wrap; gap: 8px; }
.pd-tam { min-width: 48px; height: 44px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface);
  font: 600 14px var(--font-sans); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.pd-tam:hover { text-decoration: none; border-color: var(--ink); color: var(--ink); }
.pd-tam.fora { color: #A7A29A; text-decoration: line-through; border-style: dashed; }
.pd-tam[aria-pressed="true"] { border: 2px solid var(--ink); }
.pd-tam:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.pd .pd-botao-espera:disabled { opacity: .45; cursor: not-allowed; }
.pd-comprar { display: flex; flex-direction: column; gap: 12px; }
.car-tam { display: inline-block; font-size: 11.5px; font-weight: 600; background: var(--sunken); border: 1px solid var(--line);
  border-radius: 5px; padding: 0 6px; margin-left: 4px; vertical-align: 1px; }

/* ---- Envio pelos Correios no pedido do admin (envios.py, partials/_envio_correios.html) ---- */
.ec { flex: none; border: 1px solid var(--line); border-radius: 12px; padding: 13px 14px; display: flex; flex-direction: column; gap: 10px; }
.ec-olho { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ec-nota { margin: 0; font-size: 12.5px; color: var(--muted); }
.ec-codigo { display: flex; flex-direction: column; gap: 2px; }
.ec-codigo span { font-size: 11px; color: var(--muted); }
.ec-codigo strong { font-size: 18px; letter-spacing: .04em; }
.ec-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.ec-acoes .btn { text-decoration: none; }
.ec-link { background: none; border: 0; padding: 0; min-height: 0; color: #8a2b1b; font: 500 12.5px var(--font-sans); text-decoration: underline; cursor: pointer; }
.ec-form { display: flex; flex-direction: column; gap: 10px; }
.ec-dims { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ec-form .btn { align-self: flex-start; }
.ec-cliente { padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.ec-cliente .btn { align-self: flex-start; text-decoration: none; }

/* ---- Loja física: provador e consignado (loja_fisica.py, templates/loja/*) — protótipo aprovado em 17/10 ---- */
.lf-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.lf-cab h1 { margin: 0; }
.lf-cab .btn { text-decoration: none; }
.lf-abas { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 14px; }
.lf-abas .aba { text-decoration: none; }
.lf-abas .aba .num { font-size: 11px; }
.lf-grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
@media (min-width: 980px) { .lf-grade { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
.lf-lista { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); }
.lf-linha { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px; padding: 12px 14px; border-top: 1px solid var(--hair);
  align-items: center; color: var(--ink); text-decoration: none; }
.lf-linha:first-child { border-top: 0; }
a.lf-linha:hover { background: var(--sunken); text-decoration: none; color: var(--ink); }
.lf-linha-nome { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.lf-linha-det { grid-column: 1 / -1; color: var(--muted); font-size: 12.5px; display: flex; gap: 4px 12px; flex-wrap: wrap; }
.lf-vazio { padding: 18px 14px; color: var(--muted); font-size: 13px; }
.lf-pill { font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 20px; white-space: nowrap; background: var(--sunken); color: var(--muted); }
.lf-pill-fora { background: #E8EAF4; color: #4F5C93; }
.lf-pill-vence_hoje { background: var(--gold-soft); color: var(--gold-ink); }
.lf-pill-atrasada { background: var(--red-soft); color: var(--red); }
.lf-pill-fechada { background: var(--green-soft); color: var(--green-ink); }
.lf-pill-rascunho { background: var(--sunken); color: var(--muted); border: 1px dashed var(--line); }
.lf-peca { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--hair); }
.lf-peca:first-child { border-top: 0; }
.lf-foto { width: 42px; height: 52px; border-radius: 6px; object-fit: cover; background: var(--sunken); border: 1px solid var(--hair); display: block; }
.lf-peca-txt { min-width: 0; }
.lf-peca-txt b { font-weight: 500; display: block; font-size: 13.5px; overflow-wrap: anywhere; }
.lf-peca-txt small { color: var(--muted); font-size: 12px; }
.lf-peca-acao { display: flex; align-items: center; gap: 6px; }
.lf-peca-acao form { display: flex; gap: 6px; align-items: center; margin: 0; }
.lf-peca-acao input[type=number] { width: 56px; height: 34px; border: 1px solid var(--line); border-radius: 8px; padding: 0 6px; font: 14px var(--font-mono); }
.lf-total { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 11px 14px; background: var(--sunken); border-radius: 10px; }
.lf-total b { font: 500 20px var(--font-mono); font-variant-numeric: tabular-nums; }
.lf-busca { position: relative; display: flex; gap: 8px; }
.lf-busca input { flex: 1; min-width: 0; height: 44px; border: 1px solid var(--line); border-radius: 9px; padding: 0 12px; font: 15px var(--font-sans); background: var(--surface); color: var(--ink); }
.lf-busca .btn { height: 44px; }
.lf-sugestoes { position: absolute; left: 0; right: 0; top: 48px; z-index: 30; background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: var(--shadow); max-height: 320px; overflow: auto; }
.lf-sugestao { display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left; padding: 9px 12px; border: 0; border-top: 1px solid var(--hair);
  background: var(--surface); color: var(--ink); font: 400 13.5px var(--font-sans); cursor: pointer; }
.lf-sugestao:first-child { border-top: 0; }
.lf-sugestao:hover, .lf-sugestao:focus-visible { background: var(--sunken); outline: none; }
.lf-sugestao small { color: var(--muted); font-size: 12px; }
.lf-prazos { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.lf-prazos form { margin: 0; }
.lf-prazos .chip { height: 36px; }
.lf-prazos input[type=date] { height: 36px; border: 1px solid var(--line); border-radius: 9px; padding: 0 8px; font: 13px var(--font-sans); background: var(--surface); color: var(--ink); }
.lf-problemas { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; }
.lf-seg { display: inline-grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.lf-seg label { margin: 0; cursor: pointer; }
.lf-seg input { position: absolute; opacity: 0; pointer-events: none; }
.lf-seg span { display: block; font: 600 12.5px var(--font-sans); padding: 8px 12px; color: var(--muted); background: var(--surface); }
.lf-seg input:checked + span.v { background: var(--green-soft); color: var(--green-ink); }
.lf-seg input:checked + span.f { background: var(--gold-soft); color: var(--gold-ink); }
.lf-seg input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: -2px; }
.lf-qtd { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.lf-qtd button { width: 34px; height: 34px; border: 0; padding: 0; background: var(--surface); color: var(--ink); font: 400 17px var(--font-sans); cursor: pointer; }
.lf-qtd input { width: 40px; height: 34px; border: 0; text-align: center; font: 14px var(--font-mono); background: var(--surface); color: var(--ink); -moz-appearance: textfield; }
.lf-qtd input::-webkit-inner-spin-button { -webkit-appearance: none; }
.lf-acerto { width: 100%; border-collapse: collapse; font-size: 13px; }
.lf-acerto th { text-align: left; font-weight: 500; color: var(--muted); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; padding: 6px 6px; border-bottom: 1px solid var(--line); }
.lf-acerto td { padding: 9px 6px; border-bottom: 1px solid var(--hair); vertical-align: middle; }
.lf-acerto .n { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lf-conta { display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; }
.lf-conta div { display: flex; justify-content: space-between; gap: 10px; }
.lf-conta .fim { border-top: 1px solid var(--line); padding-top: 6px; margin-top: 2px; font-weight: 600; }
.lf-formas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
@media (min-width: 520px) { .lf-formas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.lf-formas label { margin: 0; }
.lf-formas input { position: absolute; opacity: 0; pointer-events: none; }
.lf-formas span { display: flex; align-items: center; justify-content: center; height: 42px; border: 1px solid var(--line); border-radius: 9px; font: 500 13.5px var(--font-sans);
  background: var(--surface); color: var(--ink); cursor: pointer; text-align: center; padding: 0 6px; }
.lf-formas input:checked + span { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.lf-formas input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.lf-formas .lf-forma-pendente span { border-style: dashed; color: var(--muted); }
.lf-explica { font-size: 12.5px; color: var(--muted); border-left: 2px solid var(--gold); padding-left: 10px; margin: 0; }
.lf-passos { display: flex; flex-direction: column; gap: 8px; font-size: 13px; margin: 0; padding: 0; list-style: none; }
.lf-docs { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.lf-docs a { text-decoration: none; }
.lf-numeros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 720px) { .lf-numeros { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.lf-numeros div { display: flex; flex-direction: column; gap: 2px; }
.lf-numeros b { font: 500 20px var(--font-mono); font-variant-numeric: tabular-nums; }
.lf-numeros span { color: var(--muted); font-size: 12px; }
.lf-acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.lf-acoes form { margin: 0; }
.lf-acoes .btn { text-decoration: none; }
.lf-form-grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@media (min-width: 640px) { .lf-form-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lf-form-grade .largo { grid-column: 1 / -1; } }
.lf-form-grade .campo input, .lf-form-grade .campo textarea, .lf-form-grade .campo select { height: 44px; font-size: 15px; }
.lf-form-grade .campo textarea { height: auto; padding: 10px 12px; }

/* ---- Assinatura na tela, no balcão (assinaturas.py, partials/_assinar.html) ---- */
.ass { display: flex; flex-direction: column; gap: 12px; }
.ass-dados { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@media (min-width: 560px) { .ass-dados { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
.ass-dados .campo input { height: 46px; font-size: 16px; }
.ass-quadro { position: relative; border: 1.5px dashed var(--line); border-radius: 12px; height: 180px; background: #FFFFFF; touch-action: none; }
.ass-quadro canvas { width: 100%; height: 100%; display: block; cursor: crosshair; border-radius: 12px; }
.ass-quadro .ass-dica { position: absolute; left: 14px; right: 14px; bottom: 12px; border-top: 1px solid rgba(11,11,11,.25); padding-top: 4px;
  font-size: 11.5px; color: #6B6B6B; pointer-events: none; }
.ass-quadro.assinado { border-style: solid; border-color: var(--ink); }
.ass-linha { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; align-items: center; }
.ass-foto input[type=file] { font-size: 13px; max-width: 100%; }
.ass-marcar { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--ink); cursor: pointer; }
.ass-marcar input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--ink); }
.ass .btn-ouro { height: 48px; font-size: 15px; }
.ass .btn-ouro:disabled { opacity: .45; cursor: not-allowed; }
.ass-selo { font-size: 12px; color: var(--muted); }

/* ---- Documento jurídico na tela (documento_juridico.py, partials/_documento_juridico.html) ---- */
.docjur { background: #FFFFFF; color: #0B0B0B; border: 1px solid var(--line); border-radius: 10px; padding: 22px 18px 18px; font-family: Georgia, 'Times New Roman', serif; }
.docjur-rolagem { max-height: 52vh; overflow: auto; border-radius: 10px; }
.docjur-titulo { font-family: inherit; font-weight: 700; font-size: 16px; line-height: 1.3; letter-spacing: .05em; text-transform: uppercase; text-align: center; margin: 0 0 6px; text-wrap: balance; }
.docjur-titulo::after { content: ""; display: block; width: 56px; height: 2px; background: var(--gold); margin: 12px auto 4px; }
.docjur-partes { margin: 14px 0; display: grid; gap: 8px; }
.docjur p { margin: 0; font-size: 14px; line-height: 1.6; text-align: justify; hyphens: auto; }
.docjur-texto { margin: 7px 0 0 !important; }
.docjur-num { font-variant-numeric: tabular-nums; margin-right: 4px; }
.docjur-clausula { margin-top: 16px; }
.docjur-clausula h2 { font-family: inherit; font-size: 12px; font-weight: 700; letter-spacing: .06em; margin: 0 0 2px; padding-top: 11px; border-top: 1px solid rgba(11,11,11,.12); text-transform: uppercase; }
.docjur-clausula.destaque { background: #FFFBF0; border-left: 3px solid var(--gold); padding: 0 0 8px 10px; margin-left: -10px; }
.docjur-tag { display: inline-block; font-size: 10px; letter-spacing: .05em; background: var(--gold); color: #0B0B0B; border-radius: 3px; padding: 1px 6px; vertical-align: middle; }
.docjur-tabela { overflow-x: auto; margin-top: 10px; }
.docjur-tabela table { border-collapse: collapse; width: 100%; font-size: 13px; }
.docjur-tabela th { text-align: left; background: #F4F1E8; font-weight: 700; }
.docjur-tabela th, .docjur-tabela td { border: 1px solid rgba(11,11,11,.18); padding: 6px 8px; font-variant-numeric: tabular-nums; }
.docjur-fecho { margin-top: 20px !important; text-align: left !important; }
.docjur-resumo { background: #FBF0D6; border: 1px solid var(--gold); border-radius: 6px; padding: 12px 14px; margin: 14px 0; font-size: 13.5px; font-family: var(--font-sans); }
.docjur-resumo ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.docjur-assinaturas { display: grid; grid-template-columns: 1fr; gap: 26px; margin-top: 30px; }
@media (min-width: 560px) { .docjur-assinaturas { grid-template-columns: 1fr 1fr; } }
.docjur-assin { display: grid; gap: 2px; text-align: center; font-size: 13px; }
.docjur-linha { border-top: 1px solid #0B0B0B; margin-bottom: 4px; }
.docjur-pagina { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }

/* ---- Jurídico (juridico_casos.py, templates/juridico/*) ---- */
.jur-etapas { display: flex; overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.jur-etapas form { display: contents; }
.jur-etapas button { flex: 1 0 auto; border: 0; border-left: 1px solid var(--hair); background: var(--surface); color: var(--muted); font: 500 12px var(--font-sans);
  padding: 9px 10px; white-space: nowrap; cursor: pointer; }
.jur-etapas form:first-child button { border-left: 0; }
.jur-etapas button.agora { background: var(--ink); color: var(--surface); font-weight: 600; }
.jur-etapas button:hover:not(.agora) { background: var(--sunken); color: var(--ink); }
.jur-tempo { display: flex; flex-direction: column; gap: 9px; font-size: 13px; margin: 0; padding: 0; list-style: none; }
.jur-tempo li { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 8px; }
.jur-tempo time { font-family: var(--font-mono); color: var(--muted); font-size: 11.5px; }
.jur-tempo small { color: var(--muted); }
.jur-provas { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.jur-provas li { display: flex; gap: 8px; align-items: flex-start; }
.jur-provas i { font-style: normal; width: 18px; height: 18px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 11px;
  background: var(--sunken); color: var(--muted); border: 1px solid var(--line); }
.jur-provas li.on i { background: var(--green-soft); color: var(--green-ink); border-color: transparent; }
.jur-filtros { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.jur-filtros .chip { text-decoration: none; height: 34px; }
.jur-filtros form { display: flex; gap: 6px; flex: 1 1 220px; min-width: 0; }
.jur-filtros input[type=search] { flex: 1; min-width: 0; height: 34px; border: 1px solid var(--line); border-radius: 9px; padding: 0 10px; font: 13.5px var(--font-sans); }
.jur-parcelas { width: 100%; border-collapse: collapse; font-size: 13px; }
.jur-parcelas td, .jur-parcelas th { padding: 7px 6px; border-bottom: 1px solid var(--hair); text-align: left; }
.jur-parcelas .n { text-align: right; font-family: var(--font-mono); }
.jur-link-copiar { display: flex; gap: 6px; }
.jur-link-copiar input { flex: 1; min-width: 0; height: 36px; border: 1px solid var(--line); border-radius: 8px; padding: 0 10px; font: 12.5px var(--font-mono); background: var(--sunken); color: var(--ink); }