/*==================================================
CLICKE AGENDE
LOGIN / CADASTRO
==================================================*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/*==================================================
VARIÁVEIS
==================================================*/

:root{

    --panel:#ffffff;
    --panel-soft:#f5f7f9;

    --text:#1b2a33;
    --muted:#61717c;

    --line:#dbe4ea;

    --accent:#2f6f73;
    --accent-strong:#244d58;
    --accent-soft:#e7f1f1;

    --danger:#c9333f;
    --success:#157f4f;

}

/*==================================================
TEMA PROFISSIONAL
==================================================*/

body[data-perfil="profissional"]{

    --accent:#3b82f6;
    --accent-strong:#1e40af;
    --accent-soft:#eef6ff;

}

/*==================================================
RESET
==================================================*/

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:Inter,Arial,sans-serif;

    background:
    linear-gradient(
        180deg,
        #ffffff,
        #f8fafb
    );

    color:var(--text);

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:24px;

    overflow:hidden;

}

/*==================================================
CARD PRINCIPAL
==================================================*/

.container{

    position:relative;

    width:min(390px,100%);

    max-height:90vh;

    background:#ffffff;

    border:1px solid var(--line);

    border-radius:14px;

    padding:16px 24px 20px;

    text-align:center;

    overflow-x:hidden;

    overflow-y:auto;

    /* REMOVER ESTA LINHA */
    /* scrollbar-gutter:stable; */

    box-shadow:
        0 10px 28px rgba(27,42,51,.06);

    animation:fadeUp .45s ease;

}

.container::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    right:0;

    height:4px;

    border-radius:14px 14px 0 0;

    background:linear-gradient(
        90deg,
        var(--accent),
        var(--accent-strong)
    );

}

/*==================================================
SCROLL DO CARD
==================================================*/

.container::-webkit-scrollbar{

    width:7px;

}

.container::-webkit-scrollbar-track{

    background:transparent;

}

.container::-webkit-scrollbar-thumb{

    background:#c7d3d9;

    border-radius:20px;

}

.container::-webkit-scrollbar-thumb:hover{

    background:var(--accent);

}

/*==================================================
LOGO
==================================================*/

.logo-top{

    display:block;

    width:160px;

    margin:4px auto 8px;

}

/*==================================================
SUBTÍTULO
==================================================*/

.subtitulo{

    width:95%;

    margin:0 auto 14px;

    color:var(--muted);

    font-size:13px;

    line-height:1.6;

}

/*==================================================
TÍTULO
==================================================*/

h1{

    margin-bottom:18px;

    color:var(--text);

    font-size:22px;

    font-weight:800;

    line-height:1.1;

    letter-spacing:-.6px;

}


/* PARTE 2*/

/*==================================================
TIPO DE ACESSO
==================================================*/

.contexto-acesso{

    margin-bottom:18px;

    padding:12px;

    border:1px solid var(--line);

    border-radius:12px;

    background:linear-gradient(
        180deg,
        #ffffff,
        var(--panel-soft)
    );

}

.contexto-copy{

    margin-bottom:12px;

}

.contexto-copy span{

    display:block;

    font-size:11px;

    font-weight:800;

    letter-spacing:.08em;

    text-transform:uppercase;

    color:var(--accent-strong);

}

/*==================================================
SELETOR
==================================================*/

.perfil-switch{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:12px;

}

/*==================================================
CARDS
==================================================*/

.perfil-option{

    position:relative;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    min-height:74px;

    padding:12px 10px;

    background:#fff;

    border:1px solid var(--line);

    border-radius:10px;

    color:var(--muted);

    cursor:pointer;

    overflow:hidden;

    transition:
        border .25s ease,
        background .25s ease,
        color .25s ease;

}

/*==================================================
CLIENTE
==================================================*/

#btnCliente:hover{

    border-color:#2f6f73;

    background:#fafdfd;

}

/*==================================================
NEGÓCIO
==================================================*/

#btnNegocio:hover{

    border-color:#3b82f6;

    background:#fbfcff;

}

/*==================================================
TEXTO
==================================================*/

