/* Fundo dinâmico com nuvens animadas usado na página de login */
:root{
    --blue:#93C5FD;
    --pink:#FCA5C0;
    --blue-2:#6CA8FF;
    --shadow-blue: 0 12px 24px rgba(54,146,247,.22);
    --shadow-blue-lg: 0 18px 36px rgba(54,146,247,.32);
    --cloud:#ffffff;
}

.visually-hidden,
.sr-only {
    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;
}

*{box-sizing:border-box;}
html{font-size:16px;}
body{
    margin:0;
    font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
    /* degradê vertical com encontro no meio */
    background: linear-gradient(180deg, var(--blue) 0%, var(--pink) 100%);
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:16px;
    position:relative;
    overflow-x:hidden;
    animation: pageEnter 0.5s ease-out;
}

/* ====== CAMADA DE NUVENS (ATRÁS DO CONTEÚDO) ====== */
.sky{
    position:fixed;
    top:0; left:0; right:0;
    height:230px;
    pointer-events:none;
    z-index:0; /* atrás do conteúdo */
    background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0));
}

/* nível 1: vai-e-volta no X */
.cloud{
    position:absolute;
    color:var(--cloud);
    opacity:.93;
    filter: drop-shadow(0 6px 16px rgba(0,0,0,.12));
    will-change: transform;
    animation: swayX var(--sway, 18s) ease-in-out infinite alternate;
}

/* nível 2: flutua no Y (dentro do cloud) */
.cloud__inner{
    display:block;
    animation: float var(--float, 12s) ease-in-out infinite alternate;
}

/* Primeira fileira (topo) — maiores */
.cloud--1{ top:24px;  left: 6%;  font-size:56px;  --sway:1.5s; --float:13s; animation-delay:-3s; }
.cloud--2{ top:48px;  left: 24%; font-size:78px;  opacity:.90;  --sway:1.5s; --float:14s; animation-delay:-9s; }
.cloud--3{ top:20px;  left: 46%; font-size:66px;  opacity:.88;  --sway:1.5s; --float:12s; animation-delay:-15s; }
.cloud--4{ top:74px;  left: 68%; font-size:92px;  opacity:.85;  --sway:1.5s; --float:16s; animation-delay:-21s; }
.cloud--5{ top:42px;  left: 85%; font-size:62px;  opacity:.95;  --sway:1.5s; --float:12s; animation-delay:-6s; }

/* Segunda fileira (mais abaixo) — ligeiramente menores */
.cloud-btm--1{ top:140px; left: 10%; font-size:48px; opacity:.85; --sway:1.5s; --float:14s; animation-delay:-4s; }
.cloud-btm--2{ top:155px; left: 30%; font-size:68px; opacity:.82; --sway:1.5s; --float:16s; animation-delay:-10s; }
.cloud-btm--3{ top:132px; left: 55%; font-size:58px; opacity:.80; --sway:1.5s; --float:15s; animation-delay:-16s; }
.cloud-btm--4{ top:168px; left: 76%; font-size:76px; opacity:.78; --sway:1.5s; --float:18s; animation-delay:-22s; }

/* vai-e-volta horizontal sutil */
@keyframes swayX{
    0%   { transform: translateX(-10px); }
    100% { transform: translateX(10px); }
}

/* flutuar vertical sutil */
@keyframes float{
    0%   { transform: translateY(0) rotate(0.001deg); }
    100% { transform: translateY(-8px) rotate(0.001deg); }
}

/* menos movimento: só um flutuar leve, ainda visível */
@media (prefers-reduced-motion: reduce){
    .cloud{ animation: none; }
    .cloud__inner{ animation: float 10s ease-in-out infinite; }
}

/* ====== SHELL E CARD ====== */
.login-shell{
    width:100%;
    max-width:min(98vw,1040px);
    position:relative;
    z-index:1; /* acima das nuvens */
}

@media (min-width:768px){
    .login-shell{max-width:min(96vw,1120px);}
}

@media (min-width:1280px){
    .login-shell{max-width:1200px;min-width: 500px;}
}

/* Variante estreita para formulários simples (ex: recuperar senha, registro simples) */
.login-shell--narrow{
    max-width: 400px !important;
    min-width: auto !important;
}

.card{
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 28px 56px rgba(0,0,0,.14);
}

.card__header{
    background: #FFF;
    padding:22px 20px 4px;
    text-align:center;
}

.brand{
    width:60%;
    max-width:360px;
    height:auto;
    margin:0 auto 8px;
    display:block;
    filter:drop-shadow(0 6px 12px rgba(0,0,0,.12));
}

.title{
    margin:0;
    color:#c3c3c3;
    font-weight:800;
    letter-spacing:.2px;
    font-size:clamp(1rem,2.1vw,1.25rem);
}

.card__body{padding:clamp(24px, 5vw, 40px);}
.grid{display:grid;grid-template-columns:1fr;gap:clamp(14px,2.4vw,22px);}

