/* =============================================================================
   Super CNC - interface
   Tokens primeiro (tema claro e escuro); componentes depois. A cor da marca vem
   de marca/marca.json em tempo de execucao (--marca-principal / --marca-destaque).
   ========================================================================== */

:root {
  color-scheme: light;
  --marca-principal: #f13e01;
  --marca-destaque: #f13e01;

  --fundo: #f3f4f6;
  --superficie: #ffffff;
  --superficie-2: #f7f8fa;
  --superficie-3: #eef0f3;
  --borda: #e2e5ea;
  --borda-forte: #cdd3db;
  --texto: #15181d;
  --texto-suave: #5d6877;
  --texto-fraco: #8b95a3;

  /* Acento (laranja da marca): texto quase preto em cima dele da 5,4:1 de contraste; branco
     daria so 3,9:1 e reprovaria no AA para texto normal. */
  --acento: var(--marca-destaque);
  --acento-texto: #2b0d02;
  --acento-forte: #b82f01;
  --acento-fundo: #fff1ec;
  --acento-borda: #ffc9b5;
  /* Superficie escura. NAO vem da marca: a do Super CNC e uma cor so, e laranja nao serve de
     fundo. Antes isto era o grafite da marca antiga, e amarrar as duas pintou de laranja todo
     fundo escuro do app quando a marca mudou. */
  --escuro: #241f1d;

  --cota: #2563eb;
  --ok: #12804d;
  --ok-fundo: #e8f6ee;
  --ok-borda: #bfe5cf;
  --alerta: #a35f00;
  --alerta-fundo: #fff5e3;
  --alerta-borda: #f2d8a6;
  --erro: #c0262d;
  --erro-fundo: #fdecec;
  --erro-borda: #f3c3c5;
  --info: #3b5bdb;

  --raio-sm: 8px;
  --raio: 12px;
  --raio-lg: 16px;
  --sombra-sm: 0 1px 2px rgba(15, 20, 30, 0.06);
  --sombra: 0 1px 2px rgba(15, 20, 30, 0.05), 0 6px 18px rgba(15, 20, 30, 0.06);
  --sombra-lg: 0 12px 40px rgba(15, 20, 30, 0.18);
  --foco: 0 0 0 3px rgba(172, 201, 85, 0.45);
  --transicao: 140ms ease;

  --fonte: 'Segoe UI Variable Text', 'Segoe UI', Inter, system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --fonte-titulo: 'Segoe UI Variable Display', 'Segoe UI', Inter, system-ui, -apple-system, sans-serif;
  --fonte-mono: 'Cascadia Mono', Consolas, 'SFMono-Regular', Menlo, monospace;
}

[data-tema='escuro'] {
  color-scheme: dark;
  --fundo: #0d1015;
  --superficie: #151920;
  --superficie-2: #1a1f27;
  --superficie-3: #222833;
  --borda: #262d38;
  --borda-forte: #353e4c;
  --texto: #e8ecf2;
  --texto-suave: #9aa5b4;
  --texto-fraco: #6f7a89;
  --acento-forte: #ff8e63;
  --acento-fundo: #2b1309;
  --acento-borda: #5a2510;
  --cota: #7ea6ff;
  --ok: #45c98c;
  --ok-fundo: #11261c;
  --ok-borda: #1f4a35;
  --alerta: #f1b660;
  --alerta-fundo: #2b2112;
  --alerta-borda: #4d3a1a;
  --erro: #ff7d82;
  --erro-fundo: #2c1517;
  --erro-borda: #542428;
  --info: #8aa4ff;
  --sombra-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sombra: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.25);
  --sombra-lg: 0 16px 48px rgba(0, 0, 0, 0.55);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Links na cor da marca. Usa --acento-forte, nao --acento: o laranja puro da 3,9:1 no branco
   e reprovaria no AA para texto normal; o forte da 6,2:1. */
a {
  color: var(--acento-forte);
  text-underline-offset: 2px;
}

a:hover {
  color: var(--acento);
}

/* O atributo hidden precisa vencer regras de display das classes. */
[hidden] {
  display: none !important;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 14px/1.45 var(--fonte);
  -webkit-font-smoothing: antialiased;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: none;
  box-shadow: var(--foco);
}

.icone {
  width: 18px;
  height: 18px;
  flex: none;
}

code,
.mono {
  font-family: var(--fonte-mono);
  font-size: 0.92em;
}

/* ===================================================================== layout */

body.app {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100vh;
  overflow: hidden;
}

.corpo {
  display: grid;
  grid-template-columns: 232px 340px minmax(0, 1fr) 320px;
  gap: 12px;
  padding: 12px;
  min-height: 0;
}

@media (max-width: 1600px) {
  .corpo {
    grid-template-columns: 208px 320px minmax(0, 1fr) 296px;
  }
}

@media (max-width: 1380px) {
  .corpo {
    grid-template-columns: 76px 320px minmax(0, 1fr) 290px;
  }
  .trilho .produto-texto,
  .trilho .grupo,
  .trilho .em-breve,
  .trilho .trilho-rodape .campo-inline,
  .trilho .trilho-rodape .nota {
    display: none;
  }
  .trilho .trilho-rodape .botao {
    justify-content: center;
    font-size: 0;
    padding: 9px;
  }
  .trilho .trilho-rodape .botao .tag {
    font-size: 9px;
  }
  .trilho .produto {
    justify-content: center;
    padding: 10px 0;
  }
}

@media (max-width: 1100px) {
  body.app {
    height: auto;
    overflow: visible;
  }
  .corpo {
    grid-template-columns: 1fr;
  }
  .trilho .produtos {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }
  .coluna-visual {
    min-height: 720px;
  }
}

/* ================================================================ barra topo */

.barra-topo {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 16px;
  background: var(--superficie);
  border-bottom: 1px solid var(--borda);
  box-shadow: var(--sombra-sm);
  position: relative;
  z-index: 20;
}

.marca {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-right: 16px;
  border-right: 1px solid var(--borda);
  min-width: 0;
}

.marca-logo {
  display: block;
  height: 22px;
  width: auto;
}

.marca-logo.escuro,
[data-tema='escuro'] .marca-logo.claro {
  display: none;
}

[data-tema='escuro'] .marca-logo.escuro {
  display: block;
}

.marca-texto {
  font-size: 15px;
  white-space: nowrap;
}

.marca-complemento {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-suave);
  white-space: nowrap;
}

.topo-projeto {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.projeto-atual {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}

.projeto-atual strong {
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.estado-salvo {
  font-size: 11.5px;
  color: var(--texto-suave);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.estado-salvo::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--texto-fraco);
}

.estado-salvo.sujo {
  color: var(--alerta);
}

.estado-salvo.sujo::before {
  background: var(--alerta);
}

.estado-salvo.ok {
  color: var(--ok);
}

.estado-salvo.ok::before {
  background: var(--ok);
}

.topo-acoes {
  display: flex;
  align-items: center;
  gap: 8px;
}

.grupo-icones {
  display: flex;
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  overflow: hidden;
}

.grupo-icones .botao-icone {
  border: 0;
  border-radius: 0;
}

.grupo-icones .botao-icone + .botao-icone {
  border-left: 1px solid var(--borda);
}

/* ================================================================== botoes */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border-radius: var(--raio-sm);
  border: 1px solid var(--borda-forte);
  background: var(--superficie);
  color: var(--texto);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background var(--transicao),
    border-color var(--transicao),
    box-shadow var(--transicao),
    transform var(--transicao);
}

.botao .icone {
  width: 17px;
  height: 17px;
}

.botao:hover:not(:disabled) {
  background: var(--superficie-2);
  border-color: var(--texto-fraco);
}

.botao:active:not(:disabled) {
  transform: translateY(1px);
}

/* Acao principal: verde da marca com texto escuro. Uma por area. */
.botao.primario {
  background: var(--acento);
  border-color: var(--acento);
  color: var(--acento-texto);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06), 0 4px 12px rgba(241, 62, 1, 0.3);
}

.botao.primario:hover:not(:disabled) {
  background: #d63701;
  border-color: #d63701;
}

/* Acao importante mas nao principal: contorno em verde. */
.botao.destaque {
  background: var(--acento-fundo);
  border-color: var(--acento-borda);
  color: var(--acento-forte);
}

[data-tema='escuro'] .botao.destaque {
  color: var(--acento);
}

.botao.destaque:hover:not(:disabled) {
  background: var(--acento-fundo);
  border-color: var(--acento);
}

.botao.secundario {
  background: var(--superficie);
  border-color: var(--borda-forte);
}

.botao.fantasma {
  background: transparent;
  border-color: transparent;
  color: var(--texto-suave);
}

