:root{
  --navy-1:#0a1a33; --navy-2:#112542; --navy-3:#16335c; --ink:#0D2B52;
  /* --navy: fundo dos campos de formulário. Precisa ser mais escuro que o
     card (--navy-2) que os contém. */
  --navy:#0a1a33;
  --wine:#8B1A2B; --ice:#9DB8D8; --ice-soft:#BFD0E6; --white:#ffffff;
  --paper:#f3f6fb; --ok:#2ec5a8; --bad:#ff6b6b; --line:#21406e;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%}
body{font-family:"Calibri","Segoe UI",system-ui,-apple-system,sans-serif;
  color:var(--paper);min-height:100vh;font-size:16px;line-height:1.45;
  background:linear-gradient(125deg,var(--navy-1) 0%,var(--navy-2) 42%,
    var(--navy-3) 62%,var(--navy-2) 78%,var(--navy-1) 100%);
  background-attachment:fixed}
a{color:inherit;text-decoration:none}

/* ---------- cabeçalho ---------- */
.topbar{position:sticky;top:0;z-index:20;background:var(--paper);
  padding:12px 18px;display:flex;align-items:center;justify-content:space-between;
  box-shadow:0 6px 22px rgba(0,0,0,.28)}
.topbar img{height:38px;display:block}
.topbar .right{display:flex;align-items:center;gap:14px}
.topbar a.logout{font-size:12px;color:var(--wine);font-weight:700;
  border:1px solid rgba(139,26,43,.35);padding:5px 11px;border-radius:6px}
.topbar .whoami{font-size:12px;color:var(--ink);font-weight:700;
  padding:5px 11px;border-radius:6px;background:rgba(13,43,82,.06)}
.topbar .whoami .role{color:var(--wine);font-weight:700;font-size:10px;
  text-transform:uppercase;letter-spacing:.5px;display:block}
.topbar .nav{display:flex;align-items:center;gap:10px}
.topbar .nav a{font-size:12px;color:var(--ink);font-weight:700;padding:5px 10px;
  border-radius:6px;border:1px solid transparent}
.topbar .nav a:hover{border-color:rgba(13,43,82,.18)}
.topbar .nav a.on{background:rgba(13,43,82,.08)}
/* controles do menu mobile: invisíveis no desktop, ativados só no mobile.css */
.nav-toggle{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.burger,.nav-overlay,.logout-in-menu{display:none}

/* ---------- estrutura de página ---------- */
.wrap{max-width:720px;margin:0 auto;padding:22px 18px 60px}
.hero{margin-bottom:22px}
.hero .kicker{font-size:11px;font-weight:700;letter-spacing:1.5px;color:var(--white);
  text-transform:uppercase;opacity:.92}
.hero h1{font-size:27px;font-weight:700;letter-spacing:1px;margin:6px 0 0;
  color:var(--white);text-transform:uppercase}
.hero .desc{font-size:13px;color:var(--ice-soft);margin-top:8px}
.crumb{font-size:12px;color:var(--ice);margin-bottom:14px;letter-spacing:.3px}
.crumb a{color:var(--white);font-weight:700}
footer{margin-top:26px;text-align:center;font-size:11px;color:var(--ice);opacity:.75}
/* footer único (ver templates/base.html) */
.rs-footer{text-align:center;font-size:11px;color:var(--ice);opacity:.7;padding:24px 0}

/* ---------- card de lista (obras, clientes) ---------- */
.card{position:relative;display:block;background:var(--navy-2);border-radius:10px;
  padding:16px 18px;margin-bottom:12px;overflow:hidden;
  box-shadow:0 12px 34px rgba(0,0,0,.32);border:1px solid rgba(255,255,255,.03)}
.card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--wine)}
.card:active{transform:translateY(1px)}
/* `display:block` acima é regra de AUTOR e venceria o `display:none` que o
   navegador aplica a [hidden]; sem esta linha o filtro de busca marca o card
   e ele continua na tela. Ver a nota em ".busca-box". */
.card[hidden]{display:none}
.card .row{display:flex;align-items:center;gap:12px}
.card .name{font-weight:700;font-size:17px;color:var(--white);flex:1}
.card .meta{font-size:12px;color:var(--ice);margin-top:6px}
.chev{color:var(--ice);font-size:20px;opacity:.7}
/* bolinha de status: o tamanho e a cor vêm de quem usa (a legenda do mapa
   redefine os dois). Aqui fica só a forma. */
