/* ------------------------------------------------------------------
   Aqua-Info — identidade "Oceano Profundo" (2026-10-23) aplicada ao
   login e à recuperação de password. Usa as variáveis --ai-* de
   /_inc/_css/aquainfo.css (cópia de AquaInfo-Site/_marca/aquainfo.css):
   painel de marca em azul-oceano profundo, formulário num cartão
   branco sobre o fundo claro do site.
   Carregado DEPOIS de login-1.css e de /_inc/_css/style.css — só
   redesenha cores/tipografia/sombras, nunca a estrutura/JS (login.js).
------------------------------------------------------------------- */

/* ---------- Painel de marca (aside) ---------- */

.backgroundAquainfo {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(70% 60% at 20% 0%, rgba(6, 182, 212, 0.28), transparent 70%),
        radial-gradient(60% 50% at 100% 100%, rgba(22, 82, 214, 0.35), transparent 70%),
        var(--ai-gradiente-oceano);
}

.backgroundAquainfo .hero__aurora {
    position: absolute;
    inset: -20%;
    z-index: 0;
    pointer-events: none;
}

.backgroundAquainfo .hero__aurora span {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .35;
    animation: aiDrift 22s ease-in-out infinite;
}

.backgroundAquainfo .hero__aurora span:nth-child(1) {
    width: 60vh;
    height: 60vh;
    top: -12%;
    left: -10%;
    background: radial-gradient(circle, var(--ai-acao), transparent 70%);
}

.backgroundAquainfo .hero__aurora span:nth-child(2) {
    width: 50vh;
    height: 50vh;
    bottom: -16%;
    right: -12%;
    background: radial-gradient(circle, var(--ai-ciano-vivo), transparent 70%);
    animation-duration: 26s;
    animation-delay: -6s;
}

@keyframes aiDrift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(4%, -6%) scale(1.08); }
}

.backgroundAquainfo .hero__bubbles {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.backgroundAquainfo .hero__bubbles span {
    position: absolute;
    bottom: -10%;
    display: block;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .45), rgba(255, 255, 255, .04) 70%);
    border: 1px solid rgba(255, 255, 255, .2);
    animation: aiRise linear infinite;
}

@keyframes aiRise {
    from { transform: translateY(0) translateX(0); opacity: 0; }
    10%  { opacity: .7; }
    90%  { opacity: .4; }
    to   { transform: translateY(-115vh) translateX(30px); opacity: 0; }
}

.backgroundAquainfo .hero__bubbles span:nth-child(1) { left: 12%; width: 14px; height: 14px; animation-duration: 14s; animation-delay: -2s; }
.backgroundAquainfo .hero__bubbles span:nth-child(2) { left: 28%; width: 8px;  height: 8px;  animation-duration: 10s; animation-delay: -6s; }
.backgroundAquainfo .hero__bubbles span:nth-child(3) { left: 47%; width: 18px; height: 18px; animation-duration: 17s; animation-delay: -1s; }
.backgroundAquainfo .hero__bubbles span:nth-child(4) { left: 65%; width: 10px; height: 10px; animation-duration: 12s; animation-delay: -9s; }
.backgroundAquainfo .hero__bubbles span:nth-child(5) { left: 82%; width: 15px; height: 15px; animation-duration: 15s; animation-delay: -4s; }

.backgroundAquainfo .kt-grid__item { position: relative; z-index: 2; }

/* Logótipo: ícone da app + nome, em branco sobre o oceano */
.backgroundAquainfo .kt-login__logo .ai-marca {
    color: #fff !important; /* aquainfo.css força var(--ai-texto) com !important */
    gap: 14px;
}

.backgroundAquainfo .kt-login__logo .ai-marca img {
    width: 56px;
    height: 56px;
    filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .35));
    animation: aiFloat 5s ease-in-out infinite;
}

.backgroundAquainfo .kt-login__logo .ai-marca-nome {
    font-size: 1.6rem;
}

@keyframes aiFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

