/* DK Pneus · painel do dono (prefixo pn-). A estrutura (.pn, .pn-lado, .pn-topo, .pn-conteudo) vem de app.css;
   aqui ficam os complementos e as telas: entrar, visão geral, produtos, cadastro, pedidos, serviços e ajustes. */

/* =====================================================================
   estrutura: complementos
   ===================================================================== */
.pn-topo { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
.pn-topo h1 { letter-spacing: -.3px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pn-topo-acoes .btn { gap: 7px; }
.pn-lado { overflow-y: auto; }
.pn-nav-i { transition: background .15s, color .15s; }
.pn-conteudo { width: 100%; max-width: 1480px; }

.pn-card { background: #fff; border: 1px solid #E6E8EE; border-radius: 14px; box-shadow: 0 1px 2px rgba(0, 2, 14, .03); }
.pn-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.pn-muted { font-size: 14px; color: var(--suave); }
.pn-txt-ok { color: var(--ok); }
.pn-txt-alerta { color: var(--alerta); }
.pn-txt-falta { color: var(--falta); font-weight: 600; }
.pn-rot { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--suave); }
.pn-rot-m { display: none; }
.pn-intro { max-width: 760px; margin-bottom: 18px; font-size: 15px; color: var(--texto); }
.pn-intro b { color: var(--tinta); }

.pn-voltar { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px; font-size: 14px; font-weight: 600; color: var(--suave); transition: color .15s; }
.pn-voltar:hover { color: var(--azul); }
.pn-voltar .ic { transition: transform .15s; }
.pn-voltar:hover .ic { transform: translateX(-2px); }

.pn-btn-perigo { background: var(--falta); color: #fff; }
.pn-btn-perigo:hover { background: #A50D26; }
.btn-link.pn-link-perigo { color: var(--falta); }
.pn-btn-excluir:hover { color: var(--falta); box-shadow: inset 0 0 0 1.5px #F2B8C2; }
.pn-ic-btn { width: 38px; height: 38px; display: inline-grid; place-items: center; border-radius: 10px; color: var(--suave); transition: background .15s, color .15s; }
.pn-ic-btn:hover { background: var(--azul-claro); color: var(--azul); }
.pn-check { width: 18px; height: 18px; margin: 0; accent-color: var(--azul); cursor: pointer; vertical-align: middle; }

/* fotos pequenas */
.pn-foto { width: 52px; height: 52px; flex: none; display: grid; place-items: center; overflow: hidden; border-radius: 10px; border: 1px solid var(--linha); background: #fff; color: #B6BCC9; }
.pn-foto img { width: 100%; height: 100%; object-fit: contain; padding: 3px; mix-blend-mode: multiply; }
.pn-foto--sm { width: 44px; height: 44px; }

/* − número + compacto */
.qtd.pn-qtd { height: 38px; border-radius: 9px; transition: border-color .15s, box-shadow .15s; }
.qtd.pn-qtd button { width: 34px; color: var(--texto); transition: background .15s, color .15s; }
.qtd.pn-qtd button:hover { background: var(--azul-claro); color: var(--azul); }
.qtd.pn-qtd input { width: 44px; font-size: 15px; font-variant-numeric: tabular-nums; }
.qtd.pn-qtd:focus-within, .qtd.pn-qtd-form:focus-within { border-color: var(--azul); box-shadow: 0 0 0 3px rgba(4, 70, 230, .12); }
.qtd.pn-qtd-form { height: 48px; }
.qtd.pn-qtd-form button { width: 44px; }
.qtd.pn-qtd-form button:hover { color: var(--azul); }
.campo .qtd.pn-qtd-form input[type=number] { width: 64px; height: 100%; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; text-align: center; font: 700 16px var(--fonte); font-variant-numeric: tabular-nums; }
.campo .qtd.pn-qtd-form input[type=number]:focus { box-shadow: none; }
.campo .qtd.pn-qtd-form { align-self: flex-start; }

/* campos com R$, %, @ */
.pn-dinheiro, .pn-sufixo, .pn-prefixo, .pn-senha { position: relative; display: block; }
.pn-dinheiro > span, .pn-prefixo > span { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 15px; font-weight: 600; color: var(--suave); pointer-events: none; }
.pn-dinheiro > input { padding-left: 42px !important; font-variant-numeric: tabular-nums; }
.pn-prefixo > input { padding-left: 50px !important; }
.pn-sufixo > span { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-weight: 600; color: var(--suave); pointer-events: none; }
.pn-sufixo > input { padding-right: 46px !important; }
.pn-dinheiro--sm { width: 136px; }
.pn-dinheiro--sm > span { left: 11px; font-size: 13.5px; }
.pn-dinheiro--sm > input { height: 38px; padding-left: 34px !important; padding-right: 10px; border-radius: 9px; font-size: 15px; font-weight: 600; text-align: right; }
.pn-dinheiro--sm > input:disabled { background: var(--fundo); color: var(--suave); font-weight: 500; cursor: not-allowed; }
.pn-dinheiro--sm > input:disabled::placeholder { color: var(--suave); }

/* confirmação discreta de "salvo" */
@keyframes pnSalvo {
  0%, 35% { border-color: var(--ok); box-shadow: 0 0 0 3px rgba(27, 138, 75, .16); }
  100% { }
}
.pn-salvo > input, .pn-card.pn-salvo { animation: pnSalvo 1.2s ease-out; }

/* item "Ao vivo" do menu lateral */
.pn-nav-i small { margin-left: 2px; font-size: 12.5px; font-weight: 500; color: #7F8AB0; transition: color .15s; }
.pn-nav-i:hover small, .pn-nav-i.ativo small { color: #AFC2FF; }

/* =====================================================================
   microinterações: salvo (check), linha que acende, selo que troca, número que muda
   ===================================================================== */
.pn-ancora { position: relative; display: inline-flex; vertical-align: middle; }
.pn-ok { position: absolute; z-index: 3; top: -7px; right: -7px; width: 19px; height: 19px; display: grid; place-items: center; border-radius: 50%; background: var(--ok); color: #fff; box-shadow: 0 0 0 2px #fff, 0 4px 10px -4px rgba(27, 138, 75, .6); pointer-events: none; animation: pnOk 1.5s var(--ease) both; }
.pn-ok svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.pn-ok path { stroke-dasharray: 18; stroke-dashoffset: 18; animation: dk-traco .3s var(--ease) .12s forwards; }
@keyframes pnOk {
  0% { opacity: 0; transform: scale(.4); }
  14% { opacity: 1; transform: scale(1.08); }
  24%, 78% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(.86); }
}

/* a linha salva acende em verde e apaga (camada por baixo do conteúdo, só opacidade) */
.pn-at, .pn-av-i { isolation: isolate; }
.pn-at::after, .pn-av-i::after { content: ""; position: absolute; z-index: -1; pointer-events: none; background: rgba(27, 138, 75, .1); opacity: 0; }
.pn-at::after { inset: 3px -10px; border-radius: 10px; }
.pn-av-i::after { inset: 0; }
.pn-flash::after { animation: pnFlash 1.3s var(--ease-saida); }
@keyframes pnFlash { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }
.pn-tabela tbody tr.pn-flash > td { animation: pnFlashCel 1.3s var(--ease-saida); }
@keyframes pnFlashCel { 0%, 12% { background-color: rgba(27, 138, 75, .09); } 100% { background-color: rgba(27, 138, 75, 0); } }

/* selo de situação que troca: o novo entra subindo de leve */
@keyframes pnSeloIn { from { opacity: 0; transform: translateY(5px) scale(.94); } to { opacity: 1; transform: none; } }
.pn-selo-troca .selo { animation: pnSeloIn .32s var(--ease) both; }
.pn-selo-troca .selo + .selo { animation-delay: .05s; }

/* cartão de número que acabou de mudar */
.pn-kpi.pn-kpi-mudou { border-color: #B9CBFF; box-shadow: 0 0 0 3px rgba(4, 70, 230, .08); }

@keyframes pnPop { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } }
@keyframes pnEntraEsq { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
@keyframes pnCresce { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* interruptor com texto */
.pn-chave { display: flex; align-items: flex-start; gap: 14px; padding: 10px 0; cursor: pointer; }
.pn-chave .interruptor { margin-top: 1px; }
.pn-chave-txt b { display: block; font-size: 15px; color: var(--tinta); }
.pn-chave-txt small { display: block; margin-top: 1px; font-size: 13.5px; color: var(--suave); }
.pn-chave--mini { align-items: center; gap: 10px; padding: 0; }
.pn-chave--mini .interruptor { margin: 0; }
.pn-chave--mini .pn-chave-txt b { font-size: 13.5px; font-weight: 600; color: var(--texto); }

/* chips (filtros e atalhos) */
.pn-chip { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border: 1px solid var(--linha); border-radius: 9px; background: #fff; font-size: 14px; font-weight: 600; color: var(--texto); white-space: nowrap; transition: border-color .15s, background .15s, color .15s; }
.pn-chip:hover { border-color: #C9CFDB; color: var(--tinta); }
.pn-chip i { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 6px; background: var(--fundo); font-style: normal; font-size: 12px; font-weight: 700; color: var(--suave); font-variant-numeric: tabular-nums; }
.pn-chip.is-on { background: var(--noite); border-color: var(--noite); color: #fff; }
.pn-chip.is-on i { background: rgba(255, 255, 255, .14); color: #fff; }

/* estados vazios */
.pn-vazio { padding: 52px 24px; border: 1px dashed #D6DAE3; border-radius: 14px; background: #fff; text-align: center; }
.pn-vazio-ic { width: 56px; height: 56px; margin: 0 auto 16px; display: grid; place-items: center; border-radius: 14px; background: var(--azul-claro); color: var(--azul); }
.pn-vazio h3 { margin-bottom: 6px; font-size: 21px; }
.pn-vazio p { max-width: 470px; margin: 0 auto; color: var(--suave); }
.pn-vazio-acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; }
.pn-vazio-mini { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px; border-radius: 12px; background: var(--fundo); }
.pn-vazio-mini p { font-size: 14.5px; color: var(--texto); }
.pn-vazio-mini b { color: var(--tinta); }
.pn-ok-linha { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 12px; background: #E7F7EE; color: #155C34; font-size: 14.5px; font-weight: 600; }

/* menu lateral no celular: fundo escuro atrás da gaveta */
@media (max-width: 900px) {
  .pn-menu-aberto .pn-main::after { content: ""; position: fixed; inset: 0; z-index: 65; background: rgba(0, 2, 14, .5); }
}

/* =====================================================================
   #/painel — entrar
   ===================================================================== */
.pn-login { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: 100vh; background: #fff; }
.pn-login-foto { position: relative; overflow: hidden; background: var(--noite); }
.pn-login-foto > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.pn-login-foto::after { content: ""; position: absolute; inset: 0;
  /* 1ª camada: escurece o topo da foto, onde fica o logo branco; 2ª: escurece a base, onde fica o texto */
  background:
    linear-gradient(180deg, rgba(0, 2, 14, .84) 0, rgba(0, 2, 14, .66) 110px, rgba(0, 2, 14, .22) 230px, rgba(0, 2, 14, 0) 300px),
    linear-gradient(180deg, rgba(0, 2, 14, .46) 0%, rgba(0, 2, 14, .3) 38%, rgba(0, 2, 14, .94) 100%); }
.pn-login-marca .logo img { filter: drop-shadow(0 1px 8px rgba(0, 2, 14, .45)); }
.pn-login-marca { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: space-between; gap: 48px; padding: 40px 48px 52px; color: #fff; }
.pn-login-txt { max-width: 460px; }
.pn-login-rot { font-size: 12.5px; font-weight: 700; letter-spacing: 2.2px; text-transform: uppercase; color: #9DB5FF; }
.pn-login-tit { margin: 12px 0; font: 800 42px/1.04 var(--fonte-tit); letter-spacing: -.4px; color: #fff; }
.pn-login-txt p:last-child { font-size: 17px; color: #C9CFDD; }
.pn-login-lado { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 56px 32px; }
.pn-login-form { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 18px; }
.pn-login-form h1 { font-size: 32px; }
.pn-login-sub { margin-top: -10px; color: var(--suave); }
.pn-senha > input { padding-right: 52px !important; }
.pn-senha-ver { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 8px; background: none; color: var(--suave); transition: background .15s, color .15s; }
.pn-senha-ver:hover { background: var(--fundo); color: var(--tinta); }
.pn-login-form .btn-lg { margin-top: 4px; }
.pn-login-form .btn-lg .ic { transition: transform .15s; }
.pn-login-form .btn-lg:hover .ic { transform: translateX(3px); }
.pn-login-demo { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 13.5px; color: var(--suave); }
.pn-login-demo .ic { color: var(--azul); }
.pn-login-voltar { position: absolute; top: 28px; right: 32px; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--suave); transition: color .15s; }
.pn-login-voltar:hover { color: var(--azul); }

/* =====================================================================
   #/painel/inicio — visão geral
   ===================================================================== */
.pn-ola { margin-bottom: 18px; }
.pn-ola h2 { font-size: 28px; }
.pn-ola p { margin-top: 2px; color: var(--suave); }

.pn-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-bottom: 22px; }
.pn-kpi { min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 18px 18px 16px; border: 1px solid #E6E8EE; border-radius: 14px; background: #fff; transition: border-color .15s, box-shadow .2s, transform .2s; }
.pn-kpi:hover { border-color: #CFD5E3; box-shadow: var(--sombra-2); transform: translateY(-1px); }
.pn-kpi-rot { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: var(--texto); }
.pn-kpi-rot::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: #CDD2DD; }
.pn-kpi--azul .pn-kpi-rot::before { background: var(--azul); }
.pn-kpi--falta .pn-kpi-rot::before { background: var(--falta); }
.pn-kpi--ultimas .pn-kpi-rot::before { background: #E0A100; }
.pn-kpi-v { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 700 31px/1.05 var(--fonte-tit); letter-spacing: -.4px; color: var(--tinta); font-variant-numeric: tabular-nums; }
.pn-kpi--falta .pn-kpi-v { color: var(--falta); }
.pn-kpi-sub { font-size: 13px; line-height: 1.35; color: var(--suave); }

.pn-inicio-grade { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.pn-bloco { padding: 20px 22px; }
.pn-bloco-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.pn-bloco-topo h2 { font-size: 19px; }
.pn-bloco-topo p { margin-top: 2px; font-size: 13.5px; color: var(--suave); }
.pn-bloco-pe { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--linha); font-size: 14px; }
.pn-bloco-pe .btn-link .ic { transition: transform .15s; }
.pn-bloco-pe .btn-link:hover .ic { transform: translateX(2px); }

.pn-at { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--linha); }
.pn-at:first-child { padding-top: 0; border-top: 0; }
.pn-at:first-child::after { top: -7px; }
.pn-at-info { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pn-at-info a { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 700; color: var(--tinta); transition: color .15s; }
.pn-at-info a:hover { color: var(--azul); }
.pn-at-l2 { min-width: 0; display: flex; align-items: center; gap: 8px; }
.pn-at-selo { flex: none; display: inline-flex; }
.pn-at-sub { min-width: 0; display: inline-flex; align-items: center; gap: 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12.5px; color: var(--suave); }
.pn-at.is-resolvido .pn-at-sub { font-weight: 600; color: var(--ok); }
.pn-at.is-resolvido .pn-at-sub .ic { stroke-width: 2.6; }
.pn-at-sub-troca { animation: dk-entrar .35s var(--ease) both; }
.pn-at-repor { height: 34px; display: inline-flex; align-items: center; gap: 5px; padding: 0 11px 0 9px; border: 1px solid var(--linha); border-radius: 9px; background: #fff; white-space: nowrap; font-size: 13.5px; font-weight: 700; color: var(--texto); transition: border-color .15s, color .15s, background .15s, transform .1s; }
.pn-at-repor .ic { color: var(--azul); }
.pn-at-repor:hover { border-color: var(--azul); background: var(--azul-claro); color: var(--azul); }
.pn-at-repor:active { transform: scale(.97); }

.pn-ped-lista li + li { border-top: 1px solid var(--linha); }
.pn-ped-i { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto auto; align-items: center; gap: 14px; margin: 0 -8px; padding: 11px 8px; border-radius: 10px; transition: background .12s; }
.pn-ped-i:hover { background: var(--fundo); }
.pn-ped-n { font-weight: 700; color: var(--azul); font-variant-numeric: tabular-nums; }
.pn-ped-cli { min-width: 0; display: flex; flex-direction: column; }
.pn-ped-cli b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--tinta); }
.pn-ped-cli small { font-size: 12.5px; color: var(--suave); }
.pn-ped-total { font-weight: 700; color: var(--tinta); font-variant-numeric: tabular-nums; }

.pn-prog { height: 6px; overflow: hidden; border-radius: 3px; background: #EEF0F4; }
.pn-prog span { display: block; height: 100%; border-radius: 3px; background: var(--azul); transition: width .3s; }
.pn-prog-txt { margin: 8px 0 4px; font-size: 13px; font-weight: 600; color: var(--suave); }
.pn-passo { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--linha); }
.pn-passo:first-child { border-top: 0; }
.pn-passo-ic { width: 22px; height: 22px; display: grid; place-items: center; border: 1.5px dashed #C5CAD4; border-radius: 50%; }
.pn-passo.is-feito .pn-passo-ic { border: 0; background: var(--ok); color: #fff; }
.pn-passo.is-feito .pn-passo-ic .ic { stroke-width: 2.6; }
.pn-passo div { min-width: 0; }
.pn-passo div > b { display: block; font-size: 14.5px; color: var(--tinta); }
.pn-passo div > span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; color: var(--suave); }
.pn-passo .btn-link { font-size: 14px; }
.pn-passo.is-feito .btn-link { font-weight: 600; color: var(--suave); }
.pn-passo.is-feito .btn-link:hover { color: var(--azul); }

.pn-dica { position: relative; overflow: hidden; padding: 22px; border-radius: 14px; background: var(--noite-2); color: #C9CFDD; }
.pn-dica::before { content: ""; position: absolute; inset: 0; background: url(../assets/img/oficina.jpg) center 45% / cover; opacity: .18; }
.pn-dica::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 15, 36, .96) 30%, rgba(10, 15, 36, .55) 100%); }
.pn-dica > * { position: relative; z-index: 1; }
.pn-dica-rot { font-size: 12px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: #8FA9FF; }
.pn-dica p { max-width: 340px; margin: 8px 0 16px; font-size: 16.5px; font-weight: 500; line-height: 1.45; color: #fff; }
.pn-dica .pn-dica-tit { margin: 10px 0 4px; font: 700 22px/1.15 var(--fonte-tit); letter-spacing: -.2px; }
.pn-dica .pn-dica-tit + p { margin-top: 0; font-size: 15px; font-weight: 400; color: #C9CFDD; }
.pn-dica-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.pn-dica-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: #AFC2FF; transition: color .15s; }
.pn-dica-link:hover { color: #fff; }

/* =====================================================================
   #/painel/produtos — lista
   ===================================================================== */
.pn-ferr { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; padding: 14px; }
.pn-ferr-l1 { display: flex; align-items: center; gap: 10px; }
.pn-busca { flex: 1; min-width: 0; height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border: 1px solid var(--linha); border-radius: 10px; background: var(--fundo); color: var(--suave); cursor: text; transition: border-color .15s, box-shadow .15s, background .15s, color .15s; }
.pn-busca:focus-within { border-color: var(--azul); background: #fff; color: var(--azul); box-shadow: 0 0 0 4px rgba(4, 70, 230, .12); }
.pn-busca input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; outline: none; font: 500 15px var(--fonte); color: var(--tinta); }
.pn-busca input::placeholder { color: var(--suave); }
.pn-busca input::-webkit-search-cancel-button { cursor: pointer; }
.pn-ferr-sels { display: flex; gap: 10px; }
.pn-sel { width: auto; min-width: 0; max-width: 230px; height: 44px; font-size: 14.5px; }
.pn-ferr-l2 { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.pn-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pn-ferr-acoes { display: flex; gap: 8px; }

.pn-resumo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 2px 10px; font-size: 14px; color: var(--suave); }
.pn-resumo b { font-weight: 700; color: var(--tinta); }
.pn-resumo .btn-link { font-size: 14px; }
.pn-sel-aviso { margin-bottom: 10px; padding: 10px 14px; border-radius: 10px; background: var(--azul-claro); color: #1d3a8a; font-size: 14px; text-align: center; }
.pn-sel-aviso .btn-link { margin-left: 6px; }

.pn-tab-caixa { overflow-x: auto; }
.pn-tabela { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.pn-tabela th { padding: 11px 12px; border-bottom: 1px solid var(--linha); background: #FAFBFC; text-align: left; white-space: nowrap; font-size: 11.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--suave); }
.pn-tabela td { padding: 10px 12px; border-top: 1px solid #EEF0F4; vertical-align: middle; }
.pn-tabela tbody tr:first-child td { border-top: 0; }
.pn-tabela tbody tr { transition: background .12s; }
.pn-tabela tbody tr:hover { background: #FAFBFD; }
.pn-tabela tbody tr.is-sel { background: #F4F7FF; }
.pn-tabela th:first-child, .pn-tabela td:first-child { padding-left: 18px; }
.pn-tabela th:last-child, .pn-tabela td:last-child { padding-right: 14px; }
.pn-tab-prod .pn-c-sel { width: 46px; }
.pn-tab-prod .pn-c-foto { width: 70px; }
.pn-tab-prod .pn-c-prod { min-width: 230px; }
.pn-tab-prod .pn-c-preco { width: 160px; }
.pn-tab-prod .pn-c-est { width: 140px; }
.pn-tab-prod .pn-c-site { width: 84px; }
.pn-tab-prod .pn-c-sit { width: 160px; }
.pn-tab-prod .pn-c-ed { width: 56px; text-align: right; }
.pn-prod-nome { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 700; line-height: 1.3; color: var(--tinta); transition: color .15s; }
.pn-prod-nome:hover { color: var(--azul); }
.pn-prod-meta { display: block; margin-top: 3px; font-size: 13px; color: var(--suave); }
/* código (SKU) e telefone nunca quebram no meio */
.pn-nw { white-space: nowrap; }
.pn-prod-meta b { font-weight: 600; color: var(--texto); }
.pn-prod-meta i { margin: 0 6px; font-style: normal; color: #C5CAD4; }
.pn-selos { display: inline-flex; flex-wrap: wrap; gap: 4px; }

.pn-pag { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; }
.pn-pag-b { height: 38px; display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; border: 1px solid var(--linha); border-radius: 10px; background: #fff; font-size: 14px; font-weight: 600; color: var(--tinta); transition: border-color .15s; }
.pn-pag-b:hover:not(:disabled) { border-color: #C9CFDB; }
.pn-pag-b:disabled { opacity: .45; cursor: default; }
.pn-pag-nums { display: flex; gap: 4px; }
.pn-pag-n { min-width: 38px; height: 38px; padding: 0 8px; border: 0; border-radius: 10px; background: none; font-size: 14px; font-weight: 600; color: var(--texto); font-variant-numeric: tabular-nums; transition: background .15s; }
.pn-pag-n:hover { background: #fff; }
.pn-pag-n.is-on { background: var(--noite); color: #fff; }
.pn-pag-reti { width: 22px; display: grid; place-items: center; color: var(--suave); }
.pn-pag-m { display: none; font-size: 14px; color: var(--suave); }

/* barra de ações em lote */
.pn-lote { position: fixed; z-index: 30; left: 252px; right: 0; bottom: 20px; display: flex; justify-content: center; padding: 0 24px; pointer-events: none; }
.pn-lote-in { max-width: 100%; display: flex; align-items: center; gap: 6px; padding: 8px 8px 8px 18px; border-radius: 14px; background: var(--noite); color: #fff; box-shadow: 0 22px 44px -18px rgba(0, 2, 14, .65); pointer-events: auto; animation: pnSobe .22s ease-out; }
@keyframes pnSobe { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.pn-lote-n { margin-right: 8px; white-space: nowrap; font-size: 14px; color: #C9CFDD; }
.pn-lote-n b { font-size: 15px; color: #fff; }
.pn-lote-acoes { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.pn-lote-acoes::-webkit-scrollbar { display: none; }
.pn-lote-acoes button { height: 40px; display: inline-flex; align-items: center; gap: 7px; padding: 0 12px; border: 0; border-radius: 10px; background: none; white-space: nowrap; font-size: 14px; font-weight: 600; color: #fff; transition: background .15s; }
.pn-lote-acoes button:hover { background: rgba(255, 255, 255, .09); }
.pn-lote-acoes button .ic { color: #8FA9FF; }
.pn-lote-x { width: 40px; height: 40px; flex: none; display: grid; place-items: center; margin-left: 4px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, .08); color: #fff; transition: background .15s; }
.pn-lote-x:hover { background: rgba(255, 255, 255, .16); }
.pn-com-lote { padding-bottom: 120px; }

/* =====================================================================
   modais do painel
   ===================================================================== */
.pn-modal-sub { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; font-size: 13.5px; color: var(--suave); }
.pn-modal-dica { margin-top: 10px; font-size: 13.5px; color: var(--suave); }
.pn-modal-campos { display: flex; flex-direction: column; gap: 14px; }
.pn-atalhos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -4px; }
.pn-atalho { height: 32px; padding: 0 12px; border: 1px solid var(--linha); border-radius: 8px; background: #fff; font-size: 13.5px; font-weight: 700; color: var(--texto); font-variant-numeric: tabular-nums; transition: border-color .15s, color .15s; }
.pn-atalho:hover { border-color: var(--azul); color: var(--azul); }
.pn-previa-lote { margin-top: 16px; overflow: hidden; border: 1px solid var(--linha); border-radius: 12px; }
.pn-previa-lote-tit { display: block; padding: 8px 14px; border-bottom: 1px solid var(--linha); background: #FAFBFC; font-size: 11.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--suave); }
.pn-previa-lote li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 14px; border-top: 1px solid #F0F1F4; font-size: 14px; }
.pn-previa-lote li:first-child { border-top: 0; }
.pn-previa-lote li > span:first-child { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--tinta); }
.pn-previa-v { white-space: nowrap; color: var(--suave); font-variant-numeric: tabular-nums; }
.pn-previa-v i { margin: 0 2px; font-style: normal; }
.pn-previa-v b { color: var(--azul); }
.pn-previa-lote li.pn-previa-mais { justify-content: center; color: var(--suave); }
.pn-previa-txt { padding: 12px 14px; border-radius: 10px; background: var(--fundo); font-size: 14.5px; }
.pn-previa-txt b { color: var(--tinta); }
.pn-opcoes2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pn-opcao-txt { display: flex; flex-direction: column; gap: 2px; }
.pn-imp { display: flex; flex-direction: column; gap: 8px; }
.pn-imp li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; padding: 10px 14px; border-radius: 10px; background: var(--fundo); font-size: 14.5px; overflow-wrap: anywhere; }
.pn-imp li b { font-size: 16px; color: var(--tinta); }
.pn-imp li span { color: var(--suave); }
.pn-imp li.is-ok { background: #E7F7EE; color: #155C34; }
.pn-imp li.is-ok b, .pn-imp li.is-ok span { color: #155C34; }
.pn-imp li.is-alerta { background: #FFF6DB; color: #6B4A00; }
.pn-imp li.is-alerta b { color: #6B4A00; }
.pn-modal-lista { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 12px; }
.pn-modal-lista li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: baseline; gap: 8px; padding: 9px 12px; border-radius: 10px; background: var(--fundo); font-size: 14px; }
.pn-modal-lista b { color: var(--tinta); }
.pn-modal-lista em { white-space: nowrap; font-style: normal; font-weight: 700; color: var(--tinta); font-variant-numeric: tabular-nums; }
.pn-msg { max-height: 52vh; margin: 0; padding: 14px 16px; overflow: auto; border-radius: 12px; background: #EFEAE2; font: 14px/1.5 var(--fonte); color: #111B21; white-space: pre-wrap; overflow-wrap: anywhere; }

/* =====================================================================
   #/painel/produto/:id — cadastro
   ===================================================================== */
.pn-aviso-topo { margin-bottom: 16px; }
.pn-form-grade { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; }
.pn-form-col { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.pn-sec { padding: 22px 24px 24px; }
.pn-sec-topo { margin-bottom: 16px; }
.pn-sec-topo h2 { font-size: 19px; }
.pn-sec-topo p { margin-top: 3px; font-size: 14px; color: var(--suave); }
.pn-sec-topo p a { font-weight: 600; color: var(--azul); }
.pn-sec-topo p a:hover { text-decoration: underline; text-underline-offset: 2px; }
.campo label em { margin-left: 4px; font-style: normal; font-size: 12.5px; font-weight: 500; color: var(--suave); }

.pn-medida { display: grid; grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1fr) 16px minmax(0, 1fr) minmax(130px, 1.1fr); align-items: start; gap: 0 8px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--linha); }
.pn-medida-sep { height: 48px; margin-top: 26px; display: grid; place-items: center; font: 700 22px var(--fonte-tit); color: #B6BCC9; }
.pn-medida .campo input { text-align: center; font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pn-medida-res { height: 48px; margin: 26px 0 0 8px; display: flex; flex-direction: column; justify-content: center; padding: 0 14px; border-radius: 10px; background: var(--fundo); }
.pn-medida-res span { font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--suave); }
.pn-medida-res b { font: 700 18px/1.15 var(--fonte-tit); color: var(--tinta); font-variant-numeric: tabular-nums; }
.pn-tri { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.pn-sec-topo + .pn-tri, .pn-aj-campos > .pn-tri { margin-top: 0; }
.pn-campo-nome { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--linha); }
.pn-nome-rot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pn-nome-rot label { font-size: 13.5px; font-weight: 600; color: var(--tinta); }
.pn-nome-rot .btn-link { font-size: 13.5px; }
.pn-contador { text-align: right; }

.pn-foto-ed { display: grid; grid-template-columns: 148px minmax(0, 1fr); align-items: start; gap: 20px; }
.pn-foto-box { width: 148px; height: 148px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--linha); border-radius: 12px; background: #fff; }
.pn-foto-box img { width: 100%; height: 100%; object-fit: contain; padding: 8px; mix-blend-mode: multiply; }
.pn-foto-box:has(.pn-foto-vazia) { border-style: dashed; background: var(--fundo); }
.pn-foto-vazia { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #A9B0BE; }
.pn-foto-campos { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.pn-foto-botoes { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.pn-foto-botoes .btn-link { font-size: 14px; }

.pn-chaves { display: flex; flex-direction: column; gap: 2px; margin-top: 18px; padding-top: 8px; border-top: 1px solid var(--linha); }

.pn-barra-salvar { position: sticky; bottom: 12px; z-index: 15; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid #E6E8EE; border-radius: 14px; background: #fff; box-shadow: 0 -10px 30px -18px rgba(0, 2, 14, .35), 0 12px 24px -18px rgba(0, 2, 14, .35); }
.pn-barra-esq, .pn-barra-dir { display: flex; align-items: center; gap: 8px; }
.pn-sujo { display: inline-flex; align-items: center; gap: 7px; margin-right: 6px; font-size: 13.5px; font-weight: 600; color: var(--alerta); }
.pn-sujo::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #E0A100; }

.pn-form-lado { position: sticky; top: 92px; }
.pn-previa { padding: 18px; }
.pn-previa-topo h2 { font-size: 16px; }
.pn-previa-palco { margin: 12px 0; padding: 20px; display: grid; place-items: center; border-radius: 12px; background: var(--fundo); }
.pn-previa-card { width: 100%; max-width: 240px; pointer-events: none; user-select: none; transition: opacity .2s, filter .2s; }
.pn-previa-card.is-fora { opacity: .5; filter: grayscale(.7); }
.pn-previa-card .cp:hover { transform: none; box-shadow: var(--sombra-1); }
.pn-previa-nota { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 12px; font-size: 13.5px; color: var(--texto); }
.pn-previa-nota .ic { margin-top: 2px; color: var(--ok); }
.pn-previa-nota.is-fora .ic { color: var(--suave); }
.pn-previa-nota b { color: var(--tinta); }

/* =====================================================================
   #/painel/pedidos e #/painel/pedido/:numero
   ===================================================================== */
.pn-abas { display: flex; gap: 2px; margin-bottom: 16px; overflow-x: auto; border-bottom: 1px solid var(--linha); scrollbar-width: none; }
.pn-abas::-webkit-scrollbar { display: none; }
.pn-aba { display: inline-flex; align-items: center; gap: 8px; margin-bottom: -1px; padding: 10px 14px 12px; border-bottom: 2.5px solid transparent; white-space: nowrap; font-size: 15px; font-weight: 600; color: var(--suave); transition: color .15s, border-color .15s; }
.pn-aba:hover { color: var(--tinta); }
.pn-aba.is-on { border-color: var(--azul); color: var(--tinta); }
.pn-aba i { min-width: 22px; height: 20px; display: inline-grid; place-items: center; padding: 0 6px; border-radius: 6px; background: #E6E8EE; font-style: normal; font-size: 12px; font-weight: 700; color: var(--texto); font-variant-numeric: tabular-nums; }
.pn-aba.is-on i { background: var(--azul); color: #fff; }

.pn-st-novo { background: var(--azul-claro); color: var(--azul); }
.pn-st-pago { background: #E7F7EE; color: var(--ok); }
.pn-st-enviado { background: #E8ECF7; color: #24305E; }
.pn-st-concluido { background: #EEF0F4; color: var(--texto); }
.pn-st-cancelado { background: #FDE7EA; color: var(--falta); }

.pn-tab-ped tbody tr { cursor: pointer; }
.pn-tab-ped td small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--suave); }
.pn-ped-num { font-weight: 700; color: var(--azul); font-variant-numeric: tabular-nums; }
.pn-c-cli b { font-weight: 600; color: var(--tinta); }
.pn-c-itens span { max-width: 320px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--texto); }
.pn-tabela .pn-c-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pn-c-num b { color: var(--tinta); }
.pn-c-pag, .pn-c-rec { white-space: nowrap; color: var(--texto); }

.pn-ped-cab { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.pn-ped-cab h2 { font-size: 28px; }
.pn-ped-cab p { margin-top: 2px; font-size: 14.5px; color: var(--suave); }
.pn-ped-cab .selo { height: 28px; padding: 0 12px; font-size: 12.5px; }
.pn-ped-grade { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.pn-ped-lado { position: sticky; top: 90px; }
.pn-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.pn-itens li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: start; gap: 12px; padding: 12px 0; border-top: 1px solid var(--linha); }
.pn-itens li:first-child { padding-top: 0; border-top: 0; }
.pn-item-q { padding-top: 1px; font-weight: 700; color: var(--tinta); font-variant-numeric: tabular-nums; }
.pn-item-info { min-width: 0; }
.pn-item-info > b { display: block; font-weight: 600; color: var(--tinta); }
.pn-item-info > b a { transition: color .15s; }
.pn-item-info > b a:hover { color: var(--azul); }
.pn-item-info > span { display: block; margin-top: 2px; font-size: 13px; color: var(--suave); }
.pn-item-v { white-space: nowrap; font-weight: 700; color: var(--tinta); font-variant-numeric: tabular-nums; }
.pn-totais { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 0; padding-top: 12px; border-top: 1px solid var(--linha); }
.pn-totais div { display: flex; justify-content: space-between; gap: 12px; font-size: 14.5px; }
.pn-totais dt { color: var(--suave); }
.pn-totais dd { margin: 0; text-align: right; color: var(--tinta); font-variant-numeric: tabular-nums; }
.pn-totais .pn-total { margin-top: 6px; padding-top: 10px; border-top: 1px dashed var(--linha); align-items: baseline; }
.pn-total dt { font-weight: 700; color: var(--tinta); }
.pn-total dd { font: 700 24px var(--fonte-tit); }

.pn-dados { display: flex; flex-direction: column; gap: 8px; margin: 0 0 14px; }
.pn-dados div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; font-size: 14.5px; }
.pn-dados dt { color: var(--suave); }
.pn-dados dd { margin: 0; font-weight: 600; color: var(--tinta); overflow-wrap: anywhere; }
.pn-dados + .pn-muted { margin-top: -6px; }
.pn-dest { display: flex; align-items: flex-start; gap: 12px; }
.pn-dest .ic { margin-top: 2px; color: var(--azul); }
.pn-dest b { display: block; color: var(--tinta); }
.pn-dest small { display: block; margin-top: 2px; font-size: 13.5px; color: var(--texto); }
.pn-dest + .pn-muted { margin-top: 12px; }
.pn-obs { white-space: pre-wrap; color: var(--texto); }

.pn-st-atual { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; padding: 14px 16px; border-radius: 12px; background: var(--fundo); }
.pn-st-atual b { display: flex; align-items: center; gap: 9px; font: 700 20px var(--fonte-tit); color: var(--tinta); }
.pn-st-atual b::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--suave); }
.pn-st-atual span { font-size: 13.5px; color: var(--texto); }
.pn-st-atual--novo { background: var(--azul-claro); }
.pn-st-atual--novo b::before { background: var(--azul); }
.pn-st-atual--pago { background: #E7F7EE; }
.pn-st-atual--pago b::before { background: var(--ok); }
.pn-st-atual--enviado { background: #E8ECF7; }
.pn-st-atual--enviado b::before { background: #24305E; }
.pn-st-atual--cancelado { background: #FDE7EA; }
.pn-st-atual--cancelado b::before { background: var(--falta); }
.pn-st-aviso { margin-bottom: 14px; }
.pn-st-acoes { display: flex; flex-direction: column; gap: 10px; }
.pn-st-nota { margin-top: -4px; font-size: 13px; text-align: center; }
.pn-st-links { display: flex; justify-content: space-between; gap: 10px; padding-top: 4px; font-size: 14px; }

.pn-linha { margin: 0; padding: 0; list-style: none; }
.pn-linha-i { position: relative; display: flex; gap: 12px; padding-bottom: 16px; }
.pn-linha-i:last-child { padding-bottom: 0; }
.pn-linha-i::before { content: ""; position: absolute; left: 5px; top: 18px; bottom: 0; width: 2px; background: var(--linha); }
.pn-linha-i:last-child::before { display: none; }
.pn-linha-pt { position: relative; width: 12px; height: 12px; flex: none; margin-top: 5px; border-radius: 50%; background: #C5CAD4; box-shadow: 0 0 0 3px #fff; }
.pn-linha-i.is-atual .pn-linha-pt { background: var(--azul); box-shadow: 0 0 0 4px var(--azul-claro); }
.pn-linha-cancelado.is-atual .pn-linha-pt { background: var(--falta); box-shadow: 0 0 0 4px #FDE7EA; }
.pn-linha b { display: block; font-size: 14.5px; color: var(--tinta); }
.pn-linha time { font-size: 13px; color: var(--suave); }
/* entrada nova na linha do tempo: o traço cresce até ela, o ponto aparece e o texto entra */
.pn-linha-i.pn-linha-cresce::before { transform-origin: top center; animation: pnCresce .4s var(--ease) both; }
.pn-linha-i.pn-linha-nova .pn-linha-pt { animation: pnPop .42s cubic-bezier(.3, 1.5, .5, 1) .32s both; }
.pn-linha-i.pn-linha-nova > div { animation: pnEntraEsq .45s var(--ease) .38s both; }

.pn-ped-cab-selo { display: inline-flex; }
.pn-ped-cab-selo .selo { height: 28px; padding: 0 12px; font-size: 12.5px; }
.pn-st-mudou { animation: dk-entrar .45s var(--ease) both; }

/* etapas do pedido */
.pn-etapas { position: relative; margin: 2px -4px 16px; }
.pn-etapas ol { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.pn-etapas li { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; }
.pn-etapas b { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12.5px; font-weight: 600; color: var(--suave); }
.pn-etapa-pt { position: relative; z-index: 1; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px #D5D9E2; color: #fff; }
.pn-etapa-pt .ic { stroke-width: 2.6; }
.pn-etapas li.is-feito .pn-etapa-pt { background: var(--azul); box-shadow: none; }
.pn-etapas li.is-atual .pn-etapa-pt { background: #fff; box-shadow: inset 0 0 0 2px var(--azul), 0 0 0 4px var(--azul-claro); }
.pn-etapas li.is-atual .pn-etapa-pt::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--azul); }
.pn-etapas li.is-feito b, .pn-etapas li.is-atual b { color: var(--tinta); }
.pn-etapas li.is-nova .pn-etapa-pt { animation: pnPop .42s cubic-bezier(.3, 1.5, .5, 1) .5s both; }
.pn-etapas li.is-nova b { animation: dk-entrar .4s var(--ease) .56s both; }
.pn-etapas-trilho { position: absolute; top: 10px; left: 12.5%; right: 12.5%; height: 2px; overflow: hidden; border-radius: 2px; background: #E3E6EC; }
.pn-etapas-fill { position: absolute; inset: 0; background: var(--azul); transform: scaleX(var(--k, 0)); transform-origin: left center; transition: transform .7s var(--ease); }

/* estoque que baixou ou voltou ao mudar a situação */
.pn-mov { margin-bottom: 14px; padding: 14px 14px 12px; border: 1px solid #D4EEDF; border-radius: 12px; background: #F3FAF6; animation: dk-entrar .45s var(--ease) .1s both; }
.pn-mov--devolve { border-color: #D5DFFB; background: #F5F8FF; }
.pn-mov-tit { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 14px; font-weight: 700; color: #155C34; }
.pn-mov--devolve .pn-mov-tit { color: #1d3a8a; }
.pn-mov li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid rgba(21, 92, 52, .1); }
.pn-mov li:first-child { border-top: 0; padding-top: 2px; }
.pn-mov .pn-foto { background: #fff; }
.pn-mov-info { min-width: 0; display: flex; flex-direction: column; }
.pn-mov-info b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13.5px; line-height: 1.3; color: var(--tinta); }
.pn-mov-info span { margin-top: 1px; font-size: 12.5px; color: var(--suave); font-variant-numeric: tabular-nums; }
.pn-mov-num { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; min-width: 56px; }
.pn-mov-num b { font: 700 26px/1 var(--fonte-tit); color: var(--tinta); font-variant-numeric: tabular-nums; }
.pn-mov-num small { font-size: 11.5px; color: var(--suave); }
.pn-mov-selo { margin-top: 4px; animation: pnSeloIn .32s var(--ease) 1.35s both; }
.pn-mov-nota { margin-top: 6px; font-size: 12.5px; color: var(--texto); }

/* =====================================================================
   #/painel/servicos
   ===================================================================== */
.pn-serv-lista { display: flex; flex-direction: column; gap: 12px; }
.pn-serv { display: grid; grid-template-columns: 46px minmax(0, 1fr) 190px 140px 128px; grid-template-areas: "ic info preco por sug" "ic site preco por sug"; align-items: start; gap: 6px 20px; padding: 18px 20px; transition: border-color .3s, box-shadow .3s; }
.pn-serv-ic { grid-area: ic; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px; background: var(--azul-claro); color: var(--azul); }
.pn-serv-info { grid-area: info; min-width: 0; }
.pn-serv-info h3 { margin-bottom: 6px; font-size: 17px; }
.inp.pn-inp-leve { height: 38px; padding: 0 10px; border-color: transparent; background: var(--fundo); font-size: 14px; color: var(--texto); }
.inp.pn-inp-leve:hover { border-color: var(--linha); }
.inp.pn-inp-leve:focus { background: #fff; color: var(--tinta); }
.pn-serv-preco { grid-area: preco; display: flex; flex-direction: column; gap: 7px; }
.pn-serv-preco .pn-dinheiro--sm { width: 100%; }
.pn-serv-por { grid-area: por; display: flex; flex-direction: column; gap: 7px; }
.pn-serv-por .inp { height: 38px; font-size: 14.5px; border-radius: 9px; }
.pn-serv-sug { grid-area: sug; display: flex; flex-direction: column; gap: 9px; }
.pn-serv-site { grid-area: site; font-size: 13px; color: var(--suave); }
.pn-serv-site b { color: var(--tinta); }

/* =====================================================================
   #/painel/ajustes
   ===================================================================== */
.pn-ajustes { max-width: 1100px; display: flex; flex-direction: column; gap: 16px; }
.pn-aj-nav { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.pn-aj-nav::-webkit-scrollbar { display: none; }
.pn-aj { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 28px; padding: 24px; scroll-margin-top: 90px; transition: border-color .3s, box-shadow .3s; }
.pn-aj--foco { border-color: var(--azul); box-shadow: 0 0 0 4px rgba(4, 70, 230, .12); }
.pn-aj-cab h2 { font-size: 19px; }
.pn-aj-cab p { margin-top: 4px; font-size: 14px; color: var(--suave); }
.pn-aj-campos { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.pn-aj-campos > .pn-chave { padding: 4px 0 0; }
.pn-whats-linha { display: flex; gap: 10px; }
.pn-whats-linha .pn-prefixo { flex: 1; min-width: 0; }
.pn-whats-linha .btn { flex: none; height: 48px; }
.pn-whats-linha .btn.is-vazio { opacity: .6; }
.pn-wa-previa { padding: 16px; border-radius: 12px; background: #EFEAE2; }
.pn-bolha { max-width: 380px; margin-left: auto; padding: 9px 12px; border-radius: 10px 3px 10px 10px; background: #D9FDD3; box-shadow: 0 1px 1px rgba(0, 0, 0, .08); font-size: 14px; line-height: 1.45; color: #111B21; white-space: pre-line; }
.pn-bolha i { color: #667781; }
.pn-exemplo { padding: 12px 16px; border-radius: 12px; background: var(--fundo); font-size: 14.5px; color: var(--texto); }
.pn-exemplo-rot { display: block; margin-bottom: 4px; font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--suave); }
.pn-exemplo b { color: var(--tinta); }
.pn-frete-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.pn-sub-tit { grid-column: 1 / -1; font-size: 13.5px; font-weight: 600; color: var(--tinta); }
.pn-sub-tit em { margin-left: 6px; font-style: normal; font-weight: 500; color: var(--suave); }
.pn-frete-i { display: flex; flex-direction: column; gap: 5px; }
.pn-frete-i label { font-size: 13px; font-weight: 600; color: var(--texto); }
.pn-frete-i .inp { height: 42px; font-size: 14.5px; }
.pn-banner-previa { position: relative; min-height: 196px; display: flex; align-items: center; overflow: hidden; border-radius: 12px; background: var(--noite) url(../assets/img/oficina.jpg) center 42% / cover; }
.pn-banner-previa::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 2, 14, .93) 0%, rgba(0, 2, 14, .72) 55%, rgba(0, 2, 14, .3) 100%); }
.pn-banner-in { position: relative; max-width: 470px; padding: 24px 26px; color: #fff; }
.pn-banner-rot { font-size: 11px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: #9DB5FF; }
.pn-banner-in b { display: block; margin: 8px 0; font: 800 27px/1.06 var(--fonte-tit); overflow-wrap: anywhere; }
.pn-banner-in p { font-size: 14px; line-height: 1.45; color: #D9DEEA; overflow-wrap: anywhere; }

/* =====================================================================
   #/painel/ao-vivo — controle rápido à esquerda, o site de verdade à direita
   ===================================================================== */
body.pn-av-cheio .pn { grid-template-columns: minmax(0, 1fr); }
body.pn-av-cheio .pn-lado, body.pn-av-cheio .pn-menu { display: none; }
body.pn-av-cheio .pn-conteudo { max-width: none; }
.pn-topo-acoes [data-av-cheio][aria-pressed="true"] { background: var(--noite); color: #fff; box-shadow: none; }

.pn-av { display: grid; grid-template-columns: minmax(360px, 430px) minmax(0, 1fr); gap: 20px; align-items: start; }
.pn-av-painel { min-width: 0; overflow: hidden; }
.pn-av-topo { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; padding: 18px 18px 14px; }
.pn-av-tit { min-width: 0; }
.pn-av-tit h2 { margin-top: 4px; font-size: 21px; }
.pn-av-tit h2 span { font-variant-numeric: tabular-nums; }
.pn-av-tit p { margin-top: 3px; font-size: 13.5px; color: var(--suave); }
.pn-av-med { flex: none; display: flex; flex-direction: column; gap: 5px; }
.pn-av-med .pn-sel { width: 196px; height: 38px; font-size: 14px; border-radius: 9px; }

.pn-av-hist { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 42px; margin: 0 18px 6px; padding: 7px 8px 7px 12px; border-radius: 10px; background: var(--fundo); font-size: 13.5px; }
.pn-av-hist-txt { min-width: 0; display: flex; align-items: center; gap: 8px; color: var(--texto); animation: pnFade .3s var(--ease) both; }
@keyframes pnFade { from { opacity: .35; } to { opacity: 1; } }
.pn-av-hist-txt > span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.pn-av-hist-txt b { color: var(--tinta); }
.pn-av-hist-txt .ic { color: var(--suave); }
.pn-av-hist-txt.is-vazio { color: var(--suave); animation: none; }
.pn-av-hist .btn-link { flex: none; height: 28px; padding: 0 8px; border-radius: 7px; font-size: 13.5px; transition: background .15s; }
.pn-av-hist .btn-link:hover { background: #fff; }
.pn-av-hist .btn-link i { min-width: 18px; height: 18px; display: inline-grid; place-items: center; padding: 0 5px; border-radius: 9px; background: var(--azul); font-style: normal; font-size: 11px; color: #fff; font-variant-numeric: tabular-nums; }

.pn-av-lista { padding: 2px 0 6px; }
.pn-av-i { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; grid-template-areas: "foto info lado" "acoes acoes acoes"; align-items: center; gap: 10px 12px; padding: 14px 18px; border-top: 1px solid #EEF0F4; transition: background .2s; }
.pn-av-i:first-child { border-top: 0; }
.pn-av-i::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--azul); transform: scaleY(0); transition: transform .25s var(--ease); }
.pn-av-i.is-foco { background: #F8FAFF; }
.pn-av-i.is-foco::before { transform: scaleY(1); }
.pn-av-entra { animation: dk-entrar .4s var(--ease) both; }
.pn-av-foto { grid-area: foto; cursor: pointer; }
.pn-av-foto .pn-foto { transition: filter .2s, opacity .2s, border-color .15s; }
.pn-av-foto:hover .pn-foto { border-color: #C9D3F2; }
.pn-av-info { grid-area: info; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.pn-av-nome { max-width: 100%; padding: 0; border: 0; background: none; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 700 15px/1.3 var(--fonte); color: var(--tinta); text-align: left; cursor: pointer; transition: color .15s; }
.pn-av-nome:hover { color: var(--azul); }
.pn-av-meta { font-size: 12.5px; color: var(--suave); font-variant-numeric: tabular-nums; }
.pn-av-selos { margin-top: 4px; }
.pn-av-lado { grid-area: lado; display: flex; align-items: center; gap: 4px; }
.pn-av-ver[aria-pressed="true"] { background: var(--azul-claro); color: var(--azul); }
.pn-av-zerar { height: 34px; padding: 0 11px; font-size: 13.5px; }
.pn-av-zerar:hover { color: var(--falta); box-shadow: inset 0 0 0 1.5px #F2B8C2; }
.pn-av-acoes { grid-area: acoes; display: flex; align-items: center; gap: 8px; }
.pn-av-acoes .pn-dinheiro--sm { width: 112px; }
.pn-av-acoes .qtd.pn-qtd button { width: 31px; }
.pn-av-acoes .qtd.pn-qtd input { width: 40px; }
.pn-av-nosite { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; white-space: nowrap; font-size: 13.5px; font-weight: 600; color: var(--texto); cursor: pointer; user-select: none; }
.pn-av-i.is-fora .pn-av-foto .pn-foto { filter: grayscale(1); opacity: .55; }
.pn-av-i.is-fora .pn-av-nome { color: var(--suave); }
.pn-av-i.is-falta .pn-dinheiro--sm > input { color: var(--suave); }
.pn-av-vazio { padding: 0 18px 18px; }

/* o site, numa janela de navegador */
.pn-av-site { position: sticky; top: 90px; min-width: 0; height: calc(100vh - 110px); min-height: 540px; display: flex; flex-direction: column; gap: 12px; }
.pn-av-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.pn-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 11px; background: #E9EBF0; }
.pn-seg button { height: 32px; padding: 0 13px; border: 0; border-radius: 8px; background: none; white-space: nowrap; font-size: 13.5px; font-weight: 600; color: var(--texto); transition: background .15s, color .15s, box-shadow .15s; }
.pn-seg button:hover { color: var(--tinta); }
.pn-seg button.is-on { background: #fff; color: var(--tinta); box-shadow: 0 1px 2px rgba(0, 2, 14, .1), 0 0 0 1px rgba(0, 2, 14, .04); }
.pn-av-palco { position: relative; flex: 1; min-height: 0; display: flex; justify-content: center; }
.pn-av-janela { width: 100%; height: 100%; min-width: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 2, 14, .08), 0 30px 60px -36px rgba(0, 2, 14, .5), 0 10px 24px -18px rgba(0, 2, 14, .22); }
.pn-av-janela.is-cel { border-radius: 24px; }
.pn-av-cromo { position: relative; flex: none; display: flex; align-items: center; gap: 6px; height: 46px; padding: 0 8px 0 14px; border-bottom: 1px solid #E6E8EE; background: #F7F8FA; }
.pn-av-janela.is-cel .pn-av-cromo { padding-left: 10px; }
.pn-av-pontos { flex: none; display: flex; gap: 6px; margin-right: 6px; }
.pn-av-pontos i { width: 10px; height: 10px; border-radius: 50%; background: #DADDE4; }
.pn-av-janela.is-cel .pn-av-pontos { display: none; }
.pn-av-end { position: relative; flex: 1; min-width: 0; height: 30px; display: flex; align-items: center; gap: 6px; padding: 0 12px; overflow: hidden; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px #E3E6EC; font-size: 13px; color: var(--suave); }
.pn-av-end .ic { color: var(--ok); }
.pn-av-host { flex: none; font-weight: 700; color: var(--tinta); }
.pn-av-caminho { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pn-av-selo { position: absolute; top: 3px; right: 3px; bottom: 3px; display: inline-flex; align-items: center; gap: 7px; padding: 0 10px; border-radius: 6px; background: #E7F7EE; white-space: nowrap; font-size: 12.5px; font-weight: 700; color: #155C34; opacity: 0; transform: translateX(6px); transition: opacity .25s var(--ease), transform .25s var(--ease); pointer-events: none; }
.pn-av-selo.is-on { opacity: 1; transform: none; }
.pn-av-selo i { position: relative; width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--ok); }
.pn-av-selo i::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--ok); opacity: 0; }
.pn-av-selo.is-on i::after { animation: pnAnel 1.1s ease-out .05s 1; }
@keyframes pnAnel { from { opacity: .7; transform: scale(.45); } to { opacity: 0; transform: scale(1.7); } }
.pn-av-cbtn { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border: 0; border-radius: 8px; background: none; color: var(--suave); transition: background .15s, color .15s; }
.pn-av-cbtn:hover { background: #ECEEF2; color: var(--tinta); }
.pn-av-carga { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--azul); opacity: 0; transform: scaleX(0); transform-origin: left center; pointer-events: none; }
.pn-av-carga.is-on { opacity: 1; transform: scaleX(.72); transition: transform .9s cubic-bezier(.1, .6, .2, 1), opacity .1s; }
.pn-av-carga.is-on.is-fim { opacity: 0; transform: scaleX(1); transition: transform .22s var(--ease), opacity .3s .18s; }
.pn-av-vp { position: relative; flex: 1; min-height: 0; overflow: hidden; background: var(--fundo); }
.pn-av-vp iframe { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; border: 0; background: #fff; transform-origin: 0 0; }

/* dentro do quadro (o site aberto no painel): destaque do que acabou de mudar */
.pn-no-quadro .topbar-lojista { display: none; }
.pn-no-quadro .pd-compra { position: relative; }
.pn-av-destaque { animation: pnAvDestaque 1.9s var(--ease); }
@keyframes pnAvDestaque {
  0% { box-shadow: 0 0 0 0 rgba(4, 70, 230, 0); }
  14% { box-shadow: 0 0 0 3px rgba(4, 70, 230, .5), 0 22px 40px -26px rgba(4, 70, 230, .55); }
  70% { box-shadow: 0 0 0 3px rgba(4, 70, 230, .3), 0 22px 40px -26px rgba(4, 70, 230, .4); }
  100% { box-shadow: 0 0 0 0 rgba(4, 70, 230, 0); }
}
.pn-av-tag { position: absolute; z-index: 3; top: 10px; right: 10px; height: 24px; display: inline-flex; align-items: center; padding: 0 9px; border-radius: 7px; background: var(--azul); color: #fff; font: 700 11.5px/1 var(--fonte); letter-spacing: .5px; text-transform: uppercase; pointer-events: none; animation: pnAvTag 2s var(--ease) both; }
@keyframes pnAvTag { 0% { opacity: 0; transform: translateY(-4px); } 12%, 82% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* =====================================================================
   responsivo
   ===================================================================== */
@media (max-width: 1240px) {
  .pn-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pn-av { grid-template-columns: minmax(340px, 380px) minmax(0, 1fr); gap: 16px; }
  .pn-av-topo { flex-wrap: wrap; align-items: flex-start; }
  .pn-av-med { width: 100%; }
  .pn-av-med .pn-sel { width: 100%; }
}

@media (max-width: 1100px) {
  .pn-inicio-grade, .pn-ped-grade, .pn-form-grade { grid-template-columns: minmax(0, 1fr); }
  .pn-ped-lado { position: static; order: -1; }
  .pn-form-lado { position: static; }
  .pn-previa { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 0 20px; align-items: center; }
  .pn-previa-topo { grid-column: 2; }
  .pn-previa-palco { grid-column: 1; grid-row: 1 / span 3; margin: 0; }
  .pn-previa-nota, .pn-previa > .btn { grid-column: 2; }
  .pn-aj { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .pn-serv { grid-template-columns: 46px minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "ic info info" "ic site site" ". preco por" ". sug sug"; gap: 10px 16px; }
  .pn-serv-sug { flex-direction: row; align-items: center; justify-content: space-between; padding-top: 10px; border-top: 1px solid var(--linha); }

  .pn-ferr-l1 { flex-wrap: wrap; }
  .pn-busca { flex-basis: 100%; }
  .pn-ferr-sels { flex: 1; }
  .pn-sel { flex: 1; max-width: none; }

  /* lista de produtos vira cartões */
  .pn-tab-caixa--prod { overflow: visible; border: 0; border-radius: 0; background: none; box-shadow: none; }
  .pn-tab-prod thead { display: none; }
  .pn-tab-prod { display: block; }
  .pn-tab-prod tbody { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr)); gap: 12px; }
  .pn-tab-prod tr { position: relative; display: flex; flex-wrap: wrap; align-items: flex-start; padding: 14px 14px 0; border: 1px solid #E6E8EE; border-radius: 14px; background: #fff; }
  .pn-tabela.pn-tab-prod tbody tr:hover { background: #fff; }
  .pn-tabela.pn-tab-prod tbody tr.is-sel { border-color: var(--azul); background: #fff; box-shadow: 0 0 0 3px rgba(4, 70, 230, .1); }
  .pn-tab-prod td { display: block; width: auto; padding: 0 !important; border: 0 !important; }
  .pn-tab-prod .pn-c-sel { order: 1; width: 30px; padding-top: 2px !important; }
  .pn-tab-prod .pn-c-foto { order: 2; width: 64px; }
  .pn-tab-prod .pn-c-prod { order: 3; flex: 1 1 0; min-width: 0; padding-right: 34px !important; }
  .pn-tab-prod .pn-c-ed { order: 4; position: absolute; top: 8px; right: 8px; width: auto; }
  .pn-tab-prod .pn-c-sit { order: 5; flex-basis: 100%; width: auto; padding: 8px 0 12px 94px !important; }
  .pn-tab-prod .pn-c-preco, .pn-tab-prod .pn-c-est, .pn-tab-prod .pn-c-site { order: 6; display: flex; flex-direction: column; gap: 5px; padding: 12px 0 14px !important; border-top: 1px solid #EEF0F4 !important; }
  .pn-tab-prod .pn-c-preco { flex: 1 1 auto; width: auto; }
  .pn-tab-prod .pn-c-est { flex: 0 0 auto; width: auto; padding-left: 12px !important; }
  .pn-tab-prod .pn-c-site { flex: 0 0 auto; width: auto; align-items: flex-end; padding-left: 12px !important; }
  .pn-tab-prod .pn-dinheiro--sm { width: 118px; }
  .pn-tab-prod .pn-rot-m { display: block; font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--suave); }
  .pn-tab-prod .pn-ancora { align-self: flex-start; }
  .pn-tab-prod .pn-c-site .pn-ancora { align-self: flex-end; }
  /* em cartões, quem acende é o cartão inteiro */
  .pn-tab-prod tr { isolation: isolate; }
  .pn-tab-prod tr::after { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: 14px; background: rgba(27, 138, 75, .1); opacity: 0; pointer-events: none; }
  .pn-tabela.pn-tab-prod tbody tr.pn-flash > td { animation: none; }
  .pn-tab-prod tr.pn-flash::after { animation: pnFlash 1.3s var(--ease-saida); }
}

/* ao vivo em tela estreita: o site fica preso no alto e o controle rola por baixo */
@media (max-width: 1020px) {
  .pn-av { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .pn-av-site { order: -1; top: 70px; z-index: 12; height: 52vh; min-height: 320px; margin: -26px -32px 0; padding: 12px 32px; gap: 10px; background: var(--fundo); box-shadow: 0 16px 18px -18px rgba(0, 2, 14, .35); }
  .pn-av-topo { flex-wrap: nowrap; align-items: flex-end; }
  .pn-av-med { width: auto; }
  .pn-av-med .pn-sel { width: 190px; }
}

@media (max-width: 900px) {
  .pn-conteudo { max-width: none; }

  .pn-av-site { margin: -18px -16px 0; padding: 12px 16px; }
  .pn-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .pn-kpi:last-child { grid-column: 1 / -1; }
  .pn-kpi { padding: 14px; }
  .pn-kpi-v { font-size: 26px; }
  .pn-ola h2 { font-size: 24px; }
  .pn-bloco { padding: 16px; }
  .pn-lote { left: 0; bottom: 12px; padding: 0 12px; }

  /* pedidos viram cartões */
  .pn-tab-caixa--ped { overflow: visible; border: 0; border-radius: 0; background: none; box-shadow: none; }
  .pn-tab-ped thead { display: none; }
  .pn-tab-ped { display: block; }
  .pn-tab-ped tbody { display: flex; flex-direction: column; gap: 10px; }
  .pn-tab-ped tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "pn st" "cli num" "itens itens" "pag rec"; gap: 6px 12px; padding: 14px 16px; border: 1px solid #E6E8EE; border-radius: 14px; background: #fff; }
  .pn-tabela.pn-tab-ped tbody tr:hover { background: #fff; border-color: #CFD5E3; }
  .pn-tab-ped td { display: block; padding: 0 !important; border: 0 !important; }
  .pn-tab-ped .pn-c-pn { grid-area: pn; }
  .pn-tab-ped .pn-c-st { grid-area: st; justify-self: end; }
  .pn-tab-ped .pn-c-cli { grid-area: cli; }
  .pn-tab-ped .pn-c-num { grid-area: num; align-self: end; font-size: 17px; }
  .pn-tab-ped .pn-c-itens { grid-area: itens; }
  .pn-tab-ped .pn-c-itens span { max-width: none; }
  .pn-tab-ped .pn-c-pag, .pn-tab-ped .pn-c-rec { padding-top: 10px !important; border-top: 1px solid #EEF0F4 !important; white-space: normal; font-size: 13.5px; }
  .pn-tab-ped .pn-c-pag { grid-area: pag; }
  .pn-tab-ped .pn-c-rec { grid-area: rec; text-align: right; }
  .pn-tab-ped .pn-rot-m { display: block; font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--suave); }

  .pn-login { grid-template-columns: minmax(0, 1fr); }
  .pn-login-foto { min-height: 300px; }
  .pn-login-marca { gap: 36px; padding: 22px 20px 26px; }
  .pn-login-tit { margin: 8px 0 6px; font-size: 29px; }
  .pn-login-txt p:last-child { font-size: 15px; }
  .pn-login-lado { justify-content: flex-start; padding: 32px 20px 40px; }
  .pn-login-form h1 { font-size: 28px; }
  .pn-login-voltar { position: static; margin-top: 28px; }
}

@media (max-width: 640px) {
  .pn-topo-acoes .pn-acao-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pn-topo-acoes .btn { width: 40px; padding: 0; }

  .pn-ferr { padding: 12px; }
  .pn-ferr-sels { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .pn-ferr-sels .pn-sel:last-child { grid-column: 1 / -1; }
  .pn-chips { flex-wrap: nowrap; width: calc(100% + 24px); margin: 0 -12px; padding: 0 12px 2px; overflow-x: auto; scrollbar-width: none; }
  .pn-chips::-webkit-scrollbar { display: none; }
  .pn-ferr-acoes { width: 100%; }
  .pn-ferr-acoes .btn { flex: 1; padding: 0 10px; }
  .pn-pag { justify-content: space-between; }
  .pn-pag-nums { display: none; }
  .pn-pag-m { display: block; }
  .pn-resumo { flex-wrap: wrap; }

  .pn-lote { bottom: 0; padding: 0; }
  .pn-lote-in { width: 100%; flex-wrap: wrap; gap: 6px; padding: 10px 10px 12px 16px; border-radius: 16px 16px 0 0; }
  .pn-lote-n { order: 1; flex: 1; }
  .pn-lote-x { order: 2; }
  .pn-lote-acoes { order: 3; flex-basis: 100%; gap: 6px; }
  .pn-lote-acoes button { background: rgba(255, 255, 255, .07); }
  body:has(.pn-com-lote) .toasts { bottom: 128px; }

  .pn-at { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 6px 12px; }
  .pn-at .pn-foto { grid-row: 1 / span 2; align-self: start; }
  .pn-at-info { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .pn-at-l2 { flex-wrap: wrap; gap: 4px 8px; }
  .pn-at-est { grid-column: 3; grid-row: 1; justify-self: end; }
  .pn-at-repor { grid-column: 3; grid-row: 2; justify-self: end; height: 30px; }

  /* ao vivo */
  .pn-av-telas { display: none; }
  .pn-av-barra { justify-content: center; }
  .pn-seg { width: 100%; }
  .pn-seg button { flex: 1; padding: 0 8px; }
  .pn-av-site { height: 50vh; }
  .pn-av-janela.is-cel { border-radius: 14px; }
  .pn-av-topo { flex-wrap: wrap; align-items: flex-start; padding: 16px 14px 12px; }
  .pn-av-med { width: 100%; }
  .pn-av-med .pn-sel { width: 100%; }
  .pn-av-hist { margin: 0 14px 6px; }
  .pn-av-i { padding: 12px 14px; gap: 10px; }
  .pn-av-acoes { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; }
  .pn-av-acoes > .pn-ancora:first-child { display: flex; min-width: 0; }
  .pn-av-acoes > .pn-ancora:first-child .pn-dinheiro--sm { flex: 1; width: auto; min-width: 0; }
  .pn-av-nosite { margin-left: 4px; }
  .pn-ped-i { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; }
  .pn-ped-n { grid-column: 1; grid-row: 1; font-size: 13.5px; }
  .pn-ped-i .selo { grid-column: 2; grid-row: 1; justify-self: end; }
  .pn-ped-cli { grid-column: 1; grid-row: 2; }
  .pn-ped-total { grid-column: 2; grid-row: 2; align-self: end; text-align: right; }
  .pn-dica p { font-size: 15.5px; }

  .pn-sec { padding: 18px 16px 20px; }
  .pn-opcoes2 { grid-template-columns: minmax(0, 1fr); }
  .pn-tri { grid-template-columns: 1fr 1fr; }
  .pn-tri-3 { grid-column: 1 / -1; }
  .pn-medida { grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1fr) 14px minmax(0, 1fr); gap: 0 6px; }
  .pn-medida-res { grid-column: 1 / -1; height: 44px; margin: 12px 0 0; flex-direction: row; align-items: center; justify-content: space-between; }
  .pn-foto-ed { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; }
  .pn-foto-box { width: 96px; height: 96px; }
  .pn-previa { display: block; }
  .pn-previa-palco { margin: 12px 0; }
  .pn-barra-salvar { bottom: 8px; padding: 10px; }
  .pn-barra-esq .btn { width: 40px; padding: 0; }
  .pn-barra-esq .btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pn-barra-dir .btn { height: 44px; padding: 0 16px; }
  .pn-sujo { display: none !important; }
  .pn-barra-salvar--aj .pn-barra-esq { display: none; }
  .pn-barra-salvar--aj .pn-barra-dir { flex: 1; }
  .pn-barra-salvar--aj .pn-barra-dir .btn-primario { flex: 1; }

  .pn-ped-cab { flex-wrap: wrap; }
  .pn-ped-cab h2 { font-size: 23px; }
  .pn-duo { grid-template-columns: minmax(0, 1fr); }
  .pn-itens li { grid-template-columns: 32px minmax(0, 1fr); }
  .pn-item-v { grid-column: 2; }

  .pn-aj { padding: 18px 16px; }
  .pn-whats-linha .btn { padding: 0 14px; }
  .pn-frete-cats { grid-template-columns: minmax(0, 1fr); }
  .pn-banner-in b { font-size: 23px; }
  .pn-serv { padding: 16px; grid-template-columns: 40px minmax(0, 1fr) minmax(0, 1fr); }
  .pn-serv-ic { width: 40px; height: 40px; }
  .pn-serv { grid-template-areas: "ic info info" "site site site" "preco preco por" "sug sug sug"; }
}

@media (max-width: 380px) {
  .pn-tab-prod .pn-c-est, .pn-tab-prod .pn-c-site { padding-left: 8px !important; }
  .pn-tab-prod .pn-dinheiro--sm { width: 108px; }
  .pn-ped-cab-selo { order: -1; }
  .pn-av-i { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .pn-av-foto .pn-foto { width: 44px; height: 44px; }
  .pn-av-nosite-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* menos movimento: o check aparece já desenhado e nada se desloca */
@media (prefers-reduced-motion: reduce) {
  .pn-ok path { stroke-dashoffset: 0; }
  .pn-etapas-fill { transition: none; }
}