/* ==========================================================================
   MOBUSS-VISAO.CSS — Qualidade › Mobuss Construção › Visão Geral
   = PENDÊNCIAS DE FVS (mapa da obra + lista). Só tokens do Design System.
   Pendência = âmbar/vermelho SEMPRE com número ou "!" e texto ("Falta FVS");
   FVS registrada = verde com "✓" — nunca só a cor.
   ========================================================================== */

/* ---------- barra: [menu] [título] ··· [Conferido com… · Atualizar] (a obra é a do cabeçalho; os modos abrem a coluna da direita) ---------- */
.mb-top.qp-top { gap: 10px 14px; margin-bottom: 14px; }
.qp-top .qp-tit { flex: 1 1 260px; min-width: 0; }
.qp-top .qp-tit h1 { line-height: 1.2; }

/* ---------- o que conferir (alto da coluna da direita): os 2 modos dividem a largura; coluna estreita = um embaixo do outro ---------- */
.qp-modos { display: flex; flex-wrap: wrap; gap: 8px; }
.qp-modo { display: flex; flex: 1 1 210px; align-items: center; gap: 10px; border: 1.5px solid var(--border); background: var(--surface); color: var(--text-primary); border-radius: var(--radius-md); padding: 8px 14px; font: inherit; text-align: left; cursor: pointer; min-height: 52px; }
.qp-modo b { display: block; font-size: .9rem; }
.qp-modo small { display: block; font-size: .72rem; color: var(--text-secondary); }
.qp-modo-ic { font-size: 1.3rem; line-height: 1; }
.qp-modo:hover { border-color: var(--border-strong); background: var(--surface-hover); }
.qp-modo.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.qp-modo:focus-visible, .qp-item:focus-visible, .qp-link:focus-visible, .qp-fechar:focus-visible { outline: 2px solid var(--focus-color); outline-offset: 2px; }
/* "Conferido com… · lido às … ↻ Atualizar" à direita da barra do título */
.qp-top .qp-lido { margin-left: auto; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px 10px; font-size: .76rem; color: var(--text-muted); }

/* ---------- indicadores (pé da coluna da direita): 3 lado a lado; coluna estreita = 2 + 1 ---------- */
.qp-resumo { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; margin: 10px 0 0; }
.qp-num { flex: 1 1 130px; min-width: 0; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--border-strong); border-radius: var(--radius-md); padding: 10px 12px; display: flex; flex-direction: column; justify-content: center; }
.qp-num.alerta { border-left-color: var(--warning); }
.qp-num.ok { border-left-color: var(--success); }
.qp-num b { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 1.9rem; line-height: 1.05; font-weight: 800; color: var(--text-primary); }
.qp-num b small { font-size: .9rem; color: var(--text-secondary); font-weight: 700; }
.qp-num span { font-size: .8rem; color: var(--text-secondary); }
.qp-tudo-ok { background: var(--success-bg); border: 1px solid var(--success); color: var(--success-fg); border-radius: var(--radius-md); padding: 10px 14px; margin: 10px 0 0; font-weight: 600; }

/* ---------- corpo (desktop = 2 colunas): mapa à esquerda; à direita, nesta ordem, o que conferir →
   FVS com pendência → indicadores. O HTML vem na ordem do celular (conferir → indicadores → mapa →
   lista) e as áreas abaixo reposicionam; a 3ª linha (1fr) absorve a altura do mapa, então os
   indicadores ficam colados embaixo da lista. Carregando/aviso: .qp-principal no lugar do mapa. ---------- */
.qp-corpo { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(290px, 1fr); grid-template-rows: auto auto 1fr;
  grid-template-areas: "mapa conferir" "mapa lista" "mapa ind"; gap: 14px; align-items: start; }
