/* 05-croqui: leiaute da demonstração (prefixo cq-). Palco 1200 x 800; abas no topo (top 20); conteúdo desde 72. */

.cq-passo { position: absolute; inset: 0; visibility: hidden; opacity: 0; }
.cq-passo.ativo { visibility: visible; opacity: 1; }

/* janela do app, menor para dar espaço à legenda */
.cq-janela { left: 24px; top: 72px; }
.cq-janela .app-lateral { width: 150px; }
.cq-janela .app-logo { width: 110px; }

/* legenda à direita: o que o jeito faz e onde o croqui vai parar */
.cq-legenda { position: absolute; left: 896px; top: 72px; width: 280px; color: var(--verde-claro); }
.cq-legenda-selo { margin-bottom: 14px; }
.cq-legenda-titulo { font-family: var(--fonte-display); font-weight: 700; font-size: 24px; line-height: 1.2; color: var(--branco); margin: 0 0 18px; }
.cq-linhas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.cq-linhas li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; line-height: 1.45; }
.cq-n {
  flex: none; width: 24px; height: 24px; border-radius: 50%; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--fonte-mono); font-size: 12px; font-weight: 600;
  color: var(--branco); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--branco) 45%, transparent);
}
.cq-nota {
  margin-top: 22px; padding: 12px 14px; border-radius: 10px; font-size: 15px; font-weight: 600; line-height: 1.4;
  color: var(--branco); background: color-mix(in srgb, var(--branco) 10%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--branco) 22%, transparent);
}
.cq-situacao { margin-top: 12px; font-size: 13.5px; line-height: 1.45; color: var(--verde-claro); opacity: 0.9; }

/* barra de ferramentas (reta, retângulo... / linha, símbolo, cota) */
.cq-barra { display: flex; align-items: center; gap: 6px; height: 36px; }
.cq-barra-espaco { flex: 1; }
.cq-ferr {
  position: relative; display: inline-flex; height: 34px; border-radius: 8px; overflow: hidden;
  background: var(--branco); box-shadow: inset 0 0 0 1px var(--ui-borda);
  font-size: 12.5px; font-weight: 600; color: var(--ui-secao);
}
.cq-ferr-base, .cq-ferr-on { display: inline-flex; align-items: center; gap: 7px; padding: 0 12px; height: 100%; white-space: nowrap; }
.cq-ferr-on { position: absolute; inset: 0; background: var(--verde-sispeq); color: var(--branco); opacity: 0; }
.cq-ferr svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cq-barra .botao-demo { height: 34px; padding: 0 14px; white-space: nowrap; }
.cq-barra .botao-demo.cq-botao { transform-origin: 50% 50%; }

/* área de desenho com grade */
.cq-tela {
  position: relative; margin-top: 10px; border-radius: 10px; overflow: hidden;
  background-color: var(--branco); box-shadow: inset 0 0 0 1px var(--ui-borda);
  background-image:
    linear-gradient(color-mix(in srgb, var(--ui-borda) 55%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--ui-borda) 55%, transparent) 1px, transparent 1px);
  background-size: 36px 36px;
}
.cq-svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.cq-status {
  position: absolute; left: 14px; bottom: 10px; z-index: 2; height: 18px;
  font-family: var(--fonte-mono); font-size: 12px; font-weight: 500; color: var(--grafite);
}
.cq-status span { position: absolute; left: 0; top: 0; white-space: nowrap; opacity: 0; }

/* classes de desenho (SVG) */
.cq-obj { fill: none; stroke: var(--grafite); stroke-width: 3; stroke-linejoin: round; }
.cq-placa { fill: var(--ui-fundo); }
.cq-cota { fill: none; stroke: var(--verde-sispeq); stroke-width: 1.6; }
.cq-cota-seta { fill: var(--verde-sispeq); stroke: none; }
.cq-cota-txt { fill: var(--verde-sispeq); font-family: var(--fonte-mono); font-size: 13px; font-weight: 600; }
.cq-txt { fill: var(--grafite); font-family: var(--fonte-sans); font-size: 13px; font-weight: 600; }
.cq-txt-mono { fill: var(--grafite); font-family: var(--fonte-mono); font-size: 14px; font-weight: 700; }
.cq-txt-verde { fill: var(--verde-sispeq); font-family: var(--fonte-sans); font-size: 13.5px; font-weight: 700; }
.cq-fino { fill: none; stroke: var(--ui-secao); stroke-width: 1; }
.cq-ponta { fill: var(--marinho); stroke: var(--branco); stroke-width: 2; opacity: 0; }

