@font-face {
        font-family: 'MontserratAlternates-Bold';
        src: url('assets/font/MontserratAlternates-Bold.otf') format('opentype');
        }

    @font-face {
        font-family: 'Montserrat-Regular';
        src: url('assets/font/Montserrat-Regular.otf') format('opentype');
    }
    
    .ean-validation {
      margin-top: 4px;
      font-size: 0.85rem;
      padding: 4px 8px;
      border-radius: 4px;
      display: none;
    }
    
    .ean-validation.success {
      background-color: #d4edda;
      color: #155724;
      border: 1px solid #c3e6cb;
      display: block;
    }
    
    .ean-validation.error {
      background-color: #f8d7da;
      color: #721c24;
      border: 1px solid #f5c6cb;
      display: block;
    }
    
    .ean-validation.loading {
      background-color: #fff3cd;
      color: #856404;
      border: 1px solid #ffeaa7;
      display: block;
    }
    
    .produto-encontrado {
      margin-top: 8px;
      padding: 12px;
      background-color: #e3f2fd;
      border: 1px solid #2196f3;
      border-radius: 4px;
      display: none;
    }
    
    .produto-encontrado h4 {
      margin: 0 0 8px 0;
      color: #1976d2;
      font-size: 0.9rem;
    }
    
    .produto-info {
      display: flex;
      gap: 12px;
      align-items: flex-start;
    }
    
    .produto-detalhes {
      flex: 1;
      font-size: 0.8rem;
      color: #424242;
      line-height: 1.4;
    }
    
    .produto-detalhes strong {
      color: #1976d2;
    }
    
    .produto-imagem-preview {
      width: 80px;
      height: 80px;
      object-fit: cover;
      border-radius: 4px;
      border: 1px solid #ddd;
      background-color: #f5f5f5;
    }
    
    input.ean-exists {
      border-color: #f44336 !important;
      background-color: #ffebee !important;
    }
    
    button[type="submit"]:disabled {
      opacity: 0.6;
      cursor: not-allowed;
      background-color: #ccc !important;
    }






    /**** NOVOOOO ****/

    
    .wrapper {
            width: 1200px;
            background-color: white;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }

        .header {
            background-color: #0d3d5c;
            color: white;
            padding: 15px 20px;
            font-size: 18px;
            font-weight: bold;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

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

        .header-btn {
            background-color: white;
            color: #0d3d5c;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            font-weight: bold;
            font-size: 14px;
            transition: all 0.3s ease;
        }

        .header-btn:hover {
            background-color: #f0f0f0;
            transform: translateY(-2px);
        }

        .header-btn.download {
            background-color: #ffcc00;
            color: rgb(0, 0, 0);
        }

        .header-btn.download:hover {
            background-color: #eebe00;
        }

        .container {
            display: flex;
            height: calc(100vh - 53px);
        }

        .sidebar {
            width: 140px;
            background-color: #f5f5f5;
            padding: 10px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            overflow-y: auto;
        }

        .sidebar-button {
            background-color: white;
            border: 1px solid #ddd;
            padding: 10px;
            text-align: center;
            cursor: pointer;
            font-size: 14px;
            border-radius: 3px;
            transition: background-color 0.2s;
        }

        .sidebar-button:hover {
            background-color: #f9f9f9;
        }

        .sidebar-button.active {
            background-color: #c8c8c8;
            font-weight: bold;
        }

        .add-page-button {
            background-color: white;
            border: 1px solid #ddd;
            padding: 10px;
            text-align: center;
            cursor: pointer;
            font-size: 13px;
            border-radius: 3px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            color: #e74c3c;
            font-weight: 500;
        }

        .add-page-button:hover {
            background-color: #fff5f5;
        }

        .add-icon {
            color: #e74c3c;
            font-size: 18px;
            font-weight: bold;
        }

        .main-content {
            flex: 1;
            padding: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 20px;
        }

        .canvas-container {
            background-color: #f8f8f0;
            border: 1px solid #ccc;
            width: 600px;
            height: 750px;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            position: relative;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            padding: 50px 20px 20px 20px;
            gap: 10px;
            overflow-y: auto;
        }

        .page-title {
            position: absolute;
            top: 20px;
            left: 20px;
            font-size: 16px;
            font-weight: bold;
            color: #0d3d5c;
            background-color: rgba(255, 255, 255, 0.9);
            padding: 8px 15px;
            border-radius: 5px;
            z-index: 10;
            display: none;
        }

        /* LAYOUT ESPECIAL PARA CAPA - GRID 20 PRODUTOS */
        .capa-products-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 8px;
            width: 100%;
            padding: 10px;
            
        }

        .capa-product-slot {
            border: 2px dashed #999;
            border-radius: 5px;
            padding: 8px;
            cursor: pointer;
            transition: all 0.3s;
            min-height: 140px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        .capa-product-slot:hover {
            border-color: #666;
            background-color: #f9f9f9;
        }

        .capa-product-slot.filled {
            border-style: solid;
            border-color: transparent;
            padding: 5px;
            width: 140px;
            border-radius: 20px;
            border: solid 666 15px;
            
        }

        .capa-product-slot img {
            width: 100%;
            max-height: 60px;
            object-fit: contain;
            margin-bottom: 4px;
        }

        .capa-product-name {
            font-size: 7px;
            font-weight: bold;
            text-align: center;
            color: #333;
            line-height: 1.2;
            height: 16px;
            overflow: hidden;
            width: 100%;
        }

        .capa-product-subtitle {
            font-size: 6px;
            text-align: center;
            color: #666;
            line-height: 1.2;
            height: 12px;
            overflow: hidden;
            width: 100%;
            margin-bottom: 2px;
        }

        .capa-product-price {
            font-size: 8px;
            font-weight: bold;
            color: #e74c3c;
            text-align: center;
            margin-top: 2px;
        }

        .capa-product-price-de {
            font-size: 6px;
            text-decoration: line-through;
            color: #999;
            text-align: center;
        }

        .capa-product-phrase {
            font-size: 6px;
            text-align: center;
            color: #555;
            line-height: 1.2;
            margin-top: 3px;
            width: 100%;
            overflow: hidden;
            max-height: 18px;
        }

        #fileInput {
            display: none;
        }

        .right-sidebar {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .element-cards-container {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .element-cards-container.hidden {
            display: none;
        }

        .element-card {
            background-color: white;
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 15px;
            width: 150px;
            text-align: center;
        }

        .element-card h3 {
            font-size: 15px;
            margin-bottom: 10px;
            color: #333;
            font-weight: bold;
        }

        .element-add-button {
            background-color: #e8e8e8;
            border: 1px dashed #999;
            padding: 8px 12px;
            cursor: pointer;
            font-size: 12px;
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            transition: background-color 0.2s;
            color: #666;
            width: 100%;
        }

        .element-add-button:hover {
            background-color: #ddd;
        }

        .element-add-button:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .element-add-button .plus-icon {
            font-size: 14px;
            font-weight: bold;
        }

        .add-background-button {
            background-color: white;
            border: 1px solid #ccc;
            padding: 8px 12px;
            cursor: pointer;
            font-size: 13px;
            border-radius: 3px;
            display: flex;
            align-items: center;
            gap: 5px;
            transition: background-color 0.2s;
            white-space: nowrap;
        }

        .add-background-button:hover {
            background-color: #f5f5f5;
        }

        .plus-sign {
            font-weight: bold;
            font-size: 16px;
        }

        .page-element {
            width: 100%;
            border-radius: 8px;
            padding: 10px;
            position: relative;
            background-color: transparent;
            transition: box-shadow 0.3s ease;
            cursor: move;
        }

        .page-element:hover {
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }

        .page-element.dragging {
            opacity: 0.5;
            cursor: grabbing;
        }

        .page-element.drag-over {
            border-color: #4CAF50;
            border-style: dashed;
        }

        .element-rodape {
            height: 215px;
        }

        .element-meia-pagina {
            height: 365px;
        }

        .element-destaque {
            height: 200px;
        }

        .element-avulso {
            height: 115px;
            margin-top: -38px;
        }

        .element-header {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            margin-bottom: 8px;
            position: relative;
        }

        .element-label {
            display: none;
        }

        .element-controls {
            position: absolute;
            top: -12px;
            right: -12px;
            display: flex;
            gap: 5px;
            z-index: 10;
        }

        .control-btn {
            background-color: white;
            border: 1px solid #ccc;
            border-radius: 4px;
            width: 28px;
            height: 28px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            transition: all 0.2s ease;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }

        .control-btn:hover:not(:disabled) {
            background-color: #e74c3c;
            color: white;
            transform: scale(1.1);
            box-shadow: 0 3px 6px rgba(0,0,0,0.3);
        }

        .control-btn:active:not(:disabled) {
            transform: translateY(0);
            box-shadow: 0 1px 2px rgba(0,0,0,0.1);
        }

        .control-btn:disabled {
            opacity: 0.3;
            cursor: not-allowed;
        }

        .products-container {
            display: flex;
            gap: 6px;
            height: calc(100% - 40px);
            width: 100%;
        }

        .layout-rodape {
            flex-direction: row;
            flex-wrap: nowrap;
        }

        .layout-avulso {
            flex-direction: row;
            flex-wrap: nowrap;
        }

        .layout-avulso .product-slot {
            padding: 5px 3px;
        }

        .layout-avulso .product-slot img {
            height: 55px;
        }


        .layout-avulso .product-subtitle {
            height: 9px;
        }

        .layout-avulso .product-prices {
            height: 14px;
        }

        .layout-meia-pagina {
            flex-direction: column;
        }

        .meia-pagina-row {
            display: flex;
            gap: 5px;
            flex: 1;
            min-height: 0;
        }

        .layout-meia-pagina .product-slot {
            padding: 12px 8px;
        }

        .layout-meia-pagina .product-slot img {
            height: 65px;
        }

        .layout-meia-pagina .product-name {
            font-size: 8px;
            height: 40px;
            width: 50px;
        }

        .layout-meia-pagina .product-subtitle {
            font-size: 7px;
            height: 14px;
        }

        .layout-meia-pagina .product-prices {
            height: 24px;
        }

        .layout-meia-pagina .price-de {
            font-size: 7px;
        }

        .layout-meia-pagina .price-por {
            font-size: 9px;
        }

        .layout-destaque {
            flex-direction: row;
            gap: 6px;
        }

        .destaque-left {
            flex: 1.2;
            min-width: 0;
        }

        .destaque-left .product-slot.filled {
            display: flex;
            flex-direction: column;
            padding: 5px;
            width: 200px;
            margin-left: 50px;
        }

        .destaque-left .product-slot img {
            width: 100%;
            height: 100px;
            max-height: 100px;
            object-fit: contain;
            margin-bottom: 5px;
        }

        .destaque-left .product-info-container {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            width: 100%;
            padding: 8px;
            border-radius: 5px;
        }

        .destaque-left .product-text-left {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            text-align: left;
        }

        .destaque-left .product-name {
            font-size: 12px;
            text-align: left;
            height: auto;
            margin: 0 0 3px 0;
            width: 120px;
        }

        .destaque-left .product-subtitle {
            font-size: 12px;
            text-align: left;
            height: auto;
            margin: 0;
        }

        .destaque-left .product-prices {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            justify-content: center;
            margin: 0;
            padding-left: 10px;
        }

        .destaque-left .price-de {
            font-size: 7px;
            white-space: nowrap;
        }

        .destaque-left .price-por {
            font-size: 14px;
            font-weight: bold;
            white-space: nowrap;
        }

        .destaque-right {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 5px;
            min-width: 0;
        }

        .destaque-right .product-slot {
            min-height: 80px;
        }

        .destaque-right .product-slot.filled {
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            padding: 5px;
            gap: 5px;
        }

        .destaque-right .product-slot.filled.reversed {
            flex-direction: row-reverse;
        }

        .destaque-right .product-slot img {
            width: 60px;
            height: 60px;
            min-width: 60px;
            object-fit: contain;
            margin: 0;
        }

        .destaque-right .product-info-right {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            flex: 1;
            text-align: left;
        }

        .destaque-right .product-slot.reversed .product-info-right {
            align-items: flex-end;
            text-align: right;
        }

        .destaque-right .product-name {
            font-size: 12px;
            height: auto;
            margin: 0 0 3px 0;
            text-align: left;
            height: 60px;
        }

        .destaque-right .product-slot.reversed .product-name {
            text-align: left;
        }

        .destaque-right .product-subtitle {
            font-size: 5px;
            height: auto;
            margin: 0 0 3px 0;
            text-align: left;
        }

        .destaque-right .product-slot.reversed .product-subtitle {
            text-align: left;
        }

        .destaque-right .product-prices {
            height: auto;
            font-size: 8px;
            margin: 0;
            text-align: left;
        }

        .destaque-right .product-slot.reversed .product-prices {
            text-align: left;
        }

        .destaque-right .price-de {
            font-size: 5px;
            text-align: left;
        }

        .destaque-right .product-slot.reversed .price-de {
            text-align: left;
        }

        .destaque-right .price-por {
            text-align: left;
        }

        .destaque-right .product-slot.reversed .price-por {
            text-align: left;
        }

        .product-slot {
            border-radius: 5px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            cursor: pointer;
            transition: all 0.3s;
            padding: 10px 6px;
            position: relative;
            flex: 1;
            min-width: 0;
            min-height: 70px;
        }

        .product-slot:hover {
            border-color: #666;
        }

        .product-slot.filled {
            justify-content: flex-start;
            padding: 3px 5px;
            height: 150px;
            width: 200px;
        }

        .product-slot img {
            width: 100%;
            height: 60px;
            object-fit: contain;
            margin: 0 auto 4px auto;
            display: block;
        }

        .product-name {
            font-size: 9px;
            font-weight: bold;
            text-align: left;
            color: #333;
            line-height: 1.3;
            height: 22px;
            overflow: hidden;
            width: 100%;
            word-wrap: break-word;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            width: 70px;
        }

        .product-subtitle {
            font-size: 7px;
            text-align: left;
            color: #666;
            width: 100%;
            height: 14px;
            overflow: hidden;
            line-height: 1.3;
        }

        .product-prices {
            font-size: 9px;
            text-align: right;
            margin-top: 2px;
            width: 100%;
            height: 24px;
        }

        .price-de {
            text-decoration: line-through;
            color: #999;
            font-size: 7px;
            line-height: 1.3;
        }

       /* .price-por {
            color: #e74c3c;
            font-weight: bold;
            font-size: 9px;
            line-height: 1.3;
            text-align: right;
        } */

        .price-por {
            color: #e74c3c;
            font-weight: bold;
            font-size: 10px;
            line-height: 1.3;
            /* width: 80px; */
            text-align: right;
            width: 80px;
            margin-left: -20px;
        }

        .add-product-text {
            font-size: 10px;
            color: #999;
            border: #999 dashed 1px;
            padding: 8px;
        }

        .product-info-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            gap: 8px;
        }

        .product-text-container {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            text-align: left;
        }

        .product-text-container .product-name {
            margin: 0;
        }

        .product-text-container .product-subtitle {
            margin: 0;
        }

        .product-info-container .product-prices {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            justify-content: center;
            margin: 0;
            height: auto;
        }

        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
            backdrop-filter: blur(3px);
            animation: fadeIn 0.3s ease;
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        .modal.active {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .modal-content {
            background-color: white;
            padding: 25px;
            border-radius: 12px;
            width: 850px;
            max-height: 85vh;
            overflow-y: auto;
            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
            animation: slideUp 0.3s ease;
        }

        @keyframes slideUp {
            from {
                transform: translateY(30px);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 2px solid #f0f0f0;
        }

        .modal-header h2 {
            margin: 0;
            font-size: 24px;
            color: #333;
        }

        .close-modal {
            background: none;
            border: none;
            font-size: 36px;
            cursor: pointer;
            color: #999;
            transition: all 0.2s ease;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
        }

        .close-modal:hover {
            background-color: #f0f0f0;
            color: #333;
            transform: rotate(90deg);
        }

        .products-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 15px;
            min-height: 200px;
        }

        .loading-message {
            grid-column: 1 / -1;
            text-align: center;
            padding: 40px;
            color: #666;
            font-size: 16px;
        }

        .product-card {
            border: 2px solid #ddd;
            border-radius: 10px;
            padding: 12px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            background: white;
        }

        .product-card:hover {
            border-color: #4CAF50;
            box-shadow: 0 5px 15px rgba(0,0,0,0.15);
            transform: translateY(-5px);
        }

        .product-card:active {
            transform: translateY(-2px);
        }

        .product-card img {
            width: 100%;
            height: 120px;
            object-fit: contain;
            margin-bottom: 10px;
        }

        .product-card h4 {
            font-size: 13px;
            margin: 8px 0;
            color: #333;
            line-height: 1.3;
            min-height: 35px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .price-modal-content {
            width: 450px;
        }

        .price-form {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .price-input-group {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .price-input-group label {
            font-weight: bold;
            font-size: 15px;
            color: #333;
        }

        .price-input-group input {
            padding: 12px;
            border: 2px solid #ddd;
            border-radius: 8px;
            font-size: 16px;
            transition: all 0.3s ease;
        }

        .price-input-group input:focus {
            outline: none;
            border-color: #4CAF50;
            box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
        }

        .price-buttons {
            display: flex;
            gap: 10px;
            justify-content: flex-end;
            margin-top: 10px;
        }

        .btn {
            padding: 12px 20px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 15px;
            font-weight: 600;
            transition: all 0.3s ease;
            min-width: 110px;
        }

        .btn-primary {
            background-color: #4CAF50;
            color: white;
            box-shadow: 0 4px 8px rgba(76, 175, 80, 0.3);
        }

        .btn-primary:hover {
            background-color: #45a049;
            transform: translateY(-2px);
            box-shadow: 0 6px 12px rgba(76, 175, 80, 0.4);
        }

        .btn-primary:active {
            transform: translateY(0);
        }

        .btn-secondary {
            background-color: #f0f0f0;
            color: #333;
        }

        .btn-secondary:hover {
            background-color: #e0e0e0;
        }

        .product-remove {
            position: absolute;
            top: -8px;
            right: -8px;
            background-color: #e74c3c;
            color: white;
            border: none;
            border-radius: 50%;
            width: 22px;
            height: 22px;
            font-size: 14px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }

        .product-remove:hover {
            background-color: #c0392b;
            transform: scale(1.1);
        }

        .loading-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.7);
            z-index: 2000;
            justify-content: center;
            align-items: center;
        }

        .loading-overlay.active {
            display: flex;
        }

        .loading-content {
            background-color: white;
            padding: 30px;
            border-radius: 10px;
            text-align: center;
            min-width: 300px;
        }

        .loading-spinner {
            border: 4px solid #f3f3f3;
            border-top: 4px solid #4CAF50;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            animation: spin 1s linear infinite;
            margin: 0 auto 20px;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .loading-text {
            font-size: 16px;
            color: #333;
            font-weight: bold;
        }

        .loading-subtext {
            font-size: 14px;
            color: #666;
            margin-top: 10px;
        }


        /* Download meu PDF */

        /* CSS ESPECIAL APENAS PARA GERAÇÃO DE PDF */
    .pdf-rendering img {
        width: auto !important;
        max-width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
    }

    .pdf-rendering .capa-product-slot img {
        max-height: 60px !important;
    }

    .pdf-rendering .product-slot img {
        max-height: 60px !important;
    }

    .pdf-rendering .layout-avulso .product-slot img {
        max-height: 55px !important;
    }

    .pdf-rendering .layout-meia-pagina .product-slot img {
        max-height: 65px !important;
    }

    .pdf-rendering .destaque-left .product-slot img {
        max-height: 100px !important;
    }

    .pdf-rendering .destaque-right .product-slot img {
        max-height: 60px !important;
        max-width: 60px !important;
    }

    /* Remover bordas durante geração do PDF */
    .pdf-rendering .page-element {
        border: none !important;
    }

    .pdf-rendering .capa-product-slot {
        border: none !important;
    }

    .pdf-rendering .product-slot {
        border: none !important;
    }

    .pdf-rendering .element-controls,
    .pdf-rendering .control-btn,
    .pdf-rendering .product-remove {
        display: none !important;
    }

    /* TABELA DE PRODUTOS */

    /* === ESTILOS PARA MODAL DE PRODUTOS COM TABELA === */
.bm-popup-overlay {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    backdrop-filter: blur(3px);
}

.bm-popup-overlay.active {
    display: flex;
    justify-content: center;
    align-items: center;
}

.tz-popup-window {
    background-color: white;
    border-radius: 12px;
    width: 95%;
    max-width: 1400px;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
    position: relative;
}

.ud-close-popup {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 32px;
    color: #999;
    cursor: pointer;
    z-index: 10;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s;
}

.ud-close-popup:hover {
    background-color: #f0f0f0;
    color: #333;
    transform: rotate(90deg);
}

.qx-product-popup {
    padding: 25px;
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: calc(90vh - 80px); /* Ajusta a altura considerando o título */
    overflow: hidden;
}

.dn-popup-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.fw-popup-heading {
    font-size: 20px;
    font-weight: bold;
    color: #333;
}

.ml-search-section {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tc-search-input {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tc-search-input label {
    font-weight: bold;
    font-size: 14px;
    color: #555;
}

.tc-search-input input {
    padding: 10px 15px;
    border: 2px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    width: 300px;
    transition: all 0.3s;
}

.tc-search-input input:focus {
    outline: none;
    border-color: #4CAF50;
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
}

.yf-help-tooltip {
    position: relative;
    display: inline-block;
}

.pr-help-icon {
    cursor: help;
    font-size: 18px;
}

.gk-tooltip-text {
    visibility: hidden;
    width: 200px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -100px;
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 12px;
}

.yf-help-tooltip:hover .gk-tooltip-text {
    visibility: visible;
    opacity: 1;
}

.lv-divider-line {
    border: none;
    border-top: 2px solid #f0f0f0;
    margin: 15px 0;
}

.uy-results-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0; /* IMPORTANTE para flex funcionar */
}

.uy-results-section h3 {
    flex-shrink: 0; /* Impede que o título encolha */
    font-size: 18px;
    margin-bottom: 15px;
    color: #333;
}

.ks-scroll-area {
    flex: 1;
    overflow-y: auto; /* FORÇA A BARRA DE ROLAGEM */
    overflow-x: auto;
    border: 1px solid #ddd;
    border-radius: 8px;
    min-height: 0; /* IMPORTANTE */
    max-height: 500px; /* Define altura máxima */
}

.vx-products-table {
    width: 100%;
    border-collapse: collapse;
}

.vx-products-table thead {
    background-color: #f8f9fa;
    position: sticky;
    top: 0;
    z-index: 10;
}

.vx-products-table th {
    padding: 12px 10px;
    text-align: left;
    font-weight: bold;
    font-size: 13px;
    color: #333;
    border-bottom: 2px solid #ddd;
}

.vx-products-table td {
    padding: 10px;
    border-bottom: 1px solid #eee;
    font-size: 13px;
    color: #555;
}

.vx-products-table tbody tr:hover {
    background-color: #f5f5f5;
}

.vx-products-table img {
    border-radius: 4px;
    border: 1px solid #ddd;
}

.btn-selecionar {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.3s;
}

.btn-selecionar:hover {
    background-color: #45a049;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(76, 175, 80, 0.3);
}

.cm-action-buttons {
    flex-shrink: 0;
    display: flex;
    gap: 10px;
    justify-content: space-between; /* ← MUDANÇA AQUI */
    margin-top: 15px;
    padding-top: 15px;
    border-top: 2px solid #f0f0f0;
}

.dk-secondary-btn, .hm-primary-btn {
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s;
}

.dk-secondary-btn {
    background-color: #f0f0f0;
    color: #333;
}

.dk-secondary-btn:hover {
    background-color: #e0e0e0;
}

.hm-primary-btn {
    background-color: #2196F3;
    color: white;
}

.hm-primary-btn:hover {
    background-color: #1976D2;
}


/* === ESTILOS PARA CHECKBOX === */
.checkbox-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.checkbox-selecionar {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: #4CAF50;
}

.checkbox-selecionar:hover {
    transform: scale(1.1);
}

.vx-products-table tbody tr.selected {
    background-color: #e8f5e9 !important;
}

/*Popup preço novo */

/* Seção de cores */
.colors-section {
    margin: 20px 0;
    padding: 15px;
    background: #f9fafb;
    border-radius: 8px;
}

.colors-heading {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 15px;
    color: #374151;
}

.colors-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.color-control {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.color-control input[type="color"] {
    width: 60px;
    height: 60px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.2s;
}

.color-control input[type="color"]:hover {
    transform: scale(1.05);
    border-color: #3b82f6;
}

.color-label {
    font-size: 12px;
    color: #6b7280;
    text-align: center;
    line-height: 1.3;
}


/* Centralização do Modal de Preços */
#priceModal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

#priceModal.active {
    display: flex;
}

.price-modal-content {
    background: white;
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    position: relative;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #e5e7eb;
}

.modal-header h2 {
    margin: 0;
    font-size: 20px;
    color: #1f2937;
}

.close-modal {
    background: none;
    border: none;
    font-size: 28px;
    color: #6b7280;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-modal:hover {
    color: #1f2937;
}

.price-form {
    padding: 20px;
}

.price-input-group {
    margin-bottom: 15px;
}

.price-input-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
    color: #374151;
    font-size: 14px;
}

.price-input-group input[type="text"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 14px;
    box-sizing: border-box;
}

.price-input-group input[type="text"]:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Seção de cores */
.colors-section {
    margin: 20px 0;
    padding: 15px;
    background: #f9fafb;
    border-radius: 8px;
}

.colors-heading {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 15px;
    color: #374151;
}

.colors-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.color-control {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.color-control input[type="color"] {
    width: 60px;
    height: 60px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.2s;
}

.color-control input[type="color"]:hover {
    transform: scale(1.05);
    border-color: #3b82f6;
}

.color-label {
    font-size: 12px;
    color: #6b7280;
    text-align: center;
    line-height: 1.3;
}

.price-buttons {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    justify-content: flex-end;
}

.btn {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-secondary {
    background-color: #f3f4f6;
    color: #374151;
}

.btn-secondary:hover {
    background-color: #e5e7eb;
}

.btn-primary {
    background-color: #3b82f6;
    color: white;
}

.btn-primary:hover {
    background-color: #2563eb;
}

.color-control input[type="color"] {
    
    border-radius: 50%;
}

.price-input-group input[type="text"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 16px; /* Aumentado para melhor legibilidade */
    box-sizing: border-box;
    font-family: monospace; /* Fonte monospace para valores */
    letter-spacing: 0.5px;
}



.ean-validation {
    margin-top: 4px;
    font-size: 0.85rem;
    padding: 4px 8px;
    border-radius: 4px;
    display: none;
  }
  
  .ean-validation.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
    display: block;
  }
  
  .ean-validation.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    display: block;
  }
  
  .ean-validation.loading {
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffeaa7;
    display: block;
  }
  
  .produto-encontrado {
    margin-top: 8px;
    padding: 12px;
    background-color: #e3f2fd;
    border: 1px solid #2196f3;
    border-radius: 4px;
    display: none;
  }
  
  .produto-encontrado h4 {
    margin: 0 0 8px 0;
    color: #1976d2;
    font-size: 0.9rem;
  }
  
  .produto-info {
    display: flex;
    gap: 12px;
    align-items: flex-start;
  }
  
  .produto-detalhes {
    flex: 1;
    font-size: 0.8rem;
    color: #424242;
    line-height: 1.4;
  }
  
  .produto-detalhes strong {
    color: #1976d2;
  }
  
  .produto-imagem-preview {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #ddd;
    background-color: #f5f5f5;
  }
  
  input.ean-exists {
    border-color: #f44336 !important;
    background-color: #ffebee !important;
  }
  
  button[type="submit"]:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: #ccc !important;
  }






  /**** NOVOOOO ****/

  
  .wrapper {
          width: 1200px;
          background-color: white;
          box-shadow: 0 0 10px rgba(0,0,0,0.1);
      }

      .header {
          background-color: #0d3d5c;
          color: white;
          padding: 15px 20px;
          font-size: 18px;
          font-weight: bold;
          display: flex;
          justify-content: space-between;
          align-items: center;
      }

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

      .header-btn {
          background-color: white;
          color: #0d3d5c;
          border: none;
          padding: 10px 20px;
          border-radius: 5px;
          cursor: pointer;
          font-weight: bold;
          font-size: 14px;
          transition: all 0.3s ease;
      }

      .header-btn:hover {
          background-color: #f0f0f0;
          transform: translateY(-2px);
      }

      .container {
          display: flex;
          height: calc(100vh - 53px);
      }

      .sidebar {
          width: 140px;
          background-color: #f5f5f5;
          padding: 10px;
          display: flex;
          flex-direction: column;
          gap: 8px;
          overflow-y: auto;
      }

      .sidebar-button {
          background-color: white;
          border: 1px solid #ddd;
          padding: 10px;
          text-align: center;
          cursor: pointer;
          font-size: 14px;
          border-radius: 3px;
          transition: background-color 0.2s;
      }

      .sidebar-button:hover {
          background-color: #f9f9f9;
      }

      .sidebar-button.active {
          background-color: #c8c8c8;
          font-weight: bold;
      }

      .add-page-button {
          background-color: white;
          border: 1px solid #ddd;
          padding: 10px;
          text-align: center;
          cursor: pointer;
          font-size: 13px;
          border-radius: 3px;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 5px;
          color: #e74c3c;
          font-weight: 500;
      }

      .add-page-button:hover {
          background-color: #fff5f5;
      }

      .add-icon {
          color: #e74c3c;
          font-size: 18px;
          font-weight: bold;
      }

      .main-content {
          flex: 1;
          padding: 20px;
          display: flex;
          justify-content: center;
          align-items: center;
          gap: 20px;
      }

      .canvas-container {
        border: 1px solid #ccc;
        width: 600px;
        height: 850px; /* ← ALTURA REDUZIDA */
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        position: relative;
        background-size: contain; /* ← MUDEI DE 'cover' PARA 'contain' */
        background-position: center;
        background-repeat: no-repeat;
        padding: 50px 20px 20px 20px;
        gap: 10px;
        margin-top: 20px;
    }
      .page-title {
          position: absolute;
          top: 20px;
          left: 20px;
          font-size: 16px;
          font-weight: bold;
          color: #0d3d5c;
          background-color: rgba(255, 255, 255, 0.9);
          padding: 8px 15px;
          border-radius: 5px;
          z-index: 10;
          display: none;
      }

      /* LAYOUT ESPECIAL PARA CAPA - GRID 20 PRODUTOS */
      .capa-products-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 8px;
          width: 100%;
          padding: 10px;
      }

      .capa-products-grid  img{
        display: none;
      }

      .capa-product-slot {
         border-radius: 5px;
          padding: 8px;
          cursor: pointer;
          transition: all 0.3s;
          min-height: 140px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          position: relative;
          background-color: rgb(255, 255, 255);
      }

      .capa-product-slot:hover {
          border-color: #666;
          background-color: #f9f9f9;
      }

      .capa-product-slot.filled {
          border-style: solid ;
          border: solid rgb(202, 200, 200) 5px;
          padding: 5px;
      }

      .capa-product-slot img {
          width: 100%;
          max-height: 60px;
          object-fit: contain;
          margin-bottom: 4px;
      }

      .capa-product-name {
          font-size: 12px;
          font-weight: bold;
          text-align: center;
          color: #333;
          line-height: 1.2;
          height: 30px;
          width: 100%;
      }

      .capa-product-subtitle {
          font-size: 8px;
          text-align: center;
          color: #666;
          line-height: 1.2;
          height: 12px;
          overflow: hidden;
          width: 100%;
          margin-bottom: 2px;
      }

      .capa-product-price {
          font-size: 8px;
          font-weight: bold;
          color: #e74c3c;
          text-align: center;
          margin-top: 2px;
          text-align: center;
          margin-left: 26px;

      }

      .capa-product-price-de {
          font-size: 6px;
          text-decoration: line-through;
          color: #999;
          text-align: center;
      }

      .capa-product-phrase {
          font-size: 7px;
          text-align: center;
          color: #555;
          line-height: 1.2;
          margin-top: 3px;
          width: 100%;
          overflow: hidden;
          max-height: 18px;
      }

      #fileInput {
          display: none;
      }

      .right-sidebar {
          display: flex;
          flex-direction: column;
          gap: 10px;
      }

      .element-cards-container {
          display: flex;
          flex-direction: column;
          gap: 10px;
      }

      .element-cards-container.hidden {
          display: none;
      }

      .element-card {
          background-color: white;
          border: 1px solid #ddd;
          border-radius: 8px;
          padding: 15px;
          width: 150px;
          text-align: center;
      }

      .element-card h3 {
          font-size: 15px;
          margin-bottom: 10px;
          color: #333;
          font-weight: bold;
      }

      .element-add-button {
          background-color: #e8e8e8;
          border: 1px dashed #999;
          padding: 8px 12px;
          cursor: pointer;
          font-size: 12px;
          border-radius: 5px;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 5px;
          transition: background-color 0.2s;
          color: #666;
          width: 100%;
      }

      .element-add-button:hover {
          background-color: #ddd;
      }

      .element-add-button:disabled {
          opacity: 0.5;
          cursor: not-allowed;
      }

      .element-add-button .plus-icon {
          font-size: 14px;
          font-weight: bold;
      }

      .add-background-button {
          background-color: white;
          border: 1px solid #ccc;
          padding: 8px 12px;
          cursor: pointer;
          font-size: 13px;
          border-radius: 3px;
          display: flex;
          align-items: center;
          gap: 5px;
          transition: background-color 0.2s;
          white-space: nowrap;
      }

      .add-background-button:hover {
          background-color: #f5f5f5;
      }

      .plus-sign {
          font-weight: bold;
          font-size: 16px;
      }

      .page-element {
          width: 100%;
          border-radius: 8px;
          padding: 10px;
          position: relative;
          background-color: transparent;
          transition: box-shadow 0.3s ease;
          cursor: move;
      }

      .page-element:hover {
          box-shadow: 0 4px 8px rgba(0,0,0,0.1);
      }

      .page-element.dragging {
          opacity: 0.5;
          cursor: grabbing;
      }

      .page-element.drag-over {
          border-color: #4CAF50;
          border-style: dashed;
      }

      .element-rodape {
          height: 215px;
      }

      .element-meia-pagina {
          height: 365px;
      }

      .element-destaque {
          height: 200px;
      }

      .element-avulso {
          height: 100px;
          margin-top: -38px;
          padding-top: 40px;
      }

      .element-header {
          display: flex;
          justify-content: flex-end;
          align-items: center;
          margin-bottom: 8px;
          position: relative;
      }

      .element-label {
          display: none;
      }

      .element-controls {
          position: absolute;
          top: -12px;
          right: -12px;
          display: flex;
          gap: 5px;
          z-index: 10;
      }

      .control-btn {
          background-color: white;
          border: 1px solid #ccc;
          border-radius: 4px;
          width: 28px;
          height: 28px;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 13px;
          transition: all 0.2s ease;
          box-shadow: 0 2px 4px rgba(0,0,0,0.2);
      }

      .control-btn:hover:not(:disabled) {
          background-color: #e74c3c;
          color: white;
          transform: scale(1.1);
          box-shadow: 0 3px 6px rgba(0,0,0,0.3);
      }

      .control-btn:active:not(:disabled) {
          transform: translateY(0);
          box-shadow: 0 1px 2px rgba(0,0,0,0.1);
      }

      .control-btn:disabled {
          opacity: 0.3;
          cursor: not-allowed;
      }

      .products-container {
          display: flex;
          gap: 6px;
          height: calc(100% - 40px);
          width: 100%;
          margin-top: -88px;
          margin-left: -10px;
          padding-top: 65px;
      }

      .layout-rodape {
          flex-direction: row;
          flex-wrap: nowrap;
      }

      .layout-avulso {
          flex-direction: row;
          flex-wrap: nowrap;
      }

      .layout-avulso .product-slot {
          padding: 5px 3px;
      }

      .layout-avulso .product-slot img {
          height: 55px;
      }

      .layout-avulso .product-name {
          height: 30px;
      }

      .layout-avulso .product-subtitle {
          height: 9px;
      }

      .layout-avulso .product-prices {
          height: 14px;
      }

      .layout-meia-pagina {
          flex-direction: column;
      }

      .meia-pagina-row {
          display: flex;
          gap: 5px;
          flex: 1;
          min-height: 0;
          margin-top: -8px;
      }

      .layout-meia-pagina .product-slot {
          padding: 12px 8px;
      }

      .layout-meia-pagina .product-slot img {
          height: 65px;
      }

      .layout-meia-pagina .product-name {
          font-size: 8px;
          height: 40px;
          width: 60px;
      }

      .layout-meia-pagina .product-subtitle {
          font-size: 7px;
          height: 34px;
      }

      .layout-meia-pagina .product-prices {
          height: 24px;
      }

      .layout-meia-pagina .price-de {
          font-size: 7px;
      }

      .layout-meia-pagina .price-por {
          font-size: 9px;
      }

      .layout-destaque {
          flex-direction: row;
          gap: 6px;
      }

      .destaque-left {
          flex: 1.2;
          min-width: 0;
      }

      .destaque-left .product-slot.filled {
          display: flex;
          flex-direction: column;
          padding: 5px;
          width: 200px;
          margin-left: 50px;
      }

      .destaque-left .product-slot img {
          width: 100%;
          height: 100px;
          max-height: 100px;
          object-fit: contain;
          margin-bottom: 5px;
      }

      .destaque-left .product-info-container {
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
          width: 100%;
          padding: 8px;
          border-radius: 5px;
      }

      .destaque-left .product-text-left {
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          text-align: left;
      }

      .destaque-left .product-name {
          font-size: 12px;
          text-align: left;
          height: auto;
          margin: 0 0 3px 0;
          width: 120px;
      }

      .destaque-left .product-subtitle {
          font-size: 12px;
          text-align: left;
          height: auto;
          margin: 0;
      }

      .destaque-left .product-prices {
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          justify-content: center;
          margin: 0;
          padding-left: 10px;
      }

      .destaque-left .price-de {
          font-size: 7px;
          white-space: nowrap;
      }

      .destaque-left .price-por {
          font-size: 14px;
          font-weight: bold;
          white-space: nowrap;
      }

      .destaque-right {
          flex: 1;
          display: flex;
          flex-direction: column;
          gap: 5px;
          min-width: 0;
      }

      .destaque-right .product-slot {
          min-height: 80px;
      }

      .destaque-right .product-slot.filled {
          display: flex;
          flex-direction: row;
          align-items: flex-start;
          padding: 5px;
          gap: 5px;
      }

      .destaque-right .product-slot.filled.reversed {
          flex-direction: row-reverse;
      }

      .destaque-right .product-slot img {
          width: 60px;
          height: 60px;
          min-width: 60px;
          object-fit: contain;
          margin: 0;
      }

      .destaque-right .product-info-right {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: flex-start;
          flex: 1;
          text-align: left;
      }

      .destaque-right .product-slot.reversed .product-info-right {
          align-items: flex-end;
          text-align: right;
      }

      .destaque-right .product-name {
          font-size: 12px;
          height: auto;
          margin: 0 0 3px 0;
          text-align: left;
          height: 60px;
      }

      .destaque-right .product-slot.reversed .product-name {
          text-align: left;
      }

      .destaque-right .product-subtitle {
          font-size: 8px;
          height: auto;
          margin: 0 0 3px 0;
          text-align: left;
      }

      .destaque-right .product-slot.reversed .product-subtitle {
          text-align: left;
      }

      .destaque-right .product-prices {
          height: auto;
          font-size: 8px;
          margin: 0;
          text-align: left;
      }

      .destaque-right .product-slot.reversed .product-prices {
          text-align: left;
      }

      .destaque-right .price-de {
          font-size: 5px;
          text-align: left;
      }

      .destaque-right .product-slot.reversed .price-de {
          text-align: left;
      }

      .destaque-right .price-por {
          text-align: left;
      }

      .destaque-right .product-slot.reversed .price-por {
          text-align: left;
      }

      .product-slot {
          border-radius: 5px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: flex-start;
          cursor: pointer;
          transition: all 0.3s;
          padding: 10px 6px;
          position: relative;
          flex: 1;
          min-width: 0;
          min-height: 70px;
          margin-top: 15px;
      }

      .product-slot:hover {
          border-color: #666;
      }

      .product-slot.filled {
          justify-content: flex-start;
          padding: 3px 5px;
          height: 150px;
          width: 200px;
          margin-top: 15px;
      }

      .product-slot img {
          width: 100%;
          height: 100px;
          object-fit: contain;
          margin: 0 auto 4px auto;
          display: block;
      }

      .product-name {
            font-size: 7px;
            font-weight: bold;
            text-align: right;
            color: #333;
            line-height: 1.3;
            height: 25px;
            overflow: hidden;
            width: 100%;
            word-wrap: break-word;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            width: 60px;
            text-transform: uppercase;;
        }

      .product-subtitle {
          font-size: 7px;
          text-align: right;
          color: #666;
          width: 60px;
          height: 34px;
          overflow: hidden;
          line-height: 1.3;

      }

      .product-prices {
          font-size: 9px;
          text-align: right;
          margin-top: 2px;
          width: 100%;
          height: 24px;
      }

      .price-de {
          text-decoration: line-through;
          color: #999;
          font-size: 7px;
          line-height: 1.3;
      }

     /* .price-por {
          color: #e74c3c;
          font-weight: bold;
          font-size: 9px;
          line-height: 1.3;
          text-align: right;
      } */

      .price-por {
          color: #e74c3c;
          font-weight: bold;
          font-size: 10px;
          line-height: 1.3;
          /* width: 80px; */
          text-align: right;
          width: 80px;
          margin-left: -20px;
      }

      .add-product-text {
          font-size: 10px;
          color: #999;
          border: #999 dashed 1px;
          padding: 8px;
      }

      .product-info-container {
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 100%;
          gap: 8px;
      }

      .product-text-container {
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          text-align: left;
      }

      .product-text-container .product-name {
          margin: 0;
      }

      .product-text-container .product-subtitle {
          margin: 0;
      }

      .product-info-container .product-prices {
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          justify-content: center;
          margin: 0;
          height: auto;
      }

      .modal {
          display: none;
          position: fixed;
          z-index: 1000;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          background-color: rgba(0,0,0,0.5);
          backdrop-filter: blur(3px);
          animation: fadeIn 0.3s ease;
      }

      @keyframes fadeIn {
          from { opacity: 0; }
          to { opacity: 1; }
      }

      .modal.active {
          display: flex;
          justify-content: center;
          align-items: center;
      }

      .modal-content {
          background-color: white;
          padding: 25px;
          border-radius: 12px;
          width: 850px;
          max-height: 85vh;
          overflow-y: auto;
          box-shadow: 0 10px 40px rgba(0,0,0,0.3);
          animation: slideUp 0.3s ease;
      }

      @keyframes slideUp {
          from {
              transform: translateY(30px);
              opacity: 0;
          }
          to {
              transform: translateY(0);
              opacity: 1;
          }
      }

      .modal-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 20px;
          padding-bottom: 15px;
          border-bottom: 2px solid #f0f0f0;
      }

      .modal-header h2 {
          margin: 0;
          font-size: 24px;
          color: #333;
      }

      .close-modal {
          background: none;
          border: none;
          font-size: 36px;
          cursor: pointer;
          color: #999;
          transition: all 0.2s ease;
          width: 40px;
          height: 40px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 50%;
      }

      .close-modal:hover {
          background-color: #f0f0f0;
          color: #333;
          transform: rotate(90deg);
      }

      .products-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 15px;
          min-height: 200px;
      }

      .loading-message {
          grid-column: 1 / -1;
          text-align: center;
          padding: 40px;
          color: #666;
          font-size: 16px;
      }

      .product-card {
          border: 2px solid #ddd;
          border-radius: 10px;
          padding: 12px;
          text-align: center;
          cursor: pointer;
          transition: all 0.3s ease;
          background: white;
      }

      .product-card:hover {
          border-color: #4CAF50;
          box-shadow: 0 5px 15px rgba(0,0,0,0.15);
          transform: translateY(-5px);
      }

      .product-card:active {
          transform: translateY(-2px);
      }

      .product-card img {
          width: 100%;
          height: 120px;
          object-fit: contain;
          margin-bottom: 10px;
      }

      .product-card h4 {
          font-size: 13px;
          margin: 8px 0;
          color: #333;
          line-height: 1.3;
          min-height: 35px;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
      }

      .price-modal-content {
          width: 450px;
      }

      .price-form {
          display: flex;
          flex-direction: column;
          gap: 15px;
      }

      .price-input-group {
          display: flex;
          flex-direction: column;
          gap: 8px;
      }

      .price-input-group label {
          font-weight: bold;
          font-size: 15px;
          color: #333;
      }

      .price-input-group input {
          padding: 12px;
          border: 2px solid #ddd;
          border-radius: 8px;
          font-size: 16px;
          transition: all 0.3s ease;
      }

      .price-input-group input:focus {
          outline: none;
          border-color: #4CAF50;
          box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
      }

      .price-buttons {
          display: flex;
          gap: 10px;
          justify-content: flex-end;
          margin-top: 10px;
      }

      .btn {
          padding: 12px 20px;
          border: none;
          border-radius: 8px;
          cursor: pointer;
          font-size: 15px;
          font-weight: 600;
          transition: all 0.3s ease;
          min-width: 110px;
      }

      .btn-primary {
          background-color: #4CAF50;
          color: white;
          box-shadow: 0 4px 8px rgba(76, 175, 80, 0.3);
      }

      .btn-primary:hover {
          background-color: #45a049;
          transform: translateY(-2px);
          box-shadow: 0 6px 12px rgba(76, 175, 80, 0.4);
      }

      .btn-primary:active {
          transform: translateY(0);
      }

      .btn-secondary {
          background-color: #f0f0f0;
          color: #333;
      }

      .btn-secondary:hover {
          background-color: #e0e0e0;
      }

      .product-remove {
          position: absolute;
          top: -8px;
          right: -8px;
          background-color: #e74c3c;
          color: white;
          border: none;
          border-radius: 50%;
          width: 22px;
          height: 22px;
          font-size: 14px;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          z-index: 10;
          box-shadow: 0 2px 4px rgba(0,0,0,0.2);
      }

      .product-remove:hover {
          background-color: #c0392b;
          transform: scale(1.1);
      }

      .loading-overlay {
          display: none;
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: rgba(0,0,0,0.7);
          z-index: 2000;
          justify-content: center;
          align-items: center;
      }

      .loading-overlay.active {
          display: flex;
      }

      .loading-content {
          background-color: white;
          padding: 30px;
          border-radius: 10px;
          text-align: center;
          min-width: 300px;
      }

      .loading-spinner {
          border: 4px solid #f3f3f3;
          border-top: 4px solid #4CAF50;
          border-radius: 50%;
          width: 50px;
          height: 50px;
          animation: spin 1s linear infinite;
          margin: 0 auto 20px;
      }

      @keyframes spin {
          0% { transform: rotate(0deg); }
          100% { transform: rotate(360deg); }
      }

      .loading-text {
          font-size: 16px;
          color: #333;
          font-weight: bold;
      }

      .loading-subtext {
          font-size: 14px;
          color: #666;
          margin-top: 10px;
      }


      /* Download meu PDF */

      /* CSS ESPECIAL APENAS PARA GERAÇÃO DE PDF */
  .pdf-rendering img {
      width: auto !important;
      max-width: 100% !important;
      height: auto !important;
      object-fit: contain !important;
  }

  .pdf-rendering .capa-product-slot img {
      max-height: 60px !important;
  }

  .pdf-rendering .product-slot img {
      max-height: 60px !important;
  }

  .pdf-rendering .layout-avulso .product-slot img {
      max-height: 55px !important;
  }

  .pdf-rendering .layout-meia-pagina .product-slot img {
      max-height: 65px !important;
  }

  .pdf-rendering .destaque-left .product-slot img {
      max-height: 100px !important;
  }

  .pdf-rendering .destaque-right .product-slot img {
      max-height: 60px !important;
      max-width: 60px !important;
  }

  /* Remover bordas durante geração do PDF */
  .pdf-rendering .page-element {
      border: none !important;
  }

  .pdf-rendering .capa-product-slot {
      border: none !important;
  }

  .pdf-rendering .product-slot {
      border: none !important;
  }

  .pdf-rendering .element-controls,
  .pdf-rendering .control-btn,
  .pdf-rendering .product-remove {
      display: none !important;
  }

  /* TABELA DE PRODUTOS */

  /* === ESTILOS PARA MODAL DE PRODUTOS COM TABELA === */
