/* ============================================================
   REDES.LAB ON · Folha das telas da versão final
   ------------------------------------------------------------
   Cobre as quatro telas que entraram no fechamento:
     • Contatos das organizações      (AR27)
     • Valor aprovado dos projetos    (Vale)
     • Item novo na tabela de referência (oCamino)
     • Grupos da jornada              (AR27, Vale e oCamino)

   Prefixo fx-. Injetada pelos próprios módulos, com guarda por
   identificador, para cada tela funcionar sozinha.

   TRÊS REGRAS
   1. Nada de esconder texto para caber. Frase que explica o que
      falta nunca é cortada com reticências: a caixa cresce.
   2. Número absoluto e percentual moram juntos, e o absoluto tem
      o corpo maior. Percentual sozinho, em base pequena, mente.
   3. Em 390px tudo vira uma coluna só, e a tabela larga rola
      dentro da própria caixa, nunca empurrando a página.
   ============================================================ */

/* ---------- placar de cabeçalho ---------- */
.fx-placar{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
  gap:12px;
  margin-bottom:18px;
}
.fx-placar-i{
  padding:15px 17px;
  border-radius:var(--r-md);
  background:var(--surface);
  border:1px solid var(--rule-soft);
  box-shadow:var(--shadow);
}
.fx-placar-n{
  font-size:30px;
  line-height:1.05;
  font-weight:700;
  color:var(--ink);
  letter-spacing:-0.02em;
}
.fx-placar-n.alerta{color:var(--primary);}
.fx-placar-n.calmo{color:var(--ciano-vivo);}
.fx-placar-l{
  margin-top:6px;
  font-family:var(--mono);
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--body-soft);
}
.fx-placar-d{
  margin-top:5px;
  font-size:12px;
  line-height:1.5;
  color:var(--body);
}

/* ---------- faixa de recado ---------- */
.fx-faixa{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:13px 15px;
  border-radius:var(--r-sm);
  border:1px solid var(--rule);
  background:var(--surface-sunk);
  font-size:13px;
  line-height:1.6;
  color:var(--body);
  margin-bottom:16px;
}
.fx-faixa.alerta{
  border-color:color-mix(in srgb,var(--primary) 40%,transparent);
  background:color-mix(in srgb,var(--primary) 8%,transparent);
}
.fx-faixa.ok{
  border-color:color-mix(in srgb,var(--ciano-vivo) 40%,transparent);
  background:color-mix(in srgb,var(--ciano-vivo) 8%,transparent);
}
.fx-faixa svg{flex:0 0 auto;margin-top:2px;color:var(--body-soft);}
.fx-faixa b{color:var(--ink);}

/* ---------- lista de organizações ---------- */
.fx-lista{display:flex;flex-direction:column;gap:10px;}
.fx-item{
  padding:14px 16px;
  border-radius:var(--r-md);
  background:var(--surface);
  border:1px solid var(--rule-soft);
  box-shadow:var(--shadow);
}
.fx-item.falta{border-left:3px solid var(--primary);}
.fx-item-h{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
}
.fx-item-nome{min-width:0;flex:1 1 220px;}
.fx-item-nome b{
  display:block;
  font-size:14.5px;
  color:var(--ink);
  line-height:1.35;
}
.fx-item-sub{
  margin-top:3px;
  font-size:12px;
  color:var(--body-soft);
  line-height:1.5;
}
.fx-item-acoes{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}

/* seleção para o disparo */
.fx-marca{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12.5px;
  color:var(--body);
  cursor:pointer;
  user-select:none;
}
.fx-marca input{width:17px;height:17px;accent-color:var(--primary);cursor:pointer;flex:0 0 auto;}
.fx-marca.travada{opacity:.55;cursor:not-allowed;}
.fx-marca.travada input{cursor:not-allowed;}

/* contato já cadastrado */
.fx-contato{
  margin-top:11px;
  padding:11px 13px;
  border-radius:var(--r-sm);
  background:var(--surface-sunk);
  border:1px solid var(--rule-soft);
}
.fx-contato-l{
  display:flex;
  flex-wrap:wrap;
  gap:5px 16px;
  font-size:12.5px;
  color:var(--body);
  line-height:1.6;
}
.fx-contato-l span b{color:var(--ink);}

