diff --git a/assets/uploads/vouchers/6a0b67b410d5c-Screenshot_349.png b/assets/uploads/vouchers/6a0b67b410d5c-Screenshot_349.png
new file mode 100644
index 00000000..3cd4d4ce
Binary files /dev/null and b/assets/uploads/vouchers/6a0b67b410d5c-Screenshot_349.png differ
diff --git a/assets/uploads/vouchers/6a0b7d8c443c3-Captura de pantalla 2026-05-18 155744.png b/assets/uploads/vouchers/6a0b7d8c443c3-Captura de pantalla 2026-05-18 155744.png
new file mode 100644
index 00000000..4c93d837
Binary files /dev/null and b/assets/uploads/vouchers/6a0b7d8c443c3-Captura de pantalla 2026-05-18 155744.png differ
diff --git a/assets/uploads/vouchers/6a0b7df2ecfaf-Captura de pantalla 2026-05-18 155946.png b/assets/uploads/vouchers/6a0b7df2ecfaf-Captura de pantalla 2026-05-18 155946.png
new file mode 100644
index 00000000..7bae02c1
Binary files /dev/null and b/assets/uploads/vouchers/6a0b7df2ecfaf-Captura de pantalla 2026-05-18 155946.png differ
diff --git a/assets/uploads/vouchers/6a0b821d6131a-248.png b/assets/uploads/vouchers/6a0b821d6131a-248.png
new file mode 100644
index 00000000..5cb993d0
Binary files /dev/null and b/assets/uploads/vouchers/6a0b821d6131a-248.png differ
diff --git a/assets/uploads/vouchers/6a0b8d3552742-723.png b/assets/uploads/vouchers/6a0b8d3552742-723.png
new file mode 100644
index 00000000..918d49d0
Binary files /dev/null and b/assets/uploads/vouchers/6a0b8d3552742-723.png differ
diff --git a/assets/uploads/vouchers/6a0b8d8e85104-Captura de pantalla 2026-05-18 170655.png b/assets/uploads/vouchers/6a0b8d8e85104-Captura de pantalla 2026-05-18 170655.png
new file mode 100644
index 00000000..709af7f5
Binary files /dev/null and b/assets/uploads/vouchers/6a0b8d8e85104-Captura de pantalla 2026-05-18 170655.png differ
diff --git a/calculo_costos.php b/calculo_costos.php
index e2219166..33d1ffe4 100644
--- a/calculo_costos.php
+++ b/calculo_costos.php
@@ -8,7 +8,8 @@ $db = db();
 // Obtener videos y sus costos asociados
 $stmt = $db->query("SELECT mv.id, mv.orden, mv.foto_producto, p.nombre as nombre_producto,
                            mc.costo_producto, mc.costo_fijo_film, mc.comision_asesora, 
-                           mc.delivery, mc.costo_publicitario, mc.inversion_total, mc.promo_1
+                           mc.delivery, mc.costo_publicitario, mc.inversion_total, 
+                           mc.promo_1, mc.promo_2, mc.promo_3
                     FROM marketing_videos mv 
                     LEFT JOIN products p ON mv.producto_id = p.id 
                     LEFT JOIN marketing_costos mc ON mv.id = mc.video_id
@@ -38,19 +39,32 @@ $costos = $stmt->fetchAll(PDO::FETCH_ASSOC);
         object-fit: cover;
         border-radius: 4px;
     }
+    .editable {
+        background-color: #ffffff;
+        transition: all 0.2s;
+        position: relative;
+    }
     .editable:hover {
-        background-color: #f1f3f5;
+        background-color: #f0f7ff !important;
         cursor: pointer;
+        box-shadow: inset 0 0 0 1px #0d6efd;
+        z-index: 1;
+    }
+    .recaudo-cell {
+        background-color: #fdfdfd;
+        cursor: default;
+        color: #6c757d;
     }
     .inline-edit-input {
         width: 100%;
         padding: 2px 5px;
         font-size: 0.85rem;
-        border: 1px solid #0d6efd;
+        border: 2px solid #0d6efd;
         border-radius: 3px;
+        text-align: center;
     }
     .bg-total {
-        background-color: #e9ecef;
+        background-color: #f1f3f5;
         font-weight: bold;
     }
 </style>
