#openFormBtn {
            padding: 12px 25px;
            font-size: 1em;
            font-weight: bold;
            color: white;
            background-color: #007bff;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: background-color 0.0s ease;
        }

        #openFormBtn:hover {
            background-color: #0056b3;
        }

        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            visibility: hidden;
            opacity: 0;
            transition: opacity 0.0s ease-in-out, visibility 0s 0.0s;
        }
        
        .modal-overlay.show {
            visibility: visible;
            opacity: 1;
            transition: opacity 0.0s ease-in-out;
        }
        
        #formOverlay .container {
             height: 85vh;
             max-height: 90vh;
             overflow-y: auto;
             transform: scale(0.95);
             opacity: 0;
             transition: transform 0.0s ease-out, opacity 0.0s ease-out;
        }

        #formOverlay.show .container {
            transform: none;
            opacity: 1;
        }
        
        .container_Produto {
            background-color: white;
            padding: 30px 40px;
            border-radius: 10px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 1020px;
            position: relative;
            min-height: auto;
        }

        .form-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            flex-wrap: nowrap;
        }

        .form-header h2 {
            margin: 0;
            color: #333;
            flex-shrink: 1;
            min-width: 0;
        }

        .header-buttons {
            display: flex;
            gap: 10px;
            flex-shrink: 0;
        }

        .header-submit-btn, .header-close-btn {
            padding: 12px 20px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: background-color 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            font-size: 1em;
            font-weight: bold;
        }
        
        .header-submit-btn svg, .header-close-btn svg {
            width: 20px;
            height: 20px;
        }

        .header-submit-btn {
            background-color: #007bff;
            color: white;
        }

        .header-submit-btn:hover {
            background-color: #0056b3;
        }

        .header-close-btn {
            background-color: #e5e7eb;
            color: #374151;
            border: 1px solid #d1d5db;
        }

        .header-close-btn:hover {
            background-color: #d1d5db;
        }

        @media (max-width: 768px) {
          

            .header-submit-btn, .header-close-btn {
                padding: 10px 15px;
            }
            
            .field-group-inline, .stock-group {
                flex-direction: column;
            }

            .price-grid {
                flex-direction: column;
            }
        }
        
        /* Estilos para o novo contêiner das abas */
        .tabs-wrapper {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }

        .tabs {
            display: flex;
            flex-wrap: nowrap;
            justify-content: flex-start;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
            -ms-overflow-style: none;
            border-bottom: 1px solid #ddd;
            flex-grow: 1;
        }
        
        .tabs::-webkit-scrollbar {
            display: none;
        }

        .tab-button {
            padding: 12px 25px;
            cursor: pointer;
            border: 1px solid #ddd;
            border-bottom: none;
            background-color: #f1f1f1;
            font-size: 1.1em;
            font-weight: bold;
            color: #555;
            transition: color 0.3s, background-color 0.3s, border-color 0.3s;
            white-space: nowrap;
            border-radius: 8px 8px 0 0;
            position: relative;
            bottom: -1px;
        }

        .tab-button:not(.active):hover {
            background-color: #e9ecef;
            color: #333;
        }

        .tab-button.active {
            color: #007bff;
            background-color: #ffffff;
            border-bottom-color: #ffffff;
        }

        .tab-arrow {
            background-color: transparent;
            border: 1px solid transparent;
            cursor: pointer;
            padding: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #9ca3af; /* Lighter gray for a modern feel */
            transition: all 0.2s ease-in-out;
            border-radius: 9999px; /* Fully rounded */
            flex-shrink: 0;
        }

        .tab-arrow:hover {
            color: #111827; /* Darker text color on hover */
            background-color: #f3f4f6; /* Light background on hover */
            border-color: #e5e7eb; /* Subtle border on hover */
        }

        .tab-pane {
            display: none;
        }

        .tab-pane.active {
            display: block;
        }

