/* Paleta y medidas */
#ab-comments{
  --c-card:#1c1e23;
  --c-txt:#ffffff;
  --c-sub:#d6d6de;
  --c-line:#2a2d35;
  --c-pill:#8b6cff;

  --vspace:12px;
  --indent:24px;

  --ab-max: 980px;
  --ab-max-xl: 1120px;

  --react-emoji: 2rem;
  --react-count: 1.05rem;
  --react-label: .85rem;
}

/* Ajuste final: prevalece sobre los estilos legacy duplicados de reply. */
@media (max-width:560px){
  #ab-comments.x-inline-reply #respond.comment-respond{
    margin:8px 0 0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }
  #ab-comments.x-inline-reply #reply-title.comment-reply-title{
    display:flex !important;
    width:100% !important;
    min-height:0 !important;
    margin:0 0 8px !important;
    padding:7px 9px !important;
    align-items:center !important;
    justify-content:flex-start !important;
    flex-wrap:wrap !important;
    gap:7px !important;
    font-size:12px !important;
    white-space:normal !important;
    box-shadow:none !important;
  }
  #ab-comments.x-inline-reply #reply-title.comment-reply-title small{
    order:initial !important;
    flex:0 0 auto !important;
    width:auto !important;
    margin:0 0 0 auto !important;
  }
  #ab-comments.x-inline-reply #reply-title #cancel-comment-reply-link{
    display:inline-flex !important;
    width:auto !important;
    height:30px !important;
    min-height:30px !important;
    margin:0 !important;
    padding:0 9px !important;
    border-radius:9px !important;
    font-size:11px !important;
    box-shadow:none !important;
  }
}

#ab-comments, #ab-comments * { box-sizing: border-box; }
#ab-comments{ width:100%; max-width:var(--ab-max); margin:0 auto; color:var(--c-txt); }
@media (min-width:1400px){ #ab-comments{ max-width:var(--ab-max-xl); } }

/* ===== Reacciones ===== */
#ab-comments .ab-react{ display:flex; flex-wrap:wrap; justify-content:center; gap:.25rem .75rem; max-width:760px; margin:0 auto 1rem; }
#ab-comments .ab-react-title{ width:100%; text-align:center; margin-bottom:.25rem; font-weight:700; }
#ab-comments .ab-react-sub{ width:100%; text-align:center; margin-bottom:.5rem; opacity:.85; }
#ab-comments .ab-react .ab-react-item{
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
  min-width:90px; text-align:center; background:transparent; border:none; padding:.25rem .5rem; border-radius:.75rem; cursor:pointer;
}
#ab-comments .ab-react .ab-react-item .ab-emoji{ font-size:var(--react-emoji); line-height:1; }
#ab-comments .ab-react .ab-react-item .ab-count{ font-size:var(--react-count); font-weight:700; margin-top:.25rem; color:#fff !important; }
#ab-comments .ab-react .ab-react-item .ab-label{ font-size:var(--react-label); color:#fff !important; }
#ab-comments .ab-react .ab-react-item.is-active{ background:rgba(139,108,255,.15); }

/* ===== Barra contador + tabs ===== */
#ab-comments .ab-headerline{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:.75rem 0 1rem; }
#ab-comments .ab-counter{ font-weight:700; white-space:nowrap; }
@media (max-width:600px){
  #ab-comments .ab-headerline{ flex-wrap:wrap; }
  #ab-comments .ab-headerline .ab-tabs{ margin-left:auto; }
}
#ab-comments .ab-tabs{ display:flex; gap:.5rem; margin:0; }
#ab-comments .ab-tabs a{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.35rem .75rem; border-radius:999px; font-weight:700; font-size:.9rem;
  background:#0e0c14; color:var(--c-sub); border:1px solid var(--c-line); text-decoration:none;
}
#ab-comments .ab-tabs a.is-active{ background:var(--c-pill); color:#fff; border-color:transparent; }

