/* Capítulo 6 · O sistema, página por página.
   Mosaico de miniaturas em três faixas (preparação, parada, encerramento), fio em serpentina e ficha da página.
   A geometria (posição e tamanho de faixas, cartões e fio) é calculada em js/secoes/06-mapa.js. */

.mapa { position: absolute; inset: 0; color: var(--grafite); }

/* o botão Rever do modo leitura fica no canto de baixo, para não cobrir a primeira linha de cartões */
.cap-mapa .botao-rever { top: auto; bottom: 12px; }

/* ---------- faixas ---------- */
.mapa-banda {
  position: absolute; border-radius: 16px;
  background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}
.mapa-rotulo { position: absolute; color: var(--branco); }
.mapa-rotulo-nome { font-family: var(--fonte-display); font-weight: 800; font-size: 12px; line-height: 1.25; letter-spacing: 0.04em; text-transform: uppercase; }
.mapa-rotulo-qtd { margin-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--verde-claro); }
.mapa-rotulo-quando { margin-top: 2px; font-size: 12px; line-height: 1.35; color: var(--verde-claro); opacity: 0.8; }
.mapa-nota {
  position: absolute; display: flex; align-items: center; padding: 0 10px 0 14px;
  border-left: 3px solid rgba(255, 255, 255, 0.32); color: var(--verde-claro); font-size: 15px; line-height: 1.4;
}
.mapa-dica { position: absolute; left: 214px; bottom: 9px; font-size: 13px; font-weight: 600; color: var(--verde-claro); opacity: 0.92; }

/* ---------- fio ---------- */
.mapa-fio { position: absolute; background: var(--verde-claro); border-radius: 2px; }
.mapa-fio--h { height: 3px; }
.mapa-fio--v { width: 3px; transform-origin: 50% 0; }
.mapa-fio--h.dir-d { transform-origin: 0 50%; }
.mapa-fio--h.dir-e { transform-origin: 100% 50%; }
.mapa-fio::after { content: ''; position: absolute; width: 0; height: 0; border-style: solid; border-color: transparent; }
.mapa-fio--h.dir-d::after { right: -2px; top: -4px; border-width: 5.5px 0 5.5px 8px; border-left-color: var(--verde-claro); }
.mapa-fio--h.dir-e::after { left: -2px; top: -4px; border-width: 5.5px 8px 5.5px 0; border-right-color: var(--verde-claro); }
.mapa-fio--v::after { left: -4px; bottom: -3px; border-width: 8px 5.5px 0 5.5px; border-top-color: var(--verde-claro); }

/* ---------- cartão de página ---------- */
.mapa-no { position: absolute; }
.mapa-cartao {
  position: relative; display: flex; flex-direction: column; gap: 7px; width: 100%; height: 100%; padding: 7px;
  text-align: left; color: var(--grafite); background: var(--branco);
  border: 1px solid var(--ui-borda); border-radius: 11px; box-shadow: var(--sombra-curta);
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.2s ease;
}
.mapa-cartao:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(4, 30, 21, 0.3); }
.mapa-cartao:focus-visible { outline: 3px solid var(--branco); outline-offset: 2px; }
.mapa-num {
  position: absolute; left: -8px; top: -8px; z-index: 2; min-width: 24px; height: 24px; padding: 0 5px;
  display: flex; align-items: center; justify-content: center; border-radius: 12px;
  background: var(--verde-profundo); color: var(--branco); border: 2px solid var(--branco);
  font-family: var(--fonte-mono); font-size: 11.5px; font-weight: 700; line-height: 1;
}
.mapa-textos { display: flex; flex-direction: column; gap: 2px; min-height: 0; padding: 0 1px; }
.mapa-nome { font-size: 13.5px; font-weight: 700; line-height: 1.2; color: var(--verde-profundo); }
.mapa-sub { font-size: 11px; line-height: 1.25; color: var(--texto-secundario); }
.mapa-no.sel .mapa-cartao { border-color: var(--verde-sispeq); box-shadow: 0 0 0 3px var(--branco), 0 10px 22px rgba(4, 30, 21, 0.35); }
.mapa-no.sel .mapa-num { background: var(--verde-sispeq); }
.mapa.com-ficha .mapa-no:not(.sel) .mapa-cartao { opacity: 0.5; }
.mapa.com-ficha .mapa-no:not(.sel) .mapa-cartao:hover { opacity: 0.9; }

