/*Creado, diseñado y desarrollado por Flor Guadalupe Llamas Zamorano*/
/*Fondo nav bar*/
.navbar{
    background-color: rgba(16, 30, 90, 1);
}
/*Fuente y tamaño de letra*/
nav ul li .nav-link{
    font-family: 'Raleway', sans-serif;
    font-size: 17px;
    font-weight: 500;
    font-optical-sizing: auto; 
    
}
nav ul li .dropdown-item{
    font-family: 'Raleway', sans-serif;
    font-size: 15px;
    font-weight: 500;
    font-optical-sizing: auto; 
    color: #E8E8E8; 
    
}
/*Color de texto de opciones*/
nav .nav-link{
   color: #E8E8E8; 
}
/*Color de texto al pasar el mouse*/
.nav-link:hover{
    color: #E8E8E8; 
 }
nav ul li .nav-link:hover{
  color: #E8E8E8;
 }
  /* Cambia el color del texto cuando el enlace del dropdown está en estado activo */
  .navbar .nav-item.active .nav-link,
  .navbar .nav-item.dropdown .nav-link.dropdown-toggle:focus,
  .opcionesSF .nav-item.dropdown .nav-link[aria-expanded="true"] {
    color: #E8E8E8 !important; /* Cambia el color de texto a blanco */
  }
 /*Estilos del menú desplegable*/
 .navbar .dropdown-menu{
    border-radius: 0;
    border: none !important;
    background-color: rgba(16, 30, 90, 1);
 }
/*Color del texto del menú desplegable*/
.navbar .dropdown-menu .dropdown-item{
    color: #E8E8E8;
}
/* Cambia el color del texto y del elemento al pasar el ratón sobre los elementos del dropdown */
.navbar .dropdown-menu .dropdown-item:hover,
.navbar .dropdown-menu .dropdown-item:focus {
  background-color: rgb(27, 43, 113);  /* Fondo cuando se pasa el ratón */
  color: #E8E8E8 !important;     /* Cambiar color del texto a blanco */
}
/**Estilo del menú de hamburguesa en pántallas pequeñas*/
.navbar-toggler{
    border: none;
    border-radius: 0;
}
/* Cambiar el color del icono del menú de hamburguesa */
.navbar-toggler-icon {
    color: #E8E8E8; /* Color de fondo del icono de hamburguesa */
    filter: invert(1); /* Esto convierte el color de la hamburguesa a blanco */
  }
/* Eliminar el borde cuando el menú de hamburguesa está seleccionado o enfocado */
.navbar-toggler:focus {
    outline: none; /* Elimina el borde */
    box-shadow: none; /* Elimina la sombra (si es aplicada) */
  }
/*Estilo del footer*/
footer{
  background-color: rgba(16, 30, 90, 1);
  /*padding: 20px;*/
}
/*Centrado de imagen*/
.imagen-footer{
  display: flex;
  justify-content: center; /* Centra horizontalmente */
  align-items: center;     /* Centra verticalmente */
  height: 100%;           /* Establece una altura fija para el contenedor */
  width: 100%;             /* Ocupa el 100% del ancho de su contenedor */
  padding: 20px;
}
/*Espacio interno de la información*/
.info{
  padding: 20px;
}
/*Estilo de letra del apartado información*/
.info h3{
  font-family: 'Nunito Sans', sans-serif;
  font-size: 15px;
  font-optical-sizing: auto; 
  color:#E8E8E8;
  font-weight: 300;
  margin: 10px;
}
/*Estilos de iconos*/
.iconos {
  padding: 20px;
  display: flex; 
  justify-content: center;
  align-items: center;
}
.social-icon{
  color: #E8E8E8; 
  margin: 0 15px;
  text-decoration: none;
  font-size: 20px;
}
/*Estilo de letra de Municipio en seccion enlaces*/
.enlaces h3{
  font-family: 'Nunito Sans', sans-serif;
  font-size: 15px;
  font-optical-sizing: auto; 
  color:#E8E8E8;
  font-weight: 550;
}
/*Lista sin deocración y espacio interno*/
.enlaces{
  list-style-type: none;
  padding: 20px;
}
/*Estilo de cada enlace*/
.enlaces li a{
  color: #E8E8E8;
  text-decoration: none;
  font-family: 'Nunito Sans', sans-serif; 
  font-weight: 300;
}
.enlaces li a:hover{
  font-weight: 500;
}
/*estilo de acordeones*/
.footer .enlaces .accordion div{
  background-color:  rgba(16, 30, 90, 1);
}
.footer .enlaces .accordion .accordion-header:hover{
  border: none;
}
.footer .enlaces .accordion .accordion-header .accordion-button{
  background-color:  rgba(16, 30, 90, 1);
  color: #E8E8E8;
}
.footer .enlaces .accordion .accordion-body{
  background-color:  rgba(16, 30, 90, 1);
  color: #E8E8E8;
}
/* Elimina padding extra del cuerpo del acordeón */
.footer .enlaces .accordion .accordion-body {
  padding: 0 0 0.5rem 0;
}
/* Quitar el borde cuando está activo */
.footer .enlaces .accordion .accordion-button:not(.collapsed) {
    border: none;
    box-shadow: none;
    background-color: rgba(16, 30, 90, 1); /* Opcional: un fondo oscuro para que resalte el icono blanco */
    color: white; /* Cambiar color del texto si se desea */
}
/* Quitar borde y sombra al dar clic o enfocar */
.footer .enlaces .accordion .accordion-button:focus {
    border: none;
    box-shadow: none;
}
/* Centrar el texto del botón y estilo */
.footer .enlaces .accordion .accordion-button {
    justify-content: center !important; /* Centra el contenido horizontalmente */
    text-align: center;                /* Centra el texto dentro del botón */
    position: relative;                /* Permite posicionar el ícono manualmente */
    padding-right: 2.5rem;             /* Deja espacio para el ícono a la derecha */
    padding-left: 2.3rem; /* igual al padding de los <li> */
    color: #E8E8E8;
    text-decoration: none;
    font-family: 'Nunito Sans', sans-serif; 
    font-weight: 300;    
}
.footer .enlaces .accordion .accordion-button:not(.collapsed) {
  font-weight: 500;
}
.footer .enlaces .accordion .accordion-button:not(.collapsed),
.footer .enlaces .accordion .accordion-button:hover {
  font-weight: 500;
}
/* Hacer que el ícono de despliegue sea blanco cuando está activo */
.footer .enlaces .accordion .accordion-button::after {
    filter: brightness(0) invert(1); /* Vuelve el icono blanco */
    position: absolute;
    right: 1rem;                       /* Coloca el ícono a la derecha */
    top: 50%;
    transform: translateY(-50%);
    display: none !important;
}
/* Solo se aplica cuando está expandido */
.footer .enlaces .accordion .accordion-button:not(.collapsed)::after {
    filter: brightness(0) invert(1); /* Icono blanco cuando está activo */
}
.footer .enlaces .accordion .accordion-itemborder-0, .accordion-item.border-0 {
  margin-left: 0; /* compensar la posición del <li> */
  border: none;
  background: transparent;
}
/* Espaciado uniforme para cada acordeón */
.footer .enlaces .accordion
.accordion-header,
.footer .enlaces .accordion .accordion-button {
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
}
.footer .enlaces .accordion{
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
}