:root{
  --bg:#0d1117; --bg2:#161b22; --card:#1c2230; --border:#2a3242;
  --text:#e6edf3; --muted:#8b98a9; --green:#00ff88; --green-d:#00c46a;
  --red:#ff3b30; --blue:#5865f2; --radius:12px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;line-height:1.5}
a{color:var(--green);text-decoration:none}
code{background:var(--bg2);padding:2px 6px;border-radius:6px;font-size:.85em;color:var(--green);display:inline-block;margin:2px 0}

/* Topbar */
.topbar{display:flex;justify-content:space-between;align-items:center;
  padding:12px 24px;background:var(--bg2);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:50}
.brand{display:flex;align-items:center;gap:10px;color:var(--text);font-weight:800;letter-spacing:2px}
.brand-logo{width:34px;height:34px;border-radius:8px;object-fit:cover}
.topnav{display:flex;align-items:center;gap:10px}
.user{color:var(--muted);margin-right:6px}

.container{max-width:1080px;margin:0 auto;padding:28px 20px 60px}
.footer{text-align:center;color:var(--muted);padding:24px;border-top:1px solid var(--border);font-size:.85rem}
.page-title{margin:0 0 4px}
.muted{color:var(--muted)}
.link{color:var(--green)}
.nowrap{white-space:nowrap}

/* Botones */
.btn{display:inline-block;border:1px solid transparent;border-radius:10px;padding:9px 16px;
  font-weight:600;cursor:pointer;font-size:.92rem;transition:.15s;background:var(--card);color:var(--text)}
.btn:hover{filter:brightness(1.12)}
.btn-primary{background:var(--green);color:#04120b;border-color:var(--green)}
.btn-outline{background:transparent;border-color:var(--green);color:var(--green)}
.btn-ghost{background:transparent;border-color:var(--border);color:var(--muted)}
.btn-danger{background:transparent;border-color:var(--red);color:var(--red)}
.btn-danger:hover{background:var(--red);color:#fff}
.btn-lg{padding:13px 26px;font-size:1rem}
.btn-sm{padding:5px 10px;font-size:.8rem}
.btn-block{display:block;width:100%;text-align:center;margin-top:10px}
.btn-row,.btn-row *{margin-right:8px}

/* Flash */
.flash{margin-bottom:18px}
.flash-item{background:rgba(0,255,136,.1);border:1px solid var(--green-d);
  color:var(--green);padding:10px 14px;border-radius:10px;margin-bottom:8px}

/* Login */
.login-hero{max-width:560px;margin:40px auto;text-align:center;background:var(--card);
  border:1px solid var(--border);border-radius:16px;padding:44px 32px}
.login-logo{width:96px;height:96px;border-radius:20px;object-fit:cover;margin-bottom:14px}
.feature-list{list-style:none;padding:0;margin:26px 0 0;text-align:left;display:inline-block}
.feature-list li{padding:6px 0 6px 22px;position:relative;color:var(--muted)}
.feature-list li:before{content:"";position:absolute;left:0;top:12px;width:8px;height:8px;
  background:var(--green);border-radius:2px}

/* Guild grid */
.guild-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;margin-top:20px}
.guild-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:16px}
.guild-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.guild-icon{width:48px;height:48px;border-radius:12px;object-fit:cover;background:var(--bg2)}
.guild-icon-empty{display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--muted)}
.guild-name{font-weight:600}
.tag{display:inline-block;font-size:.72rem;padding:2px 9px;border-radius:20px;font-weight:700}
.tag-on{background:rgba(0,255,136,.14);color:var(--green)}
.tag-off{background:rgba(139,152,169,.15);color:var(--muted)}

.guild-header{display:flex;align-items:center;gap:14px;margin-bottom:18px}

/* Tabs */
.tabs{display:flex;flex-wrap:wrap;gap:6px;border-bottom:1px solid var(--border);margin-bottom:22px}
.tab-btn{background:transparent;border:none;color:var(--muted);padding:11px 16px;
  cursor:pointer;font-weight:600;border-bottom:2px solid transparent;font-size:.92rem}