/* ===== Composer ===== */
#ab-comments .ab-composer{ position:relative; display:flex; gap:.75rem; padding:.75rem; border-radius:1rem; background:linear-gradient(180deg,#181a21,#13151b); border:1px solid var(--c-line); box-shadow:0 6px 16px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.04); margin-bottom:.75rem; }
#ab-comments .ab-composer-avatar{ flex:0 0 auto; }
#ab-comments .ab-composer-avatar-img{ border-radius:999px; }
#ab-comments .ab-composer-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.5rem; }
#ab-comments .ab-composer textarea{ width:100%; min-height:72px; resize:none; border-radius:.75rem; background:#0f1116; color:#fff; border:1px solid #252733; padding:.9rem 1rem; line-height:1.45; outline:none; }
#ab-comments .ab-composer textarea:focus{ border-color:#5d49ff; box-shadow:0 0 0 3px rgba(93,73,255,.25); }
#ab-comments .ab-composer-bar{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.25rem .25rem .25rem .5rem; }
#ab-comments .ab-tools{ display:flex; align-items:center; gap:.35rem; }

/* Botones de la toolbar */
#ab-comments .ab-tool, #ab-comments .ab-emoji-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:.6rem; border:1px solid var(--c-line);
  background:#0f1116; color:#dcdcef; cursor:pointer; font-weight:700;
}
#ab-comments .ab-tool-b b{ font-weight:800; }
#ab-comments .ab-tool-i i{ font-style:italic; font-weight:700; }
#ab-comments .ab-tool-u u{ text-decoration:underline; font-weight:700; }
#ab-comments .ab-tool:hover, #ab-comments .ab-emoji-toggle:hover{ border-color:#454a60; background:#141722; }

#ab-comments .ab-emoji{ position:relative; }
#ab-comments .ab-emoji-panel{
  position:absolute; z-index:50; min-width:260px;
  background:#0f1116; border:1px solid var(--c-line); border-radius:.75rem;
  padding:.35rem; display:grid; grid-template-columns:repeat(9, 28px); gap:.25rem;
  box-shadow:0 12px 24px rgba(0,0,0,.35);
}
#ab-comments .ab-emoji-panel[hidden]{ display:none !important; } /* oculto por defecto */
#ab-comments .ab-emoji-item{
  width:28px; height:28px; line-height:28px; text-align:center; border-radius:.5rem;
  border:1px solid transparent; background:transparent; cursor:pointer;
}
#ab-comments .ab-emoji-item:hover{ background:#151826; border-color:#2c3042; }

#ab-comments .ab-meta-actions{ display:flex; align-items:center; gap:.6rem; margin-left:auto; }
#ab-comments .ab-char{ font-size:.85rem; color:#9aa0b4; }
#ab-comments .ab-char.is-warn{ color:#ffb54a; }
#ab-comments .ab-char.is-max{ color:#ff6666; font-weight:700; }
#ab-comments .ab-send{ display:inline-flex; align-items:center; justify-content:center; padding:.5rem .9rem; border-radius:.75rem; border:1px solid transparent; background:linear-gradient(180deg,#8b6cff,#6a50ff); color:#fff; font-weight:700; cursor:pointer; }
#ab-comments .ab-send:disabled{ opacity:.5; cursor:not-allowed; background:#2b2f3d; color:#b8bdd2; }

/* ===== Lista + threads ===== */
#ab-comments .comment-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; row-gap:var(--vspace); align-items:stretch; width:100%; }
#ab-comments .comment-list > li{ margin:0; width:100%; }
#ab-comments .comment-list > .ab-thread{ display:flex; flex-direction:column; row-gap:var(--vspace); width:100%; margin:0 0 var(--vspace); }
#ab-comments .comment-list > .ab-thread > li.ab-item{ margin:0; width:100%; }
#ab-comments .comment-list > .ab-thread > li.ab-item > .ab-card{ width:100%; }

