/* ============================================================================
   FORMULÁRIO DE CADASTRO — TEMA (setembro/2026)

   Substitui o formulario-skin.css de 19/09. Carregado DEPOIS do formulario.css
   e só cuida de aparência: nenhum id, name, class ou script muda. Para voltar
   ao visual de 19/09 basta trocar o <link> deste arquivo pelo do skin.

   Direção (decidida com o dono em 30/09, depois de recusar uma versão pesada
   em vermelho + marinho, com listras e animações): LIMPO E PROFISSIONAL, sem
   firula. Fundo claro, menu lateral branco, bordas finas, letra média, botão
   chapado sem sombra e UMA cor de destaque — grafite quase preto — para ação,
   opção marcada e progresso. Verde só para o que está pronto; vermelho só
   para erro. O vermelho da TransÁgil aparece apenas no traço do logotipo.

   Estrutura que esta camada também corrige (vale manter se o visual mudar):
   - Ficha contínua sem vão: uma etapa por linha; os CAMPOS das etapas de
     veículo/rastreador é que se dividem em duas colunas (seção 17).
   - Título de cada etapa na ficha (o skin antigo escondia o cabeçalho).
   - Voltar/Continuar presos no rodapé enquanto a etapa está à vista.
   - Cartões de operação sem virar e sem cena animada ao selecionar.

   `!important` só onde o formulario.css (cinco camadas empilhadas) também
   usou, onde o JS escreve estilo inline ou contra o <style> do fim do HTML.
   ============================================================================ */

/* ─── 1. Tokens ──────────────────────────────────────────────────────────── */
:root {
    color-scheme: light;

    --font-sans: 'Barlow', 'Segoe UI', Roboto, Arial, sans-serif;

    --topbar-h: 60px;

    /* Destaque: grafite */
    --ink: #18181b;
    --ink-hover: #3f3f46;
    --ink-soft: #f4f4f5;
    --ink-anel: rgba(24, 24, 27, 0.10);

    /* Superfícies */
    --bg: #f6f7f9;
    --panel: #ffffff;
    --panel-soft: #fafafa;
    --border: #e4e4e7;
    --border-strong: #d4d4d8;
    --border-hover: #a1a1aa;

    /* Texto */
    --text: #18181b;              /* 17:1 sobre branco */
    --muted: #52525b;             /* 7.7:1 */
    --faint: #71717a;             /* 4.8:1 — só apoio */

    /* Marca (só no logotipo) */
    --brand: #e1262c;

    /* Semânticas */
    --ok: #15803d;
    --ok-escuro: #166534;
    --ok-soft: #f0fdf4;
    --ok-borda: #bbf7d0;
    --erro: #b91c1c;
    --erro-soft: #fef2f2;
    --erro-borda: #fecaca;
    --warn: #a16207;
    --warn-soft: #fefce8;
    --warn-borda: #fde68a;
    --info: #1d4ed8;
    --info-soft: #eff6ff;

    --r-control: 10px;
    --r-card: 14px;
    --sombra-card: 0 1px 2px rgba(16, 24, 40, 0.05);

    /* Os componentes antigos leem estes nomes: apontá-los para os tokens novos
       repinta modais, requisitos e anexos sem tocar em cada um. `--cta` é lido
       pelo formulario.css como "marcado/escolhido", então vai para o grafite. */
    --ui-bg: var(--bg);
    --ui-panel: var(--panel);
    --ui-panel-soft: var(--panel-soft);
    --ui-border: var(--border);
    --ui-border-strong: var(--border-strong);
    --ui-text: var(--text);
    --ui-muted: var(--muted);
    --texto-fraco: var(--faint);
    --ui-accent: var(--erro);
    --ui-accent-soft: var(--erro-soft);
    --ui-success: var(--ok);
    --ui-success-soft: var(--ok-soft);
    --ui-warn: var(--warn);
    --ui-warn-soft: var(--warn-soft);
    --ui-info: var(--info);
    --ui-info-soft: var(--info-soft);
    --cta: var(--ink);
    --cta-hover: var(--ink-hover);
    --cta-soft: var(--ink-soft);
    --cta-border: var(--border-strong);
}

/* ─── 2. Base ────────────────────────────────────────────────────────────── */
html {
    /* O JS rola até seções e campos com scrollIntoView; sem isto o alvo para
       embaixo do topo e da barra de progresso, que ficam presos. */
    scroll-padding-top: calc(var(--topbar-h) + 104px);
    scroll-padding-bottom: 88px;
}
body {
    font-family: var(--font-sans) !important;
    font-size: 16px;
    background: var(--bg) !important;
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
.main-content { background: var(--bg) !important; }

/* Os overlays trazem 'Inter' no style= inline. */
#securityAlertOverlay,
#docProprioOverlay,
#envioBloqueadoOverlay,
#gpsOverlay,
#appDesatualizadoOverlay,
#appDesatualizadoVersao,
#helpPanel,
.hp-callout,
.hp-wa,
#helpFab { font-family: var(--font-sans) !important; }

button, input, select, textarea { font-family: inherit; }

:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
}

/* ─── 3. Barra do topo ───────────────────────────────────────────────────── */
.portal-topbar {
    height: var(--topbar-h) !important;
    background: var(--panel) !important;
    border-bottom: 1px solid var(--border) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}
.portal-topbar-breadcrumb { gap: 8px !important; }
.portal-topbar-breadcrumb-portal {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--text) !important;
}
.portal-topbar-breadcrumb-sep { color: var(--border-strong) !important; }
.portal-topbar-breadcrumb-page {
    font-size: 15px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    color: var(--muted) !important;
}
.main-content { padding-top: var(--topbar-h) !important; }

