/* =========================================================
   OPMED
   GESTÃO OPMED
   SISTEMA DE GESTÃO CLÍNICA
========================================================= */


/* =========================================================
   VARIÁVEIS
========================================================= */

:root {

    --navy:
        #07354d;

    --navy-dark:
        #04283c;

    --navy-deep:
        #031f30;

    --blue:
        #087fa4;

    --blue-dark:
        #066b8a;

    --cyan:
        #16a6b5;

    --teal:
        #16a69f;

    --teal-light:
        #e7f7f6;

    --background:
        #f4f8fa;

    --white:
        #ffffff;

    --text:
        #18394b;

    --text-dark:
        #123347;

    --text-light:
        #718692;

    --muted:
        #9aaab3;

    --border:
        #dce7ec;

    --border-light:
        #e8eff2;

    --danger:
        #d54c5a;

    --shadow:
        0 20px 60px
        rgba(13, 48, 68, .10);

}


/* =========================================================
   RESET
========================================================= */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


html {

    width: 100%;

    min-height: 100%;

}


body {

    width: 100%;

    min-height: 100vh;

    font-family:
        "Segoe UI",
        Inter,
        Arial,
        sans-serif;

    background:
        var(--background);

    color:
        var(--text);

    -webkit-font-smoothing:
        antialiased;

}


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

.login-page {

    width: 100%;

    min-height: 100vh;

    display: grid;

    grid-template-columns:
        46% 54%;

}


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

.brand-panel {

    position: relative;

    min-height: 100vh;

    overflow: hidden;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    padding:
        48px 58px 32px;

    color:
        white;

    background:

        radial-gradient(
            circle at 90% 15%,
            rgba(22,166,159,.25),
            transparent 28%
        ),

        radial-gradient(
            circle at 5% 90%,
            rgba(8,127,164,.20),
            transparent 32%
        ),

        linear-gradient(
            145deg,
            #052b41 0%,
            #073b55 48%,
            #07576b 100%
        );

}


/* círculos decorativos */

.brand-panel::before {

    content: "";

    position: absolute;

    width: 500px;

    height: 500px;

    right: -270px;

    bottom: -270px;

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

    border-radius:
        50%;

}


.brand-panel::after {

    content: "";

    position: absolute;

    width: 350px;

    height: 350px;

    right: -190px;

    bottom: -190px;

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

    border-radius:
        50%;

}


/* =========================================================
   CONTEÚDO DA MARCA
========================================================= */

.brand-content {

    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    height: 100%;

}


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

.brand-header {

    display: flex;

    align-items: center;

    gap: 14px;

}


/* quadrado do logo */

.brand-symbol {

    position: relative;

    width: 48px;

    height: 48px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 12px;

    background:
        linear-gradient(
            145deg,
            #19b7b0,
            #087ea4
        );

    box-shadow:
        0 10px 25px
        rgba(0,0,0,.20);

}


/* =========================================================
   CRUZ MÉDICA
========================================================= */

.medical-cross {

    position: relative;

    width: 25px;

    height: 25px;

}


/* barra horizontal */

.medical-cross::before {

    content: "";

    position: absolute;

    width: 25px;

    height: 7px;

    top: 9px;

    left: 0;

    border-radius: 4px;

    background:
        #ffffff;

}


/* barra vertical */

.medical-cross::after {

    content: "";

    position: absolute;

    width: 7px;

    height: 25px;

    top: 0;

    left: 9px;

    border-radius: 4px;

    background:
        #ffffff;

}


/* =========================================================
   TEXTO DA MARCA
========================================================= */

.brand-name {

    color:
        #ffffff;

    font-size:
        22px;

    line-height:
        1;

    font-weight:
        850;

    letter-spacing:
        2px;

}


.brand-subtitle {

    margin-top:
        5px;

    color:
        #83d7d5;

    font-size:
        8px;

    line-height:
        1;

    font-weight:
        800;

    letter-spacing:
        2px;

}


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

.brand-main {

    max-width:
        500px;

    margin-top:
        auto;

    margin-bottom:
        auto;

}


.eyebrow {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    margin-bottom:
        19px;

    color:
        #7ed9d5;

    font-size:
        9px;

    font-weight:
        850;

    letter-spacing:
        1.5px;

}


.eyebrow::before {

    content:
        "";

    width:
        27px;

    height:
        2px;

    border-radius:
        3px;

    background:
        #19b6b0;

}


.brand-main h1 {

    color:
        #ffffff;

    font-size:
        clamp(34px, 3.5vw, 49px);

    line-height:
        1.08;

    font-weight:
        750;

    letter-spacing:
        -1px;

}


.brand-main p {

    max-width:
        440px;

    margin-top:
        22px;

    color:
        #b9ccd5;

    font-size:
        13px;

    line-height:
        1.75;

}


/* =========================================================
   FUNCIONALIDADES
========================================================= */

