/* ---- Desglose por estilo dentro del modal del dia ---- */
.calendar-day-breakdown {
  margin-bottom: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(210, 243, 101, 0.24);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(15, 15, 17, 0.92), rgba(10, 10, 11, 0.9));
}
.calendar-day-breakdown-total {
  font-family: "Sora", sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: #f5f5f4;
  margin-bottom: 8px;
}
.calendar-day-breakdown-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.calendar-day-breakdown-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid rgba(210, 243, 101, 0.24);
  background: rgba(10, 10, 11, 0.7);
  font-size: 13px;
  color: rgba(236, 236, 234, 0.92);
}
.calendar-day-breakdown-chip b {
  color: #e2fc8d;
  font-weight: 800;
}

/* ============================================================
   Hub "Configuracion del perfil": agrupado y con feedback claro
   ============================================================ */
.profile-settings-hub-group {
  display: grid;
  gap: 4px;
  padding: 6px 0;
}
.profile-settings-hub-group + .profile-settings-hub-group {
  border-top: 1px solid rgba(221, 250, 124, 0.1);
}
.profile-settings-hub-group-label {
  margin: 2px 4px 4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(206, 225, 145, 0.7);
}

/* Item: caja con hover real y hueco correcto para el CTA */
.profile-settings-hub-item {
  grid-template-columns: 44px minmax(0, 1fr) auto;
  padding: 12px 12px;
  border: 1px solid transparent;
  border-radius: 14px;
}
.profile-settings-hub-item:hover,
.profile-settings-hub-item:focus-visible {
  background: rgba(221, 250, 124, 0.07);
  border-color: rgba(221, 250, 124, 0.22);
  transform: translateX(2px);
  outline: none;
}
.profile-settings-hub-item--danger:hover,
.profile-settings-hub-item--danger:focus-visible {
  background: rgba(255, 98, 98, 0.08);
  border-color: rgba(255, 132, 132, 0.28);
}
.profile-settings-hub-go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
}
.profile-settings-hub-go i {
  font-size: 11px;
  opacity: 0.8;
}

/* ---- Campos del modal "Usuario y descripcion" ---- */
.account-input-hint {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.3;
}
.account-bio-input {
  width: 100%;
  resize: vertical;
  min-height: 74px;
  border-radius: 12px;
}
.account-bio-counter {
  justify-self: end;
  font-variant-numeric: tabular-nums;
}

/* Enlaces SEO del título de tarjeta: heredan estilo, el modal se abre vía JS. */
.card-title-link {
  color: inherit;
  text-decoration: none;
}
.card-title-link:hover,
.card-title-link:focus {
  color: inherit;
  text-decoration: none;
}

/* ==========================================================================
   Barra inferior compartida: radio en directo y sets
   Un unico reproductor con dos modos. Lo comun (portada, titulo, play,
   volumen, cerrar) se reutiliza; cada modo enseña solo sus propios controles
   y cambia la fuente de audio: WebSocket para el directo, embed del proveedor
   para los sets.
   ========================================================================== */

#communityLiveRadioBar[data-mode="set"] .is-live-only,
#communityLiveRadioBar[data-mode="live"] .is-set-only {
  display: none !important;
}

/* Spotify no deja controlar su reproductor desde fuera: en ese caso se enseña
   su embed nativo y se ocultan nuestros controles de transporte. */
#communityLiveRadioBar[data-mode="set"][data-transport="native"] #communityLiveTogglePlayBtn,
#communityLiveRadioBar[data-mode="set"][data-transport="native"] .sets-player-progress-line {
  display: none !important;
}

#communityLiveRadioBar[data-mode="set"] .community-live-radio-copy,
#communityLiveRadioBar[data-mode="set"] .community-live-radio-cover {
  cursor: default;
}

/* Portada del set encima del icono de radio. */
.community-live-radio-cover-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* Progreso como filo superior de la barra: fino y discreto en reposo, pero se
   puede arrastrar para adelantar la pista. Al pasar el raton o el dedo crece
   para que sea comodo de agarrar. */
.sets-player-progress-line {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.07);
  pointer-events: none;
  overflow: visible;
  transition: height 0.15s ease, background-color 0.15s ease;
}

/* Solo se arrastra cuando manda una pista (set) con duracion conocida; en
   directo o en Spotify (que trae sus propios controles) sigue siendo decorativa. */
#communityLiveRadioBar[data-mode="set"] .sets-player-progress-line {
  pointer-events: auto;
  cursor: pointer;
  touch-action: none;
  z-index: 4;
}

/* Zona de agarre invisible: el filo se ve fino pero el dedo/raton tiene un area
   alta donde enganchar sin tener que apuntar al pixel. */
#communityLiveRadioBar[data-mode="set"] .sets-player-progress-line::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -6px;
  height: 14px;
}