@@ -58,14 +72,14 @@ $costos = $stmt->fetchAll(PDO::FETCH_ASSOC);
 <div class="d-flex justify-content-between align-items-center mb-4">
     <div>
         <h2 class="mb-0">Cálculo de Costos</h2>
-        <p class="text-muted small">Gestión de costos por producto de marketing</p>
+        <p class="text-muted small">Gestión de costos por producto de marketing. <span class="badge bg-info text-dark">Doble clic en las celdas blancas para editar</span></p>
     </div>
 </div>
 
 <div class="card shadow-sm border-0">
     <div class="card-body p-0">
         <div class="table-responsive">
-            <table class="table table-hover table-excel mb-0">
+            <table class="table table-hover table-excel mb-0" id="costosTable">
                 <thead>
                     <tr>
                         <th class="text-center">Orden</th>
@@ -78,12 +92,17 @@ $costos = $stmt->fetchAll(PDO::FETCH_ASSOC);
                         <th class="text-center">Costo Publicitario</th>
                         <th class="text-center bg-total">Inversión Total</th>
                         <th class="text-center">Promo 1</th>
+                        <th class="text-center recaudo-cell">Recaudo 1 (Auto)</th>
+                        <th class="text-center">Promo 2</th>
+                        <th class="text-center recaudo-cell">Recaudo 2 (Auto)</th>
+                        <th class="text-center">Promo 3</th>
+                        <th class="text-center recaudo-cell">Recaudo 3 (Auto)</th>
                     </tr>
                 </thead>
                 <tbody>
                     <?php if (empty($costos)): ?>
                         <tr>
-                            <td colspan="10" class="text-center py-4 text-muted">No hay videos registrados en producción.</td>
+                            <td colspan="15" class="text-center py-4 text-muted">No hay videos registrados en producción.</td>
                         </tr>
                     <?php else: ?>
                         <?php foreach ($costos as $c): ?>
@@ -93,8 +112,24 @@ $costos = $stmt->fetchAll(PDO::FETCH_ASSOC);
                                                    ($c['comision_asesora'] ?? 0) + 
                                                    ($c['delivery'] ?? 0) + 
                                                    ($c['costo_publicitario'] ?? 0);
+
+                                $costos_operativos = ($c['costo_fijo_film'] ?? 0) + 
+                                                     ($c['comision_asesora'] ?? 0) + 
+                                                     ($c['delivery'] ?? 0) + 
+                                                     ($c['costo_publicitario'] ?? 0);
+
+                                function calculateRecaudo($promo, $costos) {
+                                    if (!$promo || $promo == '-') return null;
+                                    preg_match('/[\d.]+/', $promo, $matches);
+                                    $val = isset($matches[0]) ? floatval($matches[0]) : 0;
+                                    return $val > 0 ? $val - $costos : null;
+                                }
+
+                                $recaudo1 = calculateRecaudo($c['promo_1'], $costos_operativos);
+                                $recaudo2 = calculateRecaudo($c['promo_2'], $costos_operativos);
+                                $recaudo3 = calculateRecaudo($c['promo_3'], $costos_operativos);
                             ?>
-                            <tr>
+                            <tr data-row-id="<?php echo $c['id']; ?>">
                                 <td class="text-center fw-bold text-primary"><?php echo $c['orden']; ?></td>
                                 <td class="fw-bold"><?php echo htmlspecialchars($c['nombre_producto'] ?: 'General'); ?></td>
                                 <td class="text-center">
@@ -125,6 +160,21 @@ $costos = $stmt->fetchAll(PDO::FETCH_ASSOC);
                                 <td class="text-center editable" data-id="<?php echo $c['id']; ?>" data-field="promo_1">
                                     <?php echo htmlspecialchars($c['promo_1'] ?: '-'); ?>
                                 </td>
