/* Barra superior de la vista General (impeccable + Taste + ux-designer). Antes: barra blanca separada de la banda,
   las tres secciones repartidas a lo ancho (lejos del logo y entre sí), «Datos operativos» en 9 px apilado sobre el
   rol, y botones con recuadro. Ahora: la barra es del mismo marino que la banda, así barra y banda se leen como un
   solo encabezado (como la consola de AWS), con el logo en blanco; las secciones van juntas a la derecha del logo;
   el estado y el rol en una sola línea legible; cuenta e íconos sin recuadros. No cambia qué hay ni a dónde lleva. */
html body #app-shell#app-shell .topnav {
  background:var(--sp-marino, #232f3e) !important; border-bottom:1px solid rgba(255,255,255,.07) !important; box-shadow:none !important;
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
/* Logo en su versión blanca (la misma que usa producción sobre fondo oscuro), sin el recuadro blanco. */
html body #app-shell#app-shell .topnav :is(.brand-lockup, .brand-art) { background-color:transparent !important; box-shadow:none !important; border-top:0 !important; border-bottom:0 !important; border-left:0 !important; }
html body #app-shell#app-shell .topnav .brand-art { background-image:url("sellport-logo-blanco.png") !important; background-repeat:no-repeat !important; background-position:left center !important; background-size:contain !important; }
html body #app-shell#app-shell .topnav .brand-art { border-right:0 !important; }
html body #app-shell#app-shell .topnav .brand-lockup { padding-right:20px; margin-right:8px; border-right:1px solid rgba(255,255,255,.12) !important; }

/* Secciones: juntas, junto al logo. */
@media (min-width:901px) {
  html body #app-shell#app-shell #navigation.topnav-links { justify-content:flex-start !important; gap:4px !important; flex:1 1 auto; }
  html body #app-shell#app-shell #navigation a.plain-link, html body #app-shell#app-shell #navigation .nav-dropdown-toggle {
    height:36px; padding:0 12px !important; border-radius:8px !important; color:#c6ccd5 !important; background:none !important; font-weight:500 !important;
    transition:background-color var(--duration-quick, 150ms) ease-out, color var(--duration-quick, 150ms) ease-out;
  }
  html body #app-shell#app-shell #navigation a.plain-link i, html body #app-shell#app-shell #navigation .nav-dropdown-toggle i { color:#9aa3b0 !important; }
  html body #app-shell#app-shell #navigation a.plain-link:hover, html body #app-shell#app-shell #navigation .nav-dropdown-toggle:hover { background:rgba(255,255,255,.08) !important; color:#fff !important; }
  html body #app-shell#app-shell #navigation a.plain-link.active, html body #app-shell#app-shell #navigation .nav-dropdown-toggle.active {
    background:rgba(255,255,255,.12) !important; color:#fff !important; font-weight:600 !important; box-shadow:none !important;
  }
  html body #app-shell#app-shell #navigation a.plain-link.active i, html body #app-shell#app-shell #navigation .nav-dropdown-toggle.active i { color:var(--sp-naranja-claro, #ff8a3d) !important; }
}

/* Lado derecho: estado y rol en una línea, cuenta y botones sin recuadro. */
html body #app-shell#app-shell .topnav-actions { gap:6px !important; border-left:1px solid rgba(255,255,255,.12) !important; }
html body #app-shell#app-shell .status-stack { flex-direction:row !important; align-items:center; gap:8px !important; margin-right:6px; }
html body #app-shell#app-shell .status-stack .live-indicator { background:none !important; border:0 !important; padding:0 !important; font-size:12.5px !important; font-weight:500 !important; color:#c6ccd5 !important; letter-spacing:0 !important; text-transform:none !important; white-space:nowrap; }
html body #app-shell#app-shell .status-stack .live-indicator i { width:7px !important; height:7px !important; background:#3fbf7f !important; box-shadow:0 0 0 3px rgba(63,191,127,.18) !important; }
html body #app-shell#app-shell .topnav .role { background:rgba(255,255,255,.08) !important; color:#e3e6ea !important; border:0 !important; font-size:12px !important; font-weight:500 !important; padding:3px 9px !important; }
html body #app-shell#app-shell .account-chip { background:none !important; border:0 !important; box-shadow:none !important; border-radius:999px !important; padding:3px 12px 3px 3px !important; transition:background-color var(--duration-quick, 150ms) ease-out; }
html body #app-shell#app-shell .account-chip:hover { background:rgba(255,255,255,.08) !important; }
html body #app-shell#app-shell .account-avatar { background:var(--sp-naranja, #ff6a1a) !important; color:#fff !important; font-weight:700 !important; border:0 !important; }
html body #app-shell#app-shell .account-name { color:#e3e6ea !important; font-weight:500 !important; }
html body #app-shell#app-shell #admin-menu > .nav-dropdown-toggle.icon-only, html body #app-shell#app-shell .topnav-logout {
  width:36px !important; height:36px !important; display:grid !important; place-items:center; border:0 !important; border-radius:8px !important;
  background:none !important; color:#c6ccd5 !important; box-shadow:none !important; transition:background-color var(--duration-quick, 150ms) ease-out, color var(--duration-quick, 150ms) ease-out;
}
html body #app-shell#app-shell #admin-menu > .nav-dropdown-toggle.icon-only:hover, html body #app-shell#app-shell .topnav-logout:hover { background:rgba(255,255,255,.08) !important; color:#fff !important; }
html body #app-shell#app-shell #admin-menu > .nav-dropdown-toggle.icon-only i, html body #app-shell#app-shell .topnav-logout i { color:inherit !important; }