.bm-popup-overlay {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  backdrop-filter: blur(3px);
}

.bm-popup-overlay.active {
  display: flex;
  justify-content: center;
  align-items: center;
}

.tz-popup-window {
  background-color: white;
  border-radius: 12px;
  width: 95%;
  max-width: 1400px;
  max-height: 90vh;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0,0,0,0.3);
  display: flex;
  flex-direction: column;
  position: relative;
}

.ud-close-popup {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 32px;
  color: #999;
  cursor: pointer;
  z-index: 10;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s;
}

.ud-close-popup:hover {
  background-color: #f0f0f0;
  color: #333;
  transform: rotate(90deg);
}

.qx-product-popup {
  padding: 25px;
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: calc(90vh - 80px); /* Ajusta a altura considerando o título */
  overflow: hidden;
}

.dn-popup-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.fw-popup-heading {
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

.ml-search-section {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tc-search-input {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tc-search-input label {
  font-weight: bold;
  font-size: 14px;
  color: #555;
}

.tc-search-input input {
  padding: 10px 15px;
  border: 2px solid #ddd;
  border-radius: 8px;
  font-size: 14px;
  width: 300px;
  transition: all 0.3s;
}

.tc-search-input input:focus {
  outline: none;
  border-color: #4CAF50;
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
}

.yf-help-tooltip {
  position: relative;
  display: inline-block;
}

.pr-help-icon {
  cursor: help;
  font-size: 18px;
}

.gk-tooltip-text {
  visibility: hidden;
  width: 200px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -100px;
  opacity: 0;
  transition: opacity 0.3s;
  font-size: 12px;
}

.yf-help-tooltip:hover .gk-tooltip-text {
  visibility: visible;
  opacity: 1;
}

.lv-divider-line {
  border: none;
  border-top: 2px solid #f0f0f0;
  margin: 15px 0;
}

.uy-results-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0; /* IMPORTANTE para flex funcionar */
}

.uy-results-section h3 {
  flex-shrink: 0; /* Impede que o título encolha */
  font-size: 18px;
  margin-bottom: 15px;
  color: #333;
}

.ks-scroll-area {
  flex: 1;
  overflow-y: auto; /* FORÇA A BARRA DE ROLAGEM */
  overflow-x: auto;
  border: 1px solid #ddd;
  border-radius: 8px;
  min-height: 0; /* IMPORTANTE */
  max-height: 500px; /* Define altura máxima */
}

.vx-products-table {
  width: 100%;
  border-collapse: collapse;
}

.vx-products-table thead {
  background-color: #f8f9fa;
  position: sticky;
  top: 0;
  z-index: 10;
}

.vx-products-table th {
  padding: 12px 10px;
  text-align: left;
  font-weight: bold;
  font-size: 13px;
  color: #333;
  border-bottom: 2px solid #ddd;
}

.vx-products-table td {
  padding: 10px;
  border-bottom: 1px solid #eee;
  font-size: 13px;
  color: #555;
}

.vx-products-table tbody tr:hover {
  background-color: #f5f5f5;
}

.vx-products-table img {
  border-radius: 4px;
  border: 1px solid #ddd;
}

.btn-selecionar {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.3s;
}

.btn-selecionar:hover {
  background-color: #45a049;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(76, 175, 80, 0.3);
}

.cm-action-buttons {
  flex-shrink: 0;
  display: flex;
  gap: 10px;
  justify-content: space-between; /* ← MUDANÇA AQUI */
  margin-top: 15px;
  padding-top: 15px;
  border-top: 2px solid #f0f0f0;
}

.dk-secondary-btn, .hm-primary-btn {
  padding: 12px 20px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s;
}

.dk-secondary-btn {
  background-color: #f0f0f0;
  color: #333;
}

.dk-secondary-btn:hover {
  background-color: #e0e0e0;
}

.hm-primary-btn {
  background-color: #2196F3;
  color: white;
}

.hm-primary-btn:hover {
  background-color: #1976D2;
}


/* === ESTILOS PARA CHECKBOX === */
.checkbox-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.checkbox-selecionar {
  width: 20px;
  height: 20px;
  cursor: pointer;
  accent-color: #4CAF50;
}

.checkbox-selecionar:hover {
  transform: scale(1.1);
}

.vx-products-table tbody tr.selected {
  background-color: #e8f5e9 !important;
}

/*Popup preço novo */

/* Seção de cores */
.colors-section {
  margin: 20px 0;
  padding: 15px;
  background: #f9fafb;
  border-radius: 8px;
}

.colors-heading {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 15px;
  color: #374151;
}

.colors-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}

.color-control {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.color-control input[type="color"] {
  width: 60px;
  height: 60px;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.2s;
}

.color-control input[type="color"]:hover {
  transform: scale(1.05);
  border-color: #3b82f6;
}

.color-label {
  font-size: 12px;
  color: #6b7280;
  text-align: center;
  line-height: 1.3;
}


/* Centralização do Modal de Preços */
#priceModal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  justify-content: center;
  align-items: center;
}

#priceModal.active {
  display: flex;
}

