/* ---------- Identidade GT Home ABC (Zeev) — mesmos tokens nos dois temas ---------- */
:root{
  --brand-orange:#EE7327; --brand-orange-deep:#BD5D27; --brand-orange-amber:#FAA21B;
  --brand-sand:#F2DE9A; --brand-coral:#F2737C; --brand-sky:#9BCAD3;
  --brand-ink:#231F20; --brand-cream:#FFFBEE; --teal:#3D7780;

  /* tema claro (creme) */
  --bg-chrome:#FAFAF8; --bg-page:#E8E4DD; --bg-elevated:#FFFFFF; --bg-sunken:#D6CFBE;
  --fg-1:#231F20; --fg-2:#3D372D; --fg-3:#847A5E; --fg-muted:#B5AB8C;
  --border:#E0DAC9; --border-strong:#C8BFA4;
  --sel:#FAE4D3; --sel-strong:#D17751;
  --green:#3F8F5B; --red:#C44E45;
  --shadow-1:0 1px 2px rgba(14,14,14,0.06); --shadow-2:0 4px 12px rgba(14,14,14,0.08);

  --canvas:#FFFFFF;                       /* prancha */
  --nao:var(--fg-muted); --ini:#D98A14; --fim:var(--green);
  --pilar:#C24E58; --viga:var(--teal); --laje:#A8862A; --escada:#6D5B97;
  --ramal:#EE7327; --quadro:#8A817E; --acabamento:#EAB308; --prumada:#38BDF8;
  /* traços do CAD */
  --l-cols:#A33A42; --l-cols-h:#D9959A; --l-beam:#2F6670; --l-beam-h:#8FB0B6;
  --l-flor:#8A6E1C; --l-flor-h:#C4B37A; --l-wall:#7A6A4A; --l-wall-p:#B7AC8E;
  --l-strs:#BD5D27; --l-grid:#C8BFA4; --l-zero:#9A9080;
  --vao-fill:#FFFFFF; --vao-stroke:#C8BFA4;
  --rot-fill:#231F20; --rot-stroke:#FFFFFF;

  --painel:340px;
}
.dark{
  --bg-chrome:#1A1718; --bg-page:#000000; --bg-elevated:#221E1F; --bg-sunken:#0D0B0C;
  --fg-1:#F4F0F1; --fg-2:#CFC9CB; --fg-3:#9A9295; --fg-muted:#6B6466;
  --border:#363132; --border-strong:#534C4E;
  --sel:#372318; --sel-strong:#57381F;
  --green:#5FD08A; --red:#F4877B;
  --shadow-1:0 1px 2px rgba(0,0,0,0.5); --shadow-2:0 6px 20px rgba(0,0,0,0.55);

  --canvas:#0D0B0C;
  --nao:var(--fg-muted); --ini:var(--brand-orange-amber); --fim:var(--green);
  --ramal:#EE7327; --quadro:#8A817E; --acabamento:#EAB308; --prumada:#38BDF8;
  --pilar:var(--brand-coral); --viga:var(--brand-sky); --laje:var(--brand-sand);
  --escada:#BEB0DE;
  --l-cols:#F2737C; --l-cols-h:#8E5459; --l-beam:#9BCAD3; --l-beam-h:#5E7B81;
  --l-flor:#F2DE9A; --l-flor-h:#8E8560; --l-wall:#B5AB8C; --l-wall-p:#7A7360;
  --l-strs:#FAA21B; --l-grid:#534C4E; --l-zero:#6B6466;
  --vao-fill:#0D0B0C; --vao-stroke:#534C4E;
  --rot-fill:#F4F0F1; --rot-stroke:#0D0B0C;
}
*{box-sizing:border-box}
/* arrastar a planta não pode selecionar rótulo como texto (trava a ferramenta de mão) */
body{user-select:none;-webkit-user-select:none;display:flex;flex-direction:column}
/* #telas ocupa o que sobra depois da faixa. min-height:0 e obrigatorio: sem ele o item
   flex nao encolhe abaixo do conteudo e a matriz empurraria o rodape para fora. */
#telas{flex:1;min-height:0;position:relative}
input,textarea{user-select:text;-webkit-user-select:text}
html,body{margin:0;height:100%;background:var(--bg-page);color:var(--fg-1);transition:background .2s,color .2s;
  font:400 13px/1.5 'Montserrat','Segoe UI',-apple-system,Roboto,sans-serif;
  overflow:hidden;-webkit-text-size-adjust:100%;
  scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:8px}
::-webkit-scrollbar-track{background:transparent}
#app{display:grid;grid-template-columns:300px 1fr 0;grid-template-rows:auto 1fr;
  position:relative;height:100%;
  transition:grid-template-columns .18s ease;background:var(--bg-page)}
#app.aberto{grid-template-columns:300px 1fr var(--painel)}

/* posição explícita: sem isso, quando a lista vira gaveta (position:absolute) ela sai
   do grid e o <main> escorrega para a coluna de 0px — o desenho fica sem largura. */
header{grid-column:1/-1;grid-row:1;display:flex;align-items:center;gap:12px;padding:10px 16px;
  background:var(--bg-chrome);border-bottom:1px solid var(--border)}
header h1{font-size:13px;margin:0;font-weight:800;white-space:nowrap;
  text-transform:uppercase;letter-spacing:.08em;color:var(--fg-1)}
header h1 em{font-style:normal;color:var(--brand-orange)}
header .obra{font-size:10.5px;color:var(--fg-3);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
header .sp{flex:1}
button{background:var(--bg-elevated);color:var(--fg-1);border:1px solid var(--border-strong);
  border-radius:8px;padding:8px 12px;font:600 11.5px 'Montserrat','Segoe UI',sans-serif;
  cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:border-color .12s,background .12s}
button:hover{border-color:var(--brand-orange);color:var(--fg-1)}
button.on{background:var(--sel);border-color:var(--brand-orange);color:var(--brand-orange)}
#menu{display:none;font-size:15px;padding:6px 11px}
#btTema{font-size:14px;padding:7px 11px;line-height:1}

/* escopado ao painel do desenho: o painel novo tambem usa <aside> */
#app aside{grid-column:1;grid-row:2;background:var(--bg-chrome);border-right:1px solid var(--border);overflow-y:auto;
  padding:12px;-webkit-overflow-scrolling:touch}