/* ─── 4. Menu lateral ────────────────────────────────────────────────────── */
.sidebar,
.sidebar-header {
    background: var(--panel) !important;
    box-shadow: none !important;
}
.sidebar { border-right: 1px solid var(--border) !important; }
.sidebar-header {
    padding: 24px 22px 18px !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--border) !important;
}
.sidebar-header::after { display: none !important; }
.sidebar-header svg text { font-family: var(--font-sans) !important; }
.sidebar-header svg text:first-of-type {
    fill: var(--text) !important;
    font-weight: 800;
    letter-spacing: 1.5px;
}
.sidebar-header svg text:last-of-type {
    fill: var(--faint) !important;
    font-weight: 500;
    letter-spacing: 3px;
}
.sidebar-header svg rect { fill: var(--brand) !important; height: 2px; }

.sidebar-nav {
    position: relative;
    padding: 8px 0 14px !important;
}
/* Linha fina ligando os marcadores das etapas */
.sidebar-nav::before {
    content: '';
    position: absolute;
    left: 35px;                 /* centro do marcador: 10 de margem + 14 de recuo + 11 */
    top: 58px;
    bottom: 34px;
    width: 1px;
    background: var(--border);
    pointer-events: none;
}

.nav-phase { margin-bottom: 0 !important; }
.nav-phase-head {
    padding: 16px 22px 6px 58px !important;
    border-top: 0 !important;
    margin-top: 0 !important;
}
.nav-phase-nome {
    font-size: 12.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--faint) !important;
}
.nav-phase-tempo {
    font-size: 12.5px !important;
    font-weight: 500;
    color: var(--faint) !important;
}

.sidebar-nav .nav-item {
    position: relative;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 1px 10px !important;
    padding: 8px 12px 8px 14px !important;
    border-left: 0 !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: var(--muted) !important;
    background: transparent !important;
    line-height: 20px;
    transition: background .15s ease, color .15s ease;
}
.sidebar-nav .nav-item:hover {
    background: var(--ink-soft) !important;
    color: var(--text) !important;
}
.sidebar-nav .nav-item.active {
    background: var(--ink-soft) !important;
    color: var(--text) !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}
.sidebar-nav .nav-item.completed { color: var(--text) !important; }
.sidebar-nav .nav-item:focus-visible { outline-offset: -2px; }

/* O número da etapa é o marcador */
.sidebar-nav .nav-number {
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 22px;
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
    border-radius: 50% !important;
    background: var(--panel) !important;
    border: 1px solid var(--border-strong) !important;
    color: var(--faint) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    box-shadow: 0 0 0 3px var(--panel);          /* recorta a linha por trás */
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.sidebar-nav .nav-item.active .nav-number {
    background: var(--ink) !important;
    border-color: var(--ink) !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 3px var(--ink-soft);
}
.sidebar-nav .nav-item.completed .nav-number {
    background: var(--ok) !important;
    border-color: var(--ok) !important;
    color: transparent !important;
    font-size: 0 !important;
}
.sidebar-nav .nav-item.completed .nav-number::after {
    content: '';
    width: 8px;
    height: 4px;
    margin-top: -2px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg);
}
.sidebar-nav .nav-step-dot { display: none !important; }

/* Apoio: aviso antigolpe e ajuda */
.sidebar-apoio { padding: 14px 16px 6px !important; gap: 8px !important; }
.sidebar-antigolpe {
    align-items: flex-start;
    padding: 12px 13px !important;
    border-radius: 10px !important;
    border: 1px solid var(--erro-borda) !important;
    background: var(--erro-soft) !important;
    color: var(--muted) !important;
}
.sidebar-antigolpe:hover { border-color: #fca5a5 !important; }
.sidebar-antigolpe svg { color: var(--erro); }
.sidebar-antigolpe strong {
    font-size: 14px !important;
    font-weight: 700;
    color: #7f1d1d !important;
}
.sidebar-antigolpe span {
    font-size: 13px !important;
    line-height: 1.45;
    color: #7f1d1d !important;
}
.sidebar-ajuda {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    padding: 6px 12px 8px !important;
    color: var(--muted) !important;
    text-decoration-color: var(--border-strong);
}
.sidebar-ajuda:hover { color: var(--text) !important; }

.sidebar-rodape {
    padding: 12px 22px 16px !important;
    border-top: 1px solid var(--border) !important;
}
.sidebar-rodape p,
.sidebar-rodape span {
    font-size: 12px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--faint) !important;
    opacity: 1 !important;
    text-align: left !important;
}

/* ─── 5. Coluna de conteúdo ──────────────────────────────────────────────── */
.content-wrapper {
    max-width: 1040px !important;
    margin: 0 auto !important;
    padding: 24px clamp(18px, 3vw, 40px) 120px !important;
}

/* ─── 6. Progresso ───────────────────────────────────────────────────────── */
.cadastro-progress {
    position: sticky !important;
    top: calc(var(--topbar-h) + 12px) !important;
    z-index: 60 !important;
    margin: 0 0 16px !important;
    background: var(--panel) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--r-card) !important;
    padding: 14px 20px 12px !important;
    /* A primeira sombra pinta uma faixa da cor da página ACIMA do cartão: sem
       ela, nos 12px entre o topo e o cartão aparecia o formulário rolando. */
    box-shadow: 0 -14px 0 2px var(--bg), 0 1px 2px rgba(16, 24, 40, 0.05) !important;
    backdrop-filter: none !important;
}
.cadastro-progress-meta {
    display: flex !important;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 2px 10px;
    margin-bottom: 10px !important;
}
.cadastro-progress-title {
    order: 1;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--text) !important;
}
.cadastro-progress-step {
    order: 2;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--faint) !important;
}
.cadastro-progress-restante {
    order: 3;
    font-size: 14px !important;
    color: var(--faint) !important;
}
.cadastro-progress-percent {
    order: 4;
    margin-left: auto;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--text) !important;
    font-variant-numeric: tabular-nums;
}
.cadastro-progress-track {
    height: 6px !important;
    background: #e4e4e7 !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    overflow: hidden;
}
.cadastro-progress-fill {
    background: var(--ink) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    animation: none !important;
    transition: width .3s ease !important;
}
.cadastro-save-status {
    margin-top: 8px !important;
    font-size: 13px !important;
    font-weight: 500;
    color: var(--faint) !important;
}
.cadastro-save-dot { background: var(--border-strong); }
.cadastro-save-status[data-estado="salvando"] .cadastro-save-dot { background: var(--warn); }
.cadastro-save-status[data-estado="salvo"] { color: var(--ok) !important; }
.cadastro-save-status[data-estado="salvo"] .cadastro-save-dot { background: var(--ok); }

