/*
 * TESSIRVE Theme 5.17.219 — continuidad real entre header y menú móvil.
 * Un único campo: MISMA imagen local, mezcla cromática, posición e iluminación.
 * No se modifica la experiencia en PC ni los tamaños y navegación aprobados.
 */
@media (max-width:782px) {
  html {
    --tsv219-field-header-height:var(--ms-header-mobile-height,58px);
    /* La ilustración se dibuja en el mismo lienzo virtual en ambos sectores. */
    --tsv219-field-canvas-height:max(1080px,130dvh);
    --tsv219-field-filter:brightness(.70) saturate(1.08) contrast(1.08);
    --tsv219-field-top:rgba(4,12,17,.07);
    --tsv219-field-bottom:rgba(4,12,17,.13);
  }
  html[data-tessirve-theme="neutral"] {
    --tsv219-field-filter:brightness(.65) saturate(.95) contrast(1.10);
  }
  html[data-tessirve-color-mode="dark"] {
    --tsv219-field-filter:brightness(.51) saturate(.95) contrast(1.16);
    --tsv219-field-top:rgba(1,8,14,.12);
    --tsv219-field-bottom:rgba(1,8,14,.20);
  }
  html[data-tessirve-color-mode="dark"][data-tessirve-theme="neutral"] {
    --tsv219-field-filter:brightness(.47) saturate(.92) contrast(1.14);
  }

  /* DOS ventanas del MISMO paisaje. La del menú retoma la imagen exactamente
     donde termina la del header, sin gradiente ni color independientes. */
  html body.tessirve-theme .ms-site-header::before,
  html body.tessirve-theme .ms-site-header .ms-site-header-inner > .ms-primary-nav.is-open::before {
    content:""!important;
    display:block!important;
    background-image:
      linear-gradient(180deg,var(--tsv219-field-top),var(--tsv219-field-bottom)),
      linear-gradient(110deg,
        color-mix(in srgb,var(--theme-primary,#16884a) 92%,#25313e 8%),
        color-mix(in srgb,var(--theme-secondary,#0a5b35) 88%,#25313e 12%)),
      url('tessirve-anime-grass-mobile-217.webp')!important;
    background-blend-mode:normal,color,normal!important;
    background-size:
      100% var(--tsv219-field-canvas-height),
      100% var(--tsv219-field-canvas-height),
      100% var(--tsv219-field-canvas-height)!important;
    background-repeat:no-repeat!important;
    filter:var(--tsv219-field-filter)!important;
    opacity:1!important;
    pointer-events:none!important;
    transform:none!important;
  }
  html body.tessirve-theme .ms-site-header::before {
    left:0!important;
    right:0!important;
    top:0!important;
    height:var(--tsv219-field-header-height)!important;
    background-position:center top,center top,center top!important;
    z-index:0!important;
  }
  html body.tessirve-theme .ms-site-header .ms-site-header-inner > .ms-primary-nav.is-open {
    /* Dejar toda la pintura al pseudo-elemento continuo, sin tintes propios. */
    position:relative!important;
    top:auto!important;
    bottom:auto!important;
    background:none!important;
    background-color:transparent!important;
    background-image:none!important;
    background-blend-mode:normal!important;
    filter:none!important;
    isolation:isolate!important;
    border-top:0!important;
    border-left:0!important;
    border-right:0!important;
    border-radius:0 0 16px 16px!important;
    box-shadow:0 15px 28px rgba(0,0,0,.18)!important;
  }
  html body.tessirve-theme .ms-site-header .ms-site-header-inner > .ms-primary-nav.is-open::before {
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    /* Exactamente la altura que el wallpaper avanzó en la fila del logo. */
    background-position:
      center calc(-1 * var(--tsv219-field-header-height)),
      center calc(-1 * var(--tsv219-field-header-height)),
      center calc(-1 * var(--tsv219-field-header-height))!important;
    border-radius:0 0 16px 16px!important;
    z-index:0!important;
  }
  html body.tessirve-theme .ms-site-header .ms-site-header-inner > .ms-primary-nav.is-open::after {
    content:none!important;
    display:none!important;
  }
  html body.tessirve-theme .ms-site-header .ms-site-header-inner > .ms-primary-nav.is-open > * {
    position:relative!important;
    z-index:1!important;
  }

  /* Cristales neutros: dejan ver EXACTAMENTE el campo del header detrás.
     Sin verdes, azules ni granates fijos en los bloques interiores. */
  html body.tessirve-theme .ms-site-header .ms-primary-nav.is-open .ms-mobile-quicklinks {
    background:rgba(8,14,18,.13)!important;
    border-color:rgba(255,255,255,.34)!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  html body.tessirve-theme .ms-site-header .ms-primary-nav.is-open .ms-site-menu {
    background:transparent!important;
    border-top:1px solid rgba(255,255,255,.26)!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  html body.tessirve-theme .ms-site-header .ms-primary-nav.is-open .ms-mobile-quicklink,
  html body.tessirve-theme .ms-site-header .ms-primary-nav.is-open .ms-site-menu > .ms-menu-parent > .ms-menu-parent-head {
    background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.055))!important;
    border:1px solid rgba(255,255,255,.40)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.10)!important;
  }
  html body.tessirve-theme .ms-site-header .ms-primary-nav.is-open .ms-menu-parent.is-open > .ms-menu-parent-head {
    background:rgba(9,16,20,.30)!important;
    border-color:rgba(255,255,255,.60)!important;
  }
  html body.tessirve-theme .ms-site-header .ms-primary-nav.is-open .ms-mobile-submenu,
  html body.tessirve-theme .ms-site-header .ms-primary-nav.is-open .ms-mobile-submenu-inner {
    background:rgba(8,14,18,.13)!important;
  }
  html body.tessirve-theme .ms-site-header .ms-primary-nav.is-open .ms-mobile-submenu-tab {
    background:rgba(255,255,255,.13)!important;
    border-color:rgba(255,255,255,.35)!important;
  }

  html[data-tessirve-color-mode="dark"] body.tessirve-theme .ms-site-header .ms-primary-nav.is-open .ms-mobile-quicklinks {
    background:rgba(5,10,14,.25)!important;
    border-color:rgba(255,255,255,.22)!important;
  }
  html[data-tessirve-color-mode="dark"] body.tessirve-theme .ms-site-header .ms-primary-nav.is-open .ms-mobile-quicklink,
  html[data-tessirve-color-mode="dark"] body.tessirve-theme .ms-site-header .ms-primary-nav.is-open .ms-site-menu > .ms-menu-parent > .ms-menu-parent-head {
    background:linear-gradient(180deg,rgba(4,10,15,.32),rgba(4,10,15,.16))!important;
    border-color:rgba(255,255,255,.24)!important;
  }
  html[data-tessirve-color-mode="dark"] body.tessirve-theme .ms-site-header .ms-primary-nav.is-open .ms-menu-parent.is-open > .ms-menu-parent-head {
    background:rgba(3,8,13,.47)!important;
    border-color:rgba(255,255,255,.40)!important;
  }
  html[data-tessirve-color-mode="dark"] body.tessirve-theme .ms-site-header .ms-primary-nav.is-open .ms-mobile-submenu,
  html[data-tessirve-color-mode="dark"] body.tessirve-theme .ms-site-header .ms-primary-nav.is-open .ms-mobile-submenu-inner {
    background:rgba(3,7,12,.29)!important;
  }
  html[data-tessirve-color-mode="dark"] body.tessirve-theme .ms-site-header .ms-primary-nav.is-open .ms-mobile-submenu-tab {
    background:rgba(6,10,15,.33)!important;
    border-color:rgba(255,255,255,.23)!important;
  }
}