#app aside h2{font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:var(--fg-3);
  margin:18px 0 8px;font-weight:700}
#app aside h2:first-child{margin-top:0}
.card{background:var(--bg-elevated);border:1px solid var(--border);border-radius:12px;
  padding:10px 13px;margin-bottom:8px;box-shadow:var(--shadow-1)}
.card .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px;gap:7px}
.card .nome{font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.08em}
.card .pct{font-variant-numeric:tabular-nums;font-size:19px;font-weight:800;
  margin-left:auto;line-height:1;color:var(--fg-1)}
.card .selTudo{background:transparent;border:1px solid var(--border-strong);color:var(--fg-3);
  font:700 9.5px 'Montserrat',sans-serif;padding:3px 8px;border-radius:20px;
  letter-spacing:.06em;text-transform:uppercase;line-height:1.4}
.card .selTudo:hover{border-color:var(--brand-orange);color:var(--brand-orange)}
.barra{height:6px;border-radius:20px;background:var(--bg-sunken);overflow:hidden;display:flex}
.barra i{display:block;height:100%}
.card .det{font-size:10px;color:var(--fg-3);margin-top:6px;font-variant-numeric:tabular-nums;
  line-height:1.5}
.card.geral{background:var(--bg-sunken);border-color:var(--border-strong)}
.card.geral .pct{color:var(--brand-orange)}
.filtros{display:flex;flex-wrap:wrap;gap:5px}
.filtros button{font-size:11px;padding:7px 11px;border-radius:20px}
input[type=search]{width:100%;background:var(--bg-sunken);border:1px solid var(--border-strong);
  border-radius:8px;color:var(--fg-1);padding:9px 11px;
  font:400 12px 'Montserrat','Segoe UI',sans-serif}
input[type=search]::placeholder{color:var(--fg-muted)}
input[type=search]:focus{outline:none;border-color:var(--brand-orange)}
.lista{margin-top:8px;display:flex;flex-direction:column;gap:2px}
.item{display:grid;grid-template-columns:auto 1fr auto;gap:9px;align-items:center;
  padding:9px 10px;border-radius:8px;cursor:pointer;font-size:12px;
  -webkit-tap-highlight-color:transparent;border:1px solid transparent}
.item:hover{background:var(--sel)}
.item.sel{background:var(--sel);border-color:var(--brand-orange)}
.item .pt{width:9px;height:9px;border-radius:50%;flex:none}
.item .id{font-weight:700;font-variant-numeric:tabular-nums}
.item .meta{color:var(--fg-3);font-size:10px;text-align:right;font-variant-numeric:tabular-nums}

main{grid-column:2;grid-row:2;position:relative;background:var(--canvas);overflow:hidden;min-width:0}
svg{width:100%;height:100%;display:block;cursor:grab;touch-action:none;
  user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}
svg text{user-select:none;-webkit-user-select:none;pointer-events:none}
svg.pan{cursor:grabbing}
svg.modoSel{cursor:copy}
.el{cursor:pointer}
svg.temSel .el{opacity:.25}
svg.temSel .el.sel{opacity:1}
@media (hover:hover){ .el:hover{filter:brightness(1.25)} }

#dica{position:absolute;pointer-events:none;background:var(--bg-elevated);color:var(--fg-1);
  border:1px solid var(--border-strong);border-radius:8px;padding:5px 10px;
  font:700 11px 'Montserrat',sans-serif;display:none;z-index:20;box-shadow:var(--shadow-2);
  font-variant-numeric:tabular-nums}
#ferr{position:absolute;left:14px;bottom:14px;display:flex;gap:7px;z-index:10;flex-wrap:wrap}
#ferr button{background:var(--bg-elevated);color:var(--fg-2);border-color:var(--border-strong);
  box-shadow:var(--shadow-2);padding:10px 14px}
#ferr button:hover{color:var(--fg-1)}
#ferr button.on{background:var(--sel);color:var(--brand-orange);border-color:var(--brand-orange)}
#ferr button:disabled{opacity:.42;cursor:not-allowed}


/* ==================== interface nova: vitrine, home e painel ==================== */
/* Fundo de vitrine: laranja e preto esmaecidos. E de marca, entao fica escuro nos
   dois temas — o claro vale para as telas de trabalho (planilha e desenho). */
.vitrine{position:relative;overflow:hidden;background:#0B0908;color:#F4EFEC}
.vitrine::before{content:"";position:absolute;inset:-25%;pointer-events:none;
  background:
    radial-gradient(38% 46% at 20% 24%, rgba(238,115,39,.44), transparent 70%),
    radial-gradient(34% 42% at 80% 70%, rgba(238,115,39,.24), transparent 72%),
    radial-gradient(48% 54% at 64% 10%, rgba(140,60,20,.42), transparent 74%),
    radial-gradient(42% 46% at 10% 84%, rgba(70,30,12,.60), transparent 70%);
  filter:blur(64px)}
.vitrine::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(175deg, rgba(8,6,5,.26) 0%, rgba(8,6,5,.68) 62%, rgba(8,6,5,.86) 100%)}
.vitrine > *{position:relative;z-index:1}

/* logo em texto — quando vier o arquivo, troca so aqui */
.logo{display:inline-flex;align-items:baseline;gap:1px;font-weight:800;letter-spacing:.02em;
  line-height:1;user-select:none}
.logo b{font-size:1.05em;font-weight:900}
.logo span{font-size:1.05em;font-weight:400;opacity:.92}
.logo i{font-style:normal;font-size:.62em;font-weight:700;letter-spacing:.16em;
  margin-left:5px;opacity:.72;align-self:center}

