#overlay {
      position: fixed;
      top:0; left:0;
      width:100%;
      height:100vh; /* asegura cubrir toda la ventana visible */
      background: rgba(0,0,0,0.7);
      display:flex;
      align-items:center;
      justify-content:center;
      opacity:0;
      pointer-events:none;
      transition: opacity 0.5s ease;
      z-index: 9999; /* más alto que todo lo demás */
      padding: 1rem;
      box-sizing: border-box;
    }
    #overlay.active { opacity:1; pointer-events:auto; }

    /* Modal */
    #modalBienvenida {
      background: #222; /* gris oscuro */
      border: 3px solid rgb(255, 255, 255);
      border-radius: 15px;
      padding: 2rem 3rem;
      text-align: center;
      color: white;
      box-shadow: 0 0 30px rgba(155, 155, 155, 0.7);
      transform: scale(0.8);
      opacity:0;
      transition: all 0.5s ease;
      width: 100%;
      max-width: 400px;
    }
    #modalBienvenida.active {
      transform: scale(1);
      opacity:1;
    }

    /* Texto modal */
    #modalBienvenida h2 {
      font-size: 1.8rem;
      margin-bottom: 1.5rem;
    }

    /* Botón */
    #btnEntrar {
      margin-top: 1.5rem;
      padding: 1rem 2rem;
      border: none;
      border-radius: 0.75rem;
      background: rgb(255, 255, 255);
      color: rgb(0, 0, 0);
      font-size: 1.2rem;
      cursor: pointer;
      transition: all 0.2s ease;
      width: 100%;
      max-width: 250px;
    }
    #btnEntrar:hover {
      background: rgb(0, 0, 0);
      color: #fff;
      transform: scale(1.05);
    }

    /* Media queries para móviles */
    @media (max-width: 480px) {
      #modalBienvenida h2 { font-size: 1.5rem; }
      #btnEntrar { font-size: 1rem; padding: 0.8rem 1.5rem; }
    }