/*
 * TESSIRVE Theme 5.17.218 — Menú móvil cromático y a ancho de pantalla.
 * Extiende 5.17.217, sin modificar el header, escritorio, Core o JavaScript.
 * CSS inicial: las variables de color y data-tessirve-color-mode están ya
 * establecidas en <head> por tessirve_theme_early_bootstrap_214().
 */
@media (max-width:782px) {
  /* La fila padre deja 16px de padding a cada lado. Expandir el menú hasta
     los bordes físicos, pero mantener 12px internos para no ahogar botones. */
  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;
    flex:0 0 calc(100% + 32px)!important;
    width:calc(100% + 32px)!important;
    min-width:0!important;
    max-width:none!important;
    margin-left:-16px!important;
    margin-right:-16px!important;
    left:auto!important;
    right:auto!important;
  }
  html[data-tessirve-theme][data-tessirve-color-mode] body.tessirve-theme .ms-site-header .ms-site-header-inner > .ms-primary-nav.is-open {
    /* Separación de la franja verde: la misma corrección 217, sin inventar huecos. */
    margin-top:10px!important;
    padding:10px 12px 12px!important;
    border-radius:0 0 16px 16px!important;
    background-image:
      linear-gradient(180deg,rgba(8,17,15,.13) 0%,rgba(8,17,15,.24) 100%),
      linear-gradient(125deg,var(--theme-primary,#16884a),var(--theme-secondary,#0a5b35)),
      url('tessirve-anime-grass-mobile-217.webp')!important;
    background-blend-mode:normal,color,normal!important;
    background-position:center,center,center top!important;
    background-size:cover,cover,cover!important;
    background-repeat:no-repeat!important;
    background-color:var(--theme-primary,#16884a)!important;
    filter:none!important;
  }
  /* Evitar que antiguos gradientes verdes fijos ganen sobre el pasto cromático. */
  html body.tessirve-theme .ms-site-header .ms-primary-nav.is-open .ms-mobile-quicklinks {
    background:rgba(11,17,16,.12)!important;
    border:1px solid rgba(255,255,255,.35)!important;
    box-shadow:none!important;
  }
  html body.tessirve-theme .ms-site-header .ms-primary-nav.is-open .ms-site-menu {
    background:transparent!important;
    box-shadow:none!important;
  }
  html body.tessirve-theme .ms-site-header .ms-primary-nav.is-open .ms-mobile-quicklink {
    background:linear-gradient(180deg,rgba(252,255,254,.22),rgba(255,255,255,.11))!important;
    border-color:rgba(255,255,255,.53)!important;
    box-shadow:inset 0 1px rgba(255,255,255,.13)!important;
  }
  html body.tessirve-theme .ms-site-header .ms-primary-nav.is-open .ms-menu-parent>.ms-menu-parent-head,
  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(249,253,251,.19),rgba(250,254,252,.11))!important;
    border-color:rgba(255,255,255,.53)!important;
  }
  html body.tessirve-theme .ms-site-header .ms-primary-nav.is-open .ms-menu-parent.is-open>.ms-menu-parent-head,
  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(12,19,22,.38)!important;
    border-color:rgba(255,255,255,.66)!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(15,19,22,.21)!important;
  }
  html body.tessirve-theme .ms-site-header .ms-primary-nav.is-open .ms-mobile-submenu-tab {
    background:rgba(250,255,251,.19)!important;
    border-color:rgba(255,255,255,.36)!important;
  }
}

@media(max-width:782px){
  /* El modo oscuro se oscurece de VERDAD, sin perder el color de camiseta. */
  html[data-tessirve-theme][data-tessirve-color-mode="dark"] body.tessirve-theme .ms-site-header .ms-site-header-inner > .ms-primary-nav.is-open {
    background-image:
      linear-gradient(180deg,rgba(4,9,13,.51),rgba(4,9,13,.63)),
      linear-gradient(125deg,var(--theme-primary,#16884a),var(--theme-secondary,#0a5b35)),
      url('tessirve-anime-grass-mobile-217.webp')!important;
    background-blend-mode:normal,color,normal!important;
    border-bottom:1px solid rgba(225,237,239,.16)!important;
    box-shadow:0 13px 24px rgba(0,0,0,.38)!important;
  }
  html[data-tessirve-color-mode="dark"] body.tessirve-theme .ms-site-header .ms-primary-nav.is-open .ms-mobile-quicklinks {
    background:rgba(4,10,15,.28)!important;
    border-color:rgba(255,255,255,.21)!important;
  }
  html[data-tessirve-color-mode="dark"] body.tessirve-theme .ms-site-header .ms-primary-nav.is-open .ms-mobile-quicklink {
    background:linear-gradient(180deg,rgba(8,13,20,.39),rgba(8,13,20,.23))!important;
    border-color:rgba(241,248,253,.26)!important;
    box-shadow:inset 0 1px rgba(255,255,255,.075)!important;
  }
  html[data-tessirve-color-mode="dark"] body.tessirve-theme .ms-site-header .ms-primary-nav.is-open .ms-menu-parent>.ms-menu-parent-head,
  html[data-tessirve-color-mode="dark"][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(9,15,23,.48),rgba(9,15,23,.35))!important;
    border-color:rgba(247,251,255,.26)!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,8,16,.35)!important;
  }
  html[data-tessirve-color-mode="dark"] body.tessirve-theme .ms-site-header .ms-primary-nav.is-open .ms-mobile-submenu-tab {
    background:rgba(8,14,22,.46)!important;
    border-color:rgba(245,250,255,.23)!important;
  }
}