Cambios en formulario de registro de usuarios

regUsuario.php

@@ -143,6 +143,29 @@ function obtenerNombreCursoPorId($cursos, $idBuscado) {
             background: rgba(255, 255, 255, 0.8);
         }
 
+        .form-input.color-group {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            padding: 0.5rem;
+        }
+
+        .form-input.color-group input[type="color"] {
+            width: 50px;
+            height: 40px;
+            padding: 0;
+            border: 1px solid #e2e8f0;
+            border-radius: 6px;
+        }
+
+        .form-input.color-group input[type="text"] {
+            flex: 1;
+            border: 1px solid #e2e8f0;
+            border-radius: 6px;
+            padding: 0.5rem;
+            font-family: monospace;
+        }
+
         .form-input:focus {
             outline: none;
             border-color: #4c51bf;
@@ -226,6 +249,31 @@ function obtenerNombreCursoPorId($cursos, $idBuscado) {
             -webkit-appearance: none;
             -moz-appearance: none;
         }
+        .color-input {
+            display: flex;
+            align-items: center;
+            border: 1px solid #ccc;
+            border-radius: 6px;
+            padding: 5px;
+            width: 160px;
+        }
+
+        .color-input input[type="color"] {
+            border: none;
+            background: none;
+            width: 30px;
+            height: 30px;
+            padding: 0;
+            margin-right: 5px;
+            cursor: pointer;
+        }
+
+        .color-input input[type="text"] {
+            border: none;
+            outline: none;
+            width: 100%;
+            font-family: monospace;
+        }
 
        
 </style>
@@ -276,6 +324,24 @@ function obtenerNombreCursoPorId($cursos, $idBuscado) {
                               placeholder="-----BEGIN PRIVATE KEY-----&#10;MIIEvgIBADANBgkqhkiG9w0BAQEFAASCBKgwggSkAgEAAoIBAQC...&#10;-----END PRIVATE KEY-----"></textarea>
                 </div>
 
+                <div class="form-group">
+                    <label for="logo" class="form-label">Logo (opcional) — JPG, PNG o SVG, max 2MB</label>
+                    <div class="file-input-wrapper">
+                        <input type="file" id="logo" name="logo" accept="image/png,image/jpeg,image/jpg,image/svg+xml" class="file-input">
+                        <label for="logo" id="logoLabel" class="file-input-label">Seleccione un archivo</label>
+                    </div>
+                </div>
+
+                <div class="form-group">
+                    <label for="brand" class="form-label">Selecciona el color del branding <small>(ocupa el selector de color)</small></label>
+                    
+                    <div class="form-input color-group">
+                        <input type="color" id="colorPicker" value="#0072ff">
+                        <input type="text" id="colorValue" name="colorValue" value="#0072ff">
+                    </div>
+                </div>
+
+
                 <button type="submit" class="submit-btn">
                     ✨ Registrar Usuario
                 </button>
@@ -285,6 +351,20 @@ function obtenerNombreCursoPorId($cursos, $idBuscado) {
       <!--end::App Main-->
     <div id="toast" class="toast"></div>
 </main>
+<script>
+  const picker = document.getElementById('colorPicker');
+  const value = document.getElementById('colorValue');
+
+  picker.addEventListener('input', () => {
+    value.value = picker.value;
+  });
+
+  value.addEventListener('input', () => {
+    if (/^#[0-9A-Fa-f]{6}$/.test(value.value)) {
+      picker.value = value.value;
+    }
+  });
+</script>
 <script>
     // ============================================================================
 // JAVASCRIPT PARA ENVÍO DE FORMULARIO A ARCHIVO PHP
@@ -412,6 +492,19 @@ document.addEventListener('DOMContentLoaded', function() {
         const clavePublica = formData.get('clavePublica');
         const clavePrivada = formData.get('clavePrivada');
         
+        // Validación de logo (opcional)
+        const logo = formData.get('logo');
+        if (logo && typeof logo === 'object' && logo.size && logo.name) {
+            const allowedTypes = ['image/jpeg', 'image/png', 'image/jpg', 'image/svg+xml'];
+            const maxSize = 2 * 1024 * 1024; // 2MB
+            if (!allowedTypes.includes(logo.type)) {
+                errors.push('El logo debe ser un archivo JPG, PNG o SVG');
+            }
+            if (logo.size > maxSize) {
+                errors.push('El logo no puede ser mayor a 2MB');
+            }
+        }
+        
         
         // Mostrar errores si los hay
         if (errors.length > 0) {
@@ -422,6 +515,22 @@ document.addEventListener('DOMContentLoaded', function() {
         return true;
     }
 
+    // Mostrar nombre de archivo seleccionado y cambiar estilo
+    const logoInput = document.getElementById('logo');
+    const logoLabel = document.getElementById('logoLabel');
+    if (logoInput) {
+        logoInput.addEventListener('change', (e) => {
+            const file = e.target.files[0];
+            if (file) {
+                logoLabel.textContent = `${file.name} (${Math.round(file.size/1024)} KB)`;
+                logoLabel.classList.add('has-file');
+            } else {
+                logoLabel.textContent = 'Seleccione un archivo';
+                logoLabel.classList.remove('has-file');
+            }
+        });
+    }
+
     /**
      * Manejar respuesta exitosa
      */