:root{
    --bg:#08050a; --surface:#150c11; --surface-2:#1e1216; --border:#332025;
    --text:#f1ece2; --text-muted:#9c868c;
    --accent:#fb0135; --accent-dim:rgba(251,1,53,.16); --accent-glow:#ff5c76;
    --success:#49b283; --danger:#ff5a4d; --warning:#e0b23a;
    --r-sm:4px; --r-md:10px;
  }
  *{box-sizing:border-box;}
  [hidden]{display:none !important;}
  body{margin:0;background:var(--bg);color:var(--text);font-family:'Inter',system-ui,sans-serif;}
  h1,h2,h3,.mark,nav button,button.btn{font-family:'Oswald',sans-serif;font-weight:600;}
  .mono{font-family:'JetBrains Mono',monospace;}
  a{color:var(--accent-glow);}
  button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
    outline:2px solid var(--accent); outline-offset:2px;
  }
  svg.icon{width:16px;height:16px;stroke:currentColor;stroke-width:1.8;fill:none;
    stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}

  /* ---------- Login ---------- */
  .login-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;
    position:relative;overflow:hidden;
    background:radial-gradient(ellipse at 50% 20%, rgba(251,1,53,.14), transparent 55%), var(--bg);}
  .login-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
  .login-grid{position:absolute;inset:0;
    background-image:linear-gradient(rgba(251,1,53,.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(251,1,53,.05) 1px, transparent 1px);
    background-size:38px 38px;
    -webkit-mask-image:radial-gradient(ellipse at 50% 30%, black, transparent 70%);
    mask-image:radial-gradient(ellipse at 50% 30%, black, transparent 70%);}
  .login-radar{position:absolute;top:8%;left:50%;transform:translateX(-50%);
    width:520px;height:520px;border-radius:50%;border:1px solid rgba(251,1,53,.14);}
  .login-radar::before,.login-radar::after{content:'';position:absolute;inset:60px;
    border-radius:50%;border:1px solid rgba(251,1,53,.10);}
  .login-radar::after{inset:130px;}

  /* Ganchos angulares en las esquinas de la pantalla, como un HUD */
  .login-corner{position:fixed;width:64px;height:64px;pointer-events:none;z-index:2;
    border:2px solid rgba(251,1,53,.55);filter:drop-shadow(0 0 6px rgba(251,1,53,.35));}
  .login-corner-tl{top:22px;left:22px;border-right:none;border-bottom:none;}
  .login-corner-tr{top:22px;right:22px;border-left:none;border-bottom:none;}
  .login-corner-bl{bottom:22px;left:22px;border-right:none;border-top:none;}
  .login-corner-br{bottom:22px;right:22px;border-left:none;border-top:none;}
  @media(max-width:560px){.login-corner{width:32px;height:32px;}
    .login-corner-tl,.login-corner-tr{top:10px;} .login-corner-bl,.login-corner-br{bottom:10px;}
    .login-corner-tl,.login-corner-bl{left:10px;} .login-corner-tr,.login-corner-br{right:10px;}}

  .login-avatar-wrap{display:flex;justify-content:center;margin-bottom:18px;position:relative;}
  .login-bot-avatar{width:112px;height:112px;border-radius:50%;display:block;
    border:2px solid var(--accent);
    box-shadow:0 0 0 6px rgba(251,1,53,.08),0 0 30px rgba(251,1,53,.45),0 0 70px rgba(251,1,53,.2);
    object-fit:cover;background:var(--surface-2);}
  .login-card{width:100%;max-width:400px;background:rgba(18,11,14,.82);backdrop-filter:blur(8px);
    border:1px solid var(--border);border-radius:18px;padding:34px 30px 28px;
    position:relative;z-index:1;box-shadow:0 20px 70px rgba(0,0,0,.5),0 0 0 1px rgba(251,1,53,.06) inset;}
  .login-card::before{content:'';position:absolute;inset:0;border-radius:18px;padding:1px;
    background:linear-gradient(160deg, rgba(251,1,53,.5), transparent 30%, transparent 70%, rgba(251,1,53,.35));
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;}
  .accent-dot{color:var(--accent);}

  .brand-lockup{text-align:center;margin-bottom:22px;}
  .mark{font-size:24px;letter-spacing:0.5px;}
  .mark-lg{font-size:34px;letter-spacing:1px;text-transform:uppercase;font-weight:700;
    text-shadow:0 0 18px rgba(251,1,53,.5);}
  .sub{font-size:12px;color:var(--text-muted);margin-top:4px;font-family:'Inter';font-weight:400;}
  .sub-lg{font-size:12.5px;letter-spacing:2px;text-transform:uppercase;color:var(--text-muted);margin-top:2px;}
  .tagline{margin-top:10px;font-size:11px;letter-spacing:.6px;color:var(--text-muted);
    display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px;text-transform:uppercase;}
  .tagline-chip{border:1px solid var(--border);border-radius:20px;padding:2px 10px;color:var(--text);}
  .tagline-dot{color:var(--accent);}
  .error-text{color:var(--danger);font-size:13px;margin-top:14px;text-align:center;}

  /* Botones tipo HUD (login con Discord / añadir el bot) */
  .login-actions{display:flex;flex-direction:column;gap:10px;}
  .btn-hud{display:flex;align-items:center;gap:12px;width:100%;text-decoration:none;
    background:var(--surface-2);border:1px solid var(--border);border-radius:10px;
    padding:13px 16px;color:var(--text);font-family:'Oswald',sans-serif;font-weight:600;
    font-size:13.5px;letter-spacing:.3px;text-transform:uppercase;transition:border-color .15s,box-shadow .15s;}
  .btn-hud:hover{border-color:var(--accent);box-shadow:0 0 22px rgba(251,1,53,.25);}
  .btn-hud-icon{width:20px;height:20px;flex-shrink:0;stroke:var(--accent-glow);fill:none;
    stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
  #login-discord-btn .btn-hud-icon{fill:var(--accent-glow);stroke:none;}
  .btn-hud-label{flex:1;text-align:left;}
  .btn-hud-arrow{width:16px;height:16px;flex-shrink:0;stroke:var(--text-muted);fill:none;
    stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s,stroke .15s;}
  .btn-hud:hover .btn-hud-arrow{stroke:var(--accent-glow);transform:translateX(3px);}

  /* Fila de features debajo de los botones */
  .login-features{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:26px;
    padding-top:22px;border-top:1px solid var(--border);}
  .login-feature{text-align:center;}
  .login-feature-icon{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
    border-radius:10px;border:1px solid rgba(251,1,53,.4);background:var(--accent-dim);margin-bottom:8px;}
  .login-feature-icon .icon{width:17px;height:17px;stroke:var(--accent-glow);}
  .login-feature b{display:block;font-size:10.5px;letter-spacing:.3px;text-transform:uppercase;}
  .login-feature p{font-size:10px;color:var(--text-muted);margin:3px 0 0;line-height:1.35;}
  @media(max-width:420px){.login-features{grid-template-columns:repeat(2,1fr);row-gap:16px;}}

  .login-footer-tag{display:flex;align-items:center;gap:10px;justify-content:center;margin-top:24px;
    font-size:10px;letter-spacing:2px;color:var(--text-muted);}
  .login-footer-tag span{flex:1;max-width:60px;height:1px;background:var(--border);}

  .switch{position:relative;display:inline-block;width:36px;height:20px;}
  .switch input{opacity:0;width:0;height:0;}
  .switch-slider{position:absolute;inset:0;background:var(--surface-2);border:1px solid var(--border);
    border-radius:10px;cursor:pointer;transition:.15s;}
  .switch-slider::before{content:'';position:absolute;width:14px;height:14px;left:2px;top:2px;
    background:var(--text-muted);border-radius:50%;transition:.15s;}
  .switch input:checked + .switch-slider{background:var(--accent-dim);border-color:var(--accent);}
  .switch input:checked + .switch-slider::before{transform:translateX(16px);background:var(--accent);}

  /* Preview de Discord: usa los colores reales de Discord a propósito, no los
     tokens del panel — el objetivo es simular cómo se ve allá. */
  .discord-preview{background:#313338;border-radius:8px;padding:16px;margin-top:14px;}
  .dp-role-mention{background:rgba(88,101,242,.3);color:#c9cdfb;border-radius:3px;
    padding:1px 6px;font-size:13px;font-family:Inter,sans-serif;}
  .discord-preview-embed{border-left:4px solid var(--accent);background:#2b2d31;border-radius:4px;
    padding:12px 14px;max-width:430px;}
  .dp-title{color:#fff;font-weight:600;font-size:15px;margin-bottom:4px;}
  .dp-desc{color:#dbdee1;font-size:13.5px;line-height:1.4;white-space:pre-wrap;}
  .dp-image{max-width:100%;border-radius:4px;margin-top:8px;display:block;}
  .dp-footer{color:#949ba4;font-size:11.5px;margin-top:8px;}
  .dp-texto{color:#dbdee1;font-size:14px;white-space:pre-wrap;margin:0 0 10px;}
  .dp-emojis{font-size:18px;letter-spacing:6px;}
  .dp-fake-select{background:#1e1f22;color:#dbdee1;border:1px solid #111214;border-radius:4px;
    padding:8px 10px;font-size:13.5px;width:100%;max-width:400px;}
  .brand-lockup{text-align:center;margin-bottom:24px;}
  .mark{font-size:24px;letter-spacing:0.5px;}
  .sub{font-size:12px;color:var(--text-muted);margin-top:4px;font-family:'Inter';font-weight:400;}
  .error-text{color:var(--danger);font-size:13px;margin-top:10px;}

  /* ---------- Login con Discord / selección de servidor ---------- */
  .btn-discord{display:flex;align-items:center;justify-content:center;gap:8px;
    background:#5865f2;color:#fff;}
  .btn-discord:hover{background:#4752c4;}
  .btn-discord .icon{width:18px;height:18px;fill:#fff;stroke:none;}
  .server-select-lista{display:flex;flex-direction:column;gap:8px;margin-top:4px;}
  .server-card{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
    background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-sm);
    padding:12px 14px;cursor:pointer;color:var(--text);font-family:inherit;font-size:14px;}
  .server-card:hover{border-color:var(--accent);}
  .server-card img{width:36px;height:36px;border-radius:50%;flex-shrink:0;background:var(--surface);}
  #server-select-logout{margin-top:18px;width:100%;justify-content:center;}
  .server-select-vacio{font-size:13.5px;color:var(--text-muted);line-height:1.5;text-align:center;}

  /* ---------- Badge de usuario/nivel en el sidebar ---------- */
  .usuario-panel{display:flex;align-items:center;gap:10px;padding:10px 16px;
    border-top:1px solid var(--border);margin-top:4px;}
  .usuario-avatar{width:30px;height:30px;border-radius:50%;flex-shrink:0;background:var(--surface-2);}
  .usuario-panel-texto{min-width:0;}
  .usuario-nombre{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .usuario-nivel{font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--text-muted);}
  .usuario-nivel.propietario{color:var(--accent-glow);}
  .usuario-nivel.administrador{color:var(--success);}
  body.sidebar-collapsed .usuario-panel-texto{display:none;}

  /* ---------- Layout ---------- */
  #app{display:flex;height:100vh;overflow:hidden;}
  .sidebar{width:236px;flex-shrink:0;background:var(--surface);border-right:1px solid var(--border);
    height:100vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--border) transparent;
    display:flex;flex-direction:column;padding:22px 0;transition:width .2s ease;}
  .sidebar .brand{padding:0 20px 14px;transition:padding .2s ease;display:flex;align-items:center;gap:10px;}
  .bot-avatar{width:30px;height:30px;border-radius:50%;object-fit:cover;flex-shrink:0;background:var(--surface-2);}
  .guild-card{margin:0 14px 14px;padding:9px 12px;background:var(--surface-2);
    border:1px solid var(--border);border-radius:var(--r-sm);display:flex;align-items:center;gap:10px;}
  .guild-icon{width:28px;height:28px;border-radius:50%;object-fit:cover;flex-shrink:0;background:var(--surface);}
  .guild-name{font-size:13px;font-weight:600;}
  .guild-label{font-size:10.5px;color:var(--text-muted);}
  .module-search{margin:0 14px 14px;padding:8px 10px;background:var(--surface-2);
    border:1px solid var(--border);border-radius:var(--r-sm);display:flex;align-items:center;gap:8px;}
  .module-search input{all:unset;flex:1;font-size:12.5px;color:var(--text);min-width:0;}
  .module-search .icon{width:14px;height:14px;stroke:var(--text-muted);}
  .module-search kbd{font-size:10px;color:var(--text-muted);border:1px solid var(--border);
    border-radius:3px;padding:1px 5px;font-family:'JetBrains Mono',monospace;flex-shrink:0;}
  nav{flex:1;display:flex;flex-direction:column;gap:1px;padding:0 10px;}
  nav button{all:unset;cursor:pointer;padding:9px 12px;border-radius:var(--r-sm);
    color:var(--text-muted);font-size:13.5px;letter-spacing:0.2px;font-weight:500;
    display:flex;align-items:center;gap:10px;border-left:2px solid transparent;}
  nav button:hover{color:var(--text);}
  nav button.active{background:var(--accent-dim);color:var(--text);border-left-color:var(--accent);}
  nav button.active svg{stroke:var(--accent-glow);}
  #logout-btn{margin:14px 12px 0;}

  .icon-btn{all:unset;cursor:pointer;padding:6px;color:var(--text-muted);display:flex;}
  .icon-btn:hover{color:var(--text);}
  .icon-btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;}
  #sidebarBackdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:40;}

  .nav-group-title{font-size:10.5px;letter-spacing:.6px;color:var(--text-muted);
    text-transform:uppercase;padding:16px 16px 4px;opacity:.7;cursor:pointer;user-select:none;
    display:flex;align-items:center;justify-content:space-between;gap:6px;
    background:none;border:none;width:100%;}
  .nav-group-title:hover{opacity:1;}
  .nav-group-title:first-child{padding-top:4px;}
  .nav-group-arrow{width:11px;height:11px;stroke:var(--text-muted);stroke-width:2.4;
    flex-shrink:0;transition:transform .15s ease;}
  .nav-group-title.collapsed .nav-group-arrow{transform:rotate(-90deg);}
  body.sidebar-collapsed .nav-group-title{display:none;}
  .nivel-oculto{display:none !important;}
  .modulo-bloqueado{display:none !important;}

  /* Desktop: colapsar a una franja angosta de solo íconos */
  body.sidebar-collapsed .sidebar{width:64px;}
  body.sidebar-collapsed .sidebar nav button span,
  body.sidebar-collapsed .sidebar .sub,
  body.sidebar-collapsed .sidebar .mark,
  body.sidebar-collapsed .guild-card,
  body.sidebar-collapsed .module-search,
  body.sidebar-collapsed #logout-btn span{display:none;}
  body.sidebar-collapsed .sidebar nav button{justify-content:center;}
  body.sidebar-collapsed .sidebar .brand{justify-content:center;padding:0 0 14px;display:flex;}
  body.sidebar-collapsed #logout-btn{justify-content:center;}

  /* .content es ahora el único contenedor con scroll propio del panel, y no
     tiene max-width: así su barra de desplazamiento queda pegada al borde
     derecho real de la ventana en vez de flotar en el medio de la página. */
  .content{flex:1;padding:0;min-width:0;display:flex;flex-direction:column;
    height:100vh;overflow-y:auto;}
  .sidebar::-webkit-scrollbar{width:6px;}
  .sidebar::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px;}
  .sidebar::-webkit-scrollbar-track{background:transparent;}
  .content::-webkit-scrollbar{width:9px;}
  .content::-webkit-scrollbar-thumb{background:var(--border);border-radius:5px;}
  .content::-webkit-scrollbar-thumb:hover{background:var(--accent-dim);}
  .content::-webkit-scrollbar-track{background:transparent;}
  .topbar{display:flex;justify-content:space-between;align-items:center;
    padding:18px 32px;border-bottom:1px solid var(--border);flex-wrap:wrap;gap:8px;}
  .topbar .guild{font-weight:600;font-family:'Oswald';}
  .status-dot{width:7px;height:7px;border-radius:50%;display:inline-block;margin-right:6px;}
  .status-dot.on{background:var(--success);} .status-dot.off{background:var(--danger);}
  /* El ancho de lectura (980px) se centra acá adentro, no en .content, para
     que el contenedor con scroll siga ocupando todo el ancho disponible. */
  .page-body-outer{width:100%;}
  .page-body{padding:26px 32px 40px;max-width:980px;margin:0 auto;}

  .panel{display:none;}
  .panel.active{display:block;animation:fade .15s ease;}
  @keyframes fade{from{opacity:0}to{opacity:1}}

  /* ---------- Hero ---------- */
  .hero{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);
    padding:26px 28px;margin-bottom:22px;overflow:hidden;}
  .hero-graphic{position:absolute;top:50%;right:-10px;transform:translateY(-50%);opacity:.14;
    stroke:var(--accent);fill:none;stroke-width:1.6;pointer-events:none;}
  .hero-inner{position:relative;max-width:70%;}
  .eyebrow{font-family:'Oswald';font-size:11.5px;letter-spacing:0.3px;color:var(--accent-glow);
    margin-bottom:8px;font-weight:600;}
  .hero h2{margin:0 0 8px;font-size:21px;}
  .hero .hero-desc{color:var(--text-muted);font-size:13.5px;line-height:1.5;margin:0 0 18px;max-width:440px;}
  .page-title{font-size:20px;margin:0 0 18px;font-weight:600;}
  .inicio-grupo-titulo{font-size:12px;color:var(--text-muted);text-transform:uppercase;
    letter-spacing:.4px;margin:22px 0 10px;}
  .inicio-grupo-titulo:first-child{margin-top:0;}
  .inicio-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;}
  .inicio-card{all:unset;cursor:pointer;background:var(--surface);border:1px solid var(--border);
    border-radius:var(--r-md);padding:16px;display:flex;flex-direction:column;gap:8px;}
  .inicio-card:hover{border-color:var(--accent);}
  .inicio-card svg{width:20px;height:20px;stroke:var(--accent);fill:none;stroke-width:1.8;}
  .inicio-card-titulo{font-family:'Oswald';font-weight:600;font-size:14px;}
  .inicio-card-desc{font-size:12px;color:var(--text-muted);line-height:1.4;}
  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .grupo-vinculo{border:1px solid var(--border);border-radius:var(--r-sm);margin-bottom:8px;overflow:hidden;}
  .grupo-vinculo summary{cursor:pointer;padding:10px 12px;background:var(--surface-2);
    display:flex;align-items:center;justify-content:space-between;font-size:13px;list-style:none;}
  .grupo-vinculo summary::-webkit-details-marker{display:none;}
  .grupo-vinculo table{margin:0;width:100%;}
  .roles-bulk-bar{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-size:12.5px;color:var(--text-muted);}
  .stats-row{display:flex;gap:28px;margin-bottom:16px;flex-wrap:wrap;}
  .stat b{display:block;font-family:'Oswald';font-size:22px;font-weight:600;line-height:1;}
  .stat span{display:block;font-size:11.5px;color:var(--text-muted);margin-top:4px;}
  .hero-actions{display:flex;gap:8px;flex-wrap:wrap;}

  /* ---------- Grid & cards ---------- */
  .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
  @media (max-width:900px){.grid-2{grid-template-columns:1fr;}}
  .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);
    padding:20px;margin-bottom:16px;}
  .card h3{margin:0 0 4px;font-size:15px;font-weight:600;display:flex;align-items:center;gap:8px;}
  .card h3 svg{stroke:var(--text-muted);}
  .card .desc{color:var(--text-muted);font-size:13px;margin-bottom:14px;line-height:1.5;}
  .card-row{display:flex;gap:16px;flex-wrap:wrap;}
  .card-row > div{flex:1;min-width:180px;}

  label{display:block;font-size:12.5px;color:var(--text-muted);margin-bottom:4px;margin-top:12px;font-weight:500;}
  label:first-child{margin-top:0;}
  input[type=text],input[type=password],input[type=number],select,textarea{
    width:100%;background:var(--surface-2);border:1px solid var(--border);color:var(--text);
    padding:9px 10px;border-radius:var(--r-sm);font-family:'Inter',sans-serif;font-size:13.5px;
  }
  textarea.mono{font-family:'JetBrains Mono',monospace;font-size:12.5px;}
  textarea{min-height:80px;resize:vertical;}
  input[type=checkbox]{width:16px;height:16px;vertical-align:middle;margin-right:6px;accent-color:var(--accent);}
  .checkbox-line{display:flex;align-items:center;margin-top:14px;font-size:14px;}
  .checkbox-line label{margin:0;color:var(--text);font-size:13.5px;font-weight:400;}

  button.btn{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:8px 16px;
    border-radius:var(--r-sm);font-size:12.5px;letter-spacing:0.2px;font-weight:600;margin-top:14px;margin-right:8px;}
  button.btn svg{width:14px;height:14px;}
  button.btn-primary{background:var(--accent);color:#fff2f2;}
  button.btn-primary:hover{background:var(--accent-glow);}
  button.btn-danger{background:transparent;border:1px solid var(--danger);color:var(--danger);}
  button.btn-danger:hover{background:var(--danger);color:#fff;}
  button.btn-ghost{background:transparent;border:1px solid var(--border);color:var(--text);}
  button.btn-ghost:hover{border-color:var(--accent);color:var(--accent-glow);}
  button.btn-sm{padding:5px 11px;font-size:11.5px;margin-top:0;}
  button:disabled{opacity:0.5;cursor:default;}

  table{width:100%;border-collapse:collapse;font-size:13px;margin-top:10px;}
  th{text-align:left;color:var(--text-muted);font-weight:500;padding:6px 8px;
    border-bottom:1px solid var(--border);font-size:11px;}
  td{padding:7px 8px;border-bottom:1px solid var(--border);vertical-align:middle;}
  tr:last-child td{border-bottom:none;}
  .empty-row td{color:var(--text-muted);font-style:italic;}

  .badge{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:20px;font-size:11px;font-weight:600;}
  .badge.on{background:rgba(73,178,131,.14);color:var(--success);}
  .badge.off{background:rgba(255,90,77,.14);color:var(--danger);}
  .badge.warn{background:rgba(224,178,58,.14);color:var(--warning);}

  #toast-container{position:fixed;bottom:20px;right:20px;display:flex;flex-direction:column;
    gap:8px;z-index:999;max-width:340px;}
  .toast{background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--accent);
    padding:12px 16px;border-radius:var(--r-sm);font-size:13px;box-shadow:0 4px 16px rgba(0,0,0,.4);
    animation:slideIn .2s ease;}
  .toast.error{border-left-color:var(--danger);}
  .toast.success{border-left-color:var(--success);}
  @keyframes slideIn{from{transform:translateY(10px);opacity:0}to{transform:translateY(0);opacity:1}}

  pre.log-box{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-sm);
    padding:12px;font-size:12px;max-height:220px;overflow:auto;white-space:pre-wrap;word-break:break-word;}

  @media (max-width: 780px){
    .sidebar{
      position:fixed; top:0; left:-260px; height:100vh; z-index:50;
      transition:left .25s ease; width:236px; flex-direction:column;
    }
    body.sidebar-open .sidebar{left:0;}
    body.sidebar-open #sidebarBackdrop{display:block;}
    .topbar,.page-body{padding-left:18px;padding-right:18px;}
    .hero-inner{max-width:100%;}
    .hero-graphic{display:none;}
    .col-mensaje{display:none;}
  }

/* ============================================================
   DARK•BOT — VISUAL REFRESH
   Capa visual: no modifica la lógica ni los selectores funcionales.
   ============================================================ */

:root{
  --bg:#07070a;
  --surface:#101015;
  --surface-2:#17171e;
  --surface-3:#1d1d25;
  --border:rgba(255,255,255,.075);
  --border-strong:rgba(255,255,255,.12);
  --text:#f5f5f7;
  --text-muted:#9696a3;
  --accent:#ff1744;
  --accent-rgb:255,23,68;
  --accent-dim:rgba(var(--accent-rgb),.12);
  --accent-glow:#ff5b7a;
  --success:#46d39a;
  --danger:#ff5b5b;
  --warning:#e7b84a;
  --r-sm:8px;
  --r-md:14px;
  --r-lg:18px;
}

/* Base */
html{background:var(--bg);}
body{
  background:
    radial-gradient(circle at 80% -10%, rgba(var(--accent-rgb),.075), transparent 32rem),
    radial-gradient(circle at 15% 100%, rgba(var(--accent-rgb),.035), transparent 28rem),
    var(--bg);
  letter-spacing:.01em;
}
button,input,select,textarea{transition:border-color .18s ease,background .18s ease,box-shadow .18s ease,transform .18s ease;}
::selection{background:rgba(var(--accent-rgb),.28);color:#fff;}

/* Login */
.login-screen{
  background:
    radial-gradient(circle at 50% 20%, rgba(var(--accent-rgb),.13), transparent 32%),
    radial-gradient(circle at 50% 100%, rgba(var(--accent-rgb),.045), transparent 38%),
    var(--bg);
}
.login-grid{
  opacity:.65;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
}
.login-radar{
  border-color:rgba(var(--accent-rgb),.10);
  box-shadow:0 0 80px rgba(var(--accent-rgb),.04);
}
.btn-discord{
  min-height:44px;
  border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.22);
}
.btn-discord:hover{transform:translateY(-1px);box-shadow:0 10px 28px rgba(0,0,0,.28);}

/* App shell */
#app{
  background:
    radial-gradient(circle at 75% 0%, rgba(var(--accent-rgb),.035), transparent 34rem),
    var(--bg);
}
.sidebar{
  width:250px;
  background:rgba(13,13,18,.94);
  border-right:1px solid rgba(255,255,255,.07);
  padding:20px 0;
  box-shadow:10px 0 40px rgba(0,0,0,.12);
  backdrop-filter:blur(14px);
}
.sidebar .brand{
  padding:0 20px 18px;
}
.sidebar .brand .mark{
  font-size:22px;
}
.bot-avatar{
  width:34px;height:34px;
  box-shadow:0 0 0 4px rgba(var(--accent-rgb),.06);
}
.guild-card{
  margin:0 14px 12px;
  padding:11px 12px;
  background:linear-gradient(135deg,rgba(255,255,255,.045),rgba(255,255,255,.018));
  border-color:rgba(255,255,255,.075);
  border-radius:10px;
}
.guild-card:hover{border-color:rgba(var(--accent-rgb),.24);}
.guild-icon{width:32px;height:32px;}
.guild-name{font-size:13px;}
.module-search{
  margin:0 14px 16px;
  padding:9px 11px;
  border-radius:9px;
  background:rgba(255,255,255,.035);
  border-color:rgba(255,255,255,.07);
}
.module-search:focus-within{
  border-color:rgba(var(--accent-rgb),.45);
  box-shadow:0 0 0 3px rgba(var(--accent-rgb),.07);
}
.module-search kbd{background:rgba(255,255,255,.025);}