/* ---------- formulário ---------- */
.fx-form{
  margin-top:12px;
  padding:14px;
  border-radius:var(--r-sm);
  border:1.5px dashed var(--rule);
  background:var(--surface-sunk);
}
.fx-campos{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:12px;
}
.fx-campo{display:flex;flex-direction:column;gap:5px;min-width:0;}
.fx-campo label{
  font-family:var(--mono);
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--body-soft);
}
.fx-input,.fx-select,.fx-area{
  width:100%;
  padding:9px 11px;
  border-radius:10px;
  border:1px solid var(--rule);
  background:var(--surface);
  color:var(--ink);
  font-family:var(--serif);
  font-size:14px;
  line-height:1.45;
}
.fx-area{min-height:96px;resize:vertical;}
.fx-input:focus,.fx-select:focus,.fx-area:focus{
  outline:2px solid color-mix(in srgb,var(--primary) 45%,transparent);
  outline-offset:1px;
  border-color:var(--primary);
}
.fx-input:disabled,.fx-select:disabled,.fx-area:disabled{opacity:.6;}
.fx-input.ruim,.fx-select.ruim{border-color:var(--primary);}
.fx-erro{
  font-size:12px;
  line-height:1.5;
  color:var(--primary);
}
.fx-dica{
  font-size:11.5px;
  line-height:1.5;
  color:var(--body-soft);
}
.fx-acoes{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;align-items:center;}

/* ---------- valor em reais ---------- */
.fx-reais{
  display:flex;
  align-items:center;
  gap:7px;
  padding:0 11px;
  border-radius:10px;
  border:1px solid var(--rule);
  background:var(--surface);
}
.fx-reais > span{
  font-family:var(--mono);
  font-size:12.5px;
  color:var(--body-soft);
  flex:0 0 auto;
}
.fx-reais input{
  border:0;
  background:transparent;
  color:var(--ink);
  font-family:var(--serif);
  font-size:15px;
  padding:9px 0;
  width:100%;
  min-width:0;
}
.fx-reais input:focus{outline:none;}
.fx-reais:focus-within{
  border-color:var(--primary);
  outline:2px solid color-mix(in srgb,var(--primary) 45%,transparent);
  outline-offset:1px;
}

/* ---------- a porta: tela de trava ---------- */
.fx-porta{max-width:820px;margin:0 auto;}
.fx-porta-t{
  font-size:23px;
  line-height:1.25;
  font-weight:700;
  color:var(--ink);
  letter-spacing:-0.02em;
  margin-bottom:8px;
}
.fx-porta-p{
  font-size:14px;
  line-height:1.7;
  color:var(--body);
  max-width:62ch;
}
.fx-passo{
  display:flex;
  gap:11px;
  align-items:baseline;
  font-size:13px;
  line-height:1.6;
  color:var(--body);
  padding:7px 0;
}
.fx-passo i{
  font-style:normal;
  font-family:var(--mono);
  font-size:11px;
  font-weight:700;
  color:var(--primary);
  flex:0 0 auto;
}

/* ---------- grupos da jornada ---------- */
.fx-grupos{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:12px;
}
.fx-grupo{
  padding:16px 17px;
  border-radius:var(--r-md);
  background:var(--surface);
  border:1px solid var(--rule-soft);
  border-top:3px solid var(--azul-eletrico);
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  gap:8px;
}
.fx-grupo-t{
  font-size:14.5px;
  font-weight:700;
  color:var(--ink);
  line-height:1.35;
}
.fx-grupo-n{
  font-size:34px;
  line-height:1;
  font-weight:700;
  color:var(--ink);
  letter-spacing:-0.03em;
}
.fx-grupo-n small{
  display:block;
  margin-top:5px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--body-soft);
  font-family:var(--mono);
}
.fx-grupo-p{
  font-size:12.5px;
  line-height:1.6;
  color:var(--body);
}
.fx-grupo-base{
  margin-top:auto;
  padding-top:9px;
  border-top:1px solid var(--rule-soft);
  font-family:var(--mono);
  font-size:11px;
  color:var(--body-soft);
  line-height:1.5;
}

/* aviso de base pequena */
.fx-fragil{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:2px 8px;
  border-radius:var(--r-pill);
  border:1px dashed color-mix(in srgb,var(--amarelo-neon) 65%,var(--rule));
  background:color-mix(in srgb,var(--amarelo-neon) 12%,transparent);
  font-family:var(--mono);
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--ink-2);
  white-space:nowrap;
}