/* Foco con teclado visible sobre el marino. */
html body #app-shell#app-shell .topnav :is(a, button, .account-chip):focus-visible { outline:0 !important; box-shadow:0 0 0 2px var(--sp-marino, #232f3e), 0 0 0 4px var(--sp-naranja-claro, #ff8a3d) !important; }

/* Pantallas angostas: el botón de menú y los íconos también sobre el marino. */
@media (max-width:900px) {
  html body #app-shell#app-shell .topnav :is(button, .account-chip) { color:#e3e6ea !important; background:none !important; border-color:rgba(255,255,255,.14) !important; }
  html body #app-shell#app-shell .topnav .account-avatar { color:#fff !important; }
}
@media (prefers-reduced-motion: reduce) {
  html body #app-shell#app-shell .topnav :is(a, button, .account-chip) { transition:none !important; }
}

/* Las secciones traían margen automático a los lados (por eso quedaban repartidas a lo ancho). */
@media (min-width:901px) { html body #app-shell#app-shell #navigation a.plain-link { margin:0 !important; } }

/* Submenú de una sección (p. ej. Inventarios): franja del mismo marino, un tono más hondo, con sus opciones a la
   izquierda bajo el menú, en lugar de la franja blanca que tapaba el saludo. */
html body .subbarra { background:var(--sp-marino-hondo, #161e2d) !important; border-bottom:1px solid rgba(255,255,255,.07) !important; justify-content:flex-start !important; gap:4px !important; padding-left:200px !important; }
html body .subbarra a.plain-link { margin:0 !important; flex:0 0 auto !important; color:#c6ccd5 !important; background:none !important; border-radius:8px !important; height:34px; padding:0 12px !important; }
html body .subbarra a.plain-link i { color:#9aa3b0 !important; }
html body .subbarra a.plain-link:hover { background:rgba(255,255,255,.08) !important; color:#fff !important; }
html body .subbarra a.plain-link.active { background:rgba(255,255,255,.12) !important; color:#fff !important; }
html body .subbarra a.plain-link.active i { color:var(--sp-naranja-claro, #ff8a3d) !important; }
@media (max-width:900px) { html body .subbarra { padding-left:16px !important; } }

/* Íconos del menú (Taste: un solo juego de contorno, gris, 14-20 px, antes de la etiqueta). «Análisis comercial» pasa
   de una cuadrícula (que se lee como «diseño de página») a una gráfica de barras; Inventarios (cajas) y Categorías
   (etiquetas) ya correspondían. En la sección activa, sobre oscuro, se marca por brillo: ícono y texto en blanco. */
@media (min-width:901px) {
  html body #app-shell#app-shell #navigation a.plain-link > i:first-child, html body #app-shell#app-shell #navigation .nav-dropdown-toggle > i:first-child { font-size:15px !important; width:auto !important; }
  html body #app-shell#app-shell #navigation a.plain-link.active i, html body #app-shell#app-shell #navigation .nav-dropdown-toggle.active i { color:#fff !important; }
}
html body .subbarra a.plain-link > i:first-child { font-size:15px !important; }
html body .subbarra a.plain-link.active i { color:#fff !important; }

/* Separación entre secciones (impeccable): aire en lugar de líneas (32 px entre secciones). Entre destinos hermanos una línea vertical
   agrega ruido y los parte en piezas; un hueco de 12 px y un poco más de relleno los separa y los mantiene como un
   solo grupo junto al logo. Las líneas se quedan sólo donde cambia de tipo: logo | secciones | cuenta. */
@media (min-width:901px) {
  html body #app-shell#app-shell #navigation.topnav-links { gap:32px !important; padding-left:12px; }
  html body #app-shell#app-shell #navigation a.plain-link, html body #app-shell#app-shell #navigation .nav-dropdown-toggle { padding:0 14px !important; gap:8px; }
}
html body .subbarra { gap:12px !important; }

/* Distribución pedida: las tres secciones repartidas con el mismo espacio entre ellas en todo el tramo libre entre
   el logo y la cuenta (space-evenly), sin márgenes automáticos sueltos; con un mínimo de 32 px si la ventana es angosta. */
@media (min-width:901px) {
  html body #app-shell#app-shell #navigation.topnav-links { justify-content:space-evenly !important; gap:32px !important; padding:0 12px !important; }
}

/* Menús con muchas secciones (Mercado Libre tiene 7): siguen repartidas a lo ancho, pero con menos relleno y sin el
   hueco mínimo de 32 px del General, para que quepan todas. */
@media (min-width:901px) {
  html body #app-shell#app-shell #navigation.topnav-links:has(> :nth-child(5)) { gap:2px !important; padding:0 4px !important; min-width:0; }
  html body #app-shell#app-shell #navigation.topnav-links:has(> :nth-child(5)) :is(a.plain-link, .nav-dropdown-toggle) { padding:0 9px !important; gap:6px; }
}
html body #app-shell#app-shell .topnav .role { text-transform:none !important; letter-spacing:0 !important; }

/* Con 6 o más secciones (Mercado Libre) el menú va sólo con texto para que quepan todas; las flechas de los menús
   que despliegan se quedan. */
@media (min-width:901px) {
  html body #app-shell#app-shell #navigation.topnav-links:has(> :nth-child(6)) :is(a.plain-link, .nav-dropdown-toggle) > i:first-child { display:none !important; }
}

/* Menú con 6 o más secciones en ventanas medianas: «Datos operativos» queda sólo como el punto verde (el texto va en
   su título) y la cuenta sólo con el avatar, para que el menú quepa sin barra de scroll. */
@media (min-width:901px) and (max-width:1700px) {
  html body #app-shell#app-shell .topnav:has(#navigation > :nth-child(6)) .status-stack .live-indicator { font-size:0 !important; gap:0 !important; }
  html body #app-shell#app-shell .topnav:has(#navigation > :nth-child(6)) .account-name { display:none !important; }
  html body #app-shell#app-shell .topnav:has(#navigation > :nth-child(6)) .account-chip { padding:3px !important; }
}
html body #app-shell#app-shell #navigation.topnav-links { scrollbar-width:none; }
html body #app-shell#app-shell #navigation.topnav-links::-webkit-scrollbar { display:none; }


/* Sub-barra de subcategorías (ux-designer + impeccable, 2026-11-01). Sigue siendo la franja horizontal bajo el menú,
   pero se abre con clic y se va al elegir; las páginas arrancan debajo de su categoría, en botones de 40 px con letra
   de 15 px; la categoría abierta se queda marcada; una sombra la separa del contenido mientras está abierta. */
@media (min-width:901px) {
  html body .subbarra.abierta { box-shadow:0 16px 30px -18px rgba(10,14,24,.6) !important; animation:sp-sub-baja var(--duration-fast, 250ms) var(--ease-smooth-out, cubic-bezier(.22,1,.36,1)) both !important; }
  html body .subbarra { padding-left:0 !important; padding-right:0 !important; }
  html body .subbarra .subbarra-items { flex:1 1 auto; justify-content:flex-start !important; gap:6px !important; height:56px !important; padding-left:var(--sub-x, 24px) !important; padding-right:16px !important; }
  html body .subbarra a.plain-link { height:40px !important; align-self:center; padding:0 14px !important; border-radius:10px !important; font-size:15px !important; font-weight:500 !important; box-shadow:none !important; }
  html body .subbarra a.plain-link.active { font-weight:600 !important; }
  html body .subbarra a.plain-link:focus-visible { outline:2px solid var(--sp-naranja-claro, #ff8a3d) !important; outline-offset:-2px; }
  html body #app-shell#app-shell #navigation .nav-cat.abierta { background:rgba(255,255,255,.14) !important; color:#fff !important; }
  html body #app-shell#app-shell #navigation .nav-cat .nav-cat-flecha { transition:transform var(--duration-quick, 150ms) ease-out; }
  html body #app-shell#app-shell #navigation .nav-cat.abierta .nav-cat-flecha { transform:rotate(180deg); }
}
@keyframes sp-sub-baja { from { opacity:0; transform:translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { html body .subbarra.abierta { animation:none !important; } html body #app-shell#app-shell #navigation .nav-cat .nav-cat-flecha { transition:none; } }

/* Ajuste (1-nov, tras verla): la barra ya no tapa el título (la página baja mientras está abierta) y las páginas van
   centradas con más aire entre ellas, en lugar de amontonadas desde la categoría. */
@media (min-width:901px) {
  html body .subbarra .subbarra-items { width:100% !important; max-width:none !important; justify-self:stretch !important; justify-content:center !important; gap:28px !important; padding-left:24px !important; padding-right:24px !important; }
  html body #app-shell > main > .topbar { transition:margin-top var(--duration-fast, 250ms) var(--ease-smooth-out, cubic-bezier(.22,1,.36,1)); }
  html body.sp-sub-abierta #app-shell > main > .topbar, html body.sp-sub-abierta.modo-general #app-shell #content { margin-top:56px !important; }
}
@media (prefers-reduced-motion: reduce) { html body #app-shell > main > .topbar { transition:none; } }
@media (min-width:901px) { html body .subbarra:not([hidden]) { display:block !important; } }