/* Visual calmo e clinico. Cores sobrias, boa legibilidade. */
/* As cores base agora APONTAM para os tokens "Seiva" (nutria-tokens.css),
   então todo o style.css segue a paleta "Folha" e ganha modo claro/escuro de
   uma vez. Mantemos os nomes antigos (--azul, --linha, --branco…) para não
   reescrever cada regra: quem usava azul vira verde-marca, cinza vira "muted",
   branco vira "painel" (escurece no dark), fundo vira "papel", etc. */
:root {
  --azul: var(--nt-brand);
  --azul-escuro: var(--nt-brand-deep);
  --texto: var(--nt-ink);
  --cinza: var(--nt-muted);
  --linha: var(--nt-line);
  --fundo: var(--nt-bg2);
  --branco: var(--nt-panel);
  --ok-fundo: var(--nt-ok-soft);   --ok-borda: var(--nt-ok);
  --erro-fundo: var(--nt-risk-soft); --erro-borda: var(--nt-risk);
}

* { box-sizing: border-box; }

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

/* --- Barra superior --- */
.barra {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--branco);
  border-bottom: 1px solid var(--linha);
  padding: 0 24px; height: 56px;
}
.marca { font-weight: 700; color: var(--azul); }
.barra nav { display: flex; align-items: center; gap: 18px; }
.barra nav a { text-decoration: none; color: var(--cinza); font-weight: 600; }
.barra nav a:hover { color: var(--azul); }
.barra nav a.destaque { color: var(--azul); }
.barra .usuario { color: var(--cinza); font-size: 14px; }
.barra .sair { color: var(--erro-borda); }

/* --- Conteudo --- */
.conteudo { max-width: 960px; margin: 32px auto; padding: 0 24px; }
h1 { margin: 0 0 4px; font-size: 26px; }
h2 { margin-top: 32px; font-size: 19px; }
.sub { color: var(--cinza); margin-top: 0; }

/* --- Avisos (flash) --- */
.aviso { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; border: 1px solid; }
.aviso-ok { background: var(--ok-fundo); border-color: var(--ok-borda); }
.aviso-erro { background: var(--erro-fundo); border-color: var(--erro-borda); }
/* Sanidade da dieta: alerta que NAO bloqueia (ambar). */
.aviso-aviso { background: #fff8ec; border-color: #e0a93a; color: #8a5a00; }

/* --- Cartao central (login / primeiro acesso) --- */
.cartao-centro {
  max-width: 380px; margin: 8vh auto; background: var(--branco);
  border: 1px solid var(--linha); border-radius: 12px; padding: 32px;
}
.cartao-centro h1 { text-align: center; }
.cartao-centro .sub { text-align: center; margin-bottom: 24px; }

/* --- Formularios --- */
label { display: block; margin-bottom: 14px; font-weight: 600; font-size: 14px; }
input {
  width: 100%; margin-top: 6px; padding: 10px 12px; font-size: 15px;
  border: 1px solid var(--linha); border-radius: 8px; font-weight: 400;
}
input:focus { outline: 2px solid var(--azul); border-color: var(--azul); }

button, .botao {
  display: inline-block; background: var(--azul); color: #fff; border: 0;
  padding: 11px 18px; font-size: 15px; font-weight: 600; border-radius: 8px;
  cursor: pointer; text-decoration: none; text-align: center;
}
button:hover, .botao:hover { background: var(--azul-escuro); }
.cartao-centro button { width: 100%; margin-top: 8px; }

/* --- Grade do painel (abas) --- */
.grade { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 24px; }
.bloco {
  display: flex; gap: 14px; background: var(--branco); border: 1px solid var(--linha);
  border-radius: 12px; padding: 18px;
}
.bloco-num {
  flex: 0 0 32px; height: 32px; border-radius: 50%; background: var(--fundo);
  color: var(--cinza); font-weight: 700; display: flex; align-items: center;
  justify-content: center;
}
.bloco h3 { margin: 0 0 4px; font-size: 16px; }
.bloco p { margin: 0 0 8px; color: var(--cinza); font-size: 14px; }
.etiqueta {
  font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 20px;
  background: var(--fundo); color: var(--cinza);
}
.bloco.pronto .etiqueta { background: var(--ok-fundo); color: var(--ok-borda); }

/* --- Pagina de backup --- */
.acoes { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0; align-items: center; }
.tabela { width: 100%; border-collapse: collapse; background: var(--branco); border-radius: 8px; overflow: hidden; }
.tabela th, .tabela td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--linha); }
.tabela th { background: var(--fundo); font-size: 13px; color: var(--cinza); }
.vazio { color: var(--cinza); }
.dica { margin-top: 24px; padding: 14px 16px; background: var(--branco); border: 1px solid var(--linha); border-left: 4px solid var(--azul); border-radius: 8px; font-size: 14px; }

/* --- Catalogos: blocos clicaveis --- */
.bloco.link { text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s; }
.bloco.link:hover { border-color: var(--azul); box-shadow: 0 2px 10px rgba(31,111,235,.10); }
.bloco h3 { color: var(--texto); }

/* --- Trilha (breadcrumb) --- */
.trilha { color: var(--cinza); font-size: 13px; margin: 0 0 4px; }
.trilha a { color: var(--azul); text-decoration: none; }
.trilha a:hover { text-decoration: underline; }

