/* =========================================================
   LOGIN DO VISITANTE — PADRÃO OFICIAL GESTLIC
========================================================= */

.login-visitante-gestlic,
.login-visitante-gestlic * {
    box-sizing: border-box;
}


/* =========================================================
   FUNDO DA PÁGINA
========================================================= */

.login-visitante-gestlic {
    width: 100%;
    min-height: 100vh;
    padding: 28px 18px;

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

    background:
        radial-gradient(
            circle at 50% 10%,
            rgba(20, 148, 150, 0.34),
            transparent 40%
        ),
        linear-gradient(
            145deg,
            #075e60 0%,
            #064d52 55%,
            #063b43 100%
        );

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


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

.login-visitante-cartao {
    position: relative;

    width: 100%;
    max-width: 460px;
    padding: 40px 38px 25px;

    color: #172238;
    background: #ffffff;

    border: 1px solid rgba(219, 228, 234, 0.9);
    border-radius: 20px;

    box-shadow:
        0 24px 55px rgba(2, 36, 40, 0.28),
        0 4px 12px rgba(2, 36, 40, 0.12);

    overflow: hidden;
}


/* Linha superior GestLic */

.login-visitante-linha-topo {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    background: linear-gradient(
        90deg,
        #057f81,
        #08afb1
    );
}


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

.login-visitante-cabecalho {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: start;
    gap: 15px;
}


/* Avatar */

.login-visitante-avatar {
    width: 48px;
    height: 48px;

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

    color: #07898b;
    background: #e9f7f7;

    border: 1px solid #bfe3e4;
    border-radius: 13px;
}

.login-visitante-avatar
.material-icons {
    font-size: 24px;
}


/* Área */

.login-visitante-area {
    display: block;
    margin: 0 0 4px;

    color: #07989a;

    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 1.3px;
    text-transform: uppercase;
}


/* Título */

.login-visitante-identificacao
h1 {
    padding: 0;
    margin: 0;

    color: #172238;

    font-size: 1.65rem;
    font-weight: 750;
    line-height: 1.15;
    letter-spacing: -0.35px;
}


/* Descrição */

.login-visitante-identificacao
p {
    margin: 7px 0 0;

    color: #60708a;

    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.45;
}


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

.login-visitante-formulario {
    margin-top: 30px;

    display: flex;
    flex-direction: column;
    gap: 16px;
}


/* Campo */

.login-visitante-campo {
    position: relative;
    margin: 0;
}


/* Inputs */

.login-visitante-campo
input[type="email"],
.login-visitante-campo
input[type="password"] {
    width: 100% !important;
    height: 54px !important;
    min-height: 54px !important;

    margin: 0 !important;
    padding: 0 15px !important;

    color: #172238 !important;
    background: #f8fafc !important;

    border: 1px solid #d3dee7 !important;
    border-bottom: 1px solid #d3dee7 !important;
    border-radius: 12px !important;

    box-shadow: none !important;
    outline: none !important;

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

    font-size: 0.92rem !important;
    font-weight: 600 !important;
    line-height: 54px !important;

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


/* Placeholder */

.login-visitante-campo
input::placeholder {
    color: #9aa9bf !important;
    opacity: 1;
}


/* Foco */

.login-visitante-campo
input[type="email"]:focus,
.login-visitante-campo
input[type="password"]:focus {
    background: #ffffff !important;

    border-color: #07989a !important;
    border-bottom-color: #07989a !important;

    box-shadow:
        0 0 0 3px rgba(7, 152, 154, 0.12) !important;
}


/* Autofill */

.login-visitante-campo
input:-webkit-autofill,
.login-visitante-campo
input:-webkit-autofill:hover,
.login-visitante-campo
input:-webkit-autofill:focus {
    -webkit-text-fill-color: #172238 !important;
    -webkit-box-shadow:
        0 0 0 1000px #f8fafc inset !important;

    transition:
        background-color 9999s ease-in-out 0s;
}


/* Label apenas para leitores de ecrã */

.login-visitante-label-acessivel {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;

    border: 0 !important;
}


/* =========================================================
   MENSAGENS DE ERRO
========================================================= */

.login-visitante-alerta {
    width: 100%;
    padding: 11px 13px;

    display: flex;
    align-items: flex-start;
    gap: 9px;

    color: #a9272d;
    background: #fff1f2;

    border: 1px solid #f2c5c8;
    border-radius: 10px;

    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.4;
}

.login-visitante-alerta
.material-icons {
    margin-top: 1px;

    color: #c9363d;
    font-size: 19px;
}

.login-visitante-alerta
ul {
    padding: 0;
    margin: 0;

    list-style-position: inside;
}


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

.login-visitante-botao {
    width: 100%;
    min-height: 64px;
    padding: 7px 13px 7px 9px;

    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) 24px;
    align-items: center;
    gap: 12px;

    color: #ffffff;
    background: linear-gradient(
        135deg,
        #07989a,
        #0a8b8d
    );

    border: 0;
    border-radius: 13px;

    box-shadow:
        0 10px 25px rgba(7, 152, 154, 0.25);

    cursor: pointer;

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

    text-align: left;
    text-transform: none;

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


/* Hover */

.login-visitante-botao:hover {
    background: linear-gradient(
        135deg,
        #068b8d,
        #057f81
    );

    box-shadow:
        0 13px 30px rgba(7, 152, 154, 0.32);

    transform: translateY(-1px);
}


/* Click */

.login-visitante-botao:active {
    transform: translateY(0) scale(0.995);
}


/* Foco */

.login-visitante-botao:focus-visible {
    outline: 3px solid rgba(7, 152, 154, 0.24);
    outline-offset: 3px;
}


/* Caixa do ícone */

.login-visitante-botao-icone {
    width: 46px;
    height: 46px;

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

    color: #ffffff;
    background: rgba(255, 255, 255, 0.13);

    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: 10px;
}

.login-visitante-botao-icone
.material-icons {
    font-size: 23px;
}


/* Texto */

.login-visitante-botao-texto {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 2px;
}

.login-visitante-botao-texto
strong {
    color: #ffffff;

    font-size: 0.92rem;
    font-weight: 800;
    line-height: 1.15;
}

.login-visitante-botao-texto
small {
    color: rgba(255, 255, 255, 0.86);

    font-size: 0.69rem;
    font-weight: 600;
    line-height: 1.2;
}


/* Seta */

.login-visitante-botao-seta {
    color: #ffffff;

    font-size: 22px;
}


/* =========================================================
   REGISTO
========================================================= */

.login-visitante-registo {
    padding: 21px 8px 19px;
    margin-top: 24px;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;

    text-align: center;

    border-top: 1px solid #e0e8ed;
    border-bottom: 1px solid #e0e8ed;
}

.login-visitante-registo
span {
    color: #7b8ba3;

    font-size: 0.78rem;
    font-weight: 600;
}

.login-visitante-registo
a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;

    color: #07989a;

    font-size: 0.76rem;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: 0.15px;
    text-decoration: none;
    text-transform: uppercase;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.login-visitante-registo
a:hover {
    color: #057f81;
    transform: translateX(2px);
}

.login-visitante-registo
a
.material-icons {
    font-size: 17px;
}


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

.login-visitante-seguranca {
    padding-top: 19px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    color: #8b9bb4;

    font-size: 0.67rem;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
}

.login-visitante-seguranca
.material-icons {
    color: #8b9bb4;
    font-size: 14px;
}

.login-visitante-seguranca
b {
    padding: 0 3px;
    font-weight: 700;
}



/* =========================================================
   CAMPOS — MESMA LARGURA REAL DO BOTÃO
========================================================= */

.login-visitante-gestlic
.login-visitante-campo input {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

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

@media (max-width: 600px) {

    .login-visitante-gestlic {
        min-height: 100dvh;
        padding: 16px 12px;
    }

    .login-visitante-cartao {
        max-width: 100%;
        padding: 32px 22px 21px;

        border-radius: 17px;
    }

    .login-visitante-cabecalho {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 12px;
    }

    .login-visitante-avatar {
        width: 44px;
        height: 44px;

        border-radius: 12px;
    }

    .login-visitante-identificacao
    h1 {
        font-size: 1.38rem;
    }

    .login-visitante-identificacao
    p {
        font-size: 0.76rem;
    }

    .login-visitante-formulario {
        margin-top: 25px;
        gap: 14px;
    }

    .login-visitante-campo
    input[type="email"],
    .login-visitante-campo
    input[type="password"] {
        height: 52px !important;
        min-height: 52px !important;

        line-height: 52px !important;
    }

    .login-visitante-botao {
        min-height: 62px;

        grid-template-columns: 44px minmax(0, 1fr) 22px;
        gap: 10px;
    }

    .login-visitante-botao-icone {
        width: 44px;
        height: 44px;
    }

    .login-visitante-registo {
        padding: 19px 2px 17px;
        margin-top: 21px;
    }

    .login-visitante-registo
    a {
        max-width: 270px;
    }

    .login-visitante-seguranca {
        align-items: flex-start;

        font-size: 0.63rem;
    }

}


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

@media (max-width: 360px) {

    .login-visitante-cartao {
        padding-right: 17px;
        padding-left: 17px;
    }

    .login-visitante-identificacao
    h1 {
        font-size: 1.25rem;
    }

    .login-visitante-area {
        font-size: 0.61rem;
        letter-spacing: 1px;
    }

    .login-visitante-botao-texto
    strong {
        font-size: 0.86rem;
    }

    .login-visitante-botao-texto
    small {
        font-size: 0.64rem;
    }

}



/* =========================================================
   ADN LUMINOSO GESTLIC — CAMADA BASE
========================================================= */

.login-visitante-gestlic {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}


/* Canvas decorativo */

.adn-luminoso-gestlic {
    position: absolute;
    inset: 0;
    z-index: 0;

    width: 100%;
    height: 100%;

    display: block;

    pointer-events: none;
    user-select: none;
}


/* Cartão sempre acima do canvas */

.login-visitante-cartao {
    position: relative;
    z-index: 2;
}


/* =========================================================
   ADN COMPLETO — CARTÃO E BOTÃO
========================================================= */

.login-visitante-cartao,
.login-visitante-linha-topo,
.login-visitante-botao {
    transition:
        box-shadow 0.45s ease,
        border-color 0.45s ease,
        filter 0.45s ease,
        opacity 0.45s ease;
}


/* Halo do cartão */

.login-visitante-cartao.adn-completo {
    border-color: rgba(103, 216, 217, 0.68);

    box-shadow:
        0 0 0 1px rgba(103, 216, 217, 0.18),
        0 0 38px rgba(7, 152, 154, 0.22),
        0 24px 55px rgba(2, 36, 40, 0.28),
        0 4px 12px rgba(2, 36, 40, 0.12);
}


/* Linha superior energizada */

.login-visitante-cartao.adn-completo
.login-visitante-linha-topo {
    box-shadow:
        0 0 10px rgba(103, 216, 217, 0.75),
        0 0 22px rgba(7, 152, 154, 0.45);

    filter: brightness(1.18);
}


/* Preparar o botão para o impulso */

.login-visitante-botao {
    position: relative;
    overflow: hidden;
}


/* Luz que percorre o botão */

.login-visitante-botao::after {
    content: "";

    position: absolute;
    top: -40%;
    left: -34%;

    width: 24%;
    height: 180%;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.34),
        transparent
    );

    opacity: 0;
    pointer-events: none;

    transform: skewX(-18deg);
}


/* Botão pronto */

.login-visitante-botao.adn-pronto {
    box-shadow:
        0 0 0 1px rgba(143, 225, 226, 0.20),
        0 0 22px rgba(7, 152, 154, 0.30),
        0 12px 28px rgba(7, 152, 154, 0.28);

    filter: saturate(1.08) brightness(1.04);
}


/* Passagem de luz ao concluir */

.login-visitante-botao.adn-pronto::after {
    opacity: 1;

    animation:
        adnGestlicBotaoPronto
        0.72s
        ease-out
        forwards;
}


@keyframes adnGestlicBotaoPronto {

    from {
        left: -34%;
    }

    to {
        left: 118%;
    }

}


/* Movimento reduzido */

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

    .login-visitante-botao.adn-pronto::after {
        animation: none;
        opacity: 0;
    }

}


