/* Loja Shark · Central de Pedidos (painel.html)
   Ferramenta de trabalho: limpa, rápida, celular primeiro. Usa as cores e a fonte do base.css.
   Coral só no que é compra (botão Comprar) e no que pede atenção (pedido atrasado). */

.pn {
  --pn-topo: 60px;
  --pn-borda: #DCE6EF;
  --pn-borda-forte: #C5D3E0;
  --pn-cartao: #fff;
  --pn-raio: 16px;
  --pn-gutter: 16px;
  --pn-max: 1180px;
  --pn-sombra: 0 1px 2px rgba(10, 37, 64, .05), 0 4px 14px rgba(10, 37, 64, .05);
  --verde: #1C7A3E;
  --verde-claro: #E3F5E8;
  --vermelho: #B93A1F;
  --vermelho-claro: #FFE8E1;
  --ambar: #8A5300;
  --ambar-claro: #FFF1D6;
  background: var(--espuma);
  font-size: 15px;
  line-height: 1.5;
  min-height: 100vh;
}
@media (min-width: 760px) { .pn { --pn-gutter: 28px; } }
html.pn-travado, html.pn-travado body { overflow: hidden; }
.pn [hidden] { display: none !important; }
/* campo focado não some atrás do topo fixo */
.pn input, .pn select, .pn textarea, .pn button, .pn a { scroll-margin-top: calc(var(--pn-topo) + 16px); scroll-margin-bottom: 96px; }
.pn :focus-visible { outline: 3px solid var(--oceano); outline-offset: 2px; border-radius: 10px; }
.pn-mono { font-family: var(--mono); font-weight: 500; letter-spacing: -.01em; }
.pn code { font-family: var(--mono); font-size: .88em; background: rgba(30, 127, 212, .08); color: var(--navy); padding: 1px 6px; border-radius: 6px; overflow-wrap: anywhere; }
.pn-ico { display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; }
.pn-ico svg, .pn-abas svg, .pn-busca svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.pn-ico.grande { width: 40px; height: 40px; color: var(--texto-3); }
.pn-pular { position: absolute; left: 12px; top: -60px; z-index: 300; background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 10px; font-weight: 700; }
.pn-pular:focus { top: 12px; }