/* card translucido — base da home e das atividades */
.tcard{position:relative;display:block;width:100%;text-align:left;cursor:pointer;
  background:rgba(24,19,17,.52);border:1px solid rgba(255,255,255,.11);border-radius:14px;
  padding:15px 17px;color:#F4EFEC;font-family:inherit;
  backdrop-filter:blur(16px) saturate(1.1);-webkit-backdrop-filter:blur(16px) saturate(1.1);
  transition:transform .16s ease, border-color .16s ease, background .16s ease}
.tcard:hover:not(:disabled){transform:translateY(-2px);background:rgba(38,27,21,.62);
  border-color:rgba(238,115,39,.5)}
.tcard:disabled{opacity:.4;cursor:not-allowed}
.tcard.on{border-color:var(--brand-orange);background:rgba(52,32,20,.66)}
.tcard .ic{width:26px;height:26px;margin-bottom:11px;opacity:.82;display:block}
.tcard .ic svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.6}
.tcard .nm{display:block;font-size:14px;font-weight:700;letter-spacing:.01em}
.tcard .sb{display:block;font-size:11px;line-height:1.45;margin-top:4px;opacity:.62}
.tcard .tag{position:absolute;top:13px;right:14px;font-size:9px;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;padding:3px 7px;border-radius:20px;
  background:rgba(255,255,255,.09);opacity:.75}

/* ---------------------------- home ---------------------------- */
#home{position:absolute;inset:0;z-index:60;display:none;flex-direction:column;
  overflow-y:auto;-webkit-overflow-scrolling:touch}
#home.on{display:flex}
#home .hTopo{display:flex;align-items:center;padding:20px 26px;flex:none}
#home .hTopo .logo{font-size:19px;margin:0 auto;color:#fff}
#home .hTopo button{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  color:#F4EFEC;position:absolute;right:26px;top:18px}
#home .hCentro{flex:1;display:flex;flex-direction:column;justify-content:center;
  padding:16px 26px 40px;max-width:1180px;margin:0 auto;width:100%}
#home h1{font-size:clamp(24px,3.4vw,38px);font-weight:800;text-align:center;margin:0 0 6px;
  letter-spacing:-.01em}
#home .hData{text-align:center;font-size:12.5px;opacity:.6;margin-bottom:38px}
#home .hConds{display:flex;gap:34px;flex-wrap:wrap;justify-content:center}
#home .cond{flex:1 1 372px;max-width:440px}
#home .cond > h2{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  opacity:.55;margin:0 0 12px;padding-left:2px}
/* duas colunas fixas nos dois condominios: com auto-fit o bloco de 2 torres
   distribuia o espaco diferente do de 4 e os cards saiam de tamanhos diferentes */
#home .torres{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
#home .torres .tcard{min-height:122px;display:flex;flex-direction:column}
#home .torres .tcard .sb{margin-top:auto}
@media (max-width:520px){ #home .torres{grid-template-columns:minmax(0,1fr)} }
#home .hRodape{flex:none;text-align:center;font-size:10.5px;opacity:.42;padding:0 26px 20px}

/* ---------------------------- painel ---------------------------- */
#painel{position:absolute;inset:0;z-index:56;display:none;
  /* a largura da sidebar de medicoes vive na COLUNA: com "auto" o grid media o
     conteudo de 262px e o aside nunca recolhia de fato */
  grid-template-columns:auto 0px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);
  transition:grid-template-columns .22s ease;background:var(--bg-page)}
/* nomes proprios: "med" colidia com .med da lista de medicoes e o painel herdava
   o padding e o gap dela */
#painel.sbm-on{grid-template-columns:auto 262px minmax(0,1fr)}
#painel.sbm-rec{grid-template-columns:auto 38px minmax(0,1fr)}
#painel.on{display:grid}
#painel > header{grid-column:1/-1;grid-row:1}
#painel > header .logo{font-size:14px;color:var(--fg-1)}
#painel .trilha{font-size:11.5px;color:var(--fg-3);letter-spacing:.04em;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
#painel .trilha b{color:var(--fg-1);font-weight:700}
#painel .trilha i{font-style:normal;opacity:.45;margin:0 7px}

/* sidebar geral: a arvore condominio -> torre -> materia -> reparticao */
#sbGeral{grid-column:1;grid-row:2;width:238px;background:var(--bg-chrome);
  border-right:1px solid var(--border);overflow-y:auto;padding:14px 0 20px;
  -webkit-overflow-scrolling:touch}
#sbGeral h2{font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg-3);margin:16px 0 7px;padding:0 16px}
#sbGeral h2:first-child{margin-top:0}
.nv{display:flex;align-items:center;gap:7px;width:100%;text-align:left;cursor:pointer;
  background:transparent;border:0;border-radius:0;color:var(--fg-2);font-family:inherit;
  font-size:12.5px;padding:7px 16px;line-height:1.3;transition:background .12s,color .12s}
.nv:hover:not(:disabled){background:var(--bg-2);color:var(--fg-1)}
.nv:disabled{opacity:.38;cursor:not-allowed}
.nv .ch{width:11px;flex:none;font-size:9px;opacity:.5;transition:transform .18s ease}
.nv.aberto .ch{transform:rotate(90deg)}
.nv .tx{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nv .mini{font-size:9px;font-weight:800;letter-spacing:.08em;opacity:.5;text-transform:uppercase}
.nv.n1{font-weight:700;color:var(--fg-1)}
.nv.n2{padding-left:30px}
.nv.n3{padding-left:44px}
.nv.n4{padding-left:58px;font-size:12px}
.nv.sel{background:var(--sel);color:var(--brand-orange);font-weight:700;
  box-shadow:inset 3px 0 0 var(--brand-orange)}
.nvGrupo{overflow:hidden;transition:height .2s ease}

/* sidebar de medicoes: aparece ao escolher a atividade, recolhe ao abrir a planilha */
/* min-width:0 e obrigatorio: item de grid nao encolhe abaixo do conteudo por padrao,
   e os 262px do corpo impediriam a coluna de recolher para 38px */
#sbMed{grid-column:2;grid-row:2;display:none;background:var(--bg-chrome);
  border-right:1px solid var(--border);position:relative;overflow:hidden;min-width:0}
