/* =========================================================================
   1. BASE
   ========================================================================= */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--fonte-texto); font-size: var(--tam-base); color: var(--cor-texto); background: var(--cor-fundo); }
h1, h2, h3, h4 { font-weight: 600; margin: 0 0 var(--esp-3); }
p { margin: 0 0 var(--esp-3); }
a { color: var(--cor-destaque); }
a:hover { color: var(--cor-destaque-escuro); }
.mono { font-family: var(--fonte-mono); font-weight: 500; }
:focus-visible { outline: 2px solid var(--cor-destaque); outline-offset: 2px; }

/* Sobrescritas visuais do Pure CSS (mantém os grids do Pure) */
.pure-form input[type="text"], .pure-form input[type="email"], .pure-form input[type="password"],
.pure-form input[type="number"], .pure-form select, .pure-form textarea {
  height: var(--altura-campo); box-sizing: border-box; border: 1px solid var(--cor-borda-campo); border-radius: var(--raio-campo);
  font-family: var(--fonte-texto); font-size: var(--tam-base); color: var(--cor-texto); padding: 0 var(--esp-3); background: var(--cor-superficie);
}
.pure-form textarea { height: auto; padding: var(--esp-2) var(--esp-3); }
.pure-form input:focus, .pure-form select:focus, .pure-form textarea:focus { border-color: var(--cor-destaque); }
.pure-form label { display: block; font-size: var(--tam-legenda); font-weight: 500; color: var(--cor-texto-2); margin: var(--esp-3) 0 var(--esp-1); }
.pure-form label:first-child { margin-top: 0; }
.pure-form-stacked input, .pure-form-stacked select, .pure-form-stacked textarea { width: 100%; }
.campo--erro { border-color: var(--cor-erro-texto) !important; }
.campo-erro-msg { color: var(--cor-erro-texto); font-size: var(--tam-meta); margin: var(--esp-1) 0 0; }
.campo-ajuda { color: var(--cor-texto-3); font-size: var(--tam-meta); margin: var(--esp-1) 0 0; }

/* =========================================================================
   2. LAYOUT
   ========================================================================= */
/* Largura da página: a classe do <body> (layout.php) dá o limite; o topo e as
   faixas têm o fundo na largura toda e o conteúdo recuado até alinhar com o
   <main> (--recuo-pagina, calculado em cada faixa, filha direta do <body>).
   Abaixo do limite, tudo ocupa 100% com a margem lateral de sempre. */
.pagina { --margem-pagina: var(--esp-6); --largura-pagina: var(--largura-leitura); --recuo-pagina: max(var(--margem-pagina), calc((100% - var(--largura-pagina)) / 2 + var(--margem-pagina))); }
.pagina--trabalho { --largura-pagina: var(--largura-trabalho); }
.pagina--media { --largura-pagina: var(--largura-media); }
.pagina--total { --largura-pagina: 100%; }
.topo { display: flex; align-items: center; gap: var(--esp-5); height: 56px; padding: 0 var(--recuo-pagina); background: var(--cor-superficie); border-bottom: 1px solid var(--cor-borda); }
.topo-marca { display: flex; align-items: center; gap: var(--esp-2); font-weight: 600; font-size: var(--tam-card); color: var(--cor-texto); white-space: nowrap; }
.topo-marca-icone { width: 22px; height: 22px; color: var(--cor-destaque); flex: none; }
.topo-menu { display: flex; gap: var(--esp-5); flex: 1; flex-wrap: wrap; }
.topo-menu a { color: var(--cor-texto-2); text-decoration: none; font-weight: 500; font-size: var(--tam-base); padding: 2px 0; border-bottom: 2px solid transparent; }
.topo-menu a:hover { color: var(--cor-texto); }
.topo-menu a.ativo { color: var(--cor-destaque); border-bottom-color: var(--cor-destaque); }
.topo-usuario { display: flex; align-items: center; gap: var(--esp-2); font-size: var(--tam-meta); color: var(--cor-texto-3); white-space: nowrap; }
.topo-usuario strong { color: var(--cor-texto-2); font-weight: 500; }

.cabecalho-pagina { background: var(--cor-superficie); border-bottom: 1px solid var(--cor-borda); padding: var(--esp-4) var(--recuo-pagina) 0; margin: 0 0 var(--esp-5); }
/* Título só da impressão das abas do projeto: o mesmo bloco do cabeçalho antigo, dentro do <main> */
.cabecalho-pagina.titulo-impressao { padding: var(--esp-4) var(--margem-pagina) 0; margin: 0 calc(-1 * var(--esp-6)) var(--esp-5); }
.breadcrumb { font-size: var(--tam-meta); color: var(--cor-texto-3); margin-bottom: var(--esp-1); }
.breadcrumb a { color: var(--cor-texto-3); text-decoration: none; }
.breadcrumb a:hover { color: var(--cor-destaque); text-decoration: underline; }
.cabecalho-pagina-linha { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--esp-3); padding-bottom: var(--esp-4); }
.cabecalho-pagina-titulo { display: flex; align-items: center; gap: var(--esp-3); flex-wrap: wrap; }
.cabecalho-pagina-titulo h1 { font-size: var(--tam-titulo); margin: 0; }
.cabecalho-pagina-acoes { display: flex; align-items: center; gap: var(--esp-2); flex-wrap: wrap; }
.abas { display: flex; gap: var(--esp-5); }
.abas a, .abas span { display: inline-block; padding: var(--esp-2) 0; font-size: var(--tam-base); font-weight: 500; text-decoration: none; color: var(--cor-texto-2); border-bottom: 2px solid transparent; }
.abas a:hover { color: var(--cor-texto); }
.abas a.ativo { color: var(--cor-destaque); border-bottom-color: var(--cor-destaque); }
.abas span.desabilitada { color: var(--cor-texto-3); cursor: default; }

.conteudo { max-width: var(--largura-pagina); margin: 0 auto; padding: 0 var(--margem-pagina) 40px; }
.so-impressao { display: none; }

