/* ============================================================
   detalhe.css — a PÁGINA DA VENDA (v0.9.1): 2 colunas no PC, cartões empilhados + barra de ação fixa no celular (abre como folha que sobe, com a haste).
   Cor só por token de tema.css. Movimento só em transform e opacity (a barra de % e a linha do tempo "enchem" com scale); o estado natural é VISÍVEL (animação só "de onde vem").
   ============================================================ */
.det-acoes{display:flex;gap:10px;margin:16px 0 0}
.det-acoes .botao{width:auto;min-width:170px;padding:0 22px}
.botao.det-canc{border-color:var(--problema);color:var(--problema)}
.det-grade{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin-top:16px}
.det-main,.det-lado{display:flex;flex-direction:column;gap:14px;min-width:0}
.det-card h2{font-size:17px;margin-bottom:12px}
.det-card .par b{font-weight:700}

/* carga: tabela */
.dc-l{display:grid;grid-template-columns:minmax(0,1.7fr) 72px 80px 86px 100px 120px;gap:10px;align-items:center;padding:13px 0;border-bottom:1px solid var(--linha);font-size:14px}
.dc-h{padding:0 0 8px;font-size:12px;font-weight:700;color:var(--tinta-2);text-transform:uppercase;letter-spacing:.04em}
.dc-q,.dc-pr,.dc-s{text-align:right}
.dc-cx{color:var(--tinta-2)}.dc-h .dc-cx{color:inherit}
.dc-p{font-weight:700}
.dc-tot{grid-template-columns:minmax(0,1fr) auto;border-bottom:0;border-top:2px solid var(--tinta);margin-top:2px;font-weight:800}
.dc-tot .dc-s{font-size:20px}
.dc-tag{display:inline-block;font-style:normal;font-size:12px;font-weight:700;padding:3px 10px;border-radius:99px;background:var(--card-2);color:var(--tinta-2)}
.dc-tag.t1{background:var(--ok-bg);color:var(--ok-tx)}
.dc-eq{display:block;margin-top:1px;color:var(--tinta-2);font-size:11.5px;font-weight:600}
.dc-tag.t3{background:#F6E7C8;color:#6B4A0E}
.dc-tag.tdoce{background:#E7ECE8;color:#4B5A50}
.dc-pct{margin-top:16px}
.pct-bar{display:flex;gap:2px;height:14px;border-radius:99px;overflow:hidden;background:var(--linha)}
.pct-bar i{display:block;height:100%;transform-origin:left;animation:det-enche .8s .3s var(--curva-entrada) backwards}
.pct-bar .s1{background:var(--verde-acao)}.pct-bar .s2{background:var(--pn-bruto)}
.dc-meta{display:flex;flex-wrap:wrap;gap:4px 8px;margin-top:10px;font-size:13px;color:var(--tinta-2)}
.dc-meta b{color:var(--tinta)}.pt-m{color:var(--cinza-2)}
@keyframes det-enche{from{transform:scaleX(0)}}

/* pagamento: linha do tempo das parcelas */
.dp-forma{margin:-6px 0 10px;color:var(--tinta-2);font-size:14px}
.tl{list-style:none;margin:6px 0 0;padding:0}
.tl-p{position:relative;display:grid;grid-template-columns:22px minmax(0,1fr) auto auto;gap:0 12px;align-items:center;padding:12px 0}
.tl-p::before{content:"";position:absolute;left:10px;top:0;bottom:0;width:2px;background:var(--linha);transform-origin:top;animation:det-linha .5s var(--curva-entrada) backwards}
.tl-p:first-child::before{top:50%}.tl-p:last-child::before{bottom:50%}.tl-p:only-child::before{display:none}
.tl-p:nth-child(2)::before{animation-delay:.15s}.tl-p:nth-child(3)::before{animation-delay:.3s}.tl-p:nth-child(4)::before{animation-delay:.45s}
.tl-dot{position:relative;z-index:1;width:16px;height:16px;margin-left:3px;border-radius:50%;border:2px solid var(--cinza-2);background:var(--card)}
.tl-p.ok .tl-dot{background:var(--ok);border-color:var(--ok)}
.tl-p.vencida .tl-dot{background:var(--atencao);border-color:var(--atencao)}
.tl-p.est .tl-dot{background:var(--cinza-2)}
.tl-t b{display:block;font-size:14.5px}
.tl-t span{font-size:12.5px;color:var(--tinta-2)}
.tl-p.vencida .tl-t span{color:var(--atencao-tx);font-weight:700}
.tl-v{font-size:16px;white-space:nowrap}
@keyframes det-linha{from{transform:scaleY(0)}}
.dp-soma{display:flex;justify-content:space-between;align-items:baseline;margin-top:6px;padding-top:12px;border-top:1px dashed var(--linha);font-size:14px;font-weight:700}
.eq{display:flex;align-items:center;gap:10px;margin-top:16px;padding:14px;border-radius:var(--r-m);background:var(--card-2)}
.eq>div{flex:1;min-width:0}.eq small{display:block;font-size:12px;color:var(--tinta-2);font-weight:600}.eq b{font-size:16px;white-space:nowrap}
.eq>i{font-style:normal;font-weight:800;color:var(--cinza)}
.eq .liq b{color:var(--ok-tx)}
.dp-nota{margin-top:10px}
.pilula-av{display:inline-block;padding:2px 10px;border-radius:99px;background:var(--atencao-bg);color:var(--atencao-tx);font-weight:700;font-size:12px}

/* cartões da direita */
.dc-nome{font-family:var(--fonte-titulo);font-weight:800;font-size:17px;margin:-4px 0 6px}
.det-link{display:block;min-height:44px;margin-top:6px;padding:0;border:0;background:none;color:var(--verde-acao);font-weight:700;font-size:14px;text-align:left;cursor:pointer}
.det-chave summary{min-height:44px;display:flex;align-items:center;color:var(--verde-acao);font-weight:700;font-size:14px;cursor:pointer}
.det-card .par small{font-weight:500;color:var(--tinta-2)}

/* celular: cartões empilhados, barra de ação fixa, folha que sobe com a haste */
.det-barra{display:none}
@media (max-width:1023px){
  .det-acoes{display:none}
  .det{padding-bottom:calc(176px + env(safe-area-inset-bottom))}
  .det-grade{margin:-24px 16px 0;position:relative;z-index:2;animation:det-sobe .45s var(--curva-entrada) backwards}
  .det-barra{display:flex;gap:10px;position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:45;padding:10px;border-radius:20px;background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);border:1px solid rgba(255,255,255,.7);box-shadow:0 8px 28px rgba(5,39,14,.22)}
  /* 2 fileiras: a ação principal em cima (largura inteira); as outras lado a lado embaixo. Todas ≥ 44 px, nenhuma palavra partida */
  .det-barra{flex-wrap:wrap;box-sizing:border-box;width:auto}
  .det-barra .botao{flex:1 1 0;min-width:0;min-height:48px;padding:0 4px;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:clip}
  .det-barra .botao.det-canc{flex-grow:1.35}
  .det-barra .botao.escuro{order:-1;flex:1 1 100%;font-size:15px}
  .det-barra .botao.ec-prim{order:-2}      /* "Enviar ao comprador": a 1ª fileira da barra */
  .det:has(.det-barra .ec-prim){padding-bottom:calc(236px + env(safe-area-inset-bottom))}
  html[data-tela="nota"] #nav,html[data-tela="nota"] .fab{display:none}
  .dc-l{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding:12px 0}
  .dc-h{display:none}
  .dc-p{flex:1 1 calc(100% - 140px);min-width:0}
  .dc-s{order:1;margin-left:auto}
  .dc-pr::before{content:"× "}
  .dc-cx{order:0}
  .dc-tot{flex-wrap:nowrap;justify-content:space-between}
  .tl-p{grid-template-columns:22px minmax(0,1fr) auto}
  .tl-p .botao{grid-column:2/-1;justify-self:start;margin-top:8px}
  .eq{gap:6px;padding:12px 10px}
  .eq b{font-size:13px}
  .eq small{font-size:11px}
}
@keyframes det-sobe{from{opacity:0;transform:translateY(36px)}}
@media (min-width:1024px){
  .det-grade{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:20px;align-items:start}
  .det-lado{position:sticky;top:calc(var(--h-proto) + var(--h-topo) + 16px)}
}

/* ===== pós-venda (v0.10): Ocorrências na página da venda, faixa do contador e a folha de ocorrência ===== */
.pilula-ok{display:inline-block;padding:2px 10px;border-radius:99px;background:var(--ok-bg);color:var(--ok-tx);font-weight:700;font-size:12px}
.pill-n{display:inline-block;padding:2px 10px;border-radius:99px;background:var(--info-bg);color:var(--info-tx);font-weight:700;font-size:12px}
.oc-link{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;border:0;background:none;color:var(--verde-acao);font-weight:700;font-size:13.5px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.oc-link.ruim{color:var(--problema-tx)}
.det-oc .linha-titulo{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.det-oc .linha-titulo h2{margin:0}
.oc-lista{list-style:none;margin:0;padding:0}
.oc-lin{padding:12px 0;border-bottom:1px solid var(--linha)}
.oc-lin:last-child{border-bottom:0}
.oc-l1{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:15px}
.oc-l1 .num{font-weight:800;white-space:nowrap}
.oc-l2{margin-top:2px;font-size:13px;color:var(--tinta-2);line-height:1.4}
.oc-l3{display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px;margin-top:4px}
.oc-lin.desfeita .oc-l1 b,.oc-lin.desfeita .oc-l1 .num,.oc-lin.desfeita .oc-l2{text-decoration:line-through;color:var(--cinza)}
.oc-faixa{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin:16px 0 0;padding:14px 16px;border-radius:var(--r-m);background:var(--card);border:1px solid var(--linha);box-shadow:var(--sombra-leve)}
.oc-faixa.atencao{background:var(--atencao-bg);border-color:#EBCB8A}
.oc-faixa b{display:block;font-size:15px}
.oc-faixa span{display:block;font-size:13px;color:var(--tinta-2);margin-top:2px;max-width:60ch}
.oc-faixa.atencao span{color:var(--atencao-tx)}
.oc-fx-bt{display:flex;flex-wrap:wrap;gap:8px}
.oc-fx-bt .botao{min-height:44px;width:auto;padding:0 18px}
@media (max-width:1023px){.oc-faixa{margin:10px 16px 0;position:relative;z-index:3}.oc-fx-bt{width:100%}.oc-fx-bt .botao{flex:1}}
/* a folha */
.oc-tipos{display:flex;flex-wrap:wrap;gap:8px}
.oc-tch{min-height:44px;padding:0 15px;border-radius:99px;border:1px solid var(--linha);background:var(--card);color:var(--tinta-2);font:700 14px var(--fonte-texto);cursor:pointer}
.oc-tch.on{background:var(--marca);border-color:var(--marca);color:#fff}
.oc-tch.ruim:not(.on){color:var(--problema-tx)}
.oc-tch.off{opacity:.45}
.oc-frase{font-size:13.5px;color:var(--tinta-2);margin:12px 2px 6px}
.oc-corpo{margin-top:4px}
.oc-dica{margin:6px 0 4px}
.oc-kgs{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:8px}
.oc-kg{display:flex;flex-direction:column;gap:3px}
.oc-kg span{font-size:12px;font-weight:700;color:var(--tinta-2)}
.oc-kg small{font-size:12px;color:var(--tinta-2)}
.oc-sug{min-height:20px;margin:6px 0 0;font-size:13px;color:var(--tinta-2)}
.oc-fato{display:flex;justify-content:space-between;align-items:baseline;padding:12px 14px;border-radius:12px;background:var(--card-2);font-weight:700}
.oc-fato b{font-size:19px}
.oc-janela{border-radius:12px;padding:12px 14px;margin:10px 0 12px;display:flex;flex-direction:column;gap:3px;font-size:13.5px}
.oc-janela b{font-family:var(--fonte-titulo);font-size:15px}
.oc-janela.ok{background:var(--ok-bg);color:#0A4A1D}
.oc-janela.aviso{background:var(--atencao-bg);color:#5E3C00}
.oc-janela.fim{background:var(--problema-bg);color:var(--problema-tx)}
.oc-janela .oc-link{min-height:0;padding:0}
.oc-muda{background:var(--ok-bg);border-radius:12px;padding:12px 14px;margin:14px 0 6px}
.oc-muda h5{margin:0 0 6px;font:800 12px var(--fonte-titulo);letter-spacing:.05em;text-transform:uppercase;color:var(--marca)}
.oc-muda ul{margin:0 0 8px;padding-left:18px;font-size:13.5px}
.oc-muda li{margin:3px 0}
.oc-form .acoes .botao[disabled]{opacity:.5}

/* faixa do estado no DANFE e no pedido (cancelada, recusada, cancelamento pedido) */
.danfe .faixa-estado{margin:0 -10mm 3mm;padding:2.4mm 4mm;background:#B42318;color:#fff;font:800 11pt Arial,Helvetica,sans-serif;letter-spacing:.12em;text-align:center;text-transform:uppercase}