.comments-panel {
  width: min(560px, 96vw);
  max-height: min(82vh, 720px);
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

.comments-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
}

.comments-head-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 0;
  max-width: calc(100% - 80px);
}

.comments-head-copy strong {
  font-size: 15px;
  color: var(--text);
}

.comments-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.comments-close {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
}

.comments-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.comments-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.comments-item-avatar {
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: 999px;
}

.comments-avatar {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  object-fit: cover;
  display: grid;
  place-items: center;
}

.comments-item-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.comments-item-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text);
  word-break: break-word;
}

.comments-item-name {
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  margin-right: 4px;
}

.comments-item-time {
  font-size: 11px;
  color: var(--text-soft);
}

.comments-empty {
  margin: auto;
  text-align: center;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 30px 12px;
}

.comments-empty i {
  font-size: 28px;
  opacity: 0.5;
}

.comments-empty p {
  margin: 0;
  font-weight: 700;
  color: var(--text);
}

.comments-compose {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
}

.comments-compose input {
  flex: 1;
  min-width: 0;
  height: 42px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg-2);
  color: var(--text);
  padding: 0 16px;
  font-size: 14px;
  outline: none;
}

.comments-compose input:focus {
  border-color: var(--primary);
}

.comments-send-btn {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 15px;
}

/* ============================================================
   Comentarios: hoja inferior (movil) / panel lateral (PC).
   Por defecto —movil y tablet— sale DESDE ABAJO ocupando el ancho, con las
   esquinas superiores redondeadas y un tirador, estilo Instagram. En PC con
   sitio (>=1025px) se acopla como panel LATERAL derecho a pantalla completa.
   Se engancha a las clases modal-enter/modal-leave que pone show()/hide(). */
#commentsModal {
  align-items: flex-end;
  justify-content: center;
}
#commentsModal .comments-panel {
  width: 100%;
  max-width: 100%;
  max-height: 86vh;
  border-radius: 22px 22px 0 0;
  border-bottom: 0;
}
/* Tirador de la hoja: pista visual de que arrastra/viene de abajo. */
#commentsModal .comments-head::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
}
#commentsModal.modal-enter .comments-panel {
  animation: commentsSheetIn 0.32s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
#commentsModal.modal-leave .comments-panel {
  animation: commentsSheetOut 0.26s ease both;
}
@keyframes commentsSheetIn {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes commentsSheetOut {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(100%);
  }
}
@keyframes commentsSideIn {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes commentsSideOut {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}

@media (min-width: 1025px) {
  /* PC con espacio: panel lateral derecho, a pantalla completa. */
  #commentsModal {
    align-items: stretch;
    justify-content: flex-end;
  }
  #commentsModal .comments-panel {
    width: min(440px, 42vw);
    max-width: 440px;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
  }
  /* En lateral no hay tirador (no viene de abajo). */
  #commentsModal .comments-head::before {
    display: none;
  }
  #commentsModal.modal-enter .comments-panel {
    animation: commentsSideIn 0.34s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }
  #commentsModal.modal-leave .comments-panel {
    animation: commentsSideOut 0.26s ease both;
  }
}

@media (prefers-reduced-motion: reduce) {
  #commentsModal.modal-enter .comments-panel,
  #commentsModal.modal-leave .comments-panel {
    animation: none;
  }
}

/* --- Acciones sociales del reproductor de pista (solo panel abierto) --- */

.sets-player-social {
  display: none;
  width: min(100%, 560px);
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 auto;
}

#communityLiveRadioBar[data-mode="set"].is-expanded .sets-player-social {
  display: flex;
}

#communityLiveRadioBar .sets-player-social.hidden {
  display: none !important;
}

.sets-player-author {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px;
  border: 0;
  background: none;
  color: inherit;
  cursor: default;
  min-width: 0;
  text-align: left;
}

.sets-player-author.is-linkable {
  cursor: pointer;
}

.sets-player-author-avatar {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
  flex: 0 0 auto;
}

.sets-player-author-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

.sets-player-author-kicker {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

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

.sets-player-social-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.sets-player-social-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.sets-player-social-btn:hover {
  border-color: var(--primary);
}

.sets-player-social-btn.is-active {
  color: #ff5d73;
  border-color: rgba(255, 93, 115, 0.5);
}

/* --- Minimapa de ubicacion de la fiesta --- */

.location-panel {
  width: min(560px, 96vw);
  max-height: min(84vh, 720px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.location-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-right: 40px;
}

.location-head strong {
  font-size: 17px;
  color: var(--text);
}

.location-place {
  font-size: 13px;
  color: var(--text-muted);
}

.location-map {
  flex: 1;
  min-height: 300px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-2);
}

.location-map .leaflet-container {
  width: 100%;
  height: 100%;
  background: var(--bg-2);
}

/* --- Mapa de fiestas vistas (multiples puntos) ---
   Ya no es un modal que se abre desde la barra: es una diapositiva mas del feed
   (`.tt-slide-parties`) y va A SANGRE, sin titular ni marco: solo el mapa, igual
   que un cartel ocupa su pantalla entera. */
.tt-slide-parties {
  padding: 0;
  gap: 0;
}

.tt-slide-parties .tt-slide-content {
  gap: 0;
}

.tt-parties-map-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  border-radius: inherit;
  overflow: hidden;
  background: var(--bg-2);
}