/* Faixa escura do projeto (todas as telas do projeto), com as abas em pasta */
.v2-faixa-projeto { background: var(--cor-faixa-projeto); color: var(--cor-faixa-projeto-texto); padding: var(--esp-5) var(--recuo-pagina) 0; }
.v2-faixa-projeto-linha { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--esp-2) var(--esp-4); padding-bottom: var(--esp-4); }
.v2-voltar { color: var(--cor-faixa-projeto-texto-2); font-size: var(--tam-meta); text-decoration: none; }
.v2-voltar:hover { color: var(--cor-faixa-projeto-texto); text-decoration: underline; }
.v2-projeto-nome { font-size: 26px; font-weight: 600; margin: 0; color: var(--cor-faixa-projeto-texto); }
.v2-projeto-meta { color: var(--cor-faixa-projeto-texto-2); font-size: var(--tam-base); }
.v2-selo-situacao { background: var(--cor-faixa-selo); color: var(--cor-texto); }
.v2-abas { display: flex; flex-wrap: wrap; gap: var(--esp-1); }
.v2-abas a { display: inline-block; padding: var(--esp-3) var(--esp-4); color: var(--cor-faixa-projeto-texto-2); text-decoration: none; font-weight: 500; border-radius: var(--raio-campo) var(--raio-campo) 0 0; }
.v2-abas a:hover { color: var(--cor-faixa-projeto-texto); }
.v2-abas a.ativa { background: var(--cor-faixa-contexto); color: var(--cor-texto); font-weight: 600; }
.v2-abas a:focus-visible, .v2-voltar:focus-visible { outline: 2px solid var(--cor-faixa-selo); outline-offset: 2px; }
/* Etapa 16: aba "Montagem 3D" em destaque (ícone de cubo; ponto enquanto o ambiente não tem módulo na cena) */
.v2-abas a.v2-aba--destaque { display: inline-flex; align-items: center; gap: 6px; color: var(--cor-faixa-projeto-texto); font-weight: 600; }
.v2-abas a.v2-aba--destaque.ativa { color: var(--cor-texto); }
.v2-aba-icone { flex: none; }
.v2-aba-ponto { width: 8px; height: 8px; border-radius: var(--raio-selo); background: var(--cor-faixa-selo); flex: none; }
/* Barra de ações das abas do projeto: logo abaixo da faixa, na cor da aba ativa, botões à direita */
.barra-acoes { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: var(--esp-2); background: var(--cor-faixa-contexto); border-bottom: 1px solid var(--cor-borda); padding: var(--esp-3) var(--recuo-pagina); margin: 0 0 var(--esp-5); }
.barra-acoes--vazia { padding-top: var(--esp-2); padding-bottom: 0; }
.card { background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio-card); padding: var(--esp-4); }
.card-titulo { font-size: var(--tam-card-lg); font-weight: 600; margin: 0 0 var(--esp-3); }
.card + .card { margin-top: var(--esp-4); }

/* =========================================================================
   3. COMPONENTES
   ========================================================================= */
.botao { display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-1); height: var(--altura-botao); padding: 0 var(--esp-4); border-radius: var(--raio-campo); font-family: var(--fonte-texto); font-size: var(--tam-base); font-weight: 500; text-decoration: none; cursor: pointer; border: 1px solid transparent; background: var(--cor-superficie); color: var(--cor-texto); }
.botao--primario { background: var(--cor-destaque); border-color: var(--cor-destaque); color: var(--cor-superficie); font-weight: 600; }
.botao--primario:hover { background: var(--cor-destaque-escuro); border-color: var(--cor-destaque-escuro); color: var(--cor-superficie); }
.botao--secundario { background: var(--cor-superficie); border-color: var(--cor-borda); color: var(--cor-texto); }
.botao--secundario:hover { background: var(--cor-superficie-2); }
.botao--perigo { background: none; border: none; color: var(--cor-erro-texto); padding: 0 var(--esp-1); height: auto; font-weight: 500; }
.botao--perigo:hover { text-decoration: underline; }
.botao--texto { background: none; border: none; color: var(--cor-destaque); padding: 0; height: auto; }
.botao--texto:hover { text-decoration: underline; }
.botao--compacto { height: var(--altura-botao-compacto); padding: 0 var(--esp-3); font-size: var(--tam-meta); }
.botao--pequeno { height: var(--altura-botao-pequeno); padding: 0 var(--esp-2); font-size: var(--tam-legenda); }
.botao:disabled { opacity: .5; cursor: default; }
.botao-icone { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: none; border: 1px solid var(--cor-borda); border-radius: var(--raio-campo); cursor: pointer; color: var(--cor-texto-2); padding: 0; }
.botao-icone:hover { background: var(--cor-superficie-2); }
.form-linha { display: inline-block; margin: 0; }

.tabela { width: 100%; border-collapse: collapse; background: var(--cor-superficie); font-size: var(--tam-base); }
.tabela th, .tabela td { padding: var(--esp-2) var(--esp-3); text-align: left; border-bottom: 1px solid var(--cor-linha); }
.tabela thead th { background: var(--cor-superficie-2); font-size: var(--tam-legenda); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--cor-texto-2); }
.tabela td.direita, .tabela th.direita { text-align: right; }
.tabela--zebra tbody tr:nth-child(even) { background: var(--cor-superficie-2); }
.tabela--hover tbody tr:hover { background: var(--cor-destaque-suave); }
.tabela tbody tr[data-href] { cursor: pointer; }
.tabela tbody tr[data-href]:focus-visible { outline: 2px solid var(--cor-destaque); outline-offset: -2px; }
.tabela--compacta th, .tabela--compacta td { padding: var(--esp-1) var(--esp-2); }
.tabela--cabecalho-fixo thead th { position: sticky; top: 0; z-index: 1; }
.tabela tr.selecionada { background: var(--cor-destaque-suave); box-shadow: inset 3px 0 0 var(--cor-destaque); }

.selo { display: inline-block; padding: 3px 9px; border-radius: var(--raio-selo); font-size: var(--tam-legenda); font-weight: 600; white-space: nowrap; }
.selo--status { background: var(--cor-destaque-suave); color: var(--cor-destaque-escuro); }
.selo--aviso { background: var(--cor-aviso-fundo); color: var(--cor-aviso-texto); }
.selo--erro { background: var(--cor-erro-fundo); color: var(--cor-erro-texto); }
.selo--sucesso { background: var(--cor-sucesso-fundo); color: var(--cor-sucesso-texto); }
/* Preencher vão (etapa 19): largura automática */
.selo--preencher { background: var(--cor-preencher-fundo); color: var(--cor-preencher); }
.preencher-vao { margin-top: var(--esp-2); }
.preencher-vao-opcao { display: flex; align-items: center; gap: var(--esp-1); flex-wrap: wrap; }
.pure-form .preencher-vao-opcao input[type="checkbox"] { display: inline-block; width: auto; margin: 0; }
.preencher-vao-folga { max-width: 160px; }
.preencher-vao-aviso { color: var(--cor-preencher); }
.preencher-vao-aviso--erro { color: var(--cor-erro-texto); }
.campo-numero[readonly] { background: var(--cor-superficie-2); color: var(--cor-texto-2); }

