/* =====================================================================
   Desgasto — tema e shell (baseado no design "desgasto" / Claude Design).
   Tokens --mg-*: cor primária = verde do logo (claro #0f9f6e, escuro #34d39e); escuro = sistema Nocturne.
   O tema vem de data-mg-theme no <html> (script do cabeçalho: escolha salva ou a do sistema).
   Layout automático pela largura: < 900px = mobile (abas embaixo + folha "Incluir gastos");
   ≥ 900px = desktop (barra lateral).
   ===================================================================== */

:root {
  --mg-s1: 4px; --mg-s2: 8px; --mg-s3: 12px; --mg-s4: 16px; --mg-s5: 20px; --mg-s6: 24px; --mg-s8: 32px;
  --mg-r-sm: 4px; --mg-r-md: 8px; --mg-r-lg: 14px; --mg-r-sheet: 20px; --mg-r-pill: 999px;
  --mg-fs-xs: 12px; --mg-fs-sm: 13px; --mg-fs-md: 15px; --mg-fs-lg: 17px; --mg-fs-xl: 22px; --mg-fs-hero: 34px;
  --mg-touch: 44px;
  --mg-lateral: 248px;
}

/* ---------- Claro (padrão) ---------- */
:root, [data-mg-theme="light"] {
  color-scheme: light;
  --mg-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mg-bg: #f3f5f8; --mg-surface: #ffffff; --mg-surface-2: #eef1f5;
  --mg-text: #1b1f24; --mg-text-2: #4f5965; --mg-text-3: #636c76;
  --mg-border: #dde2e8; --mg-border-strong: #c3cad3;
  /* Verde do logo (#0f9f6e); nos botões e textos um tom mais escuro para contraste AA com branco */
  --mg-accent: #0f9f6e; --mg-accent-text: #0a7a53; --mg-accent-tint: #e3f5ed; --mg-accent-tint-2: #c3e9d8;
  --mg-primary-bg: #0b7d56; --mg-primary-fg: #ffffff; --mg-primary-border: #0b7d56; --mg-primary-hover: #086747;
  --mg-fab-bg: #0b7d56; --mg-fab-fg: #ffffff; --mg-fab-ring: 0 4px 14px rgba(15, 159, 110, .35);
  --mg-essencial: #2a78d6; --mg-interessante: #eb6834; --mg-superfluo: #1baf7a;
  --mg-ok-fg: #116329; --mg-ok-bg: #dafbe1;
  --mg-warn-fg: #7d4e00; --mg-warn-bg: #fff8c5;
  --mg-crit-fg: #a40e26; --mg-crit-bg: #ffebe9;
  --mg-info-fg: #0a5bb0; --mg-info-bg: #e4effb;
  --mg-neutral-fg: #4f5965; --mg-neutral-bg: #eef1f5;
  --mg-overlay: rgba(27, 31, 36, .45);
  --mg-shadow-sm: 0 0 0 1px #e3e7ec, 0 1px 2px rgba(27, 31, 36, .04);
  --mg-shadow-md: 0 0 0 1px #dde2e8, 0 6px 16px rgba(27, 31, 36, .08);
  --mg-shadow-lg: 0 0 0 1px #dde2e8, 0 16px 40px rgba(27, 31, 36, .16);
  --mg-previsto: repeating-linear-gradient(135deg, color-mix(in srgb, #0f9f6e 55%, transparent) 0 2px, transparent 2px 6px);
}

/* ---------- Escuro (Nocturne) ---------- */
[data-mg-theme="dark"] {
  color-scheme: dark;
  --mg-font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mg-bg: #161826; --mg-surface: #232532; --mg-surface-2: #2b2e3d;
  --mg-text: #e9e9ed; --mg-text-2: #b2b6ca; --mg-text-3: #9397ab;
  --mg-border: color-mix(in srgb, #e9e9ed 12%, transparent); --mg-border-strong: color-mix(in srgb, #e9e9ed 26%, transparent);
  /* Verde do logo no escuro (#34d39e) */
  --mg-accent: #34d39e; --mg-accent-text: #8eeac6; --mg-accent-tint: #173a2f; --mg-accent-tint-2: #1f5442;
  --mg-primary-bg: transparent; --mg-primary-fg: #8eeac6; --mg-primary-border: #34d39e;
  --mg-primary-hover: color-mix(in srgb, #34d39e 16%, transparent);
  --mg-fab-bg: #173a2f; --mg-fab-fg: #c9f5e3; --mg-fab-ring: 0 0 0 1px #34d39e, 0 0 22px color-mix(in srgb, #34d39e 40%, transparent);
  --mg-essencial: #6ea6ee; --mg-interessante: #f2895c; --mg-superfluo: #34c992;
  --mg-ok-fg: #7fdd9b; --mg-ok-bg: #14301f;
  --mg-warn-fg: #f0c75a; --mg-warn-bg: #352a0c;
  --mg-crit-fg: #ff9ba6; --mg-crit-bg: #3f1720;
  --mg-info-fg: #a9c8f5; --mg-info-bg: #1c2a40;
  --mg-neutral-fg: #cfd3e5; --mg-neutral-bg: #2b2e3d;
  --mg-overlay: rgba(8, 9, 16, .62);
  --mg-shadow-sm: 0 0 0 1px #2f3240;
  --mg-shadow-md: 0 0 0 1px #3f424d, 0 6px 18px rgba(0, 0, 0, .5);
  --mg-shadow-lg: 0 0 0 1px #595d6c, 0 16px 40px rgba(0, 0, 0, .6);
  --mg-previsto: repeating-linear-gradient(135deg, color-mix(in srgb, #34d39e 70%, transparent) 0 2px, transparent 2px 6px);
}

/* Variáveis antigas das páginas → tokens do design (as páginas continuam usando var(--cor), var(--borda)…) */
:root[data-mg-theme] {
  --cor: var(--mg-accent); --borda: var(--mg-border-strong); --fundo: var(--mg-bg); --suave: var(--mg-text-3);
  --pagina: var(--mg-bg); --surface: var(--mg-surface); --grade: var(--mg-border); --base: var(--mg-border-strong);
  --texto: var(--mg-text); --texto-2: var(--mg-text-2); --link: var(--mg-accent-text); --trilho: var(--mg-surface-2);
  --s-essencial: var(--mg-essencial); --s-interessante: var(--mg-interessante); --s-superfluo: var(--mg-superfluo); --seq: var(--mg-accent);
  --st-ok: var(--mg-ok-fg); --st-aviso: var(--mg-warn-fg); --st-aviso-fundo: var(--mg-warn-bg);
  --st-critico: var(--mg-crit-fg); --st-critico-fundo: var(--mg-crit-bg);
}

/* ---------- Base ---------- */
html[data-mg-theme] body { background: var(--mg-bg); color: var(--mg-text); font-family: var(--mg-font); -webkit-font-smoothing: antialiased; }
html[data-mg-theme] a { color: var(--mg-accent-text); }
html[data-mg-theme] a:hover { color: var(--mg-accent); }
html[data-mg-theme] :focus-visible { outline: 2px solid var(--mg-accent); outline-offset: 2px; }
html[data-mg-theme] ::selection { background: var(--mg-accent-tint-2); }
html[data-mg-theme] .card { background: var(--mg-surface); border: 0; border-radius: var(--mg-r-lg); box-shadow: var(--mg-shadow-sm); }
html[data-mg-theme] input, html[data-mg-theme] select, html[data-mg-theme] textarea {
  background: var(--mg-surface); color: var(--mg-text); border-color: var(--mg-border-strong); font-family: inherit; }
html[data-mg-theme] input:disabled, html[data-mg-theme] select:disabled { background: var(--mg-surface-2); color: var(--mg-text-3); }
html[data-mg-theme] button { font-family: inherit; }
html[data-mg-theme] th, html[data-mg-theme] td { border-bottom-color: var(--mg-border); }
html[data-mg-theme] .num, html[data-mg-theme] td.n { font-variant-numeric: tabular-nums; }
/* Botão principal: preenchido no claro, contorno no escuro (Nocturne) */
html[data-mg-theme="dark"] main button:not(.lnk):not(.sec):not(.recorrente):not(.renomear):not([class*="mg-"]):not(.modal-fechar) {
  background: var(--mg-primary-bg); color: var(--mg-primary-fg); border: 1px solid var(--mg-primary-border); }
html[data-mg-theme="dark"] main button:not(.lnk):not(.sec):not(.recorrente):not(.renomear):not([class*="mg-"]):not(.modal-fechar):hover {
  background: var(--mg-primary-hover); }
html[data-mg-theme] button.sec { background: transparent; color: var(--mg-accent-text); border: 1px solid var(--mg-border-strong); }
html[data-mg-theme] button.lnk { color: var(--mg-crit-fg); }
html[data-mg-theme] button:disabled { opacity: .45; cursor: not-allowed; }
/* Mensagens e etiquetas (as páginas usam estes nomes) */
html[data-mg-theme] .msg.ok, html[data-mg-theme] .ok:not(td):not(span) { background: var(--mg-ok-bg); color: var(--mg-ok-fg); }
html[data-mg-theme] .msg.erro, html[data-mg-theme] div.erro { background: var(--mg-crit-bg); color: var(--mg-crit-fg); }
html[data-mg-theme] .t-ok { background: var(--mg-ok-bg); color: var(--mg-ok-fg); }
html[data-mg-theme] .t-meio, html[data-mg-theme] .t-aviso { background: var(--mg-warn-bg); color: var(--mg-warn-fg); }
html[data-mg-theme] .t-erro, html[data-mg-theme] .t-critico { background: var(--mg-crit-bg); color: var(--mg-crit-fg); }
html[data-mg-theme] .t-cinza, html[data-mg-theme] .t-neutro { background: var(--mg-neutral-bg); color: var(--mg-neutral-fg); }
html[data-mg-theme] .t-azul { background: var(--mg-info-bg); color: var(--mg-info-fg); }
html[data-mg-theme] h1 { font-weight: 600; letter-spacing: -.01em; }

/* ---------- Ícones (Phosphor) ---------- */
.mg-ic { font-size: 20px; line-height: 1; flex: none; }

/* ---------- Shell: mobile (padrão) ---------- */
.mg-lateral { display: none; }
body:has(.mg-abas) { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
.mg-abas {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  height: calc(68px + env(safe-area-inset-bottom)); padding: 0 6px env(safe-area-inset-bottom);
  background: var(--mg-surface); box-shadow: 0 -1px 0 var(--mg-border);
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center;
}
.mg-aba {
  position: relative; height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-size: 11px; font-weight: 500; color: var(--mg-text-3) !important; text-decoration: none; border-radius: var(--mg-r-md);
}
.mg-aba .mg-ic { font-size: 24px; }
.mg-aba.atual { color: var(--mg-accent-text) !important; }
.mg-aba .mg-avatar { width: 26px; height: 26px; font-size: 11px; }
.mg-badge {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--mg-crit-bg); color: var(--mg-crit-fg);
  font-size: 11px; font-weight: 600; display: inline-grid; place-items: center; font-variant-numeric: tabular-nums; box-sizing: border-box;
}
.mg-aba .mg-badge { position: absolute; top: 4px; left: 50%; margin-left: 6px; }
button.mg-mais {
  width: 56px; height: 56px; margin: -20px auto 0; border-radius: 18px; border: 0;
  background: var(--mg-fab-bg); color: var(--mg-fab-fg); box-shadow: var(--mg-fab-ring);
  display: grid; place-items: center; font-size: 26px; cursor: pointer; padding: 0;
}
button.mg-mais:active { transform: scale(.96); }

/* Folha inferior "Incluir gastos" */
.mg-folha { position: fixed; inset: 0; z-index: 60; }
.mg-folha[hidden] { display: none; }
.mg-folha-fundo { position: absolute; inset: 0; background: var(--mg-overlay); }
.mg-folha-corpo {
  position: absolute; left: 0; right: 0; bottom: 0; max-height: 88%; overflow-y: auto;
  background: var(--mg-surface); color: var(--mg-text); border-radius: var(--mg-r-sheet) var(--mg-r-sheet) 0 0; box-shadow: var(--mg-shadow-lg);
  padding: 10px 16px calc(24px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 12px;
  animation: mgSobe .22s ease-out;
}
@keyframes mgSobe { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.mg-alca { align-self: center; width: 36px; height: 5px; border-radius: 3px; background: var(--mg-border-strong); }
.mg-folha-cab { display: flex; justify-content: space-between; align-items: center; }
.mg-folha-cab strong { font-size: 18px; font-weight: 600; }
button.mg-fechar { width: 44px; height: 44px; border: 0; background: transparent; color: var(--mg-text-2); font-size: 20px; cursor: pointer; margin-right: -10px; border-radius: var(--mg-r-md); }
a.mg-opcao-destaque {
  display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 12px 14px; border-radius: var(--mg-r-lg);
  border: 1px solid var(--mg-primary-border); background: var(--mg-accent-tint); color: var(--mg-text) !important; text-decoration: none;
}
a.mg-opcao-destaque .mg-ic { font-size: 30px; color: var(--mg-accent-text); }
.mg-opcao-textos { flex: 1; display: flex; flex-direction: column; }
.mg-opcao-textos strong { font-size: 16px; font-weight: 600; }
.mg-opcao-textos span { font-size: 13px; color: var(--mg-text-2); }
.mg-opcoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
a.mg-opcao {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-height: 88px; padding: 12px;
  border-radius: var(--mg-r-md); border: 1px solid var(--mg-border); background: var(--mg-bg); color: var(--mg-text) !important; text-decoration: none;
}
a.mg-opcao .mg-ic { font-size: 22px; color: var(--mg-text-2); }
a.mg-opcao strong { font-size: 14px; font-weight: 500; display: block; }
a.mg-opcao span { font-size: 12px; color: var(--mg-text-3); }
a.mg-opcao.atual, a.mg-opcao-destaque.atual { box-shadow: 0 0 0 2px var(--mg-accent); }
a.mg-linha {
  display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 12px; border-radius: var(--mg-r-md);
  color: var(--mg-text) !important; text-decoration: none; font-size: 15px;
}
a.mg-linha:hover { background: var(--mg-surface-2); }
a.mg-linha .mg-ic:first-child { color: var(--mg-text-2); }
a.mg-linha span { flex: 1; }
.mg-seta { color: var(--mg-text-3); }

/* Avatar (foto ou iniciais) */
.mg-avatar {
  width: 36px; height: 36px; border-radius: 50%; overflow: hidden; flex: none; display: grid; place-items: center;
  background: var(--mg-accent-tint-2); color: var(--mg-accent-text); font-size: 13px; font-weight: 600;
}
.mg-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Shell: desktop (≥ 900px) ---------- */
@media (min-width: 900px) {
  .mg-abas, .mg-folha { display: none !important; }
  body:has(.mg-abas) { padding-bottom: 0; padding-left: var(--mg-lateral); }
  .mg-lateral {
    display: flex; flex-direction: column; gap: 14px; position: fixed; top: 0; left: 0; bottom: 0; width: var(--mg-lateral); z-index: 50;
    padding: 18px 14px 14px; background: var(--mg-surface); box-shadow: 1px 0 0 var(--mg-border); overflow-y: auto;
  }
}
/* Marca Desgasto: ícone "D" + nome em duas cores (como o logotipo) */
:root, [data-mg-theme="light"] { --mg-logo-des: #0f2f2c; --mg-logo-gasto: #0f9f6e; }
[data-mg-theme="dark"] { --mg-logo-des: #e9e9ed; --mg-logo-gasto: #34d39e; }
.mg-marca { display: flex; align-items: center; gap: 10px; padding: 2px 6px 6px; text-decoration: none; }
.mg-logo-icone { display: block; flex: none; object-fit: contain; }
.mg-logo-nome { font-family: "Poppins", var(--mg-font); font-weight: 700; letter-spacing: -.02em; line-height: 1; color: var(--mg-logo-des); }
.mg-logo-nome span { color: var(--mg-logo-gasto); }
.mg-marca-acesso { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 0 24px; }
.mg-incluir { position: relative; }
.mg-incluir > summary {
  list-style: none; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; border-radius: var(--mg-r-md);
  border: 1px solid var(--mg-primary-border); background: var(--mg-primary-bg); color: var(--mg-primary-fg); font-size: 15px; font-weight: 500; cursor: pointer;
}
.mg-incluir > summary::-webkit-details-marker { display: none; }
.mg-incluir > summary:hover { background: var(--mg-primary-hover); }
.mg-incluir[open] > summary .ph-caret-down { transform: rotate(180deg); }
.mg-incluir-menu {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 5; padding: 6px; border-radius: var(--mg-r-lg);
  background: var(--mg-surface); box-shadow: var(--mg-shadow-lg); display: flex; flex-direction: column;
}
.mg-incluir-menu a, .mg-nav a {
  display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 10px; border-radius: var(--mg-r-md);
  color: var(--mg-text-2) !important; text-decoration: none; font-size: 15px;
}
.mg-incluir-menu a:hover, .mg-nav a:hover { background: var(--mg-surface-2); color: var(--mg-text) !important; }
.mg-incluir-menu hr { border: 0; border-top: 1px solid var(--mg-border); margin: 4px 6px; width: auto; }
.mg-nav { display: flex; flex-direction: column; gap: 2px; }
.mg-nav a.atual { background: var(--mg-accent-tint); color: var(--mg-text) !important; }
.mg-nav a.atual .mg-ic { color: var(--mg-accent-text); }
.mg-nav a .mg-badge { margin-left: auto; }
.mg-nav .mg-sub { padding-left: 32px; font-size: 14px; min-height: 34px; }
.mg-usuario { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 10px 6px 0; border-top: 1px solid var(--mg-border); }
.mg-usuario a.mg-quem { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; color: var(--mg-text) !important; text-decoration: none; }
.mg-quem-textos { min-width: 0; display: flex; flex-direction: column; }
.mg-quem-textos strong { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-quem-textos span { font-size: 12px; color: var(--mg-text-3); }
button.mg-icone {
  width: 36px; height: 36px; border-radius: var(--mg-r-md); border: 1px solid var(--mg-border); background: transparent;
  color: var(--mg-text-2); display: grid; place-items: center; cursor: pointer; font-size: 18px; padding: 0; flex: none;
}
button.mg-icone:hover { background: var(--mg-surface-2); color: var(--mg-text); }
.mg-usuario form { margin: 0; }

/* Ícone do tema: sol no escuro, lua no claro */
[data-mg-theme="dark"] .mg-so-claro, [data-mg-theme="light"] .mg-so-escuro { display: none; }

/* ---------- Componentes comuns das páginas novas ---------- */
.mg-titulo { font-size: 13px; font-weight: 500; color: var(--mg-text-2); margin: 0 0 8px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.mg-titulo span { font-weight: 400; font-size: 12px; color: var(--mg-text-3); }
.mg-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--mg-r-pill); font-size: 12px; font-weight: 500; white-space: nowrap; }
.mg-tag.ok { background: var(--mg-ok-bg); color: var(--mg-ok-fg); }
.mg-tag.aviso { background: var(--mg-warn-bg); color: var(--mg-warn-fg); }
.mg-tag.critico { background: var(--mg-crit-bg); color: var(--mg-crit-fg); }
.mg-tag.neutro { background: var(--mg-neutral-bg); color: var(--mg-neutral-fg); }
.mg-tag.info { background: var(--mg-info-bg); color: var(--mg-info-fg); }

/* Só no celular / só no computador (mesmo critério do shell) */
@media (min-width: 900px) { .so-celular { display: none !important; } }
@media (max-width: 899px) { .so-desktop { display: none !important; } }

/* Diálogo de confirmação / aviso (mgConfirmar, mgAviso): cartão no computador, folha inferior no celular */
dialog.mg-dialogo { border: 0; padding: 0; background: transparent; color: var(--mg-text); max-width: none; max-height: none; overflow: visible; }
dialog.mg-dialogo::backdrop { background: var(--mg-overlay); }
.mg-dlg-corpo { background: var(--mg-surface); color: var(--mg-text); box-shadow: var(--mg-shadow-lg); padding: 20px; display: flex; flex-direction: column; gap: 12px; margin: 0; }
.mg-dlg-cab { display: flex; align-items: center; gap: 12px; }
.mg-dlg-cab strong { font-size: 18px; font-weight: 600; line-height: 1.3; }
.mg-dlg-icone { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; font-size: 22px;
                background: var(--mg-accent-tint); color: var(--mg-accent-text); }
.mg-dlg-icone.perigo { background: var(--mg-crit-bg); color: var(--mg-crit-fg); }
.mg-dlg-texto { font-size: 15px; line-height: 1.5; color: var(--mg-text-2); }
.mg-dlg-texto p { margin: 0 0 8px; }
.mg-dlg-texto p:last-child { margin: 0; }
.mg-dlg-acoes { display: flex; gap: 10px; justify-content: flex-end; margin-top: 6px; }
.mg-dialogo .mg-dlg-btn { min-height: 44px; padding: 0 18px; border-radius: var(--mg-r-md); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; margin: 0; }
.mg-dialogo .mg-dlg-btn.sec { background: transparent; color: var(--mg-text); border: 1px solid var(--mg-border-strong); }
.mg-dialogo .mg-dlg-btn.prim { background: var(--mg-primary-bg); color: var(--mg-primary-fg); border: 1px solid var(--mg-primary-border); }
.mg-dialogo .mg-dlg-btn.prim:hover { background: var(--mg-primary-hover); }
.mg-dialogo .mg-dlg-btn.perigo { background: var(--mg-crit-fg); color: var(--mg-surface); border: 1px solid var(--mg-crit-fg); }
.mg-dialogo .mg-dlg-btn:focus-visible { outline: 2px solid var(--mg-accent); outline-offset: 2px; }
@media (min-width: 900px) {
  dialog.mg-dialogo { width: min(460px, calc(100vw - 32px)); }
  .mg-dlg-corpo { border-radius: var(--mg-r-lg); padding: 24px; }
}
@media (max-width: 899px) {
  dialog.mg-dialogo { width: 100%; margin: auto 0 0; }
  .mg-dlg-corpo { border-radius: var(--mg-r-sheet) var(--mg-r-sheet) 0 0; padding: 20px 16px calc(16px + env(safe-area-inset-bottom)); }
  .mg-dlg-acoes { flex-direction: column-reverse; }
  .mg-dialogo .mg-dlg-btn { width: 100%; min-height: 48px; }
  dialog.mg-dialogo[open] .mg-dlg-corpo { animation: mg-sobe .18s ease-out; }
}
@keyframes mg-sobe { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }

/* Carregando: bloqueia cliques assim que a ação começa; o indicador aparece depois de 150 ms */
.mg-carregando { position: fixed; inset: 0; z-index: 1000; display: none; place-items: center; background: transparent; cursor: progress; }
.mg-carregando.ativo { display: grid; }
.mg-carregando.visivel { background: var(--mg-overlay); transition: background .15s; }
.mg-carregando-caixa { display: none; align-items: center; gap: 12px; padding: 14px 20px; border-radius: var(--mg-r-lg);
                       background: var(--mg-surface); color: var(--mg-text); box-shadow: var(--mg-shadow-lg); font-size: 15px; font-weight: 500; }
.mg-carregando.visivel .mg-carregando-caixa { display: flex; }
.mg-giro { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--mg-accent-tint-2); border-top-color: var(--mg-accent); animation: mg-gira .7s linear infinite; }
@keyframes mg-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mg-giro { animation-duration: 2s; } dialog.mg-dialogo[open] .mg-dlg-corpo { animation: none; } }