/* ════════════════════════════════════════════════════════════════════
   CHROME IDE v7 · barras del shell público y semipúblico (wires7-spec §4.16)
   Solo lo propio de las barras públicas: el statusbar fijo abajo que reserva su
   espacio, el acento, el lugar del aviso de cookies y las capas de las secciones
   del rail. El dibujo del suelo
   (.k-sb, .k-sb__ojos, .k-sb__btn, .k-sb__pw) vive en chrome-suelo.css y no se
   redefine acá. Lo carga cshell/publico_barras.php dentro del <body>, después de
   la <style> de _public_shell.php, así que gana en la cascada sin tocarla.
   Colores por barra: custom properties inline en el elemento (barras-color.js).
   Solo tokens --k-* (tokens.css). Piso §4.9: sin mezclas de color, oklch, :has,
   consultas de contenedor ni CSS anidado.
   ════════════════════════════════════════════════════════════════════ */

/* --k-pub-cc-h: alto que ocupa el aviso de cookies sobre el statusbar (su alto más el
   aire); lo escribe kbar.js mientras el aviso existe, para que las capas no lo tapen. */
:root { --k-pub-sb-h: calc(var(--k-suelo-h) + env(safe-area-inset-bottom, 0px)); --k-pub-cc-h: 0px; }

/* Espacio (decisión g): el contenido del sitio termina donde empieza el statusbar;
   la barra nunca flota encima. Sobrescribe solo `bottom` y `height` del iframe
   (un iframe no se estira entre top y bottom: el alto va explícito). */
.k-content { bottom: var(--k-pub-sb-h); height: calc(100% - var(--k-pub-sb-h)); }

.k-sb-pub {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: var(--k-z-overlay);
  box-sizing: border-box;
  height: var(--k-pub-sb-h);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  font-family: var(--k-font-ui);
}
.k-sb-pub a.k-sb__btn { text-decoration: none; }
.k-sb-pub [data-active] {
  background: var(--k-c-active); color: var(--k-c-fg);
  box-shadow: inset 0 calc(-1 * var(--k-stroke-2)) 0 var(--k-pub-acento, var(--k-brand-green));
}
/* El logo «Powered by» es claro: sobre un fondo claro se oscurece (barras-color.js marca el tono). */
.k-sb-pub[data-tono="claro"] .k-sb__pw-logo { filter: invert(1) brightness(.35); }

/* Aviso de cookies (shared/js/consent.js, el de todos los sitios): en este shell vive
   en el documento del shell, fijo abajo. Se apoya encima del statusbar, que conserva
   su alto y sus clics mientras el visitante decide. El selector exige el statusbar
   público como hermano anterior (fuera de este shell no aplica) y su especificidad le
   gana a la <style> del aviso sin depender del orden de carga. Su z-index propio (el
   máximo) lo deja sobre toda capa; kbar.js reserva su alto (--k-pub-cc-h). */
.k-sb-pub ~ #ccConsentBanner { bottom: calc(var(--k-pub-sb-h) + var(--k-s-2)); }
/* Mientras el aviso está (kbar.js marca data-cc-aviso), el contenido termina arriba
   del statusbar y del aviso: nada del sitio (su pie, un teléfono) queda tapado. */
:root[data-cc-aviso] #k-content.k-content { bottom: calc(var(--k-pub-sb-h) + var(--k-pub-cc-h)); height: calc(100% - var(--k-pub-sb-h) - var(--k-pub-cc-h)); }
/* El texto para buscadores (#k-texto) vive detrás del iframe; con el iframe más corto asomaría bajo el aviso. */
:root[data-cc-aviso] .k-texto { visibility: hidden; }
/* Alto corto (celular horizontal): el aviso pasa a dos columnas —texto a la izquierda,
   botones a la derecha— y toma el ancho disponible. Mismo texto, misma letra y mismos
   botones; solo baja su alto (a 844×390, de 135 a ~70 px), que es alto que las capas
   recuperan por --k-pub-cc-h (kbar.js lo mide en vivo). */
@media (max-height: 500px) {
  .k-sb-pub ~ #ccConsentBanner {
    max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--k-s-4); align-items: center; padding: var(--k-s-2) var(--k-s-4);
  }
  .k-sb-pub ~ #ccConsentBanner h4 { grid-column: 1; margin-bottom: var(--k-s-1); }
  .k-sb-pub ~ #ccConsentBanner p { grid-column: 1; margin: 0; }
  .k-sb-pub ~ #ccConsentBanner .cc-actions { grid-column: 2; grid-row: 1 / span 2; flex-wrap: nowrap; }
}

/* Secciones del rail: la cantidad depende del grupo, así que su fila desborda con
   barra estándar visible (ui.md §1); el alto es fijo, por eso el eje y no scrollea. */
.k-sb-pub__secs {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: var(--k-s-1);
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: auto; scrollbar-color: var(--k-c-fg-dim) transparent;
}
.k-sb-pub__der { flex: none; margin-left: auto; display: flex; align-items: center; gap: var(--k-s-1); }

/* Capa de una sección: el panel de Daily-Office embebido. overflow:hidden es el
   clip del borde redondeado sobre el iframe; el scroll lo lleva el panel. La
   franja de arriba es de la ✕ de la capa (.kov__close), para que no tape la
   cabecera del panel. El alto sale del espacio libre sobre el suelo (--kb-libre,
   kbar.css) menos esa franja, para que el borde de abajo no quede recortado. */
.kov--seccion { width: var(--k-itembar-w); padding: calc(var(--k-hit) + var(--k-s-3)) 0 0; overflow: hidden; }
.kov .seccion__frame { width: 100%; height: 640px; max-height: calc(var(--kb-libre, 100dvh) - 110px - var(--k-hit) - var(--k-s-3)); border: 0; display: block; background: var(--k-c-bg-1); }
/* Alto corto (celular horizontal): el aire mínimo de las capas (kbar.css, misma consulta). */
@media (max-height: 500px) {
  .kov .seccion__frame { max-height: calc(var(--kb-libre, 100dvh) - 2 * var(--k-s-2) - var(--k-hit) - var(--k-s-3)); }
}

/* Celular (< 700 px, §4.9): solo iconos con su nombre accesible y blanco de toque de 44 px. */
@media (max-width: 699px) {
  .k-sb-pub .k-sb__txt { display: none; }
  .k-sb-pub .k-sb__btn { min-width: var(--k-hit); height: var(--k-hit); justify-content: center; padding: 0; }
  .k-sb-pub .k-sb__pw { padding: 0 var(--k-s-1); }
}