/* Componentes do design system: classes .k-*. Os componentes React da T9 usam
   estas classes; a vitrine usa HTML nativo.
   Cor só de tokens, nenhum hex aqui. z-index só de --k-camada-*.
   Sem caixa alta forçada, sem sombra decorativa, sem gradiente.
   Variáveis com prefixo --_ são internas de um componente, não são tokens.
   Um único movimento: o corte de alerta novo abre uma vez. */

/* Base */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: var(--k-fonte);
  line-height: var(--k-altura-linha);
  color: var(--k-texto);
  background: var(--k-fundo);
  caret-color: var(--k-texto);
  accent-color: var(--k-texto);
  scrollbar-color: var(--k-contorno) var(--k-fundo);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--k-fonte);
  line-height: var(--k-altura-linha);
  color: var(--k-texto);
  background: var(--k-fundo);
}

::selection {
  color: var(--k-superficie);
  background: var(--k-texto);
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

:focus-visible {
  outline: 2px solid var(--k-foco);
  outline-offset: 2px;
}

h1,
h2,
h3,
h4 {
  font-weight: var(--k-peso-medio);
  line-height: 1.2;
  text-wrap: balance;
}

/* Números de dado alinham em coluna. */
time,
data,
td {
  font-variant-numeric: tabular-nums;
}

/* Texto visualmente oculto: fora da tela, lido pelo leitor de tela. */
.k-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Botão. Padrão é o secundário (contorno); primário é cheio em tinta.
   Botão de alternância usa aria-pressed; pressionado fica em tinta. */

.k-botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--k-espaco-2);
  min-width: var(--k-alvo-min);
  min-height: var(--k-alvo-min);
  margin: 0;
  padding: var(--k-espaco-1) var(--k-espaco-3);
  border: 1px solid var(--k-contorno);
  border-radius: var(--k-raio-comando);
  background: transparent;
  color: var(--k-texto);
  font: inherit;
  font-size: var(--k-tamanho-14);
  font-weight: var(--k-peso-medio);
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
}

.k-botao:hover {
  background: var(--k-faixa);
}

.k-botao--primario,
.k-botao[aria-pressed="true"] {
  border-color: var(--k-texto);
  background: var(--k-texto);
  color: var(--k-superficie);
}

.k-botao--primario:hover,
.k-botao[aria-pressed="true"]:hover {
  border-color: var(--k-texto-secundario);
  background: var(--k-texto-secundario);
}

/* Indisponível: continua focável com aria-disabled, não muda no hover. */
.k-botao:disabled,
.k-botao[aria-disabled="true"],
.k-botao:disabled:hover,
.k-botao[aria-disabled="true"]:hover {
  border-color: var(--k-linha);
  background: transparent;
  color: var(--k-texto-secundario);
  cursor: not-allowed;
}

/* Segmento: grupo de botões de alternância, um pressionado por vez. */
.k-segmento {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--k-espaco-1);
}

/* Barra superior do produto: marca à esquerda, instalação à direita. */

.k-barra-superior {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--k-espaco-1) var(--k-espaco-4);
  padding: var(--k-espaco-2) var(--k-espaco-4);
  background: var(--k-barra);
  color: var(--k-barra-texto);
}

.k-barra-superior__marca {
  font-size: var(--k-tamanho-18);
  font-weight: var(--k-peso-medio);
  line-height: 1.2;
}

.k-barra-superior__instalacao {
  font-size: var(--k-tamanho-14);
}

/* Assinatura: símbolo e nome "Kairstrom". O símbolo (três faixas cortadas por
   uma abertura) usa a cor do texto em volta: tinta no dia, claro na noite. */
.k-assinatura {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-weight: var(--k-peso-forte);
  line-height: 1;
  white-space: nowrap;
}

.k-assinatura__simbolo {
  flex: none;
  width: 1em;
  height: 1em;
  fill: currentColor;
}

/* Cabeçalho do paciente. */

.k-paciente {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--k-espaco-3) var(--k-espaco-6);
  padding: var(--k-espaco-4);
  border-bottom: 1px solid var(--k-linha);
  background: var(--k-superficie);
}

.k-paciente__nome {
  margin: 0;
  font-size: var(--k-tamanho-21);
  font-weight: var(--k-peso-medio);
}

.k-paciente__meta {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--k-espaco-3);
  margin: var(--k-espaco-1) 0 0;
  color: var(--k-texto-secundario);
  font-size: var(--k-tamanho-14);
}

.k-paciente__lado {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--k-espaco-2) var(--k-espaco-4);
}

.k-paciente__atualizacao {
  margin: 0;
  color: var(--k-texto-secundario);
  font-size: var(--k-tamanho-14);
}

/* Contexto clínico curto: alergia e precaução, em texto secundário. */
.k-paciente__contexto {
  margin: var(--k-espaco-1) 0 0;
  color: var(--k-texto-secundario);
  font-size: var(--k-tamanho-14);
}

/* Corrente: uma linha por fonte, na ordem obrigatória. Toda linha tem a mesma
   grade de 3 colunas: rótulo fixo, trilho do tempo e coluna "último dado".
   Posições no trilho em % do período; o script mede só os rótulos. */

