:root {
  --tt-nav-h: 0px;
}

@media (max-width: 760px) {
  :root {
    --tt-nav-h: calc(48px + env(safe-area-inset-bottom, 0px));
  }
}

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"],
body.tt-feed-active[data-main-tab="posts"] [data-main-panel="posts"] > main {
  height: calc(100dvh - var(--tt-nav-h));
  min-height: 0;
  overflow: hidden;
}

body.tt-feed-active[data-main-tab="posts"] #feed.is-social {
  height: calc(100dvh - var(--tt-nav-h));
  min-height: 0;
  flex: none;
}

/* El panel de inicio se ancla al viewport en vez de depender del flujo: asi no
   queda una franja de fondo distinto arriba (el "corte" visible sobre la foto).
   Ademas reserva sitio para la barra del reproductor cuando esta sonando algo,
   para que titulo y acciones nunca queden debajo. */
body.tt-feed-active[data-main-tab="posts"] .main-panels-layout {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: calc(var(--tt-nav-h) + var(--tt-player-h, 0px) + var(--tt-player-gap, 0px));
  height: auto;
  margin: 0;
}

/* Cuando suena algo dejamos un pequeno margen entre el reproductor y la tarjeta
   SOLO en escritorio, donde el cartel es vertical y centrado y ese aire le sienta
   bien. En movil el cartel va a sangre y ese hueco quedaba como una franja negra
   fea entre el post y el player: ahi el gap es 0 (pegado). */
body.tt-player-open {
  --tt-player-gap: 0px;
}
@media (min-width: 761px) {
  body.tt-player-open {
    --tt-player-gap: 14px;
  }
}

body.tt-feed-active[data-main-tab="posts"] .main-panels-content,
body.tt-feed-active[data-main-tab="posts"] [data-main-panel="posts"],
body.tt-feed-active[data-main-tab="posts"] [data-main-panel="posts"] > main,
body.tt-feed-active[data-main-tab="posts"] #feed.is-social {
  height: 100%;
  min-height: 0;
}

/* En pantallas anchas pero aun en modo movil (movil grande / ventana pequena,
   <761px) el contenido llenaba TODO el ancho y quedaba demasiado ancho. Lo
   acotamos a la misma columna que en PC (~430px) y lo centramos. En moviles
   reales (<430px) no acota nada: sigue a pantalla completa. A partir de 761px
   manda el encuadre de escritorio (con su carril de acciones), sin tocar. */
@media (max-width: 760px) {
  body.tt-feed-active[data-main-tab="posts"] .main-panels-content,
  body.tt-feed-active[data-main-tab="posts"] #feed.is-social {
    max-width: 430px;
    margin-inline: auto;
  }
}

/* El degradado de la barra muere dentro de la propia foto, sin borde recto. */
body.tt-feed-active[data-main-tab="posts"] .topbar {
  background: linear-gradient(
    to bottom,
    rgba(6, 6, 7, 0.82) 0%,
    rgba(6, 6, 7, 0.55) 55%,
    rgba(6, 6, 7, 0) 100%
  );
  padding-bottom: var(--sp-4);
}

body.tt-feed-active[data-main-tab="posts"] #feed.is-social {
  background: transparent;
}

/* El panel de musica debe caber entero: el plato se encoge antes que dejar los
   controles debajo de la navegacion. */
.tt-slide-music {
  justify-content: flex-start;
}

.tt-slide-music .tt-player {
  /* No encoge: si lo hacia, sus controles (play) se salian de la tarjeta y
     pisaban la lista. El alto lo controla el tamano del plato por media-query. */
  flex: 0 0 auto;
  min-height: 0;
  padding: var(--sp-3);
  gap: 4px;
}

.tt-slide-music .tt-vinyl {
  width: min(46vw, 168px);
  height: min(46vw, 168px);
  margin-bottom: var(--sp-2);
  flex: 0 0 auto;
}

.tt-slide-music .tt-vinyl-arm {
  height: 78px;
}

.tt-slide-music .tt-player-title {
  font-size: 15px;
}

.tt-slide-music .tt-player-progress {
  margin-top: var(--sp-2);
}

.tt-slide-music .tt-player-controls {
  margin-top: var(--sp-2);
}

/* Con poco alto (moviles bajos) el plato cede primero, pero la LISTA de canciones
   NO se oculta: antes se escondia y solo se veia 1 cancion. Ahora el plato encoge
   y la lista (scrollable) se queda para que aparezcan mas pistas. */
