:root{
  /* ── Design "Vitrine" (estilo Apple) com a identidade da Comexfer.
     As cores abaixo são as EXATAS da logomarca original da empresa,
     medidas diretamente do arquivo de arte (Comexfer_Logo):
       #0E6CA0 azul principal · #53C2F0 azul claro da fita do "X"
       #093A58 azul escuro da dobra do "X"
     Fundo cinza claro, cartões brancos, degradê da marca apenas como
     assinatura (faixas finas e destaques), nunca como fundo de texto. ── */
  --azul:#0E6CA0; --azul-esc:#093A58; --ciano:#53C2F0; --azul2:#1a86c4;
  --grad:linear-gradient(135deg,#0E6CA0 0%,#1a86c4 55%,#53C2F0 100%);
  --grad-esc:linear-gradient(135deg,#093A58 0%,#0E6CA0 60%,#1a86c4 100%);
  --bg:#f5f5f7; --cinza:#f5f5f7; --card:#ffffff; --borda:#e6e6ea;
  --verde:#1a9e57; --verm:#c0392b; --amar:#c9750a; --roxo:#7a5aa0;
  --texto:#1d1d1f; --texto2:#6e6e73; --texto3:#8e8e93;
  /* Tons neutros reaproveitados em vários componentes (bordas finas, fundos
     sutis, botões neutros) — consolidados em variáveis para que o modo escuro
     (ver [data-theme="dark"] no fim do arquivo) só precise redefini-los aqui. */
  --linha:#f0f0f3; --fundo2:#f7f7fa; --seg-bg:#e9e9ec;
  --btn-bg:#eee; --btn-bg-hover:#e2e2e6; --icone3:#c7c7cc;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:12.5px;background:var(--bg);color:var(--texto);-webkit-font-smoothing:antialiased;
}
/* Números sempre alinhados (tabular), como nos apps da Apple */
.num,td.mv,.kv,table.tbl td{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
a{color:var(--azul);text-decoration:none}
a:hover{text-decoration:underline}

/* ── Layout ── */
.app-header{
  background:rgba(255,255,255,.86);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--borda);padding:20px 28px 12px;
  /* v180: um pouco mais de respiro no topo -- no Mac, com a janela maximizada
     (ou instalado como app via Safira "Adicionar ao Dock"), o cabeçalho ficava
     colado bem na borda superior da tela. */
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;
  position:sticky;top:0;z-index:20;
}
/* ── Logomarca ORIGINAL da Comexfer (static/img/logo-comexfer*.png).
   Para trocar a arte no sistema todo basta substituir esses arquivos. ── */
.hdr-left{display:flex;align-items:center;gap:10px}
.hdr-back{background:var(--btn-bg);border:none;width:32px;height:32px;border-radius:9px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;flex:none;color:var(--texto2);transition:background .15s}
.hdr-back:hover{background:var(--btn-bg-hover)}
.hdr-back .icon{width:17px;height:17px}
.hdr-logo{display:flex;flex-direction:column;align-items:center;gap:3px;text-decoration:none}
.hdr-logo:hover{text-decoration:none;opacity:.82}
.logo-img{height:23px;width:auto;display:block}
.logo-sub{font:600 7.5px/1 -apple-system,Arial,sans-serif;letter-spacing:2.4px;color:var(--texto3);text-transform:uppercase}

/* ── Navegação principal: estilo "segmented control" do iOS ── */
.nav{display:flex;gap:2px;flex-wrap:wrap;align-items:center;background:var(--seg-bg);border-radius:11px;padding:3px}
.nav a{padding:7px 14px;border-radius:9px;color:var(--texto2);font-weight:600;font-size:12.5px;
  transition:all .15s;display:inline-flex;align-items:center;gap:6px}
.nav a:hover{text-decoration:none;color:var(--texto)}
.nav a.active{background:var(--card);color:var(--texto);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.hdr-user{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--texto2);
  flex:none;white-space:nowrap} /* v270 -- flex:none garante que este bloco nunca
    encolhe nem quebra pra 2ª linha (pedido do usuário: "o usuário deveria manter
    na mesma linha do cabeçalho") -- quem cede espaço agora é a busca, ao lado. */
.hdr-user strong{color:var(--texto)}
.btn-logout{background:var(--btn-bg);border:none;padding:7px 13px;border-radius:9px;color:var(--texto2);font-size:11.5px;cursor:pointer;font-weight:600;transition:background .15s}
.btn-logout:hover{background:var(--btn-bg-hover)}

/* v266 -- Busca (lupa) sempre visível no cabeçalho, entre a navegação e o menu
   do usuário -- pedido do usuário: manter a lupa, mas com um campo pra
   escrever, num local harmonioso. Antes era só um ícone que abria o campo ao
   clicar (v183); com o sino de notificações e o alternador de tema fora do
   cabeçalho, sobrou espaço de sobra pra deixar o campo sempre à mostra.
   v268 -- ficou discreto demais (pedido do usuário): campo maior, ícone mais
   visível, borda com mais contraste e destaque ao focar.
   v269 -- margin-left:auto removido (ver comentário em .hdr-user acima).
   v270 -- movida para a posição mais à direita (onde ficava o menu do
   usuário), maior ainda e com um acabamento mais "definido" -- cantos mais
   arredondados (estilo pílula, como a busca do Spotlight/Safari), sombra mais
   presente e uma transição mais suave ao focar. #}
.hdr-search-inline{display:flex;align-items:center;gap:10px;background:var(--cinza);
  border:1px solid var(--borda);border-radius:13px;padding:11px 18px;
  flex:1 1 380px;max-width:420px;min-width:200px;
  box-shadow:0 1px 2px rgba(0,0,0,.04),0 4px 14px rgba(0,0,0,.06);
  transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease}
.hdr-search-inline:focus-within{border-color:var(--azul);background:var(--card);
  box-shadow:0 0 0 4px rgba(14,108,160,.14),0 4px 14px rgba(0,0,0,.08)}
.hdr-search-icon{color:var(--texto2);flex:none;width:19px!important;height:19px!important}
.hdr-search-inline .hdr-search-input{border:none;background:transparent;font-size:15px;
  font-weight:500;color:var(--texto);width:100%;padding:0;outline:none;letter-spacing:-.1px}
.hdr-search-inline .hdr-search-input::placeholder{color:var(--texto3);font-weight:400}
[data-theme="dark"] .hdr-search-inline{background:var(--btn-bg)}
[data-theme="dark"] .hdr-search-inline:focus-within{background:var(--card)}

/* ── Menu do usuário (v183): "Trocar senha"/"Trocar usuário"/"Sair" viviam como
   3 elementos soltos no cabeçalho -- agora ficam agrupados num único menu, que
   abre ao clicar no nome/avatar (mesmo padrão visual do sino de notificações,
   removido na v266 -- a classe .notif-dropdown continua reaproveitada aqui,
   só o sino em si que saiu). ── */
.user-menu-wrap{position:relative}
.hdr-user-btn{display:flex;align-items:center;gap:8px;background:none;border:none;padding:4px 6px;
  border-radius:9px;cursor:pointer;font-size:12px;color:var(--texto2);transition:background .15s}
.hdr-user-btn:hover{background:var(--btn-bg)}
.hdr-user-caret{font-size:9px;color:var(--texto3)}
.user-menu-dropdown{padding:6px}
.user-menu-dropdown .notif-item{width:100%;text-align:left;background:none;border:none;cursor:pointer;
  font:inherit;color:var(--texto);display:flex;align-items:center;gap:8px}
/* v190 -- icones SVG no lugar dos emojis 🔑🔁🚪 deste menu especificamente */
.user-menu-dropdown .notif-item .icon{color:var(--texto2)}
.user-menu-sair{color:var(--verm)}

.wrap{max-width:1280px;margin:0 auto;padding:24px 24px 60px;animation:comexfer-fade-in .28s ease-out}

@keyframes comexfer-fade-in{
  from{opacity:0;transform:translateY(4px)}
  to{opacity:1;transform:translateY(0)}
}
@media (prefers-reduced-motion:reduce){
  .wrap{animation:none}
}

.card{background:var(--card);border:none;border-radius:16px;padding:18px 20px;
  margin-bottom:14px;box-shadow:0 1px 2px rgba(0,0,0,.04),0 2px 10px rgba(0,0,0,.045)}

/* ── Título de seção: a faixa fina de degradê da marca é a "assinatura"
   do estilo Vitrine — aparece sempre discreta, embaixo do rótulo. ── */
.sec{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;
  color:var(--texto3);padding-bottom:8px;margin-bottom:12px;position:relative;
  display:flex;justify-content:space-between;align-items:center}
.sec::after{content:'';position:absolute;left:0;bottom:0;width:34px;height:2px;
  border-radius:2px;background:var(--grad)}
.sec.am{color:var(--amar)}
.sec.vd{color:var(--verde)}

/* Faixa de degradê usada como divisor/assinatura em cartões de destaque */
.faixa-marca{height:3px;border-radius:3px;background:var(--grad);margin:2px 0 14px}

/* Cartão de métrica em destaque (KPI principal do Fechamento/Relatórios) */
.kpi-destaque{background:var(--grad);color:#fff;border-radius:16px;padding:18px 20px;
  box-shadow:0 1px 2px rgba(0,0,0,.06),0 6px 22px rgba(14,108,160,.24)}
.kpi-destaque .kl{font-size:9.5px;font-weight:600;text-transform:uppercase;letter-spacing:.6px;opacity:.88}
.kpi-destaque .kv{font-size:21px;font-weight:600;letter-spacing:-.4px;margin-top:4px}

.page-title{font-size:19px;font-weight:600;letter-spacing:-.35px;color:var(--texto);margin-bottom:4px;letter-spacing:-.2px}
.page-sub{font-size:11.5px;color:var(--texto2);margin-bottom:20px}

/* Grids */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.g5{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
@media (max-width:900px){.g2,.g3,.g4,.g5{grid-template-columns:1fr}}

/* ── Abas do Processo — segmented control (mesmo estilo do
   nav principal), sempre visível e consistente em todas as telas ── */
.proc-tabs{display:flex;gap:2px;flex-wrap:wrap;margin:10px 0 20px;background:var(--seg-bg);border-radius:12px;padding:4px}
.proc-tabs a{padding:9px 15px;border-radius:9px;color:var(--texto2);font-weight:600;
  font-size:12px;white-space:nowrap;transition:all .15s;flex:1;text-align:center}
.proc-tabs a:hover{text-decoration:none;color:var(--texto)}
.proc-tabs a.active{background:var(--card);color:var(--azul);box-shadow:0 1px 3px rgba(0,0,0,.12);font-weight:700}

/* Segundo nível da navegação do Processo: as telas do grupo aberto. Mais leve
   que o primeiro nível (sem fundo cinza), para a hierarquia ficar clara. */
.proc-subtabs{display:flex;gap:16px;flex-wrap:wrap;margin:-12px 0 20px;padding:0 6px}
.proc-subtabs a{font-size:12px;font-weight:600;color:var(--texto2);padding:4px 0;border-bottom:2px solid transparent}
.proc-subtabs a:hover{text-decoration:none;color:var(--texto)}
.proc-subtabs a.active{color:var(--azul);border-bottom-color:var(--azul)}

/* ── Trilha da Importação: onde o processo está no fluxo ── */
.trilha-card{padding:14px 18px 12px}
.trilha{display:flex;gap:6px}
.trilha-et{flex:1;text-align:center;min-width:0}
.trilha-barra{height:3px;border-radius:2px;background:var(--borda)}
.trilha-lbl{font-size:10.5px;color:var(--texto3);margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trilha-et.feita .trilha-barra{background:var(--azul)}
.trilha-et.feita .trilha-lbl{color:var(--texto2)}
.trilha-et.atual .trilha-barra{background:var(--ciano)}
.trilha-et.atual .trilha-lbl{color:var(--azul);font-weight:700}

/* ── Linha do Tempo unificada (v236): substitui a Trilha simples + o Circuito
   de Assinaturas -- peso visual (flex-grow) proporcional à duração típica de
   cada fase, fase atual clicável com confirmação inline. ── */
.tlu{display:flex;gap:6px;align-items:flex-start}
.tlu-fase{text-align:center;min-width:0}
.tlu-barra{height:3px;border-radius:2px;background:var(--borda)}
.tlu-lbl{display:block;font-size:10.5px;color:var(--texto3);margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:default}
.tlu-data{font-size:9.5px;color:var(--texto3);margin-top:2px}
.tlu-fase.tlu-feita .tlu-barra{background:var(--azul)}
.tlu-fase.tlu-feita .tlu-lbl{color:var(--texto2)}
.tlu-fase.tlu-atual .tlu-barra{background:var(--ciano)}
.tlu-fase.tlu-atual .tlu-lbl{color:var(--azul);font-weight:700}
.tlu-confirmar{cursor:pointer}
.tlu-confirmar summary{list-style:none;cursor:pointer}
.tlu-confirmar summary::-webkit-details-marker{display:none}
.tlu-confirmar .tlu-hint{display:block;font-size:9px;color:var(--azul);font-weight:400;text-transform:none;letter-spacing:0}
.tlu-form{display:flex;gap:6px;align-items:center;justify-content:center;margin-top:8px;flex-wrap:wrap}
.tlu-form input[type="date"]{padding:4px 6px;font-size:11px;width:auto}
a.tlu-lbl:hover{text-decoration:underline;color:var(--azul)}
.tlu-desfazer{background:none;border:none;padding:0;font-size:9.5px;color:var(--texto3);
  text-decoration:underline;cursor:pointer;margin-top:2px}
.tlu-desfazer:hover{color:var(--vermelho,#d70015)}

/* ── Próximo passo: uma ação clara, sem competir com o resto da tela ── */
.passo-card{border-left:3px solid var(--azul);background:#f4f9fd}
.passo-card.ok{border-left-color:var(--verde);background:#f4faf6}
.passo-eyebrow{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.9px;color:var(--azul)}
.passo-card.ok .passo-eyebrow{color:var(--verde)}
.passo-linha{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:4px}
.passo-titulo{font-size:14.5px;font-weight:600;color:var(--texto);letter-spacing:-.2px}
.passo-detalhe{font-size:12px;color:var(--texto2);margin-top:3px;max-width:640px;line-height:1.5}

/* ── Ficha do Processo: dados operacionais para conferir documentos ── */
.fp-bloco{margin-bottom:14px}
.fp-titulo{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--azul);margin-bottom:8px}
.fp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px 18px}
.fp-item{min-width:0}
.fp-lbl{font-size:9.5px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;color:var(--texto3);margin-bottom:2px}
.fp-val{display:flex;align-items:flex-start;gap:6px}
.fp-txt{font-size:12.5px;color:var(--texto);font-weight:500;word-break:break-word;line-height:1.4}
.fp-copy{background:none;border:none;color:var(--icone3);font-size:12px;cursor:pointer;padding:0 2px;line-height:1.4;flex:0 0 auto}
.fp-copy:hover{color:var(--azul)}

/* ── Checklist de documentos da etapa ── */
.doc-chips{display:flex;gap:6px;flex-wrap:wrap}
.doc-chip{font-size:11.5px;font-weight:600;padding:5px 11px;border-radius:8px}
.doc-chip.ok{background:#eef8f2;color:#157a43}
.doc-chip.pend{background:#eef6fb;color:#0E6CA0}
.doc-chip.falta{background:#fdf6e9;color:#9a6206}

.f{margin-bottom:12px}
.f label{display:block;font-size:10px;font-weight:600;letter-spacing:.2px;text-transform:uppercase;color:var(--texto3);margin-bottom:5px}
.f input,.f select,.f textarea{
  width:100%;padding:8px 11px;border:1px solid var(--borda);border-radius:10px;
  font-size:12.5px;background:var(--fundo2);color:var(--texto);font-family:inherit;
  transition:border-color .15s,background .15s,box-shadow .15s;
}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--azul);background:var(--card);
  box-shadow:0 0 0 4px rgba(14,108,160,.14)}
.f small{font-size:10.5px;color:var(--texto3);margin-top:4px;display:block}
.checkbox-row{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--texto2);margin-top:5px}

/* Buttons — estilo iOS: cantos bem arredondados, um azul de destaque único
   para ações primárias, vermelho só para destrutivas, cinza para neutras. */
.btn{padding:9px 17px;border:none;border-radius:11px;cursor:pointer;font-size:12px;font-weight:600;
  transition:all .15s;letter-spacing:0;display:inline-flex;align-items:center;gap:6px}
.btn:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,0,0,.12)}
.btn:active{transform:translateY(0)}
.bc{background:var(--azul);color:#fff}
.bp{background:var(--azul);color:#fff}
.br{background:var(--btn-bg);color:var(--texto2)}
.bd{background:var(--verm);color:#fff}
.ba{background:var(--amar);color:#fff}
.brow{display:flex;gap:10px;margin:16px 0;flex-wrap:wrap}

/* Tables */
table.tbl{width:100%;border-collapse:collapse;font-size:12px}
table.tbl th{background:transparent;color:var(--texto3);font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.5px;padding:9px 10px;border-bottom:1px solid var(--borda);text-align:left}
/* v190 -- cabeçalhos clicáveis (ordenação por coluna, ver estimates_list.html) */
.th-sort{color:inherit;text-decoration:none;white-space:nowrap}
.th-sort:hover{color:var(--texto);text-decoration:none}
.th-sort-ativo{color:var(--texto)}
table.tbl td{padding:11px 10px;border-bottom:1px solid var(--linha);vertical-align:middle}
/* v271 -- alça de arraste da lista de Estimativas/Processos (ordem pessoal) */
.drag-handle{cursor:grab;color:var(--texto3);text-align:center;padding:11px 4px!important;user-select:none}
.drag-handle:active{cursor:grabbing}
tr.linha-arrastavel{transition:opacity .12s}
table.tbl tr:hover td{background:var(--fundo2)}
table.tbl tr:last-child td{border-bottom:none}

.badge{display:inline-block;padding:4px 11px;border-radius:999px;font-size:10.5px;font-weight:700;color:#fff}

/* Result composition table (reused from calculator) */
.rtab{background:var(--card);border:none;border-radius:16px;overflow-x:auto;overflow-y:hidden;margin-bottom:16px;box-shadow:0 1px 2px rgba(0,0,0,.04),0 2px 10px rgba(0,0,0,.045)}
.rtab table{width:100%;border-collapse:collapse}
.rtab th{background:var(--azul);color:#fff;padding:11px 14px;font-size:9.5px;text-transform:uppercase;letter-spacing:.6px;text-align:left}
.rtab td{padding:7px 14px;border-bottom:1px solid var(--linha);font-size:12.5px}
.rs-hdr td{background:var(--azul);color:#fff;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;padding:9px 14px}
.rs-grp td{background:var(--fundo2);font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--texto2);padding:6px 14px;border-bottom:1px solid var(--linha)}
.rs-row td{padding:6px 14px 6px 22px;border-bottom:1px solid var(--linha);font-size:12px;color:var(--texto)}
.rs-row td.mv{text-align:right;font-family:'SF Mono','Courier New',monospace;font-size:12px;min-width:130px}
.rs-imp td.mv{color:var(--verm)}
.rs-crd td{background:#eef8f2;padding:7px 14px;font-size:12px;color:#157a43;font-weight:600}
.rs-crd td.mv{text-align:right;font-family:'SF Mono','Courier New',monospace;font-size:12px;color:#157a43;min-width:130px}
.rs-sub td{padding:6px 14px;font-size:12px;font-weight:700;border-bottom:2px solid var(--linha);color:var(--texto)}
.rs-sub td.mv{text-align:right;font-family:'SF Mono','Courier New',monospace;font-weight:700;min-width:130px}
.rs-tot td{background:var(--azul);color:#fff;padding:11px 14px;font-size:12.5px;font-weight:700}
.rs-tot td.mv{text-align:right;font-family:'SF Mono','Courier New',monospace;min-width:130px}
.rs-liq td{background:var(--verde);color:#fff;padding:11px 14px;font-size:12.5px;font-weight:700}
.rs-liq td.mv{text-align:right;font-family:'SF Mono','Courier New',monospace;min-width:130px}

/* Item cards result */
#item-cards{padding:10px 0;display:flex;flex-direction:column;gap:10px}
.icard{border:none;border-radius:14px;overflow:hidden;background:var(--card);box-shadow:0 1px 2px rgba(0,0,0,.04),0 2px 8px rgba(0,0,0,.04)}
.icard-hdr{background:var(--grad);color:#fff;padding:10px 14px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.icard-spec{background:var(--azul-esc);color:rgba(255,255,255,.85);font-size:10px;padding:6px 14px;display:flex;flex-wrap:wrap;gap:6px}
.icard-spec .sp-tag{background:rgba(255,255,255,.15);border-radius:6px;padding:2px 8px;font-weight:600}
.ic-badge{background:rgba(255,255,255,.25);color:#fff;font-size:9px;font-weight:800;letter-spacing:.6px;padding:2px 8px;border-radius:6px}
.ic-desc{font-size:13px;font-weight:600;flex:1}
.ic-ncm{font-size:10.5px;font-weight:700;background:rgba(255,255,255,.2);border-radius:6px;padding:2px 9px}
.ic-meta{font-size:11px;font-weight:700;margin-left:auto;background:rgba(255,255,255,.16);border-radius:6px;padding:2px 10px;font-family:'SF Mono','Courier New',monospace}
.icard-main{padding:16px 18px 14px;text-align:center;border-bottom:1px solid var(--borda)}
.icard-main .im-label{font-size:9.5px;font-weight:700;text-transform:uppercase;color:var(--texto3);margin-bottom:6px;letter-spacing:.4px}
.icard-main .im-val{font-size:20px;font-weight:600;font-family:'SF Mono','Courier New',monospace;color:var(--texto)}
.icard-secondary{display:grid;grid-template-columns:1fr 1fr;background:var(--fundo2)}
.icard-metric{padding:9px 14px;border-right:1px solid var(--borda);text-align:center}
.icard-metric:last-child{border-right:none}
.icard-metric .im-label{font-size:9px;font-weight:700;text-transform:uppercase;color:var(--texto3);margin-bottom:3px}
.icard-metric .im-val{font-size:13px;font-weight:700;font-family:'SF Mono','Courier New',monospace}
.im-sipi{color:var(--amar)}
.im-cipi{color:var(--azul2)}
.im-liq{color:var(--verde)}

/* Item entry table */
.itab{width:100%;border-collapse:collapse;font-size:12.5px}
.itab th{background:transparent;color:var(--texto3);font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:8px 10px;border-bottom:1px solid var(--borda);text-align:left}
.itab td{padding:6px;border-bottom:1px solid var(--linha);vertical-align:middle}
.itab input,.itab select{width:100%;padding:6px 8px;border:1px solid var(--borda);border-radius:8px;font-size:12.5px;background:var(--fundo2);color:var(--texto)}
.del-btn{background:none;border:none;color:var(--icone3);font-size:18px;cursor:pointer;padding:2px 6px;border-radius:6px}
.row-actions{display:inline-flex;align-items:center;gap:2px}
.row-ico{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:6px;font-size:14px;color:var(--texto2)}
.row-ico:hover{background:var(--fundo2);text-decoration:none;color:var(--azul)}
@media(max-width:760px){.row-actions{gap:4px}.row-ico{width:38px;height:38px;font-size:17px}}
@media(max-width:760px){.fp-copy{padding:6px}}
@media(max-width:760px){
  /* v266 -- a busca agora é um campo sempre visível (não mais um ícone com
     campo flutuante) -- no celular, ocupa a largura toda da linha em que cair
     (o cabeçalho já quebra em várias linhas em telas estreitas). */
  .hdr-search-inline{flex:1 1 100%;order:3}
  .hdr-user-name{display:none}
  .hdr-back{width:36px;height:36px}
}
.del-btn:hover{color:var(--verm);background:#fff1f0}
.add-item-btn{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;background:#eef6fb;border:1.5px dashed var(--azul);color:var(--azul);border-radius:10px;cursor:pointer;font-size:12px;font-weight:600;margin-top:10px}
.add-item-btn:hover{background:#e2eff8}
.item-spec-inner{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:8px 10px 10px;background:var(--fundo2);border-radius:0 0 10px 10px}
.item-spec-inner .sp-lbl{font-size:9px;font-weight:700;text-transform:uppercase;color:var(--texto3);margin-bottom:3px}
.item-spec-inner select,.item-spec-inner input{width:100%;padding:5px 7px;border:1px solid var(--borda);border-radius:8px;font-size:11.5px;background:var(--card)}
.item-spec-row2{border-top:1px dashed var(--borda);margin-top:6px;padding-top:6px;display:grid;gap:8px;grid-template-columns:repeat(5,1fr)}
.sp-lbl-key{font-size:9px;font-weight:700;text-transform:uppercase;color:var(--azul);margin-bottom:3px}

.flash{padding:12px 16px;border-radius:12px;margin-bottom:14px;font-size:12.5px;font-weight:500}
.flash-success{background:#eaf7f0;color:#157a43;border:none}
.flash-error{background:#fdeded;color:#a8291c;border:none}

.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
@media (max-width:900px){.kpi-row{grid-template-columns:repeat(2,1fr)}}
.kpi{background:var(--card);border:none;border-radius:16px;padding:18px 20px;box-shadow:0 1px 2px rgba(0,0,0,.04),0 2px 10px rgba(0,0,0,.045)}
.kpi .kv{font-size:21px;font-weight:600;color:var(--texto);letter-spacing:-.3px}
.kpi .kl{font-size:9.5px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--texto3);margin-top:5px}

.kpi-dot{display:inline-block;width:12px;height:12px;border-radius:50%;margin-bottom:8px}
.kpi-dot-verm{background:var(--verm)}
.kpi-dot-amar{background:var(--amar)}
.kpi-dot-verde{background:var(--verde)}

.saude-bar{display:flex;width:100%;height:8px;border-radius:5px;overflow:hidden;background:var(--fundo2);margin:-4px 0 18px}
.saude-bar-seg{height:100%;transition:width .3s ease}
.saude-bar-verm{background:var(--verm)}
.saude-bar-amar{background:var(--amar)}
.saude-bar-verde{background:var(--verde)}

.avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;
  color:#fff;font-weight:700;letter-spacing:.2px;flex:none;line-height:1}
.avatar-sm{width:26px;height:26px;font-size:9.5px}
.avatar-md{width:36px;height:36px;font-size:12px}

.empty-state{text-align:center;padding:40px;color:var(--texto3);font-size:13px}
.empty-state-ic{font-size:30px;line-height:1;margin-bottom:12px;opacity:.75}
.empty-state p{margin:0 0 16px;max-width:420px;margin-left:auto;margin-right:auto;line-height:1.5}
.empty-state p:last-child{margin-bottom:0}

.filter-row{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap;align-items:flex-end}
.filter-row .f{margin-bottom:0;min-width:160px}

.timeline{display:flex;flex-direction:column;gap:0}
.timeline-item{display:flex;gap:14px;padding:13px 0;border-bottom:1px solid var(--borda)}
.timeline-item:last-child{border-bottom:none}
.timeline-dot{width:9px;height:9px;border-radius:50%;background:var(--azul);margin-top:5px;flex-shrink:0}
.timeline-body strong{color:var(--texto)}
.timeline-meta{font-size:10.5px;color:var(--texto3);margin-top:3px}

/* ── Modo Apresentação (proposta ao cliente) ──────────────── */
.pres-page{background:var(--bg);min-height:100vh}
.pres-toolbar{position:sticky;top:0;background:rgba(255,255,255,.9);backdrop-filter:blur(20px);border-bottom:1px solid var(--borda);padding:14px 32px;
  display:flex;justify-content:space-between;align-items:center;z-index:10}

.pres-cost-toggle{display:flex;gap:4px;padding:3px;background:var(--seg-bg);border-radius:10px}
.pres-cost-toggle .btn{padding:7px 10px;white-space:nowrap}
.pres-wrap{max-width:820px;margin:0 auto;padding:28px 32px 56px}
.po-ph-box{background:var(--card);border:none;border-radius:16px;padding:24px 28px 20px;
  margin-bottom:18px;box-shadow:0 1px 2px rgba(0,0,0,.04),0 2px 10px rgba(0,0,0,.045)}
.po-ph-title{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:2.5px;color:var(--texto3);margin-bottom:8px}
.po-ph-top{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px;
  border-bottom:1px solid var(--borda);padding-bottom:16px}
.po-ph-subtitle{font-size:17px;font-weight:600;color:var(--texto)}
.po-ph-date{font-size:11px;color:var(--texto3)}
.po-ph-meta{display:flex;gap:8px;flex-wrap:wrap}
.po-ph-chip{flex:1;min-width:150px;background:var(--fundo2);border:none;border-radius:12px;padding:10px 14px}
.po-ph-chip-lbl{font-size:8.5px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--texto3);margin-bottom:4px}
.po-ph-chip-val{font-size:13px;font-weight:700;color:var(--texto)}

.ptab{margin-bottom:20px;border-radius:14px;overflow:hidden;border:none;background:var(--card);box-shadow:0 1px 2px rgba(0,0,0,.04),0 2px 8px rgba(0,0,0,.04)}
.ptab-hdr{background:var(--azul);color:#fff;text-align:left;font-size:12px;font-weight:600;padding:12px 20px;letter-spacing:-.1px}
.ptab table{width:100%;border-collapse:collapse}
.ptab thead th{background:var(--fundo2);font-size:8.5px;font-weight:700;text-transform:uppercase;letter-spacing:1px;
  color:var(--texto3);text-align:center;padding:10px 18px;border-bottom:1px solid var(--borda)}
.ptab tbody td{padding:16px 20px;text-align:center;border-right:1px solid var(--linha);vertical-align:middle}
.ptab tbody td:last-child{border-right:none}
.ptab tbody tr+tr td{border-top:1px solid var(--borda)}
.pt-esp{font-size:13.5px;font-weight:700;color:var(--texto)}
.pt-usd{font-size:12.5px;font-weight:700;color:var(--texto2)}
.pt-usd-lbl{font-size:8px;color:var(--texto3);display:block;margin-top:4px}
.pt-brl{font-size:15px;font-weight:700;color:var(--azul)}
.pt-brl-lbl{font-size:8px;color:var(--texto3);display:block;margin-top:4px}
.pt-qty{font-size:12.5px;font-weight:700;color:var(--texto2)}
.pt-qty-lbl{font-size:8px;color:var(--texto3);display:block;margin-top:4px}

.pinfo-box{border:none;border-radius:14px;overflow:hidden;background:var(--card);box-shadow:0 1px 2px rgba(0,0,0,.04),0 2px 8px rgba(0,0,0,.04)}
.pinfo-row{display:grid;grid-template-columns:220px 1fr;border-bottom:1px solid var(--linha)}
.pinfo-row:last-child{border-bottom:none}
.pinfo-lbl{font-weight:700;text-transform:uppercase;font-size:8.5px;letter-spacing:1px;color:var(--texto3);
  padding:11px 20px;background:var(--fundo2);border-right:1px solid var(--linha)}
.pinfo-val{padding:11px 20px;color:var(--texto);font-size:12px;line-height:1.5}
.pinfo-val.strong{font-weight:700}
.po-footer{text-align:left;font-size:9px;color:var(--texto3);margin-top:28px;padding-top:14px;
  border-top:1px solid var(--borda);line-height:1.7}

@media print{
  body{background:#fff}
  .pres-toolbar{display:none}
  .pres-wrap{padding:6px 0}
  /* v223 -- pedido do usuário: a Apresentação ao Cliente deve caber numa
     única folha impressa quando o número de itens permitir -- só continua
     em mais de uma página quando a estimativa realmente tiver muitos itens
     (aí a quebra é natural e esperada, não um problema). O espaçamento
     generoso da tela (pensado para conforto de leitura no monitor) sobra
     demais no papel; aqui reduz-se margens/paddings de cada bloco e evita
     que uma tabela de item seja cortada no meio entre duas páginas. */
  .po-ph-box{padding:12px 16px 10px;margin-bottom:8px}
  .po-ph-title{margin-bottom:4px}
  .po-ph-top{margin-bottom:8px;padding-bottom:8px}
  .po-ph-chip{padding:6px 10px}
  .pres-op-summary{margin:0 0 8px;gap:8px}
  .pres-op-item{padding:8px 10px}
  .ptab{margin-bottom:6px;page-break-inside:avoid;box-shadow:none}
  .ptab-hdr{padding:6px 14px}
  .ptab thead th{padding:5px 10px}
  .ptab tbody td{padding:6px 10px}
  .pinfo-lbl,.pinfo-val{padding:5px 14px}
  .po-footer{margin-top:10px;padding-top:8px;line-height:1.35}
}

/* v85 — diferenciação visual entre preço apresentado e custo líquido interno */
.pt-estimado{font-family:Arial,Helvetica,sans-serif;font-weight:800;letter-spacing:-.2px}
.pt-liq-cell{background:var(--fundo2);border-left:2px solid var(--linha)}
.pt-liquido{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:600;color:#536171;font-size:14px}
.pt-liq-lbl,.pt-liq-head{color:#657181!important;font-style:italic}

/* v86 — resumo tributário da apresentação comercial */
.pres-op-summary{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0 0 20px}
.pres-op-item{background:var(--card);border:1px solid var(--borda);border-radius:12px;padding:14px 16px;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.pres-op-label{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:var(--texto3);margin-bottom:5px}
.pres-op-value{font-size:17px;font-weight:800;color:var(--texto)}
.pres-icms-normal{border-left:4px solid var(--azul)}
.pres-op-note{font-size:10px;color:var(--texto3);margin-top:5px;line-height:1.35}
.pinfo-icms-alert{background:#fff8ed!important;border-left:4px solid #d98200}
.pinfo-icms-alert .pinfo-val{color:#a85e00!important;font-size:14px}
@media(max-width:760px){.pres-op-summary{grid-template-columns:1fr}.pinfo-row{grid-template-columns:1fr}.pinfo-lbl{border-right:none;border-bottom:1px solid var(--linha)}}
@media(max-width:760px){
  .pres-toolbar{padding:10px 14px;flex-wrap:wrap;gap:8px}
  .pres-toolbar-actions{flex-wrap:wrap;justify-content:flex-end;width:100%;gap:8px}
  .pres-toolbar-email{display:none}
  .pres-cost-toggle{flex:1 1 100%;order:1}
  .pres-toolbar .btn-icone-mobile{padding:9px 12px;font-size:16px;line-height:1;min-width:40px;
    display:flex;align-items:center;justify-content:center}
  .pres-toolbar .btn-icone-mobile .btn-label{display:none}
  .pres-wrap{padding:16px 12px 40px}
  .po-ph-box{padding:16px 16px 14px}
  .ptab-hdr{padding:10px 14px}
  .ptab thead th{padding:8px 8px}
  .ptab tbody td{padding:12px 8px}
  .pinfo-lbl,.pinfo-val{padding:9px 14px}
}
@media print{.pres-toolbar{display:none!important}.pres-op-summary{grid-template-columns:1fr 1fr}}

/* v91 — fluxo cronológico da importação */
.proc-steps{display:grid;grid-template-columns:repeat(7,minmax(105px,1fr));gap:6px;margin:12px 0 8px}
.proc-step{position:relative;display:flex;align-items:center;gap:8px;min-height:52px;padding:8px 10px;border:1px solid var(--borda);border-radius:11px;background:var(--card);color:var(--texto2);font-size:12px;font-weight:650}
.proc-step:hover{text-decoration:none;border-color:#a8c7e8;color:var(--azul)}
.proc-step.active{background:#edf6ff;border-color:var(--azul);color:var(--azul);box-shadow:0 1px 4px rgba(0,113,227,.12)}
.proc-step-num{display:flex;align-items:center;justify-content:center;flex:0 0 25px;height:25px;border-radius:50%;background:var(--linha);color:var(--texto2);font-size:11px;font-weight:800}
.proc-step.active .proc-step-num{background:var(--azul);color:#fff}
.proc-step-label{line-height:1.15}
.process-overview{display:grid;grid-template-columns:minmax(230px,.8fr) minmax(320px,1.2fr);gap:12px;margin:14px 0}
.process-overview-stage,.process-overview-pending{background:var(--card);border:1px solid var(--borda);border-radius:12px;padding:15px 17px}
.process-overview-stage{border-left:4px solid var(--azul)}
.process-overview-kicker{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.7px;color:var(--texto3);margin-bottom:5px}
.process-overview-title{font-size:21px;font-weight:750;color:var(--texto);line-height:1.1}
.process-overview-status{font-size:12px;color:var(--texto2);margin-top:6px}
.process-pending-item{font-size:12.5px;color:var(--texto2);padding:3px 0}
.process-pending-ok{font-size:12.5px;color:var(--verde);font-weight:650;padding-top:3px}
@media(max-width:1050px){.proc-steps{grid-template-columns:repeat(4,1fr)}}
@media(max-width:720px){.proc-steps{grid-template-columns:repeat(2,1fr)}.process-overview{grid-template-columns:1fr}}

/* v91 — painel operacional inteligente */
.table-scroll{overflow-x:auto}
.painel-operacional{min-width:1050px}
.painel-operacional td{vertical-align:top}
.painel-operacional .proxima-acao-cell{min-width:300px;max-width:430px}
.painel-operacional .proxima-acao-cell strong{display:block;font-size:12.5px;line-height:1.35;color:var(--texto)}
.painel-operacional .proxima-acao-cell small{display:block;margin-top:3px;line-height:1.35;color:var(--texto2)}
.etapa-chip{display:inline-block;padding:4px 8px;border-radius:999px;font-size:10.5px;font-weight:700;background:#edf2f7;color:var(--texto2);white-space:nowrap}
.etapa-estimativa{background:#eef1f5}
.etapa-contratacao{background:#e9f1fb;color:#235f9c}
.etapa-producao{background:#eef5e9;color:#497333}
.etapa-embarque{background:#e8f5f4;color:#27736d}
.etapa-nacionalizacao{background:#fff3dc;color:#996000}
.etapa-entrega{background:#f2ecfa;color:#68499a}
.etapa-fechamento{background:#e8f6ed;color:#277344}
@media(max-width:900px){.painel-operacional-card{padding-left:12px;padding-right:12px}}
/* Campos de cadastro que o sistema sempre grava em maiúsculo (ver maiusculo.js e
   _up()/_upper_campos() em app.py) — o CSS só evita o "flash" de minúsculo entre o
   usuário digitar e o JS reescrever o valor; quem realmente converte é o JS (e o
   servidor, na hora de salvar). */
input.upper, textarea.upper { text-transform: uppercase; }


/* ════════════════════════════════════════════════════════════════
   MODO ESCURO — ativado via <html data-theme="dark"> (ver theme.js no
   header). As cores de marca (azul/verde/vermelho/âmbar/roxo) continuam
   as mesmas — já são saturadas o bastante para funcionar sobre fundo
   escuro, do jeito que o próprio macOS/iOS mantêm as cores de destaque
   no Dark Mode. O que muda é o "papel de fundo" (bg/card/bordas/textos
   neutros) e os preenchimentos pastel (chips, alertas, crédito), que
   ganham uma versão translúcida da mesma cor sobre o cartão escuro. ────*/
[data-theme="dark"]{
  --bg:#0b0b0d; --cinza:#0b0b0d; --card:#1c1c1e; --borda:#2c2c2e;
  --texto:#f5f5f7; --texto2:#a1a1a6; --texto3:#8e8e93;
  --linha:#2c2c2e; --fundo2:#232326; --seg-bg:#232326;
  --btn-bg:#2c2c2e; --btn-bg-hover:#38383c; --icone3:#5a5a5e;

  --dk-verde-bg:rgba(26,158,87,.18); --dk-verde-tx:#5fd189;
  --dk-verm-bg:rgba(192,57,43,.22); --dk-verm-tx:#ff7b6e;
  --dk-amar-bg:rgba(201,117,10,.20); --dk-amar-tx:#f2a53d;
  --dk-azul-bg:rgba(83,194,240,.16);
  --dk-roxo-bg:rgba(122,90,160,.24); --dk-roxo-tx:#c3a6e8;
  --dk-teal-bg:rgba(39,115,109,.26); --dk-teal-tx:#5cc7bf;
}
[data-theme="dark"] body{background:var(--bg)}
[data-theme="dark"] a{color:var(--ciano)}
[data-theme="dark"] .app-header{background:rgba(28,28,30,.86)}
[data-theme="dark"] .pres-toolbar{background:rgba(28,28,30,.9)}

/* Cartões que hoje só se separam do fundo por sombra (quase invisível sobre
   fundo escuro): ganham um contorno fino, igual painéis do macOS no escuro. */
[data-theme="dark"] .card, [data-theme="dark"] .kpi, [data-theme="dark"] .rtab,
[data-theme="dark"] .icard, [data-theme="dark"] .ptab, [data-theme="dark"] .pinfo-box,
[data-theme="dark"] .po-ph-box, [data-theme="dark"] .cmdk-modal{
  border:1px solid var(--borda);box-shadow:none;
}

/* Chips, alertas e linhas de crédito com tonalidade — preenchimento
   translúcido da própria cor semântica sobre o cartão escuro. */
[data-theme="dark"] .doc-chip.ok, [data-theme="dark"] .rs-crd td, [data-theme="dark"] .flash-success,
[data-theme="dark"] .passo-card.ok, [data-theme="dark"] .etapa-producao, [data-theme="dark"] .etapa-fechamento{
  background:var(--dk-verde-bg)!important;color:var(--dk-verde-tx)!important;
}
[data-theme="dark"] .flash-error, [data-theme="dark"] .del-btn:hover{
  background:var(--dk-verm-bg)!important;color:var(--dk-verm-tx)!important;
}
[data-theme="dark"] .doc-chip.falta, [data-theme="dark"] .pinfo-icms-alert,
[data-theme="dark"] .pinfo-icms-alert .pinfo-val,
[data-theme="dark"] .etapa-nacionalizacao{
  background:var(--dk-amar-bg)!important;color:var(--dk-amar-tx)!important;border-color:var(--dk-amar-tx)!important;
}
/* Nota do ICMS na Apresentação ao Cliente (v285): deixou de ser um "alerta" --
   pedido do usuário para ser mais discreto -- por isso não entra mais no
   grupo de destaque amarelo acima. .pres-op-note já usa var(--texto3), que se
   ajusta sozinha ao tema escuro (redefinida no bloco [data-theme="dark"] logo
   acima), então nenhuma regra extra é necessária aqui. */
[data-theme="dark"] .doc-chip.pend, [data-theme="dark"] .add-item-btn, [data-theme="dark"] .add-item-btn:hover,
[data-theme="dark"] .passo-card, [data-theme="dark"] .proc-step.active, [data-theme="dark"] .etapa-contratacao,
[data-theme="dark"] .etapa-estimativa, [data-theme="dark"] .etapa-chip{
  background:var(--dk-azul-bg)!important;
}
[data-theme="dark"] .doc-chip.pend, [data-theme="dark"] .etapa-contratacao, [data-theme="dark"] .add-item-btn,
[data-theme="dark"] .proc-tabs a.active, [data-theme="dark"] .proc-step.active{
  color:var(--ciano)!important;
}
[data-theme="dark"] .add-item-btn{border-color:var(--ciano)!important}
[data-theme="dark"] .proc-step:hover{border-color:var(--ciano)}
[data-theme="dark"] .etapa-entrega{background:var(--dk-roxo-bg)!important;color:var(--dk-roxo-tx)!important}
[data-theme="dark"] .etapa-embarque{background:var(--dk-teal-bg)!important;color:var(--dk-teal-tx)!important}
[data-theme="dark"] .pt-liquido, [data-theme="dark"] .pt-liq-lbl, [data-theme="dark"] .pt-liq-head{color:#9099a3!important}

/* v266 -- Botão de alternar tema (theme.js) removido a pedido do usuário. */


/* ── Command Palette (⌘K) — busca rápida estilo Spotlight ────────────────── */
.cmdk-trigger{display:flex;align-items:center;gap:5px;padding:6px 10px;border:1px solid var(--borda);
  border-radius:8px;background:var(--fundo2);color:var(--texto3);font-size:11px;font-weight:600;
  cursor:pointer;transition:all .15s;font-family:inherit}
.cmdk-trigger:hover{background:var(--btn-bg);color:var(--texto2)}
.cmdk-trigger kbd{background:var(--card);border:1px solid var(--borda);border-radius:4px;
  padding:1px 5px;font-size:10px;font-family:inherit;color:var(--texto3)}

.cmdk-backdrop{position:fixed;inset:0;background:rgba(20,20,24,.35);backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);z-index:200;display:flex;align-items:flex-start;
  justify-content:center;padding-top:12vh;animation:cmdk-fade .12s ease-out}
@keyframes cmdk-fade{from{opacity:0}to{opacity:1}}
.cmdk-modal{width:100%;max-width:560px;max-height:64vh;background:var(--card);border-radius:16px;
  box-shadow:0 20px 60px rgba(0,0,0,.28),0 2px 10px rgba(0,0,0,.12);overflow:hidden;
  display:flex;flex-direction:column;animation:cmdk-pop .14s cubic-bezier(.2,.9,.3,1)}
@keyframes cmdk-pop{from{transform:translateY(-8px) scale(.98);opacity:0}to{transform:none;opacity:1}}
.cmdk-input-row{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--borda)}
.cmdk-input-row span{font-size:15px;color:var(--texto3)}
.cmdk-input-row input{flex:1;border:none;outline:none;background:transparent;font-size:15px;
  color:var(--texto);font-family:inherit}
.cmdk-input-row input::placeholder{color:var(--texto3)}
.cmdk-esc{font-size:10px;color:var(--texto3);border:1px solid var(--borda);border-radius:5px;padding:2px 6px}
.cmdk-results{overflow-y:auto;padding:6px}
.cmdk-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;cursor:pointer}
.cmdk-item.sel{background:var(--dk-azul-bg,#eef6fb)}
.cmdk-item-ic{font-size:16px;flex:0 0 auto;width:22px;text-align:center}
.cmdk-item-body{flex:1;min-width:0}
.cmdk-item-title{font-size:13px;font-weight:600;color:var(--texto);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmdk-item-sub{font-size:11px;color:var(--texto3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmdk-item-tipo{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--texto3);flex:0 0 auto}
.cmdk-empty{padding:28px 18px;text-align:center;color:var(--texto3);font-size:12.5px}
.cmdk-footer{border-top:1px solid var(--borda);padding:9px 16px;display:flex;justify-content:space-between;
  align-items:center;font-size:10.5px;color:var(--texto3)}
.cmdk-footer a{color:var(--azul);font-weight:600}
[data-theme="dark"] .cmdk-footer a{color:var(--ciano)}


/* ── Toasts (avisos de sucesso/erro) — substituem o antigo banner fixo no
   topo da página; aparecem no canto, empilham e somem sozinhos. ──────────── */
.toast-root{position:fixed;top:18px;right:18px;z-index:300;display:flex;
  flex-direction:column;gap:10px;max-width:360px;pointer-events:none}
.toast{pointer-events:auto;background:var(--card);color:var(--texto);border-radius:13px;
  padding:13px 16px;box-shadow:0 10px 30px rgba(0,0,0,.16),0 2px 8px rgba(0,0,0,.08);
  display:flex;align-items:flex-start;gap:10px;border-left:4px solid var(--azul);
  animation:toast-in .22s cubic-bezier(.2,.9,.3,1)}
.toast.leaving{animation:toast-out .16s ease-in forwards}
.toast.success{border-left-color:var(--verde)}
.toast.error{border-left-color:var(--verm)}
.toast-ic{font-size:15px;flex:0 0 auto;line-height:1.3}
.toast-msg{flex:1;font-size:12.5px;line-height:1.45;font-weight:500}
.toast-close{background:none;border:none;color:var(--texto3);font-size:15px;cursor:pointer;
  line-height:1;padding:0;flex:0 0 auto}
.toast-close:hover{color:var(--texto)}
@keyframes toast-in{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
@keyframes toast-out{from{transform:none;opacity:1}to{transform:translateX(24px);opacity:0}}
@media (max-width:600px){.toast-root{left:12px;right:12px;top:12px;max-width:none}}


/* ── Ícones (sprite SVG no início do <body>, ver base.html) — traço fino em
   toda a navegação/header, no lugar dos emoji soltos que existiam ali. ──── */
.icon{width:15px;height:15px;flex:0 0 auto;stroke:currentColor;fill:none;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px}
.cmdk-trigger .icon{width:13px;height:13px}


/* ── Central de Notificações (sino no header) ──────────────────────────── */
/* position:fixed (em vez de absolute ancorado no botão): o cabeçalho tem
   flex-wrap e, em telas menores, o grupo do usuário pode quebrar pra uma
   linha própria — como um único item sobrando naquela linha, o
   justify-content:space-between o empurra pra ESQUERDA da tela. Se o menu
   dependesse dessa posição (o antigo position:absolute;right:0 ancorado no
   botão), a nuvem nascia deslocada e cortada fora da tela. Com fixed, o
   notifications.js calcula a posição pelo retângulo real do sino
   (getBoundingClientRect) toda vez que abre, e sempre cabe na tela. */
.notif-dropdown{position:fixed;width:340px;max-width:calc(100vw - 24px);max-height:60vh;
  overflow-y:auto;background:var(--card);border-radius:14px;
  box-shadow:0 14px 40px rgba(0,0,0,.18),0 2px 8px rgba(0,0,0,.08);z-index:250;padding:6px;
  animation:cmdk-pop .14s cubic-bezier(.2,.9,.3,1)}
[data-theme="dark"] .notif-dropdown{border:1px solid var(--borda);box-shadow:none}
.notif-hdr{padding:10px 12px 8px;font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.6px;color:var(--texto3)}
.notif-item{display:block;padding:10px 12px;border-radius:10px;text-decoration:none}
.notif-item:hover{background:var(--fundo2);text-decoration:none}
.notif-item-tipo{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.5px}
.notif-item-tipo.vencido{color:var(--verm)}
.notif-item-tipo.vencendo{color:var(--amar)}
.notif-item-tipo.pendente{color:var(--azul)}
.notif-item-titulo{font-size:12.5px;font-weight:700;color:var(--texto);margin-top:2px}
.notif-item-sub{font-size:11px;color:var(--texto2);margin-top:2px;line-height:1.4}
.notif-empty{padding:26px 16px;text-align:center;color:var(--texto3);font-size:12px}

/* ── Navegação mobile (v153): barra fixa embaixo, substitui o .nav de cima
   em telas estreitas. Escondida por padrão (computador); some o .nav de
   cima e aparece esta a partir de 760px pra baixo. Os 4 itens mais usados
   ficam grandes e fixos (fáceis de tocar com o polegar); o resto (Contábil,
   Cadastros, Relatórios, Administração) fica atrás do botão "Mais", que
   abre uma folha (sheet) com esses itens em linhas grandes. ── */
.mobile-tabbar{display:none}
.mobile-more-sheet{display:none}

@media (max-width:760px){
  .app-header .nav{display:none}
  .wrap{padding-bottom:86px}

  .mobile-tabbar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;
    background:var(--card);border-top:1px solid var(--borda);
    padding:4px 2px calc(4px + env(safe-area-inset-bottom));
    box-shadow:0 -2px 12px rgba(0,0,0,.06);
  }
  .mobile-tabbar a,.mobile-tabbar button{
    flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
    padding:8px 2px;color:var(--texto3);background:none;border:none;font-family:inherit;
    font-size:10px;font-weight:600;text-decoration:none;min-height:52px;justify-content:center;
  }
  .mobile-tabbar .icon{width:22px;height:22px}
  .mobile-tabbar a>span:first-child,.mobile-tabbar button>span:first-child{font-size:20px;line-height:1}
  .mobile-tabbar a.active,.mobile-tabbar button.active{color:var(--azul)}
  .mobile-tabbar a:hover,.mobile-tabbar button:hover{text-decoration:none;color:var(--azul)}

  .mobile-more-sheet[hidden]{display:none}
  .mobile-more-sheet:not([hidden]){display:block;position:fixed;inset:0;z-index:40}
  .mobile-more-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.35)}
  .mobile-more-panel{
    position:absolute;left:0;right:0;bottom:0;background:var(--card);
    border-radius:18px 18px 0 0;padding:8px 8px calc(10px + env(safe-area-inset-bottom));
    box-shadow:0 -8px 30px rgba(0,0,0,.2);
  }
  .mobile-more-handle{width:36px;height:4px;border-radius:99px;background:var(--borda);margin:6px auto 10px}
  .mobile-more-panel a{
    display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:12px;
    color:var(--texto);font-size:14.5px;font-weight:600;text-decoration:none;
  }
  .mobile-more-panel a:hover{background:var(--fundo2);text-decoration:none}
  .mobile-more-panel .icon{width:20px;height:20px;color:var(--texto2)}
}

[data-theme="dark"] .mobile-tabbar{box-shadow:none;border-top:1px solid var(--borda)}

/* ── v170: Estimativa em blocos recolhíveis + resumo financeiro fixo ──
   Pedido do usuário: reduzir a sensação de complexidade da tela de Estimativa
   sem tirar nenhum campo nem alterar fórmula alguma -- só reorganizar em
   níveis. Seções de baixa frequência (prestadores, alíquotas avançadas,
   despesas detalhadas) entram num <details> nativo do HTML (sem JS extra,
   sem risco de esconder valor de campo -- <details> fechado continua no DOM,
   só oculto visualmente; o valor do input é lido normalmente pelo onCalc()). */
details.collapsible-group{margin-bottom:16px}
details.collapsible-group > summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:9px;
  padding:13px 16px;background:var(--card);border:1px solid var(--borda);border-radius:12px;
  font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--texto2);
  user-select:none;
}
details.collapsible-group > summary:hover{color:var(--texto)}
details.collapsible-group > summary::-webkit-details-marker{display:none}
details.collapsible-group > summary::marker{content:''}
details.collapsible-group > summary .cg-chevron{
  display:inline-block;transition:transform .15s;color:var(--texto3);font-size:12px;
}
details.collapsible-group[open] > summary .cg-chevron{transform:rotate(90deg)}
details.collapsible-group[open] > summary{border-radius:12px 12px 0 0}
details.collapsible-group > summary .cg-hint{
  font-weight:600;text-transform:none;letter-spacing:0;color:var(--texto3);font-size:10.5px;margin-left:auto;
}
details.collapsible-group > .collapsible-body{
  border:1px solid var(--borda);border-top:none;border-radius:0 0 12px 12px;padding:14px 14px 2px;
  background:var(--fundo2, transparent);
}
details.collapsible-group[open] > .collapsible-body{padding-bottom:2px}
details.collapsible-group > .collapsible-body > .card,
details.collapsible-group > .collapsible-body > .g2{margin-bottom:14px}

/* Resumo financeiro fixo -- fica visível enquanto o usuário rola a tela e
   preenche/ajusta valores, para não precisar rolar até o fim para ver o
   efeito de cada mudança. Nunca é a fonte de verdade (só espelha o que
   calc_engine já calculou) -- a Composição do Custo detalhada continua
   disponível mais abaixo, igual antes. */
.resumo-fixo{
  position:sticky;top:68px;z-index:15;display:flex;gap:14px;flex-wrap:wrap;
  background:var(--card);border:1px solid var(--borda);border-radius:12px;
  padding:11px 18px;margin-bottom:16px;box-shadow:0 3px 14px rgba(0,0,0,.07);
}
.resumo-fixo .rf-item{flex:1;min-width:112px}
.resumo-fixo .rf-lbl{
  font-size:8.5px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;
  color:var(--texto3);margin-bottom:3px;
}
.resumo-fixo .rf-val{font-size:14px;font-weight:800;color:var(--texto);font-family:'Courier New',monospace}
.resumo-fixo .rf-total{border-left:1px solid var(--borda);padding-left:14px}
.resumo-fixo .rf-total .rf-val{color:var(--azul);font-size:16.5px}
@media (max-width:760px){
  .resumo-fixo{position:static;top:auto;gap:10px 16px}
  .resumo-fixo .rf-total{border-left:none;padding-left:0}
}

/* ── v170: menu de ações "⋯" -- agrupa ações administrativas/menos usadas
   (Editar, Duplicar, Separar embarque, Excluir) atrás de um único botão, para
   a linha da lista de Processos/Estimativas não competir com vários ícones
   soltos. Sem framework -- só <details> nativo estilizado como dropdown. ── */
details.kebab-menu{position:relative;display:inline-block}
details.kebab-menu > summary{
  list-style:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:7px;color:var(--texto2);font-weight:800;font-size:15px;
  line-height:1;user-select:none;
}
details.kebab-menu > summary:hover{background:var(--btn-bg)}
/* v192 -- variante com rótulo visível ("⋯ Mais ações"), do tamanho dos outros
   botões da linha -- o "⋯" sozinho (26x26, sem fundo) ficava discreto demais
   num cabeçalho com só 2-3 botões ao lado (diferente da lista de Processos,
   onde cada linha tem um e precisa ficar compacto). */
details.kebab-menu.kebab-menu-btn > summary{
  width:auto;height:auto;padding:9px 17px;border-radius:11px;background:var(--btn-bg);
  font-weight:600;font-size:12px;letter-spacing:0;gap:6px;line-height:normal;
}
details.kebab-menu.kebab-menu-btn > summary:hover{background:var(--btn-bg-hover,var(--btn-bg))}
details.kebab-menu > summary::-webkit-details-marker{display:none}
details.kebab-menu[open] > summary{background:var(--btn-bg-hover,var(--btn-bg))}
details.kebab-menu .kebab-dropdown{
  position:absolute;right:0;top:calc(100% + 4px);min-width:190px;background:var(--card);
  border:1px solid var(--borda);border-radius:10px;box-shadow:0 8px 26px rgba(0,0,0,.16);
  padding:6px;z-index:60;
}
details.kebab-menu .kebab-dropdown a,
details.kebab-menu .kebab-dropdown button{
  display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:8px 10px;
  border-radius:7px;color:var(--texto);font-size:12.5px;font-weight:600;text-decoration:none;
  background:none;border:none;font-family:inherit;cursor:pointer;
}
details.kebab-menu .kebab-dropdown a:hover,
details.kebab-menu .kebab-dropdown button:hover{background:var(--fundo2);text-decoration:none}
details.kebab-menu .kebab-dropdown .del-opt{color:#c0392b}

/* ── v171: modal de cadastro rápido de Cliente direto na Estimativa ──
   Pedido do usuário: não precisar sair da tela de Estimativa para cadastrar um
   cliente novo. Reaproveita a mesma linguagem visual do Command Palette
   (backdrop com blur + card centralizado), só que bem mais simples (2 campos). */
.qa-modal-backdrop{position:fixed;inset:0;background:rgba(20,20,24,.35);backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);z-index:210;display:flex;align-items:center;
  justify-content:center;padding:16px}
.qa-modal{width:100%;max-width:420px;background:var(--card);border-radius:16px;
  box-shadow:0 20px 60px rgba(0,0,0,.28),0 2px 10px rgba(0,0,0,.12);padding:20px 22px}
.qa-modal h3{font-size:15px;font-weight:800;margin:0 0 4px;color:var(--texto)}
.qa-modal p{font-size:11.5px;color:var(--texto3);margin:0 0 14px}
.qa-modal .f{margin-bottom:12px}
.qa-modal-err{font-size:11.5px;color:#b42318;margin:-6px 0 10px;display:none}
.qa-modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:6px}