/* Misma paleta que la landing (css/landing.css): fondo casi negro, tipografia
   Figtree y radios pequenos. Antes era la paleta de Discord, y el panel parecia
   un producto distinto de la web.

   Excepcion a proposito: el bloque .discord-mock del final del archivo conserva
   los colores reales de Discord, porque es la vista previa de como se vera el
   mensaje alli. Si se repintase con esta paleta, la vista previa mentiria. */
:root {
  --bg: #050505;
  --surface: #111216;
  --surface-2: #16181d;
  --surface-3: #22252d;
  --border: #24272f;
  --border-strong: #33373f;
  --text: #ffffff;
  --text-muted: #8b8d98;
  --accent: #5865f2;
  --accent-hover: #6b76f5;
  --success: #23a55a;
  --danger: #f23f43;
  --radius: 4px;
}

* { box-sizing: border-box; }

/* El panel antiguo tenia un campo emoji; los roles ahora se configuran con botones. */
#rr-new-emoji { display: none; }

/* Scroll discreto para la lista de botones de roles. */
#rr-mappings-list {
  scrollbar-width: thin;
  scrollbar-color: var(--surface-3) transparent;
}
#rr-mappings-list::-webkit-scrollbar { width: 8px; }
#rr-mappings-list::-webkit-scrollbar-track {
  background: transparent;
  margin: 4px 0;
}
#rr-mappings-list::-webkit-scrollbar-thumb {
  background: var(--surface-3);
  border: 2px solid var(--surface-2);
  border-radius: 999px;
}
#rr-mappings-list::-webkit-scrollbar-thumb:hover { background: var(--border); }

