/* ════════════════════════════════════════════════════════════════════
   CHROME IDE v7 · suelo, iconbar e itembar — 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 del suelo, el iconbar ni el itembar).
   Lo cargan el shell (desktop.php) y el documento del iconbar (_rail.php).
   Solo tokens --k-* (tokens.css). Piso §4.9: ni consultas de contenedor ni
   mezclas de color.
   ════════════════════════════════════════════════════════════════════ */

/* ── 06 · Suelo (wires7-spec §4.7, §4.8): ojos · iconbar · estado · «Más» ·
   itembar acoplado · Acerca de. El texto hereda el cuerpo del chrome (como
   #suelo de la maqueta). ── */
.k-sb {
  display: flex; align-items: stretch; gap: var(--k-s-1);
  height: var(--k-suelo-h);
  padding: 0 var(--k-s-2);
  background: var(--k-c-bg-1);
  border-top: var(--k-stroke) solid var(--k-c-border);
  color: var(--k-c-fg);
  font-size: var(--k-fs-body);
  line-height: var(--k-lh-base);
  font-variant-numeric: tabular-nums;
  position: relative; z-index: 2;
  /* contenido fijo: el iconbar mide su propio desborde (dailybar.js) y el
     estado baja a «Más»; nada queda fuera de alcance. */
  overflow: hidden;
}
.k-sb__slot-ojos { flex: none; display: flex; }
/* El grupo apagó los ojos (wires7 §4.16): el slot vacío no ocupa lugar (en celular crece). */
.k-sb__slot-ojos:empty { display: none; }
.k-sb__rail { flex: 1 1 auto; min-width: 0; width: auto; height: 100%; border: 0; background: transparent; display: block; }
.k-sb__estado { flex: none; display: flex; align-items: center; justify-content: flex-end; gap: var(--k-s-1); }

.k-sb__ojos {
  width: var(--k-eyes-w);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--k-gap-xs);
  padding: 0; border: 0; background: transparent;
  border-radius: var(--k-r-3);
  color: var(--k-c-fg-muted);
  cursor: pointer;
}
.k-sb__ojos:hover { background: var(--k-c-hover); color: var(--k-c-fg); }
.k-sb__ojos[aria-pressed="true"] { background: var(--k-c-active); color: var(--k-c-fg); }
.k-sb__ojos-svg { width: var(--k-eyes-svg-w); height: var(--k-eyes-svg-h); overflow: visible; }
.k-sb__pu { fill: var(--k-c-fg); transition: transform var(--k-m-fast) var(--k-ease-out); }
.k-sb__ojos-lb { font-size: var(--k-fs-micro); font-weight: 600; letter-spacing: .06em; }

.k-sb__btn {
  display: inline-flex; align-items: center; gap: var(--k-s-2);
  height: var(--k-h-btn);
  padding: 0 var(--k-s-2);
  border: 0; background: transparent;
  color: var(--k-c-fg-subtle);
  font: inherit; font-size: var(--k-fs-meta);
  white-space: nowrap;
  border-radius: var(--k-r-2);
  cursor: pointer;
}
.k-sb__btn[hidden] { display: none; }
.k-sb__btn:hover { background: var(--k-c-hover); color: var(--k-c-fg); }
.k-sb__btn[aria-pressed="true"] { color: var(--k-danger-fg); }
.k-sb__btn svg { width: var(--k-ic-sm); height: var(--k-ic-sm); }
.k-sb__apr { color: var(--k-c-fg); border: var(--k-stroke) solid var(--k-c-border-strong); border-radius: var(--k-r-full); }
.k-sb__n { font-family: var(--k-font-mono); font-weight: 600; color: var(--k-warning-fg); }
.k-sb__env { font: var(--k-fs-label)/1 var(--k-font-mono); color: var(--k-c-fg-dim); padding: 0 var(--k-s-2); white-space: nowrap; }

/* «Powered by Konoos»: el botón en fila y, adentro, el rótulo sobre el logo. */
.k-sb__pw {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: var(--k-s-2);
  line-height: var(--k-lh-base);
}
.k-sb__pw-in { display: inline-grid; gap: var(--k-gap-xs); justify-items: start; line-height: 1; }
.k-sb__pw-t { display: block; font: 500 var(--k-fs-micro)/1 var(--k-font-ui); color: var(--k-c-fg-dim); letter-spacing: .04em; }
.k-sb__pw-logo { height: var(--k-ic-sm); width: auto; display: block; }

