/* =========================================================
   COMENTARIOS · LAYOUT LIMPIO (REEMPLAZAR TODO)
   ========================================================= */

/* Reset lista */
#comments ol,
#comments ul,
#comments .comment-list,
#comments .comment-list .children{
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
}

/* Cada comentario */
#comments .comment{
  margin:14px 0 !important;
  float:none !important;
  clear:both !important;
}

/* Estructura con GRID: avatar | contenido */
#comments .comment-body{
  display:grid !important;
  grid-template-columns:44px 1fr !important; /* avatar | columna derecha */
  column-gap:12px !important;
  row-gap:6px !important;
  align-items:start !important;
  width:100% !important;
  overflow:visible !important;
  margin:0 !important;
  padding:0 !important;
}

/* Columna izquierda: contenedor del avatar */
#comments .comment-body > figure.gravatar,
#comments .comment-body > figure.avatar,
#comments .comment-body > .comment-author{
  grid-column:1 !important;
  grid-row:1 / span 3 !important;
  width:44px !important;
  margin:0 !important;
  float:none !important;
  padding:0 !important;
}

/* Imagen avatar */
#comments .comment-author .avatar,
#comments figure.gravatar img,
#comments figure.avatar img{
  width:36px !important;
  height:36px !important;
  border-radius:50% !important;
  display:block !important;
}

/* Columna derecha: meta + burbuja + reply */
#comments .comment-meta,
#comments .comment-content,
#comments .reply{
  grid-column:2 !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  margin:0 !important;
  float:none !important;
  position:static !important;
}

/* =================================================
   ESPACIO EXACTO 5px ENTRE NOMBRE Y FECHA
   ================================================= */

/* Quita márgenes fantasma */
#comments .comment-meta,
#comments .comment-meta *{
  margin:0 !important;
  padding:0 !important;
}

/* META: nombre arriba / fecha abajo */
#comments .comment-meta{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  gap:0 !important;
  white-space:normal !important;
  overflow:visible !important;
}

/* Nombre */
#comments .comment-meta .fn,
#comments .comment-meta cite{
  display:block !important;
  font-weight:600 !important;
  white-space:nowrap !important;
  word-break:keep-all !important;
  overflow-wrap:normal !important;
  line-height:1.1 !important;
  margin-bottom:5px !important; /* 5px exactos */
}

/* Fecha */
#comments .comment-meta .comment-metadata,
#comments .comment-meta time{
  display:block !important;
  line-height:1.1 !important;
  font-size:11px !important;
  opacity:.65 !important;
}

/* Ocultar link editar */
#comments .comment-edit-link{
  display:none !important;
}

/* Burbuja 100% */
#comments .comment-content{
  background:#f0f2f5 !important;
  border-radius:14px !important;
  padding:10px 12px !important;
  box-sizing:border-box !important;
  display:block !important;
}

/* Texto dentro */
#comments .comment-content p{
  margin:0 !important;
  white-space:normal !important;
  word-break:normal !important;
  overflow-wrap:break-word !important;
}

/* Botón responder */
#comments .reply{
  margin-top:2px !important;
  font-size:12px !important;
}

/* Respuestas (indentación) */
#comments .children{
  margin-left:44px !important;
  padding-left:0 !important;
  margin-top:10px !important;
}

/* =========================================================
   CHECK SOLO ADMIN/AUTOR (WordPress: .bypostauthor)
   ========================================================= */
#comments .bypostauthor .comment-meta .fn::after,
#comments .bypostauthor .comment-meta cite::after{
  content:"\2713"; /* ✓ en unicode (evita error al guardar) */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:14px;
  height:14px;
  margin-left:6px;
  border-radius:50%;
  background:#1877F2;
  color:#fff;
  font-size:10px;
  font-weight:700;
  line-height:1;
}

/* =================================================
   SEPARAR 5px LA LÍNEA SUPERIOR DEL COMENTARIO
   ================================================= */

/* Espacio entre línea superior y contenido */
#comments .comment{
  padding-top:10px !important;
}

/* Por si la línea viene del body interno */
#comments .comment-body{
  margin-top:5px !important;
}

/* =================================================
   BADGE ADMIN (inyectado por PHP)
   ================================================= */
/* BADGE ADMIN (inyectado por PHP) */

#comments .admin-verified .comment-author .fn::after,
#comments .admin-verified .comment-author cite::after{
  content:"✓";
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:16px;
  height:16px;
  border-radius:50%;
  background:#1877F2;
  color:#fff;
  font-size:11px;
  line-height:1;
  margin-left:6px;
  font-weight:700;
}

#comments .admin-verified .comment-author .fn a::after,
#comments .admin-verified .comment-author cite a::after{
  content:none !important;
}

#comments .admin-verified .comment-author > a::after{
  content:"✓";
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:16px;
  height:16px;
  border-radius:50%;
  background:#1877F2;
  color:#fff;
  font-size:11px;
  line-height:1;
  margin-left:6px;
  font-weight:700;
}

/* BORDE AZUL A CAJA DE COEMNTARIO ADMIN */

/* Nombre admin */
#comments .admin-verified .comment-meta .fn{
  color:#1877F2;
  font-weight:700;
}

/* Check */
#comments .admin-verified .comment-meta .fn::after{
  content:"✓";
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:14px;
  height:14px;
  margin-left:6px;
  border-radius:50%;
  background:#1877F2;
  color:#fff;
  font-size:10px;
  font-weight:700;
}

---

/* Asegura que NO se recorte el tooltip */
#comments .comment-meta,
#comments .comment-body{
  overflow: visible !important;
}

/* El link del nombre (donde está el check en tu tema) */
#comments .admin-verified a.comment-author-link{
  position: relative !important;   /* clave para posicionar el tooltip */
  display: inline-flex !important;
  align-items: center !important;
}


/* 🏷️ Tooltip (oculto por defecto) */
#comments .admin-verified a.comment-author-link::before{
  content:"Verificado";
  position:absolute;
  left: 85%;
  top: -25px;
  transform: translate(-50%, 6px);
  background:#000;
  color:#fff;
  font-size:11px;
  padding:4px 8px;
  border-radius:6px;
  white-space:nowrap;
  opacity:0;
  visibility:hidden;
  transition:.15s ease;
  pointer-events:none;
  z-index:99999;
}

/* Mostrar tooltip al pasar el mouse por el nombre/check */
#comments .admin-verified a.comment-author-link:hover::before{
  opacity:1;
  visibility:visible;
  transform: translate(-50%, 0);
}

.comment-author {
  font-weight: bold;
}