/* Visão do Campo — "Mudar de plano" (mudar-plano.js): o bloco do painel Assinatura e o diálogo.
   Classes `mp-*` só deste módulo. Métricas do Material 3: grade de 8, alvo de 48 no toque, cartões de opção com
   contorno de 1 px e a marca do selecionado em 2 px, raios dos tokens (`--r-s` controle e cartão, `--r-m` diálogo).
   Sem sombra, sem degradê, SEM caixa colorida de erro: erro é texto na cor de erro, com ícone. */

.mp-secao > .ass-subtitulo { margin-top: 20px; }
.mp-apoio { margin: 8px 0 0; font: 400 var(--t-body-m)/20px var(--ui); color: var(--tinta-2); max-width: 70ch; }
.mp-texto { margin: 0 0 12px; font: 400 var(--t-body-m)/20px var(--ui); color: var(--tinta); max-width: 70ch; }
.mp-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.mp-alvo { min-height: var(--alvo-toque, 48px); }
.mp-erro { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; color: var(--erro); font: 500 var(--t-body-m)/20px var(--ui); }
.mp-erro svg { flex: none; }
.mp-erro[hidden] { display: none; }

/* a mudança agendada: um cartão neutro com contorno, o ícone de agenda em verde e o Desfazer */
.mp-agendada { display: flex; align-items: flex-start; gap: 12px; margin-top: 12px; padding: 16px; border: 1px solid var(--linha-forte); border-radius: var(--r-s); background: var(--superficie); }
.mp-agendada > svg { flex: none; color: var(--verde); margin-top: 2px; }
.mp-agendada-corpo { flex: 1; min-width: 0; }
.mp-agendada-texto { margin: 0; font: 600 var(--t-body-m)/20px var(--ui); color: var(--tinta); }
.mp-agendada .mp-acoes { margin-top: 8px; }

/* o diálogo: mais largo que a confirmação (cabem dois cartões por linha), a rolagem é a do próprio painel. No
   computador ele fica PRESO NO ALTO (não centrado): o resumo da escolha muda de altura, e centrado o diálogo
   pulava a cada clique, tirando o próximo cartão de baixo do ponteiro */
.mp-dialogo { width: min(640px, 100%); }
@media (min-width: 561px) { .mp-fundo { align-items: flex-start; padding-top: max(16px, 6vh); } }
.mp-corpo { padding-bottom: 16px; }
/* o rodapé fica à vista enquanto os planos rolam (no celular a lista passa da tela): Cancelar e o botão que diz
   o que faz nunca somem embaixo */
.mp-pe { position: sticky; bottom: 0; background: var(--superficie); border-top: 1px solid var(--linha); padding-top: 12px; }
.mp-atual { margin-bottom: 16px; }
.mp-esqueleto { min-height: 240px; }

/* Mensal | Anual: botões segmentados do M3 (contorno, o escolhido em verde-claro com a marca) */
.mp-segmentado { display: inline-flex; margin: 0 0 16px; border: 1px solid var(--cad-contorno, #8A938A); border-radius: var(--r-s); overflow: hidden; }
.mp-seg { min-height: var(--alvo-toque, 48px); min-width: 112px; padding: 0 16px; border: 0; background: transparent; color: var(--tinta); font: 600 var(--t-body-m)/20px var(--ui); cursor: pointer; }
.mp-seg + .mp-seg { border-left: 1px solid var(--cad-contorno, #8A938A); }
.mp-seg:hover { background: var(--cinza-claro); }
.mp-seg.sel { background: var(--verde-claro); color: var(--verde); }
.mp-seg:focus-visible { outline: 3px solid var(--verde); outline-offset: -3px; }

.mp-grupo { margin: 0; padding: 0; border: 0; min-width: 0; }
.mp-grade { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 560px) { .mp-grade { grid-template-columns: 1fr 1fr; } }
.mp-item { position: relative; display: flex; }
.mp-radio { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.mp-opcao { display: flex; flex-direction: column; gap: 4px; flex: 1; min-height: var(--alvo-toque, 48px); padding: 12px 16px; border: 1px solid var(--cad-contorno, #8A938A); border-radius: var(--r-s); background: var(--superficie); cursor: pointer; transition: border-color .15s, background .15s; }
.mp-opcao:hover { border-color: var(--tinta-2); }
.mp-radio:checked + .mp-opcao { border: 2px solid var(--verde); padding: 11px 15px; background: var(--verde-claro); }
.mp-radio:focus-visible + .mp-opcao { outline: 3px solid var(--verde); outline-offset: 2px; }
.mp-opcao.bloqueada { background: var(--superficie-2); }   /* sem tracejado: borda tracejada lê como "solte aqui" */
.mp-radio:checked + .mp-opcao.bloqueada { border: 2px solid var(--aviso); padding: 11px 15px; background: var(--superficie-2); }
.mp-opcao-topo { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.mp-opcao-nome { font: 600 var(--t-title-m)/24px var(--ui); color: var(--tinta); }
.mp-opcao-ha { font: 400 var(--t-body-m)/20px var(--ui); color: var(--tinta-2); }
.mp-opcao-linha { font: 500 var(--t-body-m)/20px var(--ui); color: var(--tinta); }
.mp-opcao-linha.alerta { color: var(--aviso); }
.mp-chip { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border: 0; border-radius: var(--r-xs); font: 600 12px/16px var(--ui); background: var(--cinza-claro); color: var(--tinta-2); }   /* etiqueta, a mesma do aviso e da forma de pagamento */
.mp-chip.atual { background: var(--verde-claro); color: var(--cad-sobre-selecionado, #0F3D26); }
.mp-radio:checked + .mp-opcao .mp-chip { background: var(--superficie); }

/* o resumo da escolha: os fatos (paga hoje, vale a partir de, próxima cobrança) e a frase do servidor */
.mp-resumo { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--linha); }
.mp-dica { margin-top: 16px; }
.mp-fatos { display: grid; gap: 4px; margin: 0 0 12px; }
.mp-fato { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; font: 400 var(--t-body-m)/20px var(--ui); }
.mp-fato dt { color: var(--tinta-2); }
.mp-fato dd { margin: 0; font-weight: 600; color: var(--tinta); }

/* celular: o diálogo vira folha de baixo (como o painel) e os botões ocupam a linha toda */
@media (max-width: 560px) {
  .mp-segmentado { display: flex; }
  .mp-seg { flex: 1; min-width: 0; }
  .mp-pe .cad-botao, .mp-acoes .cad-botao { flex: 1 1 100%; }
}