/*
 * TESSIRVE 5.17.217 — campo animado en la navegación móvil.
 * Sólo afecta el desplegable. Conserva cabecera, búsqueda, switch, menús,
 * tamaños de iconos, tipografía y estilos de escritorio de 5.17.216.
 * La hierba procede de la textura local aprobada para el header.
 */
@media (max-width:782px) {
  /* Recuperar la posición normal del desplegable. En 5.17.216 una regla
     lo hizo relative y heredó el top del encabezado: hueco grande artificial. */
  html body.tessirve-theme .ms-site-header .ms-site-header-inner > .ms-primary-nav {
    position:static!important;
    inset:auto!important;
    top:auto!important;
    bottom:auto!important;
    left:auto!important;
    right:auto!important;
    margin:0!important;
    transform:translateY(-6px)!important;
    box-sizing:border-box!important;
    width:100%!important;
    flex:0 0 100%!important;
  }
  html body.tessirve-theme .ms-site-header .ms-site-header-inner > .ms-primary-nav.is-open {
    position:static!important;
    inset:auto!important;
    top:auto!important;
    bottom:auto!important;
    left:auto!important;
    right:auto!important;
    margin:0!important;
    transform:none!important;
    padding:10px 8px 12px!important;
    max-height:min(80dvh,850px)!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    background-image:
      linear-gradient(180deg,rgba(2,31,15,.13),rgba(2,29,14,.24)),
      linear-gradient(145deg,
        color-mix(in srgb,var(--theme-primary,#16884A) 19%,transparent),
        color-mix(in srgb,var(--theme-secondary,#0A5B35) 29%,transparent)),
      url('tessirve-anime-grass-mobile-217.webp')!important;
    background-position:center,center,center top!important;
    background-size:100% 100%,100% 100%,cover!important;
    background-repeat:no-repeat!important;
    border:0!important;
    border-radius:0 0 19px 19px!important;
    box-shadow:inset 0 1px rgba(255,255,255,.12),0 12px 24px rgba(0,19,8,.18)!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  /* No apilar otra copia de hierba encima: hacía un manchón uniforme. */
  html body.tessirve-theme .ms-primary-nav.is-open::before,
  html body.tessirve-theme .ms-primary-nav.is-open::after {
    content:none!important;
    display:none!important;
  }
  /* El dibujo del pasto tiene que seguir a la vista ENTRE Y DETRÁS de los
     accesos; los contenedores ya no son dos rectángulos opacos. */
  html body.tessirve-theme .ms-primary-nav .ms-mobile-quicklinks,
  html body.tessirve-theme .ms-primary-nav .ms-site-menu {
    position:relative!important;
    background:rgba(3,45,19,.13)!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    border:1px solid rgba(245,255,244,.28)!important;
    border-radius:14px!important;
    box-shadow:none!important;
  }
  html body.tessirve-theme .ms-primary-nav .ms-mobile-quicklinks {
    margin:0 0 8px!important;
    padding:9px!important;
  }
  html body.tessirve-theme .ms-primary-nav .ms-site-menu {
    border:0!important;
    border-top:1px solid rgba(242,255,242,.36)!important;
    border-radius:0!important;
    margin:0!important;
    padding:8px 3px 5px!important;
    gap:7px!important;
  }
  html body.tessirve-theme .ms-primary-nav .ms-mobile-quicklinks::before,
  html body.tessirve-theme .ms-primary-nav .ms-site-menu::before {
    content:none!important;
    display:none!important;
  }
  /* Tarjetas verde-agua translúcidas: brillo natural, sin paneles azulados. */
  html body.tessirve-theme .ms-primary-nav .ms-mobile-quicklink {
    background:linear-gradient(175deg,rgba(245,255,243,.24),rgba(225,250,224,.12))!important;
    border:1px solid rgba(255,255,255,.48)!important;
    border-radius:11px!important;
    box-shadow:0 1px 3px rgba(1,29,12,.06),inset 0 1px rgba(255,255,255,.14)!important;
    color:#fff!important;
    text-shadow:0 1px 2px rgba(0,35,12,.7)!important;
  }
  html body.tessirve-theme .ms-primary-nav .ms-mobile-quicklink:is(:hover,:focus-visible) {
    background:rgba(249,255,242,.35)!important;
    border-color:rgba(255,255,255,.78)!important;
  }
  /* Botones del catálogo integrados al mismo campo, no un panel dentro de otro. */
  html body.tessirve-theme .ms-primary-nav .ms-menu-parent-head {
    background:rgba(8,48,24,.29)!important;
    border:1px solid rgba(240,255,242,.36)!important;
    border-radius:11px!important;
    box-shadow:inset 0 1px rgba(255,255,255,.1)!important;
  }
  html body.tessirve-theme .ms-primary-nav .ms-menu-parent-toggle {
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    color:#fff!important;
    text-shadow:0 1px 2px rgba(0,23,12,.40)!important;
  }
  html body.tessirve-theme .ms-primary-nav .ms-menu-parent.is-open > .ms-menu-parent-head {
    background:rgba(4,44,21,.58)!important;
    border-color:rgba(255,255,255,.72)!important;
  }
  html body.tessirve-theme .ms-primary-nav .ms-site-menu>li:not(.ms-menu-parent)>a,
  html body.tessirve-theme .ms-primary-nav .ms-site-menu>li .ms-menu-featured-link {
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    color:#fff!important;
    text-shadow:0 1px 2px rgba(0,23,12,.55)!important;
  }
  html body.tessirve-theme .ms-primary-nav .ms-mobile-submenu,
  html body.tessirve-theme .ms-primary-nav .ms-mobile-submenu-inner {
    background:rgba(3,31,16,.24)!important;
  }
  html body.tessirve-theme .ms-primary-nav .ms-mobile-submenu-tab {
    background:rgba(3,41,17,.31)!important;
    border:1px solid rgba(244,255,246,.29)!important;
    color:#fff!important;
  }
  html body.tessirve-theme .ms-primary-nav .ms-mobile-quicklinks-kicker>strong,
  html body.tessirve-theme .ms-primary-nav .ms-mobile-menu-kicker>strong {
    color:#fff!important;
    text-shadow:0 1px 2px rgba(0,25,10,.65)!important;
  }
  html body.tessirve-theme .ms-primary-nav .ms-mobile-menu-kicker {
    margin:8px 9px 5px!important;
  }
}

@media (max-width:782px) {
  /* Ganar la especificidad del estilo neutral que en 5.17.214 mantenía
     la caja entera del catálogo verde muy oscuro y ocultaba el césped. */
  html[data-tessirve-theme] body.tessirve-theme .ms-site-header .ms-primary-nav.is-open .ms-mobile-quicklinks,
  html[data-tessirve-theme] body.tessirve-theme .ms-site-header .ms-primary-nav.is-open .ms-site-menu {
    background:transparent!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    box-shadow:none!important;
  }
  html[data-tessirve-theme] body.tessirve-theme .ms-site-header .ms-primary-nav.is-open .ms-mobile-quicklinks {
    border:1px solid rgba(255,255,255,.34)!important;
    background:rgba(2,49,20,.09)!important;
  }
  html[data-tessirve-theme] body.tessirve-theme .ms-site-header .ms-primary-nav.is-open .ms-site-menu {
    border:0!important;
    border-top:1px solid rgba(241,255,244,.37)!important;
  }
  html[data-tessirve-theme] 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(240,255,231,.23),rgba(235,255,229,.14))!important;
    border:1px solid rgba(249,255,246,.53)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.1)!important;
  }
  html[data-tessirve-theme] body.tessirve-theme .ms-site-header .ms-primary-nav.is-open .ms-site-menu>.ms-menu-parent.is-open>.ms-menu-parent-head {
    background:rgba(3,42,19,.46)!important;
    border-color:rgba(255,255,255,.7)!important;
  }
  /* La fila del header mide 58px; su flex line real era 48px.
     Este margen de apertura alinea la primera textura EXACTAMENTE debajo
     del header sin mover los cuatro controles aprobados. */
  html body.tessirve-theme .ms-site-header .ms-site-header-inner>.ms-primary-nav.is-open {
    margin-top:10px!important;
  }
}

/* La textura es la misma para todos, pero la luz de ambiente responde al
   switch. Mantiene hierba reconocible, incluso con clubes rojos o azules. */
@media(max-width:782px) {
  html[data-tessirve-theme]:not([data-tessirve-theme="neutral"]) body.tessirve-theme .ms-site-header .ms-site-header-inner>.ms-primary-nav.is-open {
    background-image:
      linear-gradient(180deg,rgba(2,24,12,.16),rgba(2,24,12,.29)),
      linear-gradient(125deg,
        color-mix(in srgb,var(--theme-primary) 38%,transparent),
        color-mix(in srgb,var(--theme-secondary) 30%,transparent)),
      url('tessirve-anime-grass-mobile-217.webp')!important;
  }
}