/* ---- 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 PC (>=1025px) la botonera es COLUMNA (2a columna del marco), porque





   solo ahi `--tt-gutter` vale 96px y `.main-panels-content` reserva ancho EXTRA





   para ella. En movil y TABLET (761-1024) se deja como esta la base:





   superpuesta sobre el contenido (inmersivo, estilo TikTok).





   Antes esto arrancaba en 761px: entre 761 y 1024 la columna se quedaba con sus





   64px de `--tt-actions-col` mientras el gutter era 0, asi que se los robaba al





   cartel y salia de 366px en vez de 430. */





@media (min-width: 1025px) {





  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;





}











/* --- Prueba social del "Voy" ------------------------------------------------





   Cartelito de "van 12" dentro del degradado del cartel. Arranca FUERA DE SITIO





   y transparente a proposito: quien lo entra es `.is-onscreen`, que pone y quita





   el observador de diapositivas, asi que la animacion se repite cada vez que





   vuelves al cartel en vez de dispararse una sola vez al pintar el feed.





   El bloque global de `prefers-reduced-motion` ya deja estas animaciones en





   0.001ms, con lo que el estado final (visible) se aplica igual. */





.tt-going-proof {





  display: inline-flex;





  align-items: center;





  gap: 7px;





  align-self: flex-start;





  margin: 4px 0 0;





  padding: 5px 11px;





  border-radius: 999px;





  border: 1px solid rgba(210, 243, 101, 0.38);





  background: rgba(210, 243, 101, 0.14);





  color: #eaf7bd;





  font-size: 12px;





  font-weight: 700;





  line-height: 1;





  white-space: nowrap;





  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);





  opacity: 0;





  transform: translateY(6px);





}











.tt-going-proof i {





  color: var(--primary);





  font-size: 12px;





}











/* `:not(.is-bumped)` en vez de jugar con especificidades: el latido de marcar





   "Voy" manda sobre la entrada, sin depender del orden de la cascada. */





.tt-slide-event.is-onscreen .tt-going-proof:not(.is-bumped) {





  animation: ttGoingProofIn 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) 0.18s forwards;





}











@keyframes ttGoingProofIn {





  0% {





    opacity: 0;





    transform: translateY(6px) scale(0.94);





  }





  60% {





    opacity: 1;





    transform: translateY(0) scale(1.05);





  }





  100% {





    opacity: 1;





    transform: translateY(0) scale(1);





  }





}











/* Latido al marcar o desmarcar "Voy" desde la botonera. */





.tt-going-proof.is-bumped {





  animation: ttGoingProofBump 0.42s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;





}











@keyframes ttGoingProofBump {





  0% {





    opacity: 1;





    transform: translateY(0) scale(1);





  }





  35% {





    opacity: 1;





    transform: translateY(0) scale(1.16);





  }





  100% {





    opacity: 1;





    transform: translateY(0) scale(1);





  }





}











/* Muestra de comentarios dentro del degradado del cartel: dos frases reales,





   recortadas a una linea cada una, y el enlace al hilo completo. Es un boton





   (abre el mismo modal que el icono de comentar), asi que hay que deshacer el





   aspecto de boton que trae la hoja base. */





/* --- Comentarios como chat en directo ---------------------------------------

   Una lista quieta de comentarios no cuenta nada: parece una cita pegada bajo

   el cartel. Aqui las burbujas se TURNAN, como el chat de un directo: entra

   una, se queda un momento, se va hacia arriba y llega la siguiente, en bucle.

   El movimiento es lo que dice "esto esta pasando ahora y hay gente".



   La rotacion es CSS puro: todas comparten el mismo hueco y se reparten el

   ciclo con `animation-delay`. Sin temporizadores en JS que haya que limpiar al

   repintar el feed. */

