/* ==========================================================================
   AceleraAPI — telas de acesso (/login e /registro)
   --------------------------------------------------------------------------
   Escrito mobile-first: a base é a tela pequena (uma coluna, formulário
   primeiro, prova logo abaixo) e o layout de duas colunas só entra a partir
   de 1024px, onde existe largura para ele.

   As cores saem das variáveis do site com fallback (`var(--tinta, var(--escuro))`),
   então a tela acompanha o tema vigente sem precisar ser reescrita.
   ========================================================================== */

.acesso {
    --navbar: 73px;                 /* navbar do site (72 + régua de 1px) */
    --rodape: 54px;                 /* rodapé enxuto desta tela */
    display: flex;
    flex-direction: column;
    background: var(--papel-2, var(--fundo-claro));
}

/* --------------------------------------------------------------------------
   Formulário — no celular vem primeiro: é o que a pessoa veio fazer
   -------------------------------------------------------------------------- */

.acesso-painel {
    order: 1;
    display: flex;
    justify-content: center;
    padding: 26px 16px 40px;
}

.acesso-form { width: 100%; max-width: 460px; }

.acesso-cabecalho { margin-bottom: 20px; }

.acesso-cabecalho h1 {
    font-family: var(--fonte-display, var(--fonte));
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.25;
    letter-spacing: -.02em;
    color: var(--tinta, var(--texto));
    margin-bottom: 6px;
}

.acesso-cabecalho p {
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--tinta-2, var(--texto-suave));
}

.acesso-cartao {
    background: var(--papel, var(--branco));
    border: 1px solid var(--regua, var(--borda));
    border-radius: var(--raio-g, 14px);
    padding: 22px 18px;
    box-shadow: 0 14px 36px -26px rgba(6, 8, 24, .35);
}

/* ---- Campos ---- */

.campo { margin-bottom: 16px; }

.campo label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--tinta, var(--texto));
    margin-bottom: 6px;
}

.campo label .opcional {
    font-weight: 500;
    font-size: 12.5px;
    color: var(--tinta-3, var(--texto-claro));
}
.campo label a.opcional { color: var(--acento, var(--primaria)); }
.campo label a.opcional:hover { text-decoration: underline; }

.campo-caixa { position: relative; display: flex; align-items: center; }

.campo-caixa > svg {
    position: absolute;
    left: 13px;
    width: 17px;
    height: 17px;
    color: var(--tinta-3, var(--texto-claro));
    pointer-events: none;
    transition: color .15s ease;
}

/* 16px no campo: abaixo disso o Safari do iPhone dá zoom ao focar. */
.campo-caixa input,
.campo-caixa select {
    width: 100%;
    padding: 12px 14px 12px 40px;
    border: 1px solid var(--regua-forte, var(--borda));
    border-radius: 10px;
    background: var(--papel, var(--branco));
    font-family: var(--fonte);
    font-size: 16px;
    color: var(--tinta, var(--texto));
    transition: border-color .15s ease, box-shadow .15s ease;
}

.campo-caixa input::placeholder { color: var(--tinta-3, var(--texto-claro)); opacity: .75; }

.campo-caixa input:focus,
.campo-caixa select:focus {
    outline: none;
    border-color: var(--tinta, var(--primaria));
    box-shadow: 0 0 0 3px rgba(99, 102, 241, .14);
}

.campo-caixa:focus-within > svg { color: var(--tinta, var(--primaria)); }

.campo-caixa input[readonly] {
    background: var(--papel-2, var(--fundo-claro));
    color: var(--tinta-2, var(--texto-suave));
}

.campo-caixa.sem-icone input { padding-left: 14px; }

/* Espaço para o botão de revelar senha (o :has cobre o campo já revelado,
   que deixa de ser type=password e manteria o texto sob o botão). */
.campo-caixa input[type="password"] { padding-right: 44px; }
.campo-caixa:has(.olho) input { padding-right: 44px; }

