/* ===== Ajustes de header responsive (sin JS) ===== */
:root {
  /* Tokens base (más legibles en claro) */
  --radius: var(--border-radius, 12px);
  --bg-panel: #ffffff;
  --bg-subtle: #f8fbff;
  --border: #e9eef5;
  --muted: #64748b;
  --text: #0f172a;

  --accent-link: #3b82f6;
  --accent-nsfw: #ef4444;
  --accent-warning: #f59e0b;
  --accent-admin: #10b981;
  --accent-warn: #fb7185;
  --accent-schedule: #8b5cf6;
  --accent-tip: #0ea5e9;
}

.nav-toggle {
  display: none;
}

.hamburger {
  display: none;
}

@media (max-width: 768px) {
  .logo-nav-container {
    position: relative;
  }

  .hamburger {
    display: grid;
    gap: 4px;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
  }

  .hamburger span {
    width: 22px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: .2s;
  }

  /* Menú como panel colapsable */
  .main-nav {
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    background: rgba(15, 26, 32, .98);
    padding: 10px 16px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    display: grid;
    gap: 8px;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: all .25s ease;
  }

  .main-nav a {
    margin: 0;
    padding: 10px 12px;
    border-radius: 10px;
  }

  #nav-toggle:checked~.hamburger span:nth-child(2) {
    opacity: 0;
  }

  #nav-toggle:checked~.hamburger span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }

  #nav-toggle:checked~.hamburger span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  #nav-toggle:checked~.main-nav {
    transform: none;
    opacity: 1;
    pointer-events: auto;
  }
}

/* ===== Hero del grupo ===== */
.group-hero {
  background: linear-gradient(135deg, var(--secondary-color) 0%, var(--dark-bg) 100%);
  color: #fff;
  padding: 32px 0 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.85);
  font-size: .95rem;
  margin-bottom: 10px;
}

.breadcrumbs a {
  color: rgba(255, 255, 255, 0.95);
  text-decoration: none;
  transition: var(--transition);
}

.breadcrumbs a:hover {
  color: var(--accent-color);
}

.breadcrumbs .current {
  opacity: .9;
}

.hero-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
}

.hero-title h2 {
  margin: 0 0 6px;
  color: #fff;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: .85rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.chip.cat.anime {
  background: rgba(214, 64, 69, 0.18);
}

.chip.cat.manga {
  background: rgba(26, 111, 201, 0.18);
}

.chip.cat.gaming {
  background: rgba(28, 124, 84, 0.18);
}

.chip.cat.cultura {
  background: rgba(214, 127, 26, 0.18);
}

.chip.nsfw {
  background: rgba(255, 193, 7, .22);
}

.hero-actions {
  display: grid;
  grid-auto-flow: column;
  gap: 10px;
}

.btn-block {
  width: 100%;
}

/* ===== Grid de contenido ===== */
.group-info-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 24px;
  margin: 24px 0 40px;
}

.info-card {
  background: #fff;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  padding: 20px;
}

.info-card h3,
.info-card h4 {
  margin-bottom: 12px;
  color: var(--secondary-color);
}

.info-card.compact {
  padding: 16px;
}

.group-description {
  color: var(--text-dark);
  font-size: 1rem;
}

.meta-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 14px;
  color: var(--text-gray);
  font-size: .92rem;
}

.meta-inline i {
  margin-right: 6px;
}

/* ===== Features ===== */
.features-block {
  margin-top: 18px;
}

.features-block h4 {
  margin: 16px 0 10px;
  color: var(--secondary-color);
}

.feature-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.chip.feature {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f5f6f7;
  color: var(--text-dark);
  padding: 6px 10px;
  border-radius: 999px;
  font-size: .85rem;
  border: 1px solid #e7e7e7;
}

.chip.feature.bot_enabled {
  background: rgba(29, 53, 87, 0.08);
}

.chip.feature.economy_enabled {
  background: rgba(241, 196, 15, 0.15);
}

.chip.feature.gacha_enabled {
  background: rgba(28, 124, 84, 0.12);
}

.chip.feature.images_enabled {
  background: rgba(26, 111, 201, 0.12);
}

.chip.feature.reacciones_enabled {
  background: rgba(230, 57, 70, 0.10);
}

.chip.feature.welcome_enabled {
  background: rgba(40, 167, 69, 0.12);
}

.chip.feature.goodbye_enabled {
  background: rgba(108, 117, 125, 0.12);
}

/* ===== Sidebar ===== */
.sidebar .stats {
  list-style: none;
  padding-left: 0;
  margin: 0 0 14px;
}

