/* HEMOLAB-IA — portal de acesso.
   Todo o estilo vive aqui: a politica de seguranca da pagina (CSP) bloqueia
   estilo escrito dentro do HTML, de proposito. */

:root {
  --tinta:        #0f172a;
  --tinta-suave:  #475569;
  --borda:        #e2e8f0;
  --fundo:        #f1f5f9;
  --papel:        #ffffff;
  --marca:        #b3122c;
  --marca-escura: #8a0e22;
  --ok:           #15803d;
  --ok-fundo:     #f0fdf4;
  --erro:         #b91c1c;
  --erro-fundo:   #fef2f2;
  --atencao:      #a16207;
  --atencao-fundo:#fffbeb;
  --raio:         12px;
  --sombra:       0 1px 3px rgba(15, 23, 42, .08), 0 8px 24px rgba(15, 23, 42, .06);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--tinta);
  background: var(--fundo);
  line-height: 1.55;
}

body.tela-centro {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  /* folga extra embaixo para o bloco fixo do canto nao cobrir o cartao */
  padding: 24px 16px 64px;
}

body.tela-topo { padding: 0; }

/* ---------------------------------------------------------------- cartao */

.cartao {
  background: var(--papel);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 32px;
  width: 100%;
  max-width: 420px;
}

.cartao-largo { max-width: 620px; }

.logo { display: block; height: 52px; width: auto; margin: 0 auto 18px; }

/* clamp(minimo, ideal, maximo): o tamanho acompanha a largura da tela sem
   nunca ficar ilegivel no celular nem exagerado no monitor grande. Substitui
   ter que escrever um tamanho diferente em cada media query. */
h1 { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.75rem); margin: 0 0 6px;
     text-align: center; letter-spacing: -.01em; }
h2 { font-size: clamp(1rem, .95rem + .3vw, 1.15rem); margin: 26px 0 8px; }

.subtitulo { margin: 0 0 22px; color: var(--tinta-suave); text-align: center; font-size: .94rem; }

/* ---------------------------------------------------------------- formulario */

label {
  display: block;
  font-size: .84rem;
  font-weight: 600;
  margin: 14px 0 6px;
  color: var(--tinta-suave);
}

input[type=text], input[type=password], input[type=email] {
  width: 100%;
  padding: 11px 13px;
  font-size: 1rem;
  font-family: inherit;
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid #cbd5e1;
  border-radius: 9px;
}

input:focus-visible {
  outline: 2px solid var(--marca);
  outline-offset: 1px;
  border-color: var(--marca);
}

.campo-codigo {
  font-size: 1.5rem;
  letter-spacing: .35em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

button {
  width: 100%;
  margin-top: 22px;
  padding: 12px 16px;
  font-size: 1rem;
  font-family: inherit;
  font-weight: 600;
  color: #fff;
  background: var(--marca);
  border: 0;
  border-radius: 9px;
  cursor: pointer;
}

button:hover { background: var(--marca-escura); }
button:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }

button.secundario {
  background: var(--papel);
  color: var(--marca);
  border: 1px solid var(--marca);
  margin-top: 10px;
}

button.secundario:hover { background: #fff5f6; }

.form-linha { margin: 0; }

/* ---------------------------------------------------------------- avisos */

.alerta {
  margin: 0 0 16px;
  padding: 11px 14px;
  border-radius: 9px;
  font-size: .9rem;
  border-left: 4px solid;
}

.erro     { background: var(--erro-fundo);     color: var(--erro);     border-color: var(--erro); }
.sucesso  { background: var(--ok-fundo);       color: var(--ok);       border-color: var(--ok); }
.atencao  { background: var(--atencao-fundo);  color: var(--atencao);  border-color: var(--atencao); }

.ajuda { color: var(--tinta-suave); font-size: .89rem; margin: 6px 0 0; }
.aviso-suave { color: var(--atencao); }

.rodape-nota {
  margin: 24px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--borda);
  color: var(--tinta-suave);
  font-size: .82rem;
  text-align: center;
}

a { color: var(--marca); }

/* ---------------------------------------------------------------- primeiro acesso */

.passo { margin-top: 8px; }

.passo h2 { display: flex; align-items: center; gap: 9px; }

.numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  font-size: .82rem;
  font-weight: 700;
  color: #fff;
  background: var(--marca);
  border-radius: 50%;
  flex: none;
}

.qr-area {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 14px;
  padding: 16px;
  background: var(--fundo);
  border-radius: var(--raio);
}

.qr {
  width: 172px;
  height: 172px;
  background: #fff;
  padding: 8px;
  border-radius: 8px;
  flex: none;
}

.qr-alternativa { flex: 1 1 210px; min-width: 210px; }

.segredo {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .06em;
  word-break: break-all;
  background: var(--papel);
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  padding: 9px 11px;
  margin: 8px 0;
}