.dot{width:9px;height:9px;border-radius:50%;flex:none;background:rgba(255,255,255,.22)}

/* ---------- bloco de sistema (página da obra) ----------
   Cabeçalho com o nome do sistema + contagem de evaporadoras, e o corpo
   listando cada evaporadora. Ver .sys-head, definida no template. */
.sysblock{position:relative;background:var(--navy-2);border-radius:10px;margin-bottom:12px;
  overflow:hidden;box-shadow:0 12px 34px rgba(0,0,0,.30);border:1px solid rgba(255,255,255,.03)}
.sysblock::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--wine)}
.sysblock > .head{display:flex;align-items:center;gap:10px;padding:13px 18px;
  background:rgba(255,255,255,.03);border-bottom:1px solid var(--line);
  font-weight:700;color:var(--white);letter-spacing:.5px}
.sysblock .head .count{margin-left:auto;font-size:12px;color:var(--ice);font-weight:700}

/* ---------- grade de módulos (home) ---------- */
.apps-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:14px;margin-top:6px}
.app-card{position:relative;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;background:var(--navy-2);border-radius:12px;
  padding:30px 18px;overflow:hidden;box-shadow:0 12px 34px rgba(0,0,0,.32);
  border:1px solid rgba(255,255,255,.04);transition:transform .08s,filter .15s;min-height:150px}
.app-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--wine)}
.app-card:hover{filter:brightness(1.08)}
.app-card:active{transform:translateY(1px)}
.app-card .t{font-weight:700;font-size:19px;color:var(--white);letter-spacing:.4px}
.app-card .d{font-size:12px;color:var(--ice);margin-top:6px;line-height:1.45}

/* ---------- botões ---------- */
/* `.btn` é a base da família: sozinha ela não é usada hoje, mas as
   variantes abaixo herdam dela a geometria e a regra de toque do
   mobile.css já a cobre. */
.btn{display:inline-block;padding:8px 13px;border-radius:7px;font-size:13px;font-weight:700;
  cursor:pointer;letter-spacing:.3px;transition:filter .15s,transform .05s}
.btn:active{transform:translateY(1px)}
.btn-ghost{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:8px;
  font-size:13px;font-weight:700;cursor:pointer;color:var(--white);
  background:rgba(255,255,255,.06);border:1px solid var(--line);transition:border-color .15s}
.btn-ghost:hover{border-color:var(--ice)}
.btn-wine{display:inline-flex;align-items:center;gap:6px;padding:10px 16px;border-radius:8px;
  font-size:13px;font-weight:700;cursor:pointer;color:#fff;background:var(--wine);
  border:1px solid var(--wine);transition:filter .15s}
.btn-wine:hover{filter:brightness(1.12)}
.btn-sm{padding:6px 11px;font-size:12px}
.btn-row{display:flex;gap:8px;flex-wrap:wrap}
.btn-primary{width:100%;margin-top:22px;padding:14px;background:var(--wine);color:#fff;
  border:none;border-radius:9px;font-size:15px;font-weight:700;cursor:pointer;
  text-transform:uppercase;letter-spacing:.8px;transition:filter .15s}
.btn-primary:hover{filter:brightness(1.12)}
.btn-del{background:rgba(255,107,107,.1);color:var(--bad);border:1px solid rgba(255,107,107,.35);
  border-radius:7px;padding:8px 12px;font-size:13px;font-weight:700;cursor:pointer;
  letter-spacing:.3px;transition:filter .15s,transform .05s}
.btn-del:hover{filter:brightness(1.15);background:rgba(255,107,107,.18)}
.btn-del:active{transform:translateY(1px)}

/* ---------- login ---------- */
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16px}
.login .box{position:relative;background:var(--navy-2);border-radius:12px;padding:30px 26px;
  width:100%;max-width:380px;overflow:hidden;box-shadow:0 22px 60px rgba(0,0,0,.5)}
.login .box::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--wine)}
.login .logohead{display:flex;justify-content:center;margin-bottom:18px}
.login .logohead img{height:44px;background:var(--paper);padding:9px 14px;border-radius:8px}
.login .kicker{font-size:11px;font-weight:700;letter-spacing:1.4px;color:var(--ice);
  text-transform:uppercase;text-align:center}
.login h2{color:var(--white);text-align:center;font-size:20px;margin:6px 0 2px;font-weight:700}
.login p.tag{color:var(--ice-soft);font-size:12px;margin:0 0 20px;text-align:center}
.err{background:rgba(255,107,107,.14);color:var(--bad);padding:10px;border-radius:8px;
  font-size:13px;margin-top:14px;text-align:center}