@media (max-height: 780px) {
  .tt-slide-music .tt-vinyl {
    width: 112px;
    height: 112px;
    margin-bottom: var(--sp-1);
  }
  .tt-slide-music .tt-player {
    padding: var(--sp-2);
    gap: 2px;
  }
}
/* Muy bajito: escondemos el plato (no la lista) para que manden las canciones. */
@media (max-height: 620px) {
  .tt-slide-music .tt-vinyl {
    display: none;
  }
}

/* El panel arranca justo bajo la barra de historias. Antes reservaba el alto del
   topbar MAS un extra, y como el degradado del topbar se desvanece abajo, quedaba
   demasiado hueco entre las historias y el panel. Restamos un pelin para pegarlo
   mas (el contenido del panel entra en la zona ya translucida del topbar) y
   aprovechar el espacio. */
body.tt-feed-active[data-main-tab="posts"] .tt-slide-panel {
  padding-top: calc(var(--tt-topbar-h, 150px) - var(--sp-3));
}

/* El mapa es la excepcion: va a sangre y NO reserva el hueco del topbar (la
   barra flota encima, igual que sobre el cartel de un evento). */
body.tt-feed-active[data-main-tab="posts"] .tt-slide-parties {
  padding-top: 0;
}

/* El contador va montado sobre el icono, no colgando a un lado. */
.topbar-icon-btn {
  overflow: visible;
}

.topbar-icon-btn .topbar-notif-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  margin: 0;
  min-width: 17px;
  height: 17px;
  line-height: 17px;
  padding: 0 4px;
  border: 2px solid #0b0b0c;
  font-size: 9px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}

/* ==========================================================================
   Escritorio
   El feed a pantalla completa solo tiene sentido en movil. En pantallas
   grandes se centra en una columna de ancho de telefono, con la navegacion
   lateral a su izquierda y el fondo de marca alrededor.
   ========================================================================== */

