/* ====================================
   SISTEMA DE TEMAS (CSS Custom Properties)
   ==================================== */

/* Viewport visível (corrige barra de rolagem/estouro em mobile/desktop) */
:root {
    --vh: 100svh;
}

/* Fallback para navegadores que não suportam 'dvh' */
@supports (height: 100dvh) {

    html,
    body {
        height: 100dvh;
    }
}

/* Paleta de cores e temas padrão */
:root {
    /* Cores Padrão */
    --ink: #222;
    --card: #ffffffC7;
    --card-border: #ffffff8c;
    --focus: #000;
    --grad1: #ffffff;
    --grad2: #f7fbff;
    --b1: #d1ecff;
    --b2: #ffe29b;
    --b3: #c9f2d0;
    --b4: #ffd0b0;
    --prim: #FFB703;
    --sec: #219EBC;
    --acc: #FB8500;
    --clr: #90BE6D;
    --sky: #8ECAE6;
    --btn-grad1: var(--sec);
    --btn-grad2: var(--prim);
    --outline: var(--sec);
}

/* Definições de Temas Específicos */
[data-theme="neutro"] {
    --focus: #219EBC;
    --b1: #8ECAE699;
    --b2: #FFB70359;
    --b3: #90BE6D66;
    --b4: #FB850066;
}

[data-theme="candy"] {
    --ink: #231f20;
    --card: #ffffffc4;
    --card-border: #ffffff94;
    --focus: #ff69b4;
    --grad1: #fff8fb;
    --grad2: #f6fbff;
    --b1: #ffd6e7;
    --b2: #cde9ff;
    --b3: #ffe7b8;
    --b4: #e0ffd9;
    --prim: #ff7ab6;
    --sec: #6bc9ff;
    --acc: #ffa3d1;
    --clr: #8bd3ff;
    --sky: #f7faff;
    --btn-grad1: var(--prim);
    --btn-grad2: var(--sec);
    --outline: #6bc9ff;
}

[data-theme="floresta"] {
    --ink: #1f2a24;
    --card: #ffffffcc;
    --card-border: #ffffff90;
    --focus: #0b7a4b;
    --grad1: #f3fff8;
    --grad2: #eefbf3;
    --b1: #c7f9cc;
    --b2: #b8e0d2;
    --b3: #e2f1e7;
    --b4: #ffd6a5;
    --prim: #2A9D8F;
    --sec: #52B788;
    --acc: #40916C;
    --clr: #74C69D;
    --sky: #D8F3DC;
    --btn-grad1: var(--sec);
    --btn-grad2: var(--acc);
    --outline: #2a9d8f;
}

[data-theme="crepusculo"] {
    --ink: #1e1b27;
    --card: #ffffffcc;
    --card-border: #ffffff90;
    --focus: #6d28d9;
    --grad1: #f7f6ff;
    --grad2: #f2f7ff;
    --b1: #e0e7ff;
    --b2: #f5d0fe;
    --b3: #c7d2fe;
    --b4: #fed7aa;
    --prim: #7C3AED;
    --sec: #2563EB;
    --acc: #A78BFA;
    --clr: #4F46E5;
    --sky: #93C5FD;
    --btn-grad1: var(--prim);
    --btn-grad2: var(--sec);
    --outline: #7c3aed;
}

[data-theme="noite"] {
    --ink: #f5f5f7;
    --card: #0f1220cc;
    --card-border: #ffffff26;
    --focus: #60a5fa;
    --grad1: #0b1020;
    --grad2: #0f1629;
    --b1: #1a1f35;
    --b2: #1e2a40;
    --b3: #223147;
    --b4: #2a3752;
    --prim: #60A5FA;
    --sec: #34D399;
    --acc: #FBBF24;
    --clr: #A78BFA;
    --sky: #93C5FD;
    --btn-grad1: var(--prim);
    --btn-grad2: var(--sec);
    --outline: #60a5fa;
}

[data-theme="oceano"] {
    --ink: #0b2239;
    --card: #ffffffcc;
    --card-border: #ffffff99;
    --focus: #0284c7;
    --grad1: #e6f4ff;
    --grad2: #f5fbff;
    --b1: #cfe8ff;
    --b2: #b3e5ff;
    --b3: #d0f0ff;
    --b4: #a5d8ff;
    --prim: #0EA5E9;
    --sec: #2563EB;
    --acc: #22D3EE;
    --clr: #38BDF8;
    --sky: #93C5FD;
    --btn-grad1: var(--sec);
    --btn-grad2: var(--prim);
    --outline: #0ea5e9;
}

[data-theme="solar"] {
    --ink: #2a1e12;
    --card: #ffffffcc;
    --card-border: #ffffff90;
    --focus: #f59e0b;
    --grad1: #fff8eb;
    --grad2: #fffdf6;
    --b1: #ffe4b5;
    --b2: #ffd699;
    --b3: #ffedcc;
    --b4: #ffd3a4;
    --prim: #F59E0B;
    --sec: #FB923C;
    --acc: #FBBF24;
    --clr: #FDBA74;
    --sky: #FED7AA;
    --btn-grad1: var(--prim);
    --btn-grad2: var(--sec);
    --outline: #f59e0b;
}

[data-theme="pastel"] {
    --ink: #262626;
    --card: #ffffffcc;
    --card-border: #ffffff90;
    --focus: #94a3b8;
    --grad1: #ffffff;
    --grad2: #fbfdff;
    --b1: #e3f2fd;
    --b2: #fce7f3;
    --b3: #e8f5e9;
    --b4: #fff3e0;
    --prim: #A5B4FC;
    --sec: #93C5FD;
    --acc: #FBCFE8;
    --clr: #86EFAC;
    --sky: #FDE68A;
    --btn-grad1: var(--prim);
    --btn-grad2: var(--sec);
    --outline: #93c5fd;
}

[data-theme="neon"] {
    --ink: #FDE047;
    --card: #101010d0;
    --card-border: #ffffff20;
    --focus: #22d3ee;
    --grad1: #0b0b0b;
    --grad2: #161616;
    --b1: #0ea5e955;
    --b2: #22d3ee55;
    --b3: #a78bfa55;
    --b4: #f59e0b55;
    --prim: #22D3EE;
    --sec: #A78BFA;
    --acc: #F59E0B;
    --clr: #34D399;
    --sky: #60A5FA;
    --btn-grad1: var(--prim);
    --btn-grad2: var(--sec);
    --outline: #22d3ee;
}

/* Estilos de texto específicos para temas escuros */
[data-theme="noite"] .subtitle,
[data-theme="neon"] .subtitle {
    color: #cdd5df;
}

[data-theme="neon"] body,
[data-theme="neon"] .title,
[data-theme="neon"] .subtitle,
[data-theme="neon"] label,
[data-theme="neon"] .foot,
[data-theme="neon"] .brand-badge,
[data-theme="neon"] ::placeholder {
    color: var(--ink);
    opacity: .65;
    /* Combinado com o opacity do placeholder */
}

/* Estilos de input para temas escuros */
[data-theme="noite"] .form-control,
[data-theme="neon"] .form-control {
    background: #0d1326;
    color: #e5e7eb;
    border-color: #253153;
}

/* ====================================
   ESTILOS GERAIS E LAYOUT
   ==================================== */

html,
* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    min-height: 100%;
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
    background: radial-gradient(1200px 800px at 0% 100%, var(--b1), transparent 60%),
        radial-gradient(900px 600px at 100% 0%, var(--b2), transparent 60%),
        linear-gradient(135deg, var(--grad1) 0%, var(--grad2) 100%);
    position: relative;
    transition: background .4s ease, color .3s ease;
}

/* Layout de colunas para telas grandes */
@media (min-width: 992px) {
    .kid-left {
        flex: 0 0 52%;
        max-width: 52%;
    }

    .kid-right {
        flex: 0 0 48%;
        max-width: 48%;
    }
}

/* Espaçamento vertical comum para colunas */
.kid-left,
.kid-right {
    padding-block: clamp(16px, 4.5vh, 56px);
}

/* Estilo para o contêiner principal */
main.container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    /* Substitui o padding-block duplicado */
    height: var(--vh);
    /* Mantém a altura total */
    padding-block: clamp(12px, 3vh, 32px);
    /* Mantém o espaçamento vertical */
}


/* ====================================
   COMPONENTES
   ==================================== */

/* Cartão de login/conteúdo */
.login-card {
    backdrop-filter: blur(10px);
    background: var(--card);
    border: 1px solid var(--card-border);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .08);
    border-radius: 24px;
    transition: background .3s ease, color .3s ease, border-color .3s ease;
}

