/* ============================================================
   REDES.LAB ON · O que falta resolver antes da abertura
   A janela que a AR27 vê ao entrar, com a lista do que ainda
   trava o dia 15 de setembro.

   O véu segue o desenho que já existe no layout.css (.rla-ed-veu):
   posição presa à tela, fundo escurecido, cartão no meio com
   rolagem própria. Aqui ele ganha prefixo próprio porque o
   conteúdo é outro e as regras não devem se misturar.

   Fica em 760 para passar por cima da janela de edição do perfil,
   que vive em 700, e ficar por baixo do guia de uso, em 900. Quando
   os dois podem aparecer juntos, quem manda é o guia.
   ============================================================ */

.rlp-veu{
  position:fixed;inset:0;z-index:760;
  display:flex;align-items:center;justify-content:center;
  padding:24px 16px;
  background:rgba(20,8,12,.55);
  overscroll-behavior:contain;
  animation:rlpVeuEntra .16s ease both;
}
/* o véu só clareia: deslizar moveria a janela inteira junto */
@keyframes rlpVeuEntra{from{opacity:0;}to{opacity:1;}}
@keyframes rlpCartaoEntra{from{opacity:0;transform:translateY(10px) scale(.99);}to{opacity:1;transform:none;}}

/* Enquanto a janela está aberta, a página atrás não rola. Sem isso o
   dedo que tenta rolar a lista arrasta o painel de trás. */
body.rlp-preso{overflow:hidden;}

.rlp-cartao{
  width:100%;max-width:560px;
  max-height:calc(100vh - 48px);
  max-height:calc(100dvh - 48px);
  display:flex;flex-direction:column;
  background:var(--surface);
  color:var(--ink);
  border:1px solid var(--rule-soft);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
  animation:rlpCartaoEntra .2s cubic-bezier(.2,.8,.3,1) both;
}

/* ---------- cabeçalho ---------- */
.rlp-topo{
  flex:0 0 auto;
  padding:20px 22px 16px;
  border-bottom:1px solid var(--rule-soft);
  background:var(--surface);
}
.rlp-linha1{display:flex;align-items:flex-start;gap:12px;}
.rlp-cab-txt{flex:1;min-width:0;}
.rlp-sobre{
  font-family:var(--mono);font-size:10.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--body-soft);
}
.rlp-titulo{
  margin-top:6px;
  font-size:20px;line-height:1.25;font-weight:700;
  letter-spacing:-.01em;text-transform:none;
  color:var(--ink);
}
.rlp-contagem{
  display:inline-flex;align-items:center;gap:7px;
  margin-top:12px;padding:6px 12px;
  border-radius:var(--r-pill);
  background:var(--surface-sunk);
  color:var(--ink-2);
  font-size:12.5px;line-height:1.3;font-weight:600;
}
.rlp-contagem b{color:var(--primary);font-weight:700;}
.rlp-contagem svg{flex:0 0 auto;color:var(--body-soft);}

.rlp-fechar{
  flex:0 0 auto;
  width:34px;height:34px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--rule-soft);
  border-radius:var(--r-pill);
  background:transparent;color:var(--body);
  cursor:pointer;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.rlp-fechar:hover{background:var(--surface-sunk);color:var(--ink);border-color:var(--rule);}
.rlp-fechar:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}

/* ---------- lista ---------- */
.rlp-lista{
  flex:1 1 auto;min-height:0;
  overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:4px 22px 18px;
}
.rlp-grupo{margin-top:18px;}
.rlp-grupo:first-child{margin-top:14px;}
.rlp-grupo-nome{
  display:flex;align-items:center;gap:9px;
  margin-bottom:9px;
  font-family:var(--mono);font-size:10.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--body-soft);
}
/* O ponto de cor é o que separa um grupo do outro de relance. Ele
   repete a cor da borda do item, para os dois se lerem juntos. */
.rlp-ponto{width:8px;height:8px;border-radius:50%;background:var(--body-soft);flex:0 0 auto;}

.rlp-item{
  display:block;width:100%;text-align:left;
  margin-bottom:9px;padding:13px 15px;
  border:1px solid var(--rule-soft);
  border-left:3px solid var(--body-soft);
  border-radius:var(--r-md);
  background:var(--surface-2);
  color:inherit;font:inherit;
  cursor:pointer;
  transition:border-color .15s ease,background .15s ease,transform .12s ease;
}
.rlp-item:hover{background:var(--surface-sunk);border-color:var(--rule);}
.rlp-item:active{transform:translateY(1px);}
.rlp-item:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}
.rlp-item:last-child{margin-bottom:0;}