/* ---------- miniatura da tela (unidade --u: 1 px no cartão, maior na ficha) ---------- */
.mapa-mini {
  --u: 1px; position: relative; flex: 0 1 auto; display: flex; width: 100%; height: calc(54 * var(--u)); min-height: calc(32 * var(--u));
  border: 1px solid var(--ui-borda); border-radius: calc(5 * var(--u)); background: var(--ui-fundo); overflow: hidden;
}
.mapa-m-lat {
  flex: none; width: calc(15 * var(--u)); display: flex; flex-direction: column; gap: calc(2.5 * var(--u));
  padding: calc(4 * var(--u)) calc(3 * var(--u)); background: var(--branco); border-right: 1px solid var(--ui-borda);
}
.mapa-m-lat i { display: block; height: calc(2 * var(--u)); border-radius: var(--u); background: var(--ui-borda); }
.mapa-m-lat i.on { background: var(--verde-sispeq); }
.mapa-m-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(3 * var(--u)); padding: calc(3 * var(--u)); }
.mapa-m-faixa { position: relative; flex: none; height: calc(8 * var(--u)); border-radius: calc(2.5 * var(--u)); background: var(--verde-sispeq); }
.mapa-m-faixa::after {
  content: ''; position: absolute; left: calc(3 * var(--u)); top: 50%; width: 36%; height: calc(2 * var(--u));
  margin-top: calc(-1 * var(--u)); border-radius: var(--u); background: var(--branco); opacity: 0.85;
}
.mapa-m-corpo { flex: 1; min-height: 0; display: flex; }

/* barras (texto abstrato) e pílulas */
.mapa-m-b { flex: none; height: calc(2 * var(--u)); border-radius: var(--u); background: var(--cinza-plan); }
.mapa-m-b.w1 { width: 14%; } .mapa-m-b.w2 { width: 24%; } .mapa-m-b.w3 { width: 36%; } .mapa-m-b.w4 { width: 50%; } .mapa-m-b.w5 { width: 70%; }
.mapa-m-b.f { background: var(--cinza-neutro); }
.mapa-m-p { flex: none; width: calc(9 * var(--u)); height: calc(3.4 * var(--u)); margin-left: auto; border-radius: 99px; background: var(--ui-borda); }
.mapa-m-p.v { background: var(--verde-sispeq); }
.mapa-m-p.m { background: var(--marinho); }
.mapa-m-p.r { background: var(--vermelho); }
.mapa-m-p.c { background: var(--cinza-neutro); }

/* tabela */
.mapa-m-tab { flex: 1; display: flex; flex-direction: column; gap: calc(1.5 * var(--u)); }
.mapa-m-th { flex: none; height: calc(4 * var(--u)); border-radius: calc(1.5 * var(--u)); background: var(--verde-sispeq); opacity: 0.7; }
.mapa-m-tr { flex: 1; min-height: 0; display: flex; align-items: center; gap: calc(3 * var(--u)); padding: 0 calc(3 * var(--u)); border-radius: calc(1.5 * var(--u)); background: var(--branco); }
.mapa-m-tr.z { background: var(--ui-zebra); }
.mapa-m-tr, .mapa-m-li, .mapa-m-pfl { box-shadow: inset 0 0 0 1px var(--ui-borda); }

/* empresa (formulário com logo) */
.mapa-m-empresa { flex: 1; display: flex; gap: calc(4 * var(--u)); }
.mapa-m-logo { position: relative; flex: none; width: calc(22 * var(--u)); border: 1px dashed var(--cinza-neutro); border-radius: calc(3 * var(--u)); background: var(--branco); }
.mapa-m-logo::after { content: ''; position: absolute; left: 24%; right: 24%; top: 36%; height: 28%; border-radius: calc(1.5 * var(--u)); background: var(--ui-borda); }
.mapa-m-col { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: calc(2.2 * var(--u)); }
.mapa-m-campo { height: calc(5 * var(--u)); border: 1px solid var(--ui-borda); border-radius: calc(1.5 * var(--u)); background: var(--branco); }
.mapa-m-campo.curto { width: 60%; }

