/* =============================================================================
   mapa-quantidades.css — Lista de pormenores do Mapa de Quantidades SPDA
   (calculadora-spda.html; comportamento em assets/js/mapa-quantidades-nav.js)
   ============================================================================= */

/* Descrição por baixo do código */
nav .nav-item .mq-desc { display: block; font-size: 0.72rem; color: #64748b; line-height: 1.3; margin-top: 2px; white-space: normal; }
nav .nav-item.active .mq-desc, nav .nav-item:hover .mq-desc { color: #94a3b8; }

/* Pesquisa */
#mq-pesquisa { width: 100%; box-sizing: border-box; margin: 0 0 12px; padding: 9px 11px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.04); color: #e2e8f0; font: inherit; font-size: 0.85rem; }
#mq-pesquisa:focus { outline: none; border-color: #F59E0B; }
#mq-sem-resultados { margin: -4px 0 12px; font-size: 0.8rem; color: #64748b; }

/* Campo em falta que impediu o mapa (pararMapaEmFalta): destaque + explicação junto dele */
.mq-em-falta { outline: 2px solid #F59E0B !important; outline-offset: 2px; box-shadow: 0 0 0 4px rgba(245,158,11,0.25) !important; }
.mq-em-falta-nota { margin-top: 8px; padding: 9px 12px; border-radius: 8px; border: 1px solid rgba(245,158,11,0.45);
  background: rgba(245,158,11,0.10); color: #fcd34d; font-size: 0.84rem; line-height: 1.45; }

/* Botão do telemóvel: escondido no computador */
#mq-abrir-lista { display: none; }

@media (max-width: 768px) {
  /* A lista fica fechada por omissão; ficam à vista a marca, o botão e «Gerar mapa final». */
  body > nav:not(.mq-aberta) > :not(.mq-sempre) { display: none !important; }
  body > nav { padding: 12px 16px; }
  body > nav > .mq-sempre:first-child { margin-bottom: 10px !important; padding-bottom: 10px !important; }
  #mq-abrir-lista { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; width: 100%; padding: 12px 14px;
    margin: 0 0 10px; border-radius: 10px; border: 1px solid rgba(245,158,11,0.45); background: rgba(245,158,11,0.10);
    color: #F59E0B; font: inherit; font-size: 0.95rem; font-weight: 700; cursor: pointer; text-align: left; }
  #mq-abrir-lista small { flex-basis: 100%; font-size: 0.78rem; font-weight: 500; color: #cbd5e1; }
  #mq-abrir-lista small:empty { display: none; }
  body > nav.mq-aberta #mq-abrir-lista { background: rgba(245,158,11,0.18); }
  /* Ao saltar para o formulário, não ficar escondido debaixo do cabeçalho fixo (48 px). */
  .section-pormenor { scroll-margin-top: 58px; padding: 16px !important; }
  /* Formulário com a largura toda e a imagem do pormenor por baixo (antes ficavam lado a
     lado, 1 : 1,5, e o formulário ficava com ~130 px). */
  .section-pormenor.active { flex-direction: column; }
  .section-pormenor .dados-col, .section-pormenor .imagem-col { flex: 1 1 auto; width: 100%; min-width: 0; }
  .section-pormenor .imagem-col { min-height: 0; }
  .section-pormenor .imagem-col img { max-height: 360px; }
  /* A barra do projeto (Guardar em projeto…) ocupa 111 px: no telemóvel não fica presa ao
     topo, para não tapar o título do pormenor nem roubar ecrã. */
  #calc-project-panel { position: static !important; }
}

/* ── Percurso em passos (assets/js/mapa-quantidades-passos.js) ─────────────── */
.mq-passos { margin: 0 0 16px; scroll-margin-top: 54px; } /* barra do projeto presa ao topo: 44 px */
.mq-catalogo { scroll-margin-top: 54px; }
.mq-passos ol { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.mq-passos ol::-webkit-scrollbar { display: none; }
.mq-passos li { flex: 1 0 auto; }
.mq-passo { width: 100%; display: flex; align-items: center; gap: 7px; padding: 9px 12px; border-radius: 10px; cursor: pointer;
  border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.03); color: #94a3b8; font: inherit; font-size: 0.84rem; font-weight: 600; white-space: nowrap; }
.mq-passo:hover { border-color: rgba(245,158,11,0.35); color: #e2e8f0; }
.mq-passo:focus-visible { outline: 2px solid #F59E0B; outline-offset: 2px; }
.mq-passo[aria-current="step"] { border-color: #F59E0B; background: rgba(245,158,11,0.12); color: #F59E0B; }
.mq-passo-n { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 800; background: rgba(255,255,255,0.06); }
.mq-passo[aria-current="step"] .mq-passo-n { background: #F59E0B; color: #111; }
.mq-passo-c { font-size: 0.72rem; padding: 1px 7px; border-radius: 999px; background: rgba(255,255,255,0.06); color: #64748b; }
.mq-passo-c.tem { background: rgba(16,185,129,0.15); color: #34d399; }

.mq-catalogo { background: var(--card-bg, #1a2432); border: 1px solid var(--border-color, rgba(255,255,255,0.08)); border-radius: 10px; padding: 22px; margin-bottom: 20px; }
.mq-cat-titulo { margin: 0 0 6px; color: #F59E0B; font-size: 1.2rem; }
.mq-cat-texto { margin: 0 0 16px; color: #94a3b8; font-size: 0.9rem; line-height: 1.6; }
.mq-grelha { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.mq-cartao { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 14px; border-radius: 9px; cursor: pointer; text-align: left;
  border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.03); color: #e2e8f0; font: inherit; }
.mq-cartao:hover { border-color: rgba(245,158,11,0.45); background: rgba(245,158,11,0.06); }
.mq-cartao:focus-visible { outline: 2px solid #F59E0B; outline-offset: 2px; }
.mq-cartao-cod { font-weight: 800; color: #F59E0B; font-size: 0.95rem; }
.mq-cartao-desc { font-size: 0.78rem; color: #94a3b8; line-height: 1.4; }
.mq-cartao-ok { font-size: 0.72rem; font-weight: 700; color: #34d399; }
.mq-cartao.inativo, .mq-cartao.inativo:hover { cursor: not-allowed; opacity: 0.55; border-style: dashed; border-color: rgba(255,255,255,0.15); background: transparent; }
.mq-cartao.inativo .mq-cartao-cod { color: #94a3b8; }
.mq-cartao-breve { font-size: 0.72rem; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.04em; }
.mq-cartao.preenchido { border-color: rgba(16,185,129,0.4); background: rgba(16,185,129,0.06); }
.mq-cat-nav, .mq-trilho { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.mq-trilho { margin: 0 0 12px; }
.mq-btn, .mq-btn-sec { padding: 9px 16px; border-radius: 9px; font: inherit; font-size: 0.86rem; font-weight: 700; cursor: pointer; }
.mq-btn { background: #F59E0B; border: 1px solid #F59E0B; color: #111; margin-left: auto; }
.mq-btn-sec { background: transparent; border: 1px solid rgba(245,158,11,0.4); color: #F59E0B; }
.mq-btn:focus-visible, .mq-btn-sec:focus-visible { outline: 2px solid #F59E0B; outline-offset: 2px; }
@media (max-width: 768px) {
  .mq-catalogo { padding: 16px; scroll-margin-top: 58px; }
  .mq-passos { scroll-margin-top: 58px; }
  .mq-grelha { grid-template-columns: 1fr 1fr; }
  .mq-passo { padding: 8px 10px; font-size: 0.8rem; }
}
@media (max-width: 380px) { .mq-grelha { grid-template-columns: 1fr; } }

/* ── Saídas do mapa final em blocos (fase 3) ─────────────────────────────── */
.mq-saidas { display: flex; flex-direction: column; gap: 16px; margin-top: 18px; }
.mq-saidas-titulo { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #64748b; margin-bottom: 8px; }
.mq-saidas-linha { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.mq-saidas-memoria { margin-top: 12px; }
.mq-acao { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 8px; cursor: pointer; list-style: none;
  border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.04); color: #cbd5e1; font: inherit; font-size: 0.88rem; font-weight: 700; }
.mq-acao::-webkit-details-marker { display: none; }
.mq-acao:hover { border-color: rgba(245,158,11,0.45); color: #f8fafc; }
.mq-acao:focus-visible { outline: 2px solid #F59E0B; outline-offset: 2px; }
.mq-acao-principal { border-color: rgba(245,158,11,0.5); background: rgba(245,158,11,0.10); color: #F59E0B; }
.mq-acao-perigo { border-color: rgba(239,68,68,0.35); color: #f87171; }
.mq-menu { position: relative; }
.mq-menu[open] > .mq-acao { background: rgba(245,158,11,0.18); }
.mq-menu-lista { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; min-width: 220px; padding: 6px; border-radius: 10px;
  background: #111c2b; border: 1px solid rgba(245,158,11,0.3); box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.mq-menu-lista button { display: block; width: 100%; text-align: left; padding: 9px 12px; border: 0; border-radius: 7px; background: none;
  color: #e2e8f0; font: inherit; font-size: 0.88rem; cursor: pointer; }
.mq-menu-lista button:hover, .mq-menu-lista button:focus-visible { background: rgba(245,158,11,0.12); color: #F59E0B; outline: none; }
@media (max-width: 768px) {
  .mq-acao { flex: 1 1 auto; justify-content: center; }
  .mq-menu { flex: 1 1 auto; }
  .mq-menu > .mq-acao { width: 100%; }
  .mq-menu-lista { left: 0; right: 0; min-width: 0; }
}

/* ── Uma só navegação (fase B1, 2026-10-17) ─────────────────────────────────
   A barra de passos é a navegação: o menu lateral fica escondido (continua na página porque
   é dele que vêm os contadores ✓ e as descrições), em todos os ecrãs. A pesquisa e «⋯ Mais»
   (importar CSV, apagar quantidades, limpar tudo) ficam por baixo dos passos. */
body > nav { display: none !important; }
.mq-ferramentas { display: flex; gap: 8px; align-items: center; margin: -6px 0 16px; }
.mq-busca { flex: 1 1 auto; min-width: 0; padding: 10px 12px; border-radius: 9px; font: inherit; font-size: 0.88rem;
  border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.04); color: #e2e8f0; }
.mq-busca:focus { outline: none; border-color: #F59E0B; box-shadow: 0 0 0 3px rgba(245,158,11,0.15); }
.mq-mais { flex: 0 0 auto; }
.mq-mais > .mq-acao { padding: 9px 14px; white-space: nowrap; }
.mq-mais .mq-menu-lista { left: auto; right: 0; }
@media (max-width: 768px) {
  .mq-ferramentas { margin: -8px 0 14px; }
  .mq-mais { flex: 0 0 auto; }
  .mq-mais .mq-menu-lista { left: auto; right: 0; min-width: 240px; }
}

/* Telemóvel: a tabela do mapa (11 colunas) desliza dentro do seu espaço em vez de alargar a página */
@media (max-width: 768px) {
  #resultado-container table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ── Resumo do mapa sempre à vista (fase B2; assets/js/mapa-quantidades-resumo.js) ─────────
   Ecrã largo (≥ 1100 px): painel fixo à direita; abaixo disso: faixa fixa no fundo. */
.mq-resumo, .mq-faixa { display: none; }
@media (min-width: 1100px) {
  html.mq-com-resumo body > main { padding-right: 310px; }
  .mq-resumo { display: block; position: fixed; z-index: 30; right: 24px; top: 118px; width: 262px;
    max-height: calc(100vh - 140px); overflow-y: auto; padding: 14px 16px; border-radius: 10px;
    background: linear-gradient(160deg, #0a2540 0%, #1e3a5f 100%); color: #e2e8f0; font-size: 0.84rem;
    box-shadow: 0 6px 20px rgba(15,23,42,0.18); }
}
@media (max-width: 1099px) {
  html.mq-com-resumo body > main { padding-bottom: 76px; }
  html.mq-com-resumo body { padding-bottom: 0; }
  .mq-faixa { display: flex; align-items: center; gap: 10px; position: fixed; z-index: 60; left: 0; right: 0; bottom: 0;
    padding: 10px 16px; background: linear-gradient(135deg, #0a2540 0%, #1e3a5f 100%); color: #e2e8f0;
    box-shadow: 0 -4px 16px rgba(15,23,42,0.2); font-size: 0.86rem; }
}
.mq-res-titulo { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: #94a3b8; margin-bottom: 8px; }
.mq-res-estado { padding: 7px 10px; border-radius: 6px; font-weight: 700; font-size: 0.82rem; }
.mq-res-estado.gravado { background: rgba(22,163,74,0.22); border: 1px solid rgba(74,222,128,0.4); color: #bbf7d0; }
.mq-res-estado.por-gravar { background: rgba(245,158,11,0.2); border: 1px solid rgba(245,158,11,0.5); color: #fde68a; }
.mq-res-contas { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; margin: 12px 0 0; }
.mq-res-contas dt { color: #cbd5e1; }
.mq-res-contas dd { margin: 0; text-align: right; font-weight: 700; color: #64748b; font-family: 'IBM Plex Mono', Consolas, monospace; }
.mq-res-contas dd.tem { color: #86efac; }
.mq-res-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
.mq-res-chip { padding: 3px 8px; border-radius: 999px; border: 1px solid rgba(147,197,253,0.4); background: rgba(255,255,255,0.08);
  color: #e2e8f0; font: inherit; font-size: 0.74rem; font-weight: 700; cursor: pointer; }
.mq-res-chip:hover, .mq-res-chip:focus-visible { background: rgba(147,197,253,0.25); outline: none; }
.mq-res-nota { margin: 12px 0 0; font-size: 0.78rem; line-height: 1.45; color: #cbd5e1; }
.mq-res-mapa { display: flex; flex-direction: column; gap: 3px; margin-top: 12px; padding: 9px 10px; border-radius: 8px;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); font-size: 0.8rem; }
.mq-res-mapa strong { color: #fff; }
.mq-res-prob { color: #fde68a; }
.mq-res-mapa.desatualizado { border-color: rgba(245,158,11,0.55); }
.mq-res-aviso { color: #fde68a; font-weight: 700; }
.mq-res-ir { width: 100%; margin: 12px 0 0 !important; justify-content: center; }
.mq-faixa-texto { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mq-faixa-texto strong { color: #fff; }
.mq-faixa-por-gravar { color: #fde68a; font-weight: 700; }
.mq-faixa-ir { flex: 0 0 auto; margin: 0 !important; padding: 8px 14px; }
@media print { .mq-resumo, .mq-faixa { display: none !important; } }