/* generado por demo_overrides.py: public/css/suite-bar.css + overrides/portal.css (R60) */
/*
 * La barra de la suite IPS — UNA hoja para todas las pantallas (PF0002 R59 + R60).
 *
 * R60 (operador, 2026-11-04): «la visual no es consistente en todas las pantallas, todo tiene que tener el
 * mismo estilo». Esta hoja es la única que dibuja la barra: la cargan las vistas de intranet3
 * (partials/header.ejs, sobre partials/navbar.ejs) y el portal IW Proxy (demo/iw-proxy/demo_overrides.py la
 * publica delante de portal.css; portal.js arma el mismo árbol de clases). Ni app.css ni portal.css tienen
 * reglas de barra: si una pantalla se ve distinta, el árbol de clases es distinto, no la hoja.
 *
 * Fuente: plugin iway-frontend v2.0.0 (DESIGN.md no tiene sección de barra superior: la barra sigue la fila
 * de la marca — superficie, texto t1, borde de 1px; misma convención que la SSO Interface) y la capa
 * intraway-ips-shell §1-§3. Todo color es un token --c-* (app.css / portal.css, copia del bootstrap del
 * plugin), así que el tema oscuro no necesita reglas propias, salvo la sombra (no es un color).
 *
 * Árbol:
 *   .iw-bar > .iw-bar-inner > .iw-bar-left  > .iw-bar-logo > img
 *                                           > .iw-bar-home (casita)  .iw-bar-sep
 *                                           > .iw-bar-section > .iw-bar-tile > svg (ícono de la sección) + .iw-bar-section-name
 *                           > .iw-bar-right > .iw-bar-btn (tenant, especificación) · .iw-bar-seg > .iw-bar-seg-opt
 *                                             (Entorno, idioma) · .iw-bar-icon-btn (tema) · .iw-bar-user
 * Medidas: las de la barra de la SSO Interface (src/index.css .iw-topbar*, R60: las apps iguales) — barra 56px;
 * botones de ícono 34px; píldoras y segmentados con borde de 1px --c-border, radio 8; Montserrat 600 12px (11px
 * con .04em en los segmentados); íconos: casita 19, tema 18, en píldoras y segmentados 14, chevron 13; trazo 1,75.
 */

.iw-bar {
  position: sticky;
  top: 0;
  z-index: 1030;
  display: block;
  min-height: 56px;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
  color: var(--c-t1);
  font-family: 'Roboto', sans-serif;
  font-size: 13px;
  line-height: 1.2;
}
.iw-bar .iw-bar-inner {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  min-height: 56px;
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0 16px;
  box-sizing: border-box;
}
.iw-bar a { color: inherit; text-decoration: none; }
.iw-bar svg { flex-shrink: 0; }

/* ── izquierda: logo · casita · separador · tile + sección ── */
.iw-bar .iw-bar-left { display: flex; align-items: center; gap: 10px; min-width: 0; margin: 0; padding: 0; }
.iw-bar .iw-bar-logo { display: inline-flex; align-items: center; margin: 0; padding: 0; }
/* El logo de la suite es naranja sobre transparente: contrasta con la superficie en los dos temas. */
.iw-bar .iw-bar-logo img { display: block; height: 32px; width: auto; filter: none; }
.iw-bar .iw-bar-sep { display: inline-block; flex-shrink: 0; width: 1px; height: 28px; background: var(--c-border); }
.iw-bar .iw-bar-section {
  display: inline-flex; align-items: center; gap: 10px; min-width: 0;
  padding: 3px 8px 3px 3px; border-radius: 8px; color: var(--c-t1);
  transition: background 100ms;
}
a.iw-bar-section:hover, a.iw-bar-section:focus-visible { background: var(--c-hover); color: var(--c-t1); }
/* R61 (operador, 2026-11-04; reemplaza la elección 5A): el tile es el ícono SOBRIO de la sección, el mismo que
   tiene en la barra lateral de IW Proxy — ícono t2 de 20px sobre un tile neutro (--c-s2), sin degradé y sin el
   iso. Excepción IPS a «never a Lucide glyph as identity mark» (capa intraway-ips-shell §0). */
.iw-bar .iw-bar-tile {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 36px; height: 36px; border-radius: 8px; background: var(--c-s2); box-shadow: none; color: var(--c-t2);
}
.iw-bar .iw-bar-tile svg { width: 20px; height: 20px; color: var(--c-t2); }
/* El nombre de la app al lado de la marca: Montserrat 600 13px (DESIGN.md § Brand > Rules). */
.iw-bar .iw-bar-section-name {
  font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 13px; line-height: 1.2;
  letter-spacing: 0; white-space: nowrap; color: var(--c-t1);
}

/* ── derecha ── */
.iw-bar .iw-bar-right {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 0 auto; padding: 0; min-width: 0;
}

/* Botón de sólo ícono (casita, tema): 32×32, transparente, ícono t2; hover = superficie de hover. */
.iw-bar .iw-bar-home,
.iw-bar .iw-bar-icon-btn {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 34px; height: 34px; margin: 0; padding: 0;
  border: 0; border-radius: 8px; background: transparent; box-shadow: none;
  color: var(--c-t2); cursor: pointer; text-decoration: none; font: inherit;
  transition: background 100ms, color 100ms;
}
.iw-bar .iw-bar-home:hover, .iw-bar .iw-bar-icon-btn:hover { background: var(--c-hover); color: var(--c-t1); }

/* Control con texto (selector de tenant, enlace a la especificación): el disparador del context switcher del
   plugin, como la .iw-topbar-pill de la SSO — superficie, borde de 1px --c-border, radio 8, texto t1, ícono t3,
   Montserrat 600 12px. Con rótulo: fuera de la regla de 3:1 del borde (WCAG 1.4.11). */
.iw-bar .iw-bar-btn {
  display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
  margin: 0; padding: 6px 12px; box-sizing: border-box;
  border: 1px solid var(--c-border); border-radius: 8px; background: var(--c-surface); box-shadow: none;
  color: var(--c-t1); cursor: pointer; text-decoration: none; white-space: nowrap;
  font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 12px; line-height: 1; letter-spacing: 0;
  transition: background 100ms;
}
.iw-bar .iw-bar-btn::after { display: none; } /* sin el caret de .dropdown-toggle: el chevron es un ícono */
.iw-bar .iw-bar-btn svg { color: var(--c-t3); }
.iw-bar .iw-bar-btn:hover,
.iw-bar .iw-bar-btn[aria-expanded="true"] { background: var(--c-hover); color: var(--c-t1); border-color: var(--c-border); }
.iw-bar .iw-bar-btn > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* Segmentado de una sola opción (Entorno, idioma; capa §3): riel --c-s2; el elegido elevado sobre
   --c-surface con sombra; los demás en t2 (t3 sobre s2 no llega a AA, DESIGN.md § Contrast). */
