/**
 * MURO DE REDES SOCIALES — hoja de estilos
 * Copyright (c) 2026 Hazur Socconini. Todos los derechos reservados.
 * Uso sujeto a licencia expresa por escrito. Versión 1.0.0
 *
 * Las variables viven en :root para heredar el branding del sitio anfitrión:
 * si ese sitio ya las define a nivel :root, este archivo las respeta y no
 * las pisa. Así el muro toma los colores de quien lo instala.
 */
:root {
  --rs-color-texto: #212529;
  --rs-color-texto-suave: #6c757d;
  --rs-color-borde: #e2e5e9;
  --rs-color-fondo-tarjeta: #ffffff;
  --rs-color-acento: #003366; /* lo pisa el sitio anfitrión */
  --rs-color-oro: #b3892b;
  --rs-radio: 12px;
  --rs-sombra: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
}

.rs-contenedor {
  font-family: inherit;
  color: var(--rs-color-texto);
}

/* El atributo [hidden] nativo pierde contra .rs-grid/.rs-panel { display: … }
   de más abajo (misma especificidad, gana el que carga después) — se fuerza aquí. */
.rs-contenedor [hidden] {
  display: none !important;
}

/* Barra de filtros por red */
.rs-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.rs-filtros__boton {
  border: 1px solid var(--rs-color-borde);
  background: var(--rs-color-fondo-tarjeta);
  color: var(--rs-color-texto-suave);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

/* Aplica a las tres barras que usan este botón: red social, año y mes. */
.rs-filtros__boton:hover:not(:disabled) {
  border-color: var(--rs-color-acento);
  color: var(--rs-color-acento);
  transform: scale(1.08);
}

.rs-filtros__boton--activo {
  background: var(--rs-color-acento);
  border-color: var(--rs-color-acento);
  color: #fff;
}

.rs-filtros__boton--activo:hover:not(:disabled) {
  color: #fff; /* que siga siendo legible sobre el fondo de color del botón activo */
}

.rs-filtros__boton:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Grid — cada pestaña (Todas/Instagram/TikTok/LinkedIn/YouTube) es su propio
   panel en el DOM (ver construirPanelSheet/construirPanelTodas en el JS),
   así que ya no filtra por CSS: cada .rs-grid trae solo las tarjetas que le
   tocan. Es la ÚNICA cuadrícula de tarjetas del plugin — 4 columnas como
   máximo en escritorio, se reduce en pantallas angostas. */
.rs-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 1.25rem;
  align-items: start;
}

@media (min-width: 480px) {
  .rs-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 720px) {
  .rs-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 960px) {
  .rs-grid { grid-template-columns: repeat(4, 1fr); }
}

.rs-centinela {
  grid-column: 1 / -1;
  height: 1px;
}

/* Tarjeta — mismo tamaño para todas dentro de .rs-grid, tomando de referencia
   la de LinkedIn: cuadrada (aspect-ratio 1/1), cabecera fija arriba y el
   cuerpo ocupa el resto con overflow oculto, así que cualquier contenido más
   alto de lo normal (el video vertical de TikTok, texto largo) se recorta en
   vez de estirar la tarjeta o desalinear la cuadrícula. */
