/* ============================================================================
   ReduzziTech DEMO — ajustes exclusivos da versão de demonstração.

   Este arquivo NÃO existe no sistema real: ele só carrega o que é próprio da
   demonstração (faixa "modo demonstração", botões de simulação e os poucos
   blocos que, no sistema, vêm de <style> embutido nas JSPs — stepper da Nova
   Oportunidade, dropzone, overlay de análise e a tela de sucesso).

   Tudo o que é identidade visual continua vindo de theme.css, copiado sem
   alteração do projeto original.
   ============================================================================ */

/* ============================================================ responsividade
   O tema já é responsivo e PROÍBE rolagem horizontal em lista (decisão do dono
   do projeto em 29/07/2026: as células quebram linha em vez de rolar). O que
   está aqui garante a mesma promessa nas telas desta demonstração: nada
   ultrapassa a largura da janela em nenhuma resolução.
   ============================================================================ */
html, body { max-width: 100%; }
/* clip não cria caixa de rolagem (o hidden fica de reserva p/ navegador antigo);
   é o que impede o drawer fechado, que vive deslocado à direita, de virar
   rolagem lateral. */
body.app-page { overflow-x: hidden; overflow-x: clip; }

/* Topbar em tela muito estreita: o nome do usuário some (fica no menu) e os
   atalhos secundários saem — sobram menu, selo e avatar. */
.topbar { gap: .5rem; min-width: 0; }
.topbar > div { min-width: 0; }
@media (max-width: 420px) {
    .topbar .demo-badge { font-size: .62rem; padding: .15rem .45rem; }
    .topbar #btnCopiarLink { display: none; }
    .topbar .topbar-user-info { display: none; }
}
@media (max-width: 360px) {
    .topbar a.icon-btn { display: none; }
}

/* Pílulas da Minha Área: rolam por dentro e nunca empurram a página. */
.nav-minha-area { max-width: 100%; min-width: 0; }

/* Sem min-width:0 um item de flex/grid nunca encolhe abaixo do conteúdo — é a
   causa clássica de tabela empurrando a página inteira. */
.main-wrap, .content, .card, .card-body, .tab-content, .tab-pane, .list-group-item,
.row > [class*="col"] { min-width: 0; }

/* Nada de imagem ou mídia estourando a coluna. */
img, svg, video, canvas { max-width: 100%; height: auto; }

/* Quebra de palavra longa (e-mail, URL, protocolo) em vez de vazar. */
.card-body, .list-group-item, .drawer-body, dd, td, th { overflow-wrap: anywhere; }

/* ============================================ destaque do total já ganho
   Topo da Minha Área: a primeira resposta que o Afiliado quer ver é "quanto eu
   já fiz" — por isso vem antes das abas, em número grande. */
