:root{
    --dg-blue:#1459a6;
    --dg-blue-dark:#0b2f57;
    --dg-blue-soft:#eef5fb;
    --dg-text:#424d5c;
    --dg-border:#dbe6ef;
    --dg-bg:#f6f9fc;
    --white:#fff;
}
*{box-sizing:border-box} body{margin:0;font-family:Arial,sans-serif;background:var(--dg-bg);color:var(--dg-text)}
a{color:var(--dg-blue);text-decoration:none}.topbar{height:68px;background:var(--dg-blue-dark);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 28px}.brand{font-weight:700}.brand span{font-weight:400;opacity:.8;margin-left:8px}.userbox{display:flex;gap:16px;align-items:center}.userbox a{color:#fff}.shell{display:grid;grid-template-columns:230px 1fr;min-height:calc(100vh - 68px)}.sidebar{background:#fff;border-right:1px solid var(--dg-border);padding:22px;display:flex;flex-direction:column;gap:8px}.sidebar a,.sidebar span{padding:11px 12px;border-radius:8px}.sidebar a:hover{background:var(--dg-blue-soft)}.disabled{opacity:.45}.content{padding:30px}.card{background:#fff;border:1px solid var(--dg-border);border-radius:14px;box-shadow:0 5px 20px rgba(20,60,100,.05)}.grid.four{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:24px 0}.metric{padding:22px}.metric strong{font-size:32px;color:var(--dg-blue-dark);display:block}.metric span{font-size:14px}.section-card{padding:24px}.muted{color:#718096}.page-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.button,button{display:inline-block;background:var(--dg-blue);color:#fff;border:none;border-radius:8px;padding:11px 16px;cursor:pointer;font-weight:600}.button.secondary{background:#e8eef4;color:var(--dg-blue-dark)}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse}th,td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--dg-border)}th{font-size:13px;color:#667085;background:#fbfcfd}.badge{background:var(--dg-blue-soft);color:var(--dg-blue-dark);border-radius:999px;padding:5px 9px;font-size:12px}.form-card{padding:24px;max-width:1000px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.form-card label{display:block;font-size:13px;font-weight:700;margin:12px 0 6px}.form-card input,.form-card select,.form-card textarea{width:100%;border:1px solid var(--dg-border);border-radius:8px;padding:11px;background:#fff;color:var(--dg-text)}.form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}.login-wrap{min-height:calc(100vh - 68px);display:grid;place-items:center;padding:30px}.login-card{width:min(420px,100%);padding:30px}.login-card input{width:100%;margin:6px 0 14px;padding:12px;border:1px solid var(--dg-border);border-radius:8px}.login-card button{width:100%}.alert{padding:12px 14px;border-radius:8px;margin:12px 0}.alert.error{background:#fff1f1;color:#9b1c1c}.alert.success{background:#effaf3;color:#146c3b}@media(max-width:900px){.shell{grid-template-columns:1fr}.sidebar{display:none}.grid.four{grid-template-columns:1fr 1fr}.content{padding:20px}}@media(max-width:600px){.grid.four,.form-grid{grid-template-columns:1fr}.topbar{padding:0 16px}.userbox span{display:none}}
/* =========================================================
   DIGITAL GUAÍBA
   ÁREA DO CLIENTE - LOGIN
   ========================================================= */


/*
|--------------------------------------------------------------------------
| Estrutura geral
|--------------------------------------------------------------------------
*/

.dg-login-page {
    min-height: 100vh;

    display: grid;

    grid-template-columns:
        minmax(420px, 1.05fr)
        minmax(440px, 0.95fr);

    background: #f4f7fb;
}


/*
|--------------------------------------------------------------------------
| Coluna institucional azul
|--------------------------------------------------------------------------
*/

.dg-login-brand {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 100vh;

    padding: 70px;

    overflow: hidden;

    color: #ffffff;

    background:

        radial-gradient(
            circle at 20% 18%,
            rgba(59, 151, 224, 0.32),
            transparent 35%
        ),

        radial-gradient(
            circle at 90% 80%,
            rgba(36, 112, 172, 0.24),
            transparent 32%
        ),

        linear-gradient(
            145deg,
            #071f35 0%,
            #0c3154 42%,
            #124a79 100%
        );
}


/*
    Elementos decorativos.
    São feitos apenas com CSS,
    então não precisamos carregar imagens extras.
*/

.dg-login-brand::before {
    content: "";

    position: absolute;

    width: 460px;
    height: 460px;

    right: -230px;
    top: -180px;

    border-radius: 50%;

    border: 1px solid
        rgba(255, 255, 255, 0.09);
}


.dg-login-brand::after {
    content: "";

    position: absolute;

    width: 580px;
    height: 580px;

    left: -340px;
    bottom: -350px;

    border-radius: 50%;

    border: 1px solid
        rgba(255, 255, 255, 0.07);
}


.dg-login-brand-inner {
    position: relative;

    z-index: 2;

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

    margin: 0 auto;
}


/*
|--------------------------------------------------------------------------
| Logo branca
|--------------------------------------------------------------------------
*/

.dg-login-logo-white {
    display: block;

    width: 210px;
    max-width: 65%;

    height: auto;

    margin-bottom: 62px;
}


/*
|--------------------------------------------------------------------------
| Conteúdo institucional
|--------------------------------------------------------------------------
*/

.dg-login-label {
    display: inline-flex;

    margin-bottom: 18px;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 0.16em;

    text-transform: uppercase;

    color: #94c9f3;
}


.dg-login-brand h1 {
    max-width: 580px;

    margin:
        0
        0
        23px;

    font-size:
        clamp(
            38px,
            4vw,
            58px
        );

    line-height: 1.08;

    letter-spacing: -0.04em;

    color: #ffffff;
}


.dg-login-description {
    max-width: 530px;

    margin: 0;

    font-size: 16px;

    line-height: 1.8;

    color:
        rgba(
            255,
            255,
            255,
            0.76
        );
}


/*
|--------------------------------------------------------------------------
| Benefícios
|--------------------------------------------------------------------------
*/

.dg-login-benefits {
    display: grid;

    gap: 14px;

    margin-top: 38px;

    font-size: 14px;

    color:
        rgba(
            255,
            255,
            255,
            0.88
        );
}


.dg-login-benefits > div {
    display: flex;

    align-items: center;

    gap: 10px;
}


.dg-check {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    flex: 0 0 25px;

    width: 25px;
    height: 25px;

    border-radius: 50%;

    background:
        rgba(
            255,
            255,
            255,
            0.10
        );

    color: #a9d9ff;

    font-size: 12px;
    font-weight: 700;
}


.dg-login-brand-footer {
    margin-top: 64px;

    font-size: 12px;

    color:
        rgba(
            255,
            255,
            255,
            0.48
        );
}


/*
|--------------------------------------------------------------------------
| Área clara do formulário
|--------------------------------------------------------------------------
*/

.dg-login-form-area {
    position: relative;

    display: flex;

    align-items: center;
    justify-content: center;

    min-height: 100vh;

    padding: 55px 40px;

    background:

        radial-gradient(
            circle at 80% 10%,
            rgba(59, 126, 184, 0.08),
            transparent 30%
        ),

        #f5f8fb;
}


/*
|--------------------------------------------------------------------------
| Card do login
|--------------------------------------------------------------------------
*/

.dg-login-card {
    width: 100%;

    max-width: 470px;

    padding: 48px;

    border:
        1px solid
        #e5ebf1;

    border-radius: 22px;

    background: #ffffff;

    box-shadow:
        0
        28px
        70px
        rgba(
            25,
            56,
            87,
            0.10
        );
}


.dg-login-mobile-logo {
    display: none;
}


.dg-login-form-label {
    display: block;

    margin-bottom: 9px;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 0.12em;

    text-transform: uppercase;

    color: #3977ad;
}


.dg-login-card h2 {
    margin:
        0
        0
        10px;

    font-size: 34px;

    line-height: 1.15;

    letter-spacing: -0.025em;

    color: #163c60;
}


.dg-login-intro {
    margin:
        0
        0
        32px;

    font-size: 14px;

    line-height: 1.7;

    color: #778798;
}


/*
|--------------------------------------------------------------------------
| Campos
|--------------------------------------------------------------------------
*/

.dg-form-group {
    margin-bottom: 21px;
}


.dg-form-group label {
    display: block;

    margin-bottom: 8px;

    font-size: 13px;
    font-weight: 700;

    color: #34495e;
}


.dg-form-group input {
    width: 100%;

    min-height: 50px;

    padding:
        0
        15px;

    border:
        1px solid
        #dce4ed;

    border-radius: 9px;

    background: #fbfcfd;

    color: #263d52;

    font: inherit;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}


.dg-form-group input::placeholder {
    color: #a4afba;
}


.dg-form-group input:focus {
    outline: none;

    border-color: #3978ad;

    background: #ffffff;

    box-shadow:
        0
        0
        0
        4px
        rgba(
            57,
            120,
            173,
            0.10
        );
}


/*
|--------------------------------------------------------------------------
| Campo de senha
|--------------------------------------------------------------------------
*/

.dg-password-wrapper {
    position: relative;
}


.dg-password-wrapper input {
    padding-right: 55px;
}


.dg-password-toggle {
    position: absolute;

    top: 50%;
    right: 7px;

    transform:
        translateY(-50%);

    display: flex;

    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    padding: 0;

    border: 0;

    border-radius: 8px;

    background: transparent;

    cursor: pointer;

    opacity: 0.72;
}


.dg-password-toggle:hover {
    background: #eef4f8;

    opacity: 1;
}


/*
|--------------------------------------------------------------------------
| Lembrar + recuperar senha
|--------------------------------------------------------------------------
*/

.dg-login-actions {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 18px;

    margin:
        4px
        0
        26px;

    font-size: 13px;
}


.dg-remember {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    color: #6a7887;

    cursor: pointer;
}


.dg-remember input {
    width: 15px;
    height: 15px;

    accent-color: #174c78;
}


.dg-forgot-password {
    color: #3978ad;

    text-decoration: none;

    font-weight: 600;
}


.dg-forgot-password:hover {
    text-decoration: underline;
}


/*
|--------------------------------------------------------------------------
| Botão
|--------------------------------------------------------------------------
*/

.dg-login-submit {
    width: 100%;

    min-height: 52px;

    padding: 0 20px;

    border: 0;

    border-radius: 9px;

    background:
        linear-gradient(
            135deg,
            #174b78,
            #246ca3
        );

    color: #ffffff;

    font: inherit;

    font-size: 14px;
    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0
        10px
        28px
        rgba(
            26,
            77,
            119,
            0.17
        );

    transition:
        transform .15s ease,
        box-shadow .2s ease,
        filter .2s ease;
}


.dg-login-submit:hover {
    transform:
        translateY(-1px);

    box-shadow:
        0
        15px
        32px
        rgba(
            26,
            77,
            119,
            0.24
        );

    filter: brightness(1.04);
}


/*
|--------------------------------------------------------------------------
| Rodapé segurança
|--------------------------------------------------------------------------
*/

.dg-login-security {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 6px;

    margin-top: 27px;

    padding-top: 21px;

    border-top:
        1px solid
        #edf1f5;

    font-size: 12px;

    color: #8996a3;
}


/*
|--------------------------------------------------------------------------
| Mensagem de erro
|--------------------------------------------------------------------------
*/

.dg-login-alert {
    margin-bottom: 24px;
}


/*
|--------------------------------------------------------------------------
| Tablets
|--------------------------------------------------------------------------
*/

@media (max-width: 1050px) {

    .dg-login-page {
        grid-template-columns:
            0.9fr
            1fr;
    }


    .dg-login-brand {
        padding: 50px;
    }


    .dg-login-brand h1 {
        font-size: 42px;
    }


    .dg-login-card {
        padding: 40px;
    }

}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 820px) {

    .dg-login-page {
        display: block;

        min-height: 100vh;

        padding:
            28px
            18px
            45px;

        background:

            linear-gradient(
                180deg,
                #0c3154
                0,
                #124a79
                175px,
                #f4f7fb
                175px
            );
    }


    .dg-login-brand {
        display: none;
    }


    .dg-login-form-area {
        display: block;

        min-height: auto;

        padding: 0;

        background: transparent;
    }


    .dg-login-card {
        max-width: 500px;

        margin: 0 auto;

        padding:
            34px
            25px;

        border-radius: 18px;
    }


    .dg-login-mobile-logo {
        display: block;

        margin-bottom: 31px;

        text-align: center;
    }


    .dg-login-mobile-logo img {
        width: 165px;

        max-width: 65%;

        height: auto;
    }


    .dg-login-card h2 {
        font-size: 30px;
    }

}


