/* Reset y fondo */
body {
  margin: 0;
  padding: 0;
  font-family: 'Inter', sans-serif;
  background: linear-gradient(90deg, #353535 0%, #000000 100%);
  color: #fff;

  /* ❌ ESTO ROMPE TODO */
  /* overflow: hidden; */

  /* ✅ FIX */
  overflow-x: hidden;
  overflow-y: auto;
}

.background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

/* Encabezado (↑ más arriba y compacto) */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px;
  /* antes 32px */
  position: relative;
}

.language-selector {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 80px;
  padding: 8px 16px;
  width: 170px;
  height: 56px;
  /* antes 64px */
}

.language-icon,
.dropdown-icon {
  width: 72px;
  /* antes 84px */
  height: 72px;
  /* antes 84px */
}

.profile-button {
  width: 56px;
  /* antes 64px */
  height: 56px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 99px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.profile-button img {
  width: 40px;
  /* antes 48px */
  height: 40px;
}

/* Menú de perfil */
.profile-menu {
  position: absolute;
  top: 82px;
  /* antes 96px: un poco más arriba */
  right: 24px;
  /* antes 32px */
  background: rgba(0, 0, 0, 0.95);
  border: 2px solid #fff;
  border-radius: 12px;
  padding: 8px 0;
  min-width: 180px;
  z-index: 1000;
  backdrop-filter: blur(10px);
}

.profile-menu.hidden {
  display: none;
}

.profile-menu-item {
  padding: 14px 18px;
  /* antes 16px 20px */
  color: white;
  cursor: pointer;
  transition: background-color 0.3s;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-size: 16px;
  font-weight: 500;
  font-family: 'Inter', sans-serif;
}

.profile-menu-item:hover,
.profile-menu-item:focus {
  background-color: rgba(255, 255, 255, 0.1);
  outline: none;
}

.profile-menu-item[data-focused="true"] {
  background-color: rgba(46, 166, 174, 0.3);
  outline: 2px solid #2EA6AE;
  outline-offset: -2px;
}

/* Logo central (↑ más arriba) */
.logo-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: -6px;
  /* sube un poco el logo */
}

.logo {
  width: 64px;
  height: auto;
}

/* Contenedor de cuadrícula (↑ más arriba y con menos espacio) */
.station-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  /* antes 48px */
  padding: 18px 24px;
  /* antes 32px */
  margin-top: -8px;
  /* empuja todo un poco hacia arriba */
}

/* Fila de audio/video */
.audio-row,
.video-row {
  display: flex;
  justify-content: center;
  gap: 16px;

  /* ✅ CLAVE */
  flex-wrap: wrap;
}

.video-row {
  gap: 28px;
}

/* antes 32px */

/* Tarjetas estándar */
.station-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  width: 240px;
  height: 292px;
  /* +25px para alojar ahora el nowplaying */
}

.video-card {
  width: 400px;
  display: flex;
  flex-direction: column;

  /* 🔥 FIX */
  align-items: flex-start;
}
/* Imagen de estación (audio) */
.station-image {
  width: 100%;
  height: 210px;
  /* antes 240px (recortamos para que quepa nowplaying) */
  background-size: cover;
  background-position: center;

  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 8px;
  box-sizing: border-box;
}

.locked .station-image {
  background-blend-mode: overlay;
  background-color: rgba(0, 0, 0, 0.64);
}

/* Etiqueta interna (Core, Audio, Video) */
/* Etiqueta (igual para audio y video) */
.station-tag,
.station-tag2 {
  position: relative;          /* Para que esté sobre la imagen */
  z-index: 1;
  background: rgb(255 255 255 / 96%);
  border-radius: 30px;
  padding: 4px 12px;
  font-size: 13px;
  font-weight: 600;
  color: #000;
  backdrop-filter: blur(8px);
  display: inline-block;       /* Para que ocupe solo su contenido */
}

/* Ícono de candado */
.lock-icon {
  position: absolute;
  top: calc(50% - 32px);
  left: calc(50% - 32px);
  width: 64px;
  height: 64px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  border: 2px solid #fff;
}

/* Título debajo del cuadro */
.station-title {
  font-size: 16px;
  font-weight: 600;
  /* un poco más fuerte */
  color: #fff;
  margin-top: 4px;
}

