/* Google Fonts (OFL), autohospedadas — sin <link> a fonts.googleapis.com
   porque la CSP del servidor solo permite recursos del mismo origen
   (font-src hereda de default-src 'self'). */
@font-face {
  font-family: 'Jersey 10 Charted';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/jersey10charted.woff2') format('woff2');
}

@font-face {
  font-family: 'Turret Road';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/turret-road-bold.woff2') format('woff2');
}

@font-face {
  font-family: 'Doto';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/doto-semibold.woff2') format('woff2');
}

:root {
  color-scheme: dark;
  --bg: #030308;
  --frame-bg: #06040f;
  --panel: #0d0b1a;
  --panel-2: #14112400;
  --line: #221f36;
  --text: #f5f4fb;
  --muted: #8f8aa8;
  --blue: #4d8dff;
  --violet: #9b5cff;
  --green: #2ee6a8;
  --amber: #ffca2f;
  --red: #ff4438;
  --gradient: linear-gradient(135deg, var(--blue), var(--violet));
  --radius: 18px;
  --radius-sm: 12px;
  --nav-height: 78px;
  --mini-player-height: 56px;
}

* {
  box-sizing: border-box;
}

/* .live-badge, .mini-player, etc. fijan su propio `display` para cuando
   están visibles; sin este override, esa regla de autor le gana en el
   cascade al `display: none` del atributo `hidden` (mismo origen, y el
   selector de atributo por sí solo no basta para ganarle a una regla de
   autor más específica) y el elemento se queda visible aunque JS lo oculte. */
[hidden] {
  display: none !important;
}

html {
  min-height: 100%;
  background: var(--bg);
}

