:root {
    --bg-color: #0f1115;
    --panel-bg: #1a1d24;
    --panel-2: #20242d;
    --primary: #007bff;
    --primary-hover: #0a68d6;
    --text-light: #f8f9fa;
    --text-muted: #adb5bd;
    --border: #2c3038;
    --success: #28a745;
    --deficit: #f53333;
    --blue: #52aaf7;
    --raio: 10px;
}

* { 
    margin: 0; padding: 0; 
    box-sizing: border-box; 
    -webkit-tap-highlight-color: transparent;
    font-family: 'Segoe UI', system-ui, Roboto, Helvetica, Arial, sans-serif; 
}

html, body { height: 100%; }

body {
    background:
        radial-gradient(900px 500px at 15% -10%, rgba(0, 123, 255, 0.16), transparent 60%),
        radial-gradient(700px 420px at 100% 110%, rgba(82, 170, 247, 0.10), transparent 60%),
        var(--bg-color);
    color: var(--text-light);
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px 16px;
}

.login-caixa {
    width: 100%;
    max-width: 420px;
    background: var(--panel-bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 36px 32px 30px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.login-marca { text-align: center; margin-bottom: 26px; }
.login-marca img { max-width: 190px; height: auto; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5)); }

.login-caixa h1 { font-size: 22px; font-weight: 600; margin-bottom: 6px; text-align: center; }
.login-sub { color: var(--text-muted); font-size: 14px; text-align: center; margin-bottom: 24px; line-height: 1.5; }

.campo { display: flex; flex-direction: column; margin-bottom: 16px; }
.campo label { font-size: 14px; color: var(--text-muted); margin-bottom: 7px; }

.campo input {
    width: 100%;
    background: var(--bg-color);
    border: 1px solid var(--border);
    color: var(--text-light);
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 15px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.campo input::placeholder { color: #6c757d; }
.campo input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(82, 170, 247, 0.18); }
.campo input[aria-invalid="true"] { border-color: var(--deficit); }

.campo-senha { position: relative; }
.campo-senha input { padding-right: 46px; }
.ver-senha {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    width: 36px; height: 36px; border: none; background: none; color: var(--text-muted);
    border-radius: 6px; cursor: pointer; display: grid; place-items: center;
}
.ver-senha:hover { color: var(--text-light); background: rgba(255, 255, 255, 0.06); }
.ver-senha:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.ver-senha svg { width: 20px; height: 20px; }

.botao {
    width: 100%;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 12px 18px;
    border-radius: 8px;
    font-size: 15px; font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}
.botao:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.botao:disabled { opacity: 0.65; cursor: not-allowed; }

.botao-primario { background: var(--primary); color: #fff; margin-top: 6px; }
.botao-primario:hover:not(:disabled) { background: var(--primary-hover); }

.botao-google { background: #fff; color: #1f1f1f; border-color: #dadce0; }
.botao-google:hover:not(:disabled) { background: #f4f5f7; }
.botao-google svg { width: 18px; height: 18px; flex: none; }

.separador { display: flex; align-items: center; gap: 12px; color: var(--text-muted); font-size: 13px; margin: 20px 0; }
.separador::before, .separador::after { content: ''; flex: 1; height: 1px; background: var(--border); }

.aviso {
    display: none;
    border-radius: 8px;
    padding: 11px 14px;
    font-size: 14px;
    line-height: 1.45;
    margin-bottom: 18px;
    border: 1px solid;
}
.aviso.visivel { display: block; }
.aviso.erro { background: rgba(245, 51, 51, 0.1); border-color: rgba(245, 51, 51, 0.45); color: #ff9a9a; }
.aviso.info { background: rgba(82, 170, 247, 0.1); border-color: rgba(82, 170, 247, 0.4); color: #a9d4fb; }
.aviso.ok   { background: rgba(40, 167, 69, 0.12); border-color: rgba(40, 167, 69, 0.45); color: #8fe0a4; }

.rodape-nota { margin-top: 22px; text-align: center; font-size: 12px; color: #7d848c; line-height: 1.5; }

.girando {
    width: 16px; height: 16px; border-radius: 50%;
    border: 2px solid currentColor; border-right-color: transparent;
    animation: gira 0.7s linear infinite;
}
@keyframes gira { to { transform: rotate(360deg); } }

.oculto { display: none !important; }

@media (max-width: 480px) {
    .login-caixa { padding: 28px 20px 24px; }
}
@media (prefers-reduced-motion: reduce) {
    .girando { animation-duration: 1.6s; }
}