/* ====== FORM ELEMENTS ====== */
.field{margin-bottom:14px;}

.label{
    display:block;
    font-size:.92rem;
    font-weight:600;
    color:#000;
    margin-bottom:6px;
}

.input{
    width:100%;
    padding:13px 12px;
    border-radius:12px;
    background:#fff;
    border:1px solid var(--blue);
    box-shadow:0 0 0 3px rgba(54,146,247,.14);
    outline:none;
    transition:box-shadow .16s ease,border-color .16s ease;
}

.input:focus{
    border-color:var(--blue);
    box-shadow:0 0 0 4px rgba(54,146,247,.22);
}

/* ====== BUTTONS ====== */
.forgot{
    display:inline-block;
    font-size:.85rem;
    color:var(--pink);
    text-decoration:none;
    margin:6px 0 18px;
    transition:opacity .15s ease,transform .15s ease;
}

.forgot:hover{
    opacity:.9;
    transform:translateY(-1px);
}

.btn{
    appearance:none;
    border:none;
    border-radius:14px;
    padding:13px 16px;
    width:100%;
    color:#fff;
    font-weight:800;
    letter-spacing:.2px;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    background:linear-gradient(90deg,var(--blue)0%,var(--pink)100%);
    box-shadow:var(--shadow-blue);
    transition:transform .12s ease,box-shadow .12s ease,filter .18s ease,opacity .12s ease;
    -webkit-text-fill-color:#fff;
}

.btn:disabled{
    opacity:.55;
    cursor:not-allowed;
    box-shadow:none;
    filter:grayscale(12%);
}

.btn:not(:disabled):hover{
    color:#fff;
    -webkit-text-fill-color:#fff;
    transform:translateY(-1px);
    box-shadow:var(--shadow-blue-lg);
    filter:brightness(1.05);
}

.btn:not(:disabled):active{
    color:#fff;
    transform:translateY(0);
    box-shadow:var(--shadow-blue);
}

.btn--enabled{animation:glow 1.1s ease-out 1;}

@keyframes glow{
    0%{box-shadow:0 0 0 0 rgba(54,146,247,.28);}
    100%{box-shadow:var(--shadow-blue);}
}

.btn__icon,
.btn__spinner{
    width:18px;
    height:18px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

.btn__spinner{ 
    display:none; 
}

.btn__spinner i{ 
    font-size:16px; 
}

/* ====== DIVIDERS ====== */
.divider{
    display:flex;
    align-items:center;
    gap:12px;
    margin:20px 0;
}

.divider__line{
    flex:1;
    height:1px;
    background:#e6e6e6;
}

.divider__text{
    font-size:.95rem;
    color:var(--pink);
    font-weight:700;
}

.help-divider{
    display:flex;
    align-items:center;
    gap:12px;
    margin:20px 0 10px;
}

.help-divider__line{
    flex:1;
    height:1px;
    background:#eee;
}

.help-divider__text{
    font-size:.95rem;
    color:#9aa4b2;
}

/* ====== SECONDARY BUTTONS ====== */
.btn-outline{
    width:100%;
    padding:12px 16px;
    border-radius:12px;
    border:1.5px solid var(--pink);
    color:var(--pink);
    background:#fff;
    font-weight:800;
    letter-spacing:.2px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    transition:transform .12s ease,box-shadow .12s ease,background .18s ease,color .18s ease;
}

.btn-outline:hover{
    background:#fff5f9;
    transform:translateY(-1px);
    box-shadow:0 12px 20px rgba(251,124,173,.16);
}

.btn-support{
    --btn-bg1:var(--blue);
    --btn-bg2:var(--blue-2);
    display:flex;
    align-items:center;
    gap:.65rem;
    width:100%;
    margin-top:6px;
    padding:12px 16px;
    border-radius:12px;
    background:linear-gradient(90deg,var(--btn-bg1)0%,var(--btn-bg2)100%);
    color:#fff;
    text-decoration:none;
    font-weight:800;
    letter-spacing:.2px;
    box-shadow:var(--shadow-blue);
    transition:transform .12s ease,box-shadow .12s ease,opacity .12s ease;
}

.btn-support:hover{
    transform:translateY(-1px);
    box-shadow:0 18px 36px rgba(54,146,247,.35);
    color:#fff;
}

.btn-support__icon i{font-size:1rem;}

.btn-support__text{flex:1;text-align:center;}

.btn-support__arrow{
    opacity:.95;
    transition:transform .15s ease,opacity .15s ease;
}

.btn-support:hover .btn-support__arrow{
    transform:translateX(4px);
    opacity:1;
}

/* ====== PAGE TRANSITIONS ====== */
@keyframes pageEnter{
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}

.page-exit{
    animation: pageExit 0.4s ease-out forwards;
}

@keyframes pageExit{
    from{
        opacity: 1;
    }
    to{
        opacity: 0;
    }
}

/* ====== RESPONSIVE ====== */
@media (max-width:420px){
    .brand{width:72%;}
    .title{font-size:1.05rem;}
}