/* --- Etiqueta verde reutilizavel --- */
.etiqueta.ok { background: var(--ok-fundo); color: var(--ok-borda); margin-left: 6px; }

/* --- Botao secundario (contorno) --- */
.botao.secundario, button.secundario {
  background: var(--branco); color: var(--azul); border: 1px solid var(--linha);
}
.botao.secundario:hover, button.secundario:hover { background: var(--fundo); border-color: var(--azul); }

/* --- Formularios de catalogo --- */
.formulario { max-width: 560px; }
select {
  width: 100%; margin-top: 6px; padding: 10px 12px; font-size: 15px;
  border: 1px solid var(--linha); border-radius: 8px; background: var(--branco);
}
select:focus { outline: 2px solid var(--azul); border-color: var(--azul); }
.grade-campos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 16px; }
.grade-campos.dois { grid-template-columns: repeat(2, 1fr); }
textarea {
  width: 100%; margin-top: 6px; padding: 10px 12px; font-size: 15px;
  font-family: inherit; border: 1px solid var(--linha); border-radius: 8px;
  resize: vertical;
}
textarea:focus { outline: 2px solid var(--azul); border-color: var(--azul); }
label.checkbox { display: flex; align-items: center; gap: 8px; }
label.checkbox input { width: auto; margin-top: 0; }
.sub-linha { color: var(--cinza); font-size: 12px; margin-top: 2px; }
.dica.aviso-doses { border-left-color: #c77700; background: #fff8ec; }
/* Cartao de reposicao de eletrolitos (K/Mg/P baixos) — SUGESTAO, so leitura */
.cartao-reposicao { border-left: 4px solid #c77700; }
.lista-reposicao { margin: 10px 0 0; padding-left: 20px; }
.lista-reposicao > li { margin-bottom: 6px; }
.lista-reposicao > li.nivel-atual { font-weight: 600; }
.lista-reposicao ul { margin: 2px 0 0; padding-left: 18px; font-weight: 400; }
.tags-aporte { margin-top: 4px; }
.tag-aporte {
  display: inline-block; font-size: 11px; font-weight: 700;
  padding: 1px 7px; border-radius: 20px; margin-right: 4px;
}
.tag-aporte.cal { background: #fff1e0; color: #b35c00; }
.tag-aporte.osm { background: #e7f0fb; color: #1a5fd0; }
.tag-aporte.central { background: #fdeaea; color: #b3261e; }
/* Sinalizacoes de terapia nutricional (Passo de apoio A) */
.tag-aporte.tn { background: #e6f4ea; color: #2e7d46; }
.tag-aporte.diarreia { background: #fbefd6; color: #8a5a00; }
.tag-aporte.interacao { background: #efe7fb; color: #6a3fb3; }

/* --- Calculadora de antropometria --- */
.calc-tabela td { vertical-align: middle; }
.calc-tabela input, .calc-tabela select {
  max-width: 130px; margin-top: 0; padding: 6px 8px;
}
.calc-tabela input.largo { max-width: 320px; }
.res { font-weight: 700; }
.res.ok { color: var(--ok-borda); }
.res.alerta { color: #b35c00; }
.res.risco { color: var(--erro-borda); }

/* --- Evolucao: criterios de risco de SR --- */
.sr-criterio {
  border: 1px solid var(--linha); border-radius: 8px;
  padding: 8px 12px 10px; margin: 0 0 10px;
}
.sr-criterio legend { font-weight: 700; padding: 0 6px; font-size: 14px; }
.sr-criterio label.checkbox { align-items: flex-start; margin-top: 4px; }
.sr-criterio label.checkbox input { margin-top: 3px; }
.sr-criterio label.checkbox span { font-size: 13px; }
#sr-extremos label.checkbox { align-items: center; margin-top: 4px; }

/* Eventos adversos: caixas por categoria (sub-passo 8). */
.grupo-eventos {
  border: 1px solid var(--linha); border-radius: 8px;
  padding: 8px 12px 10px; margin: 0 0 10px;
}
.grupo-eventos legend { font-weight: 700; padding: 0 6px; font-size: 14px; }
.grupo-eventos label.caixa {
  display: flex; align-items: flex-start; gap: 6px;
  font-size: 13px; font-weight: 400; margin-top: 2px;
}
/* O input global e width:100% + padding (linha 60); sem desfazer isso, a
   caixa estica e cobre o rotulo (checkmark sobre o texto). Volta ao tamanho
   natural de checkbox, como em label.checkbox. */
.grupo-eventos label.caixa input {
  width: auto; flex: 0 0 auto; margin-top: 3px; padding: 0;
}

/* --- Cabecalho da pagina de detalhe --- */
.cabecalho-detalhe { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cabecalho-detalhe .acoes { margin: 4px 0 0; }

/* --- Tabela de versoes --- */
.tabela.compacta th, .tabela.compacta td { padding: 8px 10px; font-size: 14px; }
.rolagem { overflow-x: auto; }
.nowrap { white-space: nowrap; }
.tabela tr.inativa td { color: var(--cinza); }
.tabela tr.vigente { background: var(--ok-fundo); }
.acoes-linha { display: flex; gap: 12px; align-items: center; }
.acoes-linha a { color: var(--azul); text-decoration: none; font-weight: 600; }
.acoes-linha a:hover { text-decoration: underline; }
.em-linha { display: inline; }
.link-perigo {
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  color: var(--erro-borda); font-weight: 600; font-size: inherit;
}
.link-perigo:hover { background: none; text-decoration: underline; }
/* Botao com cara de link azul (acoes neutras em tabela: Suspender/Reativar). */
.link-acao {
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  color: var(--azul); font-weight: 600; font-size: inherit;
}
.link-acao:hover { background: none; text-decoration: underline; }

/* --- Medicacoes de uso continuo --- */
h3.sub-secao { margin: 20px 0 8px; font-size: 15px; color: var(--cinza); }
/* Seletor logo abaixo da caixa de busca: sem o respiro de cima do label. */
label.sem-topo { margin-top: -8px; }
.busca-med { max-width: 360px; }

/* --- Evolucao diaria --- */
/* Etiqueta ambar (ex.: intercorrencia), no mesmo molde da verde .ok. */
.etiqueta.alerta { background: #fff8ec; color: #b35c00; }
/* Colunas numericas alinhadas a direita (tabela de dieta prescrito x infundido). */
.tabela th.num, .tabela td.num { text-align: right; white-space: nowrap; }
/* Status do lab frente a faixa de referencia. Cores distintas por DIRECAO:
   "baixo" = frio (azul), "alto" = quente (coral), "normal" = discreto (verde).
   Tokens de tema em nutria-tokens.css sobrescrevem isto (claro/escuro). */
.etiqueta.baixo { background: #E4EEFB; color: #1A5FA8; }
.etiqueta.alto { background: #FBE7E3; color: #B0281B; }
.etiqueta.normal { background: var(--ok-fundo); color: var(--ok-borda); }
/* Etiqueta de risco (vermelho): sarcopenia, forca reduzida, obesidade, etc. */
.etiqueta.risco { background: var(--erro-fundo); color: var(--erro-borda); }
/* Antropometria: linha de grupo (bloco) na tabela de medidas/tendencia. */
.tabela tr.grupo-linha td { background: var(--fundo); color: var(--cinza); }
/* Lista de quedas eletroliticas no alerta de SR (queda frente ao basal). */
.lista-queda { margin: 6px 0; padding-left: 20px; }
.lista-queda li { margin: 2px 0; }
/* Botao secundario em tom de perigo (ex.: excluir evolucao). */
button.secundario.perigo, .botao.secundario.perigo { color: var(--erro-borda); }
button.secundario.perigo:hover, .botao.secundario.perigo:hover {
  border-color: var(--erro-borda); background: var(--erro-fundo);
}

/* --- Pacientes: busca --- */
.busca { display: flex; gap: 8px; align-items: center; flex: 1; min-width: 240px; }
.busca input { margin-top: 0; max-width: 320px; }
.busca button { white-space: nowrap; }

/* --- Ficha do paciente / detalhe da internacao --- */
.cartao { background: var(--branco); border: 1px solid var(--linha); border-radius: 12px; padding: 16px 20px; margin-bottom: 16px; }
.cartao h3 { margin: 0 0 8px; font-size: 16px; }
.dados-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px 20px; }
.dados-grade > div, .obs { font-size: 14px; }
.rotulo { display: block; color: var(--cinza); font-size: 12px; font-weight: 600; }
.obs { margin: 12px 0 0; }
.lembranca { margin: 14px 0 0; padding: 10px 14px; background: var(--fundo); border-left: 4px solid var(--azul); border-radius: 8px; font-style: italic; }

/* --- Listas clinicas (alergias, doencas, cirurgias, preferencias) --- */
.lista-clinica { list-style: none; margin: 0 0 8px; padding: 0; }
.lista-clinica li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--linha); font-size: 14px; }
.lista-clinica .meta { color: var(--cinza); font-size: 12px; margin-left: 6px; }
.form-inline { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.form-inline input, .form-inline select { margin-top: 0; max-width: 220px; }
.form-inline input.descricao { flex: 1; min-width: 200px; max-width: none; }
.form-inline .data { max-width: 160px; }
.form-inline button { padding: 9px 14px; }
.em-linha-rotulo { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; font-weight: 600; }
.em-linha-rotulo input { margin-top: 0; max-width: 160px; }

/* --- Seccao opcional (dados neonatais) --- */
details.bloco-neonatal { margin-bottom: 16px; border: 1px solid var(--linha); border-radius: 8px; padding: 10px 14px; background: var(--branco); }
details.bloco-neonatal summary { cursor: pointer; font-weight: 600; font-size: 14px; }
details.bloco-neonatal .grade-campos { margin-top: 12px; }

/* Assistente: fontes do corpus escondidas atras de "ver fontes" (contador
   discreto no titulo; a lista so aparece se o usuario quiser). */
details.fontes-corpus > summary { cursor: pointer; font-weight: 600; font-size: 13px; color: var(--nt-brand-text, #4C7A5B); width: fit-content; }
details.fontes-corpus[open] > summary { margin-bottom: 6px; }
details.fontes-corpus .lista-fichas { margin-top: 0; }

/* --- Calculadora de plantao (widget 100% local na tela de dieta) --- */
details.calc-plantao > summary { cursor: pointer; font-weight: 700; font-size: 16px; list-style: none; width: fit-content; }
details.calc-plantao > summary::-webkit-details-marker { display: none; }
details.calc-plantao > summary::after { content: "▸"; color: var(--cinza); font-size: 12px; margin-left: 6px; }
details.calc-plantao[open] > summary::after { content: "▾"; }
.calc-item { padding: 14px 0; border-top: 1px solid var(--linha); }
.calc-item:first-of-type { border-top: 0; }
.calc-item h4 { margin: 0 0 8px; font-size: 15px; }
.calc-item .sub-linha { margin-top: 6px; }
.calc-saida { margin: 8px 0 0; font-size: 14px; }

/* ------------------------------------------------------------------
   Responsivo — beira-leito (celular/tablet). Breakpoints:
   mobile <=640 · tablet 641–1024 · desktop >1024. A sidebar colapsa
   em drawer abaixo de 900px (bloco proprio, junto do menu lateral).
   ------------------------------------------------------------------ */

/* Tablet: formularios em 2 colunas (do desktop 3 para 2). */
@media (max-width: 1024px) {
  .grade-campos { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  /* Uma coluna: grades e formularios respiram no celular. */
  .grade { grid-template-columns: 1fr; }
  .grade-campos, .grade-campos.dois { grid-template-columns: 1fr; }

  /* Conteudo mais rente as bordas; titulo um pouco menor. */
  .conteudo { padding: 0 16px; }
  h1 { font-size: 23px; }

  /* Inputs >=16px evitam o zoom automatico do iOS (mantem inputmode/virgula). */
  input, select, textarea { font-size: 16px; }

  /* Alvos de toque >=44px nos botoes principais (dedo/luva). */
  .botao, button[type="submit"], button.secundario, .tema-btn, .aba-ped {
    min-height: 44px;
  }

  /* Acoes empilham em coluna, largura total (polegar). */
  .acoes { flex-direction: column; align-items: stretch; }
  .acoes > .botao, .acoes > button, .acoes > form { width: 100%; }
  .acoes > form.em-linha { display: block; }
  .acoes > form.em-linha button { width: 100%; }
  .cabecalho-detalhe .acoes { width: 100%; }

  /* Acoes dentro de linha de tabela: alvo confortavel, sem esticar tudo. */
  .acoes-linha { gap: 18px; flex-wrap: wrap; }
  .acoes-linha a, .link-acao, .link-perigo {
    display: inline-flex; align-items: center; min-height: 44px;
  }

  /* Busca de paciente e formularios inline: coluna unica, largura total. */
  .busca, .form-inline { flex-direction: column; align-items: stretch; }
  .busca input, .form-inline input, .form-inline select, .form-inline button,
  .form-inline input.descricao, .form-inline .data {
    max-width: none; width: 100%;
  }

  /* Caixas de marcacao (eventos, SR, rastreios): area clicavel generosa. */
  .grupo-eventos label.caixa, .pre-opcoes label.checkbox,
  #sr-extremos label.checkbox, label.checkbox {
    min-height: 44px; align-items: center;
  }
  .sr-criterio label.checkbox { min-height: 44px; align-items: flex-start; }
  .pre-opcoes { gap: 24px; }

  /* Rede de seguranca: qualquer tabela rola na horizontal sem estourar a
     largura da tela, mesmo sem o wrapper .rolagem. O seletor precisa ser
     mais especifico que `.tabela{overflow:hidden}` do nutria-tokens.css
     (carregado depois), senao a tabela clipa em vez de rolar. */
  .conteudo .tabela {
    display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
}

/* ============================================================
   Menu lateral "Seiva" (shell do app). As cores vêm dos tokens
   --nt-sidebar* (definidos em nutria-tokens.css); o layout é aqui.
   ============================================================ */
.app-shell { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; }

.lateral {
  background: var(--nt-sidebar);
  border-right: 1px solid var(--nt-sidebar-line);
  color: var(--nt-sidebar-fg);
  display: flex; flex-direction: column; gap: 4px;
  padding: 18px 14px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.lateral .marca-lateral { display: flex; align-items: center; gap: 9px; color: #fff; font-weight: 800; font-size: 22px; letter-spacing: -.02em; padding: 0 8px; }
.lateral .marca-lateral .ia { color: var(--nt-sidebar-active); }
.lateral .marca-icone { width: 30px; height: 30px; border-radius: 9px; flex: 0 0 auto; }
.lateral .marca-legenda { color: var(--nt-sidebar-fg); opacity: .6; font-size: 11px; padding: 2px 8px 8px; }

.lateral .grupo-nav { display: flex; flex-direction: column; gap: 2px; margin-top: 14px; }
.lateral .grupo-titulo {
  text-transform: uppercase; font-size: 10.5px; font-weight: 700;
  letter-spacing: .09em; color: var(--nt-sidebar-fg); opacity: .55; padding: 4px 10px 6px;
}
.lateral .item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 10px;
  color: var(--nt-sidebar-fg); text-decoration: none;
  font-weight: 600; font-size: 14px; line-height: 1.1;
}
.lateral a.item:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.lateral .item.ativo { background: var(--nt-sidebar-active); color: #fff; }
.lateral .item .ponto { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .45; flex: 0 0 auto; }
.lateral .item.ativo .ponto { opacity: .9; }
.lateral .item.embreve { cursor: default; opacity: .5; }
.lateral .item.embreve em { margin-left: auto; font-style: normal; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; opacity: .8; }

.lateral .rodape { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--nt-sidebar-line); display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.lateral .tema-btn {
  background: rgba(255, 255, 255, .08); color: #fff; border: 1px solid var(--nt-sidebar-line);
  border-radius: 9px; padding: 7px 12px; font-weight: 600; font-size: 13px; box-shadow: none; width: 100%; text-align: left;
}
.lateral .tema-btn:hover { background: rgba(255, 255, 255, .15); filter: none; transform: none; }
.lateral .usuario-lateral { color: var(--nt-sidebar-fg); font-size: 13px; padding: 0 2px; }
.lateral .rodape .sair { color: #fff; opacity: .75; font-size: 13px; text-decoration: none; font-weight: 600; padding: 0 2px; }
.lateral .rodape .sair:hover { opacity: 1; text-decoration: underline; }

.area { min-width: 0; display: flex; flex-direction: column; }
.app-shell .conteudo { margin: 28px auto; }

/* Botao de tema na tela de login (sem menu lateral). */
.tema-flutuante {
  position: fixed; top: 16px; right: 16px; z-index: 10;
  background: var(--nt-panel); color: var(--nt-brand-deep);
  border: 1px solid var(--nt-line); border-radius: 9px;
  padding: 7px 12px; font-weight: 600; font-size: 13px; box-shadow: var(--nt-shadow);
}
.tema-flutuante:hover { filter: none; transform: none; border-color: var(--nt-brand); }

/* ============================================================
   Topo mobile + menu lateral colapsavel (drawer). Em telas largas
   o menu e a coluna fixa (grid acima); abaixo de 900px vira um
   drawer off-canvas com backdrop e botao hamburguer. As cores da
   sidebar seguem verde-escuras nos dois temas (tokens --nt-sidebar*).
   ============================================================ */
.topo-mobile {
  display: none; align-items: center; gap: 12px;
  padding: 9px 16px;
  background: var(--nt-panel); border-bottom: 1px solid var(--nt-line);
  position: sticky; top: 0; z-index: 40;
}
.menu-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 8px 15px;
  background: var(--nt-panel); color: var(--nt-brand-deep);
  border: 1px solid var(--nt-line); border-radius: 10px;
  font-weight: 700; font-size: 15px; box-shadow: none;
}
.menu-toggle:hover { background: var(--nt-hover); filter: none; transform: none; }
.topo-mobile .marca-topo { display: inline-flex; align-items: center; gap: 7px; font-weight: 800; font-size: 18px; color: var(--nt-ink); letter-spacing: -.02em; }
.topo-mobile .marca-topo .ia { color: var(--nt-brand-text); }
.topo-mobile .marca-icone-topo { width: 24px; height: 24px; border-radius: 7px; flex: 0 0 auto; }
.backdrop-menu { display: none; }

@media (max-width: 900px) {
  /* Uma coluna: o conteudo ocupa toda a largura; a sidebar sai do fluxo. */
  .app-shell { grid-template-columns: 1fr; }
  /* Sem as margens "auto" horizontais, que fariam o .conteudo (flex item)
     encolher ao min-content de uma tabela e estourar a largura da tela.
     Zeradas so aqui: no desktop elas centralizam o conteudo (max 960px). */
  .app-shell .conteudo { margin-left: 0; margin-right: 0; }
  .lateral {
    position: fixed; top: 0; left: 0; z-index: 60;
    width: min(284px, 82vw); height: 100vh;
    transform: translateX(-100%);
    transition: transform .22s ease;
    box-shadow: 0 0 44px -12px rgba(0, 0, 0, .55);
  }
  .app-shell.menu-aberto .lateral { transform: translateX(0); }

  .backdrop-menu {
    display: block; position: fixed; inset: 0; z-index: 50;
    background: rgba(0, 0, 0, .44);
    opacity: 0; pointer-events: none; transition: opacity .22s ease;
  }
  .app-shell.menu-aberto .backdrop-menu { opacity: 1; pointer-events: auto; }

  .topo-mobile { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
  .lateral, .backdrop-menu { transition: none; }
}

/* ============================================================
   Indicadores de qualidade (painel de KPIs do servico).
   ============================================================ */
.painel-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin: 18px 0; }
.kpi { margin-bottom: 0; }
.kpi .valor { font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--texto); font-variant-numeric: tabular-nums; line-height: 1.1; }
.kpi .valor .unid { font-size: 14px; font-weight: 600; color: var(--cinza); letter-spacing: 0; }
.kpi .rotulo { display: block; margin-top: 6px; color: var(--texto); font-size: 13px; font-weight: 700; }
.kpi .detalhe { margin-top: 4px; color: var(--cinza); font-size: 12px; }

.filtro-periodo { display: flex; align-items: center; gap: 8px; margin: 4px 0 0; }
.filtro-periodo label { color: var(--cinza); font-size: 13px; font-weight: 600; }
.filtro-periodo select { margin-top: 0; width: auto; min-width: 170px; }

/* ============================================================
   Rastreios (NRS-2002): linhas Sim/Nao da pre-triagem.
   ============================================================ */
.pre-linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--linha); flex-wrap: wrap; }
.pre-linha:last-child { border-bottom: none; }
.pre-pergunta { font-size: 14px; }
.pre-opcoes { display: flex; gap: 16px; flex: 0 0 auto; }
.pre-opcoes label.checkbox { margin-top: 0; }

/* ============================================================
   Antropometria pediatrica / neonatal (Etapa 7). Usa os tokens
   ja remapeados (--azul, --linha, --branco...) -> herda a paleta
   "Folha" e o modo escuro automaticamente.
   ============================================================ */
.abas-ped { display: flex; flex-wrap: wrap; gap: 6px; padding: 5px; background: var(--fundo); border: 1px solid var(--linha); border-radius: 12px; margin: 16px 0 20px; }
.aba-ped { border: 0; background: transparent; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--cinza); padding: 9px 15px; border-radius: 9px; }
.aba-ped.ativa { background: var(--branco); color: var(--azul); box-shadow: 0 2px 8px -4px rgba(0,0,0,.25); }
.aba-ped:hover { color: var(--azul); }
.painel-ped { display: none; }
.painel-ped.mostra { display: block; }

.grade-ped { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 820px) { .grade-ped { grid-template-columns: 1fr; } }

.stats-ped { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.stat-ped { background: var(--fundo); border: 1px solid var(--linha); border-radius: 11px; padding: 8px 13px; min-width: 104px; }
.stat-ped .k { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--cinza); }
.stat-ped .v { font-size: 15px; font-weight: 800; color: var(--texto); margin-top: 2px; }
.stat-ped.destaque { background: var(--ok-fundo); border-color: var(--ok-borda); }
.stat-ped.destaque .v { color: var(--ok-borda); }

.medida-ped { font-size: 40px; font-weight: 800; color: var(--texto); line-height: 1; font-variant-numeric: tabular-nums; }
.medida-ped .u { font-size: 15px; font-weight: 800; color: var(--cinza); }
.linha-res { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--linha); font-size: 13px; }
.linha-res:last-child { border-bottom: 0; }
.linha-res b { color: var(--texto); font-weight: 800; font-variant-numeric: tabular-nums; }

.faixa-barra { position: relative; height: 34px; margin: 14px 0 6px; }
.faixa-track { position: absolute; top: 12px; left: 0; right: 0; height: 9px; border-radius: 6px; background: var(--fundo); border: 1px solid var(--linha); }
.faixa-alvo { position: absolute; top: 12px; height: 9px; border-radius: 6px; background: var(--ok-fundo); border: 1px solid var(--ok-borda); }
.faixa-marca { position: absolute; top: 6px; width: 4px; height: 21px; border-radius: 3px; background: var(--azul); transform: translateX(-2px); box-shadow: 0 0 0 3px var(--fundo); }
.faixa-ticks { position: absolute; top: 25px; left: 0; right: 0; display: flex; justify-content: space-between; font-size: 9px; font-weight: 600; color: var(--cinza); }

.formula-ped { margin-top: 12px; background: var(--fundo); border: 1px dashed var(--linha); border-radius: 8px; padding: 10px 12px; font-size: 12px; font-weight: 600; line-height: 1.5; color: var(--texto); }

/* Alta / transicao: esboco do resumo de alta (texto pre-formatado). */
.esboco { margin: 10px 0 4px; padding: 12px 14px; background: var(--fundo); border: 1px solid var(--linha); border-radius: 8px; font-family: inherit; font-size: 12.5px; line-height: 1.55; color: var(--texto); white-space: pre-wrap; overflow-x: auto; max-height: 340px; }

/* ============================================================
   Tendencias (Passo 3): cartoes com mini-graficos SVG do servidor.
   O SVG usa var(--azul/--linha/--cinza/--ok-fundo/--erro-borda/
   --nt-gold) -> herda a paleta "Folha" e o modo escuro sozinho.
   ============================================================ */
.grade-graficos { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 14px; margin: 6px 0 8px; }
.cartao.grafico { margin-bottom: 0; padding: 14px 16px 12px; }
.grafico-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.grafico-titulo { font-size: 13px; font-weight: 800; color: var(--texto); }
.grafico-ultimo { font-size: 13px; font-weight: 800; color: var(--azul); font-variant-numeric: tabular-nums; white-space: nowrap; }
.grafico-legenda { margin: 6px 0 0; font-size: 11px; color: var(--cinza); line-height: 1.4; }

/* ============================================================
   Exames laboratoriais consolidados (leitura por internacao):
   busca + lista colapsavel (um exame por linha; abre para
   grafico com valores e o dia a dia). So classes ja no tema.
   ============================================================ */
.exames-busca { margin: 4px 0 12px; }
.exames-busca input[type="search"] { width: 100%; max-width: 420px; padding: 9px 12px; border: 1px solid var(--linha); border-radius: 8px; background: var(--branco); color: var(--texto); font-size: 14px; }
.exames-busca input[type="search"]:focus { outline: none; border-color: var(--azul); }
.lista-exames { display: flex; flex-direction: column; gap: 8px; }
details.exame-item { border: 1px solid var(--linha); border-radius: 10px; background: var(--branco); overflow: hidden; }
details.exame-item > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) 132px auto; align-items: center; gap: 14px; padding: 10px 14px; }
details.exame-item > summary::-webkit-details-marker { display: none; }
details.exame-item > summary::after { content: "▸"; color: var(--cinza); font-size: 12px; margin-left: 2px; }
details.exame-item[open] > summary::after { content: "▾"; }
details.exame-item[open] > summary { border-bottom: 1px solid var(--linha); }
.exame-cab { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.exame-nome { font-weight: 800; font-size: 14px; color: var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exame-cat { font-size: 11px; color: var(--cinza); }
.exame-spark { display: block; width: 132px; height: 30px; }
.exame-resumo { display: flex; align-items: center; gap: 8px; justify-content: flex-end; white-space: nowrap; }
.exame-valor { font-weight: 800; font-size: 14px; color: var(--azul); font-variant-numeric: tabular-nums; }
.exame-delta { font-size: 12px; color: var(--cinza); font-variant-numeric: tabular-nums; }
.exame-detalhe { padding: 12px 14px 6px; }
.exame-detalhe > svg { max-width: 460px; }

@media (max-width: 640px) {
  details.exame-item > summary { grid-template-columns: 1fr; grid-template-areas: "cab" "resumo" "spark"; row-gap: 6px; }
  .exame-cab { grid-area: cab; }
  .exame-nome { white-space: normal; }        /* quebra em vez de truncar */
  .exame-resumo { grid-area: resumo; justify-content: flex-start; }
  .exame-spark { grid-area: spark; width: 100%; }
  details.exame-item > summary::after { position: absolute; top: 10px; right: 12px; }
  details.exame-item > summary { position: relative; }
}

/* ============================================================
   Lancamento de exames em LOTE (uma data, N exames por busca):
   caixa de busca com sugestoes (typeahead) + tabela de linhas.
   ============================================================ */
.lote-busca { position: relative; margin: 4px 0 14px; max-width: 520px; }
.lote-busca label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.lote-busca input[type="search"] { width: 100%; padding: 9px 12px; border: 1px solid var(--linha); border-radius: 8px; background: var(--branco); color: var(--texto); font-size: 15px; }
.lote-busca input[type="search"]:focus { outline: none; border-color: var(--azul); }
.lote-sugestoes { list-style: none; margin: 4px 0 0; padding: 4px; position: absolute; z-index: 20; left: 0; right: 0; background: var(--branco); border: 1px solid var(--linha); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.12); max-height: 300px; overflow-y: auto; }
.lote-sugestoes li { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 6px; cursor: pointer; }
.lote-sugestoes li.marcado, .lote-sugestoes li:hover { background: var(--ok-fundo); }
.lote-sug-nome { font-weight: 600; font-size: 14px; color: var(--texto); }
.lote-sug-meta { font-size: 12px; color: var(--cinza); white-space: nowrap; }
.lote-sug-vazio { color: var(--cinza); cursor: default; font-size: 14px; }
.lote-sug-vazio:hover { background: none; }
.lote-tabela .situacao { white-space: nowrap; }
.lote-busca input[type="search"][aria-invalid="true"] { border-color: var(--erro-borda); }
/* Medicamento escolhido no combobox de medicacao (selecao unica): "chip" com
   nome — principio ativo + grupo, e um "Trocar" que reabre a busca. */
.med-escolhido { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 520px; margin: 4px 0 14px; padding: 9px 12px; border: 1px solid var(--ok-borda); border-radius: 8px; background: var(--ok-fundo); }
.med-escolhido-info { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.med-escolhido-nome { font-weight: 600; font-size: 15px; color: var(--texto); }
.lote-tabela input[name="valor"] { width: 100px; padding: 6px 8px; border: 1px solid var(--linha); border-radius: 6px; background: var(--branco); color: var(--texto); text-align: right; font-variant-numeric: tabular-nums; }
.lote-tabela input[name="valor"]:focus { outline: none; border-color: var(--azul); }

/* --- Tela de entrar (login / primeiro acesso) — redesign Seiva ---
   Recria o protótipo "Seiva - Entrar.dc.html": painel de marca verde à
   esquerda + coluna do formulário à direita. Cores vêm dos tokens --nt-*
   (nutria-tokens.css); o painel fica verde-escuro nos DOIS temas, como a
   sidebar. As duas rotas nunca coexistem (o servidor redireciona), então
   não há abas: cada tela mostra só o seu formulário. */
.conteudo.tela-entrar { max-width: none; margin: 0; padding: 0; }
.tela-entrar > .aviso {            /* flash flutua sobre a tela cheia;
  centrado por margens (a animacao ntsobe zera o transform ao terminar) */
  position: fixed; top: 18px; left: 0; right: 0; margin: 0 auto;
  z-index: 60; width: max-content; max-width: min(540px, calc(100vw - 32px));
  box-shadow: var(--nt-shadow);
}
.entrar-tela { display: grid; grid-template-columns: 0.92fr 1.08fr; min-height: 100vh; }

/* painel de marca (esquerda) */
.entrar-marca {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, #4C7A5B, #2F5340);
  padding: 44px 48px; display: flex; flex-direction: column;
  justify-content: space-between; gap: 30px;
}
.entrar-logo { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; position: relative; width: max-content; }
.entrar-logo img { display: block; border-radius: 12px; }
.entrar-logo .nome { font: 800 22px 'Hanken Grotesk', system-ui, sans-serif; color: #F4F1E8; letter-spacing: -.01em; }
.entrar-logo .nome .ia { color: #BFE0C7; }
.entrar-hero-texto { position: relative; max-width: 420px; }
.entrar-selo {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px;
  border-radius: 22px; background: rgba(234,243,234,.14);
  border: 1px solid rgba(234,243,234,.22); margin-bottom: 20px;
  font: 700 12px 'Hanken Grotesk', system-ui, sans-serif; color: #DCEBDD;
}
.entrar-selo svg { animation: ntbrilho 2.6s ease-in-out infinite; }
.entrar-mote {
  font: 800 34px/1.16 'Hanken Grotesk', system-ui, sans-serif;
  letter-spacing: -.02em; color: #F4F1E8; margin: 0 0 14px;
}
.entrar-mote em { font-family: 'Spectral', serif; font-weight: 500; font-style: italic; color: #BFE0C7; }
.entrar-sub-marca { font: 400 15px/1.6 'Hanken Grotesk', system-ui, sans-serif; color: #C4D6C7; margin: 0 0 26px; }
.entrar-pontos { display: flex; flex-direction: column; gap: 13px; }
.entrar-ponto { display: flex; align-items: center; gap: 11px; font: 600 13.5px 'Hanken Grotesk', system-ui, sans-serif; color: #DCEBDD; }
.entrar-ponto .icone {
  flex: none; width: 28px; height: 28px; border-radius: 9px;
  background: rgba(234,243,234,.14); display: flex; align-items: center; justify-content: center;
}
.entrar-assistiva { position: relative; font: 400 12px 'Hanken Grotesk', system-ui, sans-serif; color: #9DBBA4; }

/* coluna do formulário (direita) */
.entrar-form { position: relative; background: var(--nt-bg); padding: 26px 40px 20px; display: flex; flex-direction: column; }
.entrar-topo { display: flex; align-items: center; justify-content: space-between; }
.entrar-voltar {
  display: inline-flex; align-items: center; gap: 7px;
  font: 600 13px 'Hanken Grotesk', system-ui, sans-serif;
  color: var(--nt-muted); text-decoration: none;
}
.entrar-voltar:hover { color: var(--nt-brand-text); }
.entrar-tema, .entrar-tema:hover {
  width: 38px; height: 38px; padding: 0; border-radius: 11px;
  border: 1px solid var(--nt-line); background: var(--nt-panel);
  display: flex; align-items: center; justify-content: center; color: var(--nt-body);
}
.entrar-tema:hover { border-color: var(--nt-brand); color: var(--nt-brand-text); }
:root[data-theme="dark"] .entrar-tema .icone-claro { display: none; }
:root:not([data-theme="dark"]) .entrar-tema .icone-escuro { display: none; }
.entrar-centro { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 22px 0; }
.entrar-cartao { width: 100%; max-width: 392px; }
.entrar-cabeca { text-align: center; margin-bottom: 24px; }
.entrar-cabeca h1 { font: 800 26px 'Hanken Grotesk', system-ui, sans-serif; letter-spacing: -.02em; margin: 0 0 6px; }
.entrar-cabeca p { font: 400 14px 'Hanken Grotesk', system-ui, sans-serif; color: var(--nt-muted); margin: 0; }
.entrar-campos { display: flex; flex-direction: column; gap: 15px; }
.entrar-campos label {
  display: block; margin: 0;
  font: 700 11px 'Hanken Grotesk', system-ui, sans-serif;
  letter-spacing: .08em; text-transform: uppercase; color: var(--nt-muted);
}
.entrar-campos input {
  margin-top: 7px; height: 46px; padding: 0 14px; font-size: 14.5px;
  border-radius: 12px; background: var(--nt-panel);
}
.entrar-campos input:focus { outline: none; border-color: var(--nt-brand); box-shadow: 0 0 0 3px var(--nt-brand-soft); }
.entrar-campos .meia { display: flex; gap: 12px; }
.entrar-campos .meia label { flex: 1; }
.entrar-nota-primeira {
  background: var(--nt-brand-soft); border: 1px solid var(--nt-brand-soft-line);
  border-radius: 12px; padding: 11px 13px;
  font: 500 12.5px/1.5 'Hanken Grotesk', system-ui, sans-serif; color: var(--nt-brand-deep);
}
.entrar-enviar, .entrar-enviar:hover {
  width: 100%; height: 48px; border-radius: 13px; margin-top: 4px;
  font: 700 15px 'Hanken Grotesk', system-ui, sans-serif;
  background: var(--nt-brand); color: #fff;
  box-shadow: 0 12px 24px -12px var(--nt-brand);
}
.entrar-enviar:hover { filter: brightness(1.06); }
.entrar-divisor {
  display: flex; align-items: center; gap: 12px; margin: 22px 0;
  font: 500 11px 'Hanken Grotesk', system-ui, sans-serif; color: var(--nt-muted);
}
.entrar-divisor::before, .entrar-divisor::after { content: ""; flex: 1; height: 1px; background: var(--nt-line); }
.entrar-local { display: flex; align-items: center; justify-content: center; gap: 7px; font: 500 12px 'Hanken Grotesk', system-ui, sans-serif; color: var(--nt-muted); }
.entrar-rodape { text-align: center; font: 400 12px 'Hanken Grotesk', system-ui, sans-serif; color: var(--nt-muted); padding-top: 14px; }

/* mobile: painel vira faixa compacta (logo), mote e bullets somem */
@media (max-width: 900px) {
  .entrar-tela { grid-template-columns: 1fr; }
  .entrar-marca { padding: 18px 22px; flex-direction: row; align-items: center; gap: 14px; }
  .entrar-hero-texto, .entrar-marca .entrar-assistiva { display: none; }
  .entrar-form { padding: 20px 20px 16px; }
}