/* ============================================================
   css/telas/ambiente.css — só a área Ambiente.
   Todo seletor começa em .area-ambiente, de propósito: nada
   daqui escapa para as outras áreas.
   NENHUM VALOR CRU: cor, raio e folga saem de css/tokens.css.
   A escala compacta v.A é o aprovado — nada aqui a engorda.
   ============================================================ */

/* --- respiro entre painéis empilhados (o mesmo 16 px do v.A) --- */
.area-ambiente .amb-espaco{height:16px;flex:0 0 auto}
.area-ambiente .amb-mt{margin-top:12px}
.area-ambiente .amb-chips{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:12px}
.area-ambiente .amb-ctx-bt{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  margin:-6px 0 14px}

/* --- a consequência escrita, do lado do controle que a causa --- */
.area-ambiente .amb-conseq{border:1px solid var(--borda-padrao);border-radius:var(--r-item);
  background:var(--fundo-alt);padding:11px 13px;margin-top:12px}
.area-ambiente .amb-conseq p{font-size:12.5px;color:var(--txt-padrao);line-height:1.5}

/* --- o estado bloqueado do salto --- */
.area-ambiente .amb-bloq{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:9px;text-align:center;padding:26px 22px;border:1px dashed var(--borda-forte);
  border-radius:var(--r-painel);background:var(--fundo-card)}
.area-ambiente .amb-bloq b{font-size:14.5px;font-weight:600;color:var(--txt-forte);
  letter-spacing:-.02em}
.area-ambiente .amb-bloq p{font-size:12.5px;color:var(--txt-apoio);max-width:460px;line-height:1.5}

/* --- busca dentro do cabeçalho do painel --- */
.area-ambiente .amb-busca{height:28px;width:168px;border:1px solid var(--borda-controle);
  border-radius:7px;display:inline-flex;align-items:center;gap:7px;padding:0 9px;
  background:var(--fundo-campo)}
.area-ambiente .amb-busca .i{width:13px;height:13px;color:var(--txt-apoio);flex:0 0 auto}
.area-ambiente .amb-busca input{border:0;background:none;font:inherit;font-size:11.5px;
  color:var(--txt-forte);min-width:0;flex:1 1 auto;outline:none;padding:0}
.area-ambiente .amb-busca input::placeholder{color:var(--txt-fraco)}
.area-ambiente .amb-busca:focus-within{border-color:var(--foco);box-shadow:0 0 0 1px var(--foco)}

/* --- título de coluna que ordena --- */
.area-ambiente .tab th.amb-ord{cursor:pointer;white-space:nowrap}
.area-ambiente .tab th.amb-ord:hover{color:var(--txt-forte)}
.area-ambiente .tab th.amb-ord:focus-visible{outline:2px solid var(--foco);outline-offset:-2px}
.area-ambiente .amb-seta{width:12px;height:12px;margin-left:5px;vertical-align:-2px;
  color:var(--ativo-marca)}
.area-ambiente .amb-seta.sobe{transform:rotate(180deg)}