.mensagem { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); padding: var(--esp-3) var(--esp-4); margin-bottom: var(--esp-4); border-radius: var(--raio-campo); font-size: var(--tam-base); }
.mensagem--sucesso { background: var(--cor-sucesso-fundo); color: var(--cor-sucesso-texto); }
.mensagem--aviso { background: var(--cor-aviso-fundo); color: var(--cor-aviso-texto); }
.mensagem--erro { background: var(--cor-erro-fundo); color: var(--cor-erro-texto); }
.mensagem-fechar { background: none; border: none; color: inherit; cursor: pointer; font-size: 16px; line-height: 1; padding: 0; opacity: .7; }
.mensagem-fechar:hover { opacity: 1; }

dialog.dialogo { border: none; border-radius: var(--raio-card); padding: var(--esp-5); max-width: 420px; width: calc(100% - 40px); box-shadow: 0 8px 24px rgba(27,38,44,.18); }
dialog.dialogo::backdrop { background: rgba(27,38,44,.45); }
.dialogo p { margin: 0 0 var(--esp-5); color: var(--cor-texto-2); }
.dialogo-acoes { display: flex; justify-content: flex-end; gap: var(--esp-2); }

.estado-vazio { text-align: center; padding: var(--esp-6) var(--esp-4); color: var(--cor-texto-3); }
.estado-vazio p { margin-bottom: var(--esp-3); }

.desenho-peca { display: flex; flex-direction: column; align-items: center; gap: var(--esp-2); }
.desenho-linha { display: flex; align-items: center; gap: var(--esp-2); }
.desenho-medida-comprimento { writing-mode: vertical-rl; transform: rotate(180deg); font-size: var(--tam-meta); color: var(--cor-texto-3); }
.desenho-medida-largura { font-size: var(--tam-meta); color: var(--cor-texto-3); }
.desenho-svg { display: block; }
.desenho-svg rect.corpo { fill: var(--cor-superficie-2); }
.desenho-borda { fill: none; stroke: var(--cor-sem-fita); stroke-width: 2; cursor: pointer; }
.desenho-borda.fita-1 { stroke: var(--cor-destaque); stroke-width: 5; }
.desenho-borda.fita-2 { stroke: var(--cor-fita2); stroke-width: 5; stroke-dasharray: 10 6; }
.desenho-borda-alvo { background: transparent; border: none; padding: 0; margin: 0; cursor: pointer; }
.desenho-borda-alvo:disabled { cursor: default; }
.desenho-borda-alvo:focus-visible { outline: 2px solid var(--cor-destaque); outline-offset: 2px; }
.desenho-furo { fill: var(--cor-texto-3); stroke: var(--cor-superficie); stroke-width: 1; }
.desenho-rasgo { stroke: var(--cor-usinagem); stroke-width: 2; stroke-dasharray: 8 3 2 3; }
.desenho-legenda-rasgo { display: inline-block; width: 22px; height: 0; border-top: 2px dashed var(--cor-usinagem); vertical-align: middle; }
.desenho-engrosso { fill: var(--cor-borda-campo); }
.desenho-legenda-engrosso { display: inline-block; width: 22px; height: 8px; background: var(--cor-borda-campo); vertical-align: middle; }
.desenho-legenda { display: flex; gap: var(--esp-4); font-size: var(--tam-legenda); color: var(--cor-texto-3); flex-wrap: wrap; justify-content: center; }
.desenho-legenda-item { display: inline-flex; align-items: center; gap: var(--esp-1); }
.desenho-legenda-linha { display: inline-block; width: 18px; height: 0; border-top: 3px solid var(--cor-sem-fita); }
.desenho-legenda-linha.fita-1 { border-top-color: var(--cor-destaque); }
.desenho-legenda-linha.fita-2 { border-top-color: var(--cor-fita2); border-top-style: dashed; }

/* Etiqueta fiel (mesmo mapa de campos do ZPL — ver App\Services\EtiquetaLayout) */
.etiqueta { position: relative; aspect-ratio: 2 / 1; container-type: inline-size; background: var(--cor-etiqueta-papel); color: var(--cor-etiqueta-tinta); border: 1px solid var(--cor-texto); overflow: hidden; font-family: var(--fonte-mono); }
.etq-campo { position: absolute; overflow: hidden; white-space: nowrap; line-height: 1; display: flex; align-items: center; }
.etq-campo.quebra { white-space: normal; line-height: 1.15; }
/* Caixa preta (código e medida): cresce com o texto — a largura do mapa (style) cortava "1000 x 100" e "2422 x 242". */
.etq-caixa { background: var(--cor-etiqueta-tinta); color: var(--cor-etiqueta-papel); justify-content: center; font-weight: 700; width: auto !important; padding: 0 5px; }
.etq-moldura { border: 2px solid var(--cor-etiqueta-tinta); }
.etq-linha { position: absolute; background: var(--cor-etiqueta-tinta); }
.etq-linha.tracejada { background: repeating-linear-gradient(to right, var(--cor-etiqueta-tinta) 0 6px, transparent 6px 10px); }
.etq-linha.tracejada.vertical { background: repeating-linear-gradient(to bottom, var(--cor-etiqueta-tinta) 0 6px, transparent 6px 10px); }
.etq-vertical { writing-mode: vertical-rl; transform: rotate(180deg); }
.etq-linha.traco-ponto { background: repeating-linear-gradient(to bottom, var(--cor-etiqueta-tinta) 0 7px, transparent 7px 9.5px, var(--cor-etiqueta-tinta) 9.5px 11px, transparent 11px 13.5px); }
.etq-furo { position: absolute; border: 1px solid var(--cor-etiqueta-tinta); border-radius: 50%; transform: translate(-50%, -50%); }
.etq-campo.centro { justify-content: center; }

/* =========================================================================
   4. TELAS ESPECÍFICAS
   ========================================================================= */
.tela-login { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--cor-fundo); }
.tela-login-card { width: 340px; background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio-card); padding: var(--esp-6); }
.tela-login-marca { display: flex; align-items: center; gap: var(--esp-2); font-weight: 600; font-size: var(--tam-card-lg); margin-bottom: var(--esp-5); }
.tela-login-card .botao--primario { width: 100%; margin-top: var(--esp-3); }

