/* custom CSS here */

/* Botón limpio */
.navbar-toggler {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0;
  width: 36px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Quitar cualquier borde/focus que meta Bootstrap */
.navbar-toggler:focus {
  box-shadow: none !important;
  outline: none !important;
}

/* Quitar el icono predeterminado de Bootstrap */
.navbar-toggler-icon {
  background-image: none !important;
  position: relative;
  display: block;
  width: 24px;
  height: 2px; /* grosor de la barra */
  background-color: #6c757d; /* gris */
  transition: background-color .3s, transform .3s, opacity .2s;
}

/* Barras superior e inferior */
.navbar-toggler-icon::before,
.navbar-toggler-icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px; /* grosor de la X */
  background-color: #6c757d; /* gris */
  transition: transform .3s, top .3s, background-color .3s;
}

.navbar-toggler-icon::before { top: -8px; }
.navbar-toggler-icon::after  { top:  8px; }

/* Estado abierto → X roja */
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
  background-color: transparent; /* oculta barra central */
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
  top: 0;
  transform: rotate(45deg);
  background-color: #BB2127; /* rojo */
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
  top: 0;
  transform: rotate(-45deg);
  background-color: #BB2127; /* rojo */
}