/* =========================================================
   BANANA FRIENDS · PLANES Y GRUPOS · AJUSTES SOLO WEB
   No modifica la composición visual móvil ni tablet.
========================================================= */

/* La copia de escritorio permanece fuera del flujo en móvil. */
body.bf-page-planes .plan-host-desktop {
  display: none !important;
}

@media (min-width: 941px) {
  /* Mismo ancho fijo que Inicio, cabecera y footer. */
  body.bf-page-planes > .app {
    width: min(calc(100% - (var(--bf-space-page, 3rem) * 2)), 1180px) !important;
    max-width: 1180px !important;
  }

  body.bf-page-planes .top-snap,
  body.bf-page-planes .plans-list-heading,
  body.bf-page-planes #planesGruposWrap,
  body.bf-page-planes .pg-wrap,
  body.bf-page-planes .pg-head,
  body.bf-page-planes .pg-list,
  body.bf-page-planes .card {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
  }

  /* Imagen panorámica en escritorio. */
  body.bf-page-planes .card,
  body.bf-page-planes .card-image,
  body.bf-page-planes .card-image > img,
  body.bf-page-planes .card-overlay {
    min-height: 300px !important;
  }

  body.bf-page-planes .card-image {
    grid-template-columns: 420px minmax(0, 1fr) !important;
  }

  body.bf-page-planes .card-overlay,
  body.bf-page-planes .card-glass-meta {
    min-width: 0 !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
  }

  /*
   * Fila superior real: Organiza y asistentes comparten el mismo flex.
   * Se elimina el escalado heredado que desplazaba visualmente los avatares.
   */
  body.bf-page-planes .card-overlay .plan-people-strip {
    position: absolute !important;
    top: 20px !important;
    right: 22px !important;
    left: 22px !important;
    width: auto !important;
    height: 36px !important;
    min-height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
    transform: none !important;
    transform-origin: center !important;
    z-index: 9 !important;
    pointer-events: none;
  }

  /* El avatar antiguo inyectado por JS no se muestra. */
  body.bf-page-planes .card-overlay .plan-creator-slot {
    display: none !important;
  }

  /* Organizador mostrado dentro de la fila común. */
  body.bf-page-planes .plan-host-desktop {
    display: flex !important;
    align-items: center !important;
    align-self: center !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    height: 36px !important;
    min-height: 36px !important;
    margin: 0 !important;
    gap: 9px !important;
    color: var(--plans-muted, #6b6b72) !important;
    font-size: .76rem !important;
    line-height: 1.2 !important;
    pointer-events: auto;
  }

  body.bf-page-planes .plan-host-desktop > img {
    display: block !important;
    flex: 0 0 36px !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    border: 1px solid #e1ddd9 !important;
    border-radius: 50% !important;
  }

  body.bf-page-planes .plan-host-desktop > span {
    min-width: 0 !important;
    white-space: nowrap !important;
  }

  body.bf-page-planes .plan-host-desktop strong {
    color: var(--plans-ink, #171719) !important;
    font-weight: 800 !important;
  }

  /* La versión original del organizador se conserva para móvil, pero no se duplica en web. */
  body.bf-page-planes .card-glass-meta > .plan-host-details {
    display: none !important;
  }

  /* Más respiración entre la fila de personas y el título del plan. */
  body.bf-page-planes .card-glass-meta {
    position: static !important;
    padding-top: 80px !important;
  }

  /* Asistentes centrados exactamente en la misma línea de 36 px. */
  body.bf-page-planes .card-overlay .plan-avatars {
    position: static !important;
    inset: auto !important;
    display: flex !important;
    align-items: center !important;
    align-self: center !important;
    justify-content: flex-end !important;
    flex: 0 0 auto !important;
    height: 36px !important;
    min-height: 36px !important;
    margin: 0 !important;
    gap: 8px !important;
    pointer-events: auto;
  }

  body.bf-page-planes .card-overlay .plan-avatars-row {
    display: flex !important;
    align-items: center !important;
    align-self: center !important;
    height: 36px !important;
    min-height: 36px !important;
    margin: 0 !important;
    line-height: 0 !important;
  }

  body.bf-page-planes .card-overlay .plan-avatars-row .pav {
    align-self: center !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  body.bf-page-planes .card-overlay .plan-avatars-hint {
    align-self: center !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}

/* =========================================================
   GRUPOS · PARIDAD EXACTA DE ANCHO Y POSICIÓN CON PLANES
   Exclusivo de escritorio. La versión móvil no se modifica.
========================================================= */
@media (min-width: 941px) {
  /* El cuerpo de Grupos comparte exactamente la columna de Planes. */
  body.bf-page-planes #planesGruposWrap,
  body.bf-page-planes #planesGruposWrap.pg-wrap {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 0 44px !important;
    box-sizing: border-box !important;
  }

  body.bf-page-planes #planesGruposWrap .pg-head {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* Un grupo por fila y ocupando todo el ancho disponible. */
  body.bf-page-planes #planesGruposWrap .pg-list {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    gap: 14px !important;
    box-sizing: border-box !important;
  }

  body.bf-page-planes #planesGruposWrap .pg-item {
    display: grid !important;
    grid-template-columns: 64px minmax(0, 1fr) auto !important;
    align-items: center !important;
    justify-content: stretch !important;
    column-gap: 16px !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 112px !important;
    margin: 0 !important;
    padding: 16px 18px !important;
    box-sizing: border-box !important;
  }

  body.bf-page-planes #planesGruposWrap .pg-avatar {
    grid-column: 1 !important;
    justify-self: start !important;
  }

  body.bf-page-planes #planesGruposWrap .pg-info {
    grid-column: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    justify-self: stretch !important;
    text-align: left !important;
  }

  body.bf-page-planes #planesGruposWrap :is(.pg-name, .pg-desc, .pg-meta) {
    width: 100% !important;
    min-width: 0 !important;
    text-align: left !important;
  }

  /* El corazón permanece aislado y pegado al borde derecho. */
  body.bf-page-planes #planesGruposWrap .pg-fav {
    grid-column: 3 !important;
    justify-self: end !important;
    align-self: center !important;
    margin: 0 !important;
  }

  body.bf-page-planes #planesGruposWrap .pg-unread-dot {
    right: 72px !important;
    top: 18px !important;
  }
}

