/* Nuevo estilo para el título de News */
#newsTitle {
    color: white; /* Texto blanco */
    font-weight: bold; /* Texto en negrita */
    /* Sombra para el texto: desplazamiento horizontal, desplazamiento vertical, desenfoque, color */
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.7); /* Sombra sutil y oscura para contraste */
    margin-bottom: 0; /* A veces los h3 tienen margen inferior por defecto que podría no quererse */
}

/* Espacio entre el ícono y el texto */
#newsTitle .fa-solid {
    margin-right: 8px; /* Pequeño margen a la derecha del ícono */
}

/* Sugerencia: Si el fondo del div contenedor de "News" es claro, el texto blanco será invisible.
   Si quieres que la "barra" de noticias tenga un color de fondo oscuro para que el texto blanco se vea,
   puedes añadir una clase como esta al div contenedor:
*/
.news-bar-dark-bg {
    background-color: #343a40; /* Un gris oscuro (similar al footer o navbar-dark) */
    /* Puedes ajustar este color o usar el rojo del escudo si cambias de opinión: #B53E3B */
}


/*---------------*/

#imageCabecera {
    position: relative; /* Crucial para que los elementos hijos absolutos se posicionen respecto a este div */
    width: 100%;
    /* Define la altura de tu banner de forma responsiva.
       Por ejemplo, para una relación de aspecto 16:9 (altura = ancho * 9/16 = ancho * 0.5625), usa:
       padding-bottom: 56.25%;
       height: 0;
       
       Si quieres un banner menos alto, podrías usar 30% o 40%:
    */
    padding-bottom: 30%; /* Ajusta este porcentaje a la altura que desees para el banner */
    height: 0; /* Importante para que el padding-bottom defina la altura */
    overflow: hidden; /* Asegura que nada se desborde del contenedor */
    background-color: #f0f0f0; /* Color de fondo mientras carga o si no hay imagen */
}

#slideshowWrapper {
    position: absolute; /* Ocupa todo el espacio de #imageCabecera */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.enprueba{
  color: #c6c6c6;
}
.slideshow-img {
    position: absolute; /* Todas las imágenes del slideshow se superponen */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Las imágenes cubren el área, recortando si es necesario para evitar distorsión */
    opacity: 0; /* Oculto por defecto */
    transition: opacity 1s ease-in-out; /* Transición de 1 segundo para el fade */
    z-index: 1; /* Capa base para las imágenes inactivas */
}

.slideshow-img.active {
    opacity: 1; /* Visible cuando está activo */
    z-index: 2; /* Trae la imagen activa al frente durante la transición */
}

.overlay-img {
    position: absolute; /* Posiciona el logo sobre todo */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain; /* El logo se ajusta al área manteniendo su relación de aspecto, sin recorte */
    background-color: transparent; /* Asegura que el fondo del logo sea transparente */
    z-index: 10; /* Asegura que siempre esté por encima de las imágenes del slideshow */
    pointer-events: none; /* IMPORTANTE: Permite que los clics pasen a través del logo si tiene áreas transparentes y hay contenido clicable debajo. */
}

/* ----------------------*/


/* style slider */
/* ... tus estilos existentes ... */

/* Estilos para el menú con colores del logo */
.custom-navbar-gradient {
    /* CAMBIO AQUÍ: Ahora es un color sólido */
    background-color: #4D8948; /* El verde del escudo */
}

/* Mantén estos estilos para asegurar la legibilidad del texto y el estilo de los dropdowns */
.custom-navbar-gradient .navbar-nav .nav-link {
    color: white; /* Asegura que los enlaces sean blancos */
}

.custom-navbar-gradient .navbar-brand {
    color: white; /* Asegura que la marca sea blanca */
}

.custom-navbar-gradient .dropdown-menu {
    background-color: #343a40; /* Un gris oscuro para los dropdowns */
    border: none;
}

.custom-navbar-gradient .dropdown-menu .dropdown-item {
    color: white; /* Texto de los elementos del dropdown blanco */
}

.custom-navbar-gradient .dropdown-menu .dropdown-item:hover {
    background-color: rgba(255, 255, 255, 0.2); /* Un hover sutil */
    color: white;
}

/* ----------------------*/





/* gpt */

#chat-container {
  width: 90%;
  max-width: 1200px;
  margin: 20px auto;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 10px;
}

#chat-box {
  height: 300px;
  overflow-y: auto;
  border: 1px solid #ddd;
  padding: 10px;
  background: #f9f9f9;
}

#user-input {
  width: 500px;
}

.message {
  margin: 10px 0;
  padding: 8px;
  border-radius: 5px;
}

.user {
  background: #d1e7fd;
  text-align: right;
}

.bot {
  background: #e9e9e9;
  text-align: left;
}

.link-verde {
  color: #b2ffc4;
  /* Verde claro tipo Bootstrap */
  font-weight: bold;
  text-decoration: underline;
}

input,
button {
  margin-top: 10px;
  padding: 10px;

}

/* gpt */

.titulo-redes {
  /* estilo redes */
  font-style: italic;
  font-weight: bold;
  color: white;
  font-size: 1.5rem;
  padding-top: 5px;
}


.clearfix {
  float: none;
  clear: both;
}

.social {
  width: 60px;
  margin-right: 20px;
  padding-top: 20px;

}

p {
  text-align: justify;
}

li {
  text-align: justify;
}

.logo {
  width: 500px;
}

.botonBuscar {
  color: white;
  background-color: antiquewhite;
}


.enlinea {
  margin-left: 200px;

}

.NoticiasDocumentos {
  display: flex;
}


#linkFooter {
  text-decoration: none;
  color: rgb(0, 221, 255);
}




@media (max-width: 660px) {

  .social {
    width: 30px;
    margin-right: 20px;
    padding-top: 20px;

  }

}







@media (max-width: 500px) {


  .logo {
    width: 250px;

  }

  .social {
    float: left;
    margin-right: 5px;
    padding-top: 5px;


  }




}





/* Styes background   */

.bg {
  animation: slide 3s ease-in-out infinite alternate;
  background-image: linear-gradient(-60deg, #6c3 50%, #09f 50%);
  bottom: 0;
  left: -50%;
  opacity: .5;
  position: fixed;
  right: -50%;
  top: 0;
  z-index: -1;
}

.bg2 {
  animation-direction: alternate-reverse;
  animation-duration: 4s;
}

.bg3 {
  animation-duration: 5s;
}

.content {
  background-color: rgba(255, 255, 255, .8);
  border-radius: .25em;
  box-shadow: 0 0 .25em rgba(0, 0, 0, .25);
  box-sizing: border-box;
  left: 50%;
  padding: 10vmin;
  position: fixed;
  text-align: center;
  top: 50%;
  transform: translate(-50%, -50%);
}



/*Styles like*/

.like-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 20px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.heart {
  transition: color 0.3s ease;
}

.like-count {
  font-weight: bold;
}

/* fin stiles like */



@keyframes slide {
  0% {
    transform: translateX(-25%);
  }

  100% {
    transform: translateX(25%);
  }
}