/* --- TEMAS DE COLOR (SETS) - VERSIÓN 2.0 --- */

/* Tema 1: Atardecer Sereno */
.theme-1 {
  --primary-color: #fff0e5; /* Pastel melocotón claro */
  --secondary-color: #ffe0d0; /* Pastel melocotón */
  --text-color: #5d4037; /* Marrón oscuro y sólido */
  --accent-color: #ff6f61; /* Coral sólido */
  --btn-primary-bg: #ff6f61;
  --btn-primary-text: #ffffff;
  --btn-secondary-bg: #4a7c59; /* Verde musgo sólido */
  --btn-secondary-text: #ffffff;
}

/* Tema 2: Noche Élfica */
.theme-2 {
  --primary-color: #1a2238; /* Azul medianoche profundo */
  --secondary-color: #2c3a58; /* Azul grisáceo oscuro */
  --text-color: #aec6f0; /* Azul pastel claro */
  --accent-color: #7fffd4; /* Aguamarina sólida */
  --btn-primary-bg: #7fffd4;
  --btn-primary-text: #1a2238;
  --btn-secondary-bg: #435b91; /* Índigo desaturado */
  --btn-secondary-text: #aec6f0;
}

/* Tema 3: Jardín de Rosas */
.theme-3 {
  --primary-color: #fff5f5; /* Rosa pastel muy claro */
  --secondary-color: #ffe4e1; /* Rosa pastel "Misty Rose" */
  --text-color: #5a3a49; /* Ciruela oscuro y sólido */
  --accent-color: #d9467c; /* Magenta sólido */
  --btn-primary-bg: #d9467c;
  --btn-primary-text: #ffffff;
  --btn-secondary-bg: #77a07f; /* Verde salvia sólido */
  --btn-secondary-text: #ffffff;
}

/* Tema 4: Niebla del Bosque */
.theme-4 {
  --primary-color: #e0eae4; /* Verde grisáceo pastel */
  --secondary-color: #c8d5cb; /* Verde salvia pastel */
  --text-color: #2f4f4f; /* Pizarra oscuro y sólido */
  --accent-color: #8b4513; /* Marrón silla de montar sólido */
  --btn-primary-bg: #8b4513;
  --btn-primary-text: #ffffff;
  --btn-secondary-bg: #2f4f4f;
  --btn-secondary-text: #ffffff;
}

/* Tema 5: Cielo de Lavanda */
.theme-5 {
  --primary-color: #f3f0ff; /* Lavanda pastel muy claro */
  --secondary-color: #e6e0ff; /* Lavanda pastel */
  --text-color: #4c2a85; /* Púrpura oscuro y sólido */
  --accent-color: #6a4c93; /* Violeta sólido */
  --btn-primary-bg: #6a4c93;
  --btn-primary-text: #ffffff;
  --btn-secondary-bg: #ffd700; /* Oro sólido */
  --btn-secondary-text: #4c2a85;
}

/* Tema 6: Océano Profundo */
.theme-6 {
  --primary-color: #0d2a34; /* Teal muy oscuro */
  --secondary-color: #144552; /* Teal oscuro */
  --text-color: #d1fff6; /* Cian pastel claro */
  --accent-color: #ff7f50; /* Coral sólido */
  --btn-primary-bg: #ff7f50;
  --btn-primary-text: #0d2a34;
  --btn-secondary-bg: #1e5f74; /* Azul verdoso sólido */
  --btn-secondary-text: #d1fff6;
}

/* Tema 7: Papiro Antiguo */
.theme-7 {
  --primary-color: #fbf5e6; /* Amarillo pergamino pastel */
  --secondary-color: #f5eedc; /* Beige pastel */
  --text-color: #5c4033; /* Sepia oscuro y sólido */
  --accent-color: #d4af37; /* Oro viejo sólido */
  --btn-primary-bg: #5c4033;
  --btn-primary-text: #ffffff;
  --btn-secondary-bg: #800000; /* Marrón sólido */
  --btn-secondary-text: #ffffff;
}

/* Tema 8: Cerezo en Flor */
.theme-8 {
  --primary-color: #fef9f8; /* Blanco con toque rosado */
  --secondary-color: #feeeee; /* Rosa sakura pastel */
  --text-color: #36454f; /* Carbón sólido */
  --accent-color: #fea3b4; /* Rosa sólido */
  --btn-primary-bg: #fea3b4;
  --btn-primary-text: #36454f;
  --btn-secondary-bg: #8b575c; /* Marrón rosado sólido */
  --btn-secondary-text: #ffffff;
}

/* --- CLASES DE UTILIDAD QUE USAN LAS VARIABLES --- */
body {
  transition: background-color 0.3s, color 0.3s;
}

#card-container {
  border-radius: 20px;
}
#display-mote {
  color: var(--accent-color);
}
.primary-bg {
  background-color: var(--primary-color);
}
.secondary-bg {
  background-color: var(--secondary-color);
}
.text-color {
  color: var(--text-color);
}
.border-secondary {
  border-color: var(--secondary-color);
}
.border-accent {
  border-color: var(--accent-color);
}
.hover-bg:hover {
  background-color: var(--secondary-color);
}

.btn-primary {
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
}
.btn-secondary {
  background-color: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
}
.footer-link {
  color: var(--text-color);
}
.footer-link:hover {
  color: var(--accent-color);
}

.form-input {
  background-color: var(--secondary-color);
  color: var(--text-color);
  border: 1px solid transparent;
  border-radius: 0.375rem;
  padding: 0.5rem;
  width: 100%;
}
.form-input:focus {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 2px var(--accent-color);
}

.info-box {
  background-color: var(--primary-color);
  border-radius: 0.5rem;
  padding: 0.75rem;
}
.info-box p {
  font-size: 1.2rem;
}
.info-title {
  text-align: center;
  color: white;
  font-weight: bold;
  font-family: var(--font-title);
  margin-bottom: 0.25rem;
  font-size: 1.4rem;
  padding: 0.2rem 0.5rem;
  background: var(--accent-color);
  width: fit-content;
  border-top-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.character-image {
  width: 35%;
}

.character-info {
  width: 65%;
}

/* Sidebar móvil */
@media (max-width: 767px) {
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 300px;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
    border-right-width: 1px;
  }
  .sidebar.open {
    transform: translateX(0);
  }
}