/* Base: tema, barra superior, botões, login.
   Identidade visual ABMAIS Urbanismo 2026 (manual-identidade-visual-abmais.md):
   Grafite Profundo #292D2F e Ouro Champanhe #B69E7F (primárias); Grafite Médio #4A5056, Ouro Claro #CBBFA0,
   Creme Off-White #F5F0E8 (suporte); complementares Petróleo #2A606E, Azul Aço #6C9BAD, Azul Acinzentado #A2B5BB,
   Âmbar #E9AA4E, Âmbar Profundo #DB9427, Caramelo #8B6B38. Fonte: Hubot Sans. */
:root{
  /* tema escuro: fundo grafite (peças premium) com o ouro como destaque */
  --bg:#24282A;--surface:#292D2F;--surface2:#33383B;--border:#41474C;
  --accent:#B69E7F;--accent2:#6C9BAD;--green:#86B08A;--yellow:#E9AA4E;
  --orange:#DB9427;--text:#F5F0E8;--muted:#A2B5BB;--red:#E57A6B;
  --on-accent:#292D2F; /* texto sobre fundo ouro */
  --mono:'Hubot Sans',system-ui,sans-serif;--sans:'Hubot Sans',system-ui,sans-serif;
  --HOJE:#E9AA4E; /* linha do HOJE (Cronograma e Geral): âmbar no escuro */
  /* pontilhado da linha do HOJE: ponto de 2px a cada 6px (dotted do CSS não deixa ajustar o espaço) */
  --HOJE-tracejado:repeating-linear-gradient(to bottom,var(--HOJE) 0 2px,transparent 2px 6px);
}
body.theme-light{
  /* tema claro: leitura em branco e creme; o ouro escurece (Caramelo) para ter contraste como texto */
  --bg:#F8F8F1;--surface:#FFFFFF;--surface2:#F5F0E8;--border:#E4DDD0;
  --accent:#8B6B38;--accent2:#2A606E;--green:#3F7A4A;--yellow:#B7791F;
  --orange:#B86E12;--text:#292D2F;--muted:#6B7177;--red:#C0392B;
  --on-accent:#FFFFFF;
  --HOJE:#C0392B; /* vermelha no claro */
  --HOJE-tracejado:repeating-linear-gradient(to bottom,var(--HOJE) 0 2px,transparent 2px 6px);
}
*{margin:0;padding:0;box-sizing:border-box;}
[hidden]{display:none!important;}
body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:14px;height:100vh;overflow:hidden;}
.app{height:100vh;display:flex;flex-direction:column;}
.view{flex:1;min-height:0;display:flex;flex-direction:column;}