/* Creador de botones de roles: separa claramente los pasos de configuración. */
#rr-new-role, #rr-new-style, #rr-new-label { width: 100%; min-width: 0 !important; }
#rr-new-role:focus, #rr-new-style:focus, #rr-new-label:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(88, 101, 242, 0.16); }
.rr-builder-intro {
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  margin-bottom: 2px;
  background: linear-gradient(135deg, rgba(88, 101, 242, 0.16), rgba(88, 101, 242, 0.04));
  border: 1px solid rgba(88, 101, 242, 0.32);
  border-radius: var(--radius);
}
.rr-builder-intro strong { display: block; font-size: 13px; margin-bottom: 2px; }
.rr-builder-intro small { display: block; color: var(--text-muted); font-size: 12px; line-height: 1.35; }
.rr-builder-step {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  flex: 0 0 auto;
}
.rr-input-group { flex: 1 1 145px; min-width: 145px; }
.rr-input-group label { display: block; margin: 0 0 6px; color: var(--text-muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.rr-button-name { flex-basis: 190px; }
#rr-add-mapping-btn { align-self: flex-end; min-height: 38px; padding-inline: 15px; }
#rr-mappings-list:empty::before { content: 'Los botones que añadas aparecerán aquí.'; color: var(--text-muted); font-size: 13px; padding: 12px; text-align: center; border: 1px dashed var(--border); border-radius: var(--radius); }

/* Pantalla de creación de roles: el formulario se convierte en una tarjeta guiada. */
.card:has(#rr-mappings-list) {
  position: relative;
  overflow: hidden;
  padding: 0 !important;
  border: 1px solid var(--border);
  background: var(--surface);
}
.card:has(#rr-mappings-list)::before {
  content: 'Roles';
  display: block;
  padding: 18px 20px 16px;
  color: var(--text);
  font-size: 17px;
  font-weight: 700;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(110deg, rgba(88, 101, 242, .18), transparent 55%);
}
.card:has(#rr-mappings-list) .card-subtitle,
.card:has(#rr-mappings-list) > .vars-hint { display: none; }
.card:has(#rr-mappings-list) > div:nth-of-type(1) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  padding: 18px 20px 20px;
  margin: 0 !important;
  background: var(--surface-2);
}
.card:has(#rr-mappings-list) .rr-builder-intro {
  grid-column: 1 / -1;
  margin: 0;
  padding: 14px;
  border-color: rgba(88, 101, 242, .45);
  background: rgba(88, 101, 242, .12);
}
.card:has(#rr-mappings-list) .rr-builder-intro strong { font-size: 15px; }
.card:has(#rr-mappings-list) .rr-builder-intro small { margin-top: 3px; }
.card:has(#rr-mappings-list) .rr-input-group { min-width: 0; }
.card:has(#rr-mappings-list) .rr-button-name { grid-column: 1 / -1; }
.card:has(#rr-mappings-list) #rr-add-mapping-btn {
  grid-column: 1 / -1;
  width: 100%;
  min-height: 42px;
  margin-top: 2px;
  font-weight: 700;
}
.card:has(#rr-mappings-list) #rr-mappings-list {
  position: relative;
  margin: 0 20px 20px;
  padding: 34px 6px 0 0 !important;
  border-top: 1px solid var(--border);
}
.card:has(#rr-mappings-list) #rr-mappings-list::after {
  content: 'Roles configurados';
  position: absolute;
  top: 10px;
  left: 0;
  padding-right: 8px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.card:has(#rr-mappings-list) #rr-mappings-list > div {
  padding: 10px 12px !important;
  border: 1px solid var(--border);
  border-radius: var(--radius) !important;
  background: var(--surface-2) !important;
  transition: border-color .15s, transform .15s;
}
.card:has(#rr-mappings-list) #rr-mappings-list > div:hover { border-color: rgba(88, 101, 242, .65); transform: translateX(2px); }
.rr-editor-tabs { margin-top: 16px; }
#rr-panel-editor.rr-show-message .card:has(#rr-mappings-list),
#rr-panel-editor.rr-show-buttons .col-form > .card:not(:has(#rr-mappings-list)) { display: none; }
.rs-editor-tabs { margin-top: 16px; }
#role-shop-panel-editor.rs-show-message .card:has(#role-shop-items-list),
#role-shop-panel-editor.rs-show-items .col-form > .card:not(:has(#role-shop-items-list)) { display: none; }
@media (max-width: 600px) {
  .card:has(#rr-mappings-list) > div:nth-of-type(1) { grid-template-columns: 1fr; padding: 14px; }
  .card:has(#rr-mappings-list) .rr-button-name { grid-column: auto; }
  .card:has(#rr-mappings-list) #rr-mappings-list { margin-inline: 14px; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Figtree', 'Segoe UI', Roboto, Arial, sans-serif;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* El rasgo tipografico de la web: titulares grandes, de peso ligero y con el
   tracking cerrado. Solo se aplica a los titulos grandes — las etiquetas y los
   textos pequenos del panel siguen en negrita, que en una interfaz densa de
   configuracion se lee bastante mejor que el peso 400. */
h1, h2 {
  font-weight: 400;
  letter-spacing: -1px;
  line-height: 1.12;
}

h3 {
  font-weight: 500;
  letter-spacing: -0.3px;
}

/* Marca de la barra superior, igual que la de la landing. El PNG ya trae el
   circulo recortado con el exterior transparente. */
.brand-mark {
  width: 24px;
  height: 24px;
  display: block;
  flex-shrink: 0;
}

/* Paginas con layout de doble columna (sidebar + contenido): cada columna tiene
   su propio scroll interno, asi que la pagina en si no necesita scrollar nunca. */
body.app-page {
  height: 100vh;
  overflow: hidden;
}

a { color: inherit; }

.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 32px 20px;
}

/* ---------- Login screen ---------- */
.login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 20px;
  text-align: center;
  padding: 20px;
}

.login-screen h1 { font-size: 28px; margin: 0; }
.login-screen p { color: var(--text-muted); max-width: 420px; margin: 0; }

/* ---------- Roadmap publico (pagina de inicio) ---------- */
.roadmap-section {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px 24px 100px;
}
.roadmap-section h2 {
  text-align: center;
  font-size: 26px;
  margin-bottom: 6px;
}
.roadmap-section .roadmap-sub {
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
  margin-bottom: 36px;
}
.roadmap-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 800px) {
  .roadmap-columns { grid-template-columns: 1fr; }
}
.roadmap-column {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
}
.roadmap-column-title {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.roadmap-column.done .roadmap-column-title { color: #57f287; }
.roadmap-column.progress .roadmap-column-title { color: #f1c40f; }
.roadmap-column.planned .roadmap-column-title { color: var(--text-muted); }
.roadmap-item {
  padding: 10px 0;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--text);
}
.roadmap-item:first-of-type { border-top: none; padding-top: 0; }
.roadmap-item .roadmap-item-desc {
  display: block;
  color: var(--text-muted);
  font-size: 12px;
  margin-top: 2px;
}

.roadmap-fab {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  background: var(--accent);
  color: white;
  font-weight: 600;
  font-size: 13px;
  padding: 10px 20px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  transition: opacity 0.2s, transform 0.2s;
  z-index: 20;
  animation: roadmap-fab-bounce 2.2s ease-in-out infinite;
}
.roadmap-fab:hover { animation: none; transform: translateX(-50%) translateY(-2px); }
.roadmap-fab.hidden { opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(20px); }

@keyframes roadmap-fab-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-6px); }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--accent);
  color: white;
  border: none;
  padding: 12px 22px;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, transform 0.1s;
}
.btn:hover { background: var(--accent-hover); }
.btn:active { transform: scale(0.98); }
.btn.secondary { background: var(--surface-3); border: 1px solid var(--border); }
.btn.secondary:hover { background: var(--surface-3); border-color: var(--border-strong); }
.btn.danger { background: var(--danger); }
.btn.small { padding: 7px 14px; font-size: 13px; }
.btn.full { width: 100%; }
.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.floating-save-btn {
  position: fixed;
  bottom: 20px;
  left: 240px;
  right: 0;
  margin: 0 auto;
  width: fit-content;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 11px 20px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,0.22);
  transition: background 0.12s, border-color 0.12s, transform 0.1s;
}
.floating-save-btn svg { color: var(--accent); flex-shrink: 0; }
.floating-save-btn:hover { background: var(--surface-3); border-color: var(--border-strong, var(--border)); }
.floating-save-btn:active { transform: scale(0.97); }
.floating-save-btn.hidden { display: none; }

/* ---------- Topbar ---------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 10;
}
.topbar .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; }
.topbar .user { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-muted); }
.topbar .user img { width: 28px; height: 28px; border-radius: 50%; }

/* ---------- Guild cards (dashboard) ---------- */
.guild-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.guild-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  text-align: center;
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.15s, transform 0.1s;
}
.guild-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.guild-card img, .guild-card .fallback-icon {
  width: 64px; height: 64px; border-radius: 50%; object-fit: cover;
  background: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 20px; color: var(--text-muted);
}
.guild-card .name { font-weight: 600; }
.guild-card .badge {
  font-size: 11px; padding: 3px 10px; border-radius: 999px;
  background: rgba(35,165,90,0.15); color: var(--success);
}
.guild-card .badge.missing { background: rgba(242,63,67,0.15); color: var(--danger); }

.empty-state { text-align: center; color: var(--text-muted); padding: 40px 20px; }

/* ================= Settings page: layout de dos columnas ================= */
.settings-layout {
  display: flex;
  height: calc(100vh - 61px); /* resta la topbar */
}

/* ---------- Sidebar ---------- */
.sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 16px 10px;
  gap: 2px;
  height: 100%;
  overflow-y: auto;
}

/* Oculta la barra de scroll visualmente en el sidebar y el contenido, sin desactivar
   el scroll en si (con rueda del raton, trackpad o teclado sigue funcionando igual). */
.sidebar, .settings-content {
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* Edge/IE viejos */
}
.sidebar::-webkit-scrollbar, .settings-content::-webkit-scrollbar {
  display: none;               /* Chrome, Safari, Edge modernos */
}

.sidebar-guild {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
}
.sidebar-guild img { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; }
.sidebar-guild .fallback-icon {
  width: 32px; height: 32px; border-radius: 50%; background: var(--surface-3);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; flex-shrink: 0;
}
.sidebar-guild .info { min-width: 0; flex: 1; }
.sidebar-guild .info .name { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-guild .info .members { font-size: 11px; color: var(--text-muted); }

.disconnect-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: var(--radius);
  color: var(--danger);
  background: rgba(242, 63, 67, 0.1);
  transition: background 0.12s, color 0.12s;
}
.disconnect-btn:hover { background: var(--danger); color: white; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
  font-weight: 700;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  transition: background 0.12s, color 0.12s;
}
.nav-item .icon { font-size: 15px; width: 18px; text-align: center; }
.nav-item:hover { background: var(--surface-3); color: var(--text); }
.nav-item.active { background: var(--accent); color: white; font-weight: 700; }

/* Grupo desplegable (ej. Mensajes > Bienvenida / Despedida) */
.nav-group {
  background: var(--surface-2);
  border-radius: var(--radius);
  padding: 4px;
  margin-bottom: 6px;
}

.nav-group-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 9px 10px;
  background: none;
  border: none;
  border-radius: var(--radius);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.12s;
}
.nav-group-toggle:hover { background: var(--surface-3); }
.nav-group-toggle .chevron { font-size: 10px; color: var(--text-muted); transition: transform 0.15s; }
.nav-group-toggle[aria-expanded="false"] .chevron { transform: rotate(-90deg); }

/* Botones de accion del fondo del sidebar (Soporte / Sugerencia): mismo peso visual que
   "Economia" (blanco, negrita), pero con su propio color de acento para que destaquen */
.sidebar-action-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  border: none;
  background: var(--surface-2);
  width: 100%;
  text-align: left;
  transition: background 0.12s, transform 0.1s;
}
.sidebar-action-btn:hover { transform: translateY(-1px); }
.sidebar-action-btn .icon-badge {
  width: 24px;
  height: 24px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}
.sidebar-action-btn.support .icon-badge { background: rgba(231, 76, 60, 0.22); }
.sidebar-action-btn.support:hover { background: rgba(231, 76, 60, 0.16); }
.sidebar-action-btn.suggestion .icon-badge { background: rgba(241, 196, 15, 0.22); }
.sidebar-action-btn.suggestion:hover { background: rgba(241, 196, 15, 0.16); }

.nav-sublist {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
  margin-top: 2px;
  padding-left: 14px;
  position: relative;
}
.nav-sublist.collapsed { display: none; }

/* Linea conectora vertical, para que se note visualmente que son "hijos" del grupo */
.nav-sublist::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  bottom: 10px;
  width: 1px;
  background: var(--border-strong, var(--border));
}

.nav-subitem {
  padding-left: 20px;
  font-size: 12.5px;
  position: relative;
}
.nav-subitem::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 10px;
  height: 1px;
  background: var(--border-strong, var(--border));
}
.nav-subitem.active::before,
.nav-subitem:hover::before { background: var(--accent); }

.sidebar-footer {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ---------- Contenido de configuracion ---------- */
.settings-content {
  flex: 1;
  min-width: 0;
  padding: 32px 40px 90px; /* el hueco de abajo evita que el boton flotante tape el final del contenido */
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

.content-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}
.content-header h1 { font-size: 22px; margin: 0 0 4px; }
.content-header p { margin: 0; color: var(--text-muted); font-size: 14px; }

/* Se centra la seccion ENTERA (no cada trozo por separado) dentro del area con scroll,
   para que la barra de scroll quede pegada al borde real de la ventana, y el contenido
   quede centrado en el hueco disponible en vez de pegado a la izquierda con un
   hueco vacio enorme a la derecha. */
.section {
  display: none;
  max-width: 900px;
  margin: 0 auto;
}
.section.active { display: block; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 16px;
}

.card-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  margin: 0 0 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

/* ---------- Cajas de ayuda / aclaraciones ---------- */
.help-box {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-top: 16px;
}
.help-box-title {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
}
.help-box-list {
  margin: 0 0 10px;
  padding-left: 20px;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.7;
}
.help-box-list:last-child { margin-bottom: 0; }
.help-box-list code { background: var(--surface-3); padding: 1px 6px; border-radius: 4px; color: var(--text); }
.help-box-list b { color: var(--text); }
.help-box-example {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.6;
}
.help-box-example code { background: var(--surface-3); padding: 1px 6px; border-radius: 4px; color: var(--text); }

/* ---------- Layout de dos columnas (formulario + vista previa fija) ---------- */
.section-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 24px;
  align-items: start;
}
.col-preview {
  position: sticky;
  top: 20px;
}
@media (max-width: 980px) {
  .section-columns { grid-template-columns: 1fr; }
  .col-preview { position: static; }
}

/* ---------- Plantillas prediseñadas ---------- */
.templates-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.ticket-systems-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.ticket-system-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  color: var(--text-muted);
}
.ticket-system-chip:hover { border-color: var(--accent); color: var(--text); }
.ticket-system-chip.active { background: var(--accent); border-color: var(--accent); color: white; }
.ticket-system-chip .dot { width: 7px; height: 7px; border-radius: 50%; }
.ticket-system-chip.disabled-system .dot { background: var(--text-muted); }
.ticket-system-chip:not(.disabled-system) .dot { background: var(--success); }

.chip-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: 2px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.15);
  color: inherit;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.7;
}
.chip-delete:hover { background: var(--danger); opacity: 1; color: white; }
.add-ticket-system-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: 1px dashed var(--border);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
}
.add-ticket-system-btn:hover { border-color: var(--accent); color: var(--text); }

