/*
 * Tema Spark — telas de login, cadastro e senha (layout-guest).
 *
 * Mesma ideia do spark.css: só desenho, sobre a marcação de sempre
 * (`login_wrapper`, `login_form`, `input-text`, `btn-theme`). Toda regra
 * começa em `body.tema-spark` — ver App\Support\TemaDoPainel.
 */

body.tema-spark {
    /* As cores da empresa — os valores são os do Spark original; o layout
       imprime logo depois as da empresa (App\Support\CoresDoPainel). */
    --spark-primaria: #072F1F;
    --spark-primaria-rgb: 7, 47, 31;
    --spark-primaria-forte: #051C12;
    --spark-primaria-texto: #0D6B45;
    --spark-sobre-primaria: #FFFFFF;
    --spark-sobre-primaria-rgb: 255, 255, 255;
    --spark-secundaria: #B4F105;
    --spark-secundaria-rgb: 180, 241, 5;
    --spark-secundaria-no-claro: #9BCF04;
    --spark-texto: #0B130F;
    --spark-texto-suave: #6C7E75;
    --spark-borda-campo: rgba(11, 19, 15, 0.12);

    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    letter-spacing: -0.01em;
    -webkit-font-smoothing: antialiased;
    background: var(--spark-primaria);
}

/* Fundo escuro inteiro, com os brilhos do Spark */
body.tema-spark .login_wrapper {
    background-color: var(--spark-primaria);
    overflow: hidden;
}
body.tema-spark .login_wrapper:before {
    height: 100%;
    background:
        radial-gradient(520px 520px at 12% 18%, rgba(var(--spark-secundaria-rgb), 0.18), transparent 70%),
        radial-gradient(600px 600px at 90% 85%, rgba(var(--spark-secundaria-rgb), 0.12), transparent 70%),
        linear-gradient(160deg, var(--spark-primaria-forte) 0%, var(--spark-primaria) 100%);
}
body.tema-spark .login_wrapper:after {
    height: 100%;
    background-image: radial-gradient(rgba(var(--spark-sobre-primaria-rgb), 0.05) 1px, transparent 1px);
    background-size: 22px 22px;
    z-index: 1;
    pointer-events: none;
}
body.tema-spark .login_wrapper > div {
    z-index: 2;
}

body.tema-spark .loader {
    background: rgba(var(--spark-primaria-rgb), 0.97);
}
body.tema-spark .loader_div {
    border-color: rgba(var(--spark-sobre-primaria-rgb), 0.15);
    border-top-color: var(--spark-secundaria);
}

/* A logo fica sobre o fundo escuro, como na faixa do clássico */
body.tema-spark a.logo_text {
    margin-bottom: 1.75rem;
}
body.tema-spark a.logo_text span {
    background: transparent;
}

/* Cartão */
body.tema-spark .login_wrapper .login_form .login_form_inner {
    padding: 2.25rem 2rem;
    border-radius: 24px;
    background: #FFFFFF;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.6);
}
body.tema-spark .login_wrapper .login_form:not(.forgot_password) .login_form_inner:before {
    content: none;
}
body.tema-spark .login_wrapper .login_form h3 {
    font-family: inherit;
    color: var(--spark-texto);
    letter-spacing: -0.025em;
}
body.tema-spark .login_wrapper .login_form h3 span {
    color: var(--spark-primaria-texto);
}
body.tema-spark .login_wrapper .login_form h3:after {
    height: 3px;
    width: 36px;
    border-radius: 3px;
    background: var(--spark-secundaria-no-claro);
}
body.tema-spark .login_wrapper .login_form .login_form_inner p,
body.tema-spark .login_wrapper .login_form .login_form_inner p a {
    color: var(--spark-texto-suave);
}

/* Abas Login / Cadastro */
body.tema-spark ul.login_tab li a {
    color: var(--spark-texto-suave);
    font-size: 0.85rem;
    letter-spacing: 0.06em;
}
body.tema-spark ul.login_tab li a.active {
    color: var(--spark-texto);
    border-bottom: 2px solid var(--spark-secundaria-no-claro);
}

/* Campos */
body.tema-spark .login_wrapper .login_form .input-text {
    height: 48px;
    padding: 0.6rem 1rem;
    border: 1px solid var(--spark-borda-campo);
    border-radius: 14px;
    background: #FFFFFF;
    color: var(--spark-texto);
    font-family: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
body.tema-spark .login_wrapper .login_form .input-text:focus {
    border-color: var(--spark-primaria);
    box-shadow: 0 0 0 3px rgba(var(--spark-primaria-rgb), 0.15);
}
body.tema-spark .login_wrapper .login_form .input-text::placeholder {
    color: var(--spark-texto-suave);
    opacity: 0.6;
}
body.tema-spark .login_wrapper .login_form .form-check-label,
body.tema-spark .login_wrapper .login_form .checkbox a {
    color: var(--spark-texto-suave);
    font-weight: 600;
}
body.tema-spark .login_wrapper .login_form .checkbox a:hover {
    color: var(--spark-primaria-texto);
}
body.tema-spark .login_wrapper .login_form .form-check label::before {
    border-radius: 5px;
    border-color: var(--spark-borda-campo);
}
body.tema-spark .login_wrapper .login_form input[type="checkbox"]:checked + label::before {
    background-color: var(--spark-primaria);
    border-color: var(--spark-primaria);
}

/* Botão principal: largo, dentro do cartão (no clássico é um círculo na borda) */
body.tema-spark .login_wrapper .login_form .btn-md,
body.tema-spark .login_wrapper .login_form:not(.forgot_password) .btn-md {
    position: static;
    width: 100%;
    height: 50px;
    margin: 0.25rem 0 0;
    padding: 0 1.25rem;
    border-radius: 14px;
    font-family: inherit;
    letter-spacing: 0.02em;
    text-transform: none;
    font-size: 0.95rem;
}
body.tema-spark .login_wrapper .login_form .btn-theme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    background: var(--spark-primaria);
    color: var(--spark-sobre-primaria);
    transition: background-color 0.2s ease, transform 0.2s ease;
}
body.tema-spark .login_wrapper .login_form .btn-theme i {
    color: var(--spark-secundaria);
    transition: transform 0.2s ease;
}
body.tema-spark .login_wrapper .login_form .btn-theme:hover {
    background: var(--spark-primaria-forte);
    color: var(--spark-sobre-primaria);
    box-shadow: 0 12px 30px rgba(var(--spark-primaria-rgb), 0.3);
}
body.tema-spark .login_wrapper .login_form .btn-theme:hover i {
    transform: translateX(3px);
}

body.tema-spark .login_wrapper .alert {
    border-radius: 12px;
    font-size: 0.875rem;
}

/* "Faça login com": sem a linha, sobre o fundo escuro */
body.tema-spark .or_text:after {
    content: none;
}
body.tema-spark .or_text span {
    background: transparent;
    color: rgba(var(--spark-sobre-primaria-rgb), 0.65);
}
body.tema-spark .social-list li a {
    border-radius: 12px;
}