/* ─── 7. Cartões das etapas ──────────────────────────────────────────────── */
.sectioned-registration { gap: 12px !important; }
.form-section,
.sectioned-registration .form-section {
    background: var(--panel) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--r-card) !important;
    box-shadow: none !important;
    /* `clip` e não `hidden`: hidden cria um contêiner de rolagem e mata o
       rodapé preso (position: sticky) dos botões. Sem suporte, fica visible. */
    overflow: visible !important;
    overflow: clip !important;
}
.sectioned-registration .form-section.active { box-shadow: var(--sombra-card) !important; }

/* Tela a tela: a etapa aberta mostra o próprio título e o cabeçalho recolhível
   sai. Na ficha contínua é o contrário — o formulario.css esconde o título, e
   o cabeçalho vira a divisória entre as etapas, então ele PRECISA aparecer. */
.sectioned-registration:not(.ficha-continua) .form-section.active > .cadastro-section-card-head { display: none !important; }
.sectioned-registration:not(.ficha-continua) .form-section.active > .cadastro-section-card-head + * { margin-top: 32px !important; }
.sectioned-registration .form-section.active > :not(.cadastro-section-card-head) {
    margin-left: 32px;
    margin-right: 32px;
}
.sectioned-registration .form-section.active > div:last-child:not(.btn-group) { margin-bottom: 32px !important; }

/* Cabeçalho das etapas: a lista do que vem e, na ficha, a divisória */
.cadastro-section-card-head {
    display: flex !important;
    align-items: center !important;
    width: 100%;
    padding: 16px 24px !important;
    gap: 14px !important;
    background: var(--panel) !important;
    border: 0 !important;
    text-align: left;
    flex: 0 0 auto !important;           /* `button { flex: 1 }` da base */
}
.cadastro-section-card-head:hover { background: var(--panel-soft) !important; }
.form-section.section-card-locked .cadastro-section-card-head { background: var(--panel) !important; cursor: default; }
.form-section.section-card-locked .cadastro-section-card-head:hover { background: var(--panel) !important; }

.cadastro-section-card-index {
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 32px;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: var(--ink-soft) !important;
    border: 0 !important;
    color: var(--muted) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}
.cadastro-section-card-title strong {
    display: block;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--text) !important;
}
.cadastro-section-card-title span {
    display: block;
    margin-top: 2px !important;
    font-size: 14px !important;
    font-weight: 400;
    color: var(--faint) !important;
}
.form-section.section-card-locked .cadastro-section-card-title strong { color: var(--faint) !important; }
.form-section.section-card-locked .cadastro-section-card-title span { color: #a1a1aa !important; }
.form-section.section-card-locked .cadastro-section-card-index { color: #a1a1aa !important; }

/* Ficha contínua: cada etapa abre com o próprio cabeçalho */
.ficha-continua .form-section > .cadastro-section-card-head,
.ficha-continua .form-section.active > .cadastro-section-card-head {
    padding: 20px 28px !important;
    margin-bottom: 26px !important;
    background: var(--panel) !important;
    border-bottom: 1px solid var(--border) !important;
    border-left: 0 !important;
    border-radius: var(--r-card) var(--r-card) 0 0;
}
.ficha-continua .form-section > .cadastro-section-card-head .cadastro-section-card-title strong {
    font-size: 18px !important;
    font-weight: 700 !important;
}
.form-section.secao-pendente > .cadastro-section-card-head,
.form-section.secao-completa > .cadastro-section-card-head { border-left: 0 !important; }
/* Completa: o número vira ✓ verde */
.form-section.secao-completa > .cadastro-section-card-head .cadastro-section-card-index,
.form-section.section-card-completed > .cadastro-section-card-head .cadastro-section-card-index {
    background: var(--ok) !important;
    color: transparent !important;
    font-size: 0 !important;
}
.form-section.secao-completa > .cadastro-section-card-head .cadastro-section-card-index::after,
.form-section.section-card-completed > .cadastro-section-card-head .cadastro-section-card-index::after {
    content: '';
    width: 11px;
    height: 5px;
    margin-top: -2px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg);
}
.form-section.section-card-completed .cadastro-section-card-title strong { color: var(--text) !important; }
.ficha-continua .form-section.secao-completa { border-color: var(--border) !important; }
.sectioned-registration.ficha-continua { gap: 16px !important; }
.sectioned-registration.ficha-continua .form-section { padding-bottom: 28px !important; }
.ficha-continua .form-section.active > :not(.cadastro-section-card-head) {
    margin-left: 28px;
    margin-right: 28px;
}

/* Título da etapa (tela a tela) */
.section-title {
    font-size: 24px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    line-height: 1.2 !important;
    color: var(--text) !important;
    margin-bottom: 6px !important;
}
.section-subtitle {
    font-size: 15px !important;
    line-height: 1.5 !important;
    color: var(--muted) !important;
    max-width: 64ch;
    margin-bottom: 28px !important;
}

/* ─── 8. Grupos de campos ────────────────────────────────────────────────── */
.field-groups { gap: 32px 36px !important; }
.field-group {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}
.field-group-head {
    padding: 0 0 10px !important;
    background: transparent !important;
    border-bottom: 1px solid var(--border) !important;
    gap: 0 !important;
    margin-bottom: 20px;
}
.field-group-num { display: none !important; }
.field-group-title {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--text) !important;
}
.field-group-sub {
    margin-top: 2px;
    font-size: 14px !important;
    color: var(--faint) !important;
}
.field-group-body { padding: 0 !important; }
.field-group-body .form-question { margin-bottom: 20px; }