/* Rodapé e últimos elementos do cartão */
.foot,
.login-card> :last-child {
    margin-bottom: 0 !important;
}

/* Identidade da marca */
.brand-badge {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    background: linear-gradient(90deg, var(--btn-grad1), var(--btn-grad2));
    color: #fff;
    padding: .5rem .9rem;
    border-radius: 999px;
    font-weight: 800;
    letter-spacing: .3px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .15);
    font-size: .95rem;
    /* Movido para cá para evitar duplicação */
    padding: .4rem .75rem;
    /* Movido para cá para evitar duplicação */
}

.brand-badge .emoji {
    font-size: 1.2rem;
}

/* Títulos e Subtítulos */
.title {
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: .2px;
    font-size: clamp(1.2rem, 6.2vw, 1.6rem);
    /* Combina as regras de responsividade */
}

.subtitle {
    color: rgba(0, 0, 0, .6);
}

/* Inputs */
.form-control-lg {
    padding-top: .9rem;
    padding-bottom: .9rem;
    border-radius: 14px;
    border: 1.5px solid #eaeaea;
}

.form-control-lg:focus {
    box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--outline) 28%, transparent);
    border-color: var(--outline);
}

/* Botões */
.btn-juju {
    background: linear-gradient(180deg, var(--btn-grad1), var(--btn-grad2));
    border: none;
    border-radius: 14px;
    font-weight: 800;
    letter-spacing: .3px;
    box-shadow: 0 10px 18px color-mix(in srgb, var(--btn-grad1) 25%, transparent);
}

.btn-juju:hover {
    filter: brightness(.98);
}

.btn-outline-juju {
    border-radius: 14px;
    border: 2px solid var(--outline);
    color: #0b5d88;
    font-weight: 700;
    background: rgba(255, 255, 255, .6);
}

.btn-outline-juju:hover {
    background: var(--outline);
    color: #fff;
    border-color: var(--outline);
}

/* Botões de contorno para temas escuros */
[data-theme="noite"] .btn-outline-juju,
[data-theme="neon"] .btn-outline-juju {
    color: #e5e7eb;
    background: #0f1629;
}

