/* WondarCore — código propio, no generado. Se puede modificar libremente. */
/* Página /red ("Red de viajeros" / "Blog de especialistas" con ?tipo=nota) — acá solo va el shell
   de la página (hero + tabs de filtro); las tarjetas y el modal de detalle están en
   publicaciones-shared.css (compartido con "Mis publicaciones" en Perfil). */

/* ── HERO: navy sólido + ícono cuadrado blanco (2026-08-21, pedido de Agustin — reemplaza el
   degradé morado, mismo lenguaje que ya usan las promo cards de la home, ver .wc-hero-icon en
   layout.css). Pasa de centrado a fila (ícono + texto). Pisa el fondo blanco de .destino-card
   (compartido con Destino/País/Estado) solo acá adentro. */
.red-hero {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1.25rem;
  text-align: left;
  background: #1e3650;
  border-radius: 20px;
  padding: 2rem 2.5rem;
  margin-bottom: 1.5rem;
  box-shadow: none;
}

.red-hero-text { min-width: 0; }

.red-hero .destino-card-title {
  color: var(--color-texto-sobre-color);
  font-size: 1.9rem;
  font-weight: 800;
  margin-bottom: 0.3rem;
}

.red-hero .comparacion-sub {
  color: rgba(255, 255, 255, 0.85);
  max-width: 560px;
  margin: 0;
}

@media (max-width: 768px) {
  .red-hero { flex-wrap: wrap; padding: 1.5rem 1.4rem; }
  .red-hero .destino-card-title { font-size: 1.5rem; }
}

/* ── BARRA SUPERIOR TIPO APP (Comunidad / Mi perfil) — migrado de Gonzalo/red.html, rediseño
   2026-08-15. Círculo negro con ícono blanco los dos — el que NO es la página activa se ve
   grisado (opacidad baja), sin reborde de color. */
.red-topnav {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 28px;
  padding: 1.4rem 0 0.3rem;
}

.red-topnav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-decoration: none;
}

.red-topnav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--color-superficie-oscura);
  color: var(--color-texto-sobre-color);
  opacity: 0.4;
  transition: background 0.15s, opacity 0.15s;
}

.red-topnav-item:hover .red-topnav-icon { opacity: 0.7; }

.red-topnav-icon--active { opacity: 1; }
.red-topnav-item:hover .red-topnav-icon--active { background: var(--color-superficie-oscura); }

.red-topnav-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-color: var(--color-borde);
  display: block;
}

.red-topnav-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-texto-terciario);
  transition: color 0.15s ease;
}

.red-topnav-item--active .red-topnav-label,
.red-topnav-item:hover .red-topnav-label {
  color: var(--color-texto);
}

/* Fila que contiene las tabs Todos/Fotos/Videos/Notas + el botón "Nueva publicación" a la derecha
   (2026-07-28, a pedido de Agustin) — el margin-top que antes tenía .red-filter-tabs se movió acá
   para que tabs y botón queden alineados en la misma fila. margin-left:auto en el botón (no
   justify-content:space-between acá) a propósito: en "Blog de especialistas" (?tipo=nota) las tabs
   se ocultan (ver redWireFilterTabs) y con space-between el botón, como único hijo visible, se
   habría ido a la izquierda en vez de mantenerse a la derecha. */
.red-tabs-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 1.25rem;
}
.red-tabs-row #mp-new-post-btn { margin-left: auto; }

/* "Nueva publicación" pasa a naranja de marca acá (mismo color que "Sugerencias" y los hovers del
   menú) para que la única ACCIÓN de la fila no se confunda con el toggle de vista/las pastillas de
   tipo, que son selecciones pasivas — acotado a este botón puntual por id, no por la clase
   .val-btn--primary (que sigue azul en /miperfil y el resto del sitio). 2026-08-15, a pedido de
   Agustin. */
#mp-new-post-btn { background: var(--color-acento); }
#mp-new-post-btn:hover { background: var(--color-acento-hover); }

/* ── TOGGLE DE VISTA (Instagram / grilla) — mismo alto que .red-filter-tab. ── */
.red-view-toggle {
  display: inline-flex;
  gap: 4px;
  background: var(--color-fondo);
  border-radius: 50px;
  padding: 4px;
}

.red-view-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-height: 0;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--color-texto-secundario);
  cursor: pointer;
}

.red-view-btn:hover { color: var(--color-texto); }

.red-view-btn--active {
  background: var(--color-primario);
  color: var(--color-texto-sobre-color);
}

.red-filter-tabs {
  display: inline-flex;
  gap: 6px;
  background: var(--color-fondo);
  border-radius: 50px;
  padding: 5px;
}

.red-filter-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 9px 18px;
  border-radius: 50px;
  border: none;
  background: none;
  color: var(--color-texto-secundario);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.red-filter-tab:hover { color: var(--color-texto); }

