/* ==========================================================================
   "Luxo Clínico" — Dr. Thierry Kauê Souza
   Tokens da identidade visual + componentes padrão (ver ESCOPO.md, seção 4)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* Principais */
  --brand:        #14535E;  /* Azul Petróleo — cor-mãe: cabeçalhos, títulos, faixas, filetes, destaque */
  --brand-accent: #D4AF37;  /* Dourado Champagne — acento nobre: filetes, ícones, rótulos, detalhes */
  --greige:       #E8E5DF;  /* fundo neutro quente, bordas suaves */
  --ink:          #1E293B;  /* texto de corpo principal */
  --muted:        #475569;  /* texto secundário, legendas, apoio */
  --alert:        #9B1C1C;  /* avisos, alarme, gravidade */

  /* Apoio & superfícies */
  --gold-deep:    #B8860B;  /* dourado profundo */
  --gold-soft:    #FBF8EF;  /* dourado suave (fundo) */
  --brand-tint:   #FAFAF9;  /* superfície de card */
  --surface-mini: #F4F2EC;  /* fundo de minicard */
  --surface-th:   #F7F6F3;  /* cabeçalho de tabela / fundo de code */
  --caption:      #94A3B8;  /* cinza legenda */

  /* Semânticas (usar SOMENTE para status e dados) */
  --ok:   #10B981;  /* positivo / em dia */
  --warn: #D9A441;  /* atenção */
  --crit: #9B1C1C;  /* crítico */

  /* Escala IMC (se aplicável) */
  --imc-baixo: #9DB4D4;
  --imc-normal: #5FA877;
  --imc-alto: #C0564B;

  /* Fontes */
  --font-title: 'Cinzel', serif;
  --font-body:  'Inter', sans-serif;
}

* { box-sizing: border-box; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--greige);
  line-height: 1.6;
  font-size: 14px;
  margin: 0;
}

h1, h2, h3 { font-family: var(--font-title); margin: 0 0 12px; }

h1 {
  font-weight: 700;
  font-size: 34px;
  text-transform: uppercase;
  letter-spacing: 4px;
}

h2 {
  font-weight: 700;
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: 2px;
  border-bottom: 1px solid var(--brand-accent);
  padding-bottom: 12px;
}

h3 {
  font-weight: 600;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--brand);
}

.destaque { font-family: var(--font-body); font-weight: 600; font-size: 20px; }

.legenda { font-family: var(--font-body); font-weight: 400; font-size: 11px; color: var(--muted); }

.rotulo {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
}

/* ---------- Cabeçalho institucional (topo das páginas) ---------- */
.demo-band {
  background: var(--brand);
  color: #fff;
  border-bottom: 2px solid var(--brand-accent);
  padding: 14px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.demo-band .nome {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 3px;
  color: #fff;
  text-transform: uppercase;
}

.demo-band .funcao {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 8px;
  letter-spacing: 4px;
  color: var(--brand-accent);
  text-transform: uppercase;
}

.demo-band .meta {
  font-family: var(--font-body);
  font-size: 9px;
  color: #c3cad9;
  text-align: right;
}

/* ---------- Monograma ---------- */
.monograma {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--brand-accent);
  font-family: var(--font-title);
  font-size: 15px;
  letter-spacing: 1px;
  color: var(--brand-accent);
}

.monograma.sobre-petroleo {
  background: var(--brand);
  color: #fff;
  border-color: #fff;
}

/* ---------- Card com borda-âncora (blocos de conteúdo) ---------- */
.card-ancora {
  border: 1px solid var(--greige);
  border-left: 3px solid var(--brand);
  background: var(--brand-tint);
  padding: 16px 18px;
  border-radius: 0 4px 4px 0;
}

.card-ancora .titulo {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 15px;
  color: var(--brand);
  margin-bottom: 10px;
}

.card-ancora .par {
  border-left: 2px solid var(--brand-accent);
  padding-left: 8px;
  margin-bottom: 6px;
}

.card-ancora .par .chave {
  font-family: var(--font-body);
  font-size: 8px;
  text-transform: uppercase;
  color: var(--muted);
}

.card-ancora .par .valor {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  color: var(--brand);
}

/* ---------- Minicard de indicador ---------- */
.mini-card {
  background: var(--surface-mini);
  border: 1px solid var(--greige);
  border-top: 2px solid var(--brand-accent);
  border-radius: 4px;
  padding: 10px 12px;
}

