/* =========================================================================
   Receber avisos (/receber): extraído do rascunho aprovado.
   Base (tokens, chips, blocos, tabelas .tbl/.tbl-stack, .ext, .note) em /assets/site.css.
   ========================================================================= */
/* ---- Receber avisos ---- */
.sub-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 1.5rem; align-items: start; padding-bottom: 1rem; }
@media (max-width: 900px) { .sub-grid { grid-template-columns: 1fr; } }
/* A lateral acompanha o formulário (que é bem mais alto), como a ficha do aviso; só quando ela cabe na tela */
@media (min-width: 901px) and (min-height: 760px) { .sub-grid > aside { position: sticky; top: 92px; } }
.side-h { font-family: var(--font-display); font-size: var(--fs-base); font-weight: 700; color: var(--ink); margin-bottom: 1rem; }
.form-card { padding: clamp(1.25rem, .9rem + 1.5vw, 2rem); }
.form-card fieldset { border: 0; padding: 0; margin: 0 0 1.5rem; min-width: 0; }
.form-card legend, .form-card label.lbl { display: block; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-base); color: var(--ink); margin-bottom: .6rem; padding: 0; }
.legend-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .6rem; }
.legend-row legend { margin: 0; }
.text-input { width: 100%; height: 52px; padding: 0 1.1rem; border-radius: var(--r-md); border: 1px solid var(--line-2); background: var(--surface-2); color: var(--ink); font-size: var(--fs-base); transition: border-color var(--t), box-shadow var(--t); }
.text-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 18%, transparent); background: var(--surface); }
.hint { font-size: var(--fs-xs); color: var(--muted); margin-top: .45rem; }
.cchips { display: flex; flex-wrap: wrap; gap: .5rem; }
.cchip { position: relative; }
.cchip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cchip > span { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .9rem .5rem .7rem; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: var(--surface); font-size: var(--fs-sm); font-weight: 700; color: var(--ink-2); cursor: pointer; transition: all var(--t); user-select: none; }
.cchip > span > svg { width: 15px; height: 15px; }
.cchip > span > .ck { display: none; }
.cchip > span > .pl { color: var(--muted); }
.cchip:hover > span { border-color: var(--brand-300); }
.cchip input:checked + span { background: var(--brand-50); border-color: var(--brand); color: var(--brand-2); box-shadow: inset 0 0 0 1px var(--brand); }
.cchip input:checked + span > .ck { display: block; }
.cchip input:checked + span > .pl { display: none; }
.cchip input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.radios { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
@media (max-width: 520px) { .radios { grid-template-columns: 1fr; } }
.radio { position: relative; }
.radio input { position: absolute; opacity: 0; }
.radio span { display: block; padding: .8rem .95rem; border-radius: var(--r-md); border: 1px solid var(--line-2); background: var(--surface); cursor: pointer; transition: all var(--t); font-size: var(--fs-sm); color: var(--muted); }
.radio span b { display: block; color: var(--ink); font-size: var(--fs-sm); }
.radio input:checked + span { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); background: var(--brand-50); }
.radio input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.consent { font-size: var(--fs-xs); color: var(--muted); line-height: 1.6; margin: -.4rem 0 1.2rem; }
.consent a { color: var(--brand-2); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.consent a svg { display: inline-block; width: 11px; height: 11px; margin: 0 -.1rem 0 .15rem; vertical-align: -1px; }
/* Espaço do Cloudflare Turnstile (tamanho real do widget "normal": 300 x 65), neutro, sem imitar a marca */
.ts-row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.1rem; margin: 0 0 1.2rem; }
.ts-slot { flex: 0 0 auto; display: flex; align-items: center; gap: .75rem; width: 300px; max-width: 100%; height: 65px; padding: 0 .95rem; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface-2); }
.ts-ic { flex: 0 0 auto; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: var(--surface); border: 1px solid var(--line-2); color: var(--muted); }
.ts-ic svg { width: 16px; height: 16px; }
.ts-t { min-width: 0; line-height: 1.3; }
.ts-t b { display: block; font-size: var(--fs-sm); font-weight: 700; color: var(--ink-2); }
.ts-t small { display: block; margin-top: .1rem; font-size: .72rem; font-weight: 500; color: var(--muted); }
.ts-note { flex: 1 1 13rem; min-width: 0; font-size: var(--fs-xs); color: var(--muted); line-height: 1.55; }
.success { display: flex; gap: .9rem; align-items: flex-start; padding: 1rem 1.1rem; border-radius: var(--r-md); background: var(--success-bg); color: var(--success-ink); border: 1px solid color-mix(in srgb, var(--success) 30%, transparent); margin-top: 1.1rem; font-size: var(--fs-sm); animation: rise .4s var(--ease-out) both; }
.success svg { width: 22px; height: 22px; flex: 0 0 auto; }
.success b { display: block; }
.side-list { display: grid; gap: .9rem; }
.side-list li { display: grid; grid-template-columns: 38px 1fr; gap: .8rem; font-size: var(--fs-sm); color: var(--muted); }
.side-list li b { display: block; color: var(--ink); font-family: var(--font-display); font-size: var(--fs-base); margin-bottom: .1rem; }
.side-list .ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--brand-50); color: var(--brand-2); border: 1px solid var(--line-2); }
.side-list .ic svg { width: 18px; height: 18px; }
/* Receber avisos: perfis prontos */
.profiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
@media (max-width: 760px) { .profiles { grid-template-columns: 1fr; } }
.profile { position: relative; }
.profile input { position: absolute; opacity: 0; }
.profile > span { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-content: start; gap: .15rem .7rem; height: 100%; padding: .8rem .9rem; border-radius: var(--r-md); border: 1px solid var(--line-2); background: var(--surface); cursor: pointer; transition: all var(--t); font-size: var(--fs-xs); color: var(--muted); line-height: 1.45; }
.profile > span > .ic { grid-row: span 2; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--brand-50); color: var(--brand-2); border: 1px solid var(--line-2); }
.profile > span > .ic svg { width: 17px; height: 17px; }
.profile > span > b { color: var(--ink); font-size: var(--fs-sm); font-family: var(--font-display); line-height: 1.3; }
.profile:hover > span { border-color: var(--brand-300); }
.profile input:checked + span { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); background: var(--brand-50); }
.profile input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.cchip > span > .ptile-xs { margin-left: -.35rem; }
.watch { margin-top: .8rem; font-size: var(--fs-xs); color: var(--muted); }
.watch summary { cursor: pointer; font-weight: 700; color: var(--brand-2); font-size: var(--fs-sm); }
.watch p { margin-top: .45rem; line-height: 1.6; }
/* ---- Inscrição ainda desligada (fase 2): aviso claro no topo e o formulário visível, porém desativado ---- */
.sub-all { margin: 0 !important; }
.soon { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: .85rem; padding: 1rem 1.1rem; margin: 0 0 1.6rem; border-radius: var(--r-md); background: var(--brand-50); border: 1px solid var(--line-2); color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.55; }
.soon .ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--surface); color: var(--brand-2); border: 1px solid var(--line-2); }
.soon .ic svg { width: 18px; height: 18px; }
.soon .soon-t { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-base); color: var(--ink); margin-bottom: .2rem; }
.soon-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
@media (max-width: 480px) { .soon { grid-template-columns: 1fr; } .soon .ic { display: none; } .soon-actions .btn { width: 100%; } }
/* Controles apagados; o legend de dentro do .legend-row não entra de novo (a opacidade multiplicava: 0,55 x 0,55). O texto
   que é para ler (dicas, consentimento) fica na cor normal, com contraste, e o link da política continua legível. */
