/* ============================================================
   TELA DA PROCURAÇÃO — 03/09/2026

   A tela mais importante do aplicativo, e a que o setor inteiro esconde.

   No PDF do contrato, a procuração é o anexo (iii) — enterrada num documento
   longo onde o cliente clica "li e concordo" sem ler. É o que produz o
   cancelamento três meses depois: "ninguém me explicou que eu dei procuração".

   Aqui ela é tela própria, e a primeira coisa que o cliente vê são DUAS
   COLUNAS: o que ele autoriza e o que ele NÃO autoriza. A coluna do "não" vem
   com o mesmo peso visual da do "sim" de propósito — ela é o argumento de
   venda, não a letra miúda.
   ============================================================ */

.poa{ max-width: 720px; margin: 0 auto; padding: var(--e-5, 24px) 0 96px; }

.poa-topo{ margin-bottom: var(--e-6, 32px); }
.poa-topo h1{ font-size: clamp(24px, 5vw, 32px); margin-bottom: 8px; }
.poa-topo p{ color: var(--muted); }

/* O cliente precisa reconhecer que está diante de um segundo ato jurídico.
   Esta faixa aparece antes dos poderes e não depende da leitura do anexo. */
.poa-distincao{
  margin: 0 0 var(--e-5, 24px);
  padding: 18px 20px;
  border: 2px solid #075CBD;
  border-left-width: 6px;
  border-radius: var(--r-md, 14px);
  background: #fff;
  color: #101010;
}
.poa-distincao strong{ display: block; color: #075CBD; font-size: 16px; margin-bottom: 6px; }
.poa-distincao p{ margin: 0; line-height: 1.55; }

/* As duas colunas. Em celular viram duas seções empilhadas — nunca um acordeão
   que esconda a coluna do "não". */
.poa-colunas{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-4, 16px); margin-bottom: var(--e-6, 32px); }
@media (max-width: 680px){ .poa-colunas{ grid-template-columns: 1fr; } }

.poa-col{ border: 1px solid var(--line); border-radius: var(--r-md, 14px); padding: var(--e-5, 24px); background: var(--surface, #fff); }
.poa-col h2{ font-size: 16px; letter-spacing: .02em; margin-bottom: var(--e-4, 16px); display: flex; align-items: center; gap: 8px; }
.poa-col ul{ list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.poa-col li{ display: flex; gap: 10px; align-items: flex-start; line-height: 1.45; font-size: 15px; }
.poa-col li span{ flex: 0 0 auto; font-weight: 900; line-height: 1.35; }

.poa-sim{ border-color: rgba(34,197,94,.35); background: rgba(34,197,94,.04); }
.poa-sim h2{ color: #15803D; }
.poa-sim li span{ color: var(--green, #22C55E); }

.poa-nao{ border-color: rgba(220,53,69,.30); background: rgba(220,53,69,.04); }
.poa-nao h2{ color: #B02A37; }
.poa-nao li span{ color: var(--bad, #DC3545); }

/* O texto integral fica aberto por padrão. Acordeão fechado é a forma educada
   de esconder — e esconder aqui é exatamente o que estamos combatendo. */
.poa-texto{ border: 1px solid var(--line); border-radius: var(--r-md, 14px); padding: var(--e-5, 24px); background: var(--surface-alt, #F0F4F9); margin-bottom: var(--e-5, 24px); }
.poa-texto pre{ white-space: pre-wrap; word-break: break-word; font-family: inherit; font-size: 14px; line-height: 1.65; margin: 0; color: var(--ink-soft, #2B3D52); }

/* Os três avisos que quase ninguém dá. */
.poa-avisos{ display: grid; gap: 12px; margin-bottom: var(--e-6, 32px); }
.poa-aviso{ display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r-sm, 10px); background: var(--surface-alt, #F0F4F9); border-left: 3px solid var(--sun, #FFC400); font-size: 14px; line-height: 1.5; }
.poa-aviso b{ display: block; margin-bottom: 2px; }

/* Barra de ação fixa: no celular o polegar alcança o rodapé, não o topo. */
.poa-acoes{ position: sticky; bottom: 0; background: linear-gradient(to top, var(--paper) 72%, transparent); padding: var(--e-5, 24px) 0 var(--e-4, 16px); display: flex; gap: 12px; }
.poa-acoes .btn{ flex: 1; }
@media (max-width: 680px){ .poa-acoes{ flex-direction: column-reverse; } }

/* Estado depois de assinada. */
.poa-assinada{ border: 1px solid rgba(34,197,94,.35); background: rgba(34,197,94,.06); border-radius: var(--r-md, 14px); padding: var(--e-5, 24px); margin-bottom: var(--e-5, 24px); }
.poa-assinada h2{ color: #15803D; font-size: 18px; margin-bottom: 6px; }
.poa-meta{ display: grid; gap: 8px; margin-top: var(--e-4, 16px); font-size: 14px; }
.poa-meta div{ display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.poa-meta span:first-child{ color: var(--muted); }
.poa-meta code{ font-size: 12px; word-break: break-all; }

.poa-revogada{ border-color: rgba(220,53,69,.35); background: rgba(220,53,69,.05); }
.poa-revogada h2{ color: #B02A37; }