/* ═══════════════════════════════════════════════
   VARIABLES DE TEMA — Coco Galaxy
   ═══════════════════════════════════════════════ */
:root {
  /* Colores de tema claro */
  --nav-bg:              rgba(255, 255, 255, 0.92);
  --nav-border:          rgba(0, 0, 0, 0.08);
  --nav-text:            #1a1a2e;
  --nav-link:            #5a5a7a;
  --nav-link-hover-bg:   rgba(0, 0, 0, 0.05);
  --btn-primary:         #ff3d6b;
  --btn-primary-shadow:  rgba(255, 61, 107, 0.35);

  /* Página */
  --page-bg:             #ffffff;
  --page-bg-gradient:    linear-gradient(135deg, #ffffff 0%, #fdf0f5 50%, #f0f0ff 100%);
  --text-primary:        #1a1a2e;
  --text-secondary:      #5a5a7a;
  --btn-secondary-bg:    transparent;
  --btn-secondary-border: #1a1a2e;
  --btn-secondary-text:  #1a1a2e;

  /* Tarjetas */
  --card-bg:             #ffffff;
  --card-shadow:         rgba(0, 0, 0, 0.09);
}

[data-theme="dark"] {
  --nav-bg:              rgba(13, 13, 26, 0.92);
  --nav-border:          rgba(255, 255, 255, 0.08);
  --nav-text:            #ffffff;
  --nav-link:            #a0a0c0;
  --nav-link-hover-bg:   rgba(255, 255, 255, 0.07);
  --btn-primary:         #7c3aed;
  --btn-primary-shadow:  rgba(124, 58, 237, 0.4);

  --page-bg:             #0d0d1a;
  --page-bg-gradient:    linear-gradient(135deg, #0d0d1a 0%, #12122a 50%, #1a1030 100%);
  --text-primary:        #ffffff;
  --text-secondary:      #a0a0c0;
  --btn-secondary-bg:    transparent;
  --btn-secondary-border: rgba(255, 255, 255, 0.3);
  --btn-secondary-text:  #ffffff;

  /* Tarjetas */
  --card-bg:             #16162e;
  --card-shadow:         rgba(0, 0, 0, 0.4);
}

/* ── Reset mínimo ─────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--page-bg-gradient);
  min-height: 100vh;
  color: var(--text-primary);
  transition: background 0.3s, color 0.3s;
}

/* Navbar styles moved to navbar.css */

.btn {
  background-color: #ff3d6b;
  color: white;
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  text-decoration: none;
}

.btn2 {
  background-color: green;
  color: white;
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  text-decoration: none;
}