.is-soon .sub-all :is(.text-input, .profiles, .legend-row, fieldset > legend, .lbl, .cchips, .radios, .ts-slot, .btn) { opacity: .55; }
.is-soon .sub-all label, .is-soon .sub-all .cchip > span, .is-soon .sub-all .radio span, .is-soon .sub-all .profile > span, .is-soon .sub-all .btn-clear { cursor: not-allowed; }
.is-soon .sub-all .cchip:hover > span, .is-soon .sub-all .profile:hover > span { border-color: var(--line-2); }
.is-soon .sub-all .btn[disabled], .sub-all:disabled .btn { box-shadow: none; transform: none; cursor: not-allowed; }
/* Turnstile de verdade (inscrição ligada): mesmo espaço do widget */
.ts-row .turnstile { flex: 0 1 300px; min-width: 0; min-height: 65px; }
.turnstile-aviso { font-size: var(--fs-xs); color: var(--muted); }
.form-msg { font-size: var(--fs-xs); color: var(--sev-critical-fg); font-weight: 700; margin-top: .45rem; }

/* =========================================================================
   Inscrição por e-mail ligada (29/09/2026): o formulário que envia, o /receber/link, as telas com token (confirmar,
   preferências, sair, excluir) e as de resultado. Nada daqui aparece no /receber desligado: estas classes só existem
   com a inscrição aberta ou nas telas novas. Mesmos tokens, cartões e ícones do rascunho aprovado.
   ========================================================================= */