.botao.fantasma:hover:not(:disabled) {
  background: var(--superficie-3);
  border-color: transparent;
  color: var(--texto);
}

.botao.perigo {
  color: var(--erro);
  border-color: var(--erro-borda);
}

.botao.grande {
  height: 44px;
  padding: 0 20px;
  font-size: 14px;
  border-radius: 10px;
}

.botao.grande .icone {
  width: 19px;
  height: 19px;
}

.botao.pequeno {
  height: 30px;
  padding: 0 10px;
  font-size: 12px;
}

.botao.largo {
  width: 100%;
  justify-content: flex-start;
}

.botao:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

.botao-icone {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--raio-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--texto-suave);
  cursor: pointer;
  transition: background var(--transicao), color var(--transicao);
}

.botao-icone:hover:not(:disabled) {
  background: var(--superficie-3);
  color: var(--texto);
}

.botao-icone:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.contador {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--escuro);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

.mini {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 9px;
  border: 1px solid var(--borda);
  background: var(--superficie);
  color: var(--texto-suave);
  border-radius: 7px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}

.mini .icone {
  width: 14px;
  height: 14px;
}

.mini:hover {
  background: var(--superficie-2);
  color: var(--texto);
}

.mini.ligado {
  background: var(--acento-fundo);
  border-color: var(--acento-borda);
  color: var(--acento-forte);
}

select.mini {
  padding-right: 22px;
}

.deslizante {
  cursor: default;
}

.deslizante input {
  width: 78px;
  accent-color: var(--acento-forte);
}

/* ============================================================ menu do usuario */

.menu-usuario {
  position: relative;
  margin-left: 4px;
}

.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--acento);
  background: var(--escuro);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}

.menu-suspenso {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 240px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra-lg);
  padding: 6px;
  display: grid;
  gap: 2px;
}

.menu-cabecalho {
  display: grid;
  padding: 8px 10px 10px;
  border-bottom: 1px solid var(--borda);
  margin-bottom: 4px;
}

.menu-cabecalho span {
  font-size: 12px;
  color: var(--texto-suave);
}

.menu-suspenso > button,
.menu-alternador {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  text-align: left;
  font-size: 13px;
  cursor: pointer;
}

.menu-alternador {
  justify-content: space-between;
}

.menu-alternador span {
  display: flex;
  align-items: center;
  gap: 10px;
}

.menu-suspenso > button:hover,
.menu-alternador:hover {
  background: var(--superficie-3);
}

.interruptor {
  appearance: none;
  width: 34px;
  height: 20px;
  border-radius: 999px;
  background: var(--borda-forte);
  position: relative;
  cursor: pointer;
  transition: background var(--transicao);
}

.interruptor::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform var(--transicao);
}

.interruptor:checked {
  background: var(--acento-forte);
}

.interruptor:checked::after {
  transform: translateX(14px);
}

/* ============================================================ trilho produtos */

.trilho {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
  overflow-y: auto;
  padding-right: 2px;
}

.grupo {
  margin: 8px 8px 2px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-fraco);
}

.produtos {
  display: grid;
  gap: 6px;
}

.produto {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--superficie);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--transicao), box-shadow var(--transicao), background var(--transicao);
}

.produto:hover {
  border-color: var(--borda-forte);
  box-shadow: var(--sombra-sm);
}

.produto.ativo {
  border-color: var(--acento);
  background: var(--acento-fundo);
  box-shadow: 0 0 0 1px var(--acento) inset;
}

.produto-icone {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--superficie-3);
  color: var(--texto-suave);
  flex: none;
}

.produto-icone .icone {
  width: 22px;
  height: 22px;
}

.produto.ativo .produto-icone {
  background: var(--escuro);
  color: var(--acento);
}

.produto-texto {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.produto-texto strong {
  font-size: 13px;
  line-height: 1.2;
}

.tag {
  justify-self: start;
  font-style: normal;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--superficie-3);
  color: var(--texto-suave);
  border: 1px solid var(--borda);
}

.tag.novo {
  background: var(--escuro);
  border-color: var(--escuro);
  color: var(--acento);
}

.em-breve {
  list-style: none;
  margin: 0;
  padding: 0 4px;
  display: grid;
  gap: 2px;
}

.em-breve span {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px;
  font-size: 12.5px;
  color: var(--texto-fraco);
}

.em-breve .icone {
  width: 16px;
  height: 16px;
}

.trilho-rodape {
  margin-top: auto;
  display: grid;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--borda);
}

.trilho-rodape .botao .tag {
  margin-left: auto;
}

.campo-inline {
  display: grid;
  gap: 5px;
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--texto-suave);
}

.nota {
  margin: 0;
  font-size: 12px;
  color: var(--texto-suave);
}

.alternador {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 12.5px;
  color: var(--texto-suave);
  cursor: pointer;
}

/* ================================================================== editor */

.coluna-editor {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}

.cabecalho-produto {
  padding: 2px 4px 0;
}

.sobretitulo {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--acento-forte);
}

.cabecalho-produto h1 {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.cabecalho-produto #linha-projeto {
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.abas {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 2px;
  padding: 3px;
  background: var(--superficie-3);
  border-radius: 10px;
  flex: none;
}

.aba {
  display: grid;
  justify-items: center;
  gap: 1px;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 6px 2px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--texto-suave);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.aba .passo {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 10.5px;
  background: var(--borda);
  color: var(--texto-suave);
}

.aba:hover {
  color: var(--texto);
}

.aba.ativa {
  background: var(--superficie);
  color: var(--texto);
  box-shadow: var(--sombra-sm);
}

.aba.ativa .passo {
  background: var(--escuro);
  color: var(--acento);
}

.aba.com-erro .passo {
  background: var(--erro);
  color: #fff;
}

.painel-formulario {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 14px 14px 18px;
  box-shadow: var(--sombra-sm);
}

.secao-titulo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--texto-suave);
}

.secao-titulo::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--borda);
}

.painel-formulario > .secao-titulo:first-child {
  margin-top: 0;
}

.grade-campos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 10px;
}

.campo {
  display: grid;
  gap: 5px;
  align-content: start;
  min-width: 0;
}

.campo.largo {
  grid-column: 1 / -1;
}

.campo label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--texto-suave);
}

.dica {
  display: inline-grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid var(--borda-forte);
  color: var(--texto-fraco);
  font-size: 9.5px;
  cursor: help;
  flex: none;
}

input[type='text'],
input[type='password'],
input[type='number'],
select,
textarea {
  width: 100%;
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-sm);
  background: var(--superficie);
  color: var(--texto);
  font-size: 13.5px;
  transition: border-color var(--transicao), box-shadow var(--transicao);
}

input[type='text']:hover,
input[type='password']:hover,
select:hover,
textarea:hover {
  border-color: var(--texto-fraco);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--acento-forte);
  box-shadow: var(--foco);
}

.com-sufixo {
  position: relative;
}

.com-sufixo input {
  padding-right: 38px;
}

.com-sufixo .sufixo {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: var(--texto-fraco);
  pointer-events: none;
}

input.invalido,
.campo.com-erro input,
.campo.com-erro select {
  border-color: var(--erro);
  background: var(--erro-fundo);
}

.campo .erro-campo {
  font-size: 11.5px;
  color: var(--erro);
  line-height: 1.35;
}

.caixa-check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  background: var(--superficie-2);
  font-size: 13px;
  cursor: pointer;
}

.caixa-check input {
  width: 16px;
  height: 16px;
  accent-color: var(--acento-forte);
}

.efetivo {
  font-size: 11.5px;
  color: var(--cota);
}

.nota-campo {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 12px;
  color: var(--texto-suave);
  background: var(--superficie-2);
  border-left: 3px solid var(--borda-forte);
  padding: 7px 10px;
  border-radius: 0 var(--raio-sm) var(--raio-sm) 0;
}

.nota-campo.alerta {
  color: var(--alerta);
  background: var(--alerta-fundo);
  border-left-color: var(--alerta);
}

.passo-seguinte {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}

/* ============================================================ visual (2D/3D) */

.coluna-visual {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  min-height: 0;
  min-width: 0;
}

.coluna-visual[data-vista='2d'] {
  grid-template-rows: auto minmax(0, 1fr);
}

.coluna-visual[data-vista='2d'] .cartao-3d {
  display: none;
}

.coluna-visual[data-vista='3d'] {
  grid-template-rows: auto minmax(0, 1fr);
}

.coluna-visual[data-vista='3d'] .cartao-2d {
  display: none;
}

