/* ============================================================
   O DESENHO EM CINZA
   ------------------------------------------------------------
   A gramática do montador.js virando caixinha na tela.

   Ele mora num arquivo próprio porque serve DUAS telas: o
   montador, dentro do painel, e o visualizador em /ver/, que o
   médico abre sem login. Se fossem duas cópias, um conserto numa
   delas deixaria de valer na outra, e o médico veria uma página
   diferente da que o Victor montou.

   ------------------------------------------------------------
   NENHUMA COR DE MARCA ENTRA AQUI. Este é o único pedaço do
   sistema com paleta própria, e ela é de propósito neutra e
   fria, para não parecer parente do papel creme.

   O motivo: o desenho serve para conferir ORDEM e PESO, e cor de
   marca dentro dele engana das duas maneiras. Faz parecer pronto
   o que é esqueleto, e faz a cara da Mundo entrar no site do
   médico pela porta dos fundos.

   O banco de provas reprova se um token da marca aparecer aqui
   dentro.
   ============================================================ */
.mn-wf{
  --wf-fundo:#EEECE7; --wf-fio:#C7C3BA; --wf-bloco:#D8D4CC;
  --wf-forte:#ABA69C; --wf-tinta:#6E6960;
  background:var(--wf-fundo);border:1px solid var(--wf-fio);border-radius:2px;
  padding:5px;display:flex;flex-direction:column;gap:4px;overflow:hidden;
}
/* A altura do desenho de uma seção vem do montador.js, e é
   relativa: 1 e uma secao de conteudo normal, 0,22 e a tira de
   identificacao. Sem isso todas tinham a mesma altura e o desenho
   mentia sobre o peso de cada parte da pagina.

   O piso de 16px existe para uma tira continuar sendo clicavel e
   para as pecas dentro dela nao se esmagarem. */
.mn-wf--pagina{height:calc(16px + var(--mn-alt,1) * 74px);aspect-ratio:auto}
.mn-wf--mini{width:96px;flex:none;aspect-ratio:4/3;padding:3px;gap:2px}
.mn-wf--imp{width:150px;flex:none;aspect-ratio:4/3}

.mn-f{display:flex;gap:4px;min-height:0}
.mn-c{display:flex;flex-direction:column;gap:3px;min-width:0;min-height:0}
.mn-c--centro{align-items:center}
.mn-c--centro .mn-p{width:100%}
.mn-c--centro .mn-p--t{width:86%}
.mn-c--centro .mn-p--t2{width:62%}
.mn-c--centro .mn-p--x{width:76%}
.mn-c--centro .mn-p--x2{width:52%}
.mn-c--centro .mn-p--m{width:32%}
.mn-c--centro .mn-p--b{width:36%}

.mn-p{background:var(--wf-bloco);border-radius:1px;flex-shrink:0}
.mn-p--t{height:7px;background:var(--wf-forte)}
.mn-p--t2{height:5px;background:var(--wf-forte);width:72%}
.mn-p--x{height:2.5px}
.mn-p--x2{height:2.5px;width:62%}
.mn-p--m{height:0;width:38%;border-top:2.5px dashed var(--wf-forte);background:none;border-radius:0}
.mn-p--b{height:8px;width:40%;background:var(--wf-tinta);border-radius:1.5px}
.mn-p--b2{height:8px;width:28%;background:none;border:1px solid var(--wf-forte)}
.mn-p--n{height:13px;width:26%;background:var(--wf-forte)}
.mn-p--g{height:9px;width:9px;background:var(--wf-forte);border-radius:1px}

.mn-p--i,.mn-p--r,.mn-p--mapa{
  flex:1 1 auto;min-height:12px;border:1px solid var(--wf-fio);
  background-image:repeating-linear-gradient(-45deg,transparent 0 3px,var(--wf-fio) 3px 4px);
}
.mn-p--mapa{
  background-image:repeating-linear-gradient(0deg,transparent 0 7px,var(--wf-fio) 7px 8px),
                   repeating-linear-gradient(90deg,transparent 0 9px,var(--wf-fio) 9px 10px);
}
.mn-p--vazio{flex:1 1 auto}

.mn-p--c{
  flex:1 1 auto;min-height:12px;border:1px solid var(--wf-fio);border-radius:1.5px;
  display:flex;flex-direction:column;gap:3px;padding:4px;
}
.mn-p--c::before{content:'';height:4px;background:var(--wf-forte);border-radius:1px}
.mn-p--c::after{content:'';height:2.5px;width:70%;background:var(--wf-bloco);border-radius:1px}

.mn-p--l{flex:1 1 auto;min-height:12px;display:flex;flex-direction:column}
.mn-p--l span{flex:1;border-bottom:1px dotted var(--wf-fio);display:flex;align-items:center}
.mn-p--l span::before{content:'';height:2.5px;width:60%;background:var(--wf-bloco);border-radius:1px}
.mn-p--l span:last-child{border-bottom:0}

.mn-p--tl{flex:1 1 auto;min-height:12px;position:relative;padding-left:11px;display:flex;flex-direction:column}
.mn-p--tl::before{content:'';position:absolute;left:4px;top:4px;bottom:4px;width:1px;background:var(--wf-fio)}
.mn-p--tl span{flex:1;display:flex;align-items:center;position:relative}
.mn-p--tl span::before{
  content:'';position:absolute;left:-9px;width:5px;height:5px;border-radius:50%;
  background:var(--wf-fundo);border:1.5px solid var(--wf-forte);
}
.mn-p--tl span::after{content:'';height:2.5px;width:58%;background:var(--wf-bloco);border-radius:1px}

.mn-p--f{flex:1 1 auto;min-height:12px;display:flex;flex-direction:column;gap:3px}
.mn-p--f span{flex:1;border:1px solid var(--wf-fio);border-radius:1px}

.mn-sobre{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:3px;padding:5px}
.mn-sobre>span{background:var(--wf-forte);border-radius:1px;display:block}
.mn-s-t{height:6px;width:74%}
.mn-s-x{height:2.5px;width:52%}
.mn-s-b{height:7px;width:32%;background:var(--wf-tinta)}

.mn-flut{position:relative}
.mn-cartao{
  position:absolute;left:8%;top:16%;width:44%;bottom:16%;
  background:var(--wf-fundo);border:1px solid var(--wf-fio);border-radius:2px;
  display:flex;flex-direction:column;gap:3px;padding:5px;
}
.mn-cartao span{height:2.5px;background:var(--wf-bloco);border-radius:1px}
.mn-cartao span:first-child{height:5px;width:70%;background:var(--wf-forte)}