.iw-bar .iw-bar-seg {
  display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0;
  margin: 0; padding: 2px; box-sizing: border-box;
  border: 1px solid var(--c-border); border-radius: 8px; background: var(--c-s2);
}
.iw-bar .iw-bar-seg-opt {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  margin: 0; padding: 6px 9px; box-sizing: border-box;
  border: 0; border-radius: 6px; background: transparent; box-shadow: none;
  color: var(--c-t2); cursor: pointer; white-space: nowrap;
  font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 11px; line-height: 1; letter-spacing: .04em;
  transition: background 100ms, color 100ms;
}
.iw-bar .iw-bar-seg-opt:hover { background: var(--c-hover); color: var(--c-t1); }
.iw-bar .iw-bar-seg-opt.is-active,
.iw-bar .iw-bar-seg-opt[aria-checked="true"] {
  background: var(--c-surface); color: var(--c-t1); box-shadow: 0 2px 10px rgba(15,23,42,.05);
}
[data-theme="dark"] .iw-bar .iw-bar-seg-opt.is-active,
[data-theme="dark"] .iw-bar .iw-bar-seg-opt[aria-checked="true"] { box-shadow: 0 2px 10px rgba(0,0,0,.40); }
/* El elegido del Entorno: el color de su entorno SÓLO en el ícono (DOCSIS violeta, GPON ámbar); el rótulo
   queda en t1, como en la SSO (el ámbar como texto de 11px da 3,19:1). */
.iw-bar .iw-bar-seg-opt--docsis.is-active svg,
.iw-bar .iw-bar-seg-opt--docsis[aria-checked="true"] svg { color: var(--c-violet); }
.iw-bar .iw-bar-seg-opt--docsis, .iw-bar .iw-bar-seg-opt--gpon { padding: 5px 9px; }
.iw-bar .iw-bar-seg-opt--gpon.is-active svg,
.iw-bar .iw-bar-seg-opt--gpon[aria-checked="true"] svg { color: var(--c-amber); }

/* Íconos de la barra: los tamaños de la SSO (Header.tsx, topbar/*.tsx). */
.iw-bar .iw-bar-home svg { width: 19px; height: 19px; }
.iw-bar .iw-bar-icon-btn svg { width: 18px; height: 18px; }
.iw-bar .iw-bar-btn svg, .iw-bar .iw-bar-seg-opt svg { width: 14px; height: 14px; }
.iw-bar .iw-bar-btn svg:last-child:not(:first-child), .iw-bar .iw-bar-user svg { width: 13px; height: 13px; }

/* Menú de usuario: el avatar primario lleva el degradé (capa §0), 28px — la misma regla que la SSO Interface
   (.iw-avatar-primary). Las iniciales blancas sobre la parada naranja miden 2,91:1: queda listado aparte en la
   auditoría de contraste (no está en DESIGN.md:1722-1754). */
.iw-bar .iw-bar-user {
  display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
  margin: 0; padding: 4px 6px 4px 4px; box-sizing: border-box;
  border: 0; border-radius: 8px; background: transparent; box-shadow: none;
  color: var(--c-t1); cursor: pointer;
  font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 12px; line-height: 1; letter-spacing: 0;
  transition: background 100ms;
}
.iw-bar .iw-bar-user::after { display: none; }
.iw-bar .iw-bar-user svg { color: var(--c-t3); }
.iw-bar .iw-bar-user:hover,
.iw-bar .iw-bar-user[aria-expanded="true"] { background: var(--c-hover); color: var(--c-t1); }
.iw-bar .iw-bar-avatar {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 28px; height: 28px; border-radius: 50%; box-shadow: none;
  background: var(--c-gradient-135); color: white;
  font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 10px; letter-spacing: 0;
}
.iw-bar .iw-bar-user-name { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* El menú que abre .iw-bar-user — R88 (PF0002, operador 2026-11-06: «este menú se tiene que ver igual en todas las
   pantallas (sin el open applications in)»). Es el del portal IW Proxy (overrides/portal.js homePage, medidas de
   portal.css .iwp-menu*) sin el bloque de pestañas, y cada app lo arma con ESTE árbol de clases:
     .iw-um-menu[role=menu] > .iw-um-head > .iw-um-avatar-lg + div > .iw-um-fullname + .iw-um-handle (@usuario)
                            > .iw-um-sep
                            > .iw-um-item[role=menuitem] «Mi perfil» (user) · «Acerca de IPS» (info)
                            > .iw-um-sep
                            > .iw-um-item.iw-um-item--danger «Cerrar sesión» (log-out)
   Destinos: «Mi perfil» → <IW Proxy>/#iw-profile y «Acerca de IPS» → <IW Proxy>/#iw-about (el portal abre el MISMO
   diálogo que su menú); «Cerrar sesión» → el logout de la suite de cada app (R31). Se abre con el botón y se cierra
   con Escape, con un clic afuera o al elegir. El `display` es de cada app (Bootstrap .show, [hidden], render
   condicional): esta hoja no lo toca. `.iw-bar` delante gana sobre .dropdown-menu / .dropdown-item de Bootstrap. */
.iw-bar .iw-um-menu,
.iw-bar .iw-um-menu[data-bs-popper] {
  position: absolute; top: calc(100% + 6px); right: 0; left: auto; bottom: auto; z-index: 1060;
  box-sizing: border-box; min-width: 264px; margin: 0; padding: 6px 0; list-style: none; transform: none;
  background: var(--c-surface); color: var(--c-t1);
  border: 1px solid var(--c-border); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15,23,42,.10);
  font-family: 'Roboto', sans-serif; font-size: 13px; font-weight: 400; line-height: normal; letter-spacing: 0;
  text-align: left;
}
[data-theme="dark"] .iw-bar .iw-um-menu { box-shadow: 0 8px 24px rgba(0,0,0,.50); }
.iw-bar .iw-um-menu > li { display: block; margin: 0; padding: 0; list-style: none; }
.iw-bar .iw-um-menu .iw-um-head { display: flex; align-items: center; gap: 10px; margin: 0; padding: 8px 12px 10px; }
.iw-bar .iw-um-menu .iw-um-avatar-lg {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 36px; height: 36px; border-radius: 50%; box-shadow: none;
  background: var(--c-gradient-135); color: white;
  font: 700 13px 'Montserrat', sans-serif; letter-spacing: 0;
}
.iw-bar .iw-um-menu .iw-um-fullname { font: 600 13px 'Montserrat', sans-serif; color: var(--c-t1); letter-spacing: 0; }
.iw-bar .iw-um-menu .iw-um-handle { font: 400 11px 'Roboto Mono', monospace; color: var(--c-t2); letter-spacing: 0; }
.iw-bar .iw-um-menu .iw-um-sep {
  display: block; height: 0; margin: 6px 0; padding: 0; opacity: 1;
  border: 0; border-top: 1px solid var(--c-border); background: none; color: inherit;
}
.iw-bar .iw-um-menu .iw-um-item {
  display: flex; align-items: center; gap: 10px; box-sizing: border-box; width: 100%; height: 34px; min-height: 0; margin: 0; padding: 0 12px;
  border: 0; border-radius: 0; background: transparent; box-shadow: none;
  font: 400 13px 'Roboto', sans-serif; letter-spacing: 0; color: var(--c-t1);
  text-align: left; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background 100ms;
}
.iw-bar .iw-um-menu .iw-um-item:hover,
.iw-bar .iw-um-menu .iw-um-item:focus,
.iw-bar .iw-um-menu .iw-um-item:active { background: var(--c-hover); color: var(--c-t1); text-decoration: none; }
.iw-bar .iw-um-menu .iw-um-item svg { flex-shrink: 0; width: 16px; height: 16px; stroke-width: 1.75; color: var(--c-t2); }
.iw-bar .iw-um-menu .iw-um-item--danger { color: var(--c-red); }
.iw-bar .iw-um-menu .iw-um-item--danger svg { color: var(--c-red); }