.k-corrente-rolagem {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  background: var(--k-superficie);
  scrollbar-color: var(--k-contorno) var(--k-superficie);
}

.k-corrente-rolagem:focus-visible {
  outline-offset: -2px;
}

.k-corrente {
  --_rotulo: 9.375rem; /* 150 px na raiz de 16 px */
  --_valor: 7rem; /* 112 px */
  --_faixa: 2.75rem;
  --_ponto: 0.4375rem; /* 7 px */
  --_corte: 0.625rem; /* 10 px */
  --_corte-alerta: 0.375rem; /* 6 px: abertura de 3 px entre bordas */
  --_folga: var(--k-espaco-1);
  --_fundo: var(--k-superficie);
  position: relative;
  isolation: isolate;
  min-width: 44rem;
  background: var(--_fundo);
  font-size: var(--k-tamanho-14);
}

.k-corrente__bandeiras,
.k-contexto,
.k-faixa,
.k-eixo {
  display: grid;
  grid-template-columns: var(--_rotulo) minmax(0, 1fr) var(--_valor);
  background: var(--_fundo);
}

.k-faixas {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Bandeiras que não cabem lado a lado sobem uma linha; o script soma a altura. */
.k-corrente__bandeiras {
  height: 2rem;
}

.k-contexto {
  height: 1.75rem;
}

.k-faixa {
  height: var(--_faixa);
}

.k-faixa:nth-child(even) {
  --_fundo: var(--k-faixa);
}

.k-eixo {
  height: 1.75rem;
}

/* Rótulo da linha: fica fixo quando a corrente rola na horizontal. */
.k-corrente__rotulo {
  position: sticky;
  left: 0;
  z-index: var(--k-camada-cabecalho);
  display: flex;
  align-items: center;
  padding: 0 var(--k-espaco-2) 0 var(--k-espaco-4);
  background: var(--_fundo);
  line-height: 1.2;
}

.k-corrente__trilho {
  position: relative;
  min-width: 0;
}

/* Contexto e faixas cortam o que sai do período. A linha de base é desenhada
   dentro do trilho para o corte passar por cima dela sem emenda. */
.k-contexto .k-corrente__trilho,
.k-faixa .k-corrente__trilho {
  overflow: hidden;
}

.k-contexto .k-corrente__trilho::before,
.k-faixa .k-corrente__trilho::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: var(--k-linha);
}

.k-contexto .k-corrente__rotulo,
.k-contexto .k-corrente__valor,
.k-faixa .k-corrente__rotulo,
.k-faixa .k-corrente__valor {
  border-bottom: 1px solid var(--k-linha);
}

.k-contexto .k-corrente__rotulo {
  color: var(--k-texto-secundario);
  font-size: var(--k-tamanho-12);
}

/* Coluna "último dado": valor em cima, hora embaixo. */
.k-corrente__valor {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  margin: 0;
  padding: 0 var(--k-espaco-4) 0 var(--k-espaco-2);
  text-align: right;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.k-corrente__dado {
  color: var(--k-texto);
}

.k-corrente__hora {
  color: var(--k-texto-secundario);
  font-size: var(--k-tamanho-12);
}

.k-corrente__vazio {
  color: var(--k-texto-secundario);
}

.k-corrente__titulo-valor {
  align-self: end;
  padding: 0 var(--k-espaco-4) var(--k-espaco-1) var(--k-espaco-2);
  color: var(--k-texto-secundario);
  font-size: var(--k-tamanho-12);
  line-height: 1.2;
  text-align: right;
}

/* Linha de grade nas marcas do eixo. */
.k-corrente__grade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--k-linha);
}

/* Contexto: admissão, transferência e alta. Blocos vizinhos têm 2 px de folga. */
.k-contexto__bloco {
  position: absolute;
  top: 0;
  bottom: 1px;
  display: flex;
  align-items: center;
  border-inline: 1px solid var(--_fundo);
  background: var(--k-contexto);
  font-size: var(--k-tamanho-12);
  white-space: nowrap;
}

.k-contexto__rotulo {
  padding-inline: var(--k-espaco-2);
  line-height: 1.2;
}

/* Marcas da faixa. Todas em tinta. */

.k-marca {
  position: absolute;
}

/* Ponto de 7 px com anel na cor da faixa; a área de toque é maior que o ponto. */
.k-marca--ponto {
  top: 50%;
  width: 1.5rem;
  height: 1.5rem;
  margin: -0.75rem 0 0 -0.75rem;
}

.k-marca--ponto::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--_ponto) + 4px);
  height: calc(var(--_ponto) + 4px);
  transform: translate(-50%, -50%);
  border: 2px solid var(--_fundo);
  border-radius: 50%;
  background: var(--k-texto) padding-box;
}

/* Estado contínuo, como prescrição vigente. */
.k-marca--barra {
  bottom: 0.625rem;
  height: 0.25rem;
  background: var(--k-texto);
}

/* Procedimento feito (bloco) e agendado (tracejado). */
.k-marca--bloco,
.k-marca--agendado {
  top: 50%;
  min-width: 0.25rem;
  height: 1rem;
  margin-top: -0.5rem;
}

