/* --- Estilos para el Widget de Contenido Relacionado Básico por Categoría (BRPBC) - Compacto --- */

.brpbc-widget {
  /*background-color: rgba(245, 158, 11, 0.05);  Ámbar muy transparente */
  background-color: var(--ast-global-color-5);
  border: 1px solid var(--ast-global-color-0);
  border-left-width: 4px; /* Ligeramente más delgado */
  border-left-color: var(--ast-global-color-0); /* Ajusta al azul principal de tu sitio */
  padding: 15px 20px; /* Padding reducido */
  margin: 25px 0; /* Margen reducido */
  border-radius: 10px; /* Bordes un poco menos redondeados */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* Sombra más sutil */
  overflow: hidden;
}

.brpbc-title {
  font-size: 0.9em; /* Tu tamaño actual */
  color: var(--ast-global-color-2);
  margin-top: 0;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--ast-global-color-6);
  /* Nuevas propiedades para alinear el ícono y el texto */
  display: flex; /* Permite alinear ícono y texto fácilmente */
  align-items: center; /* Centra verticalmente el ícono y el texto */
}

.brpbc-title::before {
  content: ""; /* Necesario para que se muestre el pseudo-elemento */
  display: inline-block; /* O block si display:flex no está en el padre */
  width: 1em;  /* Ajusta el tamaño del ícono relativo al font-size del título */
  height: 1em; /* Mantenlo cuadrado o ajusta según tu SVG */
  margin-right: 8px; /* Espacio entre el ícono y el texto del título */
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='%23f59e0b' viewBox='0 0 24 24'><path fill-rule='evenodd' d='M7.05 4.05A7 7 0 0 1 19 9c0 2.407-1.197 3.874-2.186 5.084l-.04.048C15.77 15.362 15 16.34 15 18a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1c0-1.612-.77-2.613-1.78-3.875l-.045-.056C6.193 12.842 5 11.352 5 9a7 7 0 0 1 2.05-4.95ZM9 21a1 1 0 0 1 1-1h4a1 1 0 1 1 0 2h-4a1 1 0 0 1-1-1Zm1.586-13.414A2 2 0 0 1 12 7a1 1 0 1 0 0-2 4 4 0 0 0-4 4 1 1 0 0 0 2 0 2 2 0 0 1 .586-1.414Z' clip-rule='evenodd'/></svg>");  background-position: center center;
  background-size: contain; /* Asegura que el SVG se escale correctamente dentro del espacio */
  flex-shrink: 0; /* Evita que el ícono se encoja si el título es largo */
}

.brpbc-items-container {
  /* Este contenedor es principalmente estructural */
}

.brpbc-item {
  padding: 2px 0; /* Padding vertical reducido para cada ítem */
  border-bottom: 1px dashed var(--ast-global-color-6); /* Borde un poco más sutil */
}

.brpbc-item:first-child {
  padding-top: 0;
}

.brpbc-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.brpbc-link {
  font-size: 0.92em; /* Tamaño del enlace del post relacionado reducido */
  color: var(--ast-global-color-0); /* Ajusta al azul principal de tu sitio */
  text-decoration: none;
  font-weight: 500;
  line-height: 1.35; /* Altura de línea reducida */
  display: inline-block;
  transition: color 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.brpbc-link:hover,
.brpbc-link:focus {
  color: var(--ast-global-color-1); /* Un rojo suave para el hover, o usa un azul más oscuro como #004085 */
  text-decoration: none;
  transform: translateX(4px); /* Desplazamiento reducido en hover */
}

/* Opcional: Estilos para el extracto si decides añadirlo (versión compacta) */

.brpbc-excerpt {
  font-size: 0.62em; /* Tamaño del extracto muy reducido */
  color: var(--ast-global-color-3);
  line-height: 1.3; /* Altura de línea del extracto reducida */
}