/* ==========================================================================
   Conversor CNC — DV4Z
   Uma folha só. O tema escuro troca apenas os tokens de cor: o desenho é o
   mesmo nos dois, e é isso que mantém as versões consistentes (lição do
   app-drpro, de onde vêm a paleta e o menu lateral).
   ========================================================================== */

/* `hidden` precisa vencer qualquer classe que define display. */
[hidden] { display: none !important; }

:root {
  --azul: #1F3C87;
  --azul-escuro: #142a63;
  --azul-noite: #0d1b40;
  --azul-claro: #2E9EE8;

  --fundo: #f4f6fa;
  --superficie: #ffffff;
  --superficie-2: #f8fafd;
  --texto: #16203a;
  --texto-suave: #5b6880;
  --borda: #dfe4ed;
  --borda-forte: #c3cbd9;
  --realce: #eef1f7;

  --erro: #c22e2e;
  --erro-fundo: #fdeeee;
  --alerta: #8a5a00;
  --alerta-fundo: #fff5dc;
  --ok: #1b7f4b;
  --ok-fundo: #e6f5ec;

  /* Visualizador: a peça é madeira clara; frente e verso em cores que não se
     confundem nem para quem não distingue vermelho de verde. */
  --peca: #efe3cf;
  --peca-borda: #b69c73;
  --frente: #1F3C87;
  --verso: #c2410c;
  --topo: #0f766e;
  --grade: rgba(22, 32, 58, 0.06);

  --menu-largura: 236px;
  --menu-fundo: #101b3a;
  --menu-texto: #c8d2e8;
  --menu-ativo: #1F3C87;

  --fonte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --sombra: 0 18px 50px rgba(16, 32, 77, 0.10);
  --sombra-leve: 0 1px 2px rgba(16, 32, 77, 0.06);
  --transicao: 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}

:root[data-tema="escuro"] {
  --fundo: #0d1320;
  --superficie: #18213a;
  --superficie-2: #141c31;
  --texto: #f0f4fb;
  --texto-suave: #a6b4d0;
  --borda: #2b3653;
  --borda-forte: #46557d;
  --realce: #24304f;
  --azul: #4d86ff;
  --azul-escuro: #3a6fdb;
  --azul-claro: #62b0ff;
  --erro: #ff9b9b;
  --erro-fundo: #43232a;
  --alerta: #f0c674;
  --alerta-fundo: #362b12;
  --ok: #7ee0ac;
  --ok-fundo: #14331f;
  --peca: #3b3326;
  --peca-borda: #8a7658;
  --frente: #7fb0ff;
  --verso: #ff9a5c;
  --topo: #4fd1c5;
  --grade: rgba(255, 255, 255, 0.05);
  --menu-fundo: #080e1b;
  --menu-ativo: #2a4fa8;
  --sombra: 0 18px 50px rgba(0, 0, 0, 0.5);
  --sombra-leve: 0 1px 2px rgba(0, 0, 0, 0.4);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html, body { height: 100%; }
body {
  font-family: var(--fonte);
  color: var(--texto);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}
img { max-width: 100%; display: block; }
a { color: var(--azul); }
code, .mono { font-family: var(--mono); font-size: 0.92em; }
:focus-visible { outline: 2px solid var(--azul-claro); outline-offset: 2px; }

/* ==========================================================================
   Login — duas colunas
   ========================================================================== */
.tela-auth { background: var(--superficie); }
.auth { min-height: 100%; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }

.auth__marca {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-start; gap: 40px;
  padding: 56px 60px; color: #fff;
  background:
    radial-gradient(120% 90% at 12% 8%, rgba(46, 158, 232, 0.55) 0%, rgba(46, 158, 232, 0) 55%),
    linear-gradient(160deg, #1F3C87 0%, #142a63 45%, #0d1b40 100%);
}
/* Malha discreta, lembrando mesa de CNC — textura sem competir com o texto. */
.auth__marca::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(120% 80% at 20% 15%, #000 0%, transparent 70%);
}
.auth__marca > * { position: relative; z-index: 1; }
.auth__marca-base { margin-top: auto; display: grid; gap: 18px; }
.auth__logo { width: 260px; }
.auth__marca-texto h1 { font-size: clamp(2rem, 2.6vw, 2.8rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.auth__marca-texto p { margin-top: 14px; max-width: 36ch; font-size: 1.05rem; color: rgba(255, 255, 255, 0.82); }
.auth__lista { margin-top: 26px; padding: 0; list-style: none; display: grid; gap: 10px; }
.auth__lista li { display: flex; gap: 10px; align-items: center; color: rgba(255, 255, 255, 0.85); }
.auth__lista li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #2E9EE8; flex: none; }
.auth__marca-rodape { font-size: 0.85rem; color: rgba(255, 255, 255, 0.6); }

.auth__painel { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 40px 24px; }
.auth__caixa { width: 100%; max-width: 380px; margin: 0 auto; }
.auth__logo-mobile { display: none; width: 190px; margin-bottom: 30px; }
.auth__cabecalho h2 { font-size: 1.7rem; letter-spacing: -0.02em; }
.auth__cabecalho p { color: var(--texto-suave); margin-top: 6px; margin-bottom: 26px; }
.auth__rodape {
  position: absolute; left: 24px; right: 24px; bottom: 20px;
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 0.82rem; color: var(--texto-suave);
}
.auth__tema { position: absolute; top: 18px; right: 18px; }

/* ==========================================================================
   Formulários e botões
   ========================================================================== */
.formulario { display: grid; gap: 16px; }
.campo { display: grid; gap: 6px; min-width: 0; }
.campo > label, .rotulo { font-size: 0.86rem; font-weight: 600; color: var(--texto); }
.campo--largo { grid-column: 1 / -1; }
.opcional { font-weight: 400; color: var(--texto-suave); }
.dica { font-size: 0.8rem; color: var(--texto-suave); line-height: 1.4; }

input, select, textarea {
  width: 100%; font: inherit; color: var(--texto);
  padding: 10px 12px; border: 1px solid var(--borda-forte); border-radius: var(--r-sm);
  background: var(--superficie); transition: border-color var(--transicao), box-shadow var(--transicao);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--azul-claro);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--azul-claro) 25%, transparent);
}
input:disabled { background: var(--realce); color: var(--texto-suave); cursor: not-allowed; }
input[type="checkbox"] { width: 18px; height: 18px; padding: 0; accent-color: var(--azul); }
textarea { resize: vertical; min-height: 84px; font-family: var(--mono); font-size: 0.9rem; }

.marcar { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; cursor: pointer; }
.campo--travado > label::after, .campo--serra > label::after {
  content: "fixo pela borda"; margin-left: 8px; font-size: 0.72rem; font-weight: 600;
  color: var(--topo); text-transform: uppercase; letter-spacing: 0.04em;
}
.campo--serra > label::after { content: "a serra usa o disco dela"; color: var(--alerta); }

.campo__senha { position: relative; }
.campo__senha input { padding-right: 44px; }
.botao-olho {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 0; border-radius: 6px; background: transparent; color: var(--texto-suave); cursor: pointer;
}
.botao-olho svg { width: 20px; height: 20px; }

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 600; font-size: 0.95rem; white-space: nowrap;
  padding: 11px 18px; border: 1px solid transparent; border-radius: var(--r-sm);
  color: #fff; background: var(--azul); cursor: pointer; text-decoration: none;
  transition: background var(--transicao), border-color var(--transicao), transform var(--transicao);
}
.botao:hover { background: var(--azul-escuro); }
.botao:active { transform: translateY(1px); }
.botao:disabled { opacity: 0.6; cursor: not-allowed; }
.botao--fantasma { color: var(--texto); background: transparent; border-color: var(--borda-forte); }
.botao--fantasma:hover { background: var(--realce); border-color: var(--azul); }
.botao--perigo { color: var(--erro); background: transparent; border-color: var(--borda-forte); }
.botao--perigo:hover { background: var(--erro-fundo); border-color: var(--erro); }
.botao--compacto { padding: 7px 12px; font-size: 0.86rem; }
.botao--icone { padding: 7px; width: 36px; height: 36px; }
.botao--largo { width: 100%; }
.botao__spinner {
  display: none; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.4); border-top-color: #fff; animation: girar 0.7s linear infinite;
}
.botao--carregando .botao__spinner { display: inline-block; }
@keyframes girar { to { transform: rotate(360deg); } }