.k-marca--bloco {
  background: var(--k-texto);
}

.k-marca--agendado {
  border: 1.5px dashed var(--k-texto);
}

/* Linha fina: controles resumidos. */
.k-marca--linha {
  top: 0.375rem;
  bottom: 0.375rem;
  height: calc(100% - 0.75rem);
  overflow: visible;
}

.k-marca--linha polyline {
  fill: none;
  stroke: var(--k-texto);
  stroke-width: 1.5px;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* Rótulo da marca: só aparece quando cabe até a próxima marca. */
.k-marca__rotulo {
  position: absolute;
  color: var(--k-texto);
  font-size: var(--k-tamanho-12);
  line-height: 1.2;
  white-space: nowrap;
}

.k-marca--ponto .k-marca__rotulo {
  top: 50%;
  left: calc(50% + var(--_ponto) / 2 + var(--_folga));
  transform: translateY(-50%);
}

.k-marca--bloco .k-marca__rotulo,
.k-marca--agendado .k-marca__rotulo {
  top: 50%;
  left: calc(100% + var(--_folga));
  transform: translateY(-50%);
}

.k-marca--barra .k-marca__rotulo {
  bottom: calc(100% + 2px);
  left: 0;
}

.k-marca__rotulo[data-cabe="nao"],
.k-contexto__rotulo[data-cabe="nao"] {
  visibility: hidden;
}

/* Corte: o instante que importa atravessa as faixas. */

.k-corte {
  position: absolute;
  top: 0;
  bottom: 0;
  pointer-events: none;
}

/* Agora (ou o instante do cursor): abertura de 10 px com bordas em tinta. */
.k-corte--agora {
  width: var(--_corte);
  margin-left: calc(var(--_corte) / -2);
  border-inline: 1.5px solid var(--k-texto);
  background: var(--k-abertura);
}

/* Alerta: abertura estreita, só nas faixas que a regra usou, bordas na cor do nível. */
.k-corte--alerta {
  width: var(--_corte-alerta);
  margin-left: calc(var(--_corte-alerta) / -2);
  border-inline: 1.5px solid;
  background: var(--k-abertura);
}

.k-corte--alta {
  border-color: var(--k-alarme-alta);
}

.k-corte--media {
  border-color: var(--k-alarme-media);
}

.k-corte--baixa {
  border-color: var(--k-alarme-baixa);
}

/* O único movimento do sistema: o corte de alerta novo abre uma vez. */
.k-corte--novo {
  animation: k-abrir var(--k-duracao-longa) cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes k-abrir {
  from {
    clip-path: inset(0 50%);
  }

  to {
    clip-path: inset(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .k-corte--novo {
    animation: none;
  }
}

/* Bandeira no eixo: agora em tinta; alerta termina na linha do corte. */

.k-bandeira {
  position: absolute;
  bottom: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 0.3em;
  padding: 0 var(--k-espaco-2);
  border: 1px solid transparent;
  border-radius: var(--k-raio-comando);
  font-size: var(--k-tamanho-12);
  font-weight: var(--k-peso-medio);
  line-height: var(--k-altura-linha);
  white-space: nowrap;
}

.k-bandeira--agora {
  border-color: var(--k-texto);
  background: var(--k-texto);
  color: var(--k-superficie);
}

.k-bandeira--alta,
.k-bandeira--media,
.k-bandeira--baixa {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}

.k-bandeira--alta {
  border-color: var(--k-alarme-alta);
  background: var(--k-alarme-alta);
  color: var(--k-alarme-alta-sobre);
}

.k-bandeira--media {
  border-color: var(--k-alarme-media);
  background: var(--k-alarme-media-fundo);
  color: var(--k-alarme-media);
}

.k-bandeira--baixa {
  border-color: var(--k-alarme-baixa);
  background: var(--k-superficie);
  color: var(--k-alarme-baixa);
}

/* Eixo do tempo, embaixo da corrente. */

.k-eixo__marca {
  position: absolute;
  top: 0;
  padding-top: var(--k-espaco-1);
  transform: translateX(-50%);
  color: var(--k-texto-secundario);
  font-size: var(--k-tamanho-12);
  line-height: 1.2;
  white-space: nowrap;
}

.k-eixo__marca::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: var(--k-espaco-1);
  background: var(--k-linha);
}

.k-eixo__marca--inicio {
  transform: none;
}

.k-eixo__marca--inicio::before {
  left: 0;
}

/* Comandos do cursor, embaixo da corrente. */
.k-cursor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--k-espaco-2);
  padding: var(--k-espaco-3) var(--k-espaco-4);
  border-top: 1px solid var(--k-linha);
  background: var(--k-superficie);
}

/* Marca de alarme: sinal, palavra e forma, nunca só a cor.
   Alta é cheia; média tem fundo suave; baixa é só contorno. */

.k-marca-alarme {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3em;
  padding: 0 var(--k-espaco-2);
  border: 1px solid transparent;
  border-radius: var(--k-raio-comando);
  font-size: var(--k-tamanho-14);
  font-weight: var(--k-peso-medio);
  line-height: var(--k-altura-linha);
  white-space: nowrap;
}

.k-marca-alarme__sinal,
.k-bandeira__sinal {
  font-weight: var(--k-peso-forte);
}

.k-marca-alarme--alta {
  border-color: var(--k-alarme-alta);
  background: var(--k-alarme-alta);
  color: var(--k-alarme-alta-sobre);
}

.k-marca-alarme--media {
  background: var(--k-alarme-media-fundo);
  color: var(--k-alarme-media);
}

.k-marca-alarme--baixa {
  border-color: var(--k-alarme-baixa);
  color: var(--k-alarme-baixa);
}

/* Alertas ativos: lista por nível, itens separados por linha fina, sem caixa
   nem faixa lateral. O nível vem da marca de alarme no título. Estado novo:
   etiqueta cheia e título forte; visto: etiqueta com a hora. */

.k-alertas {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.k-alerta {
  display: grid;
  gap: var(--k-espaco-2);
  padding-block: var(--k-espaco-3);
  border-top: 1px solid var(--k-linha);
}

.k-alerta:first-child {
  padding-top: 0;
  border-top: 0;
}

.k-alerta__cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--k-espaco-1) var(--k-espaco-3);
}

