/* =========================================================
   mbq comments v2 (moderno / amigable / premium)
   ========================================================= */

/* tokens */
:root{
  --mbq-radius-xl: 20px;
  --mbq-radius-lg: 16px;
  --mbq-radius-md: 14px;
  --mbq-radius-sm: 12px;

  --mbq-border: rgba(0,0,0,.08);
  --mbq-border-soft: rgba(0,0,0,.06);

  --mbq-shadow-1: 0 10px 30px rgba(0,0,0,.06);
  --mbq-shadow-2: 0 14px 40px rgba(0,0,0,.08);
  --mbq-shadow-3: 0 18px 55px rgba(0,0,0,.12);

  --mbq-surface: #fff;
  --mbq-surface-2: rgba(0,0,0,.02);
  --mbq-surface-3: rgba(0,0,0,.04);

  --mbq-text: rgba(0,0,0,.86);
  --mbq-muted: rgba(0,0,0,.60);
  --mbq-muted-2: rgba(0,0,0,.45);

  --mbq-focus: rgba(0,0,0,.10);
}

/* =========================================================
   feed layout
   ========================================================= */

.mbqCommentsWrap{
  margin-top:12px;
}

.mbqCommentsShell{
  display:flex;
  flex-direction:column;
  gap:14px;
}