.price-modal-content {
  background: white;
  border-radius: 12px;
  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  position: relative;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #e5e7eb;
}

.modal-header h2 {
  margin: 0;
  font-size: 20px;
  color: #1f2937;
}

.close-modal {
  background: none;
  border: none;
  font-size: 28px;
  color: #6b7280;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-modal:hover {
  color: #1f2937;
}

.price-form {
  padding: 20px;
}

.price-input-group {
  margin-bottom: 15px;
}

.price-input-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: 500;
  color: #374151;
  font-size: 14px;
}

.price-input-group input[type="text"] {
  width: 100%;
  padding: 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  box-sizing: border-box;
}

.price-input-group input[type="text"]:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Seção de cores */
.colors-section {
  margin: 20px 0;
  padding: 15px;
  background: #f9fafb;
  border-radius: 8px;
}

.colors-heading {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 15px;
  color: #374151;
}

.colors-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}

.color-control {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.color-control input[type="color"] {
  width: 60px;
  height: 60px;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.2s;
}

.color-control input[type="color"]:hover {
  transform: scale(1.05);
  border-color: #3b82f6;
}

.color-label {
  font-size: 12px;
  color: #6b7280;
  text-align: center;
  line-height: 1.3;
}

.price-buttons {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  justify-content: flex-end;
}

.btn {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-secondary {
  background-color: #f3f4f6;
  color: #374151;
}

.btn-secondary:hover {
  background-color: #e5e7eb;
}

.btn-primary {
  background-color: #3b82f6;
  color: white;
}

.btn-primary:hover {
  background-color: #2563eb;
}

.color-control input[type="color"] {
  
  border-radius: 50%;
}

.price-input-group input[type="text"] {
  width: 100%;
  padding: 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 16px; /* Aumentado para melhor legibilidade */
  box-sizing: border-box;
  font-family: monospace; /* Fonte monospace para valores */
  letter-spacing: 0.5px;
}

.product-slot .filled{
    width: 150px;
}
/*
.wp-promo-price{
    margin-left: -26px;
}
*/



.canvas-container {
    border: 1px solid #ccc;
    width: 600px;
    height: 850px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    padding: 50px 20px 20px 20px;
    gap: 10px;
    margin-top: 20px;
    overflow-x: hidden; /* ← ADICIONE ESTA LINHA */
    overflow-y: auto; /* ← MANTENHA SCROLL VERTICAL */
}

.capa-products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    width: 100%; /* ← CERTIFIQUE-SE QUE ESTÁ 100% */
    max-width: 100%; /* ← ADICIONE ESTA LINHA */
    padding: 10px;
    box-sizing: border-box; /* ← ADICIONE ESTA LINHA */
    margin-left: -10px;
}

.capa-product-slot {
    border-radius: 5px;
    padding: 8px;
    cursor: pointer;
    transition: all 0.3s;
    min-height: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    background-color: rgb(255, 255, 255);
    max-width: 100%; /* ← ADICIONE ESTA LINHA */
    box-sizing: border-box; /* ← ADICIONE ESTA LINHA */
}

.capa-product-slot.filled {
    border-style: solid;
    border: solid rgb(202, 200, 200) 5px;
    padding: 5px;
    width: auto; /* ← MUDE DE LARGURA FIXA PARA AUTO */
    max-width: 100%; /* ← ADICIONE ESTA LINHA */
}



.canvas-container {
    border: 1px solid #ccc;
    width: 600px;
    height: 850px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    padding: 50px 20px 20px 20px;
    gap: 40px;
    margin-top: 20px;
    overflow-x: hidden;
    overflow-y: auto;
}

.capa-products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    width: 100%;
    max-width: 560px; /* ← MUDANÇA: 600px - 40px (padding lateral) */
    padding: 10px;
    box-sizing: border-box;
    margin-left: 0; /* ← MUDANÇA: removido margin negativa */
    margin-right: 0; /* ← ADICIONADO */
}