.template-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.template-chip:hover { border-color: var(--accent); }
.template-chip .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.template-chip.locked {
  opacity: 0.55;
  cursor: default;
}
.template-chip.locked:hover { border-color: var(--border); }
.template-chip .lock-icon { font-size: 11px; }

/* ---------- Pestañas internas dentro de una sección (evitan el scroll largo) ---------- */
.mini-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.mini-tab {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 600;
  padding: 10px 16px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.12s, border-color 0.12s;
}
.mini-tab:hover { color: var(--text); }
.mini-tab.active { color: var(--text); border-bottom-color: var(--accent); }

.tab-panel { display: none; }
.tab-panel.active { display: block; }

.panel-heading {
  font-size: 16px;
  font-weight: 500;
  margin: 0 0 14px;
  color: var(--text);
}

.card-subtitle {
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 12px;
  color: var(--text-muted);
}

.field { margin-bottom: 18px; }
.field:last-child { margin-bottom: 0; }
.field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--text-muted); }
.field .row { display: flex; gap: 12px; }
.field .row > * { flex: 1; }

select, input[type="text"], input[type="number"], textarea {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
}
select:focus, input:focus, textarea:focus { outline: none; border-color: var(--accent); }
textarea { resize: vertical; min-height: 80px; }

.vars-hint { font-size: 12px; color: var(--text-muted); margin-top: 6px; }
.vars-hint code { background: var(--surface-2); padding: 1px 6px; border-radius: 4px; }

