<?php
session_start();
error_reporting(E_ALL & ~E_NOTICE); 
include_once "utils_database.php";
include_once "utils.php";

?>
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Resúmenes Científicos Trauma 2026</title>
  
  <!-- Fuentes y estilos externos -->
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"/>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flag-icon-css@3.5.0/css/flag-icon.min.css"/>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.css"/>
  
  <style>
    :root {
      --primary: #04724D; /* Verde esmeralda oscuro */
      --primary-light: #059669; /* Verde esmeralda medio */
      --primary-dark: #03543F; /* Verde más oscuro */

      --secondary: #1aae9f;
      --secondary-light: #21d7c5;
      --secondary-dark: #137d72;

      --accent: #FFC300; /* Amarillo brillante */
      --accent-light: #FFD60A; /* Amarillo más suave */
      --accent-dark: #D4A200; /* Amarillo dorado */

      --success: #28A745;
      --danger: #DC3545;
      --warning: #FFC107;
      --info: #17A2B8;

      --light: #F8F9FA;
      --dark: #343A40;
      --text: #212529;
      --text-light: #6C757D;
      --text-muted: #ADB5BD;

      --body-bg: #F5F8FF;

      --gray-100: #F8F9FA;
      --gray-200: #E9ECEF;
      --gray-300: #DEE2E6;
      --gray-400: #CED4DA;
      --gray-500: #ADB5BD;
      --gray-600: #6C757D;
      --gray-700: #495057;
      --gray-800: #343A40;
      --gray-900: #212529;

      --boxshadow-sm: 0 .125rem .25rem rgba(0, 0, 0, .075);
      --boxshadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
      --boxshadow-lg: 0 1rem 3rem rgba(0, 0, 0, .175);

      --border-radius: 0.5rem;
      --border-radius-lg: 0.75rem;
      --border-radius-sm: 0.25rem;

      --transition: all 0.3s ease;
}

    
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: 'Poppins', sans-serif;
      color: var(--text);
      background-color: var(--body-bg);
      line-height: 1.6;
      min-height: 100vh;
      overflow-x: hidden;
      background-image: linear-gradient(135deg, #f5f7ff 0%, #e3eeff 100%);
      background-attachment: fixed;
    }
    
    /* Header Styles */
    .main-header {
      background: linear-gradient(135deg, var(--primary-dark), var(--primary));
      color: white;
      padding: 0;
      position: relative;
      overflow: hidden;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
    
    .main-header::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: url('assets/img/banner.png') center/cover;
      opacity: 0.15;
      z-index: 0;
    }
    
    .top-bar {
      background-color: rgba(0,0,0,0.15);
      padding: 8px 0;
      position: relative;
      z-index: 1;
    }
    
    .top-bar-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .top-bar-left {
      display: flex;
      align-items: center;
    }
    
    .top-bar-right {
      display: flex;
      align-items: center;
    }
    
    .lang-selector {
      margin-left: 15px;
    }
    
    .lang-selector .dropdown-toggle {
      color: white;
      background: transparent;
      border: none;
      display: flex;
      align-items: center;
      padding: 5px 10px;
      border-radius: 4px;
      text-decoration: none;
      transition: background-color 0.3s;
    }
    
    .lang-selector .dropdown-toggle:hover,
    .lang-selector .dropdown-toggle:focus {
      background-color: rgba(255,255,255,0.1);
    }
    
    .lang-selector .flag-icon {
      margin-right: 5px;
    }
    
    .header-main {
      padding: 40px 0;
      position: relative;
      z-index: 1;
    }
    
    .header-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .header-logo-container {
      display: flex;
      align-items: center;
    }
    
    .header-logo {
      height: 80px;
      margin-right: 25px;
      filter: drop-shadow(0 0 8px rgba(255,255,255,0.6));
    }
    
    .header-titles {
      flex: 1;
    }
    
    .header-title {
      font-size: 2.5rem;
      font-weight: 700;
      margin-bottom: 5px;
      text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
    }
    
    .header-subtitle {
      font-size: 1.2rem;
      opacity: 0.9;
      max-width: 600px;
    }
    
    .header-cta {
      text-align: right;
      margin-left: 20px;
    }
    
    .header-cta-btn {
      background: var(--accent);
      color: white;
      border: none;
      padding: 12px 24px;
      border-radius: 50px;
      font-weight: 600;
      font-size: 1rem;
      transition: all 0.3s;
      box-shadow: 0 4px 12px rgba(255,107,53,0.3);
      text-decoration: none;
      display: inline-block;
    }
    
    .header-cta-btn:hover {
      background: var(--accent-dark);
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(255,107,53,0.4);
      color: white;
    }
    
    /* Deadline Banner */
    .deadline-banner {
      background-color: var(--accent);
      color: white;
      padding: 15px 0;
      font-weight: 500;
      position: relative;
      overflow: hidden;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
    
    .deadline-banner i {
      margin-right: 10px;
    }
    
    .deadline-banner::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
      z-index: 0;
    }
    
    .deadline-content {
      position: relative;
      z-index: 1;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .countdown-container {
      display: flex;
      margin-left: 15px;
    }
    
    .countdown-item {
      background-color: rgba(255,255,255,0.15);
      border-radius: 4px;
      padding: 2px 8px;
      margin: 0 2px;
      min-width: 40px;
      text-align: center;
      font-weight: 700;
    }
    
    /* Main Content */
    .main-content {
      padding: 50px 0;
      min-height: calc(100vh - 400px);
    }
    
    /* Progress Tracker */
    .progress-container {
      max-width: 800px;
      margin: 0 auto 40px;
      position: relative;
    }
    
    .progress-bar-container {
      height: 8px;
      background-color: rgba(255,255,255,0.8);
      border-radius: 20px;
      overflow: hidden;
      box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
      margin-bottom: 40px;
    }
    
    .progress-bar {
      height: 100%;
      background: linear-gradient(90deg, var(--secondary), var(--primary-light));
      width: 0%;
      transition: width 0.5s ease;
      border-radius: 20px;
      box-shadow: 0 0 10px rgba(45, 115, 255, 0.5);
      position: relative;
    }
    
    .progress-bar::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(
        90deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.4) 50%,
        rgba(255,255,255,0) 100%
      );
      animation: shimmer 1.5s infinite;
    }
    
    @keyframes shimmer {
      0% {
        transform: translateX(-100%);
      }
      100% {
        transform: translateX(100%);
      }
    }
    
    .step-indicator {
      display: flex;
      justify-content: space-between;
      position: relative;
      margin-top: -30px;
      margin-bottom: 30px;
    }
    
    .step-indicator::before {
      content: '';
      position: absolute;
      top: 25px;
      left: 15px;
      right: 15px;
      height: 2px;
      background-color: var(--gray-300);
      z-index: -1;
    }
    
    .step-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      z-index: 1;
      flex: 1;
      max-width: 120px;
    }
    
    .step-circle {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: white;
      border: 2px solid var(--gray-400);
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 8px;
      font-weight: 600;
      color: var(--gray-600);
      position: relative;
      transition: all 0.3s;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }
    
    .step-circle i {
      font-size: 20px;
    }
    
    .step-label {
      font-size: 12px;
      color: var(--gray-600);
      text-align: center;
      font-weight: 500;
      max-width: 100%;
      transition: all 0.3s;
    }
    
    .step-item.active .step-circle {
      background-color: var(--primary);
      border-color: var(--primary);
      color: white;
      transform: scale(1.1);
      box-shadow: 0 0 0 5px rgba(26, 92, 176, 0.2);
    }
    
    .step-item.active .step-label {
      color: var(--primary);
      font-weight: 600;
    }
    
    .step-item.completed .step-circle {
      background-color: var(--success);
      border-color: var(--success);
      color: white;
    }
    
    .step-item.completed .step-label {
      color: var(--success);
    }
    
    /* Form Card */
    .form-card {
      max-width: 850px;
      margin: 0 auto;
      background: white;
      border-radius: var(--border-radius-lg);
      box-shadow: var(--boxshadow);
      overflow: hidden;
      transition: transform 0.4s ease;
      position: relative;
    }
    
    .form-card:hover {
      transform: translateY(-5px);
      box-shadow: var(--boxshadow-lg);
    }
    
    .form-header {
      background: linear-gradient(135deg, var(--primary-light), var(--primary));
      color: white;
      padding: 25px 30px;
      position: relative;
    }
    
    .form-header h2 {
      margin: 0;
      font-size: 1.75rem;
      font-weight: 600;
    }
    
    .form-header p {
      margin: 5px 0 0;
      opacity: 0.9;
    }
    
    .form-container {
      padding: 40px;
    }
    
    /* Form Sections */
    .form-section {
      display: none;
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.4s ease, transform 0.4s ease;
    }
    
    .form-section.active {
      display: block;
      opacity: 1;
      transform: translateY(0);
      animation: fadeIn 0.5s ease;
    }
    
    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    .section-title {
      color: var(--primary);
      margin-bottom: 30px;
      position: relative;
      padding-bottom: 12px;
      font-weight: 600;
      font-size: 1.75rem;
    }
    
    .section-title::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 80px;
      height: 4px;
      background: linear-gradient(90deg, var(--primary), var(--secondary));
      border-radius: 2px;
    }
    
    .section-description {
      color: var(--text-light);
      margin-bottom: 30px;
      font-size: 1rem;
    }
    
    /* Form Elements */
    .form-group {
      margin-bottom: 25px;
      position: relative;
    }
    
    .form-control,
    .form-select {
      height: auto;
      padding: 12px 16px;
      border: 2px solid var(--gray-300);
      border-radius: 8px;
      font-family: 'Poppins', sans-serif;
      font-size: 1rem;
      transition: all 0.3s;
    }
    
    .form-control:focus,
    .form-select:focus {
      border-color: var(--primary);
      box-shadow: 0 0 0 0.25rem rgba(26, 92, 176, 0.25);
    }
    
    .form-control.is-invalid,
    .form-select.is-invalid {
      border-color: var(--danger);
      background-image: none;
    }
    
    .form-control.is-invalid:focus,
    .form-select.is-invalid:focus {
      box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
    }
    
    textarea.form-control {
      min-height: 150px;
      resize: vertical;
    }
    
    .form-label {
      font-weight: 500;
      margin-bottom: 8px;
      display: block;
      color: var(--gray-700);
    }
    
    .form-label.required::after {
      content: "*";
      color: var(--danger);
      margin-left: 4px;
    }
    
    .form-text {
      font-size: 0.85rem;
      color: var(--text-light);
      margin-top: 5px;
    }
    
    .invalid-feedback {
      display: none;
      font-size: 0.85rem;
      color: var(--danger);
      margin-top: 5px;
    }
    
    .form-control.is-invalid ~ .invalid-feedback,
    .form-select.is-invalid ~ .invalid-feedback,
    .is-invalid > .invalid-feedback {
      display: block;
    }
    
    /* Custom Radio and Checkbox Cards */
    .card-radio-group,
    .card-checkbox-group {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
      margin-top: 10px;
    }
    
    .card-radio,
    .card-checkbox {
      flex: 1 0 calc(50% - 15px);
      min-width: 200px;
      position: relative;
    }
    
    @media (max-width: 768px) {
      .card-radio,
      .card-checkbox {
        flex: 1 0 100%;
      }
    }
    
    .card-radio input,
    .card-checkbox input {
      position: absolute;
      opacity: 0;
      height: 0;
      width: 0;
    }
    
    .card-radio-label,
    .card-checkbox-label {
      display: flex;
      align-items: center;
      padding: 16px 20px;
      border: 2px solid var(--gray-300);
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.3s;
      background-color: var(--gray-100);
      font-weight: 500;
      position: relative;
    }
    
    .card-radio-label::before,
    .card-checkbox-label::before {
      content: '';
      display: inline-block;
      width: 24px;
      height: 24px;
      margin-right: 12px;
      border: 2px solid var(--gray-400);
      border-radius: 50%;
      transition: all 0.3s;
      flex-shrink: 0;
    }
    
    .card-checkbox-label::before {
      border-radius: 4px;
    }
    
    .card-radio input:checked + .card-radio-label,
    .card-checkbox input:checked + .card-checkbox-label {
      border-color: var(--primary);
      background-color: rgba(26, 92, 176, 0.05);
    }
    
    .card-radio input:checked + .card-radio-label::before {
      border-color: var(--primary);
      background-color: var(--primary);
      box-shadow: inset 0 0 0 5px white;
    }
    
    .card-checkbox input:checked + .card-checkbox-label::before {
      border-color: var(--primary);
      background-color: var(--primary);
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white' width='24px' height='24px'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
      background-position: center;
      background-repeat: no-repeat;
      background-size: 16px;
    }
    
    .card-radio input:focus + .card-radio-label,
    .card-checkbox input:focus + .card-checkbox-label {
      box-shadow: 0 0 0 3px rgba(26, 92, 176, 0.25);
    }
    
    .card-radio-icon,
    .card-checkbox-icon {
      margin-right: 12px;
      color: var(--primary);
      font-size: 1.25rem;
    }
    
    /* Autor section styling */
    .autor-card {
      background-color: white;
      border-radius: 10px;
      padding: 25px;
      margin-bottom: 25px;
      border-left: 5px solid var(--secondary);
      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
      position: relative;
      overflow: hidden;
    }
    
    .autor-card::before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      width: 100px;
      height: 100px;
      background: linear-gradient(135deg, rgba(26, 92, 176, 0.05) 0%, rgba(26, 92, 176, 0) 70%);
      border-radius: 0 0 0 100%;
    }
    
    .autor-heading {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      position: relative;
    }
    
    .autor-number {
      background: var(--secondary);
      color: white;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: 600;
      margin-right: 12px;
      box-shadow: 0 2px 6px rgba(26, 174, 159, 0.3);
    }
    
    .autor-title {
      color: var(--primary);
      margin: 0;
      font-size: 1.4rem;
      font-weight: 600;
    }
    
    .autor-ponente-badge {
      position: absolute;
      right: 0;
      top: 0;
      background: var(--accent);
      color: white;
      padding: 4px 12px;
      border-radius: 20px;
      font-size: 0.85rem;
      font-weight: 500;
    }
    
    .autor-inputs-row {
      display: grid;
      grid-template-columns: 120px 1fr 1fr;
      gap: 15px;
      margin-bottom: 20px;
    }
    
    @media (max-width: 768px) {
      .autor-inputs-row {
        grid-template-columns: 1fr;
      }
    }
    
    /* Word counter */
    .word-counter {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      margin-top: 8px;
    }
    
    .word-counter-text {
      font-size: 0.85rem;
      color: var(--text-light);
      margin-right: 8px;
    }
    
    .word-counter-bar {
      width: 100px;
      height: 4px;
      background-color: var(--gray-300);
      border-radius: 2px;
      overflow: hidden;
    }
    
    .word-counter-progress {
      height: 100%;
      width: 0%;
      background-color: var(--secondary);
      transition: width 0.3s, background-color 0.3s;
    }
    
    .word-counter-progress.warning {
      background-color: var(--warning);
    }
    
    .word-counter-progress.danger {
      background-color: var(--danger);
    }
    
    /* Button styling */
    .btn-form-nav {
      display: flex;
      justify-content: space-between;
      margin-top: 40px;
    }
    
    .btn-prev {
      padding: 12px 24px;
      background-color: white;
      border: 2px solid var(--gray-300);
      color: var(--text);
      font-weight: 600;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.3s;
      display: flex;
      align-items: center;
    }
    
    .btn-prev i {
      margin-right: 8px;
    }
    
    .btn-prev:hover {
      background-color: var(--gray-100);
      border-color: var(--gray-400);
    }
    
    .btn-next,
    .btn-submit {
      padding: 12px 30px;
      background: linear-gradient(90deg, var(--primary), var(--primary-dark));
      color: white;
      font-weight: 600;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.3s;
      display: flex;
      align-items: center;
      box-shadow: 0 4px 10px rgba(26, 92, 176, 0.25);
    }
    
    .btn-next i {
      margin-left: 8px;
    }
    
    .btn-submit i {
      margin-right: 8px;
    }
    
    .btn-next:hover,
    .btn-submit:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 15px rgba(26, 92, 176, 0.3);
    }
    
    .btn-submit {
      background: linear-gradient(90deg, var(--accent), var(--accent-dark));
      box-shadow: 0 4px 10px rgba(255, 107, 53, 0.25);
      position: relative;
      overflow: hidden;
    }
    
    .btn-submit:hover {
      box-shadow: 0 6px 15px rgba(255, 107, 53, 0.3);
    }
    
    .btn-submit::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(
        90deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.2) 50%,
        rgba(255,255,255,0) 100%
      );
      transform: translateX(-100%);
      animation: btn-shimmer 2s infinite;
    }
    
    @keyframes btn-shimmer {
      100% {
        transform: translateX(100%);
      }
    }
    
    /* File upload styling */
    .file-upload-container {
      position: relative;
      width: 100%;
      min-height: 200px;
      border: 2px dashed var(--gray-400);
      border-radius: 10px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 20px;
      transition: all 0.3s;
      background-color: var(--light);
      cursor: pointer;
    }
    
    .file-upload-container:hover {
      border-color: var(--primary);
      background-color: rgba(26, 92, 176, 0.05);
    }
    
    .file-upload-icon {
      font-size: 48px;
      color: var(--primary);
      margin-bottom: 15px;
    }
    
    .file-upload-text {
      font-weight: 500;
      margin-bottom: 5px;
    }
    
    .file-upload-subtext {
      font-size: 0.85rem;
      color: var(--text-light);
    }
    
    .file-upload-input {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      opacity: 0;
      cursor: pointer;
    }
    
    .file-list {
      margin-top: 20px;
    }
    
    .file-item {
      display: flex;
      align-items: center;
      background: var(--light);
      padding: 10px 15px;
      border-radius: 8px;
      margin-bottom: 10px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.05);
      transition: all 0.3s;
    }
    
    .file-item:hover {
      transform: translateX(5px);
      box-shadow: 03px 8px rgba(0,0,0,0.08);
    }
    
    .file-item-icon {
      font-size: 20px;
      margin-right: 15px;
      color: var(--primary);
    }
    
    .file-item-info {
      flex: 1;
    }
    
    .file-item-name {
      font-weight: 500;
      margin-bottom: 2px;
    }
    
    .file-item-size {
      font-size: 0.75rem;
      color: var(--text-light);
    }
    
    .file-item-remove {
      color: var(--danger);
      cursor: pointer;
      padding: 5px;
      border-radius: 4px;
      transition: all 0.3s;
    }
    
    .file-item-remove:hover {
      background-color: rgba(220, 53, 69, 0.1);
    }
    
    /* Success section styling */
    .success-section {
      padding: 60px 40px;
      text-align: center;
    }
    
    .success-icon {
      width: 100px;
      height: 100px;
      background: var(--success);
      color: white;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0 auto 30px;
      box-shadow: 0 10px 20px rgba(40, 167, 69, 0.3);
      animation: success-pulse 2s infinite;
    }
    
    @keyframes success-pulse {
      0% {
        box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.5);
      }
      70% {
        box-shadow: 0 0 0 20px rgba(40, 167, 69, 0);
      }
      100% {
        box-shadow: 0 0 0 0 rgba(40, 167, 69, 0);
      }
    }
    
    .success-icon i {
      font-size: 48px;
    }
    
    .success-title {
      font-size: 2.5rem;
      font-weight: 700;
      color: var(--success);
      margin-bottom: 20px;
    }
    
    .success-message {
      font-size: 1.1rem;
      color: var(--text);
      max-width: 600px;
      margin: 0 auto 30px;
    }
    
    .reference-number {
      background: var(--light);
      border: 2px dashed var(--success);
      padding: 15px 30px;
      border-radius: 8px;
      display: inline-block;
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--success);
      margin: 20px 0;
      position: relative;
    }
    
    .reference-number::before,
    .reference-number::after {
      content: '';
      position: absolute;
      width: 20px;
      height: 30px;
      background: var(--light);
      border-radius: 50%;
      top: 50%;
      transform: translateY(-50%);
    }
    
    .reference-number::before {
      left: -10px;
      border-left: 2px dashed var(--success);
    }
    
    .reference-number::after {
      right: -10px;
      border-right: 2px dashed var(--success);
    }
    
    .contact-info {
      margin-top: 40px;
      color: var(--text-light);
    }
    
    .contact-link {
      color: var(--primary);
      font-weight: 500;
      text-decoration: none;
      transition: all 0.3s;
    }
    
    .contact-link:hover {
      color: var(--primary-dark);
      text-decoration: underline;
    }
    
    .btn-new-submission {
      background: var(--primary);
      color: white;
      border: none;
      padding: 12px 25px;
      border-radius: 8px;
      font-weight: 600;
      margin-top: 30px;
      cursor: pointer;
      transition: all 0.3s;
      display: inline-flex;
      align-items: center;
    }
    
    .btn-new-submission i {
      margin-right: 8px;
    }
    
    .btn-new-submission:hover {
      background: var(--primary-dark);
      transform: translateY(-2px);
    }
    
    /* Footer styling */
    .main-footer {
      background: linear-gradient(135deg, var(--primary-dark), var(--primary));
      color: white;
      padding: 50px 0 20px;
      position: relative;
      overflow: hidden;
    }
    
    .main-footer::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: url('https://images.unsplash.com/photo-1597852074816-d933c7d2b988?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80') center/cover;
      opacity: 0.05;
      z-index: 0;
    }
    
    .footer-content {
      position: relative;
      z-index: 1;
    }
    
    .footer-logo {
      height: 60px;
      margin-bottom: 20px;
    }
    
    .footer-about {
      max-width: 350px;
      margin-bottom: 30px;
      opacity: 0.9;
    }
    
    .footer-title {
      font-size: 1.2rem;
      font-weight: 600;
      margin-bottom: 20px;
      position: relative;
      padding-bottom: 10px;
    }
    
    .footer-title::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 50px;
      height: 3px;
      background: var(--accent);
      border-radius: 2px;
    }
    
    .footer-links {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    
    .footer-links li {
      margin-bottom: 10px;
    }
    
    .footer-links a {
      color: rgba(255,255,255,0.8);
      text-decoration: none;
      transition: all 0.3s;
      display: inline-flex;
      align-items: center;
    }
    
    .footer-links a i {
      margin-right: 8px;
    }
    
    .footer-links a:hover {
      color: white;
      transform: translateX(5px);
    }
    
    .footer-contact-item {
      display: flex;
      align-items: flex-start;
      margin-bottom: 15px;
    }
    
    .footer-contact-icon {
      margin-right: 10px;
      background: rgba(255,255,255,0.1);
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-shrink: 0;
    }
    
    .footer-contact-text {
      opacity: 0.9;
    }
    
    .social-links {
      display: flex;
      gap: 10px;
      margin-top: 20px;
    }
    
    .social-link {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: rgba(255,255,255,0.1);
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
      text-decoration: none;
      transition: all 0.3s;
    }
    
    .social-link:hover {
      background: var(--accent);
      transform: translateY(-3px);
    }
    
    .footer-bottom {
      margin-top: 40px;
      padding-top: 20px;
      border-top: 1px solid rgba(255,255,255,0.1);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .footer-copyright {
      opacity: 0.7;
      font-size: 0.9rem;
    }
    
    .footer-bottom-links {
      display: flex;
      gap: 20px;
    }
    
    .footer-bottom-links a {
      color: rgba(255,255,255,0.7);
      text-decoration: none;
      font-size: 0.9rem;
      transition: all 0.3s;
    }
    
    .footer-bottom-links a:hover {
      color: white;
    }
    
    /* Loading overlay */
    .loading-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(255,255,255,0.9);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 9999;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s;
    }
    
    .loading-overlay.active {
      opacity: 1;
      visibility: visible;
    }
    
    .loading-spinner {
      width: 50px;
      height: 50px;
      border: 5px solid var(--primary-light);
      border-top-color: var(--primary);
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }
    
    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }
    
    /* Tooltip styling */
    .custom-tooltip {
      position: relative;
      display: inline-block;
      cursor: help;
      margin-left: 5px;
    }
    
    .tooltip-icon {
      color: var(--primary-light);
      font-size: 16px;
    }
    
    .tooltip-text {
      position: absolute;
      bottom: 125%;
      left: 50%;
      transform: translateX(-50%);
      background: var(--dark);
      color: white;
      padding: 8px 12px;
      border-radius: 6px;
      width: 200px;
      visibility: hidden;
      opacity: 0;
      transition: all 0.3s;
      z-index: 10;
      box-shadow: 0 5px 15px rgba(0,0,0,0.2);
      font-size: 0.85rem;
      text-align: center;
      pointer-events: none;
    }
    
    .tooltip-text::after {
      content: '';
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      border-width: 6px;
      border-style: solid;
      border-color: var(--dark) transparent transparent transparent;
    }
    
    .custom-tooltip:hover .tooltip-text {
      visibility: visible;
      opacity: 1;
      transform: translateX(-50%) translateY(-5px);
    }
    
    /* Responsive styles */
    @media (max-width: 992px) {
      .header-content {
        flex-direction: column;
        text-align: center;
      }
      
      .header-logo-container {
        justify-content: center;
        margin-bottom: 20px;
      }
      
      .header-titles {
        margin-bottom: 20px;
      }
      
      .header-cta {
        margin-left: 0;
        text-align: center;
      }
      
      .step-indicator {
        display: none;
      }
      
      .footer-row {
        flex-direction: column;
      }
      
      .footer-col {
        margin-bottom: 30px;
      }
      
      .footer-bottom {
        flex-direction: column;
      }
      
      .footer-copyright {
        margin-bottom: 15px;
      }
    }
    
    @media (max-width: 768px) {
      .top-bar-content {
        flex-direction: column;
      }
      
      .top-bar-right {
        margin-top: 10px;
      }
      
      .header-title {
        font-size: 2rem;
      }
      
      .form-container {
        padding: 20px;
      }
      
      .btn-form-nav {
        flex-direction: column;
        gap: 15px;
      }
      
      .btn-prev, .btn-next, .btn-submit {
        width: 100%;
        justify-content: center;
      }
      
      .success-section {
        padding: 40px 20px;
      }
      
      .success-title {
        font-size: 2rem;
      }
    }
    
    /* Animation Keyframes */
    @keyframes float {
      0% {
        transform: translateY(0px);
      }
      50% {
        transform: translateY(-10px);
      }
      100% {
        transform: translateY(0px);
      }
    }
    
    @keyframes pulse {
      0% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.05);
      }
      100% {
        transform: scale(1);
      }
    }
    
    .float {
      animation: float 3s ease-in-out infinite;
    }
    
    .pulse {
      animation: pulse 2s ease-in-out infinite;
    }
  </style>
