/* ==========================================================================
   MIC360 · Portal do Parceiro (Release 3 — SPEC_PARTNER_PROGRAM.md §6.1)
   Identidade visual própria, sóbria, comercial — verde-petróleo + dourado da
   marca. Reaproveita a MESMA sidebar/topbar/componentes do app clínico
   (.sidebar, .card, .table, .btn, .metric-card, .tabs, modais, toasts):
   como esses componentes leem cores via custom properties (--primary,
   --secondary, --gradient-brand...), basta reatribuí-las dentro do escopo
   "#app-shell.partner-mode" para reskinar tudo sem duplicar CSS.
   Ativado por app.js quando a rota é #/pt/* (usuário role='parceiro').
   ========================================================================== */

#app-shell.partner-mode {
  /* Identidade petróleo do parceiro — mesmo tema claro/creme do resto do
     produto (specs/TEMA_PASTEL_SERENO.md); botões primários (.btn-primary,
     .btn-gold) e detalhes passam a petróleo, cartões ficam brancos sobre
     creme. Acentos dourados (--warning/--gold-mist etc.) continuam iguais
     ao resto do app, não são redefinidos aqui. */
  --primary: #3e7d76;
  --primary-dark: #2f635d;
  --primary-light: #7fada6;
  --secondary: var(--primary);
  --secondary-light: var(--primary-light);
  --secondary-dark: var(--primary-dark);
  --btn-primary-bg: var(--primary);
  --btn-primary-bg-hover: var(--primary-dark);
  --support: #7fbf9a;
  --support-dark: #4e8f6b;
  --gradient-brand: linear-gradient(135deg, #3e7d76 0%, #2f635d 100%);
  --gradient-brand-soft: linear-gradient(135deg, rgba(62,125,118,.10) 0%, rgba(217,171,82,.08) 100%);
  --bg: #fbf6ec;
  --bg-alt: #f3ecdf;
  --border: #eadfc9;
  --border-soft: #ede4d2;
}
/* Release 22.2.1 — esta regra pintava a caixa "M" da barra lateral com o
   petróleo do parceiro. A caixa foi substituída pelo símbolo do logo, que é um
   SVG a cor e não obedece a `background`/`color`, por isso a regra saiu em vez
   de ficar a apontar para um seletor que já não existe.
   Consequência assumida, e é uma decisão de marca: no Portal do Parceiro o
   símbolo aparece na cor da MARCA-MÃE (dourado), não em petróleo. Se um dia se
   quiser o símbolo em petróleo, é preciso um ficheiro próprio — não se resolve
   com CSS. Ver a pergunta em aberto no README do pacote do logo. */
#app-shell.partner-mode .sidebar-link.active {
  background: #fff; color: var(--text); box-shadow: 0 2px 10px rgba(90,70,120,.10);
  border-left: 3px solid var(--primary);
}
#app-shell.partner-mode .sidebar-link.active .ic { color: var(--primary); }

/* Página pública do parceiro (#/parceiro/:slug) — SEM autenticação, tela
   cheia própria com o mesmo fundo petróleo+dourado, independente da classe
   partner-mode (que só existe com #app-shell montado após login). */
.pt-public-page {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background:
    radial-gradient(720px 480px at 12% -6%, rgba(240, 185, 84, 0.14), transparent 60%),
    radial-gradient(640px 520px at 108% 12%, rgba(28, 110, 99, 0.35), transparent 55%),
    linear-gradient(160deg, #0a2f2c 0%, #0f4c47 50%, #145c53 100%);
  color: #f2f7f5;
  font-family: var(--font);
}
.pt-public-card {
  width: 100%; max-width: 460px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 22px;
  padding: 32px 28px;
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 12px 40px rgba(5,20,18,.4);
}
.pt-public-logo {
  width: 68px; height: 68px; border-radius: 18px; margin: 0 auto 16px;
  background: linear-gradient(135deg, #f7d38f, #c8912f);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 700; color: #1a2f2b;
  box-shadow: 0 0 0 1px rgba(240,185,84,.35), 0 8px 24px rgba(240,185,84,.22);
  overflow: hidden;
}
.pt-public-logo img { width: 100%; height: 100%; object-fit: cover; }
.pt-public-page h1 { text-align: center; font-size: 22px; margin-bottom: 4px; color: #fff; }
.pt-public-type { text-align: center; font-size: 12.5px; color: rgba(242,247,245,.62); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 18px; }
.pt-public-about { font-size: 14px; line-height: 1.6; color: rgba(242,247,245,.86); margin-bottom: 18px; }
.pt-public-benefit {
  display: flex; align-items: flex-start; gap: 10px;
  background: rgba(240,185,84,.12); border: 1px solid rgba(240,185,84,.35);
  border-radius: 14px; padding: 12px 14px; font-size: 13px; margin-bottom: 20px; color: #f7d38f;
}
.pt-public-cta {
  display: block; width: 100%; text-align: center; padding: 14px;
  border-radius: 12px; font-weight: 700; font-size: 15px; text-decoration: none;
  background: linear-gradient(135deg, #f7d38f, #c8912f); color: #1a2f2b;
  box-shadow: 0 8px 24px rgba(240,185,84,.3);
}
.pt-public-cta:hover { text-decoration: none; filter: brightness(1.04); }
.pt-public-empty { text-align: center; color: rgba(242,247,245,.75); }

/* ==========================================================================
   Componentes do portal autenticado (#/pt/*)
   ========================================================================== */
.pt-kpi-conv { font-size: 12.5px; color: var(--text-soft); margin-top: 4px; }
.pt-tier-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--gradient-brand-soft); border: 1px solid var(--border);
  color: var(--primary-dark); font-weight: 700; font-size: 12.5px;
  padding: 5px 12px; border-radius: 999px;
}

.pt-link-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--bg-alt); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px; font-family: monospace; font-size: 13px; color: var(--text);
}
.pt-link-row code { flex: 1; min-width: 160px; word-break: break-all; }

