/* Teaser (form + detalhe) — estilos extraídos dos <style> inline de
   teaser_new.html/teaser_detail.html (achado do crítico: CSS fora do DS).
   Só tokens var(--*) da plataforma; nada de cor crua.

   Motion com propósito (motion-ref):
   - strip indeterminada sob o progresso enquanto o poll roda (1.4);
   - shimmer nas barras blur da prévia — sinaliza "conteúdo travado"
     em vez de linhas mortas (1.3);
   - reveal progressivo do resultado done: contador → selo → cards →
     mapa → tabela → upsell, stagger ≤120ms (13.5);
   - pop único do contador "Empresas" no estado terminal (3.9 simpl.).
   Tudo desliga sob prefers-reduced-motion (guard no fim do arquivo). */

/* ---- Tabela mascarada ---- */

.cmp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.925rem;
}

.cmp-table th {
    text-align: left;
    padding: 10px 12px;
    color: var(--text-tertiary);
    font-weight: 500;
    border-bottom: 1px solid var(--border-strong);
}

.cmp-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    color: var(--text-secondary);
}

.cmp-table tbody tr:hover {
    background: var(--accent-ghost-bg);
}

.cmp-masked {
    color: var(--text-faint);
    letter-spacing: 0.08em;
    white-space: nowrap;
}

.cmp-blur-row:hover {
    background: transparent;
}

.cmp-blur-bar {
    display: inline-block;
    height: 0.7em;
    border-radius: 4px;
    background: linear-gradient(
        90deg,
        var(--border-strong) 25%,
        var(--surface) 50%,
        var(--border-strong) 75%
    );
    background-size: 200% 100%;
    filter: blur(4px);
    opacity: 0.55;
    animation: cmp-blur-shimmer 1.8s linear infinite;
}

@keyframes cmp-blur-shimmer {
    from {
        background-position: 200% 0;
    }
    to {
        background-position: -200% 0;
    }
}

/* ---- Progresso (poll 3s) ---- */

.cmp-progress {
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    margin-bottom: 24px;
}

.cmp-progress-counters {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin: 12px 0 0;
}

.cmp-progress-counters dd {
    margin: 0;
}

/* números alinhados por dígito — o contador não "dança" entre polls */
.cmp-progress-counters .hero-metric-value {
    font-variant-numeric: tabular-nums;
}

/* Faixa indeterminada sob o status enquanto o job roda: comunica
   "sistema trabalhando" sem fingir progresso percentual. */
.cmp-progress-strip {
    height: 3px;
    margin: 12px -16px -16px;
    border-radius: 0 0 8px 8px;
    overflow: hidden;
    background: var(--accent-ghost-bg);
}

.cmp-progress-strip::after {
    content: "";
    display: block;
    width: 38%;
    height: 100%;
    border-radius: 3px;
    background: var(--accent);
    animation: cmp-progress-slide 1.5s ease-in-out infinite;
}

@keyframes cmp-progress-slide {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(364%);
    }
}

/* Pop único do contador "Empresas" no render terminal (done) — a
   partial não tem hx-trigger nesse estado, então a animação roda uma
   vez só e não pisca a cada poll. */
.cmp-count-final .hero-metric-value {
    display: inline-block;
    animation: cmp-count-pop 260ms var(--ease-out) both;
}

@keyframes cmp-count-pop {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* ---- Captcha ---- */

.cmp-captcha {
    padding: 16px;
    border: 1px solid var(--accent-border);
    border-radius: 8px;
    background: var(--accent-bg);
    margin-bottom: 24px;
}

.cmp-captcha-img {
    display: block;
    max-width: 280px;
    margin: 12px 0;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--canvas);
}

/* ---- Upsell ---- */

/* Eco da busca perdida (cf-3c): linha meta acima do upsell do estado
   bloqueado — a consulta recusada do POST ou o link para o resultado
   da busca anterior (pk da sessão). */
