/* ==========================================================================
   Arquivo:
   autenticacao/static/autenticacao/css/login.css

   Objetivo:
   Definir os estilos exclusivos da tela de autenticação da Extranet ESBSP.

   Escopo:
   Este arquivo é responsável pela identidade visual da tela de login,
   incluindo:
   - Layout da página;
   - Painel esquerdo (Hero);
   - Painel direito (Login);
   - Formulário de autenticação;
   - Seletor de idiomas;
   - Mensagens de validação;
   - Responsividade da tela.

   Importante:
   Este arquivo deve conter apenas estilos relacionados à autenticação.
   Estilos compartilhados entre toda a Extranet (tipografia, componentes,
   variáveis de cores, formulários, botões, etc.) deverão futuramente ser
   centralizados no módulo Core para reutilização pelos demais módulos do
   sistema.
========================================================================== */

*,
*::before,
*::after{

    box-sizing:border-box;

}

html,
body{

    margin:0;
    padding:0;
    height:100%;
    overflow:hidden;

}

.container-fluid{

    padding:0;

}

.row{

    margin:0;
     height:100vh;

}


/* ==========================================================
   PAINEL ESQUERDO
========================================================== */

.painel-esquerdo{
    flex:7;
    height:100%;
    min-width:0;

    position:relative;

    background-image:

        linear-gradient(
            90deg,
            rgba(0,0,0,.90) 0%,
            rgba(0,0,0,.78) 25%,
            rgba(0,0,0,.40) 48%,
            rgba(0,0,0,.08) 70%,
            rgba(0,0,0,0) 100%
        ),

        url("../images/fundo-new.png");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

}

.painel-esquerdo::after{

    content:"";

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    height:170px;

    pointer-events:none;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.35) 0%,
        rgba(0,0,0,.20) 45%,
        rgba(0,0,0,0) 100%
    );

    z-index:1;

}


.layout-login{

    display:flex;

    height:100vh;
    height:100dvh;

    width:100vw;

    overflow:hidden;

}



/* ==========================================================
   HERO
========================================================== */

.hero{

    position:relative;

    min-height:100vh;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    padding:25px 70px 20px;

    overflow:hidden;

    z-index:2;

}


.hero-content,
.hero-footer,
.hero-logo{

    position:relative;

    z-index:1;

}


/* ==========================================================
   LOGO
========================================================== */

.hero-logo{

    margin-bottom:80px;

}

.hero-logo img{

    width:190px;

    height:auto;

}


/* ==========================================================
   TEXTO
========================================================== */

.hero-content{

    margin-top:-40px;

}

.hero-title{

    color:#FFF;

    font-size:2rem;

    font-weight:800;

    line-height:1.1;

    margin-bottom:15px;

}

.hero-divider{

    width:110px;

    height:4px;

    background:#D71920;

    border-radius:50px;

    margin-bottom:20px;

}

.hero-description{

    color:#FFF;

    font-size:0.9rem;

    line-height:1.8;

    font-weight:400;

    max-width:420px;

    margin-bottom:35px;

}


/* ==========================================================
   LISTA
========================================================== */
.hero-item-text{

    display:flex;

    flex-direction:column;

    justify-content:center;

    color:#FFF;

    line-height:1.15;

}

.hero-item-text strong{

    font-size:1.12rem;

    font-weight:600;

    text-shadow:0 2px 6px rgba(0,0,0,.65);

}

.hero-item-text span{

    margin-top:3px;

    font-size:.82rem;

    font-style:italic;

    font-weight:400;

    color:rgba(255,255,255,.82);

    text-shadow:0 2px 6px rgba(0,0,0,.65);

}

.hero-list li i{

    width:46px;

    height:46px;

    min-width:46px;

    border:1px solid rgba(255,255,255,.45);

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;

    color:#FFF;

    background:rgba(255,255,255,.03);

    text-shadow:0 2px 6px rgba(0,0,0,.65);

    box-shadow:
        0 2px 8px rgba(0,0,0,.18),
        inset 0 1px 1px rgba(255,255,255,.08);

    flex-shrink:0;

}

.hero-list li{

    display:flex;

    align-items:center;

    gap:18px;

    padding:22px 0;

    border-bottom:1px solid rgba(255,255,255,.12);

}
/* ==========================================================
   RODAPÉ
========================================================== */