/* ── Iconbar (dentro del iframe del rail; CSS compartido, topologia §5) ── */
.k-db.k-db--suelo { flex-direction: row; border-right: 0; background: transparent; }
.k-ib {
  display: flex; align-items: stretch;
  gap: var(--k-gap-xs);
  width: 100%; height: 100%;
  box-sizing: border-box;
  padding: 0 0 0 var(--k-s-1);
  border-left: var(--k-stroke) solid var(--k-c-border);
  /* contenido fijo: dailybar.js oculta lo que no cabe y lo ofrece en «Más». */
  overflow: hidden;
}
.k-ib__btn {
  position: relative;
  flex: none;
  width: var(--k-ab-w);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--k-gap-sm);
  margin: var(--k-s-1) 0; padding: 0;
  border: 0; background: transparent;
  color: var(--k-c-fg-muted);
  font: inherit;
  border-radius: var(--k-r-3);
  cursor: pointer;
}
.k-ib__btn[hidden] { display: none; }
.k-ib__btn:hover { background: var(--k-c-hover); color: var(--k-c-fg); }
.k-ib__btn[aria-pressed="true"] { background: var(--k-c-active); color: var(--k-c-fg); }
.k-ib__btn[aria-pressed="true"]::before {
  content: ""; position: absolute; top: 0; left: var(--k-s-3); right: var(--k-s-3);
  height: var(--k-stroke-2); background: var(--k-grad-h); border-radius: var(--k-r-full);
}
.k-ib__btn svg { width: var(--k-ab-ic); height: var(--k-ab-ic); }
.k-ib__lb { font-size: var(--k-ab-fs); font-weight: 500; line-height: 1; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.k-ib__n {
  position: absolute; top: var(--k-gap-xs); left: calc(50% + var(--k-s-1) + var(--k-gap-xs));
  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-brand-green-deep); color: var(--k-c-bg-0);
  font: 600 var(--k-fs-micro)/var(--k-s-4) var(--k-font-mono);
  text-align: center;
}
.k-ib__n[hidden] { display: none; }
/* «Más» es el último botón, pegado al borde: su contador se ancla por la derecha
   para que «99+» no quede recortado por el overflow de la fila. */
.k-ib__mas .k-ib__n { left: auto; right: 0; }
.k-ib__n--warn { background: var(--k-warning); }
.k-ib__n--danger { background: var(--k-danger); color: var(--k-c-fg); }
.k-ib--cel { border-left: 0; padding: 0; justify-content: space-around; gap: 0; }
.k-ib--cel .k-ib__btn { flex: 1 1 0; width: auto; min-width: var(--k-hit); max-width: var(--k-ab-w); }

/* ── Marco del itembar (§4.7): acoplado a la izquierda, de alto completo (de la
   menubar al suelo); va después de NOOS acoplada a la izquierda y el
   workspace se corre a su derecha. Con un panel de Daily-Office la ✕ vive en
   la cabecera del panel (una sola fila); «Por aprobar» conserva la del marco. ── */
.k-itb {
  position: absolute;
  top: var(--k-header-h); bottom: var(--k-suelo-h);
  left: var(--k-off-noos);
  width: var(--k-itembar-w);
  z-index: 1;
}
.k-itb[hidden] { display: none; }
.k-itb__caja {
  height: 100%;
  display: flex; flex-direction: column;
  background: var(--k-c-bg-1);
  border-right: var(--k-stroke) solid var(--k-c-border-strong);
  overflow: hidden;   /* el scroll vive dentro del panel (daily-panel.css) */
}
.k-itb__barra { flex: none; display: flex; justify-content: flex-end; padding: var(--k-gap-xs) var(--k-gap-xs) 0; }
.k-itb--do .k-itb__barra { display: none; }
.k-itb__x {
  width: var(--k-h-btn-sm); height: var(--k-h-btn-sm);
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent;
  color: var(--k-c-fg-subtle);
  border-radius: var(--k-r-2);
  cursor: pointer;
}
.k-itb__x:hover, .k-sb-pop__x:hover { background: var(--k-c-hover); color: var(--k-c-fg); }
.k-itb__x svg { width: var(--k-ic-md); height: var(--k-ic-md); }
.k-itb__frame { flex: 1 1 auto; min-height: 0; width: 100%; border: 0; display: block; background: transparent; }