.tt-parties-map {
  width: 100%;
  height: 100%;
}
.tt-parties-map .leaflet-container {
  width: 100%;
  height: 100%;
  background: var(--bg-2);
}

/* Bloqueado: el dedo es del feed, para poder pasar de pantalla por encima del
   mapa. Va con `!important` porque pisa a `.leaflet-touch-drag`, que deja
   `touch-action: none` aunque los handlers ya esten apagados. */
.tt-parties-map.is-map-locked,
.tt-parties-map.is-map-locked.leaflet-container {
  touch-action: pan-y !important;
}

/* Suelto: el dedo es del mapa. */
.tt-parties-map.is-map-unlocked,
.tt-parties-map.is-map-unlocked.leaflet-container {
  touch-action: none !important;
}

/* El mapa nace bloqueado para que el dedo siga pasando de pantalla; este boton
   lo libera cuando quieres arrastrarlo o hacer zoom. */
.tt-parties-map-toggle {
  position: absolute;
  right: 10px;
  /* Por encima del reproductor de radio, que flota sobre el feed. */
  bottom: calc(10px + var(--tt-player-h, 0px) + var(--tt-player-gap, 0px));
  z-index: 1000;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(6, 6, 7, 0.82);
  backdrop-filter: blur(6px);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.tt-parties-map-toggle.is-active {
  border-color: var(--primary);
  color: var(--primary);
}

/* Marcador de fiesta: el CARTEL en miniatura clavado en el mapa (con su punta),
   que es lo que el usuario reconoce del feed. Si la fiesta se guardo sin imagen,
   dentro cae el icono de siempre. */
.parties-map-pin {
  display: flex;
  flex-direction: column;
  align-items: center;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.55));
}

.parties-map-pin-poster {
  position: relative;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  overflow: hidden;
  border-radius: 12px;
  border: 2px solid var(--primary, #d2f365);
  background: #0c0c0e;
  color: #ff2d55;
  font-size: 20px;
}

/* La foto tapa al icono de reserva; si falla y se quita, el icono reaparece. */
.parties-map-pin-poster img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* La punta que apunta al sitio exacto (el ancla del icono cae justo aqui). */
.parties-map-pin-tip {
  width: 0;
  height: 0;
  margin-top: -1px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 9px solid var(--primary, #d2f365);
}

.location-empty {
  height: 100%;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  color: var(--text-muted);
  padding: 20px;
}

.location-empty i {
  font-size: 34px;
  opacity: 0.5;
}

.location-empty p {
  margin: 0;
  font-weight: 700;
  color: var(--text);
}

.location-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.location-distance {
  font-size: 13px;
  font-weight: 700;
  color: var(--primary);
}

.location-maps-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--text);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
}

.location-maps-link:hover {
  border-color: var(--primary);
}

.tt-thread-more {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.tt-thread-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-2);
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s ease;
}

.tt-thread-row:hover {
  border-color: var(--primary);
}

.tt-thread-row-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  font-size: 14px;
}

.tt-thread-row-meta {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tt-deck {
  position: relative;
  flex: 1;
  min-height: 0;
}

.tt-deck .feed-deck-list {
  height: 100%;
}

/* Gente */

/* Musica */

.tt-music-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.tt-music-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}

.tt-music-cover {
  position: relative;
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface-2);
  cursor: pointer;
  padding: 0;
}

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

.tt-music-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(10, 13, 3, 0.42);
  color: #fff;
  font-size: 15px;
}

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

.tt-music-copy h4 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tt-music-copy p {
  margin: 0;
  font-size: 11px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Fotos de anoche */

.tt-recap-grid {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--sp-3);
  align-content: start;
}

.tt-recap-card {
  height: auto;
  position: relative;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--surface-2);
  cursor: pointer;
}

.tt-recap-card.is-mine {
  border-color: var(--primary);
}

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

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

.tt-recap-copy {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 22px 10px 10px;
  text-align: left;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.82), transparent);
}

.tt-recap-title {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

@media (max-width: 640px) {
  #feed.is-social {
    --tt-chrome-offset: 108px;
    border-radius: 0;
  }

  .tt-title {
    font-size: 21px;
  }

  .tt-actions {
    bottom: 108px;
  }
}