/* ==========================================================================
   Mensagens e etiquetas
   ========================================================================== */
.aviso {
  padding: 10px 14px; border-radius: var(--r-sm); font-size: 0.9rem;
  color: var(--erro); background: var(--erro-fundo); border: 1px solid color-mix(in srgb, var(--erro) 30%, transparent);
}
.aviso--ok { color: var(--ok); background: var(--ok-fundo); border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.aviso--alerta { color: var(--alerta); background: var(--alerta-fundo); border-color: color-mix(in srgb, var(--alerta) 30%, transparent); }
.aviso ul { margin: 4px 0 0; padding-left: 18px; }

.etiqueta {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: 999px; font-size: 0.74rem; font-weight: 600; white-space: nowrap;
  color: var(--azul); background: color-mix(in srgb, var(--azul) 12%, transparent);
}
.etiqueta--ok { color: var(--ok); background: var(--ok-fundo); }
.etiqueta--alerta { color: var(--alerta); background: var(--alerta-fundo); }
.etiqueta--erro { color: var(--erro); background: var(--erro-fundo); }
.etiqueta--neutra { color: var(--texto-suave); background: var(--realce); }

/* ==========================================================================
   Casca: menu lateral + conteúdo
   ========================================================================== */
.menu {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 30;
  width: var(--menu-largura); display: flex; flex-direction: column;
  padding: 18px 0 14px; background: var(--menu-fundo); color: var(--menu-texto);
}
.menu__logo { display: block; padding: 4px 22px 22px; }
.menu__logo img { width: 160px; }
.menu__produto { padding: 0 22px 14px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(200, 210, 232, 0.6); }
.menu__itens { display: grid; gap: 2px; padding: 0 10px; }
.menu__item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: var(--r-sm);
  color: var(--menu-texto); text-decoration: none; font-size: 0.93rem; font-weight: 500;
}
.menu__item:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.menu__item--ativo { color: #fff; background: var(--menu-ativo); }
.menu__icone { width: 18px; height: 18px; flex: none; background: currentColor; opacity: 0.9;
  -webkit-mask: var(--icone) center / contain no-repeat; mask: var(--icone) center / contain no-repeat; }
.menu__icone--inicio   { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5V21a1 1 0 0 1-1 1h-5v-7H9v7H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E"); }
.menu__icone--importar { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12m0 0-4-4m4 4 4-4M4 17v3a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-3'/%3E%3C/svg%3E"); }
.menu__icone--usinagens{ --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='8' cy='12' r='1.6'/%3E%3Cpath d='M12 12h6'/%3E%3C/svg%3E"); }
.menu__icone--maquina  { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h16M6 20V9h12v11M9 9V5h6v4M12 13v3'/%3E%3C/svg%3E"); }
.menu__icone--usuarios{ --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.2'/%3E%3Cpath d='M3 20c0-3.3 2.7-5 6-5s6 1.7 6 5'/%3E%3Cpath d='M16 5.2a3.2 3.2 0 0 1 0 5.6M18 15c2 .6 3 2.2 3 5'/%3E%3C/svg%3E"); }
.menu__icone--arquivos { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E"); }

.menu__rodape { margin-top: auto; padding: 14px 16px 0; border-top: 1px solid rgba(255, 255, 255, 0.08); display: grid; gap: 10px; }
.menu__usuario { font-size: 0.82rem; color: rgba(200, 210, 232, 0.75); overflow: hidden; text-overflow: ellipsis;
  display: block; text-decoration: none; border-radius: 8px; }
.menu__usuario:hover, .menu__usuario:focus-visible { color: #fff; text-decoration: underline; }
.menu__acoes { display: flex; gap: 8px; }
.menu__botao {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 10px; font: inherit; font-size: 0.82rem; color: var(--menu-texto);
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r-sm); cursor: pointer;
}
.menu__botao:hover { color: #fff; background: rgba(255, 255, 255, 0.12); }
.menu__versao { font-size: 0.72rem; color: rgba(200, 210, 232, 0.4); }

.topo-mobile { display: none; }

.conteudo { margin-left: var(--menu-largura); padding: 30px 36px 56px; max-width: 1480px; }
.cabecalho { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.cabecalho h1 { font-size: 1.6rem; letter-spacing: -0.02em; line-height: 1.2; }
.cabecalho__sub { margin-top: 4px; color: var(--texto-suave); max-width: 72ch; }
.cabecalho__acoes { display: flex; flex-wrap: wrap; gap: 10px; }
.voltar { display: inline-flex; gap: 6px; font-size: 0.86rem; color: var(--texto-suave); text-decoration: none; margin-bottom: 6px; }
.voltar:hover { color: var(--azul); }

/* ==========================================================================
   Cartões, grades, listas
   ========================================================================== */
.cartao {
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--r-md);
  padding: 20px; box-shadow: var(--sombra-leve);
}
.cartao + .cartao { margin-top: 16px; }
.cartao__titulo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.cartao__titulo h2 { font-size: 1.05rem; }
.cartao__titulo p { color: var(--texto-suave); font-size: 0.86rem; }

.grade-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.grade-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.grade-campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; align-items: start; }

.vazio {
  padding: 34px 20px; text-align: center; color: var(--texto-suave);
  border: 1px dashed var(--borda-forte); border-radius: var(--r-md);
}
.vazio strong { display: block; color: var(--texto); margin-bottom: 4px; }

.tabela { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.tabela th {
  text-align: left; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--texto-suave); font-weight: 600; padding: 10px 12px; border-bottom: 1px solid var(--borda);
}
.tabela td { padding: 11px 12px; border-bottom: 1px solid var(--borda); vertical-align: middle; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela tbody tr:hover td { background: var(--realce); }
.tabela__acoes { text-align: right; white-space: nowrap; }
.tabela__nome { font-weight: 600; }
.tabela-rolagem { overflow-x: auto; }

/* ==========================================================================
   Início
   ========================================================================== */
.entradas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 26px; }
.entrada {
  display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start;
  padding: 22px; border-radius: var(--r-md); border: 1px solid var(--borda);
  background: var(--superficie); color: var(--texto); text-decoration: none; text-align: left;
  font: inherit; cursor: pointer; transition: border-color var(--transicao), box-shadow var(--transicao), transform var(--transicao);
}
.entrada:hover { border-color: var(--azul); box-shadow: var(--sombra); transform: translateY(-1px); }
.entrada__icone { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, var(--azul-claro), var(--azul)); }
.entrada__icone svg { width: 24px; height: 24px; }
.entrada h2 { font-size: 1.08rem; }
.entrada p { color: var(--texto-suave); font-size: 0.9rem; margin-top: 2px; }

.soltar {
  position: relative; display: grid; place-items: center; text-align: center; gap: 8px;
  padding: 34px 20px; border: 2px dashed var(--borda-forte); border-radius: var(--r-md);
  background: var(--superficie-2); color: var(--texto-suave); cursor: pointer;
  transition: border-color var(--transicao), background var(--transicao);
}
.soltar:hover, .soltar--sobre { border-color: var(--azul); background: color-mix(in srgb, var(--azul) 6%, var(--superficie)); }
.soltar strong { color: var(--texto); font-size: 1.02rem; }
.soltar input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.soltar svg { width: 34px; height: 34px; color: var(--azul); }

/* ==========================================================================
   Editor da peça
   ========================================================================== */
.editor { display: grid; grid-template-columns: minmax(360px, 440px) minmax(0, 1fr); gap: 20px; align-items: start; }
.editor__lateral { display: grid; gap: 16px; min-width: 0; }
.editor__lateral > .cartao + .cartao { margin-top: 0; }
.editor__vista { position: sticky; top: 20px; display: grid; gap: 12px; }

.nome-peca {
  font: inherit; font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em;
  padding: 2px 6px; margin-left: -6px; border: 1px solid transparent; border-radius: var(--r-sm);
  background: transparent; color: var(--texto); width: min(100%, 520px);
}
.nome-peca:hover { border-color: var(--borda); }
.estado-salvo { font-size: 0.82rem; color: var(--texto-suave); }
.estado-salvo--salvando { color: var(--alerta); }
.estado-salvo--erro { color: var(--erro); }

.tipos { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.tipo {
  display: grid; justify-items: center; gap: 6px; padding: 12px 8px;
  font: inherit; font-size: 0.8rem; font-weight: 600; text-align: center; line-height: 1.25;
  color: var(--texto); background: var(--superficie-2); border: 1px solid var(--borda);
  border-radius: var(--r-sm); cursor: pointer;
}
.tipo:hover { border-color: var(--azul); }
.tipo--ativo { color: #fff; background: var(--azul); border-color: var(--azul); }
.tipo svg { width: 36px; height: 26px; }

.lista-usinagens { list-style: none; padding: 0; display: grid; gap: 6px; max-height: 70vh; overflow: auto; }
.usinagem {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: start;
  padding: 10px; border: 1px solid var(--borda); border-radius: var(--r-sm); background: var(--superficie-2);
  cursor: pointer;
}
.usinagem:hover, .usinagem--foco { border-color: var(--azul); }
.usinagem--erro { border-color: color-mix(in srgb, var(--erro) 60%, transparent); background: var(--erro-fundo); }
.usinagem__numero { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-size: 0.78rem; font-weight: 700; color: #fff; background: var(--frente); }
.usinagem__numero--verso { background: var(--verso); }
.usinagem__numero--topo { background: var(--topo); }
.usinagem__titulo { font-weight: 600; font-size: 0.9rem; }
.usinagem__resumo { font-size: 0.8rem; color: var(--texto-suave); overflow-wrap: anywhere; }
.usinagem__msg { display: block; margin-top: 4px; font-size: 0.8rem; }
.usinagem__msg--erro { color: var(--erro); }
.usinagem__msg--alerta { color: var(--alerta); }
.usinagem__acoes { display: flex; gap: 4px; }
.usinagem__seta { transition: transform .15s; }
.usinagem--aberta .usinagem__seta { transform: rotate(90deg); }
.usinagem__painel { grid-column: 1 / -1; cursor: default; padding-top: 10px; border-top: 1px solid var(--borda); }
.usinagem__pontos { margin-top: 10px; }
.usinagem__pontos[hidden] { display: none; }
.usinagem__pontos textarea { width: 100%; }
.usinagem__painel .grade-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.usinagem__marcas { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.usinagem__painel .campo--largo { grid-column: 1 / -1; }
.botao-mini {
  width: 30px; height: 30px; display: grid; place-items: center; padding: 0;
  font: inherit; color: var(--texto-suave); background: transparent; border: 1px solid transparent;
  border-radius: 6px; cursor: pointer;
}
.botao-mini:hover { color: var(--texto); background: var(--realce); border-color: var(--borda); }
.botao-mini--perigo:hover { color: var(--erro); background: var(--erro-fundo); }
.botao-mini svg { width: 16px; height: 16px; }

/* ==========================================================================
   Visualizador
   ========================================================================== */
.vista {
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--r-md);
  box-shadow: var(--sombra-leve); overflow: hidden;
}
.vista__barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--borda); }
.vista__barra h2 { font-size: 0.98rem; }
.vista__controles { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.alternador { display: inline-flex; border: 1px solid var(--borda-forte); border-radius: var(--r-sm); overflow: hidden; }
.alternador button { font: inherit; font-size: 0.8rem; padding: 6px 10px; border: 0; background: transparent; color: var(--texto-suave); cursor: pointer; }
.alternador button[aria-pressed="true"] { color: #fff; background: var(--azul); }
.vista__tela { position: relative; background: var(--superficie-2); min-height: 360px; }
.vista__tela svg { display: block; width: 100%; height: auto; max-height: 72vh; touch-action: none; }
.vista__legenda { display: flex; flex-wrap: wrap; gap: 14px; padding: 10px 14px; border-top: 1px solid var(--borda); font-size: 0.8rem; color: var(--texto-suave); }
.vista__legenda span { display: inline-flex; align-items: center; gap: 6px; }
.vista__legenda i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.vista__dica { position: absolute; left: 12px; bottom: 10px; font-size: 0.74rem; color: var(--texto-suave); pointer-events: none; }

/* Vista 3D: o canvas ocupa a mesma tela do SVG; as faces ficam por cima. */
.vista3d { position: relative; width: 100%; height: min(72vh, 560px); min-height: 320px; touch-action: none; cursor: grab; }
.vista3d:active { cursor: grabbing; }
.vista3d canvas { display: block; width: 100% !important; height: 100% !important; }
.vista3d__faces { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; flex-wrap: wrap; gap: 4px; pointer-events: none; }
.vista3d__faces button { pointer-events: auto; font: inherit; font-size: 0.74rem; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--borda-forte); background: color-mix(in srgb, var(--superficie) 88%, transparent); color: var(--texto); cursor: pointer; }
.vista3d__faces button[aria-pressed="true"] { background: var(--azul); border-color: var(--azul); color: #fff; }
.vista3d__aviso { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; text-align: center; color: var(--texto-suave); font-size: 0.9rem; }

.svg-peca { fill: var(--peca); stroke: var(--peca-borda); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.svg-grade { stroke: var(--grade); stroke-width: 1; vector-effect: non-scaling-stroke; }
.svg-cota { fill: var(--texto-suave); font-family: var(--fonte); }
.svg-cota-linha { stroke: var(--texto-suave); stroke-width: 1; vector-effect: non-scaling-stroke; }
.svg-eixo-x { stroke: #d33; fill: #d33; }
.svg-eixo-y { stroke: #36f; fill: #36f; }
.svg-u { fill: none; stroke-linecap: round; stroke-linejoin: round; cursor: pointer; }
.svg-u--frente { stroke: var(--frente); fill: color-mix(in srgb, var(--frente) 22%, transparent); }
.svg-u--verso  { stroke: var(--verso); fill: color-mix(in srgb, var(--verso) 18%, transparent); stroke-dasharray: 6 4; }
.svg-u--topo   { stroke: var(--topo); fill: color-mix(in srgb, var(--topo) 30%, transparent); }
.svg-u--linha  { fill: none; }
/* Esvaziar por dentro: a área toda sai, então o preenchimento tem que se ver. */
.svg-u--vazio.svg-u--frente { fill: color-mix(in srgb, var(--frente) 55%, transparent); }
.svg-u--vazio.svg-u--verso  { fill: color-mix(in srgb, var(--verso) 50%, transparent); }
.svg-u--vazio.svg-u--topo   { fill: color-mix(in srgb, var(--topo) 55%, transparent); }
.svg-u--erro   { stroke: var(--erro) !important; fill: color-mix(in srgb, var(--erro) 25%, transparent) !important; }
.svg-u--foco   { filter: drop-shadow(0 0 3px var(--azul-claro)); }
.svg-numero { font-family: var(--fonte); font-weight: 700; fill: var(--texto); paint-order: stroke; stroke: var(--superficie); stroke-width: 3px; pointer-events: none; }

/* ==========================================================================
   Diálogo
   ========================================================================== */
dialog {
  /* margin:auto de volta: o reset `* { margin: 0 }` tirava o diálogo do centro. */
  margin: auto;
  width: min(680px, calc(100vw - 32px)); max-height: calc(100vh - 40px);
  padding: 0; border: 1px solid var(--borda); border-radius: var(--r-lg);
  color: var(--texto); background: var(--superficie); box-shadow: var(--sombra);
}
dialog::backdrop { background: rgba(8, 14, 27, 0.55); backdrop-filter: blur(2px); }
.dialogo__cabecalho { display: flex; justify-content: space-between; gap: 16px; padding: 18px 22px 12px; border-bottom: 1px solid var(--borda); }
.dialogo__cabecalho h2 { font-size: 1.15rem; }
.dialogo__cabecalho p { font-size: 0.86rem; color: var(--texto-suave); margin-top: 2px; }
.dialogo__corpo { padding: 18px 22px; overflow: auto; display: grid; gap: 16px; }
.dialogo__rodape { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 22px 18px; border-top: 1px solid var(--borda); }

/* ==========================================================================
   Catálogo de usinagens
   ========================================================================== */
.catalogo { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.item-catalogo { display: grid; grid-template-rows: auto auto 1fr auto; gap: 12px; }
.item-catalogo__topo { display: flex; gap: 14px; align-items: flex-start; }
.item-catalogo__desenho { flex: none; width: 92px; height: 64px; border-radius: var(--r-sm); background: var(--superficie-2); border: 1px solid var(--borda); display: grid; place-items: center; }
.item-catalogo__desenho svg { width: 76px; height: 52px; }
.item-catalogo h2 { font-size: 1.05rem; }
.item-catalogo__codigo { font-family: var(--mono); font-size: 0.78rem; color: var(--texto-suave); }
.item-catalogo ul { padding-left: 18px; font-size: 0.86rem; color: var(--texto-suave); display: grid; gap: 3px; }
.item-catalogo__prova { display: grid; gap: 6px; font-size: 0.82rem; }
.item-catalogo__prova div { display: flex; gap: 8px; align-items: baseline; }
.item-catalogo__campos { display: flex; flex-wrap: wrap; gap: 6px; }

/* ==========================================================================
   Importação
   ========================================================================== */
.passos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; padding: 0; list-style: none; }
.passos li { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; font-size: 0.84rem; color: var(--texto-suave); background: var(--realce); }
.passos li b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: 0.75rem; background: var(--borda-forte); color: var(--superficie); }
.passos li[aria-current="step"] { color: #fff; background: var(--azul); }
.passos li[aria-current="step"] b { background: #fff; color: var(--azul); }
.passos li.passos--feito b { background: var(--ok); color: #fff; }

.editor--importar { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.camadas { display: grid; gap: 10px; }
.camada { border: 1px solid var(--borda); border-radius: var(--r-sm); padding: 12px; background: var(--superficie); display: grid; gap: 12px; }
.camada--desligada { background: var(--superficie-2); }
.camada--desligada .tabela__nome { color: var(--texto-suave); }
.camada__topo { display: flex; justify-content: space-between; align-items: start; gap: 10px; }
.camada__topo > div { min-width: 0; overflow-wrap: anywhere; }
.camada__topo select { width: auto; min-width: 128px; flex: none; }
.camada__campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 12px; }
.camada__campos select, .camada__campos input { padding: 7px 9px; font-size: 0.88rem; }
.dica--alerta { color: var(--alerta); }
.contagem { display: flex; flex-wrap: wrap; gap: 4px; }

/* ==========================================================================
   Máquina
   ========================================================================== */
.modelos { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.modelo {
  display: grid; gap: 4px; padding: 14px; text-align: left; font: inherit;
  color: var(--texto); background: var(--superficie-2); border: 1px solid var(--borda);
  border-radius: var(--r-md); cursor: pointer;
}
.modelo:hover { border-color: var(--azul); }
.modelo[aria-pressed="true"] { border-color: var(--azul); box-shadow: inset 0 0 0 1px var(--azul); background: color-mix(in srgb, var(--azul) 8%, var(--superficie)); }
.modelo strong { font-size: 0.95rem; }
.modelo span { font-size: 0.8rem; color: var(--texto-suave); }

/* ==========================================================================
   Arquivos
   ========================================================================== */
.trilha { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 0.9rem; margin-bottom: 12px; }
.trilha a { text-decoration: none; }
.trilha span { color: var(--texto-suave); }
.pasta-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; color: var(--texto); }
.pasta-link::before { content: ""; width: 16px; height: 16px; background: var(--azul); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E") center/contain no-repeat; }

/* ==========================================================================
   Responsivo
   ========================================================================== */
@media (max-width: 1180px) {
  .editor, .editor--importar { grid-template-columns: minmax(0, 1fr); }
  .editor__vista { position: static; order: -1; }
}
@media (max-width: 920px) {
  .auth { grid-template-columns: 1fr; }
  .auth__marca { display: none; }
  .auth__logo-mobile { display: block; }
  :root[data-tema="escuro"] .auth__logo-mobile--claro { display: none; }
  :root:not([data-tema="escuro"]) .auth__logo-mobile--escuro { display: none; }

  .menu { transform: translateX(-100%); transition: transform var(--transicao); }
  .menu--aberto { transform: none; box-shadow: var(--sombra); }
  .topo-mobile {
    position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between;
    padding: 10px 16px; background: var(--menu-fundo);
  }
  .topo-mobile img { width: 120px; }
  .topo-mobile button { color: #fff; background: transparent; border: 0; font-size: 1.4rem; cursor: pointer; }
  .conteudo { margin-left: 0; padding: 20px 16px 48px; }
  .vista__tela { min-height: 0; }
  .vista__dica { display: none; }
  .entradas, .grade-2, .grade-3 { grid-template-columns: 1fr; }
  .cabecalho h1, .nome-peca { font-size: 1.3rem; }
}

/* Usinagens especiais: os dois desenhos de perfil (ferramenta e peça). */
.perfil { width: 100%; height: 100%; display: block; }
.perfil__peca { fill: var(--peca); stroke: var(--peca-borda); stroke-width: 1.4; }
.perfil__aco { fill: var(--realce); stroke: var(--azul); stroke-width: 1.4; }
.perfil__eixo { stroke: var(--texto-suave); stroke-width: 0.8; stroke-dasharray: 5 4; }
.perfil__cota { fill: var(--texto-suave); font-size: 11px; }
.perfil__vazio { display: grid; place-items: center; height: 100%; color: var(--texto-suave);
  font-size: 0.85rem; text-align: center; padding: 20px; }

.vista__tela--3d > .vista__dica:not(.vista3d__dica) { display: none; }
.svg-desenho { stroke: var(--texto); stroke-width: 1; stroke-dasharray: 4 3; opacity: 0.7; pointer-events: none; }
.svg-inicio { fill: var(--topo); stroke: var(--superficie); stroke-width: 1; vector-effect: non-scaling-stroke; pointer-events: none; }
.dialogo__lateral .vista__tela { min-height: 0; }
.dialogo__lateral .vista__tela svg { max-height: 260px; }
.dialogo__lateral .vista__barra .dica { font-size: 0.78rem; }
dialog:has(#dialogo-lateral:not([hidden])) { width: min(860px, calc(100vw - 32px)); }

/* Ajuda e problemas */
.menu__icone--ajuda    { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.5 9.5a2.5 2.5 0 1 1 3.5 2.3c-.6.3-1 .9-1 1.6V14M12 17.5v.01'/%3E%3C/svg%3E"); }
.ajuda__busca { max-width: 560px; }
.ajuda__lista { display: grid; gap: 8px; }
.ajuda__item { border: 1px solid var(--borda); border-radius: var(--r-sm); background: var(--superficie); }
.ajuda__item > summary { cursor: pointer; padding: 12px 14px; display: grid; gap: 4px; list-style: none; }
.ajuda__item > summary::-webkit-details-marker { display: none; }
.ajuda__item > summary strong::before { content: "▸ "; color: var(--texto-suave); }
.ajuda__item[open] > summary strong::before { content: "▾ "; }
.ajuda__mensagem { font-family: var(--mono); font-size: 0.8rem; color: var(--erro); }
.ajuda__corpo { padding: 0 14px 14px; display: grid; gap: 8px; font-size: 0.9rem; }
.ajuda__corpo ul { margin: 4px 0 0 18px; }
.ajuda__grupo { margin-top: 14px; }
.ajuda__grupo h3 { font-size: 0.95rem; margin-bottom: 6px; }
.ajuda__param { display: grid; grid-template-columns: 56px 1fr auto; gap: 10px; align-items: start; padding: 8px 0; border-top: 1px solid var(--borda); }
.ajuda__valor { font-family: var(--mono); font-size: 0.85rem; color: var(--texto-suave); white-space: nowrap; }

/* Painel da usinagem na lista: tudo numa linha, letra e campo pequenos. */
.usinagem__painel { font-size: 0.74rem; }
.usinagem__linha { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.usinagem__painel .mini { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; white-space: nowrap; }
.usinagem__painel .mini input, .usinagem__painel .mini select {
  height: 24px; padding: 0 6px; font-size: 0.74rem; width: 5.5em;
}
.usinagem__painel .mini select { width: auto; max-width: 11em; }
.usinagem__painel .mini input.mini__curto { width: 2.6em; text-align: center; padding: 0 2px; }
.usinagem__painel .mini-marcar { font-size: 0.74rem; gap: 5px; }
.usinagem__painel input[type="checkbox"] { width: 14px; height: 14px; }
.usinagem__pontos .mini input:not(.mini__curto) { width: 16em; }
.usinagem__pontos { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.usinagem__pontos textarea { font-size: 0.74rem; min-height: 56px; }
.usinagem__pontos .campo { flex: 1 1 100%; }
.usinagem__pontos .campo:has(.mini) { flex: 0 0 auto; }
.usinagem__contagem { font-weight: 400; color: var(--texto-suave); font-size: 0.8rem; }
.usinagem__painel .mini select { max-width: none; }
.usinagem__pontos .campo > label, .usinagem__pontos .rotulo { font-size: 0.74rem; }
.usinagem__pontos .mini { flex: 1 1 100%; }
.usinagem__pontos .mini input:not(.mini__curto) { width: auto; flex: 1; min-width: 0; }
.usinagem__pontos .campo:has(.mini) { flex: 1 1 100%; }
.usinagem__seta { font-size: 1rem; }
.usinagem__linha { gap: 6px 10px; }
.usinagem__painel .mini { gap: 4px; }
.usinagem__painel .mini select { font-size: 0.7rem; padding: 0 2px; }

/* Nova usinagem: abre no próprio cartão e a prévia vira superfície de desenho. */
.rascunho { margin-top: 14px; padding: 12px; border: 1px solid var(--azul); border-radius: var(--r-sm); background: var(--superficie-2); }
.rascunho__topo { display: flex; justify-content: space-between; gap: 10px; align-items: start; margin-bottom: 8px; }
.rascunho__topo .dica { margin: 2px 0 0; }
.rascunho__rodape { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.rascunho .usinagem__painel { border-top: 0; padding-top: 0; }
.vista__tela--desenho svg { cursor: crosshair; }
.vista__tela--desenho { outline: 2px solid var(--azul); outline-offset: -2px; }
.vista__coord { position: absolute; left: 10px; bottom: 8px; padding: 2px 8px; font: 0.75rem var(--mono); color: var(--texto); background: var(--superficie); border: 1px solid var(--borda); border-radius: 6px; pointer-events: none; }
.svg-marcas__ponto { fill: var(--azul); stroke: #fff; stroke-width: 1; vector-effect: non-scaling-stroke; }
.svg-marcas__linha { stroke: var(--azul); stroke-width: 1.5; stroke-dasharray: 4 3; }
.svg-marcas__num { fill: var(--azul); font-weight: 700; stroke: none; }

/* Vista lateral: a faixa de botões G55–G58 fica em cima, fora do desenho, e o SVG
   ocupa o resto da tela — assim ao arrastar nada some antes da borda do quadro. */
.vista__tela--lateral { display: flex; flex-direction: column; }
.vista__tela--lateral .vista3d__faces { position: static; order: -1; padding: 10px; }
.vista__tela--lateral svg { flex: 1 1 auto; height: 100%; min-height: 320px; max-height: none; }
.vista__tela svg { user-select: none; -webkit-user-select: none; }

/* Seleção: caixinha na lista, realce na prévia, barra de mover/copiar/espelhar. */
.usinagem--sel { border-color: var(--azul); background: color-mix(in srgb, var(--azul) 8%, var(--superficie-2)); }
.usinagem__sel { width: 16px; height: 16px; margin: 5px 0 0; accent-color: var(--azul); }
.lista-usinagens > .usinagem { grid-template-columns: 18px 26px minmax(0, 1fr) auto; }
.svg-u--sel > * { stroke-dasharray: 7 4; filter: drop-shadow(0 0 2px var(--azul-claro)); }
.svg-u--sel { outline: none; }
.vista__selecao { position: absolute; border: 1px dashed var(--azul); background: color-mix(in srgb, var(--azul) 12%, transparent); pointer-events: none; z-index: 3; }
.barra-selecao { display: grid; gap: 8px; margin-bottom: 10px; padding: 10px 12px; border: 1px solid var(--azul); border-radius: var(--r-sm); background: var(--superficie-2); font-size: 0.8rem; }
.barra-selecao__topo { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.barra-selecao__acoes { display: inline-flex; gap: 6px; }
.barra-selecao__linha { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.barra-selecao__rotulo { min-width: 6.5em; font-weight: 700; }
.barra-selecao label { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.barra-selecao input { width: 5em; height: 26px; padding: 0 6px; font-size: 0.8rem; }
.barra-selecao input.mini__curto { width: 3em; text-align: center; }
.cartao__titulo .botao { align-self: start; }

/* Tabela de pontos do caminho. */
.pontos { display: grid; gap: 6px; }
.pontos__topo { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pontos__tabela { max-height: 240px; overflow: auto; border: 1px solid var(--borda); border-radius: var(--r-sm); background: var(--superficie); padding: 4px; }
.pontos__tabela table { width: 100%; border-collapse: collapse; font-size: 0.72rem; }
.pontos__tabela th { text-align: left; font-weight: 600; color: var(--texto-suave); padding: 2px 3px; position: sticky; top: 0; background: var(--superficie); }
.pontos__tabela td { padding: 1px 2px; }
.pontos__tabela input, .pontos__tabela select { width: 100%; height: 22px; padding: 0 3px; font-size: 0.72rem; min-width: 0; }
.pontos__tabela input[data-ponto="x"], .pontos__tabela input[data-ponto="y"] { min-width: 4.2em; }
.pontos__tabela input[data-ponto="z"], .pontos__tabela input[data-ponto="raio"] { min-width: 2.6em; }
.pontos__n { color: var(--texto-suave); text-align: right; padding-right: 4px; }
.pontos__tabela .botao-mini { width: 22px; height: 22px; font-size: 0.7rem; }
.pontos__tabela > .botao { margin-top: 4px; }
.rascunho__trecho { margin-bottom: 8px; display: inline-flex; align-items: center; gap: 8px; }
.rascunho__trecho-rotulo { font-size: 0.78rem; font-weight: 600; padding-left: 8px; }
.barra-selecao[hidden], .rascunho__trecho[hidden], .pontos__tabela[hidden] { display: none; }

/* Cabeçalho da peça (Voltar, Refazer, Gerar…) e barra de seleção ficam à vista
   enquanto se rola a página, para não precisar subir e descer a toda hora. */
@media (min-width: 1181px) {
  .cabecalho { position: sticky; top: 0; z-index: 30; background: var(--fundo); padding: 10px 0; margin-bottom: 14px; }
  .barra-selecao { position: sticky; top: calc(var(--altura-cabecalho, 90px) + 6px); z-index: 25; max-height: calc(100vh - var(--altura-cabecalho, 90px) - 24px); overflow: auto; box-shadow: var(--sombra); }
  .editor__vista { top: calc(var(--altura-cabecalho, 90px) + 10px); }
  #rascunho { scroll-margin-top: calc(var(--altura-cabecalho, 90px) + 12px); }
}
/* Barra de seleção mais baixa: cabe sem cobrir a coluna inteira. */
.barra-selecao { gap: 5px; padding: 8px 10px; }
.barra-selecao__linha { gap: 4px 8px; }
.barra-selecao__rotulo { min-width: 0; flex: 0 0 9.5em; }
.barra-selecao input { width: 4.2em; }
.barra-selecao .botao--compacto { padding: 4px 10px; font-size: 0.78rem; }

/* Mover e Copiar na mesma grade: o botão de cada um cai na mesma coluna,
   um embaixo do outro, ao lado do último campo (mm / cópias). */
.barra-selecao__linha--grade { display: grid; grid-template-columns: 4.5em 6em 6em 7.6em auto; justify-content: start; align-items: center; gap: 4px 10px; }
.barra-selecao__linha--grade .barra-selecao__rotulo { flex: none; }
.barra-selecao__linha--grade .dica { margin: 0; min-width: 4.8em; }
.barra-selecao__linha--grade .botao { justify-self: start; min-width: 4.8em; }
/* Caixa da seleção e alça de escala (arrastar o quadradinho amplia/diminui). */
.svg-selecao__caixa { fill: none; stroke: var(--azul); stroke-width: 1; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; pointer-events: none; }
.svg-alca { fill: var(--azul); stroke: #fff; stroke-width: 1.5; vector-effect: non-scaling-stroke; cursor: nwse-resize; }
.svg-alca:hover { fill: var(--azul-claro); }
.barra-selecao__linha--grade .dica--dupla { grid-column: span 2; }

/* Ícones do menu: "Usinagens especiais" não tinha; "Guia de usinagens" vira um livro aberto. */
.menu__icone--especiais { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 2.6 5.6 6.1.7-4.5 4.2 1.2 6L12 16.6 6.6 19.5l1.2-6L3.3 9.3l6.1-.7z'/%3E%3C/svg%3E"); }
.menu__icone--usinagens { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6c-2-1.6-5-2-8-2v14c3 0 6 .4 8 2 2-1.6 5-2 8-2V4c-3 0-6 .4-8 2zM12 6v14'/%3E%3C/svg%3E"); }

/* Escolha de usinagem especial dentro do cartão "Adicionar usinagem". */
.especiais-lista { display: grid; gap: 8px; margin-top: 8px; }
.especial { display: grid; gap: 2px; padding: 10px 12px; text-decoration: none; color: var(--texto); border: 1px solid var(--borda-forte); border-radius: var(--r-sm); background: var(--superficie); cursor: pointer; text-align: left; font: inherit; }
.especial:hover { border-color: var(--azul); }
.especial span { font-size: 0.8rem; color: var(--texto-suave); }
.tipo--especial { border-style: dashed; }
/* Faixa em /especiais quando se está montando uma usinagem para uma peça. */
.destino { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; padding: 12px 16px; border: 1px solid var(--azul); border-radius: var(--r-sm); background: color-mix(in srgb, var(--azul) 8%, var(--superficie)); }
.destino[hidden] { display: none; }
.destino p { margin: 0; }

/* Campo a corrigir: em vermelho (rótulo, borda e fundo). */
.campo--erro > label, .campo--erro > .rotulo, .campo--erro.mini > span, .campo--erro.marcar { color: var(--erro); }
.campo--erro input, .campo--erro select, .campo--erro textarea,
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: var(--erro) !important; background: var(--erro-fundo) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--erro) 28%, transparent);
}
.campo--erro > label::before { content: "⚠ "; }

/* Texto em usinagem. */
.texto__fonte { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.texto__fonte select { flex: 1 1 14em; min-width: 0; height: auto; min-height: 36px; padding: 6px 28px 6px 10px; font-size: 0.9rem; text-overflow: ellipsis; }
#t-texto { width: 100%; min-height: 52px; font-size: 0.85rem; font-family: inherit; }
.usinagem__painel .mini--longo input { width: 12em; }
#texto-campos .campo--largo { grid-column: auto; margin-bottom: 8px; }
#texto-campos .usinagem__linha { margin-bottom: 8px; }
#texto-info { margin-top: 6px; }
#texto-painel[hidden] { display: none; }

/* Girar a peça. */
.girar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 12px; }
.girar__rotulo { font-size: 0.8rem; font-weight: 700; margin-right: 4px; }
.girar__dica { margin-top: 6px; font-size: 0.76rem; }

/* "A peça" compacta: título e botões de girar na mesma linha, para o cartão
   "Adicionar usinagem" aparecer sem rolar a página. */
.cartao--peca { padding-top: 12px; padding-bottom: 14px; }
.cartao--peca .cartao__titulo { margin-bottom: 8px; flex-wrap: nowrap; }
.cartao--peca .girar { margin: 0; gap: 4px; flex-wrap: nowrap; }
.cartao--peca .girar .botao { padding: 4px 8px; font-size: 0.78rem; white-space: nowrap; }
.cartao--peca .campo { gap: 3px; }
.cartao--peca .campo label { font-size: 0.78rem; }
.cartao--peca .campo input { height: 32px; padding: 0 10px; }
.cartao--peca #avisos-painel { margin-top: 8px !important; }

/* Barra de seleção mais limpa: rótulos discretos, botões X / Y / XY curtos. */
.barra-selecao { gap: 4px; }
.barra-selecao__rotulo { font-weight: 600; font-size: 0.76rem; color: var(--texto-suave); flex: 0 0 8.6em; }
.barra-selecao__linha--grade .barra-selecao__rotulo { flex: none; }
.barra-selecao__linha:not(.barra-selecao__linha--grade) .botao { min-width: 2.6em; padding: 3px 8px; }
.barra-selecao__setas { display: inline-flex; gap: 4px; grid-column: span 2; }
.barra-selecao__setas .botao { min-width: 2.4em; padding: 3px 8px; }
.barra-selecao .mini-marcar { margin-right: 14px; }
.barra-selecao input[type="checkbox"] { width: 15px; height: 15px; }
.barra-selecao .mini-marcar { font-size: 0.8rem; gap: 6px; font-weight: 600; }

/* Celular: botão que faz o papel do Ctrl/Shift na prévia */
.vista__varios { display: none; position: absolute; bottom: 8px; right: 8px; z-index: 2; font: inherit; font-size: 0.8rem; padding: 8px 12px; min-height: 36px; border-radius: 8px; border: 1px solid var(--borda-forte); background: color-mix(in srgb, var(--superficie) 92%, transparent); color: var(--texto); cursor: pointer; }
.vista__varios[aria-pressed="true"] { background: var(--azul); border-color: var(--azul); color: #fff; }
.vista__tela--3d > .vista__varios { display: none; }

/* Celular: tabela larga rola de lado dentro do cartão em vez de cortar ou
   alargar a página. */
@media (max-width: 920px) {
  .tabela { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tabela th, .tabela td { white-space: nowrap; padding-left: 8px; padding-right: 8px; }
  .tabela td.dica { white-space: normal; min-width: 14em; }
}
@media (max-width: 920px), (pointer: coarse) { .vista__varios { display: block; } }
.vista__varios.vista__varios--toque { display: block; }
.vista__tela--3d > .vista__varios.vista__varios--toque { display: none; }

/* Toque: o iOS dá zoom na página ao focar campo com letra menor que 16px; e
   alvo de toque precisa de altura mínima. */
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea { font-size: 16px !important; }
  .botao, button { min-height: 36px; }
}

/* ---------- Plano de corte ---------- */
:root {
  --c-corte: #1f6fe0;
  --c-sobra: #1fa35a;
  --c-refugo: #8a94a8;
  --c-refilo: #e08a1e;
  --c-ordem: #7c3aed;
  --c-veio: #0f766e;
  --c-cota: #5b6880;
  --c-conflito: #c22e2e;
}
:root[data-tema="escuro"] {
  --c-corte: #5aa2ff;
  --c-sobra: #3ecf84;
  --c-refugo: #7c88a3;
  --c-refilo: #f0a244;
  --c-ordem: #a78bfa;
  --c-veio: #2dd4bf;
  --c-cota: #a6b4d0;
  --c-conflito: #ff8080;
}
.menu__icone--corte { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M3 12h18M12 3v9M8 12v9'/%3E%3C/svg%3E"); }
.menu__icone--projeto { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 9 5v8l-9 5-9-5V8z'/%3E%3Cpath d='m3 8 9 5 9-5M12 13v8'/%3E%3C/svg%3E"); }
.corte__tipo { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.corte__pecas input { height: 34px; min-width: 70px; }
.corte__pecas td:first-child input { min-width: 150px; }
.corte__numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.numero { background: var(--superficie-2); border: 1px solid var(--borda); border-radius: var(--r-md); padding: 10px 14px; }
.numero strong { display: block; font-size: 1.3rem; letter-spacing: -0.02em; }
.numero span { font-size: 0.78rem; color: var(--texto-suave); }
.corte__abas { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.corte__abas button { border: 1px solid var(--borda-forte); background: transparent; color: var(--texto); border-radius: 999px; padding: 5px 14px; cursor: pointer; font: inherit; font-size: 0.86rem; }
.corte__abas button[aria-selected="true"] { background: var(--azul); border-color: var(--azul); color: #fff; }
.corte__palco { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 16px; align-items: start; }
.corte__desenho { background: var(--superficie-2); border: 1px solid var(--borda); border-radius: var(--r-md); padding: 10px; }
#svg { width: 100%; height: auto; max-height: 72vh; display: block; touch-action: none; user-select: none; }
#svg .p { cursor: grab; }
#svg .p rect.corpo { fill: var(--peca); stroke: var(--peca-borda); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
:root[data-tema="escuro"] #svg .p rect.corpo { fill: #4a4030; }
#svg .p.sel rect.corpo { stroke: var(--azul); stroke-width: 3; }
#svg .p.conflito rect.corpo { fill: color-mix(in srgb, var(--c-conflito) 30%, var(--peca)); stroke: var(--c-conflito); stroke-width: 3; }
#svg .p.arrastando { cursor: grabbing; opacity: 0.85; }
#svg .nome { fill: var(--texto); font-family: var(--fonte); text-anchor: middle; pointer-events: none; }
#svg .cota { fill: var(--c-cota); font-family: var(--mono); text-anchor: middle; cursor: pointer; }
#svg .cota:hover { fill: var(--azul); font-weight: 700; }
#svg .chapa { fill: var(--superficie); stroke: var(--borda-forte); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
#svg .refilo { fill: var(--c-refilo); opacity: 0.28; }
#svg .sobra-boa { fill: var(--c-sobra); opacity: 0.32; stroke: var(--c-sobra); stroke-width: 1; vector-effect: non-scaling-stroke; }
#svg .sobra-ruim { fill: var(--c-refugo); opacity: 0.2; }
#svg .corte-linha { stroke: var(--c-corte); stroke-width: 2.5; stroke-dasharray: 10 5; vector-effect: non-scaling-stroke; }
#svg .refilo-linha { stroke: var(--c-refilo); stroke-width: 1.5; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
#svg .contorno-router { fill: none; stroke: var(--c-corte); stroke-width: 2.5; vector-effect: non-scaling-stroke; pointer-events: none; }
#svg .ordem-bolha { fill: var(--c-ordem); }
#svg .ordem-texto { fill: #fff; font-family: var(--fonte); font-weight: 700; text-anchor: middle; dominant-baseline: central; }
#svg .veio { stroke: var(--c-veio); stroke-width: 1.8; fill: none; vector-effect: non-scaling-stroke; marker-end: url(#seta); }
#svg .sobra-texto { fill: var(--c-sobra); font-family: var(--mono); text-anchor: middle; }
#svg.sem-pecas .p { display: none; }
#svg.sem-cortes .corte-linha, #svg.sem-cortes .contorno-router, #svg.sem-cortes .refilo-linha { display: none; }
#svg.sem-sobras .sobra-boa, #svg.sem-sobras .sobra-ruim, #svg.sem-sobras .sobra-texto { display: none; }
#svg.sem-refilo .refilo { display: none; }
#svg.sem-cotas .cota { display: none; }
#svg.sem-ordem .ordem-bolha, #svg.sem-ordem .ordem-texto { display: none; }
#svg.sem-veio .veio { display: none; }
#svg.sem-nomes .nome { display: none; }
.corte__legenda { display: grid; gap: 6px; margin-bottom: 14px; }
.corte__legenda label { display: flex; align-items: center; gap: 8px; font-size: 0.86rem; cursor: pointer; }
.corte__legenda i { width: 22px; height: 12px; border-radius: 3px; flex: none; border: 2px solid transparent; }
.corte__editor { border: 1px solid var(--borda); border-radius: var(--r-md); padding: 12px; display: grid; gap: 10px; background: var(--superficie); }
.corte__editor .campo input, .corte__editor .campo select { height: 34px; }
.corte__editor__grade { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 960px) { .corte__palco { grid-template-columns: 1fr; } }
@media print {
  .menu, .topo-mobile, .cabecalho__acoes, .cartao:not(#resultado), .corte__lateral, .corte__abas, .cabecalho { display: none !important; }
  .conteudo { margin: 0 !important; padding: 0 !important; }
  #svg { max-height: none; }
}

/* ----- Projeto completo (vista 3D + lista de peças) ----- */
.projeto__area { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; align-items: start; }
.projeto__3d { position: relative; height: min(70vh, 540px); min-height: 320px; border: 1px solid var(--borda); border-radius: var(--r-md); background: var(--superficie-2); touch-action: none; cursor: grab; overflow: hidden; }
.projeto__3d canvas { display: block; width: 100% !important; height: 100% !important; }
.projeto__3d-aviso { position: absolute; left: 10px; bottom: 8px; font-size: 0.74rem; color: var(--texto-suave); pointer-events: none; }
.projeto__controle { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 10px; font-size: 0.88rem; }
.projeto__marcar { display: inline-flex; align-items: center; gap: 6px; }
.projeto__tabela { max-height: min(60vh, 460px); overflow: auto; }
.projeto__tabela tr[data-id] { cursor: pointer; }
.projeto__tabela tr.projeto__linha--ativa td { background: var(--realce); }
.projeto__tabela tr.projeto__linha--fora { opacity: 0.55; }
.projeto__tabela select { padding: 4px 6px; font-size: 0.85rem; }
.projeto__ajustes { margin-top: 16px; }
.projeto__ajustes summary { cursor: pointer; font-weight: 600; }
.projeto__ajustes .grade-3 { margin-top: 12px; }
@media (max-width: 900px) { .projeto__area { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   Menu agrupado e painel inicial (23/10/2026)
   ========================================================================== */
.menu__logo { padding-bottom: 18px; }
.menu__grupo { padding: 14px 12px 4px; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(200, 210, 232, 0.55); }
.menu__item--sub { padding-left: 18px; font-size: 0.9rem; }
.menu__empresa { display: block; font-size: 0.76rem; color: rgba(200, 210, 232, 0.55); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu__empresa:empty { display: none; }
.menu__icone--equipe { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.2'/%3E%3Cpath d='M3 20c0-3.3 2.7-5 6-5s6 1.7 6 5'/%3E%3Cpath d='M16 5.2a3.2 3.2 0 0 1 0 5.6M18 15c2 .6 3 2.2 3 5'/%3E%3C/svg%3E"); }

.atalhos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 22px; }
.atalhos .entrada { grid-template-columns: auto 1fr; padding: 18px; gap: 14px; align-items: center; }
.atalhos .entrada h2 { font-size: 1rem; }
.atalhos .entrada p { font-size: 0.84rem; }
.atalho--destaque { border-color: var(--azul); background: color-mix(in srgb, var(--azul) 7%, var(--superficie)); }
.atalho--destaque[hidden] { display: none; }
.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 22px; }
.numero { padding: 16px 18px; border: 1px solid var(--borda); border-radius: var(--r-md); background: var(--superficie); text-decoration: none; color: var(--texto); }
.numero strong { display: block; font-size: 1.7rem; letter-spacing: -0.02em; line-height: 1.1; }
.numero span { color: var(--texto-suave); font-size: 0.84rem; }
a.numero:hover { border-color: var(--azul); }

.menu__linha { border: 0; border-top: 1px solid rgba(255, 255, 255, 0.14); margin: 10px 12px; }