/* =====================================================================
   Estudo NATAL — App do participante · Design system (v2)
   Carregado após o Bootstrap. Foco: legibilidade (idosos), contraste
   correto, layout limpo e responsivo. Corrige: fundo cinza feio,
   título monospace, selects de data ilegíveis, botões claros demais.
   ===================================================================== */

:root {
  --en-green: #2e9e4f;
  --en-green-strong: #1e7d3c;
  --en-green-deep: #176a32;
  --en-teal: #0f9d90;
  --en-ink: #1b2733;
  --en-ink-soft: #3d4a56;
  --en-muted: #64727e;
  --en-line: #d8e0e6;
  --en-page: #eef3f1;         /* fundo suave da página */
  --en-card: #ffffff;
  --en-radius: 18px;
  --en-radius-sm: 12px;
  --en-shadow: 0 8px 26px rgba(16,24,40,.10);
  --en-shadow-sm: 0 2px 8px rgba(16,24,40,.08);
  --en-max: 620px;
}

html, body { background: var(--en-page); }
body {
  color: var(--en-ink);
  -webkit-font-smoothing: antialiased;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* =====================================================================
   1) LAYOUT — conteúdo em cartão branco centralizado (some o "strip" cinza)
   ===================================================================== */
.containerSection,
.container-main,
.container-section,
.corrigir-shell {
  background: var(--en-card) !important;
  max-width: var(--en-max);
  margin: 24px auto !important;
  border-radius: var(--en-radius);
  box-shadow: var(--en-shadow);
  padding: 26px 22px 34px !important;
  width: auto;
  min-height: auto !important;   /* cartão ajusta à altura do conteúdo */
}
/* Componentes de passo do formulário ficam DENTRO do cartão → sem cartão duplo.
   (Os nomes de classe variam no código: containerSection / container-section.) */
.containerSection .containerSection,
.containerSection .container-section,
.container-main .containerSection,
.container-main .container-section,
.container-section .containerSection,
.container-section .container-section {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin: 0 auto !important;
  padding: 0 !important;
  max-width: 100%;
}
@media (max-width: 640px) {
  .containerSection, .container-main, .container-section, .corrigir-shell {
    margin: 12px auto !important;
    border-radius: 14px;
    padding: 18px 14px 26px !important;
  }
}

/* =====================================================================
   2) TIPOGRAFIA — títulos e perguntas legíveis (sem monospace, bom contraste)
   ===================================================================== */
.textTile {
  font-family: inherit !important;
  color: var(--en-green-deep) !important;
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  letter-spacing: .2px;
}
.question {
  color: var(--en-ink) !important;
  font-size: 1.12rem !important;
  line-height: 1.35;
}
.name { color: var(--en-green-deep) !important; }
.idade { color: var(--en-ink-soft) !important; }
.message-search-container h3 { color: var(--en-ink-soft) !important; }
.instruction-login {
  max-width: var(--en-max); margin-left: auto; margin-right: auto;
  font-weight: 700; text-shadow: 0 1px 3px rgba(0,0,0,.18);
}

/* =====================================================================
   3) BOTÕES
   ===================================================================== */
.btn { border-radius: 12px; font-weight: 600; }
.btn:focus-visible,
.btn-check:focus-visible + .btn,
.form-control:focus,
select:focus {
  outline: 3px solid rgba(46,158,79,.45);
  outline-offset: 2px;
  box-shadow: none;
}

/* CTA principais — verde forte da marca, largura contida, bom contraste */
.btn-custom, .btn-success, .btn-warning, .btn-info {
  background-color: var(--en-green) !important;
  border-color: var(--en-green-strong) !important;
  color: #fff !important;
  border-radius: 14px !important;
  box-shadow: var(--en-shadow-sm);
  max-width: var(--en-max);
}
.btn-custom:hover, .btn-success:hover, .btn-warning:hover, .btn-info:hover {
  background-color: var(--en-green-strong) !important;
}
.btn-custom a, .btn-success a, .btn-custom .text-button { color: #fff !important; }
.btn-corrigir { background: var(--en-green) !important; }
.btn-custom:disabled, .btn:disabled { opacity: .55; }

/* Botões de opção (SIM/NÃO, partes do corpo) — alvo grande, selecionado nítido */
.btn-check + .btn-outline-success {
  border-width: 2px;
  border-color: var(--en-green) !important;
  color: var(--en-green-deep) !important;
  background-color: #fff !important;
  min-height: 54px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600;
}
.btn-check:checked + .btn-outline-success,
.btn-check:active + .btn-outline-success {
  background-color: var(--en-green) !important;
  border-color: var(--en-green-strong) !important;
  color: #fff !important;
  box-shadow: 0 0 0 3px rgba(46,158,79,.25) !important;
}

/* =====================================================================
   4) CAMPOS / SELECTS — inclui as caixas Dia/Mês/Ano (eram verde-claro ilegível)
   ===================================================================== */
.form-control, .form-control-lg, select, .input-group select {
  border-radius: 12px;
  border: 1.5px solid var(--en-line) !important;
  padding: 14px 16px;
  font-size: 1.05rem;
  color: var(--en-ink) !important;
  background-color: #fff !important;
}
.form-control-lg { min-height: 56px; }
/* As caixas de data usam classes de botão do Bootstrap → normalizar p/ campo legível */
.input-group select.btn,
select.btn.btn-outline-success,
.form-control.btn.btn-outline-success {
  color: var(--en-ink) !important;
  font-weight: 700 !important;
  background-color: #fff !important;
  border: 1.5px solid var(--en-line) !important;
  text-align: center;
}
.input-group select.btn:focus,
select.btn.btn-outline-success:focus {
  border-color: var(--en-green) !important;
  background-color: #fff !important;
  color: var(--en-ink) !important;
}
::placeholder { color: #8a97a2 !important; opacity: 1; }

/* =====================================================================
   5) CARTÕES DO HISTÓRICO / FOTO DE PERFIL
   ===================================================================== */
.card-container {
  box-shadow: var(--en-shadow-sm);
  border: 1px solid var(--en-line);
  border-radius: 14px;
}
.foto-perfil {
  border-radius: 16px !important;
  box-shadow: var(--en-shadow-sm);
  border: 1px solid var(--en-line);
}
.img-fluid.logo { max-width: 200px; }

/* Indicador de etapas (bolinhas) */
.dotPage .active { background-color: var(--en-green) !important; }

/* =====================================================================
   6) RESPONSIVO — o cartão vira largura total no celular
   ===================================================================== */
@media (max-width: 480px) {
  .btn-custom, .btn-success, .btn-warning, .btn-info { font-size: 1.05rem; }
  .textTile { font-size: 1.05rem !important; }
}