.hero-footer{

    display:flex;

    justify-content:flex-start;

    align-items:flex-start;

    gap:55px;

    margin-top:35px;

    margin-left:10px;

}

.hero-footer > div{

    display:flex;

    align-items:flex-start;

    gap:14px;

    min-width:180px;

    flex-shrink:0;

}

.hero-footer i{

    color:#FFF;

    font-size:22px;

    margin-top:2px;

    width:24px;

    text-align:center;

    flex-shrink:0;

    text-shadow:0 2px 6px rgba(0,0,0,.65);

}


.footer-text{

    display:flex;

    flex-direction:column;

    color:#FFF;

    line-height:1.15;

    text-shadow:0 2px 8px rgba(0,0,0,.75);

}

.footer-text strong{

    font-size:1rem;

    font-weight:600;

}

.footer-text span{

    margin-top:3px;

    font-size:.80rem;

    font-style:italic;

    font-weight:400;

    color:rgba(255,255,255,.85);

}

/* ==========================================================
   PAINEL DIREITO
========================================================== */

.painel-direito{
    flex:5;
    height:100%;
    min-width:0;

    background:#C8102E;

    display:flex;

    justify-content:center;

    align-items:center;

    position:relative;

    overflow:hidden;

    padding:clamp(20px, 3vw, 50px);

}

/* ==========================================================
   FUNDO DECORATIVO
========================================================== */

.painel-direito::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(circle at top left,
        rgba(255,255,255,.12),
        transparent 32%),

        radial-gradient(circle at bottom right,
        rgba(255,255,255,.08),
        transparent 35%);

    opacity:.45;

}

/* ==========================================================
   CARD
========================================================== */

.login-card{

    position:relative;

    z-index:2;

    width:100%;

    max-width:540px;

    background:#FFF;

    border-radius:30px;

    padding:35px 42px;

    box-shadow:
        0 20px 60px rgba(0,0,0,.20);

}

/* ==========================================================
   HEADER
========================================================== */

.login-header{

    display:flex;

    flex-direction:column;

    margin-bottom:35px;

}

.login-logo{

    text-align:center;

}

.login-logo img{

    width:190px;
    margin-bottom:50px;
}

.login-title{

    color:#222;

    font-size:1.2rem;

    font-weight:700;

    margin:0;

    text-align:left;

}

/* ==========================================================
   DIVISOR DO TÍTULO
========================================================== */

.login-title-divider{

    width:90px;

    height:3px;

    background:#C8102E;

    border-radius:50px;

    margin:12px 0 0;

}

/* ==========================================================
   BODY
========================================================== */

.login-body{

    margin-bottom:30px;

}

.form-group{

    margin-bottom:16px;

}

.form-label{

    display:block;

    color:#222;

    font-size:0.90rem;

    font-weight:500;

    margin-bottom:10px;

}

.form-label span{

    font-style:italic;

    color:#666;

    font-weight:400;

    margin-left:4px;

}

/* ==========================================================
   INPUT PERSONALIZADO
========================================================== */

.login-input{

    position:relative;

    width:100%;

    margin-top:10px;

}

/* Ícones da esquerda */

.login-input > i{

    position:absolute;

    left:22px;

    top:50%;

    transform:translateY(-50%);

    color:#555;

    font-size:18px;

    z-index:2;

}

.login-input input{

    width:100%;

    height:56px;

    border:1px solid #D9D9D9;

    border-radius:16px;

    padding-left:62px;

    padding-right:60px;

    font-size:.95rem;

    font-family:'Lato',sans-serif;

    color:#333;

    transition:.25s;

}

.login-input input:focus{

    outline:none;

    border-color:#C8102E;

    box-shadow:0 0 0 4px rgba(200,16,46,.10);

}

.login-input input::placeholder{

    color:#8A8A8A;

    font-style:italic;

    font-size:.92rem;

    opacity:1;

}


/* ==========================================================
   BOTÃO VISUALIZAR SENHA
========================================================== */

.btn-visualizar{

    position:absolute;

    top:50%;

    right:18px;

    transform:translateY(-50%);

    width:24px;

    height:24px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:none;

    background:transparent;

    padding:0;

    margin:0;

    cursor:pointer;

    color:#555;

    z-index:10;

    transition:.20s;

}


.btn-visualizar i{

    position:static;

    transform:none;

    font-size:20px;

    color:inherit;

}

.btn-visualizar:hover{

    color:#C8102E;

}