#productForm {
    min-height: 65vh; 
    max-height: 65vh;  
    overflow-y: auto;  
    /* overflow-x: hidden; <-- Remova esta linha para parar de cortar as laterais */
    
    /* Adicionamos box-sizing e arrumamos o padding (Cima, Direita, Baixo, Esquerda) */
    padding: 5px 10px 5px 5px; 
    box-sizing: border-box; 
}
 /* Deixa a barra de rolagem do formulário mais elegante */
#productForm::-webkit-scrollbar {
    width: 10px;
}
#productForm::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 4px;
}       
        .form-group {
            margin-bottom: 15px;
        }

         label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
            color: black;
        } 
        
        .required {
            color: red;
            margin-left: 4px;
        }
        
        .input-with-button {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        input[type="text"],
        input[type="number"],
        textarea,
        select {
            width: 100%;
            padding: 10px;
             border: 1px solid #ccc; 
             border-radius: 8px; 
             box-sizing: border-box; 
            color: black !important;
            font-size: 1em;
            height: 3rem
        }
        
        .input-with-button select {
            flex-grow: 1;
            width: auto;
        }

        input[type="text"]:focus,
        input[type="number"]:focus,
        textarea:focus,
        select:focus {
            border-color: #007bff;
            outline: none;
            box-shadow: 0 0 5px rgba(0, 123, 255, 0.25);
        }
        
        .add-option-btn {
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.5em;
    font-weight: bold;
    line-height: 1;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease;
    
    /* ADICIONE/VERIFIQUE ESTA LINHA */
    flex-shrink: 0;
}
        
        .add-option-btn:hover {
            background-color: #218838;
        }

        textarea {
            resize: vertical;
        }

        .field-group-inline {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
        }
        
        .price-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
        }

        @media (max-width: 768px) {
            .price-grid {
                grid-template-columns: 1fr;
            }
        }
        
        .price-item {
            display: flex;
            flex-direction: column;
        }

        .price-item .form-group {
            margin-bottom: 8px;
        }

        .stock-group {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
        }

        .field-group-inline .form-group,
        .price-grid .form-group, 
        .stock-group .form-group {
            flex-grow: 1;
            min-width: 150px;
        }
        
        .field-group-inline .code-group {
            flex-grow: 0;
            flex-basis: 150px;
        }
        
        .activation-group {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }

        .activation-group label {
            margin-bottom: 0;
            margin-right: 10px;
        }

      /* Fundo do botão (agora menor e mais elegante) */
.activation-group input[type="checkbox"] {
    appearance: none; 
    -webkit-appearance: none;
    width: 85px !important; /* 👈 Reduzimos para 85px */
    height: 28px !important; 
    background-color: #dc3545; /* Vermelho para Inativo */
    border-radius: 28px; 
    position: relative;
    cursor: pointer;
    outline: none;
    margin: 0;
    transition: background-color 0.3s ease;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.2); 
}

/* A bolinha branca */
.activation-group input[type="checkbox"]::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 24px;
    height: 24px;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 2; 
}

/* O Texto "INATIVO" */
.activation-group input[type="checkbox"]::before {
    content: 'INATIVO'; /* 👈 Texto alterado */
    position: absolute;
    top: 0;
    left: 28px;
    right: 8px; /* Ajuste fino para centralizar o texto no espaço vazio */
    height: 100%;
    display: flex;
    align-items: center;
    color: white;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 0.5px;
    z-index: 1;
}

/* Quando marcado: Fundo fica Verde */
.activation-group input[type="checkbox"]:checked {
    background-color: #28a745; 
}

/* Quando marcado: Bolinha desliza na medida exata */
.activation-group input[type="checkbox"]:checked::after {
    /* 85px (largura total) - 24px (bolinha) - 4px (bordas) = 57px */
    transform: translateX(57px); /* 👈 Ajustado para o novo tamanho */
}

/* Quando marcado: Muda o texto para "ATIVO" */
.activation-group input[type="checkbox"]:checked::before {
    content: 'ATIVO';
    right: auto;
    left: 12px; /* Ajuste fino para o lado esquerdo */
}

/* Efeito de foco para teclado */
.activation-group input[type="checkbox"]:focus {
    box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.2);
}