.mini-card.good { border-top-color: #2f9e5d; background: #F0F7F2; }
.mini-card.warn { border-top-color: var(--warn); background: #FBF5EA; }

.mini-card .rotulo { display: block; margin-bottom: 4px; }

.mini-card .valor {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 15px;
  color: var(--brand);
}

/* ---------- Pílulas de status ---------- */
.pill {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  padding: 3px 10px;
  border-radius: 10px;
}

.pill.ok    { background: #E7F6EC; color: #137a3e; }
.pill.warn  { background: #FDEDD3; color: #92400e; }
.pill.alert { background: #FEE2E2; color: var(--alert); }

/* ---------- Botão primário ---------- */
.btn {
  background: var(--brand);
  color: #fff;
  border: 1px solid var(--brand-accent);
  border-radius: 4px;
  padding: 11px 24px;
  font-family: var(--font-title);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap; /* não quebrar o rótulo do botão em duas linhas */
  display: inline-block;
}

.btn:hover { opacity: .92; }

.btn.secundario {
  background: transparent;
  color: var(--brand);
  border-color: var(--brand);
}

/* ---------- Container de página ---------- */
.sheet {
  max-width: 960px;
  margin: 0 auto;
  background: #fff;
  box-shadow: 0 4px 24px rgba(20, 83, 94, .10);
}

.sheet section { padding: 44px 56px; }

@media (max-width: 640px) {
  .sheet section { padding: 32px 24px; }
}

/* ---------- Navegação (topo institucional) ---------- */
.nav-topo {
  display: flex;
  align-items: center;
  gap: 20px;
}

.nav-topo a {
  color: #fff;
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .3px;
}

.nav-topo a:hover { color: var(--brand-accent); }

.nav-topo .nav-usuario {
  color: #c3cad9;
  font-size: 11px;
  padding-left: 20px;
  border-left: 1px solid rgba(255, 255, 255, .2);
}

.nav-sair { margin: 0; }

.btn-link {
  background: none;
  border: none;
  color: var(--brand-accent);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}

.btn-link:hover { text-decoration: underline; }

/* Botão hambúrguer do cabeçalho — só aparece em telas estreitas */
.nav-toggle {
  display: none;
  background: none;
  border: 1px solid rgba(255, 255, 255, .45);
  color: #fff;
  border-radius: 4px;
  font-size: 18px;
  line-height: 1;
  padding: 5px 11px;
  cursor: pointer;
}

/* ---------- Mensagens flash ---------- */
.flash-area { max-width: 960px; margin: 16px auto 0; padding: 0 16px; }

.flash {
  padding: 10px 16px;
  border-radius: 4px;
  font-size: 13px;
  margin-bottom: 8px;
  border-left: 3px solid;
}

.flash-ok   { background: #E7F6EC; color: #137a3e; border-left-color: #2f9e5d; }
.flash-erro { background: #FEE2E2; color: var(--alert); border-left-color: var(--alert); }

/* ---------- Formulários ---------- */
label { display: block; }

.rotulo { display: block; margin-bottom: 4px; }

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select,
textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--greige);
  border-radius: 4px;
  padding: 10px 12px;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 2px rgba(20, 83, 94, .12);
}

.form-perfil label, .form-login label { margin-bottom: 16px; }

.linha-campos {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.linha-campos label { flex: 1; min-width: 140px; }

.campo-largo { width: 100%; }

/* ---------- Grid de cards dos módulos ---------- */
.grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
  margin-top: 24px;
}

/* Dashboard: centraliza o menu na vertical e na horizontal. Quando o conteúdo
   é mais alto que a área visível, a seção cresce e a página rola (sem corte). */
.dashboard-centro section {
  min-height: calc(100vh - 132px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.dashboard-conteudo { width: 100%; }

/* Fila de atalhos para sistemas externos (abaixo dos cards) */
.atalhos-fila { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--greige); }
.atalhos-rotulo {
  display: block; font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; color: var(--muted); margin-bottom: 12px;
}
.atalhos-lista { display: flex; flex-wrap: wrap; gap: 18px; }
.atalho {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-decoration: none; color: var(--ink); width: 72px; text-align: center;
}
.atalho-nome {
  font-size: 11px; color: var(--muted); line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.atalho:hover .atalho-nome { color: var(--brand); }
.atalho:hover .atalho-icone { box-shadow: 0 4px 12px rgba(20, 83, 94, .18); transform: translateY(-2px); }

.atalho-icone {
  position: relative; width: 44px; height: 44px; border-radius: 10px;
  background: var(--surface-mini); border: 1px solid var(--greige);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  transition: box-shadow .15s, transform .15s;
}
.atalho-mono {
  font-family: var(--font-title); font-weight: 700; font-size: 15px;
  color: var(--brand); letter-spacing: .5px;
}
.atalho-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; padding: 7px; background: #fff;
}

.modulo-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--greige);
  border-left: 3px solid var(--brand);
  background: var(--brand-tint);
  border-radius: 0 4px 4px 0;
  padding: 18px 20px;
  text-decoration: none;
  color: var(--ink);
  transition: box-shadow .15s, transform .15s;
}

.modulo-card:hover {
  box-shadow: 0 4px 16px rgba(20, 83, 94, .12);
  transform: translateY(-2px);
}

.modulo-nome {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 15px;
  color: var(--brand);
  margin-bottom: 6px;
}

.modulo-desc { font-size: 12px; color: var(--muted); }

.modulo-card .pill { align-self: flex-start; }

/* ---------- Tela de login ---------- */
.tela-login {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
}

.login-caixa {
  width: 100%;
  max-width: 380px;
  background: #fff;
  border-top: 3px solid var(--brand-accent);
  box-shadow: 0 4px 24px rgba(20, 83, 94, .12);
  padding: 40px 36px;
}

.login-marca { text-align: center; margin-bottom: 28px; }

.login-marca .monograma { margin-bottom: 14px; }

.login-nome {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 2px;
  color: var(--brand);
}

.login-funcao {
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 4px;
}

/* ---------- Shell com menu lateral (Configuração e Meu Perfil) ---------- */
.painel-shell {
  display: flex;
  gap: 24px;
  max-width: 1200px;
  margin: 24px auto;
  padding: 0 16px;
  align-items: flex-start;
}

.painel-nav {
  flex: 0 0 220px;
  background: #fff;
  border: 1px solid var(--greige);
  border-top: 3px solid var(--brand-accent);
  border-radius: 0 0 4px 4px;
  padding: 12px 0;
  position: sticky;
  top: 16px;
}

.painel-nav-titulo {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--brand);
  padding: 8px 18px 12px;
  border-bottom: 1px solid var(--greige);
}

.painel-nav-item {
  display: block;
  padding: 9px 18px;
  font-size: 13px;
  color: var(--ink);
  text-decoration: none;
  border-left: 3px solid transparent;
  cursor: pointer;
}

.painel-nav-item:hover { background: var(--surface-mini); }

.painel-nav-item.ativo {
  border-left-color: var(--brand);
  background: var(--gold-soft);
  color: var(--brand);
  font-weight: 600;
}

.painel-nav-item.desativado { color: var(--caption); cursor: default; }
.painel-nav-item.desativado em { font-style: normal; font-size: 9px; text-transform: uppercase; letter-spacing: .5px; }
.painel-nav-item.desativado:hover { background: none; }

/* Botão que colapsa a lista lateral (só aparece em mobile) */
.painel-nav-toggle {
  display: none;
  width: 100%;
  background: #fff;
  border: 1px solid var(--greige);
  border-top: 3px solid var(--brand-accent);
  border-radius: 4px;
  padding: 11px 16px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--brand);
  text-align: left;
  cursor: pointer;
}
.painel-nav-toggle .painel-nav-atual { font-weight: 700; }
.painel-nav-toggle::after { content: ' ▾'; float: right; }

.painel-conteudo {
  flex: 1;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--greige);
  border-radius: 4px;
  padding: 28px 32px;
}

.config-cabecalho {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.config-cabecalho h2 { margin: 0; border: none; padding: 0; }
.config-cabecalho-acoes { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Tabelas de listagem ---------- */
.tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.tabela th {
  text-align: left;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--muted);
  background: var(--surface-th);
  padding: 10px 12px;
  border-bottom: 1px solid var(--greige);
}

.tabela td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--greige);
  vertical-align: middle;
}

