/* components/accordion.css */

/* Acordeon del Foro
   ============================================================ */

.forum-accordion {
  margin: 16px 0;
  border: 3px solid var(--cta-primary);
  transition: border-color 0.2s ease;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.forum-accordion:hover,
.forum-accordion:focus-within {
  border-color: var(--accent-display-green);
}

.forum-accordion:not(.forum-accordion--sm) {
  background: rgba(255, 255, 255, 0.04);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(2px);
}

.forum-accordion-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 18px;
  background: transparent;
  border: none;
  color: var(--text-h3);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
}

.forum-accordion-toggle:hover {
  color: var(--hover-primary);
}

.forum-accordion-toggle > span:first-child {
  display: inline-block;
  padding-block: 0.1em 0.04em;
  padding-inline: 0.03em 0.14em;
  color: var(--cta-primary);
  -webkit-text-fill-color: var(--cta-primary);
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  font-weight: 400;
  letter-spacing: 0.5px;
  line-height: 1.12;
}

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .forum-accordion-toggle > span:first-child {
    background-image: var(--display-text-gradient);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}

.forum-accordion-caret {
  transition: transform 0.2s ease;
}

.forum-accordion-toggle.is-open .forum-accordion-caret {
  transform: rotate(180deg);
}

.forum-accordion-panel {
  padding: 8px 0;
  overflow: hidden;
}

/* Acordeón chico (sub-bloques del admin): mismo comportamiento, letra de cuerpo */
.forum-accordion--sm {
  margin: 10px 0;
  border-width: 1px;
}

.forum-accordion--sm > .forum-accordion-toggle {
  padding: 10px 14px;
  font-size: 0.9rem;
}

.forum-accordion--sm > .forum-accordion-toggle > span:first-child {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.3;
  background-image: none;
  background-clip: border-box;
  -webkit-background-clip: border-box;
  color: var(--text-h3);
  -webkit-text-fill-color: var(--text-h3);
}

.forum-accordion--sm > .forum-accordion-panel {
  padding: 8px 14px 14px;
}

.forum-subsection-title {
  margin: 14px 18px 6px;
  color: var(--text-caption);
  font-family: var(--font-body);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.forum-empty-note {
  margin: 8px 18px;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 0.85rem;
}

.forum-topic-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 18px;
  border-top: 1px solid var(--border-subtle);
  text-decoration: none;
  color: inherit;
  transition: background-color 0.15s ease;
}

.forum-topic-row:hover {
  background: rgba(var(--accent-primary-rgb), 0.06);
}

.forum-topic-row-disabled {
  opacity: 0.5;
  cursor: default;
}

.forum-topic-row-title {
  margin: 0;
  color: var(--text-body);
  font-family: var(--font-body);
  font-weight: 700;
}

.forum-topic-row-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: 0.75rem;
}

.forum-topic-row-author {
  display: flex;
  align-items: center;
  gap: 6px;
}

.forum-topic-row-date,
.forum-topic-row-count {
  white-space: nowrap;
}

@media (max-width: 640px) {
  .forum-topic-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .forum-topic-row-meta {
    flex-wrap: wrap;
  }
}

/* Acordeones anidados (panel de admin): un poco de aire entre ellos */
.forum-accordion-panel .forum-accordion {
  margin-top: 12px;
}

/* Acordeón grande que contiene sub-acordeones chicos (Configuración, Capítulos, Cuentos, Foro):
   espacio entre sus bordes y las listas desplegables, igual que el de los sub-acordeones. */
.forum-accordion:not(.forum-accordion--sm) > .forum-accordion-panel:has(.forum-accordion--sm) {
  padding: 4px 14px 14px;
}

/* variante sobria del panel de administración (acordeones admin-* y cfg-*).
   sin degradado en el título y con borde sutil; los acordeones públicos del foro no cambian.
   va al final del archivo para ganar a las reglas generales de .forum-accordion. */
.forum-accordion:is([data-accordion-id^="admin-"], [data-accordion-id^="cfg-"]) {
  border: 1px solid var(--border-subtle);
}

.forum-accordion:is([data-accordion-id^="admin-"], [data-accordion-id^="cfg-"]):hover,
.forum-accordion:is([data-accordion-id^="admin-"], [data-accordion-id^="cfg-"]):focus-within {
  border-color: var(--border-emphasis);
}

.forum-accordion:is([data-accordion-id^="admin-"], [data-accordion-id^="cfg-"])
  > .forum-accordion-toggle > span:first-child {
  background-image: none;
  background-clip: border-box;
  -webkit-background-clip: border-box;
  color: var(--text-h2);
  -webkit-text-fill-color: var(--text-h2);
}

.forum-accordion:is([data-accordion-id^="admin-"], [data-accordion-id^="cfg-"])
  > .forum-accordion-toggle:hover > span:first-child {
  color: var(--hover-primary);
  -webkit-text-fill-color: var(--hover-primary);
}