:root {
  --azul: #14294A; --azul-2: #2A4A7F; --dourado: #A8874F;
  --raio: 14px; --raio-campo: 10px;
  --fonte-titulo: "Montserrat", system-ui, sans-serif;
  --fonte: "Barlow", system-ui, sans-serif;
  --altura-barra: 64px;
  --altura-gerar: 96px;   /* barra fixa de baixo (.barra-gerar) com folga */
  --largura-areas: 72px;
  --papel-fundo: #FFFFFF; --papel-texto: #14294A; --papel-linha: #D6DCE4;
  --papel-texto-2: #56677F; --papel-ok: #2F7D5B; --papel-erro: #B23A3A; --papel-alerta: #A26B1B; --papel-and: #8E7243; --papel-sup: #F7F9FB;
  --dourado-sobre-azul: #D9B878;
  --ponto-on: #4CC38A; --ponto-off: #7B8798;
  color-scheme: light;
}
:root, :root[data-theme=claro] {
  --fundo: linear-gradient(135deg, #EEF2FA 0%, #F8F4EC 100%);
  --fundo-liso: #F2F4F8;
  --sup: rgba(255,255,255,.78); --sup-forte: #FFFFFF; --sup-borda: rgba(20,41,74,.08);
  --texto: #14294A; --texto-2: #56677F; --linha: rgba(20,41,74,.12);
  --sombra: 0 4px 18px rgba(20,41,74,.08); --sombra-alta: 0 12px 36px rgba(20,41,74,.18);
  --acao-a: #8F6F3A; --acao-b: #7A5F30; --acao-texto: #FFFFFF;
  --sel-a: #14294A; --sel-b: #2A4A7F; --sel-texto: #FFFFFF;
  --ok: #2F7D5B; --ok-fundo: #E8F5EE; --and: #8E7243; --and-fundo: #F6EEDC;
  --erro: #B23A3A; --erro-fundo: #F9E5E5; --esp: #1F4E8C; --esp-fundo: #E3ECF8;
  --alerta: #A26B1B;
  --palco-a: #FFFFFF; --palco-b: #E4EAF4; --palco-texto: #14294A;
  --foco: #A8874F;
}
:root[data-theme=escuro] {
  color-scheme: dark;
  --fundo: radial-gradient(circle at 20% 0%, #1B2F55 0%, #0A0F1A 60%);
  --fundo-liso: #0A0F1A;
  --sup: rgba(255,255,255,.045); --sup-forte: #121B2C; --sup-borda: rgba(255,255,255,.09);
  --texto: #E6EBF2; --texto-2: #9AA8BC; --linha: rgba(255,255,255,.12);
  --sombra: 0 4px 18px rgba(0,0,0,.35); --sombra-alta: 0 12px 36px rgba(0,0,0,.55);
  --acao-a: #D9B878; --acao-b: #A8874F; --acao-texto: #0A0F1A;
  --sel-a: #2A4A7F; --sel-b: #3C64A6; --sel-texto: #FFFFFF;
  --ok: #5FD49B; --ok-fundo: rgba(95,212,155,.14); --and: #D9B878; --and-fundo: rgba(217,184,120,.14);
  --erro: #FF8A8A; --erro-fundo: rgba(255,138,138,.14); --esp: #8DB4F0; --esp-fundo: rgba(141,180,240,.14);
  --alerta: #E8B765;
  --palco-a: #22385E; --palco-b: #0D1424; --palco-texto: #E6EBF2;
  --foco: #D9B878;
}
/* apelidos dos nomes antigos para os módulos que ainda os usam */
:root {
  --azul-escuro: var(--sel-a); --azul-palco: var(--palco-b); --dourado-claro: #E8DCC4; --dourado-texto: var(--acao-b);
  --papel: var(--fundo-liso); --branco: var(--sup-forte);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
html { scroll-padding-bottom: calc(var(--altura-gerar) + 12px); }   /* a barra fixa de baixo não cobre o campo em foco */
body { font-family: var(--fonte); font-size: 16px; line-height: 1.45; color: var(--texto); background: var(--fundo-liso); background-image: var(--fundo); background-attachment: fixed; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--fonte-titulo); margin: 0; letter-spacing: -0.01em; }
h1 { font-size: 30px; font-weight: 700; line-height: 1.15; }
h2 { font-size: 20px; font-weight: 600; }
h3 { font-size: 16px; font-weight: 600; }
p { margin: 0; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, input[type=range]:focus-visible, .entrada:focus-within { outline: 2px solid var(--foco); outline-offset: 2px; }
:target, h1[tabindex], input, select, textarea { scroll-margin-top: calc(var(--altura-barra) + 12px); }

/* ---------- areas de toque (24 px no computador, 44 px nos controles do celular) */
.chave { min-height: 44px; padding: 0 6px; }
a.volta { min-height: 32px; }
.campo .ajuda a { display: inline-flex; align-items: center; min-height: 24px; }
input[type=range] { min-height: 24px; }
label:has(> input[type=checkbox]) { display: inline-flex; align-items: center; gap: 8px; min-height: 24px; cursor: pointer; }
input[type=checkbox] { width: 20px; height: 20px; }
@media (max-width: 600px) {
  a.volta, .marca { min-height: 44px; }
  .marca { min-width: 44px; }
  label:has(> input[type=checkbox]) { min-height: 44px; }
  :is(input:not([type=checkbox]):not([type=radio]), select, textarea, button):not(:is(.palco, .vistas, .painel-corte, .vt-pontos) *) { min-height: 44px; min-width: 44px; }
}
.num { font-variant-numeric: tabular-nums; }
.mudo { color: var(--texto-2); }
[hidden] { display: none !important; }

/* ---------- botoes */
.bt { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--sup-borda); background: var(--sup-forte); color: var(--texto); cursor: pointer; font-weight: 600; text-decoration: none; white-space: nowrap; box-shadow: 0 1px 4px rgba(20,41,74,.06); transition: transform .12s, box-shadow .12s, background .12s; }
.bt:hover { box-shadow: var(--sombra); }
.bt:active { transform: translateY(1px); }
.bt.principal { background: linear-gradient(135deg, var(--sel-a), var(--sel-b)); color: var(--sel-texto); border-color: transparent; }
.bt.dourado { background: linear-gradient(135deg, var(--acao-a), var(--acao-b)); color: var(--acao-texto); border-color: transparent; box-shadow: 0 4px 14px rgba(168,135,79,.35); }
.bt.fantasma { background: transparent; border-color: transparent; box-shadow: none; }
.bt.fantasma:hover { background: var(--sup); }
.bt:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.bt svg { width: 18px; height: 18px; flex: none; }
.bt.peq { height: 32px; padding: 0 12px; font-size: 14px; }

/* ---------- moldura: topo flutuante, barra de áreas, gaveta */
.barra { position: sticky; top: 8px; z-index: 30; display: flex; align-items: center; gap: 16px; height: 56px; margin: 8px 8px 0 calc(var(--largura-areas) + 16px); padding: 0 16px; border-radius: 16px; background: var(--sup); border: 1px solid var(--sup-borda); box-shadow: var(--sombra); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: var(--texto); }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.marca img { height: 32px; }
:root[data-theme=claro] .marca img, :root:not([data-theme]) .marca img { filter: brightness(0) saturate(100%) invert(13%) sepia(31%) saturate(2140%) hue-rotate(194deg); }
.marca span { font-family: var(--fonte-titulo); font-weight: 500; letter-spacing: .2em; font-size: 12px; }
.busca-topo { flex: 1; max-width: 380px; display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--linha); background: var(--sup-forte); color: var(--texto-2); cursor: pointer; }
.busca-topo svg { width: 16px; height: 16px; }
.busca-topo span { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.busca-topo kbd, dialog.busca kbd { font: 12px var(--fonte); padding: 2px 6px; border-radius: 6px; border: 1px solid var(--linha); }
.barra .direita { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.maq { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--sup-forte); border: 1px solid var(--linha); font-size: 13px; }
.maq i { width: 8px; height: 8px; border-radius: 50%; background: var(--texto-2); }
.maq.on i { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-fundo); }
.chave { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; user-select: none; }
.chave input { appearance: none; width: 34px; height: 20px; border-radius: 999px; background: var(--linha); position: relative; cursor: pointer; margin: 0; }
.chave input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #FFFFFF; transition: transform .15s; }
.chave input:checked { background: linear-gradient(135deg, var(--acao-a), var(--acao-b)); }
.chave input:checked::after { transform: translateX(14px); }
.usuario { max-width: 180px; padding-left: 10px; border-left: 1px solid var(--linha); font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.areas { position: fixed; z-index: 31; left: 8px; top: 8px; bottom: 8px; width: var(--largura-areas); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 0; border-radius: 18px; background: var(--sup); border: 1px solid var(--sup-borda); box-shadow: var(--sombra); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.areas a { display: grid; justify-items: center; gap: 4px; width: 64px; padding: 6px 0; border-radius: 12px; color: var(--texto-2); text-decoration: none; font-size: 11px; font-weight: 600; text-align: center; }
.areas .ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--sup-forte); box-shadow: 0 1px 4px rgba(20,41,74,.1); }
.areas .ic svg { width: 20px; height: 20px; }
.areas a:hover .ic { box-shadow: var(--sombra); }
.areas a[aria-current=page] { color: var(--texto); }
.areas a[aria-current=page] .ic { background: linear-gradient(135deg, var(--sel-a), var(--sel-b)); color: var(--sel-texto); }
.gaveta { position: fixed; z-index: 32; left: calc(var(--largura-areas) + 18px); width: 300px; max-height: calc(100dvh - 32px); overflow-y: auto; padding: 12px; border-radius: 18px; background: var(--sup-forte); border: 1px solid var(--sup-borda); box-shadow: var(--sombra-alta); }
.gaveta .gav-cab a { display: block; padding: 6px 8px; font-family: var(--fonte-titulo); font-weight: 700; color: var(--texto); text-decoration: none; }
.gaveta .fam { margin: 10px 8px 4px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-2); }
.gaveta > a { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 4px 8px; border-radius: 10px; color: var(--texto); text-decoration: none; }
.gaveta > a img { width: 32px; height: 32px; object-fit: contain; border-radius: 8px; background: var(--sup); }
.gaveta > a:hover, .gaveta > a:focus-visible { background: var(--sup); }
.gaveta > a[aria-current=page] { background: var(--esp-fundo); font-weight: 600; }
nav.areas ~ main#conteudo { margin-left: calc(var(--largura-areas) + 16px); }
nav.areas ~ main#conteudo.pagina { margin-left: calc(var(--largura-areas) + 16px + max(0px, (100vw - var(--largura-areas) - 16px - 1240px) / 2)); }

dialog.busca { width: min(620px, calc(100% - 32px)); margin-top: 12vh; padding: 0; border: 1px solid var(--sup-borda); border-radius: 18px; background: var(--sup-forte); color: var(--texto); box-shadow: var(--sombra-alta); }
dialog.busca::backdrop { background: rgba(10,15,26,.35); backdrop-filter: blur(2px); }
.bq-campo { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--linha); }
.bq-campo input { flex: 1; border: 0; background: transparent; font-size: 18px; outline: none; color: inherit; }
.bq-res { max-height: 60vh; overflow-y: auto; padding: 8px; }
.bq-res h3 { margin: 10px 8px 4px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-2); }
.bq-res button { display: flex; justify-content: space-between; gap: 12px; width: 100%; min-height: 40px; padding: 8px 10px; border: 0; border-radius: 10px; background: transparent; text-align: left; cursor: pointer; color: inherit; }
.bq-res button:hover, .bq-res button:focus-visible { background: var(--sup); }
.bq-res button span { color: var(--texto-2); font-size: 14px; }

.cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.cartao-peca { display: grid; gap: 6px; padding: 10px; border-radius: var(--raio); background: var(--sup); border: 1px solid var(--sup-borda); box-shadow: var(--sombra); color: var(--texto); text-decoration: none; transition: transform .12s; }
.cartao-peca:hover { transform: translateY(-2px); box-shadow: var(--sombra-alta); }
.cartao-peca .img { display: grid; place-items: center; height: 110px; border-radius: 10px; background: radial-gradient(circle at 50% 40%, var(--palco-a), var(--palco-b)); }
.cartao-peca img { max-width: 90%; max-height: 100px; object-fit: contain; }
.cartao-peca small { color: var(--texto-2); }

/* ---------- cliente */
dialog.dlg-cliente { width: min(520px, calc(100% - 32px)); }
.cc-lista { display: grid; gap: 6px; max-height: 320px; overflow-y: auto; }
.cc-op { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--linha); border-radius: var(--raio-campo); background: var(--sup-forte); text-align: left; cursor: pointer; }
.cc-op:hover { border-color: var(--sel-b); }
.cc-op.atual { box-shadow: inset 3px 0 0 var(--dourado); }
.cc-op span { color: var(--texto-2); font-size: 14px; }
.cc-vazio { padding: 6px 2px; }
#ccNovo summary { cursor: pointer; font-weight: 600; }
.cc-form { display: grid; gap: 10px; margin-top: 12px; }
.cc-form .bt { justify-self: start; }
.entrada input[readonly] { color: var(--texto-2); background: var(--sup); cursor: default; }

