/* ==========================================================================
   themes/themes.css — Sistema Modular de Temáticas Dinámicas para ApuntesHuv
   ========================================================================== */

/* ─── Base Token Overrides & Transiciones Suaves ────────────────────────── */
:root, [data-theme] {
  --theme-transition: background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, color 0.4s ease;
}

body, .header, .btn, .card, .banner, .badge, .view-tab {
  transition: var(--theme-transition);
}

/* ══════════════════════════════════════════════════════════════════════════
   1. TEMÁTICA: SEPTIEMBRE AMARILLO (Salud Mental, corazones amarillos, dorado & blurple)
   ══════════════════════════════════════════════════════════════════════════ */
[data-theme="september-yellow"] {
  --accent: #f0b232;             /* Amarillo Cálido Concientización */
  --accent-hover: #d99b1c;
  --accent-light: #ffea79;
  --accent-dim: rgba(240, 178, 50, 0.18);
  --accent-glow: rgba(240, 178, 50, 0.45);
  --purple-bright: #ffd700;
  --purple-deep: #b8860b;
  --warning: #ffd700;
  
  --theme-gradient: linear-gradient(135deg, #f0b232 0%, #ffd700 50%, #5865f2 100%);
  --theme-banner-bg: linear-gradient(135deg, rgba(240, 178, 50, 0.22) 0%, rgba(88, 101, 242, 0.18) 100%);
  --theme-banner-border: rgba(240, 178, 50, 0.5);
  --theme-badge-bg: linear-gradient(135deg, rgba(240, 178, 50, 0.3), rgba(255, 215, 0, 0.3));
  --theme-badge-text: #fff59d;
  --theme-glow-card: 0 8px 30px rgba(240, 178, 50, 0.28);
  --theme-particle: "💛";
}

/* ══════════════════════════════════════════════════════════════════════════
   2. TEMÁTICA: PRIMAVERA (Tono pastel, frescura, verde menta, lila, celeste, amarillo)
   ══════════════════════════════════════════════════════════════════════════ */
[data-theme="spring"] {
  --accent: #10b981;             /* Verde Menta */
  --accent-hover: #059669;
  --accent-light: #6ee7b7;       /* Menta suave luminoso */
  --accent-dim: rgba(16, 185, 129, 0.16);
  --accent-glow: rgba(16, 185, 129, 0.38);
  --purple-bright: #c084fc;      /* Lila suave pastel */
  --purple-deep: #7e22ce;
  --info: #38bdf8;               /* Celeste cielo pastel */
  --warning: #fde047;            /* Amarillo pastel */
  
  --theme-gradient: linear-gradient(135deg, #10b981 0%, #c084fc 40%, #38bdf8 75%, #fde047 100%);
  --theme-banner-bg: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(192, 132, 252, 0.15) 50%, rgba(56, 189, 248, 0.15) 100%);
  --theme-banner-border: rgba(192, 132, 252, 0.35);
  --theme-badge-bg: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(192, 132, 252, 0.25));
  --theme-badge-text: #a7f3d0;
  --theme-glow-card: 0 8px 30px rgba(16, 185, 129, 0.25);
  --theme-particle: "🌸";
}

/* ══════════════════════════════════════════════════════════════════════════
   3. TEMÁTICA: DÍA DEL ESTUDIANTE (Vibrante, juvenil, naranja cálido, azul eléctrico, amarillo sol)
   ══════════════════════════════════════════════════════════════════════════ */