.level-role-row {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 0; border-bottom: 1px solid var(--border);
}
.level-role-row:last-child { border-bottom: none; }
.level-role-row .pill {
  background: var(--surface-2); padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 600;
}

.add-role-row { display: flex; gap: 10px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }

.log-command-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.log-command-row:last-child { border-bottom: none; }
.log-command-row .cmd-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  min-width: 110px;
}
.log-command-row select {
  flex: 1;
  min-width: 0;
}
.log-command-row select:disabled { opacity: 0.4; }
.add-role-row select, .add-role-row input { flex: 1; }

.section-save {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

/* ---------- Modal de transcripcion de tickets ---------- */
.modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 100;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-backdrop.open { display: flex; }

.modal-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  width: 100%;
  max-width: 560px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.modal-header h2 { margin: 0; font-size: 16px; }
.modal-close {
  background: none; border: none; color: var(--text-muted);
  font-size: 16px; cursor: pointer; padding: 4px 8px; border-radius: var(--radius);
}
.modal-close:hover { background: var(--surface-3); color: var(--text); }
.modal-body {
  padding: 16px 20px;
  overflow-y: auto;
}

.transcript-msg {
  display: flex;
  gap: 10px;
  padding: 8px 0;
}
.transcript-msg img { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; }
.transcript-msg .body { min-width: 0; }
.transcript-msg .head { display: flex; align-items: baseline; gap: 8px; }
.transcript-msg .author { font-weight: 600; font-size: 13px; }
.transcript-msg .time { font-size: 11px; color: var(--text-muted); }
.transcript-msg .content { font-size: 13px; color: var(--text); word-break: break-word; white-space: pre-wrap; }
.transcript-msg .attachment { font-size: 12px; color: var(--accent); display: block; }

.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--success); color: white; padding: 10px 20px; border-radius: var(--radius);
  font-size: 14px; opacity: 0; pointer-events: none; transition: opacity 0.2s;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  z-index: 100;
}
.toast.show { opacity: 1; }