/* Resumo dos erros de um envio recusado (422): abre o formulário e recebe o foco (pages/receber.js) */
.form-alert { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: .85rem; padding: 1rem 1.1rem; margin: 0 0 1.5rem; border-radius: var(--r-md); background: var(--sev-critical-bg); border: 1px solid var(--sev-critical-line); color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.55; }
.form-alert:focus { outline: 3px solid var(--focus); outline-offset: 2px; }
.form-alert .ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--surface); color: var(--sev-critical-fg); border: 1px solid var(--sev-critical-line); }
.form-alert .ic svg { width: 18px; height: 18px; }
.form-alert-t { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-base); color: var(--ink); margin-bottom: .25rem; }
.form-alert ul { display: grid; gap: .2rem; }
.form-alert a { color: var(--sev-critical-fg); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 480px) { .form-alert { grid-template-columns: 1fr; } .form-alert .ic { display: none; } }
.text-input[aria-invalid="true"] { border-color: var(--sev-critical-fg); box-shadow: 0 0 0 1px var(--sev-critical-fg); }
.text-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--sev-critical-fg) 18%, transparent); }
.turnstile:focus { outline: none; }
.ts-row .form-msg { flex-basis: 100%; order: 2; margin-top: -.3rem; }
.ts-row .ts-note { order: 3; }
.ts-note a { color: var(--brand-2); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.ts-note a svg { display: inline-block; width: 11px; height: 11px; margin: 0 -.1rem 0 .15rem; vertical-align: -1px; }

/* Botão enviando: o ícone vira um anel girando, o texto vira "Enviando..."; sem pulo de largura */
.btn[data-submit].is-busy { cursor: progress; transform: none; box-shadow: none; opacity: .88; }
.btn[data-submit].is-busy > svg { display: none; }
.btn[data-submit].is-busy::before { content: ""; flex: 0 0 auto; width: 1.05em; height: 1.05em; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: sub-spin .8s linear infinite; }
@keyframes sub-spin { to { transform: rotate(360deg); } }
.form-card[aria-busy="true"] .sub-all { pointer-events: none; }

/* Aviso de privacidade curto (formulário e preferências) */
.privacy { margin: -.4rem 0 1.3rem; padding: .85rem 1rem; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); font-size: var(--fs-xs); color: var(--muted); line-height: 1.6; }
.privacy-h { display: flex; align-items: center; gap: .4rem; font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 700; color: var(--ink); margin-bottom: .45rem; letter-spacing: 0; }
.privacy-h svg { width: 15px; height: 15px; color: var(--brand-2); }
.privacy-list { display: grid; gap: .35rem; }
.privacy-list b { color: var(--ink-2); }
.privacy a { color: var(--brand-2); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.privacy a svg { display: inline-block; width: 11px; height: 11px; margin: 0 -.1rem 0 .15rem; vertical-align: -1px; }
.privacy-more { margin-top: .55rem; }
.privacy.card { margin: 0; padding: clamp(1.1rem, .9rem + 1vw, 1.5rem); background: var(--surface); box-shadow: var(--shadow-sm); }
.privacy.card .privacy-h { font-size: var(--fs-base); }

/* Telas da inscrição: cabeçalho, cartão único, quadros de resultado */
.sub-header + .container .sub-saved { margin-bottom: 1.25rem; }
.sub-card { max-width: 780px; }
.sub-h { font-family: var(--font-display); font-size: var(--fs-md); font-weight: 700; color: var(--ink); margin: 1.7rem 0 .75rem; letter-spacing: -.01em; }
.sub-h-first { margin-top: 0; }
.sub-p { color: var(--ink-2); line-height: 1.65; }
.sub-p + .sub-p { margin-top: .7rem; }
.sub-p a:not(.btn), .note a { color: var(--brand-2); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.sub-card .ph-actions, .form-card .ph-actions { margin-top: 1.4rem; }
/* Botões com texto longo ("Prefiro mudar a frequência ou os componentes") quebram a linha no celular em vez de estourar */
.sub-card .ph-actions .btn, .form-card .ph-actions .btn { max-width: 100%; white-space: normal; text-align: center; line-height: 1.3; }
form .sub-h-first { margin-bottom: 1.1rem; }
.sub-card .note { font-size: var(--fs-sm); margin-top: 1.1rem; }
.sub-card .note svg { margin-top: .25rem; }
.sub-note { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: .85rem; padding: 1rem 1.1rem; border-radius: var(--r-md); background: var(--brand-50); border: 1px solid var(--line-2); color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.55; }
.sub-note .ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--surface); color: var(--brand-2); border: 1px solid var(--line-2); }
.sub-note .ic svg { width: 18px; height: 18px; }
.sub-note-t { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-base); color: var(--ink); margin-bottom: .2rem; }
.sub-note.is-ok { background: var(--success-bg); border-color: color-mix(in srgb, var(--success) 30%, transparent); }
.sub-note.is-ok .ic { color: var(--success-ink); border-color: color-mix(in srgb, var(--success) 30%, transparent); }
.sub-note.is-ok .sub-note-t { color: var(--success-ink); }
.sub-note.is-warn { background: var(--sev-medium-bg); border-color: var(--sev-medium-line); }
.sub-note.is-warn .ic { color: var(--sev-medium-fg); border-color: var(--sev-medium-line); }
.sub-note a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.sub-note + .prefs-list, .sub-note + .sub-h { margin-top: 1.4rem; }
@media (max-width: 480px) { .sub-note { grid-template-columns: 1fr; } .sub-note .ic { display: none; } }

