/* ===============================
       🎡 LOADER GLOBAL MODERNO
       =============================== */
    #loader-wrapper {
      position: fixed;
      inset: 0;
      background: radial-gradient(circle at center, rgba(30, 30, 30, 0.95) 0%, rgba(10, 10, 10, 0.9) 100%);
      z-index: 99999;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 1;
      visibility: visible;
      transition: opacity 0.8s ease-in-out, visibility 0.8s ease-in-out, transform 0.8s ease-in-out;
      will-change: opacity, transform;
    }

    body.loaded #loader-wrapper {
      opacity: 0;
      visibility: hidden;
      transform: translateY(-15px);
    }

    /* ===============================
       🎯 SPINNER DE TRES CAPAS
       =============================== */
    #loader {
      position: relative;
      width: 150px;
      height: 150px;
      border-radius: 50%;
      border: 3px solid transparent;
      border-top-color: #3498db;
      animation: spin 2s cubic-bezier(0.42, 0, 0.58, 1) infinite;
      will-change: transform, border;
      filter: drop-shadow(0 0 6px rgba(52, 152, 219, 0.6));
    }

    #loader::before,
    #loader::after {
      content: "";
      position: absolute;
      border-radius: 50%;
      border: 3px solid transparent;
      top: 10px;
      left: 10px;
      right: 10px;
      bottom: 10px;
      will-change: transform, border;
    }

    #loader::before {
      border-top-color: #e74c3c;
      animation: spin 3s ease-in-out infinite;
      filter: drop-shadow(0 0 6px rgba(231, 76, 60, 0.5));
    }

    #loader::after {
      border-top-color: #f9c922;
      animation: spin 1.5s linear infinite reverse;
      filter: drop-shadow(0 0 6px rgba(249, 201, 34, 0.5));
    }

    /* ===============================
       ✨ TEXTO DE CARGA ANIMADO
       =============================== */
    .loader-text {
      position: absolute;
      bottom: -40px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 1rem;
      font-family: "Segoe UI", Arial, sans-serif;
      color: #f1f1f1;
      opacity: 0.8;
      letter-spacing: 0.5px;
      animation: pulse 1.5s ease-in-out infinite;
    }

    @keyframes pulse {
      0%, 100% { opacity: 0.5; }
      50% { opacity: 1; }
    }

    /* ===============================
       🌪️ SPIN ANIMATION
       =============================== */
    @keyframes spin {
      0%   { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    /* ===============================
       🧱 SECCIONES IZQ / DER (fade suave)
       =============================== */
    #loader-wrapper .loader-section {
      position: fixed;
      top: 0;
      width: 50%;
      height: 100%;
      background: rgba(34, 34, 34, 0.8);
      transition: transform 1s cubic-bezier(0.65, 0, 0.35, 1);
      will-change: transform;
    }

    #loader-wrapper .section-left {
      left: 0;
      transform: translateX(0);
    }

    #loader-wrapper .section-right {
      right: 0;
      transform: translateX(0);
    }

    body.loaded #loader-wrapper .section-left {
      transform: translateX(-100%);
    }

    body.loaded #loader-wrapper .section-right {
      transform: translateX(100%);
    }

    /* ===============================
       ✨ EFECTO FINAL DE SALIDA
       =============================== */
    body.loaded #loader {
      opacity: 0;
      transition: opacity 0.4s ease-out;
    }

    /* ===============================
       🛡️ SAFETY NET: auto-ocultar tras 20 s
       Si la página falla (error PHP, red, etc.)
       el loader desaparece solo para no bloquear
       la pantalla indefinidamente.
       body.loaded cancela esta animación.
       =============================== */
    @keyframes loaderSafetyHide {
      0%, 99% {
        opacity: 1;
        visibility: visible;
      }
      100% {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
      }
    }

    #loader-wrapper {
      animation: loaderSafetyHide 0.5s 20s forwards;
    }

    /* Cuando la página carga correctamente, se anula el safety net */
    body.loaded #loader-wrapper {
      animation: none;
    }