#sbMed.on{display:block}
#sbMed .sbm-corpo{width:262px;height:100%;overflow-y:auto;padding:14px 14px 20px;
  transition:opacity .16s ease;-webkit-overflow-scrolling:touch}
#sbMed.rec .sbm-corpo{opacity:0;pointer-events:none}
#sbMed h2{font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg-3);margin:0 0 9px}
#sbMed h2{padding-right:32px}
#sbMedTog{position:absolute;top:11px;right:12px;z-index:3;width:24px;height:24px;padding:0;
  font-size:12px;line-height:1;border-radius:7px;background:var(--bg-elevated)}
#sbMed.rec #sbMedTog{right:7px}
#sbMed.rec .rot{position:absolute;top:64px;left:50%;transform:translateX(-50%) rotate(90deg);
  transform-origin:center;white-space:nowrap;font-size:10px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
#sbMed .rot{display:none}
#sbMed.rec .rot{display:block}

/* conteudo: atividades ou planilha */
#pnConteudo{grid-column:3;grid-row:2;position:relative;overflow:hidden;min-width:0}
#pnAtiv{position:absolute;inset:0;display:none;overflow-y:auto;
  -webkit-overflow-scrolling:touch}
#pnAtiv.on{display:block}
#pnAtiv .corpo{padding:30px 30px 44px;max-width:1080px;margin:0 auto}
#pnAtiv .tt{font-size:20px;font-weight:800;margin:0 0 3px}
#pnAtiv .st{font-size:12px;opacity:.58;margin-bottom:26px}
#pnAtiv .grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:13px}
#pnMatriz{position:absolute;inset:0;display:none;overflow:auto;
  -webkit-overflow-scrolling:touch}
#pnMatriz.on{display:block}
#pnMatriz .corpo{padding:16px 18px 26px}

/* dropdown das sub-atividades: cresce DENTRO do card da materia, com entrada em
   cascata — nao ha duvida de qual atividade ele pertence */
.tcard .subs{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:8px;
  overflow:hidden;height:0;opacity:0;margin-top:0;
  transition:height .24s cubic-bezier(.2,.9,.3,1), opacity .18s ease, margin-top .24s ease}
.tcard.aberto .subs{opacity:1;margin-top:13px}
.tcard .subs .sc{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12);
  border-radius:10px;padding:9px 11px;cursor:pointer;color:inherit;font-family:inherit;
  text-align:left;transform:translateY(-7px);opacity:0;
  transition:transform .22s cubic-bezier(.2,.9,.3,1.2), opacity .2s ease,
             border-color .12s, background .12s}
.tcard.aberto .subs .sc{transform:none;opacity:1}
.tcard .subs .sc:hover:not(:disabled){background:rgba(238,115,39,.16);
  border-color:rgba(238,115,39,.6)}
.tcard .subs .sc:disabled{opacity:.38;cursor:not-allowed}
.tcard .subs .sc.on{background:rgba(238,115,39,.22);border-color:var(--brand-orange)}
.tcard .subs .sc b{display:block;font-size:12px;font-weight:700}
.tcard .subs .sc span{display:block;font-size:9.5px;opacity:.6;margin-top:2px}

/* declarado ANTES da media query: mesma especificidade, quem vem depois ganha */
#pnMenu{display:none;font-size:15px;padding:6px 11px}
@media (max-width:1024px){
  #sbGeral{position:absolute;top:0;bottom:0;left:0;z-index:32;transform:translateX(-100%);
    transition:transform .2s ease;box-shadow:var(--shadow-2)}
  #sbGeral.abre{transform:none}
  /* a sidebar geral sai do fluxo; a de medicoes mantem as larguras fixas — "auto"
     aqui traria de volta o problema da coluna medindo o conteudo */
  #painel{grid-template-columns:0 0px minmax(0,1fr)}
  #painel.sbm-on{grid-template-columns:0 262px minmax(0,1fr)}
  #painel.sbm-rec{grid-template-columns:0 38px minmax(0,1fr)}
  #pnMenu{display:inline-flex}
}

/* ---------- painel direito ---------- */
#det{grid-column:3;grid-row:2;background:var(--bg-chrome);border-left:1px solid var(--border);overflow-y:auto;
  display:flex;flex-direction:column;min-width:0;-webkit-overflow-scrolling:touch}
#app:not(.aberto) #det{display:none}
#det .cab{display:flex;align-items:center;gap:11px;padding:14px 16px;
  border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--bg-chrome);z-index:2}
#det .selo{width:11px;height:11px;border-radius:4px;flex:none}
#det h3{margin:0;font-size:20px;font-weight:800;letter-spacing:.02em;line-height:1.1;
  font-variant-numeric:tabular-nums}
#det .tipo{font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:var(--fg-3);
  margin-top:3px;font-weight:700}
#det .fechar{margin-left:auto;background:none;border:none;color:var(--fg-3);font-size:24px;
  line-height:1;padding:2px 6px;cursor:pointer}
#det .fechar:hover{color:var(--brand-orange)}

.ficha{padding:12px 16px;margin:0;display:grid;grid-template-columns:auto 1fr;
  gap:8px 14px;font-size:12px;align-content:start}
.ficha dt{color:var(--fg-3);font-size:9.5px;white-space:nowrap;text-transform:uppercase;
  letter-spacing:.09em;font-weight:700;padding-top:1px}
.ficha dd{margin:0;font-variant-numeric:tabular-nums;min-width:0;overflow-wrap:anywhere;
  color:var(--fg-1);font-weight:600}