/* perfis de acesso */
.mapa-m-pf { flex: 1; display: flex; flex-direction: column; gap: calc(1.5 * var(--u)); }
.mapa-m-pfl { flex: 1; min-height: 0; display: flex; align-items: center; gap: calc(3 * var(--u)); padding: 0 calc(3 * var(--u)); border-radius: calc(1.5 * var(--u)); background: var(--branco); }
.mapa-m-av { flex: none; width: calc(4.6 * var(--u)); height: calc(4.6 * var(--u)); border-radius: 50%; background: var(--verde-claro); box-shadow: inset 0 0 0 1px var(--verde-sispeq); }

/* cartões */
.mapa-m-cts { flex: 1; display: flex; gap: calc(3 * var(--u)); }
.mapa-m-ct { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; padding: calc(3 * var(--u)); border: 1px solid var(--ui-borda); border-radius: calc(2.5 * var(--u)); background: var(--branco); }
.mapa-m-n { height: calc(5 * var(--u)); width: 52%; border-radius: calc(1.5 * var(--u)); background: var(--verde-sispeq); opacity: 0.85; }
.mapa-m-ct:nth-child(2) .mapa-m-n { background: var(--marinho); width: 40%; }
.mapa-m-ct:nth-child(3) .mapa-m-n { background: var(--cinza-neutro); width: 64%; }
.mapa-m-ct .mapa-m-b { width: 80%; }
.mapa-m-ct .mapa-m-b + .mapa-m-b { width: 48%; margin-top: calc(1.5 * var(--u)); }

/* lista com caixas */
.mapa-m-ls { flex: 1; display: flex; flex-direction: column; gap: calc(1.5 * var(--u)); }
.mapa-m-li { flex: 1; min-height: 0; display: flex; align-items: center; gap: calc(3 * var(--u)); padding: 0 calc(3 * var(--u)); border-radius: calc(1.5 * var(--u)); background: var(--branco); }
.mapa-m-cx { flex: none; width: calc(3.2 * var(--u)); height: calc(3.2 * var(--u)); border: 1px solid var(--cinza-neutro); border-radius: calc(0.8 * var(--u)); }
.mapa-m-cx.ok { background: var(--verde-sispeq); border-color: var(--verde-sispeq); }

/* documento + itens */
.mapa-m-dc { flex: 1; display: flex; gap: calc(4 * var(--u)); }
.mapa-m-pg { flex: none; width: calc(30 * var(--u)); display: flex; flex-direction: column; gap: calc(2.2 * var(--u)); padding: calc(3 * var(--u)); border: 1px solid var(--ui-borda); border-radius: calc(1.5 * var(--u)); background: var(--branco); }
.mapa-m-pg .mapa-m-b { width: 100%; }
.mapa-m-pg .mapa-m-b.w4 { width: 56%; }
.mapa-m-its { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(1.5 * var(--u)); }

/* celular (app de campo) */
.mapa-m-celular { flex: 1; display: flex; justify-content: center; align-items: flex-start; gap: calc(8 * var(--u)); }
.mapa-m-cel { flex: none; width: calc(22 * var(--u)); height: calc(56 * var(--u)); padding: calc(2 * var(--u)) calc(2 * var(--u)) 0; border-radius: calc(5 * var(--u)) calc(5 * var(--u)) 0 0; background: var(--grafite); }
.mapa-m-cel-tela { height: 100%; display: flex; flex-direction: column; gap: calc(2 * var(--u)); padding: calc(2 * var(--u)); border-radius: calc(3 * var(--u)) calc(3 * var(--u)) 0 0; background: var(--ui-fundo); }
.mapa-m-cel-tela .mapa-m-faixa { height: calc(5 * var(--u)); }
.mapa-m-cel-tela .mapa-m-b { width: 100%; background: var(--ui-borda); }
.mapa-m-cel-tela .mapa-m-b.w4 { width: 60%; }
.mapa-m-lado { flex: none; width: calc(30 * var(--u)); padding-top: calc(4 * var(--u)); display: flex; flex-direction: column; gap: calc(3 * var(--u)); }

