/* tela-fluxo — Fluxo automático e Fila de erros (desenhos de 2026-10-16). */
.tela-fluxo { display: flex; flex-direction: column; gap: 18px; }
.cab-fx { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.cab-fx h1 { font-size: 32px; font-weight: 700; margin: 0; display: flex; align-items: center; gap: 12px; }
.cab-fx p { margin: 6px 0 0; color: var(--sub); font-size: 16px; }
.cab-fx .botao-contorno { height: 42px; }
.badge-fx { font-size: 15px; font-weight: 600; padding: 3px 10px; border-radius: 6px; background: var(--cartao-2); border: 1px solid var(--borda-forte); }

/* KPIs */
.kpis-fx { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.kpi-fx { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; background: var(--cartao); border: 1px solid var(--borda); border-radius: 10px; padding: 18px 20px; color: var(--texto); text-decoration: none; min-height: 100px; }
a.kpi-fx:hover { border-color: var(--borda-forte); }
.kpi-fx.ativo { border-color: var(--marca); box-shadow: 0 0 0 1px var(--marca); }
.kpi-fx-esq { justify-content: flex-start; }
.kpi-fx > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.kpi-fx-rotulo { font-size: 15px; font-weight: 500; }
.kpi-fx strong { font-size: 30px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi-fx-sub { color: var(--sub); font-size: 13px; overflow-wrap: anywhere; }
.kpi-fx-icone { width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--cartao-2); }
.kpi-fx-icone .ico { width: 24px; height: 24px; }
.kpi-fx.azul .kpi-fx-icone { background: rgba(47, 107, 255, .16); color: #6c9bff; }
.kpi-fx.verde .kpi-fx-icone { background: var(--ok-fundo); color: var(--ok); }
.kpi-fx.vermelho .kpi-fx-icone { background: var(--erro-fundo); color: var(--erro); }
.kpi-fx.ambar .kpi-fx-icone { background: var(--alerta-fundo); color: var(--alerta); }
.kpi-fx.neutro .kpi-fx-icone { color: var(--sub); }
.tela-erros .kpi-fx.vermelho strong { color: var(--erro); }
.tela-erros .kpi-fx .kpi-fx-icone { width: 42px; height: 42px; }
.pilula-fx { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 500; }
.pilula-fx i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.pilula-fx.ok { background: var(--ok-fundo); color: var(--ok); }
.pilula-fx.off { background: var(--cartao-2); color: var(--sub); }

/* Banner de erros */
.banner-fx { display: flex; align-items: center; gap: 18px; padding: 18px 22px; border-radius: 10px; background: rgba(229, 72, 77, .12); border: 1px solid rgba(229, 72, 77, .45); color: var(--texto); text-decoration: none; }
.banner-fx .banner-fx-icone { color: #e5484d; opacity: 1; display: grid; place-items: center; }
.banner-fx-icone .ico { width: 40px; height: 40px; }
.banner-fx > div { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.banner-fx strong { font-size: 17px; }
.banner-fx > div > span { color: var(--texto); opacity: .85; font-size: 14px; }
.banner-fx-link { color: #6c9bff !important; opacity: 1 !important; font-weight: 600; font-size: 15px !important; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.banner-fx:hover .banner-fx-link { text-decoration: underline; }

/* Grade principal do Fluxo */
.grade-fx { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; align-items: start; margin: 0; }
.coluna-fx { display: flex; flex-direction: column; gap: 18px; }
.cartao-fx { background: var(--cartao); border: 1px solid var(--borda); border-radius: 10px; padding: 20px; }
.cartao-fx h2 { font-size: 19px; margin: 0; }
.sub-fx { color: var(--sub); margin: 6px 0 16px; font-size: 14px; }
.canais-fx { display: flex; flex-direction: column; gap: 6px; }
.canal-fx { display: grid; grid-template-columns: 52px minmax(0, 1fr) 150px 130px; align-items: center; gap: 14px; padding: 12px 16px; border: 1px solid var(--borda); border-radius: 8px; background: var(--cartao-2); cursor: pointer; }
.canal-fx-logo { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 10px; color: var(--texto); }
.canal-fx-logo .ico, .canal-fx-logo .logo-fx { width: 36px; height: 36px; }
.canal-fx-texto { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.canal-fx-texto strong { font-size: 16px; font-weight: 600; }
.canal-fx-texto span { color: var(--sub); font-size: 13px; }
.canal-fx-desde { color: var(--texto); font-size: 14px; }
.canal-fx-desde span { display: block; color: var(--sub); font-size: 13px; }
.toggle-fx { position: relative; display: inline-flex; align-items: center; gap: 12px; font-size: 14px; color: var(--sub); justify-self: end; }
.toggle-fx input { position: absolute; opacity: 0; width: 46px; height: 26px; margin: 0; cursor: pointer; }
.trilho-fx { width: 46px; height: 26px; border-radius: 999px; background: var(--borda-forte); position: relative; transition: background .15s; flex: none; }
.trilho-fx::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #e8ecf2; transition: transform .15s; }
.toggle-fx input:checked + .trilho-fx { background: var(--marca); }
.toggle-fx input:checked + .trilho-fx::after { transform: translateX(20px); background: #fff; }
.toggle-fx input:focus-visible + .trilho-fx { outline: 2px solid var(--marca); outline-offset: 2px; }
.toggle-fx input:disabled + .trilho-fx { opacity: .55; }
.toggle-fx .toggle-on { display: none; color: var(--texto); }
.toggle-fx:has(input:checked) .toggle-on { display: inline; }
.toggle-fx:has(input:checked) .toggle-off { display: none; }
.info-fx { display: flex; gap: 12px; align-items: flex-start; margin-top: 14px; padding: 12px 16px; border-radius: 8px; background: rgba(47, 107, 255, .08); border: 1px solid var(--borda); color: var(--sub); font-size: 13px; }
.info-fx .ico { width: 20px; height: 20px; flex: none; color: var(--sub); margin-top: 2px; }
.info-fx ul { margin: 0; padding-left: 16px; }

/* Parâmetros */
.campo-fx { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; font-size: 15px; }
.entrada-fx { display: flex; align-items: stretch; height: 42px; border: 1px solid var(--borda-forte); border-radius: 6px; overflow: hidden; background: var(--fundo); }
.entrada-fx input { flex: 1; min-width: 0; border: 0; border-radius: 0; background: transparent; padding: 0 14px; font-size: 16px; }
.entrada-fx input:focus-visible { outline: none; }
.entrada-fx:focus-within { border-color: var(--marca); }
.entrada-fx b { display: grid; place-items: center; padding: 0 16px; border-left: 1px solid var(--borda-forte); color: var(--sub); font-weight: 500; background: var(--cartao-2); }
.chips-fx { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-fx { display: inline-flex; align-items: center; gap: 4px; height: 40px; padding: 0 14px; border: 1px solid var(--borda-forte); border-radius: 6px; background: var(--cartao-2); }
.chip-fx:focus-within { border-color: var(--marca); }
.chip-fx input { width: 3.2ch; border: 0; background: transparent; padding: 0; font-size: 15px; text-align: right; }
.chip-fx input:focus-visible { outline: none; }
.chip-fx input:placeholder-shown { text-align: center; }
.chip-fx:has(input:placeholder-shown) b { display: none; }
.chip-fx b { font-weight: 400; font-size: 15px; }
.botao-fx { width: 100%; height: 46px; font-size: 16px; margin-top: 4px; }
.executores-fx { display: flex; flex-wrap: wrap; gap: 10px; }
.chip-exec { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--borda-forte); border-radius: 6px; background: var(--cartao-2); font-size: 14px; }
.chip-exec .ico-mini { width: 16px; height: 16px; }

/* Faixa da leitura do BaseLinker */
.sync-fx { display: flex; align-items: center; gap: 18px; padding: 14px 20px; background: var(--cartao); border: 1px solid var(--borda); border-radius: 10px; }
.sync-fx > .ico { width: 26px; height: 26px; color: var(--sub); }
.sync-fx-titulo { display: flex; flex-direction: column; gap: 2px; padding-right: 22px; border-right: 1px solid var(--borda); }
.sync-fx-titulo span { color: var(--sub); font-size: 13px; }
.sync-fx-estado { display: flex; flex-direction: column; gap: 2px; }
.sync-fx-estado span { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.sync-fx-estado i { width: 9px; height: 9px; border-radius: 50%; background: var(--sub); }
.sync-fx-estado.ok span { color: var(--ok); } .sync-fx-estado.ok i { background: var(--ok); }
.sync-fx-estado.alerta span { color: var(--alerta); } .sync-fx-estado.alerta i { background: var(--alerta); }
.sync-fx-estado small { color: var(--sub); font-size: 13px; }

/* Fila de erros: filtros */
.filtros-fx { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; padding: 16px 20px; background: var(--cartao); border: 1px solid var(--borda); border-radius: 10px; margin: 0; }
.filtros-fx > label { display: flex; align-items: center; gap: 12px; font-size: 15px; }
.select-fx { position: relative; display: inline-flex; align-items: center; height: 42px; border: 1px solid var(--borda-forte); border-radius: 6px; background: var(--cartao-2); }
.select-fx > .ico { position: absolute; left: 12px; width: 18px; height: 18px; color: var(--sub); pointer-events: none; }
.select-fx select { height: 100%; border: 0; background: transparent; padding: 0 14px 0 40px; font-size: 15px; min-width: 190px; cursor: pointer; }
.select-fx:focus-within { border-color: var(--marca); }
.busca-fx { flex: 1 1 280px; margin-left: auto; height: 42px; padding: 0 14px; border: 1px solid var(--borda-forte); border-radius: 6px; background: var(--cartao-2); color: var(--sub); }
.busca-fx input { flex: 1; border: 0; background: transparent; padding: 0; font-size: 15px; min-width: 0; }
.busca-fx input:focus-visible { outline: none; }
.busca-fx:focus-within { border-color: var(--marca); }

/* Fila de erros: cartões */
.lista-fx { display: flex; flex-direction: column; gap: 14px; }
.erro-fx { display: flex; gap: 20px; justify-content: space-between; padding: 18px 22px 16px; background: var(--cartao); border: 1px solid var(--borda); border-left: 4px solid #e5484d; border-radius: 10px; }
.erro-fx-corpo { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1; }
.erro-fx-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.erro-fx-num { font-size: 20px; font-weight: 700; color: #4d86ff; text-decoration: none; }
.erro-fx-num:hover { text-decoration: underline; }
.erro-fx-cab .sub { font-size: 14px; }
.chip-etapa { font-size: 13px; padding: 4px 10px; border-radius: 6px; border: 1px solid var(--borda-forte); background: var(--cartao-2); }
.badge-tipo { font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 6px; }
.badge-tipo.permanente { background: #e5484d; color: #fff; }
.badge-tipo.transitorio { background: var(--alerta-fundo); color: var(--alerta); border: 1px solid rgba(245, 165, 36, .5); }
.erro-fx h2 { font-size: 20px; margin: 4px 0 0; }
.erro-fx-msg { margin: 0; font-size: 15px; color: var(--texto); opacity: .9; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.erro-fx-rodape { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; color: var(--sub); font-size: 14px; margin-top: 4px; }
.erro-fx-rodape .ico-mini { width: 16px; height: 16px; }
.chip-revisar { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 6px; border: 1px solid var(--borda-forte); background: var(--cartao-2); color: var(--texto); font-size: 13px; }
.erro-fx-lado { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 14px; flex: none; }
.erro-fx-idade { display: inline-flex; align-items: center; gap: 8px; color: var(--sub); font-size: 14px; white-space: nowrap; }
.erro-fx-idade.acima { color: #ff6b5e; }
.erro-fx-idade .ico-mini { width: 18px; height: 18px; }
.erro-fx-acoes { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.erro-fx-acoes form { margin: 0; }
.erro-fx-acoes .botao-primario, .erro-fx-acoes .botao-contorno { height: 46px; font-size: 15px; gap: 10px; }
.erro-fx-acoes .botao-primario .ico, .erro-fx-acoes .botao-contorno .ico { width: 18px; height: 18px; }
.retorno-fx, .menu-fx { position: relative; }
.retorno-fx > summary, .menu-fx > summary { list-style: none; cursor: pointer; }
.retorno-fx > summary::-webkit-details-marker, .menu-fx > summary::-webkit-details-marker { display: none; }
.menu-fx > summary { width: 46px; padding: 0; }
.retorno-fx-caixa, .menu-fx-caixa { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; background: var(--cartao); border: 1px solid var(--borda-forte); border-radius: 8px; box-shadow: 0 12px 28px rgba(0, 0, 0, .4); padding: 12px; }
.retorno-fx-caixa { width: min(560px, 80vw); display: flex; flex-direction: column; gap: 8px; }
.retorno-fx-caixa code { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; background: var(--fundo); padding: 10px; border-radius: 6px; }
.menu-fx-caixa { width: 320px; display: flex; flex-direction: column; gap: 10px; }
.menu-fx-caixa a { color: var(--texto); text-decoration: none; }
.menu-fx-caixa a:hover { text-decoration: underline; }
.descartar-fx { display: flex; flex-direction: column; gap: 8px; }
.descartar-fx input { width: 100%; height: 38px; }
.descartar-fx .botao-contorno { height: 38px !important; }
.nota-bl { max-width: 220px; text-align: right; }
.rodape-fx { margin: 0; }

@media (max-width: 1100px) {
  .kpis-fx { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grade-fx { grid-template-columns: 1fr; }
  .erro-fx { flex-direction: column; }
  .erro-fx-lado { align-items: flex-start; }
}
@media (max-width: 640px) {
  .kpis-fx { grid-template-columns: 1fr; }
  .canal-fx { grid-template-columns: 44px minmax(0, 1fr); }
  .canal-fx-desde { grid-column: 2; }
  .toggle-fx { grid-column: 2; justify-self: start; }
  .filtros-fx > label { width: 100%; justify-content: space-between; }
  .select-fx select { min-width: 0; }
  .busca-fx { margin-left: 0; }
}