/* ════════════════════════════════════════════════════════════════════
   CHROME IDE v7 · menubar, panel de la empresa (y Acerca de), tarjeta, búsqueda,
   Abiertos y el estado de Konoos («Powered by») — fidelidad a la maqueta
   (exploration2/propuesta-libre)
   Única fuente de la región: cada selector se define una sola vez, aquí
   (shell-chrome.css ya no trae reglas de la menubar, la tarjeta ni la lupa).
   Solo tokens --k-* (tokens.css). Piso §4.9: sin color-mix()/oklch().
   Abiertos vive en workspace-prod.css (usa los keyframes k-capa-fade de aquí).
   ════════════════════════════════════════════════════════════════════ */

/* Medidas de la maqueta: tokens en tokens.css (bloque «Fidelidad a la maqueta ·
   menubar y sus capas»). */

@keyframes k-capa-fade {
  from { opacity: 0; transform: translateY(calc(var(--k-s-1) * -1)); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .k-mb-emp-menu, .k-tj-panel, .k-ab, .k-lupa, .k-lupa__drop { animation: none; }
}

/* ── Foco (maqueta: --k-focus con :focus-visible) ─────────────────────────
   En esta región el anillo se dibuja solo si la última interacción fue con el
   teclado (.k-kbd en <html>, lo pone header.js): el foco que una capa pone al
   abrirse con el mouse no se ve. Los campos de texto muestran su borde verde. */
.k-header :focus-visible, .k-mb-emp-menu :focus-visible, .k-tj-panel :focus-visible,
.k-lupa :focus-visible, .k-ab :focus-visible, .k-sb__pw:focus-visible,
.k-sb-pop--estado :focus-visible { outline: none; box-shadow: none; }
.k-kbd .k-header button:focus-visible, .k-kbd .k-mb-emp-menu button:focus-visible,
.k-kbd .k-tj-panel button:focus-visible, .k-kbd .k-lupa button:focus-visible,
.k-kbd .k-ab button:focus-visible, .k-kbd .k-sb__pw:focus-visible,
.k-kbd .k-sb-pop--estado button:focus-visible { box-shadow: var(--k-focus); }
/* Shell público: sin header.js no hay .k-kbd, rige el :focus-visible del navegador. */
.k-sb-pub .k-sb__pw:focus-visible, .k-sb-pop--pub :focus-visible { box-shadow: var(--k-focus); }

/* ── 01 · Menubar (wires7-spec §4.10) ─────────────────────────────────────
   Empresa ▾ · Mi día · Propio · Mapa · Abiertos · búsqueda · usuario. Prefijo
   .k-mb-*. El slot .k-header (grid-row 1) ES la barra: kMountInner
   (mount-helper.js) desenvuelve el elemento externo de render() — sus hijos van
   directo al slot y su class se descarta; por eso los estilos de la barra van
   en .k-header, no en un wrapper. */
.k-header {
  display: flex; align-items: center; gap: var(--k-s-1);
  height: var(--k-header-h);
  padding: 0 var(--k-s-3) 0 var(--k-s-2);
  background: var(--k-c-bg-1);
  border-bottom: var(--k-stroke) solid var(--k-c-border);
  position: relative; z-index: 10;
  min-width: 0;
}
/* Marcador de ambiente (ficha 200 G6): el borde inferior de la menubar toma el
   color del ambiente según data-env del <body> (K_NS_ENV). 'prod' no tiene
   regla a propósito: es el aspecto normal. Va después de .k-header porque tiene
   su misma especificidad. */
:where([data-env="dev"]) .k-header { border-bottom-color: var(--k-danger); }
:where([data-env="local"]) .k-header { border-bottom-color: var(--k-info); }

/* Empresa primero (D-18): botón sin borde con el nombre y ▾; borde tenue al
   pasar o abrir; el nombre se corta con elipsis. */
.k-mb-emp { position: relative; flex: 0 1 auto; min-width: 0; }
.k-mb-emp__btn {
  display: flex; align-items: center; gap: var(--k-s-2);
  height: var(--k-h-btn);
  /* 100 %: el botón no pasa del ancho que le deja la barra (sin esto medía lo que su nombre y
     se montaba sobre la navegación a 768 y 390); el nombre se corta con elipsis. */
  max-width: min(100%, calc(var(--k-card-w) - var(--k-s-6)));
  min-width: 0;
  padding: 0 var(--k-s-2);
  border: var(--k-stroke) solid var(--k-c-border-strong);
  border-color: transparent;
  border-radius: var(--k-r-3);
  color: var(--k-c-fg);
  font-weight: 400;
}
.k-mb-emp__btn:hover,
.k-mb-emp__btn[aria-expanded="true"] { background: var(--k-c-hover); border-color: var(--k-c-border); }
/* overflow: hidden por truncado declarado (ui.md §1): nombre de una línea con elipsis; el
   nombre completo está en el panel de la empresa. */
.k-mb-emp__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.k-mb-emp__chev {
  display: block; flex: none;
  width: var(--k-ic-xs); height: var(--k-ic-xs);
  transform: rotate(90deg);
  color: var(--k-c-fg-subtle);
  transition: none;
}
.k-mb-sep {
  flex: none;
  width: var(--k-stroke); height: var(--k-s-5);
  margin: 0 var(--k-s-1);
  background: var(--k-c-border-strong);
}

/* Mi día · Propio · Mapa · Abiertos */
.k-mb-nav { display: flex; align-items: center; gap: var(--k-s-1); flex: none; }
.k-mb-nav__btn {
  position: relative;
  display: inline-flex; align-items: center; gap: var(--k-s-2);
  height: var(--k-h-btn);
  padding: 0 var(--k-s-3);
  border-radius: var(--k-r-2);
  color: var(--k-c-fg-muted);
  font-weight: 500;
  white-space: nowrap;
  transition: background var(--k-m-fast) var(--k-ease-std), color var(--k-m-fast);
}
.k-mb-nav__btn svg { display: block; flex: none; width: var(--k-ic-md); height: var(--k-ic-md); }
.k-mb-nav__btn:hover { background: var(--k-c-hover); color: var(--k-c-fg); }
.k-mb-nav__btn[aria-pressed="true"] { background: var(--k-c-active); color: var(--k-c-fg); }
.k-mb-nav__n { font: 600 var(--k-fs-label)/1 var(--k-font-mono); background: var(--k-c-bg-4); color: var(--k-c-fg); border-radius: var(--k-r-full); padding: var(--k-s-1) var(--k-s-2); }
.k-mb-nav__dot { position: absolute; top: var(--k-s-1); right: var(--k-s-1); width: var(--k-s-2); height: var(--k-s-2); border-radius: var(--k-r-full); background: var(--k-warning); box-shadow: 0 0 0 var(--k-stroke-2) var(--k-c-bg-1); }
/* Piezas críticas de Mi día (brief 4403 F6): el contador del suelo (.k-ib__n) en rojo. En
   escritorio va junto al rótulo, como el número de Abiertos; en celular (solo el ícono) pasa a la
   esquina del botón y se sigue viendo (a diferencia de .k-mb-nav__n). Con 0, hidden. */
.k-mb-nav__crit {
  min-width: var(--k-s-4); height: var(--k-s-4); box-sizing: border-box;
  padding: 0 var(--k-s-1);
  border-radius: var(--k-r-full);
  background: var(--k-danger); color: var(--k-c-fg);
  box-shadow: 0 0 0 var(--k-stroke-2) var(--k-c-bg-1);
  font: 600 var(--k-fs-micro)/var(--k-s-4) var(--k-font-mono);
  text-align: center;
  pointer-events: none;
}
.k-mb-nav__crit[hidden] { display: none; }

/* Caja «Buscar o pedirle algo a NOOS» (§4.10, D-M8): ≥1100px un <input> real
   con el icono superpuesto a la izquierda; bajo 1100px, el botón lupa (icono
   solo). Los dos nodos conviven en el DOM siempre; el CSS decide cuál se ve,
   por ancho. */
.k-mb-search {
  position: relative; display: flex; align-items: center;
  flex: 1 1 var(--k-drop-w); max-width: calc(var(--k-drop-w) + var(--k-s-8));
  min-width: var(--k-h-btn);
  margin: 0 var(--k-s-2);
}
.k-mb-search__icon {
  position: absolute; left: var(--k-s-3); top: 50%; transform: translateY(-50%);
  display: flex; pointer-events: none;
  color: var(--k-c-fg-subtle);
}
.k-mb-search__icon svg { display: block; width: var(--k-ic-sm); height: var(--k-ic-sm); }
.k-mb-search__input {
  /* Llena a `.k-mb-search` (flex:1 1 var(--k-drop-w); max-width: drop-w+s-8),
     como `.caja .in` de la maqueta: el desplegable copia este rect
     (lupa.js posicionar()), así que caja y desplegable miden lo mismo. */
  width: 100%;
  height: var(--k-h-btn);
  padding: 0 var(--k-s-3) 0 calc(var(--k-s-3) * 2 + var(--k-ic-sm));
  background: var(--k-c-bg-2);
  border: var(--k-stroke) solid var(--k-c-border);
  border-radius: var(--k-r-3);
  color: var(--k-c-fg);
  font: inherit;
}
.k-mb-search__input::placeholder { color: var(--k-c-fg-subtle); }
.k-mb-search__input:hover { border-color: var(--k-c-border-strong); }
.k-mb-search__input:focus { border-color: var(--k-brand-green-deep); box-shadow: var(--k-brand-glow); }
.k-mb-search__input::-webkit-search-cancel-button { display: none; }
.k-mb-search__lupa { display: none; }

.k-mb-grow { flex: 1 1 0; min-width: var(--k-s-2); }

/* Usuario: foto/iniciales + nombre + cargo (abre la tarjeta §4.14). */
.k-mb-user {
  display: inline-flex; align-items: center; gap: var(--k-s-2);
  height: var(--k-h-btn-lg);
  max-width: var(--k-usr-max);
  padding: 0 var(--k-s-2) 0 var(--k-s-1);
  border-radius: var(--k-r-full);
  flex: none;
}
.k-mb-user:hover { background: var(--k-c-hover); }
.k-mb-user__avatar {
  width: var(--k-h-btn); height: var(--k-h-btn);
  border-radius: var(--k-r-full);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--k-brand-green); color: var(--k-c-bg-0);
  font: 600 var(--k-fs-label)/1 var(--k-font-mono);
  overflow: hidden; flex: none;
}
.k-mb-user__avatar img { width: 100%; height: 100%; object-fit: cover; }
.k-mb-user__meta { display: grid; line-height: var(--k-lh-tight); min-width: 0; text-align: left; }
.k-mb-user__name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-mb-user__cargo { font-size: var(--k-fs-label); color: var(--k-c-fg-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Bajo 1100 px la caja es una lupa con el aspecto de los botones de la barra. */
@media (max-width: 1099px) {
  .k-mb-search { flex: none; min-width: 0; margin: 0; }
  .k-mb-search__icon, .k-mb-search__input { display: none; }
  .k-mb-search__lupa {
    display: flex; align-items: center; justify-content: center;
    padding: 0 var(--k-s-3);
    background: none; border: 0;
    border-radius: var(--k-r-2);
    color: var(--k-c-fg-muted);
    font-weight: 500;
    cursor: pointer;
  }
  .k-mb-search__lupa:hover { background: var(--k-c-hover); color: var(--k-c-fg); }
  .k-mb-search__lupa svg { display: block; width: var(--k-ic-md); height: var(--k-ic-md); }
}

/* Celular: la barra sin separador ni hueco; botones de 44 px, solo el icono
   (§4.10: en celular, solo el icono; el punto ámbar de Abiertos se conserva). */
@media (max-width: 699px) {
  .k-header { padding: 0 var(--k-s-1); gap: 0; }
  .k-mb-sep, .k-mb-grow { display: none; }
  .k-mb-emp__btn { max-width: 100%; border-color: var(--k-c-border); }
  .k-mb-nav { gap: 0; }
  .k-mb-nav__btn {
    width: var(--k-hit); height: var(--k-hit);
    flex-direction: column; justify-content: center;
    gap: var(--k-gap-xs); padding: 0;
  }
  .k-mb-nav__label { display: none; }
  .k-mb-nav__n { display: none; }
  .k-mb-nav__dot { top: var(--k-s-2); right: var(--k-s-2); }
  .k-mb-nav__crit { position: absolute; top: var(--k-s-1); right: var(--k-s-1); }
  .k-mb-search__lupa { width: var(--k-hit); height: var(--k-hit); padding: 0; justify-content: center; gap: var(--k-gap-xs); }
  .k-mb-user { height: var(--k-hit); padding: 0 var(--k-s-1); }
  .k-mb-user__meta { display: none; }
}

/* Puntero grueso (§4.9): blancos de toque ≥ 44px en la menubar y la tarjeta.
   La barra sube su alto por el token (todo lo que se ubica bajo la menubar
   usa --k-header-h), así los botones de 44px caben sin salirse. Va antes del
   panel de la empresa y de la tarjeta: sus filas fijan su propio alto. */
@media (pointer: coarse) {
  :root[data-density] { --k-header-h: calc(var(--k-hit) + var(--k-s-1)); }
  .k-mb-nav__btn, .k-mb-emp__btn, .k-mb-search__input, .k-mb-search__lupa, .k-mb-user,
  .k-mb-emp-menu__x, .k-mb-emp-menu__item,
  .k-tj-x, .k-tj-ojo, .k-tj-mi { min-height: var(--k-hit); }
  .k-mb-nav__btn, .k-mb-search__lupa, .k-mb-user, .k-mb-emp-menu__x,
  .k-tj-x, .k-tj-ojo { min-width: var(--k-hit); }
}

/* ── Ayuda (spec academy-ide §4.5): ícono entre la búsqueda y el usuario, y su
   menú (capa «ayuda»), anclado a la derecha bajo la barra; nunca más ancho que
   la pantalla. ── */
.k-mb-ayuda { position: relative; display: flex; align-items: center; flex: none; }
.k-mb-ayuda__btn {
  display: flex; align-items: center; justify-content: center;
  height: var(--k-h-btn); min-width: var(--k-h-btn); padding: 0 var(--k-s-2);
  background: none; border: 0; border-radius: var(--k-r-2);
  color: var(--k-c-fg-muted); cursor: pointer;
}
.k-mb-ayuda__btn:hover, .k-mb-ayuda__btn[aria-expanded="true"] { background: var(--k-c-hover); color: var(--k-c-fg); }
.k-mb-ayuda__btn svg { display: block; width: var(--k-ic-md); height: var(--k-ic-md); }
.k-mb-ayuda__menu {
  position: fixed;
  top: calc(var(--k-header-h) + var(--k-s-1)); right: var(--k-s-2);
  width: max-content; min-width: calc(var(--k-acerca-w) - var(--k-s-8)); max-width: calc(100% - var(--k-s-4));
  max-height: calc(100% - var(--k-header-h) - var(--k-suelo-h) - var(--k-s-4));
  overflow: auto; scrollbar-width: auto;   /* las piezas varían: barra estándar (ui.md §1) */
  padding: var(--k-s-2);
  background: var(--k-c-bg-2);
  border: var(--k-stroke) solid var(--k-c-border-strong);
  border-radius: var(--k-r-4);
  box-shadow: var(--k-elev-4);
  z-index: var(--k-z-popover);
  animation: k-capa-fade var(--k-m-fast);
}
.k-mb-ayuda__sub { padding: var(--k-s-1) var(--k-s-3); color: var(--k-c-fg-dim); font: 600 var(--k-fs-label)/1.4 var(--k-font-ui); text-transform: uppercase; letter-spacing: .06em; }
.k-mb-ayuda__it {
  display: flex; width: 100%; align-items: center;
  min-height: var(--k-h-row); padding: 0 var(--k-s-3);
  background: none; border: 0; border-radius: var(--k-r-2);
  color: var(--k-c-fg); font: inherit; text-align: left; cursor: pointer;
  white-space: normal; overflow-wrap: anywhere;
}
.k-mb-ayuda__it:hover { background: var(--k-c-hover); }
@media (pointer: coarse) {
  .k-mb-ayuda__btn { min-width: var(--k-hit); min-height: var(--k-hit); }
  .k-mb-ayuda__it { min-height: var(--k-hit); }
}

/* ── 01 · Panel de la empresa y Acerca de Konoos (capa «empresa») ──────
   Maqueta: .pop.tl.card.acerca.esq-pop. En celular, capa a pantalla completa
   entre la menubar y el suelo (§4.15), con scroll y barra visible (ui.md §1). */
.k-mb-emp-menu {
  position: fixed;
  top: calc(var(--k-header-h) + var(--k-s-1)); left: var(--k-s-2);
  width: var(--k-acerca-w); min-width: 0;
  max-width: calc(100% - var(--k-s-4));
  max-height: calc(100% - var(--k-header-h) - var(--k-suelo-h) - var(--k-s-4));
  overflow: auto; scrollbar-width: auto;
  padding: var(--k-s-4) var(--k-s-2) var(--k-s-3);
  background: var(--k-c-bg-2);
  border: var(--k-stroke) solid var(--k-c-border-strong);
  border-radius: var(--k-r-4);
  box-shadow: var(--k-elev-4);
  z-index: var(--k-z-popover);
  animation: k-capa-fade var(--k-m-fast);
}
/* Abierto desde «Powered by» (grupo sin el botón de la empresa, §4.16): sobre el
   suelo, a la derecha, como «Estado de Konoos». En celular manda la regla de abajo. */
.k-mb-emp-menu--pie {
  top: auto; left: auto;
  right: var(--k-s-2); bottom: calc(var(--k-suelo-h) + var(--k-s-1));
}
.k-mb-emp-menu__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--k-s-2);
  min-height: var(--k-h-btn-lg);
  padding: var(--k-s-1) var(--k-s-1) var(--k-s-1) 0;
}
.k-mb-acd { display: grid; gap: var(--k-s-1); flex: 1; min-width: 0; padding: 0 var(--k-s-3) var(--k-s-3); }
.k-mb-acd__fila { display: flex; align-items: center; gap: var(--k-s-2); }
.k-mb-acd__logo { display: block; height: var(--k-h-btn-sm); width: auto; }
.k-mb-acd__ver {
  font: 600 var(--k-fs-label)/1 var(--k-font-mono);
  color: var(--k-c-fg-muted);
  border: var(--k-stroke) solid var(--k-c-border-strong);
  border-radius: var(--k-r-1);
  padding: var(--k-gap-sm) var(--k-ver-pad-x);
  white-space: nowrap;
}
.k-mb-acd__lema { display: block; margin-top: var(--k-s-2); font: 600 var(--k-fs-h3)/var(--k-lh-tight) var(--k-font-ui); color: var(--k-c-fg); }
.k-mb-acd__lema-en { display: block; margin-top: var(--k-s-1); font: var(--k-fs-meta)/var(--k-lh-tight) var(--k-font-ui); color: var(--k-c-fg-muted); }
.k-mb-acd__env { display: block; margin-top: var(--k-s-1); font: var(--k-fs-label)/1 var(--k-font-mono); color: var(--k-info-fg); }
.k-mb-emp-menu__x {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--k-s-2);
  flex: none;
  width: var(--k-h-btn); height: var(--k-h-btn);
  border: 0; border-radius: var(--k-r-2);
  background: none; color: var(--k-c-fg-subtle); cursor: pointer;
}
.k-mb-emp-menu__x:hover { background: var(--k-c-hover); color: var(--k-c-fg); }
.k-mb-emp-menu__x svg { width: var(--k-ic-md); height: var(--k-ic-md); }
.k-mb-hr { height: var(--k-stroke); margin: var(--k-s-2) 0; background: var(--k-c-border); }
.k-mb-emp-menu__label {
  padding: var(--k-s-3) var(--k-s-3) var(--k-s-1) 0;
  font: 600 var(--k-fs-label)/1 var(--k-font-ui);
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--k-c-fg-dim);
}
.k-mb-emp-menu__q {
  display: block; width: 100%;
  height: var(--k-h-btn);
  margin: 0 0 var(--k-s-2);
  padding: 0 var(--k-s-3);
  background: var(--k-c-bg-2);
  border: var(--k-stroke) solid var(--k-c-border);
  border-radius: var(--k-r-3);
  color: var(--k-c-fg);
  font: inherit;
  outline: 0;
}
.k-mb-emp-menu__q::placeholder { color: var(--k-c-fg-subtle); }
.k-mb-emp-menu__q:focus { border-color: var(--k-brand-green-deep); }
.k-mb-emp-menu__q::-webkit-search-cancel-button { display: none; }
.k-mb-emp-menu__list { max-height: none; overflow: visible; margin-top: 0; }
.k-mb-emp-menu__item {
  display: flex; width: 100%; align-items: center; gap: var(--k-s-3);
  min-height: var(--k-h-row);
  padding: 0 var(--k-s-3);
  border-radius: var(--k-r-2);
  color: var(--k-c-fg);
  font-weight: 400;
}
.k-mb-emp-menu__item.is-active { background: none; }
.k-mb-emp-menu__item:hover { background: var(--k-c-hover); }
.k-mb-emp-menu__item small { margin-left: auto; font-size: smaller; font-family: var(--k-font-mono); color: var(--k-c-fg-subtle); }
.k-mb-emp-menu__avatar { width: var(--k-h-btn); height: var(--k-h-btn); border-radius: var(--k-r-full); overflow: hidden; flex: none; display: inline-flex; }
.k-mb-emp-menu__avatar img { width: 100%; height: 100%; object-fit: cover; }
.k-mb-emp-menu__main { min-width: 0; display: grid; }
.k-mb-emp-menu__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-mb-emp-menu__meta { font-size: var(--k-fs-label); color: var(--k-c-fg-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-mb-emp-menu__empty {
  margin: 0; padding: var(--k-s-2) var(--k-s-3);
  font-size: var(--k-fs-meta); text-align: left;
  color: var(--k-c-fg-dim);
}
/* «Acerca de Konoos» en acordeón. */
.k-mb-acd__acc {
  display: flex; width: 100%; align-items: center; justify-content: space-between;
  gap: var(--k-s-2);
  min-height: var(--k-h-btn-lg);
  padding: 0 var(--k-s-3);
  border-radius: var(--k-r-2);
  color: var(--k-c-fg); font-weight: 600; text-align: left;
}
.k-mb-acd__acc:hover { background: var(--k-c-hover); }
.k-mb-acd__car { width: var(--k-ic-sm); height: var(--k-ic-sm); flex: none; color: var(--k-c-fg-dim); transition: transform var(--k-m-fast); }
.k-mb-acd__acc[aria-expanded="true"] .k-mb-acd__car { transform: rotate(90deg); }
.k-mb-acd__cuerpo {
  padding: var(--k-s-1) var(--k-s-3) var(--k-s-3);
  font-size: var(--k-fs-meta); color: var(--k-c-fg-muted);
  animation: k-capa-fade var(--k-m-fast);
}
.k-mb-acd__cuerpo p { margin: 0 0 var(--k-s-1); }
.k-mb-acd__cuerpo p:last-child { margin-bottom: 0; }
.k-mb-acd__ir {
  display: inline-flex; align-items: center; gap: var(--k-s-1);
  margin-top: var(--k-s-1);
  color: var(--k-info-fg); font-weight: 500;
  border-radius: var(--k-r-2);
}
.k-mb-acd__ir:hover { color: var(--k-c-fg); }
.k-mb-acd__ir svg { width: var(--k-ic-xs); height: var(--k-ic-xs); }
.k-mb-acd__pie { margin: 0; padding: var(--k-s-2) var(--k-s-3) 0; color: var(--k-info-fg); font-size: var(--k-fs-meta); }
@media (max-width: 699px) {
  .k-mb-emp-menu {
    top: var(--k-header-h); bottom: var(--k-suelo-h); left: 0; right: 0;
    display: block; flex-direction: column;
    width: auto; max-width: none; max-height: none;
    padding: var(--k-s-2) var(--k-s-4) var(--k-s-4);
    border: 0; border-radius: 0;
    box-shadow: var(--k-elev-4);
    z-index: var(--k-z-overlay);
    animation: none;
  }
  .k-mb-emp-menu__list {
    flex: none; min-height: 0;
    scrollbar-width: auto; scrollbar-color: var(--k-c-fg-dim) transparent;
  }
  .k-mb-emp-menu__x { width: var(--k-hit); height: var(--k-hit); }
  .k-mb-emp-menu__item, .k-mb-acd__acc { min-height: var(--k-hit); }
}

/* ── 01b · Tarjeta del usuario (wires7-spec §4.14 / §4.15) ─────────────
   Capa del shell (cshell/js/tarjeta.js). Escritorio: desplegable anclado al
   botón de usuario. Celular: pantalla completa entre la menubar y el suelo,
   ✕ de --k-hit. */
.k-tj-panel {
  position: fixed;
  top: calc(var(--k-header-h) + var(--k-s-1)); right: var(--k-s-2); left: auto;
  z-index: var(--k-z-popover);
  width: var(--k-card-w);
  max-width: calc(100% - var(--k-s-4));
  max-height: calc(100% - var(--k-header-h) - var(--k-suelo-h) - var(--k-s-4));
  overflow: auto;
  scrollbar-width: auto; scrollbar-color: var(--k-c-fg-dim) transparent;
  padding: var(--k-s-2) var(--k-s-3) var(--k-s-3);
  background: var(--k-c-bg-2);
  border: var(--k-stroke) solid var(--k-c-border-strong);
  border-radius: var(--k-r-4);
  box-shadow: var(--k-elev-4);
  color: var(--k-c-fg);
  font-size: var(--k-fs-body);
  animation: k-capa-fade var(--k-m-fast);
}
.k-tj-panel:empty { display: none; }
.k-tj-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--k-s-2);
  min-height: var(--k-h-btn-lg);
  padding: var(--k-s-1) var(--k-s-1) var(--k-s-1) 0;
  border-bottom: 0;
  font-size: inherit;
}
.k-tj-head b { flex: 1; font-weight: 600; font-size: var(--k-fs-h3); }
.k-tj-x {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--k-s-2);
  width: var(--k-h-btn); height: var(--k-h-btn);
  border: 0; border-radius: var(--k-r-2);
  background: none; color: var(--k-c-fg-subtle);
  cursor: pointer; flex: none;
}
.k-tj-x:hover { background: var(--k-c-hover); color: var(--k-c-fg); }
.k-tj-x svg { width: var(--k-ic-md); height: var(--k-ic-md); }