/* ---------- painel */
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.painel-tela { display: grid; gap: 16px; }
.pn-destaque { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); min-height: 300px; border-radius: 22px; overflow: hidden; color: #E6EBF2; background: radial-gradient(circle at 70% 40%, #22385E, #0D1424); box-shadow: var(--sombra-alta); }
.pn-texto { display: grid; align-content: center; gap: 8px; padding: 32px; z-index: 1; }
.pn-sobre { font-family: var(--fonte-titulo); font-size: 12px; font-weight: 600; letter-spacing: .18em; color: #D9B878; }
.pn-texto h2 { font-size: 30px; color: #FFFFFF; }
.pn-texto p { color: rgba(230,235,242,.75); }
.pn-acoes { margin-top: 8px; }
.pn-3d { position: relative; min-height: 300px; }
.pn-3d canvas { display: block; width: 100%; height: 100%; }
.pn-grade { display: grid; grid-template-columns: 1.4fr 1fr 0.8fr; gap: 16px; align-items: start; }
.pn-caixa { padding: 16px; border-radius: var(--raio); background: var(--sup); border: 1px solid var(--sup-borda); box-shadow: var(--sombra); }
.pn-caixa header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.pn-caixa header .mudo { display: inline-flex; align-items: center; min-height: 32px; }
.pn-atalhos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pn-atalhos a { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 10px; border-radius: 12px; background: var(--sup-forte); color: var(--texto); text-decoration: none; font-weight: 600; }
.pn-atalhos img { width: 28px; height: 28px; object-fit: contain; }
.pn-maq { display: flex; justify-content: space-between; gap: 8px; margin: 6px 0; }
.filtros { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 16px; }
.pilula-sel select { height: 36px; padding: 0 30px 0 14px; border-radius: 999px; border: 1px solid var(--linha); background: var(--sup-forte); color: var(--texto); font-weight: 600; }
.centro { text-align: center; margin-top: 16px; }
.mini img, .mini .mini-ic { display: block; width: 100%; height: 100%; object-fit: contain; }
.mini .mini-ic { display: grid; place-items: center; color: var(--texto-2); }
.mini .mini-ic svg { width: 22px; height: 22px; }
@media (max-width: 900px) { .pn-grade { grid-template-columns: 1fr; } .pn-destaque { grid-template-columns: 1fr; } .pn-3d { min-height: 220px; } }

/* ---------- pagina */
.pagina { max-width: 1240px; margin: 0 auto; padding: 32px 24px 64px; }
.abertura { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end; margin-bottom: 28px; }
.abertura p { margin-top: 8px; color: var(--texto-2); max-width: 60ch; font-size: 17px; }

.tipos { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; }
.tipo { display: grid; grid-template-rows: auto 1fr; background: var(--sup); border: 1px solid var(--sup-borda); border-radius: var(--raio); box-shadow: var(--sombra); overflow: hidden; text-decoration: none; color: inherit; transition: border-color .15s, transform .15s, box-shadow .15s; }
.tipo:hover { border-color: var(--sel-b); transform: translateY(-2px); box-shadow: var(--sombra-alta); }
.tipo figure { margin: 0; aspect-ratio: 16/10; background: var(--papel-fundo); display: grid; place-items: center; overflow: hidden; }
.tipo figure img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.tipo .corpo { padding: 18px 20px 20px; display: grid; gap: 8px; align-content: start; }
.tipo .corpo p { color: var(--texto-2); font-size: 15px; }
.selo { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--and-fundo); color: color-mix(in srgb, var(--and) 55%, var(--texto)); width: fit-content; }

.secao { margin-top: 44px; }
.secao > header { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; }

/* ---------- lista de geracoes */
.lista { background: var(--sup); border: 1px solid var(--sup-borda); border-radius: var(--raio); box-shadow: var(--sombra); overflow: hidden; }
.linha-g { display: grid; grid-template-columns: 56px 1fr 180px 140px 120px; gap: 16px; align-items: center; padding: 12px 18px; border-top: 1px solid var(--linha); text-decoration: none; color: inherit; }
.linha-g:first-child { border-top: 0; }
.linha-g:hover { background: var(--sup); }
.linha-g .mini { width: 56px; height: 40px; border-radius: 6px; background: var(--sup) center/cover no-repeat; }
.linha-g .t { font-weight: 600; }
.linha-g .s { font-size: 14px; color: var(--texto-2); }
.estado { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; }
.estado i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.estado.pronto { color: color-mix(in srgb, var(--ok) 80%, var(--texto)); background: var(--ok-fundo); }
.estado.fila, .estado.gerando { color: color-mix(in srgb, var(--and) 70%, var(--texto)); background: var(--and-fundo); }
.estado.gerando i { animation: pulso 1.2s ease-in-out infinite; }
.estado.erro { color: color-mix(in srgb, var(--erro) 80%, var(--texto)); background: var(--erro-fundo); }
.estado.aguardando_usuario { color: var(--esp); background: var(--esp-fundo); }
.estado.cancelado { color: var(--texto-2); background: var(--sup); }
@keyframes pulso { 50% { opacity: .3; } }
.vazio { padding: 32px; text-align: center; color: var(--texto-2); }

/* ---------- configurar */
.config { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; }
.volta { display: inline-flex; align-items: center; gap: 6px; color: var(--texto-2); text-decoration: none; font-weight: 500; margin-bottom: 12px; }
.volta:hover { color: var(--texto); }
.volta svg { width: 18px; height: 18px; }
.grupo { background: var(--sup); border: 1px solid var(--sup-borda); border-radius: var(--raio); box-shadow: var(--sombra); margin-top: 16px; }
.grupo > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; font-family: var(--fonte-titulo); font-weight: 600; }
.grupo > summary::-webkit-details-marker { display: none; }
.grupo > summary::after { content: ""; width: 10px; height: 10px; border-right: 2px solid var(--texto-2); border-bottom: 2px solid var(--texto-2); transform: rotate(45deg); transition: transform .15s; }
.grupo[open] > summary::after { transform: rotate(-135deg); }
.campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; padding: 4px 20px 20px; }
.campo { display: grid; gap: 6px; align-content: start; }
.campo.largo { grid-column: 1 / -1; }
.campo label { font-weight: 500; font-size: 15px; }
.campo .ajuda { font-size: 14px; color: var(--texto-2); }
.entrada { display: flex; align-items: center; border: 1px solid var(--linha); border-radius: var(--raio-campo); background: var(--sup-forte); overflow: hidden; }
.entrada:focus-within { border-color: var(--foco); box-shadow: 0 0 0 3px color-mix(in srgb, var(--foco) 25%, transparent); }
.entrada input, .entrada select { flex: 1; min-width: 0; border: 0; height: 42px; padding: 0 12px; background: transparent; outline: none; }
.entrada input { text-align: right; font-variant-numeric: tabular-nums; }
.entrada input.txt { text-align: left; }
.entrada span { padding: 0 12px; color: var(--texto-2); font-size: 14px; white-space: nowrap; border-left: 1px solid var(--linha); height: 42px; display: grid; place-items: center; background: var(--sup); }
.campo.invalido .entrada { border-color: var(--erro); }
.campo .msg { font-size: 14px; color: var(--erro); }
.segm { display: flex; flex-wrap: wrap; gap: 6px; }
.segm button { min-height: 42px; padding: 8px 12px; border: 1px solid var(--linha); background: var(--sup-forte); border-radius: var(--raio-campo); cursor: pointer; text-align: left; line-height: 1.25; }
.segm button[aria-pressed="true"] { border-color: transparent; background: linear-gradient(135deg, var(--sel-a), var(--sel-b)); color: var(--sel-texto); }
.lado { position: sticky; top: 88px; display: grid; gap: 16px; }
.cartao { background: var(--sup); border: 1px solid var(--sup-borda); border-radius: var(--raio); box-shadow: var(--sombra); padding: 20px; }
.cartao figure { margin: -20px -20px 16px; aspect-ratio: 16/10; background: var(--papel-fundo); border-radius: var(--raio) var(--raio) 0 0; overflow: hidden; }
.cartao figure img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.cartao .bt { width: 100%; height: 48px; font-size: 17px; }
.passos { margin: 14px 0 0; padding-left: 20px; color: var(--texto-2); font-size: 15px; display: grid; gap: 4px; }