/* Foco: el contorno del token de foco del plugin, igual en todo control de la barra. */
.iw-bar :focus-visible { outline: 2px solid var(--iw-focus-ring); outline-offset: 2px; box-shadow: none; }

/* Entre lg y xl el Entorno va sólo con íconos y la especificación sólo con su ícono. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .iw-bar .iw-bar-seg-opt--docsis span, .iw-bar .iw-bar-seg-opt--gpon span, .iw-bar .iw-bar-btn--spec span { display: none; }
}

/* Bajo lg, intranet3 colapsa la derecha de la barra en el menú de Bootstrap (columna). */
@media (max-width: 991.98px) {
  .iw-bar .iw-env-switch { align-self: flex-start; }
}

/* intranet3, desde lg: la derecha de la barra va dentro del .navbar-collapse de Bootstrap. No crece (si
   creciera le quitaría la mitad del ancho al buscador del CSR): se empuja a la derecha con margen auto. */
@media (min-width: 992px) {
  .iw-bar .navbar-collapse { flex-grow: 0; margin-left: auto; }
}

/*
 * Estilo nuevo del portal IW Proxy de la demo (PF0002 §9.2, R25) — home, login y perfil.
 *
 * Lo inyecta render.py (demo_overrides.py) en las páginas PRODUCTIVAS renderizadas: no reemplaza su
 * HTML ni su JavaScript, los re-viste. Fuente: plugin iway-frontend v2.0.0 (docs/DESIGN.md, docs/bootstrap;
 * tokens --c-*, Montserrat/Roboto/Roboto Mono, tema por data-theme + 'intraway-theme') con la capa
 * intraway-ips-shell §1 (una sola barra de suite). La barra es la de intranet3 (.navbar-iw de app.css): plana
 * desde R59, con logo de la suite, casita, separador, tile (iso) + sección; derecha: idioma, tema, usuario.
 *
 * Todo cuelga de html[data-iwp] (lo pone el script temprano): sin ese atributo este archivo no toca nada.
 */

/* ── Tokens ──────────────────────────────────────────────────────────────────────────────────────
   R59 (PF0002, elección 1B): copia de iway-frontend v2.0.0 docs/bootstrap/index.css, sin cambiar un valor
   (triplets; --c-* compuestos; el oscuro sólo cambia triplets). Reemplaza la paleta AA de R38. Los nombres
   --iw-* de este archivo son alias de los canónicos. */