/* ── Capas del suelo: «Más», idioma, Acerca de (maqueta: .pop, .card-h, .mi) ── */
.k-sb-pop {
  position: fixed;
  bottom: var(--k-pop-b);
  min-width: calc(var(--k-drop-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;
  padding: var(--k-s-2);
  background: var(--k-c-bg-2); color: var(--k-c-fg);
  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);
}
.k-sb-pop--izq { left: var(--k-pop-l); }
.k-sb-pop--der { right: var(--k-pop-r); }
.k-sb-pop__h {
  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) var(--k-s-3);
}
.k-sb-pop__h b { font-size: var(--k-fs-meta); font-weight: 600; }
.k-sb-pop__h > b, .k-sb-pop__pw > b { flex: 1; font-size: var(--k-fs-h3); font-weight: 600; line-height: var(--k-lh-base); }
.k-sb-pop__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; background: transparent;
  color: var(--k-c-fg-subtle);
  border-radius: var(--k-r-2);
  cursor: pointer;
}
.k-sb-pop__x svg { width: var(--k-ic-md); height: var(--k-ic-md); }
.k-sb-pop__pw { flex: 1; min-width: 0; display: grid; gap: var(--k-s-2); }
.k-sb-pop__pw .k-sb__pw-logo { height: var(--k-ic-md); }
.k-sb-pop__mi {
  display: flex; width: 100%; align-items: center; justify-content: flex-start; gap: var(--k-s-3);
  min-height: var(--k-h-row);
  padding: 0 var(--k-s-3);
  border: 0; background: transparent;
  color: var(--k-c-fg);
  font: inherit; font-size: var(--k-fs-body);
  text-align: left;
  border-radius: var(--k-r-2);
  cursor: pointer;
}
.k-sb-pop__mi:hover { background: var(--k-c-hover); }
.k-sb-pop__mi[aria-pressed="true"] { background: var(--k-c-active); }
.k-sb-pop__mi:disabled { color: var(--k-c-fg-dim); background: transparent; cursor: default; }
.k-sb-pop__mi svg { flex: none; width: var(--k-ic-md); height: var(--k-ic-md); color: var(--k-c-fg-subtle); }
.k-sb-pop__mi small { margin-left: auto; font-family: var(--k-font-mono); color: var(--k-c-fg-subtle); }
.k-sb-pop__mi small + small { margin-left: var(--k-s-2); }
.k-sb-pop__hr { height: var(--k-stroke); margin: var(--k-s-2) 0; background: var(--k-c-border); }

/* ── Celular (< 700 px, §4.9): ojos + 5 iconos + «Más», los ojos más chicos
   (maqueta: .app.cel .ojos); itembar y capas a pantalla completa. ── */
@media (max-width: 699px) {
  .k-sb { padding: 0 var(--k-s-1); gap: 0; }
  .k-sb__slot-ojos { flex: 1 1 0; max-width: var(--k-eyes-w); }
  .k-sb__ojos { width: 100%; min-width: var(--k-hit); }
  .k-sb__ojos-svg { width: calc(var(--k-eyes-svg-w) - var(--k-s-2)); height: calc(var(--k-eyes-svg-h) - var(--k-s-1)); }
  .k-sb__rail { flex: 6 1 0; }
  .k-sb__estado { display: none; }
  .k-ib__n { font-size: var(--k-fs-min-tactil); }   /* contador legible en celular (4158) */
  .k-itb { left: 0; right: 0; width: auto; z-index: var(--k-z-overlay); }
  .k-itb__caja { border: 0; }
  .k-itb__x, .k-sb-pop__x { width: var(--k-hit); height: var(--k-hit); }
  .k-sb-pop {
    top: var(--k-header-h); bottom: var(--k-suelo-h); left: 0; right: 0;
    width: auto; min-width: 0; max-width: none; max-height: none;
    border: 0; border-radius: 0;
    z-index: var(--k-z-overlay);
  }
  .k-sb-pop__mi { min-height: var(--k-hit); }
}