:root{
    /* Bug real: los <select> nativos (canal, canal_opcional, rol, etc.) se
       veían "en blanco" — el texto de las opciones es claro (--text) pero
       sin esto el navegador dibuja el popup de opciones con su tema CLARO
       por defecto -> texto claro sobre fondo claro, invisible. El selector
       de canal de "Bienvenida" no tenía este bug porque ese es un dropdown
       propio hecho con <div>, no un <select> nativo. */
    color-scheme: dark;
    --bg: 8 12% 6%;
    --surface: 10 14% 10%;
    --text: 40 40% 96%;
    --muted: 35 12% 62%;
    --stroke: 40 15% 96%;
    --apple: 5 62% 48%;
    --apple-2: 8 72% 58%;
    --gold: 38 78% 58%;
    --gold-2: 45 88% 68%;
    --leaf: 100 22% 45%;
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
    /* Ease-out fuerte para entradas puntuales (pantalla de invitación,
       2026-08-31) — las curvas nativas del navegador son débiles, esta
       arranca rápido de verdad en vez de sentirse perezosa. */
    --ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1);
    --glass-bg: rgba(15, 15, 20, 0.45);
    --glass-blur: blur(24px) saturate(180%);
    /* Pedido (2026-08-23): sin borde blanco en TODA la página — es la
       variable de un solo lugar que usan (con !important) el nav, todas
       las tarjetas .glass, los modales y .btn-outline. Queda "transparent"
       (no se borra el 1px del todo) para no correr el layout ni un pixel —
       la separación visual la sigue dando el blur + el fondo semitransparente
       de .glass, sin la línea dura encima. */
    --glass-border: 1px solid transparent;
    --glass-radius: 24px;
    --glow-accent: 0 0 60px hsl(var(--gold-2)/0.35), 0 0 120px hsl(var(--apple-2)/0.15);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  /* Anillo de foco dorado por DEFECTO para cualquier cosa que no tenga el
     suyo propio (2026-09-07, corrección real: sin esto, cualquier control
     que no fuera .btn/.inp/.sw/.server-card/.logro-card caía en el anillo
     nativo del navegador — blanco/azulado según el sistema — al navegar
     con Tab). Los selectores más específicos (.btn:focus-visible y demás,
     definidos más abajo) siguen ganando por especificidad donde ya existen;
     esto solo tapa el resto. */
  :focus-visible{ outline:2px solid hsl(var(--gold-2)/0.7); outline-offset:2px; }
  html{scroll-behavior:smooth;}
  /* Bug real (2026-08-27): "Ver comandos" y "Departamentos" del nav SÍ
     scrolleaban, pero el nav flotante (position:fixed) tapaba el título de
     la sección de destino — se sentía como que el link no hacía nada.
     Ningún target de ancla tenía scroll-margin-top. */
  #mesa, #departamentos, #comunidad, #planes, #empezar{ scroll-margin-top:110px; }
  ::selection{ background: hsl(var(--gold)/0.35); color:#fff; }
  body{
    background: hsl(var(--bg));
    color: hsl(var(--text));
    font-family:'Inter', system-ui, sans-serif;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
    position:relative;
  }
  a{ color:inherit; text-decoration:none; }
  .wrap{ max-width:1180px; margin:0 auto; padding:0 24px; }
  .font-display{ font-family:'Montserrat', sans-serif; }
  .font-mono{ font-family:'JetBrains Mono', monospace; }

  .glow{
    position:fixed; inset:0; z-index:0; pointer-events:none;
    background:
      radial-gradient(900px 560px at 18% 8%, hsl(var(--apple)/0.28), transparent 62%),
      radial-gradient(820px 500px at 84% 4%, hsl(var(--gold)/0.24), transparent 60%),
      radial-gradient(1100px 700px at 50% 100%, hsl(var(--leaf)/0.14), transparent 62%);
  }
  .grain{
    position:fixed; inset:0; z-index:1; pointer-events:none; opacity:0.035; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  /* Las líneas guía de 1px a ±590px del centro se leían como bordes que cortaban la luz: fuera (2026-10-08). */
  .guide-l, .guide-r{ display:none !important; }
  .guide-l{ left:calc(50% - 590px); }
  .guide-r{ left:calc(50% + 590px); }
  @media (max-width:1240px){ .guide-l, .guide-r{ display:none; } }

  .glass{
    position:relative; overflow:hidden;
    background: var(--glass-bg) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border: var(--glass-border) !important;
    border-radius: var(--glass-radius) !important;
    transition: transform .4s var(--ease-smooth), background .3s ease, box-shadow .4s var(--ease-smooth), border-color .3s ease;
  }
  .glass::before{
    content:''; position:absolute; inset:0; border-radius:inherit; padding:1.2px;
    /* Pedido (2026-08-23, tras las capturas): el halo de borde de TODO lo
       .glass pasa a la paleta de marca (dorado→manzana) en vez del blanco
       parejo de antes — "quedaron hermosos" los que ya lo tenían (feat-card
       /testi-card/final-card/home-*), ahora es la base para TODO (tarjetas
       del panel, selector de servers, preview del Huerto, modales). La
       barra de nav es la ÚNICA excepción explícita (ver .nav-pill::before/
       .nav-drop-menu::before más abajo, que la devuelven al blanco de
       siempre) — a propósito, para no repetir el error de tocar la barra. */
    background: linear-gradient(160deg, hsl(var(--gold-2)/0.4), hsl(var(--gold-2)/0.05) 30%, transparent 55%, hsl(var(--apple-2)/0.05) 75%, hsl(var(--apple-2)/0.3));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    pointer-events:none;
  }
  .glass-interactive:hover{ transform:translateY(-9px) scale(1.02); background: rgba(20, 20, 26, 0.6) !important; border-color: rgba(255,255,255,0.3) !important; box-shadow: 0 30px 70px hsl(0 0% 0% / 0.5), var(--glow-accent); }
  .glass-interactive:active{ transform:translateY(-3px) scale(0.97); transition-duration:.12s; }

  .fixed-video{ position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
  .fixed-video video{
    width:100%; height:100%; object-fit:cover;
    position:absolute; top:50%; left:50%;
    transform:translate(-50%,-50%) scale(calc(1 + var(--bg-zoom, 0)));
    min-width:100%; min-height:100%;
  }
  @media not all /* movimiento reducido: lo decide el botón "Animaciones" del sitio (html[data-motion=reduced], ver manza-a11y.css) */{ .fixed-video video{ transform:translate(-50%,-50%) !important; } }
  .fixed-video-overlay{
    position:absolute; inset:0;
    background: linear-gradient(180deg, hsl(var(--bg)/0.55) 0%, hsl(var(--bg)/0.75) 45%, hsl(var(--bg)) 100%);
  }

  .ranking-podio{ display:flex; justify-content:center; align-items:flex-end; gap:18px; margin-bottom:40px; flex-wrap:wrap; }
  .rp-item{ display:flex; flex-direction:column; align-items:center; text-align:center; }
  .rp-item img{ border-radius:50%; object-fit:cover; display:block; }
  .rp-1{ order:2; } .rp-2{ order:1; } .rp-3{ order:3; }
  .rp-1 img{ width:92px; height:92px; border:3px solid hsl(45 88% 60%); box-shadow:0 0 24px hsl(45 88% 60% / 0.4); }
  .rp-2 img{ width:72px; height:72px; border:3px solid hsl(0 0% 78%); }
  .rp-3 img{ width:72px; height:72px; border:3px solid hsl(28 65% 52%); }
  .rp-medal{ font-size:24px; margin-bottom:6px; }
  .rp-name{ font-weight:700; font-size:14px; margin-top:10px; }
  .rp-1 .rp-name{ font-size:16px; }
  .rp-amt{ font-family:'JetBrains Mono',monospace; font-size:12.5px; color:hsl(var(--gold-2)); font-weight:600; margin-top:2px; }

  .ranking-lista{ display:flex; flex-direction:column; background:hsl(0 0% 100% / 0.02); border:1px solid transparent; border-radius:16px; overflow:hidden; }
  .rl-row{ display:flex; align-items:center; gap:12px; padding:12px 18px; border-bottom:1px solid transparent; transition: background .3s ease; }
  .rl-row:last-child{ border-bottom:none; }
  .rl-row.rl-nuevo{ background:hsl(var(--gold)/0.1); }
  .rl-pos{ width:22px; font-family:'JetBrains Mono',monospace; color:hsl(var(--muted)); font-size:13px; flex-shrink:0; }
  .rl-row img{ width:30px; height:30px; border-radius:50%; object-fit:cover; flex-shrink:0; }
  .rl-name{ flex:1; font-size:14px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .rl-amt{ font-family:'JetBrains Mono',monospace; font-size:13px; color:hsl(var(--gold-2)); flex-shrink:0; }

  .shiny span, .wave-text span:not(.wv-word){ display:inline-block; animation: letterwave 2s ease-in-out infinite; }
  .wave-text{ font-family:'Montserrat', sans-serif !important; font-weight:800 !important; font-style:normal !important; }
  .wave-ink{ font-family:'Montserrat', sans-serif !important; font-weight:800 !important; font-style:normal !important; }
  .wave-ink span:not(.wv-word){ display:inline-block; animation: letterwave 2s ease-in-out infinite; }
  .wv-word{ display:inline-block; } /* mantiene la palabra junta: evita que el wrap corte a mitad de palabra */
  @media not all /* movimiento reducido: lo decide el botón "Animaciones" del sitio (html[data-motion=reduced], ver manza-a11y.css) */{ .wave-ink span{ animation:none; color:#f5c451; } }
  .shiny span.sp{ width:0.3em; }
  @keyframes letterwave{ 0%,100%{ color:var(--wv-a,#f5c451); } 50%{ color:var(--wv-b,#c23b32); } }

  .reveal{ opacity:0; transform:translateY(26px); transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1); }
  .reveal.in{ opacity:1; transform:translateY(0); }
  .reveal-1{ transition-delay:.08s; } .reveal-2{ transition-delay:.16s; } .reveal-3{ transition-delay:.24s; } .reveal-4{ transition-delay:.32s; }
  .reveal-5{ transition-delay:.40s; } .reveal-6{ transition-delay:.48s; } .reveal-7{ transition-delay:.56s; }
  /* tarjetas: entrada con rebote tipo iOS (pop + spring), no el fade liso del reveal genérico */
  .glass.reveal{ transform:translateY(22px) scale(0.94); transition: opacity .6s var(--ease-spring), transform .6s var(--ease-spring); }
  .glass.reveal.in{ transform:translateY(0) scale(1); }
  /* tarjetas que se arman por JS (no pasan por el observer de scroll) — pop-in al insertarse */
  @keyframes cardPopIn{ from{ opacity:0; transform:translateY(16px) scale(0.92); } to{ opacity:1; transform:translateY(0) scale(1); } }

  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    font-weight:700; font-size:14.5px; padding:14px 28px; border-radius:9999px !important;
    cursor:pointer; border:none; white-space:nowrap;
    transition: transform .32s var(--ease-spring), box-shadow .32s var(--ease-smooth), background .25s ease, border-color .25s ease, filter .4s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
  }
  .btn:focus-visible{ outline:2px solid hsl(var(--gold-2)); outline-offset:3px; }
  .btn svg{ width:14px; height:14px; flex-shrink:0; }
  .btn:active{ transform:scale(0.94); transition-duration:.12s; }
  .btn-solid{
    background: #ffffff; color: #0a0a0d;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 8px 24px rgba(0,0,0,0.4), 0 0 40px hsl(var(--gold-2)/0.25);
  }
  .btn-solid:hover{
    transform: var(--magnet, translate(0,0)) translateY(-3px) scale(1.04);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.15), 0 20px 45px rgba(0,0,0,0.5), 0 0 70px hsl(var(--gold-2)/0.55), 0 0 120px hsl(var(--apple-2)/0.3);
  }
  .btn-outline{
    background: rgba(255,255,255,0.05); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
    color: hsl(var(--text)); border:1.5px solid transparent !important;
  }
  .btn-outline:hover{
    transform: var(--magnet, translate(0,0)) translateY(-3px) scale(1.03);
    border-color: hsl(var(--gold-2)/0.7) !important; background: rgba(255,255,255,0.09);
    box-shadow: 0 16px 36px rgba(0,0,0,0.35), 0 0 45px hsl(var(--gold-2)/0.3);
    filter: brightness(1.12);
  }
  .btn-sm{ padding:10px 20px; font-size:13px; }
  .btn-copy-invite{
    position:relative; width:48px; height:48px; flex-shrink:0;
    display:grid; place-items:center; border-radius:9999px; cursor:pointer;
    background: rgba(255,255,255,0.05); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
    color: hsl(var(--text)); border:1.5px solid transparent;
    transition: transform .32s var(--ease-spring), background .25s ease, border-color .25s ease;
  }
  .btn-copy-invite:hover{ border-color: hsl(var(--gold-2)/0.7); background: rgba(255,255,255,0.09); transform:translateY(-3px) scale(1.05); }
  .btn-copy-invite:active{ transform:scale(0.9); transition-duration:.12s; }
  .btn-copy-invite:focus-visible{ outline:2px solid hsl(var(--gold-2)); outline-offset:3px; }
  .btn-copy-invite svg{ position:absolute; top:50%; left:50%; width:18px; height:18px; transform:translate(-50%,-50%) scale(1); transition:opacity .22s var(--ease-smooth), transform .22s var(--ease-smooth); }
  .btn-copy-invite .icon-check{ opacity:0; transform:translate(-50%,-50%) scale(0.4); color:#4ade80; }
  .btn-copy-invite.copied .icon-copy{ opacity:0; transform:translate(-50%,-50%) scale(0.4); }
  .btn-copy-invite.copied .icon-check{ opacity:1; transform:translate(-50%,-50%) scale(1); }
  .arrow{ transition: transform .32s var(--ease-spring); display:inline-block; }
  .btn:hover .arrow{ transform:translate(2px,-2px); }

  .nav-float{ position:fixed; top:0; left:0; right:0; z-index:50; display:flex; justify-content:center; padding:28px 20px; }
  .nav-pill{
    display:flex; align-items:center; gap:4px;
    background: var(--glass-bg) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    border-radius:9999px !important; padding:8px 10px 8px 8px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.35);
    transition: box-shadow .35s var(--ease-smooth), transform .35s var(--ease-smooth), background .3s ease;
  }
  /* la barra de nav NO lleva el halo dorado/manzana nuevo — queda con el
     blanco de siempre, a propósito (pedido explícito de no tocar la barra). */
  .nav-pill::before, .nav-drop-menu::before{
    background: linear-gradient(180deg, hsl(0 0% 100% / 0.5), hsl(0 0% 100% / 0.06) 35%, hsl(0 0% 100% / 0) 55%, hsl(0 0% 100% / 0.06) 75%, hsl(0 0% 100% / 0.4)) !important;
  }
  .nav-pill.scrolled{ box-shadow:0 16px 50px hsl(0 0% 0% / 0.45), 0 0 40px hsl(var(--gold-2)/0.12); transform: translateY(2px) scale(0.98); }
  .nav-logo{
    width:38px; height:38px; border-radius:50%;
    background: radial-gradient(circle at 32% 26%, hsl(var(--apple-2)), hsl(var(--apple)) 70%);
    display:flex; align-items:center; justify-content:center; font-size:17px;
    box-shadow: inset 0 1px 0 hsl(0 0% 100% / 0.25), 0 0 20px hsl(var(--apple-2)/0.4);
    overflow:hidden; transition: transform .32s var(--ease-spring);
  }
  .nav-logo:hover{ transform:scale(1.12) rotate(-4deg); }
  .nav-div{ width:1px; height:22px; background:hsl(var(--stroke)/0.14); margin:0 8px; }
  .nav-links{ display:flex; align-items:center; gap:2px; }
  .nav-links a{
    font-size:13.5px; font-weight:600; color:hsl(var(--muted)); padding:10px 17px; border-radius:9999px;
    transition: color .2s ease, background .2s ease, transform .28s var(--ease-spring), text-shadow .4s cubic-bezier(0.16, 1, 0.3, 1);
    display:inline-block;
  }
  .nav-links a:hover{ color:hsl(var(--text)); background:rgba(255,255,255,0.08); transform:scale(1.06); text-shadow:0 0 14px hsl(var(--gold-2)/0.4); }
  .nav-drop{ position:relative; }
  .nav-drop > span{
    font-size:13.5px; font-weight:600; color:hsl(var(--muted)); padding:10px 17px; border-radius:9999px;
    display:inline-flex; align-items:center; gap:5px; cursor:pointer; user-select:none;
    transition: color .2s ease, background .2s ease, transform .28s var(--ease-spring), text-shadow .4s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .nav-drop > span:hover{ color:hsl(var(--text)); background:rgba(255,255,255,0.08); transform:scale(1.06); text-shadow:0 0 14px hsl(var(--gold-2)/0.4); }
  .nav-drop .caret-drop{ font-size:12px; transition: transform .28s var(--ease-spring); }
  .nav-drop.open .caret-drop{ transform:rotate(180deg); }
  .nav-drop-menu{
    position:absolute; top:calc(100% + 12px); left:50%; transform:translateX(-50%) translateY(-8px) scale(0.96);
    min-width:210px; padding:8px;
    background: var(--glass-bg) !important;
    backdrop-filter: var(--glass-blur) !important; -webkit-backdrop-filter: var(--glass-blur) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    border-radius:18px !important;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    opacity:0; pointer-events:none;
    transition: opacity .28s var(--ease-smooth), transform .32s var(--ease-spring);
  }
  .nav-drop.open .nav-drop-menu{ opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0) scale(1); }
  .nav-drop-menu a{
    display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; font-size:13px; font-weight:600;
    color:hsl(var(--text)/0.85); transition: background .2s ease, transform .2s ease;
  }
  .nav-drop-menu a:hover{ background:rgba(255,255,255,0.08); transform:translateX(2px) scale(1); color:hsl(var(--text)); }
  .nav-links a:active{ transform:scale(0.95); }
  @media (max-width:860px){ .nav-links{ display:none; } .nav-div{ display:none; } }

  /* Pedido (2026-08-23): "Plantillas" no puede ser un link más que se
     confunde con Inicio/Departamentos/Comunidad — tiene que saltar a la
     vista como un botón propio, verde. Mismo mecanismo de hover/press que
     .btn-solid (spring easing + glow), paleta del verde "on" que ya usan
     los toggles (.sw.on) en vez de inventar un verde nuevo. */
  .nav-cta-verde{
    font-size:13.5px; font-weight:800; color:#04140a; padding:10px 20px; border-radius:9999px;
    background:#30d158; border:none; cursor:pointer; white-space:nowrap;
    display:inline-flex; align-items:center; gap:6px;
    box-shadow:0 0 0 1px rgba(255,255,255,0.1), 0 4px 16px rgba(48,209,88,0.4);
    transition: transform .28s var(--ease-spring), box-shadow .3s var(--ease-smooth), filter .3s ease;
  }
  .nav-cta-verde:hover{ transform:translateY(-2px) scale(1.06); box-shadow:0 0 0 1px rgba(255,255,255,0.16), 0 10px 28px rgba(48,209,88,0.6); filter:brightness(1.08); }
  .nav-cta-verde:active{ transform:scale(0.93); transition-duration:.12s; }
  .nav-cta-verde:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

  .hero{ position:relative; z-index:3; padding:200px 0 60px; text-align:center; display:flex; flex-direction:column; align-items:center; }
  /* Antes era position:absolute dentro de .hero: la luz terminaba en el borde de la caja (1180px) y se veía un corte recto
     a los lados y abajo. Ahora cubre toda la ventana (fixed) y se enciende por JS (.on) mientras el hero está a la vista. */
  .hero-spotlight{
    position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:0;
    background: radial-gradient(520px circle at var(--sx,50%) var(--sy,30%), hsl(var(--gold-2)/0.16), hsl(var(--apple-2)/0.05) 42%, transparent 70%);
    transition: opacity .5s ease;
  }
  .hero-spotlight.on{ opacity:1; }
  .hero > .hero-spotlight{ animation:none; }
  @media not all /* movimiento reducido: lo decide el botón "Animaciones" del sitio (html[data-motion=reduced], ver manza-a11y.css) */{ .hero-spotlight{ display:none; } }
  .hero > *{ animation: heroRise .9s var(--ease-smooth) both; }
  .hero .eyebrow{ animation-delay:.05s; }
  .hero h1{ animation-delay:.15s; }
  .hero .hero-desc{ animation-delay:.28s; }
  .hero .hero-ctas{ animation-delay:.4s; }
  .hero .hero-note{ animation-delay:.5s; }
  @keyframes heroRise{
    from{ opacity:0; transform: translateY(28px) scale(0.98); filter: blur(4px); }
    to{ opacity:1; transform: translateY(0) scale(1); filter: blur(0); }
  }
  .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-size:12px; letter-spacing:3px; text-transform:uppercase; color:hsl(var(--gold-2));
    margin-bottom:32px;
    background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    border: var(--glass-border); border-radius:9999px; padding:9px 20px 9px 16px;
  }
  .eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:hsl(var(--gold-2)); box-shadow:0 0 12px hsl(var(--gold-2)/0.9); animation:pulse 2s infinite; }
  @keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:.3;} }
  h1{
    font-family:'Poppins', sans-serif; font-weight:900; letter-spacing:-3px;
    font-size:clamp(48px, 8.2vw, 108px); line-height:0.98;
  }
  h1 .l1{ display:block; color:hsl(var(--text)/0.5); font-style:normal; font-weight:900; }
  h1 .l2{
    display:block; font-family:'Montserrat', sans-serif; font-weight:900;
    background: linear-gradient(100deg, hsl(var(--gold-2)) 0%, hsl(var(--text)) 45%, hsl(var(--apple-2)) 100%);
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
    filter: drop-shadow(0 0 40px hsl(var(--gold-2)/0.3));
  }
  .hero-desc{ margin-top:32px; max-width:500px; color:hsl(var(--muted)); font-size:17.5px; line-height:1.7; font-weight:450; }
  .hero-ctas{ display:flex; gap:16px; margin-top:44px; flex-wrap:wrap; justify-content:center; }
  .hero-note{ margin-top:20px; font-size:12px; color:hsl(var(--muted)/0.7); font-family:'JetBrains Mono', monospace; }

  .statusbar{
    position:relative; z-index:3;
    display:flex; justify-content:center;
    padding:0 24px; margin-top:56px;
  }
  .statusbar-in{
    position:relative; overflow:hidden; max-width:100%;
    display:flex; align-items:center; gap:22px;
    padding:11px 22px; border-radius:999px; font-size:12px; color:hsl(var(--muted));
    background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
  }
  .statusbar-in::before{
    content:''; position:absolute; inset:0; border-radius:inherit; padding:1.2px;
    background: linear-gradient(160deg, hsl(var(--gold-2)/0.4), hsl(var(--gold-2)/0.05) 30%, transparent 55%, hsl(var(--apple-2)/0.05) 75%, hsl(var(--apple-2)/0.3));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    pointer-events:none;
  }
  .sb-left{ display:flex; align-items:center; gap:16px; }
  .sb-left b{ color:hsl(var(--text)); font-weight:700; }
  .sb-item{ display:none; transition: color .2s ease; }
  .sb-item:hover{ color:hsl(var(--gold-2)); }
  @media (min-width:560px){ .sb-item.m1{ display:inline; } }
  @media (min-width:720px){ .sb-item.m2{ display:inline; } }
  @media (min-width:860px){ .sb-item.m3{ display:inline; } }
  .sb-right{ display:flex; align-items:center; gap:8px; font-family:'JetBrains Mono', monospace; }
  .sb-live{ position:relative; width:6px; height:6px; border-radius:50%; background:#4ade80; box-shadow:0 0 8px #4ade8090; }
  .sb-live::before{
    content:''; position:absolute; inset:-4px; border-radius:50%; background:#4ade80;
    animation: sbPulse 2.2s var(--ease-smooth) infinite;
  }
  @keyframes sbPulse{ 0%{ opacity:0.5; transform:scale(0.6); } 100%{ opacity:0; transform:scale(2.2); } }
  @media not all /* movimiento reducido: lo decide el botón "Animaciones" del sitio (html[data-motion=reduced], ver manza-a11y.css) */{ .sb-live::before{ animation:none; display:none; } }

  section.mockup{ position:relative; z-index:3; padding:64px 0 40px; }
  .console{
    border-radius:20px; overflow:hidden; border:1px solid transparent;
    background: hsl(var(--surface)/0.9); backdrop-filter: blur(24px);
    box-shadow: 0 40px 100px hsl(0 0% 0% / 0.5);
  }
  .console-top{
    display:flex; align-items:center; justify-content:center;
    padding:13px 18px; border-bottom:1px solid transparent;
    background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  }
  .console-title{ font-size:12px; color:hsl(var(--muted)); font-family:'JetBrains Mono', monospace; }
  .console-body{ display:grid; grid-template-columns: 220px 1fr; min-height:420px; }
  @media (max-width:760px){ .console-body{ grid-template-columns:1fr; } .console-sidebar{ display:none; } }

  .console-sidebar{ border-right:1px solid transparent; padding:18px 14px; }
  .cs-btn{
    display:flex; align-items:center; gap:8px; background:hsl(var(--text)); color:hsl(var(--bg));
    font-size:12.5px; font-weight:700; padding:10px 12px; border-radius:10px; margin-bottom:18px;
  }
  .cs-nav{ display:flex; flex-direction:column; gap:2px; margin-bottom:22px; }
  .cs-nav a{ display:flex; align-items:center; justify-content:space-between; font-size:13px; color:hsl(var(--muted)); padding:8px 10px; border-radius:8px; transition: transform .22s var(--ease-smooth), background .2s ease; }
  .cs-nav a.active{ background:hsl(0 0% 100% / 0.07); color:hsl(var(--text)); }
  .cs-nav a:hover{ background:hsl(0 0% 100% / 0.05); transform: var(--magnet, translate(0,0)); }
  .cs-count{ font-family:'JetBrains Mono', monospace; font-size:12px; opacity:.6; }
  .cs-icon{ width:15px; height:15px; flex-shrink:0; }
  .cs-a-label{ display:flex; align-items:center; gap:9px; }
  .cs-label{ font-size:12px; text-transform:uppercase; letter-spacing:1.2px; color:hsl(var(--muted)/0.6); margin:0 10px 10px; }
  .cs-dot{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:hsl(var(--muted)); padding:6px 10px; }
  .cs-dot i{ width:8px; height:8px; border-radius:50%; display:inline-block; }

  .console-feed{ padding:22px 24px; transition: opacity .2s var(--ease-smooth), transform .2s var(--ease-smooth), filter .2s var(--ease-smooth); }
  .cmd-row{ display:flex; gap:12px; padding:14px 0; border-bottom:1px solid transparent; }
  .cmd-row:last-child{ border-bottom:none; }
  .cmd-avatar{
    width:34px; height:34px; border-radius:50%; flex-shrink:0;
    background: radial-gradient(circle at 32% 26%, hsl(var(--gold-2)), hsl(var(--apple)) 75%);
    display:flex; align-items:center; justify-content:center; font-size:15px;
  }
  .cmd-content{ flex:1; min-width:0; }
  .cmd-head{ display:flex; align-items:baseline; gap:8px; margin-bottom:3px; flex-wrap:wrap; }
  .cmd-name{ font-weight:700; font-size:13.5px; }
  .cmd-time{ font-size:12px; color:hsl(var(--muted)/0.7); font-family:'JetBrains Mono', monospace; }
  .cmd-tag{
    font-family:'JetBrains Mono', monospace; font-size:12px; background:hsl(var(--gold)/0.15); color:hsl(var(--gold-2));
    padding:2px 7px; border-radius:5px; border:1px solid hsl(var(--gold)/0.25);
  }
  .cmd-body{ font-size:13px; color:hsl(var(--muted)); line-height:1.5; }
  .cmd-cmd{ font-family:'JetBrains Mono', monospace; color:hsl(var(--gold-2)); }
  .cmd-result{ margin-top:10px; padding:12px 14px; border-radius:12px; background:hsl(0 0% 100% / 0.03); border:1px solid transparent; font-size:12.5px; }
  .cmd-result .rr{ display:flex; justify-content:space-between; padding:4px 0; }
  .cmd-result .rr b{ color:hsl(var(--gold-2)); font-family:'JetBrains Mono', monospace; }

  section.feature{ position:relative; z-index:3; padding:96px 0; }
  .feature-grid{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; }
  @media (max-width:860px){ .feature-grid{ grid-template-columns:1fr; gap:40px; } }
  .kicker-row{ display:flex; align-items:center; gap:10px; margin-bottom:20px; }
  .kicker-dot{ width:6px; height:6px; border-radius:50%; background:hsl(var(--text)); }
  .kicker{ font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color:hsl(var(--muted)); }
  .kicker-tag{ font-size:12px; padding:3px 9px; border-radius:100px; border:1px solid transparent; color:hsl(var(--muted)); }
  .feature h2{ font-family:'Montserrat', sans-serif; font-weight:800; font-size:clamp(28px,3.6vw,42px); line-height:1.08; letter-spacing:-0.5px; }
  .feature p.lead{ margin-top:20px; color:hsl(var(--muted)); font-size:15.5px; line-height:1.7; max-width:440px; }
  .chip-row{ display:flex; flex-wrap:wrap; gap:9px; margin-top:26px; }
  .chip{ font-size:12px; padding:7px 14px; border-radius:100px; border:1px solid transparent; color:hsl(var(--muted)); background:hsl(0 0% 100% / 0.02); }

  .triage-card{ padding:18px; transition: transform .35s var(--ease-spring), box-shadow .35s var(--ease-smooth); }
  .triage-card:hover{ transform:translateY(-6px) scale(1.015); box-shadow:0 20px 44px rgba(0,0,0,0.4), 0 0 30px hsl(var(--gold-2)/0.1); }
  .triage-head{ font-size:12px; color:hsl(var(--muted)); font-family:'JetBrains Mono', monospace; margin-bottom:14px; padding:0 4px; }
  .triage-item{ padding:13px 14px; margin-bottom:10px; transition: transform .3s var(--ease-spring), box-shadow .3s var(--ease-smooth); }
  .triage-item:last-child{ margin-bottom:0; }
  .triage-item:hover{ transform:translateY(-3px) scale(1.02); box-shadow:0 10px 24px rgba(0,0,0,0.3); }

  /* Showcase de Niveles (landing) — mismo patrón de lift que .triage-card,
     más zoom del <img> interno (contenido por el overflow:hidden de .glass)
     para el efecto "se acerca y sube" pedido — al sacar el mouse, la MISMA
     transition hace que vuelva solo a donde estaba, no hace falta JS. */
  /* Sin .glass real acá — la imagen (MADSKDASMDASMDASM.png) ya trae su propio
     marco+glow armado en el PNG, ponerle OTRO glass encima quedaba doble-
     enmarcado. overflow:visible para no cortar el glow que sale del borde. */
  .niveles-img-card{ padding:0; background:none !important; border:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; overflow:visible !important; transition: transform .32s var(--ease-spring); }
  .niveles-img-card:hover{ transform:translateY(-8px) scale(1.04); }
  .niveles-img{ display:block; width:100%; height:auto; }
  .niveles-img-tag{ position:absolute; top:14px; left:14px; z-index:2; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); background:rgba(15,15,20,0.55); }
  .ti-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
  .ti-name{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; }
  .ti-name i{ width:8px; height:8px; border-radius:50%; }
  .ti-count{ font-family:'JetBrains Mono', monospace; font-size:12px; color:hsl(var(--muted)); }
  .ti-sub{ font-size:12px; color:hsl(var(--muted)); line-height:1.5; }

  section.trust{ position:relative; z-index:3; padding:50px 0; }
  .trust-kicker{ text-align:center; font-size:12px; text-transform:uppercase; letter-spacing:2px; color:hsl(var(--muted)/0.6); margin-bottom:38px; }
  .trust-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
  @media (max-width:700px){ .trust-grid{ grid-template-columns:repeat(2,1fr); } }
  .trust-item{ text-align:center; padding:20px 10px; font-family:'Montserrat', sans-serif; font-weight:800; color:hsl(var(--muted)); font-size:16px; transition: color .2s ease; }

  .feat-section{ padding:70px 0; }
  .feat-head{ text-align:center; max-width:520px; margin:0 auto 40px; }
  .feat-head h3{ font-family:'Poppins', sans-serif; font-weight:800; font-size:clamp(22px,2.8vw,30px); letter-spacing:-0.5px; }
  .feat-head p{ color:hsl(var(--muted)); font-size:14px; margin-top:8px; }
  .feat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
  @media (max-width:900px){ .feat-grid{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:520px){ .feat-grid{ grid-template-columns:1fr; } }
  .feat-card{
    padding:22px 20px; overflow:hidden;
    transition: transform .35s var(--ease-spring), border-color .3s ease, box-shadow .35s var(--ease-smooth);
  }
  /* Pedido (2026-08-27): sacar el "brillo blanco" — el sweep de fc-shine y
     el borde blanco en hover — se veía feo; se queda solo con la elevación
     (lift + zoom) y un halo dorado sutil, nada de blanco. */
  /* Bug real (2026-08-27): una vez que .reveal ya hizo "in", .glass.reveal.in
     (3 clases → especificidad 0-3-0) le gana a .feat-card:hover (1 clase +
     :hover → 0-2-0) SIEMPRE, sin importar el orden en la hoja — el hover
     quedaba mudo en cualquier tarjeta ya revelada. Por eso acá va también
     .glass en el selector: empata en especificidad y, al estar más abajo
     en el archivo que .glass.reveal.in, gana el desempate. */
  .glass.feat-card:hover{
    transform: var(--tilt, translateY(-12px) scale(1.035));
    border-color:hsl(var(--gold-2)/0.35) !important; box-shadow:0 28px 60px rgba(0,0,0,0.45), 0 0 40px hsl(var(--gold-2)/0.15);
  }
  .feat-card:active{ transform:translateY(-3px) scale(0.97); transition-duration:.12s; }
  .niveles-img-card{ transition: transform .35s var(--ease-spring); }
  .glass.niveles-img-card:hover{ transform: var(--tilt, translateY(-9px) scale(1.02)); }
  .feat-card .fc-icon{ font-size:26px; margin-bottom:10px; display:block; }
  .fc-icon-box{
    width:46px; height:46px; border-radius:13px; margin-bottom:16px;
    display:grid; place-items:center;
    background: linear-gradient(135deg, hsl(var(--gold-2)/0.22), hsl(var(--apple-2)/0.14));
    border:1px solid hsl(var(--gold-2)/0.25); color:hsl(var(--gold-2));
    transition: transform .28s var(--ease-smooth), border-color .28s ease;
  }
  .fc-icon-box svg{ width:22px; height:22px; display:block; }
  @media (hover:hover) and (pointer:fine){
    .feat-card:hover .fc-icon-box, .empezar-card:hover .fc-icon-box{ transform:scale(1.12); border-color:hsl(var(--gold-2)/0.5); }
  }
  .feat-card .fc-title{ font-weight:700; font-size:14.5px; margin-bottom:8px; }
  .feat-card .fc-preview{
    background:rgba(0,0,0,0.25); border-radius:10px; padding:9px 11px; font-family:'JetBrains Mono', monospace;
    font-size:12px; color:hsl(var(--gold-2)); line-height:1.5; margin-bottom:0;
  }
  .feat-card .fc-desc{ color:hsl(var(--muted)); font-size:12.5px; line-height:1.55; margin:0; }
  .trust-item:hover{ color:hsl(var(--text)); }

  section.testi{ position:relative; z-index:3; padding:80px 0; border-top:1px solid transparent; }
  .testi-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
  @media (max-width:860px){ .testi-grid{ grid-template-columns:1fr; } }
  .testi-card{ padding:26px; }
  .testi-quote{ font-size:14.5px; line-height:1.7; color:hsl(var(--text)/0.88); }
  .testi-quote::before{ content:'\201C'; color:hsl(var(--gold-2)); font-family:'Montserrat', sans-serif; font-size:26px; }
  .testi-foot{ margin-top:22px; padding-top:16px; border-top:1px solid transparent; }
  .testi-foot b{ display:block; font-size:13.5px; font-weight:700; }
  .testi-foot span{ font-size:12px; color:hsl(var(--muted)); }
  .testi-foot .co{ color:hsl(var(--gold-2)); font-weight:700; font-size:12px; letter-spacing:0.5px; text-transform:uppercase; }

  /* Pedido (2026-08-23, con capturas): estas tarjetas se ven "feas" con el
     halo blanco parejo que le da .glass::before a TODO (nav, modales,
     tarjetas) — no se toca esa base compartida (la usa también la barra,
     que quedó como se pidió dejarla) para no repetir el mismo error de la
     vuelta pasada. Estas 3 en particular consiguen su PROPIO halo, con la
     paleta de marca (dorado→manzana) en vez de blanco plano, más animación
     de acercamiento en hover tipo iOS donde tiene sentido (no en .final-card,
     que no es clickeable en sí — sus botones ya tienen su propio hover). */
  section.empezar{ position:relative; z-index:3; padding:100px 0; }
  .empezar-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
  @media (max-width:760px){ .empezar-grid{ grid-template-columns:1fr; } }
  .empezar-card{ position:relative; overflow:hidden; padding:40px 32px; text-align:left; transition: transform .35s var(--ease-spring), border-color .3s ease, box-shadow .35s var(--ease-smooth); }
  .glass.empezar-card:hover{ transform: var(--tilt, translateY(-12px) scale(1.035)); border-color:hsl(var(--gold-2)/0.35) !important; box-shadow:0 28px 60px rgba(0,0,0,0.45); filter: drop-shadow(0 0 22px hsl(var(--gold-2)/0.22)); }
  .empezar-num{
    position:absolute; top:14px; right:18px; font-family:'Poppins', sans-serif; font-weight:800;
    font-size:56px; line-height:1; color:hsl(var(--text)/0.05); letter-spacing:-1px; pointer-events:none;
  }
  .empezar-card .fc-title{ font-size:19px; margin-bottom:10px; }
  .empezar-card .fc-desc{ font-size:14px; }
  .empezar .feat-head h3{ font-size:clamp(26px,3.4vw,36px); }

  .feat-card::before, .testi-card::before, .final-card::before, .empezar-card::before{
    background: linear-gradient(160deg, hsl(var(--gold-2)/0.4), hsl(var(--gold-2)/0.05) 30%, transparent 55%, hsl(var(--apple-2)/0.05) 75%, hsl(var(--apple-2)/0.3));
  }
  .testi-card{ overflow:hidden; transition: transform .38s var(--ease-spring), box-shadow .38s var(--ease-smooth); }
  .glass.testi-card:hover{ transform: var(--tilt, translateY(-10px) scale(1.025)); box-shadow:0 20px 44px rgba(0,0,0,0.4); filter: drop-shadow(0 0 18px hsl(var(--gold-2)/0.16)); }
  .testi-card:active{ transform:translateY(-2px) scale(0.985); transition-duration:.12s; }
  .chip{ transition: transform .22s var(--ease-smooth), background .2s ease, border-color .2s ease; }
  .chip:hover{ transform: var(--magnet, translate(0,0)) scale(1.06); background:hsl(0 0% 100% / 0.06); border-color:hsl(var(--gold-2)/0.3); }

  section.pricing{ position:relative; z-index:3; padding:100px 0 40px; text-align:center; overflow:hidden; }
  .watermark{ font-family:'Poppins', sans-serif; font-weight:800; font-size:clamp(46px, 9.5vw, 108px); line-height:0.94; letter-spacing:-2.5px; margin-bottom:44px; }
  .watermark .w1{ color:hsl(var(--text)/0.9); display:block; }
  .watermark .w2{ display:block; }
  .toggle-row{ display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:44px; flex-wrap:wrap; }
  .toggle-row span{ font-size:13px; color:hsl(var(--muted)); font-weight:600; }
  .toggle{ width:48px; height:26px; border-radius:100px; background:hsl(var(--text)); position:relative; cursor:pointer; border:none; padding:0; }
  .toggle-knob{ width:18px; height:18px; border-radius:50%; background:hsl(var(--bg)); position:absolute; top:4px; left:4px; transition: transform .25s cubic-bezier(.4,0,.2,1); }
  .toggle.active{ background: hsl(0 0% 100% / 0.18); }
  .toggle.active .toggle-knob{ transform:translateX(22px); background:hsl(var(--text)); }
  .save-badge{ font-size:12px; color:hsl(var(--gold-2)); font-weight:700; background:hsl(var(--gold)/0.12); border:1px solid hsl(var(--gold)/0.25); padding:3px 9px; border-radius:100px; }

  .price-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; text-align:left; }
  @media (max-width:900px){ .price-grid{ grid-template-columns:1fr; max-width:400px; margin:0 auto; } }
  .price-card{ padding:36px 26px; display:flex; flex-direction:column; min-height:480px; border-radius:28px; }
  .price-card.pro{ background: linear-gradient(155deg, hsl(var(--apple)/0.14), hsl(0 0% 100% / 0.02)); }
  .p-tier{ font-size:14px; color:hsl(var(--muted)); font-weight:600; }
  .p-amount{ font-family:'Montserrat', sans-serif; font-size:44px; font-weight:500; margin-top:8px; letter-spacing:-1px; }
  .p-amount span{ font-size:15px; color:hsl(var(--muted)); font-family:'Inter',sans-serif; font-weight:500; }
  .p-desc{ margin-top:14px; font-size:13px; color:hsl(var(--muted)); line-height:1.6; min-height:52px; }
  .p-list{ list-style:none; margin-top:26px; flex:1; }
  .p-list li{ display:flex; align-items:flex-start; gap:11px; font-size:13px; color:hsl(var(--text)/0.85); margin-bottom:14px; line-height:1.4; }
  .p-check{ width:20px; height:20px; border-radius:50%; background:hsl(0 0% 100% / 0.1); display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px; font-size:12px; }
  .p-btn{ margin-top:24px; width:100%; }

  section.final{ position:relative; z-index:3; padding:90px 0 40px; }
  .final-card{ padding:70px 40px; text-align:center; position:relative; overflow:hidden; border-color: transparent !important; }
  .final-card.reveal{ transform:translateY(10px); transition: opacity .4s cubic-bezier(0.16, 1, 0.3, 1), transform .4s cubic-bezier(0.16, 1, 0.3, 1); }
  .final-card::after{ content:''; position:absolute; inset:0; z-index:-1; background: radial-gradient(560px circle at 50% 0%, hsl(var(--gold)/0.14), transparent 70%); }
  .final-card h2{ font-family:'Montserrat', sans-serif; font-weight:800; font-size:clamp(32px,4.6vw,54px); letter-spacing:-1px; line-height:1.05; }
  .final-card p{ margin-top:16px; color:hsl(var(--muted)); font-size:15px; max-width:420px; margin-left:auto; margin-right:auto; line-height:1.6; }
  .final-ctas{ display:flex; gap:14px; justify-content:center; margin-top:32px; flex-wrap:wrap; }

  footer{ position:relative; z-index:3; padding:44px 0; border-top:1px solid transparent; }
  .foot-row{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }
  .foot-brand{ display:flex; flex-direction:column; gap:3px; }
  .foot-brand-name{ font-family:'Montserrat', sans-serif; font-weight:800; font-size:16.5px; letter-spacing:0.2px; }
  .foot-brand-credit{ font-size:12px; color:hsl(var(--muted)/0.8); letter-spacing:1.2px; text-transform:uppercase; font-weight:500; }
  .foot-status{ display:flex; align-items:center; gap:8px; font-size:12px; color:hsl(var(--muted)); font-family:'JetBrains Mono', monospace; }

  .foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr 1fr; gap:32px; padding-bottom:36px; margin-bottom:28px; border-bottom:1px solid transparent; }
  @media (max-width:760px){ .foot-grid{ grid-template-columns:repeat(2,1fr); } }
  .foot-brand p{ margin-top:10px; font-size:12.5px; color:hsl(var(--muted)); max-width:220px; line-height:1.5; }
  .foot-col{ display:flex; flex-direction:column; gap:11px; }
  .foot-col-title{ font-size:12px; text-transform:uppercase; letter-spacing:1.2px; color:hsl(var(--muted)/0.6); font-weight:600; margin-bottom:2px; }
  .foot-col a{ position:relative; width:fit-content; font-size:13.5px; color:hsl(var(--muted)); }
  .foot-col a::after{
    content:''; position:absolute; left:0; bottom:-2px; width:0%; height:1px;
    background:hsl(var(--gold-2)); transition:width .22s var(--ease-smooth);
  }
  .foot-col a:hover{ color:hsl(var(--text)); }
  .foot-col a:hover::after{ width:100%; }

  /* ============================================================
     PANEL — estilos agregados (login, selector de server, config)
     ============================================================ */
  .btn-glass{
    background: hsl(0 0% 100% / 0.04); color: hsl(var(--text));
    border:1.5px solid transparent;
    backdrop-filter: blur(16px);
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    font-weight:700; font-size:14.5px; padding:13px 24px; border-radius:100px;
    cursor:pointer; border:none; transition: transform .32s var(--ease-spring), box-shadow .32s var(--ease-smooth), background .25s ease, border-color .25s ease;
    white-space:nowrap; font-family:inherit;
  }
  .btn-glass:hover{ border-color:hsl(var(--gold-2)/0.7); background:rgba(255,255,255,0.1); transform:translateY(-3px) scale(1.04); box-shadow:0 16px 36px rgba(0,0,0,0.35), 0 0 45px hsl(var(--gold-2)/0.3); }
  .btn-glass:active{ transform:scale(0.94); }
/* ===== Nav ===== */
  .nav-float{ position:fixed; top:0; left:0; right:0; z-index:60; display:flex; justify-content:center; padding:28px 20px; }
  .nav-pill{
    display:flex; align-items:center; gap:4px;
    background: var(--glass-bg) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    border-radius:9999px !important; padding:8px 10px 8px 8px;
    box-shadow:0 12px 40px rgba(0,0,0,0.35);
  }
  .nav-logo{ width:38px; height:38px; border-radius:50%; object-fit:cover; transition:transform .32s var(--ease-spring); }
  .nav-logo:hover{ transform:scale(1.12) rotate(-4deg); }
  .nav-div{ width:1px; height:22px; background:hsl(var(--stroke)/0.14); margin:0 8px; }
  .nav-links{ display:flex; align-items:center; gap:2px; }
  .nav-links a{
    font-size:13.5px; font-weight:600; color:hsl(var(--muted)); padding:10px 17px; border-radius:9999px;
    transition: color .2s ease, background .2s ease, transform .28s var(--ease-spring);
    display:inline-block;
  }
  .nav-links a:hover{ color:hsl(var(--text)); background:rgba(255,255,255,0.08); transform:scale(1.06); }
  .nav-links a:active{ transform:scale(0.97); }
  .nav-links a.on{ color:hsl(var(--text)); background:hsl(0 0% 100% / 0.07); }
  @media (max-width:900px){ .nav-links{ display:none; } .nav-div{ display:none; } }

  /* avatar + menú de usuario (como el de la ref) */
  .user-wrap{ position:relative; }
  .user-btn{
    display:flex; align-items:center; gap:8px; cursor:pointer;
    background: hsl(0 0% 100% / 0.05); border:1px solid transparent;
    border-radius:100px; padding:5px 14px 5px 5px; font-family:inherit;
    color:hsl(var(--text)); font-size:13px; font-weight:600;
    transition: border-color .2s ease, background .2s ease;
  }
  .user-btn:hover{ border-color:hsl(var(--gold-2)/0.45); background:hsl(0 0% 100% / 0.08); }
  .user-btn img{ width:28px; height:28px; border-radius:50%; object-fit:cover; }
  .user-btn .caret{ font-size:12px; color:hsl(var(--muted)); }
  .user-menu{
    position:absolute; top:calc(100% + 12px); right:0; width:246px;
    background: hsl(var(--surface)/0.94); backdrop-filter: blur(20px);
    border:1px solid transparent; border-radius:18px;
    padding:10px; opacity:0; visibility:hidden;
    transform-origin: top right;
    transform:translateY(-8px) scale(0.95);
    transition: opacity .2s var(--ease-smooth), transform .24s var(--ease-spring), visibility .2s;
    box-shadow:0 24px 60px hsl(0 0% 0% / 0.5);
  }
  .user-menu.open{ opacity:1; visibility:visible; transform:translateY(0) scale(1); }
  .user-menu a{
    display:flex; align-items:center; justify-content:space-between;
    padding:11px 14px; border-radius:12px; font-size:13.5px; color:hsl(var(--muted)); font-weight:500;
    transition: background .18s ease, color .18s ease;
  }
  .user-menu a:hover{ background:hsl(0 0% 100% / 0.06); color:hsl(var(--text)); }
  .user-menu a:hover .cs-icon{ opacity:1; }
  .user-menu hr{ border:none; border-top:1px solid rgba(255,255,255,0.08); margin:8px 6px; }
  /* Agrupación real por sección (2026-08-29) — antes era una lista plana sin
     ninguna jerarquía visual entre "cosas de tu cuenta" y "cosas del sitio".
     Mismo tratamiento que .eyebrow (mayúsculas, tracking ancho, dorado
     apagado) pero en miniatura — no compite con los ítems de abajo. */
  .user-menu-label{
    padding:10px 14px 4px; font-size:12px; font-weight:700; letter-spacing:1.4px;
    text-transform:uppercase; color:hsl(var(--gold-2)/0.65);
  }
  .user-menu-label:first-child{ padding-top:6px; }
  .user-menu .cs-icon{ width:16px; height:16px; opacity:.7; transition:opacity .18s ease; }

  .emoji-picker{
    position:absolute; z-index:200; width:280px; max-height:340px; overflow-y:auto;
    background: hsl(var(--surface)/0.97); backdrop-filter: blur(20px);
    border:1px solid transparent; border-radius:16px; padding:12px;
    box-shadow:0 24px 60px hsl(0 0% 0% / 0.55);
    transform-origin: top left;
    opacity:0; transform:scale(0.95) translateY(-6px);
    transition: opacity .16s var(--ease-smooth), transform .18s var(--ease-spring);
  }
  .emoji-picker.in{ opacity:1; transform:scale(1) translateY(0); }
  .ep-label{ font-size:12px; text-transform:uppercase; letter-spacing:1.2px; color:hsl(var(--muted)/0.7); margin:10px 2px 6px; }
  .ep-label:first-of-type{ margin-top:0; }
  .ep-grid{ display:grid; grid-template-columns:repeat(7, 1fr); gap:4px; }
  .ep-item{
    width:32px; height:32px; display:flex; align-items:center; justify-content:center;
    font-size:18px; background:transparent; border:none; border-radius:8px; cursor:pointer;
    transition: background .15s ease;
  }
  .ep-item:hover{ background:hsl(0 0% 100% / 0.08); }
  .ep-item img{ width:22px; height:22px; object-fit:contain; }
  /* GIFs + Emojis + Stickers, panel único con pestañas (2026-08-30,
     pedido explícito: "tocas un icono de emoji sale para elejir medio
     grande al costado derecho abajo") — corrección sobre la primera
     versión (2 popups chicos y sueltos, "se veía raro"): reusa
     .emoji-picker tal cual (mismo blur/sombra/animación .in) pero anclado
     AL COSTADO DERECHO del botón (no izquierdo) y bastante más grande. */
  .emoji-picker.chats-anchor{ bottom:calc(100% + 10px); right:0; left:auto; top:auto; pointer-events:none; }
  .emoji-picker.chats-anchor.in{ pointer-events:auto; }
  .chats-picker-panel{ width:380px; max-height:460px; padding:0; overflow:hidden; display:flex; flex-direction:column; }
  .chats-picker-tabs{ display:flex; gap:4px; padding:10px 10px 0; flex-shrink:0; }
  .chats-picker-tab{
    flex:1; display:flex; align-items:center; justify-content:center; padding:10px; border-radius:12px;
    background:rgba(255,255,255,0.04); border:1.5px solid transparent; color:hsl(var(--muted)); cursor:pointer;
    transition:background .18s ease, color .18s ease, border-color .18s ease;
  }
  .chats-picker-tab svg{ width:19px; height:19px; }
  .chats-picker-tab:hover{ color:hsl(var(--text)); }
  .chats-picker-tab.on{ background:hsl(var(--gold-2)/0.15); color:hsl(var(--gold-2)); border-color:hsl(var(--gold-2)/0.35); }
  .chats-picker-contenido{ padding:12px; overflow-y:auto; flex:1; }
  .chats-gif-grid{ display:grid; grid-template-columns:1fr 1fr; gap:6px; }
  .chats-gif-grid img{
    width:100%; aspect-ratio:1; object-fit:cover; border-radius:10px; cursor:pointer; display:block;
    transition:transform .15s var(--ease-spring);
  }
  .chats-gif-grid img:hover{ transform:scale(1.05); }
  .chats-gif-aviso{ text-align:center; padding:24px 10px; font-size:12.5px; color:hsl(var(--muted)); line-height:1.6; grid-column:1 / -1; }
  /* Stickers propios por grupo (2026-08-30, pedido explícito) — grilla más
     grande que la de emojis (un sticker se manda entero, tiene que
     reconocerse), + tarjeta punteada de "crear" al final si no se llegó
     al tope del grupo. */
  .chats-sticker-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
  .chats-sticker-item{
    aspect-ratio:1; border-radius:14px; overflow:hidden; cursor:pointer; background:rgba(255,255,255,0.04);
    display:flex; align-items:center; justify-content:center; transition:transform .18s var(--ease-spring);
  }
  .chats-sticker-item:hover{ transform:scale(1.05); }
  .chats-sticker-item img, .chats-sticker-item video{ width:100%; height:100%; object-fit:cover; display:block; }
  .chats-sticker-agregar{
    border:1.5px dashed rgba(255,255,255,0.18); color:hsl(var(--muted));
    transition:border-color .18s ease, color .18s ease, transform .18s var(--ease-spring);
  }
  .chats-sticker-agregar:hover{ border-color:hsl(var(--gold-2)/0.5); color:hsl(var(--gold-2)); }
  .chats-sticker-agregar svg{ width:22px; height:22px; }
  .chats-sticker-picker{
    width:100%; aspect-ratio:1; max-width:160px; margin:0 auto; border-radius:16px; border:1.5px dashed rgba(255,255,255,0.18);
    display:flex; align-items:center; justify-content:center; color:hsl(var(--muted)); cursor:pointer; overflow:hidden;
    transition:border-color .2s ease, color .2s ease;
  }
  .chats-sticker-picker:hover{ border-color:hsl(var(--gold-2)/0.5); color:hsl(var(--gold-2)); }
  .chats-sticker-picker svg{ width:28px; height:28px; }
  .chats-sticker-picker img, .chats-sticker-picker video{ width:100%; height:100%; object-fit:cover; }
  /* Emoji propio inline en el texto (2026-08-30) — mismo alto que una
     línea de texto normal, como cualquier emoji unicode al lado. */
  .chat-emoji-custom{ width:20px; height:20px; object-fit:contain; vertical-align:-5px; margin:0 1px; }
  .emoji-field-btn{
    display:flex; align-items:center; gap:8px; background:hsl(0 0% 0% / 0.28);
    border:1px solid transparent; border-radius:12px; padding:9px 14px;
    color:hsl(var(--text)); font-family:inherit; font-size:16px; cursor:pointer;
    transition: border-color .2s ease;
  }
  .emoji-field-btn:hover{ border-color:hsl(var(--gold-2)/0.5); }
  .emoji-field-btn span{ font-size:12px; color:hsl(var(--muted)); font-family:'Inter',sans-serif; }
  .emoji-field-btn img{ width:20px; height:20px; object-fit:contain; }

  .premium-lock{
    display:inline-flex; align-items:center; justify-content:center; padding:6px 16px;
    background:linear-gradient(135deg, hsl(var(--gold)/0.18), hsl(var(--gold-2)/0.1));
    border:1px solid hsl(var(--gold-2)/0.4); border-radius:12px;
    cursor:pointer; transition: background .2s ease, border-color .2s ease, transform .2s ease;
  }
  .premium-lock:hover{ border-color:hsl(var(--gold-2)/0.7); background:linear-gradient(135deg, hsl(var(--gold)/0.28), hsl(var(--gold-2)/0.16)); transform:scale(1.04); }
  .premium-lock img{ height:34px; width:auto; object-fit:contain; display:block; }

  .roles-layout{ display:flex; align-items:flex-start; gap:16px; }
  .roles-list{ flex:1 1 auto; display:flex; flex-direction:column; gap:2px; background:hsl(0 0% 100% / 0.02); border:1px solid transparent; border-radius:14px; overflow:hidden; margin-bottom:16px; min-width:0; transition: flex-basis .35s cubic-bezier(.4,0,.2,1); }
  .roles-layout.detail-open .roles-list{ flex:0 0 260px; }
  .role-detail-col{ flex:0 0 0%; width:0; opacity:0; overflow:hidden; transition: flex-basis .35s cubic-bezier(.4,0,.2,1), opacity .25s ease .1s; }
  .roles-layout.detail-open .role-detail-col{ flex:1 1 0%; width:auto; opacity:1; min-width:0; }
  @media (max-width:760px){
    .roles-layout{ flex-direction:column; align-items:stretch; }
    .roles-layout.detail-open .roles-list{ flex: 1 1 auto; width:100%; }
    .roles-layout.detail-open .role-detail-col{ flex: 1 1 auto; width:100%; }
  }
  .role-row{ display:flex; align-items:center; justify-content:space-between; padding:13px 18px; cursor:pointer; border-bottom:1px solid transparent; transition: background .15s ease; }
  .role-row:last-child{ border-bottom:none; }
  .role-row:hover{ background:hsl(0 0% 100% / 0.04); }
  .role-row.open{ background:hsl(var(--gold)/0.07); }
  .role-name{ font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .role-row:focus-visible{ outline:2px solid hsl(var(--gold-2)/0.7); outline-offset:-2px; }
  /* Buscador de la lista de roles (Roles por plata y Recolectar). Filtrar es
     algo que se hace tecleando, muchas veces seguidas: la lista cambia al
     instante, sin animación. */
  .roles-items{ display:flex; flex-direction:column; gap:2px; }
  .roles-buscar{ display:flex; align-items:center; gap:8px; padding:6px 8px 6px 16px; background:hsl(0 0% 0% / 0.22); border-bottom:1px solid hsl(0 0% 100% / 0.06); border-radius:14px 14px 0 0; transition: background .2s ease, box-shadow .2s ease; }
  .roles-buscar:focus-within{ background:hsl(0 0% 0% / 0.36); box-shadow: inset 0 0 0 1px hsl(var(--gold-2)/0.55); }
  .roles-buscar-ic{ display:flex; flex-shrink:0; width:16px; height:16px; color:hsl(var(--muted)); }
  .roles-buscar-ic svg{ width:100%; height:100%; }
  .roles-buscar-inp{ flex:1 1 auto; min-width:0; background:none; border:0; padding:9px 0; color:hsl(var(--text)); font-family:'Inter', sans-serif; font-size:14px; }
  .roles-buscar-inp, .roles-buscar-inp:focus-visible{ outline:none; }
  .roles-buscar-inp::placeholder{ color:hsl(var(--muted)); opacity:1; }
  .roles-buscar-inp::-webkit-search-cancel-button{ -webkit-appearance:none; display:none; }
  .roles-buscar-cuenta{ flex-shrink:0; font-family:'JetBrains Mono', monospace; font-size:12px; font-variant-numeric:tabular-nums; color:hsl(var(--muted)); white-space:nowrap; }
  .roles-buscar-x{ display:flex; align-items:center; justify-content:center; flex-shrink:0; width:36px; height:36px; padding:0; border:0; border-radius:50%; background:none; color:hsl(var(--muted)); cursor:pointer; transition: background .15s ease, color .15s ease, transform .16s cubic-bezier(.23,1,.32,1); }
  .roles-buscar-x[hidden]{ display:none; }
  .roles-buscar-x svg{ width:15px; height:15px; }
  .roles-buscar-x:active{ transform:scale(.94); }
  .roles-buscar-x:focus-visible{ outline:2px solid hsl(var(--gold-2)/0.7); outline-offset:-2px; }
  @media (hover:hover) and (pointer:fine){ .roles-buscar-x:hover{ background:hsl(0 0% 100% / 0.08); color:hsl(var(--text)); } }
  .roles-vacio{ display:flex; flex-direction:column; align-items:center; gap:12px; padding:30px 18px; text-align:center; color:hsl(var(--muted)); font-size:13.5px; overflow-wrap:anywhere; }
  .roles-vacio b{ color:hsl(var(--text)); font-weight:600; }
  /* 16px en pantallas táctiles: con menos, iOS hace zoom al enfocar. */
  @media (max-width: 900px){ .roles-buscar-inp{ font-size:16px; } .roles-buscar-x{ width:44px; height:44px; } }
  .role-badge{ font-family:'JetBrains Mono',monospace; font-size:12px; color:hsl(var(--gold-2)); background:hsl(var(--gold)/0.12); padding:4px 10px; border-radius:8px; }
  .role-badge.off{ color:hsl(var(--muted)/0.6); background:hsl(0 0% 100% / 0.04); }

  .role-detail{ padding:24px; }

  /* Activar evento a mano / Montaña rusa (2026-09-25) */
  .ev-montana-rusa{
    display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
    padding:16px 18px; border-radius:16px; margin-bottom:6px;
    background:linear-gradient(135deg, hsl(var(--gold)/0.10), hsl(0 0% 100% / 0.03));
    border:1px solid hsl(var(--gold-2)/0.25);
  }
  .ev-atajos{ display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
  .ev-atajos .btn{ padding:5px 12px; font-size:12.5px; }
  .role-badge.ev-live{ color:#4ade80; background:rgba(74,222,128,0.12); animation:pulse 1.8s ease-in-out infinite; }

  .home-aviso{ background:hsl(38 90% 50% / 0.1); border:1px solid hsl(38 90% 50% / 0.3); color:hsl(38 90% 70%); padding:12px 16px; border-radius:12px; font-size:13px; margin-bottom:14px; }

  /* Anomalías económicas en Home (2026-09-11, rediseño Emil Design +
     Impeccable) — severidad media (5-10×) en ámbar, alta (10×+) en el
     "apple" rojo de la paleta de marca, mismo criterio de color que el
     resto del panel usa para peligro/riesgo alto. */
  .home-anomalias{ display:flex; flex-direction:column; gap:10px; margin-bottom:24px; }
  .home-anomalia{
    display:flex; align-items:flex-start; gap:14px; padding:16px 18px; border-radius:16px;
    background:hsl(38 90% 50% / 0.06); border:1px solid hsl(38 90% 50% / 0.2);
    opacity:0; animation: cardPopIn .38s var(--ease-spring) both;
    transition: transform .25s var(--ease-spring), border-color .2s ease, background .2s ease;
  }
  .home-anomalia:nth-child(1){ animation-delay:.02s; } .home-anomalia:nth-child(2){ animation-delay:.06s; }
  .home-anomalia:nth-child(3){ animation-delay:.10s; } .home-anomalia:nth-child(4){ animation-delay:.14s; }
  .home-anomalia:hover{ transform:translateY(-2px); border-color:hsl(38 90% 50% / 0.4); background:hsl(38 90% 50% / 0.09); }
  .home-anomalia.sev-alta{ background:hsl(var(--apple)/0.08); border-color:hsl(var(--apple)/0.28); }
  .home-anomalia.sev-alta:hover{ border-color:hsl(var(--apple)/0.5); background:hsl(var(--apple)/0.12); }
  .home-anomalia .ha-icon{
    width:34px; height:34px; flex-shrink:0; border-radius:10px; display:flex; align-items:center; justify-content:center;
    background:hsl(38 90% 50% / 0.16); color:hsl(38 90% 68%);
  }
  .home-anomalia.sev-alta .ha-icon{ background:hsl(var(--apple)/0.2); color:hsl(var(--apple-2)); }
  .home-anomalia .ha-icon svg{ width:17px; height:17px; }
  .ha-body{ flex:1; min-width:0; }
  .ha-top{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .ha-top b{ font-size:14px; }
  .ha-chip{
    font-family:'JetBrains Mono', monospace; font-size:12px; font-weight:700; letter-spacing:0.2px;
    padding:2px 9px; border-radius:9999px; background:hsl(38 90% 50% / 0.18); color:hsl(38 90% 72%);
  }
  .home-anomalia.sev-alta .ha-chip{ background:hsl(var(--apple)/0.25); color:hsl(var(--apple-2)); }
  .ha-monto{ font-family:'JetBrains Mono', monospace; font-size:15px; font-weight:700; margin-top:5px; color:hsl(var(--text)); }
  .ha-monto small{ font-family:'Inter', sans-serif; font-weight:500; font-size:12px; color:hsl(var(--muted)); margin-left:4px; }
  .ha-detalle{ font-size:12px; color:hsl(var(--muted)); margin-top:3px; line-height:1.5; }
  .side-search{ width:100%; background:hsl(0 0% 100% / 0.04); border:1px solid transparent; border-radius:12px; color:hsl(var(--text)); padding:10px 13px 10px 34px; font-size:13px; margin:12px 0 4px; font-family:'Inter',sans-serif; }
  .side-search-wrap{ position:relative; display:flex; align-items:center; }
  .side-search-wrap svg{ position:absolute; left:12px; width:14px; height:14px; color:hsl(var(--muted)); pointer-events:none; }
  .side-search:focus{ border-color:hsl(var(--gold-2)/0.5); }
  .sub-heading{ font-size:12.5px; font-weight:800; text-transform:uppercase; letter-spacing:0.7px; color:hsl(var(--gold-2)); margin:26px 0 9px; padding-top:18px; border-top:1px solid transparent; }
  .field:has(+ .sub-heading), .sub-heading:first-child{ border-top:none; }
  .home-top3{ display:grid; grid-template-columns:1fr 1.15fr 1fr; gap:14px; align-items:end; margin-bottom:20px; }
  .home-top-card{ padding:20px 14px; text-align:center; }
  .home-top-card img{ width:56px; height:56px; border-radius:50%; margin-bottom:8px; }
  .home-top-card.pos-primero::before{ background:linear-gradient(180deg, hsl(45 90% 60% / 0.9), hsl(45 90% 55% / 0.3)); }
  .home-top-card.pos-primero img{ width:72px; height:72px; border:3px solid hsl(45 90% 55%); }
  .home-top-card.pos-segundo::before{ background:linear-gradient(180deg, hsl(30 55% 50% / 0.9), hsl(30 55% 45% / 0.3)); }
  .home-top-card.pos-segundo img{ border:3px solid hsl(30 55% 45%); }
  .home-top-card.pos-tercero::before{ background:linear-gradient(180deg, hsl(0 0% 80% / 0.9), hsl(0 0% 75% / 0.3)); }
  .home-top-card.pos-tercero img{ border:3px solid hsl(0 0% 75%); }
  .home-top-card .medal{ font-size:20px; }
  .home-top-card .nombre{ font-size:12.5px; font-weight:700; margin:6px 0 2px; }
  .nx-perfil-link{ color:inherit; text-decoration:none; transition:color .2s ease; }
  .nx-perfil-link:hover{ color:hsl(var(--gold-2)); text-decoration:underline; }
  .home-top-card .monto{ font-size:12px; color:hsl(var(--gold-2)); font-family:'JetBrains Mono',monospace; }
  .home-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(160px,1fr)); gap:12px; margin-bottom:20px; }
  .home-card{ padding:18px; text-align:center; transition: transform .35s var(--ease-spring), box-shadow .35s var(--ease-smooth); }
  .home-card b{ display:block; font-size:19px; color:hsl(var(--gold-2)); font-family:'JetBrains Mono',monospace; }
  .home-card span{ font-size:12px; color:hsl(var(--muted)); }
  .home-card:hover{ transform:translateY(-5px) scale(1.03); box-shadow:0 16px 34px rgba(0,0,0,0.35); filter: drop-shadow(0 0 15px hsl(var(--gold-2)/0.22)); }
  .home-card:active{ transform:translateY(-1px) scale(0.98); transition-duration:.12s; }
  .home-status{ display:flex; justify-content:space-around; padding:16px; text-align:center; transition: box-shadow .3s var(--ease-smooth); }
  .home-status:hover{ box-shadow:0 12px 28px rgba(0,0,0,0.3); }
  .home-status b{ display:block; font-size:14px; }
  /* mismo halo de marca que feat-card/testi-card/final-card, no el blanco
     parejo de .glass::before (ver comentario grande más arriba) */
  .home-card::before, .home-status::before{
    background: linear-gradient(160deg, hsl(var(--gold-2)/0.4), hsl(var(--gold-2)/0.05) 30%, transparent 55%, hsl(var(--apple-2)/0.05) 75%, hsl(var(--apple-2)/0.3));
  }
  .home-top-card{ transition: transform .38s var(--ease-spring), box-shadow .38s var(--ease-smooth); }
  .home-top-card:hover{ transform:translateY(-6px) scale(1.03); box-shadow:0 18px 40px rgba(0,0,0,0.4); filter: drop-shadow(0 0 18px hsl(var(--gold-2)/0.25)); }
  .home-top-card:active{ transform:translateY(-2px) scale(0.98); transition-duration:.12s; }
  .home-status small{ color:hsl(var(--muted)); font-size:12px; }
  /* Fila del "Top comandos que más plata dieron" (2026-09-11) — mismo
     look/feel que .lb-fila (leaderboard) y misma entrada escalonada que
     .mt-card (cardPopIn), nada nuevo inventado. */
  .home-top-comando-fila{
    display:flex; align-items:center; gap:14px; padding:12px 16px; border-radius:14px;
    opacity:0; animation:cardPopIn .45s var(--ease-spring) both;
    transition: transform .25s var(--ease-spring), box-shadow .25s var(--ease-smooth), background .22s ease;
  }
  .home-top-comando-fila:hover{ background:hsl(0 0% 100% / 0.05); transform:translateX(4px); box-shadow:0 10px 24px rgba(0,0,0,0.28); }
  .home-top-comando-fila .medalla{ font-size:22px; width:28px; text-align:center; flex-shrink:0; }
  .home-top-comando-fila .nombre{ flex:1; min-width:0; }
  .home-top-comando-fila .monto{ font-weight:700; color:hsl(var(--gold-2)); font-family:'JetBrains Mono',monospace; white-space:nowrap; }
  .lb-fila{ display:flex; align-items:center; gap:12px; padding:10px 14px; text-decoration:none; color:inherit; border-radius:10px; transition:background .22s ease, transform .25s var(--ease-spring), box-shadow .25s var(--ease-smooth); }
  .lb-fila:hover{ background:hsl(0 0% 100% / 0.05); transform:translateX(4px); box-shadow:0 8px 20px rgba(0,0,0,0.25); }
  .lb-fila:active{ transform:translateX(2px) scale(0.99); transition-duration:.12s; }
  .lb-fila img{ width:30px; height:30px; border-radius:50%; border:1.5px solid hsl(0 0% 100% / 0.12); flex-shrink:0; }
  .lb-puesto{ width:26px; font-weight:800; color:hsl(var(--muted)); font-family:'JetBrains Mono',monospace; font-size:12px; }
  .lb-nombre{ flex:1; font-size:13.5px; font-weight:600; }
  .lb-monto{ font-size:12.5px; color:hsl(var(--gold-2)); font-family:'JetBrains Mono',monospace; }

  .mt-header{ margin:28px 0 16px; padding-top:24px; border-top:1px solid transparent; font-size:16.5px; font-weight:700; }
  .mas-tabs{ display:flex; gap:8px; margin-bottom:18px; flex-wrap:wrap; }
  .mas-tab{
    padding:9px 18px; border-radius:9999px; background:hsl(0 0% 100% / 0.04); border:1px solid transparent;
    color:hsl(var(--muted)); font-size:13px; font-weight:600; cursor:pointer; font-family:inherit;
    transition: transform .28s var(--ease-spring), background .25s ease, color .25s ease, border-color .25s ease;
  }
  .mas-tab:hover{ transform:scale(1.05); color:hsl(var(--text)); }
  .mas-tab:active{ transform:scale(0.95); }
  .mas-tab.on{ background:hsl(var(--gold-2)/0.15); color:hsl(var(--gold-2)); border-color:hsl(var(--gold-2)/0.3); }
  #masContenidoTab{ animation: tabFadeSlide .38s var(--ease-smooth); }
  #secFields{ animation: tabFadeSlide .4s var(--ease-smooth); }
  @keyframes tabFadeSlide{
    from{ opacity:0; transform: translateY(10px); }
    to{ opacity:1; transform: translateY(0); }
  }
  .huev-lista-pets{ max-height:220px; overflow-y:auto; display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
  .huev-pet-row{ display:flex; align-items:center; gap:10px; padding:8px 10px; background:hsl(0 0% 100% / 0.03); border-radius:8px; font-size:12.5px; }
  .mt-header small{ font-weight:400; color:hsl(var(--muted)); font-size:13px; display:block; margin-top:4px; }
  .mt-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(190px,1fr)); gap:18px; }
  .mt-card{
    background:hsl(0 0% 100% / 0.03); border:1px solid transparent; border-radius:20px;
    padding:26px 18px; cursor:pointer; text-align:center; display:flex; flex-direction:column; align-items:center; gap:10px;
    min-height:172px; justify-content:center;
    transition: transform .32s var(--ease-spring), border-color .25s ease, background .25s ease, box-shadow .32s var(--ease-smooth);
  }
  .mt-card{ opacity:0; animation:cardPopIn .5s var(--ease-spring) both; }
  .mt-card:nth-child(1){ animation-delay:.02s; } .mt-card:nth-child(2){ animation-delay:.06s; }
  .mt-card:nth-child(3){ animation-delay:.10s; } .mt-card:nth-child(4){ animation-delay:.14s; }
  .mt-card:nth-child(5){ animation-delay:.18s; } .mt-card:nth-child(6){ animation-delay:.22s; }
  .mt-card:hover{ border-color:hsl(var(--gold-2)/0.6); transform:translateY(-7px) scale(1.03); box-shadow:0 22px 48px rgba(0,0,0,0.4), 0 0 30px hsl(var(--gold-2)/0.2); }
  .mt-card:active{ transform:translateY(-2px) scale(0.96); transition-duration:.12s; }
  .mt-card.sel{ border-color:hsl(var(--gold-2)/0.6); background:hsl(var(--gold)/0.06); }
  .mt-card b{ font-size:15px; }
  .mt-icon{ width:72px; height:72px; border-radius:16px; background:hsl(0 0% 100% / 0.05); display:flex; align-items:center; justify-content:center; font-size:32px; overflow:hidden; }
  .mt-icon svg{ width:32px; height:32px; }
  .mt-icon img{ width:100%; height:100%; object-fit:cover; }
  .mt-precio{ font-size:13.5px; color:hsl(var(--gold-2)); font-weight:700; }
  .mt-stock{ font-size:12px; color:hsl(var(--muted)); }
  .mt-nivel-req{ font-size:12px; color:hsl(var(--gold-2)); }
  .mt-nivel-req svg{ width:11px; height:11px; vertical-align:-1px; }
  /* Límite de compra por usuario en Mi Tienda (2026-09-11) — chip propio
     (no reusa .mt-nivel-req) para que se distinga de un requisito de nivel
     de un vistazo en la tarjeta. */
  .mt-limite-usuario{ font-size:12px; color:hsl(var(--apple-2)); }
  .mt-limite-preview{
    font-size:12.5px; color:hsl(var(--gold-2)); margin-top:8px; padding:8px 12px;
    background:hsl(var(--gold-2)/0.08); border-radius:10px; max-height:0; opacity:0;
    overflow:hidden; transition: max-height .3s var(--ease-smooth), opacity .25s ease, padding .3s var(--ease-smooth);
  }
  .mt-limite-preview.show{ max-height:60px; opacity:1; padding:8px 12px; }
  .mt-nuevo{ border:1.5px dashed hsl(var(--stroke)/0.2); color:hsl(var(--muted)); justify-content:center; min-height:172px; }
  .mt-nuevo:hover{ color:hsl(var(--text)); }
  .mt-lleno{ border-style:solid; cursor:default; opacity:0.6; }
  .mt-lleno:hover{ transform:none; color:hsl(var(--muted)); }
  .mt-lleno:active{ transform:none; }

  .mt-card{ position:relative; }
  .mt-borrar{ position:absolute; top:6px; right:6px; width:24px; height:24px; border-radius:50%; border:none; background:hsl(0 0% 100% / 0.08); color:hsl(var(--muted)); font-size:12px; cursor:pointer; display:flex; align-items:center; justify-content:center; opacity:0; transition: opacity .2s ease, transform .28s var(--ease-spring), background .2s ease; }
  .mt-card:hover .mt-borrar, .mt-borrar:focus-visible{ opacity:1; }
  .mt-borrar:hover{ background:hsl(0 70% 58%/0.25); color:hsl(0 70% 72%); transform:scale(1.12); }
  .mt-borrar:active{ transform:scale(0.9); }
  /* Duplicar (2026-09-07, pedido explícito) — mismo estilo/posición que
     Borrar, corrido a la izquierda para no superponerse. */
  .mt-duplicar{ position:absolute; top:6px; right:34px; width:24px; height:24px; border-radius:50%; border:none; background:hsl(0 0% 100% / 0.08); color:hsl(var(--muted)); font-size:12px; cursor:pointer; display:flex; align-items:center; justify-content:center; opacity:0; transition: opacity .2s ease, transform .28s var(--ease-spring), background .2s ease; }
  .mt-card:hover .mt-duplicar, .mt-duplicar:focus-visible{ opacity:1; }
  .mt-duplicar:hover{ background:hsl(var(--gold-2)/0.25); color:hsl(var(--gold-2)); transform:scale(1.12); }
  .mt-duplicar:active{ transform:scale(0.9); }

  /* Armería requerida por mina (2026-09-13) — chips con ✕ para sacar,
     misma sutileza que el resto de los "tag" de la página (ej. roles). */
  .armeria-req-lista{ display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
  .armeria-req-chip{
    display:inline-flex; align-items:center; gap:6px; padding:6px 8px 6px 10px; border-radius:100px;
    background:hsl(0 0% 100% / 0.06); border:1px solid hsl(var(--stroke)/0.14); font-size:12.5px; font-weight:600;
  }
  .armeria-req-chip button{
    display:flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; border:none;
    background:hsl(0 0% 100% / 0.08); color:hsl(var(--muted)); font-size:12px; cursor:pointer; transition:.15s ease;
  }
  .armeria-req-chip button:hover{ background:hsl(0 70% 58%/0.25); color:hsl(0 70% 72%); transform:scale(1.12); }
  .mt-duplicar:disabled{ opacity:0.35 !important; cursor:not-allowed; transform:none !important; }
  .mt-card:hover .mt-duplicar:disabled{ background:hsl(0 0% 100% / 0.08); color:hsl(var(--muted)); }

  /* ,crafts (2026-09-16) — mesa de crafteo 3x3 tipo Minecraft + picker de
     categoría→ítem. Mismo lenguaje visual que .mt-card/.armeria-req-chip:
     spring en hover, sink en active, glow dorado al tocar. */
  .craft-grid-3x3{ display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; max-width:280px; margin-top:8px; }
  .craft-slot{
    position:relative; aspect-ratio:1; border-radius:14px; display:flex; flex-direction:column;
    align-items:center; justify-content:center; cursor:pointer; color:hsl(var(--muted));
    background:hsl(0 0% 100% / 0.03); border:1.5px dashed hsl(var(--stroke)/0.22);
    transition: transform .28s var(--ease-spring), border-color .25s ease, background .25s ease, box-shadow .28s var(--ease-smooth);
  }
  .craft-slot:hover{ border-color:hsl(var(--gold-2)/0.6); transform:scale(1.05); box-shadow:0 10px 24px rgba(0,0,0,0.35), 0 0 18px hsl(var(--gold-2)/0.18); }
  .craft-slot:active{ transform:scale(0.95); transition-duration:.12s; }
  .craft-slot.filled{ border-style:solid; border-color:hsl(var(--stroke)/0.18); background:hsl(var(--gold-2)/0.07); }
  .craft-slot-emoji{ font-size:26px; line-height:1; }
  .craft-slot-cant{ font-size:12px; font-weight:700; color:hsl(var(--gold-2)); margin-top:2px; }
  .craft-slot-quitar{
    position:absolute; top:-6px; right:-6px; width:20px; height:20px; border-radius:50%; border:none;
    background:hsl(0 0% 100% / 0.1); color:hsl(var(--muted)); font-size:12px; cursor:pointer; display:flex;
    align-items:center; justify-content:center; opacity:0; transition:opacity .2s ease, transform .2s var(--ease-spring), background .2s ease;
  }
  .craft-slot:hover .craft-slot-quitar{ opacity:1; }
  .craft-slot-quitar:hover{ background:hsl(0 70% 58%/0.25); color:hsl(0 70% 72%); transform:scale(1.12); }
  .craft-slot-qty{ position:absolute; bottom:-6px; left:0; right:0; display:flex; justify-content:center; gap:3px; opacity:0; transition:opacity .2s ease; }
  .craft-slot:hover .craft-slot-qty{ opacity:1; }
  .craft-slot-qty button{
    width:18px; height:18px; border-radius:50%; border:none; background:hsl(0 0% 100% / 0.1);
    color:hsl(var(--text)); font-size:12px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center;
    transition:.15s ease;
  }
  .craft-slot-qty button:hover{ background:hsl(var(--gold-2)/0.3); color:hsl(var(--gold-2)); transform:scale(1.15); }

  .craft-categorias{ display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
  .craft-categoria-btn{
    display:flex; flex-direction:column; align-items:center; gap:6px; min-width:84px; padding:16px 10px;
    border-radius:16px; border:1px solid hsl(var(--stroke)/0.14); background:hsl(0 0% 100% / 0.03);
    color:hsl(var(--text)); font-size:12.5px; font-weight:600; cursor:pointer;
    transition: transform .28s var(--ease-spring), border-color .25s ease, background .25s ease;
  }
  .craft-categoria-btn .cc-emoji{ font-size:24px; }
  .craft-categoria-btn:hover{ border-color:hsl(var(--gold-2)/0.6); background:hsl(var(--gold-2)/0.08); transform:translateY(-3px) scale(1.04); }
  .craft-categoria-btn:active{ transform:scale(0.95); }

  .craft-item-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(130px,1fr)); gap:8px; max-height:320px; overflow-y:auto; margin-top:8px; }
  .craft-item-opcion{
    display:flex; align-items:center; gap:8px; padding:9px 12px; border-radius:12px;
    background:hsl(0 0% 100% / 0.03); border:1px solid hsl(var(--stroke)/0.12); font-size:12.5px; font-weight:600;
    cursor:pointer; transition: transform .22s var(--ease-spring), border-color .2s ease, background .2s ease;
  }
  .craft-item-opcion .ci-emoji{ font-size:18px; }
  .craft-item-opcion:hover{ border-color:hsl(var(--gold-2)/0.5); background:hsl(var(--gold-2)/0.07); transform:scale(1.03); }
  .craft-item-opcion:active{ transform:scale(0.96); }

  .craft-tipo-pills{ display:flex; gap:8px; flex-wrap:wrap; }
  .craft-tipo-pill{
    padding:8px 16px; border-radius:100px; border:1px solid hsl(var(--stroke)/0.16);
    background:hsl(0 0% 100% / 0.03); color:hsl(var(--muted)); font-size:13px; font-weight:600; cursor:pointer;
    transition: transform .22s var(--ease-spring), border-color .2s ease, background .2s ease, color .2s ease;
  }
  .craft-tipo-pill:hover{ transform:scale(1.04); border-color:hsl(var(--gold-2)/0.4); }
  .craft-tipo-pill.on{ background:hsl(var(--gold-2)/0.15); border-color:hsl(var(--gold-2)/0.6); color:hsl(var(--text)); }
  .craft-tipo-pill:active{ transform:scale(0.95); }

  /* Ocultar/mostrar un ítem fijo de Tienda de ,tienda (pedido 2026-09-11) —
     a diferencia de Borrar/Duplicar, este SIEMPRE se ve (no solo en hover):
     necesitás poder notar de un vistazo qué está oculto y reactivarlo. */
  .mt-ojo{
    position:absolute; top:6px; right:6px; width:26px; height:26px; border-radius:50%;
    border:none; background:hsl(0 0% 100% / 0.08); font-size:13px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition: transform .28s var(--ease-spring), background .2s ease;
  }
  .mt-ojo:hover{ background:hsl(var(--gold-2)/0.25); transform:scale(1.12); }
  .mt-ojo:active{ transform:scale(0.9); }
  .mt-card.mt-oculto{ opacity:0.55; border-color:hsl(0 70% 55%/0.25); }
  .mt-card.mt-oculto:hover{ opacity:0.85; }

  .mt-emoji-btn{ width:44px; flex-shrink:0; border-radius:12px; border:1px solid transparent; background:hsl(0 0% 100% / 0.04); font-size:18px; cursor:pointer; }
  .mt-emoji-btn:hover{ border-color:hsl(var(--gold-2)/0.5); }

  /* ============ Minería: balance de probabilidades por mina (2026-09-11)
     Pedido explícito: "dejame cambiar la prob con q te puede salir cada
     mineral, solo la probabilidad" — sliders inline agrupados por mina, %
     relativo recalculado en vivo mientras se arrastra. Precio/rareza se
     mudan a un modal aparte, más chico (ver .mineral-prob-edit) — no se
     pierden, solo dejan de compartir protagonismo con la probabilidad. ============ */
  .mina-prob-section{
    background:hsl(0 0% 100% / 0.025); border:1px solid transparent; border-radius:20px;
    margin-bottom:14px; overflow:hidden;
    transition: border-color .25s ease, background .25s ease;
  }
  .mina-prob-section:hover{ border-color:hsl(0 0% 100% / 0.08); }
  .mina-prob-header{
    width:100%; display:flex; align-items:center; gap:12px; text-align:left;
    padding:18px 20px; background:none; border:none; color:inherit; font:inherit; cursor:pointer;
  }
  .mina-prob-header .mp-emoji{ font-size:22px; }
  .mina-prob-header b{ font-size:15.5px; }
  .mina-prob-header .mp-count{ font-size:12.5px; color:hsl(var(--muted)); font-weight:500; }
  .mina-prob-chevron{
    margin-left:auto; width:22px; height:22px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
    color:hsl(var(--muted)); transition: transform .32s var(--ease-spring); font-size:13px;
  }
  .mina-prob-header.open .mina-prob-chevron{ transform:rotate(180deg); color:hsl(var(--gold-2)); }
  .mina-prob-body-wrap{ display:grid; grid-template-rows:0fr; transition: grid-template-rows .34s var(--ease-smooth); }
  .mina-prob-body-wrap.open{ grid-template-rows:1fr; }
  .mina-prob-body{ overflow:hidden; min-height:0; }
  .mina-prob-body-inner{ padding:0 20px 18px; display:flex; flex-direction:column; gap:14px; }
  @media not all /* movimiento reducido: lo decide el botón "Animaciones" del sitio (html[data-motion=reduced], ver manza-a11y.css) */{ .mina-prob-body-wrap{ transition:none; } }

  .mineral-prob-row{ display:flex; align-items:center; gap:14px; }
  .mineral-prob-icon{
    width:36px; height:36px; border-radius:10px; background:hsl(0 0% 100% / 0.05);
    display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0;
  }
  .mineral-prob-info{ width:126px; flex-shrink:0; }
  .mineral-prob-info b{ display:block; font-size:13.5px; line-height:1.3; }
  .mineral-prob-info small{ display:block; font-size:12px; color:hsl(var(--muted)); margin-top:1px; }
  .mineral-prob-slider-wrap{ flex:1; min-width:0; display:flex; align-items:center; gap:12px; }
  .prob-slider{
    -webkit-appearance:none; appearance:none; flex:1; height:6px; border-radius:999px;
    background:hsl(0 0% 100% / 0.08); cursor:pointer; outline:none;
  }
  .prob-slider::-webkit-slider-thumb{
    -webkit-appearance:none; appearance:none; width:17px; height:17px; border-radius:50%;
    background:linear-gradient(135deg, hsl(var(--gold-2)), hsl(var(--apple-2)));
    box-shadow:0 2px 8px hsl(0 0% 0% / 0.45), 0 0 0 4px hsl(var(--gold-2)/0.14);
    cursor:grab; transition: transform .18s var(--ease-spring), box-shadow .2s ease;
  }
  .prob-slider::-webkit-slider-thumb:hover{ transform:scale(1.18); }
  .prob-slider:active::-webkit-slider-thumb{ transform:scale(1.32); cursor:grabbing; box-shadow:0 2px 10px hsl(0 0% 0% / 0.5), 0 0 0 7px hsl(var(--gold-2)/0.25); }
  .prob-slider::-moz-range-thumb{
    width:17px; height:17px; border-radius:50%; border:none;
    background:linear-gradient(135deg, hsl(var(--gold-2)), hsl(var(--apple-2)));
    box-shadow:0 2px 8px hsl(0 0% 0% / 0.45), 0 0 0 4px hsl(var(--gold-2)/0.14);
    cursor:grab; transition: transform .18s var(--ease-spring), box-shadow .2s ease;
  }
  .prob-slider::-moz-range-thumb:hover{ transform:scale(1.18); }
  .prob-slider::-moz-range-track{ height:6px; border-radius:999px; background:transparent; }
  .mineral-prob-pct-wrap{ width:78px; flex-shrink:0; display:flex; align-items:center; gap:6px; justify-content:flex-end; }
  .prob-pct{ font-family:'JetBrains Mono', monospace; font-size:13px; font-weight:600; color:hsl(var(--gold-2)); font-variant-numeric:tabular-nums; }
  .prob-saved-tick{ font-size:12px; color:hsl(var(--leaf)); opacity:0; transform:scale(0.6); transition: opacity .2s ease, transform .2s var(--ease-spring); }
  .prob-saved-tick.show{ opacity:1; transform:scale(1); }
  .mineral-prob-edit{
    width:26px; height:26px; border-radius:50%; border:none; background:hsl(0 0% 100% / 0.07);
    color:hsl(var(--muted)); font-size:12px; cursor:pointer; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    transition: background .2s ease, color .2s ease, transform .2s var(--ease-spring);
  }
  .mineral-prob-edit:hover{ background:hsl(var(--gold-2)/0.18); color:hsl(var(--gold-2)); transform:scale(1.12); }
  .mineral-prob-edit:active{ transform:scale(0.9); }

  .rd-vars-row{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
  .rd-var-chip{
    font-family:'JetBrains Mono', monospace; font-size:12px; font-weight:600; letter-spacing:0.2px;
    padding:5px 10px; border-radius:9999px; cursor:pointer; color:hsl(var(--gold-2));
    background:hsl(var(--gold-2)/0.08); border:1px solid hsl(var(--gold-2)/0.25);
    transition: transform .22s var(--ease-spring), background .2s ease, border-color .2s ease;
  }
  .rd-var-chip:hover{ background:hsl(var(--gold-2)/0.16); border-color:hsl(var(--gold-2)/0.5); transform:translateY(-1px) scale(1.05); }
  .rd-var-chip:active{ transform:scale(0.94); transition-duration:.12s; }

  .mt-modal-backdrop{
    position:fixed; inset:0; z-index:200; background:hsl(0 0% 0% / 0.6); backdrop-filter:blur(6px);
    display:flex; align-items:center; justify-content:center; padding:30px; overflow-y:auto;
    animation: backdropFade .28s var(--ease-smooth);
  }
  @keyframes backdropFade{ from{ opacity:0; } to{ opacity:1; } }
  .mt-modal{
    width:100%; max-width:820px; max-height:90vh; padding:36px; margin:auto; display:flex; flex-direction:column;
    animation: modalSpring .42s var(--ease-spring);
  }
  @media (max-width:620px){ .mt-modal-backdrop{ padding:14px; } .mt-modal{ padding:22px; max-height:94vh; } }
  @keyframes modalSpring{
    from{ opacity:0; transform: translateY(24px) scale(0.94); }
    to{ opacity:1; transform: translateY(0) scale(1); }
  }

  /* Vetados de Mi Tienda (2026-09-13, pedido explícito): "agrega una nueva
     opcion q sea vetados... q te muestre su perfil y usuario". */
  .mt-vetados{ margin-top:28px; padding-top:20px; border-top:1px solid hsl(var(--stroke)/0.08); }
  .mt-vetados-arriba{ margin-top:0; padding-top:0; padding-bottom:20px; border-top:none; border-bottom:1px solid hsl(var(--stroke)/0.08); margin-bottom:22px; }
  .mt-vetados-header{ font-size:15px; font-weight:700; margin-bottom:4px; }
  .mt-vetados-agregar{ display:flex; gap:8px; margin:12px 0; }
  .mt-vetados-agregar input{ flex:1; }
  .mt-vetados-lista{ display:flex; flex-direction:column; gap:8px; }
  .mt-vetado-fila{
    display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:12px;
    background:hsl(0 0% 100% / 0.035); border:1px solid hsl(var(--stroke)/0.08);
    opacity:0; animation:cardPopIn .35s var(--ease-spring) both;
  }
  .mt-vetado-fila img{ width:30px; height:30px; border-radius:50%; flex-shrink:0; }
  .mt-vetado-fila .nombre{ flex:1; min-width:0; font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .mt-vetado-fila .id{ font-size:12px; color:hsl(var(--muted)); font-family:'JetBrains Mono',monospace; font-weight:400; }
  .mt-modal-scroll{ overflow-y:auto; padding-right:6px; }
  .mt-modal h3{ font-size:20.5px; margin-bottom:18px; }
  .role-detail h3{ font-size:17px; margin:0 0 20px; }
  /* Filas de opción dentro de un modal (Plantillas) — a propósito NO son
     .glass: envolver una tarjeta .glass adentro de un .mt-modal (que ya es
     .glass) duplica el borde blanco traslúcido de esa clase — se ve como un
     doble borde feo. Plano + fondo sutil + spring en hover/press, sin
     depender del IntersectionObserver de .reveal (ese solo observa
     #secFields — un elemento .reveal metido en el modal quedaba en
     opacity:0 para siempre, "invisible"). Entrada propia por CSS puro. */
  .plant-opt{
    display:flex; align-items:center; justify-content:space-between; gap:14px; width:100%;
    padding:16px 18px; margin-bottom:10px; border-radius:16px; cursor:pointer; text-align:left;
    background:hsl(0 0% 100% / 0.035); border:1.5px solid transparent; color:inherit; font:inherit;
    opacity:0; animation:cardPopIn .45s var(--ease-spring) both;
    transition: background .25s ease, border-color .25s ease, transform .28s var(--ease-spring);
  }
  .plant-opt:last-child{ margin-bottom:0; }
  .plant-opt:hover{ background:hsl(0 0% 100% / 0.07); border-color:hsl(var(--gold-2)/0.45); transform:translateX(4px); }
  .plant-opt:active{ transform:translateX(4px) scale(0.97); transition-duration:.12s; }
  .plant-opt-txt b{ display:block; font-size:14px; margin-bottom:3px; }
  .plant-opt-txt small{ color:hsl(var(--muted)); font-size:12px; line-height:1.5; display:block; }
  .plant-opt-go{ font-size:18px; flex-shrink:0; transition:transform .32s var(--ease-spring); }
  .plant-opt:hover .plant-opt-go{ transform:scale(1.2); }
  .plant-box{ padding:14px 16px; border-radius:14px; background:hsl(0 0% 100% / 0.035); margin-bottom:14px; }
  /* Selector de alcance al clonar (2026-08-23) — grupos plegados visualmente
     por fondo, no por collapse real (son pocos ítems por grupo, no hace
     falta esconderlos). */
  .plant-alcance-grupo{ padding:12px 14px; border-radius:14px; background:hsl(0 0% 100% / 0.03); margin-bottom:10px; }
  .plant-alcance-head{ display:flex; align-items:center; gap:10px; cursor:pointer; font-size:13.5px; }
  .plant-alcance-items{ display:flex; flex-direction:column; gap:2px; margin:8px 0 2px 26px; }
  .plant-alcance-item{ display:flex; align-items:center; gap:9px; padding:6px 8px; border-radius:8px; cursor:pointer; font-size:12.5px; color:hsl(var(--muted)); transition: background .15s ease, color .15s ease; }
  .plant-alcance-item:hover{ background:hsl(0 0% 100% / 0.05); color:hsl(var(--text)); }
  .plant-ico{ display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; flex:none; font-size:14px; line-height:1; vertical-align:-4px; margin-right:4px; }
  .plant-ico svg{ width:16px; height:16px; display:block; }
  .plant-exp-chips{ display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 14px; }
  .plant-exp-chips .plant-cat-chip{ min-height:44px; padding-inline:16px; display:inline-flex; align-items:center; gap:7px; }
  .plant-exp-chips .plant-cat-chip svg{ width:15px; height:15px; }
  .plant-exp-resumen{ font-size:12.5px; color:hsl(var(--muted)); line-height:1.6; margin-bottom:14px; min-height:40px; }
  .plant-alcance-head input, .plant-alcance-item input{ width:16px; height:16px; accent-color:hsl(var(--gold-2)); cursor:pointer; flex-shrink:0; }

  /* Comunidad de Plantillas (2026-08-29) — galería pública. Vive en el MISMO
     abrirModalPortal que el resto de Plantillas (nunca un backdrop anidado
     adentro de otro — ver el pitfall de backdrop-filter documentado arriba),
     pero es una galería, no un menú de 3 filas: necesita mucho más aire que
     los 560/820px de siempre, por eso el tamaño propio de .plant-com-sheet. */
  .plant-com-sheet{ max-width:1240px; width:94vw; max-height:93vh; }
  @media (max-width:720px){ .plant-com-sheet{ width:96vw; padding:22px; } }
  /* Optimización (2026-08-29, pedido "no es fluido"): .glass aplica
     blur(24px) con !important sobre TODO lo que lleva esa clase — sobre un
     área tan grande como este sheet (94vw, hasta 93vh), con el video de
     fondo siempre reproduciéndose detrás (a propósito, no se pausa), ese
     blur es lo más caro de recalcular en cada frame. Bajarlo un poco ACÁ
     nomás (nunca se toca --glass-blur global, que es el que usa el resto
     del sitio) sigue viéndose "vidrio esmerilado" pero le saca carga real
     al compositor sin sacarle ninguna animación a nada. */
  /* Bug real de lag encontrado (2026-08-29, reportado repetido veces):
     .plant-com-modal (detalle con carrusel+comentarios, elegir secciones,
     elegir destino, confirmar, reportar) tenía la clase para las sombras
     livianas de más abajo, pero NO esta reducción de blur — seguía en el
     blur(24px) global de .glass, y el detalle ahora es la vista MÁS pesada
     de toda la feature (fotos + comentarios + acciones). Extendida acá. */
  .glass.plant-com-sheet, .glass.plant-com-modal{ backdrop-filter:blur(14px) saturate(160%) !important; -webkit-backdrop-filter:blur(14px) saturate(160%) !important; contain:layout style; }
  /* Optimización (2026-08-29, pedido "al pasar el mouse... por todas las
     animaciones o botones"): .btn-solid/.btn-outline en TODO el sitio tienen
     un hover con hasta 3 sombras apiladas y hasta 120px de blur (para el
     efecto "glow" dorado) — es lo más caro de repintar del sitio, y acá se
     hace ENCIMA de un backdrop-filter grande. El movimiento (translateY+
     scale, la parte que se "siente") queda EXACTAMENTE igual — se scopea
     una sombra más liviana SOLO en la galería y el wizard de Comunidad de
     Plantillas, sin tocar el look de esos botones en el resto del sitio. */
  .plant-com-sheet .btn-solid:hover, .plant-com-modal .btn-solid:hover{
    box-shadow: 0 10px 24px rgba(0,0,0,0.4);
  }
  .plant-com-sheet .btn-outline:hover, .plant-com-modal .btn-outline:hover{
    box-shadow: 0 8px 18px rgba(0,0,0,0.3);
    filter: none;
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
  }
  .plant-com-sheet .server-card:hover, .plant-com-modal .server-card:hover{ box-shadow: 0 10px 22px rgba(0,0,0,0.35); }
  .plant-com-sheet .mt-card:hover, .plant-com-modal .mt-card:hover{ box-shadow: 0 10px 22px rgba(0,0,0,0.35); }
  .plant-com-tabs{ margin-bottom:14px; }
  .plant-com-toolbar{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:16px; }
  .plant-com-toolbar .side-search{ flex:1; min-width:180px; margin:0; }

  .plant-cat-chip{
    font-size:12px; font-weight:600; padding:7px 14px; border-radius:100px; cursor:pointer;
    border:1px solid transparent; color:hsl(var(--muted)); background:hsl(0 0% 100% / 0.04);
    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s var(--ease-spring);
    white-space:nowrap;
  }
  .plant-cat-chip:hover{ color:hsl(var(--text)); transform:translateY(-1px); }
  .plant-cat-chip:active{ transform:scale(0.94); transition-duration:.12s; }
  .plant-cat-chip.on{ background:hsl(var(--gold-2)/0.16); color:hsl(var(--gold-2)); border-color:hsl(var(--gold-2)/0.4); }
  .plant-cat-chip svg{ width:13px; height:13px; vertical-align:-2px; }

  .plant-com-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(225px, 1fr)); gap:18px; }

  /* Reusa .mt-card como base (mismo hover/press que Peces/Mascotas/Trabajos)
     — acá solo se agrega la estructura interna propia (portada+cuerpo).
     `contain:layout style` (2026-08-29, optimización): togglear un like o
     re-renderizar UNA tarjeta no obliga al navegador a recalcular layout del
     resto de la grilla — cada tarjeta queda aislada. No toca pintado/visual,
     así que el box-shadow del hover no se recorta. */
  .plant-com-card{ padding:0; overflow:hidden; cursor:default; text-align:left; display:block; contain:layout style; }
  .plant-com-cover{
    /* Pedido (2026-08-29) "muy ancho pero no tan alto": 4:3 en vez de 16:9
       le da más alto a la tarjeta sin tocar el ancho de la grilla. */
    width:100%; aspect-ratio:4/3; background-size:cover; background-position:center;
    display:flex; align-items:center; justify-content:center; font-size:38px; position:relative;
    background-color:transparent; background-image:linear-gradient(135deg, hsl(var(--gold-2)/0.25), hsl(var(--apple-2)/0.18));
  }
  /* La foto es un <img loading="lazy"> real (no background-image) — así el
     navegador solo la baja cuando la tarjeta está por entrar en pantalla,
     en vez de bajar TODAS las fotos de la galería de una. El degradé de
     fondo de .plant-com-cover queda debajo, se ve un instante mientras
     carga en vez de un hueco en blanco. */
  .plant-com-cover img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .plant-com-cover .plant-com-multi{
    position:absolute; bottom:8px; right:8px; font-size:12px; font-weight:700; color:#fff;
    background:hsl(0 0% 0% / 0.55); padding:2px 8px; border-radius:100px; backdrop-filter:blur(4px);
  }
  .plant-com-body{ padding:14px 14px 16px; }
  .plant-com-title{ font-size:13.5px; font-weight:700; margin-bottom:5px; }
  .plant-com-verif{ vertical-align:-3px; flex-shrink:0; display:inline-block; }
  /* Checkboxes de categoría al crear (2026-08-29) — pedido explícito "con
     check más fácil": reusa .plant-alcance-item tal cual (mismo checkbox
     dorado que ya usa el picker de secciones al clonar), solo en grilla de
     2 columnas en vez de una lista vertical de un solo ítem por fila. */
  .plant-com-cat-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:2px; }
  .plant-com-cat-check{ background:hsl(0 0% 100% / 0.03); }
  .plant-com-seleccionar-todo{
    background:none; border:none; cursor:pointer; font-size:12px; font-weight:700;
    color:hsl(var(--gold-2)); padding:2px; flex-shrink:0; transition:opacity .2s ease;
  }
  .plant-com-seleccionar-todo:hover{ opacity:.75; }
  .plant-com-seleccionar-todo:active{ opacity:.55; }
  .plant-com-cats{ display:flex; flex-wrap:wrap; gap:5px; margin-bottom:8px; }
  .plant-com-cat{ display:inline-block; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:hsl(var(--gold-2)); background:hsl(var(--gold-2)/0.12); padding:3px 9px; border-radius:100px; }
  .plant-com-cat svg{ width:10px; height:10px; vertical-align:-1px; }
  .plant-com-cat-check svg{ width:13px; height:13px; vertical-align:-2px; }
  .plant-com-desc{ font-size:12px; color:hsl(var(--muted)); line-height:1.5; margin-bottom:10px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  /* Vista de detalle (2026-08-29) — a diferencia de .plant-com-desc de la
     tarjeta (recortada a 2 líneas), acá la descripción va entera. */
  .plant-com-detalle-desc{ font-size:13.5px; color:hsl(var(--text)); line-height:1.6; margin-bottom:14px; white-space:pre-wrap; }
  /* Carrusel (2026-08-29) — una foto a la vez con flechas, en vez de todas
     apiladas. Cambiar de foto solo toca el src del <img> y el contador vía
     JS (_plantComMoverFoto), nunca re-renderiza el modal — así las flechas
     se sienten instantáneas. */
  .plant-com-carrusel{ position:relative; margin-bottom:16px; border-radius:14px; overflow:hidden; background:hsl(0 0% 100% / 0.03); }
  .plant-com-carrusel img{ width:100%; max-height:340px; object-fit:cover; display:block; }
  .plant-com-carrusel-btn{
    position:absolute; top:50%; transform:translateY(-50%); width:34px; height:34px; border-radius:50%;
    border:none; background:hsl(0 0% 0% / 0.5); color:#fff; font-size:18px; cursor:pointer;
    display:flex; align-items:center; justify-content:center; transition: background .2s ease, transform .15s var(--ease-spring);
  }
  .plant-com-carrusel-btn:hover{ background:hsl(0 0% 0% / 0.7); }
  .plant-com-carrusel-btn:active{ transform:translateY(-50%) scale(0.9); transition-duration:.12s; }
  .plant-com-carrusel-btn.izq{ left:10px; }
  .plant-com-carrusel-btn.der{ right:10px; }
  .plant-com-carrusel-cont{
    position:absolute; bottom:8px; right:10px; font-size:12px; font-weight:700; color:#fff;
    background:hsl(0 0% 0% / 0.55); padding:2px 8px; border-radius:100px; backdrop-filter:blur(4px);
  }
  .plant-com-detalle-meta{ display:flex; gap:18px; font-size:12.5px; color:hsl(var(--muted)); margin:14px 0; }
  .plant-com-detalle-comentarios{ border-top:1px solid hsl(0 0% 100% / 0.08); padding-top:16px; margin-top:4px; }
  .plant-com-comentarios-titulo{ display:block; font-size:12px; color:hsl(var(--muted)); text-transform:uppercase; letter-spacing:.5px; margin-bottom:8px; }
  .plant-com-autor{ display:flex; align-items:center; gap:6px; font-size:12px; color:hsl(var(--muted)); margin-bottom:10px; }
  .plant-com-aplicaciones{ margin-left:auto; font-size:12px; font-weight:700; color:hsl(var(--gold-2)); flex-shrink:0; }
  .plant-com-autor img{ width:16px; height:16px; border-radius:50%; object-fit:cover; }
  /* Footer en 2 filas: fila de acciones chicas (like/comentar/reportar) +
     "Aplicar" ocupando todo el ancho abajo — con 4 acciones ya no entraban
     cómodas en una sola fila de 230px sin apretarse. */
  .plant-com-foot{ display:flex; flex-direction:column; gap:10px; }
  .plant-com-acciones{ display:flex; align-items:center; justify-content:space-between; gap:4px; }

  .plant-com-like, .plant-com-comentar{
    display:flex; align-items:center; gap:5px; background:none; border:none; cursor:pointer;
    font-size:12.5px; font-weight:700; color:hsl(var(--muted)); padding:5px 6px; border-radius:8px;
    transition: color .2s ease, background .2s ease;
  }
  .plant-com-like:hover{ color:#ff6369; background:hsl(0 0% 100% / 0.05); }
  .plant-com-like.on{ color:#ff6369; }
  .plant-com-like .corazon{ display:inline-block; font-size:14px; transition:transform .3s var(--ease-spring); }
  .plant-com-like.bump .corazon{ transform:scale(1.4); }
  .plant-com-comentar:hover{ color:hsl(var(--text)); background:hsl(0 0% 100% / 0.05); }

  /* Modal de comentarios — filas planas, sin .glass anidado (mismo motivo
     que .plant-opt: .glass adentro de .mt-modal duplica el borde). */
  .plant-com-comentario{ display:flex; gap:10px; padding:12px 0; border-bottom:1px solid hsl(0 0% 100% / 0.06); }
  .plant-com-comentario:last-child{ border-bottom:none; }
  .plant-com-comentario img, .plant-com-comentario .sin-avatar{ width:28px; height:28px; border-radius:50%; flex-shrink:0; object-fit:cover; background:hsl(0 0% 100% / 0.08); }
  .plant-com-comentario-body{ flex:1; min-width:0; }
  /* Like/Responder en comentarios (2026-08-29) — .es-respuesta indenta la
     respuesta bajo su comentario raíz, sin volver a mostrar "Responder"
     ahí (un solo nivel, no se puede responder una respuesta). */
  .plant-com-comentario.es-respuesta{ margin-left:36px; margin-top:10px; }
  .plant-com-comentario-acciones{ display:flex; align-items:center; gap:14px; margin-top:6px; }
  .plant-com-comentario-like, .plant-com-comentario-responder{
    background:none; border:none; cursor:pointer; font-size:12px; font-weight:700;
    color:hsl(var(--muted)); padding:2px; display:flex; align-items:center; gap:4px;
  }
  .plant-com-comentario-like:hover{ color:#ff6369; }
  .plant-com-comentario-like.on{ color:#ff6369; }
  .plant-com-comentario-like .corazon{ font-size:12px; transition:transform .3s var(--ease-spring); }
  .plant-com-comentario-like.bump .corazon{ transform:scale(1.4); }
  .plant-com-comentario-responder:hover{ color:hsl(var(--text)); }
  .plant-com-comentario-head{ display:flex; align-items:baseline; gap:8px; margin-bottom:3px; }
  .plant-com-comentario-head b{ font-size:12.5px; }
  .plant-com-comentario-head span{ font-size:12px; color:hsl(var(--muted)); }
  .plant-com-comentario-txt{ font-size:12.5px; line-height:1.5; color:hsl(var(--text)); word-wrap:break-word; }

  .plant-com-reportar{ background:none; border:none; color:hsl(var(--muted)); opacity:.45; cursor:pointer; font-size:13px; padding:5px; transition:opacity .2s ease, transform .15s var(--ease-spring); }
  .plant-com-reportar:hover{ opacity:1; color:#ff6369; }
  .plant-com-reportar:active{ transform:scale(0.9); }

  .plant-com-aplicar{ font-size:12px; padding:7px 12px; }

  /* Skeleton — mismo tamaño exacto que la tarjeta real, sin layout shift */
  .plant-com-skel-line{ height:11px; border-radius:6px; background:hsl(0 0% 100% / 0.06); margin:14px 14px 0; animation:plantSkelPulse 1.4s ease-in-out infinite; }
  .plant-com-skel-line.corta{ width:50%; margin-bottom:14px; }
  .plant-com-skel .plant-com-cover{ background-image:none; background-color:hsl(0 0% 100% / 0.05); animation:plantSkelPulse 1.4s ease-in-out infinite; }
  @keyframes plantSkelPulse{ 0%,100%{ opacity:.5; } 50%{ opacity:1; } }

  /* Chips removibles del wizard de crear (emojis/imágenes elegidas) */
  .plant-com-taglist{ display:flex; flex-wrap:wrap; gap:8px; margin:8px 0; }
  .plant-com-tag{ display:flex; align-items:center; gap:6px; background:hsl(var(--gold-2)/0.1); border:1px solid hsl(var(--gold-2)/0.3); color:hsl(var(--gold-2)); padding:6px 8px 6px 12px; border-radius:100px; font-size:14px; opacity:0; animation:cardPopIn .3s var(--ease-spring) both; }
  .plant-com-tag button{ background:none; border:none; color:inherit; cursor:pointer; font-size:12px; opacity:.7; line-height:1; padding:2px; }
  .plant-com-tag button:hover{ opacity:1; }
  .plant-com-tag.img{ padding:4px; gap:0; }
  .plant-com-tag.img img{ width:30px; height:30px; object-fit:cover; border-radius:8px; }
  .plant-com-tag.img button{ padding:0 8px; }

  /* AutoMod / Moderación / AutoNicks */
  .am-card{ padding:20px 22px; margin-bottom:14px; transition: transform .3s var(--ease-spring), box-shadow .3s var(--ease-smooth), border-color .3s ease, filter .3s var(--ease-smooth); }
  /* El glow dorado va en `filter: drop-shadow`, no en box-shadow (2026-09-07,
     corrección real: "se corta" al pasar el mouse) — .glass (la clase con la
     que .am-card siempre se combina) tiene `overflow:hidden` propio para el
     truco del borde en degradé (.glass::before), y eso recorta cualquier
     box-shadow del MISMO elemento en el borde recto — drop-shadow no se
     recorta porque no es parte del box-shadow normal, pinta afuera de la
     silueta ya renderizada. La sombra oscura de abajo se queda en box-shadow
     a propósito: recortada apenas no se nota (se funde con el fondo oscuro),
     migrarla también hubiera sido innecesario. */
  .am-card:hover{ transform:translateY(-8px) scale(1.02); border-color:hsl(var(--gold-2)/0.25) !important; box-shadow:0 20px 44px rgba(0,0,0,0.35); filter: drop-shadow(0 0 14px hsl(var(--gold-2)/0.2)); }
  .am-card:active{ transform:translateY(-1px) scale(0.99); transition-duration:.12s; }
  .am-card-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:14px; }
  .am-card-head b{ display:block; font-size:14.5px; margin-bottom:2px; }
  .am-card-head small{ display:block; font-size:12px; color:hsl(var(--muted)); line-height:1.5; }
  .am-card-body-off{ opacity:.45; pointer-events:none; filter:grayscale(.4); transition: opacity .3s ease, filter .3s ease; }

  /* Niveles — shell propio con pestañas (pedido 2026-08-24). */
  .nx-tab-head{
    display:flex; align-items:center; gap:10px; font-family:'Montserrat',sans-serif;
    font-size:19px; font-weight:800; margin:2px 0 18px; color:hsl(var(--text));
  }
  .nx-tab-em{ font-size:20px; line-height:1; }
  .nx-tab-master{
    margin-left:auto; font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:700;
    letter-spacing:.6px; text-transform:uppercase; padding:5px 10px; border-radius:9999px;
    background:hsl(0 0% 100% / 0.06); color:hsl(var(--muted)); border:1px solid hsl(0 0% 100% / 0.1);
    transition: background .25s ease, color .25s ease, border-color .25s ease;
  }
  .nx-tab-master.on{ background:hsl(145 65% 50% / 0.16); color:hsl(145 70% 68%); border-color:hsl(145 65% 50% / 0.3); }
  /* El contenido de cada pestaña se retoca al vuelo (blur breve) en vez de
     saltar directo — mismo truco que un crossfade: sin esto, cambiar de
     pestaña se siente como 2 páginas superpuestas en vez de una transición. */
  .nx-tab-body{ animation: nxFade .22s var(--ease-smooth); }
  @keyframes nxFade{ from{ opacity:0; filter:blur(3px); transform:translateY(4px); } to{ opacity:1; filter:blur(0); transform:translateY(0); } }
  .nx-hint{ display:block; color:hsl(var(--muted)); line-height:1.6; margin-top:4px; }
  .nx-row-list{ display:flex; flex-direction:column; gap:10px; margin-bottom:16px; }
  .nx-row{
    background:hsl(0 0% 100% / 0.04); border:1px solid hsl(0 0% 100% / 0.08); border-radius:14px;
    padding:12px 14px; display:flex; align-items:center; gap:14px; flex-wrap:wrap;
    transition: background .2s ease, border-color .2s ease;
  }
  .nx-row:hover{ background:hsl(0 0% 100% / 0.06); border-color:hsl(0 0% 100% / 0.14); }
  .nx-row-nivel{ max-width:130px; }
  .nx-row-rol{ min-width:120px; }
  .nx-row-del{ margin-left:auto; color:hsl(0 70% 65%); }
  .nx-row-add{
    background:hsl(0 0% 100% / 0.03); border:1px dashed hsl(0 0% 100% / 0.14); border-radius:14px;
    padding:12px 14px; display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  }
  .nx-row-add select{ max-width:220px; }
  .nx-empty{ color:hsl(var(--muted)); font-size:13px; }
  @media (max-width:760px){ .nx-fila-filtros{ grid-template-columns:1fr !important; } }

  /* Niveles — badge de nivel/XP en verde debajo de cada server-card
     (pedido explícito, capturas de Engauge). Vive dentro de .server-meta,
     se llena solo (async) después de pintar las tarjetas. */
  .server-nx-badge:empty{ display:none; }
  .server-nx-badge{ margin-top:6px; opacity:0; transition:opacity .35s ease; }
  .server-nx-badge.in{ opacity:1; }
  .nx-badge-top{ display:flex; justify-content:space-between; gap:8px; font-size:12px; font-weight:700; color:hsl(145 70% 68%); font-family:'JetBrains Mono',monospace; margin-bottom:3px; }
  .nx-badge-bar{ height:4px; border-radius:9999px; background:hsl(0 0% 100% / 0.08); overflow:hidden; }
  .nx-badge-bar-fill{ height:100%; width:100%; border-radius:inherit; transform-origin:left; transform:scaleX(0); background:linear-gradient(90deg, hsl(145 65% 45%), hsl(145 75% 60%)); transition:transform .6s var(--ease-spring); }

  /* Niveles — Inicio: tarjeta del usuario actual */
  .nx-yo-card{ display:flex; align-items:center; gap:16px; padding:20px; }
  .nx-yo-avatar{ width:56px; height:56px; border-radius:50%; flex-shrink:0; overflow:hidden; display:flex; align-items:center; justify-content:center; background:hsl(0 0% 100% / 0.08); font-weight:800; font-size:18px; border:2px solid hsl(145 65% 50% / 0.5); }
  .nx-yo-avatar img{ width:100%; height:100%; object-fit:cover; }
  .nx-yo-info{ flex:1; min-width:0; }
  .nx-yo-info > b{ font-size:15px; }
  .nx-yo-bar-row{ display:flex; justify-content:space-between; gap:10px; font-size:12px; color:hsl(var(--muted)); margin:6px 0 4px; }
  .nx-yo-bar{ height:7px; border-radius:9999px; background:hsl(0 0% 100% / 0.08); overflow:hidden; }
  .nx-yo-bar-fill{ height:100%; width:100%; border-radius:inherit; transform-origin:left; transform:scaleX(0); background:linear-gradient(90deg, hsl(145 65% 45%), hsl(145 75% 60%)); transition:transform .7s var(--ease-spring); }

  .nx-side-yo{ opacity:0; padding:12px; margin-bottom:14px; display:flex; align-items:center; gap:10px; transition:opacity .35s ease; }
  .nx-side-yo.in{ opacity:1; }
  /* Anillo de progreso (donut) alrededor del avatar — pedido explícito
     (2026-08-25): "barra circular en vez de lineal". El <svg> se rota
     -90deg para que arranque a las 12, no a las 3. stroke-dasharray/
     -dashoffset los calcula _animarAnillo() en JS (no hardcodeados en CSS)
     para no depender de que el radio nunca cambie. */
  .nx-side-yo-avatar-wrap{ position:relative; width:40px; height:40px; flex-shrink:0; }
  .nx-side-yo-ring{ position:absolute; inset:0; transform:rotate(-90deg); }
  .nx-side-yo-ring-track{ fill:none; stroke:hsl(0 0% 100% / 0.08); stroke-width:2.5; }
  .nx-side-yo-ring-fill{ fill:none; stroke:hsl(145 70% 55%); stroke-width:2.5; stroke-linecap:round; transition:stroke-dashoffset .6s var(--ease-spring); }
  .nx-side-yo-avatar{ position:absolute; inset:5px; border-radius:50%; overflow:hidden; display:flex; align-items:center; justify-content:center; background:hsl(0 0% 100% / 0.08); font-weight:800; font-size:12px; }
  .nx-side-yo-avatar img{ width:100%; height:100%; object-fit:cover; }
  .nx-side-yo-info{ flex:1; min-width:0; }
  .nx-side-yo-info > b{ display:block; font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .nx-side-yo-info > span{ display:block; font-size:12px; color:hsl(var(--muted)); margin:2px 0 4px; }
  .nx-yo-info small{ display:block; margin-top:6px; color:hsl(var(--muted)); }
  .home-top-card .nx-podio-ini{ width:56px; height:56px; border-radius:50%; margin:0 auto 8px; display:flex; align-items:center; justify-content:center; background:hsl(0 0% 100% / 0.08); font-weight:800; font-size:16px; }
  .home-top-card.pos-primero .nx-podio-ini{ width:72px; height:72px; border:3px solid hsl(45 90% 55%); font-size:20px; }
  .home-top-card.pos-segundo .nx-podio-ini{ border:3px solid hsl(30 55% 45%); }
  .home-top-card.pos-tercero .nx-podio-ini{ border:3px solid hsl(0 0% 75%); }

  /* Niveles — Clasificación: tabla + panel lateral */
  .nx-lb-grid{ display:grid; grid-template-columns:1fr 280px; gap:22px; align-items:start; }
  @media (max-width:860px){ .nx-lb-grid{ grid-template-columns:1fr; } }
  .nx-lb-lista{ display:flex; flex-direction:column; padding:6px; border-radius:16px; }
  @keyframes nxRowIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:translateY(0); } }
  .nx-lb-row{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; transition:background .2s ease; animation:nxRowIn .32s var(--ease-smooth) both; }
  .nx-lb-row:hover{ background:hsl(0 0% 100% / 0.05); }
  .nx-lb-pos{ width:26px; font-family:'JetBrains Mono',monospace; color:hsl(var(--muted)); font-size:12.5px; flex-shrink:0; }
  .nx-lb-row img, .nx-lb-ini{ width:28px; height:28px; border-radius:50%; object-fit:cover; flex-shrink:0; }
  .nx-lb-ini{ display:flex; align-items:center; justify-content:center; background:hsl(0 0% 100% / 0.08); font-size:12px; font-weight:800; }
  .nx-lb-nombre{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13.5px; }
  .nx-lb-stat{ font-size:12px; color:hsl(var(--muted)); flex-shrink:0; display:none; }
  @media (min-width:640px){ .nx-lb-stat{ display:inline; } }
  .nx-lb-nivel{ font-size:12px; font-weight:700; color:hsl(145 70% 68%); flex-shrink:0; }
  .nx-lb-xp{ font-family:'JetBrains Mono',monospace; font-size:12.5px; color:hsl(var(--gold-2)); flex-shrink:0; min-width:70px; text-align:right; }
  /* Gráfico de actividad (Inicio) — barra por día, altura = XP orgánico ese
     día. Sin eje/grilla (widget chico embebido, no un dashboard aparte);
     magnitud SOLO por altura, no por color, así que no hace falta ninguna
     rampa de color ni el validador de paleta. */
  @keyframes nxBarGrow{ from{ transform:scaleY(0); } to{ transform:scaleY(1); } }
  .nx-activity-bars{ display:flex; align-items:flex-end; gap:4px; height:90px; margin-top:14px; }
  .nx-activity-col{ flex:1; height:100%; display:flex; align-items:flex-end; }
  .nx-activity-bar{ width:100%; height:var(--h); min-height:3px; border-radius:4px 4px 2px 2px; background:hsl(var(--gold-2)/0.7); transform-origin:bottom; animation:nxBarGrow .5s var(--ease-smooth) both; transition:background .2s ease; }
  .nx-activity-col:hover .nx-activity-bar{ background:hsl(var(--gold-2)); }

  /* Tooltip instantáneo al pasar el mouse CERCA de una barra (2026-09-11,
     pedido explícito) — el `title` nativo del navegador tarda ~1s y solo
     dispara si el mouse está exacto arriba; esto cubre toda la columna y
     aparece al toque. 100% CSS, sin JS — mismo patrón `content:attr(...)`
     que ya se usa para otros tooltips del panel. Clase aparte de
     .nx-activity-col para no tocar los otros 3 gráficos que ya reusan esa
     clase (mensajes del server, XP de Home, XP de perfil de miembro). */
  .nx-tip-col{ position:relative; }
  .nx-tip-col::after{
    content: attr(data-tip);
    position:absolute; bottom:calc(100% + 8px); left:50%;
    transform:translateX(-50%) translateY(4px); pointer-events:none;
    background:hsl(230 22% 10% / 0.96); color:#fff; font-size:12px; font-weight:600;
    padding:6px 10px; border-radius:8px; white-space:nowrap; z-index:6;
    box-shadow:0 10px 24px rgba(0,0,0,0.4); opacity:0;
    transition:opacity .15s var(--ease-smooth), transform .15s var(--ease-smooth);
  }
  .nx-tip-col:hover::after{ opacity:1; transform:translateX(-50%) translateY(0); }
  .nx-activity-bar.nx-sin-dato{ background:hsl(0 0% 100% / 0.08); }
  .nx-tip-col:hover .nx-activity-bar.nx-sin-dato{ background:hsl(0 0% 100% / 0.14); }

  /* Analytics (server + perfil por miembro) — gráficos 100% CSS, sin
     librerías, reusando .nx-activity-bars donde alcanza (series/día-de-
     semana) y agregando acá solo lo que no existía: heatmap de horas,
     listas con barra horizontal, donut de proporción y skeleton de carga. */
  /* Íconos de Analytics — mismo trazo que .fc-icon-box de la landing
     (stroke 1.8, currentColor, round). Tamaño único inline, junto al
     texto, para no repetir el ancho en cada uso. */
  .an-ic{ display:inline-flex; vertical-align:-3px; flex-shrink:0; }
  .an-ic svg{ width:15px; height:15px; }
  .an-ic-sm svg{ width:12px; height:12px; }
  .an-ic-lg{ vertical-align:-6px; }
  .an-ic-lg svg{ width:22px; height:22px; }
  /* Rojo→verde para los gráficos de día-de-semana/horas del perfil de
     miembro — escala propia, separada de .nx-activity-bar (esa es dorada,
     la usan Home/Niveles, no se toca). */
  .an-rg-bars{ display:flex; align-items:flex-end; gap:6px; height:110px; margin-top:14px; }
  .an-rg-col{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; gap:5px; }
  .an-rg-n{ font-size:12px; font-family:'JetBrains Mono',monospace; color:hsl(var(--muted)); }
  .an-rg-bar{ width:100%; min-height:4px; border-radius:5px 5px 2px 2px; background:var(--c); transform-origin:bottom; animation:nxBarGrow .5s var(--ease-smooth) both; transition:transform .2s var(--ease-spring); }
  .an-rg-col:hover .an-rg-bar{ transform:scaleY(1.04); }
  .an-rg-label{ font-size:12px; color:hsl(var(--muted)); }
  @keyframes anBarGrowX{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
  .an-barlist{ display:flex; flex-direction:column; gap:9px; margin-top:10px; }
  .an-barlist-row{ display:grid; grid-template-columns:100px 1fr auto; align-items:center; gap:10px; font-size:12.5px; }
  .an-barlist-label{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:hsl(var(--muted)); }
  .an-barlist-track{ height:8px; border-radius:9999px; background:hsl(0 0% 100% / 0.08); overflow:hidden; }
  .an-barlist-fill{ height:100%; border-radius:inherit; background:linear-gradient(90deg, hsl(var(--gold-2)), hsl(var(--apple-2))); transform-origin:left; animation:anBarGrowX .6s var(--ease-smooth) both; }
  .an-barlist-n{ font-family:'JetBrains Mono',monospace; color:hsl(var(--gold-2)); font-size:12px; }
  .an-donut{ width:118px; height:118px; border-radius:50%; margin:6px auto 0; display:flex; align-items:center; justify-content:center; position:relative; transition:transform .3s var(--ease-spring); }
  .an-donut:hover{ transform:scale(1.06); }
  .an-donut::after{ content:''; position:absolute; inset:15px; border-radius:50%; background:hsl(var(--surface)); }
  .an-donut-label{ position:relative; z-index:1; font-family:'JetBrains Mono',monospace; font-size:12.5px; font-weight:700; text-align:center; line-height:1.3; }
  .an-delta-up{ color:hsl(145 65% 55%); }
  .an-delta-down{ color:hsl(var(--apple-2)); }
  .an-skel{ height:72px; border-radius:var(--glass-radius); background:linear-gradient(100deg, hsl(0 0% 100% / 0.03) 30%, hsl(0 0% 100% / 0.08) 50%, hsl(0 0% 100% / 0.03) 70%); background-size:200% 100%; animation:anShimmer 1.4s ease-in-out infinite; }
  @keyframes anShimmer{ from{ background-position:200% 0; } to{ background-position:-200% 0; } }
  .an-member-row{ display:flex; align-items:center; gap:12px; padding:10px 14px; border-radius:12px; cursor:pointer; transition: background .22s ease, transform .25s var(--ease-spring), box-shadow .25s var(--ease-smooth); }
  .an-member-row:hover{ background:hsl(0 0% 100% / 0.05); transform:translateX(4px); box-shadow:0 8px 20px rgba(0,0,0,0.25); }
  .an-member-row:active{ transform:translateX(2px) scale(0.99); transition-duration:.12s; }
  .an-member-row img{ width:32px; height:32px; border-radius:50%; border:1.5px solid hsl(0 0% 100% / 0.12); flex-shrink:0; }
  .an-member-rank{ width:22px; flex-shrink:0; text-align:center; font-family:'JetBrains Mono',monospace; font-size:12px; color:hsl(var(--muted)); }
  .an-member-name{ flex:1; font-size:13.5px; font-weight:600; }
  .an-member-meta{ font-size:12px; color:hsl(var(--muted)); font-family:'JetBrains Mono',monospace; }
  .an-search{ width:100%; padding:12px 16px; border-radius:9999px; background:hsl(0 0% 100% / 0.05); border:1px solid hsl(0 0% 100% / 0.1); color:hsl(var(--text)); font-size:13.5px; font-family:inherit; margin-bottom:16px; transition:border-color .2s ease, background .2s ease; }
  .an-search:focus{ outline:none; border-color:hsl(var(--gold-2)/0.5); background:hsl(0 0% 100% / 0.07); }
  .an-back{ background:none; border:none; color:hsl(var(--muted)); font-size:13px; cursor:pointer; margin-bottom:14px; font-family:inherit; display:flex; align-items:center; gap:6px; transition:color .2s ease, transform .2s var(--ease-spring); padding:0; }
  .an-back:hover{ color:hsl(var(--text)); transform:translateX(-3px); }
  .an-perm-chip{ display:inline-flex; align-items:center; padding:4px 10px; border-radius:9999px; font-size:12px; font-weight:600; margin:3px 3px 0 0; }
  .an-perm-chip.rol{ background:hsl(0 0% 100% / 0.06); color:hsl(var(--text)); }
  .an-perm-chip.peligroso{ background:hsl(var(--apple-2)/0.15); color:hsl(var(--apple-2)); }
  .an-profile-head{ display:flex; align-items:center; gap:20px; padding:24px 26px; margin-bottom:20px; position:relative; overflow:hidden; }
  .an-profile-head::after{
    content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
    background: radial-gradient(480px 160px at 0% 0%, hsl(var(--an-acento, var(--gold-2)) / 0.16), transparent 70%);
    opacity:.9;
  }
  .an-profile-head > *{ position:relative; z-index:1; }
  .an-profile-head img{ width:76px; height:76px; border-radius:50%; border:3px solid hsl(var(--an-acento, var(--gold-2))); flex-shrink:0; box-shadow:0 6px 20px rgba(0,0,0,0.35); transition:transform .4s var(--ease-spring); }
  .an-profile-head:hover img{ transform:scale(1.04) rotate(-1deg); }
  .an-profile-head h3{ margin:0 0 5px; font-size:19px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .an-profile-head .an-member-meta{ font-size:12.5px; }
  .an-trust-badge{
    display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:9999px; font-size:12px; font-weight:700;
    background:hsl(145 55% 45% / 0.15); color:hsl(145 65% 62%); border:1px solid hsl(145 55% 45% / 0.3); vertical-align:middle;
  }
  .an-sancion-activa{ background:hsl(var(--apple-2)/0.14) !important; border-color:hsl(var(--apple-2)/0.35) !important; border-radius:10px; padding:8px 10px; margin:-8px -10px; }
  .an-sancion-activa-badge{ display:inline-block; padding:2px 8px; border-radius:9999px; background:hsl(var(--apple-2)/0.85); color:#fff; font-size:12px; font-weight:800; letter-spacing:.04em; margin-left:6px; vertical-align:middle; }
  /* Exportar perfil — #anPrintArea vive oculto siempre; @media print lo
     muestra y esconde TODO lo demás. Los tokens de color se redefinen
     adentro de #anPrintArea porque el resto del CSS asume fondo OSCURO
     (texto casi blanco), invisible sobre el blanco forzado del papel. */
  #anPrintArea{ display:none; }
  /* .glass/.am-card usan .reveal (animación de entrada) activada por un
     IntersectionObserver que solo mira adentro de #secFields —
     #anPrintArea cuelga de document.body, afuera de ahí, así que sus
     .reveal nunca se observan y quedan en opacity:0. No depender del
     observer acá, forzar visible siempre. */
  #anPrintArea .reveal{ opacity:1 !important; transform:none !important; }
  @media print{
    /* :has() hace que esconder el resto del panel SOLO pase cuando
       #anPrintArea tiene contenido real — imprimir (Ctrl+P) sin haber
       tocado "Exportar" antes imprime la pantalla tal cual, no una hoja
       en blanco. */
    body:has(#anPrintArea:not(:empty)) > *:not(#anPrintArea){ display:none !important; }
    body:has(#anPrintArea:not(:empty)), html:has(#anPrintArea:not(:empty)){ background:#fff !important; margin:0; }
    #anPrintArea:not(:empty){
      display:block; padding:24px; background:#fff;
      --text: 0 0% 8%; --muted: 0 0% 38%; --surface: 0 0% 100%;
      --gold-2: 32 75% 38%; --apple-2: 5 65% 42%; --leaf: 145 55% 30%;
      color:hsl(var(--text));
    }
    #anPrintArea .glass, #anPrintArea .glass::before{ background:#fff !important; border:1px solid #ddd !important; backdrop-filter:none !important; box-shadow:none !important; }
    #anPrintArea .glass{ break-inside:avoid; margin-bottom:14px; }
    #anPrintArea .an-donut::after{ background:#fff !important; }
    #anPrintArea .an-delta-up{ color:hsl(145 55% 30%) !important; }
    #anPrintArea .an-delta-down{ color:hsl(5 65% 42%) !important; }
  }

  /* Cola de revisión anti-farm (Log) — acento ámbar (nunca rojo/crítico:
     esto es una ALERTA para mirar a mano, no un error ni un bloqueo) sobre
     la misma base .glass de siempre. Colapsable, con chevron que rota. */
  .nx-sosp-card{ border-color:hsl(38 90% 55% / 0.35) !important; padding:16px 18px; margin-bottom:18px; }
  .nx-sosp-head{ display:flex; align-items:center; justify-content:space-between; cursor:pointer; user-select:none; }
  .nx-sosp-head b{ color:hsl(38 92% 65%); }
  .nx-sosp-chevron{ display:inline-block; color:hsl(38 92% 65%); transition:transform .25s var(--ease-smooth); }
  .nx-sosp-open .nx-sosp-chevron{ transform:rotate(180deg); }
  .nx-sosp-lista{ display:flex; flex-direction:column; gap:2px; margin-top:4px; animation:nxFade .28s var(--ease-smooth) both; }
  .nx-sosp-row{ display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:12px; transition:background .2s ease; animation:nxRowIn .32s var(--ease-smooth) both; }
  .nx-sosp-row:hover{ background:hsl(38 90% 55% / 0.07); }
  .nx-sosp-row img, .nx-sosp-row .nx-lb-ini{ width:28px; height:28px; border-radius:50%; object-fit:cover; flex-shrink:0; }
  .nx-sosp-badge{ font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:700; color:hsl(38 92% 65%); flex-shrink:0; }
  .nx-log-user-chip{ display:flex; align-items:center; gap:10px; font-size:13px; margin-bottom:14px; padding:8px 4px; }

  /* Log de Niveles (2026-09-21): filtros combinables, ficha por usuario, alertas, editores de crate */
  .nx-lf{ padding:16px 18px; margin-bottom:16px; display:flex; flex-direction:column; gap:12px; }
  .nx-lf-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:10px; }
  .nx-lf-grid label{ display:block; font-size:12px; color:hsl(var(--muted)); margin-bottom:5px; letter-spacing:.2px; }
  .nx-lf-grid .inp{ width:100%; }
  .nx-lf-sug-wrap{ position:relative; }
  .nx-lf-sug{ position:absolute; z-index:30; left:0; right:0; top:100%; margin-top:4px; max-height:240px; overflow-y:auto; padding:6px; border-radius:12px; background:hsl(240 8% 11%); border:1px solid hsl(0 0% 100% / 0.14); box-shadow:0 14px 34px hsl(0 0% 0% / 0.55); animation:nxFade .18s var(--ease-smooth) both; }
  .nx-lf-sug[hidden]{ display:none; }
  .nx-lf-sug button{ display:flex; align-items:center; gap:8px; width:100%; padding:7px 9px; border:0; background:transparent; color:inherit; border-radius:8px; cursor:pointer; text-align:left; font-size:13px; transition:background .15s ease; }
  .nx-lf-sug button:hover, .nx-lf-sug button:focus-visible{ background:hsl(0 0% 100% / 0.08); outline:none; }
  .nx-lf-sug img, .nx-lf-sug .nx-lf-ini{ width:24px; height:24px; border-radius:50%; object-fit:cover; flex-shrink:0; }
  .nx-lf-sug small{ margin-left:auto; color:hsl(var(--muted)); font-family:'JetBrains Mono',monospace; font-size:12px; }
  .nx-lf-tipos{ display:flex; flex-wrap:wrap; gap:6px; }
  .nx-lf-activos{ display:flex; flex-wrap:wrap; gap:8px; }
  .nx-lf-activos:empty{ display:none; }
  .nx-lf-chip{ display:inline-flex; align-items:center; gap:6px; padding:4px 6px 4px 11px; border-radius:9999px; font-size:12px; background:hsl(var(--gold-2) / 0.12); border:1px solid hsl(var(--gold-2) / 0.32); }
  .nx-lf-chip button{ width:20px; height:20px; border-radius:50%; border:0; cursor:pointer; background:hsl(0 0% 100% / 0.1); color:inherit; font-size:12px; transition:transform .2s var(--ease-spring), background .2s ease; }
  .nx-lf-chip button:hover{ background:hsl(0 70% 58% / 0.3); transform:scale(1.12); }
  .nx-lf-tag{ display:inline-block; font-size:12px; padding:2px 8px; border-radius:9999px; background:hsl(0 0% 100% / 0.07); color:hsl(var(--muted)); cursor:pointer; margin-left:5px; border:0; transition:background .18s ease, color .18s ease; }
  .nx-lf-tag:hover{ background:hsl(var(--gold-2) / 0.2); color:hsl(var(--gold-2)); }
  .nx-lf-quien{ background:none; border:0; padding:0; color:inherit; font:inherit; font-weight:700; cursor:pointer; text-decoration:underline; text-decoration-color:hsl(0 0% 100% / 0.25); text-underline-offset:3px; }
  .nx-lf-quien:hover{ text-decoration-color:hsl(var(--gold-2)); color:hsl(var(--gold-2)); }
  .nx-alerta-badge{ font-size:12px; font-weight:700; color:hsl(0 72% 68%); flex-shrink:0; }

  /* Log de Niveles — rediseño (2026-09-21): íconos propios (ICON_*) en vez de emojis, chips por tipo con su color, filas con badge */
  .nx-ic{ display:inline-flex; width:16px; height:16px; flex-shrink:0; }
  .nx-ic svg{ width:100%; height:100%; }
  .nx-lf{ position:relative; overflow:visible; }
  .nx-lf-head{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
  .nx-lf-titulo{ display:flex; align-items:center; gap:10px; font-weight:700; font-size:16px; }
  .nx-lf-titulo .nx-lf-tic{ width:32px; height:32px; border-radius:11px; display:inline-flex; align-items:center; justify-content:center; background:hsl(var(--gold-2) / 0.14); color:hsl(var(--gold-2)); }
  .nx-lf-titulo .nx-lf-tic .nx-ic{ width:17px; height:17px; }
  .nx-lf-acciones{ margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
  .nx-lf-count{ font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:700; padding:5px 12px; border-radius:9999px; background:hsl(var(--gold-2) / 0.12); color:hsl(var(--gold-2)); border:1px solid hsl(var(--gold-2) / 0.25); }
  .nx-btn-ic{ display:inline-flex; align-items:center; gap:7px; }
  .nx-btn-ic .nx-ic{ width:14px; height:14px; }
  .nx-lf-grid label{ display:flex; align-items:center; gap:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .nx-lf-grupos{ margin-top:12px; }
  .nx-sosp-card .nx-hint{ font-size:12.5px; line-height:1.55; }
  .nx-lf-grid label .nx-ic{ width:13px; height:13px; opacity:.8; color:hsl(var(--gold-2)); }
  .nx-lf-sep{ height:1px; background:linear-gradient(90deg, transparent, hsl(0 0% 100% / 0.1), transparent); margin:2px 0; }
  .nx-lf-grupos{ display:flex; flex-direction:column; gap:12px; }
  .nx-grupo-t{ font-size:12px; letter-spacing:1px; text-transform:uppercase; color:hsl(var(--muted)); display:flex; align-items:center; gap:10px; margin-bottom:7px; }
  .nx-grupo-t::after{ content:''; flex:1; height:1px; background:hsl(0 0% 100% / 0.07); }
  .nx-chips{ display:flex; flex-wrap:wrap; gap:7px; }
  .nx-tchip{ --c:0 0% 72%; display:inline-flex; align-items:center; gap:8px; padding:5px 13px 5px 6px; border-radius:9999px; border:1px solid hsl(0 0% 100% / 0.1); background:hsl(0 0% 100% / 0.03); color:hsl(var(--text)); font-size:12.5px; cursor:pointer;
    transition:transform .22s var(--ease-spring), background .2s ease, border-color .2s ease, box-shadow .25s ease; }
  .nx-tchip-ic{ display:inline-flex; width:22px; height:22px; border-radius:50%; align-items:center; justify-content:center; background:hsl(var(--c) / 0.16); color:hsl(var(--c)); transition:background .2s ease, color .2s ease, transform .25s var(--ease-spring); }
  .nx-tchip-ic .nx-ic{ width:12px; height:12px; }
  .nx-tchip:hover{ transform:translateY(-1px); border-color:hsl(var(--c) / 0.5); background:hsl(var(--c) / 0.08); }
  .nx-tchip:active{ transform:scale(0.96); transition-duration:.1s; }
  .nx-tchip:focus-visible{ outline:2px solid hsl(var(--c) / 0.7); outline-offset:2px; }
  .nx-tchip.on{ border-color:hsl(var(--c) / 0.75); background:hsl(var(--c) / 0.17); font-weight:600; box-shadow:0 0 0 3px hsl(var(--c) / 0.11), 0 8px 20px hsl(var(--c) / 0.16); }
  .nx-tchip.on .nx-tchip-ic{ background:hsl(var(--c)); color:hsl(240 12% 8%); transform:scale(1.06); }
  .nx-tchip-todos{ padding-right:15px; font-weight:600; }
  .nx-lf-chip{ gap:7px; }
  .nx-lf-chip .nx-ic{ width:13px; height:13px; color:hsl(var(--gold-2)); }
  .nx-lf-tag{ display:inline-flex; align-items:center; gap:5px; }
  .nx-lf-tag .nx-ic{ width:11px; height:11px; }

  .nx-ev{ align-items:flex-start; gap:13px; padding:11px 12px; }
  .nx-ev-av{ position:relative; flex-shrink:0; }
  .nx-ev-av img, .nx-ev-av .nx-lb-ini{ width:36px; height:36px; border-radius:50%; object-fit:cover; }
  .nx-ev-badge{ position:absolute; right:-5px; bottom:-5px; width:19px; height:19px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:hsl(var(--c)); color:hsl(240 12% 8%); border:2px solid hsl(240 8% 10%); }
  .nx-ev-badge .nx-ic{ width:10px; height:10px; }
  .nx-ev-main{ flex:1; min-width:0; line-height:1.55; font-size:13.5px; }
  .nx-ev-pill{ display:inline-flex; align-items:center; gap:5px; padding:2px 10px 2px 6px; border-radius:9999px; background:hsl(var(--c) / 0.14); color:hsl(var(--c)); font-size:12px; font-weight:600; margin:0 3px; vertical-align:1px; }
  .nx-ev-pill .nx-ic{ width:12px; height:12px; }
  .nx-ev-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; margin-top:3px; font-size:12px; color:hsl(var(--muted)); }
  .nx-ev-xp{ font-family:'JetBrains Mono',monospace; font-weight:700; font-size:12.5px; padding:5px 11px; border-radius:9999px; flex-shrink:0; align-self:center; white-space:nowrap; }
  .nx-ev-xp.pos{ background:hsl(145 65% 50% / 0.14); color:hsl(145 65% 60%); }
  .nx-ev-xp.neg{ background:hsl(0 78% 62% / 0.14); color:hsl(0 82% 70%); }
  .nx-ev-accion{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; flex-shrink:0; }
  .nx-ev-revertir{ display:inline-flex; align-items:center; gap:5px; padding:4px 10px; font-size:12px; border-radius:9999px; border:1px solid hsl(var(--stroke)/0.25); background:transparent; color:hsl(var(--muted)); cursor:pointer; transition:border-color .15s, color .15s, background .15s; white-space:nowrap; }
  .nx-ev-revertir .nx-ic{ width:11px; height:11px; }
  .nx-ev-revertir:hover{ color:hsl(var(--text)); border-color:hsl(var(--stroke)/0.5); }
  .nx-ev-revertir.armado{ color:#ff6b61; border-color:#ff6b61; background:hsl(0 78% 62% / 0.1); }
  .nx-ev-revertir:disabled{ opacity:.5; cursor:default; }
  .nx-ev-revertido{ display:inline-flex; align-items:center; gap:5px; font-size:12px; color:hsl(var(--muted)); white-space:nowrap; }
  .nx-ev-revertido .nx-ic{ width:11px; height:11px; }
  .nx-ev-dia{ display:flex; align-items:center; gap:10px; padding:12px 12px 4px; font-size:12px; font-weight:700; letter-spacing:.9px; text-transform:uppercase; color:hsl(var(--gold-2)); }
  .nx-ev-dia .nx-ic{ width:13px; height:13px; }
  .nx-ev-dia::after{ content:''; flex:1; height:1px; background:hsl(var(--gold-2) / 0.2); }
  .nx-ev-vacio{ display:flex; flex-direction:column; align-items:center; gap:10px; padding:44px 0; color:hsl(var(--muted)); text-align:center; }
  .nx-ev-vacio .nx-ic{ width:34px; height:34px; opacity:.55; }

  .nx-ficha-head{ display:flex; align-items:center; gap:14px; margin-bottom:12px; }
  .nx-ficha-head img, .nx-ficha-ini{ width:54px; height:54px; border-radius:50%; object-fit:cover; flex-shrink:0; }
  .nx-ficha-ini{ display:flex; align-items:center; justify-content:center; background:hsl(0 0% 100% / 0.1); font-weight:800; font-size:18px; }
  .nx-ficha-stats{ display:grid; grid-template-columns:repeat(auto-fit, minmax(118px, 1fr)); gap:8px; margin:12px 0; }
  .nx-ficha-stat{ padding:10px 12px; border-radius:12px; background:hsl(0 0% 100% / 0.05); }
  .nx-ficha-stat b{ display:block; font-size:17px; font-family:'JetBrains Mono',monospace; }
  .nx-ficha-stat span{ font-size:12px; color:hsl(var(--muted)); }
  .nx-bars{ display:flex; align-items:flex-end; gap:3px; height:98px; padding:8px 0 4px; }
  .nx-bar{ flex:1; min-width:3px; min-height:2px; border-radius:3px 3px 0 0; background:hsl(var(--gold-2) / 0.8); transform-origin:bottom; animation:nxBarIn .5s var(--ease-smooth) both; transition:background .15s ease; }
  .nx-bar:hover{ background:hsl(var(--gold-2)); }
  .nx-bar.cero{ background:hsl(0 0% 100% / 0.1); }
  @keyframes nxBarIn{ from{ transform:scaleY(0); } to{ transform:scaleY(1); } }
  .nx-ficha-lista{ display:flex; flex-direction:column; gap:4px; font-size:12.5px; }
  .nx-ficha-lista div{ display:flex; justify-content:space-between; gap:10px; padding:6px 8px; border-radius:8px; background:hsl(0 0% 100% / 0.035); }
  .nx-ficha-lista small{ color:hsl(var(--muted)); }
  .nx-alerta-caja{ margin:10px 0; padding:10px 12px; border-radius:12px; font-size:12.5px; background:hsl(38 90% 55% / 0.1); border:1px solid hsl(38 90% 55% / 0.35); }

  .mt-dup{ right:34px; }
  .mt-dup:hover{ background:hsl(var(--gold-2) / 0.25); color:hsl(var(--gold-2)); }
  .nx-crate-badges{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-top:6px; }
  .nx-badge-fallo{ background:hsl(0 70% 58% / 0.18) !important; color:hsl(0 80% 76%) !important; }
  .nx-fallo{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:11px 14px; border-radius:12px; border:1px solid hsl(0 70% 58% / 0.4); background:hsl(0 70% 58% / 0.08); font-size:13px; margin:8px 0; }
  .nx-fallo span{ flex:1; min-width:180px; }
  .nx-ed-lista{ display:flex; flex-direction:column; gap:6px; margin:8px 0; }
  .nx-ed-row{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:12px; background:hsl(0 0% 100% / 0.045); font-size:13px; animation:nxRowIn .28s var(--ease-smooth) both; }
  .nx-ed-row img, .nx-ed-row .nx-lb-ini{ width:28px; height:28px; border-radius:50%; object-fit:cover; flex-shrink:0; }
  .nx-ed-row .nx-ed-id{ margin-left:auto; color:hsl(var(--muted)); font-family:'JetBrains Mono',monospace; font-size:12px; }
  .nx-ed-row button{ width:24px; height:24px; border-radius:50%; border:0; cursor:pointer; background:hsl(0 0% 100% / 0.08); color:hsl(var(--muted)); font-size:12px; transition:transform .2s var(--ease-spring), background .2s ease; }
  .nx-ed-row button:hover{ background:hsl(0 70% 58% / 0.28); transform:scale(1.12); }
  .nx-bloq{ opacity:.6; }
  .nx-bloq .inp{ pointer-events:none; cursor:not-allowed; }
  .nx-bloq-tag{ display:inline-block; font-size:12px; margin-left:6px; padding:1px 7px; border-radius:9999px; background:hsl(0 0% 100% / 0.08); color:hsl(var(--muted)); }
  .nx-ed-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:8px; }
  .nx-ed-grid .nx-ficha-stat{ padding:9px 11px; }
  .nx-ed-grid .nx-ficha-stat b{ font-size:13.5px; word-break:break-word; }
  .nx-activity-labels{ display:flex; justify-content:space-between; margin-top:8px; font-size:12px; color:hsl(var(--muted)); }
  .nx-lb-side{ display:flex; flex-direction:column; gap:16px; }
  .nx-side-row{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:8px 6px; margin:0 -6px; border-radius:8px; border-bottom:1px solid hsl(0 0% 100% / 0.06); font-size:13px; transition:background .2s ease, transform .2s var(--ease-smooth); }
  .nx-side-row:last-child{ border-bottom:none; }
  .nx-side-row:hover{ background:hsl(0 0% 100% / 0.04); transform:translateX(4px); }

  /* Niveles — Roles: lista + editor de detalle */
  .nx-roles-grid{ display:grid; grid-template-columns:230px 1fr; gap:18px; align-items:start; }
  @media (max-width:760px){ .nx-roles-grid{ grid-template-columns:1fr; } }
  .nx-roles-lista{ display:flex; flex-direction:column; gap:4px; padding:10px; max-height:520px; overflow-y:auto; }
  .nx-role-item{
    display:flex; align-items:center; gap:9px; padding:10px 12px; border-radius:12px; border:1px solid transparent;
    background:transparent; color:hsl(var(--text)); font-size:13.5px; cursor:pointer; text-align:left; width:100%;
    transition: background .2s ease, border-color .2s ease, transform .16s var(--ease-smooth);
    animation:nxRowIn .32s var(--ease-smooth) both;
  }
  .nx-role-item:hover{ background:hsl(0 0% 100% / 0.05); }
  .nx-role-item:active{ transform:scale(0.98); transition-duration:.1s; }
  .nx-role-item.on{ background:hsl(var(--gold)/0.1); border-color:hsl(var(--gold-2)/0.3); }
  .nx-role-dot{ width:10px; height:10px; border-radius:50%; flex-shrink:0; }
  .nx-role-name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .nx-role-tag{ font-size:12px; opacity:.85; flex-shrink:0; }
  .nx-nivel-tag{
    display:inline-flex; align-items:center; font-family:'JetBrains Mono',monospace; font-weight:800;
    font-size:12px; letter-spacing:.3px; padding:4px 9px; border-radius:9999px; color:#0a0a0d; flex-shrink:0;
  }
  .nx-nivel-tag-sm{ font-size:12px; padding:3px 7px; }

  /* Crates — acento del color propio de cada crate, no genérico */
  .nx-crate-card{ overflow:hidden; }
  .nx-crate-card::after{
    content:''; position:absolute; top:0; left:0; right:0; height:3px;
    background:var(--nx-crate-color, hsl(var(--gold-2))); border-radius:inherit inherit 0 0;
  }
  .nx-crate-icon{ border:1.5px solid transparent; transition: background .2s ease, border-color .2s ease; }
  .nx-roles-detalle{ padding:22px; min-height:340px; }
  .nx-role-detalle-head{ display:flex; align-items:center; gap:10px; font-size:16px; margin-bottom:18px; }
  .nx-role-detalle-head .nx-role-dot{ width:13px; height:13px; }
  .nx-radio-group{ display:flex; flex-direction:column; gap:8px; }
  .nx-radio{ display:flex; align-items:center; gap:10px; font-size:13.5px; cursor:pointer; color:hsl(var(--muted)); }
  .nx-radio input{ accent-color:hsl(var(--gold-2)); width:16px; height:16px; flex-shrink:0; }
  .nx-radio:has(input:checked){ color:hsl(var(--text)); }

  /* Niveles — Crates: swatches de color en el modal */
  .nx-color-row{ display:flex; flex-wrap:wrap; gap:8px; }
  .nx-color-swatch{
    width:28px; height:28px; border-radius:50%; border:2px solid transparent; cursor:pointer; padding:0;
    transition: transform .2s var(--ease-spring), border-color .2s ease;
  }
  .nx-color-swatch:hover{ transform:scale(1.12); }
  .nx-color-swatch.on{ border-color:#fff; transform:scale(1.12); }

  /* Level formulas — vista de detalle aparte (botón "Level formulas" en la
     tarjeta chica de General te trae acá) */
  .nx-formulas-head{ display:grid; grid-template-columns:auto 1fr auto; align-items:start; gap:18px; margin-bottom:22px; }
  .nx-formulas-titulo b{ font-size:19px; font-family:'Montserrat',sans-serif; display:block; margin-bottom:6px; }
  .nx-formulas-titulo p{ font-size:13px; color:hsl(var(--muted)); line-height:1.6; margin-bottom:6px; max-width:640px; }
  @media (max-width:760px){ .nx-formulas-head{ grid-template-columns:1fr; } }
  .nx-formulas-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:16px; }
  .nx-formula-detail{
    position:relative; display:block; padding:18px; border-radius:18px;
    background:hsl(0 0% 100% / 0.03); border:1px solid transparent;
    transition: background .2s ease, border-color .2s ease;
    animation: cardPopIn .4s var(--ease-spring) both;
  }
  .nx-formula-detail.on{ border-color:hsl(var(--gold-2)/0.4); background:hsl(var(--gold)/0.06); }
  .nx-formula-detail-head{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
  .nx-formula-detail-head b{ font-size:15px; }
  .nx-formula-badge{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; padding:3px 9px; border-radius:9999px; background:hsl(145 65% 50% / 0.18); color:hsl(145 70% 68%); }
  .nx-formula-box{
    background:hsl(0 0% 0% / 0.25); border-radius:12px; padding:14px 16px; margin-bottom:12px;
    font-family:'JetBrains Mono',monospace; font-size:13px; line-height:1.7; color:hsl(var(--gold-2));
  }
  .nx-formula-detail p{ font-size:12.5px; color:hsl(var(--muted)); line-height:1.6; }
  .nx-formula-chart{ background:hsl(0 0% 0% / 0.25); border-radius:12px; padding:10px 12px 6px; margin-bottom:12px; }
  .nx-formula-curva{ display:block; width:100%; height:56px; animation: nxCurvaGrow .6s var(--ease-smooth) both; }
  @keyframes nxCurvaGrow{ from{ clip-path:inset(0 100% 0 0); } to{ clip-path:inset(0 0% 0 0); } }
  .nx-formula-chart-eje{ display:flex; justify-content:space-between; margin-top:2px; font-size:12px; color:hsl(var(--muted)); }

  /* Selector compacto de fórmula en la tarjeta chica de General — la
     versión con la fórmula matemática y el párrafo largo vive en la vista
     "Level formulas" aparte, esto es solo para ELEGIR. */
  .nx-formula-pills{ display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 10px; }
  .nx-formula-pill{
    padding:7px 14px; border-radius:9999px; font-size:12.5px; font-weight:600; cursor:pointer;
    background:hsl(0 0% 100% / 0.05); border:1px solid transparent; color:hsl(var(--muted));
    transition: background .2s ease, border-color .2s ease, color .2s ease, transform .16s var(--ease-smooth);
  }
  .nx-formula-pill:hover{ background:hsl(0 0% 100% / 0.09); color:hsl(var(--text)); }
  .nx-formula-pill:active{ transform:scale(0.94); transition-duration:.1s; }
  .nx-formula-pill.on{ background:hsl(var(--gold)/0.16); border-color:hsl(var(--gold-2)/0.4); color:hsl(var(--text)); }

  /* Vista previa del embed de subida de nivel */
  .nx-preview-label{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:hsl(var(--muted)); margin:16px 0 8px; }
  .nx-preview-bubble{
    border-left:3px solid hsl(145 65% 50%); background:hsl(0 0% 100% / 0.04); border-radius:0 12px 12px 0;
    padding:12px 14px; font-size:13px; line-height:1.6;
  }
  .nx-preview-title{ font-weight:800; margin-bottom:6px; }
  .nx-preview-desc code{ background:hsl(0 0% 100% / 0.08); padding:1px 6px; border-radius:6px; font-family:'JetBrains Mono',monospace; font-size:12px; }

  /* Simulación — mandar el aviso de prueba a un canal */
  .nx-sim-panel{ margin-top:18px; padding-top:16px; border-top:1px dashed hsl(0 0% 100% / 0.1); }
  .nx-sim-btn:disabled:not(.loading){ opacity:0.4; cursor:not-allowed; transform:none !important; box-shadow:none !important; }
  .nx-sim-btn.loading{ animation:pulse 1s ease-in-out infinite; cursor:default; }
  .nx-sim-resultado{
    margin-top:10px; font-size:13px; line-height:1.5; padding:10px 12px; border-radius:10px;
    animation:nxFade .3s var(--ease-smooth) both;
  }
  .nx-sim-resultado.ok{ background:hsl(145 65% 50% / 0.12); color:hsl(145 70% 72%); }
  .nx-sim-resultado.error{ background:hsl(0 70% 55% / 0.12); color:#ff8a8a; }

  .nx-evento-activo{
    background:hsl(var(--gold)/0.12); border:1px solid hsl(var(--gold-2)/0.35); border-radius:12px;
    padding:10px 14px; font-size:13px; margin-bottom:10px;
  }
  .nx-cmd-list{ display:flex; flex-direction:column; gap:6px; margin-top:8px; }
  .nx-cmd-list code{
    background:hsl(0 0% 100% / 0.06); padding:6px 10px; border-radius:8px; font-family:'JetBrains Mono',monospace;
    font-size:12px; width:fit-content;
  }

  /* Niveles — Calculadora de XP */
  .nx-calc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px; }
  .nx-calc-campo{
    display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:14px;
    background:hsl(0 0% 100% / 0.04); border:1px solid transparent; transition: background .2s ease, border-color .2s ease;
  }
  .nx-calc-campo.locked{ background:hsl(var(--gold)/0.1); border-color:hsl(var(--gold-2)/0.35); }
  .nx-calc-lock{ background:none; border:none; cursor:pointer; font-size:16px; padding:4px; flex-shrink:0; transition:transform .16s var(--ease-smooth); }
  .nx-calc-lock svg{ width:15px; height:15px; }
  .nx-calc-lock:active{ transform:scale(0.85); }
  .nx-calc-campo-info{ flex:1; min-width:0; }
  .nx-calc-campo-info label{ display:block; font-size:12px; color:hsl(var(--muted)); margin-bottom:4px; }
  .nx-calc-campo-info input{ padding:6px 8px; font-size:14px; }
  .am-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
  .am-chip{
    display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; padding:5px 8px 5px 12px;
    border-radius:9999px; background:hsl(0 0% 100% / 0.06); border:1px solid transparent;
    transition: transform .2s var(--ease-spring), background .2s ease;
  }
  .am-chip:hover{ background:hsl(0 0% 100% / 0.1); transform:translateY(-1px); }
  .am-chip b{ cursor:pointer; font-weight:400; color:hsl(var(--muted)); width:16px; height:16px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; transition: background .2s ease, color .2s ease, transform .15s var(--ease-spring); }
  .am-chip b:hover{ background:rgba(229,72,77,0.25); color:#ff6369; transform:scale(1.15); }
  .am-chip b:active{ transform:scale(0.9); }
  .am-sug-row{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:12px 14px; border-radius:14px; background:hsl(0 0% 100% / 0.04); border:1px solid transparent;
    margin-bottom:8px; animation: cardPopIn .4s var(--ease-spring) both;
    transition: transform .2s var(--ease-spring), background .2s ease, opacity .25s ease;
  }
  .am-sug-row:hover{ background:hsl(0 0% 100% / 0.07); }
  .am-sug-row.leaving{ opacity:0; transform:scale(0.92) translateX(8px); }
  .am-sug-row b{ font-size:14px; }
  .am-sug-row small{ display:block; color:hsl(var(--muted)); font-size:12px; margin-top:2px; }
  .am-sug-actions{ display:flex; gap:8px; flex-shrink:0; }

  /* Automatizaciones — simulador (chips de rol/día toggleables), recetas
     (tarjetas pre-armadas) e historial de auditoría. Reusa .seg-tabs/
     .am-chips/cardPopIn — cero patrón visual nuevo, solo tokens que ya
     existen aplicados a piezas nuevas. */
  .auto-toggle-chip{
    display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:9999px;
    background:hsl(0 0% 100% / 0.05); border:1px solid transparent; color:hsl(var(--muted));
    font-size:12.5px; font-weight:700; cursor:pointer;
    transition: background .2s var(--ease-smooth), color .2s ease, transform .15s var(--ease-spring);
  }
  .auto-toggle-chip:hover{ background:hsl(0 0% 100% / 0.09); color:hsl(var(--text)); }
  .auto-toggle-chip:active{ transform:scale(0.95); }
  .auto-toggle-chip.on{ background:hsl(var(--gold-2)); color:#0a0a0d; box-shadow:0 4px 14px hsl(var(--gold-2)/0.3); }
  .auto-dias-row{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
  .auto-dia-chip{
    width:38px; height:38px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
    font-size:12px; font-weight:800; background:hsl(0 0% 100% / 0.05); color:hsl(var(--muted));
    border:1px solid transparent; cursor:pointer;
    transition: background .2s var(--ease-smooth), color .2s ease, transform .15s var(--ease-spring);
  }
  .auto-dia-chip:hover{ background:hsl(0 0% 100% / 0.09); color:hsl(var(--text)); }
  .auto-dia-chip:active{ transform:scale(0.88); }
  .auto-dia-chip.on{ background:hsl(var(--gold-2)); color:#0a0a0d; }
  .auto-receta-card{
    display:flex; align-items:flex-start; gap:12px; padding:14px 16px; border-radius:16px;
    background:hsl(0 0% 100% / 0.035); cursor:pointer; margin-bottom:8px;
    transition: transform .2s var(--ease-spring), background .2s var(--ease-smooth);
    animation: cardPopIn .35s var(--ease-smooth) both;
  }
  .auto-receta-card:hover{ background:hsl(0 0% 100% / 0.065); transform:translateY(-2px); }
  .auto-receta-card:active{ transform:scale(0.98); }
  .auto-receta-icono{ font-size:22px; flex-shrink:0; line-height:1.3; }
  .auto-receta-icono svg{ width:22px; height:22px; }
  .auto-receta-info{ flex:1; min-width:0; }
  .auto-receta-info b{ display:block; font-size:14px; margin-bottom:3px; }
  .auto-receta-info small{ display:block; color:hsl(var(--muted)); font-size:12px; line-height:1.5; }
  .auto-sim-cond-row{
    display:flex; align-items:center; gap:8px; padding:9px 12px; border-radius:12px;
    background:hsl(0 0% 100% / 0.03); margin-bottom:6px; font-size:12.5px; line-height:1.4;
    animation: cardPopIn .3s var(--ease-smooth) both;
  }
  .auto-sim-cond-row .auto-sim-icono{ flex-shrink:0; font-size:14px; }
  .auto-sim-cond-row.ok{ color:#30d158; }
  .auto-sim-cond-row.fail{ color:#ff6369; }
  .auto-sim-accion-row{
    padding:10px 13px; border-radius:12px; background:hsl(var(--gold-2)/0.08);
    border:1px solid hsl(var(--gold-2)/0.22); margin-bottom:6px; font-size:12.5px; line-height:1.5;
    animation: cardPopIn .3s var(--ease-smooth) both;
  }
  .auto-hist-row{ padding:11px 13px; border-radius:14px; background:hsl(0 0% 100% / 0.035); margin-bottom:8px; animation: cardPopIn .3s var(--ease-smooth) both; }
  .auto-hist-row.fallo{ border:1px solid rgba(255,99,105,0.28); }
  .auto-hist-meta{ font-size:12px; color:hsl(var(--muted)); margin-bottom:5px; }
  .auto-hist-accion{ font-size:12.5px; line-height:1.6; }
  .auto-hist-fallo{ font-size:12px; color:#ff8388; margin-top:4px; }

  .am-eventos-grid{ display:grid; grid-template-columns:1fr 1fr; gap:4px 20px; }
  @media (max-width:640px){ .am-eventos-grid{ grid-template-columns:1fr; } }
  /* faltaba del todo — 31 usos en AutoMod/Moderación/Starboard/etc. quedaban
     apilados en una sola columna en vez de ir de a 2 lado a lado */
  .fila-2{ display:grid; grid-template-columns:1fr 1fr; gap:0 20px; align-items:start; }
  @media (max-width:640px){ .fila-2{ grid-template-columns:1fr; } }

  /* Anti-Raid / Seguridad Adicional — grid de cards en vez de lista larga */
  .rl-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:14px; align-items:start; }
  @media (max-width:640px){ .rl-grid{ grid-template-columns:1fr; } }

  .rd-field{ margin-bottom:20px; }
  /* Campos de texto/select/textarea dentro de un modal de crear/editar (Nombre,
     Descripción, URL...) — pedido explícito: se veían enanos comparados con el
     ancho real del modal. Los campos angostos a propósito (precio, probabilidad,
     emoji) ya traen su `style="max-width:...px"` puesto a mano en el HTML, que
     por especificidad de inline-style siempre le gana a esto — así que esta
     regla solo agranda los que de verdad tienen que ocupar el ancho entero. */
  .mt-modal .inp{ width:100%; padding:18px 18px; font-size:15px; border-radius:14px; }
  .mt-modal textarea.inp{ min-height:110px; line-height:1.5; }
  .rd-field label{ display:block; font-size:14.5px; font-weight:600; margin-bottom:6px; }
  .rd-field > small{ display:block; font-size:12.5px; color:hsl(var(--muted)); margin-bottom:8px; line-height:1.55; }
  .rd-sub{ display:block; font-size:12px; color:hsl(var(--muted)/0.8); margin-top:8px; line-height:1.5; }
  .rd-radio{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; cursor:pointer; font-size:14px; border:1px solid transparent; margin-bottom:6px; transition: background .15s ease; }
  .rd-radio:hover{ background:hsl(0 0% 100% / 0.03); }
  .rd-radio.sel{ border-color:hsl(var(--gold-2)/0.5); background:hsl(var(--gold)/0.06); }
  .rd-dot{ width:16px; height:16px; border-radius:50%; border:2px solid hsl(var(--stroke)/0.3); flex-shrink:0; position:relative; }
  .rd-radio.sel .rd-dot{ border-color:hsl(var(--gold-2)); }
  .rd-radio.sel .rd-dot::after{ content:''; position:absolute; inset:2px; border-radius:50%; background:hsl(var(--gold-2)); }
  .rd-switch-row{ display:flex; align-items:center; justify-content:space-between; gap:20px; }
  .rd-switch-row label{ margin-bottom:2px; }
  .rd-switch-row small{ display:block; font-size:12px; color:hsl(var(--muted)); }
  .rd-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:8px; }

  /* ============================================================
     MENSAJES — hub de 3 tarjetas, tabs, modales de canal/editor,
     preview estilo Discord, action rows, panel de variables.
     ============================================================ */
  .ms-hub-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:16px; }
  .ms-hub-card{ padding:26px 22px; cursor:pointer; text-align:left; display:flex; flex-direction:column; gap:10px; color:hsl(var(--text)); font:inherit; }
  .ms-hub-card .ms-hub-emoji{ font-size:26px; line-height:1; }
  .ms-hub-card b{ font-size:15.5px; color:hsl(var(--text)); }
  .ms-hub-card small{ display:block; color:hsl(var(--muted)); font-size:12.5px; line-height:1.5; }
  .ms-hub-card .cmd-pill{ align-self:flex-start; }

  .ms-back{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:hsl(var(--muted)); cursor:pointer; margin-bottom:18px; transition: color .2s ease, transform .2s var(--ease-spring); background:none; border:none; padding:0; }
  .ms-back:hover{ color:hsl(var(--text)); transform:translateX(-3px); }

  /* tabs tipo segmento (pill), reusado para Mensajes/Simulación arriba de
     todo, y Edit/Preview + Visual/Raw/Variables adentro del modal grande */
  .seg-tabs{ display:inline-flex; padding:4px; border-radius:9999px; background:hsl(0 0% 100% / 0.05); border:1px solid transparent; gap:2px; }
  .seg-tabs.seg-block{ display:flex; width:100%; }
  .seg-tab{ border:none; background:transparent; color:hsl(var(--muted)); font-weight:700; font-size:13px; padding:9px 20px; border-radius:9999px; cursor:pointer; white-space:nowrap; transition: background .25s var(--ease-smooth), color .25s ease, transform .15s var(--ease-spring); }
  .seg-tabs.seg-block .seg-tab{ flex:1; }
  .seg-tab:hover{ color:hsl(var(--text)); }
  .seg-tab.on{ background:hsl(var(--gold-2)); color:#0a0a0d; box-shadow:0 4px 14px hsl(var(--gold-2)/0.35); }
  .seg-tab:active{ transform:scale(0.95); }

  /* Reaction Roles 2026-10-24 ("como Carl-bot"): editor con vista previa al costado. */
  .rr-card .rr-card-pills{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin-top:8px; }
  .rr-modal-ancho{ max-width:1080px; }
  .rr-modal-cab{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
  .rr-modal-cab h3{ flex:1; min-width:0; margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .rr-tabs{ margin-bottom:16px; }
  .rr-split{ display:grid; grid-template-columns:minmax(0, 1.05fr) minmax(0, 1fr); gap:22px; min-height:0; flex:1; }
  .rr-form{ min-height:0; max-height:62vh; }
  .rr-preview-col{ display:flex; flex-direction:column; gap:8px; min-width:0; max-height:62vh; overflow-y:auto; }
  .rr-preview-titulo{ font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:hsl(var(--muted)); }
  @media (max-width:860px){
    /* en pantallas chicas scrollea el modal entero, no dos zonas una dentro de otra */
    .mt-modal.rr-modal-ancho{ max-height:none; }
    .rr-split{ grid-template-columns:minmax(0,1fr); flex:none; }
    .rr-form, .rr-preview-col{ max-height:none; overflow:visible; }
    .rr-preview-col{ order:-1; }
  }
  .rr-ayuda{ display:block; font-size:12.5px; line-height:1.45; color:hsl(var(--muted)); margin-top:5px; }
  .rr-opc{ font-weight:500; color:hsl(var(--muted)); font-size:12px; }
  .rr-nota{ padding:12px 14px; border-radius:12px; background:hsl(var(--gold-2)/0.08); border:1px solid hsl(var(--gold-2)/0.22); font-size:13px; line-height:1.5; }
  .rr-vacio{ font-size:13px; color:hsl(var(--muted)); padding:6px 2px; }
  .rr-accion-principal{ width:100%; margin-top:16px; }
  .rr-fila2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  @media (max-width:520px){ .rr-fila2{ grid-template-columns:1fr; } }

  .rr-elegir{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  @media (max-width:520px){ .rr-elegir{ grid-template-columns:1fr; } }
  .rr-elegir-op{ display:flex; flex-direction:column; gap:6px; padding:20px 16px; border-radius:16px; text-align:left; cursor:pointer;
    background:hsl(0 0% 100% / 0.04); border:1px solid hsl(var(--stroke)/0.12); color:inherit; font:inherit;
    transition: transform .16s var(--ease-spring), background-color .2s ease, border-color .2s ease; }
  .rr-elegir-op b{ font-size:15px; } .rr-elegir-op small{ color:hsl(var(--muted)); font-size:12.5px; line-height:1.4; }
  .rr-elegir-op.principal{ border-color:hsl(var(--gold-2)/0.45); background:hsl(var(--gold-2)/0.09); }
  .rr-elegir-op:active{ transform:scale(0.97); }
  @media (hover:hover) and (pointer:fine){ .rr-elegir-op:hover{ border-color:hsl(var(--gold-2)/0.6); transform:translateY(-1px); } }

  .rr-plantillas{ display:flex; flex-wrap:wrap; gap:8px; }
  .rr-plantilla{ display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:9999px; cursor:pointer; font:600 13px/1 inherit;
    color:inherit; background:hsl(0 0% 100% / 0.05); border:1px solid hsl(var(--stroke)/0.12);
    transition: transform .16s var(--ease-spring), background-color .2s ease, border-color .2s ease; }
  .rr-plantilla.on{ background:hsl(var(--gold-2)/0.16); border-color:hsl(var(--gold-2)/0.6); }
  .rr-plantilla:active{ transform:scale(0.95); }

  .rr-tipos{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; }
  @media (max-width:520px){ .rr-tipos{ grid-template-columns:1fr; } }
  .rr-tipo{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:12px; border-radius:14px; cursor:pointer; text-align:left;
    color:inherit; font:inherit; background:hsl(0 0% 100% / 0.04); border:1px solid hsl(var(--stroke)/0.12);
    transition: transform .16s var(--ease-spring), background-color .2s ease, border-color .2s ease; }
  .rr-tipo b{ font-size:13.5px; } .rr-tipo small{ font-size:11.5px; line-height:1.35; color:hsl(var(--muted)); }
  .rr-tipo-ico{ font-size:18px; }
  .rr-tipo.on{ background:hsl(var(--gold-2)/0.12); border-color:hsl(var(--gold-2)/0.65); box-shadow:0 0 0 3px hsl(var(--gold-2)/0.12); }
  .rr-tipo:active{ transform:scale(0.97); }
  .rr-tipo:disabled{ opacity:.45; cursor:not-allowed; }

  .rr-switch-fila{ display:flex; align-items:flex-start; gap:10px; margin:4px 0 14px; cursor:pointer; }
  .rr-switch-fila input{ margin-top:3px; width:17px; height:17px; accent-color:hsl(var(--gold-2)); flex:none; }
  .rr-switch-fila span{ display:flex; flex-direction:column; gap:2px; font-size:13.5px; }
  .rr-switch-fila small{ color:hsl(var(--muted)); font-size:12px; line-height:1.4; }
  .rr-embed-form{ display:flex; flex-direction:column; gap:9px; padding:14px; margin-bottom:16px; border-radius:14px;
    background:hsl(0 0% 100% / 0.03); border:1px solid hsl(var(--stroke)/0.1); border-left:4px solid var(--rr-c, hsl(var(--gold-2))); }
  .rr-colores{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
  .rr-color{ position:relative; width:26px; height:26px; border-radius:50%; cursor:pointer; background:var(--c); border:2px solid transparent;
    box-shadow:inset 0 0 0 1px hsl(0 0% 100% / 0.18); transition: transform .16s var(--ease-spring), border-color .2s ease; padding:0; }
  .rr-color.on{ border-color:hsl(var(--text)); transform:scale(1.08); }
  .rr-color:active{ transform:scale(0.92); }
  .rr-color-libre{ background:conic-gradient(#e74c3c, #f1c40f, #2ecc71, #3498db, #9b59b6, #e74c3c); overflow:hidden; }
  .rr-color-libre input{ position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%; }

  .rr-cat{ padding:14px; margin-bottom:12px; border-radius:16px; background:hsl(0 0% 100% / 0.03); border:1px solid hsl(var(--stroke)/0.1);
    animation:cardPopIn .3s var(--ease-spring) both; }
  .rr-cat-cab{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:10px; }
  .mt-modal .rr-cat-nombre{ flex:1 1 100%; font-weight:700; }
  .mt-modal .rr-cat-limite{ flex:1 1 200px; width:auto; }
  .rr-cat-acc{ display:flex; gap:4px; }
  .rr-cat-acc .btn-icon{ width:32px; height:32px; }
  .rr-pares{ display:flex; flex-direction:column; gap:8px; }
  .rr-par{ display:flex; align-items:flex-start; gap:10px; padding:8px 10px; border-radius:12px; background:hsl(0 0% 100% / 0.035); border:1px solid hsl(var(--stroke)/0.08); }
  .rr-par-emoji{ flex:none; display:grid; place-items:center; width:36px; height:36px; border-radius:10px; font-size:19px; background:hsl(0 0% 100% / 0.05); }
  .rr-par-emoji img{ width:22px; height:22px; object-fit:contain; }
  .rr-par-emoji-btn{ border:1px dashed hsl(var(--stroke)/0.25); cursor:pointer; color:inherit; transition: transform .16s var(--ease-spring), border-color .2s ease; }
  .rr-par-emoji-btn:active{ transform:scale(0.92); }
  .rr-sin-emoji{ color:hsl(var(--muted)); font-size:16px; }
  .rr-par-datos{ flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; }
  .rr-par-top{ display:flex; align-items:center; gap:8px; min-height:30px; }
  .rr-par-rol{ flex:1; min-width:0; font-weight:600; font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .rr-par-campos{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:6px; }
  .rr-par-campos:empty{ display:none; }
  .rr-par-rol[data-borrado]{ color:hsl(0 80% 70%); }
  .mt-modal .inp.rr-mini{ padding:8px 10px; font-size:13px; border-radius:10px; min-height:0; }
  .mt-modal .rr-cat .inp, .mt-modal .rr-agregar .inp{ padding:11px 12px; font-size:14px; border-radius:12px; }
  .mt-modal .rr-par-cat{ width:auto; max-width:150px; flex:none; }
  .rr-par-x{ width:28px; height:28px; flex:none; }
  .rr-par-colores{ display:flex; gap:5px; flex:none; }
  .rr-btn-color{ width:20px; height:20px; border-radius:6px; padding:0; cursor:pointer; border:2px solid transparent; transition: transform .16s var(--ease-spring), border-color .2s ease; }
  .rr-btn-color.on{ border-color:hsl(var(--text)); }
  .rr-btn-color:active{ transform:scale(0.9); }
  .rr-bc-primary{ background:#5865f2; } .rr-bc-secondary{ background:#4e5058; } .rr-bc-success{ background:#248046; } .rr-bc-danger{ background:#da373c; }
  @media (max-width:560px){ .rr-par-top{ flex-wrap:wrap; } }
  .rr-agregar{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:10px; padding-top:10px; border-top:1px dashed hsl(var(--stroke)/0.12); }
  .rr-agregar-emoji{ display:flex; gap:4px; flex:0 0 auto; }
  .mt-modal .rr-agregar-emoji .inp{ width:92px; text-align:center; font-size:16px; }
  .mt-modal .rr-agregar-rol{ flex:1 1 160px; min-width:0; width:auto; }
  .mt-modal .rr-agregar > .inp.rr-mini{ width:auto; flex:0 0 auto; }
  .rr-aviso-guardar{ margin-top:10px; padding:8px 10px; border-radius:10px; background:hsl(var(--gold-2)/0.08); }
  .rr-pie-roles{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:6px 0 8px; }

  .rr-barra{ display:flex; align-items:center; justify-content:flex-end; gap:8px; margin-top:14px; padding-top:12px; border-top:1px solid hsl(var(--stroke)/0.1);
    opacity:0; transform:translateY(6px); pointer-events:none; transition: opacity .2s var(--ease-smooth), transform .25s var(--ease-spring); }
  .rr-barra span{ flex:1; font-size:13px; color:hsl(var(--muted)); }
  .rr-barra.on{ opacity:1; transform:none; pointer-events:auto; }
  @media (prefers-reduced-motion: reduce){
    .rr-cat{ animation:none; }
    .rr-barra{ transform:none; }
    .rr-elegir-op, .rr-plantilla, .rr-tipo, .rr-color, .rr-btn-color, .rr-par-emoji-btn{ transition:background-color .2s ease, border-color .2s ease; }
  }
  .seg-tabs-sub{ display:flex; gap:4px; padding:4px; border-radius:12px; background:hsl(0 0% 100% / 0.04); border:1px solid transparent; margin-bottom:16px; }
  .seg-tab-sub{ flex:1; border:none; background:transparent; color:hsl(var(--muted)); font-weight:600; font-size:12.5px; padding:8px 10px; border-radius:9px; cursor:pointer; transition: background .2s ease, color .2s ease; }
  .seg-tab-sub:hover{ color:hsl(var(--text)); }
  .seg-tab-sub.on{ background:hsl(0 0% 100% / 0.1); color:hsl(var(--text)); }

  /* sub-pestañas tipo "Mascotas / Huevos / Accesorios / Aventuras" — misma
     idea acá para Minas / Picos / Minerales / Armería: cada una muestra SOLO
     su propia grilla, en vez de todo apilado en una sola página larga */
  .mineria-subtabs{ display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap; }
  .mineria-subtab{
    border:1px solid transparent; background:hsl(0 0% 100% / 0.02); color:hsl(var(--muted));
    font-weight:700; font-size:13px; padding:10px 20px; border-radius:100px; cursor:pointer;
    transition: all .18s ease; display:inline-flex; align-items:center; gap:7px;
  }
  .mineria-subtab:hover{ color:hsl(var(--text)); border-color:hsl(var(--gold-2)/0.35); }
  .mineria-subtab:active{ transform:scale(0.95); transition-duration:.12s; }
  .mineria-subtab.on{ background:hsl(var(--gold)); color:#241a04; border-color:transparent; }

  /* Tienda HW (Halloween) */
  .hw-moneda{ width:18px; height:18px; vertical-align:-4px; }
  .hw-efecto-ops{ display:flex; gap:8px; flex-wrap:wrap; }

  /* ajuste masivo de precios (−20% / −10% / +10% / +20%) — va arriba de cada
     grilla de precios de Minería y Huerto y le pega a TODA la lista de una */
  .precio-masivo{
    display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 16px; padding:10px 12px 10px 16px;
    border-radius:18px; background:hsl(0 0% 100% / 0.03); border:1px solid hsl(0 0% 100% / 0.07);
  }
  .precio-masivo > span{ font-size:13px; font-weight:700; color:hsl(var(--muted)); margin-right:auto; }
  .precio-masivo button{
    min-width:68px; min-height:44px; padding:0 16px; border-radius:100px; cursor:pointer;
    border:1px solid hsl(0 0% 100% / 0.12); background:hsl(0 0% 100% / 0.04);
    font-weight:800; font-size:14px; font-variant-numeric:tabular-nums;
    transition: transform .16s cubic-bezier(0.23,1,0.32,1), border-color .18s ease, background-color .18s ease, opacity .18s ease;
  }
  .precio-masivo button.baja{ color:hsl(0 85% 76%); }
  .precio-masivo button.sube{ color:hsl(140 60% 68%); }
  @media (hover:hover) and (pointer:fine){
    .precio-masivo button:hover:not(:disabled){ border-color:hsl(var(--gold-2)/0.5); background:hsl(0 0% 100% / 0.09); }
  }
  .precio-masivo button:active:not(:disabled){ transform:scale(0.95); }
  .precio-masivo button:disabled{ opacity:.45; cursor:progress; }
  /* historial de cambios masivos + deshacer (2026-10-10) */
  .precio-hist{ margin:-8px 0 16px; padding:0 4px; font-size:12.5px; color:hsl(var(--muted)); }
  .precio-hist:empty{ display:none; }
  .precio-hist-fila{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
  .precio-hist-fila > span{ margin-right:auto; }
  .precio-hist b.baja{ color:hsl(0 85% 76%); }
  .precio-hist b.sube{ color:hsl(140 60% 68%); }
  .precio-hist-btn{
    min-height:36px; padding:0 14px; border-radius:999px; border:1px solid hsl(0 0% 100% / 0.1); background:hsl(0 0% 100% / 0.05);
    color:hsl(var(--text)); font:600 12.5px/1 inherit; cursor:pointer; transition:transform .16s cubic-bezier(.23,1,.32,1), background-color .2s ease;
  }
  .precio-hist-btn:active:not(:disabled){ transform:scale(0.96); }
  .precio-hist-btn:disabled{ opacity:.45; cursor:progress; }
  .precio-hist-btn.aviso{ border-color:hsl(var(--gold-2)/0.6); color:hsl(var(--gold-2)); }
  @media (hover:hover) and (pointer:fine){ .precio-hist-btn:hover:not(:disabled){ background:hsl(0 0% 100% / 0.1); } }
  .precio-hist ul{ list-style:none; margin:10px 0 0; padding:10px 14px; border-radius:14px; background:hsl(0 0% 100% / 0.03); display:grid; gap:8px; }
  .precio-hist li{ display:flex; gap:8px; flex-wrap:wrap; align-items:baseline; }
  .precio-hist li.deshecho{ opacity:.55; text-decoration:line-through; }
  .precio-hist li em{ font-style:normal; margin-left:auto; text-decoration:none; }
  .mt-actividad{ margin-top:12px; }
  .mt-actividad summary{ cursor:pointer; font-size:12.5px; font-weight:700; color:hsl(var(--muted)); padding:8px 0; min-height:36px; }
  .mt-actividad-fila{ display:flex; gap:10px; align-items:flex-start; padding:9px 0; border-top:1px solid hsl(0 0% 100% / 0.06); font-size:12.5px; }
  .mt-actividad-fila img{ width:28px; height:28px; border-radius:50%; flex:none; object-fit:cover; }
  .mt-actividad-fila div{ flex:1; min-width:0; overflow-wrap:anywhere; }
  .mt-actividad-fila time{ flex:none; color:hsl(var(--muted)); font-size:11.5px; }
  @media (max-width:600px){
    .precio-masivo{ padding:12px; }
    .precio-masivo > span{ flex-basis:100%; }
    .precio-masivo button{ flex:1; min-width:0; padding:0 8px; }
  }

  /* modal chico: elegir DM o canal */
  .ms-dest-toggle{ display:flex; padding:4px; border-radius:9999px; background:hsl(0 0% 100% / 0.05); border:1px solid transparent; margin-bottom:16px; }
  .ms-dest-btn{ flex:1; border:none; background:transparent; color:hsl(var(--muted)); font-weight:700; font-size:13.5px; padding:11px 14px; border-radius:9999px; cursor:pointer; transition: background .25s var(--ease-smooth), color .25s var(--ease-smooth), box-shadow .25s var(--ease-smooth); }
  .ms-dest-btn.on{ background:#4d7cf5; color:#fff; box-shadow:0 4px 16px rgba(77,124,245,0.4); }
  .ms-dest-btn:active{ transform:scale(0.96); }
  .ms-canal-buscar{ margin-bottom:10px; }
  .ms-canal-lista{ max-height:260px; overflow-y:auto; display:flex; flex-direction:column; gap:3px; padding-right:4px; }
  .ms-canal-cat{ font-size:12px; font-weight:800; letter-spacing:0.06em; text-transform:uppercase; color:hsl(var(--muted)); text-align:center; margin:10px 0 4px; }
  .ms-canal-row{ display:flex; align-items:center; gap:8px; padding:9px 12px; border-radius:9px; cursor:pointer; font-size:13.5px; font-weight:600; background:hsl(0 0% 100% / 0.04); transition: background .18s ease, transform .12s var(--ease-spring); }
  .ms-canal-row:hover{ background:hsl(0 0% 100% / 0.09); }
  .ms-canal-row:active{ transform:scale(0.98); }
  .ms-canal-row.sel{ background:hsl(var(--gold-2)/0.18); color:hsl(var(--gold-2)); }

  /* lista de mensajes dentro de un tipo */
  .mp-packs{ margin:0 0 16px; padding:14px; border-radius:14px; background:hsl(var(--gold)/0.06); border:1px solid hsl(var(--gold)/0.25); }
  .mp-packs-tit{ font-weight:700; font-size:13.5px; color:hsl(var(--gold-2)); margin-bottom:2px; }
  .mp-pack-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:10px; margin-top:10px; }
  .mp-pack{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:12px 14px; text-align:left; border-radius:12px; cursor:pointer; color:inherit; font-family:inherit;
    background:hsl(0 0% 100% / 0.04); border:1px solid hsl(0 0% 100% / 0.12); transition: border-color .18s ease, background-color .18s ease, transform .16s var(--ease-smooth); }
  .mp-pack:hover{ border-color:hsl(var(--gold)/0.5); }
  .mp-pack:active{ transform:scale(0.97); }
  .mp-pack[aria-checked="true"]{ border-color:hsl(var(--gold)/0.8); background:hsl(var(--gold)/0.14); }
  .mp-pack .mp-pack-emoji{ font-size:22px; line-height:1; }
  .mp-pack .mp-pack-nom{ font-weight:700; font-size:13.5px; }
  .mp-pack .mp-pack-desc{ font-size:12px; line-height:1.45; color:hsl(var(--muted)); }
  .mp-pack .mp-pack-meta{ margin-top:auto; padding-top:4px; font-weight:600; font-size:12px; color:hsl(var(--gold-2)); }
  .mp-pack-nota{ margin-top:12px; padding:10px 12px; border-radius:12px; font-size:12.5px; line-height:1.5; background:hsl(140 60% 45%/0.1); border:1px solid hsl(140 60% 45%/0.25); color:#86efac; }
  .mp-empty-cta{ margin-top:12px; }
  @media not all /* movimiento reducido: lo decide el botón "Animaciones" del sitio (html[data-motion=reduced], ver manza-a11y.css) */{ .mp-pack{ transition:none; } }
  .mp-lote{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 14px; margin:0 0 14px; padding:10px 14px; border-radius:12px; font-size:12.5px; line-height:1.5;
    background:hsl(var(--gold)/0.07); border:1px solid hsl(var(--gold)/0.28); }
  .mp-toolbar{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:14px; }
  .mp-buscar{ flex:1 1 220px; min-width:0; }
  .mp-imp-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:0 16px; }
  .mp-imp-errs{ margin:8px 0 0; padding-left:18px; color:#ff8a80; font-size:12.5px; line-height:1.6; }
  .mp-falla{ background:hsl(0 70% 50% / .14); border-color:hsl(0 70% 60% / .35); color:#ffb4ab; }
  .mp-falla-aviso{ margin:4px 0 14px; padding:10px 14px; border-radius:12px; background:hsl(0 70% 50% / .12); border:1px solid hsl(0 70% 60% / .3); color:#ffb4ab; font-size:13px; line-height:1.5; }
  .ms-msg-row{ padding:14px 16px; margin-bottom:10px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
  .ms-msg-icons{ display:flex; gap:6px; flex-shrink:0; }
  .ms-icon-btn{ width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; border-radius:9999px; border:1px solid transparent; background:hsl(0 0% 100% / 0.05); cursor:pointer; font-size:14px; transition: transform .2s var(--ease-spring), background .2s ease, border-color .2s ease; }
  .ms-icon-btn:hover{ transform:scale(1.06); background:hsl(0 0% 100% / 0.1); }
  /* Bug real (2026-09-20): "no deja tocar ningún botón" en Mensajes. La tarjeta de la lista y cada fila son .am-card, y .am-card:hover
     se levanta 8px y crece 2%: con el mouse cerca de un borde la tarjeta se movía, el cursor quedaba afuera, volvía a bajar, y el clic
     se perdía (y las filas anidadas se escalaban dos veces). Acá NADA se mueve; solo se resalta el borde. */
  .am-card.ms-quieta:hover, .am-card.ms-quieta:active, .am-card.ms-msg-row:hover, .am-card.ms-msg-row:active{
    transform:none; filter:none; box-shadow:none; transition-duration:.15s; }
  .am-card.ms-quieta, .am-card.ms-msg-row{ will-change:auto; }
  /* apagado = atenuado, pero SIEMPRE se puede tocar (editar, duplicar, borrar): antes pointer-events:none dejaba todo muerto */
  .ms-lista-off{ opacity:.6; filter:grayscale(.25); transition: opacity .3s ease, filter .3s ease; }
  .ms-icon-btn:active{ transform:scale(0.92); }
  .ms-icon-btn.danger{ color:#ff6369; border-color:rgba(255,99,105,0.25); }
  .ms-icon-btn.danger:hover{ background:rgba(229,72,77,0.18); border-color:rgba(255,99,105,0.5); }
  .ms-msg-row.borrando{ animation: msRowOut .32s var(--ease-smooth) forwards; }
  @keyframes msRowOut{ to{ opacity:0; transform:scale(0.92) translateY(-6px); margin-bottom:0; padding-top:0; padding-bottom:0; max-height:0; } }
  .ms-new-btn{ width:100%; border:1.5px dashed hsl(var(--stroke)/0.2); background:transparent; cursor:pointer; padding:16px; text-align:center; color:hsl(var(--muted)); font-weight:600; border-radius:16px; transition:border-color .2s ease, color .2s ease, transform .2s var(--ease-spring); }
  .ms-new-btn:hover{ border-color:hsl(var(--gold-2)/0.4); color:hsl(var(--text)); }
  .ms-new-btn:active{ transform:scale(0.98); }

  /* modal grande: editor Visual/Raw/Variables + Preview */
  .ms-editor-modal{ max-width:940px; }
  .ms-editor-head{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:20px; flex-wrap:wrap; }
  .ms-editor-close{ width:34px; height:34px; border-radius:50%; border:1px solid transparent; background:hsl(0 0% 100% / 0.05); color:hsl(var(--muted)); cursor:pointer; font-size:15px; transition: background .2s var(--ease-spring), color .2s var(--ease-spring), transform .2s var(--ease-spring); flex-shrink:0; }
  .ms-editor-close:hover{ color:#fff; background:rgba(229,72,77,0.25); transform:rotate(90deg); }

  .ms-toolbar{ display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 18px; }
  .ms-tool-btn{ border:none; border-radius:9999px; padding:9px 16px; font-size:12.5px; font-weight:700; cursor:pointer; transition: transform .2s var(--ease-spring), filter .2s ease; color:#fff; }
  .ms-tool-btn:hover{ filter:brightness(1.12); transform:translateY(-2px); }
  .ms-tool-btn:active{ transform:scale(0.94); }
  .ms-tool-embed{ background:#4d7cf5; } .ms-tool-row{ background:#4d7cf5; }
  .ms-tool-load{ background:#3ba55d; } .ms-tool-clear{ background:#e5484d; }

  /* preview estilo mensaje real de Discord */
  .dc-msg{ background:hsl(220 8% 12%); border-radius:14px; padding:16px 18px; }
  .dc-msg-head{ display:flex; align-items:center; gap:10px; margin-bottom:6px; }
  .dc-msg-avatar{ width:38px; height:38px; border-radius:50%; object-fit:cover; flex-shrink:0; }
  .dc-msg-name{ font-weight:700; font-size:14.5px; color:#fff; }
  .dc-bot-badge{ display:inline-flex; align-items:center; gap:3px; background:#5865f2; color:#fff; font-size:12px; font-weight:700; padding:1px 5px 1px 4px; border-radius:4px; vertical-align:1px; margin-left:4px; }
  .dc-msg-body{ color:hsl(220 8% 82%); font-size:14px; line-height:1.5; white-space:pre-wrap; word-break:break-word; }
  .dc-embed{ position:relative; border-left:4px solid #5865f2; background:hsl(220 8% 15%); border-radius:6px; padding:12px 14px; margin-top:8px; max-width:520px; }
  .dc-embed-author{ display:flex; align-items:center; gap:8px; margin-bottom:6px; font-weight:700; font-size:13px; color:#fff; }
  .dc-embed-author img{ width:20px; height:20px; border-radius:50%; }
  .dc-embed-title{ font-weight:700; color:#fff; font-size:15px; margin-bottom:4px; }
  .dc-embed-desc{ color:hsl(220 8% 80%); font-size:13.5px; line-height:1.5; white-space:pre-wrap; word-break:break-word; }
  .dc-embed-fields{ display:grid; grid-template-columns:1fr; gap:8px; margin-top:8px; }
  .dc-embed-fields.has-inline{ grid-template-columns:1fr 1fr; }
  .dc-embed-field b{ display:block; font-size:12.5px; color:#fff; margin-bottom:2px; }
  .dc-embed-field span{ font-size:12.5px; color:hsl(220 8% 78%); white-space:pre-wrap; }
  .dc-embed-img{ width:100%; border-radius:5px; margin-top:8px; display:block; }
  .dc-embed-thumb{ position:absolute; top:12px; right:14px; width:64px; height:64px; border-radius:5px; object-fit:cover; }
  .dc-embed-footer{ color:hsl(220 5% 60%); font-size:12px; margin-top:8px; }
  .dc-components{ display:flex; flex-direction:column; gap:6px; margin-top:8px; max-width:520px; }
  .dc-row{ display:flex; gap:6px; flex-wrap:wrap; }
  .dc-btn{ padding:7px 14px; border-radius:4px; font-size:13px; font-weight:600; border:none; color:#fff; }
  .dc-btn-primary{ background:#5865f2; } .dc-btn-secondary{ background:#4a4d53; } .dc-btn-success{ background:#3ba55d; } .dc-btn-danger{ background:#ed4245; } .dc-btn-link{ background:#4a4d53; text-decoration:underline; }
  /* "Mi tarjeta de rango": editor con vista previa real (ver abrirMiTarjetaRango) */
  .mtr-previa{ position:relative; margin:14px 0 6px; border-radius:16px; background:hsl(220 8% 10%); padding:12px; min-height:92px; }
  .mtr-previa img{ display:block; width:100%; height:auto; aspect-ratio:2000 / 560; border-radius:10px; transition:opacity .18s ease; }
  .mtr-previa.cargando img{ opacity:.55; }
  .mtr-previa small{ display:block; margin-top:8px; text-align:center; color:hsl(var(--muted)); font-size:12px; }
  .mtr-grupo{ margin-top:18px; }
  .mtr-grupo > b{ display:flex; align-items:center; flex-wrap:wrap; gap:4px 8px; font-size:13.5px; margin-bottom:10px; }
  .mtr-grupo > b svg{ width:16px; height:16px; flex:none; color:hsl(var(--gold-2)); }
  .mtr-grupo > b small{ font-weight:500; font-size:12.5px; color:hsl(var(--muted)); }
  .mtr-fila{ display:flex; gap:12px; flex-wrap:wrap; }
  .mtr-campo{ display:flex; align-items:center; gap:10px; flex:1; min-width:190px; padding:8px 10px; border-radius:14px; background:hsl(0 0% 100% / 0.04); border:1px solid hsl(0 0% 100% / 0.07); }
  .mtr-campo label{ font-size:12.5px; color:hsl(var(--muted)); font-weight:700; flex:1; }
  .mtr-color{ -webkit-appearance:none; appearance:none; width:44px; height:44px; padding:0; border:1px solid hsl(0 0% 100% / 0.18); border-radius:12px; background:none; cursor:pointer; flex:none; }
  .mtr-color::-webkit-color-swatch-wrapper{ padding:0; }
  .mtr-color::-webkit-color-swatch{ border:none; border-radius:11px; }
  .mtr-color::-moz-color-swatch{ border:none; border-radius:11px; }
  .mtr-hex{ width:96px; min-height:44px; padding:0 10px; border-radius:10px; border:1px solid hsl(0 0% 100% / 0.12); background:hsl(0 0% 0% / 0.25); color:hsl(var(--text)); font:600 13px 'JetBrains Mono', monospace; text-transform:uppercase; }
  .mtr-hex.mal{ border-color:hsl(0 70% 60%); }
  .mtr-presets{ display:flex; gap:10px; flex-wrap:wrap; }
  .mtr-preset{ width:44px; height:44px; border-radius:50%; border:2px solid hsl(0 0% 100% / 0.16); cursor:pointer; padding:0; transition:transform .16s cubic-bezier(0.23,1,0.32,1), border-color .18s ease; }
  .mtr-preset:active{ transform:scale(0.94); }
  .mtr-preset.on{ border-color:#fff; }
  @media (hover:hover) and (pointer:fine){ .mtr-preset:hover{ transform:scale(1.08); } }
  .mtr-server{ display:flex; align-items:center; gap:12px; padding:12px 4px; border-bottom:1px solid hsl(0 0% 100% / 0.07); }
  .mtr-server:last-child{ border-bottom:none; }
  .mtr-server img, .mtr-server .mtr-ini{ width:36px; height:36px; border-radius:10px; object-fit:cover; flex:none; }
  .mtr-server .mtr-ini{ display:grid; place-items:center; background:hsl(0 0% 100% / 0.08); font-weight:800; font-size:13px; }
  .mtr-server .nombre{ flex:1; min-width:0; font-weight:700; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .mtr-server .nombre small{ display:block; font-weight:500; font-size:12px; color:hsl(var(--muted)); }
  .mtr-pie{ color:hsl(var(--muted)); font-size:12.5px; margin-top:14px; }
  /* Marcos de la tarjeta (2026-10-10). En la web el marco se mueve: es un borde con degradado alrededor de la vista previa
     (la imagen de adentro viene SIN marco). En Discord y en la descarga sale el mismo marco, quieto, dibujado en la imagen. */
  @property --mtr-ang{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
  .mtr-marco{ position:relative; isolation:isolate; border-radius:10px; --mb1:#F5A623; --mb2:#8BC34A; }
  .mtr-marco[data-marco]:not([data-marco=""]){ padding:4px; border-radius:14px; }
  .mtr-marco::before, .mtr-marco::after{ content:""; position:absolute; inset:0; border-radius:inherit; z-index:-1; }
  .mtr-marco[data-marco=""]::before, .mtr-marco[data-marco=""]::after{ display:none; }
  .mtr-marco[data-marco="halloween"]::before{ background:conic-gradient(from var(--mtr-ang), #ff7518, #ffb347, #7a2cff, #2b0a4d, #ff7518 62%, #ffd27a, #ff7518); animation:mtrGirar 9s linear infinite; }
  .mtr-marco[data-marco="halloween"]::after{ background:conic-gradient(from var(--mtr-ang), #ff7518, #7a2cff, #ff7518); filter:blur(14px); opacity:.5; animation:mtrGirar 9s linear infinite; }
  .mtr-marco[data-marco="oro"]::before{ background:conic-gradient(from var(--mtr-ang), #6b4a12, #c9962f, #fff3c4 12%, #c9962f 24%, #6b4a12 50%, #c9962f 76%, #fff3c4 88%, #6b4a12); animation:mtrGirar 7s linear infinite; }
  .mtr-marco[data-marco="oro"]::after{ background:#f5c451; filter:blur(16px); opacity:.2; animation:mtrLatir 3.6s ease-in-out infinite; }
  .mtr-marco[data-marco="neon"]::before{ background:linear-gradient(120deg, var(--mb1), var(--mb2), var(--mb1)); background-size:200% 100%; animation:mtrCorrer 5s linear infinite; }
  .mtr-marco[data-marco="neon"]::after{ background:linear-gradient(120deg, var(--mb1), var(--mb2)); filter:blur(14px); opacity:.5; animation:mtrLatir 3s ease-in-out infinite; }
  .mtr-marco[data-marco="hielo"]::before{ background:conic-gradient(from var(--mtr-ang), #0b3a5c, #7fd6ff, #ffffff 18%, #7fd6ff 30%, #0b3a5c 55%, #bfeaff 80%, #0b3a5c); animation:mtrGirar 11s linear infinite reverse; }
  .mtr-marco[data-marco="hielo"]::after{ background:#7fd6ff; filter:blur(14px); opacity:.28; animation:mtrLatir 4.4s ease-in-out infinite; }
  @keyframes mtrGirar{ to{ --mtr-ang:360deg; } }
  @keyframes mtrCorrer{ to{ background-position:200% 0; } }
  @keyframes mtrLatir{ 50%{ opacity:.6; } }
  @media (prefers-reduced-motion: reduce){ .mtr-marco::before, .mtr-marco::after{ animation:none !important; } }
  :root[data-motion="reduced"] .mtr-marco::before, :root[data-motion="reduced"] .mtr-marco::after{ animation:none !important; }
  .mtr-marcos{ display:flex; gap:8px; flex-wrap:wrap; }
  .mtr-marco-op{
    display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 14px 0 10px; border-radius:999px; cursor:pointer;
    border:1px solid hsl(0 0% 100% / 0.1); background:hsl(0 0% 100% / 0.05); color:hsl(var(--text)); font:600 13px/1 inherit;
    transition:transform .16s cubic-bezier(.23,1,.32,1), background-color .2s ease, border-color .2s ease;
  }
  .mtr-marco-op i{ width:22px; height:22px; border-radius:50%; flex:none; background:hsl(0 0% 100% / 0.12); }
  .mtr-marco-op:active{ transform:scale(0.96); }
  .mtr-marco-op[aria-pressed="true"]{ border-color:hsl(var(--gold-2)); background:hsl(var(--gold-2) / 0.14); }
  .mtr-marco-op:focus-visible{ outline:2px solid hsl(var(--gold-2)); outline-offset:3px; }
  @media (hover:hover) and (pointer:fine){ .mtr-marco-op:hover{ background:hsl(0 0% 100% / 0.1); } }
  /* deslizadores del fondo, "todos mis servers" y fila de acciones (2026-10-10) */
  .mtr-desliz{ min-height:60px; min-width:230px; }
  .mtr-desliz label{ flex:none; }
  .mtr-desliz .prob-slider{ flex:1 1 0; width:0; min-width:60px; }
  .mtr-desliz .prob-slider:focus-visible{ outline:2px solid hsl(var(--gold-2)); outline-offset:8px; }
  .mtr-desliz output{ flex:none; min-width:38px; text-align:right; font-weight:700; font-size:13px; font-variant-numeric:tabular-nums; }
  .mtr-server.mtr-todos{ padding:12px; margin-bottom:6px; border-bottom:none; border-radius:14px; background:hsl(0 0% 100% / 0.05); }
  .mtr-acciones{ margin-top:12px; display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
  .mtr-acciones .mtr-empuja{ margin-left:auto; }
  @media (max-width:520px){ .mtr-acciones .mtr-empuja{ margin-left:0; } }
  /* Editor reordenado + "Mis tarjetas" (2026-10-11) */
  .mtr-pie svg{ width:14px; height:14px; vertical-align:-2px; }
  /* la vista previa no se achica cuando el contenido de abajo es largo: lo que se desplaza es solo la zona de abajo */
  .mtr-previa{ flex:none; }
  .mtr-cerrar{ min-width:44px; min-height:44px; }
  .mtr-acciones .btn{ min-height:44px; }
  .mtr-tabs .seg-tab{ display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:44px; padding:9px 12px; }
  .mtr-tabs .seg-tab svg{ width:15px; height:15px; flex:none; }
  .mtr-tabs .seg-tab:focus-visible{ outline:2px solid hsl(var(--gold-2)); outline-offset:2px; }
  .mtr-cuenta{ min-width:20px; padding:1px 6px; border-radius:9999px; background:hsl(0 0% 100% / 0.12); font-size:12px; font-variant-numeric:tabular-nums; }
  .seg-tab.on .mtr-cuenta{ background:hsl(0 0% 0% / 0.16); }
  .mtr-reset{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding-top:16px; border-top:1px solid hsl(0 0% 100% / 0.07); }
  .mtr-reset .mtr-pie{ margin:0; flex:1 1 220px; }
  .mtr-nueva{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
  .mtr-nombre{ flex:1 1 180px; min-width:0; min-height:44px; padding:0 16px; border-radius:9999px; border:1px solid hsl(0 0% 100% / 0.14); background:hsl(0 0% 0% / 0.25); color:hsl(var(--text)); font:600 14px inherit; transition:border-color .18s ease; }
  .mtr-nombre::placeholder{ color:hsl(var(--muted)); font-weight:500; }
  .mtr-nombre:focus-visible{ outline:2px solid hsl(var(--gold-2)); outline-offset:2px; }
  .mtr-nueva .btn{ min-height:44px; }
  .mtr-lista{ display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:12px; margin-top:16px; }
  .mtr-guardada{ position:relative; border-radius:16px; background:hsl(0 0% 100% / 0.04); border:1px solid hsl(0 0% 100% / 0.07); transition:border-color .2s ease, background .2s ease; }
  .mtr-guardada.en-uso{ border-color:hsl(var(--gold-2) / 0.6); background:hsl(var(--gold-2) / 0.08); }
  .mtr-usar{ display:block; width:100%; padding:8px 8px 12px; border:0; border-radius:15px; background:none; color:inherit; font:inherit; text-align:left; cursor:pointer; transition:transform .16s cubic-bezier(0.23,1,0.32,1), background .18s ease; }
  .mtr-usar:active{ transform:scale(0.98); }
  .mtr-usar:disabled{ cursor:default; opacity:.6; }
  .mtr-usar:focus-visible{ outline:2px solid hsl(var(--gold-2)); outline-offset:2px; }
  @media (hover:hover) and (pointer:fine){ .mtr-usar:hover:not(:disabled){ background:hsl(0 0% 100% / 0.05); } }
  .mtr-usar img{ display:block; width:100%; height:auto; aspect-ratio:2000 / 560; border-radius:10px; background:hsl(220 8% 10%); }
  .mtr-usar .nombre{ display:block; margin:10px 56px 0 6px; font-weight:700; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .mtr-estado{ display:flex; align-items:center; gap:5px; margin:2px 56px 0 6px; font-size:12.5px; color:hsl(var(--muted)); }
  .mtr-estado svg{ width:13px; height:13px; }
  .mtr-guardada.en-uso .mtr-estado{ color:hsl(var(--gold-2)); font-weight:700; }
  .mtr-guardada > .mtr-ico{ position:absolute; right:8px; bottom:8px; }
  .mtr-ico{ flex:none; min-width:44px; height:44px; padding:0 13px; border:0; border-radius:9999px; background:hsl(0 0% 100% / 0.06); color:hsl(var(--muted)); font:700 12.5px inherit; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:transform .16s cubic-bezier(0.23,1,0.32,1), background .18s ease, color .18s ease; }
  .mtr-ico svg{ width:16px; height:16px; }
  .mtr-ico:active{ transform:scale(0.94); }
  .mtr-ico:disabled{ opacity:.45; cursor:default; transform:none; }
  .mtr-ico:focus-visible{ outline:2px solid hsl(var(--gold-2)); outline-offset:2px; }
  .mtr-ico.confirma{ background:hsl(0 70% 58% / 0.22); color:hsl(0 80% 78%); }
  @media (hover:hover) and (pointer:fine){ .mtr-ico:hover:not(:disabled){ background:hsl(0 0% 100% / 0.12); color:hsl(var(--text)); } .mtr-ico.peligro:hover:not(:disabled){ background:hsl(0 70% 58% / 0.22); color:hsl(0 80% 78%); } }
  .mtr-vacio{ margin-top:16px; padding:22px 18px; border-radius:16px; border:1.5px dashed hsl(0 0% 100% / 0.16); text-align:center; }
  .mtr-vacio svg{ width:26px; height:26px; color:hsl(var(--gold-2)); }
  .mtr-vacio b{ display:block; margin:8px 0 4px; font-size:14px; }
  .mtr-vacio .mtr-pie{ margin:0 auto; max-width:46ch; }
  @media (max-width:520px){
    .mtr-tabs .seg-tab{ padding:9px 6px; font-size:12.5px; gap:5px; }
    .mtr-tabs .seg-tab svg{ display:none; }
    .mtr-nombre{ font-size:16px; }
    .mtr-nueva .btn{ flex:1 1 100%; }
    .mtr-acciones .btn{ flex:1 1 auto; }
  }
  @media (max-width:420px){ .mtr-cuenta{ display:none; } }

  /* markdown y emojis dentro de las vistas previas (ver _dcMd) */
  .dc-emoji{ width:1.375em; height:1.375em; vertical-align:-0.3em; object-fit:contain; }
  .dc-h .dc-emoji{ width:1.2em; height:1.2em; vertical-align:-0.2em; }
  .dc-h{ color:#fff; font-weight:800; line-height:1.25; margin:10px 0 4px; }
  .dc-h:first-child{ margin-top:0; }
  .dc-h1{ font-size:1.5em; } .dc-h2{ font-size:1.25em; } .dc-h3{ font-size:1.05em; }
  .dc-subtext{ font-size:0.82em; color:hsl(220 5% 60%); }
  .dc-quote{ border-left:4px solid hsl(220 6% 34%); border-radius:2px; padding:0 0 0 12px; margin:2px 0; }
  .dc-li{ position:relative; padding-left:16px; }
  .dc-li::before{ content:"•"; position:absolute; left:2px; }
  .dc-li-num{ padding-left:22px; }
  .dc-li-num::before{ content:attr(data-n); left:0; font-variant-numeric:tabular-nums; }
  .dc-code{ font-family:'JetBrains Mono',monospace; font-size:0.86em; background:hsl(220 8% 9%); border:1px solid hsl(220 8% 22%); border-radius:4px; padding:1px 5px; }
  .dc-codeblock{ font-family:'JetBrains Mono',monospace; font-size:0.86em; background:hsl(220 8% 9%); border:1px solid hsl(220 8% 22%); border-radius:6px; padding:8px 10px; margin:4px 0; white-space:pre-wrap; }
  .dc-mention{ background:hsl(235 86% 65% / 0.3); color:hsl(235 100% 88%); border-radius:4px; padding:0 3px; font-weight:600; }
  .dc-timestamp{ background:hsl(0 0% 100% / 0.08); border-radius:4px; padding:0 3px; }
  .dc-link{ color:hsl(197 100% 62%); text-decoration:underline; text-underline-offset:2px; }
  .dc-spoiler{ background:hsl(220 8% 26%); border-radius:4px; padding:0 3px; }
  .dc-embed-field b b{ display:inline; }  /* negrita DENTRO del nombre del campo: que no corte el renglón */
  .dc-select{ padding:9px 12px; border-radius:8px; background:#2b2d31; color:hsl(220 8% 80%); font-size:13px; border:1px solid hsl(220 8% 22%); }

  /* action rows (botones / select) en el editor Visual */
  .ar-row{ border:1px solid transparent; border-radius:14px; padding:14px; margin-bottom:10px; background:hsl(0 0% 100% / 0.03); }
  .ar-row-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
  .ar-row-head b{ font-size:12.5px; color:hsl(var(--muted)); text-transform:uppercase; letter-spacing:0.05em; }
  .ar-item{ border:1px solid transparent; border-radius:10px; padding:10px; margin-bottom:8px; display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
  .ar-item .inp{ min-width:0; }
  .ar-msg-elegir{ flex:1; min-width:170px; }
  .ar-msg-privacidad{ max-width:200px; }
  .ar-msg-vacio{ flex:1; min-width:170px; font-size:12.5px; line-height:1.5; color:hsl(var(--muted)); }
  .ar-remove{ margin-left:auto; }

  /* panel de variables */
  .var-search{ margin-bottom:12px; }
  .var-list{ max-height:340px; overflow-y:auto; display:flex; flex-direction:column; gap:2px; padding-right:4px; }
  .var-grupo{ font-size:12px; font-weight:800; letter-spacing:0.06em; text-transform:uppercase; color:hsl(var(--muted)); margin:12px 0 4px; }
  .var-grupo:first-child{ margin-top:0; }
  .var-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border-radius:10px; cursor:pointer; transition: background .18s ease; }
  .var-row:hover{ background:hsl(0 0% 100% / 0.06); }
  .var-row b{ font-size:13.5px; font-family:'JetBrains Mono',monospace; }
  .var-row small{ color:hsl(var(--muted)); font-size:12px; }
  .var-copied{ display:inline-flex; align-items:center; background:#3ba55d; color:#fff; font-size:12px; font-weight:700; padding:3px 9px; border-radius:9999px; animation: cardPopIn .25s var(--ease-spring); }

  @media (max-width:720px){ .dc-embed-fields.has-inline{ grid-template-columns:1fr; } }
  .user-menu a.danger{ color:hsl(var(--apple-2)); }
  .user-menu a.danger:hover{ background:hsl(var(--apple)/0.14); color:hsl(var(--apple-2)); }

  /* ===== Vistas ===== */
  .view{ display:none; position:relative; z-index:3; }
  .view.active{ display:block; }
  /* Animación de entrada (2026-08-30, pedido explícito: "al tocar uno de
     esos botones necesita animación de entrada") — acotada a Perfil/Chats
     vía clase .anim-in en la sección, mismo keyframe que ya usan las
     pestañas internas (tabFadeSlide) para no inventar una animación nueva. */
  .view.anim-in.active{ animation: tabFadeSlide .45s var(--ease-smooth); }

  .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-size:12px; letter-spacing:2.5px; text-transform:uppercase; color:hsl(var(--gold-2));
  }
  .eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:hsl(var(--gold-2)); box-shadow:0 0 10px hsl(var(--gold-2)/0.7); animation:pulse 2s infinite; }
  @keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:.3;} }

  /* --- Elegir servidor --- */
  .picker{ padding:140px 0 90px; }
  .picker-head{ text-align:center; max-width:560px; margin:0 auto 52px; }
  .picker-head h1{
    font-family:'Poppins', sans-serif; font-weight:800; letter-spacing:-1.6px;
    font-size:clamp(32px, 5vw, 52px); line-height:1.04; margin-top:22px;
  }
  .picker-head p{ margin-top:18px; color:hsl(var(--muted)); font-size:15px; line-height:1.65; }
  .server-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:18px; }
  .server-card{
    padding:24px 22px; display:flex; align-items:center; gap:16px; cursor:pointer;
    border-radius:22px; text-align:left; width:100%; font-family:inherit; color:inherit;
    background: hsl(0 0% 100% / 0.025); border:none;
    transition: transform .22s cubic-bezier(.22,1,.36,1), background .22s ease;
  }
  .server-card{ opacity:0; animation:cardPopIn .5s var(--ease-spring) both; }
  .server-card:nth-child(1){ animation-delay:.02s; } .server-card:nth-child(2){ animation-delay:.06s; }
  .server-card:nth-child(3){ animation-delay:.10s; } .server-card:nth-child(4){ animation-delay:.14s; }
  .server-card:nth-child(5){ animation-delay:.18s; } .server-card:nth-child(6){ animation-delay:.22s; }
  .server-card:hover{ transform:translateY(-8px) scale(1.025); background:hsl(0 0% 100% / 0.08); box-shadow:0 20px 45px rgba(0,0,0,0.4); }
  .server-card:active{ transform:translateY(-2px) scale(0.97); transition-duration:.12s; }
  .server-card:focus-visible{ outline:2px solid hsl(var(--gold-2)); outline-offset:3px; }
  .server-ico{
    width:52px; height:52px; border-radius:16px; flex-shrink:0; object-fit:cover;
    display:flex; align-items:center; justify-content:center;
    font-family:'Montserrat',sans-serif; font-weight:800; font-size:17px; letter-spacing:-0.5px;
    background: radial-gradient(circle at 32% 26%, hsl(var(--gold-2)/0.9), hsl(var(--apple)) 78%);
    color:hsl(var(--bg));
    box-shadow: inset 0 1px 0 hsl(0 0% 100% / 0.25);
  }
  .server-meta{ min-width:0; flex:1; }
  .server-name{ font-size:14.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .server-tester-badge{
    display:inline-block; font-family:'JetBrains Mono', monospace; font-size:12px; font-weight:700;
    letter-spacing:0.5px; text-transform:uppercase; padding:2px 6px; border-radius:5px; margin-left:4px;
    background:hsl(var(--gold-2)/0.16); color:hsl(var(--gold-2)); vertical-align:1px;
  }
  .server-sub{ margin-top:5px; font-size:12px; color:hsl(var(--muted)); font-family:'JetBrains Mono', monospace; display:flex; align-items:center; gap:7px; }
  .server-sub i{ width:6px; height:6px; border-radius:50%; display:inline-block; }
  .i-on{ background:#4ade80; box-shadow:0 0 8px #4ade8090; }
  .i-off{ background:hsl(var(--muted)/0.5); }
  .server-go{ font-size:15px; color:hsl(var(--muted)); transition: transform .2s ease, color .2s ease; }
  .server-card:hover .server-go{ transform:translate(3px,-3px); color:hsl(var(--gold-2)); }
  .server-card.add{ border:1.5px dashed hsl(var(--stroke)/0.16); background:transparent; }
  .server-card.add .server-ico{ background:hsl(0 0% 100% / 0.05); color:hsl(var(--muted)); font-size:24px; box-shadow:none; }
  .picker-foot{ margin-top:44px; text-align:center; font-size:12.5px; color:hsl(var(--muted)/0.75); }

  /* --- 3. Configuración del servidor --- */
  .panel{ padding:104px 0 70px; }
  /* minmax(0, 1fr) en vez de 1fr a secas (2026-09-08, bug real encontrado en
     vivo): un track de grid en 1fr tiene min-width:auto por default, que se
     resuelve al min-content del contenido más ancho adentro (acá, la fila de
     un mensaje con sus 3 íconos ✏️⚙️🗑️) — la columna entera se agranda para
     no achicar ese contenido, empuja todo más ancho que el viewport, y en
     mobile los íconos quedan tapados/afuera de pantalla aunque el click
     "parezca" registrar (la tarjeta entera sigue recibiendo el tap). */
  .panel-shell{ display:grid; grid-template-columns:264px minmax(0,1fr); gap:20px; align-items:start; }
  @media (max-width:940px){ .panel-shell{ grid-template-columns:minmax(0,1fr); } }

  /* scrollbar oscuro y fino en TODA la página — sin esto, Windows/Chrome
     dibuja la barra de scroll default gris clara/blanca, que se ve como un
     bloque/cuadrícula pegado encima del glassmorphism oscuro. */
  *{ scrollbar-width:thin; scrollbar-color:hsl(var(--stroke)/0.22) transparent; }
  *::-webkit-scrollbar{ width:6px; height:6px; }
  *::-webkit-scrollbar-track{ background:transparent; }
  *::-webkit-scrollbar-thumb{ background:hsl(var(--stroke)/0.2); border-radius:100px; }
  *::-webkit-scrollbar-thumb:hover{ background:hsl(var(--stroke)/0.35); }
  /* el "grip" para agrandar un <textarea> también lo dibuja el navegador en
     gris claro por default — lo hacemos transparente (sigue siendo
     arrastrable, solo que no se ve como un cuadradito blanco en la esquina) */
  textarea::-webkit-resizer{ background:transparent; }

  .side{ padding:20px 14px; position:sticky; top:96px; }
  @media (max-width:940px){ .side{ position:static; } }
  .side::-webkit-scrollbar{ width:5px; }
  .side::-webkit-scrollbar-thumb{ background:hsl(var(--stroke)/0.14); border-radius:100px; }
  .side-server{
    /* flex-direction:column (2026-09-13) — antes esto era la fila
       icono+nombre directamente; ahora esos dos quedan en un wrapper propio
       adentro (inline style en renderPanel()) y acá abajo puede sumarse el
       selector rápido de otro server, apilado debajo, no al costado. */
    display:flex; flex-direction:column; padding:11px 12px; margin-bottom:16px;
    border-radius:14px; background:hsl(0 0% 100% / 0.05); border:1px solid transparent;
  }
  .side-server .server-ico{ width:34px; height:34px; border-radius:11px; font-size:12px; }
  .side-server b{ font-size:13px; font-weight:700; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .side-server span{ font-size:12px; color:hsl(var(--muted)); font-family:'JetBrains Mono', monospace; }
  .side-switch{
    display:block; width:100%; text-align:center; font-size:12px; color:hsl(var(--muted));
    padding:9px; border-radius:11px; border:1px solid transparent; background:transparent;
    cursor:pointer; font-family:inherit; margin-bottom:20px; transition: background .2s ease, border-color .2s ease;
  }
  .side-switch:hover{ color:hsl(var(--text)); border-color:hsl(var(--gold-2)/0.4); }

  /* Toggle "Menú ▾" del sidebar — SOLO existe visualmente en mobile. En
     desktop .side-toggle-mobile queda display:none y .side-collapsible
     siempre vale grid-template-rows:1fr (abierto), así que en pantallas
     grandes esto no cambia nada de cómo se ve ni se comporta el panel. */
  .side-toggle-mobile{
    display:none; width:100%; align-items:center; justify-content:space-between;
    font-size:13px; font-weight:700; color:hsl(var(--text)); font-family:inherit;
    padding:12px 14px; margin-bottom:12px; border-radius:12px; cursor:pointer;
    background:hsl(0 0% 100% / 0.05); border:1px solid transparent;
    transition: background .2s ease, border-color .2s ease;
  }
  .side-toggle-mobile:active{ transform:scale(0.98); transition-duration:.12s; }
  .side-toggle-chevron{ transition: transform .25s var(--ease-spring); color:hsl(var(--muted)); }
  .side-toggle-mobile.open .side-toggle-chevron{ transform:rotate(180deg); }
  .side-collapsible{ display:grid; grid-template-rows:1fr; transition: grid-template-rows .3s var(--ease-smooth); }
  .side-collapsible-inner{ overflow:hidden; min-height:0; }
  @media (max-width:940px){
    .side-toggle-mobile{ display:flex; }
    .side-collapsible{ grid-template-rows:0fr; }
    .side-collapsible.open{ grid-template-rows:1fr; }
  }

  .side-label{ font-size:12px; text-transform:uppercase; letter-spacing:1.4px; color:hsl(0 78% 58%); font-weight:700; margin:20px 10px 9px; }
  .side-label:first-of-type{ margin-top:0; }
  .side-nav{ display:flex; flex-direction:column; gap:2px; }
  .side-nav button{
    display:flex; align-items:center; gap:10px; width:100%; text-align:left;
    font-size:13px; color:hsl(var(--muted)); padding:9px 11px; border-radius:10px;
    background:transparent; border:none; cursor:pointer; font-family:inherit;
    transition: background .18s ease, color .18s ease;
  }
  .side-nav button:hover{ background:hsl(0 0% 100% / 0.05); color:hsl(var(--text)); }
  .side-nav button.on{ background:hsl(0 0% 100% / 0.08); color:hsl(var(--text)); font-weight:600; }
  .side-nav button .em{ font-size:14px; width:18px; text-align:center; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; color:hsl(var(--gold-2)); }
  .side-nav button .em svg{ width:16px; height:16px; }
  .side-label .cat-ic{ display:inline-flex; vertical-align:-2px; margin-right:2px; }
  .side-label .cat-ic svg{ width:12px; height:12px; }
  /* Ícono de "Salud del bot" dinámico — rojo con pulso cuando hay
     problemas reales (mismo dato que .salud-badge), gris si no. */
  .side-nav button .em.em-alerta{ color:#ff6369; animation:campoFaltaPulso 1.8s ease-in-out infinite; }
  .side-nav button .cnt{ margin-left:auto; font-family:'JetBrains Mono', monospace; font-size:12px; opacity:.5; }
  /* Pedido (2026-08-23): pelotita roja con la cantidad de problemas de Salud
     del bot, a la derecha del ítem en el sidebar — para verlo sin entrar. */
  .salud-badge{
    margin-left:auto; opacity:1 !important; background:#ff6369; color:#fff;
    font-family:'Inter',sans-serif; font-weight:800; font-size:12px;
    min-width:18px; height:18px; padding:0 5px; border-radius:9999px;
    display:inline-flex; align-items:center; justify-content:center;
    box-shadow:0 0 10px rgba(255,99,105,0.5);
    animation: campoFaltaPulso 1.8s ease-in-out infinite;
  }
  .side-nav button.sub-trabajo{ padding-left:26px; font-size:12.5px; }
  .side-nav button.sub-trabajo .em{ font-size:12px; }
  .side-nav button.sub-trabajo .em svg{ width:13px; height:13px; }

  .content{ padding:32px 34px 36px; min-height:560px; overflow:visible; min-width:0; }
  @media (max-width:620px){ .content{ padding:26px 20px 30px; } }
  .content-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:20px; flex-wrap:wrap; padding-bottom:22px; border-bottom:1px solid transparent; }
  .content-head h2{ font-family:'Montserrat', sans-serif; font-weight:800; font-size:28px; letter-spacing:-0.5px; }
  .content-head p{ margin-top:9px; color:hsl(var(--muted)); font-size:13.5px; line-height:1.6; max-width:460px; }
  .cmd-pill{
    font-family:'JetBrains Mono', monospace; font-size:12px;
    background:hsl(var(--gold)/0.14); color:hsl(var(--gold-2));
    padding:5px 12px; border-radius:100px; border:1px solid hsl(var(--gold)/0.26); white-space:nowrap;
  }

  .field{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding:20px 2px; border-bottom:1px solid transparent; flex-wrap:wrap; }
  /* Pedido (2026-08-23): canal/rol que quedó vacío tras clonar/importar una
     plantilla — se marca acá mismo, no solo en una lista aparte (ver
     _marcarCamposFaltantes). Desaparece solo apenas se elige algo. */
  @keyframes campoFaltaPulso{
    0%, 100%{ box-shadow:0 0 0 2px #ff6369, 0 0 16px rgba(255,99,105,0.35); }
    50%{ box-shadow:0 0 0 2px #ff6369, 0 0 28px rgba(255,99,105,0.65); }
  }
  .field.campo-falta{ border-radius:14px; animation: campoFaltaPulso 1.8s ease-in-out infinite; }
  .field:last-child{ border-bottom:none; }
  .field-info{ flex:1; min-width:200px; }
  .field-info b{ font-size:14.5px; font-weight:600; display:block; }
  .field-info small{ display:block; margin-top:5px; font-size:12.5px; color:hsl(var(--muted)); line-height:1.6; }
  .field-ctl{ flex-shrink:0; }
  /* Lista de canales con chips (channels_multi, 2026-10-18): antes no tenía ancho propio y con muchos canales la fila
     de chips se estiraba hasta salirse de la pantalla. Ahora ocupa como mucho 420px (todo el ancho en cel), los chips
     bajan de renglón y, pasados ~5 renglones, la lista scrollea por dentro. */
  .field-ctl:has(> .chm){ flex:0 1 420px; min-width:0; }
  .chm{ width:100%; max-width:420px; min-width:0; }
  .chm .am-chips{ max-height:172px; overflow-y:auto; overscroll-behavior:contain; padding:2px; margin-bottom:8px; scrollbar-width:thin; }
  .chm .am-chip{ max-width:100%; min-width:0; }
  .chm .am-chip-txt{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
  .chm .am-chip b{ flex-shrink:0; }
  .chm select.inp{ width:100%; }
  @media (max-width:640px){ .field-ctl:has(> .chm){ flex-basis:100%; } .chm{ max-width:none; } }
  /* Celular (2026-10-18): el control de cada ajuste no podía achicarse (flex-shrink:0), así que un control ancho
     —monto + unidad, el recuadro "A partir de 1 millón…"— se salía por la derecha. Ahora nunca pasa el ancho de la
     pantalla, el recuadro de vista previa baja de renglón y los pares de campos se reparten el ancho. */
  @media (max-width:640px){
    .field-ctl{ max-width:100%; min-width:0; }
    .duracion-ctl{ align-items:stretch; max-width:100%; }
    .duracion-pair{ flex-wrap:wrap; width:100%; }
    .duracion-pair .inp, .duracion-pair .sel-buscable-wrap{ flex:1 1 96px; min-width:0; }
    .duracion-pair select.inp, .duracion-pair .sel-buscable-wrap .inp{ width:100%; }
    .duracion-preview{ text-align:left; overflow-wrap:anywhere; }
    .duracion-preview.show{ max-height:120px; }
  }

  .inp{
    background:hsl(0 0% 0% / 0.28); border:1px solid transparent;
    border-radius:12px; padding:11px 14px; color:hsl(var(--text));
    font-family:'JetBrains Mono', monospace; font-size:13.5px; width:150px;
    transition: border-color .2s ease, background .2s ease;
  }
  .inp:focus{ outline:none; border-color:hsl(var(--gold-2)/0.55); background:hsl(0 0% 0% / 0.4); }
  .inp:focus-visible{ outline:2px solid hsl(var(--gold-2)/0.7); outline-offset:2px; }
  select.inp{ font-family:'Inter', sans-serif; cursor:pointer; width:190px; }
  /* color-scheme:dark (arriba) ya arregla esto en la mayoría de navegadores,
     pero declarar el fondo/color del popup a mano de nuevo por las dudas —
     algunos Chromium/Firefox todavía ignoran color-scheme para <option>. */
  select.inp option{ background:hsl(var(--surface)); color:hsl(var(--text)); }
  .inp-pair{ display:flex; align-items:center; gap:9px; }
  .inp-pair .inp{ width:104px; }
  .inp-pair span{ font-size:12px; color:hsl(var(--muted)); }
  /* Precio editable de un ítem fijo de Tienda (pedido 2026-09-11) — cambió
     pero todavía no se fue del campo (blur) para guardarse solo. */
  .inp-sucio{ border-color:hsl(var(--gold-2)/0.55) !important; background:hsl(var(--gold-2)/0.06) !important; }

  /* Cooldown global de compra de ,mi-tienda (2026-09-12, pedido explícito) —
     control compuesto número+unidad ("t:'duracion'" en control()), con el
     mismo espíritu que .mt-limite-preview: mostrar el efecto real en texto
     humano ANTES de guardar, con una transición suave en vez de aparecer de
     golpe. .field-ctl ya viene con flex-shrink:0 y align vertical desde
     .field — acá solo se agrega el layout propio del par input+select+preview. */
  .duracion-ctl{ display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
  .duracion-pair{ display:flex; align-items:center; gap:9px; }
  .duracion-pair .inp{ width:88px; }
  .duracion-pair select.inp{ width:130px; }
  .duracion-preview{
    font-size:12.5px; color:hsl(var(--gold-2)); padding:8px 12px; text-align:right;
    background:hsl(var(--gold-2)/0.08); border-radius:10px; max-height:0; opacity:0;
    overflow:hidden; transition: max-height .3s var(--ease-smooth), opacity .25s ease, padding .3s var(--ease-smooth), background .2s ease;
  }
  .duracion-preview.show{ max-height:60px; opacity:1; padding:8px 12px; }
  /* Estado de error real (2026-09-12: impuesto de millonarios que todavía no
     supera al general) — a diferencia del resto de estos previews, ACÁ sí es
     un bloqueo real: save_guild_section rechaza el guardado tal cual está. */
  .duracion-preview.preview-error{ color:hsl(0 70% 65%); background:hsl(0 70% 65%/0.1); }
  /* Micro-feedback al tipear/cambiar unidad — mismo lenguaje visual que el
     resto del panel (pulso corto, no un color de error real, esto no puede
     fallar del lado del cliente). */
  @keyframes duracionPulso{ 0%{ transform:scale(1); } 40%{ transform:scale(1.03); } 100%{ transform:scale(1); } }
  .duracion-preview.pulso{ animation: duracionPulso .32s var(--ease-spring); }

  /* Selector de canal/rol con búsqueda (2026-09-08, pedido explícito: "que
     te deje escribir ahí así encontrás más rápido el canal/rol") — mejora
     progresiva de CUALQUIER <select class="inp"> cuyas opciones tengan
     pinta de canal/rol (empiezan con # o @), sin tocar cada uno de los ~40
     lugares del panel que arman esos <select> a mano: el <select> original
     se esconde pero sigue siendo la fuente de verdad (todo el `onchange`
     que ya tenía cada uno sigue funcionando igual, se le dispara con
     dispatchEvent), y arriba se le pone un input de texto + lista
     filtrable. Ver _volverCanalesYRolesBuscables más abajo. */
  .sel-buscable-wrap{ position:relative; display:inline-block; width:190px; }
  .sel-buscable-wrap .inp{ width:100%; }
  .sel-buscable-wrap:has(#cpObjetivoSelect){ width:100%; }
  .sel-buscable-input{ cursor:text; }
  .sel-buscable-input::placeholder{ color:hsl(var(--muted)); opacity:0.7; }
  .sel-buscable-lista{
    position:absolute; z-index:60; top:calc(100% + 6px); left:0; right:0;
    max-height:220px; overflow-y:auto; padding:6px;
    background:hsl(var(--surface)); border:1px solid hsl(0 0% 100% / 0.1);
    border-radius:12px; box-shadow:0 12px 30px rgba(0,0,0,0.45);
    animation: sbListaFade .16s var(--ease-smooth);
  }
  @keyframes sbListaFade{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:translateY(0); } }
  /* Portal a <body> (2026-09-13) — position:fixed con top/left/width puestos
     a mano en JS (_posicionarLista), por encima de los modales .mt-modal-
     backdrop (z-index:200) para que nunca quede recortada por su
     overflow-y:auto. */
  .sel-buscable-lista-portal{ position:fixed; z-index:500; left:auto; right:auto; top:auto; }
  .sel-buscable-item{ display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:8px; font-size:13px; cursor:pointer; white-space:nowrap; overflow:hidden; transition:transform .15s var(--ease-spring), background .12s ease, color .12s ease; }
  .sel-buscable-item span{ overflow:hidden; text-overflow:ellipsis; }
  .sel-buscable-item img{ width:20px; height:20px; border-radius:50%; object-fit:cover; flex-shrink:0; }
  .sel-buscable-item:hover, .sel-buscable-item.hi{ background:hsl(var(--gold-2)/0.16); color:hsl(var(--gold-2)); transform:translateX(3px); }
  .sel-buscable-item.actual{ font-weight:700; }
  .sel-buscable-vacio{ padding:10px; font-size:12.5px; color:hsl(var(--muted)); text-align:center; }
  /* Foto en el campo cerrado (2026-09-13) — solo aparece cuando el <option>
     activo trae data-icono (hoy, únicamente el selector rápido de server). */
  .sel-buscable-icono{ position:absolute; left:9px; top:50%; transform:translateY(-50%); width:20px; height:20px; border-radius:50%; object-fit:cover; pointer-events:none; z-index:1; }
  .sel-buscable-input.con-icono{ padding-left:36px; }
  /* Selector rápido de server en la sidebar del panel (2026-09-13, pedido
     explícito: "cambiar de server el panel osea de manzas bot a super nova
     asi de facil") — a diferencia del ancho fijo de 190px que usan los ~45
     selects de canal/rol, este ocupa todo el ancho de la sidebar. */
  .side-server .sel-buscable-wrap{ width:100%; margin-top:10px; }

  .sw{
    width:50px; height:29px; border-radius:9999px;
    background: rgba(120,120,128,0.32);
    position:relative; cursor:pointer; border:none; padding:0;
    /* Nunca se aplasta (2026-10-18): en cel, al lado de un título largo (AutoMod, Anti-Nuke, Seguridad adicional…)
       el switch quedaba reducido a una bolita de 14-30px de ancho. */
    flex-shrink:0;
    transition: background .35s cubic-bezier(0.25, 1, 0.5, 1), transform .3s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .sw.just-toggled{ animation: swPop .38s cubic-bezier(0.34, 1.56, 0.64, 1); }
  .sw:focus-visible{ outline:2px solid hsl(var(--gold-2)/0.7); outline-offset:3px; }
  @keyframes swPop{ 0%{ transform:scale(1); } 45%{ transform:scale(1.12); } 100%{ transform:scale(1); } }
  .sw i{
    position:absolute; top:2px; left:2px; width:25px; height:25px; border-radius:50%;
    background:#fff; box-shadow: 0 3px 8px rgba(0,0,0,0.25), 0 1px 2px rgba(0,0,0,0.15);
    transition: transform .38s cubic-bezier(0.34, 1.56, 0.64, 1), width .18s cubic-bezier(0.34, 1.56, 0.64, 1), background .3s ease;
  }
  .sw:active i{ width:29px; }
  .sw.on{ background:#30d158; box-shadow: 0 0 16px rgba(48,209,88,0.45), inset 0 0 0 1px rgba(255,255,255,0.15); }
  .sw.on i{ transform:translateX(21px); }
  .sw.on:active i{ transform:translateX(17px); width:29px; }
  .sw:not(.on):active i{ width:29px; }
  .sw-sm{ width:38px; height:22px; }
  .sw-sm i{ width:18px; height:18px; }
  .sw-sm.on i{ transform:translateX(16px); }
  .sw-sm:active i{ width:22px; }
  .sw-sm.on:active i{ transform:translateX(12px); width:22px; }

  .savebar{
    position:sticky; bottom:20px; margin-top:28px;
    display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
    padding:15px 18px 15px 22px; border-radius:100px;
    opacity:0; visibility:hidden; transform:translateY(10px) scale(0.97);
    transition: opacity .22s var(--ease-smooth), transform .22s var(--ease-smooth), visibility .22s;
    pointer-events:none;
  }
  .savebar.show{ opacity:1; visibility:visible; transform:translateY(0) scale(1); pointer-events:auto; }
  .savebar span{ font-size:12.5px; color:hsl(var(--muted)); }
  .savebar span b{ color:hsl(var(--gold-2)); font-family:'JetBrains Mono', monospace; }
  .savebar-btns{ display:flex; gap:10px; }
  /* Celular (2026-10-18): con "Ver impacto" + "Descartar" + "Guardar cambios" la fila no entraba y "Guardar" quedaba
     cortado por el borde. Ahora los secundarios se reparten un renglón y "Guardar cambios" va abajo a todo el ancho,
     donde cae el pulgar. */
  @media (max-width:640px){
    .savebar{ border-radius:24px; padding:14px; gap:12px; bottom:12px; }
    .savebar > span{ width:100%; text-align:center; }
    .savebar-btns{ width:100%; flex-wrap:wrap; }
    .savebar-btns .btn{ flex:1 1 0; justify-content:center; min-height:44px; }
    .savebar-btns .btn-solid{ flex-basis:100%; }
  }

  /* Vista previa de impacto (2026-09-18) */
  .imp-sub{ font-size:12.5px; color:hsl(var(--muted)); line-height:1.6; margin-bottom:14px; }
  .imp-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
  .imp-chip{ font-size:12px; padding:5px 11px; border-radius:9999px; background:hsl(var(--gold-2)/0.08); color:hsl(var(--gold-2)); }
  .imp-chip b{ font-family:'JetBrains Mono',monospace; font-weight:600; }
  .imp-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-bottom:18px; }
  .imp-card{ padding:16px 18px; border-radius:18px; background:hsl(var(--text)/0.04); transition:transform .22s var(--ease-spring), background .2s ease; }
/* simulacro del Anti-Nuke (2026-10-25) */
.am-sim{ margin:4px 0 16px; padding:14px 16px; border-radius:14px; background:hsl(var(--text)/0.04); border:1px solid hsl(var(--text)/0.08); font-size:13.5px; line-height:1.55; }
.am-sim-cab{ display:flex; align-items:baseline; gap:6px; margin-bottom:8px; }
.am-sim-cab b{ font-size:20px; }
.am-sim-cab small{ color:hsl(var(--muted)); }
.am-sim ul{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.am-sim li{ display:flex; gap:8px; }
.am-sim-espera, .am-sim-error{ color:hsl(var(--muted)); }
  .imp-card:hover{ transform:translateY(-2px); background:hsl(var(--text)/0.06); }
  .imp-card-t{ font-size:12px; color:hsl(var(--muted)); text-transform:uppercase; letter-spacing:.06em; margin-bottom:8px; }
  .imp-card-v{ font-family:'JetBrains Mono',monospace; font-size:17px; color:hsl(var(--text)); }
  .imp-card-v small{ color:hsl(var(--muted)); font-size:12px; }
  .imp-card-d{ margin-top:6px; font-size:12.5px; font-family:'JetBrains Mono',monospace; }
  .imp-up{ color:hsl(var(--leaf)); } .imp-down{ color:hsl(var(--apple-2)); } .imp-flat{ color:hsl(var(--muted)); }
  .imp-h{ font-size:12px; color:hsl(var(--muted)); text-transform:uppercase; letter-spacing:.06em; margin:20px 0 10px; }
  .imp-alerta{ padding:11px 14px; border-radius:14px; font-size:13px; line-height:1.55; margin-bottom:8px; background:hsl(var(--text)/0.04); }
  .imp-alerta.warn{ background:hsl(var(--apple-2)/0.12); color:hsl(var(--text)); }
  .imp-tramo{ display:grid; grid-template-columns:130px 1fr auto; gap:12px; align-items:center; font-size:13px; padding:6px 0; }
  .imp-bar{ height:8px; border-radius:9999px; background:hsl(var(--text)/0.06); position:relative; overflow:hidden; }
  .imp-bar i{ position:absolute; top:0; bottom:0; width:0; border-radius:9999px; transition:width .6s var(--ease-out-strong); }
  .imp-cols{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
  .imp-fila{ display:flex; justify-content:space-between; gap:10px; font-size:13px; padding:5px 0; }
  .imp-fila span:first-child{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .imp-det{ font-size:12px; color:hsl(var(--muted)); line-height:1.6; margin-top:18px; }
  .imp-det summary{ cursor:pointer; }
  .imp-det li{ margin:5px 0 0 16px; }
  @media (max-width:620px){ .imp-grid,.imp-cols{ grid-template-columns:1fr; } .imp-tramo{ grid-template-columns:100px 1fr auto; } }
  .imp-inline-wrap{ margin-top:20px; padding-top:16px; border-top:1px solid hsl(var(--text)/0.08); }
  @media not all /* movimiento reducido: lo decide el botón "Animaciones" del sitio (html[data-motion=reduced], ver manza-a11y.css) */{ .imp-card,.imp-bar i{ transition:none; } }

  .toast{
    position:fixed; left:50%; bottom:34px; transform:translate(-50%, 24px); z-index:80;
    padding:13px 24px; border-radius:100px; font-size:13.5px; font-weight:600;
    background:hsl(var(--surface)/0.94); backdrop-filter:blur(18px);
    border:1px solid hsl(var(--leaf)/0.4); box-shadow:0 20px 50px hsl(0 0% 0% / 0.5);
    opacity:0; visibility:hidden; transition: opacity .25s ease, transform .25s ease, visibility .25s;
  }
  .toast.show{ opacity:1; visibility:visible; transform:translate(-50%, 0); }
  /* Toast de error (2026-08-30, corrección real: "se bugea cuando toco
     stickers o gifs o emojis") — la causa real era alert() nativo en los
     errores de ese módulo entero (Posts/Chats/Reportes/Encuestas): un
     alert() bloquea TODA la pestaña hasta que alguien lo cierra a mano, se
     siente exactamente como "se colgó". Mismo toast de siempre, borde rojo
     en vez de verde y se queda un toque más (ver _toastMostrar). */
  .toast.error{ border-color:hsl(0 75% 55% / 0.5); }

  /* ============ ONBOARDING — tutorial NPC-style, primera vez que se entra ============
     El "spotlight" NO se hace subiendo el z-index del botón del sidebar —
     eso fallaba porque .view ya arma su propio stacking context (z-index:3),
     así que nada adentro puede pisar por encima de un overlay que cuelga
     directo del <body>. En vez de eso: un solo div del tamaño del botón
     target, con box-shadow de spread 9999px — la "sombra" ES el oscurecido
     de toda la pantalla, y el hueco de esa sombra (donde está el div) queda
     sin tocar. El botón real no se mueve ni se toca: no hay nada que pueda
     tapar. */
  .onb-hole{
    position:fixed; z-index:9997; border-radius:12px; pointer-events:none;
    opacity:0; transition:opacity .3s ease, top .3s var(--ease-smooth), left .3s var(--ease-smooth), width .3s var(--ease-smooth), height .3s var(--ease-smooth);
    animation:onbPulse 1.6s ease-in-out infinite;
  }
  .onb-hole.show{ opacity:1; }
  @keyframes onbPulse{
    0%, 100%{ box-shadow:0 0 0 3px hsl(var(--apple-2)/0.85), 0 0 0 9999px hsl(0 0% 0% / 0.82), 0 0 34px 6px hsl(var(--apple-2)/0.5); }
    50%{ box-shadow:0 0 0 3px hsl(var(--apple-2)/1), 0 0 0 9999px hsl(0 0% 0% / 0.82), 0 0 48px 12px hsl(var(--apple-2)/0.8); }
  }
  .onb-box{
    position:fixed; left:50%; top:62%; transform:translate(-50%, -50%) scale(0.95); z-index:9999;
    width:min(600px, calc(100vw - 40px)); opacity:0; pointer-events:none;
    transition:opacity .25s var(--ease-smooth), transform .25s var(--ease-smooth);
  }
  .onb-box.show{ opacity:1; transform:translate(-50%, -50%) scale(1); pointer-events:auto; }
  .onb-card{
    display:flex; gap:16px; align-items:flex-start; padding:18px 20px;
    background:hsl(var(--surface)/0.97); backdrop-filter:blur(20px);
    border:2px solid hsl(var(--apple-2)/0.65); border-radius:16px;
    box-shadow:0 24px 60px hsl(0 0% 0% / 0.55), 0 0 40px hsl(var(--apple-2)/0.12); cursor:pointer;
  }
  .onb-portrait{
    width:52px; height:52px; border-radius:50%; object-fit:cover; flex-shrink:0;
    border:2px solid hsl(var(--apple-2)/0.8); animation:onbBob 2.2s ease-in-out infinite;
  }
  @keyframes onbBob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-4px); } }
  .onb-texto{ min-width:0; flex:1; }
  .onb-top-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px; }
  .onb-nombre{ font-size:12px; font-weight:800; letter-spacing:0.06em; text-transform:uppercase; color:hsl(var(--apple-2)); }
  .onb-skip{
    font-size:12px; font-weight:600; color:hsl(var(--muted)); background:transparent; border:none;
    cursor:pointer; padding:2px 4px; font-family:inherit; transition:color .16s ease, transform .16s ease;
  }
  @media (pointer: coarse){ .onb-skip{ padding:12px 10px; margin:-10px -8px; } .seg-tab-sub{ min-height:40px; } }  /* área táctil de 44px sin mover el dibujo */
  .onb-skip:hover{ color:hsl(var(--fg)); }
  .onb-skip:active{ transform:scale(0.94); }
  .onb-linea{ font-family:'JetBrains Mono', monospace; font-size:14px; line-height:1.65; color:hsl(var(--fg)); min-height:58px; }
  .onb-linea b{ color:hsl(var(--gold-2)); font-weight:800; }
  .onb-linea span{ opacity:0; animation:onbWord .18s ease forwards; }
  @keyframes onbWord{ from{ opacity:0; transform:translateY(2px); } to{ opacity:1; transform:translateY(0); } }
  .onb-siguiente{
    margin-top:8px; font-size:12px; color:hsl(var(--muted)); text-align:right;
    animation:onbBlink 1.1s steps(2) infinite;
  }
  @keyframes onbBlink{ 50%{ opacity:0.25; } }

  /* ============ SWITCHER DE IDIOMA — flotante, aparte del nav, arriba a
     la derecha. Segmented control estilo iOS: pastilla que desliza con
     spring easing. Las banderas son SVG inline, no emoji — Windows/Segoe UI
     Emoji no dibuja banderas de país, muestra las siglas "US"/"ES" en vez
     del ícono, así que un emoji de bandera literalmente no se ve como
     bandera para una porción enorme de los usuarios. SVG se ve igual en
     cualquier lado. ============ */
  .lang-switch-wrap{
    position:fixed; top:22px; right:24px; z-index:70;
    display:flex; align-items:center; gap:10px;
  }
  /* Botón de sonido de notificaciones (2026-08-29) — a la izquierda del
     switcher de idioma, mismo look glass que el resto de botones flotantes. */
  .notif-sonido-btn{
    width:38px; height:38px; border-radius:50%; border:1px solid transparent;
    background:hsl(var(--surface)/0.85); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    box-shadow:0 8px 24px hsl(0 0% 0% / 0.25); cursor:pointer; font-size:16px;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
    transition:transform 160ms var(--ease-spring), opacity .2s ease;
  }
  .notif-sonido-btn:hover{ transform:scale(1.08); }
  .notif-sonido-btn:active{ transform:scale(0.9); }
  .notif-sonido-btn.muted{ opacity:0.55; }
  .lang-switch{
    position:relative; display:inline-flex; align-items:center; flex-shrink:0;
    padding:3px; gap:1px; border-radius:9999px;
    background:hsl(var(--surface)/0.85); backdrop-filter:blur(16px);
    border:1px solid transparent; box-shadow:0 8px 24px hsl(0 0% 0% / 0.25);
  }
  .lang-switch .lang-pill{
    position:absolute; top:3px; left:3px; bottom:3px; width:34px;
    border-radius:9999px; background:hsl(var(--apple-2)/0.92);
    box-shadow:0 3px 10px hsl(var(--apple-2)/0.45);
    transition:transform 380ms var(--ease-spring);
  }
  .lang-switch[data-lang="en"] .lang-pill{ transform:translateX(35px); }
  .lang-switch[data-lang="pt"] .lang-pill{ transform:translateX(70px); }
  .lang-switch[data-lang="fr"] .lang-pill{ transform:translateX(105px); }
  .lang-switch button{
    position:relative; z-index:1; display:flex; align-items:center; justify-content:center;
    width:34px; height:28px; border:none; background:transparent; border-radius:9999px;
    padding:0; cursor:pointer; opacity:0.45; -webkit-tap-highlight-color:transparent;
    transition:opacity 160ms ease, transform 140ms var(--ease-spring);
  }
  .lang-switch button svg{ width:19px; height:13px; border-radius:2px; display:block; box-shadow:0 0 0 1px hsl(0 0% 0% / 0.18); }
  .lang-switch button.on{ opacity:1; animation:langPop 380ms var(--ease-spring); }
  @keyframes langPop{ 0%{ transform:scale(0.7); } 55%{ transform:scale(1.18); } 100%{ transform:scale(1); } }
  @media not all /* movimiento reducido: lo decide el botón "Animaciones" del sitio (html[data-motion=reduced], ver manza-a11y.css) */{ .lang-switch button.on{ animation:none; } }
  .lang-switch button:active{ transform:scale(0.86); }
  @media (hover:hover) and (pointer:fine){
    .lang-switch button:not(.on):hover{ opacity:0.75; }
  }
  @media (max-width:640px){
    .lang-switch-wrap{ top:14px; right:14px; gap:8px; }
    .notif-sonido-btn{ width:34px; height:34px; font-size:15px; }
  }

  /* ============================================================
     NOTIFICACIÓN ESTILO iOS (2026-08-29) — "avisale al autor cuando aplican
     o comentan su plantilla". Banner que baja debajo del nav, con sonido
     (Web Audio, sin archivo — 2 tonos cortos tipo campanita) y silenciable.
     Entrada: spring (es un evento ocasional — algo que pasa pocas veces por
     sesión, se banca algo de "vida"). Salida: más rápida y lineal, mismo
     criterio de asimetría que ya usa el resto del sitio (rápido al soltar,
     deliberado al aparecer). ============================================ */
  #notifToastZona{
    position:fixed; top:88px; left:50%; transform:translateX(-50%); z-index:200;
    display:flex; flex-direction:column; gap:10px; width:min(440px, calc(100vw - 32px));
    pointer-events:none;
  }
  @media (max-width:640px){ #notifToastZona{ top:70px; } }
  /* Glassmorphic de verdad (2026-08-29, pedido explícito) — mismos tokens
     que TODO el resto del sitio (.glass: --glass-bg/--glass-blur/
     --glass-border) en vez de un gris plano con blur propio, así se ve
     como una tarjeta más del sistema, no una pieza aparte. */
  .notif-toast{
    pointer-events:auto; display:flex; align-items:flex-start; gap:12px; padding:14px 16px;
    border-radius:18px; background: var(--glass-bg);
    backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    border: var(--glass-border); box-shadow:0 20px 45px rgba(0,0,0,0.4);
    opacity:0; transform:translateY(-24px) scale(0.95); cursor:pointer;
    transition:transform 380ms var(--ease-spring), opacity 300ms ease;
  }
  .notif-toast.mostrado{ opacity:1; transform:translateY(0) scale(1); }
  .notif-toast.saliendo{ opacity:0; transform:translateY(-16px) scale(0.96); transition:transform 220ms ease-out, opacity 200ms ease-out; }
  .notif-toast:hover{ border-color:hsl(var(--gold-2)/0.4); }
  .notif-toast-icono{ font-size:22px; flex-shrink:0; line-height:1; margin-top:1px; }
  .notif-toast-avatar{ width:36px; height:36px; border-radius:50%; flex-shrink:0; object-fit:cover; margin-top:1px; box-shadow:0 0 0 2px hsl(0 0% 100% / 0.1); }
  .notif-toast-body{ flex:1; min-width:0; }
  .notif-toast-titulo{ font-weight:700; font-size:13.5px; margin-bottom:2px; }
  .notif-toast-msg{ font-size:12.5px; color:hsl(var(--muted)); line-height:1.4; }
  .notif-toast-cerrar{ background:none; border:none; color:hsl(var(--muted)); font-size:12px; cursor:pointer; padding:2px; flex-shrink:0; transition:color .2s ease; }
  .notif-toast-cerrar:hover{ color:hsl(var(--text)); }

  /* ============================================================
     BANDEJA DE ENTRADA (2026-08-29, segunda vuelta) — campanita con
     contador de no-leídas + panel desplegable con el historial completo.
     A diferencia del toast de arriba (transitorio, se pierde a los 20s si
     no lo viste), esto queda guardado hasta que lo abrís de verdad.
     ============================================================ */
  .notif-bandeja-btn{
    position:relative; width:38px; height:38px; border-radius:50%; border:1px solid transparent;
    background:hsl(var(--surface)/0.85); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    box-shadow:0 8px 24px hsl(0 0% 0% / 0.25); cursor:pointer; font-size:16px;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
    transition:transform 160ms var(--ease-spring);
  }
  .notif-bandeja-btn[hidden]{ display:none !important; } /* mismo motivo que .notif-bandeja-panel arriba */
  .notif-bandeja-btn:hover{ transform:scale(1.08); }
  .notif-bandeja-btn:active{ transform:scale(0.9); }
  .notif-bandeja-btn svg{ width:18px; height:18px; }
  .notif-sonido-btn svg{ width:17px; height:17px; }
  .notif-bandeja-badge{
    position:absolute; top:-3px; right:-3px; min-width:17px; height:17px; padding:0 4px;
    border-radius:9999px; background:#ff453a; color:#fff; font-size:12px; font-weight:700;
    display:flex; align-items:center; justify-content:center; line-height:1;
    box-shadow:0 0 0 2px hsl(var(--surface)); font-family:'JetBrains Mono',monospace;
  }
  /* Glassmorphic real, mismos tokens que .glass (2026-08-29, pedido
     explícito: "siento q las ui de ahi deberian de ser glassmorphic
     tambien") — antes era un gris plano con blur propio suelto. */
  .notif-bandeja-panel{
    position:fixed; top:70px; right:24px; z-index:80; width:min(380px, calc(100vw - 32px));
    max-height:min(560px, calc(100vh - 100px)); display:flex; flex-direction:column;
    border-radius: var(--glass-radius); background: var(--glass-bg);
    backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    border: var(--glass-border); box-shadow:0 24px 60px rgba(0,0,0,0.5); overflow:hidden;
    transform-origin:top right; animation:bandejaPop 260ms var(--ease-spring);
  }
  /* Bug real (2026-08-29, "toco la campana para cerrarla y no funciona"):
     `display:flex` acá arriba tiene la MISMA especificidad que la regla
     [hidden]{display:none} del navegador — y con especificidad empatada,
     una regla de autor (esta) le gana a la del navegador, así que
     `panel.hidden = true` podía dejar de esconder el panel de verdad.
     Mismo motivo por el que los artifacts fuerzan [hidden]{display:none
     !important} como reset — acá se hace lo mismo, puntual. */
  .notif-bandeja-panel[hidden]{ display:none !important; }
  /* Mismo bug, encontrado de nuevo en vivo (2026-08-30) — esta vez en
     "Cargar más" de El Muro: `.btn{display:inline-flex}` es autor con la
     misma especificidad que [hidden] del navegador, así que un
     `<button class="btn ..." hidden>` se seguía viendo. En vez de ir
     agregando un override puntual cada vez que aparece en un botón nuevo
     (van 2 ya), se corta acá de raíz para TODA la clase `.btn` — cualquier
     botón del sitio que use `hidden` para esconderse queda a salvo. */
  .btn[hidden]{ display:none !important; }
  @keyframes bandejaPop{ 0%{ opacity:0; transform:scale(0.92) translateY(-8px); } 100%{ opacity:1; transform:scale(1) translateY(0); } }
  @media not all /* movimiento reducido: lo decide el botón "Animaciones" del sitio (html[data-motion=reduced], ver manza-a11y.css) */{ .notif-bandeja-panel{ animation:none; } }
  .notif-bandeja-head{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:14px 16px; border-bottom:1px solid rgba(255,255,255,0.08); flex-shrink:0;
  }
  .notif-bandeja-head b{ font-size:14px; }
  .notif-bandeja-head .btn-link{ background:none; border:none; color:hsl(var(--gold-2)); font-size:12px; cursor:pointer; padding:0; }
  .notif-bandeja-head .btn-link:hover{ text-decoration:underline; }
  .notif-bandeja-lista{ overflow-y:auto; flex:1; }
  .notif-bandeja-item{
    position:relative; display:flex; align-items:flex-start; gap:10px; padding:12px 16px; cursor:pointer;
    border-bottom:1px solid rgba(255,255,255,0.05); transition:background .15s ease;
  }
  .notif-bandeja-item:hover{ background:rgba(255,255,255,0.04); }
  /* Leída vs no-leída (pedido explícito) — la NO leída pega fuerte (fondo
     dorado, título a full color+bold, punto dorado); la YA leída se apaga
     a gris (título/mensaje atenuados) pero el ícono/avatar de quién la
     mandó mantiene SU color de siempre — no se grisea la identidad, solo
     el texto de la notificación en sí. */
  .notif-bandeja-item.no-leida{ background:hsl(var(--gold-2)/0.08); }
  .notif-bandeja-item.no-leida .notif-bandeja-titulo{ color:hsl(var(--text)); font-weight:700; }
  .notif-bandeja-item:not(.no-leida) .notif-bandeja-titulo{ color:hsl(var(--muted)); font-weight:500; }
  .notif-bandeja-item:not(.no-leida) .notif-bandeja-msg{ opacity:.7; }
  .notif-bandeja-avatar{ width:34px; height:34px; border-radius:50%; flex-shrink:0; object-fit:cover; margin-top:1px; }
  .notif-bandeja-icono{ font-size:19px; flex-shrink:0; line-height:1; margin-top:2px; width:34px; text-align:center; }
  .notif-bandeja-body{ flex:1; min-width:0; }
  .notif-bandeja-titulo{ font-weight:600; font-size:13px; line-height:1.35; }
  .notif-bandeja-msg{ font-size:12px; color:hsl(var(--muted)); margin-top:2px; line-height:1.4; }
  .notif-bandeja-fecha{ font-size:12px; color:hsl(var(--muted)/0.7); margin-top:4px; }
  .notif-bandeja-punto{ position:absolute; top:14px; right:14px; width:8px; height:8px; border-radius:50%; background:hsl(var(--gold-2)); flex-shrink:0; }
  .notif-bandeja-vacio{ text-align:center; color:hsl(var(--muted)); font-size:13px; padding:28px 16px; }
  .notif-bandeja-acciones{ display:flex; gap:8px; margin-top:8px; }
  .notif-bandeja-aceptar, .notif-bandeja-rechazar{
    border:none; border-radius:9999px; padding:6px 14px; font-size:12px; font-weight:600; cursor:pointer;
    transition:transform 140ms var(--ease-spring), opacity .15s ease;
  }
  .notif-bandeja-aceptar{ background:#30d158; color:#04170a; }
  .notif-bandeja-rechazar{ background:rgba(255,255,255,0.1); color:#ff453a; }
  .notif-bandeja-aceptar:hover, .notif-bandeja-rechazar:hover{ transform:scale(1.05); }
  .notif-bandeja-aceptar:active, .notif-bandeja-rechazar:active{ transform:scale(0.94); }
  @media (max-width:640px){ .notif-bandeja-panel{ top:60px; right:14px; left:14px; width:auto; } }

  /* Botones de amistad/seguir en el detalle de una plantilla de la
     Comunidad (2026-08-29) — mismo `.btn.btn-outline.btn-sm` de siempre,
     `.on` marca el estado activo (Amigos/Siguiendo) con el acento dorado. */
  .plant-com-autor-acciones{ display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }
  .plant-com-autor-acciones .btn.on{ border-color:hsl(var(--gold-2)/0.6); color:hsl(var(--gold-2)); }
  /* Bloquear usuario (2026-08-29, pedido explícito) */
  .btn-outline.danger{ color:#ff6b61; }
  .btn-outline.danger:hover{ border-color:#ff6b61 !important; box-shadow:0 16px 36px rgba(0,0,0,0.35), 0 0 45px rgba(255,107,97,0.25); }

  /* ============================================================
     PERFIL DE CUENTA — página completa (2026-08-29, segundo rediseño:
     "debe de ser una pagina aparte, q sea grande", referencia de Xbox).
     Layout adaptado a nuestro lenguaje visual: hero con halo dorado→manzana
     (mismo gradiente que .glass::before, escalado), avatar grande superpuesto
     al borde inferior del hero, fila de stats (Amigos/Siguiendo/Seguidores)
     clickeable, Biografía + Actividad (servers que administrás / plantillas
     publicadas) en tarjetas .glass debajo. El link "Perfil" del dropdown
     apuntaba a una función que nunca se había escrito (irAMiPerfil) — el
     backend (db.py/app.py) ya estaba completo, solo faltaba esto.
     ============================================================ */
  .perfil-hero{
    position:relative; height:200px; border-radius:var(--glass-radius); overflow:hidden; margin-bottom:0;
    background:
      radial-gradient(120% 160% at 15% -10%, hsl(var(--gold-2)/0.38), transparent 55%),
      radial-gradient(120% 160% at 100% 120%, hsl(var(--apple-2)/0.32), transparent 55%),
      hsl(var(--surface)/0.55);
    border: var(--glass-border); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  }
  @media (max-width:640px){ .perfil-hero{ height:150px; } }
  .perfil-hero{ background-size:cover !important; background-position:center !important; }
  /* Botón "cambiar banner" (2026-08-29, pedido explícito: subir un
     archivo propio, no un link). Bug real (2026-08-29, 2 vueltas): puesto
     con position:absolute flotando ADENTRO del hero, quedaba tapado —
     primero por la nav bar fija (.nav-float, z-index:60, cubre 0-114px de
     alto), después por .perfil-header (el avatar, que se superpone al
     hero con margin negativo y arma su propio stacking context) — el
     click nunca le llegaba al botón por más que se viera "encima"
     visualmente, confirmado con elementFromPoint en el navegador real las
     2 veces. Solución real: SIN position:absolute — fila normal en el
     flujo del documento, debajo del header, alineada a la derecha. Ahí no
     hay ningún elemento superpuesto posible.*/
  .perfil-banner-row{ display:flex; justify-content:flex-end; gap:8px; margin:0 8px 18px; }
  .perfil-banner-row .perfil-banner-btn{ background:rgba(255,255,255,0.06); backdrop-filter:none; }
  .perfil-banner-row .perfil-banner-btn:hover{ background:rgba(255,255,255,0.1); }
  .perfil-banner-btn{
    display:flex; align-items:center; gap:7px; padding:8px 14px; border-radius:9999px; border:none; cursor:pointer;
    background:hsl(0 0% 8% / 0.65); backdrop-filter:blur(12px); color:hsl(var(--text)); font-size:12.5px; font-weight:600;
    transition:transform .18s var(--ease-spring), background .18s ease;
  }
  .perfil-banner-btn:hover{ background:hsl(0 0% 8% / 0.85); transform:translateY(-1px); }
  .perfil-banner-btn:active{ transform:scale(0.95); }
  .perfil-banner-btn svg{ width:14px; height:14px; }
  .perfil-banner-btn.quitar{ color:#ff6b61; }
  .perfil-header{ display:flex; align-items:flex-end; gap:22px; margin:-56px 8px 26px; position:relative; z-index:2; flex-wrap:wrap; }
  @media (max-width:640px){ .perfil-header{ margin-top:-42px; gap:14px; } }
  .perfil-page-avatar-wrap{ position:relative; flex-shrink:0; }
  .perfil-page-avatar{ width:112px; height:112px; border-radius:50%; object-fit:cover; border:4px solid hsl(var(--bg)); box-shadow:0 14px 34px rgba(0,0,0,0.45); }
  @media (max-width:640px){ .perfil-page-avatar{ width:84px; height:84px; } }
  .perfil-page-presencia{
    position:absolute; bottom:6px; right:6px; width:20px; height:20px; border-radius:50%;
    background:hsl(var(--muted)); border:3px solid hsl(var(--bg));
  }
  .perfil-page-presencia.online{ background:#30d158; box-shadow:0 0 12px rgba(48,209,88,0.6); }
  .perfil-page-idbox{ padding-bottom:12px; }
  .perfil-page-nombre-row{ display:flex; align-items:center; gap:8px; }
  /* Bug real (2026-08-29): la insignia de verificado (16px, sin fondo
     propio) quedaba invisible sobre banners claros/con mucho color — esta
     zona se superpone al borde inferior del hero a propósito (mismo
     motivo que el avatar). Fondo circular oscuro con blur para que
     siempre se lea, sea cual sea el banner detrás. */
  .perfil-verificado-badge{
    display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%;
    background:hsl(0 0% 6% / 0.65); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); flex-shrink:0;
  }
  .perfil-page-nombre-row h1{ font-family:'Montserrat',sans-serif; font-weight:800; font-size:clamp(21px,3vw,28px); }
  /* Color de nombre + rainbow (2026-08-29, pedido explícito) — degradé
     LETRA POR LETRA, igual que .wave-ink del título de la landing (ver
     wrapLetters/_wrapLettersTexto) — pedido explícito, con la paleta que
     pidió puntual (rojo/verde/amarillo/naranja/azul, 5 tonos) en vez de
     los 2 de .wave-ink. Cada letra (armada por _perfilWrapRainbow) tiene
     su propio animation-delay, así el color viaja de una letra a la
     siguiente, no un degradé quieto. Pedido explícito (2026-08-29,
     segunda vez): esta animación puntual NO respeta prefers-reduced-motion
     — a diferencia de TODO el resto del sitio (.wave-ink incluido, que sí
     lo sigue respetando sin cambios), el usuario pidió específicamente que
     esta se vea animada siempre, es la gracia de la insignia. */
  .perfil-nombre-rainbow span{ display:inline-block; animation: perfilRainbowLetra 2s ease-in-out infinite; }
  @keyframes perfilRainbowLetra{
    0%{ color:#ff3b30; } 20%{ color:#34c759; } 40%{ color:#ffcc00; }
    60%{ color:#ff9500; } 80%{ color:#0a84ff; } 100%{ color:#ff3b30; }
  }
  .perfil-color-picker{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; align-items:center; }
  .perfil-swatch{
    width:26px; height:26px; border-radius:50%; border:2px solid transparent; cursor:pointer; flex-shrink:0; padding:0;
    display:flex; align-items:center; justify-content:center; font-size:12px; color:hsl(var(--muted));
    transition:transform .18s var(--ease-spring), border-color .18s ease;
  }
  .perfil-swatch:hover{ transform:scale(1.15); }
  .perfil-swatch.on{ border-color:hsl(0 0% 100%); box-shadow:0 0 0 2px hsl(var(--bg)), 0 0 0 3px hsl(var(--gold-2)); }
  .perfil-swatch.rainbow{ background: linear-gradient(90deg, #ff5252, #ffb347, #f5f542, #4ade80, #60a5fa, #c084fc); }
  .perfil-swatch.rainbow.bloqueado{ opacity:.45; cursor:not-allowed; filter:grayscale(.7); background:hsl(var(--surface)); }
  .perfil-swatch svg{ width:11px; height:11px; }
  .perfil-swatch.reset{ background:rgba(255,255,255,0.06); }
  .perfil-swatch.reset svg{ width:11px; height:11px; }
  /* Swatch "cualquier color" (2026-08-29, segunda vuelta) — envuelve el
     `<input type="color">` nativo (el mismo que ya usan los editores de
     embed) en una cápsula redonda igual a las demás, en vez del cuadrado
     feo de fábrica del navegador. El input real queda invisible pero
     clickeable encima, técnica estándar para estilizar un color picker
     nativo sin perder su funcionalidad real. */
  .perfil-swatch-custom{ position:relative; overflow:hidden; background:rgba(255,255,255,0.08); }
  .perfil-swatch-custom svg{ width:13px; height:13px; pointer-events:none; }
  .perfil-swatch-custom input[type="color"]{
    position:absolute; inset:-6px; width:calc(100% + 12px); height:calc(100% + 12px);
    opacity:0; cursor:pointer; border:none; padding:0;
  }
  /* Color de burbuja de chat, exclusivo de verificados (2026-08-30) —
     grilla de colores + previsualización en vivo, pedido explícito punto
     por punto: modal centrado, fondo oscurecido, texto explicativo, chips,
     y una burbuja de muestra abajo que cambia al tocar cada chip. */
  .perfil-burbuja-grid{ display:flex; gap:10px; margin-bottom:16px; flex-wrap:wrap; }
  .perfil-burbuja-chip{
    width:32px; height:32px; border-radius:50%; border:2px solid transparent; cursor:pointer; flex-shrink:0; padding:0;
    transition:transform .18s var(--ease-spring), border-color .18s ease;
  }
  .perfil-burbuja-chip:hover{ transform:scale(1.12); }
  .perfil-burbuja-chip.on{ border-color:hsl(0 0% 100%); box-shadow:0 0 0 2px hsl(var(--bg)), 0 0 0 3px hsl(var(--gold-2)); }
  /* Swatch del marco "glass" (2026-08-30) — el único que no es un color
     sólido, necesita su propio frost para que el picker ya muestre de qué
     se trata antes de elegirlo. */
  .perfil-burbuja-chip-glass{ background:rgba(255,255,255,0.22) !important; backdrop-filter:blur(4px); border:1px solid rgba(255,255,255,0.4) !important; }
  .perfil-burbuja-preview-fondo{
    padding:14px; border-radius:14px; background:hsl(0 0% 4%);
    display:flex; justify-content:flex-end;
  }
  .perfil-page-handle-row{ display:flex; align-items:center; gap:8px; margin-top:4px; }
  .perfil-page-handle-row span{ color:hsl(var(--muted)); font-family:'JetBrains Mono',monospace; font-size:13.5px; }
  .perfil-page-handle-input{ font-family:'JetBrains Mono',monospace; font-size:13px; padding:6px 10px; width:200px; }
  .perfil-page-presencia-txt{ font-size:12px; color:hsl(var(--muted)); margin-top:5px; }
  /* Estado personalizado tipo Discord (2026-08-30, pedido explícito) */
  .perfil-page-estado{ display:flex; align-items:center; gap:5px; font-size:13px; color:hsl(var(--text)/0.85); margin-top:4px; }
  .perfil-estado-emoji-btn{
    width:42px; height:42px; border-radius:12px; border:1.5px solid hsl(var(--stroke)/0.14); cursor:pointer;
    background:rgba(255,255,255,0.05); font-size:20px; display:flex; align-items:center; justify-content:center; flex-shrink:0;
    transition:background .18s ease;
  }
  .perfil-estado-emoji-btn:hover{ background:rgba(255,255,255,0.09); }
  .perfil-estado-emoji-btn svg{ width:19px; height:19px; color:hsl(var(--muted)); }
  .perfil-icon-btn{
    width:28px; height:28px; border-radius:50%; border:none; cursor:pointer; flex-shrink:0;
    background:rgba(255,255,255,0.08); color:hsl(var(--text)); display:inline-flex; align-items:center; justify-content:center;
    transition:transform .18s var(--ease-spring), background .18s ease;
  }
  .perfil-icon-btn:hover{ background:rgba(255,255,255,0.16); transform:scale(1.1); }
  .perfil-icon-btn svg{ width:13px; height:13px; }
  .perfil-icon-btn.on{ background:hsl(var(--gold-2)/0.22); color:hsl(var(--gold-2)); }

  /* El Muro (2026-08-29) — composer + feed de posts, mismo lenguaje visual
     que el resto (.glass, acento dorado, spring easing en hover/press). */
  .muro-composer{ padding:18px; margin-bottom:22px; }
  .muro-composer-row{ display:flex; gap:12px; align-items:flex-start; }
  .muro-post-avatar{ width:38px; height:38px; border-radius:50%; object-fit:cover; flex-shrink:0; }
  .muro-composer-txt{ flex:1; resize:none; border:none; background:transparent; font-size:14.5px; padding:6px 0; }
  .muro-composer-txt:focus{ outline:none; }
  /* Varias fotos por post (2026-08-30) — grilla de miniaturas en el
     composer en vez de una sola preview grande. */
  .muro-composer-img-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(90px, 1fr)); gap:8px; margin-top:10px; }
  .muro-composer-img-preview{ position:relative; border-radius:12px; overflow:hidden; aspect-ratio:1; }
  .muro-composer-img-preview img{ width:100%; height:100%; object-fit:cover; display:block; }
  .muro-composer-img-preview .perfil-icon-btn{ position:absolute; top:5px; right:5px; background:hsl(0 0% 0% / 0.55); width:22px; height:22px; }
  .muro-composer-img-preview .perfil-icon-btn svg{ width:11px; height:11px; }
  .muro-composer-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:8px; padding-top:10px; border-top:1px solid rgba(255,255,255,0.07); }
  .muro-composer-foot > span{ display:flex; align-items:center; gap:10px; }
  .muro-composer-contador{ font-size:12px; color:hsl(var(--muted)); font-family:'JetBrains Mono',monospace; }

  .muro-feed{ display:flex; flex-direction:column; gap:14px; }
  .muro-post{ padding:18px; contain:layout style; }
  .muro-repost-header{
    display:flex; align-items:center; gap:7px; font-size:12px; color:hsl(var(--muted));
    margin-bottom:10px; cursor:pointer;
  }
  .muro-repost-header:hover{ color:hsl(var(--text)); }
  .muro-repost-header svg{ width:14px; height:14px; }
  .muro-post-head{ display:flex; align-items:flex-start; gap:10px; margin-bottom:10px; }
  .muro-post-autor{ font-weight:700; font-size:14px; display:flex; align-items:center; gap:5px; }
  .muro-post-fecha{ font-size:12px; color:hsl(var(--muted)); margin-top:1px; }
  .muro-post-texto{ font-size:14px; line-height:1.55; white-space:pre-wrap; margin-bottom:10px; }
  /* Grilla de fotos del post (2026-08-30) — 1 ocupa todo el ancho, 2/3/4
     arman una grilla, mismo lenguaje visual que Twitter/Instagram. */
  .muro-post-img-grid{ display:grid; gap:3px; border-radius:14px; overflow:hidden; margin-bottom:10px; }
  .muro-post-img-grid img{ width:100%; height:100%; object-fit:cover; display:block; }
  /* Corrección (2026-08-30, "se ven raras si son cuadradas") — con 1 sola
     foto, el contenedor no tenía una altura propia (sin aspect-ratio como
     sí tienen 2/3/4), así que `height:100%` del img de arriba quedaba
     resolviendo contra un alto indefinido: una foto cuadrada terminaba
     recortada verticalmente para "llenar" un marco angosto que no le
     correspondía. Con 1 sola foto no hace falta recortar nada (no hay que
     encajarla junto a otras) — se ve completa, `contain` en vez de `cover`,
     con fondo oscuro de relleno si sobra espacio a los costados. */
  .muro-post-img-grid.una{
    grid-template-columns:1fr; max-height:420px; background:hsl(0 0% 0% / 0.25);
    display:flex; align-items:center; justify-content:center;
  }
  .muro-post-img-grid.una img{ width:auto; height:auto; max-width:100%; max-height:420px; object-fit:contain; }
  .muro-post-img-grid.dos{ grid-template-columns:1fr 1fr; aspect-ratio:16/9; }
  .muro-post-img-grid.tres{ grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; aspect-ratio:16/10; }
  .muro-post-img-grid.tres img:first-child{ grid-row:1 / 3; }
  .muro-post-img-grid.cuatro{ grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; aspect-ratio:1; }
  .muro-mencion{ color:hsl(var(--gold-2)); font-weight:600; }
  /* "@everyone" (2026-08-30, pedido explícito) — más "grito" que una
     mención normal: pastilla rellena, no solo texto de color. */
  .chat-mencion-todos{ background:hsl(var(--gold-2)/0.25); color:hsl(var(--gold-2)); font-weight:700; padding:1px 6px; border-radius:6px; }

  /* Encuestas (2026-08-30, pedido explícito: "que se vea bien y lindo") —
     mismo lenguaje del sitio (glass sutil, acento dorado, spring easing).
     Antes de votar: filas planas clickeables con hover-lift. Después de
     votar (o cerrada): cada opción rellena una barra de fondo animada con
     scaleX (mismo truco que _animarBarra en Niveles — transform, no width,
     por rendimiento) desde 0, la ganadora se resalta con borde dorado. */
  .muro-poll{ display:flex; flex-direction:column; gap:8px; margin:4px 0 10px; }
  .muro-poll-opcion{
    position:relative; overflow:hidden; border-radius:14px; padding:12px 16px;
    border:1.5px solid rgba(255,255,255,0.1); cursor:pointer; background:rgba(255,255,255,0.03);
    transition:border-color .2s ease, transform .2s var(--ease-spring);
  }
  .muro-poll-opcion:hover{ border-color:hsl(var(--gold-2)/0.45); transform:translateY(-1px); }
  .muro-poll-opcion:active{ transform:scale(0.98); transition-duration:.12s; }
  .muro-poll.votada .muro-poll-opcion{ cursor:default; }
  .muro-poll.votada .muro-poll-opcion:hover{ transform:none; border-color:rgba(255,255,255,0.1); }
  .muro-poll-opcion.mi-voto{ border-color:hsl(var(--gold-2)/0.6); }
  .muro-poll-opcion.ganadora{ border-color:hsl(var(--gold-2)/0.7); }
  .muro-poll-opcion-fill{
    position:absolute; inset:0; transform-origin:left; transform:scaleX(0);
    background:linear-gradient(90deg, hsl(var(--gold-2)/0.24), hsl(var(--gold-2)/0.1));
    transition:transform .7s var(--ease-spring);
  }
  .muro-poll-opcion.ganadora .muro-poll-opcion-fill{ background:linear-gradient(90deg, hsl(var(--gold-2)/0.4), hsl(var(--gold-2)/0.16)); }
  .muro-poll-opcion-contenido{ position:relative; z-index:1; display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; }
  .muro-poll-opcion-texto{ flex:1; display:flex; align-items:center; gap:6px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .muro-poll-opcion-texto svg{ width:14px; height:14px; color:hsl(var(--gold-2)); flex-shrink:0; }
  .muro-poll-opcion-pct{ font-family:'JetBrains Mono',monospace; font-size:12.5px; color:hsl(var(--gold-2)); font-weight:700; flex-shrink:0; }
  .muro-poll-footer{ display:flex; justify-content:space-between; font-size:12px; color:hsl(var(--muted)); margin-top:2px; }

  .muro-poll-builder{
    margin-top:10px; padding:14px; border-radius:16px; background:rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.09); animation:cardPopIn .3s var(--ease-spring);
  }
  .muro-poll-builder-opcion{ display:flex; gap:8px; margin-bottom:8px; align-items:center; }
  .muro-poll-builder-opcion input{ flex:1; }
  .muro-poll-builder-agregar{
    display:inline-flex; align-items:center; gap:5px; font-size:12.5px; color:hsl(var(--gold-2));
    cursor:pointer; background:none; border:none; padding:4px 0; font-weight:700; font-family:inherit;
  }
  .muro-poll-builder-agregar svg{ width:13px; height:13px; }
  .muro-poll-builder-duracion{ display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; padding-top:12px; border-top:1px solid rgba(255,255,255,0.07); }
  .muro-post-acciones{ display:flex; align-items:center; gap:22px; }
  .muro-accion-btn{
    display:inline-flex; align-items:center; gap:6px; background:none; border:none; cursor:pointer;
    color:hsl(var(--muted)); font-size:12.5px; font-family:'JetBrains Mono',monospace;
    transition:color .18s ease, transform .18s var(--ease-spring); padding:4px;
  }
  .muro-accion-btn svg{ width:17px; height:17px; }
  .muro-accion-btn:hover{ color:hsl(var(--text)); transform:translateY(-1px); }
  .muro-accion-btn:active{ transform:scale(0.92); }
  .muro-accion-btn.on{ color:hsl(var(--gold-2)); }
  .muro-comentar-row{ display:flex; gap:8px; align-items:center; margin-top:12px; padding-top:12px; border-top:1px solid rgba(255,255,255,0.07); }
  .muro-comentar-row textarea{ flex:1; resize:none; }

  /* Reacciones estilo Discord (2026-08-30) — chips + botón "agregar" que
     abre un picker chico con emojis curados. `.muro-emoji-picker` se
     togglea con una CLASE (`.abierto`), no con el atributo [hidden] — a
     propósito, para no repetir el bug de especificidad ya encontrado antes
     en este mismo archivo con el panel de notificaciones. */
  .muro-post-reacciones{ display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; padding-top:12px; border-top:1px solid rgba(255,255,255,0.07); position:relative; }
  .muro-reaccion-chip{
    display:inline-flex; align-items:center; gap:5px; font-size:12px; padding:4px 9px; border-radius:100px;
    background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.09); color:hsl(var(--muted)); cursor:pointer;
    transition:transform .15s var(--ease-spring), background .15s ease, border-color .15s ease;
  }
  .muro-reaccion-chip:hover{ transform:translateY(-1px); background:rgba(255,255,255,0.1); }
  .muro-reaccion-chip:active{ transform:scale(0.94); }
  .muro-reaccion-chip.on{ background:hsl(var(--gold-2)/0.16); border-color:hsl(var(--gold-2)/0.4); color:hsl(var(--gold-2)); }
  .muro-reaccion-add{
    display:inline-flex; align-items:center; gap:2px; padding:4px 8px; border-radius:100px; cursor:pointer;
    background:none; border:1px dashed rgba(255,255,255,0.16); color:hsl(var(--muted));
    transition:color .15s ease, border-color .15s ease;
  }
  .muro-reaccion-add:hover{ color:hsl(var(--text)); border-color:rgba(255,255,255,0.35); }
  .muro-reaccion-add svg{ width:15px; height:15px; }
  .muro-emoji-picker{
    display:none; position:absolute; bottom:calc(100% + 8px); left:0; z-index:20;
    grid-template-columns:repeat(5, 1fr); gap:4px; padding:10px; border-radius:14px;
    background:hsl(var(--surface)/0.98); border:1px solid rgba(255,255,255,0.1); box-shadow:0 12px 32px rgba(0,0,0,0.4);
    width:200px;
  }
  .muro-emoji-picker.abierto{ display:grid; }
  .muro-emoji-picker button{ background:none; border:none; cursor:pointer; font-size:19px; padding:5px; border-radius:8px; line-height:1; transition:background .12s ease, transform .12s var(--ease-spring); }
  .muro-emoji-picker button:hover{ background:rgba(255,255,255,0.08); transform:scale(1.15); }

  /* Chats (2026-08-30) — barra de 4 pestañas grandes, siempre visible +
     sala compartida. Rediseño (2026-08-30, misma tarde, pedido explícito:
     "4 botones medio grandes todos paralelos en horizontal", "sin irte a
     otra página"): pasó de ser un hub que se abandona al tocar una tarjeta
     a una barra de pestañas persistente arriba de #chatsContenido — tocar
     una pestaña solo cambia el panel de abajo (ver _chatsSeleccionarTab),
     nunca navega a otra vista. Se mantienen siempre en fila horizontal
     (nunca se apilan en 1 columna) — en pantallas chicas la fila scrollea
     en vez de partirse. */
  .chats-volver-row{ margin-bottom:18px; }
  .chats-tabs-bar{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:26px; }
  .chats-tab{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
    padding:24px 10px; min-height:118px; text-align:center; border-radius:20px;
    border:1.5px solid transparent; cursor:pointer; color:hsl(var(--text)); background:hsl(0 0% 100% / 0.03);
    transition:transform .22s var(--ease-spring), border-color .22s ease, background .22s ease, box-shadow .3s var(--ease-smooth);
  }
  .chats-tab:hover{ transform:translateY(-3px); border-color:hsl(var(--gold-2)/0.3); }
  .chats-tab:active{ transform:scale(0.96); transition-duration:.12s; }
  .chats-tab.on{
    background:hsl(var(--gold-2)/0.14); border-color:hsl(var(--gold-2)/0.55);
    box-shadow:0 10px 26px hsl(var(--gold-2)/0.16);
  }
  /* Badge circular parejo para las 4 (2026-08-30, corrección: el emoji de
     Chat Global "no se notaba" porque quedaba como texto suelto al lado de
     3 íconos SVG con trazo — ahora los 4 comparten el mismo círculo con
     degradé dorado/manzana, así el emoji de Chat Global (🍎, pedido
     explícito "que sea una manzana") lee como una insignia propia, no como
     un carácter perdido. */
  .chats-tab-icon{
    width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-size:23px; line-height:1; flex-shrink:0; color:hsl(var(--gold-2));
    background:linear-gradient(135deg, hsl(var(--gold-2)/0.24), hsl(var(--apple-2)/0.18));
    transition:transform .22s var(--ease-spring), background .22s ease;
  }
  .chats-tab-icon svg{ width:23px; height:23px; }
  .chats-tab-icon img{ width:100%; height:100%; border-radius:50%; object-fit:cover; }
  .chats-tab.on .chats-tab-icon{
    background:linear-gradient(135deg, hsl(var(--gold-2)/0.45), hsl(var(--apple-2)/0.32)); transform:scale(1.08);
  }
  .chats-tab-titulo{ font-weight:700; font-size:13px; }
  .chats-tab.on .chats-tab-titulo{ color:hsl(var(--gold-2)); }
  @media (max-width:480px){
    .chats-tabs-bar{ display:flex; overflow-x:auto; scrollbar-width:none; }
    .chats-tabs-bar::-webkit-scrollbar{ display:none; }
    .chats-tab{ flex:0 0 118px; }
  }
  /* Clase que se saca y se vuelve a poner en cada cambio de pestaña/pantalla
     (con reflow forzado en el medio, ver _chatsPintarPane) — un @keyframes
     puesto directo en el selector de #chatsContenido solo se dispara una
     vez (al aparecer el elemento), no cada vez que se reemplaza su
     contenido, así que hace falta la clase toggle para que se re-dispare. */
  .chats-pane-anim{ animation: tabFadeSlide .38s var(--ease-smooth); }

  /* Autocompletado de @menciones tipo Discord (2026-08-30, pedido
     explícito) — position:fixed y appendeado a document.body (no adentro
     de ningún contenedor con overflow:hidden/auto) para que no se recorte
     nunca, sin importar en qué composer se abra. */
  .mencion-dropdown{
    display:none; position:fixed; z-index:200; max-height:220px; overflow-y:auto;
    background:var(--glass-bg); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
    border:var(--glass-border); border-radius:14px; box-shadow:0 20px 50px rgba(0,0,0,0.5); padding:6px;
  }
  .mencion-fila{ display:flex; align-items:center; gap:9px; padding:7px 9px; border-radius:10px; cursor:pointer; }
  .mencion-fila.on, .mencion-fila:hover{ background:hsl(var(--gold-2)/0.16); }
  .mencion-fila img{ width:26px; height:26px; border-radius:50%; object-fit:cover; flex-shrink:0; }
  .mencion-fila-txt{ display:flex; flex-direction:column; min-width:0; }
  .mencion-fila-txt b{ font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .mencion-fila-txt span{ font-size:12px; color:hsl(var(--muted)); }

  /* Menú de click-derecho de un grupo (2026-08-30, pedido explícito) —
     mismo criterio que .mencion-dropdown: position:fixed, appendeado a
     document.body, nunca recortado por un contenedor con overflow. */
  .chats-ctx-menu{
    position:fixed; z-index:250; min-width:220px; max-width:280px; padding:6px;
    background:var(--glass-bg); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
    border:var(--glass-border); border-radius:14px; box-shadow:0 20px 50px rgba(0,0,0,0.5);
    animation: modalSpring .22s var(--ease-spring);
  }
  .chats-ctx-menu button{
    display:flex; align-items:center; gap:10px; width:100%; padding:9px 10px; border:none; border-radius:9px;
    background:transparent; color:hsl(var(--text)); font-size:13px; text-align:left; cursor:pointer;
    transition:background .15s ease;
  }
  .chats-ctx-menu button:hover{ background:rgba(255,255,255,0.07); }
  .chats-ctx-menu button svg{ width:15px; height:15px; flex-shrink:0; opacity:.85; }
  .chats-ctx-menu button span{ flex:1; min-width:0; }
  .chats-ctx-menu button.peligro{ color:#ff6b61; }
  .chats-ctx-menu button.peligro:hover{ background:rgba(255,107,97,0.12); }
  .chats-ctx-sep{ height:1px; margin:6px 4px; background:rgba(255,255,255,0.08); }

  /* Elegir Unirse/Crear al tocar el "+" de Grupos (2026-08-30, pedido
     explícito) — 2 tarjetas grandes clickeables, mismo lenguaje visual que
     Discord al agregar un server. */
  .chats-elige-fila{
    display:flex; align-items:center; gap:14px; padding:16px; margin-bottom:10px; border-radius:16px;
    cursor:pointer; background:rgba(255,255,255,0.04); transition:transform .18s var(--ease-spring), background .18s ease;
  }
  .chats-elige-fila:last-child{ margin-bottom:0; }
  .chats-elige-fila:hover{ background:hsl(var(--gold-2)/0.1); transform:translateY(-2px); }
  .chats-elige-fila:active{ transform:scale(0.98); }
  .chats-elige-icon{
    display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; flex-shrink:0;
    background:hsl(var(--gold-2)/0.14); color:hsl(var(--gold-2));
  }
  .chats-elige-icon svg{ width:20px; height:20px; }
  .chats-lista-item{
    display:flex; align-items:center; gap:12px; padding:14px 16px; margin-bottom:10px; border-radius:16px;
    cursor:pointer; transition:transform .18s var(--ease-spring), background .18s ease;
  }
  .chats-lista-item:hover{ transform:translateX(3px); background:rgba(255,255,255,0.05); }
  .chats-lista-avatar{ width:42px; height:42px; border-radius:50%; flex-shrink:0; overflow:hidden; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,0.06); }
  .chats-lista-avatar img{ width:100%; height:100%; object-fit:cover; }
  .chats-lista-avatar-grupo{ color:hsl(var(--gold-2)); }
  .chats-lista-avatar-grupo svg{ width:20px; height:20px; }
  .chats-lista-titulo{ font-weight:700; font-size:14px; display:flex; align-items:center; }
  .chats-lista-sub{ font-size:12.5px; color:hsl(var(--muted)); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  /* Anclar un chat/grupo (2026-08-30, pedido explícito) — el botón solo se
     ve al pasar el mouse (mismo criterio que .chat-burbuja-acciones),
     salvo que YA esté anclado (ahí queda dorado y siempre visible). */
  .chats-lista-item.anclado{ background:hsl(var(--gold-2)/0.06); }
  .chats-lista-anclar{
    flex-shrink:0; width:26px; height:26px; border-radius:50%; border:none; cursor:pointer;
    display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,0.08); color:hsl(var(--muted));
    opacity:0; transition:opacity .18s ease, color .18s ease, transform .18s var(--ease-spring);
  }
  .chats-lista-anclar svg{ width:12px; height:12px; }
  .chats-lista-item:hover .chats-lista-anclar, .chats-lista-anclar.on{ opacity:1; }
  .chats-lista-anclar.on{ background:hsl(var(--gold-2)/0.22); color:hsl(var(--gold-2)); }
  .chats-lista-anclar:hover{ transform:scale(1.12); }

  /* Sala de chat compartida — mensajes propios a la derecha (dorado),
     ajenos a la izquierda (glass), avatar solo del lado ajeno (mismo
     criterio que WhatsApp/Discord: tu propio avatar ya lo sabés). */
  /* Categorías/canales de un grupo, "tipo Discord" (2026-08-30, pedido
     explícito) — sidebar angosto fijo a la izquierda de la sala, la sala
     en sí ocupa el resto (mismo patrón de layout que .chats-sala-header +
     .glass de siempre, solo envueltos en un flex row cuando hay grupo). */
  .chats-sala-conCanales{ display:flex; gap:2px; align-items:flex-start; }
  .chats-canales-sidebar{ flex:0 0 var(--chats-ancho-canales, 200px); min-width:0; }
  .chats-sala-principal{ flex:1; min-width:0; padding:0 14px; }
  /* Lista de miembros a la derecha (2026-08-30, pedido explícito) — mismo
     alto que la sala, con su propio scroll si hay muchos integrantes;
     reusa el contenido exacto del modal viejo de Integrantes (mismas
     clases .chats-integrantes-label/.chats-miembro-fila), solo cambia el
     contenedor de "modal" a "columna fija". */
  .chats-miembros-sidebar{
    flex:0 0 var(--chats-ancho-miembros, 220px); min-width:0; max-height:min(68vh, 640px); overflow-y:auto;
    padding:14px 10px; border-radius:var(--glass-radius); background:var(--glass-bg);
    backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); border:var(--glass-border);
  }
  /* Manija para reescalar (2026-08-31, pedido explícito: "que se pueda
     reescalar el vc y la vista de canales") — franja angosta invisible
     hasta el hover, mismo criterio táctil que un divisor de panel real
     (VS Code, Figma). `touch-action:none` para que arrastrar no scrollee
     la página en mobile mientras se ajusta. */
  .chats-resize-handle{
    flex:0 0 6px; align-self:stretch; cursor:col-resize; touch-action:none;
    position:relative; border-radius:3px; transition:background .15s ease;
  }
  .chats-resize-handle::after{
    content:''; position:absolute; left:50%; top:0; bottom:0; width:2px; transform:translateX(-50%);
    background:transparent; border-radius:2px; transition:background .15s ease;
  }
  .chats-resize-handle:hover::after, .chats-resize-handle.activo::after{ background:hsl(var(--gold-2)/0.6); }
  @media (max-width:960px){
    /* 3 columnas no entran cómodas por debajo de esto — se prioriza que el
       chat en sí no se achique, la lista de miembros se puede volver a ver
       desde "Ver integrantes" (grupos) sin perder la sala. */
    .chats-miembros-sidebar, #chatsResizeMiembros{ display:none; }
  }
  .chats-canales-cat{ margin-bottom:18px; }
  .chats-canales-cat-label{
    display:flex; align-items:center; justify-content:space-between; gap:6px;
    font-size:12px; font-weight:700; letter-spacing:.6px; text-transform:uppercase;
    color:hsl(var(--muted)/0.75); padding:0 6px 6px;
  }
  .chats-canal-add{
    display:flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:6px;
    border:none; background:transparent; color:hsl(var(--muted)); cursor:pointer; flex-shrink:0;
    transition:background .15s ease, color .15s ease, transform .15s var(--ease-spring);
  }
  .chats-canal-add svg{ width:12px; height:12px; }
  .chats-canal-add:hover{ background:hsl(var(--gold-2)/0.16); color:hsl(var(--gold-2)); transform:scale(1.12); }
  .chats-canal-fila{
    display:flex; align-items:center; gap:8px; padding:8px 8px; border-radius:10px; cursor:pointer;
    color:hsl(var(--muted)); transition:background .15s ease, color .15s ease;
  }
  .chats-canal-fila:hover{ background:rgba(255,255,255,0.05); color:hsl(var(--text)); }
  .chats-canal-fila.activo{ background:hsl(var(--gold-2)/0.14); color:hsl(var(--gold-2)); }
  .chats-canal-icon{ display:flex; flex-shrink:0; }
  .chats-canal-icon svg{ width:16px; height:16px; }
  .chats-canal-nombre{ flex:1; min-width:0; font-size:13.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .chats-canal-borrar{
    display:flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%;
    border:none; background:transparent; color:inherit; opacity:0; cursor:pointer; flex-shrink:0;
    transition:opacity .15s ease, background .15s ease;
  }
  .chats-canal-borrar svg{ width:11px; height:11px; }
  .chats-canal-fila:hover .chats-canal-borrar{ opacity:.75; }
  .chats-canal-borrar:hover{ opacity:1 !important; background:rgba(255,0,0,0.18); }
  /* Burbujita de chat sobre un canal de voz, al pasar el mouse (2026-08-31,
     pedido explícito) — mismo criterio visual/de hover que borrar, pero
     visible para CUALQUIER miembro (no solo el dueño). */
  .chats-canal-chatburbuja{
    display:flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%;
    border:none; background:transparent; color:inherit; opacity:0; cursor:pointer; flex-shrink:0;
    transition:opacity .15s ease, background .15s ease, color .15s ease;
  }
  .chats-canal-chatburbuja svg{ width:12px; height:12px; }
  .chats-canal-fila:hover .chats-canal-chatburbuja{ opacity:.75; }
  .chats-canal-chatburbuja:hover{ opacity:1 !important; background:hsl(var(--gold-2)/0.16); color:hsl(var(--gold-2)); }
  /* Participantes en vivo bajo cada canal de voz (2026-08-31, pedido
     explícito: "el usuario que está en el vc abajo del canal") */
  .chats-canal-voz-participantes{ display:flex; flex-direction:column; gap:2px; padding:0 0 4px 30px; }
  .chats-canal-voz-fila{ display:flex; align-items:center; gap:6px; font-size:12px; color:hsl(var(--muted)); }
  .chats-canal-voz-fila svg{ width:10px; height:10px; color:#ff6b61; margin-left:auto; flex-shrink:0; }

  /* Panel de chat de un canal de voz, a la derecha (2026-08-31, pedido
     explícito) — ocupa el mismo hueco que la lista de miembros, versión
     compacta a propósito (sin adjuntos/GIFs, el ancho no da). */
  .voz-chat-panel{ display:flex; flex-direction:column; height:100%; min-height:0; }
  .voz-chat-panel-header{ display:flex; align-items:center; gap:8px; padding-bottom:10px; margin-bottom:8px; border-bottom:1px solid rgba(255,255,255,0.08); }
  .voz-chat-panel-header b{ flex:1; min-width:0; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .voz-chat-panel-scroll{ flex:1; min-height:120px; max-height:min(50vh, 460px); overflow-y:auto; display:flex; flex-direction:column; gap:8px; padding-right:2px; }
  .voz-chat-panel-scroll .chat-burbuja-texto{ font-size:12.5px; padding:8px 12px; }
  .voz-chat-panel-scroll .chat-burbuja-avatar{ width:24px; height:24px; }
  .voz-chat-panel-composer{ display:flex; gap:6px; margin-top:10px; }
  .voz-chat-panel-composer .inp{ flex:1; font-size:12.5px; }
  @media (max-width:720px){
    /* Angosto: el sidebar de canales tapa demasiado la sala — se apila
       arriba, en fila con scroll horizontal, mismo criterio que
       .chats-tabs-bar en mobile. */
    .chats-sala-conCanales{ flex-direction:column; }
    .chats-canales-sidebar{ flex:0 0 auto; width:100%; display:flex; gap:14px; overflow-x:auto; }
    .chats-canales-cat{ margin-bottom:0; flex:0 0 auto; }
    .chats-sala-principal{ padding:0; }
    .chats-resize-handle{ display:none; } /* apilado en columna, arrastrar ancho no aplica */
  }

  /* Mini-preview de perfil (2026-08-30, pedido explícito) — tarjeta chica
     tipo iOS/Discord al tocar a alguien en una lista de miembros: banner +
     avatar superpuesto, estado, bio, en-común, acciones rápidas, y un
     link a la página de perfil completa. Reusa `.mt-modal-backdrop` (blur
     + fade) pero con su propia tarjeta angosta en vez de `.mt-modal`. */
  .perfil-mini-modal{
    position:relative; width:100%; max-width:420px; padding:0; overflow:hidden; margin:auto;
    animation: modalSpring .42s var(--ease-spring);
  }
  .perfil-mini-cerrar{ position:absolute; top:10px; right:10px; z-index:2; background:hsl(0 0% 8% / 0.55); }
  /* 3 puntitos — más opciones (2026-08-31, pedido explícito, con captura
     de referencia) — a la izquierda de la X de cerrar, mismo tratamiento
     visual, abre `.chats-ctx-menu` (mismo menú que ya usa el click-derecho
     de un grupo, reusado tal cual). */
  .perfil-mini-menu-btn{ position:absolute; top:10px; right:52px; z-index:2; background:hsl(0 0% 8% / 0.55); }
  .perfil-mini-banner{
    height:90px;
    background:
      radial-gradient(120% 160% at 15% -10%, hsl(var(--gold-2)/0.4), transparent 55%),
      radial-gradient(120% 160% at 100% 120%, hsl(var(--apple-2)/0.32), transparent 55%),
      hsl(var(--surface)/0.55);
    background-size:cover !important; background-position:center !important;
  }
  .perfil-mini-body{ padding:0 20px 20px; margin-top:-40px; position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; text-align:center; }
  /* Tocar la foto abre el perfil completo (2026-08-31, pedido explícito:
     "tocas su foto de nuevo sale esto más grande") — mismo feedback
     spring de hover/press que el resto del sitio (Emil design: nunca un
     click "mudo", siempre un micro-movimiento que confirma que es
     clickeable). */
  .perfil-mini-avatar-wrap{
    position:relative; display:inline-flex; margin-bottom:10px; cursor:pointer;
    transition:transform .22s var(--ease-spring);
  }
  .perfil-mini-avatar-wrap:hover{ transform:scale(1.05); }
  .perfil-mini-avatar-wrap:active{ transform:scale(0.95); transition-duration:.12s; }
  .perfil-mini-avatar{ width:80px; height:80px; border-radius:50%; object-fit:cover; border:4px solid hsl(var(--bg)); box-shadow:0 10px 26px rgba(0,0,0,0.4); display:block; }
  .perfil-mini-dot{ position:absolute; right:2px; bottom:2px; width:16px; height:16px; border-radius:50%; border:3px solid hsl(var(--bg)); background:hsl(var(--muted)); }
  .perfil-mini-dot.on{ background:#30d158; }
  .perfil-mini-nombre{ display:flex; align-items:center; gap:4px; font-size:17px; font-weight:800; }
  .perfil-mini-handle{ font-size:12.5px; color:hsl(var(--muted)); margin-top:1px; }
  .perfil-mini-presencia{ font-size:12px; color:hsl(var(--muted)); margin-top:6px; }
  .perfil-mini-presencia.on{ color:#30d158; }
  .perfil-mini-estado{ font-size:12.5px; margin-top:6px; display:flex; align-items:center; gap:5px; color:hsl(var(--text)); }
  /* Recortada a 4 líneas (2026-08-31, pulido "impeccable" — una preview
     chica no debería poder crecer sin límite si alguien escribió una bio
     larga con varios encabezados; "Ver perfil completo" ya está un click
     más abajo para el texto entero). */
  .perfil-mini-bio{
    font-size:12.5px; color:hsl(var(--muted)); line-height:1.5; margin-top:10px; white-space:pre-wrap; text-align:left; width:100%;
    display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;
  }
  .perfil-mini-bio h1.chat-md-h, .perfil-mini-bio h2.chat-md-h, .perfil-mini-bio h3.chat-md-h{ color:hsl(var(--text)); }
  .perfil-mini-bio.vacia{ font-style:italic; opacity:.7; }
  .perfil-mini-stats-row{ display:flex; gap:16px; margin-top:12px; font-size:12px; color:hsl(var(--muted)); }
  .perfil-mini-stats-row b{ color:hsl(var(--text)); }
  .perfil-mini-comun-label{ align-self:flex-start; font-size:12px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:hsl(var(--muted)/0.75); margin-top:14px; }
  .perfil-mini-grupos-comun{ display:flex; gap:6px; margin-top:6px; align-self:flex-start; flex-wrap:wrap; }
  .perfil-mini-grupo-avatar{ width:28px; height:28px; }
  .perfil-mini-grupo-avatar svg{ width:14px; height:14px; }
  .perfil-mini-grupo-mas{ display:flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; background:rgba(255,255,255,0.08); font-size:12px; color:hsl(var(--muted)); flex-shrink:0; }
  /* Rediseño (2026-08-31, pedido explícito: "que salgan todos estos
     botones", con captura de referencia) — el primer botón que arma
     _amistadBotonesHtml (Agregar amigo / Amigos / Aceptar solicitud) es
     siempre la acción principal, se estira ancho completo; el resto
     (Enviar mensaje, Seguir, Silenciar/Reportar, Bloquear) se acomoda
     abajo en una fila más chica — jerarquía visual clara sin tener que
     tocar la función compartida que arma los botones (se usa igual en la
     página de perfil completa y en las plantillas). */
  .perfil-mini-acciones{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:14px; width:100%; }
  .perfil-mini-acciones .btn{ flex:1 1 auto; min-width:100px; justify-content:center; }
  .perfil-mini-acciones > *:first-child{ flex-basis:100%; }
  .perfil-mini-acciones .amistad-solicitud-recibida{ width:100%; }
  .perfil-mini-acciones .amistad-solicitud-recibida .btn{ flex:1; }
  .perfil-mini-vertodo{ width:100%; margin-top:10px; }
  .perfil-mini-cargando{ padding:60px 20px; text-align:center; }

  /* Voz real en canales de voz (2026-08-30, pedido explícito) — landing
     antes de unirse + vista en-llamada, dentro del mismo glass de la sala
     de siempre (mismo padding que .chats-sala-scroll de un canal de
     texto, para que no "salte" el layout al cambiar de canal). */
  .voz-landing, .voz-encall{
    display:flex; flex-direction:column; align-items:center; text-align:center;
    padding:48px 20px; border-radius:var(--glass-radius); background:var(--glass-bg);
    backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); border:var(--glass-border);
    min-height:min(50vh, 420px); justify-content:center;
  }
  .voz-landing-icono{
    display:flex; align-items:center; justify-content:center; width:72px; height:72px; border-radius:50%;
    background:hsl(var(--gold-2)/0.14); color:hsl(var(--gold-2)); margin-bottom:18px;
  }
  .voz-landing-icono svg{ width:32px; height:32px; }
  .voz-landing-participantes{ display:flex; gap:6px; flex-wrap:wrap; justify-content:center; margin-bottom:20px; min-height:34px; }
  .voz-landing-nota{ font-size:12px; color:hsl(var(--muted)); margin-top:12px; max-width:280px; }
  #vozLandingBtn{ display:flex; align-items:center; gap:10px; padding:16px 34px; font-size:14.5px; border-radius:9999px; }
  #vozLandingBtn svg{ width:19px; height:19px; }

  /* Visor de pantalla compartida (2026-08-31, pedido explícito: "que se
     pueda transmitir pantalla como Discord") — arriba de la grilla de
     tarjetas, grande, se oculta solo (`hidden`) cuando nadie comparte. */
  .voz-visor-pantalla{ width:100%; max-width:640px; margin-bottom:20px; border-radius:16px; overflow:hidden; background:#000; box-shadow:0 14px 34px rgba(0,0,0,0.4); }
  .voz-visor-pantalla video{ width:100%; display:block; max-height:360px; object-fit:contain; }

  /* Tarjetas cuadradas por participante (2026-08-31, rediseño a pedido
     explícito: "se siente vacío... cuadrados con bordes redondeados de
     colores como tu marco") — grilla en vez de fila de círculos chicos,
     mismo criterio visual que un tile de videollamada real. */
  .voz-encall-participantes{
    display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:16px;
    width:100%; max-width:640px; margin-bottom:28px;
  }
  .voz-tile{
    position:relative; aspect-ratio:4/3; border-radius:18px; overflow:hidden;
    background:hsl(var(--surface)/0.7); border:2.5px solid hsl(var(--gold-2)/0.3);
    transition:border-color .2s ease, box-shadow .2s ease; display:flex; align-items:center; justify-content:center;
  }
  .voz-tile.muteado{ opacity:.65; }
  .voz-tile-avatar{ width:56%; max-width:76px; aspect-ratio:1; border-radius:50%; object-fit:cover; }
  .voz-tile-footer{
    position:absolute; left:8px; bottom:8px; right:8px; display:flex; align-items:center; gap:6px;
    padding:5px 9px; border-radius:9999px; background:hsl(0 0% 4% / 0.6); backdrop-filter:blur(6px);
  }
  .voz-tile-nombre{ flex:1; min-width:0; font-size:12px; font-weight:700; color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .voz-tile-mute-icon{ display:flex; color:#ff6b61; flex-shrink:0; }
  .voz-tile-mute-icon svg{ width:12px; height:12px; }
  /* Marcos Premium (2026-08-31) — mismos 5 colores + glass que ya usa
     `.avatar-frame-premium.marco-*` en el resto del sitio, acá como borde
     del cuadrado en vez de anillo del círculo. */
  .voz-tile.marco-rojo{ border-color:hsl(355 70% 55%); }
  .voz-tile.marco-azul{ border-color:hsl(212 75% 58%); }
  .voz-tile.marco-amarillo{ border-color:hsl(45 85% 58%); }
  .voz-tile.marco-verde{ border-color:hsl(140 60% 46%); }
  .voz-tile.marco-morado{ border-color:hsl(265 60% 60%); }
  .voz-tile.marco-glass{ border-color:hsl(0 0% 90% / 0.7); }
  /* "Está hablando" — anillo verde que respira (2026-08-31, pedido
     explícito: "cuando hablas hay animación verde que se apaga y prende"),
     detectado por volumen real del stream (propio Y de cada remoto, ver
     _vozTickHablando) — nunca mientras estás muteado (chequeado antes de
     agregar la clase, ver ese mismo tick). Gana siempre por sobre el
     color del marco mientras dure. */
  .voz-tile.hablando{ border-color:#30d158; animation:vozHablandoPulso 1.1s ease-in-out infinite; }
  @keyframes vozHablandoPulso{
    0%, 100%{ box-shadow:0 0 0 0 transparent; }
    50%{ box-shadow:0 0 0 4px hsl(140 70% 50% / 0.35), 0 0 18px 2px hsl(140 70% 50% / 0.4); }
  }
  /* Botones más grandes (2026-08-31, pedido explícito: "hace más grandes
     los botones") — el mute/compartir pasan a redondo tamaño pill grande,
     el de salir gana padding real en vez del btn-sm chico de antes. */
  .voz-encall-controles{ display:flex; align-items:center; gap:16px; }
  .voz-btn-mute, .voz-btn-compartir{ width:60px; height:60px; }
  .voz-btn-mute svg, .voz-btn-compartir svg{ width:24px; height:24px; }
  .voz-btn-compartir.on{ background:hsl(var(--gold-2)/0.22); color:hsl(var(--gold-2)); }
  .voz-btn-salir{ color:#ff6b61; border-color:#ff6b61; padding:14px 28px; font-size:14px; border-radius:9999px; }
  .voz-btn-salir:hover{ background:rgba(255,107,97,0.12); }

  /* Burbuja de participantes al pasar el mouse sobre un canal de voz
     (2026-08-30, pedido explícito) — mismo criterio de posicionamiento
     fijo que .mencion-dropdown. */
  .voz-hover-bubble{
    position:fixed; z-index:250; min-width:160px; max-width:220px; padding:8px;
    background:var(--glass-bg); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
    border:var(--glass-border); border-radius:12px; box-shadow:0 16px 40px rgba(0,0,0,0.45);
    animation: modalSpring .18s var(--ease-spring); pointer-events:none;
  }
  .voz-hover-fila{ display:flex; align-items:center; gap:8px; padding:5px 4px; font-size:12px; }
  .voz-hover-fila svg{ width:12px; height:12px; color:#ff6b61; margin-left:auto; flex-shrink:0; }

  /* Barra flotante persistente de llamada activa (2026-08-30, pedido
     implícito — "la llamada sigue aunque navegues", mismo criterio que
     Discord) — visible en cualquier pantalla de Chats mientras dure. */
  #vozBarraFlotante{
    position:fixed; left:50%; bottom:26px; transform:translateX(-50%); z-index:220;
    display:flex; align-items:center; gap:10px; padding:10px 16px; border-radius:9999px;
    background:hsl(0 0% 8% / 0.85); backdrop-filter:blur(16px); box-shadow:0 14px 34px rgba(0,0,0,0.5);
    color:hsl(var(--text)); animation: modalSpring .3s var(--ease-spring);
  }
  #vozBarraFlotante > svg{ width:16px; height:16px; color:hsl(var(--gold-2)); flex-shrink:0; }
  .voz-barra-nombre{ font-size:12.5px; font-weight:700; max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .voz-barra-salir{ color:#ff6b61; }
  @media (max-width:640px){ #vozBarraFlotante{ bottom:14px; } .voz-barra-nombre{ max-width:80px; } }

  .chats-sala-header{ display:flex; align-items:center; gap:10px; margin-bottom:16px; flex-wrap:wrap; }
  .chats-sala-header h2{ flex:1; font-size:18px; margin:0; }
  .chats-sala-scroll{
    display:flex; flex-direction:column; gap:10px; height:min(68vh, 640px); overflow-y:auto;
    padding:6px 6px 14px; margin-bottom:12px;
    background-size:cover; background-position:center; border-radius:16px;
    transition:background-image .4s var(--ease-smooth);
  }
  /* Fondo de chat personalizado (2026-08-30, pedido explícito, Premium,
     compartido por sala) — un scrim oscuro detrás de los mensajes para que
     el texto siga siendo legible encima de cualquier imagen, sin taparla
     del todo (mismo criterio que .fixed-video-overlay del landing). */
  .chats-sala-scroll.con-wallpaper{ background-color:hsl(0 0% 0% / 0.4); background-blend-mode:darken; }
  /* Corrección (2026-08-30, "los globos de texto son muy chiquitos a
     comparación de lo ancho que es lo de chats") — el contenedor pasó a
     1180px en una corrección anterior pero la burbuja se quedó con el
     tamaño pensado para 640px; se agranda texto/padding/avatar para que
     la proporción se sienta bien en el ancho nuevo. El scroll vertical
     (overflow-y:auto de arriba) no se toca — sigue andando con la rueda
     del mouse igual que Discord sin importar cuántos mensajes haya. */
  .chat-burbuja{ display:flex; gap:10px; align-items:flex-end; }
  .chat-burbuja.mia{ flex-direction:row-reverse; }
  .chat-burbuja-avatar{ width:34px; height:34px; border-radius:50%; object-fit:cover; flex-shrink:0; }
  .chat-burbuja-contenido{ display:flex; flex-direction:column; gap:3px; }
  .chat-burbuja-autor{ font-size:12.5px; font-weight:600; color:hsl(var(--muted)); margin-left:3px; width:fit-content; transition:color .15s ease; }
  .chat-burbuja-autor:hover{ color:hsl(var(--gold-2)); text-decoration:underline; }
  .chat-burbuja-texto{
    font-size:15px; line-height:1.55; padding:12px 17px; border-radius:18px; white-space:pre-wrap; word-break:break-word;
  }
  .chat-burbuja.otro .chat-burbuja-texto{ background:rgba(255,255,255,0.07); border-bottom-left-radius:5px; }
  .chat-burbuja.mia .chat-burbuja-texto{ background:hsl(var(--gold-2)/0.85); color:#1a1305; border-bottom-right-radius:5px; }
  .chat-burbuja-img{ max-width:280px; border-radius:16px; display:block; }
  .chat-burbuja-video{ max-width:320px; border-radius:16px; display:block; background:#000; }
  /* Reproductor propio de nota de voz/audio (2026-08-30, corrección "se ve
     raro" — antes era el <audio controls> nativo del navegador). */
  .chat-voz-player{ display:flex; align-items:center; gap:8px; width:230px; padding:4px 2px; }
  .chat-voz-play{
    width:32px; height:32px; border-radius:50%; border:none; cursor:pointer; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    background:hsl(var(--gold-2)/0.85); color:#1a1305;
    transition:transform .18s var(--ease-spring);
  }
  .chat-voz-play:hover{ transform:scale(1.08); }
  .chat-voz-play svg{ width:15px; height:15px; }
  .chat-voz-barra{ flex:1; height:5px; border-radius:9999px; background:rgba(255,255,255,0.18); cursor:pointer; position:relative; }
  .chat-burbuja.mia .chat-voz-barra{ background:rgba(0,0,0,0.2); }
  .chat-voz-progreso{ position:absolute; top:0; left:0; height:100%; width:0%; border-radius:9999px; background:hsl(var(--gold-2)); }
  .chat-voz-duracion{ font-size:12px; color:hsl(var(--muted)); flex-shrink:0; min-width:28px; text-align:right; }
  .chat-burbuja.mia .chat-voz-duracion{ color:hsl(0 0% 10% / 0.65); }
  .chat-burbuja-doc{
    display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:16px; text-decoration:none;
    color:inherit; background:rgba(255,255,255,0.07); max-width:270px;
  }
  .chat-burbuja.mia .chat-burbuja-doc{ background:hsl(var(--gold-2)/0.85); color:#1a1305; }
  .chat-burbuja-doc svg{ width:24px; height:24px; flex-shrink:0; }
  .chat-burbuja-doc-info{ min-width:0; }
  .chat-burbuja-doc-nombre{ font-size:13.5px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .chat-burbuja-doc-desc{ font-size:12px; opacity:.75; }
  .chat-burbuja-hora{ font-size:12px; color:hsl(var(--muted)/0.7); margin:0 4px; }
  .chat-burbuja.mia .chat-burbuja-hora{ text-align:right; }
  /* Reubicado (2026-08-30, pedido explícito) — antes iba pegado al final
     del texto del mensaje; ahora vive junto al horario, como Discord. */
  .chat-burbuja-editado{ font-size:inherit; color:inherit; opacity:.85; }
  /* Traducir un mensaje (2026-08-30, pedido explícito) */
  .chat-burbuja-traduccion{
    display:flex; align-items:flex-start; gap:5px; margin-top:6px; padding-top:6px;
    border-top:1px solid hsl(0 0% 100% / 0.14); font-size:12.5px; font-style:italic; opacity:.9;
  }
  .chat-burbuja-traduccion svg{ width:12px; height:12px; margin-top:2px; flex-shrink:0; opacity:.75; }
  /* Doble click = corazón (2026-08-30, pedido explícito, "como Instagram") */
  .chat-corazon-burst{
    position:fixed; z-index:300; font-size:44px; pointer-events:none;
    transform:translate(-50%,-50%) scale(0.3); opacity:0;
    animation:chatCorazonBurst .7s ease-out forwards;
  }
  @keyframes chatCorazonBurst{
    0%{ transform:translate(-50%,-50%) scale(0.3); opacity:0; }
    30%{ transform:translate(-50%,-50%) scale(1.25); opacity:1; }
    100%{ transform:translate(-50%,-50%) scale(1) translateY(-34px); opacity:0; }
  }
  /* Confeti al unirse a un grupo (2026-08-30, pedido explícito) — cada
     pieza vuela en un ángulo/distancia al azar (variables CSS por pieza,
     puestas desde JS) y gira mientras cae; el contenedor entero se
     autodestruye desde JS al terminar, no queda nada colgado. */
  .confetti-burst{ position:fixed; top:50%; left:50%; z-index:410; pointer-events:none; }
  .confetti-burst span{
    position:absolute; top:0; left:0; width:9px; height:14px; border-radius:2px;
    transform:translate(-50%,-50%); opacity:0;
    animation: confettiPieza 1.1s var(--ease-smooth) forwards;
    animation-delay: var(--delay);
  }
  @keyframes confettiPieza{
    0%{ transform:translate(-50%,-50%) rotate(0deg); opacity:1; }
    100%{
      transform:translate(calc(-50% + cos(var(--ang)) * var(--dist)), calc(-50% + sin(var(--ang)) * var(--dist) + 60px)) rotate(var(--rot));
      opacity:0;
    }
  }
  /* ============================================================
     Pantalla grande de invitación a un grupo (2026-08-31, pedido explícito:
     "pantalla grande y de fondo el banner del grupo, como Discord... pero
     mejoralo a nuestro estilo") — vive en su propio root (#invitacionLandingRoot,
     NUNCA anidado en #secFields por el mismo pitfall de backdrop-filter que
     ya documenta este archivo para .mt-modal-backdrop), un nivel arriba de
     cualquier otro modal (z-index 400) porque es la primera pantalla real
     que ve alguien que recién entra por un link.
     ============================================================ */
  .invite-landing{
    position:fixed; inset:0; z-index:400; overflow:hidden;
    display:flex; align-items:center; justify-content:center; padding:24px;
    animation: backdropFade .3s var(--ease-smooth);
  }
  .invite-landing.closing{ animation: backdropFade .2s var(--ease-smooth) reverse forwards; }
  .invite-landing-bg{
    position:absolute; inset:0; background-size:cover; background-position:center;
    transform: scale(1.12); filter: blur(14px) brightness(0.7);
    animation: inviteLandingBgIn 1s var(--ease-out-strong) forwards, inviteLandingKenBurns 22s ease-in-out .9s infinite alternate;
  }
  @keyframes inviteLandingBgIn{ from{ transform:scale(1.12); filter:blur(14px) brightness(0.55); } to{ transform:scale(1.04); filter:blur(0px) brightness(0.7); } }
  @keyframes inviteLandingKenBurns{ from{ transform:scale(1.04); } to{ transform:scale(1.1); } }
  @media not all /* movimiento reducido: lo decide el botón "Animaciones" del sitio (html[data-motion=reduced], ver manza-a11y.css) */{
    .invite-landing-bg{ animation: inviteLandingBgIn .4s ease forwards; }
  }
  .invite-landing-scrim{
    position:absolute; inset:0;
    background:
      radial-gradient(900px 560px at 50% 8%, hsl(var(--gold)/0.16), transparent 60%),
      linear-gradient(180deg, hsl(0 0% 0% / 0.35) 0%, hsl(0 0% 0% / 0.55) 55%, hsl(0 0% 0% / 0.75) 100%);
  }
  .invite-landing-close{
    position:absolute; top:22px; right:22px; z-index:2;
    opacity:0; animation: inviteLandingFadeIn .4s var(--ease-out-strong) .5s forwards;
  }
  .invite-landing-card{
    position:relative; z-index:1; width:100%; max-width:400px; padding:38px 34px 32px;
    display:flex; flex-direction:column; align-items:center; text-align:center;
    animation: modalSpring .5s var(--ease-spring) .12s both;
  }
  .invite-landing-icono-wrap{
    width:88px; height:88px; border-radius:28px; flex-shrink:0; overflow:hidden;
    display:flex; align-items:center; justify-content:center; color:hsl(var(--gold-2));
    background:linear-gradient(135deg, hsl(var(--gold-2)/0.32), hsl(var(--apple-2)/0.24));
    box-shadow: inset 0 1px 0 hsl(0 0% 100% / 0.2), 0 0 0 1px hsl(var(--gold-2)/0.25), 0 12px 30px hsl(0 0% 0% / 0.4);
    opacity:0; animation: inviteLandingPop .5s var(--ease-spring) .22s forwards;
  }
  .invite-landing-icono-wrap svg{ width:38px; height:38px; }
  .invite-landing-icono-wrap img{ width:100%; height:100%; object-fit:cover; }
  .invite-landing-por{
    font-size:13px; color:hsl(var(--muted)); margin-top:18px;
    opacity:0; animation: inviteLandingFadeUp .4s var(--ease-out-strong) .3s forwards;
  }
  .invite-landing-por b{ color:hsl(var(--text)); }
  .invite-landing-nombre{
    font-size:23px; margin-top:4px; line-height:1.3;
    opacity:0; animation: inviteLandingFadeUp .4s var(--ease-out-strong) .36s forwards;
  }
  .invite-landing-desc{
    font-size:13.5px; color:hsl(var(--muted)); margin-top:8px; line-height:1.55;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
    opacity:0; animation: inviteLandingFadeUp .4s var(--ease-out-strong) .42s forwards;
  }
  .invite-landing-stats{
    display:flex; align-items:center; justify-content:center; gap:9px; margin-top:16px;
    font-size:13px; color:hsl(var(--muted)); font-weight:600;
    opacity:0; animation: inviteLandingFadeUp .4s var(--ease-out-strong) .48s forwards;
  }
  .invite-landing-stats svg{ width:13px; height:13px; vertical-align:-2px; margin-right:4px; }
  .invite-landing-stats-sep{ opacity:0.4; }
  .invite-landing-acciones{
    display:flex; flex-direction:column; gap:10px; width:100%; margin-top:26px;
    opacity:0; animation: inviteLandingFadeUp .4s var(--ease-out-strong) .54s forwards;
  }
  .invite-landing-acciones .btn{ width:100%; }
  @keyframes inviteLandingPop{ from{ opacity:0; transform:scale(0.85); } to{ opacity:1; transform:scale(1); } }
  @keyframes inviteLandingFadeIn{ from{ opacity:0; } to{ opacity:1; } }
  @keyframes inviteLandingFadeUp{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:translateY(0); } }
  /* Esqueleto mientras llega el fetch (2026-08-31) — mismo shimmer que ya
     usa el resto del panel para estados de carga, sin inventar uno nuevo. */
  .invite-landing-skel{ background:linear-gradient(100deg, hsl(0 0% 100% / 0.06) 30%, hsl(0 0% 100% / 0.14) 50%, hsl(0 0% 100% / 0.06) 70%); background-size:200% 100%; border-radius:8px; animation: inviteSkelShimmer 1.4s ease-in-out infinite; }
  @keyframes inviteSkelShimmer{ from{ background-position:200% 0; } to{ background-position:-200% 0; } }
  .invite-landing-error-icon{ color:hsl(0 70% 65%); }
  @media (max-width:480px){ .invite-landing-card{ padding:30px 24px 26px; } }
  @media not all /* movimiento reducido: lo decide el botón "Animaciones" del sitio (html[data-motion=reduced], ver manza-a11y.css) */{
    .invite-landing-card, .invite-landing-icono-wrap, .invite-landing-por, .invite-landing-nombre,
    .invite-landing-desc, .invite-landing-stats, .invite-landing-acciones, .invite-landing-close{
      animation-duration:.25s !important; animation-delay:0s !important;
    }
  }

  .chat-burbuja.eliminado .chat-burbuja-texto{
    display:flex; align-items:center; gap:7px; font-style:italic;
    background:transparent !important; color:hsl(var(--muted)) !important;
    border:1.5px dashed hsl(var(--muted)/0.35); border-radius:9999px !important;
    padding:7px 14px;
  }
  .chat-burbuja.eliminado .chat-burbuja-texto svg{ width:13px; height:13px; opacity:.7; flex-shrink:0; }
  /* Editar/borrar (2026-08-30, "como discord") — solo en tus propios
     mensajes, aparecen al pasar el mouse (mismo criterio que .mt-borrar
     en las tarjetas del panel: opacity 0→1 sobre el padre en hover). En
     touch (sin :hover real) tocar la burbuja los deja visibles un rato,
     ver _chatBurbujaToggleAcciones. */
  .chat-burbuja-wrap{
    position:relative; display:flex; flex-direction:column; max-width:78%;
    /* Bug real reportado (2026-08-30, "casi ni te deja borrar/editar/
       reenviar el mensaje"): las acciones flotaban 13px POR ARRIBA de este
       elemento (fuera de su propia caja), pero solo se muestran con :hover
       DE ESTE elemento — al mover el mouse desde adentro del mensaje hacia
       el botón, el cursor salía del área hoverable justo antes de llegar,
       así que el botón desaparecía a mitad de camino. Se agranda la caja
       hacia arriba con padding+margin negativo (se cancelan, el layout no
       se mueve un píxel) para que ESE espacio quede adentro del hover real. */
    padding-top:16px; margin-top:-16px;
  }
  .chat-burbuja-wrap.mia{ align-self:flex-end; }
  .chat-burbuja-wrap.otro{ align-self:flex-start; }
  .chat-burbuja-acciones{
    position:absolute; top:3px; display:flex; gap:4px; opacity:0; pointer-events:none;
    transition:opacity .18s ease;
  }
  /* Responder/Reenviar ahora aparecen en CUALQUIER mensaje, no solo el
     propio (2026-08-30) — .otro necesita su propia posición (izquierda,
     del lado del avatar) además de la de .mia (derecha) que ya existía. */
  .chat-burbuja.mia .chat-burbuja-acciones{ right:6px; }
  .chat-burbuja.otro .chat-burbuja-acciones{ left:6px; }
  .chat-burbuja-wrap:hover .chat-burbuja-acciones, .chat-burbuja-wrap.acciones-on .chat-burbuja-acciones{
    opacity:1; pointer-events:auto;
  }
  .chat-burbuja-accion-btn{
    width:27px; height:27px; border-radius:50%; border:1.5px solid hsl(0 0% 100% / 0.14); cursor:pointer; display:flex; align-items:center; justify-content:center;
    background:hsl(0 0% 8% / 0.92); color:hsl(var(--muted)); box-shadow:0 2px 10px rgba(0,0,0,0.5);
    transition:transform .18s var(--ease-spring), color .18s ease;
  }
  .chat-burbuja-accion-btn:hover{ transform:scale(1.12); color:hsl(var(--gold-2)); }
  .chat-burbuja-accion-btn svg{ width:12px; height:12px; }
  /* Rediseño (2026-08-30, corrección "se ve medio mal") — dejó de ser
     textarea+2 botones apretados en una fila angosta dentro de la burbuja
     gold de siempre; ahora es su propia tarjeta glass, ancho propio (no
     atado al 78% de .chat-burbuja-wrap), textarea arriba y acciones abajo
     a la derecha — se lee como "modo edición", no como un mensaje raro. */
  .chat-burbuja-wrap.editando{ max-width:min(420px, 92%); width:100%; }
  .chat-burbuja-editar-caja{
    display:flex; flex-direction:column; gap:8px; width:100%; padding:10px 12px;
    background:rgba(255,255,255,0.05); border:1.5px solid hsl(var(--gold-2)/0.4); border-radius:16px;
  }
  .chat-burbuja-editar-caja textarea{ width:100%; resize:none; max-height:110px; font-size:13.5px; }
  .chat-burbuja-editar-acciones{ display:flex; justify-content:flex-end; gap:8px; }
  /* Reacciones en mensajes (2026-08-30, pedido explícito: "reaccionar
     todos los mensajes hasta los posts") — reusa los chips/picker de El
     Muro tal cual (.muro-reaccion-chip/.muro-reaccion-add/.muro-emoji-picker),
     solo este contenedor es propio: sin el borde/padding-top pensados para
     una tarjeta de post entera, acá va compacto debajo de una burbuja chica. */
  .chat-burbuja-reacciones{ display:flex; flex-wrap:wrap; gap:5px; margin-top:4px; position:relative; }
  /* Corrección (2026-08-30, "se ve rarro" reportado): sin esto, la fila de
     reacciones siempre quedaba pegada a la izquierda (default de flex) aun
     debajo de una burbuja propia alineada a la derecha — no coincidía con
     el globo. También el botón de "+" quedaba siempre visible en TODOS los
     mensajes aunque no tuvieran ninguna reacción — ahora aparece recién al
     pasar el mouse (mismo criterio que .chat-burbuja-acciones), y las
     reacciones YA puestas por alguien siguen siempre visibles. */
  .chat-burbuja-wrap.mia .chat-burbuja-reacciones{ justify-content:flex-end; }
  .chat-burbuja-reacciones .muro-reaccion-add{ opacity:0; transition:opacity .18s ease; }
  .chat-burbuja-wrap:hover .chat-burbuja-reacciones .muro-reaccion-add,
  .chat-burbuja-wrap.acciones-on .chat-burbuja-reacciones .muro-reaccion-add{ opacity:1; }
  .chat-burbuja-reenviado{
    display:flex; align-items:center; gap:5px; font-size:12px; font-style:italic;
    color:hsl(var(--muted)/0.85); margin-bottom:2px;
  }
  .chat-burbuja-reenviado svg{ width:11px; height:11px; opacity:.8; }
  .chat-burbuja-wrap.mia .chat-burbuja-reenviado{ justify-content:flex-end; }

  /* Compartir un post del Muro a un chat (2026-08-30, pedido explícito) */
  .chat-burbuja-post-compartido{
    display:flex; align-items:center; gap:9px; padding:8px; margin-bottom:6px;
    background:rgba(0,0,0,0.18); border:1px solid hsl(var(--stroke)/0.12); border-radius:12px;
    cursor:pointer; transition:background .18s ease;
  }
  .chat-burbuja-post-compartido:hover{ background:rgba(0,0,0,0.28); }
  .chat-burbuja-post-compartido img{ width:38px; height:38px; border-radius:8px; object-fit:cover; flex-shrink:0; }
  .chat-burbuja-post-compartido .txt{ display:flex; flex-direction:column; gap:2px; font-size:12px; min-width:0; }
  .chat-burbuja-post-compartido .txt b{ font-size:12px; }
  .chat-burbuja-post-compartido .txt span{ color:hsl(var(--muted)); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

  /* Vista previa de link (2026-08-30, pedido explícito) */
  .chat-burbuja-link-preview{
    display:flex; flex-direction:column; margin-top:6px; border:1px solid hsl(var(--stroke)/0.14);
    border-radius:12px; overflow:hidden; background:rgba(0,0,0,0.18); text-decoration:none; color:inherit;
    transition:background .18s ease; max-width:280px;
  }
  .chat-burbuja-link-preview:hover{ background:rgba(0,0,0,0.28); }
  .chat-burbuja-link-preview img{ width:100%; max-height:140px; object-fit:cover; display:block; }
  .chat-burbuja-link-preview .txt{ display:flex; flex-direction:column; gap:2px; padding:8px 10px; }
  .chat-burbuja-link-preview .sitio{ font-size:12px; text-transform:uppercase; letter-spacing:.4px; color:hsl(var(--muted)); }
  .chat-burbuja-link-preview b{ font-size:12.5px; line-height:1.3; }
  .chat-burbuja-link-preview .desc{ font-size:12px; color:hsl(var(--muted)); overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }

  /* "Visto" / doble check en DM (2026-08-30, pedido explícito) */
  .chat-burbuja-visto{ display:inline-flex; margin-left:4px; vertical-align:middle; color:hsl(var(--muted)/0.75); }
  .chat-burbuja-visto svg{ width:13px; height:13px; }
  .chat-burbuja-visto.leido{ color:hsl(var(--gold-2)); }

  /* Silenciado en la lista de grupos (2026-08-30) */
  .chats-lista-mute{ display:inline-flex; margin-left:6px; color:hsl(var(--muted)/0.6); vertical-align:middle; }
  .chats-lista-mute svg{ width:13px; height:13px; }

  /* Contador de no leídos (2026-08-30, pedido explícito) */
  .chats-badge-no-leidos{
    flex-shrink:0; min-width:20px; height:20px; padding:0 6px; border-radius:9999px;
    background:hsl(var(--gold-2)); color:#1a1305; font-size:12px; font-weight:800;
    display:flex; align-items:center; justify-content:center;
  }
  .chats-badge-tab{ position:absolute; top:2px; right:2px; min-width:16px; height:16px; font-size:12px; padding:0 4px; }

  /* Marco de avatar Premium (2026-08-30, rediseñado — el primer intento con
     anillo multicolor girando "se veía feísimo", pedido explícito). Ahora
     es un anillo dorado sólido y quieto + el mismo halo suave que ya usan
     los botones/insignias doradas del sitio (mismo lenguaje visual, nada
     nuevo ni llamativo) — más "impecable", menos genérico. */
  .avatar-frame-premium{
    display:inline-flex; border-radius:50%; padding:2px; flex-shrink:0;
    background:hsl(var(--gold-2));
    box-shadow:0 0 0 1px hsl(var(--gold-2)/0.4), 0 0 8px hsl(var(--gold-2)/0.35);
  }
  .avatar-frame-premium img{ display:block; border-radius:50%; }
  /* Variantes de marco (2026-08-30, pedido explícito: "unos de colores y
     uno glassmorphic") — mismo esqueleto sólido de arriba, solo cambia el
     color; "glass" es el único distinto de verdad (frost real con blur). */
  .avatar-frame-premium.marco-rojo{ background:hsl(355 70% 55%); box-shadow:0 0 0 1px hsl(355 70% 55% / 0.4), 0 0 8px hsl(355 70% 55% / 0.4); }
  .avatar-frame-premium.marco-azul{ background:hsl(212 75% 58%); box-shadow:0 0 0 1px hsl(212 75% 58% / 0.4), 0 0 8px hsl(212 75% 58% / 0.4); }
  .avatar-frame-premium.marco-amarillo{ background:hsl(45 85% 58%); box-shadow:0 0 0 1px hsl(45 85% 58% / 0.4), 0 0 8px hsl(45 85% 58% / 0.4); }
  .avatar-frame-premium.marco-verde{ background:hsl(140 60% 46%); box-shadow:0 0 0 1px hsl(140 60% 46% / 0.4), 0 0 8px hsl(140 60% 46% / 0.4); }
  .avatar-frame-premium.marco-morado{ background:hsl(265 60% 60%); box-shadow:0 0 0 1px hsl(265 60% 60% / 0.4), 0 0 8px hsl(265 60% 60% / 0.4); }
  .avatar-frame-premium.marco-glass{
    background:rgba(255,255,255,0.22); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
    box-shadow:0 0 0 1px rgba(255,255,255,0.45), 0 0 10px rgba(255,255,255,0.3), inset 0 0 6px rgba(255,255,255,0.25);
  }

  /* ===== Ronda "tipo Discord" (2026-08-30, pedido explícito) — markdown,
     spoilers, responder/citar, fijar, reenviar, presencia, buscar. ===== */

  /* Markdown estilo Discord — aplica a TODOS los mensajes (viejos y
     nuevos, es puramente de render, no se guarda transformado). */
  .chat-code-inline{ background:rgba(255,255,255,0.14); padding:1px 5px; border-radius:5px; font-family:'JetBrains Mono',monospace; font-size:12px; }
  .chat-code-block{
    display:block; background:hsl(0 0% 0% / 0.32); padding:8px 10px; border-radius:8px;
    font-family:'JetBrains Mono',monospace; font-size:12px; overflow-x:auto; margin:2px 0;
    white-space:pre-wrap; word-break:break-word;
  }
  .chat-burbuja.mia .chat-code-inline{ background:hsl(0 0% 0% / 0.16); }
  .chat-burbuja.mia .chat-code-block{ background:hsl(0 0% 0% / 0.22); }
  /* Encabezados # ## ### (2026-08-30, pedido explícito) — mismo texto que
     el resto de la burbuja (hereda color, incluido el oscuro de .mia sobre
     fondo dorado), solo cambia tamaño/peso. */
  /* Bug real (2026-08-31, encontrado en la mini-preview de perfil): estos
     3 estaban escritos SOLO con el selector `.chat-burbuja-texto` de
     adelante — dentro de una burbuja de chat se veían bien, pero
     `_chatRenderTexto` se reusa en más lugares (bio del perfil completo,
     y ahora la mini-preview) donde esa clase padre no existe, así que el
     h1/h2/h3 caía al tamaño GIGANTE default del navegador. Sin el prefijo
     + en `em` (relativo al font-size del contenedor que lo use) se ve
     proporcionado en cualquier lado sin tener que duplicar reglas por
     contexto. */
  h1.chat-md-h{ font-size:1.35em; font-weight:800; margin:2px 0; line-height:1.3; }
  h2.chat-md-h{ font-size:1.2em; font-weight:800; margin:2px 0; line-height:1.3; }
  h3.chat-md-h{ font-size:1.08em; font-weight:700; margin:2px 0; line-height:1.3; }
  .chat-spoiler{
    background:hsl(0 0% 3% / 0.9); color:transparent; border-radius:4px; cursor:pointer; padding:0 3px;
    transition:background .15s ease, color .15s ease; user-select:none;
  }
  .chat-spoiler.revelado{ background:rgba(255,255,255,0.1); color:inherit; cursor:text; user-select:text; }
  .chat-burbuja.mia .chat-spoiler.revelado{ background:hsl(0 0% 0% / 0.14); }

  /* Responder/citar (2026-08-30, pedido explícito) — cita chica arriba del
     mensaje, clickeable para saltar al original si sigue cargado en
     pantalla (ver _chatScrollAMensaje); si ya no está cargado, no rompe
     nada, simplemente no hace scroll. */
  .chat-burbuja-respuesta{
    display:flex; align-items:center; gap:5px; font-size:12px; color:hsl(var(--muted)); cursor:pointer;
    padding:3px 9px; margin-bottom:3px; border-left:2px solid hsl(var(--gold-2)/0.5); border-radius:4px;
    background:rgba(255,255,255,0.04); max-width:220px; overflow:hidden;
  }
  .chat-burbuja-respuesta:hover{ background:rgba(255,255,255,0.08); }
  .chat-burbuja-respuesta svg{ width:11px; height:11px; flex-shrink:0; opacity:.7; }
  .chat-burbuja-respuesta b{ color:hsl(var(--gold-2)); font-weight:700; }
  .chat-burbuja-respuesta span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  @keyframes chatFlashOriginal{ 0%,100%{ background:transparent; } 30%{ background:hsl(var(--gold-2)/0.18); } }
  .chat-burbuja-wrap.flash{ animation:chatFlashOriginal 1s ease; border-radius:16px; }
  .chats-sala-responder-strip{
    display:none; align-items:center; gap:8px; padding:8px 12px; margin-bottom:8px; border-radius:12px;
    background:rgba(255,255,255,0.05); border-left:3px solid hsl(var(--gold-2)/0.6); font-size:12.5px;
  }
  .chats-sala-responder-strip.on{ display:flex; }
  .chats-sala-responder-strip .txt{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:hsl(var(--muted)); }
  .chats-sala-responder-strip b{ color:hsl(var(--gold-2)); }

  /* Múltiples adjuntos por mensaje (2026-08-30, pedido explícito) — grilla
     solo para imágenes consecutivas (mismo criterio visual que las fotos de
     un post en El Muro); video/audio/documento se apilan, uno por fila. */
  .chat-adjuntos-imgs{ display:grid; gap:4px; max-width:320px; }
  .chat-adjuntos-imgs.n2, .chat-adjuntos-imgs.n4{ grid-template-columns:1fr 1fr; }
  .chat-adjuntos-imgs img{ width:100%; height:100%; object-fit:cover; border-radius:14px; display:block; max-height:210px; }
  /* Mismo bug/corrección que las fotos de El Muro (2026-08-30) — con 1 sola
     foto no hace falta recortar para encajarla junto a otras. */
  .chat-adjuntos-imgs.n1{ display:flex; background:hsl(0 0% 0% / 0.25); max-height:220px; }
  .chat-adjuntos-imgs.n1 img{ width:auto; height:auto; max-width:100%; max-height:220px; object-fit:contain; }
  .chat-burbuja-otros-adjuntos{ display:flex; flex-direction:column; gap:6px; }

  /* Fijados (2026-08-30, pedido explícito, solo Grupos) */
  .chats-fijados-btn{
    display:inline-flex; align-items:center; gap:6px; font-size:12px; padding:6px 12px; border-radius:9999px;
    background:hsl(var(--gold-2)/0.12); border:1px solid hsl(var(--gold-2)/0.3); color:hsl(var(--gold-2)); cursor:pointer;
  }
  .chats-fijados-btn svg{ width:13px; height:13px; }
  .chats-fijado-item{ padding:10px 12px; border-radius:12px; background:rgba(255,255,255,0.04); margin-bottom:8px; cursor:pointer; }
  .chats-fijado-item:hover{ background:rgba(255,255,255,0.08); }
  .chats-fijado-item .autor{ font-weight:700; font-size:12.5px; color:hsl(var(--gold-2)); }
  .chats-fijado-item .txt{ font-size:12.5px; color:hsl(var(--muted)); margin-top:2px; }

  /* Presencia — puntito verde/gris sobre el avatar (2026-08-30, pedido explícito) */
  .chats-avatar-wrap{ position:relative; display:inline-flex; flex-shrink:0; }
  .chats-presencia-dot{
    position:absolute; bottom:-1px; right:-1px; width:10px; height:10px; border-radius:50%;
    background:hsl(var(--muted)); border:2px solid hsl(var(--bg));
  }
  .chats-presencia-dot.on{ background:#3ba55d; }

  /* Buscar en el historial (2026-08-30, pedido explícito) */
  .chats-buscar-panel{ margin-bottom:14px; }
  .chats-buscar-resultado{ padding:10px 12px; border-radius:12px; background:rgba(255,255,255,0.04); margin-bottom:8px; cursor:pointer; }
  .chats-buscar-resultado:hover{ background:rgba(255,255,255,0.08); }
  .chats-buscar-resultado .autor{ font-weight:700; font-size:12.5px; }
  .chats-buscar-resultado .txt{ font-size:12.5px; color:hsl(var(--muted)); margin-top:2px; }

  .chats-escribiendo{
    display:flex; align-items:center; gap:8px; height:26px; padding:0 4px; font-size:12px; color:hsl(var(--muted));
    opacity:0; transition:opacity .2s ease;
  }
  .chats-escribiendo.on{ opacity:1; }
  .chats-escribiendo img{ width:18px; height:18px; border-radius:50%; }
  .chats-escribiendo-dots span{
    display:inline-block; width:4px; height:4px; border-radius:50%; background:hsl(var(--muted)); margin:0 1px;
    animation:chatsEscribiendoDot 1.1s ease-in-out infinite;
  }
  .chats-escribiendo-dots span:nth-child(2){ animation-delay:.15s; }
  .chats-escribiendo-dots span:nth-child(3){ animation-delay:.3s; }
  @keyframes chatsEscribiendoDot{ 0%,60%,100%{ opacity:.25; transform:translateY(0); } 30%{ opacity:1; transform:translateY(-2px); } }
  .chats-sala-composer{ display:flex; align-items:flex-end; gap:8px; }
  .chats-sala-composer textarea{ flex:1; resize:none; max-height:100px; }
  .chats-sala-img-preview{ position:relative; display:inline-block; margin-bottom:8px; border-radius:12px; overflow:hidden; max-width:140px; }
  .chats-sala-img-preview img{ width:100%; display:block; }
  .chats-sala-img-preview .perfil-icon-btn{ position:absolute; top:4px; right:4px; background:hsl(0 0% 0% / 0.55); width:22px; height:22px; }
  .chats-sala-img-preview .perfil-icon-btn svg{ width:11px; height:11px; }

  .chats-miembro-fila{
    display:flex; align-items:center; gap:10px; padding:9px 8px; border-radius:12px;
    transition:transform .2s var(--ease-spring), background .18s ease;
  }
  .chats-miembro-fila:hover{ transform:translateY(-3px); background:rgba(255,255,255,0.05); }
  .chats-miembro-fila img{ width:32px; height:32px; border-radius:50%; object-fit:cover; }
  .chats-agregar-miembro-fila{ display:flex; align-items:center; gap:10px; padding:8px 4px; cursor:pointer; border-radius:10px; }
  .chats-agregar-miembro-fila:hover{ background:rgba(255,255,255,0.05); }
  /* Lista de integrantes agrupada, tipo Discord (2026-08-30, pedido
     explícito: "conectados y verificados aparte en lista... owner también
     separado") — encabezado chico por grupo, mismo criterio visual que
     cualquier ".ep-label"/label de sección del sitio. */
  .chats-integrantes-label{
    font-size:12px; font-weight:700; letter-spacing:.6px; text-transform:uppercase;
    color:hsl(var(--muted)/0.75); margin:14px 4px 4px;
  }
  .chats-integrantes-label:first-child{ margin-top:0; }
  /* Bug real (2026-08-30, encontrado revisando esto): esta clase se usaba
     en el HTML desde la pasada anterior pero nunca tuvo CSS — un <svg>
     inline sin width/height ni clase que lo acote cae al tamaño default
     del navegador (~300x150px), así que la corona del propietario se
     pintaba gigante y rompía toda la fila. */
  .chats-miembro-corona{ display:inline-flex; vertical-align:-2px; margin-right:3px; flex-shrink:0; color:hsl(var(--gold-2)); }
  .chats-miembro-corona svg{ width:13px; height:13px; }
  .chats-miembro-verificado{ display:inline-flex; vertical-align:-2px; margin-left:3px; flex-shrink:0; }
  .chats-miembro-verificado svg{ width:13px; height:13px; }
  .chats-miembro-premium{ display:inline-flex; vertical-align:-2px; margin-left:3px; flex-shrink:0; color:hsl(var(--gold-2)); }
  .chats-miembro-premium svg{ width:13px; height:13px; }

  /* Crear grupo (2026-08-30) — selector de foto circular, mismo lenguaje
     visual que el avatar de perfil. */
  .chats-grupo-foto-picker{
    width:74px; height:74px; border-radius:50%; cursor:pointer; overflow:hidden;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
    background:rgba(255,255,255,0.06); border:1.5px dashed rgba(255,255,255,0.18); color:hsl(var(--muted));
    transition:border-color .18s ease, color .18s ease, transform .18s var(--ease-spring);
  }
  .chats-grupo-foto-picker:hover{ border-color:hsl(var(--gold-2)/0.5); color:hsl(var(--gold-2)); transform:scale(1.04); }
  .chats-grupo-foto-picker svg{ width:24px; height:24px; }
  .chats-grupo-foto-picker img{ width:100%; height:100%; object-fit:cover; }

  /* Botón "+" verde (2026-08-30, pedido explícito: "un botón de más
     nuevo, personalizado para nosotros, pero de color verde — tocás y se
     agrega nomás") — propio del flujo de agregar amigos a un grupo recién
     creado, un tap alcanza (sin modal de confirmación aparte). El estado
     `.on` (después de agregar) queda como una insignia fija, no un botón
     — no tiene sentido "reclickear" a alguien que ya está adentro. */
  .chats-agregar-verde-btn{
    width:30px; height:30px; border-radius:50%; border:none; cursor:pointer; flex-shrink:0;
    display:inline-flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg, #34d05c, #1fa347); color:#04170a;
    box-shadow:0 4px 14px rgba(52,208,92,0.35);
    transition:transform .18s var(--ease-spring), box-shadow .18s ease;
  }
  .chats-agregar-verde-btn:hover{ transform:scale(1.12); box-shadow:0 6px 18px rgba(52,208,92,0.5); }
  .chats-agregar-verde-btn:active{ transform:scale(0.92); }
  .chats-agregar-verde-btn svg{ width:15px; height:15px; }
  .chats-agregar-verde-btn.on{ background:rgba(255,255,255,0.08); color:hsl(var(--gold-2)); box-shadow:none; cursor:default; }

  .perfil-stats-row{ display:flex; gap:10px; margin:0 8px 24px; flex-wrap:wrap; }
  .perfil-stat{
    display:flex; align-items:baseline; gap:7px; padding:11px 18px; border-radius:14px; cursor:pointer;
    background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.07);
    transition:transform .2s var(--ease-spring), background .2s ease, border-color .2s ease;
  }
  .perfil-stat:hover{ transform:translateY(-2px); background:rgba(255,255,255,0.07); border-color:hsl(var(--gold-2)/0.4); }
  .perfil-stat:active{ transform:scale(0.96); }
  .perfil-stat b{ font-size:16px; font-family:'JetBrains Mono',monospace; }
  .perfil-stat span{ font-size:12.5px; color:hsl(var(--muted)); }
  .perfil-acciones-row{ display:flex; gap:10px; margin:0 8px 26px; flex-wrap:wrap; }
  .perfil-card{ padding:26px; }
  .perfil-card-titulo{ font-family:'Montserrat',sans-serif; font-weight:700; font-size:14.5px; margin-bottom:16px; display:flex; align-items:center; gap:8px; }
  .perfil-card-titulo svg{ width:15px; height:15px; flex-shrink:0; }
  .perfil-desc-input{ width:100%; min-height:90px; resize:vertical; font-family:inherit; font-size:13.5px; padding:12px 14px; }
  .perfil-desc-view{ font-size:13.5px; color:hsl(var(--muted)); line-height:1.6; white-space:pre-wrap; }
  .perfil-empty{ font-size:13px; color:hsl(var(--muted)/0.7); font-style:italic; }
  /* Pestañas Plantillas/Servers (2026-08-29, pedido explícito: "son 2
     botones") — segmented control simple, mismo criterio visual que el
     resto de toggles del sitio (acento dorado en el activo). */
  .perfil-tabs{ display:flex; gap:10px; margin:0 8px 22px; flex-wrap:wrap; }
  .perfil-tab-btn{
    padding:12px 20px; border-radius:9999px; border:1.5px solid transparent; cursor:pointer;
    background:rgba(255,255,255,0.04); color:hsl(var(--muted)); font-size:13.5px; font-weight:600;
    transition:transform .18s var(--ease-spring), background .18s ease, border-color .18s ease, color .18s ease;
  }
  .perfil-tab-btn svg{ width:14px; height:14px; vertical-align:-2px; margin-right:2px; }
  .perfil-tab-btn:hover{ transform:translateY(-2px); background:rgba(255,255,255,0.07); }
  .perfil-tab-btn.on{ background:hsl(var(--gold-2)/0.14); border-color:hsl(var(--gold-2)/0.5); color:hsl(var(--text)); }
  .perfil-tab-btn:active{ transform:scale(0.96); }
  .perfil-tab-panel{ margin:0 8px 70px; }
  /* Logros — pestaña del perfil de cuenta (2026-09-06, pedido explícito:
     "se tenía que ver en este perfil, no en los otros"). Se agregan
     GLOBALES (cualquier server donde el usuario lo haya desbloqueado, ver
     /api/perfil/logros sin `server`), porque este perfil no es de un
     server puntual como manzasbot-perfil.html. Rediseño (mismo día, pedido
     explícito: "se ve feísimo") — la primera versión copiaba tal cual la
     vitrina chica del otro perfil (grilla de 76px, sin superficie propia):
     a ese tamaño los badges de 320px (con degradé, sheen y destellos, ver
     logros.py generar_badge) se veían chatos, como íconos sueltos flotando
     sin jerarquía. Ahora cada uno es una tarjeta .glass real. */
  .logros-header{ display:flex; align-items:center; justify-content:flex-end; margin:0 0 14px; }
  .logros-header .conteo{
    font-size:12px; font-weight:700; font-family:'JetBrains Mono',monospace; color:hsl(var(--gold-2));
    padding:5px 13px; border-radius:99px; background:hsl(var(--gold-2)/0.12); border:1px solid hsl(var(--gold-2)/0.28);
  }
  .logros-barra{ height:7px; border-radius:99px; background:hsl(0 0% 100% / 0.06); overflow:hidden; margin-bottom:22px; }
  .logros-barra i{ display:block; height:100%; background:linear-gradient(90deg, hsl(var(--gold)), hsl(var(--gold-2))); border-radius:99px; transition: width .8s var(--ease-smooth); }
  .logros-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(116px,1fr)); gap:16px; }
  /* Cada logro es su propia "vitrina" — antes era solo la imagen del badge
     flotando sin superficie ni jerarquía (por eso se veía plano/feo a este
     tamaño chico); ahora es una tarjeta .glass real (MISMA superficie que
     ya usa el resto del sitio — .perfil-server-card, .plant-com-card,
     etc., nunca un borde/fondo inventado a mano acá), con un halo de color
     detrás de la medalla SOLO en las desbloqueadas (más fuerte en
     épico/legendario, ver [data-rareza] más abajo) — es la única pieza
     "vistosa" a propósito, todo el resto queda quieto y disciplinado
     alrededor para no competir con eso. */
  .logro-card{
    position:relative; text-align:center; cursor:pointer;
    padding:16px 8px 14px !important; border-radius:18px !important;
    transition: transform .18s var(--ease-spring) !important;
    opacity:0; animation:cardPopIn .45s var(--ease-spring) both;
  }
  /* Hover real (mouse) levanta la tarjeta entera; en touch, tocar ya abre
     el detalle — sin la media query, el "hover pegado" post-tap en celular
     deja la tarjeta así hasta el próximo toque en otro lado. */
  @media (hover:hover) and (pointer:fine){
    .logro-card:hover{ transform:translateY(-3px); }
    .logro-card:hover .logro-medalla img{ transform:scale(1.06); }
  }
  .logro-card:active{ transform:scale(0.96); transition-duration:.12s; }
  .logro-card:active .logro-medalla img{ transform:scale(0.94); transition-duration:.12s; }
  .logro-card:focus-visible{ outline:2px solid hsl(var(--gold-2)) !important; outline-offset:3px; }
  .logro-medalla{ position:relative; width:60px; height:60px; margin:0 auto 10px; }
  .logro-medalla::before{
    content:''; position:absolute; inset:-16px; border-radius:50%; pointer-events:none;
    background:radial-gradient(circle, var(--r2) 0%, transparent 70%);
    opacity:0; transition:opacity .35s ease;
  }
  .logro-card.desbloqueado .logro-medalla::before{ opacity:.5; }
  .logro-card.desbloqueado[data-rareza="epico"] .logro-medalla::before,
  .logro-card.desbloqueado[data-rareza="legendario"] .logro-medalla::before{ opacity:.85; }
  .logro-medalla img{
    position:relative; width:100%; height:100%; border-radius:16px; display:block; object-fit:cover;
    transition: transform .3s var(--ease-spring), filter .3s ease;
  }
  .logro-card.bloqueado .logro-medalla img{ filter:grayscale(1) brightness(.42); opacity:.7; }
  .logro-candado{
    position:absolute; right:-2px; bottom:-2px; width:22px; height:22px; border-radius:50%;
    background:hsl(230 12% 13%); border:2px solid hsl(0 0% 100% / 0.1);
    display:flex; align-items:center; justify-content:center; font-size:12px; line-height:1;
  }
  .logro-candado svg{ width:11px; height:11px; }
  .logro-nombre{
    font-family:'Montserrat',sans-serif; font-size:12px; font-weight:700; line-height:1.3;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
  .logro-card.bloqueado .logro-nombre{ color:hsl(var(--muted)); }
  .logro-pct{ font-size:12px; font-weight:600; font-family:'JetBrains Mono',monospace; margin-top:5px; letter-spacing:.2px; color:hsl(var(--muted)); }
  .logro-card.desbloqueado .logro-pct{ color:var(--r2); }
  /* Popover de detalle al tocar un logro (2026-09-06, pedido explícito) —
     es un POPOVER, no un modal: se ancla y escala desde la tarjeta que lo
     abrió (transform-origin dinámico, ver _logroAbrirPopover), nunca desde
     el centro de la pantalla — esa regla es solo para modales centrados
     (mt-modal). Entrada 170ms con la curva fuerte de siempre del sitio
     (--ease-smooth ya es un ease-out marcado); la salida es más corta
     (110ms) porque cerrar debe sentirse instantáneo, abrir puede tomarse
     un pelo más para que se note la aparición. */
  .logro-popover{
    position:fixed; z-index:260; width:272px; max-width:calc(100vw - 24px);
    padding:18px; border-radius:18px;
    background:var(--glass-bg); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
    border:var(--glass-border); box-shadow:0 24px 60px rgba(0,0,0,0.55);
    opacity:0; transform:scale(0.92);
    transform-origin: var(--logro-pop-origin, center);
    transition: opacity 110ms ease, transform 110ms ease;
  }
  .logro-popover.abierto{ opacity:1; transform:scale(1); transition-duration:170ms; transition-timing-function:var(--ease-smooth); }
  .logro-popover-head{ display:flex; gap:12px; align-items:center; margin-bottom:12px; }
  .logro-popover-head img{ width:52px; height:52px; border-radius:14px; object-fit:cover; flex-shrink:0; }
  .logro-popover-head img.bloqueado{ filter:grayscale(1) brightness(.4); opacity:.75; }
  .logro-popover-nombre{ font-family:'Montserrat',sans-serif; font-weight:700; font-size:14.5px; line-height:1.3; }
  .logro-popover-rareza{ display:inline-block; margin-top:5px; padding:2px 10px; border-radius:99px; font-size:12px; font-weight:700; letter-spacing:.3px; color:#fff; }
  .logro-popover-desc{ font-size:12.5px; color:hsl(var(--muted)); line-height:1.55; margin-bottom:12px; }
  .logro-popover-foot{ font-size:12px; color:hsl(var(--muted)); font-family:'JetBrains Mono',monospace; display:flex; justify-content:space-between; align-items:center; padding-top:10px; border-top:1px solid hsl(var(--stroke)/0.08); }
  .logro-popover-foot b{ color:hsl(var(--gold-2)); font-weight:700; }
  /* Tarjetas de plantilla en la pestaña "Plantillas publicadas" son las
     MISMAS que la galería (.plant-com-grid/.plant-com-card, ver
     _plantComCardHtml) — nada nuevo acá para esas. */
  .perfil-servers-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:14px; }
  .perfil-server-card{
    display:flex; align-items:center; gap:8px; padding:12px 12px 12px 16px;
    transition:transform .2s var(--ease-spring);
  }
  .perfil-server-card:hover{ transform:translateY(-3px); }
  .perfil-server-card.oculto{ opacity:.45; }
  .perfil-server-card-info{ display:flex; align-items:center; gap:12px; flex:1; min-width:0; cursor:pointer; }
  .perfil-server-card img{ width:44px; height:44px; border-radius:50%; object-fit:cover; flex-shrink:0; }
  .perfil-server-fallback{
    width:44px; height:44px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center;
    background:hsl(var(--gold-2)/0.18); color:hsl(var(--gold-2)); font-family:'Montserrat',sans-serif; font-weight:800; font-size:17px;
  }
  .perfil-server-card b{ font-size:13.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  /* Ocultar/mostrar un server del perfil (2026-08-29, pedido explícito) */
  .perfil-server-ojo{
    width:30px; height:30px; border-radius:50%; border:none; cursor:pointer; flex-shrink:0;
    background:rgba(255,255,255,0.05); color:hsl(var(--muted)); display:flex; align-items:center; justify-content:center;
    transition:background .18s ease, color .18s ease, transform .18s var(--ease-spring);
  }
  .perfil-server-ojo:hover{ background:rgba(255,255,255,0.1); color:hsl(var(--text)); transform:scale(1.1); }
  .perfil-server-ojo svg{ width:15px; height:15px; }

  /* Lista de amigos/seguidores/siguiendo — modal chico glass, se abre
     desde los stats de arriba. */
  .perfil-lista-fila{ display:flex; align-items:center; gap:12px; padding:10px 4px; border-bottom:1px solid rgba(255,255,255,0.05); }
  .perfil-lista-fila:last-child{ border-bottom:none; }
  .perfil-lista-fila img{ width:36px; height:36px; border-radius:50%; object-fit:cover; flex-shrink:0; }
  .perfil-lista-fila span{ font-size:13.5px; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }