/* ========================================================================
   5.17.220 — Vuelta al alma del pasto original
   - Header y menú comparten la misma receta visual.
   - Tessirve/neutral: el pasto se ve lo más fiel posible al original.
   - Switch por equipo: tinte SUAVE sobre el mismo pasto, no textura nueva.
   - Claro/oscuro: solo ajustan iluminación y contraste.
   ======================================================================== */
html{
  --tsv220-field-shade-top: rgba(0,0,0,.07);
  --tsv220-field-shade-bottom: rgba(0,0,0,.16);
  --tsv220-field-wash-a: rgba(0,0,0,0);
  --tsv220-field-wash-b: rgba(0,0,0,0);
  --tsv220-field-filter: brightness(.90) saturate(1.00) contrast(1.03);
  --tsv220-field-panel: rgba(255,255,255,.12);
  --tsv220-field-panel-strong: rgba(255,255,255,.18);
  --tsv220-field-panel-border: rgba(255,255,255,.38);
  --tsv220-field-panel-border-strong: rgba(255,255,255,.56);
}
html[data-tessirve-theme]:not([data-tessirve-theme="neutral"]) {
  --tsv220-field-wash-a: color-mix(in srgb, var(--theme-primary, #16884A) 28%, transparent);
  --tsv220-field-wash-b: color-mix(in srgb, var(--theme-secondary, #0A5B35) 34%, transparent);
  --tsv220-field-filter: brightness(.88) saturate(1.03) contrast(1.05);
}
html[data-tessirve-color-mode="dark"]{
  --tsv220-field-shade-top: rgba(2,7,12,.24);
  --tsv220-field-shade-bottom: rgba(2,7,12,.36);
  --tsv220-field-filter: brightness(.72) saturate(.95) contrast(1.08);
  --tsv220-field-panel: rgba(8,12,18,.20);
  --tsv220-field-panel-strong: rgba(8,12,18,.29);
  --tsv220-field-panel-border: rgba(255,255,255,.25);
  --tsv220-field-panel-border-strong: rgba(255,255,255,.38);
}
html[data-tessirve-color-mode="dark"][data-tessirve-theme]:not([data-tessirve-theme="neutral"]) {
  --tsv220-field-wash-a: color-mix(in srgb, var(--theme-primary, #16884A) 34%, transparent);
  --tsv220-field-wash-b: color-mix(in srgb, var(--theme-secondary, #0A5B35) 40%, transparent);
  --tsv220-field-filter: brightness(.69) saturate(.98) contrast(1.10);
}

/* Header: misma imagen base pero sin “matar” el pasto original. */
html body.tessirve-theme .ms-site-header::before{
  background-image:
    linear-gradient(180deg,var(--tsv220-field-shade-top),var(--tsv220-field-shade-bottom)),
    linear-gradient(112deg,var(--tsv220-field-wash-a),var(--tsv220-field-wash-b)),
    url('tessirve-anime-grass.webp')!important;
  background-blend-mode:multiply,normal,normal!important;
  background-size:cover,cover,cover!important;
  background-position:center 43%,center 43%,center 43%!important;
  background-repeat:no-repeat!important;
  filter:var(--tsv220-field-filter)!important;
}

/* Móvil: continuidad con la MISMA receta y el mismo espíritu del pasto anime. */
@media (max-width:782px){
  html{
    --tsv220-field-header-height: var(--ms-header-mobile-height,58px);
    --tsv220-field-canvas-height:max(1040px,128dvh);
  }
  html body.tessirve-theme .ms-site-header .ms-site-header-inner > .ms-primary-nav {
    margin:0!important;
    width:100vw!important;
    flex:0 0 100vw!important;
    margin-left:calc(50% - 50vw)!important;
    margin-right:calc(50% - 50vw)!important;
  }
  html body.tessirve-theme .ms-site-header .ms-site-header-inner > .ms-primary-nav.is-open{
    position:relative!important;
    background:none!important;
    border:0!important;
    border-radius:0 0 18px 18px!important;
    box-shadow:0 14px 26px rgba(0,0,0,.16)!important;
    padding:8px 0 12px!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
  }
  html body.tessirve-theme .ms-site-header .ms-site-header-inner > .ms-primary-nav.is-open::before{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    background-image:
      linear-gradient(180deg,var(--tsv220-field-shade-top),var(--tsv220-field-shade-bottom)),
      linear-gradient(112deg,var(--tsv220-field-wash-a),var(--tsv220-field-wash-b)),
      url('tessirve-anime-grass-mobile-217.webp')!important;
    background-blend-mode:multiply,normal,normal!important;
    background-size:100% var(--tsv220-field-canvas-height),100% var(--tsv220-field-canvas-height),100% var(--tsv220-field-canvas-height)!important;
    background-position:center calc(-1 * var(--tsv220-field-header-height)),center calc(-1 * var(--tsv220-field-header-height)),center calc(-1 * var(--tsv220-field-header-height))!important;
    background-repeat:no-repeat!important;
    filter:var(--tsv220-field-filter)!important;
    border-radius:0 0 18px 18px!important;
    z-index:0!important;
    pointer-events:none!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;
  }
  /* Contenido con márgenes internos, pero fondo full-bleed. */
  html body.tessirve-theme .ms-site-header .ms-primary-nav .ms-mobile-quicklinks,
  html body.tessirve-theme .ms-site-header .ms-primary-nav .ms-site-menu{
    margin-left:12px!important;
    margin-right:12px!important;
  }
  html body.tessirve-theme .ms-site-header .ms-primary-nav .ms-mobile-quicklinks{
    background:var(--tsv220-field-panel)!important;
    border:1px solid var(--tsv220-field-panel-border)!important;
    border-radius:14px!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  html body.tessirve-theme .ms-site-header .ms-primary-nav .ms-site-menu{
    background:transparent!important;
    border-top:1px solid color-mix(in srgb, var(--tsv220-field-panel-border) 80%, transparent)!important;
    padding-left:0!important;
    padding-right:0!important;
    box-shadow:none!important;
  }
  html body.tessirve-theme .ms-site-header .ms-primary-nav .ms-mobile-quicklink,
  html body.tessirve-theme .ms-site-header .ms-primary-nav .ms-site-menu > .ms-menu-parent > .ms-menu-parent-head{
    background:linear-gradient(180deg,var(--tsv220-field-panel-strong),var(--tsv220-field-panel))!important;
    border:1px solid var(--tsv220-field-panel-border)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important;
  }
  html body.tessirve-theme .ms-site-header .ms-primary-nav .ms-menu-parent.is-open > .ms-menu-parent-head{
    background:linear-gradient(180deg,color-mix(in srgb,var(--tsv220-field-panel-strong) 86%, rgba(0,0,0,.12)),color-mix(in srgb,var(--tsv220-field-panel) 86%, rgba(0,0,0,.16)))!important;
    border-color:var(--tsv220-field-panel-border-strong)!important;
  }
  html body.tessirve-theme .ms-site-header .ms-primary-nav .ms-mobile-submenu,
  html body.tessirve-theme .ms-site-header .ms-primary-nav .ms-mobile-submenu-inner{
    background:var(--tsv220-field-panel)!important;
  }
  html body.tessirve-theme .ms-site-header .ms-primary-nav .ms-mobile-submenu-tab{
    background:var(--tsv220-field-panel)!important;
    border:1px solid var(--tsv220-field-panel-border)!important;
  }
}