<?php
/**
 * Página: Configuración del Evento
 */

// Aumentar límites de PHP para subida de archivos grandes (si no están configurados en php.ini o .htaccess)
@ini_set('post_max_size', '100M');
@ini_set('upload_max_filesize', '100M');
@ini_set('max_execution_time', '300');
@ini_set('max_input_time', '300');
@ini_set('memory_limit', '256M');

// Función para escribir en el log de galería
function escribirLogGaleria($mensaje) {
    // Usar ruta absoluta desde la raíz del proyecto
    // __DIR__ es admin/pages, entonces dirname(__DIR__) es admin, y dirname(dirname(__DIR__)) es la raíz
    $rootDir = dirname(dirname(__DIR__));
    $logFile = $rootDir . DIRECTORY_SEPARATOR . 'galeria_upload.log';
    $timestamp = date('Y-m-d H:i:s');
    $logEntry = "[$timestamp] $mensaje" . PHP_EOL;
    
    // Intentar escribir en el archivo, si falla usar error_log
    $result = @file_put_contents($logFile, $logEntry, FILE_APPEND | LOCK_EX);
    if ($result === false) {
        // Si falla, intentar crear el archivo primero
        if (!file_exists($logFile)) {
            @touch($logFile);
            @chmod($logFile, 0666);
            $result = @file_put_contents($logFile, $logEntry, FILE_APPEND | LOCK_EX);
        }
        // Si aún falla, solo usar error_log
        if ($result === false) return;
    }
    
}

// Función para escribir en el log de videos
function escribirLogVideos($mensaje) {
    $rootDir = dirname(dirname(__DIR__));
    $logFile = $rootDir . DIRECTORY_SEPARATOR . 'videos_upload.log';
    $timestamp = date('Y-m-d H:i:s');
    $logEntry = "[$timestamp] $mensaje" . PHP_EOL;
    
    $result = @file_put_contents($logFile, $logEntry, FILE_APPEND | LOCK_EX);
    if ($result === false) {
        if (!file_exists($logFile)) {
            @touch($logFile);
            @chmod($logFile, 0666);
            $result = @file_put_contents($logFile, $logEntry, FILE_APPEND | LOCK_EX);
        }
        if ($result === false) return;
    }
}

$eventoId = getEventoId();
$evento = obtenerEvento($eventoId);

$error = '';
$success = '';

// Verificar si hay mensaje de éxito en GET (después de redirect)
if (isset($_GET['success']) && $_GET['success'] == '1') {
    $success = 'Configuración actualizada correctamente';
}

// Obtener tipo de evento permitido del sistema
$tipo_permitido = obtenerTipoEventoPermitido();

// Obtener itinerario existente
$itinerario = obtenerItinerario($eventoId);

// Obtener dresscode existente
$dresscode = obtenerDresscode($eventoId);

// Obtener colores reservados del dress code
$coloresReservados = obtenerColoresReservadosDressCode($eventoId);

// Obtener obsequios existentes (múltiples)
$obsequios = obtenerObsequios($eventoId);
// Separar por tipo para facilitar el manejo
$cuentasBancarias = array_filter($obsequios, fn($o) => $o['tipo'] === 'transferencia');
$sobreCerrado = array_filter($obsequios, fn($o) => $o['tipo'] === 'sobre_cerrado');
// Para compatibilidad con código antiguo
$obsequio = !empty($obsequios) ? $obsequios[0] : null;

// Obtener galería existente
$galeria = obtenerGaleria($eventoId);

// Obtener videos existentes con asignaciones
$videos = obtenerVideosConAsignaciones($eventoId);

// Obtener todos los invitados del evento para el modal de asignación de videos
$stmtInvitados = $pdo->prepare("
    SELECT id, nombre_cortesia, nombre_invitado, email, estado 
    FROM invitados 
    WHERE evento_id = ? 
    ORDER BY nombre_invitado ASC
");
$stmtInvitados->execute([$eventoId]);
$todosInvitados = $stmtInvitados->fetchAll(PDO::FETCH_ASSOC);

// Obtener tipo de evento específico
$tipo_evento_especifico = $evento['tipo_evento'] ?? $tipo_permitido;

// Obtener detalles adicionales
$detalles_hospedaje = obtenerDetallesAdicionales($eventoId, $tipo_evento_especifico, 'hospedaje');
$detalles_alimentacion = obtenerDetallesAdicionales($eventoId, $tipo_evento_especifico, 'alimentacion');
$detalles_pdf = obtenerDetallesAdicionales($eventoId, $tipo_evento_especifico, 'pdf');
$detalles_transporte = obtenerDetallesAdicionales($eventoId, $tipo_evento_especifico, 'transporte');
$detalles_otro = obtenerDetallesAdicionales($eventoId, $tipo_evento_especifico, 'otro');

// Obtener colores del evento (incluye principal, secundario y adicionales)
$colores = obtenerColores($eventoId, $evento);

// Obtener datos del sobre
$sobre = obtenerSobre($eventoId);

// Obtener tipografías
$tipografias = obtenerTipografias($eventoId);

// --- ENDPOINT AJAX PARA SUBIR VIDEOS ---
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action']) && $_POST['action'] === 'subir_video') {
    header('Content-Type: application/json');
    
    $isAjax = !empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) === 'xmlhttprequest';
    
    if (!$isAjax) {
        echo json_encode(['success' => false, 'message' => 'Solo se permiten peticiones AJAX']);
        exit;
    }
    
    if (!isset($_FILES['video'])) {
        echo json_encode(['success' => false, 'message' => 'No se recibió el archivo de video']);
        exit;
    }
    
    $file = $_FILES['video'];
    
    if ($file['error'] !== UPLOAD_ERR_OK) {
        $uploadMaxSize = ini_get('upload_max_filesize');
        $postMaxSize = ini_get('post_max_size');
        $fileSizeMB = round(($file['size'] ?? 0) / 1024 / 1024, 2);
        
        $errorMessages = [
            UPLOAD_ERR_INI_SIZE => "El archivo excede el tamaño máximo permitido. Tamaño del archivo: {$fileSizeMB}MB. Límite actual de PHP: {$uploadMaxSize} (upload_max_filesize) / {$postMaxSize} (post_max_size). Necesitas modificar php.ini para aumentar estos límites.",
            UPLOAD_ERR_FORM_SIZE => 'El archivo excede el tamaño máximo del formulario',
            UPLOAD_ERR_PARTIAL => 'El archivo se subió parcialmente',
            UPLOAD_ERR_NO_FILE => 'No se subió ningún archivo',
            UPLOAD_ERR_NO_TMP_DIR => 'Falta la carpeta temporal',
            UPLOAD_ERR_CANT_WRITE => 'Error al escribir el archivo en disco',
            UPLOAD_ERR_EXTENSION => 'Una extensión de PHP detuvo la subida'
        ];
        $errorMsg = $errorMessages[$file['error']] ?? 'Error desconocido al subir el archivo (código: ' . $file['error'] . ')';
        echo json_encode(['success' => false, 'message' => $errorMsg]);
        exit;
    }
    
    // Validar que sea un video
    $allowedTypes = ['video/mp4', 'video/webm', 'video/ogg', 'video/quicktime', 'video/x-msvideo'];
    if (!in_array($file['type'], $allowedTypes)) {
        echo json_encode(['success' => false, 'message' => 'Tipo de archivo no permitido: ' . $file['type']]);
        exit;
    }
    
    // Crear directorio si no existe
    $uploadDir = __DIR__ . '/../../assets/uploads/videos/';
    if (!is_dir($uploadDir)) {
        @mkdir($uploadDir, 0755, true);
    }
    
    if (!is_writable($uploadDir)) {
        echo json_encode(['success' => false, 'message' => 'El directorio de destino no es escribible']);
        exit;
    }
    
    // Generar nombre único
    $extension = pathinfo($file['name'], PATHINFO_EXTENSION);
    if (empty($extension)) {
        $mimeToExt = [
            'video/mp4' => 'mp4',
            'video/webm' => 'webm',
            'video/ogg' => 'ogv',
            'video/quicktime' => 'mov',
            'video/x-msvideo' => 'avi'
        ];
        $extension = $mimeToExt[$file['type']] ?? 'mp4';
    }
    
    $nombreArchivo = 'video_' . $eventoId . '_' . time() . '_' . rand(1000, 9999) . '.' . strtolower($extension);
    $rutaDestino = $uploadDir . $nombreArchivo;
    
    // Mover archivo
    if (!move_uploaded_file($file['tmp_name'], $rutaDestino)) {
        echo json_encode(['success' => false, 'message' => 'Error al mover el archivo al directorio de destino']);
        exit;
    }
    
    $archivoRelativo = 'assets/uploads/videos/' . $nombreArchivo;
    
    // Insertar en base de datos
    try {
        // Obtener el siguiente orden
        $stmtMaxOrden = $pdo->prepare("SELECT COALESCE(MAX(orden), 0) + 1 FROM eventos_videos WHERE evento_id = ?");
        $stmtMaxOrden->execute([$eventoId]);
        $siguienteOrden = $stmtMaxOrden->fetchColumn();
        
        // INSERT
        $stmtInsert = $pdo->prepare("
            INSERT INTO eventos_videos (evento_id, archivo, tipo_mime, tamaño_bytes, orden, activo)
            VALUES (?, ?, ?, ?, ?, 1)
        ");
        
        $resultadoInsert = $stmtInsert->execute([
            $eventoId,
            $archivoRelativo,
            $file['type'],
            $file['size'],
            $siguienteOrden
        ]);
        
        if ($resultadoInsert) {
            $videoId = $pdo->lastInsertId();
            
            // Verificar que se guardó
            $stmtCheck = $pdo->prepare("SELECT id, archivo FROM eventos_videos WHERE id = ?");
            $stmtCheck->execute([$videoId]);
            $check = $stmtCheck->fetch(PDO::FETCH_ASSOC);
            
            if ($check) {
                echo json_encode([
                    'success' => true, 
                    'message' => 'Video subido correctamente',
                    'video_id' => $videoId,
                    'archivo' => $archivoRelativo
                ]);
            } else {
                echo json_encode(['success' => false, 'message' => 'Video subido pero no se encontró en la base de datos']);
            }
        } else {
            $errorInfo = $stmtInsert->errorInfo();
            echo json_encode(['success' => false, 'message' => 'Error al insertar en la base de datos: ' . ($errorInfo[2] ?? 'Error desconocido')]);
        }
    } catch (Exception $e) {
        @unlink($rutaDestino);
        echo json_encode(['success' => false, 'message' => 'Error: ' . $e->getMessage()]);
    }
    exit;
}
// --- FIN ENDPOINT AJAX PARA SUBIR VIDEOS ---