.detalhes-projeto { background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio-card); padding: var(--esp-3) var(--esp-4); margin-bottom: var(--esp-4); }
.detalhes-projeto summary { cursor: pointer; font-weight: 600; font-size: var(--tam-base); list-style: none; }
.detalhes-projeto summary::-webkit-details-marker { display: none; }
.detalhes-projeto summary::before { content: "\25B8  "; color: var(--cor-texto-3); }
.detalhes-projeto[open] summary::before { content: "\25BE  "; }
.detalhes-projeto[open] summary { margin-bottom: var(--esp-4); }
.linha-editavel { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); background: var(--cor-superficie-2); padding: var(--esp-2) var(--esp-3); border: 1px solid var(--cor-borda); border-radius: var(--raio-campo); margin-bottom: var(--esp-2); }
.linha-ordem { display: inline-flex; gap: 2px; }
.linha-nome { flex: 1 1 220px; }
.lista-linhas { margin-bottom: var(--esp-4); }

/* Vista 3D do módulo (etapa 7) — public_html/assets/js/vista3d.js */
.vista3d { display: flex; flex-direction: column; gap: var(--esp-2); }
.vista3d--ampliada { flex: 1; min-height: 0; }
dialog.dialogo--vista3d { max-width: none; width: 95vw; height: 90vh; padding: var(--esp-3); }
dialog.dialogo--vista3d[open] { display: flex; flex-direction: column; }
/* Barra do 3D do módulo (ajuste "interface final"): o padrão da barra da Montagem 3D — vistas só com ícone (cubos próprios), botões liga/desliga com ícone + texto (o checkbox fica dentro, escondido), Explodir com ícone e Ampliar só com ícone. */
.vista3d-barra { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); }
.vista3d-grupo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); }
.vista3d-vistas { gap: 0; flex-wrap: nowrap; }
.vista3d-botao, .vista3d-alternar { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: var(--altura-botao-pequeno); padding: 0 var(--esp-3); background: var(--cor-superficie); border: 1px solid var(--cor-borda-campo); border-radius: var(--raio-campo); color: var(--cor-texto); font: inherit; font-size: var(--tam-meta); font-weight: 500; cursor: pointer; white-space: nowrap; user-select: none; }
.vista3d-botao:hover, .vista3d-alternar:hover { border-color: var(--cor-destaque); z-index: 1; }
.vista3d-botao:focus-visible, .vista3d-alternar:has(.vista3d-alternar-caixa:focus-visible) { outline: 2px solid var(--cor-destaque); outline-offset: 2px; z-index: 1; }
.vista3d-botao--icone { width: 34px; padding: 0; }
.vista3d-vistas .vista3d-botao { border-radius: 0; margin-left: -1px; }
.vista3d-vistas .vista3d-botao:first-child { border-radius: var(--raio-campo) 0 0 var(--raio-campo); margin-left: 0; }
.vista3d-vistas .vista3d-botao:last-child { border-radius: 0 var(--raio-campo) var(--raio-campo) 0; }
.vista3d-alternar:has(.vista3d-alternar-caixa:checked), .vista3d-botao[aria-pressed="true"] { background: var(--cor-destaque-suave); border-color: var(--cor-destaque); color: var(--cor-destaque-escuro); font-weight: 600; }
.vista3d-alternar[hidden] { display: none; }
.vista3d-alternar-caixa { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.vista3d .vista3d-barra .icone { width: 18px; height: 18px; flex: none; vertical-align: middle; }
.vista3d .vista3d-barra .icone-face { fill: var(--cor-destaque); stroke: none; opacity: .55; }
.vista3d-explodir { display: inline-flex; align-items: center; gap: var(--esp-2); color: var(--cor-texto-2); }
.vista3d-explodir input { width: 120px; accent-color: var(--cor-destaque); }
.vista3d-ampliar { margin-left: auto; }
.vista3d-ampliar .icone--minimize, .vista3d-ampliar[aria-pressed="true"] .icone--maximize { display: none; }
.vista3d-ampliar[aria-pressed="true"] .icone--minimize { display: inline; }
.vista3d-info { font-size: var(--tam-meta); color: var(--cor-texto-2); margin: 0; }
.vista3d-area { position: relative; height: 360px; background: var(--cor-superficie-2); border-radius: var(--raio-campo); overflow: hidden; }
.vista3d--ampliada .vista3d-area { flex: 1; height: auto; min-height: 0; }
.vista3d-area canvas { display: block; touch-action: none; }
.vista3d-area--clicavel canvas { cursor: pointer; }
.vista3d-area--pan canvas { cursor: grab; }
/* Ajuste "interface final": arrastando a vista, mão fechada; Espaço + Shift e o meio, o cursor de girar (rotate-3d, centro; sem ele, move). */
.vista3d-area.vista3d-area--vista-pan canvas { cursor: grabbing; }
.vista3d-area.vista3d-area--orbita canvas, .vista3d-area.vista3d-area--vista-girando canvas { cursor: url("../img/icones/rotate-3d.svg") 12 12, move; }
.vista3d-rotulos { position: absolute; top: 0; left: 0; pointer-events: none; }
.vista3d-rotulo { font-size: var(--tam-legenda); font-weight: 600; background: var(--cor-superficie); color: var(--cor-texto); border: 1px solid var(--cor-borda); border-radius: 4px; padding: 1px 4px; pointer-events: none; white-space: nowrap; }
.vista3d-rotulo--realce { background: var(--cor-realce-3d); border-color: var(--cor-texto); color: var(--cor-texto); }
.vista3d-rotulo--esmaecido { opacity: .35; }
.vista3d-aviso { background: var(--cor-aviso-fundo); color: var(--cor-aviso-texto); border-radius: var(--raio-campo); padding: var(--esp-3); margin: 0; }

.filtro-etiquetas { display: flex; gap: var(--esp-4); align-items: flex-end; margin-bottom: var(--esp-4); }
.filtro-etiquetas label { display: block; font-size: var(--tam-legenda); font-weight: 500; color: var(--cor-texto-2); margin-bottom: var(--esp-1); }
.acoes-etiquetas { display: flex; align-items: center; gap: var(--esp-3); flex-wrap: wrap; margin-bottom: var(--esp-4); }
.acoes-etiquetas-aviso { color: var(--cor-aviso-texto); font-size: var(--tam-meta); }
.grade-etiquetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--esp-4); }
.cartao-etiqueta-selecao { display: flex; flex-direction: column; gap: var(--esp-2); background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio-card); padding: var(--esp-3); }
.cartao-etiqueta-selecao.com-erro { opacity: .55; }
.cartao-etiqueta-topo { display: flex; align-items: center; justify-content: space-between; }
.cartao-etiqueta-copias { font-size: var(--tam-legenda); color: var(--cor-texto-3); }
.ordem-etiquetas { display: flex; gap: var(--esp-2); align-items: center; font-size: var(--tam-meta); color: var(--cor-texto-3); }
.grupo-chapa + .grupo-chapa { margin-top: var(--esp-5); }
.grupo-chapa-cabecalho { display: flex; align-items: center; gap: var(--esp-3); flex-wrap: wrap; margin-bottom: var(--esp-3); padding-bottom: var(--esp-2); border-bottom: 1px solid var(--cor-borda); }
.grupo-chapa-cabecalho h2 { font-size: var(--tam-card); margin: 0; }
.grupo-chapa-cabecalho .grupo-chapa-meta { color: var(--cor-texto-3); font-size: var(--tam-meta); flex: 1; }