/* ─── 9. Campos ──────────────────────────────────────────────────────────── */
.question-label,
.form-label,
.field-group-body .question-label {
    font-size: 14.5px !important;
    font-weight: 600 !important;
    line-height: 1.35;
    color: var(--text) !important;
    margin-bottom: 7px !important;
}
.required { color: var(--faint) !important; font-weight: 500; }

input[type="text"],
input[type="tel"],
input[type="email"],
input[type="date"],
input[type="number"],
input[type="password"],
input:not([type]),
select,
textarea {
    min-height: 48px;
    padding: 12px 14px !important;
    font-size: 16px !important;          /* 16px: o iPhone para de dar zoom no foco */
    font-weight: 400;
    line-height: 22px;
    background-color: var(--panel) !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: var(--r-control) !important;
    color: var(--text) !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    transition: border-color .15s ease, box-shadow .15s ease;
}
textarea { min-height: 96px; }
select { padding-right: 42px !important; cursor: pointer; }
input:hover:not(:focus):not(:disabled),
select:hover:not(:focus):not(:disabled),
textarea:hover:not(:focus):not(:disabled) { border-color: var(--border-hover) !important; }
input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--ink) !important;
    box-shadow: 0 0 0 3px var(--ink-anel) !important;
}
input::placeholder,
textarea::placeholder { color: #a1a1aa !important; opacity: 1; }
input:disabled, select:disabled, textarea:disabled {
    background-color: var(--panel-soft) !important;
    color: var(--muted) !important;
}

/* Números e documentos com algarismos de mesma largura */
.form-question input[name*="cpf"],
.form-question input[name*="cnpj"],
.form-question input[name*="pis_nis"],
.form-question input[name*="telefone"],
.form-question input[name*="contato"],
.form-question input[name*="nascimento"],
.form-question input[name*="_data"],
.form-question input[name*="data_"],
.form-question input[name*="validade"],
.form-question input[name*="realizacao"],
.form-question input[name*="cep"],
.form-question input[name*="renavam"],
.form-question input[name*="chassi"],
.form-question input[name*="rntrc"],
.form-question input[name*="antt"],
.form-question input[name*="ano"] {
    font-family: var(--font-sans) !important;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}
.form-question input[name*="placa"] {
    font-family: var(--font-sans) !important;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Erro */
.form-input.is-invalid,
input.is-invalid,
input.invalid,
input[aria-invalid="true"],
select[aria-invalid="true"] {
    border-color: var(--erro) !important;
    box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.10) !important;
}
.error-message { color: var(--erro); font-size: 13.5px; font-weight: 500; }
.item-pendente-alvo { outline-color: var(--erro) !important; }

.cpf-feedback { font-size: 13.5px !important; font-weight: 500; }
.cpf-fb-ok { color: var(--ok) !important; }
.cpf-fb-err { color: var(--erro) !important; }

/* ─── 10. Opções (radio / checkbox em cartão) ────────────────────────────── */
.radio-group { gap: 10px !important; }
.radio-option,
.checkbox-option {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--text) !important;
}
.radio-option label,
.checkbox-option label {
    min-height: 52px;
    padding: 13px 16px !important;
    font-size: 15.5px !important;
    font-weight: 500 !important;
    line-height: 1.3;
    color: var(--text) !important;
    background: var(--panel) !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: var(--r-control) !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.radio-option label::before,
.checkbox-option label::before {
    width: 20px !important;
    height: 20px !important;
    border: 1.5px solid var(--border-hover) !important;
    background-color: var(--panel) !important;
    margin-right: 12px !important;
}
.radio-option:hover label,
.checkbox-option:hover label {
    border-color: var(--border-hover) !important;
    background: var(--panel) !important;
}
.radio-option input:checked + label,
.radio-option input:checked ~ label,
.checkbox-option input:checked + label,
.checkbox-option input:checked ~ label {
    border-color: var(--ink) !important;
    background: var(--panel) !important;
    box-shadow: 0 0 0 1px var(--ink) !important;
    font-weight: 600 !important;
}
.radio-option input:checked + label::before,
.radio-option input:checked ~ label::before,
.checkbox-option input:checked + label::before,
.checkbox-option input:checked ~ label::before {
    border-color: var(--ink) !important;
    background-color: var(--ink) !important;
}
.radio-option input:checked + label::before,
.radio-option input:checked ~ label::before {
    width: 20px !important;               /* uma camada antiga aumentava a bolinha marcada */
    height: 20px !important;
    background-color: var(--panel) !important;
    border-width: 6px !important;
}
.radio-option input:focus-visible + label,
.checkbox-option input:focus-visible + label { outline: 2px solid var(--ink); outline-offset: 2px; }
.radio-ico { border-radius: 8px !important; }
.radio-option input:checked ~ label .radio-ico,
.radio-option input:checked + label .radio-ico {
    background: var(--ink) !important;
    color: #ffffff !important;
}

/* ─── 11. Anexos ─────────────────────────────────────────────────────────── */
.file-upload {
    min-height: 72px;
    padding: 14px 16px !important;
    column-gap: 14px !important;
    background: var(--panel-soft) !important;
    border: 1px dashed var(--border-hover) !important;
    border-radius: var(--r-control) !important;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.file-upload:hover,
.file-upload.is-dragover {
    background: var(--ink-soft) !important;
    border-color: var(--ink) !important;
}
.file-upload-icon::before {
    width: 22px !important;
    height: 22px !important;
    background: var(--muted) !important;
}
.file-upload-text {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--text) !important;
}
.file-upload-dnd-hint { font-size: 13px !important; color: var(--faint) !important; }
.file-upload:hover .file-upload-dnd-hint { color: var(--muted) !important; }
.file-upload.has-file,
.file-upload.uploaded,
.file-upload.colado-agora {
    background: var(--ok-soft) !important;
    border: 1px solid var(--ok) !important;
}
.file-upload.has-file .file-upload-icon::before { background: var(--ok) !important; }
.file-upload.has-file .file-upload-text { color: var(--ok-escuro) !important; }
.file-name {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: var(--ok-escuro) !important;
}

/* ─── 12. Botões ─────────────────────────────────────────────────────────── */
.btn-primary,
.btn-secondary,
.btn-next,
.submit-btn,
button[type="submit"] {
    min-height: 48px;
    padding: 0 22px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    border-radius: var(--r-control) !important;
    transform: none !important;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.btn-primary,
.btn-next,
.kyc-start-btn,
.submit-btn,
button[type="submit"] {
    background: var(--ink) !important;
    border: 1px solid var(--ink) !important;
    color: #ffffff !important;
    box-shadow: none !important;
}
.btn-primary:hover:not(:disabled),
.btn-next:hover:not(:disabled),
.kyc-start-btn:hover:not(:disabled),
.submit-btn:hover:not(:disabled),
button[type="submit"]:hover:not(:disabled) {
    background: var(--ink-hover) !important;
    border-color: var(--ink-hover) !important;
    color: #ffffff !important;
    transform: none !important;
    box-shadow: none !important;
}
.btn-primary:disabled,
button[type="submit"]:disabled,
.termo-rules-actions .btn-primary:disabled {
    background: #e4e4e7 !important;
    border-color: #e4e4e7 !important;
    color: #a1a1aa !important;
    box-shadow: none !important;
    opacity: 1 !important;
    cursor: not-allowed;
}
.btn-secondary {
    background: var(--panel) !important;
    border: 1px solid var(--border-strong) !important;
    color: var(--text) !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04) !important;
}
.btn-secondary:hover {
    background: var(--panel-soft) !important;
    border-color: var(--border-hover) !important;
    transform: none !important;
}

/* Voltar/Continuar presos na base da tela enquanto a etapa está à vista */
.btn-group {
    display: flex !important;
    align-items: center;
    gap: 10px !important;
    margin-top: 32px !important;
    padding-top: 0 !important;
    border-top: 0 !important;
}
.btn-group > button { flex: 0 0 auto !important; }
.btn-group > .btn-primary { margin-left: auto; min-width: 160px; }
.sectioned-registration .form-section.active > .btn-group {
    position: sticky;
    bottom: 0;
    z-index: 20;
    margin: 32px 0 0 !important;
    padding: 14px 32px !important;
    background: var(--panel) !important;
    border-top: 1px solid var(--border) !important;
    border-radius: 0 0 var(--r-card) var(--r-card);
}
.ficha-continua .form-section.active > .btn-group { padding: 14px 28px !important; }
.ficha-continua #submitSection > .btn-group > .btn-primary { min-width: 240px; }

/* Aviso de segurança da entrada: o JS pinta o botão de vermelho em degradê
   quando a caixa é marcada (style inline); aqui ele segue o botão da casa. */
#securityAlertBtn:not(:disabled) {
    background: var(--ink) !important;
    box-shadow: none !important;
}

