/* ================================================================
   GESTIQORA - HEADER PREMIUM V2 | Joomla 6 + Helix Ultimate
   Archivo independiente de los estilos del HOME/Calculadora.
   Instalar DESPUES del CSS del HOME en Helix -> Before </head>.
   Alcance: encabezado del sitio y panel Offcanvas de Helix.
   ================================================================ */

:root { --gq-navy:#0b2441; --gq-blue:#2563eb; --gq-cyan:#27d8cf; }

/* Barra delgada de identidad + tarjeta premium */
body #sp-header {
  /* No forzar position:relative para respetar el encabezado sticky de Helix. */
  z-index: 999 !important;
  background: rgba(255,255,255,.97) !important;
  -webkit-backdrop-filter: saturate(165%) blur(15px);
  backdrop-filter: saturate(165%) blur(15px);
  border-bottom: 1px solid rgba(35,87,127,.12) !important;
  box-shadow: 0 9px 32px rgba(7,27,49,.095) !important;
  min-height: 82px;
  transition: background .22s ease, box-shadow .22s ease;
}
body #sp-header::after {
  content:"";
  position:absolute;
  bottom:0; left:0; right:0;
  height:2px;
  background:linear-gradient(90deg,#1261cb 0%,#2b81ee 40%,#27d8cf 100%);
  opacity:.83;
  pointer-events:none;
}
body #sp-header .container,
body #sp-header .container-fluid {
  width:calc(100% - 2 * clamp(16px,4vw,82px)) !important;
  max-width:none !important;
  margin-inline:auto;
}
body #sp-header .row,
body #sp-header .sp-column { align-items:center; }

/* Logotipo más visible y sin deformación */
body #sp-header .logo,
body #sp-header .logo a { display:inline-flex; align-items:center; }
body #sp-header .logo img,
body #sp-header img.sp-default-logo,
body #sp-header .logo-image { width:auto !important; max-height:48px !important; object-fit:contain; }

/* Menú de escritorio Helix: reglas de alta prioridad */
@media (min-width: 992px) {
  body #sp-header .sp-megamenu-parent { display:flex; align-items:center; gap:3px; }
  body #sp-header .sp-megamenu-parent > li { margin:0 !important; }
  body #sp-header .sp-megamenu-parent > li > a,
  body #sp-header .sp-megamenu-parent > li > span {
    position:relative;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    height:44px !important;
    min-height:44px !important;
    line-height:1.15 !important;
    padding:0 12px !important;
    border-radius:12px !important;
    background:transparent;
    font-size:14px !important;
    font-weight:650 !important;
    letter-spacing:-.12px;
    color:#213a56 !important;
    text-transform:none !important;
    transition:color .18s ease,background .18s ease,transform .18s ease !important;
  }
  body #sp-header .sp-megamenu-parent > li:hover > a,
  body #sp-header .sp-megamenu-parent > li:hover > span,
  body #sp-header .sp-megamenu-parent > li.active > a,
  body #sp-header .sp-megamenu-parent > li.active > span {
    background:#eaf4ff !important;
    color:#155fca !important;
  }
  body #sp-header .sp-megamenu-parent > li > a:focus-visible { outline:2px solid #1db8c3;outline-offset:2px; }
  body #sp-header .sp-megamenu-parent > li > a::after,
  body #sp-header .sp-megamenu-parent > li > span::after {
    content:"";position:absolute;bottom:5px;left:13px;right:13px;height:2px;
    border-radius:4px;background:linear-gradient(90deg,#225de0,#1fcdbd);
    transform:scaleX(0);transition:transform .2s ease;
  }
  body #sp-header .sp-megamenu-parent > li:hover > a::after,
  body #sp-header .sp-megamenu-parent > li.active > a::after { transform:scaleX(1); }
  /* Botón Portal: por URL de la aplicación, no por la posición del elemento. */
  body #sp-header .sp-megamenu-parent > li > a[href*="app.gestiqora.com"],
  body #sp-header .sp-megamenu-parent > li > a[href*="/portal/empresas/"] {
    background:linear-gradient(115deg,#205ed5,#148dce) !important;
    color:#fff !important;
    padding:0 19px !important;
    margin-left:8px;
    border:1px solid #2a8ed8 !important;
    box-shadow:0 9px 23px rgba(29,104,200,.23) !important;
    font-weight:750 !important;
  }
  body #sp-header .sp-megamenu-parent > li > a[href*="app.gestiqora.com"]::after,
  body #sp-header .sp-megamenu-parent > li > a[href*="/portal/empresas/"]::after { display:none !important; }
  body #sp-header .sp-megamenu-parent > li > a[href*="app.gestiqora.com"]:hover,
  body #sp-header .sp-megamenu-parent > li > a[href*="/portal/empresas/"]:hover {
    color:#fff !important;background:linear-gradient(115deg,#1550b6,#0f7ab7) !important;
    transform:translateY(-1px);
  }
}

/* Botón hamburguesa: aplicar al contenedor, NO al icono interior */
body #sp-header #offcanvas-toggler,
body #sp-header .offcanvas-toggler {
  display:inline-flex !important;
  justify-content:center !important;
  align-items:center !important;
  flex:0 0 auto;
  height:43px !important;
  width:43px !important;
  padding:9px !important;
  border:1px solid #dbe8f2 !important;
  border-radius:13px !important;
  background:#f4f9ff !important;
  box-shadow:0 4px 13px rgba(9,44,80,.06);
  transition:background .2s ease,transform .2s ease !important;
}
body #sp-header #offcanvas-toggler:hover,
body #sp-header .offcanvas-toggler:hover { background:#e6f4ff !important; transform:translateY(-1px); }
body #sp-header .burger-icon { width:22px !important; height:auto !important; background:transparent !important; box-shadow:none !important; border:0 !important; }
body #sp-header .burger-icon > span { background:#102e4d !important; }

/* Panel lateral de Helix: sofisticado, legible, sin tocar la función de cierre */
body .offcanvas-menu { background:linear-gradient(180deg,#fff 0%,#f5faff 100%) !important; }
body .offcanvas-menu .offcanvas-inner { background:transparent !important; }
body .offcanvas-menu .offcanvas-inner a { color:#193e63; }
body .offcanvas-menu .offcanvas-inner ul > li > a,
body .offcanvas-menu .offcanvas-inner ul > li > span {
  display:block;
  padding:13px 16px !important;
  border-radius:12px;
  color:#1c3956 !important;
  font-weight:650 !important;
  font-size:15px !important;
  line-height:1.45 !important;
  transition:background .18s ease,color .18s ease;
}
body .offcanvas-menu .offcanvas-inner ul > li > a:hover,
body .offcanvas-menu .offcanvas-inner ul > li.active > a { background:#e8f3ff !important; color:#155fc6 !important; }
body .offcanvas-menu .offcanvas-inner a[href*="app.gestiqora.com"],
body .offcanvas-menu .offcanvas-inner a[href*="/portal/empresas/"] {
  background:#205fcd !important;
  color:#fff !important;
  border-radius:12px !important;
  text-align:center;
  margin-top:10px;
}

@media (max-width: 1199px) {
  body #sp-header { min-height:70px; }
  body #sp-header .logo img,
  body #sp-header img.sp-default-logo { max-height:38px !important; }
}
@media (max-width: 991px) {
  body #sp-header { min-height:66px; }
  body #sp-header #offcanvas-toggler,
  body #sp-header .offcanvas-toggler { width:42px !important;height:42px !important; }
}
@media (prefers-reduced-motion: reduce) {
  body #sp-header *,body .offcanvas-menu * { transition:none !important; }
}