:root {
        --primary-blue: #0066cc;
        --secondary-blue: #004499;
        --light-blue: #3385d6;
        --accent-blue: #0052a3;
        --gradient-blue: linear-gradient(135deg, #0066cc 0%, #004499 100%);
        --soft-blue: #e6f2ff;
        --text-blue: #003366;
      }

      body {
        padding-top: 70px;
        padding-bottom: 140px;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        background-color: #f8faff;
      }

      /* Navbar mejorado */
      .navbar {
        background: var(--gradient-blue) !important;
        backdrop-filter: blur(10px);
        box-shadow: 0 2px 20px rgba(0, 102, 204, 0.3);
        transition: all 0.3s ease;
      }

      .navbar-brand {
        font-weight: 700;
        font-size: 1.8rem;
        color: white !important;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
      }

      .nav-link {
        color: rgba(255, 255, 255, 0.95) !important;
        font-weight: 500;
        transition: all 0.3s ease;
        position: relative;
      }

      .nav-link:hover {
        color: white !important;
        transform: translateY(-2px);
      }

      .nav-link::after {
        content: '';
        position: absolute;
        width: 0;
        height: 2px;
        bottom: -5px;
        left: 50%;
        background-color: white;
        transition: all 0.3s ease;
        transform: translateX(-50%);
      }

      .nav-link:hover::after {
        width: 80%;
      }

      /* Footer mejorado */
      footer {
        position: fixed;
        bottom: 0;
        width: 100%;
        background: var(--gradient-blue);
        color: white;
        z-index: 1000;
        box-shadow: 0 -2px 20px rgba(0, 102, 204, 0.3);
      }

      .social-links {
        display: flex;
        justify-content: center;
        gap: 20px;
        margin-bottom: 15px;
      }

      .social-link {
        color: white;
        font-size: 1.5rem;
        transition: all 0.3s ease;
        text-decoration: none;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 45px;
        height: 45px;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
      }

      .social-link:hover {
        color: white;
        transform: translateY(-3px) scale(1.1);
        background-color: rgba(255, 255, 255, 0.2);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
      }

      .social-link.facebook:hover { background-color: #1877f2; }
      .social-link.instagram:hover { 
        background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 
      }
      .social-link.twitter:hover { background-color: #1da1f2; }
      .social-link.linkedin:hover { background-color: #0077b5; }

      /* NUEVOS ESTILOS PARA NOTIFICACIONES TOAST FLOTANTES */
      .toast-container {
        position: fixed;
        top: 90px;
        right: 20px;
        z-index: 9999;
        pointer-events: none;
      }

      .toast-notification {
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(15px);
        border-radius: 15px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
        margin-bottom: 15px;
        min-width: 350px;
        max-width: 400px;
        border: none;
        pointer-events: auto;
        transform: translateX(400px);
        opacity: 0;
        transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
      }

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

      .toast-notification.hide {
        transform: translateX(400px);
        opacity: 0;
      }

      /* Estilos específicos por tipo */
      .toast-success {
        border-left: 5px solid #198754;
        background: linear-gradient(135deg, rgba(209, 242, 235, 0.95) 0%, rgba(255, 255, 255, 0.95) 100%);
      }

      .toast-info {
        border-left: 5px solid var(--primary-blue);
        background: linear-gradient(135deg, rgba(230, 242, 255, 0.95) 0%, rgba(255, 255, 255, 0.95) 100%);
      }

      .toast-warning {
        border-left: 5px solid #ffc107;
        background: linear-gradient(135deg, rgba(255, 243, 205, 0.95) 0%, rgba(255, 255, 255, 0.95) 100%);
      }

      .toast-danger {
        border-left: 5px solid #dc3545;
        background: linear-gradient(135deg, rgba(248, 215, 218, 0.95) 0%, rgba(255, 255, 255, 0.95) 100%);
      }

      .toast-header {
        background: transparent;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        padding: 12px 15px;
      }

      .toast-icon {
        font-size: 1.4rem;
        margin-right: 10px;
      }

      .toast-success .toast-icon { color: #198754; }
      .toast-info .toast-icon { color: var(--primary-blue); }
      .toast-warning .toast-icon { color: #ffc107; }
      .toast-danger .toast-icon { color: #dc3545; }

      .toast-title {
        font-weight: 600;
        margin: 0;
        font-size: 0.95rem;
        color: #2c3e50;
      }

      .toast-body {
        padding: 12px 15px;
        color: #495057;
        font-size: 0.9rem;
        line-height: 1.4;
      }

      .toast-close {
        background: none;
        border: none;
        font-size: 1.2rem;
        color: #6c757d;
        cursor: pointer;
        transition: color 0.3s ease;
        margin-left: auto;
        padding: 0;
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .toast-close:hover {
        color: #dc3545;
      }

      .toast-progress {
        position: absolute;
        bottom: 0;
        left: 0;
        height: 3px;
        border-radius: 0 0 15px 0;
        transition: width 0.1s ease;
      }

      .toast-success .toast-progress { background: #198754; }
      .toast-info .toast-progress { background: var(--primary-blue); }
      .toast-warning .toast-progress { background: #ffc107; }
      .toast-danger .toast-progress { background: #dc3545; }

      /* Responsive para móviles */
      @media (max-width: 768px) {
        .toast-container {
          right: 10px;
          left: 10px;
          top: 80px;
        }
        
        .toast-notification {
          min-width: auto;
          max-width: 100%;
          transform: translateY(-100px);
        }
        
        .toast-notification.show {
          transform: translateY(0);
        }
        
        .toast-notification.hide {
          transform: translateY(-100px);
        }
      }

      /* Alertas mejoradas (mantenemos para compatibilidad) */
      .alert {
        border: none;
        border-radius: 15px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        backdrop-filter: blur(10px);
      }

      .alert-info {
        background: linear-gradient(135deg, var(--soft-blue) 0%, rgba(230, 242, 255, 0.8) 100%);
        color: var(--text-blue);
        border-left: 4px solid var(--primary-blue);
      }

      .alert-success {
        background: linear-gradient(135deg, #d1f2eb 0%, rgba(209, 242, 235, 0.8) 100%);
        color: #0f5132;
        border-left: 4px solid #198754;
      }

      .alert-warning {
        background: linear-gradient(135deg, #fff3cd 0%, rgba(255, 243, 205, 0.8) 100%);
        color: #664d03;
        border-left: 4px solid #ffc107;
      }

      .alert-danger {
        background: linear-gradient(135deg, #f8d7da 0%, rgba(248, 215, 218, 0.8) 100%);
        color: #721c24;
        border-left: 4px solid #dc3545;
      }

      /* Títulos profesionales */
      .titulo-profesional {
        font-size: 2.5rem;
        font-weight: 700;
        background: var(--gradient-blue);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-align: center;
        margin: 40px 0 20px;
        text-transform: uppercase;
        letter-spacing: 1px;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }

      /* Carousel mejorado */
      .carousel-inner img {
        border-radius: 1rem;
        object-fit: cover;
        max-height: 500px;
        filter: brightness(1.1) contrast(1.05);
      }

      .carousel {
        box-shadow: 0 10px 40px rgba(0, 102, 204, 0.2);
        border-radius: 1rem;
        overflow: hidden;
        border: 2px solid rgba(0, 102, 204, 0.1);
      }

      .carousel-control-prev-icon,
      .carousel-control-next-icon {
        background-color: var(--primary-blue);
        border-radius: 50%;
        width: 3rem;
        height: 3rem;
        transition: all 0.3s ease;
      }

      .carousel-control-prev:hover .carousel-control-prev-icon,
      .carousel-control-next:hover .carousel-control-next-icon {
        background-color: var(--secondary-blue);
        transform: scale(1.1);
      }

      /* Botones mejorados */
      .btn-primary {
        background: var(--gradient-blue);
        border: none;
        border-radius: 25px;
        padding: 12px 30px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        transition: all 0.3s ease;
        box-shadow: 0 4px 15px rgba(0, 102, 204, 0.3);
      }

      .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0, 102, 204, 0.4);
        background: linear-gradient(135deg, var(--light-blue) 0%, var(--primary-blue) 100%);
      }

      /* Cards mejoradas */
      .card {
        border: none;
        border-radius: 20px;
        box-shadow: 0 8px 30px rgba(0, 102, 204, 0.1);
        transition: all 0.3s ease;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
      }

      .card:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 40px rgba(0, 102, 204, 0.2);
      }

      /* Animaciones */
      @keyframes fadeInUp {
        from {
          opacity: 0;
          transform: translateY(30px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      .container {
        animation: fadeInUp 0.8s ease-out;
      }

      /* Responsive design mejorado */
      @media (max-width: 768px) {
        body {
          padding-bottom: 160px;
        }
        
        .social-links {
          gap: 15px;
        }
        
        .social-link {
          width: 40px;
          height: 40px;
          font-size: 1.3rem;
        }
        
        .titulo-profesional {
          font-size: 2rem;
        }
        
        footer {
          padding: 15px 0;
        }
      }

      /* Efectos de glassmorphism */
      .glass-effect {
        background: rgba(255, 255, 255, 0.25);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 20px;
      }

      /* Estilos base existentes + nuevos estilos para toast y modal */

/* Estilos para las notificaciones toast */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.toast-notification {
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    width: 320px;
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.3s ease;
}

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

.toast-notification.hide {
    opacity: 0;
    transform: translateX(100%);
}

.toast-header {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    border-bottom: 1px solid #eee;
}

.toast-icon {
    margin-right: 8px;
    font-size: 1.2em;
}

.toast-success .toast-icon {
    color: #198754;
}

.toast-info .toast-icon {
    color: #0dcaf0;
}

.toast-warning .toast-icon {
    color: #ffc107;
}

.toast-danger .toast-icon {
    color: #dc3545;
}

.toast-title {
    flex-grow: 1;
    font-size: 0.9em;
}

.toast-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    font-size: 1.2em;
    color: #6c757d;
}

.toast-body {
    padding: 15px;
    font-size: 0.9em;
    line-height: 1.4;
}

.toast-progress {
    height: 4px;
    background: #007bff;
    transition: width 0.1s linear;
}

.toast-success .toast-progress {
    background: #198754;
}

.toast-info .toast-progress {
    background: #0dcaf0;
}

.toast-warning .toast-progress {
    background: #ffc107;
}

.toast-danger .toast-progress {
    background: #dc3545;
}

/* Estilos para el modal de logs */
.log-entry {
    border-left: 4px solid #6c757d;
    padding-left: 10px;
    margin-bottom: 8px;
    font-family: monospace;
    font-size: 0.9em;
}

/* Efecto de parallax suave en el navbar */
.navbar {
    transition: background-color 0.3s ease, backdrop-filter 0.3s ease;
}

/* Efecto hover para los enlaces de redes sociales */
.social-link {
    transition: transform 0.3s ease;
}

.social-link:hover {
    transform: translateY(-3px) scale(1.1) rotate(5deg);
}