/* ============================================================
   PAINEL — visual novo (reforma de 2026-10).
   Peças com prefixo nv- ("novo visual"), para não se misturar com o
   styles.css antigo. Cores, letra e medidas vêm SÓ das variáveis do tema
   (public/tema.js): --c-* (cores), --f-ui (letra), --fs-* (tamanho do
   texto), --h-* (alturas), --r-* (cantos) e --esp-* (espaços).
   Tamanhos iguais aos do app de estudos: texto 12,9px, botão 31px.
   As telas vão passando para cá na Etapa 3; a 1ª foi Configurações.
   ============================================================ */

/* ---------- base de uma tela no visual novo ---------- */
.nv { font-family:var(--f-ui); font-size:var(--fs-base); line-height:1.55; color:var(--c-text); letter-spacing:0; }
.nv *, .nv *::before, .nv *::after { box-sizing:border-box; }
.nv-cabeca { display:flex; align-items:flex-end; gap:var(--esp-3); flex-wrap:wrap; margin:0 0 var(--esp-4); }
.nv-h1 { font-size:var(--fs-xl); line-height:1.25; font-weight:700; letter-spacing:-0.35px; color:var(--c-text); margin:0; }
.nv-sub { font-size:var(--fs-base); color:var(--c-text-2); margin:3px 0 0; }
.nv [hidden], .tab-link[hidden] { display:none !important; }
.nv-oculto { position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.nv :focus-visible { outline:2px solid var(--c-accent); outline-offset:2px; border-radius:var(--r-sm); }

/* ---------- botões ---------- */
.nv-btn { display:inline-flex; align-items:center; justify-content:center; gap:var(--esp-2); height:var(--h-btn); padding:0 12px;
  border-radius:var(--r-sm); border:1px solid var(--c-border-2); background:transparent; color:var(--c-text);
  font-family:var(--f-ui); font-size:calc(13px * var(--k-fs)); font-weight:600; white-space:nowrap; cursor:pointer;
  transition:background .14s ease-out, border-color .14s ease-out, color .14s ease-out; }
.nv-btn:hover { background:var(--c-hover); }
.nv-btn.primario { background:var(--c-prim); color:var(--c-prim-text); border-color:transparent; }
.nv-btn.primario:hover { filter:brightness(1.06); }
.nv-btn.fantasma { border-color:transparent; color:var(--c-text-2); }
.nv-btn.fantasma:hover { color:var(--c-text); }
.nv-btn.perigo { color:var(--c-bad); }
.nv-btn.perigo:hover { background:var(--c-bad-soft); border-color:var(--c-bad); }
.nv-btn.pequeno { height:var(--h-btn-sm); padding:0 8px; font-size:calc(12.5px * var(--k-fs)); }
.nv-btn[disabled] { opacity:.5; pointer-events:none; }
.nv-acoes { display:flex; gap:var(--esp-2); flex-wrap:wrap; align-items:center; }

/* ---------- cartões ---------- */
.nv-cartao { position:relative; display:grid; gap:var(--esp-3); padding:var(--esp-5) var(--esp-5) var(--esp-4);
  background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--r-lg); min-width:0; }
[data-modo="claro"] .nv-cartao { box-shadow:0 1px 2px rgba(20,30,45,.04); }
.nv-cartao-hd { display:flex; align-items:flex-start; gap:var(--esp-3); }
.nv-cartao-hd > div { flex:1; min-width:0; }
.nv-cartao-hd h2 { margin:0; font-size:var(--fs-lg); line-height:1.4; font-weight:600; color:var(--c-text); }
.nv-cartao-hd p { margin:2px 0 0; font-size:calc(12.8px * var(--k-fs)); line-height:1.5; color:var(--c-text-2); max-width:68ch; }
.nv-cartao-hd em, .nv-campo em { font-style:normal; font-weight:500; font-size:var(--fs-sm); color:var(--c-text-3); margin-left:4px; }

/* "Salvando… / Salvo / Não salvou" no canto do cartão */
.nv-salvo { display:inline-flex; align-items:center; gap:7px; height:24px; padding:0 9px; border-radius:999px; flex:none;
  font-size:calc(11.6px * var(--k-fs)); font-weight:600; color:var(--c-text-3); background:var(--c-hover); opacity:0; transition:opacity .2s ease; }
.nv-salvo::before { content:''; width:7px; height:7px; border-radius:50%; background:currentColor; }
.nv-salvo[data-estado] { opacity:1; }
.nv-salvo[data-estado="salvando"] { color:var(--c-warn); background:var(--c-warn-soft); }
.nv-salvo[data-estado="salvo"] { color:var(--c-ok); background:var(--c-ok-soft); }
.nv-salvo[data-estado="erro"] { color:var(--c-bad); background:var(--c-bad-soft); }
.nv-salvo[data-estado="aviso"] { color:var(--c-warn); background:var(--c-warn-soft); }
.nv-salvo button { all:unset; cursor:pointer; text-decoration:underline; text-underline-offset:3px; margin-left:2px; }

/* ---------- campos ---------- */
.nv-campos { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:var(--esp-3); }
.nv-campo { display:grid; gap:6px; min-width:0; }
.nv-campo.largo { grid-column:1 / -1; }
.nv-campo.curto { max-width:120px; }
.nv-campo > span { font-size:var(--fs-sm); line-height:18px; font-weight:500; color:var(--c-text-2); }
.nv-campo input, .nv-campo select, .nv-campo textarea {
  width:100%; min-height:var(--h-campo); padding:6px 10px; border-radius:var(--r-md);
  background:var(--c-bg); border:1px solid var(--c-border-2); color:var(--c-text);
  font-family:var(--f-ui); font-size:calc(14.5px * var(--k-fs)); line-height:1.4; transition:border-color .14s ease-out, box-shadow .14s ease-out; }
.nv-campo textarea { min-height:84px; resize:vertical; line-height:1.55; padding:8px 10px; }
.nv-campo select { appearance:none; padding-right:28px;
  background-image:linear-gradient(45deg, transparent 50%, var(--c-text-3) 50%), linear-gradient(135deg, var(--c-text-3) 50%, transparent 50%);
  background-position:calc(100% - 15px) 52%, calc(100% - 10px) 52%; background-size:5px 5px, 5px 5px; background-repeat:no-repeat; }
.nv-campo input::placeholder, .nv-campo textarea::placeholder { color:var(--c-text-3); opacity:1; }
.nv-campo input:focus, .nv-campo select:focus, .nv-campo textarea:focus { outline:none; border-color:var(--c-accent); box-shadow:0 0 0 1px var(--c-accent); }
.nv-campo.com-erro input, .nv-campo.com-erro select { border-color:var(--c-bad); box-shadow:0 0 0 1px var(--c-bad); }
.nv-dica:empty { display:none; }
.nv-dica { font-size:var(--fs-sm); color:var(--c-text-2); }

/* ============================================================
   CONFIGURAÇÕES (página com menu)
   ============================================================ */
#app-wrap:has(#view-configuracoes.active) #periodo-bar { display:none; }
.cfg-grade { display:grid; grid-template-columns:212px minmax(0, 1fr); gap:22px; align-items:start; }
.cfg-lado { position:sticky; top:calc(var(--topbar-h) + var(--menu-topo-h, 0px) + 28px); display:grid; gap:18px; align-content:start; }
.cfg-cabeca .nv-sub { font-size:var(--fs-sm); color:var(--c-text-3); }
.cfg-menu { display:grid; gap:4px; }
.cfg-menu button { display:flex; align-items:center; gap:11px; height:38px; padding:0 12px; border-radius:10px; border:0; background:transparent;
  color:var(--c-text-2); font-family:var(--f-ui); font-size:calc(13.6px * var(--k-fs)); text-align:left; cursor:pointer;
  transition:background .14s ease-out, color .14s ease-out; }
.cfg-menu button svg { flex:none; }
.cfg-menu button:hover { background:var(--c-hover); color:var(--c-text); }
.cfg-menu button[aria-current="true"] { background:var(--c-hover); color:var(--c-text); font-weight:600; }
.cfg-menu button[aria-current="true"] svg { color:var(--c-accent-text); }
.cfg-secoes { min-width:0; }   /* sem limite de largura, como no app de estudos (07/10) */
.cfg-sec { display:grid; gap:var(--esp-4); min-width:0; }
.cfg-sec[hidden] { display:none; }
.cfg-logo { display:flex; align-items:center; gap:var(--esp-4); flex-wrap:wrap; }
.cfg-logo-prev { width:76px; height:76px; border-radius:var(--r); background:#FFFFFF; border:1px solid var(--c-border);
  display:grid; place-items:center; overflow:hidden; flex:none; }
.cfg-logo-prev img { max-width:100%; max-height:100%; object-fit:contain; }
.cfg-logo-prev span { font-size:11px; color:#5E697D; }
.cfg-logo-acoes { display:flex; gap:var(--esp-2); flex-wrap:wrap; }
/* A sua assinatura (Configurações › Perfil, entrega 3 de Propostas): tinta escura no fundo branco, como sai no contrato
   (o branco atrás da assinatura é de propósito, como o do logo e o do QR Code) */
/* a sua assinatura (entrega 3): o "papel" é branco em qualquer tema (a tinta é escura e a imagem vai para o PDF),
   a mesma exceção do branco atrás do QR Code; a linha e o texto de ajuda saem da tinta sobre esse papel */
.cfg-ass { display:grid; gap:var(--esp-3); justify-items:start; --ass-papel:#FFFFFF; --ass-tinta:rgba(0, 0, 0, .58); --ass-linha:rgba(0, 0, 0, .2); }
.cfg-ass-prev { width:min(320px, 100%); height:110px; border-radius:var(--r); background:var(--ass-papel); border:1px solid var(--c-border); display:grid; place-items:center; padding:8px; }
.cfg-ass-prev img { width:100%; height:94px; object-fit:contain; display:block; }
.cfg-ass-pad { position:relative; width:min(480px, 100%); height:170px; border-radius:var(--r); background:var(--ass-papel); border:1.5px dashed var(--c-border-2, var(--c-border)); overflow:hidden; }
.cfg-ass-pad canvas { position:absolute; inset:0; width:100%; height:100%; touch-action:none; cursor:crosshair; }
.cfg-ass-linha { position:absolute; left:22px; right:22px; bottom:40px; border-bottom:1.5px solid var(--ass-linha); pointer-events:none; }
.cfg-ass-ph { position:absolute; inset:0; display:grid; place-items:center; font-size:13px; color:var(--ass-tinta); pointer-events:none; }
.cfg-ass-ph.escondido { display:none; }
.cfg-ass-nota { margin:0; font-size:calc(12.8px * var(--k-fs)); color:var(--c-text-2); max-width:68ch; }
.cfg-logo-acoes label.nv-btn { cursor:pointer; }
.cfg-conta { display:flex; align-items:center; gap:var(--esp-3); flex-wrap:wrap; color:var(--c-text-2); }
.cfg-conta-txt { flex:1; min-width:180px; overflow-wrap:anywhere; }
.cfg-conta b { color:var(--c-text); font-weight:600; }
/* 19/10: Excluir minha conta (fora da linha da conta, para não ser tocado sem querer) */
.cfg-excluir { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:12px 0 0; padding-top:12px; border-top:1px solid var(--c-border); font-size:12.5px; color:var(--c-text-3); }
.cfg-excluir[hidden] { display:none; }
.cfg-excluir .nv-btn { color:var(--c-bad); }
#cfg-excluir-ov .cfg-exc-lista { margin:0 0 10px; padding-left:18px; color:var(--c-text-2); font-size:13px; }
#cfg-excluir-ov .cfg-exc-aviso { color:var(--c-bad); font-weight:600; }

@media (max-width:900px) {
  .cfg-grade { grid-template-columns:minmax(0, 1fr); gap:14px; }
  .cfg-lado { display:contents; }
  /* como o .ajnav do app de estudos até 900px: uma fileira de botões com borda, que rola para o lado */
  .cfg-menu { display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; }
  .cfg-menu::-webkit-scrollbar { display:none; }
  .cfg-menu button { flex:none; height:34px; border:1px solid var(--c-border); }
}
@media (max-width:720px) {
  .nv-cartao { padding:var(--esp-4) var(--esp-4) var(--esp-4); }
  .nv-campo input, .nv-campo select { min-height:42px; }
  .nv-btn { height:38px; }
}

/* ============================================================
   APARÊNCIA (Configurações › Aparência)
   ============================================================ */
.ap-grade { display:grid; gap:var(--esp-2); }
.ap-estilos { grid-template-columns:repeat(auto-fill, minmax(156px, 1fr)); }
.ap-tres { grid-template-columns:repeat(3, minmax(0, 1fr)); }
.ap-dois { grid-template-columns:repeat(2, minmax(0, 1fr)); max-width:520px; }
.ap-op { position:relative; display:grid; gap:6px; align-content:start; text-align:left; padding:10px; border-radius:var(--r);
  border:1px solid var(--c-border); background:var(--c-bg); color:var(--c-text); font-family:var(--f-ui); cursor:pointer;
  transition:border-color .14s ease-out, box-shadow .14s ease-out, transform .14s ease-out; }
.ap-op:hover { border-color:var(--c-border-2); }
.ap-op[aria-checked="true"] { border-color:var(--c-accent); box-shadow:0 0 0 1px var(--c-accent); }
.ap-ok { position:absolute; top:8px; right:8px; width:18px; height:18px; border-radius:50%; display:none; place-items:center;
  background:var(--c-prim); color:var(--c-prim-text); }
.ap-op[aria-checked="true"] .ap-ok { display:grid; }
.ap-op b { font-size:calc(13.2px * var(--k-fs)); font-weight:600; line-height:1.3; }
.ap-op small { font-size:var(--fs-sm); line-height:1.45; color:var(--c-text-2); }
.ap-op .ap-ic { width:28px; height:28px; border-radius:8px; display:grid; place-items:center; background:var(--c-hover); color:var(--c-text-2); }
.ap-op[aria-checked="true"] .ap-ic { background:var(--c-accent-soft); color:var(--c-accent-text); }

/* miniatura de cada estilo (usa as cores DO estilo, aplicadas no próprio botão) */
.ap-mini { height:78px; border-radius:calc(var(--r) - 3px); overflow:hidden; display:grid; grid-template-columns:30% 1fr;
  background:var(--c-bg); border:1px solid var(--c-border); }
.ap-mini .s { background:var(--c-side); border-right:1px solid var(--c-border); padding:7px 6px; display:grid; gap:5px; align-content:start; }
.ap-mini .s i { display:block; height:5px; border-radius:3px; background:var(--c-border-2); }
.ap-mini .s i:first-child { background:var(--c-nav-on); height:7px; }
.ap-mini .m { padding:7px; display:grid; gap:5px; align-content:start; }
.ap-mini .c { background:var(--c-surface); border:1px solid var(--c-border); border-radius:4px; padding:5px; display:grid; gap:4px; }
.ap-mini .c i { display:block; height:4px; border-radius:2px; background:var(--c-text-3); opacity:.6; }
.ap-mini .c i:first-child { width:60%; background:var(--c-text); opacity:1; }
.ap-mini .b { width:42%; height:9px; border-radius:3px; background:var(--c-prim); }
.ap-nome { display:flex; align-items:center; gap:7px; }
.ap-nome .ap-ic { width:auto; height:auto; background:none; color:var(--c-text-2); }
.ap-op[aria-checked="true"] .ap-nome .ap-ic { background:none; color:var(--c-accent-text); }
/* Automático: metade clara, metade escura (como no app de estudos) */
.ap-nome .rp-mono { flex:none; }

/* cores de destaque */

/* tamanho do texto, densidade e cantos */
.ap-menu { position:relative; width:52px; height:34px; margin:4px 0 2px; border:2px solid var(--c-text-3); border-radius:6px; background:var(--c-hover); overflow:hidden; }
.ap-menu i { position:absolute; background:var(--c-text-3); opacity:.55; }
.ap-menu-lado i:first-child { left:0; top:0; bottom:0; width:14px; }
.ap-menu-lado i:last-child { left:20px; right:6px; top:6px; height:4px; border-radius:2px; }
.ap-menu-topo i:first-child { left:0; right:0; top:0; height:8px; }
.ap-menu-topo i:last-child { left:6px; right:14px; top:14px; height:4px; border-radius:2px; }
.ap-rodape { display:flex; align-items:center; justify-content:space-between; gap:var(--esp-3); flex-wrap:wrap;
  font-size:var(--fs-sm); color:var(--c-text-2); padding:2px 2px 0; }

@media (max-width:720px) {
  .ap-estilos { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  /* modos: as três miniaturas lado a lado; a frase de cada uma some para caber */
  .ap-tres { gap:6px; }
  .ap-tres .ap-op { padding:7px; }
  .ap-tres .ap-mini { height:58px; }
  .ap-tres .ap-op small { display:none; }
}
@media (prefers-reduced-motion:reduce) { .ap-op, .nv-btn { transition:none; } }

/* ============================================================
   CASCA DO PAINEL (Etapa 3a): menu lateral que recolhe + barra do topo.
   O menu é o #tabnav (os itens continuam sendo .tab-link, que é por onde
   passa toda troca de tela). Recolhido (html[data-lado="recolhido"], ou sozinho
   em telas até 1100px) vira uma faixa de ícones. Aparência › Menu "No topo"
   (html[data-menu="topo"]) põe o menu numa faixa no alto. No celular o menu
   some e a navegação é a barra de baixo (#bnav).
   ============================================================ */
:root { --lado-w:clamp(212px, 15.4vw, 244px); --lado-rail:62px; }
.nv-casca { display:grid; grid-template-columns:var(--lado-w) minmax(0, 1fr); min-height:100vh; }
.nv-principal { min-width:0; display:flex; flex-direction:column; }
.nv-principal > .app { width:100%; }   /* o .app antigo tinha margin:auto, que encolhia a área dentro da coluna */
.nv-ic { display:block; flex:none; }
.nv-kbd { display:inline-flex; align-items:center; height:18px; padding:0 5px; border-radius:5px; border:1px solid var(--c-border);
  font-family:var(--f-ui); font-size:11px; font-weight:600; color:var(--c-text-3); line-height:1; }

/* ---------- marca (logo: o fone de DJ + nome) ---------- */
.nv-marca { display:flex; align-items:center; gap:11px; min-width:0; padding:0; border:0; background:none; cursor:pointer; color:var(--c-text); }
.nv-marca-mono { display:grid; place-items:center; flex:none; }
.nv-marca-mono svg { display:block; }
.nv-marca-nome { font-family:var(--f-ui); font-size:calc(17px * var(--k-fs)); font-weight:700; letter-spacing:-0.45px; white-space:nowrap; line-height:1; }

/* ---------- menu lateral ---------- */
.nv-lado { position:sticky; top:0; height:100vh; height:100dvh; display:flex; flex-direction:column; z-index:300;
  background:var(--c-side); border-right:1px solid var(--c-border); font-family:var(--f-ui); overflow:hidden; }
.nv-lado-marca { height:61px; flex:none; display:flex; align-items:center; padding:0 12px 0 18px; }
.nv-lado-nav { flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; scrollbar-width:thin; display:grid; align-content:start; gap:3px; padding:6px 10px 10px; }
.nv-lado .tab-link { display:flex; align-items:center; gap:13px; height:var(--h-nav); padding:0 11px; border-radius:var(--r-nav);
  color:var(--c-text-2); font-size:var(--fs-md); font-weight:400; line-height:1.3; white-space:nowrap; cursor:pointer; text-decoration:none;
  border:0; transition:background .14s ease-out, color .14s ease-out; }
.nv-lado .tab-link:hover { background:var(--c-hover); color:var(--c-text); }
.nv-lado .tab-link.active { background:var(--c-nav-on); color:var(--c-nav-on-text); font-weight:600; }
/* line-height e folga embaixo: sem isso o "g" de Agenda e o "ç" de Orçamentos saíam cortados */
.nv-lado .tab-link .tab-lbl { min-width:0; overflow:hidden; text-overflow:ellipsis; line-height:1.35; padding-bottom:1px; }
.nv-conta { margin-left:auto; font-size:var(--fs-sm); font-weight:600; color:var(--c-text-3); font-variant-numeric:tabular-nums; }
.nv-conta:empty { display:none; }
.nv-lado .tab-link.active .nv-conta { color:inherit; opacity:.75; }
.nv-lado-grupo { margin:16px 0 4px; padding-left:12px; font-size:11px; line-height:16px; letter-spacing:1.6px; text-transform:uppercase; color:var(--c-text-3); font-weight:500; }
.nv-lado-pe { flex:none; display:grid; gap:4px; padding:12px 12px 16px; border-top:1px solid var(--c-border); }
.nv-lado-estado { display:flex; align-items:center; gap:6px; padding:0 0 0 10px; min-height:30px; }
.nv-lado .sync-pill { flex:1; min-width:0; padding:0; border:0; background:none; gap:9px; font-size:var(--fs-sm); font-weight:500; color:var(--c-text-2); }
.nv-lado .sync-pill .sync-label { overflow:hidden; text-overflow:ellipsis; }
.nv-lado .sync-dot { width:8px; height:8px; }
.nv-avatar { width:28px; height:28px; border-radius:50%; flex:none; display:grid; place-items:center; background:var(--c-hover);
  border:1px solid var(--c-border); color:var(--c-text-2); font-size:11px; font-weight:700; }

/* botão só com ícone (topo e pé do menu) */
.nv-icone { width:32px; height:32px; flex:none; display:grid; place-items:center; border-radius:var(--r-sm); border:1px solid transparent;
  background:none; color:var(--c-text-2); cursor:pointer; transition:background .14s ease-out, color .14s ease-out; }
.nv-icone:hover { background:var(--c-hover); color:var(--c-text); }
.nv-icone.tb-icon-btn { width:30px; height:30px; border:0; background:none; }
.nv-icone[aria-current="page"] { background:var(--c-hover); color:var(--c-accent-text); }

/* ---------- menu recolhido (faixa de ícones) ---------- */
html[data-lado="recolhido"] .nv-casca { grid-template-columns:var(--lado-rail) minmax(0, 1fr); }
html[data-lado="recolhido"] .nv-lado-marca { justify-content:center; padding:0; }
html[data-lado="recolhido"] .nv-lado .nv-marca-nome,
html[data-lado="recolhido"] .nv-lado .tab-lbl,
html[data-lado="recolhido"] .nv-lado .nv-conta,
html[data-lado="recolhido"] .nv-lado .sync-label { display:none; }
html[data-lado="recolhido"] .nv-lado-nav { padding:6px 0 10px; justify-items:center; }
html[data-lado="recolhido"] .nv-lado .tab-link { width:40px; padding:0; justify-content:center; }
html[data-lado="recolhido"] .nv-lado-grupo { width:28px; height:1px; margin:10px auto; padding:0; font-size:0; background:var(--c-border); }
html[data-lado="recolhido"] .nv-lado-pe { justify-items:center; padding:8px 0 12px; }
html[data-lado="recolhido"] .nv-lado-estado { flex-direction:column; padding:0; gap:4px; }
html[data-lado="recolhido"] .nv-lado .sync-pill { flex:none; }

/* ---------- barra do topo ---------- */
.nv-topo { position:sticky; top:var(--menu-topo-h, 0px); z-index:200; height:var(--topbar-h); display:flex; align-items:center; gap:9px;
  padding:0 23px 0 12px; font-family:var(--f-ui); background:var(--c-surface); border-bottom:1px solid var(--c-border); }
.nv-topo-marca { display:none; }
/* botão de recolher o menu: sempre no mesmo lugar, no começo da barra do topo */
.nv-topo .nv-recolher { color:var(--c-text-3); }
.nv-topo .nv-recolher:hover { color:var(--c-text); }
html[data-lado="recolhido"] .nv-topo .nv-recolher { color:var(--c-text-2); }
.nv-topo-titulo { min-width:120px; font-size:calc(13px * var(--k-fs)); font-weight:400; color:var(--c-text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nv-busca-campo { margin:0 auto; width:min(420px, 38vw); height:32px; display:flex; align-items:center; gap:8px; padding:0 7px 0 10px;
  border-radius:var(--r-md); border:1px solid var(--c-border); background:var(--c-surface); color:var(--c-text-3); cursor:text;
  font-family:var(--f-ui); font-size:calc(13px * var(--k-fs)); transition:border-color .14s ease-out; }
.nv-busca-campo:hover { border-color:var(--c-border-2); }
.nv-busca-txt { flex:1; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nv-novo { position:relative; flex:none; }
.nv-novo .nv-btn { gap:6px; padding:0 10px 0 11px; }
.nv-menu { position:absolute; top:38px; right:0; z-index:450; width:244px; padding:6px; display:grid; gap:1px;
  background:var(--c-raised); border:1px solid var(--c-border-2); border-radius:var(--r); box-shadow:var(--c-sombra); }
.nv-menu[hidden] { display:none; }
.nv-menu button { display:flex; align-items:center; gap:10px; height:34px; padding:0 10px; border:0; border-radius:7px; background:none;
  color:var(--c-text); font-family:var(--f-ui); font-size:calc(13px * var(--k-fs)); text-align:left; cursor:pointer; }
.nv-menu button .nv-ic { color:var(--c-text-2); }
.nv-menu button:hover, .nv-menu button:focus-visible { background:var(--c-hover); outline:none; }
.nv-menu button span { flex:1; }
.nv-menu hr { border:0; border-top:1px solid var(--c-border); margin:4px; }
.nv-topo .lembretes-bell { width:32px; height:32px; margin:0; border-radius:var(--r-sm); background:none; border:1px solid var(--c-border); color:var(--c-text-2); }
.nv-topo .lembretes-bell:hover { background:var(--c-hover); color:var(--c-text); border-color:var(--c-border-2); }
/* Configurações: um botão só, como o do app de estudos (.ajtopo) */
.nv-ajtopo { display:inline-flex; align-items:center; gap:7px; height:30px; padding:0 11px; margin-left:4px; border-radius:9px; flex:none;
  border:1px solid var(--c-border); background:none; color:var(--c-text-2); font-family:var(--f-ui); font-size:calc(12.9px * var(--k-fs)); font-weight:500;
  white-space:nowrap; cursor:pointer; transition:background .14s ease-out, color .14s ease-out; }
.nv-ajtopo:hover { background:var(--c-hover); color:var(--c-text); }
.nv-ajtopo.active { background:var(--c-accent-soft); color:var(--c-accent-text); border-color:transparent; }
@media (max-width:1100px) { .nv-ajtopo span { display:none; } .nv-ajtopo { padding:0 8px; } }

/* ---------- Aparência › Menu "No topo" (computador) ---------- */
@media (min-width:721px) {
  html[data-menu="topo"] { --menu-topo-h:52px; }
  html[data-menu="topo"] .nv-casca { display:block; }
  html[data-menu="topo"] .nv-lado { position:sticky; top:0; height:52px; flex-direction:row; align-items:center; gap:14px; padding:0 18px 0 18px;
    border-right:0; border-bottom:1px solid var(--c-border); }
  html[data-menu="topo"] .nv-lado-marca { height:auto; padding:0 6px 0 0; }
  html[data-menu="topo"] .nv-topo .nv-recolher, html[data-menu="topo"] .nv-lado-grupo { display:none; }
  html[data-menu="topo"] .nv-topo { padding-left:24px; }
  html[data-menu="topo"] .nv-lado-nav { display:flex; flex:1; align-items:center; gap:2px; padding:0; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; }
  html[data-menu="topo"] .nv-lado .tab-link { height:34px; padding:0 11px; gap:8px; font-size:calc(13.3px * var(--k-fs)); }
  html[data-menu="topo"] .nv-lado-pe { display:flex; align-items:center; gap:6px; padding:0; border:0; }
  html[data-menu="topo"] .nv-lado-estado { padding:0; }
  html[data-menu="topo"] .nv-lado .sync-pill { flex:none; }
  html[data-menu="topo"] .nv-lado-marca .nv-marca-nome { display:inline; }
  /* com o menu no topo, "recolher" não se aplica */
  html[data-menu="topo"][data-lado="recolhido"] .nv-lado .tab-lbl { display:inline; }
  html[data-menu="topo"][data-lado="recolhido"] .nv-lado .nv-conta { display:inline; }
  html[data-menu="topo"][data-lado="recolhido"] .nv-lado .sync-label { display:inline; }
  html[data-menu="topo"][data-lado="recolhido"] .nv-lado-marca { justify-content:flex-start; padding:0 6px 0 0; }
  html[data-menu="topo"][data-lado="recolhido"] .nv-lado-nav { padding:0; justify-items:initial; }
  html[data-menu="topo"][data-lado="recolhido"] .nv-lado .tab-link { width:auto; padding:0 11px; }
}

/* ---------- celular: só a marca, a busca e o sino no topo ---------- */
@media (max-width:720px) {
  .nv-casca { display:block; }
  .nv-lado { display:none !important; }
  .nv-topo { top:0; padding:0 6px 0 14px; gap:2px; background:var(--c-side); -webkit-backdrop-filter:none; backdrop-filter:none; }
  .nv-topo-marca { display:flex; margin-right:auto; }
  .nv-topo-marca .nv-marca-nome { font-size:calc(16.5px * var(--k-fs)); }
  .nv-topo-titulo, .nv-novo, .nv-topo .nv-recolher { display:none; }
  /* engrenagem no topo do celular, como no app de estudos */
  .nv-topo .nv-ajtopo { width:40px; height:40px; padding:0; margin:0; justify-content:center; border:0; background:none; }
  .nv-topo .nv-ajtopo.active { background:none; }
  .nv-busca-campo { margin:0; width:40px; height:40px; padding:0; justify-content:center; border:0; background:none; color:var(--c-text-2); }
  .nv-busca-txt, .nv-busca-campo .nv-kbd { display:none; }
  .nv-topo .lembretes-bell { width:40px; height:40px; border:0; }
  /* 19/10: o número do sino dentro do botão (antes saía 4px acima dele e caía no borrado do iPhone) */
  .nv-topo .lembretes-bell-badge { top:3px; right:1px; }
}

/* ============================================================
   INÍCIO (Etapa 3a)
   ============================================================ */
.nv-cabeca-acoes { margin-left:auto; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.nv-cnt { font-size:var(--fs-sm); font-weight:500; color:var(--c-text-3); margin-left:4px; }
.nv-link { margin-left:auto; padding:0; border:0; background:none; color:var(--c-accent-text); font-family:var(--f-ui); font-size:var(--fs-base);
  font-weight:500; cursor:pointer; white-space:nowrap; }
.nv-link:hover { text-decoration:underline; text-underline-offset:3px; }
.nv-cartao-hd .nv-link { align-self:center; }
.nv-numeros { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:var(--esp-3); }
.nv-numero { padding:var(--esp-3) 15px; background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--r); min-width:0; }
[data-modo="claro"] .nv-numero { box-shadow:0 1px 2px rgba(20,30,45,.04); }
.nv-numero .l { display:flex; align-items:center; gap:7px; font-size:var(--fs-sm); font-weight:500; color:var(--c-text-2); }
.nv-numero .l i { width:8px; height:8px; border-radius:2px; background:var(--tc); flex:none; }
.nv-numero .v { margin-top:6px; font-size:calc(20px * var(--k-fs)); font-weight:700; letter-spacing:-0.4px; line-height:1.2; color:var(--c-text);
  font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nv-numero .s { margin-top:2px; font-size:12px; color:var(--c-text-3); }
.nv-numero .barra { height:5px; margin-top:9px; border-radius:5px; background:var(--c-hover); overflow:hidden; }
.nv-numero .barra i { display:block; height:100%; border-radius:5px; background:var(--tc); }
.nv-colunas { display:grid; grid-template-columns:minmax(0, 1.55fr) minmax(0, 1fr); gap:var(--esp-3); margin:var(--esp-3) 0; align-items:start; }
.nv-cartao-lista, .nv-cartao-grafico { padding-bottom:var(--esp-2); }
.nv-lista { display:grid; margin:0 calc(var(--esp-5) * -1); }
.nv-ev { display:grid; grid-template-columns:42px minmax(0, 1fr) auto auto; gap:13px; align-items:center; padding:9px var(--esp-5);
  border-top:1px solid var(--c-border); cursor:pointer; text-align:left; background:none; border-left:0; border-right:0; border-bottom:0;
  color:inherit; font-family:var(--f-ui); width:100%; }
.nv-ev:first-child { border-top:0; }
.nv-ev:hover { background:var(--c-hover); }
.nv-data { width:42px; padding:3px 0 4px; text-align:center; border:1px solid var(--c-border); border-radius:var(--r-sm); background:var(--c-raised); }
.nv-data .w { display:block; font-size:10px; line-height:1.3; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--c-text-3); }
.nv-data .d { display:block; font-size:16.5px; line-height:1.1; font-weight:700; letter-spacing:-0.3px; color:var(--c-text); font-variant-numeric:tabular-nums; }
.nv-data.hoje { border-color:var(--c-accent); background:var(--c-accent-soft); }
.nv-data.hoje .w { color:var(--c-accent-text); }
.nv-ev .t { display:block; font-size:calc(13.5px * var(--k-fs)); font-weight:600; color:var(--c-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nv-ev .mt { display:block; font-size:12px; color:var(--c-text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nv-ev .val { min-width:86px; text-align:right; font-weight:600; font-variant-numeric:tabular-nums; color:var(--c-text); }
.nv-pill { display:inline-flex; align-items:center; gap:5px; height:19px; padding:0 7px; border-radius:999px; font-size:12px; font-weight:600;
  white-space:nowrap; color:var(--pc); background:color-mix(in srgb, var(--pc) 14%, transparent); }
.nv-pill::before { content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }
.nv-vazio { display:grid; justify-items:center; gap:8px; margin:4px var(--esp-5) var(--esp-3); padding:var(--esp-5) var(--esp-4); text-align:center;
  border:1px dashed var(--c-border-2); border-radius:var(--r); color:var(--c-text-2); }
.nv-barras { display:grid; gap:11px; padding:2px 0 var(--esp-2); }
.nv-barra { display:grid; grid-template-columns:minmax(110px, 150px) minmax(0, 1fr) 30px; gap:10px; align-items:center; font-size:var(--fs-base);
  color:var(--c-text); padding:0; border:0; background:none; font-family:var(--f-ui); text-align:left; cursor:pointer; border-radius:6px; }
.nv-barra:hover span:first-child { text-decoration:underline; text-underline-offset:3px; }
.nv-barra .tr { height:8px; border-radius:8px; background:var(--c-hover); overflow:hidden; }
.nv-barra .tr i { display:block; height:100%; border-radius:8px; background:var(--pc); }
.nv-barra .n { text-align:right; font-variant-numeric:tabular-nums; color:var(--c-text-2); }
.nv-legenda { display:flex; gap:12px; margin-left:auto; align-self:center; font-size:12px; color:var(--c-text-2); }
.nv-legenda span { display:flex; align-items:center; gap:6px; }
.nv-legenda i { width:8px; height:8px; border-radius:2px; }
.nv-seg.toggle-group { display:inline-flex; padding:2px; gap:2px; border:0; border-radius:9px; background:var(--c-hover); align-self:center; flex:none; }
.nv-seg .toggle-btn { height:25px; padding:0 10px; border-radius:7px; font-family:var(--f-ui); font-size:calc(12.5px * var(--k-fs)); font-weight:500; color:var(--c-text-2); box-shadow:none; }
.nv-seg .toggle-btn.active { background:var(--c-surface); color:var(--c-text); font-weight:600; box-shadow:0 1px 2px rgba(0,0,0,.14); }
.nv-grafico.chart-box { height:250px; }

@media (max-width:1100px) {
  .nv-colunas { grid-template-columns:minmax(0, 1fr); }
}
@media (max-width:720px) {
  .nv-numeros { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
  .nv-numero { padding:11px 12px; }
  .nv-numero .v { font-size:calc(17px * var(--k-fs)); }
  .nv-ev { grid-template-columns:42px minmax(0, 1fr) auto; padding:10px var(--esp-4); gap:11px; }
  .nv-ev .stc { display:none; }
  .nv-ev .val { min-width:0; }
  .nv-lista { margin:0 calc(var(--esp-4) * -1); }
  .nv-cabeca-acoes { margin-left:0; width:100%; }
  .nv-cartao-grafico .nv-cartao-hd { flex-wrap:wrap; row-gap:8px; }
  /* o título ocupa a linha toda; embaixo, a legenda à esquerda e Barras/Linha/Área à direita (antes a
     legenda ficava por baixo dos botões) */
  .nv-cartao-grafico .nv-cartao-hd > div:first-child { flex:1 1 100%; }
  .nv-legenda { margin-left:0; margin-right:auto; flex:none; }
  .nv-grafico.chart-box { height:220px; }
}

/* ============================================================
   BUSCA GERAL (⌘K / Ctrl+K, ou a lupa do topo)
   ============================================================ */
.nv-busca-ov { position:fixed; inset:0; z-index:9500; display:flex; justify-content:center; align-items:flex-start; padding:10vh 16px 16px;
  background:var(--c-overlay); font-family:var(--f-ui); }
.nv-busca-ov[hidden] { display:none; }
.nv-busca { width:min(640px, 100%); max-height:72vh; display:flex; flex-direction:column; overflow:hidden; color:var(--c-text);
  background:var(--c-raised); border:1px solid var(--c-border-2); border-radius:14px; box-shadow:var(--c-sombra); }
.nv-busca-in { display:flex; align-items:center; gap:10px; height:52px; padding:0 12px 0 16px; border-bottom:1px solid var(--c-border); flex:none; color:var(--c-text-2); }
.nv-busca-in input { flex:1; min-width:0; height:100%; border:0; outline:none; background:none; color:var(--c-text); font-family:var(--f-ui); font-size:15px; }
.nv-busca-in input::placeholder { color:var(--c-text-3); }
.nv-busca-in input::-webkit-search-cancel-button { -webkit-appearance:none; display:none; }
.nv-busca-in .so-cel { display:none; }
.nv-busca-in button { border:0; background:none; cursor:pointer; padding:0; }
.nv-busca-res { flex:1; min-height:0; overflow-y:auto; padding:6px 8px 8px; overscroll-behavior:contain; }
.nv-busca-gl { padding:10px 10px 5px; font-size:11px; font-weight:600; letter-spacing:1.4px; text-transform:uppercase; color:var(--c-text-3); }
.nv-busca-gl b { font-weight:600; letter-spacing:0; text-transform:none; margin-left:4px; }
.nv-busca-it { width:100%; display:flex; align-items:center; gap:12px; min-height:42px; padding:6px 10px; border:0; border-radius:8px; background:none;
  color:var(--c-text); font-family:var(--f-ui); font-size:calc(13px * var(--k-fs)); text-align:left; cursor:pointer; }
.nv-busca-it .nv-ic { color:var(--c-text-2); }
.nv-busca-it .tx { flex:1; min-width:0; display:grid; line-height:1.35; }
.nv-busca-it .tx b { font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nv-busca-it .tx small { font-size:12px; color:var(--c-text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nv-busca-it.on { background:var(--c-hover); }
.nv-busca-it mark { background:var(--c-accent-soft); color:var(--c-accent-text); border-radius:3px; padding:0 1px; }
.nv-busca-vazio { padding:26px 16px; text-align:center; color:var(--c-text-2); }
.nv-busca-pe { display:flex; gap:16px; padding:9px 16px; border-top:1px solid var(--c-border); font-size:12px; color:var(--c-text-3); flex:none; }
@media (max-width:720px) {
  .nv-busca-ov { padding:0; }
  .nv-busca { width:100%; height:100%; max-height:none; border:0; border-radius:0; }
  .nv-busca-in { height:calc(56px + var(--topo-seguro)); padding-top:var(--topo-seguro); }
  .nv-busca-in input { font-size:16px; }
  .nv-busca-in .so-pc { display:none; }
  .nv-busca-in .so-cel { display:inline; }
  .nv-busca-in [data-busca-fechar] { height:32px; padding:0 10px; border:0; font-size:14px; font-weight:600; color:var(--c-accent-text); }
  .nv-busca-pe { display:none; }
}

/* ============================================================
   LISTAS NO VISUAL NOVO — Agenda (Etapa 3b), Orçamentos e Contratos (3c).
   Cabeçalho, filtros de situação em botões, tabela, "⋯" e cartões do celular.
   Ficam presos às três telas (:is(#view-…), com a força de um id) porque as
   classes antigas (filter-bar, table.data, agenda-card, orc-menu…) ainda são
   usadas por outras telas até a 3d.
   */
:is(#view-eventos, #view-orcamentos) .nv-cabeca-acoes { gap:8px; }
.nv-busca-local { display:flex; align-items:center; gap:8px; height:31px; width:230px; padding:0 10px; border-radius:var(--r-md);
  border:1px solid var(--c-border-2); background:var(--c-surface); color:var(--c-text-3); }
.nv-busca-local:focus-within { border-color:var(--c-accent); box-shadow:0 0 0 1px var(--c-accent); }
.nv-busca-local input { flex:1; min-width:0; height:100%; border:0; outline:none; background:none; color:var(--c-text);
  font-family:var(--f-ui); font-size:calc(13px * var(--k-fs)); }
.nv-busca-local input::placeholder { color:var(--c-text-3); }
.nv-busca-local input::-webkit-search-cancel-button { cursor:pointer; }
/* 13/10 (print do Renato): o .nv :focus-visible (o contorno do teclado) desenhava uma 2ª borda no campo de dentro;
   quem mostra o foco é a pílula de fora (:focus-within) */
.nv-busca-local input:focus-visible { outline:none; }
.nv-periodo-slot:empty { display:none; }

/* filtros: status em botões, Kit, Exibição e Lista/Calendário */
:is(#view-eventos, #view-orcamentos) .nv-filtros { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 var(--esp-3); }
.nv-chips { display:flex; gap:6px; flex-wrap:wrap; flex:1; min-width:0; }
.nv-chip { display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 10px; border-radius:var(--r-md); border:1px solid var(--c-border);
  background:none; color:var(--c-text-2); font-family:var(--f-ui); font-size:calc(12.5px * var(--k-fs)); font-weight:500; white-space:nowrap; cursor:pointer;
  transition:background .14s ease-out, color .14s ease-out, border-color .14s ease-out; }
.nv-chip:hover { background:var(--c-hover); color:var(--c-text); }
.nv-chip b { font-weight:500; opacity:.75; font-variant-numeric:tabular-nums; }
.nv-chip[aria-pressed="true"] { background:var(--c-accent-soft); color:var(--c-accent-text); border-color:var(--c-accent); font-weight:600; }
:is(#view-eventos, #view-orcamentos) .filter-bar.nv-filtros-mais { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:0; margin:0; background:none; border:0; border-radius:0; box-shadow:none; }
:is(#view-eventos, #view-orcamentos) .nv-filtro-sel select.field { height:31px; min-width:150px; padding:0 30px 0 10px; border-radius:var(--r-md); border-color:var(--c-border-2);
  background-color:var(--c-surface); color:var(--c-text); font-size:calc(13px * var(--k-fs)); }
:is(#view-eventos, #view-orcamentos) .filter-status { font-size:var(--fs-sm); color:var(--c-text-3); }
:is(#view-eventos, #view-orcamentos) .filter-status b { color:var(--c-text-2); font-weight:600; }
:is(#view-eventos, #view-orcamentos) .btn-clear { color:var(--c-text-2); }
:is(#view-eventos, #view-orcamentos) .filtros-toggle { display:none; }
:is(#view-eventos, #view-orcamentos) .evt-view-toggle.nv-seg { display:inline-flex; padding:2px; gap:2px; border:0; border-radius:9px; background:var(--c-hover); }
:is(#view-eventos, #view-orcamentos) .evt-view-btn { display:inline-flex; align-items:center; gap:6px; height:27px; padding:0 10px; border:0; border-radius:7px; background:none;
  color:var(--c-text-2); font-family:var(--f-ui); font-size:calc(12.5px * var(--k-fs)); font-weight:500; cursor:pointer; }
:is(#view-eventos, #view-orcamentos) .evt-view-btn.active { background:var(--c-surface); color:var(--c-text); font-weight:600; box-shadow:0 1px 2px rgba(0,0,0,.14); }

/* tabela */
:is(#view-eventos, #view-orcamentos) .nv-tabela-cartao { padding:0; gap:0; overflow:hidden; }
:is(#view-eventos, #view-orcamentos) .table-scroll { border:0; border-radius:0; overflow-x:auto; }
:is(#view-eventos, #view-orcamentos) table.nv-tabela { width:100%; border-collapse:separate; border-spacing:0; font-family:var(--f-ui); font-size:var(--fs-base); }
:is(#view-eventos, #view-orcamentos) table.nv-tabela thead th { height:36px; padding:0 11px; background:var(--c-surface); border-bottom:1px solid var(--c-border); text-align:left;
  font-size:12px; font-weight:500; letter-spacing:0; text-transform:none; color:var(--c-text-3); white-space:nowrap; cursor:pointer; user-select:none; }
:is(#view-eventos, #view-orcamentos) table.nv-tabela thead th:first-child, :is(#view-eventos, #view-orcamentos) table.nv-tabela tbody td:first-child { padding-left:16px; }
:is(#view-eventos, #view-orcamentos) table.nv-tabela thead th:hover { color:var(--c-text); }
:is(#view-eventos, #view-orcamentos) table.nv-tabela thead th.num { text-align:right; }
:is(#view-eventos, #view-orcamentos) table.nv-tabela thead th .arrow { opacity:.35; margin-left:2px; font-size:11px; }
:is(#view-eventos, #view-orcamentos) table.nv-tabela thead th.sorted { color:var(--c-text); }
:is(#view-eventos, #view-orcamentos) table.nv-tabela thead th.sorted .arrow { opacity:1; color:var(--c-accent-text); }
:is(#view-eventos, #view-orcamentos) table.nv-tabela tbody td { height:52px; padding:6px 11px; border-bottom:1px solid var(--c-border); color:var(--c-text); white-space:nowrap; vertical-align:middle; }
:is(#view-eventos, #view-orcamentos) table.nv-tabela tbody tr:last-child td { border-bottom:0; }
:is(#view-eventos, #view-orcamentos) table.nv-tabela tbody tr[data-row-id] { cursor:pointer; }
:is(#view-eventos, #view-orcamentos) table.nv-tabela tbody tr[data-row-id]:hover td { background:var(--c-hover); }
:is(#view-eventos, #view-orcamentos) table.nv-tabela td.num { text-align:right; font-variant-numeric:tabular-nums; font-weight:400; }
:is(#view-eventos, #view-orcamentos) table.nv-tabela td.col-data, :is(#view-eventos, #view-orcamentos) table.nv-tabela td.col-hora { text-align:left; }
:is(#view-eventos, #view-orcamentos) table.nv-tabela td.neg { color:var(--c-text-3); }
:is(#view-eventos, #view-orcamentos) table.nv-tabela td.liq { font-weight:600; }
:is(#view-eventos, #view-orcamentos) table.nv-tabela td.col-evento { width:36%; min-width:200px; max-width:0; white-space:normal; } /* max-width:0 + largura em % = o nome comprido corta com … em vez de alargar a tabela */
:is(#view-eventos, #view-orcamentos) table.nv-tabela .t2 { display:flex; align-items:center; gap:6px; font-weight:600; min-width:0; }
:is(#view-eventos, #view-orcamentos) table.nv-tabela .evt-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
:is(#view-eventos, #view-orcamentos) table.nv-tabela .sub { margin-top:1px; font-size:12px; color:var(--c-text-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
:is(#view-eventos, #view-orcamentos) table.nv-tabela tr.passado td:not(.col-status):not(.col-acoes) { color:var(--c-text-2); }
:is(#view-eventos, #view-orcamentos) table.nv-tabela tr.inactive { opacity:.55; }
:is(#view-eventos, #view-orcamentos) table.nv-tabela tr.inactive .evt-name { text-decoration:line-through; }
:is(#view-eventos, #view-orcamentos) table.nv-tabela tr.mg td { height:36px; padding:0 11px 0 16px; background:var(--c-raised); font-size:var(--fs-base); cursor:default; }
:is(#view-eventos, #view-orcamentos) table.nv-tabela tr.mg .mn { font-weight:600; margin-right:10px; }
:is(#view-eventos, #view-orcamentos) table.nv-tabela tr.mg .mi { color:var(--c-text-3); }
:is(#view-eventos, #view-orcamentos) table.nv-tabela .table-empty { height:auto; padding:28px 16px; text-align:center; color:var(--c-text-2); white-space:normal; cursor:default; }
.nv-tag { display:inline-flex; align-items:center; height:19px; padding:0 7px; margin-right:10px; border-radius:999px; font-size:11.5px; font-weight:600;
  background:var(--c-accent-soft); color:var(--c-accent-text); }
.nv-tag-inativo { display:inline-flex; align-items:center; height:17px; padding:0 6px; margin-left:6px; border-radius:999px; font-size:10.5px; font-weight:600;
  background:var(--c-hover); color:var(--c-text-2); text-decoration:none; }
:is(#view-eventos, #view-orcamentos) .prod-chip { flex:none; }
/* status como pílula que muda (select) */
:is(#view-eventos, #view-orcamentos) .status-sel { --pc:var(--c-text-3); height:23px; padding:0 22px 0 9px; border-radius:999px; border:0; appearance:none; cursor:pointer;
  font-family:var(--f-ui); font-size:12px; font-weight:600; color:var(--pc); background-color:color-mix(in srgb, var(--pc) 14%, transparent);
  background-image:linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:calc(100% - 12px) 50%, calc(100% - 8px) 50%; background-size:4px 4px, 4px 4px; background-repeat:no-repeat; }
:is(#view-eventos, #view-orcamentos) .status-sel.b-pago { --pc:var(--c-ok); }
:is(#view-eventos, #view-orcamentos) .status-sel.b-naorealiz { --pc:var(--c-info); }
:is(#view-eventos, #view-orcamentos) .status-sel.b-confirmar { --pc:var(--c-text-3); }
:is(#view-eventos, #view-orcamentos) .status-sel.b-naopago { --pc:var(--c-warn); }
:is(#view-eventos, #view-orcamentos) .status-sel.b-cancelado { --pc:var(--c-bad); }
:is(#view-eventos, #view-orcamentos) .status-sel option { color:var(--c-text); background:var(--c-surface); }
/* "⋯" de cada linha e de cada cartão */
:is(#view-eventos, #view-orcamentos) .ac-menu > summary.orc-menu-sum { width:30px; height:30px; padding:0; display:grid; place-items:center; border-radius:var(--r-sm); border:0;
  background:none; color:var(--c-text-2); font-size:18px; line-height:1; }
:is(#view-eventos, #view-orcamentos) .ac-menu > summary.orc-menu-sum:hover, :is(#view-eventos, #view-orcamentos) .ac-menu[open] > summary.orc-menu-sum { background:var(--c-hover); color:var(--c-text); }
:is(#view-eventos, #view-orcamentos) .ac-menu .orc-menu-pop { min-width:200px; padding:6px; border-radius:var(--r); background:var(--c-raised); border:1px solid var(--c-border-2); box-shadow:var(--c-sombra); }
:is(#view-eventos, #view-orcamentos) .ac-menu .orc-menu-pop button { min-height:34px; padding:0 10px; border-radius:7px; font-family:var(--f-ui); font-size:calc(13px * var(--k-fs)); color:var(--c-text); }
:is(#view-eventos, #view-orcamentos) .ac-menu .orc-menu-pop button:hover { background:var(--c-hover); }
:is(#view-eventos, #view-orcamentos) .ac-menu .orc-menu-pop button.danger { color:var(--c-bad); }
:is(#view-eventos, #view-orcamentos) .col-acoes { width:44px; text-align:right; }
.nv-rodape-tabela { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:10px 4px 0; font-size:var(--fs-sm); color:var(--c-text-3); }
.nv-rodape-tabela b { color:var(--c-text-2); font-weight:600; font-variant-numeric:tabular-nums; }

/* calendário */
:is(#view-eventos, #view-orcamentos) .cal-wrap.nv-cartao { padding:var(--esp-4); gap:0; }
:is(#view-eventos, #view-orcamentos) .cal-toolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; padding:0; background:none; border:0; }
:is(#view-eventos, #view-orcamentos) .cal-nav { display:flex; align-items:center; gap:6px; }
:is(#view-eventos, #view-orcamentos) .cal-nav-btn { width:30px; height:30px; display:grid; place-items:center; border-radius:var(--r-sm); border:1px solid var(--c-border); background:none; color:var(--c-text-2); }
:is(#view-eventos, #view-orcamentos) .cal-nav-btn:hover { background:var(--c-hover); color:var(--c-text); }
:is(#view-eventos, #view-orcamentos) .cal-title { min-width:150px; text-align:center; font-family:var(--f-ui); font-size:var(--fs-lg); font-weight:600; color:var(--c-text); text-transform:capitalize; }
:is(#view-eventos, #view-orcamentos) .cal-legenda { display:flex; gap:12px; flex-wrap:wrap; font-size:12px; color:var(--c-text-2); }
:is(#view-eventos, #view-orcamentos) .cal-leg-item i { width:8px; height:8px; border-radius:2px; }
:is(#view-eventos, #view-orcamentos) .cal-toggle-inativos { font-size:var(--fs-sm); color:var(--c-text-2); }
:is(#view-eventos, #view-orcamentos) .cal-grid-head > div { font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--c-text-3); }

/* ---------- Agenda no celular (até 720px): cartões ---------- */
@media (max-width:720px) {
  :is(#view-eventos, #view-orcamentos) .nv-cabeca-acoes { display:grid; grid-template-columns:minmax(0, 1fr) auto; width:100%; }
  :is(#view-eventos, #view-orcamentos) .nv-busca-local { width:auto; height:42px; }
  :is(#view-eventos, #view-orcamentos) .nv-busca-local input { font-size:16px; }
  :is(#view-eventos, #view-orcamentos) .nv-periodo-slot { grid-column:1 / -1; grid-row:1; }
  :is(#view-eventos, #view-orcamentos) .nv-cabeca-acoes > .nv-btn.primario { width:42px; height:42px; padding:0; }
  :is(#view-eventos, #view-orcamentos) .nv-cabeca-acoes > .nv-btn.primario span { display:none; }
  :is(#view-eventos, #view-orcamentos) .nv-filtros { gap:8px; }
  :is(#view-eventos, #view-orcamentos) .nv-chips { flex:1 1 100%; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin:0 calc(-1 * var(--pag-d)) 0 calc(-1 * var(--pag-e)); padding:0 var(--pag-d) 0 var(--pag-e); }
  :is(#view-eventos, #view-orcamentos) .nv-chips::-webkit-scrollbar { display:none; }
  :is(#view-eventos, #view-orcamentos) .nv-chip { height:32px; flex:none; }
  :is(#view-eventos, #view-orcamentos) .filtros-toggle { display:inline-flex; align-items:center; gap:8px; height:44px; min-height:44px; flex:1; width:auto; padding:0 12px; justify-content:flex-start;
    border:1px solid var(--c-border-2); border-radius:var(--r-md); background:var(--c-surface); color:var(--c-text); font-size:14px; font-weight:500; }
  :is(#view-eventos, #view-orcamentos) .filtros-toggle::after { content:none; }
  :is(#view-eventos, #view-orcamentos) .filtros-ativos { margin-left:auto; font-size:12px; font-weight:600; color:var(--c-accent-text); }
  :is(#view-eventos, #view-orcamentos) .evt-view-toggle.nv-seg { height:44px; align-items:stretch; }
  :is(#view-eventos, #view-orcamentos) .evt-view-btn { height:auto; }
  :is(#view-eventos, #view-orcamentos) #filter-bar-agenda:not(.aberta) { display:none; }
  :is(#view-eventos, #view-orcamentos) #filter-bar-agenda.aberta { display:grid; grid-template-columns:1fr; gap:8px; width:100%; padding:12px; border:1px solid var(--c-border);
    border-radius:var(--r); background:var(--c-surface); }
  :is(#view-eventos, #view-orcamentos) .nv-filtro-sel select.field { width:100%; height:42px; font-size:16px; }
  :is(#view-eventos, #view-orcamentos) .nv-tabela-cartao { display:none; }
  :is(#view-eventos, #view-orcamentos) .agenda-cards { display:grid; grid-template-columns:minmax(0, 1fr); gap:8px; }
  :is(#view-eventos, #view-orcamentos) .agenda-card { display:grid; grid-template-columns:42px minmax(0, 1fr); gap:11px; padding:11px 12px; border-radius:var(--r);
    background:var(--c-surface); border:1px solid var(--c-border); box-shadow:none; position:relative; }
  :is(#view-eventos, #view-orcamentos) .agenda-card:active { background:var(--c-hover); }
  :is(#view-eventos, #view-orcamentos) .agenda-card .ac-menu { position:absolute; top:2px; right:2px; }
  :is(#view-eventos, #view-orcamentos) .agenda-card .ac-menu > summary.orc-menu-sum { width:44px; height:44px; font-size:20px; }
  :is(#view-eventos, #view-orcamentos) .agenda-card .ac-menu .orc-menu-pop button { min-height:44px; font-size:15px; }
  :is(#view-eventos, #view-orcamentos) .ac-corpo { min-width:0; }
  :is(#view-eventos, #view-orcamentos) .ac-nome { margin:0; padding-right:34px; font-size:calc(13.8px * var(--k-fs)); font-weight:600; line-height:1.3; color:var(--c-text); }
  :is(#view-eventos, #view-orcamentos) .ac-hora, :is(#view-eventos, #view-orcamentos) .ac-local { margin-top:1px; padding:0; font-size:calc(12.1px * var(--k-fs)); color:var(--c-text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  :is(#view-eventos, #view-orcamentos) .ac-rodape { display:flex; align-items:center; gap:8px; margin-top:7px; padding:0; }
  :is(#view-eventos, #view-orcamentos) .ac-valores { margin-left:auto; font-size:calc(13.8px * var(--k-fs)); font-weight:700; color:var(--c-text); letter-spacing:-.2px; text-align:right; }
  :is(#view-eventos, #view-orcamentos) .ac-grupo { gap:8px; }
  :is(#view-eventos, #view-orcamentos) .ac-grupo + .ac-grupo { margin-top:16px; }
  :is(#view-eventos, #view-orcamentos) .ac-mes { margin:0 calc(-1 * var(--pag-d)) 0 calc(-1 * var(--pag-e)); padding:9px var(--pag-d) 9px var(--pag-e); background:var(--c-bg); border-bottom:1px solid var(--c-border); align-items:center; gap:8px; }
  :is(#view-eventos, #view-orcamentos) .ac-mes-nome { font-size:calc(14.5px * var(--k-fs)); font-weight:700; letter-spacing:-.2px; color:var(--c-text); }
  :is(#view-eventos, #view-orcamentos) .ac-grupo.atual .ac-mes-nome { color:var(--c-text); }
  :is(#view-eventos, #view-orcamentos) .ac-mes-tag { height:19px; padding:0 7px; border-radius:999px; font-size:11.5px; font-weight:600; letter-spacing:0; text-transform:none;
    background:var(--c-accent-soft); color:var(--c-accent-text); display:inline-flex; align-items:center; }
  :is(#view-eventos, #view-orcamentos) .ac-mes-info { font-size:12.1px; color:var(--c-text-3); }
  :is(#view-eventos, #view-orcamentos) .ac-ir-mes { min-height:42px; margin-bottom:10px; border-radius:var(--r-md); border:1px solid var(--c-border-2); background:var(--c-surface);
    color:var(--c-accent-text); font-family:var(--f-ui); font-size:14px; font-weight:600; }
  :is(#view-eventos, #view-orcamentos) .agenda-vazio { margin:0; }
  :is(#view-eventos, #view-orcamentos) .cal-wrap.nv-cartao { padding:12px; }
}
/* ajustes da Agenda: menos coisa na linha dos filtros */
:is(#view-eventos, #view-orcamentos) .filter-status { display:none; }
:is(#view-eventos, #view-orcamentos) .status-sel { width:auto; max-width:none; field-sizing:content; padding-right:24px; }
:is(#view-eventos, #view-orcamentos) .nv-filtro-sel select.field { min-width:0; width:auto; }
:is(#view-eventos, #view-orcamentos) .nv-chips { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
:is(#view-eventos, #view-orcamentos) .nv-chips::-webkit-scrollbar { display:none; }
:is(#view-eventos, #view-orcamentos) .nv-chip { flex:none; }
@media (max-width:720px) {
  :is(#view-eventos, #view-orcamentos) .nv-filtro-sel select.field { width:100%; }
}

/* ============================================================
   JANELAS NO VISUAL NOVO (.nv-janela no .modal-overlay)
   Etapa 3b: detalhes do evento (#modal-detalhes) e formulário de evento
   (#modal-evento). As outras janelas entram nas etapas 3c/3d, só
   acrescentando a classe nv-janela.
   ============================================================ */
.nv-janela .modal { background:var(--c-surface); border:1px solid var(--c-border); border-radius:calc(16px * var(--k-r)); box-shadow:var(--c-sombra); }
.nv-janela .modal-head { padding:14px 18px 14px 22px; background:var(--c-surface); border-bottom:1px solid var(--c-border); }
.nv-janela .modal-head h3, .nv-janela .cd-num { font-family:var(--f-ui); font-size:calc(16.5px * var(--k-fs)); font-weight:650; letter-spacing:-.2px; color:var(--c-text); }
.nv-janela .modal-close { width:32px; height:32px; border-radius:var(--r-md); background:none; color:var(--c-text-2); }
.nv-janela .modal-close:hover { background:var(--c-hover); color:var(--c-text); }
.nv-janela .modal-body, .nv-janela .cd-body { padding:20px 22px; }
.nv-janela .modal-foot { padding:12px 22px; background:var(--c-surface); border-top:1px solid var(--c-border); gap:8px; }
/* botões das janelas no padrão nv-btn */
.nv-janela .modal-foot .btn, .nv-janela .cd-foot .btn, .nv-janela .cd-linkbtns .btn { height:34px; padding:0 14px; border-radius:var(--r-md); font-family:var(--f-ui);
  font-size:calc(13px * var(--k-fs)); font-weight:600; gap:7px; }
.nv-janela .btn.ghost { background:var(--c-surface); border:1px solid var(--c-border-2); color:var(--c-text); }
.nv-janela .btn.ghost:hover { background:var(--c-hover); border-color:var(--c-border-2); color:var(--c-text); }
.nv-janela .btn.primary { background:var(--c-prim); color:var(--c-prim-text); border:1px solid transparent; }
.nv-janela .btn.small { height:30px; padding:0 10px; font-size:calc(12.5px * var(--k-fs)); }

/* detalhes do evento (padrão cd-*) */
.nv-janela .cd-cards { gap:10px; margin-bottom:14px; }
.nv-janela .cd-card { background:none; border:1px solid var(--c-border); border-radius:calc(10px * var(--k-r)); padding:11px 13px; min-height:60px; }
.nv-janela .cd-card span { font-size:12px; text-transform:none; letter-spacing:0; color:var(--c-text-3); margin-bottom:3px; }
.nv-janela .cd-card b { font-size:calc(14.5px * var(--k-fs)); font-weight:650; color:var(--c-text); font-variant-numeric:tabular-nums; }
.nv-janela .cd-card b.det-liq, .nv-janela .cd-row b.det-liq { color:var(--c-ok); }
.nv-janela .cd-toolbar { margin-bottom:16px; padding-bottom:14px; border-bottom:1px solid var(--c-border); }
.nv-janela .cd-status-cap { font-size:12.5px; text-transform:none; letter-spacing:0; color:var(--c-text-3); }
.nv-janela .cd-status-menu { background:var(--c-raised); border:1px solid var(--c-border-2); border-radius:var(--r); box-shadow:var(--c-sombra); }
.nv-janela .cd-status-opt:hover { background:var(--c-hover); }
.nv-janela .cd-sec { font-family:var(--f-ui); font-size:calc(13.5px * var(--k-fs)); font-weight:600; text-transform:none; letter-spacing:0; color:var(--c-text); margin:0 0 8px; }
.nv-janela .cd-block { background:none; border:1px solid var(--c-border); border-radius:calc(10px * var(--k-r)); padding:13px 15px; }
.nv-janela .cd-row { padding:7px 0; border-bottom:1px solid var(--c-border); font-size:calc(13px * var(--k-fs)); }
.nv-janela .cd-row:last-child { border-bottom:0; }
.nv-janela .cd-row span { color:var(--c-text-2); }
.nv-janela .cd-row b { color:var(--c-text); font-weight:500; font-variant-numeric:tabular-nums; }
.nv-janela .cd-linkbox { background:var(--c-bg); border:1px solid var(--c-border); border-radius:var(--r-md); }
.nv-janela .cd-linkurl { color:var(--c-accent-text); }
.nv-janela .cd-linkbox.off { color:var(--c-text-3); }
.nv-janela .det-link-tit { font-size:calc(13px * var(--k-fs)); font-weight:600; color:var(--c-text); }
.nv-janela .det-link-tit small { font-size:12px; font-weight:400; color:var(--c-text-3); }
.nv-janela .cd-drop { background:none; border:1.5px dashed var(--c-border-2); border-radius:calc(10px * var(--k-r)); }
.nv-janela .cd-drop:hover, .nv-janela .cd-drop.over { border-color:var(--c-accent); background:var(--c-accent-soft); }
.nv-janela .cd-drop-ic { color:var(--c-accent-text); background:var(--c-accent-soft); border-color:var(--c-accent-line); }
.nv-janela .cd-anexo { background:var(--c-bg); border-color:var(--c-border); }
.nv-janela .cd-foot { padding:12px 22px; background:var(--c-surface); border-top:1px solid var(--c-border); }
.nv-janela .det-mais .orc-menu-pop { background:var(--c-raised); border:1px solid var(--c-border-2); border-radius:var(--r); box-shadow:var(--c-sombra); padding:6px; }
.nv-janela .det-mais .orc-menu-pop button { border-radius:7px; color:var(--c-text); font-family:var(--f-ui); font-size:calc(13px * var(--k-fs)); }
.nv-janela .det-mais .orc-menu-pop button:hover { background:var(--c-hover); }
.nv-janela .det-mais .orc-menu-pop button.danger { color:var(--c-bad); }

/* formulário de evento */
.nv-janela .form-grid { gap:14px 16px; }
.nv-janela .form-field { gap:6px; }
.nv-janela .form-field label { font-size:calc(12.5px * var(--k-fs)); font-weight:500; text-transform:none; letter-spacing:0; color:var(--c-text-2); }
.nv-janela .form-field label .req { color:var(--c-bad); }
.nv-janela .form-field input, .nv-janela .form-field select, .nv-janela .form-field textarea, .nv-janela .fe-hor-row input[type=time] {
  background:var(--c-bg); color:var(--c-text); border:1px solid var(--c-border-2); border-radius:var(--r-md); padding:8px 11px; min-height:36px; font-weight:400; }
.nv-janela .form-field input:hover, .nv-janela .form-field select:hover, .nv-janela .form-field textarea:hover { border-color:var(--c-text-3); }
.nv-janela .form-field input:focus, .nv-janela .form-field select:focus, .nv-janela .form-field textarea:focus, .nv-janela .fe-hor-row input[type=time]:focus {
  outline:none; border-color:var(--c-accent); box-shadow:0 0 0 1px var(--c-accent); }
.nv-janela .form-field input.error, .nv-janela .form-field select.error { border-color:var(--c-bad); box-shadow:0 0 0 1px var(--c-bad); }
.nv-janela .form-field input::placeholder, .nv-janela .form-field textarea::placeholder { color:var(--c-text-3); }
.nv-janela .fe-hor-rem { border-radius:var(--r-md); border-color:var(--c-border-2); background:none; color:var(--c-text-2); }
.nv-janela .fe-hor-as { color:var(--c-text-3); }

@media (max-width:720px) {
  .nv-janela .modal-head { padding:12px 12px 12px 16px; }
  .nv-janela .modal-body, .nv-janela .cd-body { padding:16px; }
  .nv-janela .modal-foot, .nv-janela .cd-foot { padding:10px 16px calc(10px + env(safe-area-inset-bottom)); }
  .nv-janela .modal-foot .btn, .nv-janela .cd-foot .btn { height:44px; font-size:14px; }
  .nv-janela .cd-linkbtns .btn { height:40px; }
  .nv-janela .modal-close { width:40px; height:40px; }
}
@media (max-width:720px) {
  /* filtros abertos descem para baixo de "Filtros" e de Lista/Calendário */
  :is(#view-eventos, #view-orcamentos) .nv-chips { order:0; }
  :is(#view-eventos, #view-orcamentos) .filtros-toggle { order:1; }
  :is(#view-eventos, #view-orcamentos) .evt-view-toggle.nv-seg { order:2; }
  :is(#view-eventos, #view-orcamentos) #filter-bar-agenda { order:3; }
}

/* ============================================================
   ORÇAMENTOS E CONTRATOS (Etapa 3c) — o que é só deles; o resto
   (cabeçalho, botões de situação, tabela, cartões) vem das LISTAS acima.
   ============================================================ */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
/* abas Orçamentos · Kits · Equipamentos */
#view-orcamentos .nv-abas { display:flex; gap:4px; width:auto; margin:0 0 var(--esp-4); padding:0; background:none; border:0; border-bottom:1px solid var(--c-border); border-radius:0; box-shadow:none; }
#view-orcamentos .nv-abas .subtab { position:relative; height:36px; padding:0 12px; border:0; border-radius:0; background:none; color:var(--c-text-2);
  font-family:var(--f-ui); font-size:calc(13px * var(--k-fs)); font-weight:500; cursor:pointer; }
#view-orcamentos .nv-abas .subtab:hover { color:var(--c-text); }
#view-orcamentos .nv-abas .subtab.active { color:var(--c-text); font-weight:600; background:none; box-shadow:none; }
#view-orcamentos .nv-abas .subtab.active::after { content:''; position:absolute; left:8px; right:8px; bottom:-1px; height:2px; border-radius:2px; background:var(--c-accent); }
#view-orcamentos:not([data-sub="orcamentos"]) .nv-periodo-slot { display:none; }
/* tabela de documentos */
.nv-tabela-docs td.col-num { font-variant-numeric:tabular-nums; color:var(--c-text-2); font-size:12.5px; }
:is(#view-orcamentos) table.nv-tabela td.col-evento { width:34%; min-width:200px; }
:is(#view-orcamentos) table.nv-tabela td.neg, .nv-tabela-docs .neg { color:var(--c-text-3); }
:is(#view-orcamentos) table.nv-tabela tbody tr[data-doc-id] { cursor:pointer; }
:is(#view-orcamentos) table.nv-tabela tbody tr[data-doc-id]:hover td { background:var(--c-hover); }
:is(#view-orcamentos) table.nv-tabela thead th { cursor:default; }
:is(#view-orcamentos) table.nv-tabela tr.inactive { opacity:.6; }
:is(#view-orcamentos) table.nv-tabela tr.inactive .evt-name { text-decoration:none; }
.nv-tabela-docs .sub.aviso, .nv-tag.aviso { color:var(--c-warn); }
.nv-tag.aviso { background:color-mix(in srgb, var(--c-warn) 14%, transparent); margin:0; }
.nv-acoes-linha { display:inline-flex; align-items:center; gap:4px; }
.nv-acoes-linha .nv-btn.pequeno { height:28px; padding:0 10px; }
:is(#view-orcamentos) .col-acoes { width:110px; }
.nv-vazio.grande { margin:8px 0; padding:40px 20px; }
.nv-vazio.grande b { font-size:calc(15px * var(--k-fs)); color:var(--c-text); }
.nv-vazio.grande span { max-width:440px; font-size:var(--fs-base); }
/* Kits e Equipamentos (cartões do catálogo) */
#view-orcamentos .cat-grid { grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:10px; }
#view-orcamentos .cat-card { display:grid; grid-template-columns:56px minmax(0, 1fr) auto; align-items:start; background:var(--c-surface); border:1px solid var(--c-border); border-radius:calc(10px * var(--k-r)); padding:11px; gap:11px; }
#view-orcamentos .cat-card-click:hover { border-color:var(--c-border-2); background:var(--c-hover); }
#view-orcamentos .cat-card-thumb { width:56px; height:56px; border-radius:var(--r-md); background:var(--c-raised); border-color:var(--c-border); font-size:22px; }
#view-orcamentos .cat-card-nome { font-size:calc(13.5px * var(--k-fs)); font-weight:600; color:var(--c-text); }
#view-orcamentos .cat-card-valor { font-size:calc(13px * var(--k-fs)); font-weight:600; color:var(--c-text); font-variant-numeric:tabular-nums; }
#view-orcamentos .cat-card-valor.sem, #view-orcamentos .cat-card-desc { color:var(--c-text-3); font-weight:400; }
#view-orcamentos .cat-chip { border-radius:999px; background:var(--c-hover); color:var(--c-text-2); border:0; font-weight:500; }
#view-orcamentos .cat-chip.inc { background:color-mix(in srgb, var(--c-ok) 14%, transparent); color:var(--c-ok); }
#view-orcamentos .cat-card-acoes { display:grid; grid-template-columns:repeat(2, 28px); gap:2px; }
#view-orcamentos .cat-card-acoes .icon-btn { width:28px; height:28px; border:0; border-radius:var(--r-sm); background:none; color:var(--c-text-3); }
#view-orcamentos .cat-card-acoes .icon-btn:hover { background:var(--c-hover); color:var(--c-text); }
#view-orcamentos .cat-card-acoes .icon-btn.del:hover { color:var(--c-bad); }
#view-orcamentos .cat-sel-vazio { padding:24px; text-align:center; color:var(--c-text-2); border:1px dashed var(--c-border-2); border-radius:var(--r); }

/* seletores e partes das janelas novas */

.nv-janela .form-section { border-top:1px solid var(--c-border); }
.nv-janela .form-section-title { font-size:calc(13.5px * var(--k-fs)); text-transform:none; letter-spacing:0; font-weight:600; color:var(--c-text); }
.nv-janela .src-btn-full { background:none; border:1px dashed var(--c-border-2); border-radius:var(--r-md); color:var(--c-text); font-weight:500; }
.nv-janela .src-btn-full span { color:var(--c-accent-text); }
.nv-janela .src-btn-full:hover { border-color:var(--c-accent); background:var(--c-accent-soft); }
.nv-janela .orc-pick-card { background:none; border-color:var(--c-border); border-radius:calc(10px * var(--k-r)); }
.nv-janela .orc-pick-card:hover { background:var(--c-hover); border-color:var(--c-border-2); }
.nv-janela .orc-pick-card.on { border-color:var(--c-accent); box-shadow:0 0 0 1px var(--c-accent) inset; background:var(--c-accent-soft); }
.nv-janela .form-field .hint { color:var(--c-text-3) !important; text-transform:none; letter-spacing:0; }

@media (max-width:720px) {
  #view-orcamentos .nv-abas { overflow-x:auto; scrollbar-width:none; margin-left:calc(-1 * var(--pag-e)); margin-right:calc(-1 * var(--pag-d)); padding:0 12px; }
  #view-orcamentos .nv-abas::-webkit-scrollbar { display:none; }
  #view-orcamentos .nv-abas .subtab { height:42px; flex:none; font-size:14px; }
  #view-orcamentos .cat-grid { grid-template-columns:minmax(0, 1fr); }
  :is(#view-orcamentos) .agenda-card .ac-rodape { flex-wrap:wrap; }
}

/* escolha Pessoa Física / Jurídica e parecidas (.seg-toggle) nas janelas novas */
.nv-janela .seg-toggle button { background:none; border:1px solid var(--c-border-2); border-radius:calc(10px * var(--k-r)); padding:10px 13px; }
.nv-janela .seg-toggle button:hover { background:var(--c-hover); border-color:var(--c-border-2); }
.nv-janela .seg-toggle button b { font-size:calc(13.5px * var(--k-fs)); font-weight:600; color:var(--c-text); }
.nv-janela .seg-toggle button span { font-size:12px; color:var(--c-text-3); }
.nv-janela .seg-toggle button.on { border-color:var(--c-accent); background:var(--c-accent-soft); box-shadow:0 0 0 1px var(--c-accent) inset; }
.nv-janela .seg-toggle button.on b { color:var(--c-accent-text); }
#view-orcamentos .cat-chip { text-transform:none; letter-spacing:0; font-size:11.5px; }
@media (max-width:720px) {
  #view-orcamentos .cat-card-acoes { grid-template-columns:repeat(2, 38px); }
  #view-orcamentos .cat-card-acoes .icon-btn { width:38px; height:38px; }
}
/* rodapé dos detalhes (evento, orçamento, contrato): "Enviar" grande; o resto no "⋯ Mais" */
.nv-janela .det-mais > summary.btn { list-style:none; display:inline-flex; align-items:center; height:34px; padding:0 14px; }
.nv-janela .det-mais > summary::-webkit-details-marker { display:none; }
.nv-janela .det-mais .orc-menu-pop { min-width:210px; }
.nv-janela .det-mais .orc-menu-pop button { min-height:38px; width:100%; text-align:left; padding:0 10px; }
.nv-janela .form-field label { flex-wrap:wrap; }
@media (max-width:720px) {
  .nv-janela .cd-foot { flex-direction:row; flex-wrap:wrap; gap:8px; }
  .nv-janela .cd-foot > .btn, .nv-janela .cd-foot > details { width:auto; flex:1 1 0; min-width:0; }
  .nv-janela .cd-foot > [data-enviar], .nv-janela .cd-foot > #det-btn-enviar { flex:1 1 100%; }
  .nv-janela .cd-foot > .cd-foot-sp { display:none; }
  .nv-janela .det-mais > summary.btn { width:100%; height:44px; justify-content:center; }
  .nv-janela .det-mais-lbl { display:none; }
  .nv-janela .det-mais .orc-menu-pop button { min-height:44px; }
}
.nv-janela .oe-hist-wrap { border-top-color:var(--c-border); }
.nv-janela .oe-hist-titulo { font-size:calc(13px * var(--k-fs)); text-transform:none; letter-spacing:0; font-weight:600; color:var(--c-text); }

/* ============================================================
   COMISSÕES, ANÁLISE E SAÚDE FINANCEIRA (Etapa 3d)
   ============================================================ */
#app-wrap:has(#view-saude.active) #periodo-bar { display:none; } /* a Saúde tem o período dela */
.nv-grade { display:grid; gap:var(--esp-3); margin:var(--esp-3) 0; align-items:start; }
.nv-grade-2 { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.nv-grade-3 { grid-template-columns:repeat(3, minmax(0, 1fr)); }
.nv-grade .nv-grafico.chart-box { height:240px; }
.nv .nv-grafico.chart-box.alto { height:290px; }
.nv-numeros-3 { grid-template-columns:repeat(3, minmax(0, 1fr)); }
.nv-conta { margin-left:auto; font-size:var(--fs-sm); color:var(--c-text-3); white-space:nowrap; }
:is(#view-comissoes, #view-saude, #view-analise) > .nv-cartao { margin:var(--esp-3) 0; }

/* Análise: listas de locais */
#view-analise .rank-list { display:grid; gap:10px; }
#view-analise .rank-line { display:flex; justify-content:space-between; gap:12px; font-size:var(--fs-base); margin-bottom:5px; }
#view-analise .rank-name { color:var(--c-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#view-analise .rank-val { color:var(--c-text); font-weight:600; font-variant-numeric:tabular-nums; }
#view-analise .rank-track { height:6px; border-radius:6px; background:var(--c-hover); overflow:hidden; }
#view-analise .rank-fill { height:100%; border-radius:6px; background:var(--c-ch-1); }
#view-analise .rs-empty { color:var(--c-text-3); font-size:var(--fs-sm); }

/* Saúde: período próprio, números, destaques, risco, tipos e previsão */
#view-saude .saude-periodo { display:inline-flex; padding:2px; gap:2px; border:0; border-radius:9px; background:var(--c-hover); margin:0; }
#view-saude .saude-per-btn { height:27px; padding:0 10px; border:0; border-radius:7px; background:none; color:var(--c-text-2); font-family:var(--f-ui);
  font-size:calc(12.5px * var(--k-fs)); font-weight:500; cursor:pointer; white-space:nowrap; }
#view-saude .saude-per-btn.active { background:var(--c-surface); color:var(--c-text); font-weight:600; box-shadow:0 1px 2px rgba(0,0,0,.14); }
#view-saude #saude-periodo-label::first-letter { text-transform:uppercase; }
.nv-insights { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:var(--esp-3); margin-top:var(--esp-3); }
.nv-insight { display:flex; gap:11px; align-items:flex-start; padding:11px 13px; border:1px solid var(--c-border); border-radius:var(--r); background:var(--c-surface); min-width:0; }
.nv-insight .ico { flex:none; display:grid; place-items:center; width:34px; height:34px; border-radius:var(--r-md); background:var(--c-accent-soft); color:var(--c-accent-text); }
.nv-insight > div { min-width:0; }
.nv-insight .l { font-size:12px; color:var(--c-text-3); }
.nv-insight .v { margin-top:1px; font-size:calc(14.5px * var(--k-fs)); font-weight:650; color:var(--c-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-variant-numeric:tabular-nums; }
.nv-insight .v.yoy-pos { color:var(--c-ok); } .nv-insight .v.yoy-neg { color:var(--c-bad); }
.nv-insight .s { font-size:12px; color:var(--c-text-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#view-saude .saude-risco-resumo { padding:8px 11px; border-radius:var(--r-md); background:color-mix(in srgb, var(--c-bad) 9%, transparent); color:var(--c-text-2); font-size:var(--fs-base); }
#view-saude .saude-risco-resumo b { color:var(--c-bad); font-variant-numeric:tabular-nums; }
#view-saude .saude-risco-item { display:grid; grid-template-columns:minmax(0, 1fr) auto auto; gap:12px; align-items:center; padding:9px 0; border-bottom:1px solid var(--c-border); background:none; border-radius:0; margin:0; }
#view-saude .saude-risco-item:last-of-type { border-bottom:0; }
#view-saude .saude-risco-nome { font-weight:600; color:var(--c-text); font-size:var(--fs-base); }
#view-saude .saude-risco-meta { font-size:12px; color:var(--c-text-3); }
#view-saude .saude-risco-val { font-weight:600; color:var(--c-bad); font-variant-numeric:tabular-nums; }
#view-saude .saude-risco-acoes { display:flex; gap:4px; }
#view-saude .saude-risco-mais { padding:8px 0 0; text-align:center; font-size:12px; color:var(--c-text-3); }
#view-saude .saude-tipo-item { padding:6px 0; }
#view-saude .saude-tipo-head { display:flex; justify-content:space-between; gap:10px; font-size:var(--fs-base); margin-bottom:5px; }
#view-saude .saude-tipo-nome { color:var(--c-text); }
#view-saude .saude-tipo-val b { color:var(--c-text); font-weight:600; }
#view-saude .saude-tipo-sub { color:var(--c-text-3); }
#view-saude .saude-tipo-bar { height:6px; border-radius:6px; background:var(--c-hover); overflow:hidden; }
#view-saude .saude-tipo-bar-fill { height:100%; border-radius:6px; background:var(--c-ch-1); }
#view-saude .saude-forecast-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--esp-3); }
#view-saude .saude-forecast-card { padding:13px 15px; border:1px solid var(--c-border); border-radius:var(--r); background:none; text-align:left; }
#view-saude .saude-forecast-mes { font-size:12px; font-weight:500; letter-spacing:0; text-transform:none; color:var(--c-text-3); }
#view-saude .saude-forecast-mes::first-letter { text-transform:uppercase; }
#view-saude .saude-forecast-confirmado { margin-top:4px; font-size:calc(19px * var(--k-fs)); font-weight:700; color:var(--c-text); font-variant-numeric:tabular-nums; }
#view-saude .saude-forecast-sub { font-size:12px; color:var(--c-text-3); }
#view-saude .saude-forecast-possivel { margin-top:8px; padding-top:8px; border-top:1px solid var(--c-border); font-size:12px; color:var(--c-text-2); }
#view-saude .nv-saude-comissoes .nv-numeros-3 { margin-bottom:var(--esp-3); }

/* Cartão por comissionado (aba Comissões e Saúde) */

:is(#view-comissoes, #view-saude) .dot.arep { background:var(--c-warn); } :is(#view-comissoes, #view-saude) .dot.prev { background:var(--c-info); } :is(#view-comissoes, #view-saude) .dot.rep { background:var(--c-ok); }

/* linhas de evento */

#view-comissoes .cx-empty { padding:28px 16px; text-align:center; color:var(--c-text-2); border:1px dashed var(--c-border-2); border-radius:var(--r); }

@media (max-width:1100px) {
  .nv-grade-3 { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .nv-insights { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:720px) {
  .nv-grade-2, .nv-grade-3 { grid-template-columns:minmax(0, 1fr); }
  .nv-numeros-3 { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .nv-numeros-3 > :first-child { grid-column:1 / -1; }
  .nv-insights { grid-template-columns:minmax(0, 1fr); gap:8px; }
  #view-saude .saude-forecast-grid { grid-template-columns:minmax(0, 1fr); }
  #view-saude .nv-cabeca-acoes { width:100%; }
  #view-saude .saude-periodo { display:flex; width:100%; overflow-x:auto; scrollbar-width:none; }
  #view-saude .saude-per-btn { flex:1 0 auto; height:36px; font-size:13px; }
  #view-comissoes .nv-cabeca-acoes { display:grid; grid-template-columns:minmax(0, 1fr) auto; width:100%; gap:8px; }
  #view-comissoes .nv-busca-local { width:auto; height:42px; }
  #view-comissoes .nv-busca-local input { font-size:16px; }
  #view-comissoes .nv-periodo-slot { grid-column:1 / -1; grid-row:1; }
  #view-comissoes #cx-novo-contato { height:42px; }

  #view-comissoes .nv-filtros { flex-wrap:nowrap; }
  #view-comissoes .nv-chips { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin-left:calc(-1 * var(--pag-e)); padding-left:var(--pag-e); }
  #view-comissoes .nv-chips::-webkit-scrollbar { display:none; }
  #view-comissoes .nv-chip { flex:none; height:32px; }
  #view-comissoes .nv-conta { display:none; }
}
#view-comissoes .nv-filtros { display:flex; align-items:center; gap:8px; margin:var(--esp-3) 0; }
#view-comissoes .nv-chips { flex:1; min-width:0; }
#view-comissoes > .nv-numeros { margin-top:var(--esp-1); }
@media (max-width:720px) {
  #view-comissoes #cx-novo-contato { width:42px; padding:0; justify-content:center; }
  #view-comissoes #cx-novo-contato span { display:none; }
}

@media (max-width:720px) {
  .nv-insights { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .nv-insight { padding:10px 11px; }
  .nv-insight .ico { display:none; }
  .nv-insight .s { white-space:normal; }
}
/* rótulos pequenos das janelas: sem MAIÚSCULAS, no cinza do tema */
.nv-janela :is(.px-lbl, .oem-lbl, .ctr-modelos-lbl, .det-status-lbl, .det-share-lbl, .det-totalbox-lbl, .ctr-d-sec-title) { text-transform:none; letter-spacing:0; font-size:12.5px; font-weight:500; color:var(--c-text-3); }
.nv-janela :is(.px-bloco-titulo, .ctr-d-sec-title) { text-transform:none; letter-spacing:0; font-size:calc(13.5px * var(--k-fs)); font-weight:600; color:var(--c-text); }
.nv-janela .px-val { color:var(--c-text); }
.nv-janela .px-valor { color:var(--c-ok); }

/* ============================================================
   ROLAGEM E APP NO IPHONE (Etapa 5) — igual ao app de estudos
   (pedido do Renato em 05/10): quem rola é a página; o menu lateral
   fica parado na tela. O "elástico" ao chegar no começo ou no fim VOLTOU
   em 19/10 (pedido do Renato: "que nem o WhatsApp"), com o puxar para
   atualizar no app instalado (PuxarAtualizar, app/interface.js). A roda
   do mouse em cima do menu e a página presa com janela aberta ficam no
   módulo Rolagem.
   ============================================================ */
body.rolagem-presa { position:fixed; left:0; right:0; width:100%; overflow:hidden; }
.nv-lado-nav, .bnav-painel, .notif-lista { overscroll-behavior:contain; }
@media (min-width:721px) {
  /* menu lateral fixo na tela (a coluna do conteúdo tem a mesma largura) */
  html:not([data-menu="topo"]) .nv-lado { position:fixed; left:0; top:0; bottom:0; height:auto; width:var(--lado-w); }
  html:not([data-menu="topo"])[data-lado="recolhido"] .nv-lado { width:var(--lado-rail); }
  html:not([data-menu="topo"]) .nv-principal { grid-column:2; }
}
@media (max-width:720px) {
  /* app na tela inicial do iPhone: o topo desce para baixo do relógio
     (no navegador comum essa folga é zero) */
  :root { --topbar-h:calc(48px + var(--topo-seguro)); }
  .nv-topo { padding-top:var(--topo-seguro); }
  .bnav-painel { max-height:calc(100dvh - var(--topo-seguro) - 24px); overflow-y:auto; }
}

/* ============================================================
   CONFIGURAÇÕES › DADOS E SEGURANÇA (Etapa 6, parte 2)
   ============================================================ */
.ds-nums { display:grid; grid-template-columns:repeat(auto-fill, minmax(118px, 1fr)); gap:8px; }
.ds-nums > div { display:grid; gap:1px; padding:10px 12px; border-radius:var(--r-md); background:var(--c-raised); border:1px solid var(--c-border); }
.ds-nums b { font-size:calc(18px * var(--k-fs)); font-weight:700; color:var(--c-text); font-variant-numeric:tabular-nums; letter-spacing:-.3px; }
.ds-nums small { font-size:12px; color:var(--c-text-3); }
.ds-dica { margin:0; font-size:var(--fs-sm); line-height:1.5; color:var(--c-text-3); }
.ds-estado { display:flex; align-items:flex-start; gap:11px; padding:12px 14px; border-radius:var(--r); border:1px solid var(--c-border); background:var(--c-raised);
  --dc:var(--c-text-3); }
.ds-estado.ok { --dc:var(--c-ok); border-color:color-mix(in srgb, var(--c-ok) 35%, var(--c-border)); }
.ds-estado.aviso { --dc:var(--c-warn); border-color:color-mix(in srgb, var(--c-warn) 45%, var(--c-border)); background:color-mix(in srgb, var(--c-warn) 8%, var(--c-raised)); }
.ds-estado.erro { --dc:var(--c-bad); border-color:color-mix(in srgb, var(--c-bad) 45%, var(--c-border)); background:color-mix(in srgb, var(--c-bad) 8%, var(--c-raised)); }
.ds-ponto { flex:none; width:10px; height:10px; margin-top:5px; border-radius:50%; background:var(--dc); box-shadow:0 0 0 3px color-mix(in srgb, var(--dc) 20%, transparent); }
.ds-estado > div { flex:1; min-width:0; display:grid; gap:2px; }
.ds-estado b { font-size:var(--fs-md); font-weight:650; color:var(--c-text); }
.ds-estado small { font-size:var(--fs-sm); color:var(--c-text-2); line-height:1.45; }
.ds-estado .nv-link { margin-left:0; align-self:center; flex:none; }
.ds-hist { display:grid; gap:6px; }
.ds-hist:empty { display:none; }
.ds-hist-dias { display:flex; flex-wrap:wrap; gap:6px; }
.ds-hist-dias span { display:inline-flex; align-items:center; gap:5px; height:24px; padding:0 8px; border-radius:999px; font-size:12px; font-variant-numeric:tabular-nums;
  background:var(--c-hover); color:var(--c-text-2); }
.ds-hist-dias span i { font-style:normal; font-weight:700; }
.ds-hist-dias span.ok i { color:var(--c-ok); }
.ds-hist-dias span.erro { background:color-mix(in srgb, var(--c-bad) 12%, transparent); color:var(--c-bad); }
@media (max-width:720px) {
  .ds-nums { grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .ds-estado { flex-wrap:wrap; }
  .ds-estado .nv-link { width:100%; padding-left:21px; }
}

/* Lixeira (Etapa 6, parte 3) */
.ds-lx-n { margin-left:6px; font-size:var(--fs-sm); font-weight:500; color:var(--c-text-3); }
.ds-lixeira { display:grid; gap:6px; }
.ds-lx { display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:var(--r); border:1px solid var(--c-border); background:var(--c-raised); }
.ds-lx-ic { flex:none; display:grid; place-items:center; width:32px; height:32px; border-radius:var(--r-md); background:var(--c-hover); color:var(--c-text-2); }
.ds-lx-txt { flex:1; min-width:0; display:grid; gap:2px; }
.ds-lx-txt b { font-size:var(--fs-md); font-weight:600; color:var(--c-text); overflow-wrap:anywhere; }
.ds-lx-txt small { font-size:var(--fs-sm); color:var(--c-text-3); line-height:1.45; }
.ds-lx-txt .ds-lx-logo { color:var(--c-text); font-weight:600; }
.ds-lx-acoes { flex:none; display:flex; gap:6px; }
.ds-lx-vazia { padding:14px; border:1px dashed var(--c-border); border-radius:var(--r); text-align:center; font-size:var(--fs-sm); color:var(--c-text-3); }
@media (max-width:720px) {
  .ds-lx { flex-wrap:wrap; align-items:flex-start; }
  .ds-lx-txt { flex-basis:calc(100% - 43px); }
  .ds-lx-acoes { width:100%; padding-left:43px; }
  .ds-lx-acoes .nv-btn { flex:1; height:36px; }
}

/* Cópia no aparelho (Etapa 6, parte 4) — aviso no topo e cartão "Este aparelho" */
.nv-rede { display:inline-flex; align-items:center; gap:7px; flex:none; height:30px; padding:0 11px; border-radius:999px; cursor:pointer;
  border:1px solid var(--c-border); background:var(--c-raised); color:var(--c-text); font:inherit; font-size:var(--fs-sm); font-weight:600; white-space:nowrap;
  --rc:var(--c-text-3); }
.nv-rede[hidden] { display:none; }
.nv-rede:hover { background:var(--c-hover); }
.nv-rede[data-estado="offline"] { --rc:var(--c-warn); border-color:color-mix(in srgb, var(--c-warn) 45%, var(--c-border)); }
.nv-rede[data-estado="esperando"], .nv-rede[data-estado="enviando"] { --rc:var(--c-info); }
.nv-rede[data-estado="erro"] { --rc:var(--c-bad); border-color:color-mix(in srgb, var(--c-bad) 45%, var(--c-border)); }
.nv-rede-ponto { width:8px; height:8px; border-radius:50%; background:var(--rc); box-shadow:0 0 0 3px color-mix(in srgb, var(--rc) 22%, transparent); }
.nv-rede[data-estado="enviando"] .nv-rede-ponto { animation:blink 1s infinite; }
.nv-rede-curto { display:none; }
@media (max-width:1100px) { .nv-rede-txt { display:none; } .nv-rede-curto { display:inline; } }
@media (prefers-reduced-motion:reduce) { .nv-rede[data-estado="enviando"] .nv-rede-ponto { animation:none; } }

.ds-nums.ds-nums-3 { grid-template-columns:repeat(3, minmax(0, 1fr)); }
.ds-fila { display:grid; gap:6px; }
.ds-fila-item { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:var(--r); border:1px solid var(--c-border); background:var(--c-raised); }
.ds-fila-item.erro { border-color:color-mix(in srgb, var(--c-bad) 45%, var(--c-border)); background:color-mix(in srgb, var(--c-bad) 7%, var(--c-raised)); }
.ds-fila-txt { flex:1; min-width:0; display:grid; gap:2px; }
.ds-fila-txt b { font-size:var(--fs-md); font-weight:600; color:var(--c-text); overflow-wrap:anywhere; }
.ds-fila-txt small { font-size:var(--fs-sm); color:var(--c-text-3); line-height:1.45; }
.ds-fila-acoes { flex:none; display:flex; gap:6px; }
@media (max-width:720px) {
  .ds-fila-item { flex-wrap:wrap; }
  .ds-fila-acoes { width:100%; }
  .ds-fila-acoes .nv-btn { flex:1; height:36px; }
  .nv-rede { height:28px; padding:0 9px; }
}

/* ============================================================
   MENU "⋯" (MenuAcoes, app.js) — um visual e um jeito só em todo o app
   (pedido do Renato em 06/10): solto por cima de tudo, nunca cortado,
   abre para cima quando não cabe, rola por dentro se for maior que a tela.
   ============================================================ */
.notif-menu-pop { overflow-y:auto; overscroll-behavior:contain; }
.orc-menu-pop.flut { position:fixed; right:auto; bottom:auto; z-index:1500; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; }
.orc-menu-pop, .notif-menu-pop { min-width:208px; padding:5px; gap:1px; border-radius:10px; background:var(--c-raised); border:1px solid var(--c-border-2); box-shadow:var(--c-sombra); }
.orc-menu-pop button, .notif-menu-pop button { display:flex; align-items:center; gap:8px; width:100%; min-height:32px; padding:0 10px; border:0; border-radius:7px; background:none;
  font-family:var(--f-ui); font-size:calc(13px * var(--k-fs)); font-weight:500; color:var(--c-text); text-align:left; white-space:nowrap; cursor:pointer; }
.orc-menu-pop button:hover, .orc-menu-pop button:focus-visible, .notif-menu-pop button:hover, .notif-menu-pop button:focus-visible { background:var(--c-hover); color:var(--c-text); outline:none; }
.orc-menu-pop button.danger, .notif-menu-pop button.danger { color:var(--c-bad); }
.orc-menu-pop button.danger:hover, .orc-menu-pop button.danger:focus-visible, .notif-menu-pop button.danger:hover { background:var(--c-bad-soft); }
.orc-menu-grupo { display:contents; }
.orc-menu-grupo[hidden] { display:none; }
.orc-menu-pop hr { flex:none; border:0; border-top:1px solid var(--c-border); margin:4px 6px; }
.orc-menu-mais::after { content:"›"; margin-left:auto; padding-left:16px; font-size:16px; line-height:1; color:var(--c-text-3); }
.orc-menu-voltar { color:var(--c-text-2) !important; }
.orc-menu-voltar::before { content:"‹"; font-size:16px; line-height:1; color:var(--c-text-3); }

/* ============================================================
   ANÁLISES NOVAS (AnaliseNova, app.js; 06/10)
   ============================================================ */
.ana-sec { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin:6px 2px 10px; }
.ana-sec h2, .ana-sec-tit { margin:0; font-family:var(--f-ui); font-size:calc(14.8px * var(--k-fs)); font-weight:600; color:var(--c-text); }
.ana-sec p { margin:0; font-size:calc(12.4px * var(--k-fs)); color:var(--c-text-3); }
.ana-sec-tit { margin:22px 2px 0; }
.an-comp .nv-numero .s { min-height:18px; }
.an-var { display:inline-flex; align-items:center; gap:4px; margin-top:7px; padding:2px 7px; border-radius:999px; font-size:11.8px; font-weight:600;
  background:var(--c-hover); color:var(--c-text-2); white-space:nowrap; }
.an-var.sobe { background:var(--c-ok-soft); color:var(--c-ok); }
.an-var.desce { background:var(--c-bad-soft); color:var(--c-bad); }
.an-cartao { min-width:0; }
.an-mini { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; }
.an-mini > div { display:grid; gap:3px; padding:10px 12px; border-radius:var(--r-md); background:var(--c-bg); border:1px solid var(--c-border); min-width:0; }
.an-mini span { font-size:calc(12px * var(--k-fs)); color:var(--c-text-2); }
.an-mini b { font-size:calc(16px * var(--k-fs)); font-weight:700; color:var(--c-text); font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.an-nota { margin:10px 0 0; font-size:calc(12px * var(--k-fs)); color:var(--c-text-3); line-height:1.5; }
.an-vazio { margin:2px 0 6px; padding:14px; border:1px dashed var(--c-border-2); border-radius:var(--r); font-size:calc(12.6px * var(--k-fs)); color:var(--c-text-2); line-height:1.5; }
.an-tabela { width:100%; margin-top:12px; border-collapse:collapse; font-size:calc(12.6px * var(--k-fs)); font-variant-numeric:tabular-nums; }
.an-tabela th { padding:6px 4px; text-align:left; font-size:11.5px; font-weight:600; letter-spacing:.3px; text-transform:uppercase; color:var(--c-text-3); border-bottom:1px solid var(--c-border); }
.an-tabela td { padding:7px 4px; border-bottom:1px solid var(--c-border); color:var(--c-text); }
.an-tabela tr:last-child td { border-bottom:0; }
.an-tabela .num { text-align:right; }
.an-barras { display:grid; gap:10px; }
.an-barra { display:grid; grid-template-columns:minmax(96px, 130px) minmax(0, 1fr) auto; gap:10px; align-items:center; font-size:calc(12.9px * var(--k-fs)); color:var(--c-text); }
.an-barra + .an-barra { margin-top:10px; }
.an-barras .an-barra + .an-barra { margin-top:0; }
.an-barra .tr { height:8px; border-radius:8px; background:var(--c-hover); overflow:hidden; }
.an-barra .tr i { display:block; height:100%; border-radius:8px; background:var(--pc); }
.an-barra .n { text-align:right; font-variant-numeric:tabular-nums; color:var(--c-text-2); white-space:nowrap; }
.an-destaque { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.an-destaque b { font-size:calc(26px * var(--k-fs)); font-weight:700; letter-spacing:-.5px; color:var(--c-text); }
.an-destaque span { font-size:calc(12.6px * var(--k-fs)); color:var(--c-text-2); }
.an-linhas { display:grid; }
.an-linhas > div { display:flex; justify-content:space-between; gap:12px; padding:7px 0; border-top:1px solid var(--c-border); font-size:calc(12.9px * var(--k-fs)); }
.an-linhas span { color:var(--c-text-2); }
.an-linhas b { font-weight:600; color:var(--c-text); font-variant-numeric:tabular-nums; text-align:right; }
.an-linhas .ruim b { color:var(--c-warn); }
.an-rank { list-style:none; margin:0; padding:0; display:grid; counter-reset:an; }
.an-rank li { counter-increment:an; display:grid; grid-template-columns:22px minmax(0, 1fr) auto; grid-template-areas:"n t v" "n m v"; column-gap:8px; align-items:center;
  padding:8px 0; border-top:1px solid var(--c-border); }
.an-rank li:first-child { border-top:0; }
.an-rank li::before { content:counter(an); grid-area:n; font-size:12px; font-weight:700; color:var(--c-text-3); }
.an-rank .t { grid-area:t; font-size:calc(13.2px * var(--k-fs)); font-weight:600; color:var(--c-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.an-rank .m { grid-area:m; font-size:calc(12px * var(--k-fs)); color:var(--c-text-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.an-rank b { grid-area:v; font-size:calc(13.2px * var(--k-fs)); font-weight:700; color:var(--c-text); font-variant-numeric:tabular-nums; }
.an-rank li.ev { cursor:pointer; }
.an-rank li.ev:hover .t { text-decoration:underline; text-underline-offset:3px; }
@media (max-width:720px) {
  .an-mini { grid-template-columns:minmax(0, 1fr); }
  .an-mini > div { display:flex; justify-content:space-between; align-items:baseline; }
  .an-barra { grid-template-columns:86px minmax(0, 1fr) auto; }
  .an-comp .an-var { white-space:normal; }
}

/* ============================================================
   PERÍODO NUM BOTÃO SÓ + QUADROS DE FILTRO (Pop, PeriodoUI; 06/10)
   O botão do Período tem largura fixa: trocar Ano → Mês não mexe em nada
   em volta. Os quadros abrem embaixo do botão (computador) ou sobem de
   baixo como uma folha (celular).
   ============================================================ */
#periodo-bar { display:inline-flex; flex:none; margin:0; padding:0; gap:0; background:none; border:0; box-shadow:none; border-radius:0; }
.nv-pbtn { height:32px; display:inline-flex; align-items:center; gap:8px; padding:0 9px 0 11px; flex:none; border:1px solid var(--c-border); border-radius:var(--r-md);
  background:var(--c-surface); color:var(--c-text); font-family:var(--f-ui); font-size:calc(13px * var(--k-fs)); font-weight:500; white-space:nowrap; cursor:pointer;
  transition:border-color .14s ease-out, background .14s ease-out; }
.nv-pbtn:hover { border-color:var(--c-border-2); }
.nv-pbtn[aria-expanded="true"] { border-color:var(--c-accent); box-shadow:0 0 0 1px var(--c-accent); }
.nv-pbtn > .nv-ic { color:var(--c-text-2); }
.nv-pbtn .nv-pbtn-seta { margin-left:auto; color:var(--c-text-3); }
.nv-pbtn-txt { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.periodo-btn { width:150px; }
.nv-pbtn-n { min-width:18px; height:18px; padding:0 5px; border-radius:9px; display:inline-grid; place-items:center; background:var(--c-prim); color:var(--c-prim-text);
  font-size:11px; font-weight:700; font-variant-numeric:tabular-nums; }
.nv-pbtn-n:empty { display:none; }

.nv-pop { position:fixed; left:0; top:0; z-index:1450; width:300px; max-width:calc(100vw - 16px); padding:12px; display:grid; gap:12px; align-content:start;
  background:var(--c-raised); border:1px solid var(--c-border-2); border-radius:12px; box-shadow:var(--c-sombra); font-family:var(--f-ui);
  overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; }
.nv-pop[hidden] { display:none; }
.nv-pop h4 { margin:0 0 7px; font-size:11.5px; font-weight:600; letter-spacing:.4px; text-transform:uppercase; color:var(--c-text-3); }
.nv-pop select, .nv-pop input[type="date"] { width:100%; height:34px; min-width:0; padding:0 10px; border-radius:var(--r-md); border:1px solid var(--c-border-2);
  background:var(--c-bg); color:var(--c-text); font-family:var(--f-ui); font-size:calc(13.5px * var(--k-fs)); }
.nv-pop select { padding-right:28px; }
.nv-pop-rodape { display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:2px; }
.nv-pop-fundo { position:fixed; inset:0; z-index:1440; background:var(--c-overlay); }
.nv-pop-fundo[hidden] { display:none; }
#periodo-pop .periodo-tabs { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:2px; padding:2px; width:auto; border:1px solid var(--c-border); border-radius:9px; background:var(--c-bg); }
#periodo-pop .periodo-tab { flex:none; height:28px; padding:0 6px; border:0; border-radius:7px; background:none; box-shadow:none; color:var(--c-text-2);
  font-family:var(--f-ui); font-size:calc(12.6px * var(--k-fs)); font-weight:500; text-align:center; cursor:pointer; }
#periodo-pop .periodo-tab:hover { color:var(--c-text); }
#periodo-pop .periodo-tab.active { background:var(--c-hover); color:var(--c-text); font-weight:600; }
#periodo-pop .periodo-controls { display:grid; gap:10px; flex:none; width:auto; }
.periodo-campo { display:grid; gap:5px; min-width:0; }
.periodo-campo[hidden] { display:none; }
.periodo-campo > span { font-size:calc(12px * var(--k-fs)); font-weight:500; color:var(--c-text-2); }
.periodo-meses { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:4px; }
.periodo-meses[hidden] { display:none; }
.periodo-meses button { height:32px; border:0; border-radius:7px; background:none; color:var(--c-text-2); font-family:var(--f-ui); font-size:calc(12.6px * var(--k-fs)); cursor:pointer; }
.periodo-meses button:hover { background:var(--c-hover); color:var(--c-text); }
.periodo-meses button[aria-pressed="true"] { background:var(--c-prim); color:var(--c-prim-text); font-weight:600; }
#periodo-pop .periodo-custom { gap:8px; align-items:end; }
#periodo-pop .periodo-custom .periodo-campo { flex:1; }
@media (max-width:720px) {
  .nv-pop.folha { left:0 !important; right:0; top:auto !important; bottom:0; width:auto; max-width:none; max-height:82dvh; gap:14px;
    padding:18px 16px calc(18px + env(safe-area-inset-bottom, 0px)); border-radius:16px 16px 0 0; border-bottom:0; }
  .nv-pop select, .nv-pop input[type="date"] { height:42px; font-size:16px; }
  #periodo-pop .periodo-tab { height:36px; }
  .periodo-meses button { height:40px; }
  .periodo-btn { width:auto; min-width:118px; }
}

/* ============================================================
   BARRA DE FILTROS NUMA LINHA SÓ (Agenda, Orçamentos, Contratos; 06/10)
   ============================================================ */
.nv-ferramentas { display:flex; align-items:center; gap:8px; margin:0 0 12px; min-width:0; }
.nv-ferramentas .nv-busca-local { width:300px; height:32px; flex:0 1 300px; }
.nv-ferramentas .nv-flex { flex:1; }
.nv-ferramentas .nv-periodo-slot { display:inline-flex; flex:none; }
.nv-ferramentas .nv-periodo-slot:empty { display:none; }
.filtros-pop { width:340px; }
.filtros-pop .nv-chips { display:flex; flex-wrap:wrap; gap:6px; overflow:visible; }
.filtros-pop .nv-chip { height:28px; flex:none; }
.filtros-pop .periodo-campo > span { font-size:11.5px; font-weight:600; letter-spacing:.4px; text-transform:uppercase; color:var(--c-text-3); }
.nv-ativos { display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin:-4px 0 12px; }
.nv-ativos:empty { display:none; }
.nv-ativo { display:inline-flex; align-items:center; gap:7px; height:25px; padding:0 9px; border:0; border-radius:7px; background:var(--c-accent-soft);
  color:var(--c-accent-text); font-family:var(--f-ui); font-size:calc(12.1px * var(--k-fs)); font-weight:500; cursor:pointer; }
.nv-ativo span { font-size:10px; opacity:.85; }
.nv-ativo:hover { filter:brightness(1.12); }
.nv-ativos-limpar { margin-left:4px; font-size:calc(12.4px * var(--k-fs)); }

/* ============================================================
   AGENDA EM LISTA (opção A, escolhida em 06/10): uma linha por evento,
   com a data num quadradinho. O mesmo cartão vale no celular (empilhado).
   ============================================================ */
#agenda-cards { display:grid; grid-template-columns:minmax(0, 1fr); gap:18px; }
#agenda-cards .ac-grupo { display:grid; grid-template-columns:minmax(0, 1fr); gap:0; }
#agenda-cards .ac-grupo + .ac-grupo { margin-top:0; }
#agenda-cards .ac-mes { position:static; display:flex; align-items:baseline; gap:10px; margin:0 2px 8px; padding:0; background:none; border:0; }
#agenda-cards .ac-mes-nome { font-family:var(--f-ui); font-size:calc(14.8px * var(--k-fs)); font-weight:600; letter-spacing:0; color:var(--c-text); }
#agenda-cards .ac-grupo.atual .ac-mes-nome { color:var(--c-text); }
#agenda-cards .ac-mes-tag { height:19px; padding:0 7px; border-radius:999px; display:inline-flex; align-items:center; font-size:11.5px; font-weight:600; letter-spacing:0;
  text-transform:none; background:var(--c-accent-soft); color:var(--c-accent-text); }
#agenda-cards .ac-mes-info { margin-left:0; font-size:calc(12.4px * var(--k-fs)); color:var(--c-text-3); }
#agenda-cards .ac-ir-mes { justify-self:start; width:auto; min-height:30px; margin:0 0 -6px; padding:0 12px; border-radius:var(--r-md); border:1px solid var(--c-border);
  background:var(--c-surface); color:var(--c-accent-text); font-family:var(--f-ui); font-size:calc(12.6px * var(--k-fs)); font-weight:500; cursor:pointer; }
#agenda-cards .agenda-card { position:relative; display:grid; grid-template-columns:48px minmax(0, 1fr) 170px 196px 32px; gap:16px; align-items:center;
  margin:0; padding:10px 12px 10px 14px; border:1px solid var(--c-border); border-top-width:0; border-radius:0; background:var(--c-surface); box-shadow:none;
  cursor:pointer; transition:background .14s ease-out; }
#agenda-cards .ac-grupo > .agenda-card:first-of-type, #agenda-cards .ac-mes + .agenda-card { border-top-width:1px; border-radius:12px 12px 0 0; }
#agenda-cards .ac-grupo > .agenda-card:last-child { border-radius:0 0 12px 12px; }
#agenda-cards .ac-grupo > .agenda-card:first-of-type:last-child, #agenda-cards .ac-mes + .agenda-card:last-child { border-radius:12px; }
#agenda-cards .agenda-card:hover { background:var(--c-hover); }
#agenda-cards .agenda-card.inactive { opacity:.55; }
#agenda-cards .nv-data { width:48px; padding:5px 0 6px; }
#agenda-cards .nv-data .d { font-size:18px; }
#agenda-cards .nv-data.passou { opacity:.75; }
#agenda-cards .ac-corpo { min-width:0; }
#agenda-cards .ac-nome { margin:0; padding:0; font-size:calc(14px * var(--k-fs)); font-weight:600; line-height:1.35; color:var(--c-text); overflow-wrap:anywhere; }
#agenda-cards .ac-info { margin-top:3px; font-size:calc(12.4px * var(--k-fs)); line-height:1.4; color:var(--c-text-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#agenda-cards .ac-hora, #agenda-cards .ac-local { display:inline; margin:0; padding:0; font-size:inherit; color:inherit; white-space:inherit; }
#agenda-cards .ac-sep { color:var(--c-text-3); }
#agenda-cards .ac-valores { margin:0; text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--c-text); }
#agenda-cards .ac-valores b { display:block; font-size:calc(14.5px * var(--k-fs)); font-weight:700; letter-spacing:-.2px; }
#agenda-cards .ac-valores small { display:block; margin-top:1px; font-size:calc(11.8px * var(--k-fs)); font-weight:400; color:var(--c-text-3); }
#agenda-cards .ac-situacao { display:flex; align-items:center; min-width:0; }
#agenda-cards .ac-situacao .nv-pill { display:none; }
#agenda-cards .ac-situacao .status-sel { height:24px; max-width:100%; }
#agenda-cards .agenda-card .ac-menu { position:static; justify-self:end; }
#agenda-cards .agenda-card .ac-menu > summary.orc-menu-sum { width:30px; height:30px; margin:0; font-size:16px; }
#agenda-cards .agenda-vazio { margin:0; }
.skel-card .ac-corpo { display:grid; }

@media (max-width:1100px) {
  #agenda-cards .agenda-card { grid-template-columns:48px minmax(0, 1fr) 140px 170px 32px; gap:12px; }
}
@media (max-width:720px) {
  .nv-ferramentas { flex-wrap:wrap; gap:8px; }
  .nv-ferramentas .nv-busca-local { flex:1 1 100%; width:auto; height:42px; }
  .nv-ferramentas .nv-pbtn { height:40px; }
  .nv-ferramentas .nv-flex { display:none; }
  .nv-ferramentas .evt-view-toggle { margin-left:auto; }
  .filtros-pop .nv-chip { height:36px; }
  #agenda-cards { gap:16px; }
  #agenda-cards .ac-mes { position:sticky; top:var(--topbar-h); z-index:5; margin:0 calc(-1 * var(--pag-d)) 8px calc(-1 * var(--pag-e)); padding:9px var(--pag-d) 9px var(--pag-e); background:var(--c-bg); border-bottom:1px solid var(--c-border); align-items:center; }
  #agenda-cards .ac-mes-info { margin-left:auto; }
  #agenda-cards .ac-ir-mes { width:100%; min-height:42px; margin:0; justify-content:center; }
  #agenda-cards .ac-grupo { gap:8px; }
  #agenda-cards .agenda-card, #agenda-cards .ac-grupo > .agenda-card:first-of-type, #agenda-cards .ac-mes + .agenda-card,
  #agenda-cards .ac-grupo > .agenda-card:last-child, #agenda-cards .ac-grupo > .agenda-card:first-of-type:last-child, #agenda-cards .ac-mes + .agenda-card:last-child {
    grid-template-columns:44px minmax(0, 1fr) auto; grid-template-areas:"data corpo corpo" "data sit valor"; gap:6px 11px; align-items:start;
    padding:11px 12px; border-top-width:1px; border-radius:var(--r); }
  #agenda-cards .agenda-card > .nv-data { grid-area:data; width:44px; }
  #agenda-cards .ac-corpo { grid-area:corpo; padding-right:34px; }
  #agenda-cards .ac-situacao { grid-area:sit; align-self:center; }
  #agenda-cards .ac-situacao .nv-pill { display:inline-flex; }
  #agenda-cards .ac-situacao .status-sel { display:none; }
  #agenda-cards .ac-valores { grid-area:valor; align-self:center; }
  #agenda-cards .ac-valores small { display:none; }
  #agenda-cards .ac-info { white-space:normal; }
  #agenda-cards .ac-hora, #agenda-cards .ac-local { display:block; }
  #agenda-cards .ac-sep { display:none; }
  #agenda-cards .agenda-card .ac-menu { position:absolute; top:2px; right:2px; }
  #agenda-cards .agenda-card .ac-menu > summary.orc-menu-sum { width:44px; height:44px; font-size:20px; }
  #agenda-cards .agenda-card:hover { background:var(--c-surface); }
  #agenda-cards .agenda-card:active { background:var(--c-hover); }
}
.nv-ferramentas .evt-view-toggle { margin:0; align-self:center; }
#agenda-cards .ac-mes-info { font-weight:400; }
.nv-pop { grid-template-columns:minmax(0, 1fr); }
.periodo-pop { width:320px; }
#agenda-filtros-pop .nv-chips { display:flex; flex-wrap:wrap; gap:6px; overflow:visible; margin:0; padding:0; }
.nv-pop-rodape > :last-child { margin-left:auto; }
@media (max-width:720px) {
  /* "+ Novo" ao lado do título (antes ficava sozinho numa linha) */
  :is(#view-eventos, #view-orcamentos) .nv-cabeca { flex-wrap:nowrap; align-items:flex-start; }
  :is(#view-eventos, #view-orcamentos) .nv-cabeca > div:first-child { flex:1; min-width:0; }
  :is(#view-eventos, #view-orcamentos) .nv-cabeca-acoes { width:auto; margin-left:auto; flex:none; }
  /* Lista/Calendário só com o ícone, na mesma linha do Período e dos Filtros */
  #view-eventos .nv-ferramentas .evt-view-btn { font-size:0; gap:0; padding:0 11px; height:36px; }
  #view-eventos .nv-ferramentas .evt-view-btn .nv-ic { width:17px; height:17px; }
  #view-eventos .nv-ferramentas .evt-view-toggle.nv-seg { flex:none; margin-left:auto; height:40px; }
}

/* Busca geral do topo: um botão pequeno ("Buscar tudo ⌘K"), para não
   competir com a busca de cada tela (pedido do Renato em 06/10) */
@media (min-width:721px) {
  .nv-topo .nv-busca-campo { width:auto; margin:0 0 0 auto; height:30px; padding:0 7px 0 10px; gap:7px; background:none; }
  .nv-topo .nv-busca-campo:hover { background:var(--c-hover); color:var(--c-text-2); }
  .nv-topo .nv-busca-txt { flex:none; }
}

/* ============================================================
   PROPOSTAS E CONTRATOS: UM CARTÃO POR CLIENTE (08/10, pedido do Renato:
   "cada cliente vai ter um cartão que vai ocupar a tela toda; dentro, na
   esquerda as propostas e na direita os contratos"): os cartões um embaixo
   do outro; na cabeça, "+ Novo" (Nova proposta · Novo contrato); dentro,
   duas colunas (uma embaixo da outra no celular) com as ilhas menores
   (_DocsUI._ilhaHtml / _docHtml).
   ============================================================ */
#view-orcamentos:not([data-sub="orcamentos"]) :is(.doc-sit-btn, #orc-ativos) { display:none; }
.pc-fundo { padding:16px; border-radius:20px; background:var(--c-bg); }
.pc-lista { display:grid; gap:16px; }
.pc-novo, .orc-novo-menu { flex:none; position:relative; }
.pc-novo > summary, .orc-novo-menu > summary { list-style:none; cursor:pointer; gap:6px; }
.pc-novo > summary::-webkit-details-marker, .orc-novo-menu > summary::-webkit-details-marker { display:none; }
/* fechado, o menu não ocupa lugar (no celular o "+ Novo" do cartão fica à esquerda e o menu, ainda invisível, sairia da tela) */
:is(.pc-novo, .orc-novo-menu):not([open]) > .orc-menu-pop { display:none; }
/* Propostas e contratos · entrega 2 ("P2"): os documentos do cliente em grade (3 por linha; 2 em tela média; 1 no celular) e a trilha de 5 passos */
.pc-grade { display:grid; gap:12px; grid-template-columns:repeat(3, minmax(0, 1fr)); align-items:stretch; }
@media (max-width:1180px) { .pc-grade { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:720px) { .pc-grade { grid-template-columns:minmax(0, 1fr); gap:10px; } }
.pc-grade > .pc-doc { display:flex; flex-direction:column; }
.pc-grade > .pc-doc .pc-pe { margin-top:auto; }
.pc-v { font-size:10.5px; font-weight:700; color:var(--c-text-3); border:1px solid var(--c-border-2); border-radius:6px; padding:0 4px; line-height:16px; margin-left:6px; }
.pc-tri { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:3px; margin:2px 0 4px; }
.pc-tri > div { display:grid; gap:4px; font-size:10.5px; line-height:1.25; color:var(--c-text-3); text-align:center; min-width:0; }
.pc-tri > div > span { display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }   /* as reticências só aparecem numa caixa comum (não na grade) */
.pc-tri i { height:4px; border-radius:4px; background:var(--c-border-2); }
.pc-tri .f i { background:var(--c-ok); }
.pc-tri .a { color:var(--c-text); font-weight:600; }
.pc-tri .a i { background:var(--c-warn); }
.pc-tri .r { color:var(--c-bad); font-weight:600; }
.pc-tri .r i { background:var(--c-bad); }
.pc-tri .p { opacity:.45; }
.pc-tri .p i { background:transparent; border:1px dashed var(--c-border-2); height:2px; }
/* o quadro "Situação" quebra a linha (antes rolava de lado) */
#orc-sit-pop .nv-chips { display:flex; flex-wrap:wrap; overflow:visible; margin:0; padding:0; }
.pc-ilha { display:grid; grid-template-columns:minmax(0, 1fr); gap:12px; min-width:0; padding:16px; border-radius:18px; background:var(--c-surface); border:1px solid var(--c-border); }
.pc-cab { display:flex; align-items:center; gap:12px; min-width:0; }
.pc-av { flex:none; width:42px; height:42px; border-radius:50%; display:grid; place-items:center; font-size:14px; font-weight:700; letter-spacing:.4px; color:#fff;
  background:linear-gradient(135deg, hsl(var(--h, 210) 70% 55%), hsl(calc(var(--h, 210) + 35) 75% 40%)); }
.pc-quem { flex:1; min-width:0; }
.pc-quem b { display:block; font-size:calc(15.5px * var(--k-fs)); font-weight:650; color:var(--c-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pc-quem small, .pc-tot small { display:block; font-size:calc(12px * var(--k-fs)); color:var(--c-text-3); }
.pc-tot { flex:none; text-align:right; }
.pc-tot b { display:block; font-size:calc(17px * var(--k-fs)); font-weight:700; letter-spacing:-.2px; color:var(--c-text); }
.pc-doc { display:grid; gap:7px; min-width:0; padding:12px 14px; border-radius:14px; background:var(--c-bg); border:1px solid var(--c-border); cursor:pointer;
  transition:border-color .14s ease-out; }
.pc-doc:hover { border-color:var(--c-border-2); }
.pc-doc:focus-visible { outline:2px solid var(--c-accent); outline-offset:2px; }
.pc-doc.inactive { opacity:.6; }
.pc-doc-topo { display:flex; align-items:center; gap:8px; min-width:0; min-height:28px; }
.pc-vao { flex:1; }
.pc-doc-topo .ac-menu { position:static; flex:none; }
.pc-ev { font-size:calc(13.5px * var(--k-fs)); font-weight:650; line-height:1.35; color:var(--c-text); overflow-wrap:anywhere; }
.pc-info { font-size:calc(12px * var(--k-fs)); line-height:1.45; color:var(--c-text-3); overflow-wrap:anywhere; }
.pc-info i { font-style:normal; }
.pc-et.warn { color:var(--c-warn); } .pc-et.bad { color:var(--c-bad); } .pc-et.ok { color:var(--c-ok); }
.pc-pe { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; min-width:0; }
.pc-val { font-size:calc(15px * var(--k-fs)); font-weight:700; color:var(--c-text); }
.pc-acao { flex:none; gap:6px; white-space:nowrap; }
.pc-vazio-acoes { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
@media (max-width:720px) {
  .pc-fundo { padding:10px; border-radius:16px; }
  .pc-lista { gap:10px; }
  .pc-ilha { padding:12px; gap:10px; border-radius:16px; }
  .pc-doc { padding:12px; }
  #sub-orcamentos .pc-acao.nv-btn { height:var(--h-cel, 36px); }
  #sub-orcamentos .pc-doc .ac-menu > summary.orc-menu-sum { width:var(--h-cel, 36px); height:var(--h-cel, 36px); font-size:18px; }
  html .pc-novo > summary.nv-btn, html .orc-novo-menu > summary.nv-btn { height:var(--h-cel, 36px); }
  .pc-cab { flex-wrap:wrap; } .pc-cab .pc-quem { flex:1 1 140px; }
}
@media (max-width:720px) {
  /* alvos de toque de 44px na barra de filtros */
  .nv-ferramentas .nv-pbtn { height:44px; }
  .nv-ferramentas .nv-busca-local { height:44px; }
  #view-eventos .nv-ferramentas .evt-view-toggle.nv-seg { height:44px; }
  #view-eventos .nv-ferramentas .evt-view-btn { height:auto; }
}

/* ============================================================
   COMISSÕES: o que sobrou da tela A+ (06/10). Os cartões de hoje ficam no fim
   do arquivo ("COMISSÕES EM CARTÕES GRANDES POR PESSOA", 07/10).
   ============================================================ */
#view-comissoes .cx-empty.nv-vazio { display:grid; gap:4px; justify-items:center; }

@media (max-width:720px) {
  #view-comissoes .nv-ferramentas .nv-conta { display:none; }
}

/* O espaço que empurra os botões do rodapé para a direita (usado por várias janelas) */
.pp-vao { flex:1; }

/* ============================================================
   NOTIFICAÇÕES (refeitas em 06/10): página Pendências, mensagem pronta e o aviso no
   canto (a gaveta do sino saiu em 08/10: ver "O SINO SÓ COM NOTIFICAÇÕES", no fim).
   ============================================================ */
.nf-ic { flex:none; width:34px; height:34px; border-radius:10px; display:grid; place-items:center; color:var(--nc); background:color-mix(in srgb, var(--nc) 14%, transparent); }
.nf-corpo { flex:1; min-width:0; display:grid; gap:3px; }
.nf-tit { flex:1; min-width:0; font-size:calc(13.6px * var(--k-fs)); font-weight:650; color:var(--c-text); line-height:1.35; }
.nf-sub { font-size:calc(12.6px * var(--k-fs)); color:var(--c-text-2); line-height:1.45; }
.nf-acoes { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:7px; }
.nf-acoes .nv-btn .nv-ic { margin-right:2px; }
.nf-mais { width:30px; height:28px; border:0; border-radius:var(--r-md); background:none; color:var(--c-text-2); font-size:16px; line-height:1; cursor:pointer; }
.nf-mais:hover, .nf-mais:focus-visible { background:var(--c-hover); color:var(--c-text); }
.notif-menu-pop { display:flex; flex-direction:column; }
.notif-menu-pop hr { width:100%; height:1px; margin:4px 0; border:0; background:var(--c-border); }

/* Página Pendências */
.tab-link:not(.active) .nv-conta-alerta:not(:empty) { padding:1px 6px; border-radius:9px; background:color-mix(in srgb, var(--c-bad) 16%, transparent); color:var(--c-bad); }

.pd-val { font-size:calc(13.6px * var(--k-fs)); font-weight:700; color:var(--c-text); font-variant-numeric:tabular-nums; white-space:nowrap; }

/* Mensagem pronta */
#modal-msg-pronta .modal { width:min(600px, calc(100vw - 32px)); max-height:calc(100dvh - 40px); display:flex; flex-direction:column; }
#modal-msg-pronta .modal-head { align-items:flex-start; }
.mp-cab { display:flex; gap:12px; align-items:center; min-width:0; }
.mp-cab h3 { margin:0; }
.mp-corpo { flex:1; overflow-y:auto; overscroll-behavior:contain; display:grid; gap:10px; grid-template-columns:minmax(0, 1fr); }
.mp-rot { font-size:11.5px; font-weight:650; letter-spacing:.06em; text-transform:uppercase; color:var(--c-text-3); }
.mp-rot small { text-transform:none; letter-spacing:0; font-weight:500; }
#mp-msg { width:100%; min-height:220px; padding:12px 14px; border:1px solid var(--c-border-2); border-radius:var(--r); background:var(--c-bg); color:var(--c-text);
  font-family:var(--f-ui); font-size:13.5px; line-height:1.55; resize:vertical; }
.mp-junto { display:grid; gap:6px; }
.mp-junto[hidden] { display:none; }
.mp-chips { display:flex; flex-wrap:wrap; gap:6px; }
.mp-chip { display:inline-flex; align-items:center; gap:7px; min-height:32px; padding:4px 11px; border:1px solid var(--c-border-2); border-radius:9px; background:var(--c-raised); color:var(--c-text);
  font-family:var(--f-ui); font-size:12.6px; text-decoration:none; cursor:pointer; }
.mp-chip:hover { border-color:var(--c-accent); }
.mp-chip span { color:var(--c-text-3); }
.mp-aviso { font-size:12.4px; color:var(--c-warn); }
.mp-dica { flex-basis:100%; font-size:12px; line-height:1.4; color:var(--c-text-3); }
.mp-tel { display:grid; gap:6px; }
.mp-tel input { height:36px; padding:0 11px; border:1px solid var(--c-border-2); border-radius:var(--r-md); background:var(--c-bg); color:var(--c-text); font-family:var(--f-ui); font-size:14px; }
#modal-msg-pronta .mp-rodape { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.mp-nota { max-width:230px; font-size:12px; line-height:1.4; color:var(--c-text-3); }
.mp-nota:empty { display:none; }
#modal-msg-pronta .mp-rodape .nv-btn { height:34px; }
#modal-msg-pronta .mp-rodape .nv-btn[hidden] { display:none; }

/* Aviso importante novo, no canto (fica até OK/Depois/✕) */
.nf-canto { position:fixed; top:calc(var(--topbar-h, 44px) + 12px); right:16px; z-index:400; display:grid; gap:8px; width:min(380px, calc(100vw - 32px)); pointer-events:none; }
.nf-canto-item { position:relative; display:flex; gap:12px; padding:12px 34px 12px 12px; border:1px solid var(--c-border-2); border-left:3px solid var(--c-warn); border-radius:var(--r);
  background:var(--c-raised); box-shadow:var(--c-sombra); pointer-events:auto; animation:nfEntra .2s ease-out; transition:opacity .18s ease-out, transform .18s ease-out; }
.nf-canto-item.saindo { opacity:0; transform:translateX(16px); }
.nf-canto-x { position:absolute; top:8px; right:8px; width:24px; height:24px; border:0; border-radius:6px; background:none; color:var(--c-text-3); cursor:pointer; }
.nf-canto-x:hover { background:var(--c-hover); color:var(--c-text); }
@keyframes nfEntra { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:none; } }
/* 14/10 (pedidos do Renato ~16h): em cima, à direita, EMPILHADOS — o mais antigo em cima e os que chegam depois embaixo
   (nenhum cobre o outro); com muitos, a pilha rola por dentro sem passar da tela */
/* 14/10 (pedido do Renato): os cartões do canto ficam ATRÁS das janelas (.modal-overlay, 500) e dos menus; só na página */
.nf-canto { max-height:calc(100dvh - var(--topbar-h, 44px) - 24px); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none; }
.nf-canto::-webkit-scrollbar { display:none; }
.nf-canto-item { padding:10px 34px 10px 10px; gap:10px; }
.nf-canto-item .nf-sub { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
@media (prefers-reduced-motion:reduce) { .nf-canto-item { animation:none; } }

@media (max-width:720px) {
  .nf-acoes .nv-btn { height:36px; }
  .nf-mais { height:36px; width:36px; }

  #modal-msg-pronta .modal { width:100%; max-height:calc(100dvh - var(--topo-seguro) - 32px); }
  #modal-msg-pronta .mp-rodape { flex-direction:row; }
  #modal-msg-pronta .mp-rodape .pp-vao { display:none; }
  #modal-msg-pronta .mp-rodape .nv-btn { height:44px; flex:1 1 auto; justify-content:center; font-size:14px; }
  #modal-msg-pronta .mp-rodape .primario { flex:1 1 100%; order:-1; }
  .mp-nota { max-width:none; flex-basis:100%; order:9; }
  .nf-canto { top:calc(var(--topbar-h, 44px) + 8px); right:12px; left:12px; width:auto; }
}

/* ============================================================
   MENUS ⋯ IGUAIS AOS DO APP DE ESTUDOS (pedido do Renato em 06/10)
   Todos: agenda, cartões, orçamentos/contratos, "⋯ Mais" das janelas,
   comissões e notificações. Ícone + nome que diz o que faz, letra 12,1px,
   linhas de 8px 7px, cantos 7px, caixa de 210–300px com sombra e um
   aparecer suave. Vence as regras antigas (styles.css/painel.css) de
   propósito, para ficarem todos iguais.
   ============================================================ */
html .orc-menu-pop, html .notif-menu-pop,
html :is(#view-eventos, #view-orcamentos, #view-comissoes) .ac-menu .orc-menu-pop,
html .nv-janela .det-mais .orc-menu-pop {
  min-width:210px; max-width:min(92vw, 300px); padding:6px; gap:1px; display:grid; align-content:start;
  border-radius:10px; background:var(--c-raised); border:1px solid var(--c-border-2);
  box-shadow:0 14px 40px rgba(0,0,0,.5); font-family:var(--f-ui); animation:nvMenuAparece .1s ease-out;
}
html[data-modo="claro"] .orc-menu-pop, html[data-modo="claro"] .notif-menu-pop { box-shadow:0 14px 40px rgba(20,30,45,.18); }
@keyframes nvMenuAparece { from { opacity:0; } to { opacity:1; } }
@media (prefers-reduced-motion:reduce) { html .orc-menu-pop, html .notif-menu-pop { animation:none; } }
html .orc-menu-pop .orc-menu-grupo { display:grid; gap:1px; }
html .orc-menu-pop .orc-menu-grupo[hidden] { display:none; }
html .orc-menu-pop button, html .notif-menu-pop button,
html :is(#view-eventos, #view-orcamentos, #view-comissoes) .ac-menu .orc-menu-pop button,
html :is(#view-eventos, #view-orcamentos) .agenda-card .ac-menu .orc-menu-pop button,
html .nv-janela .det-mais .orc-menu-pop button, html .ac-menu .orc-menu-pop button, html #modal-detalhes .det-mais .orc-menu-pop button {
  display:flex; align-items:center; gap:9px; width:100%; min-height:0; height:auto; padding:8px 7px; border:0; border-radius:7px;
  background:none; color:var(--c-text-2); font-family:var(--f-ui); font-size:12.1px; font-weight:400; line-height:1.3; text-align:left; cursor:pointer;
}
html .orc-menu-pop button .nv-ic, html .notif-menu-pop button .nv-ic { flex:none; width:13px; height:13px; }
html .orc-menu-pop button span, html .notif-menu-pop button span { min-width:0; }
html .orc-menu-pop button:hover, html .orc-menu-pop button:focus-visible,
html .notif-menu-pop button:hover, html .notif-menu-pop button:focus-visible { background:var(--c-hover); color:var(--c-text); outline:none; }
html .orc-menu-pop button.danger, html .notif-menu-pop button.danger { color:var(--c-bad); }
html .orc-menu-pop button.danger:hover, html .orc-menu-pop button.danger:focus-visible,
html .notif-menu-pop button.danger:hover, html .notif-menu-pop button.danger:focus-visible { background:var(--c-bad-soft); color:var(--c-bad); }
html .orc-menu-pop hr, html .notif-menu-pop hr { width:auto; height:0; margin:4px 0; border:0; border-top:1px solid var(--c-border); background:none; }
html .orc-menu-mais::after { content:""; flex:none; box-sizing:border-box; margin:0 4px 0 auto; padding:0; width:7px; height:7px; border-right:1.6px solid currentColor; border-top:1.6px solid currentColor; transform:rotate(45deg); opacity:.7; font-size:0; }
html .orc-menu-voltar::before { content:none; }
html .orc-menu-voltar { color:var(--c-text-2) !important; }
.nv-menu-sec { padding:6px 7px 2px; font-size:11px; letter-spacing:1px; text-transform:uppercase; color:var(--c-text-3); }
/* Celular: as mesmas linhas, com 44px para o dedo */
@media (max-width:720px), (pointer:coarse) {
  html .orc-menu-pop button, html .notif-menu-pop button,
  html :is(#view-eventos, #view-orcamentos, #view-comissoes) .ac-menu .orc-menu-pop button,
  html :is(#view-eventos, #view-orcamentos) .agenda-card .ac-menu .orc-menu-pop button,
  html .nv-janela .det-mais .orc-menu-pop button { min-height:44px; font-size:13.5px; }
}

/* Botões das linhas (antes eram links sublinhados): pequenos, com borda e ícone, como no app de estudos */

.nv-cartao-hd .nv-ver-agenda { margin-left:auto; align-self:center; gap:6px; }
.ds-estado a.nv-btn { margin-left:0; align-self:center; flex:none; gap:6px; text-decoration:none; }

/* Orçamentos › abas sem "tremer" (06/10): todas com a mesma letra (só a cor e o
   traço mudam) e o botão "Novo …" com a mesma largura nas três abas. */
#view-orcamentos .nv-abas .subtab, #view-orcamentos .nv-abas .subtab.active { font-weight:600; }
#view-orcamentos #btn-new-orc { min-width:172px; justify-content:center; }
@media (max-width:720px) { #view-orcamentos #btn-new-orc { min-width:0; } }
/* A lista das abas não "pula" mais ao trocar (o fadeIn deslocava 8px e piscava) */
#view-orcamentos .subview { animation:none; }
/* Trocar de tela: o mesmo aparecer do app de estudos (0,16 s, 6px), não 0,4 s */
@keyframes nvTela { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
.view.nv { animation:nvTela .16s ease-out; }
@media (prefers-reduced-motion:reduce) { .view.nv { animation:none; } }

/* ============================================================
   CAIXAS DE TEXTO (06/10): sem o puxador do canto e sem o quadradinho ao lado
   da barra de rolagem; "Mostrar o texto todo" (padrão) cresce até caber tudo;
   "Tamanho fixo" tem o botão "Ver o texto todo".
   ============================================================ */
textarea { resize:none; scrollbar-width:thin; scrollbar-color:var(--c-border-2) transparent; }
textarea::-webkit-scrollbar { width:10px; height:10px; }
textarea::-webkit-scrollbar-thumb { background:var(--c-border-2); border-radius:10px; border:3px solid transparent; background-clip:content-box; }
textarea::-webkit-scrollbar-track, textarea::-webkit-scrollbar-corner, textarea::-webkit-resizer { background:transparent; }
html:not([data-caixas="fixa"]) textarea:not([data-sem-ajuste]), textarea.nv-caixa-aberta { overflow-y:hidden; }
.nv-caixa-mais { display:inline-flex; align-items:center; gap:6px; justify-self:start; align-self:flex-start; margin-top:6px; padding:3px 9px; height:24px;
  border:1px solid var(--c-border); border-radius:8px; background:transparent; color:var(--c-text-2); font-family:var(--f-ui); font-size:12px; font-weight:600; cursor:pointer; }
.nv-caixa-mais:hover { background:var(--c-hover); color:var(--c-text); }
/* desenhinho das opções em Aparência */
.ap-caixa { display:grid; gap:4px; width:100%; height:46px; padding:7px 8px; margin-bottom:8px; border:1px solid var(--c-border-2); border-radius:7px; background:var(--c-bg); align-content:start; }
.ap-caixa i { display:block; height:4px; border-radius:3px; background:var(--c-border-2); }
.ap-caixa i:nth-child(2) { width:85%; } .ap-caixa i:nth-child(3) { width:60%; }
.ap-caixa-fixa { height:30px; overflow:hidden; position:relative; }
.ap-caixa-fixa::after { content:''; position:absolute; right:3px; top:5px; width:3px; height:12px; border-radius:3px; background:var(--c-text-3); }

/* ============================================================
   COMISSÕES, PARTE 2 (06/10): a janela de detalhes da comissão (#modal-cx-det,
   ComissaoDetalhes) e o pagamento em 3 passos redesenhado (opção A).
   ============================================================ */

/* ---- Janela: detalhes da comissão ---- */
#modal-cx-det .cxd-modal { width:min(640px, calc(100vw - 32px)); max-height:calc(100dvh - 40px); display:flex; flex-direction:column; }
.cxd-cab { display:flex; align-items:center; gap:12px; }
.cxd-ico { flex:none; width:40px; height:40px; border-radius:10px; display:grid; place-items:center; color:var(--pc, var(--c-accent-text));
  background:color-mix(in srgb, var(--pc, var(--c-accent)) 15%, transparent); }
.cxd-cab-txt { flex:1; min-width:0; }
.cxd-tit-linha { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; min-width:0; }
.nv-janela .cxd-tit-linha h3 { margin:0; overflow-wrap:anywhere; }
.cxd-tit-linha .cx-pill { color:var(--pc); background:color-mix(in srgb, var(--pc) 14%, transparent); }
.cxd-sub, .pp-cabeca .pp-sub { margin:2px 0 0; font-size:calc(12.9px * var(--k-fs)); color:var(--c-text-2); }
#modal-cx-det .cxd-corpo { flex:1; overflow-y:auto; overscroll-behavior:contain; display:flex; flex-direction:column; gap:14px; padding:18px 22px; }
#modal-cx-det .cxd-corpo > * { flex:none; }
.cxd-mini3 { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; }
.cxd-mini3 > div { display:grid; gap:2px; padding:10px 12px; border:1px solid var(--c-border); border-radius:var(--r); background:var(--c-bg); min-width:0; }
.cxd-mini3 span { font-size:calc(12.2px * var(--k-fs)); color:var(--c-text-2); }
.cxd-mini3 b { font-size:calc(16px * var(--k-fs)); font-weight:700; color:var(--c-text); font-variant-numeric:tabular-nums; }
.cxd-mini3 b.cxd-ok { color:var(--c-ok); } .cxd-mini3 b.cxd-info { color:var(--c-info); }
.cxd-mini3 small { font-size:calc(11.8px * var(--k-fs)); color:var(--c-text-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cxd-bloco { border:1px solid var(--c-border); border-radius:var(--r); overflow:hidden; }
.cxd-bloco > header { display:flex; align-items:center; gap:8px; padding:9px 14px; background:color-mix(in srgb, var(--c-text) 3%, transparent); border-bottom:1px solid var(--c-border); color:var(--c-text-2); }
.cxd-bloco h4 { margin:0; font-size:calc(11.6px * var(--k-fs)); font-weight:650; letter-spacing:.06em; text-transform:uppercase; color:var(--c-text-2); }
.cxd-link { margin-left:auto; padding:2px 4px; border:0; background:none; color:var(--c-accent-text); font-family:var(--f-ui); font-size:calc(12.6px * var(--k-fs)); font-weight:600; cursor:pointer; border-radius:6px; }
.cxd-link:hover { background:var(--c-hover); }
.cxd-link:focus-visible { outline:2px solid var(--c-accent); outline-offset:1px; }
.cxd-lin { display:flex; justify-content:space-between; gap:16px; padding:8px 14px; border-top:1px solid var(--c-border); font-size:calc(12.9px * var(--k-fs)); }
.cxd-bloco > header + .cxd-lin { border-top:0; }
.cxd-lin span { color:var(--c-text-2); white-space:nowrap; }
.cxd-lin b { font-weight:500; color:var(--c-text); text-align:right; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
.cxd-falta { color:var(--c-warn); font-weight:500; }
.cxd-nota { margin:0; padding:9px 14px; font-size:calc(12.4px * var(--k-fs)); color:var(--c-text-3); }
.cxd-comp { display:flex; align-items:center; gap:8px; padding:8px 10px 8px 14px; border-top:1px solid var(--c-border); color:var(--c-text-2); }
.cxd-comp-nome { flex:1; min-width:0; font-size:calc(12.9px * var(--k-fs)); color:var(--c-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cxd-comp .nv-btn { gap:5px; }
.cxd-hist { list-style:none; margin:0; padding:6px 14px 8px; }
.cxd-hist li { position:relative; display:grid; gap:1px; padding:6px 0 6px 16px; }
.cxd-hist li::before { content:''; position:absolute; left:2px; top:12px; width:6px; height:6px; border-radius:50%; background:var(--c-text-3); }
.cxd-hist li:first-child::before { background:var(--c-accent); }
.cxd-hist li + li::after { content:''; position:absolute; left:4.5px; top:-6px; height:16px; width:1px; background:var(--c-border-2); }
.cxd-hist b { font-size:calc(12.9px * var(--k-fs)); font-weight:600; color:var(--c-text); }
.cxd-hist span { font-size:calc(12px * var(--k-fs)); color:var(--c-text-3); }
.cxd-hist-mais { margin:0 0 8px 14px; }
#modal-cx-det .cxd-rodape { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
#modal-cx-det .cxd-rodape > .nv-btn { height:34px; gap:6px; }
@media (max-width:720px) {
  #modal-cx-det .cxd-corpo { padding:14px 16px; }
  .cxd-mini3 { grid-template-columns:minmax(0, 1fr); }
  .cxd-mini3 > div { grid-template-columns:auto 1fr; align-items:baseline; column-gap:10px; }
  .cxd-mini3 b { justify-self:end; } .cxd-mini3 small { grid-column:1 / -1; }
  #modal-cx-det .cxd-rodape { flex-direction:row; }
  #modal-cx-det .cxd-rodape > .nv-btn { height:44px; flex:1 1 auto; justify-content:center; }
  #modal-cx-det .cxd-rodape > .nv-btn.primario { flex:1 1 100%; order:-1; }
  #modal-cx-det .cxd-rodape .det-mais > summary.btn { height:44px; }
  #modal-cx-det .cxd-para { display:none; }
  #modal-cx-det .cxd-rodape .pp-vao { display:none; }
}

/* chave liga/desliga (no lugar da caixinha) */
.nv-chave-lig { position:relative; align-items:center; }
.nv-chave-lig > input { position:absolute; opacity:0; width:1px; height:1px; }
.nv-chave-trilho { flex:none; position:relative; width:34px; height:20px; border-radius:999px; background:var(--c-border-2); transition:background .14s ease-out; }
.nv-chave-trilho::after { content:''; position:absolute; top:3px; left:3px; width:14px; height:14px; border-radius:50%; background:var(--c-text); transition:transform .14s ease-out; }
.nv-chave-lig > input:checked + .nv-chave-trilho { background:var(--c-accent); }
.nv-chave-lig > input:checked + .nv-chave-trilho::after { transform:translateX(14px); background:var(--c-prim-text, #fff); }
.nv-chave-lig > input:focus-visible + .nv-chave-trilho { outline:2px solid var(--c-accent); outline-offset:2px; }

/* ============================================================
   PENDÊNCIAS (06/10): dois jeitos, escolhidos em Configurações › Aparência ›
   Jeito das telas (html[data-pendencias]).
   A) lista (padrão): 4 números que filtram + uma lista por data ou assunto.
   B) cartões: um cartão por assunto.
   ============================================================ */

.pd-gn { display:inline-grid; place-items:center; min-width:22px; height:20px; padding:0 7px; border-radius:999px; font-size:11.5px; font-weight:700;
  color:var(--c-text-2); background:var(--c-hover); }
.pd-gn.pd-t-bad { color:var(--c-bad); background:color-mix(in srgb, var(--c-bad) 15%, transparent); }
.pd-gn.pd-t-warn { color:var(--c-warn); background:color-mix(in srgb, var(--c-warn) 15%, transparent); }

.pd-gacao { margin-left:auto; gap:6px; }

.pd-t-bad { --pc:var(--c-bad); } .pd-t-warn { --pc:var(--c-warn); } .pd-t-info { --pc:var(--c-info); } .pd-t-mute { --pc:var(--c-text-3); }
#pd-lista .pd-val { text-align:right; }

#pd-lista .nf-mais { width:30px; height:30px; }
.pd-vazio-ic { width:44px; height:44px; border-radius:12px; display:grid; place-items:center; color:var(--c-ok); background:color-mix(in srgb, var(--c-ok) 14%, transparent); margin-bottom:6px; }
.nv-vazio.grande { display:grid; justify-items:center; gap:4px; }
/* B) cartões */

@media (max-width:720px) {
  .pd-gacao { height:36px; }
}
/* Aparência › Jeito das telas */
.ap-telas { display:grid; gap:16px; }
.ap-tela h3 { margin:0 0 8px; font-size:calc(13px * var(--k-fs)); font-weight:600; color:var(--c-text); }
.ap-tela-mini { display:grid; gap:4px; width:100%; height:52px; padding:7px 8px; margin-bottom:8px; border:1px solid var(--c-border-2); border-radius:7px; background:var(--c-bg); align-content:start; overflow:hidden; }
.ap-tela-mini i { display:block; height:5px; border-radius:3px; background:var(--c-border-2); }
.ap-tm-lista i:first-child { height:9px; background:color-mix(in srgb, var(--c-accent) 35%, var(--c-border-2)); }
.ap-tm-cartoes { grid-template-columns:1fr 1fr; grid-auto-rows:16px; }
.ap-tm-cartoes i { height:auto; border-radius:4px; }

/* A folha da prévia ("Ver como o cliente vê" do editor, OcPagina.previa). A janela antiga de detalhes de
   proposta e contrato (DocDetalhes, .cdd-*) saiu em 10/10: os detalhes viraram a página da proposta (dp-*). */
.cdd-folha { position:relative; overflow:hidden; border-radius:6px; background:#fff; box-shadow:0 10px 30px rgba(0,0,0,.35); flex:none; }
.cdd-folha iframe { position:absolute; left:0; top:0; border:0; transform-origin:0 0; background:#fff; pointer-events:none; }
}

/* ============================================================
   ANÁLISE em partes (06/10): abas (padrão, #view-analise[data-an-layout="abas"])
   ou capítulos (tudo numa página, com atalhos). AnaliseNova no app.js.
   ============================================================ */
.an-nav { display:flex; gap:4px; margin:0 0 16px; border-bottom:1px solid var(--c-border); overflow-x:auto; scrollbar-width:none; }
.an-nav::-webkit-scrollbar { display:none; }
.an-nav button { flex:none; height:38px; padding:0 12px; border:0; border-bottom:2px solid transparent; margin-bottom:-1px; background:none; color:var(--c-text-2);
  font-family:var(--f-ui); font-size:calc(13.2px * var(--k-fs)); font-weight:600; cursor:pointer; }
.an-nav button:hover { color:var(--c-text); }
.an-nav button[aria-pressed="true"] { color:var(--c-text); border-color:var(--c-accent); }
.an-nav button:focus-visible { outline:2px solid var(--c-accent); outline-offset:-2px; border-radius:6px; }
#view-analise[data-an-layout="capitulos"] .an-nav { position:sticky; top:calc(var(--topbar-h) + var(--menu-topo-h, 0px)); z-index:5; gap:6px; padding:8px 0 10px; border-bottom:0;
  background:var(--c-bg); margin-bottom:6px; }
#view-analise[data-an-layout="capitulos"] .an-nav button { height:30px; padding:0 12px; border:1px solid var(--c-border); border-radius:999px; margin:0; font-weight:500; }
#view-analise[data-an-layout="capitulos"] .an-nav button[aria-pressed="true"] { background:color-mix(in srgb, var(--c-accent) 14%, transparent); border-color:var(--c-accent); color:var(--c-accent-text); }
.an-secao[hidden] { display:none; }
.an-secao { scroll-margin-top:calc(var(--topbar-h) + var(--menu-topo-h, 0px) + 56px); }
.an-secao + .an-secao { margin-top:8px; }
.an-cap { display:none; align-items:baseline; gap:10px; flex-wrap:wrap; margin:6px 2px 12px; }
#view-analise[data-an-layout="capitulos"] .an-cap { display:flex; }
#view-analise[data-an-layout="capitulos"] .an-secao + .an-secao { margin-top:26px; padding-top:18px; border-top:1px solid var(--c-border); }
.an-cap h2 { margin:0; font-size:calc(17px * var(--k-fs)); font-weight:700; letter-spacing:-.2px; color:var(--c-text); }
.an-cap p { margin:0; font-size:calc(12.6px * var(--k-fs)); color:var(--c-text-3); }
#view-analise .an-secao .nv-grade { margin-bottom:12px; }
.an-celula { display:grid; } .an-celula > .nv-cartao { height:100%; }
.an-resumo-grade { display:grid; grid-template-columns:minmax(0, 1.55fr) minmax(0, 1fr); gap:12px; margin-top:12px; }
.an-dest { display:grid; }
.an-dest-it { display:grid; grid-template-columns:34px minmax(0, 1fr) auto; gap:10px; align-items:center; padding:9px 4px; border:0; border-top:1px solid var(--c-border); background:none;
  color:var(--c-text); font-family:var(--f-ui); text-align:left; cursor:pointer; border-radius:8px; }
.an-dest-it:first-child { border-top:0; }
.an-dest-it:hover { background:var(--c-hover); }
.an-dest-ic { width:32px; height:32px; border-radius:9px; display:grid; place-items:center; color:var(--nc); background:color-mix(in srgb, var(--nc) 14%, transparent); }
.an-dest-t { display:grid; gap:1px; min-width:0; }
.an-dest-t b { font-size:calc(13.2px * var(--k-fs)); font-weight:600; }
.an-dest-t small { font-size:calc(11.8px * var(--k-fs)); color:var(--c-text-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.an-dest-it em { font-style:normal; font-weight:700; font-size:calc(13.4px * var(--k-fs)); font-variant-numeric:tabular-nums; white-space:nowrap; }
@media (max-width:1100px) { .an-resumo-grade { grid-template-columns:minmax(0, 1fr); } }
@media (max-width:720px) {
  .an-nav button { height:44px; }
  #view-analise[data-an-layout="capitulos"] .an-nav button { height:36px; }
}

/* ============================================================
   SAÚDE FINANCEIRA (06/10): #saude-corpo.sd-grafico (padrão) ou .sd-perguntas
   ============================================================ */
#saude-corpo .nv-cartao { margin-bottom:12px; }
.sd-numeros { margin-bottom:12px; }
.sd-numeros .s.sd-ok { color:var(--c-ok); font-weight:600; }
.sd-numeros .s.sd-bad { color:var(--c-bad); font-weight:600; }
.sd-duas { display:grid; grid-template-columns:minmax(0, 1.55fr) minmax(0, 1fr); gap:12px; align-items:start; }
.sd-duas > .nv-cartao { margin-bottom:12px; }
.sd-lista { display:grid; }
.sd-al { display:grid; grid-template-columns:34px minmax(0, 1fr) auto; grid-template-areas:"ic txt v" "ic a a"; column-gap:10px; row-gap:6px; align-items:center; padding:10px 0; border-top:1px solid var(--c-border); }
.sd-al:first-child { border-top:0; padding-top:0; }
.sd-al-ic { grid-area:ic; width:32px; height:32px; border-radius:9px; display:grid; place-items:center; color:var(--pc); background:color-mix(in srgb, var(--pc) 14%, transparent); align-self:start; }
.sd-al-txt { grid-area:txt; display:grid; gap:1px; min-width:0; }
.sd-al-txt b { font-size:calc(13.2px * var(--k-fs)); font-weight:600; color:var(--c-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sd-al-txt span { font-size:calc(11.8px * var(--k-fs)); color:var(--c-text-3); }
.sd-al-v { grid-area:v; font-size:calc(13.6px * var(--k-fs)); font-weight:700; color:var(--c-text); white-space:nowrap; }
.sd-al[style*="--c-bad"] .sd-al-v { color:var(--c-bad); }
.sd-al-a { grid-area:a; display:flex; gap:6px; flex-wrap:wrap; }
.sd-al-a:empty { display:none; }
.sd-al-a .nv-btn { gap:5px; }
.sd-ir { border:0; background:none; padding:2px 0; color:var(--c-accent-text); font-family:var(--f-ui); font-size:calc(12.4px * var(--k-fs)); font-weight:600; cursor:pointer; }
.sd-tudo-ok { display:flex; gap:12px; align-items:flex-start; color:var(--c-ok); }
.sd-tudo-ok div { display:grid; gap:2px; color:var(--c-text); }
.sd-tudo-ok span { font-size:calc(12.2px * var(--k-fs)); color:var(--c-text-2); }
.sd-h5, .sd-perg { margin:16px 0 8px; font-size:calc(11.5px * var(--k-fs)); font-weight:650; letter-spacing:.06em; text-transform:uppercase; color:var(--c-text-3); }
.sd-perg { margin:4px 2px 8px; }
.sd-bom { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
.sd-bom > div { display:flex; gap:10px; align-items:flex-start; padding:9px 10px; border:1px solid var(--c-border); border-radius:var(--r); background:var(--c-bg); min-width:0; }
.sd-bom-ic { flex:none; width:28px; height:28px; border-radius:8px; display:grid; place-items:center; color:var(--c-accent-text); background:color-mix(in srgb, var(--c-accent) 12%, transparent); }
.sd-bom > div > div { display:grid; gap:1px; min-width:0; }
.sd-bom span { font-size:calc(11.6px * var(--k-fs)); color:var(--c-text-3); }
.sd-bom b { font-size:calc(13.2px * var(--k-fs)); color:var(--c-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sd-bom small { font-size:calc(11.4px * var(--k-fs)); color:var(--c-text-3); }
.sd-prev { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; }
.sd-perguntas .sd-prev { grid-template-columns:minmax(0, 1fr); }
.sd-prev-mes { display:grid; gap:3px; padding:10px 12px; border:1px solid var(--c-border); border-radius:var(--r); background:var(--c-bg); }
.sd-prev-mes small { font-size:calc(12px * var(--k-fs)); color:var(--c-text-2); }
.sd-prev-mes b { font-size:calc(16px * var(--k-fs)); color:var(--c-text); }
.sd-prev-mes span { font-size:calc(11.6px * var(--k-fs)); color:var(--c-text-3); }
.sd-prev-bar { display:flex; height:6px; margin-top:4px; border-radius:4px; background:var(--c-hover); overflow:hidden; }
.sd-prev-bar em { display:block; height:100%; background:var(--c-ch-1); }
.sd-prev-bar em.pos { background:color-mix(in srgb, var(--c-ch-1) 35%, transparent); }
.sd-nota { margin:0 0 10px; font-size:calc(12.2px * var(--k-fs)); color:var(--c-text-2); }
.sd-frase { display:flex; align-items:center; gap:14px; padding:14px 16px; margin-bottom:14px; border:1px solid color-mix(in srgb, var(--pc) 35%, var(--c-border)); border-radius:var(--r);
  background:color-mix(in srgb, var(--pc) 7%, var(--c-surface)); }
.sd-frase-ic { flex:none; width:44px; height:44px; border-radius:12px; display:grid; place-items:center; color:var(--pc); background:color-mix(in srgb, var(--pc) 15%, transparent); }
.sd-frase > div { display:grid; gap:2px; min-width:0; }
.sd-frase b { font-size:calc(15px * var(--k-fs)); color:var(--c-text); }
.sd-frase > div > span { font-size:calc(12.6px * var(--k-fs)); color:var(--c-text-2); }
.sd-frase .nv-btn { gap:6px; flex:none; }
.sd-tres { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, .85fr); gap:12px; align-items:start; }
@media (max-width:1100px) { .sd-duas, .sd-tres { grid-template-columns:minmax(0, 1fr); } }
@media (max-width:720px) {
  .sd-prev { grid-template-columns:minmax(0, 1fr); }
  .sd-bom { grid-template-columns:minmax(0, 1fr); }
  .sd-frase { flex-wrap:wrap; }
  .sd-frase .pp-vao { display:none; }
  .sd-frase .nv-btn { width:100%; justify-content:center; height:44px; }
  .sd-al-a .nv-btn { height:36px; }
}
.ap-tm-abas { grid-template-columns:repeat(4, 1fr); grid-auto-rows:5px; }
.ap-tm-abas i:first-child { grid-column:1; background:color-mix(in srgb, var(--c-accent) 45%, var(--c-border-2)); }
.ap-tm-abas i:nth-child(n+2) { grid-column:span 4; } .ap-tm-abas i:nth-child(2) { grid-column:2 / span 3; opacity:.5; }
.ap-tm-capitulos i:nth-child(odd) { height:7px; width:40%; background:color-mix(in srgb, var(--c-accent) 35%, var(--c-border-2)); }
.ap-tm-grafico { grid-template-columns:1.5fr 1fr; grid-auto-rows:16px; }
.ap-tm-grafico i { height:auto; border-radius:3px; } .ap-tm-grafico i:first-child { grid-row:span 2; }
.ap-tm-perguntas { grid-template-columns:1fr 1fr 1fr; grid-auto-rows:10px 22px; }
.ap-tm-perguntas i:first-child { grid-column:span 3; height:auto; background:color-mix(in srgb, var(--c-warn) 35%, var(--c-border-2)); }
.ap-tm-perguntas i:nth-child(n+2) { height:auto; border-radius:3px; }
.nv-cartao > .sd-h5:first-child { margin-top:0; }

/* Período (07/10): anos em botões no "Ano"; "‹ 2026 ›" em cima dos meses no "Mês";
   o quadro some na hora e uma cópia desbota por cima (0,1 s) */
.periodo-anos { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:4px; }
.periodo-anos[hidden] { display:none; }
.periodo-anos button { height:32px; border:0; border-radius:7px; background:none; color:var(--c-text-2); font-family:var(--f-ui); font-size:calc(12.6px * var(--k-fs)); cursor:pointer; font-variant-numeric:tabular-nums; }
.periodo-anos button:hover { background:var(--c-hover); color:var(--c-text); }
.periodo-anos button[aria-pressed="true"] { background:var(--c-prim); color:var(--c-prim-text); font-weight:600; }
.periodo-meses .periodo-passo { grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; padding:0 2px 4px; }
.periodo-meses .periodo-passo b { font-size:calc(13px * var(--k-fs)); color:var(--c-text); font-variant-numeric:tabular-nums; }
.periodo-meses .periodo-passo button { width:32px; height:28px; display:grid; place-items:center; color:var(--c-text-2); }
@media (prefers-reduced-motion:reduce) { .nv-pop-fantasma { display:none; } }

/* A barra de rolagem da página sempre com o mesmo espaço: abrir/fechar algo que
   muda a altura da página não mexe mais na largura do app (07/10) */
html { scrollbar-gutter:stable; }
/* menu do botão direito em qualquer lugar (MenuContexto, 07/10): o mesmo visual dos ⋯ */
.nv-ctx[hidden] { display:none !important; }
.nv-ctx { z-index:1600; }
/* ícones no lugar dos emojis (07/10) */
.oem-btn, .oem-aviso { display:inline-flex; align-items:center; gap:7px; }
.viz-opt-ic { display:grid; place-items:center; width:36px; height:36px; border-radius:10px; background:color-mix(in srgb, var(--c-accent) 12%, transparent); color:var(--c-accent-text); font-size:0; }
.cd-anexo-ic { display:grid; place-items:center; color:var(--c-accent-text); }
.det-doc-actions .nv-btn { gap:5px; }

/* ============================================================
   JANELAS COMO NO APP DE ESTUDOS (07/10): abrem em 0,16 s subindo 6px
   (.sheet), o fundo escurece na hora, sem desfoque e sem esmaecer;
   só fecham pelo ✕ ou pelo Fechar/Cancelar (nem fora, nem Esc).
   ============================================================ */
html .modal-overlay { backdrop-filter:none; -webkit-backdrop-filter:none; }
html .modal-overlay.show { animation:none; }
html .modal-overlay .modal { animation:nvJanela .16s ease-out; }
@keyframes nvJanela { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
html .loading-overlay { backdrop-filter:none; -webkit-backdrop-filter:none; }
/* nada de animação para quem pediu menos movimento no aparelho (regra geral do app de estudos) */
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { transition:none !important; animation:none !important; } }

/* ============================================================
   JANELA DO APP (moldura), como no app de estudos v51 (07/10)
   html[data-janela]: ilhas (padrão) · painel · flutuante · semlinhas · topo · original.
   Só no computador e com o menu ao lado. "ilhas": a lateral é um cartão solto
   e a página fica num painel arredondado sobre um fundo mais escuro (a tampa
   de cima presa ao topo e a de baixo presa embaixo; o conteúdo passa por baixo).
   ============================================================ */
:root { --jl-fundo:#0B0E11; --jl-lado:#161B21; --jl-borda:#232A33; --lado-rail:80px; }
:root[data-modo="claro"] { --jl-fundo:#E4E8EE; --jl-lado:#FFFFFF; --jl-borda:#D3DAE3; }
@media (min-width:721px) {
  html:not([data-menu="topo"]):is([data-janela="ilhas"], [data-janela="flutuante"]) { --lado-rail:70px; }
  /* ilhas e painel: a página como painel arredondado */
  html:not([data-menu="topo"]):is([data-janela="ilhas"], [data-janela="painel"]) { --topbar-h:56px; }
  html:not([data-menu="topo"])[data-janela="ilhas"], html:not([data-menu="topo"])[data-janela="ilhas"] body { background:var(--jl-fundo); }
  html:not([data-menu="topo"])[data-janela="painel"], html:not([data-menu="topo"])[data-janela="painel"] body { background:var(--c-side); }
  html:not([data-menu="topo"]):is([data-janela="ilhas"], [data-janela="painel"]) .nv-topo { padding-bottom:12px; border-bottom:0; background:var(--jl-fundo); }
  html:not([data-menu="topo"])[data-janela="painel"] .nv-topo { background:var(--c-side); }
  html:not([data-menu="topo"]):is([data-janela="ilhas"], [data-janela="painel"]) .nv-topo::after { content:""; position:absolute; left:10px; right:10px; bottom:0; height:12px;
    background:var(--c-bg); border:1px solid var(--jl-borda); border-bottom:0; border-radius:16px 16px 0 0; pointer-events:none; }
  html:not([data-menu="topo"])[data-janela="painel"] .nv-topo::after { left:0; }
  html:not([data-menu="topo"]):is([data-janela="ilhas"], [data-janela="painel"]) .nv-principal { min-height:100vh; }
  html:not([data-menu="topo"]):is([data-janela="ilhas"], [data-janela="painel"]) .nv-principal > .app { flex:1; width:auto; margin:0 10px; background:var(--c-bg);
    border-left:1px solid var(--jl-borda); border-right:1px solid var(--jl-borda); padding-top:6px; }
  html:not([data-menu="topo"])[data-janela="painel"] .nv-principal > .app { margin-left:0; }
  html:not([data-menu="topo"]):is([data-janela="ilhas"], [data-janela="painel"]) .nv-principal::after { content:""; display:block; position:sticky; bottom:10px; z-index:35;
    height:14px; margin:0 10px 10px; background:var(--c-bg); border:1px solid var(--jl-borda); border-top:0; border-radius:0 0 16px 16px; box-shadow:0 10px 0 10px var(--jl-fundo); }
  html:not([data-menu="topo"])[data-janela="painel"] .nv-principal::after { margin-left:0; box-shadow:0 10px 0 10px var(--c-side); }
  html:not([data-menu="topo"])[data-janela="painel"] .nv-lado { border-right:0; }
  html:not([data-menu="topo"]):is([data-janela="ilhas"], [data-janela="painel"]) .nv-lado-pe { border-top-color:var(--jl-borda); }
  /* lateral solta (ilhas e flutuante) */
  html:not([data-menu="topo"]):is([data-janela="ilhas"], [data-janela="flutuante"]) .nv-lado { top:10px; bottom:10px; left:10px; width:calc(var(--lado-w) - 10px);
    border:1px solid var(--jl-borda); border-radius:16px; }
  html:not([data-menu="topo"])[data-janela="ilhas"] .nv-lado { background:var(--jl-lado); }
  html:not([data-menu="topo"])[data-janela="flutuante"] .nv-lado { background:var(--c-surface); }
  html:not([data-menu="topo"]):is([data-janela="ilhas"], [data-janela="flutuante"])[data-lado="recolhido"] .nv-lado { width:var(--lado-rail); }
  html:not([data-menu="topo"]):is([data-janela="ilhas"], [data-janela="flutuante"])[data-lado="recolhido"] .nv-casca { grid-template-columns:calc(var(--lado-rail) + 10px) minmax(0, 1fr); }
  html:not([data-menu="topo"])[data-janela="flutuante"] .nv-topo { background:var(--c-bg); border-bottom:0; }
  /* sem linhas */
  html:not([data-menu="topo"])[data-janela="semlinhas"] .nv-lado { border-right:0; }
  html:not([data-menu="topo"])[data-janela="semlinhas"] .nv-topo { background:var(--c-bg); border-bottom:0; }
  html:not([data-menu="topo"])[data-janela="semlinhas"] .nv-lado-pe { border-top-color:transparent; }
  /* topo junto da página (não fica preso) */
  html:not([data-menu="topo"])[data-janela="topo"] .nv-topo { position:static; background:transparent; border-bottom:0; height:50px; padding-top:6px; }
  html:not([data-menu="topo"])[data-janela="topo"] .nv-lado { border-right:0; }
}
/* recolher e abrir a lateral: NA HORA, como no app de estudos (07/10). A transição de 0,2 s
   redesenhava a página inteira e os gráficos a cada quadro (a tela "piscava"). */

/* Configurações › Aparência › Janela do app (miniaturas, como .v51jan do app de estudos) */

/* ============================================================
   APARÊNCIA E BOTÕES ESCOLHIDOS COMO NO APP DE ESTUDOS (07/10)
   Opção escolhida: só a borda na cor de destaque (o ícone e o nome não
   mudam de cor, sem o ✓). Botões lado a lado (Lista/Calendário, Ano/Mês/
   Personalizado, Barras/Linha/Área…): o escolhido fica cheio, na cor dos
   botões (o .segbtn do app de estudos), bem visível no claro e no escuro.
   Menu de Configurações: fundo --c-sel, texto forte e o ícone na cor de
   destaque (o .ajnav do app de estudos).
   ============================================================ */
html .ap-op { border-width:1.5px; }
html .ap-op[aria-checked="true"] { border-color:var(--c-accent); box-shadow:none; }
html .ap-op[aria-checked="true"] .ap-ok { display:none; }
html .ap-op[aria-checked="true"] .ap-ic, html .ap-op[aria-checked="true"] .ap-nome .ap-ic { background:var(--c-hover); color:var(--c-text-2); }
html .ap-op[aria-checked="true"] .ap-nome .ap-ic { background:none; }
html .ap-op[aria-checked="true"] b { color:var(--c-text); }
html .ap-op:focus-visible { outline:2px solid var(--c-accent); outline-offset:2px; }
html .cfg-menu button[aria-current="true"] { background:var(--c-sel); color:var(--c-text); font-weight:600; }
html .cfg-menu button[aria-current="true"] svg { color:var(--c-accent-text); }
html #periodo-pop .periodo-tab.active,
html .nv-seg > .active, html .nv-seg > [aria-pressed="true"],
html .nv-seg .toggle-btn.active { background:var(--c-prim); color:var(--c-prim-text); font-weight:600; box-shadow:none; }
html #periodo-pop .periodo-tab.active svg, html .nv-seg > .active svg, html .nv-seg > [aria-pressed="true"] svg { color:inherit; }
html :is(#view-eventos, #view-orcamentos) .evt-view-btn.active,
html #view-saude .saude-per-btn.active { background:var(--c-prim); color:var(--c-prim-text); font-weight:600; box-shadow:none; }
html .nv-busca-it.on { background:var(--c-sel); }

/* ============================================================
   CHIP DE CONEXÃO (o "Ao vivo" do app de estudos, 07/10): bolinha sem brilho
   nem piscar; verde = Ao vivo/Sincronizado, amarela = Carregando/Salvando,
   cinza = Offline, vermelha = Erro/Sem conexão. Conexao, no app.js.
   ============================================================ */
html .sync-dot { width:8px; height:8px; border-radius:999px; background:var(--c-ok); box-shadow:none; animation:none; flex:none; }
html .sync-pill.busy .sync-dot { background:var(--c-warn); }
html .sync-pill.off .sync-dot { background:var(--c-text-3); }
html .sync-pill.err .sync-dot { background:var(--c-bad); }
html .sync-pill.clicavel { cursor:pointer; }
html .sync-pill.clicavel:hover .sync-label { color:var(--c-text); }
.nv-sync-cel { display:none; }
@media (max-width:720px) {
  html .nv-topo .nv-sync-cel { display:inline-flex; align-items:center; gap:8px; min-width:0; flex:0 1 auto; margin:0 auto 0 12px; padding:0;
    border:0; border-radius:0; background:none; font-size:12px; line-height:18px; font-weight:500; color:var(--c-text-2); white-space:nowrap; }
  .nv-topo .nv-sync-cel .sync-label { overflow:hidden; text-overflow:ellipsis; }
  .nv-topo .nv-sync-cel .sync-dot { width:9px; height:9px; }
  html .nv-topo .nv-topo-marca { margin-right:0; flex:none; }
  /* no celular o chip já diz "Offline · N pendentes" (e abre Este aparelho): o aviso do topo não repete */
  html .nv-topo .nv-rede { display:none; }
}
html .nv-rede-ponto { box-shadow:none; animation:none !important; }

/* Rolagem dupla (lista com rolagem dentro da janela que já rola) saiu: rola só a janela (07/10).
   As janelas montadas na hora usam _janelaSimples (app.js), a mesma .modal-overlay.nv-janela. */
html .cat-sel-lista { max-height:none; overflow:visible; }
/* sem sublinhado ao passar o mouse em nenhum lugar (07/10, pedido junto com o nome do comissionado): só a cor muda */
html .nv-link:hover, html .nv-barra:hover span:first-child, html .an-rank li.ev:hover .t, html .cal-event-more:hover { text-decoration:none; }
html .nv-link:hover { opacity:.82; }
html .nv-barra:hover span:first-child, html .an-rank li.ev:hover .t { color:var(--c-accent-text); }
/* "· 3 em 60 dias" não quebra no meio (no celular o "dias" caía para a linha de baixo) */
html .nv-cnt { white-space:nowrap; }

/* ============================================================
   JANELA DE MENSAGEM ÚNICA (07/10, "um jeito só"): #modal-msg-pronta ganhou
   aviso com botão, "Para quem", WhatsApp e e-mail lado a lado, assunto do
   e-mail, histórico deste aparelho e o botão "E-mail" com Gmail/app/assunto.
   ============================================================ */
.mp-avisobox { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:9px 12px; border-radius:var(--r-md);
  border:1px solid color-mix(in srgb, var(--c-warn) 40%, var(--c-border)); background:color-mix(in srgb, var(--c-warn) 10%, transparent);
  color:var(--c-text); font-size:12.9px; line-height:1.45; }
.mp-avisobox[hidden] { display:none; }
.mp-avisobox span { flex:1 1 220px; }
.mp-para { display:grid; gap:6px; }
.mp-para[hidden] { display:none; }
.mp-para-seg.nv-seg { display:flex; width:100%; padding:3px; gap:3px; border-radius:10px; background:var(--c-hover); }
.mp-para-seg .toggle-btn { flex:1 1 0; min-width:0; display:grid; gap:1px; justify-items:center; padding:6px 10px; border:0; border-radius:8px;
  background:none; color:var(--c-text-2); font:inherit; font-size:12.9px; font-weight:600; line-height:1.25; cursor:pointer; }
.mp-para-seg .toggle-btn small { font-size:11.5px; font-weight:400; opacity:.85; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mp-contato { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:10px; }
.mp-contato .mp-tel[hidden], #mp-assunto-campo[hidden] { display:none; }
.mp-tel input:focus { outline:none; border-color:var(--c-accent); }
.mp-hist { border:1px solid var(--c-border); border-radius:var(--r-md); padding:0 12px; }
.mp-hist[hidden] { display:none; }
.mp-hist > summary { cursor:pointer; list-style:none; padding:9px 0; font-size:12.4px; font-weight:600; color:var(--c-text-2); }
.mp-hist > summary::-webkit-details-marker { display:none; }
.mp-hist[open] > summary { border-bottom:1px solid var(--c-border); margin-bottom:6px; }
.mp-hist #mp-hist-lista { padding-bottom:8px; }
.mp-email-menu { position:relative; }
.mp-email-menu[hidden] { display:none; }
#modal-msg-pronta .mp-email-sum { list-style:none; width:auto; height:34px; padding:0 12px; gap:7px; display:inline-flex; align-items:center; cursor:pointer; }
#modal-msg-pronta .mp-email-sum::-webkit-details-marker { display:none; }
#modal-msg-pronta .mp-email-sum::after { content:none; }
@media (max-width:720px) {
  .mp-contato { grid-template-columns:minmax(0, 1fr); }
  #modal-msg-pronta .mp-rodape .mp-email-menu { flex:1 1 auto; display:flex; }
  #modal-msg-pronta .mp-rodape .mp-email-menu > summary { flex:1; height:44px; justify-content:center; font-size:14px; }
  #modal-msg-pronta .mp-rodape .mp-email-menu.principal { flex:1 1 100%; order:-1; }
}
#mp-avisobtn[hidden] { display:none; }
#mp-para-seg .toggle-btn { height:auto; min-height:40px; }
#mp-para-seg .toggle-btn small { display:block; }
#modal-msg-pronta .mp-email-sum:focus-visible { outline:2px solid var(--c-accent); outline-offset:2px; }

/* ============================================================
   MOVIMENTO IGUAL AO DO APP DE ESTUDOS (07/10): mudança de cor/borda .14s;
   menus e quadros só aparecem (.1s, sem andar); telas, janelas, gaveta,
   folha do celular, quadro do dia e avisos entram subindo 6px em .16s
   (os avisos que somem, .14s); o aviso no canto, .2s. Fechar é na hora.
   ============================================================ */
@keyframes nvAparece { from { opacity:0; } to { opacity:1; } }
@keyframes nvSobe { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
@keyframes nvSome { to { opacity:0; transform:translateY(6px); } }
html .orc-menu-pop.flut, html .nv-pop:not([hidden]), html .nv-menu:not([hidden]), html .notif-menu-pop, html .nv-ctx:not([hidden]) { animation:nvAparece .1s ease-out; }
html .toast { animation:nvSobe .16s ease-out; }
html .toast.out { animation:nvSome .14s ease-out forwards; }
html .cal-popover, html .subview { animation:nvSobe .16s ease-out; }
html .nf-canto-item { animation:nvSobe .2s ease-out; transition:opacity .14s ease-out, transform .14s ease-out; }
@media (max-width:720px) {
  html .bnav-painel, html .nv-pop.folha:not([hidden]) { animation:nvSobe .16s ease-out; }
}
@media (prefers-reduced-motion:reduce) {
  html .orc-menu-pop.flut, html .nv-pop, html .nv-menu, html .notif-menu-pop, html .nv-ctx, html .toast, html .toast.out,
  html .cal-popover, html .subview, html .nf-canto-item, html .bnav-painel { animation:none !important; }
}

/* ============================================================
   CONFIGURAÇÕES COMO NO APP DE ESTUDOS (07/10): no computador largo
   (≥1024px) a página cabe na tela — a lista da esquerda fica parada e só o
   lado direito rola. A altura (--cfg-alt) é medida pelo CfgAltura (app.js)
   para cada moldura da "Janela do app".
   ============================================================ */
@media (min-width:1024px) {
  html.cfg-fixa #app-wrap:has(#view-configuracoes.active) { padding-bottom:24px; }
  html.cfg-fixa #view-configuracoes.active { display:flex; flex-direction:column; height:var(--cfg-alt, auto); min-height:440px; }
  html.cfg-fixa #view-configuracoes .cfg-grade { flex:1; min-height:0; grid-template-rows:minmax(0, 1fr); align-items:stretch; }
  html.cfg-fixa #view-configuracoes .cfg-lado { position:static; align-self:start; }
  html.cfg-fixa #view-configuracoes .cfg-secoes { min-height:0; overflow-y:auto; overscroll-behavior:contain; align-content:start;
    padding:0 6px 24px 0; margin-right:-6px; scrollbar-width:thin; scrollbar-gutter:stable; }
}

/* ============================================================
   O TOPO NÃO ANDA (07/10): o aviso "Sem internet · N esperando envio" virou
   uma faixa embaixo do topo — antes entrava
   no meio dos botões e empurrava "Buscar tudo" e "+ Novo". No celular quem diz
   isso é o chip ao lado da marca. O número do botão "Filtros"/"Situação" tem
   o lugar guardado, para o botão não mudar de largura.
   ============================================================ */
html .nv-rede { position:sticky; top:var(--topbar-h); z-index:39; display:flex; width:100%; height:auto; min-height:34px; padding:7px 19px;
  gap:8px; border:0; border-bottom:1px solid var(--c-border); border-radius:0; justify-content:flex-start; text-align:left;
  background:color-mix(in srgb, var(--rc) 12%, var(--c-bg)); color:var(--c-text); font-size:12.5px; font-weight:500; line-height:18px; }
html .nv-rede[hidden] { display:none; }
html .nv-rede:hover { background:color-mix(in srgb, var(--rc) 18%, var(--c-bg)); }
html .nv-rede[data-estado="offline"], html .nv-rede[data-estado="erro"] { border-color:var(--c-border); }
html .nv-rede .nv-rede-txt { display:inline; }
html .nv-rede .nv-rede-curto { display:none; }
html .nv-rede-ver { margin-left:auto; color:var(--c-accent-text); font-weight:600; }
@media (max-width:720px) { html .nv-rede { display:none !important; } }
html .nv-pbtn-n:empty { display:inline-grid; visibility:hidden; }

/* ============================================================
   LATERAL IGUAL À DO APP DE ESTUDOS + TELA QUE NÃO PISCA (pedido do Renato em 07/10)
   Medidas tiradas do app de estudos aberto (1470×860, "ilhas").
   ============================================================ */
/* botão de recolher/abrir (o .v51lado do app de estudos): 30×30, ícone de 16 com a setinha
   « (aberta) / » (recolhida); só de 1024px para cima (abaixo disso a lateral já é a faixa de ícones) */
html .nv-topo .nv-recolher { width:30px; height:30px; border-radius:8px; border:1px solid transparent; color:var(--c-text-3);
  transition:background .14s ease-out, color .14s ease-out, border-color .14s ease-out; }
html .nv-topo .nv-recolher:hover { background:var(--c-hover); color:var(--c-text); border-color:var(--c-border); }
html[data-lado="recolhido"] .nv-topo .nv-recolher { color:var(--c-text-3); }
html[data-lado="recolhido"] .nv-topo .nv-recolher:hover { color:var(--c-text); }
html .nv-recolher .nv-ic-abre { display:none; }
html[data-lado="recolhido"] .nv-recolher .nv-ic-abre { display:block; }
html[data-lado="recolhido"] .nv-recolher .nv-ic-fecha { display:none; }
@media (max-width:1023px) { html .nv-topo .nv-recolher { display:none; } }

/* marca e itens da lateral (o .sbrand / .sidenav / .navrow do app de estudos): 36px de altura, 8px entre um e
   outro, ícone a 12px da borda do item e 17px até o nome; em tela mais baixa fica mais junto, como lá */
html:not([data-menu="topo"]) .nv-lado-marca { padding-left:21px; }
html:not([data-menu="topo"]) .nv-lado-nav { padding:9px 11px 10px; gap:8px; }
html:not([data-menu="topo"]) .nv-lado .tab-link { height:36px; padding:0 12px; gap:17px; }
html:not([data-menu="topo"]) .nv-lado-grupo { margin:10px 0 0; }
@media (min-width:1024px) and (max-height:820px) {
  html:not([data-menu="topo"]) .nv-lado-marca { height:54px; }
  html:not([data-menu="topo"]) .nv-lado-nav { gap:4px; }
  html:not([data-menu="topo"]) .nv-lado .tab-link { height:34px; }
}
@media (min-width:1024px) and (max-height:840px) {
  html:not([data-menu="topo"]):is([data-janela="ilhas"], [data-janela="flutuante"]) .nv-lado-marca { height:46px; }
  html:not([data-menu="topo"]):is([data-janela="ilhas"], [data-janela="flutuante"]) .nv-lado-nav { gap:4px; }
  html:not([data-menu="topo"]):is([data-janela="ilhas"], [data-janela="flutuante"]) .nv-lado .tab-link { height:34px; }
}
@media (min-width:1024px) and (max-height:800px) {
  html:not([data-menu="topo"]) .nv-lado .nv-lado-marca { height:42px; }
  html:not([data-menu="topo"]) .nv-lado .nv-lado-nav { gap:3px; padding-top:6px; }
  html:not([data-menu="topo"]) .nv-lado .nv-lado-nav .tab-link { height:32px; }
}

/* pé da lateral (o .sidefoot do app de estudos): a linha não encosta nas bordas
   (padding 22 + margem −12 = 10px de cada lado) e o "Ao vivo" fica 20px acima do fim */
html .nv-lado-pe { display:block; padding:0 22px 20px; border-top:0; }
html .nv-lado-pe::before { content:""; display:block; border-top:1px solid var(--c-border); margin:0 -12px 14px; }
html .nv-lado-estado { padding:0; min-height:0; gap:9px; }
html .nv-lado .sync-pill { line-height:18.75px; }
@media (min-width:721px) {
  html:not([data-menu="topo"]):is([data-janela="ilhas"], [data-janela="painel"]) .nv-lado-pe::before { border-top-color:var(--jl-borda); }
  html:not([data-menu="topo"])[data-janela="semlinhas"] .nv-lado-pe::before { border-top-color:transparent; }
}
@media (min-width:1024px) and (max-height:840px) {
  html:not([data-menu="topo"]):is([data-janela="ilhas"], [data-janela="flutuante"]) .nv-lado-pe { padding-bottom:14px; }
}
/* menu no topo: o pé é só o chip, sem linha */
html[data-menu="topo"] .nv-lado-pe { padding:0; }
html[data-menu="topo"] .nv-lado-pe::before { display:none; }

/* lateral recolhida (o data-lado="fechada" do app de estudos): itens de 36px de altura que
   ocupam a faixa (9px de folga dos lados), marca no meio e sem o pé (o "Ao vivo" some, como lá) */
html:not([data-menu="topo"])[data-lado="recolhido"] .nv-lado-nav { padding-left:9px; padding-right:9px; justify-items:stretch; }
/* o logo no meio da faixa, como no app de estudos (a margem de 21px da marca é só da lateral aberta) */
html:not([data-menu="topo"])[data-lado="recolhido"] .nv-lado-marca { padding:0; justify-content:center; }
html:not([data-menu="topo"])[data-lado="recolhido"] .nv-lado .tab-link { width:auto; padding:0; gap:0; justify-content:center; }
html:not([data-menu="topo"])[data-lado="recolhido"] .nv-lado-grupo { width:auto; height:0; margin:6px 3px 4px; padding:0; font-size:0; background:none; border-top:1px solid var(--c-border); }
html:not([data-menu="topo"])[data-lado="recolhido"] .nv-lado-pe { display:none; }

/* gráficos: o desenho nunca empurra o cartão (antes, ao abrir a lateral ou com a barra de rolagem,
   o gráfico ficava mais largo que o cartão e "vazava", levando junto os botões Barras/Linha/Área) */
html .nv-grafico.chart-box { overflow:hidden; min-width:0; }
html .nv-grafico.chart-box > canvas { position:absolute; left:0; top:0; }

/* abrir o app: o conteúdo aparece pronto, sem a entrada (a entrada fica para a troca de tela, como no app de
   estudos). data-abrindo sai na primeira troca de tela. data-fora: sem login, a moldura nem aparece. */
html[data-abrindo] .view, html[data-abrindo] .view.nv, html[data-abrindo] .subview { animation:none !important; }
html[data-fora] .nv-casca { display:none; }
/* o fundo da moldura vale desde o primeiro quadro: o tema.js põe a cor da página direto no <html> (para não
   piscar branco) e isso cobria o fundo mais escuro das "ilhas" até o painel aparecer (um quadro mais claro) */
@media (min-width:721px) {
  html:not([data-menu="topo"])[data-janela="ilhas"] { background:var(--jl-fundo) !important; }
  html:not([data-menu="topo"])[data-janela="painel"] { background:var(--c-side) !important; }
}
/* o sino não fica balançando sem parar (só a cor avisa) */
html .lembretes-bell.urgente { animation:none; }

/* menus ⋯ e do botão direito: a opção debaixo do mouse sempre fica marcada (07/10). As regras da Agenda e das
   Comissões (com o id da tela) eram mais fortes que o :hover e deixavam a opção sem fundo. A marcação segue o
   mouse também pelo foco (fim do interface.js), então nunca ficam duas marcadas. */
html .orc-menu-pop button:is(:hover, :focus-visible), html .notif-menu-pop button:is(:hover, :focus-visible),
html :is(#view-eventos, #view-orcamentos, #view-comissoes) .ac-menu .orc-menu-pop button:is(:hover, :focus-visible),
html :is(#view-eventos, #view-orcamentos) .agenda-card .ac-menu .orc-menu-pop button:is(:hover, :focus-visible),
html .nv-janela .det-mais .orc-menu-pop button:is(:hover, :focus-visible), html .ac-menu .orc-menu-pop button:is(:hover, :focus-visible),
html #modal-detalhes .det-mais .orc-menu-pop button:is(:hover, :focus-visible) { background:var(--c-hover); color:var(--c-text); outline:none; }
html .orc-menu-pop button.danger:is(:hover, :focus-visible), html .notif-menu-pop button.danger:is(:hover, :focus-visible),
html :is(#view-eventos, #view-orcamentos, #view-comissoes) .ac-menu .orc-menu-pop button.danger:is(:hover, :focus-visible),
html :is(#view-eventos, #view-orcamentos) .agenda-card .ac-menu .orc-menu-pop button.danger:is(:hover, :focus-visible),
html .nv-janela .det-mais .orc-menu-pop button.danger:is(:hover, :focus-visible), html .ac-menu .orc-menu-pop button.danger:is(:hover, :focus-visible),
html #modal-detalhes .det-mais .orc-menu-pop button.danger:is(:hover, :focus-visible) { background:var(--c-bad-soft); color:var(--c-bad); }

/* ============================================================
   CONFIGURAÇÕES IGUAIS ÀS DO APP DE ESTUDOS (pedido do Renato em 07/10: "tudo que temos em comum igual")
   Título em cima das duas colunas (.vhead/.vtitle/.vsub), cartões .ajcard e, em Aparência, o Tema
   (.ajtema), a Janela do app (.v51jan), a Lateral (.v51linha/.v51seg) e a Cor de destaque (.ajacento)
   com as mesmas medidas, nomes e textos. As cores vêm do nosso tema (os neutros já são os de lá).
   ============================================================ */
#view-configuracoes .cfg-cabeca { margin:0 0 31px; flex:none; }
#view-configuracoes .cfg-cabeca .nv-h1 { font-size:19.8px; line-height:26.4px; font-weight:600; letter-spacing:0; margin:0 0 4px; }
#view-configuracoes .cfg-cabeca .nv-sub { font-size:13px; line-height:18.6px; color:var(--c-text-2); margin:0; }
#view-configuracoes .cfg-menu button { font-size:13.6px; }
#view-configuracoes .nv-cartao { padding:18px 18px 16px; gap:12px; border-radius:14px; }
#view-configuracoes .nv-cartao-hd h2 { font-size:15px; line-height:21px; }
@media (max-width:767px) { #view-configuracoes .cfg-cabeca .nv-h1 { font-size:17.8px; line-height:23.7px; } #view-configuracoes .cfg-cabeca { margin-bottom:18px; } }
@media (max-width:599px) { #view-configuracoes .nv-cartao { padding:14px; } }

/* Tema */
.ajtemas { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; }
.ajtema, .v51jan { display:grid; gap:6px; align-content:start; padding:10px; border-radius:12px; border:1.5px solid var(--c-border); text-align:left;
  background:var(--c-raised); color:var(--c-text); font-family:var(--f-ui); line-height:1.55; cursor:pointer; transition:border-color .14s ease-out; }
.ajtema:hover, .v51jan:hover { border-color:var(--c-border-2); }
.ajtema.on, .v51jan.on { border-color:var(--c-accent); }
.ajtemanm, .v51jnm { display:flex; align-items:center; gap:7px; color:var(--c-text); }
.ajtemanm svg { flex:none; }
.ajtemanm b, .v51jnm b { font-size:13.4px; font-weight:600; }
.ajtema small, .v51jan small { font-size:11.9px; line-height:1.4; color:var(--c-text-3); }
.ajprev { position:relative; display:block; height:64px; border-radius:8px; overflow:hidden; border:1px solid var(--c-border); }
.ajprev i { position:absolute; display:block; border-radius:3px; }
.ajprev i:nth-child(1) { left:0; top:0; bottom:0; width:26%; }
.ajprev i:nth-child(2) { left:33%; top:10px; width:46%; height:8px; }
.ajprev i:nth-child(3) { inset:26px 9px 9px 33%; border-radius:5px; }
.ajprev-escuro { background:#14181C; }
.ajprev-escuro i:nth-child(1) { background:#0F1215; border-radius:0; }
.ajprev-escuro i:nth-child(2) { background:#F2F5F8; opacity:.8; }
.ajprev-escuro i:nth-child(3) { background:#20262E; }
.ajprev-claro { background:#F3F5F8; }
.ajprev-claro i:nth-child(1) { background:#FFFFFF; border-right:1px solid #DCE2E9; border-radius:0; }
.ajprev-claro i:nth-child(2) { background:#131920; opacity:.75; }
.ajprev-claro i:nth-child(3) { background:#FFFFFF; border:1px solid #DCE2E9; }
.ajprev-auto { background:linear-gradient(115deg, #F3F5F8 0, #F3F5F8 50%, #14181C 50%, #14181C 100%); }
.ajprev-auto i:nth-child(1) { background:linear-gradient(115deg, #FFFFFF 0, #FFFFFF 60%, #0F1215 60%); border-radius:0; }
.ajprev-auto i:nth-child(2) { background:#7E8896; }
.ajprev-auto i:nth-child(3) { background:linear-gradient(115deg, #FFFFFF 0, #FFFFFF 42%, #20262E 42%); }
@media (max-width:900px) {
  .ajtemas { grid-template-columns:minmax(0, 1fr); }
  .ajtema { grid-template-columns:120px minmax(0, 1fr); grid-template-rows:auto 1fr; align-items:start; column-gap:12px; }
  .ajtema .ajprev { grid-row:1 / 3; height:60px; }
}

/* Janela do app */
.v51jans { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; }
.v51jprev { position:relative; display:block; height:70px; border-radius:8px; overflow:hidden; border:1px solid var(--c-border); background:var(--c-bg); }
.v51jprev i { position:absolute; display:block; }
.v51jprev .l { left:0; top:0; bottom:0; width:24%; background:var(--c-side); border-right:1px solid var(--c-border); }
.v51jprev .t { left:24%; right:0; top:0; height:12px; background:var(--c-surface); border-bottom:1px solid var(--c-border); }
.v51jprev .p { display:none; }
.v51jprev .a, .v51jprev .b, .v51jprev .c { left:31%; height:6px; border-radius:3px; background:var(--c-hover); }
.v51jprev .a { top:20px; width:30%; background:var(--c-text-3); opacity:.7; }
.v51jprev .b { top:34px; right:8%; }
.v51jprev .c { top:46px; right:20%; }
.v51jp-ilhas { background:var(--jl-fundo); }
.v51jp-ilhas .l { left:4px; top:4px; bottom:4px; width:22%; border-radius:6px; background:var(--jl-lado); border:1px solid var(--jl-borda); }
.v51jp-ilhas .t { background:transparent; border:0; left:28%; }
.v51jp-ilhas .p { display:block; inset:13px 4px 4px 29%; border-radius:6px; background:var(--c-bg); border:1px solid var(--jl-borda); }
.v51jp-painel { background:var(--c-side); }
.v51jp-painel .l { border-right:0; }
.v51jp-painel .t { background:transparent; border:0; }
.v51jp-painel .p { display:block; inset:13px 4px 4px 25%; border-radius:6px; background:var(--c-bg); border:1px solid var(--jl-borda); }
.v51jp-flutuante .l { left:4px; top:4px; bottom:4px; width:22%; border-radius:6px; background:var(--c-surface); border:1px solid var(--jl-borda); }
.v51jp-flutuante .t { background:transparent; border:0; }
.v51jp-semlinhas .l { border-right:0; }
.v51jp-semlinhas .t { background:transparent; border:0; }
.v51jp-topo .l { border-right:0; }
.v51jp-topo .t { border:0; top:4px; left:31%; right:8%; height:6px; border-radius:3px; background:var(--c-hover); opacity:.6; }
.v51jp-topo .a { top:18px; }
.v51linha { display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding-top:4px; }
.v51linha > span:first-child { flex:1; min-width:220px; display:grid; gap:2px; }
.v51linha b { font-size:13.4px; font-weight:600; color:var(--c-text); }
.v51linha small { font-size:12px; color:var(--c-text-3); }
.v51linha small svg { display:inline-block; vertical-align:-2px; }
.v51seg { display:inline-flex; padding:3px; border-radius:10px; background:var(--c-raised); border:1px solid var(--c-border); gap:2px; }
.v51seg button { height:30px; padding:0 12px; border:0; border-radius:7px; background:none; font-family:var(--f-ui); font-size:12.8px; color:var(--c-text-2); cursor:pointer; }
.v51seg button:hover { color:var(--c-text); }
.v51seg button.on { background:var(--c-hover); color:var(--c-text); font-weight:600; box-shadow:0 0 0 1px var(--c-border-2) inset; }
@media (max-width:900px) { .v51jans { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:599px) { .v51jans { grid-template-columns:minmax(0, 1fr); } }

/* Cor de destaque (as do app de estudos + "Do estilo" e "Cor livre", que são só daqui) */
.ajacentos { display:flex; flex-wrap:wrap; gap:12px; }
.ajacento { position:relative; display:grid; justify-items:center; gap:5px; min-width:52px; padding:0; border:0; background:none; font-family:var(--f-ui); cursor:pointer; }
.ajacento span { width:34px; height:34px; border-radius:99px; display:grid; place-items:center; color:#FFFFFF; box-shadow:0 0 0 1px rgba(0,0,0,.12) inset; transition:transform .12s ease-out; }
.ajacento:hover span { transform:scale(1.07); }
.ajacento.on span { box-shadow:0 0 0 2px var(--c-surface), 0 0 0 4px var(--c-text-2); }
.ajacento small { font-size:11.6px; color:var(--c-text-2); }
.ajacento.on small { color:var(--c-text); font-weight:600; }
.ajacento.livre > span { background:conic-gradient(#F87171, #FBBF24, #34D399, #38BDF8, #A78BFA, #F472B6, #F87171); }
.ajacento.livre input[type=color] { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; border:0; padding:0; }
@media (prefers-reduced-motion:reduce) { .ajacento span, .ajtema, .v51jan { transition:none; } }

/* as opções que só existem aqui (Estilo, Menu, Caixas de texto, Jeito das telas) com o mesmo cartão das de cima */
#cfg-aparencia .ap-op { line-height:1.55; padding:10px; gap:6px; border-radius:12px; border:1.5px solid var(--c-border); background:var(--c-raised); box-shadow:none; transition:border-color .14s ease-out; }
#cfg-aparencia .ap-op:hover { border-color:var(--c-border-2); }
#cfg-aparencia .ap-op[aria-checked="true"] { border-color:var(--c-accent); box-shadow:none; }
#cfg-aparencia .ap-op .ap-ok { display:none; }
#cfg-aparencia .ap-op b { font-size:13.4px; }
#cfg-aparencia .ap-op small { font-size:11.9px; line-height:1.4; color:var(--c-text-3); }

/* Dados e aparelho › Este aparelho (o .ajnums/.ajacoes/.hint do app de estudos): cada parte a 12px da outra
   (antes os números, a data da cópia, o botão e o aviso ficavam grudados) e os números em caixas de 120px */
html #ds-aparelho-corpo { display:grid; gap:12px; }
html .ds-nums, html .ds-nums.ds-nums-3 { grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); }
html .ds-nums > div { gap:2px; border-radius:10px; }
html .ds-nums b { line-height:22px; letter-spacing:0; }
html .ds-nums small { font-size:11.8px; }

/* a página com as mesmas margens do app de estudos (o .wrap de lá, 07/10): 16px à esquerda, 19px à direita,
   16px em cima (6px nas molduras "ilhas"/"painel") e 17px embaixo; no celular 16px dos lados até 767px,
   12px até 599px e 9px até 359px. --pag-e/--pag-d: quem vai de ponta a ponta usa as mesmas medidas. */
:root { --pag-e:16px; --pag-d:19px; }
@media (max-width:767px) { :root { --pag-d:16px; } }
@media (max-width:599px) { :root { --pag-e:12px; --pag-d:12px; } }
@media (max-width:359px) { :root { --pag-e:9px; --pag-d:9px; } }
html .app { max-width:none; padding-top:16px; padding-left:var(--pag-e); padding-right:var(--pag-d); padding-bottom:17px; }
@media (min-width:1921px) { html .app { max-width:1440px; } }

/* títulos das telas iguais aos do app de estudos (.vtitle 19,8px/600 e .vsub 13px), 07/10 */
html .nv-h1 { font-size:19.8px; line-height:26.4px; font-weight:600; letter-spacing:0; }
html .nv-sub { font-size:13px; line-height:18.6px; color:var(--c-text-2); }
@media (max-width:767px) { html .nv-h1 { font-size:17.8px; line-height:23.7px; } }

/* celular: a barra de baixo igual à do app de estudos (.bnav de lá, 07/10): 44px (+ a folga do iPhone), fundo da
   lateral, ícones de 17px com traço 1,7 e nomes de 10px; a aba aberta só muda de cor */
@media (max-width:720px) {
  html .bnav { padding:0 0 env(safe-area-inset-bottom, 0px); background:var(--c-side); border-top:1px solid var(--c-border); box-shadow:none; }
  html .bnav button { min-height:44px; gap:4px; border-radius:0; color:var(--c-text-2); font-size:10px; line-height:16px; font-weight:400; }
  html .bnav button svg { width:17px; height:17px; }
  html .bnav button[aria-current="page"], html .bnav button.ativo { color:var(--c-accent-text); font-weight:500; }
  html .bnav button[aria-current="page"] svg, html .bnav button.ativo svg { filter:none; }
  html .bnav button:active { background:none; }
  html .toast-stack, html .orc-link-manual { bottom:calc(56px + env(safe-area-inset-bottom, 0px)); }
  html .app { padding-bottom:calc(80px + env(safe-area-inset-bottom, 0px)); }
}

/* nada empurra o cartão para fora (07/10, achado pela conferência de layout): o cartão é uma grade, e um nome
   comprido que não quebra (ranking de locais, destaques da Análise) alargava a coluna além do cartão */
html .nv-cartao > * { min-width:0; }
html .rank-list > *, html .an-dest > * { min-width:0; }
/* destaque com nome comprido ("Melhor cliente: Maria Eduarda…"): o nome encolhe com reticências e o título continua à vista */
html .an-dest-it em { max-width:min(46vw, 260px); overflow:hidden; text-overflow:ellipsis; text-align:right; }
html #view-analise .rank-line > .rank-name { flex:1; min-width:0; }
html #view-analise .rank-line > .rank-val { flex:none; }

/* barras de filtro (Agenda, Orçamentos, Contratos, Comissões): em tela média (768–1024px, com a lateral) os
   botões passam para a linha de baixo em vez de sair da tela (achado pela conferência de layout, 07/10) */
html .nv-ferramentas { flex-wrap:wrap; row-gap:8px; }
html .nv-ferramentas .nv-busca-local { min-width:200px; }
/* Análise › comparação com o ano passado: a variação quebra a linha em vez de sair do cartão */
html .an-comp .an-var { white-space:normal; max-width:100%; }

/* logo do app = o fone de DJ (escolha do Renato em 07/10), sem quadrado atrás e sempre DOURADO, o mesmo
   dourado do ícone do app (não muda com o estilo nem com a cor de destaque; --c-logo vem do tema.js) */
html .nv-marca-mono { color:var(--c-logo); }
/* tela de entrada: o fone dourado no quadrado marinho, como o ícone do app */
html .auth-logo { background:var(--c-logo-quadro); color:var(--c-logo-ouro); box-shadow:0 8px 22px rgba(0,0,0,.28); }

/* ============================================================
   APP NA TELA INICIAL DO IPHONE (07/10, "celular-topo")
   Desde o iOS 26 o sistema desenha um desfoque ("Liquid Glass") no alto da tela,
   uns 40pt além do relógio, POR CIMA do app: o topo ficava borrado e os botões de
   cima (busca, sino, Fechar) difíceis de tocar. Nenhum CSS ou meta desliga isso; o
   jeito que funciona é deixar tudo o que é de tocar abaixo dessa faixa. 40px deixou
   espaço demais em cima ("espaço gigantesco", 07/10); pela foto do Renato o borrado é
   forte até ~80pt do alto e some perto dos 100pt: 24px punha os ícones do topo a ~105pt. 15/10 (pedido do Renato:
   "o começo da tela está muito embaixo ainda… mais em cima, mas que dê para mexer e clicar"): 8px, os ícones a ~90pt. 19/10 (print
   dele: "o topo da tela está cortando a parte de cima do app" — o número do sino ficava dentro do borrado, que vai até ~83pt):
   16px, no meio do caminho, e o número do sino desce para dentro do botão (fora da faixa). Ainda borrado ("aumente o limite da
   tela"): o painel tirou a meta black-translucent e a barra do relógio passou a ser a do iPhone, na cor do topo; o app começa
   logo abaixo dela, sem a faixa (o --topo-seguro fica 0 nessa instalação nova). A faixa fica
   com a cor do topo (o desfoque sobre uma cor lisa não aparece). Só no app do iPhone
   (tema.js marca html[data-app-ios]) e de pé; no navegador, --topo-seguro = a folga
   do relógio (zero fora do iPhone). Quem encosta no alto da tela usa --topo-seguro.
   ============================================================ */
:root { --topo-seguro:env(safe-area-inset-top, 0px); }
@media (orientation:portrait) {
  /* 19/10: com a barra do relógio do próprio iPhone (sem a meta black-translucent), o app começa abaixo dela e a safe-area é 0:
     sem folga nenhuma. A instalação antiga (o app ainda por baixo da barra, safe-area ~59pt) continua com os 16px até ser refeita. */
  html[data-app-ios] { --topo-seguro:calc(env(safe-area-inset-top, 0px) + min(16px, env(safe-area-inset-top, 0px))); }
}
@media (max-width:720px) {
  /* janelas: nunca começam dentro da faixa do relógio */
  html .modal-overlay { padding-top:calc(var(--topo-seguro) + 12px); }
  html .modal-overlay .modal { max-height:calc(100dvh - var(--topo-seguro) - 32px); }
}

/* ============================================================
   FORMULÁRIO DE EVENTO E CADASTRO DO COMISSIONADO (07/10, "formulario-evento")
   Pedido do Renato: "feio, pouco profissional, ruim de usar"; os blocos abertos
   pareciam o app antigo. Agora: ilhas (como as páginas do app) sobre o fundo da
   janela; tudo à vista; no computador, duas colunas; no celular, uma.
   ============================================================ */
html .modal.fe2 { max-width:980px; }
html .modal.fe2-ct { max-width:580px; }
html .nv-janela .fe2-corpo { background:var(--c-bg); padding:16px; }
.fe2-grade { display:grid; gap:14px; align-items:start; }
.fe2-col { display:grid; gap:14px; align-content:start; min-width:0; }
@media (min-width:900px) { .fe2-grade { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); } }
/* uma coluna (celular e janela estreita): Observação vai para o fim, depois de Mais detalhes */
@media (max-width:899.98px) { .fe2-col { display:contents; } #fe-ilha-obs { order:9; } }
.fe2-corpo > .fe2-ilha + .fe2-ilha { margin-top:14px; }
.fe2-ilha { display:grid; gap:12px; padding:14px 16px 16px; background:var(--c-surface); border:1px solid var(--c-border); border-radius:12px; min-width:0; }
[data-modo="claro"] .fe2-ilha { box-shadow:0 1px 2px rgba(20,30,45,.04); }
.fe2-tit { display:flex; align-items:center; gap:8px; margin:0; font-family:var(--f-ui); font-size:calc(14px * var(--k-fs)); font-weight:600; color:var(--c-text); letter-spacing:0; text-transform:none; }
.fe2-tit .nv-ic { color:var(--c-text-3); flex:none; }
.fe2-tit small { margin-left:auto; font-size:12px; font-weight:400; color:var(--c-text-3); }
html .nv-janela .fe2-ilha .form-grid { gap:12px 14px; }
/* (entrega 1 de Propostas) os campos encolhem com a coluna: a lista de tipos tem nomes longos e alargava a ilha Evento */
.fe2-ilha .form-field { min-width:0; }
.fe2-ilha .form-field > select, .fe2-ilha .form-field > input { min-width:0; max-width:100%; }
.fe-ajuda { margin:0; font-size:12px; line-height:1.45; color:var(--c-text-3); font-weight:400; }
.fe-ajuda[hidden] { display:none; }
.fe-opc { font-size:12px; font-weight:400; color:var(--c-text-3); }

/* caixas de escolher (todas as janelas): a setinha desenhada, no lugar certo */
html .nv-janela .form-field select { appearance:none; -webkit-appearance:none; padding-right:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B98A8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; background-size:16px; cursor:pointer; }

/* R$ antes e % depois do número, dentro do campo */
.fe2-moeda, .fe2-sufixo { position:relative; display:flex; min-width:0; }
.fe2-moeda[hidden], .fe2-sufixo[hidden] { display:none; }
.fe2-moeda > span, .fe2-sufixo > span { position:absolute; top:0; bottom:0; display:flex; align-items:center; font-size:13px; color:var(--c-text-3); pointer-events:none; }
.fe2-moeda > span { left:11px; }
.fe2-sufixo > span { right:12px; }
html .nv-janela .fe2-moeda input { width:100%; padding-left:35px; }
html .nv-janela .fe2-sufixo input { width:100%; padding-right:30px; }

/* horários: as linhas e, embaixo à esquerda, "Adicionar horário" (como no app de estudos) */
html .nv-janela .fe-hor-row { gap:8px; margin:0 0 8px; }
html .nv-janela .fe-hor-row input[type=time] { flex:1; min-width:0; }
html .nv-janela .fe-hor-as { font-size:12.5px; color:var(--c-text-3); }
html .nv-janela .fe-hor-rem { width:36px; height:36px; display:grid; place-items:center; font-size:0; border:1px solid var(--c-border-2); border-radius:var(--r-md); background:none; color:var(--c-text-2); }
html .nv-janela .fe-hor-rem:hover { color:var(--c-bad); border-color:var(--c-bad); background:var(--c-bad-soft); }
html .nv-janela .fe-hor-row:only-child .fe-hor-rem { display:none; }
.fe2-hor-pe { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.fe2-hor-total { font-size:12.5px; color:var(--c-text-3); font-variant-numeric:tabular-nums; }

/* a conta: comissão, imposto e líquido, ao vivo */
.fe2-conta { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; padding:10px 12px; background:var(--c-bg); border:1px solid var(--c-border); border-radius:10px; }
.fe2-conta > div { display:grid; gap:1px; min-width:0; }
.fe2-conta span { font-size:12px; color:var(--c-text-3); }
.fe2-conta b { font-size:calc(14.5px * var(--k-fs)); font-weight:650; color:var(--c-text); font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fe2-conta .liq b { color:var(--c-ok); }

/* quem recebe a comissão */
.fe2-pessoa { display:flex; align-items:center; gap:12px; padding:10px 12px; background:var(--c-bg); border:1px solid var(--c-border); border-radius:10px; min-width:0; }
.fe2-pessoa.vazio { background:none; border-style:dashed; }
.fe2-av { flex:none; width:36px; height:36px; border-radius:50%; display:grid; place-items:center; font-size:13px; font-weight:650; letter-spacing:.3px;
  color:var(--c-accent-text); background:color-mix(in srgb, var(--c-accent) 16%, transparent); }
.fe2-pessoa.vazio .fe2-av { color:var(--c-text-3); background:var(--c-hover); }
.fe2-av.pq { width:30px; height:30px; font-size:12px; }
.fe2-pessoa-tx { flex:1; min-width:0; display:grid; gap:1px; }
.fe2-pessoa-tx b { font-size:calc(13.5px * var(--k-fs)); font-weight:600; color:var(--c-text); line-height:1.3; overflow-wrap:anywhere; }
.fe2-pessoa-tx small { font-size:12px; color:var(--c-text-2); line-height:1.35; }
.fe2-pessoa-tx small.falta { color:var(--c-warn); }
.fe2-nw { white-space:nowrap; }
.fe2-pessoa-acoes { flex:none; display:flex; gap:6px; }
.fe2-aviso { display:flex; align-items:center; flex-wrap:wrap; gap:8px 10px; padding:8px 10px 8px 12px; border-radius:9px; background:var(--c-warn-soft); color:var(--c-warn); font-size:12.5px; line-height:1.4; }
.fe2-aviso > span { flex:1 1 200px; color:var(--c-text-2); }
.fe2-aviso .nv-ic { flex:none; }

/* a comissão deste evento */
.fe2-regra { display:grid; gap:8px; }
.fe2-regra[hidden] { display:none; }
.fe2-regra-cab { display:flex; align-items:center; justify-content:space-between; gap:8px 12px; flex-wrap:wrap; }
.fe2-rot { font-size:calc(12.5px * var(--k-fs)); font-weight:500; color:var(--c-text-2); }
.fe2-regra-linha { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.fe2-regra-linha .fe2-sufixo, .fe2-regra-linha .fe2-moeda { width:150px; flex:none; }
.fe2-igual { font-size:13px; color:var(--c-text-2); font-variant-numeric:tabular-nums; }
.fe2-igual b { color:var(--c-text); font-weight:650; }
html .nv-janela .fe2-regra input { background:var(--c-bg); color:var(--c-text); border:1px solid var(--c-border-2); border-radius:var(--r-md); padding:8px 11px; min-height:36px;
  font-family:var(--f-ui); font-size:calc(13.5px * var(--k-fs)); }
html .nv-janela .fe2-regra input:hover { border-color:var(--c-text-3); }
html .nv-janela .fe2-regra input:focus { outline:none; border-color:var(--c-accent); box-shadow:0 0 0 1px var(--c-accent); }

/* botões lado a lado: % do bruto | Valor fixo; Pessoa física | Empresa */
.fe2-seg.nv-seg { display:inline-flex; justify-self:start; padding:2px; gap:2px; border-radius:9px; background:var(--c-hover); max-width:100%; }
.fe2-seg.nv-seg > button { height:27px; padding:0 12px; border:0; border-radius:7px; background:none; color:var(--c-text-2); font-family:var(--f-ui);
  font-size:calc(12.5px * var(--k-fs)); font-weight:500; cursor:pointer; white-space:nowrap; }
.fe2-seg.nv-seg > button:hover { color:var(--c-text); }
html .fe2-seg.nv-seg > .on, html .fe2-seg.nv-seg > [aria-pressed="true"] { background:var(--c-prim); color:var(--c-prim-text); font-weight:600; }

/* quadro "Escolher comissionado" */
html .nv-pop.fe2-pop { width:360px; padding:0; gap:0; display:flex; flex-direction:column; overflow:hidden; }
html .nv-pop.fe2-pop[hidden] { display:none; }
.fe2-pop-busca { flex:none; display:flex; align-items:center; gap:8px; height:44px; padding:0 12px; border-bottom:1px solid var(--c-border); color:var(--c-text-3); }
.fe2-pop-busca input { flex:1; min-width:0; height:100%; border:0; outline:0; background:none; color:var(--c-text); font-family:var(--f-ui); font-size:13.5px; }
.fe2-pop-busca input::-webkit-search-cancel-button { -webkit-appearance:none; }
.fe2-pop-lista { flex:1 1 auto; min-height:0; max-height:300px; overflow-y:auto; overscroll-behavior:contain; padding:6px; display:grid; gap:2px; align-content:start; }
.fe2-op { display:flex; align-items:center; gap:10px; width:100%; padding:7px 8px; border:0; border-radius:8px; background:none; color:var(--c-text); text-align:left; cursor:pointer; font-family:var(--f-ui); }
.fe2-op:hover, .fe2-op:focus-visible { background:var(--c-hover); outline:none; }
.fe2-op > .nv-ic { flex:none; color:var(--c-accent-text); }
.fe2-op-tx { flex:1; min-width:0; display:grid; gap:1px; }
.fe2-op-tx b { font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fe2-op-tx small { font-size:12px; color:var(--c-text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fe2-op.novo .fe2-av { color:var(--c-accent-text); background:var(--c-accent-soft); }
.fe2-pop-vazio { margin:0; padding:18px 12px; text-align:center; font-size:12.5px; line-height:1.5; color:var(--c-text-2); }
.fe2-pop-pe { flex:none; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px; border-top:1px solid var(--c-border); }

/* cadastro do comissionado: tipo da chave Pix em botões */
.fe2-chips { display:flex; flex-wrap:wrap; gap:6px; }
.fe2-chips > button { height:30px; padding:0 12px; border:1px solid var(--c-border-2); border-radius:8px; background:none; color:var(--c-text-2);
  font-family:var(--f-ui); font-size:calc(12.5px * var(--k-fs)); font-weight:500; cursor:pointer; }
.fe2-chips > button:hover { background:var(--c-hover); color:var(--c-text); }
html .fe2-chips > button[aria-pressed="true"] { background:var(--c-prim); border-color:transparent; color:var(--c-prim-text); font-weight:600; }
#ct-pix-campos[hidden], #ct-pix-semchave[hidden] { display:none; }
.cx-ok { display:inline-flex; align-items:center; gap:4px; font-size:12px; color:var(--c-ok); }
#ct-pix-hint:empty { display:none; }

/* rodapé: Cancelar e Salvar lado a lado também no celular */
html .nv-janela .fe2-pe { flex-direction:row; flex-wrap:nowrap; }

@media (max-width:720px) {
  html .nv-janela .fe2-corpo { padding:12px; }
  .fe2-ilha { padding:13px 13px 14px; }
  html .nv-janela .fe2-pe .btn { width:auto; flex:1 1 0; }
  .fe2-pessoa { flex-wrap:wrap; }
  .fe2-pessoa-acoes { width:100%; }
  .fe2-pessoa-acoes .nv-btn { flex:1 1 0; height:38px; }
  .fe2-hor-pe .nv-btn, .fe2-pop-pe .nv-btn { height:38px; }
  .fe2-regra-linha .fe2-sufixo, .fe2-regra-linha .fe2-moeda { width:130px; }
  .fe2-seg.nv-seg > button, .fe2-chips > button { height:34px; }
  html .nv-pop.fe2-pop.folha { width:auto; padding:0 0 env(safe-area-inset-bottom, 0px); }
  html .nv-pop.fe2-pop.folha .fe2-pop-lista { max-height:none; }
  .fe2-pop-busca { height:50px; }
  .fe2-op { padding:9px 8px; }
  html .nv-janela .fe-hor-rem { width:44px; height:44px; }
}

/* ============================================================
   CELULAR COM O MESMO DESENHO DO COMPUTADOR (07/10, "celular-igual")
   Pedido do Renato: "quero os mesmos desenhos de tudo para o celular" (escolheu
   "tudo igual, só empilhado"). Antes, no celular, os botões viravam só ícone ou
   ocupavam a linha inteira com 44px, a situação sumia do Início, das linhas da Agenda
   e o rodapé das janelas empilhava. Agora são os mesmos botões (com nome), as mesmas
   etiquetas e linhas do computador; só a arrumação muda (o que não cabe vai para a
   linha de baixo, como no app de estudos). Medidas no celular: 36px (--h-cel) nos
   botões e campos, 40px nos botões do rodapé das janelas.
   ============================================================ */
@media (max-width:720px) {
  :root { --h-cel:36px; --h-cel-pe:40px; }

  /* "+ Novo …" com o nome, ao lado do título (Agenda, Orçamentos, Contratos, Comissões) */
  html :is(#view-eventos, #view-orcamentos) .nv-cabeca-acoes > .nv-btn.primario { width:auto; height:var(--h-cel); padding:0 12px; }
  html :is(#view-eventos, #view-orcamentos) .nv-cabeca-acoes > .nv-btn.primario span { display:inline; }
  html #view-comissoes .nv-cabeca { flex-wrap:nowrap; align-items:flex-start; }
  html #view-comissoes .nv-cabeca > div:first-child { flex:1; min-width:0; }
  html #view-comissoes .nv-cabeca-acoes { display:flex; width:auto; margin-left:auto; flex:none; }
  html #view-comissoes #cx-novo-contato { width:auto; height:var(--h-cel); padding:0 12px; }
  html #view-comissoes #cx-novo-contato span { display:inline; }

  /* barra de filtros: busca numa linha; Período, Filtros/Situação e Lista/Calendário embaixo
     (com o nome, como no computador; o que não couber desce para a linha de baixo) */
  html .nv-ferramentas .nv-busca-local, html :is(#view-eventos, #view-orcamentos, #view-comissoes) .nv-busca-local { height:var(--h-cel); }
  html .nv-ferramentas .nv-pbtn { height:var(--h-cel); }
  html #view-eventos .nv-ferramentas .evt-view-toggle.nv-seg { height:var(--h-cel); margin-left:auto; }
  html #view-eventos .nv-ferramentas .evt-view-btn { font-size:calc(12.5px * var(--k-fs)); gap:6px; padding:0 10px; height:auto; }
  html #view-eventos .nv-ferramentas .evt-view-btn .nv-ic { width:14px; height:14px; }
  html :is(#view-eventos, #view-orcamentos) .ac-ir-mes, html #agenda-cards .ac-ir-mes { min-height:var(--h-cel); }
  html #view-orcamentos .nv-abas .subtab { height:var(--h-cel); }

  /* Agenda: a situação que muda na própria linha (com a setinha) e o "de R$ X bruto", como no
     computador. A caixa de escolher fica invisível por cima da etiqueta, com 16px de letra:
     tocar abre a lista do celular sem o iPhone dar zoom. */
  html #agenda-cards .ac-situacao { position:relative; }
  html #agenda-cards .ac-situacao .nv-pill { display:inline-flex; height:24px; padding:0 9px; gap:6px; }
  html #agenda-cards .ac-situacao .nv-pill::before { display:none; }
  html #agenda-cards .ac-situacao .nv-pill::after { content:''; width:5px; height:5px; margin:-3px 1px 0 0; border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor; transform:rotate(45deg); }
  html #agenda-cards .ac-situacao .status-sel { display:block; position:absolute; inset:0; width:100%; max-width:none; height:100%; opacity:0; font-size:16px; cursor:pointer; }
  html #agenda-cards .ac-valores small { display:block; }
  html :is(#view-eventos, #view-orcamentos) .agenda-card .ac-menu > summary.orc-menu-sum,
  html #agenda-cards .agenda-card .ac-menu > summary.orc-menu-sum { width:var(--h-cel); height:var(--h-cel); font-size:18px; }

  /* Início: próximos eventos com a situação embaixo do valor */
  html .nv-ev { grid-template-columns:42px minmax(0, 1fr) auto; grid-template-areas:"d t v" "d t s"; row-gap:4px; }
  html .nv-ev > .nv-data { grid-area:d; }
  html .nv-ev > span:nth-of-type(2) { grid-area:t; }
  html .nv-ev .stc { display:flex; grid-area:s; justify-self:end; }
  html .nv-ev .val { grid-area:v; }

  /* Pendências: o ícone, a etiqueta e o valor; o botão do lado, não na linha inteira */


  /* Análise e Saúde: abas e períodos no tamanho dos botões */
  html .an-nav button { height:var(--h-cel); }
  html #view-saude .saude-per-btn { height:30px; }
  html .sd-frase .nv-btn { width:auto; height:var(--h-cel); }

  /* rodapés das janelas: os botões lado a lado, como no computador */
  html .nv-janela .modal-foot { flex-direction:row; flex-wrap:wrap; }
  html .nv-janela .modal-foot .btn { width:auto; flex:1 1 0; min-width:max-content; height:var(--h-cel-pe); }
  html .nv-janela .cd-foot .btn, html .nv-janela .det-mais > summary.btn, html .nv-janela .cd-linkbtns .btn { height:var(--h-cel-pe); }
  html #modal-cx-det .cxd-rodape > .nv-btn, html #modal-cx-det .cxd-rodape .det-mais > summary.btn { height:var(--h-cel-pe); }
  html #modal-pagar-passos .pp-rodape .nv-btn, html #modal-pagar-passos .pp-copiar { height:var(--h-cel-pe); }
  html #modal-msg-pronta .mp-rodape .nv-btn, html #modal-msg-pronta .mp-rodape .mp-email-menu > summary { height:var(--h-cel-pe); font-size:13.5px; }
  html .nv-janela .modal-close { width:36px; height:36px; }

  /* sino: o botão principal e o segundo no tamanho de sempre, lado a lado (como no computador) */
  html .nf-acoes .nv-btn, html .nf-mais { height:var(--h-cel); }

  /* formulário de evento: os mesmos 36px */
  html .fe2-pessoa-acoes .nv-btn, html .fe2-hor-pe .nv-btn, html .fe2-pop-pe .nv-btn { height:var(--h-cel); }
  html .nv-janela .fe-hor-rem { width:40px; height:40px; }
}

/* ============================================================
   BOTÕES "PÍLULA" (07/10, "botoes-pilula"; o Renato escolheu entre 6 desenhos)
   Todos os botões do painel bem redondos e um pouco mais altos: 34px (pequenos
   28px; as medidas ficam no tema.js, --h-btn/--h-btn-sm). Os de só ícone (⋯,
   fechar, sino, ✕ do horário, setas) ficam redondos. Os botões lado a lado
   (Lista | Calendário, Ano | Mês, % do bruto | Valor fixo, períodos da Saúde,
   Lateral…) viram uma pílula com pílulas dentro. A busca de cada tela acompanha
   (mesma altura e cantos), para a linha dos filtros ficar inteira. Páginas do
   cliente e PDFs continuam com a identidade oficial, sem mudança.
   Botão novo: use .nv-btn (já sai pílula). Os cantos aqui levam !important de propósito:
   várias regras antigas de cada tela davam cantos próprios aos botões.
   ============================================================ */
html :is(.nv-btn, .btn, .nv-pbtn, .nv-busca-campo, .nv-ajtopo, .nv-chip, .nv-ativo, .fe2-chips > button, .toast-acao, .pd-acao, .pd-gacao, .sd-ir, .nv-ver-agenda, .ctr-modelo-chip, .ctr-modelo-util, .whats-btn, .cat-sel-add, .cat-sel-tool, .pp-mais-btn, .pp-copiar, .uf-trocar, .uf-remover, .ac-ir-mes, .mp-email-menu > summary, details.det-mais > summary.btn, .cxd-link) { border-radius:999px !important; }
html :is(.orc-menu-sum, .modal-close, .icon-btn, .nf-mais, .cal-nav-btn, .fe-hor-rem, .nv-recolher, .lembretes-bell, .olm-x, .src-x, .nf-canto-x) { border-radius:50% !important; }
/* lado a lado: a pílula de fora e as de dentro */
html :is(.nv-seg, .toggle-group, .periodo-tabs, .v51seg, .saude-periodo, .pd-modo, .mp-para-seg, .fe2-seg) { border-radius:999px !important; }
html :is(.nv-seg, .toggle-group, .periodo-tabs, .v51seg, .saude-periodo, .pd-modo, .mp-para-seg, .fe2-seg) > button,
html :is(.toggle-btn, .periodo-tab, .saude-per-btn, .evt-view-btn) { border-radius:999px !important; }
html .fe2-seg.nv-seg > button, html :is(#view-eventos, #view-orcamentos) .evt-view-btn { padding:0 13px; }
/* alturas: a linha dos filtros toda com 34px */
html .nv-busca-local { height:var(--h-btn); border-radius:999px; padding:0 14px; }
html .nv-pbtn { height:var(--h-btn); padding:0 12px 0 14px; }
html .nv-janela :is(.modal-foot, .cd-foot) .btn { padding:0 18px; }
html .btn.small { padding:6px 13px; }
html .nv-chip { height:30px; padding:0 12px; }

/* ============================================================
   BOTÕES NA COR DO APP (07/10; o Renato escolheu "C" entre 4 jeitos)
   Botão de WhatsApp verde, de Pix verde-água, de PDF vermelho, de Gmail e de
   Google Maps brancos, com o logo do próprio app. Quem decide é o desenho dentro
   do botão (o _ic põe data-ic="chat|pix|pdf|gmail|mapa"): botão novo com
   _ic('chat') já sai verde. Nos menus ⋯ só o desenho ganha a cor do app.
   O texto escuro no verde e no verde-água é de propósito (o branco não dá contraste).
   ============================================================ */
html :is(.nv-btn, .btn, button.nv-btn):has(svg[data-ic="chat"]) { background:#25D366 !important; color:#0B2E1A !important; border-color:transparent !important; }
html :is(.nv-btn, .btn):has(svg[data-ic="pix"]) { background:#32BCAD !important; color:#06302B !important; border-color:transparent !important; }
html :is(.nv-btn, .btn):has(svg[data-ic="pdf"]) { background:#E5252A !important; color:#fff !important; border-color:transparent !important; }
html :is(.nv-btn, .btn):has(svg[data-ic="gmail"]), html :is(.nv-btn, .btn):has(svg[data-ic="mapa"]) { background:#fff !important; color:#202124 !important; border-color:transparent !important; }
[data-modo="claro"] :is(.nv-btn, .btn):has(svg[data-ic="gmail"]), [data-modo="claro"] :is(.nv-btn, .btn):has(svg[data-ic="mapa"]) { border-color:var(--c-border-2) !important; }
html :is(.nv-btn, .btn):has(svg:is([data-ic="chat"], [data-ic="pix"], [data-ic="pdf"], [data-ic="gmail"], [data-ic="mapa"])):hover { filter:brightness(1.07); }
html :is(.nv-btn, .btn):has(svg:is([data-ic="chat"], [data-ic="pix"], [data-ic="pdf"])) svg { color:inherit; }
/* nos menus ⋯ e nas listas: só o desenho na cor do app */
html .orc-menu-pop svg[data-ic="chat"], html .nf-ic svg[data-ic="chat"] { color:#25D366; }
html .orc-menu-pop svg[data-ic="pix"] { color:#32BCAD; }
html .orc-menu-pop svg[data-ic="pdf"] { color:#E5252A; }
.det-mapa { display:flex; justify-content:flex-end; padding-top:8px; }

/* ============================================================
   COR DO CARTÃO DO COMISSIONADO (08/10, CoresComiss): as bolinhas com o mesmo
   degradê do cartão, "Automática" (a cor do nome) e a prévia na janela do ⋯.
   ============================================================ */
.cor-grade { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.cor-bt { display:inline-flex; align-items:center; justify-content:center; gap:7px; width:36px; height:36px; padding:0; border-radius:50%; border:2px solid transparent;
  background:none; cursor:pointer; color:var(--c-text); font:500 12.5px var(--f-ui); }
.cor-bt.cor-auto { width:auto; padding:0 12px 0 4px; border-radius:99px; border-color:var(--c-border-2); }
.cor-bola { flex:none; width:26px; height:26px; border-radius:50%;
  background:radial-gradient(130% 110% at 100% 0%, hsl(var(--h, 36) 72% 50%) 0%, hsl(calc(var(--h, 36) + 28) 62% 28%) 60%, #0D1015 110%); }
.cor-bt[aria-pressed="true"] { border-color:var(--c-accent); }
.cor-bt:hover .cor-bola { filter:brightness(1.12); }
.cor-prev { display:flex; align-items:center; gap:10px; margin-bottom:16px; padding:18px; border-radius:16px; color:#fff;
  background:radial-gradient(130% 110% at 100% 0%, hsl(var(--h, 36) 72% 42%) 0%, hsl(calc(var(--h, 36) + 28) 62% 23%) 55%, #0D1015 100%); }
.cor-prev b { flex:1; min-width:0; font-size:15px; font-weight:650; }
.cor-prev .cor-av { flex:none; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:700; letter-spacing:.5px; color:#fff; background:rgb(255 255 255 / .18); }
#cx-cor-ov .fe-ajuda { margin-top:12px; }
@media (max-width:720px) { .cor-bt { width:40px; height:40px; } .cor-bt.cor-auto { width:auto; } .cor-bola { width:28px; height:28px; } }

/* ============================================================
   PENDÊNCIAS EM COLUNAS (08/10, escolha do Renato: opção "C", só as colunas)
   Por quando (Atrasados · Para hoje · Esta semana · Mais para frente) ou por
   assunto; um cartão por pendência (Notificacoes._cartaoPd). No celular as
   colunas ficam de lado e você arrasta (cada uma com 86% da tela).
   ============================================================ */
#pd-lista.pd-colunas { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(260px, 1fr); gap:16px; align-items:start; overflow-x:auto; padding-bottom:4px; }
.pd-col { display:grid; grid-template-columns:minmax(0, 1fr); gap:10px; min-width:0; padding:12px; border-radius:16px; border:1px solid var(--c-border);
  background:color-mix(in srgb, var(--c-surface) 55%, transparent); transition:box-shadow .2s; }
.pd-col.on { box-shadow:0 0 0 2px var(--c-accent); }
.pd-col-cab { display:flex; align-items:center; gap:8px; min-height:30px; margin:0 4px; }
.pd-col-cab { min-width:0; } .pd-col-cab h2 { min-width:0; margin:0; font-size:calc(13.5px * var(--k-fs)); font-weight:650; color:var(--c-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pd-col-cab .pd-gn { flex:none; }
.pd-col-cab .pd-gacao { margin-left:auto; flex:none; gap:6px; }
.pd-col-itens { display:grid; gap:10px; }
.pd-card { display:grid; gap:6px; min-width:0; padding:14px; border-radius:12px; background:var(--c-surface); border:1px solid var(--c-border); }
.pd-card:hover { border-color:var(--c-border-2); }
.pd-card-topo { display:flex; align-items:center; gap:8px; min-height:24px; }
.pd-tag { font:600 11px var(--f-ui); padding:2px 8px; border-radius:99px; color:var(--nc); background:color-mix(in srgb, var(--nc) 15%, transparent); white-space:nowrap; }
.pd-quando-t { font-size:11.5px; font-weight:600; color:var(--pc, var(--c-text-3)); white-space:nowrap; }
.pd-card-topo .nf-mais { margin-left:auto; flex:none; }
.pd-card-tit { font-size:calc(13.5px * var(--k-fs)); font-weight:650; line-height:1.35; color:var(--c-text); overflow-wrap:anywhere; }
.pd-card-desc { font-size:calc(12px * var(--k-fs)); line-height:1.4; color:var(--c-text-3); overflow-wrap:anywhere; }
.pd-card-pe { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:4px; }
.pd-card-pe .pd-val { font-size:calc(14px * var(--k-fs)); }
.pd-card-pe .pd-acao { flex:none; gap:6px; white-space:nowrap; }
.pd-col-vazio { padding:22px 10px; text-align:center; font-size:12.5px; color:var(--c-text-3); border:1.5px dashed var(--c-border-2); border-radius:12px; }
@media (max-width:720px) {
  #pd-lista.pd-colunas { display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
    margin:0 calc(-1 * var(--pag-d, 12px)) 0 calc(-1 * var(--pag-e, 12px)); padding:0 var(--pag-d, 12px) 8px var(--pag-e, 12px); scroll-padding-left:var(--pag-e, 12px); }
  #pd-lista.pd-colunas::-webkit-scrollbar { display:none; }
  .pd-col { flex:0 0 86%; scroll-snap-align:start; }
  html .pd-card .pd-acao, html .pd-col-cab .pd-gacao { height:var(--h-cel, 36px); }
}

/* ============================================================
   LER O COMPROVANTE (08/10, LerComprovante): soltar o arquivo na tela de
   Comissões, a janela "Conferir o comprovante", o resumo de vários e a
   linha "Confere: Pix de R$ X…" do pagamento em 3 passos.
   ============================================================ */
#view-comissoes.cx-soltar::after { content:'Solte aqui o comprovante ou o extrato'; position:fixed; inset:12px; z-index:60; display:grid; place-items:center;
  border:2px dashed var(--c-accent); border-radius:20px; background:color-mix(in srgb, var(--c-bg) 82%, transparent); color:var(--c-text); font:600 16px var(--f-ui); pointer-events:none; }
.cxres { display:grid; gap:8px; }
.cxres-l { display:grid; grid-template-columns:28px minmax(0, 1fr) auto; gap:10px; align-items:center; padding:10px 12px; border-radius:12px; border:1px solid var(--c-border); }
.cxres-l > span:nth-child(2) { min-width:0; } .cxres-l b { display:block; font-size:13px; color:var(--c-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .cxres-l small { font-size:12px; color:var(--c-text-3); }
.cxres-ic { width:28px; height:28px; display:grid; place-items:center; border-radius:50%; }
.cxres-l.ok .cxres-ic { color:var(--c-ok); background:color-mix(in srgb, var(--c-ok) 14%, transparent); }
.cxres-l.ver .cxres-ic { color:var(--c-warn); background:var(--c-warn-soft); }
.cxres-l.erro .cxres-ic { color:var(--c-bad); background:color-mix(in srgb, var(--c-bad) 14%, transparent); }
@media (max-width:720px) {
  /* o título numa linha e "Ler comprovante · Comissionado" embaixo dele */
  html #view-comissoes .nv-cabeca { flex-wrap:wrap; }
  html #view-comissoes .nv-cabeca > div:first-child { flex:1 1 100%; }
  html #view-comissoes .nv-cabeca-acoes { margin-left:0; flex-wrap:wrap; }
}

/* ============================================================
   PROPOSTA E CONTRATO NUMA PÁGINA SÓ (08/10, OcPagina; o Renato escolheu a
   "A+C+D" com uma coluna só e o painel à direita): as partes do formulário em
   ilhas numa coluna; à direita, o índice com ✓ (tocar leva à parte), o que
   falta, o total e os botões. No celular o índice vira uma faixa que rola de
   lado, presa no alto, e o total fica no rodapé. No contrato, cada cláusula
   numa linha com "Mudar" (o texto inteiro abre ali mesmo).
   ============================================================ */
html .modal.oc-pag { max-width:min(1120px, calc(100vw - 32px)); width:100%; }
html .nv-janela .oc-pag .modal-body { background:var(--c-bg); padding:16px; }
.oc-grade { display:grid; gap:16px; align-items:start; }
.oc-col { display:grid; gap:14px; align-content:start; min-width:0; }
@media (min-width:900px) { .oc-grade { grid-template-columns:minmax(0, 1fr) 270px; } .oc-painel { position:sticky; top:0; } }
html .nv-janela .oc-pag .form-section.fe2-ilha { grid-column:auto; margin:0; padding:14px 16px 16px; border:1px solid var(--c-border); border-radius:12px; background:var(--c-surface); }
html .nv-janela .oc-pag .fe2-tit.form-section-title { margin:0; font-size:calc(14px * var(--k-fs)); }
html .nv-janela .oc-pag .form-section .form-grid { gap:12px 14px; }
.oc-pag .orc-add-btns { display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 0; }
.oc-painel { display:grid; gap:8px; align-content:start; min-width:0; }
.oc-nav { display:grid; gap:2px; padding:6px; border-radius:14px; background:var(--c-surface); border:1px solid var(--c-border); }
.oc-nav > button { display:flex; align-items:center; gap:10px; height:33px; padding:0 10px; border:0; border-radius:9px; background:none; color:var(--c-text-2); font:500 13px var(--f-ui); text-align:left; cursor:pointer; }
.oc-nav > button:hover { background:var(--c-hover); color:var(--c-text); }
.oc-nav > button.on { background:var(--c-sel, var(--c-hover)); color:var(--c-text); font-weight:600; }
.oc-nav > button .nv-ic { flex:none; color:var(--c-text-3); }
.oc-nav > button.on .nv-ic { color:var(--c-accent-text); }
.oc-nav-rot { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.oc-st { flex:none; display:inline-flex; align-items:center; color:var(--c-ok); font-size:12px; font-weight:600; }
.oc-st .no { color:var(--c-warn); font-weight:500; }
.oc-nav > button .oc-st .nv-ic { color:var(--c-ok); }
/* o painel preso fica INTEIRO dentro do miolo da janela, sem rolar (13/10, pedido do Renato): a janela quase da altura da
   tela, o índice mais compacto e, no painel, só "Ver como o cliente vê" (Salvar e Enviar ficam no rodapé da janela).
   A altura vem do miolo (--oc-alt, OcPagina._altPainel); só numa tela muito baixa o painel rola, como último recurso. */
@media (min-width:721px) { html .modal.oc-pag { max-height:calc(100dvh - 40px); } }
@media (min-width:900px) {
  .oc-painel { display:flex; flex-direction:column; max-height:var(--oc-alt, calc(100dvh - 230px)); overflow-y:auto; scrollbar-width:thin; }
  .oc-painel > * { flex:none; }
  .oc-nav { gap:1px; padding:4px; }
  .oc-nav > button { height:29px; }
}
/* Pessoa física | Empresa: dois botões lado a lado, como no formulário de evento */
html .oc-pag .seg-toggle { display:inline-flex; gap:2px; padding:2px; border-radius:9px; background:var(--c-hover); width:fit-content; max-width:100%; align-self:flex-start; justify-self:start; }
html .oc-pag .seg-toggle button { height:28px; padding:0 12px; border:0; border-radius:7px; background:none; text-align:center; }
html .oc-pag .seg-toggle button b { font-size:12.5px; font-weight:500; color:var(--c-text-2); white-space:nowrap; }
html .oc-pag .seg-toggle button span { display:none; }
html .oc-pag .seg-toggle button.on { background:var(--c-prim); }
html .oc-pag .seg-toggle button.on b { color:var(--c-prim-text); font-weight:600; }
.oc-falta { display:flex; align-items:flex-start; gap:8px; padding:9px 12px; border-radius:10px; background:var(--c-warn-soft); color:var(--c-warn); font-size:12.5px; line-height:1.5; }
.oc-falta > .nv-ic { flex:none; margin-top:2px; } .oc-falta span { color:var(--c-text-2); }
.oc-tot { display:grid; gap:2px; padding:14px; border-radius:14px; background:var(--c-surface); border:1px solid var(--c-border); }
.oc-tot small { font-size:12px; color:var(--c-text-3); }
.oc-tot b { font-size:24px; font-weight:750; letter-spacing:-.5px; color:var(--c-text); }
.oc-tot span { font-size:12px; line-height:1.4; color:var(--c-text-3); }
.oc-bts { display:grid; gap:8px; } .oc-bts .nv-btn { justify-content:center; }
/* rodapé: Cancelar · Salvar e enviar · Salvar (o total aparece no celular) */
.oc-pe { gap:8px; }
.oc-pe .oc-pe-tot { visibility:hidden; }
.oc-pe-tot small { display:block; font-size:11px; color:var(--c-text-3); }
.oc-pe-tot b { font-size:18px; font-weight:750; letter-spacing:-.3px; color:var(--c-text); }
.oc-so-cel { display:none; }
/* contrato: cada cláusula numa linha; "Mudar" abre o texto ali mesmo */
.oc-cl { display:grid; gap:4px; padding:10px 12px !important; border-radius:10px; border:1px solid var(--c-border); background:var(--c-bg); }
.oc-cl-cab { display:flex; align-items:center; gap:10px; min-width:0; }
html .nv-janela .oc-cl-cab label { flex:1; min-width:0; margin:0; font-size:13px; font-weight:600; color:var(--c-text); }
.oc-cl-bt { flex:none; gap:6px; }
.oc-cl-txt { margin:0; font-size:12px; line-height:1.4; color:var(--c-text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.oc-cl-txt.vazia { color:var(--c-warn); }
.oc-cl textarea { display:none; }
.oc-cl.aberta textarea { display:block; margin-top:6px; }
.oc-cl.aberta .oc-cl-txt { display:none; }
/* "Ver como o cliente vê": a folha como sai no PDF */
.oc-prev-folha { margin:0 auto; overflow:hidden; border-radius:8px; background:#fff; box-shadow:0 8px 24px rgb(0 0 0 / .25); }
.oc-prev-folha iframe { display:block; border:0; transform-origin:0 0; }
@media (max-width:899px) {
  .oc-painel { order:-1; position:sticky; top:0; z-index:3; margin:-16px -16px 0; padding:8px 16px; background:var(--c-bg); }
  .oc-painel > :not(.oc-nav) { display:none; }
  .oc-nav { grid-auto-flow:column; grid-auto-columns:max-content; overflow-x:auto; scrollbar-width:none; padding:4px; }
  .oc-nav::-webkit-scrollbar { display:none; }
  .oc-pe .oc-pe-tot { visibility:visible; }
}
@media (max-width:720px) {
  .oc-so-pc { display:none !important; }
  span.oc-so-cel { display:inline; }
  html .nv-janela .oc-pag .modal-body { padding:12px; }
  .oc-painel { margin:-12px -12px 0; padding:8px 12px; }
  html .nv-janela .oc-pag .oc-pe { flex-wrap:nowrap; }
}

/* ============================================================
   PENDÊNCIAS: AGUARDANDO O CLIENTE E RESOLVIDAS (08/10; escolhas do Renato "C" e "C1")
   Colunas novas no fim (Aguardando o cliente, Resolvidas), cartão que abre os
   detalhes, "Recebi", o histórico de mensagens e a barrinha de "Resolver em sequência".
   ============================================================ */
.pd-t-ok { --pc:var(--c-ok); }
.pd-gn.pd-t-ok { color:var(--c-ok); background:color-mix(in srgb, var(--c-ok) 15%, transparent); }
.pd-gn.pd-t-info { color:var(--c-info); background:color-mix(in srgb, var(--c-info) 15%, transparent); }
#pd-lista .pd-card { cursor:pointer; }
.pd-quando-t { display:inline-flex; align-items:center; gap:4px; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.pd-card-hist { display:flex; align-items:center; gap:5px; min-width:0; font-size:calc(11.5px * var(--k-fs)); line-height:1.35; color:var(--c-text-3); }
.pd-card-hist > svg { flex:none; }
.pd-card-hist > span { min-width:0; overflow-wrap:anywhere; }
.pd-card-pe { flex-wrap:wrap; }
.pd-card-btns { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; margin-left:auto; min-width:0; }
.pd-card.pd-aguardando { border-color:color-mix(in srgb, var(--c-info) 32%, var(--c-border)); }
.pd-card.pd-adiada { border-style:dashed; }
.pd-card.pd-resolvida { background:transparent; }
.pd-card.pd-resolvida .pd-card-tit { color:var(--c-text-2); font-weight:600; }
/* as 6 colunas com a largura de sempre; a página de colunas rola de lado (decisão do Renato em 08/10) */
#pd-lista.pd-colunas { grid-auto-columns:minmax(270px, 1fr); }
/* o cartão encolhe junto com a coluna e o nome do botão pode quebrar a linha */
.pd-col-itens, .pd-card { grid-template-columns:minmax(0, 1fr); }
/* a linha de cima quebra em vez de cortar ("30 di"); o ⋯ fica sempre no canto */
#pd-lista .pd-card { position:relative; }
#pd-lista .pd-card-topo { min-width:0; flex-wrap:wrap; row-gap:4px; padding-right:30px; }
#pd-lista .pd-card-topo .nf-mais { position:absolute; top:10px; right:10px; margin:0; }
#pd-lista .pd-card-topo .pd-quando-t { overflow:visible; }
.pd-card-btns .pd-acao { max-width:100%; white-space:normal; height:auto; min-height:var(--h-btn-sm, 28px); padding-top:4px; padding-bottom:4px; line-height:1.2; text-align:left; }
/* Mensagem pronta: quando a pendência volta para a lista */
.mp-volta { display:flex; align-items:center; flex-wrap:wrap; gap:8px 10px; margin-top:12px; }
.mp-volta[hidden] { display:none; }   /* sem isto a linha aparecia vazia em toda mensagem fora das Pendências */
.mp-volta .mp-rot { margin:0; }
.mp-volta-seg.nv-seg { display:inline-flex; padding:2px; gap:2px; border-radius:9px; background:var(--c-hover); }
.mp-volta-seg > button { border-radius:7px; height:28px; padding:0 12px; border:0; background:none; color:var(--c-text-2); font:500 calc(12.5px * var(--k-fs)) var(--f-ui); cursor:pointer; }
.mp-volta-seg > button[aria-pressed="true"] { background:var(--c-prim); color:var(--c-prim-text); }
@media (max-width:720px) { html .mp-volta-seg > button { height:var(--h-cel, 36px); } }

/* ============================================================
   PENDÊNCIAS EM 3 ABAS (08/10, escolha do Renato: as abas da imagem 4 com os ícones da
   imagem 7, só o nome, botões menores e o número pequeno; o filtro da imagem 7).
   Pendentes = as 4 colunas no tamanho normal · Aguardando o cliente e Resolvidas = cartões
   em grade (Resolvidas separadas por dia). "Filtrar" = a busca e o tipo num quadro só.
   ============================================================ */
.pd-topo { display:grid; grid-template-columns:minmax(0, 1fr) auto; grid-template-areas:"tit tit" "abas ferr"; align-items:center; gap:14px 12px; margin:0 0 16px; }
.pd-topo > .nv-h1 { grid-area:tit; }
.pd-abas { grid-area:abas; display:flex; flex-wrap:wrap; gap:8px; min-width:0; }
.pd-ferr { grid-area:ferr; display:flex; align-items:center; justify-content:flex-end; gap:8px; min-width:0; }
.pd-ferr .pd-gacao { gap:6px; }
/* o botão de data da Agenda (o mesmo Período), só na aba Resolvidas, à esquerda do Filtrar (09/10) */
#view-pendencias:not([data-aba-aberta="resolvidas"]) .pd-periodo { display:none; }
.pd-ferr .pd-periodo #periodo-btn { height:30px; }
/* as abas: pílulas pequenas, cada uma com a sua cor (o ícone sempre; o fundo só na aberta) */
.pd-aba { --k:var(--c-text-2); height:30px; padding:0 12px 0 10px; display:inline-flex; align-items:center; gap:7px; border-radius:999px; border:1px solid var(--c-border-2);
  background:none; color:var(--c-text-2); font:500 calc(12.9px * var(--k-fs)) var(--f-ui); white-space:nowrap; cursor:pointer; transition:background-color .12s, border-color .12s, color .12s; }
.pd-aba > svg { flex:none; color:var(--k); }
.pd-aba:hover { color:var(--c-text); background:var(--c-hover); }
.pd-aba[aria-selected="true"] { color:var(--c-text); font-weight:600; border-color:color-mix(in srgb, var(--k) 50%, transparent); background:color-mix(in srgb, var(--k) 15%, transparent); }
.pd-aba:focus-visible { outline:2px solid var(--k); outline-offset:2px; }
.pd-aba-n { min-width:8px; font-size:calc(11px * var(--k-fs)); font-weight:500; color:var(--c-text-3); font-variant-numeric:tabular-nums; }
.pd-aba-n:empty { display:none; }
.pd-aba[aria-selected="true"] .pd-aba-n { color:color-mix(in srgb, var(--k) 70%, var(--c-text)); font-weight:600; }
/* "Filtrar": o mesmo tamanho das abas; ligado, mostra o filtro e o ✕ dentro da pílula */
.pd-fl { position:relative; display:inline-flex; align-items:center; min-width:0; }
.pd-fl-btn { height:30px; max-width:260px; min-width:0; padding:0 12px 0 10px; display:inline-flex; align-items:center; gap:7px; border-radius:999px; border:1px solid var(--c-border-2);
  background:none; color:var(--c-text-2); font:500 calc(12.9px * var(--k-fs)) var(--f-ui); white-space:nowrap; cursor:pointer; }
.pd-fl-btn > svg { flex:none; }
.pd-fl-btn:hover, .pd-fl-btn[aria-expanded="true"] { color:var(--c-text); background:var(--c-hover); }
#pd-fl-rot { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.pd-fl.ligado .pd-fl-btn { padding-right:32px; color:var(--c-text); font-weight:600; border-color:color-mix(in srgb, var(--c-accent) 55%, transparent); background:color-mix(in srgb, var(--c-accent) 12%, transparent); }
.pd-fl.ligado .pd-fl-btn > svg { color:var(--c-accent-text); }
.pd-fl-x { position:absolute; right:4px; top:50%; transform:translateY(-50%); width:22px; height:22px; padding:0; display:grid; place-items:center; border:0; border-radius:50%;
  background:none; color:var(--c-text-3); font-size:11px; line-height:1; cursor:pointer; }
.pd-fl-x:hover { color:var(--c-text); background:var(--c-hover); }
.pd-fl-x[hidden] { display:none; }
/* o quadro: a busca, o tipo (ícone na cor do assunto, nome, quantos e o ✓) e o rodapé */
.nv-pop.pd-fl-pop { gap:10px; }
.nv-pop.pd-fl-pop:not(.folha) { width:316px; padding:12px; border-radius:16px; }
.pd-fl-pop .pd-fl-busca { width:auto; height:34px; }
.pd-fl-tit { margin:2px 6px -4px; font:600 calc(11px * var(--k-fs)) var(--f-ui); letter-spacing:.06em; text-transform:uppercase; color:var(--c-text-3); }
.pd-fl-lista { display:grid; gap:2px; }
.pd-fl-op { display:flex; align-items:center; gap:10px; width:100%; min-height:36px; padding:4px 8px; border:0; border-radius:10px; background:none;
  color:var(--c-text); font:500 calc(13px * var(--k-fs)) var(--f-ui); text-align:left; cursor:pointer; }
.pd-fl-op:hover, .pd-fl-op:focus-visible { background:var(--c-hover); outline:none; }
.pd-fl-busca input:focus-visible { outline:none; }
.pd-fl-op[aria-pressed="true"] { background:var(--c-sel); font-weight:600; }
.pd-fl-ic { flex:none; width:26px; height:26px; border-radius:8px; display:grid; place-items:center; color:var(--k); background:color-mix(in srgb, var(--k) 15%, transparent); }
.pd-fl-nome { flex:1; min-width:0; overflow-wrap:anywhere; }
.pd-fl-n { flex:none; font-size:calc(12px * var(--k-fs)); font-weight:500; color:var(--c-text-3); font-variant-numeric:tabular-nums; }
.pd-fl-ok { flex:none; width:14px; display:inline-grid; place-items:center; color:var(--c-accent-text); visibility:hidden; }
.pd-fl-op[aria-pressed="true"] .pd-fl-ok { visibility:visible; }
.pd-fl-vazio { padding:10px 8px; font-size:calc(12.5px * var(--k-fs)); color:var(--c-text-3); }
/* aba Resolvidas: "Como foi resolvida" (as mesmas linhas do Tipo); a data é o botão de data da Agenda, ao lado */
.pd-fl-res { display:grid; gap:10px; }
.pd-fl-res[hidden] { display:none; }
.pd-dia-n { margin-left:8px; font-weight:500; letter-spacing:0; color:var(--c-text-3); opacity:.8; }
/* o rodapé (Limpar · Ver N) fica preso embaixo quando o quadro rola (no celular, na aba Resolvidas) */
.pd-fl-pe { display:flex; align-items:center; gap:10px; position:sticky; bottom:-12px; z-index:1; margin:0 -12px -12px; padding:10px 14px 12px;
  background:var(--c-raised); border-top:1px solid var(--c-border); border-radius:0 0 16px 16px; }
.pd-fl-pe #pd-filtros-ver { margin-left:auto; }
.pd-fl-limpar { padding:4px 6px; border:0; border-radius:8px; background:none; color:var(--c-text-2); font:500 calc(12.9px * var(--k-fs)) var(--f-ui); cursor:pointer; }
.pd-fl-limpar:hover { color:var(--c-text); background:var(--c-hover); }
.pd-fl-limpar[hidden] { display:none; }
/* Pendentes: as 4 colunas no tamanho normal (em tela menor, rolam de lado) */
#pd-lista.pd-colunas { grid-auto-flow:row; grid-template-columns:repeat(4, minmax(250px, 1fr)); grid-auto-columns:auto; }
/* Aguardando o cliente e Resolvidas: os cartões em grade */
#pd-lista.pd-grades { display:block; }
.pd-grade { display:grid; grid-template-columns:repeat(auto-fill, minmax(270px, 1fr)); gap:12px; align-items:start; }
.pd-dia + .pd-dia { margin-top:22px; }
.pd-dia-tit { margin:0 2px 10px; font:600 calc(11.5px * var(--k-fs)) var(--f-ui); letter-spacing:.05em; text-transform:uppercase; color:var(--c-text-3); }
.pd-vazio .pd-vazio-ic { color:var(--k, var(--c-ok)); background:color-mix(in srgb, var(--k, var(--c-ok)) 14%, transparent); }
.pd-vazio .nv-btn { margin-top:8px; }
@media (max-width:720px) {
  /* celular: o título e "Filtrar" na mesma linha; as abas embaixo, numa linha só */
  .pd-topo { grid-template-areas:"tit ferr" "abas abas"; gap:12px 8px; }
  .pd-aba-mais { display:none; }
  .pd-abas { gap:4px; }
  .pd-aba { flex:1 1 auto; justify-content:center; gap:5px; padding:0 7px; }
  html .pd-aba, html .pd-fl-btn, html .pd-ferr .pd-periodo #periodo-btn { height:34px; }
  .pd-fl-btn { max-width:180px; }
  .pd-fl-op { min-height:46px; }
  .nv-pop.pd-fl-pop.folha .pd-fl-busca { height:42px; }
  .nv-pop.pd-fl-pop.folha .pd-fl-pe { bottom:calc(-18px - env(safe-area-inset-bottom, 0px)); margin:0 -16px calc(-18px - env(safe-area-inset-bottom, 0px));
    padding:12px 16px calc(18px + env(safe-area-inset-bottom, 0px)); border-radius:0; }
  .pd-grade { grid-template-columns:minmax(0, 1fr); }
  html .pd-ferr .pd-gacao { height:34px; }
}
@media (max-width:380px) { .pd-aba { font-size:12px; } }
@media (max-width:370px) { .pd-aba { padding:0 5px; gap:4px; } }

/* ============================================================
   O SINO SÓ COM NOTIFICAÇÕES (08/10, desenho "C" escolhido pelo Renato)
   Uma janelinha embaixo do sino (o Pop; não escurece a tela; no celular sobe de baixo):
   Não lidas | Todas, "Marcar todas como lidas", Hoje / Ontem / Esta semana / Antes; cada item
   com o ícone na cor, o que aconteceu, quando e uma linha (a coluna na cor dela). Sem ações:
   tocar leva à pendência (Notificacoes.renderSino / _itemSino / irParaCartao).
   ============================================================ */
.nv-pop.nf-pop:not(.folha) { width:400px; }
.nv-pop.nf-pop { padding:0; gap:0; display:flex; flex-direction:column; overflow:hidden; max-height:min(620px, calc(100dvh - 72px)); border-radius:16px; }
.nv-pop.nf-pop[hidden] { display:none; }
.nfp-cab { display:flex; align-items:center; gap:10px; padding:16px 16px 10px; }
.nfp-cab h3 { margin:0; font:650 calc(16px * var(--k-fs)) var(--f-ui); color:var(--c-text); }
.nfp-lidas { margin-left:auto; padding:4px 6px; border:0; border-radius:8px; background:none; color:var(--c-accent-text); font:500 calc(12.5px * var(--k-fs)) var(--f-ui); cursor:pointer; }
.nfp-lidas:hover { background:var(--c-hover); }
.nfp-lidas[hidden] { display:none; }
.nfp-abas { display:flex; gap:6px; padding:0 16px 12px; border-bottom:1px solid var(--c-border); }
.nfp-aba { height:28px; padding:0 11px; display:inline-flex; align-items:center; gap:6px; border-radius:999px; border:1px solid var(--c-border-2); background:none;
  color:var(--c-text-2); font:500 calc(12.5px * var(--k-fs)) var(--f-ui); cursor:pointer; }
.nfp-aba:hover { color:var(--c-text); background:var(--c-hover); }
.nfp-aba[aria-selected="true"] { color:var(--c-text); font-weight:600; background:var(--c-hover); }
.nfp-n { font-size:calc(11px * var(--k-fs)); font-weight:650; color:var(--c-bad); font-variant-numeric:tabular-nums; }
.nfp-n:empty { display:none; }
.nfp-lista { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:4px 8px 10px; }
.nfp-g h4 { margin:12px 10px 6px; font:600 calc(11px * var(--k-fs)) var(--f-ui); letter-spacing:.06em; text-transform:uppercase; color:var(--c-text-3); }
.nfp-it { position:relative; display:grid; grid-template-columns:auto minmax(0, 1fr) auto; gap:3px 12px; align-items:start; width:100%; padding:10px 10px 10px 14px;
  border:0; border-radius:12px; background:none; text-align:left; font-family:var(--f-ui); cursor:pointer; }
.nfp-it:hover, .nfp-it:focus-visible { background:var(--c-hover); outline:none; }
.nfp-it.nova { background:color-mix(in srgb, var(--c-info) 7%, transparent); }
.nfp-it.nova:hover { background:color-mix(in srgb, var(--c-info) 12%, transparent); }
.nfp-it.nova::before { content:''; position:absolute; left:4px; top:22px; width:6px; height:6px; border-radius:50%; background:var(--c-info); }
.nfp-ic { grid-row:1 / 3; width:32px; height:32px; border-radius:9px; display:grid; place-items:center; color:var(--k); background:color-mix(in srgb, var(--k) 15%, transparent); }
.nfp-tit { min-width:0; font-size:calc(13px * var(--k-fs)); line-height:1.35; font-weight:500; color:var(--c-text-2); overflow-wrap:anywhere; }
.nfp-it.nova .nfp-tit { color:var(--c-text); font-weight:650; }
.nfp-t { padding-top:2px; font-size:calc(11.5px * var(--k-fs)); font-weight:500; color:var(--c-text-3); white-space:nowrap; font-variant-numeric:tabular-nums; }
.nfp-sub { grid-column:2 / 4; min-width:0; font-size:calc(12px * var(--k-fs)); line-height:1.4; color:var(--c-text-3); overflow-wrap:anywhere; }
.nfp-col { font-weight:600; color:var(--k2); }
.nfp-vazio { display:grid; gap:4px; justify-items:center; text-align:center; padding:28px 16px 30px; font-size:calc(12.5px * var(--k-fs)); color:var(--c-text-3); }
.nfp-vazio b { font-size:calc(14px * var(--k-fs)); color:var(--c-text); }
.nfp-vazio-ic { width:40px; height:40px; border-radius:50%; display:grid; place-items:center; margin-bottom:6px; color:var(--c-ok); background:color-mix(in srgb, var(--c-ok) 14%, transparent); }
.nfp-pe { display:flex; gap:8px; padding:12px 16px; border-top:1px solid var(--c-border); }
.nfp-pe .nv-btn { flex:1; justify-content:center; }
.nfp-pe .nv-btn[hidden] { display:none; }
/* o cartão de Pendências que o sino mandou ver fica marcado por um instante */
#pd-lista .pd-card.pd-destaque { box-shadow:0 0 0 2px var(--c-accent), 0 0 0 7px color-mix(in srgb, var(--c-accent) 22%, transparent); transition:box-shadow .5s; }
@media (max-width:720px) {
  .nv-pop.nf-pop.folha { padding:0 0 env(safe-area-inset-bottom, 0px); max-height:82dvh; border-radius:16px 16px 0 0; }
  .nfp-it { padding-top:12px; padding-bottom:12px; }
  .nfp-aba { height:34px; padding:0 14px; }
  html .nfp-pe .nv-btn { height:var(--h-cel, 36px); }
}

/* =============================================================================
   PROPOSTAS · CATÁLOGO E CLIENTES (09/10; desenhos "T1", janela do pacote "TP" e "C1"
   aprovados pelo Renato). Prefixos: .cg- (catálogo) e .cl- (clientes).
   ============================================================================= */
.cg-sec { margin:0 0 22px; }
.cg-sec-h { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin:0 2px 10px; }
.cg-sec-h h2 { margin:0; font-size:calc(14px * var(--k-fs)); font-weight:650; letter-spacing:.4px; text-transform:uppercase; color:var(--c-text); }
.cg-sec-h > span { font-size:12.5px; color:var(--c-text-3); }
.cg-sec-h .nv-btn { margin-left:auto; align-self:center; }
.cg-sem { color:var(--c-text-3); font-weight:500; }
.cg-nada { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; min-height:56px; padding:12px 16px; border-radius:14px;
  border:1.5px dashed var(--c-border-2); font-size:13px; color:var(--c-text-3); }
.cg-vazio .cg-vazio-acoes { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.cg-vazio > span { max-width:52ch; }

/* pacotes em cartões */
.cg-grade { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:12px; }
.cg-pac { display:flex; flex-direction:column; min-width:0; border:1px solid var(--c-border); border-radius:18px; background:var(--c-surface); overflow:hidden; cursor:pointer; }
.cg-pac:hover { border-color:var(--c-border-2); }
.cg-pac:focus-visible, .cg-item:focus-visible, .cl-tr:focus-visible { outline:2px solid var(--c-accent); outline-offset:2px; }
.cg-pac-capa { height:96px; display:grid; place-items:center; color:hsl(var(--h) 60% 72%);
  background:linear-gradient(135deg, hsl(var(--h) 40% 30%), color-mix(in srgb, hsl(var(--h) 40% 22%) 60%, var(--c-surface))); }
.cg-pac-capa { position:relative; overflow:hidden; flex:none; }
/* a foto fica presa na faixa de cima: numa grade com place-items:center, height:100% vira a altura da própria foto (uma foto alta cobria o cartão inteiro) */
.cg-pac-capa img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:block; }
/* foto de equipamento (quase sempre em fundo branco): inteira, sem cortar, no papel branco */
.cg-pac-capa:has(img) { background:#fff; }
.cg-pac-corpo { display:flex; flex-direction:column; gap:8px; padding:12px 14px 12px; flex:1; min-width:0; }
.cg-pac-cab { display:flex; align-items:center; gap:8px; min-width:0; }
.cg-pac-cab h3 { flex:1; min-width:0; margin:0; font-size:calc(15px * var(--k-fs)); font-weight:650; color:var(--c-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cg-pac-cab .ac-menu { flex:none; }
.cg-pac-preco { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.cg-pac-preco b { font-size:calc(19px * var(--k-fs)); font-weight:700; letter-spacing:-.2px; color:var(--c-text); font-variant-numeric:tabular-nums; }
.cg-pac-preco b.cg-sem { font-size:14px; }
.cg-pac-preco small { font-size:12px; color:var(--c-text-3); }
.cg-pac-itens { margin:0; padding:0; list-style:none; font-size:12.5px; line-height:1.6; color:var(--c-text-2); }
.cg-pac-itens li { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cg-pac-itens .cg-mais { color:var(--c-text-3); }
.cg-pac-desc { margin:0; font-size:12.5px; color:var(--c-text-2); line-height:1.5; }
.cg-pac-uso { margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:8px; padding-top:8px; border-top:1px solid var(--c-border);
  font-size:12px; color:var(--c-text-3); }

/* itens avulsos (e os arquivados) em lista */
.cg-lista { border:1px solid var(--c-border); border-radius:18px; background:var(--c-surface); overflow:hidden; }
.cg-item { display:grid; grid-template-columns:40px minmax(0,1fr) auto 32px; gap:12px; align-items:center; padding:9px 12px 9px 14px; border-bottom:1px solid var(--c-border); cursor:pointer; }
.cg-item:last-child { border-bottom:0; }
.cg-item:hover { background:var(--c-hover); }
.cg-item-f { width:40px; height:40px; border-radius:10px; display:grid; place-items:center; overflow:hidden; background:var(--c-bg); border:1px solid var(--c-border); color:var(--c-text-3); }
.cg-item-f img { width:100%; height:100%; object-fit:cover; }
.cg-item-n { display:grid; min-width:0; }
.cg-item-n b, .cg-item-n small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cg-item-n b { font-size:calc(13.5px * var(--k-fs)); font-weight:600; color:var(--c-text); }
.cg-item-n small { font-size:12px; color:var(--c-text-3); }
.cg-item-p { display:grid; justify-items:end; text-align:right; }
.cg-item-p b { font-size:13.5px; font-weight:650; color:var(--c-text); font-variant-numeric:tabular-nums; }
.cg-item-p small { font-size:11.5px; color:var(--c-text-3); }
.cg-item.arq { opacity:.72; }
.cg-arq { margin:4px 0 18px; }
.cg-arq > summary { list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:8px; margin:0 2px 10px; font-size:13px; font-weight:600; color:var(--c-text-2); }
.cg-arq > summary::-webkit-details-marker { display:none; }
.cg-arq > summary span { font-weight:500; color:var(--c-text-3); }
.cg-arq > summary .nv-ic { transition:transform .1s; }
.cg-arq[open] > summary .nv-ic { transform:rotate(90deg); }
.cg-arq-txt { margin:-4px 2px 10px; font-size:12.5px; color:var(--c-text-3); }

/* janelas do catálogo e dos clientes */
.cg-form { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px 14px; }
.cg-campo { display:grid; gap:6px; min-width:0; align-content:start; }
.cg-larga { grid-column:1 / -1; }
.cg-campo > span:first-child { font-size:12.5px; font-weight:500; color:var(--c-text-2); }
.cg-campo > span:first-child small { font-weight:400; color:var(--c-text-3); margin-left:4px; }
html .cg-jan .cg-campo input, html .cg-jan .cg-campo textarea { width:100%; min-width:0; height:36px; padding:0 11px; border:1px solid var(--c-border-2); border-radius:var(--r-md);
  background:var(--c-bg); color:var(--c-text); font-family:var(--f-ui); font-size:13.5px; }
html .cg-jan .cg-campo textarea { height:auto; min-height:60px; padding:9px 11px; line-height:1.5; resize:none; }
/* 13/10 (print do Renato): as caixas de escolher das janelas com a setinha desenhada e com folga (a do navegador ficava colada) */
html .cg-jan .cg-campo select { width:100%; min-width:0; height:36px; padding:0 34px 0 11px; border:1px solid var(--c-border-2); border-radius:var(--r-md);
  background-color:var(--c-bg); color:var(--c-text); font-family:var(--f-ui); font-size:13.5px; appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B98A8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 11px center; background-size:16px; }
html .cg-jan .cg-campo select:focus { outline:none; border-color:var(--c-accent); box-shadow:0 0 0 1px var(--c-accent); }
/* o comprovante: um botão com o clipe e o nome do arquivo (no lugar do "Escolher arquivo" do navegador) */
.rc-arq { display:flex; align-items:center; gap:8px; height:36px; padding:0 12px; border:1px dashed var(--c-border-2); border-radius:var(--r-md); background:var(--c-bg);
  color:var(--c-text-2); font-size:13px; cursor:pointer; min-width:0; }
.rc-arq:hover { border-color:var(--c-accent); color:var(--c-text); }
.rc-arq.tem { border-style:solid; color:var(--c-text); }
.rc-arq input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.rc-arq-txt { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.rc-link { display:flex; align-items:center; justify-content:space-between; gap:8px; min-width:0; padding:7px 7px 7px 11px; margin-bottom:6px; border-radius:var(--r-md);
  background:color-mix(in srgb, var(--c-ok) 12%, transparent); border:1px solid color-mix(in srgb, var(--c-ok) 35%, transparent); font-size:12.5px; color:var(--c-text); }
.rc-link > span { display:flex; align-items:center; gap:6px; min-width:0; }
.rc-link > span > svg { color:var(--c-ok); flex:none; }
.rc-link > span > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rc-link.fora { opacity:.55; }
.rc-link .nv-btn { flex:none; }
.rc-arq:focus-within { border-color:var(--c-accent); box-shadow:0 0 0 1px var(--c-accent); }
html .cg-jan .cg-campo .fe2-moeda input { padding-left:35px; }
html .cg-jan .cg-campo input:focus, html .cg-jan .cg-campo textarea:focus { outline:none; border-color:var(--c-accent); box-shadow:0 0 0 1px var(--c-accent); }
.cg-check { display:flex; align-items:center; gap:10px; font-size:13px; color:var(--c-text); cursor:pointer; }
.cg-check input { width:18px; height:18px; accent-color:var(--c-accent); flex:none; }
.cg-comps { display:grid; gap:6px; }
.cg-comps-vazio { margin:0; padding:12px 14px; border-radius:12px; border:1.5px dashed var(--c-border-2); font-size:12.5px; color:var(--c-text-3); }
.cg-comp { display:grid; grid-template-columns:30px minmax(0,1fr) auto auto 30px; gap:10px; align-items:center; padding:6px 8px 6px 10px; border-radius:12px; background:var(--c-bg); border:1px solid var(--c-border); }
.cg-comp-f { width:30px; height:30px; border-radius:8px; display:grid; place-items:center; overflow:hidden; color:var(--c-text-3); background:var(--c-surface); }
.cg-comp-f img { width:100%; height:100%; object-fit:cover; }
.cg-comp-n { display:grid; min-width:0; font-size:13px; color:var(--c-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cg-comp-n small { font-size:11.5px; color:var(--c-text-3); }
html .cg-jan .cg-comp-nome { width:100%; min-width:0; height:30px; padding:0 9px; border:1px solid var(--c-border-2); border-radius:8px; background:var(--c-surface); color:var(--c-text); font-family:var(--f-ui); font-size:13px; }
.cg-comp-q { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--c-text-3); }
html .cg-jan .cg-comp-q input { width:54px; height:30px; padding:0 8px; border:1px solid var(--c-border-2); border-radius:8px; background:var(--c-surface); color:var(--c-text); font-family:var(--f-ui); font-size:13px; text-align:center; }
.cg-comp-inc { font-size:12px; color:var(--c-ok); }
.cg-comp-x { width:30px; height:30px; display:grid; place-items:center; border:0; border-radius:999px; background:none; color:var(--c-text-3); cursor:pointer; }
.cg-comp-x:hover { background:var(--c-hover); color:var(--c-text); }
.cg-comps-pe { display:flex; gap:8px; flex-wrap:wrap; margin-top:4px; }
.cg-foto.upload-foto { min-height:0; }

/* clientes */
.cl-aviso { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:0 0 12px; padding:10px 14px; border-radius:14px;
  background:var(--c-info-soft); border:1px solid color-mix(in srgb, var(--c-info) 35%, transparent); color:var(--c-info); }
.cl-aviso > span { flex:1; min-width:200px; display:grid; font-size:12.5px; color:var(--c-text-2); }
.cl-aviso > span b { font-size:13.5px; color:var(--c-text); }
.cl-tab { border:1px solid var(--c-border); border-radius:18px; background:var(--c-surface); overflow:hidden; }
.cl-tr { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) 70px 120px 120px 150px 32px; gap:14px; align-items:center; padding:10px 14px 10px 16px; border-bottom:1px solid var(--c-border); cursor:pointer; }
.cl-tr:last-child { border-bottom:0; }
.cl-tr:not(.cl-th):hover { background:var(--c-hover); }
.cl-th { cursor:default; padding-top:9px; padding-bottom:9px; font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--c-text-3); }
.cl-nome { display:flex; align-items:center; gap:12px; min-width:0; }
.cl-av { flex:none; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:700; letter-spacing:.3px; color:#fff; background:hsl(var(--h) 45% 42%); }
.cl-nome-tx { display:grid; min-width:0; }
.cl-nome-tx b, .cl-nome-tx small, .cl-cont { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cl-nome-tx b { font-size:calc(13.5px * var(--k-fs)); font-weight:600; color:var(--c-text); }
.cl-nome-tx small { font-size:12px; color:var(--c-text-3); }
.cl-pj { display:inline-flex; align-items:center; height:16px; padding:0 4px; margin-left:4px; border:1px solid var(--c-border-2); border-radius:5px; font-size:10px; font-weight:700; color:var(--c-text-3); vertical-align:1px; }
.cl-cont { font-size:13px; color:var(--c-text-2); min-width:0; }
.cl-n { text-align:right; font-size:13px; color:var(--c-text); font-variant-numeric:tabular-nums; }
.cl-falta { color:var(--c-warn); font-weight:650; }
.cl-zero { color:var(--c-text-3); }
.cl-acao { display:flex; justify-content:flex-end; }
.cl-nomes { grid-column:1 / -1; margin:0; font-size:12px; color:var(--c-text-3); }
.cg-jan:not([data-tipo="PJ"]) .cl-so-pj { display:none; }
.cl-pares { display:grid; gap:10px; }
.cl-par { display:grid; gap:10px; padding:12px; border-radius:14px; background:var(--c-bg); border:1px solid var(--c-border); }
.cl-par-mot { display:flex; gap:6px; flex-wrap:wrap; }
.cl-par-mot span { height:20px; display:inline-flex; align-items:center; padding:0 8px; border-radius:99px; font-size:11.5px; font-weight:600; color:var(--c-info); background:var(--c-info-soft); }
.cl-par-cs { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; }
.cl-par-c { display:flex; align-items:center; gap:10px; min-width:0; padding:8px 10px; border-radius:12px; background:var(--c-surface); border:1px solid var(--c-border); }
.cl-par-c > span:last-child { display:grid; min-width:0; }
.cl-par-c b, .cl-par-c small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cl-par-c b { font-size:13px; color:var(--c-text); } .cl-par-c small { font-size:12px; color:var(--c-text-3); }
.cl-par-ac { display:flex; justify-content:flex-end; gap:8px; }
.cl-jun-busca { width:100%; margin:0 0 10px; }
.cl-jun-lista { display:grid; gap:4px; max-height:46vh; overflow-y:auto; overscroll-behavior:contain; }
.cl-jun-it { display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--c-border); border-radius:12px; background:var(--c-bg); color:var(--c-text); text-align:left; cursor:pointer; font-family:var(--f-ui); }
.cl-jun-it:hover { border-color:var(--c-accent); }
.cl-jun-it[hidden] { display:none; }
.cl-jun-it > span:last-child { display:grid; min-width:0; }
.cl-jun-it b { font-size:13px; } .cl-jun-it small { font-size:12px; color:var(--c-text-3); }

/* formulário do evento: ilhas Cliente e Pacote */
.fe2-cli-vazio { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; padding:10px 12px; border-radius:10px; border:1.5px dashed var(--c-border-2); font-size:13px; color:var(--c-text-3); }
.fe2-pacotes { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; }
.fe2-pac { display:grid; gap:2px; min-width:0; padding:9px 11px; border:1px solid var(--c-border-2); border-radius:12px; background:var(--c-bg); color:var(--c-text); text-align:left; cursor:pointer; font-family:var(--f-ui); }
.fe2-pac b { font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fe2-pac small { font-size:12px; color:var(--c-text-3); }
.fe2-pac:hover { border-color:var(--c-text-3); }
.fe2-pac[aria-pressed="true"] { border-color:var(--c-accent); box-shadow:0 0 0 1px var(--c-accent) inset; background:var(--c-accent-soft); }
.fe2-pac-antes { grid-column:1 / -1; margin:0; }
#modal-evento .form-field[hidden] { display:none; }

@media (max-width: 1100px) {
  /* o que não cabe desce para a linha de baixo (como no computador, só empilhado) */
  .cl-th { display:none; }
  .cl-tr { grid-template-columns:repeat(3, minmax(0,1fr)) 32px; grid-template-areas:'nome nome nome menu' 'n1 n2 n3 n3' 'cont cont acao acao'; row-gap:10px; padding:12px 14px; }
  .cl-tr > .cl-nome { grid-area:nome; }
  .cl-tr > .ac-menu { grid-area:menu; }
  .cl-tr > .cl-cont { grid-area:cont; align-self:center; }
  .cl-tr > .cl-acao { grid-area:acao; }
  .cl-tr > :nth-child(3) { grid-area:n1; } .cl-tr > :nth-child(4) { grid-area:n2; } .cl-tr > :nth-child(5) { grid-area:n3; }
  .cl-tr > .cl-n { display:grid; text-align:left; font-size:13.5px; }
  .cl-tr > .cl-n::before { content:attr(data-rot); font-size:11.5px; font-weight:500; color:var(--c-text-3); }
}
@media (max-width: 720px) {
  .cg-grade { grid-template-columns:1fr; }
  .cg-form, .cl-par-cs { grid-template-columns:1fr; }
  /* no celular, os botões com 36px e os rodapés das janelas com 40px, como o resto do app */
  html #sub-clientes .nv-btn.pequeno, html #sub-catalogo .nv-btn.pequeno, html .cg-jan .nv-btn.pequeno,
  html .cg-jan .nv-seg > button, html .cg-jan .fe2-seg > button { height:var(--h-cel, 36px); }
  html #sub-clientes .ac-menu > .orc-menu-sum, html #sub-catalogo .ac-menu > .orc-menu-sum { width:var(--h-cel, 36px); height:var(--h-cel, 36px); }
  html .cg-jan .modal-foot .nv-btn { height:var(--h-cel-pe, 40px); }
}

/* ============================================================
   PÁGINA DENTRO DE UMA ABA (pg-*, 09/10/2026; definida por Comissões e usada também por
   Propostas): "← <lista>" pequeno; o título com a pílula e os botões à direita; a legenda;
   os números; a grade com o conteúdo à esquerda e as ilhas à direita (uma embaixo da outra
   em tela menor). O endereço é #<aba>/<id> (Rotas, app/arranque.js).
   ============================================================ */
.pg-topo { --pg-av:46px; display:grid; gap:6px; min-width:0; margin:0 0 16px; }
.pg-voltar { justify-self:start; display:inline-flex; align-items:center; gap:4px; height:26px; margin-left:-6px; padding:0 8px 0 4px; border:0; border-radius:999px;
  background:none; color:var(--c-text-2); font:600 calc(13px * var(--k-fs)) var(--f-ui); cursor:pointer; }
.pg-linha > .pg-av { flex:none; width:var(--pg-av); height:var(--pg-av); border-radius:50%; font-size:calc(15px * var(--k-fs)); }
.pg-voltar:hover { background:var(--c-hover); color:var(--c-text); }
.pg-voltar:focus-visible { outline:2px solid var(--c-accent); outline-offset:1px; }
.pg-linha { display:flex; align-items:center; gap:12px 14px; flex-wrap:wrap; min-width:0; }
.pg-tit { display:flex; align-items:center; gap:10px; flex:1 1 220px; min-width:0; flex-wrap:wrap; }
.pg-tit .nv-h1 { margin:0; overflow-wrap:anywhere; }
.pg-acoes { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-left:auto; }
.pg-acoes .ac-menu { position:static; }
.pg-leg { margin:0; overflow-wrap:anywhere; }
.pg-linha:has(.pg-av) + .pg-leg { margin-left:calc(var(--pg-av) + 14px); }   /* com a foto/iniciais: a legenda alinhada com o nome */
.pg-nums { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:12px; margin:0 0 16px; }
.pg-num { display:grid; gap:2px; align-content:start; min-width:0; padding:14px 18px; border-radius:14px; background:var(--c-surface); border:1px solid var(--c-border); }
.pg-num small { font-size:calc(12px * var(--k-fs)); color:var(--c-text-3); }
.pg-num b { font-size:calc(22px * var(--k-fs)); line-height:1.25; font-weight:700; letter-spacing:-.4px; font-variant-numeric:tabular-nums; color:var(--c-text); }
.pg-num b.warn { color:var(--c-warn); } .pg-num b.bad { color:var(--c-bad); } .pg-num b.ok { color:var(--c-ok); }
.pg-num span { font-size:calc(12px * var(--k-fs)); color:var(--c-text-3); overflow-wrap:anywhere; }
.pg-grade { display:grid; grid-template-columns:minmax(0, 1fr) 340px; gap:16px; align-items:start; }
.pg-lado { display:grid; gap:16px; align-content:start; min-width:0; }
.pg-ilha { display:grid; grid-template-columns:minmax(0, 1fr); gap:12px; align-content:start; min-width:0; padding:16px; border-radius:18px; background:var(--c-surface); border:1px solid var(--c-border); }
.pg-sec { display:flex; align-items:center; gap:10px; min-width:0; min-height:30px; }
.pg-sec h2 { margin:0; font-size:calc(14.8px * var(--k-fs)); font-weight:600; color:var(--c-text); }
.pg-mut { margin:0; font-size:calc(12.2px * var(--k-fs)); color:var(--c-text-3); }
.pg-dados { display:grid; gap:10px; margin:0; }
.pg-dados > div { display:grid; gap:1px; min-width:0; }
.pg-dados dt { font-size:calc(11.8px * var(--k-fs)); color:var(--c-text-3); }
.pg-dados dd { margin:0; font-size:calc(13.2px * var(--k-fs)); font-weight:600; color:var(--c-text); overflow-wrap:anywhere; }
@media (max-width:1180px) {
  .pg-grade { grid-template-columns:minmax(0, 1fr); }
  .pg-lado { grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); }
}
@media (max-width:720px) {
  .pg-topo { margin-bottom:12px; }
  .pg-acoes { margin-left:0; }
  .pg-linha:has(.pg-av) + .pg-leg { margin-left:0; }
  html .pg-acoes .nv-btn { height:var(--h-cel, 36px); }
  .pg-acoes .ac-menu > summary.orc-menu-sum { width:var(--h-cel, 36px); height:var(--h-cel, 36px); }
  .pg-voltar { height:var(--h-cel, 36px); }
  html .pg-sec .nv-btn, html .pg-sec .nv-pbtn { height:var(--h-cel, 36px); }
  .pg-nums { grid-template-columns:minmax(0, 1fr); gap:8px; margin-bottom:12px; }
  .pg-grade, .pg-lado { gap:10px; }
  .pg-ilha { padding:12px; gap:10px; border-radius:16px; }
}

/* ============================================================
   COMISSÕES REFEITAS (cm-*, 09/10/2026; desenho "Z1" + "PP1" escolhido pelo Renato):
   um cartão por comissionado com as linhas da Agenda dentro; a página da pessoa usa as
   peças pg-* acima. A lista some quando a página está aberta (#comissoes/<id>).
   ============================================================ */
#view-comissoes[data-pagina] .cm-tela-lista { display:none; }
.cm-busca { width:300px; }
.cm-lista { display:grid; gap:16px; min-width:0; padding:16px; border-radius:20px; background:var(--c-bg); }
.cm-cartao { display:grid; grid-template-columns:minmax(0, 1fr); gap:12px; min-width:0; padding:16px; border-radius:18px; background:var(--c-surface); border:1px solid var(--c-border); }
.cm-cab { display:flex; align-items:center; gap:12px; min-width:0; cursor:pointer; }
.cm-av { flex:none; width:42px; height:42px; border-radius:50%; display:grid; place-items:center; font-size:14px; font-weight:700; letter-spacing:.4px; color:#fff;
  background:linear-gradient(135deg, hsl(var(--h, 210) 70% 55%), hsl(calc(var(--h, 210) + 35) 75% 40%)); }
.cm-av.mini { width:22px; height:22px; font-size:9.5px; letter-spacing:0; }
.cm-quem { flex:1; min-width:0; }
.cm-quem b { display:block; font-size:calc(15.5px * var(--k-fs)); font-weight:650; color:var(--c-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cm-quem small, .cm-tot small { display:block; font-size:calc(12px * var(--k-fs)); color:var(--c-text-3); }
.cm-tot { flex:none; text-align:right; }
.cm-tot b { display:block; font-size:calc(18px * var(--k-fs)); font-weight:700; letter-spacing:-.2px; color:var(--c-text); }
.cm-tot.bad b { color:var(--c-bad); }
.cm-cab .nv-btn { flex:none; }
html #view-comissoes .cm-menu:not([open]) > .orc-menu-pop { display:none; }   /* fechado, o menu não ocupa lugar (como o "+ Novo" de Propostas) */
.cm-menu-oculto > summary { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); padding:0; border:0; }   /* o ⋯ da pessoa só no botão direito */
.cm-corpo { display:grid; gap:10px; min-width:0; }
.cm-corpo:empty { display:none; }
.cm-grupo { display:grid; grid-template-columns:minmax(0, 1fr); min-width:0; border:1px solid var(--c-border); border-radius:14px; background:var(--c-bg); overflow:hidden; }
.cm-lin { display:grid; grid-template-columns:42px minmax(0, 1fr) 150px 170px 32px; gap:14px; align-items:center; min-width:0; padding:10px 14px;
  border-top:1px solid var(--c-border); cursor:pointer; }
.cm-grupo > .cm-lin:first-child { border-top:0; }
.cm-lin:hover { background:var(--c-hover); }
.cm-lin:focus-visible { outline:2px solid var(--c-accent); outline-offset:-2px; }
.cm-lin-curta { grid-template-columns:42px minmax(0, 1fr) auto; }
.cm-lc { display:grid; min-width:0; }
.cm-ln { display:block; font-size:calc(14px * var(--k-fs)); font-weight:600; color:var(--c-text); overflow-wrap:anywhere; }
.cm-li { display:block; font-size:calc(12.4px * var(--k-fs)); color:var(--c-text-3); overflow-wrap:anywhere; }
.cm-lv { display:grid; justify-items:end; gap:2px; min-width:0; text-align:right; }
.cm-lv b { font-size:calc(14px * var(--k-fs)); font-weight:700; color:var(--c-text); font-variant-numeric:tabular-nums; white-space:nowrap; }
.cm-lv small { font-size:calc(11.8px * var(--k-fs)); color:var(--c-text-3); }
.cm-lp { min-width:0; }
.cm-lr { display:contents; }   /* valor + situação: colunas próprias no computador; no celular, uma linha que quebra */
.cm-lin > .ac-menu { position:static; justify-self:end; }
.cm-pixq { width:42px; height:42px; border-radius:var(--r-sm); display:grid; place-items:center; background:color-mix(in srgb, #32BCAD 18%, transparent); color:#32BCAD; }
.cm-pixq.cm-compq { background:color-mix(in srgb, var(--c-ok) 14%, transparent); color:var(--c-ok); }   /* compensação: sem Pix, pagas com o desconto */
.cm-mes { display:flex; align-items:center; gap:6px 10px; flex-wrap:wrap; min-width:0; margin:4px 2px 0; }
.cm-mn { font-size:calc(15px * var(--k-fs)); font-weight:650; color:var(--c-text); }
.cm-mtag { height:19px; padding:0 8px; display:inline-flex; align-items:center; border-radius:999px; font-size:11px; font-weight:700; background:var(--c-accent-soft); color:var(--c-accent-text); }
.cm-mi { font-size:calc(12.6px * var(--k-fs)); color:var(--c-text-3); }
.cm-vao { flex:1; }
.cm-semnada { display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:2px 4px; font-size:12.5px; color:var(--c-text-3); }
.cm-pessoa-chip { display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 12px 0 4px; border-radius:999px; border:1px solid var(--c-border); background:var(--c-surface);
  color:var(--c-text-2); font:600 12.5px var(--f-ui); cursor:pointer; }
.cm-pessoa-chip:hover { border-color:var(--c-border-2); color:var(--c-text); }
.cm-vazio { margin:0; }
.cm-mais { justify-self:center; }
.cm-ano-pop { width:260px; }
@media (max-width:1000px) {
  /* a situação desce para baixo do texto (uma etiqueta larga espremia o nome do evento) */
  .cm-lin { grid-template-columns:42px minmax(0, 1fr) auto 32px; grid-template-areas:"d c v m" "d p p m"; row-gap:6px; }
  .cm-lin > .nv-data, .cm-lin > .cm-pixq { grid-area:d; } .cm-lin > .cm-lc { grid-area:c; } .cm-lin .cm-lv { grid-area:v; align-self:start; }
  .cm-lin .cm-lp { grid-area:p; justify-self:start; } .cm-lin > .ac-menu { grid-area:m; }
  .cm-lin-curta { grid-template-columns:42px minmax(0, 1fr) auto; grid-template-areas:"d c v"; }
}
@media (max-width:720px) {
  .cm-busca { width:auto; }
  .cm-lista { padding:10px; gap:10px; border-radius:16px; }
  .cm-cartao { padding:12px; gap:10px; border-radius:16px; }
  .cm-cab { flex-wrap:wrap; } .cm-cab .cm-quem { flex:1 1 140px; }
  .cm-cab .nv-btn { height:var(--h-cel, 36px); }
  .cm-lin { gap:4px 10px; padding:10px 12px; }
  .cm-quem b { white-space:normal; overflow-wrap:anywhere; }
  .cm-lin > .ac-menu > summary.orc-menu-sum { width:var(--h-cel, 36px); height:var(--h-cel, 36px); }
  /* no celular o nome usa a largura toda; embaixo, a situação à esquerda e o valor à direita (quebra a linha se não couber) */
  .cm-lin { grid-template-columns:42px minmax(0, 1fr) 36px; grid-template-areas:"d c m" "d r m"; }
  .cm-lin > .cm-lr { grid-area:r; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:4px 10px; min-width:0; }
  .cm-lr > .cm-lp { order:-1; }
  .cm-lr > .cm-lv { margin-left:auto; }
  .cm-lin-curta { grid-template-columns:42px minmax(0, 1fr) auto; grid-template-areas:"d c v"; }
  .cm-lin-curta > .cm-lv { grid-area:v; }
  .cm-mes .nv-btn { height:var(--h-cel, 36px); }
  .cm-pessoa-chip { height:var(--h-cel, 36px); }
}

/* ============================================================
   PAGAR EM 3 PASSOS (refeito em 10/10, desenho PG1–PG3 aprovado em 09/10; PagarPassos):
   1 O que pagar (a lista com as caixinhas e o total do Pix) · 2 Pagar o Pix · 3 Comprovante.
   ============================================================ */
#modal-pagar-passos .modal { width:min(620px, calc(100vw - 32px)); max-height:calc(100dvh - 40px); display:flex; flex-direction:column; }
/* altura fixa (como a janela da pessoa, #70): trocar de passo não muda o tamanho da janela nem o lugar da trilha
   e do rodapé; o que não cabe rola por dentro */
html .nv-janela .modal.pp-modal { height:min(720px, 90vh, calc(100dvh - 32px)); }
#modal-pagar-passos .pp-cabeca { display:flex; align-items:center; gap:12px; }
.pp-av { flex:none; }
.pp-cab { flex:1; display:grid; gap:2px; min-width:0; }
.pp-cab h3 { margin:0; overflow-wrap:anywhere; }
.pp-passos { list-style:none; margin:0; padding:12px 22px; display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--c-border); }
.pp-passos li[data-pp-passo] { flex:none; display:flex; align-items:center; gap:8px; min-width:0; font-size:calc(13px * var(--k-fs)); color:var(--c-text-3); }
.pp-passos li[data-pp-passo] span { white-space:nowrap; }
.pp-passos li.pp-lin { flex:1; min-width:16px; height:1.5px; border-radius:2px; background:var(--c-border-2); }
.pp-passos li.pp-lin.feito { background:var(--c-ok); }
.pp-passos b { flex:none; width:24px; height:24px; border-radius:50%; display:grid; place-items:center; border:1.5px solid var(--c-border-2); font-size:11.5px; font-weight:700; }
.pp-passos li.on { color:var(--c-text); font-weight:600; }
.pp-passos li.on b { border-color:var(--c-accent); color:var(--c-accent-text); }
.pp-passos li.feito { color:var(--c-text-2); }
.pp-passos li.feito b { background:var(--c-ok); border-color:var(--c-ok); color:var(--c-bg); }
#modal-pagar-passos .pp-corpo { flex:1; overflow-y:auto; overscroll-behavior:contain; padding:16px 22px; }
.pp-tela { display:grid; grid-template-columns:minmax(0, 1fr); gap:14px; }
.pp-tela[hidden] { display:none; }
/* passo 1: a lista */
.pp-lista { display:grid; grid-template-columns:minmax(0, 1fr); border:1px solid var(--c-border); border-radius:14px; background:var(--c-bg); overflow:hidden; }
.pp-it { display:grid; grid-template-columns:18px 42px minmax(0, 1fr) auto; gap:14px; align-items:center; min-width:0; padding:11px 16px; border-top:1px solid var(--c-border); cursor:pointer; }
.pp-it:first-child { border-top:0; }
.pp-it:hover { background:var(--c-hover); }
.pp-it > input { width:18px; height:18px; margin:0; accent-color:var(--c-accent); cursor:pointer; }
.pp-it > input:focus-visible { outline:2px solid var(--c-accent); outline-offset:2px; }
.pp-it-c { display:grid; min-width:0; }
.pp-it-c b { font-size:calc(14px * var(--k-fs)); font-weight:600; color:var(--c-text); overflow-wrap:anywhere; }
.pp-it-c small { font-size:calc(12.4px * var(--k-fs)); color:var(--c-text-3); overflow-wrap:anywhere; }
.pp-it-v { font-size:calc(14.5px * var(--k-fs)); font-weight:700; color:var(--c-text); white-space:nowrap; font-variant-numeric:tabular-nums; }
.pp-it.off > :not(input) { opacity:.5; }
.pp-vazio { padding:18px; text-align:center; font-size:12.5px; color:var(--c-text-3); }
.pp-total { display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:2px 6px 0; }
.pp-total span { font-size:calc(15px * var(--k-fs)); font-weight:600; color:var(--c-text); }
.pp-total b { font-size:calc(24px * var(--k-fs)); font-weight:700; letter-spacing:-.3px; color:var(--c-text); }
.pp-aviso, .pp-lido { display:flex; align-items:flex-start; gap:8px; margin:0; padding:10px 12px; border-radius:12px; font-size:calc(12.8px * var(--k-fs)); line-height:1.45; }
.pp-aviso { background:var(--c-warn-soft); color:var(--c-warn); }
.pp-aviso[hidden], .pp-lido[hidden] { display:none; }
.pp-aviso > .nv-ic, .pp-lido > .nv-ic, .pp-lido > .btn-spin { flex:none; margin-top:1px; }
.pp-aviso span { color:var(--c-text-2); }
/* passo 2: o Pix */
.pp-pix { display:flex; gap:22px; align-items:center; padding:18px; border:1px solid var(--c-border); border-radius:14px; background:var(--c-bg); }
.pp-pix[hidden], .pp-sem-pix[hidden] { display:none; }
.pp-qr { flex:none; padding:10px; border-radius:12px; background:#fff; line-height:0; }
.pp-qr canvas { width:170px !important; height:170px !important; }
.pp-pix-dados { flex:1; display:grid; gap:6px; justify-items:start; min-width:0; }
.pp-rot { font-size:calc(12.8px * var(--k-fs)); color:var(--c-text-2); }
.pp-valor { font-size:calc(28px * var(--k-fs)); font-weight:700; letter-spacing:-.4px; line-height:1.1; color:var(--c-text); }
.pp-para { font-size:calc(13px * var(--k-fs)); color:var(--c-text-2); overflow-wrap:anywhere; }
.pp-copiar { margin-top:4px; gap:8px; }
.pp-copiar.copiado { background:var(--c-ok) !important; border-color:var(--c-ok) !important; color:var(--c-bg) !important; }
.pp-dica { font-size:calc(12.4px * var(--k-fs)); color:var(--c-text-3); }
.pp-cc-oculto { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.pp-sem-pix { display:flex; gap:12px; align-items:flex-start; padding:14px; border:1px solid var(--c-border); border-radius:14px; background:color-mix(in srgb, var(--c-warn) 7%, transparent);
  font-size:calc(12.8px * var(--k-fs)); color:var(--c-text-2); }
.pp-sem-pix > div { display:grid; gap:4px; justify-items:start; }
.pp-sem-pix b { color:var(--c-text); }
.pp-sem-pix .nv-btn { margin-top:6px; gap:6px; }
.pp-sem-ico { flex:none; width:36px; height:36px; border-radius:10px; display:grid; place-items:center; color:var(--c-warn); background:color-mix(in srgb, var(--c-warn) 15%, transparent); }
/* passo 3: comprovante */
.pp-drop { display:flex; align-items:center; gap:12px; min-width:0; padding:14px 16px; border:1.5px dashed var(--c-border-2); border-radius:14px; background:var(--c-bg);
  transition:border-color .14s ease-out, background .14s ease-out; }
.pp-drop.cheio { border-style:solid; }
.pp-drop.arrastando { border-color:var(--c-accent); background:var(--c-accent-soft); }
.pp-drop-ico { flex:none; color:var(--c-text-2); line-height:0; }
.pp-drop-txt { flex:1; display:grid; gap:2px; min-width:0; }
.pp-drop-txt b { font-size:calc(14px * var(--k-fs)); font-weight:600; color:var(--c-text); overflow-wrap:anywhere; }
.pp-drop-txt span { font-size:calc(12.4px * var(--k-fs)); color:var(--c-text-3); }
.pp-drop .nv-btn { flex:none; gap:6px; }
.pp-lido { padding:0 2px; color:var(--c-text-2); }
.pp-lido.ok { color:var(--c-ok); font-weight:600; }
.pp-lido.ok b { color:inherit; }
.pp-lido.aviso { padding:10px 12px; background:var(--c-warn-soft); }
.pp-lido.aviso > .nv-ic { color:var(--c-warn); }
.pp-lido b { color:var(--c-text); }
.pp-lido-acoes { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.pp-lido-acoes .nv-btn { gap:6px; }
.pp-mais-btn { justify-self:start; display:inline-flex; align-items:center; gap:7px; padding:2px; border:0; background:none; color:var(--c-text-2); font:500 calc(12.8px * var(--k-fs)) var(--f-ui); cursor:pointer; }
.pp-mais-btn:hover { color:var(--c-text); }
.pp-mais-btn small { color:var(--c-text-3); font-size:calc(11.8px * var(--k-fs)); }
.pp-mais-btn .pp-mais-seta { transition:transform .14s ease-out; }
.pp-mais-btn .pp-mais-seta.on { transform:rotate(90deg); }
.pp-mais-campos { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
.pp-mais-campos[hidden] { display:none; }
.pp-mais-campos label { display:grid; gap:4px; font-size:calc(12.2px * var(--k-fs)); color:var(--c-text-2); }
.pp-mais-campos .pp-larga { grid-column:1 / -1; }
.pp-mais-campos input { height:34px; padding:0 10px; border:1px solid var(--c-border-2); border-radius:var(--r-md); background:var(--c-bg); color:var(--c-text); font-family:var(--f-ui); font-size:13px; }
.pp-avisar { display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border:1px solid var(--c-border); border-radius:14px; background:var(--c-bg); cursor:pointer; }
.pp-avisar > input { flex:none; width:18px; height:18px; margin:2px 0 0; accent-color:var(--c-accent); cursor:pointer; }
.pp-avisar > span { display:grid; gap:2px; min-width:0; }
.pp-avisar b { font-size:calc(14.5px * var(--k-fs)); font-weight:650; color:var(--c-text); }
.pp-avisar small { font-size:calc(12.4px * var(--k-fs)); color:var(--c-text-3); }
/* rodapé */
#modal-pagar-passos .pp-rodape { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
#modal-pagar-passos .pp-rodape .nv-btn { gap:6px; }
#modal-pagar-passos .pp-rodape .pp-fantasma { border-color:transparent; background:transparent; color:var(--c-text-2); }
#modal-pagar-passos .pp-rodape .pp-fantasma:hover { background:var(--c-hover); color:var(--c-text); }
@media (max-width:720px) {
  #modal-pagar-passos .modal { width:100%; max-height:100dvh; }
  .pp-passos { padding:10px 16px; gap:6px; }
  .pp-passos li[data-pp-passo]:not(.on) span { display:none; }
  #modal-pagar-passos .pp-corpo { padding:14px 16px; }
  /* o valor desce para baixo do nome (o nome usa a largura toda) */
  .pp-it { grid-template-columns:18px 42px minmax(0, 1fr); grid-template-areas:"k d c" "k d v"; gap:2px 10px; padding:10px 12px; }
  .pp-it > input { grid-area:k; } .pp-it > .nv-data { grid-area:d; } .pp-it > .pp-it-c { grid-area:c; } .pp-it > .pp-it-v { grid-area:v; margin-top:2px; }
  #modal-pagar-passos .pp-cabeca .cm-av { width:36px; height:36px; font-size:12.5px; }
  .pp-pix { flex-direction:column; align-items:stretch; }
  .pp-qr { align-self:center; }
  .pp-pix-dados { justify-items:stretch; text-align:center; }
  .pp-copiar { justify-content:center; height:var(--h-cel-pe, 40px); }
  .pp-drop { flex-wrap:wrap; }
  .pp-drop .nv-btn { flex:1 1 100%; justify-content:center; height:var(--h-cel, 36px); }
  .pp-mais-campos { grid-template-columns:minmax(0, 1fr); }
  .pp-mais-campos input, .pp-lido-acoes .nv-btn { height:var(--h-cel, 36px); }
  /* "Conferir o comprovante": Cancelar e Confirmar lado a lado, com 40px */
  #cx-comp-ov .modal-foot { display:flex; gap:8px; }
  #cx-comp-ov .modal-foot .pp-vao { display:none; }
  #cx-comp-ov .modal-foot { flex-wrap:nowrap; }
  #cx-comp-ov .modal-foot .nv-btn { flex:1 1 0; min-width:0; justify-content:center; height:var(--h-cel-pe, 40px); }
  #cx-comp-ov .cf-longo { display:none; } #cx-comp-ov .cf-curto { display:inline; }   /* "Marcar como pagas" cabe ao lado do Cancelar */
  /* 2 botões lado a lado; com 3, o principal numa linha só, em cima */
  #modal-pagar-passos .pp-rodape .nv-btn { flex:1 1 0; justify-content:center; }
  #modal-pagar-passos .pp-rodape:has(> .nv-btn:nth-of-type(3)) .nv-btn.primario { flex-basis:100%; order:-1; }
  #modal-pagar-passos .pp-rodape .pp-vao { display:none; }
}

/* "Conferir o comprovante" (refeita em 10/10, desenho C1): o que eu li · de quem é · paga estas comissões */
#cx-comp-ov .modal-body { display:grid; grid-template-columns:minmax(0, 1fr); gap:14px; }
.cf-rot { font-size:11px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--c-text-3); }
.cf-lido { display:grid; gap:6px; padding:12px 16px; border:1px solid var(--c-border); border-radius:14px; background:var(--c-bg); }
.cf-l1 { display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:calc(15px * var(--k-fs)); color:var(--c-text); }
.cf-l1 b { font-weight:700; }
.cf-id { font-size:calc(12.4px * var(--k-fs)); color:var(--c-text-3); font-variant-numeric:tabular-nums; }
.cf-l2 { font-size:calc(12.8px * var(--k-fs)); color:var(--c-text-2); overflow-wrap:anywhere; }
.cf-aviso { margin:0; }
.cf-sec { display:grid; gap:8px; min-width:0; }
.cf-quem { display:flex; align-items:center; gap:10px; flex-wrap:wrap; min-width:0; }
.cf-quem .cm-av { width:32px; height:32px; font-size:11.5px; }
.cf-nome { font-size:calc(15px * var(--k-fs)); font-weight:650; color:var(--c-text); overflow-wrap:anywhere; }
.cf-porque { margin-left:auto; font-size:calc(12.4px * var(--k-fs)); color:var(--c-text-3); }
.cf-sel { width:100%; }
/* linhas mais baixas, com a data no texto (quem rola é a janela, não a lista) */
#cx-comp-ov .pp-it.curta { grid-template-columns:18px minmax(0, 1fr) auto; padding:9px 14px; }
#cx-comp-ov .pp-it.curta .pp-it-c b { font-size:calc(13.6px * var(--k-fs)); }
.cf-total { display:grid; gap:6px; }
.cf-total:empty { display:none; }
.cf-bate { display:flex; align-items:center; gap:6px; margin:0; padding:0 6px; font-size:calc(12.8px * var(--k-fs)); font-weight:600; }
.cf-bate.ok { color:var(--c-ok); }
.cf-bate.dif { color:var(--c-warn); }
.cf-bate .nv-ic { flex:none; }
.cf-curto { display:none; }
@media (max-width:720px) {
  .cf-porque { margin-left:0; flex:1 1 100%; order:3; }
  .cf-quem .nv-btn { margin-left:auto; height:var(--h-cel, 36px); }
}

/* ============================================================
   CADASTRO DO COMISSIONADO EM ILHAS (10/10, etapa 4 de Comissões; desenho K1 com o Tipo B)
   ============================================================ */
html .modal.fe2-ct { max-width:640px; }
.ct-av { flex:none; width:40px; height:40px; font-size:14px; }
.ct-rot { display:block; margin:4px 0 -2px; font-size:calc(12.6px * var(--k-fs)); font-weight:600; color:var(--c-text-2); }
.ct-tipos { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); grid-auto-rows:1fr; gap:8px; }   /* todos os quadradinhos da mesma altura */
.ct-tipo { display:grid; justify-items:center; align-content:center; gap:8px; min-height:92px; padding:12px 8px; border:1.5px solid var(--c-border); border-radius:12px;
  background:var(--c-bg); color:var(--c-text-2); font:500 calc(13px * var(--k-fs)) var(--f-ui); text-align:center; cursor:pointer; }
.ct-tipo:hover { border-color:var(--c-border-2); color:var(--c-text); }
.ct-tipo.on { border-color:var(--c-accent); color:var(--c-text); font-weight:600; }
.ct-tipo:focus-visible { outline:2px solid var(--c-accent); outline-offset:2px; }
.ct-tipo-ic { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:var(--c-hover); color:var(--c-text-2); }
.ct-tipo.on .ct-tipo-ic { color:var(--c-accent-text); background:var(--c-accent-soft); }
.ct-seg.nv-seg { flex-wrap:wrap; }
.ct-pcts { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.ct-pct { display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 4px 0 12px; border-radius:999px; background:var(--c-hover); font-size:calc(13px * var(--k-fs)); color:var(--c-text-2); }
.ct-pct b { color:var(--c-text); font-weight:700; }
.ct-pct-x { width:22px; height:22px; display:grid; place-items:center; border:0; border-radius:50%; background:none; color:var(--c-text-3); cursor:pointer; }
.ct-pct-x:hover { background:var(--c-border); color:var(--c-text); }
.ct-pct-mais { display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 10px; border:0; border-radius:999px; background:none; color:var(--c-text); font:600 calc(13px * var(--k-fs)) var(--f-ui); cursor:pointer; }
.ct-pct-mais:hover { background:var(--c-hover); }
.ct-pct-mais[hidden] { display:none; }
.ct-pct-novo { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.ct-pct-novo[hidden] { display:none; }
.ct-pct-novo select { flex:1 1 180px; min-width:0; height:34px; }
.ct-pct-novo .fe2-sufixo { flex:0 0 96px; }
.ct-pct-novo .fe2-sufixo input { height:34px; }
@media (max-width:720px) {
  .ct-tipos { grid-template-columns:repeat(3, minmax(0, 1fr)); gap:6px; }
  .ct-tipo { min-height:84px; padding:10px 4px; font-size:12.5px; }
  .ct-pct, .ct-pct-mais { height:var(--h-cel, 36px); }
  .ct-pct-x { width:36px; height:36px; }
  /* os botões lado a lado de texto comprido ficam um embaixo do outro (dentro da pílula quebravam em 2 linhas) */
  html .fe2-seg.nv-seg.ct-seg, html #fe-quem-seg.nv-seg { display:grid; grid-template-columns:minmax(0, 1fr); justify-self:stretch; width:100%; }
  html .fe2-seg.nv-seg.ct-seg > button, html #fe-quem-seg.nv-seg > button { height:var(--h-cel, 36px); text-align:left; padding:0 14px; }
  .ct-pct-novo select, .ct-pct-novo .fe2-sufixo input, .ct-pct-novo .nv-btn { height:var(--h-cel, 36px); }
}

/* Ilha "Comissionado" do formulário do evento (desenho E1, 10/10) */
.fe2-pessoa .cm-av { width:36px; height:36px; font-size:13px; }
.fe2-igual-bloco { display:grid; gap:1px; min-width:0; }
.fe2-igual-bloco .fe2-igual { font-size:calc(14px * var(--k-fs)); }
.fe2-igual-bloco .fe2-igual b { font-size:calc(17px * var(--k-fs)); font-weight:700; }
.fe2-regra-de { font-size:calc(12.2px * var(--k-fs)); color:var(--c-text-3); }
.fe2-regra-de[hidden] { display:none; }
.fe2-quem { display:grid; gap:8px; margin-top:4px; }
.fe2-quem[hidden] { display:none; }
.fe2-quem .nv-seg { flex-wrap:wrap; }
.fe2-quem .fe-ajuda { margin:0; }
#fe-comissao-modo[hidden] { display:none; }

/* ============================================================
   O LINK FIXO DO COMISSIONADO NA PÁGINA DA PESSOA (10/10, etapa 5): "Link de <nome>"
   com "Copiar o link | Ver como ele vê" numa pílula só, o menu "Mensagem" e a prévia.
   ============================================================ */
.cm-link-bts { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.cm-link-seg { display:inline-flex; max-width:100%; border:1px solid var(--c-border-2); border-radius:999px; overflow:hidden; background:var(--c-surface); }
.cm-link-seg > button { display:inline-flex; align-items:center; gap:6px; height:var(--h-btn-sm, 28px); padding:0 12px; border:0; background:none; color:var(--c-text);
  font:600 calc(12.6px * var(--k-fs)) var(--f-ui); cursor:pointer; white-space:nowrap; }
.cm-link-seg > button + button { border-left:1px solid var(--c-border-2); }
.cm-link-seg > button:hover { background:var(--c-hover); }
.cm-link-seg > button:focus-visible { outline:2px solid var(--c-accent); outline-offset:-2px; }
.cm-msg-menu > summary { list-style:none; }
.cm-msg-menu > summary::-webkit-details-marker { display:none; }
html #view-comissoes .cm-msg-menu:not([open]) > .orc-menu-pop { display:none; }
#cx-link-previa .modal-body { padding:0; }
#cx-link-previa .cx-link-sem { margin:28px 22px; }
.cx-link-ifr { display:block; width:100%; height:min(70vh, 640px); border:0; background:transparent; }
@media (max-width:720px) {
  .cm-link-seg { display:flex; width:100%; }
  .cm-link-seg > button { flex:1 1 0; justify-content:center; height:var(--h-cel, 36px); padding:0 8px; }
  .cx-link-ifr { height:calc(100dvh - 200px); }
  html #cx-link-previa .modal-foot .nv-btn { height:var(--h-cel-pe, 40px); }   /* o rodapé da prévia como o das outras janelas */
}

/* ============================================================
   PÁGINA DA PROPOSTA / DO CONTRATO (D1, entrega 2 de Propostas, 10/10/2026; PcPagina em app/propostas-pagina.js)
   Usa as peças pg-* de Comissões; aqui só o que é dela (dp-*, como no desenho D1; pp-* é do "Pagar em 3 passos"). A lista some quando a página está aberta.
   ============================================================ */
#view-orcamentos[data-pagina] > :not(#pc-pg) { display:none !important; }
/* entrega 3: o registro das assinaturas no bloco "Contrato e assinaturas" */
.dp-reg { margin-top:var(--esp-2); }
.dp-reg summary { cursor:pointer; font-size:calc(12.5px * var(--k-fs)); color:var(--c-text-2); list-style:none; }
.dp-reg summary::-webkit-details-marker { display:none; }
@media (max-width:720px) { .dp-reg summary { min-height:var(--h-cel, 36px); display:flex; align-items:center; } }
.dp-reg summary::after { content:' ›'; }
.dp-reg[open] summary::after { content:' ⌄'; }
.dp-reg-l { display:grid; gap:2px; padding:8px 0; border-top:1px solid var(--c-border); font-size:calc(12.5px * var(--k-fs)); color:var(--c-text); overflow-wrap:anywhere; }
.dp-reg-l:first-of-type { margin-top:6px; }
.dp-reg-l small { color:var(--c-text-2); font-size:calc(11.5px * var(--k-fs)); line-height:1.45; }
.pc-pg { min-width:0; }
/* o ⋯ do topo com a altura dos outros botões (a regra da lista, com o id da tela, deixava 30px) */
#pc-pg .pg-acoes .ac-menu > summary.orc-menu-sum { width:var(--h-btn, 34px); height:var(--h-btn, 34px); }
.dp-col { display:grid; gap:16px; align-content:start; min-width:0; }
.dp-vao { flex:1; }
.dp-mais { border:0; background:none; padding:0; font:inherit; font-size:calc(12.5px * var(--k-fs)); font-weight:600; color:var(--c-accent-text, var(--c-accent)); cursor:pointer; white-space:nowrap; }
.dp-mais:hover { text-decoration:none; color:var(--c-text); }
.dp-mais:focus-visible { outline:2px solid var(--c-accent); outline-offset:2px; border-radius:6px; }
.dp-pe { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
/* a trilha de 5 passos, com as datas */
.dp-tri { list-style:none; display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:6px; margin:0 0 14px; padding:0; }
.dp-tri li { display:grid; gap:4px; min-width:0; font-size:calc(12px * var(--k-fs)); color:var(--c-text-3); }
.dp-tri i { height:6px; border-radius:6px; background:var(--c-border-2); }
.dp-tri b { font-weight:600; font-size:calc(12.5px * var(--k-fs)); color:var(--c-text-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dp-tri small { font-size:calc(11.5px * var(--k-fs)); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dp-tri .f i { background:var(--c-ok); } .dp-tri .f b { color:var(--c-text); }
.dp-tri .a i { background:var(--c-warn); } .dp-tri .a b { color:var(--c-warn); }
.dp-tri .r i { background:var(--c-bad); } .dp-tri .r b { color:var(--c-bad); }
.dp-tri .p { opacity:.5; }
/* o aviso do momento */
.dp-aviso { display:flex; align-items:center; justify-content:space-between; gap:10px 14px; flex-wrap:wrap; margin:0 0 16px; padding:12px 14px; border-radius:14px;
  background:color-mix(in srgb, var(--k, var(--c-warn)) 12%, var(--c-surface)); border:1px solid color-mix(in srgb, var(--k, var(--c-warn)) 35%, transparent); }
.dp-aviso.ok { --k:var(--c-ok); } .dp-aviso.bad { --k:var(--c-bad); } .dp-aviso.warn { --k:var(--c-warn); }
.dp-aviso-tx { flex:1 1 260px; min-width:0; font-size:calc(13.5px * var(--k-fs)); color:var(--c-text); overflow-wrap:anywhere; }
.dp-aviso-tx small { display:block; margin-top:2px; font-size:calc(12px * var(--k-fs)); color:var(--c-text-2); }
.dp-aviso-bt { display:flex; gap:8px; flex-wrap:wrap; }
/* 14/10 (print do Renato: "a faixa verde ficou feia"): os avisos empilhados, cada um num cartão do painel com o ícone
   na cor do aviso (sem a faixa colorida inteira), o texto e as ações dele à direita */
.dp-avisos { display:grid; gap:8px; margin:0 0 16px; }
.dp-avisos .dp-aviso { margin:0; padding:12px 14px; background:var(--c-surface); border:1px solid var(--c-border); flex-wrap:nowrap; }
.dp-aviso-ic { flex:none; display:grid; place-items:center; width:32px; height:32px; border-radius:10px; align-self:flex-start;
  background:color-mix(in srgb, var(--k, var(--c-warn)) 16%, transparent); color:var(--k, var(--c-warn)); }
.dp-avisos .dp-aviso-tx { line-height:1.45; }
@media (max-width:900px) { .dp-avisos .dp-aviso { flex-wrap:wrap; } .dp-avisos .dp-aviso-bt { flex-basis:100%; padding-left:46px; } }
/* dados em 2 colunas (Cliente, Evento) */
.dp-dados2 { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px 18px; }
/* o que está na proposta (15/10: um cartão por item; o que vem no pacote com ✓; o total embaixo) */
.dp-itens { display:grid; gap:12px; min-width:0; }
.dp-pacs { display:grid; gap:10px; min-width:0; }
.dp-pac { border:1px solid var(--c-border); border-radius:12px; background:var(--c-bg); min-width:0; }
.dp-pac-cab { display:grid; grid-template-columns:32px minmax(0, 1fr) auto; gap:12px; align-items:center; padding:12px 14px; }
.dp-pac-ic { width:32px; height:32px; border-radius:9px; display:grid; place-items:center; background:var(--c-accent-soft); color:var(--c-accent); }
.dp-pac-tx { display:grid; gap:2px; min-width:0; }
.dp-pac-tx b { font-size:calc(14px * var(--k-fs)); font-weight:600; color:var(--c-text); overflow-wrap:anywhere; }
.dp-pac-tx small { font-size:calc(12px * var(--k-fs)); color:var(--c-text-3); }
.dp-pac-v { font-size:calc(14px * var(--k-fs)); font-weight:700; color:var(--c-text); white-space:nowrap; font-variant-numeric:tabular-nums; }
.dp-pac-incl { display:inline-block; font-size:calc(11.5px * var(--k-fs)); font-weight:600; padding:2px 9px; border-radius:999px; background:color-mix(in srgb, var(--c-ok) 14%, transparent); color:var(--c-ok); }
.dp-pac-inc { list-style:none; margin:0; padding:11px 14px 13px 58px; border-top:1px solid var(--c-border); display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px 20px; }
.dp-pac-inc li { display:grid; grid-template-columns:14px minmax(0, 1fr); gap:8px; align-items:start; font-size:calc(12.5px * var(--k-fs)); line-height:1.4; color:var(--c-text-2); min-width:0; }
.dp-pac-inc li span { min-width:0; overflow-wrap:anywhere; }
.dp-pac-inc li small { color:var(--c-text-3); }
.dp-pac-inc li .nv-ic { color:var(--c-ok); margin-top:2px; }
.dp-pac-tot { display:grid; gap:6px; padding:0 2px; }
.dp-pac-tot > div { display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-size:calc(13px * var(--k-fs)); color:var(--c-text-2); }
.dp-pac-tot b { font-weight:600; color:var(--c-text); font-variant-numeric:tabular-nums; white-space:nowrap; }
.dp-pac-tot > .dp-pac-total { padding-top:10px; border-top:1px solid var(--c-border); font-size:calc(16px * var(--k-fs)); font-weight:700; color:var(--c-text); }
.dp-pac-tot > .dp-pac-total b { font-weight:700; }
.dp-pac-tot > .dp-pac-total:first-child { padding-top:2px; border-top:0; }
@media (max-width:720px) {
  .dp-pac-cab { padding:11px 12px; gap:10px; }
  .dp-pac-inc { grid-template-columns:minmax(0, 1fr); padding:10px 12px 12px; }
}
/* contrato e assinaturas */
.dp-asss { display:grid; gap:8px; }
.dp-ass { display:flex; align-items:center; gap:10px; min-width:0; font-size:calc(13px * var(--k-fs)); color:var(--c-text); }
.dp-ass > span:not(.dp-vao):not(.nv-pill) { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dp-ass > svg { flex:none; color:var(--c-text-3); }
.dp-fis { display:grid; gap:6px; }
/* dinheiro */
.dp-din { display:grid; gap:7px; }
.dp-din-l { display:flex; justify-content:space-between; gap:10px; font-size:calc(13px * var(--k-fs)); color:var(--c-text-2); }
.dp-din-l b { color:var(--c-text); font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; }
.dp-din-l.g b { font-size:calc(19px * var(--k-fs)); font-weight:700; letter-spacing:-.3px; }
.dp-din-l.ok b { color:var(--c-ok); }
.dp-forma { margin-top:-2px; }
.dp-bar { height:8px; border-radius:8px; background:var(--c-border-2); overflow:hidden; }
.dp-bar i { display:block; height:100%; border-radius:8px; background:var(--c-ok); }
/* link do cliente */
.dp-lk { display:grid; gap:8px; min-width:0; }
.dp-url { display:flex; align-items:center; gap:8px; min-width:0; padding:8px 10px; border-radius:10px; background:var(--c-bg); border:1px solid var(--c-border); font-size:calc(12.5px * var(--k-fs)); color:var(--c-text-2); }
.dp-url > svg { flex:none; }
.dp-url span { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* versões */
.dp-vers { display:grid; gap:8px; }
.dp-ver { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; padding:9px 12px; border-radius:12px; background:var(--c-bg); border:1px solid var(--c-border); font-size:calc(13px * var(--k-fs)); color:var(--c-text-2); }
.dp-ver.on { color:var(--c-text); border-color:var(--c-border-2); }
.dp-ver small { font-size:calc(11.5px * var(--k-fs)); color:var(--c-text-3); }
.dp-ver { flex-wrap:nowrap; }
.dp-ver-tx { display:grid; gap:2px; min-width:0; }
.dp-ver > .nv-btn { flex:none; }
/* histórico */
.dp-tl { list-style:none; display:grid; margin:0; padding:0; }
.dp-tl li { display:grid; grid-template-columns:10px minmax(0, 1fr) auto; gap:10px; align-items:start; padding:6px 0; font-size:calc(12.8px * var(--k-fs)); color:var(--c-text); }
.dp-tl i { width:10px; height:10px; margin-top:4px; border-radius:50%; background:var(--k, var(--c-border-2)); }
.dp-tl span { min-width:0; overflow-wrap:anywhere; }
.dp-tl small { font-size:calc(11.5px * var(--k-fs)); color:var(--c-text-3); white-space:nowrap; }
@media (max-width:720px) {
  .dp-col { gap:10px; }
  .dp-tri { gap:4px; }
  .dp-tri b { font-size:calc(11px * var(--k-fs)); } .dp-tri small { font-size:calc(10.5px * var(--k-fs)); }
  .dp-aviso { margin-bottom:12px; }
  html .dp-aviso-bt .nv-btn, html .dp-pe .nv-btn { height:var(--h-cel, 36px); }
  html #pc-pg .pg-acoes .ac-menu > summary.orc-menu-sum { width:var(--h-cel, 36px); height:var(--h-cel, 36px); }
  .dp-dados2 { grid-template-columns:minmax(0, 1fr); }
  .dp-mais { min-height:36px; }
}

/* ---------- O EDITOR DA PROPOSTA EM PÁGINA (E1; OcEditor): a janela #modal-orc vira o miolo da página ---------- */
html #pc-pg > #modal-orc.pagina { display:block; position:static; inset:auto; z-index:auto; padding:0; background:none; backdrop-filter:none; animation:none; overflow:visible; }
html #modal-orc.pagina > .modal { position:static; width:auto; max-width:none; height:auto; max-height:none; margin:0; overflow:visible; display:block; background:none; border:0; border-radius:0; box-shadow:none; animation:none; transform:none; }
html #modal-orc.pagina .modal-head { display:none; }
html #modal-orc.pagina .oc-pag .modal-body { padding:0; background:none; overflow:visible; max-height:none; }
html #modal-orc.pagina .oc-painel { display:none; }
#modal-orc.pagina .oc-grade { grid-template-columns:minmax(0, 1fr); }
/* a prévia ao vivo (só com espaço para as duas colunas; senão, o botão "Prévia" embaixo) */
.oe-prev { display:none; }
@media (min-width:1180px) {
  #modal-orc.pagina .oc-grade { grid-template-columns:minmax(0, 1fr) minmax(340px, 420px); }
  #modal-orc.pagina .oe-prev { display:grid; gap:8px; align-content:start; position:sticky; top:calc(var(--topbar-h, 44px) + 12px); max-height:calc(100dvh - var(--topbar-h, 44px) - 110px); overflow-y:auto; scrollbar-width:none; }
  #modal-orc.pagina .oe-prev::-webkit-scrollbar { display:none; }
  #modal-orc.pagina .oe-btn-prev { display:none; }
}
.oe-prev-cab { display:flex; align-items:center; gap:8px; min-height:28px; font-size:calc(12.5px * var(--k-fs)); color:var(--c-text-2); }
.oe-prev-cab > span { display:inline-flex; align-items:center; gap:6px; min-width:0; }
.oe-folha { position:relative; overflow:hidden; border-radius:12px; background:#fff; border:1px solid var(--c-border); }
.oe-folha iframe { display:block; border:0; transform-origin:0 0; background:#fff; }
/* a barra de baixo, presa: o total, o que falta e os botões */
html #modal-orc.pagina .oc-pag .oc-pe { position:sticky; bottom:12px; z-index:4; display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; margin:16px 0 0; padding:12px 16px;
  border:1px solid var(--c-border); border-radius:16px; background:var(--c-surface); box-shadow:0 8px 24px rgba(0,0,0,.18); }
html #modal-orc.pagina .oc-pe .oc-pe-tot { visibility:visible; }
.oe-info { display:grid; gap:2px; min-width:0; font-size:calc(12px * var(--k-fs)); color:var(--c-text-3); }
.oe-info > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.oe-falta { display:inline-flex !important; align-items:center; gap:5px; color:var(--c-warn); }
.oe-falta > svg { flex:none; }
.oe-falta small { color:var(--c-text-3); }
.oe-sair-tx { margin:0; font-size:calc(13.5px * var(--k-fs)); color:var(--c-text-2); }
@media (max-width:720px) {
  html #modal-orc.pagina .oc-pag .oc-pe { bottom:calc(52px + env(safe-area-inset-bottom, 0px)); padding:10px 12px; border-radius:14px; }
  .oe-info { display:none; }
}
/* as ilhas do E1 (OeIlhas) */
.oe-pacotes { grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); margin:0 0 4px; }
.fe2-cli-vazio .nv-btn + .nv-btn { margin-left:-4px; }
.oe-dados { min-width:0; border-top:1px solid var(--c-border); padding-top:10px; }
/* 14/10 (pedido do Renato): os dados do cliente nesta proposta e o endereço do local sempre à vista (eram recolhidos) */
.oe-dados > .oe-dados-tit { margin:0 0 10px; font-size:calc(12.5px * var(--k-fs)); font-weight:600; color:var(--c-text-2); }
.oe-dados > summary { display:inline-flex; align-items:center; gap:6px; min-height:28px; cursor:pointer; list-style:none; font-size:calc(12.5px * var(--k-fs)); font-weight:600; color:var(--c-text-2); }
.oe-dados > summary::-webkit-details-marker { display:none; }
.oe-dados > summary:hover { color:var(--c-text); }
.oe-dados > summary > svg { transition:transform .12s ease; }
.oe-dados[open] > summary > svg { transform:rotate(90deg); }
.oe-dados[open] > summary { margin-bottom:10px; }
/* as partes da entrega 3 (sinal, contrato) só aparecem com o banco novo */
.oe-e3[hidden] { display:none !important; }
.oe-sinal { display:flex; align-items:center; gap:8px; }
.oe-sinal input { flex:1; min-width:0; }
.oe-chave { display:flex; align-items:flex-start; gap:10px; cursor:pointer; font-weight:400; }
.oe-chave input { width:18px; height:18px; margin:2px 0 0; flex:none; accent-color:var(--c-prim); }
.oe-chave span { display:grid; gap:2px; min-width:0; }
.oe-chave b { font-weight:600; color:var(--c-text); }
.oe-chave small { font-size:calc(12px * var(--k-fs)); color:var(--c-text-2); line-height:1.45; }
#oe-contrato .oe-chave + .form-grid { margin-top:var(--esp-3); }
.oe-rap { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.oe-rap button { height:26px; padding:0 10px; border:1px solid var(--c-border-2); border-radius:999px; background:none; color:var(--c-text-2); font:inherit; font-size:calc(12px * var(--k-fs)); cursor:pointer; }
.oe-rap button:hover { background:var(--c-hover); color:var(--c-text); }
.oe-rap button[aria-pressed="true"] { background:var(--c-prim); border-color:transparent; color:var(--c-prim-text); }
.oe-ajuda { display:block; margin-top:4px; font-size:calc(12px * var(--k-fs)); color:var(--c-text-3); }
p.oe-ajuda { margin:0; }
html .oe-aviso:not([hidden]) { display:flex; flex-direction:row; align-items:flex-start; gap:8px; padding:9px 12px; border-radius:10px; font-size:calc(12.8px * var(--k-fs)); color:var(--c-warn);
  background:color-mix(in srgb, var(--c-warn) 12%, transparent); border:1px solid color-mix(in srgb, var(--c-warn) 30%, transparent); }
.oe-aviso > svg { flex:none; margin-top:2px; }
@media (max-width:720px) {
  .oe-pacotes { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .oe-rap button { height:var(--h-cel, 36px); padding:0 12px; }
  .oe-dados > summary { min-height:36px; }
}
/* versões no editor (OcVersao): o aviso azul e o "NOVO" nos itens */
.oe-versao { display:flex; align-items:flex-start; gap:10px; flex-wrap:wrap; margin:0 0 16px; padding:12px 14px; border-radius:14px; color:var(--c-text);
  background:color-mix(in srgb, var(--c-info) 12%, var(--c-surface)); border:1px solid color-mix(in srgb, var(--c-info) 35%, transparent); }
.oe-versao > svg { flex:none; margin-top:2px; color:var(--c-info); }
.oe-versao-tx { flex:1 1 260px; min-width:0; font-size:calc(13.2px * var(--k-fs)); overflow-wrap:anywhere; }
.oe-versao-tx small { display:block; margin-top:3px; font-size:calc(12px * var(--k-fs)); color:var(--c-text-2); }
#forc-itens .item-row.oe-item-novo { position:relative; }
#forc-itens .item-row.oe-item-novo::after { content:"NOVO"; position:absolute; top:-7px; left:10px; padding:0 6px; border-radius:6px; font-size:9.5px; font-weight:700; letter-spacing:.4px; line-height:15px;
  color:var(--c-prim-text); background:var(--c-info); pointer-events:none; }
/* a página do cliente (CP, ClPagina) */
.cp-docs { grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); }
.pg-linha > .pg-av.cl-av { display:grid; place-items:center; font-weight:650; color:#fff; background:hsl(var(--h, 210) 45% 42%); }
.pg-tit .cl-pj { flex:none; }
.cp-evs li { align-items:center; }
.cp-ev { min-width:0; padding:0; border:0; background:none; font:inherit; color:var(--c-text); text-align:left; cursor:pointer; overflow-wrap:anywhere; }
.cp-ev:hover { color:var(--c-accent-text, var(--c-accent)); }
.cp-ev:focus-visible { outline:2px solid var(--c-accent); outline-offset:2px; border-radius:4px; }
.dp-din-l.warn b { color:var(--c-warn); }
@media (max-width:720px) {
  .cp-docs { grid-template-columns:minmax(0, 1fr); }
  .cp-ev { min-height:var(--h-cel, 36px); }
  /* os documentos na página do cliente: o ⋯ e o botão com a medida do celular, como na lista */
  .cp-docs .pc-acao.nv-btn { height:var(--h-cel, 36px); }
  html #pc-pg .cp-docs .pc-doc .ac-menu > summary.orc-menu-sum { width:var(--h-cel, 36px); height:var(--h-cel, 36px); font-size:18px; }
}
/* P3 (revisão do #86): a barra de filtros de Propostas com a altura dos botões (sem o Período e a Situação, nas abas
   Clientes e Catálogo, a busca não desce 1px); no celular a legenda numa linha só (as abas não descem ao trocar) */
#view-orcamentos .nv-ferramentas { min-height:var(--h-btn, 34px); }
@media (max-width:720px) {
  #view-orcamentos .nv-ferramentas { min-height:var(--h-cel, 36px); }
  .orc-sub-cli { display:none; }
  #orc-sub { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  html .cg-comp-x { width:var(--h-cel, 36px); height:var(--h-cel, 36px); }
}
/* o menu ⋯ fechado nas páginas de Propostas não ocupa lugar (no celular o ⋯ desce para o começo da linha e o
   miolo fechado, alinhado pela direita, ficava para fora da tela) */
#pc-pg details.orc-menu:not([open]) > .orc-menu-pop { display:none; }
/* revisão da entrega 2 (11/10): no celular, nas páginas da proposta/contrato (D1) e do cliente (CP), a legenda
   fica logo embaixo do título (antes descia para depois dos botões); com as iniciais, ao lado delas */
@media (max-width:720px) {
  #pc-pg .pg-topo { grid-template-columns:minmax(0, 1fr); }
  #pc-pg .pg-topo > .pg-linha { display:contents; }
  #pc-pg .pg-topo .pg-tit { order:1; }
  #pc-pg .pg-topo > .pg-leg { order:2; margin:-2px 0 0; }
  #pc-pg .pg-topo .pg-acoes { order:3; margin:4px 0 0; }
  #pc-pg .pg-topo:has(.pg-av) { grid-template-columns:auto minmax(0, 1fr); column-gap:12px; }
  #pc-pg .pg-topo:has(.pg-av) > .pg-voltar, #pc-pg .pg-topo:has(.pg-av) .pg-acoes { grid-column:1 / -1; }
  #pc-pg .pg-topo:has(.pg-av) .pg-av { order:1; grid-column:1; grid-row:span 2; align-self:center; }
  #pc-pg .pg-topo:has(.pg-av) .pg-tit, #pc-pg .pg-topo:has(.pg-av) > .pg-leg { grid-column:2; }
}

/* ============================================================
   Recebimentos (Propostas, entrega 4; desenho R aprovado em 09/10): a janela "Recebi um pagamento" (Recebi.abrir),
   o bloco dos detalhes do evento (Recebi.blocoDetalhes) e a lista no Dinheiro da página da proposta (Recebi.listaHtml).
   ============================================================ */
.nv-janela .cd-row b.ok, .dp-din-l.ok b { color:var(--c-ok); }
.nv-janela .cd-row b.warn, .dp-din-l.warn b { color:var(--c-warn); }
.rc-bloco .dp-bar { margin:8px 0 4px; }
.rc-bloco .dp-pe { margin-top:10px; }
.rc-lista { display:grid; gap:6px; margin-top:8px; }
.rc-lin { display:flex; align-items:center; gap:8px; min-width:0; padding:7px 9px; border-radius:var(--r-md); background:var(--c-bg); border:1px solid var(--c-border); }
.rc-lin-txt { display:grid; gap:1px; flex:1 1 auto; min-width:0; }
.rc-lin-txt b { font-size:calc(13px * var(--k-fs)); font-weight:600; color:var(--c-text); }
.rc-lin-txt small { font-size:calc(11.5px * var(--k-fs)); color:var(--c-text-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rc-lin-v { font-size:calc(13px * var(--k-fs)); font-weight:600; color:var(--c-ok); font-variant-numeric:tabular-nums; white-space:nowrap; }
.rc-lin .nv-btn.pequeno { flex:none; }
.rc-lin .rc-apagar { width:28px; padding:0; justify-content:center; }
.rc-tipos.nv-seg { display:flex; flex-wrap:wrap; height:auto; gap:6px; padding:0; background:none; border:0; }
.rc-tipos.nv-seg button { border:1px solid var(--c-border-2); }
.rc-tipos.nv-seg button.on { border-color:transparent; }
.rc-tipos button small { font-weight:400; opacity:.8; margin-left:4px; font-variant-numeric:tabular-nums; }
html .cg-jan .rc-form select { width:100%; min-width:0; height:36px; padding:0 11px; border:1px solid var(--c-border-2); border-radius:var(--r-md);
  background:var(--c-bg); color:var(--c-text); font-family:var(--f-ui); font-size:13.5px; }
html .cg-jan .rc-form input[type="file"] { height:auto; padding:7px 9px; font-size:12.5px; }
.rc-depois { margin:0; font-size:13px; color:var(--c-text-2); font-variant-numeric:tabular-nums; }
.rc-depois b.ok { color:var(--c-ok); }
.rc-depois b.warn, .rc-aviso { color:var(--c-warn); }
.rc-aviso { margin:0; font-size:12.5px; }
.rc-net { margin:0; font-size:12px; }
@media (max-width:720px) {
  html .cg-jan .rc-form select, html .cg-jan .rc-form input:not([type="file"]) { height:var(--h-cel, 36px); font-size:16px; }
  .rc-lin .nv-btn.pequeno { height:var(--h-cel, 36px); }
  .rc-lin .rc-apagar { width:var(--h-cel, 36px); }
}

/* Relatórios avulsos de comissão (12/10): de uma comissão, do mês, de um Pix — PDF e link */
.cx-rel-txt { margin:0 0 14px; font-size:13px; line-height:1.5; color:var(--c-text-2); }
.cx-rel-ops { display:flex; flex-wrap:wrap; gap:8px; }

/* ============================================================
   Aditivo (Propostas, entrega 5b; janela "A" aprovada em 09/10): a janela (Aditivos.abrir), o bloco "Aditivos" da página
   do contrato (Aditivos.blocoHtml) e a nota do formulário do evento com o contrato assinado (FeDoc._trava).
   ============================================================ */
.ad-intro { margin:0; font-size:12.5px; line-height:1.5; }
.ad-campos.nv-seg, .ad-quando.nv-seg { display:flex; flex-wrap:wrap; height:auto; gap:6px; padding:0; background:none; border:0; }
.ad-campos.nv-seg button, .ad-quando.nv-seg button { border:1px solid var(--c-border-2); }
.ad-campos.nv-seg button.on, .ad-quando.nv-seg button.on { border-color:transparent; }
.ad-bloco { display:grid; gap:8px; padding:10px 12px; border:1px solid var(--c-border); border-radius:var(--r-md); background:var(--c-bg); min-width:0; }
.ad-bloco[hidden] { display:none; }
.ad-bloco .cg-campo > span { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; }
.ad-era { font-weight:400; color:var(--c-text-3); font-size:12px; }
.ad-era b { font-weight:600; color:var(--c-text-2); }
.ad-era-l { margin:0; }
.ad-2 { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; min-width:0; }
.ad-dif { margin:0; font-size:13px; color:var(--c-text-2); font-variant-numeric:tabular-nums; }
.ad-dif b.warn { color:var(--c-warn); } .ad-dif b.ok { color:var(--c-ok); }
.ad-hors { display:grid; gap:6px; }
.ad-hor { display:flex; align-items:center; gap:8px; min-width:0; }
html .cg-jan .ad-hor input { width:auto; flex:1 1 0; min-width:0; }
.ad-hor > span { color:var(--c-text-3); font-size:12.5px; }
.ad-hor .nv-btn.pequeno { width:28px; padding:0; justify-content:center; flex:none; }
.ad-hor-mais { justify-self:start; margin-top:4px; }
.ad-ate { max-width:220px; }
.ad-erro { margin:0; font-size:12.5px; color:var(--c-bad); }
.ad-jan .modal-foot { flex-wrap:wrap; }
.ad-lista { display:grid; gap:8px; }
.ad-it { display:grid; gap:4px; padding:10px 12px; border:1px solid var(--c-border); border-radius:var(--r-md); background:var(--c-bg); min-width:0; }
.ad-it.fora { opacity:.7; }
.ad-it-l { display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-width:0; }
.ad-it-l b { font-size:calc(13.5px * var(--k-fs)); color:var(--c-text); }
.ad-it-sub { margin:0; font-size:calc(12.5px * var(--k-fs)); overflow-wrap:anywhere; }
.ad-it .dp-pe { margin-top:4px; }
.ad-vale { margin:0 0 8px; font-size:calc(12.5px * var(--k-fs)); }
/* o formulário do evento com o contrato assinado: os campos do contrato travados + "Fazer um aditivo" */
.fe-aditivo-nota { display:flex; align-items:flex-start; gap:10px; flex-wrap:wrap; margin:0 0 12px; padding:10px 12px; border-radius:var(--r-md);
  background:var(--c-info-soft); border:1px solid color-mix(in srgb, var(--c-info) 30%, transparent); min-width:0; }
.fe-aditivo-nota > span { color:var(--c-info); flex:none; line-height:0; padding-top:2px; }
.fe-aditivo-nota p { flex:1 1 220px; margin:0; font-size:12.5px; line-height:1.5; color:var(--c-text); min-width:0; }
.fe2-hor.fe-trava .fe-hor-rem, .fe2-hor.fe-trava #fe-add-horario { display:none; }
#form-evento input[readonly] { background:var(--c-hover); color:var(--c-text-2); cursor:default; }
@media (max-width:720px) {
  .ad-2 { grid-template-columns:1fr; }
  .ad-hor .nv-btn.pequeno { width:var(--h-cel, 36px); height:var(--h-cel, 36px); }
  .ad-it .nv-btn.pequeno, .fe-aditivo-nota .nv-btn.pequeno { height:var(--h-cel, 36px); }
  html .cg-jan .ad-form input { height:var(--h-cel, 36px); font-size:16px; }
}

/* ===== A janela de um Pix pago (12/10, CxPixJanela em app/comissoes.js): as comissões e os acertos, o total,
   o comprovante ali dentro e os botões do relatório ===== */
#cx-pix-ov .modal-body { display: grid; gap: 14px; }
.cx-pj-sec h4 { margin: 0 0 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c-text-3); }
.cx-pj-lin { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--c-border); }
.cx-pj-sec h4 + .cx-pj-lin { border-top: 0; }
.cx-pj-c { min-width: 0; display: grid; }
.cx-pj-c b { font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.cx-pj-c small { font-size: 12px; color: var(--c-text-3); overflow-wrap: anywhere; }
.cx-pj-lin > b { white-space: nowrap; }
.cx-pj-sinal { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--c-hover); font-weight: 700; color: var(--c-ok); }
.cx-pj-sinal.menos { color: var(--c-bad); background: color-mix(in srgb, var(--c-bad) 12%, transparent); }
.cx-pj-tot { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; padding: 10px 12px; border-radius: 10px; background: var(--c-hover); }
.cx-pj-tv { display: grid; text-align: right; }
.cx-pj-tv small { font-size: 11.5px; color: var(--c-text-3); }
.cx-pj-tv b { font-size: 18px; }
.cx-pj-compv { border: 1px solid var(--c-border); border-radius: 10px; background: var(--c-hover); min-height: 120px; display: grid; place-items: center; gap: 8px; overflow: hidden; padding: 8px; }
.cx-pj-compv img { display: block; max-width: 100%; max-height: 60vh; object-fit: contain; border-radius: 6px; }
.cx-pj-compv iframe { width: 100%; height: 60vh; border: 0; background: #fff; border-radius: 6px; }
.cx-pj-compb { display: flex; justify-content: flex-end; margin-top: 8px; }

/* Editor da proposta (12/10, print do Renato: "a parte de baixo tem que ficar completa, sem cortar, já que ela é fixa"):
   nas molduras Ilhas e Painel, a borda de baixo da ilha (o ::after preso a 10px, com 14px + a sombra de 10px) cobria ~34px
   da barra presa (Total · Salvar) e o fim da prévia. A barra e a prévia ficam acima dela. */
@media (min-width:721px) {
  html:not([data-menu="topo"]):is([data-janela="ilhas"], [data-janela="painel"]) #modal-orc.pagina .oc-pag .oc-pe { bottom:38px; }
}
@media (min-width:1180px) {
  html:not([data-menu="topo"]):is([data-janela="ilhas"], [data-janela="painel"]) #modal-orc.pagina .oe-prev { max-height:calc(100dvh - var(--topbar-h, 44px) - 150px); }
}


/* A ficha do cliente (13/10): os títulos Cliente / Evento na janela da ficha */
/* 14/10 (pedido do Renato: "deixe essa aba mais bonita"): a janela da ficha — o resumo em cima e cada parte num bloco com ícone */
#fi-det-ov .fi-topo { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:8px; margin-bottom:14px; }
#fi-det-ov .fi-num { display:flex; align-items:center; gap:10px; min-width:0; padding:10px 12px; border:1px solid var(--c-border); border-radius:12px; background:var(--c-bg); }
#fi-det-ov .fi-num-ic { flex:none; display:grid; place-items:center; width:32px; height:32px; border-radius:10px; background:color-mix(in srgb, var(--c-accent) 14%, transparent); color:var(--c-accent); }
#fi-det-ov .fi-num div { min-width:0; display:grid; gap:1px; }
#fi-det-ov .fi-num small { font-size:11.5px; color:var(--c-text-3); }
#fi-det-ov .fi-num b { font-size:13.5px; font-weight:600; color:var(--c-text); overflow-wrap:anywhere; }
#fi-det-ov .fi-bloco { padding:14px 16px 16px; border:1px solid var(--c-border); border-radius:14px; background:var(--c-bg); }
#fi-det-ov .fi-bloco + .fi-bloco { margin-top:10px; }
.fi-h { display:flex; align-items:center; gap:9px; margin:0 0 12px; font-size:14px; font-weight:600; color:var(--c-text); }
.fi-ic { display:grid; place-items:center; width:28px; height:28px; border-radius:9px; background:color-mix(in srgb, var(--c-accent) 14%, transparent); color:var(--c-accent); }
.fi-dl { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px 18px; margin:0; }
.fi-dl > div { min-width:0; }
.fi-dl .fi-larga, .fi-mus .fi-larga { grid-column:1 / -1; }
.fi-dl dt { font-size:11.5px; color:var(--c-text-3); margin-bottom:2px; }
.fi-dl dd { margin:0; font-size:13.5px; font-weight:500; color:var(--c-text); overflow-wrap:anywhere; }
.fi-som { display:inline-flex; align-items:center; gap:6px; margin:0 0 10px; padding:5px 12px; border-radius:999px; background:var(--c-surface); border:1px solid var(--c-border); font-size:12.5px; color:var(--c-text-2); }
.fi-som b { color:var(--c-text); font-weight:600; }
.fi-mus { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
.fi-mus-it { min-width:0; padding:10px 12px; border-radius:10px; background:var(--c-surface); border:1px solid var(--c-border); border-left:3px solid var(--c-accent); }
.fi-mus-it.sim { border-left-color:var(--c-ok); }
.fi-mus-it.nao { border-left-color:var(--c-bad); }
.fi-mus-it small { display:block; font-size:11.5px; color:var(--c-text-3); margin-bottom:3px; }
.fi-mus-it p { margin:0; font-size:13.5px; line-height:1.45; color:var(--c-text); overflow-wrap:anywhere; white-space:pre-line; }
@media (max-width:560px) { .fi-dl, .fi-mus { grid-template-columns:1fr; } #fi-det-ov .fi-topo { grid-template-columns:1fr 1fr; } }
/* 14/10 (pedido do Renato): a janela da ficha maior — quase a tela toda, com 3 colunas nos dados quando cabe */
#fi-det-ov .modal { max-height:calc(100dvh - 40px); }
#fi-det-ov .fi-excluir { margin-right:auto; }
/* 14/10: cada ficha da página do cliente com o "Excluir" ao lado */
.cp-ficha-l { display:flex; align-items:center; gap:6px; min-width:0; }
.cp-ficha-l .cp-ficha { flex:1; min-width:0; }
.cp-ficha-x { flex:none; display:grid; place-items:center; width:34px; height:34px; border:1px solid transparent; border-radius:50%; background:transparent; color:var(--c-text-3); cursor:pointer; }
.cp-ficha-x:hover { color:var(--c-bad); border-color:var(--c-bad); background:var(--c-bad-soft); }
@media (min-width:960px) { #fi-det-ov .fi-dl { grid-template-columns:repeat(3, minmax(0, 1fr)); } #fi-det-ov .fi-mus { grid-template-columns:repeat(3, minmax(0, 1fr)); } }

/* "Ver como o cliente vê" (13/10, prints do Renato): janela grande (quase a tela toda), o fundo cinza e o documento como uma
   folha branca com borda, sombra e margem em volta, na escala que cabe na largura — só rola para baixo, nunca para o lado */
#oc-prev-ov.oc-prev-jan .modal { max-width:none; height:calc(100dvh - 40px); max-height:calc(100dvh - 40px); }
#oc-prev-ov.oc-prev-jan .modal-body { flex:1; min-height:0; overflow-x:hidden; overflow-y:auto; padding:28px 24px; background:color-mix(in srgb, var(--c-text) 7%, var(--c-bg)); }
#oc-prev-ov.oc-prev-jan .oc-prev-folha { margin:0 auto; border:1px solid color-mix(in srgb, #000 12%, transparent); border-radius:4px; box-shadow:0 12px 32px rgb(0 0 0 / .28); }
@media (max-width:720px) { #oc-prev-ov.oc-prev-jan .modal { height:calc(100dvh - var(--topo-seguro, 0px) - 32px); max-height:calc(100dvh - var(--topo-seguro, 0px) - 32px); } #oc-prev-ov.oc-prev-jan .modal-body { padding:16px 12px; } }

/* 14/10 (pedido do Renato: "o app todo padronizado"): o "Excluir" é vermelho em TODOS os menus ⋯ e no do botão direito */
html .orc-menu-pop button.danger, html .orc-menu-pop button.danger svg, html .notif-menu-pop button.danger, html .notif-menu-pop button.danger svg { color:var(--c-bad) !important; }
html .orc-menu-pop button.danger:is(:hover, :focus-visible), html .notif-menu-pop button.danger:is(:hover, :focus-visible) { background:var(--c-bad-soft) !important; }
/* 14/10: a capa do pacote com as fotos de todos os equipamentos (um mosaico), não só a do primeiro */
.cg-pac-capa.mosaico { display:grid; gap:2px; background:#fff; }
.cg-pac-capa.mosaico.n2 { grid-template-columns:repeat(2, 1fr); }
.cg-pac-capa.mosaico.n3 { grid-template-columns:repeat(3, 1fr); }
.cg-pac-capa.mosaico.n4 { grid-template-columns:repeat(4, 1fr); }
.cg-pac-capa.mosaico img { position:static; width:100%; height:100%; min-height:0; object-fit:contain; background:#fff; }


/* 14/10 (pedido do Renato): a linha automática "DJ para X Horas de Evento", no fim dos itens, depois dos equipamentos */
.item-dj-linha { margin-top: 8px; }
.item-dj-linha[hidden] { display: none; }
.item-row-dj .field[readonly], .item-row-dj .item-incluso { cursor: default; }
.item-row-dj.vazio .item-descricao { font-style: italic; }
.item-dj-sub { display: block; margin: 4px 2px 0; font-size: 12px; color: var(--c-text-3); }
.item-dj-sub:empty { display: none; }
/* 14/10 (pedido do Renato: "selecionado está feio"): o pacote escolhido com a bolinha ✓, sem a borda dupla */
.fe2-pac { position: relative; padding-right: 34px; }
.fe2-pac::after { content: ''; position: absolute; top: 10px; right: 10px; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--c-border-2); box-sizing: border-box; }
.fe2-pac[aria-pressed="true"] { border-color: var(--c-accent); box-shadow: none; background: color-mix(in srgb, var(--c-accent) 9%, var(--c-bg)); }
.fe2-pac[aria-pressed="true"] b { color: var(--c-accent); }
.fe2-pac[aria-pressed="true"]::after { border-color: var(--c-accent); background: var(--c-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 10px no-repeat; }

/* 14/10 (print do Renato: "esse negócio azul… está selecionando duas?"): o campo com o cursor ganhava a borda azul E um
   contorno por fora (o :focus-visible geral), parecendo duas linhas. Agora é uma linha só, como nos campos das janelas. */
html .nv .field:focus, html .nv .field:focus-visible, html .nv-janela .field:focus, html .nv-janela .field:focus-visible {
  outline:none; border-color:var(--c-accent); box-shadow:0 0 0 1px var(--c-accent); }

/* 14/10 (pedido do Renato: "quando gera um documento fica escuro atrás e parece bugado… quero padronizado"): a espera vira um
   cartão no canto de baixo (onde depois aparece "PDF baixado"), sem escurecer nem embaçar o app; os cliques ficam presos até
   terminar. O documento que o motor do PDF monta (o iframe dele) fica invisível — o motor não muda e o PDF sai igual. */
html .loading-overlay { background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; align-items:flex-end; justify-content:flex-end; padding:0 22px 22px; cursor:default; }   /* 14/10: sem a bolinha girando no mouse (pedido do Renato) */
html .loading-overlay .ld-card { display:flex; align-items:center; gap:12px; min-width:260px; max-width:min(380px, calc(100vw - 32px)); padding:13px 16px; border-radius:14px;
  background:var(--c-surface); border:1px solid var(--c-border-2); box-shadow:0 12px 32px rgba(0,0,0,.28); animation:nvSobe .16s ease-out; }
html .loading-overlay .spinner { flex:none; width:26px; height:26px; border-width:2.5px; border-color:var(--c-border-2); border-top-color:var(--c-accent); }
html .loading-overlay .ld-tx { display:grid; gap:2px; min-width:0; }
html .loading-overlay .ld-tx p { margin:0; font-size:13.5px; font-weight:600; color:var(--c-text); }
html .loading-overlay .ld-tx small { font-size:12px; color:var(--c-text-3); }
html .loading-overlay .ld-tx small:empty { display:none; }
@media (max-width:720px) { html .loading-overlay { align-items:center; padding:0 16px calc(64px + env(safe-area-inset-bottom, 0px)); } }
iframe[data-pdf-iframe] { opacity:0 !important; }

/* 14/10 (pedido do Renato: "sempre começando pelo cadastro"): "Para quem?" da Nova proposta / Novo contrato */
#cm-ov .modal-body { display:grid; gap:12px; padding:16px 18px 18px; }
/* 14/10 (pedidos do Renato: "ao pesquisar ela diminui", "ainda está feio"): uma paleta de busca — a busca no alto (uma borda
   só), "Cliente novo" e os clientes como linhas, numa área de altura FIXA (buscar não muda o tamanho); sem caixas dentro de caixas */
#cm-ov .pq-busca { display:flex; align-items:center; gap:10px; height:46px; padding:0 14px; border:1px solid var(--c-border-2); border-radius:12px; background:var(--c-bg); color:var(--c-text-3); cursor:text; }
#cm-ov .pq-busca:focus-within { border-color:var(--c-accent); }
#cm-ov .pq-busca input { flex:1; min-width:0; height:100%; border:0 !important; outline:0 !important; box-shadow:none !important; background:none !important; padding:0 !important; color:var(--c-text); font-family:var(--f-ui); font-size:calc(14.5px * var(--k-fs)); }
#cm-ov .pq-area { height:min(58vh, 480px); overflow-y:auto; margin:0 -10px; padding:0 10px; overscroll-behavior:contain; }
#cm-ov .pq-h { display:flex; align-items:center; gap:8px; margin:12px 4px 6px; font-size:11px; font-weight:650; letter-spacing:.07em; text-transform:uppercase; color:var(--c-text-3); }
#cm-ov .pq-area > .pq-h:first-child { margin-top:8px; }
#cm-ov .pq-n { display:inline-grid; place-items:center; min-width:20px; height:18px; padding:0 6px; border-radius:999px; background:var(--c-hover); color:var(--c-text-2); font-size:11px; letter-spacing:0; }
#cm-ov .pq-novo, #cm-ov .pq-lista { display:grid; gap:2px; }
#cm-ov .pq-it { display:flex; align-items:center; gap:12px; width:100%; min-height:56px; padding:8px 10px; border:0; border-radius:12px; background:none; color:var(--c-text); font-family:var(--f-ui); text-align:left; cursor:pointer; }
#cm-ov .pq-it:hover, #cm-ov .pq-it:focus-visible { background:var(--c-hover); outline:none; }
#cm-ov .pq-av { width:38px; height:38px; font-size:13px; }
#cm-ov .pq-acao-ic { flex:none; display:grid; place-items:center; width:38px; height:38px; border-radius:12px; background:color-mix(in srgb, var(--c-accent) 16%, transparent); color:var(--c-accent); }
#cm-ov .pq-acao-ic.wa { background:color-mix(in srgb, #25D366 16%, transparent); color:#25D366; }
#cm-ov .pq-it-tx { flex:1; min-width:0; display:grid; gap:2px; }
#cm-ov .pq-it-tx b { font-size:calc(14px * var(--k-fs)); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#cm-ov .pq-it-tx small { font-size:calc(12.5px * var(--k-fs)); color:var(--c-text-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#cm-ov .pq-it-ir { flex:none; color:var(--c-text-3); opacity:0; transition:opacity .1s; }
#cm-ov .pq-it:hover .pq-it-ir, #cm-ov .pq-it:focus-visible .pq-it-ir { opacity:1; }
#cm-ov .pq-vazio { padding:18px 10px; text-align:center; font-size:calc(13px * var(--k-fs)); color:var(--c-text-3); }
#cm-ov .pq-cli { display:flex; align-items:center; gap:12px; padding:10px 12px; border:1px solid var(--c-border); border-radius:12px; background:var(--c-bg); }
#cm-ov .pq-cli .fe2-pessoa-tx { flex:1; min-width:0; }
#cm-ov .pq-h { margin:8px 0 0; font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--c-text-3); }
#cm-ov .pq-ops, .cp-fichas { display:grid; gap:8px; }
#cm-ov .pq-op, .cp-ficha { display:flex; align-items:center; gap:12px; width:100%; padding:11px 12px; border:1px solid var(--c-border); border-radius:12px; background:var(--c-bg);
  color:var(--c-text); font:inherit; text-align:left; cursor:pointer; }
#cm-ov .pq-op:hover, .cp-ficha:hover { border-color:var(--c-accent); }
#cm-ov .pq-op > span:nth-child(2), .cp-ficha > span:nth-child(2) { flex:1; min-width:0; display:grid; gap:2px; }
#cm-ov .pq-op b, .cp-ficha b { font-size:13.5px; font-weight:600; }
#cm-ov .pq-op small, .cp-ficha small { font-size:12px; color:var(--c-text-3); }
.pq-op-ic, .cp-ficha-ic { flex:none; display:grid; place-items:center; width:30px; height:30px; border-radius:9px; background:color-mix(in srgb, var(--c-accent) 14%, transparent); color:var(--c-accent); }
.pq-op-ir, .cp-ficha-ir { flex:none; font-size:12.5px; font-weight:600; color:var(--c-accent); }

/* 14/10 (pedido do Renato): a sua assinatura — Desenho | Aceite eletrônico e o "Li e aceito" (a janela do envio e o Perfil) */
.ass-modo { margin:0 0 12px; }
.ass-modo > button { display:inline-flex; align-items:center; gap:6px; }
.ass-aceite-info { margin:0 0 12px; padding:12px 14px; border-radius:12px; background:var(--c-bg); border:1px solid var(--c-border); font-size:calc(13px * var(--k-fs)); line-height:1.5; color:var(--c-text-2); }
.ass-termo, #modal-sig-dj .sigdj-termo-wrap { display:flex; align-items:flex-start; gap:10px; margin:14px 0 0; padding:12px 14px; border-radius:12px; background:var(--c-bg);
  font-size:calc(13px * var(--k-fs)); line-height:1.45; color:var(--c-text); cursor:pointer; }
.ass-termo input, #modal-sig-dj .sigdj-termo-wrap input { flex:none; width:18px; height:18px; margin:1px 0 0; accent-color:var(--c-prim); }
#ass-dj-ov .cfg-ass { justify-items:stretch; }
#cfg-padroes .cfg-ass-nota { margin:var(--esp-3) 0 0; }

/* 14/10 (pedido do Renato): Ver o comprovante — a janela grande, a foto inteira (ajustada à janela) e o zoom */
/* nas janelas, o que tem "hidden" some de verdade (o .nv-btn tinha display próprio e aparecia) */
.modal-overlay [hidden] { display:none !important; }
#va-ov .modal { width:var(--va-w, min(1240px, calc(100vw - 32px))) !important; max-width:calc(100vw - 32px) !important; max-height:calc(100dvh - 32px); display:flex; flex-direction:column; }
/* 15/10 (pedido do Renato: "mais bonita, mais profissional; a janela do tamanho e do formato da foto; o zoom fluido"):
   o palco escuro do tamanho da foto, a barra do zoom flutuando embaixo dele; a foto amplia e move por transform */
#va-ov .modal-body { flex:1 1 auto; min-height:0; position:relative; display:grid; gap:0; overflow:hidden; padding:14px 16px 16px; }
#va-ov .va-prev { position:relative; justify-self:center; align-self:center; overflow:hidden; border-radius:10px; overscroll-behavior:contain;
  background:transparent; display:grid; place-items:center; touch-action:none; user-select:none; min-height:120px; }
/* o PDF: a folha na largura da janela (o quadro do tamanho exato é só para a foto) */
#va-ov.va-eh-pdf .va-prev { width:100%; height:calc(100dvh - 250px); min-height:240px; background:#fff; border:1px solid var(--c-border); touch-action:auto; }
#va-ov .va-prev.zoom { cursor:grab; }
#va-ov .va-prev.arrastando { cursor:grabbing; }
#va-ov .va-img { position:absolute; left:50%; top:50%; display:block; max-width:none; transform-origin:50% 50%; will-change:transform; cursor:zoom-in;
  user-select:none; -webkit-user-drag:none; -webkit-touch-callout:none; backface-visibility:hidden; }
#va-ov .va-img.suave { transition:transform .2s cubic-bezier(.2, .7, .2, 1); }
#va-ov .va-prev.zoom .va-img { cursor:inherit; }
#va-ov .va-pdf { display:block; width:100%; height:100%; border:0; background:#fff; }
#va-ov .va-carr, #va-ov .va-erro { color:var(--c-text-3); font-size:calc(13px * var(--k-fs)); }
#va-ov .va-vao { flex:1; }
#va-ov .modal-foot { flex-wrap:wrap; }
#va-ov .va-so-ic { width:var(--h-btn, 34px); padding:0 !important; justify-content:center; }
@media (max-width:720px) {
  #va-ov .modal-body { padding:10px 12px 12px; display:flex; flex-direction:column; align-items:center; justify-content:center; }
  #va-ov .va-prev { flex:none; }
  #va-ov.va-eh-pdf .va-prev { flex:1 1 auto; height:auto; }
}

/* 14/10: as opções rápidas dos padrões do contrato (como no contrato) */
.cfg-pad { display:grid; gap:8px; min-width:0; }
.cfg-pad-op { display:flex; flex-wrap:wrap; gap:6px; }
.cfg-pad-op button { height:28px; padding:0 11px; border:1px solid var(--c-border); border-radius:999px; background:var(--c-bg); color:var(--c-text-2);
  font-family:var(--f-ui); font-size:calc(12px * var(--k-fs)); font-weight:500; cursor:pointer; white-space:nowrap; }
.cfg-pad-op button:hover { color:var(--c-text); border-color:var(--c-accent); }

/* 14/10 (pedido do Renato: "a aba de catálogo muito ruim, feia, desorganizada"): cartões com as fotos em cima — os pacotes
   com "O que vem" (miniatura de cada equipamento) e os itens avulsos como uma vitrine */
#sub-catalogo .cg-sec { margin:0 0 28px; }
#sub-catalogo .cg-sec-h { align-items:center; margin:0 2px 12px; }
#sub-catalogo .cg-sec-h h2 { font-size:calc(16px * var(--k-fs)); font-weight:650; letter-spacing:0; text-transform:none; }
#sub-catalogo .cg-n { display:inline-grid; place-items:center; min-width:22px; height:20px; padding:0 7px; border-radius:999px; background:var(--c-hover); color:var(--c-text-2); font-size:11.5px; font-weight:600; }
#sub-catalogo .cg-grade { grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:14px; }
#sub-catalogo .cg-pc { border-radius:18px; transition:border-color .12s, box-shadow .12s; }
#sub-catalogo .cg-pc:hover { border-color:color-mix(in srgb, var(--c-accent) 45%, var(--c-border)); box-shadow:var(--c-sombra); }
.cg-pc-capa { position:relative; height:150px; flex:none; display:grid; place-items:center; background:#fff; overflow:hidden; border-bottom:1px solid var(--c-border); }
.cg-pc-capa img { width:100%; height:100%; min-width:0; min-height:0; object-fit:contain; padding:10px; display:block; }
.cg-pc-capa.mosaico { gap:0; }
.cg-pc-capa.mosaico.n2 { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.cg-pc-capa.mosaico.n3 { grid-template-columns:repeat(3, minmax(0, 1fr)); }
.cg-pc-capa.mosaico.n4 { grid-template-columns:repeat(2, minmax(0, 1fr)); grid-template-rows:repeat(2, minmax(0, 1fr)); }
.cg-pc-capa.mosaico img { padding:8px; }
.cg-pc-capa.sem { background:linear-gradient(135deg, color-mix(in srgb, var(--c-accent) 24%, var(--c-surface)), var(--c-surface)); color:var(--c-accent); }
.cg-pc-corpo { display:flex; flex-direction:column; gap:9px; padding:14px 16px; flex:1; min-width:0; }
.cg-pc-cab { display:flex; align-items:flex-start; gap:8px; min-width:0; }
.cg-pc-cab h3 { flex:1; min-width:0; margin:2px 0 0; font-size:calc(15.5px * var(--k-fs)); font-weight:650; line-height:1.3; color:var(--c-text); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.cg-pc-cab .ac-menu { flex:none; }
.cg-pc-desc { margin:-4px 0 0; font-size:calc(12.5px * var(--k-fs)); line-height:1.45; color:var(--c-text-3); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.cg-pc-rot { margin:2px 0 -2px; font-size:11px; font-weight:650; letter-spacing:.06em; text-transform:uppercase; color:var(--c-text-3); }
.cg-pc-rot span { margin-left:4px; color:var(--c-text-2); }
.cg-pc-vem { display:grid; gap:6px; }
.cg-pc-li { display:flex; align-items:center; gap:9px; min-width:0; font-size:calc(12.5px * var(--k-fs)); color:var(--c-text-2); }
.cg-pc-li > span:last-child { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cg-pc-mini { flex:none; width:26px; height:26px; border-radius:7px; background:#fff; border:1px solid var(--c-border); display:grid; place-items:center; overflow:hidden; color:var(--c-text-3); }
.cg-pc-mini img { width:100%; height:100%; object-fit:contain; padding:2px; }
.cg-pc-mais { padding-left:35px; font-size:12px; font-weight:600; color:var(--c-accent); }
.cg-pc-nada { margin:0; font-size:12.5px; color:var(--c-text-3); }
.cg-pc-pe { margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:6px 10px; flex-wrap:wrap; padding-top:11px; border-top:1px solid var(--c-border); }
.cg-pc-preco { display:flex; align-items:baseline; gap:6px; }
.cg-pc-preco b { font-size:calc(16px * var(--k-fs)); font-weight:700; color:var(--c-text); font-variant-numeric:tabular-nums; }
.cg-pc-preco small, .cg-pc-uso { font-size:12px; color:var(--c-text-3); }
#sub-catalogo .cg-itens { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:12px; }
#sub-catalogo .cg-item.cg-ic { display:flex; flex-direction:column; align-items:stretch; gap:0; padding:0; border:1px solid var(--c-border); border-radius:16px; background:var(--c-surface); overflow:hidden; cursor:pointer;
  transition:border-color .12s, box-shadow .12s; }
#sub-catalogo .cg-item.cg-ic:hover { background:var(--c-surface); border-color:color-mix(in srgb, var(--c-accent) 45%, var(--c-border)); box-shadow:var(--c-sombra); }
.cg-ic-foto { position:relative; height:132px; flex:none; display:grid; place-items:center; background:#fff; border-bottom:1px solid var(--c-border); color:var(--c-text-3); overflow:hidden; }
/* 19/10 (pedido do Renato: "imagens dos itens estão cortadas"): a foto inteira dentro do quadro — o height:100% não valia
   numa linha de grade sem altura, e a foto ficava no tamanho natural (o quadro cortava o resto) */
.cg-ic-foto img { position:absolute; inset:0; width:100%; height:100%; box-sizing:border-box; object-fit:contain; padding:12px; display:block; }
.cg-ic-corpo { display:flex; flex-direction:column; gap:10px; padding:11px 12px 12px; flex:1; min-width:0; }
.cg-ic-cab { display:flex; align-items:flex-start; gap:6px; min-width:0; }
.cg-ic-cab b { flex:1; min-width:0; margin-top:3px; font-size:calc(13.5px * var(--k-fs)); font-weight:600; line-height:1.35; color:var(--c-text); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.cg-ic-cab .ac-menu { flex:none; }
.cg-ic-pe { margin-top:auto; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.cg-ic-cat { display:inline-flex; align-items:center; height:20px; padding:0 8px; border-radius:999px; background:var(--c-hover); font-size:11px; font-weight:600; color:var(--c-text-2); }
.cg-ic-cat.inc { background:color-mix(in srgb, var(--c-ok) 14%, transparent); color:var(--c-ok); }
.cg-ic-preco { margin-left:auto; display:flex; align-items:baseline; gap:2px; }
.cg-ic-preco b { font-size:13.5px; font-weight:700; color:var(--c-text); font-variant-numeric:tabular-nums; }
.cg-ic-preco small { font-size:11.5px; color:var(--c-text-3); }
@media (max-width:720px) {
  #sub-catalogo .cg-grade { grid-template-columns:1fr; }
  #sub-catalogo .cg-itens { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
  .cg-ic-foto { height:110px; }
}
.cg-ic-foto.sem { background:linear-gradient(135deg, color-mix(in srgb, var(--c-accent) 18%, var(--c-surface)), var(--c-surface)); color:var(--c-accent); }

/* 14/10 (escolha do Renato: "faixa fina única"): as abas, a busca, os filtros e o + Novo numa faixa só, presa logo abaixo
   da barra do topo ao rolar (o título sobe; o nome já está no topo). A mesma altura parada e presa: nada pula. */
#view-orcamentos .orc-barra { position:sticky; top:calc(var(--topbar-h) + var(--menu-topo-h, 0px)); z-index:30; display:flex; align-items:center; flex-wrap:wrap; gap:6px 12px;
  margin:0 calc(-1 * var(--pag-d)) var(--esp-4) calc(-1 * var(--pag-e)); padding:6px var(--pag-d) 6px var(--pag-e); background:var(--c-bg); border-bottom:1px solid var(--c-border);
  transition:box-shadow .15s; }
#view-orcamentos .orc-barra.preso { box-shadow:0 10px 16px -14px rgba(0, 0, 0, .6); }
#view-orcamentos .orc-barra > .nv-abas { margin:0; border-bottom:0; flex:none; }
#view-orcamentos .orc-barra > .nv-abas .subtab.active::after { bottom:-7px; }
#view-orcamentos .orc-barra > .nv-ferramentas { margin:0 0 0 auto; flex:0 1 auto; flex-wrap:wrap; justify-content:flex-end; }
#view-orcamentos .orc-barra-novo { flex:none; display:flex; visibility:hidden; }
#view-orcamentos .orc-barra.preso .orc-barra-novo { visibility:visible; }
#view-orcamentos:not([data-sub="orcamentos"]) #orc-barra-menu, #view-orcamentos[data-sub="orcamentos"] #orc-barra-btn { display:none; }
@media (max-width:720px) {
  #view-orcamentos .orc-barra { position:static; margin:0 0 var(--esp-4); padding:0; background:none; border-bottom:0; box-shadow:none; display:block; }
  #view-orcamentos .orc-barra > .nv-abas { border-bottom:1px solid var(--c-border); margin:0 0 var(--esp-4); }
  #view-orcamentos .orc-barra > .nv-abas .subtab.active::after { bottom:-1px; }
  #view-orcamentos .orc-barra > .nv-ferramentas { margin:0 0 12px; justify-content:flex-start; }
  #view-orcamentos .orc-barra-novo { display:none; }
}

/* 14/10 (pedido do Renato: "a página do cliente muito feia, desorganizada, difícil de entender"): refeita */
#pc-pg .cp-topo .pg-linha { align-items:center; }
#pc-pg .cp-av { width:56px; height:56px; font-size:19px; }
#pc-pg .cp-tit { flex:1; min-width:0; display:grid; gap:6px; }
#pc-pg .cp-tit .pg-tit { margin:0; }
#pc-pg .cp-meta { display:flex; flex-wrap:wrap; gap:6px 16px; margin:0; }
#pc-pg .cp-meta-i { display:inline-flex; align-items:center; gap:6px; min-width:0; font-size:calc(13px * var(--k-fs)); color:var(--c-text-2); }
#pc-pg .cp-meta-i .nv-ic, #pc-pg .cp-meta-i svg { flex:none; color:var(--c-text-3); }
#pc-pg .cp-meta-i > span { overflow-wrap:anywhere; }
#pc-pg .cp-nums { grid-template-columns:repeat(4, minmax(0, 1fr)); margin:4px 0 16px; }
#pc-pg .cp-ilha .pg-sec { align-items:center; }
#pc-pg .cp-n { display:inline-grid; place-items:center; min-width:22px; height:20px; margin-left:8px; padding:0 7px; border-radius:999px; background:var(--c-hover); color:var(--c-text-2); font-size:11.5px; font-weight:600; }
#pc-pg .cp-vazio { display:grid; justify-items:center; gap:8px; padding:18px 12px; border:1.5px dashed var(--c-border-2); border-radius:14px; text-align:center; color:var(--c-text-3); }
#pc-pg .cp-vazio p { margin:0; font-size:calc(13px * var(--k-fs)); color:var(--c-text-2); }
#pc-pg .cp-evs { display:grid; gap:0; border:1px solid var(--c-border); border-radius:14px; overflow:hidden; background:var(--c-bg); }
#pc-pg .cp-ev { display:flex; align-items:center; gap:12px; width:100%; min-height:62px; padding:9px 14px; border:0; border-bottom:1px solid var(--c-border); border-radius:0; background:none; color:var(--c-text); text-align:left; cursor:pointer; overflow-wrap:normal; }
#pc-pg .cp-ev:last-child { border-bottom:0; }
#pc-pg .cp-ev:hover { background:var(--c-hover); color:var(--c-text); }
#pc-pg .cp-ev .nv-data { flex:none; }
#pc-pg .cp-ev-tx { flex:1; min-width:0; display:grid; gap:2px; }
#pc-pg .cp-ev-tx b { font-size:calc(13.5px * var(--k-fs)); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#pc-pg .cp-ev-tx small { font-size:calc(12px * var(--k-fs)); color:var(--c-text-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#pc-pg .cp-ev-v { flex:none; display:grid; justify-items:end; gap:4px; }
#pc-pg .cp-ev-v b { font-size:calc(13.5px * var(--k-fs)); font-weight:650; font-variant-numeric:tabular-nums; }
#pc-pg .cp-dados { display:grid; gap:12px; margin:0; }
#pc-pg .cp-dados > div { display:grid; gap:3px; min-width:0; }
#pc-pg .cp-dados dt { display:flex; align-items:center; gap:6px; font-size:calc(11.5px * var(--k-fs)); color:var(--c-text-3); }
#pc-pg .cp-dados dd { margin:0 0 0 20px; font-size:calc(13.5px * var(--k-fs)); font-weight:500; color:var(--c-text); overflow-wrap:anywhere; line-height:1.4; }
#pc-pg .cp-ficha-nova { width:100%; justify-content:center; margin-top:10px; }
#pc-pg .cp-sem-ficha { margin:0; }
@media (max-width:900px) { #pc-pg .cp-nums { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:560px) { #pc-pg .cp-av { width:44px; height:44px; font-size:15px; } #pc-pg .cp-ev { gap:10px; padding:9px 10px; } }
/* 14/10 (pedido do Renato): no computador o + Novo fica SÓ na faixa, ao lado de Situação (preso junto ao rolar); a busca um pouco mais estreita */
@media (min-width:721px) {
  #view-orcamentos > .nv-cabeca > .nv-cabeca-acoes { display:none; }
  #view-orcamentos .orc-barra-novo { visibility:visible; }
  #view-orcamentos .orc-barra > .nv-ferramentas .nv-busca-local { width:300px; flex:0 1 300px; }   /* a busca inteira (o texto não corta) */
}
/* 14/10 (pedido do Renato: "o Apenas DJ cru, simples demais"): a capa sem foto com o fone de DJ dourado num fundo marinho */
.cg-pc-capa.sem { background:radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, #E4B460 22%, #1B2540), #121826 70%); }
.cg-pc-dj { display:grid; justify-items:center; gap:8px; }
.cg-pc-dj svg { filter:drop-shadow(0 6px 18px rgba(228, 180, 96, .35)); }
.cg-pc-dj small { font-size:11.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#E4B460; }
.cg-pc-mini.dj { background:#121826; border-color:color-mix(in srgb, #E4B460 40%, transparent); }
/* 14/10 (pedido do Renato): o cadastro do cliente com os campos da ficha — RG (pessoa física), quem assina (empresa), o endereço em partes */
.cg-jan[data-tipo="PJ"] .cl-so-pf { display:none; }
.cl-sub { margin:6px 0 -4px; font-size:12px; font-weight:650; letter-spacing:.05em; text-transform:uppercase; color:var(--c-text-3); }
.cl-end3 { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, .7fr) minmax(0, 1fr); gap:12px 14px; }
@media (max-width:560px) { .cl-end3 { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); } .cl-end3 > :first-child { grid-column:1 / -1; } }

/* ---------- 15/10 (pedido do Renato): O CONTRATO EM PÁGINA (CtEditor), como a proposta: a janela #modal-ctr vira o miolo
   da página; o painel da direita (as partes, o que falta, o valor) fica preso ao lado; a barra de baixo presa ---------- */
html #pc-pg > #modal-ctr.pagina { display:block; position:static; inset:auto; z-index:auto; padding:0; background:none; backdrop-filter:none; animation:none; overflow:visible; }
html #modal-ctr.pagina > .modal { position:static; width:auto; max-width:none; height:auto; max-height:none; margin:0; overflow:visible; display:block; background:none; border:0; border-radius:0; box-shadow:none; animation:none; transform:none; }
html #modal-ctr.pagina .modal-head { display:none; }
html #modal-ctr.pagina .oc-pag .modal-body { padding:0; background:none; overflow:visible; max-height:none; }
@media (min-width:900px) {
  html #modal-ctr.pagina .oc-grade { grid-template-columns:minmax(0, 1fr) 300px; }
  html #modal-ctr.pagina .oc-painel { position:sticky; top:calc(var(--topbar-h, 44px) + 12px); max-height:calc(100dvh - var(--topbar-h, 44px) - 120px); }
}
@media (max-width:899px) {
  html #modal-ctr.pagina .oc-painel { top:var(--topbar-h, 48px); margin:0 0 4px; padding:8px 0; }
}
html #modal-ctr.pagina .oc-pag .oc-pe { position:sticky; bottom:12px; z-index:4; display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; margin:16px 0 0; padding:12px 16px;
  border:1px solid var(--c-border); border-radius:16px; background:var(--c-surface); box-shadow:0 8px 24px rgba(0,0,0,.18); }
html #modal-ctr.pagina .oc-pe .oc-pe-tot { visibility:visible; margin-right:auto; }
@media (max-width:720px) {
  html #modal-ctr.pagina .oc-pag .oc-pe { bottom:calc(52px + env(safe-area-inset-bottom, 0px)); padding:10px 12px; border-radius:14px; }
}
@media (min-width:721px) {
  html:not([data-menu="topo"]):is([data-janela="ilhas"], [data-janela="painel"]) #modal-ctr.pagina .oc-pag .oc-pe { bottom:38px; }
}
/* 15/10 (pedido do Renato): "Links e arquivos do cliente" — cada um com o nome (a ficha, a proposta, o contrato, os aditivos,
   a cobrança) e as ações dele, um embaixo do outro */
.dp-arqs { display:grid; gap:8px; min-width:0; }
.dp-arq { display:grid; grid-template-columns:32px minmax(0, 1fr); align-items:center; gap:4px 10px; padding:10px; border:1px solid var(--c-border); border-radius:12px; background:var(--c-bg); min-width:0; }
.dp-arq-ic { display:grid; place-items:center; width:32px; height:32px; border-radius:9px; background:var(--c-surface-2, var(--c-surface)); color:var(--c-text-2); grid-row:span 2; align-self:start; }
.dp-arq-tx { display:grid; gap:1px; min-width:0; }
.dp-arq-tx b { font-size:calc(13px * var(--k-fs)); font-weight:600; color:var(--c-text); }
.dp-arq-tx small { font-size:calc(11.5px * var(--k-fs)); color:var(--c-text-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* 15/10 (pedido do Renato: "colocar todos em apenas uma linha, sem ficar um em cima do outro"): os botões (Abrir · Copiar ·
   WhatsApp) numa linha só, na largura toda do cartão; se não couberem, encolhem (o nome termina em "…"), nunca descem */
.dp-arq-bt { display:flex; flex-wrap:nowrap; gap:6px; grid-column:1 / -1; min-width:0; }
.dp-arq-bt > .nv-btn { flex:0 1 auto; min-width:0; }
.dp-arq-bt > .nv-btn > span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dp-arq-bt:empty { display:none; }

/* 15/10 (pedido do Renato: "no celular, quando abrimos as janelas o tamanho fica bem reduzido; abre sempre uma janela inteira"):
   no celular toda janela ocupa a tela inteira — o topo desce para fora do relógio e os botões ficam embaixo, acima da faixa do
   iPhone. (O :not(#…) só dá força à regra: as janelas com id próprio tinham largura e altura com !important.) */
@media (max-width:720px) {
  html .modal-overlay:not(.pagina) { padding:0 !important; align-items:stretch !important; justify-content:stretch !important; }
  html .modal-overlay:not(.pagina) > .modal:not(#_cel1):not(#_cel2) { width:100vw !important; max-width:100vw !important; height:100dvh !important;
    max-height:100dvh !important; margin:0 !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; }
  html .modal-overlay:not(.pagina) > .modal > :is(.modal-head, .cd-head):first-child { padding-top:calc(var(--topo-seguro, 0px) + 12px); }
  html .modal-overlay:not(.pagina) > .modal > :is(.modal-foot, .cd-foot):last-child { padding-bottom:calc(10px + env(safe-area-inset-bottom, 0px)); }
}

/* ---- A janela de confirmação (confirmar(), #modal-confirm) — 15/10, pedido do Renato: "muito feia, botões feios,
   desorganizados": o desenho das outras janelas (ícone + título em cima, à esquerda), o texto e os botões numa linha só ---- */
#modal-confirm .modal.confirm { width:min(480px, calc(100vw - 32px)); max-width:none; }
#modal-confirm .confirm-icon { --pc:var(--c-bad); }
#modal-confirm .confirm-icon.warn { --pc:var(--c-warn); }
#modal-confirm .confirm-icon.info { --pc:var(--c-info); }
#modal-confirm .modal-head h3 { margin:0; font-size:calc(16px * var(--k-fs)); font-weight:600; color:var(--c-text); overflow-wrap:anywhere; }
#modal-confirm .confirm-txt { margin:0; font-size:calc(13.5px * var(--k-fs)); line-height:1.55; color:var(--c-text-2); text-align:left; }
#modal-confirm .confirm-txt b { color:var(--c-text); font-weight:600; }
#modal-confirm .confirm-pe { display:flex; flex-wrap:nowrap; justify-content:flex-end; align-items:center; gap:8px; }
#modal-confirm .confirm-pe > .nv-btn { min-width:0; }
.nv-btn.perigo-cheio { background:var(--c-bad); color:var(--c-bg); border-color:transparent; }
.nv-btn.perigo-cheio:hover { filter:brightness(1.08); }
@media (max-width:720px) {
  /* no celular: a principal em cima, na largura toda; Cancelar e a outra opção embaixo, lado a lado */
  #modal-confirm .confirm-pe { flex-wrap:wrap; }
  #modal-confirm .confirm-pe > .nv-btn { flex:1 1 0; }
  #modal-confirm .confirm-pe > #btn-confirm-ok { flex-basis:100%; order:-1; }
}

/* ===== Pacote e itens do editor da proposta — desenho "A · Lista limpa" (16/10, escolhido pelo Renato entre 3 fotos) =====
   Cada coisa numa linha, alinhada em colunas, nada por cima de nada:
   · o pacote é um cartão: a cabeça (o ícone ou a foto, o nome, "4 equipamentos + o DJ", o "Preço do pacote" e o ⋯), depois
     "O QUE VEM NO PACOTE" com uma linha por equipamento (a foto, o nome, − 1 + e a lixeira) e, no fim, o DJ (Incluso | Cobrar);
   · "ITENS AVULSOS" num cartão embaixo: a foto, o nome, − 1 +, o valor, Incluso | Cobrar e a lixeira.
   O ✕ de tirar a foto fica DENTRO da foto (só ao passar o mouse; no celular, sempre). */
.oe-itens-leg { margin:2px 0 8px; font-size:calc(12.5px * var(--k-fs)); font-weight:600; color:var(--c-text-2); }
#oe-pacotes + .oe-itens-leg { margin-top:16px; }
/* os pacotes do Catálogo (para escolher) */
#oe-pacotes.oe-pacotes { grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:8px; }
#oe-pacotes .oe-pac { display:grid; grid-template-columns:44px minmax(0, 1fr); align-items:center; gap:10px; padding:9px 34px 9px 9px; }
#oe-pacotes .oe-pac-foto { width:44px; height:44px; border-radius:9px; overflow:hidden; display:grid; place-items:center; background:var(--c-surface); color:var(--c-logo, var(--c-accent)); border:1px solid var(--c-border); }
#oe-pacotes .oe-pac-foto img { width:100%; height:100%; object-fit:cover; display:block; }
#oe-pacotes .oe-pac-tx { display:grid; gap:1px; min-width:0; }
#oe-pacotes .oe-pac-tx b { font-size:calc(13.5px * var(--k-fs)); }
#oe-pacotes .oe-pac-tx small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#oe-pacotes .oe-pac-n { font-size:calc(11.5px * var(--k-fs)); }
/* a lista */
#modal-orc .itens-table.oe-itens { display:block; background:none; border:0; padding:0; }
#modal-orc #forc-itens:empty::before { content:'Nenhum item ainda: escolha um pacote acima ou adicione um item.'; display:block; padding:16px; border:1.5px dashed var(--c-border-2);
  border-radius:14px; color:var(--c-text-3); font-size:calc(13px * var(--k-fs)); text-align:center; }
#modal-orc .item-row, #modal-orc .item-dj { position:relative; display:grid; gap:14px; align-items:center; min-width:0; }
#modal-orc .item-row { margin:0; padding:10px 16px 10px 18px; border:1px solid var(--c-border); background:var(--c-raised); border-radius:14px; }
#modal-orc .item-row [hidden], #modal-orc .item-dj [hidden], #modal-orc .item-row .item-foto { display:none !important; }
#modal-orc :is(.item-row, .item-dj) .item-foto-box { grid-area:t; } #modal-orc :is(.item-row, .item-dj) .item-nome { grid-area:n; }
#modal-orc .item-row .item-campo-qtd { grid-area:q; } #modal-orc :is(.item-row, .item-dj) .item-preco-box { grid-area:p; }
#modal-orc :is(.item-row, .item-dj) .item-seg { grid-area:s; } #modal-orc .item-row .item-remove { grid-area:x; } #modal-orc .item-row .item-menu { grid-area:m; }
/* a foto (tocar troca; o ✕ pequeno fica dentro dela) */
#modal-orc .item-foto-box { position:relative; width:44px; height:44px; }
#modal-orc .item-thumb { width:44px; height:44px; border-radius:10px; overflow:hidden; display:grid; place-items:center; cursor:pointer;
  border:1.5px dashed var(--c-border-2); color:var(--c-text-3); background:transparent; }
#modal-orc .item-thumb:hover { border-color:var(--c-accent); color:var(--c-accent); }
#modal-orc .item-thumb.com { border:0; background:#fff; }
#modal-orc .item-thumb img { width:100%; height:100%; object-fit:contain; padding:3px; box-sizing:border-box; display:block; }
/* 16/10 (pedido do Renato: "na borda mesmo, onde geralmente fica em outros apps"): o ✕ sentado no canto de cima à direita da foto */
#modal-orc .item-foto-tirar { position:absolute; right:-7px; top:-7px; z-index:2; width:20px; height:20px; padding:0; border:2px solid var(--c-raised); border-radius:50%;
  display:grid; place-items:center; background:var(--c-text-2); color:var(--c-bg); cursor:pointer; box-sizing:border-box; }
#modal-orc .item-foto-tirar svg { width:8px; height:8px; }
#modal-orc .item-foto-tirar:hover { background:var(--c-bad); color:#fff; }
@media (hover:hover) { #modal-orc .item-foto-tirar { opacity:0; transition:opacity .12s; } #modal-orc .item-foto-box:hover .item-foto-tirar { opacity:1; } }
/* o nome: sem caixa até passar o mouse */
#modal-orc .item-nome { display:grid; gap:2px; min-width:0; }
#modal-orc .item-nome .item-descricao { width:100%; min-width:0; padding:6px 8px; margin-left:-8px; border:1px solid transparent; background:transparent; border-radius:8px;
  font-size:calc(14.5px * var(--k-fs)); font-weight:500; color:var(--c-text); }
#modal-orc .item-row .item-nome .item-descricao:hover { border-color:var(--c-border); }
#modal-orc .item-row .item-nome .item-descricao:focus { border-color:var(--c-accent); background:var(--c-bg); }
#modal-orc .item-kit-sub { font-size:calc(12.5px * var(--k-fs)); color:var(--c-text-3); }
#modal-orc .item-kit-sub:empty { display:none; }
/* a quantidade: − 1 + numa pílula */
#modal-orc .item-campo { display:flex; align-items:center; min-width:0; }
#modal-orc .item-campo .field { flex:1; min-width:0; width:100%; height:100%; padding:0; border:0 !important; background:transparent !important; box-shadow:none !important;
  font-size:calc(14px * var(--k-fs)); font-variant-numeric:tabular-nums; color:var(--c-text); }
#modal-orc .item-campo-qtd { justify-content:space-between; width:112px; height:36px; padding:0 4px; border:1px solid var(--c-border-2); border-radius:999px; background:var(--c-bg); }
#modal-orc .item-campo-qtd:focus-within { border-color:var(--c-accent); }
#modal-orc .item-campo-qtd .field { text-align:center; font-weight:600; -moz-appearance:textfield; appearance:textfield; }
#modal-orc .item-campo-qtd .field::-webkit-inner-spin-button, #modal-orc .item-campo-qtd .field::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
#modal-orc .item-qtd-btn { flex:none; width:28px; height:28px; padding:0; border-radius:50%; border:0; background:transparent; color:var(--c-text-2); display:grid; place-items:center; cursor:pointer; }
#modal-orc .item-qtd-btn:hover { background:var(--c-hover); color:var(--c-accent); }
/* o valor */
#modal-orc .item-preco-box { display:grid; gap:4px; min-width:0; }
#modal-orc .item-campo-rot { display:none; font-size:calc(11.5px * var(--k-fs)); font-weight:600; color:var(--c-text-3); }
#modal-orc .item-campo-preco { height:36px; padding:0 12px; border:1px solid var(--c-border-2); border-radius:10px; background:var(--c-bg); cursor:text; }
#modal-orc .item-campo-preco:focus-within { border-color:var(--c-accent); }
#modal-orc .item-campo-preco .field { text-align:right; font-weight:600; }
#modal-orc .item-sem-custo .item-preco-box { visibility:hidden; }
/* Incluso | Cobrar */
#modal-orc .item-seg { display:inline-flex; padding:3px; border-radius:999px; border:1px solid var(--c-border-2); background:var(--c-bg); justify-self:end; }
#modal-orc .item-seg button { height:28px; padding:0 12px; border:0; border-radius:999px; background:transparent; color:var(--c-text-2); font:600 calc(12.5px * var(--k-fs)) var(--f-ui); cursor:pointer; white-space:nowrap; }
#modal-orc .item-seg button:hover:not(.on) { color:var(--c-text); }
#modal-orc .item-seg button.on { background:var(--c-prim); color:var(--c-prim-text); }
/* a lixeira e o ⋯ */
#modal-orc .item-row .item-remove { width:32px; height:32px; border-radius:50%; border:0; background:transparent; color:var(--c-text-3); display:grid; place-items:center; cursor:pointer; }
#modal-orc .item-row .item-remove:hover { color:var(--c-bad); background:var(--c-bad-soft); }
#modal-orc .item-row .item-menu { justify-self:center; }
#modal-orc .item-row .item-menu > summary { width:32px; height:32px; border-radius:50%; display:grid; place-items:center; color:var(--c-text-2); cursor:pointer; list-style:none; font-size:18px; line-height:1; }
#modal-orc .item-row .item-menu > summary::-webkit-details-marker { display:none; }
#modal-orc .item-row .item-menu > summary:hover { background:var(--c-hover); color:var(--c-text); }
/* ---- o item avulso ---- */
#modal-orc .item-row.item-row-av { grid-template-columns:44px minmax(0, 1fr) 112px 128px auto 32px; grid-template-areas:"t n q p s x"; }
#modal-orc .item-row-av .item-menu, #modal-orc .item-row-sub .item-menu { display:none; }
/* os avulsos juntos num cartão, com "ITENS AVULSOS" em cima do primeiro */
#modal-orc .item-row-av:not(.item-row-av ~ .item-row-av) { margin-top:34px; }
#modal-orc #forc-itens > .item-row-av:first-child { margin-top:26px; }
#modal-orc .item-row-av:not(.item-row-av ~ .item-row-av)::before { content:'Itens avulsos'; position:absolute; left:2px; top:-24px; font-size:calc(11.5px * var(--k-fs));
  font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--c-text-3); pointer-events:none; }
#modal-orc .item-row-av + .item-row-av { margin-top:0; border-top-color:color-mix(in srgb, var(--c-border) 70%, transparent); border-top-left-radius:0; border-top-right-radius:0; }
#modal-orc .item-row-av:has(+ .item-row-av) { border-bottom:0; border-bottom-left-radius:0; border-bottom-right-radius:0; }
/* ---- o pacote: a cabeça ---- */
#modal-orc .item-row.item-row-kit { grid-template-columns:44px minmax(0, 1fr) 180px 32px; grid-template-areas:"t n p m"; padding:16px 16px 16px 18px; margin-top:12px; }
#modal-orc #forc-itens > .item-row-kit:first-child { margin-top:0; }
#modal-orc .item-row-kit .item-thumb:not(.com) { border:0; background:var(--c-accent-soft); color:var(--c-accent); cursor:default; }
#modal-orc .item-row-kit .item-nome .item-descricao { font-size:calc(17px * var(--k-fs)); font-weight:600; }
#modal-orc .item-row-kit .item-campo-rot { display:block; }
#modal-orc .item-row-kit .item-campo-preco { height:40px; }
#modal-orc .item-row-kit .item-campo-preco .field { font-size:calc(15px * var(--k-fs)); }
#modal-orc .item-row-kit .item-campo-qtd, #modal-orc .item-row-kit .item-seg, #modal-orc .item-row-kit .item-remove { display:none; }
#modal-orc .item-row-kit.item-sem-custo .item-preco-box { visibility:visible; }
#modal-orc .item-row-kit:has(+ :is(.item-row-sub, .item-dj-linha.no-pacote)) { border-bottom-left-radius:0; border-bottom-right-radius:0; }
/* ---- o que vem no pacote ---- */
#modal-orc .item-row.item-row-sub { grid-template-columns:44px minmax(0, 1fr) 112px 32px; grid-template-areas:"t n q x"; border-radius:0;
  border-top-color:color-mix(in srgb, var(--c-border) 70%, transparent); border-bottom:0; }
#modal-orc .item-row.item-row-kit + .item-row-sub { border-top-color:var(--c-border); padding-top:40px; }
#modal-orc .item-row.item-row-kit + .item-row-sub::before { content:'O que vem no pacote'; position:absolute; left:18px; top:14px; font-size:calc(11.5px * var(--k-fs));
  font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--c-text-3); pointer-events:none; }
#modal-orc .item-row.item-row-sub:not(:has(+ :is(.item-row-sub, .item-dj-linha.no-pacote))) { border-bottom:1px solid var(--c-border); border-radius:0 0 14px 14px; }
#modal-orc .item-row-sub .item-preco-box, #modal-orc .item-row-sub .item-seg { display:none; }
/* ---- o DJ: no fim do pacote ou, sem pacote, sozinho embaixo ---- */
#modal-orc .item-dj-linha[hidden] { display:none; }
#modal-orc .item-dj-linha { margin-top:12px; padding:10px 16px 10px 18px; border:1px solid var(--c-border); border-radius:14px; background:var(--c-raised); }
#modal-orc .item-dj-linha.no-pacote { margin-top:0; border-top-color:var(--c-border); border-radius:0 0 14px 14px;
  background:color-mix(in srgb, var(--c-logo, #E4B460) 5%, var(--c-raised)); }
#modal-orc .item-dj { grid-template-columns:44px minmax(0, 1fr) 128px auto 32px; grid-template-areas:"t n p s ."; }
#modal-orc .item-dj .item-thumb.dj { border:0; background:color-mix(in srgb, var(--c-logo, #E4B460) 14%, transparent); color:var(--c-logo, #E4B460); cursor:default; }
#modal-orc .item-dj .item-nome .item-descricao { border-color:transparent !important; background:transparent !important; cursor:default; }
#modal-orc .item-dj.vazio .item-descricao { font-style:italic; }
#modal-orc .item-dj-sub { display:block; margin:6px 0 0; font-size:calc(12px * var(--k-fs)); color:var(--c-text-3); }
#modal-orc .item-dj-sub:empty { display:none; }
/* os botões e as fotos extras */
#modal-orc .orc-add-btns { margin-top:16px; }
#modal-orc .upload-dropzone { display:flex; align-items:center; justify-content:center; gap:8px; padding:14px; border:1.5px dashed var(--c-border-2); border-radius:12px;
  color:var(--c-text-2); font-size:calc(13px * var(--k-fs)); cursor:pointer; text-align:center; }
#modal-orc .upload-dropzone:hover { border-color:var(--c-accent); color:var(--c-accent); }
/* no celular: igual, só empilhado (o que não cabe desce para a linha de baixo) */
@media (max-width:720px) {
  #modal-orc .item-row, #modal-orc .item-dj { gap:10px 12px; }
  #modal-orc .item-row { padding:10px 12px; }
  #modal-orc .item-row.item-row-av { grid-template-columns:44px minmax(0, 1fr) auto 32px; grid-template-areas:"t n n x" "q q s s" "p p p p"; }
  #modal-orc .item-row-av .item-campo-qtd { justify-self:start; }
  #modal-orc .item-row-av.item-sem-custo .item-preco-box { display:none; }
  #modal-orc .item-row.item-row-kit { grid-template-columns:44px minmax(0, 1fr) 32px; grid-template-areas:"t n m" "p p p"; padding:14px 12px; }
  #modal-orc .item-row.item-row-sub { grid-template-columns:44px minmax(0, 1fr) 32px; grid-template-areas:"t n x" "t q ."; }
  #modal-orc .item-row.item-row-kit + .item-row-sub { padding-top:38px; }
  #modal-orc .item-row.item-row-kit + .item-row-sub::before { left:12px; }
  #modal-orc .item-row-sub .item-campo-qtd { justify-self:start; }
  #modal-orc .item-dj-linha { padding:10px 12px; }
  #modal-orc .item-dj { grid-template-columns:44px minmax(0, 1fr) auto; grid-template-areas:"t n n" "p p s"; }
  #modal-orc .item-dj.item-sem-custo { grid-template-areas:"t n n" ". . s"; }
  #modal-orc .item-dj.item-sem-custo .item-preco-box { display:none; }
  #oe-pacotes.oe-pacotes { grid-template-columns:minmax(0, 1fr); }   /* um por linha: o nome e o preço inteiros */
}

/* ===== O que o cliente respondeu na ficha (página da proposta) — 16/10, pedido do Renato: "muito bagunçada, feia, não dá para
   entender" — em partes: O QUE PEDIU (o jeito e uma linha por equipamento, com a foto e a quantidade), CONVIDADOS num destaque
   e MÚSICA E MOMENTOS em cartõezinhos ===== */
.dp-fi { display:grid; gap:18px; min-width:0; }
.dp-fi-sec { display:grid; gap:8px; min-width:0; }
.dp-fi-t { font-size:calc(11.5px * var(--k-fs)); font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--c-text-3); }
.dp-fi-ped { border:1px solid var(--c-border); border-radius:12px; background:var(--c-bg); overflow:hidden; min-width:0; }
.dp-fi-cab { display:flex; align-items:center; gap:8px; padding:10px 14px; font-size:calc(13.5px * var(--k-fs)); font-weight:600; color:var(--c-text);
  background:color-mix(in srgb, var(--c-accent) 6%, var(--c-bg)); }
.dp-fi-cab .nv-ic { color:var(--c-accent); }
.dp-fi-lista { display:grid; border-top:1px solid var(--c-border); }
.dp-fi-lin { display:grid; grid-template-columns:36px minmax(0, 1fr) auto; gap:12px; align-items:center; padding:8px 14px; min-width:0; }
.dp-fi-lin + .dp-fi-lin { border-top:1px solid color-mix(in srgb, var(--c-border) 70%, transparent); }
.dp-fi-ft { width:36px; height:36px; border-radius:8px; background:#fff; overflow:hidden; display:grid; place-items:center; }
.dp-fi-ft img { width:100%; height:100%; object-fit:contain; padding:2px; box-sizing:border-box; display:block; }
.dp-fi-ft.sem { background:var(--c-surface); border:1px solid var(--c-border); color:var(--c-text-3); }
.dp-fi-lin b { min-width:0; font-size:calc(14px * var(--k-fs)); font-weight:500; color:var(--c-text); overflow-wrap:anywhere; }
.dp-fi-q { padding:3px 10px; border-radius:999px; border:1px solid var(--c-border); background:var(--c-surface); font-size:calc(12.5px * var(--k-fs)); font-weight:600;
  color:var(--c-text-2); font-variant-numeric:tabular-nums; }
.dp-fi-outro { margin:0; padding:10px 14px; border-top:1px solid var(--c-border); font-size:calc(13.5px * var(--k-fs)); line-height:1.45; color:var(--c-text); overflow-wrap:anywhere; }
.dp-fi-outro small { display:block; margin-bottom:2px; font-size:calc(11.5px * var(--k-fs)); color:var(--c-text-3); }
.dp-fi-conv { justify-self:start; display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:999px; border:1px solid var(--c-border);
  background:var(--c-bg); font-size:calc(13.5px * var(--k-fs)); color:var(--c-text-2); }
.dp-fi-conv b { font-size:calc(15px * var(--k-fs)); font-weight:600; color:var(--c-text); }
.dp-fi-conv .nv-ic { color:var(--c-accent); }
.dp-fi .fi-som { justify-self:start; margin:0 0 8px; }

/* ============================================================
   19/10 (pedidos do Renato)
   - a caixinha de marcar dentro de um formulário ("Incluir testemunhas no contrato") pegava o desenho de campo de texto
     (36px de altura, borda e o contorno azul ao tocar): agora é só a caixinha, na cor dos botões;
   - "Abrir no mapa" (branco, o logo do Google Maps) e "Abrir no Waze" (o azul do Waze), lado a lado
   ============================================================ */
.form-field input:is([type=checkbox], [type=radio]), .nv-janela .form-field input:is([type=checkbox], [type=radio]) {
  width:18px; height:18px; min-height:0; padding:0; margin:2px 0 0; flex:none; border:0; border-radius:4px; background:none; box-shadow:none;
  accent-color:var(--c-prim); cursor:pointer; }
.form-field input:is([type=checkbox], [type=radio]):is(:hover, :focus), .nv-janela .form-field input:is([type=checkbox], [type=radio]):is(:hover, :focus) {
  outline:none; border:0; box-shadow:none; }
.form-field input:is([type=checkbox], [type=radio]):focus-visible, .nv-janela .form-field input:is([type=checkbox], [type=radio]):focus-visible {
  outline:2px solid var(--c-accent); outline-offset:2px; }

.mapa-bts { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.mapa-bts.det-mapa { justify-content:flex-end; padding-top:8px; }
.mapa-bts.dp-mapa { margin-top:12px; }
.mapa-bts.fi-mapa { margin-top:12px; }
:is(#modal-orc, #modal-ctr) .form-field.mapa-bts { display:flex; flex-direction:row; flex-wrap:wrap; gap:8px; }
html :is(.nv-btn, .btn):has(svg[data-ic="waze"]) { background:#33CCFF !important; color:#062A33 !important; border-color:transparent !important; }
html :is(.nv-btn, .btn):has(svg[data-ic="waze"]):hover { filter:brightness(1.07); }
html :is(.nv-btn, .btn):has(svg[data-ic="waze"]) svg { color:inherit; }

/* ============================================================
   DETALHES DO EVENTO — desenho "A · Resumo em cima" (19/10, escolha do Renato entre 3 fotos)
   em cima, num cartão só: quando, onde (com o mapa e o Waze) e quanto falta receber; embaixo, duas colunas de cartões;
   nada de cartão dentro de cartão (as linhas de dentro só têm a linha de separação)
   ============================================================ */
html #modal-detalhes .modal.cd-modal { max-width:1040px; }
html #modal-detalhes .cd-body { background:var(--c-bg); padding:18px 22px; }
html #modal-detalhes .cd-head-l { flex-direction:column; align-items:flex-start; gap:8px; }
html #modal-detalhes .cd-num { font-size:calc(19px * var(--k-fs)); font-weight:600; }
.dv-st { position:relative; }
.dv-st-btn { display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 12px; border-radius:999px; border:1px solid color-mix(in srgb, currentColor 35%, transparent);
  font-family:var(--f-ui); font-size:calc(12.5px * var(--k-fs)); font-weight:600; cursor:pointer; }
.dv-st-btn .nv-ic { flex:none; }
.dv { display:grid; grid-template-columns:minmax(0, 1fr); gap:14px; }
.dv-hero { display:grid; grid-template-columns:minmax(0, 1.5fr) minmax(0, 1fr); background:var(--c-surface); border:1px solid var(--c-border); border-radius:14px; padding:18px 20px; }
.dv-quando { display:flex; gap:14px; min-width:0; padding-right:22px; border-right:1px solid var(--c-border); }
.dv-dt { width:62px; flex:none; align-self:flex-start; border-radius:14px; background:color-mix(in srgb, var(--c-accent) 13%, transparent); color:var(--c-accent);
  display:flex; flex-direction:column; align-items:center; padding:9px 0; line-height:1.05; }
.dv-dt small { font-size:11px; font-weight:700; letter-spacing:.06em; }
.dv-dt b { font-size:25px; font-weight:700; color:var(--c-text); margin:2px 0; }
.dv-dt .dv-dt-ano { font-size:10.5px; font-weight:600; margin-top:3px; opacity:.85; }
.dv-qtx { min-width:0; display:grid; gap:5px; align-content:start; }
.dv-hora, .dv-local { font-size:calc(15px * var(--k-fs)); font-weight:600; color:var(--c-text); overflow-wrap:anywhere; }
.dv-hora span { color:var(--c-text-3); font-weight:500; }
.dv-local { display:flex; gap:6px; align-items:center; }
.dv-local .dv-hi { color:var(--c-accent); display:grid; flex:none; }
.dv-end { font-size:calc(13.5px * var(--k-fs)); color:var(--c-text-2); line-height:1.45; overflow-wrap:anywhere; }
.mapa-bts.dv-mapa { margin-top:8px; }
.dv-rec { padding-left:22px; min-width:0; display:flex; flex-direction:column; align-items:flex-start; }
.dv-rec small { font-size:calc(12.5px * var(--k-fs)); color:var(--c-text-3); font-weight:500; }
.dv-rec-v { font-size:calc(28px * var(--k-fs)); font-weight:700; margin:2px 0 10px; color:var(--c-text); font-variant-numeric:tabular-nums; }
.dv-rec.ok .dv-rec-v { color:var(--c-ok); }
.dv-rec .dp-bar { width:100%; }
.dv-rec-l { font-size:calc(12.5px * var(--k-fs)); color:var(--c-text-3); margin:8px 0 12px; }
.dv-cols { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:14px; align-items:start; }
.dv-col { display:grid; gap:14px; min-width:0; }
.dv :is(.dv-card, .cd-block) { background:var(--c-surface); border:1px solid var(--c-border); border-radius:14px; padding:16px 18px; margin:0; min-width:0; }
.dv-h { display:flex; align-items:center; gap:8px; margin:0 0 6px; font-size:calc(13.5px * var(--k-fs)); font-weight:600; color:var(--c-text); }
.dv-h .dv-hi { color:var(--c-accent); display:grid; flex:none; }
.dv-mais { margin-left:auto; background:none; border:0; padding:0; font-family:var(--f-ui); font-size:calc(12.5px * var(--k-fs)); font-weight:600; color:var(--c-accent); cursor:pointer; white-space:nowrap; }
.dv .cd-row { padding:8px 0; font-size:calc(13.5px * var(--k-fs)); }
.dv .cd-row b { text-align:right; min-width:0; overflow-wrap:anywhere; }
.dv .dv-tot span { color:var(--c-text); font-weight:600; }
.dv .dv-tot b { font-size:calc(15px * var(--k-fs)); font-weight:700; }
.dv-cli { display:flex; align-items:center; gap:12px; margin:6px 0 4px; min-width:0; }
.dv-cli > div { min-width:0; }
.dv-cli b { display:block; font-size:calc(15px * var(--k-fs)); font-weight:600; color:var(--c-text); overflow-wrap:anywhere; }
.dv-cli small { font-size:calc(12.5px * var(--k-fs)); color:var(--c-text-3); }
.dv-cli .pc-av { width:40px; height:40px; }
.dv-vazio { margin:0; font-size:calc(13px * var(--k-fs)); color:var(--c-text-3); line-height:1.5; }
.dv .det-obs { background:none; border:0; padding:0; min-height:0; font-size:calc(13.5px * var(--k-fs)); line-height:1.5; color:var(--c-text-2); }
.dv .det-obs.dv-vazio { color:var(--c-text-3); }
.dv-sub { margin:14px 0 2px; font-size:calc(12px * var(--k-fs)); font-weight:600; color:var(--c-text-3); }
.dv .rc-lista { gap:0; margin-top:0; }
.dv .rc-lin { background:none; border:0; border-radius:0; padding:8px 0; }
.dv .rc-lin + .rc-lin { border-top:1px solid var(--c-border); }
.dv-doc, .dv-lk { display:flex; align-items:center; gap:10px; padding:10px 0; min-width:0; }
.dv-lk { flex-wrap:wrap; }
.dv-doc + .dv-doc, .dv-lk + .dv-lk, .dv-lk + .det-nota-num, .dv .det-nota-num + .dv-lk { border-top:1px solid var(--c-border); }
.dv-doc-ic { width:34px; height:34px; border-radius:10px; background:var(--c-raised); display:grid; place-items:center; color:var(--c-text-2); flex:none; }
.dv-doc-tx { flex:1 1 auto; min-width:0; }
.dv-lk-tx { flex:1 1 180px; min-width:0; }
.dv-doc-tx b, .dv-lk-tx b { display:block; font-size:calc(13.5px * var(--k-fs)); font-weight:600; color:var(--c-text); }
.dv-doc-tx small, .dv-lk-tx small { display:block; font-size:calc(12px * var(--k-fs)); color:var(--c-text-3); margin-top:2px; line-height:1.4; }
.dv-doc-tx small { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dv-doc .badge { flex:none; }
.dv-doc-mais { flex:none; }
.dv-doc-mais > summary { list-style:none; width:30px; padding:0; justify-content:center; }
.dv-doc-mais > summary::-webkit-details-marker { display:none; }
.dv-lk-bts { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; margin-left:auto; }
html .dv .nv-btn.dv-ico { width:30px; padding:0; justify-content:center; }
.dv .det-nota-num { margin:0; padding:4px 0 10px; }
.dv .det-nota-num label { font-size:calc(12.5px * var(--k-fs)); font-weight:500; text-transform:none; letter-spacing:0; color:var(--c-text-3); }
.dv .det-nota-num input { height:32px; background:var(--c-bg); color:var(--c-text); border:1px solid var(--c-border-2); border-radius:var(--r-md); padding:0 10px; }
.dv .det-nota-num input:focus { border-color:var(--c-accent); }
.dv #det-anexos-lista { min-width:0; }
.dv .anexo-empty { border:0; padding:0 0 2px; text-align:left; font-size:calc(12.5px * var(--k-fs)); color:var(--c-text-3); }
.dv .anexo-list { display:grid; gap:0; }
.dv .anexo-item { background:none; border:0; border-top:1px solid var(--c-border); border-radius:0; padding:9px 0; }
@media (max-width:900px) {
  .dv-hero { grid-template-columns:1fr; gap:14px; padding:16px; }
  .dv-quando { padding-right:0; border-right:0; }
  .dv-rec { padding-left:0; padding-top:14px; border-top:1px solid var(--c-border); }
  .dv-cols { display:flex; flex-direction:column; align-items:stretch; }
  .dv-col { display:contents; }
  .dv [data-dv="dinheiro"] { order:1; } .dv [data-dv="cliente"] { order:2; } .dv [data-dv="evento"] { order:3; } .dv .cd-ficha { order:4; }
  .dv [data-dv="docs"] { order:5; } .dv [data-dv="links"] { order:6; } .dv [data-dv="obs"] { order:7; } .dv [data-dv="arquivos"] { order:8; }
}
@media (max-width:720px) {
  html #modal-detalhes .cd-body { padding:12px; }
  .dv-rec-v { font-size:calc(24px * var(--k-fs)); }
  .dv :is(.dv-card, .cd-block) { padding:14px 16px; }
}

/* 19/10 (pedido do Renato: "a notificação em cima do sininho está esbranquiçada"): o número do sino tinha a cor do texto
   apagado (cinza claro). Agora é o azul das não lidas (o mesmo da bolinha dentro do sino); urgente continua amarelo. */
html .lembretes-bell-badge { background:var(--c-info); color:var(--c-bg); }

/* 19/10: no app do iPhone sem a barra transparente, o 100vh conta a barra do relógio (WebKit 316008) e a página rolava um pouco
   à toa: a altura mínima vem da tela visível */
html[data-app-ios] .nv-casca { min-height:100dvh; }

/* 19/10 (MeusGigs, contas para outros DJs, parte C): os primeiros passos do DJ novo — "Comece por aqui" no Início
   (PrimeirosPassos, app/casca.js) e a janela curta. Só na conta nova. */
#cpp-lista .cpp { margin-bottom: 16px; }
.cpp-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.cpp-cab h2 { margin: 0; font-size: 15px; font-weight: 600; color: var(--c-text); }
.cpp-sub { margin: 2px 0 0; color: var(--c-text-3); font-size: 12.5px; }
.cpp-barra { height: 6px; border-radius: 9px; background: var(--c-border); overflow: hidden; margin: 12px 0 4px; }
.cpp-barra i { display: block; height: 100%; background: var(--c-accent); border-radius: 9px; }
.cpp-it { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--c-border); }
.cpp-ck { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--c-border); flex: none; display: grid; place-items: center; }
.cpp-it.feito .cpp-ck { background: var(--c-ok); border-color: var(--c-ok); color: #0b1a12; }
.cpp-t { flex: 1; min-width: 0; }
.cpp-t b { display: block; font-size: 13.5px; font-weight: 600; color: var(--c-text); }
.cpp-t small { display: block; font-size: 12px; color: var(--c-text-3); }
.cpp-it.feito .cpp-t b { color: var(--c-text-3); text-decoration: line-through; }
.cpp-ok { font-size: 12px; font-weight: 600; color: var(--c-ok); flex: none; }
.cpp-bts { display: flex; gap: 6px; flex: none; align-items: center; }   /* 19/10: "Depois" ao lado do botão do item */
.cpp-dica { font-size: 12.5px; color: var(--c-text-3); margin: 6px 0 0; }
.cpp-erro { font-size: 12.5px; color: var(--c-bad); margin: 6px 0 0; min-height: 1em; }
/* 19/10: a janela de boas-vindas em 2 passos (os dados do contrato no passo 2) */
#cpp-ov [data-cpp-passo] { display: grid; gap: 10px; }
#cpp-ov [data-cpp-passo][hidden] { display: none; }
#cpp-ov .cpp-duas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#cpp-ov .cpp-duas.cpp-cid { grid-template-columns: 1fr 88px; }
#cpp-ov .cpp-opc { font-weight: 400; color: var(--c-text-3); }
#cpp-ov .modal-foot { display: flex; align-items: center; gap: 8px; }
#cpp-ov .cpp-espaco { flex: 1; }
@media (max-width: 520px) { #cpp-ov .cpp-duas:not(.cpp-cid) { grid-template-columns: 1fr; } }

/* 19/10 (pedido do Renato): puxar para atualizar no app instalado, no jeito do WhatsApp (PuxarAtualizar, app/interface.js) —
   o conteúdo (#app-wrap) desce com o dedo e a bolinha fica no espaço que abre embaixo do topo; pronta (na cor de destaque),
   ela gira enquanto os dados vêm da nuvem */
#ptr { position:fixed; left:50%; top:var(--topbar-h, 48px); z-index:5; transform:translate(-50%, -19px) scale(.6); opacity:0; pointer-events:none; }
#ptr .ptr-bola { width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:var(--c-raised, var(--c-surface)); border:1px solid var(--c-border);
  box-shadow:var(--c-sombra); color:var(--c-text-2); }
#ptr.pronto .ptr-bola { color:var(--c-accent); border-color:color-mix(in srgb, var(--c-accent) 45%, var(--c-border)); }
#ptr.girando .ptr-bola { color:var(--c-accent); }
#ptr.girando .ptr-bola svg { animation:ptrGira .7s linear infinite; }
@keyframes ptrGira { to { transform:rotate(360deg); } }