/* ─── 13. Prova de vida ──────────────────────────────────────────────────── */
.kyc-card {
    background: var(--panel-soft) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    padding: 18px 20px !important;
    box-shadow: none !important;
}
#kyc-card-pending { align-items: center !important; gap: 16px !important; }
.kyc-card .kyc-card-icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--panel) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
.kyc-card-title {
    font-size: 16.5px !important;
    font-weight: 600 !important;
    color: var(--text) !important;
}
.kyc-card-desc {
    font-size: 14.5px !important;
    line-height: 1.5;
    color: var(--muted) !important;
    max-width: 62ch;
}
.kyc-card-passos { margin-top: 6px !important; gap: 2px !important; }
.kyc-card-passos li { font-size: 13.5px !important; color: var(--faint) !important; }
.kyc-card-passos li::before { background: var(--border-hover) !important; top: 8px; }
.kyc-start-btn {
    flex: 0 0 auto !important;        /* o `button { flex: 1 }` da base esticava o botão */
    align-self: center !important;
    min-height: 44px;
    padding: 0 20px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    border-radius: var(--r-control) !important;
}
.kyc-card.done {
    background: var(--ok-soft) !important;
    border-color: var(--ok-borda) !important;
}
.kyc-card.done .kyc-card-title { color: var(--ok-escuro) !important; }
.kyc-card.done .kyc-card-icon-wrap { border-color: var(--ok-borda) !important; color: var(--ok) !important; }
.kyc-badge-ok {
    background: var(--panel);
    color: var(--ok);
    border: 1px solid var(--ok-borda);
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 13.5px;
    font-weight: 600;
}

/* ─── 14. Cartões de operação ────────────────────────────────────────────── */
.op-cards-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin-top: 10px !important;
}
.op-card { height: 124px !important; }
.op-card-inner { border-radius: 12px; }
.op-card-front,
.op-card-back { border-radius: 12px !important; }
.op-card-front {
    border: 0 !important;
    box-shadow: none !important;
}
.op-card:hover:not(.flipped) .op-card-front {
    transform: none !important;
    box-shadow: none !important;
    filter: brightness(1.05);
}

/* Selecionado: sem virar o cartão e sem cena animada (caixas, avião, nuvens,
   espuma, confete — o dono achou brega em 30/09). O cartão continua de frente,
   com a marca à vista, e ganha contorno grafite e um selo ✓ no canto. */
