/* Cívica · Meus Dados. Escopo exclusivo: não reutilizar como casca global. */
:root {
  --md-civica-ink: #18283b;
  --md-civica-muted: #556273;
  --md-civica-brand: #1a3a7c;
  --md-civica-line: #d5dce5;
  --md-civica-focus: #135fba;
}

html[data-tema="escuro"] {
  --md-civica-ink: #f2f5fa;
  --md-civica-muted: #b9c5d3;
  --md-civica-line: #36506f;
  --md-civica-focus: #8fbdf5;
}

body { font-family: "Segoe UI", Arial, sans-serif; }
.topo-in, .faixa-in, #md-pagina { max-width: 1280px; }
#md-pagina { border-radius: 8px; border-color: var(--md-civica-line); box-shadow: 0 2px 4px rgba(25,41,67,.04); }
.md-topo { background: var(--md-civica-brand); padding: 30px 4%; }
.md-topo h1, .card-tit { font-family: "Segoe UI", Arial, sans-serif; }
.md-topo h1 { font-weight: 700; letter-spacing: -.6px; }
.md-abas { border-color: var(--md-civica-line); gap: 20px; width: 100%; }
.md-aba { flex: 0 0 auto; font-size: 13px; color: var(--md-civica-muted); white-space: nowrap; }
.md-corpo { max-width: 980px; }
.card { border-color: var(--md-civica-line); border-radius: 8px; box-shadow: 0 2px 4px rgba(25,41,67,.03); }
.card-tit { font-size: 16px; font-weight: 700; }
.card-desc, .md-dica { color: var(--md-civica-muted); }
.md-rot, .md-val.vazio, .doc-tx small { color: var(--md-civica-muted); }
.marca-nome small { color: var(--md-civica-muted); }
.md-nota a { text-decoration: underline; text-underline-offset: 2px; }
.md-btn, .hdr-acao, #btn-tema, .md-reconferir, .t-x, .menu-item, .md-aba, #hdr-conta {
  min-width: 44px;
  min-height: 44px;
}
/* Links também são controles acionáveis: não deixar o alvo depender só do texto. */
a[href] { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; }
.marca, .nav-link, .md-migalha a, .faixa-in a { min-height: 44px; }
.md-btn { justify-content: center; border-radius: 8px; line-height: 1.35; }
/* Não herdar botão transparente: os estados normais também precisam passar
   contraste medido, inclusive no fundo claro do formulário. */
.md-btn.sec { background: #1a3a7c; border-color: #1a3a7c; color: #fff; }
.md-btn.perigo { background: #9c3d2b; border-color: #9c3d2b; color: #fff; }
.md-btn:hover:not([disabled]), .md-btn:active:not([disabled]) { background: #102b63; border-color: #102b63; color: #fff; }
.md-btn.sec:hover:not([disabled]), .md-btn.sec:active:not([disabled]) { background: #102b63; border-color: #102b63; color: #fff; }
.md-btn.claro:hover:not([disabled]), .md-btn.claro:active:not([disabled]) { background: #d9ab00; border-color: #d9ab00; color: #0f1b2d; }
.md-btn.perigo:hover:not([disabled]), .md-btn.perigo:active:not([disabled]) { background: #8f3825; border-color: #8f3825; color: #fff; }
.hdr-acao:hover, #btn-tema:hover, #hdr-conta:hover { border-color: var(--md-civica-brand); background: var(--chipm-bg); color: var(--md-civica-brand); }
.md-aba:hover, .md-aba:active { color: var(--md-civica-brand); }
.menu-item:hover { color: var(--md-civica-brand); }

/* O contraste se mede no estilo computado; não depender de cascata anterior. */
button:focus-visible, a:focus-visible, input:focus-visible, [role="button"]:focus-visible {
  outline: 3px solid var(--md-civica-focus) !important;
  outline-offset: 3px;
  position: relative;
  z-index: 3;
}
button:disabled, .md-btn[disabled] { opacity: 1; color: #fff; }
.md-btn[disabled], .md-btn.sec[disabled], .md-btn.perigo[disabled] { background: #536c9c; border-color: #536c9c; color: #fff; }
/* Medição explícita dos dois controles que regressaram no tema escuro. */
#btn-sair-todos.md-btn.sec:hover:not([disabled]), #btn-sair-todos.md-btn.sec:active:not([disabled]) { background:#102b63; border-color:#102b63; color:#fff; }
#lgpd-btn-excluir.md-btn.perigo:hover:not([disabled]), #lgpd-btn-excluir.md-btn.perigo:active:not([disabled]) { background:#8f3825; border-color:#8f3825; color:#fff; }
#pj-representante-edicao input { min-height: 44px; box-sizing: border-box; }

.md-modulo-estado { margin-top: 14px; }
.md-modulo-estado .md-btn { margin-top: 10px; }
.md-loading { display: flex; align-items: center; gap: 10px; min-height: 62px; color: var(--md-civica-muted); }
.md-loading::before { content: ""; width: 18px; height: 18px; border: 2px solid var(--md-civica-line); border-top-color: var(--md-civica-brand); border-radius: 50%; animation: girar 1s linear infinite; flex: 0 0 auto; }

@media (max-width: 640px) {
  .md-topo { padding: 22px 4%; }
  .card { padding: 18px 16px; }
  .md-abas { gap: 12px; padding-inline: 4%; scroll-snap-type: x proximity; }
  .md-aba { flex: 0 0 auto; scroll-snap-align: start; }
  .md-corpo { padding-inline: 4%; }
}

/* Safari/iOS amplia inputs abaixo de 16px ao focá-los; isso deslocava as abas. */
@media (max-width: 700px) {
  .md-campo input, #pj-representante-edicao input { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}