/* Tarjeta comentario */
#ab-comments .ab-card{ display:flex; gap:.75rem; background:var(--c-card); border:1px solid var(--c-line); border-radius:1rem; padding:1rem 1.25rem; width:100%; }
#ab-comments .ab-card.is-premium{ border-color:rgba(163,107,255,.26); box-shadow:0 10px 24px rgba(0,0,0,.18); }
#ab-comments .ab-avatar{ flex:0 0 auto; }
#ab-comments .ab-avatar > .lm-avatar-frame,
#ab-comments .ab-composer-avatar > .lm-avatar-frame{ width:40px; height:40px; }
#ab-comments .ab-avatar > .lm-avatar-frame > img,
#ab-comments .ab-composer-avatar > .lm-avatar-frame > img{ width:100%; height:100%; }
#ab-comments .ab-avatar img.lm-premium-avatar{ box-shadow:0 0 0 2px rgba(163,107,255,.38), 0 0 0 5px rgba(163,107,255,.12); }
#ab-comments .ab-body{ flex:1; min-width:0; display:flex; flex-direction:column; }
#ab-comments .ab-meta{ display:flex; align-items:center; gap:.35rem; margin:0 0 .4rem; color:var(--c-sub); flex-wrap:wrap; }
#ab-comments .ab-author{ font-weight:700; color:#fff; }
#ab-comments .lm-premium-badge{ display:inline-flex; align-items:center; justify-content:center; min-height:22px; padding:0 .55rem; border-radius:999px; background:linear-gradient(135deg,#9c69da,#d06fa5); color:#fff; font-size:.67rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
#ab-comments .ab-dot{ opacity:.5; }
#ab-comments .ab-content{ display:block; margin:.2rem 0 .6rem; line-height:1.55; word-break:break-word; overflow-wrap:anywhere; color:#e9e9ef; }

#ab-comments .ab-actions{ display:flex; gap:.6rem; align-items:center; margin-top:auto; }
#ab-comments .ab-vote{ display:inline-flex; align-items:center; gap:.35rem; background:transparent; border:1px solid var(--c-line); border-radius:.75rem; padding:.25rem .6rem; cursor:pointer; color:inherit; }
#ab-comments .ab-like-icon, #ab-comments .ab-dislike-icon{ font-size:1rem; line-height:1; }
#ab-comments .ab-vote.is-active{ outline:2px solid rgba(139,108,255,.35); }
#ab-comments .ab-vote[disabled]{ opacity:.6; cursor:not-allowed; }
#ab-comments .ab-reply a, #ab-comments .ab-edit a{ color:var(--c-sub); text-decoration:none; }

/* Seguridad */
#comments .comment-list, #comments .comment-list>li, #comments .ab-card{ max-width:100%; width:100%; }

/* === Botón Publicar === */
#ab-comments .ab-send{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.5rem .9rem; border-radius:.75rem; border:1px solid transparent;
  background:linear-gradient(180deg,#8b6cff,#6a50ff); color:#fff; font-weight:700; cursor:pointer;
}
#ab-comments .ab-send:disabled{
  opacity:.5; cursor:not-allowed; background:#2b2f3d; color:#b8bdd2;
}

/* === Hacer que "Responder" sea igual a Publicar === */
#ab-comments .ab-reply .comment-reply-link{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.5rem .9rem; border-radius:.75rem; border:1px solid transparent;
  background:linear-gradient(180deg,#8b6cff,#6a50ff); color:#fff !important;
  font-weight:700; text-decoration:none; cursor:pointer;
}
#ab-comments .ab-reply .comment-reply-link:hover{
  filter:brightness(1.05);
}

/* === Responder con estilo de "Publicar" + icono ↩︎ === */
#ab-comments .ab-reply .comment-reply-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.45rem;                                /* espacio para el icono */
  padding:.5rem .9rem;
  border-radius:.75rem;
  border:1px solid transparent;
  background:linear-gradient(180deg,#8b6cff,#6a50ff);
  color:#fff !important;
  font-weight:700;
  text-decoration:none;
  cursor:pointer;
}
#ab-comments .ab-reply .comment-reply-link::before{
  content:"↩︎";
  font-weight:800;
  line-height:1;
}
#ab-comments .ab-reply .comment-reply-link:hover{ filter:brightness(1.05); }