html[data-iwp] {
    /* ── Brand and semantic — ink (text, icons, borders, chart series) ── */
    --c-orange-rgb:       255 103 29;
    --c-violet-rgb:        90  82 214;
    --c-teal-rgb:          13 163 140;
    --c-blue-rgb:          54 112 242;
    --c-amber-rgb:        217 119   6;
    --c-red-rgb:          220  38  38;

    /* ── Brand and semantic — fill (solid background, white label) ── */
    --c-orange-fill-rgb:  255 103 29;
    --c-violet-fill-rgb:   90  82 214;
    --c-red-fill-rgb:     220  38  38;

    /* ── Tint opacity — 10% light, 15% dark ── */
    --c-tint-alpha: .10;

    /* ── Surfaces ── */
    --c-shell-rgb:        247 248 251;
    --c-surface-rgb:      255 255 255;
    --c-s2-rgb:           242 244 248;
    --c-hover-rgb:        235 238 244;
    --c-border-rgb:       226 232 240;
    --c-border-focus-rgb: 200 208 224;
    --c-border-ghost-rgb: 226 232 240;
    --c-sidebar-rgb:      248 249 251;

    /* ── Text — t4 is decorative only, below WCAG AA ── */
    --c-t1-rgb:            15  23  42;
    --c-t2-rgb:            71  85 105;
    --c-t3-rgb:           100 116 139;
    --c-t4-rgb:           148 163 184;
    --c-muted-rgb:        203 213 224;

    /* ── Component-specific ── */
    --c-scrollbar-rgb:    209 217 230;
    --c-progress-rgb:     232 237 244;
    --c-disabled-rgb:     242 244 248;
    --c-tooltip-bg-rgb:    15  23  42;
    --c-tooltip-text-rgb: 255 255 255;

    /* ── Composed values ── */
    --c-sel-row:        rgb(var(--c-orange-rgb) / .06);
    --c-sel-row-border: rgb(var(--c-orange-rgb));
    --c-gradient:       linear-gradient(90deg,  rgb(var(--c-orange-rgb)), rgb(var(--c-violet-fill-rgb)));
    --c-gradient-135:   linear-gradient(135deg, rgb(var(--c-orange-rgb)), rgb(var(--c-violet-fill-rgb)));

    /* ── Ready-to-use companions — computed, never authored ── */
    --c-orange:       rgb(var(--c-orange-rgb));
    --c-violet:       rgb(var(--c-violet-rgb));
    --c-teal:         rgb(var(--c-teal-rgb));
    --c-blue:         rgb(var(--c-blue-rgb));
    --c-amber:        rgb(var(--c-amber-rgb));
    --c-red:          rgb(var(--c-red-rgb));
    --c-orange-fill:  rgb(var(--c-orange-fill-rgb));
    --c-violet-fill:  rgb(var(--c-violet-fill-rgb));
    --c-red-fill:     rgb(var(--c-red-fill-rgb));
    --c-shell:        rgb(var(--c-shell-rgb));
    --c-surface:      rgb(var(--c-surface-rgb));
    --c-s2:           rgb(var(--c-s2-rgb));
    --c-hover:        rgb(var(--c-hover-rgb));
    --c-border:       rgb(var(--c-border-rgb));
    --c-border-focus: rgb(var(--c-border-focus-rgb));
    --c-border-ghost: rgb(var(--c-border-ghost-rgb));
    --c-sidebar:      rgb(var(--c-sidebar-rgb));
    --c-t1:           rgb(var(--c-t1-rgb));
    --c-t2:           rgb(var(--c-t2-rgb));
    --c-t3:           rgb(var(--c-t3-rgb));
    --c-t4:           rgb(var(--c-t4-rgb));
    --c-muted:        rgb(var(--c-muted-rgb));
    --c-scrollbar:    rgb(var(--c-scrollbar-rgb));
    --c-progress:     rgb(var(--c-progress-rgb));
    --c-disabled:     rgb(var(--c-disabled-rgb));
    --c-tooltip-bg:   rgb(var(--c-tooltip-bg-rgb));
    --c-tooltip-text: rgb(var(--c-tooltip-text-rgb));

  /* ── alias del portal (sin valor propio) ── */
  /* [33]: borde de control t3 y foco t2 (3:1 contra la superficie; los tokens de borde del plugin no llegan). */
  --c-border-control: var(--c-t3); --iw-focus-ring: var(--c-t2);
  --iw-orange: var(--c-orange); --iw-orange-fill: var(--c-orange-fill); --iw-orange-active: var(--c-orange-fill);
  --iw-violet: var(--c-violet); --iw-teal: var(--c-teal); --iw-blue: var(--c-blue);
  --iw-amber: var(--c-amber); --iw-red: var(--c-red);
  --iw-shadow-card: 0 2px 10px rgba(15,23,42,0.05);
  --iw-shadow-dropdown: 0 8px 24px rgba(15,23,42,0.10);
  --iw-shadow-modal: 0 20px 60px rgba(15,23,42,0.18);
  --iw-gradient: var(--c-gradient);
  --iwp-logo-filter: none;
  color-scheme: light;

  /* Variables de las plantillas productivas, re-apuntadas a los tokens: diálogos, formularios y
     mensajes que no se re-maquetan heredan el estilo nuevo en los dos temas. */
  --font: 'Roboto', sans-serif;
  --bg: var(--c-shell); --surface: var(--c-surface); --card: var(--c-surface); --card-hover: var(--c-hover);
  --border: var(--c-border); --text: var(--c-t1); --muted: var(--c-t3);
  --accent: var(--c-orange); --accent-soft: rgb(var(--c-orange-rgb) / var(--c-tint-alpha));
  --sidebar-bg: var(--c-sidebar); --topbar-bg: var(--c-surface);
  --brand-logo-filter: none; --nav-icon-filter: none;
  --danger: var(--c-red); --danger-soft: rgb(var(--c-red-rgb) / var(--c-tint-alpha));
  --ok: var(--c-teal); --ok-soft: rgb(var(--c-teal-rgb) / var(--c-tint-alpha));
  --focus: 0 0 0 2px var(--iw-focus-ring);
  --page-bg: var(--c-shell); --card-bg: var(--c-surface); --card-border: transparent;
  --text-muted: var(--c-t2); --input-border: var(--c-border-control); --input-bg: var(--c-surface);
  --input-text: var(--c-t1); --label: var(--c-t3); --focus-ring: var(--iw-focus-ring);
  --iw-heading: var(--c-violet); --iw-title: var(--c-t1); --iw-body: var(--c-t2); --iw-soft: var(--c-t3);
  --iw-panel-bg: var(--c-surface); --iw-panel-border: transparent; --iw-link: var(--c-violet);
}
html[data-iwp][data-theme="dark"] {
    /* Ink brightens to clear the dark surface. Orange is unchanged by design. */
    --c-violet-rgb:       123 116 240;
    --c-teal-rgb:          18 185 162;
    --c-blue-rgb:          91 142 248;
    --c-amber-rgb:        245 158  11;
    --c-red-rgb:          240  96  96;

    /* Fill does NOT brighten — that is what breaks the white label.
       Violet lifts only enough to clear its own boundary against the card. */
    --c-violet-fill-rgb:  110 103 219;

    --c-tint-alpha: .15;

    --c-shell-rgb:         13  17  23;
    --c-surface-rgb:       22  28  39;
    --c-s2-rgb:            28  35  51;
    --c-hover-rgb:         30  42  61;
    --c-border-rgb:        30  42  61;
    --c-border-focus-rgb:  61  79 106;
    --c-border-ghost-rgb:  37  51  71;
    --c-sidebar-rgb:       11  16  23;

    --c-t1-rgb:           232 237 245;
    --c-t2-rgb:           148 163 184;
    --c-t3-rgb:           123 143 173;
    --c-t4-rgb:            78  98 128;
    --c-muted-rgb:         45  58  82;

    --c-scrollbar-rgb:     45  58  82;
    --c-progress-rgb:      28  35  51;
    --c-disabled-rgb:      28  35  51;
    --c-tooltip-bg-rgb:    11  16  23;
    --c-tooltip-text-rgb: 232 237 245;

    /* Selected row is a solid elevation in dark, never an orange tint */
    --c-sel-row: rgb(26 37 64);

  --iw-shadow-card: 0 2px 10px rgba(0,0,0,0.40);
  --iw-shadow-dropdown: 0 8px 24px rgba(0,0,0,0.50);
  --iw-shadow-modal: 0 20px 60px rgba(0,0,0,0.60);
  --iwp-logo-filter: brightness(0) invert(1);
  color-scheme: dark;
}

/* ── Base ──────────────────────────────────────────────────────────────────────────────────────── */
html[data-iwp] body {
  font-family: 'Roboto', sans-serif;
  background: var(--c-shell);
  color: var(--c-t2);
  -webkit-font-smoothing: antialiased;
}
html[data-iwp] ::-webkit-scrollbar { width: 5px; height: 5px; }
html[data-iwp] ::-webkit-scrollbar-thumb { background: var(--c-scrollbar); border-radius: 3px; }
html[data-iwp] h1, html[data-iwp] h2, html[data-iwp] h3,
html[data-iwp] .card__title, html[data-iwp] .page__title, html[data-iwp] .signin-title { font-family: 'Montserrat', sans-serif; }
html[data-iwp] code, html[data-iwp] .iwp-mono { font-family: 'Roboto Mono', monospace; }
html[data-iwp] [hidden] { display: none !important; }
/* Foco: contorno del token de foco del plugin (--c-border-focus), también en la barra, que ahora es plana. */
html[data-iwp] :focus-visible { outline: 2px solid var(--iw-focus-ring); outline-offset: 2px; box-shadow: none; }

/* ── Barra de la suite ──────────────────────────────────────────────────────────────────────────────
   R60 (PF0002): la dibuja public/css/suite-bar.css de intranet3, la MISMA hoja que la barra de intranet3;
   demo_overrides.py la publica delante de este archivo y portal.js arma el mismo árbol de clases iw-bar-*.
   Acá quedan los desplegables propios del portal (tenant, usuario) y los ajustes de anchos chicos. */
