/* Contenedor principal de la lista de comentarios */
.comment-list {
  margin-top: 2rem;
}

/* Estilo para cada comentario individual */
.comment {
  display: flex; /* Usamos flexbox para alinear avatar y contenido */
  align-items: flex-start; /* Alinea los items al principio del eje transversal */
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--main-border-color, #eee);
}

.comment:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* Contenedor del avatar */
.comment-avatar {
  flex-shrink: 0; /* Evita que el avatar se encoja */
  margin-right: 1.5rem;
}

.comment-avatar img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid var(--main-border-color, #eee);
}

/* Contenedor del contenido del comentario (nombre, fecha, mensaje) */
.comment-content {
  flex-grow: 1; /* Permite que el contenido ocupe el espacio restante */
}

/* Cabecera del comentario (nombre y fecha) */
.comment-header {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
  flex-wrap: wrap; /* Permite que la fecha pase a la siguiente línea en pantallas pequeñas */
}

.comment-author {
  font-weight: bold;
  font-size: 1.1em;
  margin-right: 0.75rem;
}

.comment-date {
  font-size: 0.85em;
  color: var(--text-muted-color, #868e96);
}

/* Cuerpo del mensaje */
.comment-body {
  font-size: 1em;
  line-height: 1.6;
  color: var(--text-color, #333);
}

.comment-body p:last-child {
  margin-bottom: 0;
}

/* Ajustes del formulario de comentarios */
#comment-form-wrapper {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--main-border-color, #eee);
}

#comment-form .form-group {
  margin-bottom: 1.5rem;
  display: block; /* Revertir el comportamiento de flexbox */
}

#comment-submit-btn {
  display: block;
  margin: 0 auto; /* Centrar el botón horizontalmente */
}

#comment-submit-btn .spinner-border {
  margin-right: 0.5rem;
}

/* Campo señuelo visible por CSS (pero oculto para lectores de pantalla) */
.visually-hidden {
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap; /* evita que el contenido se ajuste */
}

/* Alternativa: hacer el señuelo visible para bots por CSS general del sitio
   Añadir en una hoja diferente si se quiere mostrar visualmente el señuelo */
.honeypot-visible {
  position: static !important;
  height: auto; width: auto;
  overflow: visible; clip: auto;
  white-space: normal;
}

/* Estilos para las alertas del formulario de comentarios */
#comment-form-alert {
  padding: 1rem;
  border-radius: 0.25rem;
  font-size: 1rem;
  font-weight: bold;
}

/* Alerta de éxito */
#comment-form-alert.alert-success {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

/* Alerta de error */
#comment-form-alert.alert-danger {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

/* Ocultar mensajes de validación inicialmente */
#comment-form .invalid-feedback {
  display: none;
}

/* Mostrar mensajes de validación solo después de intentar enviar */
#comment-form.was-validated .form-control:invalid ~ .invalid-feedback {
  display: block;
}