/* UNIPLIM-RC-01.2 — Prospecção QR e Contra-resposta.
   Superfície própria (Gate F8: o rodapé de wizard é reproduzido com classe da superfície, não importado de Automações).
   Só tokens semânticos (--uni-*): claro/escuro saem juntos. Mobile-first: ≤767 o stepper sai (a app bar diz
   "Etapa X de N"), o rodapé vira barra sólida e a ação principal ocupa a largura toda. */

/* UNIPLIM-V2-CC01 OVV-F58/F59 — o `gap` da página nunca valia: `.crm-page-container` não é flex, e o cabeçalho (margem zerada
   logo abaixo) colava no primeiro bloco; no detalhe, cartões → abas → painel ficavam sem respiro. A página passa a ser a coluna
   flex do ritmo Uni (página → seção 24, como `.ah-page`), sem encolher os blocos dentro do container rolável; o painel da aba
   segue seção → grupo 16. */
.ob-page { display: flex; flex-direction: column; gap: var(--uni-space-5); min-width: 0; }
.ob-page > * { flex-shrink: 0; }
.ob-detail-panel { display: flex; flex-direction: column; gap: var(--uni-space-4); min-width: 0; }
.ob-page > .crm-page-header { margin-bottom: 0; }
.ob-page > .uni-appbar { margin-bottom: calc(var(--uni-space-4) - var(--uni-space-5)); }

/* ---------- wizard ---------- */

.ob-wizard { display: flex; flex-direction: column; gap: var(--uni-space-5); width: 100%; max-width: 960px; margin: 0 auto; min-width: 0; }
.ob-wizard-stepper { padding: var(--uni-space-2) 0; }
.ob-step-jump { display: none; }
.ob-wizard-card {
    display: flex; flex-direction: column; gap: var(--uni-space-5); padding: var(--uni-space-5);
    border: 1px solid var(--uni-color-border); border-radius: var(--uni-radius-lg); background: var(--uni-color-surface); min-width: 0;
}
.ob-wizard-head { display: flex; flex-direction: column; gap: var(--uni-space-2); }
.ob-wizard-head h2 { margin: 0; font-size: var(--uni-font-size-xl); font-weight: 600; line-height: 1.3; color: var(--uni-color-text); }
.ob-wizard-head p { margin: 0; font-size: var(--uni-font-size-md); color: var(--uni-color-text-muted); line-height: 1.55; max-width: 70ch; }

.ob-group { display: flex; flex-direction: column; gap: var(--uni-space-3); min-width: 0; }
.ob-group + .ob-group { padding-top: var(--uni-space-5); border-top: 1px solid var(--uni-color-border); }
.ob-group-title { margin: 0; font-size: var(--uni-font-size-md); font-weight: 600; color: var(--uni-color-text); }
.ob-group-hint { margin: 0; font-size: var(--uni-font-size-sm); color: var(--uni-color-text-muted); line-height: 1.5; max-width: 80ch; }
.ob-inline { display: flex; flex-wrap: wrap; gap: var(--uni-space-3); align-items: flex-end; }
.ob-inline > .uni-field { flex: 1 1 220px; min-width: 0; }
/* LAUNCH-CLOSURE-01 GUIDED-F22 (decisão do Owner, 29/10) — "De [mm] : [ss]   Até [mm] : [ss]": campos de dois dígitos, gap pequeno
   entre minutos e segundos e maior entre os grupos; no celular um grupo por linha. Local a este bloco (.ob-inline não muda). */
.ob-interval { display: flex; flex-wrap: wrap; align-items: flex-end; column-gap: var(--uni-space-7); row-gap: var(--uni-space-3); }
.ob-interval-group { display: flex; flex-direction: column; gap: var(--uni-space-1); min-width: 0; }
.ob-interval-time { display: inline-flex; align-items: center; gap: var(--uni-space-1); }
.ob-interval-input.app-control { width: calc(2ch + 2 * var(--uni-space-3) + 2px); text-align: center; font-variant-numeric: tabular-nums; }
.ob-interval-sep { color: var(--uni-color-text-muted); font-weight: 600; }
/* UNIPLIM-V2-CC01 OVV-F52 — `.app-button` declara `align-self: flex-start` (uni-components.css), que anula o alinhamento da
   linha: o "Adicionar" da Nova exceção subia para a altura do rótulo e o lixo da regra/versão encostava no topo. Cada botão volta
   ao eixo do controle ao lado (42px, mesma altura do campo): na linha campo + botão, pela base do campo; na regra, pelo centro;
   na versão, pela base da caixa de texto. A dica e o erro do campo ficam onde estão. */
