/* Variables de color (opcional, pero útil) */
:root {
  --facebook-blue: #2351A0;  /* Azul principal de Facebook */
  --facebook-blue-hover:#009FE3; /* Azul para hover */
  --border-color-light: #dddfe2; /* Gris claro para bordes */
  --white: #fff;
  --text-color-dark: #1c1e21; /* Texto oscuro */
}


/* Estilos básicos para el formulario JR-post-filter */
#jr-post-filter-form {
  margin-bottom: 20px;
  padding: 20px; /* Aumentar padding */
  /* border: 1px solid var(--border-color-light); Removido o suavizado */
  background-color: var(--white); /* Fondo blanco */
  border-radius: 8px; /* Esquinas más redondeadas */
  box-shadow: 0 2px 4px rgba(0, 0, 0, .1), 0 8px 16px rgba(0, 0, 0, .1); /* Sutil sombra */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Diseño responsivo básico */
  gap: 15px; /* Espacio entre elementos */
}

#jr-post-filter-form div {
  display: flex;
  flex-direction: column;
}

#jr-post-filter-form label {
    font-weight: 600;
    margin-bottom: 8px;
    color: #212121;
    font-size: 0.9em;
}

.radio-label{
  font-weight: normal !important;

}

#jr-post-filter-form input[type="text"],
#jr-post-filter-form input[type="date"],
#jr-post-filter-form select {
  padding: 10px 12px; /* Aumentar padding */
  border: 1px solid var(--border-color-light); /* Borde gris claro */
  border-radius: 6px; /* Bordes más redondeados */
  width: 100%;
  box-sizing: border-box;
  font-size: 1em; /* Tamaño de fuente consistente */
  height:43px;
}



/* Estilo al enfocar los inputs */
#jr-post-filter-form input[type="text"]:focus,
#jr-post-filter-form input[type="date"]:focus,
#jr-post-filter-form select:focus {
  outline: none; /* Eliminar el contorno por defecto */
  border-color: var(--facebook-blue); /* Borde azul al enfocar */
  box-shadow: 0 0 0 2px rgba(24, 119, 242, 0.2); /* Sombra azul sutil */
}


/* Los radio buttons y sus labels juntos */
#jr-post-filter-form .radio-group {
  display: flex; /* Usar flexbox para alinear los radio buttons */
  flex-direction: row; /* Alinear horizontalmente */
  gap: 20px; /* Espacio entre grupos de radio */
  margin-top: 5px; /* Espacio sobre el grupo de radio */
}

.radio-label {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  color: var(--text-color-dark); /* Color de texto para la label */
}

/* Estilos personalizados para radio buttons */
.radio-label input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid var(--facebook-blue);
  border-radius: 50%;
  margin-right: 8px;
  position: relative;
  cursor: pointer;
  transition: all 0.2s ease;
}

.radio-label input[type="radio"]:checked {
  background-color: var(--white);
  border-color: var(--facebook-blue);
}

.radio-label input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  background-color: var(--facebook-blue);
  border-radius: 50%;
}

.radio-label input[type="radio"]:hover {
  border-color: var(--facebook-blue-hover);
}

.radio-label:hover {
  color: var(--facebook-blue);
}

#jr-post-filter-form button {
  padding: 10px 15px;
  background-color: var(--facebook-blue); /* Azul de Facebook */
  color: var(--white); /* Texto blanco */
  border: none;
  border-radius: 6px; /* Bordes más redondeados */
  cursor: pointer;
  font-size: 1em;
  margin-top: 35px; /* Espacio encima del botón */
  font-weight: bold; /* Texto del botón en negrita */
  transition: background-color 0.5s ease; /* Transición suave para el hover */
}

#jr-post-filter-form button:hover {
  background-color: var(--facebook-blue-hover); /* Azul más oscuro al pasar el ratón */
}

/* Estilos para los resultados JR-post-filter */
#jr-post-filter-results {
  margin-top: 20px;
  /* border-top: 1px solid #eee; Removido */
  padding-top: 0; /* Eliminar padding superior */
  background-color: var(--background-light); /* Fondo ligero para el área de resultados */
  padding: 10px 0; /* Padding ligero arriba y abajo */
}