body {
  display: flex;
  justify-content: center;
  /* 100vh en móvil se calcula con la barra del navegador OCULTA (el caso
     más alto posible) — cuando la barra está visible (carga inicial, o
     scroll hacia arriba), el espacio real es más chico y el nav
     inferior/mini-player (position:absolute bottom:0 del frame) quedan
     empujados fuera de la pantalla hasta hacer scroll. dvh sí se ajusta en
     vivo; min-height 100vh queda como respaldo en navegadores sin dvh. */
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button,
input {
  font: inherit;
}

button {
  color: inherit;
}

/* ---------- Viewport lock: la app solo existe a ancho de teléfono ---------- */

.viewport-lock {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
}

.phone-frame {
  /* .bottom-nav y .mini-player son position:absolute; sin este
     position:relative, su ancestro posicionado más cercano sería el
     viewport en vez del marco, y en el letterbox de escritorio quedarían
     pegados al borde real de la ventana en vez del borde del teléfono. */
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 430px;
  /* Tiene que ser un alto fijo (no min-height): si no, con una lista larga
     el frame completo crece con el contenido en vez de quedarse del alto
     del viewport, y el nav/mini-player (position:absolute bottom:0 del
     frame) terminan empujados debajo de todo el contenido en vez de fijos
     abajo. .app-shell es quien hace scroll interno. dvh (no vh) para que
     no dependa de si la barra del navegador está mostrada u oculta. */
  height: 100vh;
  height: 100dvh;
  background:
    radial-gradient(circle at 50% -10%, rgba(155, 92, 255, 0.16), transparent 26rem),
    radial-gradient(circle at 100% 0%, rgba(77, 141, 255, 0.12), transparent 20rem),
    var(--frame-bg);
  overflow: hidden;
}

/* En pantallas más anchas que un teléfono, se centra un marco con letterbox
   en vez de estirar el contenido: la piel se diseñó y se prueba a ancho
   móvil únicamente. `pointer: fine` (mouse) además de min-width es
   necesario: un teléfono en horizontal, o cualquier teléfono con pantalla
   grande, fácilmente reporta más de 431px de ancho en modo retrato
   también, y sin este chequeo se le aplicaba el marco de escritorio a un
   dispositivo táctil real — justo lo que NO debe pasar en móvil. */
@media (min-width: 431px) and (pointer: fine) {
  body {
    padding: 24px 0;
  }

  .phone-frame {
    height: min(932px, calc(100vh - 48px));
    border-radius: 40px;
    box-shadow:
      0 0 0 10px #0a0a12,
      0 0 0 11px #26263a,
      0 40px 90px rgba(0, 0, 0, 0.55);
  }
}

/* Ningún sitio web puede forzar la orientación de un teléfono real (y en
   iOS, ni siquiera instalada como PWA se respeta orientation:portrait del
   manifest — Apple no lo soporta) — así que en vez de dejar que el diseño
   se vea aplastado en horizontal, se tapa con un aviso hasta que el
   usuario regrese a vertical. Solo en dispositivos táctiles: en
   escritorio, una ventana angosta-pero-más-ancha-que-alta no debe
   disparar esto. */
.rotate-lock {
  display: none;
}

@media (orientation: landscape) and (pointer: coarse) {
  .rotate-lock {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 24px;
    background: var(--frame-bg);
    color: var(--text);
    text-align: center;
  }

  .rotate-lock svg {
    color: var(--violet);
    animation: rotate-hint 1.6s ease-in-out infinite;
  }

  .rotate-lock p {
    margin: 0;
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1.5;
  }

  @keyframes rotate-hint {
    0%, 100% {
      transform: rotate(0deg);
    }
    50% {
      transform: rotate(90deg);
    }
  }
}

.app-shell {
  flex: 1;
  /* Sin esto, el min-height:auto por defecto de un flex item hace que
     .app-shell crezca con su contenido en vez de quedarse acotado por
     .phone-frame — y overflow-y:auto nunca llega a activarse. */
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  /* El padding-top ahora lo pone .topbar (sticky, con su propio fondo) —
     ponerlo acá también duplicaría el espacio arriba de cada pantalla. */
  padding: 0 16px calc(var(--nav-height) + 18px) 16px;
  -webkit-overflow-scrolling: touch;
}

/* El mini-player flota entre el contenido y el nav inferior; cuando está
   visible hace falta un colchón extra abajo para que no tape la última
   fila de cada pantalla. */
.app-shell.has-mini-player {
  padding-bottom: calc(var(--nav-height) + var(--mini-player-height) + 18px);
}

/* ---------- Pantallas ---------- */

.screen {
  display: none;
}

.screen.is-active {
  display: block;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Full-bleed: .app-shell tiene 16px de padding horizontal para el resto
     del contenido, pero el header sticky necesita cubrir todo el ancho
     (si no, el contenido scrolleado se asoma por los costados al pasar
     debajo). Margen negativo + padding propio para compensar. */
  margin: 0 -16px 18px;
  padding: max(18px, env(safe-area-inset-top)) 16px 14px;
  background: rgba(6, 4, 15, 0.96);
  backdrop-filter: blur(10px);
}

.topbar--simple {
  justify-content: flex-start;
  gap: 10px;
  margin: 0 -16px 16px;
}

.topbar--simple h1 {
  margin: 4px 0 0;
  font-size: 1.3rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-wordmark-wrap {
  margin: 0;
  line-height: 0;
}

.brand-wordmark {
  height: 51px;
  width: auto;
  display: block;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.icon-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
}

.icon-button.is-accent,
.icon-button.is-active {
  border-color: rgba(155, 92, 255, 0.55);
  color: var(--violet);
}

.icon-button.is-active svg {
  fill: currentColor;
}

.account-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--violet);
  box-shadow: 0 0 6px rgba(155, 92, 255, 0.9);
}

/* ---------- Now Playing (Home) ---------- */

.now-playing-card {
  /* display:flex + order permite que el skin retro (theme-retro.css)
     reordene sus hijos directos (pantalla LED, analizador ancho,
     transporte) sin duplicar el transporte entre los dos layouts. */
  display: flex;
  flex-direction: column;
  padding: 18px;
  border: 1px solid rgba(155, 92, 255, 0.35);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(77, 141, 255, 0.08), rgba(155, 92, 255, 0.04));
  box-shadow: 0 20px 60px rgba(77, 92, 255, 0.12);
}

.now-playing-top {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.now-playing-orb {
  position: relative;
  display: grid;
  flex: 0 0 92px;
  width: 92px;
  height: 92px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(155, 92, 255, 0.4);
  border-radius: 16px;
  background: radial-gradient(circle, rgba(155, 92, 255, 0.18), rgba(5, 5, 12, 0.9));
}

.now-playing-orb canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Se muestra mientras suena la estación pero el analizador no recibe datos
   (la fuente no entrega señal analizable) — un disco girando en vez de un
   cuadro vacío. */
.vinyl {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: radial-gradient(circle, rgba(155, 92, 255, 0.18), rgba(5, 5, 12, 0.9));
  color: var(--violet);
}

.vinyl svg {
  animation: vinyl-spin 2.8s linear infinite;
}

@keyframes vinyl-spin {
  to {
    transform: rotate(360deg);
  }
}

.now-playing-orb.is-live {
  border-color: var(--violet);
  box-shadow: 0 0 24px rgba(155, 92, 255, 0.35);
}

.now-playing-orb--podcast img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.podcast-mode-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(155, 92, 255, 0.14);
  border: 1px solid rgba(155, 92, 255, 0.4);
  color: var(--violet);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.now-playing-podcast-transport {
  margin-top: 18px;
}

.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 68, 56, 0.12);
  border: 1px solid rgba(255, 68, 56, 0.4);
  color: #ff8478;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 6px rgba(255, 68, 56, 0.9);
}

