/* ── CSS Variables (copiadas de base.css para uso standalone) ── */
:root {
    --login-bg:        #0f172a;
    --login-surface:   #1e293b;
    --login-border:    #334155;
    --login-text:      #f1f5f9;
    --login-muted:     #94a3b8;
    --login-label:     #cbd5e1;
    --login-input-bg:  #0f172a;
    --login-accent:    #0284c7;
    --login-accent-2:  #0ea5e9;
    --login-danger-bg: rgba(239, 68, 68, 0.1);
    --login-danger:    #ef4444;
    --login-danger-t:  #fca5a5;
}

body { font-family: 'Inter', sans-serif; background-color: var(--login-bg); color: var(--login-text); display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; padding: 20px; box-sizing: border-box;}
.login-box { background: var(--login-surface); padding: 40px; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); width: 100%; max-width: 400px; border-top: 5px solid var(--login-accent); }
.logo-area { text-align: center; margin-bottom: 20px; }
.logo-area i { font-size: 50px; color: var(--login-accent); }
h2 { margin: 0 0 5px 0; color: var(--login-text); font-size: 24px; text-align: center; }
p { text-align: center; color: var(--login-muted); font-size: 13px; margin-bottom: 30px; }
.input-group { margin-bottom: 20px; }
.input-group label { display: block; font-size: 12px; font-weight: bold; color: var(--login-label); margin-bottom: 8px; text-transform: uppercase; }
.input-group input { width: 100%; padding: 15px; background: var(--login-input-bg); border: 2px solid var(--login-border); color: var(--login-text); border-radius: 8px; box-sizing: border-box; font-size: 16px; transition: 0.2s;}
.input-group input:focus { border-color: var(--login-accent); outline: none; box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.3);}
.btn-login { width: 100%; background: var(--login-accent); color: white; border: none; padding: 16px; border-radius: 8px; font-size: 16px; font-weight: 800; cursor: pointer; transition: 0.2s; margin-top: 10px; box-shadow: 0 4px 10px rgba(2, 132, 199, 0.3);}
.btn-login:hover { background: var(--login-accent-2); box-shadow: 0 6px 14px rgba(2, 132, 199, 0.45); }
.btn-login:active { transform: scale(0.98); }
#btn-instalar-app-mobile { width: 100%; background: transparent; color: var(--login-accent); border: 2px solid var(--login-accent); padding: 14px; border-radius: 8px; font-weight: bold; font-size: 16px; cursor: pointer; transition: 0.2s; margin-top: 15px; display: none; }
#btn-instalar-app-mobile:hover { background: rgba(2, 132, 199, 0.1); }
.erro-box { background: var(--login-danger-bg); border-left: 4px solid var(--login-danger); color: var(--login-danger-t); padding: 15px; border-radius: 6px; font-size: 13px; margin-bottom: 20px; font-weight: bold; text-align: center;}
.sucesso-box { background: rgba(16, 185, 129, 0.1); border-left: 4px solid var(--color-success, #10b981); color: #065f46; padding: 15px; border-radius: 6px; font-size: 13px; margin-bottom: 20px; font-weight: bold; text-align: center;}

/* Password Toggle */
.input-password-wrap { position: relative; }
.input-password-wrap input { padding-right: 44px; }
.password-toggle { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--login-muted); padding: 4px; font-size: 15px; line-height: 1; transition: color 0.2s; display: flex; align-items: center; justify-content: center; }
.password-toggle:hover { color: var(--login-accent-2); }
.password-toggle:focus-visible { outline: 2px solid var(--login-accent); outline-offset: 2px; border-radius: 4px; }