</head>
<body data-bs-spy="scroll" data-bs-target="#navbar-main" data-bs-offset="100">
  <!-- Loading Overlay -->
  <div class="loading-overlay" id="loadingOverlay">
    <div class="loading-spinner"></div>
  </div>

  <!-- Main Header -->
  <header class="main-header">
    <div class="top-bar">
      <div class="container">
        <div class="top-bar-content">
          <div class="top-bar-left">
            <a href="#" class="text-white text-decoration-none">
              <i class="fas fa-calendar-alt me-2"></i> 15 de Abril, 2026
            </a>
          </div>
          <div class="top-bar-right">
            <a href="mailto:gshanklin@vcu.edu" class="text-white text-decoration-none me-3">
              <i class="fas fa-envelope me-1"></i> gshanklin@vcu.edu
            </a>
            <div class="lang-selector dropdown d-inline-block">
              <button class="dropdown-toggle" type="button" id="langDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                <span class="flag-icon flag-icon-es"></span> Español
              </button>
              <ul class="dropdown-menu" aria-labelledby="langDropdown">
                <li><a class="dropdown-item" href="#"><span class="flag-icon flag-icon-es"></span> Español</a></li>
                <li><a class="dropdown-item" href="#"><span class="flag-icon flag-icon-us"></span> English</a></li>
                <li><a class="dropdown-item" href="#"><span class="flag-icon flag-icon-br"></span> Português</a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="header-main">
      <div class="container">
        <div class="header-content">
          <div class="header-logo-container">
            <img src="assets/img/logo_congreso.png" alt="Logo SPT" class="header-logo">
          </div>
          <div class="header-titles">
            <h1 class="header-title" data-aos="fade-up">TRAUMA 2026</h1>
            <p class="header-subtitle" data-aos="fade-up" data-aos-delay="100">Plataforma de envío de resúmenes científicos para el Congreso Panamericano de Trauma</p>
          </div>
          <div class="header-cta">
            <a href="#" class="header-cta-btn" data-aos="fade-left">
              <i class="fas fa-info-circle me-2"></i> Más información
            </a>
          </div>
        </div>
      </div>
    </div>
  </header>
  
  <!-- Deadline Banner -->
  <div class="deadline-banner">
    <div class="container">
      <div class="deadline-content">
        <i class="fas fa-exclamation-circle"></i>
        <div class="fw-bold">Fecha límite:</div>
        <div class="ms-2">15 de Abril, 2026 (11:59 PM EST)</div>
        <div class="countdown-container ms-3" id="countdown">
          <div class="countdown-item">
            <span id="days">38</span>
          </div>
          <div>:</div>
          <div class="countdown-item">
            <span id="hours">14</span>
          </div>
          <div>:</div>
          <div class="countdown-item">
            <span id="minutes">22</span>
          </div>
          <div>:</div>
          <div class="countdown-item">
            <span id="seconds">45</span>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- Main Content -->
  <main class="main-content">
    <div class="container">
      <!-- Progress Container -->
      <div class="progress-container" data-aos="fade-up">
        <div class="progress-bar-container">
          <div class="progress-bar" id="formProgressBar"></div>
        </div>
        
        <div class="step-indicator" id="stepIndicator">
          <div class="step-item active" data-step="1">
            <div class="step-circle">
              <i class="fas fa-globe"></i>
            </div>
            <div class="step-label">Información Básica</div>
          </div>
          <div class="step-item" data-step="2">
            <div class="step-circle">
              <i class="fas fa-heading"></i>
            </div>
            <div class="step-label">Título y Tipo</div>
          </div>
          <div class="step-item" data-step="3">
            <div class="step-circle">
              <i class="fas fa-tag"></i>
            </div>
            <div class="step-label">Área Temática</div>
          </div>
          <div class="step-item" data-step="4">
            <div class="step-circle">
              <i class="fas fa-trophy"></i>
            </div>
            <div class="step-label">Categoría</div>
          </div>
          <div class="step-item" data-step="5">
            <div class="step-circle">
              <i class="fas fa-users"></i>
            </div>
            <div class="step-label">Autores</div>
          </div>
          <div class="step-item" data-step="6">
            <div class="step-circle">
              <i class="fas fa-file-alt"></i>
            </div>
            <div class="step-label">Resumen</div>
          </div>
          <div class="step-item" data-step="7">
            <div class="step-circle">
              <i class="fas fa-building"></i>
            </div>
            <div class="step-label">Institución</div>
          </div>
          <div class="step-item" data-step="8">
            <div class="step-circle">
              <i class="fas fa-paper-plane"></i>
            </div>
            <div class="step-label">Enviar</div>
          </div>
        </div>
      </div>
      
      <!-- Form Card -->
      <div class="form-card" data-aos="fade-up" data-aos-delay="100">
        <div class="form-header">
          <h2 id="formSectionTitle">Información Básica</h2>
          <p id="formSectionDescription">Por favor complete todos los campos requeridos marcados con *</p>
        </div>
        
        <form id="abstractForm" action="process_form.php" method="post" enctype="multipart/form-data">
          <input type="hidden" name="form_submitted" value="1">
          <input type="hidden" name="submission_id" id="submissionId">
          
          <div class="form-container">
            <!-- Sección 1: Información Básica -->
            <div class="form-section active" data-step="1" data-title="Información Básica" data-description="Por favor seleccione el idioma en el cual presentará su resumen">
              <div class="form-group">
                <label for="idioma" class="form-label required">Idioma de presentación</label>
                <div class="custom-tooltip">
                  <i class="fas fa-info-circle tooltip-icon"></i>
                  <span class="tooltip-text">La presentación debe ser en el mismo idioma del resumen enviado.</span>
                </div>
                <div class="card-radio-group">
                  <div class="card-radio">
                    <input type="radio" id="idioma-es" name="idioma" value="SL" data-codigo="SL" required>
                    <label for="idioma-es" class="card-radio-label">
                      <span class="flag-icon flag-icon-es me-2"></span> Español
                    </label>
                  </div>
                  <div class="card-radio">
                    <input type="radio" id="idioma-en" name="idioma" value="IL" data-codigo="IL" required>
                    <label for="idioma-en" class="card-radio-label">
                      <span class="flag-icon flag-icon-us me-2"></span> Inglés
                    </label>
                  </div>
                  <div class="card-radio">
                    <input type="radio" id="idioma-pt" name="idioma" value="PL" data-codigo="PL" required>
                    <label for="idioma-pt" class="card-radio-label">
                      <span class="flag-icon flag-icon-br me-2"></span> Portugués
                    </label>
                  </div>
                </div>
                <div class="invalid-feedback">
                  <i class="fas fa-exclamation-circle me-1"></i> Por favor seleccione un idioma
                </div>
              </div>
              
              <div class="btn-form-nav">
                <div></div> <!-- Espaciador para alinear -->
                <button type="button" class="btn-next" id="nextBtn1">Continuar <i class="fas fa-arrow-right"></i></button>
              </div>
            </div>
            
            <!-- Sección 2: Título y Tipo de Presentación -->
            <div class="form-section" data-step="2" data-title="Título y Tipo de Presentación" data-description="Ingrese el título y seleccione el tipo de presentación deseado">
              <div class="form-group">
                <label for="titulo" class="form-label required">Título del trabajo</label>
                <textarea class="form-control" id="titulo" name="titulo" rows="3" required></textarea>
                <div class="form-text">
                  <i class="fas fa-info-circle me-1"></i> Recuerde ingresar este campo en MAYÚSCULA
                </div>
                <div class="word-counter">
                  <div class="word-counter-text">
                    <span id="tituloWordCount">0</span>/30 palabras
                  </div>
                  <div class="word-counter-bar">
                    <div class="word-counter-progress" id="tituloWordProgress"></div>
                  </div>
                </div>
                <div class="invalid-feedback">
                  <i class="fas fa-exclamation-circle me-1"></i> Por favor ingrese un título
                </div>
              </div>
              
              <div class="form-group">
                <label for="tipoPresentacion" class="form-label required">Tipo de Presentación</label>
                <select class="form-select" id="tipoPresentacion" name="cod_tipo_presentacion_propuesto" required>
                  <option value="">Seleccione una opción</option>
                  <option value="M">SOLAMENTE PRESENTACIÓN ORAL</option>
                  <option value="O">SOLAMENTE PRESENTACIÓN E-POSTER</option>
                  <option value="B">AMBOS (ORAL Y E-POSTER)</option>
                </select>
                <div class="invalid-feedback">
                  <i class="fas fa-exclamation-circle me-1"></i> Por favor seleccione un tipo de presentación
                </div>
              </div>
              
              <div class="btn-form-nav">
                <button type="button" class="btn-prev" id="prevBtn2"><i class="fas fa-arrow-left"></i> Anterior</button>
                <button type="button" class="btn-next" id="nextBtn2">Continuar <i class="fas fa-arrow-right"></i></button>
              </div>
            </div>
            
            <!-- Sección 3: Área Temática -->
            <div class="form-section" data-step="3" data-title="Área Temática" data-description="Seleccione el área temática que mejor se adapte a su trabajo">
              <div class="form-group">
                <label class="form-label required">Área Temática</label>
                <div class="card-radio-group">
                  <div class="card-radio">
                    <input type="radio" id="area-a" name="area_tematica" value="A" required>
                    <label for="area-a" class="card-radio-label">
                      <i class="fas fa-hospital-alt card-radio-icon"></i> A) CIRUGÍA GENERAL DE EMERGENCIA
                    </label>
                  </div>
                  <div class="card-radio">
                    <input type="radio" id="area-b" name="area_tematica" value="B" required>
                    <label for="area-b" class="card-radio-label">
                      <i class="fas fa-ambulance card-radio-icon"></i> B) TRAUMA
                    </label>
                  </div>
                  <div class="card-radio">
                    <input type="radio" id="area-c" name="area_tematica" value="C" required>
                    <label for="area-c" class="card-radio-label">
                      <i class="fas fa-heartbeat card-radio-icon"></i> C) SHOCK, TRANSFUSIÓN Y REANIMACIÓN
                    </label>
                  </div>
                  <div class="card-radio">
                    <input type="radio" id="area-d" name="area_tematica" value="D" required>
                    <label for="area-d" class="card-radio-label">
                      <i class="fas fa-fire card-radio-icon"></i> D) QUEMADURAS
                    </label>
                  </div>
                  <div class="card-radio">
                    <input type="radio" id="area-e" name="area_tematica" value="E" required>
                    <label for="area-e" class="card-radio-label">
                      <i class="fas fa-procedures card-radio-icon"></i> E) CUIDADO CRÍTICO
                    </label>
                  </div>
                  <div class="card-radio">
                    <input type="radio" id="area-f" name="area_tematica" value="F" required>
                    <label for="area-f" class="card-radio-label">
                      <i class="fas fa-sitemap card-radio-icon"></i> F) SISTEMAS DE TRAUMA
                    </label>
                  </div>
                  <div class="card-radio">
                    <input type="radio" id="area-g" name="area_tematica" value="G" required>
                    <label for="area-g" class="card-radio-label">
                      <i class="fas fa-graduation-cap card-radio-icon"></i> G) EDUCACIÓN, PREVENCIÓN, EPIDEMIOLOGÍA
                    </label>
                  </div>
                </div>
                <div class="invalid-feedback">
                  <i class="fas fa-exclamation-circle me-1"></i> Por favor seleccione un área temática
                </div>
              </div>
              
              <div class="btn-form-nav">
                <button type="button" class="btn-prev" id="prevBtn3"><i class="fas fa-arrow-left"></i> Anterior</button>
                <button type="button" class="btn-next" id="nextBtn3">Continuar <i class="fas fa-arrow-right"></i></button>
              </div>
            </div>
            
            <!-- Sección 4: Categoría de Competencia -->
            <div class="form-section" data-step="4" data-title="Categoría de Competencia" data-description="Seleccione la categoría para su trabajo de investigación">
              <div class="form-group">
                <label for="categoriaCompetencia" class="form-label required">Categoría de Competencia</label>
                <select class="form-select" id="categoriaCompetencia" name="cod_tipo_competicion_propuesto" required>
                  <option value="">Seleccione una opción</option>
                  <option value="G">COMPETENCIA GENERAL</option>
                  <option value="R">COMPETENCIA RESIDENTES</option>
                  <option value="E">COMPETENCIA ESTUDIANTES</option>
                </select>
                <div class="invalid-feedback">
                    <i class="fas fa-exclamation-circle me-1"></i> Por favor seleccione una categoría
                </div>
              </div>
              
              <div class="btn-form-nav">
                <button type="button" class="btn-prev" id="prevBtn4"><i class="fas fa-arrow-left"></i> Anterior</button>
                <button type="button" class="btn-next" id="nextBtn4">Continuar <i class="fas fa-arrow-right"></i></button>
              </div>
            </div>
            
            <!-- Sección 5: Autores -->
            <div class="form-section" data-step="5" data-title="Autores" data-description="Ingrese la información de los autores (mínimo 3)">
              <div class="form-group">
                <label for="numeroAutores" class="form-label required">Número de Autores</label>
                <div class="custom-tooltip">
                  <i class="fas fa-info-circle tooltip-icon"></i>
                  <span class="tooltip-text">Cada trabajo debe tener como mínimo 3 autores. Los correos electrónicos deben ser únicos.</span>
                </div>
                <select class="form-select" id="numeroAutores" name="nro_autores" required>
                  <option value="">Seleccione una opción</option>
                  <option value="3">3 Autores</option>
                  <option value="4">4 Autores</option>
                  <option value="5">5 Autores</option>
                  <option value="6">6 Autores</option>
                  <option value="7">7 Autores</option>
                  <option value="8">8 Autores</option>
                  <option value="9">9 Autores</option>
                  <option value="10">10 Autores</option>
                </select>
                <div class="form-text">
                  <i class="fas fa-user-check me-1"></i> Solo el Autor #1 será ponente y la notificación del resumen solo será enviada al Contacto Principal.
                </div>
                <div class="invalid-feedback">
                  <i class="fas fa-exclamation-circle me-1"></i> Por favor seleccione el número de autores
                </div>
              </div>
              
              <div id="autoresContainer">
                <!-- Autor 1 (ponente) -->
                <div class="autor-card" data-autor="1">
                  <div class="autor-heading">
                    <div class="autor-number">1</div>
                    <h3 class="autor-title">Autor #1</h3>
                    <span class="autor-ponente-badge">
                      <i class="fas fa-microphone me-1"></i> Ponente
                    </span>
                  </div>
                  
                  <div class="form-group">
                    <label class="form-label required">Información personal</label>
                    <div class="autor-inputs-row">
                      <select class="form-select" name="titulo_autor1" required>
                        <option value="">Prefijo</option>
                        <option value="Dr.">Dr.</option>
                        <option value="Dra.">Dra.</option>
                        <option value="Sr.">Sr.</option>
                        <option value="Sra.">Sra.</option>
                        <option value="Srta.">Srta.</option>
                        <option value="Ph.D.">Ph.D.</option>
                        <option value="Enf.">Enf.</option>
                        <option value="MSc.">MSc.</option>
                      </select>
                      <input type="text" class="form-control" name="autor1" placeholder="Nombre" required>
                      <input type="text" class="form-control" name="apellido_autor1" placeholder="Apellido" required>
                    </div>
                    <div class="invalid-feedback">
                      <i class="fas fa-exclamation-circle me-1"></i> Por favor complete todos los campos
                    </div>
                  </div>
                  
                  <div class="form-group">
                    <label for="emailAutor1" class="form-label required">E-mail</label>
                    <input type="email" class="form-control" id="emailAutor1" name="email_autor1" placeholder="ejemplo@ejemplo.com" required>
                    <div class="invalid-feedback">
                      <i class="fas fa-exclamation-circle me-1"></i> Por favor ingrese un correo electrónico válido
                    </div>
                  </div>
                  
                  <div class="form-group">
                    <label for="instAutor1" class="form-label required">Institución</label>
                    <input type="text" class="form-control" id="instAutor1" name="inst_autor1" placeholder="Nombre de la institución" required>
                    <div class="invalid-feedback">
                      <i class="fas fa-exclamation-circle me-1"></i> Por favor ingrese la institución
                    </div>
                  </div>
                </div>
                
                <!-- Autor 2 -->
                <div class="autor-card" data-autor="2">
                  <div class="autor-heading">
                    <div class="autor-number">2</div>
                    <h3 class="autor-title">Autor #2</h3>
                  </div>
                  
                  <div class="form-group">
                    <label class="form-label required">Información personal</label>
                    <div class="autor-inputs-row">
                      <select class="form-select" name="titulo_autor2" required>
                        <option value="">Prefijo</option>
                        <option value="Dr.">Dr.</option>
                        <option value="Dra.">Dra.</option>
                        <option value="Sr.">Sr.</option>
                        <option value="Sra.">Sra.</option>
                        <option value="Srta.">Srta.</option>
                        <option value="Ph.D.">Ph.D.</option>
                        <option value="Enf.">Enf.</option>
                        <option value="MSc.">MSc.</option>
                      </select>
                      <input type="text" class="form-control" name="autor2" placeholder="Nombre" required>
                      <input type="text" class="form-control" name="apellido_autor2" placeholder="Apellido" required>
                    </div>
                    <div class="invalid-feedback">
                      <i class="fas fa-exclamation-circle me-1"></i> Por favor complete todos los campos
                    </div>
                  </div>
                  
                  <div class="form-group">
                    <label for="emailAutor2" class="form-label required">E-mail</label>
                    <input type="email" class="form-control" id="emailAutor2" name="email_autor2" placeholder="ejemplo@ejemplo.com" required>
                    <div class="invalid-feedback">
                      <i class="fas fa-exclamation-circle me-1"></i> Por favor ingrese un correo electrónico válido
                    </div>
                  </div>
                  
                  <div class="form-group">
                    <label for="instAutor2" class="form-label required">Institución</label>
                    <input type="text" class="form-control" id="instAutor2" name="inst_autor2" placeholder="Nombre de la institución" required>
                    <div class="invalid-feedback">
                      <i class="fas fa-exclamation-circle me-1"></i> Por favor ingrese la institución
                    </div>
                  </div>
                </div>
                
                <!-- Autor 3 -->
                <div class="autor-card" data-autor="3">
                  <div class="autor-heading">
                    <div class="autor-number">3</div>
                    <h3 class="autor-title">Autor #3</h3>
                  </div>
                  
                  <div class="form-group">
                    <label class="form-label required">Información personal</label>
                    <div class="autor-inputs-row">
                      <select class="form-select" name="titulo_autor3" required>
                        <option value="">Prefijo</option>
                        <option value="Dr.">Dr.</option>
                        <option value="Dra.">Dra.</option>
                        <option value="Sr.">Sr.</option>
                        <option value="Sra.">Sra.</option>
                        <option value="Srta.">Srta.</option>
                        <option value="Ph.D.">Ph.D.</option>
                        <option value="Enf.">Enf.</option>
                        <option value="MSc.">MSc.</option>
                      </select>
                      <input type="text" class="form-control" name="autor3" placeholder="Nombre" required>
                      <input type="text" class="form-control" name="apellido_autor3" placeholder="Apellido" required>
                    </div>
                    <div class="invalid-feedback">
                      <i class="fas fa-exclamation-circle me-1"></i> Por favor complete todos los campos
                    </div>
                  </div>
                  
                  <div class="form-group">
                    <label for="emailAutor3" class="form-label required">E-mail</label>
                    <input type="email" class="form-control" id="emailAutor3" name="email_autor3" placeholder="ejemplo@ejemplo.com" required>
                    <div class="invalid-feedback">
                      <i class="fas fa-exclamation-circle me-1"></i> Por favor ingrese un correo electrónico válido
                    </div>
                  </div>
                  
                  <div class="form-group">
                    <label for="instAutor3" class="form-label required">Institución</label>
                    <input type="text" class="form-control" id="instAutor3" name="inst_autor3" placeholder="Nombre de la institución" required>
                    <div class="invalid-feedback">
                      <i class="fas fa-exclamation-circle me-1"></i> Por favor ingrese la institución
                    </div>
                  </div>
                </div>
                
                <!-- Autores adicionales se generarán dinámicamente -->
              </div>
              
              <div class="btn-form-nav">
                <button type="button" class="btn-prev" id="prevBtn5"><i class="fas fa-arrow-left"></i> Anterior</button>
                <button type="button" class="btn-next" id="nextBtn5">Continuar <i class="fas fa-arrow-right"></i></button>
              </div>
            </div>
            
            <!-- Sección 6: Contenido del Resumen -->
            <div class="form-section" data-step="6" data-title="Contenido del Resumen" data-description="Ingrese el contenido detallado de su resumen científico">
              <div class="alert alert-info mb-4">
                <i class="fas fa-exclamation-circle me-2"></i>
                <strong>Importante:</strong> El resumen completo (introducción + materiales + resultados + conclusiones) no debe superar las 300 palabras en total.
              </div>
              
              <div class="form-group">
                <label for="introduccion" class="form-label required">Introducción</label>
                <textarea class="form-control" id="introduccion" name="introduccion" rows="4" required></textarea>
                <div class="form-text">
                  <i class="fas fa-info-circle me-1"></i> Describe el contexto, problema, justificación y objetivos de su investigación.
                </div>
                <div class="word-counter">
                  <div class="word-counter-text">
                    <span id="introduccionWordCount">0</span>/100 palabras recomendadas
                  </div>
                  <div class="word-counter-bar">
                    <div class="word-counter-progress" id="introduccionWordProgress"></div>
                  </div>
                </div>
                <div class="invalid-feedback">
                  <i class="fas fa-exclamation-circle me-1"></i> Por favor ingrese la introducción
                </div>
              </div>
              
              <div class="form-group">
                <label for="materiales" class="form-label required">Materiales y Métodos</label>
                <textarea class="form-control" id="materiales" name="materiales" rows="4" required></textarea>
                <div class="form-text">
                  <i class="fas fa-info-circle me-1"></i> Describa el diseño del estudio, población, intervenciones y análisis estadístico.
                </div>
                <div class="word-counter">
                  <div class="word-counter-text">
                    <span id="materialesWordCount">0</span>/70 palabras recomendadas
                  </div>
                  <div class="word-counter-bar">
                    <div class="word-counter-progress" id="materialesWordProgress"></div>
                  </div>
                </div>
                <div class="invalid-feedback">
                  <i class="fas fa-exclamation-circle me-1"></i> Por favor ingrese los materiales y métodos
                </div>
              </div>
              
              <div class="form-group">
                <label for="resultados" class="form-label required">Resultados</label>
                <textarea class="form-control" id="resultados" name="resultados" rows="4" required></textarea>
                <div class="form-text">
                  <i class="fas fa-info-circle me-1"></i> Presente los hallazgos más relevantes con datos numéricos y significancia estadística.
                </div>
                <div class="word-counter">
                  <div class="word-counter-text">
                    <span id="resultadosWordCount">0</span>/80 palabras recomendadas
                  </div>
                  <div class="word-counter-bar">
                    <div class="word-counter-progress" id="resultadosWordProgress"></div>
                  </div>
                </div>
                <div class="invalid-feedback">
                  <i class="fas fa-exclamation-circle me-1"></i> Por favor ingrese los resultados
                </div>
              </div>
              
              <div class="form-group">
                <label for="conclusiones" class="form-label required">Conclusiones</label>
                <textarea class="form-control" id="conclusiones" name="conclusiones" rows="4" required></textarea>
                <div class="form-text">
                  <i class="fas fa-info-circle me-1"></i> Presente las conclusiones derivadas de sus resultados, implicaciones clínicas y recomendaciones.
                </div>
                <div class="word-counter">
                  <div class="word-counter-text">
                    <span id="conclusionesWordCount">0</span>/50 palabras recomendadas
                  </div>
                  <div class="word-counter-bar">
                    <div class="word-counter-progress" id="conclusionesWordProgress"></div>
                  </div>
                </div>
                <div class="invalid-feedback">
                  <i class="fas fa-exclamation-circle me-1"></i> Por favor ingrese las conclusiones
                </div>
              </div>
              
              <div class="form-group">
                <label class="form-label">Resumen total de palabras</label>
                <div class="progress">
                  <div class="progress-bar bg-success" id="totalWordProgress" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
                <div class="d-flex justify-content-between mt-2">
                  <div class="form-text">
                    <i class="fas fa-info-circle me-1"></i> Límite máximo: 300 palabras
                  </div>
                  <div>
                    <span id="totalWordCount">0</span>/300 palabras
                  </div>
                </div>
              </div>
              
              <div class="btn-form-nav">
                <button type="button" class="btn-prev" id="prevBtn6"><i class="fas fa-arrow-left"></i> Anterior</button>
                <button type="button" class="btn-next" id="nextBtn6">Continuar <i class="fas fa-arrow-right"></i></button>
              </div>
            </div>
            
            <!-- Sección 7: Información Adicional -->
            <div class="form-section" data-step="7" data-title="Información Adicional" data-description="Complete los datos de su institución y país de origen">
              <div class="row">
                <div class="col-md-12">
                  <div class="form-group">
                    <label for="institucion" class="form-label required">Institución Principal</label>
                    <input type="text" class="form-control" id="institucion" name="institucion" placeholder="Nombre completo de la institución" required>
                    <div class="invalid-feedback">
                      <i class="fas fa-exclamation-circle me-1"></i> Por favor ingrese la institución principal
                    </div>
                  </div>
                </div>
                
                <div class="col-md-6">
                  <div class="form-group">
                    <label for="pais" class="form-label required">País</label>
                    <select class="form-select" id="pais" name="pais" required>
                       <option value="Afganistán">Afganistán</option>
            <option value="Albania">Albania</option>
            <option value="Argelia">Argelia</option>
            <option value="Samoa Americana">Samoa Americana</option>
            <option value="Andorra">Andorra</option>
            <option value="Angola">Angola</option>
            <option value="Anguilla">Anguilla</option>
            <option value="Antigua y Barbuda">Antigua y Barbuda</option>
            <option value="Argentina">Argentina</option>
            <option value="Armenia">Armenia</option>
            <option value="Aruba">Aruba</option>
            <option value="Australia">Australia</option>
            <option value="Austria">Austria</option>
            <option value="Azerbaijan">Azerbaijan</option>
            <option value="Las Bahamas">Las Bahamas</option>
            <option value="Bahrein">Bahrein</option>
            <option value="Bangladesh">Bangladesh</option>
            <option value="Barbados">Barbados</option>
            <option value="Bielorrusia">Bielorrusia</option>
            <option value="Bélgica">Bélgica</option>
            <option value="Belice">Belice</option>
            <option value="Benin">Benin</option>
            <option value="Bermuda">Bermuda</option>
            <option value="Bhután">Bhután</option>
            <option value="Bolivia">Bolivia</option>
            <option value="Bosnia y Herzegovina">Bosnia y Herzegovina</option>
            <option value="Botswana">Botswana</option>
            <option value="Brasil">Brasil</option>
            <option value="Brunei">Brunei</option>
            <option value="Bulgaria">Bulgaria</option>
            <option value="Burkina Faso">Burkina Faso</option>
            <option value="Burundi">Burundi</option>
            <option value="Camboya">Camboya</option>
            <option value="Camerún">Camerún</option>
            <option value="Canadá">Canadá</option>
            <option value="Cabo Verde">Cabo Verde</option>
            <option value="Islas Caimán">Islas Caimán</option>
            <option value="República Centroafricana">República Centroafricana</option>
            <option value="Chad">Chad</option>
            <option value="Chile">Chile</option>
            <option value="China">China</option>
            <option value="Isla de Navidad">Isla de Navidad</option>
            <option value="Isla del Coco">Isla del Coco</option>
            <option value="Colombia">Colombia</option>
            <option value="Comoras">Comoras</option>
            <option value="Congo">Congo</option>
            <option value="Islas Cook">Islas Cook</option>
            <option value="Costa Rica">Costa Rica</option>
            <option value="Cote d&#x27;Ivoire">Cote d&#x27;Ivoire</option>
            <option value="Croacia">Croacia</option>
            <option value="Cuba">Cuba</option>
            <option value="Curaçao">Curaçao</option>
            <option value="Chipre">Chipre</option>
            <option value="República Checa">República Checa</option>
            <option value="República Democrática del Congo">República Democrática del Congo</option>
            <option value="Dinamarca">Dinamarca</option>
            <option value="Djibouti">Djibouti</option>
            <option value="República Dominicana">República Dominicana</option>
            <option value="República Dominicana">República Dominicana</option>
            <option value="Ecuador">Ecuador</option>
            <option value="Egypt">Egypt</option>
            <option value="El Salvador">El Salvador</option>
            <option value="Guinea Ecuatorial">Guinea Ecuatorial</option>
            <option value="Eritrea">Eritrea</option>
            <option value="Estonia">Estonia</option>
            <option value="Etiopía">Etiopía</option>
            <option value="Islas Malvinas">Islas Malvinas</option>
            <option value="Islas Faroe">Islas Faroe</option>
            <option value="Fiyi">Fiyi</option>
            <option value="Finlandia">Finlandia</option>
            <option value="Francia">Francia</option>
            <option value="Polinesia Francesa">Polinesia Francesa</option>
            <option value="Gabon">Gabon</option>
            <option value="Gambia">Gambia</option>
            <option value="Georgia">Georgia</option>
            <option value="Alemania">Alemania</option>
            <option value="Ghana">Ghana</option>
            <option value="Gibraltar">Gibraltar</option>
            <option value="Grecia">Grecia</option>
            <option value="Groenlandia">Groenlandia</option>
            <option value="Granada">Granada</option>
            <option value="Guadalupe">Guadalupe</option>
            <option value="GUAM">GUAM</option>
            <option value="Guatemala">Guatemala</option>
            <option value="Guernesey">Guernesey</option>
            <option value="Guinea">Guinea</option>
            <option value="Guinea-Bissau">Guinea-Bissau</option>
            <option value="Guyana">Guyana</option>
            <option value="Haití">Haití</option>
            <option value="Honduras">Honduras</option>
            <option value="Hong Kong">Hong Kong</option>
            <option value="Hungría">Hungría</option>
            <option value="Islandia">Islandia</option>
            <option value="India">India</option>
            <option value="Indonesia">Indonesia</option>
            <option value="Iran">Iran</option>
            <option value="Iraq">Iraq</option>
            <option value="Irlanda">Irlanda</option>
            <option value="Israel">Israel</option>
            <option value="Italia">Italia</option>
            <option value="Jamaica">Jamaica</option>
            <option value="Japón">Japón</option>
            <option value="Jersey">Jersey</option>
            <option value="Jordan">Jordan</option>
            <option value="Kazajistán">Kazajistán</option>
            <option value="Kenia">Kenia</option>
            <option value="Kiribati">Kiribati</option>
            <option value="Corea del Norte">Corea del Norte</option>
            <option value="Corea del Sur">Corea del Sur</option>
            <option value="Kosovo">Kosovo</option>
            <option value="Kuwait">Kuwait</option>
            <option value="Kyrgyztan">Kyrgyztan</option>
            <option value="Laos">Laos</option>
            <option value="Latvia">Latvia</option>
            <option value="Lebanon">Lebanon</option>
            <option value="Lesoto">Lesoto</option>
            <option value="Liberia">Liberia</option>
            <option value="Libia">Libia</option>
            <option value="Liechtenstein">Liechtenstein</option>
            <option value="Lituania">Lituania</option>
            <option value="Luxemburgo">Luxemburgo</option>
            <option value="Macao">Macao</option>
            <option value="Macedonia">Macedonia</option>
            <option value="Madagascar">Madagascar</option>
            <option value="Malawi">Malawi</option>
            <option value="Malasia">Malasia</option>
            <option value="Islas Maldivas">Islas Maldivas</option>
            <option value="Mali">Mali</option>
            <option value="Malta">Malta</option>
            <option value="Islas Marshall">Islas Marshall</option>
            <option value="san martín">san martín</option>
            <option value="Mauritania">Mauritania</option>
            <option value="Islas Mauricio">Islas Mauricio</option>
            <option value="Mayotte">Mayotte</option>
            <option value="México">México</option>
            <option value="Micronesia">Micronesia</option>
            <option value="Moldova">Moldova</option>
            <option value="Monaco">Monaco</option>
            <option value="Mongolia">Mongolia</option>
            <option value="Montenegro">Montenegro</option>
            <option value="Monteserrat">Monteserrat</option>
            <option value="Marruecos">Marruecos</option>
            <option value="Mozambique">Mozambique</option>
            <option value="Birmania">Birmania</option>
            <option value="Nagorno-Karabakh">Nagorno-Karabakh</option>
            <option value="Namibia">Namibia</option>
            <option value="Nauru">Nauru</option>
            <option value="Nepal">Nepal</option>
            <option value="Holanda">Holanda</option>
            <option value="Antillas Holandesas">Antillas Holandesas</option>
            <option value="Nueva Caledonia">Nueva Caledonia</option>
            <option value="Nueva Zelanda">Nueva Zelanda</option>
            <option value="Nicaragua">Nicaragua</option>
            <option value="Níger">Níger</option>
            <option value="Nigeria">Nigeria</option>
            <option value="Niue">Niue</option>
            <option value="Isla Norfolk">Isla Norfolk</option>
            <option value="Northern Cyprus">Northern Cyprus</option>
            <option value="Marianas del Norte">Marianas del Norte</option>
            <option value="Noruega">Noruega</option>
            <option value="Omán">Omán</option>
            <option value="Pakistán">Pakistán</option>
            <option value="Palau">Palau</option>
            <option value="Palestina">Palestina</option>
            <option value="Panamá">Panamá</option>
            <option value="Papúa Nueva Guinea">Papúa Nueva Guinea</option>
            <option value="Paraguay">Paraguay</option>
            <option value="Perú">Perú</option>
            <option value="Filipinas">Filipinas</option>
            <option value="Islas Pitcairn">Islas Pitcairn</option>
            <option value="Polonia">Polonia</option>
            <option value="Portugal">Portugal</option>
            <option value="Puerto Rico">Puerto Rico</option>
            <option value="Catar">Catar</option>
            <option value="República del Congo">República del Congo</option>
            <option value="Rumanía">Rumanía</option>
            <option value="Rusia">Rusia</option>
            <option value="Rwanda">Rwanda</option>
            <option value="San Bartolomé">San Bartolomé</option>
            <option value="Santa Helena">Santa Helena</option>
            <option value="Saint kitts y nevis">Saint kitts y nevis</option>
            <option value="Santa Lucía">Santa Lucía</option>
            <option value="San Martín">San Martín</option>
            <option value="Saint Pierre y Miquelon">Saint Pierre y Miquelon</option>
            <option value="San Vicente y las Granadinas">San Vicente y las Granadinas</option>
            <option value="Samoa">Samoa</option>
            <option value="San Marino">San Marino</option>
            <option value="Santo Tomás y Príncipe">Santo Tomás y Príncipe</option>
            <option value="Arabia Saudita">Arabia Saudita</option>
            <option value="Senegal">Senegal</option>
            <option value="Serbia">Serbia</option>
            <option value="Seychelles">Seychelles</option>
            <option value="Sierra Leona">Sierra Leona</option>
            <option value="Singapur">Singapur</option>
            <option value="Eslovaquia">Eslovaquia</option>
            <option value="Eslovenia">Eslovenia</option>
            <option value="Islas Solomon">Islas Solomon</option>
            <option value="Somalia">Somalia</option>
            <option value="Somalilandia">Somalilandia</option>
            <option value="Sudáfrica">Sudáfrica</option>
            <option value="Osetia del Sur">Osetia del Sur</option>
            <option value="South Sudan">South Sudan</option>
            <option value="España">España</option>
            <option value="Sri Lanka">Sri Lanka</option>
            <option value="Sudán">Sudán</option>
            <option value="Suriname">Suriname</option>
            <option value="Svalbard">Svalbard</option>
            <option value="eSwatini">eSwatini</option>
            <option value="Suecia">Suecia</option>
            <option value="Suiza">Suiza</option>
            <option value="Siria">Siria</option>
            <option value="Taiwán">Taiwán</option>
            <option value="Tajakistan">Tajakistan</option>
            <option value="Tanzania">Tanzania</option>
            <option value="Tailandia">Tailandia</option>
            <option value="Timor-Leste">Timor-Leste</option>
            <option value="Togo">Togo</option>
            <option value="Tokelau">Tokelau</option>
            <option value="Tonga">Tonga</option>
            <option value="Transnistria Pridnestrovie">Transnistria Pridnestrovie</option>
            <option value="Trinidad y Tobago">Trinidad y Tobago</option>
            <option value="Tristan da Cunha">Tristan da Cunha</option>
            <option value="Tunes">Tunes</option>
            <option value="Turquía">Turquía</option>
            <option value="Turkmenistán">Turkmenistán</option>
            <option value="Islas Turcas y Caicos">Islas Turcas y Caicos</option>
            <option value="Tuvalu">Tuvalu</option>
            <option value="Uganda">Uganda</option>
            <option value="Ucrania">Ucrania</option>
            <option value="Emiratos Árabes Unidos">Emiratos Árabes Unidos</option>
            <option value="Reino Unido">Reino Unido</option>
            <option value="Estados Unidos">Estados Unidos</option>
            <option value="Uruguay">Uruguay</option>
            <option value="Uzbekistan">Uzbekistan</option>
            <option value="Vanuatu">Vanuatu</option>
            <option value="Ciudad del Vaticano">Ciudad del Vaticano</option>
            <option value="Venezuela">Venezuela</option>
            <option value="Vietnam">Vietnam</option>
            <option value="Islas Vírgenes Británicas">Islas Vírgenes Británicas</option>
            <option value="Isla de Hombre">Isla de Hombre</option>
            <option value="Islas Vírgenes , Estados Unidos">Islas Vírgenes , Estados Unidos</option>
            <option value="Wallis y Futuna">Wallis y Futuna</option>
            <option value="Sáhara Occidental">Sáhara Occidental</option>
            <option value="Yemen">Yemen</option>
            <option value="Zambia">Zambia</option>
            <option value="Zimbabwe">Zimbabwe</option>
                    </select>
                    <div class="invalid-feedback">
                      <i class="fas fa-exclamation-circle me-1"></i> Por favor seleccione un país
                    </div>
                  </div>
                </div>
                
                <div class="col-md-6">
                  <div class="form-group">
                    <label for="ciudad" class="form-label required">Ciudad</label>
                    <input type="text" class="form-control" id="ciudad" name="ciudad" placeholder="Ciudad" required>
                    <div class="invalid-feedback">
                      <i class="fas fa-exclamation-circle me-1"></i> Por favor ingrese la ciudad
                    </div>
                  </div>
                </div>
              </div>
              
              <div class="form-group">
                <label for="archivo" class="form-label">Documentos Adicionales (opcional)</label>
                <div class="file-upload-container" id="fileUploadContainer">
                  <i class="fas fa-cloud-upload-alt file-upload-icon"></i>
                  <div class="file-upload-text">Arrastre y suelte archivos aquí o haga clic para explorar</div>
                  <div class="file-upload-subtext">Formatos permitidos: PDF, DOC, DOCX, JPG, PNG (Máx. 10MB)</div>
                  <input type="file" id="archivo" name="archivo" class="file-upload-input" accept=".pdf,.doc,.docx,.jpg,.jpeg,.png">
                </div>
                <div id="fileList" class="file-list"></div>
              </div>
              
              <div class="form-group">
                <label for="corresponsal" class="form-label required">Nombre del Corresponsal</label>
                <input type="text" class="form-control" id="corresponsal" name="nombre_corresponsal" placeholder="Nombre completo del corresponsal" required>
                <div class="form-text">
                  <i class="fas fa-info-circle me-1"></i> Persona que recibirá las notificaciones sobre este resumen
                </div>
                <div class="invalid-feedback">
                  <i class="fas fa-exclamation-circle me-1"></i> Por favor ingrese el nombre del corresponsal
                </div>
              </div>
              
              <div class="form-group">
                <label for="apellidoCorresponsal" class="form-label required">Apellido del Corresponsal</label>
                <input type="text" class="form-control" id="apellidoCorresponsal" name="apellido_corresponsal" placeholder="Apellido del corresponsal" required>
                <div class="invalid-feedback">
                  <i class="fas fa-exclamation-circle me-1"></i> Por favor ingrese el apellido del corresponsal
                </div>
              </div>
              
              <div class="form-group">
                <label for="emailCorresponsal" class="form-label required">Email del Corresponsal</label>
                <input type="email" class="form-control" id="emailCorresponsal" name="email" placeholder="correo@ejemplo.com" required>
                <div class="invalid-feedback">
                  <i class="fas fa-exclamation-circle me-1"></i> Por favor ingrese un correo electrónico válido
                </div>
              </div>
              
              <!-- Sección de Becas y Patrocinadores -->
