.elementor-kit-15{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-15 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS */<!DOCTYPE html>
<html lang="pt">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>PRINTLAB STL - Calculadora de Gastos</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Chart.js para gráficos analíticos -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <!-- Google Fonts - Inter -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Inter', sans-serif;
            -webkit-tap-highlight-color: transparent;
        }
        /* Custom scrollbar para deixar o app elegante no tema claro */
        ::-webkit-scrollbar {
            width: 4px;
            height: 4px;
        }
        ::-webkit-scrollbar-track {
            background: #f1f5f9;
        }
        ::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }
        /* Evita problemas de dimensionamento em embeds do WordPress */
        html, body {
            max-width: 100%;
            overflow-x: hidden;
        }
    
        .lucro-btn {
            background: #f1f5f9;
            border: 1px solid #cbd5e1;
            color: #334155;
            font-size: 11px;
            font-weight: 700;
            padding: 10px 6px;
            border-radius: 12px;
            transition: all 0.2s ease;
        }

        .lucro-btn:hover {
            background: #dcfce7;
            border-color: #10b981;
            color: #065f46;
        }

        .lucro-btn.active {
            background: linear-gradient(to right, #10b981, #059669);
            color: white;
            border-color: transparent;
            box-shadow: 0 4px 12px rgba(16,185,129,0.25);
        }

</style>
</head>
<body class="bg-slate-50 text-slate-800 min-h-screen flex flex-col justify-between antialiased">

    <header class="border-b border-slate-200 bg-white/80 backdrop-blur sticky top-0 z-50 shadow-sm">
        <div class="max-w-7xl mx-auto px-4 py-3 sm:py-4 sm:px-6 lg:px-8 flex flex-col sm:flex-row justify-between items-center gap-3">
            
            <!-- Logótipo Oficial PRINTLAB STL com Letras Escuras -->
            <div class="flex flex-col items-center sm:items-start select-none">
                <div class="flex items-center">
                    <!-- Parte "PR" em tom escuro -->
                    <span class="text-2xl sm:text-3xl font-black tracking-tight text-slate-900 font-sans">PR</span>
                    
                    <!-- O "I" estilizado com a seta colorida igual à imagem -->
                    <svg class="h-8 w-5 sm:h-9 sm:w-6 mx-0.5" viewBox="0 0 24 36" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <defs>
                            <!-- Gradiente da Seta superior (Amarelo -> Laranja -> Rosa/Vermelho) -->
                            <linearGradient id="arrowGrad" x1="0%" y1="100%" x2="100%" y2="0%">
                                <stop offset="0%" stop-color="#ff007f" />
                                <stop offset="40%" stop-color="#ff5f00" />
                                <stop offset="80%" stop-color="#ffea00" />
                                <stop offset="100%" stop-color="#a2ff00" />
                            </linearGradient>
                        </defs>
                        <!-- Seta superior -->
                        <path d="M12 2 L21 14 L3 14 Z" fill="url(#arrowGrad)" />
                        <!-- Linhas verticais do corpo do "I" (Ciano, Magenta/Vermelho, Amarelo) -->
                        <rect x="6" y="16" width="2.5" height="18" fill="#00d2ff" rx="0.5" />
                        <rect x="10.5" y="16" width="2.5" height="18" fill="#ff007f" rx="0.5" />
                        <rect x="15" y="16" width="2.5" height="18" fill="#ffea00" rx="0.5" />
                    </svg>

                    <!-- Parte "NTLAB" em tom escuro -->
                    <span class="text-2xl sm:text-3xl font-black tracking-tight text-slate-900 font-sans mr-2">NTLAB</span>
                    
                    <!-- Crachá STL -->
                    <span class="px-1.5 py-0.5 text-[9px] font-extrabold tracking-widest text-slate-950 bg-gradient-to-r from-sky-400 to-cyan-400 rounded-md shadow-sm shadow-sky-400/20">STL</span>
                </div>
                <!-- Subtítulo "calculadora de gastos" embaixo da logo -->
                <span class="text-[9px] sm:text-[10px] uppercase tracking-[0.22em] text-slate-500 font-bold ml-0.5 sm:ml-1 -mt-1 block text-center sm:text-left">calculadora de gastos</span>

            </div>
            
            </div>
    </header>


    <main class="max-w-7xl mx-auto px-3 py-4 sm:py-8 sm:px-6 lg:px-8 flex-grow w-full pb-16 lg:pb-8">
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-4 sm:gap-8">
            
            <!-- Coluna da Esquerda: Formulário de Configurações Unificado (Sem Abas) -->
            <div class="lg:col-span-7 xl:col-span-8 flex flex-col space-y-6">
                
                <!-- PAINEL UNIFICADO DE INPUTS -->
                <div class="space-y-6">
                    
                    <!-- Secção 1: Material e Tempo -->
                    <div class="bg-white border border-slate-200/80 rounded-2xl p-4 sm:p-6 shadow-sm space-y-5">
                        <div class="border-b border-slate-100 pb-3">
                            <h2 class="text-base sm:text-lg font-bold text-slate-900 flex items-center gap-2">
                                <span class="w-1.5 h-5 sm:h-6 bg-sky-500 rounded-full"></span>
                                Consumo de Material e Tempo
                            </h2>
                            <p class="text-xs text-slate-500 mt-1">Insira os dados do rolo de filamento adquirido e os consumos calculados pelo fatiador.</p>
                        </div>

                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
                            <!-- Peso Utilizado -->
                            <div>
                                <label class="block text-xs font-semibold uppercase tracking-wider text-slate-500 mb-1.5">Peso da Peça</label>
                                <div class="flex rounded-xl shadow-sm border border-slate-200 overflow-hidden bg-slate-50 focus-within:ring-2 focus-within:ring-sky-500/20 focus-within:border-sky-500 transition-all">
                                    <input type="number" id="pesoPeca" value="150" min="1" step="any" oninput="calculateAll()" class="w-full bg-transparent px-3 py-2.5 text-sm sm:text-base text-slate-900 font-semibold focus:outline-none">
                                    <span class="inline-flex items-center px-3.5 border-l border-slate-200 bg-slate-100 text-xs sm:text-sm text-slate-500 font-semibold select-none">g</span>
                                </div>
                            </div>

                            <!-- Preço do Filamento -->
                            <div>
                                <label class="block text-xs font-semibold uppercase tracking-wider text-slate-500 mb-1.5">Preço do Rolo</label>
                                <div class="flex rounded-xl shadow-sm border border-slate-200 overflow-hidden bg-slate-50 focus-within:ring-2 focus-within:ring-sky-500/20 focus-within:border-sky-500 transition-all">
                                    <span class="inline-flex items-center px-3.5 border-r border-slate-200 bg-slate-100 text-xs sm:text-sm text-slate-500 font-semibold select-none">R$</span>
                                    <input type="number" id="precoRolo" value="120.00" min="0" step="any" oninput="calculateAll()" class="w-full bg-transparent px-3 py-2.5 text-sm sm:text-base text-slate-900 font-semibold focus:outline-none">
                                </div>
                            </div>

                            <!-- Peso do Rolo -->
                            <div>
                                <label class="block text-xs font-semibold uppercase tracking-wider text-slate-500 mb-1.5">Peso Total do Rolo</label>
                                <div class="flex rounded-xl shadow-sm border border-slate-200 overflow-hidden bg-slate-50 focus-within:ring-2 focus-within:ring-sky-500/20 focus-within:border-sky-500 transition-all">
                                    <input type="number" id="pesoRolo" value="1000" min="1" oninput="calculateAll()" class="w-full bg-transparent px-3 py-2.5 text-sm sm:text-base text-slate-900 font-semibold focus:outline-none">
                                    <span class="inline-flex items-center px-3.5 border-l border-slate-200 bg-slate-100 text-xs sm:text-sm text-slate-500 font-semibold select-none">g</span>
                                </div>
                            </div>

                            <!-- Tempo de Impressão -->
                            <div>
                                <label class="block text-xs font-semibold uppercase tracking-wider text-slate-500 mb-1.5">Tempo Estimado</label>
                                <div class="grid grid-cols-2 gap-2">
                                    <div class="flex rounded-xl shadow-sm border border-slate-200 overflow-hidden bg-slate-50 focus-within:ring-2 focus-within:ring-sky-500/20 focus-within:border-sky-500 transition-all">
                                        <input type="number" id="tempoHoras" value="4" min="0" oninput="calculateAll()" class="w-full bg-transparent px-2 py-2.5 text-center text-sm sm:text-base text-slate-900 font-semibold focus:outline-none">
                                        <span class="inline-flex items-center px-2.5 border-l border-slate-200 bg-slate-100 text-xs text-slate-500 font-semibold select-none">h</span>
                                    </div>
                                    <div class="flex rounded-xl shadow-sm border border-slate-200 overflow-hidden bg-slate-50 focus-within:ring-2 focus-within:ring-sky-500/20 focus-within:border-sky-500 transition-all">
                                        <input type="number" id="tempoMinutos" value="30" min="0" max="59" oninput="calculateAll()" class="w-full bg-transparent px-2 py-2.5 text-center text-sm sm:text-base text-slate-900 font-semibold focus:outline-none">
                                        <span class="inline-flex items-center px-2.5 border-l border-slate-200 bg-slate-100 text-xs text-slate-500 font-semibold select-none">m</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Detalhe extra: Taxa de Perda / Falha -->
                        <div class="bg-slate-50 p-3 sm:p-4 rounded-xl border border-slate-200 flex flex-col sm:flex-row sm:items-center justify-between gap-3">
                            <div>
                                <h4 class="text-xs font-bold uppercase text-slate-600">Margem para Perdas e Falhas</h4>
                                <p class="text-[11px] text-slate-400 mt-0.5">Adiciona uma margem extra de filamento para suportes e falhas.</p>
                            </div>
                            <div class="flex rounded-xl shadow-sm border border-slate-200 overflow-hidden bg-white w-full sm:w-32 focus-within:ring-2 focus-within:ring-sky-500/20 focus-within:border-sky-500 transition-all">
                                <input type="number" id="taxaFalha" value="10" min="0" max="100" oninput="calculateAll()" class="w-full bg-transparent px-3 py-2 text-right text-sm text-slate-900 font-semibold focus:outline-none">
                                <span class="inline-flex items-center px-3 border-l border-slate-200 bg-slate-100 text-xs text-slate-500 font-semibold select-none">%</span>
                            </div>
                        </div>
                    </div>

                    <!-- Secção 2: Energia e Desgaste -->
                    <div class="bg-white border border-slate-200/80 rounded-2xl p-4 sm:p-6 shadow-sm space-y-5">
                        <div class="border-b border-slate-100 pb-3">
                            <h2 class="text-base sm:text-lg font-bold text-slate-900 flex items-center gap-2">
                                <span class="w-1.5 h-5 sm:h-6 bg-amber-500 rounded-full"></span>
                                Consumo Elétrico & Desgaste
                            </h2>
                            <p class="text-xs text-slate-500 mt-1">Configure o custo elétrico real do seu equipamento e a manutenção preventiva.</p>
                        </div>

                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
                            <!-- Potência da Impressora -->
                            <div>
                                <label class="block text-xs font-semibold uppercase tracking-wider text-slate-500 mb-1.5">Consumo Médio</label>
                                <div class="flex rounded-xl shadow-sm border border-slate-200 overflow-hidden bg-slate-50 focus-within:ring-2 focus-within:ring-amber-500/20 focus-within:border-amber-500 transition-all">
                                    <input type="number" id="potenciaImpressora" value="150" min="1" oninput="calculateAll()" class="w-full bg-transparent px-3 py-2.5 text-sm sm:text-base text-slate-900 font-semibold focus:outline-none">
                                    <span class="inline-flex items-center px-3 border-l border-slate-200 bg-slate-100 text-xs sm:text-sm text-slate-500 font-semibold select-none">W/h</span>
                                </div>
                            </div>

                            <!-- Preço do KWh -->
                            <div>
                                <label class="block text-xs font-semibold uppercase tracking-wider text-slate-500 mb-1.5">Preço do kWh (Energia)</label>
                                <div class="flex rounded-xl shadow-sm border border-slate-200 overflow-hidden bg-slate-50 focus-within:ring-2 focus-within:ring-amber-500/20 focus-within:border-amber-500 transition-all">
                                    <span class="inline-flex items-center px-3.5 border-r border-slate-200 bg-slate-100 text-xs sm:text-sm text-slate-500 font-semibold select-none">R$</span>
                                    <input type="number" id="custoKwh" value="0.85" min="0" step="any" oninput="calculateAll()" class="w-full bg-transparent px-3 py-2.5 text-sm sm:text-base text-slate-900 font-semibold focus:outline-none">
                                </div>
                            </div>

                            <!-- Depreciação / Manutenção por hora -->
                            <div class="sm:col-span-2">
                                <label class="block text-xs font-semibold uppercase tracking-wider text-slate-500 mb-1.5">Manutenção da Máquina (Desgaste)</label>
                                <div class="flex rounded-xl shadow-sm border border-slate-200 overflow-hidden bg-slate-50 focus-within:ring-2 focus-within:ring-amber-500/20 focus-within:border-amber-500 transition-all">
                                    <span class="inline-flex items-center px-3.5 border-r border-slate-200 bg-slate-100 text-xs sm:text-sm text-slate-500 font-semibold select-none">R$</span>
                                    <input type="number" id="taxaManutencao" value="0.50" min="0" step="any" oninput="calculateAll()" class="w-full bg-transparent px-3 py-2.5 text-sm sm:text-base text-slate-900 font-semibold focus:outline-none">
                                    <span class="inline-flex items-center px-3 border-l border-slate-200 bg-slate-100 text-xs text-slate-500 font-semibold select-none">/ hora</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Secção 3: Mão de Obra e Lucro -->
                    <div class="bg-white border border-slate-200/80 rounded-2xl p-4 sm:p-6 shadow-sm space-y-5">
                        <div class="border-b border-slate-100 pb-3">
                            <h2 class="text-base sm:text-lg font-bold text-slate-900 flex items-center gap-2">
                                <span class="w-1.5 h-5 sm:h-6 bg-emerald-500 rounded-full"></span>
                                Mão de Obra & Lucro
                            </h2>
                            <p class="text-xs text-slate-500 mt-1">Calcule o tempo gasto para configurar a peça e o retorno financeiro pretendido.</p>
                        </div>

                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
                            <!-- Valor da Hora de Trabalho -->
                            <div>
                                <label class="block text-xs font-semibold uppercase tracking-wider text-slate-500 mb-1.5">Sua Hora de Trabalho</label>
                                <div class="flex rounded-xl shadow-sm border border-slate-200 overflow-hidden bg-slate-50 focus-within:ring-2 focus-within:ring-emerald-500/20 focus-within:border-emerald-500 transition-all">
                                    <span class="inline-flex items-center px-3.5 border-r border-slate-200 bg-slate-100 text-xs sm:text-sm text-slate-500 font-semibold select-none">R$</span>
                                    <input type="number" id="valorHoraTrabalho" value="25.00" min="0" step="any" oninput="calculateAll()" class="w-full bg-transparent px-3 py-2.5 text-sm sm:text-base text-slate-900 font-semibold focus:outline-none">
                                    <span class="inline-flex items-center px-3 border-l border-slate-200 bg-slate-100 text-xs text-slate-500 font-semibold select-none">/h</span>
                                </div>
                            </div>

                            <!-- Tempo Ativo gasto na Peça -->
                            <div>
                                <label class="block text-xs font-semibold uppercase tracking-wider text-slate-500 mb-1.5">Tempo Ativo Gasto</label>
                                <div class="flex rounded-xl shadow-sm border border-slate-200 overflow-hidden bg-slate-50 focus-within:ring-2 focus-within:ring-emerald-500/20 focus-within:border-emerald-500 transition-all">
                                    <input type="number" id="tempoTrabalhoMinutos" value="30" min="0" oninput="calculateAll()" class="w-full bg-transparent px-3 py-2.5 text-sm sm:text-base text-slate-900 font-semibold focus:outline-none">
                                    <span class="inline-flex items-center px-3 border-l border-slate-200 bg-slate-100 text-xs sm:text-sm text-slate-500 font-semibold select-none">minutos</span>
                                </div>
                            </div>

                            
                    <!-- Lucro Desejado -->
                    <div class="sm:col-span-2 space-y-4">

                        <div>
                            <label class="block text-xs font-semibold uppercase tracking-wider text-slate-500 mb-2">
                                Margem de Lucro Desejada
                            </label>

                            <div class="grid grid-cols-4 sm:grid-cols-8 gap-2">
                                <button type="button" onclick="setLucro(25)" class="lucro-btn">25%</button>
                                <button type="button" onclick="setLucro(50)" class="lucro-btn">50%</button>
                                <button type="button" onclick="setLucro(75)" class="lucro-btn">75%</button>
                                <button type="button" onclick="setLucro(100)" class="lucro-btn active">100%</button>
                                <button type="button" onclick="setLucro(125)" class="lucro-btn">125%</button>
                                <button type="button" onclick="setLucro(150)" class="lucro-btn">150%</button>
                                <button type="button" onclick="setLucro(175)" class="lucro-btn">175%</button>
                                <button type="button" onclick="setLucro(200)" class="lucro-btn">200%</button>
                            </div>
                        </div>

                        <div>
                            <label class="block text-[11px] font-semibold uppercase tracking-wider text-slate-500 mb-1.5">
                                Personalizado
                            </label>

                            <div class="flex rounded-xl shadow-sm border border-slate-200 overflow-hidden bg-slate-50 focus-within:ring-2 focus-within:ring-emerald-500/20 focus-within:border-emerald-500 transition-all">

                                <input 
                                    type="number" 
                                    id="margemLucro" 
                                    min="0" 
                                    max="1000"
                                    value="100"
                                    oninput="updateLucroPersonalizado(this.value)"
                                    class="w-full bg-transparent px-3 py-2.5 text-sm sm:text-base text-slate-900 font-semibold focus:outline-none"
                                >

                                <span class="inline-flex items-center px-3 border-l border-slate-200 bg-slate-100 text-xs sm:text-sm text-slate-500 font-semibold select-none">
                                    %
                                </span>
                            </div>

                            <p id="labelMargem" class="text-[11px] text-emerald-600 font-bold mt-2">
                                Markup: 100%
                            </p>
                        </div>

                    </div>


                    <!-- Secção 4: Marketplaces -->
                    <div class="bg-white border border-slate-200/80 rounded-2xl p-4 sm:p-6 shadow-sm space-y-5">
                        <div class="border-b border-slate-100 pb-3">
                            <h2 class="text-base sm:text-lg font-bold text-slate-900 flex items-center gap-2">
                                <span class="w-1.5 h-5 sm:h-6 bg-orange-500 rounded-full"></span>
                                Integração com Marketplaces
                            </h2>
                            <p class="text-xs text-slate-500 mt-1">Configure as taxas de vendas do Mercado Livre e Shopee para precificar automaticamente.</p>
                        </div>

                        <!-- Configurações Mercado Livre -->
                        <div class="p-3.5 rounded-xl bg-slate-50 border border-slate-200 space-y-3 shadow-inner">
                            <div class="flex justify-between items-center border-b border-slate-200 pb-1">
                                <div class="flex items-center space-x-2">
                                    <div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
                                    <span class="text-xs sm:text-sm font-bold text-slate-800">Mercado Livre</span>
                                </div>
                            </div>
                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                                <div>
                                    <label class="block text-[10px] font-bold text-slate-500 uppercase mb-1">Comissão</label>
                                    <div class="flex rounded-lg shadow-sm border border-slate-200 overflow-hidden bg-white focus-within:ring-2 focus-within:ring-yellow-500/20 focus-within:border-yellow-500 transition-all">
                                        <input type="number" id="mlTaxaPercentual" value="14.0" step="any" oninput="calculateAll()" class="w-full bg-transparent px-3 py-1.5 text-xs font-bold focus:outline-none text-slate-800">
                                        <span class="inline-flex items-center px-2.5 border-l border-slate-200 bg-slate-100 text-xs text-slate-500 font-bold select-none">%</span>
                                    </div>
                                </div>
                                <div>
                                    <label class="block text-[10px] font-bold text-slate-500 uppercase mb-1">Taxa Fixa</label>
                                    <div class="flex rounded-lg shadow-sm border border-slate-200 overflow-hidden bg-white focus-within:ring-2 focus-within:ring-yellow-500/20 focus-within:border-yellow-500 transition-all">
                                        <span class="inline-flex items-center px-2.5 border-r border-slate-200 bg-slate-100 text-xs text-slate-500 font-bold select-none">R$</span>
                                        <input type="number" id="mlTaxaFixa" value="6.00" step="any" oninput="calculateAll()" class="w-full bg-transparent px-3 py-1.5 text-xs font-bold focus:outline-none text-slate-800">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Configurações Shopee -->
                        <div class="p-3.5 rounded-xl bg-slate-50 border border-slate-200 space-y-3 shadow-inner">
                            <div class="flex justify-between items-center border-b border-slate-200 pb-1">
                                <div class="flex items-center space-x-2">
                                    <div class="w-2.5 h-2.5 rounded-full bg-orange-500"></div>
                                    <span class="text-xs sm:text-sm font-bold text-slate-800">Shopee</span>
                                </div>
                            </div>
                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                                <div>
                                    <label class="block text-[10px] font-bold text-slate-500 uppercase mb-1">Comissão</label>
                                    <div class="flex rounded-lg shadow-sm border border-slate-200 overflow-hidden bg-white focus-within:ring-2 focus-within:ring-orange-500/20 focus-within:border-orange-500 transition-all">
                                        <input type="number" id="shopeeTaxaPercentual" value="18.0" step="any" oninput="calculateAll()" class="w-full bg-transparent px-3 py-1.5 text-xs font-bold focus:outline-none text-slate-800">
                                        <span class="inline-flex items-center px-2.5 border-l border-slate-200 bg-slate-100 text-xs text-slate-500 font-bold select-none">%</span>
                                    </div>
                                </div>
                                <div>
                                    <label class="block text-[10px] font-bold text-slate-500 uppercase mb-1">Taxa Fixa</label>
                                    <div class="flex rounded-lg shadow-sm border border-slate-200 overflow-hidden bg-white focus-within:ring-2 focus-within:ring-orange-500/20 focus-within:border-orange-500 transition-all">
                                        <span class="inline-flex items-center px-2.5 border-r border-slate-200 bg-slate-100 text-xs text-slate-500 font-bold select-none">R$</span>
                                        <input type="number" id="shopeeTaxaFixa" value="3.00" step="any" oninput="calculateAll()" class="w-full bg-transparent px-3 py-1.5 text-xs font-bold focus:outline-none text-slate-800">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

                <!-- Guardar Configurações -->
                <div class="bg-white border border-slate-200 rounded-2xl p-4 sm:p-6 shadow-sm">
                    <h3 class="text-xs sm:text-sm font-bold text-slate-800 mb-3 flex items-center justify-between">
                        <span>💾 Guardar como Perfil</span>
                        <span class="text-[10px] text-slate-400 font-normal hidden sm:inline">Guarde presets</span>
                    </h3>
                    <div class="flex flex-col sm:flex-row gap-2">
                        <input type="text" id="presetName" placeholder="Ex: Ender 3 - PLA" class="flex-grow bg-slate-50 border border-slate-200 focus:border-sky-500 rounded-xl px-4 py-2.5 text-xs font-semibold focus:outline-none text-slate-800">
                        <button onclick="saveCurrentPreset()" class="bg-gradient-to-r from-sky-500 to-indigo-600 hover:from-sky-600 hover:to-indigo-700 text-white font-bold text-xs py-2.5 px-4 rounded-xl transition duration-200 shadow-md">
                            Salvar Perfil
                        </button>
                    </div>
                    <div id="presetsList" class="flex flex-wrap gap-1.5 mt-3">
                        <!-- Presets injetados dinamicamente via JS -->
                    </div>
                </div>

            </div>

            <!-- Coluna da Direita: Painel Resumo e Preços (Sticky para Desktop) -->
            <div id="resultsColumn" class="lg:col-span-5 xl:col-span-4 flex flex-col space-y-4 sm:space-y-6 lg:sticky lg:top-24 h-fit">
                
                <!-- Card de Custo Total (Principal) -->
                <div class="bg-white border border-slate-200 rounded-2xl sm:rounded-3xl p-5 sm:p-6 shadow-md relative overflow-hidden flex flex-col justify-between">
                    <div class="absolute -top-12 -right-12 w-32 h-32 bg-sky-500/5 rounded-full blur-2xl"></div>
                    <div class="absolute -bottom-12 -left-12 w-32 h-32 bg-indigo-500/5 rounded-full blur-2xl"></div>

                    <div class="relative">
                        <span class="text-xs font-bold uppercase tracking-widest text-slate-500">Custo de Produção</span>
                        <div class="flex items-baseline space-x-1.5 mt-1 sm:mt-2">
                            <span class="text-sm text-slate-500 font-bold">R$</span>
                            <span id="custoTotalCalculado" class="text-4xl sm:text-5xl font-extrabold text-transparent bg-gradient-to-r from-slate-900 to-slate-700 bg-clip-text">0,00</span>
                        </div>
                    </div>

                    <div class="border-t border-slate-100 my-4 pt-3 space-y-2 text-xs">
                        <div class="flex justify-between items-center text-slate-600 font-medium">
                            <span>Material Usado:</span>
                            <span id="resumoFilamento" class="font-bold text-slate-900">0,00g</span>
                        </div>
                        <div class="flex justify-between items-center text-slate-600 font-medium">
                            <span>Energia:</span>
                            <span id="resumoEnergia" class="font-bold text-slate-900">R$ 0,00</span>
                        </div>
                        <div class="flex justify-between items-center text-slate-600 font-medium">
                            <span>Desgaste:</span>
                            <span id="resumoManutencao" class="font-bold text-slate-900">R$ 0,00</span>
                        </div>
                        <div class="flex justify-between items-center text-slate-600 font-medium">
                            <span>Mão de Obra:</span>
                            <span id="resumoMaoDeObra" class="font-bold text-slate-900">R$ 0,00</span>
                        </div>
                    </div>

                    <!-- Botão Sugestão de Venda Base (Sem Marketplace) -->
                    <div class="bg-emerald-50 p-3 sm:p-4 rounded-xl sm:rounded-2xl border border-emerald-100 text-center relative shadow-sm">
                        <span class="text-[9px] font-bold uppercase tracking-widest text-emerald-800 block mb-0.5">Preço Sugerido (Venda Direta)</span>
                        <span id="precoSugeridoVenda" class="text-xl sm:text-2xl font-black text-emerald-600">R$ 0,00</span>
                    </div>
                </div>

                <!-- Gráfico de Rosca -->
                <div class="bg-white border border-slate-200 rounded-2xl sm:rounded-3xl p-4 sm:p-6 shadow-sm flex flex-col items-center">
                    <h3 class="text-xs font-bold uppercase text-slate-500 tracking-wider mb-3 self-start">Divisão de Custos</h3>
                    <div class="w-full max-w-[170px] h-[170px] flex items-center justify-center relative">
                        <canvas id="costChart"></canvas>
                    </div>
                    <div class="grid grid-cols-2 gap-x-3 gap-y-1.5 mt-3 w-full text-[10px] font-medium">
                        <div class="flex items-center space-x-1.5">
                            <span class="w-2.5 h-2.5 rounded-full bg-sky-500 inline-block"></span>
                            <span class="text-slate-600 whitespace-nowrap">Material (<span id="pctMaterial" class="font-bold text-slate-800">0%</span>)</span>
                        </div>
                        <div class="flex items-center space-x-1.5">
                            <span class="w-2.5 h-2.5 rounded-full bg-amber-500 inline-block"></span>
                            <span class="text-slate-600 whitespace-nowrap">Energia (<span id="pctEnergia" class="font-bold text-slate-800">0%</span>)</span>
                        </div>
                        <div class="flex items-center space-x-1.5">
                            <span class="w-2.5 h-2.5 rounded-full bg-violet-500 inline-block"></span>
                            <span class="text-slate-600 whitespace-nowrap">Desgaste (<span id="pctDesgaste" class="font-bold text-slate-800">0%</span>)</span>
                        </div>
                        <div class="flex items-center space-x-1.5">
                            <span class="w-2.5 h-2.5 rounded-full bg-emerald-500 inline-block"></span>
                            <span class="text-slate-600 whitespace-nowrap">Trabalho (<span id="pctTrabalho" class="font-bold text-slate-800">0%</span>)</span>
                        </div>
                    </div>
                </div>

                <!-- Painel de Plataformas / Anúncio -->
                <div class="bg-white border border-slate-200 rounded-2xl sm:rounded-3xl p-4 sm:p-6 shadow-sm space-y-3 sm:space-y-4">
                    <h3 class="text-xs sm:text-sm font-bold text-slate-800">Precificação nas Plataformas</h3>
                    
                    <!-- Mercado Livre Precificador -->
                    <div class="bg-slate-50 p-3 sm:p-4 rounded-xl sm:rounded-2xl border border-slate-200 space-y-1.5 relative overflow-hidden shadow-sm">
                        <div class="absolute right-3 top-3">
                            <span class="px-1.5 py-0.5 text-[8px] font-bold rounded bg-yellow-400/20 text-yellow-800 border border-yellow-400/30">Mercado Livre</span>
                        </div>
                        <span class="text-[9px] font-bold text-slate-500 uppercase">Preço do Anúncio</span>
                        <div id="mlAnuncioPreco" class="text-lg sm:text-xl font-black text-slate-900">R$ 0,00</div>
                        <div class="text-[10px] text-slate-600 flex justify-between pt-1 border-t border-slate-200">
                            <span class="font-medium">Sua Receita Líquida:</span>
                            <span id="mlLucroLiquido" class="font-bold text-emerald-600">R$ 0,00</span>
                        </div>
                        <div class="text-[9px] text-slate-500 flex justify-between font-medium">
                            <span>Taxas deduzidas:</span>
                            <span id="mlTotalTaxas" class="font-bold">R$ 0,00</span>
                        </div>
                    </div>

                    <!-- Shopee Precificador -->
                    <div class="bg-slate-50 p-3 sm:p-4 rounded-xl sm:rounded-2xl border border-slate-200 space-y-1.5 relative overflow-hidden shadow-sm">
                        <div class="absolute right-3 top-3">
                            <span class="px-1.5 py-0.5 text-[8px] font-bold rounded bg-orange-500/20 text-orange-800 border border-orange-500/30">Shopee</span>
                        </div>
                        <span class="text-[9px] font-bold text-slate-500 uppercase">Preço do Anúncio</span>
                        <div id="shopeeAnuncioPreco" class="text-lg sm:text-xl font-black text-slate-900">R$ 0,00</div>
                        <div class="text-[10px] text-slate-600 flex justify-between pt-1 border-t border-slate-200">
                            <span class="font-medium">Sua Receita Líquida:</span>
                            <span id="shopeeLucroLiquido" class="font-bold text-emerald-600">R$ 0,00</span>
                        </div>
                        <div class="text-[9px] text-slate-500 flex justify-between font-medium">
                            <span>Taxas deduzidas:</span>
                            <span id="shopeeTotalTaxas" class="font-bold">R$ 0,00</span>
                        </div>
                    </div>
                </div>

            </div>
            
        </div>
    </main>

    <!-- Custom Alert Toast (Otimizado para visibilidade clara) -->
    <div id="customToast" class="fixed bottom-20 lg:bottom-4 right-4 z-50 transform translate-y-20 opacity-0 pointer-events-none transition-all duration-300 bg-white border border-slate-200 text-slate-800 px-4 py-3 rounded-xl shadow-xl flex items-center space-x-2">
        <span id="toastIcon" class="text-base">⚠️</span>
        <span id="toastMessage" class="text-xs font-bold"></span>
    </div>

    
    <!-- BOTÃO FINAL -->
    <div class="max-w-7xl mx-auto px-4 pb-8 flex justify-center">
        <a href="https://www.printlabstl.com"
           class="inline-flex items-center justify-center gap-3 bg-gradient-to-r from-slate-900 to-slate-700 hover:from-slate-800 hover:to-slate-600 text-white text-base font-extrabold px-8 py-4 rounded-2xl transition-all duration-200 shadow-xl shadow-slate-900/20">

            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M15 19l-7-7 7-7" />
            </svg>

            Voltar para Página Inicial
        </a>
    </div>

    <footer class="border-t border-slate-200 bg-white py-4 text-center text-slate-500 text-[10px] shadow-inner">
        <p class="font-semibold">© 2026 PRINTLAB STL. Otimize os seus custos, aumente os seus lucros.</p>
    </footer>

    <script>
        // Inicialização do Gráfico do Chart.js
        let ctx = document.getElementById('costChart').getContext('2d');
        let costChart = new Chart(ctx, {
            type: 'doughnut',
            data: {
                labels: ['Material', 'Energia', 'Desgaste', 'Mão de Obra'],
                datasets: [{
                    data: [0, 0, 0, 0],
                    backgroundColor: [
                        '#0ea5e9', // Sky-500
                        '#f59e0b', // Amber-500
                        '#8b5cf6', // Violet-500
                        '#10b981'  // Emerald-500
                    ],
                    borderWidth: 0,
                    hoverOffset: 4
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false
                    },
                    tooltip: {
                        backgroundColor: '#0f172a',
                        titleColor: '#fff',
                        bodyColor: '#fff',
                        callbacks: {
                            label: function(context) {
                                let label = context.label || '';
                                if (label) {
                                    label += ': ';
                                }
                                if (context.parsed !== null) {
                                    label += new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(context.parsed);
                                }
                                return label;
                            }
                        }
                    }
                },
                cutout: '72%'
            }
        });

        // Função para scroll suave até a coluna de resultados completos no celular
        function scrollToResults() {
            const results = document.getElementById('resultsColumn');
            if (results) {
                results.scrollIntoView({ behavior: 'smooth', block: 'start' });
            }
        }

        // Função de Notificação Customizada
        function triggerToast(message, isSuccess = false) {
            const toast = document.getElementById('customToast');
            const icon = document.getElementById('toastIcon');
            const text = document.getElementById('toastMessage');
            
            icon.innerText = isSuccess ? '✅' : '⚠️';
            text.innerText = message;
            
            toast.classList.remove('translate-y-20', 'opacity-0', 'pointer-events-none');
            
            setTimeout(() => {
                toast.classList.add('translate-y-20', 'opacity-0', 'pointer-events-none');
            }, 3000);
        }

        // Atualiza etiqueta do controle deslizante (lucro)
        
        function updateMargemLabel(val) {
            document.getElementById('labelMargem').innerText =
                `Markup: ${val}% (Custo × ${(1 + val / 100).toFixed(2)})`;
        }

        function setLucro(valor) {

            document.getElementById('margemLucro').value = valor;

            document.querySelectorAll('.lucro-btn').forEach(btn => {
                btn.classList.remove('active');

                if (btn.innerText === valor + '%') {
                    btn.classList.add('active');
                }
            });

            updateMargemLabel(valor);
            calculateAll();
        }

        function updateLucroPersonalizado(valor) {

            document.querySelectorAll('.lucro-btn').forEach(btn => {
                btn.classList.remove('active');
            });

            updateMargemLabel(valor);
            calculateAll();
        }

// Cálculos Financeiros Dinâmicos
        function calculateAll() {
            // Obtenção de entradas - Filamento
            let pesoPeca = parseFloat(document.getElementById('pesoPeca').value) || 0;
            let precoRolo = parseFloat(document.getElementById('precoRolo').value) || 0;
            let pesoRolo = parseFloat(document.getElementById('pesoRolo').value) || 1000;
            let taxaFalha = parseFloat(document.getElementById('taxaFalha').value) || 0;

            // Obtenção de entradas - Tempo
            let tempoHoras = parseFloat(document.getElementById('tempoHoras').value) || 0;
            let tempoMinutos = parseFloat(document.getElementById('tempoMinutos').value) || 0;
            let tempoTotalHoras = tempoHoras + (tempoMinutos / 60);

            // Obtenção de entradas - Energia
            let potenciaImpressora = parseFloat(document.getElementById('potenciaImpressora').value) || 0;
            let custoKwh = parseFloat(document.getElementById('custoKwh').value) || 0;
            let taxaManutencao = parseFloat(document.getElementById('taxaManutencao').value) || 0;

            // Obtenção de entradas - Trabalho
            let valorHoraTrabalho = parseFloat(document.getElementById('valorHoraTrabalho').value) || 0;
            let tempoTrabalhoMinutos = parseFloat(document.getElementById('tempoTrabalhoMinutos').value) || 0;
            let tempoTrabalhoHoras = tempoTrabalhoMinutos / 60;

            // Margem de Lucro Desejada
            let margemLucroPct = parseFloat(document.getElementById('margemLucro').value) || 0;

            // 1. CÁLCULO DE CUSTO DE FILAMENTO (com taxa de falhas)
            let pesoEfetivo = pesoPeca * (1 + (taxaFalha / 100));
            let custoFilamento = (pesoEfetivo / pesoRolo) * precoRolo;

            // 2. CÁLCULO DE CUSTO DE ENERGIA
            let kwhConsumido = (potenciaImpressora / 1000) * tempoTotalHoras;
            let custoEnergia = kwhConsumido * custoKwh;

            // 3. CÁLCULO DE TAXA DE DESGASTE (MANUTENÇÃO)
            let custoManutencao = tempoTotalHoras * taxaManutencao;

            // 4. CÁLCULO DE MÃO DE OBRA
            let custoMaoDeObra = tempoTrabalhoHoras * valorHoraTrabalho;

            // CUSTO TOTAL BRUTO
            let custoTotal = custoFilamento + custoEnergia + custoManutencao + custoMaoDeObra;

            // Atualização dos textos do painel de resumos
            document.getElementById('custoTotalCalculado').innerText = custoTotal.toLocaleString('pt-BR', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
            
            // Atualiza a barra flutuante do celular também!
            

            document.getElementById('resumoFilamento').innerText = `${pesoEfetivo.toFixed(1)}g (${custoFilamento.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' })})`;
            document.getElementById('resumoEnergia').innerText = custoEnergia.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' });
            document.getElementById('resumoManutencao').innerText = custoManutencao.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' });
            document.getElementById('resumoMaoDeObra').innerText = custoMaoDeObra.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' });

            // PREÇO SUGERIDO (VENDA DIRETA) - Sem taxas extras de terceiros
            let precoSugeridoVendaDireta = custoTotal * (1 + (margemLucroPct / 100));
            document.getElementById('precoSugeridoVenda').innerText = precoSugeridoVendaDireta.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' });
            
            // Atualiza o valor de sugestão da barra fixa do celular
            

            // Atualização detalhada mobile
            

            

            

            

            // 5. CÁLCULOS MARKETPLACES
            // Mercado Livre
            let mlTaxaPercentual = (parseFloat(document.getElementById('mlTaxaPercentual').value) || 0) / 100;
            let mlTaxaFixa = parseFloat(document.getElementById('mlTaxaFixa').value) || 0;
            
            let mlPrecoAnuncio = 0;
            let mlTarifaTotal = 0;
            if (mlTaxaPercentual < 1) {
                mlPrecoAnuncio = (precoSugeridoVendaDireta + mlTaxaFixa) / (1 - mlTaxaPercentual);
                mlTarifaTotal = (mlPrecoAnuncio * mlTaxaPercentual) + mlTaxaFixa;
            }

            // Shopee
            let shopeeTaxaPercentual = (parseFloat(document.getElementById('shopeeTaxaPercentual').value) || 0) / 100;
            let shopeeTaxaFixa = parseFloat(document.getElementById('shopeeTaxaFixa').value) || 0;

            let shopeePrecoAnuncio = 0;
            let shopeeTarifaTotal = 0;
            if (shopeeTaxaPercentual < 1) {
                shopeePrecoAnuncio = (precoSugeridoVendaDireta + shopeeTaxaFixa) / (1 - shopeeTaxaPercentual);
                shopeeTarifaTotal = (shopeePrecoAnuncio * shopeeTaxaPercentual) + shopeeTaxaFixa;
            }

            // Injetando valores calculados no HTML dos Marketplaces
            document.getElementById('mlAnuncioPreco').innerText = mlPrecoAnuncio.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' });
            document.getElementById('mlLucroLiquido').innerText = precoSugeridoVendaDireta.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' });
            document.getElementById('mlTotalTaxas').innerText = mlTarifaTotal.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' });

            document.getElementById('shopeeAnuncioPreco').innerText = shopeePrecoAnuncio.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' });
            document.getElementById('shopeeLucroLiquido').innerText = precoSugeridoVendaDireta.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' });
            document.getElementById('shopeeTotalTaxas').innerText = shopeeTarifaTotal.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' });

            // 6. ATUALIZAÇÃO DO GRÁFICO E DE PORCENTAGENS
            let somaCustos = custoFilamento + custoEnergia + custoManutencao + custoMaoDeObra;
            if (somaCustos > 0) {
                let pMaterial = ((custoFilamento / somaCustos) * 100).toFixed(0);
                let pEnergia = ((custoEnergia / somaCustos) * 100).toFixed(0);
                let pDesgaste = ((custoManutencao / somaCustos) * 100).toFixed(0);
                let pTrabalho = ((custoMaoDeObra / somaCustos) * 100).toFixed(0);

                document.getElementById('pctMaterial').innerText = pMaterial + '%';
                document.getElementById('pctEnergia').innerText = pEnergia + '%';
                document.getElementById('pctDesgaste').innerText = pDesgaste + '%';
                document.getElementById('pctTrabalho').innerText = pTrabalho + '%';

                costChart.data.datasets[0].data = [
                    custoFilamento.toFixed(2),
                    custoEnergia.toFixed(2),
                    custoManutencao.toFixed(2),
                    custoMaoDeObra.toFixed(2)
                ];
                costChart.update();
            } else {
                costChart.data.datasets[0].data = [0, 0, 0, 0];
                costChart.update();
            }
        }

        // --- SISTEMA DE PRESETS & PERFIS ---
        const defaultPresets = {
            "padrao": {
                name: "PLA Padrão (Ender/Slicer)",
                pesoPeca: 150, precoRolo: 120.00, pesoRolo: 1000, tempoHoras: 4, tempoMinutos: 30, taxaFalha: 10,
                potenciaImpressora: 150, custoKwh: 0.85, taxaManutencao: 0.50,
                valorHoraTrabalho: 25.00, tempoTrabalhoMinutos: 30, margemLucro: 100,
                mlTaxaPercentual: 14.0, mlTaxaFixa: 6.00, shopeeTaxaPercentual: 18.0, shopeeTaxaFixa: 3.00
            },
            "bambu_abs": {
                name: "ABS Rápido (Bambu Lab)",
                pesoPeca: 200, precoRolo: 145.00, pesoRolo: 1000, tempoHoras: 2, tempoMinutos: 15, taxaFalha: 5,
                potenciaImpressora: 300, custoKwh: 0.85, taxaManutencao: 0.90,
                valorHoraTrabalho: 35.00, tempoTrabalhoMinutos: 15, margemLucro: 120,
                mlTaxaPercentual: 14.0, mlTaxaFixa: 6.00, shopeeTaxaPercentual: 18.0, shopeeTaxaFixa: 3.00
            },
            "artesanato_gourmet": {
                name: "Colecionáveis / Premium",
                pesoPeca: 80, precoRolo: 180.00, pesoRolo: 1000, tempoHoras: 6, tempoMinutos: 0, taxaFalha: 15,
                potenciaImpressora: 120, custoKwh: 0.85, taxaManutencao: 0.40,
                valorHoraTrabalho: 50.00, tempoTrabalhoMinutos: 120, margemLucro: 200,
                mlTaxaPercentual: 19.0, mlTaxaFixa: 0.00, shopeeTaxaPercentual: 20.0, shopeeTaxaFixa: 3.00
            }
        };

        function getPresets() {
            let saved = localStorage.getItem('printlab_presets');
            if (saved) {
                try {
                    return JSON.parse(saved);
                } catch(e) {
                    return defaultPresets;
                }
            }
            return defaultPresets;
        }

        function savePresets(presets) {
            localStorage.setItem('printlab_presets', JSON.stringify(presets));
        }

        function renderPresets() {
            let presets = getPresets();
            let list = document.getElementById('presetsList');
            
            list.innerHTML = "";

            Object.keys(presets).forEach(key => {
                let badge = document.createElement('div');
                badge.className = "flex items-center space-x-1.5 bg-slate-100 hover:bg-slate-200 border border-slate-200 text-[10px] sm:text-[11px] font-bold text-slate-700 px-2.5 py-1.5 rounded-lg transition shadow-sm cursor-pointer";
                
                let link = document.createElement('button');
                link.innerText = presets[key].name;
                link.onclick = () => loadPreset(key);
                badge.appendChild(link);

                if (key !== "padrao" && key !== "bambu_abs" && key !== "artesanato_gourmet") {
                    let delBtn = document.createElement('button');
                    delBtn.innerHTML = "×";
                    delBtn.className = "text-red-600 hover:text-red-500 font-extrabold ml-1.5 text-xs px-1";
                    delBtn.onclick = (e) => {
                        e.stopPropagation();
                        deletePreset(key);
                    };
                    badge.appendChild(delBtn);
                }

                list.appendChild(badge);
            });
        }

        function saveCurrentPreset() {
            let nameInput = document.getElementById('presetName');
            let name = nameInput.value.trim();
            if (!name) {
                triggerToast("Introduza um nome para o perfil.");
                return;
            }

            let key = "custom_" + Date.now();
            let presets = getPresets();

            presets[key] = {
                name: name,
                pesoPeca: parseFloat(document.getElementById('pesoPeca').value) || 0,
                precoRolo: parseFloat(document.getElementById('precoRolo').value) || 0,
                pesoRolo: parseFloat(document.getElementById('pesoRolo').value) || 1000,
                tempoHoras: parseFloat(document.getElementById('tempoHoras').value) || 0,
                tempoMinutos: parseFloat(document.getElementById('tempoMinutos').value) || 0,
                taxaFalha: parseFloat(document.getElementById('taxaFalha').value) || 0,
                potenciaImpressora: parseFloat(document.getElementById('potenciaImpressora').value) || 0,
                custoKwh: parseFloat(document.getElementById('custoKwh').value) || 0,
                taxaManutencao: parseFloat(document.getElementById('taxaManutencao').value) || 0,
                valorHoraTrabalho: parseFloat(document.getElementById('valorHoraTrabalho').value) || 0,
                tempoTrabalhoMinutos: parseFloat(document.getElementById('tempoTrabalhoMinutos').value) || 0,
                margemLucro: parseFloat(document.getElementById('margemLucro').value) || 100,
                mlTaxaPercentual: parseFloat(document.getElementById('mlTaxaPercentual').value) || 0,
                mlTaxaFixa: parseFloat(document.getElementById('mlTaxaFixa').value) || 0,
                shopeeTaxaPercentual: parseFloat(document.getElementById('shopeeTaxaPercentual').value) || 0,
                shopeeTaxaFixa: parseFloat(document.getElementById('shopeeTaxaFixa').value) || 0
            };

            savePresets(presets);
            nameInput.value = "";
            renderPresets();
            
            loadPreset(key);
            triggerToast("Perfil guardado!", true);
        }

        function deletePreset(key) {
            let presets = getPresets();
            if (presets[key]) {
                delete presets[key];
                savePresets(presets);
                renderPresets();
                loadPreset("padrao");
                triggerToast("Perfil removido.");
            }
        }

        function loadPreset(key) {
            let presets = getPresets();
            let preset = presets[key] || presets["padrao"];

            document.getElementById('pesoPeca').value = preset.pesoPeca;
            document.getElementById('precoRolo').value = preset.precoRolo;
            document.getElementById('pesoRolo').value = preset.pesoRolo;
            document.getElementById('tempoHoras').value = preset.tempoHoras;
            document.getElementById('tempoMinutos').value = preset.tempoMinutos;
            document.getElementById('taxaFalha').value = preset.taxaFalha;

            document.getElementById('potenciaImpressora').value = preset.potenciaImpressora;
            document.getElementById('custoKwh').value = preset.custoKwh;
            document.getElementById('taxaManutencao').value = preset.taxaManutencao;

            document.getElementById('valorHoraTrabalho').value = preset.valorHoraTrabalho;
            document.getElementById('tempoTrabalhoMinutos').value = preset.tempoTrabalhoMinutos;
            
            document.getElementById('margemLucro').value = preset.margemLucro;
            updateMargemLabel(preset.margemLucro);

            document.getElementById('mlTaxaPercentual').value = preset.mlTaxaPercentual;
            document.getElementById('mlTaxaFixa').value = preset.mlTaxaFixa;
            document.getElementById('shopeeTaxaPercentual').value = preset.shopeeTaxaPercentual;
            document.getElementById('shopeeTaxaFixa').value = preset.shopeeTaxaFixa;

            calculateAll();
        }

        window.onload = function() {
            renderPresets();
            loadPreset("padrao");
        }
    </script>
</body>
</html>/* End custom CSS */