/* Ajuste do Label ao lado do botão */
.activation-group label {
    margin-bottom: 0;
    margin-right: 12px;
    cursor: pointer;
}

        .image-preview {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin-top: 15px;
            border: 1px dashed #ccc;
            padding: 10px;
            border-radius: 8px;
            min-height: 120px;
        }

        .image-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            position: relative;
        }

        .image-item img {
            width: 100px;
            height: 100px;
            border-radius: 8px;
            object-fit: cover;
            cursor: pointer;
        }
        
        .image-item label {
            display: flex;
            align-items: center;
            gap: 5px;
            font-size: 0.9em;
            font-weight: normal;
        }
        
        .remove-image-btn {
            position: absolute;
            top: 2px;
            right: 2px;
            background-color: rgba(255, 0, 0, 0.7);
            color: white;
            border: none;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            font-size: 14px;
            line-height: 20px;
            text-align: center;
            cursor: pointer;
            transition: background-color 0.2s;
        }
        .remove-image-btn:hover {
            background-color: rgba(255, 0, 0, 1);
        }



    
        
        .print-port-group, .storage-group, .accompaniment-group {
            display: flex;
            gap: 10px;
            align-items: flex-end;
            margin-bottom: 20px;
        }

        .print-port-group .form-group, .storage-group .form-group, .accompaniment-group .form-group {
            flex-grow: 1;
            margin-bottom: 0;
        }

        #addPrintPortBtn, #addStorageBtn, #addAccompanimentBtn {
            background-color: #28a745;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 8px;
            font-size: 1em;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        #addPrintPortBtn:hover, #addStorageBtn:hover, #addAccompanimentBtn:hover {
            background-color: #218838;
        }

        .print-ports-table, .stock-table {
            border-collapse: collapse;
            width: 100%;
            margin-top: 20px;
            font-size: 1em;
        }
        
        .stock-table th, .stock-table td {
            padding: 12px;
            text-align: left;
        }
        
        .stock-table th {
            background-color: #f8f8f8;
            font-weight: bold;
            color: #555;
            border-bottom: 2px solid #ddd;
        }
        
        .stock-table tr:nth-child(even) {
            background-color: #f2f2f2;
        }

        .print-ports-table th, .print-ports-table td {
            padding: 12px;
            border-bottom: 1px solid #ddd;
            text-align: left;
        }
        
        .print-ports-table .action-cell {
            text-align: right;
            white-space: nowrap;
        }

        .print-ports-table th {
            background-color: #f8f8f8;
            font-weight: bold;
            color: #555;
        }

        .print-ports-table tr:nth-child(even) {
            background-color: #f2f2f2;
        }

        .remove-print-port-btn, .edit-storage-btn {
            color: white;
            border: none;
            padding: 8px 12px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 0.9em;
            margin-left: 5px;
        }

        .remove-print-port-btn {
             background-color: #dc3545;
        }
        .edit-storage-btn {
             background-color: #007bff;
        }
        
        .modal {
            background-color: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
            width: 90%;
            max-width: 400px;
        }
        
        .modal h3 {
            margin-top: 0;
            font-size: 1.2em;
            color: #333;
            border-bottom: 2px solid #ddd;
            padding-bottom: 10px;
            margin-bottom: 20px;
        }
        
        .modal-actions {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            margin-top: 20px;
        }

        .profit-value {
            font-weight: normal;
            color: #6c757d;
            font-size: 0.9em;
            display: block;
            margin-top: 5px;
            height: 1.2em;
        }
/* --- CSS para Tabela de Armazenamento com Cabeçalho Fixo --- */

#storageTableContainer {
    /* Define a altura máxima para aproximadamente 5 linhas */
    max-height: 380px; 
    
    /* Adiciona a rolagem vertical */
    overflow-y: auto;
    
    /* Importante para o posicionamento do cabeçalho */
    position: relative; 

    border: 1px solid #e0e0e0;
    border-radius: 4px;
}

#storageTableContainer table {
    width: 100%;
    border-collapse: collapse;
}