.ob-inline > .app-button { align-self: flex-end; }
.ob-cr-rule > .app-button { align-self: center; }
.ob-cr-version > .app-button { align-self: end; }

/* UNIPLIM-FC-06 (UX §9.5) — o rodapé é feedback (quando há) + UniWizardNav, que traz a própria grade de três posições. */
.ob-wizard-footer {
    position: sticky; bottom: 0; z-index: var(--uni-z-sticky);
    display: flex; flex-direction: column; align-items: stretch; gap: var(--uni-space-2);
    padding: var(--uni-space-4) 0;
    background: linear-gradient(to top, var(--uni-color-app-bg) 72%, color-mix(in srgb, var(--uni-color-app-bg) 0%, transparent));
}
.ob-wizard-feedback { font-size: var(--uni-font-size-sm); color: var(--uni-color-danger); }

@media (max-width: 767px) {
    .ob-wizard-card { padding: var(--uni-space-4); }
    .ob-wizard-stepper { display: none; }
    .ob-step-jump { display: flex; flex-direction: column; gap: var(--uni-space-1); }
    .ob-wizard-footer {
        gap: var(--uni-space-2);
        margin-inline: calc(-1 * var(--uni-page-pad-x, 20px));
        bottom: calc(-1 * var(--uni-page-tail, 32px));
        padding: var(--uni-space-3) var(--uni-page-pad-x, 20px) calc(var(--uni-space-3) + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid var(--uni-color-border); background: var(--uni-color-surface);
    }
}

/* ---------- escolhas (listas, canal) ---------- */

.ob-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--uni-space-2); }
.ob-option {
    display: flex; align-items: flex-start; gap: var(--uni-space-3); padding: var(--uni-space-3);
    border: 1px solid var(--uni-color-border); border-radius: var(--uni-radius-md); background: var(--uni-color-surface);
    cursor: pointer; min-width: 0; font-size: var(--uni-font-size-sm); color: var(--uni-color-text);
}
.ob-option:has(input:checked) { border-color: var(--uni-color-primary); background: color-mix(in srgb, var(--uni-color-primary) 6%, var(--uni-color-surface)); }
.ob-option input { margin-top: 2px; accent-color: var(--uni-color-primary); }
.ob-option-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ob-option-copy strong { font-weight: 600; overflow-wrap: anywhere; }
.ob-option-copy small { color: var(--uni-color-text-muted); }

/* LAUNCH-CLOSURE-01 GUIDED-F20 — busca de contatos: mesma anatomia do dropdown do DS (uni-combobox-dropdown/option), em lista
   vertical no fluxo da página (sem position: fixed). Só este bloco; as escolhas de listas/canal continuam em grade. */
.ob-options.ob-contact-results {
    display: flex; flex-direction: column; gap: 0; max-height: min(320px, 50vh); overflow-y: auto;
    background: var(--uni-color-surface); border: 1px solid var(--uni-color-border); border-radius: var(--uni-radius-sm);
    box-shadow: var(--uni-shadow-md); padding: var(--uni-space-1);
}
.ob-contact-results .ob-option {
    align-items: center; padding: var(--uni-space-2) var(--uni-space-3); border: 0; border-radius: var(--uni-radius-sm);
    background: transparent; font-size: var(--uni-font-size-md);
}
.ob-contact-results .ob-option:hover { background: var(--uni-color-primary-soft); }
.ob-contact-results .ob-option:has(input:checked) { background: var(--uni-color-primary-soft); }
.ob-contact-results .ob-option input { margin-top: 0; }
.ob-contact-results .ob-option-copy small { font-size: var(--uni-font-size-sm); font-weight: 400; color: var(--uni-color-text); }

/* ---------- mensagens e versões ---------- */

