:root {
  color-scheme: light;
  --background-start: #F2F3FF;
  --background-end: #FFFBF3;
  --border: rgba(30, 30, 35, 0.09);
  --text-primary: #111113;
  --text-secondary: #6f6f76;
  --text-muted: #97979e;
  --success: #28a745;
  --danger: #e5484d;
  --radius-medium: 999px;
  --radius-small: 999px;
  --transition: 180ms ease;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html {
  min-height: 100%;
  background: #EEF0FF;
}

body {
  min-height: 100vh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.42), transparent 46%),
    linear-gradient(180deg, #EEF0FF 0%, #F5F6FF 30%, #FCFBF7 72%, #FFF8EE 100%);
  background-size: 100% 128%;
  background-position: 50% 0%;
  background-attachment: fixed;
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  animation: aura-background-breathe 45s ease-in-out infinite alternate;
}

button, input {
  font: inherit;
}

.app-shell {
  width: min(100%, 420px);
}

.eyebrow {
  margin: 0 0 34px;
  color: var(--text-secondary);
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.22em;
  text-align: center;
  text-transform: uppercase;
}

.control-section {
  position: relative;
  z-index: 1;
}

.control-section + .control-section {
  margin-top: 30px;
}

.section-title {
  margin: 0 0 12px;
  color: var(--text-secondary);
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

/* === MUNDOS (Botonera unificada) === */
.world-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 20px;
  row-gap: 30px;
}

.world-button, .connect-button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--radius-medium);
  border: 1px solid rgba(255, 255, 255, 0.72);
  cursor: pointer;
  backdrop-filter: blur(22px) saturate(175%) contrast(104%);
  -webkit-backdrop-filter: blur(22px) saturate(175%) contrast(104%);
  background-image: linear-gradient(125deg, 
    rgba(236, 238, 255, 0.88) 0%, rgba(239, 239, 253, 0.87) 20%, rgba(255, 248, 234, 0.86) 28%,
    rgba(255, 248, 234, 0.86) 43%, rgba(239, 239, 253, 0.87) 49%, rgba(236, 238, 255, 0.88) 50%,
    rgba(236, 238, 255, 0.88) 68%, rgba(255, 248, 234, 0.86) 78%, rgba(255, 248, 234, 0.86) 93%,
    rgba(236, 238, 255, 0.88) 100%);
  background-size: 500% 100%;
  background-position: 0% 50%;
  animation: aura-seamless-flow-90-10 9s linear infinite;
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.98), inset 0 -1px 0 rgba(255, 255, 255, 0.3),
              0 4px 10px rgba(42, 47, 70, 0.12), 0 16px 30px rgba(42, 47, 70, 0.14);
  transition: transform var(--transition), border-color var(--transition), box-shadow 480ms cubic-bezier(0.22, 1, 0.36, 1);
}

.world-button {
  min-height: 76px;
  padding: 16px 20px;
  color: var(--text-secondary);
  font-size: 0.76rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.world-button.is-active {
  color: #171820;
  border-color: rgba(92, 98, 124, 0.46);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.98), inset 0 0 0 1px rgba(110,120,150,.12),
              0 0 18px 8px rgba(242,251,255,.90), 
              0 0 42px 16px rgba(242,251,255,.52),
              0 0 64px 24px rgba(242,251,255,.24);
  background-image: linear-gradient(125deg, 
    rgba(230, 233, 255, 1) 0%, rgba(241, 238, 247, 0.97) 22%, rgba(255, 245, 224, 0.98) 28%,
    rgba(255, 245, 224, 0.98) 43%, rgba(241, 238, 247, 0.97) 48%, rgba(230, 233, 255, 1) 50%,
    rgba(230, 233, 255, 1) 68%, rgba(255, 245, 224, 0.98) 78%, rgba(255, 245, 224, 0.98) 93%,
    rgba(230, 233, 255, 1) 100%);
}

/* === PALETAS DE COLOR === */
.palette-row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 4px 10px 0;
}

.palette-option {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 9px;
}