/* =========================================================
   ADN LUMINOSO — IMPULSO DE ENTRADA
========================================================= */

.login-visitante-botao.adn-impulso {
    animation:
        adnGestlicImpulsoEntrada
        0.62s
        ease-out
        both;
}


/* Cartão durante a transição */

.login-visitante-cartao.adn-em-transicao {
    box-shadow:
        0 0 0 1px rgba(143, 225, 226, 0.36),
        0 0 52px rgba(7, 152, 154, 0.34),
        0 24px 55px rgba(2, 36, 40, 0.28);
}


/* Impulso luminoso */

@keyframes adnGestlicImpulsoEntrada {

    0% {
        transform: scale(1);

        filter:
            saturate(1.08)
            brightness(1.04);
    }

    34% {
        transform: scale(1.012);

        filter:
            saturate(1.30)
            brightness(1.22);

        box-shadow:
            0 0 0 2px rgba(220, 255, 255, 0.30),
            0 0 34px rgba(103, 216, 217, 0.62),
            0 14px 32px rgba(7, 152, 154, 0.30);
    }

    100% {
        transform: scale(1);

        filter:
            saturate(1.12)
            brightness(1.06);

        box-shadow:
            0 0 0 1px rgba(143, 225, 226, 0.22),
            0 0 24px rgba(7, 152, 154, 0.34),
            0 12px 28px rgba(7, 152, 154, 0.28);
    }

}


