/* Editor de desenho da medição (Etapa do Desenho).
   Arquivo próprio pelo mesmo motivo do JS: é um subsistema com tela própria,
   e misturar em medicao.css faria os dois crescerem juntos sem precisar.

   A GEOMETRIA DO CANVAS NÃO MORA AQUI, de propósito -- ela é escrita em
   JavaScript, nos atributos `width`/`height` e no `style` do elemento
   (medicao-desenho.js, medDesMontarTela). Os pontos são calculados dividindo
   pela caixa medida: se o tamanho dependesse desta folha e ela não carregasse,
   a caixa viria zero, a divisão daria NaN e o traço sumiria do papel sem
   ninguém saber por quê. Aqui ficam só cor, moldura e barra. */

.med-des-tela {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--bg);
  overflow: auto;
}

.med-des-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 980px;
}
.med-des-espaco { flex: 1 1 auto; }

/* A faixa horizontal que poe a barra lateral AO LADO do desenho -- a
   `.med-des-tela` e uma coluna, e sem esta faixa a lateral empilharia acima da
   moldura, virando uma segunda barra de topo. */
.med-des-area {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

/* A BARRA LATERAL (2026-09-01): cor e espessura ao alcance do polegar, sem
   subir a mao ate o topo no meio de um croqui.
   A largura casa com MED_DES_LATERAL_PX em medicao-desenho.js, que e o que o
   calculo da caixa desconta -- se uma mudar sem a outra, o desenho passa a
   crescer por baixo dos botoes. */
.med-des-lateral {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 56px;
  flex: 0 0 auto;
  padding: 8px 0;
  background: var(--card2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.med-des-lateral-risco {
  width: 28px;
  height: 1px;
  background: var(--line);
}

/* A roda de cor: mesmo alvo de 40 px das predefinidas, e redonda como elas --
   quem olha a coluna ve sete circulos, nao seis circulos e um retangulo. O
   `::-webkit-color-swatch` e o quadrado interno que o navegador desenha; sem
   arredondar os dois, sobra canto quadrado dentro do circulo. */
.med-des-cor-livre {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 2px solid var(--line);
  border-radius: 50%;
  background: none;
  cursor: pointer;
  overflow: hidden;
}
.med-des-cor-livre::-webkit-color-swatch-wrapper { padding: 0; }
.med-des-cor-livre::-webkit-color-swatch { border: none; border-radius: 50%; }
.med-des-cor-livre::-moz-color-swatch { border: none; border-radius: 50%; }

/* A espessura vira um PONTO do tamanho dela, nao a palavra "Fino"/"Grosso":
   numa coluna de 56 px o texto nao cabe sem encolher o alvo de toque, e o
   ponto diz a mesma coisa mais rapido. O nome continua no `aria-label`.
   O botao mantem os 40 px -- o alvo e do dedo, nao do ponto. */
.med-des-esp {
  width: 40px;
  height: 40px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--card);
  cursor: pointer;
}
.med-des-esp-ponto {
  display: block;
  border-radius: 50%;
  background: var(--tx);
}

/* O TRILHO DE PAGINAS (etapa 3). Fica do lado OPOSTO da barra de cor, e isso e
   deliberado: cor se troca no meio do traco, pagina se troca entre um desenho e
   outro -- juntas, a mao esbarraria numa querendo a outra.
   A largura casa com MED_DES_TRILHO_PX em medicao-desenho.js, que e o que a
   conta da caixa desconta. Se uma mudar sem a outra, o desenho cresce por baixo
   das miniaturas. */
.med-des-trilho {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 84px;
  flex: 0 0 auto;
  max-height: 78vh;
  overflow-y: auto;
  padding: 8px 4px;
  background: var(--card2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

/* A miniatura mantem a PROPORCAO DA FOLHA (194/250), nao um quadrado: pagina
   quadrada no trilho e retangular na tela ensina a esperar a coisa errada. */
.med-des-mini {
  position: relative;
  width: 68px;
  height: 88px;
  padding: 0;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  cursor: pointer;
  overflow: hidden;
}
.med-des-mini.sel {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
}
.med-des-mini-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.med-des-mini-vazia { display: block; width: 100%; height: 100%; }
/* O numero da pagina fica SOBRE a miniatura, num canto: fora dela cada pagina
   ocuparia mais altura e caberiam menos no trilho, que e o que se quer ver de
   um olhar. Fundo proprio porque a miniatura e branca -- numero preto sobre
   traco preto some. */
.med-des-mini-n {
  position: absolute;
  left: 2px;
  bottom: 2px;
  min-width: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--card);
  color: var(--tx);
  font-size: 11px;
  line-height: 16px;
  text-align: center;
}
/* O "+" NAO e branco: ele nao e uma pagina, e nao pode parecer uma folha vazia
   -- o medidor tocaria nele achando que abre a pagina que faltou. */
.med-des-mini-nova {
  background: var(--card);
  color: var(--mut);
  font-size: 28px;
  line-height: 1;
  border-style: dashed;
}

/* 40 px de lado, não 26: é botão de dedo com luva em pé no andaime, e o alvo
   de toque é o que decide se a cor certa é escolhida na primeira tentativa. */
.med-des-cor {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 2px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
}
/* O aceso da BARRA DE FERRAMENTAS entrou aqui em 2026-09-01 no lugar de
   `[data-med-des-borracha]`: a borracha virou uma ferramenta entre as outras
   (ver MED_DES_FERRAMENTAS), e um seletor so para ela deixaria reta, retangulo
   e elipse acesas em lugar nenhum -- a barra nao diria o que a caneta vai
   fazer, que e a unica coisa que ela tem para dizer. */
.med-des-cor.sel,
.med-des-esp.sel,
[data-med-des-ferr].sel {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
}

/* A MOLDURA é branca sempre, inclusive no tema escuro -- e isto é decisão, não
   esquecimento: o desenho vai para o PAPEL, que é branco. Desenhar sobre fundo
   escuro e imprimir sobre fundo claro faria o medidor escolher a cor errada,
   e ele só descobriria na folha que já saiu da impressora. */
.med-des-moldura {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex: 0 0 auto;
}

/* O fundo (a foto anotada) fica ATRÁS do canvas, nunca pintado dentro dele --
   ver o comentário de medDesMontarTela. `contain` e não `cover`: cortar a foto
   esconderia justamente a borda do vão, que é o que se costuma querer marcar. */
.med-des-fundo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.med-des-canvas {
  position: relative;
  display: block;
  touch-action: none;
  cursor: crosshair;
}

/* ---------- a janela das duas opções (Tarefa 3) ---------- */
.med-des-escolha {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 20px;
  background: var(--scrim);
  overflow: auto;
}
.med-des-op {
  min-width: 260px;
  min-height: 72px;
  font-size: 17px;
  font-weight: 700;
}
.med-des-op-titulo {
  color: var(--mut);
  font-size: 13px;
}
.med-des-op-fotos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  max-width: 720px;
}
/* 132 px, maior que a miniatura de 104 px da galeria: aqui a foto não é
   lembrete, é ALVO -- ele precisa reconhecer qual vão é antes de tocar. */
.med-des-op-foto {
  width: 132px;
  height: 132px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  cursor: pointer;
  overflow: hidden;
}
.med-des-op-foto img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* A FAIXA QUE ROLA (mudanca 9, 2026-09-05) -- so a folha rola; a barra de
   cima, a lateral de cor e o trilho de paginas ficam fora dela.
   E o conserto estrutural do "nao conseguia voltar, ficava preso": ampliada, a
   folha rola dentro desta caixa e os botoes nao saem do lugar. Com a tela
   inteira rolando (como era ate aqui) o Cancelar e o Salvar subiam junto com o
   desenho e saiam do vidro.
   `min-width/min-height:0` porque item de flex nao encolhe abaixo do conteudo
   por padrao: sem os dois, a moldura ampliada estica a faixa em vez de rolar
   dentro dela, e a rolagem nunca aparece. */
.med-des-rolagem {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  /* `stretch` SO NESTE filho: a faixa e alinhada ao topo (`flex-start`) para a
     lateral de cor e o trilho terem a altura do conteudo, e sem este
     `align-self` a rolagem tambem teria -- ela cresceria junto com a folha
     ampliada em vez de rolar dentro da tela, e a parte de baixo do desenho
     ficaria fora do vidro sem rolagem nenhuma que a alcancasse. */
  align-self: stretch;
  overflow: auto;
}

/* A moldura CENTRALIZA quando cabe e ENCOSTA A ESQUERDA quando nao cabe --
   `margin` automatica em elemento de bloco resolve 0 no caso apertado, e a
   sobra fica toda do lado de la, alcancavel pela rolagem. Centralizar por
   flex/grid e o que nao serve aqui: `align-items:center` com item maior que a
   caixa poe metade da sobra do lado de CA, onde `scrollLeft` nao alcanca --
   parte do desenho ficaria inatingivel, que e o defeito que esta mudanca veio
   consertar e nao repetir. */
.med-des-moldura { margin: auto; }

/* A tela do editor deixa de rolar: quem rola agora e a faixa de dentro. */
.med-des-tela { overflow: hidden; }
.med-des-area { flex: 1 1 auto; min-height: 0; width: 100%; }

/* O PINCA DO NAVEGADOR fica DESLIGADO dentro do editor, e isso e deliberado:
   ele amplia a janela inteira, e numa tela `position:fixed` como esta a barra
   de botoes vai para fora do vidro sem deixar rolagem que a traga de volta --
   foi assim que o dono ficou preso. `pan-x pan-y` mantem o arrastar para rolar
   e tira so o ampliar; o ampliar existe aqui dentro, com botao de volta e
   pinca propria (medDesLigarPonteiro), que e o que o navegador nao tinha. */
.med-des-tela { touch-action: pan-x pan-y; }

/* Os tres botoes do zoom sao UM grupo: o de voltar fica no meio, entre o menos
   e o mais, porque e para la que a mao vai quando se perdeu. Larguras iguais
   para o dedo nao precisar mirar, e 44 px de alvo -- e botao de dedo de luva,
   igual as cores da lateral. */
.med-des-zoom { display: flex; align-items: center; gap: 4px; }
.med-des-zoom-b { min-width: 44px; min-height: 44px; }

/* A BARRA EM GRUPOS (mudança 11, 2026-09-05). O `gap` de dentro do grupo é
   menor que o de fora (4 contra 8 da `.med-des-barra`): é a proximidade que
   diz o que anda junto, e ela custa menos pixel e menos tinta que o
   separador. O separador só marca a divisão maior. */
.med-des-grupo { display: flex; align-items: center; gap: 4px; }
/* `--mut` a 45%, e NAO `--line`: medido numa previa antes de subir -- o
   `--line` (#232830) sobre o `--bg` (#0b0d10) da contraste de 1,4:1, e e a
   MESMA cor da borda dos proprios botoes. O risco ficava invisivel entre eles,
   e um separador que nao se ve nao separa nada: sobrava so o `gap`, que era o
   que ja existia antes desta mudanca. */
.med-des-sep {
  width: 1px;
  align-self: stretch;
  min-height: 28px;
  background: var(--mut);
  opacity: .45;
}

/* BOTÃO DE ÍCONE: 44×44, que é o alvo de dedo de luva -- esta ferramenta é
   usada EM OBRA, no tablet, e um alvo do tamanho do texto que ele substituiu
   trocaria clareza por erro de toque. O desenho a 22 px: metade do alvo, que
   é o que faz o ícone ler sem virar mancha.
   `padding: 0` porque `.btn.sm` traz o seu, e ele empurraria o desenho para
   fora do quadrado. */
.med-des-ic {
  width: 44px;
  height: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.med-des-ic svg { width: 22px; height: 22px; display: block; }