/* ==========================================================================
   Login: card de vidro claro sobre a malha (malha.css). O vidro vem da classe .vidro (malha.css); aqui ficam forma, sombra e campos. Só consome os tokens do malha.css (nenhuma cor literal aqui).
   ========================================================================== */
.login-tela {
    min-height: 100vh; min-height: 100dvh;
    display: flex; align-items: center; justify-content: center;
    padding: var(--esp-5) var(--esp-4);
}

.login-card {
    position: relative;
    width: 100%; max-width: 26rem;
    padding: 2.75rem 2.5rem 2.25rem;
    background: linear-gradient(160deg, var(--malha-vidro-forte) 0%, var(--malha-vidro) 46%, var(--malha-vidro-fraco) 100%);
    border: 1.5px solid var(--malha-borda-card);
    border-radius: 24px;
    box-shadow:
        0 0 0 1px var(--malha-contorno-card),
        0 40px 90px -20px var(--malha-sombra-forte),
        0 12px 32px -12px var(--malha-sombra-suave),
        inset 0 1px 0 var(--malha-brilho),
        inset 0 -1px 0 var(--malha-brilho-baixo);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .login-card { background: var(--malha-vidro-opaco); }
}

.login-logo { display: block; height: 46px; width: auto; margin: 0 auto 1.75rem; }
.login-card h1 {
    margin: 0 0 2rem; text-align: center;
    font-size: 1.65rem; line-height: 1.15; letter-spacing: -.02em; font-weight: 750; color: var(--cor-destaque-escuro);
}

.login-erro {
    margin-bottom: var(--esp-4); font-size: var(--texto-sm);
    background: var(--cor-destaque-claro); color: var(--cor-destaque-escuro); border-color: var(--malha-campo-borda);
}

.login-card .form-campo { margin-bottom: 1.15rem; gap: .4rem; }
.login-card .form-campo label { color: var(--cor-texto); font-size: var(--texto-sm); font-weight: 650; }

/* Campo com ícone à esquerda */
.campo-icone { position: relative; display: flex; align-items: center; }
.campo-icone-esq {
    position: absolute; left: .95rem; top: 50%; transform: translateY(-50%);
    width: 1.2rem; height: 1.2rem; color: var(--malha-tinta-suave); pointer-events: none;
    transition: color var(--duracao);
}
.login-card .campo-icone input {
    flex: 1; min-width: 0; width: 100%;
    padding: .85rem .95rem .85rem 2.85rem;
    font: inherit; color: var(--cor-texto);
    background: var(--malha-campo);
    border: 1px solid var(--malha-campo-borda);
    border-radius: 14px;
    box-shadow: inset 0 1px 2px var(--malha-campo-sombra), 0 1px 0 var(--malha-campo-realce);
    transition: border-color var(--duracao), box-shadow var(--duracao), background var(--duracao);
}
.login-card .campo-icone input::placeholder { color: var(--malha-tinta-suave); opacity: 1; }
.login-card .campo-icone input:hover { border-color: var(--malha-campo-borda-hover); }
.login-card .campo-icone input:focus {
    outline: none; background: var(--malha-campo-foco);
    border-color: var(--cor-destaque);
    box-shadow: var(--anel-foco-campo);
}
.campo-icone:focus-within .campo-icone-esq { color: var(--cor-destaque); }
.login-card .form-campo.com-erro .campo-icone input { border-color: var(--malha-campo-borda-hover); }
.login-card .form-campo.com-erro .campo-icone input:focus { border-color: var(--cor-destaque); }
.login-card .campo-senha input { padding-right: 3.2rem; }

.campo-senha-botao {
    position: absolute; top: 50%; right: .35rem; transform: translateY(-50%);
    width: 2.5rem; height: 2.5rem; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--malha-tinta-suave); background: transparent; border: 0; border-radius: 10px; cursor: pointer;
    transition: color var(--duracao), background var(--duracao);
}
.campo-senha-botao:hover { color: var(--cor-destaque-escuro); background: var(--malha-hover-suave); }
.campo-senha-botao:focus-visible { border-radius: 10px; }
.campo-senha-botao .icone { width: 1.25rem; height: 1.25rem; }
.campo-senha-botao .senha-ocultar,
.campo-senha-botao[aria-pressed="true"] .senha-mostrar { display: none; }
.campo-senha-botao[aria-pressed="true"] .senha-ocultar { display: inline-block; }

/* Botão em gradiente azul com brilho suave por baixo */
.login-card .login-entrar {
    margin-top: .25rem; padding: .95rem 1.2rem; min-height: 3rem;
    font-size: var(--texto-md); font-weight: 650; letter-spacing: .01em;
    color: var(--cor-superficie);
    background: linear-gradient(100deg, var(--cor-destaque) 0%, var(--cor-destaque-escuro) 100%);
    border: 0; border-radius: 14px;
    box-shadow: 0 14px 30px -10px var(--malha-botao-brilho), inset 0 1px 0 var(--malha-botao-realce);
    transition: transform var(--duracao), box-shadow var(--duracao), filter var(--duracao);
}
.login-card .login-entrar .icone { width: 1.15rem; height: 1.15rem; transition: transform var(--duracao); }
.login-card .login-entrar:hover:not(:disabled) {
    transform: translateY(-1px); filter: saturate(1.08) brightness(1.03);
    box-shadow: 0 18px 36px -10px var(--malha-botao-brilho-forte), inset 0 1px 0 var(--malha-botao-realce-forte);
}
.login-card .login-entrar:hover:not(:disabled) .icone { transform: translateX(3px); }
.login-card .login-entrar:focus-visible { outline: none; box-shadow: var(--anel-foco); }
.login-card .login-entrar:disabled { cursor: progress; opacity: .85; }

@media (max-width: 640px) {
    .login-tela { padding: var(--esp-4); }
    .login-card { padding: 2rem 1.35rem 1.75rem; border-radius: 20px; }
    .login-logo { height: 40px; margin-bottom: 1.35rem; }
    .login-card h1 { font-size: 1.45rem; margin-bottom: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .login-card .login-entrar, .login-card .login-entrar .icone, .campo-icone input { transition: none; }
    .login-card .login-entrar:hover:not(:disabled) { transform: none; }
}