/* ======================================================================
   RADAR — Feed fotográfico
   Corrección 10-ago pto. 11: "potenciar el componente fotográfico".
   ======================================================================
   Se carga DESPUÉS de styles.css, así que lo de acá pisa por cascada lo que
   aquel define para .post-card, .post-images y .wall-cell. Nada de !important:
   si algo no pisa, es que el selector de allá es más específico y hay que
   igualarlo, no forzarlo.

   Qué cambia respecto del feed anterior:
     · La tarjeta era una caja blanca con borde, padding y radio: la foto
       quedaba enmarcada y chiquita. Ahora la foto va a sangre y las tarjetas
       se separan por aire.
     · El collage de hasta 4 fotos (una grande + recortes) pasó a carrusel:
       cada foto ocupa el ancho completo y se pasa con el dedo.
     · El texto es epígrafe: va abajo de la foto y en cuerpo chico.

   Contiene, en este orden:
     1. Feed y tarjeta foto-primero
     2. Carrusel (scroll-snap, puntitos, contador) y corazón del doble toque
     3. Visor a pantalla completa
     4. Muro del perfil (mosaico sólo-fotos + vista de textos)
     5. Tira / mosaico de fotos para la cartelera y la ficha de evento
   ====================================================================== */

/* ======================================================================
   1. FEED Y TARJETA
   ====================================================================== */

/* Más aire entre publicaciones: sin bordes, el respiro es lo que separa
   una foto de la siguiente. */
.feed-list { gap: var(--sp-6); }

/* En teléfono el feed sale del padding lateral de la cartelera (16px) para
   que la foto llegue borde a borde. El texto y la barra de autor recuperan
   ese margen por dentro de la tarjeta. */
@media (max-width: 767px) {
  .feed-list { margin-left: -16px; margin-right: -16px; }
  /* Lo que no es una publicación (vacío, sugerencias, "cargar más") sí
     necesita el margen de vuelta. */
  #feed-list > #feed-suggestions,
  #feed-list > .feed-empty-state,
  #feed-list > .feed-more { padding-left: var(--sp-4); padding-right: var(--sp-4); }
}

.post-card {
  background: #fff;
  border: none;
  border-radius: 0;
  padding: 0;
  overflow: hidden;
}

/* En escritorio la columna es angosta y flota sobre el fondo: ahí sí un
   radio suave ayuda a leerla como pieza. */
@media (min-width: 768px) {
  .post-card { border-radius: var(--r-md); box-shadow: var(--sh-sm); }
}

/* Barra de autor + acciones. Va DEBAJO de la foto: primero se ve la imagen,
   después de quién es y qué se puede hacer con ella. */
.post-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
}
.post-card-text .post-bar { padding-bottom: var(--sp-1); }

.post-bar-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  flex-shrink: 0;
}
.post-bar .post-action { min-height: 36px; padding: 0 var(--sp-2); }
.post-bar .post-action svg { width: 22px; height: 22px; }
.post-bar .post-menu-btn { width: 36px; height: 36px; }

/* Epígrafe: el texto acompaña a la foto, no compite con ella. */
.post-foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: 0 var(--sp-4) var(--sp-4);
}
.post-foot .post-text { margin: 0; font-size: var(--fs-md); color: var(--ink-soft); }
.post-card-text .post-foot .post-text { font-size: var(--fs-lg); color: var(--ink); }
.post-foot .post-event-chip { margin-top: 0; max-width: 100%; }
/* El chip es un flex: el text-overflow tiene que ir en el texto, no en el
   botón, o el título largo se corta de golpe contra el borde. */
.post-event-chip-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.post-comments { margin: 0 var(--sp-4) var(--sp-4); }

/* ======================================================================
   2. CARRUSEL
   ====================================================================== */

/* El alto es SIEMPRE 4/5: el feed reserva el lugar antes de que baje la
   imagen y no salta mientras carga (las fotos se guardan en un solo tamaño,
   sin metadatos de proporción, así que el alto no se puede deducir).
   El recorte que eso implica se compensa en el visor, donde la foto se ve
   entera. */
.post-media {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--bg-tint);
  overflow: hidden;
  cursor: zoom-in;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
/* Ojo: nada de `max-height` acá. Con `aspect-ratio` y alto libre, un
   max-height achica TAMBIÉN el ancho para conservar la proporción, y la foto
   deja de llegar a los bordes de la tarjeta (queda una franja blanca a la
   derecha). Si alguna vez hay que acotar el alto en escritorio, se cambia la
   proporción, no el alto. */

.post-track {
  display: flex;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.post-track::-webkit-scrollbar { display: none; }

.post-slide {
  flex: 0 0 100%;
  height: 100%;
  margin: 0;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}
.post-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none; /* el click lo maneja .post-media (tap simple vs doble) */
}