.kt-login.kt-login--v1 .kt-login__aside .kt-login__title {
    font-weight: 800;
    letter-spacing: -0.03em;
    background: linear-gradient(100deg, #ffffff 35%, #7DD3FC);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.kt-login.kt-login--v1 .kt-login__aside .kt-login__subtitle {
    font-weight: 400;
    line-height: 1.6;
    color: rgba(255, 255, 255, .8);
}

.backgroundAquainfo .copy-right {
    color: rgba(255, 255, 255, .7) !important;
}

.backgroundAquainfo .kt-login__info .kt-login__copyright {
    color: rgba(255, 255, 255, .5);
}

@media (prefers-reduced-motion: reduce) {
    .backgroundAquainfo .kt-login__logo img,
    .backgroundAquainfo .hero__aurora span,
    .backgroundAquainfo .hero__bubbles span {
        animation: none !important;
    }
}

/* ---------- Painel do formulário ---------- */

.kt-login.kt-login--v1 .kt-login__wrapper {
    background-color: var(--ai-abismo);
    background-image: var(--ai-gradiente-fundo);
    background-repeat: no-repeat;
}

.kt-login.kt-login--v1 .kt-login__wrapper .kt-login__body .kt-login__form {
    background: var(--ai-superficie);
    border: 1px solid var(--ai-linha);
    border-radius: var(--ai-raio-lg);
    box-shadow: var(--ai-sombra-lg);
    padding: 3rem 3.5rem;
    /* .kt-login__form já tem width:100% (login-1.css) sem padding próprio —
       box-sizing: border-box garante que este padding entra dentro desses
       100% em vez de somar e empurrar o cartão para fora do ecrã em mobile. */
    box-sizing: border-box;
}

.kt-login.kt-login--v1 .kt-login__wrapper .kt-login__body .kt-login__form .kt-login__title > h3 {
    color: var(--ai-texto);
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* Inputs — a especificidade da regra original (encadeada até
   .form-control) obriga a !important aqui; fica contido a esta
   página, nunca sai do contexto .kt-login. */
.kt-login .form-control {
    background: var(--ai-superficie) !important;
    border: 1px solid var(--ai-linha-forte) !important;
    border-radius: var(--ai-raio) !important;
    height: 50px !important;
    padding-left: 1rem !important;
    color: var(--ai-texto) !important;
    box-shadow: none !important;
}

.kt-login .form-control::placeholder {
    color: var(--ai-texto-3) !important;
}

.kt-login .form-control:focus {
    border-color: var(--ai-acao) !important;
    box-shadow: var(--ai-foco) !important;
}

.kt-login .kt-login__link-forgot {
    color: var(--ai-acao) !important;
    font-weight: 500;
}

.kt-login .kt-login__link-forgot:hover {
    color: var(--ai-acao-hover) !important;
}

.kt-login .btn-primary {
    background: var(--ai-acao) !important;
    border: 0 !important;
    border-radius: var(--ai-raio-pill) !important;
    box-shadow: 0 6px 16px rgba(22, 82, 214, 0.25);
}

.kt-login .btn-primary:hover,
.kt-login .btn-primary:focus,
.kt-login .btn-primary:active {
    background: var(--ai-acao-hover) !important;
}

/* Fica dentro do cartão branco — usa o botão secundário do site. */
.kt-login .btn-secondary {
    border-radius: var(--ai-raio-pill) !important;
}

@media (max-width: 1024px) {
    .kt-login.kt-login--v1 .kt-login__wrapper .kt-login__body .kt-login__form {
        padding: 2.25rem 1.75rem;
    }
}

/* Rótulos dos campos (2026-11-03): o espaço fica por cima do rótulo e não entre o rótulo e o campo */
.kt-login.kt-login--v1 .kt-login__wrapper .kt-login__body .kt-login__form .form-group label {
    display: block;
    margin: 1.25rem 0 0.35rem;
    font-weight: 600;
    color: var(--ai-texto-2);
}
.kt-login.kt-login--v1 .kt-login__wrapper .kt-login__body .kt-login__form .kt-form .form-group label + .form-control,
.kt-login.kt-login--v1 .kt-login__wrapper .kt-login__body .kt-login__form .form-group label + .form-control {
    margin-top: 0;
}