/* === Imágenes dentro del contenido del comentario === */
#ab-comments .ab-content img{
  max-width:100%;            /* nunca excede el ancho del contenedor */
  width:auto !important;     /* ignora width inline gigantes */
  height:auto !important;    /* mantiene proporción */
  display:block;
  margin:.6rem 0;
  border-radius:.5rem;
}
/* límite de altura en pantallas medias/grandes para evitar "sábanas" */
@media (min-width:640px){
  #ab-comments .ab-content img{ max-height:70vh; object-fit:contain; }
}

/* ===== Barra “Responder a … / Cancelar respuesta” ===== */
#ab-comments #reply-title.comment-reply-title{
  display:inline-flex;              /* todo en una línea */
  align-items:center;
  gap:.65rem;                       /* espacio entre partes */
  padding:.5rem .85rem;
  margin:.25rem 0 .6rem;
  background:linear-gradient(135deg,rgba(139,108,255,.15),rgba(106,80,255,.10));
  border:1px solid rgba(139,108,255,.35);
  border-radius:.75rem;
  color:#fff;
  font-size:1rem;
  font-weight:800;
  line-height:1;
  box-shadow:0 0 0 3px rgba(139,108,255,.08);
}
#ab-comments #reply-title.comment-reply-title::before{
  content:"↩︎";                     /* icono responder */
  color:var(--c-pill);
  font-weight:900;
  filter:drop-shadow(0 0 4px rgba(139,108,255,.5));
}

/* el nombre del usuario se vuelve fuerte si WP lo envuelve en <cite>/<a> */
#ab-comments #reply-title a,
#ab-comments #reply-title cite{
  color:#fff;
  font-weight:800;
  text-decoration:none;
}

/* el contenedor <small> que WP pone alrededor del cancel */
#ab-comments #reply-title small{ margin-left:.15rem; }

/* “Cancelar respuesta” como pill/botón */
#ab-comments #reply-title .cancel-comment-reply-link{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.3rem .55rem;
  border-radius:.55rem;
  background:rgba(255,85,120,.12);
  border:1px solid rgba(255,85,120,.35);
  color:#ffd0da !important;
  font-weight:700;
  text-decoration:none;
}
#ab-comments #reply-title .cancel-comment-reply-link::before{
  content:"✕";
  font-weight:900;
  line-height:1;
  color:#ff9fb4;
}
#ab-comments #reply-title .cancel-comment-reply-link:hover{
  filter:brightness(1.05);
  border-color:rgba(255,85,120,.5);
}

/* === Catálogo grande de emojis (anclado al botón) === */
#ab-comments .ab-emoji{ position:relative; }

#ab-comments .ab-emoji-catalog{
  position:absolute;
  left:0;                                 /* desde la esquina del botón */
  top:calc(100% + 8px);                   /* debajo del botón */
  z-index:60;
  width:min(520px, calc(100vw - 32px));
  max-height:360px;
  overflow:auto;
  padding:.6rem;
  border:1px solid var(--c-line);
  border-radius:.9rem;
  background:#0f1116;
  box-shadow:0 16px 36px rgba(0,0,0,.45);
  transform:translateX(0);                /* lo usamos para clamp horizontal */
}

/* Flip hacia arriba si no hay espacio abajo */
#ab-comments .ab-emoji-catalog.is-flip{
  top:auto;
  bottom:calc(100% + 8px);
}

/* Cabecera con tabs */
#ab-comments .ab-emoji-head{ position:sticky; top:0; background:#0f1116; padding-bottom:.4rem; }
#ab-comments .ab-emoji-tabs{ display:flex; gap:.35rem; margin-bottom:.35rem; }
#ab-comments .ab-emoji-tabs button{
  padding:.28rem .55rem; border-radius:.6rem; border:1px solid var(--c-line);
  background:#12141a; color:#d6d7e7; cursor:pointer; font-weight:700;
}
#ab-comments .ab-emoji-tabs button.is-active{ background:var(--c-pill); color:#fff; border-color:transparent; }

/* Grid */
#ab-comments .ab-emoji-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
  gap:.25rem;
}
#ab-comments .ab-emoji-grid .ab-emoji-item{
  width:36px; height:36px; line-height:36px; text-align:center;
  border-radius:.5rem; border:1px solid transparent; background:transparent;
  cursor:pointer; font-size:22px;
}
#ab-comments .ab-emoji-grid .ab-emoji-item:hover{ background:#151826; border-color:#2c3042; }

