/* 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: gradiente morado/navy tomado de Gonzalo/blog.css (.bl-hero) y Gonzalo/red.css (.rd-hero) —
   pisa el fondo blanco de .destino-card (compartido con Destino/País/Estado) solo acá adentro. */
.red-hero {
  gap: 0.5rem;
  text-align: center;
  background: linear-gradient(135deg, #1a1a2e 0%, #2d1b69 60%, #1a1a2e 100%);
  border-radius: 20px;
  padding: 2.4rem 2.5rem;
  margin-bottom: 1.5rem;
  box-shadow: none;
}

.red-hero .destino-card-title {
  color: #fff;
  font-size: 1.9rem;
  font-weight: 800;
}

.red-hero .comparacion-sub {
  color: #bfdbfe;
  max-width: 640px;
  margin: 0 auto;
}

/* 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; }

.red-filter-tabs {
  display: inline-flex;
  gap: 6px;
  background: #f4f5f7;
  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: #666;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.red-filter-tab:hover { color: #1a1a2e; }

.red-filter-tab--active {
  background: #2563eb;
  color: white;
}

@media (max-width: 600px) {
  .red-hero { padding: 1.6rem 1.25rem; }
  .red-hero .destino-card-title { font-size: 1.5rem; }
}

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