/*
|--------------------------------------------------------------------------
| Padrão Visual Oficial do SED
|--------------------------------------------------------------------------
|
| Referência: navegador em 100%.
| Este arquivo deve ser utilizado em todas as telas completas do sistema.
|
*/

:root {
    --sed-conteudo-maximo: 1180px;

    --sed-texto-base: 16px;
    --sed-texto-auxiliar: 15px;

    --sed-titulo-pagina: 38px;
    --sed-titulo-secao: 27px;
    --sed-titulo-card: 20px;

    --sed-altura-campo: 52px;
    --sed-altura-botao: 52px;

    --sed-raio-card: 20px;
    --sed-raio-campo: 13px;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body.sed-page {
    font-size: var(--sed-texto-base);
}

body.sed-page input,
body.sed-page select,
body.sed-page textarea {
    font-size: 16px !important;
}

body.sed-page input,
body.sed-page select {
    min-height: var(--sed-altura-campo) !important;
}

body.sed-page button,
body.sed-page .botao {
    min-height: var(--sed-altura-botao) !important;

    font-size: 16px !important;
}

body.sed-page label {
    font-size: 16px !important;
}


/*
|--------------------------------------------------------------------------
| Login
|--------------------------------------------------------------------------
|
| O Login atual passa a ser a referência de proporção.
| Aqui são normalizados apenas os campos e botões.
|
*/

body.sed-page-login input {
    height: 52px !important;
}

body.sed-page-login button {
    min-height: 52px !important;
}


/*
|--------------------------------------------------------------------------
| Configuração da segurança da conta
|--------------------------------------------------------------------------
*/

@media (min-width: 901px) {
    body.sed-page-security .cabecalho {
        min-height: 96px !important;
    }

    body.sed-page-security .cabecalho-conteudo {
        width: min(92vw, 1180px) !important;
        min-height: 96px !important;
    }

    body.sed-page-security .marca {
        gap: 15px !important;
    }

    body.sed-page-security .marca-sed {
        width: 58px !important;
        height: 58px !important;

        border-radius: 16px !important;

        font-size: 18px !important;
    }

    body.sed-page-security .marca-nome {
        font-size: 22px !important;
    }

    body.sed-page-security .marca-subtitulo {
        margin-top: 4px !important;

        font-size: 15px !important;
    }

    body.sed-page-security .voltar {
        min-height: 46px !important;

        padding: 0 18px !important;

        font-size: 15px !important;
    }

    body.sed-page-security .pagina {
        width: min(92vw, 1120px) !important;

        margin: 25px auto 45px !important;
    }

    body.sed-page-security .apresentacao {
        padding: 26px 30px !important;

        border-radius: 20px !important;
    }

    body.sed-page-security .apresentacao h1 {
        font-size: 38px !important;
    }

    body.sed-page-security .apresentacao p {
        max-width: 760px !important;

        margin-top: 12px !important;

        font-size: 17px !important;
        line-height: 1.55 !important;
    }

    body.sed-page-security .etiqueta {
        margin-bottom: 9px !important;

        font-size: 13px !important;
    }

    body.sed-page-security .grade {
        margin-top: 20px !important;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(280px, .42fr) !important;

        gap: 18px !important;
    }

    body.sed-page-security .card {
        padding: 26px !important;

        border-radius: 19px !important;
    }

    body.sed-page-security .card h2 {
        font-size: 26px !important;
    }

    body.sed-page-security .descricao {
        margin-top: 9px !important;

        font-size: 16px !important;
        line-height: 1.55 !important;
    }

    body.sed-page-security .status {
        margin-top: 18px !important;

        padding: 16px !important;

        border-radius: 14px !important;
    }

    body.sed-page-security .status-label {
        font-size: 14px !important;
    }

    body.sed-page-security .status strong {
        margin-top: 5px !important;

        font-size: 20px !important;
    }

    body.sed-page-security .formulario {
        margin-top: 20px !important;
    }

    body.sed-page-security .campo {
        margin-bottom: 16px !important;
    }

    body.sed-page-security .campo label {
        margin-bottom: 7px !important;

        font-size: 16px !important;
    }

    body.sed-page-security .campo input {
        height: 52px !important;

        padding: 0 15px !important;

        border-radius: 13px !important;
    }

    body.sed-page-security .botao {
        min-height: 50px !important;

        padding: 0 20px !important;

        border-radius: 13px !important;

        font-size: 16px !important;
    }

    body.sed-page-security .qr {
        margin: 20px auto !important;

        padding: 16px !important;

        border-radius: 16px !important;
    }

    body.sed-page-security .qr svg {
        width: 205px !important;
    }

    body.sed-page-security .passos {
        margin-top: 18px !important;

        padding-left: 23px !important;

        font-size: 16px !important;
        line-height: 1.55 !important;
    }

    body.sed-page-security .passos li + li {
        margin-top: 5px !important;
    }

    body.sed-page-security .observacao {
        margin-top: 16px !important;

        font-size: 15px !important;
        line-height: 1.55 !important;
    }

    body.sed-page-security .codigos {
        margin-top: 18px !important;

        gap: 9px !important;
    }

    body.sed-page-security .codigo {
        padding: 11px !important;

        font-size: 15px !important;
    }

    body.sed-page-security .acoes {
        margin-top: 19px !important;

        gap: 10px !important;
    }
}


/*
|--------------------------------------------------------------------------
| Código de autenticação em dois fatores
|--------------------------------------------------------------------------
*/

@media (min-width: 801px) {
    body.sed-page-2fa {
        padding: 20px !important;
    }

    body.sed-page-2fa .pagina {
        width: min(92vw, 880px) !important;

        grid-template-columns:
            minmax(270px, .76fr)
            minmax(0, 1.24fr) !important;

        border-radius: 22px !important;
    }

    body.sed-page-2fa .institucional {
        padding: 34px !important;
    }

    body.sed-page-2fa .sed {
        width: 60px !important;
        height: 60px !important;

        border-radius: 16px !important;

        font-size: 18px !important;
    }

    body.sed-page-2fa .institucional h1 {
        margin: 45px 0 14px !important;

        font-size: 32px !important;
        line-height: 1.12 !important;
    }

    body.sed-page-2fa .institucional p {
        font-size: 16px !important;
        line-height: 1.55 !important;
    }

    body.sed-page-2fa .conteudo {
        padding: 34px 38px !important;
    }

    body.sed-page-2fa .etiqueta {
        margin-bottom: 9px !important;

        font-size: 13px !important;
    }

    body.sed-page-2fa h2 {
        font-size: 34px !important;
    }

    body.sed-page-2fa .descricao {
        margin: 12px 0 20px !important;

        font-size: 16px !important;
        line-height: 1.55 !important;
    }

    body.sed-page-2fa .bloco {
        padding: 18px 0 !important;
    }

    body.sed-page-2fa .bloco h3 {
        margin-bottom: 6px !important;

        font-size: 20px !important;
    }

    body.sed-page-2fa .bloco p {
        margin-bottom: 13px !important;

        font-size: 15px !important;
        line-height: 1.5 !important;
    }

    body.sed-page-2fa input {
        height: 52px !important;

        padding: 0 15px !important;

        border-radius: 13px !important;

        font-size: 17px !important;
    }

    body.sed-page-2fa button {
        min-height: 50px !important;

        margin-top: 11px !important;

        border-radius: 13px !important;

        font-size: 16px !important;
    }

    body.sed-page-2fa .voltar {
        margin-top: 14px !important;

        font-size: 15px !important;
    }

    body.sed-page-2fa .erro {
        margin-top: 6px !important;

        font-size: 14px !important;
    }
}


/*
|--------------------------------------------------------------------------
| Mesa de Trabalho
|--------------------------------------------------------------------------
*/

@media (min-width: 901px) {
    body.sed-page-dashboard .cabecalho {
        min-height: 96px !important;
    }

    body.sed-page-dashboard .cabecalho-conteudo {
        min-height: 96px !important;
    }

    body.sed-page-dashboard h1 {
        font-size: 38px !important;
    }

    body.sed-page-dashboard .painel h2 {
        font-size: 27px !important;
    }

    body.sed-page-dashboard .painel-introducao {
        font-size: 16px !important;
        line-height: 1.55 !important;
    }

    body.sed-page-dashboard .sed-indicador-titulo {
        font-size: 16px !important;
    }

    body.sed-page-dashboard .sed-indicador-numero {
        font-size: 20px !important;
    }

    body.sed-page-dashboard .area-titulo {
        font-size: 20px !important;
    }

    body.sed-page-dashboard .area-descricao {
        font-size: 16px !important;
        line-height: 1.5 !important;
    }

    body.sed-page-dashboard .area-status {
        font-size: 14px !important;
    }

    body.sed-page-dashboard .seguranca-conteudo strong {
        font-size: 17px !important;
    }

    body.sed-page-dashboard .seguranca-conteudo span {
        font-size: 15px !important;
    }
}


/*
|--------------------------------------------------------------------------
| Demais telas completas
|--------------------------------------------------------------------------
*/

@media (min-width: 901px) {
    body.sed-page-standard main:first-of-type {
        width: min(92vw, var(--sed-conteudo-maximo)) !important;

        margin: 28px auto 48px !important;
    }

    body.sed-page-standard h1 {
        font-size: var(--sed-titulo-pagina) !important;
    }

    body.sed-page-standard h2 {
        font-size: var(--sed-titulo-secao) !important;
    }

    body.sed-page-standard h3 {
        font-size: var(--sed-titulo-card) !important;
    }

    body.sed-page-standard p {
        font-size: var(--sed-texto-base) !important;
        line-height: 1.55 !important;
    }
}


/*
|--------------------------------------------------------------------------
| Celulares e tablets
|--------------------------------------------------------------------------
*/

@media (max-width: 900px) {
    body.sed-page input,
    body.sed-page select,
    body.sed-page button,
    body.sed-page .botao {
        min-height: 52px !important;
    }

    body.sed-page-security .pagina {
        margin-top: 20px !important;
    }

    body.sed-page-security .card {
        padding: 24px 20px !important;
    }

    body.sed-page-security .apresentacao {
        padding: 25px 21px !important;
    }

    body.sed-page-security .apresentacao h1 {
        font-size: 34px !important;
    }

    body.sed-page-2fa .pagina {
        width: min(96vw, 680px) !important;
    }

    body.sed-page-2fa .institucional,
    body.sed-page-2fa .conteudo {
        padding: 28px 23px !important;
    }

    body.sed-page-2fa .institucional h1 {
        margin-top: 34px !important;

        font-size: 30px !important;
    }

    body.sed-page-2fa h2 {
        font-size: 30px !important;
    }
}