• https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Orbitron:wght@500&family=Press+Start+2P&display=swap

/* MIXED CSS PACK */
/* Template: demo-bar-2/index.php */
/* Template mtime: 2025-08-08 16:57:09 */

/* external link (no embedded): https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Orbitron:wght@500&family=Press+Start+2P&display=swap */

/* ===== INLINE <style> BLOCK #1 ===== */
:root {
      --primary-color: #ff00c1;
      --secondary-color: #00f0ff;
      --accent-color: #ff3e9d;
      --text-color: #ffffff;
      --dark-bg: #0f0f1a;
      --neon-glow: 0 0 10px var(--primary-color), 
                  0 0 20px var(--secondary-color),
                  0 0 30px rgba(255, 62, 157, 0.5);
    }

    html, body {
      margin: 0;
      padding: 0;
      height: 100%;
      background: linear-gradient(135deg, #0f0c29 0%, #1a1a3e 50%, #24243e 100%);
      font-family: 'Montserrat', sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      color: var(--text-color);
      overflow-x: hidden;
      position: relative;
    }

    body::before {
      content: '';
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: 
        linear-gradient(rgba(255, 0, 193, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 0, 193, 0.1) 1px, transparent 1px);
      background-size: 20px 20px;
      z-index: -1;
      opacity: 0.5;
    }

    body.fade-in {
      animation: fadeIn 1s ease-out forwards;
    }

    body.fade-out {
      animation: fadeOut 1s ease-out forwards;
    }

    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    @keyframes fadeOut {
      from { opacity: 1; }
      to { opacity: 0; }
    }

    .title {
      font-family: 'Press Start 2P', 'Orbitron', sans-serif;
      font-size: 2.5rem;
      margin-bottom: 1.5rem;
      text-transform: uppercase;
      letter-spacing: 3px;
      color: var(--text-color);
      text-shadow: var(--neon-glow);
      position: relative;
      padding: 15px;
      border: 2px solid var(--secondary-color);
      box-shadow: inset 0 0 15px var(--primary-color), 0 0 15px var(--secondary-color);
      background: rgba(15, 15, 26, 0.7);
    }

    .title::after {
      content: 'â–¼';
      position: absolute;
      bottom: -25px;
      left: 50%;
      transform: translateX(-50%);
      color: var(--secondary-color);
      font-size: 1rem;
      animation: bounce 2s infinite;
    }

    @keyframes bounce {
      0%, 20%, 50%, 80%, 100% {transform: translateY(0) translateX(-50%);}
      40% {transform: translateY(-10px) translateX(-50%);}
      60% {transform: translateY(-5px) translateX(-50%);}
    }

    .video-container {
      position: relative;
      max-width: 90%;
      max-height: 70vh;
      border-radius: 5px;
      overflow: hidden;
      box-shadow: 0 0 30px rgba(106, 17, 203, 0.5);
      margin-bottom: 2rem;
      border: 1px solid var(--primary-color);
      transition: all 0.5s ease;
    }

    .video-container:hover {
      box-shadow: 0 0 50px rgba(255, 0, 193, 0.7);
      transform: scale(1.01);
    }

    .video-container.fade-out {
      opacity: 0;
      transform: scale(0.9);
    }

    video {
      max-width: 100%;
      max-height: 100%;
      display: block;
      filter: hue-rotate(0deg) saturate(1.2);
      transition: filter 0.5s ease;
    }

    .video-container:hover video {
      filter: hue-rotate(10deg) saturate(1.5);
    }

    .buttons-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 20px;
      margin-top: 20px;
      perspective: 1000px;
    }

    .boton {
      padding: 14px 30px;
      font-size: 1rem;
      font-weight: 600;
      color: white;
      background: linear-gradient(45deg, var(--primary-color) 0%, var(--secondary-color) 100%);
      border: none;
      border-radius: 0;
      cursor: pointer;
      text-decoration: none;
      transition: all 0.4s ease;
      box-shadow: 0 4px 15px rgba(37, 117, 252, 0.3);
      min-width: 200px;
      text-align: center;
      position: relative;
      overflow: hidden;
      font-family: 'Orbitron', sans-serif;
      letter-spacing: 1px;
      text-transform: uppercase;
      clip-path: polygon(10% 0%, 90% 0%, 100% 50%, 90% 100%, 10% 100%, 0% 50%);
    }

    .boton:hover {
      transform: translateY(-3px) rotateX(15deg);
      box-shadow: 0 10px 25px rgba(255, 0, 193, 0.6);
      text-shadow: 0 0 5px white;
    }

    .boton:active {
      transform: translateY(1px);
    }

    .boton::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: linear-gradient(
        to bottom right,
        transparent 45%,
        rgba(255, 255, 255, 0.3) 50%,
        transparent 55%
      );
      transform: rotate(30deg);
      transition: all 0.5s ease;
    }

    .boton:hover::before {
      left: 100%;
    }

    /* Overlay vaporwave/post-punk mejorado */
    #redirect-overlay {
      position: fixed;
      top: 0; 
      left: 0;
      width: 100%; 
      height: 100%;
      background: rgba(15, 15, 26, 0.85); /* Más transparente */
      backdrop-filter: blur(5px); /* Efecto de desenfoque */
      color: white;
      display: none;
      justify-content: center;
      align-items: center;
      font-size: 1.5rem;
      z-index: 9999;
      text-align: center;
      padding: 20px;
      opacity: 0;
      transition: opacity 0.8s ease;
      flex-direction: column;
      font-family: 'Press Start 2P', cursive;
    }

    #redirect-overlay.active {
      display: flex;
      opacity: 1;
    }

    #redirect-overlay::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: 
        linear-gradient(rgba(255, 0, 193, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 0, 193, 0.1) 1px, transparent 1px);
      background-size: 20px 20px;
      opacity: 0.5;
    }

    .redirect-content {
      position: relative;
      z-index: 2;
      text-align: center;
      width: 80%;
      max-width: 500px;
    }

    .redirect-text {
      margin-bottom: 30px;
      text-shadow: 0 0 10px var(--secondary-color);
      font-size: 1.2rem;
      position: relative;
    }

    .redirect-text span {
      color: var(--secondary-color);
      animation: glitch 1s linear infinite;
    }

    @keyframes glitch {
      0% {
        text-shadow: 0.05em 0 0 var(--primary-color), -0.05em -0.025em 0 var(--secondary-color);
      }
      14% {
        text-shadow: 0.05em 0 0 var(--primary-color), -0.05em -0.025em 0 var(--secondary-color);
      }
      15% {
        text-shadow: -0.05em -0.025em 0 var(--primary-color), 0.025em 0.025em 0 var(--secondary-color);
      }
      49% {
        text-shadow: -0.05em -0.025em 0 var(--primary-color), 0.025em 0.025em 0 var(--secondary-color);
      }
      50% {
        text-shadow: 0.025em 0.05em 0 var(--primary-color), 0.05em 0 0 var(--secondary-color);
      }
      99% {
        text-shadow: 0.025em 0.05em 0 var(--primary-color), 0.05em 0 0 var(--secondary-color);
      }
      100% {
        text-shadow: -0.025em 0 0 var(--primary-color), -0.025em -0.025em 0 var(--secondary-color);
      }
    }

    /* Barra de progreso mejorada */
    .loading-container {
      width: 100%;
      max-width: 400px;
      margin: 20px 0;
    }

    .loading-bar {
      width: 100%;
      height: 8px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 10px;
      overflow: hidden;
      position: relative;
      box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
    }

    .loading-progress {
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 0%;
      background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
      box-shadow: 0 0 10px var(--primary-color);
      transition: width 0.3s ease-out;
    }

    .progress-percentage {
      font-family: 'Orbitron', sans-serif;
      font-size: 1rem;
      color: var(--secondary-color);
      margin-top: 10px;
      text-shadow: 0 0 5px var(--primary-color);
    }

    .vhs-effect {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: 
        linear-gradient(rgba(0, 240, 255, 0.03) 0%, transparent 5%),
        linear-gradient(0deg, rgba(255, 0, 193, 0.03) 0%, transparent 5%);
      background-size: 100% 8px;
      pointer-events: none;
      z-index: 3;
      animation: scanlines 0.5s linear infinite;
    }

    @keyframes scanlines {
      from { background-position: 0 0; }
      to { background-position: 0 8px; }
    }

    .grid-lines {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: 
        linear-gradient(to right, 
          rgba(255, 0, 193, 0.05) 1px, 
          transparent 1px),
        linear-gradient(to bottom, 
          rgba(0, 240, 255, 0.05) 1px, 
          transparent 1px);
      background-size: 20px 20px;
      pointer-events: none;
      z-index: 1;
    }

    @media (max-width: 768px) {
      .title { 
        font-size: 1.5rem; 
        padding: 10px;
      }
      .video-container { 
        max-width: 95%;
        max-height: 50vh;
      }
      .buttons-container {
        flex-direction: column;
        align-items: center;
      }
      .boton { 
        width: 90%;
        font-size: 0.9rem;
      }
      .redirect-text {
        font-size: 1rem;
      }
    }