.k-alerta__titulo {
  margin: 0;
  font-size: var(--k-tamanho-16);
  font-weight: var(--k-peso-medio);
}

.k-alerta[data-estado="novo"] .k-alerta__titulo {
  font-weight: var(--k-peso-forte);
}

.k-alerta__titulo .k-marca-alarme {
  margin-right: var(--k-espaco-1);
}

.k-alerta__quando {
  display: flex;
  align-items: baseline;
  gap: var(--k-espaco-2);
  margin: 0;
  color: var(--k-texto-secundario);
  font-size: var(--k-tamanho-14);
  white-space: nowrap;
}

.k-alerta__texto {
  max-width: var(--k-medida-prosa);
  margin: 0;
}

.k-alerta__regra {
  margin: 0;
  color: var(--k-texto-secundario);
  font-size: var(--k-tamanho-14);
}

/* Conduta do protocolo: texto citado do protocolo aprovado pela equipe, com
   nome e versão. O painel não fala a conduta; só cita. */
.k-conduta {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: var(--k-espaco-2) var(--k-espaco-3);
  border-radius: var(--k-raio-comando);
  background: var(--k-faixa);
}

.k-conduta__rotulo {
  color: var(--k-texto-secundario);
  font-size: var(--k-tamanho-12);
  font-weight: var(--k-peso-medio);
}

.k-conduta__texto {
  margin: 0;
}

.k-conduta__origem {
  margin: 0;
  color: var(--k-texto-secundario);
  font-size: var(--k-tamanho-12);
}

/* Linha de comandos: botões lado a lado, quebram quando faltar espaço. */
.k-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--k-espaco-2);
}

/* Etiqueta de estado em texto: novo, visto, agendado, corrigido. */
.k-etiqueta {
  display: inline-block;
  padding: 0 var(--k-espaco-2);
  border: 1px solid var(--k-contorno);
  border-radius: var(--k-raio-comando);
  color: var(--k-texto);
  font-size: var(--k-tamanho-12);
  font-weight: var(--k-peso-medio);
  line-height: var(--k-altura-linha);
  white-space: nowrap;
}

.k-etiqueta--cheia {
  border-color: var(--k-texto);
  background: var(--k-texto);
  color: var(--k-superficie);
}

/* Gráfico: título nomeia o sinal; sem legenda; tabela com os mesmos valores. */

.k-grafico {
  min-width: 0;
  margin: 0;
}

.k-grafico__titulo {
  margin: 0;
  font-size: var(--k-tamanho-16);
}

.k-grafico__unidade {
  color: var(--k-texto-secundario);
  font-weight: var(--k-peso-normal);
}

.k-grafico__ultimo {
  margin: var(--k-espaco-1) 0 0;
  color: var(--k-texto-secundario);
  font-size: var(--k-tamanho-14);
}

.k-grafico__area {
  position: relative;
  margin-top: var(--k-espaco-2);
}

.k-grafico .uplot {
  font-family: inherit;
}

/* Cursor do uPlot: linha vertical contínua, fina, em texto secundário. */
.k-grafico .uplot .u-cursor-x {
  border-right: 1px solid var(--k-texto-secundario);
}

.k-grafico .k-bandeira {
  bottom: calc(100% + 2px);
  transform: translateX(-100%);
  pointer-events: none;
}

/* Dica ao passar o mouse: o valor vem primeiro, a hora depois. */
.k-dica {
  position: absolute;
  top: var(--k-espaco-1);
  z-index: var(--k-camada-sobreposicao);
  display: grid;
  padding: var(--k-espaco-1) var(--k-espaco-2);
  border: 1px solid var(--k-contorno);
  border-radius: var(--k-raio-comando);
  background: var(--k-superficie);
  color: var(--k-texto);
  font-size: var(--k-tamanho-12);
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
}

.k-dica[hidden] {
  display: none;
}

.k-dica__valor {
  font-size: var(--k-tamanho-14);
  font-weight: var(--k-peso-medio);
}