.barra-visual {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.segmentado {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  background: var(--superficie-3);
  border-radius: 10px;
}

.segmentado button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--texto-suave);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}

.segmentado button .icone {
  width: 15px;
  height: 15px;
}

.segmentado button.ativo {
  background: var(--superficie);
  color: var(--texto);
  box-shadow: var(--sombra-sm);
}

.coordenadas {
  font-size: 11.5px;
  color: var(--texto-fraco);
  font-variant-numeric: tabular-nums;
  font-family: var(--fonte-mono);
}

/* ================================================================= cartoes */

.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra-sm);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.cartao-topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--borda);
  font-size: 13px;
  flex: none;
}

.ferramentas {
  display: flex;
  gap: 5px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Visualizacao ampliada: o cartao ocupa a tela e escurece o resto. */
.cartao.ampliado {
  position: fixed;
  inset: 16px;
  z-index: 60;
  display: flex !important;
  box-shadow: 0 0 0 100vmax rgba(8, 12, 20, 0.6);
}

.palco {
  position: relative;
  flex: 1;
  min-height: 180px;
  background:
    radial-gradient(circle at 1px 1px, var(--borda) 1px, transparent 0) 0 0 / 22px 22px,
    var(--superficie-2);
  overflow: hidden;
}

.palco svg,
.palco canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.legenda {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  padding: 7px 12px;
  border-top: 1px solid var(--borda);
  font-size: 11.5px;
  color: var(--texto-suave);
  flex: none;
  max-height: 64px;
  overflow-y: auto;
}

.legenda span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.amostra {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  flex: none;
}

/* ================================================================ inspetor */

.coluna-lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  overflow-y: auto;
  padding-right: 2px;
}

.coluna-lista .cartao {
  flex: none;
  overflow: visible;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--superficie-3);
  border: 1px solid var(--borda);
  white-space: nowrap;
}

.status .icone {
  width: 14px;
  height: 14px;
}

.status.ok {
  background: var(--ok-fundo);
  border-color: var(--ok-borda);
  color: var(--ok);
}

.status.alerta {
  background: var(--alerta-fundo);
  border-color: var(--alerta-borda);
  color: var(--alerta);
}

.status.erro {
  background: var(--erro-fundo);
  border-color: var(--erro-borda);
  color: var(--erro);
}

.correcoes {
  margin: 10px 10px 0;
  padding: 11px;
  border-radius: var(--raio-sm);
  background: var(--erro-fundo);
  border: 1px solid var(--erro-borda);
}

.correcoes p {
  margin: 0 0 8px;
  font-size: 12.5px;
  color: var(--texto);
}

.correcoes strong {
  display: block;
  margin-bottom: 3px;
  color: var(--erro);
}

.correcoes .botoes-correcao {
  display: grid;
  gap: 6px;
}

.correcao {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--acento-borda);
  border-radius: var(--raio-sm);
  background: var(--superficie);
  color: var(--texto);
  font-size: 12.5px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--transicao), background var(--transicao);
}

.correcao .icone {
  width: 16px;
  height: 16px;
  color: var(--acento-forte);
}

.correcao:hover {
  border-color: var(--acento);
  background: var(--acento-fundo);
}

.lista-pecas,
.derivados,
.mensagens {
  padding: 8px;
  display: grid;
  gap: 5px;
  align-content: start;
}

.lista-pecas {
  max-height: 340px;
  overflow-y: auto;
}

.peca {
  display: grid;
  grid-template-columns: 8px 1fr auto;
  gap: 9px;
  align-items: center;
  padding: 7px 9px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  background: var(--superficie);
  cursor: pointer;
  text-align: left;
  color: var(--texto);
}

.peca:hover {
  border-color: var(--borda-forte);
}

.peca.selecionada {
  border-color: var(--acento);
  background: var(--acento-fundo);
}

.peca .barra {
  width: 8px;
  height: 28px;
  border-radius: 4px;
}

.peca strong {
  display: block;
  font-size: 12.5px;
}

.peca small {
  color: var(--texto-suave);
  font-size: 11px;
}

.peca .qtd {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 12px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--superficie-3);
}

.linha-derivado {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  padding: 4px 5px;
  border-radius: 6px;
}

.linha-derivado:nth-child(odd) {
  background: var(--superficie-2);
}

.linha-derivado span {
  color: var(--texto-suave);
}

.linha-derivado strong {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.msg {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--raio-sm);
  font-size: 12px;
  line-height: 1.4;
  border: 1px solid var(--borda);
  background: var(--superficie-2);
  color: var(--texto-suave);
}

.msg b {
  font-size: 9.5px;
  letter-spacing: 0.06em;
  padding-top: 2px;
}

.msg.ALERTA {
  background: var(--alerta-fundo);
  border-color: var(--alerta-borda);
  color: var(--alerta);
}

.msg.ERRO_BLOQUEANTE {
  background: var(--erro-fundo);
  border-color: var(--erro-borda);
  color: var(--erro);
}

.mais-mensagens {
  justify-self: start;
  border: 0;
  background: transparent;
  color: var(--texto-suave);
  font-size: 12px;
  padding: 4px 2px;
  cursor: pointer;
  text-decoration: underline;
}

/* ============================================================ barra de acoes */

.barra-acoes {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  background: var(--superficie);
  border-top: 1px solid var(--borda);
  box-shadow: 0 -4px 16px rgba(15, 20, 30, 0.05);
  position: relative;
  z-index: 10;
}

.resumo-acoes {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-size: 13px;
  color: var(--texto-suave);
}

.resumo-acoes .icone {
  width: 20px;
  height: 20px;
}

.resumo-acoes.ok .icone {
  color: var(--ok);
}

.resumo-acoes.erro {
  color: var(--erro);
  font-weight: 600;
}

.resumo-acoes .link {
  border: 0;
  background: transparent;
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}

.acoes {
  display: flex;
  align-items: center;
  gap: 10px;
}

.acoes-grupo {
  display: flex;
  align-items: center;
  gap: 8px;
}

.separador-acoes {
  width: 1px;
  height: 28px;
  background: var(--borda);
}

@media (max-width: 1380px) {
  .barra-acoes .botao.fantasma {
    font-size: 0;
    padding: 0 9px;
  }
}

/* =================================================================== modal */

dialog {
  border: 0;
  padding: 0;
  border-radius: var(--raio-lg);
  width: min(760px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  background: var(--superficie);
  color: var(--texto);
  box-shadow: var(--sombra-lg);
}

dialog::backdrop {
  background: rgba(10, 14, 22, 0.55);
  backdrop-filter: blur(2px);
}

dialog.largo {
  width: calc(100vw - 32px);
  height: calc(100vh - 32px);
  max-height: none;
}

.modal-corpo {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 48px);
}

dialog.largo .modal-corpo {
  height: 100%;
  max-height: none;
}

.modal-corpo > header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--borda);
}

.modal-corpo > header strong {
  font-family: var(--fonte-titulo);
  font-size: 17px;
}

#modal-conteudo {
  padding: 16px 18px;
  overflow: auto;
  flex: 1;
  min-height: 0;
}

dialog.cheio #modal-conteudo {
  padding: 0;
}

#modal-rodape {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid var(--borda);
  background: var(--superficie-2);
  border-radius: 0 0 var(--raio-lg) var(--raio-lg);
}

#modal-conteudo h4 {
  margin: 16px 0 6px;
}

#modal-conteudo p {
  margin: 0 0 8px;
}

#modal-conteudo code {
  background: var(--superficie-3);
  padding: 1px 5px;
  border-radius: 4px;
}

#modal-conteudo pre {
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  padding: 10px;
  overflow: auto;
  font-size: 12px;
}