.capa-product-slot {
    border-radius: 5px;
    padding: 8px;
    cursor: pointer;
    transition: all 0.3s;
    min-height: 110px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    background-color: rgb(255, 255, 255);
    width: 100%; /* ← MUDANÇA: forçar 100% da coluna do grid */
    max-width: 100%;
    box-sizing: border-box;
    padding-top: 10px;
}

.capa-product-slot.filled {
    border: solid rgb(202, 200, 200) 5px;
    padding: 5px;
    width: 100%; /* ← MUDANÇA: manter 100% */
    max-width: 100%;
    box-sizing: border-box; /* ← IMPORTANTE */
}

/* Ajuste para as imagens dentro dos slots */
.capa-product-slot img {
    width: 100%;
    max-width: 100%; /* ← ADICIONADO */
    max-height: 60px;
    object-fit: contain;
    margin-bottom: 4px;
}

/* Ajuste específico para PDF */
.pdf-rendering .capa-products-grid {
    max-width: 560px;
    margin-left: 0;
    padding: 5px; /* ← Reduzir padding no PDF */
}

.pdf-rendering .capa-product-slot {
    width: 100%;
    max-width: 100%;
}

.product-slot {
    margin-right: -20px;
}

.kb-price-container{
    margin-top: -70px;
    margin-right: 10px;
    }

