@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap");
main {
    width: 100%;
    height: auto;
    padding: clamp(56px, 9vh, 96px) 0 0;
    box-sizing: border-box;
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: center;
}
main > form {
    width: 85%;
    max-width: 520px;
    height: auto;
    margin: 0;
    box-sizing: border-box;
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: center;
}
main > form > h1 {
    margin: 0 0 28px;
    text-align: center;
    font-family: "Alfa Slab One", Georgia, serif;
    font-size: 2.5em;
    font-weight: 400;
}
main > form > p {
    width: 100%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-evenly;
    align-items: center;
}
main > form > p.em-linha {
    margin: 5px 0;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
}
main > form > p > label { width: 100%; font-size: 0.8em; font-weight: bold; }
main > form > p > input {
    width: 100%;
    padding: 12px;
    border: none;
    border-bottom: 1px solid #888888;
    border-radius: 0;
    outline: none;
    background: transparent;
    font-size: 1.2em;
}
main > form > p > input:focus { border-bottom-color: #111111; }
main > form > p.em-linha > input {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    margin: 0 8px 0 0;
    accent-color: #ed1f35;
}
main > form > p.em-linha > label { width: auto; font-size: 0.9em; }
main > form > input[type="submit"] {
    align-self: flex-end;
    margin-top: 10px;
    padding: 12px 26px;
    border: none;
    border-radius: 18px;
    background-color: #ed1f35;
    color: #ffffff;
    font-size: 1em;
    cursor: pointer;
    transition:
        transform 120ms ease,
        background-color 160ms ease;
}
main > form > input[type="submit"]:active { transform: scale(0.97); background-color: #d8182d; }
aside {
    width: min(calc(100vw - 40px), 430px);
    height: auto;
    margin: 24px auto max(24px, env(safe-area-inset-bottom));
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #ececf0;
    border-radius: 24px;
    background: rgba(247, 247, 249, 0.92);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.07);
    display: flex;
    flex-flow: column nowrap;
    gap: 6px;
}
aside > a {
    width: 100%;
    min-height: 48px;
    padding: 12px 16px;
    border-radius: 16px;
    color: #202024;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition:
        background-color 160ms ease,
        transform 120ms ease;
    -webkit-tap-highlight-color: transparent;
}
aside > a:active { transform: scale(0.98); }
aside > a#esqueci-palavra-passe { color: #62626b; font-size: 0.95rem; font-weight: 650; }
aside > a#esqueci-palavra-passe:hover,
aside > a#esqueci-palavra-passe:focus-visible {
    background-color: #ffffff;
}
aside > a#registar { gap: 5px; background-color: #ffffff; color: #62626b; font-size: 0.95rem; }
aside > a#registar > span { color: #ed1f35; font-weight: 750; }
aside > a#registar:hover, aside > a#registar:focus-visible { background-color: #fff1f3; }
aside > a:focus-visible,
main > form > input[type="submit"]:focus-visible {
    outline: 2px solid #ed1f35;
    outline-offset: 2px;
}
/*
 * iPhones altos, como o iPhone 16 Pro Max:
 * baixa ligeiramente todo o bloco de autenticação
 * para aproveitar melhor o espaço vertical.
 *
 * O compatibility mode do iPad fica fora desta regra,
 * preservando o layout já validado no iPad Air 11".
 */
@media (max-width: 480px) and (min-height: 900px) {
    main { padding-top: 140px; }
}
@media (max-height: 740px) {
    main { padding-top: 36px; }
    aside { margin-top: 20px; }
}
/*
 * Transição nativa entre Entrar e Criar conta.
 *
 * Um pouco mais lenta para o movimento ser claramente
 * perceptível sem voltar a parecer pesado.
 */
@view-transition {
    navigation: auto;
}
::view-transition-old(root) { animation: margot-auth-sair 240ms cubic-bezier(0.4, 0, 0.2, 1) both; }
::view-transition-new(root) { animation: margot-auth-entrar 330ms cubic-bezier(0.22, 0.8, 0.28, 1) both; }
@keyframes margot-auth-sair {
    from { opacity: 1; transform: translate3d(0, 0, 0); }
    to { opacity: 0.88; transform: translate3d(-28px, 0, 0); }
}
@keyframes margot-auth-entrar {
    from { opacity: 0.84; transform: translate3d(38px, 0, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}
/* TESTE TEMPORÁRIO iOS */
* { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
input { transition: none !important; animation: none !important; }
body, html { background-image: none !important; }