.lista-codigos {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 9px;
  margin: 16px 0;
  padding: 16px;
  background: var(--fundo);
  border-radius: var(--raio);
}

.lista-codigos li {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  background: var(--papel);
  border: 1px solid var(--borda);
  border-radius: 8px;
  padding: 9px 4px;
}

/* ---------------------------------------------------------------- abas do 2FA */

.abas {
  display: flex;
  gap: 4px;
  margin: 0 0 18px;
  padding: 4px;
  background: var(--fundo);
  border-radius: 10px;
}

.aba {
  flex: 1;
  padding: 8px 6px;
  font-size: .86rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  color: var(--tinta-suave);
  border-radius: 7px;
}

.aba.ativa { background: var(--papel); color: var(--marca); box-shadow: var(--sombra); }

/* ---------------------------------------------------------------- area logada */

.barra {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 20px;
  background: var(--papel);
  border-bottom: 1px solid var(--borda);
}

.logo-barra { height: 30px; width: auto; }
.titulo-barra { font-weight: 700; letter-spacing: -.01em; }
.espaco { flex: 1; }
.usuario-barra { font-size: .88rem; color: var(--tinta-suave); }

.etiqueta {
  display: inline-block;
  margin-left: 5px;
  padding: 2px 8px;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--tinta-suave);
  background: var(--fundo);
  border-radius: 999px;
}

.etiqueta-admin { color: #fff; background: var(--marca); }
.etiqueta-user  { color: #fff; background: var(--tinta-suave); }

/* ---------------------------------------------------------------- identificacao fixa
   Canto inferior direito: quem esta usando e com que perfil, mais a versao.
   Fica sempre visivel para ninguem operar sem saber com qual acesso entrou. */

.rodape-fixo {
  position: fixed;
  right: 14px;
  bottom: 12px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100vw - 28px);
  padding: 7px 13px;
  font-size: .82rem;
  background: var(--papel);
  border: 1px solid var(--borda);
  border-radius: 999px;
  box-shadow: var(--sombra);
}

.rodape-nome {
  font-weight: 600;
  color: var(--tinta);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rodape-fixo .etiqueta { margin-left: 0; }

.rodape-versao {
  padding-left: 9px;
  border-left: 1px solid var(--borda);
  font-family: ui-monospace, Consolas, monospace;
  font-size: .74rem;
  color: var(--tinta-suave);
  white-space: nowrap;
}

/* Numa tela estreita, o bloco encolhe em vez de empurrar o conteudo. */
@media (max-width: 480px) {
  .rodape-fixo { right: 8px; bottom: 8px; font-size: .76rem; padding: 6px 10px; }
  .rodape-nome { max-width: 42vw; }
}

.botao-barra {
  padding: 7px 13px;
  font-size: .86rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--tinta);
  border: 1px solid var(--borda);
  border-radius: 8px;
}

.botao-barra:hover { background: var(--fundo); }

/* padding-bottom generoso: o bloco fixo do canto nao pode cobrir o fim do texto */
.conteudo { max-width: 940px; margin: 0 auto; padding: 32px 20px 88px; }
.conteudo h1 { text-align: left; }

.blocos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  margin: 26px 0;
}

.bloco {
  background: var(--papel);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 20px;
}

.bloco h2 { margin: 0 0 6px; font-size: 1rem; }

.etiqueta-status {
  display: inline-block;
  margin: 12px 0 0;
  padding: 3px 10px;
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--tinta-suave);
  background: var(--fundo);
  border-radius: 999px;
}

.area-admin {
  margin-top: 32px;
  padding: 20px;
  background: var(--papel);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}

.area-admin h2 { margin-top: 0; }

/* ---------------------------------------------------------------- tabela */

.tabela-rolagem { overflow-x: auto; border: 1px solid var(--borda); border-radius: var(--raio); }

.tabela { width: 100%; border-collapse: collapse; background: var(--papel); font-size: .86rem; }

.tabela th, .tabela td {
  padding: 9px 12px;
  text-align: left;
  border-bottom: 1px solid var(--borda);
  white-space: nowrap;
}

.tabela th { background: var(--fundo); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
.tabela tr:last-child td { border-bottom: 0; }

.mono { font-family: ui-monospace, Consolas, monospace; font-size: .82rem; }
.detalhe { white-space: normal; color: var(--tinta-suave); max-width: 320px; }
.ok { color: var(--ok); font-weight: 600; }
.falha { color: var(--erro); font-weight: 600; }

/* ================================================================ PAINEIS DE BI
   Regras de desenho que valem para todo painel deste sistema:
   - uma tela responde UMA pergunta
   - o numero mais importante em cima e a esquerda, grande
   - numero sempre acompanhado de comparacao — numero sozinho e ruido
   - cor com significado: verde dentro da meta, vermelho fora, cinza neutro */

.conteudo-largo { max-width: 1160px; }

.cabecalho-painel {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.cabecalho-painel h1 { margin: 0 0 2px; }

.filtro-periodo {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--fundo);
  border-radius: 10px;
}

.filtro-periodo .aba { flex: none; padding: 7px 14px; white-space: nowrap; }

/* ---------------------------------------------------------------- cartoes de KPI */

.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(212px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}

.kpi {
  background: var(--papel);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 18px 20px;
}

/* O primeiro cartao e o mais importante: ganha destaque visual. */
.kpi-destaque { border-color: var(--marca); border-width: 2px; }

.kpi h2 {
  margin: 0 0 6px;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--tinta-suave);
}

