/* Valores abaixo são só o padrão de fallback — login.php/assinar.php
   sobrescrevem --cor-primaria/--cor-botao-* com o que estiver salvo em
   ConfiguracaoVisual (mesma fonte de admin-cores.php), num <style>
   inline no <head>, igual Layout::abrir() faz no shell logado. */
:root {
    --cor-primaria: #14b8a6;
    --cor-botao-inicio: #14b8a6;
    --cor-botao-fim: #0d9488;
    --cor-botao-hover: #0f766e;
    --cor-formulario: #ffffff;
    --cor-borda: #d7dbe0;
    --fundo-neutro: #f4f5f7;
    --texto: #1c2b33;
    --texto-suave: #6b7680;
}

* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    margin: 0;
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    color: var(--texto);
    background: var(--fundo-neutro);
}

.tela {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
}

.conteudo {
    width: 100%;
    max-width: 26rem;
}

/* ---------- Cabeçalho / marca ---------- */

.marca {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
    text-decoration: none;
}

.marca-logo {
    width: 150px;
    height: auto;
}

.marca-subtitulo {
    text-align: center;
    color: var(--texto-suave);
    font-size: 0.95rem;
    margin: 0 0 2.5rem;
}

.boas-vindas {
    text-align: center;
    color: var(--cor-primaria);
    font-size: 1.4rem;
    font-weight: 600;
    margin: 0 0 2rem;
}

/* ---------- Formulário ---------- */

.erro {
    background: #fdecec;
    border: 1px solid #f3b8b8;
    color: #a02323;
    font-size: 0.9rem;
    border-radius: 8px;
    padding: 0.7rem 0.9rem;
    margin-bottom: 1.5rem;
}

.campo {
    margin-bottom: 1.4rem;
}

.campo label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--texto);
}

.campo-input {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--cor-formulario);
    border: 1px solid var(--cor-borda);
    border-radius: 8px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.campo-input:focus-within {
    border-color: var(--cor-primaria);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cor-primaria) 18%, transparent);
}

.campo-input .icone-esquerda {
    display: flex;
    padding-left: 0.85rem;
    color: var(--texto-suave);
}

.campo-input input {
    flex: 1;
    width: 100%;
    padding: 0.75rem 0.85rem;
    font-size: 1rem;
    font-family: inherit;
    color: var(--texto);
    background: transparent;
    border: none;
    border-radius: 8px;
}

.campo-input input:focus {
    outline: none;
}

.campo-input input::placeholder {
    color: #b7bfc6;
}

.botao-olho {
    display: flex;
    background: none;
    border: none;
    padding: 0.5rem 0.85rem;
    margin-right: 0.25rem;
    border-radius: 8px;
    cursor: pointer;
    color: var(--texto-suave);
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.botao-olho:hover {
    background: color-mix(in srgb, var(--cor-primaria) 12%, transparent);
    color: var(--cor-primaria);
    transform: scale(1.08);
}

.botao-entrar {
    width: 100%;
    padding: 0.85rem 1rem;
    font-size: 1rem;
    font-weight: 600;
    font-family: inherit;
    color: #fff;
    background: linear-gradient(135deg, var(--cor-botao-inicio), var(--cor-botao-fim));
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    margin-top: 0.5rem;
}

.botao-entrar:hover {
    background: var(--cor-botao-hover);
    transform: translateY(-1px);
    box-shadow: 0 10px 20px -10px color-mix(in srgb, var(--cor-primaria) 60%, transparent);
}

.botao-entrar:disabled {
    opacity: 0.7;
    cursor: default;
}

.link-esqueci {
    display: block;
    text-align: center;
    margin-top: 1.5rem;
    color: var(--cor-primaria);
    font-size: 0.9rem;
    text-decoration: none;
    cursor: not-allowed;
    opacity: 0.75;
}

.campo-ajuda {
    margin: 0.4rem 0 0;
    font-size: 0.8rem;
    color: var(--texto-suave);
}

.rodape-alternativa {
    text-align: center;
    margin: 1.5rem 0 0;
    font-size: 0.9rem;
    color: var(--texto-suave);
}

.rodape-alternativa a {
    color: var(--cor-primaria);
    font-weight: 600;
    text-decoration: none;
}

.rodape-alternativa a:hover {
    text-decoration: underline;
}

/* Honeypot: precisa existir no DOM e ser submetido, mas nunca ser visto nem
   focado por uma pessoa — por isso não usa display:none (alguns bots ignoram
   campos escondidos assim e o campo perderia a função). */
.isca {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
    }
}
