/* ====== Paleta / Vars ====== */
:root{
--bg-1: #070b1f;          /* fundo principal (azul bem escuro) */
--bg-2: #0d1240;          /* gradiente leve */
--panel: #0e1443;         /* cartela */
--panel-border: #2436ff;  /* brilho azul do contorno */
--panel-shadow: 0 12px 40px rgba(36, 54, 255, 0.25);
--label: #a7b0d9;         /* texto secundário */
--text: #e7ebff;          /* texto principal */
--input-bg: #e9eef9;      /* campos claros, como na imagem */
--input-text: #0F1179;
--input-placeholder: #0F1179;
--brand: #ffffff;         /* título (opcional) */
--action: #0F1179;        /* botão */
--action-hover: #434378;
--action-text: #ffffff;
--radius-xl: 22px;
}

/* ====== Reset mínimo ====== */
*{ 
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    overflow-x: hidden;   /* ou hidden */
    overflow-y: hidden;
}

body{
    margin:0;
    padding: 0;
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue", sans-serif;
    color: var(--text);
    background: linear-gradient(90deg, #070718 42%, #050535 73%);
    min-height: 100dvh;
}

/* ====== Layout ====== */
.page{
    max-height: 100dvh;
    height: 100dvh;
    display: flex;
    justify-content: center;
    align-items: center;
    place-items: center;
    padding: 24px;
}

.panel{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 15px;
width: min(500px, 94vw);
height: min(600px);
border-radius: 15%;
border: 10px solid rgba(36,54,255,0.45);
box-shadow: var(--panel-shadow);
position: relative;
/* background-color: yellow; */
}

.imgLogo{
    transform: scale(0.4);
}

/* ====== Header opcional ====== */
.panel__header{
text-align: center;
width: 100%;
height: 100px;
/* background-color: green; */
display: flex;
justify-content: center;
align-items: center;
}
.brand{
margin:0 0 8px;
font-size: 36px;
font-weight: 800;
letter-spacing: 0.5px;
color: var(--brand);
}
.brand__tech{
display:inline-block;
font-size: 12px;
font-weight: 700;
letter-spacing: 4px;
text-transform: uppercase;
opacity: .8;
margin-left: 6px;
}

/* ====== Form ====== */
.form{
gap: 25px;
width: 70%;
display: flex;
flex-direction: column;
align-items: center;
/* background-color: red; */
}

.field{ 
    display: grid; 
    gap: 8px; 
    width: 80%;
    /* background-color: yellow; */
}

.field__label{
font-size: 14px;
color: white;
}

.field__input{
padding-left: 10px;
width: 100%;
height: 44px;
border-radius: 12px;
border: none;
outline: none;
background: var(--input-bg);
color: var(--input-text);
font-size: 15px;
transition: box-shadow .2s ease, transform .05s ease;
box-shadow: inset 0 0 0 1px rgba(17,22,55,0.04);
}

.field__input::placeholder{ color: var(--input-placeholder); }

.field__input:focus{
box-shadow:
inset 0 0 0 2px rgba(36,54,255,0.6),
0 0 0 4px rgba(36,54,255,0.18);
}

/* ====== Botão ====== */
.btn{
width: 44%;
height: 44px;
border: none;
border-radius: 14px;
background: var(--action);
color: var(--action-text);
font-weight: 700;
letter-spacing: .6px;
cursor: pointer;
transition: transform .06s ease, filter .2s ease, background .2s ease;
}

.btn:hover{ background: var(--action-hover); }
.btn:active{ transform: translateY(1px); }

/* ====== Acessibilidade ====== */
.btn:focus-visible,
.field__input:focus-visible{
outline: 3px solid rgba(36,54,255,0.6);
outline-offset: 2px;
}

.bolasAtendentes{
    width: 500px;
    height: auto;
    z-index: 0;
    position: fixed;
    bottom: -8%;
    left: -8%;
}

.bolasAnalistas{
    width: 500px;
    height: auto;
    z-index: -1;
    position: fixed;
    bottom: -15%;
    right: -5%;
}


/* ====== Telas menores ====== */
@media (max-width: 380px){
.brand{ font-size: 28px; }
.panel{ padding: 28px 22px 22px; }
}

@media (max-width: 600px) {
    /* ====== Paleta / Vars ====== */
    :root{
        --bg-1: #070b1f;          /* fundo principal (azul bem escuro) */
        --bg-2: #0d1240;          /* gradiente leve */
        --panel: #0e1443;         /* cartela */
        --panel-border: #2436ff;  /* brilho azul do contorno */
        --panel-shadow: 0 12px 40px rgba(36, 54, 255, 0.25);
        --label: #a7b0d9;         /* texto secundário */
        --text: #e7ebff;          /* texto principal */
        --input-bg: #e9eef9;      /* campos claros, como na imagem */
        --input-text: #0F1179;
        --input-placeholder: #0F1179;
        --brand: #ffffff;         /* título (opcional) */
        --action: #0F1179;        /* botão */
        --action-hover: #434378;
        --action-text: #ffffff;
        --radius-xl: 22px;
    }

    /* ====== Reset mínimo ====== */
    *{ 
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    html, body {
        height: 100%;
        overflow-x: hidden;   /* ou hidden */
        overflow-y: hidden;
    }

    body{
        margin:0;
        padding: 0;
        font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue", sans-serif;
        color: var(--text);
        background: linear-gradient(90deg, #070718 42%, #050535 73%);
        min-height: 100dvh;
    }

    /* ====== Layout ====== */
    .page{
        max-height: 100dvh;
        height: 100dvh;
        display: flex;
        justify-content: center;
        align-items: center;
        place-items: center;
        padding: 24px;
    }

    .panel{
        padding-top: 20px;
        justify-content: start;
        align-items: center;
        display: flex;
        flex-direction: column;
        gap: 15px;
        width: min(350px);
        height: min(450px);
        border-radius: 25px;
        border: 10px solid rgba(36,54,255,0.45);
        box-shadow: var(--panel-shadow);
        position: relative;
        /* background-color: yellow; */
    }

    
    /* ====== Header opcional ====== */
    .panel__header{
        width: 100%;
        height: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
        /* background-color: green; */
    }

    .imgLogo {
    transform: scale(0.3);
    }

    .brand{
        margin:0 0 8px;
        font-size: 36px;
        font-weight: 800;
        letter-spacing: 0.5px;
        color: var(--brand);
    }
    .brand__tech{
        display:inline-block;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 4px;
        text-transform: uppercase;
        opacity: .8;
        margin-left: 6px;
    }

    /* ====== Form ====== */
    .form{
        gap: 25px;
        width: 70%;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* background-color: red; */
    }

    .field{ 
        display: grid; 
        gap: 8px; 
        width: 95%;
        /* background-color: yellow; */
    }

    .field__label{
    font-size: 14px;
    color: white;
    }

    .field__input{
    padding-left: 10px;
    width: 100%;
    height: 44px;
    border-radius: 12px;
    border: none;
    outline: none;
    background: var(--input-bg);
    color: var(--input-text);
    font-size: 15px;
    transition: box-shadow .2s ease, transform .05s ease;
    box-shadow: inset 0 0 0 1px rgba(17,22,55,0.04);
    }

    .field__input::placeholder{ color: var(--input-placeholder); }

    .field__input:focus{
    box-shadow:
    inset 0 0 0 2px rgba(36,54,255,0.6),
    0 0 0 4px rgba(36,54,255,0.18);
    }

    /* ====== Botão ====== */
    .btn{
    width: 55%;
    height: 55px;
    border: none;
    border-radius: 14px;
    background: var(--action);
    color: var(--action-text);
    font-weight: 700;
    letter-spacing: .6px;
    cursor: pointer;
    transition: transform .06s ease, filter .2s ease, background .2s ease;
    }

    .btn:hover{ background: var(--action-hover); }
    .btn:active{ transform: translateY(1px); }

    /* ====== Acessibilidade ====== */
    .btn:focus-visible,
    .field__input:focus-visible{
    outline: 3px solid rgba(36,54,255,0.6);
    outline-offset: 2px;
    }

    .bolasAtendentes{
        width: 500px;
        height: auto;
        z-index: -2;
        position: fixed;
        bottom: -100px;
        left: -240px;
        /* background-color: red; */
    }

    .bolasAnalistas{
        width: 500px;
        height: auto;
        z-index: -1;
        position: fixed;
        bottom: -120px;
        right: -270px;
        /* background-color: yellow; */

    }
}