/* ajuste fino da casca para recepcao (etapa 9).
 * A barra da casca é o cabeçalho do produto; o header.topo teal vira faixa de título da tela. */
html.mef-com-casca {
  --marca: var(--mef-brand-teal);
  --marca-escura: var(--mef-brand-azul);
  --fundo: var(--mef-background);
  --tinta: var(--mef-foreground);
  --tinta-fraca: var(--mef-muted-foreground);
  --borda: var(--mef-border);
  --borda-campo: var(--mef-border);
  --bandeja: var(--mef-secondary);
  --raio: var(--mef-radius-cartao);
  --sombra: var(--mef-sombra-cartao);
  --erro-tinta: var(--mef-brand-magenta);   /* magenta só para erro */
}
/* faixa de título: fundo da página, alinhada à coluna do conteúdo, não fica mais grudada no topo */
html.mef-com-casca header.topo {
  position: static; background: transparent; width: 100%; max-width: 1180px; margin: 0 auto;
  padding: clamp(16px,2.5vw,24px) clamp(14px,3vw,28px) 0; box-sizing: border-box;
}
html.mef-com-casca header.topo h1 { color: var(--mef-brand-azul); font-size: 1.5rem; font-weight: 700; }
html.mef-com-casca header.topo .sub { color: var(--mef-muted-foreground); font-size: .875rem; }
html.mef-com-casca header.topo .btn-sair {
  background: transparent; color: var(--mef-brand-teal); border: 1px solid var(--mef-border);
  border-radius: var(--mef-radius);
}
html.mef-com-casca header.topo .btn-sair:hover { background: var(--mef-secondary); }
html.mef-com-casca main { padding-top: 16px; }
/* a barra do paciente gruda logo abaixo da barra da casca (antes: abaixo do cabeçalho teal) */
html.mef-com-casca .barra-paciente { top: calc(var(--mef-casca-altura) + 8px); }

/* cartões como os do app: borda fina, quase sem sombra */
html.mef-com-casca .cartao, html.mef-com-casca .barra-paciente { border: 1px solid var(--mef-border); }
html.mef-com-casca h2 { color: var(--mef-brand-azul); font-weight: 700; }
html.mef-com-casca button, html.mef-com-casca .btn-tipo { border-radius: var(--mef-radius); }
html.mef-com-casca input[type=email], html.mef-com-casca input[type=password],
html.mef-com-casca input[type=text], html.mef-com-casca input[type=search] {
  border-width: 1px; border-radius: var(--mef-radius);
}
html.mef-com-casca .btn-secundario, html.mef-com-casca .btn-tipo { border-width: 1px; }

@media (max-width: 560px) {
  html.mef-com-casca header.topo h1 { font-size: 1.25rem; }
  html.mef-com-casca header.topo .sub { display: none; }   /* o e-mail não cabe ao lado do título no celular */
}