:root {
    font-family:
        Arial,
        Helvetica,
        sans-serif;

    color: #071f38;
    background: #f4f8fb;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
}

body {
    min-height: 100vh;
}

button,
input {
    font: inherit;
}

.login-page {
    display: grid;
    grid-template-columns: 66% 34%;
    min-height: 100vh;
}

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

.login-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 100vh;
    overflow: hidden;
    padding:
        52px
        clamp(52px, 7vw, 92px);

    color: #ffffff;

    background:
        radial-gradient(
            circle at 83% 20%,
            rgba(34, 116, 181, .22),
            transparent 38%
        ),
        linear-gradient(
            135deg,
            #031a2c 0%,
            #062b48 55%,
            #073456 100%
        );
}

.login-hero::after {
    content: "";
    position: absolute;
    width: 620px;
    height: 620px;
    right: -210px;
    bottom: -370px;
    border: 1px solid rgba(64, 157, 226, .28);
    border-radius: 50%;
    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 1;
    width: min(100%, 670px);
}

.hero-brand {
    margin-bottom: 30px;
}

.hero-brand__image {
    display: block;
    width: 300px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.hero-eyebrow {
    margin: 0 0 13px;

    color: #46b6ff;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.hero-title {
    margin: 0;

    max-width: 760px;

    color: #ffffff;

    font-size: clamp(
        46px,
        4.2vw,
        66px
    );

    font-weight: 800;
    line-height: .98;
    letter-spacing: -.035em;
}

.hero-title span {
    color: #2d91ff;
    display: block;
}

.hero-subtitle {
    margin: 20px 0 0;

    color: #ffffff;

    font-size: 17px;
    line-height: 1.5;
}

.hero-rule {
    width: 58px;
    height: 4px;

    margin: 20px 0 22px;

    border-radius: 999px;

    background: #3aaeff;
}

.hero-copy {
    max-width: 560px;

    margin: 0;

    color: #d8e7f2;

    font-size: 13px;
    line-height: 1.65;
}

.hero-features {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 20px 30px;

    margin-top: 28px;
}

.hero-feature {
    display: grid;
    grid-template-columns:
        36px
        minmax(0, 1fr);

    gap: 10px;

    align-items: start;
}

.hero-feature__marker {
    display: grid;
    place-items: center;

    width: 35px;
    height: 35px;

    border:
        1px solid
        rgba(58, 174, 255, .65);

    border-radius: 9px;

    color: #58c1ff;

    font-size: 10px;
    font-weight: 800;
}

.hero-feature strong {
    display: block;

    margin-bottom: 3px;

    color: #ffffff;

    font-size: 12px;
    line-height: 1.35;
}

.hero-feature span {
    display: block;

    color: #c8d9e5;

    font-size: 10px;
    line-height: 1.45;
}

/* =========================================================
   PAINEL DIREITO
   ========================================================= */

.login-side {
    display: grid;
    place-items: center;

    min-height: 100vh;

    padding: 40px;

    background:
        radial-gradient(
            circle at 85% 5%,
            rgba(37, 120, 211, .10),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            #f8fbfd,
            #eef4f8
        );
}

.login-card {
    width: min(100%, 405px);

    padding: 36px 37px 31px;

    border: 1px solid #dbe5ed;
    border-radius: 20px;

    background: #ffffff;

    box-shadow:
        0 20px 55px
        rgba(14, 49, 81, .08);
}

.login-card__header {
    position: relative;

    min-height: 116px;

    padding-right: 115px;

    margin-bottom: 21px;
}

.login-card__brand {
    position: absolute;

    top: 0;
    right: 0;
}

.login-card__brand-image {
    display: block;

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

    height: auto;

    object-fit: contain;
}

.login-eyebrow {
    margin: 0 0 10px;

    color: #1467dc;

    font-size: 10px;
    font-weight: 900;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.login-title {
    margin: 0 0 8px;

    color: #061d3d;

    font-size: 31px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.025em;
}

.login-description {
    margin: 0;

    color: #698098;

    font-size: 12px;
    line-height: 1.55;
}

.login-alert {
    margin: 0 0 18px;

    padding: 11px 13px;

    border: 1px solid #efcccc;
    border-radius: 8px;

    background: #fff4f4;

    color: #a32727;

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

.login-form {
    display: grid;

    gap: 16px;
}

.form-field {
    display: grid;

    gap: 7px;
}

.form-label {
    color: #102840;

    font-size: 11px;
    font-weight: 800;
}

.input-shell {
    position: relative;
}

.form-input {
    width: 100%;
    height: 43px;

    padding: 0 12px;

    border: 1px solid #b8c8dc;
    border-radius: 9px;

    outline: none;

    color: #081a2d;

    background: #edf4ff;

    font-size: 11px;

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

.form-input:focus {
    border-color: #2374d5;

    background: #ffffff;

    box-shadow:
        0 0 0 3px
        rgba(35, 116, 213, .11);
}

.form-input--password {
    padding-right: 72px;
}

.password-toggle {
    position: absolute;

    top: 50%;
    right: 10px;

    transform: translateY(-50%);

    padding: 5px;

    border: 0;

    color: #0d61c8;

    background: transparent;

    font-size: 10px;
    font-weight: 800;

    cursor: pointer;
}

.login-button {
    display: flex;

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

    gap: 9px;

    width: 100%;
    height: 43px;

    margin-top: 1px;

    border: 0;
    border-radius: 9px;

    color: #ffffff;

    background:
        linear-gradient(
            90deg,
            #2469cb,
            #1f7dea
        );

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

    cursor: pointer;

    box-shadow:
        0 8px 20px
        rgba(31, 105, 203, .18);
}

.login-button:hover {
    filter: brightness(1.05);
}

.security-note {
    display: grid;

    grid-template-columns:
        25px
        minmax(0, 1fr);

    gap: 9px;

    margin-top: 21px;
    padding-top: 17px;

    border-top: 1px solid #dce5ec;
}

.security-note__icon {
    display: grid;
    place-items: center;

    width: 24px;
    height: 24px;

    border-radius: 50%;

    color: #2874d4;

    background: #edf5ff;

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

.security-note strong {
    display: block;

    color: #20384d;

    font-size: 10px;
}

.security-note p {
    margin: 3px 0 0;

    color: #8495a4;

    font-size: 9px;
    line-height: 1.4;
}

.login-footer {
    margin: 20px 0 0;

    color: #91a3b3;

    font-size: 9px;
    font-weight: 600;
    letter-spacing: .08em;

    text-align: center;
}

/* =========================================================
   RESPONSIVO
   ========================================================= */

@media (max-width: 900px) {

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

    .login-hero {
        min-height: auto;

        padding:
            48px
            32px;
    }

    .login-side {
        min-height: auto;

        padding:
            44px
            20px;
    }
}

@media (max-width: 620px) {

    .hero-brand__image {
        width: min(
            240px,
            72vw
        );
    }

    .hero-features {
        grid-template-columns: 1fr;
    }

    .login-card {
        padding:
            28px
            22px;
    }

    .login-card__header {
        padding-right: 0;
        padding-top: 66px;
    }

    .login-card__brand {
        top: 0;
        left: 0;
        right: auto;
    }

    .login-card__brand-image {
        width: 105px;
    }
}

/* ==========================================================
   LMD_MEDICINA_MFA_LOGIN_20260925
   ========================================================== */

.medicina-mfa {
    margin-top: 8px;
}

.medicina-mfa__texto {
    margin: 0 0 10px;

    color: #073653;

    font-size: 18px;
    font-weight: 800;

    text-align: center;
}

.medicina-mfa__orientacao {
    margin: 0 0 14px;

    color: #526778;

    font-size: 13px;
    line-height: 1.45;

    text-align: center;
}

.medicina-mfa__conta {
    margin-bottom: 10px;

    color: #526778;

    font-size: 12px;

    text-align: center;
}

.medicina-mfa__segredo {
    margin: 0 0 16px;

    padding: 10px 12px;

    border: 1px solid #cbd9e3;
    border-radius: 8px;

    background: #f4f8fb;

    color: #073653;

    font-family: monospace;

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

    letter-spacing: .08em;

    overflow-wrap: anywhere;

    text-align: center;
}

.medicina-mfa__form {
    margin: 0;
}

.medicina-mfa__label {
    display: block;

    margin-bottom: 7px;

    color: #183a50;

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

.medicina-mfa__codigo {
    box-sizing: border-box;

    width: 100%;
    height: 48px;

    margin-bottom: 14px;

    padding: 0 12px;

    border: 1px solid #b9cad6;
    border-radius: 8px;

    background: #ffffff;
    color: #073653;

    font-size: 24px;
    font-weight: 800;

    letter-spacing: .30em;

    text-align: center;
}

.medicina-mfa__codigo:focus {
    outline: 2px solid #18a8e0;
    outline-offset: 1px;
}

.medicina-mfa__botao {
    width: 100%;
    min-height: 44px;

    border: 0;
    border-radius: 8px;

    background: #073653;
    color: #ffffff;

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

    cursor: pointer;
}

.medicina-mfa__botao:hover {
    background: #0a4d73;
}

/* ==========================================================
   LOGOMED - TEXTOS E ESPECIALIDADES DA TELA DE ENTRADA
   ========================================================== */

.hero-copy--intro {
    margin-top: 12px;
}

.hero-especialidades {
    margin-top: 28px;
    padding-top: 22px;

    border-top: 1px solid rgba(58, 174, 255, .28);
}

.hero-especialidades__titulo {
    margin: 0 0 4px;

    color: #ffffff;

    font-size: 15px;
    font-weight: 800;
}

.hero-especialidades__texto {
    margin: 0 0 16px;

    color: #c8d9e5;

    font-size: 12px;
    line-height: 1.45;
}

.hero-especialidades__lista {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 10px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.hero-especialidades__lista li {
    padding: 11px 12px;

    border: 1px solid rgba(58, 174, 255, .35);
    border-radius: 10px;

    background: rgba(255, 255, 255, .05);
}

.hero-especialidades__lista strong {
    display: block;

    margin-bottom: 4px;

    color: #ffffff;

    font-size: 12px;
    line-height: 1.3;
}

.hero-especialidades__lista span {
    display: block;

    color: #c8d9e5;

    font-size: 10px;
    line-height: 1.45;
}

@media (max-width: 1180px) {

    .hero-especialidades__lista {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {

    .hero-especialidades__lista {
        grid-template-columns: 1fr;
    }
}

/* LMD_LOGIN_QUADRO_ALTO: no computador, o quadro de login fica no alto e acompanha a rolagem */
@media (min-width: 1024px) {
    .login-side { align-items: flex-start !important; padding-top: clamp(48px, 14vh, 150px) !important; }
    .login-card { position: sticky; top: 32px; align-self: flex-start; }
}
/* FIM_LMD_LOGIN_QUADRO_ALTO */