/* assets/engage.css
   Capa de interacción (comentarios/likes/share)
   Prefijo engage-* para NO afectar tu CSS actual.
*/

.engage{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:12px 0 0;}
.engage-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 10px;border-radius:12px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;cursor:pointer;
  font-weight:900;
}
.engage-btn:disabled{opacity:.6;cursor:not-allowed;}

.engage-like-count{font-weight:900;}
.engage-comment-status{font-size:12px;opacity:.75;font-weight:700;}
.engage-comment-status.engage-warn{opacity:1;}

.engage-accordion{
  width:100%;
  margin-top:10px;
  padding:10px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:12px;
  background:rgba(255,255,255,.7);
}

.engage-notice{
  margin:0 0 10px;
  padding:10px;
  border:1px solid rgba(0,0,0,.12);
  border-radius:12px;
}

.engage-comments-list{margin-top:6px;}
.engage-comment{padding:8px 0;border-bottom:1px dashed rgba(0,0,0,.10);}
.engage-comment:last-child{border-bottom:none;}
.engage-comment-meta{font-size:13px;}
.engage-comment-body{margin-top:4px;font-size:14px;}
.engage-muted{opacity:.7;font-size:13px;}

.engage-form{margin-top:10px;display:grid;gap:8px;}
.engage-form input,.engage-form textarea{
  width:100%;padding:10px;border-radius:12px;
  border:1px solid rgba(0,0,0,.12);
  font:inherit;
}
.engage-form textarea{min-height:96px;resize:vertical;}
.engage-submit{padding:10px;border-radius:12px;border:0;cursor:pointer;font-weight:900;}
.engage-msg{font-size:13px;opacity:.9;}

@media (max-width:520px){
  .engage-btn{flex:1;justify-content:center;}
}


/* Mantener estilo normal aunque esté disabled */
.engage .btn-like:disabled,
.engage .btn-wa:disabled,
.engage .btn-comment-toggle:disabled{
  opacity: 1 !important;
  filter: none !important;
}

/* Opcional: que se note que está bloqueado sin cambiar color */
.engage .btn-like:disabled{
  cursor: not-allowed;
}