/* Fregu — página de entrar e criar conta (tokens, botões e campos vêm de base.css) */
body { min-height: 100dvh; font-size: 16px; line-height: 1.5; }
a { color: var(--texto-2); }
a:hover { color: var(--texto); }
.entrar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100dvh; }

.lado { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: 40px clamp(32px, 5vw, 72px); border-right: 1px solid var(--linha); background: var(--fundo); }
.lado h2 { margin: 0; font-weight: 500; font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.05; letter-spacing: -.03em; max-width: 12em; text-wrap: balance; }
.lado ul { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 14px; color: var(--texto-2); }
.lado li { display: flex; gap: 12px; align-items: flex-start; }
.lado li::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%; background: var(--marca) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5 10.500 17 18 8' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.lado small { color: var(--texto-3); }
.notifica { display: flex; align-items: center; gap: 14px; width: min(380px, 100%); margin-top: 36px; padding: 14px 18px 14px 14px; border: 1px solid var(--linha-2); border-radius: var(--r-card); background: var(--fundo-2); }
.notifica .tile { width: 44px; height: 44px; --cor: #ef4444; }
.notifica .tile svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.notifica span:last-child { display: grid; flex: 1; line-height: 1.3; }
.notifica strong { display: flex; justify-content: space-between; gap: 12px; font-weight: 500; font-size: .98rem; font-variant-numeric: tabular-nums; }
.notifica b { font-weight: 500; }
.notifica small { color: var(--texto-3); font-size: .82rem; }
.logo { font-size: 1.5rem; }

.centro { display: grid; place-items: center; padding: 32px 20px; }
.cartao { width: min(420px, 100%); display: grid; gap: 18px; }
.cartao .logo { display: none; justify-self: start; }
.titulo { margin: 0; font-weight: 500; font-size: 1.9rem; letter-spacing: -.03em; line-height: 1.1; }
.sub { margin: 4px 0 0; color: var(--texto-2); }

.abas { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; }
.abas button { min-height: 44px; font-size: .95rem; }

form { display: grid; gap: 14px; }
form[hidden] { display: none; }
label { display: grid; gap: 6px; font-size: .88rem; font-weight: 500; color: var(--texto-2); }
.campo { position: relative; }
input[type=text], input[type=email], input[type=password] { width: 100%; min-height: 50px; padding: 0 16px; border: 1px solid var(--linha-2); border-radius: var(--r-ctl); background: var(--fundo-3); color: var(--texto); font: inherit; font-size: 1rem; transition: border-color var(--t), box-shadow var(--t); }
input::placeholder { color: var(--texto-3); }
input:focus { outline: none; border-color: var(--marca); box-shadow: 0 0 0 3px rgba(255, 109, 41, .22); }
input[aria-invalid=true] { border-color: var(--perigo); }
.campo input { padding-right: 84px; }
.ver { position: absolute; right: 6px; top: 50%; translate: 0 -50%; min-height: 40px; padding: 0 12px; border: 0; border-radius: var(--r-ctl); background: none; color: var(--texto-2); font: inherit; font-size: .85rem; font-weight: 500; cursor: pointer; }
.ver:hover { color: var(--texto); }
.dica { margin: -6px 0 0; color: var(--texto-3); font-size: .8rem; font-weight: 400; }
.erro-campo { margin: -6px 0 0; color: var(--perigo-claro); font-size: .82rem; font-weight: 400; }
.linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.link { padding: 10px 0; font-size: .88rem; font-weight: 400; text-decoration: underline; text-underline-offset: 3px; }
.aceite { display: flex; align-items: flex-start; gap: 12px; font-weight: 400; font-size: .86rem; color: var(--texto-2); }
.aceite input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; }

.btn { min-height: 50px; font-size: 1rem; }
.btn[disabled] { cursor: wait; }
.btn svg { width: 20px; height: 20px; }
.ou { display: flex; align-items: center; gap: 12px; color: var(--texto-3); font-size: .85rem; }
.ou::before, .ou::after { content: ""; flex: 1; height: 1px; background: var(--linha); }
.msg { min-height: 1.4em; margin: 0; font-size: .9rem; }
.msg.erro { color: var(--perigo-claro); }
.msg.ok { color: var(--ok); }
.msg.info { color: var(--texto-2); }
.rodape { text-align: center; color: var(--texto-3); font-size: .86rem; }

@media (max-width: 900px) {
  .entrar { grid-template-columns: minmax(0, 1fr); }
  .lado { display: none; }
  .cartao .logo { display: inline-flex; }
  .centro { place-items: start center; padding-top: 28px; }
}

/* a mesma luz viva da página de apresentação (js/luz.js), para a passagem do site ao cadastro parecer uma coisa só */
.lado > .luz { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; display: block; pointer-events: none; opacity: .8; }
.lado.com-luz > .aurora { display: none; }