/* ---------- formulários ---------- */
label{display:block;font-size:12px;font-weight:700;margin:14px 0 6px;color:var(--ice);
  text-transform:uppercase;letter-spacing:.6px}
.field-lbl{font-size:11px;font-weight:700;color:var(--ice);text-transform:uppercase;
  letter-spacing:.6px;margin:0 0 5px;display:block}
input[type=text],input[type=password],input[type=date],input[type=number],input[type=email]{width:100%;padding:12px;
  border:1px solid var(--line);border-radius:9px;font-size:16px;
  background:rgba(255,255,255,.04);color:var(--white)}
input::placeholder{color:#6d86ad}
input:focus{outline:none;border-color:var(--ice)}
/* Autofill do navegador (ex.: senha salva) pinta o campo de branco/amarelo,
   quebrando o tema escuro. O box-shadow interno é o único jeito de sobrescrever
   o fundo do autofill no WebKit; -webkit-text-fill-color trava a cor do texto.
   Usa --navy (fundo de campo do formulário). */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active{
  -webkit-box-shadow:0 0 0 1000px var(--navy) inset !important;
  box-shadow:0 0 0 1000px var(--navy) inset !important;
  -webkit-text-fill-color:var(--white) !important;
  caret-color:var(--white);
  transition:background-color 9999s ease-in-out 0s}
textarea{width:100%;border:1px solid var(--line);border-radius:9px;padding:11px;
  font-size:15px;font-family:inherit;min-height:72px;background:rgba(255,255,255,.04);color:var(--white)}
textarea:focus{outline:none;border-color:var(--ice)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
@media(max-width:560px){.grid2,.grid3{grid-template-columns:1fr}}

/* ---------- Selects: cores do dropdown ----------
   As <option> de um <select> nativo herdam as cores do SISTEMA
   OPERACIONAL, não do CSS do container. Por isso o dropdown abria
   branco sobre o tema escuro. Definir a cor na própria <option>
   resolve no Windows/Linux (Chrome, Edge, Firefox). No macOS/iOS o
   dropdown é desenhado pelo sistema e ignora CSS — lá o visual nativo
   é o esperado mesmo. */
select{width:100%;padding:12px;border:1px solid var(--line);border-radius:9px;font-size:15px;
  background:var(--navy-1);color:var(--white);
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239db8d8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 10px center;
  background-size:16px;
  padding-right:34px}
select:focus{outline:none;border-color:var(--ice)}
select option{
  background-color:#132b47;
  color:#eef4fb;
}
select option:checked{background-color:#8b1a2b;color:#fff}

/* ---------- blocos de conteúdo ---------- */
.panel{background:var(--navy-2);border-radius:12px;padding:20px;margin-bottom:16px;
  box-shadow:0 12px 34px rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.03);position:relative}
.panel::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--wine);
  border-radius:12px 0 0 12px}
.panel h3{color:var(--white);font-size:14px;text-transform:uppercase;letter-spacing:.8px;
  margin:0 0 14px;font-weight:700}
.section-t{font-weight:700;margin:22px 0 10px;font-size:12px;color:var(--ice);
  text-transform:uppercase;letter-spacing:1px}
.hint{background:rgba(157,184,216,.1);border:1px solid var(--line);color:var(--ice-soft);
  font-size:13px;padding:11px 13px;border-radius:9px;margin-bottom:16px}
.hint b{color:var(--white)}
.empty-box{color:var(--ice);text-align:center;padding:36px 0;opacity:.8}

/* ---------- Campo de busca em lista ----------
   Filtra uma lista já carregada, no navegador, enquanto se digita. Usado na
   tela de usuários e no agrupador de obras do painel. Nasceu no <style> do
   usuarios.html e subiu para cá quando a segunda tela passou a usá-lo: duas
   cópias divergiriam.

   Quem usa monta um `data-busca` no SERVIDOR (filtro `sem_acento`) em cada
   item da lista; o JS só compara strings já normalizadas.

   ARMADILHA: o filtro esconde o item pelo atributo `hidden`. Se o item tiver
   `display` declarado no CSS (flex, grid, inline-flex...), essa regra de
   AUTOR vence o `display:none` que o navegador aplica a [hidden] — e o item
   não some. Quando for esse o caso, declare também
   `.seu-item[hidden]{display:none}`. */
