/* PescaRadar · me gusta, comentarios y mensajes.
 *
 * Se apoya en los tokens del sistema. Nada de colores sueltos: si mañana
 * cambia la paleta, esto cambia con ella.
 */

/* ---- barra social de la tarjeta ---------------------------------------------- */

.socBarra {
  display: flex;
  align-items: center;
  gap: var(--pr-2);
  padding: var(--pr-2) var(--pr-3);
  border-top: 1px solid var(--pr-border);
}

/* Área táctil de 44px: en móvil el dedo no acierta un icono de 20px, y obligar
   a apuntar es lo que hace que la gente deje de interactuar. */
.socBtn {
  display: inline-flex;
  align-items: center;
  gap: var(--pr-2);
  min-height: 44px;
  padding: 0 var(--pr-3);
  background: transparent;
  border: 0;
  border-radius: 99px;
  color: var(--pr-text-soft);
  font: inherit;
  font-size: var(--pr-small);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--pr-fast) var(--pr-ease), background var(--pr-fast) var(--pr-ease);
}
.socBtn:hover { background: var(--pr-surface-2); }
.socBtn:disabled { opacity: .55; cursor: default; }
.socBtn:focus-visible { outline: 2px solid var(--pr-primary); outline-offset: 2px; }

.socNum {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

/* Dado: el corazón se rellena además de cambiar de color. El color solo no
   basta para quien no lo distingue. */
.socLike.isOn { color: var(--pr-danger); }
.socLike.isOn svg { fill: currentColor; }

@media (prefers-reduced-motion: no-preference) {
  .socLike.isOn svg { animation: socLatido var(--pr-base) var(--pr-ease); }
  @keyframes socLatido {
    0% { transform: scale(1); }
    45% { transform: scale(1.25); }
    100% { transform: scale(1); }
  }
}

.socEnviar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  background: var(--pr-primary);
  color: #04161c;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.socEnviar:disabled { opacity: .5; cursor: default; }

/* ---- comentarios -------------------------------------------------------------- */

.comLista { max-height: 60vh; overflow-y: auto; }

.comUl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--pr-3); }

.comFila { display: flex; align-items: flex-start; gap: var(--pr-3); }
.comQuien { flex: 0 0 auto; text-decoration: none; }
.comCuerpo { flex: 1 1 auto; min-width: 0; }

.comCabecera { display: flex; align-items: baseline; gap: var(--pr-2); }
.comAutor { color: inherit; text-decoration: none; font-size: var(--pr-small); font-weight: 800; }
.comFecha { font-size: var(--pr-caption); color: var(--pr-text-faint); }

/* `overflow-wrap` evita que una palabra larga desborde la hoja en móvil. */
.comTexto {
  margin: 2px 0 0;
  font-size: var(--pr-small);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.comBorrar {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 32px; height: 32px;
  background: transparent; border: 0; border-radius: 50%;
  color: var(--pr-text-faint); cursor: pointer;
}
.comBorrar:hover { color: var(--pr-danger); background: var(--pr-surface-2); }

.comAviso {
  margin: var(--pr-4) 0;
  text-align: center;
  font-size: var(--pr-small);
  color: var(--pr-text-faint);
}

.comForm {
  display: flex;
  align-items: flex-end;
  gap: var(--pr-2);
  margin-top: var(--pr-3);
  padding-top: var(--pr-3);
  border-top: 1px solid var(--pr-border);
}
.comInput { flex: 1 1 auto; resize: none; max-height: 120px; }

/* ---- bandeja de mensajes -------------------------------------------------------- */

.msgLista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--pr-1); }

.msgFila { border-radius: var(--pr-r-card); }
.msgFila.isUnread { background: var(--pr-primary-soft); }

