/* style_promo_social.css — barra social de promociones (js/promo-social.js).
   ÚNICA fuente de los estilos .ps-* (likes/dislikes, comentarios, imágenes y
   moderación). La usan promociones.html, las páginas por comercio
   (promociones/<id>.html) y los hubs de institución (instituciones/<id>.html).

   Theming: los colores se leen de variables con fallback al look neutro de
   promociones. Una página puede re-tematizar sin duplicar reglas, p. ej.:
     .promo-social { --ps-borde: #e6dcc0; --ps-fondo-com: #fffdf6; } */

.promo-social {
  --ps-acento: #b71c1c;          /* color de acción (hover, enviar, borrar) */
  --ps-borde: #e5e7eb;           /* bordes de botones e inputs */
  --ps-fondo-com: #fafafa;       /* fondo de cada comentario */
  --ps-borde-com: #e5e7eb;       /* borde de cada comentario e imágenes */
  --ps-radio: 8px;               /* radio de comentarios, inputs y botones */
  margin-top: 0.55rem;
}

/* ── Barra de reacciones ── */
.ps-barra { display: flex; align-items: center; gap: 0.4rem; }
.ps-btn {
  display: inline-flex; align-items: center; gap: 0.32rem;
  font-size: 0.78rem; font-weight: 600; color: #9aa0ab;
  background: none; border: 1px solid var(--ps-borde); border-radius: 999px;
  padding: 0.22rem 0.65rem; cursor: pointer; text-decoration: none;
  transition: color .15s, border-color .15s;
}
.ps-btn:hover { color: var(--ps-acento); border-color: rgba(183, 28, 28, 0.35); }
.ps-btn.is-active { color: #1b7a3d; border-color: rgba(27, 122, 61, 0.4); background: rgba(27, 122, 61, 0.07); }
.ps-btn--down.is-active { color: var(--ps-acento); border-color: rgba(183, 28, 28, 0.4); background: rgba(183, 28, 28, 0.07); }
.ps-btn span:empty { display: none; }

/* ── Aviso de login ── */
.ps-login-aviso {
  margin-top: 0.45rem; font-size: 0.8rem; color: #6b7280;
  background: #fff8ec; border: 1px solid rgba(212, 160, 23, 0.35);
  padding: 0.4rem 0.65rem; border-radius: var(--ps-radio);
}
.ps-login-aviso a { color: var(--ps-acento); font-weight: 700; }

/* ── Lista de comentarios ── */
.ps-comentarios { margin-top: 0.55rem; }
.ps-com-cargando { font-size: 0.8rem; color: #9aa0ab; margin: 0.3rem 0; }
.ps-com {
  padding: 0.5rem 0.65rem; background: var(--ps-fondo-com);
  border: 1px solid var(--ps-borde-com); border-radius: var(--ps-radio);
  margin-top: 0.45rem;
}
.ps-com-head { display: flex; align-items: center; gap: 0.5rem; font-size: 0.76rem; color: #6b7280; }
.ps-com-head b { color: #374151; }
.ps-com-borrar { margin-left: auto; background: none; border: none; color: #c2c7cf; cursor: pointer; }
.ps-com-borrar:hover { color: var(--ps-acento); }
.ps-com p { margin: 0.25rem 0 0; font-size: 0.85rem; color: #374151; white-space: pre-wrap; }

/* ── Formulario de comentario ── */
.ps-com-form { display: flex; gap: 0.5rem; align-items: flex-end; margin-top: 0.45rem; }
.ps-com-form textarea {
  flex: 1; resize: vertical; font: inherit; font-size: 0.85rem;
  border: 1px solid var(--ps-borde); border-radius: var(--ps-radio);
  padding: 0.45rem 0.6rem; min-height: 2.4rem;
}
.ps-com-form button {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.8rem; font-weight: 700; color: #fff; background: var(--ps-acento);
  border: none; border-radius: var(--ps-radio); padding: 0.5rem 0.8rem; cursor: pointer;
}
.ps-com-form button:disabled { opacity: 0.6; cursor: default; }
.ps-com-form-main { display: flex; gap: 0.5rem; align-items: flex-end; flex: 1; }
.ps-com-form-main textarea { flex: 1; }
.ps-com-form-acciones { display: flex; gap: 0.35rem; align-items: flex-end; }

/* ── Imágenes adjuntas (bucket promo-imagenes) ── */
.ps-btn-imagen { background: none; border: 1px solid var(--ps-borde); border-radius: var(--ps-radio); color: #6b7280; padding: 0.5rem 0.6rem; cursor: pointer; }
.ps-btn-imagen:hover { color: #056dae; border-color: rgba(5, 109, 174, 0.4); }
.ps-com-previews { display: flex; gap: 0.4rem; margin-top: 0.4rem; }
.ps-preview { position: relative; }
.ps-preview img { height: 56px; width: 72px; object-fit: cover; border-radius: 6px; border: 1px solid var(--ps-borde-com); }
.ps-preview button { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; line-height: 1; border-radius: 50%; border: none; background: var(--ps-acento); color: #fff; font-size: 0.7rem; cursor: pointer; }
.ps-com-imgs { display: flex; gap: 0.4rem; margin-top: 0.45rem; flex-wrap: wrap; }
.ps-com-imgs img { height: 90px; width: 120px; object-fit: cover; border-radius: var(--ps-radio); border: 1px solid var(--ps-borde-com); }

/* ── Moderación (usuario maestro) ── */
.ps-com--oculto { opacity: 0.55; border-style: dashed; }
.ps-com-estado { font-size: 0.7rem; font-weight: 700; color: #92400e; background: #fffbeb; border: 1px solid #fde68a; border-radius: 999px; padding: 0.05rem 0.45rem; }
.ps-com-moderar { background: none; border: none; color: #c2c7cf; cursor: pointer; }
.ps-com-moderar:hover { color: #056dae; }