/* START OF FILE style.css */
/* Arquivo: style.css */
/* Descrição: Folha de estilos para o Otimizador de Plano de Corte 2D - Pro Edition */

/* == Reset Básico e Configurações Gerais == */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: 'Roboto', sans-serif;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); /* Fundo gradiente escuro */
    color: #e0e0ff; /* Cor de texto clara padrão */
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    font-size: 15px; /* Tamanho de fonte base */
}

/* == Scrollbar Customizada (WebKit) == */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: #282a36; /* Fundo da trilha da scrollbar (Dracula Background) */
    border-radius: 5px;
}
::-webkit-scrollbar-thumb {
    background-color: #6272a4; /* Cor principal da scrollbar (Dracula Comment) */
    border-radius: 5px;
    border: 2px solid #282a36; /* Borda para parecer mais fina */
}
::-webkit-scrollbar-thumb:hover {
    background-color: #bd93f9; /* Cor roxa no hover (Dracula Purple) */
}

/* == Container Principal e Layout == */
.main-content {
    flex: 1; /* Faz o conteúdo principal ocupar o espaço restante */
    padding-top: 20px;
    padding-bottom: 80px; /* Espaço para o footer não sobrepor */
}

.container {
    max-width: 1600px; /* Largura máxima aumentada para acomodar melhor o layout */
    margin: 20px auto; /* Centraliza na página */
    padding: 25px; /* Espaçamento interno */
    background: rgba(40, 42, 54, 0.92); /* Cor de fundo (Dracula Background com transparência) */
    border-radius: 12px; /* Bordas arredondadas */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4); /* Sombra para profundidade */
    border: 1px solid #44475a; /* Borda sutil (Dracula Selection/Comment) */
}

.layout-grid {
    display: grid;
    grid-template-columns: minmax(400px, 1fr) 2fr; /* Grid de duas colunas: Entrada (mais estreita) e Resultado (mais larga) */
    gap: 25px; /* Espaçamento entre as colunas */
}

/* == Cabeçalho Principal == */
.main-header {
    display: flex;
    justify-content: space-between; /* Título à esquerda, status à direita */
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 1px solid #44475a; /* Linha divisória */
}

h1 {
    font-family: 'Orbitron', sans-serif; /* Fonte futurista/tech */
    font-size: 2.2rem;
    font-weight: 700;
    color: #f8f8f2; /* Cor do texto (Dracula Foreground) */
    display: inline-flex;
    align-items: center;
    gap: 10px; /* Espaço entre ícone e texto */
    text-shadow: 0 0 5px rgba(80, 250, 123, 0.5); /* Sombra verde sutil (Dracula Green) */
}

h1 .fa-scissors {
    color: #50fa7b; /* Ícone de tesoura verde (Dracula Green) */
}

h1 .title-highlight {
    color: #50fa7b; /* Destaque verde */
    font-weight: 800;
}

.pro-edition {
    font-size: 0.6em;
    color: #bd93f9; /* Cor roxa (Dracula Purple) */
    vertical-align: super; /* Alinhado acima */
    margin-left: 5px;
    font-weight: 500;
}

/* Status de Salvamento */
.save-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border-radius: 15px; /* Formato de pílula */
    font-size: 0.9em;
    font-weight: 500;
    transition: all 0.3s ease; /* Transição suave */
}

.save-status i {
    font-size: 1em;
}