.k-dica__hora {
  color: var(--k-texto-secundario);
}

/* Alerta perto do ponto: a marca de alarme do nível e a hora. */
.k-dica__alerta {
  margin-top: 2px;
}

/* Conteúdo montado para a dica do ECharts. */
.k-dica__conteudo {
  display: grid;
  line-height: 1.3;
}

/* Detalhes que abrem no lugar e tabela de dados. */

.k-detalhes {
  margin-top: var(--k-espaco-2);
}

.k-detalhes > summary {
  min-height: var(--k-alvo-min);
  padding-block: var(--k-espaco-1);
  color: var(--k-texto-secundario);
  font-size: var(--k-tamanho-14);
  cursor: pointer;
}

.k-tabela {
  border-collapse: collapse;
  font-size: var(--k-tamanho-14);
}

.k-tabela th,
.k-tabela td {
  padding: var(--k-espaco-1) var(--k-espaco-3);
  border-bottom: 1px solid var(--k-linha);
  text-align: right;
}

.k-tabela th {
  color: var(--k-texto-secundario);
  font-weight: var(--k-peso-medio);
}

.k-tabela th:first-child,
.k-tabela td:first-child {
  text-align: left;
}

.k-tabela th[scope="row"] {
  color: var(--k-texto);
  font-weight: var(--k-peso-medio);
  white-space: nowrap;
}

/* Tabela de texto (unidade, fontes): tudo à esquerda, alinhado ao topo. */
.k-tabela--texto th,
.k-tabela--texto td {
  text-align: left;
  vertical-align: top;
}

.k-tabela__legenda {
  padding-bottom: var(--k-espaco-2);
  color: var(--k-texto-secundario);
  font-size: var(--k-tamanho-14);
  text-align: left;
}

.k-tabela__unidade {
  color: var(--k-texto-secundario);
  font-weight: var(--k-peso-normal);
}

.k-tabela .k-tabela__dia {
  text-align: left;
}

.k-tabela__nada {
  color: var(--k-texto-secundario);
}

.k-tabela td.k-tabela__vazio {
  padding-block: var(--k-espaco-6);
  color: var(--k-texto-secundario);
  text-align: center;
}

/* Tabela larga rola dentro da própria caixa, nunca a página. Posicionada
   para o texto oculto (.k-oculto) das células rolar junto, sem vazar. */
.k-tabela-rolagem {
  position: relative;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-color: var(--k-contorno) var(--k-superficie);
}

.k-tabela-rolagem:focus-visible {
  outline-offset: -2px;
}

.k-tabela-rolagem--alta {
  max-height: 16rem;
  overflow-y: auto;
}

/* Controles por hora: parâmetros em linhas, horas em colunas. O nome do
   parâmetro fica fixo quando a tabela rola. Nenhum valor é marcado. */
.k-tabela--horas tr > :first-child {
  position: sticky;
  left: 0;
  z-index: var(--k-camada-cabecalho);
  background: var(--k-superficie);
}

/* Página do paciente: lista de leitos à esquerda e conteúdo. Em largura
   estreita, a lista vira seletor acima do cabeçalho. */

.k-pagina {
  container: pagina / inline-size;
  background: var(--k-fundo);
}

.k-pagina__grade {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
}

.k-pagina__conteudo {
  min-width: 0;
}

.k-leitos {
  display: grid;
  align-content: start;
  gap: var(--k-espaco-2);
  padding: var(--k-espaco-4) var(--k-espaco-2);
  border-right: 1px solid var(--k-linha);
  background: var(--k-superficie);
}

.k-leitos__titulo {
  margin: 0;
  padding-inline: var(--k-espaco-2);
  color: var(--k-texto-secundario);
  font-size: var(--k-tamanho-14);
}

.k-leitos__lista {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.k-leitos__link {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  align-items: baseline;
  gap: 2px var(--k-espaco-2);
  min-height: var(--k-alvo-min);
  padding: var(--k-espaco-2);
  border-radius: var(--k-raio-comando);
  color: var(--k-texto);
  line-height: 1.3;
  text-decoration: none;
}

.k-leitos__link:hover {
  background: var(--k-faixa);
}

/* Paciente aberto: fundo da abertura, o instante em foco. */
.k-leitos__link[aria-current="page"] {
  background: var(--k-abertura);
}

.k-leitos__leito {
  grid-row: span 2;
  font-size: var(--k-tamanho-18);
  font-weight: var(--k-peso-forte);
  font-variant-numeric: tabular-nums;
}

.k-leitos__nome {
  font-size: var(--k-tamanho-14);
}

.k-leitos__link[aria-current="page"] .k-leitos__nome {
  font-weight: var(--k-peso-forte);
}

.k-leitos__link .k-marca-alarme {
  justify-self: start;
  font-size: var(--k-tamanho-12);
}

.k-leitos__nota {
  margin: 0;
  padding-inline: var(--k-espaco-2);
  color: var(--k-texto-secundario);
  font-size: var(--k-tamanho-12);
}

.k-leitos-seletor {
  display: none;
}

@container pagina (max-width: 52rem) {
  .k-pagina__grade {
    grid-template-columns: minmax(0, 1fr);
  }

  .k-leitos {
    display: none;
  }

  .k-leitos-seletor {
    display: grid;
    gap: var(--k-espaco-1);
    padding: var(--k-espaco-3) var(--k-espaco-4);
    border-bottom: 1px solid var(--k-linha);
    background: var(--k-superficie);
  }
}

/* Painéis: grade que vira uma coluna na largura estreita. Sem painel dentro
   de painel; dentro dele, linhas finas separam os itens. */

.k-paineis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(26rem, 100%), 1fr));
  gap: var(--k-espaco-4);
  padding: var(--k-espaco-4);
}