.ob-textarea { min-height: 120px; resize: vertical; font-family: inherit; line-height: 1.5; }
.ob-count { font-size: var(--uni-font-size-xs); color: var(--uni-color-text-muted); text-align: right; }
.ob-variants { display: flex; flex-direction: column; gap: var(--uni-space-3); }
.ob-variant { display: flex; flex-direction: column; gap: var(--uni-space-2); padding: var(--uni-space-3); border: 1px solid var(--uni-color-border); border-radius: var(--uni-radius-md); }
.ob-variant-head { display: flex; align-items: center; justify-content: space-between; gap: var(--uni-space-2); font-size: var(--uni-font-size-sm); color: var(--uni-color-text-muted); }
.ob-chip {
    display: inline-flex; align-items: center; gap: 4px; padding: 2px var(--uni-space-2); border-radius: 999px;
    font-size: var(--uni-font-size-xs); font-weight: 600; background: var(--uni-color-neutral-soft); color: var(--uni-color-text);
}
.ob-chip--info { background: color-mix(in srgb, var(--uni-color-info) 14%, var(--uni-color-surface)); color: var(--uni-color-info); }
.ob-chip--success { background: color-mix(in srgb, var(--uni-color-success) 14%, var(--uni-color-surface)); color: var(--uni-color-success); }
.ob-chip--warning { background: color-mix(in srgb, var(--uni-color-warning) 16%, var(--uni-color-surface)); color: var(--uni-color-warning); }
.ob-chip--danger { background: color-mix(in srgb, var(--uni-color-danger) 12%, var(--uni-color-surface)); color: var(--uni-color-danger); }
/* UNIPLIM-PRE-LC-BLOCKER-CONTRACT-CLOSURE-01 — status que o canal ainda não confirmou: sem cor de fato, contorno tracejado. */
.ob-chip--pending { background: transparent; color: var(--uni-color-text-muted); border: 1px dashed var(--uni-color-border); }
/* UNIPLIM-V2-CC01 OVV-F62 — selo de estado da prospecção: compacto também no cabeçalho do detalhe (as ações do cabeçalho
   esticam os filhos à altura dos botões) e com indicador animado só em Em andamento (gira) e Agendada (pulsa). Sem movimento
   quando a pessoa pede menos movimento (VL-29). */
.ob-status { align-self: center; flex: 0 0 auto; white-space: nowrap; }
.ob-status-indicator { display: inline-flex; align-items: center; justify-content: center; }
.ob-status-indicator .crm-icon { width: 1.15em; height: 1.15em; }
@media (prefers-reduced-motion: no-preference) {
    .ob-status-indicator--running .crm-icon { animation: ob-status-spin 1.6s linear infinite; }
    .ob-status-indicator--scheduled .crm-icon { animation: ob-status-pulse 1.8s ease-in-out infinite; }
}
@keyframes ob-status-spin { to { transform: rotate(360deg); } }
@keyframes ob-status-pulse { 50% { opacity: 0.4; } }
.ob-variables { display: flex; flex-wrap: wrap; gap: var(--uni-space-2); }
/* UNIPLIM-V2-OVV-UX-RESIDUAL-01 (OVV-F65) — editor único de versões: lista compacta (uni-scan-list) e, sem principal, o convite
   "Adicionar mensagem principal" na largura da lista. A edição é um modal (ou nível do modal da Campanha). */
.ob-versions-list { margin-top: var(--uni-space-1); }
.ob-versions-empty {
    display: flex; align-items: center; justify-content: center; gap: var(--uni-space-2); width: 100%;
    padding: var(--uni-space-4); border: 1px dashed var(--uni-color-border); border-radius: var(--uni-radius-md);
    background: transparent; color: var(--uni-color-primary); font: inherit; font-weight: 600; cursor: pointer;
}
.ob-versions-empty:hover { background: var(--uni-color-primary-soft); }
.ob-versions-empty:focus-visible { outline: 2px solid var(--uni-color-primary); outline-offset: 2px; }
.ob-version-form { display: flex; flex-direction: column; gap: var(--uni-space-3); }

/* ---------- Contra-resposta ---------- */

.ob-cr { display: flex; flex-direction: column; gap: var(--uni-space-4); min-width: 0; }
.ob-cr-rules { display: flex; flex-direction: column; gap: var(--uni-space-2); }
.ob-cr-rule { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr) auto; gap: var(--uni-space-2); align-items: center; }
.ob-cr-terms { display: flex; flex-wrap: wrap; gap: var(--uni-space-2); }
/* D4 — versões, prévia e anexo. */
.ob-cr-version { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--uni-space-2); align-items: end; }
.ob-cr-preview { margin: 0; padding: var(--uni-space-3); border: 1px solid var(--uni-color-border); border-radius: var(--uni-radius-md); white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 767px) { .ob-cr-rule { grid-template-columns: minmax(0, 1fr) auto; } .ob-cr-rule > :nth-child(2) { grid-column: 1 / -1; grid-row: 2; } }