/* Scrollbar bonito */
#ab-comments .ab-emoji-catalog{
  scrollbar-width:thin;                           /* Firefox */
  scrollbar-color:#6a50ff #12141a;
}
#ab-comments .ab-emoji-catalog::-webkit-scrollbar{ width:10px; }
#ab-comments .ab-emoji-catalog::-webkit-scrollbar-track{
  background:#12141a; border-radius:10px;
}
#ab-comments .ab-emoji-catalog::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#8b6cff,#6a50ff);
  border-radius:10px; border:2px solid #12141a;
}
#ab-comments .ab-emoji-catalog::-webkit-scrollbar-thumb:hover{ filter:brightness(1.08); }

@media (max-width:600px){
  #ab-comments .ab-emoji-catalog{ max-height:320px; }
}

/* =======================
   MOBILE FIXES GLOBALES
   ======================= */
#ab-comments .ab-body { min-width: 0; }                    /* evita desbordes */
#ab-comments .ab-content { overflow-wrap: anywhere; }      /* corta palabras largas */
#ab-comments img, 
#ab-comments svg { max-width: 100%; height: auto; }

/* Tarjeta de comentario más compacta en móvil */
@media (max-width: 768px){
  #ab-comments .ab-card{
    display: grid;
    grid-template-columns: 36px 1fr; /* avatar + contenido */
    gap: 10px;
  }
  #ab-comments .ab-avatar > .lm-avatar-frame,
  #ab-comments .ab-composer-avatar > .lm-avatar-frame{ width:36px; height:36px; }
  #ab-comments .ab-avatar img{ width:36px; height:36px; border-radius:9999px; }
  #ab-comments .ab-avatar > .lm-avatar-frame > img,
  #ab-comments .ab-composer-avatar > .lm-avatar-frame > img{ width:100%; height:100%; }
  #ab-comments .ab-actions{ flex-wrap: wrap; gap: 8px; }
  /* El formulario de reply ocupa todo el ancho dentro de un comentario */
  #ab-comments #respond{ width:100%; margin-top:10px; }
}

/* ===========================
   COMPOSER: LAYOUT EN MÓVIL
   =========================== */
/* La barra del editor pasa a GRID: 
   - fila 1: [iconos | contador]
   - fila 2: [botón publicar a 100%] */
@media (max-width: 560px){
  #ab-comments .ab-composer-bar{
    display: grid !important;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "tools counter"
      "submit submit";
    gap: 8px;
    align-items: center;
  }

  /* Iconos */
  #ab-comments .ab-tools{
    grid-area: tools;
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    min-width: 0;
  }

  /* Hacemos "transparentes" los contenedores para colocar cada hijo en el grid */
  #ab-comments .ab-meta-actions{ 
    grid-area: submit; 
    display: contents;      /* Permite que .ab-char y .ab-send sean ítems del grid */
  }

  /* Contador siempre en una sola línea, a la derecha */
  #ab-comments .ab-char{
    grid-area: counter;
    justify-self: end;
    line-height: 1;
    white-space: nowrap;
    font-size: .9rem;
  }

  /* Botón Publicar full-width, centrado y sin posiciones raras */
  #ab-comments .ab-send{
    grid-area: submit;
    width: 100%;
    display: inline-flex;
    justify-content: center;
    padding: 10px 14px;
    border-radius: .75rem;
    position: static !important;
    float: none !important;
    right:auto !important; left:auto !important; bottom:auto !important;
    transform:none !important;
    z-index: 1;
  }

  /* Textarea estable en pantallas pequeñas */
  #ab-comments .ab-composer textarea{ min-height: 92px; }
}

/* Reacciones: que no dependan de hover en táctil (por si tu tema aplica efectos) */
@media (hover:none), (pointer:coarse){
  #ab-comments .ab-actions { opacity: 1 !important; transform: none !important; }
}

