/* =====================================================================================
   EFICÁCIA CRM — mod-propostas.css
   -------------------------------------------------------------------------------------
   SÓ o que o design-system.css não cobre. Tudo o que existe em ds- é usado tal como está.
   Prefixo exclusivo: .mp-  ·  Mobile-first  ·  Zero scroll horizontal do body.

   Blocos: grelha do formulário (6/2/2/2 do original) · cabeçalho do detalhe ·
           cartões de escalão · assistente de conversão · zona de upload.
   ===================================================================================== */

/* ===================================================================================
   1. LISTAGEM
   =================================================================================== */

/* Âmbito da pesquisa (paridade = só código; melhoria = código+cliente+marca) */
.mp-ambito { margin-top: 2px; }
.mp-ambito-label { min-height: 32px; padding: 0 2px; }
.mp-ambito-label .ds-check-label { font-size: var(--text-xs); color: var(--neutral-500); font-weight: 500; }
.mp-ambito-label input[type="checkbox"] { width: 16px; height: 16px; margin-top: 1px; }

/* A prioridade de colunas da listagem (Marca a colapsar sob o Cliente em
   tablet, ícone de validade ultrapassada, etiqueta «Convertida») deixou de
   viver aqui: passou para a MOLDURA `ds-listagem.css`, que troca a tabela
   por cartões abaixo dos 1024 px em vez de esconder colunas. As regras
   `.mp-col-marca` / `.mp-marca-inline` / `.mp-exp` / `.mp-tag-conv` foram
   removidas com o markup que as usava — nenhuma delas tinha outro cliente
   (verificado por grep em *.js e *.html). */

/* P-231 — em mobile a paginação é EXATAMENTE «Anterior · X de Y · Seguinte».
   Números, primeira e última só aparecem a partir de 768px. Alvos >= 44px. */
.mp-pager-nums { display: none; }
.mp-pager-edge { display: none; }
.mp-pager-passo { padding-left: 12px; padding-right: 12px; gap: 6px; }
.mp-pager-lbl { font-size: var(--text-sm); font-weight: 600; }
@media (min-width: 768px) {
    .mp-pager-nums { display: inline-flex; gap: 4px; }
    .mp-pager-edge { display: inline-flex; }
    .mp-pager-passo { padding-left: 0; padding-right: 0; }
    .mp-pager-lbl { display: none; }
}

/* ===================================================================================
   1.5 DASHBOARD DA LISTAGEM  (mod-propostas.js §11.5)
   -----------------------------------------------------------------------------------
   Mobile-first e por esta ordem: faixa de mosaicos (uma linha que rola) → botão
   que abre a análise → gráficos → filas de trabalho. Em mobile o painel nasce
   FECHADO: quem abre a listagem no telemóvel quer a lista, e o dashboard não lhe
   pode roubar o ecrã. Em desktop nasce aberto.

   A faixa reutiliza `.ds-lst-kpis`/`.ds-lst-kpi` da moldura (`ds-listagem.css`,
   dentro de `@layer listagem` — por isso estas regras sem camada ganham-lhe sempre,
   independentemente da especificidade). Só se alarga o mosaico: «324 785 €» mais a
   legenda do cenário não cabem nos 96 px pensados para uma contagem.
   =================================================================================== */

.mp-dash { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-3); }

/* `display:flex` ganha ao `[hidden]{display:none}` do agente do utilizador —
   sem estas três linhas o painel «fechado» continuava a ocupar 3000 px em
   mobile e o botão de abrir aparecia durante o carregamento. */
.mp-dash[hidden], .mp-dash-kpis[hidden], .mp-dash-zero[hidden] { display: none; }

.mp-dash-kpis { align-items: stretch; }
.mp-dash-kpis .mui-skel-wrap { flex: 1 1 auto; min-width: 0; }

.mp-dash .mp-kpi {
    min-width: 168px;
    max-width: 260px;
    gap: 3px;
    padding: var(--sp-2) var(--sp-3);
    text-align: left;
}
.mp-dash .mp-kpi-n { font-variant-numeric: var(--num-tabular); white-space: nowrap; }
.mp-kpi-nota {
    font-size: var(--txt-xs);
    line-height: 1.35;
    color: var(--text-3);
    white-space: normal;
    font-weight: var(--fw-medium, 500);
}