.iwp-tenant { position: relative; }
.iwp-menu--tenant { right: auto; left: 0; min-width: 240px; padding: 6px; }
.iwp-ts-item {
  display: flex; align-items: center; gap: 9px; width: 100%; height: 36px; padding: 0 10px;
  border: 0; border-radius: 7px; background: transparent; cursor: pointer; text-align: left;
  font: 400 13px 'Roboto', sans-serif; color: var(--c-t1); transition: background 100ms, color 100ms;
}
.iwp-ts-item span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iwp-ts-item svg { color: var(--c-t2); flex-shrink: 0; }
.iwp-ts-item:hover { background: var(--c-hover); }
.iwp-ts-item.is-active { background: rgb(var(--c-orange-rgb) / var(--c-tint-alpha)); color: var(--c-t1); font-weight: 500; } /* [33]: texto t1, naranja en ícono y check */
.iwp-ts-item.is-active svg { color: var(--c-orange); }
.iwp-user { position: relative; }
.iwp-avatar--lg {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 36px; height: 36px; border-radius: 50%; background: var(--c-gradient-135); color: white;
  font: 700 13px 'Montserrat', sans-serif;
}
.iwp-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 264px;
  background: var(--c-surface); color: var(--c-t1);
  border: 1px solid var(--c-border); border-radius: 8px; box-shadow: var(--iw-shadow-dropdown);
  padding: 6px 0;
}
.iwp-menu-head { display: flex; align-items: center; gap: 10px; padding: 8px 12px 10px; }
.iwp-menu-name { font: 600 13px 'Montserrat', sans-serif; color: var(--c-t1); }
.iwp-menu-detail { font: 400 11px 'Roboto Mono', monospace; color: var(--c-t2); }
.iwp-menu hr { border: 0; border-top: 1px solid var(--c-border); margin: 6px 0; }
.iwp-menu-label { padding: 6px 12px 4px; font: 600 10px 'Montserrat', sans-serif; letter-spacing: .07em; text-transform: uppercase; color: var(--c-t2); }
.iwp-menu .iwp-menu-item,
html[data-iwp] .iwp-menu .portal-about-btn,
html[data-iwp] .iwp-menu .btn-logout,
html[data-iwp] .iwp-menu #btnLogout {
  display: flex; align-items: center; gap: 10px; width: 100%; height: 34px; padding: 0 12px;
  border: 0; border-radius: 0; background: transparent; box-shadow: none;
  font: 400 13px 'Roboto', sans-serif; color: var(--c-t1); text-align: left; cursor: pointer; text-decoration: none;
  transition: background 100ms;
}
.iwp-menu .iwp-menu-item:hover,
html[data-iwp] .iwp-menu .portal-about-btn:hover,
html[data-iwp] .iwp-menu #btnLogout:hover { background: var(--c-hover); color: var(--c-t1); }
html[data-iwp] .iwp-menu #btnLogout { color: var(--iw-red); }
.iwp-menu svg { flex-shrink: 0; color: var(--c-t2); }
html[data-iwp] .iwp-menu #btnLogout svg { color: var(--iw-red); }
/* R88: el menú de usuario lo dibuja public/css/suite-bar.css (.iw-um-*), la hoja de todas las apps; las reglas de
   arriba quedan para el desplegable del tenant y para neutralizar el estilo productivo de #btnLogout / .portal-about-btn
   (con los mismos valores). El segmentado Misma / Nueva ventana del menú salió. */

/* ── Home del portal ───────────────────────────────────────────────────────────────────────────── */
html[data-iwp="home"] body { height: auto; min-height: 100%; overflow: auto; }
html[data-iwp="home"] .shell { display: block; height: auto; min-height: 0; }
html[data-iwp="home"] .shell > .sidebar,
html[data-iwp="home"] .main-wrap > .topbar { display: none !important; }
html[data-iwp="home"] .main-wrap { display: block; height: auto; overflow: visible; }
html[data-iwp="home"] .page { padding: 24px 24px 32px; max-width: 1480px; margin: 0 auto; }
.iwp-page-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 0 0 18px; }
.iwp-page-title { margin: 0; font: 700 22px 'Montserrat', sans-serif; color: var(--c-t1); }
.iwp-page-sub { margin: 0; font: 400 12px 'Roboto', sans-serif; color: var(--c-t2); } /* R72: párrafo de descripción del DM, text-iw-body-sm t2 */
/* R72 (I3-108, dm-ref.json heading.h2): título de sección del DM, text-iw-section — Montserrat 15/600 t1, sin
   MAYÚSCULAS (HeadendForm.tsx:68). Antes: rótulo 10 px en mayúsculas t2 con .07em. */
.iwp-col-title {
  margin: 0 0 10px; font: 600 15px 'Montserrat', sans-serif; letter-spacing: 0;
  text-transform: none; color: var(--c-t1);
}

/* Panel de alertas (productivo: #portalAlertStatusColumn), al centro. */
html[data-iwp="home"] .portal-alert-status-row { margin: 0; gap: 16px; }
html[data-iwp="home"] .portal-alerting,
html[data-iwp="home"][data-theme="light"] .portal-alerting {
  margin: 0; padding: 16px 18px; border: 0; border-radius: 14px;
  background: var(--c-surface); box-shadow: var(--iw-shadow-card);
}
html[data-iwp="home"] .portal-alerting__title {
  display: flex; align-items: center; gap: 10px; margin: 0 0 8px;
  font: 600 13px 'Montserrat', sans-serif; letter-spacing: 0; text-transform: none; color: var(--c-t1); /* R72: h3 del DM, título de Card 13/600 (Card.tsx:21) */
}
.iwp-alert-summary { margin-left: auto; font: 500 11px 'Roboto', sans-serif; }
html[data-iwp="home"] .portal-alerting__row {
  gap: 10px; min-height: 36px; padding: 6px 4px; border-bottom: 1px solid var(--c-border); font-size: 13px;
}
html[data-iwp="home"] .portal-alerting__traffic {
  width: 16px; height: 16px; border-radius: 0; box-shadow: none; background: currentColor;
  -webkit-mask: var(--iwp-mask) center / contain no-repeat; mask: var(--iwp-mask) center / contain no-repeat;
}
/* Estado con ícono + color, nunca color solo (SKILL.md Step 11). */
html[data-iwp="home"] .portal-alerting__traffic--ok {
  color: var(--iw-teal);
  --iwp-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
}
html[data-iwp="home"] .portal-alerting__traffic--bad {
  color: var(--iw-red);
  --iwp-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
}
html[data-iwp="home"] .portal-alerting__name { font: 400 13px 'Roboto', sans-serif; color: var(--c-t1); }
html[data-iwp="home"] .portal-alerting__state {
  font: 400 11px 'Roboto Mono', monospace; color: var(--c-t2); text-transform: none; /* t2 sobre s2 (DONT.md; convención de la SSO) */
  padding: 1px 6px; border-radius: 6px; background: var(--c-s2);
}
html[data-iwp="home"] .portal-alerting__row:has(.portal-alerting__traffic--bad) { background: rgb(var(--c-red-rgb) / calc(var(--c-tint-alpha) * .6)); border-radius: 6px; }
html[data-iwp="home"] .portal-alerting__row:has(.portal-alerting__traffic--bad) .portal-alerting__state { color: var(--iw-red); background: transparent; }
html[data-iwp="home"] .portal-alerting__hint { font-size: 12px; color: var(--c-t2); }
html[data-iwp="home"] .foot { margin-top: 28px; font: 400 11px 'Roboto', sans-serif; color: var(--c-t2); text-align: center; }
.iwp-demo-tag {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 6px;
  font: 500 11px 'Roboto', sans-serif; color: var(--iw-violet);
  background: rgb(var(--c-violet-rgb) / var(--c-tint-alpha));
}