/* Al acercarse (hover / foco / mientras se arrastra) crece y se ilumina. */
#communityLiveRadioBar[data-mode="set"] .sets-player-progress-line:hover,
#communityLiveRadioBar[data-mode="set"] .sets-player-progress-line:focus-visible,
#communityLiveRadioBar[data-mode="set"] .sets-player-progress-line.is-scrubbing {
  height: 8px;
  background: rgba(255, 255, 255, 0.16);
  outline: none;
}

.sets-player-progress-fill {
  position: relative;
  display: block;
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, rgba(221, 252, 119, 0.65), #ddfc77);
  transition: width 0.3s linear;
}

/* Mientras se arrastra la anchura la fija el dedo: sin transicion, o el relleno
   perseguiria al cursor con retraso. */
.sets-player-progress-line.is-scrubbing .sets-player-progress-fill {
  transition: none;
}

/* Tirador en la punta del progreso: aparece solo cuando la barra esta crecida. */
.sets-player-progress-fill::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 13px;
  height: 13px;
  border-radius: 999px;
  background: #ddfc77;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.45);
  transform: translate(50%, -50%) scale(0);
  transition: transform 0.15s ease;
}

#communityLiveRadioBar[data-mode="set"] .sets-player-progress-line:hover .sets-player-progress-fill::after,
#communityLiveRadioBar[data-mode="set"] .sets-player-progress-line:focus-visible .sets-player-progress-fill::after,
#communityLiveRadioBar[data-mode="set"] .sets-player-progress-line.is-scrubbing .sets-player-progress-fill::after {
  transform: translate(50%, -50%) scale(1);
}

/* El embed vive siempre en el DOM aunque no se vea: quitarlo o moverlo
   recargaria el iframe y cortaria el audio. */
.sets-player-stage {
  grid-column: 1 / -1;
  grid-row: 1;
  height: 0;
  overflow: hidden;
  display: flex;
  justify-content: center;
  transition: height 0.22s ease;
}

.sets-player-embed {
  height: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
}

#communityLiveRadioBar[data-provider="spotify"] .sets-player-embed {
  aspect-ratio: auto;
  width: min(100%, 620px);
  background: transparent;
}

/* SoundCloud con su embed nativo a la vista (via de emergencia cuando su API no
   carga): su widget es ancho y bajo, no 16/9. */
#communityLiveRadioBar[data-provider="soundcloud"][data-has-video="1"] .sets-player-embed {
  aspect-ratio: auto;
  width: min(100%, 620px);
  height: 170px;
  background: transparent;
}

.sets-player-frame,
.sets-player-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* En modo set la barra necesita una fila extra arriba para el video. */
#communityLiveRadioBar[data-mode="set"] {
  grid-template-rows: auto auto;
}

#communityLiveRadioBar[data-mode="set"] .community-live-radio-cover,
#communityLiveRadioBar[data-mode="set"] .community-live-radio-main,
#communityLiveRadioBar[data-mode="set"] .community-live-radio-side {
  grid-row: 2;
}

/* En escritorio la barra tambien tapa el pie: el mismo colchon que el directo. */
body.sets-player-active .app {
  padding-bottom: calc(var(--sp-7) + 96px);
}

/* En movil la barra de directo esconde cerrar/silenciar porque el toque abre
   los comentarios. En modo set no hay panel que abrir, asi que hacen falta. */
@media (max-width: 980px) {
  #communityLiveRadioBar[data-mode="set"] #communityLiveRadioCloseBtn,
  #communityLiveRadioBar[data-mode="set"] #communityLiveToggleMuteBtn {
    display: inline-flex !important;
  }
}

/* La rejilla de controles esta pensada para el directo (prev/play/next/medidor).
   En modo set solo queda el transporte (retroceder / play / avanzar). */
/* Flex y no grid: en modo set el numero de controles visibles cambia segun
   el ancho y el proveedor, y una rejilla de columnas fijas los descoloca. */
#communityLiveRadioBar[data-mode="set"] .community-live-radio-controls {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}

/* Ya no hay barra de progreso que estire la columna del transporte: el titulo
   se queda con el ancho y los botones se juntan a su lado. */
#communityLiveRadioBar[data-mode="set"] .community-live-radio-main {
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 16px;
}

@media (max-width: 980px) {
  /* Sin barra de progreso ni tiempos, el transporte cabe al lado del titulo
     (antes ocupaba una fila propia debajo). */
  #communityLiveRadioBar[data-mode="set"] .community-live-radio-controls {
    justify-content: flex-end;
    flex: 0 0 auto;
  }
}

/* --------------------------------------------------------------------------
   Panel grande del set
   Tocar la barra la despliega a pantalla completa, como la radio abre su
   portada. No es un modal aparte: mover el iframe a otro nodo lo recargaria
   y cortaria la reproduccion, asi que crece la propia barra.
   -------------------------------------------------------------------------- */