.qp-conferir { grid-area: conferir; min-width: 0; }
.qp-mapa, .qp-principal { grid-area: mapa; min-width: 0; }
.qp-lista { grid-area: lista; }
.qp-ind { grid-area: ind; }
.qp-mapa, .qp-lista, .qp-ind { margin: 0; padding: 14px 16px; min-width: 0; }
.qp-mapa-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px 14px; flex-wrap: wrap; margin-bottom: 6px; }
.qp-mapa-cab h2, .qp-lista h2, .qp-ind h2 { margin: 0; font-size: 1.02rem; font-weight: 700; color: var(--text-primary); }
.qp-mapa-tit { flex: 1 1 260px; min-width: 0; }
.qp-mapa-fvs { display: block; margin-top: 2px; font-weight: 700; font-size: .9rem; color: var(--accent-strong); overflow-wrap: anywhere; }
.qp-mapa-dica { font-size: .8rem; color: var(--text-secondary); }
.qp-leg { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .74rem; color: var(--text-secondary); margin: 0 0 12px; }
.qp-leg span { display: inline-flex; align-items: center; gap: 6px; }
.qp-sw { display: inline-block; width: 16px; height: 12px; border-radius: 4px; border: 1.5px solid var(--border); background: var(--surface); }
.qp-sw.qp-l-n1, .qp-sw.qp-l-pend { background: var(--warning-bg); border-color: var(--warning); }
.qp-sw.qp-l-n2 { background: var(--warning); border-color: var(--warning); }
.qp-sw.qp-l-n3 { background: var(--danger); border-color: var(--danger); }
.qp-sw.qp-l-ok { background: var(--success-bg); border-color: var(--success); }
.qp-sw.qp-l-nada { background: var(--surface-2); border-style: dashed; }

/* lotes do mapa (o .lote/.lote-grid é o componente global de styles.css) */
.qp-mapa .mapa { gap: 12px; }
.lote.qp-l { min-height: 56px; }
.lote.qp-l-0 { background: var(--surface); }
.lote.qp-l-0 .l-num, .lote.qp-l-nada .l-num { color: var(--text-secondary); }
.lote.qp-l-n1, .lote.qp-l-pend { background: var(--warning-bg); border-color: var(--warning); }
.lote.qp-l-n1 .l-num, .lote.qp-l-pend .l-num { color: var(--warning-fg); }
.lote.qp-l-n2 { background: var(--warning); border-color: var(--warning); }
.lote.qp-l-n3 { background: var(--danger); border-color: var(--danger); }
.lote.qp-l-n2 .l-num, .lote.qp-l-n3 .l-num, .lote.qp-l-n2 .qp-l-txt, .lote.qp-l-n3 .qp-l-txt { color: var(--surface); }
.lote.qp-l-ok { background: var(--success-bg); border-color: var(--success); }
.lote.qp-l-ok .l-num, .lote.qp-l-ok .qp-l-txt { color: var(--success-fg); }
.lote.qp-l-nada { background: var(--surface-2); border-style: dashed; }
.qp-l-txt { font-size: .64rem; font-weight: 700; color: var(--text-secondary); line-height: 1.1; }
.qp-badge { position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--radius-pill); background: var(--text-primary); color: var(--surface); font-size: .7rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--surface); }
.lote.qp-lsel { outline: 3px solid var(--accent); outline-offset: 2px; }