/* A Mágica Acontece Aqui */
#storageTableContainer th {
    /* Faz o cabeçalho "grudar" no topo do container */
    position: sticky;
    top: 0;

    /* Cor de fundo é ESSENCIAL para que o texto que rola por baixo não apareça */
    background-color: #f8f9fa; /* Use a cor de fundo do seu formulário ou uma cor de destaque */
    
    /* Garante que o cabeçalho fique acima do conteúdo */
    z-index: 1;

    /* Opcional: uma linha para separar visualmente o cabeçalho do conteúdo */
    border-bottom: 2px solid #dee2e6;
}

#observationSelect {
    /* 1. Essencial: Impede que o texto quebre para a próxima linha */
    white-space: nowrap; 
    
    /* 2. Essencial: Esconde o texto que ultrapassa a largura */
    overflow: hidden;
    
    /* 3. Essencial: Exibe as reticências no ponto de corte */
    text-overflow: ellipsis; 

    /* 4. CHAVE: Permite que o select encolha em um contêiner flexível */
    min-width: 0; 

    /* Boa prática para ocupar 100% do seu pai (.input-with-button) */
    width: 100%;
    box-sizing: border-box; 
}
/* Este é o div.form-group que contém o label, o select e o botão */
#tab6 .form-group:nth-child(2) { 
    /* Você pode manter o flex-grow se quiser que ele use espaço flexível, 
       mas adicione a restrição de tamanho mínimo! */
    flex-grow: 1; 
    
    /* CHAVE: Força o item flexível a respeitar o overflow: hidden de seus filhos */
    min-width: 0;
    
    /* Opcional, mas útil: Limita o tamanho MÁXIMO (ex: 250px)
       Se você remover esta regra, o campo pode ficar MUITO largo. */
    max-width: 250px; 
}

/* 1. Garante que o container tenha posição relativa para o sticky se orientar */
#accompanimentTableContainer {
    max-height: 370px;
    overflow-y: auto;
    position: relative; 
    border: 1px solid #e0e0e0;
}

/* 2. A MÁGICA: Fixa o cabeçalho no topo */
#accompanimentTable thead th {
    position: sticky;
    top: 0; /* Cola no topo do container */
    background-color: #f8f8f8; /* OBRIGATÓRIO: senão o texto da tabela passa por "dentro" das letras do cabeçalho */
    z-index: 2; /* Garante que fique acima das linhas da tabela */
    box-shadow: inset 0 -2px 0 #ddd; /* Cria uma linha de separação que não some na rolagem */
}

/* 3. Ajuste para evitar que as bordas sumam no topo */
#accompanimentTable {
    border-collapse: separate; /* Recomendado para sticky headers */
    border-spacing: 0;
    width: 100%;
}

/* Grade exclusiva para 5 colunas (Aba Nutricional) */
.nutri-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px; /* Deixei o espaço um pouco menor para caber melhor na tela */
}

/* Responsividade: No celular, fica 1 por linha para não espremer */
@media (max-width: 768px) {
    .nutri-grid {
        grid-template-columns: 1fr;
    }
}