.tag{display:inline-block;padding:2px 9px;border-radius:20px;font-size:9.5px;
  font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.aviso{margin:0 16px 12px;padding:9px 11px;background:var(--sel);
  border:1.5px dashed var(--brand-orange);border-radius:8px;font-size:11px;
  color:var(--brand-orange-amber);line-height:1.5}

.selLista{padding:10px 13px;display:flex;flex-wrap:wrap;gap:6px;align-content:start;
  border-bottom:1px solid var(--border);max-height:38vh;overflow-y:auto}
.chip{display:inline-flex;align-items:center;gap:7px;background:var(--bg-elevated);
  border:1px solid var(--border-strong);border-radius:20px;padding:6px 9px 6px 11px;
  font:700 11px 'Montserrat',sans-serif;cursor:pointer;font-variant-numeric:tabular-nums;
  -webkit-tap-highlight-color:transparent;color:var(--fg-1)}
.chip:hover{border-color:var(--brand-orange);background:var(--sel)}
.chip b{width:7px;height:7px;border-radius:50%;display:inline-block}
.chip s{text-decoration:none;color:var(--fg-muted);font-size:14px;line-height:1;margin-left:2px}
.chip:hover s{color:var(--brand-orange)}

.avanco{padding:13px 16px 0}
.avanco .lin{display:flex;justify-content:space-between;align-items:baseline;
  font-size:9.5px;color:var(--fg-3);margin-bottom:6px;text-transform:uppercase;
  letter-spacing:.09em;font-weight:700}
.avanco .lin b{font-size:19px;color:var(--fg-1);font-variant-numeric:tabular-nums;
  font-weight:800;text-transform:none;letter-spacing:0}
.avanco .lin.sub{text-transform:none;letter-spacing:0;font-weight:400;font-size:10px}
.avanco .barra{height:8px}

.acoes{margin-top:auto;padding:13px 16px 16px;border-top:1px solid var(--border);
  position:sticky;bottom:0;background:var(--bg-chrome)}
.acoes .rot{font-size:9.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--fg-3);
  margin-bottom:9px;font-weight:700;display:flex;justify-content:space-between}
.etapas{display:flex;flex-direction:column;gap:6px}
.etapa{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:8px;
  border:1px solid var(--border-strong);background:var(--bg-elevated);color:var(--fg-2);
  cursor:pointer;font:600 12px 'Montserrat',sans-serif;min-height:46px;text-align:left;
  width:100%;-webkit-tap-highlight-color:transparent;transition:border-color .12s}
.etapa:hover{border-color:var(--brand-orange)}
.etapa .cx{width:18px;height:18px;border-radius:5px;border:1.5px solid var(--border-strong);
  flex:none;display:flex;align-items:center;justify-content:center;font-size:12px;line-height:1}
.etapa .pp{margin-left:auto;font-size:10px;color:var(--fg-3);font-weight:600;
  font-variant-numeric:tabular-nums}
.etapa.at{background:rgba(95,208,138,.12);border-color:var(--green);color:var(--green)}
.etapa.at .cx{background:var(--green);border-color:var(--green);color:var(--bg-page)}
.etapa.at .pp{color:var(--green);opacity:.8}
.etapa.misto{background:rgba(250,162,27,.12);border-color:var(--ini);color:var(--ini)}
.etapa.misto .cx{background:var(--ini);border-color:var(--ini);color:var(--bg-page)}
.etapa.misto .pp{color:var(--ini);opacity:.8}
.nav{display:flex;justify-content:space-between;align-items:center;margin-top:11px;
  font-size:10px;color:var(--fg-3);text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.nav button{padding:7px 12px;font-size:10.5px}

/* ---------- disciplinas e medições ---------- */
#discip{position:absolute;inset:0;z-index:57;background:var(--bg-page);overflow:auto;
  display:none;flex-direction:column}
#discip.on{display:flex}
#discip header{background:var(--bg-chrome);border-bottom:1px solid var(--border)}
#discip .corpo{padding:24px 22px 40px;max-width:1060px;margin:0 auto;width:100%}
.disc{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin-bottom:26px}
.disc button{background:var(--bg-elevated);border:1px solid var(--border);border-radius:11px;
  padding:14px 16px;cursor:pointer;text-align:left;display:flex;flex-direction:column;gap:5px;
  transition:border-color .12s,transform .12s}
.disc button:hover:not(:disabled){border-color:var(--brand-orange);transform:translateY(-2px)}
.disc button.on{border-color:var(--brand-orange);background:var(--sel)}
.disc button:disabled{opacity:.42;cursor:not-allowed}
.disc .nm{font-size:15px;font-weight:800;color:var(--fg-1)}
.disc .sb{font-size:10.5px;color:var(--fg-3)}
.disc .rep{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.disc .rep i{font-style:normal;font-size:10px;letter-spacing:.05em;padding:2px 7px;
  border-radius:20px;background:var(--bg-3);color:var(--fg-3);border:1px solid var(--border)}
.disc .rep i.on{background:var(--brand-orange);color:#fff;border-color:var(--brand-orange)}

/* modal das repartições — cresce do card clicado */
#sub{position:fixed;inset:0;z-index:78;display:none}
#sub.on{display:block}
#sub .veu{position:absolute;inset:0;background:rgba(0,0,0,.45);opacity:0;
  transition:opacity .18s ease}
#sub.abre .veu{opacity:1}
#sub .cx{position:absolute;background:var(--bg-elevated);border:1px solid var(--border);
  border-radius:14px;padding:16px;box-shadow:0 18px 50px rgba(0,0,0,.42);
  width:min(340px,calc(100vw - 32px));
  transform:scale(.34);opacity:0;transform-origin:var(--ox,50%) var(--oy,50%);
  transition:transform .22s cubic-bezier(.2,.9,.3,1.25), opacity .16s ease}
#sub.abre .cx{transform:scale(1);opacity:1}
#sub h4{margin:0 0 3px;font-size:15px;font-weight:800;color:var(--fg-1)}
#sub .de{font-size:10.5px;color:var(--fg-3);margin-bottom:13px;letter-spacing:.04em}
#sub .op{display:flex;flex-direction:column;gap:7px}
#sub .op button{background:var(--bg-2);border:1px solid var(--border);border-radius:10px;
  padding:11px 13px;cursor:pointer;text-align:left;display:flex;align-items:center;gap:10px;
  transition:border-color .12s,background .12s}