/* resultado: imagem anexada */
.cq-resultado {
  position: relative; display: flex; align-items: center; gap: 14px; margin-top: 10px; height: 74px; padding: 9px 14px;
  background: var(--branco); border: 1px solid var(--ui-borda); border-radius: 10px;
}
.cq-mini { position: relative; flex: none; width: 92px; height: 56px; border-radius: 6px; overflow: hidden; background: var(--branco); box-shadow: inset 0 0 0 1px var(--ui-borda); }
.cq-mini svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cq-res-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cq-res-txt b { font-size: 13.5px; font-weight: 700; color: var(--grafite); }
.cq-res-txt span { font-size: 12px; color: var(--texto-secundario); }
.cq-arquivo { font-family: var(--fonte-mono); font-size: 12px; color: var(--grafite); }
.cq-ok {
  flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: var(--raio-selo);
  background: var(--menta); color: var(--on-menta); font-size: 12px; font-weight: 700;
}
.cq-ok svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* CAD */
.cq-cad-acoes { display: flex; align-items: center; gap: 6px; height: 36px; }
.cq-cad-rodape { display: flex; align-items: center; gap: 14px; height: 34px; margin-top: 10px; }
.cq-cad-rodape .legenda { flex: 1; gap: 16px; }
.cq-cad-rodape .legenda i { border-radius: 50%; }
.cq-revisao { position: relative; display: inline-block; min-width: 56px; height: 24px; }
.cq-revisao span {
  position: absolute; right: 0; top: 0; padding: 4px 11px; border-radius: var(--raio-selo); white-space: nowrap;
  font-family: var(--fonte-mono); font-size: 12px; font-weight: 600;
}
.cq-revisao .r0 { background: var(--ui-fundo); color: var(--texto-secundario); box-shadow: inset 0 0 0 1px var(--ui-borda); }
.cq-revisao .r1 { background: var(--verde-claro); color: var(--verde-sispeq); opacity: 0; }
.cq-aviso {
  position: absolute; right: 14px; top: 12px; z-index: 3; max-width: 330px; padding: 8px 14px; border-radius: var(--raio-selo);
  background: var(--grafite); color: var(--branco); font-size: 12.5px; font-weight: 600; opacity: 0; white-space: nowrap;
}

/* anexos da qualidade */
.cq-anexos-corpo { display: flex; flex-direction: column; gap: 12px; height: 100%; }
.cq-anexos-topo { display: flex; align-items: center; gap: 10px; }
.cq-anexos-topo .secao-faixa { flex: 1; }
.cq-anexos-topo .botao-demo { white-space: nowrap; }
.cq-anexos-tabela { position: relative; }
.cq-anexos-tabela .tabela td { height: 70px; }
.cq-anexos-tabela .tabela tr.cq-linha td { opacity: 0; }
.cq-formato { display: inline-block; padding: 3px 10px; border-radius: var(--raio-selo); font-size: 11.5px; font-weight: 600; background: var(--marinho-fundo); color: var(--marinho); }
.cq-solta {
  height: 112px; border-radius: 10px; border: 1.5px dashed var(--ui-borda); background: var(--branco);
  display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--ui-secao); font-size: 13px; font-weight: 600;
}
.cq-voa {
  position: absolute; left: 0; top: 0; z-index: 5; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 9px;
  background: var(--branco); border-radius: 8px; box-shadow: var(--sombra-curta), inset 0 0 0 1px var(--ui-borda);
  font-family: var(--fonte-mono); font-size: 12px; font-weight: 600; color: var(--grafite); opacity: 0;
}
.cq-voa svg { width: 16px; height: 16px; fill: none; stroke: var(--verde-sispeq); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cq-fio { display: flex; align-items: center; gap: 0; margin-top: 26px; }
.cq-fio-no {
  flex: none; display: flex; flex-direction: column; gap: 3px; padding: 10px 16px; min-width: 168px; text-align: center;
  background: var(--branco); border: 1px solid var(--ui-borda); border-radius: 10px;
}
.cq-fio-no small { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texto-secundario); }
.cq-fio-no b { font-family: var(--fonte-mono); font-size: 13px; font-weight: 600; color: var(--grafite); }
.cq-fio-lig { flex: 1; position: relative; height: 2px; background: var(--ui-borda); min-width: 24px; }
.cq-fio-lig i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: var(--verde-sispeq); transform-origin: 0 50%; transform: scaleX(0); }

