/*
 * Menú de IW Proxy — barra lateral (PF0002 R37, §1.3.i). Se carga sobre cuatro aplicaciones distintas
 * (portal, intranet3, SSO Interface, CRM): todo cuelga de .iwsn y trae sus propios tokens (--sn-*), porque las
 * otras apps no cargan app.css. R59 (elección 1B): son los valores del plugin iway-frontend v2.0.0
 * (DESIGN.md § Canonical Token Map), ya no la paleta AA de R38. Claro y oscuro por data-iwsn-theme (sale de
 * 'intraway-theme'). position: fixed — se superpone, nunca corre el layout del componente.
 * R60 (operador: «todo tiene que tener el mismo estilo»): las filas son el ítem de navegación del plugin
 * (DESIGN.md § Navigation Item), las MISMAS medidas que la barra lateral de módulo de intranet3
 * (public/css/module-sidebar.css): 44px, 0 16px, Montserrat 500 13px t2, ícono 20px t2 (R61), activo naranja 600
 * con fondo .08/.12 y la barra de 3px. Las pantallas de un producto quedan sangradas (jerarquía).
 */
.iwsn {
  --sn-surface: #FFFFFF; --sn-sidebar: #F8F9FB; --sn-hover: #EBEEF4; --sn-border: #E2E8F0;
  --sn-t1: #0F172A; --sn-t2: #475569; --sn-t3: #64748B; --sn-t4: #94A3B8;
  --sn-orange: #FF671D; --sn-active: rgba(255,103,29,.08); --sn-focus: #475569; /* t2: [33], 3:1 */
  --sn-shadow: 0 20px 60px rgba(15,23,42,0.18);
  position: fixed; left: 0; top: 57px; z-index: 2147483000;
  width: 240px; height: calc(100vh - 57px); box-sizing: border-box; /* R72: el ancho de la barra lateral del DM (antes 288) */
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--sn-sidebar); color: var(--sn-t2);
  border-right: 1px solid var(--sn-border); box-shadow: var(--sn-shadow);
  font-family: 'Roboto', sans-serif; font-size: 13px; line-height: 1.35; text-align: left;
  -webkit-font-smoothing: antialiased;
  transform: translateX(-8px); opacity: 0; transition: transform 200ms cubic-bezier(0.16,1,0.3,1), opacity 200ms;
}
.iwsn[hidden] { display: none !important; }
.iwsn.is-open { transform: none; opacity: 1; }
.iwsn[data-iwsn-theme="dark"] {
  --sn-surface: #161C27; --sn-sidebar: #0B1017; --sn-hover: #1E2A3D; --sn-border: #1E2A3D;
  --sn-t1: #E8EDF5; --sn-t2: #94A3B8; --sn-t3: #7B8FAD; --sn-t4: #4E6280; --sn-orange: #FF671D;
  --sn-active: rgba(255,103,29,.12); --sn-focus: #94A3B8; --sn-shadow: 0 20px 60px rgba(0,0,0,0.60);
}
.iwsn *, .iwsn *::before, .iwsn *::after { box-sizing: border-box; }
.iwsn-list { list-style: none; margin: 0; padding: 6px 0 16px; overflow-y: auto; flex: 1; }
.iwsn-list::-webkit-scrollbar { width: 5px; }
.iwsn-list::-webkit-scrollbar-thumb { background: var(--sn-border); border-radius: 3px; }
.iwsn-prod { margin: 0; padding: 0; }
.iwsn-row { display: flex; align-items: center; position: relative; }
.iwsn-prod-link {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px;
  color: var(--sn-t2); text-decoration: none; font: 500 13px/1.3 'Montserrat', sans-serif; transition: background 100ms, color 100ms;
}
.iwsn-prod-link:hover { background: var(--sn-hover); color: var(--sn-t1); text-decoration: none; }
.iwsn-prod.is-current > .iwsn-row { background: var(--sn-active); }
.iwsn-prod.is-current > .iwsn-row::before {
  content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; background: var(--sn-orange); border-radius: 0 2px 2px 0;
}
.iwsn-prod.is-current .iwsn-prod-link { color: var(--sn-orange); font-weight: 600; }
/* R72: a 240 px un nombre largo («Infrastructure Administration») pasa a dos líneas dentro de la fila de 44 en lugar de
   cortarse con «…»: el nombre entero sigue a la vista. */