nav{
  gap:3px;
  padding:0 10px;
}
.nav-group-title{
  padding:17px 12px 6px;
  font-size:10px;
  letter-spacing:1px;
  color:#74747f;
}
.nav-group-title:first-child{padding-top:5px;}
nav button{
  min-height:39px;
  padding:9px 12px;
  border:1px solid transparent;
  border-left:2px solid transparent;
  border-radius:9px;
  font-family:'Inter',sans-serif;
  font-size:13px;
  font-weight:500;
}
nav button:hover{
  color:var(--text);
  background:rgba(255,255,255,.035);
}
nav button.active{
  background:linear-gradient(90deg,rgba(var(--accent-rgb),.15),rgba(var(--accent-rgb),.055));
  border-color:rgba(var(--accent-rgb),.10);
  border-left-color:var(--accent);
  box-shadow:inset 0 0 18px rgba(var(--accent-rgb),.025);
}
nav button.active svg{filter:drop-shadow(0 0 5px rgba(var(--accent-rgb),.35));}

.usuario-panel{
  margin-top:8px;
  padding:12px 16px;
  border-top:1px solid rgba(255,255,255,.065);
  background:rgba(255,255,255,.012);
}
.usuario-avatar{
  width:32px;height:32px;
  box-shadow:0 0 0 3px rgba(255,255,255,.04);
}
#logout-btn{
  margin:12px 12px 0;
  border-radius:9px;
}

