/*
 * COE Soluções e Cálculos — Tela de Login
 * Self-contained: define as próprias variáveis para funcionar em qualquer host
 * (COE.App carrega coe.css separado; COE.Web usa só este arquivo na tela de login)
 */

:root {
    --login-primary:    #1565C0;
    --login-primary-dk: #0D47A1;
    --login-primary-lt: #1E88E5;
    --login-primary-bg: #E3F2FD;
    --login-white:      #FFFFFF;
    --login-bg:         #F5F5F5;
    --login-text:       #212121;
    --login-text-muted: #757575;
    --login-border:     #BDBDBD;
    --login-error:      #C62828;
    --login-error-bg:   #FFEBEE;
    --login-shadow:     0 4px 20px rgba(0, 0, 0, 0.12);
    --login-radius:     8px;
    --login-transition: 0.2s ease;
}

/* Wrapper de página inteira — centra o card vertical e horizontalmente */
.login-page-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    width: 100vw;
    background: var(--login-bg);
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 14px;
    color: var(--login-text);
}

/* Card central */
.login-card {
    background: var(--login-white);
    border-radius: var(--login-radius);
    box-shadow: var(--login-shadow);
    padding: 40px 36px;
    width: 100%;
    max-width: 380px;
}

/* Logo / marca */
.login-logo {
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    color: var(--login-primary-dk);
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.login-logo-sub {
    text-align: center;
    font-size: 11px;
    color: var(--login-text-muted);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 28px;
}

/* Título "Entrar" */
.login-titulo {
    font-size: 18px;
    font-weight: 600;
    color: var(--login-text);
    margin-bottom: 20px;
    text-align: center;
}

/* Mensagem de erro */
.login-erro {
    background: var(--login-error-bg);
    color: var(--login-error);
    border-left: 3px solid var(--login-error);
    border-radius: 4px;
    padding: 10px 12px;
    font-size: 13px;
    margin-bottom: 16px;
}

/* Grupo de campo (label + input) */
.login-campo {
    margin-bottom: 16px;
}

.login-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--login-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
}

/* Wrapper do campo de senha com botão olho */
.login-senha-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.login-senha-wrapper .login-input {
    padding-right: 42px; /* espaço pro botão */
}

.login-olho {
    position: absolute;
    right: 10px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--login-text-muted);
    padding: 4px;
    display: flex;
    align-items: center;
    transition: color var(--login-transition);
}

.login-olho:hover {
    color: var(--login-primary);
}

.login-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--login-border);
    border-radius: 6px;
    font-size: 14px;
    color: var(--login-text);
    background: var(--login-white);
    transition: border-color var(--login-transition), box-shadow var(--login-transition);
    box-sizing: border-box;
    outline: none;
}

.login-input:focus {
    border-color: var(--login-primary-lt);
    box-shadow: 0 0 0 3px rgba(30, 136, 229, 0.15);
}

.login-input::placeholder {
    color: var(--login-border);
}

/* Botão "Entrar" */
.login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 11px;
    background: var(--login-primary);
    color: var(--login-white);
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 8px;
    transition: background var(--login-transition), transform 0.1s;
}

.login-btn:hover:not(:disabled) {
    background: var(--login-primary-lt);
}

.login-btn:active:not(:disabled) {
    transform: scale(0.99);
}

.login-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Spinner inline no botão */
.login-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: var(--login-white);
    border-radius: 50%;
    animation: login-spin 0.65s linear infinite;
    flex-shrink: 0;
}

@keyframes login-spin {
    to { transform: rotate(360deg); }
}

/* Rodapé com link "Esqueci minha senha" */
.login-footer {
    text-align: center;
    margin-top: 18px;
}

.login-footer a {
    font-size: 13px;
    color: var(--login-primary);
    text-decoration: none;
}

.login-footer a:hover {
    text-decoration: underline;
}

/* Botão estilizado como link (usado em "Esqueci minha senha") */
.login-link-btn {
    background: none;
    border: none;
    padding: 0;
    font-size: 13px;
    color: var(--login-primary);
    cursor: pointer;
    text-decoration: none;
}

.login-link-btn:hover {
    text-decoration: underline;
}