/*
  CENTRAL DE LAUDOS — sistema de marca (Instituto Medicina em Foco)

  THESIS: um laudo é um documento de confiança, então a tela se comporta como papel
  timbrado de clínica — faixa institucional, campo branco, nada de painel-de-produto
  com cartões coloridos disputando atenção. Recusa o dashboard genérico de SaaS.

  OWN-WORLD: faixa azul-escuro #01405D atravessando o topo com o logo branco
  centralizado; campo #EEF3F6 abaixo; conteúdo em cartões brancos de borda fina
  #DDE7ED e sombra baixa e deslocada. Azul e branco apenas — o turquesa da marca
  aparece uma única vez em cada tela, dentro do símbolo do logotipo no rodapé.
  Tipografia de sistema com degraus largos (1.75 / 1.15 / 1 / .875 rem).

  STORY: quem chega reconhece o Instituto antes de ler qualquer palavra, entende em
  que porta está (paciente, médico, enfermagem) e age no primeiro cartão.

  FIRST VIEWPORT: faixa azul com o logo ao centro; sob ela, o nome da área em azul
  escuro e uma linha de contexto; o primeiro cartão branco começa acima da dobra,
  com a ação principal (entrar, buscar, abrir o laudo) dentro dele.

  FORM: papel timbrado institucional — a forma que a clínica já usa no impresso,
  trazida para a tela. Direção fixada pelo brandbook do Instituto (2024).

  Carregado DEPOIS do <style> de cada página: mesma especificidade, vence por ordem.
*/

:root{
  /* Paleta do brandbook. O turquesa #20BCB3 não entra no layout — só no logotipo. */
  --azul:#13658B;
  --azul-escuro:#01405D;
  --azul-claro:#77AFBD;
  --turquesa:#13658B;          /* neutraliza o verde herdado das telas antigas */
  --tinta:#1B3A49;
  --tinta-fraca:#5A7686;
  --linha:#DDE7ED;
  --fundo:#EEF3F6;
  --erro:#A3352C;
  --ok:#1E7A4A;
  --sombra:0 10px 30px -18px rgba(1,64,93,.55);
  --sombra-alta:0 16px 40px -20px rgba(1,64,93,.45);
}