@media (min-width: 761px) {
  /* Columna de ancho de movil FIJO (`--tt-card-w`), IGUAL para todas las
     pantallas (post, tinder, paneles). Por defecto —movil y tablet— las acciones
     van SUPERPUESTAS dentro del cartel (gutter 0), como en el movil. Solo en PC
     (>=1025px, mas abajo) salen a un carril lateral (gutter 96) fuera de la
     imagen. El ancho del cartel no cambia en ningun caso. */
  body.tt-feed-active[data-main-tab="posts"] {
    --tt-nav-h: 0px;
    --tt-card-w: 430px;
    --tt-gutter: 0px;
    /* Franja reservada ARRIBA para las historias. Ajustada al contenido REAL de
       la fila plegada (aro + nombre + aire ~= 125px): antes reservaba 148px y
       sobraba una banda vacia que empequenecia el cartel. Asi el `.tt-slide-content`
       aprovecha mas alto. */
    --tt-stories-h: 128px;
  }

  body.tt-feed-active[data-main-tab="posts"] .main-panels-layout {
    left: var(--main-tabs-shell-width, 186px);
    top: var(--tt-stories-h);
    bottom: calc(var(--tt-player-h, 0px) + var(--tt-player-gap, 0px));
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* Ancho = cartel + carril de acciones. Sin recorte: los botones viven en el
     carril y no los puede cortar el contenedor de scroll. */
  body.tt-feed-active[data-main-tab="posts"] .main-panels-content {
    width: calc(var(--tt-card-w) + var(--tt-gutter));
    /* Cabe DEBAJO de la franja de historias, con un pelin de aire, y por encima
       del reproductor con su margen cuando esta sonando algo. */
    height: min(880px, calc(100dvh - var(--tt-stories-h) - var(--tt-player-h, 0px) - var(--tt-player-gap, 0px) - 24px));
    max-height: calc(100dvh - var(--tt-stories-h) - var(--tt-player-h, 0px) - var(--tt-player-gap, 0px));
    overflow: visible;
    border: 0;
    box-shadow: none;
    border-radius: 0;
  }

  body.tt-feed-active[data-main-tab="posts"] #feed.is-social {
    background: transparent;
  }

  /* Evento en 9:16 (VERTICAL): la TARJETA (`.tt-media-card`) tiene relacion FIJA
     9:16, tan grande como quepa en su columna (limitada por el alto disponible o
     por el ancho del cartel). La imagen la llena de fondo (inset:0) y el texto va
     ENCIMA, abajo, con su degradado. Centrada en su columna. */
  body.tt-feed-active[data-main-tab="posts"] .tt-slide-event .tt-slide-content {
    justify-content: center;
    align-items: center;
  }

  body.tt-feed-active[data-main-tab="posts"] .tt-media-card {
    flex: 0 0 auto;
    height: 100%;
    width: auto;
    aspect-ratio: 10 / 16;
    min-height: 0;
    max-width: 100%;
    border-radius: var(--tt-card-radius, 22px);
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
    border: 1px solid var(--line);
  }

  /* El texto va ENCIMA de la imagen (dentro de la tarjeta), abajo, compacto y
     con un degradado propio para que se lea sin tapar toda la foto. */
  body.tt-feed-active[data-main-tab="posts"] .tt-media-card .tt-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin-right: 0;
    gap: 4px;
    padding: var(--sp-4);
    padding-top: var(--sp-6);
    background: linear-gradient(
      to top,
      rgba(5, 5, 5, 0.92) 0%,
      rgba(5, 5, 5, 0.6) 45%,
      rgba(5, 5, 5, 0) 100%
    );
  }

  /* La descripcion larga se omite en la tarjeta 16:9 (compacta): manda la foto y
     el titulo/fecha/sitio. El detalle completo esta al abrir el evento. */
  body.tt-feed-active[data-main-tab="posts"] .tt-media-card .tt-caption {
    display: none;
  }

  body.tt-feed-active[data-main-tab="posts"] .tt-media-card .tt-title {
    font-size: 20px;
  }

  /* Los PANELES (gente, musica, swipe, recap, instalar...) ocupan el MISMO
     hueco 10:16 que el cartel de un evento, para que todas las pantallas del
     feed midan igual. Pero SIN marco: nada de borde, fondo ni sombra alrededor.
     El contenido de cada panel ya trae sus propias tarjetas; encerrarlas en otra
     caja dibujaba dos y tres marcos anidados. */
  body.tt-feed-active[data-main-tab="posts"] .tt-slide-panel .tt-slide-content {
    flex: 0 0 auto;
    height: 100%;
    width: auto;
    aspect-ratio: 10 / 16;
    max-width: 100%;
    min-height: 0;
    margin-inline: auto;
    overflow-y: auto;
    scrollbar-width: none;
    border-radius: var(--tt-card-radius, 22px);
    border: 0;
    background: none;
    box-shadow: none;
    padding: var(--sp-5) var(--sp-4);
  }
  body.tt-feed-active[data-main-tab="posts"] .tt-slide-panel .tt-slide-content::-webkit-scrollbar {
    display: none;
  }
  /* Instalar ya trae su propia tarjeta (borde + degradado): sin doble marco. */
  body.tt-feed-active[data-main-tab="posts"] .tt-slide-install .tt-slide-content {
    border: 0;
    background: none;
    box-shadow: none;
    padding: 0;
  }
  /* El mapa toma la tarjeta 10:16 como los demas paneles, pero SIN margenes: la
     cartografia llega hasta el borde redondeado, como la foto de un evento. */
  body.tt-feed-active[data-main-tab="posts"] .tt-slide-parties .tt-slide-content {
    padding: 0;
    overflow: hidden;
  }

  /* Tablet: acciones SUPERPUESTAS dentro del cartel (como el movil pero un poco
     mas grandes), blancas y con sombra para leerse sobre la foto. */
  body.tt-feed-active[data-main-tab="posts"] .tt-actions {
    right: var(--sp-3);
    width: auto;
    align-items: center;
    bottom: var(--sp-6);
    gap: 20px;
  }

  body.tt-feed-active[data-main-tab="posts"] .tt-action {
    font-size: 27px;
  }

  body.tt-feed-active[data-main-tab="posts"] .tt-action span {
    font-size: 12px;
  }

  /* La tarjeta de un panel (comunidad, musica, gente, mapa...) mide EXACTAMENTE
     lo que el cartel de un post: mismo alto, mismo ancho y mismo sitio. Para eso
     la seccion del panel no puede meter padding propio: robaba `--sp-5` arriba y
     abajo y `--sp-4` a los lados, y la tarjeta de comunidad salia mas pequena y
     descolocada al lado del post. El aire interior lo pone la propia tarjeta
     (`.tt-slide-content`), igual que el degradado del post va dentro del cartel.
     El carril de acciones ya lo reserva la columna del marco (`.tt-slide-frame >
     .tt-actions`), no hace falta padding para eso.
     En PC, ademas, el layout YA baja el feed bajo la franja de historias
     (main-panels-layout: top): el panel no debe volver a sumar el alto del
     topbar o el contenido queda empujado con un hueco vacio arriba. */
  body.tt-feed-active[data-main-tab="posts"] .tt-slide-panel {
    padding: 0;
  }

  /* Barra superior a lo ancho de la zona util: las historias sobre el cartel y
     los iconos al extremo derecho, lejos de la publicacion. */
  body.tt-feed-active[data-main-tab="posts"] .topbar {
    position: fixed;
    left: var(--main-tabs-shell-width, 186px);
    right: 0;
    top: 0;
    width: auto;
    transform: none;
    border-radius: 0;
    background: none;
    padding: var(--sp-3) var(--sp-5);
  }

  body.tt-feed-active[data-main-tab="posts"] .topbar-icon-btn {
    width: 44px;
    height: 44px;
    font-size: 17px;
  }

  /* Las historias viven en su FRANJA propia arriba (no sobre el cartel): fila
     centrada. En PC NO se pliegan, asi que quitamos el recorte (max-height +
     overflow) que cortaba los aros por arriba; el alto lo da su contenido. */
  body.tt-feed-active[data-main-tab="posts"] #feedGuidedRail {
    position: absolute;
    left: 50%;
    top: 8px;
    transform: translateX(-50%);
    width: calc(var(--tt-card-w) + var(--tt-gutter));
    max-width: calc(100vw - var(--main-tabs-shell-width, 186px) - 32px);
    max-height: none;
    overflow: visible;
    flex: 0 0 auto;
  }

  body.tt-feed-active[data-main-tab="posts"] #feedGuidedRail.is-tucked {
    max-height: none;
    opacity: 1;
    pointer-events: auto;
  }

  /* Padding vertical generoso: el aro y su halo caben sin que el scroll
     horizontal (overflow-x:auto, que obliga a recortar en vertical) los corte. */
  body.tt-feed-active[data-main-tab="posts"] .feed-live-strip {
    justify-content: flex-start;
    padding: 16px 12px 12px;
  }

  /* El topbar del feed reserva el alto de la franja de historias: el rail vive
     dentro (position:absolute) y, si el topbar solo mide lo que los iconos, el
     rail rebosa y se recorta contra su borde. Con este alto cabe entero. */
  body.tt-feed-active[data-main-tab="posts"] .topbar {
    min-height: var(--tt-stories-h);
    overflow: visible;
  }

  /* El rail de historias vive DENTRO de .topbar-main, que tiene overflow:hidden
     (para el intercambio buscador/historias). En PC eso recortaba los aros por
     arriba: aqui lo dejamos visible. Al buscar, el rail se oculta por opacidad,
     asi que no se sale nada. */
  body.tt-feed-active[data-main-tab="posts"] .topbar-main {
    justify-content: flex-end;
    overflow: visible;
  }

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

  /* En pantalla ancha el campo no se estira de lado a lado: se queda en una
     medida comoda junto a la lupa. Vale para todas las pestanas, no solo el
     feed, para que el perfil se comporte igual. */
  #searchCluster,
  body.tt-feed-active[data-main-tab="posts"] #searchCluster {
    flex: 0 1 360px;
  }
}

