@charset "UTF-8";
/* Copyright (c) 1996 - 2026
.---------------------------------------------------------------------------.
| SGI - Sistema de Gestão Imagenet                                          |
| Version: 1.0                                                              |
| Release: 1.0                                                              |
| Contato: Imagenet Tecnologia (19) 3422-1523 / (19) 3422-4896              |
| Info: http://www.imagenet.com.br                                          |
| Suporte: robsonwr@imagenet.com.br                                         |
| ------------------------------------------------------------------------- |
| Admin: Robson W. Rissato (administrador de projeto)                       |
| Autor: Imagenet Tecnologia - robsonwr@imagenet.com.br                     |
| Copyright (c) 1996-2026, Todos os direitos reservados.                    |
| ------------------------------------------------------------------------- |
| License: Imagenet é uma marca registrada da empresa IMAGENET COMERCIO     |
| E SERVICOS LTDA ME conforme registro 819741655                            |
| O sistema SGI não poderá ser redistribuído sem autorização.               |
| Somente a Imagenet está autorizada a comercializar o Sistema de Gestão    |
| Imagenet - SGI.                                                           |
| Qualquer tentativa de comercialização do sistema está sujeito as          |
| penalidades legais, judiciais.                                            |
| O sistema é comercializado em comodato ( aluguel mensal ).                |
| ------------------------------------------------------------------------- |
| Arquivo : view/css/ImagenetLogin.css                                      |
| Versão  : 1.0                                                             |
| Alterado: 30/10/2026 14:40 - Robson W. Rissato                            |
'---------------------------------------------------------------------------'
*/

/* HISTÓRICO DE ALTERAÇÕES (mais recente primeiro)
 * 1.0 - 30/10/2026 14:40 - Criação: estilo da nova tela de login EMP (escopo .emp-login, não afeta outras telas)
 */

/* Fonte Barlow hospedada no proprio sistema (licenca OFL em fonts/Barlow-OFL.txt) */
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/barlow-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/barlow-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/barlow-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/barlow-semi-condensed-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/barlow-semi-condensed-latin-600-normal.woff2') format('woff2'); }

/* Identidade EMP: azul do logotipo + cobre do enrolamento */
.emp-login {
    --emp-azul: #005CA2;
    --emp-azul-escuro: #00477D;
    --emp-noite: #012B4D;
    --emp-cobre: #C2703D;
    --emp-cobre-claro: #E7A46F;
    --emp-grafite: #25303B;
    --emp-cinza: #5B6774;
    --emp-linha: #CBD3DC;

    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(380px, 34rem);
    min-height: 100vh;
    min-height: 100dvh;
    font-family: 'Barlow', 'Segoe UI', system-ui, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: normal;
    color: var(--emp-grafite);
    background: #fff;
}

