/* ============================================================
   SANCIONES — apartado propio del panel (home, comandos, moderación,
   sanción automática, registros, ajustes). Se carga desde
   manzasbot-premium.html junto con sanciones-ui.js.

   Reglas (Emil Design + Impeccable):
   - Todo es vidrio (.glass del sitio: backdrop-filter + borde de marca).
   - Entradas con ease-out fuerte y < 480ms; botones con scale(.97) al
     presionar; hover solo donde hay mouse real (hover:hover).
   - Las tarjetas que contienen filas clickeables NUNCA llevan transform en
     :hover (bug real documentado 2026-09-20: rompe los clics anidados).
   - prefers-reduced-motion: sin movimiento, solo fundidos.
   ============================================================ */
:root{
  --sn-out: cubic-bezier(0.23, 1, 0.32, 1);
  --sn-ok: #30d158;
  --sn-warn: #ffb340;
  --sn-bad: #ff6369;
  --sn-info: #64a7ff;
  --sn-violet: #b78cff;
  --sn-c-ban: #ff6369;
  --sn-c-mute: #ffb340;
  --sn-c-kick: #ff8a5c;
  --sn-c-warn: #ffd84d;
  --sn-c-otros: #7e8aa5;
}

/* ---------- entrada escalonada ---------- */
@keyframes snRise{ from{ opacity:0; transform:translateY(12px); filter:blur(4px); } to{ opacity:1; transform:none; filter:none; } }
@keyframes snFade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes snPop{ from{ opacity:0; transform:scale(.92); } to{ opacity:1; transform:none; } }
@keyframes snBanner{ from{ transform:scale(1.07); filter:blur(8px) saturate(.8); opacity:.5; } to{ transform:scale(1); filter:none; opacity:1; } }
@keyframes snBarGrow{ from{ transform:scaleY(0); } to{ transform:scaleY(1); } }
@keyframes snPulse{ 0%{ box-shadow:0 0 0 0 currentColor; } 70%{ box-shadow:0 0 0 7px transparent; } 100%{ box-shadow:0 0 0 0 transparent; } }
/* solo anima cuando se ENTRA a la página (.sn-anim); un repintado por un clic adentro no vuelve a hacerla */
.sn-anim .sn-in{ opacity:0; animation: snRise .46s var(--sn-out) forwards; animation-delay: calc(var(--i, 0) * 45ms); }
.sn-page{ display:flex; flex-direction:column; gap:16px; }

/* ---------- sidebar ---------- */
.sn-side-card{ padding:14px; margin-bottom:6px; display:flex; align-items:center; gap:11px; }
.sn-side-logo{ width:42px; height:42px; border-radius:50%; flex-shrink:0; object-fit:cover; background:hsl(var(--surface)); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; color:hsl(var(--gold-2)); overflow:hidden; }
.sn-side-card b{ display:block; font-size:13.5px; line-height:1.25; word-break:break-word; }
.sn-side-card div span{ display:block; font-size:11.5px; color:hsl(var(--muted)); margin-top:2px; }
.sn-side-logo{ background:hsl(var(--gold)/0.16) !important; color:hsl(var(--gold-2)); }
.sn-side-card .sn-pref{ display:inline-block; margin-top:5px; padding:2px 8px; border-radius:9999px; background:hsl(var(--gold)/0.14); color:hsl(var(--gold-2)); font:600 11px 'JetBrains Mono',monospace; }