/* número com o absoluto na frente e o percentual atrás */
.fx-par{display:inline-flex;align-items:baseline;gap:6px;flex-wrap:wrap;}
.fx-par b{font-size:15px;color:var(--ink);}
.fx-par i{
  font-style:normal;
  font-family:var(--mono);
  font-size:11.5px;
  color:var(--body-soft);
}
.fx-vazio-num{
  font-family:var(--mono);
  font-size:11.5px;
  color:var(--body-soft);
  border-bottom:1px dashed var(--rule);
}

/* tabela comparativa, com rolagem própria */
.fx-roll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.fx-tab{width:100%;border-collapse:collapse;min-width:640px;}
.fx-tab th,.fx-tab td{
  padding:11px 12px;
  text-align:left;
  border-bottom:1px solid var(--rule-soft);
  vertical-align:top;
  font-size:13px;
  color:var(--body);
}
.fx-tab th{
  font-family:var(--mono);
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--body-soft);
  white-space:nowrap;
}
.fx-tab tbody tr:last-child td{border-bottom:0;}
.fx-tab td:first-child{color:var(--ink);font-weight:600;}

/* ---------- resultado do disparo ---------- */
.fx-resultado{
  margin-top:14px;
  padding:14px 16px;
  border-radius:var(--r-sm);
  border:1px solid var(--rule);
  background:var(--surface-sunk);
}
.fx-resultado-t{
  font-size:14px;
  font-weight:700;
  color:var(--ink);
  margin-bottom:6px;
}
.fx-destinos{
  margin-top:12px;
  display:flex;
  flex-direction:column;
  gap:7px;
}
.fx-destino{
  display:flex;
  gap:10px;
  align-items:flex-start;
  flex-wrap:wrap;
  font-size:12.5px;
  line-height:1.55;
  color:var(--body);
  padding-bottom:7px;
  border-bottom:1px dashed var(--rule-soft);
}
.fx-destino:last-child{border-bottom:0;padding-bottom:0;}
.fx-destino b{color:var(--ink);}
.fx-destino-motivo{width:100%;color:var(--body-soft);font-size:12px;}

/* ---------- item novo da tabela de referência ---------- */
.fx-novo{
  margin-top:16px;
  padding:15px 16px;
  border-radius:var(--r-sm);
  border:1.5px dashed var(--rule);
  background:var(--surface-sunk);
}
.fx-origem{
  margin-top:5px;
  font-size:12px;
  line-height:1.55;
  color:var(--body-soft);
}
.fx-origem.sem{color:var(--primary);}
.fx-etiq{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:2px 8px;
  border-radius:var(--r-pill);
  background:var(--surface-sunk);
  border:1px solid var(--rule-soft);
  font-family:var(--mono);
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--body-soft);
}
.fx-etiq.perigo{
  color:var(--primary);
  border-color:color-mix(in srgb,var(--primary) 45%,transparent);
  background:color-mix(in srgb,var(--primary) 10%,transparent);
}

/* ---------- vazio explicado ---------- */
.fx-vazio{
  padding:22px 20px;
  text-align:center;
  border-radius:var(--r-md);
  border:1.5px dashed var(--rule);
  background:var(--surface-sunk);
}
.fx-vazio-t{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:7px;}
.fx-vazio-p{
  font-size:13px;
  line-height:1.65;
  color:var(--body);
  max-width:60ch;
  margin:0 auto;
}
.fx-vazio-f{
  display:inline-block;
  margin-top:10px;
  font-family:var(--mono);
  font-size:11px;
  color:var(--body-soft);
}

/* ---------- celular ---------- */
@media (max-width:820px){
  .fx-placar{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));}
  .fx-placar-n{font-size:26px;}
  .fx-grupos{grid-template-columns:1fr;}
}
@media (max-width:430px){
  .fx-placar{grid-template-columns:1fr 1fr;gap:9px;}
  .fx-placar-i{padding:12px 13px;}
  .fx-campos{grid-template-columns:1fr;}
  .fx-item{padding:12px 13px;}
  .fx-item-h{gap:9px;}
  .fx-acoes .btn{flex:1 1 auto;justify-content:center;}
  .fx-grupo-n{font-size:30px;}
}