/* ProxGes — telas da Etapa 1 (mesmas cores e fonte do sistema; aprovado nas prévias 1, 2 e 3) */
:root { --azul-claro: #E8EDF7; --menu-txt: #C9D1DD; --ambar: #D9A21B; }

/* menu com grupos */
.lat-grupo { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: #8C98AE; padding: 12px 14px 2px; }
.cel-mais .lat-grupo { display: none; }

/* peças comuns */
.px { display: flex; flex-direction: column; gap: 18px; }
.px-cab { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 14px; }
.px-cab h1 { font-size: 28px; }
.px-cab p { color: var(--texto2); margin-top: 4px; max-width: 72ch; }
.px-acoes { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.px-cartao { padding: 20px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.px-cartao h2 { font-size: 18px; }
.px-cartao h3 { font-size: 16px; }
.px-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.px-kpis.mini { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.px-kpis.mini .cx-kpi b { font-size: 20px; }
.px-grade2 { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.px-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.px-campos .campo input, .px-campos .campo select, .px-campos .campo textarea { min-height: 42px; padding: 9px 12px; }
.px-campos textarea { border: 1px solid var(--borda-campo); border-radius: 8px; font-weight: 400; }
.px-conta { display: flex; flex-direction: column; font-size: 14px; }
.px-conta div { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--linha); font-variant-numeric: tabular-nums; }
.px-conta div.fim { border-bottom: 0; border-top: 2px solid var(--marinho); margin-top: 4px; padding-top: 10px; font-weight: 800; font-size: 17px; }
.px-conta span { color: var(--texto2); }
.px-dica { font-size: 13px; color: var(--texto2); }
.px-nota { background: var(--fundo); border-radius: 8px; padding: 12px 14px; font-size: 13.5px; color: var(--texto2); line-height: 1.5; }
.px-nota b { color: var(--marinho); }
.px-nota.laranja { background: var(--laranja-claro); border: 1px solid var(--laranja-borda); }
.px-vazio { padding: 28px 16px; text-align: center; color: var(--texto2); }
.px-rolar { overflow-x: auto; }
.px-rolar.alta { max-height: 440px; overflow: auto; }
.tabela tr.px-sel td { background: var(--laranja-claro); }
.tabela tr.px-clique { cursor: pointer; }
.tabela tr.px-clique:hover td { background: #FAFBFC; }
.tabela tr.px-total td { font-weight: 700; border-top: 1px solid var(--borda); border-bottom: 0; }
.tabela tr.px-sub td { background: var(--fundo); font-weight: 700; font-size: 13px; color: var(--texto2); }
.selo.vermelho { background: var(--vermelho-claro); color: var(--vermelho); }
.px-link { background: none; border: 0; font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; color: var(--marinho); padding: 4px; }
.px-link:hover { color: var(--acao); }
.px-barra { height: 8px; border-radius: 4px; background: var(--linha); overflow: hidden; display: flex; }
.px-barra i { display: block; height: 100%; }
.txt-vermelho { color: var(--vermelho) !important; } .txt-amarelo { color: var(--amarelo-texto) !important; } .txt-verde { color: var(--verde) !important; }
.px-abas { flex-wrap: wrap; }
.px-abas button[disabled] { color: #9AA3B2; cursor: not-allowed; background: var(--fundo); }
.px-abas button small { font-weight: 500; font-size: 11.5px; margin-left: 4px; }

/* filtros e gráficos */
.px-filtros { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: end; background: var(--branco); border: 1px solid var(--borda); border-radius: 14px; padding: 12px 14px; }
.px-filtros .campo { flex: 1 1 160px; }
.px-filtros .campo select { min-height: 40px; padding: 7px 10px; }
.px-grafs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.px-grafs .largo { grid-column: 1 / -1; }
.px-graf { width: 100%; height: 300px; }
.px-graf.curto { height: 220px; }

/* alertas e níveis das regras */
.px-alertas { display: flex; flex-direction: column; gap: 8px; }
.px-alerta { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 10px; background: var(--fundo); flex-wrap: wrap; }
.px-alerta p { flex: 1 1 220px; min-width: 0; font-size: 14px; }
.px-nivel { display: inline-block; font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; white-space: nowrap; }
.px-nivel.bloqueia { background: var(--vermelho-claro); color: var(--vermelho); }
.px-nivel.avisa { background: var(--amarelo); color: var(--amarelo-texto); border: 1px solid var(--amarelo-borda); }
.px-nivel.informa { background: var(--azul-claro); color: var(--marinho); }

/* janela da regra */
.px-fundo { position: fixed; inset: 0; background: rgba(20, 33, 61, .55); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 80; }
.px-modal { background: var(--branco); border-radius: 16px; max-width: 560px; width: 100%; max-height: 90vh; overflow: auto; padding: 22px; display: flex; flex-direction: column; gap: 14px; border-top: 6px solid var(--cor, var(--marinho)); }
.px-modal h2 { font-size: 20px; }
.px-modal h4 { margin: 0 0 4px; font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--texto2); }
.px-modal ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.px-modal textarea, .px-modal select { width: 100%; border: 1px solid var(--borda-campo); border-radius: 8px; padding: 10px; font: inherit; font-weight: 400; }
.px-modal textarea { min-height: 80px; }
.px-toast { position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--marinho); color: #fff; padding: 12px 18px; border-radius: 10px; z-index: 90; font-weight: 600; max-width: calc(100% - 32px); box-shadow: 0 8px 24px rgba(20, 33, 61, .25); }
@media (min-width: 901px) { .px-toast { bottom: 24px; } }

/* caldeiraria: itens */
.px-item-cab { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: baseline; }
.px-item-cab h3 { font-size: 16px; }
.px-item-cab b { font-size: 17px; font-variant-numeric: tabular-nums; }
.px-resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.px-resumo div { background: var(--branco); border: 1px solid var(--borda); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.px-resumo span { font-size: 12.5px; color: var(--texto2); font-weight: 600; }
.px-resumo b { font-size: 17px; font-variant-numeric: tabular-nums; }
.px-resumo div.venda { background: var(--marinho); border-color: var(--marinho); color: #fff; }
.px-resumo div.venda span { color: var(--menu-txt); }
.px-aviso-item { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; background: var(--amarelo); border: 1px solid var(--amarelo-borda); color: var(--amarelo-texto); border-radius: 10px; padding: 10px 12px; font-size: 14px; }
.px-aviso-item p { flex: 1 1 240px; min-width: 0; }
.px-linhas { display: flex; flex-direction: column; gap: 8px; }
.px-linha { display: grid; gap: 8px; align-items: end; grid-template-columns: minmax(0, 2.2fr) repeat(3, minmax(0, 1fr)) auto; }
.px-linha.mo, .px-linha.maq { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto; }
.px-linha.outro { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr) auto; }
.px-linha .campo input, .px-linha .campo select { min-height: 40px; padding: 8px 10px; }
.px-linha .tot { font-variant-numeric: tabular-nums; font-weight: 700; padding-bottom: 10px; text-align: right; }
.px-tirar { background: none; border: 0; color: var(--vermelho); font-weight: 700; cursor: pointer; padding: 10px 8px; }
.px-bloco { border: 1px solid var(--borda); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.px-bloco h4 { margin: 0; font-size: 14px; }

/* análise do orçamento */
.px-faixa { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 12px; }
.px-faixa > div { background: var(--branco); border: 1px solid var(--borda); border-radius: 14px; padding: 12px 16px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.px-faixa > div span { font-size: 12.5px; color: var(--texto2); font-weight: 600; }
.px-faixa > div b { font-size: 22px; font-variant-numeric: tabular-nums; border-radius: 6px; }
.px-semaforo { display: flex; align-items: center; gap: 14px; text-align: left; border-radius: 14px; padding: 12px 16px; border: 1px solid; cursor: pointer; min-width: 0; font: inherit; }
.px-semaforo > span { display: flex; flex-direction: column; }
.px-semaforo b { font-size: 17px; }
.px-semaforo small { font-size: 12.5px; }
.px-semaforo i, .px-luz { display: block; width: 22px; height: 22px; border-radius: 50%; flex: none; background: currentColor; box-shadow: 0 0 0 6px color-mix(in srgb, currentColor 20%, transparent); animation: px-pulso 2.4s ease-in-out infinite; }
.px-semaforo.verde { background: var(--verde-claro); border-color: #BFE0CB; color: var(--verde-escuro); }
.px-semaforo.amarelo { background: var(--amarelo); border-color: var(--amarelo-borda); color: var(--amarelo-texto); }
.px-semaforo.vermelho { background: var(--vermelho-claro); border-color: #F1B8B0; color: var(--vermelho); }
.px-luz { width: 34px; height: 34px; }
.px-luz.verde { color: var(--verde); } .px-luz.amarelo { color: var(--ambar); } .px-luz.vermelho { color: var(--vermelho); }
.px-sem-topo { display: flex; align-items: center; gap: 16px; }
.px-sem.verde { border-color: #BFE0CB; background: linear-gradient(var(--verde-claro), var(--branco) 110px); }
.px-sem.amarelo { border-color: var(--amarelo-borda); background: linear-gradient(var(--amarelo), var(--branco) 110px); }
.px-sem.vermelho { border-color: #F1B8B0; background: linear-gradient(var(--vermelho-claro), var(--branco) 110px); }
.px-sem .px-alerta { background: var(--branco); border: 1px solid var(--borda); }
@keyframes px-pulso { 50% { box-shadow: 0 0 0 10px color-mix(in srgb, currentColor 8%, transparent); } }
@keyframes px-mudou { from { background: var(--laranja-claro); } to { background: transparent; } }
.px-mudou { animation: px-mudou 1s ease-out; }
.px-range { width: 100%; accent-color: var(--laranja); height: 30px; cursor: pointer; }
.px-cenarios { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.px-cen { text-align: left; background: var(--branco); border: 2px solid var(--borda); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; cursor: pointer; font: inherit; color: inherit; transition: border-color .2s, transform .2s, box-shadow .2s; }
.px-cen:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(20, 33, 61, .08); }
.px-cen.ativo { border-color: var(--laranja); background: var(--laranja-claro); }
.px-cen h3 { font-size: 15.5px; }
.px-cen .lc { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; font-variant-numeric: tabular-nums; }
.px-cen .lc span { color: var(--texto2); }
.px-cen .selos { display: flex; gap: 6px; flex-wrap: wrap; min-height: 26px; }
.px-curto { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; }
.px-curto select { min-height: 38px; padding: 6px 10px; border: 1px solid var(--borda-campo); border-radius: 8px; background: var(--branco); min-width: 0; width: 100%; font: inherit; }
.px-ia { background: var(--marinho); color: #fff; border-color: var(--marinho); }
.px-ia h2 { color: #fff; }
.px-ia p { line-height: 1.6; color: #E6EAF1; }
.px-ia b { color: #fff; }
.px-ia .px-dica { color: var(--menu-txt); }
.px-salvo { font-size: 12.5px; color: var(--verde); font-weight: 700; min-height: 18px; }
@media (prefers-reduced-motion: reduce) { .px-semaforo i, .px-luz, .px-mudou { animation: none; } .px-cen { transition: none; } }

@media (max-width: 900px) {
  .px-grade2, .px-grafs { grid-template-columns: minmax(0, 1fr); }
  .px-graf { height: 270px; }
  .px-faixa { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .px-faixa .px-semaforo { grid-column: 1 / -1; }
  .px-cenarios { grid-template-columns: minmax(0, 1fr); }
  .px-cab h1 { font-size: 23px; }
  .px-linha, .px-linha.mo, .px-linha.maq, .px-linha.outro { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .px-linha > :first-child { grid-column: 1 / -1; }
}