/* Pantalla de descarga de la app dentro del feed. */

.tt-slide-install {
  justify-content: center;
  align-items: center;
  text-align: center;
  background: transparent;
}

/* La diapositiva de descarga es un HERO que LLENA el slide: tarjeta con
   degradado + halo verde, logo grande, lista de ventajas y CTA. Antes era una
   columna estrecha centrada que dejaba medio panel vacio. */
.tt-slide-install .tt-slide-content {
  justify-content: stretch;
}

.tt-install-inner {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* `safe center` centra cuando cabe, pero si el alto se reduce (p.ej. con el
     reproductor abierto) NO recorta arriba: alinea al inicio y deja hacer scroll
     interno para llegar al boton, en vez de cortar el CTA. */
  justify-content: safe center;
  text-align: center;
  gap: var(--sp-2);
  padding: var(--sp-4);
  border-radius: var(--tt-card-radius, 22px);
  border: 1px solid rgba(210, 243, 101, 0.22);
  background:
    radial-gradient(120% 70% at 50% -8%, rgba(176, 209, 67, 0.24), transparent 60%),
    linear-gradient(180deg, rgba(14, 14, 15, 0.92), rgba(8, 8, 8, 0.96));
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  overflow-y: auto;
  scrollbar-width: none;
}
.tt-install-inner::-webkit-scrollbar {
  display: none;
}

/* Halo detras del logo para que el icono destaque como en una store. */
.tt-install-hero {
  position: relative;
  display: grid;
  place-items: center;
  margin-bottom: 0;
}

.tt-install-glow {
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(210, 243, 101, 0.4), transparent 66%);
  filter: blur(6px);
  pointer-events: none;
}

.tt-install-logo {
  position: relative;
  width: 58px;
  height: 58px;
  object-fit: contain;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.5));
}

.tt-slide-install h3 {
  margin: 0;
  font-size: 21px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.15;
}

.tt-slide-install p {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-muted);
  max-width: 34ch;
}

