/*
 * TELA DO MAPA ASTRAL
 *
 * Só o que é desta página. Cor, fonte e forma vêm de `../comum/base.css` —
 * se algum valor visual aparecer aqui, ele saiu do sistema e a próxima
 * ferramenta vai divergir.
 */

/* ── Cabeçalho ─────────────────────────────────────────────────────────── */
.topo { border-bottom: 1px solid var(--cor-borda); background: #fff;
  position: sticky; top: 0; z-index: 30; }
.topo .envolucro { display: flex; align-items: center; gap: 2rem; height: 4.6rem; }
.marca { font-family: var(--fonte-titulo); font-weight: 800; font-size: 1.15rem;
  text-decoration: none; }
.marca i { color: var(--cor-foco); font-style: normal; }
/* ── O catálogo no topo ───────────────────────────────────────────────
   Sete itens não cabem numa barra de celular, e cortá-los esconderia
   metade da loja. Em tela estreita a barra rola na horizontal e o
   seletor do formulário reaparece como controle alternativo. */
.topo nav { display: flex; gap: 1.1rem; font-size: .88rem; font-weight: 600;
            overflow-x: auto; scrollbar-width: none; }
.topo nav::-webkit-scrollbar { display: none; }
.topo nav a { text-decoration: none; white-space: nowrap; padding: .3rem 0;
              border-bottom: 2px solid transparent; }
.topo nav a.on { color: var(--cor-foco); border-bottom-color: var(--cor-foco); }
.topo nav a.depois { color: #b9b9b9; cursor: default; }

/* Em tela larga o menu já é o catálogo: o seletor vira redundância. */
@media (min-width: 900px) { #campo-produto { display: none; } }
.sair { margin-left: auto; padding: .5rem 1rem; font-size: .82rem; }

/* ── Porta de entrada ──────────────────────────────────────────────────── */
.portao { padding: var(--espaco-grid) 0; }
.estreito { max-width: 30rem; }
.portao .nota { color: var(--cor-texto-suave); font-size: .92rem; margin-top: .6rem; }

/* ── Abertura ──────────────────────────────────────────────────────────── */
.abertura { padding: var(--espaco-grid) 0 2rem; }
.abertura p { color: var(--cor-texto-suave); max-width: 44rem; margin-top: .8rem; }

/* ── Formulário ────────────────────────────────────────────────────────── */
.grade-form { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.grade-form .cidade { grid-column: span 4; }
@media (max-width: 900px) {
  .grade-form { grid-template-columns: 1fr 1fr; }
  .grade-form .cidade { grid-column: span 2; }
}
@media (max-width: 560px) { .grade-form { grid-template-columns: 1fr; }
  .grade-form .cidade { grid-column: span 1; } }

/* ── Conferência técnica ───────────────────────────────────────────────── */
.conf { background: var(--cor-creme); border: 1px solid var(--cor-creme-borda);
  border-radius: var(--raio); padding: 1.4rem 1.6rem; margin-top: var(--gap-grid); }
.conf-linhas { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem 2rem;
  margin-top: .7rem; }
.conf-linhas div { display: flex; justify-content: space-between; gap: 1rem;
  font-size: .88rem; padding: .32rem 0; border-bottom: 1px solid var(--cor-creme-borda); }
.conf-linhas span { color: var(--cor-texto-suave); }
.conf-linhas b { font-weight: 600; text-align: right; }
.conf .alerta { margin-top: .9rem; font-size: .86rem; line-height: 1.55;
  border-left: 3px solid var(--cor-foco); padding-left: .8rem; color: #5a4a20; }
@media (max-width: 720px) { .conf-linhas { grid-template-columns: 1fr; } }

/* Pergunta do horário ambíguo — o motor não escolhe, a tela também não. */
.opcoes { display: flex; gap: .8rem; margin-top: 1rem; flex-wrap: wrap; }
.bt-op { flex: 1; min-width: 12rem; text-align: left; font-family: var(--fonte);
  font-size: .88rem; padding: .8rem 1rem; background: #fff; cursor: pointer;
  border: 1px solid var(--cor-borda); border-radius: 14px; }
.bt-op:hover { border-color: var(--cor-foco); }
.bt-op i { display: block; font-style: normal; font-size: .78rem;
  color: var(--cor-texto-suave); margin-top: .25rem; }

/* ── Ações ─────────────────────────────────────────────────────────────── */
.acoes { display: flex; align-items: center; gap: 1.2rem; margin: var(--gap-grid) 0;
  flex-wrap: wrap; }

/* ── Erro ──────────────────────────────────────────────────────────────── */
.erro { background: #fdf4f3; border: 1px solid #e9c4bf; border-radius: 14px;
  padding: 1rem 1.2rem; font-size: .9rem; color: #7a2f26; margin-bottom: var(--gap-grid); }
.erro b { display: block; margin-bottom: .2rem; }

/* ── Entrega ───────────────────────────────────────────────────────────── */
.entregue { display: flex; align-items: center; gap: 1.2rem; padding: 1.1rem 1.4rem;
  background: var(--cor-creme); border: 1px solid var(--cor-creme-borda);
  border-radius: var(--raio); margin-bottom: var(--gap-grid); flex-wrap: wrap; }
.entregue .ok { color: var(--cor-ok); font-size: 1.4rem; }
.entregue p { font-size: .92rem; }
.entregue .bt { margin-left: auto; }

/* ── Visor do relatório ────────────────────────────────────────────────── */
.visor { border: 1px solid var(--cor-borda); border-radius: var(--raio);
  overflow: hidden; margin-bottom: var(--espaco-grid); background: #fafafa; }
.visor iframe { width: 100%; height: 80vh; border: 0; display: block; }

/* ── Enquanto gera ─────────────────────────────────────────────────────── */
body.gerando .acoes .bt { opacity: .5; pointer-events: none; }
.pulsa { display: inline-block; width: .55rem; height: .55rem; border-radius: 999px;
  background: var(--cor-foco); margin-right: .5rem; animation: bate 1s infinite; }
@keyframes bate { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }