/* =====================================================================
 *  KCORTE - OFICINA: a area de trabalho do CAM.
 *
 *  A tela inteira e uma grade de tres faixas: ferramentas em cima, o
 *  palco no meio (pecas | chapa | propriedades) e a barra de resultado
 *  embaixo. O canvas ocupa TUDO que sobra, porque e nele que o operador
 *  trabalha; painel que rouba espaco do desenho e painel no lugar errado.
 *
 *  Cor nenhuma esta escrita a mao aqui: todas saem dos tokens oficiais
 *  (Documento 04 secao 2). Os tokens proprios da oficina estao no comeco,
 *  e existem porque desenho tecnico precisa de contraste que a paleta de
 *  formulario nao tem.
 * ===================================================================== */

/*  Os tokens de desenho (--of-*) vivem em kcorte-tokens.css, com os demais.
 *  Cor literal so existe la, e um teste de convencao reprova quem trouxer
 *  hexadecimal de volta para uma folha de componente.
 */

/* ---- Moldura da tela ----------------------------------------------- */
.oficina {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 10px;
  /* Ocupa a altura util da area de conteudo. O canvas cresce com a
     janela: em CAM, tela pequena e produtividade pequena. */
  height: calc(100vh - 60px - 44px);
  min-height: 460px;
}

/* ---- Barra de ferramentas ------------------------------------------ */
.of-barra {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 8px 10px;
  box-shadow: var(--sombra);
}
.of-barra .of-titulo { font-weight: 700; margin-right: 4px; }
.of-barra .of-sub { color: var(--cinza); font-size: 12.5px; }
.of-sep { width: 1px; height: 24px; background: var(--linha); margin: 0 2px; }
.of-espaco { flex: 1 }

.of-bt {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 11px; border-radius: var(--raio-sm);
  border: 1px solid var(--linha); background: var(--branco);
  color: var(--texto); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: .12s; line-height: 1;
}
.of-bt:hover:not(:disabled) { background: var(--azul-claro); border-color: var(--azul-2); color: var(--azul) }
.of-bt:disabled { opacity: .45; cursor: not-allowed }
.of-bt.primario { background: var(--azul-2); border-color: var(--azul-2); color: var(--branco) }
.of-bt.primario:hover:not(:disabled) { background: var(--azul); border-color: var(--azul); color: var(--branco) }
.of-bt.ligado { background: var(--azul-claro); border-color: var(--azul-2); color: var(--azul) }
.of-bt .ic { display: inline-flex }

/* ---- Palco ---------------------------------------------------------- */
.of-palco {
  display: grid;
  grid-template-columns: 230px 1fr 260px;
  gap: 10px;
  min-height: 0;               /* deixa o canvas encolher dentro da grade */
}