<div class="form-group">
  <label for="beca_internacional" class="form-label">¿Desea ser considerado para una beca de viaje internacional?</label>
  <div class="form-check">
    <input class="form-check-input" type="radio" name="beca_internacional" id="beca_prevencion" value="Beca de viaje internacional: Prevención de lesiones, violencia y quemaduras"
    <?php echo (isset($trabajo['beca_internacional']) && $trabajo['beca_internacional'] == 'Beca de viaje internacional: Prevención de lesiones, violencia y quemaduras') ? 'checked' : ''; ?>>
    <label class="form-check-label" for="beca_prevencion">
      Beca de viaje internacional: Prevención de lesiones, violencia y quemaduras
    </label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="radio" name="beca_internacional" id="beca_desastres" value="Beca de viaje internacional: Respuesta médica a desastres"
    <?php echo (isset($trabajo['beca_internacional']) && $trabajo['beca_internacional'] == 'Beca de viaje internacional: Respuesta médica a desastres') ? 'checked' : ''; ?>>
    <label class="form-check-label" for="beca_desastres">
      Beca de viaje internacional: Respuesta médica a desastres
    </label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="radio" name="beca_internacional" id="no_beca" value="No deseo participar"
    <?php echo (isset($trabajo['beca_internacional']) && $trabajo['beca_internacional'] == 'No deseo participar') ? 'checked' : ''; ?> 
    <?php echo (!isset($trabajo['beca_internacional'])) ? 'checked' : ''; ?>>
    <label class="form-check-label" for="no_beca">
      No deseo participar
    </label>
  </div>