/* ---------- links/CTAs (UNIPLIM-RC-01.3, D9) ---------- */

.ob-link { display: flex; flex-direction: column; gap: var(--uni-space-2); padding: var(--uni-space-3); border: 1px solid var(--uni-color-border); border-radius: var(--uni-radius-md); }
.ob-link-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--uni-space-3); }
.ob-link-url { grid-column: 1 / -1; }
@media (max-width: 767px) { .ob-link-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- revisão e resumo ---------- */

.ob-review { display: flex; flex-direction: column; gap: var(--uni-space-3); }
.ob-review-row { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr) auto; gap: var(--uni-space-3); align-items: start; padding: var(--uni-space-3) 0; border-bottom: 1px solid var(--uni-color-border); }
.ob-review-row:last-child { border-bottom: 0; }
.ob-review-label { font-size: var(--uni-font-size-sm); color: var(--uni-color-text-muted); }
.ob-review-value { font-size: var(--uni-font-size-md); color: var(--uni-color-text); overflow-wrap: anywhere; white-space: pre-line; }
@media (max-width: 767px) { .ob-review-row { grid-template-columns: minmax(0, 1fr) auto; } .ob-review-value { grid-column: 1 / -1; } }

.ob-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--uni-space-3); }
@media (max-width: 1023px) { .ob-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) { .ob-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ob-tile { display: flex; flex-direction: column; gap: 2px; padding: var(--uni-space-3) var(--uni-space-4); border: 1px solid var(--uni-color-border); border-radius: var(--uni-radius-md); background: var(--uni-color-surface); }
.ob-tile strong { font-size: var(--uni-font-size-xl); font-weight: 600; color: var(--uni-color-text); }
.ob-tile span { font-size: var(--uni-font-size-sm); color: var(--uni-color-text-muted); }

/* ---------- lista ---------- */

.ob-list { display: flex; flex-direction: column; border: 1px solid var(--uni-color-border); border-radius: var(--uni-radius-lg); background: var(--uni-color-surface); overflow: hidden; }
.ob-row {
    display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1.2fr) auto; gap: var(--uni-space-3); align-items: center;
    padding: var(--uni-space-3) var(--uni-space-4); border: 0; border-bottom: 1px solid var(--uni-color-border); background: none;
    text-align: left; color: var(--uni-color-text); font: inherit; cursor: pointer; min-width: 0;
}
.ob-row:last-child { border-bottom: 0; }
.ob-row:hover { background: var(--uni-color-neutral-soft); }
.ob-row:focus-visible { outline: 2px solid var(--uni-color-primary); outline-offset: -2px; }
.ob-row-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ob-row-title strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ob-row-title small, .ob-row-meta { font-size: var(--uni-font-size-sm); color: var(--uni-color-text-muted); }
@media (max-width: 767px) {
    .ob-row { grid-template-columns: minmax(0, 1fr) auto; }
    .ob-row-meta { grid-column: 1 / -1; }
}

.ob-recipient { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--uni-space-3); align-items: center; padding: var(--uni-space-3) var(--uni-space-4); border-bottom: 1px solid var(--uni-color-border); font-size: var(--uni-font-size-sm); }
.ob-recipient:last-child { border-bottom: 0; }
@media (max-width: 767px) { .ob-recipient { grid-template-columns: minmax(0, 1fr) auto; } .ob-recipient > :last-child { grid-column: 1 / -1; color: var(--uni-color-text-muted); } }

.ob-skeleton { display: flex; flex-direction: column; gap: var(--uni-space-3); }
.ob-skeleton > span { display: block; height: 56px; border-radius: var(--uni-radius-md); background: var(--uni-color-neutral-soft); }

/* ---------- resultados da operação (UNIPLIM-RC-01.3 — Funil · Intenção · Jornada · Comparar) ---------- */