/* O botão que abre/fecha a análise e o corpo do painel deixaram de
   viver aqui: são `.ds-analise*` no ds-listagem.css, iguais nos dez
   módulos (MOD.listagem.painelAnalise). */

/* `align-items:start` — com uma fila expandida, esticar as outras deixava
   cartões meio vazios de 900 px. Cada cartão tem a altura do que tem dentro. */
.mp-dash-grelha, .mp-dash-filas { display: grid; gap: var(--sp-3); grid-template-columns: 1fr; align-items: start; }

.mp-dash-card, .mp-dash-fila { padding: var(--sp-3); gap: var(--sp-2); min-width: 0; }
.mp-dash-card-cab { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); flex-wrap: wrap; }
.mp-dash-card-tit {
    display: flex; align-items: center; gap: 8px;
    flex: 1 1 auto; min-width: 0;
    margin: 0; font-size: var(--txt-sm); font-weight: var(--fw-bold);
    text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--text-2);
}

/* Seletor de janela do funil (90 d · 12 m · tudo) */
.mp-dash-seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
/* Alvo de toque: 44 px em mobile (WCAG 2.5.5 e gate responsivo), 32 px só a
   partir do desktop, onde o rato não precisa de tanto. */
.mp-dash-seg-b {
    min-height: var(--ds-touch); min-width: 52px; padding: 0 12px;
    border: 0; background: transparent; color: var(--text-3);
    font-size: var(--txt-xs); font-weight: var(--fw-bold); cursor: pointer;
}
.mp-dash-seg-b + .mp-dash-seg-b { border-left: 1px solid var(--border); }
.mp-dash-seg-b[aria-pressed="true"] { background: var(--surface-alt); color: var(--text-1); box-shadow: inset 0 -2px 0 var(--brand-500); }

/* O Chart.js com `maintainAspectRatio:false` precisa de uma altura definida no
   pai; sem `position:relative` o canvas cresce a cada redimensionamento. */
.mp-dash-chart { position: relative; height: 208px; min-width: 0; }
.mp-dash-chart canvas { max-width: 100%; }

.mp-dash-nota { margin: 0; font-size: var(--txt-xs); line-height: 1.45; color: var(--text-3); }
.mp-dash-nota-forte { color: var(--text-1); font-weight: var(--fw-bold); }
.mp-dash-aviso { display: inline-flex; align-items: flex-start; gap: 4px; color: var(--warning-700); }
.mp-dash-aviso svg { flex-shrink: 0; margin-top: 2px; }
.mp-dash-link {
    display: inline-flex; align-items: center;
    min-height: var(--ds-touch);        /* alvo de toque; em desktop encolhe */
    border: 0; background: none; padding: 0; cursor: pointer;
    font: inherit; font-weight: var(--fw-bold); color: var(--brand-600);
    text-decoration: underline; text-underline-offset: 2px; text-align: left;
}

/* Estado vazio (zero propostas na base) */
.mp-dash-zero {
    display: flex; align-items: center; gap: 8px; margin: 0;
    padding: var(--sp-3); border: 1px dashed var(--border-strong); border-radius: var(--r-lg);
    font-size: var(--txt-sm); color: var(--text-3);
}

/* ---- filas de trabalho ---- */
.mp-fila-n {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 20px; padding: 0 6px;
    border-radius: var(--r-full, 999px); background: var(--surface-alt);
    color: var(--text-2); font-size: var(--txt-xs); font-variant-numeric: var(--num-tabular);
}
/* O ponto de nível é o MESMO vocabulário do mod-alertas.js: `acao` = marca
   (dinheiro em cima da mesa), `aviso` = âmbar (prazo a fechar-se). */
.mp-fila-pt { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-400); flex-shrink: 0; }
.mp-fila-pt[data-nivel="acao"] { background: var(--brand-500); }
.mp-fila-pt[data-nivel="aviso"] { background: var(--warning-500); }
.mp-fila-sub { margin: 0; font-size: var(--txt-xs); line-height: 1.45; color: var(--text-3); }

