/* =====================================================================
   Credi — tokens e componentes (guia vivo em /design)
   Identidade NB Super Agência. Princípio: a cor forte aparece em POUCOS
   lugares (botão primário, item ativo, um destaque). Corpo em neutros.
   Tema claro padrão; tokens preparados para um tema escuro futuro
   (redefinir as variáveis de :root em [data-theme="dark"]).
   ===================================================================== */
:root {
    /* Roxo — escala gerada a partir de #7B2FF7 / #B98CFF / #F3EBFF / #2D0A4E */
    --purple-50:  #F9F5FF;
    --purple-100: #F3EBFF;   /* hover, linha selecionada, card destacado */
    --purple-200: #E4D3FF;
    --purple-300: #CDAFFF;
    --purple-400: #B98CFF;   /* bordas, ícones, estados secundários */
    --purple-500: #9D5CFA;
    --purple-600: #7B2FF7;   /* AÇÃO: botão primário, item ativo, links */
    --purple-700: #6620D6;   /* hover do primário */
    --purple-800: #5016A8;   /* active/pressed */
    --purple-900: #2D0A4E;

    /* Azul — destaque pontual. NUNCA cor de ação. */
    --cyan-500: #0099FF;
    --cyan-100: #E5F4FF;

    /* Neutros (ink) */
    --ink-900: #1A1A1F;   /* títulos */
    --ink-700: #3F3F46;   /* corpo */
    --ink-500: #6E6E78;   /* secundário, rótulos */
    --ink-400: #9A9AA4;   /* placeholder, desabilitado */
    --ink-300: #C6C6CE;   /* bordas fortes */
    --ink-200: #E4E4EA;   /* bordas padrão */
    --ink-100: #F0F0F4;   /* divisores, fundos sutis */
    --ink-50:  #F7F7FA;

    --bg: #F5F5F8;        /* fundo da página: cinza muito claro */
    --surface: #FFFFFF;   /* cards */

    /* Status — independentes da marca (AA sobre o fundo claro do badge) */
    --ok-700: #116B4E;  --ok-100: #E3F5EC;   /* aprovado */
    --err-700: #B3261E; --err-100: #FCEAE8;  /* recusado / erro / restrição */
    --warn-800: #8A5B00; --warn-100: #FFF2D9; /* pendente / precisa reenviar */
    --info-700: #345D8A; --info-100: #E8F0F9; /* análise */
    --neutral-700: #55555E; --neutral-100: #EEEEF2; /* checagem, desistência, expirada */

    --radius: 14px;       /* cantos 12–16px */
    --radius-sm: 10px;
    --shadow: 0 1px 2px rgba(26, 26, 31, .04), 0 8px 24px rgba(26, 26, 31, .06); /* suave e difusa */
    --focus-ring: 0 0 0 3px var(--purple-200);

    --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

body { background: var(--bg); color: var(--ink-700); font-family: var(--font); }
h1, h2, h3, h4 { color: var(--ink-900); }
a { color: var(--purple-600); }

/* --------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------- */
.card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.25rem; }
.card-flat { background: var(--surface); border-radius: var(--radius); border: 1px solid var(--ink-200); padding: 1.25rem; }
/* Card de indicador: SÓ no topo do dashboard */
.card-kpi { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1rem 1.25rem; }
.card-kpi .kpi-label { font-size: .8125rem; color: var(--ink-500); }
.card-kpi .kpi-value { font-size: 1.75rem; font-weight: 700; color: var(--ink-900); font-variant-numeric: tabular-nums; }
.card-kpi .kpi-delta-up { color: var(--ok-700); font-size: .75rem; }
.card-kpi .kpi-delta-down { color: var(--err-700); font-size: .75rem; }
/* Um destaque por página, no máximo. Roxo sólido para não sumir no fundo cinza. */
.card-featured { background: var(--purple-600);
    color: #fff; border-radius: var(--radius); padding: 1.25rem; box-shadow: var(--shadow); }
.card-featured h3, .card-featured .kpi-value { color: #fff; }
.card-featured p, .card-featured .kpi-label { color: var(--purple-100); }

/* --------------------------------------------------------------------
   Botões — alvo de toque >= 40px
   -------------------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    min-height: 2.5rem; padding: 0 1rem; border-radius: var(--radius-sm);
    font-size: .875rem; font-weight: 600; border: 1px solid transparent;
    cursor: pointer; transition: background .12s, border-color .12s, color .12s; }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn-primary { background: var(--purple-600); color: #fff; }
.btn-primary:hover { background: var(--purple-700); }
.btn-primary:active { background: var(--purple-800); }
.btn-secondary { background: var(--surface); color: var(--ink-900); border-color: var(--ink-300); }
.btn-secondary:hover { border-color: var(--purple-400); color: var(--purple-700); }
.btn-ghost { background: transparent; color: var(--ink-700); }
.btn-ghost:hover { background: var(--ink-100); }
.btn-danger { background: var(--err-700); color: #fff; }
.btn-danger:hover { filter: brightness(.92); }
.btn-sm { min-height: 2rem; padding: 0 .75rem; font-size: .8125rem; }
.btn:disabled, .btn[aria-disabled="true"] { background: var(--ink-100); color: var(--ink-400); border-color: transparent; cursor: not-allowed; }
/* Carregando: no próprio botão, sem travar a tela */
.btn-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn-loading::after { content: ""; position: absolute; width: 1rem; height: 1rem;
    border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff; border-radius: 50%;
    animation: credi-spin .7s linear infinite; }
.btn-secondary.btn-loading::after { border-color: var(--ink-300); border-top-color: var(--purple-600); }
@keyframes credi-spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------
   Formulários — rótulo ACIMA do campo; erro AO LADO do campo
   -------------------------------------------------------------------- */
.label { display: block; font-size: .8125rem; font-weight: 600; color: var(--ink-700); margin-bottom: .375rem; }
.label .optional { font-weight: 400; color: var(--ink-400); }
/* Campo preenchido (docs/referencias/referencia4-formulario.jpg): cinza claro sem
   borda visível; no foco vira branco com a borda da marca. */
.field { display: block; width: 100%; min-height: 2.5rem; padding: .5rem .75rem;
    background: var(--ink-100); color: var(--ink-900);
    border: 1.5px solid transparent; border-radius: var(--radius-sm); font-size: .9375rem; }
.field::placeholder { color: var(--ink-400); }   /* exemplo de formato, nunca rótulo */
.field:focus { outline: none; background: var(--surface); border-color: var(--purple-600); box-shadow: var(--focus-ring); }
.field:disabled { background: var(--ink-50); color: var(--ink-400); }
.field[aria-invalid="true"] { border-color: var(--err-700); background: var(--surface); }
.field[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px var(--err-100); }

/* Padrão principal dos formulários: rótulo PEQUENO e SEMPRE VISÍVEL dentro do
   campo (não é placeholder: não some ao digitar). Como na referência 4. */
.field-box { background: var(--ink-100); border: 1.5px solid transparent;
    border-radius: var(--radius-sm); padding: .375rem .75rem .5rem; cursor: text; }
.field-box .box-label { display: block; font-size: .6875rem; color: var(--ink-500); margin-bottom: .0625rem; }
.field-box .box-label .req { color: var(--err-700); }
.field-box input, .field-box select, .field-box textarea { display: block; width: 100%;
    background: transparent; border: 0; padding: 0; font-size: .9375rem;
    font-weight: 800; color: var(--ink-900); }   /* valor forte, como na referência 4 */
.field-box input:focus, .field-box select:focus, .field-box textarea:focus { outline: none; }
.field-box input::placeholder, .field-box textarea::placeholder { color: var(--ink-400); font-weight: 400; }
.field-box:focus-within { background: var(--surface); border-color: var(--purple-600); box-shadow: var(--focus-ring); }
.field-box.box-error { background: var(--surface); border-color: var(--err-700); }
.field-box.box-error:focus-within { box-shadow: 0 0 0 3px var(--err-100); }
.field-box.box-disabled { background: var(--ink-50); cursor: not-allowed; }
.field-box.box-disabled input { color: var(--ink-400); }
.help { font-size: .75rem; color: var(--ink-500); margin-top: .25rem; }
.error-text { font-size: .8125rem; color: var(--err-700); margin-top: .25rem; }
.form-row { margin-bottom: 1rem; }
@media (min-width: 640px) { .form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; } }
/* No celular o grid colapsa: um campo por linha. */

/* Formulário longo: seções com respiro, nunca bloco único */
.form-section { padding: 1.25rem 0; border-top: 1px solid var(--ink-100); }
.form-section:first-child { border-top: 0; padding-top: 0; }
.form-section > h3, .form-section .section-title h3 { font-size: .9375rem; font-weight: 700; margin-bottom: .25rem; }
.form-section > .section-hint, .form-section .section-title .section-hint { font-size: .8125rem; color: var(--ink-500); margin-bottom: 1rem; }
/* Em telas largas: título e dica da seção à esquerda, campos à direita (referência 4).
   No celular empilha — um campo por linha. */
@media (min-width: 768px) {
    .form-section-split { display: grid; grid-template-columns: 200px 1fr; gap: 1.5rem; }
}
/* Botão primário sempre visível em tela longa */
.form-footer { position: sticky; bottom: 0; background: var(--surface); border-top: 1px solid var(--ink-100);
    margin: 0 -1.25rem -1.25rem; padding: .875rem 1.25rem; border-radius: 0 0 var(--radius) var(--radius);
    display: flex; gap: .75rem; align-items: center; }
.form-footer .draft-note { font-size: .75rem; color: var(--ink-400); margin-left: auto; }

/* Etapas: SÓ com agrupamento natural nomeável em português */
.steps { display: flex; gap: .25rem; margin-bottom: 1.5rem; }
.step { flex: 1; text-align: center; font-size: .75rem; color: var(--ink-400); padding-top: .5rem; position: relative; }
.step::before { content: ""; display: block; height: 4px; border-radius: 2px; background: var(--ink-200); margin-bottom: .5rem; }
.step-done { color: var(--ink-500); }
.step-done::before { background: var(--purple-400); }
.step-active { color: var(--purple-700); font-weight: 600; }
.step-active::before { background: var(--purple-600); }

/* --------------------------------------------------------------------
   Tabela — densa o bastante para 30–40 propostas na tela
   -------------------------------------------------------------------- */
.table-credi { width: 100%; font-size: .8438rem; border-collapse: collapse; }
.table-credi th { text-align: left; font-size: .6875rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .04em; color: var(--ink-500); padding: .5rem .75rem; border-bottom: 1px solid var(--ink-200); }
.table-credi td { padding: .4375rem .75rem; border-bottom: 1px solid var(--ink-100);
    color: var(--ink-700); font-variant-numeric: tabular-nums; }   /* linha ~ 36px */
.table-credi tbody tr:hover { background: var(--ink-50); }
/* Linha selecionada em cinza claro, não roxo: o roxo fica para ação e navegação. */
.table-credi tbody tr.row-selected { background: var(--ink-100); }
.table-credi tbody tr.row-selected td { border-bottom-color: var(--ink-200); }
.table-credi .cell-strong { color: var(--ink-900); font-weight: 600; }

/* --------------------------------------------------------------------
   Badges — status de proposta/tentativa (8.2). Cores fora da marca.
   -------------------------------------------------------------------- */
.badge { display: inline-flex; align-items: center; gap: .3rem; padding: .125rem .5rem;
    border-radius: 999px; font-size: .6875rem; font-weight: 600; white-space: nowrap; }
.badge::before { content: ""; width: .375rem; height: .375rem; border-radius: 50%; background: currentColor; }
.badge-checagem     { background: var(--neutral-100); color: var(--neutral-700); }
.badge-analise      { background: var(--info-100); color: var(--info-700); }
.badge-pre_aprovada { background: var(--ok-100); color: var(--ok-700); }
.badge-aprovada     { background: var(--ok-700); color: #fff; }
.badge-pendente     { background: var(--warn-100); color: var(--warn-800); }
.badge-restricao    { background: var(--err-100); color: var(--err-700); }
.badge-recusada     { background: var(--err-700); color: #fff; }
.badge-desistencia  { background: var(--neutral-100); color: var(--neutral-700); }
.badge-faturada     { background: var(--purple-100); color: var(--purple-800); }
.badge-expirada     { background: var(--ink-100); color: var(--ink-400); }
/* Editada após envio: voltou para checagem e precisa ir de novo ao banco */
.badge-reenviar { background: var(--surface); color: var(--warn-800); border: 1px dashed var(--warn-800); }
.badge-reenviar::before { content: "↻"; width: auto; height: auto; background: none; border-radius: 0; }

/* --------------------------------------------------------------------
   Navegação lateral — item ativo é UM dos poucos lugares do roxo
   -------------------------------------------------------------------- */
.sidenav { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: .75rem; }
.nav-item { display: flex; align-items: center; gap: .625rem; padding: .5rem .75rem; border-radius: var(--radius-sm);
    font-size: .875rem; color: var(--ink-700); text-decoration: none; }
.nav-item:hover { background: var(--ink-50); color: var(--ink-900); }
.nav-item-active { background: var(--purple-600); color: #fff; font-weight: 600; }
.nav-item-active:hover { background: var(--purple-700); color: #fff; }
.nav-group { font-size: .6875rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-400); padding: .75rem .75rem .25rem; }
.nav-count { margin-left: auto; background: var(--purple-100); color: var(--purple-800); border-radius: 999px;
    font-size: .6875rem; font-weight: 600; padding: 0 .5rem; }
.nav-item-active .nav-count { background: rgba(255, 255, 255, .22); color: #fff; }

/* ====================================================================
   Aplicação — casca com navegação lateral (guia /design, seção 10)
   ==================================================================== */
.app-shell { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 1.5rem; padding: 1.25rem; max-width: 1400px; margin: 0 auto; }
.app-main { min-width: 0; }
.sidenav { position: sticky; top: 1.25rem; align-self: start; display: flex; flex-direction: column; }
.nav-brand { display: flex; align-items: baseline; gap: .5rem; padding: .5rem .75rem .75rem; }
.nav-logo { font-weight: 800; font-size: 1.125rem; color: var(--purple-600); letter-spacing: -.01em; }
.nav-role { font-size: .6875rem; color: var(--ink-400); }
.nav-logout { margin-top: .75rem; border-top: 1px solid var(--ink-100); padding-top: .5rem; }
.nav-item-button { width: 100%; background: none; border: 0; cursor: pointer; font: inherit; text-align: left; }
@media (max-width: 768px) {
    .app-shell { grid-template-columns: 1fr; gap: 1rem; padding: .75rem; }
    .sidenav { position: static; flex-direction: row; flex-wrap: wrap; align-items: center; gap: .25rem; padding: .5rem; }
    .nav-brand { padding: .25rem .5rem; margin-right: .25rem; }
    .nav-group { display: none; }
    .nav-logout { margin: 0 0 0 auto; border: 0; padding: 0; }
    .nav-item { padding: .375rem .625rem; font-size: .8125rem; }
}

/* Cabeçalho de página */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .75rem 1rem; margin-bottom: 1rem; }
.page-title { font-size: 1.375rem; font-weight: 700; color: var(--ink-900); }
.page-sub { font-size: .8125rem; color: var(--ink-500); }
.page-sub a { color: var(--ink-500); }
.page-sub a:hover { color: var(--purple-600); }

/* Flash */
.flash { border-radius: var(--radius-sm); padding: .625rem .875rem; font-size: .875rem; margin-bottom: 1rem; border: 1px solid; }
.flash-ok { background: var(--ok-100); border-color: var(--ok-200, var(--ok-100)); color: var(--ok-700); }
.flash-error { background: var(--err-100); border-color: var(--err-200, var(--err-100)); color: var(--err-700); }

/* Alternador tabela/kanban */
.seg { display: inline-flex; background: var(--ink-100); border-radius: 999px; padding: .1875rem; }
.seg-item { padding: .3125rem .875rem; border-radius: 999px; font-size: .8125rem; color: var(--ink-500); text-decoration: none; }
.seg-active { background: var(--surface); color: var(--ink-900); font-weight: 600; box-shadow: var(--shadow); }

/* Barra de filtros */
.filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; align-items: end; padding: 1rem 1.25rem; margin-bottom: 1rem; }
.filters .label { margin-bottom: 0; }
.filters .field { margin-top: .25rem; min-height: 2.25rem; padding: .375rem .625rem; font-size: .875rem; }
.filters-actions { display: flex; gap: .5rem; }
.field-sm { min-height: 2rem; padding: .25rem .5rem; font-size: .8125rem; width: auto; }

/* Tabela dentro de card, sem rolagem horizontal na página */
.table-wrap { padding: .25rem 1.25rem; overflow-x: auto; }
.row-link { text-decoration: none; }
.row-link:hover { color: var(--purple-600); text-decoration: underline; }
.cell-sub { font-size: .75rem; color: var(--ink-500); }
.empty { text-align: center; padding: 2.5rem 1.25rem; }
.dl { display: grid; grid-template-columns: max-content 1fr; gap: .5rem 1.25rem; font-size: .875rem; }
.dl dt { color: var(--ink-500); }
.dl dd { color: var(--ink-900); font-weight: 500; }
.help.inline { display: inline; margin: 0 0 0 .375rem; }
.form-card { padding-bottom: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Status do lead (pipeline local) — fora da marca, como os de proposta */
.badge-lead-new       { background: var(--ink-100);  color: var(--ink-700); }
.badge-lead-contacted { background: var(--cyan-100); color: #005A99; }
.badge-lead-simulated { background: var(--warn-100, #FFF4D6); color: var(--warn-800); }
.badge-lead-converted { background: var(--ok-100);   color: var(--ok-700); }
.badge-lead-lost      { background: var(--err-100);  color: var(--err-700); }

/* Sincronização com a Credere */
.badge-sync-synced  { background: var(--ok-100); color: var(--ok-700); }
.badge-sync-sending { background: var(--warn-100, #FFF4D6); color: var(--warn-800); }
.badge-sync-sending::before { content: ""; display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; margin-right: .375rem;
    border: 1.5px solid currentColor; border-right-color: transparent; animation: credi-spin .9s linear infinite; vertical-align: -1px; }
.badge-sync-stalled { background: var(--warn-100); color: var(--warn-800); border: 1px dashed var(--warn-800); }
.badge-sync-failed  { background: var(--err-100); color: var(--err-700); }
.badge-sync-local   { background: var(--ink-100); color: var(--ink-500); }

/* Kanban — colunas por status, cards leves, rolagem só dentro do quadro */
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: .75rem; overflow-x: auto; padding-bottom: .5rem; }
.kanban-col { background: var(--ink-100); border-radius: var(--radius); padding: .5rem; min-height: 12rem; }
.kanban-head { display: flex; align-items: center; justify-content: space-between; font-size: .75rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: var(--ink-500); padding: .25rem .5rem .5rem; }
.kanban-card { background: var(--surface); border-radius: var(--radius-sm); padding: .625rem .75rem; margin-bottom: .5rem; box-shadow: var(--shadow); }
.kanban-card .cell-strong { display: block; font-size: .875rem; }
.kanban-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .5rem; min-width: 0; }
.kanban-foot .badge { flex: none; white-space: nowrap; }
.kanban-foot form { flex: 1 1 auto; min-width: 0; display: flex; }
.kanban-foot .field-sm { width: 100%; min-width: 0; max-width: 100%; }

/* Uma cor por etapa: faixa no topo da coluna e ponto ao lado do nome,
   na mesma família do badge do status. */
.kanban-col { border-top: 3px solid var(--ink-300); }
.kanban-head::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; margin-right: .5rem; background: var(--ink-300); flex: none; }
.kanban-head span:first-of-type { flex: 1; }
.kanban-col[data-kanban-col="new"]       { border-top-color: var(--ink-400); }
.kanban-col[data-kanban-col="new"]       .kanban-head::before { background: var(--ink-400); }
.kanban-col[data-kanban-col="contacted"] { border-top-color: var(--cyan-500); }
.kanban-col[data-kanban-col="contacted"] .kanban-head::before { background: var(--cyan-500); }
.kanban-col[data-kanban-col="contacted"] .kanban-head { color: #005A99; }
.kanban-col[data-kanban-col="simulated"] { border-top-color: var(--warn-800); }
.kanban-col[data-kanban-col="simulated"] .kanban-head::before { background: var(--warn-800); }
.kanban-col[data-kanban-col="simulated"] .kanban-head { color: var(--warn-800); }
.kanban-col[data-kanban-col="converted"] { border-top-color: var(--ok-700); }
.kanban-col[data-kanban-col="converted"] .kanban-head::before { background: var(--ok-700); }
.kanban-col[data-kanban-col="converted"] .kanban-head { color: var(--ok-700); }
.kanban-col[data-kanban-col="lost"]      { border-top-color: var(--err-700); }
.kanban-col[data-kanban-col="lost"]      .kanban-head::before { background: var(--err-700); }
.kanban-col[data-kanban-col="lost"]      .kanban-head { color: var(--err-700); }
.kanban-empty { text-align: center; color: var(--ink-300); padding: 1rem 0; }

/* Aviso (não é erro): Credere indisponível, usando dados guardados etc. */
.notice { border-radius: var(--radius-sm); padding: .625rem .875rem; font-size: .8125rem; margin-bottom: 1rem;
    background: var(--warn-100); color: var(--warn-800); border: 1px solid var(--warn-800); }

/* Chips: quais bancos exigem o campo */
.chips { display: inline-flex; flex-wrap: wrap; gap: .25rem; vertical-align: middle; }
.chip { font-size: .625rem; font-weight: 600; letter-spacing: .02em; padding: .0625rem .4375rem; border-radius: 999px;
    background: var(--purple-100); color: var(--purple-800); }
.chip-muted { background: var(--ink-100); color: var(--ink-500); }

/* Seleção de bancos e lista de motivos */
.check-list { display: flex; flex-wrap: wrap; gap: .5rem .75rem; }
.check-item { display: inline-flex; align-items: center; gap: .375rem; font-size: .875rem; padding: .375rem .625rem;
    border-radius: 999px; background: var(--ink-100); cursor: pointer; }
.check-item input { accent-color: var(--purple-600); }
.radio-list { display: grid; gap: .375rem; }
.radio-item { display: flex; align-items: flex-start; gap: .625rem; padding: .625rem .75rem; border-radius: var(--radius-sm);
    background: var(--ink-100); cursor: pointer; font-size: .9375rem; }
.radio-item input { accent-color: var(--purple-600); margin-top: .2rem; }
.radio-item:has(input:checked) { background: var(--purple-100); outline: 1.5px solid var(--purple-300); }
.radio-hint { font-size: .75rem; color: var(--purple-700); }
.field-hidden { display: none !important; }

/* Histórico de perdas */
.timeline { list-style: none; padding: 0; margin: 0; font-size: .8125rem; }
.timeline li { padding: .375rem 0 .375rem .875rem; border-left: 2px solid var(--ink-200); color: var(--ink-700); }
.timeline li + li { margin-top: .25rem; }
.timeline .when { color: var(--ink-400); font-size: .75rem; }

/* Comparador de condições (simulação) */
.cond-group { margin-bottom: 1rem; }
.cond-group-title { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-500); margin: 0 0 .5rem; display: flex; align-items: center; gap: .5rem; }
.cond-group-title::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--ink-300); }
.cond-group-best .cond-group-title::before { background: var(--ok-700); }
.cond-group-possible .cond-group-title::before { background: var(--cyan-500); }
.cond-group-restricted .cond-group-title::before { background: var(--err-700); }
.cond-group-unavailable .cond-group-title::before { background: var(--ink-400); }
.cond-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .75rem; }
.cond { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1rem 1.125rem; display: flex; flex-direction: column; gap: .5rem; border-top: 3px solid var(--ink-200); }
.cond-best { border-top-color: var(--ok-700); }
.cond-possible { border-top-color: var(--cyan-500); }
.cond-restricted { border-top-color: var(--err-700); background: var(--err-100); }
.cond-unavailable { border-top-color: var(--ink-300); opacity: .85; }
.cond-pending { border-top-color: var(--warn-800); }
.cond-bank { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-weight: 700; color: var(--ink-900); }
.cond-installment { font-size: 1.5rem; font-weight: 800; color: var(--ink-900); font-variant-numeric: tabular-nums; line-height: 1.1; }
.cond-installment small { font-size: .8125rem; font-weight: 600; color: var(--ink-500); }
.cond-meta { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem .75rem; font-size: .8125rem; }
.cond-meta dt { color: var(--ink-500); }
.cond-meta dd { color: var(--ink-900); font-weight: 600; font-variant-numeric: tabular-nums; }
.cond-reason { font-size: .8125rem; color: var(--ink-700); background: var(--ink-50); border-radius: var(--radius-sm); padding: .5rem .625rem; }
.cond-restricted .cond-reason { background: var(--surface); color: var(--err-700); font-weight: 600; }
.cond-suggestion { border-left: 3px solid var(--purple-300); padding: .5rem .75rem; margin-top: .25rem; background: var(--purple-50, #FAF6FF); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: .8125rem; }
.cond-suggestion strong { color: var(--purple-800); }
.tone-ok { background: var(--ok-100); color: var(--ok-700); }
.tone-neutral { background: var(--cyan-100); color: #005A99; }
.tone-err { background: var(--err-100); color: var(--err-700); }
.tone-muted { background: var(--ink-100); color: var(--ink-500); }
.vehicle-pick { display: grid; gap: .375rem; }
.vehicle-pick label { display: flex; gap: .625rem; align-items: flex-start; padding: .5rem .75rem; border-radius: var(--radius-sm); background: var(--ink-100); cursor: pointer; font-size: .875rem; }
.vehicle-pick label:has(input:checked) { background: var(--purple-100); outline: 1.5px solid var(--purple-300); }
.progress { height: 6px; background: var(--ink-100); border-radius: 3px; overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--purple-600); transition: width .4s; }

/* Estados de proposta/tentativa (mesma família dos badges de status do guia) */
.badge-state-checagem     { background: var(--ink-100);  color: var(--ink-700); }
.badge-state-analise      { background: var(--cyan-100); color: #005A99; }
.badge-state-pre_aprovada { background: var(--ok-100);   color: var(--ok-700); }
.badge-state-pendente     { background: var(--warn-100); color: var(--warn-800); }
.badge-state-aprovada     { background: var(--ok-700);   color: #fff; }
.badge-state-faturada     { background: var(--purple-100); color: var(--purple-800); }
.badge-state-restricao    { background: var(--err-100);  color: var(--err-700); }
.badge-state-recusada     { background: var(--err-700);  color: #fff; }
.badge-state-desistencia  { background: var(--ink-100);  color: var(--ink-500); }
.badge-state-expirada     { background: var(--ink-100);  color: var(--ink-500); }
.tone-warn { background: var(--warn-100); color: var(--warn-800); }

/* Pipeline: proposta é o card, tentativas são linhas */
.pipeline { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 1fr); gap: .75rem; overflow-x: auto; padding-bottom: .5rem; }
.pcard { background: var(--surface); border-radius: var(--radius-sm); padding: .625rem .75rem; margin-bottom: .5rem; box-shadow: var(--shadow); }
.pcard-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.pcard-attempts { list-style: none; margin: .5rem 0 0; padding: 0; font-size: .75rem; }
.pcard-attempts li { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .25rem 0; border-top: 1px solid var(--ink-100); }
.pcard-attempts .bank { font-weight: 600; color: var(--ink-900); }
.attempts-table td, .attempts-table th { vertical-align: top; }
.timeline-events { list-style: none; padding: 0; margin: 0; font-size: .8125rem; }
.timeline-events li { position: relative; padding: .375rem 0 .375rem 1.125rem; border-left: 2px solid var(--ink-200); }
.timeline-events li::before { content: ""; position: absolute; left: -5px; top: .75rem; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-300); }
.timeline-events li.ev-state_changed::before, .timeline-events li.ev-sent_to_bank::before { background: var(--purple-600); }
.timeline-events li.ev-edited_after_send::before, .timeline-events li.ev-sync_failed::before { background: var(--err-700); }
.timeline-events .when { color: var(--ink-400); font-size: .75rem; }
.alert-resend { background: var(--warn-100); border: 1.5px solid var(--warn-800); color: var(--warn-800); border-radius: var(--radius-sm); padding: .75rem 1rem; font-size: .875rem; }