/* Plano de corte (etapa 3) */
.plano-config-form { display: flex; gap: var(--esp-4); align-items: flex-end; flex-wrap: wrap; }
.plano-config-form label, .form-retalho label { display: block; font-size: var(--tam-legenda); font-weight: 500; color: var(--cor-texto-2); margin-bottom: var(--esp-1); }
.plano-status { margin: var(--esp-3) 0 0; font-size: var(--tam-meta); color: var(--cor-texto-2); }
.plano-erros { border-color: var(--cor-erro-texto); }
.plano-erros .card-titulo { color: var(--cor-erro-texto); }
.form-retalho { display: flex; gap: var(--esp-3); align-items: flex-end; flex-wrap: wrap; margin-top: var(--esp-4); padding-top: var(--esp-4); border-top: 1px solid var(--cor-linha); }
.form-retalho .form-retalho-dica { flex-basis: 100%; margin: 0; }
.plano-config-form .campo-numero, .form-retalho .campo-numero, .tabela-retalhos .campo-numero { width: 90px; text-align: right; }
.tabela-retalhos select { max-width: 260px; }
.plano-material { margin-top: var(--esp-5); }
.plano-material-cabecalho { display: flex; align-items: baseline; gap: var(--esp-3); flex-wrap: wrap; margin-bottom: var(--esp-2); }
.plano-material-cabecalho h2 { font-size: var(--tam-card-lg); margin: 0; }
.plano-material-meta { color: var(--cor-texto-3); font-size: var(--tam-meta); }
.campo-cor { display: flex; gap: var(--esp-2); align-items: center; }
.campo-cor input[type="color"] { width: 44px; height: var(--altura-campo); padding: 2px; border: 1px solid var(--cor-borda-campo); border-radius: var(--raio-campo); background: var(--cor-superficie); cursor: pointer; }
.campo-cor input[data-cor-texto] { width: 110px; }

/* Padrões de chapa e fita (etapa 8) — amostra de cor, blocos da tela de Materiais */
.amostra-cor { display: inline-block; flex: none; width: 22px; height: 22px; border-radius: 4px; border: 1px solid var(--cor-borda-campo); background: var(--amostra, var(--cor-material-padrao)); vertical-align: middle; }
.amostra-cor--grande { width: 36px; height: 36px; border-radius: var(--raio-campo); }
.amostra-cor--vazia { background: var(--cor-superficie); border-style: dashed; }
.campo-com-amostra { display: flex; align-items: center; gap: var(--esp-2); }
.campo-com-amostra select { flex: 1; min-width: 0; }
.padrao-resumo { display: flex; align-items: center; gap: var(--esp-2); margin: 0 0 var(--esp-4); color: var(--cor-texto-2); }
.bloco-padrao { margin-bottom: var(--esp-4); }
.bloco-padrao--inativo { opacity: .7; }
.bloco-padrao-cabecalho { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-3); margin-bottom: var(--esp-3); }
.bloco-padrao-titulo { flex: 1; min-width: 160px; }
.bloco-padrao-titulo h2 { font-size: var(--tam-card-lg); margin: 0; }
.bloco-padrao-meta { color: var(--cor-texto-3); font-size: var(--tam-meta); }
.bloco-padrao-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); }
.bloco-padrao-listas > div { padding-right: var(--esp-4); box-sizing: border-box; }
.bloco-padrao-subtitulo { font-size: var(--tam-legenda); text-transform: uppercase; letter-spacing: .05em; color: var(--cor-texto-3); margin: var(--esp-2) 0; }
.bloco-novo-padrao { border: 1px solid var(--cor-borda); border-radius: var(--raio-campo); padding: var(--esp-3); margin: var(--esp-4) 0; }
.bloco-novo-padrao legend { font-size: var(--tam-legenda); font-weight: 600; color: var(--cor-texto-2); padding: 0 var(--esp-1); }
.rotulo-grupo { font-size: var(--tam-meta); font-weight: 500; color: var(--cor-texto-2); margin: var(--esp-3) 0 var(--esp-1); }
.caixas-linha { display: flex; flex-wrap: wrap; gap: var(--esp-2) var(--esp-4); }

/* Folha do plano de corte (etapa 6b): o mesmo desenho na tela e na impressão.
   --cor-material / --cor-material-claro vêm do cadastro (style inline); sem cor, cinza. */