.op-selection-fx,
.op-card-back,
.op-card .confete { display: none !important; }
.op-card.flipped .op-card-inner { transform: none !important; box-shadow: none !important; }
.op-card.flipped .op-card-front {
    transform: none !important;
    filter: none !important;
    overflow: visible !important;
    box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--ink) !important;
}
.op-card.flipped .op-card-front-content {
    opacity: 1 !important;
    transform: none !important;
}
.op-card.flipped .op-card-name::after { content: none !important; }
.op-card.flipped .op-card-front::before { content: none !important; display: none !important; }
/* O formulario.css apaga este ::after com `.op-card.flipped .op-card-front::after`
   + !important; o prefixo .op-cards-grid dá a especificidade para vencer. */
.op-cards-grid .op-card .op-card-front::after,
.op-cards-grid .op-card.flipped .op-card-front::after {
    content: '' !important;
    display: block !important;
    position: absolute;
    top: 10px;
    right: 10px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    z-index: 5;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2318181b' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 13px no-repeat,
        #ffffff;
    opacity: 0;
    transition: opacity .15s ease;
    pointer-events: none;
}
.op-cards-grid .op-card.flipped .op-card-front::after { opacity: 1; }
.op-card.flipped .op-card-front-content::after { content: none !important; display: none !important; }

