/* Skin Night Mode (opcional, Ajustes → Apariencia): la misma pantalla
   física compartida con Retro y Liquid Crystal (ver theme-retro.css para
   el show/hide + reorder), en negro puro con rojo — sin inventar
   frecuencia/batería/preset/reloj que la app no tiene, mismos datos
   reales que los otros dos skins alternativos. */

:root[data-theme="night"] {
  --bg: #000000;
  --frame-bg: #000000;
  --panel: #0a0505;
  --panel-2: #140808;
  --line: #3a1414;
  --text: #ff5252;
  --muted: #b35050;
  --blue: #ff3b3b;
  --violet: #ff3b3b;
  --green: #ff3b3b;
  --amber: #ff6a3b;
  --red: #ff3b3b;
  --gradient: linear-gradient(135deg, #ff3b3b, #b31d1d);
}

/* Todo negro con rojo: nada de blanco, ni en texto/íconos sobre fondos con
   --gradient (antes quedaban en #fff a propósito para contraste sobre el
   degradado violeta/azul del skin por defecto) ni en fotos reales
   (portadas de estación/podcast, avatar de bienvenida) — se tiñen de rojo
   en vez de ocultarse, para no perder la identidad visual de cada una. */
:root[data-theme="night"] .transport-button--main,
:root[data-theme="night"] .chip.is-active,
:root[data-theme="night"] .search-form button,
:root[data-theme="night"] .welcome-cta,
:root[data-theme="night"] .podcasts-entry-icon {
  color: #0a0000;
}

:root[data-theme="night"] .station-logo,
:root[data-theme="night"] #podcastPlayerArt,
:root[data-theme="night"] .podcast-detail-header img,
:root[data-theme="night"] .welcome-mascot,
:root[data-theme="night"] .brand-wordmark {
  filter: grayscale(1) sepia(1) saturate(6) hue-rotate(310deg) brightness(0.85) contrast(1.05);
}

:root[data-theme="night"] .phone-frame {
  background: radial-gradient(circle at 50% -10%, rgba(255, 59, 59, 0.1), transparent 34rem), var(--frame-bg);
}

:root[data-theme="night"] .now-playing-card {
  border: 1px solid #3a1414;
  border-radius: 10px;
  background-color: #050202;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.9);
}

:root[data-theme="night"] .retro-display,
:root[data-theme="night"] .spectrum-card {
  border: 1px solid #3a1414;
  border-radius: 10px;
  background-color: #050202;
}

:root[data-theme="night"] .retro-display {
  background-image: radial-gradient(circle, rgba(255, 59, 59, 0.16) 1px, transparent 1.5px);
  background-size: 7px 7px;
}

/* Tipografía tipo reloj de mesa de noche (Casio) en vez del
   monoespaciado genérico que usa Retro. */
:root[data-theme="night"] .led,
:root[data-theme="night"] .dot-matrix,
:root[data-theme="night"] .spectrum-card__header,
:root[data-theme="night"] .frequency-scale,
:root[data-theme="night"] #retroSpectrumState {
  font-family: 'Turret Road', "Courier New", ui-monospace, monospace;
  font-weight: 700;
}

:root[data-theme="night"] .led {
  font-size: 0.95rem;
}

:root[data-theme="night"] .dot-matrix--primary {
  font-size: clamp(1.2rem, 6.5vw, 1.8rem);
}

:root[data-theme="night"] .dot-matrix--secondary {
  font-size: clamp(0.9rem, 4vw, 1.1rem);
}

:root[data-theme="night"] .dot-matrix--minor {
  font-size: 0.82rem;
}

:root[data-theme="night"] .led {
  border: 1px solid #5c2020;
  border-radius: 3px;
  padding: 1px 6px;
}

:root[data-theme="night"] .led,
:root[data-theme="night"] .led-blue {
  color: #ff3b3b;
  text-shadow: 0 0 12px rgba(255, 59, 59, 0.7);
}

:root[data-theme="night"] .retro-status-light {
  border: 2px solid #5c2020;
  background: #1a0808;
}

:root[data-theme="night"] .retro-status-light.is-live {
  border-color: #ff3b3b;
  background: #ff3b3b;
  box-shadow: 0 0 12px rgba(255, 59, 59, 0.85);
}

:root[data-theme="night"] .dot-matrix {
  text-shadow: 0 0 12px currentColor;
}

:root[data-theme="night"] .dot-matrix--primary,
:root[data-theme="night"] .dot-matrix--secondary,
:root[data-theme="night"] .dot-matrix--minor {
  color: #ff3b3b;
}

:root[data-theme="night"] .spectrum-card__header,
:root[data-theme="night"] .frequency-scale {
  color: #a06060;
}

:root[data-theme="night"] #retroSpectrumState {
  color: #ff3b3b;
  text-shadow: 0 0 8px rgba(255, 59, 59, 0.8);
}

:root[data-theme="night"] #retroSpectrum {
  background: #000;
}

:root[data-theme="night"] .mini-player-copy strong,
:root[data-theme="night"] .mini-player-copy small {
  font-family: "Courier New", ui-monospace, monospace;
}

:root[data-theme="night"] .live-dot {
  background: #ff3b3b;
  box-shadow: 0 0 6px rgba(255, 59, 59, 0.9);
}

:root[data-theme="night"] .transport-button {
  border-radius: 9px;
  background: #0f0707;
  border-color: #3a1414;
}

:root[data-theme="night"] .transport-button--main {
  background: var(--gradient);
}

:root[data-theme="night"] .station-card-main,
:root[data-theme="night"] .podcast-grid .station-card-main,
:root[data-theme="night"] .mini-player {
  border-radius: 8px;
}