/* ORBIT Empresa · paginas/ferramentas.css — as Ferramentas (23/10): a página dos cartões, o quadro de desenho e (26/10/2026)
   os vários desenhos («Os teus desenhos») e os esqueletos (a lista, os cartões e a janela «Novo esqueleto»).

   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; }
}

/* ── os vários desenhos (26/10/2026): o nome do desenho aberto e «Os teus desenhos» ──────────────────────────────────── */
/* o nome na barra: encolhe com «…» (no telemóvel, numa linha só dele, por cima da barra) */
.fr-d-nome { max-width: 18rem; min-width: 0; justify-content: flex-start; }
.fr-d-nome-texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-d-nome .fr-d-nome-seta { flex: none; color: var(--ink-3); }
.fr-d-linha .fr-d-nome { max-width: 100%; }
/* a folha: «Novo desenho», a lista e a linha do estado */
.fr-d-corpo { display: flex; flex-direction: column; gap: var(--e-3); }
.fr-d-acoes { margin: 0; }
.fr-d-lista { display: flex; flex-direction: column; gap: var(--e-1); margin: 0; padding: 0; list-style: none; }
.fr-d-item { display: flex; align-items: center; gap: var(--e-1); min-width: 0; }
.fr-d-abrir {
  display: flex; flex: 1 1 auto; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px;
  min-width: 0; min-height: 44px; padding: var(--e-2) var(--e-3);
  border: 1px solid transparent; border-radius: var(--r); background: none; color: var(--ink); text-align: left; cursor: pointer;
}
.fr-d-abrir:hover { background: var(--hover); }
.fr-d-abrir[aria-current="true"] { border-color: var(--accent-linha); background: var(--accent-fundo); }
.fr-d-item-nome { max-width: 100%; font-weight: 600; font-size: var(--t-14); line-height: 1.35; overflow-wrap: anywhere; }
.fr-d-item-quando { color: var(--ink-3); font-size: var(--t-12); line-height: 1.4; }
.fr-d-ancora { flex: none; }
.fr-d-estado { margin: 0; padding-top: var(--e-2); border-top: 1px solid var(--linha); }

/* ── os esqueletos (26/10/2026): a lista em cartões, até três colunas no computador e uma no telemóvel ────────────────── */
.fr-e-cabeca { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--e-3) var(--e-4); margin-bottom: var(--e-6); }
.fr-e-cabeca .fr-cabeca { flex: 1 1 20rem; }
.fr-e-acoes { flex: none; margin: 0; }
.fr-e-carregar, .fr-e-erro { margin: 0 0 var(--e-4); }
.fr-e-grelha { grid-template-columns: minmax(0, 1fr); }
.fr-e-cartao { display: flex; flex-direction: column; gap: var(--e-3); min-width: 0; }
.fr-e-topo { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--e-2) var(--e-3); min-width: 0; }
.fr-e-nome { flex: 1 1 10rem; min-width: 0; overflow-wrap: anywhere; }
.fr-e-estado { flex: none; }
.fr-e-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1) var(--e-2); min-height: 20px; margin: 0; color: var(--ink-3); font-size: var(--t-13); line-height: 1.45; }
.fr-e-ler { flex: none; }
.fr-e-nota { margin: 0; }
.fr-e-acoes-cartao { margin-top: auto; }
.fr-e-ancora { margin-left: auto; }
.fr-e-pedido { min-height: 120px; }
@media (min-width: 40em) { .fr-e-grelha { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72em) { .fr-e-grelha { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ── telemóvel: os esqueletos numa coluna, com o «Novo esqueleto» à largura toda ────────────────────────────────────── */
@media (max-width: 53.75em), (pointer: coarse) and (max-height: 31.25em) {
  .fr-e-cabeca { margin-bottom: var(--e-4); }
  .fr-e-acoes, .fr-e-novo { width: 100%; }
  .fr-d-linha { margin: 0; }
}