/* ===================================================================
   PLATAFORMA DE GESTÃO
   LOGIN
   -------------------------------------------------------------------
   Bloco 1
   - Variáveis
   - Layout
   - Background
   - Painel Esquerdo
=================================================================== */

/* ================================================================
   PALETA DA PLATAFORMA
================================================================ */

:root{

    --pg-primary:#4F8EF7;
    --pg-primary-light:#EEF5FF;

    --pg-purple:#7C3AED;
    --pg-purple-light:#F6F1FF;

    --pg-orange:#F59E0B;
    --pg-orange-light:#FFF8EA;

    --pg-red:#EF4444;
    --pg-red-light:#FFF3F3;

    --pg-success:#16A34A;
    --pg-success-light:#EEFDF3;

    --pg-bg:#F6F8FC;

    --pg-surface:#FFFFFF;

    --pg-border:#E8EDF5;

    --pg-shadow:0 20px 45px rgba(15,23,42,.08);

    --pg-shadow-hover:0 28px 60px rgba(15,23,42,.12);

    --pg-radius:22px;

}

/* ================================================================
   LIGHT THEME
================================================================ */

[data-bs-theme="light"]{

    --pg-page-background:

        radial-gradient(circle at top left,
            rgba(79,142,247,.06),
            transparent 35%),

        radial-gradient(circle at bottom right,
            rgba(124,58,237,.05),
            transparent 35%),

        linear-gradient(
            180deg,
            #fbfcff,
            #f6f8fc);

}

/* ================================================================
   DARK THEME
================================================================ */

[data-bs-theme="dark"]{

    --pg-page-background:

        radial-gradient(circle at top left,
            rgba(79,142,247,.10),
            transparent 35%),

        radial-gradient(circle at bottom right,
            rgba(124,58,237,.08),
            transparent 35%),

        linear-gradient(
            180deg,
            #0f172a,
            #111827);

}

/* ================================================================
   BACKGROUND DA PÁGINA
================================================================ */

.main{

    background:var(--pg-page-background);

    overflow:hidden;

}

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

.pg-left-panel{

    position:relative;

}

/* textura */


/* brilho superior */

.pg-left-panel::after{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    border-radius:50%;

    top:-260px;

    left:-220px;

    background:

        radial-gradient(

            rgba(79,142,247,.12),

            transparent 70%

        );

    pointer-events:none;

}

/* ================================================================
   CONTAINER PRINCIPAL
================================================================ */

.pg-main-card{

    position:relative;

    border-radius:28px;

    overflow:hidden;

    box-shadow:var(--pg-shadow);

    transition:.30s ease;

}

.pg-main-card:hover{

    transform:translateY(-3px);

    box-shadow:var(--pg-shadow-hover);

}

/* ================================================================
   LIGHT
================================================================ */

[data-bs-theme="light"] .pg-main-card{

    background:

        linear-gradient(
            160deg,

            #ffffff,

            #fbfcff

        );

}

/* ================================================================
   DARK
================================================================ */

[data-bs-theme="dark"] .pg-main-card{

    background:

        linear-gradient(
            160deg,

            #182233,

            #111827

        );

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

}

/* ===================================================================
   PLATAFORMA DE GESTÃO
   LOGIN
   -------------------------------------------------------------------
   Bloco 2
   - Cabeçalho Institucional
   - Cards dos Módulos
   - Rodapé Institucional
===================================================================*/


/* ================================================================
   TÍTULOS
================================================================ */

.pg-main-card small{

    font-size:.78rem;

    font-weight:700;

    letter-spacing:.12rem;

    text-transform:uppercase;

}

.pg-main-card h1{

    font-weight:700;

    line-height:1.15;

    margin-bottom:1.5rem;

}

.pg-main-card p{

    line-height:1.8;

}


/* ================================================================
   MÓDULOS
================================================================ */

.pg-module{

    position:relative;

    overflow:hidden;

    border-radius:18px;

    padding:1.75rem;

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

    transition:all .28s ease;

    cursor:default;

}


/* brilho */

.pg-module::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            135deg,

            rgba(255,255,255,.28),

            transparent 55%

        );

    pointer-events:none;

}


/* hover */

.pg-module:hover{

    transform:translateY(-5px);

    box-shadow:0 18px 38px rgba(15,23,42,.10);

}


/* ================================================================
   CORES
================================================================ */

.pg-module-blue{

    background:var(--pg-primary-light);

}

.pg-module-purple{

    background:var(--pg-purple-light);

}

.pg-module-orange{

    background:var(--pg-orange-light);

}

.pg-module-red{

    background:var(--pg-red-light);

}


/* DARK */

