/* Visualizador de peças — o desenho ocupa a tela inteira; os controles flutuam por cima, em cartões.
   Uma cor de ação (azul). Laranja só para a peça selecionada no 3D; verde e as cores de estado só para produção. */
:root {
  --fundo: #e9edf1;            /* atrás do desenho */
  --painel: #ffffff;
  --vidro: rgb(255 255 255 / .95);
  --borda: #e1e5ea;
  --borda-forte: #cdd3da;
  --texto: #18202a;
  --suave: #5f6b78;
  --apagado: #6b7682;
  --azul: #1c6dd0;
  --azul-claro: #e8f1fc;
  --destaque: #e8590c;
  --ok: #2b8a3e;
  --ok-claro: #ebfbee;
  --alerta: #c92a2a;
  --sombra: 0 2px 6px rgb(16 24 40 / .08), 0 8px 24px rgb(16 24 40 / .10);
  --r: 10px;                   /* cartões */
  --r-p: 7px;                  /* botões e campos */
  --h: 34px;                   /* altura dos controles */
  --m: 12px;                   /* distância das bordas da tela */
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; font: 13px/1.45 system-ui, "Segoe UI", Roboto, sans-serif; color: var(--texto); background: var(--fundo); }
button, select, input, textarea { font: inherit; color: inherit; }
.ico { flex: none; display: block; }
kbd { border: 1px solid var(--borda-forte); border-bottom-width: 2px; border-radius: 4px; padding: 0 4px; background: #fff; font: 11px/1.5 system-ui, sans-serif; color: var(--suave); }
h3 { margin: 0 0 8px; font-size: 15px; font-weight: 600; }
h4 { margin: 12px 0 4px; font-size: 12px; font-weight: 600; color: var(--suave); }
hr { border: 0; border-top: 1px solid var(--borda); margin: 4px 2px; }
[hidden] { display: none !important; }

/* ---------------------------------------------------------------- botões */
button, .botao { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 30px; padding: 4px 11px;
  border: 1px solid var(--borda-forte); border-radius: var(--r-p); background: #fff; cursor: pointer; white-space: nowrap; text-decoration: none; }
button:hover, .botao:hover { border-color: var(--azul); }
button:focus-visible, summary:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--azul); outline-offset: 1px; }
button:disabled { opacity: .55; cursor: default; }
button.principal { background: var(--azul); border-color: var(--azul); color: #fff; font-weight: 500; }
button.principal:hover { background: #175db3; }
button.medido { background: var(--ok); border-color: var(--ok); color: #fff; font-weight: 500; }
button.perigo, .menu-itens .perigo { color: var(--alerta); }
.bt-ic { width: var(--h); height: var(--h); min-height: 0; padding: 0; border: 0; background: transparent; border-radius: var(--r-p); color: var(--texto); }
.bt-ic:hover { background: #0000000d; }
.bt-ic.pequeno { width: 28px; height: 28px; }
.bt-ic.ativo, button.ativo { background: var(--azul); color: #fff; border-color: var(--azul); }
.bt-rot { height: var(--h); border: 0; background: transparent; padding: 0 10px; font-weight: 500; }
.bt-rot:hover { background: #0000000d; }

/* ---------------------------------------------------------------- o desenho */
#cena { position: fixed; inset: 0; overflow: hidden; }
#cena canvas { display: block; position: absolute; inset: 0; }
#carregando { position: absolute; inset: 0; display: grid; place-items: center; font-size: 15px; color: var(--suave); background: var(--fundo); z-index: 3; }
#carregando.progresso { inset: auto auto var(--m) var(--m); display: block; padding: 6px 12px; font-size: 12px; background: var(--vidro);
  border-radius: 999px; box-shadow: var(--sombra); pointer-events: none; }
.boas-vindas { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.boas-vindas b { font-size: 18px; color: var(--texto); }
.boas-vindas button { height: 40px; padding: 0 18px; font-size: 14px; }
body.sem-desenho #ferramentas, body.sem-desenho #topo-dir, body.sem-desenho #bt-camadas, body.sem-desenho .busca { display: none !important; }
#rotulos { position: absolute; inset: 0; pointer-events: none; }
.rotulo { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; background: var(--destaque); color: #fff; padding: 3px 8px; border-radius: 4px;
  font-weight: 600; white-space: nowrap; font-size: 12px; line-height: 1.35; box-shadow: 0 1px 4px #0003; font-variant-numeric: tabular-nums; }
.rotulo i { font-style: normal; font-weight: 400; opacity: .7; margin: 0 1px; }
.rotulo small { display: block; font-weight: 400; font-size: 11px; opacity: .9; }
.rotulo button { pointer-events: auto; min-height: 0; border: 0; background: #ffffff33; color: #fff; padding: 0 5px; margin-left: 5px; font-size: 11px; border-radius: 3px; }
.rotulo button:hover { background: #ffffff66; }
.rotulo.salva { background: var(--azul); }
.rotulo.viva { background: #18202ae6; pointer-events: none; z-index: 3; }
/* ímã do medir: verde como nos programas de desenho; contorno branco para aparecer sobre qualquer cor */
#elastico { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
#elastico line { stroke: var(--destaque); stroke-width: 2; stroke-dasharray: 6 4; }
#ima { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 3; }
#ima svg { position: absolute; left: -9px; top: -9px; fill: none; stroke: #0ca678; stroke-width: 2.2; overflow: visible;
  filter: drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1px #fff); }
#ima.ima-face svg, #ima.ima-livre svg { fill: #0ca678; stroke: #fff; stroke-width: 1.5; filter: none; }
#ima.ima-livre svg { fill: var(--suave); }
#ima span { position: absolute; left: 12px; top: 10px; background: #0ca678; color: #fff; font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 4px; white-space: nowrap; }
#ima.ima-face span, #ima.ima-livre span { background: #18202acc; font-weight: 400; }
.ima-ajuda { color: #0ca678; }
#caixa-sel { position: absolute; border: 1px solid var(--destaque); background: #e8590c22; pointer-events: none; z-index: 2; }
#caixa-sel.cruzando { border-style: dashed; background: #1c6dd022; border-color: var(--azul); }
#cena.com-pincel canvas { cursor: none; }
#cursor-pincel { position: absolute; transform: translate(-50%, -50%); border: 2px solid var(--destaque); border-radius: 50%; background: #e8590c1f; pointer-events: none; z-index: 2; }
#dica-peca { position: absolute; max-width: 300px; background: #18202aee; color: #fff; font-size: 12px; padding: 6px 9px; border-radius: 6px; pointer-events: none; z-index: 4; }
#dica-peca b { font-weight: 600; }
#dica-peca .ok { color: #8ce99a; }

/* ---------------------------------------------------------------- peças flutuantes */
/* Sem desfoque do fundo (backdrop-filter): sobre o desenho 3D ele é refeito a cada quadro e pesa em computador
   fraco; o branco quase opaco dá o mesmo efeito. */
.flut { position: fixed; z-index: 10; background: var(--vidro); border-radius: var(--r); box-shadow: var(--sombra); }

/* cápsula: camadas · busca · desenho */
#capsula { top: var(--m); left: var(--m); display: flex; align-items: center; gap: 2px; padding: 4px; max-width: calc(100vw - 2 * var(--m) - 170px); }
.busca { display: flex; align-items: center; gap: 6px; padding: 0 8px; height: var(--h); width: 260px; border-radius: var(--r-p); background: #0000000a; color: var(--suave); }
.busca:focus-within { background: #fff; box-shadow: inset 0 0 0 1.5px var(--azul); }
.busca input { flex: 1; min-width: 0; border: 0; background: none; outline: none; height: 100%; color: var(--texto); }
summary.desenho { display: flex; align-items: center; gap: 6px; height: var(--h); padding: 0 6px 0 10px; border-radius: var(--r-p); max-width: 300px; }
summary.desenho:hover, details[open] > summary.desenho { background: #0000000d; }
summary.desenho > span { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
summary.desenho b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
summary.desenho small { color: var(--suave); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* canto superior direito */
#topo-dir { top: var(--m); right: var(--m); display: flex; align-items: center; gap: 2px; padding: 4px; }

/* ferramentas na lateral esquerda */
#ferramentas { z-index: 11; left: var(--m); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px; }
#ferramentas .div { width: 22px; height: 1px; background: var(--borda-forte); margin: 4px 0; }

/* menus (desenho, mais, selecionar, aparência e os do cartão da peça) */
details.menu { position: relative; }
details.menu > summary { list-style: none; cursor: pointer; user-select: none; display: flex; align-items: center; justify-content: center; }
details.menu > summary::-webkit-details-marker { display: none; }
details.menu[open] > summary.bt-ic { background: #0000000f; }
.menu-itens { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 230px; display: flex; flex-direction: column; gap: 1px; padding: 6px;
  background: var(--painel); border: 1px solid var(--borda); border-radius: var(--r); box-shadow: var(--sombra); }
#topo-dir .menu-itens, #painel .menu-itens, #menu-desenho .menu-itens { left: auto; right: 0; }
#ferramentas details.lado:last-child > .menu-itens { top: auto; bottom: -6px; }
details.lado > .menu-itens { top: -6px; left: calc(100% + 12px); }
.menu-itens > button, .menu-itens > a, .menu-itens > label { display: flex; align-items: center; justify-content: flex-start; gap: 10px; min-height: 32px; padding: 5px 10px;
  border: 0; border-radius: 6px; background: none; color: inherit; text-decoration: none; text-align: left; white-space: nowrap; cursor: pointer; }
.menu-itens > button:hover, .menu-itens > a:hover, .menu-itens > label:hover { background: #0000000a; }
.menu-itens > button .ico, .menu-itens > a .ico { color: var(--suave); }
.menu-itens kbd { margin-left: auto; }
.menu-itens .titulo-menu { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--apagado); padding: 4px 10px 2px; }
.menu-itens .nota-menu { font-size: 11px; color: var(--apagado); padding: 4px 10px; white-space: nowrap; }
.menu-itens .campo-menu { flex-direction: column; align-items: stretch; gap: 3px; font-size: 11px; color: var(--suave); cursor: default; }
.menu-itens .campo-menu:hover { background: none; }
.menu-itens select { height: 32px; padding: 0 6px; border: 1px solid var(--borda-forte); border-radius: var(--r-p); background: #fff; color: var(--texto); font-size: 13px; }
optgroup { font-style: normal; color: var(--suave); }

/* ---------------------------------------------------------------- cartões (filtros e peça) */
.cartao-flut { display: flex; flex-direction: column; overflow: hidden; background: var(--painel); }
.cartao-cab { display: flex; align-items: center; gap: 6px; padding: 8px 8px 8px 12px; border-bottom: 1px solid var(--borda); }
.cartao-corpo { overflow: auto; padding: 10px 12px 14px; overscroll-behavior: contain; }

/* filtros e produção */
#filtros { top: calc(var(--m) + var(--h) + 20px); left: calc(var(--m) + 58px); width: 290px; max-height: calc(100vh - var(--h) - 2 * var(--m) - 32px); }
.abas { display: flex; gap: 2px; flex: 1; }
.aba { border: 0; background: none; padding: 4px 10px; color: var(--suave); border-radius: var(--r-p); font-weight: 500; }
.aba:hover { background: #0000000a; }
.aba.ativa { background: var(--azul-claro); color: var(--azul); }
details.secao { margin: 2px 0 8px; }
details.secao > summary { list-style: none; display: flex; align-items: center; gap: 8px; padding: 6px 0 4px; font-weight: 600; font-size: 12px; color: var(--suave); cursor: pointer; }
details.secao > summary::before { content: "▸"; font-size: 10px; color: var(--apagado); transition: transform .15s; }
details.secao[open] > summary::before { transform: rotate(90deg); }
details.secao > summary::-webkit-details-marker { display: none; }
.acoes { margin-left: auto; font-size: 11px; font-weight: 400; }
.acoes a { color: var(--azul); text-decoration: none; }
.lista label { display: flex; gap: 7px; align-items: center; padding: 3px 4px; border-radius: 5px; cursor: pointer; }
.lista label:hover { background: #0000000a; }
.lista label > span:first-of-type { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista .n { margin-left: auto; color: var(--apagado); font-size: 11px; font-variant-numeric: tabular-nums; }
.lista.opcoes { margin-bottom: 8px; }
.legenda { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 6px; margin: 4px 0 10px; }
.legenda .estado { display: flex; align-items: center; gap: 6px; cursor: pointer; padding: 3px 5px; border-radius: 5px; font-size: 12px; }
.legenda .estado:hover { background: #0000000a; }
.legenda .estado span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.legenda .estado b { font-weight: 500; color: var(--apagado); font-size: 11px; font-variant-numeric: tabular-nums; }
.legenda .bola, .lista-med .bola { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.lista-med { font-size: 12px; }
.lista-med .lote { display: flex; align-items: center; gap: 6px; padding: 4px 5px; border-radius: 6px; cursor: pointer; }
.lista-med .lote:hover { background: var(--ok-claro); }
.lista-med .lote .bola { background: var(--ok); }
.lista-med .lote span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista-med .lote small { color: var(--suave); }
.lista-med .lote button { min-height: 0; padding: 2px 5px; border: 0; background: none; color: var(--apagado); }
.lista-med .lote button:hover { color: var(--texto); background: #0000000d; }
.lista-med .lote button[data-acao=apagar]:hover { color: var(--alerta); }
.lista-med .vazio { color: var(--suave); padding: 4px 2px; }
.historico { font-size: 12px; max-height: 260px; overflow: auto; }
.historico > div { padding: 4px 0; border-bottom: 1px solid var(--borda); }
.historico small { display: block; color: var(--suave); font-size: 11px; }

/* a peça selecionada */
#painel { top: calc(var(--m) + var(--h) + 20px); right: var(--m); width: 360px; max-height: calc(100vh - var(--h) - 2 * var(--m) - 32px); }
body:not(.com-selecao) #painel { display: none; }
#painel { overflow: visible; }
#detalhe { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.peca-corpo { flex: 1; min-height: 0; border-radius: 0 0 var(--r) var(--r); }
.peca-cab, .peca-acoes, .status-prod { flex: none; }
.peca-cab { display: flex; align-items: flex-start; gap: 4px; padding: 12px 8px 8px 14px; }
.peca-cab .titulo { flex: 1; min-width: 0; }
.peca-cab h2 { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.peca-cab .sub { color: var(--suave); font-size: 12px; margin-top: 2px; }
.peca-acoes { display: flex; gap: 6px; padding: 0 14px 10px; }
.peca-acoes > button:first-child { flex: 1; height: 36px; }
.peca-acoes summary.botao { height: 36px; }
.ja-medida { flex: 1; display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px; border-radius: var(--r-p); background: var(--ok-claro); color: var(--ok); font-weight: 500; font-size: 12px; overflow: hidden; }
.ja-medida span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-prod { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 0 14px 10px; border: 1px solid var(--borda-forte); border-radius: var(--r-p); overflow: hidden; }
.status-prod button { min-height: 30px; padding: 0 4px; border: 0; border-radius: 0; font-size: 12px; background: #fff; box-shadow: inset 0 -3px 0 var(--cor); }
.status-prod button + button { border-left: 1px solid var(--borda); }
.status-prod button:hover { background: #0000000a; }
.status-prod button.ativo { background: var(--cor); color: #fff; }
.status-prod button:focus-visible { outline-offset: -2px; }
.peca-corpo { overflow: auto; padding: 4px 14px 14px; border-top: 1px solid var(--borda); overscroll-behavior: contain; }
.aviso-med { background: var(--ok-claro); border-radius: var(--r-p); padding: 6px 9px; margin: 8px 0; font-size: 12px; color: #1e6b31; }
.medidas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 10px 0; }
.medidas.duas { grid-template-columns: repeat(2, 1fr); }
.medidas div { background: #f3f5f7; border-radius: var(--r-p); padding: 7px 9px; min-width: 0; }
.medidas b { display: block; font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.medidas b small { font-size: 11px; font-weight: 500; color: var(--suave); }
.medidas span { font-size: 11px; color: var(--suave); }
table { width: 100%; border-collapse: collapse; }
td, th { text-align: left; padding: 4px 4px; border-bottom: 1px solid var(--borda); vertical-align: top; }
th { color: var(--suave); font-weight: 500; width: 38%; }
.dados td { overflow-wrap: anywhere; }
table.lista-sel td, table.lista-sel th { font-size: 12px; width: auto; }
table.lista-sel tr[data-i] { cursor: pointer; }
table.lista-sel tr[data-i]:hover td { background: #fff4e6; }
td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.peca-corpo details { margin: 6px 0; }
.peca-corpo details > summary { cursor: pointer; font-weight: 600; font-size: 12px; padding: 6px 0; color: var(--texto); }
.pend { color: var(--alerta); font-size: 12px; }
.so-impressao { display: none; }
details.corte { background: #f3f5f7; border-radius: var(--r-p); padding: 2px 10px 8px; }
.corte-cfg { font-size: 12px; margin: 4px 0 8px; }
.corte-cfg input { width: 70px; padding: 2px 4px; border: 1px solid var(--borda-forte); border-radius: 4px; }
details.notas textarea { width: 100%; padding: 6px; border: 1px solid var(--borda-forte); border-radius: var(--r-p); resize: vertical; }
details.notas .linha { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
details.notas .linha button { margin-left: auto; }
details.notas label.foto { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--borda-forte); border-radius: var(--r-p); padding: 4px 9px; cursor: pointer; white-space: nowrap; }
details.notas label.foto input { display: none; }
.nota { display: flex; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--borda); }
.nota img { width: 72px; height: 72px; object-fit: cover; border-radius: 6px; }
.nota small { display: block; color: var(--suave); font-size: 11px; margin-top: 2px; }
.nota small button { min-height: 0; border: 0; background: none; padding: 0 3px; color: var(--suave); }

/* ---------------------------------------------------------------- embaixo: fatiar e dica */
/* uma linha por corte, com as colunas alinhadas: nome | ‹ | régua | › | valor | ⇄ */
#painel-corte { bottom: calc(var(--m) + 36px); left: 50%; transform: translateX(-50%); padding: 8px 10px 8px 12px; font-size: 12px;
  display: grid; grid-template-columns: auto 28px 180px 28px auto 28px; align-items: center; column-gap: 2px; row-gap: 4px; }
.corte-linha { display: contents; }
.corte-nome { display: flex; align-items: center; gap: 6px; white-space: nowrap; margin-right: 6px; grid-column: 1; } /* cada corte começa uma linha */
#painel-corte input[type=range] { width: 100%; margin: 0 2px; }
#painel-corte select { padding: 1px 4px; border: 1px solid var(--borda-forte); border-radius: 4px; }
.corte-passo { touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.corte-valor { display: inline-flex; align-items: center; gap: 3px; margin-left: 4px; color: var(--suave); white-space: nowrap; }
.corte-valor input { width: 62px; height: 26px; padding: 0 6px; text-align: right; font: inherit; color: var(--texto); font-variant-numeric: tabular-nums;
  border: 1px solid var(--borda-forte); border-radius: 5px; background: #fff; }
.corte-valor input:focus { outline: 2px solid var(--azul); outline-offset: -1px; border-color: transparent; }
.corte-valor input.erro { outline: 2px solid var(--alerta); outline-offset: -1px; }
#dica { position: fixed; z-index: 9; left: 50%; bottom: var(--m); transform: translateX(-50%); max-width: min(560px, calc(100vw - 2 * var(--m) - 760px)); min-width: 260px; padding: 5px 12px;
  font-size: 12px; color: var(--suave); background: var(--vidro); border-radius: 12px; box-shadow: var(--sombra); pointer-events: none;
  text-align: center; transition: opacity .6s; }
#dica:empty, #dica.some { opacity: 0; }

/* aviso de tarefa demorada (PDF, planilha grande) */
.aviso-ocupado { left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 60; padding: 14px 20px; background: var(--painel); font-weight: 500; }
body.ocupado, body.ocupado * { cursor: progress !important; }

/* ---------------------------------------------------------------- janelas */
#envio, #soltar { position: fixed; inset: 0; background: #18202a99; display: grid; place-items: center; z-index: 40; }
#envio .caixa { background: #fff; border-radius: var(--r); padding: 20px 22px; width: min(460px, 90vw); box-shadow: var(--sombra); }
#envio h3 { word-break: break-all; }
.barra { height: 8px; background: #edf0f3; border-radius: 4px; overflow: hidden; }
.barra div { height: 100%; width: 0; background: var(--azul); transition: width .4s; }
#soltar div { border: 3px dashed #fff; color: #fff; font-size: 20px; padding: 40px 60px; border-radius: 14px; }
dialog { border: 0; border-radius: 14px; padding: 18px 20px; max-width: 96vw; max-height: 90vh; box-shadow: 0 20px 60px rgb(16 24 40 / .3); color: inherit; }
dialog::backdrop { background: #18202a66; }
dialog.janela { width: min(980px, 96vw); }
dialog.janela.pequena { width: min(520px, 96vw); }
dialog .fechar { float: right; width: 30px; height: 30px; min-height: 0; padding: 0; border: 0; background: none; font-size: 15px; color: var(--suave); border-radius: 8px; margin: -4px -6px 0 8px; }
dialog .fechar:hover { background: #0000000d; color: var(--texto); }
dialog .fechar:focus:not(:focus-visible) { outline: none; }
dialog .sub { color: var(--suave); font-size: 12px; }
dialog .ok { color: var(--ok); }
dialog .lista { max-height: 50vh; overflow: auto; margin: 8px 0; }
dialog .botoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.botoes { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0; }
table.atalhos th { width: 34%; color: var(--texto); }
table.atalhos td { color: var(--suave); }
.linha-cfg { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0; }
.linha-cfg .sep { flex: 1; }
.linha-cfg select, .linha-cfg input { height: 30px; padding: 0 6px; border: 1px solid var(--borda-forte); border-radius: var(--r-p); background: #fff; }
.rolagem { max-height: 55vh; overflow: auto; border: 1px solid var(--borda); border-radius: var(--r-p); }
.rolagem table { font-size: 12px; }
.rolagem th { position: sticky; top: 0; background: #f3f5f7; padding: 6px; font-weight: 600; z-index: 1; color: var(--texto); }
.rolagem td { padding: 5px 6px; vertical-align: middle; }
.rolagem td.num, .rolagem th:not(:first-child) { text-align: right; white-space: nowrap; }
.tabela-orc th:nth-child(3) { text-align: left !important; }
.rolagem tr[data-k] { cursor: pointer; }
.rolagem tr[data-k]:hover td, .rolagem tr.atual td { background: #fff4e6; }
.rolagem tr.total td { font-weight: 600; background: #f3f5f7; }
.cartoes { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.cartao { flex: 1 1 110px; border: 1px solid var(--borda); border-left: 4px solid var(--cor, var(--azul)); border-radius: var(--r-p); padding: 7px 10px; display: flex; flex-direction: column; }
.cartao b { font-size: 20px; }
.cartao small { color: var(--suave); }
.barra-and { position: relative; min-width: 84px; height: 20px; background: #f3f5f7; border-radius: 4px; overflow: hidden; }
.barra-and::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p); background: var(--cor); opacity: .45; }
.barra-and span { position: relative; display: block; padding: 1px 5px; white-space: nowrap; }
.barra-and small { color: var(--suave); }
.tabela-orc input.preco { width: 110px; text-align: right; height: 28px; padding: 0 6px; border: 1px solid var(--borda-forte); border-radius: 5px; }
.tabela-orc select { height: 28px; padding: 0 4px; border: 1px solid var(--borda-forte); border-radius: 5px; background: #fff; }
.tabela-orc td:nth-child(3) { text-align: left; }
.tabela-orc a.sel { color: inherit; }
.grupos-conf { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grupos-conf .lista { max-height: 28vh; border: 1px solid var(--borda); border-radius: var(--r-p); padding: 4px 6px; }
.tabela-conf td:not(.num), .tabela-conf th { text-align: left !important; }
#conf-andamento { display: flex; gap: 10px; align-items: center; margin: 6px 0; }
#conf-andamento .barra { flex: 1; }
.comparar-cfg { display: flex; gap: 6px; margin: 4px 0 8px; }
.comparar-cfg select { flex: 1; min-width: 0; height: 30px; border: 1px solid var(--borda-forte); border-radius: var(--r-p); background: #fff; }
.cmp-linha { padding: 4px 6px; border-radius: 5px; cursor: pointer; }
.cmp-linha:hover { background: #0000000a; }
.cmp-linha.sem { cursor: default; }
#cmp-res button { margin-top: 8px; }
.campo { display: flex; flex-direction: column; gap: 4px; margin: 10px 0; }
.campo input:not([type=file]) { height: 32px; padding: 0 8px; border: 1px solid var(--borda-forte); border-radius: var(--r-p); }
.logo-atual img { max-width: 220px; max-height: 80px; border: 1px solid var(--borda); border-radius: 6px; padding: 4px; background: #fff; }

/* ---------------------------------------------------------------- celular e tablet em pé */
@media (max-width: 820px) {
  :root { --m: 8px; --h: 40px; }
  #capsula { right: var(--m); max-width: none; }
  .busca { width: auto; flex: 1; }
  summary.desenho { max-width: 120px; }
  #topo-dir { top: auto; bottom: calc(var(--m) + env(safe-area-inset-bottom)); right: var(--m); }
  #topo-dir .bt-rot span { display: none; }
  #topo-dir .menu-itens { top: auto; bottom: calc(100% + 6px); }
  /* ferramentas viram uma régua embaixo */
  /* a régua termina antes dos botões da direita (Andamento, ?, ⋯: ~130 px); antes ela cobria o Andamento */
  #ferramentas { top: auto; left: var(--m); bottom: calc(var(--m) + env(safe-area-inset-bottom)); transform: none; flex-direction: row; max-width: calc(100vw - 2 * var(--m) - 142px); overflow-x: auto; scrollbar-width: none;
    background: var(--painel); }
  #ferramentas > * { flex: none; }
  #ferramentas .div { width: 1px; height: 22px; margin: 0 3px; }
  #ferramentas details.lado > .menu-itens, #ferramentas details.lado:last-child > .menu-itens { position: fixed; top: auto; left: var(--m); right: var(--m); bottom: calc(var(--h) + 2 * var(--m) + 12px); }
  #filtros { left: var(--m); right: var(--m); width: auto; top: calc(var(--h) + 2 * var(--m) + 8px); max-height: calc(100vh - 2 * var(--h) - 5 * var(--m) - 16px); }
  /* a peça vira uma folha que sobe de baixo */
  #painel { left: var(--m); right: var(--m); bottom: calc(var(--h) + 2 * var(--m) + 8px + env(safe-area-inset-bottom)); top: auto; width: auto; margin: 0; border-radius: 16px; max-height: 58vh; z-index: 12; }
  #filtros:not([hidden]) ~ #painel { display: none; }
  #painel.recolhido .peca-corpo, #painel.recolhido .status-prod { display: none; }
  .peca-cab { padding-top: 16px; position: relative; }
  .peca-cab::before { content: ""; position: absolute; top: 6px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: var(--borda-forte); }
  .medidas { grid-template-columns: repeat(2, 1fr); }
  .status-prod button { min-height: 36px; }
  #dica { display: none; }
  /* no celular cada corte ocupa duas linhas: nome e valor em cima, setas grandes e régua embaixo */
  #painel-corte { left: var(--m); right: var(--m); transform: none; top: calc(var(--h) + 2 * var(--m) + 8px); bottom: auto;
    grid-template-columns: 1fr; row-gap: 6px; padding: 8px 10px; }
  .corte-linha { display: grid; grid-template-columns: 36px 1fr auto 36px; grid-template-areas: "nome nome valor inv" "menos regua regua mais"; align-items: center; gap: 4px 6px; }
  .corte-linha + .corte-linha { border-top: 1px solid var(--borda); padding-top: 6px; }
  .corte-nome { grid-area: nome; }
  .corte-linha .corte-passo { width: 36px; height: 36px; background: #0000000a; }
  .corte-passo[data-dir="-1"] { grid-area: menos; }
  .corte-passo[data-dir="1"] { grid-area: mais; }
  .corte-linha input[type=range] { grid-area: regua; }
  .corte-valor { grid-area: valor; }
  .corte-valor input { height: 32px; width: 76px; font-size: 16px; } /* 16 px: o iPhone não dá zoom ao tocar no campo */
  #corte-inv { grid-area: inv; justify-self: end; }
  .grupos-conf { grid-template-columns: 1fr; }
  dialog { padding: 14px; }
}

/* ---------------------------------------------------------------- impressão: só a ficha da peça */
@media print {
  html, body { overflow: visible; height: auto; background: #fff; }
  #cena, .flut:not(#painel), #dica, .peca-acoes, .status-prod, details.notas, details.props, details.corte, .peca-cab .bt-ic { display: none !important; }
  #painel { position: static; display: block !important; box-shadow: none; width: auto; max-height: none; margin: 0; }
  #detalhe, .peca-corpo { overflow: visible; }
  .so-impressao { display: block; color: var(--suave); font-size: 11px; padding: 0 14px; }
}

@media (max-width: 1300px) { #dica { max-width: min(460px, calc(100vw - 2 * var(--m))); } }

/* ajuda */
.interroga { font-size: 16px; font-weight: 700; line-height: 1; }
dialog.ajuda { width: min(720px, 96vw); }
dialog.ajuda > details { border-top: 1px solid var(--borda); }
dialog.ajuda > details > summary { list-style: none; cursor: pointer; padding: 10px 2px; font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 8px; }
dialog.ajuda > details > summary::before { content: "▸"; color: var(--apagado); font-size: 11px; transition: transform .15s; }
dialog.ajuda > details[open] > summary::before { transform: rotate(90deg); }
dialog.ajuda > details > summary::-webkit-details-marker { display: none; }
dialog.ajuda > details > :not(summary) { margin: 0 0 12px 18px; }
dialog.ajuda p { margin: 6px 0; line-height: 1.5; }
dialog.ajuda .ico { display: inline-block; vertical-align: -3px; color: var(--azul); }
table.atalhos th { font-weight: 600; }
#bolha-ajuda { top: calc(var(--m) + var(--h) + 20px); right: var(--m); width: 280px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; z-index: 13; background: var(--painel); }
#bolha-ajuda span { color: var(--suave); font-size: 12px; }
#bolha-ajuda .botoes { margin: 8px 0 0; }
body.com-selecao #bolha-ajuda { display: none; }