/* fluxo do relatório */
.mapa-m-fx { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: calc(3.5 * var(--u)); }
.mapa-m-fxl { display: flex; align-items: center; gap: calc(2 * var(--u)); }
.mapa-m-fxp { position: relative; flex: 1; height: calc(7 * var(--u)); border-radius: 99px; background: var(--ui-borda); }
.mapa-m-fxp::after { content: ''; position: absolute; left: 22%; right: 22%; top: 50%; height: calc(2 * var(--u)); margin-top: calc(-1 * var(--u)); border-radius: var(--u); background: var(--branco); opacity: 0.9; }
.mapa-m-fxp.a { background: var(--aviso-fundo); box-shadow: inset 0 0 0 1px var(--ambar); }
.mapa-m-fxp.a::after { background: var(--ambar); opacity: 0.7; }
.mapa-m-fxp.v { background: var(--verde-claro); box-shadow: inset 0 0 0 1px var(--verde-sispeq); }
.mapa-m-fxp.v::after { background: var(--verde-sispeq); opacity: 0.7; }
.mapa-m-seta { flex: none; width: 0; height: 0; border-style: solid; border-width: calc(2.4 * var(--u)) 0 calc(2.4 * var(--u)) calc(3.4 * var(--u)); border-color: transparent transparent transparent var(--cinza-neutro); }
.mapa-m-via { height: calc(3 * var(--u)); border-radius: calc(1.5 * var(--u)); border: 1px dashed var(--verde-sispeq); background: var(--branco); }

/* desenho técnico (CAD) */
.mapa-m-desenho { flex: 1; min-width: 0; border: 1px solid var(--ui-borda); border-radius: calc(2 * var(--u)); background: var(--branco); }
.mapa-m-svg { display: block; width: 100%; height: 100%; }
.mapa-m-svg .tr { fill: none; stroke: var(--marinho); stroke-width: 1.4; stroke-linejoin: round; }
.mapa-m-svg .co { fill: none; stroke: var(--cinza-neutro); stroke-width: 0.6; }
.mapa-m-svg .pt { fill: var(--branco); stroke: var(--marinho); stroke-width: 1; }

/* grade de mapa de controle */
.mapa-m-gr { flex: 1; display: grid; grid-template-columns: repeat(9, 1fr); grid-auto-rows: 1fr; gap: calc(1.5 * var(--u)); }
.mapa-m-gc { border-radius: var(--u); background: var(--branco); box-shadow: inset 0 0 0 1px var(--ui-borda); }
.mapa-m-gc.a { background: var(--verde-sispeq); box-shadow: none; }
.mapa-m-gc.b { background: var(--verde-claro); box-shadow: inset 0 0 0 1px var(--verde-sispeq); }
.mapa-m-gc.c { background: var(--marinho-fundo); box-shadow: inset 0 0 0 1px var(--marinho); }

/* painel (barras) */
.mapa-m-bs { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: calc(2 * var(--u)); }
.mapa-m-bl { flex: 1; min-height: 0; display: flex; align-items: center; gap: calc(3 * var(--u)); }
.mapa-m-bl .mapa-m-b { width: calc(16 * var(--u)); }
.mapa-m-bt { position: relative; flex: 1; height: calc(3.4 * var(--u)); border-radius: 99px; background: var(--ui-borda); overflow: hidden; }
.mapa-m-bf { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; background: var(--verde-sispeq); }

/* data-book (pastas e PDF) */
.mapa-m-ps { flex: 1; display: flex; align-items: flex-end; gap: calc(3.5 * var(--u)); padding-top: calc(3 * var(--u)); }
.mapa-m-pa { position: relative; flex: 1; height: 82%; border: 1px solid var(--verde-sispeq); border-radius: calc(1.5 * var(--u)); background: var(--verde-claro); }
.mapa-m-pa::before {
  content: ''; position: absolute; left: -1px; top: calc(-3 * var(--u) - 1px); width: 46%; height: calc(3 * var(--u));
  border: 1px solid var(--verde-sispeq); border-bottom: 0; border-radius: calc(1.5 * var(--u)) calc(1.5 * var(--u)) 0 0; background: var(--verde-claro);
}
.mapa-m-pdf { flex: none; width: calc(20 * var(--u)); height: 100%; display: flex; flex-direction: column; gap: calc(2.2 * var(--u)); padding: calc(3 * var(--u)); border: 1px solid var(--ui-borda); border-radius: calc(1.5 * var(--u)); background: var(--branco); }
.mapa-m-pdf .mapa-m-b { width: 100%; }
.mapa-m-pdf .mapa-m-b.w4 { width: 55%; }