.mp-fila-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mp-fila-item + .mp-fila-item { border-top: 1px solid var(--border); }
.mp-fila-linha {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto 18px;
    grid-template-areas: "cod cli val seta" "meta meta meta seta";
    align-items: center;
    column-gap: 8px;
    width: 100%;
    min-height: var(--ds-touch);
    padding: 8px 2px;
    border: 0; background: none; cursor: pointer; text-align: left;
    color: var(--text-1);
    border-radius: 8px;
}
.mp-fila-linha:hover { background: var(--surface-alt); }
.mp-fila-cod { grid-area: cod; font-family: var(--font-mono); font-size: var(--txt-xs); font-weight: var(--fw-bold); }
.mp-fila-cli {
    grid-area: cli; min-width: 0; font-size: var(--txt-sm);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mp-fila-marca { color: var(--text-3); }
.mp-fila-marca::before { content: " · "; }
.mp-fila-val { grid-area: val; font-size: var(--txt-sm); font-weight: var(--fw-bold); font-variant-numeric: var(--num-tabular); white-space: nowrap; }
.mp-fila-dias { color: var(--brand-600); }
.mp-fila-sv { color: var(--text-3); font-weight: 500; font-style: italic; }
.mp-fila-meta { grid-area: meta; font-size: var(--txt-xs); color: var(--text-3); }
.mp-fila-seta { grid-area: seta; display: inline-flex; color: var(--text-3); }
.mp-fila-vazia {
    display: flex; align-items: center; gap: 8px; margin: 0; padding: var(--sp-2) 0;
    font-size: var(--txt-sm); color: var(--text-3);
}
.mp-fila-vazia svg { color: var(--success-500); flex-shrink: 0; }
.mp-fila-mais { align-self: flex-start; margin-top: 2px; }
.mp-fila-mais svg { transition: transform .18s ease; }
.mp-fila-mais[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Realce de 1,4 s quando um mosaico atira para a fila correspondente */
.mp-dash-fila.is-alvo { box-shadow: 0 0 0 2px var(--brand-300); }

@media (min-width: 768px) {
    .mp-dash-chart { height: 248px; }
    .mp-dash-seg-b { min-height: 32px; min-width: 0; padding: 0 10px; }
    .mp-dash-link { min-height: 0; }
}

@media (min-width: 1024px) {
    /* Deixa de ser um carrossel: os seis mosaicos cabem numa grelha e
       lêem-se todos ao mesmo tempo. */
    /* Colunas FIXAS em vez de `auto-fit`: com seis mosaicos, o auto-fit dava
       cinco em cima e um órfão em baixo. 3+3 lê-se; 5+1 não. */
    .mp-dash-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
    .mp-dash .mp-kpi { max-width: none; min-width: 0; }
    .mp-dash-kpis .mui-skel-wrap { grid-column: 1 / -1; }
    .mp-dash-grelha { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
    .mp-dash-filas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1280px) {
    .mp-dash-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (min-width: 1440px) {
    .mp-dash-filas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
}

/* ===================================================================================
   2. FORMULÁRIO (criar / editar) — grelha 6/2/2/2 + 12 do original
   =================================================================================== */

@media (min-width: 1024px) {
    .mp-form-grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
}

/* =====================================================================================
   P-244 — VALIDAÇÃO DE CONTRASTE DOS BADGES (registo no repositório, mínimo AA 4.5:1)
   -------------------------------------------------------------------------------------
   Rácios medidos (WCAG 2.1 relative luminance) para os badges de estado de proposta,
   com os tokens reais do design system, sobre o respetivo fundo do badge:

     Estado          texto / fundo            rácio    AA (>=4.5)
     Aceite (verde)  #047857 / #ecfdf5         5.21      OK
     Em Aberto (amb) #92400e / #fffbeb         6.84      OK   (amber deliberadamente escuro)
     Recusada (verm) #b91c1c / #fef2f2         5.91      OK
     Convertida(azul)#1e40af / #eff6ff         8.01      OK

   As cores vêm de design-system.css (.ds-badge--green/amber/red/blue) e não são aqui
   redefinidas. Exceção corrigida abaixo: o chip informativo `ds-tag--warn` (validade
   expirada) usa --warning-600 (#d97706), que sobre amber-50 dá 3.07:1 (< AA). Dentro
   do âmbito deste módulo é escurecido para #92400e (6.84:1).
   ===================================================================================== */
.mp-page .ds-tag--warn,
.mp-detalhe .ds-tag--warn { color: #92400e; }
/* Na listagem, a validade ultrapassada deixou de ser um ícone: é a nota
   «expirou há N dias» (`.ds-lst-nota`, --text-3) por baixo da data — texto,
   e por isso sujeita ao mínimo AA de 4.5:1 do próprio design system, não ao
   de 3:1 dos objetos gráficos. */

/* ===================================================================================
   MOD.campos — blindagem de especificidade
   -----------------------------------------------------------------------------------
   O datepicker próprio (.mp-date*) e o pé do menu do combobox (.mp-cb-mais)
   saíram daqui: a data e a lista passaram a ser o MOD.campos, que traz o seu
   próprio CSS. Fica só o que o design-system tornaria a estragar: o campo
   nativo que o MOD.campos esconde continua a ser um `.ds-select`, e regras
   como `.ds-pagesize .ds-select` (0-2-0) têm mais especificidade do que
   `.cp-nativo` (0-1-0) — devolviam-lhe largura e o campo aparecia duas vezes.
   Sem `!important`: ganha por especificidade e por ordem de ficheiro.
   =================================================================================== */
.cp .cp-nativo,
.mp-modal-overlay .cp .cp-nativo {
    width: 1px;
    min-width: 0;
    height: 1px;
    min-height: 0;
    padding: 0;
}

/* «Por página»: o MOD.campos embrulha o `<select>` num `.cp` de `width:100%`,
   que serve um campo de formulário mas não um controlo de barra — esticava-se
   e empurrava a paginação. Devolve-se-lhe a medida que o `<select>` tinha.
   Escopado ao módulo (e não a `.ds-pagesize` solto) para não competir com a
   mesma regra que o mod-frota.css também precisou de escrever. */
.mp-page .ds-pagesize .cp { width: 118px; flex: 0 0 auto; min-width: 0; }
.mp-page .ds-pagesize .cp .cp-txt { font-size: var(--text-xs); }
/* «10 / 25 / 50» não tem valor vazio: o botão de limpar não faz sentido aqui e
   roubava 44px ao texto (o número deixava de caber e o campo colapsava a 0). */
.mp-page .ds-pagesize .cp .cp-acao--limpar { display: none; }
.mp-page .ds-pagesize .cp .cp-gatilho {
    /* só min-height: em toque o .cp-txt do MOD.campos já pede 44px e é ele
       que manda; fixar a altura fazia o texto transbordar do gatilho. */
    min-height: var(--ds-control-h-sm);
    padding-left: 10px;
}

/* Em ecrã pequeno o alvo volta aos 44px, como os botões de página ao lado.
   O `height` explícito tem de cair para `auto`: o mod-frota.css escreve
   `height: var(--ds-control-h-sm)` (36px) em `.ds-pagesize .cp .cp-gatilho`
   e, sendo carregado depois deste ficheiro, ganhava-lhe a altura. */
@media (max-width: 768px) {
    .mp-page .ds-pagesize .cp { width: 140px; }
    .mp-page .ds-pagesize .cp .cp-gatilho { height: auto; min-height: 44px; }
    .mp-page .ds-pagesize .cp .cp-txt { min-height: 44px; }
}

.mp-aviso-validade { margin-top: 4px; }
.mp-aviso-accoes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}
.mp-alert-topo { margin-bottom: 16px; }

/* ===================================================================================
   3. DETALHE
   =================================================================================== */

.mp-cab .ds-card-body { padding-top: 14px; padding-bottom: 14px; }
.mp-cab-body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
}
.mp-cab-id {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    min-width: 0;
}
/* 11.1 — o código EF é o elemento tipográfico mais forte do detalhe */
.mp-cab-codigo {
    font-family: var(--ds-font-mono);
    font-size: var(--text-2xl);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--neutral-900);
    line-height: 1.1;
    word-break: break-all;
}
@media (min-width: 768px) {
    .mp-cab-codigo { font-size: var(--text-3xl); }
}

.mp-chip-conv {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: var(--ds-touch);
    padding: 8px 14px;
    border-radius: var(--radius-full);
    background: var(--primary-50);
    border: 1px solid var(--primary-200);
    color: var(--primary-700);
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
    transition: background-color var(--transition-fast), transform var(--transition-fast);
}
.mp-chip-conv:hover { background: var(--primary-100, var(--primary-50)); }
.mp-chip-conv:active { transform: scale(0.985); }
.mp-chip-conv svg { flex-shrink: 0; }

/* Três blocos semânticos do card principal (Identificação / Calendário / Comercial) */
.mp-grupos {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    min-width: 0;
}
@media (min-width: 768px) {
    .mp-grupos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
    .mp-grupos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.mp-grupo { min-width: 0; }
.mp-grupo .ds-section-title { margin-bottom: 10px; }

/* Ações do detalhe: barra fixa no fundo em mobile, no card-header em desktop */
.mp-accoes-mobile { display: flex; }
@media (min-width: 992px) {
    .mp-accoes-mobile { display: none; }
}

.mp-limite { padding: 10px var(--ds-card-pad) 14px; margin: 0; }
.mp-vazio-inline { padding: 14px 2px; margin: 0; }

/* Os ícones de ação dos ficheiros são sempre visíveis (não dependem de :hover) */
.mp-acoes-fixas { opacity: 1 !important; }

/* ===================================================================================
   4. MODAL EQUIPAMENTO — escalões como cartões-preço alternativos
   =================================================================================== */

.mp-nota { margin: 0 0 12px; }

/* O ALVO da linha — suporte montado ou posição por montar (pedido 0ab99ea9).
   Só espaçamento: os chips são os do design system e não se lhes toca na aparência,
   senão passavam a ser um componente parecido em vez do mesmo. */
.mp-alvo { margin: 0 0 8px; }

.mp-escaloes {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    min-width: 0;
}
@media (min-width: 640px) {
    .mp-escaloes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.mp-escalao {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-lg);
    background: var(--neutral-25, var(--neutral-50));
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
    min-width: 0;
}
.mp-escalao.is-activo {
    border-color: var(--primary-400);
    background: var(--neutral-0);
    box-shadow: var(--shadow-xs);
}
.mp-escalao-num {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--neutral-400);
}
.mp-escalao.is-activo .mp-escalao-num { color: var(--primary-600); }
.mp-escalao-total {
    font-size: var(--text-sm);
    color: var(--neutral-600);
    font-variant-numeric: tabular-nums;
    padding-top: 4px;
    border-top: 1px dashed var(--neutral-200);
}
.mp-escalao-total strong { color: var(--neutral-900); }

.mp-erro-escaloes { margin-top: 10px; }
.mp-erro-escaloes.is-visivel { display: inline-flex; }

/* ===================================================================================
   5. MODAL ATIVAÇÃO — sub-secção de artigos
   =================================================================================== */

.mp-sub { min-width: 0; }
.mp-sub-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}
.mp-sub-head .ds-section-title { margin: 0; }

/* ===================================================================================
   6. MODAL FICHEIRO — zona de upload
   =================================================================================== */

.mp-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    padding: 22px 16px;
    border: 2px dashed var(--neutral-300);
    border-radius: var(--radius-lg);
    background: var(--neutral-25, var(--neutral-50));
    color: var(--neutral-500);
    cursor: pointer;
    min-height: 132px;
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
.mp-drop:hover,
.mp-drop:focus-visible { border-color: var(--primary-400); color: var(--neutral-700); }
.mp-drop:focus-visible { outline: 2px solid var(--primary-500); outline-offset: 2px; }
.mp-drop.is-over { border-color: var(--primary-600); background: var(--primary-50); color: var(--primary-700); }
.mp-drop-txt { font-size: var(--text-sm); font-weight: 500; }

.mp-ficheiros { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.mp-ficheiro {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-md);
    background: var(--neutral-0);
    min-width: 0;
}
.mp-ficheiro > svg { color: var(--neutral-400); flex-shrink: 0; }
.mp-ficheiro-nome {
    flex: 1;
    min-width: 0;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--neutral-800);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mp-ficheiro-tam {
    font-size: var(--text-xs);
    color: var(--neutral-400);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

/* ===================================================================================
   7. ASSISTENTE DE CONVERSÃO
   =================================================================================== */

.mp-wiz { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

.mp-passos {
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}
.mp-passos li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--neutral-400);
}
.mp-passos li + li::before {
    content: '';
    width: 18px;
    height: 1px;
    background: var(--neutral-300);
    margin-right: 4px;
}
.mp-passos li > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--neutral-200);
    color: var(--neutral-600);
    font-size: var(--text-xs);
    font-weight: 700;
    flex-shrink: 0;
}
.mp-passos li.is-activo { color: var(--neutral-900); }
.mp-passos li.is-activo > span { background: var(--primary-600); color: #fff; }
/* `--success-700`: o número do passo é TEXTO a 11px bold — branco sobre
   #10B981 dá 2.54:1. Sobre #047857 dá 5.55:1, e o passo "feito" continua a
   distinguir-se do "activo" (vermelho da marca) pela cor, não pelo tom. */
.mp-passos li.is-feito > span { background: var(--success-700); color: #fff; }

.mp-duracao {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.mp-bloco { min-width: 0; }
.mp-bloco-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-bottom: 10px;
}
.mp-bloco-topo .ds-section-title { margin: 0; }

.mp-cartoes { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

.mp-cartao {
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-lg);
    background: var(--neutral-0);
    overflow: hidden;
    transition: border-color var(--transition-fast), opacity var(--transition-fast);
    min-width: 0;
}
.mp-cartao:not(.is-selecionado) { opacity: 0.6; }
.mp-cartao.is-selecionado { border-color: var(--primary-200); }
.mp-cartao.is-erro { border-color: var(--error-500); box-shadow: 0 0 0 3px var(--error-50); }
/* POSIÇÃO POR MONTAR — a linha está lá e não pode ser escolhida. Fica menos apagada do que
   uma linha só desmarcada (o `opacity: 0.6` de cima esconderia a razão que se quer LIDA) e
   com a borda âmbar, que é o vocabulário de «a andar, ainda não chegou» do resto da app. */
.mp-cartao.is-bloqueado { opacity: 0.85; border-color: var(--warning-300); }
.mp-cartao.is-bloqueado .mp-cartao-check input { cursor: not-allowed; }

.mp-cartao-topo {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: var(--neutral-25, var(--neutral-50));
    border-bottom: 1px solid var(--neutral-100);
    flex-wrap: wrap;
}
.mp-cartao-check { padding: 0; min-height: var(--ds-touch); align-items: center; }
.mp-cartao-titulo {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
.mp-cartao-titulo strong { font-size: var(--text-sm); color: var(--neutral-900); overflow-wrap: anywhere; }
.mp-cartao-titulo .ds-cell-muted { font-size: var(--text-xs); }
.mp-cartao-valor {
    font-size: var(--text-sm);
    color: var(--neutral-600);
    font-variant-numeric: tabular-nums;
    width: 100%;
}
@media (min-width: 640px) {
    .mp-cartao-valor { width: auto; text-align: right; }
}
.mp-cartao-corpo { display: flex; flex-direction: column; gap: 12px; padding: 12px 14px; min-width: 0; }

/* Grupo de rádios de escalão — um por linha (P-142) */
.mp-esc-radios {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    min-width: 0;
}
@media (min-width: 640px) {
    .mp-esc-radios { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}
.mp-esc-radio {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 4px 10px;
    min-height: var(--ds-touch);
    padding: 10px 12px;
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-md);
    cursor: pointer;
    background: var(--neutral-0);
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
    -webkit-tap-highlight-color: transparent;
}
.mp-esc-radio:hover { border-color: var(--primary-400); }
.mp-esc-radio.is-activo { border-color: var(--primary-600); background: var(--primary-50); }
.mp-esc-radio input[type="radio"] {
    width: 20px;
    height: 20px;
    accent-color: var(--primary-600);
    grid-row: span 2;
    cursor: pointer;
}
.mp-esc-meses { font-size: var(--text-sm); font-weight: 600; color: var(--neutral-800); }
/* P-141 — rótulo Qtd 1..3 / Valor 1..3 sempre visível, mesmo em escalão incompleto */
.mp-esc-n {
    display: inline-block;
    margin-right: 4px;
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--neutral-400);
}
.mp-esc-radio.is-indisponivel {
    background: var(--neutral-25, var(--neutral-50));
    border-style: dashed;
    cursor: not-allowed;
}
.mp-esc-radio.is-indisponivel:hover { border-color: var(--neutral-200); }
.mp-esc-radio.is-indisponivel .mp-esc-meses,
.mp-esc-radio.is-indisponivel .mp-esc-valor,
.mp-esc-radio.is-indisponivel .mp-esc-total { color: var(--neutral-400); }
.mp-esc-valor { font-size: var(--text-xs); color: var(--neutral-500); font-variant-numeric: tabular-nums; grid-column: 2; }
/* `small` encolheria para ~0,83em e cairia abaixo do mínimo legível */
.mp-esc-valor small { color: var(--neutral-400); font-size: 1em; }
.mp-esc-total {
    grid-column: 3;
    grid-row: span 2;
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--neutral-900);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.mp-extras { display: flex; flex-direction: column; gap: 6px; }
.mp-alert-mini { padding: 8px 10px; }

.mp-expandir {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: var(--ds-touch);
    padding: 0 4px;
    background: none;
    border: 0;
    color: var(--primary-700);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    align-self: flex-start;
}
.mp-expandir svg { transition: transform var(--transition-fast); }
.mp-expandir.is-aberto svg { transform: rotate(180deg); }

.mp-artigos { display: flex; flex-direction: column; gap: 6px; }
.mp-artigo {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 2px 10px;
    min-height: var(--ds-touch);
    padding: 8px 10px;
    border: 1px solid var(--neutral-100);
    border-radius: var(--radius-md);
    cursor: pointer;
    background: var(--neutral-25, var(--neutral-50));
    -webkit-tap-highlight-color: transparent;
}
.mp-artigo input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--primary-600);
    grid-row: span 2;
    cursor: pointer;
}
.mp-artigo-ref { font-size: var(--text-xs); font-weight: 700; color: var(--neutral-500); font-family: var(--ds-font-mono); }
.mp-artigo-desc {
    grid-column: 2;
    font-size: var(--text-sm);
    color: var(--neutral-800);
    overflow-wrap: anywhere;
}
.mp-artigo-qtd { grid-column: 3; grid-row: 1; font-size: var(--text-xs); color: var(--neutral-500); white-space: nowrap; }
.mp-artigo-valor {
    grid-column: 3;
    grid-row: 2;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--neutral-900);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-align: right;
}