/* El boton de minimizar solo tiene sentido con el panel abierto. */
#communityLiveRadioBar[data-mode="set"]:not(.is-expanded) #setsPlayerMinimizeBtn {
  display: none !important;
}

/* Con el panel abierto no hay barra que estorbe: el colchon inferior sobra. */
body.sets-player-active.sets-player-expanded .app {
  padding-bottom: var(--sp-7);
}

@media (max-width: 980px) {
  /* El chat del directo tambien accesible con boton, no solo tocando la barra. */
  #communityLiveRadioBar[data-mode="live"] .community-live-radio-alerts-btn:not(.hidden) {
    display: inline-flex !important;
  }
}

/* Aro latiendo tras la portada mientras suena, como la portada de la radio. */
#communityLiveRadioBar[data-mode="set"].is-expanded .community-live-radio-cover::before {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 26px;
  border: 1px solid rgba(221, 252, 119, 0.4);
  opacity: 0;
  pointer-events: none;
}

#communityLiveRadioBar[data-mode="set"].is-expanded.is-playing .community-live-radio-cover::before {
  animation: setsPlayerCoverPulse 2.6s ease-out infinite;
}

@keyframes setsPlayerCoverPulse {
  0% {
    transform: scale(0.98);
    opacity: 0.55;
  }
  70% {
    transform: scale(1.06);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

/* La portada recorta el aro si no se deja salir del contenedor. */
#communityLiveRadioBar[data-mode="set"].is-expanded .community-live-radio-cover {
  overflow: visible;
}

#communityLiveRadioBar[data-mode="set"].is-expanded .community-live-radio-cover-art,
#communityLiveRadioBar[data-mode="set"].is-expanded .community-live-radio-cover-inner {
  border-radius: 18px;
  overflow: hidden;
}

@media (max-width: 980px) {
  /* Retroceder/avanzar no caben en la barra estrecha, pero si en el panel. */
  #communityLiveRadioBar[data-mode="set"].is-expanded #communityLiveSwitchPrevBtn,
  #communityLiveRadioBar[data-mode="set"].is-expanded #communityLiveSwitchNextBtn {
    display: inline-flex !important;
  }
}

/* El panel reinicia la rejilla de la barra: las areas con nombre ("cover",
   "main", "side") son de la maqueta compacta y aqui estorban. */
#communityLiveRadioBar[data-mode="set"].is-expanded {
  top: 0;
  height: 100%;
  max-height: 100%;
  border-width: 0;
  border-radius: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  /* Fila extra para el scrubber, que en el panel abierto sube a ser una barra
     de verdad encima de los controles (en vez del filo del borde superior). */
  grid-template-rows: auto 1fr auto auto;
  grid-template-areas: none;
  justify-items: center;
  align-items: center;
  gap: 20px;
  padding: 16px 20px calc(28px + env(safe-area-inset-bottom));
  background: radial-gradient(120% 80% at 50% 0%, rgb(20, 20, 22), rgb(5, 5, 6) 70%);
  overflow-y: auto;
}

#communityLiveRadioBar[data-mode="set"].is-expanded > * {
  grid-area: auto;
}

/* Arrastrar hacia abajo cierra el panel: mientras el dedo baja seguimos el
   gesto (sin transicion, para que no vaya a remolque) y al soltar se anima. */
#communityLiveRadioBar[data-mode="set"].is-expanded {
  transition: transform 0.24s ease, opacity 0.24s ease;
  touch-action: pan-y;
}

#communityLiveRadioBar[data-mode="set"].is-expanded.is-dragging {
  transition: none;
}

/* Asa visual del gesto, como en las hojas inferiores del sistema. */
#communityLiveRadioBar[data-mode="set"].is-expanded::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  pointer-events: none;
}

#communityLiveRadioBar[data-mode="set"].is-expanded .community-live-radio-side {
  grid-row: 1;
  justify-self: end;
  align-self: start;
}

/* Portada grande: protagonista cuando no hay video que enseñar. */
#communityLiveRadioBar[data-mode="set"].is-expanded .community-live-radio-cover {
  grid-row: 2;
  justify-self: center;
  align-self: center;
  width: min(74vw, 320px);
  max-width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  overflow: visible;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}

#communityLiveRadioBar[data-mode="set"].is-expanded .community-live-radio-cover i {
  font-size: 54px;
}

#communityLiveRadioBar[data-mode="set"].is-expanded .community-live-radio-cover-art,
#communityLiveRadioBar[data-mode="set"].is-expanded .community-live-radio-cover-inner {
  border-radius: 18px;
  overflow: hidden;
}

#communityLiveRadioBar[data-mode="set"][data-has-video="1"].is-expanded .community-live-radio-cover {
  display: none;
}

#communityLiveRadioBar[data-mode="set"].is-expanded .sets-player-stage {
  grid-row: 2;
  align-self: center;
  width: min(100%, 760px);
  height: auto;
}