.brand-features {

    display:
        flex;

    flex-direction:
        column;

    gap:
        10px;

    max-width:
        410px;

}


.feature {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    padding:
        11px 13px;

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

    border-radius:
        10px;

    background:
        rgba(255,255,255,.045);

    backdrop-filter:
        blur(10px);

}


.feature-icon {

    width:
        30px;

    height:
        30px;

    flex-shrink:
        0;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        rgba(111,220,215,.12);

    border-radius:
        8px;

    color:
        #81d9d5;

    background:
        rgba(22,166,159,.12);

    font-size:
        11px;

    font-weight:
        850;

}


.feature-content strong {

    display:
        block;

    color:
        #f4fafc;

    font-size:
        10px;

    font-weight:
        750;

}


.feature-content span {

    display:
        block;

    margin-top:
        3px;

    color:
        #8fa9b6;

    font-size:
        8px;

}


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

.brand-footer {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    color:
        #7694a2;

    font-size:
        8px;

}


.footer-brand {

    color:
        #b0cbd4;

    font-weight:
        850;

    letter-spacing:
        1px;

}


.footer-dot {

    color:
        #4d7788;

}


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

.login-panel {

    min-height:
        100vh;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        50px 70px;

    background:
        #f7fafb;

}


/* =========================================================
   WRAPPER
========================================================= */

.login-wrapper {

    width:
        100%;

    max-width:
        430px;

}


/* =========================================================
   MARCA MOBILE
========================================================= */

.mobile-brand {

    display:
        none;

}


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

.login-header {

    margin-bottom:
        30px;

}


.welcome {

    margin-bottom:
        9px;

    color:
        var(--teal);

    font-size:
        9px;

    font-weight:
        850;

    letter-spacing:
        1.5px;

}


.login-header h2 {

    color:
        var(--text);

    font-size:
        31px;

    line-height:
        1.15;

    font-weight:
        800;

    letter-spacing:
        -.6px;

}


.login-header p {

    max-width:
        390px;

    margin-top:
        9px;

    color:
        var(--text-light);

    font-size:
        11px;

    line-height:
        1.65;

}


/* =========================================================
   INPUT
========================================================= */

.input-group {

    margin-bottom:
        19px;

}


.input-group label {

    display:
        block;

    margin-bottom:
        7px;

    color:
        #355365;

    font-size:
        9px;

    font-weight:
        750;

}


.input-wrapper {

    position:
        relative;

}


.input-wrapper input {

    width:
        100%;

    height:
        50px;

    padding:
        0 45px;

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

    border-radius:
        9px;

    outline:
        none;

    background:
        #ffffff;

    color:
        var(--text);

    font-family:
        inherit;

    font-size:
        11px;

    box-shadow:
        0 2px 6px
        rgba(15,50,65,.025);

    transition:
        border-color .2s ease,
        box-shadow .2s ease;

}


.input-wrapper input::placeholder {

    color:
        #a4b1b8;

}


.input-wrapper input:hover {

    border-color:
        #c6d7de;

}


.input-wrapper input:focus {

    border-color:
        var(--teal);

    box-shadow:
        0 0 0 3px
        rgba(22,166,159,.09);

}


/* =========================================================
   ÍCONE INPUT
========================================================= */

.input-icon {

    position:
        absolute;

    left:
        15px;

    top:
        50%;

    width:
        17px;

    height:
        17px;

    transform:
        translateY(-50%);

    display:
        grid;

    place-items:
        center;

    color:
        #91a3ad;

    pointer-events:
        none;

}


.input-icon svg {

    width:
        17px;

    height:
        17px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.6;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

}


/* =========================================================
   MOSTRAR SENHA
========================================================= */

.show-password {

    position:
        absolute;

    right:
        12px;

    top:
        50%;

    width:
        26px;

    height:
        26px;

    transform:
        translateY(-50%);

    display:
        grid;

    place-items:
        center;

    border:
        0;

    outline:
        none;

    background:
        transparent;

    color:
        #91a3ad;

    cursor:
        pointer;

}


.show-password:hover {

    color:
        var(--teal);

}


.show-password svg {

    width:
        17px;

    height:
        17px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.5;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

}


/* =========================================================
   ERRO
========================================================= */

.error-message {

    min-height:
        18px;

    margin:
        -3px 0 8px;

    color:
        var(--danger);

    font-size:
        9px;

    font-weight:
        650;

}


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

.login-button {

    width:
        100%;

    height:
        50px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    border:
        0;

    border-radius:
        9px;

    background:
        linear-gradient(
            135deg,
            #087f9e,
            #086e8d
        );

    color:
        #ffffff;

    cursor:
        pointer;

    font-family:
        inherit;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        .2px;

    box-shadow:
        0 9px 21px
        rgba(8,126,164,.18);

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        opacity .2s ease;

}


.login-button svg {

    width:
        16px;

    height:
        16px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

    transition:
        transform .2s ease;

}


.login-button:hover {

    transform:
        translateY(-1px);

    box-shadow:
        0 12px 26px
        rgba(8,126,164,.24);

}


.login-button:hover svg {

    transform:
        translateX(3px);

}


.login-button:active {

    transform:
        translateY(0);

}


.login-button.loading {

    opacity:
        .75;

    cursor:
        wait;

}


/* =========================================================
   SEGURANÇA
========================================================= */

.security-info {

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    margin-top:
        25px;

    padding:
        12px 13px;

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

    border-radius:
        9px;

    background:
        #fbfdfe;

}


.security-icon {

    width:
        30px;

    height:
        30px;

    flex-shrink:
        0;

    display:
        grid;

    place-items:
        center;

    border-radius:
        8px;

    color:
        var(--teal);

    background:
        var(--teal-light);

}


.security-icon svg {

    width:
        16px;

    height:
        16px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.6;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

}


.security-text strong {

    display:
        block;

    color:
        #486271;

    font-size:
        8.5px;

    font-weight:
        750;

}


.security-text span {

    display:
        block;

    margin-top:
        3px;

    color:
        #99a9b1;

    font-size:
        7.5px;

}


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

.login-footer {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    margin-top:
        28px;

    color:
        #9baab2;

    font-size:
        7.5px;

}


.login-footer .footer-brand {

    color:
        #6e8490;

}


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

@media (max-width: 1050px) {

    .login-page {

        grid-template-columns:
            40% 60%;

    }


    .brand-panel {

        padding:
            40px 35px 30px;

    }


    .brand-main h1 {

        font-size:
            34px;

    }


    .brand-main p {

        font-size:
            11px;

    }


    .login-panel {

        padding:
            40px;

    }

}


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

@media (max-width: 850px) {

    .login-page {

        grid-template-columns:
            35% 65%;

    }


    .brand-panel {

        padding:
            35px 25px 25px;

    }


    .brand-main h1 {

        font-size:
            29px;

    }


    .brand-main p {

        font-size:
            10px;

    }


    .feature-content strong {

        font-size:
            9px;

    }


    .feature-content span {

        font-size:
            7px;

    }


    .login-panel {

        padding:
            35px;

    }

}


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

@media (max-width: 700px) {

    .login-page {

        display:
            block;

        min-height:
            100vh;

    }


    .brand-panel {

        display:
            none;

    }


    .login-panel {

        min-height:
            100vh;

        padding:
            28px 20px;

        display:
            flex;

        align-items:
            flex-start;

        justify-content:
            center;

    }


    .login-wrapper {

        width:
            100%;

        max-width:
            440px;

        margin:
            0 auto;

    }


    .mobile-brand {

        display:
            flex;

        align-items:
            center;

        gap:
            11px;

        margin-bottom:
            52px;

    }


    .mobile-brand .brand-name {

        color:
            var(--navy);

        font-size:
            19px;

    }


    .mobile-brand .brand-subtitle {

        color:
            var(--teal);

    }


    .mobile-symbol {

        width:
            42px;

        height:
            42px;

        border-radius:
            10px;

    }


    .mobile-symbol .medical-cross {

        transform:
            scale(.82);

    }


    .login-header h2 {

        font-size:
            28px;

    }

}


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

@media (max-width: 430px) {

    .login-panel {

        padding:
            24px 17px;

    }


    .mobile-brand {

        margin-bottom:
            43px;

    }


    .login-header h2 {

        font-size:
            26px;

    }


    .login-header p {

        font-size:
            10px;

    }


    .input-wrapper input {

        height:
            48px;

    }


    .login-button {

        height:
            48px;

    }

}

/* =========================================================
   OPMED — ÍCONES DO MENU ADMINISTRATIVO
   Somente aparência/alinhamento. Não altera links, eventos,
   permissões, dados, localStorage ou regras de negócio.
   ========================================================= */
.app .nav-item .nav-icon,
.layout nav .nav-icon,
.admin-page nav .nav-icon,
.container .menu-item .menu-icon,
.container .nav-item .nav-icon,
.sidebar .nav-icon,
.sidebar .ico{
    width:30px !important;
    min-width:30px !important;
    height:30px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex:0 0 30px !important;
    margin:0 !important;
    padding:0 !important;
    text-align:center !important;
    font-size:18px !important;
    line-height:1 !important;
    color:#8be1dc !important;
    font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji","Segoe UI Symbol",sans-serif !important;
}

.app .nav-item,
.layout nav a,
.admin-page nav a,
.container .menu-item,
.sidebar .nav{
    align-items:center !important;
}

.app .nav-item > span:last-child,
.container .nav-item > span:last-child{
    line-height:30px !important;
}

.app .nav-item.active .nav-icon,
.layout nav a.active .nav-icon,
.admin-page nav a.active .nav-icon,
.container .menu-item.active .menu-icon,
.container .nav-item.active .nav-icon,
.sidebar a.active .nav-icon,
.sidebar a.active .ico{
    color:#ffffff !important;
}