table.dados {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

table.dados th,
table.dados td {
  padding: 8px 9px;
  border-bottom: 1px solid var(--borda);
  text-align: left;
  vertical-align: middle;
}

table.dados th {
  color: var(--texto-suave);
  font-weight: 600;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

table.dados td.numero,
table.dados th.numero {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.form-modal {
  display: grid;
  gap: 12px;
  margin-top: 8px;
}

.form-modal label {
  display: grid;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--texto-suave);
}

.form-modal .linha-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.barra-modal {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.tabela-projetos tr.arquivado {
  opacity: 0.55;
}

.acoes-linha {
  display: flex;
  gap: 5px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

td.vazio {
  text-align: center;
  color: var(--texto-suave);
  padding: 24px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--superficie-3);
  border: 1px solid var(--borda);
  color: var(--texto-suave);
  white-space: nowrap;
}

.chip.ok {
  background: var(--ok-fundo);
  border-color: var(--ok-borda);
  color: var(--ok);
}

.chip.alerta {
  background: var(--alerta-fundo);
  border-color: var(--alerta-borda);
  color: var(--alerta);
}

.chip.erro {
  background: var(--erro-fundo);
  border-color: var(--erro-borda);
  color: var(--erro);
}

.chip.escuro {
  background: var(--escuro);
  border-color: var(--escuro);
  color: var(--acento);
}

.texto-alerta {
  color: var(--alerta);
}

.texto-erro {
  color: var(--erro);
}

/* ================================================================== aviso */

.aviso {
  position: fixed;
  left: 50%;
  bottom: 84px;
  transform: translate(-50%, 12px);
  max-width: min(640px, calc(100vw - 32px));
  padding: 11px 16px;
  border-radius: var(--raio);
  background: var(--escuro);
  color: #fff;
  font-size: 13px;
  box-shadow: var(--sombra-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
  z-index: 100;
}

.aviso.visivel {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ============================================================== desenho 2D */

.cota text {
  font-family: var(--fonte);
  paint-order: stroke;
  stroke: var(--superficie-2);
  stroke-width: 3px;
}

.rotulo-peca {
  font-family: var(--fonte);
  font-size: 11px;
  font-weight: 700;
}

.grade line {
  stroke: var(--borda);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.onda-lamina {
  fill: none;
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
  cursor: pointer;
}

.onda-lamina:hover,
.onda-lamina.selecionada {
  stroke-width: 2.6;
}

/* ============================================================= simulacao */

.sim-aviso {
  padding: 8px 12px;
  border-radius: var(--raio-sm);
  background: var(--alerta-fundo);
  border: 1px solid var(--alerta-borda);
  color: var(--alerta);
  font-size: 12.5px;
}

.sim-resumo {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
}

.sim-resumo > div {
  display: grid;
  gap: 2px;
  padding: 8px 12px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  background: var(--superficie-2);
  min-width: 110px;
}

.sim-resumo span {
  font-size: 11px;
  color: var(--texto-suave);
}

.sim-resumo b {
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.sim-status {
  display: grid !important;
  place-items: center;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.sim-status.ok {
  background: var(--ok-fundo) !important;
  border-color: var(--ok-borda) !important;
  color: var(--ok);
}

.sim-status.alerta {
  background: var(--alerta-fundo) !important;
  border-color: var(--alerta-borda) !important;
  color: var(--alerta);
}

.sim-status.erro {
  background: var(--erro-fundo) !important;
  border-color: var(--erro-borda) !important;
  color: var(--erro);
}

.sim-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}

.sim-cartao {
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--superficie);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.sim-cartao-topo {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--borda);
  font-size: 12.5px;
}

.sim-svg {
  width: 100%;
  height: 220px;
  background: var(--superficie-2);
}

.sim-svg.alto {
  height: 260px;
}

.sim-peca {
  fill: color-mix(in srgb, var(--acento) 18%, transparent);
  stroke: var(--texto);
  stroke-width: 1.2;
}

.sim-trajeto-fundo {
  fill: none;
  stroke: var(--borda-forte);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}

.sim-trajeto {
  fill: none;
  stroke: var(--cota);
  stroke-width: 1.6;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: desenhar-trajeto 8s linear infinite;
}

@keyframes desenhar-trajeto {
  to {
    stroke-dashoffset: 0;
  }
}

.sim-fresa {
  fill: color-mix(in srgb, var(--cota) 25%, transparent);
  stroke: var(--cota);
  stroke-width: 0.6;
}

.sim-residuo {
  fill: var(--erro);
  opacity: 0.8;
}

.sim-vivo {
  fill: var(--alerta);
}

.sim-bolsao {
  fill: color-mix(in srgb, var(--ok) 15%, transparent);
  stroke: var(--ok);
  stroke-dasharray: 5 3;
}

.sim-painel {
  fill: color-mix(in srgb, var(--texto) 8%, transparent);
}

.sim-detalhes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  padding: 8px 10px;
  font-size: 11.5px;
  color: var(--texto-suave);
}

.sim-detalhes b {
  color: var(--texto);
}

.sim-legenda {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin-top: 10px;
}

.leg {
  display: inline-block;
  width: 14px;
  height: 10px;
  border-radius: 3px;
  vertical-align: middle;
  margin-right: 4px;
}

.leg.peca {
  background: color-mix(in srgb, var(--acento) 30%, transparent);
  border: 1px solid var(--texto);
}

.leg.trajeto {
  background: var(--cota);
}

.leg.fresa {
  background: color-mix(in srgb, var(--cota) 30%, transparent);
  border-radius: 50%;
}

.leg.residuo {
  background: var(--erro);
}

.leg.vivo {
  background: var(--alerta);
}

@media (prefers-reduced-motion: reduce) {
  .sim-trajeto {
    animation: none;
    stroke-dashoffset: 0;
  }
}

/* ======================================================= resumo do plano */

.resumo-plano {
  display: grid;
  gap: 5px;
}

.resumo-plano .botao {
  margin-top: 8px;
  justify-self: start;
}

.lote-resumo {
  display: grid;
  gap: 3px;
  margin-top: 6px;
  padding: 9px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  background: var(--superficie-2);
}

.lote-resumo.travamento {
  border-style: dashed;
}

.lote-resumo > strong {
  font-size: 12.5px;
  margin-bottom: 2px;
}

.ferragem-obs {
  display: block;
  font-size: 10.5px;
  color: var(--texto-fraco);
}

/* ===================================================== plano de corte (modal) */

.pc {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr) 300px;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100%;
  min-height: 0;
}

.pc-topo {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--borda);
  background: var(--superficie-2);
}

.pc-numeros {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pc-numero {
  display: grid;
  padding: 5px 11px;
  border-radius: var(--raio-sm);
  background: var(--superficie);
  border: 1px solid var(--borda);
  min-width: 96px;
}

.pc-numero span {
  font-size: 10.5px;
  color: var(--texto-suave);
}

.pc-numero b {
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.pc-topo .espacador {
  flex: 1;
}

.pc-alinhamento {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 4px 3px 10px;
  border-radius: var(--raio-sm);
  background: var(--superficie);
  border: 1px solid var(--borda);
}

.pc-alinhamento > span {
  font-size: 10.5px;
  color: var(--texto-suave);
  margin-right: 2px;
}

/* ===================================== editor de forma livre (ranhurado) */

.ec {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr) 320px;
  height: 100%;
  min-height: 0;
}

.ec-lado,
.ec-info {
  overflow-y: auto;
  padding: 12px 14px;
  display: grid;
  align-content: start;
  gap: 8px;
  background: var(--superficie-2);
}

.ec-lado {
  border-right: 1px solid var(--borda);
}

.ec-info {
  border-left: 1px solid var(--borda);
}

.ec-titulo {
  margin: 8px 0 0;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-suave);
  display: flex;
  align-items: center;
  gap: 6px;
}

.ec-formas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}

.ec-forma {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 5px 2px 4px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  background: var(--superficie);
  color: var(--texto);
  font-size: 10px;
  line-height: 1.15;
  cursor: pointer;
}

.ec-forma:hover,
.ec-forma.ativa {
  border-color: var(--acento-borda);
  background: var(--acento-fundo);
}

.ec-forma svg {
  width: 38px;
  height: 26px;
}

.ec-forma svg path {
  fill: none;
  stroke: var(--acento-forte);
  stroke-width: 1.6;
}

.ec-par {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 6px;
}

.ec-par label {
  display: grid;
  gap: 2px;
  font-size: 11px;
  color: var(--texto-suave);
  flex: 1 1 70px;
  position: relative;
}

.ec-par label em {
  position: absolute;
  right: 8px;
  bottom: 6px;
  font-style: normal;
  font-size: 10.5px;
  color: var(--texto-fraco);
}

.ec-par input,
.ec-par select {
  width: 100%;
  min-width: 0;
}

.ec-par > input,
.ec-par > select {
  flex: 1 1 120px;
}

.ec-botoes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.ec-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
}

.ec-centro {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
}

.ec-barra {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--borda);
}

.ec-barra .espacador {
  flex: 1;
}

.ec-palco {
  min-height: 0;
  position: relative;
  background: var(--superficie);
}

.ec-palco svg {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  user-select: none;
}

.ec-dica {
  margin: 0;
  padding: 6px 12px;
  border-top: 1px solid var(--borda);
  font-size: 11px;
}

.ec-grade line {
  stroke: var(--borda);
  stroke-width: 0.6;
  vector-effect: non-scaling-stroke;
}

.ec-grade line.forte {
  stroke: var(--borda-forte);
}

.ec-area {
  fill: none;
  stroke: var(--texto-fraco);
  stroke-dasharray: 6 4;
}