#ativo_en{
    background-color: #0d3d5c;
    color: white;
}


.ativo_red{
    background-color: white;
    color: black;
}

/* ============================================
   ESTILOS PARA IMPRESSÃO - CONTROLE DE PÁGINAS
   ============================================ */

/* Reset de impressão */
@media print {
  body * {
    visibility: hidden;
  }
  
  .page-container,
  .page-container * {
    visibility: visible;
  }
  
  .page-container {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  }
  
  /* Ocultar elementos de interface */
  .header,
  .sidebar,
  .right-sidebar,
  .element-controls,
  .control-btn,
  .product-remove,
  .add-product-text,
  .modal,
  .loading-overlay {
    display: none !important;
  }
}

/* Contêiner para páginas A4 */
.page-container {
  display: none; /* Oculto na tela, visível apenas no PDF */
}

.page-a4 {
  width: 210mm;
  height: 297mm;
  background: white;
  margin: 0 auto 20mm;
  position: relative;
  overflow: hidden;
  page-break-after: always;
  box-sizing: border-box;
}

/* Estilos específicos para impressão */
@media print {
  .page-a4 {
    margin: 0;
    padding: 0;
    box-shadow: none;
    border: none;
  }
  
  /* Garantir que imagens de fundo sejam impressas */
  .page-a4 {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* Remover elementos interativos do PDF */
.pdf-mode .element-controls,
.pdf-mode .control-btn,
.pdf-mode .product-remove,
.pdf-mode .add-product-text,
.pdf-mode .sidebar-button,
.pdf-mode .header-btn,
.pdf-mode .header,
.pdf-mode .sidebar,
.pdf-mode .right-sidebar {
  display: none !important;
}

/* Ajustar layout dos elementos para impressão */
.pdf-mode .canvas-container {
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  padding: 15mm 10mm 10mm 10mm !important;
  background-size: contain !important;
  box-sizing: border-box;
}

/* Manter proporções dos elementos */
.pdf-mode .page-element {
  transform: none !important;
  margin: 0 auto !important;
}

/* Ajustar grid da capa */
.pdf-mode .capa-products-grid {
  width: 100% !important;
  max-width: 180mm !important;
  margin: 0 auto !important;
  gap: 4mm !important;
}

/* Garantir qualidade de imagens */
.pdf-mode img {
  max-width: 100% !important;
  height: auto !important;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* Controle de quebra de página */
.page-break {
  page-break-after: always;
}

.no-break {
  page-break-inside: avoid;
}

/* Garantir cores de fundo */
.force-background {
  background-color: inherit !important;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}