/* ==========================================================================
   dio/pages/conta.css — telas de conta: Entrar, Nova conta, esqueci/trocar senha, 2FA, código de
   recuperação, conta bloqueada e confirmações de e-mail (SignIn/*, Shared/Register, Shared/*Confirm*).

   Depende de dio/tokens.css, dio/base.css e dio/components.css. Todas usam _LayoutDarkEmpty (sem header/rodapé)
   e a coluna da marca vem da partial _dioContaBrand.
   Blocos: .dio-conta (tela dividida) · .dio-conta__brand · .dio-conta__card · .dio-conta__msg (cartão de
   mensagem: sucesso, aviso, bloqueio) · .dio-social · .dio-conta__legal
   ========================================================================== */

.dio-conta {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    background: var(--dio-bg);
}

/* --------------------------------------------------------------------------
   Coluna da marca
   -------------------------------------------------------------------------- */
.dio-conta__brand {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--dio-space-8);
    padding: var(--dio-space-8) clamp(24px, 6vw, 96px);
    background:
        radial-gradient(70% 60% at 0% 100%, rgba(var(--dio-accent-rgb), .12), transparent 70%),
        radial-gradient(50% 40% at 100% 0%, rgba(26, 79, 214, .16), transparent 70%),
        var(--dio-bg-elev);
    border-right: 1px solid var(--dio-border-soft);
    overflow: hidden;
}

/* grade discreta de fundo (textura "tech" sem imagem) */
.dio-conta__brand::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(80% 80% at 50% 50%, #000 40%, transparent 100%);
    -webkit-mask-image: radial-gradient(80% 80% at 50% 50%, #000 40%, transparent 100%);
    pointer-events: none;
}

.dio-conta__brand > * {
    position: relative;
}

.dio-conta__logo {
    display: inline-block;
    font-family: var(--dio-font-display);
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--dio-text);
    text-decoration: none;
}

.dio-conta__logo span {
    color: var(--dio-accent);
}

/* logotipo não é link "de texto": sem cor de hover nem sublinhado; só o cursor indica que leva para a home */
.dio-page .dio-conta__logo:hover,
.dio-page .dio-conta__logo:focus {
    color: var(--dio-text);
    text-decoration: none;
}

.dio-page .dio-conta__logo:hover span,
.dio-page .dio-conta__logo:focus span {
    color: var(--dio-accent);
}

.dio-conta__headline {
    font-size: clamp(30px, 3vw, 42px);
    line-height: 1.08;
    letter-spacing: -0.02em;
    max-width: 480px;
    text-wrap: balance;
}

.dio-conta__headline .dio-text-gradient {
    white-space: nowrap;
}

.dio-conta__lead {
    color: var(--dio-text-dim) !important; /* ver nota sobre !important em base.css */
    font-size: 16px;
    max-width: 440px;
    margin-top: var(--dio-space-4);
}

.dio-conta__bullets {
    display: flex;
    flex-direction: column;
    gap: var(--dio-space-3);
    margin: var(--dio-space-7) 0 0;
    padding: 0;
    list-style: none;
}

.dio-conta__bullets li {
    display: flex;
    align-items: center;
    gap: var(--dio-space-3);
    color: var(--dio-text-dim);
    font-size: 14.5px;
}

.dio-conta__bullets svg {
    width: 18px;
    height: 18px;
    flex: none;
    color: var(--dio-accent);
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dio-conta__voltar {
    align-self: flex-start;
}

/* --------------------------------------------------------------------------
   Coluna do formulário
   -------------------------------------------------------------------------- */
.dio-conta__form-col {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--dio-space-8) var(--dio-space-5);
}

.dio-conta__card {
    width: 100%;
    max-width: 440px;
    display: flex;
    flex-direction: column;
    gap: var(--dio-space-5);
}

.dio-conta__title {
    font-size: 28px;
    letter-spacing: -0.02em;
}

.dio-conta__subtitle {
    color: var(--dio-text-dim) !important; /* ver nota sobre !important em base.css */
    font-size: 15px;
    margin-top: 6px;
}

.dio-conta__card form {
    display: flex;
    flex-direction: column;
    gap: var(--dio-space-4);
}

/* o form de passwordless só tem campos ocultos */
.dio-conta__card form.dio-conta__hidden-form {
    display: none;
}

