/* ==========================================================================
   LAVRE — tela de login do painel (login.html)
   Mesmo visual do aplicativo: fundo claro, cartão em relevo e botão azul.
   Cores, fonte, .card e .icon vêm do base.css do site.
   ========================================================================== */
html, body { background: var(--bg); }
html, a, button, input { touch-action: manipulation; }
body { min-height: 100vh; min-height: 100dvh; }
h1, p { margin: 0; }
button { font-family: inherit; -webkit-tap-highlight-color: transparent; }

.login { min-height: 100vh; min-height: 100dvh; width: 100%; max-width: 460px; margin: 0 auto; padding: calc(56px + env(safe-area-inset-top)) 22px calc(28px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.login__logo { height: 54px; width: auto; display: block; }
.login__title { margin-top: 30px; font-size: 26px; line-height: 1.15; letter-spacing: -0.03em; font-weight: 800; color: var(--ink); }
.login__lead { margin-top: 8px; max-width: 300px; font-size: 15px; line-height: 1.45; color: var(--muted); }

.login__card { width: 100%; margin-top: 34px; padding: 26px 22px 22px; border-radius: 30px; display: flex; flex-direction: column; gap: 14px; }
.login__hidden { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* Campo afundado no cartão, como nas telas do app */
.login__box { --i: 22px; display: flex; align-items: center; gap: 12px; padding: 0 8px 0 18px; height: 64px; border-radius: 20px; color: var(--muted); background: #F0F2F7; box-shadow: inset 3px 3px 7px rgba(22,44,96,0.08), inset -3px -3px 7px #fff; transition: box-shadow .2s; }
.login__box:focus-within { color: var(--blue); box-shadow: inset 3px 3px 7px rgba(22,44,96,0.08), inset -3px -3px 7px #fff, 0 0 0 2px var(--blue); }
.login__box input { flex: 1; min-width: 0; height: 100%; border: none; outline: none; background: transparent; font-family: inherit; font-size: 17px; color: var(--ink); }
.login__box input::placeholder { color: #7C869C; }
.login__peek { --i: 22px; flex: none; width: 46px; height: 46px; border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; background: transparent; color: var(--muted); }
.login__peek.is-on { color: var(--blue); background: var(--blue-soft); }
.has-error .login__box { box-shadow: inset 3px 3px 7px rgba(22,44,96,0.08), inset -3px -3px 7px #fff, 0 0 0 2px var(--red); }
.login__error { padding: 12px 14px; border-radius: 14px; font-size: 14px; line-height: 1.4; font-weight: 600; text-align: left; background: var(--red-soft); color: #A8173A; }

.login__submit { --i: 22px; position: relative; margin-top: 6px; min-height: 64px; padding: 0 56px; border: none; border-radius: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; color: #fff; background: var(--grad-blue); box-shadow: var(--shadow-cta); transition: transform .15s, opacity .2s; }
.login__submit .icon { position: absolute; right: 22px; stroke-width: 2.2; }
.login__submit:active { transform: scale(0.985); }
.login__submit[disabled] { opacity: 0.7; cursor: default; }

.login__safe { --i: 15px; display: flex; align-items: flex-start; justify-content: center; gap: 7px; margin-top: 4px; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.login__safe .icon { margin-top: 2px; color: var(--teal); }
.login__back { margin-top: 22px; font-size: 14.5px; font-weight: 700; }