.perfil-option span{

    font-size:15px;

    font-weight:800;

    margin-bottom:4px;

}

.perfil-option small{

    font-size:11px;

    font-weight:600;

    line-height:1.35;

    opacity:.85;

}

/*==================================================
CLIENTE ATIVO
==================================================*/

#btnCliente.active{

    background:#fff;

    border:2px solid #2f6f73;

    color:#244d58;

}

#btnCliente.active::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:4px;

    background:linear-gradient(
        90deg,
        #2f6f73,
        #244d58
    );

}

/*==================================================
NEGÓCIO ATIVO
==================================================*/

#btnNegocio.active{

    background:#fff;

    border:2px solid #3b82f6;

    color:#1e40af;

}

#btnNegocio.active::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:4px;

    background:linear-gradient(
        90deg,
        #3b82f6,
        #1e40af
    );

}

/*==================================================
FOCO
==================================================*/

.perfil-option:focus-visible{

    outline:none;

    box-shadow:none;

}

.perfil-option:disabled,
.perfil-option.bloqueado{

    cursor:not-allowed;

    opacity:.7;

}

/*PARTE 3 */

/*==================================================
INPUTS
==================================================*/

.input-group{

    position:relative;

    margin-bottom:14px;

}

.input-group input{

    width:100%;

    height:50px;

    padding:16px 14px 8px 46px;

    border:1px solid var(--line);

    border-radius:10px;

    background:#ffffff;

    color:var(--text);

    font-size:15px;

    font-family:inherit;

    transition:
        border-color .25s ease,
        background .25s ease,
        box-shadow .25s ease;

}

.input-group input:hover{

    border-color:#c5d2d8;

}

.input-group input:focus{

    outline:none;

    border-color:var(--accent);

    background:#ffffff;

    box-shadow:
        0 0 0 3px rgba(47,111,115,.12);

}

/*==================================================
LABEL FLUTUANTE
==================================================*/

.input-group label{

    position:absolute;

    left:46px;

    top:50%;

    transform:translateY(-50%);

    padding:0 6px;

    background:#ffffff;

    color:#8a99a3;

    font-size:13px;

    pointer-events:none;

    transition:.22s ease;

}

.input-group input:focus + label,
.input-group input:not(:placeholder-shown) + label,
.input-group input:-webkit-autofill + label{

    top:0;

    transform:translateY(-50%);

    color:var(--accent);

    font-size:11px;

    font-weight:700;

}

/*==================================================
ÍCONES
==================================================*/

.icon{

    position:absolute;

    left:15px;

    top:50%;

    width:18px;

    transform:translateY(-50%);

    opacity:.55;

    filter:grayscale(100%);

    transition:.25s ease;

}

.input-group input:focus ~ .icon,
.input-group input:not(:placeholder-shown) ~ .icon,
.input-group input:-webkit-autofill ~ .icon{

    opacity:1;

    filter:none;

    transform:
        translateY(-50%)
        scale(1.08);

}

/*==================================================
LINKS
==================================================*/

a{

    color:var(--accent);

    text-decoration:none;

    font-weight:700;

    transition:color .25s ease;

}

a:hover{

    color:var(--accent-strong);

}

/*==================================================
AUTOFILL
==================================================*/

input:-webkit-autofill{

    -webkit-box-shadow:
        0 0 0 1000px #ffffff inset !important;

    -webkit-text-fill-color:var(--text) !important;

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

}


/* PARTE 4 */ 


/*==================================================
BOTÕES
==================================================*/

button,
.google-btn{

    width:100%;

    min-height:46px;

    border-radius:10px;

    font-family:inherit;

}

button{

    border:none;

    background:

    linear-gradient(
        135deg,
        var(--accent),
        var(--accent-strong)
    );

    color:#ffffff;

    font-size:15px;

    font-weight:700;

    cursor:pointer;

    transition:
        background .25s ease,
        transform .20s ease,
        box-shadow .25s ease;

    box-shadow:
        0 8px 20px rgba(47,111,115,.16);

}

button:hover{

    transform:translateY(-1px);

    box-shadow:
        0 12px 24px rgba(47,111,115,.22);

}