.tabela tr:hover td { background: var(--brand-tint); }

.tabela code {
  background: var(--surface-th);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 12px;
}

.col-acoes { white-space: nowrap; text-align: right; }

.acao-link {
  background: none;
  border: none;
  color: var(--brand);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 0 4px;
  text-decoration: none;
}

.acao-link:hover { text-decoration: underline; }
.acao-link.perigo { color: var(--alert); }

form.inline { display: inline; margin: 0; }

/* ---------- Formulários de config ---------- */
.form-config { max-width: 760px; }
.form-config h3 { margin: 28px 0 12px; }
.form-config label { margin-bottom: 14px; }
.form-config .campo-medio { max-width: 320px; }

textarea.mono {
  font-family: 'Courier New', monospace;
  font-size: 12px;
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: auto;
}

.campo-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
}
.campo-checkbox input { width: auto; }
.campo-checkbox span { font-size: 13px; }

.campo-radio { display: flex; align-items: center; gap: 6px; }
.campo-radio input { width: auto; }

.separador { border: none; border-top: 1px solid var(--greige); margin: 24px 0; }

/* ---------- Segurança (3 colunas) ---------- */
.seg-grade {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.seg-grade > div { display: flex; flex-direction: column; gap: 6px; }

/* ---------- Nomes comerciais ---------- */
.nomes-lista { margin-bottom: 10px; }
.nome-linha { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; max-width: 480px; }
.nome-linha input { flex: 1; }

/* ---------- Doses dinâmicas ---------- */
#doses-lista { margin-bottom: 12px; }

.dose-linha {
  border: 1px solid var(--greige);
  border-left: 3px solid var(--brand);
  border-radius: 0 4px 4px 0;
  background: var(--brand-tint);
  padding: 14px 16px;
  margin-bottom: 14px;
}

.dose-cabecalho {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.dose-grade {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.dose-grade label { margin-bottom: 0; }

.dose-vias { margin-top: 12px; }
.vias-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 4px;
}
.vias-lista .campo-checkbox span { font-size: 12px; }

.dose-posologia { margin-top: 12px; }
.dose-posologia .linha-campos { gap: 12px; }
.dose-posologia label { margin-bottom: 0; }

/* ---------- Busca de medicação (autocomplete) ---------- */
.busca-medicacao { position: relative; margin-bottom: 20px; }

.busca-resultados {
  display: none;
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--greige);
  border-top: none;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 6px 18px rgba(20, 83, 94, .12);
  max-height: 320px;
  overflow-y: auto;
}
.busca-resultados.ativa { display: block; }

.busca-item {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  padding: 10px 14px;
  text-decoration: none;
  color: var(--ink);
  background: none;
  border: none;
  border-bottom: 1px solid var(--greige);
  font-family: var(--font-body);
  font-size: 13px;
  cursor: pointer;
}
.busca-item:last-child { border-bottom: none; }
.busca-item:hover { background: var(--brand-tint); }
.busca-principio { font-weight: 600; color: var(--brand); }
.busca-comerciais { font-size: 11px; color: var(--muted); }
.busca-vazia { padding: 10px 14px; font-size: 12px; color: var(--muted); }

@media (max-width: 720px) {
  .painel-shell { flex-direction: column; }
  .painel-nav {
    position: static;
    width: 100%;
    flex-basis: auto;
    border: none;
    padding: 0;
  }
  /* Colapsa a lista: mostra só o botão-resumo; a lista abre ao tocar. */
  .painel-nav-toggle { display: block; }
  .painel-nav-titulo { display: none; }
  .painel-nav-lista {
    display: none;
    border: 1px solid var(--greige);
    border-radius: 0 0 4px 4px;
    margin-top: -1px;
  }
  .painel-nav-lista.aberto { display: block; }
  .seg-grade, .dose-grade { grid-template-columns: 1fr; }
}

/* ---------- Prescritor: landing ---------- */
.prescritor-busca { margin-top: 8px; }
.prescritor-busca input {
  width: 100%;
  max-width: 560px;
  font-size: 15px;
  padding: 12px 16px;
}

.doenca-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--greige);
  border-left: 3px solid var(--brand);
  background: var(--brand-tint);
  border-radius: 0 4px 4px 0;
  padding: 16px 40px 16px 18px;
  text-decoration: none;
  color: var(--ink);
  transition: box-shadow .15s, transform .15s;
}
.doenca-card:hover { box-shadow: 0 4px 16px rgba(20, 83, 94, .12); transform: translateY(-2px); }
.doenca-nome { font-family: var(--font-title); font-weight: 700; font-size: 15px; color: var(--brand); }
.doenca-alt { font-size: 11px; color: var(--muted); margin-top: 4px; }

