/* ORBIT Empresa · paginas/ferramentas.css — as Ferramentas (23/10): a página dos cartões e o quadro de desenho.

   Só o que é desta área, por cima dos componentes do sistema visual (o-cartao, o-btn, o-menu, o-pagina-titulo…), que não
   se redefinem aqui. Todas as classes levam o prefixo fr-. As cores vêm das fichas (a das amostras, --fr-cor, põe-a o JS
   pelo CSSOM); as medidas seguem a escala 4/8; no telemóvel (até 53,75 em, ou toque deitado com pouca altura), os alvos
   têm 44 px (o --ctl da casa) e a barra do quadro leva só seis botões. */

/* ── a página: os cartões ──────────────────────────────────────────────────────────────────────────────────────────── */
/* a linha de onde fica guardado: o ícone ao centro da primeira linha do texto (que parte em duas num telemóvel pequeno) */
.fr-nota { display: flex; align-items: flex-start; gap: var(--e-2); margin: 0; color: var(--ink-3); font-size: var(--t-12); line-height: 1.5; }
.fr-nota .o-ic { flex: none; margin-top: 2px; }

/* ── o quadro de desenho: a página inteira, entre o topo e o fundo do ecrã (no telemóvel, até à barra de baixo) ──────── */
.fr-pagina-quadro {
  display: flex; flex-direction: column;
  height: calc(100vh - var(--topo-alt)); height: calc(100dvh - var(--topo-alt));
  padding-top: var(--e-4); padding-bottom: var(--e-4);
}
.fr-quadro { display: flex; flex: 1 1 auto; flex-direction: column; gap: var(--e-3); min-height: 0; }
.fr-cabeca { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--e-2); min-width: 0; }
.fr-titulo { min-width: 0; overflow-wrap: anywhere; }
.fr-onde { grid-column: 2; margin: 0; color: var(--ink-3); font-size: var(--t-13); line-height: 1.5; }

/* a barra: as ferramentas, as cores, as grossuras, desfazer e refazer e, no fim, o resto */
/* (o toque duplo num botão, como «Desfazer» duas vezes, nunca aproxima o ecrã) */
.fr-barra { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-4); min-width: 0; touch-action: manipulation; }
.fr-grupo { display: flex; align-items: center; gap: var(--e-1); }
.fr-fim { margin-left: auto; }
.fr-bt .o-ic { width: 18px; height: 18px; }
/* a amostra de uma cor (o círculo) e a grossura (o ponto) */
.fr-amostra {
  display: block; flex: none; width: 16px; height: 16px; border-radius: 999px;
  background: var(--fr-cor, var(--ink)); box-shadow: inset 0 0 0 1px var(--linha-2);
}
.fr-amostra[data-espessura="0"] { width: 12px; height: 12px; }
.fr-amostra[data-espessura="2"] { width: 20px; height: 20px; }
.fr-ponto { display: block; flex: none; border-radius: 999px; background: currentColor; }
.fr-ponto--0 { width: 4px; height: 4px; }
.fr-ponto--1 { width: 8px; height: 8px; }
.fr-ponto--2 { width: 14px; height: 14px; }
/* «Cor e traço» no telemóvel: as cores numa fila e as grossuras noutra */
.fr-traco-fila { display: flex; align-items: center; gap: 2px; }
.fr-traco-fila + .fr-traco-fila { margin-top: var(--e-1); padding-top: var(--e-1); border-top: 1px solid var(--linha); }
/* «Mais ações»: o que ainda não se pode fazer fica à vista, apagado (como os botões da casa) */
.fr-mais-painel .o-menu-item:disabled { opacity: .55; cursor: default; }
.fr-mais-painel .o-menu-item:disabled:hover { background: none; }

/* o quadro: o canvas ocupa a caixa toda e o dedo nele desenha (nunca rola a página nem aproxima o ecrã) */
.fr-tela {
  position: relative; flex: 1 1 auto; min-height: 160px; overflow: hidden;
  border: 1px solid var(--linha); border-radius: var(--r-cartao); background: var(--void);
}
.fr-canvas {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%;
  touch-action: none; cursor: crosshair; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.fr-canvas[data-ferramenta="texto"] { cursor: text; }
.fr-canvas.fr-a-mover { cursor: grabbing; }

/* ── telemóvel: a barra numa fila de seis, os painéis de «Cor e traço» e de «Mais ações» à largura da barra ───────────── */
@media (max-width: 53.75em), (pointer: coarse) and (max-height: 31.25em) {
  .fr-pagina-quadro { padding-top: var(--e-3); padding-bottom: calc(var(--nav-ocupa) + var(--e-3)); }
  .fr-quadro { gap: var(--e-2); }
  .fr-onde { grid-column: 1 / -1; font-size: var(--t-12); }
  .fr-barra { flex-wrap: nowrap; justify-content: space-between; gap: var(--e-1); }
  .fr-ancora { position: static; }
  .fr-traco-painel { left: 0; right: auto; width: max-content; min-width: 0; max-width: 100%; }
  .fr-mais-painel { left: auto; right: 0; }
}