/* Aura — módulo Fluxo BESS por unifilar (29/09/2026). Só tokens do tema (tema.css); prefixo fx- para não esbarrar no CRM.
   Porta o visual do artefato da CD Embalagens: modos, faixa de KPIs, painel do diagrama + controles, EMS, tabela, SoC, inputs. */
.fx{max-width:1240px;margin:0 auto}
.fx-corpo{padding:0 16px 24px;min-width:0}
.fx .fx-panel.fx-scroll{max-width:100%}
.fx-intro{margin:0 0 12px;line-height:1.35;max-width:90ch}
.fx-intro b,.fx-nota b{color:var(--texto)}
.fx-nota{display:flex;gap:6px;align-items:flex-start;margin-top:14px}
.fx-nota .ico{width:1em;height:1em;flex-shrink:0;margin-top:.2em}
.fx-trilha-acoes{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.fx-trilha-acoes .btn .ico{width:.9em;height:.9em}

/* ---------- tela inicial: caixas ---------- */
.fx-drops{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.fx-drop{display:flex;flex-direction:column;gap:4px;align-items:flex-start;background:var(--card);border:1.5px dashed var(--linha-forte);border-radius:12px;padding:16px;cursor:pointer;min-height:150px}
.fx-drop:hover,.fx-drop:focus-visible{border-color:var(--azul-tx);outline:none;box-shadow:inset 0 0 0 1px var(--azul-tx)}
.fx-drop.fx-ex{border-style:solid}
.fx-drop b{font-size:20px}
.fx-drop .saida-ex{line-height:1.3}
.fx-dico{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--sup3);color:var(--azul-tx);margin-bottom:4px}
.fx-dico .ico{width:22px;height:22px}
.fx-arq{font-size:14px;font-weight:700;color:var(--ok);margin-top:auto}
.pagina.fx.sobre .fx-drop{border-color:var(--azul-tx);background:color-mix(in srgb,var(--azul-tx) 10%,var(--card))}

/* ---------- conferir o modelo ---------- */
.fx .sec h4{margin:0 0 8px;font-size:19px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fx .sec h4 .ico{width:18px;height:18px;color:var(--azul-tx)}
.fx .sec h4 .saida-ex{font-weight:500;font-size:14px}
.fx-c4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.fx-c4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.fx-c4{grid-template-columns:1fr}}
.fx-tabwrap{overflow-x:auto}
.fx-tab{width:100%;border-collapse:collapse;font-size:16px}
.fx-tab th{font-size:12px;text-transform:uppercase;letter-spacing:.3px;color:var(--texto-fraco);text-align:left;padding:2px 6px;white-space:nowrap}
.fx-tab td{padding:2px 4px;vertical-align:middle;min-width:70px}
.fx-tab td .campo{margin:0}
.fx-tab td .campo label{display:none}
.fx-tab input,.fx-tab select{width:100%;min-width:60px}
.fx-tab td:first-child input{min-width:110px}
.fx-ruim{border-color:var(--critico) !important;box-shadow:inset 0 0 0 1px var(--critico)}
.fx-acoes{margin-top:10px}
.fx-acoes .btn .ico{width:.95em;height:.95em}
.fx-val ul{margin:4px 0 0;padding-left:20px}

/* ---------- abas simulador / inputs ---------- */
.fx-tabs{display:flex;gap:6px;margin:6px 0 14px;border-bottom:2px solid var(--linha)}
.fx-tab[role=tab]{width:auto;border:0;background:transparent;color:var(--texto-fraco);padding:8px 16px;cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px;font-weight:800;font-size:19px}
.fx-tab[role=tab][aria-selected="true"]{color:var(--azul-tx);border-bottom-color:var(--azul-tx)}
.fx-badge{display:inline-block;font-size:12px;font-weight:700;background:color-mix(in srgb,var(--alerta) 18%,transparent);color:var(--alerta);border-radius:999px;padding:1px 8px;margin-left:4px;vertical-align:middle}

/* ---------- arquitetura, modos, simulação ---------- */
.fx-archbar,.fx-modes{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.fx-archl{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--texto-fraco);font-weight:700;align-self:center;margin-right:4px}
.fx-archbtn,.fx-mode{border:1.5px solid var(--linha-forte);background:var(--card);color:var(--texto);border-radius:10px;padding:8px 14px;cursor:pointer;text-align:left;flex:1 1 220px}
.fx-mode{min-width:160px;flex:1 1 160px}
.fx-archbtn b,.fx-mode b{display:block;font-weight:800;font-size:19px;line-height:1.1}
.fx-archbtn span,.fx-mode span{font-size:13.5px;color:var(--texto-fraco)}
.fx-archbtn[aria-pressed="true"]{border-color:var(--azul);background:var(--azul);color:#fff}
.fx-archbtn[aria-pressed="true"] span{color:#E3E6FF}
.fx-mode[aria-pressed="true"]{border-color:var(--azul-tx);background:var(--sup3);box-shadow:inset 0 -3px 0 var(--azul-tx)}
.fx-archbtn:focus-visible,.fx-mode:focus-visible,.fx-bigbtn:focus-visible{outline:2px solid var(--azul-tx);outline-offset:2px}
.fx-sim{display:grid;grid-template-columns:auto auto 1fr;gap:12px 18px;align-items:center;margin-top:12px;background:var(--card);border:1.5px solid var(--linha-forte);border-radius:12px;padding:12px 16px}
.fx-sim.run{border-color:var(--critico);background:color-mix(in srgb,var(--critico) 12%,var(--card))}
.fx-sim.back{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 12%,var(--card))}
@media (max-width:760px){.fx-sim{grid-template-columns:1fr}}
.fx-simbtns{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.fx-bigbtn{font-weight:800;font-size:20px;line-height:1;border:0;border-radius:9px;padding:12px 18px;cursor:pointer;color:#fff;background:var(--critico)}
.fx-bigbtn.ok{background:var(--ok);color:var(--tinta)}
.fx-bigbtn:disabled{opacity:.45;cursor:default}
.fx-clock{display:flex;flex-direction:column;min-width:150px}
.fx-clock .l{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--texto-fraco)}
.fx-clock .v{font-weight:800;font-size:34px;line-height:1;font-variant-numeric:tabular-nums}
.fx-clock select{font-size:13px;margin-top:2px;background:var(--sup1);color:var(--texto);border:1px solid var(--linha-forte);border-radius:6px;padding:2px 4px;display:block}
.fx-log{list-style:none;margin:0;padding:0;font-size:14px;max-height:118px;overflow-y:auto;display:grid;gap:3px}
.fx-log li{display:grid;grid-template-columns:52px 1fr;gap:8px}
.fx-log li b{font-variant-numeric:tabular-nums;color:var(--azul-tx)}
.fx-log li.crit,.fx-log li.crit b{color:var(--critico)}
.fx-log li.ok b{color:var(--ok)}
.fx-log li.empty{display:block;color:var(--texto-fraco)}

/* ---------- KPIs e pontos de atenção ---------- */
.fx-kh{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--texto-fraco);margin:16px 0 6px}
.fx-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.fx-kpi{background:var(--card);border:1px solid var(--linha);border-radius:10px;padding:12px 14px}
.fx-kpi .l{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--texto-fraco)}
.fx-kpi .v{font-weight:800;font-size:31px;line-height:1.05;font-variant-numeric:tabular-nums}
.fx-kpi .v small{font-size:17px;font-weight:700}
.fx-kpi .v.vt{font-size:21px;line-height:1.15}   /* valor em texto (ex.: "Trafo novo + motores") */
.fx-kpi .n{font-size:13.5px;color:var(--texto-fraco);line-height:1.3}
.fx-kpi.crit{border-color:var(--critico);background:color-mix(in srgb,var(--critico) 12%,var(--card))}
.fx-kpi.warn{border-color:var(--alerta);background:color-mix(in srgb,var(--alerta) 12%,var(--card))}
.fx-pill{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;padding:1px 9px;border-radius:99px;white-space:normal}
.fx-pill.ok{color:var(--ok);background:color-mix(in srgb,var(--ok) 16%,transparent)}
.fx-pill.warn{color:var(--alerta);background:color-mix(in srgb,var(--alerta) 16%,transparent)}
.fx-pill.crit{color:var(--critico);background:color-mix(in srgb,var(--critico) 16%,transparent)}
.fx-pill.info{color:var(--azul-tx);background:var(--sup3)}

/* ---------- seções, painel, diagrama, controles ---------- */
.fx-sec{margin-top:28px}
.fx-sec h2{font-weight:800;font-size:26px;line-height:1.05;margin:0 0 4px}
.fx-lead{color:var(--texto-fraco);margin:0 0 12px;max-width:80ch;line-height:1.35}
.fx-panel{background:var(--card);border:1px solid var(--linha);border-radius:12px;padding:16px}
.fx-scroll{overflow-x:auto}
.fx-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start}
.fx-layout>*{min-width:0}   /* sem isto a largura mínima do SVG (1.020 px) vaza a página no celular */
@media (max-width:980px){.fx-layout{grid-template-columns:minmax(0,1fr)}}
.fx-legend{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px;color:var(--texto-fraco);margin-top:8px}
.fx-legend i{display:inline-block;width:18px;border-top:3px solid;vertical-align:middle;margin-right:6px}
.fx-flow{stroke-dasharray:10 8;animation:fxflow 1.1s linear infinite}
.fx-flow.rev{animation-direction:reverse}
@keyframes fxflow{to{stroke-dashoffset:-18}}
@media (prefers-reduced-motion:reduce){.fx-flow{animation:none}}
.fx-ctl{display:flex;flex-direction:column;gap:3px;margin-bottom:14px}
.fx-ctl label{display:flex;justify-content:space-between;align-items:baseline;font-weight:600;font-size:15px;gap:8px}
.fx-ctl output{font-weight:800;font-size:20px;color:var(--azul-tx);white-space:nowrap}
.fx-ctl input[type=range]{width:100%;accent-color:var(--azul)}
.fx-ctl .hint{font-size:13px;color:var(--texto-fraco);line-height:1.3}
.fx-ctl select{font-size:15px;padding:6px 8px;border-radius:7px;border:1px solid var(--linha-forte);background:var(--sup1);color:var(--texto)}
.fx-chk{display:block;font-size:15px;margin:0 0 12px;line-height:1.3}
.fx-chk input{margin-right:6px;accent-color:var(--azul)}
.fx aside .btn{align-self:flex-start}