.form-control{

    width:100%;

    height:55px;

    border:1px solid #DDD;

    border-radius:16px !important;

    font-size:.90rem;

    padding-left:65px;

    padding-right:70px;

    transition:.25s;

    font-family:'Lato',sans-serif;

}

.form-control::placeholder{

    color:#8A8A8A;

    font-size:.88rem;

    font-weight:400;

    opacity:1;

}

.form-control:focus{

    border-color:#C8102E;

    outline:none;

    box-shadow:0 0 0 4px rgba(200,16,46,.12);

}



/* ==========================================================
   BOTÃO LOGIN
========================================================== */

.btn-login{

    width:100%;

    height:45px;

    border:none;

    border-radius:16px;

    background:#C8102E;

    color:#FFF;

    font-size:1.10rem;

    font-weight:700;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:8px;

    transition:.25s;

    margin-top:12px;

    cursor:pointer;

}

.btn-login span{

    font-size:.95rem;

    font-weight:400;

    font-style:italic;

    opacity:.90;

}

.btn-login:hover{

    background:#B10E28;

}


/* ==========================================================
   ESQUECI MINHA SENHA
========================================================== */

.link-recuperar{

    display:block;

    text-align:center;

    text-decoration:none;

    color:#C8102E;

    font-size:.98rem;

    font-weight:600;

    margin-top:22px;

    transition:.25s;

}

.link-recuperar:hover{

    color:#A20D25;

    text-decoration:underline;

}

.link-recuperar span{

    font-size:.88rem;

    font-style:italic;

    font-weight:400;

    color:#666;

    margin-left:4px;

}

/* ==========================================================
   DROPDOWN IDIOMA
========================================================== */

.idioma-dropdown{

    position:absolute;

    top:18px;

    right:18px;

    z-index:100;

}

.idioma-btn{

    width:102px;

    height:35px;

    padding:0 12px;

    border:1px solid #D8D8D8;

    border-radius:14px;

    background:#FFF;

    box-shadow:0 4px 12px rgba(0,0,0,.08);

    display:flex;

    align-items:center;

    font-size:.78rem;

    font-weight:600;

    color:#222;

}

.idioma-btn:hover,
.idioma-btn:focus{

    background:#FFF;

    color:#222;

    border-color:#D8D8D8;

    box-shadow:0 4px 12px rgba(0,0,0,.08);

}

.idioma-btn img{

    width:17px;

    height:17px;

    border-radius:50%;

    margin-right:8px;

}

.idioma-btn::after{

    margin-left:auto;

    font-size:.72rem;

}

.idioma-menu{

    width:102px !important;

    min-width:102px !important;

    padding:6px;

    border-radius:14px;

    border:1px solid #E5E5E5;

    box-shadow:0 10px 20px rgba(0,0,0,.10);

}

.idioma-menu .dropdown-item{

    display:flex;

    align-items:center;

    gap:8px;

    border-radius:10px;

    font-size:.78rem;

    font-weight:500;

    padding:8px 10px;

}

.idioma-menu .dropdown-item:hover{

    background:#F5F5F5;

}

.idioma-menu img{

    width:17px;

    height:17px;

    border-radius:50%;

}

/* =============================================================
VALIDAÇÃO
===================================================================*/
.campo-erro{


    display:none;

    color:#dc3545;

    font-size:.85rem;

    margin-top:5px;
    margin-left: 25px;

}

.input-erro{

    border-color:#dc3545 !important;

}

/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 991.98px){

    .painel-direito{

        flex:1 1 100%;

    }

    .login-logo{

        text-align:left;

    }

    .login-logo img{

        width:170px;

        margin-bottom:35px;

    }

}

/* ==========================================================
   DISPOSITIVOS COM INTERAÇÃO POR TOQUE

   Celulares e tablets utilizam somente o painel de autenticação,
   independentemente do tamanho ou da resolução da tela. O painel
   institucional permanece reservado aos dispositivos desktop.
========================================================== */

@media (hover: none) and (pointer: coarse){

    .painel-esquerdo{

        display:none !important;

    }

    .painel-direito{

        flex:1 1 100%;
        width:100%;

    }

}

/* Fallback para tablets que se identificam como desktop no navegador. */

.dispositivo-toque .painel-esquerdo{

    display:none !important;

}

.dispositivo-toque .painel-direito{

    flex:1 1 100%;
    width:100%;

}