.msgAbrir {
  display: flex; align-items: center; gap: var(--pr-3);
  width: 100%; min-height: 66px;
  padding: var(--pr-3);
  background: transparent; border: 0; border-radius: var(--pr-r-card);
  color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.msgAbrir:hover { background: var(--pr-surface-2); }
.msgAbrir:focus-visible { outline: 2px solid var(--pr-primary); outline-offset: -2px; }

.msgQuien { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.msgQuien b { font-size: var(--pr-small); }
/* Una sola línea con puntos suspensivos: el último mensaje es una pista, no el
   contenido. */
.msgQuien small {
  font-size: var(--pr-caption); color: var(--pr-text-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.msgMeta { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.msgMeta time { font-size: var(--pr-caption); color: var(--pr-text-faint); }

.msgPunto {
  display: grid; place-items: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  background: var(--pr-primary); color: #04161c;
  border-radius: 99px;
  font-size: 11px; font-weight: 900; font-style: normal;
  font-variant-numeric: tabular-nums;
}

/* ---- hilo del chat --------------------------------------------------------------- */

/* El chat ocupa la altura disponible y solo hace scroll el hilo. Si scrollara
   la página entera, el campo de escritura se iría de la pantalla al escribir. */
.msgChat {
  display: flex;
  flex-direction: column;
  height: calc(100dvh - var(--pr-topbar-h) - var(--pr-bottomnav-h) - var(--pr-safe-bottom));
}

.msgChatHead {
  display: flex; align-items: center; gap: var(--pr-2);
  padding-bottom: var(--pr-3);
  border-bottom: 1px solid var(--pr-border);
}
.msgVolver {
  display: grid; place-items: center;
  width: 40px; height: 40px; flex: 0 0 auto;
  background: transparent; border: 0; border-radius: 50%;
  color: var(--pr-text); cursor: pointer;
}
.msgChatQuien { display: flex; align-items: center; gap: var(--pr-3); color: inherit; text-decoration: none; min-width: 0; }
.msgChatQuien span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.msgChatQuien small { font-size: var(--pr-caption); color: var(--pr-text-faint); }

.msgHilo {
  flex: 1 1 auto;
  list-style: none;
  margin: 0;
  padding: var(--pr-4) 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--pr-2);
  /* Momentum en iOS; sin esto el desplazamiento se siente pegajoso. */
  -webkit-overflow-scrolling: touch;
}

.msgBurbuja {
  align-self: flex-start;
  max-width: min(78%, 460px);
  padding: var(--pr-2) var(--pr-3);
  background: var(--pr-surface-1);
  border: 1px solid var(--pr-border);
  border-radius: 16px 16px 16px 4px;
}
.msgBurbuja.isMia {
  align-self: flex-end;
  background: var(--pr-primary-soft);
  border-color: var(--pr-primary);
  border-radius: 16px 16px 4px 16px;
}
.msgBurbuja p { margin: 0; font-size: var(--pr-small); line-height: 1.5; overflow-wrap: anywhere; }
.msgBurbuja time { display: block; margin-top: 2px; font-size: 10px; color: var(--pr-text-faint); text-align: right; }

.msgAviso { align-self: center; color: var(--pr-text-faint); font-size: var(--pr-small); }

.msgEscribir {
  display: flex; align-items: flex-end; gap: var(--pr-2);
  padding-top: var(--pr-3);
  border-top: 1px solid var(--pr-border);
  /* Por encima de la barra inferior y del área segura del iPhone. */
  padding-bottom: var(--pr-safe-bottom);
  background: var(--pr-surface);
}

.msgInput {
  flex: 1 1 auto;
  min-height: 42px; max-height: 120px;
  padding: var(--pr-2) var(--pr-3);
  background: var(--pr-surface-1);
  color: var(--pr-text);
  border: 1px solid var(--pr-border);
  border-radius: 21px;
  font: inherit; font-size: var(--pr-small);
  resize: none;
}
.msgInput:focus { outline: none; border-color: var(--pr-primary); }

.msgCerrado {
  margin: var(--pr-3) 0 0;
  padding: var(--pr-3);
  background: var(--pr-surface-1);
  border: 1px solid var(--pr-border);
  border-radius: var(--pr-r-card);
  font-size: var(--pr-small);
  color: var(--pr-text-soft);
  text-align: center;
}

/* Con el hilo abierto en móvil, la barra inferior estorba: roba altura al chat
   y su sitio lo ocupa el campo de escritura. */
@media (max-width: 839px) {
  body.msgEnChat .prBottomNav { display: none; }
  body.msgEnChat .msgChat { height: calc(100dvh - var(--pr-topbar-h)); }
}

@media (min-width: 840px) {
  .msgVolver { display: none; }
  .msgChat { height: calc(100dvh - var(--pr-topbar-h) - var(--pr-6)); }
}

/* ---- amigos ------------------------------------------------------------------------ */

.amiTotal { font-size: var(--pr-caption); color: var(--pr-text-faint); }

.prBtnSm {
  min-height: 34px;
  padding: 0 var(--pr-3);
  font-size: var(--pr-caption);
}
.comHeroActions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.comPostText{white-space:pre-wrap;font-size:15px;line-height:1.55}