#sub .op button:hover:not(:disabled){border-color:var(--brand-orange);background:var(--sel)}
#sub .op button.on{border-color:var(--brand-orange);background:var(--sel)}
#sub .op button:disabled{opacity:.42;cursor:not-allowed}
#sub .op .nm{font-size:13.5px;font-weight:700;color:var(--fg-1)}
#sub .op .sb{font-size:10px;color:var(--fg-3);display:block;margin-top:2px}
#sub .op .qt{margin-left:auto;font-size:10.5px;color:var(--fg-3);white-space:nowrap}
#btRep{font-variant-numeric:tabular-nums}
#btRep b{color:var(--brand-orange)}
.medlist{display:flex;flex-direction:column;gap:8px}
.med{display:flex;align-items:center;gap:13px;background:var(--bg-elevated);
  border:1px solid var(--border);border-radius:10px;padding:11px 14px}
.med:hover{border-color:var(--brand-orange)}
.med .ab{flex:1;display:flex;flex-direction:column;gap:2px;cursor:pointer;min-width:0}
.med .nm{font-size:13.5px;font-weight:700;color:var(--fg-1)}
.med .sb{font-size:10.5px;color:var(--fg-3)}
.med .pc{font-size:19px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--fg-1);
  min-width:74px;text-align:right}
.med .dl{font-size:10px;color:var(--fg-3);min-width:66px;text-align:right}
.med .ed-bt{background:none;border:1px solid var(--border);color:var(--fg-3);
  border-radius:7px;padding:5px 9px;font-size:14px;line-height:1;cursor:pointer}
.med .ed-bt:hover{border-color:var(--brand-orange);color:var(--brand-orange)}
.med.aberta{border-color:var(--brand-orange);border-style:dashed}
/* o apagar fica FORA do card, para nao ser clicado sem querer junto com a medição */
/* na sidebar o cartao e uma linha so: data · avanco, e as acoes discretas ao lado */
#sbMed .med{display:flex;align-items:center;gap:0;padding:9px 11px;min-height:44px}
/* o cartao em aberto nao tem botao de editar; a altura minima iguala os dois */
#sbMed .med .ab{flex:1;flex-direction:row;align-items:baseline;gap:6px;
  font-variant-numeric:tabular-nums;min-width:0}
#sbMed .med .dt{font-size:12.5px;font-weight:700;color:var(--fg-1);white-space:nowrap}
#sbMed .med .pt{color:var(--fg-3);font-size:11px}
#sbMed .med .av{font-size:12.5px;font-weight:700;color:var(--fg-2);white-space:nowrap}
#sbMed .med.sel{border-color:var(--brand-orange);background:var(--sel)}
#sbMed .med.sel .dt, #sbMed .med.sel .av{color:var(--brand-orange)}
#sbMed .med .ed{margin-left:6px}
#sbMed .medrow{gap:4px}
#sbMed .medrow > .del, #sbMed .med .ed-bt{width:24px;height:24px;padding:0;flex:none;
  font-size:12px;line-height:1;opacity:0;transition:opacity .12s}
#sbMed .medrow:hover > .del, #sbMed .medrow:hover .ed-bt{opacity:1}
#sbMed .medrow > .vazio-del{width:0}
.medrow{display:flex;align-items:center;gap:8px}
.medrow > .med{flex:1;min-width:0}
.medrow > .del{background:none;border:1px solid var(--border);color:var(--fg-3);
  border-radius:7px;padding:6px 10px;font-size:15px;line-height:1;cursor:pointer;flex:none}
.medrow > .del:hover{border-color:var(--pilar);color:var(--pilar)}
.medrow > .vazio-del{width:37px;flex:none}
#discNova{margin-top:14px}
.vazio{font-size:12px;color:var(--fg-3);padding:16px 2px}

/* diálogo de exclusão */
#dlg{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.62);display:none;
  align-items:center;justify-content:center;padding:20px}
#dlg.on{display:flex}
#dlg .cx{background:var(--bg-elevated);border:1px solid var(--border);border-radius:13px;
  padding:22px;max-width:430px;width:100%;box-shadow:var(--shadow-1)}
#dlg h3{margin:0 0 9px;font-size:16px;color:var(--fg-1)}
#dlg p{margin:0 0 13px;font-size:12.5px;color:var(--fg-2);line-height:1.6}
#dlg code{background:var(--bg-page);border:1px solid var(--border);border-radius:6px;
  padding:2px 7px;font-size:13px;color:var(--brand-orange);font-weight:700;letter-spacing:.06em}
#dlg input{width:100%;background:var(--bg-page);color:var(--fg-1);border:1px solid var(--border);
  border-radius:8px;padding:9px 11px;font-size:13.5px;font-family:inherit;letter-spacing:.06em}
#dlg input:focus{outline:none;border-color:var(--brand-orange)}
#dlg .bts{display:flex;gap:9px;justify-content:flex-end;margin-top:15px}
#dlgOk:disabled{opacity:.4;cursor:not-allowed}
#dlgOk:not(:disabled){border-color:var(--pilar);color:var(--pilar)}

/* ---------- matriz de medição ---------- */
#matriz{position:absolute;inset:0;z-index:55;background:var(--bg-page);overflow:auto;
  display:none;flex-direction:column}
#matriz.on{display:flex}
#matriz header{background:var(--bg-chrome);border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:6}
#matriz .corpo{padding:14px 16px 40px}
#mtTopo{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-end;margin-bottom:12px}
#mtTopo .bloco{display:flex;flex-direction:column;gap:3px}
#mtTopo label{font-size:9.5px;text-transform:uppercase;letter-spacing:.13em;color:var(--fg-3);font-weight:700}
#mtTopo input[type=date],#mtTopo input[type=text]{background:var(--bg-elevated);color:var(--fg-1);
  border:1px solid var(--border);border-radius:7px;padding:6px 9px;font-size:12.5px;
  font-family:inherit;min-width:150px}