.now-playing-info {
  flex: 1;
  min-width: 0;
}

.now-playing-kicker-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0 4px;
}

.now-playing-kicker {
  margin: 0;
  color: var(--violet);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.now-playing-info h2 {
  margin: 0;
  overflow: hidden;
  font-size: 1.15rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

#stationSubtitle,
.now-playing-meta {
  margin: 4px 0 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.82rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.now-playing-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.transport {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin-top: 18px;
}

.transport-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  cursor: pointer;
}

.transport-button--main {
  width: 62px;
  height: 62px;
  border: none;
  background: var(--gradient);
  color: #fff;
  box-shadow: 0 12px 30px rgba(155, 92, 255, 0.45);
}

#playButton .icon-pause,
#miniPlayButton .icon-pause {
  display: none;
}

#playButton.is-playing .icon-play,
#miniPlayButton.is-playing .icon-play {
  display: none;
}

#playButton.is-playing .icon-pause,
#miniPlayButton.is-playing .icon-pause {
  display: inline-flex;
}

/* ---------- Secciones de Home ---------- */

.home-section {
  margin-top: 26px;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.section-header h2,
.home-section > h2 {
  margin: 0 0 12px;
  font-size: 1rem;
}

.section-header h2 {
  margin: 0;
}

.section-header--spaced {
  margin-top: 22px;
}

.link-button {
  border: none;
  background: none;
  padding: 0;
  color: var(--violet);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.status-message {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 0.82rem;
}

.hscroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
  margin: 0 -16px;
  padding-left: 16px;
  padding-right: 16px;
  scroll-snap-type: x proximity;
}

/* Tamaño estándar de tarjeta para Featured y Recently Played (misma
   plantilla/clase en ambas secciones, así que un solo tamaño las afecta a
   las dos). */
.station-card {
  /* flex-basis solo no basta: un texto largo sin espacios (o el
     line-clamp de abajo) puede forzar el tamaño mínimo automático del
     item por encima del basis y la tarjeta termina más ancha que sus
     vecinas. width/max-width lo fijan de verdad. */
  flex: 0 0 104px;
  width: 104px;
  max-width: 104px;
  scroll-snap-align: start;
}

.station-card-main {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  text-align: left;
}

.station-card-art {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(77, 141, 255, 0.18), rgba(10, 8, 20, 0.9));
  color: var(--blue);
}

.station-card-art .station-logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.station-card-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(5, 5, 12, 0.75);
  backdrop-filter: blur(2px);
  color: #fff;
  font-size: 0.52rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.station-card-copy {
  display: block;
  min-width: 0;
  padding: 8px;
}

.station-card-copy .station-title,
.station-card-copy .station-meta {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.station-card-copy .station-title {
  font-size: 0.78rem;
}

.station-card-copy .station-meta {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* ---------- Categorías ---------- */

.category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.category-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
}

.category-btn svg {
  color: var(--blue);
}

.category-btn span {
  font-size: 0.78rem;
}

/* ---------- Chips (En vivo) ---------- */

.chip-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin: 0 -16px 14px;
  padding: 0 16px 4px;
}

.chip {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 14px;
  background: var(--panel);
  color: var(--muted);
  font-size: 0.82rem;
  white-space: nowrap;
  cursor: pointer;
}

.chip.is-active {
  border-color: transparent;
  background: var(--gradient);
  color: #fff;
}

/* ---------- Subtabs (Biblioteca) ---------- */

.subtabs {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px;
}

.subtab {
  flex: 1;
  border: none;
  border-radius: 999px;
  padding: 8px 10px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.subtab.is-active {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}

.library-panel-section {
  display: none;
}

.library-panel-section.is-active {
  display: block;
}

/* ---------- Buscar ---------- */

.search-form {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.search-form input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  background: var(--panel);
  color: var(--text);
}

/* Sin esto el placeholder usa el gris/blanco por defecto del navegador en
   vez de seguir la paleta del tema activo (se nota sobre todo en Night
   Mode, donde --muted es rojo, no gris). */
.search-form input::placeholder {
  color: var(--muted);
  opacity: 1;
}

.search-form button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--gradient);
  color: #fff;
  cursor: pointer;
}

