:root {
  --cor: #b77c7d;        /* rosé da marca Amaral */
  --cor-escura: #96605f;
  --cor-suave: #f3e6e6;
  --fundo: #faf7f6;
  --cartao: #ffffff;
  --texto: #3d3d3b;      /* cinza da marca */
  --texto-suave: #7d7d7a;
  --borda: #e4dad9;
  --perigo: #b91c1c;
  --ok: #15803d;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  -webkit-text-size-adjust: 100%;
}

.oculto { display: none !important; }

/* input de arquivo acionado por <label>: escondido sem display:none
   (navegadores móveis ignoram cliques em inputs com display:none) */
.input-arquivo-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* Cabeçalho */
header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--cor);
  color: #fff;
  padding: 10px 12px;
  padding-top: calc(10px + env(safe-area-inset-top));
}
header h1 {
  flex: 1;
  font-size: 1.2rem;
  margin: 0;
  font-weight: 600;
  font-family: Georgia, "Playfair Display", "Times New Roman", serif;
  letter-spacing: 0.5px;
}
.btn-icone {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.5rem;
  min-width: 48px;
  min-height: 44px;
  cursor: pointer;
}

main { padding: 14px; max-width: 760px; margin: 0 auto; padding-bottom: 60px; }

/* Cartões e listas */
.cartao {
  background: var(--cartao);
  border: 1px solid var(--borda);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 12px;
}
.cartao h2 { margin: 0 0 8px; font-size: 1rem; color: var(--cor-escura); }

.item-lista {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--cartao);
  border: 1px solid var(--borda);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 10px;
  font-size: 1.05rem;
  cursor: pointer;
}
.item-lista .sub { display: block; color: var(--texto-suave); font-size: 0.88rem; margin-top: 3px; }

/* Formulários — alvos grandes para tablet */
label { display: block; font-weight: 600; margin: 14px 0 5px; font-size: 0.95rem; }
input, select, textarea {
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  font-size: 1.05rem;
  border: 1px solid var(--borda);
  border-radius: 10px;
  background: #fff;
  color: var(--texto);
  font-family: inherit;
}
textarea { min-height: 110px; resize: vertical; }
textarea.auto-cresce { overflow: hidden; resize: none; }
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--cor);
  outline-offset: 1px;
}

.botao {
  display: inline-block;
  width: 100%;
  min-height: 52px;
  margin-top: 16px;
  border: none;
  border-radius: 12px;
  background: var(--cor);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
}
.botao:active { background: var(--cor-escura); }
.botao.secundario { background: #fff; color: var(--cor-escura); border: 2px solid var(--cor); }
.botao.compacto { width: auto; min-height: 44px; padding: 0 18px; margin-top: 8px; font-size: 0.95rem; }
.botao.perigo { background: #fff; color: var(--perigo); border: 2px solid var(--perigo); }

/* Busca */
.busca { display: flex; gap: 8px; margin-bottom: 14px; }
.busca input { flex: 1; }

/* Abas */
.abas {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  margin-bottom: 14px;
  border-bottom: 2px solid var(--borda);
}
.aba {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 12px 14px;
  font-size: 0.98rem;
  color: var(--texto-suave);
  border-bottom: 3px solid transparent;
  cursor: pointer;
}
.aba.ativa { color: var(--cor-escura); font-weight: 700; border-bottom-color: var(--cor); }

/* Linha do tempo */
.consulta-item { border-left: 4px solid var(--cor); }
.consulta-item .data { font-weight: 700; color: var(--cor-escura); }
.campo-consulta { margin: 6px 0; }
.campo-consulta b { font-size: 0.85rem; text-transform: uppercase; color: var(--texto-suave); }
.campo-consulta p { margin: 2px 0 0; white-space: pre-wrap; }

/* Etiquetas (hipóteses, medicações) */
.etiqueta {
  display: inline-block;
  background: var(--cor-suave);
  color: var(--cor-escura);
  border-radius: 8px;
  padding: 5px 10px;
  margin: 3px 4px 3px 0;
  font-size: 0.92rem;
}
.etiqueta .remover { margin-left: 6px; color: var(--perigo); cursor: pointer; font-weight: 700; }

.lista-sugestoes { border: 1px solid var(--borda); border-radius: 10px; margin-top: 4px; background: #fff; }
.lista-sugestoes button {
  display: block; width: 100%; text-align: left; background: none;
  border: none; border-bottom: 1px solid var(--borda);
  padding: 12px; font-size: 0.98rem; cursor: pointer;
}
.lista-sugestoes button:last-child { border-bottom: none; }

.alerta-alergia { background: #fef2f2; border: 1px solid #fecaca; color: var(--perigo); border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; font-weight: 600; }

.vazio { color: var(--texto-suave); text-align: center; padding: 24px 0; }

/* Login */
.tela-login { max-width: 420px; margin: 6vh auto 0; padding: 0 8px; }
.tela-login .logo-amaralmed { text-align: center; margin-bottom: 22px; }
.tela-login .logo-amaralmed img { width: min(300px, 78%); }
.marcas-irmas {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--borda);
}
.marcas-irmas img { width: min(280px, 82%); mix-blend-mode: multiply; }
.marcas-irmas .aviso { color: var(--texto-suave); font-size: 0.8rem; letter-spacing: 2px; }

/* Toast */
#toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--texto);
  color: #fff;
  padding: 12px 20px;
  border-radius: 10px;
  font-size: 0.98rem;
  z-index: 50;
  max-width: 90vw;
}
#toast.erro { background: var(--perigo); }

.linha-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 420px) { .linha-2 { grid-template-columns: 1fr; } }