/* «QUAIS AVISOS RECEBER» — porte de 10/10/2026 (Claudia)
   [CÓPIA] fonte: docs/rodada_web_push_2026-10-10/DO_JEAN/quais_avisos_v1.html (bloco «O CONTEÚDO», sem alteração).
   A moldura é a janela v2 do app (css/janela_contexto_v2.css) — não duplicada aqui.
   Os tokens do molde (:root) entram ESCOPADOS em .rnav: o app não tem --card-line-*/--ease no :root. */
.rnav{--text:#F0EBE0;--text2:#C8BFB0;--text3:#b1a99a;--card-line-1:rgba(255,255,255,.18);--card-line-2:rgba(255,255,255,.28);--card-line-ouro:rgba(201,162,39,.5);--gold:#c9a227;--fs-micro:11.5px;--fs-xs:13px;--fs-md:16px;--ui:'Jost','Avenir Next',system-ui,-apple-system,'Segoe UI',sans-serif;--ease:cubic-bezier(.23,1,.32,1)}
/* ═══════════════════════════════════════════════════════════════════════
   O CONTEÚDO — «Quais avisos receber» · prefixo rnav- · Jean Claude · 10/10/2026
   Vai DENTRO de .rnj-body de uma folha .rnj--cheia (celular) = cartão 640 (Mac).
   Esta é a parte que PORTA (CSS abaixo + HTML da folha mais abaixo).
   ═══════════════════════════════════════════════════════════════════════ */
.rnav{display:flex;flex-direction:column}
.rnav .i{width:22px;height:22px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ── a chave: CÓPIA da .mcr-chave (css/meu_cerebro.css:346-350), 48×28, toque 56×46 ── */
.rnav-chave{position:relative;display:block;flex:none;width:48px;height:28px;margin:0;padding:0;border:1px solid var(--card-line-1);border-radius:14px;background:rgba(0,0,0,.26);cursor:pointer;transition:background 160ms var(--ease),border-color 160ms var(--ease)}
.rnav-chave::before{content:"";position:absolute;inset:-9px -4px}
.rnav-chave i{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--text3);transition:transform 180ms var(--ease),background 160ms var(--ease)}
[aria-checked="true"]>.rnav-chave,.rnav-chave[aria-checked="true"]{border-color:var(--card-line-ouro);background:rgba(201,162,39,.24)}
[aria-checked="true"]>.rnav-chave i,.rnav-chave[aria-checked="true"] i{transform:translateX(20px);background:var(--text)}

/* ── a linha mestre: «Receber avisos» neste aparelho ── */
.rnav-mestre{position:relative;display:flex;align-items:center;gap:14px;width:100%;min-height:64px;padding:11px 12px 11px 14px;box-sizing:border-box;border:1px solid var(--card-line-1);border-radius:14px 14px 14px 7px;background:rgba(0,0,0,.18);color:var(--text);font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:border-color 160ms var(--ease),background 160ms var(--ease)}
.rnav-mestre .i{color:var(--text3);transition:color 160ms}
.rnav-mestre[aria-checked="true"]{border-color:var(--card-line-ouro);background:rgba(201,162,39,.06)}
.rnav-mestre[aria-checked="true"] .i{color:var(--gold)}
.rnav-mestre .m-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.rnav-mestre .m-t b{font:500 var(--fs-md)/1.25 var(--ui);color:var(--text)}
.rnav-mestre .m-t small{font:400 var(--fs-xs)/1.35 var(--ui);color:var(--text2)}
.rnav-mestre .m-t .rnj-status{margin-top:1px}
.rnav-mestre .l-chev{width:16px;height:16px;color:var(--text3);flex:none}
.rnav-mestre:focus-visible{outline:2px solid rgba(201,162,39,.55);outline-offset:-2px}
.rnav-mestre.esperando{pointer-events:none}
.rnav-mestre.esperando .rnav-chave i{animation:rnavPulsa 1.2s var(--ease) infinite}
@keyframes rnavPulsa{0%,100%{opacity:1}50%{opacity:.45}}

/* ── os tipos: linha inteira é a chave (role=switch); «em breve» não é botão ── */
.rnav-tipos{list-style:none;margin:0;padding:0}
.rnav-tipo{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:56px;box-sizing:border-box;margin:0;padding:11px 4px 11px 2px;border:0;background:none;color:var(--text);font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:10px 10px 10px 5px}
.rnav-tipo+.rnav-tipo::before{content:"";position:absolute;top:0;left:2px;right:4px;height:1px;background:rgba(255,255,255,.06)}
.rnav-tipo .t-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.rnav-tipo .t-t b{font:500 var(--fs-md)/1.3 var(--ui);color:var(--text)}
.rnav-tipo .t-t small{font:400 var(--fs-xs)/1.4 var(--ui);color:var(--text2);text-wrap:pretty}
.rnav-tipo .t-t small q{quotes:"«" "»";color:var(--text2)}
.rnav-tipo:focus-visible{outline:2px solid rgba(201,162,39,.55);outline-offset:-2px}
.rnav-tipo:hover .rnav-chave{border-color:var(--card-line-2)}
.rnav-tipo.breve{cursor:default}
.rnav-breve{flex:none;display:inline-flex;align-items:center;height:24px;padding:0 9px;border:1px dashed rgba(238,231,218,.3);border-radius:8px 8px 8px 4px;font:500 var(--fs-micro)/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--text3);white-space:nowrap}