.ec-faixa {
  fill: #5b6ee1;
  fill-opacity: 0.1;
  stroke: none;
}

.ec-poligono {
  fill: none;
  stroke: var(--texto-fraco);
  stroke-width: 0.8;
  stroke-dasharray: 2 4;
}

.ec-reta {
  fill: none;
  stroke: #3f5bd8;
  stroke-width: 2;
  stroke-dasharray: 7 4;
}

.ec-arco {
  fill: none;
  stroke: #d9822b;
  stroke-width: 2.6;
}

.ec-ranhura {
  stroke: #b3541e;
  stroke-width: 1.2;
}

.ec-aresta {
  stroke: transparent;
  stroke-width: 14;
  cursor: pointer;
}

.ec-aresta.ativa {
  stroke: var(--acento);
  stroke-opacity: 0.35;
}

.ec-meio {
  cursor: copy;
}

.ec-meio rect {
  fill: var(--superficie);
  stroke: #d9822b;
  vector-effect: non-scaling-stroke;
}

.ec-meio text {
  fill: #d9822b;
  text-anchor: middle;
  font-weight: 700;
  pointer-events: none;
}

.ec-cota {
  fill: var(--texto-suave);
  text-anchor: middle;
  pointer-events: none;
}

.ec-no {
  cursor: grab;
}

.ec-no circle {
  fill: #f0a534;
  stroke: #ffffff;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.ec-no.selecionado circle {
  fill: #7b3fe4;
  stroke: #ffffff;
}

.ec-num {
  fill: #1c1c1c;
  font-weight: 700;
  text-anchor: middle;
  pointer-events: none;
}

.ec-no.selecionado .ec-num {
  fill: #ffffff;
}

.ec-raio {
  fill: #9a4d0a;
  font-weight: 600;
  cursor: pointer;
}

.ec-emenda circle {
  fill: none;
  stroke: #7b3fe4;
  stroke-width: 2;
}

.ec-emenda text {
  fill: #7b3fe4;
  font-weight: 700;
  text-anchor: middle;
}

.ec-3d {
  height: 230px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  overflow: hidden;
  background: var(--superficie);
}

.ec-3d canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.ec-numero {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--acento-forte);
  font-variant-numeric: tabular-nums;
}

.ec-plan {
  width: 100%;
  height: 90px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
}

.ec-plan-peca {
  fill: #e9edff;
  stroke: #3f5bd8;
  stroke-width: 1;
}

.ec-plan-linha {
  stroke: #d9534f;
  stroke-width: 0.8;
}

.ec-curvas td,
.ec-curvas th {
  padding: 3px 5px;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}

.ec-curvas tr.ruim td {
  color: var(--erro);
  font-weight: 600;
}

.ec-correcao {
  justify-self: start;
}

@media (max-width: 1100px) {
  .ec {
    grid-template-columns: 220px minmax(0, 1fr);
  }
  .ec-info {
    grid-column: 1 / -1;
    border-left: 0;
    border-top: 1px solid var(--borda);
  }
}

@media (max-width: 1500px) {
  .pc-regra {
    display: none;
  }
  .pc-numero {
    min-width: 0;
  }
}

.pc-chapas {
  border-right: 1px solid var(--borda);
  overflow-y: auto;
  padding: 10px;
  display: grid;
  align-content: start;
  gap: 10px;
}

.pc-lote-titulo {
  display: grid;
  gap: 2px;
  padding: 2px 2px 0;
}

.pc-lote-titulo strong {
  font-size: 12.5px;
}

.pc-lote-titulo span {
  font-size: 11px;
  color: var(--texto-suave);
}

.pc-miniatura {
  display: grid;
  gap: 4px;
  padding: 6px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  background: var(--superficie);
  cursor: pointer;
  text-align: left;
}

.pc-miniatura:hover {
  border-color: var(--borda-forte);
}

.pc-miniatura.ativa {
  border-color: var(--acento);
  box-shadow: 0 0 0 1px var(--acento) inset;
}

.pc-miniatura.problema {
  border-color: var(--erro);
}

.pc-miniatura svg {
  width: 100%;
  height: auto;
  background: var(--superficie-2);
  border-radius: 4px;
}

.pc-miniatura small {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--texto-suave);
}

.pc-centro {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.pc-centro-topo {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--borda);
}

.pc-centro-topo .espacador {
  flex: 1;
}

.pc-palco {
  flex: 1;
  min-height: 0;
  position: relative;
  background:
    radial-gradient(circle at 1px 1px, var(--borda) 1px, transparent 0) 0 0 / 20px 20px,
    var(--superficie-2);
  overflow: hidden;
}

.pc-palco svg {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  user-select: none;
}

.pc-svg {
  width: 100%;
  height: auto;
}

.pc-chapa {
  fill: var(--superficie);
  stroke: var(--texto-fraco);
  stroke-width: 1;
}

.pc-refilo {
  fill: none;
  stroke: var(--texto-fraco);
  stroke-width: 1;
  stroke-dasharray: 6 4;
}

/* Bruto usinado: o pedaco que sai da chapa e vai para a maquina (tamanho do DXF). */
.pc-bruto {
  fill: none;
  stroke: var(--acento, #7c9a2d);
  stroke-width: 1.5;
  stroke-dasharray: 8 4;
}

.pc-sobra {
  fill: color-mix(in srgb, var(--info) 8%, transparent);
  stroke: var(--info);
  stroke-width: 1;
  stroke-dasharray: 5 4;
}

.pc-peca {
  fill: color-mix(in srgb, var(--cor) 22%, transparent);
  stroke: var(--cor);
  stroke-width: 1.4;
}

.pc-furo {
  fill: var(--superficie);
  stroke: var(--cor);
  stroke-width: 1;
}

.pc-regiao {
  fill: none;
  stroke: var(--cor);
  stroke-width: 1;
  stroke-dasharray: 6 4;
}

/* Linha de fresagem (ranhura) sobre a peca. */
.pc-fresagem {
  fill: none;
  stroke: #c47b12;
  stroke-width: 0.8;
}

.pc-item {
  cursor: grab;
}

.pc-item:hover .pc-peca {
  stroke-width: 2.4;
}

.pc-item.selecionado .pc-peca {
  stroke-width: 2.8;
  fill: color-mix(in srgb, var(--cor) 38%, transparent);
}

.pc-item.arrastando {
  cursor: grabbing;
}

.pc-item.invalido .pc-peca {
  stroke: var(--erro) !important;
  fill: color-mix(in srgb, var(--erro) 25%, transparent) !important;
}

.pc-folga {
  fill: none;
  stroke: var(--erro);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  pointer-events: none;
}

.pc-rotulo {
  font-family: var(--fonte);
  font-weight: 800;
  fill: var(--texto);
  text-anchor: middle;
  pointer-events: none;
  paint-order: stroke;
  stroke: var(--superficie);
  stroke-width: 4px;
}

.pc-rotulo-sobra {
  font-family: var(--fonte);
  fill: var(--info);
  text-anchor: middle;
  pointer-events: none;
}

.pc-inspetor {
  border-left: 1px solid var(--borda);
  overflow-y: auto;
  padding: 12px;
  display: grid;
  align-content: start;
  gap: 12px;
}

.pc-bloco {
  display: grid;
  gap: 8px;
  padding: 11px;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--superficie);
}

.pc-bloco h4 {
  margin: 0 !important;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--texto-suave);
}

.pc-botoes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}

.pc-botoes .botao {
  justify-content: flex-start;
}

.pc-posicao {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.pc-posicao label {
  display: grid;
  gap: 3px;
  font-size: 11.5px;
  color: var(--texto-suave);
}

.pc-distancia {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
}

.pc-distancia b.ok {
  color: var(--ok);
}

.pc-distancia b.erro {
  color: var(--erro);
}

.pc-atalhos {
  display: grid;
  gap: 4px;
  font-size: 11.5px;
  color: var(--texto-suave);
}

.pc-atalhos kbd {
  font-family: var(--fonte-mono);
  font-size: 10.5px;
  padding: 1px 5px;
  border: 1px solid var(--borda-forte);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--superficie-2);
  color: var(--texto);
}

.pc-problemas {
  display: grid;
  gap: 5px;
}

.pc-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.pc-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--cor) 45%, transparent);
  background: color-mix(in srgb, var(--cor) 10%, transparent);
}

.pc-chip em {
  font-style: normal;
  color: var(--texto-suave);
}

.pc-vazio {
  display: grid;
  place-items: center;
  height: 100%;
  color: var(--texto-suave);
  font-size: 13px;
}