.tt-comments-peek {

  position: relative;

  display: block;

  width: 100%;

  /* Sin alto: el globo flota HACIA ARRIBA desde este punto, encima de la foto y
     por encima del bloque de texto. Antes reservaba 46px como primera linea del
     texto y empujaba dia, titulo y sitio hacia abajo; ahora no ocupa nada, asi
     que el cartel se lee igual haya comentarios o no. */
  height: 0;
  margin: 0;
  /* Arriba del todo del bloque de texto: el globo sube desde aqui, asi que si
     se quedara en su sitio -detras de las caras de "van 12"- flotaria justo
     encima de ellas y las taparia. Puesto el primero, sube a la foto limpia. */
  order: -1;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  font: inherit;
  min-height: 0;
  overflow: visible;
  /* La caja es de ancho completo para que el globo sepa cuanto puede crecer,
     pero solo el globo recibe el dedo: el resto de la banda era un boton
     invisible tapando lo que hubiera debajo -en la pieza del mapa, justo el
     boton de "Como llegar"-. */
  pointer-events: none;
}


/* Sobre el mapa o la musica el globo desaparece: pertenece al cartel, y ahi
   caeria encima del pie de la pieza -donde vive el boton de "Como llegar"-. */
.tt-media-card.is-pieza .tt-comments-peek {
  display: none;
}


.tt-comments-bubble {
  position: absolute;
  left: 0;
  bottom: 6px;
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  opacity: 0;
  transform: translateY(14px);
}

/* La cara va SUELTA, fuera del globo, como en cualquier chat. Es el detalle que
   convierte "un dato mas del cartel" en "esto lo ha dicho alguien". */
.tt-comments-bubble-avatar {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border-radius: 999px;
  object-fit: cover;
  border: 1.5px solid rgba(210, 243, 101, 0.55);
  background: rgba(20, 20, 24, 0.9);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.tt-comments-bubble-body {
  display: inline-flex;
  flex-direction: column;
  min-width: 0;
  max-width: 100%;
  padding: 5px 12px 6px;
  border-radius: 14px 14px 14px 4px;
  border: 1px solid rgba(210, 243, 101, 0.22);
  /* Un pelin de verde de marca en el fondo: la separa de las filas de datos
     (fecha, sitio), que son grises. Sin color se leia como una mas. */
  background: linear-gradient(135deg, rgba(38, 44, 28, 0.92), rgba(20, 20, 24, 0.9));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}

.tt-comments-bubble-user {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.2px;
  color: var(--primary);
  line-height: 1.2;
}

.tt-comments-bubble-text {
  font-size: 12.5px;
  line-height: 1.3;
  color: #fff;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Cada burbuja hace SU turno y se va: 3.6s de reloj propio, una sola vez, y la
   siguiente arranca cuando la anterior ya no esta. Pasado el ultimo turno no
   queda nada encima del cartel.

   Que se VAYA es la gracia: el comentario asoma para decir que ahi dentro hay
   gente, no es un dato del evento. Quedandose para siempre era una pegatina
   fija tapando la foto -y un boton invisible en mitad del cartel-.

   Antes el ciclo duraba `total * 3.6s` con la ventana de visibilidad clavada en
   la mitad del ciclo, asi que de tres comentarios en adelante dos burbujas se
   pisaban en el mismo hueco. Con un turno de duracion fija las cuentas salen
   solas para cualquier cantidad.

   Cuelga de `.is-onscreen` para que solo se mueva la diapositiva que estas
   viendo -y para que al volver al cartel los comentarios se vuelvan a asomar,
   en vez de haberse gastado la primera vez y ya-. */
.tt-slide-event.is-onscreen .tt-comments-bubble {
  animation: ttBurbujaTurno 3.6s cubic-bezier(0.2, 0.9, 0.25, 1) both;
  animation-delay: calc(0.35s + var(--burbuja-orden, 0) * 3.6s);
}

/* Con una sola no hay a quien dar paso: se queda un rato mas antes de irse. */
.tt-slide-event.is-onscreen .tt-comments-peek.is-unica .tt-comments-bubble {
  animation-duration: 5.4s;
}



/* El turno entero, de la nada a la nada: entra desde abajo, se para para que de
   tiempo a leerla, y se va hacia arriba como en un chat.

   `pointer-events` viaja en los fotogramas a proposito: una burbuja a opacidad 0
   sigue siendo una caja que se lleva el toque, y con el globo flotando sobre la
   foto eso son clics perdidos en mitad del cartel. Solo se puede pulsar mientras
   se ve. */
@keyframes ttBurbujaTurno {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(0.96);
    pointer-events: none;
  }
  7% {
    opacity: 1;
    transform: translateY(0) scale(1.02);
    pointer-events: auto;
  }
  12%,
  78% {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
  }
  92%,
  100% {
    opacity: 0;
    transform: translateY(-16px) scale(0.98);
    pointer-events: none;
  }
}



.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).





   ============================================================ */

