.secondary-button,
a.secondary-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  background: var(--panel);
  color: var(--text);
  text-decoration: none;
  font-size: 0.85rem;
  cursor: pointer;
}

/* ---------- Filas de estación (Buscar / En vivo / Biblioteca) ---------- */

.station-list {
  display: grid;
  gap: 8px;
}

.station-row {
  display: flex;
  align-items: center;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
}

.station-row.is-current {
  border-color: var(--violet);
  box-shadow: inset 0 0 0 1px rgba(155, 92, 255, 0.3);
}

.station-main {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  gap: 10px;
  border: 0;
  padding: 10px;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.station-logo-wrap {
  position: relative;
  display: grid;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  place-items: center;
  overflow: hidden;
  border-radius: 10px;
  background: #14112a;
  color: var(--blue);
}

.station-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.station-logo-fallback {
  position: absolute;
  color: var(--blue);
}

.station-copy {
  min-width: 0;
}

.station-title,
.station-meta {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.station-meta {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.8rem;
}

.station-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-right: 8px;
}

.station-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
}

.empty-state {
  padding: 28px 12px;
  color: var(--muted);
  text-align: center;
  font-size: 0.85rem;
}

/* ---------- Ajustes ---------- */

.settings-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.settings-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.settings-row-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  color: var(--blue);
}

.session-email {
  color: var(--text);
  font-size: 0.92rem;
  word-break: break-all;
}

.settings-meta {
  margin-top: 16px;
  color: var(--muted);
  font-size: 0.78rem;
  text-align: center;
}

.settings-hint {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.4;
}

.theme-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin-top: 12px;
}

.theme-option {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 8px 6px;
  background: transparent;
  color: var(--muted);
  font-size: 0.76rem;
  white-space: nowrap;
  text-align: center;
  cursor: pointer;
}

.theme-option.is-active {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(155, 92, 255, 0.45);
  color: var(--text);
}

/* ---------- Acerca de (Ajustes) ---------- */

.settings-about {
  margin-top: 24px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.settings-about h2 {
  margin: 0 0 4px;
  font-size: 1rem;
}

.settings-about-tagline {
  margin: 0 0 12px;
  color: var(--violet);
  font-weight: 600;
  font-size: 0.85rem;
}

.settings-about p {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.45;
}

.settings-about-credits {
  display: grid;
  gap: 6px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.02);
}

.settings-about-credits div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.settings-about-credits dt {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
}

.settings-about-credits dd {
  margin: 0;
  color: var(--text);
  font-weight: 600;
  font-size: 0.82rem;
}

.settings-about-link {
  color: var(--violet);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
}

.settings-about-version,
.settings-about-copyright {
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
}

/* ---------- Mini-player ---------- */

.mini-player {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--nav-height);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--mini-player-height);
  padding: 0 12px;
  border-top: 1px solid var(--line);
  background: rgba(10, 8, 20, 0.92);
  backdrop-filter: blur(10px);
}

.mini-player-info {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  gap: 10px;
  border: none;
  background: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
}

.status-light {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border: 2px solid #2e2e40;
  border-radius: 50%;
  background: #0f0f1a;
}

.status-light.is-live {
  border-color: var(--red);
  background: var(--red);
  box-shadow: 0 0 10px rgba(255, 68, 56, 0.85);
}

.mini-player-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.mini-player-copy strong {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 0.85rem;
}

.mini-player-copy small {
  color: var(--muted);
  font-size: 0.7rem;
}

.mini-player .icon-button {
  flex: 0 0 auto;
}

/* ---------- Nav inferior ---------- */

.bottom-nav {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  height: var(--nav-height);
  padding: 10px 8px env(safe-area-inset-bottom);
  border-top: 1px solid var(--line);
  background: rgba(6, 4, 15, 0.96);
  backdrop-filter: blur(10px);
}

.nav-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex: 1;
  border: none;
  background: none;
  color: var(--muted);
  font-size: 0.7rem;
  cursor: pointer;
}

.nav-btn svg {
  width: 26px;
  height: 26px;
}

.nav-btn.is-active {
  color: var(--text);
}

.nav-btn.is-active svg {
  color: var(--violet);
}

/* ---------- Bienvenida (gate de login) ---------- */

.welcome-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: max(32px, env(safe-area-inset-top)) 28px calc(env(safe-area-inset-bottom) + 32px);
  text-align: center;
  background:
    radial-gradient(circle at 50% 30%, rgba(155, 92, 255, 0.16), transparent 22rem),
    var(--frame-bg);
}