.tab-btn:hover{color:var(--text)}
.tab-btn.active{color:var(--green);border-bottom-color:var(--green)}
.tab-panel{display:none}
.tab-panel.active{display:block}

/* Cards / modulos */
.cat-title{font-size:1rem;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin:22px 0 12px}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;margin-bottom:18px}
.module-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.module-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:16px}
.module-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:8px}
.module-name{font-weight:600;font-size:.95rem}

/* Formularios */
label{display:block;font-size:.82rem;color:var(--muted);margin-bottom:10px}
input[type=text],input[type=number],select,textarea{
  width:100%;background:var(--bg);border:1px solid var(--border);color:var(--text);
  border-radius:8px;padding:8px 10px;margin-top:4px;font-size:.9rem}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--green)}
.field-row{display:flex;gap:12px;flex-wrap:wrap}
.field-row>label{flex:1;min-width:120px}
.field-full{width:100%}
.check-inline{display:flex;align-items:center;gap:8px;color:var(--text);font-size:.86rem;margin-top:4px}
.check-inline input{width:auto;margin:0}
.inline-form{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.inline-form input[type=text]{width:auto;flex:1;min-width:140px;margin-top:0}
.inline-form select{width:auto;margin-top:0}

/* Switch */
.switch{position:relative;display:inline-block;width:44px;height:24px;flex:none}
.switch input{display:none}
.slider{position:absolute;inset:0;background:var(--border);border-radius:24px;transition:.2s;cursor:pointer}
.slider:before{content:"";position:absolute;height:18px;width:18px;left:3px;top:3px;
  background:#fff;border-radius:50%;transition:.2s}
.switch input:checked + .slider{background:var(--green)}
.switch input:checked + .slider:before{transform:translateX(20px)}

.sticky-save{position:sticky;bottom:0;padding:16px 0;margin-top:20px;
  background:linear-gradient(transparent,var(--bg) 40%);text-align:right}

/* Tablas */
.data-table{width:100%;border-collapse:collapse;font-size:.88rem}
.data-table th,.data-table td{padding:9px 10px;border-bottom:1px solid var(--border);text-align:left;vertical-align:middle}
.data-table th{color:var(--muted);font-weight:600;font-size:.78rem;text-transform:uppercase}
.data-table form{margin:0}
.log-detail{color:var(--muted)}
.table-responsive{width:100%;overflow-x:auto}

@media(max-width:600px){
  .container{padding:18px 12px 50px}
  .module-grid{grid-template-columns:1fr}
  .user{display:none}
  .topbar{padding:10px 12px}
  .topnav{gap:4px}
  .btn-ghost{padding:6px 8px;font-size:0.8rem}
  
  .inline-form { flex-direction: column; align-items: stretch; }
  .inline-form input[type=text], .inline-form select { width: 100% !important; margin-top: 4px; }
  .inline-form button { width: 100%; margin-top: 4px; }
  
  .data-table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* Conversational row */
.conversational-row {
  font-size: 0.9rem;
  color: var(--text);
  margin-bottom: 14px;
  line-height: 2.2;
}
.conversational-row input {
  width: 44px !important;
  text-align: center;
  margin: 0 4px !important;
  padding: 2px 4px !important;
  height: 28px !important;
  display: inline-block;
  vertical-align: middle;
}

.module-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}

/* Guia de Seguridad */
.guide-tab-btn {
  color: var(--blue) !important;
}
.guide-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  color: var(--green);
}
.guide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}
.guide-grid.modules {
  display: block;
}
.guide-cat {
  margin: 24px 0 12px;
  font-size: 1rem;
  color: var(--green-d);
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
}
.guide-item {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
  margin-bottom: 12px;
}
.guide-item-title {
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
  font-size: 0.95rem;
}
.guide-item-desc {
  color: var(--muted);
  font-size: 0.88rem;
}

/* ============================================================
   REDISENO 2026: dashboard simplificada
   ============================================================ */