.of-painel {
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  display: flex; flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.of-painel > h3 {
  margin: 0; padding: 11px 13px;
  border-bottom: 1px solid var(--linha);
  font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.of-painel > h3 .of-conta {
  font-weight: 600; font-size: 12px; color: var(--cinza);
}
.of-corpo { overflow-y: auto; padding: 8px; flex: 1; min-height: 0 }

/* ---- Lista de pecas -------------------------------------------------- */
.of-peca-item {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 8px;
  padding: 7px 9px; border-radius: var(--raio-sm);
  cursor: pointer; border: 1px solid transparent;
}
.of-peca-item:hover { background: var(--bg) }
.of-peca-item.sel { background: var(--azul-claro); border-color: var(--azul-2) }
.of-peca-item b { font-size: 13px }
.of-peca-item small { grid-column: 1 / -1; color: var(--cinza); font-size: 11.5px }

/* ---- Canvas ---------------------------------------------------------- */
.of-mesa {
  position: relative;
  background: var(--of-fundo);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  overflow: hidden;
  min-height: 0;
}
.of-mesa canvas { display: block; width: 100%; height: 100%; cursor: default }
.of-mesa canvas.arrastando { cursor: grabbing }
.of-mesa canvas.sobre-peca { cursor: move }

.of-flutua {
  position: absolute; left: 10px; bottom: 10px;
  display: flex; gap: 6px; align-items: center;
  background: var(--of-vidro);
  border: 1px solid var(--of-chapa-borda);
  border-radius: var(--raio-sm);
  padding: 5px 9px; color: var(--of-texto); font-size: 11.5px;
  pointer-events: none;
}
.of-atalhos {
  position: absolute; right: 10px; top: 10px;
  background: var(--of-vidro);
  border: 1px solid var(--of-chapa-borda);
  border-radius: var(--raio-sm);
  padding: 8px 11px; color: var(--of-texto-fraco); font-size: 11.5px; line-height: 1.7;
  pointer-events: none;
}
.of-atalhos b { color: var(--of-texto-forte); font-weight: 600 }
.of-atalhos kbd {
  background: var(--of-grade-forte); border: 1px solid var(--of-margem); border-radius: 4px;
  padding: 0 5px; font-family: inherit; font-size: 11px; color: var(--of-texto-forte);
}

/* ---- Propriedades e resultado ---------------------------------------- */
.of-linha {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; padding: 5px 4px; font-size: 12.5px;
  border-bottom: 1px dashed var(--linha);
}
.of-linha:last-child { border-bottom: 0 }
.of-linha span { color: var(--cinza) }
.of-linha b { font-variant-numeric: tabular-nums; font-weight: 700 }
.of-linha.destaque b { color: var(--azul); font-size: 15px }

.of-campo { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px }
.of-campo label { font-size: 12px; font-weight: 600; color: var(--rotulo) }
.of-campo select, .of-campo input {
  padding: 7px 9px; border: 1px solid var(--linha); border-radius: var(--raio-sm);
  font-size: 13px; font-family: inherit; background: var(--branco); color: var(--texto);
}
.of-campo select:focus, .of-campo input:focus {
  outline: 0; border-color: var(--azul-2); box-shadow: 0 0 0 3px var(--azul-claro);
}

/* Nota debaixo do campo: explica o PRECO da escolha, nao o que ela faz.
   Estava como style inline no JS, o que o teste de convencao 11 reprova. */
.of-campo .of-nota {
  font-size: 11.5px; color: var(--cinza); line-height: 1.5;
}
.of-campo .of-nota b { color: var(--texto); font-weight: 600 }

/* Marcador (checkbox) com o rotulo do lado, nao em cima. */
.of-campo label.of-marcador {
  display: flex; align-items: center; gap: 7px; cursor: pointer;
  font-size: 13px; font-weight: 500; color: var(--texto);
}
.of-campo label.of-marcador input { width: 16px; height: 16px; margin: 0; cursor: pointer }
.of-campo label.of-marcador b { font-weight: 700 }

/* O que a linha comum economizou neste plano, medido. */
.of-bloco-lc {
  margin-top: 8px; padding: 8px 10px;
  background: var(--azul-claro);
  border: 1px solid var(--azul-2);
  border-radius: var(--raio-sm);
}
.of-bloco-lc .of-linha { padding: 3px 0; border-bottom: 0; font-size: 12px }
.of-bloco-lc .of-linha.destaque b { font-size: 12.5px }

/* ---- Barra de resultado ----------------------------------------------- */
.of-resultado {
  display: flex; align-items: center; gap: 0;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  overflow-x: auto;
}
.of-resultado .of-cel {
  padding: 9px 16px; border-right: 1px solid var(--linha);
  display: flex; flex-direction: column; gap: 1px; white-space: nowrap;
}
.of-resultado .of-cel:last-child { border-right: 0 }
.of-resultado .of-cel small {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--cinza);
}
.of-resultado .of-cel b { font-size: 15px; font-variant-numeric: tabular-nums }
.of-resultado .of-cel.principal b { color: var(--azul); font-size: 18px }
.of-resultado .of-cel.alerta b { color: var(--laranja) }

/* ---- Simulacao --------------------------------------------------------- */
.of-sim {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; background: var(--bg);
  border-top: 1px solid var(--linha);
}
.of-sim input[type=range] { flex: 1; accent-color: var(--azul-2) }
.of-sim .of-tempo {
  font-variant-numeric: tabular-nums; font-size: 12px; color: var(--cinza);
  min-width: 92px; text-align: right;
}

/* ---- Avisos -------------------------------------------------------------- */
.of-avisos { max-height: 132px; overflow-y: auto }
.of-aviso {
  font-size: 12px; padding: 6px 8px; border-radius: var(--raio-sm);
  background: var(--amarelo-claro); color: var(--amarelo); margin-bottom: 5px;
  border: 1px solid var(--amarelo);
}
.of-aviso.erro { background: var(--vermelho-claro); color: var(--vermelho); border-color: var(--vermelho-claro) }

/* ---- Previa do programa --------------------------------------------------- */
.of-previa {
  background: var(--of-fundo); color: var(--of-texto); border-radius: var(--raio-sm);
  padding: 11px 13px; font-family: "Cascadia Mono", Consolas, "Courier New", monospace;
  font-size: 12px; line-height: 1.55; white-space: pre; overflow: auto; max-height: 340px;
}

/* ---- A escada de sempre (Documento 04 secao 5) ------------------------------ */
@media (max-width: 1100px) {
  .of-palco { grid-template-columns: 200px 1fr }
  .of-palco .of-direita { display: none }
}
@media (max-width: 860px) {
  .oficina { height: auto }
  .of-palco { grid-template-columns: 1fr }
  .of-palco .of-esquerda { display: none }
  .of-mesa { height: 62vh }
  .of-atalhos { display: none }
}

/* =====================================================================
 *  TELA CHEIA
 *
 *  Desenhar peça em tela pequena não é trabalho, é tentativa. Com
 *  `body.modo-oficina` o menu lateral e o cabeçalho saem, e a área de
 *  desenho fica com a tela inteira. É o mesmo mecanismo do modo quiosque
 *  do operador que a plataforma já usa: uma classe no corpo, nada de
 *  segunda folha de estilo e nada de segunda moldura.
 *
 *  A saída fica SEMPRE visível, no canto. Tela cheia sem saída à vista é
 *  como o operador se sente preso e fecha o navegador no meio do plano.
 * ===================================================================== */
body.modo-oficina #app {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}
body.modo-oficina .sidebar,
body.modo-oficina .topbar { display: none }
/* O SELETOR PRECISA SER DE ID, e o motivo foi medido no navegador.
 *
 * A moldura declara `#conteudo{ grid-column:2 }`, que e seletor de ID e
 * ganha de qualquer classe. Com `body.modo-oficina .conteudo` a regra
 * simplesmente nao pegava: o conteudo ficava na coluna 2, o navegador
 * criava uma coluna implicita de 1100px (o `max-width` dos componentes
 * oficiais) e a area de desenho ganhava 20px em vez dos 248 do menu.
 *
 * O `max-width:none` tambem e essencial: em tela cheia o limite de 1100px
 * de largura de leitura nao faz sentido nenhum, porque ali nao se le, se
 * desenha. */
body.modo-oficina #conteudo {
  grid-column: 1;
  grid-row: 1;
  padding: 8px;
  max-width: none;
}
body.modo-oficina .oficina { height: calc(100vh - 16px) }

/* A lâmpada do Assistente continua alcançável: ajuda escondida é ajuda
   que não existe (Constituição §22). */
body.modo-oficina #ak-botao { bottom: 14px; right: 14px }

.of-bt.saida-cheia { border-color: var(--laranja); color: var(--laranja) }
.of-bt.saida-cheia:hover:not(:disabled) {
  background: var(--laranja-claro); border-color: var(--laranja); color: var(--laranja);
}