/* Topbar */
.content{background:transparent;}
.topbar{
  min-height:66px;
  padding:14px 30px;
  background:rgba(8,8,12,.68);
  border-bottom:1px solid rgba(255,255,255,.065);
  backdrop-filter:blur(14px);
  position:sticky;
  top:0;
  z-index:20;
}
.topbar .guild{
  font-size:14px;
  letter-spacing:.1px;
}
#conn-text{font-size:11px;color:var(--text-muted);}
.status-dot{
  width:8px;height:8px;
  box-shadow:0 0 10px currentColor;
}
.status-dot.on{color:var(--success);background:var(--success);}
.status-dot.off{color:var(--danger);background:var(--danger);}

/* Main reading area */
.page-body{
  max-width:1120px;
  padding:34px 34px 56px;
}
.page-title{
  font-size:25px;
  letter-spacing:.15px;
  margin-bottom:8px;
}
.panel > .page-title + p{
  margin-bottom:24px !important;
  color:#858591 !important;
}

/* Hero / overview */
.hero{
  background:
    radial-gradient(circle at 90% 20%,rgba(var(--accent-rgb),.09),transparent 18rem),
    linear-gradient(135deg,rgba(255,255,255,.045),rgba(255,255,255,.018));
  border:1px solid rgba(255,255,255,.085);
  border-radius:18px;
  padding:30px;
  margin-bottom:24px;
  box-shadow:0 18px 50px rgba(0,0,0,.16);
}
.hero::after{
  content:'';
  position:absolute;
  inset:auto 0 0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(var(--accent-rgb),.35),transparent);
}
.hero h2{font-size:25px;}
.hero .hero-desc{font-size:14px;color:#a0a0ab;}
.eyebrow{
  color:var(--accent-glow);
  letter-spacing:1px;
  text-transform:uppercase;
  font-size:10px;
}
.stats-row{
  gap:10px;
  margin:22px 0;
}
.stat{
  min-width:120px;
  padding:12px 14px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:10px;
  background:rgba(0,0,0,.12);
}
.stat b{font-size:23px;}
.stat span{font-size:10.5px;letter-spacing:.15px;}

/* Cards */
.card,.inicio-card{
  background:linear-gradient(145deg,rgba(255,255,255,.042),rgba(255,255,255,.018));
  border-color:rgba(255,255,255,.075);
  border-radius:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.10);
}
.card{
  padding:22px;
  margin-bottom:18px;
}
.card:hover{
  border-color:rgba(255,255,255,.11);
}
.card h3{font-size:16px;}
.card .desc{color:#8f8f9a;}
.grid-2{gap:18px;}

.inicio-grupo-titulo{
  margin:28px 0 11px;
  color:#777782;
  letter-spacing:1px;
  font-size:10px;
}
.inicio-cards{
  grid-template-columns:repeat(auto-fill,minmax(225px,1fr));
  gap:14px;
}
.inicio-card{
  position:relative;
  min-height:138px;
  padding:18px;
  overflow:hidden;
  transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease;
}
.inicio-card::before{
  content:'';
  position:absolute;
  width:80px;height:80px;
  right:-35px;top:-35px;
  border-radius:50%;
  background:rgba(var(--accent-rgb),.055);
  transition:transform .25s ease;
}
.inicio-card:hover{
  transform:translateY(-2px);
  border-color:rgba(var(--accent-rgb),.28);
  background:linear-gradient(145deg,rgba(var(--accent-rgb),.07),rgba(255,255,255,.02));
  box-shadow:0 14px 35px rgba(0,0,0,.18);
}
.inicio-card:hover::before{transform:scale(1.4);}
.inicio-card svg{
  width:22px;height:22px;
  filter:drop-shadow(0 0 7px rgba(var(--accent-rgb),.2));
}
.inicio-card-titulo{font-size:15px;}
.inicio-card-desc{font-size:12px;color:#898994;}

/* Form controls */
input[type=text],input[type=password],input[type=number],select,textarea{
  background:rgba(255,255,255,.035);
  border-color:rgba(255,255,255,.085);
  border-radius:9px;
  padding:10px 11px;
}
input[type=text]:hover,input[type=password]:hover,input[type=number]:hover,select:hover,textarea:hover{
  border-color:rgba(255,255,255,.14);
}
input[type=text]:focus,input[type=password]:focus,input[type=number]:focus,select:focus,textarea:focus{
  border-color:rgba(var(--accent-rgb),.55);
  background:rgba(var(--accent-rgb),.025);
  box-shadow:0 0 0 3px rgba(var(--accent-rgb),.07);
  outline:none;
}
/* El <select> cerrado hereda los colores de arriba, pero la LISTA desplegada
   la dibuja el sistema operativo (sobre todo en Android/mobile), no la
   página — si no le fijamos fondo Y color a cada <option>, esa lista usa
   fondo blanco del SO con nuestro texto claro pensado para fondo oscuro,
   y queda casi ilegible. Esto es lo que se ve en la captura. */
select option{
  background:var(--surface-2);
  color:var(--text);
}
label{
  color:#858590;
  font-size:11.5px;
  letter-spacing:.15px;
}

/* Buttons */
button.btn{
  border-radius:9px;
  min-height:36px;
  padding:8px 14px;
}
button.btn-primary{
  box-shadow:0 7px 18px rgba(var(--accent-rgb),.16);
}
button.btn-primary:hover{
  transform:translateY(-1px);
  box-shadow:0 9px 24px rgba(var(--accent-rgb),.23);
}
button.btn-ghost{
  background:rgba(255,255,255,.025);
  border-color:rgba(255,255,255,.085);
}
button.btn-ghost:hover{
  background:rgba(var(--accent-rgb),.07);
  border-color:rgba(var(--accent-rgb),.35);
}

/* Tables / expandable blocks */
.table-wrap{
  border:1px solid rgba(255,255,255,.055);
  border-radius:10px;
  overflow:auto;
}
table{margin-top:0;}
th{
  background:rgba(255,255,255,.025);
  padding:10px;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.6px;
}
td{padding:10px;}
.grupo-vinculo{
  border-radius:10px;
  border-color:rgba(255,255,255,.07);
}
.grupo-vinculo summary{
  padding:12px 14px;
  background:rgba(255,255,255,.025);
}
.rr-summary-wrap{display:flex;flex-direction:column;gap:8px;width:100%;}
.rr-summary-top{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.rr-summary-categoria{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:12px;padding-top:8px;border-top:1px dashed var(--border);}
.rr-cat-badges{display:flex;flex-wrap:wrap;gap:4px;flex:1;min-width:0;}
.rr-cat-none{color:var(--text-muted);font-size:11px;}
.rr-cat-select{max-width:170px;min-width:120px;}
@media(max-width:650px){
  .rr-summary-categoria{flex-direction:column;align-items:stretch;}
  .rr-cat-select{max-width:none;}
}
.fila-grupo-vinculado td{padding:0;}
.roles-vinculado-grupo{border-radius:8px;overflow:hidden;background:rgba(255,255,255,.015);}
.roles-vinculado-grupo summary{cursor:pointer;padding:9px 12px;display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12.5px;list-style:none;color:var(--text-muted);}
.roles-vinculado-grupo summary strong{color:var(--text);}
.roles-vinculado-grupo summary::-webkit-details-marker{display:none;}
.roles-vinculado-grupo summary:hover{background:rgba(255,255,255,.03);}
.roles-vinculado-chevron{transition:transform .18s ease;}
.roles-vinculado-grupo[open] .roles-vinculado-chevron{transform:rotate(180deg);color:var(--accent-glow);}
.roles-vinculado-subtabla{width:100%;border-top:1px solid var(--border);}
.roles-vinculado-subtabla td{padding:8px 12px;}

/* Toast */
#toast-container{
  bottom:22px;
  right:22px;
}
.toast{
  border-radius:11px;
  padding:13px 16px;
  background:rgba(18,18,24,.94);
  border-color:rgba(255,255,255,.08);
  box-shadow:0 16px 45px rgba(0,0,0,.35);
  backdrop-filter:blur(12px);
}

/* Scrollbars */
.sidebar::-webkit-scrollbar{width:5px;}
.content::-webkit-scrollbar{width:8px;}
.sidebar::-webkit-scrollbar-thumb,
.content::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.10);
}
.sidebar::-webkit-scrollbar-thumb:hover,
.content::-webkit-scrollbar-thumb:hover{
  background:rgba(var(--accent-rgb),.35);
}