/* --------------------------------------------------------------------------
   PC (pantalla grande, >=1025px): las acciones salen a un carril lateral FUERA
   del cartel. En movil y tablet se quedan superpuestas dentro. El cartel sigue
   midiendo `--tt-card-w` en ambos casos; el carril es espacio EXTRA a su
   derecha, nunca le quita ancho a la imagen.
   -------------------------------------------------------------------------- */
@media (min-width: 1025px) {
  body.tt-feed-active[data-main-tab="posts"] {
    --tt-gutter: 96px;
  }

  /* Acciones en su carril, fuera del cartel: grandes y centradas en el hueco. */
  body.tt-feed-active[data-main-tab="posts"] .tt-actions {
    right: 0;
    width: var(--tt-gutter);
    align-items: center;
    gap: 22px;
  }

  /* Fuera, sobre fondo oscuro: iconos claros sin sombra y mas grandes. */
  body.tt-feed-active[data-main-tab="posts"] .tt-action {
    text-shadow: none;
    color: var(--text);
    font-size: 30px;
  }

  body.tt-feed-active[data-main-tab="posts"] .tt-action span {
    font-size: 13px;
  }

  body.tt-feed-active[data-main-tab="posts"] .tt-action.is-active {
    color: var(--primary);
  }

  /* Con las acciones fuera, el texto recupera su ancho completo. */
  body.tt-feed-active[data-main-tab="posts"] .tt-overlay {
    padding-right: var(--sp-4);
  }
}