/* R44 (§1.3.o): una sola lista de alertas (las dos productivas quedan ocultas como fuente) y, debajo,
   los tableros de negocio. Colores de estado = tokens --iw-* (texto >= 4,5:1, gráficos >= 3:1, R38). */
html[data-iwp="home"] .iwp-dash { margin-top: 28px; }
html[data-iwp="home"] .iwp-alerts .portal-alerting__title { flex-wrap: wrap; }
.iwp-alert-summary { display: inline-flex; gap: 8px; margin-left: auto; }
.iwp-alert-count {
  padding: 2px 8px; border-radius: 6px; background: var(--c-s2);
  font: 500 12px 'Roboto', sans-serif; color: var(--c-t2);
}
.iwp-alert-count.is-bad { color: var(--iw-red); background: rgb(var(--c-red-rgb) / var(--c-tint-alpha)); }
.iwp-alert-list { margin: 0; padding: 0; list-style: none; }
@media (min-width: 1100px) { .iwp-alert-list { columns: 2; column-gap: 28px; } }
html[data-iwp="home"] .iwp-alert { display: flex; align-items: center; break-inside: avoid; }
html[data-iwp="home"] .iwp-alert .portal-alerting__name { flex: 1; min-width: 0; }
.iwp-dash-tenant {
  margin-left: 6px; padding: 2px 8px; border-radius: 6px; background: var(--c-s2);
  font: 600 10px 'Montserrat', sans-serif; letter-spacing: .04em; color: var(--c-t2); text-transform: none;
}
.iwp-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.iwp-tile {
  display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 16px 18px 14px;
  border-radius: 14px; background: var(--c-surface); box-shadow: var(--iw-shadow-card);
  color: var(--c-t2); text-decoration: none; transition: box-shadow 120ms;
}
.iwp-tile:hover { box-shadow: var(--iw-shadow-dropdown); } /* R72: como el MetricTile enlazado del DM (Dashboard.tsx:57, hover:shadow-iw-dropdown), sin levantarse */
/* R55: un tablero sin pantalla de detalle (firmware, el estado vacío de GPON) es un <div>: no se levanta al pasar. */
div.iwp-tile:hover { box-shadow: var(--iw-shadow-card); transform: none; }
.iwp-tile-head { display: flex; align-items: center; gap: 10px; }
.iwp-tile-icon {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 30px; height: 30px; border-radius: 8px; color: var(--iw-blue);
  background: rgb(var(--c-blue-rgb) / var(--c-tint-alpha));
}
.iwp-tile-title { margin: 0; font: 600 13px 'Montserrat', sans-serif; color: var(--c-t1); } /* R72: h3 del DM, 13/600 (Card.tsx:21) */
.iwp-tile-body { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.iwp-kpis { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; }
.iwp-kpi { display: flex; flex-direction: column-reverse; min-width: 0; }
.iwp-kpi dt { font: 500 11px 'Roboto', sans-serif; color: var(--c-t2); }
.iwp-kpi dd { margin: 0; font: 700 20px 'Montserrat', sans-serif; color: var(--c-t1); font-variant-numeric: tabular-nums; }
.iwp-kpi--ok dd { color: var(--iw-teal); }
.iwp-kpi--bad dd { color: var(--iw-red); }
.iwp-kpi--accent dd { color: var(--iw-violet); }
/* color = el eje (currentColor): el token de borde de control, >= 3:1 en los dos temas (R38). */
.iwp-chart { display: block; width: 100%; color: var(--c-border-control); fill: currentColor; }
.iwp-chart--bars { height: 64px; }
.iwp-chart--stack { height: 12px; border-radius: 6px; overflow: hidden; }
.iwp-chart-track, .iwp-k-rest { fill: var(--c-s2); background: var(--c-s2); }
html[data-iwp][data-theme="dark"] .iwp-chart-track, html[data-iwp][data-theme="dark"] .iwp-k-rest { fill: var(--c-scrollbar); background: var(--c-scrollbar); } /* I3-82: el token del tema oscuro (mismo valor) */
.iwp-chart-axis { fill: currentColor; }
/* Un tono por estado; en el SVG es fill y en la leyenda background. */
.iwp-k-ok { fill: var(--iw-teal); background: var(--iw-teal); }
.iwp-k-caution { fill: var(--iw-amber); background: var(--iw-amber); }
.iwp-k-warn { fill: var(--iw-orange); background: var(--iw-orange); }
.iwp-k-bad { fill: var(--iw-red); background: var(--iw-red); }
.iwp-k-accent { fill: var(--iw-violet); background: var(--iw-violet); }
.iwp-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 0; list-style: none; font: 400 12px 'Roboto', sans-serif; color: var(--c-t2); }
.iwp-legend li { display: inline-flex; align-items: center; gap: 6px; }
.iwp-legend b { font-weight: 600; color: var(--c-t1); }
.iwp-sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
/* R45 (R38, WCAG 1.4.11): «Resto» es el color del riel (1,1:1 claro, 1,5:1 oscuro): en la barra se lee como lo
   no ocupado, pero su muestra en la leyenda identifica una serie, así que lleva un borde >= 3:1. */