</div>

<!-- Información del Patrocinador (se mostrará/ocultará con JavaScript) -->
<div id="patrocinadorContainer" style="display: none;">
  <h4 class="mt-4">Información del Patrocinador</h4>
  
  <div class="form-group">
    <label for="nombre_patrocinador" class="form-label">Nombre del Patrocinador</label>
    <div class="row">
      <div class="col-md-6">
        <input type="text" class="form-control" id="nombre_patrocinador" name="nombre_patrocinador" placeholder="Nombre" 
        value="<?php echo htmlspecialchars($trabajo['nombre_patrocinador'] ?? ''); ?>">
      </div>
      <div class="col-md-6">
        <input type="text" class="form-control" id="apellido_patrocinador" name="apellido_patrocinador" placeholder="Apellido"
        value="<?php echo htmlspecialchars($trabajo['apellido_patrocinador'] ?? ''); ?>">
      </div>
    </div>
  </div>
  
  <div class="form-group">
    <label class="form-label">Estado de la Membresía del Patrocinador</label>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="estado_membresia_patrocinador" id="miembro_spt" value="Miembro SPT"
      <?php echo (isset($trabajo['estado_membresia_patrocinador']) && $trabajo['estado_membresia_patrocinador'] == 'Miembro SPT') ? 'checked' : ''; ?>>
      <label class="form-check-label" for="miembro_spt">
        Miembro SPT
      </label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="estado_membresia_patrocinador" id="no_miembro_spt" value="No Miembro SPT"
      <?php echo (isset($trabajo['estado_membresia_patrocinador']) && $trabajo['estado_membresia_patrocinador'] == 'No Miembro SPT') ? 'checked' : ''; ?>>
      <label class="form-check-label" for="no_miembro_spt">
        No Miembro SPT
      </label>
    </div>
  </div>
  
  <div class="form-group">
    <label for="email_patrocinador" class="form-label">Correo Electrónico del Patrocinador</label>
    <input type="email" class="form-control" id="email_patrocinador" name="email_patrocinador" placeholder="ejemplo@ejemplo.com"
    value="<?php echo htmlspecialchars($trabajo['email_patrocinador'] ?? ''); ?>">
  </div>
