.sessao-fundo {
position: fixed;
inset: 0;
z-index: 60;
background: rgba(244, 246, 249, .52);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
display: flex;
overflow: auto;
padding: 24px;
padding-top: calc(24px + env(safe-area-inset-top, 0px));
padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}
body.sessao-aberta { overflow: hidden; }
.sessao-card {
margin: auto;
width: min(400px, 100%);
padding: 28px 28px 24px;
background: var(--white);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: 0 24px 60px rgba(26, 30, 38, .28);
}
.sessao-topo {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
margin-bottom: 26px;
}
.sessao-marca svg { display: block; max-width: 100%; height: auto; }
.sessao-marca-texto {
font-family: var(--head);
font-weight: 800;
font-size: 20px;
letter-spacing: -.02em;
color: var(--accent-dark);
}
.sessao-x { width: 36px; height: 36px; font-size: 24px; flex-shrink: 0; margin: -8px -10px 0 0; }
.sessao-rotulo {
display: block;
font-family: var(--head);
font-weight: 700;
font-size: 11px;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--gray);
margin-bottom: 8px;
}
.sessao-campo {
display: block;
width: 100%;
height: 56px;
padding: 0 14px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--white);
color: var(--ink);
font-family: var(--head);
font-weight: 600;
font-size: 22px;
letter-spacing: .02em;
font-variant-numeric: tabular-nums;
}
.sessao-campo::placeholder { color: var(--border-soft); font-weight: 500; }
.sessao-campo:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(37, 116, 255, .12);
}
.sessao-campo.invalido { border-color: var(--red); }
.sessao-campo.invalido:focus { box-shadow: 0 0 0 3px rgba(179, 38, 30, .12); }
.sessao-erro { font-size: 12px; line-height: 1.45; color: var(--red); margin-top: 6px; }
.sessao-erro:empty { display: none; }
.sessao-nota {
font-size: 12.5px;
line-height: 1.5;
color: var(--gray-light);
margin: 14px 0 18px;
}
.sessao-atual {
padding: 14px 16px 16px;
margin-bottom: 22px;
background: var(--accent-tint);
border-radius: var(--radius);
}
.sessao-atual-rotulo { font-size: 11px; color: var(--gray); }
.sessao-atual-numero {
font-family: var(--head);
font-weight: 700;
font-size: 20px;
letter-spacing: -.01em;
color: var(--accent-dark);
margin: 2px 0 12px;
font-variant-numeric: tabular-nums;
}
.sessao-atual .btn.block { height: 44px; font-size: 13px; }
.sessao-sair {
display: block;
margin: 10px auto 0;
font-size: 12px;
color: var(--gray);
}
.sessao-sair:hover { color: var(--red); }
@media (max-width: 720px) {
.sessao-fundo {
padding: 16px;
padding-top: calc(16px + env(safe-area-inset-top, 0px));
padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}
.sessao-card { width: 100%; padding: 24px 20px 20px; }
.sessao-x { width: 44px; height: 44px; margin: -10px -12px 0 0; }
.sessao-campo { height: 60px; }
.btn.block#sessaoEntrar { height: 52px; }
}