/* sticky header */
.mbqCommentsWrap .mbqCommentsTop{
  position:sticky;
  top:12px; /* ajusta si hay header fijo */
  z-index:50;

  background:rgba(255,255,255,.86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  border:1px solid var(--mbq-border-soft);
  border-radius: var(--mbq-radius-xl);
  box-shadow: var(--mbq-shadow-2);

  padding:12px;
}

/* separacion del feed para que respire debajo del sticky */
.mbqCommentsWrap .mbqCommentsFeed{
  margin-top:12px;
}

.mbqCommentsWrap .mbqCommentsTop > * + *{
  margin-top:10px;
}

/* paginacion */
.mbqCommentsPager{
  background: var(--mbq-surface);
  border:1px solid var(--mbq-border-soft);
  border-radius: var(--mbq-radius-lg);
  padding:10px 12px;
  box-shadow: var(--mbq-shadow-1);
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}

.mbqCommentsPager--top{
  box-shadow:none;
  border-radius: var(--mbq-radius-md);
  padding:8px 10px;
}

.mbqCommentsPager .ipsPagination{
  margin:0 !important;
}

/* lista */
.mbqCommentsList{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.mbqUnreadSep{
  border:0;
  height:1px;
  background:linear-gradient(to right, transparent, rgba(0,0,0,.20), transparent);
  margin:4px 0;
}

/* “no comments” */
.mbqNoComments{
  background: var(--mbq-surface);
  border:1px dashed rgba(0,0,0,.18);
  border-radius: var(--mbq-radius-xl);
  padding:18px 14px;
  text-align:center;
  box-shadow: var(--mbq-shadow-1);
}

.mbqNoCommentsIcon{
  width:48px;
  height:48px;
  border-radius: var(--mbq-radius-md);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: var(--mbq-surface-3);
  margin-bottom:8px;
  font-size:18px;
}

.mbqNoCommentsTxt{
  margin:0;
  font-weight:800;
  color:var(--mbq-text);
}

/* reply */
.mbqReplyWrap{
  margin-top:6px;
}

.mbqReplyCard{
  background: var(--mbq-surface);
  border:1px solid var(--mbq-border-soft);
  border-radius: var(--mbq-radius-xl);
  box-shadow: var(--mbq-shadow-2);
  padding:14px;
}

.mbqReplyWarn{
  margin:0 0 10px 0 !important;
  padding:10px 12px;
  border-radius: var(--mbq-radius-md);
  background:rgba(255, 193, 7, .10);
  border:1px solid rgba(255, 193, 7, .25);
}

.mbqReplyForm{
  border-top:1px solid var(--mbq-border-soft);
  padding-top:12px;
}

.mbqReplyCard .ipsAreaBackground{
  background:transparent !important;
}

/* =========================================================
   wrapper article (evitar doble marco ipsBox)
   ========================================================= */

.mbqCommentArticle{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  margin:0 !important;
}

.mbqCommentsWrap .ipsBox.ipsComment{
  background:transparent;
  border:0;
  box-shadow:none;
}

/* =========================================================
   comment card
   ========================================================= */

.mbqCommentCard{
  background: var(--mbq-surface);
  border:1px solid var(--mbq-border-soft);
  border-radius: var(--mbq-radius-xl);
  box-shadow: var(--mbq-shadow-2);
  overflow:hidden;

  transform: translateZ(0);
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}

.mbqCommentCard:hover{
  box-shadow: var(--mbq-shadow-3);
  transform: translateY(-2px);
  border-color: rgba(0,0,0,.10);
}

/* estados */
.ipsModerated .mbqCommentCard{
  border-color: rgba(255, 193, 7, .28);
}

.ipsComment_popular .mbqCommentCard{
  border-color: rgba(0,0,0,.12);
}

.ipsComment_highlighted .mbqCommentCard{
  outline: 3px solid rgba(0,0,0,.04);
}

/* top */
.mbqCommentTop{
  padding:14px 14px 10px 14px;
  gap:12px;
}

.mbqAuthorRow{
  align-items:flex-start;
  gap:12px;
}

/* avatar */
.mbqAvatar .ipsUserPhoto{
  border-radius: var(--mbq-radius-md) !important;
  overflow:hidden;
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
}

/* author text */
.mbqAuthorMeta{min-width:0;}
.mbqAuthorLine{display:flex; align-items:center; gap:8px; min-width:0;}

.mbqAuthorName{
  margin:0;
  line-height:1.1;
  letter-spacing:-.25px;
}

.mbqAuthorName strong{
  font-weight:900;
  color: var(--mbq-text);
}

.mbqRepBadge{margin-left:6px; vertical-align:middle; opacity:.95;}

.mbqMetaLine{
  margin:5px 0 0 0;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
  color: var(--mbq-muted);
  opacity:1;
}

.mbqDateLink{font-weight:700; color: var(--mbq-muted);}
.mbqDot{opacity:.65; padding:0 2px;}
.mbqIpLink{opacity:.85;}

/* badges */
.mbqBadges{margin-bottom:8px; padding:10px 14px 0 14px;}
.mbqBadges--desktop{padding:0; margin:0 0 8px 0;}
.mbqBadges--phone{padding:10px 14px 0 14px;}

.mbqBadges .ipsBadge{
  border-radius:999px !important;
  padding:.38rem .65rem !important;
  font-weight:900 !important;
  letter-spacing:-.1px;
}

/* tools */
.mbqToolsWrap{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:8px;
}

.mbqTools{gap:6px;}

.mbqEllipsis{
  width:38px;
  height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 14px;
  background: var(--mbq-surface-3);
  transition: transform .14s ease, background .14s ease, box-shadow .14s ease;
}

.mbqEllipsis:hover{
  background: rgba(0,0,0,.08);
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(0,0,0,.10);
}

.mbqMultiMod{display:flex; align-items:center;}

/* body */
.mbqCommentBody{
  padding:0 14px 12px 14px !important;
  color: var(--mbq-text);
  line-height:1.65;
  font-size: 15px;
}

.mbqCommentBody.ipsContained{
  border-top:1px solid var(--mbq-border-soft);
}

/* mejorar legibilidad: limites de ancho en texto largo (sin romper embeds) */
.mbqCommentBody > p,
.mbqCommentBody > ul,
.mbqCommentBody > ol,
.mbqCommentBody > blockquote{
  max-width: 78ch;
}

.mbqCommentBody img,
.mbqCommentBody iframe,
.mbqCommentBody video{
  max-width:100%;
  height:auto;
}

/* pending note */
.mbqPendingNote{
  margin:12px 0 10px 0;
  padding:10px 12px;
  border-radius: var(--mbq-radius-md);
  background:rgba(255, 193, 7, .10);
  border:1px solid rgba(255, 193, 7, .25);
}

/* edit line */
.mbqEditLine{
  margin-top:10px;
  padding-top:10px;
  border-top:1px dashed rgba(0,0,0,.14);
  color: var(--mbq-muted);
}

/* footer */
.mbqCommentFooter{
  padding:10px 14px 12px 14px;
  border-top:1px solid var(--mbq-border-soft);
  background: linear-gradient(to bottom, rgba(0,0,0,.00), rgba(0,0,0,.03));
}

.mbqReactions{
  margin-bottom:10px;
}

/* acciones tipo pills */
.mbqActions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

/* quote pill */
.mbqQuoteLink{
  font-weight:900;
  padding:7px 12px;
  border-radius:999px;
  background: var(--mbq-surface-3);
  transition: background .14s ease, transform .14s ease, box-shadow .14s ease;
  color: var(--mbq-text);
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.mbqQuoteLink:hover{
  background: rgba(0,0,0,.08);
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(0,0,0,.10);
}

/* si hay links normales dentro del footer, que no se vean chillones */
.mbqCommentFooter a{
  font-weight:800;
}

/* =========================================================
   ignored card (notice elegante)
   ========================================================= */

.mbqIgnoredCard{
  background: var(--mbq-surface);
  border:1px dashed rgba(0,0,0,.20);
  border-radius: var(--mbq-radius-xl);
  box-shadow: var(--mbq-shadow-1);
  padding:12px !important;
  margin:0 0 14px 0;
}

.mbqIgnoredInner{
  display:flex;
  gap:12px;
  align-items:flex-start;
}

.mbqIgnoredIcon{
  width:44px;
  height:44px;
  border-radius: var(--mbq-radius-md);
  display:flex;
  align-items:center;
  justify-content:center;
  background: var(--mbq-surface-3);
  font-size:16px;
  flex:0 0 44px;
}

.mbqIgnoredTitle{
  font-weight:900;
  letter-spacing:-.2px;
  line-height:1.2;
  margin:2px 0 6px 0;
  color: var(--mbq-text);
}

.mbqIgnoredOptions{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 12px;
  border-radius:999px;
  background: var(--mbq-surface-3);
  font-weight:900;
  transition: background .14s ease, transform .14s ease, box-shadow .14s ease;
}

.mbqIgnoredOptions:hover{
  background: rgba(0,0,0,.08);
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(0,0,0,.10);
}

/* =========================================================
   micro-tweaks para que ips no choque con el look
   ========================================================= */

/* evita que el menu/hovers se escondan detras del sticky */
.mbqCommentsWrap .ipsMenu{
  z-index: 9999;
}

/* suaviza el panel del author cuando lo envolvemos */
.mbqCommentCard .ipsPhotoPanel_mini > div{min-width:0;}

/* botones chicos tipo ipsButton dentro de comment controls (si aparecen) */
.mbqCommentsWrap .ipsButton.ipsButton_verySmall{
  border-radius:999px;
  font-weight:900;
}

/* =========================================================
   responsive
   ========================================================= */

@media (max-width: 767px){
  .mbqCommentsWrap .mbqCommentsTop{
    top:10px;
    border-radius: 18px;
    padding:10px;
  }

  .mbqCommentTop{padding:12px;}
  .mbqCommentBody{padding:0 12px 12px 12px !important;}
  .mbqCommentFooter{padding:10px 12px 12px 12px;}

  .mbqEllipsis{
    width:36px;
    height:36px;
    border-radius: 14px;
  }Q

  .mbqCommentsPager{border-radius:14px;}
  .mbqReplyCard{border-radius:18px; padding:12px;}

  .mbqIgnoredCard{border-radius:18px;}
  .mbqIgnoredIcon{width:40px;height:40px;border-radius:12px;flex-basis:40px;}
}