/* ══════════════════════════════════════════════════════
   COUPLE SPACE — AURA GLASS DESIGN SYSTEM
   Base: dark ultravioleta con orbes y glassmorphism
   Paletas: aurora (default), rose, ocean, ember, forest
══════════════════════════════════════════════════════ */

/* ── PALETA: AURORA (violeta/cian) ── */
:root,
[data-palette="aurora"] {
  --orb1: #7C3AED88;
  --orb2: #06B6D466;
  --orb3: #F472B655;
  --accent:       #A78BFA;
  --accent-light: rgba(167,139,250,0.15);
  --accent-dark:  #C4B5FD;
  --success:      #34D399;
  --rose:         #F472B6;
  --rose-light:   rgba(244,114,182,0.12);
}

/* ── PALETA: ROSE (rubí/melocotón) ── */
[data-palette="rose"] {
  --orb1: #E11D4888;
  --orb2: #FB923C66;
  --orb3: #FDE04755;
  --accent:       #FB7185;
  --accent-light: rgba(251,113,133,0.15);
  --accent-dark:  #FECDD3;
  --success:      #34D399;
  --rose:         #FB923C;
  --rose-light:   rgba(251,146,60,0.12);
}

/* ── PALETA: OCEAN (azul eléctrico/turquesa) ── */
[data-palette="ocean"] {
  --orb1: #0EA5E988;
  --orb2: #10B98166;
  --orb3: #6366F155;
  --accent:       #38BDF8;
  --accent-light: rgba(56,189,248,0.15);
  --accent-dark:  #BAE6FD;
  --success:      #10B981;
  --rose:         #818CF8;
  --rose-light:   rgba(129,140,248,0.12);
}

/* ── PALETA: EMBER (dorado/naranja fuego) ── */
[data-palette="ember"] {
  --orb1: #D9770688;
  --orb2: #EAB30866;
  --orb3: #F9731655;
  --accent:       #FBBF24;
  --accent-light: rgba(251,191,36,0.15);
  --accent-dark:  #FDE68A;
  --success:      #34D399;
  --rose:         #F97316;
  --rose-light:   rgba(249,115,22,0.12);
}

/* ── PALETA: FOREST (esmeralda/lima) ── */
[data-palette="forest"] {
  --orb1: #05966988;
  --orb2: #65A30D66;
  --orb3: #0D948855;
  --accent:       #34D399;
  --accent-light: rgba(52,211,153,0.15);
  --accent-dark:  #A7F3D0;
  --success:      #84CC16;
  --rose:         #2DD4BF;
  --rose-light:   rgba(45,212,191,0.12);
}

/* ── CORE TOKENS ── */
:root {
  --bg-app:        #060612;
  --bg-card:       rgba(255,255,255,0.05);
  --bg-card-solid: #0F0F1E;

  --text-main:  #F0EEFF;
  --text-soft:  #C4BFDF;
  --text-muted: #7A7499;

  --border:        rgba(255,255,255,0.10);
  --border-strong: rgba(255,255,255,0.18);

  --shadow-sm: 0 2px 12px rgba(0,0,0,0.3);
  --shadow-md: 0 8px 32px rgba(0,0,0,0.4);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.6);

  --glass-bg:     rgba(255,255,255,0.06);
  --glass-border: rgba(255,255,255,0.12);
  --glass-blur:   20px;

  --header-bg:  rgba(6,6,18,0.8);
  --overlay-bg: rgba(0,0,0,0.65);

  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  --radius-sm: 14px;
  --radius-md: 20px;
  --radius-lg: 28px;
}

/* ── RESET ── */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
textarea { resize:none; }

/* ── BODY + ORBES ── */
body {
  font-family: 'Space Grotesk', 'DM Sans', sans-serif;
  background: var(--bg-app);
  color: var(--text-main);
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

body::before,
body::after {
  content: '';
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  transition: background 0.8s ease;
}
body::before {
  width: 700px; height: 700px;
  background: radial-gradient(circle, var(--orb1) 0%, transparent 70%);
  top: -250px; left: -200px;
}
body::after {
  width: 550px; height: 550px;
  background: radial-gradient(circle, var(--orb2) 0%, transparent 70%);
  bottom: -180px; right: -150px;
}

.app-layout::before {
  content: '';
  position: fixed;
  width: 450px; height: 450px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--orb3) 0%, transparent 70%);
  top: 40%; right: 15%;
  pointer-events: none;
  z-index: 0;
  transition: background 0.8s ease;
}

/* ── LAYOUT ── */
header { display: none; }

.app-layout {
  display: flex;
  min-height: 100vh;
  position: relative;
  z-index: 1;
}