/* Movimento reduzido */

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

    .login-visitante-botao.adn-impulso {
        animation: none;

        filter: brightness(1.08);
    }

}

/* =========================================================
   ADN LUMINOSO — FUNDO CONSTRUÍDO PELO VISITANTE
========================================================= */

@property --adn-matiz {
    syntax: "<number>";
    inherits: true;
    initial-value: 180;
}

@property --adn-matiz-secundaria {
    syntax: "<number>";
    inherits: true;
    initial-value: 188;
}

@property --adn-energia {
    syntax: "<number>";
    inherits: true;
    initial-value: 0.24;
}


.login-visitante-gestlic {
    --adn-matiz: 180;
    --adn-matiz-secundaria: 188;
    --adn-energia: 0.24;

    background:
        radial-gradient(
            circle at 18% 24%,
            hsl(
                var(--adn-matiz)
                78%
                44%
                /
                var(--adn-energia)
            ),
            transparent 38%
        ),

        radial-gradient(
            circle at 82% 72%,
            hsl(
                var(--adn-matiz-secundaria)
                72%
                38%
                /
                var(--adn-energia)
            ),
            transparent 42%
        ),

        linear-gradient(
            145deg,
            hsl(
                var(--adn-matiz)
                58%
                21%
            )
            0%,

            hsl(
                var(--adn-matiz-secundaria)
                62%
                16%
            )
            100%
        );

    transition:
        --adn-matiz 0.75s ease,
        --adn-matiz-secundaria 0.75s ease,
        --adn-energia 0.12s linear;
}