/* =========================================================================
   CADASTRO-ASAAS — telas de CADASTRO da Cincare no visual "tipo Asaas" (a
   linguagem do login da clínica aplicada a um formulário longo)

   Quem carrega: src/pages/register/{patient/cad-patient, doctor/cad-doctor,
   clinic/cad-clinic, affiliate/cad-affiliate, seller/cad-seller}.html. Todas têm
   o mesmo esqueleto:
     header.layout-header            → logo + "Voltar" (.button-secondary)
     section.layout-section-register → .component-section-header (selo, h1, texto)
                                       + .component-register-card > form.component-form
     footer.rodape-legal-global      → rodapé legal mínimo (conteúdo intocável)

   Ordem no <head>: base.css → CSS da tela (cad-patient.css, cad-clinic.css ou
   cad-doctor.css, que o afiliado e o vendedor emprestam) → fonte Inter (Google
   Fonts) → src/shared/styles/auth-asaas.css (tokens --as-*, a escala clara do
   teal, raiz fixa em 16px, Inter no body, Toast, diálogos do utils.js e a forma do
   rodapé legal) → ESTE ARQUIVO, sempre por último. Ele só sobrescreve: cada regra
   começa por .layout-header, .layout-section-register ou .rodape-legal-global, um
   degrau acima das folhas das telas, e ganha por vir depois. Nada aqui depende de
   JS; ids, names, scripts e o Turnstile de cada tela continuam os mesmos.

   Desenho: página #f7f8fa; cabeçalho branco de 80px; uma coluna de 800px (640px no
   paciente) com o título alinhado à esquerda e o formulário num cartão branco de
   borda fina (raio 24, sem sombra); seções separadas por fio; campos de 48px em
   duas colunas (.layout-form-grid) que viram uma no celular; botão principal em
   pílula verde-petróleo de 48px; "Voltar" como botão secundário contornado.

   Desfazer = tirar o <link> deste arquivo (as folhas das telas continuam inteiras
   por baixo).
   ========================================================================= */

body { background: var(--as-n30); }

.layout-header input,
.layout-section-register input,
.layout-section-register select,
.layout-section-register button { font-family: inherit; }

/* =============================== CABEÇALHO =============================== */

.layout-header {
  background: #ffffff;
  border-bottom: 1px solid var(--as-n200);
}
.layout-header .layout-container.layout-nav {
  width: min(100% - 48px, 1280px);
  min-height: 80px;
}
.layout-header .component-logo img {
  width: auto;
  height: 40px;
}

/* "Voltar" = botão secundário: pílula contornada de 40px, sem degradê nem sombra */
.layout-header .button-secondary {
  height: 40px;
  min-height: 40px;
  padding: 0 20px;
  gap: 8px;
  border: 1px solid var(--as-n200);
  border-radius: 999px;
  background: #ffffff;
  color: var(--as-n900);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  box-shadow: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.layout-header .button-secondary svg { width: 16px; height: 16px; stroke-width: 2; }
.layout-header .button-secondary:hover {
  background: var(--as-n30);
  border-color: var(--as-n300);
  transform: none;
  filter: none;
  box-shadow: none;
}
.layout-header .button-secondary:focus-visible { outline: 2px solid var(--brand-teal-500); outline-offset: 2px; }

/* =============================== COLUNA E TÍTULO =============================== */

.layout-section-register { padding: 48px 0 32px; }

.layout-section-register .layout-register-container {
  width: min(100% - 48px, 800px);
  align-items: stretch;
  gap: 24px;
}
/* paciente: formulário curto, coluna mais estreita */
.layout-section-register .layout-register-container:has(.component-register-card-sm) { width: min(100% - 48px, 640px); }

.layout-section-register .component-section-header {
  width: 100%;
  max-width: none;
  margin: 0;
  text-align: left;
}
.layout-section-register .component-tag {
  margin: 0 0 12px;
  padding: 4px 12px;
  border: 0;
  border-radius: 999px;
  background: var(--brand-teal-50);
  color: var(--brand-teal-700);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.layout-section-register .component-tag::before { display: none; }
.layout-section-register .component-section-header h1 {
  margin: 0 0 8px;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--as-n900);
}
.layout-section-register .component-description {
  max-width: 640px;
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--as-n600);
}