.palette-button {
  position: relative;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.66);
  background: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.96), 0 4px 10px rgba(31, 38, 63, 0.08);
  transition: transform var(--transition), border-color var(--transition), box-shadow 480ms cubic-bezier(0.22, 1, 0.36, 1);
}

.palette-button::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: inherit;
  background: var(--palette-gradient);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.42), inset 0 -6px 14px rgba(0, 0, 0, 0.1);
}

.palette-button[data-value="0"] { --palette-gradient: linear-gradient(135deg, #7a7aff 0%, #bd7aff 51%, #7afffd 100%); }
.palette-button[data-value="1"] { --palette-gradient: linear-gradient(135deg, #ff7a95 0%, #ff7ae2 34%, #7ad3ff 68%, #fffd7a 100%); }
.palette-button[data-value="2"] { --palette-gradient: linear-gradient(135deg, #7aff9e 0%, #bd7aff 34%, #ff7a7a 68%, #7a95ff 100%); }

.palette-button.is-active {
  border-color: rgba(69, 75, 100, 0.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.96), 0 0 0 4px rgba(255, 255, 255, 0.48),
              0 0 18px 8px rgba(242,251,255,.90), 
              0 0 42px 16px rgba(242,251,255,.52),
              0 0 64px 24px rgba(242,251,255,.24);
}

.palette-label {
  color: var(--text-muted);
  font-size: 0.64rem;
  font-weight: 600;
  transition: color var(--transition);
}
.palette-option:has(.palette-button.is-active) .palette-label {
  color: var(--text-primary);
}

/* ======================================================== 
   EFECTOS UNIFICADOS (HOVER Y ACTIVE PARA TODOS LOS BOTONES) 
   ======================================================== */

.world-button:hover, 
.connect-button:hover, 
.palette-button:hover {
  transform: translateY(-2px) scale(1.02);
  border-color: rgba(255, 255, 255, 0.94);
}

.world-button:active, 
.world-button.is-active:active, 
.connect-button:active,
.palette-button:active, 
.palette-button.is-active:active {
  transition-duration: 110ms !important;
  transform: scale(0.97) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 
              0 0 18px 8px rgba(242,251,255,.95),
              0 0 42px 16px rgba(242,251,255,.55), 
              0 0 64px 24px rgba(242,251,255,.28) !important;
}

.world-button.is-active, 
.palette-button.is-active {
  transition-duration: 480ms;
}

/* === SPOTIFY === */
.spotify-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.spotify-input-shell {
  position: relative;
  width: 100%;
  height: 50px;
}

.spotify-input {
  width: 100%;
  height: 100%;
  padding: 0 15px;
  outline: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  background: rgba(255, 255, 255, 0.76);
  color: var(--text-primary);
  font-size: 0.88rem;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}

.spotify-input::placeholder { color: transparent !important; opacity: 0 !important; }
.spotify-input:focus { border-color: rgba(17, 17, 17, 0.26); background: #ffffff; box-shadow: 0 0 0 4px rgba(17, 17, 17, 0.045); }

.spotify-placeholder {
  position: absolute;
  top: 0; left: 15px; right: 15px; bottom: 0;
  display: flex; align-items: center;
  color: #9b9ba2; font-size: 0.88rem; pointer-events: none;
  transition: opacity 420ms ease, filter 420ms ease, transform 420ms ease;
}
.spotify-placeholder.is-leaving { opacity: 0; filter: blur(5px); transform: translateY(-1px) scale(0.985); }
.spotify-placeholder.is-entering { opacity: 0; filter: blur(5px); transform: translateY(1px) scale(1.015); }
.spotify-placeholder.is-hidden { opacity: 0; filter: blur(4px); }

.connect-button {
  height: 50px;
  padding: 0 18px;
  color: #30333d;
  font-size: 0.82rem;
  font-weight: 700;
}

/* === MENSAJES DEL SISTEMA === */
.message {
  min-height: 18px;
  margin: 10px 0 0;
  color: var(--text-muted);
  font-size: 0.7rem;
  line-height: 1.45;
  text-align: center;
}

/* === ESTADOS DE CONEXIÓN === */
.connection-status {
  display: flex; justify-content: center; align-items: center; gap: 8px;
  margin-top: 28px; color: var(--text-muted); font-size: 0.72rem; font-weight: 560;
}
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 10px rgba(229, 72, 77, 0.3); transition: background var(--transition); }
.connection-status.is-connected .status-dot { background: var(--success); box-shadow: 0 0 10px rgba(40, 167, 69, 0.3); }

/* === RUIDO DE CRISTAL (GLASS NOISE) === */
.button-label { position: relative; z-index: 7; pointer-events: none; }
.glass-noise {
  position: absolute; inset: 0; z-index: 6; pointer-events: none; border-radius: inherit;
  opacity: 0.075; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' seed='11' stitchTiles='stitch'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='.18' intercept='.41'/%3E%3CfeFuncG type='linear' slope='.18' intercept='.41'/%3E%3CfeFuncB type='linear' slope='.18' intercept='.41'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}
.palette-button > .glass-noise { inset: 6px; border-radius: 50%; opacity: 0.065; }

/* === KEYFRAMES === */
@keyframes aura-background-breathe { 0% { background-position: 50% 0%; } 50% { background-position: 50% 48%; } 100% { background-position: 50% 100%; } }
@keyframes aura-seamless-flow-90-10 { from { background-position: 0% 50%; } to { background-position: 62.5% 50%; } }

/* === ACCESIBILIDAD (REDUCED MOTION CENTRALIZADO) === */
@media (max-width: 420px) {
  body { align-items: flex-start; padding: 24px 14px; }
  .spotify-control { grid-template-columns: 1fr; }
  .palette-row { gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation: none !important; }
  .spotify-placeholder { transform: none !important; filter: none !important; }
  .world-button, .connect-button { background-position: 50% 50%; }
}

/* === SPOTIFY PLAYER / SECOND STATE === */
.spotify-module { position: relative; width: 100%; }
.spotify-link-state, .spotify-player-state {
  width: 100%;
  transition: opacity 420ms cubic-bezier(.22,1,.36,1), transform 420ms cubic-bezier(.22,1,.36,1), filter 420ms cubic-bezier(.22,1,.36,1);
}
.spotify-link-state.is-exiting, .spotify-player-state.is-exiting {
  opacity: 0; transform: translateY(-4px) scale(.985); filter: blur(6px); pointer-events: none;
}
.spotify-link-state.is-hidden { display: none; }
.spotify-player-state[aria-hidden="true"] { display: none; }
.spotify-player-state.is-entering { display: block; opacity: 0; transform: translateY(5px) scale(.985); filter: blur(6px); }

.spotify-player-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,1fr) 116px;
  gap: 18px;
  min-height: 164px;
  padding: 18px 18px 18px 20px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.76);
  border-radius: 28px;
  background: linear-gradient(128deg, rgba(238,240,255,.82) 0%, rgba(247,246,251,.74) 46%, rgba(255,248,234,.8) 100%);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.98), inset 0 -1px 0 rgba(255,255,255,.34), 0 8px 20px rgba(42,47,70,.08), 0 22px 42px rgba(42,47,70,.10);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
}
.spotify-player-card::before {
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background: radial-gradient(115% 80% at 18% 0%, rgba(255,255,255,.78) 0%, rgba(255,255,255,.20) 36%, transparent 65%);
}
.spotify-player-info, .spotify-disc-wrap { position:relative; z-index:2; }
.spotify-player-info { display:flex; min-width:0; flex-direction:column; justify-content:space-between; padding:2px 0; }
.spotify-now-label { margin:0; color:#31343f; font-size:.84rem; font-weight:700; }
.spotify-source-label { margin:4px 0 0; overflow:hidden; color:var(--text-muted); font-size:.65rem; font-weight:560; white-space:nowrap; text-overflow:ellipsis; }

.spotify-progress { position:relative; height:18px; margin:12px 0 10px; }
.spotify-progress-track, .spotify-progress-fill { position:absolute; top:50%; left:0; height:3px; transform:translateY(-50%); border-radius:999px; }
.spotify-progress-track { right:0; background:rgba(54,59,75,.10); }
.spotify-progress-fill { width:38%; background:rgba(54,59,75,.58); }
.spotify-progress-thumb { position:absolute; top:50%; left:38%; width:8px; height:8px; transform:translate(-50%,-50%); border-radius:50%; background:rgba(255,255,255,.96); box-shadow:0 0 0 1px rgba(54,59,75,.12),0 2px 6px rgba(42,47,70,.18); }

.spotify-player-controls { display:flex; align-items:center; gap:10px; }
.spotify-control-button {
  display:inline-flex; width:42px; height:42px; align-items:center; justify-content:center; padding:0;
  border:1px solid rgba(255,255,255,.76); border-radius:50%;
  background:linear-gradient(145deg, rgba(255,255,255,.72), rgba(240,242,255,.42));
  color:#242731; cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.96),0 4px 10px rgba(42,47,70,.09),0 10px 20px rgba(42,47,70,.07);
  transition:transform var(--transition),box-shadow 360ms cubic-bezier(.22,1,.36,1),background var(--transition);
}
.spotify-control-button:hover { transform:translateY(-2px) scale(1.025); }
.spotify-control-button:active { transform:scale(.95); box-shadow:inset 0 1px 0 rgba(255,255,255,.96),0 0 14px 5px rgba(242,251,255,.90),0 0 30px 10px rgba(242,251,255,.44); }
.spotify-control-button svg { width:19px; height:19px; fill:currentColor; }
.spotify-play-button { width:48px; height:48px; }
.spotify-icon-pause { display:none; }
.spotify-play-button.is-playing .spotify-icon-play { display:none; }
.spotify-play-button.is-playing .spotify-icon-pause { display:block; }

.spotify-disc-wrap { display:flex; align-items:center; justify-content:center; }
.spotify-disc {
  position:relative; width:110px; height:110px; border-radius:50%;
  background:
    repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.045) 0 1px, rgba(0,0,0,.08) 1px 3px),
    radial-gradient(circle at 45% 35%, #252735 0%, #151722 48%, #090a10 76%, #05060a 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10),inset 0 0 26px rgba(255,255,255,.04),0 12px 26px rgba(37,40,59,.20);
  animation:aura-spotify-disc-spin 16s linear infinite;
}
.spotify-disc::after { content:""; position:absolute; inset:7px; border-radius:50%; background:conic-gradient(from 20deg,transparent,rgba(255,255,255,.12),transparent 20%,transparent 62%,rgba(255,255,255,.07),transparent 82%); mix-blend-mode:screen; }
.spotify-disc-groove { position:absolute; inset:18px; border:1px solid rgba(255,255,255,.07); border-radius:50%; box-shadow:0 0 0 7px rgba(255,255,255,.014),0 0 0 15px rgba(255,255,255,.010); }
.spotify-disc-center { position:absolute; top:50%; left:50%; z-index:3; display:flex; width:48px; height:48px; align-items:center; justify-content:center; transform:translate(-50%,-50%); border-radius:50%; background:linear-gradient(135deg,rgba(236,238,255,.98),rgba(255,248,234,.96)); box-shadow:0 0 0 5px rgba(255,255,255,.09),inset 0 1px 0 rgba(255,255,255,.92); }
.spotify-logo { width:29px; height:29px; }
.spotify-logo circle { fill:#1ED760; }
.spotify-logo path { fill:#0b0c0d; }

.spotify-change-button {
  display:block; margin:14px auto 0; padding:7px 14px; border:0; border-radius:999px;
  background:transparent; color:var(--text-muted); cursor:pointer; font-size:.67rem; font-weight:620;
  transition:color var(--transition),background var(--transition),transform var(--transition);
}
.spotify-change-button:hover { color:#40434d; background:rgba(255,255,255,.44); }
.spotify-change-button:active { transform:scale(.96); }

@keyframes aura-spotify-disc-spin { to { transform:rotate(360deg); } }

@media (max-width:420px) {
  .spotify-player-card { grid-template-columns:minmax(0,1fr) 96px; gap:12px; padding:16px; }
  .spotify-disc { width:92px; height:92px; }
  .spotify-disc-center { width:42px; height:42px; }
  .spotify-control-button { width:38px; height:38px; }
  .spotify-play-button { width:44px; height:44px; }
}