.k-painel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: var(--k-espaco-3);
  min-width: 0;
  padding: var(--k-espaco-4);
  border: 1px solid var(--k-linha);
  border-radius: var(--k-raio-painel);
  background: var(--k-superficie);
}

.k-painel--largo {
  grid-column: 1 / -1;
}

.k-painel__cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--k-espaco-1) var(--k-espaco-4);
}

.k-painel__titulo {
  margin: 0;
  font-size: var(--k-tamanho-18);
}

.k-painel__meta,
.k-painel__rodape {
  margin: 0;
  color: var(--k-texto-secundario);
  font-size: var(--k-tamanho-14);
}

.k-painel__subtitulo {
  margin: var(--k-espaco-2) 0 0;
  font-size: var(--k-tamanho-16);
}

/* Painel da corrente: a corrente encosta nas bordas do painel. */
.k-painel--corrente {
  gap: 0;
  padding: 0;
  overflow: clip;
}

.k-painel--corrente > .k-painel__cabecalho {
  padding: var(--k-espaco-3) var(--k-espaco-4);
  border-bottom: 1px solid var(--k-linha);
}

/* Tela simples (unidade, estados): conteúdo com respiro, sem painel. */
.k-tela {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: var(--k-espaco-3);
  margin: 0;
  padding: var(--k-espaco-4);
}

.k-tela__cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--k-espaco-1) var(--k-espaco-4);
}

.k-tela__titulo {
  margin: 0;
  font-size: var(--k-tamanho-21);
}

/* Rótulo visível de grupo de comandos, filtro e busca. */

.k-grupo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--k-espaco-2) var(--k-espaco-3);
}

.k-rotulo {
  font-size: var(--k-tamanho-14);
  font-weight: var(--k-peso-medio);
}

.k-filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--k-espaco-3) var(--k-espaco-6);
}

.k-busca {
  display: grid;
  gap: var(--k-espaco-1);
  min-width: min(16rem, 100%);
}

.k-campo {
  min-width: 0;
  max-width: 100%;
  min-height: var(--k-alvo-min);
  margin: 0;
  padding: var(--k-espaco-1) var(--k-espaco-2);
  border: 1px solid var(--k-contorno);
  border-radius: var(--k-raio-comando);
  background: var(--k-superficie);
  color: var(--k-texto);
  font: inherit;
  font-size: var(--k-tamanho-14);
}

/* Lista de itens em linhas: protocolo, prescrição, escores pontuais. */

.k-lista {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.k-lista > li {
  display: grid;
  gap: 2px;
  padding-block: var(--k-espaco-2);
  border-top: 1px solid var(--k-linha);
}

.k-lista > li:first-child {
  padding-top: 0;
  border-top: 0;
}

.k-lista p {
  margin: 0;
}

.k-lista__linha {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--k-espaco-1) var(--k-espaco-3);
}

.k-lista__principal {
  font-weight: var(--k-peso-medio);
}

.k-lista__valor {
  font-size: var(--k-tamanho-18);
  font-weight: var(--k-peso-medio);
  font-variant-numeric: tabular-nums;
}

.k-lista__secundario {
  color: var(--k-texto-secundario);
  font-size: var(--k-tamanho-14);
}

/* Estado em texto e forma, nunca só cor: em dia é círculo cheio; pendente e
   atrasada, círculo vazio; sem conexão, círculo tracejado. */
.k-estado {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: var(--k-tamanho-14);
  font-weight: var(--k-peso-medio);
  white-space: nowrap;
}

.k-estado::before {
  content: "";
  flex: none;
  width: 0.75em;
  height: 0.75em;
  border: 2px solid var(--k-texto);
  border-radius: 50%;
}

.k-estado--ok::before {
  background: var(--k-texto);
}

.k-estado--sem-conexao::before {
  border-style: dashed;
}

/* IA: rótulo fixo, frases com citações numeradas. Cada número é um botão que
   abre, logo abaixo da frase, o trecho e a origem. */

.k-ia {
  color: var(--k-texto);
  font-weight: var(--k-peso-medio);
}

.k-frases {
  display: grid;
  gap: var(--k-espaco-2);
  margin: 0;
  padding-left: 1.25em;
}

.k-frases--texto {
  padding-left: 0;
}

.k-frase {
  max-width: var(--k-medida-prosa);
}

.k-citacao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  min-height: 1.5rem;
  margin: 0;
  padding: 0 var(--k-espaco-1);
  border: 1px solid var(--k-contorno);
  border-radius: var(--k-raio-comando);
  background: transparent;
  color: var(--k-texto);
  font: inherit;
  font-size: var(--k-tamanho-12);
  font-weight: var(--k-peso-medio);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  vertical-align: 0.1em;
  cursor: pointer;
}

