/* ============================================================
   REDES.LAB ON · RLInfo · o "i" universal de proveniência
   Depende dos tokens de styles.css (--surface, --ink, --rule…)
   ============================================================ */

/* o botão "i": discreto, alvo de toque de 28px, ícone de 13px */
.rli-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;margin:-6px -4px;/* alvo maior sem empurrar o layout */
  padding:0;border:none;background:transparent;border-radius:50%;
  color:var(--body-soft);opacity:.72;vertical-align:middle;
  transition:all .14s ease;flex:0 0 auto;cursor:pointer;
}
.rli-btn:hover,.rli-btn:focus-visible{opacity:1;color:var(--primary);background:color-mix(in srgb,var(--primary) 10%,transparent);}
.rli-btn:focus-visible{outline:2px solid var(--primary);outline-offset:1px;}
.rli-btn[aria-expanded="true"]{opacity:1;color:var(--primary);background:color-mix(in srgb,var(--primary) 13%,transparent);}

/* overlay: invisível no desktop (só captura clique fora), véu no celular */
.rli-overlay{position:fixed;inset:0;z-index:640;background:transparent;}
.rli-overlay-sheet{background:color-mix(in srgb,var(--azul-noite) 42%,transparent);display:flex;align-items:flex-end;}

/* popover (desktop) */
.rli-pop{
  position:fixed;width:320px;max-width:calc(100vw - 20px);
  background:var(--surface);border:1px solid var(--rule);
  border-radius:16px;box-shadow:var(--shadow-lg);
  padding:14px 16px 16px;z-index:650;
  animation:rliPop .18s ease both;outline:none;
}
@keyframes rliPop{from{opacity:0;transform:translateY(5px) scale(.98);}to{opacity:1;transform:translateY(0) scale(1);}}

/* folha inferior (celular) */
.rli-pop.rli-sheet{
  position:relative;width:100%;max-width:none;
  border-radius:20px 20px 0 0;border-bottom:none;
  padding:16px 18px calc(20px + env(safe-area-inset-bottom,0px));
  animation:rliSheet .22s ease both;
}
@keyframes rliSheet{from{transform:translateY(24px);opacity:0;}to{transform:translateY(0);opacity:1;}}
.rli-sheet::before{content:"";display:block;width:38px;height:4px;border-radius:4px;background:var(--rule);margin:0 auto 12px;}

.rli-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;}
.rli-eyebrow{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--primary);}
.rli-x{
  width:28px;height:28px;border-radius:9px;border:none;background:transparent;
  color:var(--body-soft);display:flex;align-items:center;justify-content:center;
  transition:all .14s ease;flex:0 0 auto;
}
.rli-x:hover{background:var(--surface-sunk);color:var(--ink);}

.rli-title{font-family:var(--serif);font-weight:800;font-size:15.5px;line-height:1.2;color:var(--ink);letter-spacing:-.01em;margin-bottom:10px;}

.rli-sec{padding:9px 0;border-top:1px solid var(--rule-soft);}
.rli-k{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--body-soft);margin-bottom:4px;}
.rli-v{font-family:var(--mono);font-size:12px;line-height:1.6;color:var(--body);margin:0;}
.rli-chip{
  display:inline-flex;margin-top:8px;padding:4px 10px;border-radius:var(--r-pill);
  font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.04em;
  color:var(--azul-eletrico);background:color-mix(in srgb,var(--azul-eletrico) 13%,transparent);
}
.rli-obs{
  margin-top:8px;padding:9px 12px;border-radius:11px;
  background:var(--surface-sunk);border-left:3px solid var(--amarelo-neon);
  font-family:var(--mono);font-size:11px;line-height:1.55;color:var(--ink-2);
}