/* Banner informativo azul en cada tab */
.info-banner {
  background: linear-gradient(135deg, rgba(88,101,242,.12), rgba(0,255,136,.06));
  border: 1px solid rgba(88,101,242,.35);
  border-left: 3px solid var(--blue);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 20px;
  color: var(--text);
  font-size: .92rem;
  line-height: 1.55;
}
.info-banner strong { color: var(--green); }

/* Card compacta (sin margen extra dentro) */
.compact-card { padding: 16px 18px; margin-bottom: 22px; }
.row-inline { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
.row-inline > .field-full { flex: 1; min-width: 240px; margin-bottom: 0; }

/* Etiquetas y texto de ayuda */
.label-text {
  display: block;
  color: var(--text);
  font-size: .88rem;
  font-weight: 600;
  margin-bottom: 4px;
}
.help-text {
  display: block;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.4;
  margin-top: 5px;
}
.small { font-size: .82rem; }

/* Lista vertical de modulos (mas legible que el grid antiguo) */
.module-list { display: flex; flex-direction: column; gap: 12px; }

.mod-row {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  transition: border-color .15s;
}
.mod-row:hover { border-color: rgba(0,255,136,.28); }

.mod-head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.mod-title-wrap { flex: 1; min-width: 0; }
.mod-title {
  font-weight: 700;
  font-size: 1rem;
  color: var(--text);
  margin-bottom: 3px;
}
.mod-desc {
  color: var(--muted);
  font-size: .85rem;
  line-height: 1.45;
}

/* Resumen en lenguaje natural */
.mod-summary {
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--bg2);
  border-radius: 8px;
  font-size: .85rem;
  line-height: 1.6;
}
.summary-line {
  display: flex;
  gap: 10px;
  align-items: baseline;
  flex-wrap: wrap;
}
.summary-line + .summary-line { margin-top: 6px; }
.summary-line b { color: var(--green); font-weight: 600; }

/* Pills usuario / bot */
.pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  white-space: nowrap;
}
.pill-user { background: rgba(88,101,242,.18); color: #a8b3ff; }
.pill-bot { background: rgba(255,59,48,.15); color: #ff8f88; }
.pill-owner { background: rgba(0,255,136,.15); color: var(--green); }
.pill-on { background: rgba(50,205,50,.15); color: #6fdc6f; }
.pill-off { background: rgba(255,59,48,.15); color: #ff8f88; }

/* Dos formularios lado a lado para el acceso al panel */
.two-col-forms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
  margin-bottom: 8px;
}
.two-col-forms .inline-form { margin: 0; padding: 12px; background: var(--bg2); border-radius: 8px; border: 1px solid var(--border); }
@media (max-width: 600px) {
  .two-col-forms { grid-template-columns: 1fr; }
}

/* Panel avanzado — <details> nativo. Sin CSS que interfiera. */
.mod-advanced summary::-webkit-details-marker { color: var(--green); }
.mod-advanced summary:hover { color: var(--green-d) !important; }

.adv-block-title { margin-bottom: 12px; }
.adv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.adv-grid label { display: block; margin-bottom: 0; }

/* Referencia de castigos plegable */
.ref-card { margin-top: 24px; }
.ref-card summary {
  cursor: pointer;
  color: var(--text);
  font-size: .95rem;
  user-select: none;
  list-style: none;
}
.ref-card summary::before { content: "▸ "; display: inline-block; }
.ref-card[open] summary::before { content: "▾ "; }
.ref-body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.ref-item {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
}
.ref-label { font-weight: 700; color: var(--green); font-size: .9rem; margin-bottom: 4px; }
.ref-desc { color: var(--muted); font-size: .82rem; line-height: 1.45; }

/* Ajuste inline-form en la nueva estructura */
.inline-form { align-items: flex-end; }

/* En moviles: la fila resumen usa menos espacio */
@media (max-width: 600px) {
  .row-inline { flex-direction: column; align-items: stretch; }
  .row-inline > .field-full { min-width: 0; }
  .adv-grid { grid-template-columns: 1fr; }
  .mod-head { gap: 10px; }
}