/* Ventajas: rellenan el centro y dan sustancia. */
.tt-install-features {
  list-style: none;
  margin: var(--sp-1) 0 0;
  padding: 0;
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tt-install-features li {
  display: flex;
  align-items: center;
  gap: 11px;
  text-align: left;
  padding: 8px 11px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.tt-install-feature-ic {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 14px;
  color: #d1ed73;
  background: rgba(210, 243, 101, 0.14);
  box-shadow: inset 0 0 0 1px rgba(210, 243, 101, 0.3);
}

.tt-install-features li div {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.tt-install-features li strong {
  font-size: 13px;
  color: var(--text);
}

.tt-install-features li div span {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.3;
}

.tt-install-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: var(--sp-2);
  padding: 12px 30px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--primary), #afd339);
  color: #1b2302;
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 12px 26px rgba(175, 211, 57, 0.3);
  transition: filter 0.16s ease, transform 0.16s ease;
}

.tt-install-cta:hover,
.tt-install-cta:focus-visible {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.tt-install-note {
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.tt-install-note .fa-star {
  color: #ffcf5a;
  font-size: 11px;
}

/* ==========================================================================
   Inicio a pantalla completa
   El contenedor de la app ocupa todo el ancho y, en la pestana de inicio,
   exactamente el alto del viewport: barra arriba, feed en medio, nav abajo.
   Nada de scroll de pagina, para que el unico gesto sea el salto entre
   pantallas del feed.
   ========================================================================== */

.app {
  width: 100%;
  margin: 0;
}

/* --- Barra superior compacta: solo marca, lupa y campana --- */

.topbar-quick {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.topbar-icon-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(12, 12, 13, 0.6);
  color: var(--text);
  font-size: 16px;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease;
}

.topbar-icon-btn:hover,
.topbar-icon-btn:focus-visible {
  border-color: var(--line-strong);
  background: rgba(17, 17, 19, 0.82);
}

.topbar-icon-btn .topbar-notif-badge {
  top: -2px;
  right: -2px;
}


/* --- Pestana de inicio: viewport bloqueado --- */

body.tt-feed-active[data-main-tab="posts"] {
  overflow: hidden;
}

body.tt-feed-active[data-main-tab="posts"] .app {
  height: 100dvh;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

body.tt-feed-active[data-main-tab="posts"] .topbar {
  flex: 0 0 auto;
  position: relative;
}

body.tt-feed-active[data-main-tab="posts"] .topbar-main {
  min-height: 44px;
}

body.tt-feed-active[data-main-tab="posts"] .main-panels-layout,
body.tt-feed-active[data-main-tab="posts"] .main-panels-content,
body.tt-feed-active[data-main-tab="posts"] [data-main-panel="posts"] {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

body.tt-feed-active[data-main-tab="posts"] [data-main-panel="posts"] > main {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}

/* La publicacion es lo primero que se ve: el feed ocupa todo el hueco que
   queda entre la barra y la navegacion inferior. */
body.tt-feed-active[data-main-tab="posts"] #feed.is-social {
  flex: 1;
  height: auto;
  min-height: 0;
  border-radius: 0;
}

/* --- Historias: capa flotante sobre la publicacion --- */

/* Las historias ocupan la columna central de la barra. Al avanzar se pliegan
   en vertical, asi que la barra encoge a solo marca e iconos en vez de dejar
   un hueco vacio. */
#feedGuidedRail {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  transition: max-height 0.28s ease, opacity 0.22s ease;
  max-height: 132px;
}

#feedGuidedRail.is-tucked {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}

/* La navegacion inferior es fija en movil: el feed le reserva su alto para que
   la ultima pantalla no quede por debajo. */
@media (max-width: 760px) {
  body.tt-feed-active[data-main-tab="posts"] .app {
    padding: 0 0 calc(48px + env(safe-area-inset-bottom, 0px));
  }
}

/* El pie y la barra de cookies no pueden robar alto al feed: fuera del flujo
   mientras el inicio esta a pantalla completa. */
body.tt-feed-active[data-main-tab="posts"] .site-footer {
  display: none;
}

body.tt-feed-active[data-main-tab="posts"] #adsConsentBar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(48px + env(safe-area-inset-bottom, 0px));
  z-index: 41;
  margin: 0;
  width: auto;
  max-width: none;
  /* La regla base lo centra con left:50% + translateX(-50%); aqui lo anclamos
     a todo el ancho, asi que hay que anular tambien el desplazamiento. */
  transform: none;
  border-radius: 0;
}

/* Marca compacta: en el inicio la barra es solo un carril de iconos. */
body.tt-feed-active[data-main-tab="posts"] .brand-logo {
  height: 34px;
  width: auto;
}

body.tt-feed-active[data-main-tab="posts"] .topbar {
  padding: var(--sp-1) var(--sp-2);
}

/* ==========================================================================
   Barra superior con las historias dentro
   Sin fondo propio: la barra flota sobre la publicacion y solo los avatares y
   los iconos tienen presencia. Igual que la lupa y la campana, que pierden su
   pastilla y se quedan en icono limpio.
   ========================================================================== */

.topbar::before {
  display: none;
}

.topbar {
  background: transparent;
}

/* Iconos sin pastilla: solo el glifo, con sombra para que se lea sobre
   cualquier cartel. */
.topbar-icon-btn {
  border: 0;
  background: none;
  color: #fff;
  font-size: 19px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
}

.topbar-icon-btn:hover,
.topbar-icon-btn:focus-visible {
  border: 0;
  background: none;
  color: var(--primary);
}

/* Marca | historias | iconos, en la misma fila. */
/* Flex, no grid: la barra tiene cuatro piezas (historias, buscador, iconos y
   el menu de cuenta) y con una plantilla de tres columnas las historias se
   quedaban con ancho cero. */
body.tt-feed-active[data-main-tab="posts"] .topbar-main {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 0;
}

body.tt-feed-active[data-main-tab="posts"] #feedGuidedRail,
body.tt-feed-active[data-main-tab="posts"] #searchCluster {
  flex: 1 1 auto;
  min-width: 0;
}

body.tt-feed-active[data-main-tab="posts"] .topbar.is-searching #feedGuidedRail {
  flex: 0 0 auto;
}

body.tt-feed-active[data-main-tab="posts"] .topbar-quick,
body.tt-feed-active[data-main-tab="posts"] .topbar-actions {
  flex: 0 0 auto;
}

body.tt-feed-active[data-main-tab="posts"] .topbar {
  padding: var(--sp-1) var(--sp-2) 0;
}

/* La barra se superpone a la publicacion en vez de empujarla: la primera
   pantalla se ve entera. */
body.tt-feed-active[data-main-tab="posts"] .topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 14;
  background: linear-gradient(to bottom, rgba(6, 6, 7, 0.78) 34%, rgba(6, 6, 7, 0) 100%);
}

body.tt-feed-active[data-main-tab="posts"] .app {
  position: relative;
}

/* --- Historias mas pequenas --- */

body.tt-feed-active[data-main-tab="posts"] .feed-live-strip-shell {
  padding: 0;
  border-radius: 0;
}

body.tt-feed-active[data-main-tab="posts"] .feed-live-strip {
  gap: 2px;
  /* Un poco mas abajo: pegadas al borde superior quedaban muy justas, sobre
     todo con la muesca o la barra de estado del movil. */
  padding: 18px 2px 8px;
}