/* --- Etiqueta de cuenta IA --------------------------------------------------





   Va pegada al nombre en el feed, en los comentarios y en el perfil. Discreta





   pero legible sobre foto: el objetivo es que se vea siempre, no que llame la





   atencion. Un solo estilo para las tres pantallas. */

/* --- Cerca de ti + cuenta atras ---------------------------------------------
   Dos chapas que van juntas bajo la fecha del cartel: "te pilla al lado" y
   "queda poco". Son las dos unicas razones por las que alguien cambia de idea
   mirando un cartel, asi que van ARRIBA, pegadas a la fecha, y no al final.
   Comparten fila con la prueba social del "Voy" (`.tt-going-proof`), que ya
   tenia ese sitio: `.tt-fomo` es solo el contenedor que las alinea. */
/* --- Racimo de caras flotando sobre el cartel --------------------------------
   Quien va y quien ha comentado, en burbujas que se mecen despacio. El movimiento
   es lo que las convierte en "hay gente aqui" en vez de en cuatro miniaturas
   pegadas: cada una lleva su propio desfase (`--burbuja-i`) para que no suban y
   bajen a la vez como un bloque. Van sobre el degradado del cartel, abajo a la
   izquierda, que es donde no tapan ni el titulo del cartel ni las chapas.
   `pointer-events: none` porque el cartel entero es un boton. */
.tt-people {
  /* En el flujo del overlay, NO absoluto: `.tt-media` cubre la tarjeta entera,
     asi que cualquier cosa anclada a su borde inferior acaba debajo del texto.
     Aqui abre la columna, justo encima de los comentarios: primero quien esta,
     luego lo que se dice. */
  display: flex;
  align-items: center;
  align-self: flex-start;
  margin: 0;
  pointer-events: none;
}