/* Título debajo del cuadro */
.station-title2 {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  margin-top: 8px;

  /* 🔥 FIX */
  text-align: left;
  width: 100%;
}


/* Now Playing (nuevo) */
.nowplaying {
  width: 100%;
  text-align: center;
  line-height: 1.2;
  min-height: 36px;
}

.now-title {
  font-weight: 800;
  /* negritas */
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.now-artist {
  font-size: 12px;
  opacity: 0.8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

/* Pie de página */
.footer-text {
  text-align: center;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.4);
  padding: 12px;
  /* más compacto */
}

/* Foco visual */
.focused {
  outline: 2px solid #2EA6AE;
  outline-offset: 4px;
  transition: outline 0.2s ease-in-out;
}

/* ======= Mosaicos de VIDEO (ahora con GIFs centrados) ======= */
.station-image2 {
  position: relative;          /* Para que la etiqueta y la imagen se posicionen aquí */
  width: 100%;
  height: 210px;               /* Misma altura que .station-image (audio) */
  border-radius: 0px;
  overflow: hidden;
  background-color: black;
  display: flex;
  justify-content: flex-end;   /* Para alinear etiqueta a la derecha */
  align-items: flex-start;     /* Para alinear etiqueta arriba */
  padding: 8px;
  box-sizing: border-box;
  /* Elimina margin-left:300px; */
}

/* El GIF dentro del mosaico de video */
.station-image2 img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  border-radius: inherit;
}

/* Si por compatibilidad quedara algún <video>, no afecta al GIF */
.station-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  z-index: 0;
}
/*
.station-tag2 {
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid #fff;
  border-radius: 24px;
  padding: 4px 12px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  backdrop-filter: blur(8px);
}
*/

/* Menú de idioma */
.language-menu {
  position: absolute;
  top: 82px;
  /* antes 96px */
  left: 24px;
  /* antes 32px */
  background: rgba(0, 0, 0, 0.95);
  border: 2px solid #fff;
  border-radius: 12px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 1000;
  backdrop-filter: blur(10px);
}

.language-option {
  /*width: 48px;*/
  height: 32px;
  border-radius: 4px;
  cursor: pointer;
  /*border: 1px solid #fff;*/
  transition: transform 0.2s ease;
}

.language-option:hover,
.language-option:focus {
  transform: scale(1.05);
  outline: 2px solid #2EA6AE;
}

.language-option[data-focused="true"] {
  outline: 2px solid #2EA6AE;
  transform: scale(1.05);
}

.hidden {
  display: none;
}

.station-card.focusable {
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.station-card.focusable:hover,
.station-card.focusable:focus {
  outline: none;
  outline-offset: 4px;
  transform: scale(1.02);
  box-shadow: none;
}

/* Estilos para elementos enfocables en general */
.focusable {
  cursor: pointer;
  transition: all 0.2s ease;
}

.focusable:focus {
  outline: 2px solid #2EA6AE;
  outline-offset: 2px;
}

.focusable[data-focused="true"] {
  outline: 2px solid #2EA6AE;
  outline-offset: 2px;
  transform: scale(1.02);
}

/* Estilos específicos para botones del header */
.language-selector.focusable:focus,
.profile-button.focusable:focus {
  outline: 2px solid #2EA6AE;
  outline-offset: 2px;
  background: rgba(255, 255, 255, 0.12);
}

.language-selector[data-focused="true"],
.profile-button[data-focused="true"] {
  outline: 2px solid #2EA6AE;
  outline-offset: 2px;
  background: rgba(255, 255, 255, 0.12);
  transform: scale(1.02);
}


/* ===== Ajustes para WEB ===== */
@media (min-width: 900px) {
  body {
    overflow-y: auto;
  }

  .station-grid {
    transform: scale(0.85);
    margin-top: 20px;
  }

  .station-card {
    cursor: pointer;
  }

  .profile-menu,
  .language-menu {
    position: absolute;
  }
}

@media (max-width: 700px) {

  .audio-row,
  .video-row {
    align-items: center;
  }

  .station-card,
  .video-card {
    width: 100% !important;
    max-width: 100%;
  }

}