/* celular */
.cq-cel { left: 190px; top: 72px; }
.cq-cel .cel-tela { font-size: 12px; color: var(--grafite); }
.cq-c-cab { position: absolute; left: 0; right: 0; top: 0; height: 66px; background: var(--verde-sispeq); color: var(--branco); padding: 11px 16px; }
.cq-c-cab small { display: block; font-size: 11.5px; opacity: 0.9; }
.cq-c-cab b { display: block; margin-top: 5px; font-family: var(--fonte-mono); font-size: 17px; font-weight: 700; }
.cq-c-aviso {
  position: absolute; left: 0; right: 0; top: 66px; height: 36px; z-index: 3; padding: 0 14px; display: flex; align-items: center; gap: 9px;
  background: var(--grafite); color: var(--branco); font-size: 12px; font-weight: 600; opacity: 0;
}
.cq-c-aviso svg { width: 18px; height: 16px; flex: none; fill: none; stroke: var(--branco); stroke-width: 1.8; stroke-linecap: round; }
.cq-c-aviso svg path.cq-risco { stroke: var(--aviso-fundo); }
.cq-c-ref { position: absolute; left: 14px; right: 14px; top: 112px; height: 62px; padding: 9px 12px; background: var(--branco); border-radius: 12px; box-shadow: 0 1px 0 var(--ui-borda); line-height: 1.4; }
.cq-c-ref .mono { font-size: 12px; font-weight: 600; }
.cq-c-ref span.sec { color: var(--texto-secundario); }
.cq-c-rot { position: absolute; font-size: 11.5px; font-weight: 600; color: var(--texto-secundario); }
.cq-c-res { position: absolute; top: 204px; height: 44px; width: 137px; display: flex; align-items: center; justify-content: center; border-radius: 12px; font-size: 14px; font-weight: 700; background: var(--branco); box-shadow: inset 0 0 0 2px var(--ui-borda); color: var(--grafite); overflow: hidden; }
.cq-c-res.a { left: 14px; }
.cq-c-res.b { left: 155px; }
.cq-c-res .on { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--verde-sispeq); color: var(--branco); opacity: 0; }
.cq-c-bloco { position: absolute; top: 278px; width: 133px; height: 128px; border-radius: 12px; overflow: hidden; background: var(--ui-zebra); box-shadow: inset 0 0 0 1px var(--ui-borda); }
.cq-c-bloco.foto { left: 14px; }
.cq-c-bloco.croqui { left: 159px; background-color: var(--branco); background-image: linear-gradient(color-mix(in srgb, var(--ui-borda) 60%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--ui-borda) 60%, transparent) 1px, transparent 1px); background-size: 16px 16px; }
.cq-c-bloco svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cq-c-camera { display: flex; align-items: center; justify-content: center; position: absolute; inset: 0; color: var(--ui-secao); }
.cq-c-camera svg { position: static; width: 38px; height: 32px; fill: none; stroke: currentColor; stroke-width: 2.4; }
.cq-c-foto { position: absolute; inset: 0; background: linear-gradient(180deg, var(--ui-secao), var(--grafite) 45%, var(--ui-secao)); opacity: 0; }
.cq-c-foto i { position: absolute; left: 0; right: 0; top: 48px; height: 28px; border-top: 2px solid var(--grafite); border-bottom: 2px solid var(--grafite); background: repeating-radial-gradient(circle at 50% -40%, var(--papel-escuro) 0 3px, var(--borda) 3px 6px); }
.cq-c-traco { fill: none; stroke: var(--marinho); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.cq-c-dedo { position: absolute; left: 0; top: 0; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; background: color-mix(in srgb, var(--branco) 45%, transparent); border: 2px solid var(--branco); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35); opacity: 0; z-index: 3; }
.cq-c-registrar { position: absolute; left: 14px; right: 14px; top: 420px; height: 46px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--verde-sispeq); color: var(--branco); font-size: 14px; font-weight: 700; }
.cq-c-fila { position: absolute; left: 14px; right: 14px; top: 482px; height: 112px; padding: 10px 12px; background: var(--branco); border-radius: 12px; box-shadow: 0 1px 0 var(--ui-borda), inset 0 0 0 1px var(--ui-borda); opacity: 0; }
.cq-c-fila-cab { display: flex; justify-content: space-between; align-items: center; font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--verde-sispeq); }
.cq-c-fila-cab em { font-style: normal; min-width: 20px; height: 20px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--aviso-fundo); color: var(--aviso-texto); font-size: 11px; letter-spacing: 0; }
.cq-c-fila-item { margin-top: 9px; padding: 8px 10px; border-radius: 8px; background: var(--ui-fundo); line-height: 1.4; }
.cq-c-fila-item .mono { font-size: 12px; font-weight: 600; }
.cq-c-fila-item span.sec { display: block; color: var(--texto-secundario); font-size: 11.5px; }
.cq-c-fila-item span.est { display: flex; align-items: center; gap: 6px; margin-top: 3px; color: var(--aviso-texto); font-size: 11.5px; font-weight: 600; }
.cq-c-fila-item span.est svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* anotações ao lado do celular */
.cq-anot { position: absolute; width: 270px; font-size: 14.5px; font-weight: 600; line-height: 1.4; color: var(--branco); opacity: 0; }
.cq-anot.esq { text-align: right; }
.cq-anot-linha { position: absolute; height: 1.5px; background: color-mix(in srgb, var(--branco) 55%, transparent); transform-origin: 0 50%; opacity: 0; }

