/* Cartela dos 100 — tema "papel" (D) é o default; "ilha" (E) troca só os tokens.
 *
 * CINCO estados visíveis (Q2, decisão nominal do dono em 2026-08-28, que revisa
 * a ADR-327): livre · selecionado · meu · vendido · indisponível.
 *
 * ⛔ Os dois blocos de token ficam. O da "ilha" NÃO é CSS morto — é o segundo
 * tema, escolhido por rifa no meta `_cp_rifa_tema` (ADR-326, nominal).
 *
 * ⛔ Regra de contraste desta folha: o ouro `#C9A84C` é BORDA e FUNDO, NUNCA cor
 * de letra — sobre fundo claro ele reprova em texto pequeno. Para tinta existe
 * `--cp-rifa-ouro-tinta`. Regressão presa em tests/test-rifa-render.php (§5).
 *
 * ⛔ Todo seletor passa por `cp-rifa`: a folha vive dentro do Woodmart, que
 * sobrescreve classe genérica sem avisar (armadilha #1 do CLAUDE.md).
 *
 * ⛔ Todo seletor de <button> (`__n`, `__btn`, `__cta`, `__chip`) leva o
 * ANCESTRAL `.cp-rifa`, e a regra base declara `min-height` e `text-transform`.
 * O prefixo no nome NÃO bastava: o Woodmart pinta todo <button> com
 * `:is(.btn,.button,button,[type=submit],[type=button])` (base.css), que tem
 * especificidade (0,1,0) — a mesma de `.cp-rifa__n` — e esta folha entra ANTES
 * do tema (enfileirada antes do `get_header()`). Empate + ordem ⇒ o tema vencia
 * em toda declaração compartilhada (`padding:5px 20px`, `min-height:42px`,
 * Poppins 13px, borda 0): 10 células de 59px = 632px numa tela de 345px, e o
 * `overflow-x:hidden` do html escondia o resto ("só até o 06, e não rola").
 * Com o ancestral, (0,2,0) vence em qualquer ordem de carga. Regressão presa
 * em tests/test-rifa-render.php (§8).
 */

.cp-rifa{
  --cp-rifa-fundo:#FFFFFF;
  --cp-rifa-fundo-2:#FAF8F3;
  --cp-rifa-tinta:#1A1A1A;
  --cp-rifa-tinta-2:#4A4A4A;
  --cp-rifa-muted:#6B5F4A;
  --cp-rifa-ouro:#C9A84C;
  --cp-rifa-ouro-tinta:#8C6F28;
  --cp-rifa-ouro-fundo:#FBF4DF;
  --cp-rifa-borda:#DCD5C6;
  --cp-rifa-escuro:#0D0625;
  --cp-rifa-display:'Cinzel',serif;
  --cp-rifa-corpo:'Poppins',system-ui,sans-serif;

  background:var(--cp-rifa-fundo);
  color:var(--cp-rifa-tinta-2);
  font-family:var(--cp-rifa-corpo);
  max-width:900px;
  margin:0 auto;
  padding:8px 0 0;
}

.cp-rifa[data-cp-rifa-tema="ilha"]{
  --cp-rifa-fundo:#0D0625;
  --cp-rifa-fundo-2:#150A32;
  --cp-rifa-tinta:#F3EAD2;
  --cp-rifa-tinta-2:#D4C4A0;
  --cp-rifa-muted:#8A7A60;
  --cp-rifa-ouro-tinta:#E9D08A;
  --cp-rifa-ouro-fundo:rgba(201,168,76,.16);
  --cp-rifa-borda:rgba(212,196,160,.24);
  padding:32px 26px;
  max-width:none;
  border-top:1px solid rgba(201,168,76,.38);
  border-bottom:1px solid rgba(201,168,76,.38);
}

/* ── título da página ──
   O H1 vinha com `style="color:#fff"` cravado no template: branco sobre o papel
   branco do tema D = título INVISÍVEL. Vai para token, e acompanha os 2 temas. */