/* Audio sin video (SoundCloud): el iframe NO puede ocultarse con display:none ni
   quedarse con alto 0 —el widget deja de cargar la pista y el audio no arranca—,
   asi que se saca de la vista pero se mantiene renderizado con tamaño real. */
#communityLiveRadioBar[data-mode="set"][data-has-video="0"] .sets-player-stage {
  position: absolute;
  top: 0;
  left: 0;
  width: 320px;
  height: 120px;
  opacity: 0.01;
  pointer-events: none;
  overflow: hidden;
  transition: none;
  z-index: -1;
}

#communityLiveRadioBar[data-mode="set"].is-expanded .sets-player-embed {
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}

/* El widget nativo de SoundCloud necesita alto propio: con `height: auto` sobre
   un iframe al 100% se quedaria en nada. */
#communityLiveRadioBar[data-mode="set"][data-provider="soundcloud"][data-has-video="1"].is-expanded .sets-player-embed {
  height: 170px;
}

#communityLiveRadioBar[data-mode="set"].is-expanded .community-live-radio-main {
  grid-row: 4;
  width: min(100%, 560px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: none;
  row-gap: 18px;
}

/* Scrubber del panel abierto: el filo fino del borde sube aqui, entre la
   portada y los controles, como una barra de progreso de verdad y facil de
   arrastrar. El tirador se ve siempre (no solo al pasar por encima). */
#communityLiveRadioBar[data-mode="set"].is-expanded .sets-player-progress-line {
  position: static;
  grid-row: 3;
  width: min(100%, 560px);
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  overflow: visible;
  align-self: end;
}

#communityLiveRadioBar[data-mode="set"].is-expanded .sets-player-progress-fill {
  border-radius: 999px;
}

#communityLiveRadioBar[data-mode="set"].is-expanded .sets-player-progress-line::before {
  top: -10px;
  height: 26px;
}

#communityLiveRadioBar[data-mode="set"].is-expanded .sets-player-progress-fill::after {
  transform: translate(50%, -50%) scale(1);
}

/* Con el panel abierto se minimiza (chevron) o se arrastra hacia abajo; la cruz
   de cerrar sobra ahi y ademas cortaba la reproduccion de golpe. */
#communityLiveRadioBar[data-mode="set"].is-expanded #communityLiveRadioCloseBtn {
  display: none !important;
}

#communityLiveRadioBar[data-mode="set"].is-expanded .community-live-radio-copy {
  grid-area: auto;
  text-align: center;
  justify-items: center;
}

#communityLiveRadioBar[data-mode="set"].is-expanded .community-live-radio-copy strong {
  font-size: 20px;
  line-height: 1.25;
  white-space: normal;
}

#communityLiveRadioBar[data-mode="set"].is-expanded .community-live-radio-copy span {
  font-size: 13px;
}

#communityLiveRadioBar[data-mode="set"].is-expanded .community-live-radio-controls {
  grid-area: auto;
  width: 100%;
  gap: 12px;
  /* Sin barra de progreso que rellene el hueco, el transporte se centra. */
  justify-content: center;
}

#communityLiveRadioBar[data-mode="set"].is-expanded .community-live-radio-btn-play {
  width: 56px;
  height: 56px;
  font-size: 18px;
}

/* ==========================================================================
   Musica del perfil (subidas + enlaces en una sola lista)
   Enlaces de SoundCloud/YouTube/Spotify y archivos subidos comparten fila:
   la unica diferencia es la etiqueta de origen y las acciones.
   ========================================================================== */

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

.music-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.03);
}

.music-row.is-current {
  border-color: rgba(221, 252, 119, 0.35);
  background: rgba(221, 252, 119, 0.06);
}

