:root {
    --azul: #2563eb;
    --azul-escuro: #1d4ed8;
    --verde: #16a34a;
    --cinza-fundo: #f3f4f6;
    --cinza-borda: #d1d5db;
    --texto: #1f2937;
}

* { box-sizing: border-box; }

body {
    font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    background: var(--cinza-fundo);
    color: var(--texto);
    margin: 0;
    padding: 16px;
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

h1 { font-size: 1.4rem; margin-top: 0; }
.versao { font-size: 0.75rem; font-weight: 400; color: #9ca3af; vertical-align: middle; }
h2 { font-size: 1.1rem; border-bottom: 1px solid var(--cinza-borda); padding-bottom: 8px; }
h3 { font-size: 1rem; color: #374151; }
h4 { font-size: 0.95rem; color: #374151; margin: 0; }

.topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.link-sair {
    font-size: 0.85rem;
    color: #6b7280;
    text-decoration: none;
}
.link-sair:hover { text-decoration: underline; }

.tabs {
    display: flex;
    align-items: stretch;
    gap: 4px;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--cinza-borda);
    overflow-x: auto;          /* segurança em telas bem estreitas */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }

.tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 10px;
    background: none;
    border: none;
    font-size: 0.95rem;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    white-space: nowrap;       /* nomes curtos não quebram linha */
    flex-shrink: 0;
}
.tab-btn svg { flex-shrink: 0; }

/* "Gerar" é o uso do dia a dia: maior e mais forte que as de preparação */
.tab-btn.tab-principal {
    font-size: 1.05rem;
    padding-right: 14px;
}

/* risco separando a aba principal das de preparação */
.tab-sep {
    width: 1px;
    align-self: center;
    height: 20px;
    background: var(--cinza-borda);
    margin: 0 6px;
    flex-shrink: 0;
}

.tab-btn.active {
    color: var(--azul);
    border-bottom-color: var(--azul);
}
.tab-btn:hover:not(.active) { color: #374151; }

.tab-panel { display: none; }
.tab-panel.active { display: block; }

.hint {
    font-size: 0.9rem;
    color: #4b5563;
    margin-top: 0;
}

.hint-details {
    margin-bottom: 16px;
    border: 1px solid var(--cinza-borda);
    border-radius: 8px;
    background: #f9fafb;
}
.hint-details summary {
    padding: 10px 14px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--azul);
    cursor: pointer;
    list-style-position: inside;
}
.hint-details .hint {
    padding: 0 14px 12px;
    margin: 0;
}

.table-wrap { overflow-x: auto; }

form { display: flex; flex-direction: column; gap: 14px; max-width: 480px; }

/* As linhas de molde/peça têm 7 controles numa fileira só (setas, arrastar,
   seletor, quantidade, grupo, duplicar, remover). Com os 480px padrão dos
   formulários sobravam ~67px pra quantidade e pro grupo -- não cabia o número
   digitado. Só estes dois formulários ficam mais largos; no celular o limite
   nem chega a valer (a tela é mais estreita que isso). */
#form-gerar, #form-criar-molde { max-width: 640px; }

.file-drop {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--cinza-borda);
    border-radius: 8px;
    padding: 20px;
    cursor: pointer;
    text-align: center;
    font-size: 0.9rem;
    color: #4b5563;
}

.file-drop input[type="file"] { display: none; }

.checkbox-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: #374151;
    cursor: pointer;
}
.checkbox-row input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }

td.col-fillable { text-align: center; }

/* rótulo curto que só aparece junto do valor no celular (ver media query) --
   no computador o cabeçalho da tabela já explica cada coluna. */
.cel-label { display: none; }

/* Marcações (preenchimento / folga 1mm): no computador são só a caixinha,
   porque o cabeçalho da coluna já diz o que é. No celular viram pílula com o
   nome escrito (ver media query) -- lá não há cabeçalho pra explicar. */