/* =============================== CARTÃO DO FORMULÁRIO =============================== */

.layout-section-register .component-register-card {
  width: 100%;
  max-width: none;
  padding: 40px;
  background: #ffffff;
  border: 1px solid var(--as-n200);
  border-radius: 24px;
  box-shadow: none;
}
.layout-section-register .component-register-card::before { display: none; }
/* no paciente o título fica dentro do cartão */
.layout-section-register .component-register-card .component-section-header { margin-bottom: 32px; }

/* Título de seção: texto de 18px; o primeiro abre o cartão, os outros ganham um fio
   em cima. No cadastro da clínica o ícone fica num quadrado suave do teal. */
.layout-section-register .component-form-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 24px;
  padding: 0;
  text-align: left;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--as-n900);
}
.layout-section-register .component-form-title:not(:first-child) {
  margin-top: 8px;
  padding-top: 32px;
  border-top: 1px solid var(--as-n200);
}
.layout-section-register .component-form-title::before,
.layout-section-register .component-form-title::after { display: none; }
.layout-section-register .component-form-title svg {
  width: 40px;
  height: 40px;
  min-width: 40px;
  padding: 10px;
  border-radius: 12px;
  background: var(--brand-teal-50);
  color: var(--brand-teal);
  box-shadow: none;
  stroke-width: 2;
  transform: none;
}

/* =============================== CAMPOS =============================== */

.layout-section-register .layout-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 24px;
  align-items: start;
  margin: 0;
}
.layout-section-register .component-input-group {
  gap: 6px;
  margin: 0 0 24px;
}
.layout-section-register .component-input-group label {
  text-align: left;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--as-n900);
}
.layout-section-register .component-input-group input,
.layout-section-register .component-input-group select {
  height: 48px;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid var(--as-n200);
  border-radius: 12px;
  background-color: #ffffff;
  color: var(--as-n900);
  font-size: 16px;
  text-align: left;
  box-shadow: none;
  transition: border-color 0.2s ease;
}
.layout-section-register .component-input-group input::placeholder { color: var(--as-n400); }
.layout-section-register .component-input-group input:hover:not(:focus),
.layout-section-register .component-input-group select:hover:not(:focus) { border-color: var(--as-n300); }
.layout-section-register .component-input-group input:focus,
.layout-section-register .component-input-group select:focus {
  border-color: var(--as-n200);
  box-shadow: none;
  outline: 2px solid var(--brand-teal-500);
  outline-offset: -1px;
}
/* campo que o usuário mexeu e ficou inválido (ex.: e-mail sem @, valor < 1) */
.layout-section-register .component-input-group input:user-invalid { border-color: var(--as-erro); }
.layout-section-register .component-input-group input:user-invalid:focus { outline-color: var(--as-erro); }
.layout-section-register .component-input-group input:user-invalid:hover { border-color: var(--as-erro); }

/* select: seta fina (chevron) no lugar dos dois triângulos em degradê */
.layout-section-register .component-input-group select {
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235e6877' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-position: right 16px center;
  background-size: 16px 16px;
  background-repeat: no-repeat;
  cursor: pointer;
}
/* data: o ícone do calendário no tom secundário */
.layout-section-register .component-input-group input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0.6; cursor: pointer; }

/* Dicas embaixo do campo (a da senha, .field-hint, e a do PIX, <small> solto) */
.layout-section-register .component-input-group small {
  display: block;
  margin: 2px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--as-n600);
}

/* =============================== ACEITE DOS TERMOS =============================== */
/* Duas marcações: .terms-check com #acceptTerms (paciente, médico, clínica; só o
   "Li e aceito os" é <label>) e label.component-terms com #termsAccept (afiliado e
   vendedor, que nenhuma folha pintava: saía um checkbox nativo solto). As duas
   viram a mesma caixa de borda fina com o checkbox nativo na cor da marca. A caixa
   real NUNCA se esconde (LGPD art. 8º §2: o aceite tem de se ver). */