/* ==== CENTRADO EN MÓVIL: tabs + tarjetas + composer ==== */
@media (max-width: 560px){
  /* Barra de filtros (usa varios selectores para cubrir tu HTML) */
  #ab-comments .ab-tabs,
  #ab-comments .ab-sort,
  #ab-comments .ab-filters,
  #ab-comments .ab-order {
    display: flex !important;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    text-align: center;
    margin-inline: auto;
    width: 100%;
  }

  /* Si los chips/pastillas son inline, centrado extra */
  #ab-comments .ab-tabs > *,
  #ab-comments .ab-sort > *,
  #ab-comments .ab-filters > * {
    margin: 0;               /* elimina márgenes heredados que empujan */
  }

  /* Asegura que todo el contenido se centre dentro del contenedor */
  #ab-comments .ab-composer,
  #ab-comments .ab-card,
  #ab-comments .ab-children {
    margin-left: auto;
    margin-right: auto;
  }
}

/* ===== Centrar "X Comentarios" en móvil — robusto ===== */
@media (max-width:560px){
  /* Contenedor del header de comentarios (varias clases comunes) */
  #ab-comments .ab-header,
  #ab-comments .ab-comments-header,
  #ab-comments .ab-top,
  #comments    .comments-header {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: .5rem !important;
    width: 100% !important;
    margin: 0 auto !important;
    text-align: center !important;
  }

  /* La pastilla/título del contador (cubre chips/badges/heading) */
  #ab-comments .ab-comments-count,
  #ab-comments .ab-count,
  #ab-comments .ab-chip,
  #ab-comments .chip,
  #ab-comments .badge,
  #ab-comments .ab-title,
  #ab-comments .ab-heading,
  #ab-comments .comments-title,
  #ab-comments h1, #ab-comments h2, #ab-comments h3 {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
    white-space: nowrap !important;   /* no se parte “12 Comentarios” */
  }
}

/* ====== TOOLS: en móvil 3x2 (no toca desktop) ====== */
@media (max-width:640px){
  /* Barra del composer en columna para que quepa todo cómodo */
  #ab-comments.x-inline-reply .ab-composer-bar{
    display:flex; flex-direction:column; gap:10px;
  }
  /* Los botones del editor (B,I,U, “, imagen, emoji) en grid 3x2 */
  #ab-comments.x-inline-reply .ab-tools{
    display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
    gap:8px 10px;
  }
  /* Botoncitos ocupan su celda completa y se alinean iguales */
  #ab-comments.x-inline-reply .ab-tool,
  #ab-comments.x-inline-reply .ab-emoji .ab-emoji-toggle{
    width:100%; justify-content:center;
  }
  /* El catálogo de emoji sigue anclado al botón y no estorba */
  #ab-comments.x-inline-reply .ab-emoji{ position:relative; }
  #ab-comments.x-inline-reply .ab-emoji-catalog{ left:auto; right:0; }
  /* Contador + Publicar bajan a la fila siguiente */
  #ab-comments.x-inline-reply .ab-meta-actions{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
  }
}

/* ====== LOOK del formulario (Nombre/Correo/Web) para combinar con el tema ====== */
#ab-comments.x-inline-reply .comment-respond{
  background:#11141b; border:1px dashed #242835; border-radius:12px;
  padding:12px; overflow:visible;
}
#ab-comments.x-inline-reply .comment-respond label{
  color:#9aa3b2; font-size:13px; margin-bottom:6px;
}
#ab-comments.x-inline-reply .comment-respond input[type="text"],
#ab-comments.x-inline-reply .comment-respond input[type="email"],
#ab-comments.x-inline-reply .comment-respond input[type="url"],
#ab-comments.x-inline-reply .comment-respond textarea{
  width:100%; padding:10px 12px; border-radius:10px;
  background:#0b0e14; color:#e7e9ee; border:1px solid #242835;
}