/* trilha de auditoria */
.mapa-m-tl { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: space-between; padding-left: calc(3 * var(--u)); }
.mapa-m-tl::before { content: ''; position: absolute; left: calc(4.4 * var(--u)); top: calc(2 * var(--u)); bottom: calc(2 * var(--u)); width: 1px; background: var(--cinza-neutro); }
.mapa-m-tlr { position: relative; display: flex; align-items: center; gap: calc(3.5 * var(--u)); }
.mapa-m-pt { flex: none; width: calc(3.2 * var(--u)); height: calc(3.2 * var(--u)); border-radius: 50%; background: var(--verde-sispeq); box-shadow: 0 0 0 calc(1.2 * var(--u)) var(--ui-fundo); }
.mapa-m-tlr .mapa-m-b { width: 62%; }
.mapa-m-tlr:nth-child(2) .mapa-m-b { width: 44%; }
.mapa-m-tlr:nth-child(3) .mapa-m-b { width: 54%; }

/* ---------- ficha da página ---------- */
.mapa-ficha {
  position: absolute; top: 28px; bottom: 34px; width: 500px; z-index: 8; display: none; flex-direction: column;
  background: var(--branco); border: 1px solid var(--ui-borda); border-radius: 12px; overflow: hidden;
  box-shadow: var(--sombra-curta), 0 18px 40px rgba(4, 30, 21, 0.3);
}
.mapa-ficha.lado-d { right: 18px; }
.mapa-ficha.lado-e { left: 18px; }
.mapa-ficha-topo { flex: none; display: flex; align-items: center; gap: 10px; padding: 14px 16px 10px; }
.mapa-ficha-topo .secao-faixa { flex: 1; }
.mapa-ficha-fechar { flex: none; padding: 7px 12px; font-size: 12.5px; }
.mapa-ficha-cabeca { flex: none; display: flex; align-items: center; gap: 14px; padding: 4px 16px 10px; }
.mapa-ficha-previa { flex: none; width: 150px; }
.mapa-ficha-previa .mapa-mini { --u: 1.1px; }
.mapa-ficha-titulo { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; margin: 0; font-family: var(--fonte-display); font-weight: 800; font-size: 19px; line-height: 1.2; color: var(--verde-profundo); }
.mapa-ficha-n { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 6px; border-radius: 14px; background: var(--verde-profundo); color: var(--branco); font-family: var(--fonte-mono); font-size: 13px; font-weight: 700; }
.mapa-ficha-corpo { flex: 1; min-height: 0; overflow: auto; padding: 0 16px 10px; }
.mapa-ficha-lista { margin: 0; }
.mapa-ficha-linha { display: grid; grid-template-columns: 94px minmax(0, 1fr); gap: 12px; padding: 8px 0; border-top: 1px solid var(--ui-borda); }
.mapa-ficha-linha:first-child { border-top: 0; }
.mapa-ficha-linha dt { padding-top: 3px; font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--verde-sispeq); }
.mapa-ficha-linha dd { margin: 0; font-size: 14.5px; line-height: 1.4; color: var(--grafite); }
.mapa-ficha-legenda { margin-top: 6px; padding: 10px 12px; border-radius: 8px; background: var(--ui-fundo); }
.mapa-ficha-legenda-titulo { margin-bottom: 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--texto-secundario); }
.mapa-ficha-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mapa-chip { display: inline-block; padding: 4px 11px; border-radius: 99px; font-size: 12px; font-weight: 600; line-height: 1.25; color: var(--grafite); }
.mapa-chip.vermelho { background: #FF7C80; }
.mapa-chip.azul { background: var(--marinho-fundo); box-shadow: inset 0 0 0 1px #C5D2E0; }
.mapa-chip.laranja { background: #FFC000; }
.mapa-chip.amarelo { background: #FFFF66; }
.mapa-chip.verde { background: #00B050; }
.mapa-ficha-aviso { display: flex; align-items: flex-start; gap: 10px; margin-top: 8px; padding: 10px 12px; border-radius: 8px; background: var(--ui-fundo); font-size: 13.5px; line-height: 1.4; }
.mapa-ficha-aviso .selo-disp { flex: none; }
.mapa-ficha-rodape { flex: none; display: flex; justify-content: space-between; gap: 10px; padding: 10px 16px 14px; border-top: 1px solid var(--ui-borda); }
.mapa-ficha-rodape .botao-demo { padding: 8px 14px; font-size: 12.5px; }