body{
  background:var(--fundo);
  color:var(--tinta);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* ── Faixa institucional ─────────────────────────────────────────────────────
   O logo é a primeira coisa da página, centralizado, sobre o azul da marca. */
header.topo{
  background:var(--azul-escuro);
  padding:22px 20px;
  text-align:center;
  /* filete, não sombra difusa: a faixa termina numa linha, como papel timbrado */
  box-shadow:inset 0 -3px 0 rgba(255,255,255,.10);
}
header.topo .logo{
  display:block;
  width:auto;
  height:46px;
  margin:0 auto;
}
@media(max-width:520px){
  header.topo{padding:18px 16px}
  header.topo .logo{height:38px}
}

/* ── Títulos: degraus largos, não uma escada de meio ponto ───────────────── */
h1{
  font-size:1.75rem;
  line-height:1.2;
  letter-spacing:-.02em;
  font-weight:700;
  color:var(--azul-escuro);
  margin:26px 0 6px;
  text-wrap:balance;
}
h2{font-size:1.15rem; line-height:1.3; letter-spacing:-.01em; font-weight:650}
.sub{
  font-size:1rem;
  color:var(--tinta-fraca);
  margin:0 0 24px;
  max-width:62ch;
  text-wrap:pretty;
}
main{max-width:720px}

/* ── Cartões: papel branco sobre o campo azul-claro ─────────────────────── */
.cartao,.porta,.codigo,.laudo,.exame,.paciente,.selecao,.vazio,.resumo-container{
  border-radius:14px;
}
.cartao,.codigo,.resumo-container{
  background:#fff;
  border:1px solid var(--linha);
  box-shadow:var(--sombra);
  padding:24px;
}
.porta,.laudo,.exame{
  background:#fff;
  border:1px solid var(--linha);
  box-shadow:var(--sombra);
}
.porta:hover,.porta:focus-visible{
  border-color:var(--azul);
  box-shadow:var(--sombra-alta);
  transform:translateY(-2px);
}
.porta h2{color:var(--azul-escuro)}
/* Os dois selos são as duas metades da mandala do logotipo: o miolo (o paciente,
   no centro de tudo) e a roda externa (a equipe em volta). Herdam a cor por
   currentColor, então o SVG segue o token sem repetir hex. */
.selo{background:rgba(19,101,139,.10); color:var(--azul-escuro)}
.selo svg{display:block}

/* ── Formulário ──────────────────────────────────────────────────────────── */
label{
  font-size:.8rem;
  font-weight:650;
  letter-spacing:.02em;
  color:var(--tinta-fraca);
  text-transform:none;
}
input[type=text],input[type=email],input[type=password],input[type=tel],input[type=number],select,textarea{
  background:#fff;
  border:1px solid var(--linha);
  border-radius:10px;
  color:var(--tinta);
}
input:focus,select:focus,textarea:focus,button:focus-visible,a:focus-visible{
  outline:2px solid var(--azul);
  outline-offset:2px;
}
input::placeholder{color:#7E96A4}

button{
  background:var(--azul);
  border-radius:10px;
  font-weight:650;
  letter-spacing:.01em;
  box-shadow:0 6px 16px -10px rgba(1,64,93,.8);
  transition:background .15s ease, box-shadow .15s ease;
}
button:hover{background:var(--azul-escuro)}
button:disabled{background:#9FB6C2; box-shadow:none; cursor:default}
button.fino,.voltar,.barra a{color:var(--azul-escuro)}
/* Dentro de um cartão branco, uma borda #DDE7ED some: o secundário precisa de
   contorno próprio para continuar parecendo um botão. */
button.fino{background:#fff; border:1px solid #BFD2DD; color:var(--azul-escuro); box-shadow:none}
button.fino:hover{background:#F1F7FA; border-color:var(--azul)}

/* Login: o formulário é curto, então o cartão acompanha a coluna do texto em vez
   de esticar por toda a largura do painel. */
#passo1,#passo2{max-width:480px}

/* A ação de conversa fica à direita, fora do caminho de leitura do título.
   `margin:0 auto` num item de body-flex encolhe a barra até o conteúdo, e aí o
   flex-end dela não tem sobre o que agir — daí a largura explícita. */
#barraTopo{width:100%; justify-content:flex-end}

/* ── Abas do painel da equipe ────────────────────────────────────────────── */
.barra button{
  background:#fff;
  color:var(--tinta-fraca);
  border:1px solid var(--linha);
  box-shadow:none;
  font-weight:600;
}
.barra button:hover{color:var(--azul-escuro); border-color:var(--azul-claro)}
.barra button.ativo{
  background:var(--azul-escuro);
  color:#fff;
  border-color:var(--azul-escuro);
}

/* ── Listas e estados ────────────────────────────────────────────────────── */
.paciente{background:#fff; border:1px solid var(--linha)}
.paciente:hover{border-color:var(--azul-claro)}
.paciente.sel{border-color:var(--azul); background:#F1F7FA}
.paciente b{color:var(--azul-escuro)}
.grupo h2{color:var(--azul-escuro)}
.linha .t{color:var(--tinta)}
.vazio{
  background:#fff;
  border:1px dashed var(--linha);
  color:var(--tinta-fraca);
}
.chip{background:rgba(19,101,139,.10); color:var(--azul-escuro)}

/* O resumo do laudo vinha com faixa colorida de 3px na lateral — o adorno que
   grita "template". Aqui ele é papel branco com a mesma borda de todo cartão. */
.resumo-container{
  background:#fff;
  border:1px solid var(--linha);
  border-left-width:1px;
  padding:20px;
}

/* Dois degraus para o texto secundário, no lugar da escada de meio ponto
   (.84 / .86 / .88 / .9 / .92 / .95rem) que as telas acumularam. */
.sub,.aviso,.linha .m,.paciente span,.selecao .meta,.progresso,.voltar,.barra a,
.grupo h2 small,footer,.vazio,.porta p,.codigo p{font-size:.9375rem}
label,.chip,.arquivo input[type=file]{font-size:.8125rem}

/* Sem isto o navegador desenha o botão nativo de escolher arquivo — cinza,
   sem borda, a única peça "Windows 95" no meio do papel timbrado. Duas regras
   separadas de propósito: um seletor não reconhecido dentro de uma lista com
   vírgula derruba a regra inteira em alguns motores (Firefox x -webkit-). */
.arquivo input[type=file]::file-selector-button{
  margin-right:12px;
  padding:9px 16px;
  border:1px solid #BFD2DD;
  border-radius:10px;
  background:#fff;
  color:var(--azul-escuro);
  font-weight:600;
  font-size:.875rem;
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease;
}
.arquivo input[type=file]::file-selector-button:hover{background:#F1F7FA; border-color:var(--azul)}
.arquivo input[type=file]::-webkit-file-upload-button{
  margin-right:12px;
  padding:9px 16px;
  border:1px solid #BFD2DD;
  border-radius:10px;
  background:#fff;
  color:var(--azul-escuro);
  font-weight:600;
  font-size:.875rem;
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease;
}
.arquivo input[type=file]::-webkit-file-upload-button:hover{background:#F1F7FA; border-color:var(--azul)}
.aviso{color:var(--tinta-fraca)}
.erro{color:var(--erro)}
.resultado.ok{background:#EDF5F0; color:var(--ok); border-color:#CFE5D8}
.resultado.falhou{background:#FBEEEC; color:var(--erro); border-color:#ECCFCA}

/* ── Rodapé: a assinatura da marca, e o único turquesa da tela ──────────── */
footer{
  border-top:1px solid var(--linha);
  color:var(--tinta-fraca);
  padding-top:22px;
}
footer .simbolo{
  display:block;
  width:34px;
  height:34px;
  margin:0 auto 10px;
  opacity:.95;
}
footer a{color:var(--azul-escuro)}

/* ── Painel lateral do CRM (só no painel da enfermagem) ─────────────────── */
#chat header{background:#fff; border-bottom:1px solid var(--linha)}
#chat header p{color:var(--azul-escuro)}
#barraTopo button{background:var(--azul); color:#fff}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important}
  .porta:hover{transform:none}
}