.welcome-orbit {
  position: relative;
  display: grid;
  place-items: center;
  width: 220px;
  height: 220px;
  margin-bottom: 20px;
}

.welcome-mascot {
  width: 180px;
  height: 180px;
  object-fit: contain;
  filter: drop-shadow(0 20px 40px rgba(155, 92, 255, 0.35));
}

.welcome-bubble {
  position: absolute;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(155, 92, 255, 0.35);
  background: rgba(13, 11, 26, 0.7);
  color: var(--violet);
}

.welcome-bubble--music {
  top: 6px;
  left: 4px;
  color: var(--blue);
}

.welcome-bubble--tower {
  top: 20px;
  right: -6px;
}

.welcome-bubble--heart {
  bottom: 20px;
  left: -6px;
  color: var(--blue);
}

.welcome-bubble--radio {
  bottom: 6px;
  right: 4px;
}

.welcome-title {
  margin: 0;
  color: var(--text);
  font-size: 2rem;
  font-weight: 800;
}

.welcome-title span {
  background: var(--gradient);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.welcome-tagline {
  margin: 10px 0 32px;
  color: var(--muted);
  font-size: 0.95rem;
}

.welcome-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 15px 20px;
  border-radius: 999px;
  background: var(--gradient);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
  box-shadow: 0 16px 40px rgba(155, 92, 255, 0.35);
}

.welcome-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: 280px;
  margin: 28px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
}

.welcome-note svg {
  flex: 0 0 auto;
  color: var(--violet);
}

/* ---------- Entrada a Podcasts (Home) ---------- */

.podcasts-entry {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
  text-align: left;
}

.podcasts-entry-icon {
  display: grid;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 50%;
  background: var(--gradient);
  color: #fff;
}

.podcasts-entry-copy {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.podcasts-entry-copy small {
  color: var(--muted);
  font-size: 0.78rem;
}

.podcasts-entry > svg {
  flex: 0 0 auto;
  color: var(--muted);
}

/* ---------- Pantalla de Podcasts ---------- */

.podcast-panel {
  display: none;
}

.podcast-panel.is-active {
  display: block;
}

.podcast-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.podcast-grid .station-card {
  /* En Featured/Recently Played .station-card tiene ancho fijo (104px,
     ver arriba) porque van en un scroll horizontal; acá van en una grilla
     de columnas iguales, así que el ancho lo da la columna del grid —
     pero igual necesita min-width:0 para que el título largo trunque en
     vez de ensanchar la columna (mismo bug que ya corregimos antes). */
  width: auto;
  max-width: none;
  min-width: 0;
}

.podcast-back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 14px;
}

.podcast-detail-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.podcast-detail-header img {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  background: #14112a;
}

.podcast-detail-header-copy {
  min-width: 0;
}

.podcast-detail-header-copy h2 {
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 1rem;
}

.podcast-detail-header-copy p {
  margin: 4px 0 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--muted);
  font-size: 0.82rem;
}

.podcast-detail-description {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.4;
}

.episode-play {
  color: var(--violet);
}

.episode-save.is-active {
  border-color: rgba(155, 92, 255, 0.55);
  color: var(--violet);
}

.episode-save.is-active svg {
  fill: currentColor;
}

.podcast-save-button {
  flex: 0 0 auto;
  margin-left: auto;
}

/* ---------- Controles de podcast (viven en el Now Playing de Inicio) ---------- */

.podcast-player-scrubber {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.podcast-player-scrubber span {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
}

.podcast-player-scrubber input[type="range"] {
  flex: 1;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 999px;
  background: var(--line);
  outline: none;
}

.podcast-player-scrubber input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--violet);
  box-shadow: 0 0 8px rgba(155, 92, 255, 0.7);
}

.podcast-player-scrubber input[type="range"]::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: none;
  border-radius: 50%;
  background: var(--violet);
}

.podcast-player-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 8px;
}

.podcast-player-controls .icon-button {
  flex-direction: column;
  gap: 1px;
  width: auto;
  height: auto;
  padding: 4px 8px;
  border-radius: 10px;
}

.podcast-player-controls .icon-button small {
  font-size: 0.58rem;
  font-weight: 700;
}

.podcast-player-play {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  padding: 0 !important;
}

.podcast-player-play .icon-pause {
  display: none;
}

.podcast-player-play.is-playing .icon-play {
  display: none;
}

.podcast-player-play.is-playing .icon-pause {
  display: inline-flex;
}