/* Rodapé-resumo fixo do assistente */
.mp-wiz-rodape {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    min-width: 0;
}
.mp-resumo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mp-resumo-linha {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-size: var(--text-sm);
    color: var(--neutral-500);
}
.mp-resumo-linha strong {
    font-size: var(--text-lg);
    color: var(--neutral-900);
    font-variant-numeric: tabular-nums;
}
.mp-resumo-erro {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--error-600);
    line-height: 1.4;
}
.mp-resumo-erro svg { flex-shrink: 0; margin-top: 1px; }
.mp-resumo-accoes { display: flex; gap: 10px; }
.mp-resumo-accoes > .ds-btn { flex: 1 1 auto; }
@media (min-width: 768px) {
    .mp-wiz-rodape { flex-direction: row; align-items: center; justify-content: space-between; gap: 20px; }
    .mp-resumo { flex: 1; }
    .mp-resumo-accoes > .ds-btn { flex: 0 0 auto; }
}

/* ===================================================================================
   8. MODAIS — ajustes de pilha e bloqueio de scroll do fundo
   =================================================================================== */

body.mp-modal-aberto { overflow: hidden; }
.mp-modal-head-txt { min-width: 0; }
/* P-241 — o botão de fechar do design system é «sm» (36px); dentro dos modais deste
   módulo elevamo-lo ao mínimo tocável de 44px em TODOS os viewports. */