/* ---------- EMS ---------- */
.fx-emsTop{display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center;margin-bottom:12px;font-size:15px;color:var(--texto-fraco)}
.fx-emsTop .big{font-weight:800;font-size:22px;color:var(--texto);margin-left:4px}
.fx-emsGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.fx-emsCard{background:var(--sup1);border:1px solid var(--linha);border-radius:10px;padding:10px 12px}
.fx-emsCard h3{margin:0 0 6px;font-size:18px;font-weight:800;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.fx-emsRow{display:flex;justify-content:space-between;gap:8px;font-size:14px;color:var(--texto-fraco);padding:2px 0}
.fx-emsRow b{color:var(--texto);font-variant-numeric:tabular-nums}
.fx-trene{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;font-size:13px;color:var(--texto-fraco);padding:3px 0}
.fx-trene .tb{height:8px;border-radius:4px;background:var(--sup3);overflow:hidden}
.fx-trene .tb i{display:block;height:100%;background:var(--azul-tx)}
.fx-trene .tb i.chg{background:var(--ok)}
.fx-trene b{color:var(--texto);font-variant-numeric:tabular-nums}
.fx-note{font-size:13.5px;color:var(--texto-fraco);margin:12px 0 0;line-height:1.35}

/* ---------- tabela, sequência ---------- */
.fx-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
.fx-two>*{min-width:0}
@media (max-width:900px){.fx-two{grid-template-columns:minmax(0,1fr)}}
.fx-tbl{width:100%;border-collapse:collapse;font-size:15px}
.fx-tbl th,.fx-tbl td{padding:6px 8px;border-bottom:1px solid var(--linha);text-align:left;white-space:nowrap}
.fx-tbl th{font-size:12px;text-transform:uppercase;letter-spacing:.3px;color:var(--texto-fraco)}
.fx-tbl .r{text-align:right;font-variant-numeric:tabular-nums}
.fx-tbl tfoot td{font-weight:800;border-bottom:0}
.fx-steps{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.fx-steps li{display:grid;grid-template-columns:96px 1fr;gap:10px;background:var(--card);border:1px solid var(--linha);border-radius:10px;padding:10px 12px;font-size:15px;line-height:1.35}
.fx-steps li .t{font-weight:800;color:var(--azul-tx);font-variant-numeric:tabular-nums}
.fx-steps li.crit{border-color:var(--critico)} .fx-steps li.crit .t{color:var(--critico)}
@media (max-width:520px){.fx-steps li{grid-template-columns:1fr}}

/* ---------- glossário ---------- */
.fx-gq{width:100%;max-width:360px;font-size:16px;padding:6px 10px;border-radius:8px;border:1px solid var(--linha-forte);background:var(--sup1);color:var(--texto);margin-bottom:10px}
.fx-gl{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:8px 20px}
.fx-gl dt{font-weight:800;font-size:16px}
.fx-gl dd{margin:0 0 6px;font-size:14px;color:var(--texto-fraco);line-height:1.35}

/* ---------- inputs ---------- */
.fx-inhead{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;margin-bottom:14px}
.fx-inhead .l,.fx-ingrp .l,#fxInOutBox .l{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--texto-fraco)}
.fx-inhead .big{font-weight:800;font-size:28px}
.fx-pbar{width:260px;max-width:70vw;height:8px;border-radius:4px;background:var(--sup3);overflow:hidden}
.fx-pbar i{display:block;height:100%;background:var(--azul-tx)}
.fx-ingrp{margin-bottom:14px}
.fx-ingrp h3{font-size:20px;font-weight:800;margin:0 0 8px}
.fx-inrow{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1.6fr) minmax(150px,.9fr) auto;gap:6px 14px;align-items:center;padding:10px 0;border-top:1px solid var(--linha)}
.fx-inrow:first-of-type{border-top:0}
.fx-inrow .nm{font-weight:700;line-height:1.25}
.fx-inrow .nm small{display:block;font-weight:400;color:var(--texto-fraco);font-size:13px}
.fx-inrow .why{font-size:14px;color:var(--texto-fraco);line-height:1.3}
.fx-inrow input,.fx-inrow select{font-size:15px;padding:6px 8px;border-radius:7px;border:1px solid var(--linha-forte);background:var(--sup1);color:var(--texto);width:100%}
.fx-inrow .st{white-space:nowrap}
.fx-wired{display:inline-block;font-size:11px;font-weight:700;color:var(--azul-tx);border:1px solid var(--azul-tx);border-radius:999px;padding:0 6px;margin-top:3px}
#fxInOut{width:100%;font:13px/1.45 ui-monospace,Consolas,monospace;border:1px solid var(--linha-forte);border-radius:8px;padding:10px;background:var(--sup1);color:var(--texto);margin-top:6px}
@media (max-width:760px){.fx-inrow{grid-template-columns:1fr}}

/* ---------- leitura do PDF pela IA (fase 3) ---------- */
.fx-pdf{margin-top:14px}
.fx-c3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:760px){.fx-c3{grid-template-columns:1fr}}
.fx-est,.fx-leitura{line-height:1.35}
.fx-leitura ul{margin:4px 0 0;padding-left:20px}

/* ---------- fase 4: estudos salvos ---------- */
.fx-estudos{margin-top:14px}
.fx-estudo{align-items:center;flex-wrap:wrap}
.fx-estudo>span:first-child{min-width:0;line-height:1.3}