button:active{

    transform:translateY(0);

}

/* Olho custom: só no celular (desktop usa o nativo do navegador) */
.input-group--senha button.toggle-senha{
    display:none;
}

@media (max-width:768px){
    .input-group--senha input{
        padding-right:42px;
    }

    .input-group--senha button.toggle-senha{
        position:absolute;
        right:10px;
        top:50%;
        z-index:2;
        display:flex;
        align-items:center;
        justify-content:center;
        width:auto;
        min-width:0;
        min-height:0;
        height:auto;
        margin:0;
        padding:4px;
        border:none;
        border-radius:0;
        background:transparent;
        color:#8a99a3;
        font-size:0;
        font-weight:400;
        box-shadow:none;
        cursor:pointer;
        -webkit-tap-highlight-color:transparent;
        transform:translateY(-50%);
        transition:color .2s ease;
    }

    .input-group--senha button.toggle-senha:hover,
    .input-group--senha button.toggle-senha:active,
    .input-group--senha button.toggle-senha:focus-visible{
        background:transparent;
        color:var(--accent);
        transform:translateY(-50%);
        box-shadow:none;
    }

    .input-group--senha button.toggle-senha svg{
        width:18px;
        height:18px;
        fill:none;
        stroke:currentColor;
        stroke-width:2;
        stroke-linecap:round;
        stroke-linejoin:round;
        pointer-events:none;
    }

    .input-group--senha button.toggle-senha .eye-open{
        display:none;
    }

    .input-group--senha button.toggle-senha .eye-closed{
        display:block;
    }

    .input-group--senha button.toggle-senha.is-revelada .eye-open{
        display:block;
    }

    .input-group--senha button.toggle-senha.is-revelada .eye-closed{
        display:none;
    }
}

button:disabled,
button[aria-busy="true"]{

    opacity:.72;

    cursor:not-allowed;

    transform:none;

    box-shadow:none;

    pointer-events:none;

}

button:disabled:hover,
button[aria-busy="true"]:hover{

    transform:none;

    box-shadow:none;

}

button[aria-busy="true"]::before{

    content:"";

    display:inline-block;

    width:14px;

    height:14px;

    margin-right:8px;

    border:2px solid rgba(255,255,255,.35);

    border-top-color:#fff;

    border-radius:50%;

    vertical-align:-2px;

    animation:btn-spin .7s linear infinite;

}

@keyframes btn-spin{

    to{ transform:rotate(360deg); }

}

/*==================================================
BOTÃO GOOGLE
==================================================*/

.google-btn{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    margin-top:12px;

    padding:12px 14px;

    background:#ffffff;

    border:1px solid var(--line);

    color:var(--text);

    font-size:14px;

    font-weight:700;

    text-decoration:none;

    transition:
        border-color .25s ease,
        background .25s ease,
        transform .20s ease;

}

.google-btn:hover{

    background:#fafcfc;

    border-color:#c8d5dc;

    transform:translateY(-1px);

}

.google-icon-wrapper{

    display:flex;

    align-items:center;

    justify-content:center;

}

.google-icon{

    width:18px;

    height:18px;

}

.btn-text{

    margin:0;

}

/*==================================================
LGPD
==================================================*/

.consent-box{

    margin:14px 0 12px;

    padding:10px 12px;

    border:1px solid var(--line);

    border-radius:10px;

    background:var(--panel-soft);

    text-align:left;

    color:var(--muted);

    font-size:12px;

    line-height:1.55;

}

.consent-box label{

    display:flex;

    align-items:flex-start;

    gap:8px;

    cursor:pointer;

}

.consent-box input{

    margin-top:2px;

    flex-shrink:0;

}

.consent-box a{

    color:var(--accent);

    font-size:inherit;

}

.legal-compact{

    margin-top:10px;

    color:var(--muted);

    font-size:11px;

    line-height:1.55;

    text-align:center;

}

.legal-compact a{

    color:var(--accent);

    font-size:inherit;

}

/*==================================================
MENSAGENS
==================================================*/