.folha-chapa { --cor-material: var(--cor-material-padrao); --cor-material-claro: var(--cor-material-padrao-claro); background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio-card); padding: var(--esp-5); margin-top: var(--esp-4); display: flex; flex-direction: column; gap: var(--esp-3); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.folha-cabecalho { display: flex; align-items: stretch; background: var(--cor-material-claro); border: 1.5px solid var(--cor-material); border-left: 14px solid var(--cor-material); border-radius: var(--raio-card); overflow: hidden; }
.folha-material { flex: 1; padding: var(--esp-3) var(--esp-5); min-width: 0; }
.folha-rotulo { display: block; font-size: var(--tam-legenda); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--cor-texto-2); }
.folha-material-linha { display: flex; align-items: center; gap: var(--esp-4); flex-wrap: wrap; }
.folha-material-nome { margin: 0; font-size: 36px; line-height: 1.1; font-weight: 600; letter-spacing: .02em; color: var(--cor-texto); }
.folha-selo-espessura { background: var(--cor-material); color: var(--cor-superficie); font-weight: 600; font-size: 20px; padding: 2px 12px; border-radius: var(--raio-campo); }
.folha-selo-retalho { background: var(--cor-selo-retalho); color: var(--cor-superficie); font-weight: 600; font-size: 16px; letter-spacing: .04em; padding: 4px 12px; border-radius: var(--raio-campo); }
.folha-contagem { background: var(--cor-superficie); border-left: 1.5px solid var(--cor-material); padding: var(--esp-3) var(--esp-5); display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: var(--esp-1); }
.folha-contagem-numeros { font-size: 40px; line-height: 1; color: var(--cor-texto-3); white-space: nowrap; }
.folha-contagem-numeros strong { color: var(--cor-texto); font-weight: 600; }
.folha-contagem-barra { color: var(--cor-texto-3); margin: 0 4px; }
.folha-marcar { font-size: var(--tam-meta); color: var(--cor-texto-2); display: inline-flex; gap: var(--esp-1); align-items: center; cursor: pointer; }
.folha-dados { display: flex; flex-wrap: wrap; gap: var(--esp-1) var(--esp-6); margin: 0; font-size: var(--tam-base); color: var(--cor-texto-2); }
.folha-dados strong { color: var(--cor-texto); }
.folha-dados-data { margin-left: auto; }
.folha-corpo { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: var(--esp-5); align-items: start; }
.folha-desenho { border: 1.5px solid var(--cor-texto); line-height: 0; }
/* Na tela, o desenho cabe numa tela: a chapa (lado maior na horizontal, FolhasPlano::transpor) com no máximo 70% da altura da janela, na proporção dela. A impressão usa a regra da seção 6. */
@media screen { .folha-desenho { max-width: calc(70vh * var(--proporcao-folha)); } }
.svg-folha { display: block; width: 100%; height: auto; }
.svg-folha .chapa-contorno { fill: var(--cor-superficie); stroke: var(--cor-texto); }
.svg-folha .chapa-util { fill: none; stroke: var(--cor-sem-fita); }
.svg-folha .sobra { stroke: var(--cor-sem-fita); }
.svg-folha .sobra-hachura { stroke: var(--cor-sem-fita); }
.svg-folha .sobra-texto { fill: var(--cor-texto-3); font-family: var(--fonte-mono); }
.svg-folha .peca { fill: var(--cor-material-claro); stroke: var(--cor-material); }
.svg-folha .traco-fita { stroke: var(--cor-traco-fita); }
.svg-folha .traco-rasgo { stroke: var(--cor-usinagem); }
.svg-folha .furo { fill: none; stroke: var(--cor-usinagem); }
.svg-folha .sublinhado { stroke: var(--cor-texto); }
.svg-folha .peca-medida { fill: var(--cor-texto); font-family: var(--fonte-mono); font-weight: 600; }
.svg-folha .peca-rotulo { fill: var(--cor-texto); font-family: var(--fonte-texto); font-weight: 600; }
.svg-folha .peca-plano { cursor: default; }
.svg-folha .peca-plano.destacada .peca { fill: var(--cor-material); fill-opacity: .4; }
.folha-lateral-titulo { margin: 0 0 var(--esp-2); font-size: var(--tam-base); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--cor-texto-2); }
.folha-tabela td { font-size: var(--tam-base); }
.folha-tabela td.mono, .folha-tabela th { white-space: nowrap; }
.folha-tabela .folha-num, .folha-tabela .folha-codigo { font-weight: 600; }
.folha-tabela tr.destacada td { background: var(--cor-material-claro); }
.medida-sublinhada.tracos-1 { text-decoration: underline; text-underline-offset: 3px; }
.medida-sublinhada.tracos-2 { text-decoration: underline double; text-underline-offset: 3px; }
.folha-legenda { margin-top: var(--esp-4); border: 1px solid var(--cor-borda); border-radius: var(--raio-card); padding: var(--esp-3) var(--esp-4); display: flex; flex-direction: column; gap: var(--esp-2); font-size: var(--tam-meta); color: var(--cor-texto-2); }
.folha-legenda-item { display: flex; gap: var(--esp-3); align-items: center; }
.folha-legenda-item > span:first-child { flex: 0 0 30px; }
.folha-simbolo-fita { display: inline-block; height: 0; border-top: 3px solid var(--cor-traco-fita); }
.folha-simbolo-fita.fita-2 { border-top-style: dashed; }
.folha-simbolo-sublinhado { text-decoration: underline double; text-align: center; color: var(--cor-texto); }
.folha-simbolo-furo { display: inline-block; flex: 0 0 16px !important; max-width: 16px; height: 16px; margin: 0 7px; border: 2px solid var(--cor-usinagem); border-radius: 50%; }
.folha-simbolo-rasgo { display: inline-block; height: 2px; background: repeating-linear-gradient(to right, var(--cor-usinagem) 0 10px, transparent 10px 13px, var(--cor-usinagem) 13px 15px, transparent 15px 18px); }
.folha-simbolo-sobra { display: inline-block; height: 16px; border: 1px solid var(--cor-sem-fita); background: repeating-linear-gradient(45deg, var(--cor-sem-fita) 0 1px, var(--cor-superficie) 1px 5px); }
.folha-simbolo-veio { text-align: center; }
.folha-rodape { display: flex; justify-content: space-between; gap: var(--esp-3); flex-wrap: wrap; border-top: 1px solid var(--cor-borda); padding-top: var(--esp-2); font-size: var(--tam-meta); color: var(--cor-texto-3); }
.folha-rodape .mono { color: var(--cor-texto-2); font-weight: 600; }
.chapa-cortes { margin-top: var(--esp-3); font-size: var(--tam-meta); }
.chapa-cortes summary { cursor: pointer; color: var(--cor-destaque); }
.chapa-cortes ol { margin: var(--esp-2) 0 0; padding-left: var(--esp-6); color: var(--cor-texto-2); }

/* Estatísticas (etapa 3) */
.grade-indicadores { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--esp-3); }
.indicador { background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio-card); padding: var(--esp-3) var(--esp-4); }
.indicador-rotulo { font-size: var(--tam-legenda); color: var(--cor-texto-3); text-transform: uppercase; letter-spacing: .05em; }
.indicador-valor { font-family: var(--fonte-mono); font-weight: 600; font-size: var(--tam-titulo); color: var(--cor-texto); }
.indicador-detalhe { font-size: var(--tam-meta); color: var(--cor-texto-3); }
.tabela tfoot td { font-weight: 600; border-top: 1px solid var(--cor-borda); }

/* =========================================================================
   5. RESPONSIVO
   ========================================================================= */