/* Collapsed sidebar */
body.sidebar-collapsed .sidebar{
  width:70px;
}
body.sidebar-collapsed .sidebar .brand{
  padding-left:0;
  padding-right:0;
}
body.sidebar-collapsed .sidebar nav button{
  min-height:40px;
  border-radius:9px;
}

/* Mobile */
@media (max-width:780px){
  .sidebar{width:250px;}
  .topbar{
    min-height:60px;
    padding:12px 16px;
  }
  .page-body{
    padding:24px 16px 40px;
  }
  .hero{
    padding:22px;
    border-radius:15px;
  }
  .stats-row{display:grid;grid-template-columns:1fr 1fr;}
  .stat{min-width:0;}
  .inicio-cards{
    grid-template-columns:1fr;
  }
  .card{padding:18px;}
}

/* Agrupación visual de la jerarquía de roles */
.roles-grupos-panel{
  margin:14px 0 12px;
  padding:14px;
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.012));
}
.roles-grupos-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:12px}
.roles-grupos-head strong{font-size:14px}
.roles-grupos-head .desc{margin:4px 0 0;max-width:760px}
.roles-grupos-create{display:flex;gap:8px;align-items:center;margin-bottom:10px}
.roles-grupos-create input{flex:1;min-width:180px}
.roles-grupos-lista{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:8px}
.roles-grupo{border:1px solid var(--border);border-radius:10px;background:rgba(0,0,0,.16);overflow:hidden;transition:border-color .18s ease,background .18s ease}
.roles-grupo[open]{border-color:var(--border-strong);background:rgba(255,255,255,.018)}
.roles-grupo-summary{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 11px;cursor:pointer;list-style:none;user-select:none}
.roles-grupo-summary::-webkit-details-marker{display:none}
.roles-grupo-summary:hover{background:rgba(255,255,255,.025)}
.roles-grupo-info{display:flex;align-items:center;gap:9px;min-width:0}
.roles-grupo-info>div{display:flex;flex-direction:column;min-width:0}
.roles-grupo-info strong{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.roles-grupo-info span:not(.roles-grupo-icon){font-size:11px;color:var(--text-muted);margin-top:2px}
.roles-grupo-icon{width:27px;height:27px;display:grid;place-items:center;border-radius:8px;background:var(--accent-dim);color:var(--accent-glow);font-size:17px;flex-shrink:0}
.roles-grupo-chevron{font-size:16px;color:var(--text-muted);transition:transform .18s ease}
.roles-grupo[open] .roles-grupo-chevron{transform:rotate(180deg);color:var(--accent-glow)}
.roles-grupo-body{padding:0 11px 11px;border-top:1px solid var(--border)}
.roles-grupo-roles{display:flex;flex-direction:column;gap:4px;padding:9px 0}
.roles-grupo-role{display:flex;align-items:center;gap:7px;min-width:0;padding:5px 7px;border-radius:7px;background:rgba(255,255,255,.025);font-size:12px}
.roles-grupo-role span:nth-child(2){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.role-color-dot{width:8px;height:8px;border-radius:50%;flex:0 0 8px}
.roles-grupo-role-muted{margin-left:auto;color:var(--text-muted);font-size:10px}
.roles-grupo-role-empty{padding:8px 2px;color:var(--text-muted);font-size:11px}
.roles-grupo-actions{display:flex;gap:5px;flex-shrink:0}
.roles-grupos-empty{padding:10px;border:1px dashed var(--border-strong);border-radius:10px;color:var(--text-muted);font-size:12px}
@media(max-width:700px){
  .roles-grupos-head,.roles-grupos-create{flex-direction:column;align-items:stretch}
  .roles-grupos-lista{grid-template-columns:1fr}
}
.roles-grupos-assign{display:flex;gap:8px;align-items:center;margin-bottom:12px}
.roles-grupos-assign select{flex:1;min-width:200px}
.role-group-badge{display:inline-flex;align-items:center;vertical-align:middle;margin-left:5px;padding:2px 7px;border-radius:999px;background:var(--accent-dim);border:1px solid rgba(var(--accent-rgb),.18);color:var(--accent-glow);font-size:10px;font-weight:600;line-height:1.5}
@media(max-width:700px){.roles-grupos-assign{flex-direction:column;align-items:stretch}}

/* ---------- Limpieza por chat ---------- */
.limpieza-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:16px}
.limpieza-head>div:first-child{min-width:220px;flex:1}
.limpieza-nueva{display:grid;grid-template-columns:minmax(170px,1fr) minmax(220px,1.25fr) auto;gap:8px;align-items:center;width:min(760px,100%)}
.limpieza-lista{display:flex;flex-direction:column;gap:8px}
.limpieza-item{border:1px solid var(--border);border-radius:12px;background:rgba(0,0,0,.15);overflow:hidden;transition:border-color .18s ease,background .18s ease}
.limpieza-item[open]{border-color:var(--border-strong);background:rgba(255,255,255,.018)}
.limpieza-summary{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 14px;cursor:pointer;list-style:none;user-select:none}
.limpieza-summary::-webkit-details-marker{display:none}
.limpieza-summary:hover{background:rgba(255,255,255,.025)}
.limpieza-summary-left{display:flex;align-items:center;gap:10px;min-width:0}
.limpieza-chevron{width:20px;color:var(--text-muted);font-size:17px;transition:transform .18s ease;flex:0 0 20px}
.limpieza-item[open] .limpieza-chevron{transform:rotate(180deg);color:var(--accent-glow)}
.limpieza-channel-icon{width:31px;height:31px;display:grid;place-items:center;border-radius:9px;background:var(--accent-dim);color:var(--accent-glow);font-weight:700;flex-shrink:0}
.limpieza-summary-title{display:flex;flex-direction:column;min-width:0;gap:4px}
.limpieza-summary-title>strong{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.limpieza-summary-title>span{display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:var(--text-muted);font-size:11px}
.limpieza-summary-meta{display:inline-flex;align-items:center;gap:4px}
.limpieza-summary-right{display:flex;gap:6px;flex-shrink:0}
.limpieza-summary-pill{padding:4px 8px;border:1px solid var(--border);border-radius:999px;color:var(--text-muted);font-size:10px;background:rgba(255,255,255,.02)}
.limpieza-body{padding:15px;border-top:1px solid var(--border)}
.limpieza-config-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:12px}
.limpieza-body .desc{margin-top:6px;margin-bottom:0;font-size:11px}
.limpieza-radio-row{display:flex;gap:18px;flex-wrap:wrap;margin:7px 0 10px}
.limpieza-radio-row .checkbox-line{margin:0}
.limpieza-divider{height:1px;background:var(--border);margin:14px 0}
.limpieza-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:14px}
.limpieza-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:30px 16px;border:1px dashed var(--border-strong);border-radius:12px;color:var(--text-muted);text-align:center}
.limpieza-empty strong{color:var(--text);font-size:14px}
.limpieza-empty-icon{font-size:26px;margin-bottom:3px}
.limpieza-nueva input,.limpieza-nueva select{min-width:0}
.limpieza-body select[disabled]{opacity:.65;cursor:not-allowed}
@media(max-width:900px){
  .limpieza-head{flex-direction:column}
  .limpieza-nueva{width:100%}
}
@media(max-width:650px){
  .limpieza-nueva,.limpieza-config-grid{grid-template-columns:1fr}
  .limpieza-summary-right{display:none}
  .limpieza-summary{padding:11px}
}