#mtTopo input:focus{outline:none;border-color:var(--brand-orange)}
#mtTopo .kpi b{font-size:26px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--fg-1)}
#mtTopo .kpi span{font-size:9.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--fg-3);font-weight:700}
.tabwrap{overflow:auto;border:1px solid var(--border);border-radius:10px;background:var(--bg-elevated);
  max-height:calc(100vh - 220px)}
table.mt{border-collapse:separate;border-spacing:0;font-size:11px;width:max-content;min-width:100%}
table.mt th,table.mt td{border-right:1px solid var(--border);border-bottom:1px solid var(--border);
  padding:3px 5px;text-align:center;white-space:nowrap}
table.mt thead th{position:sticky;top:0;background:var(--bg-chrome);z-index:3;font-weight:700;
  font-size:9.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--fg-2)}
table.mt thead tr:nth-child(2) th{top:26px}
table.mt th.pav,table.mt td.pav{position:sticky;left:0;background:var(--bg-chrome);z-index:4;
  text-align:left;font-weight:700;min-width:118px;color:var(--fg-1);font-size:11px}
table.mt thead th.pav{z-index:5}
table.mt td.cel{cursor:pointer;font-variant-numeric:tabular-nums;min-width:38px;
  color:var(--fg-2);transition:filter .1s}
table.mt td.cel:hover{filter:brightness(1.35)}
table.mt td.tot{font-weight:800;font-variant-numeric:tabular-nums;background:var(--bg-chrome);
  color:var(--fg-1);min-width:52px}
table.mt th.gcat{border-left:2px solid var(--border)}
table.mt td.gcat{border-left:2px solid var(--border)}
table.mt tr.linha:hover td.pav{color:var(--brand-orange)}
table.mt td.area{font-variant-numeric:tabular-nums;color:var(--fg-3);min-width:64px;font-size:10px}
.mt-leg{display:flex;gap:14px;flex-wrap:wrap;margin-top:9px;font-size:10.5px;color:var(--fg-3)}
.mt-leg i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:4px;
  vertical-align:-1px;border:1px solid var(--border)}
#mtAviso{margin-top:10px;font-size:11px;color:var(--brand-orange-amber);
  border:1.5px dashed var(--brand-orange);border-radius:8px;padding:7px 11px;line-height:1.5}

/* ---------- filtros em checkbox ---------- */
.filtros.chk{display:flex;flex-direction:column;gap:2px}
.filtros.chk label{display:flex;align-items:center;gap:7px;cursor:pointer;
  font-size:12px;color:var(--fg-2);padding:2px 1px;user-select:none}
.filtros.chk label:hover{color:var(--fg-1)}
.filtros.chk input{appearance:none;width:14px;height:14px;flex:0 0 14px;border-radius:4px;
  border:1.5px solid var(--border);background:var(--bg-elevated);cursor:pointer;position:relative}
.filtros.chk input:checked{background:var(--brand-orange);border-color:var(--brand-orange)}
.filtros.chk input:checked::after{content:"";position:absolute;left:4px;top:1px;width:3px;height:7px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(43deg)}
.filtros.chk .cor{display:inline-block;width:9px;height:9px;border-radius:2px;flex:0 0 9px}

/* ---------- menu de projetos ---------- */
#menuProj{position:absolute;inset:0;z-index:60;background:var(--bg-page);overflow-y:auto;
  display:none;flex-direction:column}
#menuProj.on{display:flex}
#menuProj header{background:var(--bg-chrome);border-bottom:1px solid var(--border)}
#menuProj .corpo{padding:26px 22px;max-width:1000px;margin:0 auto;width:100%}
#menuProj h2{font-size:10px;text-transform:uppercase;letter-spacing:.16em;color:var(--fg-3);
  margin:0 0 14px;font-weight:700}
.grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.proj{background:var(--bg-elevated);border:1px solid var(--border);border-radius:12px;
  padding:16px 18px;cursor:pointer;box-shadow:var(--shadow-1);text-align:left;
  display:flex;flex-direction:column;gap:11px;transition:border-color .12s,transform .12s}
.proj:hover{border-color:var(--brand-orange);transform:translateY(-2px)}
.proj .obra{font-size:9.5px;text-transform:uppercase;letter-spacing:.14em;color:var(--brand-orange);
  font-weight:700}
.proj .nome{font-size:16px;font-weight:800;line-height:1.2;color:var(--fg-1)}
.proj .pav{font-size:11px;color:var(--fg-3);margin-top:-6px}
.proj .num{display:flex;justify-content:space-between;align-items:baseline}
.proj .num b{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--fg-1)}
.proj .num span{font-size:9.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--fg-3);
  font-weight:700}
.proj .pecas{font-size:10.5px;color:var(--fg-3);font-variant-numeric:tabular-nums;
  display:flex;gap:12px;flex-wrap:wrap}
.proj .pecas i{font-style:normal}
.proj .aviso-p{font-size:10px;color:var(--brand-orange-amber);border:1.5px dashed var(--brand-orange);
  border-radius:7px;padding:4px 8px;letter-spacing:.04em;font-weight:700;text-transform:uppercase}
#btVoltar{font-size:14px;padding:7px 11px;line-height:1}

@media (max-width:1024px){
  #app{grid-template-columns:0 1fr 0}
  #app.aberto{grid-template-columns:0 1fr var(--painel)}
  /* o bloco de contencao e a area do grid (linha 2), que ja comeca embaixo do header:
     top:0 cola nele em qualquer altura, inclusive quando o header quebra em duas linhas */
  #app aside{position:absolute;top:0;bottom:0;left:0;width:290px;z-index:30;
    transform:translateX(-100%);transition:transform .2s ease;box-shadow:var(--shadow-2)}
  #app aside.abre{transform:none}
  #menu{display:inline-flex}
}
@media (max-width:760px){
  :root{--painel:100%}
  #app.aberto{grid-template-columns:0 0 100%}
  header h1{font-size:11.5px}
  header .obra{display:none}
}
/* A faixa e um item de flex no topo do body: empurra as telas por layout, seja qual for
   a altura dela. Nao ha altura medida em codigo — o texto pode quebrar em quantas linhas
   quiser que o resto desce junto. z-index sobe a sombra por cima do header. */