/* Mascote/ilustração */
.mascot {
    width: 100%;
    aspect-ratio: 1/1;
    background: radial-gradient(60% 60% at 60% 30%, #fff 0%, #eef4ff 60%, transparent 61%),
        radial-gradient(60% 60% at 40% 70%, #fff 0%, #f2fff6 60%, transparent 61%);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, .6);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .06);
    position: relative;
    overflow: hidden;
    transition: background .3s ease, border-color .3s ease;
    max-width: clamp(320px, 30vw, 320px);
    /* Otimizado com clamp */
}

/* Mascote para temas escuros */
[data-theme="noite"] .mascot,
[data-theme="neon"] .mascot {
    border-color: #24324f;
    background: radial-gradient(60% 60% at 60% 30%, #13203b 0%, #0f1629 60%, transparent 61%),
        radial-gradient(60% 60% at 40% 70%, #0f1629 0%, #101a33 60%, transparent 61%);
}

.mascot:before,
.mascot:after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .06);
}

.mascot:before {
    width: 110px;
    height: 110px;
    top: 22%;
    left: 22%;
}

.mascot:after {
    width: 80px;
    height: 80px;
    bottom: 18%;
    right: 18%;
}

/* ===== Animação suave dos círculos do mascote ===== */
.mascot {
    /* amplitude do “balanço” (ajuste se quiser mais/menos movimento) */
    --bob-x: 12px;
    --bob-y: 10px;
}

/* bolha maior (::before) */
.mascot::before {
    will-change: transform;
    transform-origin: 50% 80%;
    animation: masc-bob-a 6.6s ease-in-out infinite;
    animation-delay: .4s;
}

/* bolha menor (::after) */
.mascot::after {
    will-change: transform;
    transform-origin: 50% 80%;
    animation: masc-bob-b 7.4s ease-in-out infinite;
    animation-delay: 1s;
}

/* keyframes: leves translações + micro-scale */
@keyframes masc-bob-a {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    25% {
        transform: translate(var(--bob-x), calc(var(--bob-y) * -0.6)) scale(1.015);
    }

    50% {
        transform: translate(calc(var(--bob-x) * 0.4), calc(var(--bob-y) * 0.4)) scale(1.01);
    }

    75% {
        transform: translate(calc(var(--bob-x) * -0.3), calc(var(--bob-y) * -0.2)) scale(1.02);
    }
}

@keyframes masc-bob-b {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    25% {
        transform: translate(calc(var(--bob-x) * -0.5), var(--bob-y)) scale(0.985);
    }

    50% {
        transform: translate(calc(var(--bob-x) * 0.2), calc(var(--bob-y) * -0.3)) scale(0.99);
    }

    75% {
        transform: translate(calc(var(--bob-x) * -0.2), calc(var(--bob-y) * 0.2)) scale(0.98);
    }
}

/* acessibilidade: respeita usuários que preferem menos movimento */
@media (prefers-reduced-motion: reduce) {

    .mascot::before,
    .mascot::after {
        animation: none !important;
    }
}

/* Círculos decorativos para temas escuros */
[data-theme="noite"] .mascot:before,
[data-theme="noite"] .mascot:after,
[data-theme="neon"] .mascot:before,
[data-theme="neon"] .mascot:after {
    background: #1b2642;
    box-shadow: none;
}

/* Chip/Badge decorativo */
.chip {
    position: absolute;
    bottom: 14px;
    left: 14px;
    background: linear-gradient(90deg, var(--btn-grad1), var(--btn-grad2));
    color: #fff;
    padding: .4rem .7rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: .9rem;
}

/* Estilos para links de ajuda */
.helper a {
    text-decoration: none;
}

.helper a:hover {
    text-decoration: underline;
}

/* Estilos de rodapé */
.foot {
    font-size: .9rem;
    color: #6b7280;
}

[data-theme="noite"] .foot,
[data-theme="neon"] .foot {
    color: #a8b2c1;
}

/* ====================================
   SELETOR DE TEMAS
   ==================================== */

.theme-card {
    background: rgba(255, 255, 255, .6);
    border: 1px dashed color-mix(in srgb, var(--outline) 40%, transparent);
    border-radius: 16px;
    padding: .75rem 1rem;
    display: inline-block;
    margin-bottom: clamp(8px, 2vh, 16px);
}

/* Cartão do seletor de temas para temas escuros */
[data-theme="noite"] .theme-card,
[data-theme="neon"] .theme-card {
    background: rgba(15, 22, 41, .5);
    border-color: #2a395b;
}

.theme-title {
    font-weight: 800;
    font-size: .95rem;
    margin: 0 0 .5rem 0;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.theme-pills {
    gap: .5rem;
    flex-wrap: wrap;
}

.theme-pill {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.theme-pill:focus-visible {
    outline: 2px solid var(--focus);
}

/* Cores das pílulas de tema */
.pill-neutro {
    background: linear-gradient(135deg, #219EBC 0%, #FFB703 100%);
}

.pill-candy {
    background: linear-gradient(135deg, #ff7ab6 0%, #6bc9ff 100%);
}

.pill-floresta {
    background: linear-gradient(135deg, #52B788 0%, #2A9D8F 100%);
}

.pill-crepusculo {
    background: linear-gradient(135deg, #7C3AED 0%, #2563EB 100%);
}

.pill-noite {
    background: linear-gradient(135deg, #111827 0%, #1f2937 100%);
    border-color: #2f3b55;
}

.pill-oceano {
    background: linear-gradient(135deg, #2563EB 0%, #0EA5E9 100%);
}

.pill-solar {
    background: linear-gradient(135deg, #F59E0B 0%, #FB923C 100%);
}

.pill-pastel {
    background: linear-gradient(135deg, #A5B4FC 0%, #93C5FD 100%);
}

.pill-neon {
    background: conic-gradient(from 180deg, #22D3EE, #A78BFA, #F59E0B, #34D399, #22D3EE);
    border-color: #313131;
}


/* ====================================
   ANIMAÇÕES
   ==================================== */

/* Animação para as bolhas */
@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-18px);
    }
}

/* Figuras decorativas de bolhas */
.bubble {
    position: absolute;
    border-radius: 50%;
    filter: blur(26px);
    opacity: .35;
    pointer-events: none;
    animation: float 14s ease-in-out infinite;
}

.b1 {
    width: 240px;
    height: 240px;
    background: var(--b1);
    top: 10%;
    left: 8%;
    animation-delay: 0s;
}

.b2 {
    width: 320px;
    height: 320px;
    background: var(--b2);
    bottom: 6%;
    right: 6%;
    animation-delay: 2s;
}

.b3 {
    width: 180px;
    height: 180px;
    background: var(--b3);
    top: 58%;
    left: 14%;
    animation-delay: 4s;
}

.b4 {
    width: 140px;
    height: 140px;
    background: var(--b4);
    top: 18%;
    right: 18%;
    animation-delay: 6s;
}


/* ====================================
   ESTILOS RESPONSIVOS
   ==================================== */

/* Tablet e Mobile (≤ 991.98px) */
@media (max-width: 991.98px) {

    /* Altera a ordem dos elementos no layout */
    .kid-right {
        order: 1;
    }

    .kid-left {
        order: 2;
    }

    /* Ajusta o contêiner principal para telas menores */
    main.container {
        height: auto;
        min-height: var(--vh);
        padding-block: 12px;
    }

    /* Ajusta o espaçamento das colunas e gutters */
    .kid-left,
    .kid-right {
        padding-block: 12px;
    }

    .row.g-4 {
        --bs-gutter-y: .75rem;
        --bs-gutter-x: 1rem;
    }

    /* Reduz o tamanho da tipografia para se adequar à tela */
    .title {
        font-size: clamp(1.4rem, 5vw, 1.9rem);
    }

    .subtitle {
        font-size: clamp(.95rem, 3.2vw, 1.05rem);
    }

    /* Ajusta o estilo do cartão */
    .login-card {
        border-radius: 18px;
        box-shadow: 0 12px 28px rgba(0, 0, 0, .08);
    }

    /* Ajusta o tamanho e alinhamento do mascote */
    .mascot {
        max-width: clamp(280px, 70vw, 520px) !important;
        margin: 0 auto 1rem;
    }

    /* Ajusta a largura do cartão de tema */
    .theme-card {
        width: 100%;
    }

    /* Remove a centralização do body e main para fluir no topo */
    html,
    body {
        display: block;
        min-height: 100dvh;
    }

    main.container {
        display: block;
        height: auto;
        min-height: 100dvh;
        padding-top: 16px;
    }

    .row.align-items-center {
        align-items: flex-start !important;
    }
}

/* Mobile estreito (≤ 575.98px) */
@media (max-width: 575.98px) {
    .theme-card {
        width: 100%;
        margin-bottom: .75rem;
    }

    /* Ajusta o espaçamento do contêiner principal */
    main.container {
        padding-top: 12px;
    }

    /* Esconde o mascote e o chip para focar no formulário */
    .mascot,
    .chip {
        display: none !important;
    }

    /* Garante que a coluna esquerda continue visível (com exceção do mascote) */
    .kid-left {
        display: block !important;
        padding-bottom: 1rem;
    }

    /* Ajusta o padding do cartão */
    .login-card {
        padding: 1.25rem !important;
        border-radius: 16px;
    }

    /* Ajusta a tipografia novamente para telas muito pequenas */
    .title {
        font-size: clamp(1.2rem, 6.2vw, 1.6rem);
    }
}

/* Opcional: Oculta a coluna da esquerda em telas entre 576px e 767.98px */
@media (min-width: 576px) and (max-width: 767.98px) {

    .kid-left,
    .bubble {
        display: none !important;
    }

    .kid-right {
        order: 1;
    }
}

/* Ajustes para telas com altura limitada (telas de laptop ou quando o teclado está aberto) */
@media (max-height: 700px) {
    .theme-card {
        transform: scale(.96);
        transform-origin: top center;
    }
}

@media (max-height: 620px) {
    .subtitle {
        display: none;
    }

    .theme-card {
        transform: scale(.9);
        transform-origin: top center;
    }

    .brand-badge {
        margin-bottom: .5rem;
    }

    .kid-left,
    .kid-right {
        padding-block: 8px;
    }

    main.container {
        padding-block: 8px;
    }

    .bubble {
        display: none;
    }

    .mascot {
        max-width: clamp(220px, 56vw, 440px) !important;
    }
}

/* Opcional: Correção de rolagem de 1-2px no desktop */
@media (min-width: 992px) {
    main.container {
        height: calc(var(--vh) - 2px);
    }
}

.btn .bi {
    pointer-events: none;
}