/* =========================================================
   HELPDESK - LOGIN
   ========================================================= */

:root {
    --primary: #0b78ad;
    --primary-dark: #075d8c;
    --primary-light: #198bd0;

    --text: #172b4d;
    --muted: #6b778c;
    --border: #dce4ef;

    --background: #f4f8fc;
}


/* =========================================================
   PÁGINA
   ========================================================= */

html,
body {
    margin: 0;
    padding: 0;

    width: 100%;
    min-height: 100%;

    background: var(--background) !important;
}

body {
    min-height: 100vh;
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
}


/* Fundo geral */
.login-page {
    width: 100%;
    min-height: 100vh;

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

    padding: 35px 20px;

    background: var(--background) !important;
}


/* Container */
.login-container {
    position: relative;

    display: block;
    width: 100%;
    max-width: 1120px;
    height: auto;

    margin: 0 auto;

    background: transparent !important;
}


/* =========================================================
   CARTÃO PRINCIPAL
   ========================================================= */

.login-card {
    position: relative;
    z-index: 1;

    width: 100%;
    min-height: 570px;

    display: flex;

    overflow: hidden;

    background: #ffffff;

    border-radius: 22px;

    box-shadow:
            0 25px 60px rgba(32, 56, 85, 0.12),
            0 8px 20px rgba(32, 56, 85, 0.05);
}


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

.login-info {
    position: relative;

    width: 35%;

    display: flex;
    flex-direction: column;
    align-items: center;

    padding: 50px 45px;

    overflow: hidden;

    text-align: center;

    color: #ffffff;

    background: linear-gradient(
            160deg,
            var(--primary) 0%,
            var(--primary-dark) 100%
    );
}


/* Círculo decorativo superior */
.login-info::before {
    content: "";

    position: absolute;

    width: 250px;
    height: 250px;

    top: -130px;
    right: -120px;

    border-radius: 50%;

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

    pointer-events: none;
}


/* Círculo decorativo inferior */
.login-info::after {
    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    bottom: -180px;
    left: -170px;

    border-radius: 50%;

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

    pointer-events: none;
}


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

.login-info h1 {
    position: relative;
    z-index: 2;

    margin: 0 0 5px;

    font-size: 2rem;
    font-weight: 700;

    color: #ffffff;
}