/* La cara clara, como papel (maqueta .bcard): franja de marca, empresa, foto y
   QR lado a lado, y debajo nombre, cargo y datos. */
.k-tj-bcard {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr); flex-direction: column;
  gap: var(--k-s-3) var(--k-s-4);
  margin-bottom: var(--k-s-2);
  padding: calc(var(--k-s-4) + var(--k-bc-strip)) var(--k-s-4) var(--k-s-4);
  background: var(--k-w-bg-1); color: var(--k-w-fg);
  border-radius: var(--k-r-4);
  box-shadow: var(--k-elev-w-3);
  overflow: hidden;
}
.k-tj-bcard::before {
  content: ""; position: absolute; inset: 0 0 auto 0;
  height: var(--k-bc-strip);
  background: var(--k-grad-h);
}
/* Primera fila: la marca a la izquierda, la foto a la derecha. El logo va sin fondo
   (se respeta su transparencia) y tarjeta.js lo normaliza por área (--k-bc-logo-area);
   sin JS lo contienen los topes. La foto y el QR miden lo mismo y se ajustan al
   ancho de la tarjeta (contenedor .k-tj-bcard), con --k-qr de tope. */
.k-tj-bcard { container-type: inline-size; --k-tj-media: clamp(calc(var(--k-qr) * .64), 28cqi, var(--k-qr)); }
.k-tj-top { display: flex; align-items: center; justify-content: space-between; gap: var(--k-s-3); margin: 0; min-width: 0; }
.k-tj-top__marca { display: flex; align-items: center; gap: var(--k-s-2); min-width: 0; }
.k-tj-top__marca.con-logo { flex-direction: column; align-items: flex-start; gap: var(--k-s-2); }
.k-tj-top__logo {
  display: block; flex: none;
  width: auto; height: auto;
  max-width: var(--k-bc-logo-w); max-height: var(--k-bc-logo-h);
  object-fit: contain;
}
.k-tj-top__ini {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: var(--k-bc-logo); height: var(--k-bc-logo);
  border-radius: var(--k-r-3);
  background: var(--k-w-bg-2); color: var(--k-w-fg);
  box-shadow: inset 0 0 0 var(--k-stroke) var(--k-w-border);
  font: 700 var(--k-fs-body)/1 var(--k-font-ui);
  letter-spacing: .04em;
}
.k-tj-top__emp { display: grid; min-width: 0; }
.k-tj-top__emp b { font-size: var(--k-fs-meta); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-tj-top__marca small { max-width: 100%; font-family: var(--k-font-mono); font-size: var(--k-fs-label); color: var(--k-w-fg-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-tj-sep { height: var(--k-stroke); background: var(--k-w-border); }
/* Última fila: los datos a la izquierda, el QR a la derecha, alineados abajo. */
.k-tj-main { display: flex; align-items: flex-end; gap: var(--k-s-3); min-width: 0; }
.k-tj-main > .k-tj-datos { flex: 1; margin: 0; }
.k-tj-foto {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: var(--k-tj-media); height: var(--k-tj-media);
  border-radius: var(--k-r-4);
  background: var(--k-brand-green); color: var(--k-c-bg-0);
  box-shadow: inset 0 0 0 var(--k-stroke) var(--k-w-border);
  font: 600 var(--k-fs-display)/1 var(--k-font-mono);
  overflow: hidden;
}
.k-tj-foto img { width: 100%; height: 100%; object-fit: cover; }
/* Sin tarjeta de contacto (tarjeta.js tarjetaSinContacto): iniciales en pequeño junto al nombre. */
.k-tj-sin { display: flex; align-items: center; gap: var(--k-s-3); min-width: 0; }
.k-tj-foto--sm { width: var(--k-hit); height: var(--k-hit); border-radius: var(--k-r-3); font-size: var(--k-fs-h2); }
.k-tj-sin__nota { margin: 0; font-size: var(--k-fs-meta); color: var(--k-w-fg-subtle); }
/* El QR se dibuja sobre la cara clara de la tarjeta. */
.k-tj-qr {
  display: flex; align-items: center; justify-content: center; flex: none;
  align-self: center;
  width: var(--k-tj-media); height: var(--k-tj-media);
  margin-left: auto; padding: 0;
  border-radius: 0; background: none;
}
.k-tj-qr img { width: 100%; height: 100%; }
.k-tj-qr__vacio { font-size: var(--k-fs-meta); color: var(--k-w-fg-subtle); text-align: center; }
.k-tj-info { display: grid; flex-direction: column; gap: var(--k-s-1); min-width: 0; }
/* El nombre ocupa su propia fila a todo el ancho y no se parte en dos líneas; solo
   si no cabe ni así, puntos suspensivos (el nombre completo va en el title). */
.k-tj-info__nombre { font-size: var(--k-fs-h2); font-weight: 600; line-height: var(--k-lh-tight); letter-spacing: -.01em;
                     white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Tarjeta angosta (teléfono chico): el QR baja debajo de los datos, centrado. */
@container (max-width: 300px) {
  .k-tj-main { flex-direction: column; align-items: stretch; }
  .k-tj-main > .k-tj-qr { align-self: center; margin-left: 0; }
}
.k-tj-info__cargo { font-size: var(--k-fs-meta); color: var(--k-w-fg-subtle); }
.k-tj-datos {
  display: grid; flex-direction: column; gap: var(--k-s-1);
  margin: var(--k-s-1) 0 0; min-width: 0;
  font-size: var(--k-fs-meta); color: var(--k-w-fg-muted);
}
.k-tj-fila { display: flex; align-items: center; gap: var(--k-s-2); min-width: 0; padding: 0; border-bottom: 0; }
.k-tj-fila:last-child { border-bottom: 0; }
.k-tj-fila > svg { width: var(--k-ic-sm); height: var(--k-ic-sm); flex: none; color: var(--k-w-fg-subtle); }
.k-tj-fila > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-tj-fila.is-off > span, .k-tj-fila.is-off > svg { opacity: .45; text-decoration: line-through; }
/* Dato sin registrar: la fila se ve igual de alta, atenuada, y abre Configuración de mi cuenta. */
.k-tj-info__cargo.is-vacio { color: var(--k-w-fg-subtle); font-style: italic; }
button.k-tj-fila.is-vacia {
  display: flex; align-items: center; width: 100%; min-height: var(--k-h-btn-sm);
  margin: 0; border: 0; background: none; text-align: left; cursor: pointer;
  font: inherit; color: var(--k-w-fg-subtle); font-style: italic;
}
button.k-tj-fila.is-vacia:hover > span { color: var(--k-w-fg-muted); text-decoration: underline; }
.k-tj-ojo {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--k-s-2);
  width: var(--k-h-btn-sm); height: var(--k-h-btn-sm);
  border: 0; border-radius: var(--k-r-2);
  background: none; color: var(--k-w-fg-subtle);
  cursor: pointer; flex: none;
}
.k-tj-ojo:hover { background: var(--k-w-bg-2); color: var(--k-w-fg); }
.k-tj-ojo[aria-pressed="true"] { color: var(--k-w-fg-subtle); }
.k-tj-ojo svg { width: var(--k-ic-sm); height: var(--k-ic-sm); }
/* TODO(3707 C6): .k-tj-hint le gana a .k-tj-hint--error (misma especificidad, va
   después) y el error sale en gris; se deja así en el lote de normas porque el
   lote no cambia lo que se ve. */
.k-tj-hint--error { color: var(--k-danger-fg); }
.k-tj-hint { margin: 0; padding: var(--k-s-1) 0 0; font-size: var(--k-fs-meta); color: var(--k-c-fg-dim); text-wrap: pretty; }
.k-tj-hr { height: var(--k-stroke); margin: var(--k-s-2) 0; background: var(--k-c-border); }
.k-tj-mi {
  display: flex; align-items: center; gap: var(--k-s-3);
  width: 100%; min-height: var(--k-h-row);
  padding: 0 var(--k-s-3);
  border: 0; border-radius: var(--k-r-2);
  background: none; color: var(--k-c-fg);
  font-size: inherit; text-align: left; cursor: pointer;
}
.k-tj-mi:hover { background: var(--k-c-hover); }
.k-tj-mi:active { background: var(--k-c-active); }
.k-tj-mi svg { width: var(--k-ic-md); height: var(--k-ic-md); flex: none; color: var(--k-c-fg-subtle); }
.k-tj-mi small { margin-left: auto; font-family: var(--k-font-mono); color: var(--k-c-fg-subtle); }
/* «Mi disponibilidad» (§4.14): fila con el estado actual que despliega la lista
   de estados. El punto es .k-avatar__dot (base.css, un color por estado), aquí
   en línea en vez de sobre el avatar. */
.k-tj-pres .k-avatar__dot { position: static; flex: none; width: var(--k-s-2); height: var(--k-s-2); border: 0; }
.k-tj-pres__txt { display: grid; flex: 1; min-width: 0; }
.k-tj-pres__txt > span { font-size: var(--k-fs-meta); color: var(--k-c-fg-subtle); }
.k-tj-pres__val { font-size: var(--k-fs-meta); color: var(--k-c-fg-subtle); white-space: nowrap; }
.k-tj-mi[aria-expanded="true"] > svg:last-child { transform: rotate(180deg); }
.k-tj-pres__lista { display: grid; gap: var(--k-stroke); padding-left: var(--k-s-3); }
.k-tj-pres__op { padding-top: var(--k-s-1); padding-bottom: var(--k-s-1); }
.k-tj-pres__op[aria-checked="true"] { background: var(--k-c-active); }
@media (max-width: 699px) {
  .k-tj-panel--mobile {
    top: var(--k-header-h); bottom: var(--k-suelo-h); left: 0; right: 0;
    width: auto; max-width: none; max-height: none;
    border: 0; border-radius: 0;
    padding: var(--k-s-2) var(--k-s-4) var(--k-s-4);
    animation: none;
  }
  /* En celular la barra de scroll no se ve: el contenido se desvanece en el borde
     inferior, la señal de que hay más abajo (p. ej. «Cerrar sesión»). Ocupa su
     propio alto al final, así que al llegar abajo no tapa la última fila. */
  .k-tj-panel--mobile::after {
    content: ""; display: block; position: sticky; bottom: 0;
    height: var(--k-s-8);
    background: linear-gradient(transparent, var(--k-c-bg-2));
    pointer-events: none;
  }
  .k-tj-panel--mobile .k-tj-x { width: var(--k-hit); height: var(--k-hit); }
  .k-tj-panel--mobile .k-tj-ojo { width: var(--k-hit); height: var(--k-hit); }
  .k-tj-panel--mobile .k-tj-mi { min-height: var(--k-hit); }
}

/* ── 05 · Búsqueda (lupa) (wires7-spec §4.10 y bloque «Mapa v3», §4.15;
   ide-menu-arbol-spec §13.5.5) ────────────────────────────────────────────
   cshell/js/lupa.js. La caja es el input de la menubar (≥ 1100 px) o el campo
   de la cabecera del Mapa (< 1100 px). Con la caja vacía, el historial baja
   como su desplegable (capa `busqueda`, apilada sobre el Mapa): el overlay
   cubre el área entre la menubar y el suelo, sin velo (tocar fuera cierra), y
   lupa.js fija x, y y ancho bajo la caja. Lo que se escribe lo pinta el Mapa. */
.k-lupa-overlay {
  position: fixed;
  top: var(--k-header-h); bottom: var(--k-suelo-h); left: 0; right: 0;
  z-index: var(--k-z-overlay);
  padding: var(--k-s-1) var(--k-s-4) var(--k-s-4);
}
.k-lupa {
  position: absolute; top: var(--k-s-1); left: var(--k-s-4);
  width: calc(var(--k-drop-w) + var(--k-s-8));
  max-width: calc(100% - var(--k-s-4));
  display: flex; flex-direction: column;
  color: var(--k-c-fg);
  font-size: var(--k-fs-body);
}
/* overflow:hidden recorta el radio; el scroll lo lleva .k-lupa__body. */
.k-lupa__drop {
  display: flex; flex-direction: column; min-height: 0;
  max-height: 60vh;
  overflow: hidden;
  background: var(--k-c-bg-2);
  border: var(--k-stroke) solid var(--k-c-border-strong);
  border-radius: var(--k-r-4);
  box-shadow: var(--k-elev-4);
  padding: var(--k-s-1);
  animation: k-capa-fade var(--k-m-fast);
}
/* Cabecera del historial: el selector «Recientes | Frecuentes» y ✕. */
.k-lupa__hist-h {
  display: flex; align-items: center; gap: var(--k-s-2);
  padding: var(--k-s-1) var(--k-s-1) var(--k-s-2) var(--k-s-2);
}
.k-lupa__orden { display: inline-flex; flex: 1; min-width: 0; gap: var(--k-s-1); }
.k-lupa__orden-b {
  height: var(--k-h-btn-sm); padding: 0 var(--k-s-3);
  border: var(--k-stroke) solid var(--k-c-border); border-radius: var(--k-r-full);
  background: none; color: var(--k-c-fg-muted);
  font: inherit; font-size: var(--k-fs-meta); white-space: nowrap; cursor: pointer;
}
.k-lupa__orden-b:hover { background: var(--k-c-hover); color: var(--k-c-fg); }
.k-lupa__orden-b[aria-pressed="true"] { background: var(--k-c-active); border-color: var(--k-c-border-strong); color: var(--k-c-fg); }
.k-lupa__x {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
  width: var(--k-h-btn); height: var(--k-h-btn);
  border: 0; border-radius: var(--k-r-2);
  background: none; color: var(--k-c-fg-subtle); cursor: pointer;
}
.k-lupa__x:hover { background: var(--k-c-hover); color: var(--k-c-fg); }
.k-lupa__x svg { width: var(--k-ic-md); height: var(--k-ic-md); }

/* Historial: contenido variable, barra estándar visible (ui.md §1). Rejilla de
   dos columnas compartida por las filas (subgrid): el icono y el título
   arrancan a la misma x en todas. */
.k-lupa__body {
  display: grid; grid-template-columns: max-content minmax(0, 1fr);
  column-gap: var(--k-s-3); align-content: start;
  flex: 1; min-height: 0; overflow-y: auto;
  scrollbar-width: auto; scrollbar-color: var(--k-c-fg-dim) transparent;
}
.k-lupa__empty {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  gap: var(--k-s-2); padding: var(--k-s-2) var(--k-s-3); text-align: left;
  color: var(--k-c-fg-dim);
}
.k-lupa__empty-title { font-size: var(--k-fs-meta); color: var(--k-c-fg-dim); text-wrap: pretty; }

/* Fila del historial: icono · nombre · contexto. */
.k-lupa__body > * { grid-column: 1 / -1; }
.k-lupa__tile {
  display: grid; grid-template-columns: subgrid; align-items: center;
  width: 100%; min-height: var(--k-h-row);
  padding: var(--k-s-2) var(--k-s-3);
  border: 0;
  border-radius: var(--k-r-2);
  background: none;
  color: var(--k-c-fg);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--k-m-fast);
}
.k-lupa__tile:hover, .k-lupa__tile.is-sel { background: var(--k-c-hover); }
.k-lupa__ico { display: inline-flex; color: var(--k-c-fg-subtle); }
.k-lupa__ico svg { width: var(--k-ic-sm); height: var(--k-ic-sm); }
.k-lupa__tile-main { display: flex; align-items: center; gap: var(--k-s-3); flex: 1; min-width: 0; }
/* Prioridad del título (director, brief 3707): el contexto se come como mucho
   el 40 % de la fila y el título (flex-basis 0) se queda con el resto, así que
   cuando no entran los dos, se recorta primero el contexto. */
.k-lupa__tile-title { flex: 1 1 0%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--k-fs-body); font-weight: 400; color: var(--k-c-fg); }
.k-lupa__tile-meta { margin-left: auto; flex: 0 1 auto; min-width: 0; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--k-fs-meta); color: var(--k-c-fg-subtle); }