.tt-people-bubble {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 2px solid rgba(12, 12, 14, 0.9);
  background: var(--surface-2, #16161a);
  /* La foto SI se recorta en circulo (lo hace el `img`), pero la burbuja no:
     la chapita del "Voy" tiene que poder asomar por fuera del borde. */
  overflow: visible;
  position: relative;
  /* Se solapan como una baraja: ocupan poco y se leen como un grupo. */
  margin-right: -11px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
  animation: ttFlota 4.2s ease-in-out infinite;
  animation-delay: calc(var(--burbuja-i, 0) * -0.7s);
}

.tt-people-bubble:last-child {
  margin-right: 0;
}

.tt-people-bubble img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* Quien ha dicho "Voy" pesa mas que quien ha comentado, asi que se ve mas: la
   burbuja crece, el aro se tine del verde de la casa y lleva LA MISMA mano del
   boton "Voy" de la derecha. Quien pulsa ese boton se ve aparecer aqui, y la
   relacion no hay que explicarla. */
.tt-people-bubble.is-going {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-color: var(--primary, #d2f365);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(210, 243, 101, 0.28);
  z-index: 1;
}

.tt-people-going {
  position: absolute;
  right: -3px;
  bottom: -3px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid rgba(12, 12, 14, 0.92);
  background: var(--primary, #d2f365);
  color: #161c04;
  font-size: 8px;
  line-height: 1;
}

.tt-people-more {
  padding: 0 2px;
  border-color: rgba(210, 243, 101, 0.5);
  background: rgba(20, 26, 8, 0.92);
  color: var(--primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

@keyframes ttFlota {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

@media (max-width: 760px) {
  .tt-people-bubble {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    margin-right: -10px;
  }

  .tt-people-bubble.is-going {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
  }

  .tt-people-going {
    width: 16px;
    height: 16px;
    font-size: 7px;
  }
}

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

/* Pila de avisos SOBRE el cartel: "Hoy"/"Ahora" arriba y debajo las chapas de
   cerca/cuenta atras/"van 12". Todas dicen lo mismo -"esto te toca, y ya"- asi
   que se leen de una pasada en la esquina, en vez de partidas entre la foto y
   el texto. `pointer-events: none` porque el cartel entero es un boton: una
   chapa no puede tragarse el toque que abre el evento. */
.tt-badges {
  position: absolute;
  top: var(--sp-4);
  left: var(--sp-4);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  max-width: min(78%, 340px);
  pointer-events: none;
}

/* Dentro de la pila deja de flotar por su cuenta: lo coloca la pila. */
.tt-badges .tt-today-badge {
  position: static;
  top: auto;
  left: auto;
}

.tt-fomo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
}

@media (max-width: 760px) {
  .tt-badges {
    top: var(--sp-3);
    left: var(--sp-3);
  }
}

.tt-fomo .tt-going-proof {
  margin: 0;
}

.tt-fomo-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

.tt-fomo-chip i {
  font-size: 11px;
}

/* Cerca de verdad: verde de la casa. Muy cerca (andando): naranja y latiendo,
   porque es el unico caso en el que la distancia deja de ser un dato y pasa a
   ser un empujon. */
.tt-fomo-near {
  border-color: rgba(110, 234, 142, 0.4);
  background: rgba(110, 234, 142, 0.15);
  color: #d8ffe4;
}

.tt-fomo-near i {
  color: #6eea8e;
}

.tt-fomo-near.is-hot {
  border-color: rgba(255, 149, 61, 0.5);
  background: rgba(255, 149, 61, 0.18);
  color: #ffe3c8;
  animation: ttNearLatido 2.4s ease-in-out infinite;
}

.tt-fomo-near.is-hot i {
  color: #ff953d;
}

.tt-fomo-urgency {
  border-color: rgba(255, 209, 102, 0.4);
  background: rgba(255, 209, 102, 0.14);
  color: #ffeec4;
}

.tt-fomo-urgency i {
  color: #ffd166;
}

@keyframes ttNearLatido {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(255, 149, 61, 0);
  }
  50% {
    box-shadow: 0 0 0 5px rgba(255, 149, 61, 0.16);
  }
}

/* Señal en el boton de ubicacion. El pin es lo que se mira cuando quieres saber
   "¿esto donde cae?": si la respuesta es "al lado", tiene que verse ANTES de
   abrir el mapa. El punto va sobre el pin; los km, debajo, donde el resto de
   botones llevan su contador. */
.tt-action.is-near {
  position: relative;
  color: #6eea8e;
}

.tt-action.is-near.is-near-hot {
  color: #ff953d;
}

.tt-action-near-dot {
  position: absolute;
  top: -1px;
  right: 50%;
  transform: translateX(16px);
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #6eea8e;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.45);
}

.tt-action.is-near-hot .tt-action-near-dot {
  background: #ff953d;
  animation: ttNearPunto 1.8s ease-in-out infinite;
}

@keyframes ttNearPunto {
  0%,
  100% {
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.45), 0 0 0 0 rgba(255, 149, 61, 0.55);
  }
  60% {
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.45), 0 0 0 7px rgba(255, 149, 61, 0);
  }
}

.tt-action .tt-action-near-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
}

@media (prefers-reduced-motion: reduce) {
  .tt-fomo-near.is-hot,
  .tt-action.is-near-hot .tt-action-near-dot {
    animation: none;
  }
}

/* El dia, encima del titulo y con el mismo peso visual que un cartel de papel:
   primero CUANDO, luego QUE, luego DONDE. Estaba metido en la linea de meta,
   junto al sitio y en gris, con la fecha larga entera ("Martes, 1 de septiembre
   de 2026"): ahi no se leia bajando deprisa, que es como se mira este feed.

   La alternativa que se probo antes fue una barra de chapas de dias flotando
   sobre la foto, y era peor: una tercera capa de avisos encima del cartel. El
   dato tenia que entrar EN la tarjeta, no volar por encima. */
.tt-day {
  margin: 0 0 2px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}

/* Hoy y "ahora mismo" en color de marca: es lo unico que cambia lo que haces en
   los proximos diez minutos. Si todos los dias fueran de color, ninguno lo
   seria. */
.tt-day.is-now {
  color: var(--primary);
}