/* ==========================================================
   NUBO_GLOBAL_SHELL_LAYOUT_V2_START

   La barra conserva un espacio real dentro del layout.
   No se usan transformaciones ni márgenes negativos.
   ========================================================== */

:root {
  --nubo-shell-top-gap: 11px;
  --nubo-shell-nav-height: 74px;
  --nubo-shell-content-gap: 20px;
}


/* Escritorio */

@media (min-width: 901px) {
  .app-header {
    position: sticky !important;

    top: 0 !important;

    z-index: 80 !important;

    box-sizing: border-box !important;

    width: 100% !important;

    height:
      calc(
        var(--nubo-shell-top-gap)
        + var(--nubo-shell-nav-height)
        + var(--nubo-shell-content-gap)
      ) !important;

    min-height:
      calc(
        var(--nubo-shell-top-gap)
        + var(--nubo-shell-nav-height)
        + var(--nubo-shell-content-gap)
      ) !important;

    padding:
      var(--nubo-shell-top-gap)
      24px
      0 !important;

    margin: 0 !important;

    overflow: visible !important;

    background: transparent !important;
  }


  .app-header
  > .header-inner {
    box-sizing: border-box !important;

    width: 100% !important;

    height:
      var(--nubo-shell-nav-height) !important;

    min-height:
      var(--nubo-shell-nav-height) !important;

    margin:
      0
      auto !important;

    transform: none !important;

    translate: none !important;
  }


  .main-content {
    position: relative !important;

    z-index: 1 !important;

    box-sizing: border-box !important;

    margin-top: 0 !important;

    padding-top: 0 !important;

    transform: none !important;

    translate: none !important;
  }


  .main-content
  > :first-child {
    margin-top: 0 !important;
  }


  /*
   * Evita que títulos o cards queden debajo
   * de la barra durante navegación o scroll.
   */
  .main-content
  .page-head,
  .main-content
  [class*="page-head"],
  .main-content
  section:first-child {
    scroll-margin-top:
      calc(
        var(--nubo-shell-nav-height)
        + var(--nubo-shell-content-gap)
      );
  }
}


/* Monitores amplios */

@media (min-width: 1280px) {
  :root {
    --nubo-shell-top-gap: 12px;
    --nubo-shell-nav-height: 76px;
    --nubo-shell-content-gap: 22px;
  }

  .app-header {
    padding-inline:
      38px !important;
  }
}


/* Laptop */

@media (
  min-width: 901px
) and (
  max-width: 1199px
) {
  :root {
    --nubo-shell-top-gap: 9px;
    --nubo-shell-nav-height: 70px;
    --nubo-shell-content-gap: 18px;
  }

  .app-header {
    padding-inline:
      18px !important;
  }
}


/* Móvil y tablet pequeña: conservar comportamiento original */

@media (max-width: 900px) {
  .app-header {
    transform: none !important;

    translate: none !important;
  }

  .app-header
  > .header-inner {
    transform: none !important;

    translate: none !important;
  }

  .main-content {
    margin-top: 0 !important;

    transform: none !important;

    translate: none !important;
  }
}


/* Movimiento reducido */

@media (prefers-reduced-motion: reduce) {
  .app-header,
  .header-inner,
  .main-content {
    transition: none !important;
  }
}

/* NUBO_GLOBAL_SHELL_LAYOUT_V2_END */