.iwp-sw.iwp-k-rest { box-shadow: inset 0 0 0 1px var(--c-t3); }
.iwp-tile-note, .iwp-tile-state { margin: 0; font: 400 12px 'Roboto', sans-serif; color: var(--c-t2); }
.iwp-tile-more { display: inline-flex; align-items: center; gap: 6px; font: 600 12px 'Montserrat', sans-serif; color: var(--iw-violet); }
.iwp-tile:hover .iwp-tile-more { text-decoration: underline; }
@media (max-width: 720px) {
  html[data-iwp="home"] .page { padding: 16px 12px 24px; }
  .iwp-tiles { grid-template-columns: 1fr; }
  .iwp-alert-summary { margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .iwp-tile { transition: none; } }

/* Diálogos productivos (perfil, contraseña, MFA, about): sin borde, sombra de modal. */
html[data-iwp] .portal-about-overlay { background: rgba(15,23,42,.45); }
html[data-iwp] .portal-about-dialog { border: 0; border-radius: 14px; box-shadow: var(--iw-shadow-modal); background: var(--c-surface); color: var(--c-t1); }
html[data-iwp] .portal-about-dialog .card { border: 0; box-shadow: none; background: transparent; }

/* R89 (PF0002, operador 2026-11-06: «arreglá los logos para que se vean bien»; decisión: cada logo en su color sobre
   una tarjeta clara). «Trusted by Leading Telecom Companies» (diálogo Acerca de IPS): el CSS productivo invierte los
   logos sólo con data-theme="obsidian", que la demo no usa (es "dark"), así que en oscuro Telecom, izzi, AT&T y
   Mediacom quedaban con texto oscuro sobre el panel oscuro. Cada logo va en una tarjetita blanca redondeada, la MISMA
   en los dos temas (blanco y borde fijos a propósito: no siguen al tema), de igual tamaño para los 10, con el logo
   centrado y contenido (object-fit: contain, margen interno). La grilla de 2 columnas es la productiva. */
html[data-iwp] .ips-cp__trust-logos li {
  box-sizing: border-box; width: 100%; height: 72px; min-height: 0; padding: 10px 16px;
  background: white; border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 8px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
html[data-iwp] .ips-cp__trust-logos img,
html[data-iwp][data-theme] .ips-cp__trust-logos img {
  width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; object-position: center;
  filter: none; opacity: 1;
}

/* ── Botones y campos de las páginas productivas ──────────────────────────────────────────────── */
/* R72 (I3-108, dm-ref.json button.*): el Button del DM, tamaño md — 34 px, padding 0 16, Montserrat 12/600, radio 8
   (Button.tsx:15,32-36). Antes: padding 0 14 y letra 13. */
html[data-iwp] .btn, html[data-iwp] .portal-form-dialog .btn {
  height: 34px; padding: 0 16px; border: 1px solid var(--c-border); border-radius: 8px;
  background: transparent; color: var(--c-t2); box-shadow: none;
  font: 600 12px 'Montserrat', sans-serif; display: inline-flex; align-items: center; gap: 6px;
  transition: background 100ms;
}
html[data-iwp][data-theme="dark"] .btn { border-color: var(--c-border-ghost); }
html[data-iwp] .btn:hover { background: var(--c-hover); color: var(--c-t1); border-color: var(--c-border); }
html[data-iwp] .btn-primary, html[data-iwp] .portal-form-dialog .btn-primary,
html[data-iwp] .btn-signin {
  background: var(--iw-orange-fill); border: 0; color: white; filter: none; /* R72: el primario del DM no tiene borde */
}
html[data-iwp] .btn-primary:hover, html[data-iwp] .portal-form-dialog .btn-primary:hover,
html[data-iwp] .btn-signin:hover { background: var(--iw-orange-active); color: white; filter: none; }
html[data-iwp] .btn:disabled, html[data-iwp] .btn-signin:disabled { opacity: .38; cursor: not-allowed; }
/* R72: foco del Button del DM — anillo doble, superficie 2 px + t2 2 px (Button.tsx:34, ring-2 ring-offset-2). El
   outline transparente no se ve, pero es lo único que queda en Windows en alto contraste (forced-colors), donde el
   box-shadow desaparece: igual que la SSO y el CRM (dm-ref.json, declaradas). */
html[data-iwp] .btn:focus-visible, html[data-iwp] .btn-signin:focus-visible {
  outline: 2px solid transparent; outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--c-surface), 0 0 0 4px var(--iw-focus-ring);
}

/* .input-wrap (SKILL.md Step 2) con las medidas del DM (R72, I3-108; operador D10 A: 30 px): la CAJA es el envoltorio
   —borde 1 px del control, radio 8, superficie— y el <input> va adentro, transparente, de 28 px (index.css:158-196 y
   el input del kit, ui.tsx:201-212: .input-wrap + h-[28px] px-2.5). Foco: borde t2 y la barra de degradé abajo.
   portal.js le pone también la clase canónica del plugin, input-wrap. Antes: input de 38 px con su propio borde. */
html[data-iwp] .iwp-input-wrap {
  position: relative; display: block; box-sizing: border-box; overflow: hidden;
  border: 1px solid var(--c-border-control); border-radius: 8px; background: var(--c-surface);
  transition: border-color 150ms, background 200ms;
}
html[data-iwp] .iwp-input-wrap:focus-within { border-color: var(--iw-focus-ring); }
.iwp-input-wrap::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--iw-gradient); opacity: 0; transition: opacity 150ms; pointer-events: none;
}
.iwp-input-wrap:focus-within::after { opacity: 1; }
/* Un campo que portal.js no envolvió (no debería quedar ninguno) conserva la caja, al alto del DM. */
html[data-iwp] .field input, html[data-iwp] .portal-form-dialog input:not([type="checkbox"]):not([type="radio"]) {
  width: 100%; box-sizing: border-box; height: 30px; padding: 0 10px;
  border: 1px solid var(--c-border-control); border-radius: 8px; background: var(--c-surface); color: var(--c-t1);
  font: 400 13px 'Roboto', sans-serif; outline: none; box-shadow: none; transition: border-color 150ms;
}
html[data-iwp] .field input:focus { border-color: var(--iw-focus-ring); outline: none; box-shadow: none; }
html[data-iwp] .iwp-input-wrap input:not([type="checkbox"]):not([type="radio"]) {
  display: block; width: 100%; box-sizing: border-box; height: 28px; margin: 0; padding: 0 10px;
  border: 0; border-radius: 0; background: transparent; color: var(--c-t1);
  font: 400 13px 'Roboto', sans-serif; outline: none; box-shadow: none;
}
html[data-iwp] .iwp-input-wrap input:focus { border: 0; outline: none; box-shadow: none; }
/* Deshabilitado pero informa (usuario, email del perfil): fondo deshabilitado y borde punteado en la caja, texto t1
   (R72: el valor del DM; más contraste que el t2 de R38). Sin la opacidad .6 del DM (index.css:203-207), que R38 sacó
   porque dejaba el texto en 4,4:1. */
