/* Header fijo real - Prode Mundial 2026
   Este archivo debe cargar DESPUÉS de app.css y notifications.css. */
:root{
  --fwc-fixed-header-height: 72px;
}

html{
  scroll-padding-top: calc(var(--fwc-fixed-header-height, 72px) + 14px);
}

body.fwc.fwc-fixed-header-body,
body.fwc{
  padding-top: var(--fwc-fixed-header-height, 72px) !important;
}

body.fwc .fwc-nav{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 5000 !important;
  margin: 0 !important;
  box-shadow: 0 12px 34px rgba(2, 6, 23, .38) !important;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  will-change: transform;
}

body.fwc .fwc-nav > .container{
  position: relative !important;
  min-height: 64px;
}

body.fwc main.container{
  position: relative;
  z-index: 1;
}

body.fwc .fwc-nav .navbar-toggler,
body.fwc .fwc-nav .fwc-menu-toggle{
  position: relative;
  z-index: 5010 !important;
}

body.fwc .fwc-notification-wrap{
  position: relative;
  z-index: 5020 !important;
}

body.fwc .fwc-notification-panel{
  position: absolute !important;
  z-index: 7000 !important;
}

body.fwc .fwc-menu-panel{
  z-index: 6000 !important;
}

@media (max-width: 991.98px){
  :root{
    --fwc-fixed-header-height: 68px;
  }

  body.fwc .fwc-nav > .container{
    min-height: 62px;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: .35rem;
  }

  body.fwc .fwc-nav .navbar-brand{
    min-width: 0;
    flex: 1 1 auto;
    margin-right: .25rem;
  }

  body.fwc .fwc-brand-text{
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.fwc .fwc-notification-wrap{
    flex: 0 0 auto;
    margin-left: .25rem;
    margin-right: .35rem;
  }

  body.fwc .fwc-menu-toggle{
    flex: 0 0 auto;
  }

  body.fwc .fwc-menu-panel{
    position: fixed !important;
    top: calc(var(--fwc-fixed-header-height, 68px) + 8px) !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-height: calc(100dvh - var(--fwc-fixed-header-height, 68px) - 20px) !important;
    overflow: auto !important;
    overscroll-behavior: contain;
    background: #0b1220 !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 18px !important;
    box-shadow: 0 22px 60px rgba(0,0,0,.42) !important;
    padding: .75rem !important;
    margin-top: 0 !important;
  }

  body.fwc .fwc-menu-panel:not(.show){
    display: none !important;
  }

  body.fwc .fwc-menu-panel.show,
  body.fwc .fwc-menu-panel.collapsing{
    display: block !important;
  }

  body.fwc .fwc-notification-panel{
    position: fixed !important;
    top: calc(var(--fwc-fixed-header-height, 68px) + 8px) !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-height: calc(100dvh - var(--fwc-fixed-header-height, 68px) - 20px) !important;
    overflow: auto !important;
  }
}

@media (max-width: 420px){
  body.fwc .fwc-logo{
    width: 32px;
    height: 32px;
  }

  body.fwc .fwc-brand-text{
    max-width: 145px;
    font-size: .78rem;
  }

  body.fwc .fwc-notification-btn,
  body.fwc .fwc-menu-toggle{
    width: 40px;
    min-width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}