/* La ultima linea del texto quedaba pegada al borde inferior (y bajo la
   navegacion): se le da aire para que respire dentro de la pantalla. */
body.tt-feed-active[data-main-tab="posts"] .tt-overlay {
  padding-bottom: var(--sp-5);
}

body.tt-feed-active[data-main-tab="posts"] .tt-actions {
  bottom: calc(var(--sp-5) + 88px);
}

/* (La columna de acciones de los paneles la resuelve ya la estructura unica de
   2 columnas `.tt-slide-frame > .tt-actions`; aqui no hace falta nada.) */

/* Las historias son del inicio: fuera de la pestana de eventos no pintan nada
   y ademas empujaban el contenido de comunidad, chat y usuario 170px hacia
   abajo, con lo que cambiar de pestana parecia no hacer nada. */
body:not([data-main-tab="posts"]) #feedGuidedRail {
  display: none;
}

/* En pantallas bajas las tarjetas se compactan antes de recortarse. */
@media (max-height: 720px) {
  .tt-suggest-avatar-wrap {
    width: 56px;
    height: 56px;
    margin-bottom: 4px;
  }

  .tt-suggest-card {
    padding: var(--sp-3) var(--sp-2) var(--sp-2);
  }

  .tt-suggest-proof {
    display: none;
  }
}

/* La botonera manda: por encima del cartel, del velo y del texto. Antes
   compartia plano con la imagen y cualquier duda de apilado hacia que el toque
   cayera en el cartel (abriendo el evento) en vez de en el boton. */
.tt-slide {
  isolation: isolate;
}

.tt-media {
  z-index: 0;
}

.tt-overlay {
  z-index: 5;
}

.tt-actions {
  z-index: 30;
}

/* El menu de la publicacion, por encima de todo lo de su diapositiva. */
.tt-slide-menu {
  position: absolute;
  right: 12px;
  bottom: 96px;
  z-index: 40;
  min-width: 210px;
  /* Con diez opciones se comia la pantalla entera: se limita y se desplaza. */
  max-height: min(58vh, 420px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.tt-slide.menu-open .tt-slide-menu {
  display: block;
}

/* Area de toque comoda: los iconos son finos y el dedo no. */
.tt-action {
  min-width: 44px;
  min-height: 44px;
  justify-content: center;
}

/* --- Mantener pulsado: el cartel, entero y sin nada encima ---------------- */

/* Con `cover` la imagen se recorta para llenar la pantalla. Al mantener
   pulsado interesa lo contrario: verla completa, aunque sobren margenes. */
body.tt-peeking .tt-media-img {
  object-fit: contain;
  background: #050505;
}

body.tt-peeking .tt-media {
  background: #050505;
}

/* Sin bordes ni sombras que recorten: la foto manda. */
body.tt-peeking .tt-media {
  border-radius: 0;
  border-color: transparent;
  box-shadow: none;
}

/* La transicion hace que el cambio no de un salto brusco. */
.tt-media-img {
  transition: object-fit 0s, background 0.18s ease;
}
/* ===== Calendario del topbar (modal agenda) ===== */
.agenda-modal-panel {
  width: 760px;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 24px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 12px;
  overflow: hidden;
}

.agenda-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.agenda-modal-head h3 {
  font-size: 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.agenda-calendar {
  min-height: 0;
  overflow-y: auto;
}

.agenda-calendar .feed-calendar-board {
  margin: 0;
}

.agenda-loading {
  margin-top: 8px;
  text-align: center;
  font-size: 12px;
  color: rgba(225, 235, 195, 0.75);
}

.agenda-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0;
  font-size: 12px;
  color: rgba(225, 235, 195, 0.72);
}

.agenda-legend i {
  margin-right: 5px;
  color: #ddf787;
}

/* Aviso en la celda del mes: ese dia tiene algo tuyo. */
.agenda-cell-marks {
  position: absolute;
  right: 6px;
  bottom: 6px;
  display: inline-flex;
  gap: 4px;
  font-size: 9px;
  color: #ddf787;
  pointer-events: none;
}

/* ===== Modal de los eventos de un dia ===== */
.agenda-day-modal-panel {
  width: 820px;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 24px);
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 12px;
  overflow: hidden;
}

.agenda-day-list {
  min-height: 0;
  overflow-y: auto;
  display: grid;
  gap: 16px;
  align-content: start;
}

.agenda-day-summary {
  margin: 0;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(221, 250, 124, 0.28);
  background: rgba(30, 30, 33, 0.55);
  font-size: 13px;
  color: #e5e9d5;
}

.agenda-day-summary i {
  margin-right: 6px;
  color: #ddf787;
}

.agenda-hour-block {
  display: grid;
  gap: 8px;
}

.agenda-hour-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(210, 243, 101, 0.18);
}