/* Passos numerados e dicas */
.sub-steps { display: grid; gap: .8rem; counter-reset: sub-step; }
.sub-steps li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: .75rem; align-items: start; color: var(--ink-2); line-height: 1.55; counter-increment: sub-step; }
.sub-steps li::before { content: counter(sub-step); width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-50); color: var(--brand-2); border: 1px solid var(--line-2); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm); }
.sub-steps b { color: var(--ink); }
.sub-steps + .sub-p { margin-top: 1rem; }
.sub-tips { display: grid; gap: .45rem; }
.sub-tips li { position: relative; padding-left: 1.2rem; color: var(--ink-2); line-height: 1.55; }
.sub-tips li::before { content: ""; position: absolute; left: .2rem; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-400); }

/* As escolhas em linhas (confirmar, "Seus dados") */
.prefs-list { margin: .9rem 0 0; border-top: 1px solid var(--line); }
.prefs-list > div { display: grid; grid-template-columns: minmax(8.5rem, 11rem) minmax(0, 1fr); gap: .25rem 1rem; padding: .75rem 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.prefs-list dt { color: var(--muted); font-size: var(--fs-sm); font-weight: 600; }
.prefs-list dd { margin: 0; color: var(--ink); font-size: var(--fs-sm); font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.prefs-list dd b { font-weight: 700; }
.prefs-list .pl-note { color: var(--muted); font-weight: 500; }
.prefs-list .pl-note::before { content: "· "; }
.prefs-list .pchips { display: flex; flex-wrap: wrap; gap: .4rem; }
.prefs-list .pchip { min-height: 30px; font-size: var(--fs-xs); }
.prefs-list.is-compact > div { grid-template-columns: 1fr; padding: .6rem 0; }
.prefs-list.is-compact dt { font-size: var(--fs-xs); }
@media (max-width: 560px) { .prefs-list > div { grid-template-columns: 1fr; } }
.sub-consent { margin: 1.2rem 0 1.1rem; }

/* Preferências: a lateral com vários cartões não acompanha a rolagem (seria mais alta que a tela) */
.side-stack { display: grid; gap: 1rem; align-content: start; min-width: 0; }
.side-p { font-size: var(--fs-sm); color: var(--muted); line-height: 1.6; }
.side-actions { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.form-card .sub-all > .btn { margin-top: .25rem; }