.cp-rifa__pagina-titulo{
  font-family:var(--cp-rifa-display);font-weight:400;font-size:30px;line-height:1.15;
  margin:0 0 22px;color:var(--cp-rifa-tinta)
}

/* ── resultado do sorteio ──
   Estava inline no template com `#E8C96A` (dourado claro de tema escuro) sobre o
   papel branco. Ouro NUNCA como letra: a tinta é a `--cp-rifa-ouro-tinta`. */
.cp-rifa__resultado{text-align:center;padding:40px 20px}
.cp-rifa__vencedor{
  font-family:var(--cp-rifa-display);font-size:64px;line-height:1;
  color:var(--cp-rifa-ouro-tinta);font-variant-numeric:tabular-nums
}
.cp-rifa__ref{font-size:13px;color:var(--cp-rifa-muted)}

/* ── prêmio ── */
.cp-rifa__premio{display:grid;grid-template-columns:120px 1fr;gap:22px;align-items:center;margin-bottom:26px}
.cp-rifa__arte{
  aspect-ratio:1;border-radius:12px;display:grid;place-items:center;position:relative;overflow:hidden;
  background:radial-gradient(circle at 32% 28%,rgba(233,208,138,.30),rgba(233,208,138,0) 58%),linear-gradient(155deg,#241238,#0D0625);
  font-family:var(--cp-rifa-display);font-size:32px;color:#E9D08A
}
.cp-rifa__arte::after{content:"";position:absolute;inset:12px;border:1px solid rgba(201,168,76,.30);border-radius:8px}
.cp-rifa__kicker{margin:0 0 6px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--cp-rifa-ouro-tinta)}
.cp-rifa__titulo{font-family:var(--cp-rifa-display);font-weight:400;font-size:24px;line-height:1.2;margin:0 0 8px;color:var(--cp-rifa-tinta)}
.cp-rifa__fatos{display:flex;flex-wrap:wrap;gap:6px 20px;margin:0;font-size:13px;color:var(--cp-rifa-muted)}
.cp-rifa__fatos b{color:var(--cp-rifa-tinta);font-weight:600}

/* ── progresso ── */
.cp-rifa__progresso{margin:0 0 24px}
.cp-rifa__progresso-topo{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px}
.cp-rifa__progresso-topo strong{font-size:13px;color:var(--cp-rifa-tinta);font-variant-numeric:tabular-nums}
.cp-rifa__progresso-topo span{font-size:12px;color:var(--cp-rifa-muted)}
.cp-rifa__barra{height:5px;border-radius:999px;background:var(--cp-rifa-fundo-2);overflow:hidden}
.cp-rifa__barra i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#B18F33,#D9BC6A)}

