/* ==========================================================
   NUBO_HEADER_POPOVER_GUARD_V1_START
   ========================================================== */

.app-header,
.app-header > .header-inner {
  overflow:
    visible !important;
}


.header-actions {
  position:
    relative !important;

  isolation:
    isolate;
}


.header-search-wrap,
.header-quick-wrap,
.quick-add-wrap {
  position:
    relative !important;
}


.header-search-panel[hidden],
.quick-menu[hidden] {
  display:
    none !important;
}


/* ==========================================================
   BUSCADOR
   ========================================================== */

.header-search-panel {
  position:
    absolute !important;

  top:
    calc(
      100% +
      12px
    ) !important;

  right:
    0 !important;

  left:
    auto !important;

  z-index:
    240 !important;

  width:
    clamp(
      330px,
      34vw,
      430px
    ) !important;

  max-width:
    calc(
      100vw -
      32px
    ) !important;

  margin:
    0 !important;

  transform-origin:
    top right;

  animation:
    nubo-header-popover-in
    150ms
    ease-out;
}


.header-search-panel
.global-search {
  position:
    relative !important;

  width:
    100% !important;
}


.header-search-panel
.search-results {
  width:
    100% !important;

  max-height:
    min(
      390px,
      calc(
        100svh -
        160px
      )
    ) !important;

  overflow-y:
    auto !important;

  overscroll-behavior:
    contain;
}


/* ==========================================================
   MENÚ AÑADIR
   ========================================================== */

.header-quick-wrap
.quick-menu,
.quick-add-wrap
.quick-menu {
  position:
    absolute !important;

  top:
    calc(
      100% +
      12px
    ) !important;

  right:
    0 !important;

  left:
    auto !important;

  z-index:
    230 !important;

  width:
    220px !important;

  min-width:
    220px !important;

  max-width:
    calc(
      100vw -
      32px
    ) !important;

  margin:
    0 !important;

  transform-origin:
    top right;

  animation:
    nubo-header-popover-in
    150ms
    ease-out;
}


/* ==========================================================
   CONTROLES ACTIVOS
   ========================================================== */

.header-actions
[aria-expanded="true"] {
  color:
    #167149 !important;

  background:
    #eaf8f0 !important;

  box-shadow:
    inset 0 0 0 1px
    rgba(
      44,
      170,
      108,
      0.18
    ) !important;
}


/* ==========================================================
   ANIMACIÓN
   ========================================================== */

@keyframes nubo-header-popover-in {
  from {
    opacity:
      0;

    transform:
      translateY(-5px)
      scale(0.985);
  }

  to {
    opacity:
      1;

    transform:
      translateY(0)
      scale(1);
  }
}


/* ==========================================================
   LAPTOP Y TABLET
   ========================================================== */

@media (max-width: 1000px) {
  .header-search-panel {
    width:
      min(
        400px,
        calc(
          100vw -
          28px
        )
      ) !important;
  }
}


/* ==========================================================
   MÓVIL
   ========================================================== */

@media (max-width: 760px) {
  .header-search-panel {
    position:
      fixed !important;

    top:
      78px !important;

    right:
      12px !important;

    left:
      12px !important;

    width:
      auto !important;

    max-width:
      none !important;
  }


  .header-quick-wrap
  .quick-menu,
  .quick-add-wrap
  .quick-menu {
    position:
      fixed !important;

    top:
      78px !important;

    right:
      12px !important;

    left:
      auto !important;

    width:
      min(
        270px,
        calc(
          100vw -
          24px
        )
      ) !important;

    min-width:
      0 !important;
  }
}


@media (max-width: 430px) {
  .header-quick-wrap
  .quick-menu,
  .quick-add-wrap
  .quick-menu {
    right:
      12px !important;

    left:
      12px !important;

    width:
      auto !important;
  }
}


/* Modo oscuro */

html[data-theme="dark"]
.header-actions
[aria-expanded="true"] {
  color:
    #a9edc7 !important;

  background:
    rgba(
      51,
      168,
      110,
      0.14
    ) !important;
}


/* Movimiento reducido */

@media (prefers-reduced-motion: reduce) {
  .header-search-panel,
  .quick-menu {
    animation:
      none !important;
  }
}

/* NUBO_HEADER_POPOVER_GUARD_V1_END */