/* ============================================================================
   READING ENHANCEMENTS — Letras & Versos
   Estilos para: tiempo de lectura, sorpréndeme, artículos relacionados,
   lectura continua
   ============================================================================ */

/* ──────────────────────────────────────────────────────────────────────────
   TIEMPO DE LECTURA — Tarjetas
   ────────────────────────────────────────────────────────────────────────── */
.card-stat.reading-time-badge {
  color: var(--accent-gold, #d4af37);
  font-weight: 600;
}

/* ──────────────────────────────────────────────────────────────────────────
   BOTÓN SORPRÉNDEME — Navegación
   ────────────────────────────────────────────────────────────────────────── */
.surprise-btn {
  /* Base igual que nav-filter-btn pero sin la clase para evitar el listener de filtros */
  padding: var(--space-3, 0.75rem) var(--space-5, 1.25rem);
  border: 2px solid transparent;
  border-radius: var(--radius-full, 9999px);
  font-family: var(--font-sans, sans-serif);
  font-size: var(--text-sm, 0.875rem);
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  white-space: nowrap;
  transition: all var(--transition-base, 0.2s ease);
  background: linear-gradient(135deg, #7c2d12, var(--accent-burgundy, #9b2c2c));
  color: white;
  position: relative;
  overflow: hidden;
}

.surprise-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--accent-gold, #d4af37), #b8941f);
  opacity: 0;
  transition: opacity 0.3s;
}

.surprise-btn:hover::before { opacity: 1; }
.surprise-btn > * { position: relative; z-index: 1; }

.surprise-btn.spinning i {
  animation: spin360 0.6s ease-in-out;
}

@keyframes spin360 {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ──────────────────────────────────────────────────────────────────────────
   ARTÍCULOS RELACIONADOS — Modal
   ────────────────────────────────────────────────────────────────────────── */
.related-articles {
  margin: 2rem 0;
  padding: 1.5rem;
  border-top: 1px solid var(--border-light, rgba(255,255,255,0.08));
  border-bottom: 1px solid var(--border-light, rgba(255,255,255,0.08));
}

.related-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-gold, #d4af37);
  margin-bottom: 1rem;
}

.related-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.related-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--bg-secondary, rgba(255,255,255,0.04));
  border: 1px solid var(--border-light, rgba(255,255,255,0.07));
  border-radius: 10px;
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
  color: var(--text-primary, #f5f2ed);
}

.related-item:hover {
  background: var(--bg-hover, rgba(255,255,255,0.09));
  border-color: var(--accent-burgundy, #9b2c2c);
  transform: translateX(4px);
}

.related-item-cat {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  white-space: nowrap;
  flex-shrink: 0;
}

.related-item-cat.poema     { background: rgba(224,82,82,0.18); color: #e05252; }
.related-item-cat.relato    { background: rgba(111,168,220,0.18); color: #6fa8dc; }
.related-item-cat.reflexion { background: rgba(135,169,107,0.18); color: #87a96b; }

.related-item-title {
  flex: 1;
  font-size: 0.9rem;
  font-weight: 500;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.related-item-time {
  font-size: 0.75rem;
  color: var(--text-muted, #8a8a8a);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ──────────────────────────────────────────────────────────────────────────
   STAT TIEMPO DE LECTURA — Panel de usuario
   ────────────────────────────────────────────────────────────────────────── */
#statsReadingTime {
  font-size: 0.85rem;
}

/* ──────────────────────────────────────────────────────────────────────────
   RESPONSIVE
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .related-item-title { font-size: 0.85rem; }
  .related-articles { padding: 1rem; }
  .cr-inner { padding: 1rem; }
  .cr-next-title { font-size: 0.9rem; }

  /* Ocultar texto "Sorpréndeme" en móvil muy pequeño, solo icono */
  @media (max-width: 380px) {
    .surprise-btn span { display: none; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .surprise-btn.spinning i { animation: none; }
  .continuous-reading { transition: none; }
  .related-item { transition: none; }
}

/* ──────────────────────────────────────────────────────────────────────────
   FIX: nav-center con 5 botones — ampliar max-width
   ────────────────────────────────────────────────────────────────────────── */
.nav-center {
  max-width: 760px !important;
  flex-wrap: nowrap;
  overflow: visible;
}

/* En pantallas medias donde los 5 botones no caben todos */
@media (max-width: 1100px) {
  .nav-center {
    max-width: 100% !important;
    gap: 0.3rem !important;
  }
  .nav-filter-btn {
    padding: 0.5rem 0.7rem !important;
    font-size: 0.8rem !important;
  }
}