.rlp-cabeca{display:flex;align-items:center;gap:10px;}
.rlp-quantos{
  flex:0 0 auto;min-width:30px;height:26px;padding:0 8px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--r-pill);
  background:var(--surface-sunk);
  color:var(--ink);
  font-family:var(--mono);font-size:13px;font-weight:700;
  font-variant-numeric:tabular-nums;
}
.rlp-nome{
  flex:1;min-width:0;
  font-size:14.5px;line-height:1.35;font-weight:700;color:var(--ink);
}
.rlp-recado{
  margin-top:7px;
  font-size:13px;line-height:1.6;color:var(--body);
}
.rlp-onde{
  display:flex;align-items:center;gap:6px;
  margin-top:10px;
  font-size:12px;font-weight:700;color:var(--primary);
}
.rlp-onde svg{flex:0 0 auto;}

/* ---------- cores por peso ---------- */
/* O que trava a abertura usa a cor primária da casa, que é a mais
   forte da paleta. Os outros pesos descem em intensidade até o
   registro interno, que só precisa estar anotado. */
.rlp-g-trava .rlp-ponto{background:var(--primary);}
.rlp-trava{border-left-color:var(--primary);}
.rlp-trava .rlp-quantos{background:var(--primary);color:var(--primary-ink);}

.rlp-g-vale .rlp-ponto{background:var(--amarelo-neon);}
.rlp-vale{border-left-color:var(--amarelo-neon);}
.rlp-vale .rlp-quantos{background:var(--amarelo-neon);color:#2A1018;}

.rlp-g-atencao .rlp-ponto{background:var(--laranja-rede);}
.rlp-atencao{border-left-color:var(--laranja-rede);}
.rlp-atencao .rlp-quantos{background:var(--laranja-rede);color:#FFF8F0;}

.rlp-g-interno .rlp-ponto{background:var(--body-soft);}
.rlp-interno{border-left-color:var(--rule);}

/* ---------- pé ---------- */
.rlp-pe{
  flex:0 0 auto;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:14px 22px 16px;
  border-top:1px solid var(--rule-soft);
  background:var(--surface);
}
.rlp-nota{
  flex:1;min-width:150px;
  font-size:11.5px;line-height:1.5;color:var(--body-soft);
}
.rlp-pe .btn{flex:0 0 auto;}

/* ---------- tela estreita ---------- */
/* A partir daqui a janela toma a tela inteira. Em 360px de largura
   sobra pouco para margem, e o assunto enquanto ela está aberta é
   ela. O pé continua preso embaixo, para fechar nunca depender de
   ter rolado a lista até o fim. */
@media (max-width:560px){
  .rlp-veu{padding:0;align-items:stretch;}
  .rlp-cartao{
    max-width:none;border:none;border-radius:0;
    max-height:100vh;max-height:100dvh;height:100%;
  }
  .rlp-topo{padding:16px 16px 14px;}
  .rlp-titulo{font-size:17.5px;}
  .rlp-lista{padding:2px 16px 16px;}
  .rlp-pe{padding:12px 16px 14px;}
  .rlp-pe .btn{flex:1 1 auto;justify-content:center;}
  .rlp-nota{flex:1 1 100%;order:2;}
}

/* Em tela muito baixa e deitada, o cartão inteiro rola. */
@media (max-height:420px){
  .rlp-cartao{height:100%;}
  .rlp-titulo{font-size:16px;}
  .rlp-contagem{margin-top:8px;}
}

/* ---------- tema escuro ---------- */
/* O tema escuro vem das variáveis, então quase nada precisa ser dito
   aqui. As duas exceções são o amarelo e o laranja, que em fundo
   escuro cansam a vista com a saturação cheia. */
[data-mode="escuro"] .rlp-veu{background:rgba(0,0,0,.68);}
[data-mode="escuro"] .rlp-vale .rlp-quantos{background:#C99C22;color:#1A0A0E;}
[data-mode="escuro"] .rlp-atencao .rlp-quantos{background:#C25E30;color:#FFF3EB;}
[data-mode="escuro"] .rlp-item{background:var(--surface-2);}
[data-mode="escuro"] .rlp-item:hover{background:var(--surface-sunk);}

/* Quem pediu menos movimento não recebe animação nenhuma. */
@media (prefers-reduced-motion:reduce){
  .rlp-veu,.rlp-cartao{animation:none;}
  .rlp-item{transition:none;}
}