[data-bs-theme="dark"] .pg-module{

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

}

[data-bs-theme="dark"] .pg-module-blue{

    background:#16263d;

}

[data-bs-theme="dark"] .pg-module-purple{

    background:#21193b;

}

[data-bs-theme="dark"] .pg-module-orange{

    background:#332613;

}

[data-bs-theme="dark"] .pg-module-red{

    background:#34181b;

}


/* ================================================================
   AVATAR DOS MÓDULOS
================================================================ */

.pg-module .avatar{

    width:52px;

    height:52px;

    transition:.25s;

}


.pg-module:hover .avatar{

    transform:scale(1.08);

}


/* ================================================================
   ÍCONES
================================================================ */

.pg-module .avatar-name{

    display:flex;

    align-items:center;

    justify-content:center;

}


.pg-module .avatar-name span{

    font-size:1.15rem;

}


/* ================================================================
   TÍTULO DO MÓDULO
================================================================ */

.pg-module h5{

    font-weight:600;

    font-size:22px;

    margin-bottom:12px;

}


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

.pg-module p{

    margin-top:.25rem;

    margin-bottom:0;

    line-height:1.65;

}


/* ================================================================
   RODAPÉ INSTITUCIONAL
================================================================ */

.pg-footer-panel{

    position:relative;

    overflow:hidden;

    border-radius:18px;

    padding:2rem;

}


/* LIGHT */

[data-bs-theme="light"] .pg-footer-panel{

    background:#F3F7FE;

    border:1px solid #E5ECF7;

}


/* DARK */

[data-bs-theme="dark"] .pg-footer-panel{

    background:#182233;

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

}


/* detalhe superior */

.pg-footer-panel::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:4px;

    background:

        linear-gradient(

            90deg,

            var(--pg-primary),

            var(--pg-purple),

            var(--pg-orange)

        );

}


/* ================================================================
   SUBTÍTULO
================================================================ */

.pg-footer-panel small{

    font-weight:700;

    letter-spacing:.10rem;

    text-transform:uppercase;

}


/* ================================================================
   TÍTULO
================================================================ */

.pg-footer-panel h4{

    font-weight:700;

    margin-top:.7rem;

    margin-bottom:1rem;

}


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

.pg-footer-panel p{

    margin-bottom:0;

    line-height:1.8;

}

/* ===================================================================
   PLATAFORMA DE GESTÃO
   LOGIN
   -------------------------------------------------------------------
   Bloco 3
   - Painel Login
   - Formulário
   - Inputs
   - Botões
===================================================================*/


/* ================================================================
   PAINEL LOGIN
================================================================ */

.pg-login-card{

    position:relative;

    border-radius:28px;

    overflow:hidden;

    box-shadow:var(--pg-shadow);

    transition:.30s ease;

    width:100%;

    max-width:560px;

}

.pg-login-card:hover{

    transform:translateY(-3px);

    box-shadow:var(--pg-shadow-hover);

}


/* ---------------- LIGHT ---------------- */

[data-bs-theme="light"] .pg-login-card{

    background:#FFFFFF;

}


/* ---------------- DARK ---------------- */

[data-bs-theme="dark"] .pg-login-card{

    background:#161C2D;

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

}


/* ================================================================
   CABEÇALHO LOGIN
================================================================ */

.pg-login-card img{

    transition:.30s;

}

.pg-login-card:hover img{

    transform:scale(1.02);

}

.pg-login-card h2{

    font-weight:700;

    margin-bottom:.5rem;

}

.pg-login-card p{

    line-height:1.7;

}


/* ================================================================
   FORMULÁRIO
================================================================ */

#form_cadastro{

    margin-top:2rem;

}


/* ================================================================
   LABELS
================================================================ */

#form_cadastro .form-label{

    font-size:.78rem;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.06rem;

    margin-bottom:.65rem;

}


/* ================================================================
   INPUTS
================================================================ */

#form_cadastro .form-control{

    border-radius:14px;

    min-height:50px;

    transition:.25s;

}


/* LIGHT */

[data-bs-theme="light"] #form_cadastro .form-control{

    border:1px solid #D9E2F0;

    background:#FFFFFF;

}


/* DARK */

[data-bs-theme="dark"] #form_cadastro .form-control{

    background:#1C2436;

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

    color:#F8FAFC;

}


/* ================================================================
   PLACEHOLDER
================================================================ */

#form_cadastro input::placeholder{

    opacity:.65;

}


/* ================================================================
   FOCUS
================================================================ */

#form_cadastro .form-control:focus{

    border-color:var(--pg-primary);

    box-shadow:

        0 0 0 .22rem rgba(79,142,247,.16);

}