/* ── SIDEBAR ── */
.sidebar {
  width: 240px;
  background: rgba(6,6,18,0.75);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-right: 1px solid var(--glass-border);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; bottom: 0; left: 0;
  z-index: 100;
  padding: 28px 14px 36px;
}

.sidebar-header { margin-bottom: 36px; padding: 0 10px; }

.logo {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.5px;
  color: var(--text-main);
}
.logo span {
  color: var(--accent);
  font-style: italic;
  font-weight: 400;
  transition: color 0.6s ease;
}

.sidebar-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }

.nav-item {
  padding: 11px 14px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-soft);
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: all var(--transition-fast);
  position: relative;
}
.nav-item:hover { background: rgba(255,255,255,0.06); color: var(--text-main); }
.nav-item.active {
  background: var(--accent-light);
  color: var(--accent-dark);
  font-weight: 600;
}
.nav-item.active::before {
  content: '';
  position: absolute;
  left: 0; top: 20%; bottom: 20%;
  width: 3px;
  background: var(--accent);
  border-radius: 0 4px 4px 0;
  transition: background 0.6s ease;
}

.sidebar-footer {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.settings-trigger {
  background: transparent;
  border: 1px solid var(--border);
  padding: 11px 14px;
  border-radius: 14px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-soft);
  transition: all 0.2s;
  text-align: left;
  font-family: 'Space Grotesk', sans-serif;
}
.settings-trigger:hover {
  background: rgba(255,255,255,0.06);
  border-color: var(--border-strong);
  color: var(--text-main);
}

.couple-badge {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: var(--accent-light);
  border-radius: 14px;
  cursor: pointer;
  font-size: 13px; font-weight: 500;
  color: var(--accent-dark);
  transition: all 0.2s;
}
.couple-badge .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  flex-shrink: 0;
  transition: background 0.6s ease, box-shadow 0.6s ease;
}

/* ── MAIN CONTENT ── */
.main-content {
  flex: 1;
  margin-left: 240px;
  padding: 40px 36px 100px;
  max-width: 1200px;
  position: relative;
  z-index: 1;
}

/* ── MOBILE HEADER ── */
.mobile-header {
  display: none; align-items: center; gap: 16px;
  padding: 14px 20px;
  background: rgba(6,6,18,0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--glass-border);
  position: sticky; top: 0; z-index: 150;
}
.menu-toggle {
  background: transparent; border: none;
  font-size: 22px; color: var(--text-main);
  cursor: pointer; padding: 4px;
}
.sidebar-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(4px);
  z-index: 180;
  animation: fadeIn 0.3s ease;
}

@media (max-width: 850px) {
  .mobile-header { display: flex; }
  .sidebar {
    position: fixed; top: 0; bottom: 0;
    left: -260px; width: 260px;
    z-index: 200;
    transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
    box-shadow: 10px 0 40px rgba(0,0,0,0.5);
  }
  .sidebar.open { transform: translateX(260px); }
  .sidebar.open + .sidebar-overlay,
  #sidebar-overlay.show { display: block; }
  .main-content { margin-left: 0; padding: 20px 16px 80px; }
  .sidebar-header, .sidebar-footer { display: flex; }
}

/* ── ANIMATIONS ── */
@keyframes fadeIn   { from { opacity:0; }              to { opacity:1; } }
@keyframes fadeInUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }

[id^="section-"] { animation: fadeInUp var(--transition-slow); }

/* ── SETUP SCREENS ── */
.setup-card {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 40px 36px;
  max-width: 420px;
  width: calc(100% - 40px);
  text-align: center;
  box-shadow: var(--shadow-lg);
}
.setup-icon { font-size: 48px; display: block; margin-bottom: 20px; }
.setup-card h1 {
  font-family: 'Fraunces', serif;
  font-size: 26px; font-weight: 600;
  margin-bottom: 10px; color: var(--text-main);
}
.setup-tabs {
  display: flex;
  background: rgba(255,255,255,0.05);
  border-radius: 100px; padding: 4px;
  margin-bottom: 24px;
}
.setup-tab {
  flex: 1; padding: 10px; border-radius: 100px;
  border: none; background: transparent;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px; font-weight: 500;
  color: var(--text-soft); cursor: pointer;
  transition: all 0.2s;
}
.setup-tab.active {
  background: var(--accent-light);
  color: var(--accent-dark); font-weight: 600;
}
.setup-form { display: flex; flex-direction: column; gap: 14px; }
.input-group { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.input-group label {
  font-size: 12px; font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.code-display {
  background: var(--accent-light);
  border: 1px solid var(--accent);
  border-radius: 16px; padding: 20px;
  cursor: pointer; animation: fadeIn 0.4s;
}
.copy-hint { font-size: 11px; color: var(--text-muted); margin-top: 4px; }