/* ── ferramentas ── */
.cp-rifa__ferramentas{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:20px}
.cp-rifa .cp-rifa__btn{
  font:600 12.5px/1 var(--cp-rifa-corpo);letter-spacing:.03em;color:var(--cp-rifa-tinta-2);
  background:var(--cp-rifa-fundo);border:1px solid var(--cp-rifa-borda);border-radius:8px;padding:11px 14px;min-height:0;text-transform:none;cursor:pointer;transition:.16s
}
.cp-rifa .cp-rifa__btn:hover{border-color:var(--cp-rifa-ouro);color:var(--cp-rifa-ouro-tinta);background:var(--cp-rifa-ouro-fundo)}
.cp-rifa .cp-rifa__btn:focus-visible{outline:2px solid var(--cp-rifa-ouro);outline-offset:2px}
.cp-rifa__legenda{display:flex;flex-wrap:wrap;gap:16px;margin-left:auto;font-size:11.5px;color:var(--cp-rifa-muted)}
.cp-rifa__legenda i{display:inline-block;width:13px;height:13px;border-radius:4px;vertical-align:-2px;margin-right:7px}
.cp-rifa__legenda .lg-livre{border:1px solid var(--cp-rifa-borda);background:var(--cp-rifa-fundo)}
.cp-rifa__legenda .lg-sel{background:linear-gradient(180deg,#EFD79C,#C9A84C)}
.cp-rifa__legenda .lg-meu{border:1px solid var(--cp-rifa-ouro);background:var(--cp-rifa-ouro-fundo)}
.cp-rifa__legenda .lg-vendido{background:#1C1233}
.cp-rifa[data-cp-rifa-tema="ilha"] .cp-rifa__legenda .lg-vendido{background:#F3EAD2}
/* Neutro, LISO e TRACEJADO: o que separa "indisponível" de "vendido" é a
   luminância (o vendido é o único carimbo escuro do papel) mais a borda
   tracejada — duas pistas, cor e traço, para quem enxerga pouco. */
.cp-rifa__legenda .lg-indisponivel{border:1px dashed #B9B1A0;background:#F2F0EB}
.cp-rifa[data-cp-rifa-tema="ilha"] .cp-rifa__legenda .lg-indisponivel{border-color:rgba(212,196,160,.35);background:rgba(212,196,160,.07)}

/* ── grade: a anilha ── */
.cp-rifa__grade{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:9px}
.cp-rifa .cp-rifa__n{
  position:relative;aspect-ratio:1.28;border-radius:6px;cursor:pointer;
  font-family:var(--cp-rifa-display);font-size:17px;letter-spacing:.06em;font-variant-numeric:tabular-nums;
  border:1px solid var(--cp-rifa-borda);background:var(--cp-rifa-fundo);color:var(--cp-rifa-tinta-2);
  display:grid;place-items:center;padding:0;min-height:0;font-weight:400;text-transform:none;
  transition:transform .13s ease,background .16s,color .16s,border-color .16s,box-shadow .16s
}
.cp-rifa .cp-rifa__n::before,.cp-rifa .cp-rifa__n::after{content:"";position:absolute;left:9px;right:9px;height:1px;background:rgba(201,168,76,.45)}
.cp-rifa .cp-rifa__n::before{top:6px}
.cp-rifa .cp-rifa__n::after{bottom:6px}
.cp-rifa .cp-rifa__n:not([disabled]):hover{transform:translateY(-2px);border-color:var(--cp-rifa-ouro);color:var(--cp-rifa-ouro-tinta);box-shadow:0 5px 14px rgba(13,6,37,.09)}
.cp-rifa .cp-rifa__n:focus-visible{outline:2px solid var(--cp-rifa-ouro);outline-offset:2px}
/* O tema dima todo `button[disabled]` a .6 !important (base.css): o carimbo
   escuro chegava a 60% e virava cinza-roxo. Entre !important vence a
   especificidade — (0,3,0) aqui > (0,1,1) lá. O cursor também é !important lá. */
.cp-rifa .cp-rifa__n[disabled]{opacity:1!important;cursor:not-allowed!important}

/* O livre tem classe PRÓPRIA. Na camada visual ele era o estado "sem classe", e
   ausência não é estado: o JS do poll precisa de um alvo para trocar, e uma
   célula que perdesse a classe cairia no livre por acidente. A regra repete a
   pintura da base de propósito — assim a base pode virar só estrutura sem que o
   livre mude de cor junto. */
.cp-rifa .cp-rifa__n.is-livre{background:var(--cp-rifa-fundo);border-color:var(--cp-rifa-borda);color:var(--cp-rifa-tinta-2)}

.cp-rifa .cp-rifa__n.is-selecionado{
  background:linear-gradient(180deg,#EFD79C,#C9A84C 62%,#A9873A);color:#1A0F03;border-color:#B18F33;
  box-shadow:0 5px 15px rgba(169,135,58,.34)
}
.cp-rifa .cp-rifa__n.is-selecionado::before,.cp-rifa .cp-rifa__n.is-selecionado::after{background:rgba(26,15,3,.40)}
.cp-rifa .cp-rifa__n.is-meu{border-color:var(--cp-rifa-ouro);background:var(--cp-rifa-ouro-fundo);color:var(--cp-rifa-ouro-tinta)}
/* VENDIDO — carimbo escuro (0.10.1, opção A escolhida pelo dono em 05/09).
   Até a 0.9.1 era hachura clara: fundo a 1,18:1 do livre, 1,04:1 do
   indisponível e dígito a 2,05:1 — três estados na mesma família de bege,
   separados por uma textura de 3px que some no celular. Agora o que separa é
   LUMINÂNCIA: o vendido é o único bloco escuro do papel (17,7:1 contra o
   livre) e inverte para claro na ilha. As hairlines douradas ficam, mais
   discretas — ornamento de número que já foi. Rollback: tag
   rifa-0.9.1-antes-contraste-a; opções B/C em docs/plans/2026-09-05-rifa-contraste-*.md. */
.cp-rifa .cp-rifa__n.is-vendido{background:#1C1233;border-color:#1C1233;color:#A89A7C}
.cp-rifa[data-cp-rifa-tema="ilha"] .cp-rifa__n.is-vendido{background:#F3EAD2;border-color:#F3EAD2;color:#3B3352}
.cp-rifa .cp-rifa__n.is-vendido::before,.cp-rifa .cp-rifa__n.is-vendido::after{background:rgba(201,168,76,.22)}
.cp-rifa[data-cp-rifa-tema="ilha"] .cp-rifa__n.is-vendido::before,.cp-rifa[data-cp-rifa-tema="ilha"] .cp-rifa__n.is-vendido::after{background:rgba(13,6,37,.14)}

/* INDISPONÍVEL — o número que outra pessoa está segurando.
   Marca NEUTRA, LISA e TRACEJADA: sem dourado (que o confundiria com
   selecionado/meu) e sem carimbo escuro (que o confundiria com vendido); a
   borda tracejada é a segunda pista. A tela diz "não dá para comprar
   agora" e NÃO conta que existe reserva de terceiro — contar convidaria o
   comprador a esperar 15 minutos e recarregar, transformando a página numa sala
   de espera pela sobra alheia (Q2). */
.cp-rifa .cp-rifa__n.is-indisponivel{background:#F2F0EB;border-color:#B9B1A0;border-style:dashed;color:#7A7466}
.cp-rifa[data-cp-rifa-tema="ilha"] .cp-rifa__n.is-indisponivel{background:rgba(212,196,160,.06);border-color:rgba(212,196,160,.35);border-style:dashed;color:#8E86A8}
/* As duas hairlines douradas da anilha somem junto: célula fora de venda não
   ganha o ornamento que marca a que está à venda. */
.cp-rifa .cp-rifa__n.is-indisponivel::before,.cp-rifa .cp-rifa__n.is-indisponivel::after{background:rgba(13,6,37,.06)}
.cp-rifa[data-cp-rifa-tema="ilha"] .cp-rifa__n.is-indisponivel::before,.cp-rifa[data-cp-rifa-tema="ilha"] .cp-rifa__n.is-indisponivel::after{background:rgba(243,234,210,.07)}

/* ── resumo ── */
.cp-rifa__resumo{
  position:sticky;bottom:14px;margin-top:26px;z-index:5;
  background:linear-gradient(180deg,#1C0F42,#0D0625);border:1px solid rgba(201,168,76,.34);border-radius:12px;
  box-shadow:0 -4px 26px rgba(13,6,37,.22);
  padding:14px 16px;display:flex;gap:16px;align-items:center;flex-wrap:wrap
}
/* Teto do resumo: a barra é sticky no RODAPÉ, então tudo o que ela ganha de
   altura ela ganha PARA CIMA, por cima da cartela — com 60 números os chips
   sozinhos passavam de 900px. Os chips rolam por dentro: 2 fileiras inteiras
   (26px + 6px + 26px) + 8px de fresta da 3ª, para se ver que há mais. */
.cp-rifa__chips{display:flex;flex-wrap:wrap;gap:6px;flex:1 1 240px;min-height:28px;max-height:66px;overflow-y:auto;overscroll-behavior:contain;align-items:center;align-content:flex-start}
.cp-rifa__vazio{font-size:13px;color:#5C5470}
.cp-rifa .cp-rifa__chip{
  font:500 12px/1 var(--cp-rifa-corpo);color:#1A0F03;background:linear-gradient(180deg,#E9D08A,#C9A84C);
  border:0;border-radius:6px;padding:6px 8px 6px 10px;min-height:0;text-transform:none;display:inline-flex;align-items:center;gap:7px;cursor:pointer
}
.cp-rifa .cp-rifa__chip b{font-weight:700;opacity:.55}
.cp-rifa .cp-rifa__chip:hover{color:#1A0F03}
.cp-rifa .cp-rifa__chip:hover b{opacity:1}
.cp-rifa .cp-rifa__chip:focus-visible{outline:2px solid #E9D08A;outline-offset:2px}
.cp-rifa__total{text-align:right;line-height:1.25}
.cp-rifa__total span{display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#8A7A60}
.cp-rifa__total strong{font-family:var(--cp-rifa-display);font-size:24px;color:#F3EAD2;font-variant-numeric:tabular-nums}
.cp-rifa .cp-rifa__cta{
  font:700 14px/1 var(--cp-rifa-corpo);letter-spacing:.04em;color:#170C05;
  background:linear-gradient(180deg,#EFD79C,#C9A84C);border:0;border-radius:9px;padding:15px 22px;min-height:0;text-transform:none;cursor:pointer;transition:.16s
}
/* O :hover do tema ((0,2,0)) troca a cor do texto por cima da base; a cor vai junto. */
.cp-rifa .cp-rifa__cta:hover{filter:brightness(1.06);color:#170C05}
.cp-rifa .cp-rifa__cta:disabled{opacity:.34;cursor:not-allowed;filter:none}
.cp-rifa .cp-rifa__cta:focus-visible{outline:2px solid #E9D08A;outline-offset:3px}

.cp-rifa__toast{width:100%;margin:6px 0 0;font-size:12.5px;color:var(--cp-rifa-ouro-tinta);min-height:1.2em}
/* Estados terminais (cancelada / ainda não aberta / sem rifa). O `#6B5F4A` fixo
   sumia no tema ilha — texto marrom sobre fundo #0D0625. Token com fallback: se
   o aviso for renderizado FORA do `.cp-rifa` (onde a variável não resolve), o
   valor antigo ainda vale. */
.cp-rifa__regras{margin:0 0 14px;font-size:12.5px;line-height:1.55;color:var(--cp-rifa-muted)}
.cp-rifa__regras-link{color:var(--cp-rifa-ouro-tinta);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.cp-rifa__regras-link:focus-visible{outline:2px solid var(--cp-rifa-ouro);outline-offset:2px}
.cp-rifa[data-cp-rifa-tema="ilha"] .cp-rifa__regras-link{color:#E9D08A}
.cp-rifa__aviso{padding:40px 20px;text-align:center;color:var(--cp-rifa-muted,#6B5F4A);font-family:var(--cp-rifa-corpo,'Poppins',system-ui,sans-serif)}

@media (prefers-reduced-motion:reduce){
  .cp-rifa .cp-rifa__n,.cp-rifa .cp-rifa__btn,.cp-rifa .cp-rifa__cta{transition:none!important}
}

@media (max-width:760px){
  .cp-rifa__premio{grid-template-columns:78px 1fr;gap:14px}
  .cp-rifa__arte{font-size:22px}
  .cp-rifa__legenda{margin-left:0;width:100%}
  .cp-rifa__grade{gap:5px}
  /* Quadrada no celular: a 390px a célula tem 30px, a 320px só 23px; com a razão
     1.28 do desktop o alvo de toque caía a 23px e 18px (WCAG 2.5.8 pede 24). */
  .cp-rifa .cp-rifa__n{font-size:13px;aspect-ratio:1}
  .cp-rifa__total{text-align:left}
  .cp-rifa .cp-rifa__cta{width:100%}
}