.layout-section-register .terms-check,
.layout-section-register .component-terms {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  min-height: 0;
  margin: 0 0 24px;
  padding: 16px;
  border: 1px solid var(--as-n200);
  border-radius: 12px;
  background: var(--as-n30);
  color: var(--as-n600);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  cursor: default;
}
.layout-section-register .component-terms { cursor: pointer; }
.layout-section-register .terms-check:hover,
.layout-section-register .component-terms:hover { border-color: var(--as-n300); background: var(--as-n30); }
.layout-section-register .terms-check label { cursor: pointer; }
.layout-section-register .terms-check input[type="checkbox"],
.layout-section-register .component-terms input[type="checkbox"] {
  display: inline-block;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  min-width: 18px;
  margin: 2px 0 0;
  accent-color: var(--brand-teal);
  cursor: pointer;
}
.layout-section-register .terms-check input[type="checkbox"]:focus-visible,
.layout-section-register .component-terms input[type="checkbox"]:focus-visible { outline: 2px solid var(--brand-teal-500); outline-offset: 2px; }
.layout-section-register .terms-link {
  padding: 0;
  color: var(--brand-teal);
  font-size: inherit;
  font-weight: 500;
  text-decoration: none;
}
.layout-section-register .terms-link:hover { color: var(--brand-teal-700); text-decoration: underline; text-underline-offset: 2px; }

/* =============================== BOTÃO E NOTA =============================== */

.layout-section-register .button-primary {
  display: inline-flex;
  width: 100%;
  height: 48px;
  min-height: 48px;
  margin: 16px 0 0;
  padding: 0 24px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 999px;
  background: var(--brand-teal);
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  box-shadow: none;
  filter: none;
  transform: none;
  cursor: pointer;
  transition: background-color 0.15s ease-in-out;
}
.layout-section-register .button-primary svg { width: 16px; height: 16px; stroke-width: 2.2; }
.layout-section-register .button-primary:hover { background: var(--brand-teal-700); transform: none; filter: none; box-shadow: none; }
.layout-section-register .button-primary:active { background: var(--brand-teal-800); transform: none; }
.layout-section-register .button-primary:focus-visible { outline: 2px solid var(--brand-teal-500); outline-offset: 2px; }
.layout-section-register .button-primary:disabled { background: var(--brand-teal-400); cursor: progress; }

/* "Após o cadastro, seu pedido fica pendente…" (afiliado e vendedor) */
.layout-section-register .cadastro-nota {
  margin: 16px 0 0;
  text-align: center;
  font-size: 14px;
  line-height: 1.5;
  color: var(--as-n600);
}

/* =============================== RODAPÉ LEGAL =============================== */
/* No fluxo, no pé da página (a posição fixa da auth-asaas.css é só do layout de login) */
.rodape-legal-global { padding: 8px 24px 32px; }

/* =============================== CELULAR =============================== */

@media (max-width: 767px) {
  .layout-section-register { padding: 24px 0 16px; }
  .layout-section-register .layout-register-container,
  .layout-section-register .layout-register-container:has(.component-register-card-sm) { width: calc(100% - 32px); gap: 20px; }
  .layout-section-register .component-section-header h1 { font-size: 24px; }
  .layout-section-register .component-register-card { padding: 24px 20px; border-radius: 20px; }
  .layout-section-register .layout-form-grid { grid-template-columns: minmax(0, 1fr); }
  .layout-section-register .component-input-group-span-2 { grid-column: auto; }
  .layout-section-register .component-input-group { margin-bottom: 20px; }
  .layout-section-register .component-form-title { margin-bottom: 20px; }
  .layout-section-register .component-form-title:not(:first-child) { padding-top: 24px; }
  .layout-header .layout-container.layout-nav { width: calc(100% - 32px); min-height: 64px; }
  .layout-header .component-logo img { height: 32px; }
  .rodape-legal-global { padding: 8px 16px 24px; }
}

/* até 480px a base.css deixa o "Voltar" só com o ícone: aqui ele vira um círculo contornado */
@media (max-width: 480px) {
  .layout-header .button-secondary { width: 40px; min-width: 40px; padding: 0; border-radius: 999px; }
}