.k-citacao:hover {
  background: var(--k-faixa);
}

.k-citacao[aria-expanded="true"] {
  border-color: var(--k-texto);
  background: var(--k-texto);
  color: var(--k-superficie);
}

.k-citacao__trecho {
  margin-top: var(--k-espaco-2);
  padding: var(--k-espaco-2) var(--k-espaco-3);
  border: 1px solid var(--k-linha);
  border-radius: var(--k-raio-comando);
  background: var(--k-fundo);
  font-size: var(--k-tamanho-14);
}

.k-citacao__trecho blockquote,
.k-citacao__trecho p {
  margin: 0;
}

.k-citacao__origem {
  margin-top: var(--k-espaco-1);
  color: var(--k-texto-secundario);
  font-size: var(--k-tamanho-12);
}

/* Rascunho gerado por IA: borda tracejada, como o agendado da corrente.
   Tracejado quer dizer que ainda não é registro. */
.k-rascunho {
  padding: var(--k-espaco-3);
  border: 1px dashed var(--k-contorno);
  border-radius: var(--k-raio-comando);
  background: var(--k-fundo);
}

/* Evolução: texto íntegro da fonte, na medida de leitura. */
.k-evolucao {
  display: grid;
  gap: var(--k-espaco-2);
  max-width: var(--k-medida-prosa);
}

.k-evolucao p,
.k-evolucao__origem {
  margin: 0;
}

.k-evolucao__origem {
  color: var(--k-texto-secundario);
  font-size: var(--k-tamanho-14);
}

/* Pequenos múltiplos: um gráfico por sinal, lado a lado. */
.k-graficos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: var(--k-espaco-6);
}

/* Números de um período: entradas, saídas e balanço. */
.k-numeros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  gap: var(--k-espaco-4);
  margin: 0;
}

.k-numeros > div {
  display: grid;
  align-content: start;
  gap: 2px;
}

.k-numeros dt {
  color: var(--k-texto-secundario);
  font-size: var(--k-tamanho-14);
}

.k-numeros dd {
  margin: 0;
  font-size: var(--k-tamanho-21);
  font-weight: var(--k-peso-medio);
  line-height: 1.2;
}

.k-numeros .k-numeros__nota {
  color: var(--k-texto-secundario);
  font-size: var(--k-tamanho-12);
  font-weight: var(--k-peso-normal);
  line-height: 1.3;
}

/* Valor fora da faixa de referência: forte, em caixa de tinta, com a
   palavra do sentido. Sem cor: fora da faixa não é alarme. */
.k-amostra {
  margin: 0;
  color: var(--k-texto-secundario);
  font-size: var(--k-tamanho-14);
}

.k-valor-fora {
  display: inline-block;
  padding: 0 var(--k-espaco-1);
  border: 1.5px solid var(--k-texto);
  border-radius: var(--k-raio-comando);
  color: var(--k-texto);
  font-weight: var(--k-peso-forte);
  font-variant-numeric: tabular-nums;
}

.k-valor-fora__sentido {
  font-size: var(--k-tamanho-12);
  font-weight: var(--k-peso-medio);
}

/* Escores: valor, tendência em texto, minigráfico de uma série sem limiar,
   hora do cálculo e versão da regra. */
.k-escores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
  gap: var(--k-espaco-6);
}

.k-escore {
  display: grid;
  align-content: start;
  gap: var(--k-espaco-1);
  min-width: 0;
}

.k-escore__nome {
  margin: 0;
  font-size: var(--k-tamanho-16);
}

.k-escore__valor {
  margin: 0;
  font-size: var(--k-tamanho-24);
  font-weight: var(--k-peso-medio);
  line-height: 1.1;
}

.k-escore__tendencia {
  margin: 0;
  font-size: var(--k-tamanho-14);
}

.k-escore__meta {
  margin: 0;
  color: var(--k-texto-secundario);
  font-size: var(--k-tamanho-12);
}

.k-escore__grafico {
  height: 4.5rem;
  margin-block: var(--k-espaco-1);
}

/* Linha do tempo vertical: dias do mais recente ao mais antigo; hora à
   esquerda, registro à direita. Admissão e transferência como contexto. */

.k-linha-tempo__dias {
  display: grid;
}

.k-linha-tempo__dia {
  margin: var(--k-espaco-4) 0 var(--k-espaco-1);
  color: var(--k-texto-secundario);
  font-size: var(--k-tamanho-14);
  font-weight: var(--k-peso-medio);
}

.k-linha-tempo__dia:first-child {
  margin-top: 0;
}

.k-linha-tempo__registros {
  margin: 0;
  padding: 0;
  list-style: none;
}

.k-registro {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: var(--k-espaco-3);
  padding-block: var(--k-espaco-2);
  border-top: 1px solid var(--k-linha);
}

.k-registro--contexto {
  margin-inline: calc(-1 * var(--k-espaco-2));
  padding-inline: var(--k-espaco-2);
  background: var(--k-contexto);
}

