/* ============================================================
   REDES.LAB ON · Controle do formulário e da janela de coleta
   Folha própria da tela screen_formularios.jsx. Usa só os tokens
   de styles.css, para herdar a identidade e o modo claro e o
   escuro sem repetir cor.
   Carregada pelo próprio módulo (o .jsx injeta o link).

   Regra de leiaute desta folha: nada encosta na margem, texto
   longo quebra em vez de esticar o cartão, e toda tabela larga
   rola dentro do próprio quadro, nunca a página inteira.
   ============================================================ */

/* ---------- cartões de resumo ---------- */
.fml-resumo{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:16px;margin-bottom:22px;
}
.fml-metrica{padding:16px 18px;min-width:0;}
.fml-metrica .fml-ico{
  width:34px;height:34px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;
}
.fml-metrica .fml-num{
  font-family:var(--serif);font-weight:800;font-size:28px;
  letter-spacing:-.02em;line-height:1;margin-top:10px;
}
.fml-metrica .fml-sub{
  font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--body-soft);margin-top:5px;line-height:1.4;
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
}
.fml-metrica .fml-nota{
  font-family:var(--mono);font-size:11px;color:var(--body-soft);
  margin-top:7px;line-height:1.5;overflow-wrap:anywhere;
}

/* ---------- abas internas ---------- */
.fml-abas{
  display:flex;flex-wrap:wrap;gap:6px;
  background:var(--surface-sunk);
  border:1px solid var(--rule-soft);
  border-radius:25px;
  padding:5px;margin-bottom:20px;
}
.fml-aba{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:11.5px;font-weight:700;
  letter-spacing:.06em;
  padding:9px 15px;border-radius:var(--r-pill);
  border:1px solid transparent;background:transparent;color:var(--body);
  transition:background .15s ease,color .15s ease,box-shadow .15s ease;
  min-height:38px;cursor:pointer;
}
.fml-aba:hover{color:var(--ink);}
.fml-aba.ativa{background:var(--surface);color:var(--primary);box-shadow:var(--shadow);}
.fml-aba .fml-cont{
  font-size:10px;padding:1px 7px;border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--primary) 14%,transparent);
  color:var(--primary);
}

