/* ===========================================================================
   GATING PRO — marcas subtis nos itens Pro (plano Gratuito) + modal de upsell.
   Os itens continuam visíveis e legíveis; ganham um selo "Pro" e cadeado ao
   passar o rato. O bloqueio real acontece ao clicar (ver gating-pro.js).
   =========================================================================== */

/* Selo Pro no canto dos itens bloqueados */
.plano-gratuito .farmaco-card,
.plano-gratuito .caso-card,
.plano-gratuito .quiz-card,
.plano-gratuito .segmentado[data-art]{ position: relative; }

.plano-gratuito .farmaco-card::after,
.plano-gratuito .caso-card::after,
.plano-gratuito .quiz-card::after{
  content: 'PRO';
  position: absolute; top: 7px; right: 7px;
  font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: .08em;
  color: var(--co2, #F5D33D); background: rgba(245,211,61,0.12);
  border: 1px solid rgba(245,211,61,0.32); border-radius: 999px; padding: 1px 6px;
  pointer-events: none; z-index: 2;
}
/* Artefactos: selo ao lado do título do grupo */
.plano-gratuito .segmentado[data-art]{ opacity: .9; }
.plano-gratuito .segmentado[data-art]::before{
  content: '🔒'; position: absolute; top: -22px; right: 0; font-size: 11px; opacity: .7; pointer-events: none;
}

/* Cadeado suave ao passar o rato (sinaliza bloqueio sem esconder) */
.plano-gratuito .farmaco-card:hover,
.plano-gratuito .caso-card:hover,
.plano-gratuito .quiz-card:hover{ box-shadow: inset 0 0 0 1px rgba(245,211,61,0.4); }

/* ---------- Modal de upsell ---------- */
.gp-modal.modal-fundo{ position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,0.66);
  display: grid; place-items: center; padding: 20px; }
.gp-modal[hidden]{ display: none; }
.gp-upsell{ background: var(--surface-1, #0E131B); border: 1px solid var(--line-strong, #232c38);
  border-radius: 18px; padding: 26px; width: 100%; max-width: 400px; text-align: center;
  display: flex; flex-direction: column; gap: 12px; align-items: center; }
.gp-cadeado{ font-size: 34px; }
.gp-upsell h3{ margin: 0; font-size: 20px; color: var(--text-hi, #ECF1F8); }
.gp-pro{ color: var(--co2, #F5D33D); }
.gp-upsell p{ margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-mid, #aeb9c8); }
.gp-nota{ font-size: 12.5px !important; color: var(--text-lo, #7d8898) !important; }
.gp-upsell .modal-acoes{ display: flex; gap: 10px; justify-content: center; margin-top: 8px; width: 100%; }
@media (max-width: 480px){ .gp-upsell .modal-acoes{ flex-direction: column-reverse; } .gp-upsell .modal-acoes .btn{ width: 100%; } }

/* ---------------------------------------------------------------------------
   Painéis inteiramente Pro: Eventos & Fármacos (desfibrilhação, choque, RCP,
   fármacos) e o Carro de Urgência. Selo 🔒 PRO + leve esbatimento, mantendo o
   conteúdo visível e legível. O bloqueio real está no servidor + no clique. */
.plano-gratuito [data-painel="eventos"],
.plano-gratuito .carro-controlo{ position: relative; }

.plano-gratuito [data-painel="eventos"] .ctrl-body,
.plano-gratuito .carro-controlo > *:not(.gp-selo){ opacity: .82; }

.plano-gratuito [data-painel="eventos"]::before,
.plano-gratuito .carro-controlo::before{
  content: '🔒 PRO';
  position: absolute; top: 12px; right: 14px; z-index: 4;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .08em;
  color: var(--co2, #F5D33D); background: rgba(245,211,61,0.12);
  border: 1px solid rgba(245,211,61,0.32); border-radius: 999px; padding: 2px 8px;
  pointer-events: none;
}