.campo-msg {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--tinta-3, var(--texto-claro));
    margin-top: 6px;
}
.campo-msg.erro { color: var(--erro, #b91c1c); }
.campo-msg.ok   { color: var(--ok, var(--verde)); }

.olho {
    position: absolute;
    right: 5px;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: none;
    background: none;
    color: var(--tinta-3, var(--texto-claro));
    cursor: pointer;
    border-radius: 8px;
}
.olho:hover { color: var(--tinta, var(--texto)); background: var(--papel-3, var(--fundo-claro)); }
.olho svg { width: 17px; height: 17px; }

/* Uma coluna no celular; duas a partir de 640px. */
.linha-2 { display: grid; grid-template-columns: 1fr; gap: 0; }

/* ---- Busca de CNPJ ---- */

.campo-busca { display: flex; flex-wrap: wrap; gap: 10px; }
.campo-busca .campo-caixa { flex: 1 1 190px; }
/* No celular o botão ocupa a linha inteira; ao lado do campo só quando cabe. */
.campo-busca .btn { flex: 1 0 100%; justify-content: center; white-space: nowrap; }
.campo-busca .btn svg { width: 15px; height: 15px; }
.campo-busca .btn:disabled { opacity: .6; cursor: progress; }

/* ---- Força da senha ---- */

.forca { margin-top: 9px; }
.forca-trilhos { display: flex; gap: 4px; }

.forca-trilhos i {
    flex: 1;
    height: 3px;
    border-radius: 2px;
    background: var(--regua, var(--borda));
    transition: background-color .2s ease;
}

.forca[data-nivel="1"] .forca-trilhos i:nth-child(-n+1) { background: var(--erro, #ef4444); }
.forca[data-nivel="2"] .forca-trilhos i:nth-child(-n+2) { background: var(--atencao, var(--amarelo)); }
.forca[data-nivel="3"] .forca-trilhos i:nth-child(-n+3) { background: var(--acento, var(--primaria)); }
.forca[data-nivel="4"] .forca-trilhos i { background: var(--ok, var(--verde)); }

.forca-texto { font-size: 12px; color: var(--tinta-3, var(--texto-claro)); margin-top: 6px; }

/* ---- Etapas do cadastro ---- */

.acesso-passos {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 18px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--regua, var(--borda));
}

.acesso-passo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--tinta-3, var(--texto-claro));
}

.acesso-passo i {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 1px solid var(--regua-forte, var(--borda));
    font-family: var(--fonte-mono);
    font-size: 11.5px;
    font-style: normal;
    color: var(--tinta-3, var(--texto-claro));
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.acesso-passo.ativo { color: var(--tinta, var(--texto)); font-weight: 600; }
.acesso-passo.ativo i {
    background: var(--tinta, var(--primaria));
    border-color: var(--tinta, var(--primaria));
    color: var(--papel, var(--branco));
}
.acesso-passo.feito i {
    background: var(--ok-fraco, #f0fdf4);
    border-color: #bbf7d0;
    color: var(--ok, #15803d);
}

.acesso-passo-linha { flex: 1; height: 1px; background: var(--regua, var(--borda)); }
.acesso-passo-linha.feito { background: var(--regua-forte, var(--texto-claro)); }

.etapa[hidden] { display: none; }

/* ---- Ações ---- */

.acesso-acoes {
    display: flex;
    flex-direction: column-reverse;
    gap: 10px;
    margin-top: 22px;
}
.acesso-acoes .btn { width: 100%; justify-content: center; }
.acesso-acoes .btn svg { width: 16px; height: 16px; }

.acesso-rodape {
    margin-top: 20px;
    font-size: 14px;
    text-align: center;
    color: var(--tinta-2, var(--texto-suave));
}
.acesso-rodape a { color: var(--acento, var(--primaria)); font-weight: 600; }
.acesso-rodape a:hover { text-decoration: underline; }

.acesso-legal {
    margin-top: 14px;
    font-size: 12.5px;
    line-height: 1.6;
    text-align: center;
    color: var(--tinta-3, var(--texto-claro));
}
.acesso-legal a { color: var(--tinta-2, var(--texto-suave)); text-decoration: underline; }

/* ---- Avisos ---- */

.acesso-aviso {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    padding: 12px 14px;
    border: 1px solid;
    border-radius: 10px;
    font-size: 13.5px;
    line-height: 1.55;
    margin-bottom: 18px;
}
.acesso-aviso svg { flex: none; width: 16px; height: 16px; margin-top: 2px; }
.acesso-aviso.erro    { background: var(--erro-fraco, #fef2f2);   color: var(--erro, #b91c1c);   border-color: #fecaca; }
.acesso-aviso.info    { background: var(--acento-fraco, #eef2ff); color: var(--acento, #4338ca); border-color: #c7d2fe; }
.acesso-aviso.sucesso { background: var(--ok-fraco, #f0fdf4);     color: var(--ok, #15803d);     border-color: #bbf7d0; }
.acesso-aviso a { color: inherit; font-weight: 700; text-decoration: underline; }
.acesso-aviso ul { margin: 5px 0 0 17px; }

/* ---- Cupom ---- */

.cupom-abrir {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    padding: 0;
    font-family: var(--fonte);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--acento, var(--primaria));
    cursor: pointer;
}
.cupom-abrir[hidden] { display: none; }   /* o atributo tem que vencer o inline-flex */
.cupom-abrir svg { width: 15px; height: 15px; }
.cupom-abrir:hover { text-decoration: underline; }

.cupom-campo input {
    text-transform: uppercase;
    font-family: var(--fonte-mono);
    font-size: 15px;
    letter-spacing: .06em;
}

.cupom-aplicado {
    display: flex;
    align-items: center;
    gap: 11px;
    flex-wrap: wrap;
    padding: 12px 14px;
    border: 1px solid #bbf7d0;
    border-radius: 10px;
    background: var(--ok-fraco, #f0fdf4);
    font-size: 13.5px;
    color: var(--tinta-2, var(--texto-suave));
}

.cupom-aplicado .cupom-cod {
    font-family: var(--fonte-mono);
    font-size: 12px;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 6px;
    background: var(--papel, var(--branco));
    border: 1px solid #bbf7d0;
    color: var(--ok, #15803d);
}
.cupom-aplicado strong { color: var(--tinta, var(--texto)); }

/* ---- Chave de API (tela de sucesso) ---- */

.chave-caixa {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    background: var(--papel-2, var(--fundo-claro));
    border: 1px solid var(--regua, var(--borda));
    border-radius: 10px;
    padding: 13px 14px;
    margin-bottom: 18px;
}

.chave-caixa code {
    flex: 1;
    min-width: 200px;
    font-family: var(--fonte-mono);
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--tinta, var(--texto));
    word-break: break-all;
}

.proximos {
    list-style: none;
    counter-reset: acessopasso;
    display: grid;
    gap: 11px;
    margin-bottom: 20px;
}

.proximos li {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--tinta-2, var(--texto-suave));
}

.proximos li::before {
    counter-increment: acessopasso;
    content: counter(acessopasso);
    flex: none;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    border: 1px solid var(--regua-forte, var(--borda));
    display: grid;
    place-items: center;
    font-family: var(--fonte-mono);
    font-size: 11px;
    color: var(--tinta-3, var(--texto-claro));
}

.proximos code {
    font-family: var(--fonte-mono);
    font-size: 12px;
    background: var(--papel-3, var(--fundo-claro));
    border-radius: 4px;
    padding: 1px 5px;
    word-break: break-all;
}

.acesso-cartao .captcha-box { max-width: none; }

/* --------------------------------------------------------------------------
   Prova — no celular vem depois do formulário, em versão compacta
   -------------------------------------------------------------------------- */

.acesso-vitrine {
    order: 2;
    position: relative;
    overflow: hidden;
    background: var(--tinta, var(--escuro));
    color: var(--papel, var(--branco));
    padding: 30px 18px 34px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
}

/* Papel milimetrado bem apagado: textura, não decoração. */
.acesso-vitrine::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 56px 56px;
    pointer-events: none;
}

.acesso-vitrine > * { position: relative; z-index: 1; }

.acesso-selo {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    align-self: flex-start;
    font-family: var(--fonte-mono);
    font-size: 11px;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: rgba(255,255,255,.66);
    padding: 5px 11px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 999px;
}

.acesso-selo .ponto {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4ade80;
}

.acesso-vitrine h2 {
    font-family: var(--fonte-display, var(--fonte));
    font-weight: 700;
    font-size: 1.4rem;
    line-height: 1.25;
    letter-spacing: -.02em;
    color: var(--papel, var(--branco));
}

.acesso-vitrine h2 em { font-style: normal; color: #a9c2e8; }

.acesso-vitrine > p {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255,255,255,.62);
    max-width: 46ch;
}

.acesso-lista {
    list-style: none;
    display: grid;
    gap: 0;
    border-top: 1px solid rgba(255,255,255,.12);
}

.acesso-lista li {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255,255,255,.12);
}

.acesso-lista .ico { flex: none; color: rgba(255,255,255,.5); padding-top: 2px; }
.acesso-lista .ico svg { width: 17px; height: 17px; }

.acesso-lista strong {
    display: block;
    color: var(--papel, var(--branco));
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 2px;
}

.acesso-lista li > span:last-child > span {
    color: rgba(255,255,255,.55);
    font-size: 13px;
    line-height: 1.5;
}

/* Terminal: só onde a linha de comando cabe inteira. */
.acesso-codigo { display: none; }

.acesso-codigo-topo {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 13px;
    border-bottom: 1px solid rgba(255,255,255,.1);
}

.acesso-codigo-topo i {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,.18);
}

.acesso-codigo-topo span {
    margin-left: 8px;
    font-family: var(--fonte-mono);
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255,255,255,.36);
}

.acesso-codigo pre {
    margin: 0;
    padding: 15px 16px;
    font-family: var(--fonte-mono);
    font-size: 12.5px;
    line-height: 1.8;
    color: rgba(255,255,255,.8);
    overflow-x: auto;
}

.acesso-codigo .cmt { color: rgba(255,255,255,.38); }
.acesso-codigo .str { color: #8fbc9a; }
.acesso-codigo .key { color: #a9c2e8; }

.acesso-metricas {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,.12);
}

.acesso-metricas div strong {
    display: block;
    font-family: var(--fonte-mono);
    font-size: 1rem;
    font-weight: 600;
    color: var(--papel, var(--branco));
}

.acesso-metricas div span { font-size: 12px; color: rgba(255,255,255,.5); }

/* ==========================================================================
   ≥ 480px — respiro maior no celular grande
   ========================================================================== */

@media (min-width: 480px) {
    .campo-busca .btn { flex: 0 0 auto; }
    .acesso-painel  { padding: 34px 22px 48px; }
    .acesso-cartao  { padding: 26px 22px; }
    .acesso-vitrine { padding: 36px 22px 40px; gap: 20px; }
    .acesso-cabecalho h1 { font-size: 1.6rem; }
    .acesso-vitrine h2   { font-size: 1.55rem; }
}

/* ==========================================================================
   ≥ 640px — dois campos por linha, botões lado a lado
   ========================================================================== */

@media (min-width: 640px) {
    .linha-2 { grid-template-columns: 1fr 1fr; gap: 16px; }

    .acesso-acoes { flex-direction: row; align-items: center; gap: 12px; }
    .acesso-acoes .btn { width: auto; }
    .acesso-acoes .btn-principal { flex: 1; }

    .acesso-lista { grid-template-columns: 1fr 1fr; column-gap: 26px; }
    .acesso-vitrine { padding: 40px 32px; }
    .acesso-painel  { padding: 40px 32px 56px; }
}

/* ==========================================================================
   ≥ 1024px — duas colunas: prova à esquerda, formulário à direita
   ========================================================================== */

@media (min-width: 1024px) {
    .acesso {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        min-height: calc(100vh - var(--navbar) - var(--rodape));
    }
    .acesso-larga { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); }

    /* A prova volta para a esquerda e não estoura a dobra: o que exceder é
       cortado de propósito (daí o overflow), na ordem em que os blocos
       aparecem — título e argumentos ficam sempre visíveis. */
    .acesso-vitrine {
        order: 0;
        padding: 48px;
        gap: 24px;
    }
    .acesso-vitrine h2 { font-size: 2.1rem; max-width: 17ch; }
    .acesso-vitrine > p { font-size: 15px; }

    .acesso-lista { grid-template-columns: 1fr; }
    .acesso-lista li { padding: 13px 0; }

    .acesso-codigo {
        display: block;
        background: rgba(0, 0, 0, .28);
        border: 1px solid rgba(255,255,255,.13);
        border-radius: 12px;
        overflow: hidden;
    }

    .acesso-painel {
        order: 1;
        align-items: center;
        padding: 48px 40px;
    }

    .acesso-form { max-width: 430px; }
    .acesso-form-larga { max-width: 560px; }

    .acesso-cabecalho h1 { font-size: 1.75rem; }
    .acesso-cartao { padding: 30px; }
}

@media (min-width: 1400px) {
    .acesso-vitrine { padding: 56px 64px; }
    .acesso-vitrine h2 { font-size: 2.35rem; }
    .acesso-painel { padding: 56px 48px; }
    .acesso-form-larga { max-width: 600px; }
}

/* ---- Telas baixas: os blocos saem do fim para o começo, nesta ordem ----
   O terminal é o primeiro a sair: é o bloco mais alto e o único que ficaria
   cortado no meio (a coluna tem overflow escondido). ------------------------ */

@media (min-width: 1024px) and (max-height: 940px) {
    .acesso-vitrine { padding: 34px 48px; gap: 16px; }
    .acesso-vitrine h2 { font-size: 1.85rem; }
    .acesso-lista li { padding: 11px 0; }
    .acesso-codigo { display: none; }
}

@media (min-width: 1024px) and (max-height: 820px) {
    .acesso-lista li:nth-child(n+4) { display: none; }
    .acesso-lista li:nth-child(3) { border-bottom: none; }
}

@media (min-width: 1024px) and (max-height: 720px) {
    .acesso-metricas { display: none; }
    .acesso-lista li:nth-child(n+3) { display: none; }
    .acesso-lista li:nth-child(2) { border-bottom: none; }
}

/* Notebook de tela baixa (1366×768 e afins): aperta o miolo para o formulário
   caber com o mínimo de rolagem. */
@media (min-width: 1024px) and (max-height: 820px) {
    .acesso-painel { padding: 28px 40px; }
    .acesso-cabecalho { margin-bottom: 18px; }
    .acesso-cartao { padding: 24px; }
    .acesso-rodape { margin-top: 16px; }
    .acesso-legal { margin-top: 12px; }
}

/* Label do cupom quando ele é aberto pelo link (fora do .campo padrão). */
#cupomCampo > label {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--tinta, var(--texto));
    margin-bottom: 6px;
}

/* --------------------------------------------------------------------------
   Rodapé enxuto das telas de acesso
   -------------------------------------------------------------------------- */

.acesso-fim {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 18px 16px 22px;
    background: var(--tinta, var(--escuro));
    border-top: 1px solid rgba(255,255,255,.08);
    font-size: 12.5px;
    color: rgba(255,255,255,.45);
    text-align: center;
}

.acesso-fim nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
.acesso-fim a { color: rgba(255,255,255,.62); }
.acesso-fim a:hover { color: #fff; text-decoration: underline; }

@media (min-width: 640px) {
    .acesso-fim {
        flex-direction: row;
        justify-content: space-between;
        padding: 16px 32px;
        text-align: left;
    }
}