/* ==========================================================
   CELULARES EM ORIENTAÇÃO VERTICAL

   O formulário utiliza praticamente toda a largura disponível e inicia no
   topo da área útil. As medidas são fluidas e independem do modelo do
   aparelho.
========================================================== */

@media (max-width: 575.98px){

    html,
    body{

        min-height:100%;
        overflow:auto;

    }

    .layout-login{

        min-height:100vh;
        min-height:100dvh;
        height:auto;
        overflow:visible;

    }

    .painel-direito{

        width:100%;
        min-height:100vh;
        min-height:100dvh;
        height:auto;
        align-items:center;
        overflow-y:auto;
        padding:12px;

    }

    .login-card{

        width:100%;
        max-width:none;
        min-width:0;
        margin:auto;
        border-radius:24px;
        padding:24px 22px;

    }

    .idioma-dropdown{

        top:14px;
        right:14px;

    }

    .idioma-btn,
    .idioma-menu{

        width:92px !important;
        min-width:92px !important;

    }

    .login-header{

        margin-bottom:24px;

    }

    .login-logo img{

        width:140px;
        margin-bottom:34px;

    }

    .login-body{

        width:100%;
        margin-bottom:0;

    }

    .login-input,
    .login-input input,
    .form-control,
    .btn-login{

        width:100%;
        min-width:0;

    }

    .login-input input,
    .form-control{

        height:52px;

    }

    .link-recuperar{

        margin-top:18px;

    }

}

/* ==========================================================
   CELULAR E TABLET EM ORIENTAÇÃO HORIZONTAL

   Em telas móveis com pouca altura, o painel institucional é ocultado
   para preservar a área útil do formulário. O conteúdo permanece o mesmo
   e pode rolar verticalmente quando a barra do navegador reduzir a viewport.
========================================================== */

@media (orientation: landscape) and (max-width: 1199.98px){

    html,
    body{

        min-height:100%;
        overflow:auto;

    }

    .layout-login{

        min-height:100vh;
        min-height:100dvh;
        height:auto;
        overflow:visible;

    }

    .painel-esquerdo{

        display:none !important;

    }

    .painel-direito{

        flex:1 1 100%;
        width:100%;
        min-height:100vh;
        min-height:100dvh;
        height:auto;
        overflow-y:auto;
        padding:16px 24px;

    }

    .login-card{

        width:100%;
        max-width:620px;

    }

}

/* ==========================================================
   CELULAR EM ORIENTAÇÃO HORIZONTAL COM POUCA ALTURA
========================================================== */

@media (orientation: landscape) and (max-height: 600px){

    .painel-direito{

        align-items:center;
        padding:
            max(6px, env(safe-area-inset-top))
            max(12px, env(safe-area-inset-right))
            max(6px, env(safe-area-inset-bottom))
            max(12px, env(safe-area-inset-left));

    }

    .login-card{

        max-width:900px;
        border-radius:18px;
        padding:10px 18px;
        display:grid;
        grid-template-columns:minmax(135px, .7fr) minmax(0, 2fr);
        align-items:center;
        column-gap:22px;

    }

    .idioma-dropdown{

        top:8px;
        right:10px;

    }

    .idioma-btn{

        width:84px;
        height:30px;
        padding:0 9px;

    }

    .idioma-menu{

        width:84px !important;
        min-width:84px !important;

    }

    .login-header{

        min-width:0;
        margin:0;
        padding-right:4px;

    }

    .login-logo img{

        width:108px;
        margin-bottom:10px;

    }

    .login-title{

        font-size:.9rem;

    }

    .login-title-divider{

        width:72px;
        margin-top:5px;

    }

    .login-body{

        min-width:0;
        padding-top:20px;
        margin-bottom:0;

    }

    .form-group{

        margin-bottom:4px;

    }

    .form-label{

        margin-bottom:2px;
        font-size:.78rem;

    }

    .login-input{

        margin-top:2px;

    }

    .login-input input,
    .form-control{

        height:38px;
        border-radius:11px !important;
        font-size:.84rem;

    }

    .btn-login{

        height:36px;
        margin-top:5px;
        border-radius:11px;
        font-size:.95rem;

    }

    .link-recuperar{

        margin-top:4px;
        font-size:.82rem;
        white-space:normal;

    }

    .link-recuperar span{

        font-size:.78rem;

    }

}