// Manejar petición AJAX para asignar videos a invitados
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action']) && $_POST['action'] === 'asignar_video') {
    header('Content-Type: application/json');
    
    $isAjax = !empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) === 'xmlhttprequest';
    
    if (!$isAjax) {
        echo json_encode(['success' => false, 'message' => 'Solo se permiten peticiones AJAX']);
        exit;
    }
    
    $videoId = intval($_POST['video_id'] ?? 0);
    $invitadoIds = [];
    
    if (isset($_POST['invitado_ids']) && is_array($_POST['invitado_ids'])) {
        $invitadoIds = array_map('intval', array_filter($_POST['invitado_ids'], function($id) {
            return !empty($id);
        }));
    }
    
    if ($videoId <= 0) {
        echo json_encode(['success' => false, 'message' => 'ID de video inválido']);
        exit;
    }
    
    // Verificar que el video pertenece al evento
    $stmtCheck = $pdo->prepare("SELECT id FROM eventos_videos WHERE id = ? AND evento_id = ?");
    $stmtCheck->execute([$videoId, $eventoId]);
    if (!$stmtCheck->fetch()) {
        echo json_encode(['success' => false, 'message' => 'Video no encontrado o no pertenece a este evento']);
        exit;
    }
    
    // Asignar video a invitados (con su propia transacción)
    if (asignarVideoAInvitados($videoId, $invitadoIds, true)) {
        // Obtener información actualizada para la respuesta
        $invitadosAsignados = obtenerInvitadosPorVideo($videoId);
        echo json_encode([
            'success' => true, 
            'message' => 'Asignación guardada correctamente',
            'total_asignaciones' => count($invitadosAsignados),
            'invitados_asignados' => $invitadosAsignados
        ]);
    } else {
        echo json_encode(['success' => false, 'message' => 'Error al guardar la asignación']);
    }
    exit;
}

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // Siempre usar el tipo permitido, ignorar lo que venga del formulario
    $tipo_evento = $tipo_permitido;
    $fecha_evento = $_POST['fecha_evento'] ?? '';
    $hora_evento = $_POST['hora_evento'] ?? '';
    $lugar_evento = sanitize($_POST['lugar_evento'] ?? '');
    // Obtener latitud y longitud del formulario y combinarlos
    $latitud = sanitize($_POST['latitud'] ?? '');
    $longitud = sanitize($_POST['longitud'] ?? '');
    $direccion_evento = '';
    if (!empty($latitud) && !empty($longitud)) {
        $direccion_evento = trim($latitud) . ',' . trim($longitud);
    } else {
        // Si no hay coordenadas nuevas, mantener la existente
    $direccion_evento = sanitize($_POST['direccion_evento'] ?? '');
    }
    $descripcion = sanitize($_POST['descripcion'] ?? '');
    $mensaje_personalizado = sanitize($_POST['mensaje_personalizado'] ?? '');
    // Colores principales y secundarios (se guardan en eventos_colores, NO en eventos_base)
    $color_principal = sanitize($_POST['color_principal'] ?? ($colores['color_principal'] ?? '#667eea'));
    $color_secundario = sanitize($_POST['color_secundario'] ?? ($colores['color_secundario'] ?? '#764ba2'));
    // Colores adicionales (tabla eventos_colores)
    $color_texto   = sanitize($_POST['color_texto'] ?? '#000000');
    $color_resalte = sanitize($_POST['color_resalte'] ?? '#FF0000');
    $color_1       = sanitize($_POST['color_1'] ?? '#FFFFFF');
    $color_2       = sanitize($_POST['color_2'] ?? '#FFFFFF');
    $color_3       = sanitize($_POST['color_3'] ?? '#FFFFFF');
    $color_4       = sanitize($_POST['color_4'] ?? '#FFFFFF');
    
    // Campos específicos por tipo
    $nombre_novia = sanitize($_POST['nombre_novia'] ?? '');
    $nombre_novio = sanitize($_POST['nombre_novio'] ?? '');
    $padre_novia = sanitize($_POST['padre_novia'] ?? '');
    $madre_novia = sanitize($_POST['madre_novia'] ?? '');
    $padre_novio = sanitize($_POST['padre_novio'] ?? '');
    $madre_novio = sanitize($_POST['madre_novio'] ?? '');
    $padrino_boda = sanitize($_POST['padrino_boda'] ?? '');
    $madrina_boda = sanitize($_POST['madrina_boda'] ?? '');
    
    $nombre_homenajeado = sanitize($_POST['nombre_homenajeado'] ?? '');
    $edad = intval($_POST['edad'] ?? 0);
    $anos_a_cumplir = intval($_POST['anos_a_cumplir'] ?? 0);
    
    $nombre_quinceanera = sanitize($_POST['nombre_quinceanera'] ?? '');
    $padre_quinceanera = sanitize($_POST['padre_quinceanera'] ?? '');
    $madre_quinceanera = sanitize($_POST['madre_quinceanera'] ?? '');
    
    $nombre_organizador = sanitize($_POST['nombre_organizador'] ?? '');
    $nombre_evento_social = sanitize($_POST['nombre_evento_social'] ?? '');
    
    $nombre_bautizado = sanitize($_POST['nombre_bautizado'] ?? '');
    $padre_bautizo = sanitize($_POST['padre_bautizo'] ?? '');
    $madre_bautizo = sanitize($_POST['madre_bautizo'] ?? '');
    $padrino_bautizo = sanitize($_POST['padrino_bautizo'] ?? '');
    $madrina_bautizo = sanitize($_POST['madrina_bautizo'] ?? '');
    
    // Itinerario
    $tiene_itinerario = isset($_POST['tiene_itinerario']) && $_POST['tiene_itinerario'] === '1' ? 1 : 0;
    $itinerario_items = [];
    if (isset($_POST['itinerario']) && is_array($_POST['itinerario'])) {
        foreach ($_POST['itinerario'] as $item) {
            if (!empty($item['nombre']) && !empty($item['fecha'])) {
                $itinerario_items[] = [
                    'id' => !empty($item['id']) ? intval($item['id']) : null,
                    'fecha' => sanitize($item['fecha'] ?? ''),
                    'hora' => sanitize($item['hora'] ?? ''),
                    'nombre' => sanitize($item['nombre'] ?? ''),
                    'descripcion' => sanitize($item['descripcion'] ?? ''),
                    'orden' => intval($item['orden'] ?? 0)
                ];
            }
        }
    }
    
    // Dress Code
    $tiene_dresscode = isset($_POST['tiene_dresscode']) && $_POST['tiene_dresscode'] === '1' ? 1 : 0;
    $dresscode_items = [];
    if (isset($_POST['dresscode']) && is_array($_POST['dresscode'])) {
        foreach ($_POST['dresscode'] as $index => $item) {
            if (!empty($item['nombre_opcion']) && !empty($item['tipo'])) {
                $dresscode_items[] = [
                    'id' => !empty($item['id']) ? intval($item['id']) : null,
                    'nombre_opcion' => sanitize($item['nombre_opcion'] ?? ''),
                    'tipo' => sanitize($item['tipo'] ?? ''),
                    'valor' => sanitize($item['valor'] ?? ''),
                    'orden' => intval($item['orden'] ?? 0),
                    'index' => $index // Para manejar imágenes
                ];
            }
        }
    }
    
    // Obsequio (nuevo sistema múltiple)
    $tiene_obsequio = isset($_POST['tiene_obsequio']) && $_POST['tiene_obsequio'] === '1' ? 1 : 0;
    
    // Detalles Adicionales
    $detalles_hospedaje_items = [];
    if (isset($_POST['hospedaje']) && is_array($_POST['hospedaje'])) {
        foreach ($_POST['hospedaje'] as $index => $item) {
            if (!empty($item['nombre_hotel'])) {
                // Procesar botones con archivos PDF
                $botones = [];
                if (isset($item['botones']) && is_array($item['botones'])) {
                    foreach ($item['botones'] as $botonIndex => $boton) {
                        $botonData = [
                            'id' => !empty($boton['id']) ? intval($boton['id']) : null,
                            'nombre_link' => sanitize($boton['nombre_link'] ?? ''),
                            'tipo_valor' => sanitize($boton['tipo_valor'] ?? ''),
                            'valor' => '',
                            'orden' => intval($boton['orden'] ?? $botonIndex)
                        ];
                        
                        // Determinar el valor según el tipo
                        if ($botonData['tipo_valor'] === 'link') {
                            // Para links, usar valor_link directamente
                            $botonData['valor'] = sanitize($boton['valor_link'] ?? $boton['valor'] ?? '');
                        } elseif ($botonData['tipo_valor'] === 'pdf') {
                            // Para PDF, primero verificar si hay archivo nuevo
                            // Nota: $_FILES para arrays multidimensionales tiene estructura especial:
                            // $_FILES['hospedaje_boton_pdf']['name'][$index][$botonIndex]
                            $archivoSubido = false;
                            if (isset($_FILES['hospedaje_boton_pdf']['name'][$index][$botonIndex]) && 
                                $_FILES['hospedaje_boton_pdf']['error'][$index][$botonIndex] === UPLOAD_ERR_OK) {
                                
                                $fileName = $_FILES['hospedaje_boton_pdf']['name'][$index][$botonIndex];
                                $fileType = $_FILES['hospedaje_boton_pdf']['type'][$index][$botonIndex];
                                $fileTmpName = $_FILES['hospedaje_boton_pdf']['tmp_name'][$index][$botonIndex];
                                
                                $allowedTypes = ['application/pdf'];
                                if (in_array($fileType, $allowedTypes)) {
                                    $uploadDir = __DIR__ . '/../../assets/pdfs/hospedaje/';
                                    if (!is_dir($uploadDir)) {
                                        mkdir($uploadDir, 0755, true);
                                    }
                                    $extension = pathinfo($fileName, PATHINFO_EXTENSION);
                                    $filename = 'hospedaje_' . $eventoId . '_' . $index . '_' . $botonIndex . '_' . time() . '.' . $extension;
                                    $filepath = $uploadDir . $filename;
                                    if (move_uploaded_file($fileTmpName, $filepath)) {
                                        $botonData['valor'] = 'assets/pdfs/hospedaje/' . $filename;
                                        $archivoSubido = true;
                                    }
                                }
                            }
                            // Si no hay archivo nuevo, mantener el valor existente
                            if (!$archivoSubido && !empty($boton['valor'])) {
                                $botonData['valor'] = sanitize($boton['valor']);
                            }
                        }
                        
                        $botones[] = $botonData;
                    }
                }
                
                $detalles_hospedaje_items[] = [
                    'id' => !empty($item['id']) ? intval($item['id']) : null,
                    'relacion_id' => !empty($item['relacion_id']) ? intval($item['relacion_id']) : null,
                    'nombre_hotel' => sanitize($item['nombre_hotel'] ?? ''),
                    'ubicacion_referencial' => sanitize($item['ubicacion_referencial'] ?? ''),
                    'distancia_metros' => intval($item['distancia_metros'] ?? 0),
                    'botones' => $botones,
                    'orden' => intval($item['orden'] ?? 0)
                ];
            }
        }
    }
    
    $detalles_alimentacion_items = [];
    if (isset($_POST['alimentacion']) && is_array($_POST['alimentacion'])) {
        foreach ($_POST['alimentacion'] as $item) {
            if (!empty($item['nombre_restaurante'])) {
                $detalles_alimentacion_items[] = [
                    'id' => !empty($item['id']) ? intval($item['id']) : null,
                    'relacion_id' => !empty($item['relacion_id']) ? intval($item['relacion_id']) : null,
                    'nombre_restaurante' => sanitize($item['nombre_restaurante'] ?? ''),
                    'direccion' => sanitize($item['direccion'] ?? ''),
                    'whatsapp_reservar' => sanitize($item['whatsapp_reservar'] ?? ''),
                    'orden' => intval($item['orden'] ?? 0)
                ];
            }
        }
    }
    
    $detalles_pdf_items = [];
    if (isset($_POST['pdf']) && is_array($_POST['pdf'])) {
        foreach ($_POST['pdf'] as $index => $item) {
            if (!empty($item['titulo'])) {
                // Construir el array de archivo correctamente desde $_FILES
                // Nota: $_FILES para arrays tiene estructura especial:
                // $_FILES['pdf_archivo']['name'][$index], $_FILES['pdf_archivo']['error'][$index], etc.
                $archivoNuevo = null;
                if (isset($_FILES['pdf_archivo']['name'][$index]) && 
                    $_FILES['pdf_archivo']['error'][$index] === UPLOAD_ERR_OK) {
                    $archivoNuevo = [
                        'name' => $_FILES['pdf_archivo']['name'][$index],
                        'type' => $_FILES['pdf_archivo']['type'][$index],
                        'tmp_name' => $_FILES['pdf_archivo']['tmp_name'][$index],
                        'error' => $_FILES['pdf_archivo']['error'][$index],
                        'size' => $_FILES['pdf_archivo']['size'][$index]
                    ];
                }
                
                $detalles_pdf_items[] = [
                    'id' => !empty($item['id']) ? intval($item['id']) : null,
                    'relacion_id' => !empty($item['relacion_id']) ? intval($item['relacion_id']) : null,
                    'titulo' => sanitize($item['titulo'] ?? ''),
                    'archivo' => sanitize($item['archivo'] ?? ''),
                    'archivo_nuevo' => $archivoNuevo,
                    'orden' => intval($item['orden'] ?? 0),
                    'index' => $index
                ];
            }
        }
    }
    
    $detalles_transporte_items = [];
    if (isset($_POST['transporte']) && is_array($_POST['transporte'])) {
        foreach ($_POST['transporte'] as $item) {
            if (!empty($item['nombre'])) {
                $detalles_transporte_items[] = [
                    'id' => !empty($item['id']) ? intval($item['id']) : null,
                    'relacion_id' => !empty($item['relacion_id']) ? intval($item['relacion_id']) : null,
                    'nombre' => sanitize($item['nombre'] ?? ''),
                    'descripcion' => sanitize($item['descripcion'] ?? ''),
                    'contacto' => sanitize($item['contacto'] ?? ''),
                    'orden' => intval($item['orden'] ?? 0)
                ];
            }
        }
    }
    
    $detalles_otro_items = [];
    if (isset($_POST['otro']) && is_array($_POST['otro'])) {
        foreach ($_POST['otro'] as $item) {
            if (!empty($item['titulo'])) {
                $detalles_otro_items[] = [
                    'id' => !empty($item['id']) ? intval($item['id']) : null,
                    'relacion_id' => !empty($item['relacion_id']) ? intval($item['relacion_id']) : null,
                    'titulo' => sanitize($item['titulo'] ?? ''),
                    'contenido' => sanitize($item['contenido'] ?? ''),
                    'orden' => intval($item['orden'] ?? 0)
                ];
            }
        }
    }
    
    // Procesar Galería - PROCESAMIENTO INDEPENDIENTE DE LA TRANSACCIÓN
    escribirLogGaleria("=== INICIO PROCESAMIENTO GALERÍA ===");
    escribirLogGaleria("Evento ID: $eventoId");
    escribirLogGaleria("_FILES['galeria_fotos'] existe: " . (isset($_FILES['galeria_fotos']) ? 'Sí' : 'No'));
    
    $galeria_fotos_subidas = [];
    
    // Solo procesar si hay archivos nuevos realmente subidos (no vacíos)
    $hayArchivosNuevos = false;
    if (isset($_FILES['galeria_fotos']) && is_array($_FILES['galeria_fotos']['name'])) {
        foreach ($_FILES['galeria_fotos']['name'] as $nombre) {
            if (!empty($nombre) && isset($_FILES['galeria_fotos']['error'][array_search($nombre, $_FILES['galeria_fotos']['name'])]) && $_FILES['galeria_fotos']['error'][array_search($nombre, $_FILES['galeria_fotos']['name'])] === UPLOAD_ERR_OK) {
                $hayArchivosNuevos = true;
                break;
            }
        }
    }
    
    if ($hayArchivosNuevos && isset($_FILES['galeria_fotos']) && is_array($_FILES['galeria_fotos']['name'])) {
        escribirLogGaleria("Archivos encontrados: " . count($_FILES['galeria_fotos']['name']));
        
        // Ruta absoluta del directorio de galería
        $uploadDir = __DIR__ . '/../../assets/uploads/images/galeria/';
        escribirLogGaleria("Ruta destino: $uploadDir");
        
        // Crear directorios recursivamente si no existen
        if (!is_dir($uploadDir)) {
            escribirLogGaleria("Directorio no existe, creando...");
            $created = @mkdir($uploadDir, 0755, true);
            if (!$created && !is_dir($uploadDir)) {
                // Si falla, intentar crear los directorios padre primero
                $parentDirs = [
                    __DIR__ . '/../../assets',
                    __DIR__ . '/../../assets/uploads',
                    __DIR__ . '/../../assets/uploads/images'
                ];
                foreach ($parentDirs as $parentDir) {
                    if (!is_dir($parentDir)) {
                        @mkdir($parentDir, 0755, true);
                        escribirLogGaleria("Creando directorio padre: $parentDir");
                    }
                }
                @mkdir($uploadDir, 0755, true);
            }
        }
        
        // Procesar cada archivo subido
        if (is_dir($uploadDir)) {
            escribirLogGaleria("Directorio existe: Sí");
            escribirLogGaleria("Directorio escribible: " . (is_writable($uploadDir) ? 'Sí' : 'No'));
            
            if (is_writable($uploadDir)) {
                foreach ($_FILES['galeria_fotos']['name'] as $index => $nombre) {
                    escribirLogGaleria("Procesando archivo $index: $nombre");
                    $errorCode = $_FILES['galeria_fotos']['error'][$index] ?? 'N/A';
                    escribirLogGaleria("Error del archivo: $errorCode");
                    
                    if (!empty($nombre) && isset($_FILES['galeria_fotos']['error'][$index]) && $_FILES['galeria_fotos']['error'][$index] === UPLOAD_ERR_OK) {
                        $file = [
                            'name' => $_FILES['galeria_fotos']['name'][$index],
                            'type' => $_FILES['galeria_fotos']['type'][$index] ?? 'application/octet-stream',
                            'tmp_name' => $_FILES['galeria_fotos']['tmp_name'][$index],
                            'size' => $_FILES['galeria_fotos']['size'][$index] ?? 0
                        ];
                        
                        escribirLogGaleria("Archivo válido - Nombre: {$file['name']}, Tamaño: {$file['size']}, Tmp: {$file['tmp_name']}");
                        
                        // Obtener extensión del archivo
                        $extension = pathinfo($file['name'], PATHINFO_EXTENSION);
                        if (empty($extension)) {
                            // Si no hay extensión, intentar detectarla por tipo MIME
                            $mimeToExt = [
                                'image/jpeg' => 'jpg',
                                'image/jpg' => 'jpg',
                                'image/png' => 'png',
                                'image/gif' => 'gif',
                                'image/webp' => 'webp',
                                'image/bmp' => 'bmp',
                                'image/tiff' => 'tiff'
                            ];
                            $extension = $mimeToExt[$file['type']] ?? 'jpg';
                        }
                        
                        $nombreArchivo = 'galeria_' . $eventoId . '_' . time() . '_' . $index . '.' . strtolower($extension);
                        $rutaDestino = $uploadDir . $nombreArchivo;
                        
                        escribirLogGaleria("Intentando mover archivo a: $rutaDestino");
                        
                        if (move_uploaded_file($file['tmp_name'], $rutaDestino)) {
                            escribirLogGaleria("Archivo movido exitosamente: $nombreArchivo");
                            $archivoRelativo = 'assets/uploads/images/galeria/' . $nombreArchivo;
                            $galeria_fotos_subidas[] = [
                                'archivo' => $archivoRelativo,
                                'tipo_mime' => $file['type'],
                                'tamaño_bytes' => $file['size']
                            ];
                            
                            // INSERTAR DIRECTAMENTE EN LA BASE DE DATOS (SIN ESPERAR TRANSACCIÓN)
                            try {
                                global $pdo;
                                // Obtener el siguiente orden
                                $stmtMaxOrden = $pdo->prepare("SELECT COALESCE(MAX(orden), 0) + 1 FROM eventos_galeria WHERE evento_id = ?");
                                $stmtMaxOrden->execute([$eventoId]);
                                $siguienteOrden = $stmtMaxOrden->fetchColumn();
                                
                                $stmtInsert = $pdo->prepare("
                                    INSERT INTO eventos_galeria (evento_id, archivo, tipo_mime, tamaño_bytes, orden, activo)
                                    VALUES (?, ?, ?, ?, ?, 1)
                                ");
                                
                                $stmtInsert->execute([
                                    $eventoId,
                                    $archivoRelativo,
                                    $file['type'],
                                    $file['size'],
                                    $siguienteOrden
                                ]);
                                
                                $fotoId = $pdo->lastInsertId();
                                escribirLogGaleria("✓ Foto insertada en BD - ID: $fotoId, Archivo: $archivoRelativo, Orden: $siguienteOrden");
                            } catch (Exception $e) {
                                escribirLogGaleria("✗ ERROR al insertar foto en BD: " . $e->getMessage());
                                escribirLogGaleria("✗ Datos: evento_id=$eventoId, archivo=$archivoRelativo");
                            }
                        } else {
                            escribirLogGaleria("✗ ERROR: No se pudo mover archivo: {$file['name']}");
                            escribirLogGaleria("✗ Tmp existe: " . (file_exists($file['tmp_name']) ? 'Sí' : 'No'));
                            escribirLogGaleria("✗ Destino existe: " . (file_exists($rutaDestino) ? 'Sí' : 'No'));
                            escribirLogGaleria("✗ Destino escribible: " . (is_writable(dirname($rutaDestino)) ? 'Sí' : 'No'));
                        }
                    } else {
                        escribirLogGaleria("Archivo $index no válido o con error (código: $errorCode)");
                    }
                }
            } else {
                escribirLogGaleria("✗ ERROR: El directorio no es escribible: $uploadDir");
            }
        } else {
            escribirLogGaleria("✗ ERROR: El directorio no existe después de intentar crearlo: $uploadDir");
        }
    } else {
        escribirLogGaleria("No hay archivos en _FILES['galeria_fotos'] o no es un array");
    }
    
    escribirLogGaleria("Total de fotos procesadas: " . count($galeria_fotos_subidas));
    escribirLogGaleria("=== FIN PROCESAMIENTO GALERÍA ===");
    
    // Procesar Videos - PROCESAMIENTO INDEPENDIENTE DE LA TRANSACCIÓN
    escribirLogVideos("=== INICIO PROCESAMIENTO VIDEOS ===");
    escribirLogVideos("Evento ID: $eventoId");
    escribirLogVideos("_FILES['videos'] existe: " . (isset($_FILES['videos']) ? 'Sí' : 'No'));
    
    $videos_subidos = [];
    
    // Solo procesar si hay archivos nuevos realmente subidos (no vacíos)
    $hayVideosNuevos = false;
    if (isset($_FILES['videos']) && is_array($_FILES['videos']['name'])) {
        escribirLogVideos("_FILES['videos']['name'] es array con " . count($_FILES['videos']['name']) . " elementos");
        foreach ($_FILES['videos']['name'] as $index => $nombre) {
            $errorCode = $_FILES['videos']['error'][$index] ?? 'N/A';
            escribirLogVideos("  - Video $index: nombre='$nombre', error=$errorCode");
            if (!empty($nombre) && isset($_FILES['videos']['error'][$index]) && $_FILES['videos']['error'][$index] === UPLOAD_ERR_OK) {
                $hayVideosNuevos = true;
                escribirLogVideos("  ✓ Video $index es válido para procesar");
                break;
            }
        }
    } else {
        escribirLogVideos("_FILES['videos'] NO existe o NO es array");
    }
    
    escribirLogVideos("hayVideosNuevos = " . ($hayVideosNuevos ? 'TRUE' : 'FALSE'));
    
    if ($hayVideosNuevos && isset($_FILES['videos']) && is_array($_FILES['videos']['name'])) {
        escribirLogVideos("Videos encontrados: " . count($_FILES['videos']['name']));
        
        // Ruta absoluta del directorio de videos
        $uploadDir = __DIR__ . '/../../assets/uploads/videos/';
        escribirLogVideos("Ruta destino: $uploadDir");
        
        // Crear directorios recursivamente si no existen
        if (!is_dir($uploadDir)) {
            escribirLogVideos("Directorio no existe, creando...");
            $created = @mkdir($uploadDir, 0755, true);
            if (!$created && !is_dir($uploadDir)) {
                $parentDirs = [
                    __DIR__ . '/../../assets',
                    __DIR__ . '/../../assets/uploads'
                ];
                foreach ($parentDirs as $parentDir) {
                    if (!is_dir($parentDir)) {
                        @mkdir($parentDir, 0755, true);
                        escribirLogVideos("Creando directorio padre: $parentDir");
                    }
                }
                @mkdir($uploadDir, 0755, true);
            }
        }
        
        // Procesar cada archivo subido
        if (is_dir($uploadDir)) {
            escribirLogVideos("Directorio existe: Sí");
            escribirLogVideos("Directorio escribible: " . (is_writable($uploadDir) ? 'Sí' : 'No'));
            
            if (is_writable($uploadDir)) {
                foreach ($_FILES['videos']['name'] as $index => $nombre) {
                    escribirLogVideos("Procesando video $index: $nombre");
                    $errorCode = $_FILES['videos']['error'][$index] ?? 'N/A';
                    escribirLogVideos("Error del video: $errorCode");
                    
                    if (!empty($nombre) && isset($_FILES['videos']['error'][$index]) && $_FILES['videos']['error'][$index] === UPLOAD_ERR_OK) {
                        $file = [
                            'name' => $_FILES['videos']['name'][$index],
                            'type' => $_FILES['videos']['type'][$index] ?? 'application/octet-stream',
                            'tmp_name' => $_FILES['videos']['tmp_name'][$index],
                            'size' => $_FILES['videos']['size'][$index] ?? 0
                        ];
                        
                        escribirLogVideos("Video válido - Nombre: {$file['name']}, Tamaño: {$file['size']}, Tmp: {$file['tmp_name']}");
                        
                        // Validar que sea un video
                        $allowedTypes = ['video/mp4', 'video/webm', 'video/ogg', 'video/quicktime', 'video/x-msvideo'];
                        if (!in_array($file['type'], $allowedTypes)) {
                            escribirLogVideos("✗ ERROR: Tipo de archivo no permitido: {$file['type']}");
                            continue;
                        }
                        
                        // Obtener extensión del archivo
                        $extension = pathinfo($file['name'], PATHINFO_EXTENSION);
                        if (empty($extension)) {
                            $mimeToExt = [
                                'video/mp4' => 'mp4',
                                'video/webm' => 'webm',
                                'video/ogg' => 'ogv',
                                'video/quicktime' => 'mov',
                                'video/x-msvideo' => 'avi'
                            ];
                            $extension = $mimeToExt[$file['type']] ?? 'mp4';
                        }
                        
                        $nombreArchivo = 'video_' . $eventoId . '_' . time() . '_' . $index . '.' . strtolower($extension);
                        $rutaDestino = $uploadDir . $nombreArchivo;
                        
                        escribirLogVideos("Intentando mover video a: $rutaDestino");
                        
                        if (move_uploaded_file($file['tmp_name'], $rutaDestino)) {
                            escribirLogVideos("Video movido exitosamente: $nombreArchivo");
                            $archivoRelativo = 'assets/uploads/videos/' . $nombreArchivo;
                            $videos_subidos[] = [
                                'archivo' => $archivoRelativo,
                                'tipo_mime' => $file['type'],
                                'tamaño_bytes' => $file['size']
                            ];
                            
                            // INSERTAR DIRECTAMENTE EN LA BASE DE DATOS - SIMPLE Y DIRECTO
                            try {
                                global $pdo;
                                
                                // Obtener el siguiente orden
                                $stmtMaxOrden = $pdo->prepare("SELECT COALESCE(MAX(orden), 0) + 1 FROM eventos_videos WHERE evento_id = ?");
                                $stmtMaxOrden->execute([$eventoId]);
                                $siguienteOrden = $stmtMaxOrden->fetchColumn();
                                
                                // INSERT simple y directo
                                $stmtInsert = $pdo->prepare("
                                    INSERT INTO eventos_videos (evento_id, archivo, tipo_mime, tamaño_bytes, orden, activo)
                                    VALUES (?, ?, ?, ?, ?, 1)
                                ");
                                
                                $resultadoInsert = $stmtInsert->execute([
                                    $eventoId,
                                    $archivoRelativo,
                                    $file['type'],
                                    $file['size'],
                                    $siguienteOrden
                                ]);
                                
                                if ($resultadoInsert) {
                                    $videoId = $pdo->lastInsertId();
                                    escribirLogVideos("Video INSERTADO en BD - ID: $videoId, Archivo: $archivoRelativo");
                                    $stmtCheck = $pdo->prepare("SELECT id, archivo FROM eventos_videos WHERE id = ?");
                                    $stmtCheck->execute([$videoId]);
                                    $check = $stmtCheck->fetch(PDO::FETCH_ASSOC);
                                    if ($check) {
                                        escribirLogVideos("Video VERIFICADO en BD - ID: {$check['id']}");
                                    } else {
                                        escribirLogVideos("ERROR: Video NO encontrado después de insertar - ID: $videoId");
                                    }
                                } else {
                                    $errorInfo = $stmtInsert->errorInfo();
                                    escribirLogVideos("ERROR INSERT VIDEO: " . ($errorInfo[2] ?? 'desconocido'));
                                }
                            } catch (Exception $e) {
                                escribirLogVideos("EXCEPCIÓN al insertar video: " . $e->getMessage());
                            }
                        } else {
                            escribirLogVideos("✗ ERROR: No se pudo mover video: {$file['name']}");
                            escribirLogVideos("✗ Tmp existe: " . (file_exists($file['tmp_name']) ? 'Sí' : 'No'));
                            escribirLogVideos("✗ Destino existe: " . (file_exists($rutaDestino) ? 'Sí' : 'No'));
                            escribirLogVideos("✗ Destino escribible: " . (is_writable(dirname($rutaDestino)) ? 'Sí' : 'No'));
                        }
                    } else {
                        escribirLogVideos("Video $index no válido o con error (código: $errorCode)");
                    }
                }
            } else {
                escribirLogVideos("✗ ERROR: El directorio no es escribible: $uploadDir");
            }
        } else {
            escribirLogVideos("✗ ERROR: El directorio no existe después de intentar crearlo: $uploadDir");
        }
    } else {
        escribirLogVideos("No hay videos en _FILES['videos'] o no es un array");
    }
    
    escribirLogVideos("Total de videos procesados: " . count($videos_subidos));
    escribirLogVideos("=== FIN PROCESAMIENTO VIDEOS ===");
    
    // Procesar actualizaciones de fotos existentes (solo orden si es necesario)
    $galeria_actualizaciones = [];
    if (isset($_POST['galeria_existente']) && is_array($_POST['galeria_existente'])) {
        foreach ($_POST['galeria_existente'] as $fotoId => $datos) {
            if (isset($datos['orden'])) {
                $galeria_actualizaciones[$fotoId] = [
                    'orden' => intval($datos['orden'] ?? 0)
                ];
            }
        }
    }
    
    // Procesar eliminaciones de fotos
    $galeria_eliminar = [];
    escribirLogGaleria("Verificando _POST['galeria_eliminar']: " . (isset($_POST['galeria_eliminar']) ? 'Existe' : 'No existe'));
    if (isset($_POST['galeria_eliminar']) && is_array($_POST['galeria_eliminar'])) {
        $galeria_eliminar = array_map('intval', $_POST['galeria_eliminar']);
        escribirLogGaleria("Fotos a eliminar recibidas: " . implode(', ', $galeria_eliminar));
    } else {
        escribirLogGaleria("No se recibieron fotos para eliminar o no es un array");
        if (isset($_POST['galeria_eliminar'])) {
            escribirLogGaleria("_POST['galeria_eliminar'] existe pero no es array: " . gettype($_POST['galeria_eliminar']));
        }
    }
    
    // Procesar actualizaciones de videos existentes (solo orden si es necesario)
    $videos_actualizaciones = [];
    if (isset($_POST['videos_existente']) && is_array($_POST['videos_existente'])) {
        foreach ($_POST['videos_existente'] as $videoId => $datos) {
            if (isset($datos['orden'])) {
                $videos_actualizaciones[$videoId] = [
                    'orden' => intval($datos['orden'] ?? 0)
                ];
            }
        }
    }
    
    // Procesar eliminaciones de videos
    $videos_eliminar = [];
    escribirLogVideos("Verificando _POST['videos_eliminar']: " . (isset($_POST['videos_eliminar']) ? 'Existe' : 'No existe'));
    if (isset($_POST['videos_eliminar']) && is_array($_POST['videos_eliminar'])) {
        $videos_eliminar = array_map('intval', $_POST['videos_eliminar']);
        escribirLogVideos("Videos a eliminar recibidos: " . implode(', ', $videos_eliminar));
    } else {
        escribirLogVideos("No se recibieron videos para eliminar o no es un array");
        if (isset($_POST['videos_eliminar'])) {
            escribirLogVideos("_POST['videos_eliminar'] existe pero no es array: " . gettype($_POST['videos_eliminar']));
        }
    }
    
    // Manejo de subida de mapa referencial
    $mapa_referencia = $evento['mapa_referencia'] ?? null; // Mantener el mapa actual por defecto
    
    if (isset($_FILES['mapa_referencia']) && $_FILES['mapa_referencia']['error'] === UPLOAD_ERR_OK) {
        $file = $_FILES['mapa_referencia'];
        $allowedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/webp', 'image/gif'];
        $maxSize = 5 * 1024 * 1024; // 5MB
        
        if (!in_array($file['type'], $allowedTypes)) {
            $error = 'Tipo de archivo no permitido para el mapa referencial. Solo se permiten imágenes (JPG, PNG, WEBP, GIF)';
            $valid = false;
        } elseif ($file['size'] > $maxSize) {
            $error = 'El archivo del mapa referencial es demasiado grande. Tamaño máximo: 5MB';
            $valid = false;
        } else {
            // Generar nombre único para el archivo
            $extension = pathinfo($file['name'], PATHINFO_EXTENSION);
            $nombreArchivo = 'mapa_referencia_' . $eventoId . '_' . time() . '.' . $extension;
            $rutaDestino = __DIR__ . '/../../assets/uploads/images/' . $nombreArchivo;
            
            // Crear directorio si no existe
            $directorioDestino = dirname($rutaDestino);
            if (!is_dir($directorioDestino)) {
                mkdir($directorioDestino, 0755, true);
            }
            
            // Mover archivo
            if (move_uploaded_file($file['tmp_name'], $rutaDestino)) {
                // Eliminar mapa anterior si existe
                if ($mapa_referencia && file_exists(__DIR__ . '/../../' . $mapa_referencia)) {
                    @unlink(__DIR__ . '/../../' . $mapa_referencia);
                }
                
                // Guardar ruta relativa desde la raíz del proyecto
                $mapa_referencia = 'assets/uploads/images/' . $nombreArchivo;
            } else {
                $error = 'Error al subir el mapa referencial. Por favor, intente nuevamente.';
                $valid = false;
            }
        }
    }
    
    // Manejo de subida de foto principal
    $foto_principal = $evento['foto_principal'] ?? null; // Mantener la foto actual por defecto
    
    if (isset($_FILES['foto_principal']) && $_FILES['foto_principal']['error'] === UPLOAD_ERR_OK) {
        $file = $_FILES['foto_principal'];
        $allowedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/webp', 'image/gif'];
        $maxSize = 5 * 1024 * 1024; // 5MB
        
        if (!in_array($file['type'], $allowedTypes)) {
            $error = 'Tipo de archivo no permitido. Solo se permiten imágenes (JPG, PNG, WEBP, GIF)';
            $valid = false;
        } elseif ($file['size'] > $maxSize) {
            $error = 'El archivo es demasiado grande. Tamaño máximo: 5MB';
            $valid = false;
        } else {
            // Generar nombre único para el archivo
            $extension = pathinfo($file['name'], PATHINFO_EXTENSION);
            $nombreArchivo = 'foto_principal_' . $eventoId . '_' . time() . '.' . $extension;
            $rutaDestino = __DIR__ . '/../../assets/uploads/images/' . $nombreArchivo;
            
            // Crear directorio si no existe
            $directorioDestino = dirname($rutaDestino);
            if (!is_dir($directorioDestino)) {
                mkdir($directorioDestino, 0755, true);
            }
            
            // Mover archivo
            if (move_uploaded_file($file['tmp_name'], $rutaDestino)) {
                // Eliminar foto anterior si existe
                if ($foto_principal && file_exists(__DIR__ . '/../../' . $foto_principal)) {
                    @unlink(__DIR__ . '/../../' . $foto_principal);
                }
                
                // Guardar ruta relativa desde la raíz del proyecto
                $foto_principal = 'assets/uploads/images/' . $nombreArchivo;
            } else {
                $error = 'Error al subir la imagen. Por favor, intente nuevamente.';
                $valid = false;
            }
        }
    }
    
    // Manejo de subida de imágenes de sobre
    $sobre_principal = $sobre['sobre_principal'] ?? null;
    $sobre_moviles = $sobre['sobre_moviles'] ?? null;
    
    // Procesar sobre principal
    if (isset($_FILES['sobre_principal']) && $_FILES['sobre_principal']['error'] === UPLOAD_ERR_OK) {
        $file = $_FILES['sobre_principal'];
        $allowedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/webp', 'image/gif', 'image/svg+xml'];
        $maxSize = 10 * 1024 * 1024; // 10MB
        
        if (!in_array($file['type'], $allowedTypes)) {
            $error = 'Tipo de archivo no permitido para el sobre principal. Solo se permiten imágenes (JPG, PNG, WEBP, GIF, SVG)';
            $valid = false;
        } elseif ($file['size'] > $maxSize) {
            $error = 'El archivo del sobre principal es demasiado grande. Tamaño máximo: 10MB';
            $valid = false;
        } else {
            $extension = pathinfo($file['name'], PATHINFO_EXTENSION);
            $nombreArchivo = 'sobre_principal_' . $eventoId . '_' . time() . '.' . $extension;
            $rutaDestino = __DIR__ . '/../../assets/uploads/images/sobre/' . $nombreArchivo;
            
            $directorioDestino = dirname($rutaDestino);
            if (!is_dir($directorioDestino)) {
                mkdir($directorioDestino, 0755, true);
            }
            
            if (move_uploaded_file($file['tmp_name'], $rutaDestino)) {
                if ($sobre_principal && file_exists(__DIR__ . '/../../' . $sobre_principal)) {
                    @unlink(__DIR__ . '/../../' . $sobre_principal);
                }
                $sobre_principal = 'assets/uploads/images/sobre/' . $nombreArchivo;
            } else {
                $error = 'Error al subir el sobre principal. Por favor, intente nuevamente.';
                $valid = false;
            }
        }
    } elseif (isset($_POST['sobre_principal_actual'])) {
        // Mantener el valor actual si no se subió uno nuevo
        $sobre_principal = sanitize($_POST['sobre_principal_actual']);
    }
    
    // Procesar sobre móviles
    if (isset($_FILES['sobre_moviles']) && $_FILES['sobre_moviles']['error'] === UPLOAD_ERR_OK) {
        $file = $_FILES['sobre_moviles'];
        $allowedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/webp', 'image/gif', 'image/svg+xml'];
        $maxSize = 10 * 1024 * 1024; // 10MB
        
        if (!in_array($file['type'], $allowedTypes)) {
            $error = 'Tipo de archivo no permitido para el sobre móviles. Solo se permiten imágenes (JPG, PNG, WEBP, GIF, SVG)';
            $valid = false;
        } elseif ($file['size'] > $maxSize) {
            $error = 'El archivo del sobre móviles es demasiado grande. Tamaño máximo: 10MB';
            $valid = false;
        } else {
            $extension = pathinfo($file['name'], PATHINFO_EXTENSION);
            $nombreArchivo = 'sobre_moviles_' . $eventoId . '_' . time() . '.' . $extension;
            $rutaDestino = __DIR__ . '/../../assets/uploads/images/sobre/' . $nombreArchivo;
            
            $directorioDestino = dirname($rutaDestino);
            if (!is_dir($directorioDestino)) {
                mkdir($directorioDestino, 0755, true);
            }
            
            if (move_uploaded_file($file['tmp_name'], $rutaDestino)) {
                if ($sobre_moviles && file_exists(__DIR__ . '/../../' . $sobre_moviles)) {
                    @unlink(__DIR__ . '/../../' . $sobre_moviles);
                }
                $sobre_moviles = 'assets/uploads/images/sobre/' . $nombreArchivo;
            } else {
                $error = 'Error al subir el sobre móviles. Por favor, intente nuevamente.';
                $valid = false;
            }
        }
    } elseif (isset($_POST['sobre_moviles_actual'])) {
        // Mantener el valor actual si no se subió uno nuevo
        $sobre_moviles = sanitize($_POST['sobre_moviles_actual']);
    }
    
    // Manejo de subida de tipografías
    $tipografias_data = [];
    $tipografias_keys = ['letra_cursiva_1', 'letra_cursiva_2', 'letra_sans_1', 'letra_sans_2', 'letra_sans_3'];
    
    foreach ($tipografias_keys as $key) {
        $archivo = null;
        $nombre = sanitize($_POST[$key . '_nombre'] ?? '');
        
        // Procesar archivo de fuente si se subió uno nuevo
        if (isset($_FILES[$key . '_archivo']) && $_FILES[$key . '_archivo']['error'] === UPLOAD_ERR_OK) {
            $file = $_FILES[$key . '_archivo'];
            $allowedTypes = ['application/x-font-ttf', 'application/x-font-otf', 'font/ttf', 'font/otf', 'application/font-woff', 'application/font-woff2', 'application/octet-stream'];
            $allowedExtensions = ['ttf', 'otf', 'woff', 'woff2'];
            $maxSize = 5 * 1024 * 1024; // 5MB
            
            $extension = strtolower(pathinfo($file['name'], PATHINFO_EXTENSION));
            
            if (!in_array($extension, $allowedExtensions)) {
                $error = "Tipo de archivo no permitido para {$key}. Solo se permiten fuentes (TTF, OTF, WOFF, WOFF2)";
                $valid = false;
            } elseif ($file['size'] > $maxSize) {
                $error = "El archivo de fuente {$key} es demasiado grande. Tamaño máximo: 5MB";
                $valid = false;
            } else {
                $nombreArchivo = $key . '_' . $eventoId . '_' . time() . '.' . $extension;
                $rutaDestino = __DIR__ . '/../../assets/fonts/eventos/' . $nombreArchivo;
                
                $directorioDestino = dirname($rutaDestino);
                if (!is_dir($directorioDestino)) {
                    mkdir($directorioDestino, 0755, true);
                }
                
                if (move_uploaded_file($file['tmp_name'], $rutaDestino)) {
                    // Eliminar archivo anterior si existe
                    $archivoAnterior = $tipografias[$key . '_archivo'] ?? null;
                    if ($archivoAnterior && file_exists(__DIR__ . '/../../' . $archivoAnterior)) {
                        @unlink(__DIR__ . '/../../' . $archivoAnterior);
                    }
                    $archivo = 'assets/fonts/eventos/' . $nombreArchivo;
                } else {
                    $error = "Error al subir el archivo de fuente {$key}. Por favor, intente nuevamente.";
                    $valid = false;
                }
            }
        } elseif (isset($_POST[$key . '_archivo_actual'])) {
            // Mantener el archivo actual si no se subió uno nuevo
            $archivo = sanitize($_POST[$key . '_archivo_actual']);
        } else {
            // Mantener el archivo existente de la BD
            $archivo = $tipografias[$key . '_archivo'] ?? null;
        }
        
        $tipografias_data[$key . '_archivo'] = $archivo;
        $tipografias_data[$key . '_nombre'] = $nombre;
    }
    
    // Validación según tipo
    // Permitir guardar si solo se están subiendo archivos (videos, galería, etc.) sin validar campos requeridos
    $soloSubiendoArchivos = false;
    
    // Verificar si hay archivos para subir
    $hayArchivosParaSubir = false;
    
    // Verificar videos
    if (isset($_FILES['videos']) && is_array($_FILES['videos']['name'])) {
        foreach ($_FILES['videos']['name'] as $nombre) {
            if (!empty($nombre)) {
                $hayArchivosParaSubir = true;
                break;
            }
        }
    }
    
    // Verificar galería
    if (!$hayArchivosParaSubir && isset($_FILES['galeria_fotos']) && is_array($_FILES['galeria_fotos']['name'])) {
        foreach ($_FILES['galeria_fotos']['name'] as $nombre) {
            if (!empty($nombre)) {
                $hayArchivosParaSubir = true;
                break;
            }
        }
    }
    
    // Verificar otros archivos (foto principal, sobre, etc.)
    if (!$hayArchivosParaSubir) {
        $archivosParaVerificar = ['foto_principal', 'sobre_principal', 'sobre_moviles', 'mapa_referencia'];
        foreach ($archivosParaVerificar as $archivo) {
            if (isset($_FILES[$archivo]) && $_FILES[$archivo]['error'] === UPLOAD_ERR_OK) {
                $hayArchivosParaSubir = true;
                break;
            }
        }
    }
    
    // Si solo se están subiendo archivos y no hay cambios en otros campos, permitir sin validar campos requeridos
    if ($hayArchivosParaSubir) {
        // Verificar si hay cambios en campos principales (no solo archivos)
        $hayCambiosEnCampos = !empty($fecha_evento) || !empty($lugar_evento) || 
                              !empty($nombre_novia) || !empty($nombre_novio) ||
                              !empty($nombre_homenajeado) || !empty($nombre_quinceanera) ||
                              !empty($nombre_evento_social);
        
        // Si solo hay archivos y no hay cambios en campos, permitir sin validar
        if (!$hayCambiosEnCampos) {
            $soloSubiendoArchivos = true;
        }
    }
    
    $valid = true;
    // Solo validar campos requeridos si NO es solo subida de archivos
    if (!$soloSubiendoArchivos) {
        if (empty($fecha_evento) || empty($lugar_evento)) {
            $error = 'Por favor complete todos los campos requeridos';
            $valid = false;
        } elseif ($tipo_evento === 'boda' && (empty($nombre_novia) || empty($nombre_novio))) {
            $error = 'Para una boda, debe ingresar el nombre de la novia y el novio';
            $valid = false;
        } elseif ($tipo_evento === 'cumpleaños' && empty($nombre_homenajeado)) {
            $error = 'Para un cumpleaños, debe ingresar el nombre del homenajeado';
            $valid = false;
        } elseif ($tipo_evento === 'quinceañera' && empty($nombre_quinceanera)) {
            $error = 'Para una quinceañera, debe ingresar el nombre de la quinceañera';
            $valid = false;
        } elseif ($tipo_evento === 'bautizo' && empty($nombre_bautizado)) {
            $error = 'Para un bautizo, debe ingresar el nombre del bautizado/a';
            $valid = false;
        } elseif (($tipo_evento === 'reunion' || $tipo_evento === 'evento_social') && empty($nombre_evento_social)) {
            $error = 'Debe ingresar el nombre del evento';
            $valid = false;
        }
    }
    
    if ($valid) {
        try {
            $pdo->beginTransaction();
            
            // Actualizar tabla principal eventos_base (normalizada)
            $stmt = $pdo->prepare("
                UPDATE eventos_base SET
                    tipo_evento = ?,
                    fecha_evento = ?,
                    hora_evento = ?,
                    lugar_evento = ?,
                    direccion_evento = ?,
                    mapa_referencia = ?,
                    descripcion = ?,
                    mensaje_personalizado = ?,
                    foto_principal = ?,
                    tiene_itinerario = ?,
                    tiene_dresscode = ?,
                    tiene_obsequio = ?
                WHERE id = ?
            ");
            $stmt->execute([
                $tipo_evento,
                $fecha_evento ?: $evento['fecha_evento'] ?? null,
                $hora_evento ?: $evento['hora_evento'] ?? null,
                $lugar_evento ?: $evento['lugar_evento'] ?? null,
                $direccion_evento ?: $evento['direccion_evento'] ?? null,
                $mapa_referencia ?: null,
                $descripcion ?: $evento['descripcion'] ?? null,
                $mensaje_personalizado ?: $evento['mensaje_personalizado'] ?? null,
                $foto_principal ?: null,
                $tiene_itinerario,
                $tiene_dresscode,
                $tiene_obsequio,
                $eventoId
            ]);
            
            // Actualizar tabla específica del tipo de evento
            if ($tipo_evento === 'boda') {
                // Verificar si existe registro
                $stmtCheck = $pdo->prepare("SELECT id FROM eventos_boda WHERE evento_id = ?");
                $stmtCheck->execute([$eventoId]);
                
                if ($stmtCheck->fetch()) {
                    $stmtType = $pdo->prepare("
                        UPDATE eventos_boda SET
                            nombre_novia = ?,
                            nombre_novio = ?,
                            padre_novia = ?,
                            madre_novia = ?,
                            padre_novio = ?,
                            madre_novio = ?,
                            padrino_boda = ?,
                            madrina_boda = ?
                        WHERE evento_id = ?
                    ");
                } else {
                    $stmtType = $pdo->prepare("
                        INSERT INTO eventos_boda (evento_id, nombre_novia, nombre_novio, padre_novia, madre_novia, padre_novio, madre_novio, padrino_boda, madrina_boda)
                        VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)
                    ");
                }
                $stmtType->execute([
                    $nombre_novia ?: null,
                    $nombre_novio ?: null,
                    $padre_novia ?: null,
                    $madre_novia ?: null,
                    $padre_novio ?: null,
                    $madre_novio ?: null,
                    $padrino_boda ?: null,
                    $madrina_boda ?: null,
                    $eventoId
                ]);
            } elseif ($tipo_evento === 'cumpleaños') {
                $stmtCheck = $pdo->prepare("SELECT id FROM eventos_cumpleanos WHERE evento_id = ?");
                $stmtCheck->execute([$eventoId]);
                
                if ($stmtCheck->fetch()) {
                    $stmtType = $pdo->prepare("UPDATE eventos_cumpleanos SET nombre_homenajeado = ?, edad = ?, anos_a_cumplir = ? WHERE evento_id = ?");
                } else {
                    $stmtType = $pdo->prepare("INSERT INTO eventos_cumpleanos (evento_id, nombre_homenajeado, edad, anos_a_cumplir) VALUES (?, ?, ?, ?)");
                }
                $stmtType->execute([$nombre_homenajeado ?: null, $edad ?: null, $anos_a_cumplir ?: null, $eventoId]);
            } elseif ($tipo_evento === 'quinceañera') {
                $stmtCheck = $pdo->prepare("SELECT id FROM eventos_quinceanera WHERE evento_id = ?");
                $stmtCheck->execute([$eventoId]);
                
                if ($stmtCheck->fetch()) {
                    $stmtType = $pdo->prepare("UPDATE eventos_quinceanera SET nombre_quinceanera = ?, padre_quinceanera = ?, madre_quinceanera = ? WHERE evento_id = ?");
                } else {
                    $stmtType = $pdo->prepare("INSERT INTO eventos_quinceanera (evento_id, nombre_quinceanera, padre_quinceanera, madre_quinceanera) VALUES (?, ?, ?, ?)");
                }
                $stmtType->execute([$nombre_quinceanera ?: null, $padre_quinceanera ?: null, $madre_quinceanera ?: null, $eventoId]);
            } elseif ($tipo_evento === 'bautizo') {
                $stmtCheck = $pdo->prepare("SELECT id FROM eventos_bautizo WHERE evento_id = ?");
                $stmtCheck->execute([$eventoId]);
                
                if ($stmtCheck->fetch()) {
                    $stmtType = $pdo->prepare("UPDATE eventos_bautizo SET nombre_bautizado = ?, padre_bautizo = ?, madre_bautizo = ?, padrino_bautizo = ?, madrina_bautizo = ? WHERE evento_id = ?");
                } else {
                    $stmtType = $pdo->prepare("INSERT INTO eventos_bautizo (evento_id, nombre_bautizado, padre_bautizo, madre_bautizo, padrino_bautizo, madrina_bautizo) VALUES (?, ?, ?, ?, ?, ?)");
                }
                $stmtType->execute([$nombre_bautizado ?: null, $padre_bautizo ?: null, $madre_bautizo ?: null, $padrino_bautizo ?: null, $madrina_bautizo ?: null, $eventoId]);
            } elseif ($tipo_evento === 'evento_social' || $tipo_evento === 'reunion') {
                $stmtCheck = $pdo->prepare("SELECT id FROM eventos_evento_social WHERE evento_id = ?");
                $stmtCheck->execute([$eventoId]);
                
                if ($stmtCheck->fetch()) {
                    $stmtType = $pdo->prepare("UPDATE eventos_evento_social SET nombre_evento_social = ?, nombre_organizador = ? WHERE evento_id = ?");
                    $stmtType->execute([$nombre_evento_social ?: null, $nombre_organizador ?: null, $eventoId]);
                } else {
                    $stmtType = $pdo->prepare("INSERT INTO eventos_evento_social (evento_id, nombre_evento_social, nombre_organizador) VALUES (?, ?, ?)");
                    $stmtType->execute([$eventoId, $nombre_evento_social ?: null, $nombre_organizador ?: null]);
                }
            }
            
            // Procesar itinerario
            if ($tiene_itinerario) {
                // Obtener IDs existentes para comparar
                $stmtExist = $pdo->prepare("SELECT id FROM eventos_itinerario WHERE evento_id = ?");
                $stmtExist->execute([$eventoId]);
                $idsExistentes = [];
                while ($row = $stmtExist->fetch(PDO::FETCH_ASSOC)) {
                    $idsExistentes[] = $row['id'];
                }
                
                $idsRecibidos = [];
                foreach ($itinerario_items as $index => $item) {
                    if ($item['id']) {
                        // Actualizar item existente
                        $stmtIt = $pdo->prepare("
                            UPDATE eventos_itinerario SET
                                fecha = ?,
                                hora = ?,
                                nombre = ?,
                                descripcion = ?,
                                orden = ?
                            WHERE id = ? AND evento_id = ?
                        ");
                        $stmtIt->execute([
                            $item['fecha'],
                            $item['hora'] ?: null,
                            $item['nombre'],
                            $item['descripcion'] ?: null,
                            $item['orden'] ?: $index,
                            $item['id'],
                            $eventoId
                        ]);
                        $idsRecibidos[] = $item['id'];
                    } else {
                        // Insertar nuevo item
                        $stmtIt = $pdo->prepare("
                            INSERT INTO eventos_itinerario (evento_id, fecha, hora, nombre, descripcion, orden)
                            VALUES (?, ?, ?, ?, ?, ?)
                        ");
                        $stmtIt->execute([
                            $eventoId,
                            $item['fecha'],
                            $item['hora'] ?: null,
                            $item['nombre'],
                            $item['descripcion'] ?: null,
                            $item['orden'] ?: $index
                        ]);
                    }
                }
                
                // Eliminar items que ya no están en el formulario
                $idsAEliminar = array_diff($idsExistentes, $idsRecibidos);
                if (!empty($idsAEliminar)) {
                    $placeholders = implode(',', array_fill(0, count($idsAEliminar), '?'));
                    $stmtDel = $pdo->prepare("DELETE FROM eventos_itinerario WHERE id IN ($placeholders) AND evento_id = ?");
                    $params = array_merge($idsAEliminar, [$eventoId]);
                    $stmtDel->execute($params);
                }
            } else {
                // Si no tiene itinerario, desactivar todos los items (soft delete)
                $stmtDesactivar = $pdo->prepare("UPDATE eventos_itinerario SET activo = 0 WHERE evento_id = ?");
                $stmtDesactivar->execute([$eventoId]);
            }
            
            // Procesar dresscode
            if ($tiene_dresscode) {
                // Manejo de imágenes subidas
                $imagenes_subidas = [];
                if (isset($_FILES['dresscode_imagen']) && is_array($_FILES['dresscode_imagen']['name'])) {
                    foreach ($_FILES['dresscode_imagen']['name'] as $index => $nombre) {
                        if (!empty($nombre) && isset($_FILES['dresscode_imagen']['error'][$index]) && $_FILES['dresscode_imagen']['error'][$index] === UPLOAD_ERR_OK) {
                            $file = [
                                'name' => $_FILES['dresscode_imagen']['name'][$index],
                                'type' => $_FILES['dresscode_imagen']['type'][$index],
                                'tmp_name' => $_FILES['dresscode_imagen']['tmp_name'][$index],
                                'size' => $_FILES['dresscode_imagen']['size'][$index]
                            ];
                            
                            $allowedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/webp', 'image/gif'];
                            $maxSize = 5 * 1024 * 1024; // 5MB
                            
                            if (in_array($file['type'], $allowedTypes) && $file['size'] <= $maxSize) {
                                $extension = pathinfo($file['name'], PATHINFO_EXTENSION);
                                $nombreArchivo = 'dresscode_' . $eventoId . '_' . time() . '_' . $index . '.' . $extension;
                                $rutaDestino = __DIR__ . '/../../assets/uploads/images/' . $nombreArchivo;
                                
                                $directorioDestino = dirname($rutaDestino);
                                if (!is_dir($directorioDestino)) {
                                    mkdir($directorioDestino, 0755, true);
                                }
                                
                                if (move_uploaded_file($file['tmp_name'], $rutaDestino)) {
                                    $imagenes_subidas[$index] = 'assets/uploads/images/' . $nombreArchivo;
                                }
                            }
                        }
                    }
                }
                
                // Obtener IDs existentes
                $stmtExist = $pdo->prepare("SELECT id FROM eventos_dresscode WHERE evento_id = ?");
                $stmtExist->execute([$eventoId]);
                $idsExistentes = [];
                while ($row = $stmtExist->fetch(PDO::FETCH_ASSOC)) {
                    $idsExistentes[] = $row['id'];
                }
                
                $idsRecibidos = [];
                foreach ($dresscode_items as $index => &$item) {
                    // Si es imagen y hay una nueva subida, usar la nueva
                    if ($item['tipo'] === 'imagen' && isset($imagenes_subidas[$item['index']])) {
                        $item['valor'] = $imagenes_subidas[$item['index']];
                    } elseif ($item['tipo'] === 'imagen' && empty($item['valor']) && $item['id']) {
                        // Si es imagen existente sin nueva subida, obtener el valor actual de la BD
                        $stmtGet = $pdo->prepare("SELECT valor FROM eventos_dresscode WHERE id = ? AND evento_id = ?");
                        $stmtGet->execute([$item['id'], $eventoId]);
                        $valorActual = $stmtGet->fetch(PDO::FETCH_ASSOC);
                        if ($valorActual) {
                            $item['valor'] = $valorActual['valor'];
                        }
                    }
                    
                    // Solo procesar si tiene valor o es un item existente
                    if (empty($item['valor']) && !$item['id']) {
                        continue; // Saltar items nuevos sin valor
                    }
                    
                    if ($item['id']) {
                        // Actualizar item existente
                        $stmtDc = $pdo->prepare("
                            UPDATE eventos_dresscode SET
                                nombre_opcion = ?,
                                tipo = ?,
                                valor = ?,
                                orden = ?
                            WHERE id = ? AND evento_id = ?
                        ");
                        $stmtDc->execute([
                            $item['nombre_opcion'],
                            $item['tipo'],
                            $item['valor'],
                            $item['orden'] ?: $index,
                            $item['id'],
                            $eventoId
                        ]);
                        $idsRecibidos[] = $item['id'];
                    } else {
                        // Insertar nuevo item solo si tiene valor
                        if (!empty($item['valor'])) {
                            $stmtDc = $pdo->prepare("
                                INSERT INTO eventos_dresscode (evento_id, nombre_opcion, tipo, valor, orden)
                                VALUES (?, ?, ?, ?, ?)
                            ");
                            $stmtDc->execute([
                                $eventoId,
                                $item['nombre_opcion'],
                                $item['tipo'],
                                $item['valor'],
                                $item['orden'] ?: $index
                            ]);
                        }
                    }
                }
                unset($item); // Importante: liberar la referencia
                
                // Eliminar items que ya no están en el formulario
                $idsAEliminar = array_values(array_diff($idsExistentes, $idsRecibidos));
                if (!empty($idsAEliminar)) {
                    $placeholders = implode(',', array_fill(0, count($idsAEliminar), '?'));
                    $stmtDel = $pdo->prepare("DELETE FROM eventos_dresscode WHERE id IN ($placeholders) AND evento_id = ?");
                    $params = array_merge($idsAEliminar, [$eventoId]);
                    $stmtDel->execute($params);
                }
            } else {
                // Si no tiene dresscode, eliminar todos los items (no solo desactivar)
                $stmtDel = $pdo->prepare("DELETE FROM eventos_dresscode WHERE evento_id = ?");
                $stmtDel->execute([$eventoId]);
            }
            
            // Procesar colores reservados del dress code
            if (isset($_POST['colores_reservados']) && is_array($_POST['colores_reservados'])) {
                // Obtener IDs existentes
                $stmtColoresExist = $pdo->prepare("SELECT id FROM eventos_dresscode_colores WHERE evento_id = ?");
                $stmtColoresExist->execute([$eventoId]);
                $idsColoresExistentes = $stmtColoresExist->fetchAll(PDO::FETCH_COLUMN);
                $idsColoresRecibidos = [];
                
                foreach ($_POST['colores_reservados'] as $orden => $colorData) {
                    $colorId = isset($colorData['id']) && !empty($colorData['id']) ? (int)$colorData['id'] : null;
                    $colorValor = sanitize($colorData['color'] ?? '');
                    $colorNombre = sanitize($colorData['nombre'] ?? '');
                    
                    // Validar formato del color
                    if (empty($colorValor) || !preg_match('/^#[0-9A-Fa-f]{6}$/', $colorValor)) {
                        continue;
                    }
                    
                    if ($colorId && in_array($colorId, $idsColoresExistentes)) {
                        // Actualizar color existente
                        $stmtColorUpd = $pdo->prepare("
                            UPDATE eventos_dresscode_colores 
                            SET color = ?, nombre = ?, orden = ?, activo = 1
                            WHERE id = ? AND evento_id = ?
                        ");
                        $stmtColorUpd->execute([strtoupper($colorValor), $colorNombre, $orden, $colorId, $eventoId]);
                        $idsColoresRecibidos[] = $colorId;
                    } else {
                        // Insertar nuevo color
                        $stmtColorIns = $pdo->prepare("
                            INSERT INTO eventos_dresscode_colores (evento_id, color, nombre, orden, activo)
                            VALUES (?, ?, ?, ?, 1)
                        ");
                        $stmtColorIns->execute([$eventoId, strtoupper($colorValor), $colorNombre, $orden]);
                    }
                }
                
                // Eliminar colores que ya no están
                $idsColoresAEliminar = array_diff($idsColoresExistentes, $idsColoresRecibidos);
                if (!empty($idsColoresAEliminar)) {
                    $placeholdersColores = implode(',', array_fill(0, count($idsColoresAEliminar), '?'));
                    $stmtColorDel = $pdo->prepare("DELETE FROM eventos_dresscode_colores WHERE id IN ($placeholdersColores) AND evento_id = ?");
                    $paramsColores = array_merge($idsColoresAEliminar, [$eventoId]);
                    $stmtColorDel->execute($paramsColores);
                }
            }
            
            // Procesar obsequios (nuevo sistema múltiple)
            if ($tiene_obsequio) {
                // Obtener IDs existentes para saber cuáles eliminar
                $stmtExistentes = $pdo->prepare("SELECT id FROM eventos_obsequio WHERE evento_id = ? AND activo = 1");
                $stmtExistentes->execute([$eventoId]);
                $idsExistentes = $stmtExistentes->fetchAll(PDO::FETCH_COLUMN);
                $idsActualizados = [];
                
                // Procesar cuentas bancarias
                $cuentas = $_POST['cuentas'] ?? [];
                foreach ($cuentas as $cuenta) {
                    $cuentaId = $cuenta['id'] ?? '';
                    $banco = sanitize($cuenta['banco'] ?? '');
                    $tipoCuenta = sanitize($cuenta['tipo_cuenta'] ?? '');
                    $numeroCuenta = sanitize($cuenta['numero_cuenta'] ?? '');
                    $titular = sanitize($cuenta['titular'] ?? '');
                    $cedula = sanitize($cuenta['cedula'] ?? '');
                    $correo = sanitize($cuenta['correo'] ?? '');
                    
                    // Solo guardar si tiene al menos el banco
                    if (!empty($banco)) {
                        if (!empty($cuentaId)) {
                            // Actualizar existente
                            $stmtUpdate = $pdo->prepare("
                                UPDATE eventos_obsequio SET
                                    banco = ?, tipo_cuenta = ?, numero_cuenta = ?,
                                    titular = ?, cedula = ?, correo = ?, activo = 1
                                WHERE id = ? AND evento_id = ?
                            ");
                            $stmtUpdate->execute([
                                $banco, $tipoCuenta, $numeroCuenta,
                                $titular, $cedula, $correo,
                                $cuentaId, $eventoId
                            ]);
                            $idsActualizados[] = $cuentaId;
                        } else {
                            // Insertar nueva
                            $stmtInsert = $pdo->prepare("
                                INSERT INTO eventos_obsequio (
                                    evento_id, tipo, banco, tipo_cuenta, numero_cuenta,
                                    titular, cedula, correo, activo
                                ) VALUES (?, 'transferencia', ?, ?, ?, ?, ?, ?, 1)
                            ");
                            $stmtInsert->execute([
                                $eventoId, $banco, $tipoCuenta, $numeroCuenta,
                                $titular, $cedula, $correo
                            ]);
                            $idsActualizados[] = $pdo->lastInsertId();
                        }
                    }
                }
                
                // Procesar sobre cerrado
                $tieneSobreCerrado = isset($_POST['tiene_sobre_cerrado']) && $_POST['tiene_sobre_cerrado'] === '1';
                if ($tieneSobreCerrado) {
                    $sobreCerrado = $_POST['sobre_cerrado'] ?? [];
                    $sobreId = $sobreCerrado['id'] ?? '';
                    $indicaciones = sanitize($sobreCerrado['indicaciones'] ?? '');
                    
                    if (!empty($sobreId)) {
                        // Actualizar existente
                        $stmtUpdate = $pdo->prepare("
                            UPDATE eventos_obsequio SET
                                indicaciones = ?, activo = 1
                            WHERE id = ? AND evento_id = ?
                        ");
                        $stmtUpdate->execute([$indicaciones, $sobreId, $eventoId]);
                        $idsActualizados[] = $sobreId;
                    } else {
                        // Insertar nuevo
                        $stmtInsert = $pdo->prepare("
                            INSERT INTO eventos_obsequio (
                                evento_id, tipo, indicaciones, activo
                            ) VALUES (?, 'sobre_cerrado', ?, 1)
                        ");
                        $stmtInsert->execute([$eventoId, $indicaciones]);
                        $idsActualizados[] = $pdo->lastInsertId();
                    }
                }
                
                // Desactivar los que no están en la lista actual
                $idsAEliminar = array_diff($idsExistentes, $idsActualizados);
                if (!empty($idsAEliminar)) {
                    $placeholders = implode(',', array_fill(0, count($idsAEliminar), '?'));
                    $stmtDesactivar = $pdo->prepare("UPDATE eventos_obsequio SET activo = 0 WHERE id IN ($placeholders)");
                    $stmtDesactivar->execute(array_values($idsAEliminar));
                }
            } else {
                // Si no tiene obsequio, desactivar todos
                $stmtDesactivar = $pdo->prepare("UPDATE eventos_obsequio SET activo = 0 WHERE evento_id = ?");
                $stmtDesactivar->execute([$eventoId]);
            }
            
            // Procesar Detalles Adicionales
            // Obtener el ID del evento específico
            $eventoEspecificoId = null;
            switch ($tipo_permitido) {
                case 'boda':
                    $stmt = $pdo->prepare("SELECT id FROM eventos_boda WHERE evento_id = ? LIMIT 1");
                    $stmt->execute([$eventoId]);
                    $result = $stmt->fetch(PDO::FETCH_ASSOC);
                    $eventoEspecificoId = $result['id'] ?? null;
                    break;
                case 'cumpleanos':
                    $stmt = $pdo->prepare("SELECT id FROM eventos_cumpleanos WHERE evento_id = ? LIMIT 1");
                    $stmt->execute([$eventoId]);
                    $result = $stmt->fetch(PDO::FETCH_ASSOC);
                    $eventoEspecificoId = $result['id'] ?? null;
                    break;
                case 'quinceanera':
                    $stmt = $pdo->prepare("SELECT id FROM eventos_quinceanera WHERE evento_id = ? LIMIT 1");
                    $stmt->execute([$eventoId]);
                    $result = $stmt->fetch(PDO::FETCH_ASSOC);
                    $eventoEspecificoId = $result['id'] ?? null;
                    break;
                case 'bautizo':
                    $stmt = $pdo->prepare("SELECT id FROM eventos_bautizo WHERE evento_id = ? LIMIT 1");
                    $stmt->execute([$eventoId]);
                    $result = $stmt->fetch(PDO::FETCH_ASSOC);
                    $eventoEspecificoId = $result['id'] ?? null;
                    break;
                case 'evento_social':
                    $stmt = $pdo->prepare("SELECT id FROM eventos_evento_social WHERE evento_id = ? LIMIT 1");
                    $stmt->execute([$eventoId]);
                    $result = $stmt->fetch(PDO::FETCH_ASSOC);
                    $eventoEspecificoId = $result['id'] ?? null;
                    break;
            }
            
            if ($eventoEspecificoId) {
                // Procesar Hospedaje
                procesarDetallesAdicionales($pdo, $eventoId, $eventoEspecificoId, $tipo_permitido, 'hospedaje', $detalles_hospedaje_items);
                
                // Procesar Alimentación
                procesarDetallesAdicionales($pdo, $eventoId, $eventoEspecificoId, $tipo_permitido, 'alimentacion', $detalles_alimentacion_items);
                
                // Procesar PDF
                procesarDetallesAdicionalesPDF($pdo, $eventoId, $eventoEspecificoId, $tipo_permitido, 'pdf', $detalles_pdf_items);
                
                // Procesar Transporte
                procesarDetallesAdicionales($pdo, $eventoId, $eventoEspecificoId, $tipo_permitido, 'transporte', $detalles_transporte_items);
                
                // Procesar Otro
                procesarDetallesAdicionales($pdo, $eventoId, $eventoEspecificoId, $tipo_permitido, 'otro', $detalles_otro_items);
            }
            
            // Procesar Galería - Eliminar fotos marcadas para eliminar
            escribirLogGaleria("Procesando eliminaciones: " . count($galeria_eliminar) . " fotos marcadas");
            if (!empty($galeria_eliminar)) {
                // Obtener rutas de archivos antes de eliminar
                $placeholders = implode(',', array_fill(0, count($galeria_eliminar), '?'));
                $stmtGetFiles = $pdo->prepare("SELECT archivo FROM eventos_galeria WHERE id IN ($placeholders) AND evento_id = ?");
                $params = array_merge($galeria_eliminar, [$eventoId]);
                $stmtGetFiles->execute($params);
                $archivosAEliminar = $stmtGetFiles->fetchAll(PDO::FETCH_COLUMN);
                
                escribirLogGaleria("Archivos a eliminar: " . count($archivosAEliminar));
                
                // Eliminar de la base de datos
                $stmtDel = $pdo->prepare("DELETE FROM eventos_galeria WHERE id IN ($placeholders) AND evento_id = ?");
                $resultadoDelete = $stmtDel->execute($params);
                escribirLogGaleria("Eliminación BD: " . ($resultadoDelete ? 'Éxito' : 'Error'));
                
                // Eliminar archivos físicos
                foreach ($archivosAEliminar as $archivo) {
                    $rutaCompleta = __DIR__ . '/../../' . $archivo;
                    if (file_exists($rutaCompleta)) {
                        $eliminado = @unlink($rutaCompleta);
                        escribirLogGaleria("Archivo físico eliminado: $archivo - " . ($eliminado ? 'Éxito' : 'Error'));
                    } else {
                        escribirLogGaleria("Archivo físico no encontrado: $rutaCompleta");
                    }
                }
            }
            
            // Actualizar fotos existentes (solo orden si es necesario)
            foreach ($galeria_actualizaciones as $fotoId => $datos) {
                if (isset($datos['orden'])) {
                    $stmtUpdate = $pdo->prepare("
                        UPDATE eventos_galeria SET orden = ?
                        WHERE id = ? AND evento_id = ?
                    ");
                    $stmtUpdate->execute([
                        $datos['orden'],
                        $fotoId,
                        $eventoId
                    ]);
                }
            }
            
            // Las fotos ya fueron insertadas directamente durante el procesamiento
            // Este bloque ya no es necesario, pero lo dejamos por compatibilidad
            escribirLogGaleria("Total de fotos procesadas y guardadas: " . count($galeria_fotos_subidas));
            
            // Procesar Videos - Eliminar videos marcados para eliminar
            escribirLogVideos("Procesando eliminaciones: " . count($videos_eliminar) . " videos marcados");
            if (!empty($videos_eliminar)) {
                // Obtener rutas de archivos antes de eliminar
                $placeholders = implode(',', array_fill(0, count($videos_eliminar), '?'));
                $stmtGetFiles = $pdo->prepare("SELECT archivo FROM eventos_videos WHERE id IN ($placeholders) AND evento_id = ?");
                $params = array_merge($videos_eliminar, [$eventoId]);
                $stmtGetFiles->execute($params);
                $archivosAEliminar = $stmtGetFiles->fetchAll(PDO::FETCH_COLUMN);
                
                escribirLogVideos("Archivos a eliminar: " . count($archivosAEliminar));
                
                // Eliminar de la base de datos
                $stmtDel = $pdo->prepare("DELETE FROM eventos_videos WHERE id IN ($placeholders) AND evento_id = ?");
                $resultadoDelete = $stmtDel->execute($params);
                escribirLogVideos("Eliminación BD: " . ($resultadoDelete ? 'Éxito' : 'Error'));
                
                // Eliminar archivos físicos
                foreach ($archivosAEliminar as $archivo) {
                    $rutaCompleta = __DIR__ . '/../../' . $archivo;
                    if (file_exists($rutaCompleta)) {
                        $eliminado = @unlink($rutaCompleta);
                        escribirLogVideos("Archivo físico eliminado: $archivo - " . ($eliminado ? 'Éxito' : 'Error'));
                    } else {
                        escribirLogVideos("Archivo físico no encontrado: $rutaCompleta");
                    }
                }
            }
            
            // Actualizar videos existentes (solo orden si es necesario)
            foreach ($videos_actualizaciones as $videoId => $datos) {
                if (isset($datos['orden'])) {
                    $stmtUpdate = $pdo->prepare("
                        UPDATE eventos_videos SET orden = ?
                        WHERE id = ? AND evento_id = ?
                    ");
                    $stmtUpdate->execute([
                        $datos['orden'],
                        $videoId,
                        $eventoId
                    ]);
                }
            }
            
            // Los videos ya fueron insertados directamente durante el procesamiento
            // Procesar asignaciones de videos a invitados
            if (isset($_POST['video_asignaciones']) && is_array($_POST['video_asignaciones'])) {
                foreach ($_POST['video_asignaciones'] as $videoId => $invitadoIds) {
                    $videoId = intval($videoId);
                    if ($videoId > 0) {
                        // Verificar que el video pertenece al evento
                        $stmtCheck = $pdo->prepare("SELECT id FROM eventos_videos WHERE id = ? AND evento_id = ?");
                        $stmtCheck->execute([$videoId, $eventoId]);
                        if ($stmtCheck->fetch()) {
                            // Convertir invitadoIds a array de enteros
                            $invitadoIdsArray = [];
                            if (is_array($invitadoIds)) {
                                $invitadoIdsArray = array_map('intval', array_filter($invitadoIds, function($id) {
                                    return !empty($id);
                                }));
                            } elseif (!empty($invitadoIds)) {
                                $invitadoIdsArray = [intval($invitadoIds)];
                            }
                            
                            // Asignar video a invitados (sin transacción propia, ya estamos en una)
                            if (asignarVideoAInvitados($videoId, $invitadoIdsArray, false)) {
                                escribirLogVideos("✓ Video $videoId asignado a " . count($invitadoIdsArray) . " invitados");
                            } else {
                                escribirLogVideos("✗ Error al asignar video $videoId");
                            }
                        }
                    }
                }
            }
            
            escribirLogVideos("Total de videos procesados y guardados: " . count($videos_subidos));
            
            // Guardar/Actualizar colores adicionales en eventos_colores
            $stmtCheckColores = $pdo->prepare("SELECT id FROM eventos_colores WHERE evento_id = ?");
            $stmtCheckColores->execute([$eventoId]);
            $coloresExistentes = $stmtCheckColores->fetch();
            
            if ($coloresExistentes) {
                // Actualizar colores existentes
                $stmtColores = $pdo->prepare("
                    UPDATE eventos_colores SET
                        color_principal = ?,
                        color_secundario = ?,
                        color_texto = ?,
                        color_resalte = ?,
                        color_1 = ?,
                        color_2 = ?,
                        color_3 = ?,
                        color_4 = ?
                    WHERE evento_id = ?
                ");
                $stmtColores->execute([
                    $color_principal,
                    $color_secundario,
                    $color_texto,
                    $color_resalte,
                    $color_1,
                    $color_2,
                    $color_3,
                    $color_4,
                    $eventoId  // Para el WHERE
                ]);
            } else {
                // Insertar nuevos colores
                $stmtColores = $pdo->prepare("
                    INSERT INTO eventos_colores (evento_id, color_principal, color_secundario, color_texto, color_resalte, color_1, color_2, color_3, color_4)
                    VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)
                ");
                $stmtColores->execute([
                    $eventoId,  // PRIMERO: evento_id
                    $color_principal,
                    $color_secundario,
                    $color_texto,
                    $color_resalte,
                    $color_1,
                    $color_2,
                    $color_3,
                    $color_4
                ]);
            }
            
            // Guardar/Actualizar datos del sobre
            $stmtCheckSobre = $pdo->prepare("SELECT id FROM eventos_sobre WHERE evento_id = ?");
            $stmtCheckSobre->execute([$eventoId]);
            $sobreExistente = $stmtCheckSobre->fetch();
            
            if ($sobreExistente) {
                // Actualizar sobre existente
                $stmtSobre = $pdo->prepare("
                    UPDATE eventos_sobre SET
                        sobre_principal = ?,
                        sobre_moviles = ?,
                        activo = 1
                    WHERE evento_id = ?
                ");
                $stmtSobre->execute([
                    $sobre_principal ?: null,
                    $sobre_moviles ?: null,
                    $eventoId
                ]);
            } else {
                // Insertar nuevo sobre
                $stmtSobre = $pdo->prepare("
                    INSERT INTO eventos_sobre (evento_id, sobre_principal, sobre_moviles, activo)
                    VALUES (?, ?, ?, 1)
                ");
                $stmtSobre->execute([
                    $eventoId,
                    $sobre_principal ?: null,
                    $sobre_moviles ?: null
                ]);
            }
            
            // Guardar/Actualizar tipografías
            $stmtCheckTipografias = $pdo->prepare("SELECT id FROM eventos_tipografias WHERE evento_id = ?");
            $stmtCheckTipografias->execute([$eventoId]);
            $tipografiasExistentes = $stmtCheckTipografias->fetch();
            
            if ($tipografiasExistentes) {
                // Actualizar tipografías existentes
                $stmtTipografias = $pdo->prepare("
                    UPDATE eventos_tipografias SET
                        letra_cursiva_1_archivo = ?,
                        letra_cursiva_1_nombre = ?,
                        letra_cursiva_2_archivo = ?,
                        letra_cursiva_2_nombre = ?,
                        letra_sans_1_archivo = ?,
                        letra_sans_1_nombre = ?,
                        letra_sans_2_archivo = ?,
                        letra_sans_2_nombre = ?,
                        letra_sans_3_archivo = ?,
                        letra_sans_3_nombre = ?,
                        activo = 1
                    WHERE evento_id = ?
                ");
                $stmtTipografias->execute([
                    $tipografias_data['letra_cursiva_1_archivo'] ?: null,
                    $tipografias_data['letra_cursiva_1_nombre'] ?: null,
                    $tipografias_data['letra_cursiva_2_archivo'] ?: null,
                    $tipografias_data['letra_cursiva_2_nombre'] ?: null,
                    $tipografias_data['letra_sans_1_archivo'] ?: null,
                    $tipografias_data['letra_sans_1_nombre'] ?: null,
                    $tipografias_data['letra_sans_2_archivo'] ?: null,
                    $tipografias_data['letra_sans_2_nombre'] ?: null,
                    $tipografias_data['letra_sans_3_archivo'] ?: null,
                    $tipografias_data['letra_sans_3_nombre'] ?: null,
                    $eventoId
                ]);
            } else {
                // Insertar nuevas tipografías
                $stmtTipografias = $pdo->prepare("
                    INSERT INTO eventos_tipografias (
                        evento_id, 
                        letra_cursiva_1_archivo, letra_cursiva_1_nombre,
                        letra_cursiva_2_archivo, letra_cursiva_2_nombre,
                        letra_sans_1_archivo, letra_sans_1_nombre,
                        letra_sans_2_archivo, letra_sans_2_nombre,
                        letra_sans_3_archivo, letra_sans_3_nombre,
                        activo
                    ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, 1)
                ");
                $stmtTipografias->execute([
                    $eventoId,
                    $tipografias_data['letra_cursiva_1_archivo'] ?: null,
                    $tipografias_data['letra_cursiva_1_nombre'] ?: null,
                    $tipografias_data['letra_cursiva_2_archivo'] ?: null,
                    $tipografias_data['letra_cursiva_2_nombre'] ?: null,
                    $tipografias_data['letra_sans_1_archivo'] ?: null,
                    $tipografias_data['letra_sans_1_nombre'] ?: null,
                    $tipografias_data['letra_sans_2_archivo'] ?: null,
                    $tipografias_data['letra_sans_2_nombre'] ?: null,
                    $tipografias_data['letra_sans_3_archivo'] ?: null,
                    $tipografias_data['letra_sans_3_nombre'] ?: null
                ]);
            }
            
            $pdo->commit();
            
            registrarLog($eventoId, 'configuracion', 'Actualizar', 'Datos del evento actualizados');
            
            // Redirigir para evitar reenvío del formulario (POST-Redirect-GET pattern)
            // Esto evita que al recargar la página se vuelvan a subir los archivos
            header('Location: index.php?page=configuracion&success=1');
            exit;
        } catch (Exception $e) {
            // Si hay videos subidos pero la transacción falló, los videos ya están guardados (se insertaron directamente)
            // Solo hacer rollback si no hay videos subidos
            if (empty($videos_subidos) && empty($galeria)) {
                try {
                    $pdo->rollBack();
                } catch (PDOException $rollbackException) {
                    // Si falla el rollBack, ignorar
                }
            }
            
            // Si hay videos subidos, mostrar mensaje de éxito parcial
            if (!empty($videos_subidos)) {
                $error = 'Los videos se guardaron correctamente, pero hubo un error al actualizar otros datos: ' . $e->getMessage();
            } else {
                $error = 'Error al actualizar: ' . $e->getMessage();
            }
        }
    } else {
        
        // Si solo se están subiendo archivos (videos o galería), permitir guardar aunque la validación falle
        if ($soloSubiendoArchivos && !empty($videos_subidos)) {
            
            // Los videos ya se insertaron directamente arriba, solo necesitamos confirmar
            $success = 'Videos guardados correctamente (' . count($videos_subidos) . ' video(s))';
            
            // Redirigir para mostrar el éxito
            header('Location: index.php?page=configuracion&success=1');
            exit;
        } elseif ($soloSubiendoArchivos && !empty($galeria_fotos_subidas)) {
            
            // Las fotos ya se insertaron directamente arriba, solo necesitamos confirmar
            $success = 'Fotos guardadas correctamente (' . count($galeria_fotos_subidas) . ' foto(s))';
            
            // Redirigir para mostrar el éxito
            header('Location: index.php?page=configuracion&success=1');
            exit;
        }
    }
}

// Funciones auxiliares para procesar detalles adicionales
function procesarDetallesAdicionales($pdo, $eventoId, $eventoEspecificoId, $tipoEventoEspecifico, $tipoDetalle, $items) {
    // Obtener IDs existentes de relaciones
    $stmt = $pdo->prepare("
        SELECT id, detalle_id 
        FROM eventos_detalles_adicionales 
        WHERE evento_id = ? 
          AND evento_especifico_id = ? 
          AND tipo_evento_especifico = ? 
          AND tipo_detalle = ?
    ");
    $stmt->execute([$eventoId, $eventoEspecificoId, $tipoEventoEspecifico, $tipoDetalle]);
    $relacionesExistentes = [];
    while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
        $relacionesExistentes[$row['id']] = $row['detalle_id'];
    }
    
    $idsRecibidos = [];
    $tablaDetalle = '';
    $camposDetalle = [];
    
    switch ($tipoDetalle) {
        case 'hospedaje':
            $tablaDetalle = 'eventos_hospedaje';
            $camposDetalle = ['nombre_hotel', 'ubicacion_referencial', 'distancia_metros'];
            break;
        case 'alimentacion':
            $tablaDetalle = 'eventos_alimentacion';
            $camposDetalle = ['nombre_restaurante', 'direccion', 'whatsapp_reservar'];
            break;
        case 'transporte':
            $tablaDetalle = 'eventos_transporte';
            $camposDetalle = ['nombre', 'descripcion', 'contacto'];
            break;
        case 'otro':
            $tablaDetalle = 'eventos_otros_detalles';
            $camposDetalle = ['titulo', 'contenido'];
            break;
        default:
            return;
    }
    
    foreach ($items as $index => $item) {
        $detalleId = null;
        
        if (!empty($item['id'])) {
            // Actualizar detalle existente
            $camposUpdate = [];
            $valoresUpdate = [];
            foreach ($camposDetalle as $campo) {
                if (isset($item[$campo])) {
                    $camposUpdate[] = "`$campo` = ?";
                    $valoresUpdate[] = $item[$campo] ?: null;
                }
            }
            if (!empty($camposUpdate)) {
                $valoresUpdate[] = $item['id'];
                $stmt = $pdo->prepare("UPDATE `$tablaDetalle` SET " . implode(', ', $camposUpdate) . " WHERE id = ?");
                $stmt->execute($valoresUpdate);
            }
            $detalleId = $item['id'];
        } else {
            // Insertar nuevo detalle
            $camposInsert = [];
            $valoresInsert = [];
            $placeholders = [];
            foreach ($camposDetalle as $campo) {
                if (isset($item[$campo])) {
                    $camposInsert[] = "`$campo`";
                    $placeholders[] = "?";
                    $valoresInsert[] = $item[$campo] ?: null;
                }
            }
            if (!empty($camposInsert)) {
                $stmt = $pdo->prepare("INSERT INTO `$tablaDetalle` (" . implode(', ', $camposInsert) . ") VALUES (" . implode(', ', $placeholders) . ")");
                $stmt->execute($valoresInsert);
                $detalleId = $pdo->lastInsertId();
            }
        }
        
        if ($detalleId) {
            // Procesar relación
            if (!empty($item['relacion_id'])) {
                // Actualizar relación existente
                $stmt = $pdo->prepare("
                    UPDATE eventos_detalles_adicionales 
                    SET detalle_id = ?, orden = ? 
                    WHERE id = ? AND evento_id = ?
                ");
                $stmt->execute([$detalleId, $item['orden'] ?: $index, $item['relacion_id'], $eventoId]);
                $idsRecibidos[] = $item['relacion_id'];
            } else {
                // Insertar nueva relación
                $stmt = $pdo->prepare("
                    INSERT INTO eventos_detalles_adicionales 
                    (evento_id, evento_especifico_id, tipo_evento_especifico, tipo_detalle, detalle_id, orden, activo)
                    VALUES (?, ?, ?, ?, ?, ?, 1)
                ");
                $stmt->execute([$eventoId, $eventoEspecificoId, $tipoEventoEspecifico, $tipoDetalle, $detalleId, $item['orden'] ?: $index]);
                $idsRecibidos[] = $pdo->lastInsertId();
            }
            
            // Procesar botones de hospedaje
            if ($tipoDetalle === 'hospedaje' && !empty($item['botones']) && is_array($item['botones'])) {
                procesarHospedajeBotones($pdo, $detalleId, $item['botones']);
            }
        }
    }
    
    // Eliminar relaciones que ya no están
    $idsAEliminar = array_diff(array_keys($relacionesExistentes), $idsRecibidos);
    if (!empty($idsAEliminar)) {
        $placeholders = implode(',', array_fill(0, count($idsAEliminar), '?'));
        $stmt = $pdo->prepare("DELETE FROM eventos_detalles_adicionales WHERE id IN ($placeholders) AND evento_id = ?");
        $params = array_merge($idsAEliminar, [$eventoId]);
        $stmt->execute($params);
        
        // Eliminar detalles huérfanos
        $detallesIds = array_values(array_intersect_key($relacionesExistentes, array_flip($idsAEliminar)));
        if (!empty($detallesIds)) {
            $placeholders = implode(',', array_fill(0, count($detallesIds), '?'));
            $stmt = $pdo->prepare("DELETE FROM `$tablaDetalle` WHERE id IN ($placeholders)");
            $stmt->execute($detallesIds);
        }
    }
}

function procesarDetallesAdicionalesPDF($pdo, $eventoId, $eventoEspecificoId, $tipoEventoEspecifico, $tipoDetalle, $items) {
    // Similar a procesarDetallesAdicionales pero con manejo de archivos
    $stmt = $pdo->prepare("
        SELECT id, detalle_id 
        FROM eventos_detalles_adicionales 
        WHERE evento_id = ? 
          AND evento_especifico_id = ? 
          AND tipo_evento_especifico = ? 
          AND tipo_detalle = ?
    ");
    $stmt->execute([$eventoId, $eventoEspecificoId, $tipoEventoEspecifico, $tipoDetalle]);
    $relacionesExistentes = [];
    while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
        $relacionesExistentes[$row['id']] = $row['detalle_id'];
    }
    
    $idsRecibidos = [];
    
    foreach ($items as $index => $item) {
        $detalleId = null;
        $archivo = $item['archivo'] ?? '';
        
        // Manejar subida de archivo
        if (!empty($item['archivo_nuevo']) && $item['archivo_nuevo']['error'] === UPLOAD_ERR_OK) {
            $file = $item['archivo_nuevo'];
            $allowedTypes = ['application/pdf'];
            if (in_array($file['type'], $allowedTypes)) {
                $uploadDir = __DIR__ . '/../../assets/pdfs/detalles/';
                if (!is_dir($uploadDir)) {
                    mkdir($uploadDir, 0755, true);
                }
                $extension = pathinfo($file['name'], PATHINFO_EXTENSION);
                $filename = 'pdf_' . $eventoId . '_' . time() . '_' . $index . '.' . $extension;
                $filepath = $uploadDir . $filename;
                if (move_uploaded_file($file['tmp_name'], $filepath)) {
                    $archivo = 'assets/pdfs/detalles/' . $filename;
                }
            }
        }
        
        if (!empty($item['id'])) {
            // Actualizar
            $stmt = $pdo->prepare("UPDATE eventos_pdf_detalles SET titulo = ?, archivo = ? WHERE id = ?");
            $stmt->execute([$item['titulo'], $archivo ?: $item['archivo'], $item['id']]);
            $detalleId = $item['id'];
        } else {
            // Insertar
            if (!empty($archivo) || !empty($item['archivo'])) {
                $stmt = $pdo->prepare("INSERT INTO eventos_pdf_detalles (titulo, archivo) VALUES (?, ?)");
                $stmt->execute([$item['titulo'], $archivo ?: $item['archivo']]);
                $detalleId = $pdo->lastInsertId();
            }
        }
        
        if ($detalleId) {
            if (!empty($item['relacion_id'])) {
                $stmt = $pdo->prepare("UPDATE eventos_detalles_adicionales SET detalle_id = ?, orden = ? WHERE id = ? AND evento_id = ?");
                $stmt->execute([$detalleId, $item['orden'] ?: $index, $item['relacion_id'], $eventoId]);
                $idsRecibidos[] = $item['relacion_id'];
            } else {
                $stmt = $pdo->prepare("INSERT INTO eventos_detalles_adicionales (evento_id, evento_especifico_id, tipo_evento_especifico, tipo_detalle, detalle_id, orden, activo) VALUES (?, ?, ?, ?, ?, ?, 1)");
                $stmt->execute([$eventoId, $eventoEspecificoId, $tipoEventoEspecifico, $tipoDetalle, $detalleId, $item['orden'] ?: $index]);
                $idsRecibidos[] = $pdo->lastInsertId();
            }
        }
    }
    
    // Eliminar relaciones que ya no están
    $idsAEliminar = array_diff(array_keys($relacionesExistentes), $idsRecibidos);
    if (!empty($idsAEliminar)) {
        $placeholders = implode(',', array_fill(0, count($idsAEliminar), '?'));
        $stmt = $pdo->prepare("DELETE FROM eventos_detalles_adicionales WHERE id IN ($placeholders) AND evento_id = ?");
        $params = array_merge($idsAEliminar, [$eventoId]);
        $stmt->execute($params);
        
        $detallesIds = array_values(array_intersect_key($relacionesExistentes, array_flip($idsAEliminar)));
        if (!empty($detallesIds)) {
            $placeholders = implode(',', array_fill(0, count($detallesIds), '?'));
            $stmt = $pdo->prepare("DELETE FROM eventos_pdf_detalles WHERE id IN ($placeholders)");
            $stmt->execute($detallesIds);
        }
    }
}

function procesarHospedajeBotones($pdo, $hospedajeId, $botones) {
    $stmt = $pdo->prepare("SELECT id FROM eventos_hospedaje_botones WHERE hospedaje_id = ?");
    $stmt->execute([$hospedajeId]);
    $idsExistentes = [];
    while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
        $idsExistentes[] = $row['id'];
    }
    
    $idsRecibidos = [];
    foreach ($botones as $index => $boton) {
        if (!empty($boton['nombre_link']) && !empty($boton['tipo_valor'])) {
            // Verificar que tenga valor
            $tieneValor = !empty($boton['valor']);
            
            if ($tieneValor) {
                if (!empty($boton['id'])) {
                    $stmt = $pdo->prepare("UPDATE eventos_hospedaje_botones SET nombre_link = ?, tipo_valor = ?, valor = ?, orden = ? WHERE id = ?");
                    $stmt->execute([$boton['nombre_link'], $boton['tipo_valor'], $boton['valor'], $boton['orden'] ?: $index, $boton['id']]);
                    $idsRecibidos[] = $boton['id'];
                } else {
                    $stmt = $pdo->prepare("INSERT INTO eventos_hospedaje_botones (hospedaje_id, nombre_link, tipo_valor, valor, orden) VALUES (?, ?, ?, ?, ?)");
                    $stmt->execute([$hospedajeId, $boton['nombre_link'], $boton['tipo_valor'], $boton['valor'], $boton['orden'] ?: $index]);
                    $idsRecibidos[] = $pdo->lastInsertId();
                }
            }
        }
    }
    
    $idsAEliminar = array_diff($idsExistentes, $idsRecibidos);
    if (!empty($idsAEliminar)) {
        $placeholders = implode(',', array_fill(0, count($idsAEliminar), '?'));
        $stmt = $pdo->prepare("DELETE FROM eventos_hospedaje_botones WHERE id IN ($placeholders)");
        $stmt->execute($idsAEliminar);
    }
}

// Asegurar que el evento tenga el tipo permitido
$tipo_actual = $evento['tipo_evento'] ?? $tipo_permitido;

// Si el evento no tiene tipo o es diferente al permitido, actualizarlo
if (empty($evento['tipo_evento']) || $evento['tipo_evento'] !== $tipo_permitido) {
    // Actualizar el tipo del evento al permitido
    try {
        $stmt = $pdo->prepare("UPDATE eventos_base SET tipo_evento = ? WHERE id = ?");
        $stmt->execute([$tipo_permitido, $eventoId]);
        $evento['tipo_evento'] = $tipo_permitido;
        $tipo_actual = $tipo_permitido;
    } catch (Exception $e) {
        // Error silencioso, continuar con el tipo actual
    }
}
?>
<style>
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.page-header h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.tabs-wrapper {
    width: 100%;
    margin-bottom: 24px;
}

.tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 0;
    padding: 0 4px;
}

.tab-btn {
    padding: 10px 18px;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 14px;
    cursor: pointer;
    transition: var(--transition);
    position: relative;
    top: 1px;
}

.tab-btn:hover {
    color: var(--color-text-primary);
}

.tab-btn.active {
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
    border-color: var(--color-border);
    border-bottom: 1px solid var(--color-bg-secondary);
}

.tab-content {
    display: none;
}

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

.form-container {
    background: var(--color-bg-secondary);
    padding: 30px;
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    box-shadow: var(--shadow-md);
    width: 100%;
    border: 1px solid var(--color-border);
    border-top: none;
}
.form-group {
    margin-bottom: 20px;
}
label {
    display: block;
    margin-bottom: 5px;
    color: var(--color-text-primary);
    font-weight: 500;
}
input, select, textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    font-size: 16px;
}
textarea {
    min-height: 100px;
    resize: vertical;
}
.btn {
    padding: 12px 30px;
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: 16px;
}
.btn:hover {
    background: var(--color-primary-hover);
}
.alert {
    padding: 15px;
    border-radius: var(--border-radius);
    margin-bottom: 20px;
}
.alert-error {
    background: #fff5f5;
    color: #c53030;
    border: 1px solid #fed7d7;
}
.alert-success {
    background: #f0fff4;
    color: #22543d;
    border: 1px solid #c6f6d5;
}

/* Toast notifications */
#configuracion-toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 11000;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.configuracion-toast {
    min-width: 300px;
    max-width: 400px;
    padding: 14px 18px;
    border-radius: var(--border-radius);
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border: 1px solid var(--color-border);
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

.configuracion-toast.show {
    opacity: 1;
    transform: translateX(0);
}

.configuracion-toast-success {
    border-left: 4px solid #28a745;
    background: #f0fff4;
}

.configuracion-toast-error {
    border-left: 4px solid #dc3545;
    background: #fff5f5;
}

.configuracion-toast-icon {
    font-size: 18px;
    flex-shrink: 0;
    font-weight: bold;
}

.configuracion-toast-success .configuracion-toast-icon {
    color: #28a745;
}

.configuracion-toast-error .configuracion-toast-icon {
    color: #dc3545;
}

.configuracion-toast-message {
    flex: 1;
    line-height: 1.4;
}

.color-input {
    width: 100px;
    height: 40px;
}

.colores-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 10px;
}

.color-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.color-field label {
    font-size: 14px;
    margin-bottom: 0;
}

.color-field-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
}

.color-field-wrapper input[type="color"] {
    width: 60px;
    height: 60px;
    border-radius: var(--border-radius);
    border: 2px solid var(--color-border);
    cursor: pointer;
    padding: 2px;
}

.color-field-wrapper input[type="text"] {
    flex: 1;
    padding: 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    font-family: monospace;
    font-size: 14px;
}
.field-group {
    display: none;
}
.field-group.active {
    display: block;
}
.field-group h3 {
    margin: 24px 0 16px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--color-border);
    color: var(--color-text-primary);
    font-size: 18px;
}

/* Layout de campos en fila */
.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.form-row .form-group {
    margin-bottom: 0;
}

/* Mapa en modal */
.map-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
    padding: 20px;
}

.map-modal-overlay.show {
    opacity: 1;
    visibility: visible;
}

.map-modal {
    background: var(--color-bg-secondary);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    max-width: 800px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    transform: scale(0.9);
    transition: var(--transition);
    position: relative;
}

.map-modal-overlay.show .map-modal {
    transform: scale(1);
}

.map-modal-overlay.show .map-modal {
    transform: scale(1);
}

/* Estilos para el modal de asignación de videos */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-overlay[style*="display: flex"] {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background: var(--color-bg-primary);
    border-radius: var(--border-radius);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.modal-overlay[style*="display: flex"] .modal-content {
    transform: scale(1);
}

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

.modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.modal-close {
    background: none;
    border: none;
    font-size: 28px;
    color: var(--color-text-secondary);
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s;
}

.modal-close:hover {
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
}

.modal-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.modal-footer {
    padding: 20px;
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.invitado-video-item:hover {
    background: var(--color-bg-secondary);
}

.invitado-video-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.map-modal-header {
    padding: 20px;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.map-modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.map-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--color-text-secondary);
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius);
    transition: var(--transition);
}

.map-modal-close:hover {
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
}

.map-modal-body {
    padding: 20px;
}

#map {
    width: 100%;
    height: 400px;
    border-radius: var(--border-radius);
    border: 1px solid var(--color-border);
    margin-bottom: 15px;
}

.map-coordinates {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.map-coordinates input {
    font-family: monospace;
}

.btn-seleccionar-mapa {
    padding: 8px 16px;
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: 14px;
    transition: var(--transition);
    margin-top: 10px;
}

.btn-seleccionar-mapa:hover {
    background: var(--color-primary-hover);
}

.btn-agregar-itinerario {
    padding: 10px 20px;
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: var(--transition);
    margin-top: 15px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-agregar-itinerario:hover {
    background: var(--color-primary-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.form-actions {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.map-coordinates-display {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 10px;
}

.map-coordinates-display input {
    font-family: monospace;
    background: var(--color-bg-primary);
}

/* Organización de campos en grid */
.organizacion-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.organizacion-grid .form-group {
    margin-bottom: 0;
}

.organizacion-grid-full {
    grid-column: 1 / -1;
}

/* Estilos para Itinerario */
.itinerario-item {
    margin-bottom: 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    overflow: hidden;
    background: var(--color-bg-secondary);
}

.itinerario-item-header {
    padding: 12px 16px;
    background: var(--color-bg-primary);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: var(--transition);
    user-select: none;
}

.itinerario-item-header:hover {
    background: var(--color-border);
}

.itinerario-item-title {
    font-weight: 500;
    color: var(--color-text-primary);
    flex: 1;
}

.itinerario-item-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.itinerario-btn-remove {
    background: var(--color-danger);
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    padding: 0;
}

.itinerario-btn-remove:hover {
    background: #c82333;
    transform: scale(1.1);
}

.itinerario-toggle-icon {
    color: var(--color-text-secondary);
    font-size: 12px;
    transition: transform 0.3s ease;
}

.itinerario-item.collapsed .itinerario-toggle-icon {
    transform: rotate(-90deg);
}

.itinerario-item-content {
    padding: 20px;
    display: block;
    background: var(--color-bg-secondary);
}

.itinerario-item.collapsed .itinerario-item-content {
    display: none;
}

/* Estilos para Dress Code (similar a itinerario) */
.dresscode-item {
    margin-bottom: 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    overflow: hidden;
    background: var(--color-bg-secondary);
}

.dresscode-item-header {
    padding: 12px 16px;
    background: var(--color-bg-primary);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: var(--transition);
    user-select: none;
}

.dresscode-item-header:hover {
    background: var(--color-border);
}

.dresscode-item-title {
    font-weight: 500;
    color: var(--color-text-primary);
    flex: 1;
}

.dresscode-item-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dresscode-btn-remove {
    background: var(--color-danger);
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    padding: 0;
}

.dresscode-btn-remove:hover {
    background: #c82333;
    transform: scale(1.1);
}

.dresscode-toggle-icon {
    color: var(--color-text-secondary);
    font-size: 12px;
    transition: transform 0.3s ease;
}

.dresscode-item.collapsed .dresscode-toggle-icon {
    transform: rotate(-90deg);
}

.dresscode-item-content {
    padding: 20px;
    display: block;
    background: var(--color-bg-secondary);
}

/* Estilos para Colores Reservados del Dress Code */
.colores-reservados-section {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 2px solid var(--color-border);
}

.colores-reservados-section h4 {
    margin: 0 0 15px 0;
    font-size: 16px;
    color: var(--color-text-primary);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

.colores-reservados-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 15px;
}

.color-reservado-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    transition: all 0.2s;
}

.color-reservado-item:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
}

.color-reservado-preview {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 2px solid var(--color-border);
    cursor: pointer;
    transition: transform 0.2s;
}

.color-reservado-preview:hover {
    transform: scale(1.1);
}

.color-reservado-input {
    width: 90px;
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    font-family: monospace;
    font-size: 13px;
    text-transform: uppercase;
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
}

.color-reservado-nombre {
    width: 120px;
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    font-size: 13px;
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
}

.color-reservado-eliminar {
    background: var(--color-danger);
    color: white;
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    margin-left: 5px;
}

.color-reservado-eliminar:hover {
    background: #c82333;
    transform: scale(1.1);
}

.btn-agregar-color {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-agregar-color:hover {
    background: var(--color-text-primary);
    color: var(--color-bg-primary);
    border-color: var(--color-text-primary);
}

.colores-reservados-info {
    font-size: 13px;
    color: var(--color-text-secondary);
    margin-top: 10px;
    padding: 10px;
    background: var(--color-bg-primary);
    border-radius: var(--border-radius);
    border-left: 3px solid var(--color-primary);
}

.dresscode-item.collapsed .dresscode-item-content {
    display: none;
}

/* Estilos para Obsequios (Cuentas Bancarias y Sobre Cerrado) */
.obsequio-section {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: 20px;
}

.obsequio-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--color-border);
}

.obsequio-section-header h3 {
    color: var(--color-text-primary);
    font-size: 16px;
}

.btn-agregar-obsequio {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: 13px;
    transition: var(--transition);
}

.btn-agregar-obsequio:hover {
    background: var(--color-border);
}

.obsequio-item {
    margin-bottom: 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    background: var(--color-bg-primary);
    overflow: hidden;
}

.obsequio-item-header {
    padding: 12px 16px;
    background: var(--color-bg-primary);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: var(--transition);
}

.obsequio-item-header:hover {
    background: var(--color-border);
}

.obsequio-item-title {
    font-weight: 500;
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.obsequio-chevron {
    transition: transform 0.2s ease;
}

.obsequio-item.collapsed .obsequio-chevron {
    transform: rotate(-90deg);
}

.btn-eliminar-obsequio {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    color: var(--color-text-secondary);
    transition: var(--transition);
}

.btn-eliminar-obsequio:hover {
    background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
}

.obsequio-item-content {
    padding: 20px;
    border-top: 1px solid var(--color-border);
}

.obsequio-item.collapsed .obsequio-item-content {
    display: none;
}

.obsequio-empty-msg {
    text-align: center;
    color: var(--color-text-secondary);
    padding: 20px;
    font-style: italic;
}

/* Toggle Switch para Sobre Cerrado */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.3s;
    border-radius: 26px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
}

.toggle-switch input:checked + .toggle-slider {
    background-color: var(--color-primary);
}

.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(24px);
}

/* Estilos para Detalles Adicionales - Sub-tabs */
.sub-tabs-wrapper {
    margin-bottom: 20px;
}

.sub-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--color-border);
    padding-bottom: 0;
}

.sub-tab-btn {
    padding: 10px 18px;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 14px;
    cursor: pointer;
    transition: var(--transition);
    position: relative;
    top: 1px;
}

.sub-tab-btn:hover {
    color: var(--color-text-primary);
}

.sub-tab-btn.active {
    background: var(--color-bg-secondary);
    color: var(--color-primary);
    border-color: var(--color-border);
    border-bottom: 1px solid var(--color-bg-secondary);
    font-weight: 500;
}

.sub-tab-content {
    display: none;
}

.sub-tab-content.active {
    display: block;
}

/* Estilos para acordeones de detalles adicionales */
.detalle-item {
    margin-bottom: 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    overflow: hidden;
    background: var(--color-bg-secondary);
}

.detalle-header {
    padding: 12px 16px;
    background: var(--color-bg-primary);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: var(--transition);
    user-select: none;
}

.detalle-header:hover {
    background: var(--color-border);
}

.detalle-title {
    font-weight: 500;
    color: var(--color-text-primary);
    flex: 1;
}

.detalle-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.detalle-btn-remove {
    background: var(--color-danger);
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    padding: 0;
}

.detalle-btn-remove:hover {
    background: #c82333;
    transform: scale(1.1);
}

.detalle-toggle-icon {
    color: var(--color-text-secondary);
    font-size: 12px;
    transition: transform 0.3s ease;
}

.detalle-item.collapsed .detalle-toggle-icon {
    transform: rotate(-90deg);
}

.detalle-content {
    padding: 20px;
    display: block;
    background: var(--color-bg-secondary);
}

.detalle-item.collapsed .detalle-content {
    display: none;
}

/* Estilos para botones dentro de hospedaje */
.hospedaje-boton-item {
    margin-bottom: 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    overflow: hidden;
    background: var(--color-bg-primary);
    padding: 12px 16px;
}

.hospedaje-boton-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.hospedaje-boton-title {
    font-weight: 500;
    color: var(--color-text-primary);
    flex: 1;
}

.hospedaje-boton-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hospedaje-boton-btn-remove {
    background: var(--color-danger);
    color: white;
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    padding: 0;
}

.hospedaje-boton-btn-remove:hover {
    background: #c82333;
    transform: scale(1.1);
}

.hospedaje-boton-toggle-icon {
    color: var(--color-text-secondary);
    font-size: 10px;
    transition: transform 0.3s ease;
}

.hospedaje-boton-item.collapsed .hospedaje-boton-toggle-icon {
    transform: rotate(-90deg);
}

.hospedaje-boton-content {
    padding: 15px 0 0 0;
    display: block;
}

.hospedaje-boton-item.collapsed .hospedaje-boton-content {
    display: none;
}

/* Estilos para Galería */
.galeria-foto-item {
    transition: var(--transition);
}

.galeria-foto-item.marcado-eliminar {
    opacity: 0.5;
    border-color: var(--color-danger);
    background: rgba(220, 53, 69, 0.1);
}

.galeria-btn-eliminar:hover {
    background: rgba(220, 53, 69, 1) !important;
    transform: scale(1.1);
}

/* Estilos para Videos */
.videos-video-item {
    transition: var(--transition);
}

.videos-video-item.marcado-eliminar {
    opacity: 0.5;
    border-color: var(--color-danger);
    background: rgba(220, 53, 69, 0.1);
}

.videos-btn-eliminar:hover {
    background: rgba(220, 53, 69, 1) !important;
    transform: scale(1.1);
}

.galeria-nueva-foto-campos {
    margin-bottom: 15px;
    padding: 12px;
    background: var(--color-bg-primary);
    border-radius: var(--border-radius);
    border: 1px solid var(--color-border);
}

.galeria-nueva-foto-campos label {
    font-size: 13px;
    margin-bottom: 4px;
}

.galeria-nueva-foto-campos input,
.galeria-nueva-foto-campos textarea {
    font-size: 14px;
    padding: 6px;
}
</style>

<div class="page-header">
    <h2 class="card-title" style="margin-bottom: 0;">Configuración del Evento</h2>
</div>

<div class="tabs-wrapper">
    <div class="tabs">
        <button type="button" class="tab-btn active" data-tab="tab-general">General</button>
        <button type="button" class="tab-btn" data-tab="tab-organizacion">Organización</button>
        <button type="button" class="tab-btn" data-tab="tab-dresscode">Dress Code</button>
        <button type="button" class="tab-btn" data-tab="tab-obsequio">Obsequio</button>
        <button type="button" class="tab-btn" data-tab="tab-detalles-adicionales">Det. Adicionales</button>
        <button type="button" class="tab-btn" data-tab="tab-branding">Branding</button>
        <button type="button" class="tab-btn" data-tab="tab-galeria">Galería</button>
        <button type="button" class="tab-btn" data-tab="tab-videos">Videos</button>
    </div>

    <!-- Toast Container -->
    <div id="configuracion-toast-container"></div>

    <div class="form-container">
    <form method="POST" action="" id="formEvento" enctype="multipart/form-data" novalidate>
        <!-- Tipo de Evento (oculto, fijo según configuración del sistema) -->
        <input type="hidden" id="tipo_evento" name="tipo_evento" value="<?php echo htmlspecialchars($tipo_permitido); ?>">
        
        <!-- TAB GENERAL -->
        <div id="tab-general" class="tab-content active">
            <!-- Información del tipo de evento (solo informativo) -->
            <div class="form-group" style="background: var(--color-bg-primary); padding: 12px; border-radius: var(--border-radius); margin-bottom: 20px;">
                <label style="margin-bottom: 4px; font-size: 14px; color: var(--color-text-secondary);">Tipo de Evento del Sistema</label>
                <div style="font-size: 16px; font-weight: 600; color: var(--color-text-primary); text-transform: capitalize;">
                    <?php 
                    $tipos_nombres = [
                        'boda' => 'Boda',
                        'cumpleaños' => 'Cumpleaños',
                        'quinceañera' => 'Quinceañera',
                        'bautizo' => 'Bautizo',
                        'reunion' => 'Reunión',
                        'evento_social' => 'Evento Social'
                    ];
                    echo $tipos_nombres[$tipo_permitido] ?? ucfirst($tipo_permitido);
                    ?>
                </div>
            </div>
            
            <!-- Campos Comunes -->
            <div class="form-row">
            <div class="form-group">
                <label for="fecha_evento">Fecha del Evento *</label>
                <input type="date" id="fecha_evento" name="fecha_evento" required 
                       value="<?php echo $evento['fecha_evento'] ?? ''; ?>">
            </div>
            
            <div class="form-group">
                <label for="hora_evento">Hora del Evento</label>
                <input type="time" id="hora_evento" name="hora_evento" 
                       value="<?php echo $evento['hora_evento'] ?? ''; ?>">
                </div>
            </div>
            
            <div class="form-group">
                <label for="lugar_evento">Lugar del Evento *</label>
                <input type="text" id="lugar_evento" name="lugar_evento" required 
                       value="<?php echo htmlspecialchars($evento['lugar_evento'] ?? ''); ?>">
            </div>
            
            <div class="form-row">
                <div class="form-group" style="flex: 1;">
                    <label for="direccion_evento">Ubicación en el Mapa (Latitud, Longitud) *</label>
                    <button type="button" class="btn-seleccionar-mapa" onclick="abrirModalMapa()">
                        Seleccionar en el mapa
                    </button>
                    <div class="map-coordinates-display">
                        <div class="form-group" style="margin-bottom: 0;">
                            <label for="latitud">Latitud</label>
                            <input type="text" id="latitud" name="latitud" readonly 
                                   value="<?php 
                                       $coords = !empty($evento['direccion_evento']) ? explode(',', $evento['direccion_evento']) : ['', ''];
                                       echo htmlspecialchars(trim($coords[0] ?? '')); 
                                   ?>">
                        </div>
                        <div class="form-group" style="margin-bottom: 0;">
                            <label for="longitud">Longitud</label>
                            <input type="text" id="longitud" name="longitud" readonly 
                                   value="<?php 
                                       echo htmlspecialchars(trim($coords[1] ?? '')); 
                                   ?>">
                        </div>
                    </div>
                    <input type="hidden" id="direccion_evento" name="direccion_evento" 
                           value="<?php echo htmlspecialchars($evento['direccion_evento'] ?? ''); ?>">
                </div>
                
                <div class="form-group" style="flex: 1; margin-left: 20px;">
                    <label for="mapa_referencia">Mapa Referencial</label>
                    <input type="file" id="mapa_referencia" name="mapa_referencia" accept="image/jpeg,image/jpg,image/png,image/webp,image/gif">
                    <small style="display: block; margin-top: 5px; color: var(--color-text-secondary);">
                        Suba una imagen del mapa referencial del evento. Formatos permitidos: JPG, PNG, WEBP, GIF. Tamaño máximo: 5MB.
                    </small>
                    <?php if (!empty($evento['mapa_referencia'])): ?>
                        <div style="margin-top: 10px;">
                            <p style="font-size: 14px; color: var(--color-text-secondary); margin-bottom: 8px;">Mapa actual:</p>
                            <img src="<?php echo htmlspecialchars((defined('BASE_URL') ? rtrim(BASE_URL, '/') : '') . '/' . ltrim($evento['mapa_referencia'] ?? '', '/')); ?>" 
                                 alt="Mapa Referencial" 
                                 style="max-width: 100%; max-height: 200px; border: 1px solid var(--color-border); border-radius: var(--border-radius);">
                        </div>
                    <?php endif; ?>
                </div>
            </div>
            
            <!-- Campos Comunes (siempre visibles) -->
            <div class="form-group">
                <label for="descripcion">Descripción</label>
                <textarea id="descripcion" name="descripcion"><?php echo htmlspecialchars($evento['descripcion'] ?? ''); ?></textarea>
            </div>
            
            <div class="form-group">
                <label for="mensaje_personalizado">Mensaje Personalizado</label>
                <textarea id="mensaje_personalizado" name="mensaje_personalizado"><?php echo htmlspecialchars($evento['mensaje_personalizado'] ?? ''); ?></textarea>
            </div>
            
            <!-- Foto Principal (para el fondo del resumen) -->
            <div class="form-group">
                <label for="foto_principal">Foto Principal del Evento</label>
                <input type="file" id="foto_principal" name="foto_principal" accept="image/jpeg,image/jpg,image/png,image/webp,image/gif">
                <small style="display: block; margin-top: 5px; color: var(--color-text-secondary);">
                    Esta foto se usará como fondo en el resumen del evento. Formatos permitidos: JPG, PNG, WEBP, GIF. Tamaño máximo: 5MB.
                </small>
                <?php if (!empty($evento['foto_principal'])): ?>
                    <div style="margin-top: 10px;">
                        <p style="font-size: 14px; color: var(--color-text-secondary); margin-bottom: 8px;">Foto actual:</p>
                        <img src="<?php echo htmlspecialchars((defined('BASE_URL') ? rtrim(BASE_URL, '/') : '') . '/' . ltrim($evento['foto_principal'], '/')); ?>" 
                             alt="Foto actual" 
                             style="max-width: 300px; max-height: 200px; border-radius: var(--border-radius); border: 1px solid var(--color-border);">
                    </div>
                <?php endif; ?>
            </div>
        </div>
        
        <!-- TAB ORGANIZACIÓN -->
        <div id="tab-organizacion" class="tab-content">
        <?php
        // Determinar qué campos mostrar según el tipo de evento permitido
        // Mapear 'cumpleanos' (sin ñ) a 'cumpleaños' (con ñ) para compatibilidad
        $tipo_mostrar = $tipo_permitido;
        if ($tipo_mostrar === 'cumpleanos') {
            $tipo_mostrar = 'cumpleaños';
        }
        ?>
        
        <!-- Campos Específicos de BODA -->
        <div class="field-group <?php echo ($tipo_mostrar === 'boda') ? 'active' : ''; ?>" id="campos-boda">
            <h3>Información de la Boda</h3>
            
            <!-- Novios -->
            <div class="form-row">
            <div class="form-group">
                <label for="nombre_novia">Nombre de la Novia *</label>
                <input type="text" id="nombre_novia" name="nombre_novia" 
                       value="<?php echo htmlspecialchars($evento['nombre_novia'] ?? ''); ?>">
            </div>
            
            <div class="form-group">
                <label for="nombre_novio">Nombre del Novio *</label>
                <input type="text" id="nombre_novio" name="nombre_novio" 
                       value="<?php echo htmlspecialchars($evento['nombre_novio'] ?? ''); ?>">
                </div>
            </div>
            
            <!-- Padres de la Novia -->
            <h4 style="margin: 24px 0 12px 0; font-size: 16px; color: var(--color-text-primary); font-weight: 600;">Padres de la Novia</h4>
            <div class="form-row">
            <div class="form-group">
                    <label for="padre_novia">Padre</label>
                <input type="text" id="padre_novia" name="padre_novia" 
                       value="<?php echo htmlspecialchars($evento['padre_novia'] ?? ''); ?>">
            </div>
            
            <div class="form-group">
                    <label for="madre_novia">Madre</label>
                <input type="text" id="madre_novia" name="madre_novia" 
                       value="<?php echo htmlspecialchars($evento['madre_novia'] ?? ''); ?>">
                </div>
            </div>
            
            <!-- Padres del Novio -->
            <h4 style="margin: 24px 0 12px 0; font-size: 16px; color: var(--color-text-primary); font-weight: 600;">Padres del Novio</h4>
            <div class="form-row">
            <div class="form-group">
                    <label for="padre_novio">Padre</label>
                <input type="text" id="padre_novio" name="padre_novio" 
                       value="<?php echo htmlspecialchars($evento['padre_novio'] ?? ''); ?>">
            </div>
            
            <div class="form-group">
                    <label for="madre_novio">Madre</label>
                <input type="text" id="madre_novio" name="madre_novio" 
                       value="<?php echo htmlspecialchars($evento['madre_novio'] ?? ''); ?>">
                </div>
            </div>
            
            <!-- Padrinos -->
            <h4 style="margin: 24px 0 12px 0; font-size: 16px; color: var(--color-text-primary); font-weight: 600;">Padrinos de Boda</h4>
            <div class="form-row">
            <div class="form-group">
                    <label for="padrino_boda">Padrino</label>
                <input type="text" id="padrino_boda" name="padrino_boda" 
                       value="<?php echo htmlspecialchars($evento['padrino_boda'] ?? ''); ?>">
            </div>
            
            <div class="form-group">
                    <label for="madrina_boda">Madrina</label>
                <input type="text" id="madrina_boda" name="madrina_boda" 
                       value="<?php echo htmlspecialchars($evento['madrina_boda'] ?? ''); ?>">
                </div>
            </div>
        </div>
        
        <!-- Campos Específicos de CUMPLEAÑOS -->
        <div class="field-group <?php echo ($tipo_mostrar === 'cumpleaños') ? 'active' : ''; ?>" id="campos-cumpleaños">
            <h3 class="organizacion-grid-full">Información del Cumpleaños</h3>
            
            <div class="form-group">
                <label for="nombre_homenajeado">Nombre del Homenajeado *</label>
                <input type="text" id="nombre_homenajeado" name="nombre_homenajeado" 
                       value="<?php echo htmlspecialchars($evento['nombre_homenajeado'] ?? ''); ?>">
            </div>
            
            <div class="form-group">
                <label for="edad">Edad</label>
                <input type="number" id="edad" name="edad" min="1" max="150" 
                       value="<?php echo $evento['edad'] ?? ''; ?>">
            </div>
            
            <div class="form-group">
                <label for="anos_a_cumplir">Número de años a cumplir</label>
                <input type="number" id="anos_a_cumplir" name="anos_a_cumplir" min="1" max="150" 
                       value="<?php echo $evento['anos_a_cumplir'] ?? ''; ?>">
            </div>
        </div>
        
        <!-- Campos Específicos de QUINCEAÑERA -->
        <div class="field-group <?php echo ($tipo_mostrar === 'quinceañera') ? 'active' : ''; ?>" id="campos-quinceañera">
            <h3 class="organizacion-grid-full">Información de la Quinceañera</h3>
            
            <div class="form-group">
                <label for="nombre_quinceanera">Nombre de la Quinceañera *</label>
                <input type="text" id="nombre_quinceanera" name="nombre_quinceanera" 
                       value="<?php echo htmlspecialchars($evento['nombre_quinceanera'] ?? ''); ?>">
            </div>
            
            <div class="form-group">
                <label for="padre_quinceanera">Padre</label>
                <input type="text" id="padre_quinceanera" name="padre_quinceanera" 
                       value="<?php echo htmlspecialchars($evento['padre_quinceanera'] ?? ''); ?>">
            </div>
            
            <div class="form-group">
                <label for="madre_quinceanera">Madre</label>
                <input type="text" id="madre_quinceanera" name="madre_quinceanera" 
                       value="<?php echo htmlspecialchars($evento['madre_quinceanera'] ?? ''); ?>">
            </div>
        </div>
        
        <!-- Campos Específicos de BAUTIZO -->
        <div class="field-group <?php echo ($tipo_mostrar === 'bautizo') ? 'active' : ''; ?>" id="campos-bautizo">
            <h3 class="organizacion-grid-full">Información del Bautizo</h3>
            
            <div class="form-group">
                <label for="nombre_bautizado">Bautizado/a *</label>
                <input type="text" id="nombre_bautizado" name="nombre_bautizado" 
                       value="<?php echo htmlspecialchars($evento['nombre_bautizado'] ?? ''); ?>">
            </div>
            
            <div class="form-group">
                <label for="padre_bautizo">Padre</label>
                <input type="text" id="padre_bautizo" name="padre_bautizo" 
                       value="<?php echo htmlspecialchars($evento['padre_bautizo'] ?? ''); ?>">
            </div>
            
            <div class="form-group">
                <label for="madre_bautizo">Madre</label>
                <input type="text" id="madre_bautizo" name="madre_bautizo" 
                       value="<?php echo htmlspecialchars($evento['madre_bautizo'] ?? ''); ?>">
            </div>
            
            <div class="form-group">
                <label for="padrino_bautizo">Padrino</label>
                <input type="text" id="padrino_bautizo" name="padrino_bautizo" 
                       value="<?php echo htmlspecialchars($evento['padrino_bautizo'] ?? ''); ?>">
            </div>
            
            <div class="form-group">
                <label for="madrina_bautizo">Madrina</label>
                <input type="text" id="madrina_bautizo" name="madrina_bautizo" 
                       value="<?php echo htmlspecialchars($evento['madrina_bautizo'] ?? ''); ?>">
            </div>
        </div>
        
        <!-- Campos Específicos de REUNIÓN y EVENTO SOCIAL -->
        <div class="field-group <?php echo (in_array($tipo_mostrar, ['reunion', 'evento_social'])) ? 'active' : ''; ?>" id="campos-reunion">
            <h3 class="organizacion-grid-full">Información del Evento</h3>
            
            <div class="form-group">
                <label for="nombre_evento_social">Nombre del Evento *</label>
                <input type="text" id="nombre_evento_social" name="nombre_evento_social" 
                       value="<?php echo htmlspecialchars(decodeEntidadesTexto($evento['nombre_evento_social'] ?? '')); ?>">
            </div>
            
            <div class="form-group">
                <label for="nombre_organizador">Organizador</label>
                <input type="text" id="nombre_organizador" name="nombre_organizador" 
                       value="<?php echo htmlspecialchars(decodeEntidadesTexto($evento['nombre_organizador'] ?? '')); ?>">
            </div>
        </div>
        
        <!-- ITINERARIO (para todos los tipos de evento) -->
        <div class="form-group" style="margin-top: 40px; padding-top: 30px; border-top: 2px solid var(--color-border);">
            <label for="tiene_itinerario">¿Tiene Itinerario?</label>
            <select id="tiene_itinerario" name="tiene_itinerario" onchange="toggleItinerario()" style="max-width: 200px;">
                <option value="0" <?php echo (!($evento['tiene_itinerario'] ?? 0)) ? 'selected' : ''; ?>>No</option>
                <option value="1" <?php echo (($evento['tiene_itinerario'] ?? 0)) ? 'selected' : ''; ?>>Sí</option>
            </select>
        </div>
        
        <div id="itinerario-container" style="display: <?php echo (($evento['tiene_itinerario'] ?? 0)) ? 'block' : 'none'; ?>; margin-top: 20px;">
            <h4 style="margin: 0 0 15px 0; font-size: 16px; color: var(--color-text-primary); font-weight: 600;">Itinerario del Evento</h4>
            
            <div id="itinerario-items">
                <?php if (!empty($itinerario)): ?>
                    <?php foreach ($itinerario as $index => $item): ?>
                        <div class="itinerario-item" data-index="<?php echo $index; ?>">
                            <div class="itinerario-item-header" onclick="toggleItinerarioItem(<?php echo $index; ?>)">
                                <span class="itinerario-item-title">
                                    <?php echo htmlspecialchars($item['nombre'] ?? 'Item ' . ($index + 1)); ?>
                                </span>
                                <span class="itinerario-item-actions">
                                    <button type="button" class="itinerario-btn-remove" onclick="event.stopPropagation(); eliminarItinerarioItem(<?php echo $index; ?>);" title="Eliminar">
                                        ×
                                    </button>
                                    <span class="itinerario-toggle-icon">▼</span>
                                </span>
                            </div>
                            <div class="itinerario-item-content" id="itinerario-content-<?php echo $index; ?>">
                                <input type="hidden" name="itinerario[<?php echo $index; ?>][id]" value="<?php echo $item['id']; ?>">
                                <input type="hidden" name="itinerario[<?php echo $index; ?>][orden]" value="<?php echo $index; ?>" class="itinerario-orden">
                                
                                <div class="form-row">
                                    <div class="form-group">
                                        <label>Fecha *</label>
                                        <input type="date" name="itinerario[<?php echo $index; ?>][fecha]" 
                                               value="<?php echo htmlspecialchars($item['fecha'] ?? ''); ?>" required>
                                    </div>
                                    <div class="form-group">
                                        <label>Hora</label>
                                        <input type="time" name="itinerario[<?php echo $index; ?>][hora]" 
                                               value="<?php echo htmlspecialchars($item['hora'] ?? ''); ?>">
                                    </div>
                                </div>
                                
                                <div class="form-group">
                                    <label>Nombre del Evento/Actividad *</label>
                                    <input type="text" name="itinerario[<?php echo $index; ?>][nombre]" 
                                           value="<?php echo htmlspecialchars($item['nombre'] ?? ''); ?>" 
                                           required
                                           onchange="actualizarTituloItinerario(<?php echo $index; ?>, this.value)">
                                </div>
                                
                                <div class="form-group">
                                    <label>Descripción</label>
                                    <textarea name="itinerario[<?php echo $index; ?>][descripcion]" rows="3"><?php echo htmlspecialchars($item['descripcion'] ?? ''); ?></textarea>
                                </div>
                            </div>
                        </div>
                    <?php endforeach; ?>
                <?php endif; ?>
            </div>
            
            <button type="button" class="btn-agregar-itinerario" onclick="agregarItinerarioItem()">
                <span>+</span>
                <span>Agregar Nuevo Itinerario</span>
            </button>
        </div>
        
        </div> <!-- fin tab-organizacion -->
        
        <!-- TAB DRESS CODE -->
        <div id="tab-dresscode" class="tab-content">
            <div class="form-group">
                <label for="tiene_dresscode">¿Tiene Dress Code?</label>
                <select id="tiene_dresscode" name="tiene_dresscode" onchange="toggleDresscode()" style="max-width: 200px;">
                    <option value="0" <?php echo (!($evento['tiene_dresscode'] ?? 0)) ? 'selected' : ''; ?>>No</option>
                    <option value="1" <?php echo (($evento['tiene_dresscode'] ?? 0)) ? 'selected' : ''; ?>>Sí</option>
                </select>
            </div>
            
            <div id="dresscode-container" style="display: <?php echo (($evento['tiene_dresscode'] ?? 0)) ? 'block' : 'none'; ?>; margin-top: 20px;">
                <h4 style="margin: 0 0 15px 0; font-size: 16px; color: var(--color-text-primary); font-weight: 600;">Opciones de Dress Code</h4>
                
                <div id="dresscode-items">
                    <?php if (!empty($dresscode)): ?>
                        <?php foreach ($dresscode as $index => $item): ?>
                            <div class="dresscode-item" data-index="<?php echo $index; ?>">
                                <div class="dresscode-item-header" onclick="toggleDresscodeItem(<?php echo $index; ?>)">
                                    <span class="dresscode-item-title">
                                        <?php echo htmlspecialchars($item['nombre_opcion'] ?? 'Opción ' . ($index + 1)); ?>
                                    </span>
                                    <span class="dresscode-item-actions">
                                        <button type="button" class="dresscode-btn-remove" onclick="event.stopPropagation(); eliminarDresscodeItem(<?php echo $index; ?>);" title="Eliminar">
                                            ×
                                        </button>
                                        <span class="dresscode-toggle-icon">▼</span>
                                    </span>
                                </div>
                                <div class="dresscode-item-content" id="dresscode-content-<?php echo $index; ?>">
                                    <input type="hidden" name="dresscode[<?php echo $index; ?>][id]" value="<?php echo $item['id']; ?>">
                                    <input type="hidden" name="dresscode[<?php echo $index; ?>][orden]" value="<?php echo $index; ?>" class="dresscode-orden">
                                    
                                    <div class="form-group">
                                        <label>Nombre de la Opción *</label>
                                        <input type="text" name="dresscode[<?php echo $index; ?>][nombre_opcion]" 
                                               value="<?php echo htmlspecialchars($item['nombre_opcion'] ?? ''); ?>" 
                                               required
                                               placeholder="Ej: Vestido largo, Traje formal, Color azul"
                                               onchange="actualizarTituloDresscode(<?php echo $index; ?>, this.value)">
                                    </div>
                                    
                                    <div class="form-group">
                                        <label>Tipo *</label>
                                        <select name="dresscode[<?php echo $index; ?>][tipo]" 
                                                required
                                                onchange="cambiarTipoDresscode(<?php echo $index; ?>, this.value)">
                                            <option value="">Seleccione...</option>
                                            <option value="link_pinterest" <?php echo ($item['tipo'] === 'link_pinterest') ? 'selected' : ''; ?>>Link de Pinterest</option>
                                            <option value="imagen" <?php echo ($item['tipo'] === 'imagen') ? 'selected' : ''; ?>>Imagen</option>
                                        </select>
                                    </div>
                                    
                                    <div class="dresscode-field-link" id="dresscode-link-<?php echo $index; ?>" style="display: <?php echo ($item['tipo'] === 'link_pinterest') ? 'block' : 'none'; ?>;">
                                        <div class="form-group">
                                            <label>URL de Pinterest *</label>
                                            <input type="url" 
                                                   name="<?php echo ($item['tipo'] === 'link_pinterest') ? 'dresscode['.$index.'][valor]' : 'dresscode_link_valor_disabled['.$index.']'; ?>" 
                                                   value="<?php echo ($item['tipo'] === 'link_pinterest') ? htmlspecialchars($item['valor'] ?? '') : ''; ?>" 
                                                   placeholder="https://www.pinterest.com/..."
                                                   <?php echo ($item['tipo'] !== 'link_pinterest') ? 'disabled' : ''; ?>>
                                        </div>
                                    </div>
                                    
                                    <div class="dresscode-field-imagen" id="dresscode-imagen-<?php echo $index; ?>" style="display: <?php echo ($item['tipo'] === 'imagen') ? 'block' : 'none'; ?>;">
                                        <div class="form-group">
                                            <label>Imagen</label>
                                            <input type="file" name="dresscode_imagen[<?php echo $index; ?>]" accept="image/jpeg,image/jpg,image/png,image/webp,image/gif">
                                            <input type="hidden" 
                                                   name="<?php echo ($item['tipo'] === 'imagen') ? 'dresscode['.$index.'][valor]' : 'dresscode_imagen_valor_disabled['.$index.']'; ?>" 
                                                   value="<?php echo ($item['tipo'] === 'imagen') ? htmlspecialchars($item['valor'] ?? '') : ''; ?>" 
                                                   class="dresscode-imagen-valor"
                                                   <?php echo ($item['tipo'] !== 'imagen') ? 'disabled' : ''; ?>>
                                            <?php if ($item['tipo'] === 'imagen' && !empty($item['valor'])): ?>
                                                <div style="margin-top: 10px;">
                                                    <p style="font-size: 14px; color: var(--color-text-secondary); margin-bottom: 8px;">Imagen actual:</p>
                                                    <img src="<?php echo htmlspecialchars((defined('BASE_URL') ? rtrim(BASE_URL, '/') : '') . '/' . ltrim($item['valor'] ?? '', '/')); ?>" 
                                                         alt="Dress code" 
                                                         style="max-width: 200px; max-height: 150px; border-radius: var(--border-radius); border: 1px solid var(--color-border);">
                                                </div>
                                            <?php endif; ?>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        <?php endforeach; ?>
                    <?php endif; ?>
                </div>
                
                <button type="button" class="btn-agregar-itinerario" onclick="agregarDresscodeItem()">
                    <span>+</span>
                    <span>Agregar Nueva Opción</span>
                </button>
                
                <!-- Sección de Colores Reservados -->
                <div class="colores-reservados-section">
                    <h4>
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="vertical-align: middle;">
                            <circle cx="12" cy="12" r="10"/>
                            <circle cx="12" cy="12" r="3"/>
                            <path d="M12 2v4M12 18v4M2 12h4M18 12h4"/>
                        </svg>
                        Colores Reservados
                    </h4>
                    <p style="font-size: 14px; color: var(--color-text-secondary); margin-bottom: 15px;">
                        Define los colores que están reservados para los novios/anfitriones y que los invitados deben evitar.
                    </p>
                    
                    <div id="colores-reservados-grid" class="colores-reservados-grid">
                        <?php if (!empty($coloresReservados)): ?>
                            <?php foreach ($coloresReservados as $index => $colorItem): ?>
                                <div class="color-reservado-item" data-index="<?php echo $index; ?>">
                                    <input type="hidden" name="colores_reservados[<?php echo $index; ?>][id]" value="<?php echo $colorItem['id']; ?>">
                                    <input type="color" 
                                           class="color-reservado-preview" 
                                           value="<?php echo htmlspecialchars($colorItem['color']); ?>"
                                           onchange="actualizarColorReservado(this, <?php echo $index; ?>)">
                                    <input type="text" 
                                           class="color-reservado-input" 
                                           name="colores_reservados[<?php echo $index; ?>][color]" 
                                           value="<?php echo htmlspecialchars($colorItem['color']); ?>"
                                           placeholder="#000000"
                                           maxlength="7"
                                           onchange="sincronizarColorPicker(this, <?php echo $index; ?>)">
                                    <input type="text" 
                                           class="color-reservado-nombre" 
                                           name="colores_reservados[<?php echo $index; ?>][nombre]" 
                                           value="<?php echo htmlspecialchars($colorItem['nombre'] ?? ''); ?>"
                                           placeholder="Nombre (opcional)">
                                    <button type="button" class="color-reservado-eliminar" onclick="eliminarColorReservado(this)" title="Eliminar color">×</button>
                                </div>
                            <?php endforeach; ?>
                        <?php endif; ?>
                    </div>
                    
                    <button type="button" class="btn-agregar-color" onclick="agregarColorReservado()">
                        <span>+</span>
                        <span>Agregar Color</span>
                    </button>
                    
                    <p class="colores-reservados-info">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="vertical-align: middle; margin-right: 4px;">
                            <circle cx="12" cy="12" r="10"/>
                            <line x1="12" y1="16" x2="12" y2="12"/>
                            <line x1="12" y1="8" x2="12.01" y2="8"/>
                        </svg>
                        Estos colores se mostrarán en la invitación para que los invitados sepan qué colores evitar en su vestimenta.
                    </p>
                </div>
            </div>
        </div>
        
        <!-- TAB OBSEQUIO -->
        <div id="tab-obsequio" class="tab-content">
            <div class="form-group">
                <label for="tiene_obsequio">¿Tiene Obsequio?</label>
                <select id="tiene_obsequio" name="tiene_obsequio" onchange="toggleObsequioSection()" style="max-width: 200px;">
                    <option value="0" <?php echo (!($evento['tiene_obsequio'] ?? 0)) ? 'selected' : ''; ?>>No</option>
                    <option value="1" <?php echo (($evento['tiene_obsequio'] ?? 0)) ? 'selected' : ''; ?>>Sí</option>
                </select>
            </div>
            
            <div id="obsequio-container" style="display: <?php echo (($evento['tiene_obsequio'] ?? 0)) ? 'block' : 'none'; ?>; margin-top: 20px;">
                
                <!-- Sección: Cuentas Bancarias -->
                <div class="obsequio-section">
                    <div class="obsequio-section-header">
                        <h3 style="margin: 0; display: flex; align-items: center; gap: 10px;">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M20 4H4C2.89 4 2.01 4.89 2.01 6L2 18C2 19.11 2.89 20 4 20H20C21.11 20 22 19.11 22 18V6C22 4.89 21.11 4 20 4ZM20 18H4V12H20V18ZM20 8H4V6H20V8Z" fill="currentColor"/>
                            </svg>
                            Cuentas Bancarias
                        </h3>
                        <button type="button" class="btn-agregar-obsequio" onclick="agregarCuentaBancaria()">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M19 13H13V19H11V13H5V11H11V5H13V11H19V13Z" fill="currentColor"/>
                            </svg>
                            Agregar Cuenta
                        </button>
                    </div>
                    
                    <div id="cuentas-bancarias-container">
                        <?php 
                        $cuentasBancariasArray = array_values($cuentasBancarias);
                        if (!empty($cuentasBancariasArray)): 
                            foreach ($cuentasBancariasArray as $index => $cuenta): 
                        ?>
                        <div class="obsequio-item cuenta-bancaria-item" data-index="<?php echo $index; ?>">
                            <div class="obsequio-item-header" onclick="toggleCuentaBancaria(<?php echo $index; ?>)">
                                <div class="obsequio-item-title">
                                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="obsequio-chevron">
                                        <path d="M7.41 8.59L12 13.17L16.59 8.59L18 10L12 16L6 10L7.41 8.59Z" fill="currentColor"/>
                                    </svg>
                                    <span class="cuenta-titulo"><?php echo htmlspecialchars($cuenta['banco'] ?: 'Cuenta ' . ($index + 1)); ?></span>
                                </div>
                                <button type="button" class="btn-eliminar-obsequio" onclick="event.stopPropagation(); eliminarCuentaBancaria(<?php echo $index; ?>)" title="Eliminar cuenta">
                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M6 19C6 20.1 6.9 21 8 21H16C17.1 21 18 20.1 18 19V7H6V19ZM19 4H15.5L14.5 3H9.5L8.5 4H5V6H19V4Z" fill="currentColor"/>
                                    </svg>
                                </button>
                            </div>
                            <div class="obsequio-item-content" id="cuenta-content-<?php echo $index; ?>" style="display: none;">
                                <input type="hidden" name="cuentas[<?php echo $index; ?>][id]" value="<?php echo $cuenta['id']; ?>">
                                <input type="hidden" name="cuentas[<?php echo $index; ?>][tipo]" value="transferencia">
                                
                                <div class="form-group">
                                    <label>Banco *</label>
                                    <input type="text" name="cuentas[<?php echo $index; ?>][banco]" 
                                           value="<?php echo htmlspecialchars($cuenta['banco'] ?? ''); ?>" 
                                           placeholder="Ej: Banco del Pichincha" 
                                           onchange="actualizarTituloCuenta(<?php echo $index; ?>, this.value)">
                                </div>
                                
                                <div class="form-row">
                                    <div class="form-group">
                                        <label>Tipo de Cuenta *</label>
                                        <select name="cuentas[<?php echo $index; ?>][tipo_cuenta]">
                                            <option value="">Seleccione...</option>
                                            <option value="ahorros" <?php echo (($cuenta['tipo_cuenta'] ?? '') === 'ahorros') ? 'selected' : ''; ?>>Ahorros</option>
                                            <option value="corriente" <?php echo (($cuenta['tipo_cuenta'] ?? '') === 'corriente') ? 'selected' : ''; ?>>Corriente</option>
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <label>Número de Cuenta *</label>
                                        <input type="text" name="cuentas[<?php echo $index; ?>][numero_cuenta]" 
                                               value="<?php echo htmlspecialchars($cuenta['numero_cuenta'] ?? ''); ?>" 
                                               placeholder="Ej: 1234567890">
                                    </div>
                                </div>
                                
                                <div class="form-group">
                                    <label>Titular de la Cuenta *</label>
                                    <input type="text" name="cuentas[<?php echo $index; ?>][titular]" 
                                           value="<?php echo htmlspecialchars($cuenta['titular'] ?? ''); ?>" 
                                           placeholder="Nombre completo del titular">
                                </div>
                                
                                <div class="form-row">
                                    <div class="form-group">
                                        <label>Cédula *</label>
                                        <input type="text" name="cuentas[<?php echo $index; ?>][cedula]" 
                                               value="<?php echo htmlspecialchars($cuenta['cedula'] ?? ''); ?>" 
                                               placeholder="Ej: 1234567890">
                                    </div>
                                    <div class="form-group">
                                        <label>Correo Electrónico</label>
                                        <input type="email" name="cuentas[<?php echo $index; ?>][correo]" 
                                               value="<?php echo htmlspecialchars($cuenta['correo'] ?? ''); ?>" 
                                               placeholder="correo@ejemplo.com">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <?php 
                            endforeach; 
                        endif; 
                        ?>
                    </div>
                    
                    <p class="obsequio-empty-msg" id="cuentas-empty-msg" style="display: <?php echo empty($cuentasBancariasArray) ? 'block' : 'none'; ?>;">
                        No hay cuentas bancarias configuradas. Haz clic en "Agregar Cuenta" para añadir una.
                    </p>
                </div>
                
                <!-- Sección: Sobre Cerrado -->
                <div class="obsequio-section" style="margin-top: 30px;">
                    <div class="obsequio-section-header">
                        <h3 style="margin: 0; display: flex; align-items: center; gap: 10px;">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M20 4H4C2.9 4 2 4.9 2 6V18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V6C22 4.9 21.1 4 20 4ZM20 8L12 13L4 8V6L12 11L20 6V8Z" fill="currentColor"/>
                            </svg>
                            Sobre Cerrado
                        </h3>
                        <label class="toggle-switch">
                            <input type="checkbox" id="tiene_sobre_cerrado" name="tiene_sobre_cerrado" value="1" 
                                   <?php echo !empty($sobreCerrado) ? 'checked' : ''; ?> 
                                   onchange="toggleSobreCerrado()">
                            <span class="toggle-slider"></span>
                        </label>
                    </div>
                    
                    <?php $sobreCerradoData = !empty($sobreCerrado) ? array_values($sobreCerrado)[0] : null; ?>
                    <div id="sobre-cerrado-container" style="display: <?php echo !empty($sobreCerrado) ? 'block' : 'none'; ?>; margin-top: 15px;">
                        <input type="hidden" name="sobre_cerrado[id]" value="<?php echo $sobreCerradoData['id'] ?? ''; ?>">
                        <input type="hidden" name="sobre_cerrado[tipo]" value="sobre_cerrado">
                        
                        <div class="form-group">
                            <label for="sobre_indicaciones">Indicaciones para el invitado</label>
                            <textarea id="sobre_indicaciones" name="sobre_cerrado[indicaciones]" rows="4" 
                                      placeholder="Ej: Puedes entregar tu obsequio en un sobre cerrado el día del evento..."><?php echo htmlspecialchars($sobreCerradoData['indicaciones'] ?? ''); ?></textarea>
                            <small style="display: block; margin-top: 5px; color: var(--color-text-secondary);">
                                Este texto aparecerá en la sección de obsequio junto a la opción de sobre cerrado.
                            </small>
                        </div>
                    </div>
                </div>
                
            </div>
        </div>
        
        <!-- TAB COLORES -->
        <!-- TAB BRANDING -->
        <div id="tab-branding" class="tab-content">
            <div class="sub-tabs-wrapper">
                <div class="sub-tabs">
                    <button type="button" class="sub-tab-btn active" data-sub-tab="sub-tab-sobre">Sobre</button>
                    <button type="button" class="sub-tab-btn" data-sub-tab="sub-tab-tipografias">Tipografías</button>
                    <button type="button" class="sub-tab-btn" data-sub-tab="sub-tab-colores">Colores</button>
                </div>
                
                <!-- SUB-TAB SOBRE -->
                <div id="sub-tab-sobre" class="sub-tab-content active">
                    <h3 style="margin-bottom: 20px; color: var(--color-text-primary);">Configuración del Sobre</h3>
                    
                    <!-- Sobre Principal -->
                    <div class="form-group" style="margin-bottom: 30px; padding: 20px; background: var(--color-bg-primary); border-radius: var(--border-radius); border: 1px solid var(--color-border);">
                        <label style="font-weight: 600; margin-bottom: 10px; display: block; font-size: 16px;">Sobre Principal</label>
                        <p style="color: var(--color-text-secondary); font-size: 14px; margin-bottom: 15px;">
                            Imagen del sobre para dispositivos de escritorio
                        </p>
                        <div class="form-group">
                            <label for="sobre_principal">Subir Imagen del Sobre Principal</label>
                            <input type="file" id="sobre_principal" name="sobre_principal" accept="image/*">
                            <?php if (!empty($sobre['sobre_principal'] ?? '')): ?>
                                <div style="margin-top: 10px;">
                                    <img src="<?php echo htmlspecialchars((defined('BASE_URL') ? rtrim(BASE_URL, '/') : '') . '/' . ltrim($sobre['sobre_principal'] ?? '', '/')); ?>" 
                                         alt="Sobre Principal" 
                                         style="max-width: 300px; max-height: 200px; border-radius: var(--border-radius); border: 1px solid var(--color-border);">
                                    <input type="hidden" name="sobre_principal_actual" value="<?php echo htmlspecialchars($sobre['sobre_principal']); ?>">
                                </div>
                            <?php endif; ?>
                        </div>
                    </div>
                    
                    <!-- Sobre Móviles -->
                    <div class="form-group" style="margin-bottom: 30px; padding: 20px; background: var(--color-bg-primary); border-radius: var(--border-radius); border: 1px solid var(--color-border);">
                        <label style="font-weight: 600; margin-bottom: 10px; display: block; font-size: 16px;">Sobre Móviles</label>
                        <p style="color: var(--color-text-secondary); font-size: 14px; margin-bottom: 15px;">
                            Imagen del sobre para dispositivos móviles
                        </p>
                        <div class="form-group">
                            <label for="sobre_moviles">Subir Imagen del Sobre Móviles</label>
                            <input type="file" id="sobre_moviles" name="sobre_moviles" accept="image/*">
                            <?php if (!empty($sobre['sobre_moviles'] ?? '')): ?>
                                <div style="margin-top: 10px;">
                                    <img src="<?php echo htmlspecialchars((defined('BASE_URL') ? rtrim(BASE_URL, '/') : '') . '/' . ltrim($sobre['sobre_moviles'] ?? '', '/')); ?>" 
                                         alt="Sobre Móviles" 
                                         style="max-width: 300px; max-height: 200px; border-radius: var(--border-radius); border: 1px solid var(--color-border);">
                                    <input type="hidden" name="sobre_moviles_actual" value="<?php echo htmlspecialchars($sobre['sobre_moviles']); ?>">
                                </div>
                            <?php endif; ?>
                        </div>
                    </div>
                </div>
                
                <!-- SUB-TAB TIPOGRAFÍAS -->
                <div id="sub-tab-tipografias" class="sub-tab-content">
                    <h3 style="margin-bottom: 20px; color: var(--color-text-primary);">Configuración de Tipografías</h3>
                    
                    <?php 
                    $tipografias_opciones = [
                        'letra_cursiva_1' => ['label' => 'Letra Cursiva 1', 'desc' => 'Faith'],
                        'letra_cursiva_2' => ['label' => 'Letra Cursiva 2', 'desc' => 'Aston Script'],
                        'letra_sans_1' => ['label' => 'Letra Sans 1', 'desc' => 'Ej: Anek Kannada, Montserrat'],
                        'letra_sans_2' => ['label' => 'Letra Sans 2', 'desc' => 'Ej: Anek Kannada, Creato Display'],
                        'letra_sans_3' => ['label' => 'Letra Sans 3', 'desc' => 'Poppins']
                    ];
                    
                    foreach ($tipografias_opciones as $key => $info): 
                        $archivo = htmlspecialchars($tipografias[$key . '_archivo'] ?? '');
                        $nombre = htmlspecialchars($tipografias[$key . '_nombre'] ?? '');
                    ?>
                    <div class="form-group" style="margin-bottom: 25px; padding: 20px; background: var(--color-bg-primary); border-radius: var(--border-radius); border: 1px solid var(--color-border);">
                        <label for="<?php echo $key; ?>" style="font-weight: 600; margin-bottom: 10px; display: block; font-size: 16px;">
                            <?php echo $info['label']; ?>
                        </label>
                        <p style="color: var(--color-text-secondary); font-size: 14px; margin-bottom: 15px;">
                            <?php echo $info['desc']; ?>
                        </p>
                        <div class="form-group">
                            <label for="<?php echo $key; ?>_archivo">Subir Archivo de Fuente (opcional)</label>
                            <input type="file" id="<?php echo $key; ?>_archivo" name="<?php echo $key; ?>_archivo" accept=".ttf,.otf,.woff,.woff2">
                            <small style="display: block; margin-top: 5px; color: var(--color-text-secondary);">
                                Formatos aceptados: TTF, OTF, WOFF, WOFF2
                            </small>
                            <?php if (!empty($archivo)): ?>
                                <div style="margin-top: 10px; padding: 10px; background: var(--color-bg-secondary); border-radius: var(--border-radius);">
                                    <strong>Archivo actual:</strong> <?php echo basename($archivo); ?>
                                    <input type="hidden" name="<?php echo $key; ?>_archivo_actual" value="<?php echo $archivo; ?>">
                                </div>
                            <?php endif; ?>
                        </div>
                        <div class="form-group" style="margin-top: 15px;">
                            <label for="<?php echo $key; ?>_nombre">Nombre de la Fuente (debe coincidir con el nombre en el archivo)</label>
                            <input type="text" id="<?php echo $key; ?>_nombre" name="<?php echo $key; ?>_nombre" 
                                   value="<?php echo $nombre; ?>"
                                   placeholder="Ej: Anek Kannada, Montserrat">
                        </div>
                    </div>
                    <?php endforeach; ?>
                </div>
                
                <!-- SUB-TAB COLORES -->
                <div id="sub-tab-colores" class="sub-tab-content">
                    <h3 style="margin-bottom: 20px; color: var(--color-text-primary);">Configuración de Colores</h3>
                    <div class="colores-grid">
                        <div class="color-field">
                            <label for="color_principal">Color Principal</label>
                            <div class="color-field-wrapper">
                                <input type="color" id="color_principal" name="color_principal"
                                       value="<?php echo htmlspecialchars($colores['color_principal'] ?? '#667eea'); ?>"
                                       onchange="document.getElementById('color_principal_text').value = this.value">
                                <input type="text" id="color_principal_text" 
                                       value="<?php echo htmlspecialchars($colores['color_principal'] ?? '#667eea'); ?>"
                                       onchange="document.getElementById('color_principal').value = this.value"
                                       pattern="^#[0-9A-Fa-f]{6}$" placeholder="#667eea">
                            </div>
                        </div>
                        
                        <div class="color-field">
                            <label for="color_secundario">Color Secundario</label>
                            <div class="color-field-wrapper">
                                <input type="color" id="color_secundario" name="color_secundario"
                                       value="<?php echo htmlspecialchars($colores['color_secundario'] ?? '#764ba2'); ?>"
                                       onchange="document.getElementById('color_secundario_text').value = this.value">
                                <input type="text" id="color_secundario_text" 
                                       value="<?php echo htmlspecialchars($colores['color_secundario'] ?? '#764ba2'); ?>"
                                       onchange="document.getElementById('color_secundario').value = this.value"
                                       pattern="^#[0-9A-Fa-f]{6}$" placeholder="#764ba2">
                            </div>
                        </div>
                        
                        <div class="color-field">
                            <label for="color_texto">Color de Texto</label>
                            <div class="color-field-wrapper">
                                <input type="color" id="color_texto" name="color_texto"
                                       value="<?php echo htmlspecialchars($colores['color_texto'] ?? '#000000'); ?>"
                                       onchange="document.getElementById('color_texto_text').value = this.value">
                                <input type="text" id="color_texto_text" 
                                       value="<?php echo htmlspecialchars($colores['color_texto'] ?? '#000000'); ?>"
                                       onchange="document.getElementById('color_texto').value = this.value"
                                       pattern="^#[0-9A-Fa-f]{6}$" placeholder="#000000">
                            </div>
                        </div>
                        
                        <div class="color-field">
                            <label for="color_resalte">Color de Resalte</label>
                            <div class="color-field-wrapper">
                                <input type="color" id="color_resalte" name="color_resalte"
                                       value="<?php echo htmlspecialchars($colores['color_resalte'] ?? '#FF0000'); ?>"
                                       onchange="document.getElementById('color_resalte_text').value = this.value">
                                <input type="text" id="color_resalte_text" 
                                       value="<?php echo htmlspecialchars($colores['color_resalte'] ?? '#FF0000'); ?>"
                                       onchange="document.getElementById('color_resalte').value = this.value"
                                       pattern="^#[0-9A-Fa-f]{6}$" placeholder="#FF0000">
                            </div>
                        </div>
                        
                        <?php for ($i = 1; $i <= 4; $i++): 
                            $campo = 'color_' . $i;
                            $valor = htmlspecialchars($colores[$campo] ?? '#FFFFFF');
                        ?>
                        <div class="color-field">
                            <label for="<?php echo $campo; ?>">Color <?php echo $i; ?></label>
                            <div class="color-field-wrapper">
                                <input type="color" id="<?php echo $campo; ?>" name="<?php echo $campo; ?>"
                                       value="<?php echo $valor; ?>"
                                       onchange="document.getElementById('<?php echo $campo; ?>_text').value = this.value">
                                <input type="text" id="<?php echo $campo; ?>_text" 
                                       value="<?php echo $valor; ?>"
                                       onchange="document.getElementById('<?php echo $campo; ?>').value = this.value"
                                       pattern="^#[0-9A-Fa-f]{6}$" placeholder="#FFFFFF">
                            </div>
                        </div>
                        <?php endfor; ?>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- TAB DETALLES ADICIONALES -->
        <div id="tab-detalles-adicionales" class="tab-content">
            <div class="sub-tabs-wrapper">
                <div class="sub-tabs">
                    <button type="button" class="sub-tab-btn active" data-sub-tab="sub-tab-hospedaje">Hospedaje</button>
                    <button type="button" class="sub-tab-btn" data-sub-tab="sub-tab-alimentacion">Alimentación</button>
                    <button type="button" class="sub-tab-btn" data-sub-tab="sub-tab-pdf">PDF</button>
                    <button type="button" class="sub-tab-btn" data-sub-tab="sub-tab-transporte">Transporte</button>
                    <button type="button" class="sub-tab-btn" data-sub-tab="sub-tab-otro">Otro</button>
                </div>
                
                <!-- SUB-TAB HOSPEDAJE -->
                <div id="sub-tab-hospedaje" class="sub-tab-content active">
                    <div class="form-group">
                        <label for="tiene_hospedaje">¿Deseas agregar hospedajes?</label>
                        <select id="tiene_hospedaje" name="tiene_hospedaje" onchange="toggleDetalleAdicional('hospedaje')" style="max-width: 200px;">
                            <option value="0">No</option>
                            <option value="1" <?php echo !empty($detalles_hospedaje) ? 'selected' : ''; ?>>Sí</option>
                        </select>
                    </div>
                    
                    <div id="hospedaje-container" style="display: <?php echo !empty($detalles_hospedaje) ? 'block' : 'none'; ?>; margin-top: 20px;">
                        <div id="hospedaje-items">
                            <?php if (!empty($detalles_hospedaje)): ?>
                                <?php foreach ($detalles_hospedaje as $index => $hotel): ?>
                                    <div class="detalle-item" data-index="<?php echo $index; ?>" data-relacion-id="<?php echo $hotel['relacion_id'] ?? ''; ?>" data-detalle-id="<?php echo $hotel['id'] ?? ''; ?>">
                                        <div class="detalle-header" onclick="toggleDetalleItem('hospedaje', <?php echo $index; ?>)">
                                            <span class="detalle-title"><?php echo htmlspecialchars($hotel['nombre_hotel'] ?? 'Nuevo Hotel'); ?></span>
                                            <span class="detalle-actions">
                                                <button type="button" class="detalle-btn-remove" onclick="event.stopPropagation(); eliminarDetalleItem('hospedaje', <?php echo $index; ?>);" title="Eliminar">×</button>
                                                <span class="detalle-toggle-icon">▼</span>
                                            </span>
                                        </div>
                                        <div class="detalle-content" id="hospedaje-content-<?php echo $index; ?>">
                                            <input type="hidden" name="hospedaje[<?php echo $index; ?>][id]" value="<?php echo $hotel['id'] ?? ''; ?>">
                                            <input type="hidden" name="hospedaje[<?php echo $index; ?>][relacion_id]" value="<?php echo $hotel['relacion_id'] ?? ''; ?>">
                                            <input type="hidden" name="hospedaje[<?php echo $index; ?>][orden]" class="hospedaje-orden" value="<?php echo $index; ?>">
                                            
                                            <div class="form-group">
                                                <label>Nombre del Hotel *</label>
                                                <input type="text" name="hospedaje[<?php echo $index; ?>][nombre_hotel]" 
                                                       value="<?php echo htmlspecialchars($hotel['nombre_hotel'] ?? ''); ?>" 
                                                       required
                                                       onchange="actualizarTituloDetalle('hospedaje', <?php echo $index; ?>, this.value)">
                                            </div>
                                            
                                            <div class="form-group">
                                                <label>Ubicación Referencial *</label>
                                                <input type="text" name="hospedaje[<?php echo $index; ?>][ubicacion_referencial]" 
                                                       value="<?php echo htmlspecialchars($hotel['ubicacion_referencial'] ?? ''); ?>" 
                                                       placeholder="Ej: Guayaquil, Puerto Santa Ana"
                                                       required>
                                            </div>
                                            
                                            <div class="form-group">
                                                <label>Distancia (metros) *</label>
                                                <input type="number" name="hospedaje[<?php echo $index; ?>][distancia_metros]" 
                                                       value="<?php echo $hotel['distancia_metros'] ?? ''; ?>" 
                                                       placeholder="500"
                                                       min="0"
                                                       required>
                                            </div>
                                            
                                            <!-- Botones del hotel (repeater) -->
                                            <div style="margin-top: 20px;">
                                                <h4 style="margin: 0 0 15px 0; font-size: 16px; color: var(--color-text-primary); font-weight: 600;">Botones</h4>
                                                <div id="hospedaje-botones-<?php echo $index; ?>">
                                                    <?php if (!empty($hotel['botones'])): ?>
                                                        <?php foreach ($hotel['botones'] as $botonIndex => $boton): ?>
                                                            <div class="hospedaje-boton-item" data-boton-index="<?php echo $botonIndex; ?>">
                                                                <div class="hospedaje-boton-header" onclick="toggleHospedajeBoton(<?php echo $index; ?>, <?php echo $botonIndex; ?>)">
                                                                    <span class="hospedaje-boton-title"><?php echo htmlspecialchars($boton['nombre_link'] ?? 'Nuevo Botón'); ?></span>
                                                                    <span class="hospedaje-boton-actions">
                                                                        <button type="button" class="hospedaje-boton-btn-remove" onclick="event.stopPropagation(); eliminarHospedajeBoton(<?php echo $index; ?>, <?php echo $botonIndex; ?>);" title="Eliminar">×</button>
                                                                        <span class="hospedaje-boton-toggle-icon">▼</span>
                                                                    </span>
                                                                </div>
                                                                <div class="hospedaje-boton-content" id="hospedaje-boton-content-<?php echo $index; ?>-<?php echo $botonIndex; ?>">
                                                                    <input type="hidden" name="hospedaje[<?php echo $index; ?>][botones][<?php echo $botonIndex; ?>][id]" value="<?php echo $boton['id'] ?? ''; ?>">
                                                                    <input type="hidden" name="hospedaje[<?php echo $index; ?>][botones][<?php echo $botonIndex; ?>][orden]" value="<?php echo $botonIndex; ?>">
                                                                    
                                                                    <div class="form-group">
                                                                        <label>Nombre del Link *</label>
                                                                        <input type="text" name="hospedaje[<?php echo $index; ?>][botones][<?php echo $botonIndex; ?>][nombre_link]" 
                                                                               value="<?php echo htmlspecialchars($boton['nombre_link'] ?? ''); ?>" 
                                                                               placeholder="Ej: Tarifas Especiales"
                                                                               required
                                                                               onchange="actualizarTituloHospedajeBoton(<?php echo $index; ?>, <?php echo $botonIndex; ?>, this.value)">
                                                                    </div>
                                                                    
                                                                    <div class="form-group">
                                                                        <label>Tipo *</label>
                                                                        <select name="hospedaje[<?php echo $index; ?>][botones][<?php echo $botonIndex; ?>][tipo_valor]" 
                                                                                required
                                                                                onchange="cambiarTipoHospedajeBoton(<?php echo $index; ?>, <?php echo $botonIndex; ?>, this.value)">
                                                                            <option value="link" <?php echo ($boton['tipo_valor'] ?? '') === 'link' ? 'selected' : ''; ?>>Link</option>
                                                                            <option value="pdf" <?php echo ($boton['tipo_valor'] ?? '') === 'pdf' ? 'selected' : ''; ?>>PDF</option>
                                                                        </select>
                                                                    </div>
                                                                    
                                                                    <!-- Campo para Link -->
                                                                    <div class="form-group hospedaje-boton-field-link" id="hospedaje-boton-link-<?php echo $index; ?>-<?php echo $botonIndex; ?>" style="display: <?php echo ($boton['tipo_valor'] ?? '') === 'link' ? 'block' : 'none'; ?>;">
                                                                        <label>URL del Link *</label>
                                                                        <input type="url" name="hospedaje[<?php echo $index; ?>][botones][<?php echo $botonIndex; ?>][valor_link]" 
                                                                               value="<?php echo (($boton['tipo_valor'] ?? '') === 'link') ? htmlspecialchars($boton['valor'] ?? '') : ''; ?>" 
                                                                               placeholder="https://ejemplo.com"
                                                                               class="hospedaje-boton-valor-link"
                                                                               required
                                                                               onchange="actualizarValorHospedajeBoton(<?php echo $index; ?>, <?php echo $botonIndex; ?>, 'link', this.value)">
                                                                        <input type="hidden" name="hospedaje[<?php echo $index; ?>][botones][<?php echo $botonIndex; ?>][valor]" 
                                                                               value="<?php echo (($boton['tipo_valor'] ?? '') === 'link') ? htmlspecialchars($boton['valor'] ?? '') : ''; ?>"
                                                                               class="hospedaje-boton-valor-hidden">
                                                                    </div>
                                                                    
                                                                    <!-- Campo para PDF -->
                                                                    <div class="form-group hospedaje-boton-field-pdf" id="hospedaje-boton-pdf-<?php echo $index; ?>-<?php echo $botonIndex; ?>" style="display: <?php echo ($boton['tipo_valor'] ?? '') === 'pdf' ? 'block' : 'none'; ?>;">
                                                                        <label>Archivo PDF *</label>
                                                                        <input type="file" name="hospedaje_boton_pdf[<?php echo $index; ?>][<?php echo $botonIndex; ?>]" 
                                                                               accept="application/pdf"
                                                                               class="hospedaje-boton-file-pdf"
                                                                               <?php echo (($boton['tipo_valor'] ?? '') === 'pdf' && empty($boton['valor'])) ? 'required' : ''; ?>>
                                                                        <input type="hidden" name="hospedaje[<?php echo $index; ?>][botones][<?php echo $botonIndex; ?>][valor]" 
                                                                               value="<?php echo (($boton['tipo_valor'] ?? '') === 'pdf') ? htmlspecialchars($boton['valor'] ?? '') : ''; ?>"
                                                                               class="hospedaje-boton-valor-hidden">
                                                                        <?php if (($boton['tipo_valor'] ?? '') === 'pdf' && !empty($boton['valor'])): ?>
                                                                            <div style="margin-top: 10px;">
                                                                                <p style="font-size: 14px; color: var(--color-text-secondary); margin-bottom: 8px;">PDF actual:</p>
                                                                                <a href="../../<?php echo htmlspecialchars($boton['valor']); ?>" target="_blank" 
                                                                                   class="btn" style="display: inline-flex; align-items: center; gap: 6px; text-decoration: none; padding: 8px 16px; font-size: 14px;">
                                                                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                                                                        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
                                                                                        <polyline points="14 2 14 8 20 8"/>
                                                                                        <line x1="16" y1="13" x2="8" y2="13"/>
                                                                                        <line x1="16" y1="17" x2="8" y2="17"/>
                                                                                        <polyline points="10 9 9 9 8 9"/>
                                                                                    </svg>
                                                                                    Ver PDF
                                                                                </a>
                                                                            </div>
                                                                        <?php endif; ?>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        <?php endforeach; ?>
                                                    <?php endif; ?>
                                                </div>
                                                <button type="button" class="btn-agregar-itinerario" onclick="agregarHospedajeBoton(<?php echo $index; ?>)">
                                                    <span>+</span>
                                                    <span>Agregar Botón</span>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                <?php endforeach; ?>
                            <?php endif; ?>
                        </div>
                        <button type="button" class="btn-agregar-itinerario" onclick="agregarDetalleItem('hospedaje')">
                            <span>+</span>
                            <span>Agregar Nuevo Hotel</span>
                        </button>
                    </div>
                </div>
                
                <!-- SUB-TAB ALIMENTACIÓN -->
                <div id="sub-tab-alimentacion" class="sub-tab-content">
                    <div class="form-group">
                        <label for="tiene_alimentacion">¿Deseas agregar restaurantes?</label>
                        <select id="tiene_alimentacion" name="tiene_alimentacion" onchange="toggleDetalleAdicional('alimentacion')" style="max-width: 200px;">
                            <option value="0">No</option>
                            <option value="1" <?php echo !empty($detalles_alimentacion) ? 'selected' : ''; ?>>Sí</option>
                        </select>
                    </div>
                    
                    <div id="alimentacion-container" style="display: <?php echo !empty($detalles_alimentacion) ? 'block' : 'none'; ?>; margin-top: 20px;">
                        <div id="alimentacion-items">
                            <?php if (!empty($detalles_alimentacion)): ?>
                                <?php foreach ($detalles_alimentacion as $index => $restaurante): ?>
                                    <div class="detalle-item" data-index="<?php echo $index; ?>" data-relacion-id="<?php echo $restaurante['relacion_id'] ?? ''; ?>" data-detalle-id="<?php echo $restaurante['id'] ?? ''; ?>">
                                        <div class="detalle-header" onclick="toggleDetalleItem('alimentacion', <?php echo $index; ?>)">
                                            <span class="detalle-title"><?php echo htmlspecialchars($restaurante['nombre_restaurante'] ?? 'Nuevo Restaurante'); ?></span>
                                            <span class="detalle-actions">
                                                <button type="button" class="detalle-btn-remove" onclick="event.stopPropagation(); eliminarDetalleItem('alimentacion', <?php echo $index; ?>);" title="Eliminar">×</button>
                                                <span class="detalle-toggle-icon">▼</span>
                                            </span>
                                        </div>
                                        <div class="detalle-content" id="alimentacion-content-<?php echo $index; ?>">
                                            <input type="hidden" name="alimentacion[<?php echo $index; ?>][id]" value="<?php echo $restaurante['id'] ?? ''; ?>">
                                            <input type="hidden" name="alimentacion[<?php echo $index; ?>][relacion_id]" value="<?php echo $restaurante['relacion_id'] ?? ''; ?>">
                                            <input type="hidden" name="alimentacion[<?php echo $index; ?>][orden]" class="alimentacion-orden" value="<?php echo $index; ?>">
                                            
                                            <div class="form-group">
                                                <label>Nombre del Restaurante *</label>
                                                <input type="text" name="alimentacion[<?php echo $index; ?>][nombre_restaurante]" 
                                                       value="<?php echo htmlspecialchars($restaurante['nombre_restaurante'] ?? ''); ?>" 
                                                       required
                                                       onchange="actualizarTituloDetalle('alimentacion', <?php echo $index; ?>, this.value)">
                                            </div>
                                            
                                            <div class="form-group">
                                                <label>Dirección *</label>
                                                <input type="text" name="alimentacion[<?php echo $index; ?>][direccion]" 
                                                       value="<?php echo htmlspecialchars($restaurante['direccion'] ?? ''); ?>" 
                                                       required>
                                            </div>
                                            
                                            <div class="form-group">
                                                <label>WhatsApp para Reservar *</label>
                                                <input type="text" name="alimentacion[<?php echo $index; ?>][whatsapp_reservar]" 
                                                       value="<?php echo htmlspecialchars($restaurante['whatsapp_reservar'] ?? ''); ?>" 
                                                       placeholder="593999123456"
                                                       required>
                                                <small style="display:block;margin-top:5px;color:var(--color-text-secondary);">
                                                    Ingrese el número sin espacios ni caracteres especiales (ej: 593999123456)
                                                </small>
                                            </div>
                                        </div>
                                    </div>
                                <?php endforeach; ?>
                            <?php endif; ?>
                        </div>
                        <button type="button" class="btn-agregar-itinerario" onclick="agregarDetalleItem('alimentacion')">
                            <span>+</span>
                            <span>Agregar Nuevo Restaurante</span>
                        </button>
                    </div>
                </div>
                
                <!-- SUB-TAB PDF -->
                <div id="sub-tab-pdf" class="sub-tab-content">
                    <div class="form-group">
                        <label for="tiene_pdf">¿Deseas agregar PDFs?</label>
                        <select id="tiene_pdf" name="tiene_pdf" onchange="toggleDetalleAdicional('pdf')" style="max-width: 200px;">
                            <option value="0">No</option>
                            <option value="1" <?php echo !empty($detalles_pdf) ? 'selected' : ''; ?>>Sí</option>
                        </select>
                    </div>
                    
                    <div id="pdf-container" style="display: <?php echo !empty($detalles_pdf) ? 'block' : 'none'; ?>; margin-top: 20px;">
                        <div id="pdf-items">
                            <?php if (!empty($detalles_pdf)): ?>
                                <?php foreach ($detalles_pdf as $index => $pdf): ?>
                                    <div class="detalle-item" data-index="<?php echo $index; ?>" data-relacion-id="<?php echo $pdf['relacion_id'] ?? ''; ?>" data-detalle-id="<?php echo $pdf['id'] ?? ''; ?>">
                                        <div class="detalle-header" onclick="toggleDetalleItem('pdf', <?php echo $index; ?>)">
                                            <span class="detalle-title"><?php echo htmlspecialchars($pdf['titulo'] ?? 'Nuevo PDF'); ?></span>
                                            <span class="detalle-actions">
                                                <button type="button" class="detalle-btn-remove" onclick="event.stopPropagation(); eliminarDetalleItem('pdf', <?php echo $index; ?>);" title="Eliminar">×</button>
                                                <span class="detalle-toggle-icon">▼</span>
                                            </span>
                                        </div>
                                        <div class="detalle-content" id="pdf-content-<?php echo $index; ?>">
                                            <input type="hidden" name="pdf[<?php echo $index; ?>][id]" value="<?php echo $pdf['id'] ?? ''; ?>">
                                            <input type="hidden" name="pdf[<?php echo $index; ?>][relacion_id]" value="<?php echo $pdf['relacion_id'] ?? ''; ?>">
                                            <input type="hidden" name="pdf[<?php echo $index; ?>][orden]" class="pdf-orden" value="<?php echo $index; ?>">
                                            
                                            <div class="form-group">
                                                <label>Título del PDF *</label>
                                                <input type="text" name="pdf[<?php echo $index; ?>][titulo]" 
                                                       value="<?php echo htmlspecialchars($pdf['titulo'] ?? ''); ?>" 
                                                       placeholder="Ej: Detalles para personas de Ecuador"
                                                       required
                                                       onchange="actualizarTituloDetalle('pdf', <?php echo $index; ?>, this.value)">
                                            </div>
                                            
                                            <div class="form-group">
                                                <label>Archivo PDF *</label>
                                                <input type="file" name="pdf_archivo[<?php echo $index; ?>]" accept="application/pdf">
                                                <input type="hidden" name="pdf[<?php echo $index; ?>][archivo]" value="<?php echo htmlspecialchars($pdf['archivo'] ?? ''); ?>">
                                                <?php if (!empty($pdf['archivo'])): ?>
                                                    <div style="margin-top: 10px;">
                                                        <p style="font-size: 14px; color: var(--color-text-secondary); margin-bottom: 8px;">PDF actual:</p>
                                                        <a href="../../<?php echo htmlspecialchars($pdf['archivo']); ?>" target="_blank" style="color: var(--color-primary); text-decoration: none;">
                                                            Ver PDF actual
                                                        </a>
                                                    </div>
                                                <?php endif; ?>
                                            </div>
                                        </div>
                                    </div>
                                <?php endforeach; ?>
                            <?php endif; ?>
                        </div>
                        <button type="button" class="btn-agregar-itinerario" onclick="agregarDetalleItem('pdf')">
                            <span>+</span>
                            <span>Agregar Nuevo PDF</span>
                        </button>
                    </div>
                </div>
                
                <!-- SUB-TAB TRANSPORTE -->
                <div id="sub-tab-transporte" class="sub-tab-content">
                    <div class="form-group">
                        <label for="tiene_transporte">¿Deseas agregar opciones de transporte?</label>
                        <select id="tiene_transporte" name="tiene_transporte" onchange="toggleDetalleAdicional('transporte')" style="max-width: 200px;">
                            <option value="0">No</option>
                            <option value="1" <?php echo !empty($detalles_transporte) ? 'selected' : ''; ?>>Sí</option>
                        </select>
                    </div>
                    
                    <div id="transporte-container" style="display: <?php echo !empty($detalles_transporte) ? 'block' : 'none'; ?>; margin-top: 20px;">
                        <div id="transporte-items">
                            <?php if (!empty($detalles_transporte)): ?>
                                <?php foreach ($detalles_transporte as $index => $transporte): ?>
                                    <div class="detalle-item" data-index="<?php echo $index; ?>" data-relacion-id="<?php echo $transporte['relacion_id'] ?? ''; ?>" data-detalle-id="<?php echo $transporte['id'] ?? ''; ?>">
                                        <div class="detalle-header" onclick="toggleDetalleItem('transporte', <?php echo $index; ?>)">
                                            <span class="detalle-title"><?php echo htmlspecialchars($transporte['nombre'] ?? 'Nuevo Transporte'); ?></span>
                                            <span class="detalle-actions">
                                                <button type="button" class="detalle-btn-remove" onclick="event.stopPropagation(); eliminarDetalleItem('transporte', <?php echo $index; ?>);" title="Eliminar">×</button>
                                                <span class="detalle-toggle-icon">▼</span>
                                            </span>
                                        </div>
                                        <div class="detalle-content" id="transporte-content-<?php echo $index; ?>">
                                            <input type="hidden" name="transporte[<?php echo $index; ?>][id]" value="<?php echo $transporte['id'] ?? ''; ?>">
                                            <input type="hidden" name="transporte[<?php echo $index; ?>][relacion_id]" value="<?php echo $transporte['relacion_id'] ?? ''; ?>">
                                            <input type="hidden" name="transporte[<?php echo $index; ?>][orden]" class="transporte-orden" value="<?php echo $index; ?>">
                                            
                                            <div class="form-group">
                                                <label>Nombre del Servicio *</label>
                                                <input type="text" name="transporte[<?php echo $index; ?>][nombre]" 
                                                       value="<?php echo htmlspecialchars($transporte['nombre'] ?? ''); ?>" 
                                                       required
                                                       onchange="actualizarTituloDetalle('transporte', <?php echo $index; ?>, this.value)">
                                            </div>
                                            
                                            <div class="form-group">
                                                <label>Descripción</label>
                                                <textarea name="transporte[<?php echo $index; ?>][descripcion]" rows="4"><?php echo htmlspecialchars($transporte['descripcion'] ?? ''); ?></textarea>
                                            </div>
                                            
                                            <div class="form-group">
                                                <label>Contacto</label>
                                                <input type="text" name="transporte[<?php echo $index; ?>][contacto]" 
                                                       value="<?php echo htmlspecialchars($transporte['contacto'] ?? ''); ?>" 
                                                       placeholder="Teléfono o email">
                                            </div>
                                        </div>
                                    </div>
                                <?php endforeach; ?>
                            <?php endif; ?>
                        </div>
                        <button type="button" class="btn-agregar-itinerario" onclick="agregarDetalleItem('transporte')">
                            <span>+</span>
                            <span>Agregar Nueva Opción de Transporte</span>
                        </button>
                    </div>
                </div>
                
                <!-- SUB-TAB OTRO -->
                <div id="sub-tab-otro" class="sub-tab-content">
                    <div class="form-group">
                        <label for="tiene_otro">¿Deseas agregar otros detalles?</label>
                        <select id="tiene_otro" name="tiene_otro" onchange="toggleDetalleAdicional('otro')" style="max-width: 200px;">
                            <option value="0">No</option>
                            <option value="1" <?php echo !empty($detalles_otro) ? 'selected' : ''; ?>>Sí</option>
                        </select>
                    </div>
                    
                    <div id="otro-container" style="display: <?php echo !empty($detalles_otro) ? 'block' : 'none'; ?>; margin-top: 20px;">
                        <div id="otro-items">
                            <?php if (!empty($detalles_otro)): ?>
                                <?php foreach ($detalles_otro as $index => $otro): ?>
                                    <div class="detalle-item" data-index="<?php echo $index; ?>" data-relacion-id="<?php echo $otro['relacion_id'] ?? ''; ?>" data-detalle-id="<?php echo $otro['id'] ?? ''; ?>">
                                        <div class="detalle-header" onclick="toggleDetalleItem('otro', <?php echo $index; ?>)">
                                            <span class="detalle-title"><?php echo htmlspecialchars($otro['titulo'] ?? 'Nuevo Detalle'); ?></span>
                                            <span class="detalle-actions">
                                                <button type="button" class="detalle-btn-remove" onclick="event.stopPropagation(); eliminarDetalleItem('otro', <?php echo $index; ?>);" title="Eliminar">×</button>
                                                <span class="detalle-toggle-icon">▼</span>
                                            </span>
                                        </div>
                                        <div class="detalle-content" id="otro-content-<?php echo $index; ?>">
                                            <input type="hidden" name="otro[<?php echo $index; ?>][id]" value="<?php echo $otro['id'] ?? ''; ?>">
                                            <input type="hidden" name="otro[<?php echo $index; ?>][relacion_id]" value="<?php echo $otro['relacion_id'] ?? ''; ?>">
                                            <input type="hidden" name="otro[<?php echo $index; ?>][orden]" class="otro-orden" value="<?php echo $index; ?>">
                                            
                                            <div class="form-group">
                                                <label>Título *</label>
                                                <input type="text" name="otro[<?php echo $index; ?>][titulo]" 
                                                       value="<?php echo htmlspecialchars($otro['titulo'] ?? ''); ?>" 
                                                       required
                                                       onchange="actualizarTituloDetalle('otro', <?php echo $index; ?>, this.value)">
                                            </div>
                                            
                                            <div class="form-group">
                                                <label>Contenido</label>
                                                <textarea name="otro[<?php echo $index; ?>][contenido]" rows="6"><?php echo htmlspecialchars($otro['contenido'] ?? ''); ?></textarea>
                                            </div>
                                        </div>
                                    </div>
                                <?php endforeach; ?>
                            <?php endif; ?>
                        </div>
                        <button type="button" class="btn-agregar-itinerario" onclick="agregarDetalleItem('otro')">
                            <span>+</span>
                            <span>Agregar Nuevo Detalle</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- TAB GALERÍA -->
        <div id="tab-galeria" class="tab-content">
            <h3 style="margin-bottom: 20px;">Galería de Fotos</h3>
            
            <!-- Subir nuevas fotos -->
            <div class="form-group" style="margin-bottom: 30px; padding: 20px; background: var(--color-bg-primary); border-radius: var(--border-radius); border: 1px solid var(--color-border);">
                <label for="galeria_fotos" style="font-weight: 600; margin-bottom: 10px; display: block;">Subir Nuevas Fotos</label>
                <input type="file" id="galeria_fotos" name="galeria_fotos[]" accept="image/*" multiple>
                <small style="display:block;margin-top:8px;color:var(--color-text-secondary);">
                    Puede seleccionar múltiples fotos a la vez. No hay límites de tamaño o formato.
                </small>
            </div>
            
            <!-- Fotos existentes -->
            <div class="form-group">
                <h4 style="font-size: 18px; margin-bottom: 20px; color: var(--color-text-primary); font-weight: 600;">
                    Fotos en la Galería (<?php echo count($galeria); ?>)
                </h4>
                
                <?php if (empty($galeria)): ?>
                    <p style="color: var(--color-text-secondary); font-size: 14px; padding: 20px; background: var(--color-bg-primary); border-radius: var(--border-radius); text-align: center;">
                        No hay fotos en la galería. Suba fotos usando el campo de arriba.
                    </p>
                <?php else: ?>
                    <div id="galeria-grid" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px;">
                        <?php foreach ($galeria as $index => $foto): ?>
                            <div class="galeria-foto-item" data-foto-id="<?php echo $foto['id']; ?>" style="border: 1px solid var(--color-border); border-radius: var(--border-radius); overflow: hidden; background: var(--color-bg-secondary);">
                                <!-- Imagen -->
                                <div style="position: relative; width: 100%; padding-top: 75%; background: var(--color-bg-primary); overflow: hidden;">
                                    <?php 
                                    // La ruta en BD es relativa desde la raíz: assets/uploads/images/galeria/archivo.jpg
                                    $archivo = isset($foto['archivo']) ? $foto['archivo'] : '';
                                    if (empty($archivo)) {
                                        $archivo = $foto['archivo'] ?? '';
                                    }
                                    $rutaImagen = !empty($archivo) ? (defined('BASE_URL') ? rtrim(BASE_URL, '/') : '') . '/' . ltrim($archivo, '/') : '';
                                    ?>
                                    <?php if (!empty($rutaImagen)): ?>
                                        <img src="<?php echo $rutaImagen; ?>" 
                                             alt="Foto <?php echo ($index + 1); ?>"
                                             style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;"
                                             onerror="console.error('Error cargando imagen: <?php echo $rutaImagen; ?>'); this.style.display='none'; this.parentElement.innerHTML='<div style=\'position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#999;font-size:12px;\'>Imagen no encontrada<br><?php echo htmlspecialchars($rutaImagen); ?></div>';">
                                    <?php else: ?>
                                        <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #999; font-size: 12px; text-align: center;">
                                            Sin imagen<br>
                                            <small>Archivo: <?php echo htmlspecialchars($archivo); ?></small>
                                        </div>
                                    <?php endif; ?>
                                    <!-- Botón eliminar -->
                                    <button type="button" 
                                            class="galeria-btn-eliminar" 
                                            onclick="marcarFotoEliminar(<?php echo $foto['id']; ?>)"
                                            style="position: absolute; top: 8px; right: 8px; background: rgba(220, 53, 69, 0.9); color: white; border: none; border-radius: 50%; width: 32px; height: 32px; cursor: pointer; font-size: 18px; line-height: 1; display: flex; align-items: center; justify-content: center; transition: var(--transition);"
                                            title="Eliminar foto">
                                        ×
                                    </button>
                                </div>
                                
                                <!-- Información -->
                                <div style="padding: 15px;">
                                    <input type="hidden" name="galeria_existente[<?php echo $foto['id']; ?>][id]" value="<?php echo $foto['id']; ?>">
                                    <input type="hidden" name="galeria_existente[<?php echo $foto['id']; ?>][orden]" value="<?php echo $foto['orden']; ?>" class="galeria-orden-input">
                                    
                                    <!-- Checkbox para eliminar (oculto, se marca con JavaScript) -->
                                    <input type="checkbox" 
                                           name="galeria_eliminar[]" 
                                           value="<?php echo $foto['id']; ?>" 
                                           id="galeria_eliminar_<?php echo $foto['id']; ?>"
                                           style="position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0;"
                                           class="galeria-eliminar-checkbox">
                                </div>
                            </div>
                        <?php endforeach; ?>
                    </div>
                <?php endif; ?>
            </div>
        </div>
        
        <!-- TAB VIDEOS -->
        <div id="tab-videos" class="tab-content">
            <h3 style="margin-bottom: 20px;">Galería de Videos</h3>
            
            <!-- Subir nuevos videos -->
            <div class="form-group" style="margin-bottom: 30px; padding: 20px; background: var(--color-bg-primary); border-radius: var(--border-radius); border: 1px solid var(--color-border);">
                <label for="videos-upload" style="font-weight: 600; margin-bottom: 10px; display: block;">Subir Nuevos Videos</label>
                <input type="file" id="videos-upload" name="videos-upload[]" accept="video/*" multiple>
                <button type="button" id="btn-subir-videos" style="margin-top: 10px; padding: 10px 20px; background: var(--color-primary); color: white; border: none; border-radius: var(--border-radius); cursor: pointer; font-weight: 600;">
                    Subir Videos Seleccionados
                </button>
                <div id="videos-upload-status" style="margin-top: 10px; display: none;"></div>
                <small style="display:block;margin-top:8px;color:var(--color-text-secondary);">
                    Puede seleccionar múltiples videos a la vez. Formatos permitidos: MP4, WebM, OGG, MOV, AVI. Tamaño máximo: 100MB por video.
                </small>
            </div>
            
            <!-- Input oculto para el formulario principal (mantener compatibilidad) -->
            <input type="file" id="videos" name="videos[]" accept="video/*" multiple style="display: none;">
            
            <!-- Videos existentes -->
            <div class="form-group">
                <h4 style="font-size: 18px; margin-bottom: 20px; color: var(--color-text-primary); font-weight: 600;">
                    Videos en la Galería (<?php echo count($videos); ?>)
                </h4>
                
                <?php if (empty($videos)): ?>
                    <p style="color: var(--color-text-secondary); font-size: 14px; padding: 20px; background: var(--color-bg-primary); border-radius: var(--border-radius); text-align: center;">
                        No hay videos en la galería. Suba videos usando el campo de arriba.
                    </p>
                <?php else: ?>
                    <div id="videos-grid" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px;">
                        <?php foreach ($videos as $index => $video): ?>
                            <div class="videos-video-item" data-video-id="<?php echo $video['id']; ?>" style="border: 1px solid var(--color-border); border-radius: var(--border-radius); overflow: hidden; background: var(--color-bg-secondary);">
                                <!-- Video -->
                                <div style="position: relative; width: 100%; padding-top: 56.25%; background: var(--color-bg-primary); overflow: hidden;">
                                    <?php 
                                    $archivo = isset($video['archivo']) ? $video['archivo'] : '';
                                    $rutaVideo = !empty($archivo) ? '../' . htmlspecialchars($archivo) : '';
                                    ?>
                                    <?php if (!empty($rutaVideo)): ?>
                                        <video 
                                            src="<?php echo $rutaVideo; ?>" 
                                            style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;"
                                            controls
                                            preload="metadata"
                                            onerror="console.error('Error cargando video: <?php echo $rutaVideo; ?>'); this.style.display='none'; this.parentElement.innerHTML='<div style=\'position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#999;font-size:12px;\'>Video no encontrado<br><?php echo htmlspecialchars($rutaVideo); ?></div>';">
                                        </video>
                                    <?php else: ?>
                                        <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #999; font-size: 12px; text-align: center;">
                                            Sin video<br>
                                            <small>Archivo: <?php echo htmlspecialchars($archivo); ?></small>
                                        </div>
                                    <?php endif; ?>
                                    <!-- Botón eliminar -->
                                    <button type="button" 
                                            class="videos-btn-eliminar" 
                                            onclick="marcarVideoEliminar(<?php echo $video['id']; ?>)"
                                            style="position: absolute; top: 8px; right: 8px; background: rgba(220, 53, 69, 0.9); color: white; border: none; border-radius: 50%; width: 32px; height: 32px; cursor: pointer; font-size: 18px; line-height: 1; display: flex; align-items: center; justify-content: center; transition: var(--transition); z-index: 10;"
                                            title="Eliminar video">
                                        ×
                                    </button>
                                </div>
                                
                                <!-- Información -->
                                <div style="padding: 15px;">
                                    <input type="hidden" name="videos_existente[<?php echo $video['id']; ?>][id]" value="<?php echo $video['id']; ?>">
                                    <input type="hidden" name="videos_existente[<?php echo $video['id']; ?>][orden]" value="<?php echo $video['orden']; ?>" class="videos-orden-input">
                                    
                                    <!-- Checkbox para eliminar (oculto, se marca con JavaScript) -->
                                    <input type="checkbox" 
                                           name="videos_eliminar[]" 
                                           value="<?php echo $video['id']; ?>" 
                                           id="videos_eliminar_<?php echo $video['id']; ?>"
                                           style="position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0;"
                                           class="videos-eliminar-checkbox">
                                    
                                    <?php if (!empty($video['titulo'])): ?>
                                        <p style="margin: 0; font-size: 14px; font-weight: 500; color: var(--color-text-primary);">
                                            <?php echo htmlspecialchars($video['titulo']); ?>
                                        </p>
                                    <?php endif; ?>
                                    <?php if (!empty($video['tamaño_bytes'])): ?>
                                        <p style="margin: 5px 0 0 0; font-size: 12px; color: var(--color-text-secondary);">
                                            Tamaño: <?php echo number_format($video['tamaño_bytes'] / 1024 / 1024, 2); ?> MB
                                        </p>
                                    <?php endif; ?>
                                    
                                    <!-- Información de asignaciones -->
                                    <?php 
                                    $invitadosAsignados = $video['invitados_asignados'] ?? [];
                                    $totalAsignaciones = $video['total_asignaciones'] ?? 0;
                                    ?>
                                    <div style="margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--color-border);">
                                        <p style="margin: 0 0 8px 0; font-size: 12px; color: var(--color-text-secondary);">
                                            <strong>Asignado a:</strong> <?php echo $totalAsignaciones; ?> invitado(s)
                                        </p>
                                        <?php if ($totalAsignaciones > 0): ?>
                                            <p style="margin: 0; font-size: 11px; color: var(--color-text-secondary); max-height: 40px; overflow-y: auto;">
                                                <?php 
                                                // Obtener nombres de los invitados asignados
                                                $nombresAsignados = [];
                                                foreach ($todosInvitados as $inv) {
                                                    // Convertir ambos a enteros para comparar
                                                    if (in_array((int)$inv['id'], array_map('intval', $invitadosAsignados))) {
                                                        $nombresAsignados[] = htmlspecialchars($inv['nombre_cortesia'] . ' ' . $inv['nombre_invitado']);
                                                    }
                                                }
                                                echo implode(', ', array_slice($nombresAsignados, 0, 3));
                                                if (count($nombresAsignados) > 3) {
                                                    echo ' y ' . (count($nombresAsignados) - 3) . ' más...';
                                                }
                                                ?>
                                            </p>
                                        <?php endif; ?>
                                        
                                        <!-- Botón para asignar invitados -->
                                        <button type="button" 
                                                class="btn-video-asignar" 
                                                onclick="abrirModalAsignarVideo(<?php echo $video['id']; ?>, <?php echo htmlspecialchars(json_encode(array_map('intval', $invitadosAsignados))); ?>)"
                                                style="margin-top: 8px; width: 100%; padding: 8px 12px; background: var(--color-primary); color: white; border: none; border-radius: var(--border-radius); cursor: pointer; font-size: 12px; font-weight: 500; transition: var(--transition);">
                                            📋 Asignar Invitados
                                        </button>
                                        
                                        <!-- Campo hidden para guardar asignaciones (se llenará con JavaScript) -->
                                        <div id="video_asignaciones_hidden_<?php echo $video['id']; ?>">
                                            <?php 
                                            // Generar campos hidden para invitados ya asignados
                                            if (!empty($invitadosAsignados)) {
                                                foreach ($invitadosAsignados as $invId) {
                                                    echo '<input type="hidden" name="video_asignaciones[' . $video['id'] . '][]" value="' . intval($invId) . '">';
                                                }
                                            }
                                            ?>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        <?php endforeach; ?>
                    </div>
                <?php endif; ?>
            </div>
        </div>
        
        <div class="form-actions">
        <button type="submit" class="btn">Guardar Configuración</button>
        </div>
    </form>
</div> <!-- fin tabs-wrapper -->

<!-- Modal del Mapa -->
<div class="map-modal-overlay" id="map-modal-overlay" onclick="if(event.target === this) cerrarModalMapa()">
    <div class="map-modal">
        <div class="map-modal-header">
            <h3>Seleccionar Ubicación en el Mapa</h3>
            <button class="map-modal-close" onclick="cerrarModalMapa()">&times;</button>
        </div>
        <div class="map-modal-body">
            <p style="margin: 0 0 15px 0; color: var(--color-text-secondary); font-size: 14px;">
                Haga clic en el mapa para seleccionar la ubicación exacta del evento. También puede arrastrar el marcador.
            </p>
            <div id="map"></div>
            <div class="map-coordinates">
                <div class="form-group" style="margin-bottom: 0;">
                    <label for="latitud-modal">Latitud</label>
                    <input type="text" id="latitud-modal" readonly style="font-family: monospace;">
                </div>
                <div class="form-group" style="margin-bottom: 0;">
                    <label for="longitud-modal">Longitud</label>
                    <input type="text" id="longitud-modal" readonly style="font-family: monospace;">
                </div>
            </div>
            <div style="margin-top: 15px; display: flex; gap: 10px; justify-content: flex-end;">
                <button type="button" class="btn btn-secondary" onclick="cerrarModalMapa()" style="background: var(--color-text-secondary);">Cancelar</button>
                <button type="button" class="btn" onclick="guardarCoordenadas()">Guardar Ubicación</button>
            </div>
        </div>
    </div>
</div>

<!-- Leaflet CSS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<!-- Leaflet JS -->
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<!-- Modal para asignar invitados a videos -->
<div id="modal-asignar-video" class="modal-overlay" style="display: none; z-index: 10000;">
    <div class="modal-content" style="max-width: 600px; max-height: 80vh; overflow-y: auto;">
        <div class="modal-header">
            <h3 id="modal-asignar-video-titulo">Asignar Invitados al Video</h3>
            <button type="button" class="modal-close" onclick="cerrarModalAsignarVideo()">&times;</button>
        </div>
        <div class="modal-body">
            <p style="margin: 0 0 15px 0; color: var(--color-text-secondary); font-size: 14px;">
                Selecciona los invitados que verán este video en su invitación.
            </p>
            
            <!-- Búsqueda de invitados -->
            <div style="margin-bottom: 15px;">
                <input type="text" 
                       id="buscar-invitado-video" 
                       placeholder="Buscar invitado..." 
                       style="width: 100%; padding: 10px; border: 1px solid var(--color-border); border-radius: var(--border-radius); font-size: 14px;"
                       onkeyup="filtrarInvitadosVideo()">
            </div>
            
            <!-- Lista de invitados -->
            <div id="lista-invitados-video" style="max-height: 400px; overflow-y: auto; border: 1px solid var(--color-border); border-radius: var(--border-radius); padding: 10px;">
                <?php foreach ($todosInvitados as $invitado): ?>
                    <label style="display: flex; align-items: center; padding: 8px; margin: 0; cursor: pointer; border-radius: 4px; transition: background 0.2s;"
                           class="invitado-video-item"
                           data-invitado-id="<?php echo $invitado['id']; ?>"
                           data-invitado-nombre="<?php echo htmlspecialchars(strtolower($invitado['nombre_cortesia'] . ' ' . $invitado['nombre_invitado'])); ?>">
                        <input type="checkbox" 
                               class="checkbox-invitado-video" 
                               value="<?php echo $invitado['id']; ?>"
                               style="margin-right: 10px; cursor: pointer;">
                        <div style="flex: 1;">
                            <div style="font-weight: 500; color: var(--color-text-primary);">
                                <?php echo htmlspecialchars($invitado['nombre_cortesia'] . ' ' . $invitado['nombre_invitado']); ?>
                            </div>
                            <?php if (!empty($invitado['email'])): ?>
                                <div style="font-size: 12px; color: var(--color-text-secondary);">
                                    <?php echo htmlspecialchars($invitado['email']); ?>
                                </div>
                            <?php endif; ?>
                            <div style="font-size: 11px; color: var(--color-text-secondary); margin-top: 2px;">
                                Estado: <span class="badge badge-<?php echo strtolower($invitado['estado']); ?>"><?php echo $invitado['estado']; ?></span>
                            </div>
                        </div>
                    </label>
                <?php endforeach; ?>
                
                <?php if (empty($todosInvitados)): ?>
                    <p style="text-align: center; color: var(--color-text-secondary); padding: 20px;">
                        No hay invitados registrados aún.
                    </p>
                <?php endif; ?>
            </div>
            
            <!-- Botones de acción rápida -->
            <div style="margin-top: 15px; display: flex; gap: 10px; flex-wrap: wrap;">
                <button type="button" 
                        onclick="seleccionarTodosInvitadosVideo()"
                        style="padding: 8px 16px; background: var(--color-primary); color: white; border: none; border-radius: var(--border-radius); cursor: pointer; font-size: 13px;">
                    Seleccionar Todos
                </button>
                <button type="button" 
                        onclick="deseleccionarTodosInvitadosVideo()"
                        style="padding: 8px 16px; background: var(--color-bg-secondary); color: var(--color-text-primary); border: 1px solid var(--color-border); border-radius: var(--border-radius); cursor: pointer; font-size: 13px;">
                    Deseleccionar Todos
                </button>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" 
                    class="btn btn-secondary" 
                    onclick="cerrarModalAsignarVideo()">
                Cancelar
            </button>
            <button type="button" 
                    class="btn btn-primary" 
                    onclick="guardarAsignacionVideo()">
                Guardar Asignación
            </button>
        </div>
    </div>
</div>

<script>
let map;
let marker;

// Abrir modal del mapa
function abrirModalMapa() {
    const modal = document.getElementById('map-modal-overlay');
    modal.classList.add('show');
    
    // Inicializar mapa solo cuando se abre el modal
    setTimeout(function() {
        initMap();
    }, 100);
}

// Cerrar modal del mapa
function cerrarModalMapa() {
    const modal = document.getElementById('map-modal-overlay');
    modal.classList.remove('show');
    
    // Destruir mapa al cerrar para evitar problemas
    if (map) {
        map.remove();
        map = null;
        marker = null;
    }
}

// Inicializar Leaflet Map
function initMap() {
    if (map) return; // Ya está inicializado
    
    const latInput = document.getElementById('latitud');
    const lngInput = document.getElementById('longitud');
    const coordInput = document.getElementById('direccion_evento');
    
    // Obtener coordenadas existentes o usar coordenadas por defecto (Ecuador)
    let lat = -2.170998;
    let lng = -79.922359;
    
    if (latInput && latInput.value && lngInput && lngInput.value) {
        lat = parseFloat(latInput.value);
        lng = parseFloat(lngInput.value);
    } else if (coordInput && coordInput.value) {
        const coords = coordInput.value.split(',');
        if (coords.length === 2) {
            lat = parseFloat(coords[0].trim());
            lng = parseFloat(coords[1].trim());
        }
    }
    
    // Crear mapa centrado en las coordenadas
    map = L.map('map').setView([lat, lng], 15);
    
    // Agregar capa de OpenStreetMap
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '© OpenStreetMap contributors',
        maxZoom: 19
    }).addTo(map);
    
    // Crear marcador inicial si hay coordenadas válidas
    if (!isNaN(lat) && !isNaN(lng) && lat !== -2.170998 && lng !== -79.922359) {
        marker = L.marker([lat, lng], { draggable: true }).addTo(map);
        
        // Evento al arrastrar el marcador
        marker.on('dragend', function(event) {
            const position = marker.getLatLng();
            updateCoordinatesModal(position.lat, position.lng);
        });
    }
    
    // Evento al hacer clic en el mapa
    map.on('click', function(event) {
        const clickedLat = event.latlng.lat;
        const clickedLng = event.latlng.lng;
        
        // Actualizar marcador o crear uno nuevo
        if (marker) {
            marker.setLatLng([clickedLat, clickedLng]);
        } else {
            marker = L.marker([clickedLat, clickedLng], { draggable: true }).addTo(map);
            marker.on('dragend', function(event) {
                const position = marker.getLatLng();
                updateCoordinatesModal(position.lat, position.lng);
            });
        }
        
        // Actualizar inputs del modal
        updateCoordinatesModal(clickedLat, clickedLng);
    });
    
    // Actualizar coordenadas iniciales en el modal
    if (!isNaN(lat) && !isNaN(lng)) {
        updateCoordinatesModal(lat, lng);
    }
}

// Actualizar coordenadas en el modal
function updateCoordinatesModal(lat, lng) {
    document.getElementById('latitud-modal').value = lat.toFixed(6);
    document.getElementById('longitud-modal').value = lng.toFixed(6);
}

// Guardar coordenadas y cerrar modal
function guardarCoordenadas() {
    const lat = document.getElementById('latitud-modal').value;
    const lng = document.getElementById('longitud-modal').value;
    
    if (!lat || !lng) {
        alert('Por favor seleccione una ubicación en el mapa');
        return;
    }
    
    // Actualizar inputs principales
    document.getElementById('latitud').value = lat;
    document.getElementById('longitud').value = lng;
    document.getElementById('direccion_evento').value = lat + ',' + lng;
    
    // Cerrar modal
    cerrarModalMapa();
}

// Función para configurar campos según tipo de evento
function configurarCamposRequeridos() {
    const tipoPermitido = '<?php echo $tipo_permitido; ?>';
    const tipo = tipoPermitido === 'cumpleanos' ? 'cumpleaños' : tipoPermitido;
    
    // Configurar campos requeridos según el tipo
    if (tipo === 'boda') {
        const nombreNovia = document.getElementById('nombre_novia');
        const nombreNovio = document.getElementById('nombre_novio');
        if (nombreNovia) nombreNovia.required = true;
        if (nombreNovio) nombreNovio.required = true;
    } else if (tipo === 'cumpleaños') {
        const nombreHomenajeado = document.getElementById('nombre_homenajeado');
        if (nombreHomenajeado) nombreHomenajeado.required = true;
    } else if (tipo === 'quinceañera') {
        const nombreQuinceanera = document.getElementById('nombre_quinceanera');
        if (nombreQuinceanera) nombreQuinceanera.required = true;
    } else if (tipo === 'bautizo') {
        const nombreBautizado = document.getElementById('nombre_bautizado');
        if (nombreBautizado) nombreBautizado.required = true;
    } else if (tipo === 'reunion' || tipo === 'evento_social') {
        const nombreEventoSocial = document.getElementById('nombre_evento_social');
        if (nombreEventoSocial) nombreEventoSocial.required = true;
    }
}

// Funciones para manejar el itinerario
let itinerarioIndex = <?php echo count($itinerario); ?>;

function toggleItinerario() {
    const select = document.getElementById('tiene_itinerario');
    const container = document.getElementById('itinerario-container');
    
    if (select.value === '1') {
        container.style.display = 'block';
    } else {
        container.style.display = 'none';
    }
}

function toggleItinerarioItem(index) {
    const item = document.querySelector(`.itinerario-item[data-index="${index}"]`);
    if (item) {
        item.classList.toggle('collapsed');
    }
}

function actualizarTituloItinerario(index, nombre) {
    const item = document.querySelector(`.itinerario-item[data-index="${index}"]`);
    if (item) {
        const titulo = item.querySelector('.itinerario-item-title');
        if (titulo) {
            titulo.textContent = nombre || 'Item ' + (parseInt(index) + 1);
        }
    }
}

function agregarItinerarioItem() {
    const container = document.getElementById('itinerario-items');
    
    // Colapsar todos los items existentes
    document.querySelectorAll('.itinerario-item').forEach(function(item) {
        item.classList.add('collapsed');
    });
    
    // Crear nuevo item
    const nuevoItem = document.createElement('div');
    nuevoItem.className = 'itinerario-item';
    nuevoItem.setAttribute('data-index', itinerarioIndex);
    
    nuevoItem.innerHTML = `
        <div class="itinerario-item-header" onclick="toggleItinerarioItem(${itinerarioIndex})">
            <span class="itinerario-item-title">Nuevo Item</span>
            <span class="itinerario-item-actions">
                <button type="button" class="itinerario-btn-remove" onclick="event.stopPropagation(); eliminarItinerarioItem(${itinerarioIndex});" title="Eliminar">
                    ×
                </button>
                <span class="itinerario-toggle-icon">▼</span>
            </span>
        </div>
        <div class="itinerario-item-content" id="itinerario-content-${itinerarioIndex}">
            <input type="hidden" name="itinerario[${itinerarioIndex}][id]" value="">
            <input type="hidden" name="itinerario[${itinerarioIndex}][orden]" value="${itinerarioIndex}" class="itinerario-orden">
            
            <div class="form-row">
                <div class="form-group">
                    <label>Fecha *</label>
                    <input type="date" name="itinerario[${itinerarioIndex}][fecha]" required>
                </div>
                <div class="form-group">
                    <label>Hora</label>
                    <input type="time" name="itinerario[${itinerarioIndex}][hora]">
                </div>
            </div>
            
            <div class="form-group">
                <label>Nombre del Evento/Actividad *</label>
                <input type="text" name="itinerario[${itinerarioIndex}][nombre]" 
                       required
                       onchange="actualizarTituloItinerario(${itinerarioIndex}, this.value)">
            </div>
            
            <div class="form-group">
                <label>Descripción</label>
                <textarea name="itinerario[${itinerarioIndex}][descripcion]" rows="3"></textarea>
            </div>
        </div>
    `;
    
    container.appendChild(nuevoItem);
    itinerarioIndex++;
    
    // Enfocar el campo de nombre
    setTimeout(function() {
        const nombreInput = nuevoItem.querySelector('input[name*="[nombre]"]');
        if (nombreInput) {
            nombreInput.focus();
        }
    }, 100);
}

function eliminarItinerarioItem(index) {
    if (!confirm('¿Está seguro de eliminar este item del itinerario?')) {
        return;
    }
    
    const item = document.querySelector(`.itinerario-item[data-index="${index}"]`);
    if (item) {
        item.remove();
        // Reindexar los items restantes
        reindexarItinerarioItems();
    }
}

function reindexarItinerarioItems() {
    const items = document.querySelectorAll('.itinerario-item');
    items.forEach(function(item, newIndex) {
        const oldIndex = item.getAttribute('data-index');
        item.setAttribute('data-index', newIndex);
        
        // Actualizar todos los atributos name y onclick
        item.querySelectorAll('input, textarea, select').forEach(function(input) {
            const name = input.getAttribute('name');
            if (name && name.includes('itinerario[')) {
                const newName = name.replace(/itinerario\[\d+\]/, `itinerario[${newIndex}]`);
                input.setAttribute('name', newName);
            }
        });
        
        // Actualizar onclick del header
        const header = item.querySelector('.itinerario-item-header');
        if (header) {
            header.setAttribute('onclick', `toggleItinerarioItem(${newIndex})`);
        }
        
        // Actualizar onclick del botón eliminar
        const btnRemove = item.querySelector('.itinerario-btn-remove');
        if (btnRemove) {
            btnRemove.setAttribute('onclick', `event.stopPropagation(); eliminarItinerarioItem(${newIndex});`);
        }
        
        // Actualizar id del content
        const content = item.querySelector('.itinerario-item-content');
        if (content) {
            content.id = `itinerario-content-${newIndex}`;
        }
        
        // Actualizar onchange del nombre
        const nombreInput = item.querySelector('input[name*="[nombre]"]');
        if (nombreInput) {
            nombreInput.setAttribute('onchange', `actualizarTituloItinerario(${newIndex}, this.value)`);
        }
        
        // Actualizar orden
        const ordenInput = item.querySelector('.itinerario-orden');
        if (ordenInput) {
            ordenInput.value = newIndex;
        }
    });
}

// Funciones para manejar el dresscode
let dresscodeIndex = <?php echo count($dresscode); ?>;

function toggleDresscode() {
    const select = document.getElementById('tiene_dresscode');
    const container = document.getElementById('dresscode-container');
    
    if (select.value === '1') {
        container.style.display = 'block';
    } else {
        container.style.display = 'none';
    }
}

function toggleDresscodeItem(index) {
    const item = document.querySelector(`.dresscode-item[data-index="${index}"]`);
    if (item) {
        item.classList.toggle('collapsed');
    }
}

function actualizarTituloDresscode(index, nombre) {
    const item = document.querySelector(`.dresscode-item[data-index="${index}"]`);
    if (item) {
        const titulo = item.querySelector('.dresscode-item-title');
        if (titulo) {
            titulo.textContent = nombre || 'Opción ' + (parseInt(index) + 1);
        }
    }
}

function cambiarTipoDresscode(index, tipo) {
    const linkField = document.getElementById('dresscode-link-' + index);
    const imagenField = document.getElementById('dresscode-imagen-' + index);
    const linkInput = linkField ? linkField.querySelector('input[type="url"], input[name*="[valor]"]') : null;
    const imagenValorInput = document.querySelector(`.dresscode-item[data-index="${index}"] .dresscode-imagen-valor`);
    
    if (tipo === 'link_pinterest') {
        if (linkField) linkField.style.display = 'block';
        if (imagenField) imagenField.style.display = 'none';
        // Habilitar el campo de URL y deshabilitar el de imagen
        if (linkInput) {
            linkInput.disabled = false;
            linkInput.name = `dresscode[${index}][valor]`;
        }
        if (imagenValorInput) {
            imagenValorInput.disabled = true;
            imagenValorInput.name = `dresscode_imagen_valor_disabled[${index}]`;
        }
    } else if (tipo === 'imagen') {
        if (linkField) linkField.style.display = 'none';
        if (imagenField) imagenField.style.display = 'block';
        // Deshabilitar el campo de URL y habilitar el de imagen
        if (linkInput) {
            linkInput.disabled = true;
            linkInput.name = `dresscode_link_valor_disabled[${index}]`;
        }
        if (imagenValorInput) {
            imagenValorInput.disabled = false;
            imagenValorInput.name = `dresscode[${index}][valor]`;
        }
    } else {
        // Sin tipo seleccionado, ocultar ambos
        if (linkField) linkField.style.display = 'none';
        if (imagenField) imagenField.style.display = 'none';
    }
}

function agregarDresscodeItem() {
    const container = document.getElementById('dresscode-items');
    
    // Colapsar todos los items existentes
    document.querySelectorAll('.dresscode-item').forEach(function(item) {
        item.classList.add('collapsed');
    });
    
    // Crear nuevo item
    const nuevoItem = document.createElement('div');
    nuevoItem.className = 'dresscode-item';
    nuevoItem.setAttribute('data-index', dresscodeIndex);
    
    nuevoItem.innerHTML = `
        <div class="dresscode-item-header" onclick="toggleDresscodeItem(${dresscodeIndex})">
            <span class="dresscode-item-title">Nueva Opción</span>
            <span class="dresscode-item-actions">
                <button type="button" class="dresscode-btn-remove" onclick="event.stopPropagation(); eliminarDresscodeItem(${dresscodeIndex});" title="Eliminar">
                    ×
                </button>
                <span class="dresscode-toggle-icon">▼</span>
            </span>
        </div>
        <div class="dresscode-item-content" id="dresscode-content-${dresscodeIndex}">
            <input type="hidden" name="dresscode[${dresscodeIndex}][id]" value="">
            <input type="hidden" name="dresscode[${dresscodeIndex}][orden]" value="${dresscodeIndex}" class="dresscode-orden">
            
            <div class="form-group">
                <label>Nombre de la Opción *</label>
                <input type="text" name="dresscode[${dresscodeIndex}][nombre_opcion]" 
                       required
                       placeholder="Ej: Vestido largo, Traje formal, Color azul"
                       onchange="actualizarTituloDresscode(${dresscodeIndex}, this.value)">
            </div>
            
            <div class="form-group">
                <label>Tipo *</label>
                <select name="dresscode[${dresscodeIndex}][tipo]" 
                        required
                        onchange="cambiarTipoDresscode(${dresscodeIndex}, this.value)">
                    <option value="">Seleccione...</option>
                    <option value="link_pinterest">Link de Pinterest</option>
                    <option value="imagen">Imagen</option>
                </select>
            </div>
            
            <div class="dresscode-field-link" id="dresscode-link-${dresscodeIndex}" style="display: none;">
                <div class="form-group">
                    <label>URL de Pinterest *</label>
                    <input type="url" name="dresscode_link_valor_disabled[${dresscodeIndex}]" 
                           placeholder="https://www.pinterest.com/..." disabled>
                </div>
            </div>
            
            <div class="dresscode-field-imagen" id="dresscode-imagen-${dresscodeIndex}" style="display: none;">
                <div class="form-group">
                    <label>Imagen</label>
                    <input type="file" name="dresscode_imagen[${dresscodeIndex}]" accept="image/jpeg,image/jpg,image/png,image/webp,image/gif">
                    <input type="hidden" name="dresscode_imagen_valor_disabled[${dresscodeIndex}]" value="" class="dresscode-imagen-valor" disabled>
                </div>
            </div>
        </div>
    `;
    
    container.appendChild(nuevoItem);
    dresscodeIndex++;
    
    // Enfocar el campo de nombre
    setTimeout(function() {
        const nombreInput = nuevoItem.querySelector('input[name*="[nombre_opcion]"]');
        if (nombreInput) {
            nombreInput.focus();
        }
    }, 100);
}

function eliminarDresscodeItem(index) {
    if (!confirm('¿Está seguro de eliminar esta opción del dress code?')) {
        return;
    }
    
    const item = document.querySelector(`.dresscode-item[data-index="${index}"]`);
    if (item) {
        item.remove();
        // Reindexar los items restantes
        reindexarDresscodeItems();
    }
}

function reindexarDresscodeItems() {
    const items = document.querySelectorAll('.dresscode-item');
    items.forEach(function(item, newIndex) {
        const oldIndex = item.getAttribute('data-index');
        item.setAttribute('data-index', newIndex);
        
        // Actualizar todos los atributos name y onclick
        item.querySelectorAll('input, textarea, select').forEach(function(input) {
            const name = input.getAttribute('name');
            if (name && name.includes('dresscode[')) {
                const newName = name.replace(/dresscode\[\d+\]/, `dresscode[${newIndex}]`);
                input.setAttribute('name', newName);
            }
            if (name && name.includes('dresscode_imagen[')) {
                const newName = name.replace(/dresscode_imagen\[\d+\]/, `dresscode_imagen[${newIndex}]`);
                input.setAttribute('name', newName);
            }
        });
        
        // Actualizar onclick del header
        const header = item.querySelector('.dresscode-item-header');
        if (header) {
            header.setAttribute('onclick', `toggleDresscodeItem(${newIndex})`);
        }
        
        // Actualizar onclick del botón eliminar
        const btnRemove = item.querySelector('.dresscode-btn-remove');
        if (btnRemove) {
            btnRemove.setAttribute('onclick', `event.stopPropagation(); eliminarDresscodeItem(${newIndex});`);
        }
        
        // Actualizar id del content y campos
        const content = item.querySelector('.dresscode-item-content');
        if (content) {
            content.id = `dresscode-content-${newIndex}`;
        }
        
        const linkField = item.querySelector('.dresscode-field-link');
        if (linkField) {
            linkField.id = `dresscode-link-${newIndex}`;
        }
        
        const imagenField = item.querySelector('.dresscode-field-imagen');
        if (imagenField) {
            imagenField.id = `dresscode-imagen-${newIndex}`;
        }
        
        // Actualizar onchange del nombre
        const nombreInput = item.querySelector('input[name*="[nombre_opcion]"]');
        if (nombreInput) {
            nombreInput.setAttribute('onchange', `actualizarTituloDresscode(${newIndex}, this.value)`);
        }
        
        // Actualizar onchange del tipo
        const tipoSelect = item.querySelector('select[name*="[tipo]"]');
        if (tipoSelect) {
            tipoSelect.setAttribute('onchange', `cambiarTipoDresscode(${newIndex}, this.value)`);
        }
        
        // Actualizar orden
        const ordenInput = item.querySelector('.dresscode-orden');
        if (ordenInput) {
            ordenInput.value = newIndex;
        }
    });
}

// ============================================
// FUNCIONES DE COLORES RESERVADOS
// ============================================

let colorReservadoIndex = <?php echo count($coloresReservados); ?>;

function agregarColorReservado() {
    const container = document.getElementById('colores-reservados-grid');
    const colorDefecto = '#' + Math.floor(Math.random()*16777215).toString(16).padStart(6, '0').toUpperCase();
    
    const nuevoItem = document.createElement('div');
    nuevoItem.className = 'color-reservado-item';
    nuevoItem.setAttribute('data-index', colorReservadoIndex);
    
    nuevoItem.innerHTML = `
        <input type="hidden" name="colores_reservados[${colorReservadoIndex}][id]" value="">
        <input type="color" 
               class="color-reservado-preview" 
               value="${colorDefecto}"
               onchange="actualizarColorReservado(this, ${colorReservadoIndex})">
        <input type="text" 
               class="color-reservado-input" 
               name="colores_reservados[${colorReservadoIndex}][color]" 
               value="${colorDefecto}"
               placeholder="#000000"
               maxlength="7"
               onchange="sincronizarColorPicker(this, ${colorReservadoIndex})">
        <input type="text" 
               class="color-reservado-nombre" 
               name="colores_reservados[${colorReservadoIndex}][nombre]" 
               value=""
               placeholder="Nombre (opcional)">
        <button type="button" class="color-reservado-eliminar" onclick="eliminarColorReservado(this)" title="Eliminar color">×</button>
    `;
    
    container.appendChild(nuevoItem);
    colorReservadoIndex++;
    
    // Animar la entrada
    nuevoItem.style.opacity = '0';
    nuevoItem.style.transform = 'scale(0.8)';
    setTimeout(() => {
        nuevoItem.style.transition = 'all 0.3s ease';
        nuevoItem.style.opacity = '1';
        nuevoItem.style.transform = 'scale(1)';
    }, 10);
}

function eliminarColorReservado(button) {
    const item = button.closest('.color-reservado-item');
    if (item) {
        item.style.transition = 'all 0.3s ease';
        item.style.opacity = '0';
        item.style.transform = 'scale(0.8)';
        setTimeout(() => {
            item.remove();
            reindexarColoresReservados();
        }, 300);
    }
}

function actualizarColorReservado(colorPicker, index) {
    const item = colorPicker.closest('.color-reservado-item');
    const inputText = item.querySelector('.color-reservado-input');
    if (inputText) {
        inputText.value = colorPicker.value.toUpperCase();
    }
}

function sincronizarColorPicker(inputText, index) {
    let valor = inputText.value.trim();
    
    // Asegurar que empiece con #
    if (!valor.startsWith('#')) {
        valor = '#' + valor;
    }
    
    // Validar formato
    if (/^#[0-9A-Fa-f]{6}$/.test(valor)) {
        const item = inputText.closest('.color-reservado-item');
        const colorPicker = item.querySelector('.color-reservado-preview');
        if (colorPicker) {
            colorPicker.value = valor;
        }
        inputText.value = valor.toUpperCase();
    } else {
        inputText.style.borderColor = 'var(--color-danger)';
        setTimeout(() => {
            inputText.style.borderColor = '';
        }, 2000);
    }
}

function reindexarColoresReservados() {
    const items = document.querySelectorAll('.color-reservado-item');
    items.forEach((item, newIndex) => {
        item.setAttribute('data-index', newIndex);
        
        // Actualizar nombres de los inputs
        item.querySelectorAll('input').forEach(input => {
            const name = input.getAttribute('name');
            if (name) {
                input.setAttribute('name', name.replace(/\[\d+\]/, `[${newIndex}]`));
            }
            
            const onchange = input.getAttribute('onchange');
            if (onchange) {
                input.setAttribute('onchange', onchange.replace(/\d+/, newIndex));
            }
        });
    });
}

// Ejecutar al cargar la página
document.addEventListener('DOMContentLoaded', function() {
    // Configurar campos requeridos
    configurarCamposRequeridos();
    
    // Inicializar items del itinerario como colapsados excepto el primero
    const itemsItinerario = document.querySelectorAll('.itinerario-item');
    itemsItinerario.forEach(function(item, index) {
        if (index > 0) {
            item.classList.add('collapsed');
        }
    });
    
    // Inicializar items del dresscode como colapsados excepto el primero
    const itemsDresscode = document.querySelectorAll('.dresscode-item');
    itemsDresscode.forEach(function(item, index) {
        if (index > 0) {
            item.classList.add('collapsed');
        }
    });
    
    // Inicializar items de cuentas bancarias como colapsados excepto el primero
    const itemsCuentas = document.querySelectorAll('.cuenta-bancaria-item');
    itemsCuentas.forEach(function(item, index) {
        if (index > 0) {
            item.classList.add('collapsed');
        }
    });
    
    // Inicializar índices de botones de hospedaje existentes
    document.querySelectorAll('[id^="hospedaje-botones-"]').forEach(function(container) {
        const hospedajeIndex = container.id.replace('hospedaje-botones-', '');
        const botonesExistentes = container.querySelectorAll('.hospedaje-boton-item').length;
        if (!window.hospedajeBotonIndex) {
            window.hospedajeBotonIndex = {};
        }
        window.hospedajeBotonIndex[hospedajeIndex] = botonesExistentes;
    });
    
    // Inicializar botones de hospedaje como colapsados excepto el primero de cada hotel
    document.querySelectorAll('[id^="hospedaje-botones-"]').forEach(function(container) {
        const botones = container.querySelectorAll('.hospedaje-boton-item');
        botones.forEach(function(boton, index) {
            if (index > 0) {
                boton.classList.add('collapsed');
            }
        });
    });
    
    // Mostrar toasts si hay mensajes
    <?php if ($error): ?>
    mostrarToastConfiguracion('error', '<?php echo addslashes($error); ?>');
    <?php endif; ?>
    
    <?php if ($success): ?>
    mostrarToastConfiguracion('success', '<?php echo addslashes($success); ?>');
    <?php endif; ?>
});

// Funciones para manejar el obsequio (nuevo sistema múltiple)
let cuentaBancariaIndex = <?php echo count($cuentasBancarias); ?>;

function toggleObsequioSection() {
    const select = document.getElementById('tiene_obsequio');
    const container = document.getElementById('obsequio-container');
    
    if (select.value === '1') {
        container.style.display = 'block';
    } else {
        container.style.display = 'none';
    }
}

function toggleSobreCerrado() {
    const checkbox = document.getElementById('tiene_sobre_cerrado');
    const container = document.getElementById('sobre-cerrado-container');
    
    if (checkbox && checkbox.checked) {
        container.style.display = 'block';
    } else {
        container.style.display = 'none';
    }
}

function toggleCuentaBancaria(index) {
    const item = document.querySelector(`.cuenta-bancaria-item[data-index="${index}"]`);
    if (item) {
        item.classList.toggle('collapsed');
        const content = document.getElementById(`cuenta-content-${index}`);
        if (content) {
            content.style.display = item.classList.contains('collapsed') ? 'none' : 'block';
        }
    }
}

function actualizarTituloCuenta(index, banco) {
    const item = document.querySelector(`.cuenta-bancaria-item[data-index="${index}"]`);
    if (item) {
        const titulo = item.querySelector('.cuenta-titulo');
        if (titulo) {
            titulo.textContent = banco || 'Cuenta ' + (parseInt(index) + 1);
        }
    }
}

function agregarCuentaBancaria() {
    const container = document.getElementById('cuentas-bancarias-container');
    const emptyMsg = document.getElementById('cuentas-empty-msg');
    
    // Ocultar mensaje de vacío
    if (emptyMsg) emptyMsg.style.display = 'none';
    
    // Colapsar cuentas existentes
    document.querySelectorAll('.cuenta-bancaria-item').forEach(function(item) {
        item.classList.add('collapsed');
        const content = item.querySelector('.obsequio-item-content');
        if (content) content.style.display = 'none';
    });
    
    const nuevoItem = document.createElement('div');
    nuevoItem.className = 'obsequio-item cuenta-bancaria-item';
    nuevoItem.setAttribute('data-index', cuentaBancariaIndex);
    
    nuevoItem.innerHTML = `
        <div class="obsequio-item-header" onclick="toggleCuentaBancaria(${cuentaBancariaIndex})">
            <div class="obsequio-item-title">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="obsequio-chevron">
                    <path d="M7.41 8.59L12 13.17L16.59 8.59L18 10L12 16L6 10L7.41 8.59Z" fill="currentColor"/>
                </svg>
                <span class="cuenta-titulo">Cuenta ${cuentaBancariaIndex + 1}</span>
            </div>
            <button type="button" class="btn-eliminar-obsequio" onclick="event.stopPropagation(); eliminarCuentaBancaria(${cuentaBancariaIndex})" title="Eliminar cuenta">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M6 19C6 20.1 6.9 21 8 21H16C17.1 21 18 20.1 18 19V7H6V19ZM19 4H15.5L14.5 3H9.5L8.5 4H5V6H19V4Z" fill="currentColor"/>
                </svg>
            </button>
        </div>
        <div class="obsequio-item-content" id="cuenta-content-${cuentaBancariaIndex}" style="display: block;">
            <input type="hidden" name="cuentas[${cuentaBancariaIndex}][id]" value="">
            <input type="hidden" name="cuentas[${cuentaBancariaIndex}][tipo]" value="transferencia">
            
            <div class="form-group">
                <label>Banco *</label>
                <input type="text" name="cuentas[${cuentaBancariaIndex}][banco]" 
                       placeholder="Ej: Banco del Pichincha" 
                       onchange="actualizarTituloCuenta(${cuentaBancariaIndex}, this.value)">
            </div>
            
            <div class="form-row">
                <div class="form-group">
                    <label>Tipo de Cuenta *</label>
                    <select name="cuentas[${cuentaBancariaIndex}][tipo_cuenta]">
                        <option value="">Seleccione...</option>
                        <option value="ahorros">Ahorros</option>
                        <option value="corriente">Corriente</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>Número de Cuenta *</label>
                    <input type="text" name="cuentas[${cuentaBancariaIndex}][numero_cuenta]" 
                           placeholder="Ej: 1234567890">
                </div>
            </div>
            
            <div class="form-group">
                <label>Titular de la Cuenta *</label>
                <input type="text" name="cuentas[${cuentaBancariaIndex}][titular]" 
                       placeholder="Nombre completo del titular">
            </div>
            
            <div class="form-row">
                <div class="form-group">
                    <label>Cédula *</label>
                    <input type="text" name="cuentas[${cuentaBancariaIndex}][cedula]" 
                           placeholder="Ej: 1234567890">
                </div>
                <div class="form-group">
                    <label>Correo Electrónico</label>
                    <input type="email" name="cuentas[${cuentaBancariaIndex}][correo]" 
                           placeholder="correo@ejemplo.com">
                </div>
            </div>
        </div>
    `;
    
    container.appendChild(nuevoItem);
    cuentaBancariaIndex++;
    
    // Animar entrada
    nuevoItem.style.opacity = '0';
    nuevoItem.style.transform = 'translateY(-10px)';
    setTimeout(() => {
        nuevoItem.style.transition = 'all 0.3s ease';
        nuevoItem.style.opacity = '1';
        nuevoItem.style.transform = 'translateY(0)';
    }, 10);
}

function eliminarCuentaBancaria(index) {
    if (!confirm('¿Está seguro de eliminar esta cuenta bancaria?')) return;
    
    const item = document.querySelector(`.cuenta-bancaria-item[data-index="${index}"]`);
    if (item) {
        item.style.transition = 'all 0.3s ease';
        item.style.opacity = '0';
        item.style.transform = 'translateY(-10px)';
        setTimeout(() => {
            item.remove();
            reindexarCuentasBancarias();
            
            // Mostrar mensaje vacío si no hay cuentas
            const cuentas = document.querySelectorAll('.cuenta-bancaria-item');
            const emptyMsg = document.getElementById('cuentas-empty-msg');
            if (cuentas.length === 0 && emptyMsg) {
                emptyMsg.style.display = 'block';
            }
        }, 300);
    }
}

function reindexarCuentasBancarias() {
    const items = document.querySelectorAll('.cuenta-bancaria-item');
    items.forEach(function(item, newIndex) {
        const oldIndex = item.getAttribute('data-index');
        item.setAttribute('data-index', newIndex);
        
        // Actualizar nombres de inputs
        item.querySelectorAll('input, select').forEach(function(input) {
            const name = input.getAttribute('name');
            if (name) {
                input.setAttribute('name', name.replace(/cuentas\[\d+\]/, `cuentas[${newIndex}]`));
            }
        });
        
        // Actualizar onclick del header
        const header = item.querySelector('.obsequio-item-header');
        if (header) {
            header.setAttribute('onclick', `toggleCuentaBancaria(${newIndex})`);
        }
        
        // Actualizar onclick del botón eliminar
        const btnEliminar = item.querySelector('.btn-eliminar-obsequio');
        if (btnEliminar) {
            btnEliminar.setAttribute('onclick', `event.stopPropagation(); eliminarCuentaBancaria(${newIndex})`);
        }
        
        // Actualizar id del content
        const content = item.querySelector('.obsequio-item-content');
        if (content) {
            content.id = `cuenta-content-${newIndex}`;
        }
        
        // Actualizar onchange del campo banco
        const inputBanco = item.querySelector('input[name*="[banco]"]');
        if (inputBanco) {
            inputBanco.setAttribute('onchange', `actualizarTituloCuenta(${newIndex}, this.value)`);
        }
        
        // Actualizar título si está vacío
        const titulo = item.querySelector('.cuenta-titulo');
        if (titulo && !titulo.textContent.includes('Banco')) {
            titulo.textContent = 'Cuenta ' + (newIndex + 1);
        }
    });
    
    cuentaBancariaIndex = items.length;
}

// Función para mostrar toast notifications
function mostrarToastConfiguracion(tipo, mensaje) {
    const container = document.getElementById('configuracion-toast-container');
    if (!container) return;
    
    const toast = document.createElement('div');
    toast.className = 'configuracion-toast configuracion-toast-' + (tipo === 'error' ? 'error' : 'success');
    
    const icon = document.createElement('span');
    icon.className = 'configuracion-toast-icon';
    icon.textContent = tipo === 'error' ? '✕' : '✓';
    
    const msg = document.createElement('div');
    msg.className = 'configuracion-toast-message';
    msg.textContent = mensaje;
    
    toast.appendChild(icon);
    toast.appendChild(msg);
    container.appendChild(toast);
    
    // Pequeño delay para activar transición
    setTimeout(function() {
        toast.classList.add('show');
    }, 10);
    
    // Quitar automáticamente después de 5 segundos (más tiempo que en invitados)
    setTimeout(function() {
        toast.classList.remove('show');
        setTimeout(function() {
            if (toast.parentNode) {
                toast.parentNode.removeChild(toast);
            }
        }, 300);
    }, 5000);
}

// Tabs de configuración
document.addEventListener('DOMContentLoaded', function() {
    const tabButtons = document.querySelectorAll('.tab-btn');
    const tabContents = document.querySelectorAll('.tab-content');

    function activarTab(id) {
        tabButtons.forEach(function(btn) {
            btn.classList.toggle('active', btn.getAttribute('data-tab') === id);
        });
        tabContents.forEach(function(tab) {
            tab.classList.toggle('active', tab.id === id);
        });
    }

    tabButtons.forEach(function(btn) {
        btn.addEventListener('click', function() {
            const id = this.getAttribute('data-tab');
            activarTab(id);
        });
    });

    // Tab por defecto
    activarTab('tab-general');
});

// Validación antes de enviar
document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('formEvento');
    if (!form) {
        console.error('Formulario formEvento no encontrado');
        return;
    }
    
    
    form.addEventListener('submit', function(e) {
        
        // DEBUG: Verificar archivos de video ANTES de cualquier validación
        const videosInput = document.getElementById('videos');
        if (videosInput && videosInput.files && videosInput.files.length > 0) {
            for (let i = 0; i < videosInput.files.length; i++) {
                const file = videosInput.files[i];
            }
        } else {
            if (videosInput) {
            } else {
            }
        }
        
        const tipoPermitido = '<?php echo $tipo_permitido; ?>';
        const tipo = tipoPermitido === 'cumpleanos' ? 'cumpleaños' : tipoPermitido;
        let valid = true;
        let mensaje = '';
        
        // Verificar si hay archivos para subir
        const galeriaInput = document.getElementById('galeria_fotos');
        const fotoPrincipalInput = document.getElementById('foto_principal');
        const sobrePrincipalInput = document.getElementById('sobre_principal');
        const sobreMovilesInput = document.getElementById('sobre_moviles');
        
        let hayArchivosParaSubir = false;
        
        // Verificar videos
        if (videosInput && videosInput.files && videosInput.files.length > 0) {
            hayArchivosParaSubir = true;
            for (let i = 0; i < videosInput.files.length; i++) {
                const file = videosInput.files[i];
            }
        } else {
            if (videosInput) {
            } else {
            }
        }
        
        // Verificar galería
        if (!hayArchivosParaSubir && galeriaInput && galeriaInput.files && galeriaInput.files.length > 0) {
            hayArchivosParaSubir = true;
        }
        
        // Verificar otros archivos
        if (!hayArchivosParaSubir) {
            if ((fotoPrincipalInput && fotoPrincipalInput.files && fotoPrincipalInput.files.length > 0) ||
                (sobrePrincipalInput && sobrePrincipalInput.files && sobrePrincipalInput.files.length > 0) ||
                (sobreMovilesInput && sobreMovilesInput.files && sobreMovilesInput.files.length > 0)) {
                hayArchivosParaSubir = true;
            }
        }
        
        // Si solo se están subiendo archivos, remover required de todos los campos y saltar validaciones
        if (hayArchivosParaSubir) {
            // Verificar si hay cambios en campos principales
            const fechaInput = document.getElementById('fecha_evento');
            const lugarInput = document.getElementById('lugar_evento');
            const nombreNoviaInput = document.getElementById('nombre_novia');
            const nombreNovioInput = document.getElementById('nombre_novio');
            
            const hayCambiosEnCampos = (fechaInput && fechaInput.value.trim()) ||
                                      (lugarInput && lugarInput.value.trim()) ||
                                      (nombreNoviaInput && nombreNoviaInput.value.trim()) ||
                                      (nombreNovioInput && nombreNovioInput.value.trim());
            
            // Si solo hay archivos y no hay cambios en campos, remover required y permitir sin validar
            if (!hayCambiosEnCampos) {
                
                // Remover required de TODOS los campos temporalmente
                const allRequiredFields = form.querySelectorAll('[required]');
                allRequiredFields.forEach(function(field) {
                    field.dataset.wasRequired = 'true';
                    field.removeAttribute('required');
                });
                
                // Permitir envío sin validar
                return true;
            }
        }
        
        // Validar coordenadas del mapa (solo si el campo direccion_evento está vacío Y no es solo subida de archivos)
        if (!hayArchivosParaSubir || (hayArchivosParaSubir && valid)) {
            const latInput = document.getElementById('latitud');
            const lngInput = document.getElementById('longitud');
            const direccionInput = document.getElementById('direccion_evento');
            const lat = latInput ? latInput.value.trim() : '';
            const lng = lngInput ? lngInput.value.trim() : '';
            const direccion = direccionInput ? direccionInput.value.trim() : '';
            
            
            // Solo validar coordenadas si no hay dirección guardada previamente
            // Si hay dirección (coordenadas guardadas), no validar lat/lng
            if (!direccion && (!lat || !lng)) {
                valid = false;
                mensaje = 'Por favor seleccione la ubicación del evento en el mapa';
            } else {
            }
        }
        
        if (valid && !hayArchivosParaSubir) {
            // Validar obsequio si está activado
            const tieneObsequio = document.getElementById('tiene_obsequio');
            if (tieneObsequio && tieneObsequio.value === '1') {
                const tipoObsequio = document.getElementById('tipo_obsequio');
                if (tipoObsequio && !tipoObsequio.value.trim()) {
                    valid = false;
                    mensaje = 'Si tiene obsequio, debe seleccionar el tipo de obsequio';
                } else if (tipoObsequio && tipoObsequio.value.trim()) {
                    // Validar campos según el tipo de obsequio
                    const tipo = tipoObsequio.value.trim();
                    if (tipo === 'transferencia') {
                        const camposRequeridos = ['obsequio_banco', 'obsequio_tipo_cuenta', 'obsequio_numero_cuenta', 'obsequio_titular', 'obsequio_cedula'];
                        for (let i = 0; i < camposRequeridos.length; i++) {
                            const campo = document.getElementById(camposRequeridos[i]);
                            if (campo && !campo.value.trim()) {
                                valid = false;
                                mensaje = 'Para transferencia bancaria, debe completar todos los campos requeridos';
                                break;
                            }
                        }
                    } else if (tipo === 'sobre_cerrado' || tipo === 'regalo') {
                        const indicaciones = document.getElementById('obsequio_indicaciones');
                        if (indicaciones && !indicaciones.value.trim()) {
                            valid = false;
                            mensaje = 'Debe ingresar las indicaciones para el obsequio';
                        }
                    }
                }
            }
            
            if (valid) {
                if (tipo === 'boda') {
                    const nombreNovia = document.getElementById('nombre_novia');
                    const nombreNovio = document.getElementById('nombre_novio');
                    if ((nombreNovia && !nombreNovia.value.trim()) || (nombreNovio && !nombreNovio.value.trim())) {
                        valid = false;
                        mensaje = 'Para una boda, debe ingresar el nombre de la novia y el novio';
                    }
                } else if (tipo === 'cumpleaños') {
                    const nombreHomenajeado = document.getElementById('nombre_homenajeado');
                    if (nombreHomenajeado && !nombreHomenajeado.value.trim()) {
                        valid = false;
                        mensaje = 'Para un cumpleaños, debe ingresar el nombre del homenajeado';
                    }
                } else if (tipo === 'quinceañera') {
                    const nombreQuinceanera = document.getElementById('nombre_quinceanera');
                    if (nombreQuinceanera && !nombreQuinceanera.value.trim()) {
                        valid = false;
                        mensaje = 'Para una quinceañera, debe ingresar el nombre de la quinceañera';
                    }
                } else if (tipo === 'bautizo') {
                    const nombreBautizado = document.getElementById('nombre_bautizado');
                    if (nombreBautizado && !nombreBautizado.value.trim()) {
                        valid = false;
                        mensaje = 'Para un bautizo, debe ingresar el nombre del bautizado/a';
                    }
                } else if (tipo === 'reunion' || tipo === 'evento_social') {
                    const nombreEventoSocial = document.getElementById('nombre_evento_social');
                    if (nombreEventoSocial && !nombreEventoSocial.value.trim()) {
                        valid = false;
                        mensaje = 'Debe ingresar el nombre del evento';
                    }
                }
            }
        }
        
        // Antes de validar, remover required de todos los campos ocultos para evitar errores del navegador
        // (Solo si no es solo subida de archivos, porque ya se removieron arriba)
        if (!hayArchivosParaSubir) {
            const allRequiredFields = form.querySelectorAll('[required]');
            allRequiredFields.forEach(function(field) {
                // Si el campo está oculto (o su contenedor está oculto), remover required temporalmente
                const isHidden = field.offsetParent === null;
                const parentHidden = field.closest('[style*="display: none"]') !== null;
                if (isHidden || parentHidden) {
                    field.removeAttribute('required');
                }
            });
        }
        
        if (!valid) {
            e.preventDefault();
            e.stopPropagation();
            alert(mensaje);
            if (typeof mostrarToastConfiguracion === 'function') {
                mostrarToastConfiguracion('error', mensaje);
            }
            return false;
        }
        
        // Si todo está bien, permitir el envío
        // Mostrar indicador de carga
        // DEBUG FINAL: Verificar FormData antes de enviar
        const formDataDebug = new FormData(form);
        const videosInFormData = formDataDebug.getAll('videos[]');
        if (videosInFormData.length > 0) {
            videosInFormData.forEach((file, index) => {
                if (file instanceof File) {
                } else {
                }
            });
        } else {
        }
        
        const submitBtn = form.querySelector('button[type="submit"]');
        if (submitBtn) {
            submitBtn.disabled = true;
            submitBtn.textContent = 'Guardando...';
        }
        return true;
    });
    
    
    // Agregar listener directo al botón para debuggear y forzar submit si es necesario
    const submitBtn = form.querySelector('button[type="submit"]');
    if (submitBtn) {
        submitBtn.addEventListener('click', function(e) {
            // Verificar si el formulario es válido antes de enviar
            if (!form.checkValidity()) {
                // Aunque tenemos novalidate, algunos navegadores pueden bloquear
                // Forzar el submit manualmente
                e.preventDefault();
                form.requestSubmit();
                return false;
            }
            // Verificar checkboxes de galería antes de enviar
            const checkboxesEliminar = document.querySelectorAll('.galeria-eliminar-checkbox:checked');
            checkboxesEliminar.forEach(function(cb) {
            });
            
            // No prevenir el comportamiento por defecto, dejar que el submit se dispare
        });
    } else {
        console.error('Botón de submit NO encontrado!');
    }
});

// Funciones para manejar sub-tabs
document.addEventListener('DOMContentLoaded', function() {
    // Función genérica para activar sub-tabs dentro de un contenedor específico
    function setupSubTabs(containerId, defaultSubTab) {
        const container = document.getElementById(containerId);
        if (!container) return;
        
        const subTabButtons = container.querySelectorAll('.sub-tab-btn');
        const subTabContents = container.querySelectorAll('.sub-tab-content');
        
        function activarSubTab(id) {
            subTabButtons.forEach(function(btn) {
                btn.classList.toggle('active', btn.getAttribute('data-sub-tab') === id);
            });
            subTabContents.forEach(function(tab) {
                tab.classList.toggle('active', tab.id === id);
            });
        }
        
        subTabButtons.forEach(function(btn) {
            btn.addEventListener('click', function() {
                const id = this.getAttribute('data-sub-tab');
                activarSubTab(id);
            });
        });
        
        // Activar sub-tab por defecto si el contenedor está activo
        if (container.classList.contains('active')) {
            activarSubTab(defaultSubTab);
        }
        
        return activarSubTab;
    }
    
    // Configurar sub-tabs de Detalles Adicionales
    setupSubTabs('tab-detalles-adicionales', 'sub-tab-hospedaje');
    
    // Configurar sub-tabs de Branding
    setupSubTabs('tab-branding', 'sub-tab-sobre');
    
    // Observar cambios en los tabs principales para activar el sub-tab por defecto
    const tabButtons = document.querySelectorAll('.tab-btn');
    tabButtons.forEach(function(btn) {
        btn.addEventListener('click', function() {
            const tabId = this.getAttribute('data-tab');
            setTimeout(function() {
                if (tabId === 'tab-detalles-adicionales') {
                    setupSubTabs('tab-detalles-adicionales', 'sub-tab-hospedaje');
                } else if (tabId === 'tab-branding') {
                    setupSubTabs('tab-branding', 'sub-tab-sobre');
                }
            }, 100);
        });
    });
});

// Variables globales para índices de detalles adicionales
let hospedajeIndex = <?php echo count($detalles_hospedaje); ?>;
let alimentacionIndex = <?php echo count($detalles_alimentacion); ?>;
let pdfIndex = <?php echo count($detalles_pdf); ?>;
let transporteIndex = <?php echo count($detalles_transporte); ?>;
let otroIndex = <?php echo count($detalles_otro); ?>;

// Funciones para toggle de contenedores
function toggleDetalleAdicional(tipo) {
    const select = document.getElementById('tiene_' + tipo);
    const container = document.getElementById(tipo + '-container');
    
    if (select.value === '1') {
        container.style.display = 'block';
    } else {
        container.style.display = 'none';
    }
}

// Funciones para toggle de items individuales
function toggleDetalleItem(tipo, index) {
    const item = document.querySelector(`.detalle-item[data-index="${index}"]`);
    if (item) {
        item.classList.toggle('collapsed');
    }
}

// Funciones para actualizar títulos
function actualizarTituloDetalle(tipo, index, valor) {
    const item = document.querySelector(`.detalle-item[data-index="${index}"]`);
    if (item) {
        const titulo = item.querySelector('.detalle-title');
        if (titulo) {
            titulo.textContent = valor || 'Nuevo ' + tipo;
        }
    }
}

// Funciones para agregar items
function agregarDetalleItem(tipo) {
    let container, index;
    
    switch(tipo) {
        case 'hospedaje':
            container = document.getElementById('hospedaje-items');
            index = hospedajeIndex++;
            break;
        case 'alimentacion':
            container = document.getElementById('alimentacion-items');
            index = alimentacionIndex++;
            break;
        case 'pdf':
            container = document.getElementById('pdf-items');
            index = pdfIndex++;
            break;
        case 'transporte':
            container = document.getElementById('transporte-items');
            index = transporteIndex++;
            break;
        case 'otro':
            container = document.getElementById('otro-items');
            index = otroIndex++;
            break;
        default:
            return;
    }
    
    let html = '';
    
    if (tipo === 'hospedaje') {
        html = `
            <div class="detalle-item" data-index="${index}">
                <div class="detalle-header" onclick="toggleDetalleItem('hospedaje', ${index})">
                    <span class="detalle-title">Nuevo Hotel</span>
                    <span class="detalle-actions">
                        <button type="button" class="detalle-btn-remove" onclick="event.stopPropagation(); eliminarDetalleItem('hospedaje', ${index});" title="Eliminar">×</button>
                        <span class="detalle-toggle-icon">▼</span>
                    </span>
                </div>
                <div class="detalle-content" id="hospedaje-content-${index}">
                    <input type="hidden" name="hospedaje[${index}][id]" value="">
                    <input type="hidden" name="hospedaje[${index}][relacion_id]" value="">
                    <input type="hidden" name="hospedaje[${index}][orden]" class="hospedaje-orden" value="${index}">
                    
                    <div class="form-group">
                        <label>Nombre del Hotel *</label>
                        <input type="text" name="hospedaje[${index}][nombre_hotel]" required onchange="actualizarTituloDetalle('hospedaje', ${index}, this.value)">
                    </div>
                    
                    <div class="form-group">
                        <label>Ubicación Referencial *</label>
                        <input type="text" name="hospedaje[${index}][ubicacion_referencial]" placeholder="Ej: Guayaquil, Puerto Santa Ana" required>
                    </div>
                    
                    <div class="form-group">
                        <label>Distancia (metros) *</label>
                        <input type="number" name="hospedaje[${index}][distancia_metros]" placeholder="500" min="0" required>
                    </div>
                    
                    <div style="margin-top: 20px;">
                        <h4 style="margin: 0 0 15px 0; font-size: 16px; color: var(--color-text-primary); font-weight: 600;">Botones</h4>
                        <div id="hospedaje-botones-${index}"></div>
                        <button type="button" class="btn-agregar-itinerario" onclick="agregarHospedajeBoton(${index})">
                            <span>+</span>
                            <span>Agregar Botón</span>
                        </button>
                    </div>
                </div>
            </div>
        `;
    } else if (tipo === 'alimentacion') {
        html = `
            <div class="detalle-item" data-index="${index}">
                <div class="detalle-header" onclick="toggleDetalleItem('alimentacion', ${index})">
                    <span class="detalle-title">Nuevo Restaurante</span>
                    <span class="detalle-actions">
                        <button type="button" class="detalle-btn-remove" onclick="event.stopPropagation(); eliminarDetalleItem('alimentacion', ${index});" title="Eliminar">×</button>
                        <span class="detalle-toggle-icon">▼</span>
                    </span>
                </div>
                <div class="detalle-content" id="alimentacion-content-${index}">
                    <input type="hidden" name="alimentacion[${index}][id]" value="">
                    <input type="hidden" name="alimentacion[${index}][relacion_id]" value="">
                    <input type="hidden" name="alimentacion[${index}][orden]" class="alimentacion-orden" value="${index}">
                    
                    <div class="form-group">
                        <label>Nombre del Restaurante *</label>
                        <input type="text" name="alimentacion[${index}][nombre_restaurante]" required onchange="actualizarTituloDetalle('alimentacion', ${index}, this.value)">
                    </div>
                    
                    <div class="form-group">
                        <label>Dirección *</label>
                        <input type="text" name="alimentacion[${index}][direccion]" required>
                    </div>
                    
                    <div class="form-group">
                        <label>WhatsApp para Reservar *</label>
                        <input type="text" name="alimentacion[${index}][whatsapp_reservar]" placeholder="593999123456" required>
                        <small style="display:block;margin-top:5px;color:var(--color-text-secondary);">
                            Ingrese el número sin espacios ni caracteres especiales (ej: 593999123456)
                        </small>
                    </div>
                </div>
            </div>
        `;
    } else if (tipo === 'pdf') {
        html = `
            <div class="detalle-item" data-index="${index}">
                <div class="detalle-header" onclick="toggleDetalleItem('pdf', ${index})">
                    <span class="detalle-title">Nuevo PDF</span>
                    <span class="detalle-actions">
                        <button type="button" class="detalle-btn-remove" onclick="event.stopPropagation(); eliminarDetalleItem('pdf', ${index});" title="Eliminar">×</button>
                        <span class="detalle-toggle-icon">▼</span>
                    </span>
                </div>
                <div class="detalle-content" id="pdf-content-${index}">
                    <input type="hidden" name="pdf[${index}][id]" value="">
                    <input type="hidden" name="pdf[${index}][relacion_id]" value="">
                    <input type="hidden" name="pdf[${index}][orden]" class="pdf-orden" value="${index}">
                    
                    <div class="form-group">
                        <label>Título del PDF *</label>
                        <input type="text" name="pdf[${index}][titulo]" placeholder="Ej: Detalles para personas de Ecuador" required onchange="actualizarTituloDetalle('pdf', ${index}, this.value)">
                    </div>
                    
                    <div class="form-group">
                        <label>Archivo PDF *</label>
                        <input type="file" name="pdf_archivo[${index}]" accept="application/pdf">
                        <input type="hidden" name="pdf[${index}][archivo]" value="">
                    </div>
                </div>
            </div>
        `;
    } else if (tipo === 'transporte') {
        html = `
            <div class="detalle-item" data-index="${index}">
                <div class="detalle-header" onclick="toggleDetalleItem('transporte', ${index})">
                    <span class="detalle-title">Nuevo Transporte</span>
                    <span class="detalle-actions">
                        <button type="button" class="detalle-btn-remove" onclick="event.stopPropagation(); eliminarDetalleItem('transporte', ${index});" title="Eliminar">×</button>
                        <span class="detalle-toggle-icon">▼</span>
                    </span>
                </div>
                <div class="detalle-content" id="transporte-content-${index}">
                    <input type="hidden" name="transporte[${index}][id]" value="">
                    <input type="hidden" name="transporte[${index}][relacion_id]" value="">
                    <input type="hidden" name="transporte[${index}][orden]" class="transporte-orden" value="${index}">
                    
                    <div class="form-group">
                        <label>Nombre del Servicio *</label>
                        <input type="text" name="transporte[${index}][nombre]" required onchange="actualizarTituloDetalle('transporte', ${index}, this.value)">
                    </div>
                    
                    <div class="form-group">
                        <label>Descripción</label>
                        <textarea name="transporte[${index}][descripcion]" rows="4"></textarea>
                    </div>
                    
                    <div class="form-group">
                        <label>Contacto</label>
                        <input type="text" name="transporte[${index}][contacto]" placeholder="Teléfono o email">
                    </div>
                </div>
            </div>
        `;
    } else if (tipo === 'otro') {
        html = `
            <div class="detalle-item" data-index="${index}">
                <div class="detalle-header" onclick="toggleDetalleItem('otro', ${index})">
                    <span class="detalle-title">Nuevo Detalle</span>
                    <span class="detalle-actions">
                        <button type="button" class="detalle-btn-remove" onclick="event.stopPropagation(); eliminarDetalleItem('otro', ${index});" title="Eliminar">×</button>
                        <span class="detalle-toggle-icon">▼</span>
                    </span>
                </div>
                <div class="detalle-content" id="otro-content-${index}">
                    <input type="hidden" name="otro[${index}][id]" value="">
                    <input type="hidden" name="otro[${index}][relacion_id]" value="">
                    <input type="hidden" name="otro[${index}][orden]" class="otro-orden" value="${index}">
                    
                    <div class="form-group">
                        <label>Título *</label>
                        <input type="text" name="otro[${index}][titulo]" required onchange="actualizarTituloDetalle('otro', ${index}, this.value)">
                    </div>
                    
                    <div class="form-group">
                        <label>Contenido</label>
                        <textarea name="otro[${index}][contenido]" rows="6"></textarea>
                    </div>
                </div>
            </div>
        `;
    }
    
    container.insertAdjacentHTML('beforeend', html);
    
    // Colapsar todos los items excepto el nuevo
    const items = container.querySelectorAll('.detalle-item');
    items.forEach(function(item, i) {
        if (i !== items.length - 1) {
            item.classList.add('collapsed');
        }
    });
}

// Funciones para eliminar items
function eliminarDetalleItem(tipo, index) {
    const item = document.querySelector(`.detalle-item[data-index="${index}"]`);
    if (item && confirm('¿Está seguro de eliminar este item?')) {
        item.remove();
        reindexarDetalleItems(tipo);
    }
}

// Funciones para reindexar items
function reindexarDetalleItems(tipo) {
    const container = document.getElementById(tipo + '-items');
    if (!container) return;
    
    const items = container.querySelectorAll('.detalle-item');
    items.forEach(function(item, newIndex) {
        item.setAttribute('data-index', newIndex);
        
        // Actualizar todos los atributos name
        item.querySelectorAll('input, textarea, select').forEach(function(input) {
            const name = input.getAttribute('name');
            if (name && name.includes('[')) {
                const newName = name.replace(/\[\d+\]/, `[${newIndex}]`);
                input.setAttribute('name', newName);
            }
        });
        
        // Actualizar onclick del header
        const header = item.querySelector('.detalle-header');
        if (header) {
            header.setAttribute('onclick', `toggleDetalleItem('${tipo}', ${newIndex})`);
        }
        
        // Actualizar onclick del botón eliminar
        const btnRemove = item.querySelector('.detalle-btn-remove');
        if (btnRemove) {
            btnRemove.setAttribute('onclick', `event.stopPropagation(); eliminarDetalleItem('${tipo}', ${newIndex});`);
        }
        
        // Actualizar id del content
        const content = item.querySelector('.detalle-content');
        if (content) {
            content.id = `${tipo}-content-${newIndex}`;
        }
        
        // Actualizar orden
        const ordenInput = item.querySelector(`.${tipo}-orden`);
        if (ordenInput) {
            ordenInput.value = newIndex;
        }
    });
}

// Funciones para botones de hospedaje
// hospedajeBotonIndex se inicializa en DOMContentLoaded con los botones existentes
if (!window.hospedajeBotonIndex) {
    window.hospedajeBotonIndex = {};
}

function agregarHospedajeBoton(hospedajeIndex) {
    if (!window.hospedajeBotonIndex[hospedajeIndex]) {
        window.hospedajeBotonIndex[hospedajeIndex] = 0;
    }
    const botonIndex = window.hospedajeBotonIndex[hospedajeIndex]++;
    
    const container = document.getElementById(`hospedaje-botones-${hospedajeIndex}`);
    if (!container) return;
    
    const html = `
        <div class="hospedaje-boton-item" data-boton-index="${botonIndex}">
            <div class="hospedaje-boton-header" onclick="toggleHospedajeBoton(${hospedajeIndex}, ${botonIndex})">
                <span class="hospedaje-boton-title">Nuevo Botón</span>
                <span class="hospedaje-boton-actions">
                    <button type="button" class="hospedaje-boton-btn-remove" onclick="event.stopPropagation(); eliminarHospedajeBoton(${hospedajeIndex}, ${botonIndex});" title="Eliminar">×</button>
                    <span class="hospedaje-boton-toggle-icon">▼</span>
                </span>
            </div>
            <div class="hospedaje-boton-content" id="hospedaje-boton-content-${hospedajeIndex}-${botonIndex}">
                <input type="hidden" name="hospedaje[${hospedajeIndex}][botones][${botonIndex}][id]" value="">
                <input type="hidden" name="hospedaje[${hospedajeIndex}][botones][${botonIndex}][orden]" value="${botonIndex}">
                
                <div class="form-group">
                    <label>Nombre del Link *</label>
                    <input type="text" name="hospedaje[${hospedajeIndex}][botones][${botonIndex}][nombre_link]" placeholder="Ej: Tarifas Especiales" required onchange="actualizarTituloHospedajeBoton(${hospedajeIndex}, ${botonIndex}, this.value)">
                </div>
                
                <div class="form-group">
                    <label>Tipo *</label>
                    <select name="hospedaje[${hospedajeIndex}][botones][${botonIndex}][tipo_valor]" 
                            required
                            onchange="cambiarTipoHospedajeBoton(${hospedajeIndex}, ${botonIndex}, this.value)">
                        <option value="link">Link</option>
                        <option value="pdf">PDF</option>
                    </select>
                </div>
                
                <!-- Campo para Link -->
                <div class="form-group hospedaje-boton-field-link" id="hospedaje-boton-link-${hospedajeIndex}-${botonIndex}">
                    <label>URL del Link *</label>
                    <input type="url" name="hospedaje[${hospedajeIndex}][botones][${botonIndex}][valor_link]" 
                           placeholder="https://ejemplo.com"
                           class="hospedaje-boton-valor-link"
                           onchange="actualizarValorHospedajeBoton(${hospedajeIndex}, ${botonIndex}, 'link', this.value)">
                    <input type="hidden" name="hospedaje[${hospedajeIndex}][botones][${botonIndex}][valor]" 
                           value=""
                           class="hospedaje-boton-valor-hidden">
                </div>
                
                <!-- Campo para PDF -->
                <div class="form-group hospedaje-boton-field-pdf" id="hospedaje-boton-pdf-${hospedajeIndex}-${botonIndex}" style="display: none;">
                    <label>Archivo PDF *</label>
                    <input type="file" name="hospedaje_boton_pdf[${hospedajeIndex}][${botonIndex}]" 
                           accept="application/pdf"
                           class="hospedaje-boton-file-pdf">
                    <input type="hidden" name="hospedaje[${hospedajeIndex}][botones][${botonIndex}][valor]" 
                           value=""
                           class="hospedaje-boton-valor-hidden">
                </div>
            </div>
        </div>
    `;
    
    container.insertAdjacentHTML('beforeend', html);
}

function eliminarHospedajeBoton(hospedajeIndex, botonIndex) {
    const boton = document.querySelector(`#hospedaje-botones-${hospedajeIndex} .hospedaje-boton-item[data-boton-index="${botonIndex}"]`);
    if (boton && confirm('¿Está seguro de eliminar este botón?')) {
        boton.remove();
        reindexarHospedajeBotones(hospedajeIndex);
    }
}

function toggleHospedajeBoton(hospedajeIndex, botonIndex) {
    const boton = document.querySelector(`#hospedaje-botones-${hospedajeIndex} .hospedaje-boton-item[data-boton-index="${botonIndex}"]`);
    if (boton) {
        boton.classList.toggle('collapsed');
    }
}

function actualizarTituloHospedajeBoton(hospedajeIndex, botonIndex, valor) {
    const boton = document.querySelector(`#hospedaje-botones-${hospedajeIndex} .hospedaje-boton-item[data-boton-index="${botonIndex}"]`);
    if (boton) {
        const titulo = boton.querySelector('.hospedaje-boton-title');
        if (titulo) {
            titulo.textContent = valor || 'Nuevo Botón';
        }
    }
}

function cambiarTipoHospedajeBoton(hospedajeIndex, botonIndex, tipo) {
    const linkField = document.getElementById(`hospedaje-boton-link-${hospedajeIndex}-${botonIndex}`);
    const pdfField = document.getElementById(`hospedaje-boton-pdf-${hospedajeIndex}-${botonIndex}`);
    const linkInput = linkField ? linkField.querySelector('.hospedaje-boton-valor-link') : null;
    const linkHidden = linkField ? linkField.querySelector('.hospedaje-boton-valor-hidden') : null;
    const pdfFile = pdfField ? pdfField.querySelector('.hospedaje-boton-file-pdf') : null;
    const pdfHidden = pdfField ? pdfField.querySelector('.hospedaje-boton-valor-hidden') : null;
    
    if (tipo === 'link') {
        if (linkField) linkField.style.display = 'block';
        if (pdfField) pdfField.style.display = 'none';
        if (linkInput) linkInput.required = true;
        if (pdfFile) pdfFile.required = false;
        // Limpiar valor del PDF
        if (pdfHidden) pdfHidden.value = '';
    } else if (tipo === 'pdf') {
        if (linkField) linkField.style.display = 'none';
        if (pdfField) pdfField.style.display = 'block';
        if (linkInput) {
            linkInput.required = false;
            linkInput.value = '';
        }
        if (linkHidden) linkHidden.value = '';
        // Solo requerir PDF si no hay valor existente
        if (pdfFile) {
            const tieneValorExistente = pdfHidden && pdfHidden.value && pdfHidden.value.trim() !== '';
            pdfFile.required = !tieneValorExistente;
        }
    }
}

function actualizarValorHospedajeBoton(hospedajeIndex, botonIndex, tipo, valor) {
    const boton = document.querySelector(`#hospedaje-botones-${hospedajeIndex} .hospedaje-boton-item[data-boton-index="${botonIndex}"]`);
    if (boton) {
        // Actualizar todos los campos hidden de valor en este botón
        boton.querySelectorAll('.hospedaje-boton-valor-hidden').forEach(function(hiddenInput) {
            hiddenInput.value = valor || '';
        });
    }
}

// Sincronizar valores de botones de hospedaje antes de enviar el formulario
document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('formEvento');
    if (form) {
        form.addEventListener('submit', function(e) {
            // Sincronizar todos los valores de links antes de enviar
            document.querySelectorAll('.hospedaje-boton-item').forEach(function(boton) {
                const tipoSelect = boton.querySelector('select[name*="[tipo_valor]"]');
                const linkInput = boton.querySelector('.hospedaje-boton-valor-link');
                const hiddenInputs = boton.querySelectorAll('.hospedaje-boton-valor-hidden');
                
                if (tipoSelect && tipoSelect.value === 'link' && linkInput) {
                    // Copiar el valor del link a todos los campos hidden
                    hiddenInputs.forEach(function(hidden) {
                        hidden.value = linkInput.value || '';
                    });
                }
            });
        });
    }
});

// Inicializar tipo de botón al cargar la página
document.addEventListener('DOMContentLoaded', function() {
    // Inicializar todos los botones de hospedaje existentes
    const hospedajeItems = document.querySelectorAll('.detalle-item');
    hospedajeItems.forEach(function(item) {
        const hospedajeIndex = item.getAttribute('data-index');
        if (hospedajeIndex !== null) {
            const botones = item.querySelectorAll('.hospedaje-boton-item');
            botones.forEach(function(boton) {
                const botonIndex = boton.getAttribute('data-boton-index');
                const tipoSelect = boton.querySelector('select[name*="[tipo_valor]"]');
                if (tipoSelect && botonIndex !== null) {
                    cambiarTipoHospedajeBoton(parseInt(hospedajeIndex), parseInt(botonIndex), tipoSelect.value);
                }
            });
        }
    });
});

// Funciones para manejar la Galería
// No se necesitan campos adicionales, solo subir las fotos directamente

// Función para marcar foto para eliminar
function marcarFotoEliminar(fotoId) {
    const fotoItem = document.querySelector(`.galeria-foto-item[data-foto-id="${fotoId}"]`);
    const checkbox = document.getElementById(`galeria_eliminar_${fotoId}`);
    
    
    if (fotoItem && checkbox) {
        if (checkbox.checked) {
            // Desmarcar
            checkbox.checked = false;
            fotoItem.classList.remove('marcado-eliminar');
        } else {
            // Marcar para eliminar
            if (confirm('¿Está seguro de eliminar esta foto? Esta acción no se puede deshacer.')) {
                checkbox.checked = true;
                fotoItem.classList.add('marcado-eliminar');
            }
        }
    } else {
        console.error('No se encontró fotoItem o checkbox para fotoId:', fotoId);
    }
}

// Función para marcar video para eliminar
function marcarVideoEliminar(videoId) {
    const videoItem = document.querySelector(`.videos-video-item[data-video-id="${videoId}"]`);
    const checkbox = document.getElementById(`videos_eliminar_${videoId}`);
    
    
    if (videoItem && checkbox) {
        if (checkbox.checked) {
            // Desmarcar
            checkbox.checked = false;
            videoItem.classList.remove('marcado-eliminar');
        } else {
            // Marcar para eliminar
            if (confirm('¿Está seguro de eliminar este video? Esta acción no se puede deshacer.')) {
                checkbox.checked = true;
                videoItem.classList.add('marcado-eliminar');
            }
        }
    } else {
        console.error('No se encontró videoItem o checkbox para videoId:', videoId);
    }
}

function reindexarHospedajeBotones(hospedajeIndex) {
    const container = document.getElementById(`hospedaje-botones-${hospedajeIndex}`);
    if (!container) return;
    
    const botones = container.querySelectorAll('.hospedaje-boton-item');
    botones.forEach(function(boton, newIndex) {
        boton.setAttribute('data-boton-index', newIndex);
        
        // Actualizar todos los atributos name
        boton.querySelectorAll('input, select').forEach(function(input) {
            const name = input.getAttribute('name');
            if (name && name.includes('[botones][')) {
                const newName = name.replace(/\[botones\]\[\d+\]/, `[botones][${newIndex}]`);
                input.setAttribute('name', newName);
            }
        });
        
        // Actualizar onclick del header
        const header = boton.querySelector('.hospedaje-boton-header');
        if (header) {
            header.setAttribute('onclick', `toggleHospedajeBoton(${hospedajeIndex}, ${newIndex})`);
        }
        
        // Actualizar onclick del botón eliminar
        const btnRemove = boton.querySelector('.hospedaje-boton-btn-remove');
        if (btnRemove) {
            btnRemove.setAttribute('onclick', `event.stopPropagation(); eliminarHospedajeBoton(${hospedajeIndex}, ${newIndex});`);
        }
        
        // Actualizar id del content
        const content = boton.querySelector('.hospedaje-boton-content');
        if (content) {
            content.id = `hospedaje-boton-content-${hospedajeIndex}-${newIndex}`;
        }
        
        // Actualizar IDs de campos link y pdf
        const linkField = boton.querySelector('.hospedaje-boton-field-link');
        if (linkField) {
            linkField.id = `hospedaje-boton-link-${hospedajeIndex}-${newIndex}`;
        }
        const pdfField = boton.querySelector('.hospedaje-boton-field-pdf');
        if (pdfField) {
            pdfField.id = `hospedaje-boton-pdf-${hospedajeIndex}-${newIndex}`;
        }
        
        // Actualizar onchange del select tipo
        const tipoSelect = boton.querySelector('select[name*="[tipo_valor]"]');
        if (tipoSelect) {
            tipoSelect.setAttribute('onchange', `cambiarTipoHospedajeBoton(${hospedajeIndex}, ${newIndex}, this.value)`);
        }
        
        // Actualizar onchange del input link
        const linkInput = boton.querySelector('.hospedaje-boton-valor-link');
        if (linkInput) {
            linkInput.setAttribute('onchange', `actualizarValorHospedajeBoton(${hospedajeIndex}, ${newIndex}, 'link', this.value)`);
        }
        
        // Actualizar orden
        const ordenInput = boton.querySelector('input[name*="[orden]"]');
        if (ordenInput) {
            ordenInput.value = newIndex;
        }
    });
}

// ============================================
// FUNCIONES PARA ASIGNACIÓN DE VIDEOS A INVITADOS
// ============================================

let videoActualAsignacion = null;

function abrirModalAsignarVideo(videoId, invitadosAsignados) {
    videoActualAsignacion = videoId;
    
    // Actualizar título del modal
    document.getElementById('modal-asignar-video-titulo').textContent = 'Asignar Invitados al Video #' + videoId;
    
    // Limpiar búsqueda
    document.getElementById('buscar-invitado-video').value = '';
    
    // Marcar checkboxes según asignaciones actuales
    const checkboxes = document.querySelectorAll('.checkbox-invitado-video');
    checkboxes.forEach(function(checkbox) {
        checkbox.checked = invitadosAsignados.includes(parseInt(checkbox.value));
    });
    
    // Mostrar todos los invitados
    filtrarInvitadosVideo();
    
    // Mostrar modal
    document.getElementById('modal-asignar-video').style.display = 'flex';
}

function cerrarModalAsignarVideo() {
    document.getElementById('modal-asignar-video').style.display = 'none';
    videoActualAsignacion = null;
}

function filtrarInvitadosVideo() {
    const busqueda = document.getElementById('buscar-invitado-video').value.toLowerCase();
    const items = document.querySelectorAll('.invitado-video-item');
    
    items.forEach(function(item) {
        const nombre = item.getAttribute('data-invitado-nombre') || '';
        if (nombre.includes(busqueda)) {
            item.style.display = 'flex';
        } else {
            item.style.display = 'none';
        }
    });
}

function seleccionarTodosInvitadosVideo() {
    const checkboxes = document.querySelectorAll('.checkbox-invitado-video');
    const visibleItems = Array.from(document.querySelectorAll('.invitado-video-item'))
        .filter(item => item.style.display !== 'none');
    
    visibleItems.forEach(function(item) {
        const checkbox = item.querySelector('.checkbox-invitado-video');
        if (checkbox) {
            checkbox.checked = true;
        }
    });
}

function deseleccionarTodosInvitadosVideo() {
    const checkboxes = document.querySelectorAll('.checkbox-invitado-video');
    checkboxes.forEach(function(checkbox) {
        checkbox.checked = false;
    });
}

function guardarAsignacionVideo() {
    if (!videoActualAsignacion) {
        alert('Error: No se ha seleccionado un video');
        return;
    }
    
    // Obtener invitados seleccionados
    const checkboxes = document.querySelectorAll('.checkbox-invitado-video:checked');
    const invitadosSeleccionados = Array.from(checkboxes).map(cb => parseInt(cb.value));
    
    // Mostrar indicador de carga
    const btnGuardar = document.querySelector('#modal-asignar-video .btn-primary');
    const textoOriginal = btnGuardar ? btnGuardar.textContent : 'Guardar Asignación';
    if (btnGuardar) {
        btnGuardar.disabled = true;
        btnGuardar.textContent = 'Guardando...';
    }
    
    // Preparar datos para AJAX
    const formData = new FormData();
    formData.append('action', 'asignar_video');
    formData.append('video_id', videoActualAsignacion);
    invitadosSeleccionados.forEach(function(invitadoId) {
        formData.append('invitado_ids[]', invitadoId);
    });
    
    // Enviar petición AJAX
    fetch('?page=configuracion', {
        method: 'POST',
        body: formData,
        headers: {
            'X-Requested-With': 'XMLHttpRequest'
        }
    })
    .then(function(response) {
        return response.json();
    })
    .then(function(data) {
        if (data.success) {
            // Actualizar la vista del video con la información recibida
            actualizarVistaAsignacionesVideo(videoActualAsignacion, data.invitados_asignados, data.total_asignaciones);
            
            // Cerrar modal
            cerrarModalAsignarVideo();
            
            // Mostrar mensaje de éxito
            mostrarToastConfiguracion('success', 'Asignación guardada correctamente');
        } else {
            mostrarToastConfiguracion('error', 'Error: ' + (data.message || 'No se pudo guardar la asignación'));
            if (btnGuardar) {
                btnGuardar.disabled = false;
                btnGuardar.textContent = textoOriginal;
            }
        }
    })
    .catch(function(error) {
        console.error('Error al guardar asignación:', error);
        mostrarToastConfiguracion('error', 'Error al guardar la asignación. Por favor, intente nuevamente.');
        if (btnGuardar) {
            btnGuardar.disabled = false;
            btnGuardar.textContent = textoOriginal;
        }
    });
}

function actualizarVistaAsignacionesVideo(videoId, invitadosIds, totalAsignaciones) {
    // Actualizar contador
    const videoItem = document.querySelector('[data-video-id="' + videoId + '"]');
    if (videoItem) {
        // Buscar el elemento que muestra el contador
        const contadorElement = videoItem.querySelector('strong');
        if (contadorElement && contadorElement.textContent.includes('invitado')) {
            const parentP = contadorElement.parentElement;
            if (parentP) {
                parentP.innerHTML = '<strong>Asignado a:</strong> ' + totalAsignaciones + ' invitado(s)';
            }
        }
        
        // Actualizar lista de nombres (si existe)
        const nombresElement = videoItem.querySelector('p[style*="font-size: 11px"]');
        if (nombresElement && totalAsignaciones > 0) {
            // Aquí podríamos hacer otra llamada AJAX para obtener los nombres, pero por ahora dejamos que se actualice al recargar
            nombresElement.style.display = 'block';
        } else if (nombresElement && totalAsignaciones === 0) {
            nombresElement.style.display = 'none';
        }
    }
    
}

// Cerrar modal con ESC
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape' && videoActualAsignacion) {
        cerrarModalAsignarVideo();
    }
});

// ============================================
// FUNCIÓN PARA SUBIR VIDEOS VÍA AJAX
// ============================================
document.addEventListener('DOMContentLoaded', function() {
    const videosUploadInput = document.getElementById('videos-upload');
    const btnSubirVideos = document.getElementById('btn-subir-videos');
    const statusDiv = document.getElementById('videos-upload-status');
    
    if (!videosUploadInput || !btnSubirVideos) {
        return;
    }
    
    btnSubirVideos.addEventListener('click', function() {
        const files = videosUploadInput.files;
        
        if (!files || files.length === 0) {
            mostrarToastConfiguracion('error', 'Por favor seleccione al menos un video');
            return;
        }
        
        // Deshabilitar botón
        btnSubirVideos.disabled = true;
        btnSubirVideos.textContent = 'Subiendo...';
        statusDiv.style.display = 'block';
        statusDiv.innerHTML = '<p style="color: var(--color-primary);">Subiendo videos...</p>';
        
        let uploaded = 0;
        let failed = 0;
        const total = files.length;
        
        // Subir cada video individualmente
        Array.from(files).forEach(function(file, index) {
            const formData = new FormData();
            formData.append('action', 'subir_video');
            formData.append('video', file);
            
            fetch('?page=configuracion', {
                method: 'POST',
                body: formData,
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
            .then(function(response) {
                if (!response.ok) {
                    throw new Error('Error HTTP: ' + response.status);
                }
                return response.json();
            })
            .then(function(data) {
                if (data.success) {
                    uploaded++;
                } else {
                    failed++;
                    console.error('❌ Error al subir video:', data.message);
                    mostrarToastConfiguracion('error', 'Error: ' + data.message);
                }
                
                // Actualizar estado
                statusDiv.innerHTML = `<p style="color: var(--color-primary);">Subidos: ${uploaded}/${total} | Fallidos: ${failed}</p>`;
                
                // Si terminaron todos
                if (uploaded + failed === total) {
                    btnSubirVideos.disabled = false;
                    btnSubirVideos.textContent = 'Subir Videos Seleccionados';
                    
                    if (uploaded > 0) {
                        mostrarToastConfiguracion('success', `${uploaded} video(s) subido(s) correctamente`);
                        // Recargar la página después de 1 segundo para mostrar los nuevos videos
                        setTimeout(function() {
                            window.location.reload();
                        }, 1000);
                    } else {
                        mostrarToastConfiguracion('error', 'No se pudo subir ningún video');
                        statusDiv.innerHTML = '<p style="color: var(--color-error);">Error al subir videos</p>';
                    }
                }
            })
            .catch(function(error) {
                failed++;
                console.error('❌ Error en la petición:', error);
                statusDiv.innerHTML = `<p style="color: var(--color-error);">Error: ${error.message}</p>`;
                mostrarToastConfiguracion('error', 'Error al subir video: ' + error.message);
                
                if (uploaded + failed === total) {
                    btnSubirVideos.disabled = false;
                    btnSubirVideos.textContent = 'Subir Videos Seleccionados';
                    if (uploaded === 0) {
                        mostrarToastConfiguracion('error', 'No se pudo subir ningún video');
                    }
                }
            });
        });
    });
});
</script>