.dio-conta__row {
    display: flex;
    gap: var(--dio-space-2);
}

.dio-conta__row .dio-btn {
    flex: 1;
}

.dio-conta__row .dio-btn--icon {
    flex: none;
    width: 48px;
    padding: 0;
}

.dio-conta__link {
    font-size: 14px;
}

.dio-conta__rodape {
    text-align: center;
    color: var(--dio-text-dim);
    font-size: 14px;
    padding-top: var(--dio-space-4);
    border-top: 1px solid var(--dio-border-soft);
}

.dio-conta__rodape .dio-btn {
    margin-top: var(--dio-space-3);
}

/* --------------------------------------------------------------------------
   Login social
   -------------------------------------------------------------------------- */
.dio-social {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--dio-space-2);
}

.dio-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--dio-space-2);
    height: 46px;
    border-radius: var(--dio-radius-sm);
    border: 1px solid var(--dio-border);
    background: var(--dio-bg-elev);
    color: var(--dio-text);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: border-color var(--dio-dur) var(--dio-ease), background var(--dio-dur) var(--dio-ease), transform var(--dio-dur) var(--dio-ease);
}

.dio-social a i,
.dio-social a .dio-ico {
    font-size: 16px;
    color: var(--dio-text-dim);
}

.dio-social a:hover {
    border-color: var(--dio-accent);
    background: var(--dio-bg-elev-2);
    color: var(--dio-text);
    transform: translateY(-1px);
}

.dio-social a:hover i,
.dio-social a:hover .dio-ico {
    color: var(--dio-accent);
}

/* --------------------------------------------------------------------------
   Cartão de mensagem (e-mail enviado, senha trocada, conta bloqueada…)
   -------------------------------------------------------------------------- */
.dio-conta__msg {
    text-align: center;
    align-items: center;
}

.dio-conta__msg-icone {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--dio-accent-rgb), .12);
    color: var(--dio-accent);
}

.dio-conta__msg-icone--ok {
    background: rgba(52, 211, 153, .12);
    color: var(--dio-success);
}

.dio-conta__msg-icone--erro {
    background: rgba(248, 113, 113, .12);
    color: #f87171;
}

.dio-conta__msg-icone svg {
    width: 28px;
    height: 28px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dio-conta__msg .dio-conta__subtitle {
    line-height: 1.6;
}

.dio-conta__msg .dio-btn {
    min-width: 220px;
}

/* --------------------------------------------------------------------------
   Nova conta: avatar do login social, reCAPTCHA e termos
   -------------------------------------------------------------------------- */
.dio-conta__avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--dio-border);
}

.dio-conta__captcha {
    display: flex;
    justify-content: center;
}

.dio-conta__legal {
    color: var(--dio-text-faint) !important; /* ver nota sobre !important em base.css */
    font-size: 12.5px;
    line-height: 1.5;
    text-align: center;
}

.dio-conta__legal a {
    color: var(--dio-text-dim);
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Responsivo: coluna da marca vira um cabeçalho compacto
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .dio-conta {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr; /* o formulário ocupa o resto da tela */
    }

    /* empilhado: tudo centralizado, para o texto da marca (que é longo e
       quebra em várias linhas) não ficar colado à esquerda enquanto o cartão
       do formulário fica centralizado logo abaixo */
    .dio-conta__brand {
        gap: var(--dio-space-5);
        padding: var(--dio-space-6) var(--dio-space-5);
        border-right: 0;
        border-bottom: 1px solid var(--dio-border-soft);
        align-items: center;
        text-align: center;
    }

    .dio-conta__headline,
    .dio-conta__lead {
        margin-left: auto;
        margin-right: auto;
    }

    .dio-conta__headline { font-size: 26px; }
    .dio-conta__headline .dio-text-gradient { white-space: normal; }

    .dio-conta__card > div:first-child { text-align: center; }
    .dio-conta__link { text-align: center; }
    .dio-conta__form-col { align-items: flex-start; } /* formulário logo abaixo da marca, sem centralizar na sobra da tela */
    .dio-conta__bullets { display: none; }
    .dio-conta__voltar { display: none; }
    .dio-conta__form-col { padding: var(--dio-space-6) var(--dio-space-4) var(--dio-space-8); }
}