@media (max-width: 899px) {
  .pagina { --margem-pagina: var(--esp-4); }
  .topo { flex-wrap: wrap; height: auto; padding-top: var(--esp-3); padding-bottom: var(--esp-3); }
  .botao { min-height: var(--altura-toque-min); }
  .vista3d-area { height: 300px; }
  .vista3d--ampliada .vista3d-area { height: auto; }
  dialog.dialogo--vista3d { width: 100vw; height: 100dvh; max-height: none; border-radius: 0; }
}
@media (max-width: 1099px) {
  .folha-corpo { grid-template-columns: 1fr; }
}
@media (max-width: 899px) {
  .folha-chapa { padding: var(--esp-3); }
  .folha-material-nome { font-size: 24px; }
  .folha-contagem-numeros { font-size: 28px; }
  .folha-dados-data { margin-left: 0; }
  .tabela-retalhos thead, .plano-erros .tabela thead { display: none; }
  .tabela-retalhos, .tabela-retalhos tbody, .tabela-retalhos tr, .tabela-retalhos td, .plano-erros .tabela, .plano-erros .tabela tbody, .plano-erros .tabela tr, .plano-erros .tabela td { display: block; width: 100%; }
  .tabela-retalhos tr, .plano-erros .tabela tr { border: 1px solid var(--cor-linha); border-radius: var(--raio-campo); margin-bottom: var(--esp-2); padding: var(--esp-2); }
  .tabela-retalhos td, .plano-erros .tabela td { border: none; padding: 2px 0; text-align: left !important; }
  .tabela-retalhos td[data-rotulo]::before, .plano-erros .tabela td[data-rotulo]::before { content: attr(data-rotulo) ": "; font-weight: 600; color: var(--cor-texto-3); }
}

/* =========================================================================
   6. IMPRESSÃO (plano de corte: só as chapas)
   ========================================================================= */
/* Folha do plano: A4 deitado, uma chapa por página (página nomeada — não
   afeta a impressão das outras telas, como a lista de compras). */
@page folha-plano { size: A4 landscape; margin: 8mm; }
@media print {
  .topo, .abas, .cabecalho-pagina-acoes, .breadcrumb, .mensagem, .plano-config, .plano-retalhos, .plano-erros { display: none !important; }
  body, .conteudo { background: none; }
  .so-tela, .barra-acoes { display: none !important; }
  .so-impressao { display: block; }
  /* Cabeçalho das telas fora do projeto: a mesma posição da impressão de antes da faixa do layout */
  .cabecalho-pagina:not(.titulo-impressao) { margin-left: calc(var(--margem-pagina) - var(--esp-6)); margin-right: calc(var(--margem-pagina) - var(--esp-6)); }
  .pagina-plano .cabecalho-pagina, .pagina-plano .card { display: none !important; }
  .pagina-plano, .pagina-plano .conteudo, .plano-material { margin: 0; padding: 0; }
  /* Tudo da tela do plano na mesma página nomeada: trocar de página nomeada força
     quebra, e o que vem antes da 1ª folha viraria uma página em branco. */
  .pagina-plano, .pagina-plano .plano-material { page: folha-plano; }
  .conteudo:has(.pagina-plano) { padding: 0; margin: 0; }
  .folha-chapa { page: folha-plano; break-after: page; page-break-after: always; break-inside: avoid; page-break-inside: avoid; margin: 0; padding: 0; border: none; border-radius: 0; height: 193mm; overflow: hidden; gap: 2.5mm; }
  /* Sem quebra depois da última folha impressa (evita página em branco no fim). */
  .plano-material:last-of-type .folha-chapa:last-of-type, .folha-chapa.folha-ultima { break-after: auto; page-break-after: auto; }
  .folha-chapa.fora-da-impressao { display: none !important; }
  .folha-cabecalho { flex: 0 0 auto; }
  .folha-material { padding: 2mm 5mm; }
  .folha-material-nome { font-size: 22pt; }
  .folha-selo-espessura { font-size: 13pt; }
  .folha-selo-retalho { font-size: 11pt; }
  .folha-contagem { padding: 2mm 5mm; }
  .folha-contagem-numeros { font-size: 26pt; }
  .folha-dados { font-size: 9.5pt; flex-wrap: nowrap; gap: 6mm; white-space: nowrap; }
  .folha-corpo { flex: 1 1 auto; min-height: 0; grid-template-columns: minmax(0, 1fr) 92mm; gap: 5mm; }
  .folha-desenho { max-height: 100%; }
  .svg-folha { max-height: 142mm; }
  .folha-lateral-titulo { font-size: 9pt; }
  .folha-tabela th { font-size: 7.5pt; padding: 1mm 1.5mm; }
  .folha-tabela td { font-size: 9pt; padding: 1mm 1.5mm; }
  .folha-legenda { font-size: 8pt; padding: 2mm 3mm; gap: 1.5mm; margin-top: 3mm; }
  .folha-rodape { flex: 0 0 auto; font-size: 8pt; padding-top: 1.5mm; margin-top: auto; }
  .chapa-cortes:not([open]) { display: none; }
}

/* Campo de material por padrão + espessura (etapa 13: criador de módulo da V2 e Configurações > Tipos de módulo) */
.cm-material { margin-bottom: var(--esp-3); }
.cm-material-linha { display: flex; align-items: center; flex-wrap: wrap; gap: var(--esp-2); }
.cm-material-linha .campo-com-amostra { flex: 1 1 180px; min-width: 0; }
.cm-espessuras { display: inline-flex; flex-wrap: wrap; gap: var(--esp-1); }
.cm-espessura { min-width: 44px; height: 38px; padding: 0 var(--esp-2); border: 1px solid var(--cor-borda-campo); border-radius: var(--raio-campo); background: var(--cor-superficie); color: var(--cor-texto-2); font-family: var(--fonte-mono); font-size: var(--tam-base); font-weight: 600; cursor: pointer; }
.cm-espessura:hover { border-color: var(--cor-destaque); }
.cm-espessura[aria-pressed="true"] { background: var(--cor-destaque); border-color: var(--cor-destaque); color: var(--cor-superficie); }
.cm-espessura:focus-visible { outline: 2px solid var(--cor-destaque); outline-offset: 2px; }
.tm-criador { flex: 1 1 100%; margin: var(--esp-2) 0 0; padding: var(--esp-3); border: 1px solid var(--cor-borda); border-radius: var(--raio-campo); background: var(--cor-superficie); }
.tm-criador legend { padding: 0 var(--esp-1); font-weight: 600; font-size: var(--tam-meta); color: var(--cor-texto-2); }
.tm-criador-linha { display: flex; flex-wrap: wrap; gap: var(--esp-3) var(--esp-4); margin-bottom: var(--esp-3); }
.tm-criador-linha:last-child { margin-bottom: 0; }
.tm-criador .tm-numero { display: flex; flex-direction: column; gap: var(--esp-1); margin: 0; font-size: var(--tam-legenda); font-weight: 500; color: var(--cor-texto-2); }
.tm-numero input { width: 110px; }
.tm-material { flex: 1 1 300px; min-width: 0; }
.tm-material label { font-size: var(--tam-legenda); font-weight: 500; color: var(--cor-texto-2); }

