/* TESSIRVE 5.17.227 — Corrección acotada de identidad visual.
 * Un único degradado principal/secundario para PC y móvil, sobre la misma
 * textura anime local. No modifica footer, buscador, tipografía ni partido. */
html {
  --tsv227-shadow-a:rgba(2,15,12,.18);
  --tsv227-shadow-b:rgba(1,12,10,.30);
  --tsv227-brightness:brightness(.79) saturate(1.06) contrast(1.09);
}
html[data-tessirve-color-mode="dark"] {
  --tsv227-shadow-a:rgba(1,7,10,.29);
  --tsv227-shadow-b:rgba(1,6,9,.43);
  --tsv227-brightness:brightness(.66) saturate(1.02) contrast(1.10);
}

/* Una sola pintura para las dos franjas de PC. La banda de ligas ya no
 * impone su propia base de color, de manera que el césped no se corta. */
@media (min-width:783px) {
  html body.tessirve-theme .ms-site-header::before {
    height:calc(var(--ms-header-height,58px) + var(--ms-featured-height,40px))!important;
    background-image:
      linear-gradient(180deg,var(--tsv227-shadow-a),var(--tsv227-shadow-b)),
      linear-gradient(108deg,var(--theme-primary,#16884a) 0%,var(--theme-primary,#16884a) 20%,var(--theme-secondary,#0a5b35) 78%,var(--theme-secondary,#0a5b35) 100%),
      url('tessirve-anime-grass.webp')!important;
    background-blend-mode:normal,color,normal!important;
    background-position:center center!important;
    background-size:100% 100%,100% 100%,cover!important;
    background-repeat:no-repeat!important;
    filter:var(--tsv227-brightness)!important;
  }
  html body.tessirve-theme .ms-site-header .ms-header-featured {
    background:transparent!important;
    background-image:none!important;
    border-top:1px solid rgba(255,255,255,.12)!important;
    border-bottom:1px solid rgba(255,255,255,.18)!important;
    position:relative!important;
    z-index:1!important;
  }
  html body.tessirve-theme .ms-site-header .ms-header-featured-inner,
  html body.tessirve-theme .ms-site-header .ms-header-featured-links {
    background:transparent!important;
    background-image:none!important;
  }
}

/* Celular: dos ventanas sincronizadas del MISMO lienzo. El menú móvil
 * vive fuera de la altura real del header (posición superpuesta); por eso
 * necesita su propia ventana al mismo wallpaper y un desplazamiento exacto. */
@media (max-width:782px) {
  html body.tessirve-theme .ms-site-header {
    isolation:isolate!important;
  }
  html body.tessirve-theme .ms-site-header::before {
    content:""!important;
    display:block!important;
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:var(--ms-header-mobile-height,58px)!important;
    background-image:
      linear-gradient(180deg,var(--tsv227-shadow-a),var(--tsv227-shadow-b)),
      linear-gradient(108deg,var(--theme-primary,#16884a) 0%,var(--theme-primary,#16884a) 20%,var(--theme-secondary,#0a5b35) 78%,var(--theme-secondary,#0a5b35) 100%),
      url('tessirve-anime-grass-mobile-217.webp')!important;
    background-blend-mode:normal,color,normal!important;
    background-position:center top,center top,center top!important;
    background-size:100% max(1080px,130dvh),100% max(1080px,130dvh),100% max(1080px,130dvh)!important;
    background-repeat:no-repeat!important;
    filter:var(--tsv227-brightness)!important;
    opacity:1!important;
    transform:none!important;
    pointer-events:none!important;
    z-index:0!important;
  }
  html body.tessirve-theme .ms-site-header .ms-site-header-inner {
    position:relative!important;
    z-index:1!important;
    box-sizing:border-box!important;
  }
  /* Ancho basado en el viewport, no en un +32px supuesto: también funciona
   * con padding distinto, viewport estrecho o barra de desplazamiento. */
  html body.tessirve-theme .ms-site-header .ms-site-header-inner > .ms-primary-nav,
  html[data-tessirve-theme][data-tessirve-color-mode] body.tessirve-theme .ms-site-header .ms-site-header-inner > .ms-primary-nav.is-open {
    box-sizing:border-box!important;
    position:relative!important;
    inset:auto!important;
    top:auto!important;
    right:auto!important;
    left:auto!important;
    bottom:auto!important;
    width:100vw!important;
    min-width:100vw!important;
    max-width:100vw!important;
    flex:0 0 100vw!important;
    margin-top:0!important;
    margin-bottom:0!important;
    margin-left:calc((100% - 100vw) / 2)!important;
    margin-right:calc((100% - 100vw) / 2)!important;
    padding-left:12px!important;
    padding-right:12px!important;
    transform:none!important;
    background:transparent!important;
    background-image:none!important;
    background-color:transparent!important;
    border-left:0!important;
    border-right:0!important;
    border-top:0!important;
    border-radius:0 0 17px 17px!important;
  }
  html body.tessirve-theme .ms-site-header .ms-site-header-inner > .ms-primary-nav.is-open {
    isolation:isolate!important;
  }
  html body.tessirve-theme .ms-site-header .ms-site-header-inner > .ms-primary-nav.is-open::before {
    content:""!important;
    display:block!important;
    position:absolute!important;
    inset:0!important;
    height:100%!important;
    width:100%!important;
    background-image:
      linear-gradient(180deg,var(--tsv227-shadow-a),var(--tsv227-shadow-b)),
      linear-gradient(108deg,var(--theme-primary,#16884a) 0%,var(--theme-primary,#16884a) 20%,var(--theme-secondary,#0a5b35) 78%,var(--theme-secondary,#0a5b35) 100%),
      url('tessirve-anime-grass-mobile-217.webp')!important;
    background-blend-mode:normal,color,normal!important;
    background-position:
      center calc(-1 * var(--ms-header-mobile-height,58px)),
      center calc(-1 * var(--ms-header-mobile-height,58px)),
      center calc(-1 * var(--ms-header-mobile-height,58px))!important;
    background-size:100% max(1080px,130dvh),100% max(1080px,130dvh),100% max(1080px,130dvh)!important;
    background-repeat:no-repeat!important;
    filter:var(--tsv227-brightness)!important;
    opacity:1!important;
    pointer-events:none!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;
  }
  html body.tessirve-theme .ms-site-header .ms-primary-nav.is-open .ms-mobile-quicklinks,
  html body.tessirve-theme .ms-site-header .ms-primary-nav.is-open .ms-site-menu {
    background:transparent!important;
  }
}