/* Estilos para los artículos dentro de los resultados */
#jr-post-filter-results article {
  margin: 10px; /* Centrar artículos y añadir margen vertical */
  padding: 15px; /* Padding dentro de cada artículo */
  background-color: var(--white); /* Fondo blanco para cada artículo */
  /*max-width: 700px; Ancho máximo para los artículos (ajustar según necesidad) */
  box-sizing: border-box;
  /* border-bottom: 1px dashed #eee; Removido, la sombra/margen los separa */
}

#jr-post-filter-results article:last-child {
  border-bottom: none; /* Asegurar que no haya borde inferior */
}

/* Estilos para los artículos con imagen destacada */
.post-with-thumbnail {
  display: flex;
  gap: 15px; /* Espacio entre imagen y contenido */
  /* margin-bottom y padding-bottom son manejados por el estilo del article */
  /* border-bottom es manejado por el estilo del article */
}


.post-thumbnail {
  flex: 0 0 20vw; /* Ancho fijo para la imagen, quizás un poco más pequeño */
  overflow: hidden; /* Asegura que la imagen redondeada se vea bien */
  max-height: 15vw;
}

.post-thumbnail img {
  width: 100%;
 /* min-height: 180px;  Altura fija para que todas las miniaturas tengan el mismo tamaño */
  object-fit: contain; /* Recorta la imagen para que cubra el espacio sin distorsionarse */
  display: block; /* Eliminar posible espacio extra debajo de la imagen */
}

.post-content {
  flex: 1;
}

.post-content h2 {
  margin-top: 0;
  margin-bottom: 8px; /* Espacio debajo del título */
  font-size: 1.4em; /* Tamaño del título */
  color: var(--text-color-dark);
}
.post-content h2> a {
color:#212121;
}

.post-content p { /* Añadir estilo para párrafos si los hay */
  margin-bottom: 10px;
  color: var(--e-global-color-7f6436b);
  font-size: 0.95em;
  line-height: 1.4;
  -webkit-line-clamp: 4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* Ajuste responsivo para móviles */
@media (max-width: 576px) {
  #jr-post-filter-form {
      padding: 15px; /* Ajustar padding en móvil */
      grid-template-columns: 1fr; /* Una columna en pantallas pequeñas */
      gap: 15px;
  }

  #jr-post-filter-form .radio-group {
      flex-direction: column; /* Apilar radio buttons en móvil si es necesario */
      gap: 10px;
  }

  .post-with-thumbnail {
      flex-direction: column; /* Apilar imagen y contenido */
      gap: 10px; /* Menor espacio en móvil */
  }

  .post-thumbnail {
      flex: 0 0 auto; /* Ancho automático */
      width: 100%; /* La imagen ocupa todo el ancho */
      margin: 0 auto 10px auto; /* Centrar imagen y añadir margen inferior */
      max-height: 200px ;
  }

  .post-thumbnail img {
       height: auto; /* Altura automática para mantener proporción si se prefiere */
  }

  #jr-post-filter-results article {
       margin: 10px; /* Ajustar margen lateral en móvil */
       padding: 10px; /* Ajustar padding en móvil */
  }

  #jr-post-filter-form button {
    margin-top: 15px; /* Espacio encima del botón */

  }

}


/* Estilos para el indicador de carga */
.loading-container {
  display: flex;
  align-items: center;
  justify-content: center; /* Centrar horizontalmente */
  gap: 10px;
  padding: 20px;
}

.loading-spinner {
  width: 20px;
  height: 20px;
  border: 3px solid #f3f3f3;
  border-top: 3px solid var(--facebook-blue); /* Usar el color de la variable */
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* Estilo para el texto de carga */
.loading-container p {
  margin: 0; /* Eliminar márgenes del párrafo */
  font-size: 1em; /* Tamaño de fuente consistente */
  color: var(--text-color-dark); /* Usar el color de texto definido */
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

#jr-post-filter-form > div:nth-child(9) > br{
  display: none;
}