.pilula { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.pilula .pilula-texto { display: none; }

/* Botão remover: palavra no computador, lixeira no celular. */
.btn-remover-molde .rem-icone { display: none; }
.btn-remover-molde .rem-texto { display: inline; }

td.col-arrasta {
    cursor: grab;
    color: #9ca3af;
    text-align: center;
    width: 28px;
    user-select: none;
    font-size: 1.1rem;
}
#tabela-moldes tbody tr { cursor: grab; }
#tabela-moldes tbody tr.arrastando { opacity: 0.4; }
#tabela-moldes tbody tr.drop-alvo td { border-top: 2px solid var(--azul); }

.btn-olho {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--cinza-borda);
    border-radius: 8px;
    background: #eff6ff;
    color: var(--azul);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.btn-olho:hover { background: #dbeafe; }
.btn-olho.oculto {
    background: #f3f4f6;
    color: #9ca3af;
    border-color: var(--cinza-borda);
}
.btn-olho.oculto:hover { background: #e5e7eb; }

#tabela-moldes tbody tr.molde-oculto td:not(.col-fillable):not(.col-arrasta),
#tabela-pecas tbody tr.molde-oculto td:not(.col-fillable):not(.col-arrasta) { opacity: 0.5; }

/* seleção em massa: botão "Selecionar" + barra com contagem/apagar/cancelar */
.barra-lote {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    flex-wrap: wrap;
}
.btn-selecionar-lote {
    background: none;
    border: 1px solid var(--cinza-borda);
    border-radius: 6px;
    color: var(--azul);
    cursor: pointer;
    padding: 7px 12px;
    font-size: 0.9rem;
}
.btn-selecionar-lote:hover { background: #eff6ff; }
.lote-selecao {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 0.9rem;
    color: #6b7280;
}
.btn-apagar-lote {
    background: #dc2626;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    padding: 7px 12px;
    font-size: 0.9rem;
}
.btn-apagar-lote:hover:not(:disabled) { background: #b91c1c; }
.btn-apagar-lote:disabled { background: #9ca3af; cursor: not-allowed; }
.btn-cancelar-lote {
    background: none;
    border: 1px solid var(--cinza-borda);
    border-radius: 6px;
    color: #6b7280;
    cursor: pointer;
    padding: 7px 12px;
    font-size: 0.9rem;
}
.btn-cancelar-lote:hover { background: #f3f4f6; }
.chk-selecao-lote { width: 18px; height: 18px; cursor: pointer; }

.input-nome-peca {
    width: 100%;
    min-width: 90px;
    padding: 6px 8px;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 0.9rem;
    font-family: inherit;
    color: inherit;
    background: transparent;
}
.input-nome-peca:hover { border-color: var(--cinza-borda); }
.input-nome-peca:focus {
    border-color: var(--azul);
    background: #fff;
    outline: none;
}
.input-nome-peca:disabled { opacity: 0.6; }

.campos-bloco {
    display: flex;
    gap: 12px;
}
.campos-bloco .campo { flex: 1; }
.campos-bloco input[type="number"] { width: 100%; }

.campo { display: flex; flex-direction: column; gap: 4px; }
.campo label { font-size: 0.85rem; font-weight: 600; color: #374151; }
.campo input[type="text"], .campo input[type="number"] {
    padding: 10px;
    border: 1px solid var(--cinza-borda);
    border-radius: 6px;
    font-size: 1rem;
}

.btn-primary, .btn-secondary {
    padding: 12px 16px;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}

.btn-primary {
    background: var(--azul);
    color: #fff;
    max-width: 220px;
}
.btn-primary:hover { background: var(--azul-escuro); }
.btn-primary:disabled { background: #9ca3af; cursor: not-allowed; }

.btn-secondary {
    background: var(--verde);
    color: #fff;
}
.btn-secondary:hover { opacity: 0.9; }
/* botão da linha de acabamento: âmbar, pra combinar com o destaque da própria
   linha (.linha-acabamento) -- diferencia de "+ Adicionar molde" (verde). */
.btn-secondary-alt { background: #b45309; }

.botoes-add-linha { display: flex; gap: 10px; flex-wrap: wrap; }

.status {
    margin-top: 12px;
    font-size: 0.9rem;
}
.status.error { color: #dc2626; }
.status.success { color: var(--verde); }

.resultado { margin-top: 20px; }
.hidden { display: none; }

.linha-gerar {
    display: flex;
    gap: 8px;
    align-items: center;
}
.linha-mover {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.linha-gerar.arrastando { opacity: 0.4; }
.linha-gerar.drop-alvo { outline: 2px dashed var(--azul); outline-offset: 2px; border-radius: 6px; }
.btn-mover {
    border: 1px solid var(--cinza-borda);
    background: #f9fafb;
    color: #6b7280;
    border-radius: 5px;
    width: 26px;
    height: 18px;
    padding: 0;
    font-size: 0.7rem;
    line-height: 1;
    cursor: pointer;
}
.btn-mover:hover:not(:disabled) { color: var(--azul); border-color: var(--azul); }
.btn-mover:disabled { opacity: 0.35; cursor: default; }

.linha-arrastar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 44px;
    color: #9ca3af;
    cursor: grab;
    border-radius: 6px;
    flex-shrink: 0;
}
.linha-arrastar:hover { color: var(--azul); background: #eff6ff; }
.linha-arrastar:active { cursor: grabbing; }
.linha-gerar select {
    flex: 2;
    padding: 10px;
    border: 1px solid var(--cinza-borda);
    border-radius: 6px;
    font-size: 1rem;
}

/* Combo de molde/peça: campo de texto que FILTRA a lista enquanto se digita
   (antes era um <select> puro, onde só dava pra procurar na mão numa lista
   longa). O clique/toque continua abrindo a lista inteira. A classe de valor
   (.linha-molde/.linha-peca) fica no INPUT, pra todo o JS que lê `.value`
   continuar funcionando igual ao <select> de antes. */
.combo { position: relative; flex: 2; min-width: 150px; }
.combo-input {
    width: 100%;
    padding: 10px 28px 10px 10px;
    border: 1px solid var(--cinza-borda);
    border-radius: 6px;
    font-size: 1rem;
}
/* setinha, pra continuar parecendo um seletor */
.combo::after {
    content: "";
    position: absolute;
    right: 11px;
    top: 50%;
    width: 7px;
    height: 7px;
    border-right: 2px solid #6b7280;
    border-bottom: 2px solid #6b7280;
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
}
.combo-lista {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    z-index: 30;
    max-height: 260px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--cinza-borda);
    border-radius: 6px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}
.combo-item {
    padding: 11px 12px;
    cursor: pointer;
    font-size: 1rem;
    border-bottom: 1px solid #f3f4f6;
}
.combo-item:last-child { border-bottom: none; }
.combo-item:hover, .combo-item.ativo { background: #eff6ff; color: var(--azul); }
.combo-item-modo { color: #6b7280; font-size: 0.85rem; }
.combo-item:hover .combo-item-modo, .combo-item.ativo .combo-item-modo { color: var(--azul); }
.combo-vazio { padding: 11px 12px; color: #6b7280; font-size: 0.9rem; }
.linha-gerar input[type="number"] {
    flex: 1;
    padding: 10px;
    border: 1px solid var(--cinza-borda);
    border-radius: 6px;
    font-size: 1rem;
    min-width: 0;
}
/* Campo de grupo por linha: menor que o de quantidade (é opcional). Precisa da
   especificidade "input.classe" pra vencer o ".linha-gerar input[type=number]"
   acima (2 classes + atributo é MAIS específico que 2 classes) -- escrito só
   com ".linha-gerar .linha-grupo", como estava, a regra nunca valia e os dois
   campos ficavam do mesmo tamanho. É a mesma pegadinha já anotada no bloco do
   celular lá embaixo. */
.linha-gerar input.linha-grupo { flex: 0 0 96px; }
/* piso de largura pros campos numéricos: mesmo em janela apertada eles nunca
   encolhem a ponto de não caber o que se digita (o `min-width: 0` da regra
   genérica deixava chegar a ~67px) */
.linha-gerar input.linha-qtd,
.linha-gerar input.linha-pecas { min-width: 120px; }

/* Linha de grupo da viga: lê como uma frase -- "[3] andares de [200] mm cada".
   Sem esses rótulos, os dois campos preenchidos viram só dois números soltos e
   não se sabe qual é qual (foi a reclamação que gerou as pílulas na v1.14).
   A frase é um flex container próprio, então no celular ela desce inteira pra
   segunda faixa em vez de quebrar no meio. */
.viga-frase {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
}
.viga-frase .viga-rotulo {
    color: #6b7280;
    font-size: 0.9rem;
    white-space: nowrap;
}
.linha-gerar input.viga-qtd { flex: 0 0 90px; }
.linha-gerar input.viga-altura { flex: 0 0 110px; }

/* Linha de acabamento (aba Gerar): mesma ideia de frase da viga acima --
   "Linha de acabamento — até X = [1040] mm (Y = 0)". Fundo âmbar bem sutil só
   pra destacar visualmente que essa linha NÃO é um molde no meio da lista. */
.linha-acabamento {
    background: #fffbeb;
    border: 1px dashed #f3d29a;
    border-radius: 8px;
    padding: 6px 8px;
}
.acabamento-frase {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
}
.acabamento-frase .acabamento-rotulo {
    color: #92702c;
    font-size: 0.9rem;
    white-space: nowrap;
}
.linha-gerar input.linha-acabamento-x { flex: 0 0 90px; }
.btn-remover-linha, .btn-remover-molde, .btn-duplicar {
    background: none;
    border: 1px solid var(--cinza-borda);
    border-radius: 6px;
    color: #6b7280;
    cursor: pointer;
    padding: 8px 10px;
}
.btn-remover-linha:hover, .btn-remover-molde:hover { color: #dc2626; border-color: #dc2626; }
/* duplicar é ação construtiva: fica azul no hover, não vermelho como o remover */
.btn-duplicar {
    display: inline-flex;
    align-items: center;
    padding: 8px 9px;
    flex-shrink: 0;
}
.btn-duplicar:hover { color: var(--azul); border-color: var(--azul); }

.molde-resultado {
    border: 1px solid var(--cinza-borda);
    border-radius: 10px;
    padding: 16px;
    margin-top: 16px;
}
.molde-resumo-lista, .molde-avisos-lista {
    font-size: 0.9rem;
    padding-left: 18px;
    line-height: 1.6;
    margin: 8px 0;
}
.molde-avisos-lista li { color: #c65; }
.molde-avisos-lista:empty { display: none; }

.bloco-card {
    border: 1px solid var(--cinza-borda);
    border-radius: 10px;
    margin-top: 16px;
    overflow: hidden;
}

.bloco-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: #f9fafb;
    border-bottom: 1px solid var(--cinza-borda);
}

.bloco-conteudo {
    padding: 8px 14px;
    font-size: 0.9rem;
    color: #374151;
    background: #fff;
    border-bottom: 1px solid var(--cinza-borda);
}

.bloco-aviso {
    padding: 8px 14px;
    font-size: 0.85rem;
    color: #c65;
    background: #fff7ed;
    border-bottom: 1px solid var(--cinza-borda);
}

.bloco-preview {
    width: 100%;
    height: 640px;
    border: none;
    display: block;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}
th, td {
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid var(--cinza-borda);
}
th { background: #f9fafb; }

@media (max-width: 640px) {
    body { padding: 8px; }
    .container { padding: 14px; }
    form { max-width: none; }
    .btn-primary { max-width: none; width: 100%; }
    #btn-add-linha { width: 100%; align-self: stretch !important; }
    /* preview mais alto no celular: o desenho fica em cima (layout empilhado
       do preview.py) e precisa de espaço vertical de verdade pra enxergar */
    .bloco-preview { height: min(72vh, 560px); }
    .bloco-topo { flex-wrap: wrap; gap: 8px; }
    /* Abas no celular: com 6 delas não cabe mais numa fileira só. Em vez de
       rolar de lado (que escondia as abas do fim -- e justamente as novas),
       quebram em DUAS fileiras, com todas visíveis de uma vez. Os riscos
       separadores saem: numa grade de duas fileiras eles caem em lugar
       aleatório e só sujam. */
    .tabs {
        gap: 0;
        flex-wrap: wrap;
        overflow-x: visible;
        justify-content: center;
    }
    .tab-btn { padding: 10px 7px; font-size: 0.88rem; gap: 4px; }
    .tab-btn.tab-principal { font-size: 1rem; padding-right: 8px; }
    .tab-sep { display: none; }

    /* Linhas de "Gerar" e "Criar molde": no celular o nome/peça e a
       quantidade não cabem lado a lado sem espremer. Empilha em 3 faixas:
       (1) setas + arrastar + remover, compactos, no topo;
       (2) o seletor (molde/peça), ocupando a linha inteira;
       (3) quantidade (+ grupo, na aba Criar), do mesmo tamanho do seletor. */
    .linha-gerar { flex-wrap: wrap; row-gap: 8px; }
    .linha-gerar .linha-mover { order: 1; }
    .linha-gerar .linha-arrastar { order: 2; }
    /* duplicar + remover juntos no canto direito da 1ª faixa: os DOIS ficam no
       order 3. Não dá pra mandar o remover pro order 4 -- esse já é o do
       seletor, que ocupa 100% da largura, e o botão quebraria pra outra faixa.
       Só o PRIMEIRO do par leva o margin-left:auto (com auto nos dois, o espaço
       livre se divide entre eles e eles se separam). O `+` deixa a linha da
       viga de fora, que não tem duplicar e precisa do auto no próprio ✕. */
    .linha-gerar .btn-duplicar { order: 3; margin-left: auto; }
    .linha-gerar .btn-remover-linha { order: 3; margin-left: auto; }
    .linha-gerar .btn-duplicar + .btn-remover-linha { margin-left: 0; }
    /* o item flex agora é o .combo (wrapper), não mais o select em si */
    .linha-gerar .combo { order: 4; flex-basis: 100%; }
    /* especificidade "input.classe" de propósito: precisa vencer a regra
       genérica ".linha-gerar input[type=number] { flex:1; min-width:0; }" —
       com só ".linha-gerar .linha-grupo" (2 classes) ela perdia pro seletor
       genérico (2 classes + atributo = mais específico) e os dois campos
       ficavam do mesmo tamanho em vez do grupo ficar estreito e fixo. */
    .linha-gerar input.linha-pecas { order: 5; flex: 1 1 100%; }
    .linha-gerar input.linha-qtd { order: 5; flex: 1 1 auto; min-width: 90px; }
    .linha-gerar input.linha-grupo { order: 6; flex: 0 0 84px; min-width: 0; }
    /* linha de grupo da viga: setas + ✕ na 1ª faixa, e a frase
       "[3] andares de [200] mm cada" inteira na 2ª (ela é um flex container
       próprio, então desce junta em vez de quebrar no meio). Sem o `order`
       explícito ela cairia ANTES das setas (order padrão 0 < 1). */
    .linha-viga .viga-frase { order: 4; flex: 1 1 100%; column-gap: 6px; }
    .linha-gerar input.viga-qtd { flex: 1 1 68px; min-width: 0; }
    .linha-gerar input.viga-altura { flex: 1 1 78px; min-width: 0; }
    /* mesma ideia pra linha de acabamento: frase inteira na 2ª faixa */
    .linha-acabamento .acabamento-frase { order: 4; flex: 1 1 100%; column-gap: 6px; }

    /* Bibliotecas de moldes e peças no celular: a tabela (8 e 6 colunas) não
       cabe na largura, e quebrá-la em 2 fileiras de células soltas ficou
       confuso -- as caixinhas apareciam sem rótulo nenhum. Cada registro vira
       um CARTÃO com hierarquia: nome grande em cima (com arrastar e as ações
       nos cantos), medidas discretas embaixo, e as marcações como pílulas COM
       O NOME ESCRITO (verde = ligada). No computador nada disso vale: a
       tabela em colunas continua, que é boa pra comparar vários de uma vez. */
    #tabela-moldes thead, #tabela-pecas thead { display: none; }
    .cel-label { display: inline; font-weight: 600; color: #6b7280; }

    #tabela-moldes tbody tr, #tabela-pecas tbody tr {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 4px 8px;
        padding: 12px;
        margin-bottom: 10px;
        border: 1px solid var(--cinza-borda);
        border-radius: 10px;
        background: #fff;
    }
    #tabela-moldes tbody td, #tabela-pecas tbody td {
        border-bottom: none;
        padding: 0;
        min-width: 0;
    }

    /* fileira 1: arrastar · nome (grande) · ações */
    #tabela-moldes tbody .col-arrasta, #tabela-pecas tbody .col-arrasta {
        order: 1; grid-column: 1; grid-row: 1;
    }
    #tabela-moldes tbody .col-nome, #tabela-pecas tbody .col-nome {
        order: 2; grid-column: 2; grid-row: 1;
    }
    #tabela-moldes tbody .col-nome .input-nome-peca,
    #tabela-pecas tbody .col-nome .input-nome-peca {
        font-size: 1.05rem;
        font-weight: 600;
        padding: 4px 6px;
    }
    /* olho e lixeira juntos, à direita, sem competir com o nome */
    #tabela-moldes tbody .col-check-c, #tabela-pecas tbody .col-check-c {
        order: 3; grid-column: 3; grid-row: 1;
    }
    #tabela-moldes tbody .col-remover, #tabela-pecas tbody .col-remover {
        order: 4; grid-column: 3; grid-row: 1; justify-self: end;
    }
    #tabela-moldes tbody .col-check-c, #tabela-pecas tbody .col-check-c {
        justify-self: end; margin-right: 42px;
    }

    /* fileira 2: medidas, discretas, alinhadas com o nome */
    #tabela-moldes tbody .col-pecas, #tabela-moldes tbody .col-altura,
    #tabela-pecas tbody .col-largura, #tabela-pecas tbody .col-altura {
        grid-column: 2 / -1; grid-row: auto;
        font-size: 0.85rem; color: #6b7280;
        display: inline-block; width: auto;
    }
    #tabela-moldes tbody .col-pecas { order: 5; grid-column: 2; grid-row: 2; }
    #tabela-moldes tbody .col-altura { order: 6; grid-column: 3; grid-row: 2; justify-self: start; }
    #tabela-pecas tbody .col-largura { order: 5; grid-column: 2; grid-row: 2; }
    #tabela-pecas tbody .col-altura { order: 6; grid-column: 3; grid-row: 2; justify-self: start; }

    /* fileira 3: marcações rotuladas (moldes) / tipo (peças) -- as duas
       pílulas dividem a mesma fileira pra não esticar o cartão */
    #tabela-moldes tbody .col-check-a { order: 7; grid-column: 2; grid-row: 3; }
    #tabela-moldes tbody .col-check-b { order: 8; grid-column: 3; grid-row: 3; justify-self: start; }
    #tabela-pecas tbody .col-tipo { order: 7; grid-column: 2 / -1; grid-row: 3; }
    #tabela-pecas tbody .col-tipo select { width: 100%; margin-top: 4px; }

    /* caixinha vira pílula com o nome escrito */
    #tabela-moldes tbody .pilula {
        margin-top: 6px;
        border: 1px solid var(--cinza-borda);
        border-radius: 20px;
        padding: 6px 14px;
        font-size: 0.85rem;
        color: #6b7280;
        background: #fff;
    }
    #tabela-moldes tbody .pilula .pilula-texto { display: inline; }
    #tabela-moldes tbody .pilula.ativa {
        border-color: var(--verde);
        background: #dcfce7;
        color: #15803d;
        font-weight: 600;
    }
    #tabela-moldes tbody .col-fillable { text-align: left; }

    /* remover vira lixeira compacta */
    .btn-remover-molde .rem-texto { display: none; }
    .btn-remover-molde .rem-icone { display: inline-flex; }
    .btn-remover-molde { padding: 7px 9px; line-height: 0; }
}