/* Contador "2/4" y puntitos: sin ellos no se sabe que hay más fotos. */
.post-counter {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  padding: 3px 9px;
  border-radius: var(--r-full);
  background: rgba(14, 14, 20, 0.62);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.post-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--sp-3);
  display: flex;
  justify-content: center;
  gap: 5px;
}
.post-dots span {
  width: 6px;
  height: 6px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  transition: background var(--t-fast), transform var(--t-fast);
}
.post-dots span.active { background: #fff; transform: scale(1.25); }

/* Corazón del doble toque. Vive siempre en el DOM y sólo se anima. */
.post-heart {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  color: #fff;
}
.post-heart svg {
  width: 104px;
  height: 104px;
  filter: drop-shadow(0 3px 14px rgba(0, 0, 0, 0.4));
}
.post-heart.pop { animation: postHeartPop 0.9s var(--ease); }

@keyframes postHeartPop {
  0%   { opacity: 0; transform: scale(0.4); }
  14%  { opacity: 1; transform: scale(1.18); }
  32%  { transform: scale(0.94); }
  48%  { transform: scale(1); }
  76%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .post-heart.pop { animation: postHeartFade 0.6s linear; }
  @keyframes postHeartFade { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
  .post-track { scroll-behavior: auto; }
}

/* ======================================================================
   3. VISOR A PANTALLA COMPLETA
   ====================================================================== */
.post-viewer {
  position: fixed;
  inset: 0;
  z-index: 11000;          /* arriba de los modales (2000) y del lightbox
                              viejo (9999); abajo de los toasts (12000) */
  background: #000;
}
.post-viewer.hidden { display: none; }

.post-viewer-track {
  display: flex;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.post-viewer-track::-webkit-scrollbar { display: none; }

.post-viewer-slide {
  flex: 0 0 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px var(--sp-3);
  scroll-snap-align: center;
  scroll-snap-stop: always;
}
/* La foto ENTERA, nunca recortada: es la contracara del recorte del feed. */
.post-viewer-slide img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.post-viewer-close,
.post-viewer-counter {
  position: absolute;
  top: max(var(--sp-4), var(--safe-top));
  z-index: 2;
  color: #fff;
}
.post-viewer-close {
  right: var(--sp-4);
  width: 40px;
  height: 40px;
  border: none;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.16);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.post-viewer-close:hover { background: rgba(255, 255, 255, 0.28); }
.post-viewer-counter {
  left: var(--sp-4);
  padding: 6px 12px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.16);
  font-size: var(--fs-sm);
  font-weight: 700;
}

/* ======================================================================
   4. MURO DEL PERFIL
   ====================================================================== */

/* Conmutador Fotos | Textos. Sólo aparece si la persona tiene publicaciones
   de sólo texto: si son todas fotos, no hay nada que conmutar. */
.wall-views {
  display: flex;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
}
.wall-views button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-full);
  background: #fff;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
}
.wall-views button small { color: var(--muted-2); font-weight: 700; }
.wall-views button.active {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.wall-views button.active small { color: rgba(255, 255, 255, 0.7); }

/* El mosaico ahora es sólo fotográfico: las celdas de texto ensuciaban la
   grilla y la hacían ilegible como mosaico. */
.wall-grid { gap: 3px; }
.wall-cell { background: var(--bg-tint); }
.wall-cell:hover img { opacity: 0.9; }

.wall-texts { display: flex; flex-direction: column; gap: var(--sp-2); padding: 0 var(--sp-4) var(--sp-4); }
.wall-text-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  padding: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: #fff;
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
  text-align: left;
  cursor: pointer;
}
.wall-text-row:hover { background: var(--bg-hover); }
.wall-text-row small { color: var(--muted-2); font-size: var(--fs-sm); }

/* La publicación suelta (desde el mosaico) usa la misma tarjeta que el feed,
   así que el modal no puede meterle padding alrededor de la foto. */
.post-single-content { padding: 0; overflow: hidden; }

/* ======================================================================
   5. TIRA / MOSAICO DE FOTOS  (cartelera + ficha de evento)
   ====================================================================== */
.photo-strip { margin: var(--sp-5) 0; }

.photo-strip-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.photo-strip-head h3 {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--ink);
  line-height: var(--lh-snug);
}
.photo-strip-head span { font-size: var(--fs-sm); color: var(--muted-2); white-space: nowrap; }

.photo-tile {
  position: relative;
  display: block;
  padding: 0;
  border: none;
  border-radius: var(--r-sm);
  background: var(--bg-tint);
  overflow: hidden;
  cursor: pointer;
}
.photo-tile > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.photo-tile:hover > img { transform: scale(1.03); }
.photo-tile > img { transition: transform var(--t-base); }

/* Quién sacó la foto, sobre un degradado para que el nombre se lea encima de
   cualquier imagen. Es la parte "gente real" del pedido. */
.photo-tile-meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 18px var(--sp-2) 6px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0));
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 600;
  text-align: left;
}
.photo-tile-avatar {
  width: 18px;
  height: 18px;
  border-radius: var(--r-full);
  object-fit: cover;
  flex-shrink: 0;
}
.photo-tile-who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.photo-tile-event {
  position: absolute;
  top: 6px;
  left: 6px;
  max-width: calc(100% - 12px);
  padding: 3px 8px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  font-size: var(--fs-xs);
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Variante tira: una fila que scrollea, para meter dentro de la ficha de un
   evento sin comerse la pantalla. */
.photo-strip-strip .photo-strip-track {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.photo-strip-strip .photo-strip-track::-webkit-scrollbar { display: none; }
.photo-strip-strip .photo-tile {
  flex: 0 0 44%;
  aspect-ratio: 4 / 5;
  scroll-snap-align: start;
}
@media (min-width: 640px) {
  .photo-strip-strip .photo-tile { flex-basis: 190px; }
}

/* Variante mosaico: grilla de descubrimiento. La primera foto ocupa 2×2 para
   que la tira no se lea como una grilla plana de miniaturas. */
.photo-strip-mosaic .photo-strip-track {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.photo-strip-mosaic .photo-tile { aspect-ratio: 1; }
.photo-strip-mosaic .photo-tile:first-child { grid-column: span 2; grid-row: span 2; }
@media (min-width: 768px) {
  .photo-strip-mosaic .photo-strip-track { grid-template-columns: repeat(4, 1fr); }
}