.music-row-cover {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  border: 0;
  padding: 0;
  overflow: hidden;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: #0f1205;
  background: linear-gradient(180deg, #e5fc98, #c0e059);
  font-size: 15px;
}

.music-row.is-soundcloud .music-row-cover {
  background: linear-gradient(180deg, #ff8a3d, #f4511e);
  color: #fff;
}

.music-row.is-youtube .music-row-cover {
  background: linear-gradient(180deg, #ff5252, #d32f2f);
  color: #fff;
}

.music-row.is-spotify .music-row-cover {
  background: linear-gradient(180deg, #c1e93f, #88ae0b);
  color: #0f1205;
}

.music-row.is-link .music-row-cover {
  background: rgba(255, 255, 255, 0.1);
  color: #e6ebf2;
}

.music-row-artwork {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.music-row.has-artwork .music-row-artwork,
.music-row-artwork.is-ready {
  opacity: 1;
}

.music-row.has-artwork .music-row-cover-icon,
.music-row-artwork.is-ready ~ .music-row-cover-icon {
  display: none;
}

.music-row-cover-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 13px;
  background: rgba(0, 0, 0, 0.34);
  opacity: 0;
  transition: opacity 0.18s ease;
}

.music-row:hover .music-row-cover-play,
.music-row.is-current .music-row-cover-play,
.music-row.has-artwork .music-row-cover-play {
  opacity: 1;
}

.music-row-copy {
  min-width: 0;
}

.music-row-title {
  margin: 0;
  font-size: 14px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.music-row-meta {
  margin: 2px 0 0;
  font-size: 12px;
  color: rgba(214, 219, 227, 0.6);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.music-row-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.music-row-actions {
  display: flex;
  gap: 4px;
}

.music-row-btn {
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
}

.track-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  border: 1px solid rgba(221, 252, 119, 0.28);
  color: #e5fc98;
  background: rgba(221, 252, 119, 0.08);
}

.track-badge.is-source {
  border-color: rgba(255, 255, 255, 0.14);
  color: rgba(214, 219, 227, 0.75);
  background: rgba(255, 255, 255, 0.05);
}

.track-badge.is-warning {
  border-color: rgba(255, 196, 106, 0.32);
  color: #ffc46a;
  background: rgba(255, 196, 106, 0.08);
}

@media (max-width: 720px) {
  .music-row {
    grid-template-columns: 46px minmax(0, 1fr) auto;
    gap: 10px;
    padding: 9px 10px;
  }

  .music-row-cover {
    width: 46px;
    height: 46px;
  }
}

/* Formulario de anadir musica (archivo o enlace) */
.track-upload-panel {
  display: grid;
  gap: 10px;
  max-width: 520px;
}

.track-upload-modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 4px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
}

.track-upload-mode {
  border: 0;
  border-radius: 9px;
  padding: 9px 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  color: rgba(214, 219, 227, 0.7);
  background: transparent;
}

.track-upload-mode.is-active {
  color: #0f1205;
  background: linear-gradient(180deg, #e5fc98, #c0e059);
}

.track-upload-pane {
  display: grid;
  gap: 10px;
}

.track-upload-file-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 12px;
  border: 1px dashed rgba(255, 255, 255, 0.16);
}

.track-upload-file-name {
  font-size: 12px;
  color: rgba(214, 219, 227, 0.6);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.track-upload-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px;
  gap: 10px;
}

.track-upload-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  line-height: 1.35;
  cursor: pointer;
}

.track-upload-check input {
  width: 18px;
  min-width: 18px;
  height: 18px;
  margin-top: 1px;
}

.track-upload-legal {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(221, 252, 119, 0.22);
  background: rgba(221, 252, 119, 0.05);
}

.track-upload-legal-title {
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #e5fc98;
}

.track-upload-warnings {
  display: grid;
  gap: 6px;
}

.track-upload-warning {
  margin: 0;
  padding: 10px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.4;
  border: 1px solid rgba(255, 196, 106, 0.3);
  color: #ffd79a;
  background: rgba(255, 196, 106, 0.08);
}

.track-upload-status {
  margin: 0;
  font-size: 12px;
  color: rgba(214, 219, 227, 0.7);
}

.track-upload-status.is-error {
  color: #ff9d9d;
}

/* El <audio> de las pistas propias no se ve: manda la barra del reproductor. */
.sets-player-audio {
  width: 100%;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

/* ==========================================================================
   Senales de interes y actividad social
   ========================================================================== */

.detail-interest-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 4px;
}

.interest-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(230, 235, 242, 0.85);
}

.interest-btn i {
  font-size: 12px;
}

.interest-btn.is-active {
  border-color: rgba(221, 252, 119, 0.45);
  background: linear-gradient(180deg, rgba(221, 252, 119, 0.18), rgba(221, 252, 119, 0.08));
  color: #e5fc98;
}

.interest-count {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 10px;
  background: rgba(0, 0, 0, 0.28);
}

.community-activity-panel {
  padding: 4px 0 12px;
}

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

.community-activity-note {
  margin: 0 0 4px;
  font-size: 11px;
  color: rgba(214, 219, 227, 0.5);
}

.community-activity-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.03);
}

.community-activity-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
}

.community-activity-copy {
  min-width: 0;
}

.community-activity-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.35;
}

.community-activity-text strong {
  color: #e9e9e7;
}

.community-activity-date {
  font-size: 11px;
  color: rgba(214, 219, 227, 0.45);
}

/* ==========================================================================
   Fotos de anoche (recap) + feed social
   Ambos usan los tokens corporativos: verde --primary como acento vivo,
   morado --accent para la accion principal, sobre el fondo oscuro de marca.
   ========================================================================== */

.night-recap-rail {
  margin: var(--sp-4) 0;
  padding: var(--sp-4) 0 var(--sp-3);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.night-recap-rail-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 var(--sp-4) var(--sp-3);
}

.night-recap-rail-head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}

.night-recap-rail-head h3 i {
  color: var(--primary);
}

.night-recap-rail-head p {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
}

.night-recap-rail-track {
  display: flex;
  gap: var(--sp-3);
  overflow-x: auto;
  padding: 0 var(--sp-4) var(--sp-2);
  scrollbar-width: none;
}

