Formulario de Contacto

.contact-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 24px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.contact-header {
  text-align: center;
  margin-bottom: 48px;
}

.contact-title {
  font-size: 48px;
  font-weight: 700;
  color: #1a202c;
  margin: 0 0 16px 0;
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.contact-subtitle {
  font-size: 18px;
  color: #6b7280;
  margin: 0;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

.contact-content {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 48px;
  align-items: start;
}

/* Contact Info */
.contact-info {
  background: white;
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  height: fit-content;
}

.info-item {
  display: flex;
  gap: 16px;
  margin-bottom: 32px;
}

.info-item:last-of-type {
  margin-bottom: 24px;
}

.info-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
}

.info-icon svg {
  width: 24px;
  height: 24px;
}

.info-content h3 {
  font-size: 18px;
  font-weight: 600;
  color: #1a202c;
  margin: 0 0 8px 0;
}

.info-content p {
  font-size: 14px;
  color: #6b7280;
  margin: 0;
  line-height: 1.5;
}

.social-links {
  border-top: 1px solid #e5e7eb;
  padding-top: 24px;
}

.social-links h3 {
  font-size: 16px;
  font-weight: 600;
  color: #1a202c;
  margin: 0 0 16px 0;
}

.social-icons {
  display: flex;
  gap: 12px;
}

.social-link {
  width: 40px;
  height: 40px;
  background: #f3f4f6;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  text-decoration: none;
  transition: all 0.3s ease;
}

.social-link:hover {
  background: #667eea;
  color: white;
  transform: translateY(-2px);
}

.social-link svg {
  width: 20px;
  height: 20px;
}

/* Contact Form */
.contact-form-wrapper {
  background: white;
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  position: relative;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

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

.form-label {
  font-size: 14px;
  font-weight: 500;
  color: #374151;
}

.form-input,
.form-select,
.form-textarea {
  padding: 12px 16px;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  font-size: 16px;
  transition: all 0.3s ease;
  background: white;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.form-input.error,
.form-select.error,
.form-textarea.error {
  border-color: #ef4444;
}

.form-input.success,
.form-select.success,
.form-textarea.success {
  border-color: #10b981;
}

.form-textarea {
  resize: vertical;
  min-height: 120px;
}

.form-error {
  font-size: 12px;
  color: #ef4444;
  margin-top: 4px;
  opacity: 0;
  transform: translateY(-4px);
  transition: all 0.3s ease;
}

.form-error.show {
  opacity: 1;
  transform: translateY(0);
}

.character-count {
  font-size: 12px;
  color: #9ca3af;
  text-align: right;
  margin-top: 4px;
}

/* File Upload */
.file-upload-label {
  cursor: pointer;
}

.file-input {
  display: none;
}

.file-upload-area {
  border: 2px dashed #d1d5db;
  border-radius: 8px;
  padding: 32px 16px;
  text-align: center;
  transition: all 0.3s ease;
  background: #f9fafb;
}

.file-upload-area:hover {
  border-color: #667eea;
  background: #f0f4ff;
}

.file-upload-area.dragover {
  border-color: #667eea;
  background: #e0e7ff;
  transform: scale(1.02);
}

.upload-icon {
  width: 48px;
  height: 48px;
  color: #9ca3af;
  margin-bottom: 16px;
}

.upload-text {
  display: block;
  font-size: 16px;
  font-weight: 500;
  color: #374151;
  margin-bottom: 4px;
}

.upload-hint {
  font-size: 12px;
  color: #9ca3af;
}

.uploaded-files {
  margin-top: 16px;
}

.uploaded-file {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: #f3f4f6;
  border-radius: 6px;
  margin-bottom: 8px;
}

.file-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.file-icon {
  width: 16px;
  height: 16px;
  color: #6b7280;
}

.file-name {
  font-size: 14px;
  color: #374151;
}

.file-size {
  font-size: 12px;
  color: #9ca3af;
}

.remove-file {
  background: none;
  border: none;
  color: #ef4444;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: background 0.3s ease;
}

.remove-file:hover {
  background: #fee2e2;
}

.remove-file svg {
  width: 16px;
  height: 16px;
}

/* Checkbox */
.checkbox-group {
  margin-top: 8px;
}

.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
}

.checkbox-input {
  display: none;
}

.checkbox-custom {
  width: 20px;
  height: 20px;
  border: 2px solid #d1d5db;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  flex-shrink: 0;
  margin-top: 2px;
}

.checkbox-input:checked + .checkbox-custom {
  background: #667eea;
  border-color: #667eea;
}

.checkbox-input:checked + .checkbox-custom::after {
  content: '✓';
  color: white;
  font-size: 12px;
  font-weight: bold;
}

.checkbox-text {
  font-size: 14px;
  color: #374151;
  line-height: 1.5;
}

.privacy-link {
  color: #667eea;
  text-decoration: none;
}

.privacy-link:hover {
  text-decoration: underline;
}

/* Submit Button */
.submit-btn {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  border: none;
  padding: 16px 32px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(102, 126, 234, 0.3);
}

.submit-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.btn-text,
.btn-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.loading-spinner {
  width: 20px;
  height: 20px;
}

/* Messages */
.form-message {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border-radius: 8px;
  margin-top: 24px;
  animation: slideIn 0.3s ease;
}

.success-message {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #065f46;
}

.error-message {
  background: #fef2f2;
  border: 1px solid #fca5a5;
  color: #991b1b;
}

.message-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.message-content h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 4px 0;
}

.message-content p {
  font-size: 14px;
  margin: 0;
  opacity: 0.8;
}

/* Animations */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

.form-group.error {
  animation: shake 0.5s ease;
}

/* Responsive Design */
@media (max-width: 768px) {
  .contact-container {
    padding: 24px 16px;
  }
  
  .contact-title {
    font-size: 32px;
  }
  
  .contact-subtitle {
    font-size: 16px;
  }
  
  .contact-content {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  
  .contact-info {
    order: 2;
  }
  
  .contact-form-wrapper {
    order: 1;
  }
  
  .form-row {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  
  .info-item {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }
  
  .info-icon {
    align-self: center;
  }
  
  .social-icons {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .contact-info,
  .contact-form-wrapper {
    padding: 24px 16px;
  }
  
  .file-upload-area {
    padding: 24px 12px;
  }
  
  .upload-icon {
    width: 32px;
    height: 32px;
  }
  
  .submit-btn {
    padding: 14px 24px;
  }
}

document.addEventListener('DOMContentLoaded', () => {
  const form = document.getElementById('contactForm');
  const submitBtn = document.getElementById('submitBtn');
  const btnText = submitBtn.querySelector('.btn-text');
  const btnLoading = submitBtn.querySelector('.btn-loading');
  const successMessage = document.getElementById('successMessage');
  const errorMessage = document.getElementById('errorMessage');
  const fileInput = document.getElementById('attachment');
  const fileUploadArea = document.getElementById('fileUploadArea');
  const uploadedFiles = document.getElementById('uploadedFiles');
  const messageTextarea = document.getElementById('message');
  const charCount = document.getElementById('charCount');
  
  let uploadedFilesList = [];
  
  // Reglas de validación del formulario
  const validationRules = {
    firstName: {
      required: true,
      minLength: 2,
      pattern: /^[a-zA-ZáéíóúÁÉÍÓÚñÑ\s]+$/,
      message: 'El nombre debe tener al menos 2 caracteres y contener solo letras'
    },
    lastName: {
      required: true,
      minLength: 2,
      pattern: /^[a-zA-ZáéíóúÁÉÍÓÚñÑ\s]+$/,
      message: 'Los apellidos deben tener al menos 2 caracteres y contener solo letras'
    },
    email: {
      required: true,
      pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
      message: 'Por favor ingresa una dirección de correo válida'
    },
    phone: {
      pattern: /^[\+]?[1-9][\d]{0,15}$/,
      message: 'Por favor ingresa un número de teléfono válido'
    },
    subject: {
      required: true,
      message: 'Por favor selecciona un asunto'
    },
    message: {
      required: true,
      minLength: 10,
      maxLength: 500,
      message: 'El mensaje debe tener entre 10 y 500 caracteres'
    },
    privacy: {
      required: true,
      message: 'Debes aceptar la política de privacidad'
    }
  };
  
  // Validación en tiempo real
  Object.keys(validationRules).forEach(fieldName => {
    const field = document.getElementById(fieldName);
    if (field) {
      field.addEventListener('blur', () => validateField(fieldName));
      field.addEventListener('input', () => {
        clearFieldError(fieldName);
        if (fieldName === 'message') {
          updateCharacterCount();
        }
      });
    }
  });
  
  // Contador de caracteres para el mensaje
  function updateCharacterCount() {
    const count = messageTextarea.value.length;
    charCount.textContent = count;
    
    if (count > 500) {
      charCount.style.color = '#ef4444';
    } else if (count > 400) {
      charCount.style.color = '#f59e0b';
    } else {
      charCount.style.color = '#9ca3af';
    }
  }
  
  // Validación de campos
  function validateField(fieldName) {
    const field = document.getElementById(fieldName);
    const rule = validationRules[fieldName];
    const value = field.type === 'checkbox' ? field.checked : field.value.trim();
    
    // Validación requerida
    if (rule.required && (!value || value === '')) {
      showFieldError(fieldName, rule.message || `${fieldName} es requerido`);
      return false;
    }
    
    // Omitir otras validaciones si el campo está vacío y no es requerido
    if (!value && !rule.required) {
      clearFieldError(fieldName);
      return true;
    }
    
    // Validación de longitud
    if (rule.minLength && value.length < rule.minLength) {
      showFieldError(fieldName, rule.message);
      return false;
    }
    
    if (rule.maxLength && value.length > rule.maxLength) {
      showFieldError(fieldName, rule.message);
      return false;
    }
    
    // Validación de patrón
    if (rule.pattern && !rule.pattern.test(value)) {
      showFieldError(fieldName, rule.message);
      return false;
    }
    
    // El campo es válido
    clearFieldError(fieldName);
    field.classList.add('success');
    return true;
  }
  
  function showFieldError(fieldName, message) {
    const field = document.getElementById(fieldName);
    const errorElement = document.getElementById(fieldName + 'Error');
    const formGroup = field.closest('.form-group');
    
    field.classList.add('error');
    field.classList.remove('success');
    errorElement.textContent = message;
    errorElement.classList.add('show');
    formGroup.classList.add('error');
    
    // Remover animación de sacudida después de que se complete
    setTimeout(() => {
      formGroup.classList.remove('error');
    }, 500);
  }
  
  function clearFieldError(fieldName) {
    const field = document.getElementById(fieldName);
    const errorElement = document.getElementById(fieldName + 'Error');
    
    field.classList.remove('error');
    errorElement.classList.remove('show');
    errorElement.textContent = '';
  }
  
  // Manejo de carga de archivos
  fileInput.addEventListener('change', handleFileSelect);
  
  // Arrastrar y soltar
  fileUploadArea.addEventListener('dragover', (e) => {
    e.preventDefault();
    fileUploadArea.classList.add('dragover');
  });
  
  fileUploadArea.addEventListener('dragleave', () => {
    fileUploadArea.classList.remove('dragover');
  });
  
  fileUploadArea.addEventListener('drop', (e) => {
    e.preventDefault();
    fileUploadArea.classList.remove('dragover');
    const files = Array.from(e.dataTransfer.files);
    handleFiles(files);
  });
  
  function handleFileSelect(e) {
    const files = Array.from(e.target.files);
    handleFiles(files);
  }
  
  function handleFiles(files) {
    const maxSize = 5 * 1024 * 1024; // 5MB
    const allowedTypes = ['application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'text/plain', 'image/jpeg', 'image/png'];
    
    files.forEach(file => {
      if (file.size > maxSize) {
        alert(`El archivo "${file.name}" es demasiado grande. El tamaño máximo es 5MB.`);
        return;
      }
      
      if (!allowedTypes.includes(file.type)) {
        alert(`El archivo "${file.name}" no es un formato compatible.`);
        return;
      }
      
      uploadedFilesList.push(file);
      displayUploadedFile(file);
    });
  }
  
  function displayUploadedFile(file) {
    const fileElement = document.createElement('div');
    fileElement.className = 'uploaded-file';
    fileElement.innerHTML = `
      <div class="file-info">
        <svg class="file-icon" viewBox="0 0 24 24" fill="currentColor">
          <path d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z" />
        </svg>
        <span class="file-name">${file.name}</span>
        <span class="file-size">(${formatFileSize(file.size)})</span>
      </div>
      <button type="button" class="remove-file" onclick="removeFile('${file.name}')">
        <svg viewBox="0 0 24 24" fill="currentColor">
          <path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" />
        </svg>
      </button>
    `;
    
    uploadedFiles.appendChild(fileElement);
  }
  
  window.removeFile = function(fileName) {
    uploadedFilesList = uploadedFilesList.filter(file => file.name !== fileName);
    const fileElements = uploadedFiles.querySelectorAll('.uploaded-file');
    fileElements.forEach(element => {
      if (element.querySelector('.file-name').textContent === fileName) {
        element.remove();
      }
    });
  };
  
  function formatFileSize(bytes) {
    if (bytes === 0) return '0 Bytes';
    const k = 1024;
    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
  }
  
  // Envío del formulario
  form.addEventListener('submit', async (e) => {
    e.preventDefault();
    
    // Validar todos los campos
    let isValid = true;
    Object.keys(validationRules).forEach(fieldName => {
      if (!validateField(fieldName)) {
        isValid = false;
      }
    });
    
    if (!isValid) {
      return;
    }
    
    // Mostrar estado de carga
    submitBtn.disabled = true;
    btnText.style.display = 'none';
    btnLoading.style.display = 'flex';
    
    // Ocultar mensajes anteriores
    successMessage.style.display = 'none';
    errorMessage.style.display = 'none';
    
    try {
      // Simular llamada a API
      await new Promise(resolve => setTimeout(resolve, 2000));
      
      // Simular éxito/fallo aleatorio para demo
      const success = Math.random() > 0.3;
      
      if (success) {
        showSuccessMessage();
        form.reset();
        uploadedFilesList = [];
        uploadedFiles.innerHTML = '';
        charCount.textContent = '0';
        
        // Limpiar todos los estados de campos
        Object.keys(validationRules).forEach(fieldName => {
          clearFieldError(fieldName);
          const field = document.getElementById(fieldName);
          if (field) {
            field.classList.remove('success', 'error');
          }
        });
      } else {
        showErrorMessage();
      }
    } catch (error) {
      showErrorMessage();
    } finally {
      // Restablecer estado del botón
      submitBtn.disabled = false;
      btnText.style.display = 'flex';
      btnLoading.style.display = 'none';
    }
  });
  
  function showSuccessMessage() {
    successMessage.style.display = 'flex';
    successMessage.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
    
    // Auto-ocultar después de 5 segundos
    setTimeout(() => {
      successMessage.style.display = 'none';
    }, 5000);
  }
  
  function showErrorMessage() {
    errorMessage.style.display = 'flex';
    errorMessage.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
    
    // Auto-ocultar después de 5 segundos
    setTimeout(() => {
      errorMessage.style.display = 'none';
    }, 5000);
  }
  
  // Inicializar contador de caracteres
  updateCharacterCount();
  
  // Agregar gestión de foco para accesibilidad
  const formElements = form.querySelectorAll('input, select, textarea, button');
  formElements.forEach((element, index) => {
    element.addEventListener('keydown', (e) => {
      if (e.key === 'Tab') {
        // Manejo personalizado de tab si es necesario
      }
    });
  });
});