.agenda-hour-label {
  font-size: 15px;
  font-weight: 700;
  color: #ddf787;
}

.agenda-hour-count {
  font-size: 12px;
  color: rgba(225, 235, 195, 0.62);
}

.agenda-hour-feed {
  display: grid;
  gap: 10px;
}

/* Fila de evento propia del calendario: cartel a la izquierda, datos en medio y
   los contadores a la derecha. No reutiliza `.card` del feed porque aqui manda
   la lectura en lista, no la retícula. */
.agenda-event {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 10px 14px 10px 10px;
  border-radius: 14px;
  border: 1px solid rgba(210, 243, 101, 0.2);
  background: rgba(10, 10, 11, 0.8);
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.agenda-event:hover {
  background: rgba(30, 30, 33, 0.85);
  border-color: rgba(221, 250, 124, 0.5);
}

.agenda-event.is-marked {
  border-color: rgba(221, 250, 124, 0.55);
  box-shadow: inset 3px 0 0 rgba(221, 250, 124, 0.75);
}

.agenda-event-media {
  width: 84px;
  height: 84px;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(6, 6, 7, 0.72);
  display: grid;
  place-items: center;
}

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

.agenda-event-media-empty {
  color: rgba(225, 235, 195, 0.4);
  font-size: 22px;
}

.agenda-event-body {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.agenda-event-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #f1f1f0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agenda-event-meta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 12px;
  color: rgba(225, 235, 195, 0.72);
  min-width: 0;
}

.agenda-event-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agenda-event-meta i {
  color: #ddf787;
}

.agenda-event-summary {
  margin: 0;
  font-size: 12px;
  color: rgba(225, 235, 195, 0.58);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agenda-event-side {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: rgba(225, 235, 195, 0.68);
  white-space: nowrap;
}

.agenda-event-now {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(221, 250, 124, 0.18);
  color: #e7f6b5;
  font-weight: 700;
}

.agenda-event-now i {
  font-size: 7px;
}

.agenda-event-owner {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.agenda-event-go {
  color: rgba(225, 235, 195, 0.45);
}

.agenda-marks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.agenda-mark {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid rgba(221, 250, 124, 0.35);
  background: rgba(30, 30, 33, 0.7);
  color: #e7f6b5;
}

.agenda-mark.is-liked {
  border-color: rgba(255, 130, 160, 0.45);
  color: #ffb3c6;
}

@media (max-width: 760px) {
  .agenda-modal-panel,
  .agenda-day-modal-panel {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border: none;
    border-radius: 0;
    padding:
      max(16px, env(safe-area-inset-top, 0px))
      12px
      max(12px, env(safe-area-inset-bottom, 0px));
  }

  .agenda-calendar .feed-calendar-board {
    padding: 8px;
  }

  .agenda-calendar .feed-calendar-board-head h3 {
    font-size: clamp(24px, 8vw, 36px);
  }

  /* En movil la columna de contadores se va debajo del titulo. */
  .agenda-event {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 10px;
  }

  .agenda-event-media {
    width: 64px;
    height: 64px;
  }

  .agenda-event-side {
    grid-column: 2;
    gap: 10px;
  }

  .agenda-event-go {
    display: none;
  }
}

/* ===== Admin: catalogo de musica ===== */
.admin-music-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.admin-music-stat {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(210, 243, 101, 0.2);
  background: rgba(10, 10, 11, 0.8);
}

.admin-music-stat-value {
  font-size: 20px;
  font-weight: 800;
  color: #ddf787;
}

.admin-music-stat-label {
  font-size: 11px;
  color: rgba(225, 235, 195, 0.68);
}

.admin-music-top {
  margin-bottom: 12px;
}

.admin-music-top-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.admin-music-top-item {
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid rgba(210, 243, 101, 0.24);
  background: rgba(10, 10, 11, 0.8);
  font-size: 12px;
  color: #e5e9d5;
}

.admin-music-top-item b {
  color: #ddf787;
  margin-right: 5px;
}

.admin-music-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.admin-music-filters input {
  flex: 1 1 240px;
  min-width: 0;
}

.admin-music-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(210, 243, 101, 0.16);
  background: rgba(10, 10, 11, 0.7);
}

.admin-music-row-main {
  min-width: 0;
  flex: 1 1 320px;
}

.admin-music-row-title {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 700;
  color: #f1f1f0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-music-row-meta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  font-size: 12px;
  color: rgba(225, 235, 195, 0.7);
}

.admin-music-source {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid rgba(210, 243, 101, 0.3);
  color: #e7f6b5;
}

.admin-music-source.is-soundcloud {
  border-color: rgba(255, 149, 61, 0.5);
  color: #ffb877;
}

.admin-music-source.is-youtube {
  border-color: rgba(255, 92, 92, 0.5);
  color: #ff9e9e;
}

.admin-music-flag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
}

.admin-music-flag.is-ok {
  color: #ddf787;
}

.admin-music-flag.is-off {
  color: #ffb3b3;
}

.admin-music-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 12px;
  font-size: 12px;
  color: rgba(225, 235, 195, 0.7);
}