.save-status.unsaved {
    background-color: rgba(255, 184, 108, 0.15); /* Fundo laranja transparente */
    color: #ffb86c; /* Cor laranja (Dracula Orange) */
    border: 1px solid #ffb86c;
}
.save-status.unsaved i { color: #ffb86c; }

.save-status.saved {
    background-color: rgba(139, 233, 253, 0.15); /* Fundo ciano transparente */
    color: #8be9fd; /* Cor ciano (Dracula Cyan) */
    border: 1px solid #8be9fd;
}
.save-status.saved i { color: #8be9fd; }

/* == Cards == */
.card {
    background: rgba(68, 71, 90, 0.75); /* Fundo do card (Dracula Current Line com transparência) */
    padding: 20px;
    margin-bottom: 20px; /* Espaçamento entre cards */
    border-radius: 8px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.3), 0 2px 5px rgba(0,0,0,0.2); /* Sombra interna e externa */
    border: 1px solid rgba(189, 147, 249, 0.1); /* Borda roxa muito sutil */
    transition: all 0.3s ease; /* Transição para hover */
}

.card:hover {
     border-color: rgba(189, 147, 249, 0.3); /* Highlight roxo mais visível no hover */
     box-shadow: inset 0 1px 3px rgba(0,0,0,0.3), 0 4px 10px rgba(0,0,0,0.25); /* Sombra mais pronunciada */
}

h2 {
    font-family: 'Roboto', sans-serif;
    font-size: 1.4rem;
    font-weight: 500;
    color: #f8f8f2; /* Cor do título (Dracula Foreground) */
    margin-bottom: 18px;
    padding-bottom: 8px;
    border-bottom: 1px solid #6272a4; /* Linha divisória abaixo do título */
    display: flex;
    align-items: center;
    gap: 10px; /* Espaço entre ícone e texto do título */
}

/* Cores específicas dos ícones de Título H2 */
h2 .icon-purple { color: #bd93f9; } /* roxo */
h2 .icon-cyan   { color: #8be9fd; } /* ciano */
h2 .icon-pink   { color: #ff79c6; } /* rosa */
h2 .icon-yellow { color: #f1fa8c; } /* amarelo */
h2 .icon-secondary { color: #6272a4; } /* cinza/comentário */
h2 .icon-green  { color: #50fa7b; } /* verde */
/* Icones para mensagens de erro/info (se usar <i> no JS) */
.icon-error { color: #ff5555; } /* Vermelho */
.icon-warn { color: #ffb86c; } /* Laranja */
.icon-unplaced { color: #f1fa8c; } /* Amarelo */

/* == Formulários == */
.form-row {
    display: flex;
    flex-wrap: wrap; /* Permite quebra de linha em telas menores */
    gap: 15px; /* Espaçamento entre grupos de formulário */
    margin-bottom: 15px;
}

.form-group {
    flex: 1; /* Faz grupos ocuparem espaço disponível igualmente */
    min-width: 120px; /* Largura mínima antes de quebrar linha */
}

.form-group.quantity-group {
    flex: 0 1 80px; /* Define uma base e impede crescimento excessivo para campo de quantidade */
    min-width: 70px;
}

label {
    display: block; /* Label em linha própria */
    margin-bottom: 6px;
    font-weight: 500;
    color: #bd93f9; /* Cor roxa para labels */
    font-size: 0.9em;
}

input[type="text"],
input[type="number"],
select { /* Adicionado Select para aplicar estilo padrão */
    width: 100%; /* Ocupa toda largura disponível */
    padding: 10px 12px;
    background-color: #282a36; /* Fundo do input (Dracula Background) */
    border: 1px solid #6272a4; /* Borda (Dracula Comment) */
    border-radius: 5px;
    color: #f8f8f2; /* Cor do texto digitado */
    font-size: 1rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    outline: none; /* Remove outline padrão */
}

input[type="checkbox"] {
    width: auto; /* Checkbox não precisa de largura total */
    margin-right: 8px;
    vertical-align: middle; /* Alinha com o texto */
    cursor: pointer;
    accent-color: #bd93f9; /* Cor do check (Dracula Purple) - para navegadores modernos */
}

/* Estilo do label que envolve o checkbox */
.form-group > label[for="allowRotation"] {
     color: #e0e0ff; /* Cor normal para o texto do checkbox */
     display: flex;
     align-items: center;
     cursor: pointer; /* Cursor de mão */
}

/* Efeito de foco nos inputs e selects */
input[type="text"]:focus,
input[type="number"]:focus,
select:focus {
    border-color: #ff79c6; /* Borda rosa no foco (Dracula Pink) */
    box-shadow: 0 0 0 2px rgba(255, 121, 198, 0.3); /* Glow rosa suave */
}

/* Remove setas de incremento/decremento no input number */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] {
  -moz-appearance: textfield; /* Para Firefox */
}

/* Estilos específicos para Select desabilitado */
select:disabled {
    background-color: #44475a !important; /* Fundo mais escuro */
    color: #6272a4 !important; /* Texto apagado */
    cursor: not-allowed !important;
    opacity: 0.7 !important;
}

/* == Entrada de Peça Única == */
.single-piece-input-area {
    display: flex; /* Alinha campos lado a lado */
    align-items: flex-end; /* Alinha itens na base */
    gap: 10px; /* Espaçamento menor */
    flex-wrap: wrap; /* Permite quebra em telas menores */
}

.add-piece-btn {
    padding: 9px 15px !important; /* Ajusta padding para altura consistente (importante sobrepõe .control-button) */
    flex-shrink: 0; /* Impede que o botão encolha */
    height: 40px; /* Altura fixa igual à dos inputs */
    background-color: #bd93f9; /* Roxo para Adicionar */
    color: #282a36; /* Texto escuro para bom contraste */
    font-weight: 500; /* Destaque */
}
.add-piece-btn:hover { background-color: #caa9fa; } /* Roxo mais claro no hover */


/* == Lista de Peças == */
.pieces-header {
    display: flex;
    justify-content: space-between; /* Título à esquerda, botão limpar à direita */
    align-items: center;
    margin-bottom: 10px; /* Espaço antes da lista */
}
.pieces-header h2 {
    margin-bottom: 0; /* Remove margem padrão do h2 */
    border-bottom: none; /* Remove borda padrão do h2 */
}

.small-btn {
    padding: 5px 10px !important; /* Botão menor */
    font-size: 0.8em !important;
}
#clearAllPiecesBtn {
    background-color: #ff5555; /* Vermelho para ação destrutiva (Dracula Red) */
    color: #f8f8f2;
}
#clearAllPiecesBtn:hover { background-color: #ff7b72; } /* Vermelho mais claro no hover */
#clearAllPiecesBtn:disabled { background-color: #6272a4; color: #44475a; } /* Estilo desabilitado */

.piece-display-list {
    max-height: 300px; /* Altura máxima, com scroll se necessário */
    overflow-y: auto; /* Habilita scroll vertical */
    background-color: rgba(40, 42, 54, 0.7); /* Fundo levemente diferente do card */
    border: 1px dashed #6272a4; /* Borda tracejada para área de lista */
    border-radius: 5px;
    padding: 10px; /* Espaçamento interno */
}

.piece-display-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #44475a; /* Fundo do item (Dracula Selection) */
    padding: 8px 12px;
    margin-bottom: 8px; /* Espaço entre itens */
    border-radius: 4px;
    border-left: 4px solid #8be9fd; /* Barra lateral Ciano para destaque visual */
    font-size: 0.95em;
    transition: background-color 0.2s ease; /* Suaviza hover */
}

.piece-display-item:hover {
    background-color: #6272a4; /* Fundo mais claro no hover */
}

.piece-info span { margin-right: 15px; } /* Espaço entre informações da peça */
.piece-info .dim { color: #f1fa8c; font-weight: 500;} /* Amarelo para dimensões (Dracula Yellow) */
.piece-info .qty { color: #ffb86c; } /* Laranja para quantidade (Dracula Orange) */
.piece-info .name { color: #e0e0ff; font-style: italic; font-size: 0.9em; } /* Cor normal para nome/descrição */

.remove-piece-btn {
    background: none; /* Sem fundo */
    border: none; /* Sem borda */
    color: #ff5555; /* Vermelho para remover (Dracula Red) */
    font-size: 1.2em; /* Ícone 'x' ligeiramente maior */
    cursor: pointer;
    transition: color 0.2s ease, transform 0.2s ease; /* Transição de cor e escala */
    padding: 2px 5px;
    line-height: 1;
}
.remove-piece-btn:hover {
    color: #ff7b72; /* Vermelho mais claro */
    transform: scale(1.2); /* Aumenta um pouco no hover */
}

/* == Botões de Ação == */
.button-group {
    display: flex;
    flex-wrap: wrap; /* Permite quebra */
    gap: 10px; /* Espaçamento entre botões */
    margin-bottom: 20px;
}
.button-group.actions-primary {
    gap: 15px; /* Mais espaço entre botões primários (Otimizar, Limpar) */
}

/* Subtítulo para seções de botões */
.section-subtitle {
    font-size: 0.95em;
    font-weight: 500;
    color: #8be9fd; /* Ciano */
    margin-top: 15px; /* Espaço acima */
    margin-bottom: 8px; /* Espaço abaixo */
    padding-bottom: 3px; /* Afasta da linha */
    border-bottom: 1px dotted #6272a4; /* Linha pontilhada */
    display: block; /* Garante que ocupe a linha toda */
}

/* Estilo Base dos Botões */
.control-button {
    background-color: #6272a4; /* Cor base secundária (Dracula Comment) */
    color: #f8f8f2; /* Texto claro */
    border: none;
    border-radius: 5px;
    padding: 10px 18px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex; /* Permite alinhar ícone e texto */
    align-items: center;
    justify-content: center;
    gap: 8px; /* Espaço entre ícone e texto */
    text-align: center;
    transition: all 0.2s ease-out; /* Transição suave para interações */
    box-shadow: 0 2px 4px rgba(0,0,0,0.2); /* Sombra sutil */
    flex-grow: 0; /* Não esticar por padrão (será ajustado onde necessário) */
    flex-shrink: 0;
}

.control-button i {
    line-height: 1; /* Alinha melhor o ícone */
}

/* Estilo Hover Base */
.control-button:not(:disabled):hover {
    transform: translateY(-2px); /* Leve elevação no hover */
    box-shadow: 0 4px 8px rgba(0,0,0,0.3); /* Sombra mais pronunciada */
    filter: brightness(1.15); /* Leve brilho */
}

/* Estilo Active (Clicado) Base */
.control-button:not(:disabled):active {
    transform: translateY(0px); /* Retorna à posição original */
    box-shadow: 0 1px 2px rgba(0,0,0,0.2); /* Sombra menor */
    filter: brightness(0.95); /* Leve escurecida */
}

/* Estado Desabilitado */
.control-button:disabled {
    background-color: #44475a !important; /* Fundo mais escuro (Sobrescreve outras cores com !important) */
    color: #6272a4 !important; /* Texto apagado */
    cursor: not-allowed; /* Cursor indicando bloqueio */
    box-shadow: none;
    transform: none;
    filter: none;
}
.control-button:disabled i {
    color: #6272a4 !important; /* Ícone apagado */
}

/* == Cores Específicas dos Botões == */
.control-button.optimize { background-color: #50fa7b; color: #282a36; } /* Verde (Otimizar) */
.control-button.clear { background-color: #ffb86c; color: #282a36; } /* Laranja (Limpar) */
.control-button.secondary { background-color: #6272a4; color: #f8f8f2; } /* Cinza (Botões genéricos/secundários) */
.control-button.save { background-color: #8be9fd; color: #282a36; } /* Ciano (Exportar/Salvar Rápido) */
.control-button.load { background-color: #bd93f9; color: #f8f8f2; } /* Roxo (Importar) */
.control-button.excel { background-color: #1D8B45; color: #f8f8f2; } /* Verde Excel */
.control-button.save-local { background-color: #8be9fd; color: #282a36;} /* Ciano (Salvar Rápido) */
.control-button.load-local { background-color: #ffb86c; color: #282a36;} /* Laranja (Carregar Rápido) */
.control-button.print { background-color: #f1fa8c; color: #282a36; } /* Amarelo (Imprimir / Lista PDF / Plano PDF / Etiquetas) */

/* Tamanhos de Botões */
.control-button.large-btn {
    padding: 12px 25px;
    font-size: 1.1rem;
    flex-grow: 1; /* Faz os botões primários ocuparem o espaço no flex container */
}

/* == Otimização Layout Botões Secundários/Saída == */

/* --- Grupo Importar/Exportar/Salvar (Grid) --- */
.button-group.actions-secondary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
    align-items: stretch; /* Garante que os botões preencham a altura da célula */
}
.button-group.actions-secondary .control-button,
.button-group.actions-secondary label.control-button { /* Inclui labels que parecem botões */
    width: 100%; /* Força a ocupar a largura da coluna do grid */
    height: 100%; /* Força a ocupar a altura da linha do grid */
    margin: 0; /* Remove margens que possam interferir */
    padding: 12px 15px; /* Mantém padding */
    font-size: 0.9rem; /* Mantém fonte */
    /* Alinha texto/ícone no centro do botão expandido */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* --- Grupo Gerar Saídas (Flexbox) --- */
.button-group.actions-output {
    display: flex;
    flex-wrap: wrap;
    gap: 12px; /* Espaçamento */
    margin-bottom: 20px;
    align-items: stretch; /* Alinha os botões na altura */
}
.button-group.actions-output .control-button {
    flex-basis: 0; /* Base flexível */
    flex-grow: 1; /* Permite que botões cresçam para preencher o espaço */
    flex-shrink: 1;
    padding: 12px 15px;
    font-size: 0.9rem;
    min-width: 130px; /* Largura mínima para leitura confortável */
    /* Garante centralização interna */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.button-group.actions-output .control-button:disabled {
    flex-grow: 0;         /* Impede o crescimento do desabilitado */
    min-width: 130px;     /* Mantém largura mínima */
    opacity: 0.7;
    pointer-events: none;
    /* Herda estilo visual de desabilitado padrão */
}

/* --- Responsividade para Botões --- */
@media (max-width: 420px) {
    .button-group.actions-secondary {
        grid-template-columns: 1fr; /* Coluna única no grid */
    }
     .button-group.actions-output .control-button {
         flex-basis: 100%; /* Botões de saída ocupam largura total */
      }
}
/* == FIM Otimização Layout Botões == */

/* Estilos para a Seleção de Chapa para Etiquetas (adicionado aqui) */
.label-print-options {
    margin-top: 15px; /* Espaço acima da seção */
    padding-top: 12px; /* Espaço acima dentro da seção */
    border-top: 1px dashed #6272a4; /* Linha separadora sutil */
}

/* Estilos do select herdados de select geral, mas garantindo: */
#labelSheetSelector {
    margin-top: 5px;
}

/* Garante que o span de erro para etiquetas siga o padrão */
#labelPrintError {
    margin-top: 8px;
}

/* == Placeholder Text (Lista de Peças e Resultados) == */
.placeholder-text {
    color: #6272a4; /* Cinza/Comentário */
    font-style: italic;
    text-align: center;
    padding: 20px;
    font-size: 0.9em;
}

/* == Área de Resultado do Corte == */
.results-card h2 { margin-bottom: 10px; } /* Menos espaço abaixo do título */

/* --- CSS ADICIONAL para Elementos de Impressão --- */
/* Esconde containers de impressão (Plano, Lista, Etiquetas) na visualização normal */
#printImageContainer,
#printPieceListContainer,
#printLabelsContainer {
    display: none; /* Escondido por padrão */
    width: 100%; /* Garante largura se visível */
}

/* Caixa de informações de Desperdício/Estatísticas */
.waste-info-box {
    background-color: rgba(40, 42, 54, 0.9); /* Fundo opaco */
    border: 1px solid #6272a4;
    padding: 12px 15px;
    margin-bottom: 15px;
    border-radius: 5px;
    font-size: 0.95em;
    border-left: 5px solid #50fa7b; /* Barra verde à esquerda */
    line-height: 1.4; /* Melhor espaçamento vertical do texto */
}
.waste-info-box strong { color: #f1fa8c; } /* Amarelo para destaques */
/* Classes para colorir a % de aproveitamento/desperdício */
.waste-info-box .value-ok { color: #50fa7b; font-weight: bold; } /* Verde para bom aproveitamento */
.waste-info-box .value-warn { color: #ffb86c; font-weight: bold; } /* Laranja para aproveitamento médio */
.waste-info-box .value-bad { color: #ff5555; font-weight: bold; } /* Vermelho para alto desperdício */

/* Área de visualização do plano de corte (NA TELA) */
.cut-plan-output-area {
    display: flex; /* Coloca as chapas lado a lado */
    flex-wrap: wrap; /* Permite quebra de linha */
    gap: 20px; /* Espaço entre as visualizações das chapas */
    padding: 10px 0;
    min-height: 200px; /* Altura mínima */
    position: relative; /* Para referência das peças posicionadas absolutamente */
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.1); /* Fundo sutil para a área */
    padding: 15px;
    justify-content: center; /* Centraliza as chapas se houver espaço extra */
}

/* Container para cada chapa individual (rótulo + visualização) NA TELA */
.sheet-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centraliza rótulo e chapa */
    margin-bottom: 15px; /* Espaço abaixo de cada chapa */
}

/* Rótulo acima de cada chapa (ex: "Chapa 1") NA TELA */
.sheet-label {
    font-size: 0.9em;
    font-weight: 500;
    color: #8be9fd; /* Ciano para o rótulo */
    margin-bottom: 5px;
    background: #282a36; /* Fundo escuro para destaque */
    padding: 2px 8px;
    border-radius: 3px;
}

/* A área visual da chapa NA TELA */
.sheet-container {
    border: 2px solid #8be9fd; /* Borda Ciano */
    background-color: rgba(40, 42, 54, 0.6); /* Fundo da chapa semi-transparente */
    position: relative; /* Necessário para posicionar as peças com 'position: absolute' */
    overflow: hidden; /* Garante que peças não 'vazem' visualmente */
    box-shadow: 0 0 10px rgba(139, 233, 253, 0.2); /* Glow Ciano sutil */
    /* Largura e altura serão definidas dinamicamente pelo JavaScript */
}

/* Representação visual de cada peça cortada NA TELA */
.piece-rectangle {
    position: absolute; /* Posicionado dentro do .sheet-container */
    border: 1px solid rgba(248, 248, 242, 0.5); /* Borda branca semi-transparente */
    cursor: default; /* Cursor padrão, pois não é clicável */
    display: flex; /* Para centralizar texto/label interno */
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Texto não deve vazar */
    transition: all 0.1s ease-in-out; /* Transição suave (para possíveis hovers futuros) */
    box-sizing: border-box; /* Inclui borda na dimensão */
}

/* Rótulo dentro da peça (mostrando dimensões) NA TELA */
.piece-label {
    font-size: 10px; /* Pequeno para caber */
    font-weight: 500;
    color: #f8f8f2; /* Cor padrão clara */
    background-color: rgba(40, 42, 54, 0.75); /* Fundo escuro semi-transparente */
    padding: 1px 3px;
    border-radius: 2px;
    white-space: nowrap; /* Evita quebra de linha das dimensões */
    text-align: center;
    position: relative; /* Garante que esteja sobre a cor de fundo da peça */
    z-index: 1; /* Garante visibilidade sobre o fundo da peça */
}
/* Indicador de rotação visual NA TELA */
.piece-label .rotated-symbol {
    color: #ffb86c; /* Laranja */
    font-weight: bold;
    font-size: 0.9em;
    margin-left: 2px; /* Pequeno espaço */
}
/* Muda cor do texto do label para escuro se a cor de fundo da peça for clara */
.piece-rectangle.dark-text .piece-label {
    color: #282a36; /* Texto escuro */
    background-color: rgba(248, 248, 242, 0.75); /* Fundo claro semi-transparente */
}

/* == Mensagens de Erro e Informação == */
.error-message, .info-message {
    display: block;
    padding: 10px 15px;
    margin-top: 10px;
    border-radius: 4px;
    font-size: 0.9em;
    border: 1px solid transparent;
    position: relative;
    padding-left: 35px; /* Espaço para o ícone */
    line-height: 1.4;
}

/* Ícone para as mensagens usando ::before */
.error-message::before, .info-message::before {
     font-family: "Font Awesome 6 Free"; /* Usa Font Awesome */
     font-weight: 900; /* Ícone sólido */
     position: absolute;
     left: 12px;
     top: 50%;
     transform: translateY(-50%);
     font-size: 1.1em;
}

.error-message {
    background-color: rgba(255, 85, 85, 0.15); /* Fundo vermelho claro */
    color: #ff8787; /* Vermelho mais suave para texto */
    border-color: rgba(255, 85, 85, 0.4);
}
.error-message::before {
    content: "\f071"; /* Ícone: Warning triangle */
    color: #ff5555; /* Vermelho forte para o ícone */
}
.error-message ul, .info-message ul {
    list-style-position: inside;
    padding-left: 5px; /* Pequeno recuo para a lista */
    margin-top: 5px;
}
.error-message strong, .info-message strong {
    color: inherit; /* Usa a cor da mensagem */
}

.info-message {
    background-color: rgba(80, 250, 123, 0.1); /* Fundo verde claro */
    color: #72f1a6; /* Verde mais suave para texto */
    border-color: rgba(80, 250, 123, 0.4);
}
.info-message::before {
     content: "\f05a"; /* Ícone: Info circle */
     color: #50fa7b; /* Verde forte para o ícone */
 }

/* == Rodapé == */
footer {
    background-color: #1f212b; /* Um pouco mais escuro que o fundo principal */
    color: #bd93f9; /* Roxo para texto */
    text-align: center;
    padding: 15px 0;
    margin-top: auto; /* Empurra para baixo caso o conteúdo seja pequeno */
    font-size: 0.85em;
    border-top: 1px solid #44475a; /* Linha divisória superior */
}

footer p {
    margin-bottom: 5px;
}

footer a {
    color: #8be9fd; /* Ciano para links */
    text-decoration: none;
    transition: color 0.3s ease;
    margin: 0 8px; /* Espaçamento horizontal entre links */
}

footer a:hover {
    color: #ff79c6; /* Rosa no hover */
    text-decoration: underline;
}

/* ====================================== */
/* ==      ESTILOS DE IMPRESSÃO        == */
/* ====================================== */
@media print {
    /* --- Configurações Globais de Impressão --- */
    body {
        background: #ffffff !important; /* Fundo branco obrigatório */
        color: #000000 !important; /* Cor preta para texto */
        font-size: 10pt;
        font-family: sans-serif;
        -webkit-print-color-adjust: exact !important; /* Força cores (Chrome/Safari) */
   		print-color-adjust: exact !important; /* Força cores Padrão) */
    }
    html, body {
        height: auto;
        min-height: 0;
    }
     @page {
        margin: 15mm; /* Margens da página (ajuste conforme necessário) */
        size: A4 portrait; /* Tamanho e orientação */
     }
     /* Remove sombras e bordas não essenciais */
     * { box-shadow: none !important; text-shadow: none !important; }
     .container { margin: 0 !important; padding: 0 !important; border: none !important; background: none !important; max-width: 100% !important; width: 100% !important; }
     .card { border: none !important; padding: 0 !important; background: none !important; box-shadow: none !important; margin-bottom: 10mm !important; page-break-inside: avoid; } /* Evita quebrar card */
     a, a:visited { text-decoration: none !important; color: #000 !important; }
     h2, h3 { page-break-after: avoid; } /* Evita quebra logo após título */


    /* --- Ocultar Elementos Comuns Não Relevantes para QUALQUER Impressão --- */
    .main-header,           /* Cabeçalho (H1, Status) */
    footer,                 /* Rodapé */
    .input-column .card:not(.piece-list-card), /* Esconde cards de entrada exceto a lista de peças (será controlado depois) */
    .input-column .card .form-row, .single-piece-input-area, /* Formulários de entrada */
    label, input[type=text], input[type=number], input[type=checkbox],
    .add-piece-btn,         /* Botão Add Peça */
    .piece-display-list,    /* Lista de peças interativa (a da tela) */
    .pieces-header #clearAllPiecesBtn, /* Botão limpar lista */
    .actions-card,          /* Card de Ações inteiro (todos botões E A SELEÇÃO DE ETIQUETA) */
    #saveStatus,            /* Indicador Salvo/Não Salvo */
    .results-card #cutPlanOutput, /* Visualização INTERATIVA do plano */
    .waste-info-box,        /* Caixa de desperdício interativa */
    .card h2 i,             /* Ícones FontAwesome dos títulos H2 */
    .placeholder-text       /* Textos de placeholder */
    {
        display: none !important;
    }

    /* Ajuste layout grid para coluna única */
    .layout-grid { grid-template-columns: 1fr !important; gap: 0 !important; }
    .input-column, .results-column { width: 100%; display: block !important; }

    /* Formata o título geral da seção de resultado/lista (que será mostrada) */
     #resultsSection > h2,
     .piece-list-card > .pieces-header > h2 {
        display: block !important;
        font-size: 14pt !important;
        color: #000 !important;
        border-bottom: 1px solid #ccc !important;
        margin-bottom: 8mm !important;
        padding-bottom: 3mm !important;
        font-family: sans-serif;
        font-weight: bold;
        width: 100% !important; /* Ocupa largura */
        background: none !important;
        text-align: left !important;
    }

/* ================================================================ */
/*  INÍCIO: ESTILOS ESPECÍFICOS para impressão do PLANO DE CORTE    */
/* ================================================================ */

    /* Esconde conteúdo de outras impressões quando imprimindo PLANO */
    body.printing-plan #printPieceListContainer,
    body.printing-plan #printLabelsContainer {
        display: none !important;
    }
     /* Esconde o TÍTULO da LISTA de PEÇAS quando imprimindo o PLANO */
    body.printing-plan .piece-list-card {
        display: none !important;
    }
    /* Mostra o TÍTULO do RESULTADO quando imprimindo o PLANO */
    body.printing-plan #resultsSection > h2 {
         display: block !important; /* Garante que o título Resultado apareça */
    }

    /* Assegura que o container do plano seja visível */
    body.printing-plan #printImageContainer {
        display: block !important;
        width: 100% !important;
        margin-top: 0 !important; /* Sem margem extra, pois o título H2 já tem */
        page-break-before: auto; /* Pode quebrar página antes se necessário */
        font-family: sans-serif !important;
        background: #fff !important;
        color: #000 !important;
    }
    /* Estilização dos textos informativos dentro do container de impressão do plano */
    #printImageContainer h3,
    #printImageContainer p,
    #printImageContainer .print-info-line { /* Usar <p> ou <div class="print-info-line"> */
        display: block !important; color: #000 !important; font-size: 9pt !important;
        font-family: sans-serif !important; margin-bottom: 2mm !important; padding: 0 !important;
        font-weight: normal !important; text-align: left !important; background: none !important;
    }
    #printImageContainer h3 { /* Título (Ex: Plano de Corte - Projeto X) */
        font-size: 11pt !important; font-weight: bold !important; margin-bottom: 4mm !important;
    }
    #printImageContainer p strong,
    #printImageContainer .print-info-line strong { font-weight: bold !important; color: #000 !important; }
    #printImageContainer p small,
    #printImageContainer .print-info-line small { font-size: 7pt !important; color: #333 !important; }

    #printImageContainer hr { /* Linha horizontal */
        display: block !important; border: none !important; border-top: 0.5pt solid #ccc !important;
        margin: 4mm 0 !important; padding: 0 !important; height: 0 !important; width: 100% !important;
    }
    /* Área que contém todas as mini-chapas */
    #printImageContainer #print-sheets-area {
        display: flex !important; flex-wrap: wrap !important; justify-content: flex-start !important;
        gap: 5mm !important; margin-top: 5mm !important; padding: 0 !important; width: 100% !important;
    }
    /* Estilo para cada wrapper de mini-chapa (rótulo + visualização) */
    #printImageContainer .sheet-wrapper.print-view {
        display: block !important; page-break-inside: avoid !important; border: 0.5pt solid #aaa !important;
        padding: 2mm !important; margin: 0 0 3mm 0 !important; background: #fff !important;
        width: auto !important; box-shadow: none !important;
    }
    /* Rótulo da chapa (Ex: "Chapa 1") */
    #printImageContainer .sheet-label.print-view {
        display: block !important; font-size: 8pt !important; color: #000 !important; font-weight: bold !important;
        background: none !important; margin: 0 0 1.5mm 0 !important; padding: 0 !important; text-align: left !important;
    }
    /* Container da chapa visual (a área que representa a chapa) */
    #printImageContainer .sheet-container.print-view {
        display: block !important; border: 0.5pt solid #666 !important; position: relative !important; /* CRUCIAL */
        background: #fdfdfd !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important;
        box-shadow: none !important;
        /* WIDTH e HEIGHT DEVEM SER DEFINIDOS VIA STYLE INLINE PELO JAVASCRIPT (ex: style="width: 122mm; height: 61mm;") */
    }
    /* Estilo para cada peça cortada dentro da mini-chapa */
    #printImageContainer .piece-rectangle.print-view {
        display: flex !important; align-items: center !important; justify-content: center !important;
        position: absolute !important; /* CRUCIAL */ border: 0.2pt solid #333 !important;
        background-color: #eee !important; overflow: hidden !important; box-sizing: border-box !important;
        box-shadow: none !important;
        /* TOP, LEFT, WIDTH e HEIGHT DEVEM SER DEFINIDOS VIA STYLE INLINE PELO JAVASCRIPT (ex: style="top: 5mm; left: 10mm; width: 20mm; height: 15mm;") */
    }
    /* Rótulo da peça na impressão (dentro do piece-rectangle) */
    #printImageContainer .piece-label.print-label {
        display: block !important; font-size: 6pt !important; line-height: 1.1 !important; font-family: sans-serif !important;
        font-weight: normal !important; color: #000 !important; background: rgba(255, 255, 255, 0.65) !important;
        padding: 0 1px !important; margin: 0 !important; text-align: center !important; white-space: nowrap !important;
        position: relative !important; z-index: 5 !important;
        /* Centralizado pelo flex do pai */
    }
    /* Símbolo de rotação */
    #printImageContainer .piece-label.print-label .rotated-symbol {
         color: #d10000 !important; font-weight: bold !important; font-size: 1.1em !important;
         margin-left: 1px !important; display: inline !important;
    }
/* ============================================================== */
/*   FIM: ESTILOS ESPECÍFICOS para impressão do PLANO DE CORTE    */
/* ============================================================== */

/* ================================================================== */
/*  INÍCIO: ESTILOS ESPECÍFICOS para impressão da LISTA DE PEÇAS      */
/* ================================================================== */

     /* Esconde conteúdo de outras impressões quando imprimindo LISTA */
    body.printing-piece-list #printImageContainer,
    body.printing-piece-list #printLabelsContainer,
    body.printing-piece-list #resultsSection /* Esconde card de resultado inteiro */
    {
        display: none !important;
    }
     /* Mostra o CARD da LISTA DE PEÇAS quando imprimindo LISTA */
     body.printing-piece-list .piece-list-card {
        display: block !important; /* Mostra o card que contém a lista e o container de impressão */
        margin-bottom: 0 !important; /* Remove margem extra do card */
     }
      /* Mostra o TÍTULO da LISTA quando imprimindo LISTA */
     body.printing-piece-list .piece-list-card > .pieces-header > h2 {
         display: flex !important; /* Usa flex para o alinhamento com o ícone, mas o ícone está oculto */
         align-items: center !important;
     }

     /* Mostra o container específico da tabela de peças */
     body.printing-piece-list #printPieceListContainer {
          display: block !important; /* Mostrar container da tabela */
          width: 100%; margin: 0; padding: 0; position: static;
          font-family: sans-serif;
      }
      /* Estiliza informações opcionais ACIMA da tabela (se adicionadas pelo JS) */
      #printPieceListContainer h2, /* Título da lista dentro do container */
      #printPieceListContainer p.print-list-info {
           color: #000 !important; margin-bottom: 5px; font-size: 9pt;
           font-family: sans-serif; font-weight: normal; border: none;
           text-align: left; display: block !important; background: none !important;
      }
      #printPieceListContainer h2 { font-size: 11pt !important; font-weight: bold !important; margin-bottom: 4mm !important; }
      #printPieceListContainer p.print-list-info strong { font-weight: bold; }

      /* Estilos da Tabela de Peças para Impressão */
     table.print-table {
         width: 100%; border-collapse: collapse; margin-top: 5mm; font-size: 9pt;
         font-family: sans-serif; page-break-inside: auto;
     }
     table.print-table th,
     table.print-table td {
         border: 1px solid #999; padding: 1.5mm 2mm; text-align: left;
         vertical-align: top; page-break-inside: avoid; word-break: break-word;
         color: #000 !important; /* Garante cor do texto */
         background: #fff !important; /* Garante fundo branco */
     }
     table.print-table th { background-color: #eee !important; font-weight: bold; text-align: center; }
      table.print-table td:nth-child(1), /* Coluna # */
      table.print-table td:nth-child(2), /* Largura */
      table.print-table td:nth-child(3), /* Altura */
      table.print-table td:nth-child(4)  /* Qtde */
      { text-align: center; } /* Centraliza colunas numéricas */
     table.print-table tr:nth-child(even) td { /* Fundo para linhas pares */
        background-color: #f9f9f9 !important;
     }
     table.print-table tfoot td { /* Estilo para rodapé da tabela (total) */
        font-weight: bold !important;
        background-color: #f0f0f0 !important;
        border-top: 1px solid #666 !important;
     }
     table.print-table caption { /* Legenda (Ex: Data) */
          caption-side: bottom; margin-top: 3mm; font-style: italic;
          font-size: 8pt; color: #555; text-align: right;
      }

/* ================================================================== */
/*   FIM: ESTILOS ESPECÍFICOS para impressão da LISTA DE PEÇAS       */
/* ================================================================== */


/* ================================================================ */
/*  INÍCIO: ESTILOS ESPECÍFICOS para impressão das ETIQUETAS        */
/* ================================================================ */

    /* Esconde conteúdo de outras impressões quando imprimindo ETIQUETAS */
    /* DENTRO do @media print { ... } */

/* <!-- START OF REPLACEMENT CODE --> */
    /* Mostra e formata o container das etiquetas para UMA COLUNA */
    body.printing-labels #printLabelsContainer {
        display: flex !important;               /* Continua usando Flexbox */
        flex-direction: column !important;      /* === ALTERAÇÃO PRINCIPAL: Define a direção como coluna === */
        /* flex-wrap: wrap !important;          (Não mais necessário para coluna única) */
        justify-content: flex-start !important; /* Alinha início no eixo principal (vertical) */
        align-items: flex-start !important;     /* Alinha itens à esquerda no eixo cruzado (horizontal) */
                                                /* (use 'center' se quiser centralizar horizontalmente) */
        gap: 3mm !important;                   /* Define o espaçamento VERTICAL entre etiquetas */
        width: auto !important;                /* Largura automática (não ocupa a página toda) */
                                                /* Pode ajustar para '100%' se quiser que o *container* ocupe, mas as etiquetas manterão sua largura */
        max-width: 100% !important;            /* Garante não exceder a largura da página */
        margin: 0 auto !important;             /* Centraliza a coluna na página se width for 'auto' e houver espaço */
        padding: 0 !important;                  /* Reseta paddings */
        background: #fff !important;
        color: #000 !important;
        font-family: sans-serif !important;
     }

    /* Os estilos para a etiqueta individual (.printable-label) permanecem os mesmos, */
    /* definindo a largura e altura DE CADA ETIQUETA */
    /* ATENÇÃO: Ajuste LARGURA e ALTURA abaixo conforme seu papel/etiqueta */
    body.printing-labels .printable-label {
        width: 63.5mm !important;             /* LARGURA da etiqueta */
        height: 37mm !important;            /* ALTURA da etiqueta (um pouco menos para garantir) */

        /* Estilos existentes */
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        border: 0.2pt solid #999 !important; /* Borda preta mais sutil */
        padding: 1.5mm !important;            /* Espaçamento interno reduzido */
        background: #fff !important;
        color: #000 !important;
        font-family: sans-serif !important;
        font-size: 8pt !important;          /* Tamanho base da fonte interna */
        page-break-inside: avoid !important; /* Tenta manter a etiqueta numa única página */
        box-sizing: border-box !important;  /* Borda inclusa nas dimensões */
        overflow: hidden !important;        /* Esconde o que ultrapassar */
        margin: 0 !important; /* Remove margens que possam conflitar com o gap */
     }

     /* Cabeçalho da etiqueta (Cliente/Projeto) */
     body.printing-labels .printable-label .label-header {
        font-size: 6.5pt !important;          /* Tamanho menor para o cabeçalho */
        text-align: center !important;
        border-bottom: 0.2pt solid #ccc !important; /* Linha separadora fina */
        padding-bottom: 0.5mm !important;   /* Espaço abaixo da linha */
        margin-bottom: 1mm !important;      /* Espaço total abaixo do header */
        white-space: nowrap;                /* Tenta manter em uma linha */
        overflow: hidden;                   /* Esconde se estourar */
        text-overflow: ellipsis;            /* Adiciona '...' se estourar */
        flex-shrink: 0; /* Não deixa encolher */
     }
     body.printing-labels .printable-label .label-header .client-name,
     body.printing-labels .printable-label .label-header .project-name {
         color: #000 !important; /* Garante cor preta */
      }

     /* Área das Dimensões (em destaque) */
     body.printing-labels .printable-label .label-dims {
         font-size: 11pt !important;         /* Tamanho ainda destacado, mas menor */
         font-weight: bold !important;       /* Negrito */
         text-align: center !important;
         line-height: 1.1 !important;        /* Ajuste de espaçamento */
         color: #000 !important; /* Garante cor preta */
         flex-grow: 1;
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
      }
      /* Nome da peça (opcional) dentro das dimensões */
      body.printing-labels .printable-label .label-dims > div {
            font-size: 7pt !important; /* Tamanho menor para nome/desc */
            font-weight: normal !important;
            margin-top: 0.5mm !important;
            color: #333 !important;
      }
      body.printing-labels .printable-label .label-dims .rotated-symbol {
            color: #cc0000 !important; /* Vermelho para rotação */
            font-weight: bold !important;
            font-size: 0.9em !important; /* Um pouco menor que o texto da dimensão */
            margin-left: 2px !important;
            display: inline !important;
       }

      /* Identificador da Peça (no rodapé da etiqueta) */
     body.printing-labels .printable-label .label-piece-id {
         font-size: 6pt !important;          /* Tamanho bem pequeno */
         text-align: right !important;
         color: #555 !important;            /* Cinza escuro */
         margin-top: auto;                   /* Empurra para o fundo */
         padding-top: 0.5mm !important;       /* Espaço acima reduzido */
         flex-shrink: 0; /* Não deixa encolher */
         line-height: 1 !important;
     }
/* <!-- END OF REPLACEMENT CODE --> */

/* ============================================================== */
/*   FIM: ESTILOS ESPECÍFICOS para impressão das ETIQUETAS        */
/* ============================================================== */


} /* Fim @media print */

/* == Responsividade == */

/* Telas Médias (<= 1200px) */
@media (max-width: 1200px) {
    .container { max-width: 95%; padding: 20px;}
    .layout-grid {
         grid-template-columns: minmax(350px, 1.5fr) 2fr;
     }
}

/* Tablets e Telas Menores (<= 992px) */
@media (max-width: 992px) {
    .layout-grid { grid-template-columns: 1fr; gap: 20px; }
    .input-column, .results-column { width: 100%; }
    h1 { font-size: 1.8rem; }
    h2 { font-size: 1.2rem; }
    .main-header { flex-direction: column; align-items: flex-start; gap: 10px; }
    .control-button.large-btn { padding: 10px 20px; font-size: 1rem; }
    .piece-display-list { max-height: 250px; }
}

/* Mobile Maior (<= 768px) */
@media (max-width: 768px) {
    body { font-size: 14px; }
    .container { padding: 15px; }
    h1 { font-size: 1.6rem; }
    .form-row { flex-direction: column; gap: 10px; }
    .form-group { margin-bottom: 10px; }
    .single-piece-input-area { flex-wrap: wrap; }
    .single-piece-input-area .form-group {
        min-width: calc(50% - 10px); flex-basis: calc(50% - 10px); flex-grow: 1;
    }
    .add-piece-btn { width: 100%; margin-top: 10px; }
    .control-button { padding: 9px 15px; font-size: 0.9rem; }
    .cut-plan-output-area { gap: 25px; }
    .sheet-container { max-width: 95%; }
    .sheet-wrapper { width: 100%; }
}

/* Mobile Pequeno (<= 480px) */
@media (max-width: 480px) {
     h1 { font-size: 1.4rem; }
     .container { padding: 10px; border-radius: 8px;}
     .card { padding: 15px; }
     h2 { font-size: 1.1rem; }
     .main-header { align-items: center; text-align: center; }
     .save-status { font-size: 0.8em; padding: 4px 8px;}
     .single-piece-input-area .form-group { min-width: 100%; flex-basis: 100%; }
     .piece-display-item { font-size: 0.9em; padding: 6px 10px; flex-wrap: wrap; }
     .piece-info span { margin-right: 10px; margin-bottom: 3px; display: inline-block;}
     .remove-piece-btn { margin-left: auto; }
     .piece-label { font-size: 9px; }
     footer { font-size: 0.75em; padding: 10px 0;}
     footer a { margin: 0 5px; }
     /* Regras de botões de 420px já cobrem isso */
     /* .button-group.actions-secondary { grid-template-columns: 1fr; } */
     /* .button-group.actions-output .control-button { flex-basis: 100%; } */
}
/* END OF FILE style.css */