/* Registro de comandos: detalles resumidos, click para expandir */
.rc-det{font-family:'JetBrains Mono',monospace;font-size:12px;max-width:260px;overflow-wrap:anywhere;}
.rc-det .rc-completo{display:none;white-space:pre-wrap;}
.rc-det-exp{cursor:pointer;}
.rc-det-exp .rc-corto{color:var(--text-muted);}
.rc-det-abierto .rc-corto{display:none;}
.rc-det-abierto .rc-completo{display:block;max-height:220px;overflow:auto;}


/* Selector de servidores: estado del bot en cada servidor */
a.server-card{text-decoration:none;box-sizing:border-box;}
.server-card-nombre{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;overflow-wrap:anywhere;}
.server-card-nombre small{font-size:11.5px;color:var(--text-muted);}
.server-card-off{opacity:.6;cursor:default;}
.server-card-off:hover{border-color:var(--border);}
.server-tag{flex-shrink:0;font-size:11.5px;padding:3px 9px;border-radius:999px;border:1px solid var(--border);color:var(--text-muted);}
.server-tag-ok{border-color:var(--accent);color:var(--accent);}
.server-tag-add{background:var(--accent);border-color:var(--accent);color:#fff;}
#server-select-refresh{margin-top:14px;width:100%;justify-content:center;}
#server-select-logout{margin-top:8px;}


/* Sincronizar roles ahora: lista de reglas a elegir */
.rs-reglas-lista{display:flex;flex-direction:column;gap:8px;margin:12px 0 16px;max-height:340px;overflow:auto;}
.rs-regla{display:flex;align-items:center;gap:8px;font-size:13.5px;cursor:pointer;}
.rs-grupo summary{display:flex;align-items:center;gap:8px;font-size:13.5px;cursor:pointer;}
.rs-sub{display:flex;flex-direction:column;gap:8px;margin:8px 0 4px 26px;}


/* Título del usuario en el panel: Master (dueño del bot) */
.usuario-nivel.master{color:#f5c518;}

/* Redes sociales: lista de cuentas */
.rsc-lista{display:flex;flex-direction:column;gap:8px;margin:6px 0 10px;}
.rsc-fila{display:flex;align-items:center;gap:8px;}
.rsc-fila input{flex:1;margin:0;}
.rsc-fila .rsc-estado{font-size:11.5px;white-space:nowrap;color:var(--text-muted);}
.rsc-fila .rsc-estado.vivo{color:#ef4444;font-weight:600;}
.rsc-vacio{font-size:13px;color:var(--text-muted);margin:0;}
.rsc-resultado{white-space:pre-line;}

/* Roles ascendentes */
.ra-lista{display:flex;flex-direction:column;gap:6px;margin:10px 0;}
.ra-fila{display:flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid var(--border, rgba(255,255,255,.08));border-radius:8px;}
.ra-fila .ra-num{width:22px;color:var(--text-muted);font-size:12px;}
.ra-fila .ra-nombre{flex:1;}
.ra-fila .ra-etq{font-size:11px;color:var(--text-muted);}
.ra-vacio{font-size:13px;color:var(--text-muted);margin:0;}
.ra-cadena{font-size:13px;}
.ra-cadena .ra-sep{color:var(--text-muted);margin:0 4px;}

.rsc-item{display:flex;flex-direction:column;gap:4px;}
.rsc-fila .rsc-nombre{font-size:12px;color:var(--text-muted);white-space:nowrap;max-width:140px;overflow:hidden;text-overflow:ellipsis;}
.rsc-fila .rsc-estado.error{color:#f59e0b;font-weight:600;}
.rsc-error{font-size:12px;color:#f59e0b;padding-left:2px;word-break:break-word;}
@media (max-width:640px){.rsc-fila{flex-wrap:wrap;}.rsc-fila input{flex:1 1 100%;}}

/* ---------- Editor de embed (Bienvenidas / Despedidas) ---------- */
.ee-grid{display:flex;gap:22px;flex-wrap:wrap;margin-top:14px;}
.ee-form{flex:1 1 380px;min-width:0;transition:opacity .18s ease;}
.ee-form.ee-off{opacity:.55;}
.ee-prev{flex:1 1 340px;min-width:0;}
.ee-colores{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px;}
.ee-colores input[type=color]{width:44px;height:32px;padding:0;border:1px solid var(--border-strong);border-radius:var(--r-sm);background:none;cursor:pointer;}
.ee-sw{width:22px;height:22px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0;}
.ee-sw:hover{border-color:var(--text);transform:scale(1.1);}
.bt-fila{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:6px 0;}
.bt-fila input[type=text],.bt-fila select{margin:0;flex:1 1 150px;min-width:0;}
.bt-fila input.bt-emoji[type=text]{flex:0 0 64px;text-align:center;}
.bt-prev{display:flex;flex-wrap:wrap;gap:8px;}
.bt-chip{display:inline-flex;align-items:center;gap:6px;background:#4e5058;color:#fff;border-radius:6px;padding:7px 14px;font-size:14px;font-weight:500;}
.bt-chip .bt-ext{opacity:.85;}
.ee-campo{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:6px 0;}
.ee-campo input[type=text]{flex:1 1 130px;min-width:0;margin:0;}
.ee-c-line{display:flex;align-items:center;gap:4px;margin:0;font-size:12.5px;color:var(--text-muted);white-space:nowrap;}
.ee-discord{background:#313338;border-radius:8px;padding:14px 16px;margin-top:6px;color:#dbdee1;font-size:14px;line-height:1.4;overflow:hidden;}
.ee-head{display:flex;align-items:center;gap:6px;margin-bottom:4px;}
.ee-bot{color:#fff;font-weight:600;}
.ee-app{background:#5865f2;color:#fff;border-radius:3px;font-size:10px;font-weight:600;padding:1px 5px;}
.ee-texto{margin-bottom:6px;word-break:break-word;}
.ee-mencion{background:rgba(88,101,242,.3);color:#c9cdfb;border-radius:3px;padding:0 2px;}
.ee-embed{display:flex;gap:12px;background:#2b2d31;border-left:4px solid #fb0135;border-radius:4px;padding:10px 14px 12px 12px;max-width:520px;}
.ee-embed-main{flex:1;min-width:0;}
.ee-autor{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:#fff;margin-bottom:6px;}
.ee-autor img{width:22px;height:22px;border-radius:50%;}
.ee-titulo{color:#fff;font-weight:600;font-size:15px;margin-bottom:6px;word-break:break-word;}
.ee-desc{font-size:13.5px;word-break:break-word;}
.ee-desc code,.ee-texto code{background:#1e1f22;border-radius:3px;padding:0 4px;font-size:12.5px;}
.ee-campos{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:8px;}
.ee-cmp{flex:1 1 100%;font-size:13px;}
.ee-cmp.ee-inline{flex:1 1 30%;}
.ee-cmp b{display:block;color:#fff;font-size:13px;}
.ee-thumb{width:72px;height:72px;border-radius:4px;object-fit:cover;flex:none;}
.ee-big{display:block;max-width:100%;border-radius:4px;margin-top:10px;}
.ee-img-gen{margin-top:10px;border:1px dashed #4e5058;border-radius:4px;padding:26px 10px;text-align:center;color:#949ba4;font-size:12.5px;}
.ee-pie{color:#949ba4;font-size:11.5px;margin-top:8px;}

/* ---------- Sub-categorías del menú ---------- */
.nav-sub-title{display:flex;align-items:center;gap:7px;font-size:10px;letter-spacing:.5px;text-transform:uppercase;
  color:var(--text-muted);opacity:.8;padding:9px 12px 3px 20px;cursor:pointer;user-select:none;}
.nav-sub-title:hover{opacity:1;}
.nav-sub-title::before{content:'';width:9px;height:1px;background:var(--border-strong);flex:none;}
.nav-sub-title .nav-group-arrow{width:11px;height:11px;margin-left:auto;transition:transform .18s ease;}
.nav-sub-title.collapsed .nav-group-arrow{transform:rotate(-90deg);}
#nav button[data-sub]{margin-left:12px;width:calc(100% - 12px);}
body.sidebar-collapsed .nav-sub-title{display:none;}
body.sidebar-collapsed #nav button[data-sub]{margin-left:0;width:100%;}
.inicio-sub-titulo{font-size:11px;letter-spacing:.4px;text-transform:uppercase;color:var(--text-muted);margin:14px 0 6px 2px;}

/* ---------- Topbar ---------- */
.topbar-right{display:flex;align-items:center;gap:6px;}
.topbar-right .icon-btn{border-radius:8px;padding:7px;}
.topbar-right .icon-btn:hover{background:var(--surface-2);}
.topbar-estado{display:flex;align-items:center;gap:6px;margin-left:8px;}
@media (max-width:640px){.topbar-estado #conn-text{display:none;}}

/* ---------- Modal de confirmación ---------- */
.modal-fondo{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;padding:18px;
  animation:fadeIn .12s ease;}
.modal{background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r-md);padding:20px 22px;width:min(440px,100%);
  box-shadow:0 24px 60px rgba(0,0,0,.45);}
.modal h3{margin:0 0 8px;font-size:16px;}
.modal p{margin:0 0 18px;color:var(--text-muted);font-size:13.5px;line-height:1.5;white-space:pre-line;word-break:break-word;}
.modal-botones{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ---------- Paleta Ctrl+K ---------- */
.paleta-fondo{align-items:flex-start;padding-top:12vh;}
.paleta{background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r-md);width:min(560px,100%);overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.5);}
.paleta-input{all:unset;box-sizing:border-box;width:100%;padding:15px 18px;font-size:15px;color:var(--text);border-bottom:1px solid var(--border);}
.paleta-lista{max-height:min(380px,52vh);overflow-y:auto;padding:6px;}
.paleta-item{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border-radius:8px;
  cursor:pointer;color:var(--text);font-size:13.5px;}
.paleta-item.on{background:var(--accent-dim);}
.paleta-item .icon{width:17px;height:17px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;color:var(--text-muted);}
.paleta-item.on .icon{color:var(--accent);}
.paleta-et{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.paleta-ruta{color:var(--text-muted);font-size:11.5px;white-space:nowrap;}
.paleta-vacio{padding:22px;text-align:center;color:var(--text-muted);font-size:13px;}
.paleta-pie{display:flex;gap:16px;padding:8px 16px;border-top:1px solid var(--border);color:var(--text-muted);font-size:11px;}
@media (max-width:640px){.paleta-ruta{display:none;}.paleta-pie{display:none;}}

/* ---------- Apariencia ---------- */
.apariencia{position:fixed;top:58px;right:18px;z-index:150;width:262px;background:var(--surface);border:1px solid var(--border-strong);
  border-radius:var(--r-md);padding:14px;box-shadow:0 18px 44px rgba(0,0,0,.4);}
.apariencia[hidden]{display:none;}
.apariencia-fila{margin-bottom:12px;}
.apariencia-fila b{display:block;font-size:12px;margin-bottom:7px;}
.apariencia-seg{display:flex;border:1px solid var(--border-strong);border-radius:8px;overflow:hidden;}
.apariencia-seg button{all:unset;flex:1;text-align:center;padding:6px 0;font-size:12px;cursor:pointer;color:var(--text-muted);}
.apariencia-seg button.on{background:var(--accent-dim);color:var(--text);font-weight:600;}
.apariencia-colores{display:flex;gap:7px;flex-wrap:wrap;}
.apariencia-colores .ee-sw.on{border-color:var(--text);}
.apariencia-custom{display:flex;align-items:center;gap:10px;margin-top:10px;}
.apariencia-custom input[type=color]{width:38px;height:28px;padding:0;border:1px solid var(--border-strong);border-radius:6px;background:none;cursor:pointer;}
.apariencia .desc{margin:4px 0 0;font-size:11px;}

/* ---------- Cambios sin guardar ---------- */
.card.sin-guardar{border-color:var(--warning);}
.card.sin-guardar > h3::after{content:'● sin guardar';margin-left:10px;font-size:10.5px;font-weight:500;letter-spacing:.3px;color:var(--warning);font-family:'Inter',sans-serif;}

/* ---------- Actividad (Estado) ---------- */
.act-vivo{margin-left:10px;font-size:10.5px;font-weight:500;color:var(--success);display:inline-flex;align-items:center;gap:5px;font-family:'Inter',sans-serif;letter-spacing:.3px;}
.act-vivo i{width:7px;height:7px;border-radius:50%;background:var(--success);animation:actPulso 1.8s ease-in-out infinite;}
@keyframes actPulso{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
.act-sub{margin:16px 0 4px;font-size:12px;color:var(--text-muted);font-weight:500;}
.act-graf{width:100%;}
.act-svg{width:100%;height:auto;display:block;}
.act-grid{stroke:var(--border);stroke-width:1;}
.act-eje{fill:var(--text-muted);font-size:10px;font-family:'JetBrains Mono',monospace;}
.act-leyenda{display:flex;gap:14px;font-size:11.5px;color:var(--text-muted);margin-top:4px;}
.act-leyenda i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px;}

/* ---------- Configuración: exportar / importar ---------- */
.cfg-acciones{display:flex;gap:8px;margin:8px 0;}
.cfg-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:4px 14px;margin:8px 0 14px;}
.cfg-item{display:flex;align-items:center;gap:6px;font-size:13px;cursor:pointer;}
.cfg-item.cfg-off{opacity:.4;cursor:default;}
#sec-config input[type=file]{margin:6px 0;}

/* ---------- Tema claro ---------- */
:root[data-tema="claro"]{
  color-scheme:light;
  --bg:#f2f2f6;--surface:#ffffff;--surface-2:#f5f5f9;--surface-3:#ebebf1;
  --border:rgba(0,0,0,.09);--border-strong:rgba(0,0,0,.17);
  --text:#16161c;--text-muted:#5d5d6e;
  --success:#0f9d68;--danger:#d93a3a;--warning:#b27a12;
}
:root[data-tema="claro"] body{
  background:radial-gradient(circle at 80% -10%, rgba(var(--accent-rgb),.06), transparent 32rem), var(--bg);
}
:root[data-tema="claro"] .modal-fondo{background:rgba(20,20,30,.35);}
:root[data-tema="claro"] .card,
:root[data-tema="claro"] .stat,
:root[data-tema="claro"] .inicio-card{background:var(--surface);box-shadow:0 1px 2px rgba(0,0,0,.05);}
:root[data-tema="claro"] input,
:root[data-tema="claro"] select,
:root[data-tema="claro"] textarea{background:#fff;color:var(--text);}
:root[data-tema="claro"] .log,
:root[data-tema="claro"] pre{background:#f0f0f5;color:var(--text);}
:root[data-tema="claro"] .roles-grupo,
:root[data-tema="claro"] .limpieza-item{background:rgba(0,0,0,.025);}

/* Emojis del servidor en la vista previa y selector del aviso de bump */
.ee-emoji{width:1.375em;height:1.375em;vertical-align:-0.3em;object-fit:contain;}
.emoji-picker{display:flex;flex-wrap:wrap;gap:4px;max-height:140px;overflow-y:auto;padding:8px;margin:6px 0 4px;border:1px solid var(--border-strong);border-radius:var(--r-sm);}
.emoji-picker button{width:34px;height:34px;padding:3px;border:1px solid transparent;border-radius:var(--r-sm);background:none;cursor:pointer;}
.emoji-picker button:hover{border-color:var(--text);background:rgba(255,255,255,.06);}
.emoji-picker img{width:100%;height:100%;object-fit:contain;}

/* Menciones de roles en redes sociales */
.rsm-tipos{display:flex;flex-direction:column;gap:10px;margin:6px 0 12px;}
.rsm-tipo{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2);}
.rsm-titulo{font-size:13px;font-weight:600;}
.rsm-selector{display:flex;flex-direction:column;gap:6px;}
.rsm-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
.rsm-chip{cursor:pointer;background:var(--surface);border:1px solid var(--border);}
.rsm-selector select,.rsm-tipo select{margin:0;max-width:320px;}
.rsc-menc{margin-top:2px;}
.rsc-menc-toggle.rsc-menc-on{color:var(--accent,#fb0135);}
.rsc-menc-panel{display:flex;flex-direction:column;gap:8px;margin-top:8px;}

.aviso-restriccion{margin:0 0 14px;padding:10px 14px;border-radius:10px;border:1px solid var(--warning);background:rgba(224,178,58,.12);color:var(--text);font-size:13.5px;}
.aviso-restriccion.bloqueado{border-color:var(--danger);background:rgba(255,90,77,.12);}
.ms-modulos{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:6px 14px;margin:8px 0 12px;}
.ms-lista{margin-top:10px;display:flex;flex-direction:column;gap:6px;}
.ms-lista .ms-item{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:13px;}
.ms-srv{display:flex;align-items:center;gap:10px;}
.ms-srv img{width:28px;height:28px;border-radius:50%;}

.nav-tab-sec{display:none !important;}
.tabs-grupo{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid var(--border);}
.tab-grupo{border:1px solid var(--border);background:transparent;color:var(--muted);padding:6px 14px;border-radius:999px;cursor:pointer;font:inherit;font-size:13px;}
.tab-grupo:hover{color:var(--text);}
.tab-grupo.on{background:var(--accent);border-color:var(--accent);color:#fff;cursor:default;}

/* ---- Historial (mobile-first) ---- */
.hist-barra{display:flex;gap:8px;margin-bottom:10px}
.hist-barra input{flex:1;min-width:0}
.hist-barra select,.hist-barra .btn{flex:none}
.hist-chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:8px;margin-bottom:6px;scrollbar-width:none}
.hist-chips::-webkit-scrollbar{display:none}
.hist-chip{flex:none;white-space:nowrap;padding:8px 12px;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--text-muted);font:inherit;font-size:.85rem;min-height:40px;cursor:pointer}
.hist-chip b{color:var(--text);margin-left:2px}
.hist-chip.activo{background:var(--accent-dim);border-color:var(--accent);color:var(--text)}
.hist-lista{display:flex;flex-direction:column;gap:8px}
.hist-item{display:flex;gap:10px;padding:12px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--border-strong,var(--border))}
.hist-item.hist-aviso{border-left-color:var(--warning)}
.hist-item.hist-error{border-left-color:var(--danger)}
.hist-ico{font-size:1.25rem;line-height:1.4}
.hist-cuerpo{min-width:0;flex:1}
.hist-fila{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.hist-fila time{color:var(--text-muted);font-size:.78rem;white-space:nowrap}
.hist-meta{color:var(--text-muted);font-size:.85rem;margin-top:2px;overflow-wrap:anywhere}
.hist-quien{color:var(--text)}
.hist-detalle{margin-top:4px;font-size:.88rem;overflow-wrap:anywhere}
.hist-vacio{color:var(--text-muted);text-align:center;padding:24px 0}

/* Historial: que nada ensanche la página en pantallas chicas (la fila de chips se desliza sola) */
#sec-historial{min-width:0;max-width:100%;overflow-x:clip}
#sec-historial .hist-barra,#sec-historial .hist-chips,#sec-historial .hist-lista{min-width:0;max-width:100%;width:100%;box-sizing:border-box}
#sec-historial .hist-barra input{flex:1 1 0;width:0;min-width:0}
#sec-historial .hist-barra select{flex:0 0 auto;width:auto;max-width:35%}
#sec-historial .hist-barra .btn{flex:0 0 auto;width:auto}
#sec-historial .hist-chips{overscroll-behavior-x:contain}

/* ---------- Novedades ---------- */
.modal.modal-ancho{width:min(560px,100%);max-height:85vh;overflow:auto;}
.novedad{margin:0 0 16px;padding:0 0 14px;border-bottom:1px solid var(--border);}
.novedad:last-of-type{border-bottom:0;}
.novedad-titulo{font-weight:600;font-size:14px;margin:0 0 6px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;}
.novedad-fecha{font-weight:400;font-size:12px;color:var(--text-muted);}
.novedad ul{margin:0 0 8px;padding-left:18px;color:var(--text-muted);font-size:13.5px;line-height:1.5;}
.modal-ancho .modal-botones{margin-top:6px;}
.novedades-punto{width:8px;height:8px;border-radius:50%;background:var(--accent,#3b82f6);margin-left:auto;}
#novedades-btn{display:flex;align-items:center;}