/* Tela de entrar — layout em dois cartões sobrepostos: à esquerda o cartão colorido da marca (degradê verde com
   formas orgânicas), à direita o cartão branco com o formulário. Campos com o rótulo dentro da caixa e barra de
   destaque ao focar. Carregado por último em entrar.html: só sobrescreve o visual (a página é sempre clara). */

.pagina-entrar {
  --en-verde: #1f8a5b;
  --en-teal: #17a495;
  --en-escuro: #0f6248;
  --en-tinta: #1d2b24;
  --en-suave: #7d8b84;
  --en-campo: #f2f6f4;
  --en-grad: linear-gradient(100deg, #1f8a5b 0%, #17a495 100%);
  min-height: 100vh;
  background:
    radial-gradient(60% 55% at 8% 12%, rgba(178, 236, 214, .9), transparent 70%),
    radial-gradient(50% 60% at 95% 90%, rgba(170, 225, 230, .85), transparent 70%),
    radial-gradient(40% 45% at 75% 5%, rgba(214, 238, 196, .9), transparent 70%),
    linear-gradient(135deg, #e3f5ee 0%, #d6eff0 50%, #e8f4df 100%);
}

/* ---------- os dois cartões ---------- */
.pagina-entrar main.entrar {
  display: flex; align-items: flex-start; justify-content: center;
  min-height: 100vh; max-width: 1180px; margin: 0 auto; padding: 56px 32px;
}
.pagina-entrar .entrar-marca {
  position: sticky; top: 136px; z-index: 2; flex: 0 0 min(540px, 50%); min-height: 520px; margin: 80px -64px 0 0;
  display: flex; flex-direction: column; justify-content: flex-start; gap: 22px;
  padding: 64px 56px 72px; border-radius: 10px; overflow: hidden; color: #fff;
  background:
    radial-gradient(120% 90% at 105% 30%, rgba(23, 164, 149, .95) 0 38%, transparent 38.5%),
    radial-gradient(90% 80% at 85% 120%, rgba(15, 98, 72, .9) 0 45%, transparent 45.5%),
    linear-gradient(100deg, #1f8a5b 0%, #1c9a7a 60%, #23ab8f 100%);
  box-shadow: 0 50px 90px -40px rgba(15, 98, 72, .55), 0 18px 40px -24px rgba(15, 98, 72, .4);
}
.pagina-entrar .entrar-cartao {
  position: relative; z-index: 1; flex: 0 0 min(560px, 52%); max-width: none; min-height: 680px;
  justify-content: center; gap: 0; padding: 72px 72px 56px 136px; border-radius: 10px;
  background: #fbfdfc; box-shadow: 0 40px 100px -40px rgba(30, 90, 90, .35);
}

/* ---------- cartão da marca ---------- */
.pagina-entrar .entrar-marca > .entrar-logo { display: flex; align-items: center; gap: 14px; font-size: 26px; text-shadow: none; }
.entrar-selo { width: 74px; height: 74px; border-radius: 50%; border: 7px solid #fff; display: grid; place-items: center; }
.pagina-entrar .entrar-marca .entrar-selo svg { width: 30px; height: 30px; }
.entrar-nome { font-weight: 800; letter-spacing: -.01em; }
.pagina-entrar .entrar-titulo { color: #fff; text-transform: none; font-family: inherit; }
.entrar-titulo { margin: 26px 0 0; font-size: clamp(38px, 4.4vw, 58px); line-height: 1.08; letter-spacing: -.02em; font-weight: 800; }
.entrar-titulo span { font-weight: 300; color: rgba(255, 255, 255, .72); }
.entrar-titulo b { font-weight: 800; color: #fff; }
.pagina-entrar .entrar-frase { max-width: 440px; margin: 6px 0 0; font-size: 18px; line-height: 1.5; opacity: .82; text-shadow: none; }
.entrar-saiba {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 14px; margin-top: 10px; padding: 14px 0 14px 20px;
  border: 1.5px solid rgba(255, 255, 255, .85); border-radius: 4px; color: #fff; text-decoration: none; font-size: 16px; font-weight: 600;
}
.entrar-saiba svg { width: 46px; height: 12px; margin-right: -26px; fill: none; stroke: #fff; stroke-width: 1.5; transition: transform .25s; }
.entrar-saiba:hover svg { transform: translateX(6px); }
.entrar-saiba:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.entrar-pontos { position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); display: flex; gap: 8px; }
.entrar-pontos i { width: 12px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .45); }
.entrar-pontos i:first-child { width: 36px; background: #fff; }
.pagina-entrar .entrar-lista, .pagina-entrar .entrar-credito { display: none; }
.pagina-entrar .entrar-marca .logo-consultorio-entrar { max-height: 56px; width: auto; border-radius: 8px; background: #fff; padding: 4px; }

/* abas do topo: continuam existindo (teclado/leitor de tela), mas o visual usa os links "Não tem conta?" do fim */
.pagina-entrar #abas { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pagina-entrar .entrar-cartao:has(> .u039-tabs) { padding-top: 72px; justify-content: center; }
.pagina-entrar .entrar-cartao > .u039-panel, .pagina-entrar .entrar-cartao > .entrar-form { max-width: none; width: 100%; }

/* ---------- formulário de entrar (.u062) ---------- */
.pagina-entrar .u062 { width: 100%; height: 600px; border-radius: 0; background: none; box-shadow: none; }
.pagina-entrar .u062-pane { padding: 8px 10px 10px; }
.pagina-entrar .u062-logo { display: none; }
.pagina-entrar .u062-pane h3 { margin: 0 0 18px; font-size: 46px; font-weight: 800; letter-spacing: -.02em;
  background: var(--en-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pagina-entrar .u062-pane > p { margin: 0 0 40px; font-size: 18px; line-height: 1.5; color: var(--en-suave); }
.pagina-entrar .u062-f {
  margin-bottom: 26px; padding: 16px 22px 12px; background: var(--en-campo); border-left: 5px solid transparent;
  transition: background-color .25s, box-shadow .25s, border-color .25s;
}
.pagina-entrar .u062-f:focus-within { background: #fff; border-left-color: var(--en-teal); box-shadow: 0 18px 40px -18px rgba(30, 90, 90, .35); }
.pagina-entrar .u062-f label { margin: 0 0 6px; font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--en-suave); }
.pagina-entrar .u062-box { height: 34px; border-radius: 0; background: none; box-shadow: none !important; }
.pagina-entrar .u062-box input { padding: 0; font-size: 18px; font-weight: 500; letter-spacing: .02em; color: var(--en-tinta); }
.pagina-entrar .u062-box input::placeholder { color: #a9b5af; font-weight: 400; }
.pagina-entrar .u062-caps { top: 16px; right: 22px; }
.pagina-entrar .u062-row { justify-content: flex-end; margin: -14px 0 28px; }
.pagina-entrar .u062-row a { font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--en-suave); }
.pagina-entrar .u062-row a:hover { color: var(--en-verde); }
.pagina-entrar .u062-go {
  height: 62px; margin-top: 0; border-radius: 4px; background: var(--en-grad); color: #fff;
  font-size: 17px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; box-shadow: 0 22px 40px -20px rgba(23, 164, 149, .7);
}

/* "Não tem conta? Criar conta" / "Já tem conta? Entrar" */
.pagina-entrar .u062-pane > p.entrar-troca, .entrar-troca { margin: 34px 0 0; text-align: center; font-size: 18px; color: #4c5a53; }
.entrar-troca a { color: var(--en-verde, #1f8a5b); font-weight: 800; text-decoration: none; }
.entrar-troca a:hover { text-decoration: underline; }

/* ---------- formulários de criar conta / esqueci / senha nova ---------- */
.pagina-entrar .entrar-form h1 { margin: 0 0 6px; font-size: 38px; font-weight: 800; letter-spacing: -.02em;
  background: var(--en-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pagina-entrar .entrar-form > .sub { font-size: 16px; color: var(--en-suave); }
.pagina-entrar .entrar-form > label:not(.check) {
  padding: 13px 20px 10px; background: var(--en-campo); border-left: 5px solid transparent;
  font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--en-suave);
  transition: background-color .25s, box-shadow .25s, border-color .25s;
}
.pagina-entrar .entrar-form > label:not(.check):focus-within { background: #fff; border-left-color: var(--en-teal); box-shadow: 0 18px 40px -18px rgba(30, 90, 90, .35); }
.pagina-entrar .entrar-form > label:not(.check) input {
  min-height: 32px; padding: 2px 0 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  font-size: 17px; font-weight: 500; letter-spacing: .01em; text-transform: none; color: var(--en-tinta); outline: none;
}
.pagina-entrar .entrar-form > label:not(.check) small { text-transform: none; letter-spacing: 0; font-weight: 400; }
.pagina-entrar .entrar-form > label:not(.check) .uce-campo.is-ok > input,
.pagina-entrar .entrar-form > label:not(.check) .uce-campo.is-x > input { box-shadow: none; }
.pagina-entrar .entrar-form .uce-marca { right: 0; }
.pagina-entrar .entrar-form .btn.primario.largo {
  min-height: 58px; border: 0; border-radius: 4px; background: var(--en-grad); color: #fff;
  font-size: 16px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; box-shadow: 0 22px 40px -20px rgba(23, 164, 149, .7);
}
.pagina-entrar .entrar-form .erro { font-size: 15px; }

/* ---------- celular e telas estreitas: os cartões empilham ---------- */
@media (max-width: 960px) {
  .pagina-entrar main.entrar { flex-direction: column; align-items: stretch; padding: 20px 16px 32px; }
  .pagina-entrar .entrar-marca { position: relative; top: auto; flex: none; min-height: 0; margin: 0 12px -24px; padding: 28px 24px 52px; gap: 12px; }
  .entrar-titulo { margin-top: 8px; font-size: 32px; }
  .pagina-entrar .entrar-frase, .entrar-saiba, .entrar-pontos { display: none; }
  .entrar-selo { width: 52px; height: 52px; border-width: 5px; }
  .pagina-entrar .entrar-marca .entrar-selo svg { width: 22px; height: 22px; }
  .pagina-entrar .entrar-cartao { flex: none; min-height: 0; padding: 52px 22px 32px; }
  .pagina-entrar .entrar-cartao > .entrar-logo.so-celular { display: none; }
  .pagina-entrar .u062-pane h3 { font-size: 38px; }
}

/* endereço do consultório: o sufixo (.ervo.com.br) dentro da mesma caixa, sem moldura própria */
.pagina-entrar .entrar-form .endereco-dominio { border: 0; border-radius: 0; background: none; overflow: visible; }
.pagina-entrar .entrar-form .endereco-dominio input { text-align: left; }
.pagina-entrar .entrar-form .endereco-dominio span { padding: 0 0 0 2px; background: none; font-size: 17px; font-weight: 500;
  text-transform: none; letter-spacing: 0; color: var(--en-suave); }
.pagina-entrar .entrar-form [data-endereco-info] { display: block; margin-top: 4px; font-size: 13px; }

/* senha (medidor de força .u036): mesmo visual dos outros campos */
.pagina-entrar .entrar-form .u036-lab { margin: 0; padding: 13px 20px 0; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--en-suave); background: var(--en-campo); border-left: 5px solid transparent; }
.pagina-entrar .entrar-form .u036-box { height: 48px; padding: 0 8px 0 20px; border-radius: 0; background: var(--en-campo); box-shadow: none; border-left: 5px solid transparent; }
.pagina-entrar .entrar-form .u036:focus-within .u036-lab, .pagina-entrar .entrar-form .u036:focus-within .u036-box { background: #fff; border-left-color: var(--en-teal); }
.pagina-entrar .entrar-form .u036:focus-within .u036-box { box-shadow: 0 18px 40px -18px rgba(30, 90, 90, .35); }
.pagina-entrar .entrar-form .u036-in { font-size: 17px; font-weight: 500; }