/* Sobrescreve a altura fixa de 3rem apenas para as caixas de texto grandes */
textarea {
    height: auto !important; /* Permite que o textarea cresça */
    min-height: 120px; /* Altura mínima (pode aumentar se quiser, ex: 150px) */
    resize: vertical; /* Permite que o usuário puxe a pontinha para aumentar mais */
}
        .nutri-box {
            background: #f8f9fa; padding: 15px; border-radius: 6px; 
            margin-bottom: 20px; border: 1px solid #e9ecef;
        }
        .nutri-section-title {
            margin: 0 0 15px 0; color: #333; font-size: 1em; border-bottom: 2px solid #ccc; padding-bottom: 5px;
        }
        /* Estilo da Tabela Nutricional Real */
        .tabela-anvisa {
            width: 100%; border-collapse: collapse; background: #fff; margin-bottom: 10px;
        }
        .tabela-anvisa th, .tabela-anvisa td {
            border: 1px solid #999; padding: 4px 8px; text-align: center; vertical-align: middle; font-size: 0.85em;
        }
        .tabela-anvisa th {
            background: #eee; font-weight: bold;
        }
        .tabela-anvisa td:first-child {
            text-align: left; width: 40%;
        }
        /* Tira as bordas dos inputs para eles "sumirem" dentro da célula da tabela */
        .tabela-anvisa input {
            width: 100% !important; height: 100% !important; border: none !important; 
            background: transparent !important; text-align: center; outline: none !important; 
            font-size: 1em !important; padding: 2px !important; border-radius: 0 !important; box-shadow: none !important;
        }
        .tabela-anvisa input:focus {
            background: #e8f0fe !important; /* Destaca a célula ao clicar */
        }
        /* Ícone de ajuda clicável */
        .info-icon {
            cursor: pointer; color: #0056b3; font-size: 1.1em; margin-left: 4px; text-decoration: none; font-weight: normal;
        }
        .info-icon:hover {
            color: #003d82;
        }
        /* Estiliza a barra de rolagem para ficar bonita */
        .scroll-container {
            max-height: 59vh; /* Ocupa até 50% da altura da tela */
            min-height: 400px;
            overflow-y: auto;
            padding-right: 10px;
        }
        .scroll-container::-webkit-scrollbar {
            width: 8px;
        }
        .scroll-container::-webkit-scrollbar-thumb {
            background: #bbb; border-radius: 4px;
        }
