/*ESTILOS DEL HEADER COMIENZO*/
  /* Botón Buscar personalizado */

  .navbar {
    background: linear-gradient(to bottom, #410202, #880b0b); /* degradado negro → rojo oscuro */
}

.navbar {
    background: linear-gradient(to bottom, #410202, #880b0b); /* fondo degradado */
    box-shadow: 0 8px 20px rgba(243, 50, 2, 0.7); /* sombra más intensa y difusa */
}


.btn-buscar,
.btn-buscar:hover,
.btn-buscar:focus,
.btn-buscar:active,
.btn-buscar:focus-visible {
  color: #000 !important;
  border-color: #ff8c00 !important;
  background-color: #ff8c00 !important;
  box-shadow: none !important;
  outline: none !important;
}


  .navbar-nav .nav-item.dropdown.show > .nav-link {
  background-color: #880b0bff !important;
  color: #dc3545 !important;
}

.dropdown-menu {
  background-color: #880b0bff !important;
}

/* === Estilo personalizado del dropdown === */
.dropdown-menu {
  background-color: #880b0bff; /* mismo fondo rojo que el header */
  border: none;
}

.dropdown-menu .dropdown-item {
  color: #dc3545;             /* mismo color de texto */
}

.dropdown-menu .dropdown-item:hover {
  background-color: transparent !important;
    color: #000000 !important;
}

/* si una opción del menú está activa */
.dropdown-menu .dropdown-item.active {
  background-color: transparent;
  color: #ff5100ff;  /* mismo color amarillo fuego que estás usando para .nav-link.active */
}

  .dropdown-menu .dropdown-item.active {
  background-color: transparent !important;
  color: #ff5100ff !important;
}

/* Botón de opciones en móvil - texto negro cuando está abierto o hover */
@media (max-width: 991px) {
  .btn-outline-danger.dropdown-toggle.show,
  .btn-outline-danger.dropdown-toggle:active,
  .btn-outline-danger.dropdown-toggle:hover {
    color: #000000 !important;
    background-color: #dc3545 !important;
  }
}

/* Botón de opciones en pantallas grandes - texto negro cuando está abierto o hover */
@media (min-width: 992px) {
  .btn-outline-danger.dropdown-toggle.show,
  .btn-outline-danger.dropdown-toggle:active,
  .btn-outline-danger.dropdown-toggle:hover {
    color: #000000 !important;
    background-color: #dc3545 !important;
  }
}

   /* ✅ Cambiar solo el color del texto cuando esté activo o seleccionado */
  .navbar-nav .nav-link.active {
    background-color: transparent !important; /* quitamos el fondo rojo */
    color: #ff5100ff !important;               /* amarillo fuego */
  }

  .navbar-nav .nav-link.active:hover {
    background-color: transparent !important;
    color: #FFBF00 !important;
  }

  /* ✅ Ancho del input en pantallas grandes para que se vea completo el placeholder */
  @media (min-width: 992px) {
    input[name="q"] {
      flex: 1 1 auto !important; /* Usar flex para ajustarse automáticamente */
    }
  }
  /* Estilos para pantallas grandes */
  @media (min-width: 992px) {
    input[name="q"] {
      color: #ffffff !important; /* Texto en blanco */
      background-color: #000000 !important; /* Fondo negro */
      border: 1px solid #6c757d !important;
      caret-color: #ffffff !important;
    }

    input[name="q"]::placeholder {
      color: #cccccc;
      opacity: 1;
    }

    input[name="q"]:focus {
      color: #ffffff !important;
      background-color: #000000 !important;
      border-color: #dc3545 !important;
      box-shadow: 0 0 0 3px rgba(220,53,69,0.25) !important;
    }
  }

  /* Estilos para pantallas pequeñas (móviles) */
  @media (max-width: 991px) {
    input[name="q"] {
      color: #ffffff !important; /* Texto en blanco */
      background-color: #000000 !important; /* Fondo negro */
      border: 1px solid #6c757d !important;
      caret-color: #ffffff !important;
    }

    input[name="q"]::placeholder {
      color: #cccccc;
      opacity: 1;
    }

    input[name="q"]:focus {
      color: #ffffff !important;
      background-color: #000000 !important;
      border-color: #dc3545 !important;
      box-shadow: 0 0 0 3px rgba(220,53,69,0.25) !important;
    }
  }

  input[name="q"]::selection {
    background: rgba(220, 53, 69, 0.3); /* Selección en rojo claro */
    color: #dc3545;
  }

  input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    height: 16px;
    width: 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23dc3545' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") no-repeat center;
    cursor: pointer;
  }