/* ============================================================================
 * base.css — estilos do shell do AcquaInfo (fatia 1 do shell, 25/10/2026).
 * Movido BYTE A BYTE do <style> principal do app/index.html (linhas 12–751 na
 * v1.417); única alteração: url(brand/...) virou url(../../brand/...) porque a
 * URL é relativa ao arquivo CSS, não mais ao index. Separação em tokens.css +
 * base.css fica para a fundação do front novo (plano de migração, F0).
 * ==========================================================================*/
  :root{
    /* Paleta oficial Acqua Pura */
    --indigo:#3B68FA; --indigo-escuro:#203888;
    --indigo-claro:#eef3fe; --indigo-borda:#C0D0E1;
    --grafite:#2B292A;
    /* wordmark AcquaInfo (padronizado 25/07) — "Acqua"/"Info" no MESMO peso bold, só a cor muda */
    --wordmark-acqua:#405599; --wordmark-info:#3B68FA;
    --verde:#16a34a; --verde-claro:#e8f7ee;
    --ambar:#b45309; --ambar-claro:#fef3c7;
    --vermelho:#dc2626; --vermelho-claro:#fdecec;
    --cinza-900:#2B292A; --cinza-800:#26324a; --cinza-700:#3a475e; --cinza-600:#6b7280; --cinza-500:#6b7a90; --cinza-400:#9ca3af; --cinza-300:#c3ccd8;
    --cinza-200:#e5e7eb; --cinza-100:#f3f4f6; --cinza-50:#f9fafb;
    --borda:#e5e7eb; --sombra:0 1px 3px rgba(16,24,40,.08);
    --raio:10px;
    --pg:#f5f8fd; --card:#ffffff; --hover:#f3f6fc;
    /* MF-44 (22/07): pictogramas do portal (famílias/reservatório) por token — dark ajusta abaixo */
    --picto-on:#2f55d4; --picto-off:#dde4f1; --tanque-fundo:#eef2fa; --tanque-borda:#203888; --tanque-tick:#8494ad;
  }
  /* MF-44 (22/07): Epilogue (marca) estava declarada no stack mas NUNCA carregava —
     os TTFs já viviam em brand/. font-display:swap p/ não segurar o 1º paint. */
  @font-face{font-family:'Epilogue';src:url('../../brand/Epilogue-Light.ttf') format('truetype');font-weight:300;font-style:normal;font-display:swap}
  @font-face{font-family:'Epilogue';src:url('../../brand/Epilogue-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
  @font-face{font-family:'Epilogue';src:url('../../brand/Epilogue-Medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}
  @font-face{font-family:'Epilogue';src:url('../../brand/Epilogue-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
  /* peso 800 aponta pro MESMO TTF de 700 (Bold é o mais pesado que temos) — sem isso,
     o wordmark (font-weight:800) cai no matching "nearest weight" do browser e, durante
     o swap do @font-face, pisca entre o fallback fino e o bold antes de estabilizar. */
  @font-face{font-family:'Epilogue';src:url('../../brand/Epilogue-Bold.ttf') format('truetype');font-weight:800;font-style:normal;font-display:swap}
  *{box-sizing:border-box;margin:0;padding:0;font-family:'Epilogue','Segoe UI',system-ui,sans-serif}
  /* issue #707: reserva a calha da barra de rolagem vertical mesmo quando ela some
     (telas de conteúdo curto, ex. aba Trocas de Ordens de Produção) — sem isso, a
     viewport "ganha" a largura da barra e o `margin:0 auto` do .wrap recentraliza
     tudo, deslocando título/menu/tabela ~7-8px para a direita. Fallback para
     navegador sem scrollbar-gutter (Chrome < 94, Safari antigo) seria
     `html{overflow-y:scroll}` — resolve igual, mas mostra a barra cinza sempre,
     inclusive em telas curtas; não combinar as duas regras, `overflow-y:scroll`
     anula o ganho visual do gutter. */
  html{scrollbar-gutter:stable}
  body{background:var(--pg);color:var(--cinza-900);font-size:14px;transition:background .2s ease,color .2s ease}
  /* Baseline de form controls (MF-5 dark): campos sem estilo próprio herdam o tema em vez do branco/preto do navegador. Regras específicas (.campo/.busca/etc.) sobrescrevem por especificidade/ordem. */
  input[type=text],input[type=date],input[type=datetime-local],input[type=number],input[type=email],input[type=password],input[type=search],input[type=tel],input[type=url],input[type=month],input[type=time],input:not([type]),select,textarea{background-color:var(--card);color:var(--cinza-900)}
  body.dark{
    --indigo:#6f92ff; --indigo-escuro:#9ab0ff; --indigo-claro:#1b2740; --indigo-borda:#33436a;
    --grafite:#eaf0fb;
    --wordmark-acqua:#C0D0E1; --wordmark-info:#3B68FA;
    --verde:#43c982; --verde-claro:#12321f; --ambar:#e5a54b; --ambar-claro:#3a2c12;
    --vermelho:#f0736b; --vermelho-claro:#3a1c1c;
    --cinza-900:#eaf0fb; --cinza-800:#d9e1f0; --cinza-700:#c6d0e2; --cinza-600:#a7b2c9; --cinza-500:#909cb8; --cinza-400:#7885a1; --cinza-300:#586a88;
    --cinza-200:#37455f; --cinza-100:#26314a; --cinza-50:#1a2439;
    --borda:#2b3853; --sombra:0 1px 3px rgba(0,0,0,.45);
    --pg:#0e1626; --card:#16213a; --hover:#1e2c49;
    /* MF-44 (22/07): pictogramas do portal no tema escuro */
    --picto-on:#6f92ff; --picto-off:#33436a; --tanque-fundo:#1b2740; --tanque-borda:#9ab0ff; --tanque-tick:#7885a1;
  }
  body.dark #tela-acquadose, body.dark #tela-ropump, body.dark #tela-acquaflow{
    --azul-vivo:#6f92ff; --azul-marinho:#cdd8f5; --azul-claro:#33436a; --bg:#0e1626; --bg-gelo:#1b2740; --grafite:#eaf0fb; color:var(--grafite);
  }
  body.dark #tela-acquadose .warning, body.dark #tela-ropump .aviso, body.dark #tela-acquaflow .banner.ambar, body.dark #tela-acquaflow .badge.low, body.dark #tela-acquaflow .aviso{background:#3a2c12;border-color:#5c4415;color:#e5a54b}
  body.dark #tela-acquadose .success, body.dark #tela-acquaflow .banner.verde, body.dark #tela-acquaflow .badge.ok{background:#12321f;border-color:#1f5c39;color:#43c982}
  body.dark #tela-ropump .erro, body.dark #tela-acquaflow .banner.vermelho, body.dark #tela-acquaflow .badge.no{background:#3a1c1c;border-color:#6b2f2f;color:#f0736b}
  body.dark #tela-acquadose .result-card, body.dark #tela-ropump .folgas, body.dark #tela-acquaflow .vq{border-color:var(--borda)}
  body.dark #tela-ropump th, body.dark #tela-ropump td{border-color:var(--borda)}
  body.dark #tela-acquaflow .pv-box.suc{background:#16263f;border-color:#2f4a6b;border-left-color:#6f92ff}
  body.dark #tela-acquaflow .pv-box.rec{background:#12321f;border-color:#1f5c39;border-left-color:#43c982}
  body.dark #tela-acquadose .result-label, body.dark #tela-acquadose .custom-field-row span, body.dark #tela-acquadose .pump-btn, body.dark #tela-acquadose .tank-btn, body.dark #tela-acquaflow .banner span, body.dark #tela-acquaflow .pv-box-s, body.dark #tela-acquaflow .rc .l, body.dark #tela-ropump .muted, body.dark #tela-ropump .hint{color:var(--cinza-600)}
  body.dark .calcpop{background:var(--card);color:var(--grafite);border-color:var(--borda)}
  body.dark .calcpop .disp{background:var(--indigo-claro);color:var(--grafite)}
  body.dark .calcpop .kp button{background:var(--card);color:var(--grafite);border-color:var(--borda)}
  body.dark #tela-parceiros, body.dark #tela-contratos, body.dark #tela-seguranca{
    --pc-indigo:#6f92ff; --pc-indigo-esc:#9ab0ff; --pc-indigo-cl:#1b2740; --pc-indigo-bd:#33436a; --pc-bd:#2b3853; --pc-cinza9:#eaf0fb; --pc-cinza6:#a7b2c9; --pc-cinza4:#7885a1; --pc-cinza2:#37455f; --pc-cinza1:#26314a; --pc-cinza0:#1a2439; --pc-ambar-cl:#3a2c12;
    --ct-indigo:#6f92ff; --ct-indigo-esc:#9ab0ff; --ct-indigo-cl:#1b2740; --ct-indigo-bd:#33436a; --ct-bd:#2b3853; --ct-cinza9:#eaf0fb; --ct-cinza6:#a7b2c9; --ct-cinza4:#7885a1; --ct-cinza2:#37455f; --ct-cinza1:#26314a; --ct-cinza0:#1a2439; --ct-ambar-cl:#3a2c12;
  }
  body.dark #tela-seguranca{
    --indigo:#6f92ff; --indigo-escuro:#9ab0ff; --indigo-claro:#1b2740; --indigo-borda:#33436a;
    --grafite:#eaf0fb; --verde:#43c982; --verde-claro:#12321f; --vermelho:#f0736b; --vermelho-claro:#3a1c1c;
    --cinza-900:#eaf0fb; --cinza-600:#a7b2c9; --cinza-400:#7885a1; --cinza-200:#37455f; --cinza-100:#26314a; --cinza-50:#1a2439;
    --borda:#2b3853; --sombra:0 1px 3px rgba(0,0,0,.45);
  }
  svg.ic{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px}
  .topo{background:var(--card);border-bottom:1px solid var(--borda);padding:14px 28px;display:flex;align-items:center;justify-content:space-between}
  .logo{font-size:19px;font-weight:800;color:var(--grafite);letter-spacing:-.2px;display:flex;align-items:center;gap:9px}
  .logo span{font-weight:500;color:var(--indigo)}
  .logo svg{width:26px;height:26px}
  .usuario-logado{font-size:11px;color:var(--cinza-400);text-align:right;line-height:1.25}
  .usuario-logado b{display:block;font-size:13px;font-weight:700;color:var(--cinza-900);line-height:1.25}
  .wrap{max-width:1800px;margin:0 auto;padding:24px 28px 60px}
  /* Topo responsivo: some rótulos/coisas secundárias conforme a largura aperta */
  @media (max-width:1120px){
    .topo{padding:12px 20px}
    .topo-sim-label{display:none}
    #topo-cliente > span:first-child{display:none !important}
  }
  @media (max-width:1000px){
    .usuario-logado{display:none !important}
    .chip-perfil{padding:6px 11px;font-size:11px}
    #topo-cliente{padding-left:10px;margin-left:4px}
    #topo-cliente span:last-child{font-size:12px !important}
  }
  @media (max-width:720px){
    .topo{flex-wrap:wrap;gap:10px;row-gap:10px}
    .topo > div:last-child{margin-left:auto}
  }

  .trilha{font-size:12px;color:var(--cinza-600);margin-bottom:6px}
  .cab-modulo{display:flex;align-items:center;gap:10px;margin-bottom:4px}
  .cab-modulo .simbolo{width:34px;height:34px;border-radius:9px;background:var(--indigo-claro);display:flex;align-items:center;justify-content:center;color:var(--indigo)}
  .cab-modulo .simbolo svg{width:19px;height:19px}
  .cab-modulo .nome-modulo{font-size:21px;font-weight:700;color:var(--indigo)}
  .subtitulo{color:var(--cinza-600);margin-bottom:18px}
  .titulo-secao{color:var(--indigo);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;padding-bottom:8px;border-bottom:1px solid var(--cinza-200);margin-bottom:14px;display:flex;justify-content:space-between;align-items:baseline}
  .titulo-secao .info{font-size:11px;color:var(--cinza-400);text-transform:none;letter-spacing:0;font-weight:400}
  /* issue #321: subtítulo nível 3 dentro do card — azul escuro, caixa normal, padrão único (5.5 e 3.1) */
  .subtitulo-card{color:var(--indigo-escuro);font-size:11px;font-weight:700;text-transform:none;letter-spacing:.8px}
  .subtitulo-card .info{font-size:11px;color:var(--cinza-400);text-transform:none;letter-spacing:0;font-weight:400}
  .cartao{background:var(--card);border:1px solid var(--borda);border-radius:var(--raio);box-shadow:var(--sombra)}
  .nota-proposta{background:var(--ambar-claro);border:1px solid var(--ambar);border-radius:var(--raio);padding:7px 14px;font-size:11.5px;color:var(--ambar);margin-bottom:14px}
  .rodape{margin-top:36px;text-align:center;font-size:12px;color:var(--cinza-400)}
  @keyframes opPop{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
  @keyframes opRise{from{transform:translateY(78px)}to{transform:translateY(0)}}
  .op-agua{animation:opRise .95s cubic-bezier(.22,.61,.36,1) forwards}
  .op-agua2{animation:opRise 1.15s cubic-bezier(.22,.61,.36,1) forwards}
  body{padding-left:230px;transition:padding-left .2s}
  body.sb-min{padding-left:58px}
  .sidebar{position:fixed;left:0;top:0;bottom:0;width:230px;background:var(--card);border-right:1px solid var(--borda);padding:16px 12px 24px;overflow:auto;z-index:60;transition:width .2s}
  .sidebar.colapsada{width:58px;padding:14px 8px}
  /* MF-6 (21/07): handle de recolher/expandir — centralizado na vertical, montado
     na borda direita da sidebar (fixed, fora do fluxo de scroll do menu). */
  #sb-handle{position:fixed;top:50%;transform:translateY(-50%);left:219px;width:22px;height:48px;display:flex;align-items:center;justify-content:center;border:1px solid var(--borda);background:var(--card);border-radius:99px;cursor:pointer;font-size:10px;color:var(--cinza-400);padding:0;font-family:inherit;z-index:70;transition:left .2s,color .15s,border-color .15s;box-shadow:0 1px 4px rgba(15,23,42,.08)}
  #sb-handle:hover{color:var(--indigo);border-color:var(--indigo)}
  body.sb-min #sb-handle{left:47px}
  .sb-mini{display:flex;align-items:center;justify-content:center;padding:9px 0;border-radius:8px;color:var(--cinza-600);cursor:pointer;margin-bottom:2px;font-size:11px}
  .sb-mini svg{width:18px;height:18px}
  .sb-mini:hover{background:var(--hover);color:var(--indigo)}
  .sb-mini.ativo{background:var(--indigo-claro);color:var(--indigo)}
  .tile-acao{display:flex;flex-direction:column;align-items:flex-start;gap:5px;padding:14px 16px;border:1px solid var(--borda);border-radius:12px;background:var(--card);cursor:pointer;font-family:inherit;text-align:left;transition:border-color .15s,background .15s,transform .15s}
  .tile-acao:hover{border-color:var(--indigo);background:var(--hover);transform:translateY(-1px)}
  .tile-acao svg{width:20px;height:20px;color:var(--indigo)}
  .tile-acao b{font-size:13px;color:var(--cinza-900)}
  .tile-acao span{font-size:11px;color:var(--cinza-500);line-height:1.4}
  /* ===== Lote Home Cliente OP (22/07/2026) ===================================
     MF-38: grids da home do portal saem do inline p/ classes com media query —
     antes eram repeat(4,1fr) cravados, estourando o card no celular.
     MF-41: headings semânticos + KPI clicável como <button> de verdade. */
  #tela-home h1,#tela-home h2{margin:0;font:inherit}
  #tela-home h1.nome-modulo{font-size:21px;font-weight:700;color:var(--indigo)}
  #tela-home h2.titulo-secao{display:flex;align-items:center;gap:8px}
  .kpi-acao{padding:14px 16px;cursor:pointer;font-family:inherit;text-align:left;border:1px solid var(--borda);transition:border-color .15s,background .15s}
  .kpi-acao:hover{border-color:var(--indigo);background:var(--hover)}
  .kpi-acao:focus-visible{outline:2px solid var(--indigo);outline-offset:2px}
  .op-sol-item{display:flex;flex-direction:column;gap:3px;padding:9px 11px;border:1px solid var(--borda);border-radius:9px;background:var(--card);cursor:pointer;font-family:inherit;text-align:left;transition:border-color .15s,background .15s}
  .op-sol-item:hover{border-color:var(--indigo);background:var(--hover)}
  .op-hero{display:grid;gap:16px;margin-bottom:16px;align-items:stretch}
  .op-hero.op{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
  .op-hero.pj{grid-template-columns:1.3fr 0.65fr}
  .op-hero-picto{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center}
  .op-grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
  .op-grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:8px}
  .op-grid5{grid-template-columns:repeat(5,1fr)}
  @media (max-width:980px){
    .op-grid4{grid-template-columns:repeat(2,1fr)}
    .op-grid5{grid-template-columns:repeat(2,1fr)}
    .op-hero.pj{grid-template-columns:1fr}
    .op-grid2{grid-template-columns:1fr}
  }
  @media (max-width:520px){
    .op-grid4,.op-grid5{grid-template-columns:1fr}
    .op-hero.op{grid-template-columns:1fr}
    .op-hero-picto{grid-template-columns:1fr;justify-items:start}
    .op-hero-picto svg{max-width:130px}
    #tela-home .chip-filtro{padding:8px 13px;min-height:36px}
  }
  .menu-usuario{display:flex;align-items:center;gap:10px;background:none;border:1px solid transparent;border-radius:12px;padding:5px 8px 5px 7px;cursor:pointer;font-family:inherit}
  .menu-usuario:hover{border-color:var(--borda);background:var(--hover)}
  .usr-chev{color:var(--cinza-400);font-size:10px;transition:transform .18s ease}
  .menu-usuario.aberto .usr-chev{transform:rotate(180deg)}
  .mu-head{display:flex;align-items:center;gap:11px;padding:11px 12px 12px 10px;margin:2px 2px 6px;border-bottom:1px solid var(--cinza-100)}
  .mu-head .avatar{box-shadow:none}
  .mu-head .nome{font-size:13.5px;font-weight:700;color:var(--cinza-900);line-height:1.25}
  .mu-head .email{font-size:11.5px;color:var(--cinza-400);line-height:1.3;word-break:break-all}
  .mu-head .perfil-badge{display:inline-block;margin-top:4px;font-size:9.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--indigo-escuro);background:var(--indigo-claro);border-radius:99px;padding:1px 8px}
  .avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#3B68FA,#203888);color:#fff;font-weight:700;font-size:12.5px;letter-spacing:.3px;display:flex;align-items:center;justify-content:center;flex:none;overflow:hidden;box-shadow:0 0 0 2px var(--card),0 0 0 3px var(--indigo-borda)}
  .avatar img{width:100%;height:100%;object-fit:cover;display:block}  /* MF-8: foto do Google preenche o círculo */
  .mu-item{display:flex;gap:9px;align-items:center;width:100%;padding:9px 12px;border:none;background:none;font-family:inherit;font-size:13px;color:var(--cinza-600);border-radius:8px;cursor:pointer;text-align:left;white-space:nowrap}
  .mu-item:hover{background:var(--hover);color:var(--indigo)}
  .mu-item svg{width:15px;height:15px;flex:none}
  .mu-sep{height:1px;background:var(--cinza-100);margin:5px 8px}
  .sb-logo{display:flex;align-items:center;gap:11px;font-weight:800;font-size:16px;color:var(--grafite);margin:2px 4px 4px;padding:6px 4px 16px;border-bottom:1px solid var(--cinza-100)}
  .sb-logo svg{width:24px;height:24px;flex:none}
  .sb-rodape{margin-top:18px;padding:12px 10px 4px;font-size:10.5px;color:var(--cinza-400);border-top:1px solid var(--cinza-100);line-height:1.5}
  .sb-cat svg{width:15px;height:15px;stroke:var(--indigo);opacity:.55;flex:none}
  .sb-grupo{font-size:10.5px;font-weight:700;letter-spacing:1.2px;color:var(--cinza-400);text-transform:uppercase;margin:14px 10px 4px}
  .sb-cat{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;color:var(--grafite);cursor:pointer;font-weight:600;font-size:12.5px;margin-top:6px}
  .sb-cat:hover{background:var(--hover)}
  .sb-cat .chev{color:var(--cinza-400);font-size:10px;width:10px}
  .sb-item{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:8px;color:var(--cinza-600);cursor:pointer;font-weight:500;font-size:12.5px;margin-left:16px;border-left:2px solid var(--cinza-100);padding-left:12px;border-radius:0 8px 8px 0;transition:background .15s,color .15s,padding-left .15s}
  .sb-item:hover{background:var(--hover);color:var(--indigo);padding-left:16px}
  .sb-item.ativo{background:var(--indigo-claro);color:var(--indigo);font-weight:700;border-left-color:var(--indigo)}
  .sb-item.solto{margin-left:0;border-left:none;border-radius:8px;font-weight:600;padding:8px 10px;color:var(--grafite)}
  .sb-item.solto svg{color:var(--indigo)}
  /* MF-7 (21/07): rótulo de subgrupo do menu (ex.: "Cadastros" em Engenharia) com
     hierarquia visual — divisória acima + caps menor, p/ não se camuflar entre itens. */
  .sb-sub{margin:12px 0 3px 16px;padding:8px 0 0 12px;border-top:1px solid var(--cinza-100);font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:1.2px;color:var(--cinza-400)}
  /* 21/07 (pedido do dono): submenu recolhível (Cadastros em Engenharia) — mesma
     fonte/cor do título do grupo (.sb-cat), só recuado p/ marcar a hierarquia. */
  .sb-subgrupo{display:flex;align-items:center;gap:8px;margin:2px 0 0 14px;padding:8px 10px;border-radius:8px;color:var(--grafite);cursor:pointer;font-weight:600;font-size:12.5px;user-select:none}
  .sb-subgrupo:hover{background:var(--hover)}
  .sb-subgrupo .chev{color:var(--cinza-400);font-size:10px;width:10px}
  .sb-item svg{width:16px;height:16px;flex:none}
  .tag-exemplo{font-size:9.5px;font-weight:700;color:var(--indigo-escuro);background:var(--indigo-claro);border-radius:99px;padding:1px 7px;letter-spacing:.4px;vertical-align:middle}
  .tag-decidido{font-size:9.5px;font-weight:700;color:var(--verde);background:var(--verde-claro);border-radius:99px;padding:1px 7px;letter-spacing:.4px;vertical-align:middle}
  .tabela-vasos{width:100%;border-collapse:collapse;margin-top:4px}
  .tabela-vasos th{font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--cinza-600);text-align:left;padding:6px 8px;border-bottom:1px solid var(--borda);background:var(--cinza-50)}
  .tabela-vasos td{padding:6px 8px;border-bottom:1px solid var(--cinza-100);vertical-align:middle}
  .tabela-vasos input,.tabela-vasos select{width:100%;padding:6px 8px;border:1px solid var(--indigo-borda);border-radius:6px;background:var(--indigo-claro);font-size:12.5px;font-family:inherit}
  .tabela-vasos input.preenchido,.tabela-vasos select.preenchido{background:var(--card)}
  .he-tab tr.linha:hover{background:var(--cinza-50)}

  /* KPIs */
  .kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
  .kpi{background:var(--card);border:1px solid var(--borda);border-radius:var(--raio);box-shadow:var(--sombra);padding:14px 16px;cursor:pointer;transition:.12s;text-align:left;font-family:inherit}
  .kpi:hover{border-color:var(--indigo)}
  .kpi.ativo{border-color:var(--indigo);background:var(--indigo-claro);box-shadow:0 0 0 3px rgba(59,104,250,.15)}
  .kpi .rotulo{font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--cinza-600);display:flex;align-items:center;gap:6px}
  .kpi .valor{font-size:24px;font-weight:700;color:var(--grafite);margin-top:2px}
  .kpi.alerta .valor{color:var(--ambar)}
  .kpi.perigo .valor{color:var(--vermelho)}
  @media (max-width:800px){.kpis{grid-template-columns:repeat(2,1fr)}}

  /* Barra de ações */
  .barra-acoes{display:flex;gap:12px;align-items:center;margin-bottom:10px;flex-wrap:wrap}
  /* Uniformização 21/07 (pedido do Bebeto): busca, select, Excel e + com a MESMA altura (40px) em todos os portais. */
  .barra-acoes .busca input{height:40px;box-sizing:border-box;padding-top:0;padding-bottom:0}
  .barra-acoes .btn{height:40px;box-sizing:border-box;padding-top:0;padding-bottom:0}
  .busca{flex:1;min-width:240px;position:relative}
  .busca > svg{position:absolute;left:12px;top:11px;width:15px;height:15px;color:#7f97d8;fill:none;stroke:currentColor;stroke-width:2}
  .busca input{width:100%;padding:10px 14px 10px 38px;border:1px solid var(--indigo-borda);border-radius:9px;font-size:14px;background:var(--indigo-claro);font-family:inherit;transition:border-color .15s ease,box-shadow .15s ease,background .2s ease}
  .busca input::placeholder{color:#7f97d8}
  .busca input:focus{border-color:var(--indigo);box-shadow:0 0 0 3px rgba(59,104,250,.15);background:var(--card)}
  .btn{padding:10px 18px;border-radius:9px;border:none;cursor:pointer;font-size:14px;font-weight:600;font-family:inherit;display:inline-flex;align-items:center;justify-content:center;gap:7px;transition:background .15s ease,box-shadow .15s ease,border-color .15s ease,color .15s ease}
  .btn-primario{background:var(--indigo);color:#fff}
  .btn-primario:hover{background:var(--indigo-escuro)}
  .btn-fantasma{background:var(--card);border:1px solid var(--cinza-200);color:var(--cinza-600)}
  .btn-fantasma:hover{background:var(--indigo-claro);border-color:var(--indigo);color:var(--indigo)}
  .chip-filtro{padding:8px 14px;border-radius:99px;border:1px solid var(--cinza-200);background:var(--card);cursor:pointer;font-size:13px;color:var(--cinza-600);font-family:inherit}
  .chip-filtro.ativo{background:var(--indigo-claro);border-color:var(--indigo);color:var(--indigo);font-weight:600}
  /* MF-11b v2 (21/07): filtros de situação em select ("tipo lista") — padrão dos portais. */
  .sel-situacao{height:40px;box-sizing:border-box;padding:0 12px;border:1px solid var(--indigo-borda);border-radius:9px;background:var(--card);font-size:13.5px;color:var(--cinza-600);font-family:inherit;cursor:pointer}
  .sel-situacao:focus{outline:2px solid var(--indigo);outline-offset:-1px}

  .filtros-ativos{display:flex;gap:8px;align-items:center;margin-bottom:10px;flex-wrap:wrap;font-size:12.5px;color:var(--cinza-600)}
  .chip-ativo{display:inline-flex;align-items:center;gap:6px;background:var(--indigo-claro);border:1px solid var(--indigo-borda);color:var(--indigo-escuro);border-radius:99px;padding:4px 10px;font-weight:600;font-size:12px}
  .chip-ativo button{background:none;border:none;cursor:pointer;color:var(--indigo);font-weight:700;font-size:13px;padding:0;line-height:1}
  .link-limpar{background:none;border:none;color:var(--indigo);font-weight:600;cursor:pointer;font-size:12.5px;font-family:inherit}

  /* Tabela */
  table.grade{width:100%;border-collapse:collapse}
  .grade th{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--cinza-600);text-align:left;padding:12px 14px;border-bottom:1px solid var(--borda);white-space:nowrap;position:sticky;top:0;background:var(--cinza-50);z-index:1}
  .grade th .th-conteudo{display:inline-flex;align-items:center;gap:4px;cursor:pointer}
  .grade th .th-conteudo:hover{color:var(--indigo)}
  .grade th .th-conteudo:focus-visible{outline:2px solid var(--indigo);outline-offset:2px;border-radius:4px}
  .grade td{padding:13px 14px;border-bottom:1px solid var(--cinza-100);vertical-align:middle}
  .grade tr:last-child td{border-bottom:none}
  .grade tr.linha:hover{background:var(--cinza-50)}
  /* issue #846: cabeçalho da grade de OS vazando do #mn-cartao — a soma das
     larguras MÍNIMAS de todas as colunas passava da largura do cartão
     (overflow:visible é proposital, o funil precisa dele). Reduz padding e
     libera quebra nos rótulos longos, tudo escopado a #mn-grade — as regras
     globais .grade/.grade th/.grade td ficam intocadas (compartilhadas por
     outras 7 tabelas). */
  #mn-grade th, #mn-grade td{padding-left:10px;padding-right:10px}
  #mn-grade th{white-space:normal}
  #mn-grade .mn-cli{font-size:11px;font-weight:400;white-space:normal;overflow-wrap:anywhere;max-width:170px;line-height:1.25}
  .btn-funil{width:24px;height:24px;border:none;background:none;cursor:pointer;color:var(--cinza-400);border-radius:6px;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}
  .btn-funil:hover{background:var(--indigo-claro);color:var(--indigo)}
  .btn-funil.filtrado{color:var(--indigo)}
  .num-serie{font-weight:700}
  .num-serie small{display:block;font-weight:400;font-size:11.5px;color:var(--cinza-400)}
  .cel-mun small{display:block;font-size:11.5px;color:var(--cinza-400)}
  .link-cliente{color:var(--indigo);font-weight:600;text-decoration:none;cursor:pointer}
  .link-cliente:hover{text-decoration:underline}
  /* issue #283: nome do arquivo (AFQ) é o próprio link de download; trocar/excluir
     são links de texto pequenos em cinza — deliberadamente sem ícone/botão nesta
     célula (vizinha da coluna Ações, que já usa 🔧/⧉/✕ com outro significado). */
  .link-afq-nome{color:var(--indigo);font-weight:600;text-decoration:none;cursor:pointer}
  .link-afq-nome:hover{text-decoration:underline}
  .link-afq-acao{color:var(--cinza-400);text-decoration:none;cursor:pointer;font-size:11.5px}
  .link-afq-acao:hover{text-decoration:underline;color:var(--cinza-600)}
  /* issue #284: lightbox das fotos da unidade — overlay simples (sem lib),
     imagem carregada sob demanda (ver _lightboxCarregarAtual). */
  .lightbox-overlay{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center}
  .lightbox-corpo{max-width:92vw;max-height:76vh;display:flex;align-items:center;justify-content:center}
  .lightbox-corpo img{max-width:92vw;max-height:76vh;object-fit:contain;border-radius:4px;display:block}
  .lightbox-fechar{position:absolute;top:14px;right:18px;background:transparent;border:0;color:#fff;font-size:26px;line-height:1;cursor:pointer;padding:6px}
  .lightbox-seta{position:absolute;top:50%;transform:translateY(-50%);background:transparent;border:0;color:#fff;font-size:42px;line-height:1;cursor:pointer;padding:8px 18px;opacity:.85}
  .lightbox-seta:hover{opacity:1}
  .lightbox-seta:disabled{opacity:.25;cursor:default}
  .lightbox-seta-esq{left:4px}
  .lightbox-seta-dir{right:4px}
  .lightbox-rodape{color:#fff;font-size:12.5px;margin-top:12px;text-align:center;max-width:90vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .badge{font-size:11px;font-weight:700;padding:2px 9px;border-radius:99px;white-space:nowrap}
  .badge.ok{background:var(--verde-claro);color:var(--verde)}
  .badge.alerta{background:var(--ambar-claro);color:var(--ambar)}
  .badge.perigo{background:var(--vermelho-claro);color:var(--vermelho)}
  .badge.neutro{background:var(--cinza-100);color:var(--cinza-600)}
  .badge.info{background:var(--indigo-claro);color:var(--indigo-escuro)}
  .rotinas{display:flex;gap:4px;flex-wrap:wrap}
  .rotinas .mini-chip{font-size:10.5px;font-weight:600;background:var(--indigo-claro);color:var(--indigo-escuro);border-radius:99px;padding:2px 8px;white-space:nowrap}
  .rotinas .mini-chip.vazio{background:var(--cinza-100);color:var(--cinza-400)}
  .barra-completude{height:5px;border-radius:99px;background:var(--cinza-100);margin-top:5px;max-width:120px;overflow:hidden}
  .barra-completude i{display:block;height:100%;border-radius:99px;background:var(--indigo)}

  .acoes-linha{display:flex;gap:6px;justify-content:flex-end}
  .btn-icone{width:34px;height:34px;border-radius:9px;border:1px solid var(--borda);background:var(--card);cursor:pointer;color:var(--cinza-600);transition:background .15s ease,border-color .15s ease,color .15s ease;display:inline-flex;align-items:center;justify-content:center}
  .btn-icone:hover{background:var(--indigo-claro);border-color:var(--indigo);color:var(--indigo)}
  .btn-icone:disabled{opacity:.35;cursor:not-allowed}
  .interruptor{position:relative;width:40px;height:22px;display:inline-block;cursor:pointer}
  .interruptor input{opacity:0;width:0;height:0}
  .trilho{position:absolute;inset:0;background:var(--cinza-200);border-radius:99px;transition:.2s}
  .trilho::before{content:"";position:absolute;width:16px;height:16px;border-radius:50%;background:var(--card);top:3px;left:3px;transition:.2s;box-shadow:0 1px 2px rgba(0,0,0,.2)}
  .interruptor input:checked + .trilho{background:var(--verde)}
  .interruptor input:checked + .trilho::before{left:21px}
  .rodape-grade{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;font-size:12.5px;color:var(--cinza-600);border-top:1px solid var(--cinza-100);gap:12px;flex-wrap:wrap}
  .rodape-esq{display:flex;align-items:center;gap:10px}
  .sem-resultado{text-align:center;color:var(--cinza-400);padding:28px;font-size:13px}

  /* issue #480: navegação de páginas + seletor de tamanho (PaginacaoAPI) */
  .pg-tamanho-select{padding:4px 8px;border:1px solid var(--indigo-borda);border-radius:6px;background:var(--indigo-claro);font-family:inherit;font-size:11.5px;color:var(--cinza-900)}
  .paginacao-nav{display:flex;align-items:center;gap:3px}
  .pg-seta,.pg-num{min-width:26px;height:26px;padding:0 6px;border-radius:7px;border:1px solid var(--borda);background:var(--card);color:var(--cinza-600);font-size:12px;font-family:inherit;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease}
  .pg-seta:hover,.pg-num:hover{background:var(--indigo-claro);border-color:var(--indigo);color:var(--indigo)}
  .pg-seta:disabled{opacity:.35;cursor:not-allowed}
  .pg-seta:disabled:hover{background:var(--card);border-color:var(--borda);color:var(--cinza-600)}
  .pg-num.pg-atual{background:var(--indigo);border-color:var(--indigo);color:#fff;cursor:default;font-weight:700}
  .pg-reticencias{min-width:20px;text-align:center;color:var(--cinza-400)}

  /* Dropdown filtro Excel */
  .dropdown-filtro{position:absolute;top:calc(100% - 4px);left:0;z-index:50;background:var(--card);border:1px solid var(--borda);border-radius:10px;box-shadow:0 8px 24px rgba(16,24,40,.16);width:230px;padding:10px;text-transform:none;letter-spacing:0}
  .dropdown-filtro input[type=text]{width:100%;padding:7px 10px;border:1px solid var(--indigo-borda);border-radius:7px;background:var(--indigo-claro);font-family:inherit;font-size:12.5px;margin-bottom:8px}
  .dropdown-filtro label{display:flex;align-items:center;gap:8px;padding:5px 4px;font-size:12.5px;color:var(--cinza-900);font-weight:500;cursor:pointer;border-radius:6px}
  .dropdown-filtro label:hover{background:var(--cinza-50)}
  .dropdown-filtro .dd-contador{font-size:11px;color:var(--cinza-400);padding:0 4px 6px}
  .dropdown-filtro .lista-vals{max-height:180px;overflow-y:auto}
  .dropdown-filtro .ordenar{display:flex;gap:6px;margin-bottom:8px}
  .dropdown-filtro .ordenar button{flex:1;padding:6px;border:1px solid var(--cinza-200);background:var(--card);border-radius:7px;font-size:11.5px;cursor:pointer;font-family:inherit;color:var(--cinza-600)}
  .dropdown-filtro .ordenar button.ativo{border-color:var(--indigo);color:var(--indigo);background:var(--indigo-claro);font-weight:600}
  .dropdown-filtro .rodape-dd{display:flex;justify-content:space-between;margin-top:8px;padding-top:8px;border-top:1px solid var(--cinza-100)}
  .dropdown-filtro .rodape-dd button{background:none;border:none;color:var(--indigo);font-weight:600;font-size:12px;cursor:pointer;font-family:inherit}

  /* ===== Editor (wizard) ===== */
  .voltar{background:none;border:none;color:var(--cinza-600);font-weight:600;cursor:pointer;font-size:14px;padding:0;margin-bottom:14px;font-family:inherit}
  .voltar:hover{color:var(--indigo);text-decoration:underline}
  .editor-grid{display:grid;grid-template-columns:1fr 300px;gap:16px;align-items:start}
  @media (max-width:980px){.editor-grid{grid-template-columns:1fr}}
  .rot-form-grid{display:grid;grid-template-columns:1fr 380px;gap:16px;align-items:start}
  .rot-form-coluna-esq{display:flex;flex-direction:column;gap:16px;min-width:0}
  .rot-form-painel{position:sticky;top:16px}
  @media (max-width:980px){.rot-form-grid{grid-template-columns:1fr}.rot-form-painel{position:static}}
  .rot-mapa-destacado{background:var(--indigo-claro,#eef1ff)}
  .secao{padding:20px 24px}
  .campo{margin-bottom:14px}
  .campo label{display:block;font-size:12.5px;font-weight:600;color:var(--cinza-600);margin-bottom:5px}
  .campo label b.obr{color:var(--vermelho)}
  .campo input[type=text],.campo input[type=date],.campo input[type=datetime-local],.campo input[type=time],.campo input[type=month],.campo input[type=number],.campo input[type=email],.campo input[type=password],.campo select{width:100%;padding:10px 12px;border:1px solid var(--indigo-borda);border-radius:9px;background:var(--indigo-claro);font-size:14px;font-family:inherit;transition:border-color .15s ease,box-shadow .15s ease,background .2s ease}
  .campo input:focus,.campo select:focus{border-color:var(--indigo);box-shadow:0 0 0 3px rgba(59,104,250,.15);background:var(--card)}
  .campo input.preenchido,.campo select.preenchido{background:var(--card)}
  .item-acao{display:block;width:100%;text-align:left;padding:8px 10px;border:none;background:none;font-family:inherit;font-size:12.5px;color:var(--cinza-900);border-radius:6px;cursor:pointer}
  .item-acao:hover{background:var(--indigo-claro);color:var(--indigo)}
  .item-acao:disabled{color:var(--cinza-400);cursor:not-allowed}
  .chip-perfil{padding:7px 13px;border:none;background:var(--card);font-weight:600;font-size:12px;color:var(--cinza-600);cursor:pointer;font-family:inherit;white-space:nowrap}
  .chip-perfil.ativo{background:var(--indigo);color:#fff}
  .campo input[readonly]{background:var(--cinza-100);border-color:var(--cinza-200);color:var(--cinza-600)}
  .campo .ajuda{font-size:11.5px;color:var(--cinza-400);margin-top:4px;line-height:1.4}
  /* issue #315: campo DERIVADO sempre visível (Potência/Cód. Sankhya da bomba)
     — mesma caixa/medidas de .campo input[readonly] acima, só que em <div>
     (não é <input>: não é "o que se escolhe", é texto que o sistema derivou). */
  .campo .campo-fixo{display:block;box-sizing:border-box;width:100%;padding:10px 12px;border:1px solid var(--cinza-200);border-radius:9px;background:var(--cinza-100);color:var(--cinza-600);font-size:14px;font-family:inherit}
  /* campos compactos (estágio/vaso/carcaça) — mesma densidade da .tabela-vasos */
  #conteudo-etapas .eqp-compacto .campo{margin-bottom:0}
  #conteudo-etapas .eqp-compacto .campo label{font-size:11px;margin-bottom:3px}
  #conteudo-etapas .eqp-compacto .campo input[type=text],#conteudo-etapas .eqp-compacto .campo input[type=number],#conteudo-etapas .eqp-compacto .campo select{padding:6px 8px;font-size:12.5px;border-radius:7px}
  .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
  .grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 16px}
  .grid-4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:0 16px}
  .grid-uf-mun-loc{display:grid;grid-template-columns:100px 1fr 1fr;gap:0 16px}
  @media (max-width:700px){.grid-2,.grid-3,.grid-4,.grid-uf-mun-loc{grid-template-columns:1fr}}
  .com-unidade{position:relative}
  .com-unidade .unidade{position:absolute;right:10px;top:34px;font-size:11px;color:var(--cinza-400);pointer-events:none}
  /* densidade compacta em TODO o wizard do equipamento (mesma altura da .tabela-vasos) */
  #conteudo-etapas .campo{margin-bottom:10px}
  #conteudo-etapas .campo label{font-size:11.5px;margin-bottom:3px;font-weight:500}
  #conteudo-etapas .campo input[type=text],#conteudo-etapas .campo input[type=date],#conteudo-etapas .campo input[type=datetime-local],#conteudo-etapas .campo input[type=time],#conteudo-etapas .campo input[type=month],#conteudo-etapas .campo input[type=number],#conteudo-etapas .campo input[type=email],#conteudo-etapas .campo input[type=password],#conteudo-etapas .campo select{padding:7px 10px;font-size:12.5px;border-radius:8px}
  #conteudo-etapas .campo .campo-fixo{padding:7px 10px;font-size:12.5px;border-radius:8px}
  #conteudo-etapas .campo .ajuda{margin-top:3px}
  #conteudo-etapas .com-unidade .unidade{top:27px}

  /* Dados de startup / baseline v1 — 3 blocos com moldura + fundo cinza claro,
     no padrão visual dos "estágio de membrana/filtração" (issue #128) */
  .st-card{margin-bottom:16px}
  .st-card .titulo-secao{margin-bottom:8px}
  .st-bloco{border:1px solid var(--cinza-200);border-radius:var(--raio);background:var(--cinza-50);padding:12px 14px;margin-bottom:12px}
  .st-bloco:last-child{margin-bottom:0}
  .st-bloco-titulo{display:flex;justify-content:space-between;align-items:baseline;font-size:12.5px;font-weight:700;color:var(--indigo-escuro);margin-bottom:6px}
  .st-un-sel{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--cinza-600);text-transform:none;letter-spacing:normal}
  .st-un-sel select{width:auto;padding:3px 8px;font-size:11px;border:1px solid var(--indigo-borda);border-radius:6px;background:var(--indigo-claro);font-family:inherit;color:var(--cinza-900)}
  .st-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
  @media (max-width:700px){.st-grid{grid-template-columns:1fr}}
  .st-par{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px solid var(--cinza-100)}
  .st-par label{flex:1;font-size:12px;font-weight:600;color:var(--cinza-600);margin:0}
  .st-par .st-in{display:flex;align-items:center;gap:6px;width:136px;flex:none}
  .st-par input{width:100%;padding:5px 8px;border:1px solid var(--indigo-borda);border-radius:7px;background:var(--indigo-claro);font-size:12.5px;font-family:inherit;text-align:right;color:var(--cinza-900)}
  .st-par input:focus{border-color:var(--indigo);box-shadow:0 0 0 3px rgba(59,104,250,.15);background:var(--card)}
  .st-par .st-un{font-size:11px;color:var(--cinza-400);width:40px;flex:none}
  .st-par.st-calc{background:var(--indigo-claro);border-radius:8px;padding:5px 8px;margin:0 -8px;border-bottom:none}
  .st-par.st-calc label{color:var(--indigo-escuro)}
  .st-par.st-calc input{background:var(--card);border-color:var(--indigo);font-weight:800;color:var(--indigo-escuro)}
  /* issue #261 (item 6): campo preenchido fica branco, mesma convenção de .campo —
     .st-calc é readonly (fora do SEL_PREENCHIVEL), nunca ganha .preenchido. */
  .st-par input.preenchido,.st-par select.preenchido{background:var(--card)}

  /* Stepper */
  .stepper{display:flex;gap:0;margin-bottom:16px;background:var(--card);border:1px solid var(--borda);border-radius:var(--raio);box-shadow:var(--sombra);overflow-x:auto}
  .passo{flex:1;min-width:130px;padding:12px 10px 10px;border:none;background:none;cursor:pointer;font-family:inherit;text-align:left;border-bottom:3px solid transparent;position:relative}
  .passo:hover{background:var(--cinza-50)}
  .passo.atual{border-bottom-color:var(--indigo);background:var(--indigo-claro)}
  .passo .num{width:20px;height:20px;border-radius:50%;background:var(--cinza-200);color:var(--cinza-600);font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;margin-right:6px}
  .passo.completo .num{background:var(--verde);color:#fff}
  .passo.atual .num{background:var(--indigo);color:#fff}
  .passo .nome{font-size:12px;font-weight:600;color:var(--cinza-900);display:inline}
  .passo .estado{display:block;font-size:10.5px;color:var(--cinza-400);margin-top:3px;margin-left:26px}

  .bloco-condicional{border:1.5px dashed var(--indigo-borda);border-radius:var(--raio);padding:14px 16px;margin-top:8px;background:var(--indigo-claro)}
  .bloco-condicional .cab-bloco{font-size:12px;font-weight:700;color:var(--indigo-escuro);margin-bottom:10px;display:flex;align-items:center;gap:6px}

  /* Cards repetíveis */
  .card-rep{border:1px solid var(--cinza-200);border-radius:var(--raio);padding:14px 16px;margin-bottom:12px;background:var(--cinza-50)}
  .card-rep .cab-rep{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;flex-wrap:wrap;gap:6px}
  .card-rep .cab-rep b{font-size:13px;color:var(--indigo-escuro)}
  .card-rep .cab-rep .acoes-rep{display:flex;gap:6px;flex-wrap:wrap}
  .card-rep .card-rep{background:var(--card)}
  .btn-mini{padding:5px 11px;border-radius:8px;border:1px solid var(--cinza-200);background:var(--card);cursor:pointer;font-size:11.5px;font-weight:600;color:var(--cinza-600);font-family:inherit}
  .btn-mini:hover{border-color:var(--indigo);color:var(--indigo)}
  .btn-mini.perigo:hover{border-color:var(--vermelho);color:var(--vermelho)}
  .btn-add{border:1.5px dashed var(--indigo-borda);background:none;color:var(--indigo);width:100%;padding:10px;border-radius:var(--raio);cursor:pointer;font-weight:600;font-family:inherit;font-size:13px}
  .btn-add:hover{background:var(--indigo-claro)}

  /* Integração AcquaDose */
  .acquadose-box{background:var(--indigo-claro);border:1px solid var(--indigo-borda);border-radius:var(--raio);padding:12px 14px;margin-top:10px}
  .acquadose-box .cab-ad{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--indigo-escuro);font-size:12.5px;margin-bottom:6px;flex-wrap:wrap}
  .acquadose-box .dado-calc{display:flex;justify-content:space-between;font-size:12px;color:var(--cinza-600);padding:3px 0}
  .acquadose-box .dado-calc b{color:var(--cinza-900)}
  .acquadose-box .sem-calc{font-size:12px;color:var(--cinza-600);font-style:italic}

  /* Painel resumo */
  .pendencias{margin-top:12px}
  .pendencias .pend{font-size:12px;color:var(--ambar);padding:4px 0;display:flex;gap:6px;align-items:flex-start}
  .rodape-card{display:flex;gap:8px;justify-content:flex-end;margin-top:16px;padding-top:14px;border-top:1px solid var(--cinza-100);flex-wrap:wrap}
  /* issue #261 (item 5): rodapé do editor (painel lateral, estreito) em 2 linhas —
     "Salvar rascunho" sozinho em cima, Cancelar/Salvar dividindo embaixo — em vez
     de 3 botões espremidos numa linha só, com o rótulo quebrando e desalinhando. */
  .rodape-editor{flex-direction:column;align-items:stretch;gap:8px;padding-top:10px}
  .rodape-editor .btn{white-space:nowrap;padding:7px 14px}
  .rodape-editor>div{display:flex;gap:8px}
  .rodape-editor>div>.btn{flex:1}
  .toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--indigo-escuro);color:#fff;padding:12px 22px;border-radius:10px;font-size:13.5px;box-shadow:0 8px 24px rgba(16,24,40,.3);display:none;z-index:99;max-width:640px}

  /* ================= Engenharia · AcquaDose (tela fundida no shell) =================
     Variáveis próprias do AcquaDose; classes não colidem com o shell (verificado).
     .calcpop/.calcbtn ficam globais (o popup é anexado ao <body>). */
  /* Lote H (26/07): tokens equivalentes consolidados (mesmo valor do :root principal) — sem duplicar hex. */
  :root{ --azul-vivo:var(--indigo); --azul-marinho:var(--indigo-escuro); --azul-claro:var(--indigo-borda); --bg:var(--pg); --bg-gelo:var(--indigo-claro); }
  #tela-acquadose{ color:var(--grafite); max-width:1040px; }  /* padronizado com RoPump/AcquaFlow */
  #tela-acquadose .card-sec, #tela-acquadose .pump-selection, #tela-acquadose .results-section {
    background:var(--card); border:1px solid var(--azul-claro); border-radius:12px;
    padding:22px 26px; margin-top:18px; box-shadow:0 1px 3px rgba(32,56,136,.06); width:100%;
  }
  #tela-acquadose .results-section { border:1px solid var(--azul-vivo); box-shadow:0 2px 10px rgba(59,104,250,.10); }
  #tela-acquadose .form-grid { display:grid; grid-template-columns:1fr; gap:25px; width:100%; }
  #tela-acquadose .form-group { display:flex; flex-direction:column; }
  #tela-acquadose .form-group label { font-weight:600; color:var(--azul-marinho); margin-bottom:6px; font-size:12px; text-transform:uppercase; letter-spacing:.5px; }
  #tela-acquadose .form-group input, #tela-acquadose .form-group select {
    padding:10px 12px; border:1px solid var(--azul-claro); border-radius:9px;
    font-size:15px; font-family:inherit; color:var(--grafite); background:var(--card); transition:all .2s ease; width:100%;
  }
  #tela-acquadose .form-group input:focus, #tela-acquadose .form-group select:focus { outline:none; border-color:var(--azul-vivo); box-shadow:0 0 0 3px rgba(59,104,250,.15); }
  #tela-acquadose .input-group { display:flex; gap:10px; align-items:flex-end; }
  #tela-acquadose .input-group input { flex:1; }
  #tela-acquadose .unit-sel { flex:0 0 92px; width:92px; padding:10px 8px; border:1px solid var(--azul-claro); border-radius:9px; font-size:13px; font-family:inherit; color:var(--azul-marinho); background:var(--card); }
  #tela-acquadose .pendente { background:var(--indigo-claro) !important; }
  #tela-acquadose .trio { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:18px; }
  #tela-acquadose .calcbtn, .calcbtn { flex:0 0 40px; width:40px; height:42px; border:1px solid var(--azul-claro); background:var(--card); border-radius:9px; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; }
  #tela-acquadose .calcbtn:hover, .calcbtn:hover { border-color:var(--azul-vivo); }
  .calcpop { position:fixed; z-index:9999; width:224px; background:var(--card); border:1px solid var(--azul-claro); border-radius:12px; box-shadow:0 12px 30px rgba(20,40,90,.22); padding:12px; }
  .calcpop .ttl { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--azul-vivo); margin-bottom:6px; }
  .calcpop .disp { width:100%; text-align:right; font-size:19px; font-weight:700; color:var(--azul-marinho); background:var(--indigo-claro); border:1px solid var(--azul-claro); border-radius:9px; padding:8px 10px; margin-bottom:8px; min-height:40px; box-sizing:border-box; overflow:hidden; white-space:nowrap; }
  .calcpop .kp { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
  .calcpop .kp button { padding:9px 0; border:1px solid var(--azul-claro); border-radius:9px; background:var(--card); font-size:15px; cursor:pointer; color:var(--azul-marinho); font-family:inherit; }
  .calcpop .kp button:hover { background:var(--indigo-claro); }
  .calcpop .kp .op { background:var(--indigo-claro); font-weight:700; }
  .calcpop .kp .eq { background:var(--azul-marinho); color:#fff; border-color:var(--azul-marinho); font-weight:700; }
  .calcpop .kp .use { grid-column:1/-1; margin-top:6px; padding:9px 0; border:1px solid var(--azul-vivo); background:var(--card); color:var(--azul-vivo); border-radius:9px; font-weight:700; cursor:pointer; font-family:inherit; }
  #tela-acquadose .chemical-info { background:var(--bg-gelo); padding:15px; border-radius:9px; margin-top:-15px; font-size:12px; color:var(--cinza-600); border-left:4px solid var(--azul-vivo); grid-column:1 / -1; }
  #tela-acquadose .chemical-info strong { color:var(--azul-marinho); }
  #tela-acquadose .results-title { color:var(--azul-vivo); font-size:15px; font-weight:700; text-transform:uppercase; letter-spacing:1px; }
  #tela-acquadose .sec-title { color:var(--azul-vivo); font-size:15px; font-weight:700; text-transform:uppercase; letter-spacing:1px; margin-bottom:14px; }
  #tela-acquadose .results-grid { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:15px; }
  #tela-acquadose .result-card { background:var(--bg-gelo); padding:15px; border-radius:9px; border:1px solid var(--borda); text-align:center; }
  #tela-acquadose .result-label { font-size:11px; color:var(--cinza-600); text-transform:uppercase; font-weight:600; margin-bottom:8px; letter-spacing:.5px; }
  #tela-acquadose .result-value { font-size:24px; font-weight:700; color:var(--azul-marinho); margin-bottom:4px; }
  #tela-acquadose .result-unit { font-size:12px; color:var(--cinza-600); }
  #tela-acquadose .result-reg { font-size:11px; color:var(--azul-vivo); font-weight:600; margin-top:4px; }
  #tela-acquadose .pump-selection h3 { color:var(--azul-vivo); font-size:15px; margin-bottom:14px; font-weight:700; text-transform:uppercase; letter-spacing:1px; }
  #tela-acquadose .result-block { margin-top:15px; }
  #tela-acquadose .result-block:empty { margin-top:0; }
  #tela-acquadose .pump-options { display:flex; gap:8px; }
  #tela-acquadose .pump-options .pump-btn, #tela-acquadose .pump-options .tank-btn { flex:1 1 0; min-width:0; }
  #tela-acquadose .pump-btn, #tela-acquadose .tank-btn { padding:9px 6px; border:1px solid var(--azul-claro); background:var(--card); color:var(--cinza-600); border-radius:9px; cursor:pointer; font-weight:600; transition:all .15s ease; font-size:12px; font-family:inherit; }
  #tela-acquadose .pump-btn:hover, #tela-acquadose .tank-btn:hover { border-color:var(--azul-vivo); color:var(--azul-vivo); }
  #tela-acquadose .pump-btn.selected, #tela-acquadose .tank-btn.selected { background:rgba(59,104,250,.08); border-color:var(--azul-vivo); color:var(--azul-marinho); box-shadow:0 0 0 3px rgba(59,104,250,.15); }
  #tela-acquadose .custom-field-row { display:flex; align-items:center; gap:10px; margin-top:12px; }
  #tela-acquadose .custom-field-row label { font-size:12px; font-weight:600; color:var(--azul-marinho); white-space:nowrap; }
  #tela-acquadose .custom-field-row input { flex:1; min-width:0; padding:10px; border:1px solid var(--azul-claro); border-radius:9px; font-size:12px; font-family:inherit; background:var(--card); color:var(--grafite); }
  #tela-acquadose .custom-field-row span { font-size:12px; color:var(--cinza-600); white-space:nowrap; }
  #tela-acquadose .warning { background:var(--ambar-claro); border:1px solid var(--ambar); color:var(--ambar); padding:12px 14px; border-radius:9px; margin-top:12px; font-size:12px; }
  #tela-acquadose .success { background:rgba(31,157,87,.08); border:1px solid rgba(31,157,87,.35); color:var(--verde); padding:12px 14px; border-radius:9px; margin-top:12px; font-size:12px; }
  @media (max-width:768px){ #tela-acquadose .results-grid { grid-template-columns:1fr 1fr; } #tela-acquadose .card-sec, #tela-acquadose .pump-selection, #tela-acquadose .results-section { padding:18px; } }
  #tela-acquadose .sec-title, #tela-acquadose .pump-selection h3, #tela-acquadose .results-title { display:flex; align-items:center; gap:10px; line-height:1; }
  #tela-acquadose .sec-title, #tela-acquadose .pump-selection h3 { border-bottom:2px solid var(--azul-claro); padding-bottom:8px; }
  #tela-acquadose .sec-title.toggle { cursor:pointer; user-select:none; }
  #tela-acquadose .chev { margin-left:auto; transition:transform .2s ease; color:var(--azul-vivo); font-size:13px; }
  #tela-acquadose .card-sec.collapsed .form-grid { display:none; }
  #tela-acquadose .card-sec.collapsed .sec-title { margin-bottom:0; }
  #tela-acquadose .card-sec.collapsed .chev { transform:rotate(-90deg); }
  #tela-acquadose .actions { display:flex; gap:12px; margin-top:18px; flex-wrap:wrap; }
  #tela-acquadose .action-btn { flex:1 1 0; min-width:150px; padding:13px 18px; border-radius:9px; font-size:14px; font-weight:600; cursor:pointer; font-family:inherit; transition:all .2s ease; border:2px solid transparent; }
  #tela-acquadose .action-btn.primary { background:var(--azul-vivo); color:#fff; border-color:var(--azul-vivo); }
  #tela-acquadose .action-btn.primary:not(:disabled):hover { background:var(--azul-marinho); border-color:var(--azul-marinho); }
  #tela-acquadose .action-btn.secondary { background:var(--card); color:var(--azul-vivo); border-color:var(--azul-vivo); }
  #tela-acquadose .action-btn.secondary:not(:disabled):hover { background:rgba(59,104,250,.06); }
  #tela-acquadose .action-btn:disabled { opacity:.5; cursor:not-allowed; }

  /* ================= Engenharia · RoPump (tela fundida no shell) =================
     Variáveis próprias e CSS 100% escopados a #tela-ropump; não colidem com o
     shell nem com o AcquaDose. Os ids cliente/equipamento/usuario coexistem com
     os do AcquaDose porque o ropump-ui.js só os busca dentro desta tela. ====== */
  #tela-ropump{ --grafite:#2B292A; --verde:#1F9D57; --vermelho:#C0392B; --ambar:#B7791F; color:var(--grafite); max-width:1040px; }
  #tela-ropump .card{ border:1px solid var(--borda); border-radius:12px; padding:16px 18px; margin-bottom:14px; background:var(--card); }
  #tela-ropump .card h2{ color:var(--azul-vivo); font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; margin-bottom:12px; border-bottom:2px solid var(--azul-claro); padding-bottom:7px; }
  #tela-ropump #saida{ counter-reset:sec; display:none; }
  #tela-ropump #saida .card h2::before{ counter-increment:sec; content:counter(sec) ". "; }
  #tela-ropump table.hdr{ width:100%; border-collapse:collapse; font-size:12px; }
  #tela-ropump table.hdr td{ border:1px solid var(--azul-claro); padding:5px 8px; }
  #tela-ropump table.hdr .hl{ background:var(--indigo-claro); color:var(--cinza-600); font-weight:600; width:16%; }
  #tela-ropump table.hdr .hv{ color:var(--azul-marinho); font-weight:600; width:34%; }
  #tela-ropump label{ display:block; font-size:11.5px; font-weight:600; color:var(--azul-marinho); text-transform:uppercase; letter-spacing:.4px; margin-bottom:5px; }
  #tela-ropump .grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; }
  #tela-ropump input, #tela-ropump select{ width:100%; padding:9px 10px; border:1px solid var(--azul-claro); border-radius:9px; font-size:14px; font-family:inherit; color:var(--grafite); background:var(--card); }
  #tela-ropump input:focus, #tela-ropump select:focus{ outline:none; border-color:var(--azul-vivo); box-shadow:0 0 0 3px rgba(59,104,250,.15); }
  #tela-ropump .row-unit{ display:flex; gap:8px; } #tela-ropump .row-unit input{ flex:2; } #tela-ropump .row-unit select{ flex:1; }
  #tela-ropump .btn{ background:var(--azul-vivo); color:#fff; border:2px solid var(--azul-vivo); border-radius:9px; padding:11px 22px; font-size:14px; font-weight:600; cursor:pointer; font-family:inherit; }
  #tela-ropump .btn:hover{ background:var(--azul-marinho); border-color:var(--azul-marinho); }
  #tela-ropump .btn-sec{ background:var(--card); color:var(--azul-vivo); } #tela-ropump .btn-sec:hover{ background:var(--bg-gelo); }
  #tela-ropump .actions{ margin-top:10px; display:flex; gap:10px; flex-wrap:wrap; }
  #tela-ropump .hint{ font-size:11px; color:var(--cinza-400); margin-top:4px; }
  #tela-ropump .tipo-group{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:4px; }
  #tela-ropump .tipo-btn{ flex:1; min-width:200px; text-align:center; padding:12px 14px; border:2px solid var(--azul-claro); border-radius:10px; background:var(--card); cursor:pointer; font-weight:700; color:var(--azul-marinho); font-family:inherit; }
  #tela-ropump .tipo-btn .t1{ display:block; font-size:14px; } #tela-ropump .tipo-btn .t2{ display:block; font-size:11px; font-weight:400; color:var(--cinza-400); text-transform:none; letter-spacing:0; margin-top:2px; }
  #tela-ropump .tipo-btn.active{ border-color:var(--azul-vivo); background:var(--azul-vivo); color:#fff; }
  #tela-ropump .tipo-btn.active .t2{ color:rgba(255,255,255,.85); }
  #tela-ropump .calc-btn{ flex:0 0 auto; width:46px; border:1px solid var(--azul-claro); background:var(--card); border-radius:9px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
  #tela-ropump .calc-btn:hover{ border-color:var(--azul-vivo); }
  #tela-ropump .af-btn{ font-weight:700; color:var(--azul-vivo); font-size:13px; }
  #tela-ropump .calc-btn:disabled{ opacity:.4; cursor:not-allowed; }
  #tela-ropump .folgas{ background:var(--bg-gelo); border:1px solid var(--borda); border-radius:10px; padding:14px 16px; margin-top:14px; }
  #tela-ropump .adv{ margin-top:14px; }
  #tela-ropump .adv>summary{ cursor:pointer; font-size:12px; font-weight:700; color:var(--azul-marinho); text-transform:uppercase; letter-spacing:.4px; padding:8px 0; list-style:none; }
  #tela-ropump .adv>summary::-webkit-details-marker{ display:none; }
  #tela-ropump .adv>summary::before{ content:'\25B8  '; color:var(--azul-vivo); }
  #tela-ropump .adv[open]>summary::before{ content:'\25BE  '; }
  #tela-ropump .mtx-title{ font-size:11px; font-weight:700; color:var(--azul-marinho); text-transform:uppercase; letter-spacing:.4px; margin:4px 0; }
  #tela-ropump .mtx{ display:grid; grid-template-columns:78px 1fr 1fr; gap:8px 12px; align-items:center; }
  #tela-ropump .mtx-head{ font-size:10px; text-transform:uppercase; letter-spacing:.3px; color:var(--cinza-600); font-weight:700; text-align:center; }
  #tela-ropump .mtx-lbl{ font-size:12.5px; font-weight:600; color:var(--azul-marinho); }
  #tela-ropump .mtx-cell{ display:flex; flex-direction:column; gap:3px; }
  #tela-ropump .mtx-cell .def{ font-size:10px; color:var(--cinza-400); }
  #tela-ropump .def-tag{ font-size:10px; color:var(--cinza-400); font-weight:400; text-transform:none; letter-spacing:0; margin-left:4px; }
  #tela-ropump .pendente{ background:var(--bg-gelo); }
  #tela-ropump table{ width:100%; border-collapse:collapse; font-size:13px; margin-top:4px; }
  #tela-ropump th, #tela-ropump td{ text-align:left; padding:9px 10px; border-bottom:1px solid var(--borda); vertical-align:top; }
  #tela-ropump th{ background:var(--hover); color:var(--azul-marinho); font-size:11px; text-transform:uppercase; letter-spacing:.4px; }
  #tela-ropump tr.rec{ background:rgba(31,157,87,.08); } #tela-ropump tr.alt{ background:rgba(59,104,250,.06); }
  #tela-ropump .tag{ display:inline-block; font-size:10px; font-weight:700; padding:2px 7px; border-radius:20px; text-transform:uppercase; letter-spacing:.4px; }
  #tela-ropump .tag.rec{ background:var(--verde); color:#fff; } #tela-ropump .tag.alt{ background:var(--azul-vivo); color:#fff; }
  #tela-ropump .st-ok{ color:var(--verde); font-weight:700; } #tela-ropump .st-no{ color:var(--cinza-400); }
  #tela-ropump .demanda dl{ display:grid; grid-template-columns:max-content 1fr; gap:6px 18px; font-size:14px; }
  #tela-ropump .demanda dt{ color:var(--azul-marinho); font-weight:600; } #tela-ropump .demanda dd{ color:var(--grafite); }
  #tela-ropump .just p{ font-size:14px; margin-bottom:10px; } #tela-ropump .just b{ color:var(--azul-marinho); }
  #tela-ropump .alertas li{ font-size:13px; margin:6px 0 6px 18px; }
  #tela-ropump .aviso{ background:var(--ambar-claro); border:1px solid var(--ambar); color:var(--ambar); padding:10px 14px; border-radius:9px; font-size:12.5px; margin-top:8px; }
  #tela-ropump .erro{ background:var(--vermelho-claro); border:1px solid var(--vermelho); color:var(--vermelho); padding:10px 14px; border-radius:9px; font-size:14px; }
  #tela-ropump details{ margin-top:10px; } #tela-ropump summary{ cursor:pointer; color:var(--azul-vivo); font-size:13px; font-weight:600; }
  #tela-ropump .muted{ color:var(--cinza-400); font-size:12px; }
  #tela-ropump .bomba-link{ color:var(--azul-vivo); text-decoration:none; border-bottom:1px dotted var(--azul-vivo); font-weight:600; cursor:pointer; }
  #tela-ropump .bomba-link:hover{ border-bottom-style:solid; }
  #tela-ropump .folga-sub{ font-size:11px; color:var(--verde); margin-top:2px; font-weight:600; }
  #tela-ropump .extrap{ color:var(--ambar); font-weight:600; border-bottom:1px dotted #d8b86a; cursor:help; }
  #tela-ropump .calc-overlay{ display:none; position:fixed; inset:0; background:rgba(32,56,136,.35); z-index:50; align-items:center; justify-content:center; }
  #tela-ropump .calc-overlay.show{ display:flex; }
  #tela-ropump .calc-box{ background:var(--card); border-radius:14px; box-shadow:0 20px 60px rgba(32,56,136,.3); width:290px; padding:16px; }
  #tela-ropump .calc-head{ display:flex; justify-content:space-between; align-items:center; color:var(--azul-marinho); font-weight:700; font-size:14px; margin-bottom:10px; }
  #tela-ropump .calc-head button{ border:none; background:none; font-size:22px; cursor:pointer; color:var(--cinza-400); line-height:1; }
  #tela-ropump .calc-disp{ width:100%; text-align:right; font-size:22px; padding:10px 12px; border:1px solid var(--azul-claro); border-radius:9px; margin-bottom:10px; background:var(--hover); color:var(--grafite); }
  #tela-ropump .calc-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
  #tela-ropump .calc-grid button{ padding:13px 0; border:1px solid var(--azul-claro); background:var(--card); border-radius:9px; font-size:16px; cursor:pointer; font-family:inherit; color:var(--grafite); }
  #tela-ropump .calc-grid button:hover{ background:var(--hover); }
  #tela-ropump .calc-grid .op{ color:var(--azul-vivo); font-weight:700; }
  #tela-ropump .calc-grid .eq{ background:var(--azul-vivo); color:#fff; border-color:var(--azul-vivo); }
  #tela-ropump .calc-actions{ display:flex; justify-content:space-between; align-items:center; margin-top:12px; gap:10px; }

  /* ================= Engenharia · AcquaWell (tela fundida no shell) =================
     CSS 100% escopado a #tela-acquawell; espelha o RoPump (mesma paleta/estrutura de
     card/grid/tabela). .calcbtn/.calcpop reaproveitam o CSS global (acima). ====== */
  #tela-acquawell{ --grafite:#2B292A; --verde:#1F9D57; --vermelho:#C0392B; --ambar:#B7791F; color:var(--grafite); max-width:1040px; }
  #tela-acquawell .card{ border:1px solid var(--borda); border-radius:12px; padding:16px 18px; margin-bottom:14px; background:var(--card); }
  #tela-acquawell .card h2{ color:var(--azul-vivo); font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; margin-bottom:12px; border-bottom:2px solid var(--azul-claro); padding-bottom:7px; }
  #tela-acquawell label{ display:block; font-size:11.5px; font-weight:600; color:var(--azul-marinho); text-transform:uppercase; letter-spacing:.4px; margin-bottom:5px; }
  #tela-acquawell .grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; }
  #tela-acquawell input, #tela-acquawell select{ width:100%; padding:9px 10px; border:1px solid var(--azul-claro); border-radius:9px; font-size:14px; font-family:inherit; color:var(--grafite); background:var(--card); }
  #tela-acquawell input:focus, #tela-acquawell select:focus{ outline:none; border-color:var(--azul-vivo); box-shadow:0 0 0 3px rgba(59,104,250,.15); }
  #tela-acquawell .row-unit{ display:flex; gap:8px; } #tela-acquawell .row-unit input{ flex:2; } #tela-acquawell .row-unit select{ flex:1; }
  #tela-acquawell .btn{ background:var(--azul-vivo); color:#fff; border:2px solid var(--azul-vivo); border-radius:9px; padding:11px 22px; font-size:14px; font-weight:600; cursor:pointer; font-family:inherit; }
  #tela-acquawell .btn:hover{ background:var(--azul-marinho); border-color:var(--azul-marinho); }
  #tela-acquawell .btn-sec{ background:var(--card); color:var(--azul-vivo); } #tela-acquawell .btn-sec:hover{ background:var(--bg-gelo); }
  #tela-acquawell .actions{ margin-top:10px; display:flex; gap:10px; flex-wrap:wrap; }
  #tela-acquawell .hint{ font-size:11px; color:var(--cinza-400); margin-top:4px; }
  #tela-acquawell .modo-btn{ flex:1; padding:9px; border:1px solid var(--azul-claro); background:var(--card); color:var(--cinza-600); border-radius:9px; cursor:pointer; font-weight:600; font-size:13px; font-family:inherit; transition:all .15s ease; }
  #tela-acquawell .modo-btn:hover{ border-color:var(--azul-vivo); color:var(--azul-vivo); }
  #tela-acquawell .modo-btn.ativo{ background:rgba(59,104,250,.08); border-color:var(--azul-vivo); color:var(--azul-marinho); box-shadow:0 0 0 3px rgba(59,104,250,.15); }
  #tela-acquawell .modo-group{ display:flex; gap:8px; margin-bottom:14px; }
  #tela-acquawell .sub-titulo{ font-size:12px; font-weight:700; color:var(--azul-marinho); text-transform:uppercase; letter-spacing:.4px; margin:14px 0 8px; }
  #tela-acquawell .def-tag{ font-size:10px; color:var(--cinza-400); font-weight:400; text-transform:none; letter-spacing:0; margin-left:4px; }
  #tela-acquawell .adv{ margin-top:14px; }
  #tela-acquawell .adv>summary{ cursor:pointer; font-size:12px; font-weight:700; color:var(--azul-marinho); text-transform:uppercase; letter-spacing:.4px; padding:8px 0; list-style:none; }
  #tela-acquawell .adv>summary::-webkit-details-marker{ display:none; }
  #tela-acquawell .adv>summary::before{ content:'\25B8  '; color:var(--azul-vivo); }
  #tela-acquawell .adv[open]>summary::before{ content:'\25BE  '; }
  #tela-acquawell .pendente{ background:var(--bg-gelo); }
  #tela-acquawell table{ width:100%; border-collapse:collapse; font-size:13px; margin-top:4px; }
  #tela-acquawell th, #tela-acquawell td{ text-align:left; padding:9px 10px; border-bottom:1px solid var(--borda); vertical-align:top; }
  #tela-acquawell th{ background:var(--hover); color:var(--azul-marinho); font-size:11px; text-transform:uppercase; letter-spacing:.4px; }
  #tela-acquawell tr.rec{ background:rgba(31,157,87,.08); } #tela-acquawell tr.alt{ background:rgba(59,104,250,.06); }
  #tela-acquawell table.parcelas tr.total td{ font-weight:700; color:var(--azul-marinho); border-top:2px solid var(--azul-claro); }
  #tela-acquawell .tag{ display:inline-block; font-size:10px; font-weight:700; padding:2px 7px; border-radius:20px; text-transform:uppercase; letter-spacing:.4px; }
  #tela-acquawell .tag.rec{ background:var(--verde); color:#fff; } #tela-acquawell .tag.alt{ background:var(--azul-vivo); color:#fff; }
  #tela-acquawell .st-ok{ color:var(--verde); font-weight:700; } #tela-acquawell .st-no{ color:var(--vermelho); font-weight:700; } #tela-acquawell .st-super{ color:var(--ambar); font-weight:700; }
  #tela-acquawell .badge-ok, #tela-acquawell .badge-alerta{ display:inline-block; font-size:11px; font-weight:700; padding:3px 9px; border-radius:20px; }
  #tela-acquawell .badge-ok{ background:rgba(31,157,87,.12); color:var(--verde); }
  #tela-acquawell .badge-alerta{ background:var(--ambar-claro); color:var(--ambar); }
  #tela-acquawell .verif{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px; }
  #tela-acquawell .vitem{ font-size:13px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  #tela-acquawell dl{ display:grid; grid-template-columns:max-content 1fr; gap:6px 18px; font-size:14px; margin-bottom:10px; }
  #tela-acquawell dt{ color:var(--azul-marinho); font-weight:600; } #tela-acquawell dd{ color:var(--grafite); }
  #tela-acquawell .aviso{ background:var(--ambar-claro); border:1px solid var(--ambar); color:var(--ambar); padding:10px 14px; border-radius:9px; font-size:12.5px; margin-top:8px; }
  #tela-acquawell .erro{ background:var(--vermelho-claro); border:1px solid var(--vermelho); color:var(--vermelho); padding:10px 14px; border-radius:9px; font-size:14px; }
  #tela-acquawell details{ margin-top:10px; } #tela-acquawell summary{ cursor:pointer; color:var(--azul-vivo); font-size:13px; font-weight:600; }
  #tela-acquawell ul.motivos{ margin:0; padding-left:18px; font-size:12px; color:var(--cinza-600); }
  #tela-acquawell .muted{ color:var(--cinza-400); font-size:12px; }

  /* ============================================================================
   * issue #832 — acabamento visual do form da OS de INSTALACAO (apêndices A–F
   * da issue). Escopado a #os-conteudo-etapas/#os-painel-resumo, que só
   * existem no fluxo da INSTALACAO — não afeta PREVENTIVA/CORRETIVA/VISTORIA.
   * ==========================================================================*/
  /* apêndice A — caixa de identificação (etapa 0) */
  #os-conteudo-etapas .os-ident{overflow:hidden}
  #os-conteudo-etapas .os-id-r{display:flex;border-top:1px solid var(--cinza-100)}
  #os-conteudo-etapas .os-id-r:first-child{border-top:none}
  #os-conteudo-etapas .os-id-c{flex:0 0 33.3333%;border-left:1px solid var(--cinza-100);padding:10px 14px 11px;min-width:0;box-sizing:border-box}
  #os-conteudo-etapas .os-id-c:first-child{border-left:none}
  #os-conteudo-etapas .os-id-l{font-size:12.5px;font-weight:600;color:var(--cinza-600);margin-bottom:5px}
  #os-conteudo-etapas .os-id-v{font-size:13px;min-height:20px}
  #os-conteudo-etapas .os-id-v .sub{display:block;font-size:11.5px;color:var(--cinza-400);margin-top:1px}
  #os-conteudo-etapas .os-id-c input,#os-conteudo-etapas .os-id-c select{width:100%;padding:7px 10px;border:1px solid var(--indigo-borda);border-radius:8px;background:var(--indigo-claro);font-size:13px;font-family:inherit}
  #os-conteudo-etapas .os-id-c input:focus,#os-conteudo-etapas .os-id-c select:focus{outline:none;border-color:var(--indigo);box-shadow:0 0 0 3px rgba(59,104,250,.15);background:var(--card)}
  #os-conteudo-etapas .os-id-c input.preenchido,#os-conteudo-etapas .os-id-c select.preenchido{background:var(--card)}
  /* apêndice B — painel de resumo (linhas + cartão do baseline) */
  #os-painel-resumo .os-rs-linha{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;padding:6px 0;border-bottom:1px solid var(--cinza-100);color:var(--cinza-600)}
  #os-painel-resumo .os-rs-linha b{color:var(--cinza-900);text-align:right}
  #os-painel-resumo .os-aceite{border-top:1px solid var(--cinza-200);background:var(--cinza-50);margin:12px -16px -16px;border-radius:0 0 var(--raio) var(--raio)}
  #os-painel-resumo .os-ac-cab{padding:10px 16px;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--cinza-100)}
  #os-painel-resumo .os-ac-corpo{padding:11px 16px 13px}
  #os-painel-resumo .os-ac-nota{font-size:11.5px;color:var(--cinza-500);margin-bottom:10px;line-height:1.4}
  #os-painel-resumo .os-ac-corpo .campo label{font-size:11.5px}
  #os-painel-resumo .os-ac-corpo .campo input{padding:7px 10px;font-size:13px}
  /* apêndice C — desenho dos vasos (etapa Membranas) */
  #os-conteudo-etapas .os-fluxo{display:flex;align-items:center;gap:8px;font-size:10.5px;color:var(--indigo-escuro);font-weight:700;margin-bottom:8px}
  #os-conteudo-etapas .os-fluxo span.l{flex:1;border-top:1px dashed var(--cinza-300)}
  #os-conteudo-etapas .os-vaso-linha{display:flex;align-items:center;gap:10px;margin-bottom:8px}
  #os-conteudo-etapas .os-vaso-rot{flex:0 0 54px;text-align:right;font-size:11.5px;font-weight:700;color:var(--indigo-escuro)}
  #os-conteudo-etapas .os-vaso{flex:1;display:flex;border:2px solid var(--indigo-escuro);border-radius:26px;overflow:hidden;background:var(--card)}
  #os-conteudo-etapas .os-slot{flex:1;border-right:1.5px dashed var(--indigo-borda);padding:4px 5px 6px;min-width:0}
  #os-conteudo-etapas .os-slot:last-child{border-right:none}
  #os-conteudo-etapas .os-slot .pos{font-size:9px;text-transform:uppercase;letter-spacing:.4px;color:var(--cinza-400);text-align:center;margin-bottom:2px;font-weight:700}
  #os-conteudo-etapas .os-slot input{width:100%;border:1px solid var(--indigo-borda);background:var(--indigo-claro);border-radius:6px;padding:5px;font-size:11.5px;text-align:center;font-family:inherit;box-sizing:border-box}
  #os-conteudo-etapas .os-slot input.preenchido{background:var(--card)}
  #os-conteudo-etapas .os-flush{border:1px solid var(--borda);background:var(--cinza-50);border-radius:9px;padding:10px 12px;margin-top:10px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:13px}
  /* apêndice D — pílulas Sim/Não */
  #os-conteudo-etapas .os-segch{display:flex;gap:6px;flex-wrap:wrap}
  #os-conteudo-etapas .os-segch label{display:inline-flex;align-items:center;gap:6px;cursor:pointer;padding:6px 13px;border-radius:99px;border:1px solid var(--cinza-200);background:var(--card);font-size:13px;color:var(--cinza-600);white-space:nowrap}
  #os-conteudo-etapas .os-segch label:hover{background:var(--indigo-claro);border-color:var(--indigo-borda)}
  #os-conteudo-etapas .os-segch label:has(input:checked){background:var(--indigo-claro);border-color:var(--indigo);color:var(--indigo);font-weight:600}
  #os-conteudo-etapas .os-segch input[type=radio]{width:auto;margin:0;accent-color:var(--indigo);flex:0 0 auto}
  #os-conteudo-etapas td .os-segch label{padding:3px 10px;font-size:12px}
  /* issue #834 (item 4) — observações da instalação, textarea de largura toda */
  #os-conteudo-etapas .os-obs textarea{width:100%;min-height:132px;padding:12px 14px;border:1px solid var(--indigo-borda);border-radius:10px;background:var(--indigo-claro);font-size:13.5px;line-height:1.55;font-family:inherit;resize:vertical;box-sizing:border-box;transition:border-color .15s,box-shadow .15s,background .2s}
  #os-conteudo-etapas .os-obs textarea:focus{outline:none;border-color:var(--indigo);box-shadow:0 0 0 3px rgba(59,104,250,.15);background:var(--card)}
  #os-conteudo-etapas .os-obs textarea.preenchido{background:var(--card)}
  #os-conteudo-etapas .os-obs .ajuda{margin-top:6px}
  /* apêndice E — cartões de foto */
  #os-conteudo-etapas .os-fotos{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:10px;margin-top:6px}
  #os-conteudo-etapas .os-foto{position:relative;border:1.5px dashed var(--indigo-borda);border-radius:var(--raio);background:var(--indigo-claro);overflow:hidden;cursor:pointer;display:block}
  #os-conteudo-etapas .os-foto:hover{border-color:var(--indigo);background:var(--hover)}
  #os-conteudo-etapas .os-foto .vazio{padding:14px 12px 12px;text-align:center}
  #os-conteudo-etapas .os-foto .ic{display:block;margin:0 auto 7px;width:26px;height:26px;color:var(--indigo)}
  #os-conteudo-etapas .os-foto .rot{display:block;font-size:12.5px;font-weight:600;color:var(--cinza-900);line-height:1.25}
  #os-conteudo-etapas .os-foto .dica{display:block;font-size:11px;color:var(--cinza-400);margin-top:3px;line-height:1.3}
  #os-conteudo-etapas .os-foto .acao{display:block;font-size:11px;color:var(--indigo);font-weight:600;margin-top:8px}
  #os-conteudo-etapas .os-foto.cheia{border-style:solid;border-color:var(--verde);background:var(--card);cursor:default}
  #os-conteudo-etapas .os-foto.add{background:var(--card);display:flex;align-items:center;justify-content:center}
  #os-conteudo-etapas .os-foto.add .vazio{display:flex;flex-direction:column;align-items:center}
  #os-conteudo-etapas .os-foto img{width:100%;height:104px;object-fit:cover;display:block;background:var(--cinza-100)}
  #os-conteudo-etapas .os-foto .leg{padding:7px 9px 8px;border-top:1px solid var(--cinza-100)}
  #os-conteudo-etapas .os-foto .leg .arq{display:block;font-size:10.5px;color:var(--cinza-400);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #os-conteudo-etapas .os-foto .ok{position:absolute;top:6px;left:6px;background:var(--verde);color:#fff;font-size:10px;font-weight:700;padding:2px 8px;border-radius:99px}
  /* apêndice F — tabelas na densidade do app */
  #os-conteudo-etapas table{width:100%;border-collapse:collapse;margin-top:4px}
  #os-conteudo-etapas th{font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--cinza-600);text-align:left;padding:7px 8px;border-bottom:1px solid var(--borda);background:var(--cinza-50);font-weight:700}
  #os-conteudo-etapas td{padding:7px 8px;border-bottom:1px solid var(--cinza-100);vertical-align:middle;font-size:13px}
  #os-conteudo-etapas td input,#os-conteudo-etapas td select{width:100%;padding:6px 8px;border:1px solid var(--indigo-borda);border-radius:6px;background:var(--indigo-claro);font-size:12.5px;font-family:inherit;box-sizing:border-box}
  #os-conteudo-etapas td input:focus{outline:none;border-color:var(--indigo);box-shadow:0 0 0 3px rgba(59,104,250,.15);background:var(--card)}
  #os-conteudo-etapas td input.preenchido{background:var(--card)}

/* ============================================================================
 * Estilos que moravam em blocos <style> do app/index.html (fatia 5a do shell,
 * 26/10/2026), movidos BYTE A BYTE na mesma ordem do documento — splash, modos
 * das calculadoras, cadastros, AcquaWell. Em arquivo externo, a ordem relativa a
 * base.css é a mesma: eles vinham DEPOIS do <link> no documento.
 * ==========================================================================*/
/* ---- ex-<style> do index.html, linhas 17–31 (v1.427.0) ---- */
  #app-splash{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;background:#F4F7FB;transition:opacity .45s ease}
  body.dark #app-splash{background:#0e1621}
  #app-splash.saindo{opacity:0;pointer-events:none}
  #app-splash .spl-in{display:flex;flex-direction:column;align-items:center;gap:18px}
  #app-splash .spl-mark{display:flex;flex-direction:column;align-items:center;gap:14px;animation:splPulse 1.25s ease-in-out infinite}
  #app-splash .spl-mark img{width:72px;height:72px;object-fit:contain;display:block}
  #app-splash .spl-nome{font-family:'Epilogue','Arial Black',system-ui,sans-serif;font-weight:800;font-size:23px;letter-spacing:-.5px;color:var(--wordmark-acqua)}
  #app-splash .spl-nome b{font-weight:800;color:var(--wordmark-info)}
  #app-splash .spl-spin{width:30px;height:30px;border-radius:50%;border:3px solid rgba(59,104,250,.22);border-top-color:#3B68FA;animation:splSpin .8s linear infinite}
  body.dark #app-splash .spl-spin{border-color:rgba(192,208,225,.18);border-top-color:#3B68FA}
  @keyframes splPulse{0%,100%{transform:scale(1);opacity:.62}50%{transform:scale(1.09);opacity:1}}
  @keyframes splSpin{to{transform:rotate(360deg)}}
  @media (prefers-reduced-motion:reduce){#app-splash .spl-mark{animation:none}#app-splash .spl-spin{animation-duration:1.6s}}
/* ---- ex-<style> do index.html, linhas 135–139 (v1.427.0) ---- */
        #tela-acquadose .modo-btn{flex:1;padding:10px;border:1px solid var(--azul-claro);background:var(--card);color:var(--cinza-600);border-radius:9px;cursor:pointer;font-weight:600;font-size:13px;font-family:inherit;transition:all .15s ease}
        #tela-acquadose .modo-btn:hover{border-color:var(--azul-vivo);color:var(--azul-vivo)}
        #tela-acquadose .modo-btn.ativo{background:rgba(59,104,250,.08);border-color:var(--azul-vivo);color:var(--azul-marinho);box-shadow:0 0 0 3px rgba(59,104,250,.15)}
/* ---- ex-<style> do index.html, linhas 377–381 (v1.427.0) ---- */
        #tela-ropump .modo-btn{flex:1;padding:9px;border:1px solid var(--azul-claro);background:var(--card);color:var(--cinza-600);border-radius:9px;cursor:pointer;font-weight:600;font-size:13px;font-family:inherit;transition:all .15s ease}
        #tela-ropump .modo-btn:hover{border-color:var(--azul-vivo);color:var(--azul-vivo)}
        #tela-ropump .modo-btn.ativo{background:rgba(59,104,250,.08);border-color:var(--azul-vivo);color:var(--azul-marinho);box-shadow:0 0 0 3px rgba(59,104,250,.15)}
/* ---- ex-<style> do index.html, linhas 1531–1681 (v1.427.0) ---- */
  #tela-cadastro-quimicos, #tela-cadastro-bombas{ color:var(--cinza-900); font-size:14px; }
  #tela-cadastro-quimicos .painel, #tela-cadastro-bombas .painel{ display:none; }
  #tela-cadastro-quimicos .painel.ativo, #tela-cadastro-bombas .painel.ativo{ display:block; }
  #tela-cadastro-quimicos svg.ic, #tela-cadastro-bombas svg.ic{ width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px;flex-shrink:0; }
  #tela-cadastro-quimicos .subtitulo, #tela-cadastro-bombas .subtitulo{ color:var(--cinza-600);margin-bottom:18px; }
  #tela-cadastro-quimicos .nota-proposta, #tela-cadastro-bombas .nota-proposta{ background:var(--ambar-claro);border:1px solid var(--ambar);border-radius:var(--raio);padding:10px 16px;font-size:12.5px;color:var(--ambar);margin-bottom:18px; }
  #tela-cadastro-quimicos .cartao, #tela-cadastro-bombas .cartao{ background:var(--card);border:1px solid var(--borda);border-radius:var(--raio);box-shadow:var(--sombra); }
  #tela-cadastro-quimicos .codigo, #tela-cadastro-bombas .codigo{ font-family:Consolas,monospace;font-size:12px;background:var(--indigo-claro);padding:2px 8px;border-radius:6px;color:var(--indigo-escuro); }
  #tela-cadastro-quimicos .titulo-secao, #tela-cadastro-bombas .titulo-secao{ color:var(--indigo);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;padding-bottom:8px;border-bottom:1px solid var(--cinza-200);margin-bottom:14px;display:flex;justify-content:space-between;align-items:baseline; }
  #tela-cadastro-quimicos .titulo-secao .info, #tela-cadastro-bombas .titulo-secao .info{ font-size:11px;color:var(--cinza-400);text-transform:none;letter-spacing:0;font-weight:400; }

  /* Barra de ações / busca */
  #tela-cadastro-quimicos .barra-acoes, #tela-cadastro-bombas .barra-acoes{ display:flex;gap:12px;align-items:center;margin-bottom:14px;flex-wrap:wrap; }
  /* Uniformização 21/07: busca e botões da barra com 40px também nas telas de cadastro. */
  #tela-cadastro-quimicos .barra-acoes .busca input, #tela-cadastro-bombas .barra-acoes .busca input{ height:40px;box-sizing:border-box;padding-top:0;padding-bottom:0; }
  #tela-cadastro-quimicos .barra-acoes .btn, #tela-cadastro-bombas .barra-acoes .btn{ height:40px;box-sizing:border-box;padding-top:0;padding-bottom:0; }
  #tela-cadastro-quimicos .busca, #tela-cadastro-bombas .busca{ flex:1;min-width:240px;position:relative; }
  #tela-cadastro-quimicos .busca > svg, #tela-cadastro-bombas .busca > svg{ position:absolute;left:12px;top:11px;width:15px;height:15px;color:#7f97d8;fill:none;stroke:currentColor;stroke-width:2; }
  #tela-cadastro-quimicos .busca input, #tela-cadastro-bombas .busca input{ width:100%;padding:10px 14px 10px 38px;border:1px solid var(--indigo-borda);border-radius:9px;font-size:14px;background:var(--indigo-claro);font-family:inherit;transition:border-color .15s ease,box-shadow .15s ease,background .2s ease; }
  #tela-cadastro-quimicos .busca input:focus, #tela-cadastro-bombas .busca input:focus{ border-color:var(--indigo);box-shadow:0 0 0 3px rgba(59,104,250,.15);background:var(--card); }
  #tela-cadastro-quimicos .filtro-rapido, #tela-cadastro-bombas .filtro-rapido{ display:flex;gap:6px; }
  #tela-cadastro-quimicos .chip-filtro, #tela-cadastro-bombas .chip-filtro{ padding:8px 14px;border-radius:99px;border:1px solid var(--cinza-200);background:var(--card);cursor:pointer;font-size:13px;color:var(--cinza-600);font-family:inherit; }
  #tela-cadastro-quimicos .chip-filtro.ativo, #tela-cadastro-bombas .chip-filtro.ativo{ background:var(--indigo-claro);border-color:var(--indigo);color:var(--indigo);font-weight:600; }
  #tela-cadastro-quimicos .btn, #tela-cadastro-bombas .btn{ padding:10px 18px;border-radius:9px;border:none;cursor:pointer;font-size:14px;font-weight:600;font-family:inherit;display:inline-flex;align-items:center;justify-content:center;gap:7px;transition:background .15s ease,box-shadow .15s ease,border-color .15s ease,color .15s ease; }
  #tela-cadastro-quimicos .btn-primario, #tela-cadastro-bombas .btn-primario{ background:var(--indigo);color:#fff; }
  #tela-cadastro-quimicos .btn-primario:hover, #tela-cadastro-bombas .btn-primario:hover{ background:var(--indigo-escuro); }
  #tela-cadastro-quimicos .btn-fantasma, #tela-cadastro-bombas .btn-fantasma{ background:var(--card);border:1px solid var(--cinza-200);color:var(--cinza-600); }
  #tela-cadastro-quimicos .btn-fantasma:hover, #tela-cadastro-bombas .btn-fantasma:hover{ background:var(--indigo-claro);border-color:var(--indigo);color:var(--indigo); }
  #tela-cadastro-quimicos .contador-resultados, #tela-cadastro-bombas .contador-resultados{ font-size:12.5px;color:var(--cinza-600);margin:0 0 10px 2px; }
  #tela-cadastro-quimicos .contador-resultados b, #tela-cadastro-bombas .contador-resultados b{ color:var(--indigo); }
  #tela-cadastro-quimicos .link-limpar, #tela-cadastro-bombas .link-limpar{ background:none;border:none;color:var(--indigo);font-weight:600;cursor:pointer;font-size:12.5px;font-family:inherit;margin-left:8px; }

  /* Tabela */
  #tela-cadastro-quimicos table, #tela-cadastro-bombas table{ width:100%;border-collapse:collapse; }
  #tela-cadastro-quimicos th, #tela-cadastro-bombas th{ font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--cinza-400);text-align:left;padding:12px 16px;border-bottom:1px solid var(--borda);white-space:nowrap;position:relative; }
  #tela-cadastro-quimicos th .th-conteudo, #tela-cadastro-bombas th .th-conteudo{ display:inline-flex;align-items:center;gap:5px; }
  #tela-cadastro-quimicos th .ordenavel, #tela-cadastro-bombas th .ordenavel{ cursor:pointer;user-select:none; }
  #tela-cadastro-quimicos th .ordenavel:hover, #tela-cadastro-bombas th .ordenavel:hover{ color:var(--indigo); }
  #tela-cadastro-quimicos th .seta, #tela-cadastro-bombas th .seta{ font-size:10px;color:var(--indigo); }
  #tela-cadastro-quimicos td, #tela-cadastro-bombas td{ padding:12px 16px;border-bottom:1px solid var(--cinza-100);vertical-align:middle; }
  #tela-cadastro-quimicos tr:last-child td, #tela-cadastro-bombas tr:last-child td{ border-bottom:none; }
  #tela-cadastro-quimicos tr.linha, #tela-cadastro-bombas tr.linha{ cursor:pointer; }
  #tela-cadastro-quimicos tr.linha:hover, #tela-cadastro-bombas tr.linha:hover{ background:var(--cinza-50); }
  #tela-cadastro-quimicos tr.linha.inativo td, #tela-cadastro-bombas tr.linha.inativo td{ opacity:.5; }
  #tela-cadastro-quimicos .prod .nome, #tela-cadastro-bombas .prod .nome{ font-weight:600; }
  #tela-cadastro-quimicos .prod .funcao, #tela-cadastro-bombas .prod .funcao{ font-size:12px;color:var(--cinza-600); }
  #tela-cadastro-quimicos .chip, #tela-cadastro-bombas .chip{ display:inline-block;padding:3px 10px;border-radius:99px;font-size:12px;font-weight:600;background:var(--indigo-claro);color:var(--indigo);white-space:nowrap; }
  #tela-cadastro-quimicos .chip.po{ background:var(--indigo-claro);color:var(--indigo-escuro); }
  #tela-cadastro-quimicos .chip.escama{ background:var(--indigo-claro);color:var(--indigo-escuro); }
  #tela-cadastro-bombas .chip.alta{ background:var(--indigo-claro);color:var(--indigo); }
  #tela-cadastro-bombas .chip.aux{ background:var(--indigo-claro);color:var(--indigo-escuro); }
  #tela-cadastro-bombas .chip.submersa{ background:var(--ambar-claro);color:var(--ambar); }
  #tela-cadastro-quimicos .nivel, #tela-cadastro-bombas .nivel{ font-size:11px;font-weight:700;padding:2px 9px;border-radius:99px;white-space:nowrap;text-transform:uppercase;letter-spacing:.4px; }
  #tela-cadastro-quimicos .nivel.perigo{ background:var(--vermelho-claro);color:var(--vermelho); }
  #tela-cadastro-quimicos .nivel.atencao{ background:var(--ambar-claro);color:var(--ambar); }
  #tela-cadastro-quimicos .nivel.nenhum{ background:var(--cinza-100);color:var(--cinza-400);text-transform:none; }
  #tela-cadastro-quimicos .num, #tela-cadastro-bombas .num{ font-variant-numeric:tabular-nums; }
  #tela-cadastro-quimicos .fispq-flag, #tela-cadastro-bombas .fispq-flag{ font-size:12px;font-weight:600;color:var(--indigo);display:inline-flex;align-items:center;gap:5px; }
  #tela-cadastro-quimicos .fispq-flag.sem, #tela-cadastro-bombas .fispq-flag.sem{ color:var(--cinza-400);font-weight:400; }
  #tela-cadastro-quimicos .acoes-linha, #tela-cadastro-bombas .acoes-linha{ display:flex;gap:6px;justify-content:flex-end; }
  #tela-cadastro-quimicos .btn-icone, #tela-cadastro-bombas .btn-icone{ width:34px;height:34px;border-radius:9px;border:1px solid var(--borda);background:var(--card);cursor:pointer;color:var(--cinza-600);transition:background .15s ease,border-color .15s ease,color .15s ease;display:inline-flex;align-items:center;justify-content:center; }
  #tela-cadastro-quimicos .btn-icone:hover, #tela-cadastro-bombas .btn-icone:hover{ background:var(--indigo-claro);border-color:var(--indigo);color:var(--indigo); }

  /* Filtro de coluna */
  #tela-cadastro-quimicos .funil, #tela-cadastro-bombas .funil{ width:22px;height:22px;border:none;background:none;cursor:pointer;color:var(--cinza-400);border-radius:6px;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle; }
  #tela-cadastro-quimicos .funil:hover, #tela-cadastro-bombas .funil:hover{ color:var(--indigo);background:var(--indigo-claro); }
  #tela-cadastro-quimicos .funil.ativo, #tela-cadastro-bombas .funil.ativo{ color:#fff;background:var(--indigo); }
  #tela-cadastro-quimicos .dropdown-filtro, #tela-cadastro-bombas .dropdown-filtro{ position:absolute;top:calc(100% - 4px);left:8px;z-index:30;background:var(--card);border:1px solid var(--indigo-borda);border-radius:10px;box-shadow:0 8px 24px rgba(16,24,40,.16);min-width:210px;padding:10px;text-transform:none;letter-spacing:0; }
  #tela-cadastro-quimicos .dropdown-filtro label, #tela-cadastro-bombas .dropdown-filtro label{ display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:7px;font-size:13px;font-weight:400;color:var(--cinza-900);cursor:pointer; }
  #tela-cadastro-quimicos .dropdown-filtro label:hover, #tela-cadastro-bombas .dropdown-filtro label:hover{ background:var(--indigo-claro); }
  #tela-cadastro-quimicos .dropdown-filtro .rodape-dd, #tela-cadastro-bombas .dropdown-filtro .rodape-dd{ display:flex;justify-content:space-between;border-top:1px solid var(--cinza-100);margin-top:8px;padding-top:8px; }
  #tela-cadastro-quimicos .dropdown-filtro .rodape-dd button, #tela-cadastro-bombas .dropdown-filtro .rodape-dd button{ background:none;border:none;color:var(--indigo);font-weight:600;font-size:12.5px;cursor:pointer;font-family:inherit;padding:4px 6px; }

  /* Interruptor */
  #tela-cadastro-quimicos .interruptor, #tela-cadastro-bombas .interruptor{ position:relative;width:40px;height:22px;display:inline-block;cursor:pointer; }
  #tela-cadastro-quimicos .interruptor input, #tela-cadastro-bombas .interruptor input{ opacity:0;width:0;height:0; }
  #tela-cadastro-quimicos .trilho, #tela-cadastro-bombas .trilho{ position:absolute;inset:0;background:var(--cinza-200);border-radius:99px;transition:.2s; }
  #tela-cadastro-quimicos .trilho::before, #tela-cadastro-bombas .trilho::before{ content:"";position:absolute;width:16px;height:16px;border-radius:50%;background:var(--card);top:3px;left:3px;transition:.2s;box-shadow:0 1px 2px rgba(0,0,0,.2); }
  #tela-cadastro-quimicos .interruptor input:checked + .trilho, #tela-cadastro-bombas .interruptor input:checked + .trilho{ background:var(--verde); }
  #tela-cadastro-quimicos .interruptor input:checked + .trilho::before, #tela-cadastro-bombas .interruptor input:checked + .trilho::before{ left:21px; }

  /* Editor */
  #tela-cadastro-quimicos .barra-editor, #tela-cadastro-bombas .barra-editor{ position:sticky;top:0;z-index:25;background:var(--card);border:1px solid var(--borda);border-radius:var(--raio);box-shadow:var(--sombra);padding:12px 18px;display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap; }
  #tela-cadastro-quimicos .barra-editor .voltar, #tela-cadastro-bombas .barra-editor .voltar{ background:none;border:none;color:var(--cinza-600);font-weight:600;cursor:pointer;font-size:14px;padding:6px 8px;font-family:inherit;border-radius:8px;display:inline-flex;align-items:center;gap:6px; }
  #tela-cadastro-quimicos .barra-editor .voltar:hover, #tela-cadastro-bombas .barra-editor .voltar:hover{ background:var(--indigo-claro);color:var(--indigo); }
  #tela-cadastro-quimicos .titulo-editor, #tela-cadastro-bombas .titulo-editor{ display:flex;align-items:center;gap:10px;min-width:0;flex:1; }
  #tela-cadastro-quimicos .titulo-editor .nome, #tela-cadastro-bombas .titulo-editor .nome{ font-size:17px;font-weight:700;color:var(--grafite);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
  #tela-cadastro-quimicos .titulo-editor .tag-novo, #tela-cadastro-bombas .titulo-editor .tag-novo{ font-size:10px;font-weight:700;color:var(--verde);background:var(--verde-claro);border-radius:99px;padding:2px 9px;letter-spacing:.5px; }
  #tela-cadastro-quimicos .titulo-editor .tag-copia, #tela-cadastro-bombas .titulo-editor .tag-copia{ font-size:10px;font-weight:700;color:var(--indigo-escuro);background:var(--indigo-claro);border-radius:99px;padding:2px 9px;letter-spacing:.5px; }
  #tela-cadastro-quimicos .acoes-editor, #tela-cadastro-bombas .acoes-editor{ display:flex;gap:8px;align-items:center; }
  #tela-cadastro-quimicos .nota-perm, #tela-cadastro-bombas .nota-perm{ font-size:11.5px;color:var(--cinza-400);margin-right:4px; }
  #tela-cadastro-quimicos .editor-grid, #tela-cadastro-bombas .editor-grid{ display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start; }
  @media (max-width:980px){ #tela-cadastro-quimicos .editor-grid, #tela-cadastro-bombas .editor-grid{ grid-template-columns:1fr; } }
  #tela-cadastro-quimicos .secao, #tela-cadastro-bombas .secao{ padding:20px 24px;margin-bottom:16px; }
  #tela-cadastro-quimicos .grade-campos, #tela-cadastro-bombas .grade-campos{ display:grid;grid-template-columns:repeat(2,1fr);gap:12px 14px; }
  #tela-cadastro-quimicos .grade-campos .campo-largo, #tela-cadastro-bombas .grade-campos .campo-largo{ grid-column:1/-1; }
  #tela-cadastro-quimicos .campo, #tela-cadastro-bombas .campo{ margin-bottom:0; }
  #tela-cadastro-quimicos .campo label, #tela-cadastro-bombas .campo label{ display:block;font-size:12px;font-weight:600;color:var(--cinza-600);margin-bottom:5px; }
  #tela-cadastro-quimicos .campo label .un, #tela-cadastro-bombas .campo label .un{ font-weight:400;color:var(--cinza-400); }
  #tela-cadastro-quimicos .campo input[type=text], #tela-cadastro-quimicos .campo input[type=number], #tela-cadastro-quimicos .campo input[type=url], #tela-cadastro-quimicos .campo select, #tela-cadastro-quimicos .campo textarea,
  #tela-cadastro-bombas .campo input[type=text], #tela-cadastro-bombas .campo input[type=number], #tela-cadastro-bombas .campo input[type=url], #tela-cadastro-bombas .campo select, #tela-cadastro-bombas .campo textarea{ width:100%;padding:10px 12px;border:1px solid var(--indigo-borda);border-radius:9px;font-size:14px;font-family:inherit;background:var(--card);color:var(--cinza-900);transition:border-color .15s ease,box-shadow .15s ease; }
  #tela-cadastro-quimicos .campo textarea, #tela-cadastro-bombas .campo textarea{ resize:vertical;min-height:60px; }
  #tela-cadastro-quimicos .campo input:focus, #tela-cadastro-quimicos .campo select:focus, #tela-cadastro-quimicos .campo textarea:focus,
  #tela-cadastro-bombas .campo input:focus, #tela-cadastro-bombas .campo select:focus, #tela-cadastro-bombas .campo textarea:focus{ border-color:var(--indigo);box-shadow:0 0 0 3px rgba(59,104,250,.15); }
  #tela-cadastro-quimicos .campo .obrigatorio, #tela-cadastro-bombas .campo .obrigatorio{ color:var(--vermelho); }
  #tela-cadastro-quimicos .campo.erro input, #tela-cadastro-quimicos .campo.erro select, #tela-cadastro-bombas .campo.erro input, #tela-cadastro-bombas .campo.erro select{ border-color:var(--vermelho);background:var(--vermelho-claro); }
  #tela-cadastro-quimicos .campo .msg-erro, #tela-cadastro-bombas .campo .msg-erro{ display:none;font-size:11.5px;color:var(--vermelho);margin-top:4px; }
  #tela-cadastro-quimicos .campo.erro .msg-erro, #tela-cadastro-bombas .campo.erro .msg-erro{ display:block; }
  #tela-cadastro-quimicos .dica-campo, #tela-cadastro-bombas .dica-campo{ font-size:11.5px;color:var(--cinza-400);margin-top:4px; }
  #tela-cadastro-quimicos .linha-inline, #tela-cadastro-bombas .linha-inline{ display:flex;align-items:center;gap:10px;font-size:13px; }
  #tela-cadastro-quimicos .aviso-snapshot, #tela-cadastro-bombas .aviso-snapshot{ background:var(--indigo-claro);border:1px solid var(--indigo-borda);border-radius:8px;padding:10px 14px;font-size:12.5px;color:var(--indigo-escuro);margin-top:12px;line-height:1.45;display:flex;gap:8px;align-items:flex-start; }
  #tela-cadastro-quimicos .aviso-inativar, #tela-cadastro-bombas .aviso-inativar{ background:var(--ambar-claro);border:1px solid var(--ambar);border-radius:8px;padding:10px 14px;font-size:12.5px;color:var(--ambar);margin-top:12px;line-height:1.45; }

  /* FISPQ / links */
  #tela-cadastro-quimicos .link-fispq{ display:grid;grid-template-columns:1fr 2fr 110px 34px;gap:8px;margin-bottom:8px;align-items:center; }
  #tela-cadastro-quimicos .link-fispq input{ padding:8px 10px;border:1px solid var(--cinza-200);border-radius:8px;font-size:13px;font-family:inherit;width:100%; }
  #tela-cadastro-quimicos .link-fispq .remover, #tela-cadastro-bombas .ponto-curva .remover{ width:34px;height:34px;border-radius:8px;border:1px solid var(--borda);background:var(--card);cursor:pointer;color:var(--cinza-400); }
  #tela-cadastro-quimicos .link-fispq .remover:hover, #tela-cadastro-bombas .ponto-curva .remover:hover{ color:var(--vermelho);border-color:var(--vermelho); }
  #tela-cadastro-quimicos .add-link, #tela-cadastro-bombas .add-link{ background:none;border:1px dashed var(--indigo-borda);border-radius:8px;color:var(--indigo);font-weight:600;font-size:13px;padding:9px;width:100%;cursor:pointer;font-family:inherit; }
  #tela-cadastro-quimicos .add-link:hover, #tela-cadastro-bombas .add-link:hover{ background:var(--indigo-claro); }

  /* Tags */
  #tela-cadastro-quimicos .tags{ display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px; }
  #tela-cadastro-quimicos .tag{ display:inline-flex;align-items:center;gap:6px;background:var(--cinza-100);border-radius:99px;padding:4px 6px 4px 12px;font-size:12.5px; }
  #tela-cadastro-quimicos .tag.vermelha{ background:var(--vermelho-claro);color:var(--vermelho); }
  #tela-cadastro-quimicos .tag.azul{ background:var(--indigo-claro);color:var(--indigo-escuro); }
  #tela-cadastro-quimicos .tag button{ border:none;background:none;cursor:pointer;color:inherit;opacity:.55;font-size:13px;line-height:1;padding:2px; }
  #tela-cadastro-quimicos .tag button:hover{ opacity:1; }
  #tela-cadastro-quimicos .add-tag{ display:flex;gap:8px; }
  #tela-cadastro-quimicos .add-tag input{ flex:1;padding:8px 10px;border:1px solid var(--cinza-200);border-radius:8px;font-size:13px;font-family:inherit; }

  /* Curva (bombas) */
  #tela-cadastro-bombas .ponto-curva{ display:grid;grid-template-columns:28px 1fr 34px 1fr 44px 34px;gap:8px;margin-bottom:8px;align-items:center; }
  #tela-cadastro-bombas .ponto-curva .idx{ font-size:12px;font-weight:700;color:var(--cinza-400);text-align:center; }
  #tela-cadastro-bombas .ponto-curva input{ padding:8px 10px;border:1px solid var(--cinza-200);border-radius:8px;font-size:13px;font-family:inherit;width:100%; }
  #tela-cadastro-bombas .ponto-curva .un{ font-size:11.5px;color:var(--cinza-400); }
  #tela-cadastro-bombas .linha-tensao{ display:grid;grid-template-columns:84px 24px 92px 78px 24px 1fr 34px;gap:8px;margin-bottom:8px;align-items:center; }
  #tela-cadastro-bombas .linha-tensao input, #tela-cadastro-bombas .linha-tensao select{ padding:8px 10px;border:1px solid var(--cinza-200);border-radius:8px;font-size:13px;font-family:inherit;width:100%; }
  #tela-cadastro-bombas .linha-tensao .un{ font-size:11.5px;color:var(--cinza-400); }
  #tela-cadastro-bombas .linha-tensao .remover{ width:34px;height:34px;border-radius:8px;border:1px solid var(--borda);background:var(--card);cursor:pointer;color:var(--cinza-400); }
  #tela-cadastro-bombas .linha-tensao .remover:hover{ color:var(--vermelho);border-color:var(--vermelho); }
  #tela-cadastro-bombas .curva-preview-box{ background:var(--cinza-50);border:1px solid var(--cinza-200);border-radius:8px;margin-top:12px;padding:8px; }
  #tela-cadastro-bombas .curva-preview-box svg{ width:100%;height:auto;display:block; }

  /* Toast */
  #tela-cadastro-quimicos .toast, #tela-cadastro-bombas .toast{ position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--grafite);color:#fff;padding:12px 22px;border-radius:99px;font-size:13.5px;box-shadow:0 6px 20px rgba(0,0,0,.25);transition:.25s;opacity:0;pointer-events:none;z-index:50;display:flex;gap:14px;align-items:center; }
  #tela-cadastro-quimicos .toast.mostrar, #tela-cadastro-bombas .toast.mostrar{ transform:translateX(-50%) translateY(0);opacity:1;pointer-events:auto; }
  #tela-cadastro-quimicos .toast button, #tela-cadastro-bombas .toast button{ background:none;border:none;color:#8db0ff;font-weight:700;cursor:pointer;font-size:13.5px;font-family:inherit; }
  #tela-cadastro-quimicos .rodape, #tela-cadastro-bombas .rodape{ margin-top:36px;text-align:center;font-size:12px;color:var(--cinza-400); }
/* ---- ex-<style> do index.html, linhas 1928–1996 (v1.427.0) ---- */
  /* Paleta + escopo próprios; nada colide com AcquaDose/RoPump/Cadastros. */
  #tela-acquaflow{--azul-vivo:#3B68FA;--azul-marinho:#203888;--azul-claro:#C0D0E1;--bg-gelo:var(--indigo-claro);--verde:#1F9D57;--vermelho:#C0392B;--ambar:#B7791F;color:var(--grafite);max-width:1040px;}
  #tela-acquaflow *{box-sizing:border-box;}
  #tela-acquaflow .card-sec{border:1px solid var(--borda);border-radius:12px;padding:16px;margin-bottom:14px;background:var(--card);}
  #tela-acquaflow .sec-title{color:var(--azul-vivo);font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;margin-bottom:12px;border-bottom:2px solid var(--azul-claro);padding-bottom:7px;}
  #tela-acquaflow .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;}
  #tela-acquaflow label{display:block;font-size:11.5px;font-weight:600;color:var(--azul-marinho);text-transform:uppercase;letter-spacing:.4px;margin-bottom:5px;}
  #tela-acquaflow input,#tela-acquaflow select{width:100%;padding:9px 10px;border:1px solid var(--azul-claro);border-radius:9px;font-size:14px;font-family:inherit;background:var(--card);color:var(--grafite);}
  #tela-acquaflow input:disabled{background:var(--indigo-claro);color:var(--cinza-400);}
  #tela-acquaflow .hint{font-size:11px;color:var(--cinza-400);margin-top:4px;}
  #tela-acquaflow .results-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:14px;}
  #tela-acquaflow .rc{background:var(--bg-gelo);border-radius:10px;padding:12px;border-left:4px solid var(--azul-vivo);}
  #tela-acquaflow .rc .l{font-size:10.5px;color:var(--cinza-600);text-transform:uppercase;font-weight:600;letter-spacing:.4px;}
  #tela-acquaflow .rc .v{font-size:22px;font-weight:700;color:var(--azul-marinho);} #tela-acquaflow .rc .s{font-size:11px;color:var(--cinza-600);}
  #tela-acquaflow .rc.hl{border-left-color:var(--verde);} #tela-acquaflow .rc.hl .v{color:var(--verde);}
  #tela-acquaflow .info-block{background:var(--bg-gelo);padding:14px;border-radius:8px;margin-top:12px;font-size:13px;color:var(--cinza-600);border-left:4px solid var(--azul-vivo);}
  #tela-acquaflow .info-block .row{display:flex;justify-content:space-between;gap:16px;padding:4px 0;border-bottom:1px solid var(--borda);} #tela-acquaflow .info-block .row:last-child{border-bottom:none;}
  #tela-acquaflow .info-block strong{color:var(--azul-marinho);}
  #tela-acquaflow .fit-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(245px,1fr));gap:8px;}
  #tela-acquaflow .fit{display:flex;align-items:center;gap:9px;font-size:12.5px;background:var(--card);border:1px solid var(--borda);border-radius:8px;padding:5px 8px;}
  #tela-acquaflow .fit .ic{width:42px;height:28px;flex:0 0 42px;}
  #tela-acquaflow .fit input{width:58px;} #tela-acquaflow .fit span{flex:1;color:var(--cinza-600);}
  #tela-acquaflow .io-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
  #tela-acquaflow .io-box{display:flex;align-items:center;gap:12px;}
  #tela-acquaflow .io-box .prev{width:84px;height:54px;flex:0 0 84px;border:1px solid var(--borda);border-radius:8px;background:var(--card);padding:5px;}
  #tela-acquaflow .io-box .sel{flex:1;}
  #tela-acquaflow .chk{display:flex;align-items:center;gap:8px;margin:10px 0 6px;font-size:13px;color:var(--azul-marinho);font-weight:600;}
  #tela-acquaflow .chk input{width:auto;}
  #tela-acquaflow .equip-head{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
  #tela-acquaflow .equip-head .ic{width:48px;height:32px;flex:0 0 48px;}
  #tela-acquaflow .equip-body{border-left:3px solid var(--azul-claro);padding-left:12px;margin-bottom:6px;}
  #tela-acquaflow .equip-res{font-size:12.5px;color:var(--cinza-600);background:var(--bg-gelo);border-radius:8px;padding:8px 10px;margin-top:8px;}
  #tela-acquaflow .actions{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0;}
  #tela-acquaflow .btn{flex:1 1 0;min-width:150px;padding:12px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;border:2px solid var(--azul-vivo);}
  #tela-acquaflow .btn.primary{background:var(--azul-vivo);color:#fff;} #tela-acquaflow .btn.sec{background:var(--card);color:var(--azul-vivo);}
  #tela-acquaflow .disc{font-size:11px;color:var(--cinza-400);margin-top:8px;} #tela-acquaflow .erro{color:var(--vermelho);font-weight:600;}
  #tela-acquaflow .modebar{display:flex;gap:8px;margin-bottom:16px;}
  #tela-acquaflow .modebar button{flex:1;padding:13px;border-radius:10px;border:2px solid var(--azul-claro);background:var(--card);color:var(--azul-marinho);font-weight:700;font-size:14px;cursor:pointer;font-family:inherit;}
  #tela-acquaflow .modebar button.active{background:var(--azul-vivo);color:#fff;border-color:var(--azul-vivo);}
  #tela-acquaflow .only-vel{display:none;}
  #tela-acquaflow .banner{padding:14px;border-radius:10px;font-weight:700;font-size:15px;margin-top:6px;}
  #tela-acquaflow .banner.verde{background:var(--verde-claro);color:var(--verde);border:1px solid #9ED9B8;}
  #tela-acquaflow .banner.ambar{background:var(--ambar-claro);color:var(--ambar);border:1px solid var(--ambar);}
  #tela-acquaflow .banner.vermelho{background:var(--vermelho-claro);color:var(--vermelho);border:1px solid var(--vermelho);}
  #tela-acquaflow .banner span{font-weight:400;font-size:12.5px;color:var(--cinza-600);display:block;margin-top:4px;}
  #tela-acquaflow .pv-sel{background:var(--bg-gelo);border-radius:10px;padding:12px;text-align:center;border-left:4px solid var(--azul-vivo);margin-bottom:10px;}
  #tela-acquaflow .pv-sel-t{font-size:11px;text-transform:uppercase;color:var(--cinza-600);font-weight:600;letter-spacing:.4px;}
  #tela-acquaflow .pv-sel-v{font-size:20px;font-weight:700;color:var(--azul-marinho);margin:4px 0;}
  #tela-acquaflow .pv-empty{color:var(--cinza-400);font-size:13px;}
  #tela-acquaflow .pv-badges{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:4px;}
  #tela-acquaflow .badge{font-size:12px;font-weight:700;padding:4px 10px;border-radius:20px;}
  #tela-acquaflow .badge.ok{background:var(--verde-claro);color:var(--verde);border:1px solid #9ED9B8;}
  #tela-acquaflow .badge.no{background:var(--vermelho-claro);color:var(--vermelho);border:1px solid var(--vermelho);}
  #tela-acquaflow .pump-fig{display:flex;justify-content:center;margin:8px 0;}
  #tela-acquaflow .pump-fig svg{max-width:360px;width:100%;height:auto;}
  #tela-acquaflow .pv-sug{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
  #tela-acquaflow .pv-box{border-radius:10px;padding:12px;text-align:center;background:var(--indigo-claro);border:1px solid var(--azul-claro);}
  #tela-acquaflow .pv-box-t{font-size:11px;text-transform:uppercase;color:var(--cinza-600);font-weight:600;letter-spacing:.4px;}
  #tela-acquaflow .pv-box-v{font-size:18px;font-weight:700;color:var(--azul-marinho);margin:3px 0;}
  #tela-acquaflow .pv-box-s{font-size:12px;color:var(--cinza-600);}
  #tela-acquaflow .badge.low{background:var(--ambar-claro);color:var(--ambar);border:1px solid var(--ambar);}
  #tela-acquaflow .pv-box.suc{background:#E8F1FB;border:1px solid #B5D4F4;border-left:4px solid #185FA5;}
  #tela-acquaflow .pv-box.rec{background:#EAF7F0;border:1px solid #9ED9B8;border-left:4px solid var(--verde);}
  #tela-acquaflow .vq{border:1px solid var(--borda);border-radius:10px;padding:14px;margin-bottom:12px;}
  #tela-acquaflow .vq-h{font-size:12px;font-weight:700;color:var(--azul-marinho);text-transform:uppercase;letter-spacing:.4px;margin-bottom:10px}
  #tela-acquaflow .vq-v{font-size:20px;font-weight:700;color:var(--azul-marinho);text-align:center;margin:2px 0}
  #tela-acquaflow .aviso{background:var(--ambar-claro);border:1px solid var(--ambar);color:var(--ambar);padding:10px 14px;border-radius:8px;font-size:12.5px;margin-top:8px;}
/* ---- ex-<style> do index.html, linhas 2009–2013 (v1.427.0) ---- */
      #tela-acquaflow .modo-btn{flex:1;padding:9px;border:1px solid var(--azul-claro);background:var(--card);color:var(--cinza-600);border-radius:9px;cursor:pointer;font-weight:600;font-size:13px;font-family:inherit;transition:all .15s ease}
      #tela-acquaflow .modo-btn:hover{border-color:var(--azul-vivo);color:var(--azul-vivo)}
      #tela-acquaflow .modo-btn.ativo{background:rgba(59,104,250,.08);border-color:var(--azul-vivo);color:var(--azul-marinho);box-shadow:0 0 0 3px rgba(59,104,250,.15)}