.sidebar .stats li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-dark);
  margin-bottom: 8px;
}

.sidebar .stats i {
  color: var(--text-gray);
}

.info-card.warn {
  border: 1px solid rgba(230, 57, 70, 0.25);
  background: #fff6f6;
}

.w-100 {
  width: 100%;
}


/* Contenedor */
.rules-block.pretty {
  padding: 16px 16px 14px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 2px);
  box-shadow: 0 10px 24px rgba(16, 24, 40, .06);
}

/* Header */
.rules-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.rules-head h4 {
  margin: 0;
  color: var(--text)
}

.rules-head i {
  padding: 8px;
  border-radius: 10px;
  background: linear-gradient(135deg, #eaf3ff, #f5faff);
}

/* Lista */
.auto-rules {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Ítems */
.rule-item {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(180deg, #fff, #f8fbff);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
  box-shadow: 0 2px 10px rgba(16, 24, 40, .05);
  overflow: hidden;
}

/* barrita de acento */
.rule-item::before {
  content: "";
  position: absolute;
  inset: 0 0 0 0;
  border-radius: inherit;
  pointer-events: none;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 1px;
  background: var(--accent, var(--border));
  opacity: .22;
}

/* Icon chip */
.ri-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  font-size: 14px;
  color: #0b1020;
  background: var(--icon-bg, #eef3ff);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .04), 0 2px 6px rgba(16, 24, 40, .05);
}

.ri-text {
  color: var(--text)
}

.rule-item:active {
  transform: translateY(0) scale(.99)
}

/* Variantes (acento + chip) */
.rule-item.is-link {
  --accent: var(--accent-link);
  --icon-bg: rgba(59, 130, 246, .12)
}

.rule-item.is-nsfw {
  --accent: var(--accent-nsfw);
  --icon-bg: rgba(239, 68, 68, .10)
}

.rule-item.is-warning {
  --accent: var(--accent-warning);
  --icon-bg: rgba(245, 158, 11, .12)
}

.rule-item.is-admin {
  --accent: var(--accent-admin);
  --icon-bg: rgba(16, 185, 129, .12)
}

.rule-item.is-warn {
  --accent: var(--accent-warn);
  --icon-bg: rgba(251, 113, 133, .12)
}

.rule-item.is-schedule {
  --accent: var(--accent-schedule);
  --icon-bg: rgba(139, 92, 246, .12)
}

.rule-item.is-muted {
  --accent: #94a3b8;
  --icon-bg: rgba(148, 163, 184, .14)
}

.rule-item.is-tip {
  --accent: var(--accent-tip);
  --icon-bg: rgba(14, 165, 233, .12);
  background: linear-gradient(180deg, #f8fbff, #f3f9ff)
}

/* Pie */
.rules-foot {
  color: var(--muted)
}

/* ===== Compartir ===== */
.share-row {
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1px solid #eee;
  margin-top: 16px;
  padding-top: 12px;
}

.share-row .share {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f5f6f7;
  color: var(--text-dark);
  border: 1px solid #e7e7e7;
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
}

.share-row .share:hover {
  background: #eceff1;
}

/* ===== Barra fija inferior (móvil) ===== */
.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  background: #0f141a;
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding: 8px 16px calc(8px + env(safe-area-inset-bottom));
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.sticky-cta .btn {
  min-height: 44px;
}

/* ===== Tacto y ergonomía ===== */
.btn,
.share-row .share,
.join-btn {
  min-height: 44px;
}

.share-row .share i {
  font-size: 1rem;
}

/* ===== Breakpoints ===== */
@media (max-width: 992px) {
  .group-info-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .hero-head {
    align-items: stretch;
    gap: 12px;
  }

  .chips {
    gap: 6px;
    overflow: auto;
    padding-bottom: 2px;
  }

  .chips::-webkit-scrollbar {
    display: none;
  }

  .hero-actions {
    grid-auto-flow: row;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .info-card {
    padding: 16px;
  }

  .share-row {
    flex-wrap: wrap;
  }

  /* Modal ocupa más alto en móviles */
  .modal-dialog {
    max-width: 560px;
    width: 100%;
    border-radius: 12px;
  }

  /* Barra fija visible en móvil */
  .sticky-cta {
    display: grid;
  }

  .main-footer {
    margin-bottom: 72px;
  }

  /* espacio para la barra fija */
}

@media (max-width: 480px) {
  .group-hero {
    padding: 26px 0 14px;
  }

  .breadcrumbs {
    font-size: .9rem;
  }
}