/* =========================================================
   CORA - TELA DE LOGIN
   Este arquivo afeta somente a página de login.
   ========================================================= */


/* =========================================================
   CONTAINER PRINCIPAL
   ========================================================= */
.login-container {
    --cora-primary: #258cfb;
    --cora-primary-dark: #176dcc;
    --cora-white: #ffffff;
    --cora-muted: rgba(255, 255, 255, 0.65);
    --cora-border: rgba(255, 255, 255, 0.15);
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    background: radial-gradient( circle at 20% 20%, rgba(37, 140, 251, 0.18), transparent 35% ), radial-gradient( circle at 80% 80%, rgba(29, 53, 87, 0.30), transparent 40% ), linear-gradient( 135deg, #0b1320, #172a45, #080d16 );
}

    /* =========================================================
   CARD DO LOGIN
   ========================================================= */

    .login-container .login-card {
        width: 100%;
        max-width: 900px;
        min-height: 700px;
        padding: 45px 60px;
        background: rgba(0, 0, 0, 0.55);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 26px;
        box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
    }


    /* =========================================================
   LOGO
   ========================================================= */

    .login-container .logo {
        text-align: center;
        margin-bottom: 30px;
    }



    /* =========================================================
   LOGO - SEM CARD AO REDOR
   ========================================================= */

    .login-container .logo-icon {
        width: 100%;
        height: 280px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 20px;
        background: transparent;
        border: none;
        border-radius: 0;
        overflow: visible;
    }


    .login-container .cora-logo {
        width: 100%;
        height: 100%;
        max-width: 650px;
        object-fit: contain;
        object-position: center;
        display: block;
    }

    /* =========================================================
   NOME CORA
   ========================================================= */

    .login-container .logo h1 {
        margin: 0;
        font-size: 36px;
        font-weight: 700;
        letter-spacing: 2px;
        color: var(--cora-white);
    }



    .login-container .logo span {
        display: block;
        margin-top: 8px;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 4px;
        color: var(--cora-muted);
    }


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

    .login-container .login-card form {
        width: 100%;
        max-width: 500px;
        margin: 0 auto;
    }



    .login-container .login-card .form-label {
        margin-bottom: 8px;
        font-size: 13px;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.9);
    }


    /* =========================================================
   CAMPOS
   ========================================================= */

    .login-container .login-card .input-group {
        border-radius: 12px;
    }


    .login-container .login-card .input-group-text {
        width: 52px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(255, 255, 255, 0.70);
        background: rgba(255, 255, 255, 0.08);
        border-color: var(--cora-border);
    }


    .login-container .login-card .form-control {
        height: 52px;
        font-size: 14px;
        color: #ffffff;
        background: rgba(255, 255, 255, 0.08);
        border-color: var(--cora-border);
    }


        .login-container .login-card .form-control::placeholder {
            color: rgba(255, 255, 255, 0.45);
        }


        .login-container .login-card .form-control:focus {
            color: #ffffff;
            background: rgba(255, 255, 255, 0.12);
            border-color: var(--cora-primary);
            box-shadow: 0 0 0 3px rgba(37, 140, 251, 0.18);
        }



    .login-container .login-card .input-group:focus-within .input-group-text {
        color: var(--cora-primary);
        border-color: var(--cora-primary);
    }


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

    .login-container .remember {
        font-size: 13px;
        color: var(--cora-muted);
        cursor: pointer;
    }


    .login-container .form-check-input {
        cursor: pointer;
    }


        .login-container .form-check-input:checked {
            background-color: var(--cora-primary);
            border-color: var(--cora-primary);
        }


    /* =========================================================
   ALERTA DE ERRO
   ========================================================= */

    .login-container .alert-danger {
        margin-bottom: 20px;
        padding: 12px 15px;
        color: #fecaca;
        background: rgba(127, 29, 29, 0.40);
        border: 1px solid rgba(239, 68, 68, 0.30);
        border-radius: 12px;
        font-size: 13px;
    }


    /* =========================================================
   BOTÃO ENTRAR - ESTILO INSTITUCIONAL
   ========================================================= */

    .login-container .btn-login {
        width: 100%;
        height: 54px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 10px;
        color: #ffffff;
        font-size: 15px;
        font-weight: 600;
        background: #1d3557;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
        cursor: pointer;
        transition: background-color 180ms ease, box-shadow 180ms ease;
    }


        .login-container .btn-login:hover {
            background: #24456f;
            box-shadow: 0 5px 12px rgba(0, 0, 0, 0.22);
        }


        .login-container .btn-login:active {
            background: #19304e;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.20);
        }

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

    .login-container .footer {
        margin-top: 28px;
        text-align: center;
        font-size: 11px;
        line-height: 1.6;
        color: rgba(255, 255, 255, 0.40);
    }


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 768px) {

    .login-container {
        padding: 25px 20px;
    }

        .login-container .login-card {
            max-width: 650px;
            padding: 35px 30px;
        }

        .login-container .logo-icon {
            height: 230px;
        }

        .login-container .cora-logo {
            max-width: 500px;
        }
}


/* =========================================================
   CELULAR
   ========================================================= */

@media (max-width: 576px) {

    .login-container {
        align-items: flex-start;
        padding: 20px 15px;
    }

        .login-container .login-card {
            margin-top: 10px;
            padding: 25px 20px 30px;
            border-radius: 20px;
        }

        .login-container .logo {
            margin-bottom: 25px;
        }

        .login-container .logo-icon {
            height: 170px;
            margin-bottom: 18px;
            border-radius: 14px;
        }

        .login-container .logo h1 {
            font-size: 30px;
        }

        .login-container .logo span {
            letter-spacing: 3px;
        }

        .login-container .login-card .form-control {
            height: 50px;
        }

        .login-container .login-card .input-group-text {
            height: 50px;
        }

        .login-container .login-card .btn-login {
            height: 52px;
        }
}


/* =========================================================
   CELULAR PEQUENO
   ========================================================= */

@media (max-width: 400px) {

    .login-container {
        padding: 10px;
    }

        .login-container .login-card {
            padding: 22px 16px 25px;
        }

        .login-container .logo-icon {
            height: 140px;
        }

        .login-container .logo h1 {
            font-size: 27px;
        }

        .login-container .login-card .input-group-text {
            width: 45px;
        }
}
.cora-logo {
    width: 36px;
    height: 36px;
    object-fit: contain;
}