.login-subtitle {
    position: relative;
    z-index: 2;

    margin: 0;

    font-size: 1.05rem;
    font-weight: 300;

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


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

.login-divider {
    position: relative;
    z-index: 2;

    width: 60px;
    height: 2px;

    margin: 30px auto;

    background: rgba(255, 255, 255, 0.30);
}


/* =========================================================
   ÍCONE HEADSET
   ========================================================= */

.support-icon {
    position: relative;
    z-index: 2;

    width: 82px;
    height: 82px;

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

    margin-bottom: 22px;

    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 50%;

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

    color: #ffffff;
}


.support-icon i {
    font-size: 2.4rem;

    color: #ffffff !important;
}


/* =========================================================
   TEXTO DE AJUDA
   ========================================================= */

.login-info h5 {
    position: relative;
    z-index: 2;

    margin: 0 0 10px;

    font-size: 1.1rem;
    font-weight: 600;

    color: #ffffff;
}


.support-text {
    position: relative;
    z-index: 2;

    max-width: 260px;

    margin: 0 auto;

    line-height: 1.7;

    font-size: 0.95rem;

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


/* =========================================================
   ÁREA DIREITA
   ========================================================= */

.login-form-area {
    width: 65%;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 45px 70px 30px;

    background: #ffffff;
}


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

.login-header {
    margin-bottom: 28px;

    text-align: center;
}


/* Ícone utilizador */
.user-icon {
    width: 70px;
    height: 70px;

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

    margin: 0 auto 18px;

    border: 2px solid #e1e9f2;
    border-radius: 50%;

    background: #ffffff;

    color: var(--primary);

    box-shadow:
            0 8px 22px rgba(32, 56, 85, 0.08);
}


.user-icon i {
    font-size: 1.9rem;

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


/* Título */
.login-header h2 {
    margin: 0 0 10px;

    font-size: 1.75rem;
    font-weight: 700;

    color: var(--text);
}


.login-header p {
    margin: 0;

    font-size: 1rem;

    color: var(--muted);
}


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

.login-form-area form {
    width: 100%;
    max-width: 650px;

    margin: 0 auto;
}


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

.login-form-area .form-label {
    margin-bottom: 9px;

    font-size: 0.96rem;
    font-weight: 500;

    color: #263b5c;
}


.login-form-area .form-label i {
    color: #315577;
}


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

.login-form-area .form-control {
    height: 54px;

    padding-left: 17px;
    padding-right: 17px;

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

    background: #f8fbff;

    color: var(--text);

    font-size: 0.96rem;

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


.login-form-area .form-control::placeholder {
    color: #a1adba;

    opacity: 1;
}


.login-form-area .form-control:hover {
    border-color: #c7d3e0;
}


.login-form-area .form-control:focus {
    border-color: var(--primary-light);

    background: #ffffff;

    outline: none;

    box-shadow:
            0 0 0 4px rgba(25, 139, 208, 0.10);
}


/* =========================================================
   PASSWORD
   ========================================================= */

.login-form-area .input-group .form-control {
    border-radius: 8px 0 0 8px;
}


.login-form-area .input-group .btn {
    width: 58px;

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

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

    border-radius: 0 8px 8px 0;

    background: #ffffff;

    color: #5e7086;
}


.login-form-area .input-group .btn i {
    color: #5e7086;
}


.login-form-area .input-group .btn:hover {
    background: #f5f9fd;

    color: var(--primary);
}


.login-form-area .input-group .btn:hover i {
    color: var(--primary);
}


.login-form-area .input-group .btn:focus {
    box-shadow: none;
}


/* =========================================================
   BOTÃO INICIAR SESSÃO
   ========================================================= */

.login-form-area .login-button {
    width: 100%;
    height: 56px;

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

    margin-top: 10px;
    margin-bottom: 22px;

    padding: 0 20px;

    border: none !important;
    border-radius: 8px;

    background: linear-gradient(
            90deg,
            #1684cd 0%,
            #086db4 100%
    ) !important;

    color: #ffffff !important;

    -webkit-text-fill-color: #ffffff !important;

    font-size: 1rem;
    font-weight: 600;

    text-decoration: none;

    box-shadow:
            0 8px 18px rgba(13, 110, 180, 0.18);

    cursor: pointer;

    transition:
            transform 0.2s ease,
            box-shadow 0.2s ease;
}


/* Texto e ícone sempre brancos */
.login-form-area .login-button,
.login-form-area .login-button i,
.login-form-area .login-button span,
.login-form-area .login-button * {
    color: #ffffff !important;

    -webkit-text-fill-color: #ffffff !important;
}


/* Hover */
.login-form-area .login-button:hover {
    color: #ffffff !important;

    -webkit-text-fill-color: #ffffff !important;

    background: linear-gradient(
            90deg,
            #117ac0 0%,
            #075f9e 100%
    ) !important;

    transform: translateY(-1px);

    box-shadow:
            0 10px 24px rgba(13, 110, 180, 0.26);
}


.login-form-area .login-button:hover i,
.login-form-area .login-button:hover * {
    color: #ffffff !important;

    -webkit-text-fill-color: #ffffff !important;
}


/* Focus */
.login-form-area .login-button:focus {
    color: #ffffff !important;

    -webkit-text-fill-color: #ffffff !important;

    outline: none;

    box-shadow:
            0 0 0 4px rgba(22, 132, 205, 0.18),
            0 8px 18px rgba(13, 110, 180, 0.18);
}


/* Active */
.login-form-area .login-button:active {
    color: #ffffff !important;

    -webkit-text-fill-color: #ffffff !important;

    transform: translateY(0);
}


/* =========================================================
   OPÇÕES LOGIN
   ========================================================= */

.login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;
}


.login-options .form-check {
    margin: 0;
}


.login-options .form-check-label {
    font-size: 0.9rem;

    color: var(--muted);

    cursor: pointer;
}


/* Recuperar password */
.login-options a {
    font-size: 0.9rem;

    color: #1684cd;

    text-decoration: none;

    transition: color 0.2s ease;
}


.login-options a:hover {
    color: #086db4;

    text-decoration: underline;
}


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

.login-options .form-check-input {
    border-color: #cbd6e2;

    cursor: pointer;
}


.login-options .form-check-input:checked {
    background-color: var(--primary);

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


.login-options .form-check-input:focus {
    border-color: var(--primary-light);

    box-shadow:
            0 0 0 3px rgba(25, 139, 208, 0.12);
}


/* =========================================================
   MENSAGEM DE ERRO
   ========================================================= */

.login-form-area .alert-danger {
    width: 100%;
    max-width: 650px;

    margin-left: auto;
    margin-right: auto;

    padding: 13px 16px;

    border: 0;
    border-radius: 9px;

    background: #fff1f1;

    color: #a82a2a;

    font-size: 0.92rem;
}


.login-form-area .alert-danger i {
    color: #a82a2a;
}


/* =========================================================
   FOOTER
   ========================================================= */

.login-footer {
    width: 100%;
    max-width: 650px;

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

    gap: 20px;

    margin: 32px auto 0;

    padding-top: 24px;

    border-top: 1px solid #edf1f5;

    color: var(--muted);

    font-size: 0.82rem;
}


.login-footer span {
    color: var(--muted);
}


.login-footer i {
    color: var(--primary);

    font-size: 1.05rem;
}


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

@media (max-width: 991px) {

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


    .login-container {
        max-width: 760px;
    }


    .login-card {
        min-height: 550px;
    }


    .login-info {
        width: 38%;

        padding: 45px 25px;
    }


    .login-form-area {
        width: 62%;

        padding: 40px 40px 28px;
    }


    .login-info h1 {
        font-size: 1.75rem;
    }


    .login-subtitle {
        font-size: 0.95rem;
    }


    .support-icon {
        width: 75px;
        height: 75px;
    }


    .support-icon i {
        font-size: 2.2rem;
    }


    .login-header h2 {
        font-size: 1.55rem;
    }


    .login-footer {
        flex-direction: column;

        align-items: flex-start;

        gap: 8px;
    }
}


/* =========================================================
   TELEMÓVEL
   ========================================================= */

@media (max-width: 767px) {

    html,
    body {
        background: var(--background) !important;
    }


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

        align-items: flex-start;

        padding: 20px 15px;

        background: var(--background) !important;
    }


    .login-container {
        max-width: 520px;
    }


    .login-card {
        display: block;

        min-height: auto;

        border-radius: 16px;
    }


    /* Painel azul no topo */
    .login-info {
        width: 100%;

        padding: 28px 20px;

        border-radius: 16px 16px 0 0;
    }


    .login-info h1 {
        font-size: 1.6rem;
    }


    .login-subtitle {
        font-size: 0.9rem;
    }


    /* Esconder informação secundária */
    .login-divider,
    .support-icon,
    .login-info h5,
    .support-text {
        display: none;
    }


    /* Formulário */
    .login-form-area {
        width: 100%;

        padding: 35px 25px 25px;
    }


    .login-header {
        margin-bottom: 28px;
    }


    .user-icon {
        width: 64px;
        height: 64px;

        margin-bottom: 17px;
    }


    .user-icon i {
        font-size: 1.7rem;
    }


    .login-header h2 {
        font-size: 1.45rem;
    }


    .login-header p {
        font-size: 0.9rem;

        line-height: 1.5;
    }


    .login-form-area .form-control {
        height: 52px;
    }


    .login-form-area .login-button {
        height: 54px;
    }


    /* Opções */
    .login-options {
        flex-direction: column;

        align-items: flex-start;

        gap: 12px;
    }


    /* Footer */
    .login-footer {
        flex-direction: column;

        align-items: center;

        margin-top: 28px;

        text-align: center;
    }
}


/* =========================================================
   ECRÃS PEQUENOS
   ========================================================= */

@media (max-width: 400px) {

    .login-page {
        padding: 12px;
    }


    .login-info {
        padding: 24px 15px;
    }


    .login-form-area {
        padding: 30px 18px 22px;
    }


    .login-header h2 {
        font-size: 1.3rem;
    }


    .login-header p {
        font-size: 0.85rem;
    }


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


    .login-form-area .login-button {
        height: 52px;

        font-size: 0.95rem;
    }


    .login-options .form-check-label,
    .login-options a {
        font-size: 0.85rem;
    }


    .login-footer {
        font-size: 0.75rem;
    }
}
/* =========================================================
   CORREÇÃO DO FUNDO
   ========================================================= */

html,
body {
    background: #f4f8fc !important;
}

.login-page {
    background: #f4f8fc !important;
}

.login-container {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

.login-container::before,
.login-container::after {
    display: none !important;
    content: none !important;
}