/* --- lista de ativos, à esquerda do consumo --- */
.area-ambiente .amb-lista{display:flex;flex-direction:column}
.area-ambiente .amb-li{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:9px 4px;border-bottom:1px solid var(--borda-sutil);cursor:pointer}
.area-ambiente .amb-li:last-child{border-bottom:0}
.area-ambiente .amb-li.on{background:var(--ativo-fundo);border-radius:var(--r-item)}
.area-ambiente .amb-li:focus-visible{outline:2px solid var(--foco);outline-offset:-2px}
.area-ambiente .amb-li-tx{display:flex;flex-direction:column;min-width:0;flex:1 1 auto;line-height:1.3}
.area-ambiente .amb-li-tx b{font-size:12.5px;font-weight:500;color:var(--txt-forte);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.area-ambiente .amb-li-tx i{font-size:11px;color:var(--txt-apoio);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.area-ambiente .amb-li .selo{flex:0 0 auto}

/* --- as medidas: um ladrilho por recurso --- */
.area-ambiente .amb-meds{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
  gap:10px}
.area-ambiente .amb-med{position:relative;display:flex;flex-direction:column;gap:7px;
  text-align:left;padding:11px 12px;border:1px solid var(--borda-padrao);
  border-radius:var(--r-item);background:var(--fundo-card);cursor:pointer}
.area-ambiente .amb-med.on{border-color:var(--borda-controle);background:var(--fundo-legenda-ativa);
  box-shadow:0 1px 3px #00000010}
.area-ambiente .amb-med:focus-visible{outline:2px solid var(--foco);outline-offset:1px}
.area-ambiente .amb-med-cab{display:flex;align-items:center;gap:7px}
.area-ambiente .amb-med-cab .i{width:14px;height:14px;color:var(--txt-apoio)}
.area-ambiente .amb-med-cab .rot{font-family:var(--fonte-mono);font-size:11px;letter-spacing:.02em;
  text-transform:uppercase;color:var(--txt-apoio)}
.area-ambiente .amb-med-val{display:flex;align-items:flex-end;gap:5px}
.area-ambiente .amb-med-val b{font-size:22px;font-weight:600;letter-spacing:-.035em;
  color:var(--txt-forte);line-height:1}
.area-ambiente .amb-med-val i{font-size:11.5px;color:var(--txt-apoio);margin-bottom:2px}
.area-ambiente .amb-med-val .amb-mini{margin-left:auto}
.area-ambiente .amb-med-pe{font-size:10.5px;color:var(--txt-fraco);line-height:1.4}
.area-ambiente .amb-med-selo{margin-top:1px}

/* --- o desenho grande de uma medida --- */
.area-ambiente .amb-graf-cx{margin-top:12px;border:1px solid var(--borda-sutil);
  border-radius:var(--r-item);padding:11px 12px 6px;background:var(--fundo-card)}
.area-ambiente .amb-graf-cab{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;
  margin-bottom:6px}
.area-ambiente .amb-graf-cab b{font-size:12.5px;font-weight:600;color:var(--txt-forte)}
.area-ambiente .amb-graf-cab span{font-size:11.5px;color:var(--txt-apoio)}
.area-ambiente .amb-graf{width:100%;height:auto;display:block}
.area-ambiente .amb-g-area{fill:var(--grafico-barra-acento);opacity:.5}
.area-ambiente .amb-g-linha{fill:none;stroke:var(--grafico-destaque);stroke-width:1.6;
  stroke-linejoin:round}
.area-ambiente .amb-g-pt{fill:var(--grafico-destaque)}
.area-ambiente .amb-g-grade{stroke:var(--borda-sutil);stroke-width:1}
.area-ambiente .amb-g-lim{stroke:var(--txt-fraco);stroke-width:1;stroke-dasharray:4 3}
.area-ambiente .amb-g-rot{font-family:var(--fonte-mono);font-size:9px;fill:var(--txt-fraco)}
.area-ambiente .amb-g-rot.lim{fill:var(--txt-apoio)}

/* --- barrinhas das últimas coletas --- */
.area-ambiente .amb-mini{width:62px;height:22px;flex:0 0 auto}
.area-ambiente .amb-b{fill:var(--grafico-barra)}
.area-ambiente .amb-b.fim{fill:var(--grafico-destaque)}

/* --- a célula de medida, na tabela --- */
.area-ambiente .amb-cel{display:flex;align-items:center;gap:5px}
.area-ambiente .amb-cel b{font-size:12.5px;font-weight:600;color:var(--txt-forte)}
.area-ambiente .amb-cel i{font-size:11px;color:var(--txt-apoio)}
.area-ambiente .amb-cel .amb-mini{width:48px;margin-left:auto}
.area-ambiente .amb-cel.acima b{color:var(--est-atencao-tx)}
.area-ambiente .amb-cel.acima .amb-b.fim{fill:var(--grafico-atencao)}

/* --- cartões de coletor --- */
.area-ambiente .amb-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(282px,1fr));
  gap:16px}
.area-ambiente .amb-col{border:1px solid var(--borda-padrao);border-radius:var(--r-painel);
  background:var(--fundo-card);padding:12px 14px 14px}
.area-ambiente .amb-col-cab{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.area-ambiente .amb-col-cab b{font-size:12.5px;font-weight:600;color:var(--txt-forte);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.area-ambiente .amb-col-cab .selo{margin-left:auto;flex:0 0 auto}

/* --- os números de uso e saúde --- */
.area-ambiente .amb-nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(152px,1fr));
  gap:10px}
.area-ambiente .amb-num{border:1px solid var(--borda-sutil);border-radius:var(--r-item);
  padding:10px 12px;background:var(--fundo-card)}
.area-ambiente .amb-num .rot{font-family:var(--fonte-mono);font-size:10.5px;letter-spacing:.02em;
  text-transform:uppercase;color:var(--txt-apoio)}
.area-ambiente .amb-num .val{font-size:22px;font-weight:600;letter-spacing:-.035em;
  color:var(--txt-forte);line-height:1.1;margin-top:6px}
.area-ambiente .amb-num .leg{font-size:10.5px;color:var(--txt-fraco);margin-top:3px}

/* --- a dobra das gerações anteriores --- */
.area-ambiente .amb-dobra{margin-top:12px;border:1px solid var(--borda-sutil);
  border-radius:var(--r-item);overflow:hidden}
.area-ambiente .amb-dobra-cab{display:flex;align-items:center;gap:8px;width:100%;
  min-height:38px;padding:0 12px;background:var(--fundo-cabecalho-painel);cursor:pointer;
  font-size:12px;color:var(--txt-padrao);text-align:left}
.area-ambiente .amb-dobra-cab .i{width:13px;height:13px;color:var(--txt-apoio)}
.area-ambiente .amb-dobra-cab .etq{margin-left:auto}
.area-ambiente .amb-dobra-cab:focus-visible{outline:2px solid var(--foco);outline-offset:-2px}
.area-ambiente .amb-dobra-corpo{padding:10px 12px;display:flex;flex-direction:column;gap:7px;
  background:var(--fundo-card)}

/* --- o desenho do parque --- */
.area-ambiente .amb-canvas{min-height:380px;margin:12px;overflow:auto}
.area-ambiente .amb-canvas .palco{transform-origin:top center}
.area-ambiente .amb-canvas .nofluxo{width:236px}
.area-ambiente .amb-canvas .zoom span,
.area-ambiente .amb-canvas .zoom button{width:26px;height:26px;display:grid;place-items:center;
  color:var(--txt-apoio);border-radius:5px;background:var(--fundo-card);
  border:1px solid var(--borda-sutil);cursor:pointer}
.area-ambiente .amb-canvas .zoom button:focus-visible{outline:2px solid var(--foco);outline-offset:1px}
.area-ambiente .nofluxo.amb-manual{border-style:dashed}

/* --- quando o painel tem lista rolável, ela não empurra o rodapé --- */
.area-ambiente .painel .pcorpo{overflow-y:auto}

/* ============================================================
   Pontos de quebra — os mesmos do v.A. Nenhuma escala muda:
   só o arranjo.
   ============================================================ */
@media (max-width:1180px){
  .area-ambiente .amb-cols{grid-template-columns:1fr}
}
@media (max-width:860px){
  /* alvo de toque de 44 px, como manda o Estilos v.A §1.2 */
  .area-ambiente .amb-li,
  .area-ambiente .amb-med,
  .area-ambiente .amb-dobra-cab{min-height:44px}
  .area-ambiente .amb-busca{width:100%;min-height:44px}
  .area-ambiente .amb-canvas .zoom button{width:44px;height:44px}
  .area-ambiente .amb-meds{grid-template-columns:1fr 1fr}
  .area-ambiente .amb-nums{grid-template-columns:1fr 1fr}
  .area-ambiente .amb-canvas{min-height:320px;margin:10px}
  .area-ambiente .amb-ctx-bt .bt{flex:1 1 auto;justify-content:center}
  /* a célula de medida, no cartão de linha, fica em uma linha só */
  .area-ambiente .amb-cel{justify-content:flex-start}
  .area-ambiente .amb-cel .amb-mini{margin-left:10px}
}
@media (max-width:560px){
  .area-ambiente .amb-meds{grid-template-columns:1fr}
  .area-ambiente .amb-nums{grid-template-columns:1fr}
  .area-ambiente .amb-graf-cab span{font-size:11px}
}

/* ============================================================
   ALVO DE TOQUE — ≤ 860 px, o piso de 44 px do Estilos v.A §1.2.
   A base já levanta .bt, .gb e o menu; estas peças ficavam de
   fora porque vêm do mock aprovado com a altura de mesa. Aqui
   elas sobem SÓ DENTRO DESTA ÁREA, e só no toque: na mesa a
   escala compacta v.A continua intacta.
   (Pedido para os arquivos compartilhados: subir .aba, .campo e
   o atalho do cartão para 44 px no toque, em componentes.css.)
   ============================================================ */
@media (max-width:860px){
  .area-ambiente .aba{height:44px}
  .area-ambiente .campo input,
  .area-ambiente .campo select,
  .area-ambiente .campo textarea{min-height:44px}
  .area-ambiente .amb-busca input{min-height:44px;align-self:stretch}
  .area-ambiente .kpi .baixo{height:44px}
  .area-ambiente .kpi .baixo .atalho{min-height:44px;align-items:center}
  .area-ambiente .faixa a{display:inline-flex;align-items:center;min-height:44px}
  .area-ambiente .la-it .quando{min-height:44px;display:inline-flex;align-items:center}
}

/* o rodapé do cartão de contagem encosta no pé do cartão, para a
   linha de cartões ficar alinhada mesmo com legendas de alturas
   diferentes (no mock todos os cartões tinham a mesma legenda) */
.area-ambiente .kpi{display:flex;flex-direction:column}
.area-ambiente .kpi .cima{flex:1 1 auto}
.area-ambiente .kpi .baixo{margin-top:auto}

/* ============================================================
   CONSERTO LOCAL DE UM ERRO DE ORDEM NOS ARQUIVOS COMPARTILHADOS
   base.css ajusta .kpis, .duplo, .grade22, .barraflutua, .rosca,
   o cabeçalho do painel e a tabela dentro de @media (max-width:
   860px) — mas componentes.css é carregado DEPOIS e redefine
   essas mesmas peças SEM media query. Resultado: no celular a
   grade continua com 4 colunas e a barra flutuante continua
   ancorada, e o conteúdo é cortado.
   Aqui o conserto vale só dentro desta área. O conserto de
   verdade é mover essas regras para dentro de componentes.css
   (ou subir a media query da base para depois dele) — está no
   pedido aos donos dos arquivos compartilhados.
   ============================================================ */
@media (max-width:1180px){
  .area-ambiente .kpis{grid-template-columns:repeat(3,1fr);gap:14px}
  .area-ambiente .duplo{grid-template-columns:1fr;height:auto}
}
@media (max-width:860px){
  .area-ambiente .kpis{grid-template-columns:1fr 1fr;gap:10px}
  .area-ambiente .duplo{grid-template-columns:1fr;height:auto}
  .area-ambiente .painel>.cab{height:auto;min-height:44px;flex-wrap:wrap;padding:8px 12px;row-gap:6px}
  .area-ambiente .painel>.cab .dir{margin-left:0;flex-wrap:wrap;row-gap:6px}
  .area-ambiente .tabwrap{overflow-x:auto;overflow-y:hidden}
  .area-ambiente .rosca{width:160px;height:160px}
  .area-ambiente .painel.crescer{min-height:0}
}