/* 
1. Add your custom Css styles below
2. Place the this code in your template: 

 <link href="css/custom.css" rel="stylesheet">

*/

/* Asegurar que los iconos usen las fuentes correctas */
/* Font Awesome icons */
i.fas, i.far, i.fab, i.fa {
  font-family: "Font Awesome 5 Free", "Font Awesome 5 Brands" !important;
}
/* Iconos del template Polo - usar inspiro-icons (nombre correcto de la fuente) */
i[class^="icon-"], i[class*=" icon-"] {
  font-family: "inspiro-icons" !important;
}

/* Mostrar logo como imagen - Sobrescribir estilos del template */
#header .header-inner #logo {
  float: none !important;
}

#header .header-inner #logo a img,
#header #header-wrap #logo a img {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: 50px !important;
  width: auto !important;
  max-width: 200px !important;
  vertical-align: middle;
}

/* Ocultar texto del logo cuando hay imagen */
#header .header-inner #logo a .logo-default,
#header .header-inner #logo a .logo-dark,
#header #header-wrap #logo a .logo-default,
#header #header-wrap #logo a .logo-dark {
  display: none !important;
}

/* Centrado vertical del logo en desktop */
@media (min-width: 769px) {
  #header .header-inner .container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  #header .header-inner #logo {
    display: flex !important;
    align-items: center !important;
    height: 80px !important;
    float: none !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
  }
  #header .header-inner #logo a {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  #header .header-inner #logo a img {
    margin: 0 !important;
    vertical-align: middle !important;
  }
  /* Asegurar que header-extras se muestre en desktop */
  #header .header-inner .header-extras {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    float: right !important;
    height: 80px !important;
    z-index: 199 !important;
    position: relative !important;
  }
  #header .header-inner .header-extras ul {
    display: block !important;
    visibility: visible !important;
  }
  #header .header-inner .header-extras ul li {
    display: block !important;
    visibility: visible !important;
    float: left !important;
  }
  #header .header-inner .header-extras ul li a,
  #header .header-inner .header-extras ul li .p-dropdown {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  #header .header-inner .header-extras ul li a i,
  #header .header-inner .header-extras ul li .p-dropdown a i {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* Centrado horizontal del logo en móvil */
@media (max-width: 768px) {
  #header .header-inner .container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 20px 15px 10px 15px !important;
  }
  #header .header-inner #logo,
  #header #logo {
    text-align: center !important;
    width: 100% !important;
    float: none !important;
    display: block !important;
    margin: 15px auto 10px auto !important;
    padding-top: 15px !important;
    height: auto !important;
    line-height: 1 !important;
    order: 1 !important;
    flex: 0 0 auto !important;
    position: relative !important;
  }
  #header .header-inner #logo a {
    display: block !important;
    margin: 10px 10px !important;
    text-align: center !important;
    line-height: 1 !important;
    width: auto !important;
  }
  #header .header-inner #logo a img {
    margin: 10px 10px !important;
    display: block !important;
  }
  #header .header-inner .header-extras {
    order: 2 !important;
    width: auto !important;
    display: flex !important;
    justify-content: center !important;
    margin: 10px 10px !important;
  }
  #header .header-inner #mainMenu-trigger {
    order: 3 !important;
    position: absolute !important;
    right: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }
}