.pt-qr-wrap {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.pt-qr-canvas-box {
  background: #fff; padding: 10px; border-radius: 12px; border: 1px solid var(--border);
  display: inline-flex; box-shadow: var(--shadow-sm);
}

.pt-asset-card {
  border: 1px solid var(--border); border-radius: var(--radius); padding: 16px;
  background: var(--surface); display: flex; flex-direction: column; gap: 8px;
}
.pt-asset-kind {
  display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--primary); background: var(--gradient-brand-soft);
  padding: 3px 9px; border-radius: 999px; width: fit-content;
}
.pt-asset-body { font-size: 13.5px; color: var(--text-muted); white-space: pre-wrap; line-height: 1.5; }

.pt-wallet-balances { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 18px; }
.pt-balance-card { background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.pt-balance-label { font-size: 12px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.pt-balance-value { font-size: 22px; font-weight: 700; color: var(--primary); margin-top: 2px; }

.pt-copy-btn { display: inline-flex; align-items: center; gap: 6px; }

@media (max-width: 720px) {
  .pt-wallet-balances { grid-template-columns: repeat(2, 1fr); }
  .pt-qr-wrap { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   Release 4 (SPEC_RELEASE_4.md §E4) — Carteira/Resgate em PONTOS.
   ========================================================================== */
.pt-balance-card-main {
  background: var(--gradient-brand-soft);
  border: 1px solid var(--secondary-light);
}
.pt-balance-points { font-size: 30px; }
.pt-balance-unit { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.pt-balance-legacy { font-size: 11.5px; color: var(--text-soft); margin-top: 4px; }

/* Admin — Pontos & Resgates */
.adminpts-rates-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 16px; }
.adminpts-rate-card { background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; }
.adminpts-rate-card label { font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); display:block; margin-bottom:4px; }
.adminpts-rate-card input { width: 100%; }

/* ==========================================================================
   Release 22.3 — faixa de pré-visualização de administrador.

   Fica ANCORADA AO FUNDO, não ao topo: o cabeçalho do app é sticky e a
   sidebar vai do topo ao fim do ecrã, portanto uma faixa no topo obrigava a
   recalcular o `top` de ambos e ainda podia tapar o menu do utilizador — que
   é exatamente por onde a admin entrou aqui. Ao fundo não colide com nada;
   só o rodapé legal ganha folga (.has-preview-banner abaixo).
   Montada por renderPartnerPreviewBanner() em app.js.
   ========================================================================== */
.preview-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 18px;
  background: linear-gradient(135deg, #2f635d 0%, #24504b 100%);
  color: #f2f7f5;
  font-size: 13px; line-height: 1.4;
  box-shadow: 0 -4px 18px rgba(20, 50, 46, .22);
}
.preview-banner .ic { display: flex; flex-shrink: 0; opacity: .9; }
.preview-banner-text { flex: 1; min-width: 0; }
.preview-banner-text strong { font-weight: 700; }
.preview-banner-btn {
  flex-shrink: 0; cursor: pointer;
  background: rgba(255, 255, 255, .12); color: #f2f7f5;
  border: 1px solid rgba(255, 255, 255, .28); border-radius: 7px;
  padding: 6px 12px; font-size: 12.5px; font-weight: 600; font-family: inherit;
  transition: background .15s ease;
}
.preview-banner-btn:hover { background: rgba(255, 255, 255, .22); }
.preview-banner-btn-strong { background: #d9ab52; border-color: #d9ab52; color: #2a2118; }
.preview-banner-btn-strong:hover { background: #e6bb69; }

/* Folga para o rodapé legal não ficar debaixo da faixa. */
#app-shell.has-preview-banner .main-col { padding-bottom: 52px; }

/* No telemóvel o texto e os dois botões não cabem numa linha só. */
@media (max-width: 720px) {
  .preview-banner { flex-wrap: wrap; gap: 8px; padding: 10px 14px; }
  .preview-banner-text { flex-basis: 100%; }
  #app-shell.has-preview-banner .main-col { padding-bottom: 92px; }
}