/* ══════════════════════════════════════════════════════════════
   pacto.css — O PACTO

   O lugar reservado da punição. A distinção que justifica a tela:

     no EXTRATO   a penitência existe para INCOMODAR
     aqui         ela existe para ser CONSULTADA

   Por isso esta tela NÃO pisca. O giroflex vem de graça nos cartões
   de dívida em aberto (é o mesmo componente), mas o resto da página é
   sóbrio: quem chega aqui já sabe que deve — repetir o alarme só
   cansaria.
   ══════════════════════════════════════════════════════════════ */
#page-pacto { --pct-vermelho: #ff0a3c; --pct-azul: #0a4cff; }

/* ── O AVISO ───────────────────────────────────────────────
   Um PONTEIRO, não uma lista. A aba Rotinas faz o mesmo: tem um botão
   "Ver missões de hoje →" e não desenha missão nenhuma.

   Ele leva a cor da punição porque É sobre a punição — mas não pisca:
   quem está nesta tela veio olhar o cardápio, e um giroflex aqui
   competiria com o que ele veio fazer. */
.pct-aviso {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; margin-bottom: 1.4rem;
  border-radius: 12px;
  background: color-mix(in srgb, var(--pct-vermelho) 11%, transparent);
  border: 1px solid color-mix(in srgb, var(--pct-vermelho) 34%, transparent);
}
.pct-aviso-n {
  font-size: 1.5rem; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums; color: #fff;
}
.pct-aviso-txt { flex: 1; font-size: .84rem; color: #fca5a5; }
.pct-aviso .btn { white-space: nowrap; }
.pct-aviso:empty, #pacto-aviso:empty { display: none; }

/* ── A NOTA ────────────────────────────────────────────── */
.pct-nota {
  font-size: .78rem; line-height: 1.6; color: #64748b;
  margin: -.4rem 0 1rem;
}
.pct-nota b { color: #94a3b8; }

.pct-vazio {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 20px; border-radius: 12px;
  background: rgba(255,255,255,.02);
  border: 1px dashed rgba(148,163,184,.2);
  color: #64748b; font-size: .84rem;
}
.pct-vazio b { display: block; color: #cbd5e1; margin-bottom: 2px; }
.pct-vazio span { font-size: .78rem; }
.pct-vazio-bom { border-color: rgba(134,239,172,.24); color: #86efac; }

/* ── O CARDÁPIO ────────────────────────────────────────── */
.pct-lista {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 12px;
}
.pct-item {
  display: flex; flex-direction: column; gap: 9px;
  padding: 14px 16px; border-radius: 12px;
  background: linear-gradient(150deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
  border: 1px solid rgba(148,163,184,.16);
}
.pct-item-topo { display: flex; align-items: center; gap: 8px; }
.pct-tipo {
  font-size: .6rem; letter-spacing: .12em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
  background: rgba(148,163,184,.12); color: #94a3b8;
}
.pct-tipo-tributo { background: rgba(250,204,21,.14); color: #fde047; }
.pct-caiu {
  margin-left: auto;
  font-size: .64rem; color: #64748b; font-variant-numeric: tabular-nums;
}
.pct-item-titulo { font-size: .92rem; font-weight: 600; color: #e2e8f0; line-height: 1.4; }

/* A ESCALA. Mostrar o valor CORRENTE, não a base — é ele que vai
   cair. A base sozinha esconderia justamente o escalonamento, que é o
   que dá medo. */
.pct-escala { display: flex; flex-direction: column; gap: 5px; }
.pct-escala-calha {
  height: 5px; border-radius: 3px; overflow: hidden;
  background: rgba(148,163,184,.14);
}
.pct-escala-calha i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--pct-azul), var(--pct-vermelho));
  transition: width .4s cubic-bezier(.22,1,.36,1);
}
.pct-escala-txt { font-size: .68rem; color: #64748b; font-variant-numeric: tabular-nums; }
.pct-escala-txt b { color: #e2e8f0; font-size: .82rem; }
.pct-escala-txt.no-teto { color: #fca5a5; }

.pct-item-acoes { display: flex; gap: 7px; margin-top: 2px; }
.btn-sm { padding: 5px 11px; font-size: .72rem; }
.btn-perigo {
  border-color: color-mix(in srgb, var(--pct-vermelho) 34%, transparent);
  color: #fca5a5;
}
.btn-perigo:hover { background: color-mix(in srgb, var(--pct-vermelho) 16%, transparent); }

/* ── O MODAL ───────────────────────────────────────────── */
.pct-modal-bd {
  position: fixed; inset: 0; z-index: 9990;
  display: flex; align-items: center; justify-content: center;
  padding: 1.2rem;
  background: rgba(3,4,10,.82); backdrop-filter: blur(4px);
}
.pct-modal {
  width: min(560px, 100%); max-height: 88vh; overflow-y: auto;
  padding: 1.4rem 1.5rem; border-radius: 16px;
  background: linear-gradient(170deg, #0d0b18, #07070f 65%);
  border: 1px solid rgba(168,85,247,.35);
  box-shadow: 0 0 50px rgba(0,0,0,.6);
}
.pct-modal h3 {
  margin: 0 0 1.1rem;
  font-family: var(--font-title, Georgia, serif);
  font-size: 1.05rem; color: #e2e8f0;
}
.pct-form { display: flex; flex-direction: column; gap: 12px; }
.pct-campo { display: flex; flex-direction: column; gap: 5px; }
.pct-campo > span {
  font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: #94a3b8;
}
.pct-campo small { font-size: .7rem; color: #64748b; line-height: 1.5; }
.pct-campo code {
  padding: 1px 5px; border-radius: 4px;
  background: rgba(168,85,247,.18); color: #d8b4fe;
}
.pct-dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pct-modal-acoes { display: flex; justify-content: flex-end; gap: 9px; margin-top: 1.2rem; }

/* ── O CATÁLOGO ────────────────────────────────────────── */
.pcat-nota { font-size: .8rem; color: #94a3b8; line-height: 1.6; margin: 0 0 1rem; }
.pcat-lista { display: flex; flex-direction: column; gap: 1rem; }
.pcat-grupo-nome {
  font-size: .64rem; letter-spacing: .14em; text-transform: uppercase;
  color: #64748b; margin-bottom: 6px;
}
.pcat-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 11px; border-radius: 9px; cursor: pointer;
  border: 1px solid transparent;
}
.pcat-item:hover { background: rgba(255,255,255,.04); border-color: rgba(148,163,184,.18); }
/* Já adotada: presente, desabilitada, e visivelmente diferente — some
   seria pior, porque o hunter procuraria o item que "sumiu". */
.pcat-item.tenho { opacity: .45; cursor: default; }
.pcat-txt { flex: 1; font-size: .84rem; color: #cbd5e1; }
.pcat-esc { font-size: .66rem; color: #64748b; font-variant-numeric: tabular-nums; }

/* ── O SELO NO MENU ────────────────────────────────────── */
.nav-badge {
  margin-left: auto;
  min-width: 20px; padding: 1px 6px;
  border-radius: 999px;
  font-size: .66rem; font-weight: 800; text-align: center;
  font-variant-numeric: tabular-nums;
  color: #fff;
  background: #ff0a3c;
  box-shadow: 0 0 12px rgba(255,10,60,.6);
}
.nav-badge.hidden { display: none; }

@media (max-width: 640px) {
  .pct-lista { grid-template-columns: 1fr; }
  .pct-dupla { grid-template-columns: 1fr; }
}