/* ---------- Painel visual: anel de estator ---------- */
.emp-login-arte {
    position: relative;
    overflow: hidden;
    background: radial-gradient(120% 90% at 85% 50%, #024579 0%, var(--emp-noite) 62%);
}
.emp-login-anel {
    position: absolute;
    top: 50%;
    right: -60vh;
    width: 120vh;
    height: 120vh;
    transform: translateY(-50%);
}
.emp-login-estator {
    display: block;
    width: 100%;
    height: 100%;
    animation: emp-login-gira 1.6s cubic-bezier(.2, .7, .2, 1) both;
}
.emp-login-estator .emp-carcaca { fill: none; stroke: rgba(255, 255, 255, .06); stroke-width: 26; }
.emp-login-estator .emp-bobina { fill: url(#empCobre); }
.emp-login-estator .emp-dente { fill: rgba(255, 255, 255, .32); }
.emp-login-estator .emp-entreferro { fill: none; stroke: rgba(231, 164, 111, .35); stroke-width: 1.5; }

@keyframes emp-login-gira {
    from { opacity: 0; transform: rotate(-14deg); }
    to   { opacity: 1; transform: rotate(0); }
}

.emp-login-marca {
    position: absolute;
    left: clamp(24px, 4.5vw, 64px);
    bottom: clamp(24px, 6vh, 64px);
}
.emp-login-slogan {
    margin: 0;
    font-family: 'Barlow Semi Condensed', 'Barlow', 'Segoe UI', sans-serif;
    font-weight: 600;
    font-size: clamp(1.75rem, 2.8vw, 2.75rem);
    line-height: 1.08;
    color: #fff;
    max-width: 12ch;
    text-wrap: balance;
}
.emp-login-selo {
    margin: 14px 0 0;
    font-size: .95rem;
    font-weight: 500;
    color: var(--emp-cobre-claro);
}

/* ---------- Painel do formulario ---------- */
.emp-login-painel {
    display: flex;
    flex-direction: column;
    padding: clamp(28px, 5vh, 56px) clamp(24px, 4vw, 56px) 24px;
    background: #fff;
}
.emp-login-caixa {
    width: 100%;
    max-width: 22.5rem;
    margin: auto;
}
.emp-login-logo {
    display: block;
    height: 76px;
    width: auto;
    margin: 0 0 28px;
}
.emp-login-titulo {
    margin: 0 0 18px;
    font-family: 'Barlow Semi Condensed', 'Barlow', 'Segoe UI', sans-serif;
    font-weight: 600;
    font-size: 1.85rem;
    line-height: 1.15;
    color: var(--emp-grafite);
}
.emp-login .emp-login-texto { margin: 0 0 4px; color: var(--emp-cinza); }

.emp-login .emp-login-rotulo {
    display: block;
    margin: 16px 0 6px;
    font-size: .92rem;
    font-weight: 500;
    color: var(--emp-grafite);
}
.emp-login .emp-login-campo {
    display: block;
    width: 100%;
    height: 48px;
    padding: 0 14px;
    margin: 0;
    box-sizing: border-box;
    border: 1px solid var(--emp-linha);
    border-radius: 6px;
    background: #fff;
    font: 400 1rem/1 'Barlow', 'Segoe UI', system-ui, sans-serif;
    letter-spacing: normal;
    color: var(--emp-grafite);
    transition: border-color .15s, box-shadow .15s;
}
.emp-login .emp-login-campo:hover { border-color: #9AA7B5; }
.emp-login .emp-login-campo:focus {
    outline: none;
    border-color: var(--emp-azul);
    box-shadow: 0 0 0 3px rgba(0, 92, 162, .22);
    color: var(--emp-grafite);
}

.emp-login .emp-login-senha { position: relative; }
.emp-login .emp-login-senha .emp-login-campo { padding-right: 88px; }
.emp-login .emp-login-ver {
    position: absolute;
    top: 50%;
    right: 6px;
    height: 36px;
    padding: 0 10px;
    transform: translateY(-50%);
    border: 0;
    border-radius: 4px;
    background: transparent;
    font: 500 .88rem 'Barlow', 'Segoe UI', sans-serif;
    color: var(--emp-azul);
    cursor: pointer;
}
.emp-login .emp-login-ver:hover { background: #EEF4FA; }

.emp-login .emp-login-opcoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    margin: 16px 0 0;
}
.emp-login .emp-login-lembrar {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .92rem;
    color: var(--emp-cinza);
    cursor: pointer;
}
.emp-login .emp-login-lembrar input { width: 18px; height: 18px; margin: 0; accent-color: var(--emp-azul); }
.emp-login .emp-login-link,
.emp-login .emp-login-voltar {
    padding: 0;
    border: 0;
    background: none;
    font: 500 .92rem 'Barlow', 'Segoe UI', sans-serif;
    color: var(--emp-azul);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.emp-login .emp-login-voltar { display: inline-block; margin-top: 20px; }
.emp-login .emp-login-link:hover,
.emp-login .emp-login-voltar:hover { color: var(--emp-azul-escuro); }

.emp-login .emp-login-captcha { margin-top: 18px; }

.emp-login .emp-login-entrar {
    display: block;
    width: 100%;
    height: 50px;
    margin-top: 24px;
    border: 0;
    border-radius: 6px;
    background: var(--emp-azul);
    font: 600 1.12rem 'Barlow Semi Condensed', 'Barlow', 'Segoe UI', sans-serif;
    letter-spacing: .01em;
    color: #fff;
    cursor: pointer;
    transition: background .15s;
}
.emp-login .emp-login-entrar:hover { background: var(--emp-azul-escuro); }
.emp-login .emp-login-entrar:disabled { opacity: .7; cursor: progress; }

/* Foco visivel por teclado */
.emp-login .emp-login-ver:focus-visible,
.emp-login .emp-login-link:focus-visible,
.emp-login .emp-login-voltar:focus-visible,
.emp-login .emp-login-entrar:focus-visible,
.emp-login .emp-login-lembrar input:focus-visible {
    outline: 3px solid var(--emp-cobre);
    outline-offset: 2px;
}

/* Mensagens (as mesmas classes usadas pelo JavaScript do sistema) */
.emp-login .imagenet-campo-aviso:empty { display: none; }
.emp-login .imagenet-erro,
.emp-login .imagenet-sucesso {
    margin: 0 0 6px;
    padding: 10px 12px;
    border: 1px solid;
    border-radius: 6px;
    font-size: .92rem;
    line-height: 1.4;
    text-shadow: none;
    overflow: visible;
}
.emp-login .imagenet-erro:before,
.emp-login .imagenet-sucesso:before { display: none; }
.emp-login .imagenet-erro { background: #FCEDEC; border-color: #F2B8B5; color: #8C1D18; }
.emp-login .imagenet-sucesso { background: #E8F4EC; border-color: #A9D3B5; color: #1E5C34; }

.emp-login-rodape {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 16px;
    max-width: 22.5rem;
    width: 100%;
    margin: 40px auto 0;
    font-size: .8rem;
    color: #7A8692;
}

/* ---------- Telas menores ---------- */
@media (max-width: 860px) {
    .emp-login { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
    .emp-login-arte { height: 190px; }
    .emp-login-anel { width: 560px; height: 560px; right: -170px; }
    .emp-login-marca { left: 20px; bottom: 18px; }
    .emp-login-slogan { max-width: 14ch; }
    .emp-login-slogan { font-size: 1.35rem; }
    .emp-login-selo { margin-top: 6px; font-size: .85rem; }
    .emp-login-painel { padding: 28px 20px 20px; }
    .emp-login-caixa { margin: 0 auto; }
    .emp-login-rodape { margin-top: auto; padding-top: 32px; }
    .emp-login-logo { height: 60px; margin-bottom: 20px; }
}
@media (max-width: 420px) {
    .emp-login-arte { height: 150px; }
    .emp-login-anel { width: 440px; height: 440px; right: -150px; }
    .emp-login-slogan { font-size: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
    .emp-login-estator { animation: none; }
}