/* ================================================================
   ÍCONES
================================================================ */

#form_cadastro .form-icon{

    color:#94A3B8;

}


/* ================================================================
   BOTÃO OLHO
================================================================ */

#form_cadastro [data-password-toggle]{

    color:#94A3B8;

}


/* ================================================================
   CHECKBOX
================================================================ */

#form_cadastro .form-check{

    user-select:none;

}

#form_cadastro .form-check-label{

    cursor:pointer;

}


/* ================================================================
   LINKS
================================================================ */

#form_cadastro a{

    text-decoration:none;

    transition:.2s;

}

#form_cadastro a:hover{

    color:var(--pg-primary);

}


/* ================================================================
   BOTÃO PRINCIPAL
================================================================ */

#form_cadastro .btn-primary{

    min-height:54px;

    border-radius:14px;

    font-weight:600;

    letter-spacing:.02rem;

    transition:.25s;

}


/* LIGHT */

[data-bs-theme="light"] #form_cadastro .btn-primary{

    box-shadow:

        0 10px 22px rgba(79,142,247,.20);

}


/* DARK */

[data-bs-theme="dark"] #form_cadastro .btn-primary{

    box-shadow:

        0 10px 24px rgba(59,130,246,.35);

}


/* Hover */

#form_cadastro .btn-primary:hover{

    transform:translateY(-2px);

}


/* ================================================================
   ALERTA
================================================================ */

#invalid .alert{

    border:none;

    border-radius:14px;

}


/* ================================================================
   SEPARADOR
================================================================ */

.pg-login-card hr{

    opacity:.08;

}


/* ================================================================
   PRIMEIRO ACESSO
================================================================ */

.pg-login-card .text-center small{

    font-size:.82rem;

}

.pg-login-card .text-center a{

    font-weight:600;

    text-decoration:none;

}


/* ================================================================
   VERSÃO
================================================================ */

.pg-login-version{

    opacity:.70;

    font-size:.85rem;

}

.pg-login-card .form-control{

    height:52px;

}

.pg-login-card .form-select{

    height:52px;

}

/* ===================================================================
   PLATAFORMA DE GESTÃO
   LOGIN
   -------------------------------------------------------------------
   Bloco 4
   - Footer
   - Responsividade
   - Dark Mode
   - Animações
===================================================================*/


/* ================================================================
   RODAPÉ DA PÁGINA
================================================================ */

.pg-login-version{

    text-align:center;

    margin-top:1.5rem;

    opacity:.65;

    font-size:.82rem;

    letter-spacing:.02rem;

}


/* ================================================================
   TRANSIÇÕES GERAIS
================================================================ */

.pg-main-card,
.pg-login-card,
.pg-module,
#form_cadastro .form-control,
#form_cadastro .btn{

    transition:

        background-color .30s ease,

        border-color .30s ease,

        color .30s ease,

        transform .25s ease,

        box-shadow .30s ease;

}


/* ================================================================
   ANIMAÇÃO DE ENTRADA
================================================================ */

.pg-main-card{

    animation:pgFadeLeft .7s ease;
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #fbfcff
        );

    border:1px solid #eef2f8;

}

.pg-login-card{

    animation:pgFadeRight .7s ease;
    background:#fff;
    border-radius:28px;
    box-shadow:
        0 25px 60px rgba(15,23,42,.08);

}