.leg.pc-leg-refilo {
  border: 1px dashed var(--texto-fraco);
}

.leg.pc-leg-sobra {
  background: color-mix(in srgb, var(--info) 15%, transparent);
  border: 1px dashed var(--info);
}

.leg.pc-leg-regiao {
  border: 1px dashed var(--ok);
}

/* ======================================== editor de forma (Painel Parametrico) */

.fe {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr) 300px;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100%;
  min-height: 0;
}

.fe-topo {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--borda);
  background: var(--superficie-2);
}

.fe-topo .espacador,
.fe-centro-topo .espacador {
  flex: 1;
}

.pc-numero.erro {
  border-color: var(--erro-borda);
  background: var(--erro-fundo);
}

.pc-numero.erro b {
  color: var(--erro);
}

.fe-lateral {
  border-right: 1px solid var(--borda);
  overflow-y: auto;
  padding: 12px;
  display: grid;
  align-content: start;
  gap: 12px;
}

.fe-lateral.direita {
  border-right: 0;
  border-left: 1px solid var(--borda);
}

.fe-centro {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.fe-centro-topo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--borda);
}

.fe-palco {
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
  touch-action: none;
  user-select: none;
}

.fe-palco canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.fe-palco.sobre-ponto canvas {
  cursor: grab;
}

.fe-palco.arrastando canvas {
  cursor: grabbing;
}

.fe-dica {
  position: absolute;
  left: 12px;
  bottom: 12px;
  max-width: min(520px, calc(100% - 24px));
  padding: 7px 11px;
  border-radius: var(--raio-sm);
  background: color-mix(in srgb, var(--superficie) 88%, transparent);
  border: 1px solid var(--borda);
  font-size: 12px;
  color: var(--texto-suave);
  pointer-events: none;
}

.fe-rotulo {
  position: absolute;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--escuro);
  color: #fff;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: var(--sombra);
}

.fe-ferramenta {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.fe-ferramenta button {
  justify-content: center;
  padding: 0 6px;
  white-space: nowrap;
}

.fe-deslizante {
  display: grid;
  gap: 4px;
  font-size: 11.5px;
  color: var(--texto-suave);
}

.fe-deslizante span {
  display: flex;
  justify-content: space-between;
}

.fe-deslizante b {
  color: var(--texto);
  font-variant-numeric: tabular-nums;
}

.fe-deslizante input {
  width: 100%;
  accent-color: var(--acento-forte);
}

.fe-duas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.rl-grade {
  display: grid;
  gap: 2px;
  margin: 8px 0 4px;
  padding: 4px;
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
}

.rl-celula {
  display: block;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 2px;
  background: none;
  cursor: pointer;
  line-height: 0;
}

.rl-celula svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
}

.rl-celula:hover {
  border-color: var(--acento-borda);
}

.fe-padroes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.fe-padrao {
  display: grid;
  gap: 4px;
  padding: 4px 4px 5px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  background: var(--superficie);
  color: var(--texto-suave);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  cursor: pointer;
}

.fe-padrao .fe-mini {
  display: block;
  width: 100%;
  height: 34px;
  border-radius: 3px;
  border: 1px solid var(--borda);
}

.fe-padrao:hover,
.fe-padrao.ativo {
  border-color: var(--acento-borda);
  background: var(--acento-fundo);
  color: var(--texto);
}

.palco-vazio {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  margin: 0;
  padding: 0 24px;
  text-align: center;
  color: var(--texto-fraco);
  font-size: 13px;
  line-height: 1.5;
  pointer-events: none;
}

.destaque-forma {
  display: grid;
  gap: 8px;
  grid-column: 1 / -1;
  padding: 12px;
  border: 1px solid var(--acento-borda);
  border-radius: var(--raio);
  background: var(--acento-fundo);
}

.destaque-forma strong {
  font-size: 13px;
}

.destaque-forma .botao {
  justify-self: start;
}

@media (max-width: 1300px) {
  .fe {
    grid-template-columns: 250px minmax(0, 1fr) 260px;
  }
}

/* ================================================================ entrar */

body.entrar {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(430px, 0.9fr);
  min-height: 100svh;
}

.entrar-marca {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  padding: 44px 52px calc(36px + env(safe-area-inset-bottom));
  background:
    radial-gradient(1100px 700px at 12% 115%, rgba(241, 62, 1, 0.5), transparent 62%),
    radial-gradient(700px 520px at 92% -10%, rgba(241, 62, 1, 0.26), transparent 60%),
    linear-gradient(155deg, #241f1d 0%, #16130f 100%);
  color: #f6f2ee;
  overflow: hidden;
}

/* O feixe de curvas e a assinatura do produto: desenha o planificado, nao um enfeite. */
.entrar-curvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  pointer-events: none;
}

.entrar-curvas path {
  fill: none;
  stroke: #f13e01;
  stroke-width: 1.6;
  stroke-linecap: round;
}

.entrar-curvas path:nth-child(odd) {
  stroke-width: 2.6;
  opacity: 0.85;
}

/* Deriva lenta, como a fresa varrendo a peca. Quem pede menos movimento nao recebe nenhum. */
.entrar-curvas-feixe {
  animation: entrar-deriva 26s ease-in-out infinite alternate;
  transform-origin: 50% 50%;
}

@keyframes entrar-deriva {
  from {
    transform: translate3d(0, -14px, 0) scaleY(0.985);
  }
  to {
    transform: translate3d(0, 14px, 0) scaleY(1.015);
  }
}

@media (prefers-reduced-motion: reduce) {
  .entrar-curvas-feixe {
    animation: none;
  }
}

.entrar-topo,
.entrar-titulo,
.entrar-rodape {
  position: relative;
}

.entrar-marca img {
  height: 34px;
  width: auto;
  max-width: min(78vw, 340px);
  object-fit: contain;
  object-position: left center;
}

.entrar-titulo {
  max-width: 520px;
}

.entrar-titulo p.sobretitulo {
  margin: 0;
  color: #ffb49a;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.entrar-titulo h1 {
  margin: 12px 0 14px;
  font-family: var(--fonte-titulo);
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.06;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.entrar-chamada {
  margin: 0;
  max-width: 44ch;
  color: #d6cec8;
  font-size: 15px;
  line-height: 1.6;
}

.entrar-pontos {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
}

.entrar-pontos li {
  position: relative;
  padding-left: 26px;
  color: #efe7e2;
  font-size: 14px;
}

.entrar-pontos li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 13px;
  height: 7px;
  border-left: 2.5px solid #f13e01;
  border-bottom: 2.5px solid #f13e01;
  border-bottom-left-radius: 3px;
  transform: skewX(-18deg);
}

.entrar-rodape {
  margin: 0;
  font-size: 12.5px;
  color: #a79d97;
}

.entrar-rodape a {
  color: #ffb49a;
}

.entrar-form {
  display: grid;
  place-items: center;
  padding: 44px 24px calc(44px + env(safe-area-inset-bottom));
  background: var(--fundo);
}

.entrar-cartao {
  width: min(420px, 100%);
  display: grid;
  gap: 18px;
  padding: 36px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra);
}

.entrar-cartao-topo {
  display: grid;
  gap: 4px;
}

.entrar-cartao h2 {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-size: 26px;
  letter-spacing: -0.015em;
}

.entrar-cartao label {
  display: grid;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--texto-suave);
}

/* Alvo de toque: 48px e o minimo que o dedo acerta sem erro no telefone. */
.entrar-cartao input {
  min-height: 48px;
  font-size: 16px; /* 16px evita o zoom automatico do iOS ao focar */
  border-radius: var(--raio-sm);
  transition: border-color var(--transicao), box-shadow var(--transicao);
}

.entrar-cartao input:focus-visible {
  outline: none;
  border-color: #f13e01;
  box-shadow: 0 0 0 3px rgba(241, 62, 1, 0.22);
}

.senha-campo {
  position: relative;
  display: block;
}

.senha-campo input {
  padding-right: 52px;
}

.senha-campo button {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
}

.entrar-erro {
  margin: 0;
  padding: 11px 13px;
  border-radius: var(--raio-sm);
  background: var(--erro-fundo);
  border: 1px solid var(--erro-borda);
  color: var(--erro);
  font-size: 13px;
  line-height: 1.45;
}

.entrar-cartao .botao.primario {
  height: 50px;
  margin-top: 2px;
  font-size: 15px;
  letter-spacing: 0.01em;
}

.entrar-planos {
  margin: 0;
  text-align: center;
}