.ob-journey { display: flex; flex-direction: column; gap: var(--uni-space-5); min-width: 0; }
.ob-journey-host { display: flex; flex-direction: column; gap: var(--uni-space-3); min-width: 0; margin-top: var(--uni-space-5); }
.ob-journey-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--uni-space-3); }
.ob-journey-head p { margin: 0; }
.ob-journey-objective { min-width: 220px; }
.ob-journey-shape { max-width: 720px; }
.ob-journey-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--uni-space-2); }
@media (max-width: 1023px) { .ob-journey-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ob-journey-step-hit {
    display: flex; flex-direction: column; gap: var(--uni-space-1); width: 100%; min-height: 44px; padding: var(--uni-space-3);
    border: 1px solid var(--uni-color-border); border-radius: var(--uni-radius-md); background: var(--uni-color-surface);
    color: var(--uni-color-text); font: inherit; text-align: left;
}
button.ob-journey-step-hit { cursor: pointer; }
button.ob-journey-step-hit:hover { background: var(--uni-color-neutral-soft); }
button.ob-journey-step-hit:focus-visible { outline: 2px solid var(--uni-color-primary); outline-offset: 2px; }
.ob-journey-step-hit strong { font-size: var(--uni-font-size-xl); font-weight: 600; }
.ob-journey-step-label { font-size: var(--uni-font-size-sm); color: var(--uni-color-text-muted); }
.ob-journey-step.is-unavailable .ob-journey-step-hit { border-style: dashed; color: var(--uni-color-text-muted); }
button.ob-journey-intent, button.ob-journey-person { width: 100%; border: 0; background: none; font: inherit; color: var(--uni-color-text); text-align: left; cursor: pointer; min-height: 44px; }
button.ob-journey-intent:hover, button.ob-journey-person:hover { background: var(--uni-color-neutral-soft); }
button.ob-journey-intent:focus-visible, button.ob-journey-person:focus-visible { outline: 2px solid var(--uni-color-primary); outline-offset: -2px; }
.ob-journey-ranking-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--uni-space-3); }
.ob-table-wrap { overflow-x: auto; border: 1px solid var(--uni-color-border); border-radius: var(--uni-radius-lg); background: var(--uni-color-surface); }
.ob-table { width: 100%; border-collapse: collapse; font-size: var(--uni-font-size-sm); }
.ob-table th, .ob-table td { padding: var(--uni-space-2) var(--uni-space-3); border-bottom: 1px solid var(--uni-color-border); text-align: right; white-space: nowrap; }
.ob-table th:first-child { text-align: left; white-space: normal; min-width: 160px; }
.ob-table thead th { color: var(--uni-color-text-muted); font-weight: 600; }
.ob-table tbody tr:last-child th, .ob-table tbody tr:last-child td { border-bottom: 0; }
.ob-table tbody tr.is-current th, .ob-table tbody tr.is-current td { background: var(--uni-color-primary-soft); }
.ob-journey-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--uni-space-3); }
.ob-journey-item { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--uni-space-3); align-items: start; padding-bottom: var(--uni-space-3); border-bottom: 1px solid var(--uni-color-border); }
.ob-journey-item:last-child { border-bottom: 0; }
.ob-journey-item.is-unavailable, .ob-journey-item.is-pending { color: var(--uni-color-text-muted); }
.ob-journey-item-when { font-size: var(--uni-font-size-sm); color: var(--uni-color-text-muted); font-variant-numeric: tabular-nums; }
.ob-journey-item-body { display: flex; flex-direction: column; gap: var(--uni-space-1); min-width: 0; overflow-wrap: anywhere; }
.ob-journey-chips { display: flex; flex-wrap: wrap; gap: var(--uni-space-1); }
@media (max-width: 767px) {
    .ob-journey-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ob-journey-item { grid-template-columns: minmax(0, 1fr); gap: var(--uni-space-1); }
    .ob-journey-objective { min-width: 0; width: 100%; }
}

/* OVV2 F15: exceção local do editor de versões, também usado na Contra-resposta. */
@media (max-width: 767px) {
    .ob-version-modal > .uni-modal-footer { flex-direction: row; flex-wrap: wrap; align-items: center; }
    .ob-version-modal > .uni-modal-footer > .app-button { flex: 1 1 auto; min-width: 0; min-height: var(--uni-space-8); white-space: normal; overflow-wrap: anywhere; }
}

@media (max-width: 767px) {
    .ob-interval { flex-direction: column; align-items: flex-start; }
}