/* Cadastro rápido — estilo em dois níveis.
 *
 * NÍVEL FUNCIONAL, nas duas páginas: o que o recurso precisa para se explicar —
 * o selo de origem no campo preenchido, o cartão da empresa, o recolhimento e o
 * link de preencher à mão. Não mexe no desenho do tema.
 *
 * NÍVEL VISUAL, só no cadastro avulso: campos, rótulos e títulos de seção
 * ganham tratamento próprio. Fica escopado em `.glacr-ativo`, uma classe que o
 * JavaScript põe no body apenas naquela página. O checkout mantém o visual do
 * tema — ele já está no ar e convertendo, e não há por que mexer nele.
 *
 * Como quem põe a classe é o script, JavaScript morto significa tema intacto, e
 * não um formulário meio estilizado.
 */

:root {

    --glacr-superficie: #ffffff;
    --glacr-superficie-2: #f6f8fb;
    --glacr-tinta: #0f172a;
    --glacr-tinta-2: #48566b;
    --glacr-apagado: #7a899f;
    --glacr-linha: #e1e7f0;
    --glacr-linha-forte: #cbd5e4;
    --glacr-marca: #1d6fe0;
    --glacr-marca-fundo: #0b3d91;
    --glacr-marca-suave: #eaf2fe;
    --glacr-latao: #8a6318;
    --glacr-latao-fundo: #fbf5e6;
    --glacr-latao-linha: #e6d3a8;
    --glacr-alerta: #8a4416;
    --glacr-alerta-fundo: #fdf3ea;
    --glacr-alerta-linha: #ebd3bc;
    --glacr-erro: #b3261e;
    --glacr-ui: "Manrope", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
    --glacr-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

/* ---------- campos ---------------------------------------------------------
   Altura generosa e foco visível. A altura de toque não encolhe no celular:
   dedo não fica menor em tela pequena. */

.glacr-ativo .form-group { margin-bottom: 0; }

.glacr-ativo .row > [class*="col-"] > .form-group { margin-bottom: 1rem; }

.glacr-ativo .form-control,
.glacr-ativo select.form-control {
    height: 50px;
    padding: 0 15px;
    border: 1px solid var(--glacr-linha-forte);
    border-radius: 10px;
    background-color: var(--glacr-superficie);
    color: var(--glacr-tinta);
    font-family: var(--glacr-ui);
    font-size: 15px;
    font-weight: 500;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    transition: border-color .16s, box-shadow .16s, background-color .3s;
}

.glacr-ativo .form-control:focus,
.glacr-ativo select.form-control:focus {
    outline: none;
    border-color: var(--glacr-marca);
    box-shadow: 0 0 0 4px rgba(29, 111, 224, .16);
}

.glacr-ativo .form-control::placeholder { color: var(--glacr-apagado); opacity: .55; font-weight: 400; }

.glacr-ativo textarea.form-control { height: auto; padding: 12px 15px; }

/* ---------- rótulos --------------------------------------------------------
   Micro-rótulo em caixa alta e cinza: o peso visual fica no que o cliente
   escreve, não na etiqueta. É a diferença mais visível em relação ao padrão. */

.glacr-ativo .form-group > label,
.glacr-ativo .form-group > .control-label {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 7px;
    font-family: var(--glacr-ui);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--glacr-apagado);
}

.glacr-ativo .label-required::after { color: var(--glacr-erro); }

.glacr-ativo .help-block {
    font-size: 12px;
    line-height: 1.45;
    color: var(--glacr-apagado);
    margin-top: 6px;
}

/* ---------- títulos de seção ----------------------------------------------
   Numeração por contador do CSS: nenhuma marcação nova precisou ser criada,
   e a conta se ajusta sozinha se uma seção aparecer ou sumir. */

.glacr-ativo .glacr-alvo { counter-reset: glacr-secao; }

.glacr-ativo .glacr-alvo h6,
.glacr-ativo .glacr-alvo .section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 26px 0 14px;
    font-family: var(--glacr-ui);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--glacr-tinta-2);
}

.glacr-ativo .glacr-alvo h6::before,
.glacr-ativo .glacr-alvo .section-title::before {
    counter-increment: glacr-secao;
    content: counter(glacr-secao, decimal-leading-zero);
    font-family: var(--glacr-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--glacr-marca);
    background: var(--glacr-marca-suave);
    border-radius: 6px;
    padding: 2px 7px;
    flex-shrink: 0;
}

.glacr-ativo .glacr-alvo h6::after,
.glacr-ativo .glacr-alvo .section-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--glacr-linha);
}

.glacr-ativo .glacr-alvo .section-title small,
.glacr-ativo .glacr-alvo h6 small { display: none; }

/* ---------- o campo do documento, protagonista -----------------------------
   É o único campo na tela até a consulta responder, e é ele que dispara todo o
   resto. Ganha altura, monoespaçada e dígitos espaçados. */

.glacr-topo { margin-bottom: 8px; }

#glacr-campo { position: relative; }

.glacr-ativo #glacr-campo .form-control {
    height: 62px;
    padding: 0 52px 0 17px;
    font-family: var(--glacr-mono);
    font-size: 20px;
    font-weight: 500;
    letter-spacing: .04em;
}

.glacr-ativo #glacr-campo > label {
    font-size: 11.5px;
    color: var(--glacr-tinta-2);
}