html[data-iwp] .iwp-input-wrap:has(input:disabled) { background: var(--c-disabled); border-style: dashed; }
html[data-iwp] .iwp-input-wrap input:disabled { color: var(--c-t1); -webkit-text-fill-color: var(--c-t1); opacity: 1; }
html[data-iwp] .field input:disabled { background: var(--c-disabled); color: var(--c-t1); -webkit-text-fill-color: var(--c-t1); opacity: 1; border-style: dashed; }
/* R38: el «saltar al contenido» productivo pinta --accent (en oscuro #FF671D) con texto blanco. */
html[data-iwp] .skip, html[data-iwp] a.skip { background: var(--c-tooltip-bg); color: var(--c-tooltip-text); } /* [33]: no es un botón */
html[data-iwp] .iwp-input-wrap input::placeholder { color: var(--c-t4); }
html[data-iwp] label, html[data-iwp] .field label {
  font: 600 10px 'Montserrat', sans-serif; letter-spacing: .07em; text-transform: uppercase; color: var(--c-t2);
}
html[data-iwp] .msg--ok { background: var(--ok-soft); color: var(--iw-teal); }
html[data-iwp] .msg--err { background: var(--danger-soft); color: var(--iw-red); }

/* ── Login ─────────────────────────────────────────────────────────────────────────────────────── */
html[data-iwp="login"] body { display: block; padding: 0; min-height: 100vh; background: var(--c-shell); }
html[data-iwp="login"] .login-topbar { display: none; }
.iwp-login-stage { min-height: calc(100vh - 59px); display: flex; align-items: center; justify-content: center; padding: 32px 16px; box-sizing: border-box; }
html[data-iwp="login"] .card {
  max-width: 400px; border: 0; border-radius: 14px; background: var(--c-surface); box-shadow: var(--iw-shadow-card);
}
html[data-iwp="login"] .card-accent { display: none; }
html[data-iwp="login"] .card-inner { padding: 32px 32px 28px; }
html[data-iwp="login"] .brand-logo { max-height: 44px; filter: var(--iwp-logo-filter); }
html[data-iwp="login"] .brand-text .sub { font: 400 12px 'Roboto', sans-serif; color: var(--c-t2); }
html[data-iwp="login"] .signin-title { margin: 22px 0 20px; font: 600 15px 'Montserrat', sans-serif; color: var(--c-t1); }
html[data-iwp="login"] label { margin-bottom: 6px; }
html[data-iwp="login"] .field-wrap { margin-bottom: 16px; }
html[data-iwp="login"] .field-wrap svg { left: 10px; width: 14px; height: 14px; color: var(--c-t2); z-index: 1; } /* R72: 14 px dentro de un campo de 30 */
html[data-iwp="login"] .field-wrap.iwp-input-wrap input:not([type="checkbox"]):not([type="radio"]) { padding-left: 32px; }
/* R72: el primario md del DM, 34 px y 12/600 (antes 38 y 13). */
html[data-iwp="login"] .btn-signin {
  height: 34px; min-height: 34px; margin-top: 12px; padding: 0 16px; border: 0; border-radius: 8px;
  font: 600 12px 'Montserrat', sans-serif; gap: 6px;
}
html[data-iwp="login"] .btn-signin svg { width: 16px; height: 16px; }
html[data-iwp="login"] .err { border-radius: 8px; background: var(--danger-soft); color: var(--iw-red); font-size: 12px; }
html[data-iwp="login"] .view-note { font-size: 12px; color: var(--c-t2); }
html[data-iwp="login"] .link-btn { color: var(--iw-orange); font-size: 12px; }
html[data-iwp="login"] .otp-box { border-radius: 8px; border-color: var(--c-border); background: var(--c-surface); color: var(--c-t1); font-family: 'Roboto Mono', monospace; }
.iwp-login-foot { margin: 16px 0 0; text-align: center; font: 400 11px 'Roboto', sans-serif; color: var(--c-t2); }

/* ── Perfil ────────────────────────────────────────────────────────────────────────────────────── */
html[data-iwp="profile"] body > .topbar { display: none; }
html[data-iwp="profile"] .page { max-width: 760px; padding: 28px 20px 48px; }
html[data-iwp="profile"] .page__title { font: 700 22px 'Montserrat', sans-serif; color: var(--c-t1); }
html[data-iwp="profile"] .page__subtitle { font: 400 12px 'Roboto', sans-serif; color: var(--c-t2); } /* R72: text-iw-body-sm t2 */
html[data-iwp="profile"] .card { border: 0; border-radius: 14px; background: var(--c-surface); box-shadow: var(--iw-shadow-card); padding: 20px 22px; }
html[data-iwp="profile"] .card__title { font: 600 15px 'Montserrat', sans-serif; color: var(--c-t1); }
html[data-iwp="profile"] .card__hint { font: 400 12px 'Roboto', sans-serif; color: var(--c-t2); }

/* Anchos chicos del portal (intranet3 colapsa la barra en el menú de Bootstrap). Con html[data-iwp] para
   ganarle a suite-bar.css sólo acá; I3-53 (R45): a 390 px el tenant tapaba el logo. */
@media (max-width: 720px) {
  html[data-iwp] .iw-bar .iw-bar-section-name, html[data-iwp] .iw-bar .iw-bar-user-name { display: none; }
  html[data-iwp] .iw-bar .iw-bar-right { gap: 8px; }
}
@media (max-width: 560px) {
  html[data-iwp] .iw-bar .iw-bar-inner { gap: 8px; padding: 0 10px; }
  html[data-iwp] .iw-bar:has(.iw-bar-home) .iw-bar-logo, html[data-iwp] .iw-bar .iw-bar-sep, html[data-iwp] .iw-bar .iw-bar-section { display: none; }
  html[data-iwp] .iw-bar .iw-bar-left { flex-shrink: 0; }
  html[data-iwp] .iw-bar .iw-bar-right { gap: 6px; min-width: 0; }
  html[data-iwp] .iw-bar .iwp-tenant { min-width: 0; max-width: 112px; }
  html[data-iwp] .iw-bar .iw-bar-btn { max-width: 100%; padding: 0 8px; gap: 5px; }
  html[data-iwp] .iw-bar .iwp-tenant-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html[data-iwp] .iw-bar .iw-bar-seg-opt { padding: 0 7px; }
  html[data-iwp] .iw-bar .iw-bar-user { padding: 0 2px; gap: 0; }
  html[data-iwp] .iw-bar .iw-bar-user > svg { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .iwp-input-wrap::after { transition: none; }
}

/* [33] (operador, 2026-11-04): pares bajo AA que el plugin no acepta, corregidos con sus tokens. El texto de color
   sobre su propio tinte (contador de alertas, etiqueta de demo, estado de una alerta) va en t1; el color queda
   en el tinte y en el ícono de la fila. */
.iwp-alert-count.is-bad, html[data-iwp="home"] .portal-alerting__row:has(.portal-alerting__traffic--bad) .portal-alerting__state,
.iwp-demo-tag { color: var(--c-t1); }