#faixas{flex:none;position:relative;z-index:70;display:flex;flex-direction:column}
#faixaEd{display:none;
  background:var(--pilar);color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.06em;
  padding:7px 14px;text-align:center;box-shadow:0 2px 10px rgba(0,0,0,.3)}
#faixaEd.on{display:block}
#faixaEd button{margin-left:12px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.5);
  color:#fff;border-radius:6px;padding:2px 9px;font-size:10.5px;cursor:pointer;font-weight:700}
.med .ed{font-size:9.5px;font-weight:800;letter-spacing:.08em;padding:2px 6px;border-radius:5px;
  background:var(--pilar);color:#fff;margin-left:7px;vertical-align:middle}
.audlist{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.aud{background:var(--bg-elevated);border:1px solid var(--border);border-left:3px solid var(--pilar);
  border-radius:8px;padding:9px 12px;font-size:11px;color:var(--fg-2);line-height:1.5}
.aud b{color:var(--fg-1)}
.aud .qd{font-size:10px;color:var(--fg-3)}
tr.soVer td { opacity:.72 }
tr.soVer td.cel { cursor:not-allowed }
.tagver { font-size:10px; padding:1px 5px; border-radius:6px; margin-left:6px;
          background:var(--viga); color:#fff; vertical-align:middle }
#faixaVer{display:none;
  background:var(--viga);color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.06em;
  padding:7px 14px;text-align:center;box-shadow:0 2px 10px rgba(0,0,0,.3)}
#faixaVer.on{display:block}
tr.semPlanta td { opacity:.5 }
tr.semPlanta td.cel { cursor:not-allowed }
.tagsp { font-size:10px; padding:1px 5px; border-radius:6px; margin-left:6px;
         background:var(--bg-3); color:var(--fg-3); vertical-align:middle }

/* ---------- login (login.js) ---------- */
/* acima de tudo (dlg=80, sub=78): sem sessão ninguém toca no app. O fundo é a
   vitrine de marca (escura nos dois temas, como a home); o cartão segue os tokens
   e por isso troca com o tema. */
#login{position:fixed;inset:0;z-index:200;overflow:hidden}
/* quem rola é o miolo, não o #login: assim o brilho da vitrine fica parado e o
   formulário sobe quando o teclado do celular abre */
#login .lgRolo{position:absolute;inset:0;z-index:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
  display:flex;flex-direction:column;align-items:center;
  padding:max(20px,env(safe-area-inset-top)) 16px max(24px,env(safe-area-inset-bottom))}
/* margin:auto centra sem esconder o topo quando o conteúdo é maior que a tela */
#login .lgMiolo{margin:auto;width:100%;max-width:400px;display:flex;flex-direction:column;
  align-items:center;gap:22px}
#login .logo{font-size:22px;color:#fff}
#login .lgCard{width:100%;background:var(--bg-elevated);color:var(--fg-1);
  border:1px solid var(--border);border-radius:16px;padding:26px 24px 24px;
  box-shadow:var(--shadow-2);display:flex;flex-direction:column}
#login h1{margin:0 0 4px;font-size:20px;font-weight:800;letter-spacing:-.01em;color:var(--fg-1)}
#login .lgSub{margin:0 0 20px;font-size:12px;line-height:1.5;color:var(--fg-3)}
#login label{font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--fg-3);margin:0 0 6px}
/* 16px evita o zoom automático do iOS ao focar; 48px é alvo de toque confortável */
#login input{width:100%;min-height:48px;background:var(--bg-page);color:var(--fg-1);
  border:1px solid var(--border-strong);border-radius:8px;padding:11px 13px;
  font:400 16px/1.3 'Montserrat','Segoe UI',sans-serif;margin-bottom:16px;
  transition:border-color .12s,box-shadow .12s}
#login input::placeholder{color:var(--fg-muted)}
#login input:focus{outline:none;border-color:var(--brand-orange);
  box-shadow:0 0 0 3px rgba(238,115,39,.22)}
#login .lgErro{display:none;margin:-4px 0 16px;padding:9px 12px;border-radius:8px;
  background:rgba(196,78,69,.12);border:1px solid var(--red);color:var(--red);
  font-size:12px;line-height:1.5;font-weight:600}
#login .lgErro.on{display:block}
/* único botão cheio do app: aqui ele é a ação, não um filtro */
#login button{width:100%;min-height:48px;background:var(--brand-orange);color:#fff;
  border:1px solid var(--brand-orange);border-radius:8px;padding:12px 16px;
  font:700 13.5px 'Montserrat','Segoe UI',sans-serif;letter-spacing:.04em;
  transition:background .12s,border-color .12s,opacity .12s}
#login button:hover:not(:disabled){background:var(--brand-orange-deep);border-color:var(--brand-orange-deep);color:#fff}
#login button:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(238,115,39,.35)}
#login button:disabled{opacity:.6;cursor:wait}
#login .lgRodape{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;opacity:.42}
@media (max-width:420px){
  #login .lgCard{padding:22px 18px 20px;border-radius:14px}
  #login .logo{font-size:20px}
}

/* ---------- celular: cabeçalho da planta ---------- */
/* em tela estreita o título não cabe ao lado dos botões; os botões importam mais */
@media (max-width:560px){
  #app header h1{display:none}
}

/* ---------- diálogo de último recurso: cabe no celular com o teclado aberto ---------- */
#dlg{overflow:auto}
#dlg .cx{max-height:calc(100dvh - 40px);overflow:auto}
#dlg textarea{width:100%;min-height:72px;background:var(--bg-page);color:var(--fg-1);border:1px solid var(--border);
  border-radius:8px;padding:9px 11px;font:inherit;font-size:13.5px;margin-bottom:9px;resize:vertical;box-sizing:border-box}