/* ==================================================
   HEADER / NAVBAR — sitewide (todas las páginas)
   Reemplaza los estilos inline que traía header.tpl.
   ================================================== */

/* Botón hamburguesa (mobile). theme.css no trae estilos para
   #menu-icon porque el header anterior lo había quitado del HTML;
   el comportamiento (abrir/cerrar el menú) ya lo maneja theme.js. */
#menu-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  cursor: pointer;
  color: #2c3e50;
}

#menu-icon i {
  font-size: 26px;
}

/* --------- Fila principal (logo, menú, buscador) --------- */

.header-top {
  /* El HTML traía class="bg-white" para esto, pero esa utilidad
     tampoco existe en este theme.css (ver utilities.css). Sin fondo
     propio, el header fijo quedaba transparente: se veía la foto del
     hero pasando por detrás al hacer scroll. */
  background: #fff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  padding: 12px 0;
  z-index: 1000;
}

/* Respaldo: que el header fijo completo nunca sea transparente,
   pase lo que pase con header-nav/header-top. */
#header {
  background: #fff;
}

/* position:sticky en .header-top no funcionaba: su contenedor
   (<header id="header">) mide justo lo que ocupan header-nav +
   header-top juntos, así que no le queda "recorrido" para pegarse
   (el navegador necesita que el padre sea más alto que el elemento
   sticky). Se fija TODO <header> (nav delgado + fila principal) con
   position:fixed en vez de solo la fila principal - así no queda un
   hueco vacío arriba al hacer scroll. <main> recibe el padding-top
   equivalente para que el hero no quede tapado debajo. */
#header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
}

/* header.js mide el alto real de #header y ajusta este padding-top
   por JS (offsetHeight cambia según se parta el menú en 1 o 2 líneas,
   fuentes cargando, mobile vs desktop...). Este valor es solo el
   respaldo para el instante antes de que ese script corra. */
main {
  padding-top: 90px;
}

@media (max-width: 767px) {
  main {
    padding-top: 76px;
  }
}

.header-top .logo {
  max-height: 60px;
  width: auto;
}

.search-widget-wrapper {
  width: 100%;
  margin-bottom: 6px;
}

.search-widget-wrapper .search-widget {
  width: 100%;
}

/* theme.css trae, para el buscador, tres anchos mínimos fijos
   pensados para cuando vivía en una columna ancha (.search-widget
   min-width 15.63rem/250px desde 768px, y el input mismo con
   min-width 255px o width 200px). Se anulan los tres para que se
   ajuste al espacio real que tiene la columna acá. */
.search-widget-wrapper .search-widget {
  min-width: 0;
  width: 100%;
}

#header .search-widget-wrapper form input[type="text"] {
  min-width: 0;
  width: 100%;
}

/* Fila con "Iniciar sesión" (theme.css, ps_customersignin) y el
   botón de certificados, uno al lado del otro debajo del buscador. */
.header-top-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
}

.header-signin #_desktop_user_info .user-info a {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #555;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.header-signin #_desktop_user_info .user-info a:hover {
  color: #F39C12 !important;
}

.header-signin #_desktop_user_info .user-info i.material-icons {
  font-size: 20px;
}

.header-signin-mobile #_desktop_user_info {
  margin-bottom: 10px;
}

.btn-certificate {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: #F39C12;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2px;
  text-transform: uppercase;
  white-space: nowrap;
  border-radius: 50px;
  box-shadow: 0 4px 12px rgba(243, 156, 18, .3);
  transition: background .2s ease, transform .2s ease;
}

.btn-certificate:hover,
.btn-certificate:focus {
  background: #2c3e50;
  color: #fff;
  transform: translateY(-2px);
}

.btn-certificate i {
  font-size: 18px;
  color: #fff;
}

@media (min-width: 1200px) {
  .btn-certificate {
    padding: 8px 18px;
  }
}

/* ps_searchbar está enganchado tanto a displayTop como a
   displaySearch (así estaba en la base de datos, no es algo de esta
   plantilla) y por eso el buscador se repite dentro del menú. Se dejó
   uno solo: el de displaySearch (columna de la derecha); este oculta
   la copia de más que viene pegada al menú. */
.header-top .col-md-7 #search_widget {
  display: none;
}

/* --------- Menú principal (ps_mainmenu) ---------
   8 secciones no entran en una sola línea con el tamaño de letra/
   padding por defecto del tema; se reducen un poco para que quepan
   sin partirse en 2 líneas. La columna del menú se achicó (de
   col-md-8 a col-md-7) al fusionar la barra de iniciar sesión acá
   arriba, así que ahora hace falta en un rango más ancho que antes. */
@media (min-width: 768px) and (max-width: 1500px) {
  .top-menu a[data-depth="0"] {
    padding: .625rem .2rem;
    font-size: .78rem;
  }
}

/* Título del menú (Nosotros, Productos...) al pasar el mouse: en
   theme.css sale celeste (#24b9d7, viene de una regla genérica
   "a:hover" que aplica a cualquier link del sitio). Los links DE
   ADENTRO del desplegable ya estaban en naranja de la marca; acá
   faltaba parejarlo en el título. */
#header .top-menu a[data-depth="0"]:hover {
  color: #F39C12 !important;
}

/* El desplegable (submenú de categorías) tardaba 0.5s en aparecer y
   en desaparecer (theme.css). Ese tiempo es sobre todo un problema al
   ESCONDERSE: "visibility" no cambia hasta que la transición termina,
   así que el desplegable anterior seguía ahí casi medio segundo
   completo al mover el mouse al siguiente ítem del menú, y se veía
   como si "volviera a salir". Se acorta a algo casi instantáneo. */
.top-menu .sub-menu {
  transition: opacity 0.12s ease, visibility 0.12s ease;
}