</div>

<!-- Script para mostrar/ocultar la sección de patrocinador -->
<script>
document.addEventListener('DOMContentLoaded', function() {
  const becaRadios = document.querySelectorAll('input[name="beca_internacional"]');
  const patrocinadorContainer = document.getElementById('patrocinadorContainer');
  
  // Función para mostrar/ocultar la sección de patrocinador
  function togglePatrocinadorSection() {
    const seleccionBeca = document.querySelector('input[name="beca_internacional"]:checked').value;
    if (seleccionBeca !== 'No deseo participar') {
      patrocinadorContainer.style.display = 'block';
    } else {
      patrocinadorContainer.style.display = 'none';
    }
  }
  
  // Añadir event listener a los radios de beca
  becaRadios.forEach(radio => {
    radio.addEventListener('change', togglePatrocinadorSection);
  });
  
  // Ejecutar al cargar la página
  togglePatrocinadorSection();
});
</script>
              
              <div class="btn-form-nav">
                <button type="button" class="btn-prev" id="prevBtn7"><i class="fas fa-arrow-left"></i> Anterior</button>
                <button type="button" class="btn-next" id="nextBtn7">Continuar <i class="fas fa-arrow-right"></i></button>
              </div>
            </div>
            
            <!-- Sección 8: Revisión y Envío -->
            <div class="form-section" data-step="8" data-title="Revisión y Envío" data-description="Verifique la información antes de enviar su resumen">
              <div class="alert alert-primary mb-4">
                <i class="fas fa-info-circle me-2"></i>
                <strong>Paso final:</strong> Por favor revise cuidadosamente toda la información antes de enviar su resumen.
              </div>
              
              <div class="card mb-4">
                <div class="card-header bg-light">
                  <h4 class="mb-0">Resumen de su envío</h4>
                </div>
                <div class="card-body">
                  <div id="resumenPreview">
                    <!-- Contenido generado dinámicamente mediante JavaScript -->
                  </div>
                </div>
              </div>
              
              <div class="form-check mb-4">
                <input class="form-check-input" type="checkbox" value="" id="confirmCheck" required>
                <label class="form-check-label" for="confirmCheck">
                  Declaro que he revisado la información y confirmo que es correcta. Entiendo que después del envío no podré realizar cambios.
                </label>
                <div class="invalid-feedback">
                  <i class="fas fa-exclamation-circle me-1"></i> Debe confirmar antes de enviar
                </div>
              </div>
              
              <input type="hidden" name="activo" value="1">
              <input type="hidden" name="aprobado" value="0">
              <input type="hidden" name="control" value="0">
              <input type="hidden" name="estado" value="pendiente">
              <input type="hidden" name="fecha" id="fechaEnvio">
              <input type="hidden" name="codigo" id="codigoTrabajo">
              
            <!-- Actualización para el botón de envío en la Sección 8 -->
