/* Marco de la plataforma KASHIMA: barra de sesion y estados de carga.
   El diseno del panel es el del artefacto (llega con el panel). Esta barra toma los colores del artefacto que se
   monte (--surface/--panel, --line/--rule, --muted, --accent) y trae valores propios mientras no hay panel. */
[hidden]:not([hidden=until-found i]) { display: none !important; }
html, body { margin: 0; }
body { background: #F2F3F1; color: #18202A; }

.kx-barra {
  display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap;
  padding: 8px max(16px, env(safe-area-inset-right, 0px)) 8px max(16px, env(safe-area-inset-left, 0px));
  padding-top: max(8px, env(safe-area-inset-top, 0px));
  background: var(--surface, var(--panel, #FFFFFF));
  border-bottom: 1px solid var(--line, var(--rule, #D5DAD9));
  font: 500 12.5px/1.35 var(--font-body, var(--sans, 'Work Sans', system-ui, -apple-system, 'Segoe UI', sans-serif));
  color: var(--muted, #6B7580);
}
.kx-marca { display: inline-flex; align-items: center; gap: 10px; color: var(--ink, #18202A); text-decoration: none; min-width: 0; }
.kx-logo { display: inline-flex; background: #FFFFFF; border-radius: 6px; padding: 4px 8px; box-shadow: 0 0 0 1px rgba(24, 32, 42, .08); flex: none; }
.kx-logo img { display: block; height: 17px; width: auto; }
.kx-sitio { font-weight: 600; letter-spacing: .02em; white-space: nowrap; }
.kx-version { font-family: var(--font-mono, var(--mono, 'IBM Plex Mono', ui-monospace, monospace)); font-size: 11.5px; white-space: nowrap; }
.kx-sesion { margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.kx-sesion a { color: var(--accent, #1D4F7A); font-weight: 600; }
.kx-marca:focus-visible, .kx-sesion a:focus-visible { outline: 2px solid var(--accent, #1D4F7A); outline-offset: 2px; border-radius: 4px; }

.kx-estado { max-width: 620px; margin: 72px auto; padding: 0 16px; text-align: center; font: 14px/1.6 system-ui, -apple-system, 'Segoe UI', sans-serif; color: #5B6570; }
.kx-estado.error { color: #9E2F28; }
.kx-estado button { margin-top: 14px; font: 600 13px system-ui, sans-serif; color: #FFFFFF; background: #1D4F7A; border: 0; border-radius: 8px; padding: 8px 16px; cursor: pointer; }
.kx-giro { display: inline-block; width: 15px; height: 15px; margin-right: 10px; vertical-align: -2px; border-radius: 50%;
  border: 2px solid rgba(0, 174, 65, .25); border-top-color: #00AE41; animation: kx-giro .8s linear infinite; }
@keyframes kx-giro { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .kx-giro { animation: none; } }

@media (max-width: 640px) {
  .kx-version { display: none; }
  .kx-sesion { margin-left: 0; flex-basis: 100%; }
}
@media print {
  .kx-sesion a { display: none; }
}