+                                <td class="text-center recaudo-cell recaudo-1 <?php echo $recaudo1 !== null ? ($recaudo1 >= 0 ? 'text-success fw-bold' : 'text-danger fw-bold') : 'text-muted'; ?>" data-id="<?php echo $c['id']; ?>" title="Calculado automáticamente (Promo - Costos)">
+                                    <?php echo $recaudo1 !== null ? 'S/ ' . number_format($recaudo1, 2) : '-'; ?>
+                                </td>
+                                <td class="text-center editable" data-id="<?php echo $c['id']; ?>" data-field="promo_2">
+                                    <?php echo htmlspecialchars($c['promo_2'] ?: '-'); ?>
+                                </td>
+                                <td class="text-center recaudo-cell recaudo-2 <?php echo $recaudo2 !== null ? ($recaudo2 >= 0 ? 'text-success fw-bold' : 'text-danger fw-bold') : 'text-muted'; ?>" data-id="<?php echo $c['id']; ?>" title="Calculado automáticamente (Promo - Costos)">
+                                    <?php echo $recaudo2 !== null ? 'S/ ' . number_format($recaudo2, 2) : '-'; ?>
+                                </td>
+                                <td class="text-center editable" data-id="<?php echo $c['id']; ?>" data-field="promo_3">
+                                    <?php echo htmlspecialchars($c['promo_3'] ?: '-'); ?>
+                                </td>
+                                <td class="text-center recaudo-cell recaudo-3 <?php echo $recaudo3 !== null ? ($recaudo3 >= 0 ? 'text-success fw-bold' : 'text-danger fw-bold') : 'text-muted'; ?>" data-id="<?php echo $c['id']; ?>" title="Calculado automáticamente (Promo - Costos)">
+                                    <?php echo $recaudo3 !== null ? 'S/ ' . number_format($recaudo3, 2) : '-'; ?>
+                                </td>
                             </tr>
                         <?php endforeach; ?>
                     <?php endif; ?>