.busca-box{flex:1;min-width:240px;position:relative;display:flex;align-items:center}
.busca-box .ic{position:absolute;left:12px;color:#6f8bb0;pointer-events:none}
.busca-box input{width:100%;box-sizing:border-box;height:40px;padding:0 12px 0 36px;
  background:var(--navy-2);border:1px solid var(--line);border-radius:9px;
  color:var(--white);font-size:13.5px;font-family:inherit}
.busca-box input:focus{outline:none;border-color:var(--ice)}
.busca-conta{font-size:11.5px;color:#6f8bb0;white-space:nowrap}
.busca-vazio{color:var(--ice);text-align:center;padding:26px 0;opacity:.8;display:none}

/* Barra de trabalho de uma lista: busca à esquerda, ação principal à direita,
   separadas por um traço fino. O traço não é enfeite — marca a fronteira
   entre ENCONTRAR (esquerda) e CRIAR (direita), que são naturezas
   diferentes de ação convivendo na mesma linha. */
.lista-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.barra-sep{width:1px;height:24px;background:var(--line);flex:none;margin:0 4px}
.btn-acao{height:40px;padding:0 16px;border-radius:9px;cursor:pointer;font-family:inherit;
  font-size:12.5px;font-weight:700;white-space:nowrap;box-sizing:border-box;
  display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  border:1px solid var(--line);background:var(--navy-2);color:var(--ice)}
.btn-acao:hover{border-color:var(--ice);color:var(--white)}
.btn-acao.pri{background:var(--wine);border-color:var(--wine);color:#fff}
.btn-acao.pri:hover{filter:brightness(1.1)}
/* Numa faixa estreita a busca já ocupa a linha inteira: o botão desce em
   largura cheia e o traço perde a função de separar. */
@media(max-width:760px){
  .lista-bar .btn-acao{flex:1;justify-content:center}
  .barra-sep{display:none}
}

/* ---------- Botão pequeno ----------
   Ação dentro de um card ou de uma janela, onde o botão padrão do app fica
   grande demais. `.save` é a ação principal, `.del` a destrutiva. */
.btn-mini{height:36px;padding:0 13px;font-size:12px;border-radius:7px;cursor:pointer;
  font-weight:600;border:1px solid var(--line);background:transparent;color:var(--ice);
  box-sizing:border-box;white-space:nowrap;font-family:inherit;
  display:inline-flex;align-items:center;gap:6px}
.btn-mini:hover{border-color:var(--ice);color:var(--white)}
.btn-mini.save{background:var(--wine);color:#fff;border-color:var(--wine)}
.btn-mini.del{color:var(--bad);border-color:rgba(255,107,107,.4)}
.btn-mini.del:hover{background:rgba(255,107,107,.12)}

/* ---------- Janela modal ----------
   Um formulário que não vale uma página inteira: criar usuário, criar
   cliente sem sair do cadastro de obra. Nasceu no <style> do usuarios.html e
   subiu para cá na segunda tela que precisou dela.

   z-index 60 fica acima da topbar (20) e do overlay do menu (50). O mapa é
   isolado em z-index 0 (ver mapa.css), então nunca disputa com a janela. */
/* ══ MODAL ══ */
.modal-bg{position:fixed;inset:0;background:rgba(4,12,28,.72);z-index:60;
  display:none;align-items:flex-start;justify-content:center;padding:40px 16px;overflow:auto}
.modal-bg.on{display:flex}
.modal{background:var(--navy-2);border:1px solid var(--line);border-radius:12px;
  width:100%;max-width:520px;padding:22px 24px;position:relative;
  box-shadow:0 18px 50px rgba(0,0,0,.5)}
.modal h2{margin:0 0 3px;font-size:17px;color:var(--white)}
.modal .msub{font-size:12px;color:var(--ice);letter-spacing:.4px;margin-bottom:14px}
.modal .mrow{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.modal .mfield{flex:1;min-width:150px}
.modal label{display:block;font-size:10px;text-transform:uppercase;letter-spacing:1px;
  color:var(--ice);font-weight:700;margin-bottom:5px}
.modal input[type=text], .modal select{width:100%;box-sizing:border-box;background:#0a1730;
  border:1px solid var(--line);border-radius:6px;color:var(--white);
  font-size:13px;font-family:inherit;padding:9px 11px;height:auto}
.modal input[type=text]:focus, .modal select:focus{outline:none;border-color:var(--ice)}
.modal-x{position:absolute;top:10px;right:12px;background:none;border:none;
  color:var(--ice);font-size:24px;line-height:1;cursor:pointer}
.mhint{font-size:11px;color:#6f8bb0;margin:-6px 0 12px;line-height:1.45}
.macoes{display:flex;gap:8px;align-items:center;margin-top:16px;
  border-top:1px solid var(--line);padding-top:14px;flex-wrap:wrap}
.macoes .esq{margin-right:auto}

/* mensagens de sucesso / erro no topo da página */
.flash{border-radius:10px;padding:11px 15px;font-size:13px;font-weight:600;margin-bottom:16px}
.flash.ok{background:rgba(46,197,168,.14);color:var(--ok);border:1px solid rgba(46,197,168,.35)}
.flash.err{background:rgba(255,107,107,.14);color:var(--bad);border:1px solid rgba(255,107,107,.35)}

/* ---------- Ícones SVG dos cards (templates/icons.html) ----------
   Substituem os emojis, que eram renderizados pelo sistema operacional
   e ficavam diferentes em cada aparelho. Aqui o traço herda a cor via
   currentColor: cinza-gelo em repouso, vinho no hover, acompanhando a
   barrinha lateral do card. */
.app-card .ico{
  color:var(--ice);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:color .15s;
  margin-bottom:14px;
}
.app-card .ico svg{display:block;overflow:visible}
/* vinho puro sobre navy fica escuro demais num traço fino: clareia um pouco */
.app-card:hover .ico{color:#c8566b}

/* Ícone SVG inline dentro de botões/links: herda a cor do texto do botão
   (currentColor) e alinha ao rótulo. */
.ic-inline{
  vertical-align:-0.18em;
  margin-right:.4em;
  flex:0 0 auto;
}
/* quando o ícone é o único conteúdo, sem margem */
.ic-inline:only-child{margin-right:0}
button .ic-inline, a .ic-inline{pointer-events:none}

/* ---------- Autocomplete ----------
   Para campo com muitas opções, um <select> nativo é ruim: obriga a rolar
   a lista inteira com o polegar. Um campo de busca filtra enquanto digita.

   AINDA NÃO ESTÁ EM USO em nenhuma tela. Fica aqui à espera do cadastro de
   obra, onde a lista de clientes é hoje um <select> que cresce sem limite. */
/* z-index acima dos cards irmãos, senão o card seguinte cobre o dropdown */
.ac-wrap{position:relative;z-index:30}
.ac-input{width:100%;box-sizing:border-box}
.ac-list{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:40;
  background:#132b47;border:1px solid var(--line);border-radius:9px;
  max-height:260px;overflow-y:auto;box-shadow:0 14px 34px rgba(0,0,0,.45)}
.ac-item{padding:10px 13px;cursor:pointer;border-bottom:1px solid rgba(255,255,255,.05)}
.ac-item:last-child{border-bottom:none}
.ac-item:hover,.ac-item.ac-ativo{background:rgba(255,255,255,.08)}
.ac-item-nome{color:var(--white);font-size:14px;font-weight:600}
.ac-item-sub{color:var(--ice);font-size:12px;margin-top:2px}
.ac-vazio{padding:12px 13px;color:var(--ice);font-size:13px}
/* selecionado: mesmo visual dos outros campos (nada de borda verde) */
.ac-selecionado{display:none;align-items:center;gap:9px;background:var(--navy);
  border:1px solid var(--line);border-radius:8px;padding:9px 11px;box-sizing:border-box}
.ac-selecionado .ac-nome{color:var(--white);font-size:14px;flex:1}
.ac-limpar{background:transparent;border:1px solid var(--line);color:var(--ice);
  border-radius:6px;cursor:pointer;font-size:12px;padding:3px 8px;line-height:1.4}
.ac-limpar:hover{color:var(--bad);border-color:rgba(255,107,107,.5)}

/* ---------- Miniaturas de fotos ainda não enviadas ----------
   O usuário pode somar seleções (escolher 1, depois mais 2) e remover
   uma foto individualmente antes de enviar. Ver static/fotos.js. */
.thumb-sel{position:relative;display:inline-block}
.thumb-sel .thumb-x{position:absolute;top:3px;right:3px;width:20px;height:20px;
  border-radius:50%;background:rgba(10,20,40,.88);color:var(--bad);
  border:1px solid rgba(255,107,107,.5);cursor:pointer;font-size:11px;
  line-height:1;padding:0;display:flex;align-items:center;justify-content:center}
.thumb-sel .thumb-x:hover{background:var(--bad);color:#2a0808}
.fstatus-erro{color:var(--bad) !important}