/* ---------- botões ---------- */
.pn-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 20px; border-radius: 999px;
  font-weight: 700; font-size: 15px; line-height: 1.2; text-align: center;
  transition: background .15s, box-shadow .15s, transform .15s, color .15s;
}
.pn-btn:active:not(:disabled) { transform: scale(.98); }
.pn-btn:disabled { opacity: .55; cursor: default; }
.pn-btn-p { min-height: 38px; padding: 0 14px; font-size: 14px; }
.pn-btn-p .pn-ico { width: 17px; height: 17px; }
.pn-btn-escuro { background: var(--navy); color: #fff; }
.pn-btn-escuro:hover:not(:disabled) { background: var(--navy-2); }
.pn-btn-claro { background: #fff; color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--pn-borda-forte); }
.pn-btn-claro:hover:not(:disabled) { box-shadow: inset 0 0 0 1.5px var(--oceano); color: var(--oceano-escuro); }
.pn-btn-perigo { background: var(--vermelho); color: #fff; }
.pn-btn-perigo:hover:not(:disabled) { background: #9C2E16; }
.pn-btn-perigo-claro { background: #fff; color: var(--vermelho); box-shadow: inset 0 0 0 1.5px #F3C3B6; }
.pn-btn-perigo-claro:hover:not(:disabled) { background: var(--vermelho-claro); }
.pn .btn { min-height: 48px; padding: 0 22px; font-size: 15px; }
.pn .btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.pn-link { display: inline-flex; align-items: center; gap: 6px; color: var(--oceano-escuro); font-weight: 700; font-size: 14px; text-decoration: underline; text-decoration-color: rgba(20, 94, 166, .3); text-underline-offset: 3px; padding: 4px 0; }
.pn-link:hover { text-decoration-color: currentColor; }
.pn-link .pn-ico { width: 16px; height: 16px; }
.pn-link-perigo { color: var(--vermelho); text-decoration-color: rgba(185, 58, 31, .3); }
.pn-icone-btn { width: 40px; height: 40px; border-radius: 12px; display: inline-grid; place-items: center; color: var(--navy); flex: none; transition: background .15s; }
.pn-icone-btn:hover:not(:disabled) { background: rgba(30, 127, 212, .1); }
.pn-icone-btn:disabled { opacity: .3; cursor: default; }

/* ---------- carregando / girador ---------- */
.pn-inicio { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.pn-girador { width: 28px; height: 28px; border-radius: 50%; border: 3px solid rgba(30, 127, 212, .2); border-top-color: var(--oceano); animation: pn-gira .8s linear infinite; display: inline-block; flex: none; }
@keyframes pn-gira { to { transform: rotate(360deg); } }
.pn-carregando { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 40px 16px; color: var(--texto-2); font-weight: 600; }
.pn-carregando .pn-girador { width: 22px; height: 22px; }
.pn-falha-ini { text-align: center; display: grid; gap: 12px; justify-items: center; max-width: 380px; }
.pn-falha-ini h1 { font-size: 24px; }
.pn-falha-ini p { color: var(--texto-2); }
.esqueleto { pointer-events: none; }
.esqueleto i, .esqueleto span, .esqueleto b { display: block; border-radius: 8px; background: linear-gradient(90deg, #E8EFF5 0%, #F4F8FB 50%, #E8EFF5 100%); background-size: 200% 100%; animation: pn-brilho 1.3s linear infinite; }
@keyframes pn-brilho { to { background-position: -200% 0; } }

/* ---------- entrar ---------- */
.pn-entrar {
  min-height: 100vh; display: grid; place-items: center; padding: 24px 16px;
  background:
    radial-gradient(700px 420px at 85% 0%, rgba(53, 203, 232, .25), transparent 70%),
    radial-gradient(600px 400px at 0% 100%, rgba(30, 127, 212, .16), transparent 70%),
    var(--grad-fundo-mar);
}
.pn-entrar-cartao {
  width: 100%; max-width: 420px; background: #fff; border-radius: 28px; padding: 36px 28px 28px;
  box-shadow: var(--sombra-l); display: grid; gap: 16px;
}
.pn-entrar-logo { height: 40px; width: auto; margin-bottom: 8px; }
.pn-entrar h1 { font-size: 28px; }
.pn-entrar-texto { color: var(--texto-2); margin-top: -6px; }
.pn-entrar-btn { width: 100%; }
.pn-entrar-pe { font-size: 13px; color: var(--texto-3); text-align: center; }
.pn-senha { display: flex; position: relative; }
.pn-senha input { flex: 1; padding-right: 92px !important; }
.pn-senha-ver { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); height: 36px; padding: 0 12px; border-radius: 10px; font-weight: 700; font-size: 13px; color: var(--oceano-escuro); }
.pn-senha-ver:hover { background: rgba(30, 127, 212, .08); }
.pn-erro { color: var(--vermelho); background: var(--vermelho-claro); border-radius: 12px; padding: 10px 14px; font-weight: 600; font-size: 14px; }
.pn-erro-linha { color: var(--vermelho); font-weight: 600; font-size: 14px; }

/* ---------- campos ---------- */
.pn-campo { display: grid; gap: 6px; min-width: 0; }
.pn-campo > span:first-child { font-size: 13px; font-weight: 700; color: var(--texto-2); }
.pn input:not([type]), .pn input[type=text], .pn input[type=password], .pn input[type=email], .pn input[type=url], .pn input[type=tel],
.pn input[type=number], .pn input[type=search], .pn select, .pn textarea {
  width: 100%; min-width: 0; min-height: 46px; border-radius: 12px; border: 1.5px solid var(--pn-borda-forte);
  background: #fff; padding: 10px 13px; font-size: 16px; color: var(--navy); transition: border-color .15s, box-shadow .15s;
}
.pn textarea { resize: vertical; min-height: 64px; line-height: 1.45; }
.pn select { appearance: none; -webkit-appearance: none; padding-right: 38px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A2540' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; text-overflow: ellipsis; }
.pn input:hover, .pn select:hover, .pn textarea:hover { border-color: #A9BCCD; }
.pn input:focus, .pn select:focus, .pn textarea:focus { outline: none; border-color: var(--oceano); box-shadow: 0 0 0 3px rgba(30, 127, 212, .18); }
.pn input::placeholder, .pn textarea::placeholder { color: #93A4B5; }
.pn-form-grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 600px) {
  .pn-form-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pn-form-grade > .largo, .pn-form-grade > .pn-form-acoes, .pn-form-grade > .pn-erro, .pn-form-grade > legend { grid-column: 1 / -1; }
}
.pn-form-acoes { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.pn-interruptor { display: flex; align-items: center; gap: 12px; cursor: pointer; font-weight: 600; font-size: 14.5px; min-height: 40px; position: relative; }
.pn-interruptor input { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; opacity: 0; width: 44px; height: 26px; margin: 0; cursor: pointer; }
.pn-int-trilho { flex: none; width: 44px; height: 26px; border-radius: 999px; background: #C9D5E0; position: relative; transition: background .2s; }
.pn-int-trilho::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(10, 37, 64, .3); transition: transform .2s var(--ease); }
.pn-interruptor input:checked + .pn-int-trilho { background: var(--oceano); }
.pn-interruptor input:checked + .pn-int-trilho::after { transform: translateX(18px); }
.pn-interruptor input:focus-visible + .pn-int-trilho { outline: 3px solid var(--oceano); outline-offset: 2px; }
.pn-dica { color: var(--texto-2); font-size: 14px; }
.pn-dica-caixa { background: var(--espuma); border-radius: 12px; padding: 12px 14px; }
.pn-fs { border: 0; padding: 0; margin: 0 0 22px; min-width: 0; }
.pn-fs legend { font-weight: 800; font-size: 16px; padding: 0; margin-bottom: 12px; }

/* ---------- topo ---------- */
.pn-topo { position: sticky; top: 0; z-index: 40; background: var(--navy); color: #fff; box-shadow: 0 4px 20px rgba(10, 37, 64, .18); }
.pn-topo-in { max-width: var(--pn-max); margin: 0 auto; height: var(--pn-topo); padding: 0 var(--pn-gutter); display: flex; align-items: center; gap: 20px; }
.pn-marca { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pn-marca img { height: 26px; width: auto; }
.pn-marca span { font-size: 13px; font-weight: 700; color: #9EC3E2; padding-left: 12px; border-left: 1px solid rgba(255, 255, 255, .2); white-space: nowrap; }
.pn-abas { display: flex; gap: 4px; margin-left: auto; }
.pn-abas a { position: relative; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 999px; color: #BFD7EC; font-weight: 700; font-size: 14.5px; transition: background .15s, color .15s; }
.pn-abas a svg { width: 19px; height: 19px; }
.pn-abas a:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.pn-abas a[aria-current=page] { color: var(--navy); background: #fff; }
.pn-aba-num { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--coral); color: #fff; font-size: 11.5px; font-weight: 800; display: inline-grid; place-items: center; }
.pn-sair { color: #BFD7EC; font-weight: 700; font-size: 14px; height: 40px; padding: 0 12px; border-radius: 999px; }
.pn-sair:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.pn-topo :focus-visible { outline-color: var(--ciano); }

@media (max-width: 759px) {
  .pn-app { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .pn-topo-in { height: 56px; }
  .pn-marca img { height: 23px; }
  .pn-marca span { font-size: 12px; padding-left: 10px; }
  .pn-abas {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; margin: 0; gap: 0;
    background: #fff; border-top: 1px solid var(--pn-borda); box-shadow: 0 -6px 24px rgba(10, 37, 64, .08);
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  }
  .pn-abas a { flex: 1; flex-direction: column; justify-content: center; gap: 2px; height: 58px; padding: 0; border-radius: 14px; color: var(--texto-3); font-size: 12px; }
  .pn-abas a svg { width: 23px; height: 23px; }
  .pn-abas a:hover { background: none; color: var(--navy); }
  .pn-abas a[aria-current=page] { background: rgba(30, 127, 212, .1); color: var(--oceano-escuro); }
  .pn-aba-num { position: absolute; top: 4px; left: calc(50% + 6px); }
  .pn-sair { display: none; }
}

.pn-faixa { background: var(--ambar-claro); border-bottom: 1px solid #F2D9A6; color: var(--ambar); }
.pn-faixa-in { max-width: var(--pn-max); margin: 0 auto; padding: 10px var(--pn-gutter); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; }
.pn-faixa-in p { flex: 1; min-width: 200px; }
.pn-faixa a { font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- conteúdo ---------- */
.pn-conteudo { max-width: var(--pn-max); margin: 0 auto; padding: 20px var(--pn-gutter) 48px; outline: none; }
.pn-cabeca { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.pn-cabeca h1 { font-size: clamp(26px, 4vw, 34px); letter-spacing: -.03em; }
.pn-sobre { font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--oceano); margin-bottom: 6px; }
.pn-btn-m { min-height: 44px; padding: 0 18px; font-size: 14.5px; flex: none; }
.pn-btn-m svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
@media (max-width: 459px) {
  .pn-btn-m { padding: 0 14px; font-size: 13.5px; }
}

/* resumo do mês */
.pn-mes-titulo { font-size: 13px; font-weight: 700; color: var(--texto-2); letter-spacing: 0; margin: 0 0 8px; }
.pn-mes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
@media (min-width: 760px) { .pn-mes { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } }
.pn-num { background: #fff; border-radius: var(--pn-raio); padding: 14px 16px; box-shadow: var(--pn-sombra); display: grid; gap: 2px; align-content: start; min-width: 0; }
.pn-num span { font-size: 12.5px; font-weight: 700; color: var(--texto-2); }
.pn-num b { font-size: clamp(19px, 2.4vw, 26px); font-weight: 800; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pn-num small { font-size: 12px; font-weight: 600; }
.pn-num-lucro { background: var(--navy); color: #fff; background-image: radial-gradient(240px 140px at 100% 0%, rgba(53, 203, 232, .35), transparent 70%); }
.pn-num-lucro span, .pn-num-lucro small { color: #A9CBE8; }
.pn-num-lucro.negativo b { color: #FFB4A3; }
.pn-num.esqueleto span { height: 12px; width: 60%; }
.pn-num.esqueleto b { height: 24px; width: 80%; margin-top: 6px; }

/* filtros (chips) */
.pn-filtros { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--pn-gutter) * -1) 12px; padding: 2px var(--pn-gutter) 4px; scroll-padding: 0 var(--pn-gutter); }
.pn-filtros::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .pn-filtros { flex-wrap: wrap; overflow: visible; margin: 0 0 12px; padding: 2px 0 4px; } }
.pn-chip {
  flex: none; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 8px 0 14px;
  border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--pn-borda); font-weight: 700; font-size: 14px; color: var(--texto-2); transition: background .15s, color .15s, box-shadow .15s;
}
.pn-chip:hover { box-shadow: inset 0 0 0 1.5px var(--pn-borda-forte); color: var(--navy); }
.pn-chip-n { min-width: 26px; height: 26px; padding: 0 7px; border-radius: 999px; background: var(--espuma); color: var(--navy); font-size: 12.5px; display: inline-grid; place-items: center; }
.pn-chip.chama .pn-chip-n { background: var(--coral); color: #fff; }
.pn-chip[aria-pressed=true] { background: var(--navy); color: #fff; box-shadow: none; }
.pn-chip[aria-pressed=true] .pn-chip-n { background: rgba(255, 255, 255, .16); color: #fff; }
.pn-chip[aria-pressed=true].chama .pn-chip-n { background: var(--coral); }

/* busca */
.pn-busca { position: relative; margin-bottom: 16px; }
.pn-busca svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--texto-3); pointer-events: none; }
.pn-busca input[type=search] { padding-left: 44px; min-height: 48px; border-color: var(--pn-borda); box-shadow: var(--pn-sombra); }

/* ---------- lista de pedidos ---------- */
.pn-lista { display: grid; gap: 12px; }
@media (min-width: 960px) { [data-lista] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }
.pn-card {
  position: relative; display: grid; gap: 12px; background: #fff; border-radius: var(--pn-raio); padding: 14px 16px;
  box-shadow: var(--pn-sombra); border: 1.5px solid transparent; transition: border-color .15s, box-shadow .15s, transform .15s; min-width: 0;
}
a.pn-card:hover { border-color: rgba(30, 127, 212, .35); box-shadow: 0 6px 22px rgba(10, 37, 64, .09); }
a.pn-card:active { transform: scale(.995); }
.pn-card.atrasado { border-color: rgba(255, 107, 74, .55); background: linear-gradient(180deg, #FFF7F4, #fff 60%); }
.pn-card.atrasado::before { content: ''; position: absolute; left: -1.5px; top: 14px; bottom: 14px; width: 4px; border-radius: 0 4px 4px 0; background: var(--coral); }
.pn-card.st-cancelado { opacity: .72; }
.pn-card-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pn-card-num { font-family: var(--mono); font-size: 12.5px; color: var(--texto-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pn-card-meio { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.pn-card-fotos { display: flex; }
.pn-card-fotos img { width: 52px; height: 52px; border-radius: 12px; object-fit: cover; background: var(--espuma); box-shadow: 0 0 0 2px #fff; }
.pn-card-fotos img + img { margin-left: -22px; }
.pn-card-txt { min-width: 0; }
.pn-card-cliente { font-weight: 800; font-size: 16px; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pn-card-itens { font-size: 13.5px; color: var(--texto-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pn-mais-itens { color: var(--oceano-escuro); font-weight: 700; }
.pn-card-local { font-size: 12.5px; color: var(--texto-3); }
.pn-card-valor { text-align: right; display: grid; gap: 1px; }
.pn-card-valor b { font-size: 16px; font-weight: 800; white-space: nowrap; }
.pn-card-valor span { font-size: 12px; color: var(--texto-3); white-space: nowrap; }
.pn-card-pe { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; padding-top: 10px; border-top: 1px dashed var(--pn-borda); font-size: 12.5px; color: var(--texto-2); font-weight: 600; }
.pn-card-pe:empty { display: none; }
.pn-card-plats { display: flex; gap: 4px; margin-left: auto; }
.pn-progresso { display: inline-flex; align-items: center; gap: 8px; }
.pn-barrinha { width: 54px; height: 6px; border-radius: 999px; background: #E3EBF2; overflow: hidden; }
.pn-barrinha i { display: block; height: 100%; border-radius: inherit; background: var(--verde); }
.pn-card.esqueleto { min-height: 132px; }
.pn-card.esqueleto i:nth-child(1) { height: 14px; width: 40%; }
.pn-card.esqueleto i:nth-child(2) { height: 40px; width: 85%; }
.pn-card.esqueleto i:nth-child(3) { height: 12px; width: 55%; }
.pn-mais { display: flex; justify-content: center; margin-top: 18px; }
.pn-mais:empty { display: none; }

/* selos */
.pn-status { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 800; white-space: nowrap; flex: none; }
.pn-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.st-novo.pn-status { background: #E2EFFC; color: #145EA6; }
.st-comprando.pn-status { background: #DDF4F8; color: #0B6577; }
.st-comprado.pn-status { background: #ECE8FD; color: #4A3AB0; }
.st-enviado.pn-status { background: var(--ambar-claro); color: var(--ambar); }
.st-entregue.pn-status { background: var(--verde-claro); color: var(--verde); }
.st-problema.pn-status { background: var(--vermelho-claro); color: var(--vermelho); }
.st-cancelado.pn-status { background: #ECEFF3; color: #56677A; }
.cp-pendente.pn-status { background: #FFE9E2; color: #B23D1E; }
.cp-aberto.pn-status { background: var(--ambar-claro); color: var(--ambar); }
.cp-comprado.pn-status { background: #ECE8FD; color: #4A3AB0; }
.cp-enviado.pn-status { background: #DDF4F8; color: #0B6577; }
.cp-entregue.pn-status { background: var(--verde-claro); color: var(--verde); }
.cp-problema.pn-status { background: var(--vermelho-claro); color: var(--vermelho); }
.pn-plat { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .01em; white-space: nowrap; flex: none; }
.pl-shopee { background: #EE4D2D; color: #fff; }
.pl-mercadolivre { background: #FFE600; color: #2D3277; }
.pl-aliexpress { background: #D4280C; color: #fff; }
.pl-outro { background: #DCE5EE; color: var(--navy); }
.pn-tag { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 8px; font-size: 12.5px; font-weight: 800; }
.pn-tag .pn-ico { width: 15px; height: 15px; }
.pn-tag-atraso { background: var(--coral); color: #fff; }
.pn-tag-problema { background: var(--vermelho-claro); color: var(--vermelho); }
.pn-tag-ok { background: var(--verde-claro); color: var(--verde); height: 22px; font-size: 11.5px; }

/* vazio / erro */
.pn-vazio { grid-column: 1 / -1; background: #fff; border-radius: var(--pn-raio); box-shadow: var(--pn-sombra); padding: 40px 20px; text-align: center; display: grid; gap: 10px; justify-items: center; }
.pn-vazio h2 { font-size: 20px; }
.pn-vazio p { color: var(--texto-2); max-width: 420px; }
.pn-vazio .pn-btn { margin-top: 6px; }
.pn-vazio-img { width: 110px; height: auto; margin-bottom: 4px; }
.pn-vazio-erro .pn-ico.grande { color: var(--vermelho); }

/* ---------- diálogos ---------- */
.pn-dlg { padding: 0; border: 0; color: var(--texto); background: var(--espuma); max-width: none; max-height: none; overflow: hidden; }
.pn-dlg::backdrop { background: rgba(10, 37, 64, .45); backdrop-filter: blur(3px); }
.pn-gaveta { margin: 0 0 0 auto; width: 100%; height: 100%; height: 100dvh; }
@media (min-width: 760px) {
  .pn-gaveta { width: min(720px, 100vw); border-radius: 24px 0 0 24px; box-shadow: -30px 0 80px rgba(10, 37, 64, .25); }
  .pn-gaveta-larga { width: min(820px, 100vw); }
}
.pn-gaveta[open] { animation: pn-desliza .32s var(--ease); }
@keyframes pn-desliza { from { transform: translateX(40px); opacity: 0; } }
.pn-dlg-meio { margin: auto; width: calc(100% - 24px); max-width: 600px; max-height: calc(100dvh - 24px); border-radius: 24px; box-shadow: var(--sombra-l); }
.pn-dlg-meio .pn-dlg-caixa { max-height: calc(100dvh - 24px); }
.pn-dlg-meio[open] { animation: pn-sobe .25s var(--ease); }
@keyframes pn-sobe { from { transform: translateY(16px); opacity: 0; } }
.pn-dlg-caixa { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.pn-dlg-topo { flex: none; display: flex; align-items: center; gap: 8px; padding: 10px 12px 10px 8px; background: #fff; border-bottom: 1px solid var(--pn-borda); min-height: 60px; }
.pn-dlg-titulo { flex: 1; min-width: 0; }
.pn-dlg-topo h2, .pn-dlg-h { font-size: 19px; letter-spacing: -.02em; }
.pn-dlg-corpo { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px var(--pn-gutter) 28px; }
.pn-dlg-pe { flex: none; display: flex; gap: 10px; justify-content: flex-end; padding: 12px var(--pn-gutter) calc(12px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--pn-borda); }
.pn-dlg-pe .pn-btn { flex: 1; }
@media (min-width: 600px) { .pn-dlg-pe .pn-btn { flex: none; min-width: 120px; } }
.pn-pe-esq { margin-right: auto; flex: none !important; min-width: 0 !important; padding: 0 14px; }
.so-pc { display: none !important; }
@media (min-width: 760px) {
  .so-pc { display: inline-grid !important; }
  .so-celular { display: none !important; }
  .pn-dlg-topo { padding: 12px 16px 12px 20px; }
  .pn-dlg-topo .pn-icone-btn { order: 2; }
}
@media (max-width: 459px) { .so-pc-txt { display: none; } }

.pn-dlg-confirma { margin: auto; width: calc(100% - 32px); max-width: 420px; border-radius: 22px; background: #fff; box-shadow: var(--sombra-l); }
.pn-confirma { padding: 24px 22px 20px; display: grid; gap: 10px; }
.pn-confirma h2 { font-size: 21px; }
.pn-confirma p { color: var(--texto-2); }
.pn-confirma-acoes { display: flex; gap: 10px; justify-content: flex-end; margin-top: 10px; flex-wrap: wrap; }
.pn-confirma-acoes .pn-btn { flex: 1; }

/* ---------- pedido aberto ---------- */
.pn-ped-titulo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.pn-ped-titulo h2 { font-size: 19px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pn-ped-titulo h2 .pn-mono { font-size: 16px; }
@media (max-width: 459px) { .pn-ped-palavra { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .pn-ped-titulo { flex-wrap: nowrap; } }
.pn-ped-meta { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; margin: 0 0 16px; background: var(--pn-borda); border-radius: 14px; overflow: hidden; box-shadow: var(--pn-sombra); }
.pn-ped-meta div { background: #fff; padding: 9px 12px; min-width: 0; grid-column: span 2; }
.pn-ped-meta div:nth-child(-n+2) { grid-column: span 3; }
@media (min-width: 600px) { .pn-ped-meta { grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr)); } .pn-ped-meta div, .pn-ped-meta div:nth-child(-n+2) { grid-column: auto; padding: 10px 14px; } }
.pn-ped-meta dt { font-size: 12px; font-weight: 700; color: var(--texto-3); }
.pn-ped-meta dd { margin: 0; font-weight: 800; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.pn-alerta { display: flex; gap: 12px; align-items: flex-start; background: #fff; border-radius: 14px; padding: 12px 14px; margin-bottom: 12px; box-shadow: inset 0 0 0 1.5px var(--pn-borda); font-size: 14.5px; }
.pn-alerta > .pn-ico { margin-top: 1px; color: var(--texto-2); }
.pn-alerta > div { flex: 1; min-width: 0; display: grid; gap: 10px; }
.pn-alerta-coral { background: #FFF2EE; box-shadow: inset 0 0 0 1.5px #FFC8B9; color: #8F2F18; }
.pn-alerta-coral > .pn-ico { color: var(--coral-escuro); }
.pn-alerta-problema { background: var(--vermelho-claro); box-shadow: inset 0 0 0 1.5px #F6C2B4; color: #7E2813; }
.pn-alerta-problema > .pn-ico { color: var(--vermelho); }
.pn-alerta-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.pn-alerta-acoes .pn-btn { max-width: 100%; }
.pn-alerta ul { margin: 0; padding-left: 18px; }

.pn-sec { margin-top: 22px; }
.pn-sec-titulo { font-size: 13px; font-family: var(--mono); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-2); margin-bottom: 10px; }
.pn-sec-cabeca { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }

.pn-item { background: #fff; border-radius: var(--pn-raio); box-shadow: var(--pn-sombra); padding: 14px; display: grid; gap: 12px; }
.pn-item + .pn-item { margin-top: 12px; }
.pn-item-topo { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center; }
.pn-item-topo img { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; background: var(--espuma); }
.pn-item-nome { font-weight: 800; font-size: 15.5px; line-height: 1.3; }
.pn-item-var { font-size: 13.5px; color: var(--texto-2); }
.pn-item-qtd { font-size: 13px; color: var(--texto-2); }
.pn-item-qtd b { color: var(--navy); }
.pn-item-qtd .pn-mono { font-size: 12px; }
.pn-sem-forn { display: flex; gap: 8px; align-items: center; color: var(--vermelho); font-weight: 700; font-size: 14px; background: var(--vermelho-claro); border-radius: 12px; padding: 10px 12px; }

.pn-compras { display: grid; gap: 10px; }
.pn-compra { border-radius: 14px; padding: 14px; background: var(--espuma); box-shadow: inset 0 0 0 1px var(--pn-borda); display: grid; gap: 12px; }
.pn-compra.cp-pendente, .pn-compra.cp-aberto { background: #fff; box-shadow: inset 0 0 0 1.5px var(--pn-borda-forte); }
.pn-compra-topo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pn-compra-nome { flex: 1; min-width: 120px; font-weight: 700; font-size: 14.5px; line-height: 1.3; }
.pn-compra-info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; margin: 0; }
.pn-compra-info dt { font-size: 12px; font-weight: 700; color: var(--texto-3); }
.pn-compra-info dd { margin: 0; font-weight: 700; font-size: 14px; overflow-wrap: anywhere; }
.pn-compra-var { grid-column: 1 / -1; }
.pn-compra-var dd { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 3px; }
.pn-var { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--oceano); color: var(--oceano-escuro); font-weight: 700; font-size: 13px; }
.pn-feitos { display: grid; gap: 6px; padding: 10px 12px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--pn-borda); }
.pn-dado { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.pn-dado > span:first-child { color: var(--texto-3); font-weight: 700; font-size: 12.5px; min-width: 110px; }
.pn-dado b { font-weight: 800; }

.pn-comprar {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 56px; padding: 0 20px;
  border-radius: 999px; background: var(--coral); color: #fff; font-weight: 800; font-size: 17px; letter-spacing: -.01em;
  box-shadow: 0 8px 22px rgba(255, 107, 74, .32); transition: background .15s, box-shadow .15s, transform .15s;
}
.pn-comprar .pn-ico { width: 22px; height: 22px; }
.pn-comprar:hover:not(:disabled) { background: var(--coral-escuro); box-shadow: 0 12px 28px rgba(255, 107, 74, .4); }
.pn-comprar:active:not(:disabled) { transform: scale(.985); }
.pn-comprar:disabled { opacity: .7; cursor: progress; }
.pn-comprar:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; border-radius: 999px; }
.pn-ver-loja { justify-self: start; }
.pn-trocar { display: grid; gap: 6px; }
.pn-trocar label { font-size: 13px; font-weight: 700; color: var(--texto-2); }
.pn-trocar select { min-height: 42px; font-size: 14.5px; }

.pn-registrar { border-top: 1px dashed var(--pn-borda-forte); padding-top: 4px; }
.pn-registrar summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; min-height: 40px; font-weight: 700; font-size: 14px; color: var(--oceano-escuro); border-radius: 8px; }
.pn-registrar summary::-webkit-details-marker { display: none; }
.pn-registrar summary::before { content: ''; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .2s; margin: 0 4px 0 2px; }
.pn-registrar[open] summary::before { transform: rotate(45deg); }
.pn-registrar form { padding: 6px 0 4px; }

/* cliente: linhas com copiar */
.pn-copiaveis { background: #fff; border-radius: 14px; box-shadow: var(--pn-sombra); overflow: hidden; }
.pn-copiaveis + .pn-copiaveis { margin-top: 10px; }
.pn-linha-copiar { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; min-height: 50px; }
.pn-linha-copiar + .pn-linha-copiar { border-top: 1px solid #EDF2F7; }
.pn-lc-rotulo { font-size: 12.5px; font-weight: 700; color: var(--texto-3); }
.pn-lc-valor { font-weight: 700; font-size: 15px; overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; }
@media (min-width: 600px) { .pn-linha-copiar { grid-template-columns: 130px minmax(0, 1fr) auto; } }
.pn-copiar { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; min-width: 40px; padding: 0 12px; border-radius: 10px; color: var(--oceano-escuro); font-weight: 700; font-size: 13px; background: rgba(30, 127, 212, .07); transition: background .15s, color .15s; flex: none; }
.pn-copiar:hover { background: rgba(30, 127, 212, .15); }
.pn-copiar .pn-ico { width: 17px; height: 17px; }
.pn-copiar .i-ok { display: none; }
.pn-copiar.feito { background: var(--verde-claro); color: var(--verde); }
.pn-copiar.feito .i-ok { display: inline-grid; }
.pn-copiar.feito .i-copiar { display: none; }
@media (max-width: 599px) { .pn-copiar .pn-copiar-txt { display: none; } .pn-copiar { padding: 0; width: 40px; } }
.pn-copiar.mini { height: 30px; min-width: 30px; width: 30px; padding: 0; }
.pn-copiar.mini .pn-copiar-txt { display: none; }
.pn-copiar.mini .pn-ico { width: 15px; height: 15px; }
.pn-copiar-tudo { width: 100%; margin-top: 12px; }

.pn-notas { display: grid; gap: 10px; }
.pn-notas .pn-btn { justify-self: end; }
.pn-acoes { display: flex; flex-wrap: wrap; gap: 10px; }
.pn-acoes .pn-btn { flex: 1 1 180px; }
.pn-hist { background: #fff; border-radius: 14px; box-shadow: var(--pn-sombra); }
.pn-hist summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-radius: 14px; }
.pn-hist summary::-webkit-details-marker { display: none; }
.pn-hist summary .pn-sec-titulo { margin: 0; }
.pn-hist-n { font-size: 13px; color: var(--texto-3); font-weight: 600; }
.pn-hist-lista { list-style: none; margin: 0; padding: 0 16px 14px; display: grid; gap: 0; }
.pn-hist-lista li { display: grid; gap: 2px; padding: 10px 0 10px 18px; position: relative; border-left: 2px solid #E3EBF2; margin-left: 4px; }
.pn-hist-lista li::before { content: ''; position: absolute; left: -6px; top: 15px; width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2.5px var(--oceano); }
.pn-hist-lista time { font-size: 12px; color: var(--texto-3); font-weight: 700; }
.pn-hist-lista span { font-size: 14px; }
.pn-hist .pn-dica { padding: 0 16px 14px; }

/* pedido manual */
.pn-man-itens { display: grid; gap: 12px; margin-bottom: 12px; }
.pn-man-item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 10px; align-items: end; background: #fff; padding: 12px; border-radius: 14px; box-shadow: var(--pn-sombra); }
.pn-man-item .largo { grid-column: 1 / -1; }
@media (min-width: 600px) { .pn-man-item { grid-template-columns: minmax(0, 3fr) 80px minmax(0, 1fr) auto; } .pn-man-item .largo { grid-column: auto; } }
.pn-man-tirar { margin-bottom: 3px; }

/* ---------- produtos ---------- */
.pn-subabas { display: inline-flex; gap: 4px; padding: 4px; background: #E3EDF5; border-radius: 999px; margin-bottom: 16px; }
.pn-subabas button { height: 40px; padding: 0 18px; border-radius: 999px; font-weight: 700; font-size: 14.5px; color: var(--texto-2); }
.pn-subabas button[aria-selected=true] { background: #fff; color: var(--navy); box-shadow: 0 1px 4px rgba(10, 37, 64, .12); }
.pn-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 14px; }
.pn-barra .pn-dica { flex: 1; min-width: 220px; }
.pn-busca-flex { flex: 1 1 260px; margin: 0; }
.pn-filtros-p { margin-bottom: 0; flex: 0 1 auto; }
@media (max-width: 899px) { .pn-filtros-p { flex-basis: 100%; } }

.pn-linha-prod {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) 20px; grid-template-areas: "foto txt seta" "foto dir seta";
  gap: 4px 14px; align-items: center; width: 100%; text-align: left; background: #fff; border-radius: 14px; padding: 12px 12px 12px 12px;
  box-shadow: var(--pn-sombra); border: 1.5px solid transparent; transition: border-color .15s;
}
.pn-linha-prod:hover { border-color: rgba(30, 127, 212, .35); }
.pn-linha-prod img { grid-area: foto; width: 56px; height: 56px; border-radius: 12px; object-fit: cover; background: var(--espuma); }
.pn-linha-prod.sem-mapa { background: linear-gradient(90deg, #FFF6F3, #fff 40%); }
.pn-lp-txt { grid-area: txt; min-width: 0; display: grid; }
.pn-lp-nome { font-weight: 800; font-size: 14.5px; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pn-lp-var { font-size: 13px; color: var(--texto-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pn-lp-var b { color: var(--navy); font-weight: 700; }
.pn-lp-dir { grid-area: dir; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.pn-lp-margem { font-size: 13px; font-weight: 800; color: var(--verde); }
.pn-lp-margem.negativo { color: var(--vermelho); }
.pn-lp-margem.vazio { color: var(--texto-3); font-weight: 600; }
.pn-lp-plats { display: flex; gap: 4px; }
.pn-lp-seta { grid-area: seta; color: var(--texto-3); width: 18px; height: 18px; }
@media (min-width: 760px) {
  .pn-linha-prod { grid-template-columns: 56px minmax(0, 1fr) auto 20px; grid-template-areas: "foto txt dir seta"; padding: 10px 16px 10px 10px; }
  .pn-lp-dir { justify-content: flex-end; }
  .pn-lp-dir .pn-status { order: 3; }
}
.pn-linha-prod.esqueleto { min-height: 80px; }
.pn-linha-prod.esqueleto i:first-child { grid-area: foto; width: 56px; height: 56px; border-radius: 12px; }
.pn-linha-prod.esqueleto i:last-child { grid-area: txt; height: 16px; width: 70%; }
.pn-sub-titulo { font-size: 15px; margin: 18px 0 2px; color: var(--texto-2); }
[data-lista-prod] { gap: 8px; }

/* editor do mapeamento */
.pn-mapa-cabeca { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; align-items: center; margin-bottom: 14px; }
.pn-mapa-cabeca img { width: 72px; height: 72px; border-radius: 14px; object-fit: cover; background: #fff; box-shadow: var(--pn-sombra); }
.pn-mapa-cabeca h2 { font-size: 20px; margin-bottom: 2px; }
.pn-mapa-cabeca .pn-sobre { margin-bottom: 4px; text-transform: none; letter-spacing: 0; font-family: var(--fonte); font-size: 13px; font-weight: 700; color: var(--texto-2); }
.pn-margem {
  position: sticky; top: -16px; z-index: 3; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
  background: var(--pn-borda); border-radius: 14px; overflow: hidden; box-shadow: 0 6px 18px rgba(10, 37, 64, .08); margin: 0 0 14px;
}
.pn-margem div { background: #fff; padding: 10px 12px; display: grid; min-width: 0; }
.pn-margem span { font-size: 12px; font-weight: 700; color: var(--texto-3); }
.pn-margem small { font-size: 11.5px; font-weight: 700; color: var(--verde); }
.pn-margem .negativo small { color: var(--vermelho); }
.pn-margem b { font-size: 16px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pn-margem .pn-margem-final { background: var(--verde-claro); }
.pn-margem .pn-margem-final b { color: var(--verde); }
.pn-margem .pn-margem-final.negativo { background: var(--vermelho-claro); }
.pn-margem .pn-margem-final.negativo b { color: var(--vermelho); }
.pn-margem.incompleto .pn-margem-final { background: #fff; }
.pn-margem.incompleto .pn-margem-final b { color: var(--texto-3); }
.pn-explica { background: #fff; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--pn-borda); padding: 0 14px; margin-bottom: 14px; font-size: 14px; color: var(--texto-2); }
.pn-explica summary { cursor: pointer; font-weight: 700; color: var(--oceano-escuro); padding: 12px 0; }
.pn-explica p { margin-bottom: 10px; }
.pn-comps { display: grid; gap: 14px; }
.pn-comp { border: 0; margin: 0; min-width: 0; background: #fff; border-radius: var(--pn-raio); box-shadow: var(--pn-sombra); padding: 14px; display: grid; gap: 12px; }
.pn-comp-topo { display: grid; grid-template-columns: 30px minmax(0, 1fr) 76px auto; gap: 10px; align-items: end; }
.pn-comp-n { width: 30px; height: 30px; border-radius: 50%; background: var(--navy); color: #fff; font-weight: 800; font-size: 14px; display: grid; place-items: center; margin-bottom: 8px; }
.pn-comp-topo .pn-icone-btn { margin-bottom: 3px; }
.pn-ofertas-titulo { font-size: 13.5px; color: var(--texto-2); }
.pn-ofertas-titulo b { color: var(--navy); }
.pn-ofertas { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pn-oferta { background: var(--espuma); border-radius: 14px; padding: 12px; display: grid; gap: 10px; box-shadow: inset 0 0 0 1px var(--pn-borda); }
.pn-oferta.escolhida { box-shadow: inset 0 0 0 2px var(--oceano); background: #F6FAFE; }
.pn-oferta.pausada { opacity: .78; }
.pn-oferta-topo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pn-oferta-ordem { font-weight: 800; font-size: 14px; }
.pn-oferta-mover { margin-left: auto; display: flex; gap: 2px; }
.pn-oferta-mover .pn-icone-btn { width: 34px; height: 34px; background: #fff; box-shadow: inset 0 0 0 1px var(--pn-borda); }
.pn-oferta-mover .pn-icone-btn .pn-ico { width: 18px; height: 18px; }
.pn-add-comp { width: 100%; border-style: dashed; }
@media (max-width: 459px) { .pn-comp-topo { grid-template-columns: 30px minmax(0, 1fr) 64px auto; gap: 8px; } }

/* fornecedores */
@media (min-width: 700px) { .pn-grade-forn { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } }
.pn-forn { background: #fff; border-radius: var(--pn-raio); box-shadow: var(--pn-sombra); padding: 16px; display: grid; gap: 6px; align-content: start; }
.pn-forn.inativo { opacity: .7; }
.pn-forn-topo { display: flex; gap: 8px; align-items: center; }
.pn-forn h3 { font-size: 17px; letter-spacing: -.01em; margin-top: 4px; overflow-wrap: anywhere; }
.pn-forn-linha { font-size: 14px; overflow-wrap: anywhere; }
.pn-forn-linha span { color: var(--texto-3); font-weight: 700; }
.pn-forn-notas { font-size: 13.5px; color: var(--texto-2); background: var(--espuma); padding: 8px 10px; border-radius: 10px; white-space: pre-line; overflow-wrap: anywhere; }
.pn-forn-acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }

/* ---------- ajustes ---------- */
.pn-config { display: grid; gap: 16px; }
@media (min-width: 960px) { .pn-config { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.pn-config-col { display: grid; gap: 16px; min-width: 0; }
.pn-cartao { background: #fff; border-radius: 20px; box-shadow: var(--pn-sombra); padding: 20px 18px; display: grid; gap: 14px; min-width: 0; }
.pn-cartao > p { color: var(--texto-2); font-size: 14.5px; }
.pn-cartao-titulo { font-size: 19px; letter-spacing: -.02em; }
.pn-cartao > .pn-btn, .pn-cartao > .pn-link { justify-self: start; }
.pn-integ { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.pn-integ li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px 0; border-top: 1px solid #EDF2F7; }
.pn-integ li:first-child { border-top: 0; }
.pn-integ-ico { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; }
.pn-integ-ico svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pn-integ li.ok .pn-integ-ico { background: var(--verde-claro); color: var(--verde); }
.pn-integ li.falta .pn-integ-ico { background: var(--ambar-claro); color: var(--ambar); }
.pn-integ-nome { font-weight: 800; font-size: 14.5px; }
.pn-integ-txt { font-size: 13.5px; color: var(--texto-2); }
.pn-integ li.ok .pn-integ-txt { color: var(--verde); font-weight: 600; }
.pn-caixa-copiar { display: flex; align-items: center; gap: 8px; background: var(--espuma); border-radius: 12px; padding: 6px 6px 6px 12px; box-shadow: inset 0 0 0 1px var(--pn-borda); min-width: 0; }
.pn-caixa-copiar code { flex: 1; min-width: 0; background: none; padding: 6px 0; font-size: 13px; overflow-wrap: anywhere; word-break: break-all; }
.pn-passos { margin: 0; padding: 0; list-style: none; counter-reset: passo; display: grid; gap: 10px; }
.pn-passos li { counter-increment: passo; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; font-size: 14.5px; align-items: start; }
.pn-passos li::before { content: counter(passo); width: 26px; height: 26px; border-radius: 50%; background: rgba(30, 127, 212, .1); color: var(--oceano-escuro); font-weight: 800; font-size: 13px; display: grid; place-items: center; }
.pn-chave-form { display: flex; align-items: end; gap: 10px; flex-wrap: wrap; padding-top: 4px; border-top: 1px solid #EDF2F7; padding-top: 14px; }
.pn-chave-form .pn-campo { flex: 1 1 200px; }
.pn-chave-nova { display: grid; gap: 8px; background: #FFF8E8; border-radius: 14px; padding: 12px; box-shadow: inset 0 0 0 1.5px #F5D58E; font-size: 14px; color: #6B4500; }
.pn-chave-nova .pn-caixa-copiar { background: #fff; }
.pn-chave-box:empty { display: none; }
.pn-sinc-res:empty { display: none; }
.pn-sinc-nums { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pn-sinc-nums li { background: var(--espuma); border-radius: 10px; padding: 8px 12px; font-size: 13.5px; color: var(--texto-2); }
.pn-sinc-nums b { color: var(--navy); font-size: 16px; }
.girando .pn-ico { animation: pn-gira 1s linear infinite; }
.pn-log { max-height: 360px; overflow-y: auto; margin: 0 -4px; padding: 0 4px; }
.pn-log-lista { list-style: none; margin: 0; padding: 0; }
.pn-log-lista li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 2px 10px; padding: 9px 0; border-top: 1px solid #EDF2F7; font-size: 13.5px; }
.pn-log-lista li:first-child { border-top: 0; }
.pn-log-lista time { color: var(--texto-3); font-weight: 700; font-size: 12.5px; padding-top: 1px; }
.pn-log-lista .pn-log-txt { overflow-wrap: anywhere; }
.pn-log-lista .pn-link { grid-column: 2; font-size: 13px; padding: 0; }
.pn-log-lista li.tp-erro .pn-log-txt { color: var(--vermelho); font-weight: 600; }

/* ---------- aviso rápido (popover: fica acima dos diálogos) ---------- */
.pn-toast {
  position: fixed; left: 50%; right: auto; top: auto; bottom: 20px; z-index: 400; margin: 0; border: 0; inset-inline-start: 50%;
  transform: translate(-50%, 160%); opacity: 0; overflow: visible;
  display: flex; align-items: center; gap: 10px; width: max-content; max-width: calc(100vw - 32px);
  background: var(--navy); color: #fff; padding: 12px 18px; border-radius: 16px; font-weight: 600; font-size: 14.5px;
  box-shadow: var(--sombra-l); transition: transform .35s var(--ease), opacity .25s; pointer-events: none;
}
.pn-toast[popover]:not(:popover-open) { display: none; }
.pn-toast.mostrar { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; animation: pn-toast-entra .35s var(--ease); }
@keyframes pn-toast-entra { from { transform: translate(-50%, 60%); opacity: 0; } }
.pn-toast .pn-ico { color: #7FE0A6; }
.pn-toast.erro { background: #7E2813; }
.pn-toast.erro .pn-ico { color: #FFC2B3; }
.pn-toast-acao { color: #fff; font-weight: 800; text-decoration: underline; white-space: nowrap; }
@media (max-width: 759px) { body[data-tela=app] .pn-toast { bottom: calc(84px + env(safe-area-inset-bottom)); } html.pn-travado body .pn-toast { bottom: calc(84px + env(safe-area-inset-bottom)); } }

/* =====================================================================
   ANALÍTICOS (js/painel-analise.js)
   Barras num tom só (oceano); o caminho da compra usa a rampa do claro ao escuro do mesmo azul.
   Verde e vermelho só nas setas de comparação e nos selos de velocidade (sempre com seta, ícone ou palavra junto).
   ===================================================================== */
.an { display: grid; gap: 16px; min-width: 0; }
.an-corpo { display: grid; gap: 16px; min-width: 0; }
.an input[type=date] {
  width: 100%; min-width: 0; min-height: 46px; border-radius: 12px; border: 1.5px solid var(--pn-borda-forte);
  background: #fff; padding: 8px 12px; font-size: 16px; color: var(--navy); font-family: inherit;
}
.an input[type=date]:focus { outline: none; border-color: var(--oceano); box-shadow: 0 0 0 3px rgba(30, 127, 212, .18); }
.an h3.an-sub { font-size: 14px; font-weight: 800; letter-spacing: 0; color: var(--navy); margin: 6px 0 -4px; }
.an-sobre { color: var(--texto-2); font-size: 14px; margin-top: 4px; }
.an-bloco { gap: 14px; }
.an-bloco > .an-bloco-topo h2:focus { outline: none; }
.an-vazio { color: var(--texto-3); font-size: 14px; padding: 4px 0; }
.an-nota { color: var(--texto-2); font-size: 13px; }
.an-nota-ico { display: flex; gap: 8px; align-items: flex-start; }
.an-nota-ico .pn-ico { width: 17px; height: 17px; color: var(--ambar); margin-top: 1px; }
.an-destaque { display: flex; gap: 8px; align-items: flex-start; background: var(--ambar-claro); color: var(--ambar); border-radius: 12px; padding: 10px 12px; font-size: 14px; font-weight: 700; }
.an-destaque .pn-ico { width: 18px; height: 18px; margin-top: 1px; }
.an-destaque-azul { background: #E9F3FD; color: var(--oceano-escuro); }
.an-alerta-info { background: #E9F3FD; box-shadow: inset 0 0 0 1.5px #C7DFF7; color: var(--navy); margin: 0; }
.an-alerta-info > .pn-ico { color: var(--oceano); }
.an-lista-texto { margin: 0; padding-left: 18px; display: grid; gap: 6px; color: var(--texto-2); font-size: 14px; }
.an-inter { padding-top: 6px; border-top: 1px solid #EDF2F7; }

/* agora na loja */
.an-vivo {
  background: var(--navy); color: #fff; border-radius: 20px; padding: 18px; display: grid; gap: 14px; min-width: 0;
  background-image: radial-gradient(420px 220px at 100% 0%, rgba(53, 203, 232, .28), transparent 70%); box-shadow: var(--pn-sombra);
}
.an-vivo-topo { display: grid; gap: 4px; }
.an-vivo-topo.esqueleto span { height: 14px; width: 40%; background: rgba(255, 255, 255, .12); animation: none; }
.an-vivo-topo.esqueleto b { height: 34px; width: 60%; margin-top: 8px; background: rgba(255, 255, 255, .12); animation: none; }
.an-vivo-titulo { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #A9CBE8; font-family: var(--mono); }
.an-pulso { position: relative; width: 10px; height: 10px; border-radius: 50%; background: #6F8BA6; flex: none; }
.an-pulso.ligado { background: #7FE0A6; }
.an-pulso.ligado::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid #7FE0A6; opacity: 0; animation: an-pulso 2s ease-out infinite; }
@keyframes an-pulso { 0% { transform: scale(.5); opacity: .9; } 100% { transform: scale(1.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .an-pulso.ligado::after { animation: none; } }
.an-vivo-num { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 8px; }
.an-vivo-num b { font-size: clamp(38px, 7vw, 52px); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
.an-vivo-num span { font-size: 17px; font-weight: 700; }
.an-vivo-sub { color: #A9CBE8; font-size: 13px; }
.an-vivo-vazio { color: #CFE2F2; font-size: 14.5px; }
.an-vivo-erro { color: #FFD2C6; font-size: 14.5px; font-weight: 600; }
.an-link-claro { color: #fff; text-decoration-color: rgba(255, 255, 255, .5); }
.an-vivo-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
@media (min-width: 760px) { .an-vivo-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.an-pessoa { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: start; background: rgba(255, 255, 255, .08); border-radius: 14px; padding: 10px 12px; min-width: 0; }
.an-pessoa-ico { width: 30px; height: 30px; border-radius: 10px; background: rgba(255, 255, 255, .1); display: grid; place-items: center; color: #CFE2F2; }
.an-pessoa-ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.an-pessoa-txt { min-width: 0; display: grid; gap: 1px; }
.an-pessoa-pag { font-weight: 800; font-size: 14.5px; overflow-wrap: anywhere; }
.an-pessoa-de { font-size: 13px; color: #CFE2F2; overflow-wrap: anywhere; }
.an-pessoa-tempo { font-size: 12.5px; color: #A9CBE8; }
.an-pessoa-selos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.an-pessoa-selos span { font-size: 12px; font-weight: 800; background: rgba(127, 224, 166, .16); color: #B4F0CB; border-radius: 999px; padding: 3px 9px; }
.an-vivo-feed h3 { font-size: 13px; font-weight: 700; color: #A9CBE8; letter-spacing: 0; margin-bottom: 6px; }
.an-vivo-feed ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.an-vivo-feed li { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 8px; font-size: 13.5px; padding: 5px 0; border-top: 1px solid rgba(255, 255, 255, .08); }
.an-vivo-feed li:first-child { border-top: 0; }
.an-vivo-feed time { font-family: var(--mono); font-size: 12px; color: #A9CBE8; padding-top: 1px; }
.an-vivo-feed li span { overflow-wrap: anywhere; }
.an-feed-carrinho span, .an-feed-pagamento span { font-weight: 700; color: #B4F0CB; }

/* período */
.an-periodo { display: grid; gap: 10px; min-width: 0; }
.an-chips { margin-bottom: 0; }
.pn-chip.an-chip { padding: 0 14px; }
.an-datas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: end; background: #fff; border-radius: 16px; padding: 12px; box-shadow: var(--pn-sombra); }
.an-datas-btn { grid-column: 1 / -1; }
.an-datas-nota { grid-column: 1 / -1; font-size: 12.5px; color: var(--texto-3); }
@media (min-width: 600px) { .an-datas { grid-template-columns: minmax(0, 200px) minmax(0, 200px) auto; justify-content: start; } .an-datas-btn { grid-column: auto; } }
.an-periodo-info { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; }
.an-periodo-txt { display: grid; gap: 1px; min-width: 0; flex: 1 1 260px; }
.an-periodo-txt b { font-size: 15px; font-weight: 800; }
.an-periodo-txt span { font-size: 13px; color: var(--texto-2); }
.an-atualizar { flex: none; }

/* atalhos */
.an-atalhos { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; font-size: 13.5px; }
.an-atalhos > span { color: var(--texto-3); font-weight: 700; font-size: 13px; }
.an-atalhos .pn-link { font-size: 13.5px; }

/* números do resumo */
.an-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 760px) { .an-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } }
.an-kpi { background: var(--espuma); border-radius: 14px; padding: 12px 14px; display: grid; gap: 2px; align-content: start; min-width: 0; }
.an-corpo > .an-kpis .an-kpi { background: #fff; box-shadow: var(--pn-sombra); }
.an-kpi-nome { font-size: 12.5px; font-weight: 800; color: var(--texto-2); }
.an-kpi-valor { font-size: clamp(22px, 2.6vw, 28px); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; overflow-wrap: anywhere; }
.an-kpi-sub { font-size: 12.5px; font-weight: 600; color: var(--texto-2); }
.an-kpi-explica { font-size: 12px; color: var(--texto-3); margin-top: 4px; line-height: 1.4; }
.an-kpi.destaque { background: var(--navy); color: #fff; background-image: radial-gradient(240px 140px at 100% 0%, rgba(53, 203, 232, .35), transparent 70%); }
.an-kpi.destaque .an-kpi-nome, .an-kpi.destaque .an-kpi-sub, .an-kpi.destaque .an-kpi-explica { color: #A9CBE8; }
.an-kpi.destaque .an-delta.bom { color: #9BE8B8; }
.an-kpi.destaque .an-delta.ruim { color: #FFB4A3; }
.an-kpi.destaque .an-delta.igual { color: #A9CBE8; }
.an-kpi.esqueleto { min-height: 104px; }
.an-kpi.esqueleto span { height: 12px; width: 55%; }
.an-kpi.esqueleto b { height: 26px; width: 75%; margin-top: 8px; }
.an-delta { font-size: 12.5px; font-weight: 800; }
.an-delta.bom { color: var(--verde); }
.an-delta.ruim { color: var(--vermelho); }
.an-delta.igual { color: var(--texto-3); }

/* caminho até a compra */
.an-funil { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.an-funil-passo { display: grid; gap: 6px; }
.an-funil-topo { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.an-funil-num { width: 26px; height: 26px; border-radius: 50%; background: rgba(30, 127, 212, .1); color: var(--oceano-escuro); font-weight: 800; font-size: 13px; display: grid; place-items: center; }
.an-funil-nome { display: grid; min-width: 0; }
.an-funil-nome b { font-size: 15px; font-weight: 800; }
.an-funil-nome small { font-size: 12.5px; color: var(--texto-3); }
.an-funil-n { text-align: right; display: grid; }
.an-funil-n b { font-size: 18px; font-weight: 800; }
.an-funil-n small { font-size: 12px; color: var(--texto-2); font-weight: 600; white-space: nowrap; }
.an-funil-perda { font-size: 12.5px; color: var(--texto-2); padding-left: 36px; }

/* barras */
.an-trilho { height: 8px; border-radius: 2px; background: #EAF0F6; overflow: hidden; }
.an-trilho i { display: block; height: 100%; background: var(--oceano); border-radius: 0 4px 4px 0; }
.an-trilho-grosso { height: 16px; margin-left: 36px; }
.an-barras { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.an-barras li { display: grid; gap: 5px; min-width: 0; }
.an-b-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.an-b-nome { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 14.5px; font-weight: 700; overflow-wrap: anywhere; }
.an-b-nome a { color: var(--navy); text-decoration: underline; text-decoration-color: rgba(10, 37, 64, .25); text-underline-offset: 3px; }
.an-b-nome a:hover { color: var(--oceano-escuro); text-decoration-color: currentColor; }
.an-b-nome img { width: 36px; height: 36px; border-radius: 10px; object-fit: cover; background: var(--espuma); flex: none; }
.an-b-n { display: inline-flex; align-items: baseline; gap: 6px; flex: none; white-space: nowrap; }
.an-b-n b { font-size: 14px; font-weight: 800; }
.an-b-n small { font-size: 12px; color: var(--texto-3); font-weight: 700; min-width: 38px; text-align: right; }
.an-b-sub { font-size: 12.5px; color: var(--texto-2); }
.an-com-foto .an-trilho, .an-com-foto .an-b-sub { margin-left: 46px; }

/* anúncio × orgânico × direto */
.an-tipos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@media (min-width: 640px) { .an-tipos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.an-tipo { background: var(--espuma); border-radius: 14px; padding: 12px 14px; display: grid; gap: 2px; align-content: start; min-width: 0; }
.an-tipo-nome { font-size: 12.5px; font-weight: 800; color: var(--texto-2); }
.an-tipo b { font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.an-tipo small { font-size: 12.5px; color: var(--texto-2); font-weight: 600; }
.an-tipo-sobre { font-size: 12px; color: var(--texto-3); margin-top: 4px; }

/* pagamento */
.an-minis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 760px) { .an-minis { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.an-mini { background: var(--espuma); border-radius: 14px; padding: 12px 14px; display: grid; gap: 2px; align-content: start; min-width: 0; }
.an-mini span { font-size: 12.5px; font-weight: 800; color: var(--texto-2); }
.an-mini b { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.an-mini small { font-size: 12px; color: var(--texto-3); font-weight: 600; }
.an-mini.bom b { color: var(--verde); }
.an-mini.atencao { background: #FFF6EC; }
.an-mini.atencao b { color: var(--ambar); }

/* grade de blocos */
.an-grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
@media (min-width: 1000px) {
  .an-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; }
  .an-grade > #an-origem, .an-grade > #an-campanhas, .an-grade > #an-tempo, .an-grade > #an-horas { grid-column: 1 / -1; }
}
.an-lista-longa { display: grid; gap: 10px; justify-items: start; }
.an-lista-longa > .an-barras { width: 100%; }
.an-mais { font-size: 13.5px; }

/* gráfico de colunas */
.an-colunas { display: grid; gap: 6px; min-width: 0; }
.an-col-area { position: relative; height: 170px; }
@media (min-width: 760px) { .an-col-area { height: 210px; } }
.an-col-grade span { position: absolute; left: 0; right: 0; border-top: 1px solid #E6EDF4; font-size: 11px; color: var(--texto-3); line-height: 1; padding-top: 3px; font-variant-numeric: tabular-nums; }
.an-col-grade span:nth-child(1) { top: 0; }
.an-col-grade span:nth-child(2) { top: 50%; }
.an-col-grade span:nth-child(3) { top: auto; bottom: 0; border-top: 0; padding: 0; }
.an-cols { position: absolute; left: 36px; right: 0; top: 0; bottom: 0; display: flex; align-items: flex-end; gap: 2px; border-bottom: 1px solid #C9D6E2; }
.an-cols.finas { gap: 1px; }
.an-col { flex: 1 1 0; min-width: 0; height: 100%; display: flex; align-items: flex-end; justify-content: center; cursor: pointer; border-radius: 4px 4px 0 0; }
.an-col:focus-visible { outline-offset: 0; }
.an-col i { display: block; width: 100%; max-width: 26px; background: var(--oceano); border-radius: 4px 4px 0 0; transition: background .12s; }
.an-cols.finas .an-col i { border-radius: 2px 2px 0 0; }
.an-col:hover i, .an-col.ativa i { background: var(--oceano-escuro); }
.an-col-eixo { position: relative; height: 16px; margin-left: 36px; }
.an-col-eixo span { position: absolute; top: 0; transform: translateX(-50%); font-size: 11.5px; color: var(--texto-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.an-col-eixo span.primeiro { transform: none; }
.an-col-eixo span.ultimo { transform: translateX(-100%); }
.an-dica { position: absolute; z-index: 3; pointer-events: none; background: var(--navy); color: #fff; border-radius: 10px; padding: 6px 10px; font-size: 12.5px; display: grid; gap: 0; white-space: nowrap; box-shadow: 0 6px 18px rgba(10, 37, 64, .25); }
.an-dica span { color: #A9CBE8; font-size: 12px; }
.an-tabela-det summary { cursor: pointer; color: var(--oceano-escuro); font-weight: 700; font-size: 13.5px; width: max-content; max-width: 100%; padding: 4px 0; }
.an-tabela { width: 100%; max-width: 420px; border-collapse: collapse; font-size: 13.5px; margin-top: 8px; }
.an-tabela th, .an-tabela td { text-align: left; padding: 6px 10px; border-bottom: 1px solid #EDF2F7; font-weight: 600; }
.an-tabela thead th { font-size: 12.5px; color: var(--texto-2); font-weight: 800; }
.an-tabela td { text-align: right; font-variant-numeric: tabular-nums; }
.an-tabela thead th:last-child { text-align: right; }

/* seletor de página */
.an-seletor { display: grid; gap: 6px; max-width: 420px; }
.an-seletor > span { font-size: 13px; font-weight: 700; color: var(--texto-2); }

/* velocidade */
.an-vels { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.an-vel { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; background: var(--espuma); border-radius: 14px; padding: 12px 14px; }
.an-vel-nome { font-weight: 800; font-size: 14.5px; min-width: 96px; }
.an-vel-valor { font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.an-vel small { font-size: 12.5px; color: var(--texto-3); flex-basis: 100%; }
.an-status { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 800; }
.an-status .pn-ico { width: 15px; height: 15px; }
.an-status-bom { background: var(--verde-claro); color: var(--verde); }
.an-status-medio { background: var(--ambar-claro); color: var(--ambar); }
.an-status-ruim { background: var(--vermelho-claro); color: var(--vermelho); }

/* etiquetas dos links */
.an-ajuda .pn-passos li > div { display: grid; gap: 8px; min-width: 0; }
.an-ajuda .pn-passos li > div > p { font-size: 14.5px; }
.an-grade-fim { margin-top: 0; }

/* topo com 4 abas: em telas médias some o texto ao lado da marca */
@media (min-width: 760px) and (max-width: 979px) { .pn-marca span { display: none; } .pn-abas a { padding: 0 12px; } }

/* =====================================================================
   AGENDA (js/painel-agenda.js): calendário da loja
   Cor de cada tipo só ajuda a achar: o nome do tipo sempre aparece junto (etiqueta, filtro e legenda).
   ===================================================================== */
.ag {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0;
  --c-data: #D6336C; --cf-data: #FCE4EC;
  --c-feriado: #7A8EA3; --cf-feriado: #EDF1F5;
  --c-campanha: #6250D6; --cf-campanha: #ECE9FB;
  --c-post: #2A78D6; --cf-post: #E3EEFB;
  --c-anuncio: #EB6834; --cf-anuncio: #FDEBE3;
  --c-produto: #1BA673; --cf-produto: #DDF5EC;
  --c-tarefa: #C98500; --cf-tarefa: #FBF0D9;
  --c-outro: #52514E; --cf-outro: #EEEEEC;
}
.ag .c-data, .ag-dlg .c-data { --c: var(--c-data); --cf: var(--cf-data); }
.ag .c-feriado, .ag-dlg .c-feriado { --c: var(--c-feriado); --cf: var(--cf-feriado); }
.ag .c-campanha, .ag-dlg .c-campanha { --c: var(--c-campanha); --cf: var(--cf-campanha); }
.ag .c-post, .ag-dlg .c-post { --c: var(--c-post); --cf: var(--cf-post); }
.ag .c-anuncio, .ag-dlg .c-anuncio { --c: var(--c-anuncio); --cf: var(--cf-anuncio); }
.ag .c-produto, .ag-dlg .c-produto { --c: var(--c-produto); --cf: var(--cf-produto); }
.ag .c-tarefa, .ag-dlg .c-tarefa { --c: var(--c-tarefa); --cf: var(--cf-tarefa); }
.ag .c-outro, .ag-dlg .c-outro { --c: var(--c-outro); --cf: var(--cf-outro); }
.ag-dlg {
  --c-data: #D6336C; --cf-data: #FCE4EC; --c-feriado: #7A8EA3; --cf-feriado: #EDF1F5; --c-campanha: #6250D6; --cf-campanha: #ECE9FB;
  --c-post: #2A78D6; --cf-post: #E3EEFB; --c-anuncio: #EB6834; --cf-anuncio: #FDEBE3; --c-produto: #1BA673; --cf-produto: #DDF5EC;
  --c-tarefa: #C98500; --cf-tarefa: #FBF0D9; --c-outro: #52514E; --cf-outro: #EEEEEC;
}

/* barra: ‹ mês › Hoje · Mês | 12 meses | Lista · Novo */
.ag-barra { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.ag-nav { display: flex; align-items: center; gap: 4px; min-width: 0; grid-column: 1 / -1; }
.ag-seta { width: 42px; height: 42px; border-radius: 999px; display: inline-grid; place-items: center; background: #fff; color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--pn-borda); flex: none; }
.ag-seta:hover { box-shadow: inset 0 0 0 1.5px var(--oceano); color: var(--oceano-escuro); }
.ag-titulo { flex: 1; min-width: 0; text-align: center; font-size: clamp(18px, 2.6vw, 25px); letter-spacing: -.02em; line-height: 1.2; padding: 0 4px; }
.ag-hoje { flex: none; margin-left: 6px; }
.ag-vistas { margin: 0; justify-self: start; }
.ag-vistas button { height: 38px; padding: 0 14px; font-size: 14px; }
.ag-novo { justify-self: end; }
@media (min-width: 760px) {
  .ag-barra { grid-template-columns: minmax(0, 1fr) auto auto; gap: 14px; }
  .ag-nav { grid-column: auto; }
  .ag-titulo { flex: 0 1 auto; text-align: left; padding: 0 8px; }
}

/* filtros e busca */
.ag-procura { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; }
.ag-filtros { margin-bottom: 0; }
.ag-fchip { padding: 0 8px 0 12px; height: 38px; font-size: 13.5px; }
.ag-bola { width: 10px; height: 10px; border-radius: 50%; background: var(--c); flex: none; }
.ag-fchip[aria-pressed=true] .ag-bola { box-shadow: 0 0 0 2px #fff; }
.ag-busca { margin: 0; display: block; }
.ag-busca .pn-ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--texto-3); pointer-events: none; }
.ag-busca .pn-ico svg { position: static; transform: none; }
.ag-busca input[type=search] { min-height: 44px; }
@media (min-width: 980px) {
  .ag-procura { grid-template-columns: minmax(0, 1fr) 260px; align-items: center; }
  .ag-filtros { flex-wrap: wrap; overflow: visible; margin: 0; padding: 2px 0; }
}
.ag-ocultos { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 13.5px; color: var(--texto-2); background: #fff; border-radius: 12px; padding: 6px 14px; box-shadow: inset 0 0 0 1px var(--pn-borda); }
.ag-carregando { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 220px; color: var(--texto-2); font-weight: 600; background: #fff; border-radius: 20px; box-shadow: var(--pn-sombra); }

/* ---------- mês grande: uma faixa por semana; no computador os eventos são barras que atravessam os dias ---------- */
.ag-mes { background: #fff; border-radius: 20px; box-shadow: var(--pn-sombra); overflow: hidden; }
.ag-sem { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-bottom: 1px solid var(--pn-borda); background: #FAFCFE; }
.ag-sem span { padding: 8px 0; text-align: center; font-size: 11.5px; font-weight: 800; color: var(--texto-3); text-transform: uppercase; letter-spacing: .05em; }
.ag-sem .dom { color: var(--vermelho); }
.ag-semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: minmax(66px, auto); border-bottom: 1px solid #E8EEF4; }
.ag-semana:last-child { border-bottom: 0; }
.ag-cel { grid-row: 1 / -1; position: relative; min-width: 0; border-right: 1px solid #E8EEF4; }
.ag-semana > .ag-cel:nth-child(7) { border-right: 0; }
.ag-cel.fora { background: #FAFCFE; }
.ag-num { position: absolute; inset: 0; display: flex; justify-content: center; align-items: flex-start; width: 100%; padding-top: 6px; border-radius: 0; }
.ag-num span { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 4px; border-radius: 999px; font-weight: 800; font-size: 14px; color: var(--navy); }
.ag-cel.fora .ag-num span { color: #AEBDCB; }
.ag-cel.vermelho .ag-num span { color: var(--vermelho); }
.ag-cel.fora.vermelho .ag-num span { color: #E2A797; }
.ag-cel.hoje .ag-num span { background: var(--oceano); color: #fff; }
.ag-cel.forte { background: linear-gradient(180deg, rgba(214, 51, 108, .08), rgba(214, 51, 108, 0) 75%); }
.ag-cel.escolhido { background: rgba(30, 127, 212, .07); box-shadow: inset 0 0 0 2px var(--oceano); z-index: 1; }
.ag-cel.alvo { background: rgba(30, 127, 212, .12); outline: 2px dashed var(--oceano); outline-offset: -3px; }
.ag-pontos { position: absolute; left: 0; right: 0; top: 35px; display: grid; justify-items: center; gap: 3px; pointer-events: none; }
.ag-pt-emoji { font-size: 14px; line-height: 1; }
.ag-pt-bolas { display: flex; gap: 3px; }
.ag-pt-bolas i { width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
.ag-semana > .ag-chip, .ag-semana > .ag-mais, .ag-add { display: none; }
@media (min-width: 760px) {
  .ag-semana { grid-template-rows: 34px repeat(3, 27px) 22px minmax(6px, 1fr); min-height: 128px; }
  .ag-num { position: absolute; inset: auto; top: 5px; left: 5px; width: auto; padding: 0; border-radius: 999px; }
  .ag-num:hover span { background: rgba(30, 127, 212, .12); }
  .ag-cel.hoje .ag-num:hover span { background: var(--oceano-escuro); }
  .ag-pontos { display: none; }
  .ag-semana > .ag-chip { display: flex; position: relative; z-index: 2; align-self: start; margin: 0 4px; }
  .ag-semana > .ag-chip.cont { margin-left: 0; }
  .ag-semana > .ag-chip.segue { margin-right: 0; }
  .ag-semana > .ag-mais { display: block; position: relative; z-index: 2; margin: 0 4px; align-self: start; }
  .ag-add { display: grid; place-items: center; position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border-radius: 999px; color: var(--texto-3); opacity: 0; transition: opacity .15s, background .15s; z-index: 3; }
  .ag-add .pn-ico { width: 17px; height: 17px; }
  .ag-cel:hover .ag-add, .ag-add:focus-visible { opacity: 1; }
  .ag-add:hover { background: rgba(30, 127, 212, .12); color: var(--oceano-escuro); }
}
@media (min-width: 1100px) { .ag-semana { min-height: 136px; } }
.ag-chip { align-items: center; gap: 4px; min-width: 0; height: 25px; padding: 0 7px 0 8px; border-radius: 7px; background: var(--cf); box-shadow: inset 3px 0 0 var(--c); font-size: 12.5px; font-weight: 700; color: var(--navy); text-align: left; transition: filter .15s; }
.ag-chip:hover { filter: brightness(.96); }
.ag-chip-emoji { flex: none; font-size: 12.5px; }
.ag-chip-hora { flex: none; font-family: var(--mono); font-size: 10.5px; color: var(--texto-2); }
.ag-chip-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-chip.cont { border-top-left-radius: 0; border-bottom-left-radius: 0; box-shadow: none; }
.ag-chip.cont .ag-chip-txt::before { content: '⋯ '; color: var(--texto-3); }
.ag-chip.segue { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.ag-chip.forte { background: var(--c); color: #fff; box-shadow: none; font-weight: 800; }
.ag-chip.forte .ag-chip-hora, .ag-chip.forte.cont .ag-chip-txt::before { color: #fff; }
.ag-chip.st-ideia:not(.sis) { background: #fff; box-shadow: inset 3px 0 0 var(--c), inset 0 0 0 1.5px var(--cf); }
.ag-chip.st-feito .ag-chip-txt { text-decoration: line-through; text-decoration-color: rgba(10, 37, 64, .45); }
.ag-chip.st-feito:not(.sis) { opacity: .65; }
.ag-chip.st-cancelado:not(.sis) { opacity: .45; }
.ag-chip.st-cancelado .ag-chip-txt { text-decoration: line-through; }
.ag-chip[draggable=true] { cursor: grab; }
.ag-chip.arrastando { opacity: .4; }
.ag-mais { text-align: left; font-size: 12px; font-weight: 800; color: var(--oceano-escuro); padding: 2px 6px; border-radius: 6px; }
.ag-mais:hover { background: rgba(30, 127, 212, .1); }

/* dia escolhido */
.ag-dia { background: #fff; border-radius: 20px; box-shadow: var(--pn-sombra); padding: 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; scroll-margin-top: calc(var(--pn-topo) + 12px); }
.ag-dia-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.ag-dia-topo h3 { font-size: 17px; letter-spacing: -.01em; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ag-hoje-tag, .ag-falta { font-size: 12px; font-weight: 800; padding: 2px 9px; border-radius: 999px; }
.ag-hoje-tag { background: var(--oceano); color: #fff; }
.ag-falta { background: var(--espuma); color: var(--texto-2); }

/* cartões (dia e lista) */
.ag-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.ag-card { width: 100%; display: flex; align-items: center; gap: 12px; padding: 11px 12px 11px 14px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--pn-borda), inset 4px 0 0 var(--c); text-align: left; min-width: 0; transition: box-shadow .15s; }
.ag-card:hover { box-shadow: inset 0 0 0 1.5px var(--pn-borda-forte), inset 4px 0 0 var(--c); }
.ag-card.st-feito .ag-card-titulo, .ag-card.st-cancelado .ag-card-titulo { text-decoration: line-through; text-decoration-color: rgba(10, 37, 64, .4); }
.ag-card.st-cancelado { opacity: .6; }
.ag-card-data { flex: none; width: 40px; display: grid; justify-items: center; line-height: 1.1; }
.ag-card-data b { font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.ag-card-data span { font-size: 11px; font-weight: 800; color: var(--texto-3); text-transform: uppercase; }
.ag-card-emoji { flex: none; width: 28px; text-align: center; font-size: 21px; line-height: 1; }
.ag-card-meio { flex: 1; min-width: 0; display: grid; gap: 4px; }
.ag-card-titulo { font-weight: 800; font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }
.ag-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 12.5px; font-weight: 600; color: var(--texto-2); }
.ag-card-seta { color: var(--texto-3); width: 18px; height: 18px; }
.ag-tag { display: inline-flex; align-items: center; height: 21px; padding: 0 8px; border-radius: 999px; background: var(--cf); box-shadow: inset 0 0 0 1px var(--c); color: var(--navy); font-weight: 800; font-size: 11.5px; }
.ag-st { font-weight: 800; }
.ag-st.st-ideia { color: var(--texto-3); }
.ag-st.st-planejado { color: var(--texto-2); }
.ag-st.st-fazendo { color: var(--ambar); }
.ag-st.st-pronto { color: var(--oceano-escuro); }
.ag-st.st-feito { color: var(--verde); }
.ag-st.st-cancelado { color: var(--texto-3); text-decoration: line-through; }
.ag-peso { display: inline-flex; align-items: center; height: 21px; padding: 0 8px; border-radius: 999px; font-size: 11.5px; font-weight: 800; }
.ag-peso.p3 { background: var(--c-data); color: #fff; }
.ag-peso.p2 { background: var(--cf-data); color: #A21A4C; }

/* ---------- próximos 12 meses ---------- */
.ag-ano { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 12px; }
.ag-mini { background: #fff; border-radius: 18px; box-shadow: var(--pn-sombra); padding: 14px 14px 12px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; align-content: start; min-width: 0; }
.ag-mini.atual { box-shadow: var(--pn-sombra), inset 0 0 0 2px rgba(30, 127, 212, .35); }
.ag-mini h3 { margin: 0 0 2px; }
.ag-mini-titulo { display: flex; align-items: baseline; gap: 8px; font-size: 17px; font-weight: 800; letter-spacing: -.01em; color: var(--navy); border-radius: 8px; padding: 2px 4px; margin-left: -4px; }
.ag-mini-titulo small { font-size: 13px; color: var(--texto-3); font-weight: 700; }
.ag-mini-titulo:hover { color: var(--oceano-escuro); }
.ag-mini-sem, .ag-mini-grade { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; text-align: center; }
.ag-mini-sem span { font-size: 10.5px; font-weight: 800; color: var(--texto-3); }
.ag-mini-dia { position: relative; height: 31px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }
.ag-mini-dia:hover { background: rgba(30, 127, 212, .1); }
.ag-mini-dia.passou { color: #9AABBC; }
.ag-mini-dia.vermelho { color: var(--vermelho); }
.ag-mini-dia.passou.vermelho { color: #DDA393; }
.ag-mini-dia::after { content: ''; position: absolute; left: 50%; bottom: 2px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: transparent; }
.ag-mini-dia.tem::after { background: #A9B8C7; width: 4px; height: 4px; margin-left: -2px; }
.ag-mini-dia.meu::after { background: var(--c); }
.ag-mini-dia.forte { background: var(--c-data); color: #fff; font-weight: 800; }
.ag-mini-dia.forte::after { background: #fff; }
.ag-mini-dia.forte.meu::after { background: #fff; }
.ag-mini-dia.hoje { box-shadow: inset 0 0 0 2px var(--oceano); }
.ag-mini-lista { list-style: none; margin: 4px 0 0; padding: 8px 0 0; border-top: 1px solid #EDF2F7; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; }
.ag-mini-lista li { min-width: 0; }
.ag-mini-lista button { display: flex; align-items: baseline; gap: 8px; width: 100%; text-align: left; font-size: 13px; font-weight: 600; padding: 3px 6px; border-radius: 8px; color: var(--navy); min-width: 0; }
.ag-mini-lista button:hover { background: var(--espuma); }
.ag-mini-lista b { flex: none; min-width: 22px; text-align: right; font-family: var(--mono); font-size: 12px; color: var(--c); }
.ag-mini-lista button.sis b { color: var(--texto-3); }
.ag-mini-lista span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-mini-resto { padding: 2px 6px; }
.ag-mini-nada { font-size: 13px; color: var(--texto-3); padding-top: 6px; border-top: 1px solid #EDF2F7; margin-top: 4px; }
.ag-legenda { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; font-size: 13px; color: var(--texto-2); font-weight: 600; }
.ag-legenda > span { display: inline-flex; align-items: center; gap: 7px; }
.ag-legenda i { display: inline-block; flex: none; }
.ag-leg-forte { width: 16px; height: 16px; border-radius: 50%; background: var(--c-data); }
.ag-leg-meu { width: 7px; height: 7px; border-radius: 50%; background: var(--c-post); box-shadow: 9px 0 0 var(--c-campanha), 18px 0 0 var(--c-anuncio); margin-right: 18px; }
.ag-leg-tem { width: 5px; height: 5px; border-radius: 50%; background: #A9B8C7; }
.ag-leg-verm { color: var(--vermelho); }

/* ---------- lista ---------- */
.ag-lista { display: grid; gap: 18px; }
.ag-lista-mes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.ag-lista-mes h3 { display: flex; align-items: center; gap: 8px; font-size: 18px; letter-spacing: -.01em; }
.ag-lista-mes > .pn-dica { background: #fff; border-radius: 14px; padding: 12px 14px; box-shadow: inset 0 0 0 1px var(--pn-borda); }

/* ---------- cartões de baixo ---------- */
.ag-baixo { display: grid; gap: 14px; margin-top: 6px; }
@media (min-width: 980px) {
  .ag-baixo { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
  .ag-baixo > .ag-chaves { grid-column: 1 / -1; }
}
.ag-prox-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ag-prox { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; align-items: center; padding: 10px 12px; border-radius: 16px; background: var(--espuma); }
.ag-prox > .pn-btn { grid-column: 2; justify-self: start; }
@media (min-width: 600px) { .ag-prox { grid-template-columns: auto minmax(0, 1fr) auto; } .ag-prox > .pn-btn { grid-column: auto; } }
.ag-prox-data { width: 52px; height: 56px; border-radius: 14px; background: #fff; display: grid; place-content: center; text-align: center; line-height: 1.05; box-shadow: inset 0 3px 0 var(--c); }
.ag-prox.p3 .ag-prox-data { background: var(--c); color: #fff; box-shadow: none; }
.ag-prox-data b { font-size: 21px; font-weight: 800; }
.ag-prox-data span { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.ag-prox-meio { display: grid; gap: 2px; min-width: 0; }
.ag-prox-titulo { text-align: left; font-weight: 800; font-size: 15px; color: var(--navy); }
.ag-prox-titulo:hover { color: var(--oceano-escuro); text-decoration: underline; text-underline-offset: 3px; }
.ag-prox-falta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 13px; font-weight: 700; color: var(--texto-2); }
.ag-prox-prep { font-size: 12.5px; color: var(--texto-2); }
.ag-prox-prep:empty { display: none; }
.ag-prox-prep.agora { color: var(--ambar); font-weight: 700; }
.ag-log-lista { padding: 0; }
.ag-log-lista li { grid-template-columns: 1fr; }
.ag-log-lista .pn-log-txt b { font-weight: 800; }
.ag-log-ev { padding: 0; font-size: inherit; text-align: left; display: inline; }
.ag-chave-txt { flex: 1; min-width: 0; display: grid; gap: 1px; }
.ag-chave-txt span { font-size: 12.5px; color: var(--texto-2); }
.ag-chaves-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ag-chaves-lista li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--espuma); }
.ag-chaves-lista .pn-ico { color: var(--oceano-escuro); }
.ag-chave-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.ag-chave-nova { display: grid; gap: 10px; background: var(--ambar-claro); border-radius: 16px; padding: 14px 16px; }
.ag-passos { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14px; color: var(--texto); }

/* ---------- gaveta do evento ---------- */
.ag-dlg .pn-dlg-corpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-content: start; }
.ag-dlg .pn-dlg-titulo .pn-sobre { margin-bottom: 2px; }
.ag-dlg-h { font-size: 19px; letter-spacing: -.02em; overflow-wrap: anywhere; }
.ag-dlg form.soltando .pn-dlg-corpo { outline: 3px dashed var(--oceano); outline-offset: -10px; background: rgba(30, 127, 212, .05); }
.ag-sis { background: var(--cf); border-radius: 18px; padding: 14px 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; box-shadow: inset 0 0 0 1px rgba(10, 37, 64, .06); }
.ag-sis-topo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ag-sis-topo > span:nth-child(2) { flex: 1; min-width: 160px; display: grid; gap: 1px; }
.ag-sis-topo b { font-size: 16px; }
.ag-sis-topo > span:nth-child(2) > span { font-size: 13px; color: var(--texto-2); font-weight: 600; }
.ag-sis-emoji { font-size: 30px; line-height: 1; }
.ag-sis-dica { font-size: 14.5px; line-height: 1.5; }
.ag-sis-prep { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.ag-sis-prep label { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; flex-wrap: wrap; }
.ag-dlg input.ag-prep-campo { width: 76px; min-height: 40px; padding: 6px 10px; text-align: center; }
.ag-sis-nota { font-size: 12.5px; color: var(--texto-2); }
.ag-ligada { font-size: 14px; color: var(--texto-2); background: var(--cf-campanha); border-radius: 12px; padding: 8px 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.ag-emoji-linha { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ag-par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; min-width: 0; }
@media (max-width: 419px) { .ag-par-sel { grid-template-columns: minmax(0, 1fr); } }   /* "Pronto para sair" não cabe em meia tela */
.ag-dlg input.ag-emoji-campo { width: 64px; flex: none; text-align: center; font-size: 20px; padding: 6px; }
.ag-emojis { display: flex; flex-wrap: wrap; gap: 4px; }
.ag-emojis button { width: 40px; height: 40px; border-radius: 10px; font-size: 19px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--pn-borda); }
.ag-emojis button:hover { box-shadow: inset 0 0 0 1.5px var(--pn-borda-forte); }
.ag-emojis button[aria-pressed=true] { box-shadow: inset 0 0 0 2.5px var(--oceano); background: rgba(30, 127, 212, .08); }
.ag-canais { display: flex; flex-wrap: wrap; gap: 6px; }
.ag-canal { height: 36px; padding: 0 13px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--pn-borda); font-weight: 700; font-size: 13.5px; color: var(--texto-2); }
.ag-canal:hover { box-shadow: inset 0 0 0 1.5px var(--pn-borda-forte); color: var(--navy); }
.ag-canal[aria-pressed=true] { background: var(--navy); color: #fff; box-shadow: none; }
.ag-dlg input[type=date], .ag-dlg input[type=time] { width: 100%; min-width: 0; min-height: 46px; border-radius: 12px; border: 1.5px solid var(--pn-borda-forte); background: #fff; padding: 8px 12px; font-size: 16px; color: var(--navy); }
.ag-dlg input[type=date]:focus, .ag-dlg input[type=time]:focus { outline: none; border-color: var(--oceano); box-shadow: 0 0 0 3px rgba(30, 127, 212, .18); }
.ag-bloco { background: #fff; border-radius: 18px; padding: 14px 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; box-shadow: var(--pn-sombra); }
.ag-bloco-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ag-bloco-topo h3 { font-size: 16px; }
.ag-conta { font-size: 12.5px; color: var(--texto-3); font-weight: 700; }
.ag-tarefas { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ag-tarefas li { display: flex; align-items: center; gap: 8px; }
.ag-tarefas input[type=checkbox] { flex: none; width: 22px; height: 22px; accent-color: var(--verde); margin: 0; cursor: pointer; }
.ag-dlg .ag-tarefas input[type=text] { min-height: 40px; padding: 7px 11px; font-size: 15px; border-color: var(--pn-borda); }
.ag-tarefas li.ok input[type=text] { text-decoration: line-through; color: var(--texto-3); }
.ag-tirar { flex: none; width: 34px; height: 34px; border-radius: 10px; display: inline-grid; place-items: center; color: var(--texto-3); }
.ag-tirar:hover { background: var(--vermelho-claro); color: var(--vermelho); }
.ag-tirar .pn-ico { width: 17px; height: 17px; }
.ag-nova-tarefa { display: flex; gap: 8px; }
.ag-dlg .ag-nova-tarefa input { min-height: 40px; padding: 7px 11px; font-size: 15px; }
.ag-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.ag-thumb { position: relative; margin: 0; border-radius: 12px; overflow: hidden; background: var(--espuma); box-shadow: inset 0 0 0 1px var(--pn-borda); }
.ag-thumb a { display: block; aspect-ratio: 1; }
.ag-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ag-thumb figcaption { font-size: 11.5px; font-weight: 600; color: var(--texto-2); padding: 4px 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-thumb .ag-tirar { position: absolute; top: 4px; right: 4px; width: 30px; height: 30px; background: rgba(255, 255, 255, .92); box-shadow: 0 1px 4px rgba(10, 37, 64, .2); }
.ag-arqs { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ag-arqs li { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 4px 0; }
.ag-arqs li > .pn-ico { color: var(--texto-3); width: 18px; height: 18px; }
.ag-arqs .pn-link { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; flex: 1; padding: 2px 0; }
.ag-arq-info { flex: none; font-size: 12px; color: var(--texto-3); font-weight: 600; }
.ag-anexos-botoes { display: flex; flex-wrap: wrap; gap: 8px; }
.ag-link-form { display: grid; gap: 8px; }
@media (min-width: 600px) { .ag-link-form { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) auto; } }
.ag-dlg .ag-link-form input { min-height: 42px; font-size: 15px; }
.ag-espaco { font-size: 12.5px; color: var(--texto-3); }
.ag-hist { background: #fff; border-radius: 16px; box-shadow: var(--pn-sombra); }
.ag-hist summary { cursor: pointer; padding: 12px 16px; font-weight: 800; font-size: 14.5px; }
.ag-hist .pn-hist-lista li { font-size: 13.5px; }
.ag-hist .pn-hist-lista time { font-size: 12px; color: var(--texto-3); font-weight: 700; }
.ag-quem { font-size: 12.5px; color: var(--texto-3); }

/* o post no Editar: formato, legenda de cada rede (com a conta de letras) e a faixa de fotos na ordem do carrossel */
.ag-dica-campo { font-size: 12.5px; color: var(--texto-3); font-weight: 600; line-height: 1.45; }
.ag-campo-leg textarea { min-height: 96px; }
.ag-contador { justify-self: end; font-size: 12px; font-weight: 700; color: var(--texto-3); font-variant-numeric: tabular-nums; }
.ag-contador.passou { color: var(--vermelho); }
.ag-outras { display: grid; gap: 12px; border-radius: 14px; background: var(--espuma); padding: 0 14px; }
.ag-outras[open] { padding-bottom: 14px; }
.ag-outras summary { cursor: pointer; padding: 12px 0; font-weight: 800; font-size: 14px; color: var(--oceano-escuro); }
.ag-outras .ag-dica-campo { margin-top: -6px; }
.ag-outras textarea, .ag-outras input { background: #fff; }
.ag-faixa { list-style: none; margin: 0; padding: 0; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); }
.ag-faixa .ag-thumb { display: grid; align-content: start; }
.ag-faixa .ag-thumb a { position: relative; }
.ag-faixa .ag-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; background: #0d1b2a; }
.ag-ordem { position: absolute; top: 6px; left: 6px; padding: 3px 8px; border-radius: 999px; background: rgba(10, 37, 64, .85); color: #fff; font-size: 11.5px; font-weight: 800; }
.ag-thumb-vid { position: absolute; bottom: 6px; left: 6px; padding: 3px 8px; border-radius: 999px; background: rgba(0, 0, 0, .6); color: #fff; font-size: 11px; font-weight: 800; }
.ag-thumb.fora a { opacity: .42; }
.ag-thumb.fora .ag-ordem { background: var(--texto-3); }
.ag-thumb-nome { margin: 0; padding: 5px 7px 0; font-size: 11.5px; font-weight: 600; color: var(--texto-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-thumb-acoes { display: flex; align-items: center; justify-content: space-between; gap: 2px; padding: 2px 3px 4px; }
.ag-mover { width: 32px; height: 32px; border-radius: 9px; display: inline-grid; place-items: center; color: var(--navy); }
.ag-mover:hover:not([disabled]) { background: #fff; box-shadow: inset 0 0 0 1px var(--pn-borda); }
.ag-mover[disabled] { opacity: .28; cursor: default; }
.ag-mover .pn-ico { width: 16px; height: 16px; }
.ag-thumb-post { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--texto-2); cursor: pointer; min-height: 32px; white-space: nowrap; }
@media (hover: none) { .ag-arraste { display: none; } }   /* arrastar arquivo só existe no computador */
.ag-thumb-post input { width: 16px; height: 16px; margin: 0; accent-color: var(--oceano); cursor: pointer; }
.ag-liberar { font-size: 12.5px; padding: 0; }
.ag-sis-prep-txt { font-size: 14px; font-weight: 700; }
.ag-pv-prod { height: auto; min-height: 26px; padding: 3px 10px; font-weight: 700; }

/* ---------- prévia do post (js/painel-previa.js): o telefone com o post como sai na rede ---------- */
.ag-pv { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
@media (min-width: 760px) { .ag-pv { grid-template-columns: 380px minmax(0, 1fr); gap: 26px; } }
.ag-pv-palco { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; justify-items: center; min-width: 0; }
.ag-pv-redes { margin: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.ag-pv-redes::-webkit-scrollbar { display: none; }
.ag-pv-redes button { height: 36px; padding: 0 14px; font-size: 14px; flex: none; }
.ag-pv-formatos { display: inline-flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.ag-pv-formatos button { height: 30px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--texto-2); background: #fff; box-shadow: inset 0 0 0 1.5px var(--pn-borda); }
.ag-pv-formatos button[aria-pressed=true] { background: var(--navy); color: #fff; box-shadow: none; }
.ag-pv-formatos span { align-self: center; font-size: 12.5px; color: var(--texto-3); font-weight: 700; }
.ag-pv-baixo { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; }
.ag-pv-dica { font-size: 12.5px; color: var(--texto-3); text-align: center; max-width: 360px; }
.ag-pv-info { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: start; min-width: 0; }
.ag-pv-quando { display: grid; gap: 8px; background: #fff; border-radius: 18px; padding: 14px 16px; box-shadow: var(--pn-sombra); }
.ag-pv-quando p { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 15.5px; color: var(--navy); }
.ag-pv-quando .pn-ico { width: 18px; height: 18px; color: var(--oceano-escuro); flex: none; }
.ag-pv-tags { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 13px; color: var(--texto-2); font-weight: 700; }
.ag-pv-falta { display: grid; gap: 4px; background: var(--ambar-claro); color: var(--ambar); border-radius: 14px; padding: 10px 14px; font-size: 13.5px; font-weight: 700; }
.ag-pv-falta ul { margin: 0; padding-left: 18px; font-weight: 600; }
.ag-pv-texto { white-space: pre-line; overflow-wrap: anywhere; font-size: 14.5px; line-height: 1.55; }
.ag-pv-tarefas { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ag-pv-tarefas li { display: flex; gap: 8px; align-items: flex-start; font-size: 14.5px; }
.ag-pv-tarefas li::before { content: ''; flex: none; width: 18px; height: 18px; margin-top: 2px; border-radius: 6px; box-shadow: inset 0 0 0 1.5px var(--pn-borda-forte); }
.ag-pv-tarefas li.ok { color: var(--texto-3); text-decoration: line-through; }
.ag-pv-tarefas li.ok::before { background: var(--verde) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 13px no-repeat; box-shadow: none; }
.ag-dlg .ag-pv-pe { justify-content: flex-end; }
.ag-dlg .ag-pv-pe .pn-btn-escuro { min-width: 150px; }
.ag-pv-sis { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }

.pv-tel {
  --pv-fundo: #fff; --pv-txt: #0c0c0c; --pv-cinza: #737373; --pv-linha: #dbdbdb; --pv-tag: #00376b; --pv-azul: #0095f6;
  --pv-h: clamp(500px, calc(100dvh - 300px), 760px);   /* o telefone inteiro cabe na tela, com as abas em cima */
  width: 380px; max-width: 100%; padding: 10px; border-radius: 52px; background: #0b0f14; margin: 0 auto;
  box-shadow: inset 0 0 0 1.5px #30363d, 0 26px 60px rgba(10, 37, 64, .24);
}
.pv-escuro { --pv-fundo: #000; --pv-txt: #f5f5f5; --pv-cinza: #a8a8a8; --pv-linha: #262626; --pv-tag: #e0f1ff; }
.pv-tela {
  position: relative; isolation: isolate; height: var(--pv-h); border-radius: 42px; overflow: hidden; display: flex; flex-direction: column;
  background: var(--pv-fundo); color: var(--pv-txt); text-align: left;
  font: 400 14px/18px -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; letter-spacing: 0;
  -webkit-user-select: none; user-select: none;
}
.pv-tela b { font-weight: 600; }
.pv-tela button { color: inherit; font: inherit; }
@media (max-width: 599px) {
  .pv-tel { width: 100%; max-width: 430px; padding: 0; border-radius: 26px; background: none; box-shadow: 0 8px 28px rgba(10, 37, 64, .2); --pv-h: clamp(480px, calc(100dvh - 250px), 780px); }
  .pv-tela { border-radius: 26px; }
  /* no celular o post do feed aparece inteiro (foto, botões e legenda) e quem rola é a gaveta, não o telefone */
  .pv-tela-feed { height: auto; min-height: var(--pv-h); }
  .pv-tela-feed .pv-rolar { flex: none; overflow: visible; }
  .pv-tela-feed .pv-nav { margin-top: auto; }
}
.pv-i { display: inline-grid; width: 24px; height: 24px; flex: none; }
.pv-i svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.pv-i .ch { fill: currentColor; stroke: none; }
.pv-cheio svg path, .pv-cheio svg rect, .pv-cheio svg circle { fill: currentColor; }
.pv-mini { width: 13px; height: 13px; }
.pv-av { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: none; background: #eaf4fc; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); }
.pv-av-40 { width: 40px; height: 40px; }
.pv-av-24 { width: 24px; height: 24px; }

/* barra de cima do telefone */
.pv-status { flex: none; height: 38px; display: flex; align-items: center; justify-content: space-between; padding: 4px 26px 0 30px; font-weight: 600; font-size: 14.5px; position: relative; z-index: 6; }
.pv-status-ic { display: flex; gap: 5px; align-items: center; }
.pv-status-ic .pv-i { width: 16px; height: 16px; }
.pv-status-ic .pv-i:last-child { width: 24px; }
.pv-status-ic .pv-i svg { stroke-width: 1.6; }
.pv-tela-vert .pv-status, .pv-tela-story .pv-status { position: absolute; top: 0; left: 0; right: 0; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .3); }

/* feed (Instagram e Facebook) */
.pv-app-topo { flex: none; display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; height: 46px; padding: 0 4px; border-bottom: 1px solid var(--pv-linha); text-align: center; }
.pv-app-topo > .pv-i { justify-self: center; }
.pv-app-topo small { display: block; font-size: 11.5px; line-height: 13px; color: var(--pv-cinza); font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
.pv-app-topo b { font-size: 16px; line-height: 19px; font-weight: 700; }
.pv-rolar { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.pv-rolar::-webkit-scrollbar { display: none; }
.pv-ig-topo { display: flex; align-items: center; gap: 10px; padding: 8px 4px 8px 12px; }
.pv-ig-quem { flex: 1; min-width: 0; display: grid; line-height: 17px; }
.pv-ig-quem b { font-size: 14px; }
.pv-ig-quem span { font-size: 12px; color: var(--pv-txt); display: flex; gap: 4px; align-items: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pv-ig-midia { position: relative; aspect-ratio: var(--pv-prop, 0.8); background: #efefef; overflow: hidden; }
.pv-ig-midia > .pv-vazio { position: absolute; inset: 0; }
.pv-carrossel { position: relative; width: 100%; height: 100%; }
.pv-trilho { display: flex; width: 100%; height: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; outline: none; }
.pv-trilho::-webkit-scrollbar { display: none; }
.pv-trilho:focus-visible { box-shadow: inset 0 0 0 3px var(--oceano); }
@media (pointer: fine) { .pv-trilho[tabindex] { cursor: grab; } }
.pv-arrastando { scroll-snap-type: none; cursor: grabbing !important; }
.pv-slide { position: relative; flex: 0 0 100%; height: 100%; scroll-snap-align: center; scroll-snap-stop: always; overflow: hidden; }
.pv-slide > img, .pv-slide > video { width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; pointer-events: none; }
.pv-contador { position: absolute; top: 12px; right: 12px; z-index: 2; padding: 3px 8px; border-radius: 999px; background: rgba(18, 18, 18, .72); color: #fff; font-size: 12px; font-weight: 600; line-height: 16px; pointer-events: none; }
.pv-seta { position: absolute; top: 50%; z-index: 2; width: 28px; height: 28px; margin-top: -14px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .88); color: #262626; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); opacity: 0; transition: opacity .2s; }
.pv-seta .pv-i { width: 15px; height: 15px; }
.pv-seta .pv-i svg { stroke-width: 2.6; }
.pv-seta-esq { left: 10px; }
.pv-seta-dir { right: 10px; }
.pv-carrossel:hover .pv-seta, .pv-seta:focus-visible { opacity: 1; }
@media (hover: none) { .pv-seta { display: none; } }
.pv-pontos { display: flex; gap: 4px; justify-content: center; align-items: center; }
.pv-pontos i { width: 6px; height: 6px; border-radius: 50%; background: #c7c7c7; transition: background .2s, transform .2s; }
.pv-pontos i.on { background: var(--pv-azul); }
.pv-ig-acoes { position: relative; display: flex; align-items: center; padding: 4px 4px 0; }
.pv-ig-acoes .pv-pontos { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.pv-ig-salvar { margin-left: auto; }
.pv-acao { width: 40px; height: 40px; display: inline-grid; place-items: center; border-radius: 10px; }
.pv-acao:focus-visible { outline: 2px solid var(--pv-azul); outline-offset: -2px; }
.pv-acao[aria-pressed=true] .pv-i { animation: pv-bate .35s var(--ease-mola); }
.pv-acao:not(.pv-yt):not(.pv-fb-curtir):not(.pv-ig-salvar):not(.pv-tt-salvar)[aria-pressed=true] .pv-i { color: #ff3040; }
@keyframes pv-bate { 40% { transform: scale(1.25); } }
.pv-ig-curtidas { padding: 0 12px 2px; font-size: 14px; }
.pv-ig-leg { padding: 4px 12px 0; font-size: 14px; line-height: 18px; white-space: pre-line; overflow-wrap: anywhere; }
.pv-leg-txt { -webkit-user-select: text; user-select: text; }
.pv-leg-tres { color: var(--pv-cinza); }
.pv-leg-mais { padding: 0; background: none; color: var(--pv-cinza) !important; cursor: pointer; }
.pv-tag { color: var(--pv-tag); }
.pv-ig-data { padding: 6px 12px 16px; font-size: 12px; color: var(--pv-cinza); }
.pv-ig-cta { display: flex; align-items: center; justify-content: space-between; padding: 11px 12px; font-weight: 600; font-size: 14px; border-bottom: 1px solid var(--pv-linha); }
.pv-ig-cta .pv-i { width: 16px; height: 16px; }
.pv-ig-proximo { display: grid; grid-template-columns: 32px minmax(0, 1fr); grid-template-rows: 10px 10px; gap: 6px 10px; align-items: center; padding: 10px 12px 20px; border-top: 1px solid var(--pv-linha); opacity: .55; }
.pv-ig-proximo .pv-av { grid-row: 1 / 3; filter: grayscale(1); }
.pv-ig-proximo i { height: 9px; border-radius: 4px; background: #e3e3e3; width: 60%; }
.pv-ig-proximo i + i { width: 35%; }
.pv-nav { flex: none; height: 50px; display: flex; align-items: center; justify-content: space-around; padding: 0 6px 4px; border-top: 1px solid var(--pv-linha); background: var(--pv-fundo); position: relative; z-index: 6; }
.pv-nav .pv-i.on svg { stroke-width: 2.4; }
.pv-av-nav { width: 26px; height: 26px; }
.pv-coracao-grande { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; pointer-events: none; opacity: 0; color: #fff; }
.pv-coracao-grande .pv-i { width: 96px; height: 96px; filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .3)); }
.pv-coracao-grande.pv-pula { animation: pv-pula .95s ease-out forwards; }
@keyframes pv-pula { 0% { opacity: 0; transform: scale(.2); } 15% { opacity: 1; transform: scale(1.18); } 28% { transform: scale(.94); } 40% { transform: scale(1); } 78% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.12); } }
.pv-som { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, .58); color: #fff; z-index: 4; }
.pv-som .pv-i { width: 16px; height: 16px; }
.pv-som-canto { position: absolute; right: 10px; bottom: 10px; }
.pv-som-topo { position: absolute; top: 88px; right: 14px; }
.pv-vazio { width: 100%; height: 100%; display: grid; place-content: center; justify-items: center; gap: 8px; padding: 24px; text-align: center; background: linear-gradient(150deg, #EAF4FC, #CFE8F8); color: var(--navy); font-family: var(--fonte); }
.pv-vazio-emoji { font-size: 54px; line-height: 1; }
.pv-vazio b { font-size: 16px; font-weight: 800; line-height: 1.25; max-width: 260px; }
.pv-vazio span:last-child { font-size: 12.5px; font-weight: 700; color: var(--texto-2); background: rgba(255, 255, 255, .75); padding: 4px 12px; border-radius: 999px; }
.pv-vazio-escuro { background: linear-gradient(165deg, #12385E, #0A2540 55%, #145EA6); color: #fff; }
.pv-vazio-escuro span:last-child { background: rgba(255, 255, 255, .16); color: #fff; }

/* Facebook */
.pv-tela-fb .pv-rolar { background: #f0f2f5; }
.pv-fb-app { grid-template-columns: 44px minmax(0, 1fr) 44px; }
.pv-fb-app b { font-size: 17px; }
.pv-fb-post { background: #fff; padding-top: 10px; margin-bottom: 8px; }
.pv-fb-topo { display: flex; align-items: center; gap: 8px; padding: 0 4px 8px 12px; }
.pv-fb-quem { flex: 1; min-width: 0; display: grid; line-height: 18px; }
.pv-fb-quem b { font-size: 15px; }
.pv-fb-quem span { font-size: 13px; color: #65676b; display: flex; align-items: center; gap: 2px; }
.pv-fb-topo .pv-acao { width: 34px; color: #65676b; }
.pv-fb-texto { padding: 0 12px 10px; font-size: 15px; line-height: 20px; white-space: pre-line; overflow-wrap: anywhere; }
.pv-tela-fb .pv-tag { color: #1b74e4; }
.pv-tela-fb .pv-leg-mais { color: #050505 !important; font-weight: 600; }
.pv-tela-fb .pv-leg-tres { color: #050505; }
.pv-fb-uma { position: relative; background: #000; }
.pv-fb-uma > img, .pv-fb-uma > video { width: 100%; max-height: 520px; object-fit: cover; display: block; }
.pv-fb-post > .pv-vazio { aspect-ratio: 1; height: auto; }
.pv-fb-grade { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px; background: #fff; }
.pv-fb-cel { position: relative; display: block; padding: 0; overflow: hidden; aspect-ratio: 1; grid-column: span 3; background: #e4e6eb; }
.pv-fb-cel > img, .pv-fb-cel > video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pv-fb-grade.n3 .pv-fb-cel:first-child { grid-column: 1 / -1; aspect-ratio: 2 / 1; }
.pv-fb-grade.n5 .pv-fb-cel:nth-child(n+3) { grid-column: span 2; }
.pv-fb-play { position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; color: #fff; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5)); }
.pv-fb-resto { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, .45); color: #fff; font-size: 30px; font-weight: 700; }
.pv-fb-cta { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #f0f2f5; padding: 10px 12px; }
.pv-fb-cta small { display: block; font-size: 12px; color: #65676b; }
.pv-fb-cta b { font-size: 15px; display: block; }
.pv-fb-btn { flex: none; background: #e4e6eb; border-radius: 6px; padding: 8px 12px; font-weight: 600; font-size: 14px; white-space: nowrap; }
.pv-fb-reacoes { display: flex; align-items: center; gap: 6px; padding: 8px 12px 6px; font-size: 14px; color: #65676b; }
.pv-fb-bola { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: #1877f2; color: #fff; }
.pv-fb-bola .pv-i { width: 11px; height: 11px; }
.pv-fb-acoes { display: flex; margin: 0 12px; padding: 4px 0; border-top: 1px solid #ced0d4; }
.pv-fb-acoes .pv-acao { flex: 1; width: auto; height: 38px; display: flex; gap: 6px; align-items: center; justify-content: center; color: #65676b; font-weight: 600; font-size: 14px; border-radius: 6px; }
.pv-fb-acoes .pv-acao .pv-i { width: 20px; height: 20px; }
.pv-fb-curtir[aria-pressed=true] { color: #1877f2 !important; }
.pv-visor { position: absolute; inset: 0; z-index: 10; background: #000; }
.pv-visor-x { position: absolute; top: 42px; left: 8px; z-index: 3; width: 40px; height: 40px; display: grid; place-items: center; color: #fff !important; }
.pv-visor-car .pv-slide > img, .pv-visor-car .pv-slide > video { object-fit: contain; }

/* vídeo em pé: Reels, Shorts e TikTok */
.pv-palco { position: absolute; inset: 0; z-index: 0; background: #000; overflow: hidden; display: grid; touch-action: manipulation; }
.pv-palco > video, .pv-palco > img.pv-capa, .pv-palco > .pv-carrossel, .pv-palco > .pv-vazio { grid-area: 1 / 1; width: 100%; height: 100%; object-fit: cover; }
.pv-palco > img.pv-capa { -webkit-user-drag: none; }
.com-nav .pv-palco, .com-nav .pv-camada { bottom: 50px; }
.pv-pausa { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; pointer-events: none; color: rgba(255, 255, 255, .88); }
.pv-pausa .pv-i { width: 64px; height: 64px; filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .45)); }
.pv-pausa[hidden] { display: none; }
.pv-camada {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; display: grid;
  grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr) auto auto;
  grid-template-areas: "topo topo" ". ." "info lado" "pontos pontos";
  padding: 40px 0 14px; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
  background: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0) 34%), linear-gradient(to bottom, rgba(0, 0, 0, .32), rgba(0, 0, 0, 0) 18%);
}
.pv-camada button, .pv-camada .pv-leg-txt, .pv-camada .pv-info-leg { pointer-events: auto; }
.pv-topo { grid-area: topo; display: flex; align-items: center; gap: 12px; padding: 6px 14px; min-height: 44px; }
.pv-topo-titulo { font-size: 21px; font-weight: 700 !important; }
.pv-topo-fim { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.pv-lado { grid-area: lado; align-self: end; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 0 8px 4px 4px; }
.pv-lado-item { display: grid; justify-items: center; gap: 1px; font-size: 12px; font-weight: 600; line-height: 14px; }
.pv-lado .pv-acao { width: 42px; height: 38px; }
.pv-lado .pv-i { width: 28px; height: 28px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35)); }
.pv-lado-audio .pv-av { width: 28px; height: 28px; border-radius: 7px; box-shadow: 0 0 0 2px #fff; }
.pv-lado-quadro .pv-av { border-radius: 8px; width: 36px; height: 36px; }
.pv-info { grid-area: info; align-self: end; display: grid; gap: 8px; padding: 0 6px 2px 14px; min-width: 0; }
.pv-info-quem { display: flex; align-items: center; gap: 8px; font-size: 14px; min-width: 0; }
.pv-info-quem b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-seguir { flex: none; border: 1px solid rgba(255, 255, 255, .85); border-radius: 8px; padding: 2px 10px; font-weight: 600; font-size: 13px; line-height: 20px; }
.pv-seguir-yt { border: 0; background: #fff; color: #0f0f0f; border-radius: 999px; padding: 3px 12px; text-shadow: none; }
.pv-info-leg { font-size: 14px; line-height: 18px; white-space: pre-line; overflow-wrap: anywhere; max-height: 9.2em; overflow-y: auto; scrollbar-width: none; }
.pv-yt-titulo { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14.5px; }
.pv-camada .pv-leg-mais, .pv-camada .pv-leg-tres { color: rgba(255, 255, 255, .78) !important; }
.pv-camada .pv-tag { color: #fff; font-weight: 600; }
.pv-info-audio { display: flex; align-items: center; gap: 6px; font-size: 13px; min-width: 0; }
.pv-letreiro { display: block; overflow: hidden; white-space: nowrap; max-width: 75%; mask-image: linear-gradient(90deg, #000 85%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); }
.pv-letreiro span { display: inline-block; padding-right: 40px; animation: pv-letreiro 9s linear infinite; }
@keyframes pv-letreiro { 0%, 12% { transform: translateX(0); } 100% { transform: translateX(-100%); } }
.pv-progresso { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; height: 14px; cursor: pointer; background: linear-gradient(to bottom, transparent 12px, rgba(255, 255, 255, .3) 12px); touch-action: none; }
.com-nav .pv-progresso { bottom: 50px; }
.pv-progresso i { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: #fff; }
.pv-progresso:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.pv-escuro .pv-nav { background: #000; border-top-color: #262626; color: #fff; }
.pv-tela-vert .pv-nav { position: absolute; left: 0; right: 0; bottom: 0; }   /* o vídeo fica atrás; a barra de baixo é do app */
.pv-nav-item { display: grid; justify-items: center; gap: 1px; font-size: 10px; line-height: 12px; color: rgba(255, 255, 255, .75); }
.pv-nav-item.on { color: #fff; }
.pv-nav-item .pv-i { width: 22px; height: 22px; }
.pv-nav-novo .pv-i { width: 34px; height: 34px; }
.pv-vert-pontos { grid-area: pontos; padding-top: 10px; }
.pv-vert-pontos .pv-pontos i { background: rgba(255, 255, 255, .45); }
.pv-vert-pontos .pv-pontos i.on { background: #fff; }
.pv-vert-car .pv-slide > img { object-fit: contain; background: #000; }
/* YouTube */
.pv-youtube .pv-yt[aria-pressed=true] .pv-i { color: #fff; }
.pv-yt-nao .pv-i { transform: rotate(180deg); }
/* TikTok */
.pv-topo-tt { justify-content: space-between; }
.pv-tt-live { font-size: 11px; font-weight: 800; border: 1.5px solid #fff; border-radius: 5px; padding: 0 4px; line-height: 16px; }
.pv-tt-abas { display: flex; gap: 18px; font-size: 16.5px; align-items: center; }
.pv-tt-abas span { opacity: .72; font-weight: 600; }
.pv-tt-abas b { font-weight: 700 !important; padding-bottom: 3px; box-shadow: inset 0 -2.5px 0 #fff; }
.pv-tiktok .pv-lado .pv-i svg path, .pv-tiktok .pv-lado .pv-i svg circle, .pv-tiktok .pv-lado .pv-i svg rect { fill: currentColor; stroke: rgba(0, 0, 0, .15); stroke-width: .6; }
.pv-tiktok .pv-tt-cor[aria-pressed=true] .pv-i { color: #fe2c55 !important; }
.pv-tiktok .pv-tt-salvar[aria-pressed=true] .pv-i { color: #facd00; }
.pv-tt-perfil { position: relative; margin-bottom: 8px; }
.pv-tt-perfil .pv-av { width: 46px; height: 46px; box-shadow: 0 0 0 1.5px #fff; }
.pv-tt-perfil i { position: absolute; left: 50%; bottom: -9px; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%; display: grid; place-items: center; background: #fe2c55; color: #fff; font-style: normal; font-weight: 700; font-size: 16px; line-height: 1; text-shadow: none; }
.pv-tt-disco { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, #333 0 40%, #161616 41%); animation: pv-gira 5s linear infinite; }
.pv-tt-disco .pv-av { width: 26px; height: 26px; }
@keyframes pv-gira { to { transform: rotate(360deg); } }
.pv-info-nome { font-size: 15px; }
.pv-tt-novo { position: relative; display: grid; place-items: center; width: 44px; height: 29px; border-radius: 8px; background: #fff; color: #000; box-shadow: -3px 0 0 #25F4EE, 3px 0 0 #FE2C55; }
.pv-tt-novo b { font-size: 22px; font-weight: 700 !important; line-height: 1; }
.pv-tt-novo i { display: none; }
/* Stories */
.pv-story-palco > img, .pv-story-palco > video { object-fit: cover; }
.pv-story-sombra { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, rgba(0, 0, 0, .38), rgba(0, 0, 0, 0) 20%), linear-gradient(to top, rgba(0, 0, 0, .35), rgba(0, 0, 0, 0) 18%); }
.pv-story-toque { position: absolute; inset: 0; z-index: 2; cursor: pointer; touch-action: manipulation; }
.pv-story-topo { position: absolute; top: 38px; left: 8px; right: 8px; z-index: 4; display: grid; gap: 10px; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .4); pointer-events: none; }
.pv-story-topo button { pointer-events: auto; }
.pv-segs { display: flex; gap: 4px; }
.pv-segs i { flex: 1; height: 2.5px; border-radius: 2px; background: rgba(255, 255, 255, .38); overflow: hidden; }
.pv-segs b { display: block; height: 100%; width: 0; background: #fff; }
.pv-story-quem { display: flex; align-items: center; gap: 8px; font-size: 14px; padding: 0 4px; }
.pv-story-quem > span:not(.pv-topo-fim) { opacity: .75; }
.pv-story-quem .pv-topo-fim { gap: 14px; }
.pv-story-som .pv-som { width: 28px; height: 28px; }
.pv-story-baixo { position: absolute; left: 12px; right: 6px; bottom: 14px; z-index: 4; display: flex; align-items: center; gap: 4px; color: #fff; }
.pv-story-msg { flex: 1; min-width: 0; border: 1px solid rgba(255, 255, 255, .72); border-radius: 999px; padding: 10px 16px; font-size: 14px; }
.pv-story-botoes .pv-foco:focus { position: absolute; z-index: 9; width: auto; height: auto; clip: auto; left: 12px; bottom: 70px; padding: 8px 12px; background: #fff; color: #000; border-radius: 8px; }
@media (prefers-reduced-motion: reduce) {
  .pv-letreiro span, .pv-tt-disco { animation: none; }
  .pv-coracao-grande.pv-pula { animation-duration: .01s; }
  .pv-acao[aria-pressed=true] .pv-i { animation: none; }
}

/* topo com 5 abas: em telas médias some o texto ao lado da marca e as abas apertam */
@media (min-width: 760px) and (max-width: 1099px) { .pn-marca span { display: none; } .pn-abas a { padding: 0 11px; gap: 6px; } }