.night-recap-rail-track::-webkit-scrollbar {
  display: none;
}

.night-recap-card {
  height: auto;
  position: relative;
  flex: 0 0 auto;
  width: 168px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  transition: transform 0.16s ease, border-color 0.16s ease;
}

.night-recap-card:hover,
.night-recap-card:focus-visible {
  transform: translateY(-2px);
  border-color: var(--line-strong);
}

.night-recap-card.is-mine {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px rgba(210, 243, 101, 0.25);
}

.night-recap-card-covers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  aspect-ratio: 1 / 1;
  background: var(--surface-2);
}

.night-recap-cover-tile {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Con una sola foto la ocupamos entera en vez de dejar tres huecos. */
.night-recap-cover-tile:only-child {
  grid-column: span 2;
  grid-row: span 2;
}

.night-recap-cover-empty {
  grid-column: span 2;
  display: grid;
  place-items: center;
  color: var(--text-soft);
  font-size: 22px;
}

.night-recap-card-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--primary);
  color: #1b2302;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.night-recap-card-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 var(--sp-3) var(--sp-3);
}

.night-recap-card-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.night-recap-card-meta {
  font-size: 11px;
  color: var(--primary);
}

.night-recap-card-place {
  font-size: 11px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.night-recap-panel {
  width: min(680px, 96vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.night-recap-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.night-recap-eyebrow {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
}

.night-recap-head h3 {
  margin: 0;
  font-size: 20px;
}

.night-recap-meta {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
}

.night-recap-body {
  flex: 1;
  overflow-y: auto;
  min-height: 160px;
}

.night-recap-empty {
  display: grid;
  place-items: center;
  min-height: 160px;
  color: var(--text-muted);
  font-size: 13px;
}

.night-recap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 4px;
}

.night-recap-photo {
  position: relative;
  padding: 0;
  border: 0;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--surface-2);
  cursor: pointer;
}

.night-recap-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.night-recap-photo.is-mine {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

.night-recap-photo-author {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12px 6px 4px;
  font-size: 10px;
  color: #fff;
  text-align: left;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72), transparent);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.night-recap-actions {
  display: flex;
  justify-content: flex-end;
}

/* --- Feed de inicio: pantallas completas con snap ------------------------- */

/* Cuando el feed toma el control, el HTML servido para SEO (hero, contador)
   deja de ocupar sitio: la pantalla entera es el feed. */
body.tt-feed-active .nonprofit-hero,
body.tt-feed-active .feed-decor,
body.tt-feed-active .feed-head {
  display: none;
}

#feed.is-social {
  /* Contenedor de scroll propio: el gesto se queda dentro del feed y cada
     diapositiva ocupa exactamente una pantalla. */
  height: calc(100dvh - var(--tt-chrome-offset, 132px));
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  overscroll-behavior: contain;
  /* CLAVE para que el scroll sea fluido. La app tiene listeners de `touchmove`
     NO pasivos en `document`/`window` (el swipe entre pestañas y el arrastre de
     las cartas): sin declarar `touch-action`, el navegador no sabe si esos
     handlers van a cancelar el gesto, asi que en CADA movimiento del dedo tiene
     que esperar a que responda JavaScript antes de mover un solo pixel, y el
     feed se siente pegajoso y a tirones.
     Con `pan-y` le decimos que el desplazamiento vertical es SUYO y nadie lo va
     a cancelar: lo hace en el compositor, a 60 fps, sin preguntar. El gesto
     horizontal (cambiar de pestaña, arrastrar una carta) sigue libre para JS.
     Lo que necesita el gesto entero para si —el mapa de Leaflet cuando se
     desbloquea— declara `touch-action: none`, que es mas restrictivo y manda. */
  touch-action: pan-y;
  scrollbar-width: none;
  display: block;
  margin: 0;
  padding: 0;
  border-radius: 18px;
  background: var(--bg-2);
  outline: none;
}

#feed.is-social::-webkit-scrollbar {
  display: none;
}

