/* Projetos e Obras, Pontos de Câmera, Cronograma (Gantt) — Agente Projetos */
.pj-de { font-size: 17px; color: var(--texto-3); font-weight: 700; }
.pj-filtros { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.pj-filtros .chip .ic { width: 15px; height: 15px; vertical-align: -3px; }

/* ---------- Cards da lista ---------- */
.pj-grade { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); margin-top: 6px; }
.card-pj { display: flex; flex-direction: column; overflow: hidden; cursor: pointer; background: var(--vidro-card); transition: transform .25s var(--anim), box-shadow .25s var(--anim); }
.card-pj:hover { transform: translateY(-4px); box-shadow: 0 24px 50px rgba(6, 40, 56, .26); }
.pj-capa { position: relative; height: 128px; overflow: hidden; background: linear-gradient(135deg, #14b8a6, #0ea5e9); }
.pj-capa.t-vmmt { background: linear-gradient(135deg, #0ea5e9, #8b5cf6); }
.pj-capa.t-instalacao { background: linear-gradient(135deg, #14b8a6, #10b981); }
.pj-capa.t-manutencao { background: linear-gradient(135deg, #f59e0b, #f97316); }
.pj-capa.t-outro { background: linear-gradient(135deg, #64748b, #0ea5e9); }
.pj-capa img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--anim); }
.card-pj:hover .pj-capa img { transform: scale(1.06); }
.pj-capa-ic { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.85); }
.pj-capa-ic .ic { width: 54px; height: 54px; stroke-width: 1.4; }
.pj-capa .selos { position: absolute; left: 12px; top: 12px; display: flex; gap: 6px; flex-wrap: wrap; max-width: calc(100% - 90px); }
.pj-capa-anel { position: absolute; right: 10px; bottom: 10px; background: rgba(255,255,255,.88); border-radius: 50%; box-shadow: 0 8px 20px rgba(0,0,0,.18); }
.card-pj .corpo { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card-pj .tit { font-weight: 750; font-size: 16px; line-height: 1.25; }
.card-pj .cli { color: var(--texto-2); font-size: 13px; }
.pj-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--texto-2); margin-top: 2px; }
.pj-meta span { display: inline-flex; align-items: center; gap: 5px; }
.pj-meta .ic { width: 15px; height: 15px; color: var(--texto-3); }
.pj-rodape { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: auto; padding-top: 8px; flex-wrap: wrap; }

.selo.pj-t-vmmt { color: #7c3aed; } .selo.pj-t-instalacao { color: #059669; } .selo.pj-t-manutencao { color: #d97706; } .selo.pj-t-outro { color: #475569; }
.selo.pj-s-proposta { color: #64748b; } .selo.pj-s-em_projeto { color: #0284c7; } .selo.pj-s-aprovado_sesp { color: #7c3aed; }
.selo.pj-s-em_obra { color: #ea580c; } .selo.pj-s-concluido { color: #059669; } .selo.pj-s-cancelado { color: #be123c; }

.pj-progresso { height: 8px; border-radius: 6px; background: rgba(255,255,255,.7); overflow: hidden; margin: 4px 0 2px; box-shadow: inset 0 1px 2px rgba(0,0,0,.06); }
.pj-progresso i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--turquesa), var(--azul)); animation: enche .9s var(--anim) both; transform-origin: left; }
.pj-progresso.atraso i { background: linear-gradient(90deg, var(--laranja), var(--vermelho)); }
.pj-anel-v { animation: pjAnel 1s var(--anim) both; }
@keyframes pjAnel { from { stroke-dashoffset: var(--c); } }

.pj-fase { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 650; padding: 4px 10px; border-radius: 999px; max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: rgba(255,255,255,.75); }
.pj-fase b { font-size: 11px; opacity: .75; font-variant-numeric: tabular-nums; }
.pj-fase.g-and { background: #e0f2fe; color: #0369a1; } .pj-fase.g-esp { background: #fef3c7; color: #b45309; }
.pj-fase.g-ok { background: #d1fae5; color: #047857; } .pj-fase.g-sem { color: var(--texto-3); }

/* ---------- Formulário ---------- */
.pj-form { display: flex; flex-direction: column; gap: 18px; max-width: 980px; }
#pj-aba h2 > .ic, .pj-form h2 > .ic, .painel-topo h2 > .ic { width: 20px; height: 20px; vertical-align: -4px; margin-right: 4px; color: var(--turquesa); }
.pj-sub { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-2); margin: 16px 0 8px; }
.pj-tipos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.pj-tipo-op input { position: absolute; opacity: 0; pointer-events: none; }
.pj-tipo-op span { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-radius: var(--raio-p); cursor: pointer; font-weight: 650;
  background: rgba(255,255,255,.55); border: 1.5px solid rgba(255,255,255,.8); transition: all .2s var(--anim); }
.pj-tipo-op span .ic { width: 20px; height: 20px; color: var(--turquesa); }
.pj-tipo-op input:checked + span { background: var(--preto); color: #fff; border-color: var(--preto); box-shadow: 0 8px 20px rgba(0,0,0,.2); }
.pj-tipo-op input:checked + span .ic { color: var(--azul-2); }
.pj-tipo-op input:focus-visible + span { outline: 2px solid var(--azul); }
.pj-form-botoes { display: flex; justify-content: flex-end; gap: 10px; }

/* ---------- Cabeçalho do projeto ---------- */
.pj-hero { display: flex; gap: 22px; align-items: center; margin-bottom: 16px; background: var(--vidro-forte); }
.pj-hero-anel { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.pj-hero-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.pj-hero-selos { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pj-hero-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.pj-hero-nums > div { background: rgba(255,255,255,.6); border: 1px solid rgba(255,255,255,.85); border-radius: var(--raio-p); padding: 9px 12px; }
.pj-hero-nums small { display: block; font-size: 11.5px; color: var(--texto-3); font-weight: 600; }
.pj-hero-nums b { font-size: 17px; font-variant-numeric: tabular-nums; }
.pj-hero-nums b span { font-size: 13px; color: var(--texto-3); }
.pj-hero-nums .ruim b { color: #be123c; } .pj-hero-nums .bom b { color: #047857; }
.pj-abas { margin-bottom: 16px; }

/* ---------- Visão geral ---------- */
.pj-etapa-li { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid rgba(255,255,255,.55); }
.pj-etapa-li:last-child { border-bottom: 0; }
.pj-etapa-li .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pj-etapa-li .pj-progresso { margin-top: 4px; }
.pj-pct { width: 44px; text-align: right; font-variant-numeric: tabular-nums; }
.pj-bolinha { width: 12px; height: 12px; border-radius: 50%; flex: none; background: #94a3b8; box-shadow: 0 0 0 4px rgba(148,163,184,.2); }
.s-concluida .pj-bolinha { background: var(--verde); box-shadow: 0 0 0 4px rgba(16,185,129,.2); }
.s-andamento .pj-bolinha { background: var(--azul); box-shadow: 0 0 0 4px rgba(14,165,233,.2); }
.s-atrasada .pj-bolinha { background: var(--vermelho); box-shadow: 0 0 0 4px rgba(244,63,94,.22); animation: pulsa 1.8s infinite; }
.s-aguardando .pj-bolinha { background: var(--amarelo); box-shadow: 0 0 0 4px rgba(245,158,11,.2); }
.pj-sit { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: #e2e8f0; color: #475569; }
.pj-sit.s-concluida { background: #d1fae5; color: #047857; } .pj-sit.s-andamento { background: #e0f2fe; color: #0369a1; }
.pj-sit.s-atrasada { background: #ffe4e6; color: #be123c; } .pj-sit.s-aguardando { background: #fef3c7; color: #b45309; }

.pj-fases { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pj-fases-grupo h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .07em; margin: 0 0 6px; display: flex; align-items: center; gap: 6px; }
.pj-fases-grupo h3::before { content: ""; width: 9px; height: 9px; border-radius: 3px; background: var(--gc); }
.pj-fases-grupo.g-projeto { --gc: var(--azul); } .pj-fases-grupo.g-obra { --gc: var(--laranja); }
.pj-fases-grupo.g-projeto h3 { color: #0369a1; } .pj-fases-grupo.g-obra h3 { color: #c2410c; }
.pj-fase-item { display: grid; grid-template-columns: 18px 1fr auto; gap: 8px; align-items: start; padding: 6px 8px; border-radius: 10px; font-size: 13.5px; cursor: pointer; }
.pj-fase-item:hover { background: rgba(255,255,255,.55); }
.pj-fase-item input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--verde); }
.pj-fase-item.feito span { color: var(--texto-3); text-decoration: line-through; }
.pj-fase-item.atual { background: rgba(255,255,255,.8); box-shadow: inset 3px 0 0 var(--gc); }
.pj-fase-item.atual span { font-weight: 700; color: var(--texto); text-decoration: none; }
.pj-fase-item small { color: var(--texto-3); font-size: 11.5px; white-space: nowrap; }
.pj-pessoa { display: flex; flex-direction: column; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.55); }
.pj-pessoa:last-child { border-bottom: 0; }
.pj-pessoa small { font-size: 11.5px; color: var(--texto-3); font-weight: 650; text-transform: uppercase; letter-spacing: .04em; }
.pj-cta { background: linear-gradient(135deg, rgba(255,255,255,.7), rgba(204,251,241,.65)); }
.pj-cta p { margin: 4px 0 12px; }

/* ---------- Pontos de câmera ---------- */
.pj-pontos-topo { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.pj-tipos-cont { display: flex; gap: 8px; flex-wrap: wrap; }
.pj-chip-tipo { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 650; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.75); }
.pj-chip-tipo b { font-variant-numeric: tabular-nums; }
.pj-chip-tipo.p { padding: 2px 9px; font-size: 11.5px; align-self: flex-start; }
.pt-fixa { --pc: #0ea5e9; } .pt-speed_dome { --pc: #f97316; } .pt-lpr { --pc: #10b981; } .pt-ok { --pc: #7c3aed; }
.pj-chip-tipo[class*="pt-"] { color: var(--pc); background: color-mix(in srgb, var(--pc) 13%, white); }
.pj-pontos { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.pj-lista-pontos { display: flex; flex-direction: column; gap: 10px; }
.pj-ponto { display: flex; gap: 12px; padding: 10px; border-radius: var(--raio-m); background: rgba(255,255,255,.55); border: 1.5px solid transparent; transition: all .2s var(--anim); }
.pj-ponto.sel { border-color: var(--turquesa); background: rgba(255,255,255,.85); box-shadow: 0 8px 22px rgba(6,40,56,.15); }
.pj-ponto.instalado { box-shadow: inset 4px 0 0 var(--verde); }
.pj-ponto-foto { position: relative; width: 96px; height: 96px; flex: none; border-radius: 12px; overflow: hidden; background: linear-gradient(135deg, rgba(20,184,166,.25), rgba(14,165,233,.25)); display: grid; place-items: center; color: var(--texto-3); }
.pj-ponto-foto img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.pj-ponto-foto .ic { width: 34px; height: 34px; }
.pj-num { position: absolute; left: 6px; top: 6px; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center; font-weight: 800; font-size: 13px; color: #fff; background: var(--pc); box-shadow: 0 3px 8px rgba(0,0,0,.25); }
.pj-ponto-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pj-ponto-txt > .fraco { display: flex; align-items: center; gap: 4px; }
.pj-ponto-txt .ic { width: 14px; height: 14px; flex: none; }
.pj-coord { font-family: ui-monospace, Menlo, monospace; font-size: 12px; }
.pj-ponto-acoes { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; }
.pj-inst { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 650; padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,.8); cursor: pointer; }
.pj-inst input { width: 16px; height: 16px; accent-color: var(--verde); }
.pj-mapa-painel { position: sticky; top: 14px; }
.pj-mapa { border-radius: var(--raio-m); overflow: hidden; height: 300px; background: rgba(255,255,255,.5); border: 1px solid rgba(255,255,255,.8); }
.pj-mapa iframe { width: 100%; height: 100%; border: 0; display: block; }
.pj-croqui { width: 100%; height: auto; display: block; background: rgba(255,255,255,.55); border-radius: 14px; }
.pj-cq { cursor: pointer; }
.pj-cq circle { fill: var(--pc); stroke: #fff; stroke-width: 2.5; }
.pj-cq .halo { fill: var(--pc); opacity: 0; stroke: none; transition: opacity .2s; }
.pj-cq:not(.ok) circle:not(.halo) { fill: #fff; stroke: var(--pc); stroke-width: 3; }
.pj-cq text { font-size: 11px; font-weight: 800; fill: #fff; pointer-events: none; }
.pj-cq:not(.ok) text { fill: var(--pc); }
.pj-cq:hover .halo, .pj-cq.sel .halo { opacity: .3; }

/* ---------- Gantt ---------- */
.pj-gantt-barra { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pj-legenda { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--texto-2); margin-right: 6px; }
.pj-legenda span::before { content: ""; display: inline-block; width: 12px; height: 8px; border-radius: 3px; margin-right: 5px; background: var(--gb); vertical-align: 0; }
.pj-legenda .s-proj::before { background: repeating-linear-gradient(45deg, rgba(244,63,94,.55) 0 3px, rgba(244,63,94,.15) 3px 6px); }
.pj-gantt-wrap { overflow-x: auto; overflow-y: hidden; border-radius: var(--raio-m); background: rgba(255,255,255,.45); border: 1px solid rgba(255,255,255,.8); -webkit-overflow-scrolling: touch; }
.pj-g { position: relative; width: max-content; min-width: 100%; --nome: 230px; }
.pj-g-cab, .pj-g-linha { display: flex; }
.pj-g-nome { position: sticky; left: 0; z-index: 4; width: var(--nome); flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  background: rgba(240, 250, 251, .96); border-right: 1px solid rgba(12,37,51,.08); cursor: pointer; }
.pj-g-nome div { flex: 1; min-width: 0; }
.pj-g-nome b { display: block; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pj-g-nome small { display: block; font-size: 11.5px; color: var(--texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pj-g-nome em { font-style: normal; font-weight: 750; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.pj-g-nome.cab { cursor: default; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-2); }
.pj-g-escala { position: relative; height: 52px; flex: none; border-bottom: 1px solid rgba(12,37,51,.1); }
.pj-g-meses { position: relative; height: 22px; }
.pj-g-meses span { position: absolute; top: 4px; padding-left: 6px; font-size: 11.5px; font-weight: 750; color: var(--texto-2); border-left: 1px solid rgba(12,37,51,.15); white-space: nowrap; }
.pj-g-dias { position: relative; height: 30px; }
.pj-g-dias span { position: absolute; top: 0; height: 30px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 650; color: var(--texto-2); line-height: 1.05; }
.pj-g-dias span small { font-size: 9.5px; color: var(--texto-3); font-weight: 600; }
.pj-g-dias span.fds { background: rgba(12,37,51,.045); color: var(--texto-3); }
.pj-g-dias span.hoje { background: var(--vermelho); color: #fff; border-radius: 8px; }
.pj-g-dias span.hoje small { color: #fff; }
.pj-g-dias span.sem { align-items: flex-start; padding-left: 4px; border-left: 1px solid rgba(12,37,51,.1); }
.pj-g-corpo { position: relative; }
.pj-g-linha { min-height: 52px; border-bottom: 1px solid rgba(255,255,255,.7); }
.pj-g-linha:last-child { border-bottom: 0; }
.pj-g-trilho { position: relative; flex: none; background-image: linear-gradient(90deg, rgba(12,37,51,.05) 1px, transparent 1px); background-size: var(--px) 100%; }
.pj-g-barra { position: absolute; top: 12px; height: 28px; border-radius: 9px; overflow: hidden; z-index: 1; display: flex; align-items: center;
  background: var(--gb-claro); box-shadow: 0 4px 12px rgba(6,40,56,.14); user-select: none; -webkit-user-select: none; transition: box-shadow .2s, transform .2s; }
.pj-g-barra i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--gb); animation: enche .9s var(--anim) both; transform-origin: left; }
.pj-g-barra span { position: relative; padding: 0 8px; font-size: 11.5px; font-weight: 800; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.3); white-space: nowrap; }
.pj-g-barra.editavel { cursor: grab; touch-action: none; }
.pj-g-barra.editavel:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(6,40,56,.24); }
.pj-g-barra.arrastando { cursor: grabbing; box-shadow: 0 12px 26px rgba(6,40,56,.32); outline: 2px solid #fff; z-index: 5; transition: none; }
.pj-g-alca { position: absolute; right: 0; top: 0; bottom: 0; width: 12px; cursor: ew-resize; background: linear-gradient(90deg, transparent, rgba(255,255,255,.55)); }
.pj-g-alca::after { content: ""; position: absolute; right: 4px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: rgba(255,255,255,.9); }
.s-concluida { --gb: #10b981; --gb-claro: #a7f3d0; }
.s-andamento { --gb: #0ea5e9; --gb-claro: #bae6fd; }
.s-atrasada { --gb: #f43f5e; --gb-claro: #fecdd3; }
.s-aguardando { --gb: #f59e0b; --gb-claro: #fde68a; }
.s-pendente { --gb: #64748b; --gb-claro: #cbd5e1; }
.pj-g-barra.s-pendente span { color: #334155; text-shadow: none; }
.pj-g-proj { position: absolute; top: 16px; height: 20px; border-radius: 0 8px 8px 0; z-index: 0;
  background: repeating-linear-gradient(45deg, rgba(244,63,94,.5) 0 4px, rgba(244,63,94,.12) 4px 8px); border: 1px dashed rgba(244,63,94,.7); border-left: 0; }
.pj-g-real { position: absolute; top: 42px; height: 4px; border-radius: 4px; background: var(--preto); opacity: .55; z-index: 0; }
.pj-g-sobre { position: absolute; top: 0; bottom: 0; left: var(--nome); z-index: 3; pointer-events: none; }
.pj-g-hoje, .pj-g-prazo { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px solid var(--vermelho); }
.pj-g-hoje span, .pj-g-prazo span { position: absolute; bottom: 4px; left: 4px; font-size: 10.5px; font-weight: 800; color: #fff; background: var(--vermelho); padding: 1px 6px; border-radius: 6px; white-space: nowrap; }
.pj-g-prazo { border-left: 2px dashed var(--roxo); }
.pj-g-prazo span { background: var(--roxo); top: 4px; bottom: auto; }
.pj-g-deps { position: absolute; left: 0; top: 0; overflow: visible; }
.pj-g-deps path { fill: none; stroke: #3c5a68; stroke-width: 1.4; opacity: .55; }
.pj-g-deps path.conflito { stroke: var(--vermelho); stroke-dasharray: 4 3; opacity: .9; }
.pj-custo { font-size: 20px; }
.pj-custo small { font-size: 14px; color: var(--texto-3); font-weight: 700; }
.pj-cmp { display: flex; flex-direction: column; gap: 3px; }
.pj-cmp i { display: block; height: 6px; border-radius: 4px; min-width: 2px; animation: enche .8s var(--anim) both; transform-origin: left; }
.pj-cmp i.pv { background: rgba(139,92,246,.55); } .pj-cmp i.rl { background: var(--turquesa); } .pj-cmp i.rl.estouro { background: var(--vermelho); }
.pj-estouro { color: #be123c; font-weight: 750; }
.pj-range { width: 100%; accent-color: var(--turquesa); }
.pj-etapa-os { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 14px; }
.pj-etapa-os small { font-size: 12px; color: var(--texto-3); font-weight: 650; }
.pj-os-mini { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; border-radius: 10px; background: rgba(12,37,51,.05); color: var(--texto); font-size: 13px; }

/* ---------- OS / Contratos / Portal ---------- */
.pj-os-grupo { margin-bottom: 14px; }
.pj-os-grupo h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-2); margin: 4px 0 6px; display: flex; gap: 8px; align-items: center; }
.pj-os-li .txt { cursor: pointer; }
.pj-sel-etapa { width: auto; max-width: 170px; padding: 6px 10px; font-size: 13px; }
.pj-codigo { font-family: ui-monospace, Menlo, monospace; font-weight: 800; letter-spacing: .18em; font-size: 18px; padding: 2px 10px; border-radius: 8px; background: var(--preto); color: #fff; }
.pj-portal-botoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.pj-msg { white-space: pre-wrap; font: inherit; font-size: 13.5px; background: rgba(255,255,255,.65); border-radius: var(--raio-p); padding: 12px 14px; margin: 0; }
.pj-desab { opacity: .5; pointer-events: none; }

@media (max-width: 1100px) {
  .pj-pontos { grid-template-columns: minmax(0, 1fr); }
  .pj-mapa-painel { position: static; }
}
@media (max-width: 820px) {
  .pj-tipos { grid-template-columns: 1fr 1fr; }
  .pj-hero { flex-direction: column; align-items: stretch; gap: 12px; }
  .pj-hero-anel { flex-direction: row; gap: 12px; }
  .pj-hero-nums { grid-template-columns: 1fr 1fr; }
  .pj-fases { grid-template-columns: minmax(0, 1fr); }
  .pj-g { --nome: 128px; }
  .pj-g-nome { padding: 8px; gap: 6px; }
  .pj-g-nome .pj-bolinha { display: none; }
  .pj-g-nome em { display: none; }
  .pj-ponto-foto { width: 74px; height: 74px; }
  .pj-mapa { height: 240px; }
  .pj-legenda { display: none; }
  .pj-sel-etapa { max-width: 120px; }
  .pj-os-li { flex-wrap: wrap; }
  .pj-form-botoes .btn { flex: 1; justify-content: center; }
}

/* contraste sobre o vidro */
.pj-link-cli { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.pj-etapa-li .fraco, .pj-fase-item small, .pj-ponto-txt .fraco, .pj-pessoa .fraco, .card-pj .fraco, .pj-os-li .fraco { color: var(--texto-2); }
.pj-fases-grupo.g-projeto h3 { color: #075985; } .pj-fases-grupo.g-obra h3 { color: #9a3412; }
.pj-fase-item.feito span { color: var(--texto-2); }
#pj-aba .info-lista small, .pj-portal > .fraco, .pj-gantt-wrap + .fraco, .pj-mapa-painel .fraco { color: var(--texto-2); }