.mp-modal-overlay .ds-modal-close {
    width: var(--ds-touch);
    height: var(--ds-touch);
    min-width: var(--ds-touch);
    min-height: var(--ds-touch);
}
.mp-modal-overlay .ds-modal-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
/* Em ecrã estreito os botões do rodapé ocupam a largura toda e têm alturas iguais */
.mp-modal-overlay .ds-modal-footer > .ds-btn { flex: 1 1 auto; min-width: 0; }
@media (min-width: 768px) {
    .mp-modal-overlay .ds-modal-footer > .ds-btn { flex: 0 0 auto; }
}

/* ===================================================================================
   9. TOQUE E LEGIBILIDADE EM MOBILE (P-241 / P-244)
   -----------------------------------------------------------------------------------
   O design system usa 36 px nos controlos «sm» e 10,5–11 px nos rótulos auxiliares.
   Abaixo de 768 px isso fica sob o mínimo de 44×44 px e 12 px exigido pela auditoria,
   por isso este módulo eleva-os DENTRO do seu próprio âmbito (.mp-page / .mp-modal-*).
   =================================================================================== */

@media (max-width: 767.98px) {

    /* (a) UM ÚNICO PONTO DE VERDADE — o design system é totalmente tokenizado,
       por isso basta elevar os tokens dentro do âmbito deste módulo:
         --text-xs           11 px  →  12 px  (mínimo legível)
         --ds-control-h-sm   36 px  →  46 px  (botões/ícones «sm»)
         --ds-control-h-md   44 px  →  46 px  (inputs, selects, paginação)
         --ds-touch          44 px  →  46 px  (checkboxes, switches, alvos próprios)
       Os 46 px (em vez de 44) dão margem para o arredondamento sub-pixel durante
       a animação de entrada dos modais, que chegava a medir 43,99 px. */
    .mp-page,
    .mp-modal-overlay {
        --text-xs: 12px;
        --ds-touch: 46px;
        --ds-control-h-sm: 46px;
        --ds-control-h-md: 46px;
    }

    /* (b) Componentes com valores fixos no design system (não usam os tokens). */
    .mp-page .ds-tag,
    .mp-page .ds-chip-count,
    .mp-page .ds-optgroup,
    .mp-page .ds-tab-badge,
    .mp-page .ds-sort-ind,
    .mp-page .ds-table tbody td::before,
    .mp-modal-overlay .ds-tag,
    .mp-modal-overlay .ds-chip-count,
    .mp-modal-overlay .ds-optgroup,
    .mp-modal-overlay .ds-table tbody td::before { font-size: 12px; }

    .mp-page .ds-combobox-clear,
    .mp-modal-overlay .ds-combobox-clear {
        width: var(--ds-touch);
        height: var(--ds-touch);
        min-width: var(--ds-touch);
        min-height: var(--ds-touch);
    }

    /* Migalhas: cada elo é um alvo tocável completo */
    .mp-page .ds-breadcrumb a,
    .mp-page .ds-breadcrumb > span:not(.ds-breadcrumb-sep) {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: var(--ds-touch);
        min-width: var(--ds-touch);
    }

    /* P-232 — UMA coluna abaixo de 768px. O design system passa a 2 colunas já aos
       640px; dentro do âmbito deste módulo (página e modais) isso é revertido. */
    .mp-page .ds-form-grid,
    .mp-page .ds-form-grid--2,
    .mp-page .mp-form-grid,
    .mp-page .mp-duracao,
    .mp-modal-overlay .ds-form-grid,
    .mp-modal-overlay .ds-form-grid--2,
    .mp-modal-overlay .mp-duracao {
        grid-template-columns: 1fr;
    }

    /* Caixa de seleção dos cartões da conversão */
    .mp-cartao-check {
        min-width: var(--ds-touch);
        min-height: var(--ds-touch);
        justify-content: center;
        align-items: center;
    }
    .mp-cartao-check input[type="checkbox"] { margin-top: 0; }
}

/* ===================================================================================
   10. GUARDAS GLOBAIS — nenhum ecrã provoca scroll horizontal do body
   =================================================================================== */

.mp-page { max-width: 100%; overflow-x: clip; }
.mp-page img, .mp-page svg { max-width: 100%; }
.mp-page .ds-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Movimento reduzido */
@media (prefers-reduced-motion: reduce) {
    .mp-chip-conv,
    .mp-escalao,
    .mp-cartao,
    .mp-esc-radio,
    .mp-expandir svg { transition: none !important; }
}