/* Escritorio: sin ✕ (cierra con Esc o tocando fuera, como la caja de la maqueta). */
@media (min-width: 700px) {
  .k-lupa__x { display: none; }
}
/* Celular (§4.15): el desplegable toma el ancho (lupa.js) y ✕ mide 44 px. */
@media (max-width: 699px) {
  .k-lupa-overlay { padding: 0 var(--k-s-2); }
  .k-lupa__x { width: var(--k-hit); height: var(--k-hit); }
}
/* Puntero grueso (§4.9): blancos de toque ≥ 44px. */
@media (pointer: coarse) {
  .k-lupa__x, .k-lupa__orden-b { min-height: var(--k-hit); }
  .k-lupa__x { min-width: var(--k-hit); }
}

/* ── 06 · Estado de Konoos: LED en «Powered by» y su capa (maqueta: .led,
   .pop.br.est, estadoHTML). La lectura es real (metrics.get_estado_konoos) y la
   dibuja cshell/js/estado.js; la reciben también los shells públicos. */
.k-sb__led {
  display: inline-block; flex: none;
  width: var(--k-led); height: var(--k-led);
  border-radius: var(--k-r-full);
  background: var(--k-success-fg);
  box-shadow: 0 0 0 var(--k-ring-w) var(--k-success-bg);
}
.k-sb__led[hidden] { display: none; }
.k-sb__led--bad { background: var(--k-danger); box-shadow: 0 0 0 var(--k-ring-w) var(--k-danger-bg); }
.k-sb__led--warn { background: var(--k-warning); box-shadow: 0 0 0 var(--k-ring-w) var(--k-warning-bg); }
.k-sb__led--none { background: var(--k-c-border-strong); box-shadow: 0 0 0 var(--k-ring-w) var(--k-c-border); }
.k-sb__pw[aria-disabled="true"] { cursor: default; }
.k-sb__pw[aria-disabled="true"]:hover { background: none; }
.k-sb-pop.k-sb-pop--estado { width: var(--k-est-w); padding: var(--k-s-2) var(--k-s-3) var(--k-s-3); font-family: var(--k-font-ui); }
.k-sb-pop--estado .k-sb-pop__h { padding-left: 0; }
.k-sb-pop--estado .k-sb-pop__b { padding: 0; }
.k-est-h { display: flex; align-items: center; gap: var(--k-s-3); padding: var(--k-s-1) 0 var(--k-s-3); }
.k-est-h .k-sb__led { width: calc(var(--k-led) * 1.5); height: calc(var(--k-led) * 1.5); }
.k-est-h span { display: grid; }
.k-est-h small { font-size: var(--k-fs-label); color: var(--k-c-fg-subtle); }
.k-est-l { display: grid; gap: var(--k-s-3); }
.k-est-n { display: flex; justify-content: space-between; gap: var(--k-s-2); font-size: var(--k-fs-meta); }
.k-est-n small { font-family: var(--k-font-mono); font-size: var(--k-fs-label); }
.k-est-n__ok { color: var(--k-success-fg); }
.k-est-n__bad { color: var(--k-danger-fg); }
.k-est-n__warn { color: var(--k-warning-fg); }
.k-est-n__none { color: var(--k-c-fg-subtle); }
/* Una fila por servicio: nombre + etiqueta y, debajo, las 24 barras horarias. */
.k-est-r { display: grid; gap: var(--k-s-1); }
.k-est-bars { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: var(--k-gap-xs); height: var(--k-bar-h); }
.k-est-bars i { border-radius: var(--k-r-1); background: var(--k-success); }
.k-est-bars i.warn { background: var(--k-warning); }
.k-est-bars i.bad { background: var(--k-danger); }
.k-est-bars i.none { background: var(--k-c-border-strong); }
.k-est-f { display: flex; justify-content: space-between; margin-top: var(--k-s-2); font: var(--k-fs-micro)/1 var(--k-font-mono); color: var(--k-c-fg-dim); }
/* «De su empresa»: una fila por conector; el texto puede ser largo (la capa hace overflow:auto). */
.k-est-c { display: flex; align-items: center; gap: var(--k-s-2); margin-top: var(--k-s-3); padding-top: var(--k-s-3); border-top: var(--k-stroke) solid var(--k-c-border); font-size: var(--k-fs-meta); color: var(--k-c-fg-muted); }
.k-est-c .k-sb__led { box-shadow: none; }
.k-est-c__t { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.k-est-ver { flex: none; min-height: var(--k-h-btn-sm); padding: 0 var(--k-s-2); border: var(--k-stroke) solid var(--k-c-border-strong); border-radius: var(--k-r-3); background: transparent; color: var(--k-c-fg); font: inherit; font-size: var(--k-fs-meta); font-weight: 600; cursor: pointer; }
.k-est-ver:hover { background: var(--k-c-hover); }
/* Shells públicos: «Powered by» abre la capa y el enlace a konoos.com va bajo el título. */
.k-est-web { font-size: var(--k-fs-label); color: var(--k-c-fg-subtle); text-decoration: none; }
.k-est-web:hover { color: var(--k-c-fg); text-decoration: underline; }
/* Celular: la capa ocupa todo el ancho (el width del estado gana en especificidad al width:auto de chrome-suelo.css) y «Ver» es blanco de toque. */
@media (max-width: 699px) {
  .k-sb-pop.k-sb-pop--estado { width: auto; }
  .k-est-ver { min-height: var(--k-hit); padding: 0 var(--k-s-3); }
}
.k-sb-pop__mi .k-sb__led { box-shadow: none; }