.op-front-shopee   { background: #ee4d2d !important; }
.op-front-amazon   { background: #1f3a8a !important; }
.op-front-heineken { background: #157a3c !important; }
/* Mercado Livre: tom escolhido pelo dono (#725900), texto branco como os outros. */
.op-front-meli     { background: #725900 !important; }

.op-card-front-content {
    padding: 14px 14px 12px !important;
    justify-content: flex-start !important;
    gap: 8px;
}
.op-card-front-content::before {
    width: 36px !important;
    height: 36px !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    font-family: var(--font-sans) !important;
}
.op-front-shopee .op-card-front-content::before { font-size: 20px !important; font-weight: 700 !important; }
.op-front-amazon .op-card-front-content::before {
    font-size: 24px !important;
    padding-bottom: 4px !important;
    box-shadow: inset 0 -3px 0 #ffb000 !important;
}
.op-front-meli .op-card-front-content::before {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #2d3277 !important;
    box-shadow: inset 0 -3px 0 #ffe600 !important;
}
.op-front-heineken .op-card-front-content::before { font-size: 20px !important; text-shadow: none !important; }
.op-card-name {
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    text-shadow: none !important;
}
.op-card-hint {
    margin-top: 2px !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.86) !important;
}
.op-front-meli .op-card-name,
.op-front-meli .op-card-hint { color: #ffffff !important; text-shadow: none !important; }
.op-front-meli .op-card-hint { color: rgba(255, 255, 255, 0.86) !important; }

/* ─── 15. Requisitos das operações ───────────────────────────────────────── */
.req-vcard {
    border-radius: 12px !important;
    border: 1px solid var(--border) !important;
    box-shadow: none !important;
}
.req-vcard-heading { font-size: 17px !important; font-weight: 600 !important; }
.req-vcard-sub { font-size: 14px !important; color: var(--faint) !important; }
.req-vcard-item { font-size: 15px !important; line-height: 1.45; }
.req-vcard-tick { color: var(--ok) !important; }
.req-vcard-warn {
    background: var(--erro-soft) !important;
    border: 1px solid var(--erro-borda) !important;
    color: var(--erro) !important;
    border-radius: var(--r-control) !important;
    font-size: 14px !important;
}

/* ─── 16. Avisos, pendências e índice ────────────────────────────────────── */
/* Aviso de GPS: estilo inline herdado do tema escuro */
#gpsAvisoAntecipado {
    background: var(--warn-soft) !important;
    border: 1px solid var(--warn-borda) !important;
    border-radius: 12px !important;
}
#gpsAvisoAntecipado svg { stroke: var(--warn) !important; }
#gpsAvisoAntecipado div[style*="color:#fbbf24"] { color: #713f12 !important; font-size: 15.5px !important; font-weight: 600 !important; }
#gpsAvisoAntecipadoTexto { color: #713f12 !important; font-size: 14.5px !important; }
#gpsAvisoAntecipadoBtn {
    min-height: 46px;
    background: var(--ink) !important;
    border-radius: var(--r-control) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
}

.edit-mode-banner {
    border-radius: 12px !important;
    font-family: var(--font-sans) !important;
}

.ficha-pendencias.ativo {
    border: 1px solid var(--erro-borda) !important;
    background: var(--erro-soft) !important;
    border-radius: 12px !important;
    padding: 18px 20px !important;
}
.ficha-pendencias-head strong { color: var(--erro) !important; font-size: 16px !important; font-weight: 600; }
.ficha-pendencias-head span { color: var(--muted) !important; font-size: 14px !important; }
.ficha-pendencias-secao {
    font-size: 13px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    font-weight: 600 !important;
    color: var(--text) !important;
}
.ficha-pendencias-grupo button {
    min-height: 44px;
    border-radius: 8px !important;
    border: 1px solid var(--erro-borda) !important;
    font-size: 15px !important;
    flex: 0 0 auto !important;
}
.ficha-pendencias-grupo button:hover { border-color: #fca5a5 !important; background: #fff !important; }

.ficha-indice {
    border-radius: var(--r-card) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--sombra-card) !important;
}
.ficha-indice-titulo {
    font-size: 15px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    font-weight: 600 !important;
    color: var(--text) !important;
}
.ficha-indice-item { min-height: 46px; border-radius: 8px !important; flex: 0 0 auto !important; }
.ficha-indice-num { width: 26px !important; height: 26px !important; font-size: 13px !important; }
.ficha-indice-item.completa .ficha-indice-num { background: var(--ok) !important; border-color: var(--ok) !important; }
.ficha-indice-nome { font-size: 15px !important; font-weight: 500 !important; }
.ficha-indice-selo {
    font-size: 13px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    font-weight: 500 !important;
}

.submit-portal-card {
    border-radius: 12px !important;
    border: 1px solid var(--ok-borda) !important;
    background: var(--ok-soft) !important;
}

/* ─── 17. Ficha no desktop: uma etapa por linha, campos em duas colunas ──────
   O formulario.css punha as ETAPAS em duas colunas a partir de 1280px. Etapa
   curta ao lado de etapa comprida deixava um vão enorme embaixo da curta (o
   dono: "esses vão é horrível"). Agora toda etapa ocupa a linha inteira, na
   ordem, e quem se divide em duas colunas são os CAMPOS das etapas de veículo
   e rastreador — listas soltas de perguntas. Campo escondido pelo JS
   (display: none) não ocupa célula, então a grade se refaz sozinha. */
@media (min-width: 1280px) {
    .content-wrapper:has(.sectioned-registration.ficha-continua) { max-width: 1100px !important; }
    .sectioned-registration.ficha-continua {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;   /* a grade antiga usava `start`: cada etapa ficava com a largura do conteúdo */
    }
}
@media (min-width: 1024px) {
    .ficha-continua > .form-section.active:not(.section-card-hidden):is(#section5, #section6, #section6_veiculo_unico, #section7, #section8, #section9) {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 28px;
        align-items: start;
        padding: 0 28px 28px !important;
    }
    .ficha-continua > .form-section.active:is(#section5, #section6, #section6_veiculo_unico, #section7, #section8, #section9) > * {
        grid-column: 1 / -1;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .ficha-continua > .form-section.active:is(#section5, #section6, #section6_veiculo_unico, #section7, #section8, #section9) > .cadastro-section-card-head {
        margin-left: -28px !important;
        margin-right: -28px !important;
        width: auto;
    }
    .ficha-continua > .form-section.active:is(#section5, #section6, #section6_veiculo_unico, #section7, #section8, #section9) > .form-question {
        grid-column: auto;
    }
    /* Pergunta com lista longa de opções (tipo de veículo) fica na linha toda,
       e as opções se espalham em colunas em vez de uma torre de sete cartões. */
    .ficha-continua > .form-section.active:is(#section5, #section6, #section6_veiculo_unico, #section7, #section8, #section9) > .form-question:has(.radio-option:nth-child(4)) {
        grid-column: 1 / -1;
    }
    .ficha-continua .form-question .radio-group:has(.radio-option:nth-child(4)) {
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    }
    /* Tipo de cadastro: as três opções lado a lado */
    .sectioned-registration.ficha-continua > #section3 .radio-group { flex-direction: row !important; }
    .sectioned-registration.ficha-continua > #section3 .radio-option { flex: 1 1 0; min-width: 0; }
}

/* ─── 18. Modais ─────────────────────────────────────────────────────────── */
.termo-rules-box {
    border-radius: 16px !important;
    font-family: var(--font-sans) !important;
    box-shadow: 0 24px 60px -20px rgba(16, 24, 40, 0.4) !important;
}
.termo-rules-kicker {
    background: var(--erro-soft) !important;
    color: var(--erro) !important;
    border-radius: 999px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}
.termo-rules-header h3 {
    font-size: 21px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em;
}
.termo-rules-item {
    border-radius: var(--r-control) !important;
    border-left-color: var(--ink) !important;
    background: var(--panel-soft) !important;
}
.termo-rules-check input { accent-color: var(--ink); width: 18px; height: 18px; }

.kyc-modal-box {
    border-radius: 16px !important;
    font-family: var(--font-sans) !important;
}

/* Painel "Canais Oficiais". O <style> dele fica no fim do HTML, depois deste
   arquivo, então as regras aqui precisam de !important para valer. */
#helpPanelOverlay { background: rgba(24, 24, 27, 0.4) !important; }
#helpPanel {
    background: var(--panel) !important;
    color: var(--text) !important;
    box-shadow: -12px 0 40px rgba(16, 24, 40, 0.18) !important;
}
.hp-header {
    background: var(--panel) !important;
    border-bottom: 1px solid var(--border) !important;
}
.hp-header-left svg { color: var(--text) !important; }
.hp-header h2 { color: var(--text) !important; font-size: 17px !important; font-weight: 700 !important; }
.hp-header p { color: var(--faint) !important; font-size: 13px !important; }
.hp-close {
    flex: 0 0 36px !important;            /* `button { flex: 1 }` da base esticava o X */
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    background: var(--ink-soft) !important;
    border: 0 !important;
    border-radius: 8px !important;
    color: var(--text) !important;
}
.hp-close:hover { background: var(--border) !important; }
.hp-close svg { width: 16px; height: 16px; }
.hp-body { background: var(--bg) !important; }
.hp-warn {
    background: var(--erro-soft) !important;
    border: 1px solid var(--erro-borda) !important;
}
.hp-warn svg { color: var(--erro) !important; }
.hp-warn-text { color: #7f1d1d !important; font-size: 13.5px !important; }
.hp-warn-text strong { color: #7f1d1d !important; font-size: 14px !important; }
.hp-section-lbl {
    font-size: 13px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    font-weight: 600 !important;
    color: var(--faint) !important;
}
.hp-card {
    background: var(--panel) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
}
.hp-card:hover { border-color: var(--border-strong) !important; }
.hp-card-ico { background: var(--ink-soft) !important; }
.hp-card-ico svg { color: var(--text) !important; }
.hp-dept {
    font-size: 13px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    font-weight: 500 !important;
    color: var(--faint) !important;
}
.hp-num {
    font-size: 17px !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    color: var(--text) !important;
    font-variant-numeric: tabular-nums;
}
.hp-wa {
    min-height: 42px;
    border-radius: 8px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
}

/* ─── 19. Telas médias ───────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .op-cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* ─── 20. Celular ────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    :root { --topbar-h: 56px; }
    html { scroll-padding-top: calc(var(--topbar-h) + 92px); }

    /* Topo: marca à esquerda, ajuda à direita */
    .portal-topbar {
        justify-content: flex-start !important;
        gap: 10px !important;
        padding-left: 12px !important;
        padding-right: 112px !important;      /* reserva do botão de ajuda */
    }
    .portal-topbar-breadcrumb { min-width: 0; overflow: hidden; }
    .portal-topbar-breadcrumb-portal {
        font-size: 18px !important;
        font-weight: 800 !important;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--text) !important;
    }
    .portal-topbar-breadcrumb-sep,
    .portal-topbar-breadcrumb-page { display: none !important; }
    .hamburger {
        flex: 0 0 40px !important;
        width: 40px !important;
        height: 40px !important;
        padding: 0 !important;
        margin: 0 !important;
        background: var(--panel) !important;
        border: 1px solid var(--border-strong) !important;
        border-radius: var(--r-control) !important;
        -webkit-tap-highlight-color: transparent;
    }
    .hamburger span { background: var(--text) !important; }
    .hamburger:hover,
    .hamburger:active { background: var(--panel-soft) !important; }

    #helpFabWrap {
        position: fixed !important;
        top: calc((var(--topbar-h) - 40px) / 2) !important;
        right: 12px !important;
        bottom: auto !important;
        left: auto !important;
        z-index: 996 !important;              /* acima da barra (995), abaixo da gaveta (1000) */
    }
    .hp-callout { display: none !important; }
    #helpFab {
        flex: 0 0 auto !important;            /* `button { flex: 1 }` zerava a altura no contêiner em coluna */
        height: 40px !important;
        width: auto !important;
        padding: 0 14px 0 11px !important;
        gap: 7px !important;
        background: var(--panel) !important;
        color: var(--text) !important;
        border: 1px solid var(--border-strong) !important;
        border-radius: var(--r-control) !important;
        box-shadow: none !important;
        font-size: 14.5px !important;
        font-weight: 600 !important;
        letter-spacing: 0 !important;
        -webkit-tap-highlight-color: transparent;
    }
    #helpFab:hover,
    #helpFab:active {
        background: var(--panel-soft) !important;
        transform: none !important;           /* o inline do index.html levanta o botão */
        box-shadow: none !important;
    }
    #helpFab svg { width: 16px !important; height: 16px !important; color: var(--text); }

    /* A gaveta abre por baixo do topo */
    .sidebar {
        top: var(--topbar-h) !important;
        height: calc(100dvh - var(--topbar-h)) !important;
        box-shadow: 12px 0 32px rgba(16, 24, 40, 0.16) !important;
    }

    .content-wrapper { padding: 0 12px 40px !important; }

    /* Progresso: faixa de ponta a ponta presa embaixo do topo */
    .cadastro-progress {
        top: var(--topbar-h) !important;
        margin: 0 -12px 12px !important;
        padding: 10px 16px 10px !important;
        border-radius: 0 !important;
        border-width: 0 0 1px !important;
        box-shadow: none !important;
    }
    .cadastro-progress-meta { gap: 0 8px; margin-bottom: 8px !important; }
    .cadastro-progress-title { font-size: 15.5px !important; }
    .cadastro-progress-step { order: 5; flex-basis: 100%; font-size: 13px !important; }
    .cadastro-progress-restante { display: none; }
    .cadastro-progress-percent { font-size: 14.5px !important; }
    .cadastro-save-status { margin-top: 6px !important; font-size: 12.5px !important; }

    .sectioned-registration .form-section.active > :not(.cadastro-section-card-head),
    .ficha-continua .form-section.active > :not(.cadastro-section-card-head) {
        margin-left: 16px;
        margin-right: 16px;
    }
    .sectioned-registration:not(.ficha-continua) .form-section.active > .cadastro-section-card-head + * { margin-top: 22px !important; }
    .sectioned-registration .form-section.active > div:last-child:not(.btn-group) { margin-bottom: 22px !important; }
    .cadastro-section-card-head { padding: 14px 16px !important; gap: 12px !important; }
    .ficha-continua .form-section > .cadastro-section-card-head,
    .ficha-continua .form-section.active > .cadastro-section-card-head {
        padding: 16px !important;
        margin-bottom: 20px !important;
    }
    .sectioned-registration.ficha-continua .form-section { padding-bottom: 22px !important; }

    .section-title { font-size: 21px !important; }
    .section-subtitle { font-size: 14.5px !important; margin-bottom: 22px !important; }
    .field-groups { gap: 26px !important; }

    /* Rodapé: Voltar à esquerda, Continuar largo à direita, com folga para a
       barra de gestos do iPhone. */
    .btn-group { flex-direction: row !important; }
    .sectioned-registration .form-section.active > .btn-group,
    .ficha-continua .form-section.active > .btn-group {
        margin: 22px 0 0 !important;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    }
    .btn-group > button { width: auto !important; margin: 0 !important; }
    .btn-group > .btn-primary { flex: 1 1 auto !important; min-width: 0; }
    .btn-group > .btn-secondary { flex: 0 0 auto !important; padding: 0 18px !important; }
    /* Com o teclado aberto o rodapé preso comeria meia tela: volta para o fim da etapa. */
    .sectioned-registration .form-section.active:has(input:not([type="radio"]):not([type="checkbox"]):not([type="file"]):focus, select:focus, textarea:focus) > .btn-group {
        position: static;
    }

    .kyc-card { padding: 16px !important; }
    #kyc-card-pending { align-items: flex-start !important; flex-wrap: wrap; }
    .kyc-start-btn { width: 100%; margin-top: 4px; }

    .op-cards-grid { gap: 10px !important; }
    .op-card { height: 116px !important; }
    .op-card-front-content { padding: 12px 12px 11px !important; }
    .op-card-name { font-size: 14.5px !important; }
    .op-card-hint { font-size: 12px !important; }

    .ficha-pendencias.ativo { padding: 16px !important; }
}