@keyframes pgFadeLeft{

    from{

        opacity:0;

        transform:

            translateX(-30px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

@keyframes pgFadeRight{

    from{

        opacity:0;

        transform:

            translateX(30px);

    }

    to{

        opacity:1;

        transform:none;

    }

}


/* ================================================================
   RESPEITAR USUÁRIOS QUE DESATIVAM ANIMAÇÕES
================================================================ */

@media (prefers-reduced-motion: reduce){

    *{

        animation:none !important;

        transition:none !important;

    }

}


/* ================================================================
   RESPONSIVIDADE
================================================================ */

@media (max-width:1399px){

    .pg-main-card .card-body{

        padding:3rem;

    }

}


@media (max-width:1200px){

    .pg-main-card h1{

        font-size:2.5rem;

    }

}


@media (max-width:991px){

    .pg-main-card{

        display:none;

    }

    .pg-login-card{

        margin:auto;

    }

}


@media (max-width:768px){

    .pg-login-card{

        border-radius:20px;

    }

    .pg-login-card .card-body{

        padding:2rem;

    }

}


@media (max-width:576px){

    .pg-login-card{

        box-shadow:none;

    }

    .pg-login-card .card-body{

        padding:1.5rem;

    }

}


/* ================================================================
   DARK MODE
================================================================ */

[data-bs-theme="dark"]{

    color-scheme:dark;

}

[data-bs-theme="dark"] .pg-login-version{

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

}

[data-bs-theme="dark"] .pg-main-card h1,
[data-bs-theme="dark"] .pg-main-card h4,
[data-bs-theme="dark"] .pg-main-card h5,
[data-bs-theme="dark"] .pg-login-card h2{

    color:#F8FAFC;

}

[data-bs-theme="dark"] .pg-main-card p,
[data-bs-theme="dark"] .pg-footer-panel p,
[data-bs-theme="dark"] .pg-module p,
[data-bs-theme="dark"] .pg-login-card p{

    color:#CBD5E1;

}

[data-bs-theme="dark"] .pg-main-card small,
[data-bs-theme="dark"] .pg-footer-panel small{

    color:#8CB8FF;

}

[data-bs-theme="dark"] #form_cadastro .form-label{

    color:#CBD5E1;

}

[data-bs-theme="dark"] hr{

    border-color:rgba(255,255,255,.08);

}


/* ================================================================
   SCROLLBAR
================================================================ */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-thumb{

    background:#CBD5E1;

    border-radius:30px;

}

::-webkit-scrollbar-thumb:hover{

    background:#94A3B8;

}


/* ================================================================
   SELEÇÃO DE TEXTO
================================================================ */

::selection{

    background:rgba(79,142,247,.25);

}


/* ================================================================
   HOVER DOS CARDS
================================================================ */

.pg-module:hover .avatar{

    transform:scale(1.08) rotate(-3deg);

}

.pg-module:hover h5{

    color:var(--pg-primary);

}


/* ================================================================
   DETALHE PREMIUM
================================================================ */

.pg-main-card::after{

    content:"";

    position:absolute;

    right:-140px;

    bottom:-140px;

    width:320px;

    height:320px;

    border-radius:50%;

    background:

        radial-gradient(

            rgba(79,142,247,.10),

            transparent 70%

        );

    pointer-events:none;

}


.pg-title-line{

    width:90px;

    height:4px;

    border-radius:10px;

    background:

        linear-gradient(
            90deg,

            #4F8EF7,

            #7C3AED,

            #EF4444,

            #F59E0B

        );

}





.pg-theme-toggle{

    position:fixed;

    top:34px;

    right:42px;

    z-index:9999;

}


.pg-theme-toggle .theme-control-toggle{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:var(--phoenix-body-bg);

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

    box-shadow:
        0 10px 30px rgba(15,23,42,.10);

    transition:all .25s ease;

}

.pg-theme-toggle .theme-control-toggle:hover{

    transform:translateY(-2px);

    box-shadow:
        0 14px 34px rgba(15,23,42,.16);

}

.pg-theme-toggle .theme-control-toggle-label{

    width:52px;

    height:52px;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

}

.pg-theme-toggle svg{

    width:22px;

    height:22px;

}

.pg-theme-button{

    width:52px;

    height:52px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    background:var(--phoenix-body-bg);

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

    box-shadow:
        0 10px 30px rgba(15,23,42,.12);

    transition:.25s;

}

.pg-theme-button:hover{

    transform:translateY(-2px);

    box-shadow:
        0 14px 36px rgba(15,23,42,.18);

}

.pg-theme-button svg{

    width:20px;

    height:20px;

}

#themeIcon{

    transition:

        transform .35s ease,

        opacity .25s;

}

.theme-control-toggle-light,
.theme-control-toggle-dark{

    display:flex;

    align-items:center;

    justify-content:center;

}

html[data-bs-theme="light"] .theme-control-toggle-dark{

    display:none;

}

html[data-bs-theme="dark"] .theme-control-toggle-light{

    display:none;

}

#solicitarCadastro{

    cursor:pointer;

    transition:all .2s ease;

    text-decoration:none;

}

#solicitarCadastro:hover{

    text-decoration:underline;

    color:var(--phoenix-primary);

}

/* ==========================================
   INPUTS DESABILITADOS
========================================== */

.form-control:disabled,
.form-select:disabled {

    opacity: .65;

    cursor: not-allowed;

    background-color: var(--bs-secondary-bg);

    color: var(--bs-secondary-color);

    border-color: var(--bs-border-color);

}

#nome_social_user:disabled{

    background: var(--bs-tertiary-bg) !important;

    color: var(--bs-secondary-color) !important;

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

    opacity: .55;

    cursor: not-allowed;

    box-shadow: none;

}

#nome_social_user:disabled::placeholder{

    color: var(--bs-secondary-color);
    opacity: .6;

}


/* ================================================================
   FIM
================================================================ */