#stepCodigo{
    margin-top:12px;
    padding:14px;
    border:1px solid var(--line);
    border-radius:12px;
    background:linear-gradient(180deg, #ffffff, var(--panel-soft));
    text-align:left;
}

.otp-card{
    margin-bottom:12px;
    padding:12px;
    border-radius:10px;
    background:#fff;
    border:1px solid var(--line);
}

.otp-title{
    margin:0 0 6px;
    font-size:15px;
    font-weight:800;
    color:var(--accent-strong);
}

.otp-subtitle,
.otp-context{
    margin:0 0 4px;
    color:var(--muted);
    font-size:13px;
    line-height:1.5;
}

.senha-hint{
    margin: -6px 0 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    line-height: 1.4;
}

.senha-hint.ok{
    color: var(--success);
}

.senha-hint.erro{
    color: var(--danger);
}

button.btn-secondary{
    margin-top: 10px;
    background: #fff;
    color: var(--accent-strong);
    border: 1px solid var(--line);
    box-shadow: none;
}

button.btn-secondary:hover{
    background: #f8fafc;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}

#mensagem,
#mensagemCadastro{
    margin-top: 10px;
    font-size:14px;
    font-weight:600;
}

.sucesso{

    margin-top:10px;
    color:var(--success);

}

.erro{

    margin-top: 10px;
    color:var(--danger);

}

.info{

    margin-top: 10px;
    color:var(--accent-strong);

}


/* PARTE 5 */

/*==================================================
RESPONSIVO
==================================================*/

@media (max-width:480px){

    body{

        padding:18px;

    }

    .container{

        width:min(360px, 100%);

        max-width:360px;

        padding:18px 18px 20px;

        border-radius:12px;

        margin:auto;

    }

    .logo-top{

        width:140px;

    }

    h1{

        font-size:24px;

        margin-bottom:8px;

    }

    .subtitulo{

        font-size:13px;

        margin-bottom:14px;

    }

    .contexto-acesso{

        padding:10px;

    }

    .perfil-switch{

        gap:8px;

    }

    .perfil-option{

        min-height:64px;

        padding:10px 6px;

    }

    .perfil-option span{

        font-size:14px;

    }

    .perfil-option small{

        font-size:10px;

    }

    .input-group{

        margin-bottom:12px;

    }

    .input-group input{

        height:50px;

        padding:16px 14px 8px 46px;

        font-size:16px;

    }

    .input-group label{

        left:46px;

        font-size:12px;

    }

    .icon{

        left:15px;

        width:18px;

    }

    button,
    .google-btn{

        min-height:46px;

        font-size:15px;

    }

}

/*==================================================
NOTEBOOKS
==================================================*/

@media (max-height:800px){

    body{

        padding:12px;

    }

    .container{

        width:min(410px,100%);

        padding:14px 26px 18px;

    }

    .logo-top{

        width:150px;

        margin-bottom:6px;

    }

    h1{

        font-size:28px;

        margin-bottom:8px;

    }

    .subtitulo{

        font-size:13px;

        margin-bottom:12px;

    }

    .contexto-acesso{

        margin-bottom:14px;

    }

    .input-group{

        margin-bottom:10px;

    }

    .consent-box{

        margin:10px 0;

        padding:9px 10px;

    }

}

/*==================================================
SCROLLBAR
==================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#eef3f5;

}

::-webkit-scrollbar-thumb{

    background:var(--accent);

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--accent-strong);

}

/*==================================================
SELEÇÃO
==================================================*/

::selection{

    background:var(--accent);

    color:#ffffff;

}

/*==================================================
ANIMAÇÃO
==================================================*/

.container{

    animation:fadeUp .45s ease;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(18px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==================================================
FOCO ACESSÍVEL
==================================================*/

button:focus-visible,
.google-btn:focus-visible,
.perfil-option:focus-visible,
input:focus-visible,
a:focus-visible{

    outline:none;

    box-shadow:
        0 0 0 3px rgba(47,111,115,.18);

}

/*==================================================
ACESSIBILIDADE
==================================================*/

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

    *,
    *::before,
    *::after{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}