[data-theme="student-day"] {
  --accent: #f97316;             /* Naranja Cálido Vibrante */
  --accent-hover: #ea580c;
  --accent-light: #facc15;       /* Amarillo Sol */
  --accent-dim: rgba(249, 115, 22, 0.2);
  --accent-glow: rgba(249, 115, 22, 0.5);
  --purple-bright: #3b82f6;      /* Azul Eléctrico */
  --purple-deep: #1d4ed8;
  --info: #2563eb;               /* Azul vibrante */
  --warning: #eab308;            /* Amarillo Sol brillante */

  --theme-gradient: linear-gradient(135deg, #f97316 0%, #2563eb 50%, #eab308 100%);
  --theme-banner-bg: linear-gradient(135deg, rgba(249, 115, 22, 0.22) 0%, rgba(37, 99, 235, 0.22) 50%, rgba(234, 179, 8, 0.18) 100%);
  --theme-banner-border: rgba(249, 115, 22, 0.5);
  --theme-badge-bg: linear-gradient(135deg, rgba(249, 115, 22, 0.3), rgba(234, 179, 8, 0.3));
  --theme-badge-text: #fef08a;
  --theme-glow-card: 0 8px 32px rgba(249, 115, 22, 0.35);
  --theme-particle: "📚";
}

/* ══════════════════════════════════════════════════════════════════════════
   ESTILOS GENERALES Y COMPONENTES DE TEMÁTICAS
   ══════════════════════════════════════════════════════════════════════════ */

/* Aplicación de gradiente de temática activa a elementos clave */
[data-theme="september-yellow"] .header__logo-icon,
[data-theme="spring"] .header__logo-icon,
[data-theme="student-day"] .header__logo-icon {
  background: var(--theme-gradient);
  filter: drop-shadow(0 2px 8px var(--accent-glow));
}

[data-theme="september-yellow"] .header__logo-text,
[data-theme="spring"] .header__logo-text,
[data-theme="student-day"] .header__logo-text {
  background: var(--theme-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

[data-theme="september-yellow"] .btn-primary,
[data-theme="spring"] .btn-primary,
[data-theme="student-day"] .btn-primary {
  background: var(--theme-gradient) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 4px 18px var(--accent-glow) !important;
}

[data-theme="september-yellow"] .btn-primary:hover,
[data-theme="spring"] .btn-primary:hover,
[data-theme="student-day"] .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px var(--accent-glow) !important;
}

/* ── Banner Conmemorativo de la Temática Activa ── */
.theme-season-banner {
  background: var(--theme-banner-bg, rgba(88, 101, 242, 0.12));
  border: 1px solid var(--theme-banner-border, rgba(88, 101, 242, 0.3));
  border-radius: var(--radius-xl, 16px);
  padding: 14px 20px;
  margin: var(--space-4, 16px) auto;
  max-width: 1200px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(12px);
  position: relative;
  overflow: hidden;
  z-index: 10;
  animation: bannerSlideDown 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.theme-season-banner::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: var(--theme-gradient, linear-gradient(90deg, #5865f2, #9b59b6));
}

.theme-banner__content {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
}

.theme-banner__icon {
  font-size: 2rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
  animation: pulseIcon 3s ease-in-out infinite;
}

.theme-banner__title {
  font-size: 1rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.theme-banner__subtitle {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.4;
}

.theme-banner__badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  background: var(--theme-badge-bg, rgba(255, 255, 255, 0.2));
  color: var(--theme-badge-text, #ffffff);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.theme-banner__close {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: color 0.2s, background 0.2s;
  line-height: 1;
}

.theme-banner__close:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.15);
}

/* ── Botón Selector de Temática en Header (Theme Switcher UI) ── */
.theme-switcher-dropdown {
  position: relative;
  display: inline-block;
}

.theme-switcher-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--text-primary, #f2f3f5);
  padding: 8px 14px;
  border-radius: 20px;
  font-size: 0.84rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.25s ease;
  backdrop-filter: blur(8px);
}

.theme-switcher-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: var(--accent);
  box-shadow: 0 4px 14px var(--accent-glow);
  transform: translateY(-1px);
}

.theme-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 270px;
  background: rgba(26, 27, 30, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 8px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(16px);
  z-index: 999;
  display: none;
  flex-direction: column;
  gap: 4px;
  animation: themeMenuFade 0.2s ease;
}

.theme-menu.show {
  display: flex;
}

.theme-menu-header {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted, #80848e);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 6px 10px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 4px;
}

.theme-option-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--text-primary, #f2f3f5);
  font-size: 0.88rem;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  width: 100%;
  text-align: left;
}

.theme-option-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.theme-option-btn.active {
  background: var(--accent-dim, rgba(88, 101, 242, 0.2));
  color: #ffffff;
  font-weight: 700;
}

.theme-option-btn .theme-option-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.theme-option-btn .theme-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
}

/* Color Dots */
.dot-auto { background: linear-gradient(135deg, #f0b232, #10b981, #f97316); }
.dot-yellow { background: linear-gradient(135deg, #f0b232, #ffd700, #5865f2); }
.dot-spring { background: linear-gradient(135deg, #10b981, #c084fc, #38bdf8); }
.dot-student { background: linear-gradient(135deg, #f97316, #2563eb, #eab308); }
.dot-default { background: linear-gradient(135deg, #5865f2, #00c6ff, #9b59b6); }

/* ── Animaciones ── */
@keyframes bannerSlideDown {
  from { opacity: 0; transform: translateY(-16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pulseIcon {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

@keyframes themeMenuFade {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Adaptabilidad Responsive ── */
@media (max-width: 640px) {
  .theme-season-banner {
    position: relative;
    padding: 10px 38px 10px 12px;
    margin: 8px 12px;
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    flex-direction: row;
    align-items: center;
  }

  .theme-banner__content {
    gap: 10px;
    align-items: center;
  }

  .theme-banner__icon {
    width: 34px;
    height: 34px;
    font-size: 1.2rem;
    flex-shrink: 0;
  }

  .theme-banner__title {
    font-size: 0.88rem;
    line-height: 1.25;
    margin-bottom: 2px;
  }

  .theme-banner__badge {
    display: none !important; /* Es redundante en mobile */
  }

  .theme-banner__subtitle {
    font-size: 0.78rem;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.8);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .theme-banner__close {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 6px;
    font-size: 1rem;
    opacity: 0.8;
  }
}