/* ---------- bloco ---------- */
.fml-bloco{padding:20px 22px;margin-bottom:18px;}
.fml-bloco-h{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:14px;flex-wrap:wrap;margin-bottom:16px;
}
.fml-bloco-t{min-width:0;flex:1 1 260px;}
.fml-bloco-h .fml-t{
  font-family:var(--serif);font-weight:700;font-size:17px;
  color:var(--ink);letter-spacing:-.01em;
}
.fml-bloco-h .fml-s{
  font-family:var(--mono);font-size:11.5px;color:var(--body-soft);
  margin-top:3px;line-height:1.5;
}
.fml-h-acoes{display:flex;gap:8px;flex-wrap:wrap;}
.fml-t{font-family:var(--serif);font-weight:700;font-size:17px;color:var(--ink);letter-spacing:-.01em;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.fml-carregando{
  font-family:var(--mono);font-size:12.5px;color:var(--body-soft);
  padding:26px 0;text-align:center;
}
.fml-vazio{
  font-family:var(--mono);font-size:11.5px;color:var(--body-soft);
  line-height:1.6;overflow-wrap:anywhere;
}

/* ---------- avisos ---------- */
.fml-aviso{
  font-family:var(--mono);font-size:12px;line-height:1.6;color:var(--ink-2);
  background:var(--surface-sunk);
  border-left:3px solid var(--amarelo-neon);
  border-radius:0 12px 12px 0;padding:12px 15px;margin-bottom:14px;
  overflow-wrap:anywhere;
}
.fml-aviso b{color:var(--ink);}
.fml-aviso.erro{border-left-color:var(--magenta-vivo);}
.fml-aviso.erro b{color:var(--magenta-vivo);}
.fml-aviso.ok{border-left-color:var(--ciano-vivo);}
.fml-aviso.ok b{color:var(--ciano-vivo);}

/* ---------- etiquetas ---------- */
.fml-etiq{
  font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  padding:3px 9px;border-radius:var(--r-pill);
  background:var(--surface-sunk);color:var(--body-soft);
  display:inline-flex;align-items:center;white-space:nowrap;
}
.fml-etiq.forte{
  background:color-mix(in srgb,var(--primary) 13%,transparent);
  color:var(--primary);
}
.fml-pendente{
  font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:.06em;color:var(--magenta-vivo);
  background:color-mix(in srgb,var(--magenta-vivo) 12%,transparent);
  padding:2px 8px;border-radius:var(--r-pill);white-space:nowrap;
}
.fml-chave{
  font-family:var(--mono);font-size:10px;color:var(--body-soft);
  background:var(--surface-sunk);border:1px solid var(--rule-soft);
  padding:2px 7px;border-radius:7px;letter-spacing:.02em;
  overflow-wrap:anywhere;
}

/* ============================================================
   ABA 1 · O FORMULÁRIO
   ============================================================ */
.fml-inst-lista{display:flex;flex-direction:column;gap:12px;}
.fml-inst{padding:0;overflow:hidden;}
.fml-inst.aberto{border-color:color-mix(in srgb,var(--primary) 28%,transparent);}
.fml-inst-cab{
  width:100%;display:flex;align-items:center;gap:14px;
  padding:16px 18px;background:transparent;border:none;
  text-align:left;cursor:pointer;min-width:0;
}
.fml-inst-cab:hover{background:var(--surface-sunk);}
.fml-inst-key{
  font-family:var(--mono);font-size:11px;font-weight:800;
  letter-spacing:.1em;padding:6px 10px;border-radius:9px;
  flex:0 0 auto;
}
.fml-inst-txt{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1 1 auto;}
.fml-inst-nome{
  font-family:var(--serif);font-weight:700;font-size:15px;color:var(--ink);
  overflow-wrap:anywhere;
}
.fml-inst-sub{
  font-family:var(--mono);font-size:11px;color:var(--body-soft);
  line-height:1.5;overflow-wrap:anywhere;
}
.fml-inst-cont{
  font-family:var(--mono);font-size:11px;color:var(--body-soft);
  flex:0 0 auto;text-align:right;
}
.fml-chev{color:var(--body-soft);display:flex;flex:0 0 auto;transition:transform .18s ease;}
.fml-chev.on{transform:rotate(180deg);color:var(--primary);}

.fml-gaveta{
  padding:4px 18px 20px;border-top:1px solid var(--rule-soft);
  animation:rlFade .28s ease both;
}
.fml-inst-desc{
  font-family:var(--mono);font-size:12px;color:var(--body);
  line-height:1.6;margin:14px 0;
}
.fml-resumo-inst{
  display:flex;flex-wrap:wrap;gap:8px 20px;
  font-family:var(--mono);font-size:11.5px;color:var(--body-soft);
  padding:12px 14px;background:var(--surface-sunk);
  border-radius:var(--r-sm);margin-bottom:18px;
}
.fml-resumo-inst b{color:var(--ink);font-size:13px;}

.fml-bloco-perg{margin-bottom:22px;}
.fml-bloco-perg:last-child{margin-bottom:0;}
.fml-bloco-nome{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  font-family:var(--mono);font-size:10.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);
  margin-bottom:12px;
}
.fml-bloco-i{width:8px;height:8px;border-radius:50%;flex:0 0 auto;}
.fml-bloco-cont{
  font-size:10px;letter-spacing:.04em;padding:1px 7px;
  border-radius:var(--r-pill);background:var(--surface-sunk);
  color:var(--body-soft);
}