.tt-slide {
  position: relative;
  height: 100%;
  width: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* --- Diapositiva de evento / anuncio --- */

.tt-slide-event {
  justify-content: flex-end;
}

/* ============================================================
   ESTRUCTURA UNICA de toda diapositiva del feed: un div de 2 columnas.
   - .tt-slide-content (izquierda): el contenido (post, comunidad, musica,
     swipe, radio...).
   - .tt-actions (derecha): la botonera, como COLUMNA (no superpuesta). Si no es
     un post va vacia, pero reserva su columna igualmente para que todas las
     pantallas midan lo mismo.
   ============================================================ */
.tt-slide-frame {
  display: flex;
  flex-direction: row;
  height: 100%;
  width: 100%;
  min-height: 0;
}

.tt-slide-content {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Ninguna lista interna de un panel encadena su scroll con el feed: al llegar al
   final de la lista el impulso SE PARA ahi. Sin esto, el sobrante del gesto
   pasaba al feed, que ya venia lanzado, y se llevaba una o dos pantallas de
   golpe (el "a veces baja dos"). */
.tt-slide-content,
.tt-suggest-list,
.tt-music-list,
.tt-recap-grid,
.tt-live-list,
.tt-parties-map-wrap {
  overscroll-behavior: contain;
}

/* La botonera es la 2a columna: ancho fijo, centrada, y anula el posicionado
   absoluto/gutter del modelo antiguo. Alta especificidad para ganar a las
   reglas viejas de `.tt-actions`. */
/* Solo en TABLET/PC (>=761px) la botonera es COLUMNA (2a columna del marco). En
   MOVIL se deja como esta la base: superpuesta sobre el contenido (inmersivo,
   estilo TikTok) para no robarle ancho a la foto. */
@media (min-width: 761px) {
  body.tt-feed-active[data-main-tab="posts"] .tt-slide-frame > .tt-actions {
    position: static;
    flex: 0 0 var(--tt-actions-col, 64px);
    width: var(--tt-actions-col, 64px);
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    right: auto;
    left: auto;
    top: auto;
    bottom: auto;
    transform: none;
  }
}

/* Tarjeta visual del evento: contiene la imagen (fondo) y el texto (encima). En
   movil llena el slide; en PC/tablet es una tarjeta 16:9 centrada (ver mas
   abajo). Es el UNICO sitio donde se define el formato de la tarjeta. */
.tt-media-card {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.tt-media {
  position: absolute;
  inset: 0;
  cursor: pointer;
  background: var(--surface-2);
  /* Al mantener pulsado (modo mirar) el movil no debe sacar el menu de la imagen
     ni seleccionar: asi el gesto de "quitar la UI" funciona limpio. */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.tt-media-img,
.tt-media-img * {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}

.tt-media-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tt-media-empty {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: var(--text-soft);
  font-size: 46px;
}

.tt-media-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(6, 6, 7, 0.92) 0%,
    rgba(6, 6, 7, 0.62) 28%,
    rgba(6, 6, 7, 0) 58%
  );
  pointer-events: none;
}

.tt-overlay {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: var(--sp-4);
  padding-right: 74px;
}

.tt-author {
  height: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  align-self: flex-start;
}

.tt-avatar-ring {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  padding: 2px;
  background: var(--surface-2);
}

.tt-author.is-live .tt-avatar-ring {
  background: linear-gradient(135deg, var(--primary), var(--accent));
}

.tt-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.tt-avatar-fallback {
  display: grid;
  place-items: center;
  color: var(--text-soft);
  background: var(--surface);
  font-size: 13px;
}

.tt-author-name {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}

.tt-author-time {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
}

.tt-title {
  margin: 0;
  font-size: 24px;
  line-height: 1.15;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

.tt-meta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.82);
}

.tt-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tt-meta i {
  color: var(--primary);
}

.tt-caption {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.78);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tt-cta {
  align-self: flex-start;
  margin-top: 4px;
  padding: 11px 22px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: filter 0.16s ease;
}

.tt-cta:hover,
.tt-cta:focus-visible {
  filter: brightness(1.14);
}

.tt-promo-pill {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Insignia del tablon coloreada por tipo de anuncio, para distinguir de un
   vistazo compro / vendo / cambio / otros. */
.tt-board-pill {
  background: rgba(197, 223, 113, 0.22);
  color: #e2e3e0;
  box-shadow: inset 0 0 0 1px rgba(197, 223, 113, 0.45);
}
.tt-board-pill--buy {
  background: rgba(96, 165, 250, 0.22);
  color: #d6e8ff;
  box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.5);
}
.tt-board-pill--sell {
  background: rgba(251, 191, 36, 0.22);
  color: #ffedc2;
  box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.5);
}
.tt-board-pill--exchange {
  background: rgba(167, 139, 250, 0.22);
  color: #e7ddff;
  box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.5);
}

/* Botones de accion del anuncio (dentro del texto, sobre la imagen). */
.tt-board-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.tt-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(9, 9, 10, 0.55);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background 0.16s ease, filter 0.16s ease, transform 0.12s ease;
}
.tt-cta-btn:hover,
.tt-cta-btn:focus-visible {
  background: rgba(17, 17, 19, 0.8);
}
.tt-cta-btn:active {
  transform: scale(0.97);
}
.tt-cta-btn-primary {
  border-color: transparent;
  background: var(--accent);
}
.tt-cta-btn-primary:hover,
.tt-cta-btn-primary:focus-visible {
  background: var(--accent);
  filter: brightness(1.12);
}

/* Columna de acciones a la derecha, como en el resto de feeds verticales. Va
   mas abajo (bottom pequeno) para que la botonera quede en la zona baja, comoda
   para el pulgar, y no tan arriba. */
