/* =====================================================
   SIVI LOGIN 2026
   ===================================================== */

/* CORES */
:root{
--primary: #334155;
--primary-dark: #1E293B;

    --bg: #F8FAFC;
    --card: #FFFFFF;

    --text: #1E293B;
    --text-light: #64748B;

    --border: #E2E8F0;
}

/* BASE */
html,
body{
    height:100%;
    margin:0;
    font-family: Inter, Segoe UI, sans-serif;
}

/* CENTRALIZAÇÃO */
body.page-sidebar.page-background{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:20px !important;
}

/* FUNDO */
body.page-background{
    background:
        radial-gradient(
            circle at top left,
            rgba(15,118,110,.10),
            transparent 40%
        ),
        radial-gradient(
            circle at bottom right,
            rgba(20,184,166,.08),
            transparent 40%
        ),
        #F8FAFC !important;
}

/* REMOVE CAIXAS EXTERNAS */
.container,
.login-container,
.login-box,
.row{
    background:transparent !important;
    box-shadow:none !important;
}

/* CONTAINER */
.container{
    width:100%;
    max-width:520px;
}

/* CARD */
.card-container{

    background:#FCFFFE  !important;

    border:1px solid var(--border);

    border-radius:24px !important;

    padding:40px !important;

    box-shadow:
        0 20px 40px rgba(15,23,42,.08),
        0 4px 12px rgba(15,23,42,.04);

    width:100%;
}

/* LOGO */
.profile-img-card{
    width:110px;
    height:auto;

    display:block;
    margin:0 auto 20px auto;
}

/* TÍTULO */
.login-title{
    text-align:center;
    color:var(--text);
    font-size:28px;
    font-weight:700;
    margin-bottom:8px;
}

/* SUBTÍTULO */
.login-subtitle{
    text-align:center;
    color:var(--text-light);
    font-size:14px;
    margin-bottom:30px;
}

/* INPUTS */
.form-control{

    height:52px;

    border-radius:12px !important;

    border:1px solid var(--border) !important;

    background:#FFFFFF !important;

    color:var(--text) !important;

    font-size:15px;

    padding-left:15px;

    margin-bottom:15px;

    transition:all .2s ease;
}

/* PLACEHOLDER */
.form-control::placeholder{
    color:#94A3B8 !important;
}

/* FOCO */
.form-control:focus{

    border-color:var(--primary) !important;

    box-shadow:
        0 0 0 4px rgba(15,118,110,.12) !important;

    outline:none;
}

/* BOTÃO */
.btn-signin{

    height:54px;

    border:none !important;

    border-radius:12px !important;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--primary-dark)
        ) !important;

    color:#FFF !important;

    font-size:16px;

    font-weight:600;

    transition:all .25s ease;
}

/* HOVER */
.btn-signin:hover{

    transform:translateY(-2px);

    box-shadow:
        0 10px 25px rgba(15,118,110,.25);
}

/* LINKS */
a{
    color:var(--primary) !important;
    text-decoration:none;
}

a:hover{
    color:var(--primary-dark) !important;
}

/* LEMBRAR */
#txtremember{
    color:var(--text-light);
    font-size:14px;
}

/* ALERTAS */
.alert-message{

    border:none !important;

    border-radius:12px !important;
}

/* MOBILE */
@media (max-width:768px){

    body.page-sidebar.page-background{
        padding:15px !important;
    }

    .container{
        width:100% !important;
        max-width:100% !important;
    }

    .card-container{

        width:calc(100vw - 30px) !important;

        max-width:none !important;

        padding:30px 25px !important;

        border-radius:20px !important;
    }

    .profile-img-card{
        width:95px;
        margin-bottom:15px;
    }

    .form-control{
        height:54px;
        font-size:16px;
    }

    .btn-signin{
        height:54px;
        font-size:17px;
    }
}

/* MOBILE PEQUENO */
@media (max-width:480px){

    .card-container{
        padding:25px 20px !important;
    }

    .profile-img-card{
        width:85px;
    }
}