/* Fase 23 · Contraste del menú SmartNav móvil.
   Cargar después del tema y del sistema de diseño, sin tocar botones del desktop.
   Panel activo y Salir deben conservar fondo + texto contrastantes en dark mode. */
@media (max-width: 1199.98px) {
  /* Modo claro: asegurar que los estados seleccionados no hereden texto blanco. */
  html:not([data-theme="dark"]) body.stem-playground .site-header .epqa-nav-compact #mainNav .nav-link.active {
    background: #e1edff !important;
    border: 1px solid #9abcf0 !important;
    color: #123b79 !important;
  }
  html:not([data-theme="dark"]) body.stem-playground .site-header .epqa-nav-compact #mainNav .nav-link.active .nav-link-label {
    color: #123b79 !important;
    opacity: 1 !important;
  }
  html:not([data-theme="dark"]) body.stem-playground .site-header .epqa-nav-compact #mainNav .nav-link[data-nav="logout"] {
    background: #eef4ff !important;
    color: #163e7a !important;
    border: 1px solid #9fc1ef !important;
  }
  html:not([data-theme="dark"]) body.stem-playground .site-header .epqa-nav-compact #mainNav .nav-link[data-nav="logout"] .nav-link-label {
    color: #163e7a !important;
    opacity: 1 !important;
  }

  /* Panel seleccionado: alto contraste sin tarjetas blancas ni texto desvanecido. */
  html[data-theme="dark"] body.stem-playground .site-header .epqa-nav-compact #mainNav .nav-link.active,
  html[data-theme="dark"] body.stem-playground .site-header .epqa-nav-compact #mainNav .nav-link[aria-current="page"] {
    background: #264b7d !important;
    border: 1px solid #79a7e9 !important;
    color: #f6faff !important;
    box-shadow: inset 0 0 0 1px #3c6297 !important;
  }
  html[data-theme="dark"] body.stem-playground .site-header .epqa-nav-compact #mainNav .nav-link.active .nav-link-label,
  html[data-theme="dark"] body.stem-playground .site-header .epqa-nav-compact #mainNav .nav-link[aria-current="page"] .nav-link-label {
    color: #f6faff !important;
    opacity: 1 !important;
    text-shadow: none !important;
  }

  /* Salir heredaba background:#fff de style.css y texto claro del tema oscuro. */
  html[data-theme="dark"] body.stem-playground .site-header .epqa-nav-compact #mainNav .nav-link[data-nav="logout"] {
    background: #273f63 !important;
    border: 1px solid #819cc7 !important;
    color: #f3f8ff !important;
    box-shadow: none !important;
  }
  html[data-theme="dark"] body.stem-playground .site-header .epqa-nav-compact #mainNav .nav-link[data-nav="logout"] .nav-link-label {
    color: #f3f8ff !important;
    opacity: 1 !important;
    text-shadow: none !important;
  }
  html[data-theme="dark"] body.stem-playground .site-header .epqa-nav-compact #mainNav .nav-link[data-nav="logout"]:is(:hover,:focus-visible,:active) {
    background: #355780 !important;
    border-color: #a3c3f4 !important;
    color: #ffffff !important;
  }
  html[data-theme="dark"] body.stem-playground .site-header .epqa-nav-compact #mainNav .nav-link[data-nav="logout"]:is(:hover,:focus-visible,:active) .nav-link-label {
    color: #ffffff !important;
  }

  /* La marca y los iconos del menú no pierden opacidad por el estado activo. */
  html[data-theme="dark"] body.stem-playground .site-header .epqa-nav-compact #mainNav .nav-link:is(.active,[data-nav="logout"]) .nav-link-icon,
  html[data-theme="dark"] body.stem-playground .site-header .epqa-nav-compact #mainNav .nav-link:is(.active,[data-nav="logout"]) .nav-link-icon :is(img,svg) {
    opacity: 1 !important;
  }
  html[data-theme="dark"] body.stem-playground .site-header .epqa-nav-compact #mainNav .nav-link:is(.active,[data-nav="logout"]):focus-visible {
    outline: 3px solid #83d6ff !important;
    outline-offset: 2px !important;
  }
}