.iwsn-name { min-width: 0; white-space: normal; overflow-wrap: break-word; }
/* R61 (operador: «iconos más sobrios»): el ícono del producto, monocromo neutro (t2, 20px), sin la placa de
   color por producto; el acento sólo en el activo, como en cualquier ítem de nav. */
.iwsn-badge {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 20px; height: 20px;
  color: var(--sn-t2); background: none;
}
.iwsn-prod.is-current .iwsn-badge { color: var(--sn-orange); }
.iwsn-toggle {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 32px; height: 32px; margin-right: 8px;
  border: 0; border-radius: 8px; background: transparent; color: var(--sn-t3); cursor: pointer; transition: background 100ms;
}
.iwsn-toggle:hover { background: var(--sn-hover); color: var(--sn-t1); }
.iwsn-toggle svg { transition: transform 150ms; }
.iwsn-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.iwsn-subs { list-style: none; margin: 0; padding: 0 0 4px; }
.iwsn-subs[hidden] { display: none !important; }
/* R51: la sección que se expande entra en 120 ms (<= 150); con prefers-reduced-motion, sin animación. */
.iwsn-subs:not([hidden]) { animation: iwsn-expand 120ms ease-out; }
@keyframes iwsn-expand { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
/* Pantalla de un producto: el mismo ítem de nav, sangrado (el ícono, en la columna del nombre del producto). */
.iwsn-sec {
  position: relative; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px 0 46px;
  color: var(--sn-t2); text-decoration: none; font: 500 13px/1.3 'Montserrat', sans-serif; transition: background 100ms, color 100ms;
}
.iwsn-sec-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 20px; color: var(--sn-t2); } /* R61: t2 */
.iwsn-sec:hover .iwsn-sec-icon { color: inherit; }
.iwsn-sec:hover { background: var(--sn-hover); color: var(--sn-t1); text-decoration: none; }
.iwsn-sec.is-current { color: var(--sn-orange); font-weight: 600; background: var(--sn-active); }
.iwsn-sec.is-current .iwsn-sec-icon { color: var(--sn-orange); }
.iwsn-sec.is-current::before {
  content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; background: var(--sn-orange); border-radius: 0 2px 2px 0;
}
/* R79: el rótulo de un subgrupo de pantallas (Observability: Red, Direccionamiento, …). No es un link. t2 a 11px: AA. */
.iwsn-group { list-style: none; padding: 10px 16px 2px 46px; font: 600 11px/1.4 'Montserrat', sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--sn-t2); }
.iwsn-empty { padding: 6px 16px 6px 46px; font: 400 12px 'Roboto', sans-serif; color: var(--sn-t3); list-style: none; }
/* Foco: el token de foco del plugin (--c-border-focus), igual que en intranet3. */
.iwsn a:focus-visible, .iwsn button:focus-visible { outline: 2px solid var(--sn-focus); outline-offset: -2px; box-shadow: none; }

/* Portal: la barra fija a la izquierda en lugar de las tarjetas (supuesto de §1.3.i). */
.iwsn.iwsn--fixed { box-shadow: none; transform: none; opacity: 1; transition: none; z-index: 40; }
html.iwsn-fixed-on .iwp-main-shift { margin-left: 240px; }
@media (max-width: 900px) {
  .iwsn.iwsn--fixed { position: static; width: auto; height: auto; border-right: 0; }
  html.iwsn-fixed-on .iwp-main-shift { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .iwsn, .iwsn-toggle svg { transition: none; } .iwsn-subs:not([hidden]) { animation: none; } }