.red-filter-tab--active {
  background: var(--color-primario);
  color: var(--color-texto-sobre-color);
}

/* ── VISTA "INSTAGRAM" → rediseñada 2026-08-16 (a pedido de Agustin) a un layout tipo feed/blog:
   la tarjeta pasa a ocupar todo el ancho del área de contenido en vez de quedar angosta centrada
   (antes max-width:480px, columna con la imagen ocupando casi toda la altura de pantalla), la
   imagen pasa a una columna de ancho fijo en desktop (ya no "se roba" el espacio del texto), el
   excerpt deja de clampear (se puede leer más sin ir al detalle, ver pubRenderCard en
   publicaciones-shared.js que ahora manda hasta 500 caracteres en vez de 140) y se suma el bloque
   de comentarios rápidos (pubQuickCommentsHtml) al pie de cada tarjeta. El sidebar de filtros
   sigue afuera de este contenedor, así que se ve siempre. Clases de .pub-card/.pub-card-img
   (publicaciones-shared.css) — a diferencia del mock de Gonzalo, acá no hay un layout "artículo"
   separado para notas, todas las tarjetas comparten el mismo .pub-card. */
.pub-grid--feed {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1.5rem;
  scroll-snap-type: y proximity;
}

.pub-grid--feed .pub-card {
  width: 100%;
  scroll-snap-align: start;
}

.pub-grid--feed .pub-card-img {
  height: 220px;
}

/* Excerpt sin clampear en el feed (el clamp a 3 líneas de publicaciones-shared.css sigue rigiendo
   en la vista de grilla) — ver comentario de arriba. */
.pub-grid--feed .pub-card-excerpt {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

/* Comentarios rápidos: ocultos por default (publicaciones-shared.css) — solo se muestran mientras
   la vista activa sea esta (feed), nunca en la grilla. */
.pub-grid--feed .pub-quickcomments {
  display: flex;
}

/* Desde ~700px: imagen en columna fija a la izquierda (no se estira con el texto, pero tampoco
   domina la tarjeta) + cuerpo a la derecha; el footer (like/comentar/compartir) y los comentarios
   rápidos pasan a ocupar todo el ancho, debajo de las dos columnas — por eso grid-template-areas en
   vez de flex-row: el orden real del DOM (img, body, footer, comentarios) no cambia, pero la 3ra y
   4ta fila necesitan volver a ocupar el ancho completo. */
@media (min-width: 700px) {
  .pub-grid--feed .pub-card {
    display: grid;
    grid-template-columns: minmax(220px, 320px) 1fr;
    grid-template-areas:
      "img body"
      "footer footer"
      "quick quick";
  }
  .pub-grid--feed .pub-card-img { grid-area: img; height: auto; min-height: 220px; }
  .pub-grid--feed .pub-card-body { grid-area: body; }
  .pub-grid--feed .pub-card-footer { grid-area: footer; }
  .pub-grid--feed .pub-quickcomments { grid-area: quick; }
}

@media (max-width: 600px) {
  .red-hero { padding: 1.6rem 1.25rem; }
  .red-hero .destino-card-title { font-size: 1.5rem; }
  .red-topnav { gap: 20px; }
  .red-topnav-icon { width: 40px; height: 40px; }
  .red-topnav-label { font-size: 0.66rem; }
  .red-tabs-row #mp-new-post-btn { margin-left: 0; width: 100%; justify-content: center; }

  /* En mobile se saca la posibilidad de ver la grilla — solo queda la vista tipo Instagram
     (2026-08-14, a pedido de Gonzalo). Se esconde el botón que elegía "grilla" y, por si alguien
     llegó a mobile con esa vista ya elegida en desktop (ej. achicando la ventana), se fuerza el
     layout de feed acá igual, sin depender de qué clase haya quedado puesta por el toggle. Mismos
     valores (ancho completo, imagen 220px, sin clamp, comentarios visibles) que .pub-grid--feed de
     arriba — acá se repiten sobre #red-posts-grid porque en mobile el toggle puede haber quedado en
     "grid" (la clase --feed no está puesta) y este bloque tiene que funcionar de todos modos. */
  .red-view-btn[data-view="grid"] { display: none; }
  #red-posts-grid {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1.5rem;
  }
  #red-posts-grid .pub-card { width: 100%; }
  #red-posts-grid .pub-card-img { height: 220px; }
  #red-posts-grid .pub-card-excerpt { display: block; -webkit-line-clamp: unset; overflow: visible; }
  #red-posts-grid .pub-quickcomments { display: flex; }
}

@media (max-width: 480px) {
  .red-filter-tabs { width: 100%; display: flex; flex-wrap: wrap; }
  .red-filter-tab { flex: 1 1 auto; padding: 9px 10px; }
}