/* TOP BAR */
.topbar{display:grid;grid-template-columns:minmax(0,1fr) minmax(max-content,auto);align-items:center;padding:9px 18px;border-bottom:1px solid var(--border);background:var(--surface);flex-shrink:0;gap:12px;}
.btn.btn-ic{padding:6px 9px;font-size:13px;line-height:1;}
.logo{width:28px;height:28px;background:linear-gradient(135deg,var(--accent),var(--accent2));border-radius:6px;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-weight:600;font-size:10px;color:#000;margin-right:10px;flex-shrink:0;}
/* marca: duas versões do logo; o tema escolhe (o preto do logo some no fundo escuro) */
.marca{display:block;width:auto;flex-shrink:0;}
.marca-clara{display:none;}
body.theme-light .marca-clara{display:block;}
body.theme-light .marca-escura{display:none;}
/* marca no topo e no login */
.marcas{display:flex;align-items:center;gap:10px;}
.marcas-sep{width:1px;align-self:stretch;background:var(--border);}
.marcas-topo{height:24px;margin-right:12px;padding-right:12px;border-right:1px solid var(--border);}
.marca-topo{height:30px;}
.marcas-login{justify-content:center;gap:18px;margin:0 0 18px;padding:16px 18px;border-radius:10px;background:var(--surface2);border:1px solid color-mix(in srgb,var(--border) 70%,transparent);}
/* as duas marcas no mesmo "espaço" (caixa de 128×34), sem esticar: ficam com o mesmo peso visual */
.marca-login{width:auto;height:auto;max-width:220px;max-height:48px;object-fit:contain;}
.marcas-login .marcas-sep{align-self:center;height:28px;}
.t-title h1{font-size:13px;font-weight:600;}
/* versão ao lado do nome (js/versao.js) */
.versao{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:8px;font-size:10px;font-weight:600;letter-spacing:.02em;vertical-align:2px;color:var(--muted);background:var(--surface2);border:1px solid var(--border);}
.t-title p{font-size:9px;color:var(--muted);font-family:var(--mono);margin-top:1px;}
.tl{display:flex;align-items:center;}
.tr{display:flex;gap:6px;align-items:center;justify-content:flex-end;}
.user{font-family:var(--mono);font-size:10.5px;color:var(--muted);padding:0 4px;white-space:nowrap;}
.user b{color:var(--text);font-weight:500;}

.btn{padding:6px 13px;border-radius:6px;font-family:var(--mono);font-size:11.5px;cursor:pointer;border:1px solid var(--border);background:var(--surface2);color:var(--muted);transition:all .15s;white-space:nowrap;}
.btn:hover,.btn.on{color:var(--text);border-color:var(--accent);}
.btn:disabled{opacity:.45;cursor:not-allowed;}
/* prioridade P1/P2/P3 (cards e To Do); --prio vem de componentes.js */
.prio{display:inline-flex;align-items:center;gap:3px;padding:1px 6px 1px 4px;border-radius:6px;font-size:10px;font-weight:700;line-height:1.4;color:var(--prio);background:color-mix(in srgb,var(--prio) 14%,transparent);}
/* bandeirinha da prioridade (componentes.js → bandeiraPrioridade) */
svg.flag{width:15px;height:15px;flex-shrink:0;overflow:visible;}
svg.flag .mastro{fill:none;stroke:var(--prio);stroke-width:1.6;stroke-linecap:round;}
svg.flag .pano{fill:color-mix(in srgb,var(--prio) 32%,transparent);stroke:var(--prio);stroke-width:1.4;stroke-linejoin:round;}
.prio svg.flag{width:11px;height:11px;}
/* ações da tela aberta (barra superior): destacadas dos botões gerais */
.btn.btn-acao{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,var(--border));}
.btn.btn-acao:hover{background:color-mix(in srgb,var(--accent) 10%,var(--surface2));}

/* FORMULÁRIOS */
.field{margin-bottom:12px;}
.field label{display:block;font-family:var(--mono);font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:5px;}
.field input,.field select{width:100%;padding:9px 11px;background:var(--bg);border:1px solid var(--border);border-radius:6px;color:var(--text);font-family:var(--sans);font-size:13.5px;}
.field input:focus,.field select:focus{outline:none;border-color:var(--accent);}
.modal-btn{padding:9px 18px;border-radius:6px;font-size:12.5px;cursor:pointer;border:1px solid var(--border);background:var(--surface2);color:var(--text);font-family:var(--mono);}
.modal-btn.primary{background:var(--accent);color:var(--on-accent);border-color:transparent;font-weight:600;}
.modal-btn:hover{opacity:.87;}
.modal-btn:disabled{opacity:.5;cursor:wait;}

/* LOGIN */
.login{height:100vh;display:flex;align-items:center;justify-content:center;padding:16px;}
.login-box{width:392px;max-width:100%;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:30px 30px 26px;box-shadow:0 20px 60px rgba(0,0,0,.4);}
.login-head{text-align:center;margin-bottom:22px;}
.login-head h1{font-size:18px;font-weight:700;letter-spacing:-.01em;}
.login-head p{font-size:12px;color:var(--muted);margin-top:4px;}
.login-box .modal-btn{width:100%;margin-top:6px;}
.login-erro{background:rgba(255,84,112,.12);border:1px solid var(--red);color:var(--red);border-radius:6px;padding:8px 10px;font-size:12px;margin-bottom:10px;}

.aviso{background:rgba(245,200,66,.12);border-bottom:1px solid var(--yellow);color:var(--yellow);padding:8px 18px;font-size:12px;flex-shrink:0;}
.carregando{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:var(--bg);color:var(--muted);font-family:var(--mono);font-size:12px;z-index:3000;}