.rs-tarjeta {
  background: var(--rs-color-fondo-tarjeta);
  border: 1px solid var(--rs-color-borde);
  border-radius: var(--rs-radio);
  box-shadow: var(--rs-sombra);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

/* Mismo efecto que los botones de filtro: crece ligeramente y resalta el
   borde con el color de acento — aplica a las tarjetas de las cinco redes
   (Instagram/TikTok/LinkedIn/YouTube) y al tile-enlace de Facebook. */
.rs-tarjeta:hover {
  transform: scale(1.04);
  border-color: var(--rs-color-acento);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 1;
}

.rs-tarjeta__cabecera {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.8rem;
  font-size: 0.82rem;
  font-weight: 600;
  border-bottom: 1px solid var(--rs-color-borde);
}

.rs-tarjeta__cabecera time {
  margin-left: auto;
  font-weight: 400;
  color: var(--rs-color-texto-suave);
  font-size: 0.75rem;
  white-space: nowrap;
}

.rs-tarjeta--instagram .rs-tarjeta__cabecera { color: #c2185b; }
.rs-tarjeta--tiktok .rs-tarjeta__cabecera { color: #000; }
.rs-tarjeta--linkedin .rs-tarjeta__cabecera { color: #0a66c2; }
.rs-tarjeta--youtube .rs-tarjeta__cabecera { color: #ff0000; }
.rs-tarjeta--facebook .rs-tarjeta__cabecera { color: #1877f2; }

.rs-tarjeta__cuerpo {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.rs-tarjeta__cuerpo > * { width: 100%; }

/* Reproductor de YouTube: proporción 16:9 fija, sin necesidad de resize por JS */
.rs-youtube {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}
.rs-youtube iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Tarjeta curada — Instagram y LinkedIn, sin widget de publicación individual
   que funcione embebido en un tercero (ver comentario al inicio de
   redes-sociales.js). Miniatura + texto + enlace, capturados a mano en el
   Sheet — esta es "la de referencia" de tamaño para las demás (ver .rs-tarjeta). */
.rs-tarjeta__curada {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  text-decoration: none;
  color: inherit;
}

.rs-tarjeta__curada img {
  display: block;
  flex: 0 0 45%;
  min-height: 0;
  width: 100%;
  object-fit: cover;
}

.rs-tarjeta__curada p {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  padding: 0.6rem 0.8rem 0;
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--rs-color-texto);
  /* -webkit-line-clamp no recorta de forma confiable cuando el elemento es
     hijo de un flex container (el navegador resuelve su display a algo
     distinto de -webkit-box y el recorte no aplica) — por eso el tope es un
     max-height fijo a ~3 líneas en vez del hack de line-clamp. */
  max-height: calc(1.35em * 3);
}

/* Cuando la publicación no trae miniatura no hay imagen que ocupe el 45 %
   superior, así que el tope de tres líneas dejaría el texto cortado y media
   tarjeta en blanco. Aquí el texto usa todo el espacio disponible. */
.rs-tarjeta__curada--sin-imagen p {
  max-height: none;
}

.rs-tarjeta__cta {
  flex: 0 0 auto;
  display: block;
  padding: 0.4rem 0.8rem 0.6rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--rs-color-acento);
}

.rs-tarjeta--linkedin .rs-tarjeta__cta { color: #0a66c2; }
.rs-tarjeta--instagram .rs-tarjeta__cta { color: #c2185b; }

/* Tarjeta "enlace" (p. ej. Facebook dentro de "Todas" — ver tarjetaEnlace en
   el JS): mismo tamaño que las demás, pero solo lleva a la red externa. */
.rs-tarjeta__enlace {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  height: 100%;
  width: 100%;
  padding: 1rem;
  text-decoration: none;
  color: var(--rs-color-texto);
  text-align: center;
}

.rs-tarjeta__enlace-icono svg {
  width: 34px;
  height: 34px;
}

.rs-tarjeta--facebook .rs-tarjeta__enlace-icono { color: #1877f2; }

.rs-tarjeta__enlace-texto {
  font-size: 0.85rem;
  font-weight: 600;
}

/* Tarjeta de YouTube (tarjetaYouTubeCompacta) — mismas proporciones que
   .rs-tarjeta__curada (miniatura + título), para que se vea igual que las
   demás tanto en la pestaña "YouTube" como mezclada en "Todas". */
.rs-tarjeta__yt-boton {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  padding: 0;
  border: 0;
  cursor: pointer;
  background: none;
  font: inherit;
  text-align: left;
}

.rs-tarjeta__yt-miniatura {
  position: relative;
  display: block;
  flex: 0 0 45%;
  min-height: 0;
  background: #000;
}

.rs-tarjeta__yt-miniatura img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rs-tarjeta__yt-titulo {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  padding: 0.6rem 0.8rem;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--rs-color-texto);
  /* Mismo motivo que .rs-tarjeta__curada p — ver ese comentario. */
  max-height: calc(1.35em * 3);
}

/* Barra "Síguenos" — va antes de las pestañas (ver render() en el JS). Cada
   red es una píldora ícono + conteo de seguidores (ver formatoSeguidores en
   el JS); si no hay número capturado para esa red, el badge queda vacío y
   la píldora se ve solo con el ícono. */
.rs-seguir {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
}

.rs-seguir__texto {
  font-size: 0.85rem;
  color: var(--rs-color-texto-suave);
}

.rs-seguir__enlace {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem 0.35rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--rs-color-borde);
  color: var(--rs-color-texto);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.rs-seguir__icono {
  display: flex;
}

.rs-seguir__conteo {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--rs-color-texto-suave);
  transition: color 0.15s ease;
}

.rs-seguir__conteo:empty {
  display: none; /* sin número capturado para esta red: solo queda el ícono */
}

.rs-seguir__enlace:hover {
  border-color: var(--rs-color-acento);
  color: var(--rs-color-acento);
  transform: scale(1.08);
}

.rs-seguir__enlace:hover .rs-seguir__conteo {
  color: var(--rs-color-acento);
}

.rs-vacio {
  color: var(--rs-color-texto-suave);
  font-size: 0.9rem;
}

/* === Panel de cada pestaña (Todas/Instagram/TikTok/LinkedIn/Facebook/YouTube/
   Calendario) — ver render() en el JS. Todas comparten esta clase base;
   .rs-panel--facebook además necesita que el widget de Facebook ocupe el
   ancho disponible, y .rs-panel--calendario lo mismo para su iframe. */
.rs-panel {
  min-height: 80px;
}

.rs-panel--facebook .fb-page,
.rs-panel--facebook iframe.fb_iframe_widget_fluid {
  width: 100% !important;
}

.rs-panel--calendario iframe {
  display: block;
  border-radius: var(--rs-radio);
}

/* Barra de años, de meses y de hashtags (armarGridConAnios) — mismos botones
   que .rs-filtros. Meses va debajo de años y siempre muestra los 12,
   deshabilitando los que no tengan contenido en el año elegido. Hashtags va
   debajo de meses y solo lista los que de verdad aparecen en el texto/título
   de las publicaciones, con el número de publicaciones que lo traen. */
.rs-anios {
  margin-bottom: 0.75rem;
}

.rs-meses {
  margin-bottom: 0.75rem;
}

.rs-hashtags {
  margin-bottom: 1.5rem;
}

.rs-vacio--filtro {
  grid-column: 1 / -1;
}

/* Ícono de reproducir superpuesto en la miniatura de YouTube — lo usan tanto
   la tarjeta normalizada (.rs-tarjeta__yt-miniatura) como cualquier otro
   lugar que incruste una miniatura de YouTube clicable. */
.rs-yt-tarjeta__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(0, 0, 0, 0.15);
  transition: background 0.15s ease;
}

.rs-yt-tarjeta__play svg {
  width: 40px;
  height: 40px;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
}

.rs-tarjeta__yt-boton:hover .rs-yt-tarjeta__play,
.rs-tarjeta__yt-boton:focus-visible .rs-yt-tarjeta__play {
  background: rgba(0, 0, 0, 0.35);
}

/* Oscuro por preferencia del sistema (si nadie eligió modo explícito en la
   página anfitriona) y oscuro explícito (si la página anfitriona pone
   data-theme="dark" en <html>, como hace el botón de tema del sitio anfitrión
   — ver sitio/index.html). Un data-theme="light" explícito siempre gana,
   incluso con el sistema en oscuro. */
@media (prefers-color-scheme: dark) {
  html:not([data-theme='light']) .rs-contenedor {
    --rs-color-texto: #e9ecef;
    --rs-color-texto-suave: #adb5bd;
    --rs-color-borde: #343a40;
    --rs-color-fondo-tarjeta: #1c1f23;
  }
}

html[data-theme='dark'] .rs-contenedor {
  --rs-color-texto: #e9ecef;
  --rs-color-texto-suave: #adb5bd;
  --rs-color-borde: #343a40;
  --rs-color-fondo-tarjeta: #1c1f23;
}