.kpi-valor {
  margin: 0;
  font-size: clamp(1.65rem, 1.3rem + 1.4vw, 2.15rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

.kpi-valor.pequeno { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.7rem); }
.valor-bom  { color: var(--ok); }
.valor-ruim { color: var(--erro); }

.kpi-nota { margin: 8px 0 0; font-size: .78rem; color: var(--tinta-suave); }

.var { display: inline-block; margin-top: 7px; font-size: .8rem; font-weight: 600; }
.var.boa    { color: var(--ok); }
.var.ruim   { color: var(--erro); }
.var.neutra { color: var(--tinta-suave); font-weight: 500; }

/* ---------------------------------------------------------------- graficos */

.bloco-grafico {
  background: var(--papel);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 20px;
  margin-bottom: 18px;
}

.bloco-grafico h2 { margin: 0 0 4px; font-size: 1rem; }

.duas-colunas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 18px;
}

.grafico-rolagem { overflow-x: auto; margin-top: 12px; }
.grafico { width: 100%; min-width: 520px; height: auto; display: block; }

.grade  { stroke: var(--borda); stroke-width: 1; }
.eixo   { fill: var(--tinta-suave); font-size: 11px; font-family: inherit; }
.area   { fill: var(--marca); fill-opacity: .07; }
.linha  { fill: none; stroke: var(--marca); stroke-width: 2.5;
          stroke-linejoin: round; stroke-linecap: round; }
.ponto  { fill: var(--papel); stroke: var(--marca); stroke-width: 2; }