/* --- Telefone e tablet em pe: a marca vira tarja e o formulario fica com a tela toda --- */
@media (max-width: 960px) {
  body.entrar {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }

  .entrar-marca {
    gap: 20px;
    padding: 26px 24px 28px;
  }

  .entrar-titulo h1 {
    margin: 10px 0 10px;
  }

  .entrar-chamada,
  .entrar-rodape {
    font-size: 13.5px;
  }

  .entrar-form {
    padding: 28px 20px calc(32px + env(safe-area-inset-bottom));
    align-content: start;
  }

  .entrar-cartao {
    padding: 26px 22px;
  }
}

/* No telefone sobra pouca altura: fica so a logo e a frase, o resto sai. */
@media (max-width: 620px) {
  .entrar-marca {
    padding: 20px 20px 22px;
  }

  .entrar-pontos,
  .entrar-rodape {
    display: none;
  }

  .entrar-chamada {
    display: none;
  }

  .entrar-titulo p.sobretitulo {
    font-size: 11px;
  }

  .entrar-marca img {
    height: 28px;
  }

  .entrar-curvas {
    opacity: 0.38;
  }
}

/* Deitado e baixo (telefone na horizontal): nada de marca roubando altura. */
@media (max-height: 560px) and (orientation: landscape) {
  body.entrar {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.9fr);
    grid-template-rows: 1fr;
  }

  .entrar-marca {
    padding: 18px 22px;
  }

  .entrar-pontos {
    display: none;
  }

  .entrar-form {
    padding: 18px 16px;
    align-content: center;
  }
}

/* Faixa do plano no formulario de criar usuario: o plano e da EMPRESA, e quem cadastra
   precisa ver onde esta entrando. */
.usuario-plano { margin: 0 0 4px; padding: 10px 12px; border-radius: var(--raio-sm); background: var(--acento-fundo); border: 1px solid var(--acento-borda); color: var(--acento-forte); font-size: 13px; line-height: 1.5; }
.usuario-plano strong { color: var(--texto); }
.usuario-plano.interna { background: var(--superficie-3); border-color: var(--borda); color: var(--texto-suave); }
.usuario-plano.sem-plano { background: var(--alerta-fundo); border-color: var(--alerta-borda); color: var(--alerta); }
/* Contador de projetos do mes na barra de exportar. Fica discreto; so grita quando aperta. */
.uso-na-barra { color: var(--texto-suave); }
.uso-na-barra.uso-quase { color: var(--alerta); font-weight: 600; }
.uso-na-barra.uso-esgotado { color: var(--erro); font-weight: 600; }
/* ------------------------------------------------------------ Claude */
.claude-situacao { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.claude-ok { color: var(--acento-forte); font-weight: 600; margin: 0; }
.claude-criar { display: grid; gap: 14px; }
.claude-entrada { display: grid; gap: 10px; }
.claude-entrada textarea { width: 100%; min-height: 110px; resize: vertical; font: inherit; padding: 10px; border: 1px solid var(--borda-forte); border-radius: var(--raio-sm); background: var(--superficie); color: inherit; box-sizing: border-box; }
.claude-exemplos { display: flex; flex-wrap: wrap; gap: 6px; }
.claude-exemplos .mini { white-space: normal; text-align: left; }
.claude-soltar { display: flex; align-items: center; gap: 10px; padding: 16px; border: 2px dashed var(--borda-forte); border-radius: var(--raio); background: var(--superficie-2); cursor: pointer; }
.claude-soltar.arrastando, .claude-soltar:focus-visible { border-color: var(--acento-forte); background: var(--acento-fundo); outline: none; }
.claude-thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.claude-thumb { position: relative; margin: 0; width: 96px; height: 96px; border-radius: var(--raio-sm); overflow: hidden; border: 1px solid var(--borda); }
.claude-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.claude-thumb .mini { position: absolute; top: 4px; right: 4px; padding: 2px 4px; }
.claude-manter { display: flex; align-items: center; gap: 8px; }
.claude-carregando { margin: 0; padding: 12px; border-radius: var(--raio-sm); background: var(--acento-fundo); color: var(--acento-texto); font-weight: 600; animation: claude-pulso 1.4s ease-in-out infinite; }
@keyframes claude-pulso { 50% { opacity: 0.55; } }
.claude-resultado { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--acento-borda); border-radius: var(--raio); background: var(--superficie-2); }
.claude-resultado h4 { margin: 0; display: flex; align-items: center; gap: 6px; }
.claude-resultado p { margin: 0; }
.claude-suposicoes { margin: 0; padding-left: 18px; }
.claude-alteracoes tr.igual td { color: var(--texto-suave); }
@media (prefers-reduced-motion: reduce) { .claude-carregando { animation: none; } }

/* Quantidade com botoes - e + (ripas de fixacao). */
.com-contador { display: flex; align-items: stretch; gap: 4px; }
.com-contador input { flex: 1; min-width: 0; text-align: center; }
.com-contador .mini { min-width: 32px; justify-content: center; font-weight: 700; }

/* ===== assinaturas ===== */
/* Campos de e-mail, telefone e URL com o mesmo visual dos campos de texto. */
input[type='email'],
input[type='tel'],
input[type='url'] {
  width: 100%;
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-sm);
  background: var(--superficie);
  color: var(--texto);
  font-size: 13.5px;
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
a.botao { text-decoration: none; }

