/* static/app.css */
:root { --tinta: #16181d; --fundo: #f6f7f9; --linha: #d6dae1; --acento: #1f4e79; }
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.5 system-ui, sans-serif; color: var(--tinta); background: var(--fundo); }
.topo { display: flex; justify-content: space-between; align-items: center;
        padding: 12px 20px; background: #fff; border-bottom: 1px solid var(--linha); }
main { max-width: 1100px; margin: 0 auto; padding: 20px 16px; }
table { border-collapse: collapse; width: 100%; background: #fff; }
th, td { padding: 8px 10px; border-bottom: 1px solid var(--linha); text-align: left; }
.alerta { background: #fff4e5; border-left: 4px solid #c47f00; padding: 10px 12px; margin: 10px 0; }
.semaforo { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.semaforo.verde { background: #1e8e3e; } .semaforo.amarelo { background: #c47f00; }
.semaforo.vermelho { background: #c5221f; }
.navegacao { display: flex; gap: 18px; align-items: center;
             padding: 8px 20px; background: #fff; border-bottom: 1px solid var(--linha); }
.navegacao a { color: var(--acento); text-decoration: none; font-weight: 600; }
.navegacao a:hover { text-decoration: underline; }
.navegacao .sair { margin-left: auto; }

/* Miniatura e desenho ampliado da peça */
.abrir-desenho { padding: 0; border: 1px solid #c8cfd8; background: #fff; cursor: zoom-in; }
.abrir-desenho svg { display: block; }
dialog.desenho-ampliado { max-width: 95vw; }
dialog.desenho-ampliado svg { max-width: 100%; height: auto; }
.lado { cursor: pointer; }
.lado:hover { stroke: #e67e22; stroke-opacity: 0.6; }

/* Centro de custos */
.rolagem { overflow-x: auto; }
.abas { display: flex; flex-wrap: wrap; gap: 14px; margin: 10px 0 16px; }
.abas a { color: var(--acento); text-decoration: none; font-weight: 600; }
.abas a.atual { text-decoration: underline; }
.tira { position: sticky; bottom: 0; background: #fff; margin-top: 24px;
        border-top: 2px solid var(--acento); padding: 8px 0; }
.taxas th, .taxas td { padding: 4px 6px; font-size: 13px; white-space: nowrap; }
.recusa { background: #fdecea; border-left: 4px solid #c5221f; padding: 10px 12px; margin: 10px 0; }
.nota { color: #555; font-size: 13px; }
.seletor { margin: 8px 0; }
.operacoes form { display: inline-block; margin: 4px 12px 4px 0; }

/* Encaixe: um desenho por chapa distinta */
.folha-encaixe { display: inline-block; width: 340px; max-width: 100%; margin: 8px 14px 8px 0; vertical-align: top; }
.folha-encaixe .abrir-desenho { width: 100%; }
.folha-encaixe svg, dialog.desenho-ampliado svg { display: block; width: 100%; height: auto; }
.folha-encaixe figcaption { font-weight: 600; margin-top: 4px; }
.legenda { list-style: none; padding: 0; margin: 4px 0; font-size: 13px; }
.legenda .cor { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border: 1px solid #1f4e79; }
.botoes-encaixe { margin: 10px 0; }
.botao.desabilitado { opacity: .5; cursor: not-allowed; }

/* Simulação */
.simular { margin-top: 24px; padding-top: 8px; border-top: 1px solid var(--linha); }
.sim-peca { display: inline-block; margin: 0 16px 6px 0; }
/* A regra acima (do autor) vence o `[hidden]` do navegador: sem esta, o que o simulacao.js
   esconde — o outro grupo e o modo «cabem» — continuaria na tela. */
.sim-peca[hidden] { display: none; }
.sim-peca input { width: 90px; }