/* medicao.css — Medição em Obra (tela)
   Cortado de index.html por scripts/cortar-css.js. A ORDEM dos <link> no
   index.html é a ordem original do arquivo e não pode mudar: em CSS quem
   vem depois ganha. O grupo `css` da fumaça guarda isso. */
  /* ---------- Medição em Obra (Tarefa 4) ----------
     As regras de tela vêm de COMO SE MEDE, não de estética -- ver a spec:
     um campo selecionado por vez, visível de longe (tablet a um braço de
     distância, sol em cima, mão suja/com luva), alvos de toque grandes. */
  .med-cab{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px 18px}
  .med-cab-rot{display:block;color:var(--mut);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
  .med-cab-val{display:block;font-size:14.5px;font-weight:600;margin-top:2px;overflow-wrap:anywhere}

  .med-esq-row{display:flex;align-items:center;gap:14px;padding:14px 12px;border-top:1px solid var(--line);min-height:52px}
  .med-esq-row:first-child{border-top:0}
  .med-esq-row:hover{background:var(--card2)}
  .med-esq-tipo{font-weight:700;min-width:52px}
  .med-esq-info{flex:1;color:var(--mut);font-size:13px}
  .med-esq-progresso{font-size:12.5px;font-weight:700;padding:4px 10px;border-radius:20px;background:var(--card2);border:1px solid var(--line);white-space:nowrap}
  .med-esq-row.completo .med-esq-progresso{background:color-mix(in srgb,var(--green) 22%,var(--card2));border-color:var(--green);color:var(--green)}
  .med-esq-row.marcado .med-esq-progresso{background:color-mix(in srgb,var(--amber) 22%,var(--card2));border-color:var(--amber);color:var(--amber)}

  /* A barra de exibicao e filtro (2026-09-01). */
  .med-esq-barra{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;margin-bottom:6px}
  .med-esq-exib{display:flex;gap:6px}
  .med-esq-exib .btn.sel{border-color:var(--acc);color:var(--acc);
    background:color-mix(in srgb,var(--acc) 16%,var(--card2))}
  .med-esq-filtro{display:flex;align-items:center;gap:8px;color:var(--mut);font-size:12.5px;
    margin-left:auto}
  .med-esq-filtro .in{font-size:14px;padding:8px 10px}

  /* CARDS. `auto-fill` com minimo de 220px, e nao um numero fixo de colunas: a
     mesma tela serve o tablet em pe (uma coluna) e deitado (duas ou tres), e
     numero fixo espremeria o croqui a nada num dos dois. */
  .med-esq-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;padding-top:10px}
  .med-esq-card{display:flex;flex-direction:column;gap:8px;padding:10px;cursor:pointer;
    border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--card2)}
  .med-esq-card:hover{border-color:var(--acc)}
  .med-esq-card.completo{border-color:var(--green)}
  .med-esq-card.marcado{border-color:var(--amber)}
  .med-esq-card.completo .med-esq-progresso{background:color-mix(in srgb,var(--green) 22%,var(--card2));border-color:var(--green);color:var(--green)}
  .med-esq-card.marcado .med-esq-progresso{background:color-mix(in srgb,var(--amber) 22%,var(--card2));border-color:var(--amber);color:var(--amber)}
  /* Altura FIXA para o croqui: sem ela, cada card cresce conforme o desenho que
     recebeu e a grade vira uma escada -- e a esquadria sem croqui (caso real, a
     linha pode existir sem os bytes) encolheria o card ate ele nao parecer mais
     um cartao. */
  .med-esq-card-croqui{display:flex;align-items:center;justify-content:center;
    height:120px;border-radius:var(--radius-sm);background:var(--card);overflow:hidden}
  .med-esq-card-croqui .med-croqui-img{max-height:120px;width:auto;border:0;border-radius:0}
  .med-esq-card-corpo{display:flex;flex-direction:column;gap:4px}
  .med-esq-card-topo{display:flex;align-items:center;justify-content:space-between;gap:8px}
  .med-esq-card .med-esq-info{flex:none}
  .med-esq-amb{font-size:12px;color:var(--mut);text-transform:uppercase;letter-spacing:.05em}

  .med-trena{display:flex;align-items:center;flex-wrap:wrap;gap:12px}

  .med-leituras{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0}
  .med-leitura{display:flex;align-items:center;gap:8px;padding:10px 8px 10px 16px;border-radius:24px;background:var(--card2);border:1px solid var(--line);font-size:16px;font-weight:600}
  .med-leitura button{background:none;border:none;color:var(--mut);font-size:20px;line-height:1;cursor:pointer;padding:6px 10px}
  .med-leitura button:hover{color:var(--red)}
  /* `flex-wrap` (Task A4): o rodapé passou a aninhar #medProximoCampo dentro
     de `.med-manual`, junto do campo e do "Adicionar" -- sem quebra de linha,
     `.med-prox` largura:100% (abaixo) espreme o campo numérico a nada. Com
     quebra, o campo e o "Adicionar" ficam numa linha, e o botão grande de
     "Próximo campo" cai para a linha de baixo, do jeito largo que já era. */
  .med-manual{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
  /* REGRA PRÓPRIA PARA O `hidden`: o `display:flex` acima é do autor e vence o
     `display:none` que o navegador dá a `[hidden]` -- sem esta linha, esconder
     o painel pelo JS não esconde nada. Mesma armadilha que `base.css` já
     documenta em `.panel[hidden]`. */
  .med-manual[hidden]{display:none}
  .med-manual .in{font-size:20px;padding:14px 12px;flex:1}
  .med-manual .btn{font-size:16px;padding:0 22px}
  /* Alvo de toque generoso de propósito (achado 9): tablet num braço, trena
     no outro, em obra -- não dá para mirar fino. Mesma cor de ".btn.pri",
     só maior e ocupando a largura toda. */
  .med-prox{display:block;width:100%;margin-top:14px;padding:20px;font-size:19px;min-height:64px}

  .med-campo-un{display:flex;align-items:center;padding:0 10px;color:var(--mut);font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}

  /* Painel de escolhas (Tarefa 6 da ETAPA 2): um grupo por campo. .med-opcao
     leva embutidas as propriedades base que antes vinham de .med-campo (Task
     A5 apagou essa classe, e o botão parou de escrever o token) -- borda,
     fundo, cor, raio, fonte, cursor e o realce de hover -- porque o botão de
     opção é o único lugar que ainda usa esse visual. */
  .med-escolha-grupo{margin:0 0 18px}
  .med-escolha-grupo:last-child{margin-bottom:0}
  .med-escolha-grupo .med-campo-un{padding:0 0 6px}
  .med-escolha-opcoes{display:flex;flex-wrap:wrap;gap:8px}
  .med-opcao{border:1px solid var(--line);background:var(--card2);color:var(--tx);border-radius:var(--radius-sm);
    font:inherit;font-weight:700;text-align:center;cursor:pointer;flex:1 1 130px;min-height:46px;padding:10px 10px;font-size:14.5px}
  .med-opcao:hover{border-color:var(--acc)}
  .med-opcao.sel{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 18%,var(--card2));color:var(--acc)}
  .med-escolha-num{max-width:220px;font-size:16px;padding:12px 10px}

  /* A folha do item (Etapa A): cabeçalho uma vez no topo, depois uma seção
     por unidade -- desenho da Lista de Medição do CEM, o papel que quem
     mede já conhece. Nada de border-left colorido: a faixa da unidade
     marcada usa cor de texto, e a célula usa borda inteira em amber. */
  .med-folha-topo{display:grid;grid-template-columns:150px 1fr;gap:14px;padding-bottom:12px;border-bottom:1px solid var(--line)}
  /* .med-folha-croqui (a celula) fica sem CSS de proposito: sem croqui ela e
     uma div vazia sem borda nem altura minima, nao uma caixa vazia com
     contorno -- essa caixa vazia e o proprio defeito que a Etapa B veio
     evitar. A borda e o fundo do desenho vem de .med-croqui-img, so quando a
     imagem existe. background:#fff de proposito: o croqui e traco preto
     sobre fundo transparente e no tema escuro, sem fundo, o desenho some. */
  .med-croqui-img{max-width:100%;height:auto;display:block;border:1px solid var(--line);
    border-radius:var(--radius-sm);background:#fff}
  /* [hidden] TEM de vencer, mesmo motivo de #confCanvas (comentário acima,
     linha 511) e .conf-croqui (linha 502): sem esta regra, `display:block`
     cru vence o hidden do navegador e onerror="this.hidden=true" troca a
     propriedade sem esconder nada -- a imagem quebrada continua na tela. */
  .med-croqui-img[hidden]{display:none}
  .med-folha-nome{font-size:19px;font-weight:800;line-height:1.25;margin-bottom:6px}
  .med-folha-meta{display:flex;flex-wrap:wrap;gap:5px 16px;font-size:12.5px;color:var(--mut);margin-bottom:6px}
  .med-folha-esp{font-size:12.5px;color:var(--mut);line-height:1.5}
  .med-un-faixa{display:flex;align-items:center;gap:10px;margin:20px 0 10px;padding:8px 12px;border-radius:var(--radius-sm);background:var(--card2);font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
  .med-un-faixa .med-un-cont{margin-left:auto;font-weight:400;color:var(--mut);text-transform:none;letter-spacing:0;font-size:12px}
  .med-un-faixa.bad{color:var(--amber)}
  .med-medidas{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
  .med-celula{border:1px solid var(--line);background:var(--card2);color:var(--tx);border-radius:var(--radius-sm);
    padding:14px 12px;text-align:left;font:inherit;font-size:26px;font-weight:800;min-height:88px;cursor:pointer}
  .med-celula:hover{border-color:var(--acc)}
  .med-celula.sel{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 18%,var(--card2));color:var(--acc)}
  .med-celula.bad{border-color:var(--amber);color:var(--amber)}
  /* .bad tem a mesma especificidade de .sel e vem depois -- sozinho ele
     apaga a borda/cor de "selecionada" e sobra só o tom de fundo de 18%,
     ilegível num tablet ao sol. medidaAlterada marca as DUAS células da
     unidade, então isto não é raro: é o estado normal de todo item
     reimportado. Anel interno na cor de destaque, por cima do amber --
     a folha é o único indicador de onde a próxima leitura da trena cai, o
     rodapé da A4 não nomeia o campo selecionado. */
  .med-celula.sel.bad{box-shadow:inset 0 0 0 3px var(--acc)}
  .med-celula .mc-t{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);font-weight:700;margin-bottom:4px}
  .med-celula.sel .mc-t,.med-celula.bad .mc-t{color:inherit}
  .med-celula .mc-l{display:block;font-size:12.5px;font-weight:400;opacity:.75;margin-top:6px;line-height:1.4}
  .med-celula-aviso{color:var(--amber);font-size:12.5px;margin:-6px 0 12px}

  /* ---------- medida ACORDADA com o cliente (medicao.js, MED_ACORDADAS) ----------
     DEPOIS de .sel e de .bad de proposito: mesma especificidade, e quem vem
     depois ganha -- a cota que o cliente assumiu tem de se ler como tal mesmo
     quando a celula esta selecionada ou marcada por dispersao. O aviso em
     ambar continua saindo logo abaixo em .med-celula-aviso, entao nao se
     perde o que o .bad dizia. */
  .med-opcao.sel.acordada,.med-celula.acordada{border-color:var(--blue);
    background:color-mix(in srgb,var(--blue) 18%,var(--card2));color:var(--blue)}
  .med-celula.acordada .mc-t{color:inherit}
  /* Mesmo anel de .med-celula.sel.bad, e pelo mesmo motivo: a folha e o UNICO
     indicador de onde a proxima leitura da trena cai. Se o azul apagasse a
     borda de "selecionada", a leitura seguinte iria para um campo que ninguem
     ve marcado. */
  .med-celula.sel.acordada{box-shadow:inset 0 0 0 3px var(--acc)}

  /* O bloco de escolhas do CEM inteiro (Task A3), dentro de cada unidade da
     folha: sempre três colunas, nas duas orientações do tablet -- o que se
     adapta à largura é a quebra das opções DENTRO do grupo
     (.med-escolha-opcoes já usa flex-wrap para isso), não a contagem de
     colunas. Opção e grupo ficam menores aqui do que no antigo painel de
     campo único, porque agora cabem sete grupos + 2 numéricos por unidade,
     várias unidades na mesma tela. */
  .med-bloco{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px 16px;margin-bottom:6px}
  .med-bloco .med-escolha-grupo{margin:0 0 4px}
  .med-bloco .med-opcao{flex:0 1 auto;min-height:44px;font-size:12.5px}

  /* Rodapé da folha (Task A4): painel de digitação manual, aviso de gravação
     e o estado da fila -- sempre visível, sem depender de qual unidade está
     aberta. Nada de border-left colorido aqui também. */
  /* BARRA FIXA no pé da folha. Pedido do dono em 2026-09-05: "o campo para
     digitar ou excluir a medição no final acaba ficando ruim quando tem
     muitas unidades" -- com 6 ou 8 unidades a folha passa de duas telas, e
     cada leitura obrigava a rolar até o fim e voltar.
     `sticky` e NÃO `fixed`: assim o rodapé continua no fluxo e só acompanha
     enquanto a folha está na tela -- uma barra `fixed` sobreviveria à troca
     de painel (o `#medtab-campos` some, a barra fica). Mesmo idioma de
     `.crowhwrap` (corte.css), virado para o pé.
     A margem negativa de 18px é o padding do `.card`: sem ela, a barra
     flutuaria com uma faixa do fundo do cartão aparecendo dos dois lados. O
     raio embaixo é o do cartão, pelo mesmo motivo. */
  .med-rodape{position:sticky;bottom:0;z-index:5;background:var(--card);
    margin:18px -18px -18px;padding:14px 18px 18px;
    border-top:1px solid var(--line);border-radius:0 0 var(--radius-md) var(--radius-md);
    box-shadow:0 -10px 24px rgba(0,0,0,.30)}
  .med-estado{display:flex;align-items:center;gap:12px;margin-top:12px}
  /* `#medEstado` (achado da revisão): era `.btn.sm` (~27px de altura) --
     errado num controle que é o ÚNICO jeito de recuperar uma gravação que
     não chegou ao banco, na mesma tela cujo "toque generoso" (.med-prox,
     acima) existe porque é tablet num braço, trena no outro, em obra. */
  .med-estado #medEstado{padding:12px 18px;font-size:14px;min-height:44px}
  .med-estado #medSalvarVoltar{margin-left:auto;padding:14px 26px;font-size:15px}
  .med-estado .ok{color:var(--green)}
  .med-estado .bad{color:var(--amber)}
  .med-obs{width:100%;min-height:76px;resize:vertical}

  /* ---------- bloqueio ----------
     Âmbar, não vermelho: medição bloqueada é o estado NORMAL de uma medição
     terminada, não um erro. Vermelho aqui treinaria o medidor a ignorar
     vermelho -- que é a cor da foto que falhou em subir. */
  .med-travada{margin:0 0 12px;padding:12px 14px;border-radius:var(--radius-sm);
    background:color-mix(in srgb,var(--amber) 16%,var(--card2));
    border:1px solid var(--amber);color:var(--tx);font-weight:600}
  .med-trava{font-size:15px}

  /* Galeria de fotos da unidade (Etapa C). */
  .med-fotos{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px}
  .med-foto{position:relative;margin:0;width:104px;height:104px}
  /* `display:block` sem largura nem altura: o <a> envolve a miniatura sem
     ganhar caixa propria, entao quando o `onerror` esconde a <img> ele
     colapsa para 0 e nao empurra o texto de `.med-foto.sem-bytes` (que
     centraliza por flex) para fora do quadrado de 104px. */
  .med-foto>a{display:block}
  /* `contain`, nao `cover` (Etapa D, decisao 1): num quadrado de 104px o
     `cover` mostra so o miolo -- de uma foto 4:3 o tecnico ve o centro e
     perde as bordas, e nem no pequeno da para julgar o enquadramento, que e
     exatamente o que ele quer conferir depois de tirar. */
  .med-foto-img{width:104px;height:104px;object-fit:contain;display:block;
    border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--card2)}
  /* COMPANHEIRA OBRIGATORIA do display:block acima -- sem ela o
     onerror="this.hidden=true" troca a propriedade e nao esconde nada:
     declaracao de autor vence a regra [hidden] do agente de usuario, que e de
     outra origem na cascata. Medido com Puppeteer na revisao da B6 (784 x 20
     na tela, com hidden === true). Mesmas irmas: .conf-croqui e
     .med-croqui-img. */
  .med-foto-img[hidden]{display:none}
  /* Esconder a <img> NAO basta: a <figure> continua ocupando 104x104 e o x de
     excluir fica vivo em cima de um quadrado branco -- medido na revisao da
     C3. O tecnico apaga uma foto boa achando que ela nao existe, e a exclusao
     e irreversivel por construcao (o objeto sai antes da linha).
     A classe some sozinha no proximo medRenderFolha(), que reconstroi a
     figura -- por isso nao precisa ser limpa em lugar nenhum. */
  .med-foto.sem-bytes{display:flex;align-items:center;justify-content:center;padding:6px;
    text-align:center;border:1px dashed var(--line);border-radius:var(--radius-sm);
    font-size:10px;line-height:1.2;color:var(--mut)}
  .med-foto.sem-bytes::after{content:"não consegui carregar esta foto agora"}
  .med-foto.sem-bytes .med-foto-rm{display:none}
  .med-foto-rm{position:absolute;top:3px;right:3px;width:26px;height:26px;padding:0;
    border:1px solid var(--line);border-radius:50%;background:var(--card);color:var(--mut);
    font-size:16px;line-height:1;cursor:pointer}
  .med-foto-rm:hover{color:var(--red);border-color:var(--red)}
  /* ALTURA CRESCE, o quadrado e' PISO -- nao teto (2026-08-27). Com 104px
     fixos mais `overflow:hidden`, uma figura pendente com texto de estado,
     mensagem de erro E dois botoes nao cabia: o ultimo controle era CORTADO,
     e conteudo cortado nao e' so invisivel, e' inalcancavel pelo dedo. A
     guarda de saida manda tocar em Reenviar ou Descartar -- se o botao esta
     fora do recorte, ela manda tocar em algo que nao existe na tela. Mesma
     classe do achado de md48 (figura sem controle nenhum), num degrau
     depois: o controle existe no HTML e nao existe na tela. */
  .med-foto.pend{display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:4px;padding:6px;text-align:center;border:1px dashed var(--line);
    border-radius:var(--radius-sm);font-size:11px;color:var(--mut);overflow:hidden;
    height:auto;min-height:104px}
  .med-foto.pend.bad{border-color:var(--amber);border-style:solid;color:var(--amber)}
  .med-foto-erro{font-size:10px;line-height:1.2;overflow-wrap:anywhere}
  /* A LISTA de desenhos da unidade e o desenho GUARDADO NO TABLET (Tarefa 6).
     Mesmo vocabulario visual da foto pendente logo acima -- tracejado para o
     que esta esperando, ambar so para o que o servidor RECUSOU: o medidor tem
     de ler a mesma coisa nos dois lugares, e ambar para o que vai subir
     sozinho treina a ignorar ambar. */
  .med-desenhos{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
  .med-desenho-item{display:inline-flex;align-items:center;gap:2px}
  .med-desenho-item.pend{border:1px dashed var(--line);border-radius:var(--radius-sm);
    padding:4px 8px;font-size:11px;color:var(--mut)}
  .med-desenho-estado.bad{color:var(--amber)}
  .med-foto-add{width:104px;height:104px;border:1px dashed var(--line);
    border-radius:var(--radius-sm);background:var(--card2);color:var(--mut);
    font-size:13px;font-weight:700;cursor:pointer}
  .med-foto-add:hover{border-color:var(--acc);color:var(--acc)}
  /* "Fotos1" colado -- .med-campo-un e display:flex sem gap, e .med-un-cont
     antes so tinha estilo dentro de .med-un-faixa. Medido na revisao da C3
     com 10+ fotos. */
  .med-campo-un .med-un-cont{margin-left:auto;font-weight:400;color:var(--mut);
    text-transform:none;letter-spacing:0}

/* Faixa de "sem internet", persistente no topo da Medicao (peca 4 do offline).
   Cor de ATENCAO, nao de erro: nao ha nada quebrado -- o app esta funcionando
   como projetado, e quem le precisa entender "estou offline e o trabalho esta
   aqui", nao "deu problema". Vermelho aqui treinaria o medidor a ignorar
   vermelho, que e o oposto do que a ferramenta precisa. */
.med-offline{background:#3a2f10;border:1px solid #8a6d1f;color:#f0d99a;
  padding:10px 14px;border-radius:8px;margin-bottom:14px;font-size:13.5px;line-height:1.5}
.med-offline b{color:#ffe9b0}

/* Fila guardada no tablet e ainda nao no banco (Tarefa 4 do offline).
   Mesma cor de ATENCAO da faixa acima, e pelo mesmo motivo: nada esta
   quebrado, o trabalho esta salvo -- so nao no servidor ainda. Vermelho aqui
   treinaria o medidor a ignorar vermelho.
   `.med-pend` mora na LINHA DA LISTA porque a fila so anda quando a medicao
   abre: sem ver o numero antes de abrir, o trabalho de um dia poderia ficar
   parado sem nada na tela dizendo. */
#medEstado.warn{border-color:var(--amber);color:var(--amber)}
.med-pend{display:inline-block;margin-left:8px;padding:4px 10px;border-radius:14px;
  border:1px solid var(--amber);color:var(--amber);font-size:12px;font-weight:600;white-space:nowrap}

/* Os pads de assinatura (mudanca 12, 2026-09-05). Dois pads empilhados dentro
   do .dlg de 720px -- lado a lado num tablet em retrato daria 300px de largura
   por assinatura, e assinatura espremida sai ilegivel no papel.
   `touch-action:none` e a linha que faz a coisa funcionar: sem ela o dedo
   ROLA o dialogo em vez de desenhar, e o pad parece quebrado sem erro nenhum.
   Fundo BRANCO, e e a mesma excecao ja registrada no DESIGN.md para o editor
   de desenho (.assinPapel do base.css ja fazia isto no orcamento): aqui a
   moldura e a FOLHA onde se assina, nao a tela do app. */
.med-assin-lista{display:grid;gap:18px}
.med-assin-rot{margin:0 0 6px;font-size:13px;color:var(--mut)}
.med-assin-tela{display:block;width:100%;height:150px;background:#fff;
  border:1px solid var(--line);border-radius:8px;touch-action:none;cursor:crosshair}
.med-assin-limpar{margin-top:8px}