/* En las paginas con sidebar (Bienvenida, Tickets, etc.), el aviso se centra en el mismo
   hueco que el boton flotante de guardar, no en toda la ventana */
body.app-page .toast {
  left: 240px;
  right: 0;
  margin: 0 auto;
  width: fit-content;
  transform: none;
}

/* ---------- Toggle switch ---------- */
.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.toggle-row label { margin-bottom: 0; }
.switch {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 24px;
  flex-shrink: 0;
}
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider {
  position: absolute; cursor: pointer; inset: 0;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 999px;
  transition: background 0.15s;
}
.switch .slider::before {
  content: "";
  position: absolute;
  height: 18px; width: 18px;
  left: 2px; top: 2px;
  background: white;
  border-radius: 50%;
  transition: transform 0.15s;
}
.switch input:checked + .slider { background: var(--success); border-color: var(--success); }
.switch input:checked + .slider::before { transform: translateX(18px); }

/* ---------- Color picker ---------- */
.color-field {
  display: flex;
  align-items: center;
  gap: 10px;
}
.color-field input[type="color"] {
  width: 44px; height: 38px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  cursor: pointer;
}
.color-field input[type="text"] { max-width: 120px; font-family: monospace; }

/* ---------- Vista previa estilo Discord ---------- */
.preview-wrap {
  margin-top: 24px;
}
.preview-wrap > .hint { margin-bottom: 10px; }
.discord-mock {
  background: #313338;
  border-radius: 8px;
  padding: 16px 20px;
  font-family: 'Segoe UI', Arial, sans-serif;
}
.discord-mock .msg { display: flex; gap: 12px; }
.discord-mock .bot-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: #5865f2; object-fit: cover;
}
.discord-mock .msg-body { flex: 1; min-width: 0; }
.discord-mock .msg-head { display: flex; align-items: baseline; gap: 8px; }
.discord-mock .bot-name { color: #f2f3f5; font-weight: 600; font-size: 15px; }
.discord-mock .app-badge {
  background: #5865f2; color: white; font-size: 10px; font-weight: 600;
  padding: 1px 4px; border-radius: 3px;
}
.discord-mock .msg-time { color: #949ba4; font-size: 12px; }
.discord-mock .embed {
  margin-top: 6px;
  background: #2b2d31;
  border-left: 4px solid #57f287;
  border-radius: 4px;
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  max-width: 480px;
  transition: opacity 0.15s;
}
.discord-mock .embed-title { color: #f2f3f5; font-weight: 600; font-size: 15px; margin-bottom: 6px; }
.discord-mock .embed-desc { color: #dbdee1; font-size: 14px; line-height: 1.5; word-break: break-word; }
.discord-mock .embed-desc .mention { color: #00a8fc; background: rgba(88,101,242,0.15); border-radius: 3px; padding: 0 2px; }
.discord-mock .embed-footer { margin-top: 10px; color: #949ba4; font-size: 12px; display: flex; align-items: center; gap: 6px; }
.discord-mock .embed-footer img { width: 16px; height: 16px; border-radius: 50%; }
.discord-mock .embed-thumb {
  width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0; object-fit: cover; background: var(--surface-3);
}
.discord-mock.disabled { opacity: 0.4; filter: grayscale(0.6); }

/* ---------- Owner panel: tabla ---------- */
.owner-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.owner-table th {
  text-align: left;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.owner-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.owner-table tr:last-child td { border-bottom: none; }

.badge.premium { background: rgba(250, 199, 117, 0.15); color: #fac775; }

/* ---------- Premium: candado sobre campos bloqueados ---------- */
.premium-field { position: relative; }
.premium-field.locked .locked-overlay {
  position: absolute; inset: 0;
  background: rgba(5, 5, 5, 0.78);
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 13px; color: var(--text-muted);
  cursor: pointer;
}
.premium-field.locked select,
.premium-field.locked input,
.premium-field.locked textarea { pointer-events: none; opacity: 0.3; }

.premium-badge-inline {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(250, 199, 117, 0.15); color: #fac775;
  font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  margin-left: 8px; vertical-align: middle;
}
.premium-badge-inline.unlocked {
  background: rgba(35, 165, 90, 0.15); color: var(--success);
}

.premium-status-card {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.premium-status-card .status-text { font-size: 15px; font-weight: 600; }
.premium-status-card .status-sub { font-size: 13px; color: var(--text-muted); margin-top: 2px; }

.plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}
.plan-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  text-align: center;
  background: var(--surface-2);
}
.plan-card .plan-name { font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.plan-card .plan-price { font-size: 22px; font-weight: 700; color: var(--accent); }
.plan-card .plan-interval { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
.plan-card .plan-guilds { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; }

/* ---------- Owner panel: tarjetas de gestion por servidor ---------- */
.owner-guild-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.owner-guild-card .identity { display: flex; align-items: center; gap: 10px; min-width: 200px; flex: 1; }
.owner-guild-card .identity img, .owner-guild-card .identity .fallback-icon {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
}
.owner-guild-card .identity .name { font-weight: 600; font-size: 14px; }
.owner-guild-card .identity .members { font-size: 12px; color: var(--text-muted); }

.owner-guild-card .status-block { min-width: 160px; }
.owner-guild-card .status-block .label { font-size: 13px; font-weight: 600; }
.owner-guild-card .status-block .sub { font-size: 12px; color: var(--text-muted); }

.owner-guild-card .notes-input {
  flex: 1; min-width: 160px;
}
.owner-guild-card .notes-input input {
  font-size: 13px; padding: 7px 10px;
}

.owner-guild-card .controls {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.owner-guild-card .controls select, .owner-guild-card .controls input[type="number"] {
  width: auto; min-width: 110px; padding: 7px 10px; font-size: 13px;
}
.owner-guild-card .controls input[type="number"] { width: 80px; }

.status-active { color: var(--success); }
.status-expired { color: var(--danger); }
.status-none { color: var(--text-muted); }

@media (max-width: 760px) {
  .settings-layout { flex-direction: column; }
  .sidebar { width: 100%; flex-direction: row; overflow-x: auto; border-right: none; border-bottom: 1px solid var(--border); }
  .sidebar-guild, .sidebar-footer { display: none; }
  .settings-content { padding: 24px 16px; }
  .floating-save-btn { left: 0; } /* en movil el sidebar ya no ocupa una columna fija a la izquierda */
  body.app-page .toast { left: 0; }
}