/* ---------- chips / avatares / textos ---------- */
.sn-chip{ display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:9999px; background:hsl(0 0% 100% / 0.07); font-size:12px; color:hsl(var(--text)); white-space:nowrap; }
.sn-chip svg{ width:13px; height:13px; color:hsl(var(--gold-2)); }
.sn-chip.mono{ font-family:'JetBrains Mono',monospace; }
.sn-tipo{ display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:9px; font-size:11.5px; font-weight:600; background:color-mix(in srgb, var(--c, #7e8aa5) 18%, transparent); color:var(--c, #7e8aa5); white-space:nowrap; }
.sn-tipo.ban,.sn-tipo.tempban{ --c:var(--sn-c-ban); } .sn-tipo.mute,.sn-tipo.deafen{ --c:var(--sn-c-mute); }
.sn-tipo.kick{ --c:var(--sn-c-kick); } .sn-tipo.warn,.sn-tipo.automod{ --c:var(--sn-c-warn); }
.sn-tipo.note{ --c:var(--sn-info); } .sn-tipo.softban{ --c:var(--sn-violet); }
.sn-tipo.unban,.sn-tipo.unmute,.sn-tipo.undeafen{ --c:var(--sn-ok); }
.sn-av{ width:30px; height:30px; border-radius:50%; flex-shrink:0; object-fit:cover; background:hsl(var(--surface)); display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:hsl(var(--gold-2)); overflow:hidden; }
.sn-av.lg{ width:38px; height:38px; font-size:13px; }
.sn-who{ display:flex; align-items:center; gap:10px; min-width:0; }
.sn-who b{ display:block; font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sn-who small{ display:block; font:11px 'JetBrains Mono',monospace; color:hsl(var(--muted)); overflow:hidden; text-overflow:ellipsis; }
.sn-muted{ color:hsl(var(--muted)); }
.sn-h{ font-family:'Montserrat',sans-serif; font-size:15px; font-weight:800; margin:0 0 4px; }
.sn-sub{ font-size:12.5px; color:hsl(var(--muted)); line-height:1.55; }
.sn-card{ padding:20px 22px; }
.sn-card-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:14px; flex-wrap:wrap; }
.sn-link{ background:none; border:none; color:hsl(var(--gold-2)); font:600 12.5px 'Inter',sans-serif; cursor:pointer; padding:6px 4px; border-radius:8px; transition:transform .16s var(--sn-out), color .2s; }
.sn-link:hover{ color:hsl(var(--text)); } .sn-link:active{ transform:scale(.97); }
.sn-empty{ padding:26px 10px; text-align:center; color:hsl(var(--muted)); font-size:13px; }
.sn-empty svg{ width:30px; height:30px; display:block; margin:0 auto 8px; opacity:.5; }

/* ---------- hero (banner + logo) ---------- */
.sn-hero{ padding:0; min-height:210px; display:flex; align-items:flex-end; }
.sn-hero-bg{ position:absolute; inset:0; background-size:cover; background-position:center; animation: snBanner .8s var(--sn-out) both; }
.sn-hero-bg.sin-banner{ background:
    radial-gradient(520px 260px at 12% 0%, hsl(var(--apple)/0.55), transparent 70%),
    radial-gradient(520px 260px at 92% 10%, hsl(var(--gold)/0.45), transparent 70%),
    linear-gradient(135deg, hsl(var(--surface)), hsl(var(--bg))); }
.sn-hero-bg.icono-borroso{ filter:blur(34px) saturate(1.5); transform:scale(1.4); opacity:.55; }
.sn-hero::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 20%, rgba(8,8,12,.55) 62%, rgba(8,8,12,.88)); pointer-events:none; }
.sn-hero-in{ position:relative; z-index:2; width:100%; padding:22px 26px; display:flex; align-items:flex-end; gap:20px; flex-wrap:wrap; }
.sn-hero-logo{ width:92px; height:92px; border-radius:50%; flex-shrink:0; background:hsl(var(--surface)); object-fit:cover; display:flex; align-items:center; justify-content:center; font:800 30px 'Montserrat',sans-serif; color:hsl(var(--gold-2));
  box-shadow:0 0 0 4px rgba(8,8,12,.7), 0 0 0 6px hsl(var(--gold-2)/0.55), 0 14px 38px rgba(0,0,0,.55); animation: snPop .55s var(--sn-out) .12s both; overflow:hidden; }
.sn-hero-txt{ flex:1; min-width:220px; animation: snRise .5s var(--sn-out) .2s both; }
.sn-hero-txt h2{ font:800 26px 'Montserrat',sans-serif; line-height:1.15; text-shadow:0 2px 18px rgba(0,0,0,.6); word-break:break-word; }
.sn-hero-txt p{ font-size:13px; color:hsl(0 0% 100% / 0.78); margin-top:4px; max-width:560px; }
.sn-hero-chips{ display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }
.sn-hero-chips .sn-chip{ background:rgba(8,8,12,.5); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.sn-hero-side{ display:flex; gap:8px; flex-wrap:wrap; animation: snRise .5s var(--sn-out) .3s both; }

/* ---------- tarjetas de números ---------- */
.sn-stats{ display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:14px; }
.sn-stat{ padding:18px 20px; display:flex; flex-direction:column; gap:6px; }
.sn-stat-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.sn-stat-ico{ width:34px; height:34px; border-radius:11px; display:flex; align-items:center; justify-content:center; background:color-mix(in srgb, var(--c, #ffd84d) 16%, transparent); color:var(--c, #ffd84d); }
.sn-stat-ico svg{ width:18px; height:18px; }
.sn-stat b{ font:800 32px 'Montserrat',sans-serif; letter-spacing:-.5px; font-variant-numeric:tabular-nums; line-height:1.05; }
.sn-stat span.lbl{ font-size:12.5px; color:hsl(var(--muted)); }
.sn-delta{ font:700 11.5px 'JetBrains Mono',monospace; padding:3px 8px; border-radius:9999px; }
.sn-delta.sube{ background:rgba(255,99,105,.15); color:var(--sn-bad); } .sn-delta.baja{ background:rgba(48,209,88,.15); color:var(--sn-ok); } .sn-delta.igual{ background:hsl(0 0% 100% / .07); color:hsl(var(--muted)); }

/* ---------- grillas ---------- */
.sn-grid{ display:grid; grid-template-columns:minmax(0, 1.55fr) minmax(0, 1fr); gap:16px; align-items:stretch; }
.sn-fill{ display:flex; flex-direction:column; }
.sn-fill .sn-chart{ flex:1; display:flex; flex-direction:column; }
.sn-fill .sn-bars{ flex:1; height:auto; min-height:178px; }
.sn-grid.iguales{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
@media (max-width:980px){ .sn-grid, .sn-grid.iguales{ grid-template-columns:1fr; } }

/* ---------- gráfico de barras ---------- */
.sn-chart{ position:relative; }
.sn-bars{ display:flex; align-items:flex-end; gap:6px; height:178px; padding-top:8px; }
.sn-col{ flex:1; min-width:0; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:stretch; cursor:default; position:relative; }
.sn-col-stack{ display:flex; flex-direction:column-reverse; border-radius:6px 6px 3px 3px; overflow:hidden; transform-origin:bottom; animation: snBarGrow .62s var(--sn-out) both; animation-delay: calc(var(--i, 0) * 28ms + 120ms); transition:filter .18s ease, opacity .18s ease; }
.sn-col-stack i{ display:block; width:100%; min-height:0; }
.sn-col-stack.vacia{ background:hsl(0 0% 100% / .06); height:4px !important; }
.sn-bars:hover .sn-col:not(:hover) .sn-col-stack{ opacity:.45; }
.sn-col-lbl{ margin-top:7px; text-align:center; font:10.5px 'JetBrains Mono',monospace; color:hsl(var(--muted)); }
.sn-tip{ position:absolute; z-index:6; pointer-events:none; padding:9px 12px; border-radius:12px; background:rgba(12,12,18,.92); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); font-size:12px; line-height:1.55; white-space:nowrap; opacity:0; transform:translateY(4px); transition:opacity .14s var(--sn-out), transform .14s var(--sn-out); box-shadow:0 10px 30px rgba(0,0,0,.45); }
.sn-tip.on{ opacity:1; transform:none; }
.sn-tip b{ display:block; margin-bottom:3px; font-size:12px; }
.sn-tip em{ font-style:normal; display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; }
.sn-leyenda{ display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:12px; font-size:12px; color:hsl(var(--muted)); }
.sn-leyenda span{ display:inline-flex; align-items:center; gap:6px; }
.sn-leyenda i{ width:9px; height:9px; border-radius:3px; display:inline-block; }

/* ---------- dona / anillo ---------- */
.sn-donut-wrap{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; justify-content:center; }
.sn-donut{ width:150px; height:150px; flex-shrink:0; transform:rotate(-90deg); }
.sn-donut circle{ fill:none; stroke-width:15; transition: stroke-dasharray .9s var(--sn-out); }
.sn-donut .pista{ stroke:hsl(0 0% 100% / .07); }
.sn-donut-centro{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; pointer-events:none; }
.sn-donut-centro b{ font:800 26px 'Montserrat',sans-serif; line-height:1; } .sn-donut-centro small{ font-size:11px; color:hsl(var(--muted)); margin-top:3px; }
.sn-donut-box{ position:relative; width:150px; height:150px; flex-shrink:0; }
.sn-dleg{ display:flex; flex-direction:column; gap:7px; font-size:12.5px; min-width:130px; }
.sn-dleg div{ display:flex; align-items:center; gap:8px; } .sn-dleg i{ width:10px; height:10px; border-radius:3px; flex-shrink:0; } .sn-dleg b{ margin-left:auto; font:700 12.5px 'JetBrains Mono',monospace; }

/* ---------- protección ---------- */
.sn-prot-head{ display:flex; align-items:center; gap:16px; margin-bottom:14px; }
.sn-ring{ position:relative; width:74px; height:74px; flex-shrink:0; }
.sn-ring svg{ width:74px; height:74px; transform:rotate(-90deg); } .sn-ring circle{ fill:none; stroke-width:7; stroke-linecap:round; } .sn-ring .pista{ stroke:hsl(0 0% 100% / .08); }
.sn-ring .valor{ transition: stroke-dashoffset 1s var(--sn-out); }
.sn-ring b{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font:800 17px 'Montserrat',sans-serif; }
.sn-prot-list{ display:flex; flex-direction:column; gap:3px; }
.sn-prot{ display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:12px; background:none; border:none; color:inherit; font:inherit; text-align:left; cursor:pointer; width:100%; transition:background .18s ease, transform .16s var(--sn-out); }
.sn-prot:hover{ background:hsl(0 0% 100% / .06); } .sn-prot:active{ transform:scale(.985); }
.sn-prot .pt{ width:9px; height:9px; border-radius:50%; flex-shrink:0; background:hsl(0 0% 100% / .22); }
.sn-prot.on .pt{ background:var(--sn-ok); color:var(--sn-ok); animation: snPulse 2.6s ease-out 1.2s 2; }
.sn-prot > span:not(.pt){ flex:1; font-size:13px; } .sn-prot small{ font-size:11.5px; color:hsl(var(--muted)); }
.sn-prot.on small{ color:var(--sn-ok); }

/* ---------- listas (top mods, recientes, actividad) ---------- */
.sn-list{ display:flex; flex-direction:column; }
.sn-li{ display:flex; align-items:center; gap:11px; padding:10px 4px; border-bottom:1px solid hsl(0 0% 100% / .05); }
.sn-li:last-child{ border-bottom:none; }
.sn-li .grow{ flex:1; min-width:0; }
.sn-li .ctx{ font-size:12.5px; color:hsl(var(--muted)); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sn-li time{ font:11.5px 'JetBrains Mono',monospace; color:hsl(var(--muted)); white-space:nowrap; }
.sn-rank{ width:20px; text-align:center; font:800 13px 'Montserrat',sans-serif; color:hsl(var(--gold-2)); }
.sn-meter{ height:6px; border-radius:9999px; background:hsl(0 0% 100% / .08); overflow:hidden; margin-top:6px; }
.sn-meter i{ display:block; width:100%; height:100%; border-radius:inherit; background:linear-gradient(90deg, hsl(var(--gold)), hsl(var(--apple-2))); transform-origin:left; animation: snMeter .7s var(--sn-out) .25s both; }
@keyframes snMeter{ from{ transform:scaleX(0); } }

/* ---------- tablas de registros ---------- */
.sn-filtros{ padding:16px 18px; display:flex; flex-direction:column; gap:12px; }
.sn-filtros-fila{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.sn-inp{ background:hsl(0 0% 100% / .06); border:1px solid transparent; color:hsl(var(--text)); border-radius:12px; padding:10px 14px; font:13px 'Inter',sans-serif; outline:none; transition:background .18s ease, border-color .18s ease; min-width:0; }
.sn-inp:focus{ border-color:hsl(var(--gold-2)/0.55); background:hsl(0 0% 100% / .09); }
.sn-inp.mono{ font-family:'JetBrains Mono',monospace; }
.sn-buscar{ position:relative; flex:1; min-width:220px; }
.sn-buscar svg{ position:absolute; left:12px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:hsl(var(--muted)); pointer-events:none; }
.sn-buscar .sn-inp{ width:100%; padding-left:36px; }
.sn-fecha{ display:flex; align-items:center; gap:8px; font-size:12px; color:hsl(var(--muted)); }
.sn-fecha input{ color-scheme:dark; }
.sn-chipf{ border:none; cursor:pointer; padding:7px 14px; border-radius:9999px; background:hsl(0 0% 100% / .06); color:hsl(var(--muted)); font:600 12.5px 'Inter',sans-serif; transition:background .18s ease, color .18s ease, transform .16s var(--sn-out); }
.sn-chipf:active{ transform:scale(.96); }
@media (hover:hover) and (pointer:fine){ .sn-chipf:hover{ background:hsl(0 0% 100% / .11); color:hsl(var(--text)); } }
.sn-chipf.on{ background:hsl(var(--gold)/0.2); color:hsl(var(--gold-2)); box-shadow:inset 0 0 0 1px hsl(var(--gold-2)/0.4); }
.sn-tabla{ padding:6px 8px 10px; overflow-x:auto; }
.sn-t{ width:100%; border-collapse:collapse; min-width:640px; }
.sn-t th{ text-align:left; font:700 10.5px 'Inter',sans-serif; text-transform:uppercase; letter-spacing:1.2px; color:hsl(var(--muted)); padding:12px 14px 10px; white-space:nowrap; }
.sn-t td{ padding:12px 14px; border-top:1px solid hsl(0 0% 100% / .05); font-size:13px; vertical-align:middle; }
.sn-t tbody tr{ animation: snFade .3s var(--sn-out) both; animation-delay: calc(var(--i, 0) * 22ms); transition:background .16s ease; }
.sn-t tbody tr:hover{ background:hsl(0 0% 100% / .035); }
.sn-t .fecha{ font:12px 'JetBrains Mono',monospace; color:hsl(var(--muted)); white-space:nowrap; }
.sn-t .motivo{ max-width:340px; color:hsl(var(--muted)); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sn-t .caso{ font:700 12.5px 'JetBrains Mono',monospace; color:hsl(var(--gold-2)); white-space:nowrap; }
.sn-pag{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px 4px; font-size:12.5px; color:hsl(var(--muted)); flex-wrap:wrap; }
.sn-pag div{ display:flex; gap:8px; }
.sn-cargando{ opacity:.55; pointer-events:none; transition:opacity .15s ease; }
.sn-skel{ height:46px; border-radius:12px; margin:8px 10px; background:linear-gradient(90deg, hsl(0 0% 100% / .04), hsl(0 0% 100% / .09), hsl(0 0% 100% / .04)); background-size:200% 100%; animation: snShimmer 1.3s linear infinite; }
@keyframes snShimmer{ from{ background-position:200% 0; } to{ background-position:-200% 0; } }

/* ---------- comandos ---------- */
.sn-cmd-barra{ padding:16px 18px; display:flex; flex-direction:column; gap:12px; }
.sn-cmd-info{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:12.5px; color:hsl(var(--muted)); }
.sn-cmd-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(330px, 1fr)); gap:14px; }
.sn-cmd{ padding:18px 20px 16px; display:flex; flex-direction:column; gap:10px; transition:box-shadow .25s ease, background .25s ease; }
.sn-cmd.off{ background:rgba(15,15,20,.3) !important; }
.sn-cmd.off .sn-cmd-nombre, .sn-cmd.off .sn-cmd-desc{ opacity:.5; }
.sn-cmd-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.sn-cmd-nombre{ font:700 15px 'JetBrains Mono',monospace; color:hsl(var(--gold-2)); display:flex; align-items:center; gap:8px; flex-wrap:wrap; transition:opacity .25s ease; }
.sn-cmd-nombre small{ font:600 10.5px 'Inter',sans-serif; padding:2px 8px; border-radius:9999px; background:hsl(0 0% 100% / .08); color:hsl(var(--muted)); }
.sn-cmd-nombre small.adm{ background:rgba(255,99,105,.15); color:var(--sn-bad); }
.sn-cmd-nombre small.perm{ background:rgba(48,209,88,.15); color:var(--sn-ok); }
.sn-cmd-desc{ font-size:13px; color:hsl(var(--muted)); line-height:1.5; transition:opacity .25s ease; }
.sn-cmd-acc{ display:flex; gap:8px; margin-top:2px; }
.sn-btn{ display:inline-flex; align-items:center; gap:7px; border:none; cursor:pointer; padding:9px 15px; border-radius:12px; background:hsl(0 0% 100% / .07); color:hsl(var(--text)); font:600 12.5px 'Inter',sans-serif; transition:background .18s ease, transform .16s var(--sn-out), box-shadow .2s ease; }
.sn-btn svg{ width:15px; height:15px; color:hsl(var(--gold-2)); transition:transform .4s var(--sn-out); }
.sn-btn:active{ transform:scale(.97); }
@media (hover:hover) and (pointer:fine){ .sn-btn:hover{ background:hsl(0 0% 100% / .13); } .sn-btn:hover svg.gira{ transform:rotate(60deg); } }
.sn-btn.primario{ background:linear-gradient(135deg, hsl(var(--gold)), hsl(var(--apple-2))); color:#1a0f08; box-shadow:0 8px 24px hsl(var(--gold)/0.28); }
.sn-btn.primario svg{ color:inherit; }
@media (hover:hover) and (pointer:fine){ .sn-btn.primario:hover{ background:linear-gradient(135deg, hsl(var(--gold-2)), hsl(var(--apple-2))); box-shadow:0 10px 30px hsl(var(--gold)/0.4); } }
.sn-btn.peligro{ background:rgba(255,99,105,.14); color:var(--sn-bad); } .sn-btn.peligro svg{ color:inherit; }
.sn-btn[disabled]{ opacity:.5; pointer-events:none; }
.sn-btn.chico{ padding:7px 12px; font-size:12px; }
.sn-vacio-filtro{ grid-column:1 / -1; }

/* ---------- modales (ajustes de un comando / ayuda) ---------- */
.sn-modal{ width:min(560px, 94vw); padding:26px 26px 22px; position:relative; }
.sn-modal-x{ position:absolute; top:16px; right:16px; width:34px; height:34px; border-radius:50%; border:none; background:hsl(0 0% 100% / .08); color:hsl(var(--text)); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .18s ease, transform .16s var(--sn-out); z-index:3; }
.sn-modal-x svg{ width:16px; height:16px; } .sn-modal-x:active{ transform:scale(.92); }
@media (hover:hover) and (pointer:fine){ .sn-modal-x:hover{ background:hsl(0 0% 100% / .16); } }
.sn-modal h3{ font:800 19px 'Montserrat',sans-serif; margin:0 40px 4px 0; }
.sn-modal h3 code{ font:700 17px 'JetBrains Mono',monospace; color:hsl(var(--gold-2)); }
.sn-campo{ margin-top:18px; }
.sn-campo > label{ display:block; font-size:13.5px; font-weight:600; margin-bottom:3px; }
.sn-campo > small{ display:block; font-size:12px; color:hsl(var(--muted)); margin-bottom:8px; line-height:1.5; }
.sn-chips{ display:flex; flex-wrap:wrap; gap:7px; margin-top:9px; min-height:4px; }
.sn-pill{ display:inline-flex; align-items:center; gap:7px; padding:5px 6px 5px 11px; border-radius:9999px; background:hsl(var(--gold)/0.13); color:hsl(var(--gold-2)); font-size:12.5px; font-weight:600; }
.sn-pill.rol{ background:color-mix(in srgb, var(--c, #99aab5) 18%, transparent); color:var(--c, #c9d1d9); }
.sn-pill button{ width:20px; height:20px; border-radius:50%; border:none; background:rgba(0,0,0,.28); color:inherit; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:11px; line-height:1; transition:background .15s, transform .15s var(--sn-out); }
.sn-pill button:active{ transform:scale(.88); } .sn-pill button:hover{ background:rgba(0,0,0,.45); }
.sn-modal-pie{ display:flex; gap:10px; justify-content:flex-end; margin-top:24px; }
.sn-ayuda-grid{ display:flex; flex-direction:column; gap:16px; margin-top:18px; }
.sn-ayuda-fila b.k{ display:block; font:700 10.5px 'Inter',sans-serif; text-transform:uppercase; letter-spacing:1.2px; color:hsl(var(--gold-2)); margin-bottom:5px; }
.sn-ayuda-fila p{ font-size:13.5px; line-height:1.55; }
.sn-code{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border-radius:11px; background:rgba(0,0,0,.35); font:12.5px 'JetBrains Mono',monospace; margin-top:6px; word-break:break-word; }
.sn-code button{ flex-shrink:0; border:none; background:hsl(0 0% 100% / .09); color:hsl(var(--muted)); border-radius:8px; padding:5px 9px; font:600 11px 'Inter',sans-serif; cursor:pointer; transition:background .15s, color .15s, transform .15s var(--sn-out); }
.sn-code button:active{ transform:scale(.94); } .sn-code button.ok{ color:var(--sn-ok); }
.sn-code .et{ font:600 10px 'Inter',sans-serif; text-transform:uppercase; letter-spacing:1px; color:hsl(var(--muted)); margin-right:8px; }

/* ---------- formularios de página (moderación / ajustes / autosanción) ---------- */
.sn-form{ display:flex; flex-direction:column; gap:16px; }
.sn-fila{ display:flex; align-items:center; justify-content:space-between; gap:18px; padding:12px 0; border-top:1px solid hsl(0 0% 100% / .05); }
.sn-fila:first-of-type{ border-top:none; }
.sn-fila > div:first-child{ flex:1; min-width:0; }
.sn-fila b{ display:block; font-size:13.5px; font-weight:600; }
.sn-fila small{ display:block; font-size:12px; color:hsl(var(--muted)); margin-top:2px; line-height:1.5; }
.sn-vars{ display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 10px; }
.sn-vars button{ border:none; cursor:pointer; padding:4px 9px; border-radius:8px; background:hsl(0 0% 100% / .07); color:hsl(var(--gold-2)); font:600 11.5px 'JetBrains Mono',monospace; transition:background .15s, transform .15s var(--sn-out); }
.sn-vars button:active{ transform:scale(.94); } @media (hover:hover){ .sn-vars button:hover{ background:hsl(0 0% 100% / .14); } }
.sn-resp{ display:grid; grid-template-columns:110px minmax(0,1fr); gap:6px 14px; align-items:center; padding:10px 0; border-top:1px solid hsl(0 0% 100% / .05); }
.sn-resp:first-of-type{ border-top:none; }
.sn-resp label{ font:700 12.5px 'JetBrains Mono',monospace; color:hsl(var(--gold-2)); }
.sn-resp .prev{ grid-column:2; font-size:12px; color:hsl(var(--muted)); padding:2px 0 0; }
.sn-resp .prev b{ color:hsl(var(--text)); font-weight:600; }
@media (max-width:640px){ .sn-resp{ grid-template-columns:1fr; } .sn-resp .prev{ grid-column:1; } }
.sn-inp.ancho{ width:100%; }
.sn-avanzado > summary{ cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:10px; font-weight:700; font-size:14px; }
.sn-avanzado > summary::-webkit-details-marker{ display:none; }
.sn-avanzado > summary::after{ content:'▾'; color:hsl(var(--muted)); transition:transform .25s var(--sn-out); }
.sn-avanzado[open] > summary::after{ transform:rotate(180deg); }
.sn-avanzado[open] > summary{ margin-bottom:12px; }

/* ---------- sanción automática ---------- */
.sn-reglas{ display:flex; flex-direction:column; gap:10px; }
.sn-regla{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:14px 16px; border-radius:16px; background:hsl(0 0% 100% / .045); }
.sn-regla .txt{ font-size:13.5px; color:hsl(var(--muted)); }
.sn-regla .sn-inp{ padding:8px 10px; }
.sn-regla input[type=number]{ width:74px; text-align:center; font-family:'JetBrains Mono',monospace; }
.sn-regla select{ min-width:130px; }
.sn-regla .borrar{ margin-left:auto; }
.sn-sim{ margin-top:14px; padding:13px 16px; border-radius:14px; background:hsl(var(--gold)/0.09); font-size:12.5px; line-height:1.7; color:hsl(var(--text)); }
.sn-sim b{ color:hsl(var(--gold-2)); }

/* ---------- ajustes ---------- */
.sn-prefijo-prev{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.sn-seg{ display:inline-flex; padding:4px; border-radius:14px; background:hsl(0 0% 100% / .07); gap:2px; position:relative; }
.sn-seg button{ position:relative; z-index:1; border:none; background:none; padding:9px 22px; border-radius:11px; color:hsl(var(--muted)); font:700 13px 'Inter',sans-serif; cursor:pointer; transition:color .2s ease, transform .16s var(--sn-out); }
.sn-seg button:active{ transform:scale(.96); }
.sn-seg button.on{ color:#1a0f08; background:linear-gradient(135deg, hsl(var(--gold)), hsl(var(--gold-2))); box-shadow:0 6px 18px hsl(var(--gold)/0.3); }
.sn-reloj{ font:700 20px 'JetBrains Mono',monospace; color:hsl(var(--gold-2)); margin-top:10px; font-variant-numeric:tabular-nums; }
.sn-aviso{ padding:12px 14px; border-radius:13px; background:rgba(255,179,64,.1); color:#ffcf85; font-size:12.5px; line-height:1.55; }

@media (prefers-reduced-motion: reduce){
  .sn-anim .sn-in, .sn-hero-bg, .sn-hero-logo, .sn-hero-txt, .sn-hero-side, .sn-col-stack, .sn-pill, .sn-regla, .sn-t tbody tr{ animation:none !important; opacity:1 !important; transform:none !important; filter:none !important; }
  .sn-donut circle, .sn-ring .valor{ transition:none !important; }
  .sn-meter i{ animation:none !important; }
  .sn-prot.on .pt{ animation:none; }
}
@media (max-width:640px){
  .sn-hero-in{ padding:18px; } .sn-hero-logo{ width:72px; height:72px; font-size:24px; } .sn-hero-txt h2{ font-size:21px; }
  .sn-card{ padding:16px; } .sn-modal{ padding:22px 18px 18px; } .sn-stat b{ font-size:28px; }
}

/* selector buscable (canal/rol) ocupando todo el ancho dentro de los campos de Sanciones */
.sn-campo .sel-buscable-wrap, .sn-card .sel-buscable-wrap{ width:100%; }
.sn-campo .sel-buscable-input, .sn-card .sel-buscable-input{ width:100%; font-family:'Inter',sans-serif; font-size:13.5px; }

select.sn-inp{ font-family:'Inter',sans-serif; }
.sn-regla select.sn-inp{ width:auto; flex:0 0 auto; }
.sn-t .motivo{ max-width:260px; }
.sn-t{ min-width:560px; }

/* el ícono del selector de secciones en celular se dibujaba gigante (SVG sin tamaño) */
#sideToggleLabel svg{ width:17px; height:17px; vertical-align:-3px; margin-right:7px; color:hsl(var(--gold-2)); }
.sn-filtros .sel-buscable-wrap{ width:auto; min-width:210px; }

/* escalera de castigos: cada escalón en una sola fila, el selector a su medida y la papelera al final */
.sn-escalon{ display:flex; align-items:center; gap:6px 7px; flex-wrap:wrap; margin-top:8px; padding:8px 10px; border-radius:12px;
  background:hsl(0 0% 100% / 0.03); border:1px solid hsl(0 0% 100% / 0.06); }
.sn-campo .sn-escalon .sel-buscable-wrap{ width:128px; min-width:0; flex:0 1 128px; }
.sn-escalon .txt{ font-size:13px; color:hsl(var(--muted)); }
.sn-escalon .sn-btn.peligro{ margin-left:auto; }
.sn-filtros .sel-buscable-input{ font-family:'Inter',sans-serif; font-size:13px; }


/* ============================================================
   MOVIMIENTO (2026-10-02, 2ª pasada) — aparición, click y salida
   Entradas: ease-out fuerte, 220–460ms. Salidas: 140–170ms (más rápidas
   que la entrada). Solo transform/opacity/box-shadow. Sin movimiento si
   el sistema pide reducirlo.
   ============================================================ */
@keyframes snTap{ to{ transform:scale(var(--sz, 14)); opacity:0; } }
@keyframes snRing{ 0%{ box-shadow:0 0 0 0 var(--ring, hsl(var(--gold-2)/0.7)); } 100%{ box-shadow:0 0 0 12px transparent; } }
@keyframes snPillOut{ to{ opacity:0; transform:scale(.86); } }
@keyframes snReglaOut{ to{ opacity:0; transform:translateX(14px) scale(.98); } }
@keyframes snBackOut{ to{ opacity:0; } }
@keyframes snModalOut{ to{ opacity:0; transform:translateY(10px) scale(.97); } }

/* onda de dorado donde se toca (se crea en pointerdown; con teclado no hay) */
.sn-btn, .sn-chipf, .sn-prot, .sn-link, .sn-seg button, .sn-vars button{ position:relative; overflow:hidden; isolation:isolate; }
.sn-modal-x{ overflow:hidden; isolation:isolate; }   /* sigue absolute (esquina del modal); la onda se ancla a él */
.sn-tap{ position:absolute; z-index:0; width:10px; height:10px; margin:-5px 0 0 -5px; border-radius:50%; pointer-events:none; transform:scale(0); opacity:.85;
  background:radial-gradient(circle, hsl(var(--gold-2)/0.55) 0%, hsl(var(--gold-2)/0.18) 45%, transparent 70%); animation: snTap .6s var(--sn-out) forwards; }
.sn-btn.primario .sn-tap{ background:radial-gradient(circle, rgba(255,255,255,.65), rgba(255,255,255,.15) 50%, transparent 72%); }
.sn-btn > *, .sn-chipf > *{ position:relative; z-index:1; }

/* éxito: anillo que se abre y se va */
.sn-ok{ --ring:hsl(var(--gold-2)/0.75); animation: snRing .8s var(--sn-out); }
.sn-on{ --ring:rgba(48,209,88,.7); animation: snRing .8s var(--sn-out); }
.sn-off{ --ring:rgba(150,160,180,.55); animation: snRing .8s var(--sn-out); }

/* chips y reglas: solo el recién agregado entra; el que se quita sale rápido */
.sn-pill.nuevo{ animation: snPop .26s var(--sn-out) both; }
.sn-pill.sale{ animation: snPillOut .14s var(--sn-out) forwards; pointer-events:none; }
.sn-regla.nueva{ animation: snRise .36s var(--sn-out) both; }
.sn-regla.sale{ animation: snReglaOut .17s var(--sn-out) forwards; pointer-events:none; }

/* comandos que vuelven al filtrar */
.sn-vuelve{ animation: snRise .3s var(--sn-out) both; }
.sn-cmd.sn-ok, .sn-cmd.sn-on, .sn-cmd.sn-off{ overflow:visible; }

/* modales: la X y los campos entran en cascada; al cerrar, salida corta */
.sn-modal-in .sn-modal-x{ animation: snPop .4s var(--sn-out) .1s both; }
.sn-modal-in h3, .sn-modal-in > .sn-sub{ animation: snRise .36s var(--sn-out) .04s both; }
.sn-modal-in .sn-campo, .sn-modal-in .sn-ayuda-fila{ animation: snRise .4s var(--sn-out) both; animation-delay: calc(.1s + var(--i, 0) * 45ms); }
.sn-modal-in .sn-modal-pie{ animation: snRise .4s var(--sn-out) .34s both; }
.mt-modal-backdrop.sn-sale{ animation: snBackOut .17s ease-out forwards; pointer-events:none; }
.mt-modal-backdrop.sn-sale .mt-modal{ animation: snModalOut .17s var(--sn-out) forwards; }

/* hover con mouse: brillo en el borde, sin mover nada (las tarjetas tienen filas clickeables adentro) */
@media (hover:hover) and (pointer:fine){
  .sn-cmd:hover{ box-shadow:0 0 0 1px hsl(var(--gold-2)/0.3), 0 16px 38px rgba(0,0,0,.32); }
  .sn-stat:hover{ box-shadow:0 0 0 1px color-mix(in srgb, var(--c, #ffd84d) 40%, transparent), 0 14px 34px rgba(0,0,0,.3); }
  .sn-li:hover{ background:hsl(0 0% 100% / .03); border-radius:12px; }
  .sn-pill button:hover{ transform:scale(1.12); }
}
.sn-cmd, .sn-stat{ transition: box-shadow .25s var(--sn-out), background .25s ease; }
.sn-li{ transition: background .18s ease; }

@media (prefers-reduced-motion: reduce){
  .sn-tap, .sn-ok, .sn-on, .sn-off, .sn-pill.nuevo, .sn-pill.sale, .sn-regla.nueva, .sn-regla.sale, .sn-vuelve,
  .sn-modal-in .sn-modal-x, .sn-modal-in h3, .sn-modal-in > .sn-sub, .sn-modal-in .sn-campo, .sn-modal-in .sn-ayuda-fila, .sn-modal-in .sn-modal-pie{
    animation:none !important; opacity:1 !important; transform:none !important;
  }
  .mt-modal-backdrop.sn-sale, .mt-modal-backdrop.sn-sale .mt-modal{ animation:none !important; }
}


/* Registros: selector Moderación / Panel arriba de los filtros */
.sn-regtabs{ display:flex; }
.sn-regtabs .sn-seg button{ display:inline-flex; align-items:center; gap:8px; padding:10px 22px; }
.sn-regtabs .sn-seg button svg{ width:16px; height:16px; }
.sn-regcuerpo{ margin-top:16px; }
.sn-canal{ display:inline-block; max-width:190px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:middle; padding:3px 9px; border-radius:9px; background:hsl(0 0% 100% / .07); font-size:12px; color:hsl(var(--text)); }
.sn-t .canal{ white-space:nowrap; }

/* en las tablas el ID queda en el tooltip (title) y no come ancho: así entra la columna Motivo */
.sn-t .sn-who small{ display:none; }
.sn-t .sn-who b{ max-width:150px; }
.sn-t .motivo{ max-width:230px; }
.sn-t td, .sn-t th{ padding-left:9px; padding-right:9px; }
.sn-t{ min-width:0; }
.sn-t .motivo{ max-width:200px; }


/* ============================================================
   FASE 3 — AutoMod 2.0 (reglas), revertir, ficha de usuario, eventos de moderación
   ============================================================ */
.sn-rc-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(290px, 1fr)); gap:14px; margin:14px 0; }
.sn-regla-card{ padding:16px 16px 14px; border-radius:20px; display:flex; flex-direction:column; gap:10px; position:relative; transition:opacity .2s ease, filter .2s ease; }
.sn-regla-card.off{ opacity:.62; filter:saturate(.6); }
.sn-regla-card.sale{ animation:snSale .17s var(--sn-out) both; }
.sn-rc-top{ display:flex; align-items:center; gap:12px; }
.sn-rc-ico{ width:38px; height:38px; border-radius:12px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; background:hsl(var(--gold)/0.14); color:hsl(var(--gold-2)); }
.sn-rc-ico svg{ width:19px; height:19px; }
.sn-rc-tit{ flex:1; min-width:0; display:flex; flex-direction:column; }
.sn-rc-tit b{ font-size:14.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sn-rc-tit small{ color:hsl(var(--muted)); font-size:12px; }
.sn-rc-acc{ font-size:12.5px; color:hsl(var(--muted)); line-height:1.45; }
.sn-rc-chips{ display:flex; flex-wrap:wrap; gap:6px; min-height:4px; }
.sn-rc-chips .sn-chip{ font-size:11px; padding:3px 9px; }
.sn-rc-chips .sn-chip svg{ width:12px; height:12px; }
.sn-rc-bot{ display:flex; gap:8px; margin-top:auto; padding-top:4px; }
.sn-rc-bot .sn-btn.chico svg{ width:14px; height:14px; }
.sn-rc-bot .sn-btn.peligro{ margin-left:auto; }
.sn-btn.confirmar{ background:var(--sn-bad) !important; color:#fff !important; border-color:transparent !important; animation:snPopC .22s var(--sn-out); }
@keyframes snPopC{ from{ transform:scale(.92); } to{ transform:none; } }
@keyframes snSale{ to{ opacity:0; transform:scale(.96); } }

.sn-modal-grande{ width:min(720px, 95vw); }
.mt-modal.sn-modal .mt-modal-scroll{ max-height:min(62vh, 560px); overflow-y:auto; padding:2px 4px 6px 2px; margin-top:10px; }
.sn-filtro-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:10px; padding-top:10px; }
.sn-filtro-card{ text-align:left; display:flex; flex-direction:column; gap:6px; padding:14px; border-radius:16px; border:1px solid hsl(0 0% 100% / .08); background:hsl(0 0% 100% / .045); color:inherit; cursor:pointer; font:inherit;
  animation:snRise .34s var(--sn-out) both; animation-delay:calc(var(--i, 0) * 28ms); transition:background .16s ease, border-color .16s ease, transform .16s var(--sn-out); position:relative; overflow:hidden; }
.sn-filtro-card:active{ transform:scale(.97); }
@media (hover:hover){ .sn-filtro-card:hover{ background:hsl(var(--gold)/0.1); border-color:hsl(var(--gold)/0.4); } }
.sn-filtro-card:focus-visible{ outline:2px solid hsl(var(--gold-2)); outline-offset:2px; }
.sn-filtro-card b{ font-size:13.5px; }
.sn-filtro-card small{ color:hsl(var(--muted)); font-size:12px; line-height:1.4; }
.sn-accs{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.sn-acc{ display:inline-flex; align-items:center; gap:7px; padding:8px 13px; border-radius:12px; border:1px solid hsl(0 0% 100% / .1); background:hsl(0 0% 100% / .05); color:hsl(var(--muted)); font:600 12.5px 'Inter',sans-serif; cursor:pointer; transition:background .16s ease, color .16s ease, border-color .16s ease, transform .14s var(--sn-out); }
.sn-acc svg{ width:13px; height:13px; opacity:0; transform:scale(.6); transition:opacity .16s ease, transform .2s var(--sn-out); }
.sn-acc.on{ background:hsl(var(--gold)/0.18); border-color:hsl(var(--gold)/0.55); color:hsl(var(--gold-2)); }
.sn-acc.on svg{ opacity:1; transform:none; }
.sn-acc:active{ transform:scale(.96); }
.sn-acc:focus-visible{ outline:2px solid hsl(var(--gold-2)); outline-offset:2px; }
.sn-avanzado summary{ cursor:pointer; font-weight:700; }

/* probador */
.sn-prob-res{ display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.sn-prob-fila{ padding:10px 12px; border-radius:14px; background:hsl(0 0% 100% / .045); border:1px solid color-mix(in srgb, var(--sn-ok) 35%, transparent); display:flex; flex-direction:column; gap:6px; animation:snRise .3s var(--sn-out) both; }
.sn-prob-fila.salta{ border-color:color-mix(in srgb, var(--sn-bad) 45%, transparent); background:color-mix(in srgb, var(--sn-bad) 7%, transparent); }
.sn-prob-fila code{ font:12px 'JetBrains Mono',monospace; color:hsl(var(--muted)); word-break:break-all; }
.sn-prob-regla{ font-size:12.5px; } .sn-prob-regla small{ display:block; color:hsl(var(--muted)); margin-top:2px; }
.sn-ok-txt{ display:inline-flex; align-items:center; gap:6px; color:var(--sn-ok); font-size:12.5px; } .sn-ok-txt svg{ width:14px; height:14px; }

/* revertir + fila revertida + usuario clickeable */
.sn-rev{ padding:6px 9px !important; } .sn-rev svg{ width:14px; height:14px; }
.sn-rev.confirmar{ padding:6px 11px !important; }
.sn-revertido{ font-size:11px; font-weight:700; padding:3px 9px; border-radius:9px; color:var(--sn-ok); background:color-mix(in srgb, var(--sn-ok) 16%, transparent); white-space:nowrap; }
.sn-t tr.revertido td:not(.acc), .sn-caso.revertido > :not(.sn-revertido){ opacity:.55; }
.sn-t td.clic{ cursor:pointer; } .sn-t td.clic:focus-visible{ outline:2px solid hsl(var(--gold-2)); outline-offset:-2px; }
@media (hover:hover){ .sn-t td.clic:hover .sn-who b{ color:hsl(var(--gold-2)); text-decoration:underline; text-underline-offset:3px; } }
.sn-t .acc{ width:1%; white-space:nowrap; text-align:right; }

/* ficha de usuario */
.sn-modal-ficha{ width:min(680px, 95vw); }
.sn-ficha-head{ display:flex; gap:16px; align-items:center; padding-right:34px; }
.sn-av.xl{ width:64px; height:64px; font-size:20px; }
.sn-tiles{ display:grid; grid-template-columns:repeat(auto-fit, minmax(92px, 1fr)); gap:8px; margin-top:6px; }
.sn-tile{ padding:12px 10px; border-radius:14px; background:hsl(0 0% 100% / .05); text-align:center; display:flex; flex-direction:column; gap:2px; }
.sn-tile b{ font-size:20px; font-variant-numeric:tabular-nums; } .sn-tile span{ font-size:11px; color:hsl(var(--muted)); }
.sn-est-mal{ background:color-mix(in srgb, var(--sn-bad) 18%, transparent) !important; color:var(--sn-bad) !important; }
.sn-est-warn{ background:color-mix(in srgb, var(--sn-warn) 18%, transparent) !important; color:var(--sn-warn) !important; }
.sn-est-ok{ background:color-mix(in srgb, var(--sn-ok) 16%, transparent) !important; color:var(--sn-ok) !important; }
.sn-caso{ animation:snRise .3s var(--sn-out) both; animation-delay:calc(var(--i, 0) * 24ms); }

/* eventos de moderación en Registros del servidor */
.sn-evgrid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:8px; }
.sn-ev{ display:flex; align-items:center; gap:11px; padding:11px 13px; border-radius:14px; background:hsl(0 0% 100% / .045); border:1px solid hsl(0 0% 100% / .07); cursor:pointer; font-size:13.5px; transition:background .16s ease, border-color .16s ease, transform .14s var(--sn-out); user-select:none; position:relative; }
.sn-ev:active{ transform:scale(.97); }
.sn-ev input{ position:absolute; opacity:0; pointer-events:none; }
.sn-ev .caja{ width:20px; height:20px; border-radius:7px; border:1.5px solid hsl(0 0% 100% / .28); display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; transition:background .16s ease, border-color .16s ease; }
.sn-ev .caja svg{ width:13px; height:13px; color:#1a0f08; transform:scale(.4); opacity:0; transition:transform .2s var(--sn-out), opacity .14s ease; }
.sn-ev.on{ background:hsl(var(--gold)/0.1); border-color:hsl(var(--gold)/0.4); }
.sn-ev.on .caja{ background:linear-gradient(135deg, hsl(var(--gold)), hsl(var(--gold-2))); border-color:transparent; }
.sn-ev.on .caja svg{ transform:none; opacity:1; }
.sn-ev:has(input:focus-visible){ outline:2px solid hsl(var(--gold-2)); outline-offset:2px; }

@media (max-width:620px){ .sn-rc-grid{ grid-template-columns:1fr; } .sn-ficha-head{ flex-direction:column; align-items:flex-start; } }
@media (prefers-reduced-motion: reduce){
  .sn-regla-card, .sn-filtro-card, .sn-caso, .sn-prob-fila, .sn-btn.confirmar{ animation:none !important; }
  .sn-acc, .sn-acc svg, .sn-ev, .sn-ev .caja, .sn-ev .caja svg{ transition:none !important; }
}


/* ============================================================
   FASE 4 — Activos, "todos", alertas, y movimiento extra
   ============================================================ */
/* tipos de caso nuevos */
.sn-tipo.quarantine,.sn-tipo.unquarantine{ --c:#ff9d4d; } .sn-tipo.temprole{ --c:var(--sn-info); }
.sn-tipo.bloqueo{ --c:var(--sn-c-kick); } .sn-tipo.slowmode{ --c:var(--sn-violet); }

/* Activos */
.sn-act-lista{ padding:6px 0; }
.sn-act-fila{ display:grid; grid-template-columns:132px minmax(150px, 1.1fr) minmax(0, 1.6fr) auto; gap:14px; align-items:center; padding:12px 16px; border-top:1px solid hsl(0 0% 100% / .05);
  animation:snFade .3s var(--sn-out) both; animation-delay:calc(var(--i, 0) * 24ms); transition:background .16s ease; }
.sn-act-fila:first-child{ border-top:none; }
.sn-act-fila.sale{ animation:snSale .17s var(--sn-out) both; }
@media (hover:hover){ .sn-act-fila:hover{ background:hsl(0 0% 100% / .035); } }
.sn-act-info{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; min-width:0; }
.sn-act-info small{ color:hsl(var(--muted)); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex-basis:100%; }
.sn-act-falta{ font:600 12.5px 'JetBrains Mono',monospace; color:hsl(var(--gold-2)); }
.sn-act-falta.perm{ color:var(--sn-warn); font-family:inherit; }
.sn-term span{ margin-left:6px; }
.sn-term svg{ width:14px; height:14px; }
.sn-chipf b{ font-weight:700; opacity:.7; margin-left:3px; font-variant-numeric:tabular-nums; }
@media (max-width:760px){ .sn-act-fila{ grid-template-columns:1fr auto; } .sn-act-info{ grid-column:1 / -1; } .sn-act-fila .sn-tipo{ justify-self:start; } }

/* activar / desactivar todos */
.sn-bulk{ display:inline-flex; gap:8px; margin-right:auto; }
.sn-bulk .sn-btn{ display:inline-flex; align-items:center; gap:6px; }
.sn-bulk .sn-btn svg{ width:14px; height:14px; }
.sn-bulk .sn-btn b{ font-variant-numeric:tabular-nums; opacity:.75; font-weight:700; padding:1px 7px; border-radius:8px; background:hsl(0 0% 100% / .1); }
.sn-bulk .sn-btn:disabled{ opacity:.4; cursor:default; }
.sn-cmd-nombre small.avz{ background:color-mix(in srgb, var(--sn-violet) 20%, transparent); color:var(--sn-violet); }

/* alertas */
.sn-alerta-num{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:6px; }
.sn-alerta-num input{ width:78px; text-align:center; }
.sn-alerta-num span{ font-size:13px; color:hsl(var(--muted)); }

/* ---- movimiento extra ---- */
/* foco de luz que sigue al cursor (solo mouse real) */
@media (hover:hover) and (pointer:fine){
  .sn-page .sn-card, .sn-page .sn-cmd, .sn-page .sn-regla-card, .sn-page .sn-filtros, .sn-page .sn-tabla, .sn-page .sn-stat{ position:relative; }
  .sn-page .sn-card::after, .sn-page .sn-cmd::after, .sn-page .sn-regla-card::after, .sn-page .sn-filtros::after, .sn-page .sn-tabla::after, .sn-page .sn-stat::after{
    content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .3s ease;
    background:radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), hsl(var(--gold-2) / .10), transparent 62%); }
  .sn-page .sn-card:hover::after, .sn-page .sn-cmd:hover::after, .sn-page .sn-regla-card:hover::after, .sn-page .sn-filtros:hover::after, .sn-page .sn-tabla:hover::after, .sn-page .sn-stat:hover::after{ opacity:1; }
}
/* la píldora del selector se desliza (solo cuando el JS la posicionó; si no, queda el estilo de siempre) */
.sn-seg.js::before{ content:''; position:absolute; top:4px; bottom:4px; left:0; right:0;
  /* la píldora es una ventana (clip-path) que se desliza sobre una franja dorada: sin animar ancho ni layout */
  clip-path:inset(0 calc(100% - var(--x, 0px) - var(--w, 0px)) 0 var(--x, 0px) round 11px);
  background:linear-gradient(135deg, hsl(var(--gold)), hsl(var(--gold-2)));
  transition:clip-path .3s var(--sn-out); }
.sn-seg.js.sin-trans::before{ transition:none; }
.sn-seg.js button.on{ background:none; box-shadow:none; }
/* un número que cambia hace "tic" */
@keyframes snTic{ 0%{ transform:scale(1); } 40%{ transform:scale(1.18); } 100%{ transform:scale(1); } }
.sn-tic{ display:inline-block; animation:snTic .32s var(--sn-out); }
/* micro-animaciones de iconos */
.sn-rev svg, .sn-term svg{ transition:transform .28s var(--sn-out); }
@media (hover:hover){
  .sn-rev:hover svg, .sn-term:hover svg{ transform:rotate(-50deg); }
  .sn-btn.peligro:hover svg{ transform:rotate(-8deg) scale(1.08); }
  .sn-filtro-card:hover .sn-rc-ico{ transform:translateY(-2px) rotate(-4deg); }
}
.sn-rc-ico{ transition:transform .25s var(--sn-out); }
.sn-regla-card.off .sn-rc-ico{ filter:grayscale(1); }
.sn-ev .caja{ box-shadow:0 0 0 0 hsl(var(--gold)/0); }
.sn-ev.on .caja{ animation:snRing .5s var(--sn-out); }
@keyframes snRing{ 0%{ box-shadow:0 0 0 0 hsl(var(--gold-2)/.5); } 100%{ box-shadow:0 0 0 8px hsl(var(--gold-2)/0); } }
/* el interruptor se achata un poco al apretarlo */
.sn-page .sw:active i{ transform:scaleX(1.12); }
/* las barras de carga brillan mientras esperan */
.sn-act-lista .sn-skel, .sn-tabla .sn-skel{ animation-duration:1.1s; }
@media (prefers-reduced-motion: reduce){
  .sn-seg.js::before, .sn-tic, .sn-ev.on .caja, .sn-act-fila{ animation:none !important; transition:none !important; }
  .sn-page .sn-card::after, .sn-page .sn-cmd::after{ display:none; }
}

.sn-card-head > div:first-child{ flex:1 1 300px; min-width:0; }
.sn-card-head > .sw, .sn-card-head > div:last-child:not(:first-child){ flex-shrink:0; }


/* ============================================================
   FASE 6 — Apelaciones y línea de tiempo
   ============================================================ */
.sn-aviso{ display:flex; align-items:center; gap:10px; padding:10px 14px; margin:2px 0 14px; border-radius:14px; font-size:13px;
  background:color-mix(in srgb, var(--sn-warn) 14%, transparent); color:var(--sn-warn); }
.sn-aviso svg{ width:16px; height:16px; flex-shrink:0; }

/* vista previa del mensaje privado */
.sn-dm{ max-width:520px; padding:14px 16px 14px 18px; border-radius:6px 14px 14px 6px; background:hsl(0 0% 100% / .05); position:relative; font-size:13.5px; overflow:hidden; }
.sn-dm::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:#e74c3c; }
.sn-dm-tit{ font-weight:700; margin-bottom:6px; }
.sn-dm p{ margin:0 0 10px; }
.sn-dm-campos{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px 16px; }
.sn-dm-campos span, .sn-dm-ayuda span{ display:block; font-size:11.5px; font-weight:700; color:hsl(var(--muted)); margin-bottom:2px; }
.sn-dm-campos em{ font-style:normal; }
.sn-dm-ayuda{ margin-top:12px; line-height:1.5; }
.sn-dm-btn{ margin-top:12px; padding:7px 16px; border-radius:6px; border:none; background:#5865f2; color:#fff; font:600 13px 'Inter',sans-serif; cursor:default; }

/* tarjetas de apelaciones */
.sn-ap-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(420px, 1fr)); gap:14px; margin:14px 0; }
.sn-ap-card{ padding:16px; border-radius:20px; display:flex; flex-direction:column; gap:10px; }
.sn-ap-top{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.sn-ap-top .sn-who{ flex:1; min-width:160px; }
.sn-ap-est{ font-size:11px; font-weight:700; padding:3px 10px; border-radius:9px; white-space:nowrap; }
.sn-ap-est.warn{ background:color-mix(in srgb, var(--sn-warn) 18%, transparent); color:var(--sn-warn); }
.sn-ap-est.ok{ background:color-mix(in srgb, var(--sn-ok) 16%, transparent); color:var(--sn-ok); }
.sn-ap-est.mal{ background:color-mix(in srgb, var(--sn-bad) 18%, transparent); color:var(--sn-bad); }
.sn-ap-caso{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12.5px; }
.sn-ap-caso .sn-muted{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
.sn-ap-texto{ margin:0; padding:10px 14px; border-radius:12px; background:hsl(0 0% 100% / .05); font-size:13.5px; line-height:1.5; white-space:pre-wrap; word-break:break-word; max-height:180px; overflow:auto; }
.sn-ap-resp{ font-size:12.5px; color:hsl(var(--muted)); }
.sn-ap-acc{ display:flex; gap:8px; align-items:center; }
.sn-ap-acc .sn-btn.chico svg{ width:14px; height:14px; }
.sn-ap-ok{ background:color-mix(in srgb, var(--sn-ok) 20%, transparent) !important; color:var(--sn-ok) !important; }
.sn-procesando{ display:inline-flex; align-items:center; gap:8px; }
.sn-procesando i{ width:12px; height:12px; border-radius:50%; border:2px solid hsl(var(--gold-2)/.3); border-top-color:hsl(var(--gold-2)); animation:snGira .8s linear infinite; }
@keyframes snGira{ to{ transform:rotate(360deg); } }
@media (max-width:620px){ .sn-ap-grid{ grid-template-columns:1fr; } }

/* línea de tiempo */
.sn-tl{ position:relative; margin-top:6px; padding-left:6px; }
.sn-tl::before{ content:''; position:absolute; left:23px; top:8px; bottom:8px; width:2px; background:linear-gradient(180deg, hsl(var(--gold)/.5), hsl(0 0% 100% / .06)); border-radius:2px; }
.sn-tl-dia{ position:relative; margin:16px 0 6px 46px; font:700 11px 'Inter',sans-serif; text-transform:uppercase; letter-spacing:1.2px; color:hsl(var(--muted)); }
.sn-tl-dia:first-child{ margin-top:4px; }
.sn-tl-item{ position:relative; display:flex; align-items:flex-start; gap:12px; padding:7px 0; animation:snRise .32s var(--sn-out) both; animation-delay:calc(var(--i, 0) * 22ms); }
.sn-tl-dot{ position:relative; z-index:1; width:34px; height:34px; border-radius:50%; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center;
  background:hsl(var(--surface, 0 0% 12%)); border:2px solid hsl(0 0% 100% / .12); color:hsl(var(--gold-2)); }
.sn-tl-dot svg{ width:16px; height:16px; }
.sn-tl-item.entrada .sn-tl-dot{ color:var(--sn-ok); border-color:color-mix(in srgb, var(--sn-ok) 45%, transparent); }
.sn-tl-item.salida .sn-tl-dot{ color:var(--sn-c-kick); border-color:color-mix(in srgb, var(--sn-c-kick) 45%, transparent); }
.sn-tl-item.apodo .sn-tl-dot{ color:var(--sn-info); border-color:color-mix(in srgb, var(--sn-info) 45%, transparent); }
.sn-tl-item.roles .sn-tl-dot{ color:var(--sn-violet); border-color:color-mix(in srgb, var(--sn-violet) 45%, transparent); }
.sn-tl-item.timeout .sn-tl-dot{ color:var(--sn-warn); border-color:color-mix(in srgb, var(--sn-warn) 45%, transparent); }
.sn-tl-item.caso .sn-tl-dot{ color:var(--sn-bad); border-color:color-mix(in srgb, var(--sn-bad) 45%, transparent); }
.sn-tl-item.caso.warn .sn-tl-dot, .sn-tl-item.caso.automod .sn-tl-dot{ color:var(--sn-c-warn); border-color:color-mix(in srgb, var(--sn-c-warn) 45%, transparent); }
.sn-tl-item.caso.note .sn-tl-dot{ color:var(--sn-info); border-color:color-mix(in srgb, var(--sn-info) 45%, transparent); }
.sn-tl-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; padding-top:2px; }
.sn-tl-body b{ font-size:13.5px; }
.sn-tl-body small{ color:hsl(var(--muted)); font-size:12.5px; line-height:1.45; word-break:break-word; }
.sn-tl-body small s{ opacity:.7; }
.sn-tl-item time{ font:12px 'JetBrains Mono',monospace; color:hsl(var(--muted)); padding-top:6px; white-space:nowrap; }
.sn-tl-rol{ display:inline-block; padding:1px 8px; border-radius:8px; font-size:11.5px; font-weight:600; }
.sn-tl-rol.mas{ background:color-mix(in srgb, var(--sn-ok) 16%, transparent); color:var(--sn-ok); }
.sn-tl-rol.menos{ background:color-mix(in srgb, var(--sn-bad) 16%, transparent); color:var(--sn-bad); }
@media (prefers-reduced-motion: reduce){ .sn-tl-item, .sn-procesando i{ animation:none !important; } }

/* Celular (2026-10-18, "en cel se ven mal algunos botones"): los filtros, los botones chicos, los "Ver todo →" y las
   variables {user}… medían 23-29px de alto, difíciles de tocar con el dedo. En pantallas táctiles suben a 40px sin
   cambiar el aspecto en PC. Las pestañas de Registros (Moderación / Panel / Activos) se pasaban 2px de la pantalla:
   en cel se reparten el ancho. */
@media (pointer: coarse){
  .sn-chipf, .sn-btn.chico, .sn-link, .sn-vars button{ min-height:40px; }
  .sn-vars button{ padding:4px 12px; }
}
@media (max-width: 480px){
  .sn-regtabs .sn-seg{ display:flex; width:100%; }
  .sn-regtabs .sn-seg button{ flex:1 1 0; justify-content:center; padding:10px 8px; min-width:0; }
}
/* Etiquetas "Solo admins" / "Avanzado" / "NUEVO" a 10-10,5px: en cel casi no se leen (2026-10-18). */
@media (max-width: 640px){
  .sn-cmd-nombre small{ font-size:11.5px; }
  .sn-chip{ font-size:max(11.5px, 1em); }
}