@@ -136,83 +186,126 @@ $costos = $stmt->fetchAll(PDO::FETCH_ASSOC);
 
 <script>
 document.addEventListener('DOMContentLoaded', function() {
-    const editableCells = document.querySelectorAll('.editable');
+    const tableBody = document.querySelector('#costosTable tbody');
 
-    editableCells.forEach(cell => {
-        cell.addEventListener('dblclick', function() {
-            if (this.querySelector('input')) return;
+    tableBody.addEventListener('dblclick', function(e) {
+        const cell = e.target.closest('.editable');
+        if (!cell || cell.querySelector('input')) return;
 
-            const id = this.getAttribute('data-id');
-            const field = this.getAttribute('data-field');
-            let currentValue = this.innerText.trim().replace('S/ ', '').replace(',', '');
-            if (currentValue === '-') currentValue = '';
-            
-            const input = document.createElement('input');
-            input.type = field === 'promo_1' ? 'text' : 'number';
-            if (input.type === 'number') input.step = '0.01';
-            input.className = 'form-control form-control-sm inline-edit-input';
-            input.value = currentValue;
+        const id = cell.getAttribute('data-id');
+        const field = cell.getAttribute('data-field');
+        let currentValue = cell.innerText.trim().replace('S/ ', '').replace(',', '');
+        if (currentValue === '-') currentValue = '';
+        
+        const input = document.createElement('input');
+        const isPromo = field.startsWith('promo_');
+        input.type = isPromo ? 'text' : 'number';
+        if (input.type === 'number') input.step = '0.01';
+        input.className = 'form-control form-control-sm inline-edit-input';
+        input.value = currentValue;
 
-            const originalContent = this.innerHTML;
-            this.innerHTML = '';
-            this.appendChild(input);
-            input.focus();
+        const originalContent = cell.innerHTML;
+        cell.innerHTML = '';
+        cell.appendChild(input);
+        input.focus();
+        input.select();
 
-            const saveChange = () => {
-                const newValue = input.value;
-                if (newValue === currentValue) {
-                    this.innerHTML = originalContent;
-                    return;
-                }
+        const saveChange = () => {
+            const newValue = input.value;
+            if (newValue === currentValue) {
+                cell.innerHTML = originalContent;
+                return;
+            }
 
-                fetch('update_marketing_costos_field.php', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ id, field, value: newValue })
-                })
-                .then(response => response.json())
-                .then(data => {
-                    if (data.success) {
-                        if (field === 'promo_1') {
-                            this.innerHTML = newValue || '-';
-                        } else {
-                            this.innerHTML = 'S/ ' + parseFloat(newValue || 0).toFixed(2);
-                            updateTotal(id);
-                        }
+            fetch('update_marketing_costos_field.php', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ id, field, value: newValue })
+            })
+            .then(response => response.json())
+            .then(data => {
+                if (data.success) {
+                    if (isPromo) {
+                        cell.innerHTML = newValue || '-';
                     } else {
-                        alert('Error: ' + data.error);
-                        this.innerHTML = originalContent;
+                        cell.innerHTML = 'S/ ' + parseFloat(newValue || 0).toFixed(2);
                     }
-                })
-                .catch(error => {
-                    console.error('Error:', error);
-                    this.innerHTML = originalContent;
-                });
-            };
-
-            input.addEventListener('blur', saveChange);
-            input.addEventListener('keydown', function(e) {
-                if (e.key === 'Enter') {
-                    input.blur();
-                } else if (e.key === 'Escape') {
+                    updateTotal(id);
+                } else {
+                    alert('Error: ' + data.error);
                     cell.innerHTML = originalContent;
                 }
+            })
+            .catch(error => {
+                console.error('Error:', error);
+                cell.innerHTML = originalContent;
             });
+        };
+
+        input.addEventListener('blur', saveChange);
+        input.addEventListener('keydown', function(e) {
+            if (e.key === 'Enter') {
+                input.blur();
+            } else if (e.key === 'Escape') {
+                input.removeEventListener('blur', saveChange);
+                cell.innerHTML = originalContent;
+            }
         });
     });
 
     function updateTotal(id) {
-        const row = document.querySelector(`[data-id="${id}"]`).closest('tr');
-        const fields = ['costo_producto', 'costo_fijo_film', 'comision_asesora', 'delivery', 'costo_publicitario'];
-        let total = 0;
+        const row = document.querySelector(`tr[data-row-id="${id}"]`);
+        if (!row) return;
+
+        const costFields = ['costo_fijo_film', 'comision_asesora', 'delivery', 'costo_publicitario'];
+        const allFields = ['costo_producto', ...costFields];
         
-        fields.forEach(field => {
+        let totalInversion = 0;
+        let totalCostosOperativos = 0;
+        
+        allFields.forEach(field => {
             const cell = row.querySelector(`[data-field="${field}"]`);
-            const val = parseFloat(cell.innerText.replace('S/ ', '').replace(',', '') || 0);
-            total += val;
+            if (cell) {
+                const val = parseFloat(cell.innerText.replace('S/ ', '').replace(',', '') || 0);
+                totalInversion += val;
+                if (costFields.includes(field)) {
+                    totalCostosOperativos += val;
+                }
+            }
         });
 
-        document.getElementById(`total-${id}`).innerText = 'S/ ' + total.toFixed(2);
+        const totalEl = document.getElementById(`total-${id}`);
+        if (totalEl) totalEl.innerText = 'S/ ' + totalInversion.toFixed(2);
+
+        // Update Recaudos
+        [1, 2, 3].forEach(num => {
+            const promoCell = row.querySelector(`[data-field="promo_${num}"]`);
+            const recaudoCell = row.querySelector(`.recaudo-${num}`);
+            
+            if (promoCell && recaudoCell) {
+                const promoText = promoCell.innerText.trim();
+                const promoValMatch = promoText.match(/[\d.]+/);
+                const promoVal = promoValMatch ? parseFloat(promoValMatch[0]) : 0;
+                
+                if (promoVal > 0) {
+                    const recaudo = promoVal - totalCostosOperativos;
+                    recaudoCell.innerText = 'S/ ' + recaudo.toFixed(2);
+                    recaudoCell.classList.remove('text-muted');
+                    recaudoCell.classList.add('fw-bold');
+                    if (recaudo >= 0) {
+                        recaudoCell.classList.add('text-success');
+                        recaudoCell.classList.remove('text-danger');
+                    } else {
+                        recaudoCell.classList.add('text-danger');
+                        recaudoCell.classList.remove('text-success');
+                    }
+                } else {
+                    recaudoCell.innerText = '-';
+                    recaudoCell.classList.add('text-muted');
+                    recaudoCell.classList.remove('fw-bold', 'text-success', 'text-danger');
+                }
+            }
+        });
     }
 });
 </script>
diff --git a/db/migrations/021_add_promo_2_3_to_marketing_costos.sql b/db/migrations/021_add_promo_2_3_to_marketing_costos.sql
new file mode 100644
index 00000000..991119ed
--- /dev/null
+++ b/db/migrations/021_add_promo_2_3_to_marketing_costos.sql
@@ -0,0 +1,3 @@
+-- Add promo_2 and promo_3 to marketing_costos
+ALTER TABLE marketing_costos ADD COLUMN promo_2 VARCHAR(255) DEFAULT NULL AFTER promo_1;
+ALTER TABLE marketing_costos ADD COLUMN promo_3 VARCHAR(255) DEFAULT NULL AFTER promo_2;
diff --git a/marketing_produccion.php b/marketing_produccion.php
index 140bc6e2..f3a08c0a 100644
--- a/marketing_produccion.php
+++ b/marketing_produccion.php
@@ -43,18 +43,19 @@ foreach ($videos as $v) {
         background-color: #f8f9fa;
     }
     .table-excel {
-        font-size: 0.85rem;
+        font-size: 0.9rem;
     }
     .table-excel th {
-        background-color: #ffffff;
-        border-bottom: 2px solid #f1f3f5;
+        background-color: #f8f9fa;
+        border-bottom: 2px solid #dee2e6;
         white-space: nowrap;
         text-transform: uppercase;
-        font-size: 0.75rem;
-        letter-spacing: 0.5px;
-        font-weight: 700;
-        color: #6c757d;
-        padding: 15px 10px;
+        font-size: 0.85rem;
+        letter-spacing: 0.8px;
+        font-weight: 800;
+        color: #495057;
+        padding: 18px 12px;
+        vertical-align: middle;
     }
     .table-excel td {
         vertical-align: middle;
@@ -156,12 +157,18 @@ foreach ($videos as $v) {
     }
 
     .link-icon {
-        font-size: 1.1rem;
+        font-size: 1.35rem;
         transition: transform 0.2s;
     }
     .link-icon:hover {
         transform: translateY(-2px);
     }
+    .text-wrap-cell {
+        white-space: normal !important;
+        word-break: break-word;
+        line-height: 1.4;
+        min-width: 180px;
+    }
     .status-badge {
         font-size: 0.7rem;
         padding: 0.5em 1em;
@@ -190,6 +197,48 @@ foreach ($videos as $v) {
         font-size: 1.2rem;
         margin-bottom: 10px;
     }
+    .card-link-badge {
+        width: 35px;
+        height: 35px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 10px;
+        font-size: 1.1rem;
+    }
+    /* Estilos para Cuadros (Tags) */
+    .tag-container {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 6px;
+        padding: 4px 0;
+    }
+    .tag-item {
+        background: #ffffff;
+        border: 1px solid #e2e8f0;
+        color: #475569;
+        padding: 4px 10px;
+        border-radius: 8px;
+        font-size: 0.75rem;
+        font-weight: 700;
+        display: inline-block;
+        box-shadow: 0 2px 4px rgba(0,0,0,0.04);
+        transition: all 0.2s;
+        max-width: 100%;
+        word-break: break-word;
+    }
+    .tag-item:hover {
+        transform: translateY(-1px);
+        box-shadow: 0 4px 6px rgba(0,0,0,0.08);
+    }
+    .tag-item-material {
+        border-left: 4px solid #4361ee;
+        background-color: #f8faff;
+    }
+    .tag-item-angulo {
+        border-left: 4px solid #f72585;
+        background-color: #fff5f9;
+    }
 </style>
 
 <div class="row mb-4 g-3">
@@ -277,19 +326,19 @@ foreach ($videos as $v) {
             <table class="table table-hover table-excel mb-0">
                 <thead>
                     <tr>
-                        <th class="text-center" style="width: 60px;">#</th>
-                        <th>Fecha Entrega</th>
-                        <th>Producto</th>
-                        <th class="text-center">Imagen</th>
-                        <th>Material</th>
-                        <th>Ángulo</th>
-                        <th class="text-center">Insp. Landing</th>
-                        <th class="text-center">Video Ref.</th>
-                        <th class="text-center">Link Video</th>
-                        <th class="text-center">Link Landing</th>
-                        <th class="text-center">Link Flyer</th>
-                        <th class="text-center">Estado</th>
-                        <th class="text-center">Acción</th>
+                        <th class="text-center" style="width: 60px;"><i class="fas fa-hashtag me-1"></i> #</th>
+                        <th><i class="far fa-calendar-alt me-1"></i> Fecha Entrega</th>
+                        <th><i class="fas fa-box me-1"></i> Producto</th>
+                        <th class="text-center"><i class="fas fa-image me-1"></i> Imagen</th>
+                        <th><i class="fas fa-layer-group me-1"></i> Material</th>
+                        <th><i class="fas fa-video me-1"></i> Ángulo</th>
+                        <th class="text-center"><i class="fas fa-link me-1"></i> Insp. Landing</th>
+                        <th class="text-center"><i class="fab fa-youtube me-1"></i> Video Ref.</th>
+                        <th class="text-center"><i class="fas fa-play-circle me-1"></i> Link Video</th>
+                        <th class="text-center"><i class="fas fa-globe me-1"></i> Link Landing</th>
+                        <th class="text-center"><i class="fas fa-file-image me-1"></i> Link Flyer</th>
+                        <th class="text-center"><i class="fas fa-tasks me-1"></i> Estado</th>
+                        <th class="text-center"><i class="fas fa-cog me-1"></i> Acción</th>
                     </tr>
                 </thead>
                 <tbody>
@@ -320,14 +369,32 @@ foreach ($videos as $v) {
                                         </div>
                                     <?php endif; ?>
                                 </td>
-                                <td class="editable" data-id="<?php echo $v['id']; ?>" data-field="material">
-                                    <div style="min-width: 120px;">
-                                        <?php echo htmlspecialchars($v['material'] ?: '-'); ?>
+                                <td class="editable text-wrap-cell" data-id="<?php echo $v['id']; ?>" data-field="material" data-value="<?php echo htmlspecialchars($v['material']); ?>">
+                                    <div class="tag-container">
+                                        <?php 
+                                        $items = explode(',', $v['material']);
+                                        $hasItems = false;
+                                        foreach ($items as $item): 
+                                            $item = trim($item);
+                                            if (!$item) continue;
+                                            $hasItems = true;
+                                        ?>
+                                            <span class="tag-item tag-item-material"><?php echo htmlspecialchars($item); ?></span>
+                                        <?php endforeach; if (!$hasItems) echo '<span class="text-muted">-</span>'; ?>
                                     </div>
                                 </td>
-                                <td class="editable" data-id="<?php echo $v['id']; ?>" data-field="angulo_video">
-                                    <div style="min-width: 150px;">
-                                        <?php echo htmlspecialchars($v['angulo_video'] ?: '-'); ?>
+                                <td class="editable text-wrap-cell" data-id="<?php echo $v['id']; ?>" data-field="angulo_video" data-value="<?php echo htmlspecialchars($v['angulo_video']); ?>">
+                                    <div class="tag-container">
+                                        <?php 
+                                        $items = explode(',', $v['angulo_video']);
+                                        $hasItems = false;
+                                        foreach ($items as $item): 
+                                            $item = trim($item);
+                                            if (!$item) continue;
+                                            $hasItems = true;
+                                        ?>
+                                            <span class="tag-item tag-item-angulo"><?php echo htmlspecialchars($item); ?></span>
+                                        <?php endforeach; if (!$hasItems) echo '<span class="text-muted">-</span>'; ?>
                                     </div>
                                 </td>
                                 <td class="text-center">
@@ -464,19 +531,28 @@ foreach ($videos as $v) {
                             <span>Orden: <?php echo $v['orden']; ?></span>
                         </div>
                         <div class="mt-3">
-                            <small class="text-muted d-block mb-1 fw-bold">MATERIAL:</small>
-                            <p class="small text-dark mb-0 text-truncate-2" style="display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; height: 2.8em;">
-                                <?php echo htmlspecialchars($v['material'] ?: 'No especificado'); ?>
-                            </p>
+                            <small class="text-muted d-block mb-2 fw-bold">MATERIAL:</small>
+                            <div class="tag-container">
+                                <?php 
+                                $items = explode(',', $v['material']);
+                                $hasItems = false;
+                                foreach ($items as $item): 
+                                    $item = trim($item);
+                                    if (!$item) continue;
+                                    $hasItems = true;
+                                ?>
+                                    <span class="tag-item tag-item-material" style="font-size: 0.7rem;"><?php echo htmlspecialchars($item); ?></span>
+                                <?php endforeach; if (!$hasItems) echo '<span class="text-muted small">No especificado</span>'; ?>
+                            </div>
                         </div>
                     </div>
                     <div class="video-card-footer">
                         <div class="d-flex gap-2">
                             <?php if ($v['link_inspiracion_video']): ?>
-                                <span class="badge bg-danger-soft text-danger rounded-pill" style="background: #fee2e2;"><i class="fab fa-youtube"></i></span>
+                                <div class="card-link-badge text-danger" style="background: #fee2e2;" title="Video Referencia"><i class="fab fa-youtube"></i></div>
                             <?php endif; ?>
                             <?php if ($v['link_video']): ?>
-                                <span class="badge bg-success-soft text-success rounded-pill" style="background: #dcfce7;"><i class="fas fa-play"></i></span>
+                                <div class="card-link-badge text-success" style="background: #dcfce7;" title="Video Final"><i class="fas fa-play"></i></div>
                             <?php endif; ?>
                         </div>
                         <button class="btn btn-sm btn-primary rounded-pill px-3" onclick="gestionarVideo(<?php echo htmlspecialchars(json_encode($v)); ?>)">
@@ -846,12 +922,20 @@ document.addEventListener('DOMContentLoaded', function() {
     const editableCells = document.querySelectorAll('.editable');
 
     editableCells.forEach(cell => {
-        cell.addEventListener('dblclick', function() {
+        cell.addEventListener('dblclick', function(e) {
             if (this.querySelector('input') || this.querySelector('select')) return;
 
+            // Evitar que el doble clic seleccione el texto
+            window.getSelection().removeAllRanges();
+
             const id = this.getAttribute('data-id');
             const field = this.getAttribute('data-field');
-            const currentValue = this.innerText.trim() === '-' ? '' : this.innerText.trim();
+            
+            // Usar data-value si existe (para material y angulo_video), de lo contrario innerText
+            let currentValue = this.getAttribute('data-value');
+            if (currentValue === null) {
+                currentValue = this.innerText.trim() === '-' ? '' : this.innerText.trim();
+            }
             
             let input;
             if (field === 'estado') {
@@ -892,6 +976,9 @@ document.addEventListener('DOMContentLoaded', function() {
                 .then(response => response.json())
                 .then(data => {
                     if (data.success) {
+                        // Actualizar data-value para la próxima edición
+                        this.setAttribute('data-value', newValue);
+
                         if (field === 'estado') {
                             let badgeClass = 'bg-secondary';
                             if (newValue === 'PENDIENTE') badgeClass = 'bg-warning text-dark';
@@ -902,9 +989,21 @@ document.addEventListener('DOMContentLoaded', function() {
                             else if (newValue === 'PUBLICADO') badgeClass = 'bg-dark';
                             
                             this.innerHTML = `<span class="badge status-badge ${badgeClass}">${newValue}</span>`;
+                        } else if (field === 'material' || field === 'angulo_video') {
+                            const items = newValue.split(',').map(i => i.trim()).filter(i => i !== '');
+                            if (items.length === 0) {
+                                this.innerHTML = '<div class="tag-container"><span class="text-muted">-</span></div>';
+                            } else {
+                                let html = '<div class="tag-container">';
+                                const tagClass = field === 'material' ? 'tag-item-material' : 'tag-item-angulo';
+                                items.forEach(item => {
+                                    html += `<span class="tag-item ${tagClass}">${item}</span>`;
+                                });
+                                html += '</div>';
+                                this.innerHTML = html;
+                            }
                         } else {
-                            const minWidth = field === 'material' ? '120px' : '150px';
-                            this.innerHTML = `<div style="min-width: ${minWidth};">${newValue || '-'}</div>`;
+                            this.innerHTML = `<div>${newValue || '-'}</div>`;
                         }
                     } else {
                         alert('Error: ' + data.error);
diff --git a/update_marketing_costos_field.php b/update_marketing_costos_field.php
index 702b327d..e4173659 100644
--- a/update_marketing_costos_field.php
+++ b/update_marketing_costos_field.php
@@ -21,7 +21,7 @@ $field = $data['field'];
 $value = $data['value'];
 
 // Whitelist allowed fields for security
-$allowed_fields = ['costo_producto', 'costo_fijo_film', 'comision_asesora', 'delivery', 'costo_publicitario', 'promo_1'];
+$allowed_fields = ['costo_producto', 'costo_fijo_film', 'comision_asesora', 'delivery', 'costo_publicitario', 'promo_1', 'promo_2', 'promo_3'];
 if (!in_array($field, $allowed_fields)) {
     http_response_code(400);
     echo json_encode(['error' => 'Campo no permitido.']);