body.tt-feed-active[data-main-tab="posts"] .feed-live-story {
  min-width: 0;
  padding: 0 3px;
  /* Gap uniforme entre aro y nombre en TODAS las historias: las sugerencias
     traian `gap:6px` propio y su texto quedaba mas abajo que el resto. Con esto
     todas las etiquetas quedan a la misma distancia. */
  gap: 0;
}

body.tt-feed-active[data-main-tab="posts"] .feed-live-story-ring {
  width: 54px;
  height: 54px;
  padding: 2px;
}



body.tt-feed-active[data-main-tab="posts"] .feed-live-story-name {
  font-size: 10px;
  max-width: 62px;
}

body.tt-feed-active[data-main-tab="posts"] .feed-live-story-follow-badge,
body.tt-feed-active[data-main-tab="posts"] .feed-live-story-badge {
  width: 18px;
  height: 18px;
  font-size: 9px;
}

/* --- Centro de notificaciones ---------------------------------------------- */

.topbar-notifications-count {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  margin-left: 6px;
  border-radius: 999px;
  background: var(--primary);
  color: #1b2302;
  font-size: 12px;
  font-weight: 700;
  vertical-align: middle;
}

.topbar-notifications-filters {
  display: flex;
  gap: 6px;
  padding: 0 0 var(--sp-3);
}

.topbar-notifications-filter {
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.16s ease, color 0.16s ease, background 0.16s ease;
}

.topbar-notifications-filter:hover {
  border-color: var(--line-strong);
  color: var(--text);
}

.topbar-notifications-filter.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: #1b2302;
}

.topbar-notifications-group + .topbar-notifications-group {
  margin-top: var(--sp-4);
}

.topbar-notifications-group-label {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
}

/* El avatar lleva el tipo pegado en una esquina: se distingue un like de una
   invitacion sin leer el texto. */
.topbar-notification-media-wrap {
  position: relative;
  flex: 0 0 auto;
  display: inline-block;
  line-height: 0;
}

.topbar-notification-glyph {
  position: absolute;
  right: -3px;
  bottom: -3px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 2px solid var(--surface);
  background: var(--text-soft);
  color: #fff;
  font-size: 9px;
  line-height: 1;
}

.topbar-notification-glyph.is-like {
  background: #ff5f7a;
}

.topbar-notification-glyph.is-follow {
  background: var(--accent);
}

.topbar-notification-glyph.is-going,
.topbar-notification-glyph.is-recap {
  background: var(--primary);
  color: #1b2302;
}

.topbar-notification-glyph.is-comment {
  background: #5aa2ff;
}

.topbar-notification-glyph.is-invite {
  background: #ffb24d;
  color: #2a1602;
}

.topbar-notification-glyph.is-live {
  background: #e23a5a;
}

.topbar-notification-glyph.is-event {
  background: #a78bfa;
}

/* Lo no leido se marca con una barra lateral en vez de solo un fondo: se ve
   igual de bien en la lista larga. */
.topbar-notification-item.is-unread {
  position: relative;
}

.topbar-notification-item.is-unread::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 999px;
  background: var(--primary);
}

/* ==========================================================================
   Pantallas de panel: gente, musica y swipe
   ========================================================================== */

/* --- Gente: lista de filas, no rejilla de cuadrados --- */

/* Dimensiones fijas y recorte: sin esto las fotos verticales deformaban la
   fila entera. */
/* --- Musica: reproductor --- */

.tt-slide-music {
  align-items: stretch;
}

.tt-player {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: 22px;
  background: linear-gradient(165deg, rgba(130, 108, 246, 0.14), rgba(15, 15, 17, 0.9));
  text-align: center;
}

/* Plato de vinilo: el disco gira mientras suena y el brazo baja sobre el.
   La caratula del artista hace de etiqueta central. */
.tt-vinyl {
  position: relative;
  width: 190px;
  height: 190px;
  margin-bottom: var(--sp-3);
}

.tt-vinyl-disc {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background:
    repeating-radial-gradient(circle at 50% 50%, #14161a 0 2px, #0b0d10 2px 4px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  animation: tt-vinyl-spin 4s linear infinite;
  animation-play-state: paused;
}

.tt-player.is-playing .tt-vinyl-disc {
  animation-play-state: running;
}

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

.tt-vinyl-label {
  width: 40%;
  height: 40%;
  border-radius: 999px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--primary);
  color: #1b2302;
  font-size: 26px;
  box-shadow: 0 0 0 4px rgba(10, 13, 3, 0.85);
}

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

/* Punto central del disco. */
.tt-vinyl-label::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #1b2302;
}