.tt-actions {
  position: absolute;
  right: 10px;
  bottom: 64px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Corazon del doble toque: crece desde el punto tocado y se desvanece. */
.tt-like-burst {
  position: absolute;
  transform: translate(-50%, -50%) scale(0.2);
  color: #ff2d55;
  font-size: 96px;
  line-height: 1;
  pointer-events: none;
  z-index: 6;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.55));
  animation: ttLikeBurst 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
@keyframes ttLikeBurst {
  0% {
    transform: translate(-50%, -50%) scale(0.2) rotate(-12deg);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  45% {
    transform: translate(-50%, -50%) scale(1.15) rotate(6deg);
    opacity: 1;
  }
  70% {
    transform: translate(-50%, -50%) scale(1) rotate(-4deg);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.4) rotate(-4deg);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tt-like-burst {
    animation-duration: 0.5s;
  }
}

.tt-action {
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  transition: transform 0.14s ease, color 0.14s ease;
}

.tt-action span {
  font-size: 11px;
  font-weight: 600;
}

.tt-action:active {
  transform: scale(0.88);
}

.tt-action.is-active {
  color: var(--primary);
}

/* Carril de acciones vacio (paneles sin acciones propias todavia): aunque no
   tenga botones, RESERVA su sitio para que la maqueta sea identica en todas las
   pantallas y no baile al pasar de una a otra. Mismo footprint que la botonera
   real: ancho de un boton (o del carril en PC) y alto de la columna. */
/* Carril de acciones aun sin funcionalidad (paneles): muestra los iconos
   atenuados para OCUPAR su sitio igual que en el post, pero no intercepta
   toques (el contenido del panel debe seguir respondiendo). */
.tt-actions-empty {
  pointer-events: none;
}

.tt-action-placeholder {
  opacity: 0.4;
}

/* --- Diapositivas de panel (swipe, gente, musica, recap) --- */

.tt-slide-panel {
  padding: var(--sp-5) var(--sp-4);
  gap: var(--sp-4);
  background: transparent;
}

.tt-panel-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 0 0 auto;
}

.tt-panel-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
}

.tt-panel-head h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
}

.tt-panel-head p {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
}

/* --- Avatar compartido de las diapositivas de comunidad --- */

.tt-live-avatar,
.tt-thread-hero-avatar {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  object-fit: cover;
  display: block;
  flex: 0 0 auto;
}

.tt-comm-avatar-fallback {
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  font-weight: 700;
  font-size: 16px;
}

/* --- Diapositiva de radio en directo --- */

.tt-slide-live .tt-live-list {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: safe center;
  gap: var(--sp-3);
  overflow-y: auto;
}

.tt-live-card {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.tt-live-card:hover {
  border-color: var(--primary);
  transform: translateY(-1px);
}

.tt-live-avatar-wrap {
  position: relative;
  flex: 0 0 auto;
}

.tt-live-pulse {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: #ff4d5e;
  border: 2px solid var(--surface);
  animation: tt-live-pulse 1.6s infinite;
}

@keyframes tt-live-pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 77, 94, 0.55); }
  70% { box-shadow: 0 0 0 9px rgba(255, 77, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 77, 94, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .tt-live-pulse { animation: none; }
}

.tt-live-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tt-live-name {
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tt-live-title {
  font-size: 13px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tt-live-meta {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #ff6b7a;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tt-live-meta i {
  font-size: 7px;
}

.tt-live-play {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--primary);
  color: #1c2304;
  font-size: 15px;
}

/* --- Diapositiva de hilo de comunidad --- */

.tt-slide-thread {
  justify-content: center;
}

.tt-thread-hero {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: 20px;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(221, 252, 119, 0.08), transparent 60%),
    var(--surface);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.tt-thread-hero:hover {
  border-color: var(--primary);
  transform: translateY(-1px);
}

.tt-thread-hero-author {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.tt-thread-hero-author-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.tt-thread-hero-name {
  font-weight: 700;
  color: var(--text);
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tt-thread-hero-time {
  font-size: 12px;
  color: var(--text-soft);
}

.tt-thread-hero-title {
  margin: 0;
  font-size: 20px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tt-thread-hero-preview {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tt-thread-hero-cta {
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Respuestas destacadas dentro del hilo: dan prueba de conversacion. */
.tt-thread-replies {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-radius: 14px;
  background: var(--bg-2);
}

.tt-thread-reply {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.tt-thread-reply-avatar {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  object-fit: cover;
  flex: 0 0 auto;
  font-size: 11px;
}

.tt-thread-reply-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 1px;
}

.tt-thread-reply-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.tt-thread-reply-likes {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.tt-thread-reply-likes i {
  color: #ff5d73;
  font-size: 10px;
}

.tt-thread-reply-text {
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============================================================
   Comentarios (modal reutilizable, estilo Instagram) + acciones
   sociales del reproductor de pista (autor, like, comentar).
   ============================================================ */