.ganho-destaque-painel {
    display: flex; flex-wrap: wrap; align-items: stretch; gap: 1rem;
    border-radius: var(--raio, 14px);
    background: linear-gradient(135deg, var(--azul-escuro, #001F4E) 0%, var(--azul, #003B82) 60%, var(--azul-acao, #0057D9) 130%);
    color: #fff; padding: 1.25rem 1.4rem;
    box-shadow: var(--sombra-2, 0 8px 24px rgba(7, 20, 47, .12));
}
.ganho-destaque-principal { flex: 1 1 260px; min-width: 0; }
.ganho-destaque-rotulo {
    font-size: .78rem; text-transform: uppercase; letter-spacing: .08em;
    color: rgba(255, 255, 255, .72); font-weight: 700;
}
.ganho-destaque-numero {
    font-size: clamp(2rem, 6vw, 2.9rem); font-weight: 800; line-height: 1.1;
    letter-spacing: -.02em; margin: .15rem 0;
}
.ganho-destaque-apoio { font-size: .85rem; color: rgba(255, 255, 255, .72); }
.ganho-destaque-lado {
    flex: 1 1 320px; display: grid; gap: .6rem;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
.ganho-destaque-item {
    background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 12px; padding: .6rem .75rem; min-width: 0;
}
.ganho-destaque-item-rotulo {
    display: block; font-size: .72rem; color: rgba(255, 255, 255, .72);
    text-transform: uppercase; letter-spacing: .05em; font-weight: 600;
}
.ganho-destaque-item strong { display: block; font-size: 1.05rem; overflow-wrap: anywhere; }
.ganho-destaque-item-apoio {
    display: block; font-size: .7rem; color: rgba(255, 255, 255, .66); margin-top: .1rem;
}

/* Tablet: o valor grande ocupa a linha inteira e os três indicadores ficam
   lado a lado embaixo — na largura do iPad eles quebravam 2 + 1, deixando um
   buraco à direita. */
@media (max-width: 1199.98px) {
    .ganho-destaque-painel { flex-direction: column; }
    /* flex: 0 0 auto nos dois — em coluna, o "flex: 1" esticava a primeira
       parte e abria um vão no meio do painel. */
    .ganho-destaque-principal { flex: 0 0 auto; }
    .ganho-destaque-lado { flex: 0 0 auto; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    .ganho-destaque-lado { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}

/* ===================================================== toque (tablet/celular)
   Em tela sensível ao toque o alvo mínimo é ~44px: no iPad a paginação e o
   botão de copiar o protocolo ficavam com 31–32px, difíceis de acertar com o
   dedo. Só vale para ponteiro grosso — no desktop os controles seguem compactos. */
@media (pointer: coarse) {
    .pagination .page-link {
        min-width: 44px; min-height: 44px;
        display: inline-flex; align-items: center; justify-content: center;
    }
    .conc-protocolo button,
    .res-chip button,
    .icon-btn,
    .btn-close {
        min-width: 44px; min-height: 44px;
        display: inline-flex; align-items: center; justify-content: center;
    }
    .table td .btn-sm, .cartao-lista-acoes .btn-sm { min-height: 40px; }
    .status-remover { min-width: 40px; min-height: 40px; }
    /* Espaço entre alvos: dedo não acerta dois botões colados. */
    .cartao-lista-acoes { gap: .6rem; }
}

/* ------------------------------------------------ listas em cartão (celular)
   Abaixo de 768px NÃO existe tabela: cada registro vira um cartão empilhado.
   É a única forma de garantir que nenhuma largura mínima de coluna (select,
   data, botões) possa criar rolagem horizontal em tela estreita. Da tabela
   para cima, a tabela normal continua valendo. */
.lista-cartoes { display: flex; flex-direction: column; gap: .6rem; padding: .75rem; }
.cartao-lista {
    border: 1px solid var(--borda, #D8E0EC);
    border-radius: var(--raio-sm, 10px);
    background: #fff;
    padding: .75rem .85rem;
}
.cartao-lista.destaque { border-color: #E9A23B; background: #FFFDF7; }
.cartao-lista-topo {
    display: flex; align-items: center; justify-content: space-between;
    gap: .5rem; flex-wrap: wrap; margin-bottom: .15rem;
}
.cartao-lista-codigo { font-weight: 700; font-size: .9rem; }
.cartao-lista-nome { font-weight: 600; margin-bottom: .5rem; }
.cartao-lista-dados {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .35rem .75rem; margin: 0 0 .6rem;
}
.cartao-lista-dados > div { min-width: 0; }
.cartao-lista-dados dt {
    font-size: .68rem; text-transform: uppercase; letter-spacing: .04em;
    color: var(--texto-sec, #52627A); font-weight: 600;
}
.cartao-lista-dados dd { margin: 0; font-size: .85rem; overflow-wrap: anywhere; }
.cartao-lista-acoes { display: flex; align-items: center; gap: .4rem; }
.cartao-lista-acoes .table-select { flex: 1 1 auto; min-width: 0; max-width: none; font-size: .8rem; }
.cartao-lista-acoes .btn { flex: 0 0 auto; }
.cartao-lista-total {
    display: flex; justify-content: space-between; align-items: baseline;
    border-top: 1px solid var(--cinza-linha, #EDF1F7); padding-top: .5rem; font-weight: 700;
}

/* ------------------------------- ganho por oportunidade agrupado por mês
   Cada mês é um painel dobrável: no cabeçalho, mês + quantidade + subtotal. */
.acordeao-ganho .accordion-button {
    display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
    padding: .8rem 1rem; font-weight: 600;
}
.acordeao-ganho .accordion-button:not(.collapsed) {
    background: var(--azul-suave, #EEF4FF); color: var(--azul-escuro, #001F4E);
    box-shadow: none;
}
.acordeao-ganho .accordion-button::after { margin-left: 0; }
.acordeao-ganho-mes { flex: 1 1 auto; min-width: 0; text-transform: capitalize; }
.acordeao-ganho-qtd {
    font-size: .75rem; font-weight: 600; color: var(--texto-sec, #52627A);
    background: var(--cinza-linha, #EDF1F7); border-radius: 999px; padding: .15rem .6rem;
    white-space: nowrap;
}
.acordeao-ganho-total { white-space: nowrap; margin-right: .5rem; }
.acordeao-ganho .accordion-body .lista-cartoes { padding: .75rem; }
.acordeao-ganho tfoot td { background: var(--cinza-th, #FBFCFE); }

@media (max-width: 575.98px) {
    .acordeao-ganho .accordion-button { gap: .4rem; padding: .7rem .75rem; font-size: .9rem; }
    .acordeao-ganho-mes { flex: 1 1 100%; }
}

/* Barras horizontais no lugar do gráfico de colunas em tela estreita — sem
   rolagem lateral e mais legível no celular. */
.barras-mes { display: flex; flex-direction: column; gap: .55rem; }
.barra-mes-topo {
    display: flex; justify-content: space-between; gap: .5rem;
    font-size: .8rem; color: var(--texto-sec, #52627A);
}
.barra-mes-trilha {
    height: 10px; border-radius: 999px; background: var(--cinza-linha, #EDF1F7); overflow: hidden;
}
.barra-mes-preenchimento { height: 100%; border-radius: 999px; background: var(--azul-acao, #0057D9); }
.barra-mes-preenchimento.melhor { background: var(--verde, #22A63F); }
.barra-mes-preenchimento.zero { background: var(--cinza-vazio, #B9C4D4); }

/* Tabelas: o texto quebra e a linha cabe. Colunas secundárias somem por
   breakpoint no HTML de cada tela (classes d-none d-md-table-cell etc.). */
.table { table-layout: auto; }

/* Abaixo de 992px o cabeçalho pode quebrar: um "Status do Financiamento" em
   linha única estava ditando 190px de coluna num celular de 390px. */
@media (max-width: 991.98px) {
    .op-tabela thead th, .conv-tabela thead th { white-space: normal; }
}
.table td, .table th { vertical-align: middle; }
.table-select { max-width: 100%; }

/* Formulários e grupos de input não podem forçar largura mínima grande. */
.input-group { flex-wrap: wrap; }
.input-group > .form-control, .input-group > .form-select { min-width: 8rem; }

/* Modal e drawer: altura da janela manda; conteúdo rola por dentro. */
.modal-body { max-height: calc(100vh - 12rem); overflow-y: auto; }
.drawer-overlay { inset: 0; }

@media (max-width: 575.98px) {
    /* Cabeçalho de página e ações empilham e ocupam a linha inteira. */
    .page-title { font-size: 1.35rem; }
    .content .btn-lg { width: 100%; }
    .op-hero, .conv-hero { padding: 1rem; }
    .op-hero .btn, .conv-hero .btn { width: 100%; }
    /* Pílulas da Minha Área: rolam na horizontal em vez de espremer. */
    .nav-minha-area { overflow-x: auto; }
    .nav-minha-area .nav-link { white-space: nowrap; }
    /* Tabela mais compacta no celular. */
    .table > :not(caption) > * > * { padding: .5rem .4rem; font-size: .86rem; }
    .badge { white-space: normal; }

    /* Select de status: encolhe até o espaço disponível (o rótulo completo
       continua na lista aberta). */
    .table-select {
        font-size: .7rem;
        padding: .2rem .95rem .2rem .3rem;
        background-position: right .2rem center;
        background-size: 10px 8px;
        /* O rótulo longo ("Aguardando Inserção Docs") não pode ditar a largura
           da coluna: ele aparece inteiro quando a lista abre. */
        max-width: 7.5rem;
    }

    /* Coluna de ações: botões empilhados e compactos ocupam ~44px, não ~90px. */
    .op-tabela td:last-child .d-flex { flex-direction: column; gap: .25rem !important; }
    .op-tabela td:last-child .btn { padding: .2rem .45rem; }

    /* Fixo na janela, nunca na largura do conteúdo. */
    .drawer-overlay { width: 100vw; }
    .drawer { width: min(100vw, 420px); }
}

/* ---------------------------------------------------------------- faixa demo */
.demo-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: #FEF3E2;
    color: #B45309;
    border: 1px solid #F2C168;
    border-radius: 999px;
    padding: .2rem .6rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.demo-nota {
    border-left: 4px solid #E9A23B;
    background: #FFFDF7;
    border-radius: 12px;
    padding: .85rem 1rem;
    font-size: .85rem;
    color: var(--texto-sec, #52627A);
}

.demo-nota strong { color: var(--texto, #07142F); }

/* Botão de simulação: sempre tracejado, para nunca ser confundido com um
   botão real do sistema. */
.btn-simular {
    border: 1px dashed #B45309 !important;
    color: #B45309 !important;
    background: #FFFDF7 !important;
    font-weight: 600;
}

.btn-simular:hover { background: #FEF3E2 !important; }

/* ------------------------------------------------- stepper (Nova Oportunidade) */
.stepper {
    display: flex; align-items: center; gap: .75rem;
    margin-bottom: 1.25rem; flex-wrap: wrap;
}
.stepper .passo { display: flex; align-items: center; gap: .55rem; }
.stepper .passo-num {
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; background: #e9ecef; color: #6c757d;
    transition: background .2s, color .2s;
}
.stepper .passo-rotulo { font-weight: 600; color: #6c757d; white-space: nowrap; }
.stepper .passo.ativo .passo-num,
.stepper .passo.feito .passo-num { background: var(--bs-primary, #0057D9); color: #fff; }
.stepper .passo.ativo .passo-rotulo { color: #212529; }
.stepper .tracinho {
    flex: 1 1 48px; min-width: 32px; height: 3px;
    background: #e9ecef; border-radius: 2px;
}
.stepper .tracinho.ativo { background: var(--bs-primary, #0057D9); }
@media (max-width: 575.98px) { .stepper .passo-rotulo { font-size: .85rem; } }

.icone-tile {
    width: 54px; height: 54px; border-radius: 14px; flex: 0 0 auto;
    background: var(--bs-primary, #0057D9); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem;
}
.aviso-aceite { border: 1px solid #f2c168; background: #fff8ec; border-radius: 12px; }
.aviso-aceite .aviso-icone {
    width: 42px; height: 42px; border-radius: 50%; flex: 0 0 auto;
    background: #fdeacc; color: #b76e00;
    display: flex; align-items: center; justify-content: center; font-size: 1.3rem;
}
.painel-link-qr { background: #fff; border: 1px solid #e9ecef; border-radius: 10px; }
@media (min-width: 768px) { .painel-link-qr .coluna-qr { border-left: 1px solid #e9ecef; } }
.faixa-info { background: #eef4ff; border: 1px solid #d9e6ff; border-radius: 10px; }
.faixa-info .info-icone {
    width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto;
    background: #dbe7ff; color: var(--bs-primary, #0057D9);
    display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
}

/* ------------------------------------------------------------------ dropzone */
.dropzone {
    border: 2px dashed var(--bs-border-color, #ced4da);
    border-radius: .75rem;
    padding: 3rem 1rem;
    text-align: center;
    transition: background-color .15s, border-color .15s;
    cursor: pointer;
}
.dropzone .dz-icone { font-size: 2.75rem; line-height: 1; color: var(--bs-primary, #0d6efd); }
.dropzone.dragover {
    border-color: var(--bs-primary, #0d6efd);
    background-color: rgba(13, 110, 253, .06);
}
.confirmacao-painel { position: sticky; top: 1rem; }
.status-item.ok { background-color: rgba(25, 135, 84, .07); }
.status-item.ok .status-aguardando { display: none; }
.status-item:not(.ok) .status-arquivo { display: none; }
.status-item .status-check { color: var(--bs-secondary, #6c757d); }
.status-item.ok .status-check { color: var(--bs-success, #198754); }

/* ------------------------------------------ leitura do PDF no navegador
   Painel que aparece no envio quando um arquivo de verdade é reconhecido. */
.leitura-pdf {
    border: 1px solid #BFE7C9; background: #F5FCF7; border-radius: 12px; padding: .8rem .9rem;
}
.leitura-pdf-topo { display: flex; align-items: center; gap: .7rem; }
.leitura-pdf-icone {
    width: 38px; height: 38px; border-radius: 10px; flex: 0 0 38px;
    background: #E7F6EC; color: #1B8A33;
    display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
}
.leitura-pdf-campos {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .35rem .9rem; margin: .75rem 0 0;
}
.leitura-pdf-campos > div { min-width: 0; }
.leitura-pdf-campos dt {
    font-size: .68rem; text-transform: uppercase; letter-spacing: .04em;
    color: var(--texto-sec, #52627A); font-weight: 600;
}
.leitura-pdf-campos dd { margin: 0; font-size: .88rem; font-weight: 600; overflow-wrap: anywhere; }
.leitura-pdf-vazio { font-size: .84rem; color: var(--texto-sec, #52627A); margin-top: .5rem; }

/* --------------------------------------------------------- overlay de análise */
.overlay-analise {
    position: fixed; inset: 0; z-index: 1080;
    background: rgba(255, 255, 255, .93);
    display: none; align-items: center; justify-content: center;
    text-align: center; padding: 1rem;
}
.overlay-analise.ativo { display: flex; }
.analise-spin, .proc-spin {
    width: 3rem; height: 3rem; margin: 0 auto;
    border: .3rem solid rgba(13, 110, 253, .2);
    border-top-color: var(--bs-primary, #0d6efd);
    border-radius: 50%;
    animation: analiseSpin .8s linear infinite;
}
.proc-spin { width: 3.5rem; height: 3.5rem; margin-bottom: 1.25rem; }
@keyframes analiseSpin { to { transform: rotate(360deg); } }
.analise-barra, .proc-barra {
    width: min(320px, 80vw); height: 6px; margin: 1rem auto 0;
    background: rgba(13, 110, 253, .15); border-radius: 4px; overflow: hidden;
}
.analise-barra span, .proc-barra span {
    display: block; width: 40%; height: 100%;
    background: var(--bs-primary, #0d6efd); border-radius: 4px;
    animation: analiseBarra 1.2s ease-in-out infinite;
}
@keyframes analiseBarra {
    0% { transform: translateX(-110%); }
    100% { transform: translateX(320%); }
}
.analise-passo::after { content: ""; animation: analiseDots 1.2s steps(4, end) infinite; }
@keyframes analiseDots { 0%{content:"";} 25%{content:".";} 50%{content:"..";} 75%{content:"...";} 100%{content:"";} }
.proc-wrap {
    min-height: 60vh; display: flex; align-items: center; justify-content: center;
    text-align: center; padding: 1rem;
}

/* --------------------------------------------------------- tela de resultado */
.res-anim { opacity: 0; transform: translateY(10px); animation: resIn .5s ease forwards; }
.res-anim.d1 { animation-delay: .05s; } .res-anim.d2 { animation-delay: .15s; }
.res-anim.d3 { animation-delay: .25s; } .res-anim.d4 { animation-delay: .35s; }
@keyframes resIn { to { opacity: 1; transform: none; } }
.res-sucesso-icone {
    width: 92px; height: 92px; border-radius: 50%;
    background: radial-gradient(circle at 50% 40%, #d1f5df, #eafaf0);
    display: flex; align-items: center; justify-content: center;
    color: #198754; font-size: 2.4rem; position: relative; flex: 0 0 auto;
}
.res-sucesso-icone .bi-check-circle-fill { animation: resPop .5s .2s both cubic-bezier(.2,1.3,.4,1); }
@keyframes resPop { from { transform: scale(0); } to { transform: scale(1); } }
.res-chip {
    display: inline-flex; align-items: center; gap: .5rem;
    border: 1px solid var(--bs-border-color, #dee2e6); border-radius: .5rem;
    padding: .4rem .75rem; background: #fff; font-size: .95rem;
}
.res-chip button { border: 0; background: none; color: var(--bs-secondary, #6c757d); cursor: pointer; }
.res-stepper { display: flex; align-items: flex-start; }
.res-step { flex: 1; text-align: center; position: relative; }
.res-step .res-bola {
    width: 40px; height: 40px; border-radius: 50%; margin: 0 auto 8px;
    display: flex; align-items: center; justify-content: center;
    background: #e9ecef; color: #6c757d; font-weight: 700; z-index: 2; position: relative;
}
.res-step.done .res-bola { background: #198754; color: #fff; }
.res-step.active .res-bola { background: #0d6efd; color: #fff; box-shadow: 0 0 0 4px rgba(13,110,253,.18); }
.res-step:not(:first-child)::before {
    content: ""; position: absolute; top: 20px; left: -50%; width: 100%; height: 3px;
    background: #e9ecef; z-index: 1;
}
.res-step.done::before, .res-step.active::before { background: #198754; }
.res-step .res-rot { font-weight: 600; font-size: .95rem; }
.res-step .res-sub { font-size: .82rem; }
.res-premio {
    background: linear-gradient(180deg, #fffdf5, #fff7e0);
    border: 1px solid #f3e0a8; border-radius: .9rem;
}
.res-moeda {
    width: 58px; height: 58px; border-radius: 50%; flex: 0 0 auto;
    background: radial-gradient(circle at 40% 35%, #ffd76a, #e6a700);
    color: #7a5200; display: flex; align-items: center; justify-content: center;
    font-size: 1.7rem; box-shadow: inset 0 0 0 3px rgba(255,255,255,.5);
    animation: resMoeda 1.8s ease-in-out infinite;
}
@keyframes resMoeda { 0%,100% { transform: translateY(0) rotate(-6deg);} 50% { transform: translateY(-4px) rotate(6deg);} }
.res-valor {
    font-size: clamp(2rem, 5vw, 2.9rem); font-weight: 800; letter-spacing: -.02em;
    background: linear-gradient(90deg, #b8860b, #e6a700, #b8860b);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: #b8860b; line-height: 1.1;
}
.res-passo-icone {
    width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
}
.res-confete {
    position: fixed; top: -14px; width: 9px; height: 15px; z-index: 1080;
    border-radius: 2px; pointer-events: none; animation: resCair linear forwards;
}
@keyframes resCair { to { transform: translateY(105vh) rotate(720deg); opacity: 0; } }

/* ============================================================ tela de conclusão
   Layout aprovado pelo dono do projeto (mockup de 03/08/2026): stepper de 3
   etapas, painel "Parabéns" com o mascote, selo de missão concluída, próximos
   passos e as duas ações. */
.conc-stepper {
    display: flex; align-items: center; gap: 1rem; flex-wrap: nowrap;
    overflow-x: auto; padding-bottom: .25rem;
}
.conc-etapa { display: flex; align-items: center; gap: .7rem; flex: 0 0 auto; }
.conc-bola {
    width: 42px; height: 42px; border-radius: 50%; flex: 0 0 42px;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 1.05rem;
    background: #E9EDF3; color: var(--texto-sec, #52627A);
}
.conc-etapa.feita .conc-bola { background: var(--verde, #22A63F); color: #fff; }
.conc-etapa.atual .conc-bola {
    background: var(--azul-acao, #0057D9); color: #fff;
    box-shadow: 0 0 0 4px rgba(0, 87, 217, .16);
}
.conc-etapa-rot { font-weight: 700; font-size: .95rem; line-height: 1.2; }
.conc-etapa-sub { font-size: .8rem; color: var(--texto-sec, #52627A); }
.conc-trilho { flex: 1 1 40px; min-width: 28px; height: 3px; background: #E9EDF3; border-radius: 2px; }
.conc-trilho.feito { background: var(--verde, #22A63F); }

/* Tablet: as três etapas continuam na mesma linha, mas sem a legenda de apoio —
   em 768px o texto completo era cortado na borda. */
@media (max-width: 991.98px) {
    .conc-stepper { gap: .6rem; }
    .conc-etapa { gap: .5rem; }
    .conc-etapa-sub { display: none; }
    .conc-etapa-rot { font-size: .85rem; }
    .conc-bola { width: 34px; height: 34px; flex-basis: 34px; font-size: .92rem; }
    .conc-trilho { flex: 1 1 16px; min-width: 10px; }
}

/* Celular: só o número da etapa e o nome curto. */
@media (max-width: 575.98px) {
    .conc-etapa-rot { font-size: .78rem; }
    .conc-bola { width: 30px; height: 30px; flex-basis: 30px; font-size: .85rem; }
}

/* Faixa branca do stepper, colada ao topo do conteúdo (mockup 04/08/2026).
   As margens negativas espelham o padding do .content do tema (28px 32px no
   desktop, 20px 16px abaixo de 1024px) para a faixa sangrar de ponta a ponta. */
.conc-faixa {
    background: #fff;
    border-bottom: 1px solid var(--borda, #D8E0EC);
    margin: -28px -32px 1.5rem;
    padding: 1rem 32px;
}
@media (max-width: 1023px) {
    .conc-faixa { margin: -20px -16px 1.25rem; padding: .85rem 16px; }
}
.conc-etapa.atual .conc-etapa-rot { color: var(--azul-acao, #0057D9); }

.conc-hero {
    position: relative; overflow: hidden;
    background: #fff;
    border: 1px solid var(--borda, #D8E0EC);
    border-radius: var(--raio, 14px);
    box-shadow: var(--sombra-1);
}

/* Mascote sobre um halo claro, com o selo de concluído no canto — e confete
   decorativo em volta (estático: o confete que cai é o do script). */
.conc-palco {
    position: relative; display: flex; align-items: flex-end; justify-content: center;
    padding: 1rem .5rem 0;
}
.conc-palco::before {
    content: ""; position: absolute; left: 50%; top: 12%;
    width: min(78%, 320px); aspect-ratio: 1; transform: translateX(-50%);
    background: radial-gradient(circle, #EAF1FF 0%, #F4F8FF 60%, transparent 72%);
    border-radius: 50%;
}
.conc-palco .conc-mascote { position: relative; z-index: 1; }
.conc-selo-ok {
    position: absolute; left: 6%; top: 14%; z-index: 2;
    width: 54px; height: 54px; border-radius: 50%;
    background: #E7F6EC; color: #1B8A33;
    display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
    box-shadow: 0 6px 16px rgba(27, 138, 51, .18);
}
.conc-confete-fixo { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.conc-confete-fixo span {
    position: absolute; width: 9px; height: 9px; border-radius: 2px; opacity: .85;
}

.conc-check-grande {
    width: 76px; height: 76px; border-radius: 50%; margin: 0 auto .75rem;
    background: var(--verde, #22A63F); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 2.4rem;
    box-shadow: 0 10px 24px rgba(34, 166, 63, .28);
}

/* "Você está mais perto do fechamento!" com a barra azul do mockup. */
.conc-reforco-barra {
    display: inline-flex; align-items: center; gap: .75rem;
    border-left: 4px solid var(--azul-acao, #0057D9);
    padding: .1rem 0 .1rem .75rem;
    font-weight: 700; color: var(--texto, #07142F);
}

/* Protocolo em cartão, com ícone e botão de copiar. */
.conc-protocolo {
    display: inline-flex; align-items: center; gap: .9rem;
    background: #F7FAFF; border: 1px solid var(--borda, #D8E0EC);
    border-radius: 12px; padding: .7rem 1rem; text-align: left;
}
.conc-protocolo-icone {
    width: 42px; height: 42px; border-radius: 10px; flex: 0 0 42px;
    background: var(--azul-suave, #EEF4FF); color: var(--azul-acao, #0057D9);
    display: flex; align-items: center; justify-content: center; font-size: 1.25rem;
}
.conc-protocolo-rotulo { font-size: .78rem; color: var(--texto-sec, #52627A); }
.conc-protocolo-valor { font-size: 1.15rem; font-weight: 700; letter-spacing: .01em; }
.conc-protocolo button {
    border: 0; background: none; color: var(--texto-sec, #52627A);
    cursor: pointer; padding: .25rem; border-radius: 8px;
}
.conc-protocolo button:hover { background: var(--azul-suave, #EEF4FF); color: var(--azul-acao, #0057D9); }
/* O PNG já vem recortado e com alpha limpo: sem máscara, sem borda, sem sombra
   por baixo. Só o tamanho é controlado aqui. */
.conc-mascote {
    width: 100%; max-width: 400px; display: block;
    /* Margem negativa + overflow do painel: a arte termina rente à borda de
       baixo do card, em vez de flutuar cortada no meio dele. */
    margin: 0 auto calc(-1rem - 4px);
}
@media (min-width: 992px) { .conc-mascote { margin-bottom: calc(-1.5rem - 4px); } }
.conc-titulo {
    font-size: clamp(2.1rem, 5vw, 3.1rem); font-weight: 800;
    color: var(--azul-escuro, #001F4E); letter-spacing: -.02em; margin: 0;
}
.conc-subtitulo {
    font-size: clamp(1.15rem, 2.6vw, 1.6rem); font-weight: 700;
    color: var(--azul-acao, #0057D9); margin: .1rem 0 .6rem;
}
.conc-reforco { font-weight: 700; color: var(--texto, #07142F); }

/* O bloco de gamificação ("Missão concluída / bônus") foi removido a pedido do
   dono do projeto em 03/08/2026 — junto com ele saíram .conc-missao*, .conc-bonus
   e .conc-moeda, que não são usados em mais nenhuma tela. */

/* Cartão de próximo passo: ícone + número no topo, texto no meio, seta embaixo
   à direita (mockup 04/08/2026). */
.conc-passo {
    display: flex; flex-direction: column; gap: .6rem;
    border: 1px solid var(--borda, #D8E0EC); border-radius: 12px;
    padding: 1rem; height: 100%; text-decoration: none; color: inherit;
    background: #fff; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.conc-passo:hover {
    border-color: var(--azul-acao, #0057D9); color: inherit;
    box-shadow: var(--sombra-1); transform: translateY(-2px);
}
.conc-passo:hover .conc-passo-seta { color: var(--azul-acao, #0057D9); }
.conc-passo-topo { display: flex; align-items: center; gap: .6rem; }
.conc-passo-icone {
    width: 52px; height: 52px; border-radius: 14px; flex: 0 0 52px;
    display: flex; align-items: center; justify-content: center; font-size: 1.35rem;
}
.conc-passo-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%; flex: 0 0 26px;
    background: var(--azul-acao, #0057D9); color: #fff;
    font-size: .8rem; font-weight: 700;
}
.conc-passo-num.verde { background: #E7F6EC; color: #1B8A33; }
.conc-passo-num.cinza { background: var(--cinza-linha, #EDF1F7); color: var(--texto-sec, #52627A); }
.conc-passo-titulo { font-weight: 700; }
.conc-passo-texto { color: var(--texto-sec, #52627A); font-size: .86rem; }
.conc-passo-seta {
    margin-top: auto; align-self: flex-end;
    color: var(--cinza-placeholder, #9AA7BA); font-size: 1.15rem;
    transition: color .15s ease;
}

/* --------------------------------------------------- listagem de oportunidades */
.op-hero {
    position: relative; overflow: hidden;
    border-radius: var(--raio, 14px);
    background: linear-gradient(135deg, var(--azul-escuro, #001F4E) 0%, var(--azul, #003B82) 55%, var(--azul-acao, #0057D9) 130%);
    color: #fff; padding: 1.1rem 1.4rem;
    box-shadow: var(--sombra-2, 0 8px 24px rgba(7,20,47,.12));
}
.op-hero::before {
    content: ""; position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px);
    background-size: 22px 22px; pointer-events: none;
}
.op-hero::after {
    content: ""; position: absolute; top: -60%; right: -10%;
    width: 55%; height: 220%;
    background: radial-gradient(closest-side, rgba(0,87,217,.55), transparent);
    transform: rotate(18deg); pointer-events: none;
}
.op-hero > * { position: relative; z-index: 1; }
.op-hero-icone {
    width: 44px; height: 44px; flex: 0 0 44px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 13px; background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.22); font-size: 1.3rem;
}
.op-hero h1 { font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; margin: 0; }
.op-hero .op-hero-sub { color: rgba(255,255,255,.72); font-size: .85rem; margin: .1rem 0 0; max-width: 60ch; }
.btn-hero {
    --bs-btn-color: #fff;
    --bs-btn-border-color: rgba(255,255,255,.45);
    --bs-btn-hover-color: var(--azul-escuro, #001F4E);
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: #fff;
    font-weight: 600;
}
.op-tile { position: relative; transition: transform .15s ease, box-shadow .15s ease; cursor: pointer; }
.op-tile:hover { transform: translateY(-3px); box-shadow: var(--sombra-2, 0 8px 24px rgba(7,20,47,.12)); }
.op-tile.op-tile-ativo { outline: 2px solid var(--azul-acao, #0057D9); outline-offset: -2px; }
.op-tile .op-tile-hint { font-size: .7rem; color: var(--cinza-placeholder, #9AA7BA); display: none; }
.op-tile:hover .op-tile-hint { display: block; }
.op-tabela thead th {
    text-transform: uppercase; font-size: .72rem; letter-spacing: .06em;
    color: var(--texto-sec, #52627A);
    background: var(--cinza-th, #FBFCFE);
    border-bottom: 2px solid var(--borda, #D8E0EC);
    white-space: nowrap;
}
.op-tabela tbody td { border-bottom-color: var(--cinza-linha, #EDF1F7); }
.sem-quebra { white-space: nowrap; }

/* convites pendentes (grid de mini-cards da listagem) */
.aceite-pend-card { border-left: 4px solid #E9A23B; }
.aceite-pend-icone {
    width: 42px; height: 42px; flex: 0 0 42px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 12px; background: var(--laranja-suave, #FEF3E2);
    color: var(--laranja-texto, #B45309); font-size: 1.15rem;
}
.aceite-pend-contagem {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.5rem; height: 1.5rem; padding: 0 .45rem; border-radius: 999px;
    background: var(--laranja-suave, #FEF3E2); color: var(--laranja-texto, #B45309);
    font-size: .8rem; font-weight: 700;
}
.aceite-pend-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .75rem;
}
.aceite-pend-item {
    display: flex; flex-direction: column; gap: .4rem; padding: .7rem .85rem;
    border: 1px solid var(--borda, #D8E0EC); border-radius: 12px; background: #FFFDF7;
    text-decoration: none; color: inherit;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.aceite-pend-item:hover {
    border-color: #E9A23B; box-shadow: 0 4px 14px rgba(180, 83, 9, .12);
    transform: translateY(-1px); color: inherit;
}
.aceite-pend-cpf { font-weight: 600; letter-spacing: .02em; }
.aceite-pend-badge { background: var(--laranja-suave, #FEF3E2); color: var(--laranja-texto, #B45309); }
/* Apelido/nome do cliente no cartao de aceite pendente (06/08/2026).
   Sem ele o cartao mostrava so o CPF mascarado e o CCA nao sabia de quem
   cobrar o aceite. text-truncate no HTML corta apelido longo em uma linha:
   "Dona Cleide - sobrado do Jardim Paulista" nao pode empurrar o cartao. */
.aceite-pend-nome { font-size: .88rem; margin: .35rem 0 .1rem; }

.aceite-pend-meta { display: flex; flex-direction: column; gap: .15rem; font-size: .78rem; color: var(--texto-sec, #52627A); }

/* --------------------------------------------------------------- convites */
.conv-hero {
    display: flex; align-items: center; gap: 1rem;
    border-radius: var(--raio, 14px);
    background: linear-gradient(135deg, var(--azul-escuro, #001F4E), var(--azul-acao, #0057D9));
    color: #fff; padding: 1.1rem 1.4rem;
    box-shadow: var(--sombra-2, 0 8px 24px rgba(7,20,47,.12));
}
.conv-hero-icone {
    width: 44px; height: 44px; flex: 0 0 44px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 13px; background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.22); font-size: 1.3rem;
}
.conv-hero h1 { font-size: 1.25rem; font-weight: 700; margin: 0; }
.conv-hero p { margin: 0; font-size: .85rem; opacity: .85; max-width: 60ch; }
.conv-tabela thead th {
    text-transform: uppercase; font-size: .72rem; letter-spacing: .06em;
    color: var(--texto-sec, #52627A); background: var(--cinza-th, #FBFCFE);
    border-bottom: 2px solid var(--borda, #D8E0EC);
}
.conv-tabela tbody td { padding-top: .7rem; padding-bottom: .7rem; border-bottom-color: var(--cinza-linha, #EDF1F7); }
.conv-cpf { font-weight: 600; letter-spacing: .02em; }
.conv-badge {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .3rem .6rem; border-radius: 999px; font-size: .74rem; font-weight: 600;
}
.conv-badge.aceito     { background: #E7F6EC; color: #1B8A33; }
.conv-badge.aguardando { background: var(--azul-suave, #EEF4FF); color: var(--azul-acao, #0057D9); }
.conv-badge.expirado   { background: #FEF3E2; color: #B45309; }
.conv-badge.cancelado  { background: #EEF1F5; color: #52627A; }

@media (prefers-reduced-motion: reduce) {
    .res-anim, .res-moeda, .res-confete, .analise-spin, .proc-spin { animation: none; opacity: 1; transform: none; }
}

/* ===========================================================================
   VALORES E REPASSES  (Marco Aurelio, 06/08/2026)
   Tela /valores.html — tabela de honorário por faixa de área construída.
   =========================================================================== */

/* ---------------------------------------------------------------- cabeçalho */
.valores-hero {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    background: linear-gradient(180deg, #F7FAFF 0%, #EFF5FF 100%);
    border: 1px solid var(--borda, #DCE5F2);
    padding: 1.5rem 1.75rem;
}
.valores-hero-conteudo { position: relative; display: flex; align-items: center; gap: 1rem; }
.valores-hero-icone {
    flex: 0 0 auto;
    width: 52px; height: 52px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: var(--azul-acao, #0057D9); color: #fff; font-size: 1.35rem;
}

/* A ilustração vive atrás do texto. currentColor puxa o azul do tema, e a
   opacidade baixa impede que ela dispute atenção com o título. */
.valores-hero-arte {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: 340px; color: var(--azul-acao, #0057D9);
    opacity: .14; pointer-events: none;
}
.valores-hero-arte svg { width: 100%; height: 100%; }
.valores-hero-arte rect, .valores-hero-arte path { fill: currentColor; }
.valores-hero-janelas rect { fill: #fff; opacity: .75; }

/* Abaixo de lg a arte encostaria no texto: sai de cena. */
@media (max-width: 991.98px) {
    .valores-hero-arte { display: none; }
    .valores-hero { padding: 1.25rem; }
}

/* ------------------------------------------------------------ selo de data */
.badge-atualizacao {
    display: inline-flex; align-items: center;
    font-size: .78rem; font-weight: 600;
    padding: .32rem .7rem; border-radius: 999px;
    background: #E7F7EC; color: #1B7F35; border: 1px solid #C6EDD2;
}

/* ----------------------------------------------------- ícone de cada faixa */
.faixa-celula { display: flex; align-items: center; gap: .7rem; }
.faixa-chip {
    flex: 0 0 auto;
    width: 34px; height: 34px; border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1rem;
}
.faixa-chip-verde    { background: #E4F7E9; color: #1B7F35; }
.faixa-chip-azul     { background: #E4EEFD; color: #0057D9; }
.faixa-chip-roxo     { background: #F0E8FD; color: #6B2FD1; }
.faixa-chip-laranja  { background: #FDF0DF; color: #B5701A; }
.faixa-chip-ciano    { background: #DEF5F7; color: #10707D; }
.faixa-chip-vermelho { background: #FDE6E8; color: #C22B39; }
.faixa-chip-escuro   { background: #DDE5F3; color: #14335F; }

/* ------------------------------------------------------------------ tabela */
.tabela-faixas thead th {
    font-size: .74rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em;
    color: var(--texto-sec, #52627A);
    border-bottom-width: 1px;
    padding-top: .9rem; padding-bottom: .9rem;
}
/* O que o Afiliado recebe é a resposta que ele veio buscar: destaca a coluna
   inteira, cabeçalho e valores. */
.tabela-faixas thead th.col-repasse { color: var(--verde, #1B7F35); }
.tabela-faixas td { padding-top: .8rem; padding-bottom: .8rem; }
/* O .table do Bootstrap pinta a celula por --bs-table-color, que ganha de uma
   regra so na classe. Por isso o seletor desce ate o td. */
.tabela-faixas td.valor-repasse,
.cartao-lista dd.valor-repasse { color: #1B7F35; font-weight: 700; }

/* Honorário orçado caso a caso: pílula escura, para não parecer valor faltando. */
.pill-consultar {
    display: inline-block;
    padding: .3rem .85rem; border-radius: 999px;
    background: #14335F; color: #fff;
    font-size: .82rem; font-weight: 600;
}

/* Linha correspondente à metragem consultada.
   O fundo vai no TD: o .table do Bootstrap pinta a celula por --bs-table-bg,
   que cobre qualquer background posto no <tr>. A barra da esquerda continua
   no <tr>, onde o inset atravessa a linha inteira. */
.faixa-ativa { box-shadow: inset 3px 0 0 var(--azul-acao, #0057D9); }
.tabela-faixas tr.faixa-ativa > td { background-color: #E4EEFD; }
.cartao-lista.faixa-ativa {
    background: #E4EEFD;
    border-color: var(--azul-acao, #0057D9);
}

/* ----------------------------------------------------------------- consulta */
.consulta-resultado {
    background: var(--fundo-suave, #F2F6FC);
    border: 1px solid var(--borda, #DCE5F2);
    border-radius: 10px;
    padding: .85rem 1rem;
}
.consulta-faixa {
    display: flex; align-items: center; gap: .6rem;
    font-size: .9rem; color: var(--texto-sec, #52627A); margin-bottom: .6rem;
}
.consulta-valores { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.consulta-valores > div { display: flex; flex-direction: column; }
.consulta-valores span { font-size: .72rem; text-transform: uppercase;
                         letter-spacing: .04em; color: var(--texto-sec, #52627A); }
.consulta-valores strong { font-size: 1.15rem; }
.consulta-valores .destaque strong { color: var(--verde, #1B7F35); }

/* ---------------------------------------------------------- nota do rodapé */
.nota-faixa-aberta {
    display: flex; gap: .8rem; align-items: flex-start;
    margin: 0 1rem 1rem; padding: .85rem 1rem;
    background: var(--fundo-suave, #F2F6FC);
    border: 1px solid var(--borda, #DCE5F2);
    border-radius: 10px;
    font-size: .85rem; color: var(--texto-sec, #52627A);
}
.nota-faixa-icone {
    flex: 0 0 auto;
    width: 28px; height: 28px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--azul-acao, #0057D9); color: #fff; font-size: .9rem;
}

@media (max-width: 575.98px) {
    .consulta-valores { gap: 1rem; }
    .consulta-valores strong { font-size: 1.05rem; }
    .nota-faixa-aberta { margin: 0 .75rem .75rem; }
    .faixa-chip { width: 30px; height: 30px; font-size: .9rem; }
}