/**
 * Fondos menú superior + inferior por perfil.
 * LECHE v8 — tiras derivadas de mv-hero-leche.jpg (mismo universo visual que el dashboard).
 */

:root {
  --leche-shell-scrim-hdr: linear-gradient(
    180deg,
    rgba(15, 23, 42, 0.42) 0%,
    rgba(30, 41, 59, 0.22) 55%,
    rgba(51, 65, 85, 0.18) 100%
  );
  --leche-shell-scrim-nav: linear-gradient(
    0deg,
    rgba(15, 23, 42, 0.55) 0%,
    rgba(15, 23, 42, 0.32) 45%,
    rgba(30, 41, 59, 0.2) 100%
  );
}

/* ══ LECHE — par hero-derivado ══ */
html body[data-perfil='leche'] #app .hdr.hdr-serio-v1,
html body.manto-perfil-leche #app .hdr.hdr-serio-v1,
html body.manto-piel-leche #app .hdr.hdr-serio-v1,
html body.manto-demo-vitrina-leche #app .hdr.hdr-serio-v1,
html body[data-producto='leche'] #app .hdr.hdr-serio-v1,
html body.hdr-fondo-fon1 #app .hdr.hdr-serio-v1 {
  background-color: #64748b !important;
  background-image:
    var(--leche-shell-scrim-hdr),
    url('../icons/leche-menu-top-strip.jpg?v=20260709heroShell1') !important;
  background-size: auto, 100% 100% !important;
  background-position: center, center !important;
  background-repeat: no-repeat, no-repeat !important;
  border-bottom: 2px solid rgba(100, 116, 139, 0.85) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(15, 23, 42, 0.12),
    0 2px 8px rgba(15, 23, 42, 0.16) !important;
}

html body[data-perfil='leche'] .nav.nav--rail-cards,
html body.manto-perfil-leche .nav.nav--rail-cards,
html body.manto-piel-leche .nav.nav--rail-cards,
html body.manto-demo-vitrina-leche .nav.nav--rail-cards,
html body[data-producto='leche'] .nav.nav--rail-cards,
html body.hdr-fondo-fon1 .nav.nav--rail-cards {
  background-color: #334155 !important;
  background-image:
    var(--leche-shell-scrim-nav),
    url('../icons/leche-menu-bot-strip.jpg?v=20260709heroShell1') !important;
  background-size: auto, 100% 100% !important;
  background-position: center, center !important;
  background-repeat: no-repeat, no-repeat !important;
  border-top: 2px solid rgba(100, 116, 139, 0.85) !important;
  box-shadow:
    inset 0 -1px 0 rgba(255, 255, 255, 0.16),
    inset 0 1px 0 rgba(15, 23, 42, 0.1),
    0 -3px 10px rgba(15, 23, 42, 0.14) !important;
}

body.light[data-perfil='leche'] #app .hdr.hdr-serio-v1,
body.light.manto-perfil-leche #app .hdr.hdr-serio-v1,
body.light[data-producto='leche'] #app .hdr.hdr-serio-v1,
body.light.hdr-fondo-fon1 #app .hdr.hdr-serio-v1 {
  background-image:
    var(--leche-shell-scrim-hdr),
    url('../icons/leche-menu-top-strip.jpg?v=20260709heroShell1') !important;
  background-size: auto, 100% 100% !important;
}

body.light[data-perfil='leche'] .nav.nav--rail-cards,
body.light.manto-perfil-leche .nav.nav--rail-cards,
body.light[data-producto='leche'] .nav.nav--rail-cards,
body.light.hdr-fondo-fon1 .nav.nav--rail-cards {
  background-image:
    var(--leche-shell-scrim-nav),
    url('../icons/leche-menu-bot-strip.jpg?v=20260709heroShell1') !important;
  background-size: auto, 100% 100% !important;
}

@media (max-width: 767px) {
  html body.manto-perfil-leche .nav.nav--rail-cards,
  html body[data-perfil='leche'] .nav.nav--rail-cards,
  html body.manto-demo-vitrina-leche .nav.nav--rail-cards,
  html body[data-producto='leche'] .nav.nav--rail-cards {
    background-image:
      var(--leche-shell-scrim-nav),
      url('../icons/leche-menu-bot-strip.jpg?v=20260709heroShell1') !important;
    background-size: auto, 100% 100% !important;
  }
}

/* ══ CARNE — sin cambios ══ */
html body[data-perfil='carne'] .nav.nav--rail-cards,
html body.manto-perfil-carne .nav.nav--rail-cards,
html body.manto-piel-carne .nav.nav--rail-cards,
html body.manto-demo-vitrina-carne .nav.nav--rail-cards,
html body[data-producto='carne'] .nav.nav--rail-cards,
html body.hdr-fondo-hea2 .nav.nav--rail-cards {
  background: url('../icons/mv-menu-carne.jpg?v=20260708menuMv1') center center / cover no-repeat !important;
  background-image: url('../icons/mv-menu-carne.jpg?v=20260708menuMv1') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

html body[data-perfil='carne'] #app .hdr.hdr-serio-v1,
html body.manto-perfil-carne #app .hdr.hdr-serio-v1,
html body.manto-piel-carne #app .hdr.hdr-serio-v1,
html body.manto-demo-vitrina-carne #app .hdr.hdr-serio-v1,
html body[data-producto='carne'] #app .hdr.hdr-serio-v1,
html body.hdr-fondo-hea2 #app .hdr.hdr-serio-v1 {
  background:
    linear-gradient(rgba(0, 0, 0, 0.36), rgba(0, 0, 0, 0.36)),
    url('../icons/mv-menu-carne.jpg?v=20260708menuMv1') center center / cover no-repeat !important;
  background-size: auto, cover !important;
  background-position: center, center center !important;
  background-repeat: no-repeat, no-repeat !important;
}

@media (max-width: 767px) {
  body.light[data-perfil='carne'] .nav.nav--rail-cards,
  body.light.manto-perfil-carne .nav.nav--rail-cards,
  body.light[data-producto='carne'] .nav.nav--rail-cards {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.03) 100%),
      url('../icons/mv-menu-carne.jpg?v=20260708menuMv1') center center / cover no-repeat !important;
    background-size: auto, cover !important;
  }
}

body.light[data-perfil='carne'] #app .hdr.hdr-serio-v1,
body.light.manto-perfil-carne #app .hdr.hdr-serio-v1,
body.light[data-producto='carne'] #app .hdr.hdr-serio-v1 {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(0, 0, 0, 0.3) 100%),
    url('../icons/mv-menu-carne.jpg?v=20260708menuMv1') center center / cover no-repeat !important;
  background-size: auto, cover !important;
}