/* Topo do app: contador discreto de usinagens e aviso de pagamento. */
.assinatura-topo { display: flex; align-items: center; gap: 6px; }
.uso-contador { display: inline-grid; line-height: 1.1; text-align: right; padding: 3px 10px; border: 1px solid var(--borda); border-radius: var(--raio-sm); background: var(--superficie-2); color: var(--texto); cursor: pointer; }
.uso-contador small { font-size: 10px; color: var(--texto-suave); text-transform: uppercase; letter-spacing: 0.04em; }
.uso-contador strong { font-size: 13px; font-variant-numeric: tabular-nums; }
.uso-contador:hover { border-color: var(--borda-forte); }
.uso-contador.quase { border-color: var(--alerta-borda); background: var(--alerta-fundo); }
.uso-contador.quase strong { color: var(--alerta); }
.uso-contador.cheio { border-color: var(--erro-borda); background: var(--erro-fundo); }
.uso-contador.cheio strong { color: var(--erro); }
.aviso-assinatura { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: var(--raio-sm); border: 1px solid var(--borda-forte); background: var(--superficie-3); color: var(--texto); font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.aviso-assinatura .icone { width: 15px; height: 15px; }
.aviso-assinatura.alerta { background: var(--alerta-fundo); border-color: var(--alerta-borda); color: var(--alerta); }
.aviso-assinatura.erro { background: var(--erro-fundo); border-color: var(--erro-borda); color: var(--erro); }
@media (max-width: 1440px) {
  .uso-contador small { display: none; }
  .uso-contador { padding: 5px 9px; }
}
@media (max-width: 1200px) {
  .aviso-assinatura span { max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
}

/* Minha assinatura e recusas 402. */
.assinatura-painel { display: grid; gap: 14px; }
.assinatura-painel p { margin: 0; }
.assinatura-cabecalho { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.assinatura-cabecalho h3 { margin: 2px 0; font-family: var(--fonte-titulo); font-size: 20px; }
.uso-barra { height: 8px; border-radius: 999px; background: var(--superficie-3); overflow: hidden; }
.uso-barra span { display: block; height: 100%; border-radius: inherit; background: var(--ok); transition: width var(--transicao); }
.uso-barra.alerta span { background: var(--alerta); }
.uso-barra.erro span { background: var(--erro); }
.assinatura-fatura { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-radius: var(--raio); border: 1px solid var(--alerta-borda); background: var(--alerta-fundo); }
.assinatura-fatura.erro { border-color: var(--erro-borda); background: var(--erro-fundo); }
.assinatura-fatura > div:first-child { display: grid; gap: 2px; }
.assinatura-fatura-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.assinatura-planos h4 { margin: 0 0 8px; }
.assinatura-planos .nota { margin-top: 8px; }
.planos-opcoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }
.plano-opcao { display: grid; gap: 10px; align-content: space-between; padding: 12px; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie-2); }
.plano-opcao.atual { border-color: var(--acento-borda); background: var(--acento-fundo); }
.plano-opcao > div { display: grid; gap: 2px; }
.plano-opcao span { font-size: 12.5px; color: var(--texto-suave); }
.assinatura-lista summary,
.asaas-ajuda summary { cursor: pointer; font-weight: 600; }
.assinatura-lista table { margin-top: 6px; }

/* Painel da plataforma (dono). */
.plataforma-abas { margin-bottom: 12px; }
.tabela-contas td { vertical-align: top; }
.tabela-contas small { color: var(--texto-suave); }
.tabela-planos td { vertical-align: top; }
.tabela-planos input[type='text'],
.tabela-planos input[type='number'] { min-width: 72px; }
.tabela-planos td small { display: block; margin-top: 3px; color: var(--texto-fraco); }
.tabela-planos th:nth-child(2),
.tabela-planos td:nth-child(2) { width: 110px; }
.tabela-planos th:nth-child(3),
.tabela-planos td:nth-child(3) { width: 130px; }
.tabela-planos th:nth-child(4),
.tabela-planos td:nth-child(4) { width: 96px; }
.tabela-planos td:nth-child(5) { min-width: 260px; }
.publico-marca span { white-space: nowrap; }
.plano-ativo { display: flex; gap: 6px; align-items: center; white-space: nowrap; font-weight: 500; }
.asaas-situacao { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.form-modal label.asaas-gerar { display: flex; align-items: center; gap: 8px; align-self: end; font-weight: 500; color: var(--texto); }
.asaas-ajuda { margin-top: 12px; }
.asaas-ajuda ol { padding-left: 20px; display: grid; gap: 4px; }

/* Paginas publicas: planos e termos. */
body.publico { min-height: 100vh; display: flex; flex-direction: column; }
.publico-topo { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px clamp(16px, 4vw, 48px); background: var(--superficie); border-bottom: 1px solid var(--borda); position: sticky; top: 0; z-index: 5; }
.publico-marca { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; font-weight: 700; }
.publico-marca .marca-logo { height: 26px; }
.publico-nav { display: flex; align-items: center; gap: 18px; }
.publico-nav a:not(.botao) { color: var(--texto-suave); text-decoration: none; font-weight: 600; }
.publico-nav a:not(.botao):hover { color: var(--texto); }
.publico-conteudo { width: min(1120px, 100%); margin: 0 auto; padding: 40px 16px 56px; display: grid; gap: 40px; flex: 1; }
.publico-abertura { max-width: 720px; }
.publico-abertura h1 { font-family: var(--fonte-titulo); font-size: clamp(28px, 4vw, 42px); line-height: 1.1; letter-spacing: -0.02em; margin: 6px 0 12px; }
.publico-abertura p { color: var(--texto-suave); font-size: 16px; margin: 0; }
.publico-aviso { margin: -20px 0 0; padding: 10px 14px; border-radius: var(--raio-sm); background: var(--alerta-fundo); border: 1px solid var(--alerta-borda); color: var(--alerta); }
.planos-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; align-items: stretch; }
.plano-cartao { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 24px; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-lg); box-shadow: var(--sombra); }
.plano-cartao.destaque { border-color: var(--acento-forte); box-shadow: var(--sombra), 0 0 0 1px var(--acento-forte); }
.plano-cartao.carregando { color: var(--texto-suave); align-items: center; justify-content: center; min-height: 160px; }
.plano-cartao h2 { margin: 0; font-family: var(--fonte-titulo); font-size: 22px; }
.plano-selo { position: absolute; top: -11px; left: 24px; padding: 2px 10px; border-radius: 999px; background: var(--acento); color: var(--acento-texto); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; }
.plano-usinagens { margin: 0; color: var(--texto-suave); }
.plano-usinagens strong { font-size: 28px; color: var(--texto); font-variant-numeric: tabular-nums; }
.plano-preco { margin: 0; display: flex; align-items: baseline; gap: 4px; }
.plano-preco strong { font-size: 26px; font-family: var(--fonte-titulo); }
.plano-preco span { color: var(--texto-suave); }
.plano-preco.a-definir { color: var(--texto-suave); font-style: italic; font-size: 16px; }
/* Promocao: o preco de tabela sai riscado ao lado do promocional, e a campanha ganha um selo. */
.plano-preco .plano-de { color: var(--texto-fraco); font-size: 15px; text-decoration-thickness: 1.5px; }
.plano-promocao { margin: 4px 0 0; display: inline-block; padding: 3px 9px; border-radius: 999px; background: var(--acento-fundo); border: 1px solid var(--acento-borda); color: var(--acento-forte); font-size: 12px; font-weight: 600; }
.plano-descricao { margin: 0; color: var(--texto-suave); }
.plano-inclui { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; flex: 1; align-content: start; }
.plano-inclui li { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; }
.plano-inclui .icone { width: 16px; height: 16px; flex: none; color: var(--acento-forte); margin-top: 2px; }
.plano-cartao .botao.largo { width: 100%; height: 42px; }
.publico-bloco h2 { font-family: var(--fonte-titulo); font-size: 24px; margin: 0 0 14px; }
.publico-colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.publico-colunas > div { padding: 18px; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie); }
.publico-colunas h3 { margin: 0 0 6px; font-size: 15px; }
.publico-colunas p { margin: 0; color: var(--texto-suave); }
.publico-bloco details { border-bottom: 1px solid var(--borda); padding: 12px 0; }
.publico-bloco summary { cursor: pointer; font-weight: 600; }
.publico-bloco details p { color: var(--texto-suave); margin: 8px 0 0; max-width: 760px; }
.publico-rodape { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; padding: 20px 16px; border-top: 1px solid var(--borda); color: var(--texto-suave); font-size: 12.5px; }
.publico-rodape a { color: inherit; }
.publico-conteudo.termos { max-width: 820px; gap: 10px; }
.termos h1 { font-family: var(--fonte-titulo); margin: 8px 0 0; }
.termos h2 { font-size: 17px; margin: 18px 0 0; }
.termos p { margin: 0; line-height: 1.6; }
.termos-rascunho { padding: 12px 16px; border-radius: var(--raio); background: var(--alerta-fundo); border: 1px solid var(--alerta-borda); color: var(--alerta); }
@media (max-width: 640px) {
  .publico-nav a:not(.botao) { display: none; }
  .publico-conteudo { padding-top: 24px; gap: 28px; }
}

/* Cadastro da empresa (usa o layout da tela de entrada). */
body.entrar.cadastro { height: auto; }
.cadastro .entrar-marca { position: sticky; top: 0; height: 100vh; }
.cadastro .entrar-form { align-items: start; }
.cadastro-cartao { width: min(540px, 100%); }
.cadastro-cartao fieldset { border: 1px solid var(--borda); border-radius: var(--raio); padding: 12px 14px 14px; margin: 0; display: grid; gap: 12px; }
.cadastro-cartao legend { padding: 0 6px; font-weight: 700; font-size: 12.5px; color: var(--texto); }
.linha-cadastro { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dica-campo { font-weight: 400; color: var(--texto-fraco); font-size: 11.5px; }
.dica-campo.ok { color: var(--ok); }
.dica-campo.erro { color: var(--erro); }
.cadastro-cartao label.aceite { display: flex; gap: 8px; align-items: flex-start; font-weight: 500; color: var(--texto); }
.cadastro-cartao label.aceite input { min-height: 0; margin-top: 3px; }
.privacidade { margin: 0; padding: 10px 12px; border-radius: var(--raio-sm); background: var(--superficie-2); border: 1px solid var(--borda); }
.cadastro-passos { margin: 22px 0 0; padding-left: 20px; display: grid; gap: 8px; color: #c8ccc4; font-size: 14px; }
.cadastro-pronto .botao { width: 100%; }
.cadastro-pronto p { margin: 0; }
.entrar-planos { margin: 0; text-align: center; }
.entrar-rodape a,
.entrar-marca a { color: var(--marca-destaque); }
@media (max-width: 900px) {
  /* relative (nao static): as linhas decorativas ficam presas ao painel da marca. */
  .cadastro .entrar-marca { position: relative; height: auto; gap: 16px; padding: 28px 20px; }
  .cadastro-passos { margin-top: 14px; }
}
@media (max-width: 520px) {
  .linha-cadastro { grid-template-columns: 1fr; }
  .cadastro-cartao { padding: 20px 16px; }
}

.perfil-aviso {
  color: #9a3412;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 6px;
  padding: 6px 8px;
  line-height: 1.35;
}

/* ----------------------------------------- quantidades no plano de corte */
.pc-qtd {
  display: grid;
  gap: 6px;
  margin: 8px 0 10px;
}

.pc-qtd-linha {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 5px 7px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm, 6px);
  background: var(--superficie-2);
}

.pc-qtd-linha.mexida {
  border-color: var(--marca-destaque);
}

.pc-qtd-nome {
  display: grid;
  line-height: 1.25;
  min-width: 0;
}

.pc-qtd-nome small {
  color: var(--texto-suave);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pc-qtd-controle {
  display: flex;
  align-items: center;
  gap: 4px;
}

.pc-qtd-controle input {
  width: 48px;
  text-align: center;
  padding: 4px 2px;
}