/* peças do desenho (SVG) do CAD */
.cq-pipe { fill: none; stroke: var(--grafite); stroke-width: 5; stroke-linejoin: round; }
.cq-peca { fill: var(--grafite); stroke: var(--branco); stroke-width: 2; }
.cq-valvula { fill: var(--branco); stroke: var(--grafite); stroke-width: 2.6; stroke-linejoin: round; }
.cq-junta { fill: var(--verde-sispeq); stroke: var(--branco); stroke-width: 4; }
.cq-anel { fill: none; stroke: var(--verde-sispeq); stroke-width: 2; }
.cq-chip { fill: var(--verde-sispeq); }
.cq-chip-txt { fill: var(--branco); font-family: var(--fonte-mono); font-size: 12px; font-weight: 700; }
.cq-bloco { fill: var(--branco); stroke: var(--grafite); stroke-width: 1.2; }
.cq-leve { fill: var(--texto-secundario); font-family: var(--fonte-sans); font-size: 11.5px; font-weight: 600; }
.cq-aviso2 { position: absolute; right: 14px; top: 12px; z-index: 3; opacity: 0; white-space: nowrap; }

/* miniaturas dos anexos */
.cq-arq { display: flex; align-items: center; gap: 12px; }
.cq-mini2 { position: relative; flex: none; width: 72px; height: 44px; border-radius: 6px; overflow: hidden; background: var(--branco); box-shadow: inset 0 0 0 1px var(--ui-borda); }
.cq-mini2 svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cq-mini2.pdf i { position: absolute; right: 3px; bottom: 3px; padding: 1px 5px; border-radius: 3px; font-style: normal; font-size: 9px; font-weight: 700; background: var(--vermelho); color: var(--branco); }

/* celular: flash da foto e sinal do aparelho */
.cq-c-flash { position: absolute; inset: 0; z-index: 2; background: var(--branco); opacity: 0; }
.cq-cel .cel-sinal { position: relative; display: inline-block; width: 22px; height: 16px; }
.cq-sinal { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; }
.cq-barras { stroke: var(--ui-borda); stroke-width: 3; stroke-linecap: round; }
.cq-sinal .cq-risco { stroke: var(--vermelho); stroke-width: 2; stroke-linecap: round; }

.cq-solta svg { width: 24px; height: 24px; fill: none; stroke: var(--verde-sispeq); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cq-cad-rodape .legenda svg { width: 16px; height: 16px; flex: none; }
.cq-cad-rodape .legenda span { white-space: nowrap; }