<div class="btn-form-nav">
  <button type="button" class="btn-prev" id="prevBtn8"><i class="fas fa-arrow-left"></i> Anterior</button>
  <button type="submit" class="btn-submit pulse-animation" id="submitBtn">
    <div class="btn-submit-content">
      <i class="fas fa-paper-plane"></i> 
      <span>Enviar Resumen</span>
    </div>
    <div class="btn-loader">
      <div class="spinner-border spinner-border-sm text-light" role="status">
        <span class="visually-hidden">Cargando...</span>
      </div>
    </div>
  </button>
</div>

<!-- Estilos CSS adicionales para el botón -->
<style>
  .btn-submit {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    min-width: 180px;
  }
  
  .btn-submit .btn-submit-content {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
  }
  
  .btn-submit .btn-submit-content i {
    margin-right: 8px;
  }
  
  .btn-submit .btn-loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: inherit;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
  }
  
  .btn-submit.is-loading .btn-submit-content {
    opacity: 0;
    visibility: hidden;
  }
  
  .btn-submit.is-loading .btn-loader {
    opacity: 1;
    visibility: visible;
  }
  
  .pulse-animation {
    animation: pulse-submit 2s infinite;
  }
  
  @keyframes pulse-submit {
    0% {
      box-shadow: 0 0 0 0 rgba(255, 107, 53, 0.7);
    }
    70% {
      box-shadow: 0 0 0 10px rgba(255, 107, 53, 0);
    }
    100% {
      box-shadow: 0 0 0 0 rgba(255, 107, 53, 0);
    }
  }
  
  .btn-submit:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 6px 15px rgba(255, 107, 53, 0.3);
  }
  
  .btn-submit:active {
    transform: translateY(-1px) scale(0.98);
  }
  
  /* Efecto de rebote para la confirmación */
  @keyframes bounce-in {
    0% { transform: scale(0.3); opacity: 0; }
    50% { transform: scale(1.05); opacity: 0.9; }
    70% { transform: scale(0.9); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
  }
  
  .bounce-animation {
    animation: bounce-in 0.6s ease forwards;
  }
</style>

<script>
// Definir validateCurrentSection como función global que siempre devuelve true
window.validateCurrentSection = function() {
  return true;
};

document.addEventListener('DOMContentLoaded', function() {
  const submitBtn = document.getElementById('submitBtn');
  
  if (submitBtn) {
    // Reemplazar el evento de clic existente
    submitBtn.onclick = function(e) {
      e.preventDefault();
      
      // Efectos visuales básicos
      this.classList.add('is-loading');
      
      // Mostrar overlay de carga si existe
      const loadingOverlay = document.getElementById('loadingOverlay');
      if (loadingOverlay) loadingOverlay.classList.add('active');
      
      // Pequeña pausa para efectos visuales
      setTimeout(function() {
        // Enviar el formulario directamente
        document.getElementById('abstractForm').submit();
      }, 500);
      
      return false; // Prevenir comportamiento por defecto
    };
  }
});
</script>

<!-- Estilos adicionales para el efecto de ondas -->
<style>
  .ripple-effect {
    position: absolute;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.4);
    transform: scale(0);
    animation: ripple 0.6s linear;
    pointer-events: none;
  }
  
  @keyframes ripple {
    to {
      transform: scale(2);
      opacity: 0;
    }
  }
