/* =====================================================================
   MADRE SELVA · ms-nav-l.css · v2 (QA local) · 09/10/2026 · PREPARADO, NO DESPLEGADO
   Navegación en L invertida continua (sidebar + topbar) para las TRES experiencias.
   Misma arquitectura; solo cambia la identidad cromática. Siempre con dorado champagne.
     · BASE     → verde esmeralda profundo + dorado   (todos los módulos generales)
     · PRO      → azul noche profundo + dorado        (html[data-ms-section="pro"])
     · PREMIUM  → bordó vino profundo + dorado        (html[data-ms-section="premium"])
   Solo color/bordes. No cambia alturas, anchos, posiciones de controles ni el área central de BASE.
   En móvil la L es topbar + barra inferior (bottombar), con la misma identidad.
   Tokens oficiales: --msp-green #0F3D32 · --msp-bordo #4B0E1E · --msp-gold #D4B074 (ms-palette.css).
   Se carga después de ms-visual-polish.css y antes de ms-pro-carbon.css.
   ===================================================================== */
html{
  --nl-1:#14503F; --nl-2:#0F3D32; --nl-3:#0A2C24;            /* BASE: esmeralda (degradado de la sidebar) */
  --nl-top:var(--nl-1);                                      /* topbar = arranque de la sidebar: L sin costura */
  --nl-gold:#D4B074; --nl-gold-2:#E8CF9C;                    /* dorado champagne oficial */
  --nl-text:#F4EFE6; --nl-text-2:#D9D2C4;
  --nl-chip:rgba(255,255,255,.07); --nl-chip-line:rgba(212,176,116,.42);
}
html[data-ms-section="pro"]{ --nl-1:#14244A; --nl-2:#0E1A36; --nl-3:#0A1328; }
html[data-ms-section="premium"]{ --nl-1:#5A1428; --nl-2:#4B0E1E; --nl-3:#350915; }

/* 1 · Sidebar (trazo vertical de la L) */
html .ms-sidebar{ --ms-sb1:var(--nl-1) !important; --ms-sb2:var(--nl-2) !important; --ms-sb3:var(--nl-3) !important;
  background:linear-gradient(180deg,var(--nl-1) 0%,var(--nl-2) 58%,var(--nl-3) 100%) !important;
  border-right:0 !important; box-shadow:inset -1px 0 0 rgba(212,176,116,.34) !important; color:var(--nl-text); }
html .ms-sidebar .side-nav a{ color:var(--nl-text-2); }
html .ms-sidebar .side-nav a:hover{ color:var(--nl-text); background:rgba(255,255,255,.05); }
html .ms-sidebar .side-nav a[aria-current="page"],
html .ms-sidebar .side-nav a.active{
  background:linear-gradient(90deg,rgba(212,176,116,.24),rgba(212,176,116,.05)) !important;
  box-shadow:inset 3px 0 0 var(--nl-gold) !important; color:#F6E7C4 !important; border-color:rgba(212,176,116,.45) !important; }
html .ms-sidebar .side-nav a svg{ color:inherit; }

/* 2 · Topbar (trazo horizontal de la L): mismo color que el arranque de la sidebar (--nl-1), filete dorado inferior.
   v2 (QA 09/10): la banda de ancho completo es un ::before (antes box-shadow + clip-path, que recortaba los menús
   Idioma / Mi cuenta). .ms-main recorta en X (overflow-x:clip: no crea contenedor de scroll, sticky sigue funcionando).
   No se cambia el ancho del borde existente (0 en escritorio, 1px ≤980px) para no alterar la geometría aprobada. */
html .ms-main{ overflow-x:clip; }
html .ms-topzone{
  background:var(--nl-top) !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; color:var(--nl-text) !important;
  border-bottom-color:rgba(212,176,116,.42) !important; box-shadow:none !important; clip-path:none !important;
  transition:background-color .35s ease; }
@media (min-width:981px){ html .ms-topzone{ position:relative; z-index:40; } }
html .ms-topzone::before{ content:""; position:absolute; top:0; bottom:0; left:-100vmax; right:-100vmax; z-index:-1; pointer-events:none;
  background:var(--nl-top); transition:background-color .35s ease; }
@media (min-width:981px){ html .ms-topzone::before{ box-shadow:inset 0 -1px 0 rgba(212,176,116,.42); } }
@supports not (overflow:clip){ html .ms-topzone::before{ left:0; right:0; } }
/* Controles propios de la L (no los menús desplegables, que conservan su superficie clara y legible) */
html .ms-topzone :is(.as-btn,.utility-btn,.account-link,.ms-langdd-trigger){
  background:var(--nl-chip) !important; color:var(--nl-text) !important; border:1px solid var(--nl-chip-line) !important; box-shadow:none !important; }
html .ms-topzone :is(.as-btn,.utility-btn,.account-link,.ms-langdd-trigger):hover,
html .ms-topzone .ms-langdd.open .ms-langdd-trigger, html .ms-topzone .account-dd.open .account-link,
html .ms-topzone .as-btn.is-active{ background:rgba(255,255,255,.12) !important; border-color:var(--nl-gold) !important; }
html .ms-topzone :is(.as-btn,.utility-btn,.account-link,.ms-langdd-trigger):focus-visible{ outline:3px solid var(--nl-gold-2) !important; outline-offset:2px; }
html .ms-topzone :is(.utility-btn,.account-link,.ms-langdd-trigger) > :is(span,b,small):not(.account-avatar){ color:inherit !important; }
html .ms-topzone :is(.utility-btn,.ms-langdd-trigger,.account-link) > svg{ color:var(--nl-gold-2); }
/* SELVA IA e IA PRO: nombre legible sobre la L (styles-v2 los pintaba verde/bordó, pensados para fondo claro) */
html .ms-topzone .as-btn .as-name{ color:var(--nl-text) !important; }
html .ms-topzone .as-btn.as-pro .as-name{ color:var(--nl-gold-2) !important; }
/* Insignias del topbar (IA PRO, notificaciones): dorado sobre la L */
html .ms-topzone :is(.as-btn,.utility-btn,.account-link) :is(.badge,.dot,.count){ background:var(--nl-gold) !important; color:#1A1306 !important; }

/* 3 · Móvil: topbar + bottombar con la misma identidad (la sidebar no se muestra) */
html .bottombar{ background:var(--nl-2) !important; backdrop-filter:none !important;
  border-top:1px solid rgba(212,176,116,.38) !important; box-shadow:none !important; }
html .bottombar :is(a,button){ color:var(--nl-text-2) !important; }
html .bottombar :is(a,button).active, html .bottombar :is(a,button)[aria-current="page"]{ color:#F6E7C4 !important; box-shadow:inset 0 2px 0 var(--nl-gold); }
/* v3: styles-v2 pinta de bordó el ícono activo (.bottombar .active svg), pensado para fondo claro: sobre la L era invisible (1,26:1) */
html .bottombar :is(a,button) svg{ color:inherit !important; }

/* 4 · PREMIUM: candado dorado + «Próximamente» al final (sin funciones activas) */
html .ms-sidebar .side-nav a[href="#/premium"] .ms-soon{ color:var(--nl-gold-2) !important; border-color:rgba(212,176,116,.5) !important; background:rgba(212,176,116,.12) !important; }

/* 5 · PREMIUM centro: propuesta FUTURA (no bordó uniforme). Marfil ejecutivo con módulos blancos y filete bordó. */
html[data-theme="light"][data-ms-section="premium"] .ms-main, html[data-theme="light"][data-ms-section="premium"] .ms-main > main.page{ background:#F5F0E8 !important; background-image:none !important; }
html[data-theme="light"][data-ms-section="premium"] :is(body,.ms-shell){ background:#F5F0E8 !important; }  /* v2: sin corte de tono bajo el contenido en tablet/móvil */
html[data-theme="light"][data-ms-section="premium"] .ev-premium{ background:#FFFDF8 !important; color:#2A1418 !important; border:1px solid #E6D9C7; border-top:4px solid #4B0E1E; }
html[data-theme="light"][data-ms-section="premium"] .ev-premium h2{ color:#4B0E1E !important; }
html[data-theme="light"][data-ms-section="premium"] .ev-premium p{ color:#5B4B45 !important; }

@media (prefers-reduced-motion:reduce){ html .ms-topzone, html .ms-topzone::before{ transition:none; } }

/* Identidad de asistentes aprobada 09/11/2026.
   Mismo componente y avatares; fondos diferenciados a primera vista.
   Solo botones de SELVA IA e IA PRO, no afectan utilidades, navegación ni órbitas.
   Los selectores llevan :not(#v5) y [data-open-assist] porque ms-identidad-v5.css pinta todas las
   píldoras del encabezado con html:not(#v5)[data-ms-xp] … (peso de ID); sin esto la regla no se aplica.
   Mismos colores en claro, oscuro, BASE, PRO, PREMIUM y MS Ejecutivo.
   Ajuste 09/11/2026 (titular): SELVA IA verde petróleo oscuro; IA PRO azul noche muy oscuro. */
html:not(#v5) body .ms-topzone .top-assist .as-btn.as-selva[data-open-assist]{
  background:linear-gradient(135deg,#0C4440 0%,#082F2C 60%,#041D1B 100%) !important;
  border-color:rgba(82,178,160,.62) !important;
  color:#F5FFF9 !important;
}
html:not(#v5) body .ms-topzone .top-assist .as-btn.as-pro[data-open-assist]{
  background:linear-gradient(135deg,#14234A 0%,#0A1430 60%,#040A1A 100%) !important;
  border-color:rgba(110,144,214,.6) !important;
  color:#F3F6FF !important;
}
html:not(#v5) body .ms-topzone .top-assist .as-btn.as-selva[data-open-assist] .as-name{color:#F5FFF9 !important}
html:not(#v5) body .ms-topzone .top-assist .as-btn.as-pro[data-open-assist] .as-name{color:#F3F6FF !important}
html:not(#v5) body .ms-topzone .top-assist .as-btn.as-selva[data-open-assist]:hover,
html:not(#v5) body .ms-topzone .top-assist .as-btn.as-selva[data-open-assist].is-active{
  background:linear-gradient(135deg,#125550,#0B3B37 60%,#062826) !important;
  border-color:#7FCDBE !important;
}
html:not(#v5) body .ms-topzone .top-assist .as-btn.as-pro[data-open-assist]:hover,
html:not(#v5) body .ms-topzone .top-assist .as-btn.as-pro[data-open-assist].is-active{
  background:linear-gradient(135deg,#1D3163,#101D40 60%,#070F25) !important;
  border-color:#93B0EC !important;
}


/* Aro neón premium del avatar (titular, 09/11/2026): SELVA IA verde claro · IA PRO azul claro.
   Ambos avatares conservan su imagen original (decisión del titular).
   Solo el círculo del avatar en los botones del encabezado (no el borde del botón, no las esferas orbitales). */
html:not(#v5) body .ms-topzone .top-assist .as-btn.as-selva[data-open-assist] .pro-ava{
  box-shadow:0 0 0 1.5px #5CF2B8, 0 0 6px 1px rgba(92,242,184,.55), 0 0 14px 2px rgba(92,242,184,.22) !important;
}
html:not(#v5) body .ms-topzone .top-assist .as-btn.as-pro[data-open-assist] .pro-ava{
  box-shadow:0 0 0 1.5px #7CC4FF, 0 0 6px 1px rgba(124,196,255,.55), 0 0 14px 2px rgba(124,196,255,.22) !important;
}
@media (prefers-reduced-motion:no-preference){
  html:not(#v5) body .ms-topzone .top-assist .as-btn[data-open-assist]:is(:hover,.is-active) .pro-ava{filter:brightness(1.06)}
}