/* =========================================================
   THEMES - COMPRE (Neon, Dark Purple, Light Soft, Amber)
   ========================================================= */

/* Temas base */
:root {
  --accent: #00cc88;
  --accent-soft: rgba(0,204,136,0.15);
  --bg-deep: #0a0c14;
  --bg-panel: rgba(18,22,32,0.92);
  --bg-card: #141824;
  --text-main: #eef3fc;
  --text-soft: #a6b0c8;
  --text-muted: #6f7a98;
  --border-soft: rgba(255,255,255,0.04);
  --border-neon: rgba(0,204,136,0.25);
}

body[data-theme="dark-purple"] {
  --accent: #b300ff;
  --border-neon: rgba(179,0,255,0.3);
}

body[data-theme="light-soft"] {
  --accent: #0088cc;
  --bg-deep: #f5f7fc;
  --bg-panel: rgba(255,255,255,0.92);
  --bg-card: #ffffff;
  --text-main: #1a1e2a;
  --text-soft: #4a5168;
  --text-muted: #7a819c;
  --border-soft: rgba(0,0,0,0.06);
  --border-neon: rgba(0,136,204,0.2);
}

body[data-theme="amber"] {
  --accent: #ffaa00;
  --border-neon: rgba(255,170,0,0.3);
}

/* =========================================================
   BOTÓN DE CONFIGURACIÓN - FIJO ABAJO A LA IZQUIERDA
   ========================================================= */


/* En móvil */
@media (max-width: 768px) {
}

/* =========================================================
   ESTILOS ADICIONALES PARA EL HEADER
   ========================================================= */
.menu-btn {
  position: fixed;
  top: 25px;
  left: 25px;
  font-size: 28px;
  background: var(--bg-panel);
  border: 1px solid var(--accent);
  border-radius: 50%;
  width: 50px;
  height: 50px;
  color: var(--text-main);
  cursor: pointer;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 0 15px var(--accent);
}

.weather-widget {
  position: fixed;
  top: 25px;
  right: 25px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-panel);
  backdrop-filter: blur(8px);
  border: 1px solid var(--accent);
  padding: 8px 18px;
  border-radius: 60px;
  cursor: pointer;
  z-index: 100;
  transition: all 0.3s ease;
}

.weather-widget:hover {
  transform: scale(1.03);
  box-shadow: 0 0 15px var(--accent);
}

/* =========================================================
   RESPONSIVE DEL BOTÓN DE CONFIGURACIÓN
   ========================================================= */
@media (max-width: 480px) {
}