/* ── Testar aviso (só ligado) — é a .rnj-linha da casa ── */
.rnav-testar{margin-top:12px}
.rnav-testar .i{width:20px;height:20px;color:var(--text3)}
.rnav-testar.esperando{pointer-events:none}
.rnav-testar.esperando .rnj-shimmer{background:linear-gradient(90deg,var(--text) 30%,rgba(240,235,224,.3) 50%,var(--text) 70%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:rnjShimmer 1.9s linear infinite}

/* ── ESTADOS (data-estado no .rnav) — o pintar() do avisosPush troca este atributo ── */
.rnav[data-estado="pintando"] .rnav-mestre .rnav-chave,.rnav[data-estado="pintando"] .rnav-mestre .l-chev{display:none}
.rnav[data-estado="pintando"] .rnav-tipo .rnav-chave{visibility:hidden}
/* só leitura: fora do app instalado · bloqueado · sem suporte — a lista mostra, nenhuma chave finge */
.rnav[data-estado="nao-instalado"] .rnav-tipo .rnav-chave,
.rnav[data-estado="negado"] .rnav-tipo .rnav-chave,
.rnav[data-estado="sem-suporte"] .rnav-tipo .rnav-chave{display:none}
.rnav[data-estado="nao-instalado"] .rnav-tipo,
.rnav[data-estado="negado"] .rnav-tipo,
.rnav[data-estado="sem-suporte"] .rnav-tipo{cursor:default;pointer-events:none}
.rnav[data-estado="nao-instalado"] .rnav-mestre .rnav-chave,
.rnav[data-estado="negado"] .rnav-mestre .rnav-chave,
.rnav[data-estado="sem-suporte"] .rnav-mestre .rnav-chave{display:none}
.rnav:not([data-estado="nao-instalado"]):not([data-estado="negado"]) .rnav-mestre .l-chev{display:none}
.rnav[data-estado="sem-suporte"] .rnav-mestre{cursor:default;pointer-events:none}
/* o que só existe em cada estado */
.rnav [data-so]{display:none}
.rnav[data-estado="ligado"]        [data-so~="ligado"],
.rnav[data-estado="desligado"]     [data-so~="desligado"],
.rnav[data-estado="morreu"]        [data-so~="morreu"],
.rnav[data-estado="negado"]        [data-so~="negado"],
.rnav[data-estado="nao-instalado"] [data-so~="nao-instalado"],
.rnav[data-estado="sem-suporte"]   [data-so~="sem-suporte"],
.rnav[data-estado="pintando"]      [data-so~="pintando"]{display:revert}
.rnav .rnav-testar[data-so]{display:none}
.rnav[data-estado="ligado"] .rnav-testar{display:flex}
.rnav .rnj-hint[data-so],.rnav .rnj-status[data-so],.rnav small[data-so]{display:none}
.rnav[data-estado="ligado"] .rnj-hint[data-so~="ligado"],
.rnav[data-estado="desligado"] .rnj-hint[data-so~="desligado"],
.rnav[data-estado="morreu"] .rnj-hint[data-so~="morreu"],
.rnav[data-estado="negado"] .rnj-hint[data-so~="negado"],
.rnav[data-estado="nao-instalado"] .rnj-hint[data-so~="nao-instalado"],
.rnav[data-estado="sem-suporte"] .rnj-hint[data-so~="sem-suporte"]{display:block}
.rnav[data-estado="ligado"] small[data-so~="ligado"],
.rnav[data-estado="desligado"] small[data-so~="desligado"],
.rnav[data-estado="nao-instalado"] small[data-so~="nao-instalado"],
.rnav[data-estado="sem-suporte"] small[data-so~="sem-suporte"],
.rnav[data-estado="pintando"] small[data-so~="pintando"]{display:block}
.rnav[data-estado="morreu"] .rnj-status[data-so~="morreu"],
.rnav[data-estado="negado"] .rnj-status[data-so~="negado"]{display:inline-flex}