/* ==========================================================================
   FourDesk Help — telas de ACESSO
   --------------------------------------------------------------------------
   Login, recuperação e troca de senha. São as únicas telas fora do base.html
   (quem está aqui ainda não tem sessão), então elas não herdam padrao.css.

   Este arquivo existe para as três não divergirem: a troca de senha vinha de
   uma geração anterior do layout — foto de fundo com overlay escuro, cartão
   branco centralizado, botão verde — enquanto o login já era a tela dividida
   com acento laranja. Quem redefinia a senha parecia ter saído do sistema.

   Depende de marca.css e tipografia.css pelos tokens.
   ========================================================================== */

html, body {
    min-height: 100vh;
    margin: 0;
    font-family: var(--font-ui);
    overflow-x: hidden;
    background-color: var(--marca-off-white, #FFFAFA);
}

/* --------------------------------------------------------- tela dividida */
.split-layout {
    display: flex;
    min-height: 100vh;
    width: 100%;
}

/* Metade escura: identidade. O gradiente radial põe um respiro laranja no
   canto esquerdo, sem virar um degradê chapado. */
.split-left {
    flex: 1.3;
    background: radial-gradient(circle at 0% 50%, rgba(255, 103, 32, 0.12) 0%, transparent 60%),
                var(--marca-preto, #010B0D);
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 50px 6% 20px 6%;
    box-sizing: border-box;
}

.split-left .logo {
    height: 40px;
    margin-bottom: 40px;
    align-self: flex-start;
}

/* `margin-top: auto` em vez do 290px fixo que havia antes: com o valor fixo,
   tela baixa empurrava o rodapé para fora e tela alta deixava um vão morto. */
.split-left h1 {
    font-size: var(--fs-display);
    font-weight: var(--fw-heavy);
    margin-top: auto;
    margin-bottom: 15px;
    line-height: 1.2;
    letter-spacing: -1px;
    color: #ffffff;
}

.split-left p {
    font-size: var(--fs-body-lg);
    color: rgba(255, 250, 250, 0.62);
    line-height: 1.6;
    max-width: 95%;
    margin-bottom: 0;
}

.footer-text {
    font-size: var(--fs-body);
    color: var(--neutro-500, #5D868E);
    margin-top: 40px;
    margin-bottom: 0;
}

/* --------------------------------------------------------- metade do form */
.split-right {
    flex: 1;
    background-color: var(--marca-off-white, #FFFAFA);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.acesso-container {
    width: 100%;
    max-width: 380px;
    animation: acessoSurge 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes acessoSurge {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .acesso-container { animation: none; }
}

.acesso-header h2 {
    font-size: var(--fs-h2);
    font-weight: var(--fw-heavy);
    color: var(--marca-preto, #010B0D);
    margin-bottom: 5px;
}

.acesso-header p {
    font-size: var(--fs-body-lg);
    color: var(--neutro-500, #5D868E);
    margin-bottom: 32px;
}

.form-label {
    font-size: var(--fs-body-lg);
    font-weight: var(--fw-semibold);
    color: var(--marca-verde-escuro, #031B20);
    margin-bottom: 8px;
    display: block;
}

.form-control {
    background-color: #FFFFFF;
    border: 1px solid var(--neutro-200, #D6E1E3);
    border-radius: 8px;
    height: 48px;
    margin-bottom: 20px;
    padding-left: 15px;
    box-shadow: none !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-control:focus {
    border-color: var(--laranja-500, #FF6720);
    box-shadow: 0 0 0 3px rgba(255, 103, 32, 0.1) !important;
}

.btn-enter {
    background-color: var(--laranja-500, #FF6720);
    color: #ffffff;
    border: none;
    width: 100%;
    height: 48px;
    font-weight: var(--fw-semibold);
    border-radius: 8px;
    margin-top: 5px;
    transition: background 0.2s;
}
.btn-enter:hover { background-color: var(--laranja-600, #E04F0C); color: #ffffff; }
.btn-enter:disabled { background-color: var(--neutro-500, #5D868E); }

.forgot-link {
    font-size: var(--fs-body);
    color: var(--laranja-500, #FF6720);
    float: right;
    text-decoration: none;
}
.forgot-link:hover { text-decoration: underline; }

/* Volta para o login, na tela de troca de senha. */
.acesso-voltar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 22px;
    font-size: var(--fs-body);
    color: var(--neutro-500, #5D868E);
    text-decoration: none;
}
.acesso-voltar:hover { color: var(--laranja-600, #E04F0C); }

/* ------------------------------------------------------------- mensagens */
/* O login NÃO renderizava flash: cada erro de senha ficava na fila em
   silêncio e só aparecia na próxima tela que consumisse a fila, empilhado
   com os anteriores. Quem errava a senha não recebia aviso nenhum e depois
   via três erros antigos numa tela onde não faziam sentido. */
.acesso-flashes {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 22px;
}

.acesso-flash {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 11px 13px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: var(--fs-body);
    line-height: var(--lh-snug, 1.4);
}
.acesso-flash > i { margin-top: 2px; flex-shrink: 0; }
.acesso-flash > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }

.acesso-flash-success { background: var(--verde-50,  #F4FBF9); color: var(--verde-700, #176B51); border-color: var(--verde-200, #C8EBE0); }
.acesso-flash-danger  { background: #FDF2F2;                   color: var(--danger, #E5484D);   border-color: #F2B8BA; }
.acesso-flash-warning { background: #FFFBEB;                   color: #92400E;                  border-color: #FCE7A8; }
.acesso-flash-info    { background: var(--azul-50,   #EFF6FD); color: var(--azul-700, #1F568E); border-color: var(--azul-100, #D9EAFA); }

/* ---------------------------------------------------- regra da nova senha */
.acesso-regra {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: -6px 0 20px 0;
    font-size: var(--fs-micro);
    color: var(--neutro-500, #5D868E);
    line-height: 1.45;
}
.acesso-regra > i { margin-top: 2px; color: var(--neutro-400, #8AA6AC); }

/* ------------------------------------------------------------- modal */
.acesso-modal-titulo {
    font-size: var(--fs-lead);
    font-weight: var(--fw-bold);
    color: var(--marca-preto, #010B0D);
    margin: 0;
}
.acesso-modal-ajuda {
    font-size: var(--fs-body);
    color: var(--neutro-500, #5D868E);
    margin-bottom: 18px;
}
.btn-acesso-secundario {
    background: transparent;
    border: 1px solid var(--neutro-200, #D6E1E3);
    color: var(--neutro-700, #1B505B);
    border-radius: 8px;
    height: 42px;
    padding: 0 18px;
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
}
.btn-acesso-secundario:hover { background: var(--neutro-50, #F5F8F8); }

/* A metade escura sai no celular: ali ela empurraria o formulário para baixo
   da dobra, e o que a pessoa veio fazer é entrar. */
@media (max-width: 991px) {
    .split-left { display: none !important; }
    .split-right { padding: 28px 22px; }
}