/* Reply compacto en movil: evita una tarjeta vacia encima del formulario. */
@media (max-width:560px){
  #ab-comments #respond,
  #ab-comments.x-inline-reply .comment-respond{
    width:100%;
    margin:8px 0 0;
    padding:0;
    border:0;
    background:transparent;
    border-radius:0;
    overflow:visible;
  }

  #ab-comments #reply-title.comment-reply-title{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    flex-wrap:wrap !important;
    gap:7px !important;
    width:100% !important;
    min-height:0;
    margin:0 0 9px !important;
    padding:7px 9px !important;
    border-radius:10px;
    font-size:12px !important;
    line-height:1.25;
    white-space:normal !important;
    box-shadow:none;
  }

  #ab-comments #reply-title small{margin-left:auto;display:inline-flex}
  #ab-comments #reply-title .cancel-comment-reply-link{
    min-height:30px;
    padding:5px 9px;
    font-size:11px;
    white-space:nowrap;
  }

  #ab-comments .comment-list,
  #ab-comments .comment-list>.ab-thread{
    row-gap:12px;
  }
}
#ab-comments.x-inline-reply .comment-respond input::placeholder,
#ab-comments.x-inline-reply .comment-respond textarea::placeholder{ color:#7f8796; }

#ab-comments.x-inline-reply .comment-respond input:focus,
#ab-comments.x-inline-reply .comment-respond textarea:focus{
  outline:0; border-color:#7c4dff; box-shadow:0 0 0 3px rgba(124,77,255,.22);
}

/* Cookies consent en el mismo tono */
#ab-comments.x-inline-reply .comment-form-cookies-consent label{ color:#9aa3b2; }

/* Botón publicar consistente */
#ab-comments.x-inline-reply .submit,
#ab-comments.x-inline-reply .ab-send{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 12px; border-radius:999px; border:1px solid transparent;
  background:#7c4dff; color:#fff; cursor:pointer;
}

/* Permite que el bloque del composer haga salto de línea */
#ab-comments.x-inline-reply .ab-composer-main{
  display:flex;
  flex-wrap:wrap;      /* clave: permite que los hijos pasen a otra fila */
  gap:8px;
}

/* Mantén este (si quieres, añade align-items:center) */
#ab-comments.x-inline-reply .ab-composer-main{
  display:flex;
  flex-wrap:wrap;
  align-items:center;   /* opcional: centra vertical los ítems */
  gap:8px;
}

/* Reemplaza tu bloque del cancelar por este */
#ab-comments.x-inline-reply{
  --chip-h: 34px;       /* altura del “chip” */
  --chip-px: 12px;      /* padding horizontal */
  --chip-radius: 999px; /* borde redondeado */
}

#ab-comments.x-inline-reply #cancel-comment-reply-link{
  flex:0 0 100%;        /* su propia fila */
  order:99;
  display:flex;         /* centrado perfecto */
  align-items:center;   /* centrado vertical */
  justify-content:center; /* centrado horizontal */
  height:var(--chip-h);
  line-height:1.1;      /* interlineado cómodo */
  padding:0 var(--chip-px);
  border-radius:var(--chip-radius);
  margin-top:6px;
  white-space:nowrap;   /* evita que se parta en dos líneas */
  border:1px solid #242835;
  background:#23273a;
  color:#e7e9ee;
}

@media (max-width:640px){
  #ab-comments.x-inline-reply #cancel-comment-reply-link{
    margin-top:8px;
  }
}

/* Contenedor del título de respuesta de WP */
#ab-comments.x-inline-reply #reply-title.comment-reply-title{
  display:flex;              /* nos deja controlar el layout */
  flex-wrap:wrap;            /* permite nueva línea */
  align-items:center;
  gap:8px;
  overflow:visible;
  margin-bottom:8px;         /* separa del composer */
}

/* El <small> que contiene el link baja a su propia línea */
#ab-comments.x-inline-reply #reply-title.comment-reply-title small{
  order:2;
  flex:0 0 100%;             /* ocupa toda la fila */
}

/* Estilo y centrado del link "Cancelar respuesta" */
#ab-comments.x-inline-reply #reply-title #cancel-comment-reply-link{
  display:flex !important;   /* asegúralo visible cuando WP lo inserta */
  align-items:center;
  justify-content:center;
  height:34px;               /* misma altura que el chip */
  padding:0 12px;
  border-radius:999px;
  background:linear-gradient(135deg,rgba(139,108,255,.18),rgba(106,80,255,.12)) !important;
  border:1px solid rgba(139,108,255,.4) !important;
  color:#d8ccff !important;
  white-space:nowrap;        /* que no se parta */
  margin-top:6px;            /* un pelín de aire con el chip */
  box-shadow:0 0 0 3px rgba(139,108,255,.08);
}

