/* assets/css/modais.css
   Sobreposições: diálogo modal (modal dialog), folha (sheet) e véu (scrim).
   O véu desfoca o fundo; a folha é vidro sobre ele. */

.modal-bg{display:none;position:fixed;inset:0;z-index:500;align-items:center;justify-content:center;padding:16px;
  background:rgba(5,8,14,.45);-webkit-backdrop-filter:blur(10px) saturate(120%);backdrop-filter:blur(10px) saturate(120%)}
.modal-bg.open{display:flex}
.modal,.finance-dialog,.folha{
  width:min(560px,calc(100vw - 32px));max-height:min(88vh,920px);overflow:auto;
  padding:26px;border-radius:var(--r);color:var(--texto);
  background:var(--vidro-forte);
  -webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);
  border:1px solid var(--vidro-borda);
  box-shadow:inset 0 1px 0 var(--vidro-brilho),var(--sombra-folha);
  animation:surgir var(--medio) var(--curva);
}
.finance-dialog,.folha{margin:auto;width:min(760px,calc(100vw - 32px))}
.folha{width:min(620px,calc(100vw - 32px))}
.modal h3,.finance-dialog h3{font-size:var(--t-titulo-3);margin-bottom:18px}
.modal-footer,.folha-rodape{display:flex;gap:10px;justify-content:flex-end;margin-top:22px}
.finance-dialog::backdrop,.folha::backdrop{background:rgba(5,8,14,.45);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
@keyframes surgir{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.folha-topo{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.folha-topo h2{font-size:var(--t-titulo-2)}
.folha-erro{color:var(--vermelho);font-size:14px;min-height:1.2em}
.campos-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px}
.celula-editor-popup{border-radius:var(--r)!important;box-shadow:var(--sombra-flutuante)!important;border:1px solid var(--borda-forte)!important;background:var(--vidro-forte)!important;-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}

/* ── Guia (onboarding) ─────────────────────────────────────────────────── */
.guia-scrim{position:fixed;inset:0;z-index:800;display:grid;place-items:center;padding:16px;
  background:rgba(5,8,14,.42);-webkit-backdrop-filter:blur(12px) saturate(120%);backdrop-filter:blur(12px) saturate(120%);
  opacity:0;transition:opacity var(--medio) var(--curva)}
.guia-scrim.visivel{opacity:1}
.guia-folha{width:min(720px,100%);max-height:min(90vh,820px);overflow:auto;padding:24px 26px;background:var(--vidro-forte);
  transform:translateY(16px) scale(.98);transition:transform var(--medio) var(--curva)}
.guia-scrim.visivel .guia-folha{transform:none}
.guia-topo{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px}
.guia-topo h2{font-size:var(--t-titulo-2)}
.guia-topo p{color:var(--texto-2);margin-top:4px}
.guia-corpo{min-height:300px;display:flex;flex-direction:column}
.guia-card{flex:1;display:grid;justify-items:center;align-content:center;text-align:center;gap:12px;padding:24px 12px 12px}
.guia-card h3{font-size:var(--t-titulo-2)}
.guia-card p{max-width:52ch;color:var(--texto-2);font-size:16px;line-height:1.55}
.guia-icone{display:grid;place-items:center;width:58px;height:58px;border-radius:var(--r);flex:none;color:var(--bronze-texto);
  background:radial-gradient(circle at 30% 20%,var(--reflexo),transparent 60%),var(--bronze-suave);border:1px solid var(--bronze-borda)}
.guia-onde{display:inline-flex!important;align-items:center;gap:8px;padding:6px 12px;border-radius:var(--r);background:var(--papel-2);
  font-size:13px!important;color:var(--texto-2)!important;border:1px solid var(--borda)}
.guia-rodape{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px;padding-top:16px;border-top:1px solid var(--borda)}
.guia-rodape>div{display:flex;gap:8px}
.guia-contador{font-size:13px;color:var(--texto-3)}
.guia-mapa{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.guia-area{display:flex;align-items:flex-start;gap:12px;padding:14px;border-radius:var(--r);background:var(--papel);border:1px solid var(--borda)}
.guia-area .guia-icone{width:40px;height:40px}
.guia-area>div{flex:1;min-width:0}
.guia-area h3{font-size:15px;margin-bottom:2px}
.guia-area p{font-size:13px;color:var(--texto-2);line-height:1.45}
.guia-area small{display:block;margin-top:4px;font-size:12px;color:var(--texto-3)}
.guia-area .botao{align-self:center}
body.com-folha{overflow:hidden}