/* ============================================
   PREPARATORIA 5 | UNIVERSIDAD DE GUADALAJARA
   ENCABEZADO SUPERIOR INSTITUCIONAL

   Tema: drudg8b3
   Referencia visual: CUGDL
   Color institucional: #195998
   ============================================ */


/* 1. FRANJA SUPERIOR UDEG
   Fondo azul con degradado vertical */

#header.container-fluid {
  background-color: #195998 !important;

  background-image: linear-gradient(
    to bottom,
    #195998 0%,
    #174F86 35%,
    #123F6B 70%,
    #103859 100%
  ) !important;

  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: 100% 100% !important;

  color: #FFFFFF;

  min-height: 50px;
  box-sizing: border-box;
}


/* 2. CONSERVAR LA ESTRUCTURA ORIGINAL
   Sin modificar las columnas Bootstrap */

#header .container.header {
  position: relative;
  background: transparent;
}

#header .content-title {
  background: transparent;
}


/* 3. ESCUDO INSTITUCIONAL
   Mantener el tamaño y la apariencia
   definidos por el tema original */

#header .logog,
#header .logoch {
  filter: none !important;
  opacity: 1;
}


/* 4. BUSCADOR SUPERIOR
   Transiciones discretas al interactuar */

#header .search-block-form input.form-control {
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

#header .search-block-form input.form-control:focus {
  border-color: #87B5E3;
  box-shadow: 0 0 0 2px rgba(135, 181, 227, 0.18);
  outline: none;
}


/* 5. BOTÓN DE BÚSQUEDA
   Coherente con el color institucional */

#header .search-block-form .btn-primary {
  background-color: #103F6B;
  border-color: #103F6B;

  transition:
    background-color 0.25s ease,
    border-color 0.25s ease;
}

#header .search-block-form .btn-primary:hover,
#header .search-block-form .btn-primary:focus {
  background-color: #0B3052;
  border-color: #0B3052;
}


/* 6. DISPOSITIVOS MÓVILES
   Mantener el fondo y el diseño responsivo
   original del tema */

@media (max-width: 767px) {

  #header.container-fluid {
    background-color: #195998 !important;

    background-image: linear-gradient(
      to bottom,
      #195998 0%,
      #164C80 55%,
      #103859 100%
    ) !important;

    background-size: 100% 100% !important;
  }

}


/* 7. ACCESIBILIDAD
   Reducir las transiciones cuando
   el usuario así lo solicite */

@media (prefers-reduced-motion: reduce) {

  #header .search-block-form input.form-control,
  #header .search-block-form .btn-primary {
    transition: none !important;
  }

}