.admin-music-pager button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ===== Aviso "HOY" sobre el cartel del feed =====
   Mismo lenguaje que el resto de distintivos de la app: pildora de 999px, 10px
   en negrita con el interletrado abierto, borde de 1px del color del acento y
   sombra tenida del mismo tono. "HOY" reutiliza EXACTAMENTE el degradado de
   `.card-badge-today` (vista de tarjetas) y "EMPEZADA" el de `.card-now-badge`,
   para que un mismo estado se vea igual en todas las vistas. */
.tt-today-badge {
  position: absolute;
  /* Alineado con el padding del overlay: el distintivo cae a plomo sobre el
     avatar y el titulo, no flotando a su aire. */
  top: var(--sp-4);
  left: var(--sp-4);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid rgba(220, 251, 116, 0.62);
  background: linear-gradient(180deg, #dcfb74, #c0ec2e);
  color: #161c04;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  box-shadow: 0 10px 20px rgba(72, 91, 9, 0.34);
  pointer-events: none;
}

.tt-today-badge i {
  font-size: 9px;
}

/* Ya ha empezado: el rojo de "AHORA", con el punto latiendo. */
.tt-today-badge.is-now {
  border-color: rgba(255, 170, 120, 0.72);
  background: linear-gradient(180deg, rgba(255, 120, 92, 0.96), rgba(220, 70, 42, 0.92));
  color: #fff6f2;
  box-shadow: 0 10px 20px rgba(126, 39, 8, 0.3);
}

@media (max-width: 760px) {
  .tt-today-badge {
    top: var(--sp-3);
    left: var(--sp-3);
    padding: 3px 8px;
    font-size: 9px;
  }
}

/* ===== Buscador unificado: secciones del desplegable =====
   Mismo item de siempre (`.dj-search-item`); lo que se anade es la cabecera de
   cada grupo, con el estilo de etiqueta que ya usa la barra lateral del admin:
   10px, mayusculas y el interletrado abierto. */
.dj-search-group + .dj-search-group {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(210, 243, 101, 0.14);
}

.dj-search-group-label {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 6px 2px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(204, 218, 156, 0.75);
}

.dj-search-group-label i {
  font-size: 10px;
  color: var(--primary);
}

/* Cartel del evento: cuadrado con esquinas, no circulo como el avatar. */
.dj-search-avatar-square {
  border-radius: 8px;
}

/* La fila de musica es un boton entero para poder reproducir desde cualquier
   punto, asi que hereda la rejilla del item y anula el aspecto de boton. */
.dj-search-item-btn {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.dj-search-item.track-row {
  padding: 8px 10px;
  display: block;
}

.dj-search-play {
  font-size: 11px;
  color: var(--primary);
  opacity: 0.75;
}

.dj-search-item-btn:hover .dj-search-play {
  opacity: 1;
}