</style>
            
            <!-- Sección de Éxito (se muestra después del envío) -->
            <div class="form-section" data-step="success" style="display: none;">
              <div class="success-section">
                <div class="success-icon">
                  <i class="fas fa-check"></i>
                </div>
                <h2 class="success-title">¡Resumen Enviado Exitosamente!</h2>
                <p class="success-message">Su resumen científico para Trauma 2025 ha sido recibido correctamente. Hemos enviado un correo de confirmación a la dirección proporcionada.</p>
                
                <div class="reference-number" id="referenceNumber">
                  TR-2025-0001
                </div>
                
                <p class="success-message">Por favor guarde este número de referencia para consultas futuras. La revisión de su resumen tomará aproximadamente 4-6 semanas. Los resultados serán notificados por correo electrónico.</p>
                
                <div class="contact-info">
                  <p>Si tiene alguna consulta, por favor contacte a <a href="mailto:gshanklin@vcu.edu" class="contact-link">gshanklin@vcu.edu</a></p>
                </div>
                
                <button type="button" class="btn-new-submission" id="newSubmissionBtn">
                  <i class="fas fa-plus"></i> Enviar otro resumen
                </button>
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
  </main>
  
  <!-- Footer -->
  <footer class="main-footer">
    <div class="container">
      <div class="footer-content">
        <div class="row footer-row">
          <div class="col-lg-4 col-md-6 footer-col">
            <img src="assets/img/logo_congreso.png" alt="Logo SPT" class="footer-logo">
            <p class="footer-about">La Sociedad Panamericana de Trauma promueve la investigación, educación y prevención del trauma en las Américas desde 1986.</p>
            <div class="social-links">
              <a href="#" class="social-link"><i class="fab fa-facebook-f"></i></a>
              <a href="#" class="social-link"><i class="fab fa-twitter"></i></a>
              <a href="#" class="social-link"><i class="fab fa-instagram"></i></a>
              <a href="#" class="social-link"><i class="fab fa-linkedin-in"></i></a>
            </div>
          </div>
          
          <div class="col-lg-2 col-md-6 footer-col">
            <h3 class="footer-title">Enlaces</h3>
            <ul class="footer-links">
              <li><a href="#"><i class="fas fa-chevron-right"></i> Inicio</a></li>
              <li><a href="#"><i class="fas fa-chevron-right"></i> Programa</a></li>
              <li><a href="#"><i class="fas fa-chevron-right"></i> Ponentes</a></li>
              <li><a href="#"><i class="fas fa-chevron-right"></i> Sede</a></li>
              <li><a href="#"><i class="fas fa-chevron-right"></i> Alojamiento</a></li>
            </ul>
          </div>
          
          <div class="col-lg-3 col-md-6 footer-col">
            <h3 class="footer-title">Enlaces Útiles</h3>
            <ul class="footer-links">
              <li><a href="#"><i class="fas fa-chevron-right"></i> Membresía SPT</a></li>
              <li><a href="#"><i class="fas fa-chevron-right"></i> Revista PTJ</a></li>
              <li><a href="#"><i class="fas fa-chevron-right"></i> Instrucciones para Autores</a></li>
              <li><a href="#"><i class="fas fa-chevron-right"></i> Preguntas Frecuentes</a></li>
              <li><a href="#"><i class="fas fa-chevron-right"></i> Contacto</a></li>
            </ul>
          </div>
          
          <div class="col-lg-3 col-md-6 footer-col">
            <h3 class="footer-title">Contacto</h3>
            <div class="footer-contact-item">
              <div class="footer-contact-icon">
                <i class="fas fa-map-marker-alt"></i>
              </div>
              <div class="footer-contact-text">
               HQ office: Sanger Hall, VCU Medical Center<br>
               1101 E Marshall St, Richmond, VA 23298
              </div>
            </div>
            <div class="footer-contact-item">
              <div class="footer-contact-icon">
                <i class="fas fa-phone-alt"></i>
              </div>
              <div class="footer-contact-text">
                +1 804-827-0242
              </div>
            </div>
            <div class="footer-contact-item">
              <div class="footer-contact-icon">
                <i class="fas fa-envelope"></i>
              </div>
              <div class="footer-contact-text">
                gshanklin@vcu.edu
              </div>
            </div>
          </div>
        </div>
        
        <div class="footer-bottom">
          <div class="footer-copyright">
            &copy; 2026 Sociedad Panamericana de Trauma. Todos los derechos reservados.
          </div>
          <div class="footer-bottom-links">
            <a href="#">Términos y Condiciones</a>
            <a href="#">Política de Privacidad</a>
            <a href="#">Política de Cookies</a>
          </div>
        </div>
      </div>
    </div>
  </footer>

  <!-- JavaScript Bundle -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  <script src="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.js"></script>
  <script>
    // Inicializar AOS (Animate On Scroll)
    AOS.init({
      duration: 800,
      easing: 'ease-in-out',
      once: true
    });
    
    document.addEventListener('DOMContentLoaded', function() {
      // Variables globales
      const totalSteps = 8;
      let currentStep = 1;
      let authorCount = 3; // Mínimo 3 autores
      
      // Generar ID único para el envío
      const generateSubmissionId = () => {
        return 'TR' + Date.now().toString(36) + Math.random().toString(36).substring(2, 5).toUpperCase();
      };
      
      // Establecer ID de envío al cargar
      document.getElementById('submissionId').value = generateSubmissionId();
      
      // Establecer fecha actual
      const currentDate = new Date();
      document.getElementById('fechaEnvio').value = currentDate.toISOString().split('T')[0];
      
      // Generar código del trabajo
      const generateWorkCode = () => {
        // Formato: CÓDIGO_IDIOMA + CÓDIGO_ÁREA + NÚMERO_ALEATORIO
        const idioma = document.querySelector('input[name="idioma"]:checked')?.dataset.codigo || 'SL';
        const area = document.querySelector('input[name="area_tematica"]:checked')?.value || 'A';
        const randomNum = Math.floor(10000 + Math.random() * 90000);
        return `${idioma}${area}${randomNum}`;
      };
      
      // Actualizar el código de trabajo cuando cambian los valores
      const updateWorkCode = () => {
        document.getElementById('codigoTrabajo').value = generateWorkCode();
      };
      
      // Listeners para actualizar el código
      document.querySelectorAll('input[name="idioma"]').forEach(radio => {
        radio.addEventListener('change', updateWorkCode);
      });
      
      document.querySelectorAll('input[name="area_tematica"]').forEach(radio => {
        radio.addEventListener('change', updateWorkCode);
      });
      
      // Inicializar el código
      updateWorkCode();
      
      // Funciones para contador de palabras
      function countWords(text) {
        return text.trim().split(/\s+/).filter(Boolean).length;
      }
      
      function updateWordCounter(textareaId, counterId, progressId, maxWords) {
        const textarea = document.getElementById(textareaId);
        const counter = document.getElementById(counterId);
        const progress = document.getElementById(progressId);
        
        if (!textarea || !counter || !progress) return;
        
        textarea.addEventListener('input', function() {
          const wordCount = countWords(this.value);
          counter.textContent = wordCount;
          
          // Actualizar barra de progreso
          const percentage = Math.min((wordCount / maxWords) * 100, 100);
          progress.style.width = `${percentage}%`;
          
          // Cambiar color según el porcentaje
          if (percentage > 90) {
            progress.className = 'word-counter-progress danger';
          } else if (percentage > 70) {
            progress.className = 'word-counter-progress warning';
          } else {
            progress.className = 'word-counter-progress';
          }
          
          updateTotalWordCount();
        });
      }
      
      // Configurar contadores de palabras
      updateWordCounter('titulo', 'tituloWordCount', 'tituloWordProgress', 30);
      updateWordCounter('introduccion', 'introduccionWordCount', 'introduccionWordProgress', 100);
      updateWordCounter('materiales', 'materialesWordCount', 'materialesWordProgress', 70);
      updateWordCounter('resultados', 'resultadosWordCount', 'resultadosWordProgress', 80);
      updateWordCounter('conclusiones', 'conclusionesWordCount', 'conclusionesWordProgress', 50);
      
      // Actualizar contador total de palabras
      function updateTotalWordCount() {
        const introduccion = countWords(document.getElementById('introduccion').value || '');
        const materiales = countWords(document.getElementById('materiales').value || '');
        const resultados = countWords(document.getElementById('resultados').value || '');
        const conclusiones = countWords(document.getElementById('conclusiones').value || '');
        
        const totalWords = introduccion + materiales + resultados + conclusiones;
        const totalWordCount = document.getElementById('totalWordCount');
        const totalWordProgress = document.getElementById('totalWordProgress');
        
        if (totalWordCount && totalWordProgress) {
          totalWordCount.textContent = totalWords;
          
          // Actualizar barra de progreso
          const percentage = Math.min((totalWords / 300) * 100, 100);
          totalWordProgress.style.width = `${percentage}%`;
          
          // Cambiar color según el porcentaje
          if (percentage > 90) {
            totalWordProgress.className = 'progress-bar bg-danger';
          } else if (percentage > 70) {
            totalWordProgress.className = 'progress-bar bg-warning';
          } else {
            totalWordProgress.className = 'progress-bar bg-success';
          }
        }
        
        return totalWords;
      }
      
      // Actualizar la barra de progreso
      function updateProgressBar() {
        const progress = ((currentStep - 1) / (totalSteps - 1)) * 100;
        document.getElementById('formProgressBar').style.width = `${progress}%`;
        
        // Actualizar indicadores de pasos
        const stepItems = document.querySelectorAll('#stepIndicator .step-item');
        stepItems.forEach((item, index) => {
          const step = index + 1;
          if (step < currentStep) {
            item.classList.remove('active');
            item.classList.add('completed');
          } else if (step === currentStep) {
            item.classList.add('active');
            item.classList.remove('completed');
          } else {
            item.classList.remove('active', 'completed');
          }
        });
        
        // Actualizar título y descripción de la sección
        const currentSection = document.querySelector(`.form-section[data-step="${currentStep}"]`);
        if (currentSection) {
          const title = currentSection.dataset.title;
          const description = currentSection.dataset.description;
          
          document.getElementById('formSectionTitle').textContent = title;
          document.getElementById('formSectionDescription').textContent = description;
        }
      }
      
      // Mostrar solo la sección activa con animación
      function showSection(step) {
        // Ocultar sección actual
        const currentSectionElem = document.querySelector('.form-section.active');
        
        if (currentSectionElem) {
          gsap.to(currentSectionElem, {
            opacity: 0,
            y: -20,
            duration: 0.3,
            onComplete: function() {
              currentSectionElem.classList.remove('active');
              
              // Mostrar nueva sección
              const newSectionElem = document.querySelector(`.form-section[data-step="${step}"]`);
              if (newSectionElem) {
                newSectionElem.classList.add('active');
                gsap.fromTo(
                  newSectionElem,
                  { opacity: 0, y: 20 },
                  { opacity: 1, y: 0, duration: 0.5 }
                );
              }
            }
          });
        } else {
          // Si no hay sección activa, solo mostrar la nueva
          const newSectionElem = document.querySelector(`.form-section[data-step="${step}"]`);
          if (newSectionElem) {
            newSectionElem.classList.add('active');
            gsap.fromTo(
              newSectionElem,
              { opacity: 0, y: 20 },
              { opacity: 1, y: 0, duration: 0.5 }
            );
          }
        }
        
        currentStep = step;
        updateProgressBar();
        window.scrollTo({ top: 0, behavior: 'smooth' });
      }
      
      // Validar correo electrónico
      function isValidEmail(email) {
        const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        return regex.test(email);
      }
      
      // Validar la sección actual antes de avanzar
      function validateCurrentSection() {
        const currentSectionElem = document.querySelector(`.form-section[data-step="${currentStep}"]`);
        let isValid = true;
        
        // Validar campos requeridos
        const requiredInputs = currentSectionElem.querySelectorAll('[required]');
        requiredInputs.forEach(input => {
          if (input.type === 'radio' || input.type === 'checkbox') {
            const name = input.name;
            const checked = currentSectionElem.querySelector(`input[name="${name}"]:checked`);
            
            if (!checked) {
              const formGroup = input.closest('.form-group') || input.closest('.card-radio-group') || input.closest('.form-check');
              formGroup.classList.add('is-invalid');
              isValid = false;
            }
          } else if (input.value.trim() === '') {
            input.classList.add('is-invalid');
            isValid = false;
          } else if (input.type === 'email' && !isValidEmail(input.value)) {
            input.classList.add('is-invalid');
            isValid = false;
          } else {
            input.classList.remove('is-invalid');
          }
        });
        
        // Validaciones específicas por sección
        if (currentStep === 5) {
          // Verificar que los correos electrónicos sean únicos
          const emails = [];
          let hasDuplicate = false;
          
          const emailInputs = currentSectionElem.querySelectorAll('input[type="email"]');
          emailInputs.forEach(input => {
            const email = input.value.trim();
            if (email && emails.includes(email)) {
              input.classList.add('is-invalid');
              input.nextElementSibling.textContent = 'Este correo ya ha sido utilizado. Los correos deben ser únicos.';
              isValid = false;
              hasDuplicate = true;
            } else if (email) {
              emails.push(email);
            }
          });
        }
        
        if (currentStep === 6) {
          // Validar límite total de palabras
          const totalWords = updateTotalWordCount();
          if (totalWords > 300) {
            Swal.fire({
              title: '¡Límite de palabras excedido!',
              text: `El resumen completo no debe superar las 300 palabras. Actualmente tiene ${totalWords} palabras.`,
              icon: 'error',
              confirmButtonText: 'Entendido'
            });
            isValid = false;
          }
        }
        
        return isValid;
      }
      
      // Generar dinámicamente las secciones de autores adicionales
      function generateAuthorSections() {
        // Ocultar todos los autores adicionales primero
        for (let i = 4; i <= 10; i++) {
          const authorCard = document.querySelector(`.autor-card[data-autor="${i}"]`);
          if (authorCard) {
            authorCard.remove();
          }
        }
        
        // Generar autores según la cantidad seleccionada
        for (let i = 4; i <= authorCount; i++) {
          createAuthorSection(i);
        }
      }
      
      // Crear una sección de autor
      function createAuthorSection(authorNumber) {
        const authorContainer = document.getElementById('autoresContainer');
        
        const authorSection = document.createElement('div');
        authorSection.className = 'autor-card';
        authorSection.dataset.autor = authorNumber;
        authorSection.innerHTML = `
          <div class="autor-heading">
            <div class="autor-number">${authorNumber}</div>
            <h3 class="autor-title">Autor #${authorNumber}</h3>
          </div>
          
          <div class="form-group">
            <label class="form-label required">Información personal</label>
            <div class="autor-inputs-row">
              <select class="form-select" name="titulo_autor${authorNumber}" required>
                <option value="">Prefijo</option>
                <option value="Dr.">Dr.</option>
                <option value="Dra.">Dra.</option>
                <option value="Sr.">Sr.</option>
                <option value="Sra.">Sra.</option>
                <option value="Srta.">Srta.</option>
                <option value="Ph.D.">Ph.D.</option>
                <option value="Enf.">Enf.</option>
                <option value="MSc.">MSc.</option>
              </select>
              <input type="text" class="form-control" name="autor${authorNumber}" placeholder="Nombre" required>
              <input type="text" class="form-control" name="apellido_autor${authorNumber}" placeholder="Apellido" required>
            </div>
            <div class="invalid-feedback">
              <i class="fas fa-exclamation-circle me-1"></i> Por favor complete todos los campos
            </div>
          </div>
          
          <div class="form-group">
            <label for="emailAutor${authorNumber}" class="form-label required">E-mail</label>
            <input type="email" class="form-control" id="emailAutor${authorNumber}" name="email_autor${authorNumber}" placeholder="ejemplo@ejemplo.com" required>
            <div class="invalid-feedback">
              <i class="fas fa-exclamation-circle me-1"></i> Por favor ingrese un correo electrónico válido
            </div>
          </div>
          
          <div class="form-group">
            <label for="instAutor${authorNumber}" class="form-label required">Institución</label>
            <input type="text" class="form-control" id="instAutor${authorNumber}" name="inst_autor${authorNumber}" placeholder="Nombre de la institución" required>
            <div class="invalid-feedback">
              <i class="fas fa-exclamation-circle me-1"></i> Por favor ingrese la institución
            </div>
          </div>
        `;
        
        authorContainer.appendChild(authorSection);
        
        // Animar la entrada
        gsap.fromTo(
          authorSection,
          { opacity: 0, y: 20 },
          { opacity: 1, y: 0, duration: 0.5, delay: 0.1 }
        );
      }
      
      // Cuando se cambie el número de autores
      document.getElementById('numeroAutores').addEventListener('change', function() {
        authorCount = parseInt(this.value);
        generateAuthorSections();
      });
      
      // Manejo de carga de archivos
      document.getElementById('archivo').addEventListener('change', function(e) {
        const fileList = document.getElementById('fileList');
        fileList.innerHTML = '';
        
        if (this.files.length > 0) {
          const file = this.files[0];
          const fileSize = (file.size / 1024).toFixed(2);
          let fileIcon = 'fa-file';
          
          // Determinar el ícono según la extensión
          const extension = file.name.split('.').pop().toLowerCase();
          if (['pdf'].includes(extension)) fileIcon = 'fa-file-pdf';
          if (['doc', 'docx'].includes(extension)) fileIcon = 'fa-file-word';
          if (['jpg', 'jpeg', 'png', 'gif'].includes(extension)) fileIcon = 'fa-file-image';
          
          const fileItem = document.createElement('div');
          fileItem.className = 'file-item';
          fileItem.innerHTML = `
            <i class="fas ${fileIcon} file-item-icon"></i>
            <div class="file-item-info">
              <div class="file-item-name">${file.name}</div>
              <div class="file-item-size">${fileSize} KB</div>
            </div>
            <div class="file-item-remove" id="removeFile"><i class="fas fa-times"></i></div>
          `;
          
          fileList.appendChild(fileItem);
          
          // Animar entrada del archivo
          gsap.from(fileItem, {
            opacity: 0,
            x: -20,
            duration: 0.3
          });
          
          // Eliminar archivo
          document.getElementById('removeFile').addEventListener('click', function() {
            document.getElementById('archivo').value = '';
            gsap.to(fileItem, {
              opacity: 0,
              x: -20,
              duration: 0.3,
              onComplete: () => {
                fileList.innerHTML = '';
              }
            });
          });
        }
      });
      
      // Generar vista previa para revisión
      function generatePreview() {
        const resumenPreview = document.getElementById('resumenPreview');
        
        // Recopilar datos del formulario
        const titulo = document.getElementById('titulo').value;
        const idioma = document.querySelector('input[name="idioma"]:checked')?.value || '';
        const tipoPresentacion = document.getElementById('tipoPresentacion').options[document.getElementById('tipoPresentacion').selectedIndex]?.text || '';
        const areaTematica = document.querySelector('input[name="area_tematica"]:checked')?.parentElement.textContent.trim() || '';
        const categoria = document.getElementById('categoriaCompetencia').options[document.getElementById('categoriaCompetencia').selectedIndex]?.text || '';
        const introduccion = document.getElementById('introduccion').value;
        const materiales = document.getElementById('materiales').value;
        const resultados = document.getElementById('resultados').value;
        const conclusiones = document.getElementById('conclusiones').value;
        const pais = document.getElementById('pais').options[document.getElementById('pais').selectedIndex]?.text || '';
        const ciudad = document.getElementById('ciudad').value;
        const institucion = document.getElementById('institucion').value;
        
        // Crear HTML para la vista previa
        resumenPreview.innerHTML = `
          <div class="mb-4">
            <h5 class="text-primary mb-3">Información Básica</h5>
            <div class="row mb-2">
              <div class="col-md-3 fw-bold">Idioma:</div>
              <div class="col-md-9">${idioma}</div>
            </div>
            <div class="row mb-2">
              <div class="col-md-3 fw-bold">Título:</div>
              <div class="col-md-9">${titulo}</div>
            </div>
            <div class="row mb-2">
              <div class="col-md-3 fw-bold">Tipo de Presentación:</div>
              <div class="col-md-9">${tipoPresentacion}</div>
            </div>
            <div class="row mb-2">
              <div class="col-md-3 fw-bold">Área Temática:</div>
              <div class="col-md-9">${areaTematica}</div>
            </div>
            <div class="row">
              <div class="col-md-3 fw-bold">Categoría:</div>
              <div class="col-md-9">${categoria}</div>
            </div>
          </div>
          
          <div class="mb-4">
            <h5 class="text-primary mb-3">Resumen</h5>
            <div class="row mb-2">
              <div class="col-md-3 fw-bold">Introducción:</div>
              <div class="col-md-9">${introduccion}</div>
            </div>
            <div class="row mb-2">
              <div class="col-md-3 fw-bold">Materiales y Métodos:</div>
              <div class="col-md-9">${materiales}</div>
            </div>
            <div class="row mb-2">
              <div class="col-md-3 fw-bold">Resultados:</div>
              <div class="col-md-9">${resultados}</div>
            </div>
            <div class="row">
              <div class="col-md-3 fw-bold">Conclusiones:</div>
              <div class="col-md-9">${conclusiones}</div>
            </div>
          </div>
          
          <div class="mb-4">
            <h5 class="text-primary mb-3">Institución y Ubicación</h5>
            <div class="row mb-2">
              <div class="col-md-3 fw-bold">Institución:</div>
              <div class="col-md-9">${institucion}</div>
            </div>
            <div class="row">
              <div class="col-md-3 fw-bold">Ubicación:</div>
              <div class="col-md-9">${ciudad}, ${pais}</div>
            </div>
          </div>
          
          <div>
            <h5 class="text-primary mb-3">Autores</h5>
            <div class="row">
              <div class="col-12">
                <div class="table-responsive">
                  <table class="table table-bordered">
                    <thead class="table-light">
                      <tr>
                        <th>#</th>
                        <th>Nombre</th>
                        <th>Institución</th>
                        <th>Email</th>
                      </tr>
                    </thead>
                    <tbody id="autoresPreviewTable"></tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        `;
        
        // Llenar tabla de autores
        const autoresTable = document.getElementById('autoresPreviewTable');
        for (let i = 1; i <= authorCount; i++) {
          const prefix = document.querySelector(`select[name="titulo_autor${i}"]`)?.value || '';
          const firstName = document.querySelector(`input[name="autor${i}"]`)?.value || '';
          const lastName = document.querySelector(`input[name="apellido_autor${i}"]`)?.value || '';
          const institution = document.querySelector(`input[name="inst_autor${i}"]`)?.value || '';
          const email = document.querySelector(`input[name="email_autor${i}"]`)?.value || '';
          
          const row = document.createElement('tr');
          row.innerHTML = `
            <td>${i} ${i === 1 ? '<span class="badge bg-accent">Ponente</span>' : ''}</td>
            <td>${prefix} ${firstName} ${lastName}</td>
            <td>${institution}</td>
            <td>${email}</td>
          `;
          
          autoresTable.appendChild(row);
        }
      }
      
      // Navegación: Siguiente
      for (let i = 1; i <= totalSteps; i++) {
        const nextButton = document.getElementById(`nextBtn${i}`);
        if (nextButton) {
          nextButton.addEventListener('click', function() {
            if (validateCurrentSection()) {
              if (i < totalSteps) {
                showSection(i + 1);
              }
              if (i === totalSteps - 1) {
                generatePreview();
              }
            } else {
              // Scroll al primer error
              const firstInvalid = document.querySelector('.form-section.active .is-invalid, .form-section.active .has-error');
              if (firstInvalid) {
                firstInvalid.scrollIntoView({ behavior: 'smooth', block: 'center' });
                
                // Animar para destacar el error
                gsap.to(firstInvalid, {
                  x: [-5, 5, -5, 5, 0],
                  duration: 0.4,
                  ease: "power1.inOut"
                });
              }
            }
          });
        }
      }
      
      // Navegación: Anterior
      for (let i = 2; i <= totalSteps; i++) {
        const prevButton = document.getElementById(`prevBtn${i}`);
        if (prevButton) {
          prevButton.addEventListener('click', function() {
            showSection(i - 1);
          });
        }
      }
      
      // Envío del formulario
      document.getElementById('abstractForm').addEventListener('submit', function(e) {
        e.preventDefault();
        
        if (validateCurrentSection()) {
          // Mostrar overlay de carga
          document.getElementById('loadingOverlay').classList.add('active');
          
          // Recopilar datos del formulario
          const formData = new FormData(this);
          
          // Enviar datos al servidor
          fetch('process_form.php', {
            method: 'POST',
            body: formData
          })
          .then(response => response.json())
          .then(data => {
            // Ocultar overlay de carga
            document.getElementById('loadingOverlay').classList.remove('active');
            
            if (data.success) {
              // Mostrar número de referencia
              document.getElementById('referenceNumber').textContent = data.reference;
              
              // Mostrar sección de éxito
              const successSection = document.querySelector('.form-section[data-step="success"]');
              const activeSection = document.querySelector('.form-section.active');
              
              if (successSection && activeSection) {
                activeSection.classList.remove('active');
                successSection.style.display = 'block';
                
                gsap.fromTo(
                  successSection,
                  { opacity: 0, scale: 0.9 },
                  { 
                    opacity: 1, 
                    scale: 1, 
                    duration: 0.5, 
                    ease: "back.out(1.7)",
                    onComplete: function() {
                      // Ocultar la barra de progreso y los indicadores de paso
                      gsap.to('.progress-container', { opacity: 0, height: 0, duration: 0.3 });
                    }
                  }
                );
                
                // Efecto de confeti para celebrar
                launchConfetti();
              }
              
              // Enviar correo de confirmación (esto se hace en el backend)
            } else {
              // Mostrar error
              Swal.fire({
                title: 'Error',
                text: data.message || 'Ha ocurrido un error al enviar el formulario. Por favor intente nuevamente.',
                icon: 'error',
                confirmButtonText: 'Entendido'
              });
            }
          })
          .catch(error => {
            // Ocultar overlay de carga
            document.getElementById('loadingOverlay').classList.remove('active');
            
            // Mostrar error
            Swal.fire({
              title: 'Error',
              text: 'Ha ocurrido un error al enviar el formulario. Por favor intente nuevamente.',
              icon: 'error',
              confirmButtonText: 'Entendido'
            });
            
            console.error('Error:', error);
          });
        }
      });
      
      // Botón para enviar otro resumen
      document.getElementById('newSubmissionBtn')?.addEventListener('click', function() {
        // Reiniciar el formulario
        document.getElementById('abstractForm').reset();
        
        // Generar nuevo ID de envío
        document.getElementById('submissionId').value = generateSubmissionId();
        
        // Mostrar nuevamente la barra de progreso y los indicadores de paso
        gsap.to('.progress-container', { opacity: 1, height: 'auto', duration: 0.3 });
        
        // Ocultar sección de éxito y mostrar la primera sección
        const successSection = document.querySelector('.form-section[data-step="success"]');
        if (successSection) {
          successSection.style.display = 'none';
        }
        
        showSection(1);
      });
      
      // Función para lanzar confeti
      function launchConfetti() {
        const canvas = document.createElement('canvas');
        canvas.style.position = 'fixed';
        canvas.style.top = '0';
        canvas.style.left = '0';
        canvas.style.pointerEvents = 'none';
        canvas.style.width = '100vw';
        canvas.style.height = '100vh';
        canvas.style.zIndex = '9999';
        document.body.appendChild(canvas);
        
        const ctx = canvas.getContext('2d');
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        
        const confettiCount = 200;
        const gravity = 0.5;
        const colors = [
          '#1a5cb0', // Primary
          '#2978e2', // Primary Light
          '#1aae9f', // Secondary
          '#21d7c5', // Secondary Light
          '#ff6b35', // Accent
          '#ff8b5e'  // Accent Light
        ];
        const shapes = ['circle', 'square', 'triangle'];
        
        const confetti = [];
        
        // Crear confeti
        for (let i = 0; i < confettiCount; i++) {
          confetti.push({
            x: Math.random() * canvas.width,
            y: Math.random() * canvas.height - canvas.height,
            size: Math.random() * 10 + 5,
            color: colors[Math.floor(Math.random() * colors.length)],
            shape: shapes[Math.floor(Math.random() * shapes.length)],
            velocity: {
              x: Math.random() * 6 - 3,
              y: Math.random() * 3 + 2
            },
            rotation: Math.random() * 360,
            rotationSpeed: Math.random() * 10 - 5
          });
        }
        
        // Animar confeti
        function animateConfetti() {
          ctx.clearRect(0, 0, canvas.width, canvas.height);
          
          let allSettled = true;
          
          for (let i = 0; i < confetti.length; i++) {
            const p = confetti[i];
            
            p.velocity.y += gravity;
            p.x += p.velocity.x;
            p.y += p.velocity.y;
            p.rotation += p.rotationSpeed;
            
            if (p.y < canvas.height) {
              allSettled = false;
              
              ctx.save();
              ctx.translate(p.x, p.y);
              ctx.rotate(p.rotation * Math.PI / 180);
              
              ctx.fillStyle = p.color;
              
              if (p.shape === 'circle') {
                ctx.beginPath();
                ctx.arc(0, 0, p.size / 2, 0, Math.PI * 2);
                ctx.fill();
              } else if (p.shape === 'square') {
                ctx.fillRect(-p.size / 2, -p.size / 2, p.size, p.size);
              } else if (p.shape === 'triangle') {
                ctx.beginPath();
                ctx.moveTo(0, -p.size / 2);
                ctx.lineTo(p.size / 2, p.size / 2);
                ctx.lineTo(-p.size / 2, p.size / 2);
                ctx.closePath();
                ctx.fill();
              }
              
              ctx.restore();
            }
          }
          
          if (allSettled) {
            canvas.remove();
          } else {
            requestAnimationFrame(animateConfetti);
          }
        }
        
        animateConfetti();
      }
      
      // Countdown Timer
      function updateCountdown() {
        const deadline = new Date('January 30, 2026 23:59:59 EST');
        const now = new Date();
        
        const diff = deadline - now;
        
        // Cálculo de días, horas, minutos y segundos
        const days = Math.floor(diff / (1000 * 60 * 60 * 24));
        const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
        const seconds = Math.floor((diff % (1000 * 60)) / 1000);
        
        // Actualizar en el DOM
        document.getElementById('days').textContent = days.toString().padStart(2, '0');
        document.getElementById('hours').textContent = hours.toString().padStart(2, '0');
        document.getElementById('minutes').textContent = minutes.toString().padStart(2, '0');
        document.getElementById('seconds').textContent = seconds.toString().padStart(2, '0');
      }
      
      // Iniciar el countdown
      updateCountdown();
      setInterval(updateCountdown, 1000);
      
      // Inicializar el formulario
      updateProgressBar();
    });
  </script>
  <script src="assets/js/mantener-autores.js"></script>
</body>
</html>