/* Opcional: para pantallas pequeñas un poco más de aire */
@media (max-width:640px){
  #ab-comments.x-inline-reply #reply-title #cancel-comment-reply-link{
    margin-top:8px;
  }
}

/* 6) Color final del icono de respuesta/cancelar en el composer inline */
#ab-comments.x-inline-reply #reply-title.comment-reply-title::before,
#ab-comments.x-inline-reply #reply-title #cancel-comment-reply-link::before{
  color:var(--c-pill) !important;
}

/* 0) Nunca forzar el display: WP lo pone/quita con inline style */
#ab-comments.x-inline-reply #cancel-comment-reply-link{
  display:unset; /* reset si en algún lado lo forzaste */
}

/* 1) El título de respuesta ocupa 100% y permite salto de línea */
#ab-comments.x-inline-reply #reply-title.comment-reply-title{
  width:100%;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-bottom:8px;
  overflow:visible;
}

/* 2) El <small> (donde WP mete el link) baja a su propia fila */
#ab-comments.x-inline-reply #reply-title.comment-reply-title small{
  order:2;
  flex:0 0 100%;
}

/* 3) Estilo del link SOLO cuando WP lo muestra (sin !important) */
#ab-comments.x-inline-reply #reply-title #cancel-comment-reply-link{
  display:flex;
  justify-content:center;
  align-items:center;
  height:34px;
  padding:0 12px;
  border-radius:999px;
  background:linear-gradient(135deg,rgba(139,108,255,.18),rgba(106,80,255,.12));
  border:1px solid rgba(139,108,255,.4);
  color:#d8ccff;
  white-space:nowrap;
  width:100%;
  margin-top:6px;
  box-shadow:0 0 0 3px rgba(139,108,255,.08);
}

/* 4) Asegura que el formulario y su caja tomen todo el ancho al volver arriba */
#ab-comments.x-inline-reply #respond,
#ab-comments.x-inline-reply .comment-respond,
#ab-comments.x-inline-reply .comment-respond form,
#ab-comments.x-inline-reply .ab-composer,
#ab-comments.x-inline-reply .ab-composer-main{
  display:block;
  width:100%;
  max-width:100%;
  flex:1 1 100%;
  box-sizing:border-box;
}

/* 5) En móvil, un pelín más de aire si quieres */
@media (max-width:640px){
  #ab-comments.x-inline-reply #reply-title #cancel-comment-reply-link{
    margin-top:8px;
  }
}

/* ===== Centrado y padding en móvil ===== */
@media (max-width:600px){
  #ab-comments{
    padding-left:0;
    padding-right:0;
    box-sizing:border-box;
  }
  #comments.bixbox,
  .comments-area{
    padding-left:0;
    padding-right:0;
  }
}

@media (max-width:600px){
  #comments .cmt,
  #comments .cmt.commentx{
    width:100%;
    max-width:none;
    margin-left:0;
    margin-right:0;
    padding-left:0;
    padding-right:0;
    box-sizing:border-box;
  }
  #comments .cmt #ab-comments{
    width:100%;
    max-width:none;
    margin-left:0;
    margin-right:0;
    padding-left:0;
    padding-right:0;
  }
  #comments .cmt #ab-comments .ab-react,
  #comments .cmt #ab-comments .ab-headerline,
  #comments .cmt #ab-comments .ab-auth-gate,
  #comments .cmt #ab-comments .comment-list,
  #comments .cmt #ab-comments .ab-pagination,
  #comments .cmt #ab-comments .comment-respond{
    width:100%;
    max-width:none;
    margin-left:0;
    margin-right:0;
  }
  #comments .cmt #ab-comments .ab-composer,
  #comments .cmt #ab-comments .ab-card,
  #comments .cmt #ab-comments .ab-children{
    margin-left:0;
    margin-right:0;
  }
}