/* =========================================================
   GRUPOS · BARRA SUPERIOR EN LA MISMA POSICIÓN QUE PLANES
   Mantiene una única referencia de alineación para ambas pestañas.
========================================================= */
@media (min-width: 941px) {
  body.bf-page-planes .top-snap {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* El selector Planes / Grupos no cambia de coordenadas al alternar pestaña. */
  body.bf-page-planes .top-snap > .filters {
    left: 0 !important;
    right: auto !important;
    width: max-content !important;
    max-width: 100% !important;
    margin: 0 0 18px 0 !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  /* Las dos cabeceras comienzan exactamente desde la misma línea del cuerpo. */
  body.bf-page-planes .top-snap > .plans-list-heading,
  body.bf-page-planes #planesGruposWrap > .pg-head {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    box-sizing: border-box !important;
  }

  body.bf-page-planes #planesGruposWrap,
  body.bf-page-planes #planesGruposWrap.pg-wrap {
    position: relative !important;
    left: 0 !important;
    right: auto !important;
    transform: none !important;
  }
}

/* =========================================================
   GRUPOS · MISMA REFERENCIA ESTRUCTURAL QUE LAS TARJETAS
   El listado de grupos es ahora hijo directo de .app, igual que
   cada publicación de Planes. Esto elimina cualquier diferencia
   heredada del contenedor superior.
========================================================= */
@media (min-width: 941px) {
  body.bf-page-planes > .app > #planesGruposWrap,
  body.bf-page-planes > .app > .card {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  body.bf-page-planes > .app > #planesGruposWrap > .pg-head,
  body.bf-page-planes > .app > #planesGruposWrap > .pg-list,
  body.bf-page-planes > .app > #planesGruposWrap > .pg-list > .pg-item,
  body.bf-page-planes > .app > #planesGruposWrap > .pg-list > .pg-empty {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }
}

/* =========================================================
   GRUPOS · MISMA POSICIÓN REAL QUE EL CONTENIDO DE PLANES
   En escritorio, .top-snap no genera una caja propia: sus hijos
   participan directamente en el flujo de .app. De este modo,
   al ocultar la cabecera de Planes, la cabecera de Grupos ocupa
   exactamente su misma coordenada, sin offsets ni márgenes negativos.
========================================================= */
@media (min-width: 941px) {
  body.bf-page-planes > .app > .top-snap {
    display: contents !important;
  }

  body.bf-page-planes > .app > .top-snap > .filters,
  body.bf-page-planes > .app > .top-snap > .plans-list-heading,
  body.bf-page-planes > .app > #planesGruposWrap,
  body.bf-page-planes > .app > .card {
    grid-column: 1 / -1 !important;
    justify-self: stretch !important;
    align-self: start !important;
  }

  /* Grupos sustituye la posición de la cabecera de Planes en el flujo. */
  body.bf-page-planes > .app > #planesGruposWrap {
    clear: both !important;
    inset: auto !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    translate: none !important;
  }

  body.bf-page-planes > .app > #planesGruposWrap > .pg-head {
    margin-top: 0 !important;
  }
}