/* Rodapé do módulo (etapa 15): criador e configuração da V2 — grupo que fecha numa linha quando desligado */
.rodape-cabeca { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2) var(--esp-4); }
.rodape-cabeca [hidden] { display: none; }
.rodape .rodape-interruptor { display: inline-flex; align-items: center; gap: var(--esp-2); margin: 0; font-weight: 600; cursor: pointer; }
.rodape .rodape-interruptor input { width: 18px; height: 18px; margin: 0; accent-color: var(--cor-destaque); }
.rodape-formato { display: inline-flex; border: 1px solid var(--cor-borda-campo); border-radius: var(--raio-campo); overflow: hidden; }
.rodape .rodape-formato label { display: inline-flex; align-items: center; gap: var(--esp-1); margin: 0; padding: 0 var(--esp-3); min-height: 36px; cursor: pointer; color: var(--cor-texto-2); }
.rodape-formato label + label { border-left: 1px solid var(--cor-borda-campo); }
.rodape-formato input { margin: 0; accent-color: var(--cor-destaque); }
.rodape-formato label:has(input:checked) { background: var(--cor-destaque-suave); color: var(--cor-destaque-escuro); font-weight: 600; }
.rodape .rodape-altura { display: inline-flex; align-items: center; gap: var(--esp-2); margin: 0; }
.rodape .rodape-altura input[type="text"] { width: 80px; display: inline-block; margin: 0; }
.rodape-corpo { margin-top: var(--esp-3); }
.rodape-corpo [data-rodape-so][hidden] { display: none; }
.rodape-opcoes { padding-right: var(--esp-3); }
.rodape-auto { display: inline-flex; align-items: center; gap: var(--esp-1); }
.rodape .rodape-auto input[type="text"] { width: 150px; display: inline-block; margin: 0; }
.rodape-auto-voltar { min-width: 32px; font-size: var(--tam-base); }
.v2-config .rodape-col { width: 100%; }
.v2-config .rodape-opcoes { padding-right: 0; margin-bottom: var(--esp-3); }
.rodape-planta { display: grid; grid-template-columns: auto minmax(60px, 140px) auto; justify-content: center; grid-template-areas: ". fundo ." "esquerda caixa direita" ". frente ."; align-items: center; justify-items: center; gap: var(--esp-2); }
.rodape .rodape-afastamento { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 0; font-size: var(--tam-legenda); color: var(--cor-texto-2); }
.rodape .rodape-afastamento input[type="text"] { width: 72px; margin: 0; text-align: center; }
.rodape-afastamento--fundo { grid-area: fundo; }
.rodape-afastamento--esquerda { grid-area: esquerda; }
.rodape-afastamento--direita { grid-area: direita; }
.rodape-afastamento--frente { grid-area: frente; }
.rodape-planta-caixa { grid-area: caixa; display: flex; flex-direction: column; align-items: center; justify-content: space-between; width: 100%; min-height: 72px; padding: var(--esp-1); border: 2px solid var(--cor-texto-3); border-radius: 2px; background: var(--cor-superficie-2); font-size: var(--tam-legenda); color: var(--cor-texto-3); }
.rodape-planta-frente { font-weight: 600; }
.tm-rodape { align-items: flex-end; }
/* Grupo "Fundo" do módulo (etapa 16b): forma, rasgo e mini-desenho em corte. */
.fundo-modulo [hidden] { display: none; }
.fundo-col { padding-right: var(--esp-3); }
.v2-config .fundo-col { width: 100%; padding-right: 0; }
.fundo-forma { display: inline-flex; border: 1px solid var(--cor-borda-campo); border-radius: var(--raio-campo); overflow: hidden; }
.fundo-modulo .fundo-forma label { display: inline-flex; align-items: center; gap: var(--esp-1); margin: 0; padding: 0 var(--esp-3); min-height: 36px; cursor: pointer; color: var(--cor-texto-2); }
.fundo-forma label + label { border-left: 1px solid var(--cor-borda-campo); }
.fundo-forma input { margin: 0; accent-color: var(--cor-destaque); }
.fundo-forma label:has(input:checked) { background: var(--cor-destaque-suave); color: var(--cor-destaque-escuro); font-weight: 600; }
.fundo-rasgo { display: flex; flex-wrap: wrap; gap: var(--esp-2) var(--esp-4); margin-top: var(--esp-3); }
.fundo-modulo .fundo-rasgo label { margin: 0; }
.fundo-modulo .fundo-rasgo input[type="text"] { width: 96px; }
.fundo-modulo .campo-ajuda { margin-top: var(--esp-2); }
.fundo-desenho { display: block; width: 100%; max-width: 220px; height: auto; margin: var(--esp-2) auto 0; }
.fundo-desenho-caixa { fill: var(--cor-superficie-2); stroke: var(--cor-texto-3); stroke-width: 1.5; }
.fundo-desenho-fundo { fill: var(--cor-destaque-suave); stroke: var(--cor-destaque); stroke-width: 1.5; }
.fundo-desenho-traseira { stroke: var(--cor-texto-3); stroke-width: 1; stroke-dasharray: 4 3; }
.fundo-desenho-cota { stroke: var(--cor-texto-2); stroke-width: 1; }
.fundo-desenho-texto { fill: var(--cor-texto-2); font-size: 10px; font-family: inherit; }
.tm-rodape-ativo { display: inline-flex; align-items: center; gap: var(--esp-1); margin: 0 0 var(--esp-2); font-size: var(--tam-legenda); font-weight: 500; color: var(--cor-texto-2); }

/* Etapa 18: página dentro da camada da Montagem 3D (iframe do criador) — sem o topo nem as faixas. */
.pagina--embutida .conteudo { padding-top: var(--esp-4); }