.tt-vinyl-arm {
  position: absolute;
  top: 2px;
  right: 6px;
  width: 8px;
  height: 92px;
  border-radius: 999px;
  background: linear-gradient(180deg, #e1e5d6, #a4aa91);
  transform-origin: top center;
  transform: rotate(28deg);
  transition: transform 0.5s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

.tt-player.is-playing .tt-vinyl-arm {
  transform: rotate(6deg);
}

.tt-vinyl-arm-head {
  position: absolute;
  left: -4px;
  bottom: -8px;
  width: 16px;
  height: 20px;
  border-radius: 4px;
  background: #edeeec;
}

.tt-player-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
}

.tt-player-user {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.tt-player-user-avatar {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  object-fit: cover;
  display: block;
}

.tt-player-user-avatar-fallback {
  display: grid;
  place-items: center;
  background: var(--surface-2);
  color: var(--primary);
  font-size: 11px;
  font-weight: 700;
}

.tt-player-user-name {
  font-size: 12px;
  color: var(--primary);
  font-weight: 600;
}

.tt-player-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}

.tt-player-chip {
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 10px;
  color: var(--text-muted);
}

.tt-player-progress {
  position: relative;
  width: 100%;
  height: 6px;
  margin-top: var(--sp-3);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  cursor: pointer;
  overflow: hidden;
}

.tt-player-progress-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  transition: width 0.25s linear;
}

.tt-player-times {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.tt-player-controls {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-3);
}

.tt-player-skip {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  font-size: 16px;
  cursor: pointer;
}

.tt-player-skip:hover {
  color: var(--text);
}

.tt-player-play {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 0;
  border-radius: 999px;
  background: var(--primary);
  color: #1b2302;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(210, 243, 101, 0.28);
  transition: transform 0.14s ease;
}

.tt-player-play:active {
  transform: scale(0.94);
}

.tt-queue-label {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.tt-queue-row {
  /* Hereda `.music-row` (grid 52px/1fr/auto), pero solo tiene UN hijo (el boton),
     que quedaba aplastado en la 1a columna y ocultaba el titulo. La volvemos
     bloque para que el boton ocupe toda la fila con su propio layout. */
  display: block;
  border: 0;
  background: none;
  padding: 0;
}

.tt-queue-open {
  height: auto;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  cursor: pointer;
  text-align: left;
}

.tt-queue-art {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--surface-2);
  color: var(--text-soft);
}

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

.tt-queue-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

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

.tt-queue-meta {
  font-size: 11px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tt-queue-time {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--text-soft);
  font-variant-numeric: tabular-nums;
}

/* --- Estetica de la lista de canciones: filas mas vivas, con play al pasar --- */
.tt-queue-label {
  margin: 0 2px 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary);
}

.tt-queue-open {
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}
.tt-queue-open:hover,
.tt-queue-open:focus-visible {
  background: rgba(130, 108, 246, 0.14);
  border-color: rgba(130, 108, 246, 0.4);
  transform: translateY(-1px);
}
.tt-queue-open:active {
  transform: scale(0.99);
}

/* Icono de play que aparece sobre la caratula al pasar el raton/tocar. */
.tt-queue-art {
  position: relative;
}
.tt-queue-art::after {
  content: "\f04b"; /* fa-play */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 13px;
  color: #fff;
  background: rgba(5, 5, 6, 0.55);
  opacity: 0;
  transition: opacity 0.15s ease;
}
.tt-queue-open:hover .tt-queue-art::after,
.tt-queue-open:focus-visible .tt-queue-art::after {
  opacity: 1;
}

/* --- Swipe: botonera bajo el mazo --- */

.tt-deck {
  display: flex;
  flex-direction: column;
}

.tt-deck .feed-deck-list {
  flex: 1;
  min-height: 0;
}

.tt-deck-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  padding-top: var(--sp-3);
}

.tt-deck-btn {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(12, 12, 13, 0.72);
  color: var(--text-muted);
  font-size: 20px;
  cursor: pointer;
  transition: transform 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}

.tt-deck-btn:active {
  transform: scale(0.9);
}

.tt-deck-btn-open {
  width: 44px;
  height: 44px;
  font-size: 15px;
}

.tt-deck-btn-nope:hover {
  border-color: #ff5f7a;
  color: #ff5f7a;
}

.tt-deck-btn-like {
  border-color: var(--primary);
  color: var(--primary);
}

.tt-deck-btn-like:hover {
  background: var(--primary);
  color: #1b2302;
}



/* --- Sugerencias de perfiles: tarjeta con accion a todo el ancho ----------- */

/* Accion a todo el ancho, separada por una linea: el objetivo de la tarjeta es
   seguir, asi que el area de pulsado es toda la base. */

/* --- Sugerencias de perfiles: carrusel horizontal de tarjetas -------------- */