.fml-perg-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.fml-perg{
  display:flex;gap:12px;align-items:flex-start;
  background:var(--surface-sunk);
  border:1px solid var(--rule-soft);
  border-radius:var(--r-md);padding:14px 16px;min-width:0;
}
.fml-perg-n{
  font-family:var(--mono);font-size:11px;font-weight:800;
  color:var(--body-soft);background:var(--surface);
  border:1px solid var(--rule-soft);
  width:26px;height:26px;border-radius:8px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
}
.fml-perg-corpo{min-width:0;flex:1 1 auto;}
.fml-perg-enun{
  font-family:var(--serif);font-weight:600;font-size:14px;
  color:var(--ink);line-height:1.45;overflow-wrap:anywhere;
}
.fml-perg-marcas{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px;}
.fml-perg-ajuda{
  font-family:var(--mono);font-size:11.5px;color:var(--body);
  line-height:1.6;margin-top:8px;padding-left:11px;
  border-left:2px solid var(--rule);overflow-wrap:anywhere;
}
.fml-perg-ajuda .fml-opcoes-t{margin-bottom:4px;}
.fml-perg.fora{border-style:dashed;opacity:.72;}
.fml-perg.fora .fml-perg-enun{text-decoration:line-through;text-decoration-thickness:1px;}
.fml-opcao-livre{
  font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--body-soft);margin-left:7px;
}
.fml-opcoes{margin-top:11px;}
.fml-opcoes-t{
  font-family:var(--mono);font-size:9.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--body-soft);
  display:block;margin-bottom:6px;
}
.fml-opcoes-l{display:flex;flex-wrap:wrap;gap:6px;}
.fml-opcao{
  font-family:var(--mono);font-size:11.5px;color:var(--ink-2);
  background:var(--surface);border:1px solid var(--rule);
  padding:4px 10px;border-radius:var(--r-pill);
  overflow-wrap:anywhere;max-width:100%;
}
.fml-depende,.fml-alimenta{
  display:flex;align-items:flex-start;gap:7px;margin-top:10px;
  font-family:var(--mono);font-size:11.5px;color:var(--body-soft);
  line-height:1.5;overflow-wrap:anywhere;
}
.fml-depende svg,.fml-alimenta svg{flex:0 0 auto;margin-top:2px;}
.fml-depende b,.fml-alimenta b{color:var(--ink-2);}
.fml-alimenta.tem{color:var(--ciano-vivo);}
.fml-alimenta.tem b{color:var(--ciano-vivo);}
.fml-depende .fml-chave{margin-left:6px;}

/* ============================================================
   ABA 2 · INDICADORES
   ============================================================ */
.fml-ind-grade{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:12px;margin-bottom:18px;
}
.fml-ind-card{
  display:flex;flex-direction:column;gap:6px;align-items:flex-start;
  text-align:left;padding:14px 16px;min-width:0;cursor:pointer;
  background:var(--surface-sunk);
  border:1.5px solid var(--rule-soft);
  border-radius:var(--r-md);
  transition:border-color .15s ease,background .15s ease;
}
.fml-ind-card:hover{border-color:color-mix(in srgb,var(--primary) 40%,transparent);}
.fml-ind-card.on{
  border-color:var(--primary);
  background:color-mix(in srgb,var(--primary) 8%,transparent);
}
.fml-ind-card.vazio{opacity:.72;}
.fml-ind-camada{
  font-family:var(--mono);font-size:9.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--body-soft);
  overflow-wrap:anywhere;
}
.fml-ind-nome{
  font-family:var(--serif);font-weight:700;font-size:14.5px;
  color:var(--ink);line-height:1.3;overflow-wrap:anywhere;
}
.fml-ind-pe{
  font-family:var(--mono);font-size:11px;color:var(--body-soft);
  display:flex;flex-wrap:wrap;gap:6px;align-items:center;
}

