/* Skin Liquid Crystal (opcional, Ajustes → Apariencia): cuerpo del
   dispositivo en gris oscuro y la misma pantalla física del skin Retro
   (ver theme-retro.css para el show/hide + reorder compartido), pero con
   la estética de una pantalla LCD monocroma clásica — fondo verde-gris
   pálido, texto negro tipo segmento, etiquetas con recuadro. No se
   inventan datos que la app no tiene (frecuencia sintonizada, batería,
   preset, reloj, género EQ) — se muestran los mismos datos reales que en
   Retro (nombre, estado, ubicación, formato, analizador). */

:root[data-theme="lcd"] {
  --bg: #2a2a2d;
  --frame-bg: #222225;
  --panel: #313134;
  --panel-2: #3a3a3d;
  --line: #47474a;
  --text: #f0f0ee;
  --muted: #9a9a9c;
  --blue: #8a8a8f;
  --violet: #8a8a8f;
  --green: #3c8a5c;
  --amber: #b8952c;
  --red: #a8433c;
  --gradient: linear-gradient(135deg, #5c5c60, #3a3a3d);
}

:root[data-theme="lcd"] .phone-frame {
  background: var(--frame-bg);
}

:root[data-theme="lcd"] .now-playing-card {
  border: 1px solid #1c1c1e;
  border-radius: 10px;
  background-color: #1c1c1e;
}

:root[data-theme="lcd"] .retro-display,
:root[data-theme="lcd"] .spectrum-card {
  border: 2px solid #7d8a76;
  border-radius: 6px;
  background-color: #c9d2c0;
}

/* Tipografía tipo reloj/receptor digital (Casio, LCD de mesa) en vez del
   monoespaciado genérico que usa Retro. */
:root[data-theme="lcd"] .led,
:root[data-theme="lcd"] .dot-matrix,
:root[data-theme="lcd"] .spectrum-card__header,
:root[data-theme="lcd"] .frequency-scale,
:root[data-theme="lcd"] #retroSpectrumState {
  font-family: 'Jersey 10 Charted', "Courier New", ui-monospace, monospace;
  font-weight: 400;
  /* El glifo de espacio de esta fuente es angosto — sin esto, palabras
     como "RDS TA AF" se ven pegadas ("RDSTAAF"). */
  word-spacing: 0.35em;
}

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

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

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

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

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

:root[data-theme="lcd"] .led,
:root[data-theme="lcd"] .led-blue {
  color: #1c1f1a;
}

:root[data-theme="lcd"] .led {
  border: 1px solid #57614f;
  border-radius: 3px;
  padding: 1px 6px;
}

:root[data-theme="lcd"] .retro-status-light {
  border: 2px solid #57614f;
  background: #a8b39e;
}

:root[data-theme="lcd"] .retro-status-light.is-live {
  background: #1c1f1a;
  border-color: #1c1f1a;
}

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

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

:root[data-theme="lcd"] #retroSpectrumState {
  color: #1c1f1a;
}

:root[data-theme="lcd"] #retroSpectrum {
  background: #c9d2c0;
}

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

:root[data-theme="lcd"] .live-dot {
  background: #1c1f1a;
  box-shadow: none;
}

:root[data-theme="lcd"] .transport-button {
  border-radius: 9px;
  background: var(--panel-2);
  border-color: var(--line);
}

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

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