/* Seletores empilhados no cabecalho do painel: periodo, unidades, datas. */
.filtros-painel { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
@media (max-width: 900px) {
  .filtros-painel { align-items: flex-start; }
}

/* Datas especificas: mesmo visual das abas, para ler como parte do filtro. */
.filtro-datas {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  background: var(--fundo);
  border-radius: 10px;
  font-size: .84rem;
  color: var(--tinta-suave);
}
.filtro-datas.ativa { outline: 2px solid var(--marca); }
.filtro-datas input[type=date] {
  border: 1px solid var(--borda);
  border-radius: 7px;
  padding: 4px 6px;
  font: inherit;
  color: var(--tinta);
  background: var(--papel);
}
.filtro-datas button {
  border: 0;
  border-radius: 7px;
  padding: 6px 12px;
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: var(--marca);
  cursor: pointer;
}
.filtro-datas button:hover { background: var(--marca-escura); }

/* --------------------------------------------------- tempo na triagem */

.triagem-numeros {
  display: flex; flex-wrap: wrap; gap: 26px;
  margin: 14px 0 4px; padding: 14px 16px;
  background: var(--fundo); border-radius: var(--raio);
}
.triagem-item { display: flex; flex-direction: column; gap: 2px; }
.triagem-valor { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.triagem-rotulo { font-size: .8rem; color: var(--tinta-suave); }

/* ------------------------------------------------------- mapa de calor */

/* A intensidade de cada quadrado vem no atributo fill-opacity do proprio SVG
   (a CSP bloqueia style= embutido; atributo de apresentacao passa). O CSS so
   da a cor-base. A celula vazia tem regra propria, que vence o atributo. */
.grafico-calor { min-width: 640px; }
rect.celula-calor { fill: var(--marca); }
rect.celula-vazia { fill: var(--fundo); fill-opacity: 1; }
/* Pouco dado para media: riscado em vez de colorido — a celula existe, mas o
   numero dela nao aguenta ser lido como medida. */
rect.celula-incerta { fill: url(#hachura); fill-opacity: 1; stroke: var(--borda); }
.bloco-grafico h3 { margin: 18px 0 0; font-size: .92rem; }
.bloco-grafico h3 .sutil { color: var(--tinta-suave); font-weight: 400; font-size: .8rem; }

.destaque-pico {
  margin: 10px 0 2px;
  padding: 10px 14px;
  background: var(--fundo);
  border-left: 4px solid var(--marca);
  border-radius: 0 8px 8px 0;
  font-size: .92rem;
}

/* colunas mensais: mes incompleto sai mais claro para nao enganar */
rect.coluna-mes { fill: var(--marca); }
rect.coluna-parcial { fill: var(--marca); fill-opacity: .35; }

/* ---------------------------------------------------------------- barras */

.tabela-barras { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: .86rem; }
.tabela-barras th, .tabela-barras td { padding: 7px 8px; text-align: left; font-weight: 400; }
.tabela-barras th[scope=row] { font-weight: 600; white-space: nowrap; max-width: 190px;
                               overflow: hidden; text-overflow: ellipsis; }
.tabela-barras .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabela-barras .tat { color: var(--tinta-suave); }
.tabela-barras .sutil { color: var(--tinta-suave); font-size: .8rem; }
.celula-barra { width: 38%; min-width: 90px; }

.barra-svg { width: 100%; height: 12px; display: block; }
rect.barra-fundo { fill: var(--fundo); }
rect.barra-valor { fill: var(--marca); }
rect.barra-apoio { fill: var(--tinta-suave); }

.marca-apoio {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  font-size: .66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--tinta-suave);
  background: var(--fundo);
  border-radius: 999px;
}

/* Tabela de TEXTO, nao de numero: as celulas quebram linha em vez de cortar.
   A .tabela-barras usa nowrap + ellipsis, o que serve para nome de exame e
   arruina uma explicacao de duas linhas. */
.tabela-simples { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: .84rem; }
.tabela-simples th, .tabela-simples td {
  padding: 9px 10px; text-align: left; font-weight: 400; vertical-align: top;
  border-top: 1px solid var(--borda);
}
.tabela-simples thead th {
  font-weight: 700; font-size: .74rem; text-transform: uppercase;
  letter-spacing: .04em; color: var(--tinta-suave); border-top: 0;
}
.tabela-simples th[scope=row] { font-weight: 600; width: 26%; }
.tabela-simples td:last-child { width: 24%; color: var(--tinta-suave); }

.legenda-tabela { padding-top: 10px; font-size: .76rem; color: var(--tinta-suave);
                  border-top: 1px solid var(--borda); }

/* ---------------------------------------------------------------- qualidade e regras */

.faixa-qualidade {
  background: var(--papel);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 20px;
  margin: 18px 0;
}

.faixa-qualidade h2 { margin: 0 0 6px; font-size: .78rem; font-weight: 700;
                      text-transform: uppercase; letter-spacing: .05em;
                      color: var(--tinta-suave); }

.regras {
  background: var(--papel);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 14px 20px;
  margin-bottom: 8px;
}

.regras summary { font-weight: 600; cursor: pointer; font-size: .9rem; }
.regras ul { margin: 12px 0 6px; padding-left: 20px; font-size: .86rem; color: var(--tinta-suave); }
.regras li { margin-bottom: 7px; }
.regras strong { color: var(--tinta); }

@media (max-width: 560px) {
  /* o tamanho do numero agora vem do clamp() la em cima, nao daqui */
  .cabecalho-painel { align-items: flex-start; }
}

/* Bloco da tela inicial que ja virou painel de verdade: vira link. */
a.bloco-ativo { display: block; text-decoration: none; color: inherit; }
a.bloco-ativo:hover { border-color: var(--marca); box-shadow: var(--sombra); }
a.bloco-ativo h2 { color: var(--marca); }
.etiqueta-pronta { color: #fff; background: var(--marca); }

/* Barra de conta atrasada: cinza-avermelhado, cor com significado. */
rect.barra-atraso { fill: var(--atencao); }

/* ---------------------------------------------------------------- fila do momento
   Bloco que olha o AGORA. Visualmente distinto dos blocos de periodo, para
   ninguem confundir "o que aconteceu" com "o que esta pendente". */

.bloco-fila {
  background: var(--papel);
  border: 1px solid var(--borda);
  border-left: 4px solid var(--tinta-suave);
  border-radius: var(--raio);
  padding: 20px;
  margin-bottom: 18px;
}

.bloco-fila.fila-alerta { border-left-color: var(--atencao); }

.fila-cabecalho { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.fila-cabecalho h2 { margin: 0; font-size: 1rem; }
.fila-nota { font-size: .78rem; color: var(--tinta-suave); }

.fila-numeros {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  margin: 14px 0 6px;
}

.fila-item { display: flex; flex-direction: column; }
.fila-valor { font-size: 1.7rem; font-weight: 700; line-height: 1.1;
              font-variant-numeric: tabular-nums; }
.fila-rotulo { font-size: .8rem; color: var(--tinta-suave); }

.linha-em-andamento th[scope=row] { color: var(--tinta-suave); }

/* ---------------------------------------------------------------- tela de acessos */

.celula-marca { text-align: center; vertical-align: middle; white-space: nowrap; }

.marcador { display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
            font-weight: 600; font-size: .86rem; }
.marcador input { width: 17px; height: 17px; accent-color: var(--marca); cursor: pointer; }

/* Caixinha sem texto ao lado (pedido da Vitoria, 22/08/2026).
   Sem o rotulo, a area clicavel seria so os 17px da caixa — pequeno no mouse e
   ruim no dedo. O padding no <label> devolve uma area de toque de 44px, que e o
   minimo recomendado, sem mostrar texto nenhum. */
.marcador-so-caixa {
  gap: 0;
  padding: 11px 14px;
  margin: -11px -14px;   /* nao aumenta a altura da linha da tabela */
  border-radius: 10px;
}
.marcador-so-caixa input { width: 20px; height: 20px; }
.marcador-so-caixa:hover { background: var(--fundo); }
.marcador-so-caixa:focus-within { outline: 2px solid var(--marca); outline-offset: -2px; }

.sempre {
  display: inline-block;
  padding: 3px 11px;
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #fff;
  background: var(--marca);
  border-radius: 999px;
}

.botao-estreito { width: auto; min-width: 180px; margin-top: 18px; }
.tabela .ajuda { white-space: normal; max-width: 340px; margin-top: 3px; }
.tabela .sutil { font-weight: 400; color: var(--tinta-suave); text-transform: none;
                 letter-spacing: 0; font-size: .74rem; }

/* ---------------------------------------------------------------- menu lateral
   Usado no painel Financeiro, que passou a ter modulos (contas a pagar,
   despesas, bancos...). Em tela estreita o menu vira uma faixa rolavel em cima
   do conteudo, em vez de espremer as duas colunas. */
.com-menu { display: flex; gap: 22px; align-items: flex-start; }
.area-modulo { flex: 1; min-width: 0; }

.menu-lateral {
  flex: 0 0 232px;
  position: sticky;
  top: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--papel);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 8px;
  box-shadow: var(--sombra);
}

.item-menu {
  display: block;
  padding: 10px 12px;
  border-radius: 9px;
  text-decoration: none;
  color: var(--tinta);
  border-left: 3px solid transparent;
}
.item-menu:hover { background: var(--fundo); }
.item-menu strong { display: block; font-size: .89rem; }
.item-menu span {
  display: block;
  font-size: .74rem;
  color: var(--tinta-suave);
  margin-top: 2px;
  line-height: 1.35;
}
.item-menu.ativo {
  background: var(--fundo);
  border-left-color: var(--marca);
}
.item-menu.ativo strong { color: var(--marca); }

@media (max-width: 900px) {
  .com-menu { flex-direction: column; }
  .menu-lateral {
    position: static;
    flex-direction: row;
    width: 100%;
    overflow-x: auto;
    gap: 6px;
  }
  .menu-lateral .item-menu { flex: 0 0 auto; border-left: none; border-bottom: 3px solid transparent; }
  .menu-lateral .item-menu.ativo { border-bottom-color: var(--marca); }
  .item-menu span { display: none; }
}

/* ---------------------------------------------------------------- enviar arquivo */
/* Tela /docs: a barra de progresso do envio em pedacos. */
.formulario { display: flex; flex-direction: column; gap: 14px; max-width: 520px; }
.campo { display: flex; flex-direction: column; gap: 6px; font-size: .86rem; }
.campo > span { font-weight: 600; }
.campo input[type=file] { padding: 10px; border: 1px dashed var(--borda);
                          border-radius: 8px; background: var(--fundo); }

.barra-envio { height: 10px; border-radius: 999px; background: var(--fundo);
               overflow: hidden; }
.barra-envio-preenchida { height: 100%; width: 0; background: var(--marca);
                          transition: width .18s linear; }

.aviso-envio { min-height: 1.2em; font-size: .86rem; margin: 0; }
.aviso-envio.bom  { color: var(--marca); font-weight: 600; }
.aviso-envio.ruim { color: var(--erro); font-weight: 600; }

/* Cadastrar pessoa na tela de niveis de acesso: campo e botao na mesma linha,
   sem o campo ocupar a largura toda (que e o padrao dos formularios de login). */
.linha-formulario {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.linha-formulario input[type=text] { width: auto; flex: 1 1 260px; max-width: 340px; }
.linha-formulario .botao-estreito { margin-top: 0; min-width: 140px; }


/* ================================================================
   RESPONSIVIDADE — 22/08/2026
   ================================================================
   Pedido da Vitoria: "adeque ele a varios tipos de tela".

   O portal e usado de tres formas bem diferentes:

     - **celular**, na recepcao e no corredor, uma mao so;
     - **notebook**, que e a tela da maioria;
     - **monitor grande**, na sala da gestao, onde o painel fica aberto o dia
       inteiro e sobrava espaco vazio dos dois lados.

   Sao tres larguras de corte, e nao mais, de proposito: duas delas (560px e
   900px) ja eram usadas em outros pontos deste arquivo, e multiplicar corte e
   o jeito mais rapido de um ajuste comecar a brigar com o outro.

     <= 560px   celular
     <= 900px   celular grande, tablet em pe, notebook pequeno
     >= 1500px  monitor grande

   Regras que valem em qualquer largura:

     - **nada corta e nada estoura para o lado.** O que e largo por natureza
       (tabela de muitas colunas, grafico com eixo de datas) rola dentro da
       propria caixa, nunca empurra a pagina;
     - **area de toque de 44px** no que se clica com o dedo;
     - o tamanho do texto vem de `clamp()`, la no comeco do arquivo, e nao de
       um tamanho diferente por media query.
   ---------------------------------------------------------------- */

/* Trava geral: nenhum elemento pode empurrar a pagina para o lado. Sem isto,
   uma tabela larga cria rolagem horizontal do documento inteiro — e a pessoa
   perde o menu e o cabecalho ao arrastar.

   `clip` e nao `hidden`, de proposito: `overflow-x: hidden` transforma o body
   num container de rolagem, e isso quebra o `position: sticky` do menu lateral
   do Financeiro. `clip` corta sem criar container. Navegador antigo que nao
   conheca `clip` simplesmente ignora a linha — fica sem a trava, mas nada
   quebra. */
html, body { max-width: 100%; }
body { overflow-x: clip; }

img, svg, table { max-width: 100%; }

/* O que rola para o lado rola por dentro, com o toque acompanhando o dedo. */
.tabela-rolagem, .grafico-rolagem, .abas, .filtro-periodo, .menu-lateral {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

/* Aviso de que ainda tem conteudo para o lado. A classe e posta pelo
   /static/rolagem.js, que mede se sobrou coisa fora da vista. Sem esse aviso, o
   grafico cortado na borda parece grafico quebrado, nao grafico que rola. */
.rolagem-aviso {
  display: none;
  margin: 6px 0 0;
  font-size: .76rem;
  color: var(--tinta-suave);
}
.tem-rolagem + .rolagem-aviso { display: block; }

/* ---------------------------------------------------------------- <= 900px */
@media (max-width: 900px) {
  /* A barra do topo: em vez de espremer os botoes, deixa quebrar a linha. */
  .barra { flex-wrap: wrap; padding: 10px 14px; row-gap: 8px; }
  .barra .espaco { flex-basis: 100%; height: 0; order: 0; }
  .titulo-barra { flex: 1 1 auto; min-width: 0; }

  .conteudo { padding: 22px 16px 92px; }

  /* Duas colunas viram uma: 340px de minimo nao cabe lado a lado aqui. */
  .duas-colunas { grid-template-columns: 1fr; }

  /* Filtros do painel embaixo do titulo, ocupando a largura toda. */
  .cabecalho-painel { align-items: stretch; }
  .filtros-painel { width: 100%; }

  /* Abas e filtro de periodo: rolam para o lado em vez de virar tres linhas.
     Um filtro de 4 opcoes que quebra em tres linhas empurra o painel para
     baixo da dobra — a pessoa abre a tela e nao ve numero nenhum. */
  .abas, .filtro-periodo {
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }
  .abas::-webkit-scrollbar, .filtro-periodo::-webkit-scrollbar { display: none; }
  .aba { flex: 0 0 auto; }
}

/* ---------------------------------------------------------------- <= 560px */
@media (max-width: 560px) {
  .conteudo { padding: 18px 12px 96px; }
  .cartao { padding: 22px 18px; }
  body.tela-centro { padding: 16px 10px 72px; }

  /* Um bloco por linha: 230px de minimo ainda tentava caber dois em 540px. */
  .blocos, .kpis { grid-template-columns: 1fr; }

  /* Area de toque. O dedo nao acerta um alvo de 30px de altura. */
  .botao-barra { padding: 10px 14px; min-height: 44px; display: inline-flex;
                 align-items: center; }
  .aba { padding: 12px 14px; min-height: 44px; display: inline-flex;
         align-items: center; justify-content: center; }
  .item-menu { min-height: 44px; display: flex; align-items: center; }

  /* Tabela mais compacta, e a primeira coluna fica presa ao arrastar: sem isso
     a pessoa rola para ver a quinta coluna e nao sabe mais de qual linha e. */
  .tabela { font-size: .82rem; }
  .tabela th, .tabela td { padding: 8px 9px; }
  .tabela th:first-child, .tabela td:first-child {
    position: sticky;
    left: 0;
    box-shadow: 1px 0 0 var(--borda);
  }
  /* A cor de fundo precisa ser opaca (senao o resto da linha passa por baixo) e
     precisa ser a MESMA que a celula ja tinha — `.tabela th` e cinza, `td` e
     branco. Pintar tudo de branco deixaria a primeira celula do cabecalho
     destoando da propria linha dela. */
  .tabela td:first-child { background: var(--papel); }
  .tabela th:first-child { background: var(--fundo); }
  .tabela thead th:first-child { z-index: 2; }
  .tabela .ajuda { max-width: 190px; }
  .detalhe { max-width: 200px; }

  /* Grafico: rola menos que antes (520 -> 440) e o texto do eixo cresce junto,
     para nao virar risquinho ilegivel quando o SVG encolhe. O numero esta em
     unidade do proprio desenho, entao ele escala com o grafico. */
  .grafico { min-width: 440px; }
  .grafico-calor { min-width: 560px; }
  .eixo { font-size: 14px; }

  /* O bloco fixo do canto nao pode cobrir botao de salvar nem fim de tabela. */
  .botao-estreito { width: 100%; min-width: 0; }
  .linha-formulario input[type=text] { max-width: none; }
  .linha-formulario .botao-estreito { width: auto; min-width: 130px; }
}

/* ---------------------------------------------------------------- >= 1500px */
@media (min-width: 1500px) {
  /* Na sala da gestao sobrava faixa branca dos dois lados enquanto o grafico
     ficava apertado no meio. O painel passa a usar o espaco; o texto corrido
     (login, primeiro acesso) NAO cresce, porque linha longa demais cansa de
     ler. */
  .conteudo-largo { max-width: 1420px; }
  .kpis { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .duas-colunas { grid-template-columns: repeat(auto-fit, minmax(460px, 1fr)); }
  .menu-lateral { flex: 0 0 264px; }
}

/* ---------------------------------------------------------------- impressao */
/* A Vitoria leva numero para reuniao. Em papel, menu e botao so gastam tinta. */
@media print {
  .barra, .menu-lateral, .rodape-fixo, .abas, .filtro-periodo,
  .filtros-painel, .rolagem-aviso { display: none !important; }
  .conteudo, .conteudo-largo { max-width: none; padding: 0; }
  .tabela-rolagem, .grafico-rolagem { overflow: visible; }
  .bloco, .kpi, .cartao { break-inside: avoid; box-shadow: none; }
  body { background: #fff; }
}

/* ---------------------------------------------------------------- preferencias */
/* Quem pediu menos animacao no sistema operacional nao recebe animacao. */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Etiqueta embaixo do titulo dizendo que a tela esta filtrada. Sem ela, alguem
   olha um numero de uma unidade pensando que e o laboratorio inteiro. */
.etiqueta-unidade {
  display: inline-block;
  margin: 6px 0 0;
  padding: 4px 11px;
  font-size: .82rem;
  background: var(--marca);
  color: #fff;
  border-radius: 999px;
}
.etiqueta-unidade a { color: #fff; text-decoration: underline; }

/* Filtro unido: unidade e datas no mesmo formulário, com um botão "Aplicar" só
   (pedido da Vitória, 24/08/2026). Dois botões para o mesmo filtro fazem a pessoa
   se perguntar qual dos dois vale. */
.filtro-painel-unido {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 5px 9px;
  background: var(--fundo);
  border-radius: 10px;
  font-size: .84rem;
}
.filtro-painel-unido.ativa { box-shadow: inset 0 0 0 2px var(--marca); }
.filtro-painel-unido label { font-weight: 600; color: var(--tinta-suave); margin: 0;
                             display: inline-flex; align-items: center; gap: 5px; }
.filtro-painel-unido select,
.filtro-painel-unido input[type=date] {
  font: inherit;
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid var(--borda);
  border-radius: 8px;
  padding: 6px 8px;
  width: auto;
}
.filtro-painel-unido select { max-width: 240px; }
.filtro-painel-unido select:focus-visible,
.filtro-painel-unido input[type=date]:focus-visible {
  outline: 2px solid var(--marca);
  outline-offset: 1px;
}
.filtro-painel-unido button[type=submit] {
  font: inherit;
  font-weight: 600;
  padding: 6px 14px;
  color: #fff;
  background: var(--marca);
  border: 1px solid var(--marca);
  border-radius: 8px;
  cursor: pointer;
  width: auto;
}
.filtro-painel-unido button[type=submit]:hover { background: var(--marca-escura); }

/* Traço fino separando "que unidade" de "que período" dentro do mesmo filtro. */
.separador-filtro {
  width: 1px;
  align-self: stretch;
  min-height: 22px;
  background: var(--borda);
  margin: 0 3px;
}

@media (max-width: 560px) {
  .filtro-painel-unido { width: 100%; }
  .filtro-painel-unido select { max-width: none; flex: 1 1 100%; }
  .filtro-painel-unido button[type=submit] { flex: 1 1 100%; }
  .separador-filtro { display: none; }
}

/* O periodo em uso, no alto de cada modulo do financeiro (v2.05.00). Existe
   porque cinco dos sete modulos nao diziam em lugar nenhum qual recorte de
   data estavam mostrando — e numero sem ancora escrita e numero mal lido. */
.periodo-em-uso {
  margin: 0 0 1rem;
  padding: .45rem .7rem;
  background: var(--fundo-suave, #f4f6f8);
  border-left: 3px solid var(--marca);
  border-radius: 0 6px 6px 0;
}

/* Etiqueta da fonte do dado (v2.06.00). A ordem de confiabilidade — GE, depois
   Softlab, depois Naja — foi decidida pela Vitoria em 25/08/2026, e so serve
   para alguma coisa se a tela disser de onde veio cada numero. */
.marca-fonte {
  display: inline-block;
  padding: .05rem .4rem;
  border-radius: 4px;
  font-size: .85em;
  background: var(--marca);
  color: #fff;
}
.marca-fonte-naja { background: #6b7280; }
.marca-fonte-ge   { background: #15803d; }

/* --------------------------------------------- situação das máquinas (NTO)
   As cores saem das variáveis do tema, então acompanham claro/escuro sem
   repetir valor de cor em lugar nenhum. */
.maq-situacao {
  display: inline-block;
  padding: .1rem .45rem;
  border-radius: 4px;
  font-size: .8rem;
  font-weight: 600;
  white-space: nowrap;
}
.maq-rodando       { background: var(--ok-fundo);      color: var(--ok); }
.maq-parada        { background: var(--atencao-fundo); color: var(--atencao); }
.maq-parada-alerta { background: var(--erro-fundo);    color: var(--erro); }
.maq-cancelada,
.maq-sem-registro  { background: var(--fundo-suave);   color: var(--tinta-suave); }
.maq-codigo        { font-size: .78rem; color: var(--tinta-suave); }

/* ---------------------------------------------------------------- abas do NTO
   v2.21.00 (28/09/2026): o NTO ganhou a aba Hemograma. As abas ficam logo
   abaixo do titulo, com o mesmo desenho das abas de periodo — le como
   "partes do mesmo painel", nao como outro painel. */
.abas-painel { max-width: 420px; margin: -8px 0 20px; }
.abas-painel .aba { padding: 8px 14px; }

/* Seletor de unidade dentro do formulario de datas. */
.filtro-datas select {
  border: 1px solid var(--borda);
  border-radius: 7px;
  padding: 4px 6px;
  font: inherit;
  color: var(--tinta);
  background: var(--papel);
  max-width: 230px;
}

/* ---------------------------------------------------------------- hemograma */

/* A caixa do que o dono do laboratorio precisa conferir. Pedido da Vitoria:
   "coloque esses pontos e essas duas perguntas em alguma caixinha dentro da
   aba". Fica no topo, com borda de atencao: e o que decide se os numeros de
   baixo valem. */
.caixa-conferir {
  background: var(--atencao-fundo);
  border: 1px solid var(--atencao);
  border-left-width: 5px;
  border-radius: var(--raio);
  padding: 16px 20px;
  margin: 0 0 22px;
  font-size: .88rem;
}
.caixa-conferir h2 { margin: 0 0 4px; font-size: 1rem; color: var(--atencao); }
.caixa-conferir h3 { margin: 14px 0 4px; font-size: .9rem; }
.caixa-conferir ol { margin: 6px 0 0; padding-left: 22px; }
.caixa-conferir li { margin-bottom: 6px; }
.caixa-conferir .enquanto { margin: 12px 0 0; color: var(--tinta-suave); font-size: .84rem; }

.ancora-periodo { margin: -10px 0 18px; font-size: .86rem; color: var(--tinta-suave); }

.tabela-hemo { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: .84rem; }
.tabela-hemo th, .tabela-hemo td {
  padding: 7px 9px; text-align: left; font-weight: 400;
  border-top: 1px solid var(--borda); vertical-align: top;
}
.tabela-hemo thead th {
  font-weight: 700; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .04em; color: var(--tinta-suave); border-top: 0;
}
.tabela-hemo th[scope=row] { font-weight: 600; white-space: nowrap; }
.tabela-hemo .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabela-hemo .sutil { color: var(--tinta-suave); font-size: .78rem; }
.tabela-hemo .grupo { text-align: center; border-bottom: 1px solid var(--borda); }

/* Valor fora da referencia na lista: cor E seta — a seta e para quem nao
   distingue a cor, e para quando a pagina e impressa em preto e branco. */
.hemo-acima  { color: var(--erro); font-weight: 700; }
.hemo-abaixo { color: #1d4ed8; font-weight: 700; }

.acoes-lista { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 10px 0 0; }
.acoes-lista .sutil { color: var(--tinta-suave); font-size: .8rem; }
/* Com o seletor de unidade dentro, o formulario de datas quebra linha em tela
   estreita em vez de estourar a largura. */
.filtro-datas { flex-wrap: wrap; }