.fml-ind-detalhe{
  border:1.5px solid color-mix(in srgb,var(--primary) 32%,transparent);
  border-radius:var(--r-md);padding:16px 18px;margin-bottom:18px;
  background:var(--surface);
}
.fml-ind-detalhe-h{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:12px;margin-bottom:14px;
}
.fml-ind-ficha{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:12px;padding:12px 14px;background:var(--surface-sunk);
  border-radius:var(--r-sm);margin-bottom:14px;
}
.fml-ind-ficha > div{display:flex;flex-direction:column;gap:4px;min-width:0;}
.fml-ind-ficha b{
  font-family:var(--mono);font-size:12.5px;color:var(--ink);
  font-weight:600;overflow-wrap:anywhere;
}
.fml-ind-perguntas{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.fml-ind-perguntas li{display:flex;gap:10px;align-items:flex-start;min-width:0;}
.fml-ind-perg-t{
  font-family:var(--serif);font-weight:600;font-size:13.5px;
  color:var(--ink);line-height:1.45;min-width:0;overflow-wrap:anywhere;
  display:flex;flex-direction:column;gap:3px;
}
.fml-ind-perg-s{
  font-family:var(--mono);font-weight:400;font-size:11px;
  color:var(--body-soft);letter-spacing:0;
}
.fml-sem-ind{
  border-top:1px solid var(--rule-soft);padding-top:16px;margin-top:4px;
}
.fml-sem-ind-l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.fml-sem-ind-l li{
  display:flex;gap:9px;align-items:flex-start;
  font-family:var(--mono);font-size:12px;color:var(--body);
  line-height:1.5;overflow-wrap:anywhere;
}

/* ============================================================
   ABA 3 · QUEM RESPONDEU
   ============================================================ */
.fml-filtros{
  display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;
  background:var(--surface-sunk);
  border:1px solid var(--rule-soft);
  border-radius:var(--r-md);padding:14px 16px;margin-bottom:16px;
}
.fml-campo{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1 1 190px;}
.fml-campo-largo{flex:2 1 240px;}
.fml-campo > label{
  font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--body-soft);
}
.fml-input,.fml-select{
  width:100%;font-family:var(--mono);font-size:13px;color:var(--ink);
  background:var(--surface);border:1.5px solid var(--rule);
  border-radius:12px;padding:10px 12px;outline:none;min-height:42px;
  transition:border-color .15s ease;
}
.fml-input:focus,.fml-select:focus{border-color:var(--primary);}
.fml-input::placeholder{color:var(--body-soft);}
.fml-input:disabled,.fml-select:disabled{opacity:.55;cursor:not-allowed;}
.fml-check{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:12.5px;color:var(--ink);
  cursor:pointer;min-height:42px;flex:0 0 auto;
}
.fml-check input{width:17px;height:17px;accent-color:var(--primary);cursor:pointer;}

.fml-placar{
  display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px;
}
.fml-placar-i{
  background:var(--surface-sunk);border-radius:var(--r-md);
  padding:12px 14px;min-width:0;
}
.fml-placar-i b{
  font-family:var(--serif);font-weight:800;font-size:24px;
  color:var(--ink);display:block;line-height:1.1;
}
.fml-placar-i span{
  font-family:var(--mono);font-size:10.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--body-soft);
  margin-top:5px;line-height:1.4;
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
}

.fml-tabela-wrap{overflow-x:auto;margin:0 -6px;}
.fml-tabela{min-width:660px;}
.fml-org{display:flex;align-items:center;gap:10px;min-width:0;}
.fml-av{
  width:32px;height:32px;border-radius:10px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:11px;font-weight:800;color:#fff;
  letter-spacing:.04em;
}
.fml-org-t{display:flex;flex-direction:column;gap:2px;min-width:0;}
.fml-org-t b{
  font-family:var(--serif);font-weight:700;font-size:13.5px;color:var(--ink);
  overflow-wrap:anywhere;
}
.fml-org-s{font-family:var(--mono);font-size:10.5px;color:var(--body-soft);overflow-wrap:anywhere;}
.fml-prog{display:flex;flex-direction:column;gap:6px;min-width:120px;}
.fml-prog-barra{
  height:8px;border-radius:var(--r-pill);
  background:var(--surface-sunk);overflow:hidden;width:100%;
}
.fml-prog-fill{display:block;height:100%;border-radius:var(--r-pill);}
.fml-prog-t{font-family:var(--mono);font-size:10.5px;color:var(--body-soft);}

/* ============================================================
   ABA 4 · JANELA DE COLETA
   ============================================================ */
.fml-nenhum-ciclo{
  text-align:center;padding:34px 20px;
  border:1.5px dashed var(--rule);border-radius:var(--r-md);
  margin-bottom:18px;
}
.fml-nenhum-ico{
  width:56px;height:56px;border-radius:18px;margin:0 auto 14px;
  background:var(--surface-sunk);color:var(--primary);
  display:flex;align-items:center;justify-content:center;
}
.fml-nenhum-ciclo .fml-t{justify-content:center;margin-bottom:8px;}
.fml-nenhum-ciclo p{
  font-family:var(--mono);font-size:12px;color:var(--body-soft);
  line-height:1.65;max-width:56ch;margin:0 auto 16px;
}

.fml-form{
  background:var(--surface-sunk);
  border:1px solid var(--rule-soft);
  border-radius:var(--r-md);padding:16px;margin-bottom:18px;
}
.fml-campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;}
.fml-campos .fml-campo{flex:none;}
.fml-acoes{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:14px;}

