/* Conta, assinatura e Radar — só tokens do sistema (tokens.css); nada de cor solta além das do Google */

/* ── campos ── */
.campo { display: grid; gap: var(--s-1); }
.campo > span { font-size: var(--t-13); color: var(--txt-2); }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: 48px; padding: 0 var(--s-4); border-radius: var(--r); border: 1px solid var(--sep); background: var(--sup); font-size: var(--t-17);
}
.campo textarea { padding: var(--s-3) var(--s-4); font: 500 var(--t-13)/1.4 ui-monospace, 'SF Mono', Menlo, monospace; resize: none; word-break: break-all; }
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible { outline: none; border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-soft); }
.campo-codigo { font: 700 var(--t-28) var(--f-display) !important; letter-spacing: .35em; text-align: center; font-variant-numeric: tabular-nums; }
.linha-campos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.linha-campos .campo-uf { max-width: 140px; }
.linha-campos:has(.campo-uf:first-child) { grid-template-columns: 110px 1fr; }
.linha-campos:has(.campo-uf:last-child) { grid-template-columns: 1fr 130px; }
.linha-bts { display: flex; justify-content: space-between; gap: var(--s-2); }

/* ── entrar ── */
.bt-google { background: #FFFFFF; color: #1F1F1F; border: 1px solid #747775; gap: var(--s-3); }
[data-modo="escuro"] .bt-google { background: #131314; color: #E3E3E3; border-color: #8E918F; }
.ou { display: flex; align-items: center; gap: var(--s-3); color: var(--txt-3); font-size: var(--t-13); }
.ou::before, .ou::after { content: ""; flex: 1; height: 1px; background: var(--sep); }
.entrar-erro { color: var(--erro); font-size: var(--t-15); font-weight: 500; }
.aceite { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--t-15); line-height: 1.4; }
.aceite input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--acc); flex: none; }
.aceite a, .bloco a:not(.bt):not(.item), .folha a:not(.bt) { color: var(--acc); text-decoration: underline; text-underline-offset: 2px; }

/* ── assinar ── */
.inclui { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.inclui li { display: flex; gap: var(--s-2); align-items: flex-start; font-size: var(--t-15); line-height: 1.4; }
.inclui .ic { color: var(--ok); flex: none; margin-top: 1px; }
.planos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.plano { display: grid; gap: 2px; justify-items: start; text-align: left; padding: var(--s-4); border-radius: var(--r); background: var(--sup); border: 2px solid var(--sep); transition: border-color var(--d-toque), background var(--d-toque); }
.plano b { font-weight: 600; }
.plano .n { font-size: var(--t-22); }
.plano[aria-checked="true"] { border-color: var(--acc); background: var(--acc-soft); }
.pix { text-align: center; }
.pix-qr { width: min(240px, 70vw); height: auto; aspect-ratio: 1; margin: 0 auto; display: block; background: #FFFFFF; padding: var(--s-2); border-radius: var(--r); image-rendering: pixelated; }
.pix .campo { text-align: left; }
.conta-pag summary, .conta-apagar summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--txt-2); }
.conta-apagar summary { color: var(--erro); }
.bt-perigo { background: var(--erro); color: var(--bg); }   /* var(--bg): contraste AA nos dois modos */

/* ── selos de situação ── */
.selo.ok { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.selo.aten { background: color-mix(in srgb, var(--aten) 14%, transparent); color: var(--aten); }

/* ── Radar ── */
.radar-lista { display: grid; gap: var(--s-2); }
.radar-card { display: grid; gap: var(--s-1); text-align: left; padding: var(--s-4); border-radius: var(--r); background: var(--sup); transition: transform var(--d-toque) var(--mola); }
.radar-card:active { transform: scale(.985); }
.radar-card-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-2); }
.radar-card-topo b { font-size: var(--t-17); font-weight: 600; line-height: 1.25; }
.radar-card-pe { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); margin-top: var(--s-1); }
.radar-card-pe > span { display: inline-flex; align-items: center; gap: 4px; }
.radar-card-pe .urgente { color: var(--erro); font-weight: 600; }
.radar-fatos { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--sep); border-radius: var(--r); overflow: hidden; }
.radar-fatos > div { display: grid; gap: 2px; padding: var(--s-3) var(--s-4); background: var(--sup); }
.radar-fatos b { font-family: var(--f-display); font-size: var(--t-17); font-variant-numeric: tabular-nums; }
.radar-cargos { display: grid; gap: var(--s-2); }
.radar-cargo { display: grid; gap: var(--s-2); padding: var(--s-4); border-radius: var(--r); background: var(--sup); border-left: 4px solid var(--sep); }
.radar-cargo[data-status="combina"] { border-left-color: var(--ok); }
.radar-cargo[data-status="confira"] { border-left-color: var(--aten); }
.radar-cargo[data-status="nao"] { opacity: .78; }
.radar-cargo-cab { display: flex; justify-content: space-between; gap: var(--s-2); align-items: flex-start; }
.radar-cargo-cab b { font-weight: 600; }
.porques { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.porques li { display: flex; gap: var(--s-2); align-items: flex-start; font-size: var(--t-15); line-height: 1.35; }
.porques .ic { flex: none; margin-top: 2px; }
.porques .ok .ic { color: var(--ok); }
.porques .aten .ic { color: var(--aten); }
.porques .nao .ic { color: var(--erro); }
#radar-perfil-corpo > * + * { margin-top: var(--s-6); }

@media (max-width: 360px) {
  .planos, .radar-fatos { grid-template-columns: 1fr; }
  .linha-campos, .linha-campos:has(.campo-uf:first-child), .linha-campos:has(.campo-uf:last-child) { grid-template-columns: 1fr; }
  .linha-campos .campo-uf { max-width: none; }
}

/* telas montadas por JS: mesmo ritmo vertical das telas fixas */
#conta-corpo > * + *, #assinar-corpo > * + *, #radar-corpo > * + *, #radar-det-corpo > * + * { margin-top: var(--s-6); }
.selo.quebra { white-space: normal; min-height: 0; padding: 6px 12px; line-height: 1.35; border-radius: var(--r-s); }