/*
|--------------------------------------------------------------------------
| Mobile pequeno
|--------------------------------------------------------------------------
*/

@media (max-width: 460px) {

    .dg-login-page {
        padding:
            20px
            13px
            35px;
    }


    .dg-login-card {
        padding:
            29px
            20px;
    }


    .dg-login-actions {
        align-items: flex-start;

        flex-direction: column;

        gap: 12px;
    }


    .dg-login-submit {
        min-height: 50px;
    }

}
/* =========================================================
   AJUSTE LOGIN DG — CABER EM UMA TELA
   ========================================================= */

@media (min-width: 821px) {

    .dg-login-page {
        height: 100vh;
        min-height: 100vh;
        overflow: hidden;
    }


    /* COLUNA AZUL */

    .dg-login-brand {
        height: 100vh;
        min-height: 100vh;

        padding: 38px 60px;
    }


    .dg-login-brand-inner {
        max-width: 570px;
    }


    .dg-login-logo-white {
        width: 175px;

        margin-bottom: 35px;
    }


    .dg-login-label {
        margin-bottom: 13px;

        font-size: 11px;
    }


    .dg-login-brand h1 {
        max-width: 540px;

        margin-bottom: 18px;

        font-size: clamp(38px, 3.5vw, 52px);

        line-height: 1.08;
    }


    .dg-login-description {
        font-size: 14px;

        line-height: 1.65;
    }


    .dg-login-benefits {
        gap: 9px;

        margin-top: 24px;

        font-size: 13px;
    }


    .dg-check {
        width: 22px;
        height: 22px;

        flex-basis: 22px;
    }


    .dg-login-brand-footer {
        margin-top: 28px;

        font-size: 11px;
    }


    /* LADO DIREITO */

    .dg-login-form-area {
        height: 100vh;
        min-height: 100vh;

        padding: 28px 38px;
    }


    .dg-login-card {
        max-width: 470px;

        padding: 34px 42px;

        border-radius: 20px;
    }


    .dg-login-form-label {
        margin-bottom: 6px;

        font-size: 11px;
    }


    .dg-login-card h2 {
        margin-bottom: 7px;

        font-size: 32px;
    }


    .dg-login-intro {
        margin-bottom: 24px;

        font-size: 13px;

        line-height: 1.55;
    }


    .dg-form-group {
        margin-bottom: 16px;
    }


    .dg-form-group label {
        margin-bottom: 6px;
    }


    .dg-form-group input {
        min-height: 46px;
    }


    .dg-login-actions {
        margin-top: 2px;
        margin-bottom: 18px;
    }


    .dg-login-submit {
        min-height: 48px;
    }


    .dg-login-security {
        margin-top: 19px;

        padding-top: 16px;
    }

}