.k-registro__hora {
  color: var(--k-texto-secundario);
  font-size: var(--k-tamanho-14);
}

.k-registro__corpo {
  display: grid;
  gap: 2px;
  min-width: 0;
  max-width: var(--k-medida-prosa);
}

.k-registro__corpo p {
  margin: 0;
}

.k-registro__titulo {
  font-weight: var(--k-peso-medio);
}

.k-registro__detalhe,
.k-registro__alerta {
  font-size: var(--k-tamanho-14);
}

.k-registro__fonte {
  color: var(--k-texto-secundario);
  font-size: var(--k-tamanho-12);
}

.k-registro__alerta .k-marca-alarme {
  font-size: var(--k-tamanho-12);
}

/* Parede: mapa de leitos no tema noite, para leitura de longe. No modo
   parede ocupa a altura toda da tela. */

.k-parede {
  display: grid;
  align-content: start;
  background: var(--k-fundo);
  color: var(--k-texto);
}

html[data-modo="parede"] .k-parede {
  min-height: 100dvh;
}

.k-parede__conteudo {
  display: grid;
  align-content: start;
  gap: var(--k-espaco-4);
  padding: var(--k-espaco-4);
}

.k-parede__titulo {
  margin: 0;
  font-size: var(--k-tamanho-24);
}

.k-parede__meta {
  margin: 0;
  color: var(--k-texto-secundario);
  font-size: var(--k-tamanho-14);
}

.k-parede__grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr));
  gap: var(--k-espaco-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Cartão de leito: número grande, alarme mais alto, minicorrente. A borda
   inteira toma a cor do alarme mais alto; nunca só a cor. */
.k-leito {
  display: grid;
  align-content: start;
  gap: var(--k-espaco-2);
  padding: var(--k-espaco-4);
  border: 2px solid var(--k-linha);
  border-radius: var(--k-raio-painel);
  background: var(--k-superficie);
}

.k-leito--alta {
  border-color: var(--k-alarme-alta);
}

.k-leito--media {
  border-color: var(--k-alarme-media);
}

.k-leito--baixa {
  border-color: var(--k-alarme-baixa);
}

.k-leito__cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--k-espaco-2);
}

.k-leito__numero {
  margin: 0;
  font-size: var(--k-tamanho-36);
  font-weight: var(--k-peso-forte);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.k-leito__cabecalho .k-marca-alarme {
  font-size: var(--k-tamanho-18);
}

.k-leito__nome,
.k-leito__resumo,
.k-leito__rodape {
  margin: 0;
}

.k-leito__nome {
  font-size: var(--k-tamanho-18);
}

.k-leito__rodape {
  color: var(--k-texto-secundario);
  font-size: var(--k-tamanho-14);
}

/* Minicorrente: as oito faixas das últimas 24 h, finas. Marca é traço de
   tinta; controles, linha contínua; alerta, abertura na cor do nível só nas
   faixas que a regra usou. */
.k-minicorrente {
  display: grid;
  gap: 2px;
  margin-block: var(--k-espaco-1);
}

.k-minicorrente__faixa {
  position: relative;
  height: 0.375rem;
  background: var(--k-faixa);
}

.k-minicorrente__marca {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: var(--k-texto);
}

.k-minicorrente__linha {
  position: absolute;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  background: var(--k-texto);
}

.k-minicorrente__corte {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 0.5rem;
  margin-left: -0.25rem;
  border-inline: 2px solid;
  background: var(--k-abertura);
}

.k-minicorrente__corte--alta {
  border-color: var(--k-alarme-alta);
}

.k-minicorrente__corte--media {
  border-color: var(--k-alarme-media);
}

.k-minicorrente__corte--baixa {
  border-color: var(--k-alarme-baixa);
}

/* Unidade: contagem de alertas por nível. */
.k-contagens {
  display: flex;
  flex-wrap: wrap;
  gap: var(--k-espaco-1) var(--k-espaco-3);
}

.k-contagem {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Estados de tela. Carregando: esqueleto com a forma final, sem movimento.
   Erro e central fora: aviso com borda de tinta. Vazio: frase no centro.
   Não resolvido: o texto diz que o nome não veio da fonte. */

.k-esqueleto {
  display: block;
  width: 4em;
  height: 0.625em;
  border-radius: 2px;
  background: var(--k-linha);
}

.k-esqueleto--curto {
  width: 2.5em;
  margin-top: var(--k-espaco-1);
}

.k-aviso {
  display: grid;
  gap: var(--k-espaco-2);
  margin: var(--k-espaco-4);
  padding: var(--k-espaco-3) var(--k-espaco-4);
  border: 2px solid var(--k-texto);
  border-radius: var(--k-raio-painel);
  background: var(--k-superficie);
}

.k-aviso p {
  margin: 0;
}

.k-aviso__titulo {
  font-weight: var(--k-peso-forte);
}

.k-vazio {
  margin: 0;
  padding: var(--k-espaco-8) var(--k-espaco-4);
  color: var(--k-texto-secundario);
  text-align: center;
}

.k-nao-resolvido {
  color: var(--k-texto-secundario);
}