/* El carrusel se centra en el hueco de la pantalla: una sola fila arriba
   dejaria la mitad inferior vacia. */
/* Centrado solo si sobra sitio. Con `justify-content: center` a secas, en
   pantallas bajas la rejilla se desbordaba HACIA ARRIBA y se comia el titulo. */
.tt-slide-people-inner {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: safe center;
  overflow-y: auto;
}

/* Rejilla 2x2: dos arriba, dos abajo, sin arrastre lateral. */
.tt-suggest-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
  padding: var(--sp-2) 0 var(--sp-3);
}

.tt-suggest-list::-webkit-scrollbar {
  display: none;
}

.tt-suggest-card {
  position: relative;
  width: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--sp-4) var(--sp-3) var(--sp-3);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
}

.tt-suggest-dismiss {
  height: 26px;
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-soft);
  font-size: 13px;
  cursor: pointer;
}

.tt-suggest-dismiss:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
}

.tt-suggest-top {
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: center;
}

.tt-suggest-avatar-wrap {
  overflow: hidden;
  width: 76px;
  height: 76px;
  margin-bottom: var(--sp-2);
  border-radius: 999px;
  padding: 2px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  display: grid;
  place-items: center;
}

.tt-suggest-avatar {
  width: 100%;
  height: 100%;
  border-radius: 999px;
  object-fit: cover;
  display: block;
  background: var(--surface-2);
}

.tt-suggest-avatar-fallback {
  display: grid;
  place-items: center;
  background: var(--surface-2);
  color: var(--primary);
  font-size: 26px;
  font-weight: 700;
}

.tt-suggest-name {
  max-width: 100%;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tt-suggest-handle {
  max-width: 100%;
  font-size: 11px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tt-suggest-proof {
  max-width: 100%;
  font-size: 10px;
  color: var(--text-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tt-suggest-follow {
  height: auto;
  width: 100%;
  margin-top: var(--sp-3);
  padding: 9px 12px;
  border: 0;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: filter 0.16s ease;
}

.tt-suggest-follow:hover {
  filter: brightness(1.12);
}

.tt-suggest-follow.is-following {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text-soft);
  cursor: default;
}

/* Insignia de procedencia de cada pista del feed de musica. */
.tt-source-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
}

.tt-source-badge.is-soundcloud {
  border-color: rgba(255, 136, 0, 0.5);
  color: #ff8800;
}

.tt-source-badge.is-youtube {
  border-color: rgba(255, 60, 60, 0.5);
  color: #ff4d4d;
}

.tt-source-badge.is-spotify {
  border-color: rgba(179, 229, 16, 0.5);
  color: #b3e510;
}

.tt-source-badge.is-upload {
  border-color: var(--line-strong);
  color: var(--primary);
}

.tt-slide-music .tt-music-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  margin-top: var(--sp-3);
}

/* ==========================================================================
   Interacciones del inicio: buscador, pulsacion mantenida y mazo
   ========================================================================== */

/* --- Buscador que empuja las historias -------------------------------------
   Historias y buscador comparten la columna central. Al abrir, las historias
   se encogen a cero y el campo ocupa su sitio: una transicion, no un salto. */

.topbar-main {
  overflow: hidden;
}

#feedGuidedRail,
#searchCluster {
  transition: max-width 0.28s ease, opacity 0.22s ease, transform 0.28s ease;
}

#searchCluster {
  max-width: 0;
  opacity: 0;
  transform: translateX(14px);
  pointer-events: none;
  overflow: hidden;
  padding: 0;
}

.topbar.is-searching #searchCluster {
  max-width: 100%;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.topbar.is-searching #feedGuidedRail {
  max-width: 0;
  opacity: 0;
  transform: translateX(-14px);
  pointer-events: none;
}

#searchCluster .search-group {
  width: 100%;
}

#searchCluster input {
  width: 100%;
}

/* Los iconos necesitan leerse sobre cualquier cartel, ahora que la barra no
   tiene fondo propio. */
