/* Telas de acesso (login.aspx e EsqueciSenha.aspx) */

body.pagina-acesso {
    margin: 0;
    min-height: 100vh;
    background: #EEF3F1 none;
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    color: #2B3440;
}

.acesso-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
}

.acesso-card {
    width: 880px;
    max-width: 100%;
    display: flex;
    background: #FFFFFF;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(20, 50, 40, 0.10), 0 2px 6px rgba(20, 50, 40, 0.06);
    overflow: hidden;
    text-align: left;
}

.acesso-form {
    flex: 1 1 50%;
    padding: 44px 48px;
    min-height: 470px;
    box-sizing: border-box;
}

.acesso-marca {
    flex: 1 1 50%;
    background: #F6F9F8;
    border-left: 1px solid #E3EAE7;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px;
    box-sizing: border-box;
}

.acesso-marca img.logo { width: 260px; height: auto; }
.acesso-marca .sistema { margin: 20px 0 0; font-size: 13px; color: #6B7682; text-align: center; }

.acesso-form h1 { margin: 0 0 6px; font-size: 24px; font-weight: 600; color: #1F2A36; }
.acesso-form .subtitulo { margin: 0 0 26px; font-size: 14px; color: #6B7682; }

.acesso-form .rotulo,
.acesso-form label.rotulo {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #3A4552;
    margin: 0 0 6px;
}

/* Seletor Profissional | Empresa (RadioButtonList com RepeatLayout="Flow") */
.segmentado {
    display: flex;
    background: #EEF2F1;
    border-radius: 10px;
    padding: 4px;
    margin-bottom: 24px;
}
.segmentado input { position: absolute; opacity: 0; width: 0; height: 0; }
.segmentado label {
    flex: 1;
    text-align: center;
    padding: 9px 0;
    font-size: 14px;
    border-radius: 8px;
    cursor: pointer;
    color: #4A5562;
}
.segmentado input:checked + label {
    background: #FFFFFF;
    color: #1351B4;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10);
}
.segmentado input:focus + label { outline: 2px solid #1351B4; outline-offset: 1px; }

.campo { margin-bottom: 16px; }
/* O MegaTextBox envolve o input num span inline-block; faz ocupar a largura toda */
.acesso-form .campo > span { display: block !important; width: 100% !important; }
.acesso-form input[type="text"],
.acesso-form input[type="password"],
.acesso-form select {
    width: 100% !important;
    height: 42px;
    padding: 0 12px;
    border: 1px solid #CBD5D1;
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    color: #1F2A36;
    background: #FFFFFF;
    box-sizing: border-box;
}
.acesso-form input[type="text"]:focus,
.acesso-form input[type="password"]:focus,
.acesso-form select:focus {
    outline: none;
    border-color: #1351B4;
    box-shadow: 0 0 0 3px rgba(19, 81, 180, 0.15);
}

.captcha-wrapper { margin: 4px 0 18px; }

.texto-apoio { font-size: 14px; color: #4A5562; line-height: 1.5; margin: 0 0 18px; }

/* Botao principal (mesma cor do gov.br) */
.btn-primario,
.btn-primario:link,
.btn-primario:visited {
    display: block;
    width: 100%;
    height: 44px;
    border: none;
    border-radius: 8px;
    background: #1351B4;
    color: #FFFFFF !important;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    text-decoration: none !important;
}
.btn-primario:hover { background: #0C326F; }

.btn-secundario {
    display: block;
    width: 100%;
    height: 42px;
    margin-top: 10px;
    border: 1px solid #CBD5D1;
    border-radius: 8px;
    background: #FFFFFF;
    color: #3A4552;
    font-family: inherit;
    font-size: 14px;
    cursor: pointer;
}
.btn-secundario:hover { background: #F3F6F5; }

.link-centro,
.link-centro:link,
.link-centro:visited {
    display: block;
    text-align: center;
    margin-top: 14px;
    font-size: 13px;
    color: #1351B4 !important;
    text-decoration: none;
}
.link-centro:hover { text-decoration: underline; }

/* Botao padrao "Entrar com gov.br" */
.btn-govbr,
.btn-govbr:link,
.btn-govbr:visited {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 46px;
    padding: 0 16px;
    background-color: #1351B4;
    color: #FFFFFF !important;
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-size: 15px;
    text-decoration: none !important;
    cursor: pointer;
    box-sizing: border-box;
}
.btn-govbr:hover { background-color: #0C326F; }
.btn-govbr:focus { outline: 3px solid #FFCD07; outline-offset: 2px; }
.btn-govbr-logo {
    font-size: 18px;
    font-weight: bold;
    letter-spacing: -0.5px;
    line-height: 24px;
    padding-right: 12px;
    margin-right: 12px;
    border-right: 1px solid rgba(255, 255, 255, 0.6);
}
.btn-govbr-texto strong { font-weight: bold; }

.ajuda { margin: 16px 0 0; font-size: 13px; color: #6B7682; }
.ajuda a { color: #1351B4; text-decoration: none; }
.ajuda a:hover { text-decoration: underline; }

.divisor {
    display: flex;
    align-items: center;
    margin: 22px 0;
    font-size: 12px;
    color: #8A949E;
}
.divisor:before,
.divisor:after { content: ""; flex: 1; border-top: 1px solid #E3EAE7; }
.divisor span { padding: 0 10px; }

.captcha-imagem { display: block; margin: 0 0 10px; border: 1px solid #E3EAE7; border-radius: 6px; }

/* Redes sociais */
.redes {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid #E3EAE7;
}
.redes a { display: flex; align-items: center; opacity: 0.9; }
.redes a:hover { opacity: 1; }
.redes img { height: 24px; width: auto; border: 0; }

@media (max-width: 760px) {
    .acesso-card { flex-direction: column-reverse; }
    .acesso-marca { border-left: none; border-bottom: 1px solid #E3EAE7; padding: 24px; }
    .acesso-marca img.logo { width: 180px; }
    .acesso-form { padding: 28px 24px; min-height: 0; }
}