.fav-estrela {
  position: absolute;
  top: 12px;
  right: 12px;
  background: none;
  border: none;
  font-size: 18px;
  line-height: 1;
  color: var(--caption);
  cursor: pointer;
  opacity: .5;
}
.fav-estrela:hover { opacity: 1; }
.fav-estrela.ativa { color: var(--brand-accent); opacity: 1; }

.paginacao { display: flex; gap: 6px; justify-content: center; margin-top: 24px; flex-wrap: wrap; }
.pag-btn {
  min-width: 34px;
  padding: 6px 10px;
  border: 1px solid var(--greige);
  background: #fff;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  color: var(--brand);
}
.pag-btn.ativo { background: var(--brand); color: #fff; border-color: var(--brand); }

/* ---------- Prescritor: montagem ---------- */
.montagem-topo { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.montagem-protocolo { min-width: 240px; }

.avisos-doenca { margin-top: 12px; }
.aviso {
  background: #FDEDD3; color: #92400e;
  border-left: 3px solid var(--warn);
  padding: 8px 12px; border-radius: 4px; font-size: 13px; margin-bottom: 6px;
}

.via-bloco { margin-top: 20px; }
.via-titulo {
  font-family: var(--font-body); font-weight: 700; font-size: 12px;
  letter-spacing: .5px; text-transform: none; color: #fff;
  background: var(--brand); padding: 8px 14px; border-radius: 4px; margin-bottom: 10px;
}
.via-titulo.via-oral       { background: #14535E; }
.via-titulo.via-topico     { background: #B8860B; }
.via-titulo.via-nasal      { background: #16A085; }
.via-titulo.via-oftalmico  { background: #8E44AD; }
.via-titulo.via-inalatorio { background: #2980B9; }
.via-titulo.via-retal      { background: #D35400; }
.via-titulo.via-parenteral { background: #9B1C1C; }

.med-card {
  border: 1px solid var(--greige);
  border-left: 3px solid var(--brand);
  background: var(--brand-tint);
  border-radius: 0 4px 4px 0;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.med-card.extra { background: var(--gold-soft); border-left-color: var(--brand-accent); }
.med-card.inativo { opacity: .5; }
.med-card.arrastando { opacity: .4; outline: 2px dashed var(--brand-accent); }

.card-l1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.card-alca { cursor: grab; color: var(--caption); font-size: 14px; user-select: none; }
.card-toggle { margin: 0; }
.card-toggle input { width: auto; }
.card-num { font-weight: 700; color: var(--brand); min-width: 16px; }

/* Nome + apresentação: campos lado a lado com micro-label CAIXA ALTA acima. */
.card-selects { display: inline-flex; flex: 1; min-width: 240px; gap: 14px; align-items: baseline; }
.card-field { display: flex; flex-direction: column; gap: 2px; min-width: 0; margin: 0; }
.card-nome-field { flex: 0 1 auto; min-width: 0; max-width: 320px; }
.card-selects .card-dose-field { flex: 0 1 auto; min-width: 0; }
.card-flabel {
  font-size: 9px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
  color: var(--caption); line-height: 1;
}

/* Dropdowns customizados (nome + apresentação): só texto e seta, sem caixa nem linha. */
.card-nome-drop { position: relative; }
.card-nome-btn {
  display: flex; align-items: center; gap: 6px; width: 100%;
  border: none; background: transparent;
  font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--brand);
  padding: 3px 0; cursor: pointer; text-align: left;
}
.card-nome-btn:hover { color: var(--brand-accent); }
.card-nome-btn:hover .card-nome-arrow { color: var(--brand-accent); }
.in-nome-txt, .in-dose-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.in-nome-btn { font-size: 16px; font-weight: 700; }
.in-dose-btn { font-size: 13px; font-weight: 500; color: var(--ink); }
.card-nome-arrow { font-size: 13px; color: var(--muted); flex-shrink: 0; }
.card-nome-menu {
  display: none; position: absolute; top: calc(100% + 3px); left: 0; z-index: 60;
  min-width: 200px; background: #fff; border: 1px solid var(--greige); border-radius: 6px;
  box-shadow: 0 6px 20px rgba(20, 83, 94, .16); overflow: hidden;
}
.card-nome-menu.open { display: block; }
.card-nome-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  border: none; background: none; text-align: left; padding: 8px 12px; font-size: 13px;
  color: var(--ink); cursor: pointer; font-family: var(--font-body);
}
.card-nome-opt:hover { background: var(--surface-mini); }
.card-nome-opt.ativo { font-weight: 600; color: var(--brand); }
.opt-badge {
  font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px;
  padding: 1px 6px; border-radius: 8px; background: var(--surface-mini); color: var(--muted); white-space: nowrap;
}
.opt-badge.def { background: var(--gold-soft); color: var(--gold-deep); }

/* Badges de segurança — pills de texto coloridas por gravidade, com popover. */
.alert-tags { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.da-tag {
  position: relative; font-size: 9px; font-weight: 700; letter-spacing: .3px;
  padding: 2px 7px; border-radius: 10px; cursor: help; user-select: none; white-space: nowrap;
}
.da-tag.ok   { background: #EAFAF1; color: #1E8449; }
.da-tag.warn { background: #FEF5E7; color: #C87F1E; }
.da-tag.crit { background: #FDECEA; color: var(--alert); }
.da-tag.na   { background: var(--surface-mini); color: var(--caption); }
.da-tag.in-badge-incompat.conflito { animation: badge-pulsa 1.4s ease-in-out infinite; }
@keyframes badge-pulsa { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
.da-tag .popover {
  display: none; position: absolute; bottom: calc(100% + 6px); left: 0;
  background: var(--ink); color: #fff; font-size: 11px; font-weight: 500; letter-spacing: 0;
  text-transform: none; padding: 8px 11px; border-radius: 6px; z-index: 200;
  max-width: 260px; width: max-content; line-height: 1.5; white-space: pre-wrap;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .28); pointer-events: none;
}
.da-tag:hover .popover { display: block; }

/* Aviso de incompatibilidade entre medicações da prescrição */
.incompat-aviso {
  background: #FEE2E2; border: 1px solid var(--alert); border-left: 3px solid var(--alert);
  border-radius: 0 4px 4px 0; padding: 12px 16px; margin: 0 0 16px;
}
.incompat-aviso-tit { font-weight: 700; color: var(--alert); font-size: 13px; margin-bottom: 6px; }
.incompat-aviso ul { margin: 0; padding-left: 20px; font-size: 13px; color: var(--ink); }
.incompat-aviso li { margin: 2px 0; }

.card-acoes-l1 { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.mini-btn {
  background: #fff; border: 1px solid var(--greige); border-radius: 4px;
  width: 26px; height: 26px; cursor: pointer; font-size: 13px; color: var(--brand);
}
.mini-btn:hover { background: var(--surface-mini); }

/* Via — dropdown compacto (abreviação + seta), pequeno e discreto. */
.via-drop { position: relative; }
.via-btn {
  display: inline-flex; align-items: center; gap: 3px; cursor: pointer;
  border: 1px solid var(--greige); border-radius: 999px; background: #fff;
  padding: 3px 8px; font-family: var(--font-body);
}
.via-btn:hover { border-color: var(--brand-accent); }
.via-abbr {
  min-width: 20px; text-align: center; font-size: 11px; font-weight: 700;
  letter-spacing: .3px; color: var(--brand); user-select: none;
}
.via-btn .card-nome-arrow { font-size: 10px; }
.via-drop .card-nome-menu { left: auto; right: 0; min-width: 170px; }

/* Linha 2: equivalências cadastradas (.dopt) + troca por classe ATC (.similar-btn) */
.card-equivalencias { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; align-items: center; }
.dopt {
  border: 1.5px solid var(--greige); background: #fff; border-radius: 12px;
  padding: 3px 11px; font-size: 12px; cursor: pointer; color: var(--muted);
  font-family: var(--font-body);
}
.dopt:hover { border-color: var(--brand-accent); color: var(--brand); }
.dopt.sel { background: var(--brand); color: #fff; border-color: var(--brand); font-weight: 600; }
.equiv-vazio { font-size: 12px; font-style: italic; color: var(--caption); }
.similar-btn {
  border: 1px dashed var(--greige); background: transparent; border-radius: 10px;
  padding: 2px 10px; font-size: 12px; cursor: pointer; color: var(--muted);
  font-family: var(--font-body); margin-left: auto;
}
.similar-btn:hover { border-color: var(--brand); color: var(--brand); }
.similar-ic { font-weight: 700; }

.card-l3 { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-top: 10px; }
.card-l3 label { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.card-l3 select {
  padding: 4px 2px; font-size: 13px; border: none; border-bottom: 1px solid var(--brand);
  background: transparent; color: var(--ink); border-radius: 0; cursor: pointer;
}
.card-l3 select:focus { outline: none; border-bottom-color: var(--brand-accent); }
/* Campos de texto do card: só linha embaixo, fundo da cor do card (não caixas). */
.card-l3 input[type="number"], .card-l3 input[type="text"] {
  padding: 5px 2px; font-size: 13px; border: none; border-bottom: 1px solid var(--greige);
  border-radius: 0; background: transparent; color: var(--ink);
}
.card-l3 input:focus { outline: none; border-bottom-color: var(--brand); }
.card-l3 .in-qnt { width: 60px; }
.card-l3 .in-periodo { width: 54px; }
.card-l3 .in-dur-dias { width: 58px; }
.qtd-wrap { display: flex; align-items: center; }
.in-unidade { font-size: 12px; color: var(--muted); white-space: nowrap; }
.total-disp .in-total { width: 120px; }

.card-l4 { display: flex; align-items: center; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
.card-orient-check { display: flex; align-items: center; gap: 6px; margin: 0; }
.card-orient-check input { width: auto; }
/* Botão "+ instruções": texto que não quebra (antes usava .mini-btn quadrado). */
.btn-instrucoes {
  background: none; border: 1px dashed var(--greige); border-radius: 4px;
  color: var(--brand); font-family: var(--font-body); font-size: 11px;
  padding: 4px 10px; cursor: pointer; white-space: nowrap;
}
.btn-instrucoes:hover { background: var(--surface-mini); border-color: var(--brand-accent); }
.card-instrucoes { flex-basis: 100%; }
.card-instrucoes input {
  width: 100%; max-width: 480px; padding: 5px 2px; border: none;
  border-bottom: 1px solid var(--greige); border-radius: 0; background: transparent;
}
.card-instrucoes input:focus { outline: none; border-bottom-color: var(--brand); }
.card-orient-texto { flex-basis: 100%; font-size: 12px; color: var(--muted); font-style: italic; }

/* Linhas inline do form de medicação (incompatibilidades e efeitos) */
.linha-json { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.linha-json > input[type="text"] { flex: 1; margin: 0; }
.linha-json select { margin: 0; }
.btn-x {
  background: none; border: none; color: var(--alert); font-size: 15px; line-height: 1;
  cursor: pointer; padding: 3px 7px; border-radius: 4px; flex: 0 0 auto;
}
.btn-x:hover { background: #FEE2E2; }

/* Saída */
.saida-bloco { margin-top: 28px; }
.abas { display: flex; gap: 4px; border-bottom: 1px solid var(--greige); }
.aba {
  background: none; border: 1px solid transparent; border-bottom: none;
  padding: 8px 16px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--muted);
  border-radius: 4px 4px 0 0;
}
.aba.ativa { background: #fff; border-color: var(--greige); color: var(--brand); margin-bottom: -1px; }
.saida-orientacao-sel { margin-top: 10px; max-width: 320px; }
#saida-texto {
  width: 100%; margin-top: 10px; font-family: 'Inter', monospace; font-size: 13px;
  white-space: pre; overflow-x: auto;
}
.saida-acoes { display: flex; gap: 8px; margin-top: 10px; }

/* Modais */
.modal-fundo {
  position: fixed; inset: 0; background: rgba(20,83,94,.35);
  display: flex; align-items: center; justify-content: center; z-index: 50; padding: 20px;
}
.modal-caixa {
  background: #fff; border-radius: 6px; border-top: 3px solid var(--brand-accent);
  width: 100%; max-width: 440px; max-height: 80vh; overflow-y: auto;
  box-shadow: 0 10px 40px rgba(20,83,94,.25);
}
.modal-cabecalho {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px; border-bottom: 1px solid var(--greige);
  font-family: var(--font-title); font-weight: 700; color: var(--brand);
}
.modal-fechar { background: none; border: none; font-size: 22px; cursor: pointer; color: var(--muted); }
.modal-corpo { padding: 16px 18px; }
.modal-corpo .busca-item { border-bottom: 1px solid var(--greige); }

/* ---------- Impressão ---------- */
@media print {
  body { background: #fff; }
  .sheet { box-shadow: none; max-width: none; }
  .no-print { display: none; }
  section, .card-ancora { page-break-inside: avoid; }
  body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ============================ Exames — pedido ============================ */
.exame-linha.inativo { opacity: .45; }
.accordion-cab {
  background: var(--surface-mini); border: 1px solid var(--greige);
  border-radius: 4px; padding: 10px 14px; width: 100%; text-align: left;
  font-family: var(--font-body); font-size: 13px; font-weight: 600;
  color: var(--brand); cursor: pointer;
}
.accordion-corpo { padding: 12px 4px 4px; }
.aba-conteudo { min-height: 40px; }

/* ============================ Texto Padrão — landing ============================ */
.tp-filtros { display: flex; flex-direction: column; gap: 10px; }

.tp-busca input { width: 100%; max-width: 560px; font-size: 15px; padding: 12px 16px; }

.tp-cats { display: flex; flex-wrap: wrap; gap: 6px; }

.tp-cat-btn {
  border: 1px solid var(--greige); background: #fff; border-radius: 16px;
  padding: 5px 14px; font-size: 12px; font-weight: 600; cursor: pointer; color: var(--muted);
}
.tp-cat-btn:hover { background: var(--surface-mini); }
.tp-cat-btn.ativo { background: var(--brand); color: #fff; border-color: var(--brand); }

.tp-card {
  border: 1px solid var(--greige);
  border-left: 3px solid var(--brand);
  background: var(--brand-tint);
  border-radius: 0 4px 4px 0;
  padding: 14px 16px;
  margin-bottom: 10px;
}

.tp-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.tp-card-titulo {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 15px;
  color: var(--brand);
  text-decoration: none;
}
.tp-card-titulo:hover { text-decoration: underline; }

.tp-card-desc { font-size: 12px; color: var(--muted); margin-bottom: 8px; }

.tp-card-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ============================ Enfermaria ============================ */
.enf-quarto-card {
  border: 1px solid var(--greige);
  border-left: 3px solid var(--brand);
  background: var(--brand-tint);
  border-radius: 0 4px 4px 0;
  padding: 14px 16px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: box-shadow .15s;
}
.enf-quarto-card:hover { box-shadow: 0 4px 16px rgba(20,83,94,.12); }

.enf-quarto-titulo {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 15px;
  color: var(--brand);
  margin-bottom: 10px;
}

.enf-linha-pac { cursor: pointer; }

.enf-pac-card {
  border: 1px solid var(--greige);
  border-left: 3px solid var(--brand);
  background: var(--brand-tint);
  border-radius: 0 4px 4px 0;
  padding: 12px 16px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: box-shadow .15s;
}
.enf-pac-card:hover { box-shadow: 0 4px 16px rgba(20,83,94,.12); }

.enf-pac-cab {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
  font-size: 15px;
}

.enf-pac-leito {
  background: var(--brand);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.enf-pac-info { font-size: 12px; color: var(--muted); display: flex; gap: 12px; flex-wrap: wrap; }
.enf-pac-info .rotulo { font-size: 8px; margin-right: 4px; }
.enf-pends { margin-top: 6px; display: flex; gap: 4px; flex-wrap: wrap; }

/* Detalhe do paciente */
.enf-detalhe-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.enf-campo { display: flex; flex-direction: column; gap: 4px; }
.enf-campo-largo { grid-column: 1 / -1; }
.enf-campo textarea { resize: vertical; }

.enf-checklist { display: flex; flex-direction: column; gap: 8px; }

@media (max-width: 640px) {
  .enf-detalhe-grid { grid-template-columns: 1fr; }
}

/* ==================== Fase 7 — polimento responsivo ==================== */

/* Tabelas largas rolam horizontalmente no lugar de estourar a página */
@media (max-width: 720px) {
  .tabela { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tabela th, .tabela td { white-space: nowrap; }

  /* Em coluna, align-items:flex-start dimensionaria o conteúdo pela largura
     intrínseca da tabela — estica para a largura da tela e deixa a tabela rolar */
  .painel-shell { align-items: stretch; }
  .painel-conteudo { width: 100%; padding: 20px 18px; }
  .config-cabecalho { flex-wrap: wrap; gap: 8px; }

  /* Cabeçalho: navegação vira menu suspenso acionado pelo ☰ */
  .demo-band { flex-wrap: wrap; gap: 8px; padding: 12px 16px; position: relative; }
  .demo-band .meta { font-size: 8px; }
  .nav-toggle { display: block; }
  .nav-topo {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, .2);
  }
  .nav-topo.aberto { display: flex; }
  .nav-topo .nav-usuario { padding-left: 0; border-left: none; }

  .montagem-topo { flex-direction: column; align-items: stretch; }
  .montagem-topo .btn { text-align: center; }

  .tp-cats { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .tp-cat-btn { white-space: nowrap; }
}

@media (max-width: 480px) {
  h1 { font-size: 24px; letter-spacing: 2px; }
  .sheet section { padding: 24px 16px; }
  .card-l1 select, .card-dose-field { min-width: 0; max-width: 100%; }
}

/* Impressão: complementa a regra base (seção 4.7 do ESCOPO) */
@media print {
  .demo-band, .nav-topo, .flash { display: none !important; }
  .painel-nav, .painel-nav-toggle { display: none !important; }
  .painel-shell { display: block; }
  a { color: inherit; text-decoration: none; }
}