.cmp-lost-echo {
    margin: 0 0 12px;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

.cmp-lost-echo strong {
    color: var(--text-primary);
    font-weight: 600;
}

.cmp-lost-echo a {
    color: var(--accent);
    font-weight: 500;
}

.cmp-upsell {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    margin-top: 16px;
}

/* No teaser_new o upsell substitui o form: espaçamento de bloco
   superior, não de rodapé de tabela (como no teaser_detail). */
.cmp-upsell.teaser-form-zone {
    margin-top: 0;
    margin-bottom: 24px;
}

.cmp-upsell-title {
    margin: 0;
    color: var(--text-primary);
}

.cmp-upsell-description {
    margin: 0;
    color: var(--text-tertiary);
}

.cmp-upsell-cta {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.cmp-upsell-cta:focus-visible,
.cmp-upsell-secondary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.cmp-upsell-note {
    margin: 0;
}

.cmp-upsell-secondary {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

/* ---- Captura de e-mail (jornada fallback do paywall, cf-3b) ----
   <details> nativo dentro do upsell: disclosure sem JS (CSP strict).
   O form é GET → signup: uma linha input + botão, alinhada ao grid. */

.cmp-email-capture {
    align-self: stretch;
    border-top: 1px solid var(--border);
    padding-top: 12px;
    font-size: 0.85rem;
}

.cmp-email-capture > summary {
    cursor: pointer;
    font-weight: 500;
    color: var(--text-secondary);
    list-style-position: inside;
    border-radius: 8px;
    padding: 6px 8px;
    margin: -6px -8px;
}

.cmp-email-capture > summary:hover {
    color: var(--text-primary);
    background: var(--accent-ghost-bg);
}

.cmp-email-capture > summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.cmp-email-capture-form {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 10px;
}

.cmp-email-capture-form input[type="email"] {
    flex: 1;
    min-width: 0;
    min-height: 44px;
    /* iOS anti-zoom — mesma regra dos inputs do form do teaser. */
    font-size: 16px;
}

.cmp-email-capture-note {
    margin: 8px 0 0;
    font-size: 0.78rem;
    color: var(--text-muted);
}

/* ---- Cards agregados (MON-5) ---- */

.cmp-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.cmp-summary-card {
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
}

.cmp-summary-title {
    margin: 0 0 8px;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.cmp-summary-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cmp-summary-list li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.cmp-summary-value {
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.cmp-summary-big {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.cmp-summary-note {
    margin: 8px 0 0;
}

/* ---- Mapa estático do teaser ---- */

.cmp-teaser-map {
    margin: 0 0 20px;
}

.cmp-teaser-map-canvas {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 720px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
}

.cmp-teaser-map-canvas img {
    position: absolute;
    display: block;
    max-width: none;
}

.cmp-teaser-map-radius {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 2px dashed var(--accent);
    border-radius: 50%;
    background: var(--accent-ghost-bg);
    pointer-events: none;
}

.cmp-teaser-map-pin {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 10px;
    height: 10px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid var(--canvas);
    pointer-events: none;
}

.cmp-teaser-map-caption {
    margin: 8px 0 0;
}

/* ---- Form do teaser ---- */

/* iOS anti-zoom: inputs a <16px disparam auto-zoom (issue #65). O seletor
   mora no wrapper real (.cmp-form-field — o .field original não existe no
   markup do produto). */
#teaser-new-form .cmp-form-field :is(
    input:not([type="checkbox"]):not([type="radio"]),
    textarea,
    select
) {
    font-size: 16px;
}

/* ---- Reveal progressivo do resultado (done) ----
   Ordem do spec: contador → selo → cards → mapa → tabela → upsell.
   Stagger de 90ms por estágio via classe .cmp-reveal-N; total <600ms.
   A plataforma já cascateia filhos diretos de .container
   (.main-content > .container > * → page-enter, nth-child ≤120ms) —
   esta regra aprofunda o stagger para a leitura do resultado, então
   precisa vencer a especificidade dela (0,3,0 + ordem: teaser.css
   carrega por último no head). */

.main-content .container .cmp-reveal {
    animation: cmp-reveal-in 300ms var(--ease-out) both;
}

.main-content .container .cmp-reveal-2 { animation-delay: 90ms; }
.main-content .container .cmp-reveal-3 { animation-delay: 180ms; }
.main-content .container .cmp-reveal-4 { animation-delay: 270ms; }
.main-content .container .cmp-reveal-5 { animation-delay: 360ms; }
.main-content .container .cmp-reveal-6 { animation-delay: 450ms; }

@keyframes cmp-reveal-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* ---- Reduced motion: todo o acima desliga ---- */

@media (prefers-reduced-motion: reduce) {
    .cmp-blur-bar,
    .cmp-progress-strip::after,
    .cmp-count-final .hero-metric-value,
    .main-content .container .cmp-reveal {
        animation: none;
    }
}