.topbar-icon-btn {
  background: rgba(6, 6, 7, 0.42);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.topbar-icon-btn:hover,
.topbar-icon-btn:focus-visible {
  background: rgba(6, 6, 7, 0.62);
}

/* --- Pulsacion mantenida: la publicacion, limpia --- */

/* Solo se atenuan: quitarles los eventos dejaba botones muertos si el modo
   mirar se activaba sin querer. Se oculta TODA la interfaz (barra superior con
   historias, botonera, textos, degradados, navegacion inferior y el reproductor)
   para dejar SOLO la foto/video, como en TikTok. */
body.tt-peeking .tt-actions,
body.tt-peeking .tt-overlay,
body.tt-peeking .topbar,
body.tt-peeking #feedGuidedRail,
body.tt-peeking .main-tabs-shell,
body.tt-peeking #communityLiveRadioBar,
body.tt-peeking #feedLoadMoreSentinel,
body.tt-peeking .tt-today-badge,
body.tt-peeking .tt-media-scrim {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}

body.tt-peeking .tt-actions,
body.tt-peeking .tt-overlay {
  transform: translateY(6px);
}

.tt-actions,
.tt-overlay,
.topbar,
.main-tabs-shell,
.tt-media-scrim {
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* --- Mazo de swipe: que ocupe el hueco ------------------------------------
   La regla base usa `clamp(225px, 60vw, 200px)`, cuyo maximo es menor que el
   minimo, asi que la carta nunca crecia. Aqui se dimensiona con el alto del
   panel, que es lo que sobra en una pantalla completa. */

/* La carta del mazo tiene FORMA DE CARTA VERTICAL (tipo tinder), no un
   rectangulo horizontal: se dimensiona por ALTO (llena el mazo) y el ancho sale
   de una proporcion de carta (retrato). Esquinas redondeadas, sombra y borde. */
/* El mazo es el contenedor de referencia: la carta se mide contra SU alto y SU
   ancho, no contra el viewport. */
.tt-deck .feed-deck-list {
  container-type: size;
  container-name: deck;
}

/* El alto sale del menor de dos limites -el que da el alto del mazo y el que
   deja su ancho- y ademas se acota entre un minimo y un maximo. Antes solo se
   miraba el alto (94%) con un `max-width: 100%` de parche: en pantallas altas
   la carta crecia hasta desbordar y el cartel salia cortado. */
.tt-deck .feed-deck-list .feed-simple-row.feed-deck-card,
.tt-deck .feed-deck-list .feed-simple-row.feed-deck-card.is-tall-poster,
.tt-deck .feed-deck-list .feed-simple-row.feed-deck-card.is-extra-tall-poster {
  /* El tamano sale de lo que ocupa el ABANICO, no solo la carta de delante: las
     de detras van giradas hasta 13 grados y desplazadas hasta 66px en x / 28px
     en y (ver updateStackPositions). Una carta girada ocupa mas que su propio
     rectangulo, asi que el alto util se reduce a ~0.9 y hay que descontar los
     desplazamientos; si no, las esquinas del abanico se salen del mazo y se ven
     cortadas en seco. Se coge el menor de los dos limites (alto y ancho). */
  height: clamp(240px, min(calc(88cqh - 56px), calc(110cqw - 110px)), 600px);
  width: auto;
  max-width: 84cqw;
  aspect-ratio: 0.7;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Sin soporte de container queries se vuelve al comportamiento de antes, pero
   con techo y suelo para que la carta no se desmadre en pantallas grandes. */
@supports not (height: 1cqh) {
  .tt-deck .feed-deck-list .feed-simple-row.feed-deck-card,
  .tt-deck .feed-deck-list .feed-simple-row.feed-deck-card.is-tall-poster,
  .tt-deck .feed-deck-list .feed-simple-row.feed-deck-card.is-extra-tall-poster {
    height: clamp(240px, 78%, 600px);
    max-width: 84%;
  }
}

/* La imagen de dentro respeta las esquinas de la carta. */
.tt-deck .feed-deck-list .feed-simple-row.feed-deck-card .feed-deck-card-media {
  border-radius: inherit;
  overflow: hidden;
}

/* El cartel llena la carta entera: nada de bandas vacias. Lo que no puede pasar
   es que la CARTA se salga del mazo, y de eso se encarga el tamano de arriba. */
.tt-deck .feed-deck-list .feed-simple-row.feed-deck-card .feed-deck-card-poster {
  object-fit: cover;
  object-position: center center;
}

/* El panel deja un margen a los lados: la carta no toca los bordes (forma de
   tarjeta). A la derecha reserva ademas el carril de acciones (gutter) para que
   la carta no se meta debajo de la botonera. */
.tt-slide-panel[data-tt-slide="swipe"] {
  padding-left: var(--sp-4);
  /* El padding derecho (carril de acciones) lo pone la regla unica de
     `.tt-slide-panel`; aqui solo el margen izquierdo de la carta. */
}

.tt-deck .feed-deck-list {
  overflow: clip;
  /* Sitio para la sombra y para las cartas de detras, que van giradas hasta 9
     grados y desplazadas: con 44px la esquina superior se cortaba en seco. */
  overflow-clip-margin: 80px;
}

.tt-deck-actions {
  padding-top: var(--sp-4);
}

/* El alto del feed no puede depender de una cadena de cinco contenedores flex:
   basta con que un ancestro no propague el limite para que todo se estire. La
   barra superior flota (position:absolute), asi que el feed puede ocupar el
   viewport menos la navegacion inferior, y punto. */