/* Visão do Campo — "Meus dados" (meus-dados.js). A casca é a do painel da assinatura (`.ass-fundo`, `.ass-painel`,
   cadastro.css) e os campos são os do cadastro (`.cad-entrada`, `.cad-chip`): uma tela de conta só, com a mesma
   cara. Aqui só o que é desta tela, em `md-*`, com os tokens de estilo.css (grade de 8, --alvo, --t-*).

   ERRO DE CAMPO À MODA DO M3: o contorno do campo fica da cor de erro (`.cad-entrada[aria-invalid]`, cadastro.css)
   e o TEXTO DE APOIO embaixo vira a frase do erro, na cor de erro, com o ícone. Sem caixa, sem fundo colorido. */

.md-painel { width: min(640px, 100%); }
.md-cab { position: sticky; top: 0; z-index: 2; background: var(--superficie); border-bottom: 1px solid var(--linha); padding-bottom: 8px; }
.md-corpo { padding: 8px 24px 24px; }
.md-intro { margin: 8px 0 8px; font: 400 var(--t-body-m)/20px var(--ui); color: var(--tinta-2); max-width: 60ch; }

.md-secao { padding: 24px 0; border-bottom: 1px solid var(--linha); }
.md-secao:last-child { border-bottom: 0; padding-bottom: 8px; }
.md-subtitulo { margin: 0 0 16px; font: 600 var(--t-title-m)/24px var(--ui); color: var(--tinta); }
.md-form { display: flex; flex-direction: column; gap: 16px; }
.md-campo { gap: 4px; }
.md-grupo { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.md-grupo > legend { margin-bottom: 8px; }
.md-chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* o texto de apoio: cinza; no erro, a cor de erro e o ícone — o mesmo lugar, outra frase */
.md-apoio { display: flex; align-items: flex-start; gap: 8px; margin: 0; min-height: 20px; font: 400 var(--t-body-s)/16px var(--ui); color: var(--tinta-2); }
.md-apoio:empty { min-height: 0; }
.md-apoio svg { flex: none; margin-top: 0; }
.md-apoio-erro { color: var(--erro); }
.md-bloco { display: block; margin: 0 0 16px; font-size: var(--t-body-m); line-height: 20px; }
.md-texto { margin: 16px 0; max-width: 60ch; font: 400 var(--t-body-m)/20px var(--ui); color: var(--tinta-2); }

.md-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.md-acoes-quebra { margin-bottom: 8px; }
.md-botao-icone { gap: 8px; }

/* a linha de estado ao lado do botão: texto e ícone, nunca caixa */
.md-estado { display: inline-flex; align-items: center; gap: 8px; margin: 0; min-height: 20px; font: 500 var(--t-body-m)/20px var(--ui); color: var(--tinta-2); }
.md-estado:empty { display: none; }
.md-estado svg { flex: none; }
.md-ok { color: var(--verde); }
.md-falha { color: var(--erro); }

.md-lista { margin: 0 0 16px; border-top: 1px solid var(--linha); }
.md-linha { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px; min-height: 48px; padding: 8px 0; border-bottom: 1px solid var(--linha); }
.md-linha dt { font: 400 var(--t-body-m)/20px var(--ui); color: var(--tinta-2); }
.md-linha dd { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; justify-content: flex-end; font: 500 var(--t-body-m)/20px var(--ui); text-align: right; min-width: 0; }
.md-valor { overflow-wrap: anywhere; }
.md-pilula { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border-radius: var(--r-xs); font: 600 var(--t-label-s)/16px var(--ui); }
.md-pilula.ok { background: var(--verde-claro); color: var(--cad-sobre-selecionado, #0F3D26); }
.md-pilula.aviso { background: var(--aviso-claro); color: var(--aviso); }

/* a troca de e-mail pendente: uma nota com ícone, sem fundo de alerta (é informação, não erro) */
.md-nota { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 16px; padding: 12px 0; font: 400 var(--t-body-m)/20px var(--ui); color: var(--tinta); }
.md-nota > svg { flex: none; color: var(--azul, #2C5F8A); }
.md-nota p { margin: 0 0 8px; }

.md-esqueleto { padding: 24px 0; }

@media (max-width: 600px) {
  /* no celular a tela inteira: um diálogo flutuando com 16 px de borda sobra pouco para os campos */
  .md-fundo { padding: 0; align-items: stretch; }
  .md-painel { width: 100%; max-height: 100dvh; height: 100dvh; border-radius: 0; }
  .md-corpo { padding: 8px 16px 32px; }
  .md-cab { padding-left: 16px; }
  .md-chips { display: grid; grid-template-columns: 1fr 1fr; }
  .md-chips .cad-chip { width: 100%; justify-content: center; padding: 0 12px; }
  .md-acoes > .cad-botao { flex: 1 1 100%; }
  .md-linha { align-items: flex-start; flex-direction: column; }
  .md-linha dd { justify-content: flex-start; text-align: left; }
}