/*
 * TESSIRVE 5.17.211 — Césped anime cromático + wordmark de Supercampeones.
 * Ninguna escucha del switch adicional: la identidad actual actualiza --theme-primary,
 * --theme-secondary y data-tessirve-theme en assets/theme.js (sin tocar ese script).
 * El pasto es una textura LOCAL extraída del mismo fotograma de nuestra pelota.
 */
.ms-site-header {
  isolation: isolate!important;
}
/* Una capa SOLO bajo la primera fila. No cambia las subbarras ni los menús. */
.ms-site-header::before {
  content:"";
  pointer-events:none;
  position:absolute;
  top:0;
  right:0;
  left:0;
  height:var(--ms-header-height,58px);
  z-index:0;
  background-image: url("tessirve-anime-grass.webp");
  background-size:cover;
  background-position:center 43%;
  background-repeat:no-repeat;
  filter:brightness(.65) saturate(.95) contrast(1.10);
}
/* El selector de clubes existente cambia ambas variables: pasto del color del equipo. */
html[data-tessirve-theme]:not([data-tessirve-theme="neutral"]) .ms-site-header::before {
  background-image:
    linear-gradient(110deg, color-mix(in srgb,var(--theme-primary) 92%,#25313e 8%), color-mix(in srgb,var(--theme-secondary) 88%,#25313e 12%)),
    url("tessirve-anime-grass.webp");
  background-blend-mode:color,normal;
  filter:brightness(.70) saturate(1.08) contrast(1.08);
}
/* Misma imagen; el switch claro/oscuro únicamente adapta legibilidad. */
html[data-tessirve-color-mode="dark"] .ms-site-header::before { filter:brightness(.47) saturate(.92) contrast(1.14); }
html[data-tessirve-color-mode="dark"][data-tessirve-theme]:not([data-tessirve-theme="neutral"]) .ms-site-header::before { filter:brightness(.51) saturate(.95) contrast(1.16); }
/* El pasto se ubica DEBAJO del logo, navegación y controles, sin robar clicks. */
.ms-site-header > .ms-site-header-inner {position:relative;z-index:1;}
/* No reestructura el header anterior, respeta los anchos ya aprobados. */
.ms-site-header .tsv-hlogo.tsv-hlogo-static {flex-basis:162px!important;width:162px!important;height:48px!important;}
.ms-site-header .tsv-hlogo-static > .tsv-hlogo-img {
  display:block!important;
  opacity:1!important;
  object-fit:contain!important;
  object-position:left center!important;
  filter:none!important;
  image-rendering:auto;
}
/* Este logo nuevo siempre es blanco/negro; no hay azul que deba recolorearse. */
.ms-site-header .tsv-hlogo-static.is-recolored > .tsv-hlogo-img { opacity:1!important; }
.ms-site-header .tsv-hlogo-static > .tsv-hlogo-canvas {display:none!important;}
@media(max-width:782px){
  .ms-site-header .tsv-hlogo.tsv-hlogo-static {flex-basis:126px!important;width:126px!important;height:40px!important;}
}
@media(max-width:430px){
  .ms-site-header .tsv-hlogo.tsv-hlogo-static {flex-basis:112px!important;width:112px!important;height:36px!important;}
}

/* 5.17.213 — centrado vertical real de los cuatro controles en móvil.
 * El header visual usa --ms-header-height (58px normalmente), pero el CSS
 * legado había comprimido únicamente la fila interna a 44px: quedaba una
 * franja de césped vacía abajo. Reutilizamos una única altura para fila,
 * fondo y offset del contenido. No cambiamos anchos, orden ni animaciones. */
@media (max-width:782px) {
  :root {
    --ms-header-mobile-height: var(--ms-header-height,58px)!important;
  }
  html body.tessirve-theme .ms-site-header .ms-site-header-inner {
    box-sizing:border-box!important;
    height:var(--ms-header-mobile-height,58px)!important;
    min-height:var(--ms-header-mobile-height,58px)!important;
    align-items:center!important;
  }
  html body.tessirve-theme .ms-site-header .ms-brand,
  html body.tessirve-theme .ms-site-header .ms-header-search,
  html body.tessirve-theme .ms-site-header :is(.ms-header-account-menu,.ms-header-auth-link,.tc-header-account),
  html body.tessirve-theme .ms-site-header .ms-menu-toggle {
    align-self:center!important;
  }
}