.fml-regras{
  background:var(--surface-sunk);border-radius:var(--r-md);
  padding:14px 16px;margin-bottom:18px;
}
.fml-regras ul{margin:0;padding-left:18px;}
.fml-regras li{
  font-family:var(--mono);font-size:11.5px;color:var(--body);
  line-height:1.7;overflow-wrap:anywhere;
}
.fml-regras li::marker{color:var(--ink);}

.fml-ciclos{display:flex;flex-direction:column;gap:12px;}
.fml-ciclo{padding:16px 18px;min-width:0;}
.fml-ciclo.aberto{border-color:color-mix(in srgb,var(--amarelo-neon) 50%,transparent);}
.fml-ciclo-h{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:12px;flex-wrap:wrap;
}
.fml-ciclo-id{display:flex;align-items:center;gap:14px;min-width:0;}
.fml-ciclo-n{
  font-family:var(--serif);font-weight:800;font-size:22px;color:var(--primary);
  background:color-mix(in srgb,var(--primary) 11%,transparent);
  width:44px;height:44px;border-radius:13px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
}
.fml-ciclo-t{display:flex;flex-direction:column;gap:3px;min-width:0;}
.fml-ciclo-t b{
  font-family:var(--serif);font-weight:700;font-size:15px;color:var(--ink);
  overflow-wrap:anywhere;
}
.fml-ciclo-d{font-family:var(--mono);font-size:11.5px;color:var(--body-soft);}
.fml-ciclo-prazo{
  display:flex;align-items:center;gap:7px;margin-top:12px;
  font-family:var(--mono);font-size:11.5px;color:var(--body-soft);
}
.fml-ciclo-acao{
  margin-top:14px;padding:14px 16px;border-radius:var(--r-md);
  background:var(--surface-sunk);border:1px solid var(--rule-soft);
}
.fml-ciclo-acao.perigo{
  border-color:color-mix(in srgb,var(--magenta-vivo) 40%,transparent);
  background:color-mix(in srgb,var(--magenta-vivo) 7%,transparent);
}
.fml-confirma-t{
  font-family:var(--serif);font-weight:700;font-size:15px;
  color:var(--magenta-vivo);margin-bottom:6px;
}
.fml-ciclo-acao .fml-campo{max-width:260px;}

/* ============================================================
   TELAS ESTREITAS
   O projeto já apanhou de quebra de leiaute: aqui as grades
   viram coluna, a tabela rola dentro do quadro e os cabeçalhos
   dos cartões deixam de disputar espaço na mesma linha.
   ============================================================ */
@media (max-width:1080px){
  .fml-resumo{grid-template-columns:repeat(2,1fr);}
}

@media (max-width:760px){
  .fml-resumo{grid-template-columns:1fr;}
  .fml-placar{grid-template-columns:repeat(2,1fr);}
  .fml-bloco{padding:16px 14px;}
  .fml-metrica .fml-num{font-size:24px;}
  .fml-abas{border-radius:var(--r-md);}
  .fml-aba{flex:1 1 132px;justify-content:center;padding:9px 10px;}
  .fml-aba .fml-aba-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .fml-inst-cab{flex-wrap:wrap;gap:10px;padding:14px;}
  .fml-inst-txt{flex:1 1 100%;order:3;}
  .fml-inst-cont{flex:1 1 auto;text-align:left;order:2;}
  .fml-gaveta{padding:4px 14px 18px;}
  .fml-perg{padding:12px 13px;gap:10px;}
  .fml-ind-grade{grid-template-columns:1fr;}
  .fml-ciclo-h{flex-direction:column;align-items:flex-start;}
  .fml-ciclo-acao .fml-campo{max-width:none;}
  .fml-nenhum-ciclo{padding:26px 14px;}
  .fml-filtros{padding:12px;}
  .fml-campo,.fml-campo-largo{flex:1 1 100%;}
  .fml-check{width:100%;}
}

@media (max-width:430px){
  .fml-placar{grid-template-columns:1fr;}
  .fml-aba{flex:1 1 100%;}
  .fml-perg-n{width:24px;height:24px;font-size:10px;}
  .fml-ciclo-n{width:38px;height:38px;font-size:19px;}
  .fml-acoes .btn{flex:1 1 100%;justify-content:center;}
}