/* ---------- peça: passo a passo */
.peca { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr); gap: 20px; align-items: start; }
.peca-form { display: grid; gap: 14px; align-content: start; }
.trilha { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; list-style: none; }
.trilha button { min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--linha); background: var(--sup); color: var(--texto); font-weight: 600; cursor: pointer; }
.trilha button[aria-current=step] { background: linear-gradient(135deg, var(--sel-a), var(--sel-b)); color: var(--sel-texto); border-color: transparent; }
.trilha button.feito::before { content: "✓ "; color: var(--ok); }
.trilha button[aria-current=step].feito::before { color: inherit; }
.trilha button.com-erro { border-color: var(--erro); color: var(--erro); background: var(--erro-fundo); }
.passo-nav { display: flex; justify-content: space-between; }
.passo > .grupo > .grupo-t { padding: 16px 20px 0; margin: 0; }
.passo > .revisao { padding: 16px 20px 20px; }
.passo > .revisao > .grupo-t { padding: 0; }
.rev-grupo h3 { display: flex; justify-content: space-between; align-items: center; margin: 12px 0 4px; }
.peca-palco { position: sticky; top: calc(var(--altura-barra) + 24px); display: grid; gap: 12px; padding: 16px; border-radius: 22px; color: #E6EBF2; background: radial-gradient(circle at 50% 30%, #22385E, #0D1424); box-shadow: var(--sombra-alta); }
.peca-palco .chip { justify-self: start; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.12); font-size: 13px; }
.peca-palco figure { margin: 0; display: grid; place-items: center; min-height: 240px; }
.peca-palco figure img { max-width: 100%; max-height: 300px; object-fit: contain; filter: drop-shadow(0 10px 20px rgba(0,0,0,.35)); }
.peca-palco .resumo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.peca-palco .resumo div { display: grid; gap: 2px; padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,.08); font-size: 13px; }
.peca-palco .resumo b { font-size: 16px; color: #FFFFFF; }
.peca-palco .gerar { display: flex; gap: 8px; align-items: center; }
.peca-palco .gerar .segm { background: rgba(255,255,255,.1); }
.peca-palco .gerar .segm button { color: #E6EBF2; background: transparent; border-color: rgba(255,255,255,.25); }
.peca-palco .gerar .segm button[aria-pressed="true"] { background: linear-gradient(135deg, var(--sel-a), var(--sel-b)); color: var(--sel-texto); border-color: transparent; }
.peca-palco .gerar .bt.dourado { margin-left: auto; background: linear-gradient(135deg, #D9B878, #A8874F); color: #0A0F1A; }
.peca-palco .mudo { color: rgba(230,235,242,.7); font-size: 14px; }
@media (max-width: 900px) {
  .peca { grid-template-columns: 1fr; }
  .peca-palco { position: static; order: -1; }
  .peca-palco figure { min-height: 140px; } .peca-palco figure img { max-height: 160px; }
}
@media (max-width: 600px) {
  nav.areas ~ main#conteudo.pagina.peca { padding-bottom: 220px; }
  html:has(main.peca) { scroll-padding-bottom: 220px; }
  .peca-palco .gerar { position: fixed; left: 8px; right: 8px; bottom: 72px; z-index: 29; padding: 8px; border-radius: 14px; background: #0D1424; box-shadow: var(--sombra-alta); }
}

/* ---------- visualizacao */
.vis { position: relative; display: block; height: calc(100vh - var(--altura-barra) - 16px); height: calc(100dvh - var(--altura-barra) - 16px); margin-top: 8px; }
.vis .palco { position: absolute; inset: 0; border-radius: 22px; margin-right: 8px; }
.vis .painel { position: absolute; top: 72px; right: 20px; bottom: 76px; width: 400px; z-index: 3; border-radius: 18px; border: 1px solid var(--sup-borda); box-shadow: var(--sombra-alta); overflow: hidden; color: var(--texto); }
.vis .painel[data-recolhido] { display: none; }
.vis.so-leitura { height: 100vh; height: 100dvh; margin: 0; }
.vis.so-leitura .palco { right: 420px; margin: 0; border-radius: 0; }
.vis.so-leitura .painel { top: 0; right: 0; bottom: 0; border-radius: 0; border-width: 0 0 0 1px; }
.barra-flutuante { position: absolute; z-index: 2; left: 50%; bottom: 76px; transform: translateX(-50%); display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: calc(100% - 32px); padding: 6px; border-radius: 999px; background: rgba(13,20,36,.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
:root[data-theme=claro] .barra-flutuante { background: rgba(255,255,255,.7); }
.cartao-progresso { position: absolute; z-index: 2; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(520px, calc(100% - 32px)); }
.cartao-progresso .progresso { position: static; inset: auto; height: auto; }
.palco { position: relative; background: radial-gradient(120% 90% at 50% 35%, var(--palco-a) 0%, var(--palco-b) 100%); overflow: hidden; color: var(--palco-texto); }
.palco canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.palco .topo { position: absolute; inset: 0 0 auto 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 24px; pointer-events: none; }
.palco .topo > * { pointer-events: auto; }
.palco .titulo-g h1 { font-size: 26px; color: var(--palco-texto); }
.palco .titulo-g p { color: color-mix(in srgb, var(--palco-texto) 70%, transparent); margin-top: 4px; }
.palco .acoes { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.palco .bt { background: color-mix(in srgb, var(--palco-texto) 10%, transparent); border-color: color-mix(in srgb, var(--palco-texto) 20%, transparent); color: var(--palco-texto); backdrop-filter: blur(6px); }
.palco .bt:hover { background: color-mix(in srgb, var(--palco-texto) 18%, transparent); border-color: color-mix(in srgb, var(--palco-texto) 40%, transparent); }
.palco .bt.dourado { background: linear-gradient(135deg, var(--acao-a), var(--acao-b)); border-color: transparent; color: var(--acao-texto); }
.palco .base { position: absolute; inset: auto 0 0 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 20px 24px; pointer-events: none; }
.palco .base > * { pointer-events: auto; }
.medidas { display: grid; gap: 2px; }
.medidas .peso { font-family: var(--fonte-titulo); font-weight: 700; font-size: 34px; line-height: 1; }
.medidas .peso small { font-size: 16px; font-weight: 500; margin-left: 4px; color: color-mix(in srgb, var(--palco-texto) 70%, transparent); }
.medidas .dim { color: var(--and); font-variant-numeric: tabular-nums; }
.vistas { display: flex; gap: 4px; background: color-mix(in srgb, var(--palco-texto) 8%, transparent); padding: 4px; border-radius: 10px; }
.vistas button { border: 0; background: transparent; color: color-mix(in srgb, var(--palco-texto) 80%, transparent); height: 32px; padding: 0 10px; border-radius: 7px; cursor: pointer; font-size: 14px; }
.vistas button:hover { background: color-mix(in srgb, var(--palco-texto) 12%, transparent); color: var(--palco-texto); }
.selecao { position: absolute; left: 24px; top: 96px; max-width: 360px; padding: 10px 14px; border-radius: 10px; background: rgba(13,28,53,.8); color: #FFFFFF; border-left: 3px solid var(--dourado); font-size: 15px; }
.marca-palco { position: absolute; right: 24px; bottom: 76px; width: 120px; opacity: .14; pointer-events: none; }

.painel { background: var(--sup-forte); border-left: 1px solid var(--linha); display: grid; grid-template-rows: auto 1fr auto; min-height: 0; }
.abas { display: flex; gap: 4px; padding: 12px 16px 0; border-bottom: 1px solid var(--linha); }
.abas button { border: 0; background: transparent; padding: 10px 12px; cursor: pointer; font-weight: 600; color: var(--texto-2); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.abas button[aria-selected="true"] { color: var(--texto); border-color: var(--dourado); }
.rolar { overflow: auto; min-height: 0; }
.bom-grupo { padding: 14px 18px 4px; font-family: var(--fonte-titulo); font-weight: 600; font-size: 14px; color: var(--texto-2); }
.item { display: grid; grid-template-columns: 12px 1fr auto; gap: 10px; align-items: start; padding: 10px 18px; cursor: pointer; border-left: 3px solid transparent; }
.item:hover { background: var(--sup); }
.item.sel { background: var(--and-fundo); border-left-color: var(--dourado); }
.item .cor { width: 12px; height: 12px; border-radius: 3px; margin-top: 4px; border: 1px solid rgba(0,0,0,.12); }
.item .d { font-weight: 500; }
.item .q { font-size: 14px; color: var(--texto-2); }
.item .v { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.item .v small { display: block; color: var(--texto-2); font-size: 14px; }
.totais { border-top: 1px solid var(--linha); padding: 14px 18px 18px; display: grid; gap: 6px; background: var(--sup); }
.totais .l { display: flex; justify-content: space-between; gap: 12px; font-variant-numeric: tabular-nums; }
.totais .l.grande { font-family: var(--fonte-titulo); font-weight: 700; font-size: 20px; margin-top: 4px; }
.totais .nota { font-size: 14px; color: var(--texto-2); }
.params { padding: 8px 18px 18px; }
.params h3 { margin: 16px 0 6px; font-size: 14px; color: var(--texto-2); }
.params dl { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; margin: 0; font-size: 15px; }
.params dt { color: var(--texto-2); }
.params dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; max-width: 220px; }

/* progresso da geracao */
.progresso { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; }
.progresso .caixa { width: min(460px, 100%); display: grid; gap: 18px; }
.progresso ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.progresso li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: center; color: color-mix(in srgb, var(--palco-texto) 55%, transparent); }
.progresso li b { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid currentColor; display: grid; place-items: center; font-size: 13px; }
.progresso li.feito { color: color-mix(in srgb, var(--palco-texto) 90%, transparent); }
.progresso li.feito b { background: var(--acao-b); border-color: var(--acao-b); color: var(--acao-texto); }
.progresso li.agora { color: var(--palco-texto); }
.progresso li.agora b { border-color: var(--dourado); animation: pulso 1.2s ease-in-out infinite; }
.progresso .det { color: color-mix(in srgb, var(--palco-texto) 65%, transparent); font-size: 15px; }
.progresso .erro-t { background: var(--erro-fundo); border-left: 3px solid var(--erro); padding: 12px 14px; border-radius: 8px; white-space: pre-wrap; }

/* modo apresentacao */
body.apresentando .barra, body.apresentando nav.areas { display: none; }
body.apresentando .vis { height: 100vh; height: 100dvh; margin: 0; }
body.apresentando main#conteudo.vis { margin-left: 0; }
body.apresentando .vis .palco { margin-right: 0; border-radius: 0; }

/* dialogo */
dialog { border: 1px solid var(--sup-borda); border-radius: var(--raio); background: var(--sup-forte); box-shadow: var(--sombra-alta); padding: 0; width: min(480px, calc(100% - 32px)); color: var(--texto); }
dialog::backdrop { background: rgba(13,28,53,.55); }
dialog .dc { padding: 22px; display: grid; gap: 14px; }
dialog .dc .linha-l { display: flex; gap: 8px; }
dialog .dc .linha-l input { flex: 1; height: 40px; border: 1px solid var(--linha); border-radius: var(--raio-campo); background: var(--sup-forte); padding: 0 10px; min-width: 0; }
dialog .rodape { display: flex; justify-content: flex-end; gap: 8px; }

/* login */
.entrar { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: 1.1fr 1fr; }
.entrar .lado-marca { background: radial-gradient(120% 90% at 30% 20%, var(--sel-b) 0%, var(--azul) 60%, color-mix(in srgb, var(--azul) 65%, black) 100%); color: #FFFFFF; display: grid; align-content: space-between; padding: 48px; }
.entrar .lado-marca img { width: min(300px, 80%); }
.entrar .lado-marca p { color: rgba(255,255,255,.75); max-width: 44ch; font-size: 17px; }
.entrar form { align-self: center; justify-self: center; width: min(380px, calc(100% - 48px)); display: grid; gap: 16px; padding: 32px 0; }
.entrar form .campo input { border: 1px solid var(--linha); border-radius: var(--raio-campo); height: 46px; padding: 0 12px; background: var(--sup-forte); }
.entrar form .bt { height: 48px; }
.entrar .alt { font-size: 15px; color: var(--texto-2); }
.entrar .alt button { border: 0; background: none; color: var(--texto); font-weight: 600; cursor: pointer; padding: 0; text-decoration: underline; }

#aviso { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; background: var(--sel-a); color: #FFFFFF; padding: 12px 18px; border-radius: 10px; transition: opacity .2s, transform .2s; pointer-events: none; z-index: 50; max-width: calc(100% - 32px); }
#aviso.mostra { opacity: 1; transform: translate(-50%, 0); }
#aviso.erro { background: var(--erro); }
/* como popover (aviso.js), tira o que o navegador põe em [popover]: inset 0, margem, borda e rolagem */
#aviso[popover] { top: auto; right: auto; margin: 0; border: 0; overflow: visible; }

.carregando { display: grid; place-items: center; min-height: 50vh; color: var(--texto-2); }

/* ---------- celular e tablet */
@media (max-width: 1100px) {
}
@media (max-width: 1000px) {
  .config { grid-template-columns: 1fr; }
  .lado { position: static; }
  .linha-g { grid-template-columns: 48px 1fr auto; }
  .linha-g .c-tipo, .linha-g .c-peso { display: none; }
}
@media (max-width: 720px) {
  .barra { gap: 12px; padding: 0 16px; }
  .marca span, .maqs { display: none; }
  .usuario { max-width: 120px; padding-left: 0; border-left: 0; font-size: 13px; }
  .pagina { padding: 20px 16px 48px; }
  .abertura { grid-template-columns: 1fr; }
  h1 { font-size: 24px; }
  .campos { grid-template-columns: 1fr; }
  .entrar { grid-template-columns: 1fr; }
  .entrar .lado-marca { padding: 28px 24px; gap: 16px; }
  .palco .topo { flex-direction: column; padding: 16px; }
  .palco .titulo-g h1 { font-size: 20px; }
  .palco .acoes { justify-content: flex-start; }
  .palco .base { padding: 16px; flex-direction: column; align-items: flex-start; }
  .medidas .dim { white-space: nowrap; font-size: 14px; }
  .medidas .peso { font-size: 26px; }
  .marca-palco { display: none; }
  .selecao { top: auto; bottom: 90px; left: 16px; right: 16px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* medicao no 3D */
.vistas .sep { width: 1px; margin: 4px 2px; background: color-mix(in srgb, var(--palco-texto) 18%, transparent); }
.vistas button[aria-pressed="true"] { background: linear-gradient(135deg, var(--acao-a), var(--acao-b)); color: var(--acao-texto); }
.camada-medidas { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
.rotulo-medida { position: absolute; left: 0; top: 0; display: grid; justify-items: center; gap: 1px; padding: 4px 9px; border-radius: 8px; background: rgba(13,28,53,.9); border: 1px solid var(--dourado); color: #FFFFFF; font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rotulo-medida b { font-size: 15px; font-weight: 600; }
.rotulo-medida span { color: rgba(255,255,255,.7); }
.rotulo-medida.previa { opacity: .75; border-style: dashed; }
.dica-medida { position: absolute; left: 50%; top: 96px; transform: translateX(-50%); max-width: calc(100% - 32px); padding: 8px 14px; border-radius: 10px; background: rgba(13,28,53,.85); color: rgba(255,255,255,.9); font-size: 14px; text-align: center; pointer-events: none; }
.selecao .dims { color: var(--dourado-claro); font-variant-numeric: tabular-nums; }
.selecao .mudo-claro { color: rgba(255,255,255,.65); }
@media (max-width: 720px) {
  .vistas { flex-wrap: wrap; }
  .dica-medida { top: auto; bottom: 150px; font-size: 13px; padding: 6px 10px; animation: sumir-dica .4s 4s forwards; }
  .dica-medida .so-teclado { display: none; }
}
@keyframes sumir-dica { to { opacity: 0; visibility: hidden; } }

/* senha: botao mostrar/ocultar dentro do campo */
.senha-caixa { position: relative; }
.entrar form .senha-caixa input { width: 100%; padding-right: 84px; }
.ver-senha { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); height: 34px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; color: var(--texto); font-weight: 600; font-size: 14px; cursor: pointer; }
.ver-senha:hover { background: var(--sup); }

/* corte em secao */
.painel-corte { position: absolute; right: 24px; bottom: 72px; display: grid; gap: 10px; width: 300px; padding: 12px; border-radius: 12px; background: rgba(13,28,53,.9); }
.painel-corte[hidden] { display: none; }
.painel-corte .eixos { display: flex; gap: 4px; background: rgba(255,255,255,.08); padding: 4px; border-radius: 10px; }
.painel-corte button { flex: 1; border: 0; background: transparent; color: rgba(255,255,255,.85); height: 32px; padding: 0 10px; border-radius: 7px; cursor: pointer; font-size: 14px; }
.painel-corte button:hover { background: rgba(255,255,255,.12); color: #FFFFFF; }
.painel-corte button[aria-pressed="true"] { background: var(--acao-b); color: var(--acao-texto); }
.painel-corte #btInverter { background: rgba(255,255,255,.08); }
.painel-corte #btInverter[aria-pressed="true"] { background: var(--acao-b); color: var(--acao-texto); }
.painel-corte input[type="range"] { width: 100%; accent-color: var(--dourado); height: 28px; }
@media (max-width: 720px) {
  .painel-corte { position: static; width: 100%; grid-template-columns: 1fr auto; align-items: center; gap: 6px; padding: 8px; }
  .painel-corte .eixos { grid-column: 1 / -1; }
  .painel-corte button { height: 30px; font-size: 13px; padding: 0 8px; }
  .painel-corte #btInverter { flex: none; }
  .vistas button { height: 30px; padding: 0 8px; font-size: 13px; }
  .palco:has(#btCorte[aria-pressed="true"]) .medidas { display: none; }
}
/* ---------- esboço da passarela em planta */
.modo-ps { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.modo-ps a { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 12px; border: 1px solid var(--linha); border-radius: 999px; background: var(--sup-forte); color: inherit; text-decoration: none; font-weight: 500; }
.modo-ps a[aria-current="page"] { border-color: transparent; background: linear-gradient(135deg, var(--sel-a), var(--sel-b)); color: var(--sel-texto); }
.esb { display: grid; grid-template-rows: auto minmax(0, 1fr); height: calc(100vh - 64px); height: calc(100dvh - 64px); }
.esb-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 12px 20px; border-bottom: 1px solid var(--linha); background: var(--sup-forte); }
.esb-topo .volta, .esb-topo .modo-ps { margin: 0; }
.esb-ferr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: auto; }
.esb-ferr .sep { width: 1px; height: 24px; margin: 0 4px; background: var(--linha); }
.esb-ferr [aria-pressed="true"] { border-color: transparent; background: linear-gradient(135deg, var(--sel-a), var(--sel-b)); color: var(--sel-texto); }
.esb-corpo { display: grid; grid-template-columns: minmax(0, 1fr) 360px; min-height: 0; }
.esb-folha { position: relative; overflow: hidden; background: var(--papel-fundo); }
.esb-folha svg { display: block; width: 100%; height: 100%; touch-action: none; user-select: none; cursor: crosshair; }
.esb-folha[data-f="mover"] svg { cursor: grab; }
.esb-folha[data-f="apagar"] svg { cursor: pointer; }
.esb-folha .g1 { stroke: #E3E8EE; stroke-width: 1; vector-effect: non-scaling-stroke; }
.esb-folha .g5 { stroke: #C9D2DD; stroke-width: 1; vector-effect: non-scaling-stroke; }
.esb-folha .rabisco { fill: none; stroke: #C2CBD6; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.esb-folha .ao-vivo { fill: none; stroke: var(--dourado); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.esb-folha .banda { fill: rgba(20,41,74,.10); stroke: var(--azul); stroke-width: 1; vector-effect: non-scaling-stroke; }
.esb-folha .eixo { stroke: var(--azul); stroke-width: 2; stroke-dasharray: 8 4; vector-effect: non-scaling-stroke; }
.esb-folha .degrau { stroke: var(--azul); stroke-width: 1; vector-effect: non-scaling-stroke; }
.esb-folha .trecho.rampa .banda { fill: rgba(168,135,79,.18); }
.esb-folha .trecho.erro .banda { fill: rgba(178,58,58,.14); stroke: var(--erro); }
.esb-folha .trecho.sel .banda { stroke: var(--dourado); stroke-width: 3; }
.esb-folha .patamar { fill: rgba(20,41,74,.18); stroke: var(--azul); stroke-width: 1; vector-effect: non-scaling-stroke; }
.esb-folha .no { fill: var(--papel-fundo); stroke: var(--azul); stroke-width: 2; vector-effect: non-scaling-stroke; }
.esb-folha .no.falta { stroke: var(--erro); }
.esb-folha .no.ini { fill: var(--dourado); stroke: var(--dourado); }
.esb-folha .rot { font-family: var(--fonte); font-weight: 600; fill: var(--texto); stroke: #FBFCFD; paint-order: stroke; }
.esb-folha .rot.sub { font-weight: 500; fill: var(--texto-2); }
.esb-folha .rot.falta { fill: var(--erro); }
.esb-dica { position: absolute; left: 16px; bottom: 12px; max-width: 520px; margin: 0; padding: 8px 12px; border-radius: 8px; background: color-mix(in srgb, var(--sup-forte) 90%, transparent); color: var(--texto-2); font-size: 14px; pointer-events: none; }
.esb-edita { position: absolute; z-index: 3; width: 280px; display: grid; gap: 10px; padding: 14px; border: 1px solid var(--linha); border-radius: 12px; background: var(--sup-forte); box-shadow: 0 12px 32px rgba(13,28,53,.18); }
.esb-edita header { display: flex; align-items: center; gap: 8px; }
.esb-edita header span { color: var(--texto-2); }
.esb-edita header button { margin-left: auto; }
.esb-edita label { display: grid; gap: 4px; font-size: 13px; font-weight: 500; color: var(--texto-2); }
.esb-edita input { height: 38px; padding: 0 10px; border: 1px solid var(--linha); border-radius: 8px; font-variant-numeric: tabular-nums; }
.esb-edita input:disabled { background: var(--sup); }
.esb-edita .ed-linha { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.esb-edita .ed-bts { display: flex; justify-content: flex-end; }
.esb-edita .ed-grupo { display: grid; gap: 4px; font-size: 13px; font-weight: 500; color: var(--texto-2); }
.esb-edita .segm.igual { flex-wrap: nowrap; }
.esb-edita .segm.igual button { flex: 1; min-height: 38px; padding: 6px 4px; text-align: center; font-size: 13px; }
.esb-folha .seta { fill: var(--dourado); }
/* painel do nó: tabela de níveis do patamar */
.esb-edita.esb-no { width: 400px; max-width: min(440px, calc(100vw - 32px)); max-height: calc(100% - 16px); overflow-y: auto; overflow-x: hidden; box-sizing: border-box; }
.esb-no .niv-lista { display: grid; gap: 10px; }
.esb-no fieldset.nivel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; min-width: 0; margin: 0; padding: 10px; border: 1px solid var(--linha); border-radius: 8px; }
.esb-no fieldset.nivel legend { padding: 0 4px; font-weight: 600; color: var(--azul); }
.esb-no fieldset.nivel label { min-width: 0; }
.esb-no input, .esb-no select { width: 100%; min-width: 0; box-sizing: border-box; }
.esb-no select { height: 38px; padding: 0 8px; border: 1px solid var(--linha); border-radius: 8px; background: var(--branco); }
.esb-no select:disabled { background: var(--papel); }
.esb-edita select { height: 38px; padding: 0 8px; border: 1px solid var(--linha); border-radius: 8px; background: var(--branco); min-width: 0; }
.esb-lado .motor { display: grid; gap: 6px; }
.esb-lado .motor > span { font-size: 13px; font-weight: 600; color: var(--texto-2); text-transform: uppercase; letter-spacing: .04em; }
.esb-lado .motor .segm { flex-wrap: nowrap; }
.esb-lado .motor .segm button { flex: 1; text-align: center; min-height: 40px; }
.esb-lado .esb-v25 { margin: 0; color: var(--texto); }
/* painel estreito: a ajuda de uma opção desce para baixo da lista, em vez de espremer a lista */
.esb-lado .entrada:has(select) { flex-wrap: wrap; }
.esb-lado .entrada:has(select) select { flex: 1 1 100%; }
.esb-lado .entrada:has(select) span { flex: 1 1 100%; height: auto; padding: 6px 12px; border-left: 0; border-top: 1px solid var(--linha); white-space: normal; place-items: start; font-size: 13px; }
.esb-no .niv-rem { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
.esb-no .niv-bts { display: flex; flex-wrap: wrap; gap: 8px; }
.esb-no .nota { margin: 0; font-size: 13px; color: var(--texto-2); }
.esb-folha .nivel { fill: rgba(20,41,74,.10); stroke: var(--azul); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.esb-folha .nivel-g.n2 .nivel { fill: rgba(20,41,74,.16); }
.esb-folha .nivel-g.n3 .nivel { fill: rgba(168,135,79,.18); stroke: var(--dourado); }
.esb-folha .nivel-g.n4 .nivel { fill: rgba(20,41,74,.22); }
.esb-folha .nivel-g.n5 .nivel { fill: rgba(168,135,79,.26); stroke: var(--dourado); }
.esb-folha .nivel-g.n6 .nivel { fill: rgba(20,41,74,.28); }
.esb-folha .nivel-rot { font-weight: 600; }
.esb-lado { display: grid; gap: 12px; align-content: start; overflow-y: auto; padding: 18px 18px 32px; border-left: 1px solid var(--linha); background: var(--papel); }
.esb-lado h1 { font-size: 22px; }
.esb-lado .grupo { margin-top: 0; }
.esb-lado .campos { grid-template-columns: 1fr; }
.esb-avisos { display: grid; gap: 6px; }
.esb-bts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.esb-titulo { display: grid; gap: 4px; font-size: 13px; font-weight: 500; color: var(--texto-2); }
.esb-titulo input { height: 38px; padding: 0 10px; border: 1px solid var(--linha); border-radius: 8px; }
.esb-resumo { padding: 10px 12px; border-radius: 8px; font-weight: 600; }
.esb-resumo.bom { background: var(--ok-fundo); color: var(--ok); }
.esb-resumo.ruim { background: var(--erro-fundo); color: var(--erro); }
.esb-av { display: block; width: 100%; padding: 8px 10px; border: 0; border-left: 3px solid; border-radius: 6px; background: var(--sup-forte); text-align: left; font-size: 14px; cursor: pointer; }
.esb-av.erro { border-color: var(--erro); }
.esb-av.aviso { border-color: var(--alerta); }
dialog.esb-previa { width: min(1100px, calc(100% - 32px)); }
.esb-previa-cab { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.esb-previa-cab .bt { margin-left: auto; }
.esb-previa-3d { height: min(70vh, 640px); background: radial-gradient(120% 90% at 50% 35%, var(--palco-a) 0%, var(--palco-b) 100%); }
.esb-previa-3d canvas { display: block; width: 100%; height: 100%; }
@media (max-width: 900px) {
  .esb { height: auto; }
  .esb-corpo { grid-template-columns: 1fr; }
  .esb-folha { height: 70vh; }
  .esb-lado { border-left: 0; border-top: 1px solid var(--linha); }
}

/* esboço da moega: planta e lateral lado a lado */
.mo-folhas { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; min-height: 0; background: var(--linha); }
.mo-folhas .esb-folha { min-height: 0; }
.mo-folha-tit { position: absolute; top: 8px; left: 12px; z-index: 1; margin: 0; font-size: 13px; font-weight: 600; color: var(--texto-2); pointer-events: none; }
.mo-folha-bt { position: absolute; top: 6px; right: 10px; z-index: 1; }
.esb-folha .mo-topo { fill: rgba(20,41,74,.06); stroke: var(--azul); stroke-width: 2; vector-effect: non-scaling-stroke; }
.esb-folha .mo-proj { stroke: #9AA8B8; stroke-width: 1; vector-effect: non-scaling-stroke; }
.esb-folha .mo-saida { fill: rgba(20,41,74,.22); stroke: var(--azul); stroke-width: 2; vector-effect: non-scaling-stroke; }
.esb-folha .mo-bocal, .esb-folha .mo-janela { fill: rgba(168,135,79,.22); stroke: var(--dourado); stroke-width: 2; vector-effect: non-scaling-stroke; }
.esb-folha .mo-janela.auto { stroke-dasharray: 6 4; }
.esb-folha .mo-nerv { stroke: var(--azul); stroke-width: 2; vector-effect: non-scaling-stroke; }
.esb-folha .mo-perna { fill: rgba(43,82,140,.35); stroke: #2B528C; stroke-width: 1; vector-effect: non-scaling-stroke; }
.esb-folha .mo-corpo { fill: rgba(20,41,74,.08); stroke: var(--azul); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.esb-folha .mo-piso { stroke: var(--texto-2); stroke-width: 2; vector-effect: non-scaling-stroke; }
.esb-folha .mo-alca { stroke: transparent; stroke-width: 16; vector-effect: non-scaling-stroke; cursor: ns-resize; }
.esb-folha .mo-alca.trava { cursor: not-allowed; }
.esb-folha .mo-alca-v { stroke: var(--dourado); stroke-width: 1.5; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; pointer-events: none; }
.esb-folha .erro { stroke: var(--erro); }
.esb-folha .sel { stroke: var(--dourado); stroke-width: 3; }
@media (max-width: 1100px) { .mo-folhas { grid-template-columns: 1fr; grid-template-rows: minmax(320px, 1fr) minmax(320px, 1fr); } }

/* fotomontagem */
.fm { display: grid; grid-template-rows: auto minmax(0, 1fr); height: calc(100vh - 64px); height: calc(100dvh - 64px); }
.fm-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 12px 20px; border-bottom: 1px solid var(--linha); background: var(--sup-forte); }
.fm-topo h1 { margin: 0; font-size: 18px; }
.fm-corpo { display: grid; grid-template-columns: minmax(0, 1fr) 360px; min-height: 0; }
.fm-palco { position: relative; display: grid; place-items: center; overflow: hidden; background: #1B2433; min-height: 0; }
.fm-quadro { position: relative; }
.fm-quadro img, .fm-quadro .fm-3d, .fm-quadro .fm-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.fm-quadro img { object-fit: fill; user-select: none; }
.fm-3d canvas { display: block; width: 100% !important; height: 100% !important; }
.fm-svg { touch-action: none; cursor: crosshair; }
.fm-quadro[data-modo="arranjo"] .fm-svg { cursor: grab; }
.fm-grade { stroke: rgba(255,214,120,.75); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.fm-ponto circle { fill: var(--dourado); stroke: #fff; stroke-width: 2; vector-effect: non-scaling-stroke; cursor: move; }
.fm-ponto.falta circle { fill: var(--erro); }
.fm-ponto text { fill: #fff; font-weight: 700; paint-order: stroke; stroke: #0d1c35; stroke-width: 3px; }
.fm-vazio { color: #C9D2DD; }
.fm-lado { display: grid; align-content: start; gap: 18px; padding: 16px 18px; overflow: auto; border-left: 1px solid var(--linha); background: var(--sup-forte); }
.fm-lado section { display: grid; gap: 10px; }
.fm-lado h2 { margin: 0; font-size: 15px; }
.fm-lado .ed-linha { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: end; }
.fm-lado label { display: grid; gap: 4px; font-size: 13px; font-weight: 500; color: var(--texto-2); }
.fm-lado input[inputmode] { height: 36px; padding: 0 10px; border: 1px solid var(--linha); border-radius: 8px; }
.fm-bts { display: flex; flex-wrap: wrap; gap: 8px; }
.fm-pontos { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.fm-pontos li { display: grid; grid-template-columns: 22px 1fr 1fr 1fr auto; gap: 6px; align-items: center; }
.fm-pontos input { height: 32px; padding: 0 8px; border: 1px solid var(--linha); border-radius: 6px; min-width: 0; }
.fm-eixos { display: grid; grid-template-columns: 110px 1fr; gap: 10px; align-items: center; }
.fm-eixos svg { width: 110px; height: auto; }
.fm-eixos .nota { margin: 0; font-size: 13px; }
.fm-eixos line { stroke-width: 3; }
.fm-eixos text { font: 700 13px system-ui, sans-serif; fill: var(--texto-2); }
.fm-eixos circle { fill: var(--texto-2); }
.fm-chao { fill: rgba(27,36,51,.08); stroke: rgba(27,36,51,.35); stroke-width: 1; }
.fm-eixos .fm-ex { stroke: #D32F2F; fill: #D32F2F; } .fm-eixos .fm-ez { stroke: #1E63C8; fill: #1E63C8; } .fm-eixos .fm-ey { stroke: #1F8A3E; fill: #1F8A3E; }
.fm-eixos text.fm-ex, .fm-eixos text.fm-ez, .fm-eixos text.fm-ey { stroke: none; }
.fm-eixos-foto { pointer-events: none; }
.fm-eixo-fundo { fill: none; stroke: #0d1c35; stroke-opacity: .85; stroke-width: 7; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.fm-eixo { fill: none; stroke-width: 3.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.fm-eixo-ponta { stroke: #0d1c35; stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.fm-eixo-txt { fill: #fff; font-weight: 700; text-anchor: middle; dominant-baseline: central; paint-order: stroke; stroke: #0d1c35; stroke-width: 4px; }
.fm-eixo.x { stroke: #FF5A4E; } .fm-eixo-ponta.x, .fm-eixo-txt.x { fill: #FF5A4E; }
.fm-eixo.z { stroke: #4DA3FF; } .fm-eixo-ponta.z, .fm-eixo-txt.z { fill: #4DA3FF; }
.fm-eixo.y { stroke: #3DDC72; } .fm-eixo-ponta.y, .fm-eixo-txt.y { fill: #3DDC72; }
.fm-status { margin: 0; font-size: 13px; color: var(--texto-2); }
.fm-status.bom { color: var(--ok); }
.fm-status.medio { color: var(--and); }
.fm-status.ruim { color: var(--erro); }
.fm-lente input[type="range"] { width: 100%; }
.fm-galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.fm-galeria button { display: grid; gap: 6px; padding: 6px; border: 1px solid var(--linha); border-radius: 10px; background: var(--sup-forte); text-align: left; cursor: pointer; }
.fm-galeria img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 6px; background: var(--sup); }
dialog.dlg-local { width: min(960px, calc(100% - 32px)); }
.fm-ad { position: relative; }
.fm-ad img { display: block; width: 100%; border-radius: 8px; }
.fm-ad img.depois { position: absolute; inset: 0; height: 100%; }
@media (max-width: 900px) { .fm-corpo { grid-template-columns: 1fr; grid-template-rows: minmax(320px, 1fr) auto; } .fm-lado { border-left: 0; border-top: 1px solid var(--linha); } }
.fm-quadro[data-modo="arranjo"] .fm-ponto { pointer-events: none; opacity: .55; }
.fm-quadro.arrastando .fm-svg { cursor: grabbing; }
.fm-contorno { fill: rgba(255,255,255,.08); stroke: #fff; stroke-width: 2; stroke-dasharray: 8 6; vector-effect: non-scaling-stroke; pointer-events: none; }
.fm-haste { stroke: #fff; stroke-width: 2; vector-effect: non-scaling-stroke; pointer-events: none; }
.fm-alca { stroke: #0d1c35; stroke-width: 2; vector-effect: non-scaling-stroke; }
.fm-alca.giro { fill: var(--dourado); cursor: alias; }
.fm-alca.escala { fill: #fff; cursor: nwse-resize; }
.fm-nota-escala { margin: 0 0 10px; font-size: 12px; }

/* importar do SolidWorks */
.im { display: grid; gap: 14px; max-width: 640px; }
.im h1 { margin: 0; }
.im .nota { margin: 0; }
.im-campo { display: grid; gap: 4px; font-size: 13px; font-weight: 500; color: var(--texto-2); }
.im-campo input, .im-campo select { height: 38px; padding: 0 10px; border: 1px solid var(--linha); border-radius: 8px; font: inherit; }
.im-bloco { display: grid; gap: 10px; justify-items: start; }
.im-bloco .im-campo { justify-self: stretch; }
/* giro da montagem importada (aba Montagem) */
.giro { display: grid; grid-template-columns: auto 1fr 1fr; gap: 6px 8px; align-items: center; margin: 8px 0 10px; }
.giro span { font-weight: 600; color: var(--texto-2); min-width: 16px; }
.params .nota { margin: 0 0 4px; font-size: 14px; color: var(--texto-2); }

/* ---------- assistente de IA (TC) */
.ia-abrir { margin: 4px 0 12px; }
.campo.ia { outline: 2px solid var(--dourado); outline-offset: 4px; border-radius: 8px; }
.ia-painel { position: fixed; top: 64px; right: 0; bottom: 0; width: 380px; z-index: 30; display: flex; flex-direction: column; background: var(--sup-forte); border-left: 1px solid var(--linha); box-shadow: -6px 0 24px rgba(20,41,74,.12); }
.ia-painel[hidden] { display: none; }
.ia-topo { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--linha); }
.ia-topo h2 { font-size: 16px; }
.ia-acoes { display: flex; gap: 8px; }
.ia-msgs { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.ia-msg { max-width: 92%; padding: 9px 12px; border-radius: 10px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; }
.ia-msg.user { align-self: flex-end; background: var(--sel-a); color: #FFFFFF; }
.ia-msg.assistant { align-self: flex-start; background: var(--sup); border: 1px solid var(--linha); }
.ia-msg.pensando { color: var(--texto-2); font-style: italic; animation: ia-pulsa 1.2s ease-in-out infinite; }
.ia-msg.erro { border-color: var(--erro); color: var(--erro); background: var(--sup-forte); }
@keyframes ia-pulsa { 50% { opacity: .45; } }
.ia-cartao { border: 1px solid var(--dourado); border-radius: 10px; padding: 10px 12px; background: var(--sup-forte); font-size: 14px; }
.ia-cartao b { font-family: var(--fonte-titulo); }
.ia-cartao dl, .params .ia-cartao dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 6px 0 0; }
.ia-cartao dt { color: var(--texto-2); }
.ia-cartao dd { margin: 0; text-align: right; font-weight: 600; }
.ia-cartao .alertas { margin: 8px 0 0; padding-left: 18px; color: var(--alerta); }
.ia-form { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--linha); }
.ia-form textarea { resize: none; padding: 8px 10px; border: 1px solid var(--linha); border-radius: 8px; font: inherit; color: var(--texto); }
.ia-form textarea:focus-visible { border-color: var(--dourado); }
.ia-perguntas { align-self: stretch; display: flex; flex-direction: column; gap: 12px; border: 1px solid var(--dourado); border-radius: 10px; padding: 12px; background: var(--sup-forte); }
.ia-perg { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ia-perg legend { padding: 0; margin-bottom: 6px; font-weight: 600; font-size: 15px; }
.ia-opcoes { display: flex; flex-wrap: wrap; gap: 6px; }
.ia-opcoes button { min-height: 44px; padding: 6px 12px; border: 1px solid var(--linha); background: var(--sup-forte); border-radius: 18px; cursor: pointer; font: inherit; font-size: 14px; color: var(--texto); }
.ia-opcoes button:hover { border-color: var(--sel-b); }
.ia-opcoes button[aria-pressed="true"] { border-color: var(--sel-b); background: var(--sel-a); color: #FFFFFF; }
.ia-outro { height: 36px; padding: 0 10px; border: 1px solid var(--linha); border-radius: 8px; font: inherit; font-size: 14px; color: var(--texto); }
.ia-outro:focus-visible { border-color: var(--dourado); }
.ia-perguntas .bt:disabled { opacity: .5; cursor: default; }
main.ia-aberto .config, main.ia-aberto.peca, main.ia-aberto .barra-gerar { margin-right: 396px; }
@media (max-width: 900px) {
  .ia-painel { width: min(420px, 100%); top: 0; z-index: 40; }
  main.ia-aberto .config, main.ia-aberto.peca, main.ia-aberto .barra-gerar { margin-right: 0; }
}
/* fotomontagem: campos com − e + */
.fm-ajustes { display: grid; grid-template-columns: auto 1fr; gap: 8px 10px; align-items: center; }
.fm-passo { display: grid; grid-template-columns: 38px minmax(0, 1fr) 38px; gap: 4px; }
.fm-passo .bt { height: 36px; padding: 0; justify-content: center; font-size: 18px; line-height: 1; touch-action: manipulation; user-select: none; }
.fm-passo input { min-width: 0; text-align: center; }

/* janela "Onde gerar?" (fontes/sessao.js) */
dialog.dlg-sessao .ss-opcoes { display: grid; gap: 8px; }
dialog.dlg-sessao .ss-op { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid var(--linha); border-radius: var(--raio); cursor: pointer; }
dialog.dlg-sessao .ss-op:has(input:checked) { border-color: var(--dourado); background: rgba(168, 135, 79, .08); }
dialog.dlg-sessao .ss-op input { margin: 3px 0 0; accent-color: var(--dourado); width: 18px; height: 18px; flex: none; }
dialog.dlg-sessao .ss-op b { display: block; font-weight: 600; }
dialog.dlg-sessao .ss-op small { display: block; color: var(--texto-2); font-size: 14px; line-height: 1.35; margin-top: 2px; }

/* Utilidades > Ar comprimido: subitens do menu lateral (14/10) */

/* escolha do programa que gera a peça (SolidWorks / FreeCAD), 15/10 */
.cartao .motor { display: grid; gap: 6px; margin: 0 0 12px; }
.cartao .motor > span { font-size: 13px; font-weight: 600; color: var(--texto-2); text-transform: uppercase; letter-spacing: .04em; }
.cartao .motor .segm { flex-wrap: nowrap; }
.cartao .motor .segm button { flex: 1; text-align: center; min-height: 40px; }

.ia-form .bt, .ia-perguntas .bt, .ia-topo .bt { min-height: 44px; }

/* Nuvem -> 3D (nuvem_tela.js): lista de scans, conferência do recorte e resultado */
.nuvem h1 { margin: 0 0 8px; }
.nuvem .nota { margin: 0 0 12px; color: var(--texto-2); }
.nuvem .nv-campo { display: grid; gap: 4px; max-width: 480px; font-size: 13px; font-weight: 500; color: var(--texto-2); }
.nuvem .nv-campo input { min-height: 44px; padding: 0 10px; border: 1px solid var(--linha); border-radius: 8px; font: inherit; color: var(--texto); }
.nuvem .nv-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-top: 12px; }
.nuvem .nv-scan { display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 10px; min-height: 44px; border: 1px solid var(--linha); border-radius: 8px; background: var(--sup-forte); color: var(--texto); font: inherit; cursor: pointer; }
.nuvem .nv-scan:hover, .nuvem .nv-scan:focus-visible { border-color: var(--sel-b); }
.nuvem .nv-scan span { font-size: 13px; color: var(--texto-2); }
.nuvem .nv-scan img, .nuvem .nv-sem { width: 100%; aspect-ratio: 16/9; object-fit: contain; background: var(--sup); border-radius: 4px; }
.nuvem .nv-sem { display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--texto-2); }
.nuvem .nv-scan .ok { color: var(--ok); font-weight: 600; } .nuvem .nv-scan .off { color: var(--erro); font-weight: 600; }
.nuvem .nv-3d { position: relative; width: 100%; height: min(60vh, 520px); border: 1px solid var(--linha); border-radius: 8px; overflow: hidden; background: var(--sup); }
.nuvem .ia-cena { position: relative; }
/* corte em seção e ocultar peças no resultado da IA */
.nuvem .ia-ferr, .nuvem .ia-pcorte { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 8px; }
.nuvem .ia-ferr[hidden], .nuvem .ia-pcorte[hidden] { display: none; }
.nuvem .ia-pcorte { padding: 8px; border: 1px solid var(--linha); border-radius: 8px; }
.nuvem .ia-pcorte input[type=range] { flex: 1 1 200px; min-width: 0; }
.nuvem .ia-eixos { display: flex; flex-wrap: wrap; gap: 4px; }
.nuvem .ia-ferr .bt[aria-pressed="true"], .nuvem .ia-pcorte .bt[aria-pressed="true"] { background: var(--acao-b); border-color: var(--acao-b); color: var(--acao-texto); }
.nuvem .ia-ferr .bt:disabled { opacity: .5; cursor: default; }
.nuvem .ia-ver { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; min-width: 44px; cursor: pointer; }
.nuvem .ia-ver input { width: 20px; height: 20px; margin: 0; cursor: pointer; }
.nuvem .ia-ver .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.nuvem .nv-desvio .ia-ver-col, .nuvem .nv-desvio .ia-ver-td { width: 56px; text-align: center; padding-block: 0; vertical-align: middle; }
.nuvem .ia-grupos { display: flex; flex-wrap: wrap; gap: 0 16px; margin: 0 0 4px; }
.nuvem .ia-peca-nome { border: 0; background: none; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.nuvem .nv-desvio tr.sel td { background: rgba(142, 114, 67, .14); }
.nuvem .ia-custo { position: absolute; right: 8px; bottom: 8px; padding: 2px 8px; border-radius: 6px; background: color-mix(in srgb, var(--sup-forte) 75%, transparent); font-size: 12px; color: var(--texto-2); pointer-events: none; }
.nuvem .nv-carregando { margin: 0; padding: 16px; color: var(--texto-2); }
.nuvem .nv-campos fieldset { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; margin: 8px 0; border: 2px solid var(--linha); border-radius: 8px; }
.nuvem .nv-campos label { display: grid; gap: 2px; font-size: 13px; color: var(--texto-2); }
.nuvem .nv-campos input { width: 7em; min-height: 44px; padding: 0 8px; border: 1px solid var(--linha); border-radius: 6px; font: inherit; }
.nuvem .nv-campos fieldset.ativa { border-color: var(--dourado); background: var(--and-fundo); }
.nuvem .nv-campos .nv-ativa-tag { color: color-mix(in srgb, var(--and) 55%, var(--texto)); font-weight: 600; }
.nuvem .nv-ativa { margin: 8px 0 0; font-weight: 500; }
.nuvem .nv-conta { font-weight: 600; }
.nuvem .nv-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.nuvem .nv-estado { font-size: 16px; margin: 12px 0; }
.nuvem button, .nuvem .bt { min-height: 44px; }
.nuvem .nv-vistas { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px; margin-top: 12px; }
.nuvem .nv-vistas figure { margin: 0; }
.nuvem .nv-vistas figcaption { font-size: 13px; color: var(--texto-2); text-transform: capitalize; }
.nuvem .nv-vistas img { width: 100%; border: 1px solid var(--linha); border-radius: 4px; }
/* Nuvem → 3D, fase 2: etapa de peças e resultado do modelo */
.nuvem .nv-abas { display: none; gap: 8px; margin: 8px 0; }
.nuvem .nv-abas button { flex: 1; }
.nuvem .nv-abas button[aria-selected="true"] { background: var(--sel-a); color: #FFFFFF; }
.nuvem .nv-pecas { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr); gap: 16px; align-items: start; }
.nuvem .nv-ferr { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.nuvem .nv-ferr [aria-pressed="true"] { background: var(--sel-a); color: #FFFFFF; }
.nuvem .nv-medida { min-height: 1.4em; font-variant-numeric: tabular-nums; }
.nuvem .nv-painel { display: grid; gap: 12px; min-width: 0; }
.nuvem .nv-lista-comp ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.nuvem .nv-comp { width: 100%; height: auto; min-height: 44px; display: grid; justify-content: stretch; justify-items: start; gap: 2px; padding: 6px 10px; text-align: left; }
.nuvem .nv-comp small { color: var(--texto-2); }
.nuvem .nv-comp.sel { box-shadow: inset 0 0 0 2px var(--foco); }
.nuvem .nv-comp.com-erro small { color: var(--erro); }
.nuvem .nv-add { display: flex; gap: 6px; margin-top: 8px; }
.nuvem .nv-add select, .nuvem .nv-form select, .nuvem .nv-form input, .nuvem .nv-form textarea { min-height: 44px; font: inherit; padding: 0 8px; border: 1px solid var(--linha); border-radius: 6px; }
.nuvem .nv-form textarea { padding: 8px; font-family: ui-monospace, monospace; width: 100%; box-sizing: border-box; }
.nuvem .nv-form { display: grid; gap: 10px; min-width: 0; border: 1px solid var(--linha); border-radius: 8px; }
.nuvem .nv-param { display: grid; gap: 4px; font-size: 13px; color: var(--texto-2); }
.nuvem .nv-param small { font-size: 12px; }
/* linhas de mensagem com altura fixa: entrar ou sair um erro nunca muda a altura do painel (o texto inteiro fica no title) */
.nuvem .nv-linha-fixa { display: block; max-width: 100%; height: 1.4em; line-height: 1.4em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nuvem .nv-comp, .nuvem .nv-form, .nuvem .nv-param { grid-template-columns: minmax(0, 1fr); }
.nuvem .nv-comp .nv-linha-fixa { justify-self: stretch; }
.nuvem .nv-linha { display: flex; gap: 6px; }
.nuvem .nv-linha input { flex: 1; min-width: 0; }
.nuvem .nv-check { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.nuvem .invalido { border-color: var(--erro) !important; background: var(--erro-fundo); }
.nuvem .nv-msg, .nuvem .nv-erro, .nuvem .nv-erros { color: var(--erro); }
.nuvem .nv-inst-rolar, .nuvem .nv-tabela { overflow-x: auto; }
.nuvem .nv-inst input { width: 6.5em; }
.nuvem .nv-inst tr.sel td { background: var(--and-fundo); }
.nuvem .nv-repetir { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.nuvem .nv-repetir label { display: grid; gap: 2px; font-size: 13px; }
.nuvem .nv-repetir input { width: 7em; }
.nuvem .nv-proposta { border: 2px solid var(--foco); border-radius: 8px; padding: 12px; }
.nuvem .nv-item { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 6px; align-items: stretch; }
.nuvem .nv-trava { min-width: 44px; min-height: 44px; padding: 0; font-size: 18px; }
.nuvem .nv-trava[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--foco); }
.nuvem #nvEncaixe { container-type: inline-size; }
.nuvem .nv-encaixe { margin-bottom: 12px; }
.nuvem .nv-encaixe .bt { min-height: 44px; }
.nuvem .nv-encaixe td .bt { margin: 2px 4px 2px 0; }
.nuvem .nv-d.d-verde { color: var(--ok); font-weight: 600; }
.nuvem .nv-d.d-amarelo { color: var(--and); font-weight: 600; }
.nuvem .nv-d.d-vermelho { color: var(--erro); font-weight: 600; }
@container (max-width: 560px) {
  .nuvem .nv-encaixe thead { display: none; }
  .nuvem .nv-encaixe table, .nuvem .nv-encaixe tbody, .nuvem .nv-encaixe tr, .nuvem .nv-encaixe td { display: block; width: 100%; }
  .nuvem .nv-encaixe tr { border: 1px solid var(--linha); border-radius: 8px; padding: 8px; margin-bottom: 8px; }
  .nuvem .nv-encaixe td { border: 0; padding: 4px 0; }
  .nuvem .nv-encaixe td[data-rotulo]:not([data-rotulo=""])::before { content: attr(data-rotulo) ": "; color: var(--texto-2); }
}
.nuvem .nv-proposta table, .nuvem .nv-lista-mat, .nuvem .nv-desvio { border-collapse: collapse; width: 100%; font-size: 14px; }
.nuvem .nv-proposta th, .nuvem .nv-proposta td, .nuvem .nv-lista-mat th, .nuvem .nv-lista-mat td, .nuvem .nv-desvio th, .nuvem .nv-desvio td { border-bottom: 1px solid var(--linha); padding: 6px; text-align: left; vertical-align: top; }
.nuvem .nv-lista-mat td small { display: block; color: var(--texto-2); }
.nuvem .nv-corte-img { width: 100%; border: 1px solid var(--linha); border-radius: 4px; }
.nuvem .nv-corte { margin-top: 8px; padding: 8px; border: 1px solid var(--linha); border-radius: 8px; background: var(--papel-fundo); }
.nuvem .nv-corte-barra { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.nuvem .nv-corte-barra label { display: grid; gap: 2px; font-size: 13px; }
.nuvem .nv-corte-barra input, .nuvem .nv-corte-barra select { min-height: 44px; width: 7em; }
.nuvem .nv-corte-tela { display: block; width: 100%; height: 360px; touch-action: none; cursor: crosshair; }
.nuvem .nv-downloads { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.nuvem .nv-downloads .bt { min-height: 44px; align-items: center; justify-content: center; }
.nuvem .nv-desvio tr.d-verde td:nth-child(2), .nuvem .nv-desvio tr.d-verde td:nth-child(3) { color: var(--ok); font-weight: 600; }
.nuvem .nv-desvio tr.d-amarelo td:nth-child(2), .nuvem .nv-desvio tr.d-amarelo td:nth-child(3) { color: var(--and); font-weight: 600; }
.nuvem .nv-desvio tr.d-vermelho td:nth-child(2), .nuvem .nv-desvio tr.d-vermelho td:nth-child(3) { color: var(--erro); font-weight: 600; }
.nuvem .nv-avisos li { margin: 4px 0; }
@media (max-width: 900px), (pointer: coarse) {
  .nuvem .nv-abas { display: flex; }
  .nuvem .nv-pecas { display: block; }
  .nuvem .nv-pecas[data-aba-ativa="cena"] .nv-painel, .nuvem .nv-pecas[data-aba-ativa="pecas"] .nv-cena { display: none; }
}

/* celular: botoes segmentados mantem 44 px mesmo com regras mais especificas acima */
@media (max-width: 600px) { .segm button:not(:is(.palco, .vistas, .painel-corte, .vt-pontos) *), .cartao .motor .segm button, .esb-lado .motor .segm button { min-height: 44px; } }

/* link de pular para o conteúdo: aparece só quando recebe o foco do teclado */
.pular { position: absolute; left: 8px; top: -60px; z-index: 1000; background: var(--sel-a); color: #FFFFFF; padding: 10px 14px; border-radius: 8px; }
.pular:focus { top: 8px; }
main[tabindex="-1"]:focus, h1[tabindex="-1"]:focus { outline: none; }
.progresso .caixa h1 { font-size: 20px; font-weight: 600; }

/* barra fixa com o Gerar e o resumo nos formulários longos */
.barra-gerar { position: sticky; bottom: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--sup-forte); border: 1px solid var(--linha); border-radius: 14px 14px 0 0; box-shadow: 0 -6px 18px rgba(20, 41, 74, .08); }
.barra-gerar .bt { min-height: 44px; height: 48px; font-size: 17px; margin-left: auto; }
.bg-resumo { font-size: 15px; color: var(--texto-2); }
.bg-resumo .alerta { color: var(--alerta); font-weight: 600; }
.bg-resumo .erro { color: var(--erro); font-weight: 600; }

/* seções do formulário: H2 dentro do summary e índice */
.grupo > summary .grupo-t { display: inline; font: inherit; margin: 0; letter-spacing: inherit; }
@media (min-width: 1001px) {
  .lado { max-height: calc(100vh - 100px); overflow: auto; padding: 4px; }   /* o overflow corta o contorno de foco de 2 px + offset 2 px */
}
.grupo { scroll-margin-top: calc(var(--altura-barra, 64px) + 12px); }

/* aba Cronograma */
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.cr { padding: 12px 16px 16px; }
.cr-cab { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px 14px; border: 0; padding: 0; margin: 0 0 10px; }
.cr-sab { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.cr-fer { grid-column: 1 / -1; }
.cr-resumo { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 6px 0 10px; padding: 0; }
.cr-msg { color: var(--texto); font-weight: 600; margin: 0 0 8px; }
.cr-aviso { color: var(--alerta); margin: 0 0 6px; }
.cr-gantt { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--linha); border-radius: 10px; background: var(--papel-fundo); max-width: 100%; }
.cr-gantt svg { display: block; font-family: var(--fonte); }
.cr-folga { fill: #14294a0a; }
.cr-dia { font-size: 14px; fill: var(--texto-2); }
.cr-fundo { fill: transparent; }
.cr-linha:hover .cr-fundo, .cr-linha:focus-visible .cr-fundo { fill: #14294a0d; }
.cr-linha.sel .cr-fundo { fill: #a8874f24; }
.cr-linha.atual .cr-barra { stroke: var(--dourado); stroke-width: 3; }
.cr-linha.manual .cr-barra { stroke-dasharray: 4 3; stroke: var(--texto); stroke-width: 1.5; }
.cr-linha { cursor: pointer; outline: none; }
.cr-linha:focus-visible .cr-fundo { stroke: var(--dourado); stroke-width: 2; }
.cr-linha:focus-visible .cr-nome { text-decoration: underline; }
.cr-nome { font-size: 14px; fill: var(--texto); }
.cr-dur { font-size: 14px; fill: var(--texto-2); }
.cr-borda { fill: transparent; cursor: ew-resize; }
.cr-barra[data-arrasto] { cursor: grab; }
.cr-gantt svg { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.cr-dep { fill: none; stroke: #8a95a3; stroke-width: 1.2; }
.cr-ponta { fill: #8a95a3; }
.cr-hoje { stroke: var(--dourado); stroke-width: 2; pointer-events: none; }
.cr-quadro { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--linha); border-left: 3px solid var(--dourado); border-radius: 8px; }
.cr-bts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.cr-regua { position: absolute; left: 12px; right: 12px; bottom: 116px; z-index: 5; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--sup-forte) 94%, transparent); color: var(--texto); box-shadow: 0 4px 18px rgba(20, 41, 74, .18); }
.cr-regua .bt { color: var(--texto); background: var(--sup-forte); }
.cr-regua select { color: var(--texto); }
.cr-r-topo { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 15px; }
.cr-r-linha { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; }
.cr-r-linha input[type=range] { width: 100%; accent-color: var(--dourado); }
.cr-r-ops { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 14px; }
.cr-r-ops label { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; }
@media (max-width: 600px) { .cr-r-ops label { min-height: 44px; } .cr-regua { left: 8px; right: 8px; bottom: 170px; } .cr-r-linha input[type=range] { min-height: 44px; } }

/* Nuvem: IA (fase 3b-1) */
.ia-cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin: 16px 0; }
.ia-cartao { text-align: left; padding: 20px; min-height: 44px; border: 1px solid var(--linha); border-radius: 12px; background: var(--sup-forte); color: var(--texto); font: inherit; cursor: pointer; display: grid; gap: 8px; }
.ia-cartao:hover, .ia-cartao:focus-visible { border-color: var(--dourado); }
.ia-cartao strong { font-size: 1.1rem; color: var(--texto); }
.ia-cartao span { color: var(--texto-2); }
.ia-form { display: grid; gap: 10px; max-width: 720px; }
.ia-form > label { min-height: 44px; display: flex; align-items: flex-end; font-weight: 600; }
.ia-form textarea, .ia-form input[type=number], .ia-orientar textarea { width: 100%; min-height: 44px; font: inherit; padding: 10px; border: 1px solid var(--linha); border-radius: 8px; }
.ia-detalhe { border: 0; padding: 0; margin: 0; display: flex; gap: 16px; flex-wrap: wrap; }
.ia-detalhe[hidden] { display: none; }
.ia-detalhe legend { font-weight: 600; padding: 0; }
.ia-detalhe label { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; }
.ia-form .bt, .ia-orientar .bt, .ia-img .bt { min-height: 44px; }
.ia-topo { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; align-items: baseline; margin: 12px 0; }
.ia-situacao { font-weight: 600; color: var(--texto); }
.ia-numeros { color: var(--texto-2); }
.ia-linha { list-style: none; padding: 0; margin: 12px 0 24px; display: grid; gap: 10px; }
.ia-ev { padding: 10px 12px; border-radius: 10px; background: var(--sup-forte); border: 1px solid var(--linha); overflow-wrap: anywhere; }
.ia-ev-usuario { background: var(--and-fundo); border-left: 4px solid var(--dourado); }
.ia-ev-erro { background: var(--erro-fundo); border-color: var(--erro); }
.ia-ev-ferramenta p { color: var(--texto-2); font-size: .92rem; }
.ia-mini { display: block; border: 0; padding: 0; margin-top: 8px; background: none; cursor: zoom-in; min-height: 44px; }
.ia-mini img { max-width: 320px; width: 100%; border-radius: 6px; display: block; }
.ia-orientar { position: sticky; top: calc(var(--altura-barra) + 4px); z-index: 5; display: grid; grid-template-columns: 1fr auto auto; gap: 8px; padding: 10px 0; background: var(--sup); }
.ia-ajuda { grid-column: 1 / -1; margin: 0 !important; font-size: 14px; }
.ia-img { max-width: 96vw; max-height: 96vh; padding: 8px; }
.ia-img img { max-width: 100%; max-height: 82vh; display: block; }
@media (max-width: 560px) {
  .ia-orientar { grid-template-columns: 1fr 1fr; }
  .ia-orientar textarea { grid-column: 1 / -1; }
  .ia-mini img { max-width: 100%; }
}

.ia-galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.ia-galeria figure { margin: 0; }
.ia-galeria img { width: 100%; border-radius: 6px; display: block; }
.ia-galeria figcaption { font-size: .9rem; color: var(--texto-2); margin-top: 4px; }

/* ---- visualizador híbrido (vis_tela.js e vis_link.js) ---- */
.vs-projeto { display: flex; flex-direction: column; height: calc(100vh - 64px); }
.vs-topo { display: flex; align-items: center; gap: 12px; padding: 10px 16px; }
.vs-topo h1 { font-size: 1.2rem; margin: 0; }
.vs-corpo { flex: 1; display: grid; grid-template-columns: 1fr 340px; min-height: 0; }
.vs-cena { position: relative; min-height: 360px; background: var(--sup); overflow: hidden; }
.vs-cena canvas { display: block; width: 100%; height: 100%; }
.vs-msg { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 8px 12px; color: var(--texto); background: color-mix(in srgb, var(--sup-forte) 85%, transparent); }
.vs-msg:empty { display: none; }
.vs-painel { overflow: auto; border-left: 1px solid var(--linha); padding: 8px 14px 24px; background: var(--sup-forte); }
.vs-sec { border-bottom: 1px solid var(--linha); padding: 10px 0; display: grid; gap: 6px; }
.vs-sec h2 { font-size: .95rem; margin: 0; color: var(--texto); }
.vs-sec h3 { font-size: .85rem; margin: 6px 0 0; }
.vs-linha { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.vs-botoes { display: flex; gap: 6px; flex-wrap: wrap; }
.vs-anima { display: grid; gap: 8px; }
.vs-anima-op { border: 0; margin: 0; padding: 0; display: grid; gap: 2px; }
.vs-anima-op legend { font-size: .85rem; font-weight: 600; padding: 0; margin-bottom: 2px; }
.vs-anima-op label { display: flex; align-items: center; gap: 6px; min-height: 28px; }
.vs-anima-pecas summary { cursor: pointer; font-size: .85rem; min-height: 28px; display: flex; align-items: center; }
.vs-anima-pecas .mudo, .vs-anima > .mudo { font-size: .8rem; margin: 2px 0 0; }
.vs-ajuste { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; }
.vs-modelo { border: 1px solid var(--linha); border-radius: 8px; padding: 8px; display: grid; gap: 4px; }
.vs-eqs { list-style: none; margin: 0; padding: 0 0 0 4px; max-height: 180px; overflow: auto; }
.vs-eqs li { display: flex; align-items: center; gap: 6px; min-height: 28px; }
.vs-eqs li label { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.vs-peca-cor { flex: none; width: 24px; height: 24px; padding: 0; border: 1px solid var(--linha); border-radius: 4px; background: #FFFFFF; cursor: pointer; }
.vs-peca-cor.vs-sem-cor { background: repeating-linear-gradient(45deg, #FFFFFF 0 4px, #E6E4DD 4px 8px); }
.vs-paleta { display: grid; grid-template-columns: repeat(6, 32px); gap: 6px; }
.vs-amostra { width: 32px; height: 32px; padding: 0; border: 1px solid rgba(0, 0, 0, .25); border-radius: 6px; cursor: pointer; }
.vs-amostra.ativa { outline: 3px solid var(--texto); outline-offset: 1px; }
.vs-limpar-cor { flex: none; width: 22px; height: 22px; padding: 0; border: 0; background: none; color: var(--texto-2); cursor: pointer; font-size: 1rem; line-height: 1; }
.vs-erro { color: var(--erro); margin: 0; }
.vs-aviso { color: var(--and); }
.vs-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.vs-links code { word-break: break-all; font-size: .75rem; }
.vs-links .vs-inativo { opacity: .6; }
.vs-recorte { width: min(960px, 96vw); }
.vs-recorte-cena { height: 60vh; position: relative; }
.vs-tabela { width: 100%; border-collapse: collapse; }
.vs-tabela td, .vs-tabela th { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--linha); }
.vs-novo form { display: flex; gap: 12px; flex-wrap: wrap; align-items: end; }
.vs-link { height: 100vh; height: 100dvh; display: flex; flex-direction: column; }
.vs-link-topo { display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: var(--sel-a); color: #FFFFFF; flex-wrap: wrap; }
.vs-link-topo img { height: 28px; }
.vs-link-topo b { color: var(--dourado-sobre-azul); }
.vs-link-nome { margin-left: 8px; }
.vs-link-corpo { flex: 1; position: relative; min-height: 0; }
.vs-link-corpo .vs-cena { position: absolute; inset: 0; min-height: 0; height: auto; }
.vs-link-painel { position: absolute; top: 10px; right: 10px; width: min(300px, calc(100vw - 32px)); max-height: calc(100% - 20px); overflow: auto; background: color-mix(in srgb, var(--sup-forte) 95%, transparent); border-radius: 10px; padding: 8px 12px; box-shadow: 0 2px 10px rgba(0,0,0,.13); }
.vs-indisponivel { margin: auto; text-align: center; padding: 24px; display: grid; gap: 10px; justify-items: center; }
@media (max-width: 900px) {
  .vs-projeto { height: auto; }
  .vs-corpo { grid-template-columns: 1fr; }
  .vs-cena { height: 60vh; }
  .vs-painel { border-left: 0; }
}

/* DWG para 3D: aviso de sigilo e tabela de vistas */
.d3-sigilo { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--dourado); border-radius: 8px; min-height: 44px; }
.d3-sigilo input { min-width: 20px; min-height: 20px; margin-top: 2px; }
.ia-form input[type=file] { min-height: 44px; }
#d3Vistas td, #d3Vistas th { white-space: normal; }
.nuvem .d3-avisos { padding: 10px 12px 10px 28px; border-left: 4px solid var(--dourado); background: var(--and-fundo); border-radius: 4px; }

/* Fluxo de ar */
/* fluxo de ar: estudo em tela cheia (fontes/fluxo_ar_tela.js) */
body.fa-aberto { overflow: hidden; }
.fa-tela { position: fixed; inset: 0; z-index: 45; display: flex; flex-direction: column; background: var(--papel); color: var(--texto); }
.fa-topo { display: flex; align-items: center; gap: 12px; padding: 8px 16px; background: var(--sup-forte); border-bottom: 1px solid var(--linha); }
.fa-topo h2, .fa-topo h3 { margin: 0; flex: 1; min-width: 0; font-size: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fa-topo h2 small { font-weight: 400; color: var(--texto-2); margin-left: 6px; font-size: 14px; }
.fa-sujo { padding: 4px 10px; border-radius: 999px; background: var(--and-fundo); color: color-mix(in srgb, var(--and) 55%, var(--texto)); font-size: 13px; font-weight: 600; }
.fa-corpo { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 380px; }
.fa-palco { position: relative; min-height: 0; }
.fa-3d { position: absolute; inset: 0; background: var(--fundo-liso); }
.fa-3d canvas { display: block; touch-action: none; }
.fa-modos { position: absolute; top: 12px; left: 12px; right: 12px; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; pointer-events: none; }
.fa-modos > * { pointer-events: auto; }
.fa-escala { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: color-mix(in srgb, var(--sup-forte) 92%, transparent); border: 1px solid var(--linha); border-radius: 6px; font-size: 13px; }
.fa-escala:empty { display: none; }
.fa-grad { display: inline-block; width: 110px; height: 10px; border-radius: 2px; }
.fa-vistas { position: absolute; left: 12px; bottom: 12px; z-index: 2; display: flex; gap: 6px; }
.fa-vistas .bt, .fa-modos .bt { background: color-mix(in srgb, var(--sup-forte) 95%, transparent); }
.fa-modos .bt.principal { background: var(--sel-a); }
.fa-dica { position: absolute; right: 12px; bottom: 12px; z-index: 2; margin: 0; max-width: 260px; padding: 6px 10px; background: color-mix(in srgb, var(--sup-forte) 92%, transparent); border-radius: 6px; font-size: 13px; color: var(--texto-2); }
.fa-ficha { position: absolute; right: 12px; bottom: 12px; z-index: 3; width: min(300px, calc(100% - 24px)); padding: 10px 12px; background: var(--sup-forte); border: 1px solid var(--linha); border-radius: 8px; box-shadow: 0 6px 20px rgba(20,41,74,.16); }
.fa-ficha header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; overflow-wrap: anywhere; }
.fa-ficha dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 0 0 8px; font-size: 14px; }
.fa-ficha dt { color: var(--texto-2); }
.fa-ficha dd { margin: 0; font-weight: 600; }
.fa-x { width: 32px; height: 32px; border: 0; background: transparent; font-size: 22px; line-height: 1; cursor: pointer; color: var(--texto-2); }
.fa-painel { overflow-y: auto; background: var(--sup-forte); border-left: 1px solid var(--linha); padding: 12px 16px 24px; display: flex; flex-direction: column; gap: 16px; }
.fa-abas { display: none; }
.fa-passo { display: flex; flex-direction: column; gap: 8px; }
.fa-passo h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; }
.fa-passo h3 span { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--sel-a); color: #FFFFFF; font-size: 13px; }
.fa-passo + .fa-passo { border-top: 1px solid var(--linha); padding-top: 14px; }
.fa-passo .nota { margin: 0; font-size: 13px; color: var(--texto-2); }
.fa-linha { display: flex; flex-wrap: wrap; gap: 6px; }
.fa-ponta { display: grid; grid-template-columns: 1fr 96px; gap: 4px 8px; align-items: center; padding: 6px 0; border-bottom: 1px dashed var(--linha); }
.fa-pnome { grid-column: 1 / -1; font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
.fa-fechados h4 { margin: 4px 0; font-size: 14px; }
.fa-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fa-chip { min-height: 32px; padding: 0 10px; border: 1px solid var(--linha); border-radius: 999px; background: var(--sup); color: var(--texto); font: inherit; font-size: 13px; cursor: pointer; overflow-wrap: anywhere; }
.fa-chip b { margin-left: 4px; }
.fa-avancado > summary { min-height: 40px; display: flex; align-items: center; font-weight: 600; cursor: pointer; }
.fa-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin-bottom: 8px; }
.fa-grade label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.fa-grade fieldset { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border: 1px solid var(--linha); border-radius: 6px; }
.fa-resumo { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.fa-resumo div { display: flex; flex-direction: column; padding: 8px 10px; border: 1px solid var(--linha); border-radius: 6px; }
.fa-resumo span { font-size: 13px; color: var(--texto-2); }
.fa-resumo b { font-size: 20px; }
.fa-resumo small { font-size: 12px; color: var(--texto-2); }
.fa-aviso { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px; border: 1px solid var(--dourado); border-radius: 6px; }
.fa-gaveta { background: var(--sup-forte); border-top: 1px solid var(--linha); max-height: 40vh; overflow: auto; }
.fa-gaveta > summary { position: sticky; top: 0; background: var(--sup-forte); min-height: 40px; display: flex; align-items: center; padding: 0 16px; font-weight: 600; cursor: pointer; }
.fa-gaveta .nv-tabela { padding: 0 16px 12px; }
.fa-comp { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 16px; background: rgba(13,28,53,.45); }
.fa-comp[hidden] { display: none; }
.fa-comp-caixa { width: min(720px, 100%); max-height: 100%; overflow: auto; background: var(--sup-forte); border-radius: 10px; padding-bottom: 12px; }
.fa-comp-caixa > :not(header) { margin-left: 16px; margin-right: 16px; }
.fa-checks { display: flex; flex-direction: column; gap: 6px; }
.fa-checks label { display: flex; gap: 8px; align-items: center; min-height: 40px; overflow-wrap: anywhere; }
.fa-tela input[type="number"], .fa-tela input:not([type]), .fa-tela select { width: 100%; min-width: 0; min-height: 40px; }
.fa-tela .nv-tabela { overflow-x: auto; }
@media (max-width: 760px) {
  .fa-corpo { grid-template-columns: 1fr; grid-template-rows: 52vh minmax(0, 1fr); }
  .fa-painel { border-left: 0; border-top: 1px solid var(--linha); padding-top: 0; }
  .fa-abas { display: flex; position: sticky; top: 0; z-index: 1; margin: 0 -16px; background: var(--sup-forte); border-bottom: 1px solid var(--linha); }
  .fa-abas button { flex: 1; min-height: 44px; border: 0; border-bottom: 3px solid transparent; background: transparent; font: inherit; font-weight: 600; color: var(--texto-2); cursor: pointer; }
  .fa-abas button[aria-current="step"] { color: var(--texto); border-bottom-color: var(--dourado); }
  .fa-tela[data-passo="1"] .fa-passo:not([data-p="1"]), .fa-tela[data-passo="2"] .fa-passo:not([data-p="2"]), .fa-tela[data-passo="3"] .fa-passo:not([data-p="3"]) { display: none; }
  .fa-passo + .fa-passo { border-top: 0; padding-top: 0; }
  .fa-dica { display: none; }
  .fa-ficha { left: 8px; right: 8px; bottom: 8px; width: auto; padding: 6px 10px; }
  .fa-ficha header { margin-bottom: 2px; }
  .fa-ficha dl { grid-template-columns: auto 1fr auto 1fr; gap: 0 8px; font-size: 13px; margin-bottom: 4px; }
  .fa-palco:has(.fa-ficha:not([hidden])) .fa-vistas { display: none; }
  .fa-gaveta { max-height: 50vh; }
}
.fa-perdido { position: absolute; inset: 40% 16px auto; z-index: 4; padding: 12px; background: var(--sup-forte); border: 1px solid var(--erro); border-radius: 8px; text-align: center; }
.fa-entrada { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 8px 0 12px; }
.ab-entrada { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; margin: .75rem 0; }
.ab-janela { max-width: 40rem; width: calc(100% - 2rem); border: 1px solid var(--linha); border-radius: 8px; padding: 1.25rem; }
.ab-janela::backdrop { background: rgb(20 41 74 / .4); }
.ab-lista { display: grid; gap: .5rem; max-height: 40vh; overflow: auto; }
.ab-linha { display: flex; gap: .5rem; align-items: flex-start; }
.ab-off { opacity: .55; }

.avisos-ger { max-height: 30vh; overflow-y: auto; margin: 12px 0 0; padding: 10px 12px; border-left: 3px solid var(--dourado); background: rgba(168,135,79,.08); font-size: 14px; color: var(--texto-2); }
.avisos-ger b { color: var(--texto); }
.avisos-ger ul { margin: 6px 0 0; padding-left: 18px; }
.avisos-ger li + li { margin-top: 4px; }


/* ---------- papel: cartão claro fixo para desenho técnico (planta, corte, isométrico, folha); as cores do desenho não mudam com o tema */
.papel, .planta-svg, .esb-folha, .cr-gantt, .fx, .nuvem .nv-corte, svg[aria-label="Corte do arranjo"] {
  --texto: var(--papel-texto); --texto-2: var(--papel-texto-2); --linha: var(--papel-linha);
  --ok: var(--papel-ok); --erro: var(--papel-erro); --alerta: var(--papel-alerta); --and: var(--papel-and);
  --sup: var(--papel-sup); --sup-forte: var(--papel-fundo); --branco: var(--papel-fundo);
  color: var(--papel-texto); color-scheme: light;
}
.papel { background: var(--papel-fundo); border: 1px solid var(--papel-linha); border-radius: var(--raio); }

@media (max-width: 600px) {
  :root { --altura-areas: calc(64px + env(safe-area-inset-bottom)); }
  .barra { margin: 8px 8px 0; gap: 8px; padding: 0 10px; }
  .marca span, .usuario, .busca-topo span, .busca-topo kbd, .maqs { display: none; }
  .busca-topo { flex: 0 0 44px; justify-content: center; padding: 0; }
  .areas { top: auto; left: 0; right: 0; bottom: 0; width: auto; height: var(--altura-areas); flex-direction: row; justify-content: space-around; padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); border-radius: 18px 18px 0 0; }
  .areas { background: var(--sup-forte); }   /* opaca no celular: conteúdo claro que passa por baixo não tira o contraste dos nomes */
  .areas a { width: auto; flex: 1; }
  .areas .ic { width: 32px; height: 32px; }
  .gaveta { left: 0; right: 0; bottom: var(--altura-areas); top: auto !important; width: auto; max-height: 70dvh; border-radius: 18px 18px 0 0; }
  nav.areas ~ main#conteudo, nav.areas ~ main#conteudo.pagina { margin-left: 0; padding-bottom: calc(var(--altura-areas) + 16px); }
  .barra-gerar { bottom: var(--altura-areas); }
  .vis, nav.areas ~ main#conteudo.vis { height: calc(100dvh - var(--altura-barra) - 88px); padding-bottom: 0; }
  .vis .palco { margin-right: 0; border-radius: 16px; }
  .vis .painel { left: 0; right: 0; top: auto; bottom: 0; width: auto; max-height: 70%; border-radius: 18px 18px 0 0; }
  .barra-flutuante { bottom: 64px; border-radius: 16px; }
  .vis.so-leitura { height: 100dvh; }
  .vis.so-leitura .palco { right: 0; bottom: 45%; }
  .vis.so-leitura .painel { top: 55%; max-height: none; }
  html { scroll-padding-bottom: calc(var(--altura-gerar) + var(--altura-areas)); }
}

/* modos escritório e cliente */
body.modo-cliente .so-escritorio { display: none !important; }
.modo-pilula { height: 32px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--linha); background: var(--sup-forte); color: var(--texto); font-weight: 600; cursor: pointer; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modo-pilula.cliente { background: linear-gradient(135deg, var(--acao-a), var(--acao-b)); color: var(--acao-texto); border-color: transparent; }
.faixa-cliente { position: sticky; top: 0; z-index: 33; display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 8px 8px 0 calc(var(--largura-areas) + 16px); padding: 6px 8px 6px 16px; border-radius: 12px; background: linear-gradient(135deg, #D9B878, #A8874F); color: #0A0F1A; font-weight: 600; }
.faixa-cliente .bt { background: rgba(255,255,255,.35); border-color: transparent; color: #0A0F1A; }
dialog.codigo { width: min(360px, calc(100% - 32px)); padding: 0; border: 1px solid var(--sup-borda); border-radius: 18px; background: var(--sup-forte); color: var(--texto); box-shadow: var(--sombra-alta); }
dialog.codigo .dc { display: grid; gap: 10px; padding: 20px; }
dialog.codigo input { height: 44px; padding: 0 12px; border-radius: var(--raio-campo); border: 1px solid var(--linha); background: var(--sup-forte); color: var(--texto); font-size: 20px; letter-spacing: .3em; text-align: center; }
dialog.codigo .rodape { display: flex; justify-content: flex-end; gap: 8px; }
.menu-usuario { position: relative; }
.menu-usuario summary { list-style: none; cursor: pointer; }
.menu-usuario summary::-webkit-details-marker { display: none; }
.mu-lista { position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; display: grid; min-width: 220px; padding: 6px; border-radius: 14px; background: var(--sup-forte); border: 1px solid var(--sup-borda); box-shadow: var(--sombra-alta); }
.mu-lista button { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 10px; border: 0; border-radius: 10px; background: transparent; color: var(--texto); text-align: left; cursor: pointer; }
.mu-lista button:hover { background: var(--sup); }
.mu-lista svg { width: 16px; height: 16px; }
@media (max-width: 600px) {
  .faixa-cliente { margin: 8px 8px 0; font-size: 14px; }
  .menu-usuario summary { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; font-size: 0; max-width: none; }
  .menu-usuario summary::before { content: "\2630"; font-size: 20px; }
  .modo-pilula { max-width: 84px; padding: 0 10px; font-size: 13px; }
  .barra .direita { gap: 6px; }
  .barra .chave { padding: 0; }
}
.entrar .nota { color: var(--texto-2); }