/* popup do local tocado (abrirModal2 wide): cabeçalho · resumo · FVS pendentes expansíveis · já registradas */
.qp-pd-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 6px 14px; margin: 0 0 10px; }
.qp-pd-meta div { min-width: 0; }
.qp-pd-meta dt { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.qp-pd-meta dd { margin: 2px 0 0; font-weight: 600; color: var(--text-primary); overflow-wrap: anywhere; }
.qp-pd-meta dd small { font-weight: 400; color: var(--text-secondary); }
.qp-pd-resumo { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.qp-pd-resumo .qp-num b { font-size: 1.5rem; }
.qp-pd-lista { display: grid; gap: 6px; }
.qp-pd-item { border: 1px solid var(--border); border-left: 4px solid var(--danger); border-radius: var(--radius-sm); background: var(--surface); }
.qp-pd-item > summary { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; cursor: pointer; list-style: none; }
.qp-pd-item > summary::-webkit-details-marker { display: none; }
.qp-pd-item > summary::after { content: '▸'; margin-left: auto; color: var(--text-muted); transition: transform .15s; }
.qp-pd-item[open] > summary::after { transform: rotate(90deg); }
.qp-pd-item > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.qp-pd-tag { flex: none; font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 2px 6px; border-radius: var(--radius-pill); background: var(--danger-bg); color: var(--danger-fg); margin-top: 2px; }
.qp-pd-txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.qp-pd-txt b { font-size: .88rem; overflow-wrap: anywhere; }
.qp-pd-txt small { font-size: .78rem; color: var(--text-secondary); }
.qp-pd-corpo { padding: 0 10px 10px; border-top: 1px solid var(--border); }
.qp-pd-porque { margin: 8px 0; font-size: .84rem; color: var(--text-secondary); }
.qp-pd-rot { margin: 8px 0 4px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.qp-pd-alvos { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.qp-pd-alvos li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 6px 8px; background: var(--surface-2); border-radius: var(--radius-sm); font-size: .84rem; }
.qp-pd-alvo { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
.qp-pd-datas { flex-basis: 100%; color: var(--text-secondary); font-size: .76rem; }
.qp-pd-sit { font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: var(--radius-pill); white-space: nowrap; }
.qp-pd-sit.med { background: var(--info-bg); color: var(--info-fg); }
.qp-pd-sit.ok { background: var(--success-bg); color: var(--success-fg); white-space: normal; }
.qp-pd-sit.nao { background: var(--warning-bg); color: var(--warning-fg); }
.qp-pd-sit.nd { background: var(--surface-3); color: var(--text-secondary); border: 1px dashed var(--border-strong); }
.qp-pd-emdia { margin-top: 12px; }
.qp-pd-emdia > summary { cursor: pointer; font-weight: 600; font-size: .86rem; }
.qp-pd-ok { margin: 6px 0 0; padding: 0 0 0 4px; list-style: none; font-size: .84rem; display: grid; gap: 3px; }
.qp-pd-ok small { color: var(--text-secondary); }

/* ---------- lista de FVS ---------- */
.qp-cont { font-family: var(--font-mono); font-size: .85rem; color: var(--text-secondary); font-weight: 700; margin-left: 4px; }
.qp-itens { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.qp-item { width: 100%; display: grid; grid-template-columns: 46px 1fr; gap: 10px; align-items: center; border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius-sm); padding: 8px 10px; font: inherit; text-align: left; cursor: pointer; color: var(--text-primary); }
.qp-item:hover { border-color: var(--border-strong); background: var(--surface-hover); }
.qp-item.on { border-color: var(--accent); background: var(--accent-soft); }
.qp-item-n { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; border-radius: var(--radius-sm); background: var(--warning-bg); border: 1px solid var(--warning); color: var(--warning-fg); font-family: var(--font-mono); font-weight: 800; font-size: 1.05rem; }
.qp-item.emdia .qp-item-n { background: var(--success-bg); border-color: var(--success); color: var(--success-fg); }
.qp-item-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.qp-item-txt b { font-size: .84rem; line-height: 1.25; overflow-wrap: anywhere; }
.qp-item-txt small { font-size: .74rem; color: var(--text-secondary); }
.qp-prog { display: block; height: 5px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.qp-prog i { display: block; height: 100%; background: var(--success); border-radius: 3px; }
.qp-det { border: 1px solid var(--accent-soft-border); border-top: 0; border-radius: 0 0 var(--radius-sm) var(--radius-sm); margin: -4px 0 4px; padding: 10px 10px 8px; background: var(--surface); }
.qp-det-q { font-size: .8rem; margin: 0 0 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.qp-det-q b { margin-right: 4px; }
.qp-chip { display: inline-flex; min-width: 26px; justify-content: center; padding: 1px 6px; border-radius: 6px; border: 1px solid var(--warning); background: var(--warning-bg); color: var(--warning-fg); font-family: var(--font-mono); font-size: .74rem; font-weight: 700; }
.qp-det-acoes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.qp-emdia { margin-top: 12px; }
.qp-emdia > summary, .qp-semvinc summary { cursor: pointer; font-weight: 700; font-size: .86rem; color: var(--text-primary); }
.qp-semvinc { margin-top: 12px; background: var(--info-bg); border: 1px solid var(--info); color: var(--info-fg); border-radius: var(--radius-sm); padding: 9px 12px; font-size: .8rem; line-height: 1.45; }
.qp-semvinc summary { font-size: .78rem; color: var(--info-fg); margin-top: 4px; }
.qp-semvinc ul { margin: 4px 0 0; padding-left: 18px; }
/* aviso sobre os locais do mapa (sem fonte de execução; bloco da PLS sem par no Mobuss) */
.qp-semvinc.qp-nota { margin: 0 0 12px; }
.qp-nota p { margin: 0; }
.qp-nota p + p { margin-top: 6px; }

/* ---------- avisos ---------- */
.qp-aviso .mb-sub { max-width: 620px; }

/* ---------- telas menores: 1 coluna na ordem do HTML (conferir → indicadores → mapa → lista) ---------- */
@media (max-width: 1000px) {
  .qp-corpo { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: none; }
  .qp-conferir, .qp-mapa, .qp-principal, .qp-lista, .qp-ind { grid-area: auto; }
}
@media (max-width: 560px) {
  .qp-modos { width: 100%; }
  .qp-modo { flex: 1 1 100%; }
  .qp-num b { font-size: 1.6rem; }
  .qp-top .qp-lido { margin-left: 0; justify-content: flex-start; }
}

/* ---------- RELATÓRIO EM PDF (mobuss-visao-relatorio.js) ----------
   Documento próprio num host do <body>: na tela nunca aparece; no papel SÓ ele aparece
   (body.qp-imprimindo). Papel branco/tinta preta vem dos tokens de impressão do styles.css;
   as cores do mapa saem (print-color-adjust) porque pendência = âmbar/vermelho + número.
   Página NOMEADA: não muda a impressão das outras telas. */
.qp-rel-host { display: none; }
@page qprel { size: A4 portrait; margin: 12mm; }
@media print {
  body.qp-imprimindo > :not(#qp-rel-host) { display: none !important; }
  body.qp-imprimindo #qp-rel-host { display: block; }
  /* folha branca também no tema escuro (o color-scheme: dark pintava a margem da folha de preto) */
  html:has(body.qp-imprimindo) { color-scheme: light; }
  html:has(body.qp-imprimindo), body.qp-imprimindo { background: var(--surface) !important; }
  .qp-rel { page: qprel; color: var(--text-primary); font-size: 10pt; line-height: 1.35; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .qp-rel h1 { font-size: 17pt; margin: 2px 0 2px; }
  .qp-rel h2 { font-size: 12pt; margin: 0 0 6px; padding-bottom: 3px; border-bottom: 1.5px solid var(--accent); break-after: avoid; }
  .qp-rel h3 { font-size: 10pt; margin: 0 0 3px; break-after: avoid; }
  .qp-rel h3 small { font-weight: 400; color: var(--text-secondary); }
  .qp-rel-cab { border-bottom: 2px solid var(--text-primary); padding-bottom: 8px; margin-bottom: 12px; }
  .qp-rel-marca { font-size: 8pt; font-weight: 700; letter-spacing: .12em; color: var(--accent-strong); }
  .qp-rel-oque { margin: 0 0 8px; color: var(--text-secondary); }
  .qp-rel-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; margin: 0; }
  .qp-rel-meta div { display: flex; gap: 6px; min-width: 0; }
  .qp-rel-meta dt { font-weight: 700; flex: none; }
  .qp-rel-meta dt::after { content: ":"; }
  .qp-rel-meta dd { margin: 0; overflow-wrap: anywhere; }
  .qp-rel-meta small { color: var(--text-secondary); }
  .qp-rel-sec { margin: 0 0 14px; }
  .qp-rel-ind { display: flex; gap: 10px; margin-bottom: 8px; }
  .qp-rel-ind > div { flex: 1 1 0; border: 1px solid var(--border-strong); border-radius: 4px; padding: 6px 10px; }
  .qp-rel-ind b { display: block; font-size: 18pt; line-height: 1.1; }
  .qp-rel-ind b small { font-size: 10pt; font-weight: 600; }
  .qp-rel-ind span { font-size: 9pt; color: var(--text-secondary); }
  .qp-rel-nota, .qp-rel-dica { margin: 0 0 6px; color: var(--text-secondary); }
  .qp-rel-ok { margin: 0; font-weight: 600; }
  .qp-rel .qp-nota { break-inside: avoid; font-size: 9pt; color: var(--text-primary); background: none; border: 1px solid var(--border-strong); }
  .qp-rel .qp-nota b { color: var(--text-primary); }
  /* mapa: o card da tela vira só o desenho; cada bloco/quadra não quebra entre páginas */
  .qp-rel .qp-mapa { border: 0; padding: 0; break-inside: auto; }
  .qp-rel .qp-mapa .mapa { gap: 6px; max-width: none; }
  .qp-rel .qp-mapa .quadra { break-inside: avoid; box-shadow: none; border-color: var(--border-strong); padding: 0 8px 8px; }
  .qp-rel .qp-mapa .quadra::before { display: none; }
  .qp-rel .qp-mapa .quadra-head { padding: 5px 0 4px; margin-bottom: 6px; gap: 8px; }
  .qp-rel .qp-mapa .quadra-head .q-badge { width: 24px; height: 24px; font-size: 8pt; border-radius: 6px; }
  .qp-rel .qp-mapa .quadra-head .q-nome { font-size: 10pt; }
  .qp-rel .qp-mapa .quadra-head .q-stats { font-size: 8pt; }
  .qp-rel .qp-mapa .mapa-piso + .mapa-piso, .qp-rel .qp-mapa .mapa-piso--solto + .mapa-piso { margin-top: 5px; }
  .qp-rel .qp-mapa .lote-grid { grid-template-columns: repeat(auto-fill, minmax(15mm, 1fr)); gap: 3px; }
  .qp-rel .qp-mapa .lote-grid--wide { grid-template-columns: repeat(auto-fill, minmax(34mm, 1fr)); }
  .qp-rel .qp-mapa .lote { min-height: 0; padding: 2px 3px; gap: 0; border-width: 1px; }
  .qp-rel .qp-mapa .lote .l-num { font-size: 8.5pt; }
  .qp-rel .qp-mapa .qp-l-txt { font-size: 6.5pt; }
  /* no papel o número do local é sempre legível (o âmbar claro do tema escuro some no fundo claro) */
  .qp-rel .lote.qp-l-n1 .l-num, .qp-rel .lote.qp-l-n1 .qp-l-txt, .qp-rel .lote.qp-l-pend .l-num { color: var(--text-primary); }
  .qp-rel .qp-leg { font-size: 8pt; margin-bottom: 8px; }
  .qp-rel-tab { width: 100%; border-collapse: collapse; font-size: 9pt; }
  .qp-rel-tab th, .qp-rel-tab td { border: 1px solid var(--border-strong); padding: 4px 6px; text-align: left; vertical-align: top; }
  .qp-rel-tab thead th { background: var(--surface-selected); }
  .qp-rel-tab .n { text-align: right; white-space: nowrap; }
  .qp-rel-tab tr { break-inside: avoid; }
  .qp-rel-loc tbody { break-inside: auto; }
  .qp-rel-loc td:first-child { width: 30%; }
  .qp-rel-loc .qp-rel-g th { background: var(--surface-2); font-size: 9.5pt; }
  .qp-rel-fvs { break-inside: avoid; margin: 0 0 8px; }
  .qp-rel-fvs p { margin: 0 0 2px; padding-left: 10px; }
  .qp-rel-fvs i { font-style: normal; color: var(--text-secondary); }
  .qp-rel-sec > p { margin: 0 0 4px; }
  .qp-rel-rod { margin-top: 14px; padding-top: 6px; border-top: 1px solid var(--border-strong); font-size: 8pt; color: var(--text-secondary); }
  .qp-rel-rod p { margin: 0 0 3px; }
}