/* ===== INLINE <style> BLOCK #2 ===== */
#btnCerrarSesion {
    background: linear-gradient(45deg, #ff00ff, #00ffff);
    border: none;
    color: white;
    padding: 10px 20px;
    text-transform: uppercase;
    font-family: 'Courier New', monospace;
    font-weight: bold;
    letter-spacing: 2px;
    border-radius: 0;
    box-shadow: 0 0 10px rgba(255, 0, 255, 0.7),
                0 0 20px rgba(0, 255, 255, 0.5);
    text-shadow: 0 0 5px #fff;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

#btnCerrarSesion:hover {
    background: linear-gradient(45deg, #00ffff, #ff00ff);
    box-shadow: 0 0 15px rgba(255, 0, 255, 0.9),
                0 0 25px rgba(0, 255, 255, 0.7);
    transform: translateY(-2px);
}

#btnCerrarSesion::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        to bottom right,
        rgba(255, 255, 255, 0.3) 0%,
        rgba(255, 255, 255, 0) 60%
    );
    transform: rotate(30deg);
}

#btnCerrarSesion:hover::before {
    animation: shine 1.5s infinite;
}

@keyframes shine {
    0% {
        left: -50%;
    }
    100% {
        left: 150%;
    }
}

/* ===== INLINE <style> BLOCK #3 ===== */
<style>
  /* Modal más pequeño y compacto */
  #loginModal .modal-dialog {
    max-width: 320px;
    margin: 2rem auto; /* un poco más abajo */
  }

  /* Fondo oscuro translúcido */
  #loginModal .modal-content {
    background: transparent;
    backdrop-filter: blur(8px);
    border: none;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    position: relative;
  }

  /* Borde fino blanco */
  #loginModal .modal-content::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 10px;
    padding: 0.5px;
    background: rgba(255, 255, 255, 0.15);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
  }

  /* Header más bajo y sin botón de cerrar */
  #loginModal .modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0.75rem 1rem;
  }

  #loginModal .modal-title {
    color: white;
    font-size: 1rem;
    font-weight: 500;
    margin: 0 auto;
  }

  /* Ocultamos el botón cerrar (X) */
  #loginModal .btn-close {
    display: none;
  }

  /* Cuerpo del modal compacto */
  #loginModal .modal-body {
    padding: 1rem;
  }

  #loginModal .form-control {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 0.8rem;
    font-size: 0.9rem;
  }

  #loginModal .btn-login {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    border-radius: 6px;
    padding: 8px 0;
    font-size: 0.9rem;
    width: 100%;
    transition: all 0.2s ease;
  }

  #loginModal .btn-login:hover {
    background: rgba(255, 255, 255, 0.15);
  }

      

{
    "template": "demo-bar-2/index.php",
    "template_mtime": 1754672229,
    "template_mtime_human": "2025-08-08T16:57:09+00:00",
    "css_links_found": [
        "https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Orbitron:wght@500&family=Press+Start+2P&display=swap"
    ],
    "css_links_external": [
        "https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Orbitron:wght@500&family=Press+Start+2P&display=swap"
    ],
    "css_links_embedded": [],
    "inline_style_blocks": 3,
    "inline_imports_external": [],
    "inline_imports_embedded": [],
    "missing_css_files": []
}