.nutri-box { background: #f8f9fa; padding: 15px; border-radius: 6px; margin-bottom: 20px; border: 1px solid #e9ecef; }
        .nutri-section-title { margin: 0 0 15px 0; color: #333; font-size: 1em; border-bottom: 2px solid #ccc; padding-bottom: 5px; }
        .tabela-anvisa { width: 100%; border-collapse: collapse; background: #fff; margin-bottom: 10px; }
        .tabela-anvisa th, .tabela-anvisa td { border: 1px solid #999; padding: 4px 8px; text-align: center; vertical-align: middle; font-size: 0.85em; }
        .tabela-anvisa th { background: #eee; font-weight: bold; }
        .tabela-anvisa td:first-child { text-align: left; width: 40%; }
        .tabela-anvisa input { width: 100% !important; height: 100% !important; border: none !important; background: transparent !important; text-align: center; outline: none !important; font-size: 1em !important; padding: 2px !important; border-radius: 0 !important; box-shadow: none !important; }
        .tabela-anvisa input:focus { background: #e8f0fe !important; }
        .info-icon { cursor: pointer; color: #0056b3; font-size: 1.1em; margin-left: 4px; text-decoration: none; font-weight: normal; }
        .scroll-container { max-height: 59vh; min-height: 481px; overflow-y: auto; padding-right: 10px; }
        
        /* Estilos da Biblioteca */
        .biblioteca-container { border: 1px solid #ccc; border-radius: 8px; padding: 15px; margin-bottom: 20px; background: #fff; }



        .btn-nutri-acao { padding: 8px 12px; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; transition: 0.2s; }
        .btn-definir { background: #28a745; color: white; }
        .btn-editar { background: #ffc107; color: black; margin-left: 5px; }

        /* Efeito visual da linha selecionada */
        .linha-vinculada {
            background-color: #e8f4f8 !important; /* Fundo azul bem claro */
            border-left: 4px solid #007bff !important; /* Borda lateral azul */
        }
        .linha-vinculada td {
            color: #003d82;
        }
        
        /* Modal mais largo específico para a tabela nutricional */
        .modal-nutri {
            width: 95%;
            max-width: 850px;
            max-height: 90vh;
            display: flex;
            flex-direction: column;
        }
        .modal-nutri-content {
            overflow-y: auto;
            padding-right: 10px;
            margin-bottom: 15px;
        }

        /* Adiciona a animação de scale e opacidade também para a classe .modal */
        #formOverlay .container,
        .modal-overlay .modal {
             transform: scale(0.95);
             opacity: 0;
             transition: transform 0.2s ease-out, opacity 0.2s ease-out;
             /* Impede que o modal invisível intercepte cliques */
             pointer-events: none;
        }

        /* Quando o overlay ganha a classe .show, exibe o conteúdo (.container ou .modal) */
        #formOverlay.show .container,
        .modal-overlay.show .modal {
             transform: none; /* Como discutimos antes, mantém none para os selects funcionarem */
             opacity: 1;
             pointer-events: auto; /* Reativa os cliques */
        }

/* ========================================================= */
/* ESTILIZAÇÃO E CENTRALIZAÇÃO DO MODAL NUTRICIONAL          */
/* ========================================================= */

/* 1. Garante que o fundo escuro centraliza o modal perfeitamente */
#modalFormNutricionalOverlay {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 99999 !important; 
    padding: 20px; 
    box-sizing: border-box;
}

/* 2. ESTILO BASE: Força o modal a ser mais largo, mas MANTÉM-NO INVISÍVEL E SEM BLOQUEAR CLIQUES */
#modalFormNutricionalOverlay .modal-nutri {
    background-color: #ffffff !important;
    width: 100% !important;
    max-width: 850px !important; 
    max-height: 90vh !important; 
    margin: auto !important; 
    padding: 25px 30px !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.4) !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    
    /* Fica escondido por padrão e deixa o rato "passar através" dele */
    opacity: 0 !important;
    visibility: hidden !important;
    transform: scale(0.95) !important;
    pointer-events: none !important;
    transition: all 0.2s ease-in-out !important;
}

/* 🔥 3. A MÁGICA: Só fica visível e bloqueia o rato QUANDO o modal abre (.show) */
#modalFormNutricionalOverlay.show .modal-nutri {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
}

/* 4. Área de rolagem (Scroll) apenas no conteúdo */
#modalFormNutricionalOverlay .modal-nutri-content {
    overflow-y: auto !important;
    padding-right: 15px !important;
    margin-bottom: 10px !important;
    flex-grow: 1; 
}

/* Deixa a barrinha de rolagem mais elegante */
#modalFormNutricionalOverlay .modal-nutri-content::-webkit-scrollbar {
    width: 8px;
}
#modalFormNutricionalOverlay .modal-nutri-content::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 4px;
}

/* 5. Garante que os campos não fiquem espremidos */
#modalFormNutricionalOverlay .nutri-box > div {
    flex-wrap: wrap !important;
}
/* Remove a rolagem APENAS de dentro da aba Nutricional */
#tabNutricional .scroll-container { 
    max-height: 63rem; 
    min-height: auto;
    overflow-y: visible; 
    padding-right: 0; 
}

/* ========================================================= */
/* ESTILOS DA TABELA DE BIBLIOTECA (TEMPLATES NUTRICIONAIS)  */
/* ========================================================= */

/* Contêiner com altura fixa e rolagem */
.grid-tabelas { 
    height: 270px !important; 
    overflow-y: auto; 
    border: 1px solid #ccc; 
    margin-top: 10px; 
    background-color: #fdfdfd;
    border-radius: 4px;
}

/* Tabela base */
.grid-tabelas table { 
    width: 100%; 
    border-collapse: separate !important; 
    border-spacing: 0 !important; 
    font-size: 0.9em; 
    table-layout: fixed;
    border: none !important; /* Remove a borda principal da tabela inteira */
    box-shadow: none !important; /* Tira relevos do contêiner da tabela */
}

/* ========================================== */
/* O CABEÇALHO FIXO (AZUL E SEM 3D)           */
/* ========================================== */
.grid-tabelas th {
    position: sticky !important;
    top: 0 !important;
    background-color: #0056b3 !important; 
    color: #ffffff !important; 
    padding: 10px 8px !important; 
    
    /* 👇 1. FORÇA COMPORTAMENTO DE TABELA PARA IGUALAR A ALTURA */
    display: table-cell !important; 
    vertical-align: middle !important; 
    height: 45px !important; /* Altura mínima garantida para todos */
    
    /* 👇 2. MATA O EFEITO 3D E BORDA DUPLA */
    border-style: solid !important;
    border-width: 0 !important; /* Zera todas as bordas primeiro */
    border-right-width: 1px !important; /* Aplica apenas a borda direita */
    border-color: rgba(255, 255, 255, 0.25) !important; /* Cor da divisória */
    background-clip: padding-box !important; /* Evita vazamento de cor na borda */
    
    z-index: 10 !important; 
    font-size: 0.9em !important;
    text-transform: uppercase !important; 
    letter-spacing: 0.5px !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15) !important;
}