.glacr-buscando::after {
    content: "";
    position: absolute;
    right: 18px;
    top: 50px;
    width: 19px;
    height: 19px;
    border: 2px solid var(--glacr-linha-forte);
    border-top-color: var(--glacr-marca);
    border-radius: 50%;
    animation: glacr-girar .7s linear infinite;
}

@keyframes glacr-girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .glacr-buscando::after { animation-duration: 2.4s; } }

.glacr-status {
    display: block;
    min-height: 1em;
    margin-top: 8px;
    font-family: var(--glacr-ui);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--glacr-apagado);
}
.glacr-status.glacr-ok { color: var(--glacr-marca); }
.glacr-status.glacr-erro { color: var(--glacr-erro); }

/* ---------- origem do dado -------------------------------------------------
   Campo preenchido pela consulta tem fundo próprio e um selo. Ao tocar, o
   cliente toma o campo para si e o selo some. Nada fica travado. */

input.glacr-preenchido,
select.glacr-preenchido {
    background-color: var(--glacr-latao-fundo);
    border-color: var(--glacr-latao-linha);
}

.form-group:has(.glacr-preenchido) > label::after {
    content: "Receita Federal";
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
    color: var(--glacr-latao);
    background: var(--glacr-superficie);
    border: 1px solid var(--glacr-latao-linha);
    border-radius: 999px;
    padding: 2px 7px;
}

.glacr-brilha {
    animation: glacr-brilho .7s ease;
}
@keyframes glacr-brilho {
    0% { box-shadow: 0 0 0 4px rgba(29, 111, 224, .26); border-color: var(--glacr-marca); }
}
@media (prefers-reduced-motion: reduce) { .glacr-brilha { animation: none; } }

/* ---------- cartão da empresa ---------------------------------------------- */

.glacr-cartao {
    margin-top: 15px;
    border: 1px solid var(--glacr-linha);
    border-radius: 12px;
    overflow: hidden;
    background: var(--glacr-superficie-2);
}

.glacr-faixa { display: flex; align-items: flex-start; gap: 13px; padding: 15px 16px; }

.glacr-selo {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--glacr-marca-suave);
    color: var(--glacr-marca);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--glacr-ui);
    font-weight: 800;
    font-size: 15px;
    flex-shrink: 0;
}

.glacr-razao { font-family: var(--glacr-ui); font-weight: 800; font-size: 15.5px; line-height: 1.25; color: var(--glacr-tinta); }
.glacr-atividade { font-size: 12.5px; color: var(--glacr-tinta-2); margin-top: 3px; line-height: 1.4; }

.glacr-etiquetas { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 14px; }

.glacr-etq {
    font-family: var(--glacr-ui);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid var(--glacr-linha-forte);
    color: var(--glacr-tinta-2);
    background: var(--glacr-superficie);
}
.glacr-etq.glacr-viva { color: var(--glacr-marca); border-color: var(--glacr-marca); }
.glacr-etq.glacr-morta { color: var(--glacr-alerta); border-color: var(--glacr-alerta-linha); background: var(--glacr-alerta-fundo); }

.glacr-aviso {
    margin: 0 16px 15px;
    padding: 11px 13px;
    border-radius: 9px;
    font-size: 12.5px;
    line-height: 1.45;
    background: var(--glacr-alerta-fundo);
    border: 1px solid var(--glacr-alerta-linha);
    color: var(--glacr-alerta);
}

/* ---------- passos (só no cadastro avulso) --------------------------------- */

.glacr-passos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin: 0 0 26px;
}

.glacr-passo {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: var(--glacr-ui);
    font-size: 12px;
    font-weight: 700;
    color: var(--glacr-apagado);
}

.glacr-passo .glacr-bola {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    border: 1.5px solid var(--glacr-linha-forte);
    background: var(--glacr-superficie);
    transition: .25s;
}

.glacr-passo.glacr-agora { color: var(--glacr-tinta); }
.glacr-passo.glacr-agora .glacr-bola { border-color: var(--glacr-marca); background: var(--glacr-marca); color: #fff; }
.glacr-passo.glacr-feito { color: var(--glacr-tinta-2); }
.glacr-passo.glacr-feito .glacr-bola { border-color: var(--glacr-marca); background: var(--glacr-marca-suave); color: var(--glacr-marca); }

.glacr-tracinho { width: 22px; height: 1.5px; background: var(--glacr-linha-forte); border-radius: 2px; }

/* ---------- revelação ------------------------------------------------------ */

.glacr-oculto { display: none !important; }

.glacr-entrando { animation: glacr-entrar .38s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes glacr-entrar { from { opacity: 0; transform: translateY(9px); } }
@media (prefers-reduced-motion: reduce) { .glacr-entrando { animation: none; } }

.glacr-escape {
    display: block;
    margin: 14px auto 0;
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--glacr-ui);
    font-size: 13px;
    color: var(--glacr-apagado);
    text-decoration: underline;
    cursor: pointer;
}
.glacr-escape:hover { color: var(--glacr-tinta-2); }

/* ---------- celular --------------------------------------------------------
   Uma coluna e menos folga em volta — mas a altura de toque fica igual: dedo
   não encolhe em tela pequena. */

@media (max-width: 575px) {
    .glacr-ativo #glacr-campo .form-control { height: 58px; font-size: 18px; }
    .glacr-ativo .glacr-passo .glacr-texto { display: none; }
    .glacr-ativo .glacr-tracinho { width: 14px; }
    .glacr-ativo .glacr-alvo h6,
    .glacr-ativo .glacr-alvo .section-title { margin-top: 22px; font-size: 11px; }
}