#errbox{display:none;position:fixed;bottom:0;left:0;right:0;max-height:28vh;overflow:auto;background:#3a0d14;color:#ffb3c0;font:11px/1.5 monospace;padding:9px 14px;z-index:99999;border-top:2px solid var(--red);white-space:pre-wrap;}

::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px;}
::-webkit-scrollbar-thumb:hover{background:var(--muted);}

/* ── Navegação principal: barra fina à esquerda (ícone + nome) ───────────── */
.corpo{flex:1;min-height:0;display:flex;}
.area{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;}
.rail{width:92px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:18px;padding:16px 8px 12px;background:var(--surface);border-right:1px solid var(--border);}
.rail button{position:relative;width:76px;white-space:nowrap;display:flex;flex-direction:column;align-items:center;gap:5px;padding:9px 2px 8px;border:none;border-radius:10px;background:none;color:var(--muted);font-family:var(--sans);font-size:9.5px;font-weight:500;letter-spacing:-.01em;cursor:pointer;transition:background .15s,color .15s;}
.rail button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
/* ícones da barra lateral: emojis (leve e divertido); apagados quando o item não está ativo */
.rail button .emo{font-size:21px;line-height:1;filter:grayscale(.35);opacity:.85;transition:filter .15s,opacity .15s;}
.rail button:hover .emo,.rail button.on .emo{filter:none;opacity:1;}
.rail button:hover{color:var(--text);background:var(--surface2);}
.rail button.on{color:var(--accent);background:color-mix(in srgb,var(--accent) 13%,transparent);}
.rail button.on::before{content:'';position:absolute;left:-8px;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:var(--accent);}
.rail-fim{flex:1;}
.rail-sep{flex-shrink:0;width:52px;height:1px;margin:-6px 0;background:var(--border);}
/* telas mais baixas: menos respiro entre os ícones (a barra rola se ainda assim faltar altura) */
.rail{overflow-y:auto;scrollbar-width:none;}
@media (max-height:1080px){.rail{gap:9px;padding-top:10px;}.rail button{gap:4px;padding:5px 2px 4px;font-size:9.5px;}.rail button svg{width:20px;height:20px;}.rail button .emo{font-size:19px;}}

/* aviso de início: visível desde o 1º instante (nunca tela preta e muda) */
.inicio{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:var(--bg);z-index:4000;padding:20px;}
.ini-caixa{max-width:420px;text-align:center;color:var(--muted);font-size:13px;line-height:1.6;}
.ini-acoes{display:flex;gap:8px;justify-content:center;margin-top:14px;}

/* módulos futuros (tela "em breve") */
.embreve{flex:1;display:flex;align-items:center;justify-content:center;padding:24px;background:var(--bg);}
.eb-caixa{max-width:440px;text-align:center;}
.eb-tag{display:inline-block;font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);border:1px solid var(--accent);border-radius:10px;padding:2px 10px;margin-bottom:12px;}
.eb-caixa h2{font-size:20px;font-weight:600;margin-bottom:8px;}
.eb-caixa p{font-size:13px;color:var(--muted);line-height:1.6;}