/* Remove a divisória da última coluna para acabamento perfeito */
.grid-tabelas th:last-child {
    border-right-width: 0 !important;
}
/* Alinhamentos individuais: Nome à esquerda, o resto centralizado */
.grid-tabelas th:nth-child(1) { text-align: left !important; }
.grid-tabelas th:nth-child(2),
.grid-tabelas th:nth-child(3),
.grid-tabelas th:nth-child(4) { text-align: center !important; }
/* Ícones do cabeçalho brancos */
.grid-tabelas th i.fa {
    color: #ffffff !important;
}

/* ========================================== */
/* CÉLULAS E LINHAS (CONTEÚDO)                */
/* ========================================== */
.grid-tabelas td { 
padding: 8px; 
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid #eee !important; 
    vertical-align: middle;
}

/* 1ª Coluna (Nome): Permite quebrar em várias linhas se for grande */
.grid-tabelas td:nth-child(1) {
    white-space: normal !important; 
    word-wrap: break-word !important; 
}

/* 4ª Coluna (Botões): Impede que os botões fiquem imprensados */
.grid-tabelas td:nth-child(4) {
    white-space: nowrap !important; 
}

/* ========================================== */
/* ESTILIZAÇÃO DA BARRA DE ROLAGEM            */
/* ========================================== */
.grid-tabelas::-webkit-scrollbar { width: 8px; }
.grid-tabelas::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 0 4px 4px 0; }
.grid-tabelas::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.grid-tabelas::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* 1. Estilos do Modo de Preparo (Laranja) */
    .preparo-grid {
        display: grid; grid-template-columns: repeat(auto-fit, minmax(75px, 1fr)); gap: 8px; margin-top: 5px;
    }
    .preparo-item input[type="radio"] { display: none; }
    .preparo-card {
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        border: 1px solid #ccc; border-radius: 6px; padding: 10px 5px;
        cursor: pointer; background-color: #fff; transition: all 0.2s ease;
        text-align: center; height: 100%; box-sizing: border-box;
    }
    .preparo-card i { font-size: 1.3em; color: #888; margin-bottom: 6px; transition: all 0.2s ease; }
    .preparo-card span { font-size: 0.7em; font-weight: bold; color: #666; line-height: 1.1; }
    
    /* Cor Laranja Ativa para Preparo */
  /* Cor Verde Ativa para Preparo */
    .preparo-item input[type="radio"]:checked + .preparo-card { border-color: #27ae60; background-color: #f4fdf8; box-shadow: 0 0 0 1px #27ae60; }
    .preparo-item input[type="radio"]:checked + .preparo-card i, .preparo-item input[type="radio"]:checked + .preparo-card span { color: #27ae60; }
    /* 2. Estilos dos Cards Compactos (Alertas e Reciclagem) */
    .alert-container-flex { display: flex; flex-wrap: wrap; gap: 15px; margin-top: 10px; }
    .alert-label { cursor: pointer; display: block; width: 120px; }
    .alert-label input[type="checkbox"] { display: none; }
    .card-ui {
        display: flex; flex-direction: column; align-items: center; justify-content: space-between;
        padding: 12px 8px; border: 1px solid #e0e0e0; border-radius: 8px;
        background: #fdfdfd; transition: all 0.2s ease; text-align: center;
        height: 100%; box-sizing: border-box;
    }
    .card-ui .main-icon { font-size: 1.5em; color: #aaa; margin-bottom: 6px; }
    .card-ui .card-title { font-size: 0.65em; font-weight: 800; color: #666; line-height: 1.2; margin-bottom: 10px; min-height: 2.4em; display: flex; align-items: center; justify-content: center; }

    /* Switch Embutido Compacto */
    .integrated-switch {
        position: relative; width: 80px; height: 26px; background-color: #dcdcdc;
        border-radius: 26px; display: flex; align-items: center; box-sizing: border-box; transition: background-color 0.2s ease;
    }
    .integrated-switch .knob {
        position: absolute; width: 18px; height: 18px; left: 4px; bottom: 4px;
        background-color: white; border-radius: 50%; transition: transform 0.2s ease; box-shadow: 0 1px 3px rgba(0,0,0,0.2); z-index: 2;
    }
    .integrated-switch .switch-text { font-size: 0.6em; font-weight: 900; position: absolute; transition: opacity 0.2s ease; z-index: 1; width: 100%; text-align: center; }
    .switch-text.on { color: white; opacity: 0; padding-right: 18px; } 
    .switch-text.off { color: #777; opacity: 1; padding-left: 18px; }

    /* Estados Ativos dos Cards (Fica Verde) */
    .alert-label input[type="checkbox"]:checked + .card-ui { border-color: #27ae60; background-color: #f4fdf8; }
    .alert-label input[type="checkbox"]:checked + .card-ui .main-icon { color: #27ae60; }
    .alert-label input[type="checkbox"]:checked + .card-ui .integrated-switch { background-color: #27ae60; }
    .alert-label input[type="checkbox"]:checked + .card-ui .integrated-switch .knob { transform: translateX(54px); }
    .alert-label input[type="checkbox"]:checked + .card-ui .integrated-switch .switch-text.on { opacity: 1; }
    .alert-label input[type="checkbox"]:checked + .card-ui .integrated-switch .switch-text.off { opacity: 0; }


    /* =============================================================================
   EFEITOS HOVER: MODO DE PREPARO (LARANJA)
   ============================================================================= */
/* Quando passa o mouse no card desmarcado */
.preparo-card:hover {
    border-color: #e67e22; /* Muda a borda para um laranja bonito */
    background-color: #fffaf5; /* Dá um fundo bem clarinho laranja */
    box-shadow: 0 2px 6px rgba(230, 126, 34, 0.15); /* Sombra suave laranja */
}

/* Deixa o ícone cinza um pouco mais escuro ao passar o mouse */
.preparo-card:hover i {
    color: #e67e22;
}

/* Garante que se o card já estiver selecionado (:checked), o hover não estrague o verde */
.preparo-item input[type="radio"]:checked + .preparo-card:hover {
    border-color: #27ae60;
    background-color: #f4fdf8;
    box-shadow: 0 0 0 1px #27ae60;
}
.preparo-item input[type="radio"]:checked + .preparo-card:hover i {
    color: #27ae60;
}


/* =============================================================================
   EFEITOS HOVER: ALERTAS E SUSTENTABILIDADE (VERDE)
   ============================================================================= */
/* Quando passa o mouse no card desmarcado */
.card-ui:hover {
    border-color: #2ecc71; /* Borda verde clara */
    background-color: #f9fdfb; /* Fundo verde quase imperceptível */
    box-shadow: 0 3px 8px rgba(46, 204, 113, 0.12); /* Sombra suave verde */
}

/* Destaca o ícone principal cinza ao passar o mouse */
.card-ui:hover .main-icon {
    color: #2ecc71;
}

/* Garante que se o card já estiver marcado (:checked), o hover mantém o design verde ativo estável */
.alert-label input[type="checkbox"]:checked + .card-ui:hover {
    border-color: #27ae60;
    background-color: #f4fdf8;
    box-shadow: none;
}
.alert-label input[type="checkbox"]:checked + .card-ui:hover .main-icon {
    color: #27ae60;
}


/* =============================================================================
   EFEITOS HOVER: ÍCONE DE INFORMAÇÃO azul (i)
   ============================================================================= */
.info-icon:hover {
    color: #117a8b !important; /* Escurece ligeiramente o azul do 'i' */
    transform: scale(1.15); /* Dá um mini 'zoom' sutil no ícone para destacar */
    transition: all 0.15s ease;
}