/* ✨ Novidades (novidades.js): botão ao lado da versão e a janela com as versões */
.nv-btn{position:relative;margin-left:6px;padding:1px 8px;border:1px solid color-mix(in srgb,var(--accent2) 45%,var(--border));border-radius:8px;background:color-mix(in srgb,var(--accent2) 10%,transparent);color:var(--accent2);font-family:var(--sans);font-size:10px;font-weight:600;vertical-align:2px;cursor:pointer;}
.nv-btn:hover{background:color-mix(in srgb,var(--accent2) 18%,transparent);}
.nv-btn.nova::after{content:'';position:absolute;top:-3px;right:-3px;width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 0 2px var(--surface);}
.nv-fundo{position:fixed;inset:0;z-index:1400;background:rgba(0,0,0,.35);display:flex;justify-content:center;align-items:flex-start;padding:8vh 16px 16px;}
.nv-caixa{width:min(560px,100%);max-height:82vh;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:0 18px 50px rgba(0,0,0,.3);font-family:var(--sans);color:var(--text);overflow:hidden;}
.nv-topo{display:flex;align-items:center;padding:14px 18px;border-bottom:1px solid var(--border);}
.nv-topo b{flex:1;font-size:16px;font-weight:600;}
.nv-fechar{border:none;background:none;color:var(--muted);font-size:16px;cursor:pointer;}
.nv-corpo{overflow-y:auto;padding:6px 20px 18px;}
.nv-versao{padding:12px 0;border-bottom:1px solid var(--border);}
.nv-versao:last-child{border-bottom:none;}
.nv-cab{display:flex;align-items:center;gap:8px;margin-bottom:6px;}
.nv-v{font-size:14px;font-weight:700;}
.nv-versao.atual .nv-v{color:var(--accent2);}
.nv-tag{font-size:10px;font-weight:600;padding:1px 7px;border-radius:8px;color:var(--accent2);background:color-mix(in srgb,var(--accent2) 14%,transparent);}
.nv-data{margin-left:auto;font-size:11px;color:var(--muted);}
.nv-versao ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px;}
.nv-versao li{font-size:12.5px;line-height:1.45;}
/* empresa (0053): etiqueta nos cards e filtro Todas | <empresa> */
.tag-empresa{display:inline-block;padding:0 7px;border-radius:9px;font-size:10.5px;font-weight:600;color:var(--cor);background:color-mix(in srgb,var(--cor) 14%,transparent);border:1px solid color-mix(in srgb,var(--cor) 35%,transparent);}
body:not(.theme-light) .tag-empresa{color:color-mix(in srgb,var(--cor) 45%,#fff);}
.filtro-empresa{flex-shrink:0;}
/* "Quanto tempo levou?" (ui.js pedirHoras) */
.ph-fundo{position:fixed;inset:0;z-index:1600;background:rgba(15,23,42,.5);display:flex;align-items:center;justify-content:center;padding:16px;}
.ph-caixa{width:min(420px,100%);padding:18px 20px;border-radius:12px;background:var(--surface);border:1px solid var(--border);box-shadow:0 20px 50px rgba(0,0,0,.35);font-family:var(--sans);}
.ph-caixa h3{font-size:16px;margin:0 0 6px;}
.ph-caixa p{font-size:12.5px;color:var(--muted);margin:0 0 12px;line-height:1.45;}
.ph-opcoes{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;}
.ph-opcoes button{padding:8px 6px;border:1px solid var(--border);border-radius:7px;background:var(--surface2);color:var(--text);font-family:var(--sans);font-size:12.5px;cursor:pointer;}
.ph-opcoes button:hover{border-color:var(--accent);}
.ph-opcoes button.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600;}
.ph-outro{display:flex;align-items:center;gap:6px;margin-top:10px;font-size:12.5px;color:var(--muted);}
.ph-outro input{width:90px;padding:6px 8px;border:1px solid var(--border);border-radius:6px;background:var(--bg);color:var(--text);font-family:var(--sans);}
.ph-outro input.erro{border-color:var(--red);}
.ph-acoes{display:flex;justify-content:flex-end;gap:8px;margin-top:16px;}

/* Tema claro (2026-10-22): as sombras e os fundos de janela foram desenhados para o tema escuro — no claro, a
   sombra quase preta virava uma "borda escura" em volta de janelas, menus e avisos. Aqui ficam leves. */
body.theme-light :is(.modal,.popover,.pe-caixa,.sub-caixa,.fn-imp-caixa,.ph-caixa,.nv-caixa,.nt.flutuante,.login-box){box-shadow:0 16px 44px rgba(15,23,42,.16),0 2px 6px rgba(15,23,42,.06);}
body.theme-light :is(.proj-dropdown,.person-dropdown,.resp-pop,.sel-pop,.nt-cal,.fn-dica,.toast){box-shadow:0 8px 24px rgba(15,23,42,.14);}
body.theme-light :is(.pd-folha,.sgq-word,.sgq-planilha,.pf-folha){box-shadow:0 2px 12px rgba(15,23,42,.12);}
body.theme-light .bar.dragging{box-shadow:0 4px 14px rgba(15,23,42,.22);}
body.theme-light :is(.modal-bg,.pe-fundo,.sub-fundo){background:rgba(15,23,42,.28);}